/* Mobile Layout Fix - CSS cực mạnh để override inline styles */

/* Desktop: Luôn hiển thị 2 cột */
@media (min-width: 769px) {
    /* Target chính xác div có inline style grid - sử dụng nhiều selector */
    div[style*="grid-template-columns:2fr 1fr"],
    div[style*="display:grid"],
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="display: grid"],
    div[style*="grid"],
    div[style*="2fr"],
    div[style*="1fr"] {
        display: grid !important;
        grid-template-columns: 2fr 1fr !important;
        gap: 24px !important;
        align-items: start !important;
    }
    
    /* Target các phần tử con */
    div[style*="grid-template-columns:2fr 1fr"] > div:first-child,
    div[style*="display:grid"] > div:first-child,
    div[style*="grid-template-columns: 2fr 1fr"] > div:first-child,
    div[style*="display: grid"] > div:first-child,
    div[style*="grid"] > div:first-child,
    div[style*="2fr"] > div:first-child,
    div[style*="1fr"] > div:first-child {
        margin-bottom: 0 !important;
        order: 1 !important;
    }
    
    div[style*="grid-template-columns:2fr 1fr"] > aside,
    div[style*="display:grid"] > aside,
    div[style*="grid-template-columns: 2fr 1fr"] > aside,
    div[style*="display: grid"] > aside,
    div[style*="grid"] > aside,
    div[style*="2fr"] > aside,
    div[style*="1fr"] > aside {
        margin-top: 0 !important;
        order: 2 !important;
    }
    
    /* Force container chính */
    .container > div:last-child,
    .container > div:last-of-type {
        display: grid !important;
        grid-template-columns: 2fr 1fr !important;
        gap: 24px !important;
        align-items: start !important;
    }
}

/* Mobile: Chuyển thành 1 cột */
@media (max-width: 768px) {
    /* Target chính xác div có inline style grid - sử dụng nhiều selector */
    div[style*="grid-template-columns:2fr 1fr"],
    div[style*="display:grid"],
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="display: grid"],
    div[style*="grid"],
    div[style*="2fr"],
    div[style*="1fr"] {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    /* Target các phần tử con */
    div[style*="grid-template-columns:2fr 1fr"] > div:first-child,
    div[style*="display:grid"] > div:first-child,
    div[style*="grid-template-columns: 2fr 1fr"] > div:first-child,
    div[style*="display: grid"] > div:first-child,
    div[style*="grid"] > div:first-child,
    div[style*="2fr"] > div:first-child,
    div[style*="1fr"] > div:first-child {
        margin-bottom: 24px !important;
        order: 1 !important;
    }
    
    div[style*="grid-template-columns:2fr 1fr"] > aside,
    div[style*="display:grid"] > aside,
    div[style*="grid-template-columns: 2fr 1fr"] > aside,
    div[style*="display: grid"] > aside,
    div[style*="grid"] > aside,
    div[style*="2fr"] > aside,
    div[style*="1fr"] > aside {
        margin-top: 0 !important;
        order: 2 !important;
    }
    
    /* Force container chính */
    .container > div:last-child,
    .container > div:last-of-type {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* Extra small mobile */
@media (max-width: 480px) {
    div[style*="grid-template-columns:2fr 1fr"],
    div[style*="display:grid"],
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="display: grid"],
    div[style*="grid"],
    div[style*="2fr"],
    div[style*="1fr"] {
        gap: 20px !important;
    }
    
    div[style*="grid-template-columns:2fr 1fr"] > div:first-child,
    div[style*="display:grid"] > div:first-child,
    div[style*="grid-template-columns: 2fr 1fr"] > div:first-child,
    div[style*="display: grid"] > div:first-child,
    div[style*="grid"] > div:first-child,
    div[style*="2fr"] > div:first-child,
    div[style*="1fr"] > div:first-child {
        margin-bottom: 20px !important;
    }
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
    div[style*="grid-template-columns:2fr 1fr"],
    div[style*="display:grid"],
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="display: grid"],
    div[style*="grid"],
    div[style*="2fr"],
    div[style*="1fr"] {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    div[style*="grid-template-columns:2fr 1fr"] > div:first-child,
    div[style*="display:grid"] > div:first-child,
    div[style*="grid-template-columns: 2fr 1fr"] > div:first-child,
    div[style*="display: grid"] > div:first-child,
    div[style*="grid"] > div:first-child,
    div[style*="2fr"] > div:first-child,
    div[style*="1fr"] > div:first-child {
        margin-bottom: 20px !important;
    }
    
    div[style*="grid-template-columns:2fr 1fr"] > aside,
    div[style*="display:grid"] > aside,
    div[style*="grid-template-columns: 2fr 1fr"] > aside,
    div[style*="display: grid"] > aside,
    div[style*="grid"] > aside,
    div[style*="2fr"] > aside,
    div[style*="1fr"] > aside {
        margin-top: 0 !important;
    }
}


/*2508*/
.pagination {
  display: flex;
  flex-wrap: wrap;   /* tự xuống dòng */
  gap: 5px;          /* khoảng cách giữa các nút */
  justify-content: center; /* căn giữa */
}
.pagination a {
  min-width: 36px;
  text-align: center;
}