/* =====================================================================
   MOBILE.CSS — phone-only overrides (<=767px)

   Kept in its own file, separate from styles.css, so mobile tweaks never
   touch the desktop rules that are already approved. This file ONLY
   contains an @media (max-width: 767px) block — nothing here applies
   above 767px. Desktop/tablet (>=768px) is untouched and still driven
   entirely by styles.css (the 1440px canvas scaled to fit).

   Source of truth: Figma "iPhone 16 - 1" frame (node 2394:2494) +
   Figma Inspect measurements the user provided on 2026-08-14 (margins,
   card insets, gaps). See BUILD_LOG.md before editing this file, and
   log any change there after.

   Layout convention on this canvas (393px reference width):
   - Plain text blocks (headings, paragraphs with no visible background)
     sit inside a `.abs` that gets 40px side PADDING via the generic
     `div.abs` rule below — content becomes ~312px wide, matching Figma.
   - "Card" elements that have their OWN visible background (about-card,
     certs-box, cta-form) must NOT use that padding (it would just make
     their background full-bleed with inset text, which is wrong) —
     they get 40px side MARGIN instead, so the background itself is the
     narrow ~312px card, with its own internal padding on top of that.
   - Full-bleed elements (hero photo, map image, CTA navy background,
     footer photo) get zero side inset — they span the full 100% width.
   ===================================================================== */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  #page-outer { height: auto !important; overflow-x: hidden; }
  #stage {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .abs {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important; top: auto !important;
  }
  .rect:not(.cta-navy):not(.certs-navy-bg) { display: none; }
  .rect.cta-navy {
    position: static !important;
    width: 100% !important; height: auto !important;
    left: auto !important; top: auto !important;
  }

  .hdr-burger { display: flex; }
  .mobile-menu { display: flex; }

  /* header — pinned to the top regardless of DOM position, sticky while scrolling */
  .hdr {
    order: -1;
    position: sticky !important;
    top: 0;
    width: 100% !important; height: 60px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
    z-index: 40;
  }
  .hdr-logo { display: none; }
  .hdr-logo-mobile { display: block; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 28px; height: 32px; object-fit: contain; }
  .hdr-nav, .hdr-actions { display: none !important; }

  /* desktop vs. mobile carousel variants (different item-per-page grouping) */
  .view-desktop { display: none !important; }
  .view-mobile { display: block !important; }

  /* generic text-block padding (see convention note above) */
  div.abs { padding-left: 40px; padding-right: 40px; }
  .section-head { width: 100% !important; margin: 0 0 20px !important; }
  .h-section { font-size: 19px; }
  .sub-section { font-size: 13px; line-height: 1.55; margin-top: 10px; }
  .certs-box .h-section, .cta-title, .cta-subtitle { padding-left: 0; padding-right: 0; }

  /* ================= HERO: full-bleed photo, text overlaid on it,
     nothing spills past the photo's edges (no card look, no radius) ================= */
  .hero-bg {
    position: relative !important;
    width: 100% !important;
    height: 520px;
    background-size: cover;
    background-position: center;
  }
  .sec-hero-text {
    position: relative !important;
    z-index: 1;
    margin-top: -330px;
    padding: 0 40px;
  }
  .hero-title { font-family: var(--font-body); font-size: 26px; letter-spacing: 0; }
  .hero-desc { font-size: 14px; }
  .hero-desc p { margin-bottom: 6px; }
  .hero-actions { flex-wrap: wrap; gap: 12px; margin-top: 14px; }

  /* ================= About our factory: flat card (no shadow/radius),
     34px gap below the hero text/button cluster (Figma-measured) ================= */
  .about-card {
    margin: 34px 40px 0 !important;
    width: calc(100% - 80px) !important;
    box-shadow: none;
    border-radius: 0;
    position: relative;
    z-index: 1;
    padding: 24px !important;
  }
  .about-card h3 { font-size: 19px; }
  .about-card p { font-size: 13.5px; line-height: 1.55; }

  /* gap between About card and the stats/icons band; stats band itself
     gets 54px top/bottom padding and 40px between its two rows (Figma) */
  .stats-row { background: #ecf1f8; flex-wrap: wrap; justify-content: center; gap: 40px 12px; padding: 54px 40px; margin-top: 48px; }
  .stat-item { width: 44%; gap: 10px; }
  .stat-item img { width: 40px; height: 40px; }
  .stat-item strong { font-size: 22px; }
  .stat-item span { font-size: 12.5px; }

  /* ---- 32px rhythm between the remaining major sections ---- */
  .sec-products-head { margin-top: 32px; }
  .sec-products-body { margin-top: 32px; }
  .sec-materials { margin-top: 48px; }
  .sec-materials .section-head { margin-bottom: 32px !important; }
  .sec-collab { margin-top: 32px; }
  .map-box { margin-top: 32px; }
  .sec-brands { margin-top: 32px; }
  .sec-cta { margin-top: 32px; }

  /* products / brands -> 2 per row + dots (unchanged carousel mechanics) */
  .products-row, .brands-row { flex-wrap: wrap; justify-content: center; gap: 14px; }
  .product-card { width: 46%; gap: 10px; }
  .product-img { height: auto; aspect-ratio: 1/0.74; }
  .product-card span { font-size: 13.5px; }
  .brand-logo { width: 46%; height: 84px; }
  .brand-logo img { max-width: 70%; max-height: 55%; }

  /* materials -> 2 per row + dots */
  .materials-grid { flex-wrap: wrap; justify-content: center; gap: 14px; }
  .materials-grid figure { width: 46%; gap: 8px; }
  .materials-grid img { width: 100%; height: auto; aspect-ratio: 1/1; }
  .materials-grid figcaption { font-size: 13.5px; }

  /* how to collaborate */
  div.abs.sec-collab { background: #d9e2f1; padding-top: 28px; padding-bottom: 28px; }
  .sec-collab .section-head { margin-bottom: 32px !important; }
  .collab-rows { gap: 12px !important; }
  .collab-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .collab-card { width: 100% !important; gap: 8px; }
  .collab-body { height: 133px; padding: 12px; }
  .collab-body p { font-size: 13px; }
  .collab-pattern { width: 100% !important; height: 133px; }

  /* ================= map (full-bleed) + certifications
     (flat navy band peeking behind a white card, like desktop) ================= */
  .map-box { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; height: auto !important; }
  .map-img { width: 100%; height: auto; }

  .rect.certs-navy-bg {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: 778px !important;
    left: auto !important; top: auto !important;
    margin: 32px 0 -730px;
  }
  .certs-box {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 40px !important;
    width: calc(100% - 80px) !important;
    position: relative;
    z-index: 1;
  }
  .certs-head { padding: 24px 24px 4px; gap: 10px; }
  .certs-intro { font-size: 13px; }
  .certs-list { padding: 4px 24px 24px; gap: 14px; }
  .certs-list img { width: 32px; height: 32px; }
  .certs-list p { font-size: 13px; }

  /* ================= CTA + trusted: full-bleed navy background at its
     real Figma height (641px); the form now lives INSIDE the navy block
     in the HTML (see index.html) so it flows right after the desc text
     with a clean 24px gap, and — being taller than the fixed-height navy
     box — naturally spills over its bottom edge onto the section below,
     exactly like the PC design. SEND NOW compact + right-aligned, 60px
     gap down to the "Trusted to deliver" line ================= */
  .sec-cta { padding-left: 0 !important; padding-right: 0 !important; }
  .rect.cta-navy {
    height: 641px !important;
    padding: 32px 0 0;
    box-sizing: border-box;
    overflow: visible;
    display: block;
  }
  .cta-navy div.abs { padding: 0 40px; margin-top: 0; }
  .cta-title { font-size: 22px; }
  /* H5-extra bold (Figma mobile spec: 18px/800, heavier than the 22px/600
     desktop rule in styles.css — must override weight here, not just size) */
  .cta-subtitle { font-size: 18px; font-weight: 800; line-height: 1.5; }
  /* H6-semi bold (Figma mobile spec: 16px/500 — lighter than it was
     rendering; explicit weight so it can't inherit anything bolder) */
  .cta-desc { font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 0.16px; margin-top: 14px; }
  .cta-form-col {
    align-items: flex-end;
    position: relative !important;
    left: auto !important; top: auto !important;
    margin: 24px 40px 0 !important;
    padding: 0 !important;
    width: calc(100% - 80px) !important;
    gap: 24px;
  }
  /* Figma: form padding 24px, gap 24px between fields (was 20/16 — too
     tight, which is why the whole form came out shorter than it should) */
  .cta-form { gap: 24px; padding: 24px; }
  .send-btn { width: auto; padding: 10px 20px; font-size: 13px; }
  .sec-trusted-text {
    background-image: url('assets/home/bg-trusted-glow.jpg');
    background-size: cover;
    background-position: center;
    padding: 32px 40px !important;
    /* NOTE: cta-form-col lives inside a fixed-height (641px) .cta-navy and
       intentionally overflows it (see the CTA section above) — this
       sibling's flow position is anchored to cta-navy's fixed box, not to
       where the form actually ends, so this margin is a measured value
       (not a clean token) tuned so the SEND NOW button sits exactly 84px
       above this section's heading. If the CTA form's content/height
       changes, re-measure and adjust this number. */
    margin-top: 135px !important;
  }

  /* ================= footer: photo covers the whole (auto-height) block;
     text columns must sit ABOVE the photo (both need to be "positioned"
     for stacking — a positioned photo always paints over static text
     otherwise, regardless of DOM order) ================= */
  .footer {
    position: relative !important;
    height: auto !important;
    padding: 0 !important;
    /* sec-trusted-text already contributes 32px via its own bottom
       padding; +30px here brings the paragraph-to-footer gap to the
       requested 62px */
    margin-top: 30px;
  }
  .footer-photo {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
  }
  .footer-cols {
    position: relative !important;
    left: 0px !important;
    top: 0px !important;
    z-index: 1;
    flex-direction: column;
    gap: 28px;
    padding: 32px 40px 0;
  }
  .footer-col-main, .footer-col-links, .footer-col-loc { width: 100% !important; }
  .footer-bottom {
    position: relative !important;
    left: 0px !important;
    top: 0px !important;
    z-index: 1;
    width: 100% !important;
    height: auto !important;
    flex-direction: column;
    gap: 12px;
    padding: 16px 40px;
    margin-top: 12px;
  }

  /* =====================================================================
     ABOUT PAGE ("Giới thiệu") — mobile. Page-scoped classes only (unique
     names, see styles.css's "ABOUT PAGE" section) so nothing here can
     affect the approved Trang chủ rules above. Source: Figma "iPhone 16 - 2"
     (node 2428:1215). Headings reuse the SAME reduced mobile sizes already
     tuned for Trang chủ (.h-section → 19px etc., inherited automatically);
     page-specific heading classes below are set to match that same 19px
     convention on purpose, per explicit sync request. See BUILD_LOG.md.
     ===================================================================== */
  .about-hero-bg {
    position: relative !important;
    width: 100% !important;
    height: 267px;
    left: auto; top: auto;
    background-size: cover;
    background-position: center;
  }
  /* card overlaps the photo's bottom edge, same technique as homepage's about-card */
  .about-hero-card {
    margin: -44px 40px 0 !important;
    width: calc(100% - 80px) !important;
    padding: 24px !important;
    position: relative;
    z-index: 2;
  }
  .about-hero-card h3 { font-size: 19px; }
  .about-hero-card p { font-size: 13.5px; line-height: 1.55; }

  /* the d9e2f1 rect is dropped on mobile (falls under the generic
     .rect hide-rule above); .journey-block draws its own background
     instead — simpler than trying to overlap two flow siblings */
  .journey-block { background: #d9e2f1; padding-top: 32px; padding-bottom: 32px; margin-top: 32px; }
  .journey-title { font-size: 19px; }
  .journey-text { font-size: 13.5px; line-height: 1.55; }

  .factory-col { gap: 12px; margin-top: 32px; }
  .factory-head { gap: 20px; }
  .factory-cards { flex-direction: column; gap: 16px; }
  .factory-card { width: 100% !important; }

  .cert-carousel-wrap { gap: 20px; margin-top: 32px; }
  .cert-stage { height: 248px; }
  .cert-page img { width: 283px; height: 218px; margin: 0 auto; }
  .cert-arrow { width: 25px; height: 25px; }

  .badges-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 32px; }
  .badge-box { width: calc(50% - 12px); height: auto; aspect-ratio: 180 / 116; }
  /* lone 5th badge (odd item wrapping to its own row) — force it to sit
     centered under the two rows above rather than flush to the left edge
     of its wrap line */
  .badge-box:last-child:nth-child(odd) { margin: 0 auto; }

  /* inset to the same 40px margins as the body text below it (matches
     Figma exactly — the photo is NOT full-bleed on mobile, only desktop
     is), but still straddles the white/blue boundary 50/50 vertically via
     position:relative + z-index (paints OVER the section's background
     instead of being covered by it, same stacking technique as desktop).
     Percentage margins/padding always resolve against the CONTAINING
     BLOCK's width (not the photo's own narrower width), so the numbers
     below solve for that: photo width = W-80, photo height = (W-80)*941/1672,
     half of that expressed as %/px-of-W = 28.14% - 22.51px. */
  .factory-photo {
    display: block;
    position: relative !important;
    z-index: 2;
    width: calc(100% - 80px) !important;
    height: auto !important;
    left: auto !important; top: auto !important;
    aspect-ratio: 1672 / 941;
    object-fit: cover;
    margin: 32px 40px calc(22.51px - 28.14%);
  }

  .values-section { padding: 0; margin-top: 0; }
  .values-row { flex-direction: column; width: 100% !important; gap: 56px; }
  /* map becomes a full-bleed strip AFTER the text column on mobile
     (matches Figma — it sits far below the values grid there) */
  .map-col { order: 3; width: 100% !important; height: 477px; }
  /* padding-top = the same half-photo-height pulled up by the photo's
     overlap (so its bottom edge lands exactly back at this box's content
     start) + the requested 32px breathing room before the text */
  .values-col { order: 1; width: 100% !important; padding: calc(28.14% + 9.49px) 40px 0; box-sizing: border-box; gap: 0; }
  .values-intro { margin-bottom: 40px; }
  .values-title { font-size: 19px; }
  .values-cols { flex-direction: column; gap: 40px; }
  .value-col { width: 100% !important; gap: 20px; }

  .about-bottom { width: 100% !important; gap: 48px; padding-top: 48px; }
  .brands-wrap { width: 100% !important; padding: 0 40px; box-sizing: border-box; }
  .about-bottom .footer { width: 100% !important; }

  /* =====================================================================
     PRODUCTS PAGE ("Trang sản phẩm") — mobile. Page-scoped classes only.
     Product card sizing on mobile comes for free from the existing generic
     .product-card/.product-img/.products-row rules above (already tuned
     for Trang chủ) — nothing redefined here, per the reuse instruction.
     Source: Figma "iPhone 16 - 3" (node 2459:6644). See BUILD_LOG.md.
     ===================================================================== */
  /* inset to the standard 40px "body" margins (same as the rest of the
     page's text content — NOT full-bleed) — overlaps the hero banner above
     by 20% of its own (content-driven) height. margin-top can't use a
     plain CSS percentage for this because % margins resolve against the
     CONTAINING BLOCK's width, not this element's own height — so the -20%
     offset is computed in JS after layout (see script below). */
  .search-bar {
    position: relative;
    z-index: 2;
    margin-left: 40px !important;
    margin-right: 40px !important;
    margin-bottom: 0;
    width: calc(100% - 80px) !important;
    padding: 24px !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .search-title { font-size: 19px; width: 100%; }
  .search-form { width: 100%; }

  .cat-col { margin-top: 32px; }

  .products-grid-wrap { margin-top: 48px; }
  /* collapse the 3-per-row desktop grouping into one flat wrap so cards
     re-flow 2-per-line at mobile width, matching Figma exactly.
     row-gap 26px (16px base + user's +10px), column-gap 14px unchanged */
  .products-grid-wrap .products-page { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 14px; }
  .products-grid-wrap .products-page[hidden] { display: none; }
  .products-grid-wrap .products-row { display: contents; }
  .pagination { margin-top: 48px; }

  .footer-products { margin-top: 80px !important; width: 100% !important; height: auto !important; padding: 0 !important; }

  /* =====================================================================
     PRODUCT DETAIL PAGE ("Trang chi tiết sản phẩm") — mobile. Page-scoped
     classes only. Reuses .search-bar (already tuned on the products list
     page) and .cat-col/.cat-toggle/.cat-sublist as-is — nothing redefined,
     only sized for this page via the .cat-col-pd/.footer-pd hooks so the
     shared rules on other pages stay untouched. Source: Figma "iPhone 16 - 4"
     (node 2462:1477). Figma's mobile frame drops "You may also like" and
     adds a Category browser instead (desktop frame has the opposite) — see
     BUILD_LOG.md for how that's handled with .view-desktop/.view-mobile.
     ===================================================================== */
  .pd-gallery { margin-top: 32px; }
  .pd-main { height: 256px; }
  .pd-arrow { width: 28px; height: 28px; }
  .pd-arrow.prev { left: 0; }
  .pd-arrow.next { right: 0; }
  .pd-thumbs { gap: 4px; }
  .pd-thumb { width: calc(25% - 3px); height: auto; aspect-ratio: 1 / 1; }

  .pd-info { margin-top: 48px; align-items: flex-start; }
  .pd-title { font-size: 19px; }
  .pd-desc { font-size: 13.5px; line-height: 1.55; }
  .pd-accordion { margin-top: 19px; }
  .pd-contact-row { margin-top: 24px; }

  /* .view-mobile's display:block!important (needed to SHOW this element on
     mobile) fights .cat-col's own display:flex (needed for its gap to work
     at all) — same specificity, both !important, so without this more
     specific override the block wins and the 32px gap below silently does
     nothing (title and list collapse to 0 gap, confirmed by measurement) */
  .cat-col-pd.view-mobile { display: flex !important; }
  .cat-col-pd { margin-top: 62px; }

  .footer-pd { margin-top: 80px !important; width: 100% !important; height: auto !important; padding: 0 !important; }

  /* =====================================================================
     OUR MATERIAL PAGE ("Trang Our Material") — mobile. Page-scoped classes
     only. On desktop .material-cta is an EMPTY decorative gradient rect
     sitting behind the absolutely-positioned .material-cta-inner; on mobile
     there's no absolute overlap, so the rect is dropped and
     .material-cta-inner draws the gradient itself instead — same
     simplification already used for .journey-block above. Source: Figma
     "iPhone 16 - 5" (node 2473:2505) + user's Figma Inspect measurements
     (2026-08-16): row-gap 32px / column-gap 20px inside each materials
     group, left-aligned (not centered), 146px gap before the CTA title,
     0px gap between the gradient block and the footer (the 80px lands
     as the gradient block's own bottom padding instead). See BUILD_LOG.md.
     ===================================================================== */
  .material-grid-wrap { margin-top: 32px; gap: 32px; }
  /* scoped to this page's wrapper — .materials-grid is shared with the
     homepage's mobile carousel (justify-content:center there is correct
     and must stay untouched) */
  .material-grid-wrap .materials-grid { justify-content: flex-start; gap: 32px 20px; }

  .material-cta { display: none; }
  .material-cta-inner {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    background: linear-gradient(to top, #d9e2f1 36.691%, #fff 100%);
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-top: 146px;
    padding-bottom: 80px;
  }
  .material-cta-text { width: 100%; }
  .material-cta-title { font-size: 24px; line-height: 1.2; }

  .footer-material { margin-top: 0 !important; width: 100% !important; height: auto !important; padding: 0 !important; }

  /* =====================================================================
     OUR MATERIAL — ARTICLE DETAIL PAGE ("Trang chi tiết bài viết Our
     Material") — mobile. Page-scoped classes only. Source: Figma
     "iPhone 16 - 6" (node 2483:2880), read via get_metadata for exact
     pixel gaps (32px card→body, 12px body→gallery→note, 64px content→
     footer). The desktop-only corner arrow isn't part of this mobile
     frame at all — hidden here. Card overlaps the hero photo's bottom
     edge by 47px, same peeking-card technique as .about-hero-card.
     See BUILD_LOG.md.
     ===================================================================== */
  .matd-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin: -47px 40px 0 !important;
    width: calc(100% - 80px) !important;
    padding: 24px !important;
    position: relative;
    z-index: 2;
  }
  .matd-card-img { width: 100%; height: auto; aspect-ratio: 266 / 177; flex-shrink: 1; }
  .matd-card-body { width: 100%; align-items: flex-start; gap: 16px; }
  .matd-card-text { gap: 16px; }
  .matd-title { font-size: 22px; }
  /* scoped to this card only — .hdr-phone/.btn-primary/.pd-contact-row are
     shared with the header and product-detail page, which must stay
     untouched */
  .matd-card .pd-contact-row { gap: 18px; }
  .matd-card .hdr-phone { font-size: 14px; }
  .matd-card .btn-primary { font-size: 12px; white-space: nowrap; }

  .matd-body { margin-top: 32px; gap: 12px; }
  .matd-gallery img { width: 52.69%; aspect-ratio: 165.45 / 148.549; height: auto; }
  .matd-gallery img + img { width: 47.31%; aspect-ratio: 1 / 1; }

  .footer-matd { margin-top: 64px !important; width: 100% !important; height: auto !important; padding: 0 !important; }

  /* =====================================================================
     OUR PROCESS PAGE ("Trang quy trình") — mobile. Page-scoped classes
     only. Source: Figma "iPhone 16 - 7" (node 2483:3447), read via
     get_metadata for exact gaps. Reuses .h-section/.sub-section (already
     have generic mobile overrides), .material-cta-text/-title/-desc
     (already have generic mobile overrides — our-process.html's CTA
     intentionally inherits the SAME 24px title reduction already
     established for our-material.html, per user's explicit request to
     keep mobile font-size/weight tweaks in sync across pages, even though
     this page's own Figma frame shows 28px), and .pd-accordion/.pd-acc-*
     (font-weight 400/500 override already generic via .faq-list, applies
     here automatically too). See BUILD_LOG.md.
     ===================================================================== */
  /* .proc-hero-bg needs its parent to stay a real positioning context for
     its inset:0 to resolve correctly — .abs's mobile reset forces
     position:static!important, so this MUST use !important too to win
     (same specificity, but !important always beats non-important
     regardless of declaration order — confirmed via direct computed-style
     inspection; plain position:relative here would NOT have won) */
  .proc-hero {
    position: relative !important;
    height: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .proc-hero-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 38px 40px 40px;
    box-sizing: border-box;
  }
  .proc-hero-title { width: 100%; }
  .proc-hero-desc { width: 100%; }

  .proc-wrap { margin-top: 42px; gap: 40px; }
  .proc-steps-block { gap: 40px; }
  .proc-row { flex-direction: column; gap: 40px; width: 100%; }
  .proc-step { width: 100%; }
  /* desktop's uniform 243px min-height (matching the tallest box, per user
     request "on PC") doesn't apply here — mobile stacks all 6 in one
     column, so forcing every box that tall would leave large empty gaps
     under the shorter ones for no visual benefit */
  .proc-step-body { min-height: 0; }

  .proc-faq-wrap { width: 100%; }
  /* the generic mobile .section-head{margin:0 0 20px!important} rule beats
     this instance's inline margin-bottom:0 override, stacking with
     .proc-faq-wrap's own 24px flex gap for a wrong ~44-63px total gap
     instead of 24px — needs matching specificity + !important to win */
  .proc-faq-wrap .section-head { margin-bottom: 0 !important; }
  /* the generic mobile .pd-accordion{margin-top:19px} rule (tuned for
     product-detail.html's spec list) also leaks in here since .faq-list
     shares the same base class — this page's 24px gap already comes from
     .proc-faq-wrap's own flex gap, so that extra 19px must be zeroed */
  .faq-list.pd-accordion { gap: 12px; margin-top: 0; }
  .faq-list .pd-acc-item { border-bottom-color: #e4e4e4; }

  .proc-cta {
    margin-top: 80px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .proc-cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 38px 40px;
    box-sizing: border-box;
  }

  .footer-proc { margin-top: 0 !important; width: 100% !important; height: auto !important; padding: 0 !important; }

  /* =====================================================================
     CONTACT PAGE ("Trang liên hệ") — mobile. Page-scoped classes only.
     Source: Figma "iPhone 16 - 8" (node 2497:3850). User reordered the
     content for mobile — "What happens after..." moves from beside "SEND
     US A MESSAGE" to AFTER the form — handled via .view-desktop/.view-mobile
     (same technique already used for product-detail's Category block),
     not by touching the approved desktop DOM. See BUILD_LOG.md.
     ===================================================================== */
  /* .contact-bg has no children (pure decorative band) so .abs's generic
     height:auto!important would collapse it to 0 — needs a real height to
     push flow content down; the content below it uses a matching negative
     margin to overlap back up, same "flat band peeking behind content"
     technique as .rect.certs-navy-bg on about.html. Figma's band is
     shorter than the full content column on purpose — the tail end (the
     mobile "what happens after" callout) is meant to spill onto white. */
  .contact-bg { height: 1105px !important; }
  /* +32px so the "CUONG THINH..." title doesn't sit flush against the hero
     photo above it (user-requested breathing room, not from Figma) */
  .contact-content { margin-top: -1105px; padding-top: 32px; gap: 0; }

  .contact-row { flex-direction: column; gap: 42px; width: 100%; }
  .contact-locations, .contact-callout-wrap, .contact-callout, .contact-message-intro, .contact-form-wrap { width: 100%; }
  .contact-message-intro { margin-top: 40px; }
  .contact-form-wrap { margin-top: 48px; }
  /* +64px bottom margin so the numbered "What happens after..." list
     doesn't run straight into the map below it (user-requested) */
  .contact-callout.view-mobile { display: flex !important; margin-top: 48px; margin-bottom: 64px; }

  /* .contact-title covers BOTH "CUONG THINH C&T COMPANY LIMITED" and "SEND
     US A MESSAGE" (shared class) — user-requested size reduction so they
     read as a heading, not the desktop's full 28px/800 */
  .contact-title { font-size: 22px; font-weight: 700; line-height: 1.3; }

  /* .contact-map-wrap is a div.abs, so it inherits the generic 40px side
     padding meant for text blocks — full-bleed sections (hero photo,
     footer photo, and now the map) must reset that back to 0, same fix
     already applied to .contact-bg/.proc-hero */
  .contact-map-wrap { height: 598px !important; margin-top: 0; padding-left: 0 !important; padding-right: 0 !important; }
  .footer-contact { margin-top: 0 !important; width: 100% !important; height: auto !important; padding: 0 !important; }
}