{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "id": "OrderCustomizeDialog",
      "name": "Dialog/Order Customize",
      "reusable": true,
      "width": 1440,
      "height": 900,
      "fill": "#0A0A0B80",
      "justifyContent": "center",
      "alignItems": "center",
      "children": [
        {
          "type": "frame",
          "id": "CustomizeModal",
          "width": 420,
          "fill": "#111113",
          "cornerRadius": 24,
          "stroke": {"thickness": 1, "fill": "#1F1F23"},
          "layout": "vertical",
          "clip": true,
          "children": [
            {
              "type": "frame",
              "id": "CustomizeProduct",
              "width": "fill_container",
              "height": 120,
              "fill": "#FF5C0020",
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {"type": "frame", "id": "CustomizeProductImg", "width": 100, "height": 100, "fill": "#FF5C0030", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [
                  {"type": "icon_font", "id": "CustomizeProductIcon", "width": 48, "height": 48, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#FF5C00"}
                ]}
              ]
            },
            {
              "type": "frame",
              "id": "CustomizeContent",
              "width": "fill_container",
              "padding": 24,
              "layout": "vertical",
              "gap": 20,
              "children": [
                {"type": "frame", "id": "CustomizeHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex-start", "children": [
                  {"type": "frame", "id": "CustomizeHeaderLeft", "layout": "vertical", "gap": 4, "children": [
                    {"type": "text", "id": "CustomizeName", "fill": "#FFFFFF", "content": "Cappuccino", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
                    {"type": "text", "id": "CustomizeDesc", "fill": "#8B8B90", "content": "Espresso + Sữa tươi + Foam", "fontFamily": "Roboto", "fontSize": 13}
                  ]},
                  {"type": "frame", "id": "CustomizeClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
                    {"type": "icon_font", "id": "CustomizeCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"}
                  ]}
                ]},
                {
                  "type": "frame",
                  "id": "CustomizeSize",
                  "width": "fill_container",
                  "layout": "vertical",
                  "gap": 10,
                  "children": [
                    {"type": "text", "id": "CustomizeSizeLabel", "fill": "#8B8B90", "content": "Kích cỡ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
                    {"type": "frame", "id": "CustomizeSizeOptions", "width": "fill_container", "gap": 8, "children": [
                      {"type": "frame", "id": "CustomizeSizeS", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [12, 0], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
                        {"type": "text", "id": "CustomizeSizeSLabel", "fill": "#8B8B90", "content": "S", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
                        {"type": "text", "id": "CustomizeSizeSPrice", "fill": "#6B6B70", "content": "+0₫", "fontFamily": "Roboto", "fontSize": 11}
                      ]},
                      {"type": "frame", "id": "CustomizeSizeM", "width": "fill_container", "fill": "#FF5C0020", "stroke": {"thickness": 2, "fill": "#FF5C00"}, "cornerRadius": 10, "padding": [12, 0], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
                        {"type": "text", "id": "CustomizeSizeMLabel", "fill": "#FF5C00", "content": "M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
                        {"type": "text", "id": "CustomizeSizeMPrice", "fill": "#FF5C00", "content": "+10K", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
                      ]},
                      {"type": "frame", "id": "CustomizeSizeL", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [12, 0], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
                        {"type": "text", "id": "CustomizeSizeLLabel", "fill": "#8B8B90", "content": "L", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
                        {"type": "text", "id": "CustomizeSizeLPrice", "fill": "#6B6B70", "content": "+20K", "fontFamily": "Roboto", "fontSize": 11}
                      ]}
                    ]}
                  ]
                },
                {
                  "type": "frame",
                  "id": "CustomizeSugar",
                  "width": "fill_container",
                  "layout": "vertical",
                  "gap": 10,
                  "children": [
                    {"type": "text", "id": "CustomizeSugarLabel", "fill": "#8B8B90", "content": "Độ ngọt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
                    {"type": "frame", "id": "CustomizeSugarOptions", "width": "fill_container", "gap": 6, "children": [
                      {"type": "frame", "id": "CustomizeSugar0", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "CustomizeSugar0T", "fill": "#8B8B90", "content": "0%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
                      {"type": "frame", "id": "CustomizeSugar30", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "CustomizeSugar30T", "fill": "#8B8B90", "content": "30%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
                      {"type": "frame", "id": "CustomizeSugar50", "fill": "#FF5C0020", "stroke": {"thickness": 2, "fill": "#FF5C00"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "CustomizeSugar50T", "fill": "#FF5C00", "content": "50%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]},
                      {"type": "frame", "id": "CustomizeSugar70", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "CustomizeSugar70T", "fill": "#8B8B90", "content": "70%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
                      {"type": "frame", "id": "CustomizeSugar100", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "CustomizeSugar100T", "fill": "#8B8B90", "content": "100%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}
                    ]}
                  ]
                },
                {
                  "type": "frame",
                  "id": "CustomizeTopping",
                  "width": "fill_container",
                  "layout": "vertical",
                  "gap": 10,
                  "children": [
                    {"type": "text", "id": "CustomizeToppingLabel", "fill": "#8B8B90", "content": "Topping", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
                    {"type": "frame", "id": "CustomizeToppingOptions", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [
                      {"type": "frame", "id": "CustomizeTopping1", "width": "fill_container", "fill": "#22C55E10", "stroke": {"thickness": 1, "fill": "#22C55E"}, "cornerRadius": 10, "padding": [10, 14], "justifyContent": "space_between", "alignItems": "center", "children": [
                        {"type": "frame", "id": "CustomizeTopping1Left", "gap": 10, "alignItems": "center", "children": [
                          {"type": "frame", "id": "CustomizeTopping1Check", "width": 20, "height": 20, "fill": "#22C55E", "cornerRadius": 4, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CustomizeTopping1CheckI", "width": 12, "height": 12, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFF"}]},
                          {"type": "text", "id": "CustomizeTopping1Name", "fill": "#FFFFFF", "content": "Trân châu đen", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
                        ]},
                        {"type": "text", "id": "CustomizeTopping1Price", "fill": "#22C55E", "content": "+10,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
                      ]},
                      {"type": "frame", "id": "CustomizeTopping2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 14], "justifyContent": "space_between", "alignItems": "center", "children": [
                        {"type": "frame", "id": "CustomizeTopping2Left", "gap": 10, "alignItems": "center", "children": [
                          {"type": "frame", "id": "CustomizeTopping2Check", "width": 20, "height": 20, "fill": "transparent", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 4},
                          {"type": "text", "id": "CustomizeTopping2Name", "fill": "#8B8B90", "content": "Thạch dừa", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
                        ]},
                        {"type": "text", "id": "CustomizeTopping2Price", "fill": "#6B6B70", "content": "+8,000₫", "fontFamily": "Roboto", "fontSize": 12}
                      ]}
                    ]}
                  ]
                },
                {"type": "frame", "id": "CustomizeDivider", "width": "fill_container", "height": 1, "fill": "#1F1F23"},
                {
                  "type": "frame",
                  "id": "CustomizeFooter",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "alignItems": "center",
                  "children": [
                    {"type": "frame", "id": "CustomizeQty", "gap": 12, "alignItems": "center", "children": [
                      {"type": "frame", "id": "CustomizeQtyMinus", "width": 36, "height": 36, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CustomizeQtyMinusI", "width": 18, "height": 18, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "#ADADB0"}]},
                      {"type": "text", "id": "CustomizeQtyNum", "fill": "#FFFFFF", "content": "2", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
                      {"type": "frame", "id": "CustomizeQtyPlus", "width": 36, "height": 36, "fill": "#FF5C00", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CustomizeQtyPlusI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}
                    ]},
                    {"type": "frame", "id": "CustomizeAddBtn", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "padding": [0, 24], "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
                      {"type": "icon_font", "id": "CustomizeAddIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
                      {"type": "text", "id": "CustomizeAddText", "fill": "#FFFFFF", "content": "Thêm 150,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
                    ]}
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}
