{"id":3863,"date":"2026-06-26T10:42:14","date_gmt":"2026-06-26T03:42:14","guid":{"rendered":"https:\/\/dingfongfood.com\/contact-2\/"},"modified":"2026-06-26T10:42:15","modified_gmt":"2026-06-26T03:42:15","slug":"contact","status":"publish","type":"page","link":"https:\/\/dingfongfood.com\/th\/contact\/","title":{"rendered":"\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e40\u0e23\u0e32"},"content":{"rendered":"<!-- ============================================================================\n     CONTACT HERO \u2014 Figma file Wui8LL0rxDl4f1hmbwMiwv, frame 176:11779\n     (\"page\/contack\", 1440\u00d73423), TOP WHITE REGION (page-y 0 \u2192 ~1310).\n\n     In Figma the whole page carries the faint gold fruit line-art tiles\n     (bg-1..bg-4, 1622\u00d7930 each \u2014 the SAME tile as assets\/about\/bg-pattern.svg,\n     copied to assets\/contact\/bg-pattern.svg for the contact partials), but a\n     solid WHITE panel (176:12400 \"hero-svg-for-clipimage\", 1440\u00d71491.5, wavy\n     bottom edge) covers it across this entire region \u2014 so this section is\n     PLAIN WHITE. The white\u2192orange wavy divider at the bottom of that panel\n     belongs to the NEXT section (the orange form band), not to this partial.\n\n     Children (absolute page coords @1440):\n       176:13005 badge \"\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e40\u0e23\u0e32\"        511,238   422.32\u00d7106.5\n                 \u2014 brush Sriracha word (orange #EE7623, white halo) flanked by\n                   2 leaf pairs; SAME vectors as the careers title leaves\n                   (assets\/careers\/leaf-*.svg \u2014 orange #EE7623 \/ green #00994C),\n                   so those assets are reused here.\n       176:12401 company name             418,364.6 607\u00d791\n                 \u2014 Kanit SemiBold 61.165px #3D5DAB, centred.\n       176:13048 pill \"\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e20\u0e32\u0e22\u0e43\u0e19\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\"  468,516   508.96\u00d780.83\n                 \u2014 instance of \"title-2\": orange brush pill + live white Kanit.\n                   The brush vector is the SAME shape as the products CTA brush\n                   (assets\/products\/cta-brush.svg, viewBox 0 0 508.96 80.8328)\n                   recoloured #3D5DAB \u2192 #EE7623 as assets\/contact\/brush-pill-orange.svg.\n       176:13046 intro                    135,637   1129\u00d7105\n                 \u2014 Kanit SemiBold 23px #3D5DAB, 2 lines, centred.\n       176:13049 cards                    157.5,767 1140\u00d7257.25\n                 \u2014 2\u00d72 grid of card-row (each 555\u00d7111, gap-x 30 \/ gap-y 35.25):\n                   rounded-12, shadow 6px 6px 12px rgba(0,0,0,.05); green\n                   #009A4D label box 210 wide (Kanit SemiBold 17.25px white,\n                   centred) + white value box (Kanit Medium 22.5px #4A6AB2,\n                   left-aligned at x 218.25).\n       176:13054 pill \"\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\"   466,1085  508.96\u00d780.83 (same title-2)\n       176:13047 intl note                135,1206  1129\u00d7105\n                 \u2014 Kanit SemiBold 32px #3D5DAB, 2 lines, centred.\n\n     Heading hierarchy: h1 = \u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e40\u0e23\u0e32 (sr-only behind the decorative brush\n     word, same pattern as careers-hero); the company name is a styled <p>;\n     the two customer-group pills are the real <h2>s.\n============================================================================ -->\n<section class=\"relative w-full bg-white\" data-contact-hero>\n  <!-- pt clears the absolute-positioned navbar: badge top = 238px @1440 \u2192 16.53vw,\n       capped at the Figma 238px (14.9rem); floor keeps it clear of the mobile bar.\n       pb: Figma reserved ~119px of empty white below the last line before the wave\n       divider \u2014 that read as a weird empty void between the hero and the orange form\n       band. Tightened to ~56px so the form band comes up closer (the wave still marks\n       the section break); keeps breathing room without the void. -->\n  <div\n    class=\"mx-auto w-full max-w-(--df-frame-max) px-6 pt-[clamp(8rem,16.5vw,14.9rem)] pb-[clamp(2rem,3.9vw,3.5rem)] text-center\"\n  >\n    <!-- \u2500\u2500 176:13005 badge \"\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e40\u0e23\u0e32\" (511,238 \u2192 422.32\u00d7106.5) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n         @container so the brush word (curved-heading, cqw shadow) and the\n         4 flanking leaves (% insets from Figma) scale locked together. -->\n    <div class=\"@container relative mx-auto aspect-[422.32\/106.5] w-full max-w-[422px]\">\n      <!-- 176:13043 small orange leaf, upper-left (inset 25.37% \/ 86.26% \/ 52.89% \/ 6.49%) -->\n      <img decoding=\"async\" src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/careers\/leaf-sm.svg\" alt=\"\" aria-hidden=\"true\"\n           class=\"pointer-events-none absolute left-[6.49%] top-[25.37%] h-[21.74%] w-[7.25%]\" \/>\n      <!-- 176:13042 large green leaf, lower-left (inset 49.68% \/ 83.14% \/ 20.17% \/ 0) -->\n      <img decoding=\"async\" src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/careers\/leaf-lg.svg\" alt=\"\" aria-hidden=\"true\"\n           class=\"pointer-events-none absolute left-0 top-[49.68%] h-[30.15%] w-[16.86%]\" \/>\n      <!-- 176:13045 small orange leaf, upper-right (mirror) -->\n      <img decoding=\"async\" src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/careers\/leaf-sm-r.svg\" alt=\"\" aria-hidden=\"true\"\n           class=\"pointer-events-none absolute right-[6.49%] top-[25.37%] h-[21.74%] w-[7.25%]\" \/>\n      <!-- 176:13044 large green leaf, lower-right (mirror) -->\n      <img decoding=\"async\" src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/careers\/leaf-lg-r.svg\" alt=\"\" aria-hidden=\"true\"\n           class=\"pointer-events-none absolute right-0 top-[49.68%] h-[30.15%] w-[16.86%]\" \/>\n\n      <!-- real page heading for SEO \/ screen readers (visually hidden) -->\n      <h1 class=\"sr-only\">\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e40\u0e23\u0e32<\/h1>\n      <!-- decorative brush rendering (Sriracha along a gentle arch) \u2014 SAME\n           curved-heading mechanism as the careers\/products titles; --ember\n           variant = #EE7623 fill inside a white outline, matching the Figma\n           brush word (176:13007..13041, flattened vectors in Figma). -->\n      <svg\n        class=\"curved-heading curved-heading--ember absolute inset-0 h-full w-full\"\n        viewBox=\"0 0 760 190\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <defs>\n          <path id=\"contact-title-curve\" fill=\"none\" d=\"M 130 142 Q 380 88 630 142\" \/>\n        <\/defs>\n        <text text-anchor=\"middle\">\n          <textPath href=\"#contact-title-curve\" startOffset=\"50%\">\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e40\u0e23\u0e32<\/textPath>\n        <\/text>\n      <\/svg>\n    <\/div>\n\n    <!-- \u2500\u2500 176:12401 company name (418,364.6 \u2192 607\u00d791) \u2014\n         Kanit SemiBold 61.165px #3D5DAB; 61.165\/1440 = 4.25vw \u2192 max 3.82rem -->\n    <p\n      class=\"mt-[clamp(0.75rem,1.4vw,1.25rem)] font-display font-semibold leading-tight text-[#3d5dab]\"\n      style=\"font-size: clamp(1.9rem, 4.25vw, 3.82rem)\"\n    >\n      \u0e1a\u0e23\u0e34\u0e29\u0e31\u0e17 \u0e15\u0e34\u0e48\u0e07\u0e1f\u0e07 \u0e1f\u0e39\u0e49\u0e14\u0e2a\u0e4c \u0e08\u0e33\u0e01\u0e31\u0e14    <\/p>\n\n    <!-- \u2500\u2500 176:13048 pill h2 \"\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e20\u0e32\u0e22\u0e43\u0e19\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\" (468,516 \u2192 508.96\u00d780.83) \u2500\u2500\u2500\n         Orange brush pill (assets\/contact\/brush-pill-orange.svg, preserveAspectRatio=none\n         so it fills the box) + LIVE white Kanit on top. Text box per Figma\n         (176:11566): inset 9.29% \/ 19.64% \/ 4.11% \/ 6.68% \u2014 sits left of the\n         brush tail. Font 46.525px \/ 508.96 = 9.14cqw against the pill box. -->\n    <h2\n      class=\"@container relative mx-auto mt-[clamp(1.5rem,4.2vw,3.78rem)] block aspect-[508.96\/80.833] w-full max-w-[509px]\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/contact\/brush-pill-orange.svg\"\n        alt=\"\"\n        aria-hidden=\"true\"\n        class=\"absolute inset-0 block h-full w-full\"\n      \/>\n      <span\n        class=\"absolute flex items-center justify-center whitespace-nowrap font-display font-semibold leading-none text-white\"\n        style=\"inset: 9.29% 19.64% 4.11% 6.68%; font-size: 9.14cqw\"\n      >\n        \u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e20\u0e32\u0e22\u0e43\u0e19\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28      <\/span>\n    <\/h2>\n\n    <!-- \u2500\u2500 176:13046 intro (135,637 \u2192 1129\u00d7105) \u2014\n         Figma was Kanit SemiBold 23px; rebalanced to share ONE size with the\n         intl-note below it (same role = the lead paragraph under a customer-group\n         pill). clamp 18\u219226px sits a clean step above the 22.5px card values. -->\n    <div\n      class=\"mx-auto mt-[clamp(1.25rem,2.8vw,2.5rem)] max-w-[1129px] font-display font-semibold leading-normal text-[#3d5dab]\"\n      style=\"font-size: clamp(1.125rem, 1.8vw, 1.625rem)\"\n    >\n      <p>\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e43\u0e2b\u0e21\u0e48\u0e42\u0e1b\u0e23\u0e14\u0e43\u0e0a\u0e49\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e02\u0e2d\u0e07\u0e17\u0e32\u0e07\u0e1a\u0e23\u0e34\u0e29\u0e31\u0e17 \u0e2b\u0e23\u0e37\u0e2d \u0e2a\u0e48\u0e07\u0e2d\u0e35\u0e40\u0e21\u0e25\u0e44\u0e1b\u0e17\u0e35\u0e48 \u0e41\u0e1c\u0e19\u0e01 General Inquiry\/Administration<\/p>\n      <p>\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19\u0e23\u0e1a\u0e01\u0e27\u0e19\u0e2a\u0e48\u0e07\u0e2d\u0e35\u0e40\u0e21\u0e25\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e41\u0e1c\u0e19\u0e01\u0e17\u0e35\u0e48\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23<\/p>\n    <\/div>\n\n    <!-- \u2500\u2500 176:13049 cards (157.5,767 \u2192 1140\u00d7257.25) \u2014 2\u00d72 grid of card-row\n         (555\u00d7111, gap-x 30 \/ gap-y 35.25), collapsing to 1 column < md.\n         Each card: rounded-[12px], shadow 6px 6px 12px rgba(0,0,0,.05);\n         green #009A4D label (210\/555 = 37.84% wide, Kanit SemiBold 17.25px\n         white) + white value box (Kanit Medium 22.5px #4A6AB2, left-aligned,\n         8.25px gutter after the green box). Emails\/phone are live links. -->\n    <div\n      class=\"mx-auto mt-[clamp(1rem,1.75vw,1.56rem)] grid w-full max-w-[1140px] grid-cols-1 gap-x-[30px] gap-y-[clamp(1rem,2.45vw,2.2rem)] text-left md:grid-cols-2\"\n    >\n      <!-- 176:13050 card-row: \u0e04\u0e33\u0e16\u0e32\u0e21\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b \/\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23 (3 value lines) -->\n      <div class=\"flex min-h-[clamp(5.5rem,7.7vw,6.94rem)] overflow-hidden rounded-[12px] bg-white shadow-[6px_6px_12px_rgba(0,0,0,0.05)]\">\n        <div\n          class=\"flex w-[37.84%] shrink-0 items-center justify-center bg-[#009a4d] px-2 py-3 text-center font-display font-semibold leading-normal text-white\"\n          style=\"font-size: clamp(0.9rem, 1.2vw, 1.08rem)\"\n        >\n          \u0e04\u0e33\u0e16\u0e32\u0e21\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b \/\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23        <\/div>\n        <div\n          class=\"flex flex-1 flex-col justify-center px-[2.5%] py-2 font-display font-medium leading-normal text-[#4a6ab2]\"\n          style=\"font-size: clamp(0.95rem, 1.56vw, 1.41rem)\"\n        >\n                    <p><a class=\"hover:underline focus-visible:underline\" href=\"mailto:info@dingfongfood.com\">info@dingfongfood.com<\/a><\/p>\n          <p>Tel: <a class=\"hover:underline focus-visible:underline\" href=\"tel:02-077-6206\">02-077-6206<\/a><\/p>\n          <p>Fax: +6620194045<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- 176:13051 card-row: \u0e1a\u0e31\u0e0d\u0e0a\u0e35 -->\n      <div class=\"flex min-h-[clamp(5.5rem,7.7vw,6.94rem)] overflow-hidden rounded-[12px] bg-white shadow-[6px_6px_12px_rgba(0,0,0,0.05)]\">\n        <div\n          class=\"flex w-[37.84%] shrink-0 items-center justify-center bg-[#009a4d] px-2 py-3 text-center font-display font-semibold leading-normal text-white\"\n          style=\"font-size: clamp(0.9rem, 1.2vw, 1.08rem)\"\n        >\n          \u0e1a\u0e31\u0e0d\u0e0a\u0e35        <\/div>\n        <div\n          class=\"flex flex-1 flex-col justify-center px-[2.5%] py-2 font-display font-medium leading-normal text-[#4a6ab2]\"\n          style=\"font-size: clamp(0.95rem, 1.56vw, 1.41rem)\"\n        >\n                    <p><a class=\"hover:underline focus-visible:underline\" href=\"mailto:acc.info@dingfongfood.com\">acc.info@dingfongfood.com<\/a><\/p>\n        <\/div>\n      <\/div>\n\n      <!-- 176:13052 card-row: \u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14 \/ \u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14\u0e14\u0e34\u0e08\u0e34\u0e15\u0e2d\u0e25 \/ \u0e44\u0e2d\u0e17\u0e35 (label wraps to 2 lines as in Figma) -->\n      <div class=\"flex min-h-[clamp(5.5rem,7.7vw,6.94rem)] overflow-hidden rounded-[12px] bg-white shadow-[6px_6px_12px_rgba(0,0,0,0.05)]\">\n        <div\n          class=\"flex w-[37.84%] shrink-0 items-center justify-center bg-[#009a4d] px-2 py-3 text-center font-display font-semibold leading-normal text-white\"\n          style=\"font-size: clamp(0.9rem, 1.2vw, 1.08rem)\"\n        >\n          \u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14 \/ \u0e01\u0e32\u0e23\u0e15\u0e25\u0e32\u0e14\u0e14\u0e34\u0e08\u0e34\u0e15\u0e2d\u0e25 \/ \u0e44\u0e2d\u0e17\u0e35        <\/div>\n        <div\n          class=\"flex flex-1 flex-col justify-center px-[2.5%] py-2 font-display font-medium leading-normal text-[#4a6ab2]\"\n          style=\"font-size: clamp(0.95rem, 1.56vw, 1.41rem)\"\n        >\n                    <p><a class=\"hover:underline focus-visible:underline\" href=\"mailto:mkt.info@dingfongfood.com\">mkt.info@dingfongfood.com<\/a><\/p>\n        <\/div>\n      <\/div>\n\n      <!-- 176:13053 card-row: \u0e08\u0e31\u0e14\u0e0b\u0e37\u0e49\u0e2d -->\n      <div class=\"flex min-h-[clamp(5.5rem,7.7vw,6.94rem)] overflow-hidden rounded-[12px] bg-white shadow-[6px_6px_12px_rgba(0,0,0,0.05)]\">\n        <div\n          class=\"flex w-[37.84%] shrink-0 items-center justify-center bg-[#009a4d] px-2 py-3 text-center font-display font-semibold leading-normal text-white\"\n          style=\"font-size: clamp(0.9rem, 1.2vw, 1.08rem)\"\n        >\n          \u0e08\u0e31\u0e14\u0e0b\u0e37\u0e49\u0e2d        <\/div>\n        <div\n          class=\"flex flex-1 flex-col justify-center px-[2.5%] py-2 font-display font-medium leading-normal text-[#4a6ab2]\"\n          style=\"font-size: clamp(0.95rem, 1.56vw, 1.41rem)\"\n        >\n                    <p><a class=\"hover:underline focus-visible:underline\" href=\"mailto:pcm.info@dingfongfood.com\">pcm.info@dingfongfood.com<\/a><\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- \u2500\u2500 176:13054 pill h2 \"\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\" (466,1085 \u2192 508.96\u00d780.83) \u2014\n         identical title-2 instance (orange brush in Figma, same SVG asset) -->\n    <h2\n      class=\"@container relative mx-auto mt-[clamp(1.5rem,4.2vw,3.8rem)] block aspect-[508.96\/80.833] w-full max-w-[509px]\"\n    >\n      <img decoding=\"async\"\n        src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/contact\/brush-pill-orange.svg\"\n        alt=\"\"\n        aria-hidden=\"true\"\n        class=\"absolute inset-0 block h-full w-full\"\n      \/>\n      <span\n        class=\"absolute flex items-center justify-center whitespace-nowrap font-display font-semibold leading-none text-white\"\n        style=\"inset: 9.29% 19.64% 4.11% 6.68%; font-size: 9.14cqw\"\n      >\n        \u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28      <\/span>\n    <\/h2>\n\n    <!-- \u2500\u2500 176:13047 intl note (135,1206 \u2192 1129\u00d7105) \u2014\n         Figma was Kanit SemiBold 32px, but that made this parenthetical note\n         LARGER than the more-important intro above (23px). Rebalanced to the same\n         clamp 18\u219226px so the two parallel under-pill paragraphs match. -->\n    <div\n      class=\"mx-auto mt-[clamp(1.25rem,2.8vw,2.5rem)] max-w-[1129px] font-display font-semibold leading-normal text-[#3d5dab]\"\n      style=\"font-size: clamp(1.125rem, 1.8vw, 1.625rem)\"\n    >\n            <p>(\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c\u0e15\u0e48\u0e32\u0e07\u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28)<\/p>\n      <p>Email: <a class=\"hover:underline focus-visible:underline\" href=\"mailto:int.info@dingfongfood.com\">int.info@dingfongfood.com<\/a><\/p>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- ============================================================================\n     CONTACT FORM BAND \u2014 Figma page\/contack (176:11779, 1440\u00d73423), the orange\n     field between the white hero and the map\/footer band (176:12402 @ y2415).\n\n     Figma pieces rebuilt here:\n       176:12400 \"hero-svg-for-clipimage\" 1440\u00d71491.5 \u2014 the white hero shape;\n                 only its wavy BOTTOM edge (y\u22481430\u21921491.5, ~61.5px deep) belongs\n                 to this section. Implemented as an inline strip at the top:\n                 assets\/about\/hero-wave.svg (viewBox 0 0 1440 100, white above a\n                 wavy bottom edge, transparent below, preserveAspectRatio none) \u2014\n                 the about-hero divider re-used; its curve matches the contact\n                 hero's bottom edge (same design-system wave).\n       176:13055 badge frame x421 y1542 598\u00d7115 \u2014 \"\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\" Sriracha,\n                 blue glyphs (#3C5DAB) with a white halo, on a gentle arch.\n                 Rebuilt LIVE as a curved <textPath> via the shared\n                 .curved-heading \/ .curved-heading--blue rules (src\/input.css),\n                 like about-story 83:2129. Flanking decorations (same motif as\n                 the About titles, so the About assets are re-used):\n                   176:13107\/13109 green leaf #00994C \u2192 assets\/about\/title-leaf.svg\n                   176:13108\/13110 orange dot #EE7623 \u2192 assets\/about\/title-dot.svg\n                 (right pair = left pair mirrored, -scale-x-100). The Figma\n                 glyphs also carry a faint texture PNG fill \u2014 folded into the\n                 flat blue fill per the live-text convention.\n       176:13111 subtitle y1697 \u2014 \"\u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e08\u0e30\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e15\u0e2d\u0e1a\u0e01\u0e25\u0e31\u0e1a\u0e20\u0e32\u0e22\u0e43\u0e19 3-5 \u0e27\u0e31\u0e19\u0e17\u0e33\u0e01\u0e32\u0e23\"\n                 Kanit SemiBold 32px white, centred.\n       176:13112 \"from\" \u2014 the form, centred column max-w 1042px:\n                 176:13113\/13116\/13119 inputs 1042.18\u00d768.29 white pills @ y1795 \/\n                 1875.25 \/ 1955.5 (12px gaps), placeholder Kanit Medium 18.75px\n                 #3D5DAB, 30px left inset (x230.25 vs pill x200.25).\n                 176:13122 textarea 1041.75\u00d7164.25 rounded 37.5px @ y2035.75,\n                 same placeholder style.\n       176:13125 submit \"\u0e2a\u0e48\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\" 210\u00d754.9 @ y2260, centred \u2014 blue glossy\n                 pill in Figma; rebuilt with the footer submit treatment\n                 (partials\/footer.html: gradient #3f7fe0\u2192#2f5fbf, rounded-full,\n                 white inset ring), Kanit SemiBold white ~20px (vector 176:13130).\n\n     FULL-BLEED orange band (careers-email pattern). Height is CONTENT-DRIVEN\n     (clamp() paddings derived from the Figma gaps at 1440: wave\u2192badge 50px,\n     badge\u2192subtitle 40px, subtitle\u2192form ~50px, textarea\u2192button 60px, button\u2192\n     section end 100px). Background = brand orange #f58132 + the shared faint\n     line-art tile assets\/contact\/bg-pattern.svg (CSS repeat, like the About\n     body pattern). The orange runs FLUSH to the bottom edge \u2014 the map band\n     below is the same orange and continues the field seamlessly (no divider,\n     no margin \u2192 no 1px seam).\n============================================================================ -->\n<section\n  class=\"relative left-1\/2 w-screen max-w-none -translate-x-1\/2 bg-[#f58132]\"\n  data-contact-form\n>\n  <!-- faint leaf\/fruit line-art tile over the orange (shared contact tile).\n       Fixed px sizing = constant pattern scale at any viewport (no vw zoom \u2014\n       same convention as body[data-page=\"about\"], src\/input.css). Width-pinned\n       only (auto height) so the tile keeps its own aspect ratio. -->\n  <div\n    class=\"pointer-events-none absolute inset-0\"\n    aria-hidden=\"true\"\n    style=\"\n      background-image: url(https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/contact\/bg-pattern.svg);\n      background-repeat: repeat;\n      background-position: top center;\n      background-size: 800px auto;\n    \"\n  ><\/div>\n\n  <!-- \u2500\u2500 TOP DIVIDER \u2014 wavy bottom edge of the white hero (Figma 176:12400,\n       wave y\u22481430\u21921491.5 \u2248 61.5px @ 1440 = 4.27vw). White above the curve,\n       transparent below \u2192 the band's orange shows through the dips. `relative`\n       so the strip paints OVER the absolutely-positioned pattern layer (the\n       white hero area carries no pattern in Figma). vw is safe here: the\n       section is full-bleed, so viewport width == section width. -->\n  <img decoding=\"async\"\n    src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/hero-wave.svg\"\n    alt=\"\"\n    aria-hidden=\"true\"\n    class=\"pointer-events-none relative block w-full h-[clamp(24px,4.27vw,82px)]\"\n  \/>\n\n  <!-- \u2500\u2500 CONTENT (centred inside the capped 1440 column) \u2500\u2500 -->\n  <!-- data-reveal sits on the content column, not the <section>: the section is a\n       full-bleed breakout that re-centres via -translate-x-1\/2, and the reveal owns\n       transform \u2014 so it must live on this transform-free wrapper (CLAUDE.md). -->\n  <div\n    data-reveal\n    class=\"relative mx-auto w-full max-w-(--df-frame-max) px-6 pt-[clamp(2rem,3.47vw,50px)] pb-[clamp(3.5rem,6.94vw,100px)]\"\n  >\n    <!-- TITLE BADGE \u2014 Figma 176:13055 (598\u00d7115 @ x421 y1542). The block keeps\n         the Figma aspect so the leaf\/dot % insets hold; live Sriracha on a\n         gentle arch (curved-heading--blue \u2192 #3C5DAB fill + white halo). -->\n    <div class=\"relative mx-auto aspect-[598\/115] w-[min(598px,86%)]\">\n      <!-- real heading for SEO \/ screen readers -->\n      <h2 class=\"sr-only\">\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d<\/h2>\n      <!-- decorative curved rendering (text box Figma inset: x 15.13%\u219285.5%,\n           y 11.71%\u219279.36% of the 598\u00d7115 frame \u2192 arch from x\u224892 to x\u2248506) -->\n      <svg\n        class=\"curved-heading curved-heading--blue absolute inset-0 h-full w-full\"\n        viewBox=\"0 0 598 115\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <defs>\n          <path id=\"contact-form-curve\" fill=\"none\" d=\"M 92 86 Q 299 62 506 86\" \/>\n        <\/defs>\n        <text text-anchor=\"middle\" style=\"font-size: 76px\">\n          <textPath href=\"#contact-form-curve\" startOffset=\"50%\">\u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d<\/textPath>\n        <\/text>\n      <\/svg>\n\n      <!-- left decorations (Figma 176:13107 leaf, 176:13108 dot) -->\n      <img decoding=\"async\"\n        src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-leaf.svg\"\n        alt=\"\"\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute left-0 top-[53.25%] h-[27.98%] w-[11.91%]\"\n      \/>\n      <img decoding=\"async\"\n        src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-dot.svg\"\n        alt=\"\"\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute left-[4.58%] top-[30.69%] h-[20.17%] w-[5.12%]\"\n      \/>\n      <!-- right decorations (Figma 176:13109 leaf, 176:13110 dot) \u2014 mirrored -->\n      <img decoding=\"async\"\n        src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-leaf.svg\"\n        alt=\"\"\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute left-[88.09%] top-[53.25%] h-[27.98%] w-[11.91%] -scale-x-100\"\n      \/>\n      <img decoding=\"async\"\n        src=\"https:\/\/dingfongfood.com\/wp-content\/themes\/dingfong-wp\/assets\/about\/title-dot.svg\"\n        alt=\"\"\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute left-[90.3%] top-[30.69%] h-[20.17%] w-[5.12%] -scale-x-100\"\n      \/>\n    <\/div>\n\n    <!-- SUBTITLE \u2014 Figma 176:13111 (Kanit SemiBold 32px white, y1697:\n         40px below the badge). 32\/1440 = 2.22vw, capped at the Figma px. -->\n    <p\n      class=\"mx-auto mt-[clamp(1.5rem,2.78vw,40px)] text-center font-display font-semibold leading-normal text-white\"\n      style=\"font-size: clamp(1.125rem, 2.22vw, 2rem)\"\n    >\n      \u0e25\u0e39\u0e01\u0e04\u0e49\u0e32\u0e08\u0e30\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e15\u0e2d\u0e1a\u0e01\u0e25\u0e31\u0e1a\u0e20\u0e32\u0e22\u0e43\u0e19 3-5 \u0e27\u0e31\u0e19\u0e17\u0e33\u0e01\u0e32\u0e23    <\/p>\n\n    <!-- FORM \u2014 Figma 176:13112 \"from\": 3 white pills 1042.18\u00d768.29 (12px gaps,\n         rows y1795\/1875.25\/1955.5) + textarea 1041.75\u00d7164.25 r37.5 (y2035.75).\n         Placeholder Kanit Medium 18.75px #3D5DAB, 30px left inset.\n\n         When Contact Form 7 is active, render its shortcode \u2014 the form fields\n         carry hook classes (df-cf-input\/-textarea\/-submit) styled in\n         src\/pages\/contact.css, and `html_class=\"df-cf-form\"` rebuilds the\n         byte-faithful flex column (max-w 1042, gap-3) on CF7's own <form>. When\n         CF7 is absent the static visual form below is the graceful fallback. -->\n    \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f3208-o1\" lang=\"\" dir=\"ltr\" data-wpcf7-id=\"3208\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/th\/wp-json\/wp\/v2\/pages\/3863#wpcf7-f3208-o1\" method=\"post\" class=\"wpcf7-form init df-cf-form\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"3208\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.6\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f3208-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required df-cf-input\" autocomplete=\"name\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\u0e0a\u0e37\u0e48\u0e2d - \u0e19\u0e32\u0e21\u0e2a\u0e01\u0e38\u0e25\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"phone\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel df-cf-input\" autocomplete=\"tel\" aria-invalid=\"false\" placeholder=\"\u0e40\u0e1a\u0e2d\u0e23\u0e4c\u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c\" value=\"\" type=\"tel\" name=\"phone\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email df-cf-input\" autocomplete=\"email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\u0e2d\u0e35\u0e40\u0e21\u0e25\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea df-cf-textarea\" aria-invalid=\"false\" placeholder=\"\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\" name=\"your-message\"><\/textarea><\/span>\n<input class=\"wpcf7-form-control wpcf7-submit has-spinner df-cf-submit\" type=\"submit\" value=\"\u0e2a\u0e48\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\" \/><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n  <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-3863","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/pages\/3863","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/comments?post=3863"}],"version-history":[{"count":1,"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/pages\/3863\/revisions"}],"predecessor-version":[{"id":3865,"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/pages\/3863\/revisions\/3865"}],"wp:attachment":[{"href":"https:\/\/dingfongfood.com\/th\/wp-json\/wp\/v2\/media?parent=3863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}