/*
Theme Name: Evently Child
Theme URI: https://evently.qodeinteractive.com/
Description: A child theme of Evently Theme
Author: Mikado Themes
Author URI: https://themeforest.net/user/mikado-themes
Version: 1.0.2
Text Domain: evently
Template: evently
*/

/* ==========================================================================
   GLOBAL PAGINATION STYLES (.vsw-pagination)
   ========================================================================== */

/* 1. Vùng chứa phân trang */
.vsw-pagination {
    display: flex;
    justify-content: center; /* Căn giữa phân trang */
    align-items: center;
    flex-wrap: wrap;
    gap: 8px; /* Khoảng cách giữa các nút */
    margin: 40px 0; /* Khoảng cách trên và dưới của cụm phân trang */
    padding: 0;
    width: 100%;
}

/* 2. Cấu hình chung cho mọi thành phần (Số, Chữ, Dấu chấm) */
.vsw-pagination .page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 42px; /* Chiều rộng tối thiểu để tạo hình vuông cho số */
    height: 42px;
    padding: 0 16px; /* Khoảng cách padding 2 bên cho chữ Prev/Next */
    background-color: #ffffff;
    color: #475569; /* Màu chữ xám đen hiện đại */
    font-size: 16px;
    font-weight: 500;
    text-decoration: none !important; /* Xóa gạch chân mặc định của theme */
    border: 1px solid #cbd5e1; /* Viền xám nhạt */
    border-radius: 8px; /* Bo góc mềm mại */
    transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */
}

/* 3. Hiệu ứng Hover cho các nút có thể bấm (Loại trừ trang hiện tại và dấu 3 chấm) */
.vsw-pagination a.page-numbers:hover {
    background-color: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Đổ bóng nhẹ khi đưa chuột vào */
}

/* 4. Trạng thái Active (Trang hiện tại) */
.vsw-pagination .page-numbers.current {
    background-color: #0056b3; /* THAY ĐỔI: Nhập mã màu thương hiệu của bạn vào đây */
    color: #ffffff;
    border-color: #0056b3; /* THAY ĐỔI: Viền cùng màu với nền */
    pointer-events: none; /* Khóa click vào trang đang đứng */
}

/* 5. Khối dấu ba chấm (...) */
.vsw-pagination .page-numbers.dots {
    background-color: transparent;
    border: none;
    color: #94a3b8;
    min-width: auto;
    padding: 0 8px;
    pointer-events: none;
}

/* 6. Tùy chỉnh riêng cho nút Previous & Next để nổi bật hơn (Tùy chọn) */
.vsw-pagination .prev.page-numbers,
.vsw-pagination .next.page-numbers {
    font-weight: 600;
}

/* 7. Reponsive cho thiết bị di động */
@media (max-width: 576px) {
    .vsw-pagination .page-numbers {
        min-width: 36px;
        height: 36px;
        padding: 0 12px;
        font-size: 14px;
    }
    .vsw-pagination {
        gap: 6px;
    }
}

/* --- BLOG CARD CSS --- */
/* Container Grid hiển thị 3 cột */
/* 1. Thiết lập Container dạng Flexbox để dễ dàng control max-width của các item */
.vsw-news-grid-last-news {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    justify-content: center;
    margin-bottom: 40px;
}

.vsw-news-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    justify-content: flex-start;
    margin-bottom: 40px;
}

/* 2. Ép chiều rộng tối đa 300px cho mỗi card */
.vsw-news-card {
    max-width: 350px !important; /* Yêu cầu cốt lõi của bạn */
    width: 100% !important; /* Responsive: thu nhỏ lại nếu màn hình < 350px */
    flex: 1 1 350px; /* Cho phép co giãn nhưng ưu tiên mốc 350px */
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hiệu ứng hover nhấc thẻ lên (Tuỳ chọn) */
.vsw-news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

}

/* 3. Xử lý phần ảnh để không bao giờ bị vỡ hay méo */
.vsw-news-card-image {
    width: 100% !important;
    height: 200px !important; /* Cố định chiều cao vùng chứa ảnh */
    overflow: hidden !important;
    display: block;
}

.vsw-news-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Lấp đầy khung, tự crop phần thừa, không méo tỉ lệ */
    display: block !important;
}

/* 4. Định dạng lại nội dung text bên trong */
.vsw-news-card-content {
    padding: 20px !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Ép nút Read More xuống đáy nếu chiều cao text các card lệch nhau */
}

.vsw-news-card-title {
    font-size: 18px !important;
    line-height: 1.4 !important;
    margin: 0 0 10px 0 !important;
    text-align: left !important;
}

.vsw-news-card-meta .vsw-author-name {
    display: inline-block;
    color: #000000 !important;
    font-weight: 600; /* In đậm vừa phải */
}

.vsw-news-card-excerpt {
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 20px !important;
    text-align: left !important;
    flex-grow: 1;
}

.vsw-news-card-footer {
    margin-top: auto; /* Đẩy footer xuống dưới cùng */
    text-align: left !important;
}

.vsw-news-card-btn {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    color: #333 !important;
    text-decoration: none !important;
}
/* Hiệu ứng đổi màu chữ thành xanh khi hover vào nút XEM THÊM */
.vsw-news-card-footer .vsw-card-btn:hover {
    color: #356bf8 !important; /* Màu xanh lá (Green). Bạn có thể đổi mã màu này */
    text-decoration: none !important;
}
/* ==========================================================================
   STYLE CHO THÔNG BÁO KHÔNG CÓ BÀI VIẾT
   ========================================================================== */
.vsw-no-posts-msg {
    text-align: center;      /* Căn giữa nội dung */
    font-size: 18px;         /* Tăng kích thước chữ (bạn có thể thay đổi số này) */
    font-weight: 500;        /* In đậm nhẹ để nổi bật hơn */
    color: #64748b;          /* Màu xám nhạt hiện đại */
    margin: 60px auto;       /* Tạo khoảng trống rộng rãi ở trên và dưới */
    width: 100%;
}
.vsw-no-posts-msg {
    text-align: center;      /* Căn giữa nội dung */
    font-size: 18px;         /* Tăng kích thước chữ (bạn có thể thay đổi số này) */
    font-weight: 500;        /* In đậm nhẹ để nổi bật hơn */
    color: #64748b;          /* Màu xám nhạt hiện đại */
    margin: 0px auto 40px auto;       /* Tạo khoảng trống rộng rãi ở trên và dưới */
    width: 100%;
}
/* --- END BLOG CARD CSS --- */

