/**
 * 52Hz Theme Styles
 * JustNews-inspired design for 汉中门户网
 */

/* ============================================================
   0. Variables
   ============================================================ */
:root {
    --theme-color: #00aae7;
    --theme-hover: #0089c4;
    --theme-color-rgb: 0, 170, 231;
    --theme-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    --border-color: #eee;
    --bg-color: #f5f5f5;
    --text-color: #262626;
    --text-light: #999;
    --header-height: 64px;
}

/* ============================================================
   1. Reset & Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 14px; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--theme-font-family);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color);
    background: var(--bg-color);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--theme-color); text-decoration: none; }
a:hover { color: var(--theme-hover); text-decoration: none; }
img { max-width: 100%; height: auto; vertical-align: middle; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; line-height: 1.4; }
p { margin: 0 0 10px; }
.clearfix::after { content: ""; display: table; clear: both; }
.pull-left { float: left; }
.pull-right { float: right; }
.text-center { text-align: center; }

/* ============================================================
   2. Container & Grid (24-col Bootstrap-like)
   ============================================================ */
.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 10px;
    padding-right: 10px;
}
.container::after { content: ""; display: table; clear: both; }
@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1240px) { .container { width: 1200px; } }

/* ============================================================
   3. Header
   ============================================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    height: var(--header-height);
    line-height: var(--header-height);
}
.header .container { display: flex; align-items: center; height: 100%; }
.navbar-header { float: left; }
.logo { margin: 0; }
.logo a { display: block; }
.logo img { max-height: 40px; width: auto; }
.navbar-toggle { display: none; }

.navbar-collapse { display: flex; align-items: center; flex: 1; margin-left: 30px; }
.primary-menu { flex: 1; }
.navbar-nav { margin: 0; padding: 0; }
.navbar-nav > li { display: inline-block; position: relative; margin: 0; }
.navbar-nav > li > a {
    display: block;
    padding: 0 15px;
    font-size: 15px;
    color: #333;
    line-height: var(--header-height);
    transition: color .2s;
}
.navbar-nav > li > a:hover,
.navbar-nav > li.current-menu-item > a,
.navbar-nav > li.current-menu-parent > a { color: var(--theme-color); }

/* Sub Menu */
.navbar-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 160px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all .25s ease;
    z-index: 1000;
}
.navbar-nav li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.navbar-nav .sub-menu li { display: block; }
.navbar-nav .sub-menu a {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    border-bottom: 1px solid #f5f5f5;
    transition: color .2s;
}
.navbar-nav .sub-menu a:hover { color: var(--theme-color); }
.navbar-nav .sub-menu .sub-menu { left: 100%; top: 0; }

/* Navbar Action */
.navbar-action {
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.navbar-search-icon {
    cursor: pointer;
    padding: 0 12px;
    font-size: 18px;
    color: #666;
    transition: color .2s;
}
.navbar-search-icon:hover { color: var(--theme-color); }

/* Login/Register */
#j-user-wrap { margin: 0 8px; }
#j-user-wrap .login {
    display: inline-block;
    padding: 0 8px;
    font-size: 13px;
    color: #555;
    transition: color .2s;
}
#j-user-wrap .login:hover { color: var(--theme-color); }
#j-user-wrap .register {
    color: var(--theme-color);
}

/* Submit Button */
.btn.btn-primary.btn-xs.publish {
    display: inline-block;
    padding: 0 16px;
    height: 32px;
    line-height: 32px;
    font-size: 13px;
    color: #fff;

    border-radius: 4px;
    margin-left: 8px;
    transition: background .2s;
}
.btn.btn-primary.btn-xs.publish:hover { background: var(--theme-hover); color: #fff; }

/* Search Form */
.navbar-search {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
    display: none;
    z-index: 100;
}
.navbar-search.active { display: block; }
.navbar-search-inner {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
}
.navbar-search-input {
    flex: 1;
    height: 42px;
    padding: 0 50px 0 16px;
    border: 2px solid var(--theme-color);
    border-radius: 4px;
    font-size: 14px;
    outline: none;
}
.navbar-search-btn {
    position: absolute;
    right: 0;
    top: 0;
    height: 42px;
    width: 46px;
    border: none;

    color: #fff;
    font-size: 16px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}
.navbar-search-close {
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 20px;
    color: #999;
}

/* ============================================================
   4. Main Content Area
   ============================================================ */
#wrap {
    margin-top: var(--header-height);
    min-height: 500px;
}
body.admin-bar #wrap { margin-top: calc(var(--header-height) - 32px); }
body.admin-bar .top-news { top: 32px; }
.wrap {
    display: flex;
    padding: 20px 0;
    gap: 20px;
}
body.single .wrap { padding-top: 0; }
.main {
    flex: 1;
    min-width: 0;
}
.main-full { max-width: 100%; }
.sidebar {
    width: 320px;
    flex-shrink: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    align-self: flex-start;
}

/* ============================================================
   5. Breadcrumb
   ============================================================ */
