@charset "utf-8";

/* ==========================================================================
   1. 全局重置与基础样式
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: "Microsoft YaHei", "Heiti SC", sans-serif; 
    background-color: #f5f5f5; 
    color: #333; 
    line-height: 1.8; 
}
a { text-decoration: none; color: #333; transition: color 0.3s; }
a:hover { color: #d93025; }
ul { list-style: none; }
img { max-width: 100%; display: block; margin: 0 auto; }

/* 布局容器 */
.container { width: 1200px; margin: 0 auto; background: #fff; }
.clearfix::after { content: ""; display: block; clear: both; }

/* ==========================================================================
   2. 顶部导航 (Top Nav)
   ========================================================================== */
.top-nav { background: #333; height: 50px; line-height: 50px; }
.nav-inner { width: 1200px; margin: 0 auto; display: flex; }
.nav-item { padding: 0 20px; color: #fff; font-size: 16px; display: block; }
.nav-item:hover, .nav-item.active { background: #d93025; }

/* ==========================================================================
   3. 首页专用组件 (Home Components)
   ========================================================================== */
.top-banners, .bottom-banners { display: flex; justify-content: space-between; padding: 10px 0; width: 1200px; margin: 0 auto; }
.top-banners img, .bottom-banners img { width: 49.5%; height: auto; object-fit: cover; }

.main-content { width: 1200px; margin: 20px auto; padding: 20px; background: #fff; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.section-title { font-size: 24px; border-left: 5px solid #d93025; padding-left: 15px; margin-bottom: 20px; color: #d93025; font-weight: bold; }

/* 首页卡片式列表 */
.article-list { display: flex; flex-wrap: wrap; justify-content: space-between; }
.article-item { width: 49%; background: #fff; border: 1px solid #eee; margin-bottom: 20px; padding: 20px; transition: transform 0.2s, box-shadow 0.2s; position: relative; }
.article-item:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: #d93025; }
.article-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.article-desc { font-size: 14px; color: #666; height: 44px; overflow: hidden; line-height: 22px; }
.article-date { position: absolute; top: 20px; right: 20px; font-size: 12px; color: #999; }

/* ==========================================================================
   4. 内页通用布局 (Breadcrumb & Sidebar Layout)
   ========================================================================== */
.breadcrumb { width: 1200px; margin: 0 auto 20px; padding: 10px 0; font-size: 14px; color: #666; border-bottom: 1px solid #ddd; }
.breadcrumb a { color: #666; }

.main-wrapper { width: 1200px; margin: 0 auto 20px; display: flex; justify-content: space-between; align-items: flex-start; }

.left-content { width: 850px; background: #fff; padding: 30px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }

.right-sidebar { width: 330px; }
.sidebar-module { background: #fff; padding: 20px; margin-bottom: 20px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.module-title { font-size: 16px; font-weight: bold; border-left: 4px solid #d93025; padding-left: 10px; margin-bottom: 15px; border-bottom: 1px solid #f0f0f0; padding-bottom: 10px; }

.hot-list li { margin-bottom: 12px; position: relative; padding-left: 15px; }
.hot-list li::before { content: "•"; color: #d93025; position: absolute; left: 0; font-weight: bold; }
.hot-list a { font-size: 14px; color: #555; }

.gzh-box { text-align: center; }
.gzh-box img { width: 150px; height: 150px; margin: 0 auto; border: 1px solid #eee; }
.gzh-desc { font-size: 12px; color: #666; margin-top: 10px; }

.tags-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-item { background: #f9f9f9; padding: 5px 10px; font-size: 12px; color: #666; border-radius: 3px; transition: background 0.3s; }
.tag-item:hover { background: #d93025; color: #fff; }

/* ==========================================================================
   5. 文章列表页样式
   ========================================================================== */
.list-header { border-bottom: 2px solid #d93025; margin-bottom: 20px; padding-bottom: 10px; font-size: 20px; font-weight: bold; color: #d93025; }
.news-item { border-bottom: 1px solid #eee; padding: 20px 0; display: flex; flex-direction: column; }
.news-item:last-child { border-bottom: none; }
.news-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; }
.news-title a { color: #333; }
.news-title a:hover { color: #d93025; }
.news-desc { font-size: 14px; color: #666; line-height: 1.8; margin-bottom: 10px; height: 50px; overflow: hidden; }
.news-meta { font-size: 12px; color: #999; display: flex; justify-content: space-between; align-items: center; }
.read-more { border: 1px solid #ddd; padding: 2px 10px; border-radius: 3px; font-size: 12px; color: #666; }
.read-more:hover { background: #d93025; color: #fff; border-color: #d93025; }

/* ==========================================================================
   6. 文章内容页样式
   ========================================================================== */
.article-header { border-bottom: 1px solid #eee; padding-bottom: 20px; margin-bottom: 30px; text-align: center; }
.article-h1 { font-size: 28px; font-weight: bold; color: #333; margin-bottom: 15px; line-height: 1.4; }
.article-meta { font-size: 12px; color: #999; }
.article-meta span { margin: 0 10px; }

.article-body { font-size: 16px; color: #444; text-align: justify; }
.article-body p { margin-bottom: 20px; text-indent: 2em; }
.article-body h2 { font-size: 20px; color: #d93025; margin: 30px 0 15px; border-left: 4px solid #d93025; padding-left: 10px; font-weight: bold; }
.article-body h3 { font-size: 18px; color: #333; margin: 20px 0 10px; font-weight: bold; }
.article-link { color: #d93025; text-decoration: underline; font-weight: bold; }

.prev-next-box { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; display: flex; justify-content: space-between; font-size: 14px; color: #666; }
.prev-next-box a { color: #666; }
.prev-next-box a:hover { color: #d93025; }

/* --- 6.1 表格样式大全 (Tables) --- */
/* 通用基础表格 (1.html, 2.html, 3.html) */
.compare-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
.compare-table th, .compare-table td { border: 1px solid #ddd; padding: 12px; text-align: center; }
.compare-table th { background-color: #f9f9f9; color: #d93025; font-weight: bold; }
.compare-table tr:nth-child(even) { background-color: #fcfcfc; }
.compare-table tr:hover { background-color: #fff5f5; }

/* 红色现代表格 (5.html, 7.html) */
.modern-rate-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 30px 0; border-radius: 8px; overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,0.05); border: 1px solid #e0e0e0; }
.modern-rate-table thead tr { background: linear-gradient(135deg, #d93025, #b71c1c); color: #fff; }
.modern-rate-table th { padding: 15px; font-weight: bold; font-size: 16px; text-align: center; border-right: 1px solid rgba(255,255,255,0.2); }
.modern-rate-table td { padding: 15px; text-align: center; border-bottom: 1px solid #eee; color: #555; }
.modern-rate-table tbody tr:nth-child(even) { background-color: #fcfcfc; }
.modern-rate-table tbody tr:hover { background-color: #fff0f0; }

/* 青色清新表格 (6.html) */
.teal-service-table { width: 100%; border-collapse: collapse; margin: 30px 0; font-family: Arial, sans-serif; box-shadow: 0 5px 15px rgba(0,0,0,0.08); }
.teal-service-table thead tr { background-color: #008080; color: #ffffff; text-align: left; }
.teal-service-table th, .teal-service-table td { padding: 15px 20px; }
.teal-service-table tbody tr { border-bottom: 1px solid #e0e0e0; }
.teal-service-table tbody tr:nth-of-type(even) { background-color: #f3f8f8; }
.teal-service-table tbody tr:hover { background-color: #e6fffa; color: #006666; }
.check-icon { color: #2ecc71; font-weight: bold; }
.cross-icon { color: #e74c3c; font-weight: bold; }

/* [NEW] 绿色功能表格 (8.html) */
.feature-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
.feature-table th { background: #52c41a; color: #fff; padding: 12px; text-align: left; }
.feature-table td { padding: 12px; border-bottom: 1px solid #eee; }
.feature-table tr:hover { background: #f6ffed; }
.feature-strong { color: #52c41a; font-weight: bold; }

/* [NEW] 黑白对比表格 (9.html) */
.contrast-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; border: 1px solid #ddd; }
.contrast-table th { background: #595959; color: #fff; padding: 12px; text-align: center; width: 33%; }
.contrast-table td { padding: 12px; border-bottom: 1px solid #eee; text-align: center; vertical-align: middle; }
.contrast-table tr:nth-child(even) { background: #fafafa; }
.contrast-table tr:hover { background: #f0f0f0; }
.yes-tag { color: #52c41a; font-weight: bold; }
.no-tag { color: #f5222d; font-weight: bold; }

/* [NEW] 安全红绿对比表格 (10.html) */
.safety-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.safety-table th { padding: 15px; color: #fff; text-align: center; font-size: 16px; }
.th-safe { background-color: #52c41a; width: 40%; }
.th-danger { background-color: #f5222d; width: 40%; }
.th-item { background-color: #595959; width: 20%; }
.safety-table td { padding: 15px; border-bottom: 1px solid #eee; text-align: center; color: #555; }
.safety-table tr:hover { background-color: #fbfbfb; }
.safe-tag { color: #52c41a; font-weight: bold; }
.danger-tag { color: #f5222d; font-weight: bold; }

/* --- 6.2 重点讲解框样式大全 (Explain Boxes) --- */
/* 蓝色定义框 (3.html) */
.blue-explain-box { background-color: #e3f2fd; border-left: 5px solid #2196f3; padding: 20px; margin: 25px 0; border-radius: 0 4px 4px 0; color: #0d47a1; }
.blue-explain-title { font-weight: bold; display: block; margin-bottom: 10px; font-size: 17px; color: #1565c0; }

/* 红色说明框 (5.html) */
.red-explain-box { background-color: #fff5f5; border: 1px solid #ffcdd2; border-left: 5px solid #b71c1c; padding: 20px; margin: 25px 0; border-radius: 4px; color: #b71c1c; box-shadow: 0 2px 8px rgba(217, 48, 37, 0.1); }
.red-explain-title { font-weight: bold; display: block; margin-bottom: 10px; font-size: 18px; display: flex; align-items: center; }

/* 黄色服务框 (6.html) */
.yellow-explain-box { background-color: #fffbe6; border: 1px solid #ffe58f; border-left: 5px solid #faad14; padding: 20px; margin: 25px 0; border-radius: 4px; color: #874d00; }
.yellow-explain-title { font-weight: bold; display: block; margin-bottom: 10px; font-size: 17px; color: #d48806; display: flex; align-items: center; }

/* 火锅色说明框 (7.html) */
.hotpot-explain-box { background-color: #fff0eb; border: 1px solid #ffccc7; border-left: 6px solid #d32f2f; padding: 25px; margin: 30px 0; border-radius: 8px; color: #820014; box-shadow: 0 4px 12px rgba(211, 47, 47, 0.1); position: relative; }
.hotpot-title { font-weight: bold; display: block; margin-bottom: 15px; font-size: 18px; color: #c0392b; display: flex; align-items: center; }
.hotpot-list { margin-left: 20px; margin-bottom: 10px; }
.hotpot-list li { list-style: disc; color: #a52a2a; margin-bottom: 5px; }

/* [NEW] 生鲜绿说明框 (8.html) */
.green-explain-box { background-color: #f6ffed; border: 1px solid #b7eb8f; border-left: 5px solid #52c41a; padding: 20px; margin: 25px 0; border-radius: 4px; color: #135200; }
.green-explain-title { font-weight: bold; display: block; margin-bottom: 10px; font-size: 17px; color: #389e0d; display: flex; align-items: center; }

/* [NEW] 深红风险警示框 (9.html) */
.risk-alert-box { background-color: #fff1f0; border: 1px solid #ffa39e; border-left: 5px solid #f5222d; padding: 20px; margin: 25px 0; border-radius: 4px; color: #5c0011; }
.risk-alert-title { font-weight: bold; display: block; margin-bottom: 10px; font-size: 17px; color: #cf1322; display: flex; align-items: center; }
.risk-alert-box strong { color: #a8071a; }

/* [NEW] 官方步骤框 (10.html) */
.step-box { background-color: #f0f7ff; border: 1px solid #bae7ff; padding: 20px; margin: 25px 0; border-radius: 4px; }
.step-title { color: #0050b3; font-weight: bold; font-size: 18px; margin-bottom: 15px; border-bottom: 2px solid #1890ff; padding-bottom: 10px; display: inline-block; }
.step-item { margin-bottom: 15px; position: relative; padding-left: 30px; }
.step-num { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: #1890ff; color: #fff; border-radius: 50%; text-align: center; line-height: 20px; font-size: 12px; font-weight: bold; }
.step-content { font-size: 15px; color: #333; }

/* 通用警告框 */
.alert-box, .warning-box { background: #fff3f3; border: 1px solid #ffcdd2; padding: 15px; border-radius: 4px; color: #d32f2f; margin: 20px 0; font-size: 15px; }
.warning-box { background: #fffbe6; border-color: #ffe58f; color: #d48806; }

/* 状态标签 */
.status-badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; }
.status-safe { background-color: #e6fffa; color: #047857; border: 1px solid #b7eb8f; }
.status-danger { background-color: #fff5f5; color: #c53030; border: 1px solid #ffa39e; }
.status-warn { background-color: #fffbe6; color: #d69e2e; border: 1px solid #ffe58f; }

/* 图表容器 */
.chart-container { width: 80%; margin: 30px auto; position: relative; }
.chart-caption { text-align: center; font-size: 14px; color: #666; margin-top: 10px; font-style: italic; }

/* ==========================================================================
   7. 底部 (Footer)
   ========================================================================== */
.footer-links-box { width: 1200px; margin: 20px auto; background: #fff; padding: 20px; border-top: 3px solid #d93025; }
.link-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
.link-grid a { font-size: 13px; color: #555; display: block; padding: 5px; background: #f9f9f9; text-align: center; }
.link-grid a:hover { background: #d93025; color: #fff; }

.footer-info { text-align: center; padding: 20px 0; background: #333; color: #999; font-size: 14px; }
.footer-info a { color: #ccc; margin: 0 5px; }

/* ==========================================================================
   8. 悬浮组件与模态框
   ========================================================================== */
.pc-float-right { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); width: 140px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2); border-radius: 5px; z-index: 999; padding: 10px; text-align: center; }
.pc-float-right .qr-box { cursor: zoom-in; margin-bottom: 5px; }
.pc-float-right img { width: 100%; border: 1px solid #eee; }
.pc-float-right .tel-text { font-size: 16px; font-weight: bold; color: #d93025; margin-top: 5px; }
.pc-float-right .desc { font-size: 12px; color: #666; }

.float-left-icon { position: fixed; left: 10px; top: 60%; width: 50px; height: 50px; background: #d93025; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; z-index: 999; box-shadow: 0 2px 8px rgba(0,0,0,0.3); font-size: 12px; text-align: center; line-height: 1.2; }

.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 10000; justify-content: center; align-items: center; }
.modal-content { background: #fff; padding: 10px; border-radius: 5px; position: relative; max-width: 90%; }
.modal-content img { max-width: 500px; width: 100%; }
.close-modal { position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; background: #fff; border-radius: 50%; text-align: center; line-height: 30px; cursor: pointer; font-weight: bold; border: 2px solid #333; }

.mobile-bottom-bar { display: none; }
.mobile-qr-show { display: none; }

/* ==========================================================================
   9. 响应式适配 (Media Queries)
   ========================================================================== */
@media screen and (max-width: 768px) {
    .container, .nav-inner, .top-banners, .main-content, .bottom-banners, .footer-links-box, .breadcrumb, .main-wrapper, .left-content, .right-sidebar { width: 100%; }
    
    .top-banners, .bottom-banners, .main-wrapper { flex-direction: column; }
    .top-banners img, .bottom-banners img { width: 100%; margin-bottom: 5px; height: auto; }
    .article-item { width: 100%; }
    .left-content { margin-bottom: 20px; box-shadow: none; border-bottom: 1px solid #eee; padding: 15px; }
    .right-sidebar { width: 100%; }
    
    .link-grid { grid-template-columns: repeat(3, 1fr); }
    
    .article-h1 { font-size: 22px; }
    
    /* 重点：所有表格在移动端横向滚动 */
    .compare-table, .modern-rate-table, .teal-service-table, .feature-table, .contrast-table, .safety-table { display: block; overflow-x: auto; white-space: nowrap; }
    
    .chart-container { width: 100%; }
    
    .pc-float-right { display: none; }
    .mobile-bottom-bar { display: flex; position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background: #fff; border-top: 1px solid #ddd; z-index: 999; justify-content: space-around; align-items: center; }
    .mobile-item { text-align: center; flex: 1; border-right: 1px solid #eee; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .mobile-item img { width: 25px; height: 25px; margin-bottom: 2px; }
    .mobile-item span { font-size: 12px; }
    .mobile-item a { color: #333; display: block; width: 100%; height: 100%; line-height: 60px; font-weight: bold; }
    
    .mobile-qr-show { display: none; position: fixed; bottom: 65px; left: 50%; transform: translateX(-50%); width: 200px; background: #fff; padding: 10px; border: 1px solid #ccc; z-index: 998; text-align: center; box-shadow: 0 0 10px rgba(0,0,0,0.2); }
    .mobile-qr-show img { width: 100%; }
}