/* --- OPPORTUNITY DETAIL PAGE CSS --- */
/* CSS tuỳ chỉnh cho Opportunity Detail */
    .opportunity-section-detail {
        padding: 150px 80px 80px 80px;
        /* Đảm bảo nội dung chiếm toàn màn hình để Footer không bị giật lên */
        min-height: calc(100vh - 450px); 
    }

    .opportunity-dynamic-profile {
        display: flex;
        flex-wrap: wrap;
        gap: 50px; 
    }

    .opportunity-image-col {
        flex: 0 0 350px; 
    }

    .opportunity-image-col img {
        width: 100%;
        height: auto;
        border-radius: 8px; 
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }

    .opportunity-info-col {
        flex: 1; 
        min-width: 300px;
    }

    .opportunity-name {
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #111;
        line-height: 1.3;
    }

    .opportunity-separator {
        width: 60px;
        height: 3px;
        background-color: #38Bdf8; /* Xanh dương nhạt */
        margin-bottom: 25px;
    }

    .opportunity-short-desc {
        font-size: 18px;
        color: #666;
        margin-bottom: 30px;
        line-height: 1.6;
        font-style: italic;
    }

    .opportunity-content {
        font-size: 16px;
        line-height: 1.8;
        color: #333;
    }

    /* Responsive cho Mobile & Tablet */
    @media (max-width: 768px) {
        .opportunity-dynamic-profile {
            flex-direction: column;
            gap: 30px;
        }
        .opportunity-image-col {
            flex: 1 1 100%;
        }
    }
/* --- END OPPORTUNITY DETAIL PAGE CSS --- */


/* --- SCHEDULE DETAIL PAGE CSS --- */
/* SCHEDULE DETAIL PAGE CSS */
.schedule-section-detail {
    padding: 150px 80px 80px 80px;
    /* Đảm bảo nội dung chiếm toàn màn hình để Footer không bị giật lên */
    min-height: calc(100vh - 450px); 
}

.schedule-dynamic-profile {
    display: flex;
    flex-wrap: wrap;
    gap: 50px; 
}

.schedule-image-col {
    flex: 0 0 350px; 
}

.schedule-image-col img {
    width: 100%;
    height: auto;
    border-radius: 8px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.schedule-info-col {
    flex: 1; 
    min-width: 300px;
}

.schedule-name {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #111;
    line-height: 1.3;
}

.schedule-separator {
    width: 60px;
    height: 3px;
    background-color: #38Bdf8; /* Xanh dương nhạt */
    margin-bottom: 25px;
}

.schedule-short-desc {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.6;
    font-style: italic;
}

.schedule-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

/* Responsive cho Mobile & Tablet */
@media (max-width: 768px) {
    .schedule-dynamic-profile {
        flex-direction: column;
        gap: 30px;
    }
    .schedule-image-col {
        flex: 1 1 100%;
    }
}
/* --- END SCHEDULE DETAIL PAGE CSS --- */

/* Custom Slider Event CSS */
/* Ép cụm Thời gian và Địa điểm luôn luôn xếp thành 2 hàng dọc */
.slider-dynamic-event-meta {
    display: flex;
    flex-direction: column; /* Lệnh then chốt: Chuyển cấu trúc ngang thành dọc (cột) */
    row-gap: 12px; /* Chỉnh khoảng cách giữa dòng thời gian và dòng địa điểm */
    margin-bottom: 25px; /* Tạo khoảng trống đẩy 2 button bên dưới xuống */
}

/* Định dạng cho từng dòng (Giữ cho icon và chữ luôn ngay ngắn) */
.slider-dynamic-event-item {
    display: flex;
    align-items: flex-start; /* Đảm bảo icon luôn nằm sát mép trên cùng nếu chữ dài bị rớt nhiều dòng */
    line-height: 1.5; /* Khoảng cách dòng cho dễ đọc */
}

/* Tùy chỉnh icon */
.slider-dynamic-event-item i {
    margin-top: 4px; /* Đẩy icon xuống một chút để nó ngang tâm với dòng chữ đầu tiên */
    margin-right: 10px; /* Khoảng cách giữa icon và chữ */
}
/* CSS Mặc định (Áp dụng chung và cho Mobile) */
.slider-dynamic-event-title {
    color: #ffffff !important;
    margin-bottom: 15px; 
}

/* Áp dụng riêng cho Tablet, Notebook, và Desktop (Màn hình từ 768px trở lên) */
@media (min-width: 768px) {
    .slider-dynamic-event-title {
        font-size: 38px !important; /* Ép kích thước chữ to lên 38px */
        line-height: 1.3 !important; /* Khoảng cách dòng hợp lý để chữ không dính vào nhau nếu rớt dòng */
    }
}


/* Container tổng */
.event-countdown-wrapper {
    display: flex;
    gap: 50px; /* Tăng khoảng cách giữa các số */
/*     margin-top: 20px; */
    color: #000000;
    text-align: center;
    justify-content: center; /* Căn trái theo style slider của bạn */
}

/* Từng khối (Ngày, Giờ, Phút...) */
.countdown-item {
    background: transparent !important; /* Loại bỏ nền đen mờ */
    padding: 0 !important;             /* Loại bỏ padding */
    min-width: 80px;
}

/* Phần con số */
.countdown-item span {
    display: block;
    font-size: 85px;       /* Kích thước số cực lớn như hình 2 */
    font-weight: 800;       /* Làm số cực đậm */
    line-height: 1;
    letter-spacing: -2px;   /* Thu hẹp khoảng cách chữ cho hiện đại */
    margin-bottom: 5px;
}

/* Phần nhãn chữ (Ngày, Giờ, Phút, Giây) */
.countdown-item p {
    margin: 0;
    font-size: 20px;       /* Tăng cỡ chữ của nhãn */
    font-weight: 600;       /* Làm nhãn đậm hơn */
    text-transform: capitalize; /* Viết hoa chữ cái đầu */
    opacity: 1;             /* Hiển thị rõ nét chữ */
}


/* Cho Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .event-countdown-wrapper {
        justify-content: center;
        gap: 30px;                   /* Giảm khoảng cách từ 50px xuống 30px */
      	margin: 10px auto 0;         /* Giới hạn tổng chiều rộng để chúng không bị dàn trải */
        max-width: 100%;
    }

    .countdown-item {
        min-width: 80px;             /* Thu hẹp độ rộng tối thiểu của mỗi khối */
        flex: 0 1 auto;              /* Không cho phép các khối tự dãn ra chiếm hết chỗ trống */
    }

    .countdown-item span {
        font-size: 60px;             /* Giảm cỡ số một chút cho cân đối với màn hình tablet */
    }

    .countdown-item p {
        font-size: 16px;             /* Giảm cỡ chữ nhãn */
    }
}

