/* ==================== Tablet (768px - 1024px) ==================== */
@media (max-width: 1024px) {
    .container { max-width: 960px; }
    
    /* Navigation */
    .nav > ul > li > a { padding: 24px 10px; font-size: 14px; }
    .logo h1 { font-size: 18px; }
    .logo h1 span { font-size: 15px; }
    
    /* Grids */
    .features { grid-template-columns: repeat(2, 1fr); }
    .company-grid { grid-template-columns: repeat(2, 1fr); }
    .company-grid .company-card:last-child { grid-column: span 2; max-width: 400px; justify-self: center; }
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .honor-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
    .footer-about { grid-column: span 3; }
    
    /* About */
    .about-content { grid-template-columns: 1fr; }
    .about-image { height: 300px; }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
    
    /* Product Detail */
    .product-detail { grid-template-columns: 1fr; }
    .product-gallery { position: static; }
    
    /* Content with Sidebar */
    .content-with-sidebar { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    
    /* Contact */
    .contact-grid { grid-template-columns: 1fr; }
    
    /* Hero */
    .hero-banner { height: 450px; }
    .hero-content h2 { font-size: 34px; }
}

/* ==================== Mobile (< 768px) ==================== */
@media (max-width: 767px) {
    .container { max-width: 100%; }
    
    /* Top Bar */
    .top-bar { display: none; }
    
    /* Header */
    .header .container { height: 56px; }
    .logo h1 { font-size: 16px; }
    .logo h1 span { font-size: 13px; }
    
    /* Mobile Navigation */
    .menu-toggle { display: flex; }
    .nav {
        position: fixed;
        top: 0;
        right: -280px;
        width: 280px;
        height: 100%;
        background: #1a1a2e;
        z-index: 9999;
        padding: 60px 0 20px;
        overflow-y: auto;
        transition: right .3s ease;
        box-shadow: -4px 0 20px rgba(0,0,0,.3);
    }
    .nav.active { right: 0; }
    .nav > ul { flex-direction: column; }
    .nav > ul > li > a {
        padding: 14px 24px;
        font-size: 15px;
        color: #e0e0e0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .nav > ul > li > a::after { display: none; }
    .nav > ul > li:hover > a,
    .nav > ul > li.active > a { color: #fff; background: rgba(255,255,255,.05); }
    
    /* Mobile Dropdown */
    .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: rgba(255,255,255,.04);
        display: none;
    }
    .nav > ul > li.has-dropdown.open .dropdown { display: block; }
    .dropdown li a { 
        padding: 12px 40px; 
        color: #bbb;
    }
    .dropdown li a:hover { color: #fff; background: rgba(255,255,255,.06); }
    
    /* Hero Banner */
    .hero-banner { height: 380px; }
    .hero-content h2 { font-size: 26px; letter-spacing: 1px; }
    .hero-content p { font-size: 14px; }
    .hero-btns { flex-direction: column; align-items: center; }
    .btn { padding: 10px 24px; font-size: 14px; }
    .slider-arrow { width: 36px; height: 36px; font-size: 18px; }
    .slider-prev { left: 10px; }
    .slider-next { right: 10px; }
    
    /* Sections */
    .section { padding: 50px 0; }
    .section-header h2 { font-size: 24px; }
    .section-header { margin-bottom: 30px; }
    
    /* Grids */
    .features { grid-template-columns: 1fr; gap: 16px; }
    .feature-card { padding: 28px 20px; }
    
    .company-grid { grid-template-columns: 1fr; gap: 20px; }
    .company-grid .company-card:last-child { grid-column: span 1; max-width: none; }
    .company-card-image { height: 160px; }
    
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product-card-image { height: 160px; }
    .product-card-body { padding: 12px; }
    .product-card-body h4 { font-size: 14px; }
    
    .news-grid { grid-template-columns: 1fr; gap: 16px; }
    .news-card-image { height: 160px; }
    .cases-grid { grid-template-columns: 1fr; gap: 16px; }
    .case-card-image { height: 180px; }
    .honor-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .factory-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .factory-item img { height: 150px; }
    .coop-grid { grid-template-columns: 1fr; gap: 20px; }
    
    /* Page Banner */
    .page-banner { padding: 40px 0; }
    .page-banner h1 { font-size: 24px; }
    
    /* About */
    .about-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .stat-number { font-size: 28px; }
    .stat-item { padding: 20px 12px; }
    
    /* Detail */
    .detail-content h2 { font-size: 22px; }
    
    /* Contact Form */
    .contact-form { padding: 24px; }
    
    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
    .footer-about { grid-column: span 1; }
    .footer-col { text-align: center; }
    .footer-col h4 { display: block; text-align: center; }
    .footer-col ul li a:hover { padding-left: 0; }
    .qrcode-placeholder { margin: 0 auto 10px; }
    .footer-contact p { justify-content: center; display: flex; }
    
    /* Mobile Float */
    .mobile-float { display: flex; }
    body { padding-bottom: 50px; }
    
    /* Back to Top */
    .back-to-top { bottom: 70px; right: 16px; width: 38px; height: 38px; font-size: 16px; }
    
    /* Filter */
    .filter-bar { gap: 8px; padding: 12px; }
    .filter-bar a { padding: 4px 12px; font-size: 12px; }
    
    /* Tabs */
    .tabs { overflow-x: auto; white-space: nowrap; }
    .tabs .tab { padding: 10px 16px; font-size: 13px; }
    
    /* Timeline */
    .timeline::before { left: 20px; }
    .timeline-item { flex-direction: column !important; padding-left: 50px; }
    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content { text-align: left; margin-left: 0; margin-right: 0; }
    .timeline-dot { left: 20px; }
}

/* ==================== Small Mobile (< 480px) ==================== */
@media (max-width: 480px) {
    .hero-banner { height: 320px; }
    .hero-content h2 { font-size: 22px; }
    .product-grid { grid-template-columns: 1fr; }
    .honor-grid { grid-template-columns: 1fr; }
    .factory-grid { grid-template-columns: 1fr; }
    .about-stats { grid-template-columns: 1fr 1fr; }
    .footer-bottom p { font-size: 12px; }
}