.pro-middle-module {
    margin-top: 40px;
    margin-bottom: 40px;
}

.module-header {
    background-color: #E88C37; /* Orange color from the new design */
    color: #fff;
    font-size: 32px;
    text-align: center; /* Center align text */
    padding: 20px 40px; /* Adjust padding for button-like appearance */
    margin: 0 auto 40px 0; /* Center horizontally and add bottom margin */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Shadow only on the bottom */
    width: max-content; /* Shrink-wrap width to content */
  border-radius: 28px; 
}

.module-header h2 {
    margin: 0;
    font-weight: bold;
}

.module-header span {
    font-size: 18px; /* Smaller than h2 */
    color: rgba(255, 255, 255, 0.8); /* Slightly lighter color */
    margin-top: 5px; /* Small space below h2 */
    display: block; /* Ensures it takes its own line */
}

.module-content {
    display: flex;
    gap: 30px; /* Restore gap for spacing between left and right modules */
    align-items: flex-start; /* Align items to the top */
    padding: 0 20px; /* Restore consistent horizontal padding */
}

.module-left {
    flex: 2; /* Takes more space */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns for cards */
    gap: 0; /* No gap between grid items */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.03); /* Very subtle overall shadow for module-left */
}

.module-item {
    height: 180px; /* Fixed height for cards */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    /* No individual shadow for cards as per design update */
    text-decoration: none;
    transition: transform 0.2s ease-in-out;
}

.module-item:hover {
    transform: translateY(0); /* Remove lift effect, or keep for subtle hover */
    box-shadow: 0 0 8px rgba(0,0,0,0.1); /* Slightly more prominent hover shadow */
}

.module-item.shadow-lr {
    box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2), -5px 0 10px rgba(0, 0, 0, 0.2); /* Increased left and right shadows */
}

.module-item.shadow-tb {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2), 0 -5px 10px rgba(0, 0, 0, 0.2); /* Increased top and bottom shadows */
}

.module-item a {
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 5px;
    color: #333;
}

.module-item span {
    font-size: 16px;
    opacity: 0.8;
}

.module-item.white-bg {
    background-color: #fff;
    color: #333;
}

.module-item.red-bg {
    background-color: #C04040; /* Use the same muted red as header for consistency and design match */
    color: #fff;
}
.module-item.red-bg a{
    color: #fff;
}

.grid-image-item {
    height: 180px; /* Match module-item height */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* No individual shadow for image card as per design update */
    /* Removed border */
}

.grid-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 8px; */ /* Removed as corners might be trimmed by adjacent cards in a no-gap grid */
}

.module-right {
    flex: 1; /* Takes less space */
    background-color: #fff; /* Changed to white background based on design */
    /* Removed border-radius as per design */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.03); /* Very subtle overall shadow for module-right */
    padding: 0; /* Padding handled by latest-news */
    /* Removed fixed height and borders */
}

.latest-news {
    padding: 0;
}

.latest-news-header {
    background-color: #6D6D6D; /* Darker gray header from design */
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.latest-news-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

.latest-news-header span {
    font-size: 16px; /* Slightly larger */
    color: #BEBEBE; /* Adjusted to a slightly darker light gray */
    font-weight: bold; /* Make it bold */
}

.latest-news .article-list {
    padding: 15px 20px;
}

.latest-news .article-item {
    padding: 12px 0 18px 0; /* Increased bottom padding to enlarge vertical spacing */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically align items */
    border-bottom: 1px solid #eee; /* Add a horizontal line below each item */
}

.latest-news .article-item:last-child {
    border-bottom: none; /* Remove border for the last item */
}

.latest-news .article-item a.article-title {
    color: #333; /* Default color for article title */
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.latest-news .article-item .article-date {
    font-size: 14px;
    color: #999;
    margin-left: auto; /* Pushes the date to the far right */
    flex-shrink: 0; /* Prevent it from shrinking */
}

.latest-news .article-item a.article-title:hover {
    color: #C04040; /* Red color on hover for article title */
}

/* Style for highlighted (重点) news articles */
.latest-news .article-item a.highlight-title {
    color: #C04040; /* Red color for highlighted titles */
    font-weight: bold; /* Bold font for highlighted titles */
}

.latest-news .article-item .bullet {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #C73333; /* Red color for the bullet */
    border-radius: 50%;
    margin-right: 10px; /* Space between bullet and text */
    flex-shrink: 0; /* Prevent bullet from shrinking */
}

/* Responsive adjustments for middle module */
@media (max-width: 1024px) {
    .module-content {
        flex-direction: column; /* Stack left and right sections */
        gap: 20px; /* Restore tablet gap */
        padding: 0; /* Remove padding from previous manual edit */
    }

    .module-left {
        grid-template-columns: repeat(2, 1fr); /* Adjust to 2 columns for tablets */
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.03); /* Adjust shadow for tablets */
        /* Removed border */
    }

    .module-item {
        height: 150px; /* Adjust height for tablets */
        box-shadow: none; /* No individual shadow */
        /* Removed border */
    }

    .grid-image-item {
        height: 150px; /* Match module-item height for tablets */
        box-shadow: none; /* No individual shadow */
        /* Removed border */
    }

    .module-item a {
        font-size: 20px;
        /* Removed color: #333; to avoid conflict with red-bg */
    }

    .module-item span {
        font-size: 14px;
    }

    .module-right {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.03); /* Adjust shadow for tablets */
        /* Removed fixed height and borders */
    }
}

@media (max-width: 767px) {
    .module-header {
        font-size: 24px;
        padding: 20px 15px;
    }

    .module-left {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 15px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.03); /* Adjust shadow for mobile */
        /* Removed border */
    }

    .module-item {
        height: 120px;
        box-shadow: none; /* No individual shadow */
        /* Removed border */
    }

    .grid-image-item {
        height: 120px; /* Match module-item height for mobile */
        box-shadow: none; /* No individual shadow */
        /* Removed border */
    }

    .module-item a {
        font-size: 18px;
        /* Removed color: #333; to avoid conflict with red-bg */
    }

    .module-item span {
        font-size: 12px;
    }

    .latest-news-header {
        padding: 10px 15px;
    }

    .latest-news-header h3 {
        font-size: 16px;
    }

    .latest-news-header span {
        font-size: 12px;
    }

    .latest-news .article-list {
        padding: 10px 15px;
    }

    .latest-news .article-item {
        padding: 8px 0;
    }

    .module-right {
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.03); /* Adjust shadow for mobile */
        /* Removed fixed height and borders */
    }
}