/* Tùy chỉnh cho màn hình điện thoại (Responsive) */
@media (max-width: 768px) {
    .event-countdown-wrapper {
        gap: 10px;            /* Giảm khoảng cách giữa các khối */
        justify-content: flex-start; /* Căn giữa để cân đối trên mobile */
        margin-top: 15px;
    }

    .countdown-item {
        min-width: 60px;      /* Giảm độ rộng tối thiểu để vừa 4 cột */
        flex: 1;              /* Cho phép các cột tự chia đều không gian */
    }

    .countdown-item span {
        font-size: 32px;      /* Giảm nhẹ cỡ số để không bị tràn */
    }

    .countdown-item p {
        font-size: 11px;      /* Giảm cỡ chữ nhãn */
    }
}

/* Thêm cho màn hình cực nhỏ (iPhone SE, các dòng máy cũ) */
@media (max-width: 375px) {
    .event-countdown-wrapper {
        gap: 5px;
    }
    .countdown-item span {
        font-size: 28px;
    }
}

/* End Custom Slider Event CSS */

/* --- Tùy chỉnh Popup Register Form (Bản chuẩn 2 cột & Fix nút Close) --- */

/* 1. Khung chứa Popup */
.pum-container {
    padding: 45px 30px 30px !important; 
    border-radius: 12px !important;
    max-width: 900px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
    background: #fff !important;
    overflow: visible !important; /* Để nút close có thể nằm nửa trong nửa ngoài nếu muốn */
}

/* 2. Nút Close: Ép chữ X vào chính giữa bằng Flexbox */
.pum-theme-7699 .pum-close, 
.pum-container .pum-close {
    top: 10px !important;
    right: 10px !important;
    width: 30px !important;
    height: 30px !important;
    background: #333333 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    
    /* Lệnh then chốt để chữ X không bị lệch xuống đáy */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    text-indent: 0 !important;   /* Hiện chữ X */
    font-size: 16px !important;
    line-height: 1 !important;    /* Triệt tiêu khoảng cách dòng */
    padding: 0 !important;        /* Xóa padding dư thừa */
    border-radius: 50% !important; /* Chuyển thành hình tròn cho hiện đại */
    
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    z-index: 9999 !important;
}

.pum-container .pum-close:hover {
    background: #ff0000 !important;
    transform: scale(1.1);
}

/* 3. Layout 2 cột cho Contact Form 7 */
.pum-content .mkdf-grid-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
}

.pum-content .mkd-grid-col-6 {
    width: 50% !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
}

/* 4. Tùy chỉnh Input cho đồng bộ theme Evently */
.pum-content input[type="text"],
.pum-content input[type="email"],
.pum-content select {
    border: 1px solid #e1e1e1 !important;
    padding: 10px 15px !important;
    border-radius: 4px !important;
    height: 45px !important;
    width: 100% !important;
}

/* 5. Chỉnh lại Label */
.pum-content label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 13px;
    color: #444;
}

/* 6. Khóa scroll trang chính khi mở popup (Tránh 2 thanh cuộn) */
/* html.pum-open, 
html.pum-open body {
    overflow: hidden !important;
} */

/* 7. Responsive cho Mobile */
@media (max-width: 768px) {
    .pum-content .mkd-grid-col-6 {
        width: 100% !important;
    }
    .pum-container {
        width: 95% !important;
        padding: 40px 15px 20px !important;
    }
}


/* Ép Checkbox Agree / Not Agree xuống dòng */
.privacy-statement .wpcf7-checkbox {
    display: block;
}
.privacy-statement .wpcf7-list-item {
    display: block !important; 
    margin-left: 0 !important;
    margin-bottom: 12px !important;
}
.privacy-statement .wpcf7-list-item-label {
    margin-left: 8px;
    font-size: 14px;
    color: #333;
}

/* Ép các tùy chọn Radio Button xếp thành hàng dọc */
span.wpcf7-list-item {
    display: block !important;
    margin-left: 0 !important;
    margin-bottom: 10px !important;
}

/* Chỉnh khoảng cách giữa nút tròn và chữ */
span.wpcf7-list-item-label {
    margin-left: 8px;
    font-size: 14px;
    color: #333;
}

/* Tùy chỉnh ô nhập chữ "Other" cho Radio Button giống Google Forms */
input.wpcf7-free-text {
    border: none !important;
    border-bottom: 1px solid #ccc !important;
    border-radius: 0 !important;
    height: 30px !important;
    padding: 0 5px !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 60% !important; /* Độ dài của đường kẻ */
    margin-left: 10px;
    transition: all 0.3s ease;
}

/* Hiệu ứng khi click vào ô chữ Other */
input.wpcf7-free-text:focus {
    border-bottom: 1px solid #ff0000 !important; /* Đổi màu kẻ dưới khi gõ chữ */
    outline: none !important;
}

/*  end popup*/


/* CSS event statistics */
/* Container chính chứa thống kê */
.vsw-event-stats-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px; /* Khoảng cách giữa các cụm số */
    padding: 40px 0;
    text-align: center;
    font-family: inherit;
}


/* Khối hiển thị Số */
.vsw-stat-number {
    font-size: 48px;
    font-weight: 700;
    color: #000000;
    line-height: 1;
    margin-bottom: 8px;
    display: inline-block;
}

/* Dấu cộng (+) màu xanh */
.vsw-stat-plus {
    color: #00b4ff; 
    font-weight: bold;
}

/* Dòng Label hiển thị text nhỏ */
.vsw-stat-label {
    font-size: 18px;
	font-weight:600;
    color: #5c748c; /* Màu xám xanh giống trong thiết kế */
    text-transform: capitalize;
}

/* Responsive cho mobile */
@media only screen and (max-width: 768px) {
    .vsw-stat-number {
        font-size: 36px;
    }
    .vsw-event-stats-wrapper {
        gap: 40px;
    }
}

/* end CSS statistics */


/* CUSTOM AGENDA CARD BY EVENT CSS */
/* Container chính - Hiển thị dạng Grid tự động chia cột */
/* .vsw-agenda-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(300px, 1fr)
  );
  gap: 30px;
  margin: 60px 200px 100px 200px;
  font-family: inherit;
} */

.vsw-agenda-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin: 60px 100px 100px 100px;
  font-family: inherit;
}

