/* === Tablet (max-width: 1024px) === */
@media (max-width: 1024px) {
  :root {
    --font-size-4xl: 36px;
    --font-size-3xl: 28px;
    --font-size-2xl: 24px;
    --font-size-xl: 20px;
    --font-size-lg: 18px;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;
    --font-size-xxs: 11px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --container-padding: 16px;
  }

  /* Typography */
  h1 { font-size: 28px !important; margin-bottom: 16px !important; }
  h2 { font-size: 24px !important; margin-bottom: 12px !important; }
  h3 { font-size: 20px !important; margin-bottom: 10px !important; }
  h4 { font-size: 18px !important; }
  .section-title { font-size: 24px !important; margin-bottom: 12px !important; }
  .section-subtitle { font-size: 14px !important; }
  .banner-title { font-size: 24px !important; }
  .banner-subtitle { font-size: 14px !important; }

  /* Layout */
  .container, .container-fluid { padding: 0 16px !important; }
  .header-container { width: 100% !important; padding: 12px 16px !important; gap: 12px !important; }
  .section { padding: 48px 0 !important; }
  .section-header { margin-bottom: 32px !important; }

  /* Header */
  .site-branding .custom-logo { height: 28px !important; }
  .site-title { font-size: 18px !important; }
  .header-phone { font-size: 18px !important; }
  .header-phone img { width: 20px !important; height: 20px !important; }
  .btn-header { padding: 6px 16px !important; font-size: 14px !important; }

  /* Navigation */
  .nav-menu a { font-size: 16px !important; padding: 14px 16px !important; }
  .nav-menu .sub-menu a { font-size: 14px !important; padding: 12px 16px 12px 32px !important; }

  /* Banner */
  .section-banner { min-height: auto !important; padding: 48px 0 !important; }
  .banner-item { padding: 24px !important; }

  /* Products Grid */
  .products-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .product-card { padding: 20px !important; }

  /* Features */
  .feature-row, .feature-row-reverse { flex-direction: column !important; gap: 24px !important; }
  .feature-content, .feature-image { width: 100% !important; }

  /* Scenarios */
  .scenarios-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Posts / Articles */
  .posts-layout { flex-direction: column !important; }
  .posts-main { width: 100% !important; }
  .posts-sidebar { width: 100% !important; margin-top: 32px !important; }
  .posts-grid { grid-template-columns: 1fr !important; }
  .post-card { flex-direction: column !important; }
  .post-thumbnail { width: 100% !important; min-width: 100% !important; height: 180px !important; }

  /* Buttons */
  .btn { padding: 12px 24px !important; font-size: 14px !important; }
  .btn-large { padding: 14px 28px !important; font-size: 16px !important; }

  /* Footer */
  .footer-content { grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important; padding: 0 16px !important; }
  .footer-contact .phone-number { font-size: 20px !important; }
  .footer-section .footer-title { font-size: 14px !important; margin-bottom: 12px !important; }
  .footer-section .footer-menu a { font-size: 13px !important; }

  /* Related Posts */
  .related-posts { padding: 20px !important; margin-top: 32px !important; }
  .related-post-item { flex: 0 0 100% !important; }
  .related-post-thumb { height: 160px !important; }

  /* Use Case Cards */
  .use-case-card { max-width: 100% !important; min-height: auto !important; padding: 20px 16px !important; }

  /* Modal */
  .modal-dialog { margin: 12px !important; }
  .modal-content { padding: 16px !important; }

  /* === NEWS PAGE SPECIFIC === */
  .news-page { padding: 0 !important; }
  .news-header { padding: 32px 16px !important; }
  .news-header h1 { font-size: 24px !important; margin-bottom: 8px !important; }
  .news-content-section { padding: 24px 0 !important; }
  .news-layout { flex-direction: column !important; gap: 24px !important; }
  .news-main { width: 100% !important; }
  .news-sidebar { width: 100% !important; margin-top: 24px !important; }
  .news-categories-tabs { flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 20px !important; padding: 0 16px !important; }
  .news-categories-tabs a, .news-categories-tabs .tab-item { 
    font-size: 14px !important; 
    padding: 8px 16px !important; 
    white-space: nowrap !important;
  }
  .news-list { display: flex !important; flex-direction: column !important; gap: 16px !important; padding: 0 16px !important; }
  .news-item { 
    display: flex !important; 
    flex-direction: row !important; 
    gap: 12px !important; 
    padding: 12px !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  }
  .news-item-link { display: flex !important; flex-direction: row !important; width: 100% !important; gap: 12px !important; text-decoration: none !important; }
  .news-item-thumbnail { 
    width: 120px !important; 
    min-width: 120px !important; 
    height: 80px !important; 
    flex-shrink: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }
  .news-item-thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .news-item-content { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; min-width: 0 !important; }
  .news-item-title { 
    font-size: 15px !important; 
    line-height: 1.4 !important; 
    margin: 0 0 6px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: #1a1a1a !important;
  }
  .news-item-excerpt { 
    font-size: 13px !important; 
    line-height: 1.5 !important; 
    color: #666 !important;
    margin: 0 0 6px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .news-item-footer { margin-top: auto !important; }
  .news-item-meta { font-size: 12px !important; color: #999 !important; display: flex !important; gap: 12px !important; flex-wrap: wrap !important; }
  .news-item-meta span { white-space: nowrap !important; }
  .news-pagination { padding: 24px 16px !important; }
  .news-pagination a, .news-pagination span { padding: 8px 12px !important; font-size: 14px !important; }
}

/* === Small Mobile (max-width: 575px) === */
@media (max-width: 575px) {
  :root {
    --font-size-4xl: 28px;
    --font-size-3xl: 24px;
    --font-size-2xl: 20px;
    --font-size-xl: 18px;
    --spacing-2xl: 32px;
    --spacing-3xl: 48px;
  }

  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  .section-title { font-size: 20px !important; }
  .banner-title { font-size: 20px !important; }

  .site-branding .custom-logo { height: 24px !important; }
  .header-phone { font-size: 16px !important; }
  .header-phone img { width: 16px !important; height: 16px !important; }

  .section { padding: 32px 0 !important; }
  .product-card { padding: 16px !important; }

  .footer-content { grid-template-columns: 1fr !important; }
  .footer-contact, .footer-qrcode { display: none !important; }

  /* News Page Small Mobile */
  .news-header { padding: 24px 12px !important; }
  .news-header h1 { font-size: 20px !important; }
  .news-categories-tabs { padding: 0 12px !important; gap: 6px !important; }
  .news-categories-tabs a, .news-categories-tabs .tab-item { font-size: 13px !important; padding: 6px 12px !important; }
  .news-list { padding: 0 12px !important; gap: 12px !important; }
  .news-item { padding: 10px !important; gap: 10px !important; }
  .news-item-thumbnail { width: 100px !important; min-width: 100px !important; height: 70px !important; }
  .news-item-title { font-size: 14px !important; }
  .news-item-excerpt { font-size: 12px !important; -webkit-line-clamp: 1 !important; }
  .news-item-meta { font-size: 11px !important; gap: 8px !important; }
}

/* === Extra Small (max-width: 399px) === */
@media (max-width: 399px) {
  .header-phone span { display: none !important; }
  .header-phone img { display: block !important; }
  .site-branding .custom-logo { height: 22px !important; }

  /* News Page Extra Small */
  .news-item { flex-direction: column !important; }
  .news-item-link { flex-direction: column !important; }
  .news-item-thumbnail { width: 100% !important; min-width: 100% !important; height: 140px !important; }
  .news-item-content { width: 100% !important; }
  .news-item-title { font-size: 15px !important; -webkit-line-clamp: 2 !important; }
  .news-item-excerpt { font-size: 13px !important; -webkit-line-clamp: 2 !important; }
}

/* === Article Content Mobile === */
@media (max-width: 1024px) {
  .entry-content, .post-content, article .content {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }
  .entry-content img, .post-content img {
    max-width: 100% !important;
    height: auto !important;
  }
  .entry-content h2 { font-size: 20px !important; }
  .entry-content h3 { font-size: 18px !important; }
  .entry-content p { margin-bottom: 16px !important; }
}