/* ======================================================= */
/* 1. SHORTCODE GRID STRUCTURE */
/* ======================================================= */
.custom-post-section-grid {
    display: grid;
    gap: 20px; /* Khoảng cách giữa các card */
    margin-bottom: 40px;
}

/* Định nghĩa số cột linh hoạt */
.custom-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.custom-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.custom-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.custom-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
/* Thêm các số cột khác nếu cần */

/* Đảm bảo toàn bộ thẻ có thể nhấp được và loại bỏ các kiểu mặc định của liên kết */
.custom-post-section-grid a.card-link-full {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%; /* Giúp Card Span hoạt động tốt */
    /* Thêm Transition cho Card khi hover nhẹ */
    transition: transform 0.2s ease-out;
}
.custom-post-section-grid a.card-link-full:hover {
    /* Hiệu ứng nhấc nhẹ Card lên khi hover */
    transform: translateY(-2px);
}

/* ======================================================= */
/* 2. CARD TYPE: NORMAL (Ảnh 1 - Grid lớn/nhỏ) */
/* ======================================================= */
.custom-card-type-normal .post-card {
    background-color: #000;
    color: #fff;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    height: 100%;
}
/* Container cho card video */
.custom-card-type-video {
    gap: 15px; /* Khoảng cách giữa các video */
}

.card-video-style {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
}

/* Quan trọng: Tạo tỉ lệ 9/16 */
.card-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16; /* Thiết lập tỉ lệ dọc */
    overflow: hidden;
}

.card-video-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh phủ kín khung hình */
    transition: transform 0.5s ease;
}

.card-video-style:hover img {
    transform: scale(1.1);
}

/* Icon Play ở giữa */
.play-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.play-icon-overlay .dashicons {
    color: #fff;
    font-size: 30px;
    width: 30px;
    height: 30px;
}

/* Nội dung text đè lên phía dưới video */
.card-video-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;
}

.card-title-video {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 5px 0;
    line-height: 1.4;
	color:white;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-meta-video {
    font-size: 11px;
    opacity: 0.8;
}
.custom-card-type-normal .post-card .card-title{
    color: #F0F0F0;
}

.custom-card-type-normal .post-card .card-category{
    color: #059669;
}

.post-card span{
	font-family: "Space Mono", monospace;
}
/* Thiết lập cho Card chiếm 2 dòng (span_index) */
.custom-card-type-normal .post-card.card-span-row-2 {
    grid-row: span 2;
}

.custom-card-type-normal .card-image-wrapper {
    background-size: cover;
    background-position: center;
    position: relative;
	height: 100%;
    /* Rất quan trọng: Thêm overflow: hidden để giới hạn hình ảnh zoom */
    overflow: hidden; 
}

/* Hiệu ứng ZOOM IN cho card type NORMAL (dùng background-image) */
.custom-card-type-normal .card-link-full:hover .card-image-wrapper {
    /* Vì dùng background-image, ta zoom chính wrapper */
    transform: scale(1.05); 
    transition: transform 0.5s ease;
}
.custom-card-type-normal .card-image-wrapper {
    transition: transform 0.5s ease;
}

/* Hiệu ứng mờ */
.custom-card-type-normal .card-image-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
}

.custom-card-type-normal .card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 10;
}

.custom-card-type-normal .card-category {
    font-size: 14px;
    font-weight: bold;
    color: #f0f0f0;
    margin-bottom: 5px;
    display: block;
	margin-top: 8px;
}

.custom-card-type-normal .card-title {
    font-size: 16px;
    margin: 0;
    line-height: 1.3;
}

.custom-card-type-normal .card-span-row-2 .card-title {
    font-size: 24px; /* Tiêu đề lớn hơn cho card chiếm 2 dòng */
}
.custom-card-type-normal .card-excerpt {
    font-size: 14px;
    margin-top: 10px;
    opacity: 0.8;
}


/* ======================================================= */
/* 3. CARD TYPE: FULL (Ảnh 2 - Card chuẩn) */
/* ======================================================= */
.custom-card-type-full .post-card {
    grid-column: span 1;
    background-color: #fff;
    overflow: hidden;
    
}

.custom-card-type-full .card-full-image-wrapper {
    overflow: hidden;
    height: 240px;
}

.custom-card-type-full .card-full-image-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
	border-radius: 8px; 
    /* YÊU CẦU 1: IMAGE TYPE COVER */
    object-fit: cover; 
    
    /* YÊU CẦU 2: HIỆU ỨNG ZOOM IN */
    transition: transform 0.5s ease;
}