.vsw-no-agenda {
    text-align: center;
    font-size: 18px; /* Bạn có thể tăng hoặc giảm số này tùy ý (ví dụ: 20px, 22px) */
    width: 100%;
    margin-top: 30px; /* Thêm khoảng trống phía trên để không bị sát vào tiêu đề */
	margin-bottom: 30px;
    color: #666; /* Tùy chọn: Đổi màu chữ tối hơn một chút để dễ đọc */
}

/* Thẻ (Card) lịch trình */
.vsw-agenda-card {
  flex: 0 1 500px;
  max-width: 500px;
  background-color: #ffffff;
  padding: 35px 30px;
  border-radius: 8px; /* Bo góc nhẹ */
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  text-align: center; /* Căn trái để dễ đọc phần mô tả */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Quan trọng: Ép thẻ phải co giãn để chứa đủ nội dung */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Hiệu ứng hover nhấc thẻ lên (Tuỳ chọn) */
.vsw-agenda-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  background-color: #ecfeff;
}

/* 2. Đẩy khu vực chứa chữ Read More xuống sát đáy */
.vsw-card-action {
    margin-top: auto; /* QUAN TRỌNG NHẤT: Nó sẽ tự động chiếm hết khoảng trống phía trên, đẩy content xuống đáy */
    padding-top: 25px; /* Tạo khoảng cách an toàn với phần text bên trên */
    text-align: center; /* Căn giữa chữ Read More (hoặc bạn có thể để left/right tùy ý) */
    position: relative;
    z-index: 2; /* Đảm bảo click được nếu bạn có dùng thẻ a bọc toàn bộ card */
}

/* 3. Định dạng chữ Read More */
.vsw-read-more-text {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #e91e63; /* Màu hồng đỏ giống màu giờ trong thiết kế của bạn */
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.vsw-read-more-text:hover {
    color: #111; /* Đổi màu khi hover */
    text-decoration: underline;
}

/* Dòng 1: Ngày tổ chức */
.vsw-card-date {
  display: flex;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.vsw-card-city-date {
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
    font-size: 0.95em;
}

.vsw-card-speaker {
    color: #1a1a1a;
    font-size: 1.15em;
    margin-bottom: 12px;
}

/* Dòng 2: Thời gian */
.vsw-card-time {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  color: #ff0046; /* Màu đỏ chủ đạo của theme */
  margin-bottom: 12px;
}

/* Dòng 3: Tên lịch trình (Thẻ H3) */
h3.vsw-card-title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 15px 0;
  line-height: 1.4;
}
.vsw-card-time-frame{
 text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.4;
}

/* Dòng 4: Mô tả */
.vsw-card-desc {
  text-align: center;
  font-size: 14px;
  color: #666666;
  line-height: 1.7;
}

/* Fix khoảng cách thừa nếu mô tả lấy từ khung soạn thảo WP có chứa thẻ <p> */
.vsw-card-desc p:last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
	.vsw-agenda-grid {
	  margin: 0px !important;
	}
}

.vsw-card-location a {
    color: #2563eb; 
    font-size: 14px;
    margin-top: 10px;
}


/* --- CONTAINER CHUNG --- */

/* Container hành động chung */
.vsw-stat-action {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

/* STYLE CHÍNH CHO NÚT ĐỎ (Space Economy Dialogue) */
.vsw-btn-red {
    display: block !important; /* Đảm bảo nút không bị ẩn */
    width: 100%;
    max-width: 320px; /* Độ rộng lớn hơn một chút vì chữ dài */
    background-color: #e60000 !important; /* Màu đỏ thương hiệu */
    color: #ffffff !important;
    padding: 7px !important;
    border-radius: 6px !important;
    text-align: center !important;
    font-weight: bold !important;
    text-transform: uppercase;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(230, 0, 0, 0.2);
    line-height: 1.4;
    border: none !important;
}

/* Hiệu ứng khi di chuột vào nút đỏ */
.vsw-btn-red:hover {
    background-color: #cc0000 !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(230, 0, 0, 0.3);
    filter: brightness(1.1);
}

/* --- RESPONSIVE CHO MOBILE --- */
@media (max-width: 480px) {
    .vsw-btn-red {
        width: 90% !important;
        font-size: 13px !important;
        padding: 7px !important; /* Tăng diện tích bấm trên mobile */
    }
}
.vsw-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 30px;
    text-align: center;
}

/* --- KHỐI NÚT DỌC (Cho trang chủ/sidebar) --- */
.registration-buttons-vertical {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Tăng khoảng cách để thoáng hơn trên mobile */
    width: 100%;
    align-items: center;
    margin: 15px 0;
}

