/* Bố cục chính */
.ak-category-display-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); /* Cột trái 2 phần, cột phải 1 phần, minmax để tránh overflow */
    grid-template-rows: auto auto; /* Hàng tự động chiều cao */
    gap: 20px; /* Khoảng cách giữa các mục */
    margin-bottom: 30px;
}

/* Khu vực bài viết chính (lớn bên trái) */
.ak-main-post-area {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.ak-main-post .ak-post-thumbnail img {
    width: 100%;
    height: auto;
    max-height: 450px; /* Giới hạn chiều cao ảnh chính */
    object-fit: cover;
    display: block;
}

.ak-main-post .ak-post-title {
    font-size: 2em; /* Kích thước chữ lớn hơn */
    line-height: 1.2;
    margin-top: 10px;
    margin-bottom: 8px;
}
.ak-main-post .ak-post-title a {
    color: #111;
}

.ak-main-post .ak-post-excerpt {
    font-size: 0.95em;
    color: #555;
    line-height: 1.6;
}

/* Cột phải chứa sidebar và có thể cả bottom trên mobile */
.ak-right-column {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Khoảng cách giữa các mục trong cột phải */
}


/* Khu vực bài viết sidebar (nhỏ bên phải) */
.ak-sidebar-posts-area {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ak-sidebar-post {
    display: grid; /* Sử dụng grid cho từng item sidebar */
    grid-template-columns: 100px 1fr; /* Ảnh 100px, nội dung còn lại */
    gap: 10px;
    align-items: flex-start;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.ak-sidebar-post:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ak-sidebar-post .ak-post-thumbnail {
    grid-column: 1 / 2;
}
.ak-sidebar-post .ak-post-thumbnail img {
    width: 100px;
    height: 75px;
    object-fit: cover;
    display: block;
}

.ak-sidebar-post .ak-post-content {
    grid-column: 2 / 3;
}
.ak-sidebar-post .ak-post-title {
    font-size: 1.05em;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 5px;
}
.ak-sidebar-post .ak-post-title a {
    color: #333;
}
.ak-sidebar-post .ak-post-excerpt-sidebar {
    font-size: 0.85em;
    color: #666;
    line-height: 1.5;
}


/* Khu vực bài viết hàng dưới (trải dài full width) */
.ak-bottom-posts-area {
    grid-column: 1 / 3; /* Chiếm cả hai cột của wrapper chính */
    grid-row: 2 / 3;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive: tự động điều chỉnh số cột, tối thiểu 200px */
    gap: 20px;
    margin-top: 10px; /* Thêm khoảng cách với phần trên nếu cần */
}

.ak-bottom-post .ak-post-thumbnail img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.ak-bottom-post .ak-post-title {
    font-size: 1.1em;
    line-height: 1.3;
    margin-top: 8px;
    margin-bottom: 5px;
}
.ak-bottom-post .ak-post-title a {
    color: #222;
}
.ak-bottom-post .ak-post-excerpt-bottom {
    font-size: 0.9em;
    color: #555;
    line-height: 1.5;
}

/* Các class chung */
.ak-post-thumbnail a,
.ak-post-title a {
    text-decoration: none;
    color: inherit;
}
.ak-post-title a:hover {
    text-decoration: underline;
    color: #0073aa; /* Màu WordPress link hover */
}

/* Responsive */
@media (max-width: 768px) {
    .ak-category-display-wrapper {
        grid-template-columns: 1fr; /* Chuyển thành 1 cột */
        /* grid-template-rows: auto auto auto; không cần thiết nữa vì right-column và bottom-area sẽ tự xếp */
    }

    .ak-main-post-area,
    .ak-right-column, /* Cột phải bây giờ sẽ nằm dưới main post */
    .ak-bottom-posts-area { /* Hàng dưới vẫn giữ nguyên grid-column để full width so với cha của nó (wrapper) */
        grid-column: 1 / 2; /* Tất cả chiếm 1 cột */
    }
    .ak-right-column {
        grid-row: 2 / 3; /* Cột phải xuống hàng 2 */
    }
    .ak-bottom-posts-area {
         grid-row: 3 / 4; /* Hàng dưới xuống hàng 3 */
    }

    .ak-sidebar-post {
        /* Có thể điều chỉnh lại grid-template-columns cho sidebar trên mobile nếu cần */
        /* ví dụ: grid-template-columns: 80px 1fr; */
    }
    .ak-sidebar-post .ak-post-thumbnail img {
        width: 80px;
        height: 60px;
    }

    .ak-bottom-posts-area {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Có thể giảm minmax cho mobile */
    }
    .ak-main-post .ak-post-title {
        font-size: 1.6em;
    }
    .ak-sidebar-post .ak-post-title {
        font-size: 1em;
    }
     .ak-bottom-post .ak-post-title {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .ak-bottom-posts-area {
        grid-template-columns: 1fr; /* 1 cột trên màn hình rất nhỏ cho bottom posts */
    }
    .ak-sidebar-post { /* Stack ảnh và text trên mobile nếu không đủ chỗ */
        grid-template-columns: 1fr; /* Ảnh full width, text bên dưới */
    }
    .ak-sidebar-post .ak-post-thumbnail img {
        width: 100%;
        height: auto; /* Để ảnh tự điều chỉnh chiều cao */
        max-height: 150px;
        margin-bottom: 8px;
    }
    .ak-main-post .ak-post-title {
        font-size: 1.4em;
    }
}