/* Top Info Bar - Mobile First */
    .top-info-bar{background:linear-gradient(135deg,#15803d,#16a34a);color:#fff;padding:0.5rem 2%;font-size:0.75rem;overflow:hidden}
    .top-info-content{width:100%;display:flex;flex-direction:column;gap:0.3rem;align-items:center;text-align:center}

    /* Mobile: Show all items in vertical layout */
    .info-item{display:flex;align-items:center;justify-content:center;gap:0.3rem;flex-wrap:wrap}
    .info-item span{font-size:0.65rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
    .tip-icon{display:inline-block;margin-right:0.15rem;opacity:0.98;font-size:0.75rem}
    .info-item.tip-item span{font-size:0.65rem}
    .info-quick-news{font-weight:600;font-size:0.65rem;padding:0.25rem 0.5rem;background:rgba(255,255,255,0.15);border-radius:6px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:all 0.28s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92vw}
    .info-slogan{font-weight:700;font-size:0.63rem;text-align:center;line-height:1.2;white-space:normal}

    /* Tablet layout (iPad, Nest Hub, Surface) - Show info bar with vertical layout */
    @media (min-width:768px) and (max-width:1279px){
      .top-info-bar{padding:0.5rem 2%;font-size:0.75rem;display:block !important}
      .top-info-content{flex-direction:column;align-items:center;justify-content:center;gap:0.3rem}
      .info-item{justify-content:center;flex-wrap:wrap}
      .info-item span{font-size:0.7rem}
      .tip-icon{font-size:0.85rem;margin-right:0.2rem}
      .info-item.tip-item span{font-size:0.7rem}
      .info-quick-news{font-size:0.75rem;padding:0.3rem 0.75rem;max-width:90vw}
      .info-slogan{font-size:0.8rem;text-align:center;white-space:normal}
    }

    /* Desktop layout - show all items horizontally */
    @media (min-width:1280px){
      .top-info-bar{padding:0.75rem 3%;font-size:0.9rem}
      .top-info-content{flex-direction:row;align-items:center;justify-content:space-between;gap:1.5rem}
      .info-item{justify-content:flex-start;flex-wrap:nowrap}
      .info-item span{font-size:0.9rem}
      .tip-icon{font-size:1rem;margin-right:0.3rem}
      .info-item.tip-item span{font-size:0.9rem}
      .info-quick-news{font-size:0.95rem;padding:0.4rem 1rem;max-width:none}
      .info-slogan{font-size:1rem;text-align:right;whitespace:nowrap}
    }

    /* Hero Banner */
  .hero-banner{position:relative;width:100%;height:500px;overflow:hidden;background:#1a4d2e}
    .swiper-hero{width:100%;height:100%}
    .hero-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,rgba(0,0,0,0.4),rgba(0,0,0,0.2));z-index:1;pointer-events:none}
    .hero-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;text-align:center;width:90%;max-width:800px}
    .hero-title{font-size:3.5rem;font-weight:800;color:#fff;margin-bottom:1rem;text-shadow:2px 2px 8px rgba(0,0,0,0.5);line-height:1.2}
    .hero-subtitle{font-size:1.2rem;color:#f0f0f0;margin-bottom:1.5rem;text-shadow:1px 1px 4px rgba(0,0,0,0.5);line-height:1.6}
    .hero-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:1rem 2rem;background:#16a34a;color:#fff;font-size:1.1rem;font-weight:700;border:none;border-radius:10px;cursor:pointer;transition:all 0.3s;box-shadow:0 4px 12px rgba(0,0,0,0.3)}
    .hero-btn:hover{background:#15803d;transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.4)}

    /* Category Menu Bar */
  .category-bar{width:100%;background:#f0fdf4;border-top:1px solid rgba(0,0,0,0.06);border-bottom:1px solid rgba(0,0,0,0.04);padding:1rem 0}
  .category-bar-inner{width:100%;padding:0 3%;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center}
    .cat-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;min-width:140px;padding:0.75rem 1.5rem;background:#fff;border:2px solid #e5e7eb;border-radius:12px;cursor:pointer;font-size:0.95rem;font-weight:600;color:#1f2937;transition:all 0.2s ease;box-shadow:0 2px 4px rgba(0,0,0,0.08);white-space:nowrap}
    .cat-btn:hover{background:#dcfce7;border-color:#16a34a;color:#166534;transform:translateY(-2px);box-shadow:0 4px 12px rgba(22,163,74,0.15)}
    .cat-btn.active{background:#16a34a;border-color:#15803d;color:#fff;box-shadow:0 4px 12px rgba(22,163,74,0.2)}

    .process-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
    .process-title{font-size:1.1rem;font-weight:700;color:#15803d;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem}
    .process-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
    .process-step{position:relative;border-radius:8px;overflow:hidden;cursor:pointer;transition:all 0.3s}
    .process-step:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
    .process-step img{width:100%;height:100px;object-fit:cover}
    .process-step-label{position:absolute;bottom:0;left:0;right:0;background:rgba(21,128,61,0.9);color:#fff;font-size:0.75rem;font-weight:600;padding:0.4rem;text-align:center}
    .newsletter-card{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
    .newsletter-title{font-size:1rem;font-weight:700;color:#15803d;margin-bottom:1rem}
    .newsletter-input{width:100%;padding:0.75rem;border:2px solid #e5e7eb;border-radius:8px;margin-bottom:0.75rem;font-size:0.9rem}
    .newsletter-btn{width:100%;padding:0.75rem;background:#16a34a;color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all 0.2s}
    .newsletter-btn:hover{background:#15803d;transform:translateY(-2px)}

  /* Main Layout Container - 12 Column Grid */
    .news-list-view,.news-detail-view{transition:opacity 0.3s ease-in-out}
    .news-list-view.hidden,.news-detail-view.hidden{display:none;opacity:0}
    .news-list-view.visible,.news-detail-view.visible{display:block;opacity:1}

  /* News Highlight */
  .news-highlight{display:flex;flex-direction:column;gap:1.25rem}
  .news-highlight-title{font-size:1.5rem;font-weight:700;color:#166534;display:flex;align-items:center;gap:0.6rem}
  .news-highlight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
  .news-highlight-card{background:#fff;border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,0.08);overflow:hidden;cursor:pointer;transition:transform 0.25s ease,box-shadow 0.25s ease;display:flex;flex-direction:column}
  .news-highlight-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(22,101,52,0.18)}
  .news-highlight-thumb{width:100%;height:170px;overflow:hidden}
  .news-highlight-thumb img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 0.3s ease}
  .news-highlight-card:hover .news-highlight-thumb img{transform:scale(1.05)}
  .news-highlight-body{padding:1.25rem;display:flex;flex-direction:column;gap:0.75rem;flex:1}
  .news-highlight-card h3{font-size:1.05rem;font-weight:700;color:#166534;line-height:1.5}
  .news-highlight-excerpt{font-size:0.9rem;color:#5b6475;line-height:1.6;flex:1}
  .news-highlight-meta{display:flex;flex-wrap:wrap;gap:0.75rem;font-size:0.82rem;color:#6b7a6d}

  /* News List */
  .news-list-title{font-size:1.75rem;font-weight:700;color:#15803d;margin-bottom:1.5rem}
    .news-list-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
    .news-list-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:all 0.3s;cursor:pointer;display:grid;grid-template-columns:200px 1fr;gap:1rem}
    .news-list-card:hover{transform:translateY(-4px);box-shadow:0 8px 16px rgba(0,0,0,0.15)}
  .news-list-card-img{width:100%;height:150px;object-fit:cover}
  .news-list-card-content{padding:1.5rem 1.5rem 1.5rem 0}
    .news-list-card-title{font-size:1.2rem;font-weight:700;color:#15803d;margin-bottom:0.75rem;line-height:1.4}
    .news-list-card-excerpt{font-size:0.95rem;color:#6b7280;line-height:1.6;margin-bottom:0.75rem}
    .news-list-card-meta{display:flex;gap:1rem;font-size:0.85rem;color:#9ca3af}

  /* Tip Sidebar - 2 columns */
  .tip-card{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.1);min-height:520px}
    .tip-title{font-size:1.5rem;font-weight:700;color:#15803d;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem}
    .tip-content{font-size:0.95rem;color:#374151;line-height:1.7;padding:1rem;background:#fff;border-radius:8px;margin-bottom:1rem;min-height:380px;display:flex;align-items:center;justify-content:center}
    .tip-nav{display:flex;justify-content:space-between;gap:0.5rem}
    .tip-nav-btn{padding:0.5rem 1rem;background:#fff;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;font-weight:600;transition:all 0.2s;color:#374151}
    .tip-nav-btn:hover{background:#dcfce7;border-color:#16a34a;color:#16a34a}

  /* Results Sidebar - 2 columns */
  .results-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
    .results-title{font-size:1.5rem;font-weight:700;color:#15803d;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem}
    .results-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;position:relative;min-height:240px}
    .result-img{width:100%;height:110px;object-fit:cover;border-radius:8px;transition:all 0.3s ease;position:relative}
    .result-img:hover{transform:scale(1.05)}
    .result-img.fade-out{opacity:0}
    .result-img.fade-in{opacity:1}
  .contact-card{background:#f0fdf4;border-radius:12px;padding:1rem;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
  .contact-title{font-size:1.1rem;font-weight:700;color:#15803d;margin-bottom:1rem}
  .contact-btn{width:100%;padding:0.75rem;margin-bottom:0.75rem;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:0.5rem}
  .contact-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
  .contact-btn:last-child{margin-bottom:0}
  .related-card{background:#fff;border-radius:12px;border-left:3px solid #dcfce7;padding:1.5rem;padding-left:1.25rem;box-shadow:0 2px 8px rgba(0,0,0,0.08);display:flex;flex-direction:column;gap:1rem}
  .related-title{font-size:1.5rem;font-weight:700;color:#15803d;display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem}
  .related-list{display:flex;flex-direction:column;gap:0.75rem}
  .related-item{padding:0.75rem;border-bottom:1px solid #e5e7eb;cursor:pointer;transition:all 0.3s ease;border-radius:8px;background:#fff}
  .related-item:last-child{border-bottom:none}
  .related-item:hover{color:#15803d;transform:translateX(4px);background:#f0fdf4;box-shadow:0 2px 8px rgba(22,101,52,0.1)}
  .related-item:active{background:#dcfce7;transform:translateX(2px)}
  .related-item.active{background:#dcfce7;border-left:3px solid #16a34a;font-weight:700;color:#15803d}
  .related-item.read{background:#f9fafb;color:#6b7280}
  .related-item.read .related-item-title{color:#9ca3af}
  .related-item-title{font-size:0.95rem;font-weight:600;line-height:1.5}
  .related-item-date{font-size:0.82rem;color:#9ca3af;margin-top:0.35rem}

  /* Share Gallery Hover Effect */
  .share-gallery img{transition:transform 0.3s ease;border-radius:8px;overflow:hidden}
  .share-gallery img:hover{transform:scale(1.05)}

    /* News Card (for old sections - kept for compatibility) */
    .news-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:all 0.3s;cursor:pointer;display:flex;flex-direction:column}
    .news-card:hover{transform:translateY(-4px);box-shadow:0 8px 16px rgba(0,0,0,0.15)}
    .news-card-img{width:100%;height:200px;object-fit:cover}
    .news-card-content{padding:1.5rem;flex:1;display:flex;flex-direction:column}
    .news-card-title{font-size:1.1rem;font-weight:700;color:#15803d;margin-bottom:0.75rem;line-height:1.4}
    .news-card-excerpt{font-size:0.9rem;color:#6b7280;line-height:1.6;flex:1}
    .news-card-meta{display:flex;gap:1rem;font-size:0.85rem;color:#9ca3af;margin-top:0.75rem}

    /* Post Detail View */
    .post-detail{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
    .back-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;background:#15803d;color:#fff;border:none;border-radius:10px;cursor:pointer;font-weight:600;transition:all 0.2s;margin-bottom:1.5rem}
    .back-btn:hover{background:#166534;transform:translateX(-4px)}
    .post-detail-title{font-size:2rem;font-weight:800;color:#15803d;margin-bottom:1rem}
    .post-detail-meta{display:flex;gap:1.5rem;font-size:0.9rem;color:#9ca3af;padding-bottom:1rem;border-bottom:2px solid #e5e7eb;margin-bottom:2rem}
    .post-detail-content{line-height:1.8;color:#374151;font-size:1.05rem}
    .post-detail-content h2{font-size:1.5rem;font-weight:700;color:#15803d;margin:2rem 0 1rem}
    .post-detail-content p{margin-bottom:1rem}
    .post-detail-content ul{list-style:disc;margin-left:2rem;margin-bottom:1rem}
    .post-detail-content img{max-width:100%;height:auto;border-radius:8px;margin:1rem 0}
  .post-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:2rem}
  .post-gallery img{width:100%;height:180px;object-fit:cover;border-radius:10px;box-shadow:0 8px 18px rgba(0,0,0,0.12)}

    /* Interaction Buttons */
    .interaction-bar{display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:center;align-items:center;margin-top:2rem;padding-top:2rem;border-top:2px solid #e5e7eb}
    .interaction-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;border-radius:10px;border:2px solid #e5e7eb;background:#fff;cursor:pointer;font-weight:600;transition:all 0.2s;color:#374151}
    .interaction-btn:hover{background:#f0fdf4;border-color:#16a34a;color:#16a34a;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
    .interaction-btn.active{background:#16a34a;border-color:#15803d;color:#fff}

    /* Share Group - Responsive */
    .share-group{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;justify-content:center;width:100%;margin-top:0.5rem}
    .share-label{color:#dc2626;font-weight:bold;font-size:1rem;margin-right:0.25rem}
    .share-btn{border-radius:50%;width:48px;height:48px;padding:0;justify-content:center;min-width:48px;flex-shrink:0}

    @media (min-width:640px){
      .interaction-bar{flex-wrap:nowrap;justify-content:flex-start}
      .share-group{width:auto;margin-top:0;margin-left:0.5rem}
      .share-label{font-size:1.125rem}
    }

    /* Fade transitions */
    #quickNews{transition:opacity 0.22s ease-in-out,transform 0.22s ease-in-out}
    #quickNews.quick-fade-out{opacity:0;transform:translateY(-3px)}
    #quickNews.quick-fade-in{opacity:1;transform:translateY(0)}

    /* Search Results */
    .search-results{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 2px 8px rgba(0,0,0,0.1);margin-bottom:2rem}
    .search-header{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #e5e7eb}
    .search-title{font-size:1.5rem;font-weight:700;color:#15803d;margin-bottom:0.5rem}
    .search-count{font-size:0.95rem;color:#6b7280}
    .search-keyword{font-weight:600;color:#16a34a}
    .search-clear-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;background:#f3f4f6;color:#374151;border:none;border-radius:8px;cursor:pointer;font-size:0.9rem;font-weight:600;transition:all 0.2s;margin-top:0.75rem}
    .search-clear-btn:hover{background:#e5e7eb;transform:translateX(-2px)}
    .no-results{text-align:center;padding:3rem 1rem;color:#6b7280}
    .no-results-icon{font-size:4rem;margin-bottom:1rem}
    .no-results-text{font-size:1.1rem;font-weight:600;margin-bottom:0.5rem}
    .no-results-hint{font-size:0.9rem;color:#9ca3af}

    /* Responsive */
    @media (max-width:1200px){
        .news-highlight-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
        .news-list-card{grid-template-columns:1fr}
        .news-list-card-img{height:200px}
    }
    @media (max-width:768px){
      .top-info-content{grid-template-columns:1fr;gap:0.5rem}
      .hero-banner{height:400px}
      .hero-title{font-size:2rem}
      .hero-subtitle{font-size:1rem}
      .category-bar-inner{padding:0 3%;gap:0.6rem}
      .cat-btn{min-width:120px;padding:0.6rem 1rem;font-size:0.88rem}
      .news-list-card{grid-template-columns:1fr}
      .news-list-card-img{height:180px}
      .news-list-card-content{padding:1.5rem}
      .post-detail{padding:1.5rem}
      .post-detail-title{font-size:1.5rem}
        .related-card{margin-top:0}
        .post-gallery{grid-template-columns:repeat(2,1fr)}
    }
      @media (max-width:500px){
        .post-gallery{grid-template-columns:1fr}
      }