.reg-item {
    width: 100%;
    max-width: 320px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- STYLE NÚT BẤM CHUẨN --- */
.reg-button {
    display: block !important;
    width: 100%;
    padding: 12px 10px !important; /* Padding dọc lớn hơn để dễ bấm */
	white-space: nowrap !important;
	text-align: center !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    line-height: 1.4;
}

.reg-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* --- MÀU SẮC (GIỮ THEO NÚT CŨ) --- */
.btn-other {
    background-color: #0047AB !important; /* Xanh lam đậm */
    color: #ffffff !important;
}

.btn-student {
    background-color: #36D0F8 !important; /* Xanh Cyan */
    color: #ffffff !important;
}

/* --- TEXT NGÀY THÁNG --- */
.reg-subtext {
    display: block !important;
    margin-top: 8px !important;
    font-size: 16px !important;
    color: #555 !important;
    font-weight: 700;
}

/* --- RESPONSIVE CHO MOBILE (Dưới 480px) --- */
@media (max-width: 480px) {
    .reg-item {
      display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 30px;
    text-align: center;
    }

    .reg-button {
/*          width: 90% !important; */
        font-size: 13px !important;
        padding: 7px !important; /* Tăng diện tích bấm trên mobile */
		
    }
    
    .vsw-stat-label {
        font-size: 18px; /* Làm label Attendees to rõ hơn */
        margin-top: 15px;
    }
}


/* --- RESPONSIVE CHO TABLET TRỞ LÊN (>= 768px) --- */
@media (min-width: 768px) {
    /* Ép text nút đỏ nằm cùng 1 hàng */
    .vsw-btn-red {
        max-width: 400px !important; /* Tăng max-width để đủ chỗ cho chữ dài */
        white-space: nowrap !important; /* QUAN TRỌNG: Ngăn chữ xuống dòng */
        padding: 10px 25px !important; /* Điều chỉnh padding cho cân đối */
    }
.reg-button {
        white-space: nowrap !important; /* Ngăn chữ xuống dòng */
        min-width: 280px !important; /* Đảm bảo nút không quá ngắn */
    }
	
 .reg-item {
        max-width: 420px !important; /* Đảm bảo chiều dài cố định cho cả 2 cụm */
    }
	
}
@media (min-width: 768px) and (max-width: 1024px) {
    .reg-button, .vsw-btn-red {
        font-size: 12px !important;
    }
}


/* Container bọc 2 nút */

.registration-buttons-vertical {

    display: flex;

    flex-direction: column; /* Sắp xếp theo chiều dọc */

    gap: 15px;             /* Khoảng cách giữa 2 cụm nút */

    align-items: center;    /* Căn giữa nút */

    margin-bottom: 10px;

}



/* Style cho từng item (nút + subtext) */

.reg-item {

    display: flex;

    flex-direction: column;

    width: 100%;

    max-width: 450px; /* Giới hạn độ rộng nút cho đẹp */

}



/* Style nút bấm giống nút blue cũ của bạn hoặc giữ style Luma */

.reg-button {

    padding: 10px 20px;

    border-radius: 5px;

    text-decoration: none;

    font-weight: bold;

    text-align: center;

    transition: all 0.3s ease;

    display: block;

}



/* Màu sắc riêng cho từng nút (nếu muốn) */

.btn-other {

    background-color: #0056b3; /* Màu xanh đậm cho Cần Thơ */

    color: #fff !important;

}



.btn-student {

    background-color: #ffc107; /* Màu vàng cho UEH như thiết kế trước */

    color: #000 !important;

}



/* Text ngày tháng bên dưới nút */

.reg-subtext {

    font-size: 12px;

    color: #666;

    margin-top: 4px;

    text-align: center;

}

/* Hiệu ứng khi hover */

.vsw-btn-red:hover {

    background-color: #b30000; /* Màu đỏ đậm */

    color: #ffffff !important;

border-color: #b30000;

    box-shadow: 0 4px 12px rgba(0,0,0,0.2);

}



/* Đảm bảo các item stat có chiều cao tương đối bằng nhau để nút không bị lệch */

.vsw-stat-item {

    display: flex;

    flex-direction: column;

    justify-content: flex-start; /* Hoặc space-between nếu muốn nút luôn nằm dưới cùng */

    align-items: center;

    padding-bottom: 20px;

}



/* Nhắm trực tiếp vào container trong popup */

.pum-content .registration-buttons-container {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    justify-content: center !important;

    align-items: flex-start !important;

    gap: 15px !important;

    width: 100% !important;

    margin: 20px 0 !important;

}



.pum-content .registration-buttons-container p {

    display: contents !important;

}



.pum-content .reg-item {

    flex: 1 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    text-align: center !important;

}



/* Style chung cho cả 2 nút */

.pum-content .reg-button {

    color: #fff !important;

    padding: 15px 5px !important;

    border-radius: 5px !important;

    text-decoration: none !important;

    font-weight: bold !important;

    width: 100% !important;

    display: block !important;

    font-size: 14px !important;

    transition: all 0.3s ease !important; /* Hiệu ứng mượt mà */

    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;

}



/* NÚT 1: Màu xanh cũ (Cyan) */

.pum-content .btn-student {

    background-color: #36D0F8 !important;

}



.pum-content .btn-student:hover {

    background-color: #1eb9e1 !important; /* Đậm hơn màu cũ khi hover */

    transform: translateY(-2px) !important; /* Nhích nhẹ lên trên */

    box-shadow: 0 5px 10px rgba(0,0,0,0.15) !important;

}



/* NÚT 2: Màu xanh Blue (Xanh lam đậm) */

.pum-content .btn-other {

    background-color: #0047AB !important; /* Màu Cobalt Blue chuyên nghiệp */

}



.pum-content .btn-other:hover {

    background-color: #003380 !important; /* Đậm hơn khi hover */

    transform: translateY(-2px) !important;

    box-shadow: 0 5px 10px rgba(0,0,0,0.15) !important;

}



/* Chữ phụ dưới nút */

.pum-content .reg-subtext {

    display: block !important;

    margin-top: 10px !important;

    font-size: 16px !important;

    color: #444 !important;

}

@media (min-width: 768px) {
    /* 1. Đổi container sang hướng cột (nằm dọc) và căn giữa */
    .pum-content .registration-buttons-container {
        display: flex !important;
        flex-direction: column !important; /* Chuyển thành hàng dọc */
        align-items: center !important;    /* Căn giữa các item theo chiều ngang */
        justify-content: center !important;
        gap: 30px !important;              /* Khoảng cách giữa 2 cụm nút */
        width: 100% !important;
    }

    /* 2. Cấu trúc lại từng item (nút + subtext) */
    .pum-content .reg-item {
        flex: none !important;            /* Tắt chế độ tự giãn (flex: 1) của code cũ */
        width: 100% !important;
        max-width: 450px !important;      /* Giới hạn độ rộng để nút không quá dài */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 3. Xử lý text nút nằm cùng 1 hàng */
    .pum-content .reg-button {
        white-space: nowrap !important;   /* Ngăn chữ xuống dòng */
        width: 100% !important;           /* Chiếm hết độ rộng của reg-item (450px) */
        padding: 15px 30px !important;    /* Padding rộng cho đẹp */
        text-align: center !important;
        font-size: 16px !important;       /* Tăng font size cho tablet trở lên */
    }

    /* 4. Chữ phụ dưới nút */
    .pum-content .reg-subtext {
        margin-top: 10px !important;
        font-size: 14px !important;
        font-weight: normal !important;
    }
}

/* Điều chỉnh riêng cho màn hình nhỏ của Tablet nếu cần */
@media (min-width: 768px) and (max-width: 991px) {
    .pum-content .reg-button {
        font-size: 14px !important;
        max-width: 380px !important;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .reg-button, .vsw-btn-red {
        font-size: 12px !important;
    }
}


/* Mobile: Tối ưu hiển thị căn giữa */

@media (max-width: 480px) {

    .pum-content .registration-buttons-container {

        flex-direction: column !important;

        align-items: center !important; /* Căn giữa container chính */

        gap: 25px !important;

    }

    .pum-content .reg-item {

        width: 80% !important; /* Giới hạn độ rộng nút trên mobile cho đẹp, hoặc để 100% tùy ý */

        max-width: 250px !important; /* Đảm bảo nút không quá to trên màn hình lớn của mobile */

        align-items: center !important; /* Căn giữa các thành phần con (nút + text) */

    }

}

/* END CUSTOM AGENDA CARD BY EVENT CSS */

/* CUSTOM SPEAKER CARD CSS */
/* Layout dạng lưới 3 cột */
.mkd-speaker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin: 60px 0px;
}

/* Kiểu dáng Thẻ Diễn giả */
.speaker-card {
  background: #ffffff;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.speaker-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
}

.no-speakers {
   text-align: center;
    width: 100%;
    margin: 30px auto;
    font-size: 18px; 
    color: #666;
}

/* Ảnh Diễn giả */
.speaker-img-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1; /* Cắt ảnh hình vuông hoặc điều chỉnh tùy ý */
  overflow: hidden;
}

.speaker-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Đảm bảo ảnh không bị méo */
  display: block;
}

