/* Reset & Base */
:root {
    --primary-red: #1976D2;
    /* Main Blue (Was Deep Blue 900, now 700) */
    --primary-light: #42A5F5;
    /* Lighter Blue (Was 700, now 400) */
    --primary-dark: #0D47A1;
    /* Dark Blue (Was Darker, now 900) */
    --accent-gold: #FFD700;
    /* Gold for highlights */
    --text-main: #1F2937;
    /* Slate 800 */
    --text-muted: #64748B;
    /* Slate 500 */
    --text-muted: #64748B;
    /* Slate 500 */
    --bg-body: #FFFFFF;
    /* Pure White */
    --bg-card: #FFFFFF;
    --border-color: #E2E8F0;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --radius: 0px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "PingFang SC", "Microsoft YaHei", "Heiti SC", sans-serif;
    font-size: 15px;
    /* Increased base size */
    color: var(--text-main);
    background-color: var(--bg-body);
    min-width: 1200px;
    line-height: 1.6;
    background-image: url(../../shared/images/search_bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    /* Full width, auto height (no stretch) */
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

ul {
    list-style: none;
}

.container {
    width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Main Header Wrapper (Shared Background) */
.main-header-wrapper {
    background: transparent;
    /* Removed background, now on body */
    padding-bottom: 0;
}

/* Header Top */
.header-top {
    height: 110px;
    display: flex;
    align-items: center;
    background: transparent;
    /* Transparent to show wrapper bg */
    border-bottom: none;
}

.header-top .logo-area {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-top .logo-icon {
    width: 68px;
    /* Slightly larger */
    height: 68px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.header-top .logo-text {
    font-size: 36px;
    font-weight: 800;
    color: var(--primary-red);
    letter-spacing: 4px;
    font-family: "Songti SC", serif;
    /* More authoritative font */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Top Nav (Transparent, Gansu Gov Style) */
.top-nav {
    background-color: transparent;
    /* Removed background */
    height: 60px;
    box-shadow: none;
    /* Removed shadow */
    margin-top: 0;
    /* Standard flow inside wrapper */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    /* Subtle separator if needed, or remove */
}

.top-nav .nav-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Distribute evenly */
    height: 100%;
}

.top-nav .nav-list li {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-nav .nav-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* Or auto height to allow padding for border */
    font-size: 20px;
    /* Reduced from 24px to fit */
    color: #333;
    /* Dark Gray - Inactive */
    font-weight: 400;
    transition: all 0.2s ease;
    border-right: none;
    /* Removed border */
    border-bottom: 4px solid transparent;
    /* Prepare for hover/active */
    padding: 0 5px;
    text-decoration: none;
}

.top-nav .nav-list li:last-child a {
    border-right: none;
}

/* Active State */
.top-nav .nav-list li.active a,
.top-nav .nav-list li a:hover {
    background-color: transparent;
    /* No bg change */
    color: #015293;
    /* Blue - Active */
    font-weight: 700;
    /* Bold */
    border-bottom: 4px solid #015293;
    /* Blue Underline */
    box-shadow: none;
    /* Removed gold shadow */
}

/* Banners */
.banner-red {
    background-color: rgb(189, 26, 45);
    /* v11 color */
    background-image: url('../images/pattern_mask_1.png');
    /* v11 image */
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto;
    width: 1200px;
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    text-align: center;
    padding: 0 20px;
}

.banner-red .container {
    width: 100%;
    /* Ensure it fits */
}

.banner-red h1 {
    color: #fff;
    font-size: 38px;
    letter-spacing: 3px;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    font-family: "Songti SC", serif;
    font-weight: bold;
}

.banner-dark {
    display: none;
    /* Removing the scrolling text banner for a cleaner look, or integrate elsewhere */
}

.slogan-banner {
    background-color: rgb(205, 40, 60);
    background-image: url('../images/pattern_mask_2.png');
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Slogan Banner Text */
.slogan-text {
    font-size: 36px;
    font-weight: bold;
    color: #FFD700;
    /* Gold text */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    font-family: "Songti SC", serif;
    letter-spacing: 2px;
}

.policeman-day {
    width: 1200px;
    margin: 0 auto 30px auto;
    /* Boxed, centered, bottom gap */
    padding: 20px 0;
    text-align: center;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.policeman-day h2 {
    color: var(--primary-red);
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Layout Sections */
.main-content {
    padding-bottom: 60px;
}

.section-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    gap: 30px;
}

.col-left {
    width: 700px;
    /* Slightly wider */
}

.col-right {
    flex: 1;
    background: #fff;
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    height: fit-content;
}

/* Carousel */
.carousel {
    width: 100%;
    height: 420px;
    /* Taller */
    background-color: #eee;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.carousel:hover img {
    transform: scale(1.02);
}

/* Panel Headers */
.panel-header {
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
}

.panel-title {
    font-size: 20px;
    color: var(--primary-red);
    font-weight: bold;
    padding-left: 12px;
    border-left: 5px solid var(--primary-red);
    line-height: 1.2;
}

.panel-more {
    font-size: 13px;
    color: var(--text-muted);
    transition: color 0.2s;
}

.panel-more:hover {
    color: var(--primary-red);
}

/* News List */
.news-list {
    padding: 0 5px;
}

.news-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 40px;
    /* Increased line height */
    font-size: 15px;
    border-bottom: 1px solid #f1f5f9;
}

.news-list li:last-child {
    border-bottom: none;
}

.news-list li a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
    position: relative;
    padding-left: 15px;
}

.news-list li a::before {
    content: "•";
    color: var(--primary-red);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.news-list li:hover a {
    color: var(--primary-red);
    padding-left: 20px;
    /* Slide effect */
    transition: all 0.2s ease;
}

.news-list li span.date {
    color: var(--text-muted);
    font-size: 13px;
}

/* Tabs (Unified Style) */
.col-left .tab-container {
    background: #fff;
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

/* Tabs in Right Column (already in col-right wrapper) */
.col-right .tab-container {
    background: transparent;
    padding: 0;
    box-shadow: none;
    border: none;
}

.tab-header {
    display: flex;
    border-bottom: 2px solid var(--primary-red);
    margin-bottom: 20px;
}

.tab-item {
    font-size: 18px;
    padding: 12px 24px;
    cursor: pointer;
    color: var(--text-muted);
    background: #f1f5f9;
    margin-right: 4px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    transition: all 0.2s;
}

.tab-item.active {
    background-color: var(--primary-red);
    color: #fff;
    font-weight: bold;
    transform: translateY(-2px);
    /* Pop up effect */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

/* Special Columns (Updated for Red Theme) */
.special-section {
    background: #fff;
    padding: 25px 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    margin-bottom: 30px;
}

.special-section-title {
    font-size: 22px;
    color: var(--primary-red);
    font-weight: bold;
    margin-bottom: 20px;
    border-left: 5px solid var(--primary-red);
    padding-left: 15px;
}

.special-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 10px 5px 20px 5px;
    /* Bottom padding for scrollbar */
}

.special-scroll-container::-webkit-scrollbar {
    height: 8px;
}

.special-scroll-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 0px;
}

.special-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.special-item {
    min-width: 300px;
    height: 120px;
    background-color: #eee;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.special-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.special-item img {
    transition: transform 0.3s ease;
}

.special-item:hover img {
    transform: scale(1.05);
}

/* Service Icons */
.service-bar {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 30px 20px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    margin-bottom: 30px;
}

.service-item {
    width: 10%;
    text-align: center;
    cursor: pointer;
}

.service-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    background: #E3F2FD;
    /* Very light blue */
    border-radius: 0px;
    /* Soft square */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--primary-red);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.service-item:hover .service-icon {
    transform: translateY(-5px) rotate(5deg);
    background: var(--primary-red);
    color: #fff;
    box-shadow: var(--shadow-md);
}

.service-item div:last-child {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
}

/* Video & Footer */
.video-header-only {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--primary-red);
    color: #fff;
    padding: 20px;
    border-radius: var(--radius);
    height: 100%;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background 0.2s;
}

.video-header-only:hover {
    background: var(--primary-dark);
}

.video-title {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
}

.video-arrow {
    font-size: 24px;
    color: #fff;
}

.footer-cols {
    display: flex;
    gap: 30px;
}

.footer-col {
    flex: 1;
    background: #fff;
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

/* Specific overrides for footer headers */
.footer-col .panel-title {
    font-size: 18px;
}

/* Utility classes */
.active {
    /* Ensure active class is handled by parents usually, but just in case */
}