.breadcrumb {
    padding: 16px 0;
    margin-bottom: 0;
    font-size: 13px;
    color: #999;
    line-height: 1.6;
}
.breadcrumb-area { width: 100%; }
.breadcrumb a { color: #999; }
.breadcrumb a:hover { color: var(--theme-color); }
.breadcrumb i { margin: 0 6px; font-size: 12px; }
.breadcrumb .current { color: var(--text-color); }

.feature-post { width: 280px; flex-shrink: 0; margin: 0; }
.feature-post li { position: relative; height: 155px; border-radius: 4px; overflow: hidden; list-style: none; }
.feature-post li:first-child { margin-bottom: 10px; }
.feature-post li a { display: block; width: 100%; height: 100%; }
.feature-post li img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.feature-post li:hover img { transform: scale(1.05); }
.feature-post li span { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 10px 8px; background: linear-gradient(transparent,rgba(0,0,0,.7)); color: #fff; font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.main-slider.pull-left { width: calc(100% - 300px); }
.main-slider.slider-full { width: 100%; }
.slider-wrap .swiper-container { border-radius: 4px; overflow: hidden; }

/* ============================================================
   7a. Topic Recommend (Special)
   ============================================================ */
.topic-recommend { margin-bottom: 20px; }
.topic-recommend .sec-panel-head { margin-bottom: 16px; }
.topic-recommend .sec-panel-head h3 { margin: 0; font-size: 18px; font-weight: 600; }
.topic-recommend .sec-panel-head h3 span { border-left: 4px solid var(--theme-color); padding-left: 10px; }
.topic-recommend .sec-panel-head h3 small { font-size: 13px; font-weight: 400; color: #999; margin-left: 8px; }
.topic-recommend .sec-panel-head h3 .more { float: right; font-size: 13px; font-weight: 400; color: var(--theme-color); margin-top: 3px; }
.topic-recommend .sec-panel-head h3 .more i { margin-left: 4px; }
.topic-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.topic-list .topic { flex: 1; min-width: 0; list-style: none; }
.topic-col-3 .topic { width: calc(33.33% - 7px); }
.topic-list .topic-wrap { display: block; position: relative; border-radius: 4px; overflow: hidden; }
.topic-list .cover-container { width: 100%; padding-top: 66.67%; overflow: hidden; position: relative; }
.topic-list .cover-container img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.topic-list .topic-wrap:hover .cover-container img { transform: scale(1.05); }
.topic-list .topic-wrap span { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 12px 8px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-size: 14px; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ============================================================
   6. Slider
   ============================================================ */
.slider-wrap {
    margin-bottom: 20px;
    height: 320px;
    border-radius: 4px;
    overflow: hidden;
}
.main-slider {
    position: relative;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
}
.main-slider .swiper-slide { position: relative; }
.main-slider .swiper-slide img {
    width: 100%;
    height: 320px;
    object-fit: cover;
}
.main-slider .slide-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 20px 16px;
    margin: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.7));
    color: #fff;
    font-size: 18px;
    font-weight: 500;
}
.main-slider .slide-title a { color: #fff; }
.main-slider .swiper-pagination { bottom: 8px !important; }
.main-slider .swiper-pagination-bullet { background: rgba(255,255,255,.6); opacity: 1; }
.main-slider .swiper-pagination-bullet-active { background: #fff; width: 20px; border-radius: 4px; }
.main-slider .swiper-button-prev,
.main-slider .swiper-button-next {
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,.4);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}
.main-slider .swiper-button-prev:hover,
.main-slider .swiper-button-next:hover { background: rgba(0,0,0,.7); }
.main-slider .swiper-button-prev::after,
.main-slider .swiper-button-next::after { display: none; }
.main-slider .swiper-button-prev { left: 10px; }
.main-slider .swiper-button-next { right: 10px; }

/* ============================================================
   7. Section Panel
   ============================================================ */
.sec-panel {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.special-page { margin-top: 20px; }
.sec-panel-head {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
.sec-panel-head .tabs {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
}
.sec-panel-head .tab {
    display: inline-block;
    position: relative;
    cursor: pointer;
}
.sec-panel-head .tab a {
    display: block;
    padding: 6px 14px;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    transition: color .2s;
}
.sec-panel-head .tab a:hover { color: var(--theme-color); }
.sec-panel-head .tab.active a { color: var(--theme-color); }
.sec-panel-head .tab .tab-underscore {
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;

    border-radius: 2px;
    opacity: 0;
    transition: opacity .2s;
}
.sec-panel-head .tab.active .tab-underscore { opacity: 1; }
.sec-panel-head .section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}
.sec-panel-head .section-title span { border-left: 4px solid var(--theme-color); padding-left: 10px; }
.sec-panel-head .section-title small {
    font-size: 13px;
    font-weight: 400;
    color: #999;
    margin-left: 8px;
}
.tab-wrap { display: none; }
.tab-wrap.active { display: block; }

/* ============================================================
   8. Post Loop (Default)
   ============================================================ */
.post-loop { margin: 0; padding: 0; }
.post-loop-default .item {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
}
.post-loop-default .item:first-child { padding-top: 0; }
.post-loop-default .item:last-child { border-bottom: none; }

/* Thumbnail */
.post-loop-default .item-img { border-radius: 8px;
    width: 220px;
    height: 140px;
    flex-shrink: 0;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.post-loop-default .item-img img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    transition: transform .3s;
}
.post-loop-default .item-img:hover img { transform: scale(1.05); }
.post-loop-default .item-category { background: rgba(0,0,0,0.5);
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 10px;

    color: #fff;
    font-size: 12px;
    border-radius: 3px;
    transition: background .2s;
}
.post-loop-default .item-category:hover { background: rgba(0,0,0,0.7); color: #fff; }

/* Content */
.post-loop-default .item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.post-loop-default .item-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 1.4;
}
.post-loop-default .item-title a { color: var(--text-color); transition: color .2s; }
.post-loop-default .item-title a:hover { color: var(--theme-color); }
.post-loop-default .sticky-post {
    display: inline-block;
    background: #f60;
    color: #fff;
    padding: 0 6px;
    font-size: 11px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
    line-height: 18px;
}
.post-loop-default .item-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 10px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-loop-default .item-meta {
    font-size: 12px;
    color: #999;
}
.post-loop-default .item-meta-li { display: inline-block; margin-right: 12px; }
 .post-loop-default .item-meta-li.category { color: var(--theme-color); margin-right: 0; }
 .post-loop-default .item-meta .dot { margin: 0 6px; color: #ddd; display: inline-block; }
.post-loop-default .item-meta-li a { color: #999; }
.post-loop-default .item-meta-li a:hover { color: var(--theme-color); }

/* No thumb */
.post-loop-default .item-no-thumb .item-content { flex: 1; }
.post-loop-default .item-no-thumb .item-title { font-size: 16px; }

/* ============================================================
   8b. Item Variants (sticky, multi-image, large-image)
   ============================================================ */
/* Sticky post highlight */
.item-sticky { position: relative; }
.item-sticky .item-title .sticky-post { display: inline-block; background: #f60; color: #fff; padding: 0 8px; font-size: 11px; border-radius: 3px; margin-right: 6px; vertical-align: middle; line-height: 20px; font-weight: 700; }
/* 原创徽标：列表标题前方，红底白字（与「置顶」同款；详情页不显示） */
.hz-orig { display: inline-block; background: #e53935; color: #fff; padding: 0 7px; font-size: 11px; border-radius: 3px; margin-right: 6px; vertical-align: middle; line-height: 20px; font-weight: 700; white-space: nowrap; }
.post-loop-default .item-title .hz-orig,
.post-loop-default .item-title a .hz-orig { background: #e53935; color: #fff; }
 .post-loop-default .item-sticky { margin: 0 -20px; padding: 20px; border-bottom-color: #f5e6d0; border-radius: 4px; }

/* item3 - Multi-image style (no separate thumbnail) */
.item3 .item-content { padding: 0; }
.item3 .item-images { display: flex; gap: 4px; margin: 10px 0; overflow: hidden; border-radius: 4px; }
.item3 .item-images span { flex: 1; position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 8px; background: #f5f5f5; }
.item3 .item-images span:before { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.02); content: ""; transition: background .3s; }
.item3 .item-images span:hover:before { background: rgba(0,0,0,.08); }
.item3 .item-images .item-images-el { position: absolute; inset: 0; background-size: cover; background-position: center; border-radius: 8px; transition: transform .3s; }
.item3 .item-images span:hover .item-images-el { transform: scale(1.05); }
.item3 .item-excerpt { font-size: 14px; color: #666; line-height: 1.7; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item3 .item-meta { font-size: 12px; color: #999; }
.item3 .item-meta .dot { margin: 0 6px; color: #ddd; }

/* item4 - Large image / slider style */
.item4 .item-content { padding: 0; }
.item4 .item-image { margin: 10px 0; border-radius: 4px; overflow: hidden; position: relative; }
.item4 .item-image .item-image-el { width: 100%; aspect-ratio: 2 / 1; background-size: cover; background-position: center; border-radius: 8px; transition: transform .3s; }
.item4 .item-image:hover .item-image-el { transform: scale(1.03); }
.item4 .item-image .item-slider { border-radius: 4px; overflow: hidden; }
.item4 .item-image .item-slider .swiper-slide { position: relative; }
.item4 .item-image .item-slider .item-image-el { padding-top: 50%; }
.item4 .item-image .item-slider .swiper-button-prev,
.item4 .item-image .item-slider .swiper-button-next { width: 30px; height: 30px; margin-top: -15px; background: rgba(0,0,0,.4); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.item4 .item-image .item-slider .swiper-button-prev::after,
.item4 .item-image .item-slider .swiper-button-next::after { display: none; }
.item4 .item-image .item-slider .swiper-button-prev { left: 6px; }
.item4 .item-image .item-slider .swiper-button-next { right: 6px; }
.item4 .item-image .item-slider .swiper-pagination-bullet { background: rgba(255,255,255,.6); }
.item4 .item-image .item-slider .swiper-pagination-bullet-active { background: #fff; }
.item4 .item-excerpt { font-size: 14px; color: #666; line-height: 1.7; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item4 .item-meta { font-size: 12px; color: #999; }
.item4 .item-meta .dot { margin: 0 6px; color: #ddd; }
/* ============================================================
   9. Image Post Loop (Related)
   ============================================================ */
.post-loop-image {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 0;
}
.post-loop-image .item { border: none; padding: 0; display: block; }
.post-loop-image .item-img {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}
.post-loop-image .item-img img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    transition: transform .3s;
}
.post-loop-image .item-img:hover img { transform: scale(1.05); }
.post-loop-image .item-title {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-loop-image .item-title a { color: var(--text-color); }
.post-loop-image .item-title a:hover { color: var(--theme-color); }

/* ============================================================
   10. Load More
   ============================================================ */
.load-more-wrap {
    text-align: center;
    padding: 20px 0 10px;
}
.load-more {
    display: inline-block;
    padding: 10px 40px;
    font-size: 14px;
    color: var(--theme-color);
    border: 1px solid var(--theme-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s;
    background: #fff;
}
.load-more:hover { background: var(--theme-color); color: #fff; }
.load-more.loading { opacity: .6; cursor: default; }

/* ============================================================
   11. Pagination
   ============================================================ */
.pagination { text-align: center; padding: 20px 0; }
.pagination ul { display: inline-flex; gap: 4px; }
.pagination li { display: inline-block; }
.pagination a,
.pagination span {
    display: block;
    padding: 6px 14px;
    font-size: 13px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
    transition: all .2s;
}
.pagination a:hover,
.pagination .current { border-color: var(--theme-color); background: var(--theme-color); color: #fff; }

/* ============================================================
   12. Single Post
   ============================================================ */
.entry-main {
    background: #fff;
    border-radius: 4px;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    width: 100%;
    overflow: hidden;
}
.entry-head { margin-bottom: 32px; }
.entry-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 12px;
}
.entry-info {
    font-size: 13px;
    color: #999;
}
.entry-info a { color: #999; }
.entry-info a:hover { color: var(--theme-color); }
.entry-info .dot { margin: 0 6px; }
.entry-excerpt {
    background: #f8f9fa;
    border-left: 4px solid var(--theme-color);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #666;
    border-radius: 0 4px 4px 0;
}
.entry-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    overflow-wrap: break-word;
    word-wrap: break-word;
    width: 100%;
    margin-top: 12px;
}
.entry-content p { margin-bottom: 18px; }
/* 微信采集器把段落包成 <pre><code>文字</code></pre>，浏览器默认 code 带灰底，
   前台会露出浅灰色色块。内容清洗后不再有 pre/code，这里兜底处理漏网的旧稿。 */
.entry-content pre,
.entry-content code {
    background: transparent;
    background-color: transparent;
    color: inherit;
    font-family: inherit;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.entry-content pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0 0 18px;
}
.entry-content img {
    max-width: 700px !important; width: auto !important;
    display: block !important;
    margin: 16px auto !important;
    height: auto !important;
    border-radius: 4px;
}
@media (max-width: 767px) {
    .entry-content img {
        max-width: 100% !important;
        height: auto !important;
    }
}
.entry-content h2, .entry-content h3 {
    margin-top: 24px;
    margin-bottom: 12px;
    font-weight: 600;
}
.entry-content a { color: var(--theme-color); text-decoration: underline; }
.entry-content a:hover { color: var(--theme-hover); }
.entry-content blockquote {
    border-left: 4px solid var(--theme-color);
    background: #f8f9fa;
    padding: 12px 20px;
    margin: 16px 0;
    border-radius: 0 4px 4px 0;
    color: #666;
}
.entry-content ul, .entry-content ol { padding-left: 20px; margin-bottom: 16px; }
.entry-content li { margin-bottom: 6px; }
.entry-content .page-links { clear: both; text-align: center; padding: 20px 0; }
.entry-content .page-links span {
    display: inline-block;
    padding: 4px 12px;
    margin: 0 2px;
    border: 1px solid #ddd;
    border-radius: 3px;
}
.entry-content .page-links .post-page-numbers.current {

    color: #fff;
    border-color: var(--theme-color);
}

.entry-tag { margin-top: 24px; }
.entry-tag a {
    display: inline-block;
    padding: 2px 12px;
    margin: 0 4px 4px 0;
    font-size: 12px;
    color: #666;
    background: #f5f5f5;
    border-radius: 3px;
    transition: all .2s;
}
.entry-tag a:hover { background: var(--theme-color); color: #fff; }

/* Entry Bar */

/* Entry Page Nav */
.entry-page {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}
.entry-page-prev,
.entry-page-next {
    flex: 1;
    min-height: 60px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
    transition: background .2s;
}
.entry-page-prev:hover,
.entry-page-next:hover { background: #eee; }
.entry-page-prev::before,
.entry-page-next::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.4);
    transition: background .2s;
}
.entry-page-prev:hover::before,
.entry-page-next:hover::before { background: rgba(0,0,0,.6); }
.entry-page-prev a,
.entry-page-next a {
    position: relative;
    z-index: 1;
    display: block;
    height: 100%;
    padding: 12px 16px;
    color: #fff;
}
.entry-page-prev a span,
.entry-page-next a span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.4;
}
.entry-page-info {
    position: relative;
    z-index: 1;
    padding: 0 16px 8px;
    font-size: 12px;
    color: rgba(255,255,255,.8);
}

/* Related Posts */
.entry-related-posts {
    margin-bottom: 20px;
    margin-top: 20px;
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.entry-related-posts .section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-left: 12px;
    border-left: 4px solid var(--theme-color);
}

/* ============================================================
   13. Kuaixun (News Flash)
   ============================================================ */
.sec-panel-kx { padding: 0; }
.kx-list { padding: 20px; }
.kx-date {
    position: relative;
    padding: 8px 0;
    margin: 16px 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-color);
}
.kx-date::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;

}
.kx-new {
    position: relative;
    display: inline-block;
    padding: 1px 10px;
    background: var(--theme-color);
    color: #fff;
    font-size: 11px;
    border-radius: 3px;
    margin-bottom: 12px;
}
.kx-item {
    position: relative;
    padding: 16px 0 16px 80px;
    border-bottom: 1px dashed var(--border-color);
}
.kx-item:last-child { border-bottom: none; }
.kx-item::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 24px;
    width: 1px;
    height: calc(100% - 8px);
    background: #e0e0e0;
}
.kx-item:last-child::before { display: none; }
.kx-time {
    position: absolute;
    left: 0;
    top: 16px;
    width: 50px;
    font-size: 12px;
    color: #999;
    text-align: center;
}
.kx-time::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--theme-color);
    border-radius: 50%;
}
.kx-content h2 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 6px;
    line-height: 1.4;
}
.kx-content h2 a { color: var(--text-color); }
.kx-content h2 a:hover { color: var(--theme-color); }
.kx-excerpt {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
}
.kx-img { margin-top: 10px; display: block; }
.kx-img img { max-width: 300px; border-radius: 4px; }

/* ============================================================
   14. Special Page
   ============================================================ */
 .special-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
 .special-item {
     background: #fff;
     border-radius: 6px;
     padding: 20px;
     transition: box-shadow .3s ease;
 }
 .special-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.1); }
 .special-item-top { display: flex; gap: 20px; align-items: stretch; }
 .special-item-thumb { width: 220px; height: 138px; flex-shrink: 0; border-radius: 4px; overflow: hidden; }
 .special-item-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; background: #f5f5f5; }
 .special-item-thumb:hover img { transform: scale(1.05); }
 .special-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 .special-item-title { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; }
 .special-item-title h2 { font-size: 18px; font-weight: 700; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .special-item-title a { color: var(--text-color); transition: color .2s; }
 .special-item-title a:hover { color: var(--theme-color); }
 .special-item-more { flex-shrink: 0; font-size: 12px; color: #999; white-space: nowrap; transition: color .2s; margin-left: 10px; }
 .special-item-more:hover { color: var(--theme-color); }
 .special-item-desc { font-size: 14px; color: #888; line-height: 1.6; margin-bottom: 8px; }
 .special-item-desc p { margin: 0; }
.special-item-count { font-size: 13px; color: #999; }
 .special-item-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 6px; }
.special-item-share { display: flex; align-items: center; gap: 6px; }
 .special-item-share span { font-size: 12px; color: #bbb; white-space: nowrap; }
.special-item-share .share-icon { font-size: 15px; color: #ccc; transition: color .2s; line-height: 1; }
.special-item-share .share-icon:hover { color: var(--theme-color); }
 .special-item-share .share-icon.wechat:hover { color: #44b549; }
 .share-icon.wechat { position: relative; }
 .special-item-share .share-icon.weibo:hover { color: #e05244; }
 .special-item-share .share-icon.qq:hover { color: #22a4ff; }
 .special-item-share .share-icon.qzone:hover { color: #fdbf2f; }
 
 /* WeChat QR tooltip on hover */
 .share-wechat-tooltip {
     position: absolute;
     bottom: calc(100% + 10px);
     left: 50%;
     transform: translateX(-50%);
     background: #fff;
     padding: 8px;
     border-radius: 6px;
     box-shadow: 0 2px 12px rgba(0,0,0,.15);
     z-index: 100;
     white-space: nowrap;
 }
.share-wechat-tooltip img {
    width: 120px;
    height: 120px;
    max-width: none;
    display: block;
    border-radius: 4px;
 }
 .share-wechat-tooltip p {
     font-size: 11px;
     color: #999;
     text-align: center;
     margin: 6px 0 0;
 }
.special-item-articles { list-style: none; margin: 15px 0 0; padding: 15px 0 0; border-top: 1px solid #f0f0f0; }
 .special-item-articles li { margin: 0; }
 .special-item-articles a {
     display: block;
     padding: 6px 0 6px 15px;
     font-size: 14px;
     color: #666;
     position: relative;
     transition: color .2s;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 .special-item-articles a::before {
     content: "";
     position: absolute;
     left: 0;
     top: 14px;
     width: 0;
     height: 0;
     border: 4px solid transparent;
     border-left: 5px solid #ccc;
 }
 .special-item-articles a:hover { color: var(--theme-color); }
 .special-item-articles a:hover::before { border-left-color: var(--theme-color); }
 
 /* ============================================================
    15. Special Hero Banner (taxonomy-special)
    ============================================================ */
 .special-hero {
     position: relative;
     width: 100%;
     height: 360px;
     background-size: cover;
     background-position: center;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: #fff;
 }
 .special-hero::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.65) 100%);
     z-index: 1;
 }
 .special-hero-inner {
     position: relative;
     z-index: 2;
     max-width: 800px;
 }
 .special-hero-title {
     font-size: 32px;
     font-weight: 700;
     margin: 0 0 12px;
     line-height: 1.3;
     text-shadow: 0 2px 8px rgba(0,0,0,.3);
 }
 .special-hero-desc {
     font-size: 16px;
     line-height: 1.7;
     margin: 0 auto 12px;
     opacity: .9;
     max-width: 600px;
     text-shadow: 0 1px 4px rgba(0,0,0,.3);
 }
 .special-hero-count {
     display: inline-block;
     font-size: 13px;
     opacity: .75;
     padding: 4px 16px;
     border-radius: 20px;
     background: rgba(255,255,255,.15);
 }
 @media (max-width: 991px) {
     .special-hero { height: 260px; }
     .special-hero-title { font-size: 24px; }
     .special-hero-desc { font-size: 14px; }
 }

/* ============================================================
   15. Submit Page
   ============================================================ */
.submit-form { margin-top: 20px; }
.submit-form .form-group { margin-bottom: 20px; }
.submit-form label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text-color);
}
.submit-form .required { color: #f00; }
.submit-form .form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color .2s;
    outline: none;
}
.submit-form .form-control:focus { border-color: var(--theme-color); }
.submit-form textarea.form-control { min-height: 300px; line-height: 1.6; }
.submit-form input[type="file"] { padding: 6px 0; border: none; }
.btn-submit {
    display: inline-block;
    padding: 10px 40px;

    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
    transition: background .2s;
}
.btn-submit:hover { background: var(--theme-hover); }

.submit-success,
.submit-login {
    text-align: center;
    padding: 40px 0;
}
.submit-success p,
.submit-login p { font-size: 16px; color: #666; margin-bottom: 20px; }

/* ============================================================
   16. Comments
   ============================================================ */
.comments-area {
    background: #fff;
    border-radius: 4px;
    padding: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.comments-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-left: 12px;
    border-left: 4px solid var(--theme-color);
}
.comment-list { margin-bottom: 20px; }
.comment { padding: 16px 0; border-bottom: 1px solid var(--border-color); }
.comment:last-child { border-bottom: none; }
.comment-body { display: flex; gap: 12px; }
.comment-avatar { flex-shrink: 0; }
.comment-avatar img { width: 40px; height: 40px; border-radius: 50%; }
.comment-content { flex: 1; }
.comment-author { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.comment-author a { color: var(--text-color); }
.comment-author .says { display: none; }
.comment-meta { font-size: 12px; color: #999; margin-bottom: 8px; }
.comment-text { font-size: 14px; color: #555; line-height: 1.6; }
.comment-reply-link { font-size: 12px; color: var(--theme-color); }

#respond { margin-top: 20px; }
.comment-reply-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}
#comment {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
}
.comment-form .form-submit { margin-top: 10px; }
.comment-form .btn.btn-primary {
    display: inline-block;
    padding: 8px 30px;

    color: #fff;
    border: none;
    background: var(--theme-color);
    border-radius: 4px;
    cursor: pointer;
    transition: background .2s;
}
.comment-form .btn.btn-primary:hover { background: var(--theme-hover); }

/* ============================================================
   17. 404 Page
   ============================================================ */
.e404-page { padding: 80px 0; text-align: center; }
.e404-page-text { margin-top: 20px; }
.e404-page-text .entry-title { font-size: 28px; margin-bottom: 16px; color: #555; }
.e404-page-text p { font-size: 15px; color: #999; margin-bottom: 24px; }
.btn.btn-primary {
    display: inline-block;
    padding: 10px 30px;

    color: #fff;
    border-radius: 4px;
    transition: background .2s;
}
.btn.btn-primary:hover { background: var(--theme-hover); color: #fff; }

/* ============================================================
   18. Widgets
   ============================================================ */
.widget {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.widget-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 14px;
    padding-left: 10px;
    border-left: 4px solid var(--theme-color);
}
.widget-title span { border: none; padding: 0; }
.widget ul { margin: 0; padding: 0; }
.widget li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}
.widget li:last-child { border-bottom: none; }
.widget li a { color: #555; display: block; }
.widget li a:hover { color: var(--theme-color); }

/* Search Widget */
.widget_search .search-form {
    display: flex;
    gap: 0;
}
.widget_search .keyword {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-size: 13px;
    outline: none;
}
.widget_search .keyword:focus { border-color: var(--theme-color); }
.widget_search .submit {
    padding: 0 14px;

    color: #fff;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}
.widget_search .submit:hover { background: var(--theme-hover); }

/* Tags Cloud */
.widget_tag_cloud .tagcloud a {
    display: inline-block;
    padding: 2px 10px;
    margin: 0 3px 6px;
    font-size: 12px !important;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #666;
    transition: all .2s;
}
.widget_tag_cloud .tagcloud a:hover { background: var(--theme-color); color: #fff; border-color: var(--theme-color); }


/* Enhanced Sidebar Widget Styles */
.widget_post_thumb .item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-color); }
.widget_post_thumb .item:last-child { border-bottom: none; }
.widget_post_thumb .item-img { width: 100px; flex-shrink: 0; border-radius: 3px; overflow: hidden; }
.widget_post_thumb .item-img img { width: 100%; height: 68px; object-fit: cover; }
.widget_post_thumb .item-content { flex: 1; min-width: 0; }
.widget_post_thumb .item-title { font-size: 13px; line-height: 1.4; font-weight: 400; }
.widget_post_thumb .item-title a { color: #555; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.widget_post_thumb .item-title a:hover { color: var(--theme-color); }
.widget_post_thumb .item-meta { font-size: 11px; color: #bbb; margin-top: 4px; }

.widget_post_tabs .tab-nav { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 12px; }
.widget_post_tabs .tab-nav a { flex: 1; text-align: center; padding: 8px 4px; font-size: 13px; color: #888; border-bottom: 2px solid transparent; position: relative; bottom: -1px; transition: all .2s; }
.widget_post_tabs .tab-nav a.active,.widget_post_tabs .tab-nav a:hover { color: var(--theme-color); border-bottom-color: var(--theme-color); }
.widget_post_tabs .tab-content { display: none; padding: 0; }
.widget_post_tabs .tab-content.active { display: block; }

.widget_nav_menu ul li { padding: 0; }
.widget_nav_menu ul li a { padding: 8px 0; display: block; }
.widget_nav_menu .sub-menu { padding-left: 16px; }
.widget_nav_menu .sub-menu li:last-child { border-bottom: none; }

.widget_categories ul li,.widget_archive ul li { text-align: right; padding: 7px 0; }
.widget_categories ul li a,.widget_archive ul li a { float: left; }
.widget_recent_entries li { padding: 7px 0; }
.widget_recent_entries .post-date { font-size: 11px; color: #bbb; margin-left: 6px; }
.widget_recent_comments li { padding: 7px 0; }
.widget_recent_comments li a { display: inline; }
.widget_meta li { padding: 7px 0; }
.widget_pages li { padding: 7px 0; }
.widget_rss li { padding: 7px 0; }
.widget_rss .rss-date { display: block; font-size: 11px; color: #bbb; margin: 2px 0; }
.widget_rss .rssSummary { font-size: 13px; color: #666; }
.widget_calendar table { width: 100%; text-align: center; }
.widget_calendar caption { font-weight: 600; margin-bottom: 8px; }
.widget_calendar th,.widget_calendar td { padding: 4px; font-size: 13px; }
.widget_calendar #today { background: var(--theme-color); color: #fff; border-radius: 3px; }
/* ============================================================
   19. Footer
   ============================================================ */
.footer {
    background: #222;
    color: #999;
    padding: 30px 0;
}
.footer-widgets {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.footer-col-logo {
    width: auto;
    flex-shrink: 0;
}
.footer-col-logo img { max-height: 60px; height: auto; width: auto; }
.footer-col-copy { flex: 1; }
.footer-nav { margin-bottom: 10px; }
.footer-nav li {
    display: inline-block;
    margin-right: 16px;
}
.footer-nav a { color: #aaa; font-size: 13px; }
.footer-nav a:hover { color: #fff; }
.copyright { font-size: 12px; line-height: 1.8; }
.copyright a { color: #777; }
.copyright a:hover { color: var(--theme-color); }
.footer-col-sns { width: 120px; flex-shrink: 0; }
.footer-sns { text-align: right; }
.footer-sns .sns-icon {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
    color: #aaa;
    margin-left: 6px;
    transition: all .2s;
}
.footer-sns .sns-icon:hover { background: var(--theme-color); color: #fff; }

/* ============================================================
   20. Back to Top
   ============================================================ */
.action { position: fixed; bottom: 80px; right: 20px; z-index: 99; }
.action .gotop {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    opacity: 0;
    transition: all .3s;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.action .gotop.show { opacity: 1; }
.action .gotop:hover { background: var(--theme-color); color: #fff; border-color: var(--theme-color); }

/* ============================================================

/* ============================================================
   21. Partner / Bookmark Links
   ============================================================ */
.j-partner { margin-bottom: 20px; }
.j-partner .sec-panel { padding: 16px 20px; }
.j-partner .sec-panel-head { margin-bottom: 12px; }
.j-partner .sec-panel-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.j-partner .sec-panel-head h3 span { border-left: 4px solid var(--theme-color); padding-left: 8px; }
.j-partner .sec-panel-head h3 small { font-size: 12px; font-weight: 400; color: #999; margin-left: 6px; }
.j-partner .sec-panel-head h3 .more { float: right; font-size: 13px; font-weight: 400; color: var(--theme-color); }
.list-links { display: flex; flex-wrap: wrap; gap: 0; }
.list-links a { display: inline-block; padding: 4px 12px; margin: 2px 4px; font-size: 13px; color: #888; border: 1px solid #eee; border-radius: 3px; transition: all .2s; }
.list-links a:hover { color: var(--theme-color); border-color: var(--theme-color); }

/* ============================================================
   21b. Responsive adjustments for new sections
   ============================================================ */
@media (max-width: 991px) {
	.feature-post { display: none; }
	.main-slider.pull-left { width: 100%; }
	.topic-list .topic { width: calc(50% - 5px) !important; }
}
@media (max-width: 767px) {
	.topic-list { gap: 12px; }
	.topic-list .topic { width: 100% !important; flex: none; }
	.topic-list .topic-wrap { display: flex; align-items: center; gap: 12px; border-radius: 8px; background: #f5f5f5; overflow: hidden; }
	.topic-list .cover-container { width: 120px; min-width: 120px; padding-top: 0; height: 80px; border-radius: 8px; }
	.topic-list .cover-container img { border-radius: 8px; }
	.topic-list .topic-wrap span { position: static; flex: 1; background: none; color: var(--text-color); font-size: 15px; font-weight: 600; text-shadow: none; padding: 0 12px 0 0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

	/* Tabs horizontal scroll */
	.sec-panel-head .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
	.sec-panel-head .tabs::-webkit-scrollbar { display: none; }
	.sec-panel-head .tab { flex: 0 0 auto; }
	.sec-panel-head .tab a { white-space: nowrap; padding: 6px 12px; font-size: 14px; }
	.sec-panel-head .tab .tab-underscore { bottom: -9px; }
}

/* ============================================================
   22. Top News Bar (Header Notification)
   ============================================================ */
 .top-news { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 44px; background: var(--theme-color); color: #fff; z-index: 1001; }
.top-news .top-news-content { position: relative; display: flex; height: 100%; font-size: 14px; line-height: 20px; padding: 8px 50px 8px 16px !important; align-items: center; box-sizing: border-box; }
.top-news .content-text { width: 100%; max-height: 48px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.top-news .content-text a { color: #fff; text-decoration: underline; }
.top-news .top-news-close { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; line-height: 36px; text-align: center; font-size: 18px; cursor: pointer; opacity: .8; transition: opacity .2s; }
.top-news .top-news-close:hover { opacity: 1; }
/* ============================================================
   21. Responsive
   ============================================================ */
@media (max-width: 1239px) {
    .container { width: auto; max-width: 960px; }
}
@media (max-width: 991px) {
    .container { padding: 0 15px; }
    .wrap { flex-direction: column; }
    .sidebar { width: 100%; }
    
    /* Mobile Nav */
    .navbar-collapse {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,.1);
        flex-direction: column;
        margin-left: 0;
        padding: 10px 0;
    }
    .navbar-collapse.collapse.in { display: flex !important; }
    .navbar-toggle {
        display: block;
        float: right;
        padding: 10px 12px;
        margin: 8px -6px 8px 0;
        background: none;
        border: 0;
        border-radius: 4px;
        cursor: pointer;
        min-width: 44px;
        min-height: 44px;
    }
    .navbar-toggle .icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        background: #444;
        margin: 5px 0;
        border-radius: 1px;
        transition: background .2s;
    }
    .navbar-toggle:hover .icon-bar { background: var(--theme-color); }
    .logo { float: left; }
    .primary-menu { width: 100%; }
    .navbar-nav > li { display: block; }
    .navbar-nav > li > a { line-height: 40px; padding: 0 16px; }
    .navbar-nav .sub-menu {
        position: static;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding-left: 20px;
    }
    .navbar-action {
        width: 100%;
        padding: 8px 16px;
        border-top: 1px solid var(--border-color);
        justify-content: flex-start;
    }

    /* Slider */
    .slider-wrap { height: auto; margin-top: 12px; }
    .main-slider .swiper-slide img { height: 220px; }
    .main-slider .slide-title { font-size: 15px; padding: 20px 16px 12px; }

    /* Post List */
    .post-loop-default .item-img { border-radius: 8px; width: 160px; }
    .post-loop-default .item-img img { height: 100px; }
    .post-loop-default .item-title { font-size: 16px; }
    .entry-main { padding: 20px 16px; }
    .entry-title { font-size: 22px; }
    .post-loop-image { grid-template-columns: repeat(2, 1fr); }

    /* Single */
    .entry-main { padding: 20px 16px; }
    .entry-title { font-size: 20px; }
    .entry-page { flex-direction: column; }
    
    /* Special */
    .special-list { grid-template-columns: 1fr; }
    .special-item { padding: 15px; }
    .special-item-thumb { width: 140px; height: 88px; }
    .special-item-title h2 { font-size: 16px; }
    .special-item-more { display: none; }
    .special-item-articles a { font-size: 13px; padding: 5px 0 5px 13px; }
    .special-item-articles a::before { top: 12px; }
    .special-item-share { display: none; }

    /* Footer */
    .footer-widgets { flex-direction: column; gap: 20px; }
    .footer-col-logo { width: auto; }
    .footer-col-sns { width: auto; text-align: left; }
    .footer-sns { text-align: left; }
    .footer-sns .sns-icon:first-child { margin-left: 0; }
}
@media (max-width: 640px) {
    /* Footer mobile */
    .footer-col-logo, .footer-col-copy, .footer-col-sns {
        text-align: center !important;
        width: 100%;
    }
    .footer-col-logo img {
        max-height: 50px;
    }
    .footer-nav {
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 12px;
    }
    .footer-nav li {
        float: none;
        display: inline;
        margin: 0;
    }
    .copyright {
        text-align: center;
    }
    .footer-sns {
        text-align: center !important;
    }
    .footer-sns .sns-icon:first-child { margin-left: 0; }
    .post-loop-default .item { flex-direction: column; }
    .post-loop-default .item-img { border-radius: 8px; width: 100%; }
    .post-loop-default .item-img img { height: 155px; }
    .slider-wrap { height: auto; margin-top: 12px; }
    .main-slider .swiper-slide img { height: 155px; }
    .post-loop-image { grid-template-columns: repeat(2, 1fr); }
    .entry-author-inner { flex-direction: column; align-items: center; text-align: center; }
    .entry-bar-inner { flex-direction: column; gap: 10px; }
    .kx-item { padding-left: 60px; }
    .kx-time { width: 40px; font-size: 11px; }
}

/* ============================================================
   22. WordPress Core
   ============================================================ */
.screen-reader-text { display: none; }
.wp-caption { max-width: 100%; margin-bottom: 16px; }
.wp-caption-text { font-size: 12px; color: #999; text-align: center; padding: 4px 0; }
.aligncenter { display: block; margin: 16px auto; }
.alignleft { float: left; margin: 0 16px 8px 0; }
.alignright { float: right; margin: 0 0 8px 16px; }
.gallery { display: grid; gap: 10px; margin: 16px 0; }
.gallery-item { display: inline-block; }
.gallery-item img { width: 100%; height: auto; border-radius: 4px; }

/* Sticky post bold title with theme color */
.item-sticky .item-title a { font-weight: 700; color: var(--theme-color); }

/* Featured large image (item-featured-large) */
.item-featured-large .item-content { padding: 0; }
.item-featured-large .item-title {
    font-size: 22px; font-weight: 600; margin-bottom: 12px; line-height: 1.4;
}
.item-featured-large .item-title a { color: var(--text-color); }
.item-featured-large .item-title a:hover { color: var(--theme-color); }
.item-featured-large .item-image { position: relative;
    display: block; margin-bottom: 12px; border-radius: 8px; overflow: hidden;
}
.item-featured-large .item-image .item-image-el {
    width: 100%; aspect-ratio: 820 / 312; background-size: cover; background-position: center;
    transition: transform .3s; border-radius: 8px;
}
.item-featured-large .item-image:hover .item-image-el { transform: scale(1.02); }
.item-featured-large .item-excerpt {
    font-size: 14px; color: #666; line-height: 1.7; margin-bottom: 10px;
}
.item-featured-large .item-meta { font-size: 12px; color: #999; }
.item-featured-large .item-meta .dot { margin: 0 6px; color: #ddd; }
 .item-featured-large .item-category {
     position: absolute;
     top: 10px;
     left: 10px;
     z-index: 2;
     background: rgba(0,0,0,.5);
     padding: 2px 10px;
     color: #fff;
     font-size: 12px;
     border-radius: 3px;
     transition: background .2s;
 }
 .item-featured-large .item-category:hover { background: rgba(0,0,0,.7); color: #fff; }
 
 /* Responsive large image */
@media (max-width: 991px) {
    .item-featured-large .item-title { font-size: 18px; }
    .item-featured-large .item-image .item-image-el { aspect-ratio: 16 / 9; }
}

/* Tab content display control */
.widget_post_tabs .tab-content { display: none; }
.widget_post_tabs .tab-content.active { display: block; }

.item-title a {
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    word-break: break-word;
}
.item-excerpt {
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    word-break: break-word;
}
.item-featured-large .item-title a {
    -webkit-line-clamp: 2; word-break: break-word;
}
.item-featured-large .item-excerpt {
    -webkit-line-clamp: 3;
}
.widget_post_thumb .item-title a {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}

/* Kuaixun sidebar - overrides for main page styles */




/* Widget title layout for kuaixun */
.widget_kuaixun .widget-title { display: flex; align-items: center; justify-content: space-between; }
.widget_kuaixun .widget-title-more { font-size: 12px; font-weight: 400; color: #999; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.widget_kuaixun .widget-title-more:hover { color: var(--theme-color); }

/* Sidebar kuaixun - dot position + color, time layout */





/* Kuaixun sidebar demo match */





/* ===== Kuaixun Sidebar ===== */
.widget-kx-list { margin: 0; padding: 0; list-style: none; }

.widget-kx-list .kx-item {
    padding: 14px 0 14px 24px; position: relative;
    border-bottom: 1px solid #f0f0f0;
    transition: background .2s;
}
.widget-kx-list .kx-item:last-child { border-bottom: none; }

/* Subtle accent dot */
.widget-kx-list .kx-item::before {
    content: ""; position: absolute; left: 4px; top: 21px;
    width: 7px; height: 7px;
    background: var(--theme-color); opacity: .45;
    border-radius: 50%;
    transition: opacity .2s, transform .2s;
}
.widget-kx-list .kx-item:hover::before {
    opacity: .8; transform: scale(1.15);
}
.widget-kx-list .kx-item:last-child::before { display: block; }

/* Title */
.widget-kx-list .kx-title {
    display: block; font-size: 14px; line-height: 1.5; font-weight: 500;
    color: #2c2c2c; text-decoration: none; cursor: pointer;
    transition: color .2s;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}
.widget-kx-list .kx-title:hover { color: var(--theme-color); }

/* Meta row: date + share */
.widget-kx-list .kx-meta {
    margin-top: 5px; display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: #aaa;
}
.widget-kx-list .kx-meta .kx-time { display: inline-block; }

/* Share icon - fade in on hover */
.widget-kx-list .kx-meta .kx-share {
    color: #ccc; cursor: pointer; font-size: 11px;
    opacity: 0; transition: opacity .2s;
}
.widget-kx-list .kx-item:hover .kx-meta .kx-share { opacity: 1; }

/* Expanded content */
.widget-kx-list .kx-content {
    display: none; margin-top: 8px; padding: 10px 14px;
    background: #f7f8fa; border-radius: 6px; font-size: 13px;
    color: #666; line-height: 1.7; border-left: 3px solid var(--theme-color);
}
.widget-kx-list .kx-content p { margin: 0; }
.widget-kx-list .kx-content a.kx-more { color: var(--theme-color); }

/* Override main page kuaixun styles that break sidebar */
.widget-kx-list .kx-item::before { position: absolute; }  /* ensure absolute positioning in sidebar */
.widget-kx-list .kx-meta .kx-time { position: static !important; width: auto !important; text-align: left !important; top: auto !important; left: auto !important; }
.widget-kx-list .kx-meta .kx-time::after { display: none !important; }

/* Kuaixun page styles */
.kx-list { position: relative; }
.kx-date {
    position: relative; padding: 8px 0; margin: 16px 0 12px;
    font-size: 14px; font-weight: 500; color: var(--theme-color);
}
.kx-date::after {
    content: ""; position: absolute; bottom: 0; left: 0;
    width: 40px; height: 2px; background: var(--theme-color);
}
.kx-new {
    display: inline-block; padding: 1px 10px;
    background: var(--theme-color); color: #fff; font-size: 11px;
    border-radius: 3px; margin-bottom: 12px;
}
.kx-excerpt {
    font-size: 13px; color: #888; line-height: 1.6; margin: 4px 0;
}
.kx-img { margin-top: 8px; display: inline-block; border-radius: 4px; overflow: hidden; }
.kx-img img { max-width: 300px; height: auto; border-radius: 4px; }
.kx-meta {
    margin-top: 8px; font-size: 12px; color: #bbb;
}
.kx-share-icons { display: inline-flex; gap: 6px; }
.kx-share-icons .share-icon {
    display: inline-block; width: 24px; height: 24px; line-height: 24px;
    text-align: center; border-radius: 3px; font-size: 13px;
    color: #bbb; transition: all .2s;
}
.kx-share-icons .share-icon:hover { color: #fff; background: var(--theme-color); }
.sec-panel-kx { padding: 24px; }

/* === Entry Author Box === */
.entry-author { background: #fff; border-radius: 4px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.entry-author-inner { display: flex; gap: 16px; align-items: flex-start; }
.entry-author-avatar { flex-shrink: 0; }
.entry-author-avatar img { width: 60px; height: 60px; border-radius: 50%; }
.entry-author-content { flex: 1; min-width: 0; }
.entry-author-name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.entry-author-name a { color: var(--text-color); }
.entry-author-name a:hover { color: var(--theme-color); }
.entry-author-description { font-size: 13px; color: #888; line-height: 1.6; }
.entry-author-stats { margin-top: 6px; font-size: 12px; color: #bbb; display: flex; gap: 16px; }
.entry-author-action { margin-top: 8px; }
.entry-author-action .btn { display: inline-block; padding: 4px 16px; font-size: 12px; border: 1px solid var(--theme-color); color: var(--theme-color); border-radius: 4px; transition: all .2s; }
.entry-author-action .btn:hover { background: var(--theme-color); color: #fff; }

/* === Entry Action (Like + Donate) === */
.entry-action { text-align: center; padding: 20px 0; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; display: flex; justify-content: center; gap: 12px; }
.btn-zan, .btn-dashang { display: inline-flex; align-items: center; gap: 4px; padding: 8px 24px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; color: #666; cursor: pointer; transition: all .2s; background: #fff; }
.btn-zan:hover { border-color: var(--theme-color); color: var(--theme-color); }
.btn-dashang { position: relative; }
.btn-dashang:hover { border-color: #f60; color: #f60; }
.dashang-img { display: none; position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background: #fff; padding: 10px; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.15); z-index: 10; text-align: center; font-size: 12px; color: #999; white-space: nowrap; }
.btn-dashang:hover .dashang-img { display: flex; gap: 16px; }
.dashang-img img { width: 120px; height: 120px; object-fit: cover; border-radius: 4px; }
.entry-action-num { font-weight: 400; }

/* === Entry Bar === */
.entry-bar { background: #fff; border-radius: 4px; padding: 16px 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.entry-bar-inner { display: flex; align-items: center; justify-content: space-between; }
.entry-bar .author { display: flex; align-items: center; gap: 10px; }
.entry-bar .author .avatar { display: flex; align-items: center; gap: 8px; }
.entry-bar .author .avatar img { width: 36px; height: 36px; border-radius: 50%; }
.entry-bar .author .author-name { font-size: 13px; font-weight: 500; color: var(--text-color); }
.entry-bar .info { display: flex; align-items: center; gap: 12px; }
.entry-bar .info .meta-item { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: #999; transition: color .2s; }
.entry-bar .info .meta-item:hover { color: var(--theme-color); }
.entry-bar .info .j-heart.liked { color: #f60; }

/* === Copyright === */
.entry-copyright { padding: 12px 20px; background: #f8f9fa; border-radius: 4px; font-size: 12px; color: #999; line-height: 1.6; margin-bottom: 20px; border-left: 4px solid var(--theme-color); }

/* === Action Panel === */
.action { position: fixed; z-index: 999; bottom: 20%; right: 20px; display: flex; flex-direction: column; gap: 1px; }
.action-style-1 .action-item { width: 50px; height: 50px; line-height: 50px; text-align: center; color: #999; background: #eee; cursor: pointer; transition: all .2s; border-radius: 0; display: block; text-decoration: none; position: relative; z-index: 0; }
.action-style-1 .action-item:first-child { border-radius: 4px 4px 0 0; }
.action-style-1 .action-item:last-child { border-radius: 0 0 4px 4px; }
.action-style-1 .action-item:hover { color: #fff; background: var(--theme-color); }
.action-style-1 .action-item-icon { font-size: 20px; line-height: 50px; }
.action .gotop { display: block; }
.action .gotop.active { opacity: 1; }
.action .gotop { opacity: 0; transition: opacity .3s; }
.action .action-item-inner { visibility: hidden; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); width: 200px; padding: 15px; font-size: 12px; color: #333; text-align: left; background: #fff; box-shadow: 0 0 3px 1px rgba(0,0,0,.1); opacity: 0; transition: all .3s; margin-right: 8px; border-radius: 4px; }
.action .action-item:hover .action-item-inner { visibility: visible; opacity: 1; transform: translateY(-50%) translateX(-5px); }
.action-item-inner p { margin: 4px 0 0; color: #999; text-align: center; }
.share-more-wrap { width: 220px; }
.action-share-item { display: block; padding: 6px 0; font-size: 13px; color: #555; transition: color .2s; cursor: pointer; }
.action-share-item:hover { color: var(--theme-color); }
.action-share-item i { width: 20px; text-align: center; margin-right: 6px; }

/* === Dark Mode === */
body.dark-mode { background: #1a1a2e; color: #ccc; }
.dark-mode .header { background: #16213e; box-shadow: none; }
.dark-mode .navbar-nav > li > a { color: #ccc; }
.dark-mode .sec-panel, .dark-mode .entry-main, .dark-mode .widget,
.dark-mode .comments-area, .dark-mode .entry-author,
.dark-mode .entry-bar, .dark-mode .entry-related-posts { background: #16213e; }
.dark-mode .entry-title, .dark-mode .item-title a,
.dark-mode .widget li a, .dark-mode .kx-content h2 a,
.dark-mode .widget-kx-list .kx-title { color: #ddd; }
.dark-mode .item-excerpt { color: #999; }
.dark-mode .footer { background: #0f0f23; }
.dark-mode .breadcrumb a, .dark-mode .breadcrumb .current { color: #999; }
.dark-mode .entry-copyright { background: #1a1a3e; color: #888; border-left-color: #4a4aff; }
.dark-mode .item-featured-large .item-image .item-image-el { filter: brightness(.8); }
.dark-mode .widget_tag_cloud .tagcloud a { border-color: #333; color: #999; }
/* 文章正文：浅色定义写死了 color:#333，暗色下必须反转，否则黑字贴深底看不清 */
.dark-mode .entry-content { color: #c9d3e8; }
.dark-mode .entry-content h2, .dark-mode .entry-content h3,
.dark-mode .entry-content h4, .dark-mode .entry-content h5,
.dark-mode .entry-content strong, .dark-mode .entry-content b { color: #eceff7; }
.dark-mode .entry-content blockquote { background: #202a4a; color: #9fb0cf; }
.dark-mode .entry-content hr { border-color: #33406a; }
.dark-mode .entry-content table { color: #c9d3e8; border: 1px solid #33406a; }
.dark-mode .entry-content th, .dark-mode .entry-content td { border: 1px solid #33406a; padding: 6px 10px; }

/* === Page Banner === */
.page-banner { position: relative; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; }
.page-banner h1 { font-size: 28px; font-weight: 600; text-shadow: 0 2px 8px rgba(0,0,0,.3); }
.page-banner .page-description { font-size: 14px; opacity: .85; max-width: 640px; text-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* === Social Share on Post === */
.entry-share { margin: 16px 0; padding: 10px 0; border-top: 1px solid var(--border-color); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entry-share span { font-size: 13px; color: #999; }
.entry-share a { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px; color: #666; transition: all .2s; }
.entry-share a:hover { color: var(--theme-color); border-color: var(--theme-color); }
.entry-share .weibo:hover { color: #e6162d; border-color: #e6162d; }
.entry-share .wechat:hover { color: #07c160; border-color: #07c160; }
 .entry-share .wechat { position: relative; }
.entry-share .qq:hover { color: #12b7f5; border-color: #12b7f5; }

/* === Dark mode toggle === */
.j-dark-toggle { cursor: pointer; }
body.dark-mode .j-dark-toggle .fa-moon:before { content: "\f185"; } /* sun icon */

/* ============================================================
   23. Category Style 2 (wenlv/redian/meishi - yonghutiyan reference)
   ============================================================ */
 /* ============================================================
/* ============================================================
   23. Category Style 2 (wenlv/redian/meishi) - Card Layout
   ============================================================ */
.post-loop-style2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.post-loop-style2 .post-item {
    list-style: none;
    padding: 0;
    border: none;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}
.post-loop-style2 .post-item-inner {
    display: block;
    padding: 0;
}
.post-loop-style2 .item-img {
    display: block;
    width: 100%;
    height: 262px;
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
}
.post-loop-style2 .item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}
.post-loop-style2 .item-img:hover img {
    transform: scale(1.05);
}
/* 图片左上角角标：置顶（橙）/ 原创（红）并排，flex 容器避免重叠 */
.post-loop-style2 .item-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}
.post-loop-style2 .item-badges .sticky-post,
.post-loop-style2 .item-badges .hz-orig {
    position: static;
    display: inline-block;
    margin: 0;
    padding: 2px 10px;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    border-radius: 3px;
    vertical-align: middle;
    white-space: nowrap;
}
.post-loop-style2 .item-badges .sticky-post { background: #f60; }
.post-loop-style2 .item-badges .hz-orig { background: #e53935; font-weight: 700; }
 .post-loop-style2 .item-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     padding: 30px 16px 10px;
     background: linear-gradient(transparent, rgba(0,0,0,.75));
     pointer-events: none;
 }
 .post-loop-style2 .item-title {
     font-size: 17px;
     font-weight: 600;
     line-height: 1.4;
     margin: 0;
     text-align: left;
     flex: 1;
     min-width: 0;
     padding-right: 10px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }
 .post-loop-style2 .item-title a {
     color: #fff;
     text-shadow: 0 1px 4px rgba(0,0,0,.3);
 }
 .post-loop-style2 .item-title a:hover {
     color: #fff;
 }
 .post-loop-style2 .item-date {
     font-size: 12px;
     white-space: nowrap;
     flex-shrink: 0;
     color: #fff;
     opacity: .85;
     text-shadow: 0 1px 3px rgba(0,0,0,.3);
 }
@media (max-width: 640px) {
    .post-loop-style2 {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .post-loop-style2 .item-title {
        font-size: 16px;
    }
    .post-loop-style2 .item-img {
        height: 200px;
    }
}
/* ============================================================
   24. Home: Latest Posts Tab - Image-only with Category Badge
   ============================================================ */
.main-list .tab-wrap:first-child .item {
     border-bottom: none;
     padding: 0;
 }
 .main-list .tab-wrap:first-child .item:first-child {
     padding-top: 0;
 }
 .main-list .tab-wrap:first-child .item:last-child {
     padding-bottom: 10px;
     border-bottom: none;
 }
.main-list .tab-wrap:first-child .item-img {
    width: 100%;
    height: 155px;
    border-radius: 4px;
    margin-bottom: 0;
}
 .main-list .tab-wrap:first-child .item-img img {
     width: 100%;
     height: 155px;
     object-fit: cover;
 }
 .main-list .tab-wrap:first-child .item-content {
     display: none !important;
 }
 /* Hide category badge in category tabs (only 最新文章 tab keeps it) */
 .main-list .tab-wrap:nth-child(n+3) .item-category {
     display: none;
 }
 @media (max-width: 640px) {
    .main-list .tab-wrap:first-child .item-img {
        height: 160px;
    }
    .main-list .tab-wrap:first-child .item-img img {
        height: 160px;
    }
}

/* ============================================================
   25. Sidebar: Ad Area + Weather Calendar
   ============================================================ */
.widget-ad {
    width: 100%;
    height: 320px;
    background: #f7f8fa;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 20px;
}
.widget-ad-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.widget-ad-link {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .2s;
}
.widget-ad-link:hover {
    background: #f0f1f3;
}
.widget-ad-placeholder {
    font-size: 14px;
    color: #ccc;
    letter-spacing: 3px;
}
.widget-weather {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 20px;
    color: #fff;
}
.weather-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.weather-left { text-align: center; }
.weather-day-num {
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}
.weather-day-week { font-size: 13px; opacity: .9; margin-bottom: 2px; }
.weather-day-month { font-size: 12px; opacity: .7; }
.weather-right { text-align: right; }
.weather-temp {
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 4px;
}
.weather-desc { font-size: 14px; opacity: .85; }

@media (max-width: 991px) {
    .widget-ad { height: 220px; }
}
@media (max-width: 640px) {
    .widget-ad { height: 155px; }
}

/* ============================================================
   26. Sidebar: Hot Posts Grid (2-column, image + title)
   ============================================================ */
.widget_post_tabs .hot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.widget_post_tabs .hot-grid .item {
    list-style: none;
    padding: 0;
    border: none;
}
.widget_post_tabs .hot-grid .item-img {
    width: 100%;
    height: 85px !important;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f5f5;
}
.widget_post_tabs .hot-grid .item-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.widget_post_tabs .hot-grid .item-title {
    font-size: 12px;
    line-height: 1.4;
    margin-top: 6px;
    font-weight: 400;
}
.widget_post_tabs .hot-grid .item-title a {
    color: var(--text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s;
}
.widget_post_tabs .hot-grid .item-title a:hover {
    color: var(--text-color);
}

/* ============================================================
   27. Sidebar: Media Image Widget
   ============================================================ */
#media_image-5 {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 20px;
}
#media_image-5 img {
    width: 320px;
    height: 320px !important;
    border-radius: 4px;
    object-fit: cover;
    display: block;
    max-width: 100%;
}


/* Mobile: hide floating share, prev/next, related, sidebar */
@media (max-width: 767px) {
    .breadcrumb-area { display: none !important; }
    .action { display: none !important; }
    .entry-page { display: none !important; }
    .entry-related-posts { display: none !important; }
    .entry-share { display: none !important; }
    aside.sidebar { display: none !important; }
}