/* Phần chữ bên trong Card */
.speaker-content {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.speaker-name {
  font-size: 24px;
  font-weight: 700;
  color: #222;
  margin: 0 0 5px 0;
}

.speaker-role {
  font-size: 15px;
  font-style: italic;
  color: #888;
  font-family: 'Playfair Display', serif; /* Font có chân cho giống thiết kế */
  margin: 0 0 35px 0;
}

/* Phần Footer (Nút Read More và Icon) */
.speaker-footer {
  margin-top: auto; /* Đẩy footer xuống đáy card */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.speaker-readmore {
  font-size: 12px;
  font-weight: 700;
  color: #222;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.speaker-share-icon {
  color: #b0b0b0;
  cursor: pointer;
}
@media (max-width: 425px) {
	.mkd-speaker-grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	  gap: 30px;
	  margin: 30px 0px 0px 0px;
	}
}
@media (max-width: 320px) {
	.mkd-speaker-grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	  gap: 30px;
	  margin-bottom: 60px;
	}
}
/* END CUSTOM SPEAKER CARD CSS */

/*** CUSTOM OPPORTUNITY CSS  ***/

	/* Container tổng */
.opportunity-section {
    background-color: #f0f9ff; /* Màu nền xanh nhạt tổng thể */
    padding: 30px 220px;
    border-radius: 8px;
    font-family: Arial, sans-serif;
}

/* Phần tiêu đề */
.opportunity-header {
    margin-bottom: 20px;
}

.opportunity-header .sub-title {
    color: #0ea5e9;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 5px;
}

.opportunity-header .main-title {
    color: #0f172a;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
	line-height: 1;
}

/* Danh sách các item */
.opportunity-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Khoảng cách giữa các thẻ */
}

/* Từng thẻ cơ hội */
.opportunity-item {
    background: #ffffff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 20px;
    gap: 15px;
    transition: all 0.3s ease;
	cursor: pointer;
	margin: 0px;
}

.opportunity-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: #7dd3fc;
}

/* Phần icon */
.opportunity-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Phần nội dung (Tiêu đề + Mô tả) */
.opportunity-content .opportunity-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0px;
	line-height: 1.25;
}

.opportunity-content .opportunity-desc {
    font-size: 14px;
    color: #94a3b8;
    margin: 0;
    line-height: 1.5;
}

.vsw-empty-notice {
    text-align: center;
    width: 100%;
    margin: 30px auto;
    font-size: 18px;
    color: #666;
}

@media (max-width: 768px) {
.opportunity-section {
    padding: 20px !important;
}

}

/*** END CUSTOM OPPORTUNITY CSS  ***/

/*Banner footer  */
/* =========================================
   CUSTOM TEXT BANNER CHO MOBILE
   ========================================= */

/* Đảm bảo text luôn căn giữa và có khoảng cách với nút ở dưới trên mọi màn hình */
.custom-text-banner {
    text-align: center !important;
    margin-bottom: 20px !important; 
}

/* Xử lý ép nhỏ chữ khi xuống màn hình Mobile (< 768px) */
@media (max-width: 767px) {
    /* Ép tất cả các thẻ text bên trong class này nhỏ lại */
    .custom-text-banner,
    .custom-text-banner h1,
    .custom-text-banner h2,
    .custom-text-banner h3,
    .custom-text-banner h4,
    .custom-text-banner h5,
    .custom-text-banner h6,
    .custom-text-banner p,
    .custom-text-banner span {
        font-size: 18px !important; /* Bạn có thể tăng/giảm số 18px này cho vừa mắt nhất */
        line-height: 1.4 !important; /* Tránh việc 2 dòng chữ bị dính sát vào nhau */
        letter-spacing: 0.5px !important;
    }

    .custom-text-banner {
        margin-bottom: 15px !important; /* Thu hẹp khoảng cách với nút trên mobile cho gọn */
    }
}



/* =========================================
   CUSTOM BUTTONS GIỐNG SLIDE (WPBakery)
   ========================================= */

/* Đảm bảo 2 container của nút nằm trên cùng 1 hàng và không có khoảng trắng */
.vc_btn3-container.custom-slide-btn {
    margin: 0 !important; 
    display: inline-flex !important;
   	margin: 0 8px 20px 8px !important;
}

/* Custom lại text và kích thước của nút */
.vc_btn3-container.custom-slide-btn .vc_btn3 {
    border-radius: 0 !important; /* Xóa bo góc, làm nút vuông vức */
    text-transform: uppercase !important; /* Ép chữ in hoa */
    font-weight: 800 !important; /* Chữ in đậm giống slide */
    letter-spacing: 0.5px !important; /* Giãn chữ ra một xíu cho đẹp */
    padding: 18px 30px !important; /* Tăng độ dày trên/dưới và trái/phải của nút */
    font-size: 15px !important;
    border: none !important;
  	 margin: 0 !important; /* Xóa mọi margin mặc định của thẻ a */ 
    box-shadow: none !important;
}

@media (max-width: 767px) {
    .vc_btn3-container.custom-slide-btn {
        display: block !important; 
        /* Cách trái/phải 4px để không sát viền màn hình, cách dưới 10px để rớt dòng đẹp */
        margin: 0 4px 10px 4px !important; 
    }
    
    .vc_btn3-container.custom-slide-btn .vc_btn3 {
        width: 100% !important; /* Bật lại 100% để nút kéo dài ra */
        display: block !important;
        text-align: center !important;
        box-sizing: border-box !important; /* Giữ padding không làm phình kích thước nút gây tràn ngang */
    }
}


/*end banner footer  */

/*** BOTTOM FOOTER ***/
.vsw-bottom-center {
	font-size: 13px;
}

/*** END BOTTOM FOOTER ***/

/*** SPEAKER LANDING PAGE ***/
/* Bố cục chính */
.speaker-dynamic-profile {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    padding: 80px 0;
    max-width: 1000px;
    margin: 0 auto;
    
    /* BẮT BUỘC: Ép chiều cao tối thiểu để đẩy Footer xuống đáy */
    min-height: calc(100vh - 450px);
}