/* Kích hoạt ZOOM IN khi hover vào toàn bộ card */
.custom-card-type-full .card-link-full:hover .card-full-image-wrapper img {
    transform: scale(1.08); /* Phóng to 8% */
}

.custom-card-type-full .card-full-content {
    padding: 0;
	margin-top: 8px;
}

.custom-card-type-full .card-category-full {
    font-size: 12px;
    font-weight: bold;
    color: #e54c4c; /* Màu cam/đỏ giống ảnh 2 */
    margin-bottom: 4px;
    display: block;
    text-transform: uppercase;
}

.custom-card-type-full .card-title-full {
	font-weight: 700;
	line-height: 1.2;
    margin: 0 0 6px 0 !important;
	margin-bottom: 6px !important;
	min-height: calc(1.2em * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word; 
  
}

.custom-card-type-full .card-meta-full {
    font-size: 12px;
    color: #666;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.75rem;
}

.author-container{
	display: flex;
}

.social-container {
    position: relative;
    display: inline-block;
}

.share-btn {
    cursor: pointer;
    display: inline-block;
    width: 20px;
    height: 20px;
    /* Bạn có thể thay bằng icon SVG hoặc mã FontAwesome */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23558B2F"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" /></svg>');
    background-repeat: no-repeat;
    transition: transform 0.2s;
}

.share-btn:hover {
    transform: scale(1.2);
}

/* Tooltip style */
.share-btn::after {
    content: "Copied!";
    position: absolute;
    bottom: 130%;
    left: -50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    pointer-events: none;
}

/* Class này sẽ được thêm bằng JS khi click */
.share-btn.show-tooltip::after {
    opacity: 1;
    visibility: visible;
}

/* ======================================================= */
/* 4. RESPONSIVE CHO MOBILE (Tối đa 2 cột) */
/* ======================================================= */

/* Tablet & Mobile nhỏ hơn 1024px */
@media (max-width: 1024px) {
    /* Ép các grid nhiều cột (3, 4, 5) về tối đa 2 cột */
    .custom-grid-cols-3, 
    .custom-grid-cols-4, 
    .custom-grid-cols-5 { 
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* Mobile nhỏ hơn 768px */
@media (max-width: 768px) {
    /* Đảm bảo khoảng cách giữa các card nhỏ lại cho cân đối */
    .custom-post-section-grid {
        gap: 15px;
        padding: 0 0px;
    }

    /* Card Type Full: Giảm chiều cao ảnh để không chiếm quá nhiều chỗ */
    .custom-card-type-full .card-full-image-wrapper {
        height: 180px;
    }

    /* Card Type Normal: Giảm font chữ để tránh tràn dòng */
    .custom-card-type-normal .card-title {
        font-size: 16px;
    }
    .custom-card-type-normal .card-span-row-2 .card-title {
        font-size: 20px;
    }

    /* Xử lý các card chiếm 2 hàng: 
       Trên mobile nếu để span 2 sẽ làm layout rất dài và lệch, 
       thường nên đưa về span 1 để đồng nhất 2 cột */
    .custom-card-type-normal .post-card.card-span-row-2 {
        grid-row: span 1;
    }
}

/* Mobile cực nhỏ (Dưới 480px) - Tùy chọn 1 cột nếu bạn muốn */
@media (max-width: 480px) {
    .custom-post-section-grid {
        /* Nếu màn hình quá nhỏ, 2 card sẽ bị rất bé, 
           bạn có thể đổi '2' thành '1' nếu thấy cần thiết */
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .custom-card-type-full .card-title-full {
        font-size: 14px; /* Thu nhỏ tiêu đề cho màn hình nhỏ */
    }

    .custom-card-type-full .card-full-image-wrapper {
        height: 140px; /* Thu nhỏ ảnh thêm chút nữa */
    }
}
.card-full-excerpt {
    font-size: 13px;
    color: #666;
    margin: 0;
	margin-bottom: .25em !important;
    line-height: 1.5;
    /* Giới hạn hiển thị tối đa 2 dòng nếu mô tả quá dài */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Đảm bảo tiêu đề nổi bật hơn mô tả */
.card-title-full {
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 700;
}

/* Container chứa cả avatar và text */
.author-container {
    display: flex;
    align-items: start;
    gap: 10px; /* Khoảng cách giữa ảnh và chữ */
}

/* Style cho ảnh đại diện */
.author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%; /* Làm ảnh tròn */
    object-fit: cover;
    border: 1px solid #eee;
}

/* Cấu trúc cột cho tên và ngày */
.author-info-text {
    display: flex;
    justify-content: center;
	flex-direction: column;
}

.card-author {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    line-height: 1.2;
}

.card-date {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}