/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.1
Text Domain: hello-elementor-child
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 */


/* Đổi chữ Tagged tiếng Anh thành 'Từ khóa: ' */
.entry-footer,
.post-tags,
.tagged-in {
    font-size: 0 !important;
}

.entry-footer::before,
.post-tags::before,
.tagged-in::before {
    content: "Từ khóa: " !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #002147 !important;
}

.entry-footer a,
.post-tags a,
.tagged-in a {
    font-size: 14px !important;
    color: #007BFF !important;
    margin-right: 6px !important;
}

/* 1. Nạp font Roboto từ Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400;1,700&display=swap');

/* 2. Áp dụng font Roboto cho toàn bộ trang bài viết */
.site-main,
.page-header h1,
.page-content,
.page-content p,
.page-content span,
.page-content li,
.page-content h1, .page-content h2, .page-content h3, .page-content h4,
.post-tags,
.post-tags::before,
.post-tags a,
.tag-links a {
    font-family: 'Roboto', sans-serif !important;
}

/* 3. Tối ưu kích thước & khoảng cách dòng cho bài đọc êm mắt */
.page-content p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #374151 !important;
}


/* ==========================================================================
   SECTION 4: PHỤ HUYNH & HỌC VIÊN NÓI GÌ (.phongvt-feedback)
   Giao diện chuẩn SLA với Card viền lượn sóng SVG (::before) & Nút tròn viền đứt
   ========================================================================== */