/* Cột Ảnh */
.speaker-image-col {
    flex: 0 0 45%;
}
.speaker-circle-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Cột Thông tin */
.speaker-info-col {
    flex: 1;
}
.speaker-name {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 10px;
}
.speaker-separator {
    width: 60px;
    height: 2px;
    background-color: #3b5998; /* Màu xanh chủ đạo */
    margin: 15px 0 25px;
}

/* Mạng xã hội */
.speaker-socials {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}
.speaker-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background-color: #4267B2;
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    transition: 0.3s ease;
}
.speaker-socials a:hover {
    background-color: #222;
}

/* Nội dung Bio */
.speaker-bio {
    color: #666;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* Website */
.speaker-website-title {
    font-size: 1.5em;
    font-weight: 700;
}
.speaker-website-link {
    font-style: italic;
    color: #888;
    text-decoration: none;
}

/* Responsive: Xếp dọc trên Mobile và Tablet nhỏ */
@media (max-width: 768px) {
    .speaker-dynamic-profile {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .speaker-socials {
        justify-content: center; /* Căn giữa icon MXH trên mobile */
    }
    .speaker-separator {
        margin-left: auto;
        margin-right: auto;
    }
}
/*** END SPEAKER LANDING PAGE ***/

/*** CUSTOM RENDER EVENT LIST PAGE CSS  ***/
/* =========================================
   1. BỘ LỌC (FILTER FORM) - GIAO DIỆN HIỆN ĐẠI
   ========================================= */
.event-filter-wrapper {
    margin-bottom: 40px;
}

#event-filter-form {
    display: flex;
    gap: 20px;
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Bóng đổ nhẹ cho khung search */
    flex-wrap: wrap;
    border: 1px solid #f0f0f0;
	margin-bottom: 40px;
}

#event-filter-form select {
    flex: 1;
    min-width: 220px;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    color: #334155;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none; /* Ẩn mũi tên mặc định để custom */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2394a3b8%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 16px top 50%;
    background-size: 12px auto;
}

#event-filter-form select:hover,
#event-filter-form select:focus {
    border-color: #3b82f6;
    background-color: #ffffff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* =========================================
   2. DANH SÁCH THẺ SỰ KIỆN (EVENT GRID)
   ========================================= */
.event-results-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    transition: opacity 0.3s ease;
}

/* =========================================
   3. CHI TIẾT THẺ SỰ KIỆN (EVENT CARD)
   ========================================= */
.event-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); /* Bóng đổ sâu hơn tạo cảm giác nổi */
    border: 1px solid rgba(0,0,0,0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    height: 100%; /* Giúp các thẻ cao bằng nhau */
}

.event-card:hover { 
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); 
}

/* Phần Ảnh đại diện */
.event-thumb {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.event-thumb img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    transition: transform 0.5s ease;
}

.event-card:hover .event-thumb img {
    transform: scale(1.05); /* Hiệu ứng zoom ảnh nhẹ khi hover */
}

/* Phần Nội dung */
.event-content { 
    padding: 24px; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
}

/* Ngày và Địa điểm */
.event-meta { 
    display: flex; 
    flex-wrap: wrap;
    gap: 15px; 
    font-size: 13.5px; 
    color: #64748b; 
    margin-bottom: 16px;
    font-weight: 500;
}

/* Tiêu đề sự kiện */
.event-title { 
    margin: 0 0 12px; 
    font-size: 20px; 
    font-weight: 700;
    line-height: 1.4; 
}

.event-title a { 
    color: #0f172a; 
    text-decoration: none; 
    transition: color 0.2s ease;
}

.event-title a:hover { 
    color: #2563eb; /* Màu xanh nổi bật */
}

/* Nút Xem chi tiết */
.event-readmore { 
    margin-top: auto; /* Đẩy nút luôn nằm sát đáy thẻ */
    display: inline-flex;
    align-items: center;
    font-size: 14.5px; 
    font-weight: 600; 
    color: #2563eb; 
    text-decoration: none; 
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
    transition: color 0.2s ease;
}

.event-readmore:hover {
    color: #1d4ed8;
}

/* Trạng thái không có kết quả */
.no-results { 
    grid-column: 1 / -1; 
    text-align: center; 
    padding: 60px 20px; 
    background: #f8fafc; 
    border-radius: 12px; 
    color: #64748b; 
    font-size: 16px;
    border: 1px dashed #cbd5e1;
}
/*** END CUSTOM RENDER EVENT LIST PAGE CSS  ***/
	
/*** CUSTOM EVENT DETAIL PAGE CSS  ***/
	/* =========================================
   SECTION 1: HERO AREA (Ảnh & Thông tin)
   ========================================= */
.event-section-hero {
    padding: 150px 0 40px 0;
    background-color: #ffffff;
}

/* .event-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr; 
    gap: 50px;
    align-items: flex-start;
} */

.event-hero-grid {
    display: grid;
   
}

.event-hero-grid.has-thumbnail {
    grid-template-columns: 1.2fr 1fr; 
    gap: 50px;
    align-items: flex-start;
}

/* --- TRƯỜNG HỢP KHÔNG CÓ ẢNH (CĂN GIỮA) --- */
.event-hero-grid.no-thumbnail {
    grid-template-columns: 1fr; /* Chuyển về 1 cột */
    max-width: 800px; /* Giới hạn chiều rộng khối nội dung để dễ đọc */
    margin: 0 auto; /* Căn giữa toàn bộ khối trên màn hình */
    text-align: center; /* Căn giữa toàn bộ text */
}

/* Căn giữa các thông tin Ngày tháng, Địa điểm */
.event-hero-grid.no-thumbnail .event-meta-list {
    align-items: center; 
}

/* Căn giữa cụm chữ "Follow Us" và các icon mạng xã hội */
.event-hero-grid.no-thumbnail .event-social-share strong {
    display: block;
    margin-bottom: 10px;
}

.event-hero-grid.no-thumbnail .social-icons-wrapper {
    display: flex;
    justify-content: center; /* Ép các icon ra giữa */
}



.event-hero-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    display: block;
}

.event-hero-info .event-title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.3;
    color: #1e293b;
    margin-bottom: 20px;
}

.event-description {
    font-size: 16px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 30px;
}

.event-meta-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e2e8f0;
}

.meta-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.meta-icon {
    font-size: 24px;
}

