* { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; color: #333; background: #f5f5f5; line-height: 1.8; }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; height: auto; display: block; }

    /* ========== Header ========== */
    .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: all 0.3s; background: transparent; }
    .header.scrolled { background: #0f1a35; box-shadow: 0 2px 20px rgba(0,0,0,0.08); }
    .header.scrolled .nav-item { color: #ffffffdb; }
    .header.scrolled .logo-img { filter: none; }
    .header-wrap { max-width: 1600px; width: 90%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 80px; }
    .logo-img { height: 50px; filter: brightness(0) invert(1); transition: filter 0.3s; }
    .header.scrolled .logo-img { filter: none; }
    .nav-lists { display: flex; align-items: center; gap: 40px; }
    .nav-item { color: #fff; font-size: 16px; font-weight: 500; transition: color 0.3s; cursor: pointer; }
    .nav-item:hover { opacity: 0.8; }
    .header.scrolled .nav-item { color: #ffffffdb; }
    .header-btn { display: inline-block; padding: 10px 28px; background: linear-gradient(135deg, #2563eb, #1b32aff0); color: #fff; border-radius: 25px; font-size: 14px; font-weight: 500; transition: transform 0.2s, box-shadow 0.2s; }
    .header-btn:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(60, 79, 255, 0.4); }
    .menu-btn { display: none; width: 28px; height: 20px; position: relative; cursor: pointer; }
    .menu-btn span { display: block; width: 100%; height: 2px; background: #fff; position: absolute; left: 0; transition: all 0.3s; }
    .header.scrolled .menu-btn span { background: #fff; }
    .menu-btn span:nth-child(1) { top: 0; }
    .menu-btn span:nth-child(2) { top: 9px; }
    .menu-btn span:nth-child(3) { top: 18px; }
    .menu-btn.active span:nth-child(1) { top: 9px; transform: rotate(45deg); }
    .menu-btn.active span:nth-child(2) { opacity: 0; }
    .menu-btn.active span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

    /* Mobile Nav */
    .mobile-nav { display: none; position: fixed; top: 60px; left: 0; width: 100%; background: #fff; padding: 20px 0; box-shadow: 0 4px 20px rgba(0,0,0,0.1); z-index: 999; }
    .mobile-nav.show { display: block; }
    .mobile-nav a { display: block; padding: 14px 30px; font-size: 16px; color: #333; border-bottom: 1px solid #f0f0f0; }
    .mobile-nav a:hover { color: #1A6DFF; background: #f8f9fa; }

    /* ========== Banner ========== */
    .banner { position: relative; height: 420px; background: linear-gradient(135deg, #0D1B3E 0%, #1A6DFF 50%, #00D09C 100%); display: flex; align-items: center; justify-content: center; margin-top: 80px; overflow: hidden; }
    .banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.03)" d="M0,64L48,80C96,96,192,128,288,128C384,128,480,96,576,106.7C672,117,768,171,864,176C960,181,1056,139,1152,128C1248,117,1344,139,1392,149.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"/></svg>') no-repeat bottom; background-size: cover; }
    .banner-content { position: relative; text-align: center; color: #fff; z-index: 2; }
    .banner-en { font-size: 48px; font-weight: 800; opacity: 0.1; letter-spacing: 8px; text-transform: uppercase; font-family: 'Noto Sans SC', sans-serif; }
    .banner-title { font-size: 36px; font-weight: 700; margin-top: -20px; letter-spacing: 4px; }
    .banner-line { width: 60px; height: 3px; background: linear-gradient(90deg, #1A6DFF, #00D09C); margin: 20px auto 0; border-radius: 2px; }

    /* ========== Breadcrumb ========== */
    .breadcrumb-wrap { max-width: 1200px; width: 90%; margin: 0 auto; padding: 20px 0; }
    .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #999; }
    .breadcrumb a { color: #999; transition: color 0.2s; }
    .breadcrumb a:hover { color: #1A6DFF; }
    .breadcrumb .sep { color: #ccc; }
    .breadcrumb .current { color: #333; }

    /* ========== Article ========== */
    .article-wrap { max-width: 1200px; width: 90%; margin: 0 auto 60px; display: flex; gap: 40px; }
    .article-main { flex: 1; min-width: 0; background: #fff; border-radius: 12px; overflow: hidden; }
    .article-header { padding: 40px 48px 0; }
    .article-tag { display: inline-block; padding: 4px 16px; background: linear-gradient(135deg, #1A6DFF, #00D09C); color: #fff; font-size: 12px; border-radius: 20px; margin-bottom: 16px; }
    .article-title { font-size: 28px; font-weight: 700; color: #1a1a1a; line-height: 1.5; margin-bottom: 20px; }
    .article-meta { display: flex; align-items: center; gap: 24px; font-size: 14px; color: #999; padding-bottom: 24px; border-bottom: 1px solid #f0f0f0; flex-wrap: wrap; }
    .article-meta-item { display: flex; align-items: center; gap: 6px; }
    .article-meta-item svg { width: 16px; height: 16px; }
    .article-body { padding: 32px 48px 48px; }
    .article-body p { font-size: 16px; line-height: 2; color: #444; margin-bottom: 24px; text-align: justify; }
    .article-body h2 { font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 40px 0 20px; padding-left: 16px; border-left: 4px solid #1A6DFF; line-height: 1.4; }
    .article-body h3 { font-size: 18px; font-weight: 600; color: #333; margin: 28px 0 16px; }
    .article-body strong { color: #1A6DFF; font-weight: 600; }
    .article-body .highlight-box { background: linear-gradient(135deg, #f0f7ff, #e8faf4); border-left: 4px solid #1A6DFF; padding: 20px 24px; margin: 24px 0; border-radius: 0 8px 8px 0; }
    .article-body .highlight-box p { margin-bottom: 8px; }
    .article-body .highlight-box p:last-child { margin-bottom: 0; }
    .article-body .data-tag { display: inline-block; padding: 2px 10px; background: #1A6DFF; color: #fff; border-radius: 4px; font-size: 14px; font-weight: 500; margin: 0 2px; }
    .article-body .img-wrap { margin: 28px 0; border-radius: 8px; overflow: hidden; }
    .article-body .img-wrap img { width: 100%; border-radius: 8px; }
    .article-body .img-caption { text-align: center; font-size: 13px; color: #999; margin-top: 10px; }
    .article-body ul { padding-left: 24px; margin-bottom: 24px; }
    .article-body ul li { font-size: 16px; line-height: 2; color: #444; list-style-type: disc; }
    .article-body .phone-highlight { font-size: 20px; font-weight: 700; color: #2563eb; }

    /* Share bar */
    .article-share { display: flex; align-items: center; gap: 16px; padding: 24px 48px; border-top: 1px solid #f0f0f0; }
    .share-label { font-size: 14px; color: #999; }
    .share-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #f5f5f5; transition: all 0.2s; cursor: pointer; }
    .share-btn:hover { background: #1A6DFF; }
    .share-btn:hover svg { fill: #fff; }
    .share-btn svg { width: 18px; height: 18px; fill: #666; }

    /* Tags */
    .article-tags { display: flex; align-items: center; gap: 10px; padding: 0 48px 32px; flex-wrap: wrap; }
    .tag-label { font-size: 14px; color: #999; }
    .tag-item { display: inline-block; padding: 4px 14px; background: #f5f7fa; color: #666; font-size: 13px; border-radius: 16px; transition: all 0.2s; }
    .tag-item:hover { background: #1A6DFF; color: #fff; }

    /* ========== Sidebar ========== */
    .article-sidebar { width: 320px; flex-shrink: 0; }
    .sidebar-card { background: #fff; border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
    .sidebar-card-title { padding: 20px 24px; font-size: 18px; font-weight: 700; color: #1a1a1a; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; gap: 8px; }
    .sidebar-card-title::before { content: ''; display: inline-block; width: 4px; height: 20px; background: linear-gradient(180deg, #1A6DFF, #00D09C); border-radius: 2px; }

    /* Contact Card */
    .contact-card { padding: 24px; }
    .contact-phone { text-align: center; margin-bottom: 20px; }
    .contact-phone-label { font-size: 14px; color: #999; margin-bottom: 8px; }
    .contact-phone-number { font-size: 28px; font-weight: 900; color: #2563eb; letter-spacing: 2px; }
    .contact-phone-number a { color: #2563eb; }
    .contact-btn { display: block; width: 100%; padding: 14px; background: linear-gradient(135deg, #2563eb, #1b32aff0); color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; text-align: center; transition: transform 0.2s, box-shadow 0.2s; }
    .contact-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(47, 109, 255, 0.3); }
    .contact-info { margin-top: 20px; padding-top: 20px; border-top: 1px solid #f0f0f0; }
    .contact-info-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-size: 14px; color: #666; line-height: 1.6; }
    .contact-info-item svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; fill: #1A6DFF; }

    /* Related News */
    .related-item { display: block; padding: 16px 24px; border-bottom: 1px solid #f5f5f5; transition: background 0.2s; }
    .related-item:last-child { border-bottom: none; }
    .related-item:hover { background: #f8f9fa; }
    .related-item-title { font-size: 15px; color: #333; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .related-item-date { font-size: 13px; color: #999; margin-top: 6px; }

    /* FAQ Sidebar */
    .faq-item { padding: 16px 24px; border-bottom: 1px solid #f5f5f5; }
    .faq-item:last-child { border-bottom: none; }
    .faq-q { font-size: 14px; font-weight: 600; color: #333; line-height: 1.5; margin-bottom: 6px; }
    .faq-a { font-size: 13px; color: #666; line-height: 1.6; }

    /* ========== Footer ========== */
    .footer { background: #0D1B3E; color: #fff; padding: 60px 0 0; }
    .footer-wrap { max-width: 1600px; width: 90%; margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
    .footer-left { flex: 1; min-width: 280px; }
    .footer-logo { height: 40px; margin-bottom: 20px; filter: brightness(0) invert(1); }
    .footer-desc { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.8; margin-bottom: 20px; }
    .footer-phone { font-size: 28px; font-weight: 700; color: #2563eb; margin-bottom: 10px; }
    .footer-phone a { color: #2563eb; }
    .footer-address { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; }
    .footer-right { display: flex; gap: 60px; flex-wrap: wrap; }
    .footer-col-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
    .footer-col a { display: block; font-size: 14px; color: rgba(255,255,255,0.5); margin-bottom: 10px; transition: color 0.2s; }
    .footer-col a:hover { color: #fff; }
    .footer-bottom { margin-top: 40px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; font-size: 13px; color: rgba(255,255,255,0.3); }

    /* ========== Floating CTA ========== */
    .float-cta { position: fixed; right: 24px; bottom: 80px; z-index: 900; display: flex; flex-direction: column; gap: 12px; }
    .float-cta a { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 4px 15px rgba(0,0,0,0.15); transition: transform 0.2s; }
    .float-cta a:hover { transform: scale(1.1); }
    .float-cta .phone-btn { background: linear-gradient(135deg, #2563eb, #1b32aff0); }
    .float-cta .phone-btn svg { width: 24px; height: 24px; fill: #fff; }
    .float-cta .top-btn { background: rgba(26,109,255,0.9); }
    .float-cta .top-btn svg { width: 20px; height: 20px; fill: #fff; }

    /* ========== Animations ========== */
    .fade-in { opacity: 1; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .fade-in.visible { opacity: 1; transform: translateY(0); }

    /* ========== Responsive ========== */
    @media (max-width: 1024px) {
      .article-wrap { flex-direction: column; }
      .article-sidebar { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    }
    @media (max-width: 768px) {
      .nav-lists { display: none; }
      .menu-btn { display: block; }
      .banner { height: 300px; margin-top: 60px; }
      .banner-en { font-size: 28px; }
      .banner-title { font-size: 24px; letter-spacing: 2px; }
      .article-header { padding: 24px 20px 0; }
      .article-title { font-size: 22px; }
      .article-body { padding: 20px; }
      .article-body p { font-size: 15px; }
      .article-body h2 { font-size: 19px; }
      .article-share { padding: 16px 20px; }
      .article-tags { padding: 0 20px 24px; }
      .article-meta { gap: 12px; font-size: 13px; }
      .article-sidebar { grid-template-columns: 1fr; }
      .footer-wrap { flex-direction: column; }
      .footer-right { gap: 30px; }
      .float-cta { right: 16px; bottom: 60px; }
      .float-cta a { width: 46px; height: 46px; }
      .header-wrap { height: 60px; }
    }
	.nav-logo img {
	  height: 60px;
	  object-fit: contain;
	  /* filter: brightness(0) invert(1); */
	  transition: filter 0.3s;
	}
	.nav-bar.scrolled .nav-logo img {
	  filter: none;
	}
	@media (max-width: 768px) {
	  .nav-bar { height: 60px; }
	  .nav-hamburger { display: flex; }
	  .nav-menu {
	    display: none;
	    position: absolute;
	    top: 60px;
	    left: 0;
	    width: 100%;
	    background: rgba(255,255,255,0.95);
	    padding: 10px 0;
	    flex-direction: column;
	  }
	  .nav-menu.open { display: flex; }
	  .nav-menu a {
	    color: #333;
	    font-size: 16px;
	    padding: 0 20px;
	    line-height: 50px;
	    text-align: left;
	  }
	  .nav-logo img { height: 40px; filter: none; }
	  .nav-bar.scrolled .nav-logo img { filter: none; }
	}
	
 /* ========== List Banner ========== */
    .list-banner {
      position: relative;
      height: 260px;
      background: linear-gradient(135deg, #0D1B3E 0%, #1A6DFF 50%, #00D09C 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 80px;
      overflow: hidden;
    }
    .list-banner::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
      border-radius: 50%;
    }
    .list-banner::after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -5%;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(0,208,156,0.1) 0%, transparent 70%);
      border-radius: 50%;
    }
    .list-banner-content {
      position: relative;
      z-index: 1;
      text-align: center;
      color: #fff;
    }
    .list-banner-content h1 {
      font-size: 42px;
      font-weight: 900;
      letter-spacing: 6px;
      margin-bottom: 12px;
    }
    .list-banner-content p {
      font-size: 16px;
      color: rgba(255,255,255,0.7);
      letter-spacing: 2px;
    }
    .list-banner-content .banner-line {
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #FF6B35, #00D09C);
      margin: 16px auto 0;
      border-radius: 2px;
    }

    /* ========== Main Content Area ========== */
    .list-main-wrap {
      max-width: 1200px;
      width: 90%;
      margin: 0 auto 60px;
      display: flex;
      gap: 40px;
    }
    .list-main {
      flex: 1;
      min-width: 0;
    }

    /* ========== News Card ========== */
    .news-card {
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      transition: transform 0.3s, box-shadow 0.3s;
      display: flex;
      margin-bottom: 24px;
    }
    .news-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 36px rgba(26,109,255,0.12);
    }
    .news-card-img {
      width: 280px;
      min-height: 200px;
      flex-shrink: 0;
      overflow: hidden;
    }
    .news-card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s;
    }
    .news-card:hover .news-card-img img {
      transform: scale(1.06);
    }
    .news-card-body {
      flex: 1;
      padding: 24px 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .news-card-tag {
      display: inline-block;
      padding: 2px 12px;
      font-size: 12px;
      color: #1A6DFF;
      background: #f0f7ff;
      border-radius: 12px;
      margin-bottom: 12px;
      width: fit-content;
    }
    .news-card-title {
      font-size: 18px;
      font-weight: 600;
      color: #1a1a1a;
      line-height: 1.5;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      transition: color 0.2s;
    }
    .news-card:hover .news-card-title {
      color: #1A6DFF;
    }
    .news-card-desc {
      font-size: 14px;
      color: #999;
      line-height: 1.7;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 16px;
    }
    .news-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .news-card-date {
      font-size: 13px;
      color: #bbb;
    }
    .news-card-more {
      font-size: 13px;
      color: #1A6DFF;
      font-weight: 500;
      transition: color 0.2s;
    }
    .news-card-more:hover {
      color: #FF6B35;
    }

    /* ========== Pagination ========== */
    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      margin-top: 20px;
    }
    .page-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 40px;
      height: 40px;
      padding: 0 12px;
      font-size: 14px;
      color: #666;
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .page-btn:hover, .page-btn.active {
      background: #1A6DFF;
      color: #fff;
      border-color: #1A6DFF;
    }
    .page-btn.disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    /* ========== Responsive ========== */
    @media (max-width: 1024px) {
      .list-main-wrap {
        flex-direction: column;
      }
      .article-sidebar {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }
    }
    @media (max-width: 768px) {
      .list-banner {
        height: 180px;
        margin-top: 60px;
      }
      .list-banner-content h1 {
        font-size: 28px;
        letter-spacing: 3px;
      }
      .list-banner-content p {
        font-size: 14px;
      }
      .news-card {
        flex-direction: column;
      }
      .news-card-img {
        width: 100%;
        height: 180px;
      }
      .news-card-body {
        padding: 20px;
      }
      .news-card-title {
        font-size: 16px;
      }
      .article-sidebar {
        grid-template-columns: 1fr;
      }
    }