/* Delingoo: phone layout + menu jumps (Toàn, 21/10). Added to every page by tools/mobile/mobile_fix.py.
   The design pages carry inline styles, so site-mobile.js tags elements with m-* classes and these rules win with !important. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: calc(var(--dlg-head, 0px) + 12px); }

/* equipment category tiles (thiet-bi.html): same 4:3 white box for every machine */
.tb-cat-img { aspect-ratio: 4 / 3; background: #FFFFFF; }
.tb-cat-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* the page runtime rewrites inline styles with spaces ("0px", "rgba(0, 0, 0, …)"), so match both spellings */
/* text on dark photo banners (du-an-va-khach-hang.html): the restyle had left it dark on dark */
section > div[style*="rgba(0,0,0,0.55)"] + div h1,
section > div[style*="rgba(0, 0, 0, 0.55)"] + div h1 { color: #FFFFFF !important; }
section > div[style*="rgba(0,0,0,0.55)"] + div p,
section > div[style*="rgba(0, 0, 0, 0.55)"] + div p { color: rgba(255,255,255,0.88) !important; }
section > div[style*="rgba(0,0,0,0.55)"] + div > div,
section > div[style*="rgba(0, 0, 0, 0.55)"] + div > div { color: rgba(255,255,255,0.75) !important; }

/* the current page in the menu */
header nav a.m-here { font-weight: 700 !important; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }

@media (max-width: 767px) {
  /* multi-column design grids stack on phones (auto-fit grids and label/value rows already fit) */
  [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]):not([style*="1fr 2fr"]):not([style*="max-height"]):not(footer *):not(.dlg-grid2) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }
  /* product gallery thumbnails: one row of four under the main photo */
  section[style*="0.85fr 0.28fr 1fr"] > div[style*="repeat(2, 1fr)"][style*="max-height"]:not(footer *) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; }
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; gap: 32px 20px !important; }
  footer [style*="grid-template-columns"] > :first-child,
  footer [style*="grid-template-columns"] > :last-child { grid-column: 1 / -1; }

  .m-pt { padding-top: 56px !important; }
  .m-pb { padding-bottom: 56px !important; }
  .m-mt { margin-top: 56px !important; }
  .m-pad { padding: 24px !important; }
  .m-col { flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important; }
  .m-col > * { max-width: 100% !important; flex: 0 0 auto !important; }
  .m-col > :not(.m-small) { width: auto !important; }
  .m-col > .m-small { align-self: flex-start !important; }
  .m-wrap { flex-wrap: wrap !important; }
  .m-h { height: 260px !important; }
  .m-btn { display: inline-block !important; max-width: 100%; white-space: normal !important; text-align: center; box-sizing: border-box; }
  .m-left { margin-left: 0 !important; margin-right: 0 !important; }

  .tb-cat-img { aspect-ratio: 4 / 3.1; }
  section#khach-hang[style^="padding: 0 "], section#khach-hang[style^="padding: 0px "] { padding-top: 40px !important; }

  /* product and machine lists stay two-up (polish.py marks them) */
  .dlg-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .dlg-grid2 > * { min-width: 0; padding: 14px !important; }
  .dlg-grid2 > a[style*="flex"], .dlg-grid2 > * > a[style*="flex"] { flex-direction: column !important; gap: 10px !important; text-align: center; }
  .dlg-grid2 img { max-width: 100%; }
  .dlg-grid2 [style*="height: 220px"] { height: 140px !important; }
  .dlg-grid2 [style*="padding: 22px"], .dlg-grid2 [style*="padding: 20px"] { padding: 12px 4px 4px !important; }
  .dlg-grid2 h3, .dlg-grid2 [style*="font-size: 17px"] { font-size: 14px !important; }
}