/* --- CHỈNH SỬA TRANG CHI TIẾT TÀI LIỆU (ITEM SHOW) --- */

/* 1. Thu nhỏ khung chứa ảnh */
.item.show .media-embeds,
.item.show .media-render {
    max-width: 350px !important; /* Chỉnh số này để ảnh to/nhỏ theo ý muốn */
    margin-bottom: 20px !important;
}

/* 2. Đảm bảo ảnh nằm gọn trong khung */
.item.show img.media-render,
.item.show .media-embeds img {
    width: 100% !important;
    height: auto !important;
    border: 1px solid #ddd; /* Thêm viền mỏng cho đẹp */
    padding: 5px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Đổ bóng nhẹ */
}


/* --- HIỆU ỨNG RÊ CHUỘT (HOVER) CHO TÀI LIỆU --- */

/* 1. Tạo độ mượt cho chuyển động */
ul.resource-grid > li.item.resource {
    transition: all 0.3s ease-in-out !important; /* Thời gian biến đổi 0.3 giây */
}

/* 2. Hành động khi rê chuột vào khung tài liệu */
ul.resource-grid > li.item.resource:hover {
    transform: translateY(-5px) !important;       /* Nhấc ô tài liệu lên 5px */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important; /* Bóng đổ sâu hơn */
    border-color: #28a745 !important;             /* Đổi viền sang màu Xanh lá */
    cursor: pointer;                              /* Đổi con trỏ chuột thành hình bàn tay */
}

/* 3. Đổi màu tiêu đề sách khi rê chuột vào khung */
ul.resource-grid > li.item.resource:hover .resource__meta h4,
ul.resource-grid > li.item.resource:hover .resource__meta h4 a {
    color: #28a745 !important; /* Chữ tiêu đề cũng chuyển xanh */
    text-decoration: none !important;
}

/* 4. (Tùy chọn) Làm sáng ảnh lên một chút */
ul.resource-grid > li.item.resource:hover .resource__thumbnail img {
    opacity: 0.9;
}

/* Ẩn link tìm kiếm nâng cao ở trang danh sách */
.browse .advanced-search {
    display: none !important;
}
/* Ẩn chính xác các ô chọn theo tên hệ thống */
select[name="sort_by"],
select[name="sort_order"] {
    display: none !important;
}

/* Ẩn nút bấm Sắp xếp nằm trong khu vực nội dung */
.browse form button[type="submit"],
.browse form input[type="submit"] {
    display: none !important;
}




/* 1. Cắt bỏ khoảng trắng của khung bao ngoài cùng (Header) */
header {
    padding: 0 !important;       /* Xóa sạch đệm trên dưới */
    margin: 0 !important;
    min-height: 0 !important;    /* Cho phép khung co lại tối đa */
    height: auto !important;
}

/* 2. Cắt bỏ khoảng trắng của lớp layer bên trong (Div con) */
/* Đây thường là thủ phạm chính gây khoảng trắng thừa */
header > div {
    padding-top: 5px !important;    /* Chỉ chừa lại 5px để thở */
    padding-bottom: 5px !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;       /* Dùng Flexbox để ép các phần tử khít vào nhau */
    align-items: center !important; /* Căn giữa theo chiều dọc */
}

/* 3. Chỉnh kích thước Logo */
header .site-title img {
    height: 50px !important;     /* Chiều cao logo */
    max-height: 50px !important;
    width: auto !important;
    margin: 0 !important;
    display: block !important;
}

/* 4. QUAN TRỌNG: Ép Menu và nút bấm bên phải xẹp xuống */
/* Nếu menu có khoảng cách lớn, nó sẽ đẩy khung header phình to ra */
header nav,
header .site-user-menu {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ép các đường link/nút bấm trong menu gọn lại */
header nav a,
header .site-user-menu a {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    line-height: 1.2 !important; 
    display: inline-block !important;
}




/* 1. Cài đặt lưới Flexbox cho danh sách (Container) */
ul.resource-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important; /* Khoảng cách giữa các ô */
    
    /* Vô hiệu hóa tính toán của Masonry JS */
    height: auto !important;
    position: relative !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. Cài đặt cho từng ô tài liệu (Item) */
ul.resource-grid > li.item.resource {
    /* Vô hiệu hóa vị trí tuyệt đối do JS tính */
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;

    /* Chia cột: 4 cột (25%) trừ đi khoảng hở */
    width: calc(25% - 15px) !important;
    margin: 0 !important;

    /* QUAN TRỌNG: Ép chiều cao bằng nhau */
    display: flex !important;
    flex-direction: column !important;
    
    /* Thêm khung viền cho đẹp (Tùy chọn) */
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border-radius: 4px;
    overflow: hidden;
}

/* 3. Đảm bảo ảnh luôn giữ tỷ lệ chuẩn */
.resource__thumbnail {
    flex-shrink: 0; /* Không cho ảnh bị co méo */
    text-align: center;
    background: #f4f4f4;
}
.resource__thumbnail img {
    height: 200px !important; /* Ép chiều cao ảnh cố định (bạn có thể chỉnh số này) */
    width: 100% !important;
    object-fit: contain; /* Đảm bảo ảnh nằm gọn, không bị cắt */
    padding: 10px;
}

/* 4. Ép phần nội dung chữ dãn ra để lấp đầy khoảng trống */
.resource__content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
    justify-content: space-between; /* Đẩy các phần tử ra xa nhau */
}

/* 5. Cắt bớt tiêu đề nếu quá dài (Để tránh vỡ khung) */
.resource__meta h4, 
.resource__meta h4 a {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Chỉ hiện tối đa 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
    font-size: 1em; /* Chỉnh lại cỡ chữ nếu cần */
    height: 2.4em;  /* Tạo chiều cao cố định cho vùng tiêu đề */
}

/* --- RESPONSIVE: Tự động chỉnh số cột trên màn hình nhỏ --- */

/* Máy tính bảng: 3 cột */
@media (max-width: 992px) {
    ul.resource-grid > li.item.resource {
        width: calc(33.33% - 14px) !important;
    }
}

/* Điện thoại ngang: 2 cột */
@media (max-width: 768px) {
    ul.resource-grid > li.item.resource {
        width: calc(50% - 10px) !important;
    }
}

/* Điện thoại dọc: 1 cột */
@media (max-width: 480px) {
    ul.resource-grid > li.item.resource {
        width: 100% !important;
    }
}