/* ============================================================
   DONG GIAO — MOBILE POLISH
   Site-wide responsive refinements. Loaded after theme style +
   any inline <style> blocks so the !important overrides win.
   ============================================================ */

/* 1. Remove sticky :hover state on touch devices so cards don't
      stay highlighted after being tapped on mobile. */
@media (hover: none) {
  .dg-service-card:hover,
  .dg-audience-card:hover,
  .dg-factory-card:hover,
  .dg-post-card:hover,
  .dg-resource-card:hover,
  .dg-btn-primary:hover,
  .dg-btn-outline:hover {
    transform: none !important;
    box-shadow: initial !important;
  }
}

/* 2. Global mobile (≤768px) layout + typography scale ============ */
@media (max-width: 768px) {

  /* --- Container & body --- */
  .dg-container { padding-left: 16px !important; padding-right: 16px !important; }
  body { font-size: 15.5px; line-height: 1.6; }

  /* --- Typography scale --- */
  h1, .dg-hero h1, .dg-page-hero h1, .dg-single-hero h1 { font-size: 26px !important; line-height: 1.25 !important; }
  h2, .dg-section-title { font-size: 22px !important; line-height: 1.3 !important; }
  h3 { font-size: 17px !important; line-height: 1.35 !important; }
  .dg-section-subtitle, .dg-hero-desc { font-size: 14.5px !important; line-height: 1.55 !important; }
  .dg-section-overline { font-size: 11.5px !important; letter-spacing: 1px !important; }

  /* --- Section spacing --- */
  .dg-section, .dg-section-alt { padding: 40px 0 !important; }
  .dg-section-header { margin-bottom: 24px !important; }
  .dg-hero { padding: 32px 0 40px !important; }
  .dg-page-hero, .dg-single-hero, .dg-archive-hero { padding: 40px 0 32px !important; }
  .dg-cta-section { padding: 48px 0 !important; }

  /* --- Grid layout: force full-width & kill desktop spans --- */
  .dg-services-grid,
  .dg-factories-grid,
  .dg-audience-grid,
  .dg-numbers-grid,
  .dg-stat-grid,
  .dg-timeline,
  .dg-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .dg-services-grid > *,
  .dg-factories-grid > *,
  .dg-audience-grid > *,
  .dg-footer-grid > * {
    grid-column: auto !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* Cards: tighter padding, equal feel, no stretching */
  .dg-service-card,
  .dg-audience-card,
  .dg-factory-card,
  .dg-post-card,
  .dg-resource-card {
    padding: 20px 18px !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: start !important;
  }

  .dg-service-icon,
  .dg-audience-emoji { margin-bottom: 12px !important; }

  /* --- Hero block --- */
  .dg-hero .dg-container { grid-template-columns: 1fr !important; gap: 20px !important; text-align: center; }
  .dg-hero-content { max-width: 100% !important; }
  .dg-hero-actions { justify-content: center !important; flex-wrap: wrap; gap: 10px !important; }
  .dg-hero-stats { justify-content: center !important; gap: 18px !important; flex-wrap: wrap; }
  .dg-hero-stats .dg-stat-item { flex: 1 1 calc(50% - 12px); text-align: center; }
  .dg-hero-badge { margin: 0 auto 14px !important; display: inline-block; }

  /* --- Buttons: thumb-friendly --- */
  .dg-btn-primary,
  .dg-btn-outline,
  .dg-btn-hero-primary,
  .dg-btn-hero-secondary,
  .dg-btn-cta-gold,
  .dg-btn-cta-outline {
    min-height: 48px;
    padding: 12px 22px !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1.2 !important;
  }
  .dg-hero-actions .dg-btn-hero-primary,
  .dg-hero-actions .dg-btn-hero-secondary,
  .dg-cta-actions .dg-btn-cta-gold,
  .dg-cta-actions .dg-btn-cta-outline { flex: 1 1 100%; }

  /* --- Images --- */
  img { max-width: 100%; height: auto; }
  .dg-factory-img { height: 160px !important; }

  /* --- Top bar: compact --- */
  .dg-top-bar { padding: 6px 0 !important; font-size: 11.5px !important; }
  .dg-contact-info { gap: 10px !important; flex-wrap: wrap; justify-content: center; }
  .dg-contact-info a, .dg-contact-info span { font-size: 11.5px !important; }

  /* --- Header: keep logo + hamburger on one row --- */
  .dg-header .dg-container { height: 64px !important; gap: 12px !important; }
  .dg-header .dg-logo-img { height: 30px !important; max-height: 30px !important; }
  .dg-mobile-menu { top: 64px !important; padding: 12px 16px !important; }
  .dg-mobile-menu li { padding: 10px 0 !important; }
  .dg-mobile-menu a { font-size: 15px !important; }

  /* Body scroll lock when menu open */
  body.dg-menu-open { overflow: hidden; }

  /* --- Trust bar --- */
  .dg-trust-bar { padding: 14px 0 !important; }
  .dg-trust-bar .dg-container { gap: 16px !important; }
  .dg-trust-item { font-size: 11.5px !important; }

  /* --- Numbers bar --- */
  .dg-numbers-grid { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  .dg-number-value { font-size: 26px !important; }
  .dg-number-label { font-size: 12px !important; }

  /* --- FAQ --- */
  .dg-faq-question { font-size: 15px !important; padding: 14px 0 !important; gap: 12px; }
  .dg-faq-toggle { width: 24px !important; height: 24px !important; font-size: 14px !important; flex-shrink: 0; }
  .dg-faq-answer { font-size: 14.5px !important; line-height: 1.6 !important; }

  /* --- Timeline / process --- */
  .dg-timeline { gap: 20px !important; }
  .dg-timeline::before { display: none !important; }
  .dg-timeline-step { padding: 0 !important; text-align: center; }
  .dg-step-number { width: 52px !important; height: 52px !important; font-size: 18px !important; }

  /* --- Footer --- */
  .dg-footer { padding: 32px 0 16px !important; }
  .dg-footer-grid { gap: 24px !important; }
  .dg-footer h4 { font-size: 13px !important; margin-bottom: 10px !important; }
  .dg-footer ul li a, .dg-company-info { font-size: 13.5px !important; }
  .dg-footer-bottom { font-size: 12px !important; padding-top: 16px !important; }

  /* --- Blog post body --- */
  .entry-content { font-size: 16px !important; line-height: 1.7 !important; }
  .entry-content h2 { font-size: 22px !important; margin-top: 1.4em !important; }
  .entry-content h3 { font-size: 18px !important; }
  .entry-content img, .entry-content iframe { border-radius: 8px; margin: 1em 0; }
  .entry-content table { display: block; overflow-x: auto; width: 100%; }
  .entry-content pre { overflow-x: auto; }

  /* --- Distributor hero (tim-nha-phan-phoi) --- */
  .dg-dist-hero { padding: 40px 16px !important; border-radius: 10px !important; }
  .dg-dist-hero h1 { font-size: 22px !important; }
  .dg-dist-hero p { font-size: 14.5px !important; }

  /* --- CTA inline --- */
  .dg-cta-inline { padding: 20px !important; border-radius: 10px; }
  .dg-cta-inline h3 { font-size: 17px !important; }

  /* --- Page hero actions center on mobile --- */
  .dg-cta-actions { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
}

/* 3. Very small phones (≤480px) ================================= */
@media (max-width: 480px) {
  h1, .dg-hero h1, .dg-page-hero h1 { font-size: 23px !important; }
  h2, .dg-section-title { font-size: 20px !important; }
  .dg-number-value { font-size: 22px !important; }
  .dg-service-icon, .dg-step-number { width: 44px !important; height: 44px !important; font-size: 18px !important; }
  .dg-container { padding-left: 14px !important; padding-right: 14px !important; }
  .dg-hero-stats .dg-stat-item { flex: 1 1 100%; }
}

/* 4. Prevent horizontal scroll site-wide ======================== */
html, body { overflow-x: hidden; }