{"id":25607,"date":"2026-07-21T14:31:07","date_gmt":"2026-07-21T07:31:07","guid":{"rendered":"https:\/\/acmfood.com.vn\/%d9%85%d9%8f%d9%86%d8%b4%d8%a6-%d8%a7%d9%84%d9%85%d8%b4%d8%b1%d9%88%d8%a8%d8%a7%d8%aa"},"modified":"2026-09-22T16:51:16","modified_gmt":"2026-09-22T09:51:16","slug":"beverage-builder-ar","status":"publish","type":"page","link":"https:\/\/acmfood.com.vn\/ar\/beverage-builder-ar","title":{"rendered":"\u0645\u064f\u0646\u0634\u0626 \u0627\u0644\u0645\u0634\u0631\u0648\u0628\u0627\u062a"},"content":{"rendered":"<div class=\"dsn-packaging-root\" id=\"dsn-packaging-1\"\n    data-instance=\"1\">\n\n    \n    <!-- Design Studio -->\n    <div class=\"dpb-builder\" data-screen=\"builder\">\n\n        <div class=\"dpb-tab-panels\">\n\n            <div class=\"dpb-tab-panel active\" data-panel=\"1\" role=\"tabpanel\">\n                <div class=\"dpb-panel-content\">\n                    <div class=\"dpb-design-layout\">\n\n                        <!-- LEFT PANEL: Package Types + Toolbar -->\n                        <div class=\"dpb-design-left\">\n\n                            <!-- Package Type Selector -->\n                            <div class=\"dpb-section\">\n                                <h3 class=\"dpb-section-title\">\n                                    Choose Packaging Type                                <\/h3>\n                                <div class=\"dpb-package-types\" id=\"dpb-package-types\">\n                                    <!-- Rendered by JS -->\n                                    <div class=\"dpb-skeleton dpb-skeleton-cards\"><\/div>\n                                <\/div>\n                            <\/div>\n\n                            <!-- Label Design Toolbar -->\n                            <div class=\"dpb-section\">\n                                <h3 class=\"dpb-section-title\">Label Design                                <\/h3>\n                                <div class=\"dpb-editor-toolbar dpb-editor-toolbar--vertical\">\n                                    <button type=\"button\" class=\"dpb-tool-btn dpb-tool-btn--wide\"\n                                        data-action=\"upload-label\"\n                                        title=\"Upload Label\">\n                                        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n                                            <rect x=\"2\" y=\"2\" width=\"14\" height=\"14\" rx=\"2\" stroke=\"currentColor\"\n                                                stroke-width=\"1.5\" \/>\n                                            <circle cx=\"7\" cy=\"7\" r=\"1.5\" stroke=\"currentColor\" \/>\n                                            <path d=\"M2 13l4-4 3 3 2-2 5 5\" stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                stroke-linecap=\"round\" \/>\n                                        <\/svg>\n                                        <span>Upload Label Image<\/span>\n                                    <\/button>\n                                    <button type=\"button\" class=\"dpb-tool-btn dpb-tool-btn--wide dpb-tool-danger\"\n                                        data-action=\"delete-layer\"\n                                        title=\"Delete Layer\">\n                                        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n                                            <path\n                                                d=\"M4 5h10M7 5V4a1 1 0 011-1h2a1 1 0 011 1v1M6 5v9a1 1 0 001 1h4a1 1 0 001-1V5\"\n                                                stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n                                        <\/svg>\n                                        <span>Delete Label<\/span>\n                                    <\/button>\n                                <\/div>\n                            <\/div>\n\n                            \n                        <\/div><!-- \/.dpb-design-left -->\n\n                        <!-- RIGHT PANEL: Canvas -->\n                        <div class=\"dpb-design-right\">\n                            <div class=\"dpb-canvas-container-wrap\">\n                                <div class=\"dpb-canvas-container\"\n                                    id=\"dpb-canvas-container-1\">\n                                    <!-- Placeholder badge \u2013 bottom of canvas, above mockup -->\n                                    <div class=\"dpb-canvas-placeholder\">\n                                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 18 18\" fill=\"none\">\n                                            <rect x=\"2\" y=\"2\" width=\"14\" height=\"14\" rx=\"2\" stroke=\"currentColor\"\n                                                stroke-width=\"1.5\" \/>\n                                            <circle cx=\"7\" cy=\"7\" r=\"1.5\" stroke=\"currentColor\" \/>\n                                            <path d=\"M2 13l4-4 3 3 2-2 5 5\" stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                stroke-linecap=\"round\" \/>\n                                        <\/svg>\n                                        <span>Upload or drag &amp; drop a label image<\/span>\n                                    <\/div>\n\n                                    <!-- Layer 1 (z:2): label image \u2013 sits BELOW the mockup -->\n                                    <img class=\"dpb-label-image\" alt=\"Label preview\" draggable=\"false\"\n                                        style=\"display:none;\">\n\n                                    <!-- Layer 2 (z:10): mockup overlay \u2013 rendered ON TOP of label -->\n                                    <img class=\"dpb-mockup-overlay\" alt=\"\" style=\"display:none;\">\n\n                                    <!-- Layer 3 (z:20): controls \u2013 ABOVE the mockup, always visible -->\n                                    <div class=\"dpb-label-controls\" style=\"display:none;\">\n                                        <div class=\"dpb-label-border\"><\/div>\n                                        <!-- Corner handles: proportional resize -->\n                                        <div class=\"dpb-resize-handle dpb-handle-nw\" data-handle=\"nw\"><svg\n                                                viewBox=\"0 0 16 16\">\n                                                <path d=\"M4 12L12 4M4 4h4M4 4v4\" stroke=\"#fff\" stroke-width=\"2\"\n                                                    stroke-linecap=\"round\" \/>\n                                            <\/svg><\/div>\n                                        <div class=\"dpb-resize-handle dpb-handle-ne\" data-handle=\"ne\"><svg\n                                                viewBox=\"0 0 16 16\">\n                                                <path d=\"M12 12L4 4M12 4H8M12 4v4\" stroke=\"#fff\" stroke-width=\"2\"\n                                                    stroke-linecap=\"round\" \/>\n                                            <\/svg><\/div>\n                                        <div class=\"dpb-resize-handle dpb-handle-sw\" data-handle=\"sw\"><svg\n                                                viewBox=\"0 0 16 16\">\n                                                <path d=\"M4 4l8 8M4 12h4M4 12V8\" stroke=\"#fff\" stroke-width=\"2\"\n                                                    stroke-linecap=\"round\" \/>\n                                            <\/svg><\/div>\n                                        <div class=\"dpb-resize-handle dpb-handle-se\" data-handle=\"se\"><svg\n                                                viewBox=\"0 0 16 16\">\n                                                <path d=\"M12 4L4 12M12 12H8M12 12V8\" stroke=\"#fff\" stroke-width=\"2\"\n                                                    stroke-linecap=\"round\" \/>\n                                            <\/svg><\/div>\n                                        <!-- Edge handles: single-axis stretch -->\n                                        <div class=\"dpb-resize-handle dpb-handle-n\" data-handle=\"n\"><svg\n                                                viewBox=\"0 0 16 16\">\n                                                <path d=\"M8 3v10M5 5.5L8 3l3 2.5M5 10.5L8 13l3-2.5\" stroke=\"#fff\"\n                                                    stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                                            <\/svg><\/div>\n                                        <div class=\"dpb-resize-handle dpb-handle-s\" data-handle=\"s\"><svg\n                                                viewBox=\"0 0 16 16\">\n                                                <path d=\"M8 3v10M5 5.5L8 3l3 2.5M5 10.5L8 13l3-2.5\" stroke=\"#fff\"\n                                                    stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                                            <\/svg><\/div>\n                                        <div class=\"dpb-resize-handle dpb-handle-w\" data-handle=\"w\"><svg\n                                                viewBox=\"0 0 16 16\">\n                                                <path d=\"M3 8h10M5.5 5L3 8l2.5 3M10.5 5L13 8l-2.5 3\" stroke=\"#fff\"\n                                                    stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                                            <\/svg><\/div>\n                                        <div class=\"dpb-resize-handle dpb-handle-e\" data-handle=\"e\"><svg\n                                                viewBox=\"0 0 16 16\">\n                                                <path d=\"M3 8h10M5.5 5L3 8l2.5 3M10.5 5L13 8l-2.5 3\" stroke=\"#fff\"\n                                                    stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                                            <\/svg><\/div>\n                                    <\/div>\n\n                                    <!-- Hidden canvas for export\/save only -->\n                                    <canvas id=\"dpb-canvas-1\" width=\"400\"\n                                        height=\"500\" style=\"display:none;\"><\/canvas>\n                                <\/div>\n                            <\/div><!-- \/.dpb-canvas-container-wrap -->\n                        <\/div><!-- \/.dpb-design-right -->\n\n                    <\/div><!-- \/.dpb-design-layout -->\n                <\/div>\n\n                <!-- Step Actions -->\n                <div class=\"dpb-tab-actions\">\n                    <button type=\"button\" class=\"dpb-btn dpb-btn-primary dpb-download-btn\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                            <path d=\"M8 2v8M4.5 7L8 10.5 11.5 7M3 13h10\" stroke=\"currentColor\" stroke-width=\"2\"\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                        <\/svg>\n                        Download Design                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Lead Capture Popup -->\n    <div class=\"dpb-modal-overlay\" data-modal=\"lead\" style=\"display:none;\">\n        <div class=\"dpb-modal\">\n            <button type=\"button\" class=\"dpb-modal-close\" aria-label=\"Close\">\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path d=\"M5 5l10 10M15 5L5 15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n                <\/svg>\n            <\/button>\n            <div class=\"dpb-modal-body\">\n                <form class=\"dpb-lead-form\" novalidate>\n                    <h3 class=\"dpb-modal-title\">Get Your Design<\/h3>\n                    <p class=\"dpb-modal-subtitle\">\n                        Leave your details and we will email you the download link for your design.                    <\/p>\n                    <div class=\"dpb-form-group\">\n                        <label>Full Name <span\n                                class=\"dpb-required\">*<\/span><\/label>\n                        <input type=\"text\" class=\"dpb-input\" name=\"name\" required>\n                    <\/div>\n                    <div class=\"dpb-form-group\">\n                        <label>Email <span\n                                class=\"dpb-required\">*<\/span><\/label>\n                        <input type=\"email\" class=\"dpb-input\" name=\"email\" required>\n                    <\/div>\n                    <div class=\"dpb-form-group\">\n                        <label>Phone Number <span\n                                class=\"dpb-required\">*<\/span><\/label>\n                        <input type=\"tel\" class=\"dpb-input\" name=\"phone\" required>\n                    <\/div>\n                    <div class=\"dpb-form-group\">\n                        <label>Note<\/label>\n                        <textarea class=\"dpb-input dpb-textarea\" name=\"note\" rows=\"3\"><\/textarea>\n                    <\/div>\n                    <button type=\"submit\" class=\"dpb-btn dpb-btn-primary dpb-btn-lg dpb-btn-full dpb-lead-submit\">\n                        Send Request                    <\/button>\n                    <div class=\"dpb-lead-status\" style=\"display:none;\"><\/div>\n                <\/form>\n                <!-- Success State -->\n                <div class=\"dpb-lead-success\" style=\"display:none;\">\n                    <div class=\"dpb-success-icon\">\n                        <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\">\n                            <circle cx=\"32\" cy=\"32\" r=\"30\" stroke=\"#10b981\" stroke-width=\"2\" \/>\n                            <path d=\"M20 32l8 8 16-16\" stroke=\"#10b981\" stroke-width=\"3\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" \/>\n                        <\/svg>\n                    <\/div>\n                    <h3>Thank you!<\/h3>\n                    <p>We have emailed you the download link for your design, together with your request details. Our team will follow up with a quote shortly.                    <\/p>\n                    <span class=\"dpb-success-hint\">\n                        Please check your inbox (and the spam folder).                    <\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Hidden file input for label upload -->\n    <input type=\"file\" class=\"dpb-file-input\" accept=\"image\/*\" style=\"display:none;\">\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":24146,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-25607","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/acmfood.com.vn\/ar\/wp-json\/wp\/v2\/pages\/25607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/acmfood.com.vn\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/acmfood.com.vn\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/acmfood.com.vn\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/acmfood.com.vn\/ar\/wp-json\/wp\/v2\/comments?post=25607"}],"version-history":[{"count":2,"href":"https:\/\/acmfood.com.vn\/ar\/wp-json\/wp\/v2\/pages\/25607\/revisions"}],"predecessor-version":[{"id":35616,"href":"https:\/\/acmfood.com.vn\/ar\/wp-json\/wp\/v2\/pages\/25607\/revisions\/35616"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/acmfood.com.vn\/ar\/wp-json\/wp\/v2\/media\/24146"}],"wp:attachment":[{"href":"https:\/\/acmfood.com.vn\/ar\/wp-json\/wp\/v2\/media?parent=25607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}