.section.phongvt-feedback,
.elementor-section.phongvt-feedback,
.elementor-element.phongvt-feedback {
    background: linear-gradient(180deg, #bbf6ff 0%, #ffffff 100%) !important;
    padding-top: 60px !important;
    padding-bottom: 70px !important;
}

.phongvt-feedback h2,
.phongvt-feedback .elementor-heading-title {
    font-size: 30px !important;
    color: #0d3b66 !important;
    text-align: center;
    font-weight: 800;
}

/* Ẩn divider cam nếu có để đúng mẫu */
.phongvt-feedback .elementor-widget-divider {
    display: none !important;
}

/* Dành khoảng đệm an toàn 75px ở đáy cho 2 nút Next/Prev, và overflow: hidden để chỉ hiển thị đúng 3 khối */
.phongvt-feedback .elementor-main-swiper {
    padding-top: 15px !important;
    padding-bottom: 75px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Triệt tiêu toàn bộ màu nền/viền chữ nhật mặc định của Elementor */
.phongvt-feedback .swiper-slide,
.phongvt-feedback .elementor-testimonial,
.phongvt-feedback .elementor-testimonial__header,
.phongvt-feedback .elementor-testimonial__content {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Base Card Styling */
.phongvt-feedback .testimonial-box,
.phongvt-feedback .elementor-testimonial {
    position: relative;
    padding: 20px 22px 42px 22px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 400px;
    transition: all 0.35s ease;
}

/* Lớp nền ::before chứa SVG lượn sóng viền đỏ chuẩn mẫu */
.phongvt-feedback .testimonial-box::before,
.phongvt-feedback .elementor-testimonial::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80%;
    pointer-events: none;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1448 922" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M1356.34 22.1114C924.251 -9.03098 401.784 -5.26023 96.2822 20.8442C61.6385 23.8045 33.5749 49.9675 28.3935 84.3492C-16.1595 379.988 -1.77575 665.634 27.1422 840.09C32.7627 873.997 61.2945 898.845 95.574 901.339C522.111 932.373 968.22 924.218 1352.58 900.702C1387.87 898.543 1417.19 872.807 1422.12 837.791C1448.48 650.255 1462.77 303.276 1423.8 81.3584C1417.99 48.2734 1389.85 24.5262 1356.34 22.1114Z" fill="%23C8102E"/><path d="M1310.14 59.809C923.284 25.3291 446.236 39.496 145.516 60.6607C103.269 63.6341 68.6712 95.1845 62.9364 137.146C29.4612 382.086 38.6299 640.686 61.5967 794.428C67.5946 834.579 101.465 863.647 141.968 866.411C536.13 893.304 947.111 886.341 1303.44 865.744C1345.37 863.32 1380.35 832.847 1385.95 791.215C1408.9 620.527 1420.5 326.102 1387.56 129.398C1381.14 91.0372 1348.89 63.2619 1310.14 59.809Z" fill="white"/></svg>') no-repeat center / 100% 100%;
    z-index: -1;
}

/* Căn chỉnh Avatar */
.phongvt-feedback .elementor-testimonial__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    width: 100%;
}

.phongvt-feedback .elementor-testimonial__image,
.phongvt-feedback .testimonial-image,
.phongvt-feedback .testimonial-image-wrapper {
    width: 95px !important;
    height: 95px !important;
    margin: 0 auto 12px auto !important;
    position: relative;
    z-index: 2;
}

.phongvt-feedback .elementor-testimonial__image img,
.phongvt-feedback .testimonial-image img,
.phongvt-feedback .testimonial-image-wrapper img {
    width: 95px !important;
    height: 95px !important;
    border-radius: 50% !important;
    border: 5px solid #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
    object-fit: cover !important;
    padding: 0 !important;
    display: block;
    transition: all 0.3s ease;
}

.phongvt-feedback .elementor-testimonial__cite {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.phongvt-feedback .elementor-testimonial__name,
.phongvt-feedback .testimonial-name {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin-bottom: 2px !important;
}

.phongvt-feedback .elementor-testimonial__title,
.phongvt-feedback .testimonial-company,
.phongvt-feedback .testimonial-role {
    font-size: 14px !important;
    color: #6B7280 !important;
    margin-bottom: 6px !important;
    font-weight: 500 !important;
    text-align: center !important;
}

/* Ẩn icon mạng xã hội Twitter */
.phongvt-feedback .elementor-testimonial__icon {
    display: none !important;
}

/* 5 Sao đánh giá */
.phongvt-feedback .elementor-testimonial__rating,
.phongvt-feedback .star-rating,
.phongvt-feedback .testimonial-stars {
    text-align: center !important;
    margin: 4px 0 10px 0 !important;
    color: #F59E0B !important;
    font-size: 22px !important;
}

/* Đoạn trích dẫn nhận xét */
.phongvt-feedback .elementor-testimonial__content,
.phongvt-feedback .testimonial-text,
.phongvt-feedback .testimonial-quote {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #374151 !important;
    font-style: italic !important;
    text-align: center !important;
    padding: 0 8px !important;
}

/* ==========================================================================
   QUY TẮC FOCUS SLIDE: LUÔN LÀM NỔI BẬT THẺ Ở CHÍNH GIỮA (CENTER CARD)
   Hỗ trợ cả Swiper có centeredSlides lẫn Swiper 3 cột tiêu chuẩn
   ========================================================================== */
/* Mặc định tất cả các slide thu nhỏ 86% và mờ nhẹ 0.65 */
.phongvt-feedback .swiper-slide {
    opacity: 0.65 !important;
    transform: scale(0.86) !important;
    transition: transform 0.4s ease, opacity 0.4s ease !important;
}

/* Trường hợp 1: Khi bật centeredSlides (hoặc Flickity is-selected): Thẻ active là thẻ chính giữa */
.phongvt-feedback .swiper-slide.swiper-slide-active,
.phongvt-feedback .flickity-slider > .row.is-selected {
    opacity: 1 !important;
    transform: scale(1.02) !important;
    z-index: 5 !important;
}

.phongvt-feedback .swiper-slide.swiper-slide-active .elementor-testimonial__image img,
.phongvt-feedback .is-selected .testimonial-image img,
.phongvt-feedback .is-selected .testimonial-image-wrapper img {
    border: 4px solid #C8102E !important;
    box-shadow: 0 6px 18px rgba(200, 16, 46, 0.28) !important;
}

/* Trường hợp 2: Khi Swiper chạy 3 slide chuẩn (thẻ giữa là swiper-slide-next liền kề) */
@media (min-width: 1025px) {
    .phongvt-feedback .elementor-main-swiper:not(.is-centered) .swiper-slide-active {
        opacity: 0.65 !important;
        transform: scale(0.86) !important;
        z-index: 1 !important;
    }
    .phongvt-feedback .elementor-main-swiper:not(.is-centered) .swiper-slide-active .elementor-testimonial__image img {
        border: 5px solid #ffffff !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
    }
    .phongvt-feedback .elementor-main-swiper:not(.is-centered) .swiper-slide-active + .swiper-slide {
        opacity: 1 !important;
        transform: scale(1.02) !important;
        z-index: 5 !important;
    }
    .phongvt-feedback .elementor-main-swiper:not(.is-centered) .swiper-slide-active + .swiper-slide .elementor-testimonial__image img {
        border: 4px solid #C8102E !important;
        box-shadow: 0 6px 18px rgba(200, 16, 46, 0.28) !important;
    }
}

/* ==========================================================================
   NÚT ĐIỀU HƯỚNG PREVIOUS & NEXT: ĐẶT DƯỚI ĐÁY KHÔNG ĐÈ CHỮ
   ========================================================================== */
.phongvt-feedback .elementor-swiper-button-prev,
.phongvt-feedback .elementor-swiper-button-next,
.phongvt-feedback button.flickity-button {
    position: absolute !important;
    top: auto !important;
    bottom: 12px !important;
    width: 44px !important;
    height: 44px !important;
    background-color: #C8102E !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    opacity: 1 !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 4px 10px rgba(200, 16, 46, 0.25) !important;
    z-index: 10 !important;
    margin: 0 !important;
}

/* Vòng tròn nét đứt bao quanh nút */
.phongvt-feedback .elementor-swiper-button-prev::after,
.phongvt-feedback .elementor-swiper-button-next::after,
.phongvt-feedback button.flickity-button::after {
    content: "" !important;
    position: absolute !important;
    top: -4px !important;
    left: -4px !important;
    right: -4px !important;
    bottom: -4px !important;
    border-radius: 50% !important;
    border: 1.5px dashed #C8102E !important;
    pointer-events: none !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Căn giữa 2 nút ở đáy */
.phongvt-feedback .elementor-swiper-button-prev,
.phongvt-feedback button.flickity-button.previous {
    left: calc(50% - 50px) !important;
    right: auto !important;
}

.phongvt-feedback .elementor-swiper-button-next,
.phongvt-feedback button.flickity-button.next {
    left: calc(50% + 6px) !important;
    right: auto !important;
}

.phongvt-feedback .elementor-swiper-button-prev svg,
.phongvt-feedback .elementor-swiper-button-next svg {
    fill: #ffffff !important;
    width: 14px !important;
    height: 14px !important;
}

/* ==========================================================================
   IMAGE CAROUSEL: ĐỒNG ĐỀU CHIỀU CAO HÌNH ẢNH (EQUAL HEIGHT SLIDES)
   Tự động căn chỉnh tất cả các ảnh bằng nhau tăm tắp, không bị méo hình
   ========================================================================== */
.elementor-widget-image-carousel .swiper-slide-image {
    height: 240px !important;
    object-fit: cover !important;
    width: 100% !important;
    border-radius: 10px;
}

@media (max-width: 767px) {
    .elementor-widget-image-carousel .swiper-slide-image {
        height: 200px !important;
    }
}

/* ==========================================================================
   WIDGET GALLERY: FILTER BAR DẠNG VIÊN THUỐC (PILL TABS)
   Tái hiện chính xác phong cách LingoLearn: Tab bo tròn, Active xanh dương
   ========================================================================== */
.elementor-widget-gallery .elementor-gallery__titles-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 35px !important;
    padding: 0 !important;
}

.elementor-widget-gallery .elementor-gallery-title {
    padding: 10px 24px !important;
    border-radius: 99px !important;
    border: 1.5px solid #CBD5E1 !important;
    background-color: #FFFFFF !important;
    color: #334155 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.25s ease-in-out !important;
    outline: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.elementor-widget-gallery .elementor-gallery-title:hover {
    border-color: #007BFF !important;
    color: #007BFF !important;
    background-color: #F0F7FF !important;
    transform: translateY(-2px);
}

.elementor-widget-gallery .elementor-gallery-title.elementor-item-active,
.elementor-widget-gallery .elementor-gallery-title.is-active,
.elementor-widget-gallery .elementor-gallery-title[aria-selected="true"] {
    background-color: #007BFF !important;
    border-color: #007BFF !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(0, 123, 255, 0.35) !important;
    transform: translateY(-2px);
}