.meta-text strong {
    display: block;
    font-size: 13px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.meta-text span {
    font-size: 16px;
    color: #0f172a;
    font-weight: 600;
}

/* (Tuỳ chọn) Responsive trên mobile cho trường hợp có ảnh */
/* Responsive trên mobile */
@media (max-width: 768px) {
    .event-hero-grid.has-thumbnail {
        display: flex; /* Chuyển sang flex để dễ điều khiển thứ tự */
        flex-direction: column; /* Xếp theo chiều dọc */
        gap: 30px;
    }

    .event-hero-image {
        order: 1; /* Ảnh nằm đầu tiên */
    }

    .event-hero-info {
        order: 2; /* Thông tin nằm bên dưới */
        text-align: left; /* Tùy chọn: căn lề trái cho chữ trên mobile */
    }
	.event-hero-info .event-title {
	font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    color: #1e293b;
    margin-bottom: 20px;
	}
	
	.event-section-hero {
    padding: 80px 0 40px 0;
    background-color: #ffffff;
}
}

/* Social Icons */
/* ==========================================================
   CHỈNH LẠI UI CHO ICON MẠNG XÃ HỘI (TRỊ DỨT ĐIỂM HÌNH VUÔNG)
   ========================================================== */
.event-social-share .social-icons-wrapper {
    display: flex;
    gap: 12px; 
    margin-top: 15px;
}

.event-social-share .social-icons-wrapper .mkdf-icon-small {
    border-radius: 50% !important; /* Bẻ cong chính thẻ có màu nền */
	transition: transform 0.3s ease;
}


/* Nhắm thẳng vào thẻ đang giữ màu nền của Mikado */
.event-social-share .mkdf-icon-shortcode .mkdf-icon-element {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important; /* Căn giữa icon theo chiều dọc */
    text-align: center !important; /* Căn giữa icon theo chiều ngang */
    display: inline-block !important;
    padding: 0 !important;
    box-sizing: border-box !important;

}

/* Chỉnh lại font size của icon cho vừa vặn */
.event-social-share .mkdf-icon-shortcode i {
    font-size: 15px !important;
}

/* Hiệu ứng nảy nhẹ khi di chuột vào */
.event-social-share .mkdf-icon-shortcode:hover {
    transform: translateY(-3px);
}

/* =========================================
   SECTION 2: CONTENT
   ========================================= */
.event-section-content {
/*     padding: 60px 0; */
/*     background-color: #f8fafc; /* Nền xám nhạt để tách biệt với Hero */ */
}

/* =========================================
   SECTION 3: SPEAKERS
   ========================================= */
.event-section-speakers {
    padding: 80px 0;
    background-color: #ffffff;
}

.section-heading {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    color: #1e293b;
}

.event-speakers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 40px;
}

.event-speaker-card {
    text-align: center;
	padding: 20px 0 20px 0;
	background: #ffffff;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-speaker-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
}

.event-speaker-avatar {
    width: 180px;
    height: 180px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.event-speaker-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-speaker-name {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 5px;
}

.event-speaker-position {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

/* =========================================
   RESPONSIVE (MOBILE)
   ========================================= */
@media (max-width: 991px) {
    .event-hero-grid {
        grid-template-columns: 1fr; /* Đưa về 1 cột trên điện thoại */
        gap: 30px;
    }
}
/*** END CUSTOM EVENT DETAIL PAGE CSS  ***/


/*** FOOTER CSS  ***/
.vsw-footer-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin-top: 10px;
    letter-spacing: 0.5px;
}
/*** END FOOTER CSS  ***/


/*Xử lý CSS cho Mobile  */
@media (max-width: 768px) {
    .wpcf7-form-control-wrap input,
    .wpcf7-form-control-wrap textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important; /* Đảm bảo padding không làm tràn khung */
        margin-bottom: 15px;
    }

    .wpcf7-submit {
        width: 100% !important; /* Cho nút gửi tin nhắn rộng hết màn hình mobile cho dễ bấm */
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    /* Giảm khoảng cách phía trên hàng liên hệ trên mobile */
    .vc_custom_1496838391304 {
        padding-top: 50px !important; 
    }
    
    /* Xử lý căn lề cho cột để không bị lệch */
    .vc_col-xs-offset-1 {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .vc_column-inner {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}


/* Đảm bảo danh sách trong mô tả luôn xuống hàng */
.vsw-card-desc .vsw-dynamic-list {
    display: block !important; /* Buộc xuống hàng */
    list-style-type: none;
    padding: 0;
    margin: 10px 0;
    text-align: start; 
}

.vsw-card-desc .vsw-dynamic-list li {
    display: block !important; /* Mỗi item chiếm 1 dòng */
    margin-bottom: 5px;
    line-height: 1.4;
}

/* Viết cụ thể hơn để tăng độ ưu tiên */
div.vsw-card-desc ul.vsw-dynamic-list {
    display: block !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 10px 0 !important;
}

div.vsw-card-desc ul.vsw-dynamic-list li {
    display: block !important; /* Buộc mỗi item xuống một dòng riêng */
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 8px !important;
    color: #666666;
}
/* Nếu bạn muốn có dấu chấm tròn nhỏ phía trước mỗi dòng */
.vsw-card-desc .vsw-dynamic-list li::before {
    content: "•";
    margin-right: 8px;
    color: #ff0000; /* Màu nhấn tùy chọn */
}

/* Áp dụng cho mọi thiết bị (Laptop, Desktop) */
sr7-bullets.evently-pagination {
    /* Căn giữa */
    left: 50% !important;
    margin-left: -97.5px !important; /* (Tổng width 195px / 2) */
    width: 195px !important; 
    
    /* Đẩy lên cách mép dưới 20px */
    bottom: 20px !important;
    /* SR7 sử dụng inset, ta cần ghi đè giá trị bottom trong inset */
    inset: auto auto 20px 50% !important;

    display: flex !important;
    justify-content: center !important;
    transform: none !important;
    position: absolute !important;
}

/* Tùy chỉnh riêng cho Mobile */
@media (max-width: 778px) {
    sr7-bullets.evently-pagination {
        /* Thu nhỏ tổng chiều rộng khung chứa trên mobile */
        width: 120px !important; 
        margin-left: -60px !important; /* (120px / 2) */
        bottom: 50px !important;
        inset: auto auto 50px 50% !important;
    }

    sr7-bullet {
        width: 8px !important;
        height: 8px !important;
        margin: 0 2px !important;
        /* Hủy bỏ vị trí tuyệt đối mà JS tự tính cho từng nút */
        position: relative !important;
        left: auto !important;
        top: auto !important;
    }
}

@media only screen and (max-width: 480px) {
  #slide-55-layer-2 {
    width: 300px !important;
    height: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}