/* ===================================
   荷叶学课 - Main CSS
   Primary: #20548E (dark navy)
   CTA:     #C13F2F (red button)
   Accent:  #e8271a (red)
=================================== */

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

body {
    font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    font-size: 14px;
    color: #333;
    background: #f5f5f5;
    line-height: 1.6;
}

a { text-decoration: none; color: #333; }
a:hover { color: #e8271a; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.clearfix::after { content: ''; display: table; clear: both; }

/* ===== LAYOUT ===== */
.content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ===== BREADCRUMB ===== */
.Breadcrumb {
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    padding: 6px 0;
    font-size: 12px;
    color: #666;
}
.Breadcrumb .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.Breadcrumb a { color: #666; }
.Breadcrumb a:hover { color: #e8271a; }
.bc-right { color: #666; }

/* ===== STICKY HEADER ===== */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ===== TOP INDEX (HEADER) ===== */
.top_index {
    background: #fff;
    padding: 14px 0;
    /* no border — merged visually with navbar below */
}
.top_index .content {
    display: flex;
    align-items: center;
    gap: 16px;
}
.logo {
    display: flex;
    align-items: center;
    gap: 8px;
}
.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.logo img { height: 40px; }
.logo-text {
    font-size: 28px;
    font-weight: bold;
    color: #1565C0;
    letter-spacing: 2px;
}
.logo-sub {
    font-size: 12px;
    color: #888;
    margin-left: 8px;
    margin-top: 4px;
}

/* City Switcher */
.city-switcher {
    position: relative;
    cursor: pointer;
}

/* Province Switcher (province layout) */
.prov-switcher {
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.prov-switcher-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}
.prov-arrow {
    font-size: 10px;
    color: #e8271a;
    transition: transform 0.2s;
}
.prov-name {
    font-size: 18px;
    color: #e8271a;
    font-weight: bold;
}
.prov-switcher:hover .prov-arrow {
    transform: rotate(180deg);
}
.prov-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 1000;
    padding: 12px;
    width: 380px;
    margin-top: 4px;
}
.prov-switcher:hover .prov-dropdown {
    display: block;
}
.prov-dropdown-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.prov-dropdown-grid a {
    display: inline-block;
    padding: 5px 10px;
    font-size: 13px;
    color: #555;
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s;
}
.prov-dropdown-grid a:hover {
    background: #20548E;
    color: #fff;
}
.prov-dropdown-grid a.active {
    background: #e8271a;
    color: #fff;
    font-weight: bold;
}
.city-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
}
.city-btn:hover { border-color: #20548E; color: #20548E; }
.city-btn .arrow { font-size: 10px; color: #999; transition: transform 0.2s; }
.city-switcher:hover .arrow { transform: rotate(180deg); }

.city-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 10px;
    width: 360px;
}
.city-switcher:hover .city-dropdown { display: block; }
.city-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.city-grid a {
    display: inline-block;
    padding: 4px 10px;
    font-size: 13px;
    color: #555;
    border-radius: 3px;
    white-space: nowrap;
}
.city-grid a:hover { background: #20548E; color: #fff; }
.city-grid a.active { background: #e8271a; color: #fff; }

/* Phone */
.header-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #e8271a;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
}
.header-phone span:last-child { font-size: 14px; color: #555; font-weight: normal; }

/* Search */
.header-search {
    display: flex;
    align-items: center;
    width: 480px;
    margin: 0 auto;
}
.header-search input {
    flex: 1;
    height: 46px;
    padding: 0 16px;
    border: 2px solid #20548E;
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-size: 15px;
    outline: none;
}
.header-search button {
    height: 46px;
    padding: 0 24px;
    background: #20548E;
    color: #fff;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}
.header-search button:hover { background: #1B4779; }

/* ===== NAVBAR ===== */
.navbar {
    background: #fff;
    position: relative;
    z-index: 100;
    border-bottom: 3px solid #20548E;
}
.nav_ul {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav_ul li {
    position: relative;
}
.nav_ul li a {
    color: #333;
    padding: 0 18px;
    line-height: 44px;
    display: block;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.nav_ul li a:hover,
.nav_ul li a.active {
    background: #20548E;
    color: #fff;
}

.nav_ul li:not(.mega-menu-trigger) {
    flex: 1;
    text-align: center;
}
.nav_ul li:not(.mega-menu-trigger) a {
    text-align: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
}

/* Mega Menu trigger — fixed width matching left_nav, then 10px gap */
.mega-menu-trigger {
    position: relative !important;
    width: 180px;
    flex-shrink: 0;
    margin-right: 10px;
}
.mega-menu-trigger > a {
    background: #1565C0 !important;
    color: #fff !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}
.mega-menu-trigger > a:hover { background: #1a5fa8 !important; }
.mega-menu-trigger > a .menu-icon { font-size: 16px; }

.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    z-index: 1000;
    width: 950px;
    height: 600px;
    box-sizing: border-box;
    overflow: hidden;
}
.mega-menu-trigger:hover .mega-menu { display: block; }

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    width: 100%;
    height: 100%;
}
.mega-cat-item {
    padding: 12px 14px;
    box-sizing: border-box;
    overflow: hidden;
}
.mega-cat-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    white-space: nowrap;
}
.mega-cat-title a {
    display: inline !important;
    line-height: normal !important;
    padding: 0 !important;
    color: #333 !important;
    font-weight: bold !important;
    background: none !important;
    font-size: 16px !important;
    white-space: nowrap;
}
.mega-cat-title a:hover { color: #2D7BB7 !important; }
.mega-cat-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}
.mega-cat-subs a {
    display: inline !important;
    line-height: 1.7 !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: #888 !important;
    font-weight: normal !important;
    background: none !important;
    white-space: nowrap;
}
.mega-cat-subs a:hover { color: #2D7BB7 !important; background: none !important; }

/* ===== MAIN LAYOUT ===== */
/* ===== HOME BANNER STRIP ===== */
.home-banner-strip {
    width: 100%;
    height: 630px;
    background: #20548E;
    overflow: hidden;
    position: relative;
}
.home-banner-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Course box on banner */
.banner-course-box {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 10px;
    padding: 28px 32px;
    width: 280px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    text-align: center;
}
.bcb-free {
    font-size: 14px;
    color: #20548E;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 6px;
}
.bcb-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 18px;
}
.bcb-form input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    margin-bottom: 12px;
}
.bcb-form input:focus { border-color: #20548E; }
.bcb-btn {
    width: 100%;
    padding: 10px 0;
    background: #C13F2F;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}
.bcb-btn:hover { background: #a33526; }

/* ===== HOME CARDS ===== */
.home-card {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #20548E;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.home-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.home-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== HOME TITLE BANNER ===== */
.home-title-banner {
    width: 100%;
    padding: 18px 24px;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 2px;
    border-radius: 6px;
    margin-bottom: 4px;
}

/* ===== STUDY SECTION ===== */
.study-header {
    display: flex;
    align-items: center;
    gap: 0;
    background: #20548E;
    padding: 0 16px;
}
.study-label {
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    padding: 10px 16px 10px 0;
    margin-right: 8px;
    border-right: 1px solid rgba(255,255,255,0.3);
}
.study-tab {
    padding: 10px 14px;
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}
.study-tab:hover, .study-tab.active {
    color: #fff;
    border-bottom-color: #fff;
}
.study-panel { display: none; }
.study-panel.active { display: block; }
.study-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 16px;
}
.study-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.study-item-img {
    width: 100%;
    height: 140px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}
.study-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.study-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.study-list li {
    height: 32px;
    line-height: 32px;
    border-bottom: 1px solid #f5f5f5;
}
.study-list li a {
    display: block;
    font-size: 13px;
    color: #444;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.study-list li a:hover { color: #20548E; }
.study-list li span { display: block; }

/* ===== QA SECTION ===== */
.qa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    padding: 0 16px;
}
.qa-col {}
.qa-row {
    height: 36px;
    line-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;
    gap: 12px;
}
.qa-question {
    flex: 1;
    font-size: 13px;
    color: #1565C0;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.qa-question:hover { color: #20548E; }
.qa-meta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.qa-resolved {
    color: #28a745;
}
.qa-date {
    color: #bbb;
}

/* ===== HOME IMAGES ===== */
.home-images-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}
.home-image-item {
    width: 100%;
    line-height: 0;
}
.home-image-item img {
    width: 100%;
    display: block;
}
.home-image-item a { display: block; line-height: 0; }

.main-wrapper {
    background: #fff;
    margin: 10px 0;
}
.home-top-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

/* ===== LEFT NAV ===== */
.left_nav {
    width: 180px;
    min-width: 180px;
    background: #fff;
    overflow: hidden;
    border: 1px solid #eee;
    flex-shrink: 0;
}
.left_nav ul { list-style: none; padding: 0; margin: 0; }
.left_nav > ul > li {
    position: relative;
    border-bottom: 1px solid #f2f2f2;
}
.left_nav > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 14px;
    font-size: 18px;
    color: #333;
    font-weight: 700;
    transition: all 0.2s;
    text-align: center;
}
.left_nav > ul > li > a:hover,
.left_nav > ul > li:hover > a {
    background: #f0f0f0;
    color: #1565C0;
}
.left_nav > ul > li > a .sub-arrow { font-size: 10px; color: #aaa; margin-left: 6px; }
.left_nav > ul > li:hover > a .sub-arrow { color: #1565C0; }

.left_nav-sub {
    display: none;
    position: absolute;
    left: 180px;
    top: 0;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.1);
    z-index: 50;
    width: 240px;
    padding: 8px;
}
.left_nav > ul > li:hover .left_nav-sub { display: block; }
.left_nav-sub a {
    display: block;
    padding: 5px 10px;
    font-size: 13px;
    color: #555;
    border-radius: 3px;
}
.left_nav-sub a:hover { background: #f0f3fc; color: #20548E; }
.left_nav-cat-title {
    font-weight: bold;
    color: #20548E;
    font-size: 13px;
    padding: 5px 10px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 4px;
}

/* ===== BANNER COL (banner + advantage below) ===== */
.banner-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ===== BANNER ===== */
.banner {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #20548E;
    flex: 1;
}
.banner-slider {
    position: relative;
    height: 100%;
    min-height: 300px;
    overflow: hidden;
}
.banner-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: none;
}
.banner-slide.active { display: block; }
.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner-slide-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    font-weight: bold;
}
.banner-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}
.banner-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.2s;
}
.banner-dot.active { background: #fff; }

/* Advantage row — horizontal strip below banner */
.advantage-row {
    display: flex;
    flex-direction: row;
    background: transparent;
    width: 100%;
    border-top: 1px solid #eee;
}
.advantage-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    color: #666;
    border-right: 1px solid #eee;
    text-align: center;
}
.advantage-item:last-child { border-right: none; }
.advantage-title {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
}
.advantage-desc {
    font-size: 13px;
    color: #888;
    margin-top: 3px;
}

/* ===== SECTION COMMON ===== */
.section { margin: 16px 0; background: #fff; padding: 0; }
.two-col-main .section:first-child { margin-top: 0; }
.two-col[style*="stretch"] .two-col-main { display: flex; flex-direction: column; }
.two-col[style*="stretch"] .two-col-side { display: flex; flex-direction: column; }
.two-col[style*="stretch"] .two-col-side .side-box { flex: 1; }
.section-header {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
    flex-wrap: nowrap;
}
.section-title {
    font-size: 17px;
    font-weight: bold;
    color: #222;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    margin-right: 16px;
    flex-shrink: 0;
}
.section-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: #20548E;
    border-radius: 2px;
}
/* Inline tabs inside section-header */
.inline-tabs {
    display: flex;
    flex: 1;
    gap: 0;
    align-items: center;
}
.inline-tabs .tab-btn {
    padding: 6px 14px;
    font-size: 13px;
    border-bottom: none;
    line-height: 1;
}
.section-more { font-size: 13px; color: #888; margin-left: auto; white-space: nowrap; }
.section-more:hover { color: #e8271a; }
.section-body { padding: 16px; }

/* ===== TABS ===== */
.tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #ddd;
    padding: 0 16px;
    background: #fafafa;
}
.tab-btn {
    padding: 10px 18px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}
.tab-btn:hover { color: #1565C0; }
.tab-btn.active { background: #1565C0; color: #fff; border-bottom-color: transparent; font-weight: bold; }
.inline-tabs .tab-btn.active { border-radius: 3px; }
.tab-content { display: none; padding: 16px; }
.tab-content.active { display: block; }

/* ===== INSTITUTION CARDS ===== */
.inst-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.inst-card {
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    background: #fff;
}
.inst-card:hover {
    box-shadow: 0 4px 16px rgba(31,48,126,0.12);
    transform: translateY(-2px);
}
.inst-card-logo {
    height: 80px;
    background: linear-gradient(135deg, #20548E 0%, #1B4779 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    font-weight: bold;
}
.inst-card-body { padding: 10px; }
.inst-card-name {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inst-card-name:hover { color: #20548E; }
.inst-card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}
.inst-rating { color: #f90; }

/* ===== COURSE CARDS ===== */
.course-list { }
.course-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
    gap: 10px;
}
.course-item:last-child { border-bottom: none; }
.course-serial { display: none; }
.course-info { flex: 1; }
.course-name {
    font-size: 13px;
    color: #888;
    line-height: 1.5;
    font-weight: normal;
    display: block;
}
.course-name:hover { color: #1565C0; }
.course-meta { display: none; }
.course-price { display: none; }
.course-inst { display: none; }

/* Course card style (for grid) */
.course-card {
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s;
}
.course-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.course-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: 85px;
    background: linear-gradient(135deg, #20548E 0%, #1565C0 100%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
}
.course-card-img-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.35);
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.course-card-body { padding: 10px; }
.course-card-name {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 6px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.course-card-price { color: #e8271a; font-size: 16px; font-weight: bold; }
.course-card-orig { color: #aaa; font-size: 12px; text-decoration: line-through; margin-left: 6px; }
.course-card-inst { font-size: 12px; color: #888; margin-top: 4px; }

/* ===== ARTICLE LIST ===== */
.article-list { }
.article-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
    gap: 8px;
}
.article-item:last-child { border-bottom: none; }
.article-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #20548E;
    flex-shrink: 0;
    margin-top: 7px;
}
.article-title {
    flex: 1;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.article-title:hover { color: #e8271a; }
.article-date { font-size: 12px; color: #bbb; white-space: nowrap; }

/* ===== TWO COLUMN LAYOUT ===== */
.two-col {
    display: flex;
    gap: 16px;
}
.two-col-main { flex: 1; min-width: 0; }
.two-col-side { width: 280px; min-width: 280px; }

/* Sidebar box */
.side-box {
    background: #fff;
    border: 1px solid #eee;
    margin-bottom: 0;
    border-radius: 4px;
    overflow: hidden;
}
.side-box-title {
    background: transparent;
    color: #222;
    font-size: 17px;
    font-weight: bold;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #eee;
    position: relative;
}
.side-box-title::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 17px;
    background: #20548E;
    transform: skewX(-12deg);
    flex-shrink: 0;
}
.side-box-body { padding: 12px; }
.side-list li {
    padding: 7px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 13px;
}
.side-list li:last-child { border-bottom: none; }
.side-list a { color: #555; }
.side-list a:hover { color: #e8271a; }

/* ===== BRAND RECOMMENDATIONS ===== */
.brand-section {
    background: #fff;
    margin: 10px 0;
}
.brand-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.brand-item {
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 14px;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
}
.brand-item:hover { border-color: #20548E; background: #f0f3fc; }
.brand-logo {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, #20548E, #4a6cf7);
    border-radius: 8px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}
.brand-name { font-size: 14px; font-weight: bold; color: #333; }
.brand-desc { font-size: 12px; color: #888; margin-top: 4px; }

/* ===== TRAINING NAVIGATION ===== */
/* ===== TRAINING NAVIGATION (redesigned) ===== */
.train-nav-wrap {
    background: #fff;
    margin: 10px 0;
    border-top: 2px solid #20548E;
}
.train-nav-header {
    padding: 12px 16px 0;
}
.train-nav-title {
    font-size: 17px;
    font-weight: bold;
    color: #222;
}
.train-nav-body {
    display: flex;
    gap: 0;
    padding: 0;
}

/* 左+中 分类格子 */
.train-nav-cats {
    flex: 1;
    display: grid;
    border-right: none;
    grid-template-columns: 1fr 1fr 1fr;
}
.train-cat-cell {
    padding: 10px 14px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.train-cat-cell:nth-child(3n) { border-right: none; }
.train-cat-name {
    margin-bottom: 6px;
}
.train-cat-name a {
    font-size: 16px;
    font-weight: 800;
    color: #1565C0;
}
.train-cat-name a:hover { color: #1565C0; text-decoration: underline; }
.train-cat-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    line-height: 1.8;
}
.train-cat-subs a {
    font-size: 14px;
    color: #666;
}
.train-cat-subs a:hover { color: #2D7BB7; }
.train-cat-subs a:hover { color: #2D7BB7; }
.train-more {
    font-size: 12px;
    color: #2D7BB7 !important;
}

/* 右侧推荐机构侧边栏 */
.train-nav-side {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.train-side-recommend {
    flex: 1;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    position: relative;
}
.train-recommend-tag {
    display: inline-block;
    background: #e8271a;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 3px;
    margin-bottom: 8px;
    font-weight: bold;
}
.train-inst-card {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
    align-items: flex-start;
}
.train-inst-card:last-child { border-bottom: none; }
.train-inst-logo {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #20548E, #1565C0);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
}
.train-inst-info { flex: 1; min-width: 0; }
.train-inst-name {
    display: block;
    font-size: 15px;
    color: #1565C0;
    font-weight: 800;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.train-inst-name:hover { color: #1565C0; }
.train-inst-desc {
    font-size: 11px;
    color: #888;
    line-height: 1.6;
}

/* 最新上线机构 */
.train-side-new {
    padding: 12px 14px;
}
.train-side-new-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    color: #222;
    margin-bottom: 10px;
}
.train-side-new-header a {
    font-size: 13px;
    color: #2D7BB7;
    font-weight: normal;
}
.train-new-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
}
.train-new-item:last-child { border-bottom: none; }
.train-new-tag {
    background: #e8f4ff;
    color: #2D7BB7;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 2px;
    white-space: nowrap;
    flex-shrink: 0;
    width: 56px;
    text-align: center;
    margin-top: 1px;
}
.train-new-item a { color: #555; text-align: left; font-size: 14px; }
.train-new-item a:hover { color: #2D7BB7; }

/* ===== PROMOTIONS LIST ===== */
.promo-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    font-size: 13px;
}
.promo-list li:last-child { border-bottom: none; }
.promo-list a { color: #333; display: flex; align-items: flex-start; gap: 6px; }
.promo-list a:hover { color: #e8271a; }
.promo-tag {
    background: #e8271a;
    color: #fff;
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 2px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ===== HOT TAGS ===== */
.hot-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px;
}
.hot-tag {
    display: inline-block;
    padding: 4px 12px;
    background: #f5f5f5;
    color: #555;
    border-radius: 20px;
    font-size: 13px;
    transition: all 0.2s;
}
.hot-tag:hover { background: #20548E; color: #fff; }

/* ===== AD BANNER ===== */
.ad-banner-wrap {
    margin: 10px 0;
}
.ad-banner {
    display: block;
    width: 100%;
    height: 80px;
    overflow: hidden;
    border-radius: 8px;
}
.ad-banner-placeholder {
    width: 100%;
    height: 80px;
    background: linear-gradient(90deg, #1565C0 0%, #20548E 40%, #1565C0 100%);
    border-radius: 8px;
}
.ad-banner img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}


/* ===== FOOTER ===== */
.footer {
    background: #f2f2f2;
    color: #888;
    padding: 30px 0 0;
    margin-top: 20px;
}
.footer-top {
    display: flex;
    gap: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-col { flex: 1; }
.footer-col-title {
    font-size: 15px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer-col ul li {
    padding: 4px 0;
    font-size: 13px;
}
.footer-col ul li a { color: #aaa; }
.footer-col ul li a:hover { color: #fff; }
.footer-bottom {
    text-align: center;
    padding: 14px 0;
    font-size: 12px;
    color: #888;
}
.footer-bottom a { color: #888; }
.footer-bottom a:hover { color: #555; }
.footer-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.footer-cities a {
    color: #888;
    font-size: 12px;
}
.footer-cities a:hover { color: #fff; }

/* ===== FIXED FLOATING PANEL (悬浮窗) ===== */
.xuanfu {
    position: fixed;
    right: max(8px, calc((100vw - 1200px) / 4 - 45px));
    top: 50%;
    transform: translateY(-50%);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.xf-item {
    width: 90px;
    background: #20548E;
    color: #fff;
    font-size: 13px;
    text-align: center;
    padding: 12px 8px;
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
    line-height: 1;
    border-radius: 4px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.xf-item:hover { opacity: 0.85; }
.xf-item .xf-icon { font-size: 15px; display: inline; margin-bottom: 0; }

/* 在线咨询 — 深蓝色 */
.xf-consult { background: #1565C0; color: #fff; }
.xf-consult:hover { background: #0d47a1; opacity: 1; }

/* 申请试听 — 白底黑字 浅蓝边框 */
.xf-trial { background: #fff; color: #333; border: 1px solid #20548E; }
.xf-trial:hover { background: #e8f4ff; opacity: 1; }

/* 回到顶部 — 浅蓝底黑字 */
.xf-top { background: #20548E; color: #333; }
.xf-top:hover { background: #1B4779; opacity: 1; }

.xf-item .xf-popup {
    display: none;
    position: absolute;
    right: 100%;
    top: 0;
    background: #1565C0;
    color: #fff;
    padding: 10px 14px;
    border-radius: 4px 0 0 4px;
    white-space: nowrap;
    font-size: 13px;
    box-shadow: -2px 2px 8px rgba(0,0,0,0.2);
    margin-right: 4px;
}
.xf-item:hover .xf-popup { display: block; }

/* ===== REGISTRATION MODAL ===== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9900;
    align-items: center;
    justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background: #fff;
    border-radius: 8px;
    width: 420px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.2);
}
.modal-header {
    background: #20548E;
    color: #fff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-title { font-size: 17px; font-weight: bold; }
.auth-tab {
    padding: 8px 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    color: rgba(255,255,255,0.6);
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.auth-tab.active {
    color: #fff;
    border-bottom-color: #fff;
}
.auth-tab:hover { color: #fff; }
.modal-close {
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    opacity: 0.7;
}
.modal-close:hover { opacity: 1; }
.modal-body { padding: 24px; }
.modal-body .form-group { margin-bottom: 16px; }
.modal-body label { display: block; font-size: 13px; color: #555; margin-bottom: 6px; font-weight: bold; }
.modal-body input,
.modal-body textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}
.modal-body input:focus,
.modal-body textarea:focus { border-color: #20548E; }
.modal-body textarea { height: 80px; resize: none; }
.modal-submit {
    width: 100%;
    height: 44px;
    background: #20548E;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}
.modal-submit:hover { background: #1B4779; }
.modal-note {
    text-align: center;
    font-size: 12px;
    color: #aaa;
    margin-top: 10px;
}

/* ===== COURSE PAGE BREADCRUMB & SUB-FILTER ===== */
.course-breadcrumb {
    font-size: 14px;
    color: #333;
    padding: 8px 0 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.course-breadcrumb-label { color: #1565C0; font-weight: 500; }
.course-breadcrumb a { color: #333; }
.course-breadcrumb a:hover { color: #1565C0; }
.course-breadcrumb-sep { color: #999; }

.course-sub-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 12px;
}
.course-sub-label { font-size: 14px; color: #333; white-space: nowrap; }
.course-sub-tag {
    font-size: 13px;
    color: #555;
    background: #f5f5f5;
    padding: 3px 12px;
    border-radius: 3px;
    border: 1px solid #e0e0e0;
}
.course-sub-tag:hover { background: #e8f4ff; color: #1565C0; border-color: #20548E; }

/* ===== PAGE HEADERS ===== */
.page-header {
    background: linear-gradient(135deg, #20548E, #1B4779);
    color: #fff;
    padding: 24px 0;
    margin-bottom: 16px;
}
.page-header h1 { font-size: 22px; font-weight: bold; }
.page-header p { font-size: 14px; opacity: 0.8; margin-top: 4px; }

/* Breadcrumb inside page */
.page-breadcrumb {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 8px;
}
.page-breadcrumb a { color: rgba(255,255,255,0.7); }
.page-breadcrumb a:hover { color: #fff; }

/* ===== INSTITUTION DETAIL ===== */
.inst-detail-header {
    background: #fff;
    padding: 24px;
    border-radius: 6px;
    margin-bottom: 16px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.inst-detail-logo {
    width: 100px; height: 100px;
    background: linear-gradient(135deg, #20548E, #4a6cf7);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    flex-shrink: 0;
}
.inst-detail-info h1 {
    font-size: 22px;
    color: #20548E;
    margin-bottom: 8px;
}
.inst-detail-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #666;
    flex-wrap: wrap;
}
.inst-meta-item { display: flex; align-items: center; gap: 4px; }
.inst-meta-label { color: #888; }
.inst-meta-value { color: #333; font-weight: 500; }
.inst-rating-stars { color: #f90; font-size: 16px; }

/* ===== COURSE DETAIL ===== */
.course-detail-header {
    background: #fff;
    padding: 24px;
    border-radius: 6px;
    margin-bottom: 16px;
}
.course-detail-name { font-size: 22px; font-weight: bold; color: #20548E; margin-bottom: 12px; }
.course-detail-price-box {
    background: #fff5f5;
    border: 1px solid #ffd5d5;
    border-radius: 6px;
    padding: 16px;
    margin: 12px 0;
}
.course-price-big { font-size: 28px; color: #e8271a; font-weight: bold; }
.course-price-orig { font-size: 14px; color: #aaa; text-decoration: line-through; margin-left: 8px; }
.enroll-btn {
    display: inline-block;
    padding: 12px 32px;
    background: #e8271a;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    margin-top: 12px;
    transition: background 0.2s;
}
.enroll-btn:hover { background: #c01d12; color: #fff; }

/* ===== STAR RATING ===== */
.stars { color: #f90; }
.star { font-size: 16px; }

/* ===== REVIEWS ===== */
.review-item {
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}
.review-item:last-child { border-bottom: none; }
.review-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.review-name { font-weight: bold; font-size: 14px; }
.review-stars { color: #f90; }
.review-content { font-size: 13px; color: #555; line-height: 1.6; }

/* ===== SEARCH PAGE ===== */
.search-header {
    background: #fff;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 6px;
}
.search-form { display: flex; gap: 10px; }
.search-form input {
    flex: 1;
    height: 42px;
    padding: 0 14px;
    border: 2px solid #20548E;
    border-radius: 4px;
    font-size: 15px;
}
.search-form button {
    padding: 0 24px;
    background: #20548E;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
}
.search-section-title {
    font-size: 16px;
    font-weight: bold;
    color: #20548E;
    padding: 12px 0 8px;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
}

/* ===== PAGINATION ===== */
.pagination-wrap {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}
.zx-pagination {
    display: flex;
    gap: 4px;
    align-items: center;
}
.zx-page-btn {
    display: inline-block;
    padding: 5px 11px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    color: #555;
    background: #fff;
    line-height: 1.4;
    transition: all 0.2s;
}
a.zx-page-btn:hover { background: #e8f4ff; color: #1565C0; border-color: #20548E; }
.zx-page-btn.active { background: #1565C0; border-color: #1565C0; color: #fff; }
.zx-page-btn.disabled { color: #bbb; background: #f9f9f9; }

/* ===== FILTER BAR ===== */
.filter-bar {
    background: #fff;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.filter-label { font-size: 13px; color: #666; }
.filter-link {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    font-size: 13px;
    color: #555;
    transition: all 0.15s;
}
.filter-link:hover, .filter-link.active {
    background: #20548E;
    color: #fff;
    border-color: #20548E;
}

/* ===== ARTICLE CONTENT ===== */
.article-content {
    background: #fff;
    padding: 24px;
    border-radius: 6px;
    line-height: 1.8;
}
.article-content h1 { font-size: 22px; margin-bottom: 12px; color: #20548E; }
.article-content h2 { font-size: 18px; margin: 16px 0 8px; color: #333; }
.article-content h3 { font-size: 16px; margin: 12px 0 6px; }
.article-content p { margin-bottom: 12px; font-size: 14px; color: #444; }
.article-content ul, .article-content ol { padding-left: 20px; margin-bottom: 12px; }
.article-content li { margin-bottom: 4px; font-size: 14px; color: #444; }
.article-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #aaa;
    margin: 8px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

/* ===== EMPTY STATE ===== */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #aaa;
}
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state p { font-size: 14px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .top_index .content { flex-wrap: wrap; }
    .home-top-row { flex-direction: column; }
    .left_nav { width: 100%; min-width: auto; height: auto; }
    .advantage-row { flex-wrap: wrap; }
    .advantage-item { flex: 1 1 40%; }
    .inst-grid { grid-template-columns: repeat(2, 1fr); }
    .brand-grid { grid-template-columns: repeat(2, 1fr); }
    .two-col { flex-direction: column; }
    .two-col-side { width: 100%; min-width: auto; }
    .train-nav-item { width: calc(100% / 3); }
    .footer-top { flex-wrap: wrap; }
}

/* ===== CITY TOP BAR ===== */
.city-topbar {
    background: #f7f7f7;
    border-bottom: 1px solid #e8e8e8;
    height: 32px;
    display: flex;
    align-items: center;
}
.city-topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.city-topbar-home {
    font-size: 13px;
    color: #1565C0;
}
.city-topbar-home:hover { color: #0d47a1; }
.city-topbar-sep {
    font-size: 12px;
    color: #aaa;
}
.city-topbar-current {
    font-size: 13px;
    color: #333;
    font-weight: bold;
}

/* ===== CITY LAYOUT ===== */
.city-header {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    padding: 8px 0;
}
.city-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}
.city-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 2px;
}
.city-logo-text {
    font-size: 22px;
    font-weight: bold;
    color: #1565C0;
    letter-spacing: 1px;
}
.city-logo-text:hover { color: #1565C0; }
.city-badge {
    background: #1565C0;
    color: #fff;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}
.city-header-divider {
    color: #ddd;
    font-size: 20px;
    flex-shrink: 0;
    padding-top: 2px;
}
.city-header-right {
    margin-left: auto;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.city-other-label {
    font-size: 13px;
    color: #888;
    flex-shrink: 0;
    padding-top: 3px;
    white-space: nowrap;
}
.city-header-cities {
    display: grid;
    grid-template-columns: repeat(15, auto);
    gap: 2px 0;
}
.city-header-link {
    font-size: 13px;
    color: #555;
    padding: 2px 6px;
    border-radius: 3px;
    transition: background 0.15s;
    white-space: nowrap;
}
.city-header-link:hover { color: #1565C0; background: #f0f5ff; }
.city-header-link-active { color: #1565C0 !important; font-weight: bold; }

/* ===== CITY NAVBAR ===== */
.city-nav {
    background: #1565C0;
}
.city-nav-ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.city-nav-ul li a {
    display: block;
    padding: 0 24px;
    height: 42px;
    line-height: 42px;
    font-size: 15px;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.city-nav-ul li a:hover,
.city-nav-ul li a.active {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* ===== TANTUW-STYLE CITY HOME LAYOUT ===== */

/* Two-column wrapper */
.zx-item-main {
    margin-top: 10px;
}
.zx-main-left {
    float: left;
    width: calc(100% - 292px);
}
.zx-main-right {
    float: right;
    width: 280px;
}

/* Each channel block */
.zx-block-l {
    background: #fff;
    border: 1px solid #e0e0e0;
    margin-bottom: 10px;
    padding: 0 0 10px 0;
}

/* Section header */
.zx-lanmu {
    background: #f5f5f5;
    border-bottom: 2px solid #1565C0;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 0 0;
    display: flex;
    align-items: center;
    line-height: 1.4;
}
.zx-lm01 {
    font-size: 16px;
    font-weight: bold;
    color: #1565C0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.zx-lm01:hover { color: #e8271a; }
.zx-icon-lm {
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #1565C0;
    margin-right: 6px;
    flex-shrink: 0;
}
.zx-lanmu-subs {
    flex: 1;
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
}
.zx-lm02 {
    font-size: 12px;
    color: #555;
    padding: 0 8px;
    border-right: 1px solid #ccc;
    line-height: 1.2;
}
.zx-lm02:last-child { border-right: none; }
.zx-lm02:hover { color: #e8271a; }
.zx-more {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    margin-left: auto;
}
.zx-more:hover { color: #1565C0; }

/* Two-column list */
.zx-list-wrap {
    padding: 6px 10px 0;
}
.zx-col-hd {
    font-size: 13px;
    font-weight: bold;
    color: #1565C0;
    padding: 4px 0 6px;
    border-bottom: 1px solid #d0e8fa;
    margin-bottom: 2px;
}
.zx-list-box {
    margin: 0;
    padding: 0;
    width: 49%;
}
.zx-list-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.zx-list-left {
    float: left;
    border-right: 1px dotted #ddd;
    padding-right: 10px;
}
.zx-list-right {
    float: right;
    padding-left: 10px;
}
.zx-list-box li, .zx-list-box ul li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dotted #eee;
    overflow: hidden;
}
.zx-list-box li:last-child, .zx-list-box ul li:last-child { border-bottom: none; }
.zx-list-box li a, .zx-list-box ul li a {
    font-size: 13px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    max-width: 200px;
}
.zx-list-box li a:hover, .zx-list-box ul li a:hover { color: #1565C0; }
.zx-list-meta {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
    margin-left: 6px;
    flex-shrink: 0;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Empty placeholder */
.zx-empty-block {
    padding: 14px 10px;
    font-size: 13px;
    color: #999;
}
.zx-empty-block a { color: #1565C0; }

/* Right sidebar blocks */
.zx-block-r {
    background: #fff;
    border: 1px solid #e0e0e0;
    margin-bottom: 10px;
    padding-bottom: 8px;
}
.zx-block-r-title {
    background: #1565C0;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.zx-icon-jg, .zx-icon-kc {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: rgba(255,255,255,0.4);
    border-radius: 2px;
    flex-shrink: 0;
}
.zx-block-r-more {
    text-align: right;
    padding: 4px 10px 0;
}
.zx-block-r-more a {
    font-size: 12px;
    color: #999;
}
.zx-block-r-more a:hover { color: #1565C0; }

/* Institution item in sidebar */
.zx-inst-item {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
}
.zx-inst-item:last-of-type { border-bottom: none; }
.zx-inst-logo {
    float: left;
    width: 50px;
    height: 40px;
    overflow: hidden;
    margin-right: 10px;
    flex-shrink: 0;
}
.zx-inst-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.zx-inst-logo-ph {
    width: 50px;
    height: 40px;
    background: #1565C0;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zx-inst-info {
    overflow: hidden;
}
.zx-inst-info h5 {
    font-size: 13px;
    font-weight: bold;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zx-inst-info h5 a { color: #333; }
.zx-inst-info h5 a:hover { color: #1565C0; }
.zx-inst-info p {
    font-size: 11px;
    color: #888;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hot course item in sidebar */
.zx-course-item {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
}
.zx-course-item:last-of-type { border-bottom: none; }
.zx-course-school {
    display: block;
    font-size: 11px;
    color: #1285d2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zx-course-name {
    display: block;
    font-size: 12px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 2px 0 4px;
}
.zx-course-name:hover { color: #1565C0; }
.zx-course-btn {
    display: inline-block;
    font-size: 11px;
    background: #fff;
    border: 1px solid #1565C0;
    color: #1565C0;
    padding: 2px 8px;
    border-radius: 2px;
    float: right;
}
.zx-course-btn:hover {
    background: #1565C0;
    color: #fff;
}

/* ===== CITY BANNER SECTION ===== */
.city-banner-section {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
}
.city-banner-slider {
    position: relative;
    width: 100%;
    height: 100%;
}
.city-banner-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.city-banner-slide.active { opacity: 1; }
.city-banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: none;
}
.city-banner-placeholder {
    width: 100%;
    height: 100%;
}
.city-banner-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}
.city-banner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.2s;
}
.city-banner-dot.active { background: #fff; }

/* ===== CITY SEARCH OVERLAY ===== */
.city-banner-search {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}
.city-search-title {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    margin-bottom: 20px;
    pointer-events: none;
}
.city-search-form {
    display: flex;
    width: 560px;
    max-width: 90vw;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    border-radius: 4px;
    overflow: hidden;
    pointer-events: all;
}
.city-search-form input {
    flex: 1;
    height: 46px;
    padding: 0 16px;
    font-size: 15px;
    border: none;
    outline: none;
    background: #fff;
    color: #333;
}
.city-search-form button {
    width: 90px;
    height: 46px;
    background: #1565C0;
    color: #fff;
    border: none;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}
.city-search-form button:hover { background: #0d47a1; }

/* ===== CATEGORY PAGE ===== */
.cat-topbar { background:#f5f5f5; border-bottom:1px solid #e8e8e8; font-size:12px; color:#888; }
.cat-topbar-inner { max-width:1000px; margin:0 auto; padding:5px 10px; }
.cat-topbar-home { color:#1565C0; }
.cat-topbar-sep { color:#aaa; margin:0 4px; }
.cat-topbar-cat { color:#555; }

.cat-header { background:#fff; border-bottom:2px solid #20548E; padding:10px 0; }
.cat-header-inner { max-width:1000px; margin:0 auto; padding:0 10px; display:flex; align-items:center; gap:16px; }
.cat-header-logo { font-size:22px; font-weight:bold; color:#1565C0; text-decoration:none; }
.cat-header-divider { color:#ccc; font-size:24px; }
.cat-header-name { font-size:26px; font-weight:bold; color:#e8271a; }
.cat-header-search { margin-left:auto; display:flex; }
.cat-header-search input { width:220px; padding:7px 12px; border:1px solid #20548E; border-radius:4px 0 0 4px; font-size:13px; outline:none; }
.cat-header-search button { padding:7px 16px; background:#20548E; color:#fff; border:none; border-radius:0 4px 4px 0; cursor:pointer; font-size:13px; }

.cat-nav { background:#1565C0; }
.cat-nav-ul { list-style:none; margin:0; padding:0; display:flex; max-width:1000px; margin:0 auto; }
.cat-nav-ul li a { display:block; padding:10px 20px; color:#fff; font-size:14px; }
.cat-nav-ul li a:hover, .cat-nav-ul li a.active { background:#0d47a1; }

/* ===================================
   EXTRACTED FROM INLINE STYLES
   Shared classes for frontend templates
=================================== */

/* ===== LAYOUT ===== */
.page-two-col { display: flex; gap: 16px; align-items: flex-start; }
.page-two-col--stretch { display: flex; gap: 16px; align-items: stretch; }
.page-col-main { flex: 2; min-width: 0; }
.page-col-side { flex: 1; min-width: 0; }
.page-card { background: #fff; border-radius: 4px; overflow: hidden; }
.page-card--r6 { border-radius: 6px; }
.page-card--bordered { border: 1px solid #eee; }
.page-card-padded { background: #fff; border-radius: 4px; padding: 20px; }
.page-empty { background: #fff; border-radius: 4px; padding: 60px 20px; text-align: center; }
.page-empty p { color: #999; font-size: 15px; }
.content-padded { padding-top: 10px; padding-bottom: 10px; }
.mb-16 { margin-bottom: 16px; }

/* ===== SECTION BAR (板块标题栏) ===== */
.section-bar { padding: 12px 20px; border-bottom: 2px solid #20548E; display: flex; justify-content: space-between; align-items: center; }
.section-bar-title { font-size: 16px; font-weight: bold; color: #333; }
.section-bar-more { font-size: 12px; color: #20548E; text-decoration: none; }
.section-bar-more:hover { color: #e8271a; }

/* Home section header (blue background) */
.home-section-header { background: #20548E; color: #fff; font-size: 15px; font-weight: bold; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; }
.home-section-more { color: #fff; font-size: 12px; font-weight: normal; text-decoration: none; }
.home-section-more:hover { color: #fff; opacity: 0.8; }

/* ===== LIST ITEMS (文章/新闻/问答列表项) ===== */
.list-item { display: flex; align-items: flex-start; padding: 16px; border-bottom: 1px solid #f0f0f0; gap: 16px; text-decoration: none; color: inherit; }
.list-item:hover { background: #fafafa; }
.list-item-body { flex: 1; min-width: 0; }
.list-item-title { font-size: 16px; font-weight: bold; color: #333; line-height: 1.5; margin: 0 0 6px 0; }
.list-item-title--qa { color: #1565C0; }
.list-item-excerpt { font-size: 13px; color: #666; line-height: 1.6; margin: 0 0 8px 0; }
.list-item-meta { display: flex; gap: 12px; font-size: 12px; color: #aaa; flex-wrap: wrap; }
.list-item-cover { width: 120px; height: 90px; border-radius: 4px; flex-shrink: 0; overflow: hidden; }

/* Compact list row */
.list-row { padding: 8px 0; border-bottom: 1px solid #f5f5f5; display: flex; justify-content: space-between; align-items: center; }
.list-row-link { font-size: 13px; color: #333; text-decoration: none; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.list-row-link:hover { color: #20548E; }
.list-row-link--qa { color: #1565C0; }
.list-row-link--qa:hover { color: #20548E; }
.list-row-link--bold { font-weight: bold; font-size: 14px; line-height: 1.5; display: block; }
.list-row-date { font-size: 11px; color: #ccc; flex-shrink: 0; margin-left: 8px; }
.list-row-resolved { font-size: 11px; color: #4CAF50; flex-shrink: 0; margin-left: 8px; }

/* Home list (资讯/新闻面板) */
.home-list-panel { background: #fff; border-radius: 6px; border: 1px solid #eee; overflow: hidden; display: flex; flex-direction: column; }
.home-list-panel--2-3 { flex: 2; }
.home-list-panel--1-3 { flex: 1; }
.home-list-row { border-bottom: 1px solid #f5f5f5; }
.home-list-link { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-size: 14px; color: #444; text-decoration: none; }
.home-list-link:hover { color: #20548E; }
.home-list-link-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; }
.home-list-link-date { font-size: 12px; color: #bbb; flex-shrink: 0; margin-left: 12px; }
.home-list-link-date--sm { margin-left: 8px; }
.home-list-empty { padding: 40px 16px; text-align: center; color: #bbb; }
.home-list-ul { margin: 0; padding: 0; list-style: none; flex: 1; }

/* ===== SIDEBAR ===== */
.sidebar-box { background: #fff; border-radius: 4px; padding: 20px; margin-bottom: 16px; }
.sidebar-box:last-child { margin-bottom: 0; }
.sidebar-title { font-size: 16px; font-weight: bold; color: #333; margin: 0 0 16px 0; padding-bottom: 10px; border-bottom: 2px solid #20548E; }

/* Hot list (numbered ranking) */
.hot-list { list-style: none; margin: 0; padding: 0; }
.hot-list-item { margin-bottom: 10px; display: flex; gap: 8px; align-items: flex-start; }
.hot-rank { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 3px; font-size: 12px; font-weight: bold; flex-shrink: 0; color: #fff; }
.hot-rank--top { background: #FF6B6B; }
.hot-rank--normal { background: #ccc; }
.hot-link { font-size: 13px; color: #333; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-decoration: none; }
.hot-link:hover { color: #20548E; }

/* ===== FILTER BAR (筛选栏) ===== */
.filter-bar-wrap { background: #fff; padding: 12px 16px; border-radius: 4px; margin-bottom: 10px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-label { font-size: 13px; color: #888; flex-shrink: 0; }
.filter-sep { color: #ddd; margin: 0 4px; }
.filter-tag { padding: 4px 14px; border-radius: 3px; font-size: 13px; cursor: pointer; background: #f5f5f5; color: #555; }
.filter-tag--active { background: #20548E; color: #fff; }
.filter-tag input[type="checkbox"] { display: none; }

/* ===== TRIAL FORM (试听表单) ===== */
.trial-form .form-group { margin-bottom: 12px; }
.trial-form .form-input,
.trial-form .form-select {
    width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px;
    font-size: 14px; box-sizing: border-box; outline: none;
}
.trial-form .form-select { color: #666; }
.trial-form .form-input:focus,
.trial-form .form-select:focus { border-color: #20548E; }
.trial-form .form-btn {
    width: 100%; padding: 12px; background: #20548E; color: #fff;
    border: none; border-radius: 4px; font-size: 15px; font-weight: bold; cursor: pointer;
}
.trial-form .form-btn:hover { background: #1B4779; }

/* ===== DETAIL PAGE (详情页) ===== */
.detail-wrap { background: #fff; border-radius: 4px; padding: 30px 40px; max-width: 100%; }
.detail-title { font-size: 24px; color: #333; margin: 0 0 16px 0; line-height: 1.6; }
.detail-meta { display: flex; gap: 16px; font-size: 13px; color: #999; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #f0f0f0; }
.detail-body { font-size: 15px; line-height: 2; color: #333; }

/* Related items */
.related-wrap { background: #fff; border-radius: 4px; padding: 20px 40px; margin-top: 12px; }
.related-title { font-size: 16px; font-weight: bold; color: #333; margin: 0 0 16px 0; padding-bottom: 10px; border-bottom: 2px solid #20548E; }
.related-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; }
.related-item { width: 50%; padding: 8px 0; box-sizing: border-box; }
.related-link { font-size: 14px; color: #333; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.related-link:hover { color: #20548E; }
.related-link--qa { color: #1565C0; }
.related-link--qa:hover { color: #20548E; }
.related-dot { color: #20548E; }

/* Detail images */
.detail-images { margin-bottom: 16px; }
.detail-image-row { margin-bottom: 0; line-height: 0; }
.detail-image-row img { width: 100%; display: block; }

/* ===== HEADER AUTH BUTTONS ===== */
.header-auth-btns { display: flex; gap: 10px; flex-shrink: 0; }
.btn-auth { padding: 8px 20px; border-radius: 4px; font-size: 14px; text-decoration: none; font-weight: bold; }
.btn-auth-login { border: 1px solid #20548E; color: #20548E; background: #fff; }
.btn-auth-login:hover { background: #f0f5ff; color: #20548E; }
.btn-auth-register { border: 1px solid #20548E; color: #fff; background: #20548E; }
.btn-auth-register:hover { background: #1B4779; color: #fff; }

/* ===== AUTH MODAL INTERNAL ===== */
.auth-tabs { display: flex; gap: 0; }
.auth-success { display: none; text-align: center; padding: 20px 0; }
.auth-success-icon { font-size: 48px; margin-bottom: 12px; color: #28a745; }
.auth-success-text { font-size: 16px; font-weight: bold; color: #28a745; }
.auth-success-sub { font-size: 13px; color: #888; margin-top: 8px; }
.form-required { color: #e8271a; }
.success-toast { font-size: 13px; color: #28a745; background: #d4edda; padding: 6px 12px; border-radius: 4px; }
.footer-sub { margin-top: 4px; }

/* ===== HOME HEADING ===== */
.home-heading { text-align: center; padding: 24px 0 8px 0; }
.home-heading h2 { font-weight: bold; margin: 0 0 8px 0; }
.home-heading p { margin: 0; }

/* Home cards grid */
.home-cards-wrap { padding: 20px 0; }
.home-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Home two-column row */
.home-two-col { display: flex; gap: 16px; padding: 16px 0; align-items: stretch; }

/* ===== PROVINCE BANNER ===== */
.prov-banner-wrap { width: 100%; overflow: hidden; position: relative; }
.prov-banner-track { display: flex; transition: transform 0.5s; }
.prov-banner-slide { width: 100%; flex-shrink: 0; height: 45vh; }
.prov-banner-slide img { width: 100%; height: 100%; object-fit: cover; }
.prov-banner-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #1565C0, #20548E); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; font-weight: bold; }
.prov-banner-placeholder-full { width: 100%; height: 45vh; background: linear-gradient(135deg, #1565C0 0%, #20548E 100%); display: flex; align-items: center; justify-content: center; }
.prov-banner-placeholder-text { text-align: center; color: #fff; }
.prov-banner-placeholder-text h1 { font-size: 32px; margin: 0 0 10px 0; }
.prov-banner-placeholder-text p { font-size: 16px; opacity: 0.85; margin: 0; }
.prov-banner-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.prov-banner-dot { width: 10px; height: 10px; border-radius: 50%; cursor: pointer; }

/* Province hot articles 3-column */
.prov-hot-grid { display: flex; gap: 0; }
.prov-hot-col { flex: 1; padding: 0 16px; }
.prov-hot-col--border { border-right: 1px solid #f0f0f0; }
.prov-hot-first { padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
.prov-hot-thumb { width: 100%; height: 120px; border-radius: 4px; margin-bottom: 8px; overflow: hidden; }
.prov-hot-empty { color: #ccc; font-size: 13px; }

/* Province thumb grid */
.prov-thumb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.prov-thumb-item { border-radius: 6px; overflow: hidden; height: 100px; }
.prov-thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.prov-thumb-empty { width: 100%; height: 100%; background: #e8f4fd; }

/* Province news + trial row */
.prov-news-trial { display: flex; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.prov-news-col { flex: 2; min-width: 0; background: #fff; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.prov-trial-col { flex: 1; min-width: 0; display: flex; }
.prov-trial-box { background: #fff; border-radius: 6px; padding: 20px; flex: 1; display: flex; flex-direction: column; }
.prov-trial-title { font-size: 16px; font-weight: bold; color: #333; margin: 0 0 16px 0; padding-bottom: 10px; border-bottom: 2px solid #20548E; }
.prov-trial-form { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.prov-news-inner { display: flex; gap: 0; flex: 1; }
.prov-news-half { flex: 1; padding: 0 16px; }
.prov-news-half--border { border-right: 1px solid #f0f0f0; }

/* Province QA two-column */
.prov-qa-cols { display: flex; gap: 0; }
.prov-qa-half { flex: 1; padding: 0 16px; }
.prov-qa-half--border { border-right: 1px solid #f0f0f0; }

/* ===== SEARCH PAGE ===== */
.search-wrap { max-width: 900px; margin: 0 auto; }
.search-box { background: #fff; border-radius: 4px; padding: 20px; margin-bottom: 16px; }
.search-form { display: flex; gap: 8px; }
.search-form input { flex: 1; padding: 10px 14px; border: 1px solid #ddd; border-radius: 4px; font-size: 15px; }
.search-form button { padding: 10px 24px; background: #20548E; color: #fff; border: none; border-radius: 4px; font-size: 15px; font-weight: bold; cursor: pointer; }
.search-form button:hover { background: #1B4779; }
.search-result-section { background: #fff; border-radius: 4px; padding: 20px; margin-bottom: 16px; }
.search-result-title { font-size: 16px; font-weight: bold; color: #333; margin: 0 0 16px 0; padding-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.search-result-title--article { border-bottom: 2px solid #20548E; }
.search-result-title--news { border-bottom: 2px solid #FF9800; }
.search-result-title--qa { border-bottom: 2px solid #4CAF50; }
.search-result-count { font-size: 12px; color: #999; font-weight: normal; }
.search-item { display: flex; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid #f0f0f0; gap: 14px; text-decoration: none; color: inherit; }
.search-item:hover { background: #fafafa; }
.search-item--block { display: block; }
.search-item-body { flex: 1; min-width: 0; }
.search-item-title { font-size: 15px; font-weight: bold; color: #333; line-height: 1.5; margin: 0 0 4px 0; }
.search-item-excerpt { font-size: 13px; color: #666; line-height: 1.6; margin: 0 0 6px 0; }
.search-item-meta { display: flex; gap: 12px; font-size: 12px; color: #aaa; }
.search-item-cover { width: 100px; height: 70px; border-radius: 4px; flex-shrink: 0; overflow: hidden; }

/* ===== STATUS TEXT ===== */
.text-resolved { color: #4CAF50; }
.text-pending { color: #FF9800; }

/* ===== PAGINATION (分页) ===== */
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; padding: 16px 0; }
.pager-btn { padding: 6px 12px; font-size: 13px; color: #555; background: #f5f5f5; border-radius: 3px; text-decoration: none; }
.pager-btn:hover { background: #e8f4ff; color: #1565C0; }
.pager-btn--disabled { color: #ccc; cursor: default; }
.pager-btn--disabled:hover { background: #f5f5f5; color: #ccc; }
.pager-num { padding: 6px 10px; font-size: 13px; color: #555; background: #f5f5f5; border-radius: 3px; text-decoration: none; }
.pager-num:hover { background: #e8f4ff; color: #1565C0; }
.pager-num--active { color: #fff; background: #20548E; font-weight: bold; }
.pager-num--active:hover { background: #20548E; color: #fff; }
.pager-dots { padding: 6px 8px; font-size: 13px; color: #aaa; }
.pager-jump-label { margin-left: 8px; font-size: 13px; color: #666; }
.pager-jump-input { width: 50px; padding: 4px 6px; font-size: 13px; border: 1px solid #ddd; border-radius: 3px; text-align: center; }
.pager-jump-btn { padding: 4px 12px; font-size: 13px; color: #fff; background: #20548E; border: none; border-radius: 3px; cursor: pointer; }
.pager-jump-btn:hover { background: #1B4779; }