{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "name": "aPOS Component Library",
      "width": 1440,
      "fill": "$bg-page",
      "layout": "vertical",
      "gap": 40,
      "padding": 40,
      "children": [
        {
          "type": "frame",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "AUTH BUTTONS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "SocialBtn_Google",
          "name": "Atom/SocialButton/Google",
          "reusable": true,
          "width": 320,
          "height": 48,
          "fill": "#FFFFFF",
          "cornerRadius": 10,
          "gap": 12,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "frame",
              "name": "googleIcon",
              "width": 20,
              "height": 20,
              "children": [
                {
                  "type": "text",
                  "fill": "#4285F4",
                  "content": "G",
                  "fontFamily": "Roboto",
                  "fontSize": 16,
                  "fontWeight": "700"
                }
              ]
            },
            {
              "type": "text",
              "name": "btnLabel",
              "fill": "#1F1F1F",
              "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Google",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "500"
            }
          ]
        },
        {
          "type": "frame",
          "id": "SocialBtn_Apple",
          "name": "Atom/SocialButton/Apple",
          "reusable": true,
          "width": 320,
          "height": 48,
          "fill": "#000000",
          "cornerRadius": 10,
          "gap": 12,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "icon_font",
              "name": "appleIcon",
              "width": 20,
              "height": 20,
              "iconFontName": "apple",
              "iconFontFamily": "lucide",
              "fill": "#FFFFFF"
            },
            {
              "type": "text",
              "name": "btnLabel",
              "fill": "#FFFFFF",
              "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Apple",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "500"
            }
          ]
        },
        {
          "type": "frame",
          "id": "SocialBtn_Zalo",
          "name": "Atom/SocialButton/Zalo",
          "reusable": true,
          "width": 320,
          "height": 48,
          "fill": "#0068FF",
          "cornerRadius": 10,
          "gap": 12,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "name": "zaloIcon",
              "fill": "#FFFFFF",
              "content": "Z",
              "fontFamily": "Roboto",
              "fontSize": 18,
              "fontWeight": "700"
            },
            {
              "type": "text",
              "name": "btnLabel",
              "fill": "#FFFFFF",
              "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Zalo",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "500"
            }
          ]
        },
        {
          "type": "frame",
          "id": "SocialBtn_Facebook",
          "name": "Atom/SocialButton/Facebook",
          "reusable": true,
          "width": 320,
          "height": 48,
          "fill": "#1877F2",
          "cornerRadius": 10,
          "gap": 12,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "icon_font",
              "name": "fbIcon",
              "width": 20,
              "height": 20,
              "iconFontName": "facebook",
              "iconFontFamily": "lucide",
              "fill": "#FFFFFF"
            },
            {
              "type": "text",
              "name": "btnLabel",
              "fill": "#FFFFFF",
              "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Facebook",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "500"
            }
          ]
        },
        {
          "type": "frame",
          "id": "AuthBtn_Login",
          "name": "Atom/AuthButton/Login",
          "reusable": true,
          "width": 320,
          "height": 48,
          "fill": {
            "type": "gradient",
            "gradientType": "linear",
            "enabled": true,
            "rotation": 135,
            "colors": [
              {
                "color": "#FF5C00",
                "position": 0
              },
              {
                "color": "#FF8A4C",
                "position": 1
              }
            ]
          },
          "cornerRadius": 10,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "name": "btnLabel",
              "fill": "$text-primary",
              "content": "\u0110\u0103ng nh\u1eadp",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "600"
            }
          ]
        },
        {
          "type": "frame",
          "id": "AuthBtn_Register",
          "name": "Atom/AuthButton/Register",
          "reusable": true,
          "width": 320,
          "height": 48,
          "cornerRadius": 10,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "name": "btnLabel",
              "fill": "$text-primary",
              "content": "\u0110\u0103ng k\u00fd",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "500"
            }
          ]
        },
        {
          "type": "frame",
          "id": "AuthBtn_ForgotPassword",
          "name": "Atom/AuthButton/ForgotPassword",
          "reusable": true,
          "height": 48,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "name": "btnLabel",
              "fill": "$orange-primary",
              "content": "Qu\u00ean m\u1eadt kh\u1ea9u?",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "500"
            }
          ]
        },
        {
          "type": "frame",
          "id": "AuthBtn_Loading",
          "name": "Atom/AuthButton/Loading",
          "reusable": true,
          "width": 320,
          "height": 48,
          "fill": "$bg-interactive",
          "cornerRadius": 10,
          "gap": 8,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "icon_font",
              "name": "loadingIcon",
              "width": 18,
              "height": 18,
              "iconFontName": "loader-2",
              "iconFontFamily": "lucide",
              "fill": "$text-muted"
            },
            {
              "type": "text",
              "name": "btnLabel",
              "fill": "$text-muted",
              "content": "\u0110ang x\u1eed l\u00fd...",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "500"
            }
          ]
        },
        {
          "type": "frame",
          "id": "AuthBtn_Disabled",
          "name": "Atom/AuthButton/Disabled",
          "reusable": true,
          "width": 320,
          "height": 48,
          "fill": "$bg-interactive",
          "cornerRadius": 10,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "name": "btnLabel",
              "fill": "$text-disabled",
              "content": "\u0110\u0103ng nh\u1eadp",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "600"
            }
          ]
        },
        {
          "type": "frame",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "AUTH INPUTS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "AuthInput_Text_Default",
          "name": "Atom/AuthInput/Text/Default",
          "reusable": true,
          "width": 320,
          "height": 48,
          "fill": "$bg-elevated",
          "cornerRadius": 10,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "padding": [
            0,
            16
          ],
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "AuthInput_Text_Placeholder",
              "name": "placeholder",
              "fill": "$text-muted",
              "content": "Email ho\u1eb7c s\u1ed1 \u0111i\u1ec7n tho\u1ea1i",
              "fontFamily": "Roboto",
              "fontSize": 14
            }
          ]
        },
        {
          "type": "frame",
          "id": "AuthInput_Text_Filled",
          "name": "Atom/AuthInput/Text/Filled",
          "reusable": true,
          "width": 320,
          "height": 48,
          "fill": "$bg-elevated",
          "cornerRadius": 10,
          "stroke": {
            "thickness": 1,
            "fill": "$border-focus"
          },
          "padding": [
            0,
            16
          ],
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "AuthInput_Text_Value",
              "name": "value",
              "fill": "$text-primary",
              "content": "0912345678",
              "fontFamily": "Roboto",
              "fontSize": 14
            }
          ]
        },
        {
          "type": "frame",
          "id": "AuthInput_Text_Error",
          "name": "Atom/AuthInput/Text/Error",
          "reusable": true,
          "width": 320,
          "layout": "vertical",
          "gap": 6,
          "children": [
            {
              "type": "frame",
              "name": "inputWrapper",
              "width": "fill_container",
              "height": 48,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$status-error"
              },
              "padding": [
                0,
                16
              ],
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "name": "value",
                  "fill": "$text-primary",
                  "content": "invalid@email",
                  "fontFamily": "Roboto",
                  "fontSize": 14
                }
              ]
            },
            {
              "type": "text",
              "name": "errorText",
              "fill": "$status-error",
              "content": "Email kh\u00f4ng h\u1ee3p l\u1ec7",
              "fontFamily": "Roboto",
              "fontSize": 12
            }
          ]
        },
        {
          "type": "frame",
          "id": "AuthInput_Password_Default",
          "name": "Atom/AuthInput/Password/Default",
          "reusable": true,
          "width": 320,
          "height": 48,
          "fill": "$bg-elevated",
          "cornerRadius": 10,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "padding": [
            0,
            16
          ],
          "justifyContent": "space_between",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "AuthInput_Password_Placeholder",
              "name": "placeholder",
              "fill": "$text-muted",
              "content": "M\u1eadt kh\u1ea9u",
              "fontFamily": "Roboto",
              "fontSize": 14
            },
            {
              "type": "icon_font",
              "name": "toggleIcon",
              "width": 18,
              "height": 18,
              "iconFontName": "eye-off",
              "iconFontFamily": "lucide",
              "fill": "$text-muted"
            }
          ]
        },
        {
          "type": "frame",
          "id": "AuthInput_Password_Visible",
          "name": "Atom/AuthInput/Password/Visible",
          "reusable": true,
          "width": 320,
          "height": 48,
          "fill": "$bg-elevated",
          "cornerRadius": 10,
          "stroke": {
            "thickness": 1,
            "fill": "$border-focus"
          },
          "padding": [
            0,
            16
          ],
          "justifyContent": "space_between",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "name": "value",
              "fill": "$text-primary",
              "content": "myPassword123",
              "fontFamily": "Roboto",
              "fontSize": 14
            },
            {
              "type": "icon_font",
              "name": "toggleIcon",
              "width": 18,
              "height": 18,
              "iconFontName": "eye",
              "iconFontFamily": "lucide",
              "fill": "$orange-primary"
            }
          ]
        },
        {
          "type": "frame",
          "id": "AuthInput_Password_Hidden",
          "name": "Atom/AuthInput/Password/Hidden",
          "reusable": true,
          "width": 320,
          "height": 48,
          "fill": "$bg-elevated",
          "cornerRadius": 10,
          "stroke": {
            "thickness": 1,
            "fill": "$border-focus"
          },
          "padding": [
            0,
            16
          ],
          "justifyContent": "space_between",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "name": "masked",
              "fill": "$text-primary",
              "content": "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "letterSpacing": 2
            },
            {
              "type": "icon_font",
              "name": "toggleIcon",
              "width": 18,
              "height": 18,
              "iconFontName": "eye-off",
              "iconFontFamily": "lucide",
              "fill": "$text-muted"
            }
          ]
        },
        {
          "type": "frame",
          "id": "AuthInput_PIN_Empty",
          "name": "Atom/AuthInput/PIN/Empty",
          "reusable": true,
          "gap": 12,
          "children": [
            {
              "type": "frame",
              "name": "digit1",
              "width": 56,
              "height": 64,
              "fill": "$bg-elevated",
              "cornerRadius": 12,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": []
            },
            {
              "type": "frame",
              "name": "digit2",
              "width": 56,
              "height": 64,
              "fill": "$bg-elevated",
              "cornerRadius": 12,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": []
            },
            {
              "type": "frame",
              "name": "digit3",
              "width": 56,
              "height": 64,
              "fill": "$bg-elevated",
              "cornerRadius": 12,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": []
            },
            {
              "type": "frame",
              "name": "digit4",
              "width": 56,
              "height": 64,
              "fill": "$bg-elevated",
              "cornerRadius": 12,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": []
            },
            {
              "type": "frame",
              "name": "digit5",
              "width": 56,
              "height": 64,
              "fill": "$bg-elevated",
              "cornerRadius": 12,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": []
            },
            {
              "type": "frame",
              "name": "digit6",
              "width": 56,
              "height": 64,
              "fill": "$bg-elevated",
              "cornerRadius": 12,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": []
            }
          ]
        },
        {
          "type": "frame",
          "id": "AuthInput_PIN_Partial",
          "name": "Atom/AuthInput/PIN/Partial",
          "reusable": true,
          "gap": 12,
          "children": [
            {
              "type": "frame",
              "name": "digit1",
              "width": 56,
              "height": 64,
              "fill": "$bg-elevated",
              "cornerRadius": 12,
              "stroke": {
                "thickness": 1,
                "fill": "$border-focus"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "name": "dot",
                  "width": 12,
                  "height": 12,
                  "fill": "$orange-primary",
                  "cornerRadius": 6
                }
              ]
            },
            {
              "type": "frame",
              "name": "digit2",
              "width": 56,
              "height": 64,
              "fill": "$bg-elevated",
              "cornerRadius": 12,
              "stroke": {
                "thickness": 1,
                "fill": "$border-focus"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "name": "dot",
                  "width": 12,
                  "height": 12,
                  "fill": "$orange-primary",
                  "cornerRadius": 6
                }
              ]
            },
            {
              "type": "frame",
              "name": "digit3",
              "width": 56,
              "height": 64,
              "fill": "$bg-elevated",
              "cornerRadius": 12,
              "stroke": {
                "thickness": 2,
                "fill": "$orange-primary"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": []
            },
            {
              "type": "frame",
              "name": "digit4",
              "width": 56,
              "height": 64,
              "fill": "$bg-elevated",
              "cornerRadius": 12,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": []
            },
            {
              "type": "frame",
              "name": "digit5",
              "width": 56,
              "height": 64,
              "fill": "$bg-elevated",
              "cornerRadius": 12,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": []
            },
            {
              "type": "frame",
              "name": "digit6",
              "width": 56,
              "height": 64,
              "fill": "$bg-elevated",
              "cornerRadius": 12,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": []
            }
          ]
        },
        {
          "type": "frame",
          "id": "AuthInput_OTP_Empty",
          "name": "Atom/AuthInput/OTP/Empty",
          "reusable": true,
          "gap": 8,
          "children": [
            {
              "type": "frame",
              "name": "d1",
              "width": 48,
              "height": 56,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": []
            },
            {
              "type": "frame",
              "name": "d2",
              "width": 48,
              "height": 56,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": []
            },
            {
              "type": "frame",
              "name": "d3",
              "width": 48,
              "height": 56,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": []
            },
            {
              "type": "text",
              "name": "separator",
              "fill": "$text-muted",
              "content": "\u2014",
              "fontFamily": "Roboto",
              "fontSize": 20
            },
            {
              "type": "frame",
              "name": "d4",
              "width": 48,
              "height": 56,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": []
            },
            {
              "type": "frame",
              "name": "d5",
              "width": 48,
              "height": 56,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": []
            },
            {
              "type": "frame",
              "name": "d6",
              "width": 48,
              "height": 56,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": []
            }
          ]
        },
        {
          "type": "frame",
          "id": "AuthInput_OTP_Filled",
          "name": "Atom/AuthInput/OTP/Filled",
          "reusable": true,
          "gap": 8,
          "children": [
            {
              "type": "frame",
              "name": "d1",
              "width": 48,
              "height": 56,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$status-success"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "fill": "$text-primary",
                  "content": "1",
                  "fontFamily": "Roboto",
                  "fontSize": 24,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "frame",
              "name": "d2",
              "width": 48,
              "height": 56,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$status-success"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "fill": "$text-primary",
                  "content": "2",
                  "fontFamily": "Roboto",
                  "fontSize": 24,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "frame",
              "name": "d3",
              "width": 48,
              "height": 56,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$status-success"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "fill": "$text-primary",
                  "content": "3",
                  "fontFamily": "Roboto",
                  "fontSize": 24,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "text",
              "name": "separator",
              "fill": "$status-success",
              "content": "\u2014",
              "fontFamily": "Roboto",
              "fontSize": 20
            },
            {
              "type": "frame",
              "name": "d4",
              "width": 48,
              "height": 56,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$status-success"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "fill": "$text-primary",
                  "content": "4",
                  "fontFamily": "Roboto",
                  "fontSize": 24,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "frame",
              "name": "d5",
              "width": 48,
              "height": 56,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$status-success"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "fill": "$text-primary",
                  "content": "5",
                  "fontFamily": "Roboto",
                  "fontSize": 24,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "frame",
              "name": "d6",
              "width": 48,
              "height": 56,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$status-success"
              },
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "fill": "$text-primary",
                  "content": "6",
                  "fontFamily": "Roboto",
                  "fontSize": 24,
                  "fontWeight": "600"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "sokxt",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "NK10q",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "BADGES & LABELS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "Badge2",
          "name": "exampleHeroBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "gap": 8,
          "padding": [
            8,
            16
          ],
          "alignItems": "center",
          "children": [
            {
              "type": "ellipse",
              "id": "j3ksJ",
              "name": "heroBadgeDot",
              "fill": "$orange-primary",
              "width": 8,
              "height": 8
            },
            {
              "type": "text",
              "id": "zzm6Q",
              "name": "heroBadgeText",
              "fill": "$orange-primary",
              "content": "Hero Badge with Dot",
              "fontFamily": "Roboto",
              "fontSize": 12,
              "fontWeight": "500"
            }
          ]
        },
        {
          "type": "frame",
          "id": "Badge3",
          "name": "exampleChip",
          "fill": "$bg-elevated",
          "cornerRadius": 6,
          "padding": [
            4,
            10
          ],
          "children": [
            {
              "type": "text",
              "id": "Rb7IM",
              "name": "chipText",
              "fill": "$text-secondary",
              "content": "Chip Label",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500"
            }
          ]
        },
        {
          "type": "frame",
          "id": "coD4i",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "MOLga",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "BUTTONS & ACTIONS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "PrimaryBtn1",
          "name": "examplePrimaryBtn",
          "fill": {
            "type": "gradient",
            "gradientType": "linear",
            "enabled": true,
            "rotation": 135,
            "size": {
              "height": 1
            },
            "colors": [
              {
                "color": "#FF5C00",
                "position": 0
              },
              {
                "color": "#FF8A4C",
                "position": 1
              }
            ]
          },
          "cornerRadius": 10,
          "gap": 8,
          "padding": [
            14,
            24
          ],
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "icon_font",
              "id": "xMjoJ",
              "name": "btnPIcon",
              "enabled": false,
              "width": 16,
              "height": 16,
              "iconFontName": "arrow-right",
              "iconFontFamily": "lucide",
              "fill": "$text-primary"
            },
            {
              "type": "text",
              "id": "yR7mY",
              "name": "btnPText",
              "fill": "$text-primary",
              "content": "Primary Button",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "600"
            }
          ]
        },
        {
          "type": "frame",
          "id": "PrimaryBtn2",
          "name": "examplePrimaryBtnIcon",
          "fill": {
            "type": "gradient",
            "gradientType": "linear",
            "enabled": true,
            "rotation": 135,
            "size": {
              "height": 1
            },
            "colors": [
              {
                "color": "#FF5C00",
                "position": 0
              },
              {
                "color": "#FF8A4C",
                "position": 1
              }
            ]
          },
          "cornerRadius": 10,
          "gap": 8,
          "padding": [
            14,
            24
          ],
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "icon_font",
              "id": "qkXav",
              "name": "btnPIcon",
              "width": 16,
              "height": 16,
              "iconFontName": "arrow-right",
              "iconFontFamily": "lucide",
              "fill": "$text-primary"
            },
            {
              "type": "text",
              "id": "nrUMI",
              "name": "btnPText",
              "fill": "$text-primary",
              "content": "With Icon",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "600"
            }
          ]
        },
        {
          "type": "frame",
          "id": "NumpadBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "NumpadBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "NUMPAD KEYS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "NumKey1",
          "name": "Atom/NumpadKey/Standard",
          "reusable": true,
          "width": 64,
          "height": 64,
          "fill": "$bg-elevated",
          "cornerRadius": 12,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "NumKey1Text",
              "name": "keyLabel",
              "fill": "$text-primary",
              "content": "1",
              "fontFamily": "Roboto",
              "fontSize": 24,
              "fontWeight": "600"
            }
          ]
        },
        {
          "type": "frame",
          "id": "NumKey2",
          "name": "exampleNumpadKey2",
          "width": 64,
          "height": 64,
          "fill": "$bg-elevated",
          "cornerRadius": 12,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "NumKey2Text",
              "name": "keyLabel",
              "fill": "$text-primary",
              "content": "2",
              "fontFamily": "Roboto",
              "fontSize": 24,
              "fontWeight": "600"
            }
          ]
        },
        {
          "type": "frame",
          "id": "NumKey3",
          "name": "exampleNumpadKey3",
          "width": 64,
          "height": 64,
          "fill": "$bg-elevated",
          "cornerRadius": 12,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "NumKey3Text",
              "name": "keyLabel",
              "fill": "$text-primary",
              "content": "3",
              "fontFamily": "Roboto",
              "fontSize": 24,
              "fontWeight": "600"
            }
          ]
        },
        {
          "type": "frame",
          "id": "NumKeyClear",
          "name": "Atom/NumpadKey/Action/Clear",
          "reusable": true,
          "width": 64,
          "height": 64,
          "fill": "#EF444418",
          "cornerRadius": 12,
          "stroke": {
            "thickness": 1,
            "fill": "#EF4444"
          },
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "NumKeyClearText",
              "name": "keyLabel",
              "fill": "#EF4444",
              "content": "C",
              "fontFamily": "Roboto",
              "fontSize": 20,
              "fontWeight": "700"
            }
          ]
        },
        {
          "type": "frame",
          "id": "NumKeyEnter",
          "name": "Atom/NumpadKey/Action/Enter",
          "reusable": true,
          "width": 64,
          "height": 64,
          "fill": {
            "type": "gradient",
            "gradientType": "linear",
            "enabled": true,
            "rotation": 135,
            "size": {
              "height": 1
            },
            "colors": [
              {
                "color": "#FF5C00",
                "position": 0
              },
              {
                "color": "#FF8A4C",
                "position": 1
              }
            ]
          },
          "cornerRadius": 12,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "icon_font",
              "id": "NumKeyEnterIcon",
              "name": "keyIcon",
              "width": 24,
              "height": 24,
              "iconFontName": "corner-down-left",
              "iconFontFamily": "lucide",
              "fill": "$text-primary"
            }
          ]
        },
        {
          "type": "frame",
          "id": "QtyBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "QtyBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "QUANTITY CONTROLS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "QtyToggle1",
          "name": "Atom/QuantityToggle",
          "reusable": true,
          "fill": "$bg-elevated",
          "cornerRadius": 10,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "gap": 0,
          "alignItems": "center",
          "children": [
            {
              "type": "frame",
              "id": "QtyMinus",
              "name": "minusBtn",
              "width": 48,
              "height": 48,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "QtyMinusIcon",
                  "name": "icon",
                  "width": 20,
                  "height": 20,
                  "iconFontName": "minus",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                }
              ]
            },
            {
              "type": "frame",
              "id": "QtyValue",
              "name": "valueDisplay",
              "width": 56,
              "height": 48,
              "fill": "$bg-surface",
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "QtyValueText",
                  "name": "value",
                  "fill": "$text-primary",
                  "content": "1",
                  "fontFamily": "Roboto",
                  "fontSize": 18,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "frame",
              "id": "QtyPlus",
              "name": "plusBtn",
              "width": 48,
              "height": 48,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "QtyPlusIcon",
                  "name": "icon",
                  "width": 20,
                  "height": 20,
                  "iconFontName": "plus",
                  "iconFontFamily": "lucide",
                  "fill": "$orange-primary"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "StatusOnline",
          "name": "Atom/StatusIndicator/Online",
          "reusable": true,
          "gap": 8,
          "alignItems": "center",
          "children": [
            {
              "type": "ellipse",
              "id": "StatusOnlineDot",
              "name": "dot",
              "width": 10,
              "height": 10,
              "fill": "$green-success"
            },
            {
              "type": "text",
              "id": "StatusOnlineText",
              "name": "label",
              "fill": "$text-secondary",
              "content": "Online",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "500"
            }
          ]
        },
        {
          "type": "frame",
          "id": "StatusOffline",
          "name": "Atom/StatusIndicator/Offline",
          "reusable": true,
          "gap": 8,
          "alignItems": "center",
          "children": [
            {
              "type": "ellipse",
              "id": "StatusOfflineDot",
              "name": "dot",
              "width": 10,
              "height": 10,
              "fill": "#EF4444"
            },
            {
              "type": "text",
              "id": "StatusOfflineText",
              "name": "label",
              "fill": "$text-secondary",
              "content": "Offline",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "500"
            }
          ]
        },
        {
          "type": "frame",
          "id": "StatusBusy",
          "name": "Atom/StatusIndicator/Busy",
          "reusable": true,
          "gap": 8,
          "alignItems": "center",
          "children": [
            {
              "type": "ellipse",
              "id": "StatusBusyDot",
              "name": "dot",
              "width": 10,
              "height": 10,
              "fill": "#F59E0B"
            },
            {
              "type": "text",
              "id": "StatusBusyText",
              "name": "label",
              "fill": "$text-secondary",
              "content": "Busy",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "500"
            }
          ]
        },
        {
          "type": "frame",
          "id": "Cfoh0",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "JsBB8",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "TYPOGRAPHY & BRANDING",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "LogoEx",
          "name": "exampleLogo",
          "gap": 8,
          "alignItems": "center",
          "children": [
            {
              "type": "ellipse",
              "id": "8osja",
              "name": "logoDot",
              "fill": "$orange-primary",
              "width": 10,
              "height": 10
            },
            {
              "type": "text",
              "id": "7V59t",
              "name": "logoText",
              "fill": "$text-primary",
              "content": "aPOS",
              "fontFamily": "Roboto",
              "fontSize": 22,
              "fontWeight": "600",
              "letterSpacing": 3
            }
          ]
        },
        {
          "type": "frame",
          "id": "n6zyD",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "mrU8q",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "CATEGORY",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "FORM FIELDS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "FormField_Email_Default",
          "name": "Molecule/FormField/Email/Default",
          "reusable": true,
          "width": 360,
          "layout": "vertical",
          "gap": 8,
          "children": [
            {
              "type": "text",
              "id": "FormField_Email_Label",
              "name": "label",
              "fill": "$text-secondary",
              "content": "Email",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "500"
            },
            {
              "type": "frame",
              "name": "inputWrapper",
              "width": "fill_container",
              "height": 48,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "padding": [
                0,
                16
              ],
              "gap": 10,
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "name": "inputIcon",
                  "width": 18,
                  "height": 18,
                  "iconFontName": "mail",
                  "iconFontFamily": "lucide",
                  "fill": "$text-muted"
                },
                {
                  "type": "text",
                  "id": "FormField_Email_Placeholder",
                  "name": "placeholder",
                  "fill": "$text-muted",
                  "content": "email@example.com",
                  "fontFamily": "Roboto",
                  "fontSize": 14
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "FormField_Email_Filled",
          "name": "Molecule/FormField/Email/Filled",
          "reusable": true,
          "width": 360,
          "layout": "vertical",
          "gap": 8,
          "children": [
            {
              "type": "text",
              "name": "label",
              "fill": "$text-secondary",
              "content": "Email",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "500"
            },
            {
              "type": "frame",
              "name": "inputWrapper",
              "width": "fill_container",
              "height": 48,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$border-focus"
              },
              "padding": [
                0,
                16
              ],
              "gap": 10,
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "name": "inputIcon",
                  "width": 18,
                  "height": 18,
                  "iconFontName": "mail",
                  "iconFontFamily": "lucide",
                  "fill": "$orange-primary"
                },
                {
                  "type": "text",
                  "name": "value",
                  "fill": "$text-primary",
                  "content": "user@goodgo.vn",
                  "fontFamily": "Roboto",
                  "fontSize": 14
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "FormField_Email_Error",
          "name": "Molecule/FormField/Email/Error",
          "reusable": true,
          "width": 360,
          "layout": "vertical",
          "gap": 8,
          "children": [
            {
              "type": "text",
              "name": "label",
              "fill": "$text-secondary",
              "content": "Email",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "500"
            },
            {
              "type": "frame",
              "name": "inputWrapper",
              "width": "fill_container",
              "height": 48,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$status-error"
              },
              "padding": [
                0,
                16
              ],
              "gap": 10,
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "name": "inputIcon",
                  "width": 18,
                  "height": 18,
                  "iconFontName": "mail",
                  "iconFontFamily": "lucide",
                  "fill": "$status-error"
                },
                {
                  "type": "text",
                  "name": "value",
                  "fill": "$text-primary",
                  "content": "invalid-email",
                  "fontFamily": "Roboto",
                  "fontSize": 14
                }
              ]
            },
            {
              "type": "frame",
              "name": "errorRow",
              "gap": 6,
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "name": "errorIcon",
                  "width": 14,
                  "height": 14,
                  "iconFontName": "alert-circle",
                  "iconFontFamily": "lucide",
                  "fill": "$status-error"
                },
                {
                  "type": "text",
                  "id": "FormField_Email_ErrorText",
                  "name": "errorText",
                  "fill": "$status-error",
                  "content": "\u0110\u1ecbnh d\u1ea1ng email kh\u00f4ng h\u1ee3p l\u1ec7",
                  "fontFamily": "Roboto",
                  "fontSize": 12
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "FormField_Phone_Default",
          "name": "Molecule/FormField/Phone/Default",
          "reusable": true,
          "width": 360,
          "layout": "vertical",
          "gap": 8,
          "children": [
            {
              "type": "text",
              "name": "label",
              "fill": "$text-secondary",
              "content": "S\u1ed1 \u0111i\u1ec7n tho\u1ea1i",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "500"
            },
            {
              "type": "frame",
              "name": "inputWrapper",
              "width": "fill_container",
              "height": 48,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "gap": 0,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "name": "countryCode",
                  "height": "fill_container",
                  "fill": "$bg-interactive",
                  "cornerRadius": [
                    10,
                    0,
                    0,
                    10
                  ],
                  "padding": [
                    0,
                    12
                  ],
                  "gap": 6,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "name": "flag",
                      "content": "\ud83c\uddfb\ud83c\uddf3",
                      "fontSize": 16
                    },
                    {
                      "type": "text",
                      "name": "code",
                      "fill": "$text-secondary",
                      "content": "+84",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    },
                    {
                      "type": "icon_font",
                      "name": "chevron",
                      "width": 14,
                      "height": 14,
                      "iconFontName": "chevron-down",
                      "iconFontFamily": "lucide",
                      "fill": "$text-muted"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "name": "inputField",
                  "width": "fill_container",
                  "height": "fill_container",
                  "padding": [
                    0,
                    12
                  ],
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "FormField_Phone_Placeholder",
                      "name": "placeholder",
                      "fill": "$text-muted",
                      "content": "912 345 678",
                      "fontFamily": "Roboto",
                      "fontSize": 14
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "FormField_Phone_Filled",
          "name": "Molecule/FormField/Phone/Filled",
          "reusable": true,
          "width": 360,
          "layout": "vertical",
          "gap": 8,
          "children": [
            {
              "type": "text",
              "name": "label",
              "fill": "$text-secondary",
              "content": "S\u1ed1 \u0111i\u1ec7n tho\u1ea1i",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "500"
            },
            {
              "type": "frame",
              "name": "inputWrapper",
              "width": "fill_container",
              "height": 48,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$border-focus"
              },
              "gap": 0,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "name": "countryCode",
                  "height": "fill_container",
                  "fill": "$bg-interactive",
                  "cornerRadius": [
                    10,
                    0,
                    0,
                    10
                  ],
                  "padding": [
                    0,
                    12
                  ],
                  "gap": 6,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "name": "flag",
                      "content": "\ud83c\uddfb\ud83c\uddf3",
                      "fontSize": 16
                    },
                    {
                      "type": "text",
                      "name": "code",
                      "fill": "$text-secondary",
                      "content": "+84",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    },
                    {
                      "type": "icon_font",
                      "name": "chevron",
                      "width": 14,
                      "height": 14,
                      "iconFontName": "chevron-down",
                      "iconFontFamily": "lucide",
                      "fill": "$text-muted"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "name": "inputField",
                  "width": "fill_container",
                  "height": "fill_container",
                  "padding": [
                    0,
                    12
                  ],
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "name": "value",
                      "fill": "$text-primary",
                      "content": "912 345 678",
                      "fontFamily": "Roboto",
                      "fontSize": 14
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "FormField_Password_Default",
          "name": "Molecule/FormField/Password/Default",
          "reusable": true,
          "width": 360,
          "layout": "vertical",
          "gap": 8,
          "children": [
            {
              "type": "text",
              "name": "label",
              "fill": "$text-secondary",
              "content": "M\u1eadt kh\u1ea9u",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "500"
            },
            {
              "type": "frame",
              "name": "inputWrapper",
              "width": "fill_container",
              "height": 48,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "padding": [
                0,
                16
              ],
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "name": "inputContent",
                  "gap": 10,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "name": "inputIcon",
                      "width": 18,
                      "height": 18,
                      "iconFontName": "lock",
                      "iconFontFamily": "lucide",
                      "fill": "$text-muted"
                    },
                    {
                      "type": "text",
                      "name": "placeholder",
                      "fill": "$text-muted",
                      "content": "Nh\u1eadp m\u1eadt kh\u1ea9u",
                      "fontFamily": "Roboto",
                      "fontSize": 14
                    }
                  ]
                },
                {
                  "type": "icon_font",
                  "name": "toggleIcon",
                  "width": 18,
                  "height": 18,
                  "iconFontName": "eye-off",
                  "iconFontFamily": "lucide",
                  "fill": "$text-muted"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "FormField_Password_WithStrength",
          "name": "Molecule/FormField/Password/WithStrength",
          "reusable": true,
          "width": 360,
          "layout": "vertical",
          "gap": 8,
          "children": [
            {
              "type": "text",
              "name": "label",
              "fill": "$text-secondary",
              "content": "M\u1eadt kh\u1ea9u m\u1edbi",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "500"
            },
            {
              "type": "frame",
              "name": "inputWrapper",
              "width": "fill_container",
              "height": 48,
              "fill": "$bg-elevated",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$border-focus"
              },
              "padding": [
                0,
                16
              ],
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "name": "inputContent",
                  "gap": 10,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "name": "inputIcon",
                      "width": 18,
                      "height": 18,
                      "iconFontName": "lock",
                      "iconFontFamily": "lucide",
                      "fill": "$orange-primary"
                    },
                    {
                      "type": "text",
                      "name": "masked",
                      "fill": "$text-primary",
                      "content": "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "letterSpacing": 2
                    }
                  ]
                },
                {
                  "type": "icon_font",
                  "name": "toggleIcon",
                  "width": 18,
                  "height": 18,
                  "iconFontName": "eye-off",
                  "iconFontFamily": "lucide",
                  "fill": "$text-muted"
                }
              ]
            },
            {
              "type": "frame",
              "name": "strengthMeter",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 6,
              "children": [
                {
                  "type": "frame",
                  "name": "strengthBars",
                  "width": "fill_container",
                  "gap": 4,
                  "children": [
                    {
                      "type": "frame",
                      "name": "bar1",
                      "width": "fill_container",
                      "height": 4,
                      "fill": "$status-success",
                      "cornerRadius": 2
                    },
                    {
                      "type": "frame",
                      "name": "bar2",
                      "width": "fill_container",
                      "height": 4,
                      "fill": "$status-success",
                      "cornerRadius": 2
                    },
                    {
                      "type": "frame",
                      "name": "bar3",
                      "width": "fill_container",
                      "height": 4,
                      "fill": "$status-success",
                      "cornerRadius": 2
                    },
                    {
                      "type": "frame",
                      "name": "bar4",
                      "width": "fill_container",
                      "height": 4,
                      "fill": "$bg-interactive",
                      "cornerRadius": 2
                    }
                  ]
                },
                {
                  "type": "text",
                  "name": "strengthLabel",
                  "fill": "$status-success",
                  "content": "Kh\u00e1 m\u1ea1nh",
                  "fontFamily": "Roboto",
                  "fontSize": 12
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "ModeSwitchContainer",
          "name": "Molecule/ModeSwitch/Container",
          "reusable": true,
          "width": 600,
          "height": 48,
          "layout": "horizontal",
          "justifyContent": "center",
          "alignItems": "center",
          "gap": 4,
          "padding": 4,
          "fill": "$bg-surface",
          "cornerRadius": 12,
          "children": [
            {
              "type": "frame",
              "id": "MSRestaurant",
              "name": "modeRestaurantActive",
              "layout": "horizontal",
              "justifyContent": "center",
              "alignItems": "center",
              "gap": 8,
              "padding": [
                8,
                16
              ],
              "fill": "$orange-primary",
              "cornerRadius": 8,
              "children": [
                {
                  "type": "icon_font",
                  "id": "MSRestIcon",
                  "iconFontName": "utensils",
                  "iconFontFamily": "lucide",
                  "width": 16,
                  "height": 16,
                  "fill": "#FFFFFF"
                },
                {
                  "type": "text",
                  "id": "MSRestLabel",
                  "content": "Nh\u00e0 h\u00e0ng",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "500",
                  "fill": "#FFFFFF"
                }
              ]
            },
            {
              "type": "frame",
              "id": "MSBar",
              "name": "modeBarInactive",
              "layout": "horizontal",
              "justifyContent": "center",
              "alignItems": "center",
              "gap": 8,
              "padding": [
                8,
                16
              ],
              "cornerRadius": 8,
              "children": [
                {
                  "type": "icon_font",
                  "id": "MSBarIcon",
                  "iconFontName": "wine",
                  "iconFontFamily": "lucide",
                  "width": 16,
                  "height": 16,
                  "fill": "$text-secondary"
                },
                {
                  "type": "text",
                  "id": "MSBarLabel",
                  "content": "Bar",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "500",
                  "fill": "$text-secondary"
                }
              ]
            },
            {
              "type": "frame",
              "id": "MSKaraoke",
              "name": "modeKaraokeInactive",
              "layout": "horizontal",
              "justifyContent": "center",
              "alignItems": "center",
              "gap": 8,
              "padding": [
                8,
                16
              ],
              "cornerRadius": 8,
              "children": [
                {
                  "type": "icon_font",
                  "id": "MSKarIcon",
                  "iconFontName": "mic",
                  "iconFontFamily": "lucide",
                  "width": 16,
                  "height": 16,
                  "fill": "$text-secondary"
                },
                {
                  "type": "text",
                  "id": "MSKarLabel",
                  "content": "Karaoke",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "500",
                  "fill": "$text-secondary"
                }
              ]
            },
            {
              "type": "frame",
              "id": "MSSpa",
              "name": "modeSpaInactive",
              "layout": "horizontal",
              "justifyContent": "center",
              "alignItems": "center",
              "gap": 8,
              "padding": [
                8,
                16
              ],
              "cornerRadius": 8,
              "children": [
                {
                  "type": "icon_font",
                  "id": "MSSpaIcon",
                  "iconFontName": "sparkles",
                  "iconFontFamily": "lucide",
                  "width": 16,
                  "height": 16,
                  "fill": "$text-secondary"
                },
                {
                  "type": "text",
                  "id": "MSSpaLabel",
                  "content": "Spa",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "500",
                  "fill": "$text-secondary"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "ModeIndRestaurant",
          "name": "Molecule/ModeIndicator/Restaurant",
          "reusable": true,
          "width": 32,
          "height": 32,
          "layout": "vertical",
          "justifyContent": "center",
          "alignItems": "center",
          "fill": "$orange-primary",
          "cornerRadius": 9999,
          "children": [
            {
              "type": "icon_font",
              "id": "MIRestIcon",
              "iconFontName": "utensils",
              "iconFontFamily": "lucide",
              "width": 16,
              "height": 16,
              "fill": "#FFFFFF"
            }
          ]
        },
        {
          "type": "frame",
          "id": "ModeIndBar",
          "name": "Molecule/ModeIndicator/Bar",
          "reusable": true,
          "width": 32,
          "height": 32,
          "layout": "vertical",
          "justifyContent": "center",
          "alignItems": "center",
          "fill": "$bar-primary",
          "cornerRadius": 9999,
          "children": [
            {
              "type": "icon_font",
              "id": "MIBarIcon",
              "iconFontName": "wine",
              "iconFontFamily": "lucide",
              "width": 16,
              "height": 16,
              "fill": "#FFFFFF"
            }
          ]
        },
        {
          "type": "frame",
          "id": "ModeIndKaraoke",
          "name": "Molecule/ModeIndicator/Karaoke",
          "reusable": true,
          "width": 32,
          "height": 32,
          "layout": "vertical",
          "justifyContent": "center",
          "alignItems": "center",
          "fill": "$karaoke-primary",
          "cornerRadius": 9999,
          "children": [
            {
              "type": "icon_font",
              "id": "MIKarIcon",
              "iconFontName": "mic",
              "iconFontFamily": "lucide",
              "width": 16,
              "height": 16,
              "fill": "#FFFFFF"
            }
          ]
        },
        {
          "type": "frame",
          "id": "ModeIndSpa",
          "name": "Molecule/ModeIndicator/Spa",
          "reusable": true,
          "width": 32,
          "height": 32,
          "layout": "vertical",
          "justifyContent": "center",
          "alignItems": "center",
          "fill": "$spa-primary",
          "cornerRadius": 9999,
          "children": [
            {
              "type": "icon_font",
              "id": "MISpaIcon",
              "iconFontName": "sparkles",
              "iconFontFamily": "lucide",
              "width": 16,
              "height": 16,
              "fill": "#FFFFFF"
            }
          ]
        },
        {
          "type": "frame",
          "id": "OrderItemBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "OrderItemBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "ORDER ITEMS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "OrderItem1",
          "name": "Molecule/OrderItem/Standard",
          "reusable": true,
          "width": "fill_container",
          "padding": [
            16,
            20
          ],
          "stroke": {
            "thickness": 1,
            "fill": "$border-subtle",
            "sides": [
              "bottom"
            ]
          },
          "justifyContent": "space_between",
          "alignItems": "center",
          "children": [
            {
              "type": "frame",
              "id": "OrderItem1Left",
              "name": "leftContent",
              "gap": 12,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "OrderItem1Qty",
                  "name": "qtyBadge",
                  "width": 32,
                  "height": 32,
                  "fill": "$bg-elevated",
                  "cornerRadius": 8,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "OrderItem1QtyText",
                      "name": "qty",
                      "fill": "$text-primary",
                      "content": "2",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "OrderItem1Info",
                  "name": "itemInfo",
                  "layout": "vertical",
                  "gap": 4,
                  "children": [
                    {
                      "type": "text",
                      "id": "OrderItem1Name",
                      "name": "itemName",
                      "fill": "$text-primary",
                      "content": "C\u00e0 Ph\u00ea S\u1eefa \u0110\u00e1",
                      "fontFamily": "Roboto",
                      "fontSize": 15,
                      "fontWeight": "500"
                    },
                    {
                      "type": "text",
                      "id": "OrderItem1Note",
                      "name": "itemNote",
                      "fill": "$text-tertiary",
                      "content": "\u00cdt \u0111\u01b0\u1eddng, th\u00eam \u0111\u00e1",
                      "fontFamily": "Roboto",
                      "fontSize": 12,
                      "fontWeight": "normal"
                    }
                  ]
                }
              ]
            },
            {
              "type": "text",
              "id": "OrderItem1Price",
              "name": "itemPrice",
              "fill": "$text-primary",
              "content": "58,000\u20ab",
              "fontFamily": "Roboto",
              "fontSize": 15,
              "fontWeight": "600"
            }
          ]
        },
        {
          "type": "frame",
          "id": "OrderItem2",
          "name": "Molecule/OrderItem/WithModifiers",
          "reusable": true,
          "width": "fill_container",
          "layout": "vertical",
          "padding": [
            16,
            20
          ],
          "stroke": {
            "thickness": 1,
            "fill": "$border-subtle",
            "sides": [
              "bottom"
            ]
          },
          "gap": 8,
          "children": [
            {
              "type": "frame",
              "id": "OrderItem2Main",
              "name": "mainRow",
              "width": "fill_container",
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "OrderItem2Left",
                  "name": "leftContent",
                  "gap": 12,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "frame",
                      "id": "OrderItem2Qty",
                      "name": "qtyBadge",
                      "width": 32,
                      "height": 32,
                      "fill": "$bg-elevated",
                      "cornerRadius": 8,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "text",
                          "id": "OrderItem2QtyText",
                          "name": "qty",
                          "fill": "$text-primary",
                          "content": "1",
                          "fontFamily": "Roboto",
                          "fontSize": 14,
                          "fontWeight": "600"
                        }
                      ]
                    },
                    {
                      "type": "text",
                      "id": "OrderItem2Name",
                      "name": "itemName",
                      "fill": "$text-primary",
                      "content": "B\u00e1nh M\u00ec Th\u1ecbt Ngu\u1ed9i",
                      "fontFamily": "Roboto",
                      "fontSize": 15,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "text",
                  "id": "OrderItem2Price",
                  "name": "itemPrice",
                  "fill": "$text-primary",
                  "content": "45,000\u20ab",
                  "fontFamily": "Roboto",
                  "fontSize": 15,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "frame",
              "id": "OrderItem2Mods",
              "name": "modifierList",
              "padding": [
                0,
                0,
                0,
                44
              ],
              "layout": "vertical",
              "gap": 4,
              "children": [
                {
                  "type": "text",
                  "id": "OrderItem2Mod1",
                  "name": "modifier1",
                  "fill": "$text-tertiary",
                  "content": "+ Ph\u00f4 mai (+10,000\u20ab)",
                  "fontFamily": "Roboto",
                  "fontSize": 12,
                  "fontWeight": "normal"
                },
                {
                  "type": "text",
                  "id": "OrderItem2Mod2",
                  "name": "modifier2",
                  "fill": "$text-tertiary",
                  "content": "+ Tr\u1ee9ng \u1ed1p la (+8,000\u20ab)",
                  "fontFamily": "Roboto",
                  "fontSize": 12,
                  "fontWeight": "normal"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "BillRowBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "BillRowBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "BILL SUMMARY",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "BillSubtotal",
          "name": "Molecule/BillRow/Subtotal",
          "reusable": true,
          "width": "fill_container",
          "padding": [
            8,
            0
          ],
          "justifyContent": "space_between",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "BillSubtotalLabel",
              "name": "label",
              "fill": "$text-secondary",
              "content": "T\u1ea1m t\u00ednh",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "normal"
            },
            {
              "type": "text",
              "id": "BillSubtotalValue",
              "name": "value",
              "fill": "$text-secondary",
              "content": "103,000\u20ab",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "BillDiscount",
          "name": "Molecule/BillRow/Discount",
          "reusable": true,
          "width": "fill_container",
          "padding": [
            8,
            0
          ],
          "justifyContent": "space_between",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "BillDiscountLabel",
              "name": "label",
              "fill": "$green-success",
              "content": "Gi\u1ea3m gi\u00e1 (10%)",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "normal"
            },
            {
              "type": "text",
              "id": "BillDiscountValue",
              "name": "value",
              "fill": "$green-success",
              "content": "-10,300\u20ab",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "BillTax",
          "name": "Molecule/BillRow/Tax",
          "reusable": true,
          "width": "fill_container",
          "padding": [
            8,
            0
          ],
          "justifyContent": "space_between",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "BillTaxLabel",
              "name": "label",
              "fill": "$text-tertiary",
              "content": "VAT (8%)",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "normal"
            },
            {
              "type": "text",
              "id": "BillTaxValue",
              "name": "value",
              "fill": "$text-tertiary",
              "content": "7,416\u20ab",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "BillDivider",
          "name": "divider",
          "width": "fill_container",
          "height": 1,
          "fill": "$border-subtle",
          "margin": [
            12,
            0
          ]
        },
        {
          "type": "frame",
          "id": "BillTotal",
          "name": "Molecule/BillRow/Total",
          "reusable": true,
          "width": "fill_container",
          "padding": [
            12,
            0
          ],
          "justifyContent": "space_between",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "BillTotalLabel",
              "name": "label",
              "fill": "$text-primary",
              "content": "T\u1ed5ng c\u1ed9ng",
              "fontFamily": "Roboto",
              "fontSize": 18,
              "fontWeight": "600"
            },
            {
              "type": "text",
              "id": "BillTotalValue",
              "name": "value",
              "fill": "$orange-primary",
              "content": "100,116\u20ab",
              "fontFamily": "Roboto",
              "fontSize": 22,
              "fontWeight": "700"
            }
          ]
        },
        {
          "type": "frame",
          "id": "ProductCardBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "ProductCardBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "PRODUCT CARDS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "ProductCard1",
          "name": "Molecule/ProductCard/POS",
          "reusable": true,
          "width": 140,
          "fill": "$bg-elevated",
          "cornerRadius": 12,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "layout": "vertical",
          "clip": true,
          "children": [
            {
              "type": "frame",
              "id": "ProductCard1Img",
              "name": "productImage",
              "width": "fill_container",
              "height": 100,
              "fill": "#3B82F618"
            },
            {
              "type": "frame",
              "id": "ProductCard1Content",
              "name": "content",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 4,
              "padding": 12,
              "children": [
                {
                  "type": "text",
                  "id": "ProductCard1Name",
                  "name": "productName",
                  "fill": "$text-primary",
                  "content": "C\u00e0 Ph\u00ea S\u1eefa",
                  "fontFamily": "Roboto",
                  "fontSize": 13,
                  "fontWeight": "500"
                },
                {
                  "type": "text",
                  "id": "ProductCard1Price",
                  "name": "productPrice",
                  "fill": "$orange-primary",
                  "content": "29,000\u20ab",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "600"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "ProductCard2",
          "name": "Molecule/ProductCard/POS/Selected",
          "reusable": true,
          "width": 140,
          "fill": "$bg-elevated",
          "cornerRadius": 12,
          "stroke": {
            "thickness": 2,
            "fill": "$orange-primary"
          },
          "layout": "vertical",
          "clip": true,
          "children": [
            {
              "type": "frame",
              "id": "ProductCard2Img",
              "name": "productImage",
              "width": "fill_container",
              "height": 100,
              "fill": "#22C55E18"
            },
            {
              "type": "frame",
              "id": "ProductCard2Content",
              "name": "content",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 4,
              "padding": 12,
              "children": [
                {
                  "type": "text",
                  "id": "ProductCard2Name",
                  "name": "productName",
                  "fill": "$text-primary",
                  "content": "Tr\u00e0 \u0110\u00e0o",
                  "fontFamily": "Roboto",
                  "fontSize": 13,
                  "fontWeight": "500"
                },
                {
                  "type": "text",
                  "id": "ProductCard2Price",
                  "name": "productPrice",
                  "fill": "$orange-primary",
                  "content": "35,000\u20ab",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "600"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "ProductCard3",
          "name": "Molecule/ProductCard/POS/OutOfStock",
          "reusable": true,
          "width": 140,
          "fill": "$bg-elevated",
          "cornerRadius": 12,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "layout": "vertical",
          "clip": true,
          "opacity": 0.5,
          "children": [
            {
              "type": "frame",
              "id": "ProductCard3Img",
              "name": "productImage",
              "width": "fill_container",
              "height": 100,
              "fill": "#6B6B7018",
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "ProductCard3OOS",
                  "name": "oosLabel",
                  "fill": "$text-disabled",
                  "content": "H\u1ebft h\u00e0ng",
                  "fontFamily": "Roboto",
                  "fontSize": 12,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "frame",
              "id": "ProductCard3Content",
              "name": "content",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 4,
              "padding": 12,
              "children": [
                {
                  "type": "text",
                  "id": "ProductCard3Name",
                  "name": "productName",
                  "fill": "$text-disabled",
                  "content": "Sinh T\u1ed1 B\u01a1",
                  "fontFamily": "Roboto",
                  "fontSize": 13,
                  "fontWeight": "500"
                },
                {
                  "type": "text",
                  "id": "ProductCard3Price",
                  "name": "productPrice",
                  "fill": "$text-disabled",
                  "content": "45,000\u20ab",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "600"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "SOCIAL LOGIN",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "SocialRow_Full",
          "name": "Molecule/SocialLoginRow/Full",
          "reusable": true,
          "width": 360,
          "layout": "vertical",
          "gap": 16,
          "children": [
            {
              "type": "frame",
              "name": "dividerRow",
              "width": "fill_container",
              "gap": 16,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "name": "line1",
                  "width": "fill_container",
                  "height": 1,
                  "fill": "$border-default"
                },
                {
                  "type": "text",
                  "name": "orText",
                  "fill": "$text-muted",
                  "content": "ho\u1eb7c",
                  "fontFamily": "Roboto",
                  "fontSize": 12
                },
                {
                  "type": "frame",
                  "name": "line2",
                  "width": "fill_container",
                  "height": 1,
                  "fill": "$border-default"
                }
              ]
            },
            {
              "type": "frame",
              "name": "socialButtons",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 12,
              "children": [
                {
                  "type": "frame",
                  "name": "googleBtn",
                  "width": "fill_container",
                  "height": 48,
                  "fill": "#FFFFFF",
                  "cornerRadius": 10,
                  "gap": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "name": "googleIcon",
                      "fill": "#4285F4",
                      "content": "G",
                      "fontFamily": "Roboto",
                      "fontSize": 16,
                      "fontWeight": "700"
                    },
                    {
                      "type": "text",
                      "name": "btnLabel",
                      "fill": "#1F1F1F",
                      "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Google",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "name": "appleBtn",
                  "width": "fill_container",
                  "height": 48,
                  "fill": "#000000",
                  "cornerRadius": 10,
                  "gap": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "name": "appleIcon",
                      "width": 20,
                      "height": 20,
                      "iconFontName": "apple",
                      "iconFontFamily": "lucide",
                      "fill": "#FFFFFF"
                    },
                    {
                      "type": "text",
                      "name": "btnLabel",
                      "fill": "#FFFFFF",
                      "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Apple",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "name": "zaloBtn",
                  "width": "fill_container",
                  "height": 48,
                  "fill": "#0068FF",
                  "cornerRadius": 10,
                  "gap": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "name": "zaloIcon",
                      "fill": "#FFFFFF",
                      "content": "Z",
                      "fontFamily": "Roboto",
                      "fontSize": 18,
                      "fontWeight": "700"
                    },
                    {
                      "type": "text",
                      "name": "btnLabel",
                      "fill": "#FFFFFF",
                      "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Zalo",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "SocialRow_Compact",
          "name": "Molecule/SocialLoginRow/Compact",
          "reusable": true,
          "width": 360,
          "layout": "vertical",
          "gap": 16,
          "children": [
            {
              "type": "frame",
              "name": "dividerRow",
              "width": "fill_container",
              "gap": 16,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "name": "line1",
                  "width": "fill_container",
                  "height": 1,
                  "fill": "$border-default"
                },
                {
                  "type": "text",
                  "name": "orText",
                  "fill": "$text-muted",
                  "content": "ho\u1eb7c ti\u1ebfp t\u1ee5c v\u1edbi",
                  "fontFamily": "Roboto",
                  "fontSize": 12
                },
                {
                  "type": "frame",
                  "name": "line2",
                  "width": "fill_container",
                  "height": 1,
                  "fill": "$border-default"
                }
              ]
            },
            {
              "type": "frame",
              "name": "socialIconsRow",
              "width": "fill_container",
              "justifyContent": "center",
              "gap": 16,
              "children": [
                {
                  "type": "frame",
                  "name": "googleIcon",
                  "width": 48,
                  "height": 48,
                  "fill": "#FFFFFF",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "fill": "#4285F4",
                      "content": "G",
                      "fontFamily": "Roboto",
                      "fontSize": 20,
                      "fontWeight": "700"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "name": "appleIcon",
                  "width": 48,
                  "height": 48,
                  "fill": "#000000",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "width": 22,
                      "height": 22,
                      "iconFontName": "apple",
                      "iconFontFamily": "lucide",
                      "fill": "#FFFFFF"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "name": "zaloIcon",
                  "width": 48,
                  "height": 48,
                  "fill": "#0068FF",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "fill": "#FFFFFF",
                      "content": "Z",
                      "fontFamily": "Roboto",
                      "fontSize": 20,
                      "fontWeight": "700"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "name": "facebookIcon",
                  "width": 48,
                  "height": 48,
                  "fill": "#1877F2",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "width": 22,
                      "height": 22,
                      "iconFontName": "facebook",
                      "iconFontFamily": "lucide",
                      "fill": "#FFFFFF"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "LOGIN CARDS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "LoginCard_Standard",
          "name": "Organism/LoginCard/Standard",
          "reusable": true,
          "width": 420,
          "fill": "$bg-surface",
          "cornerRadius": 20,
          "stroke": {
            "thickness": 1,
            "fill": "$border-subtle"
          },
          "layout": "vertical",
          "gap": 32,
          "padding": 40,
          "children": [
            {
              "type": "frame",
              "name": "cardHeader",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 8,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "name": "logoContainer",
                  "width": 48,
                  "height": 48,
                  "fill": {
                    "type": "gradient",
                    "gradientType": "linear",
                    "rotation": 135,
                    "colors": [
                      {
                        "color": "#FF5C00",
                        "position": 0
                      },
                      {
                        "color": "#FF8A4C",
                        "position": 1
                      }
                    ]
                  },
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "name": "logoText",
                      "fill": "$text-primary",
                      "content": "a",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "700"
                    }
                  ]
                },
                {
                  "type": "text",
                  "id": "LoginCard_Title",
                  "name": "cardTitle",
                  "fill": "$text-primary",
                  "content": "\u0110\u0103ng nh\u1eadp",
                  "fontFamily": "Roboto",
                  "fontSize": 24,
                  "fontWeight": "600"
                },
                {
                  "type": "text",
                  "id": "LoginCard_Subtitle",
                  "name": "cardSubtitle",
                  "fill": "$text-tertiary",
                  "content": "Ch\u00e0o m\u1eebng quay tr\u1edf l\u1ea1i",
                  "fontFamily": "Roboto",
                  "fontSize": 14
                }
              ]
            },
            {
              "type": "frame",
              "name": "formSection",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 20,
              "children": [
                {
                  "type": "frame",
                  "name": "emailField",
                  "width": "fill_container",
                  "layout": "vertical",
                  "gap": 8,
                  "children": [
                    {
                      "type": "text",
                      "name": "label",
                      "fill": "$text-secondary",
                      "content": "Email ho\u1eb7c s\u1ed1 \u0111i\u1ec7n tho\u1ea1i",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    },
                    {
                      "type": "frame",
                      "name": "inputWrapper",
                      "width": "fill_container",
                      "height": 48,
                      "fill": "$bg-elevated",
                      "cornerRadius": 10,
                      "stroke": {
                        "thickness": 1,
                        "fill": "$border-default"
                      },
                      "padding": [
                        0,
                        16
                      ],
                      "gap": 10,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "name": "inputIcon",
                          "width": 18,
                          "height": 18,
                          "iconFontName": "user",
                          "iconFontFamily": "lucide",
                          "fill": "$text-muted"
                        },
                        {
                          "type": "text",
                          "name": "placeholder",
                          "fill": "$text-muted",
                          "content": "email@example.com",
                          "fontFamily": "Roboto",
                          "fontSize": 14
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "name": "passwordField",
                  "width": "fill_container",
                  "layout": "vertical",
                  "gap": 8,
                  "children": [
                    {
                      "type": "frame",
                      "name": "labelRow",
                      "width": "fill_container",
                      "justifyContent": "space_between",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "text",
                          "name": "label",
                          "fill": "$text-secondary",
                          "content": "M\u1eadt kh\u1ea9u",
                          "fontFamily": "Roboto",
                          "fontSize": 14,
                          "fontWeight": "500"
                        },
                        {
                          "type": "text",
                          "name": "forgotLink",
                          "fill": "$orange-primary",
                          "content": "Qu\u00ean m\u1eadt kh\u1ea9u?",
                          "fontFamily": "Roboto",
                          "fontSize": 13
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "name": "inputWrapper",
                      "width": "fill_container",
                      "height": 48,
                      "fill": "$bg-elevated",
                      "cornerRadius": 10,
                      "stroke": {
                        "thickness": 1,
                        "fill": "$border-default"
                      },
                      "padding": [
                        0,
                        16
                      ],
                      "justifyContent": "space_between",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "frame",
                          "name": "inputContent",
                          "gap": 10,
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "icon_font",
                              "name": "inputIcon",
                              "width": 18,
                              "height": 18,
                              "iconFontName": "lock",
                              "iconFontFamily": "lucide",
                              "fill": "$text-muted"
                            },
                            {
                              "type": "text",
                              "name": "placeholder",
                              "fill": "$text-muted",
                              "content": "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
                              "fontFamily": "Roboto",
                              "fontSize": 14
                            }
                          ]
                        },
                        {
                          "type": "icon_font",
                          "name": "toggleIcon",
                          "width": 18,
                          "height": 18,
                          "iconFontName": "eye-off",
                          "iconFontFamily": "lucide",
                          "fill": "$text-muted"
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "name": "submitButton",
              "width": "fill_container",
              "height": 48,
              "fill": {
                "type": "gradient",
                "gradientType": "linear",
                "rotation": 135,
                "colors": [
                  {
                    "color": "#FF5C00",
                    "position": 0
                  },
                  {
                    "color": "#FF8A4C",
                    "position": 1
                  }
                ]
              },
              "cornerRadius": 10,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "name": "btnLabel",
                  "fill": "$text-primary",
                  "content": "\u0110\u0103ng nh\u1eadp",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "frame",
              "name": "footerLinks",
              "width": "fill_container",
              "justifyContent": "center",
              "gap": 4,
              "children": [
                {
                  "type": "text",
                  "name": "text",
                  "fill": "$text-tertiary",
                  "content": "Ch\u01b0a c\u00f3 t\u00e0i kho\u1ea3n?",
                  "fontFamily": "Roboto",
                  "fontSize": 14
                },
                {
                  "type": "text",
                  "name": "link",
                  "fill": "$orange-primary",
                  "content": "\u0110\u0103ng k\u00fd ngay",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "500"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "LoginCard_WithSocial",
          "name": "Organism/LoginCard/WithSocial",
          "reusable": true,
          "width": 420,
          "fill": "$bg-surface",
          "cornerRadius": 20,
          "stroke": {
            "thickness": 1,
            "fill": "$border-subtle"
          },
          "layout": "vertical",
          "gap": 24,
          "padding": 40,
          "children": [
            {
              "type": "frame",
              "name": "cardHeader",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 8,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "name": "logoContainer",
                  "width": 48,
                  "height": 48,
                  "fill": {
                    "type": "gradient",
                    "gradientType": "linear",
                    "rotation": 135,
                    "colors": [
                      {
                        "color": "#FF5C00",
                        "position": 0
                      },
                      {
                        "color": "#FF8A4C",
                        "position": 1
                      }
                    ]
                  },
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "name": "logoText",
                      "fill": "$text-primary",
                      "content": "G",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "700"
                    }
                  ]
                },
                {
                  "type": "text",
                  "name": "cardTitle",
                  "fill": "$text-primary",
                  "content": "\u0110\u0103ng nh\u1eadp",
                  "fontFamily": "Roboto",
                  "fontSize": 24,
                  "fontWeight": "600"
                },
                {
                  "type": "text",
                  "name": "cardSubtitle",
                  "fill": "$text-tertiary",
                  "content": "\u0110\u1eb7t h\u00e0ng v\u00e0 t\u00edch \u0111i\u1ec3m",
                  "fontFamily": "Roboto",
                  "fontSize": 14
                }
              ]
            },
            {
              "type": "frame",
              "name": "formSection",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 16,
              "children": [
                {
                  "type": "frame",
                  "name": "phoneField",
                  "width": "fill_container",
                  "layout": "vertical",
                  "gap": 8,
                  "children": [
                    {
                      "type": "text",
                      "name": "label",
                      "fill": "$text-secondary",
                      "content": "S\u1ed1 \u0111i\u1ec7n tho\u1ea1i",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    },
                    {
                      "type": "frame",
                      "name": "inputWrapper",
                      "width": "fill_container",
                      "height": 48,
                      "fill": "$bg-elevated",
                      "cornerRadius": 10,
                      "stroke": {
                        "thickness": 1,
                        "fill": "$border-default"
                      },
                      "gap": 0,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "frame",
                          "name": "countryCode",
                          "height": "fill_container",
                          "fill": "$bg-interactive",
                          "cornerRadius": [
                            10,
                            0,
                            0,
                            10
                          ],
                          "padding": [
                            0,
                            12
                          ],
                          "gap": 6,
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "text",
                              "name": "flag",
                              "content": "\ud83c\uddfb\ud83c\uddf3",
                              "fontSize": 16
                            },
                            {
                              "type": "text",
                              "name": "code",
                              "fill": "$text-secondary",
                              "content": "+84",
                              "fontFamily": "Roboto",
                              "fontSize": 14,
                              "fontWeight": "500"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "name": "inputField",
                          "width": "fill_container",
                          "height": "fill_container",
                          "padding": [
                            0,
                            12
                          ],
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "text",
                              "name": "placeholder",
                              "fill": "$text-muted",
                              "content": "Nh\u1eadp s\u1ed1 \u0111i\u1ec7n tho\u1ea1i",
                              "fontFamily": "Roboto",
                              "fontSize": 14
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "name": "submitButton",
              "width": "fill_container",
              "height": 48,
              "fill": {
                "type": "gradient",
                "gradientType": "linear",
                "rotation": 135,
                "colors": [
                  {
                    "color": "#FF5C00",
                    "position": 0
                  },
                  {
                    "color": "#FF8A4C",
                    "position": 1
                  }
                ]
              },
              "cornerRadius": 10,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "name": "btnLabel",
                  "fill": "$text-primary",
                  "content": "G\u1eedi m\u00e3 OTP",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "frame",
              "name": "socialDivider",
              "width": "fill_container",
              "gap": 16,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "name": "line1",
                  "width": "fill_container",
                  "height": 1,
                  "fill": "$border-default"
                },
                {
                  "type": "text",
                  "name": "orText",
                  "fill": "$text-muted",
                  "content": "ho\u1eb7c",
                  "fontFamily": "Roboto",
                  "fontSize": 12
                },
                {
                  "type": "frame",
                  "name": "line2",
                  "width": "fill_container",
                  "height": 1,
                  "fill": "$border-default"
                }
              ]
            },
            {
              "type": "frame",
              "name": "socialIconsRow",
              "width": "fill_container",
              "justifyContent": "center",
              "gap": 16,
              "children": [
                {
                  "type": "frame",
                  "name": "googleIcon",
                  "width": 48,
                  "height": 48,
                  "fill": "#FFFFFF",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "fill": "#4285F4",
                      "content": "G",
                      "fontFamily": "Roboto",
                      "fontSize": 20,
                      "fontWeight": "700"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "name": "appleIcon",
                  "width": 48,
                  "height": 48,
                  "fill": "#000000",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "width": 22,
                      "height": 22,
                      "iconFontName": "apple",
                      "iconFontFamily": "lucide",
                      "fill": "#FFFFFF"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "name": "zaloIcon",
                  "width": 48,
                  "height": 48,
                  "fill": "#0068FF",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "fill": "#FFFFFF",
                      "content": "Z",
                      "fontFamily": "Roboto",
                      "fontSize": 20,
                      "fontWeight": "700"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "name": "footerLinks",
              "width": "fill_container",
              "justifyContent": "center",
              "gap": 4,
              "children": [
                {
                  "type": "text",
                  "name": "text",
                  "fill": "$text-tertiary",
                  "content": "L\u1ea7n \u0111\u1ea7u s\u1eed d\u1ee5ng?",
                  "fontFamily": "Roboto",
                  "fontSize": 14
                },
                {
                  "type": "text",
                  "name": "link",
                  "fill": "$orange-primary",
                  "content": "T\u1ea1o t\u00e0i kho\u1ea3n",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "500"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "LoginCard_Staff",
          "name": "Organism/LoginCard/Staff",
          "reusable": true,
          "width": 420,
          "fill": "$bg-surface",
          "cornerRadius": 20,
          "stroke": {
            "thickness": 1,
            "fill": "$border-subtle"
          },
          "layout": "vertical",
          "gap": 32,
          "padding": 40,
          "children": [
            {
              "type": "frame",
              "name": "cardHeader",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 8,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "name": "roleBadge",
                  "fill": "$status-success-bg",
                  "cornerRadius": 100,
                  "padding": [
                    6,
                    14
                  ],
                  "children": [
                    {
                      "type": "text",
                      "name": "roleText",
                      "fill": "$status-success",
                      "content": "NH\u00c2N VI\u00caN",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "600",
                      "letterSpacing": 1
                    }
                  ]
                },
                {
                  "type": "text",
                  "name": "cardTitle",
                  "fill": "$text-primary",
                  "content": "\u0110\u0103ng nh\u1eadp h\u1ec7 th\u1ed1ng",
                  "fontFamily": "Roboto",
                  "fontSize": 24,
                  "fontWeight": "600"
                },
                {
                  "type": "text",
                  "name": "cardSubtitle",
                  "fill": "$text-tertiary",
                  "content": "D\u00e0nh cho nh\u00e2n vi\u00ean ph\u1ee5c v\u1ee5",
                  "fontFamily": "Roboto",
                  "fontSize": 14
                }
              ]
            },
            {
              "type": "frame",
              "name": "formSection",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 20,
              "children": [
                {
                  "type": "frame",
                  "name": "emailField",
                  "width": "fill_container",
                  "layout": "vertical",
                  "gap": 8,
                  "children": [
                    {
                      "type": "text",
                      "name": "label",
                      "fill": "$text-secondary",
                      "content": "Email ho\u1eb7c s\u1ed1 \u0111i\u1ec7n tho\u1ea1i",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    },
                    {
                      "type": "frame",
                      "name": "inputWrapper",
                      "width": "fill_container",
                      "height": 48,
                      "fill": "$bg-elevated",
                      "cornerRadius": 10,
                      "stroke": {
                        "thickness": 1,
                        "fill": "$border-default"
                      },
                      "padding": [
                        0,
                        16
                      ],
                      "gap": 10,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "name": "inputIcon",
                          "width": 18,
                          "height": 18,
                          "iconFontName": "user",
                          "iconFontFamily": "lucide",
                          "fill": "$text-muted"
                        },
                        {
                          "type": "text",
                          "name": "placeholder",
                          "fill": "$text-muted",
                          "content": "T\u00e0i kho\u1ea3n \u0111\u01b0\u1ee3c c\u1ea5p",
                          "fontFamily": "Roboto",
                          "fontSize": 14
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "name": "passwordField",
                  "width": "fill_container",
                  "layout": "vertical",
                  "gap": 8,
                  "children": [
                    {
                      "type": "text",
                      "name": "label",
                      "fill": "$text-secondary",
                      "content": "M\u1eadt kh\u1ea9u",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    },
                    {
                      "type": "frame",
                      "name": "inputWrapper",
                      "width": "fill_container",
                      "height": 48,
                      "fill": "$bg-elevated",
                      "cornerRadius": 10,
                      "stroke": {
                        "thickness": 1,
                        "fill": "$border-default"
                      },
                      "padding": [
                        0,
                        16
                      ],
                      "justifyContent": "space_between",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "frame",
                          "name": "inputContent",
                          "gap": 10,
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "icon_font",
                              "name": "inputIcon",
                              "width": 18,
                              "height": 18,
                              "iconFontName": "lock",
                              "iconFontFamily": "lucide",
                              "fill": "$text-muted"
                            },
                            {
                              "type": "text",
                              "name": "placeholder",
                              "fill": "$text-muted",
                              "content": "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
                              "fontFamily": "Roboto",
                              "fontSize": 14
                            }
                          ]
                        },
                        {
                          "type": "icon_font",
                          "name": "toggleIcon",
                          "width": 18,
                          "height": 18,
                          "iconFontName": "eye-off",
                          "iconFontFamily": "lucide",
                          "fill": "$text-muted"
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "name": "submitButton",
              "width": "fill_container",
              "height": 48,
              "fill": "$status-success",
              "cornerRadius": 10,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "name": "btnLabel",
                  "fill": "$text-primary",
                  "content": "\u0110\u0103ng nh\u1eadp",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "600"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "LoginCard_Admin",
          "name": "Organism/LoginCard/Admin",
          "reusable": true,
          "width": 420,
          "fill": "$bg-surface",
          "cornerRadius": 20,
          "stroke": {
            "thickness": 1,
            "fill": "$border-subtle"
          },
          "layout": "vertical",
          "gap": 32,
          "padding": 40,
          "children": [
            {
              "type": "frame",
              "name": "cardHeader",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 8,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "name": "roleBadge",
                  "fill": "$status-info-bg",
                  "cornerRadius": 100,
                  "padding": [
                    6,
                    14
                  ],
                  "children": [
                    {
                      "type": "text",
                      "name": "roleText",
                      "fill": "$status-info",
                      "content": "ADMIN",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "600",
                      "letterSpacing": 1
                    }
                  ]
                },
                {
                  "type": "text",
                  "name": "cardTitle",
                  "fill": "$text-primary",
                  "content": "\u0110\u0103ng nh\u1eadp qu\u1ea3n tr\u1ecb",
                  "fontFamily": "Roboto",
                  "fontSize": 24,
                  "fontWeight": "600"
                },
                {
                  "type": "text",
                  "name": "cardSubtitle",
                  "fill": "$text-tertiary",
                  "content": "B\u1ea3ng \u0111i\u1ec1u khi\u1ec3n h\u1ec7 th\u1ed1ng",
                  "fontFamily": "Roboto",
                  "fontSize": 14
                }
              ]
            },
            {
              "type": "frame",
              "name": "formSection",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 20,
              "children": [
                {
                  "type": "frame",
                  "name": "emailField",
                  "width": "fill_container",
                  "layout": "vertical",
                  "gap": 8,
                  "children": [
                    {
                      "type": "text",
                      "name": "label",
                      "fill": "$text-secondary",
                      "content": "Email ho\u1eb7c s\u1ed1 \u0111i\u1ec7n tho\u1ea1i",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    },
                    {
                      "type": "frame",
                      "name": "inputWrapper",
                      "width": "fill_container",
                      "height": 48,
                      "fill": "$bg-elevated",
                      "cornerRadius": 10,
                      "stroke": {
                        "thickness": 1,
                        "fill": "$border-default"
                      },
                      "padding": [
                        0,
                        16
                      ],
                      "gap": 10,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "name": "inputIcon",
                          "width": 18,
                          "height": 18,
                          "iconFontName": "shield",
                          "iconFontFamily": "lucide",
                          "fill": "$text-muted"
                        },
                        {
                          "type": "text",
                          "name": "placeholder",
                          "fill": "$text-muted",
                          "content": "admin@company.com",
                          "fontFamily": "Roboto",
                          "fontSize": 14
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "name": "passwordField",
                  "width": "fill_container",
                  "layout": "vertical",
                  "gap": 8,
                  "children": [
                    {
                      "type": "text",
                      "name": "label",
                      "fill": "$text-secondary",
                      "content": "M\u1eadt kh\u1ea9u",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    },
                    {
                      "type": "frame",
                      "name": "inputWrapper",
                      "width": "fill_container",
                      "height": 48,
                      "fill": "$bg-elevated",
                      "cornerRadius": 10,
                      "stroke": {
                        "thickness": 1,
                        "fill": "$border-default"
                      },
                      "padding": [
                        0,
                        16
                      ],
                      "justifyContent": "space_between",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "frame",
                          "name": "inputContent",
                          "gap": 10,
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "icon_font",
                              "name": "inputIcon",
                              "width": 18,
                              "height": 18,
                              "iconFontName": "lock",
                              "iconFontFamily": "lucide",
                              "fill": "$text-muted"
                            },
                            {
                              "type": "text",
                              "name": "placeholder",
                              "fill": "$text-muted",
                              "content": "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
                              "fontFamily": "Roboto",
                              "fontSize": 14
                            }
                          ]
                        },
                        {
                          "type": "icon_font",
                          "name": "toggleIcon",
                          "width": 18,
                          "height": 18,
                          "iconFontName": "eye-off",
                          "iconFontFamily": "lucide",
                          "fill": "$text-muted"
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "name": "submitButton",
              "width": "fill_container",
              "height": 48,
              "fill": "$status-info",
              "cornerRadius": 10,
              "gap": 8,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "name": "btnIcon",
                  "width": 18,
                  "height": 18,
                  "iconFontName": "shield-check",
                  "iconFontFamily": "lucide",
                  "fill": "$text-primary"
                },
                {
                  "type": "text",
                  "name": "btnLabel",
                  "fill": "$text-primary",
                  "content": "\u0110\u0103ng nh\u1eadp b\u1ea3o m\u1eadt",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "600"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "OTP VERIFICATION",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "OTPCard_Default",
          "name": "Organism/OTPVerify/Default",
          "reusable": true,
          "width": 420,
          "fill": "$bg-surface",
          "cornerRadius": 20,
          "stroke": {
            "thickness": 1,
            "fill": "$border-subtle"
          },
          "layout": "vertical",
          "gap": 32,
          "padding": 40,
          "alignItems": "center",
          "children": [
            {
              "type": "frame",
              "name": "cardHeader",
              "layout": "vertical",
              "gap": 12,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "name": "iconContainer",
                  "width": 64,
                  "height": 64,
                  "fill": "$status-info-bg",
                  "cornerRadius": 32,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "name": "phoneIcon",
                      "width": 28,
                      "height": 28,
                      "iconFontName": "smartphone",
                      "iconFontFamily": "lucide",
                      "fill": "$status-info"
                    }
                  ]
                },
                {
                  "type": "text",
                  "name": "cardTitle",
                  "fill": "$text-primary",
                  "content": "X\u00e1c th\u1ef1c OTP",
                  "fontFamily": "Roboto",
                  "fontSize": 24,
                  "fontWeight": "600"
                },
                {
                  "type": "text",
                  "name": "cardSubtitle",
                  "fill": "$text-tertiary",
                  "textGrowth": "fixed-width",
                  "width": 300,
                  "content": "Nh\u1eadp m\u00e3 6 ch\u1eef s\u1ed1 \u0111\u00e3 g\u1eedi \u0111\u1ebfn s\u1ed1 \u0111i\u1ec7n tho\u1ea1i c\u1ee7a b\u1ea1n",
                  "lineHeight": 1.5,
                  "textAlign": "center",
                  "fontFamily": "Roboto",
                  "fontSize": 14
                },
                {
                  "type": "text",
                  "id": "OTP_PhoneNumber",
                  "name": "phoneNumber",
                  "fill": "$orange-primary",
                  "content": "+84 912 ***678",
                  "fontFamily": "Roboto",
                  "fontSize": 16,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "frame",
              "name": "otpInputs",
              "gap": 8,
              "children": [
                {
                  "type": "frame",
                  "name": "d1",
                  "width": 48,
                  "height": 56,
                  "fill": "$bg-elevated",
                  "cornerRadius": 10,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": []
                },
                {
                  "type": "frame",
                  "name": "d2",
                  "width": 48,
                  "height": 56,
                  "fill": "$bg-elevated",
                  "cornerRadius": 10,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": []
                },
                {
                  "type": "frame",
                  "name": "d3",
                  "width": 48,
                  "height": 56,
                  "fill": "$bg-elevated",
                  "cornerRadius": 10,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": []
                },
                {
                  "type": "text",
                  "name": "separator",
                  "fill": "$text-muted",
                  "content": "\u2014",
                  "fontFamily": "Roboto",
                  "fontSize": 20
                },
                {
                  "type": "frame",
                  "name": "d4",
                  "width": 48,
                  "height": 56,
                  "fill": "$bg-elevated",
                  "cornerRadius": 10,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": []
                },
                {
                  "type": "frame",
                  "name": "d5",
                  "width": 48,
                  "height": 56,
                  "fill": "$bg-elevated",
                  "cornerRadius": 10,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": []
                },
                {
                  "type": "frame",
                  "name": "d6",
                  "width": 48,
                  "height": 56,
                  "fill": "$bg-elevated",
                  "cornerRadius": 10,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": []
                }
              ]
            },
            {
              "type": "frame",
              "name": "timerRow",
              "gap": 4,
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "name": "timerText",
                  "fill": "$text-tertiary",
                  "content": "M\u00e3 h\u1ebft h\u1ea1n sau",
                  "fontFamily": "Roboto",
                  "fontSize": 14
                },
                {
                  "type": "text",
                  "id": "OTP_Timer",
                  "name": "timerValue",
                  "fill": "$orange-primary",
                  "content": "02:45",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "frame",
              "name": "submitButton",
              "width": "fill_container",
              "height": 48,
              "fill": "$bg-interactive",
              "cornerRadius": 10,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "name": "btnLabel",
                  "fill": "$text-disabled",
                  "content": "X\u00e1c nh\u1eadn",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "frame",
              "name": "footerLinks",
              "gap": 4,
              "children": [
                {
                  "type": "text",
                  "name": "text",
                  "fill": "$text-tertiary",
                  "content": "Kh\u00f4ng nh\u1eadn \u0111\u01b0\u1ee3c m\u00e3?",
                  "fontFamily": "Roboto",
                  "fontSize": 14
                },
                {
                  "type": "text",
                  "name": "link",
                  "fill": "$orange-primary",
                  "content": "G\u1eedi l\u1ea1i",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "500"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "OTPCard_Filled",
          "name": "Organism/OTPVerify/Filled",
          "reusable": true,
          "width": 420,
          "fill": "$bg-surface",
          "cornerRadius": 20,
          "stroke": {
            "thickness": 1,
            "fill": "$border-subtle"
          },
          "layout": "vertical",
          "gap": 32,
          "padding": 40,
          "alignItems": "center",
          "children": [
            {
              "type": "frame",
              "name": "cardHeader",
              "layout": "vertical",
              "gap": 12,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "name": "iconContainer",
                  "width": 64,
                  "height": 64,
                  "fill": "$status-success-bg",
                  "cornerRadius": 32,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "name": "checkIcon",
                      "width": 28,
                      "height": 28,
                      "iconFontName": "check-circle",
                      "iconFontFamily": "lucide",
                      "fill": "$status-success"
                    }
                  ]
                },
                {
                  "type": "text",
                  "name": "cardTitle",
                  "fill": "$text-primary",
                  "content": "X\u00e1c th\u1ef1c OTP",
                  "fontFamily": "Roboto",
                  "fontSize": 24,
                  "fontWeight": "600"
                },
                {
                  "type": "text",
                  "name": "cardSubtitle",
                  "fill": "$text-tertiary",
                  "textGrowth": "fixed-width",
                  "width": 300,
                  "content": "Nh\u1eadp m\u00e3 6 ch\u1eef s\u1ed1 \u0111\u00e3 g\u1eedi \u0111\u1ebfn s\u1ed1 \u0111i\u1ec7n tho\u1ea1i c\u1ee7a b\u1ea1n",
                  "lineHeight": 1.5,
                  "textAlign": "center",
                  "fontFamily": "Roboto",
                  "fontSize": 14
                },
                {
                  "type": "text",
                  "name": "phoneNumber",
                  "fill": "$orange-primary",
                  "content": "+84 912 ***678",
                  "fontFamily": "Roboto",
                  "fontSize": 16,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "frame",
              "name": "otpInputs",
              "gap": 8,
              "children": [
                {
                  "type": "frame",
                  "name": "d1",
                  "width": 48,
                  "height": 56,
                  "fill": "$bg-elevated",
                  "cornerRadius": 10,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$status-success"
                  },
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "fill": "$text-primary",
                      "content": "1",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "name": "d2",
                  "width": 48,
                  "height": 56,
                  "fill": "$bg-elevated",
                  "cornerRadius": 10,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$status-success"
                  },
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "fill": "$text-primary",
                      "content": "2",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "name": "d3",
                  "width": 48,
                  "height": 56,
                  "fill": "$bg-elevated",
                  "cornerRadius": 10,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$status-success"
                  },
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "fill": "$text-primary",
                      "content": "3",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "text",
                  "name": "separator",
                  "fill": "$status-success",
                  "content": "\u2014",
                  "fontFamily": "Roboto",
                  "fontSize": 20
                },
                {
                  "type": "frame",
                  "name": "d4",
                  "width": 48,
                  "height": 56,
                  "fill": "$bg-elevated",
                  "cornerRadius": 10,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$status-success"
                  },
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "fill": "$text-primary",
                      "content": "4",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "name": "d5",
                  "width": 48,
                  "height": 56,
                  "fill": "$bg-elevated",
                  "cornerRadius": 10,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$status-success"
                  },
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "fill": "$text-primary",
                      "content": "5",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "name": "d6",
                  "width": 48,
                  "height": 56,
                  "fill": "$bg-elevated",
                  "cornerRadius": 10,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$status-success"
                  },
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "fill": "$text-primary",
                      "content": "6",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "name": "submitButton",
              "width": "fill_container",
              "height": 48,
              "fill": {
                "type": "gradient",
                "gradientType": "linear",
                "rotation": 135,
                "colors": [
                  {
                    "color": "#FF5C00",
                    "position": 0
                  },
                  {
                    "color": "#FF8A4C",
                    "position": 1
                  }
                ]
              },
              "cornerRadius": 10,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "name": "btnLabel",
                  "fill": "$text-primary",
                  "content": "X\u00e1c nh\u1eadn",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "600"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "WocUJ",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "jV70R",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "CARDS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "FeatCard1",
          "name": "exampleFeatureCard",
          "width": "fill_container",
          "fill": "$bg-surface",
          "cornerRadius": 16,
          "stroke": {
            "thickness": 1,
            "fill": "$border-subtle"
          },
          "layout": "vertical",
          "gap": 16,
          "padding": 28,
          "children": [
            {
              "type": "frame",
              "id": "HpzSJ",
              "name": "fcIconBg",
              "width": 48,
              "height": 48,
              "fill": "#FF5C0018",
              "cornerRadius": 12,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "suLNf",
                  "name": "fcIcon",
                  "width": 24,
                  "height": 24,
                  "iconFontName": "monitor-smartphone",
                  "iconFontFamily": "lucide",
                  "fill": "$orange-primary"
                }
              ]
            },
            {
              "type": "text",
              "id": "UJFMb",
              "name": "fcTitle",
              "fill": "$text-primary",
              "content": "Feature Card",
              "fontFamily": "Roboto",
              "fontSize": 18,
              "fontWeight": "600"
            },
            {
              "type": "text",
              "id": "tDzj5",
              "name": "fcDesc",
              "fill": "$text-tertiary",
              "textGrowth": "fixed-width",
              "width": "fill_container",
              "content": "This is a feature card component used to showcase key features and capabilities.",
              "lineHeight": 1.6,
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "IndCard1",
          "name": "exampleIndustryCard",
          "clip": true,
          "width": "fill_container",
          "fill": "$bg-page",
          "cornerRadius": 16,
          "stroke": {
            "thickness": 1,
            "fill": "$border-subtle"
          },
          "layout": "vertical",
          "children": [
            {
              "type": "frame",
              "id": "FLdiF",
              "name": "indImg",
              "width": "fill_container",
              "height": 200,
              "fill": "#3B82F618"
            },
            {
              "type": "frame",
              "id": "8ZFVY",
              "name": "indContent",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 12,
              "padding": 24,
              "children": [
                {
                  "type": "text",
                  "id": "8gWd8",
                  "name": "indTitle",
                  "fill": "$text-primary",
                  "content": "Industry Card",
                  "fontFamily": "Roboto",
                  "fontSize": 18,
                  "fontWeight": "600"
                },
                {
                  "type": "text",
                  "id": "1piNF",
                  "name": "indDesc",
                  "fill": "$text-tertiary",
                  "textGrowth": "fixed-width",
                  "width": "fill_container",
                  "content": "Industry-specific card with image, title, description and tags.",
                  "lineHeight": 1.6,
                  "fontFamily": "Roboto",
                  "fontSize": 13,
                  "fontWeight": "normal"
                },
                {
                  "type": "frame",
                  "id": "h0FX2",
                  "name": "indTags",
                  "gap": 8,
                  "children": [
                    {
                      "type": "frame",
                      "id": "DSgMw",
                      "name": "indTag1",
                      "fill": "$bg-elevated",
                      "cornerRadius": 6,
                      "padding": [
                        4,
                        10
                      ],
                      "children": [
                        {
                          "type": "text",
                          "id": "rVbro",
                          "name": "chipText",
                          "fill": "$text-secondary",
                          "content": "Feature 1",
                          "fontFamily": "Roboto",
                          "fontSize": 11,
                          "fontWeight": "500"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "uoFFu",
                      "name": "indTag2",
                      "fill": "$bg-elevated",
                      "cornerRadius": 6,
                      "padding": [
                        4,
                        10
                      ],
                      "children": [
                        {
                          "type": "text",
                          "id": "JI7l0",
                          "name": "chipText",
                          "fill": "$text-secondary",
                          "content": "Feature 2",
                          "fontFamily": "Roboto",
                          "fontSize": 11,
                          "fontWeight": "500"
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "ZReaA",
          "name": "stepNum",
          "width": 56,
          "height": 56,
          "fill": {
            "type": "gradient",
            "gradientType": "linear",
            "enabled": true,
            "rotation": 135,
            "size": {
              "height": 1
            },
            "colors": [
              {
                "color": "#FF5C00",
                "position": 0
              },
              {
                "color": "#FF8A4C",
                "position": 1
              }
            ]
          },
          "cornerRadius": 28,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "m5Mjz",
              "name": "stepNumText",
              "fill": "$text-primary",
              "content": "1",
              "fontFamily": "Roboto",
              "fontSize": 24,
              "fontWeight": "600"
            }
          ]
        },
        {
          "type": "frame",
          "id": "PriceCard1",
          "name": "examplePricingBasic",
          "width": "fill_container",
          "fill": "$bg-page",
          "cornerRadius": 16,
          "stroke": {
            "thickness": 1,
            "fill": "$border-subtle"
          },
          "layout": "vertical",
          "gap": 24,
          "padding": 32,
          "children": [
            {
              "type": "frame",
              "id": "teMVu",
              "name": "pcBadge",
              "enabled": false,
              "fill": {
                "type": "gradient",
                "gradientType": "linear",
                "enabled": true,
                "rotation": 135,
                "size": {
                  "height": 1
                },
                "colors": [
                  {
                    "color": "#FF5C00",
                    "position": 0
                  },
                  {
                    "color": "#FF8A4C",
                    "position": 1
                  }
                ]
              },
              "cornerRadius": 100,
              "padding": [
                4,
                10
              ],
              "children": [
                {
                  "type": "text",
                  "id": "azC2t",
                  "name": "pcBadgeText",
                  "fill": "$text-primary",
                  "content": "Ph\u1ed5 bi\u1ebfn nh\u1ea5t",
                  "fontFamily": "Roboto",
                  "fontSize": 11,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "frame",
              "id": "isTGs",
              "name": "pcTop",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 12,
              "children": [
                {
                  "type": "text",
                  "id": "ZFjfl",
                  "name": "pcName",
                  "fill": "$text-secondary",
                  "content": "Starter",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "600",
                  "letterSpacing": 1
                },
                {
                  "type": "frame",
                  "id": "5UeZM",
                  "name": "pcPriceRow",
                  "gap": 4,
                  "alignItems": "end",
                  "children": [
                    {
                      "type": "text",
                      "id": "8fM2n",
                      "name": "pcPrice",
                      "fill": "$text-primary",
                      "content": "Free",
                      "fontFamily": "Roboto",
                      "fontSize": 36,
                      "fontWeight": "500",
                      "letterSpacing": -1
                    },
                    {
                      "type": "text",
                      "id": "GfS02",
                      "name": "pcPer",
                      "enabled": false,
                      "fill": "$text-tertiary",
                      "content": "/th\u00e1ng",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "text",
                  "id": "uLtIh",
                  "name": "pcDesc",
                  "fill": "$text-tertiary",
                  "content": "For small businesses getting started",
                  "lineHeight": 1.5,
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "normal"
                }
              ]
            },
            {
              "type": "rectangle",
              "id": "u5uVY",
              "name": "pcDivider",
              "fill": "$border-subtle",
              "width": "fill_container",
              "height": 1
            },
            {
              "type": "frame",
              "id": "MXmSA",
              "name": "pcFeats",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 14,
              "children": [
                {
                  "type": "frame",
                  "id": "YbXof",
                  "name": "pcF1",
                  "gap": 10,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "mzamm",
                      "name": "checkIcon",
                      "width": 16,
                      "height": 16,
                      "iconFontName": "check",
                      "iconFontFamily": "lucide",
                      "fill": "$green-success"
                    },
                    {
                      "type": "text",
                      "id": "3r8fL",
                      "name": "checkText",
                      "fill": "$text-secondary",
                      "content": "1 store",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "Nj2yA",
                  "name": "pcF2",
                  "gap": 10,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "NVTzn",
                      "name": "checkIcon",
                      "width": 16,
                      "height": 16,
                      "iconFontName": "check",
                      "iconFontFamily": "lucide",
                      "fill": "$green-success"
                    },
                    {
                      "type": "text",
                      "id": "5LtsD",
                      "name": "checkText",
                      "fill": "$text-secondary",
                      "content": "100 transactions/month",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "GqUzO",
                  "name": "pcF3",
                  "gap": 10,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "yZlVe",
                      "name": "checkIcon",
                      "width": 16,
                      "height": 16,
                      "iconFontName": "check",
                      "iconFontFamily": "lucide",
                      "fill": "$green-success"
                    },
                    {
                      "type": "text",
                      "id": "Ut5uS",
                      "name": "checkText",
                      "fill": "$text-secondary",
                      "content": "Basic reports",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "normal"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "0Fnac",
              "name": "pcBtn",
              "width": "fill_container",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "gap": 8,
              "padding": [
                14,
                24
              ],
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "1w3HC",
                  "name": "btnSIcon",
                  "enabled": false,
                  "width": 16,
                  "height": 16,
                  "iconFontName": "arrow-right",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                },
                {
                  "type": "text",
                  "id": "RVZxt",
                  "name": "btnSText",
                  "fill": "$text-primary",
                  "content": "Get Started",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "500"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "PriceCard2",
          "name": "examplePricingPro",
          "width": "fill_container",
          "fill": "$bg-page",
          "cornerRadius": 16,
          "stroke": {
            "thickness": 2,
            "fill": "$orange-primary"
          },
          "layout": "vertical",
          "gap": 24,
          "padding": 32,
          "children": [
            {
              "type": "frame",
              "id": "2qVjH",
              "name": "pcBadge",
              "fill": {
                "type": "gradient",
                "gradientType": "linear",
                "enabled": true,
                "rotation": 135,
                "size": {
                  "height": 1
                },
                "colors": [
                  {
                    "color": "#FF5C00",
                    "position": 0
                  },
                  {
                    "color": "#FF8A4C",
                    "position": 1
                  }
                ]
              },
              "cornerRadius": 100,
              "padding": [
                4,
                10
              ],
              "children": [
                {
                  "type": "text",
                  "id": "PthNf",
                  "name": "pcBadgeText",
                  "fill": "$text-primary",
                  "content": "Ph\u1ed5 bi\u1ebfn nh\u1ea5t",
                  "fontFamily": "Roboto",
                  "fontSize": 11,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "frame",
              "id": "yT240",
              "name": "pcTop",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 12,
              "children": [
                {
                  "type": "text",
                  "id": "G4OEv",
                  "name": "pcName",
                  "fill": "$orange-primary",
                  "content": "Professional",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "600",
                  "letterSpacing": 1
                },
                {
                  "type": "frame",
                  "id": "IQojv",
                  "name": "pcPriceRow",
                  "gap": 4,
                  "alignItems": "end",
                  "children": [
                    {
                      "type": "text",
                      "id": "R1uJY",
                      "name": "pcPrice",
                      "fill": "$text-primary",
                      "content": "499K",
                      "fontFamily": "Roboto",
                      "fontSize": 36,
                      "fontWeight": "500",
                      "letterSpacing": -1
                    },
                    {
                      "type": "text",
                      "id": "lbKkc",
                      "name": "pcPer",
                      "fill": "$text-tertiary",
                      "content": "/th\u00e1ng",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "text",
                  "id": "i9xHO",
                  "name": "pcDesc",
                  "fill": "$text-tertiary",
                  "content": "For growing business chains",
                  "lineHeight": 1.5,
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "normal"
                }
              ]
            },
            {
              "type": "rectangle",
              "id": "GaBI4",
              "name": "pcDivider",
              "fill": "$border-subtle",
              "width": "fill_container",
              "height": 1
            },
            {
              "type": "frame",
              "id": "KiK1Y",
              "name": "pcFeats",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 14,
              "children": [
                {
                  "type": "frame",
                  "id": "s5RvM",
                  "name": "pcF1",
                  "gap": 10,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "7e7A1",
                      "name": "checkIcon",
                      "width": 16,
                      "height": 16,
                      "iconFontName": "check",
                      "iconFontFamily": "lucide",
                      "fill": "$orange-primary"
                    },
                    {
                      "type": "text",
                      "id": "Lmf0e",
                      "name": "checkText",
                      "fill": "$text-secondary",
                      "content": "5 stores",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "pc2H0",
                  "name": "pcF2",
                  "gap": 10,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "JsYjG",
                      "name": "checkIcon",
                      "width": 16,
                      "height": 16,
                      "iconFontName": "check",
                      "iconFontFamily": "lucide",
                      "fill": "$orange-primary"
                    },
                    {
                      "type": "text",
                      "id": "UUmpR",
                      "name": "checkText",
                      "fill": "$text-secondary",
                      "content": "Unlimited transactions",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "jqWaK",
                  "name": "pcF3",
                  "gap": 10,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "6LR43",
                      "name": "checkIcon",
                      "width": 16,
                      "height": 16,
                      "iconFontName": "check",
                      "iconFontFamily": "lucide",
                      "fill": "$orange-primary"
                    },
                    {
                      "type": "text",
                      "id": "ULIlu",
                      "name": "checkText",
                      "fill": "$text-secondary",
                      "content": "Advanced analytics",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "normal"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "3xz7n",
              "name": "proPricingBtn",
              "width": "fill_container",
              "fill": {
                "type": "gradient",
                "gradientType": "linear",
                "enabled": true,
                "rotation": 135,
                "size": {
                  "height": 1
                },
                "colors": [
                  {
                    "color": "#FF5C00",
                    "position": 0
                  },
                  {
                    "color": "#FF8A4C",
                    "position": 1
                  }
                ]
              },
              "cornerRadius": 10,
              "gap": 8,
              "padding": [
                14,
                24
              ],
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "6y0tm",
                  "name": "btnPIcon",
                  "enabled": false,
                  "width": 16,
                  "height": 16,
                  "iconFontName": "arrow-right",
                  "iconFontFamily": "lucide",
                  "fill": "$text-primary"
                },
                {
                  "type": "text",
                  "id": "96nc7",
                  "name": "btnPText",
                  "fill": "$text-primary",
                  "content": "Try 14 days free",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "600"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "PriceCard3",
          "name": "examplePricingEnterprise",
          "width": "fill_container",
          "fill": "$bg-page",
          "cornerRadius": 16,
          "stroke": {
            "thickness": 1,
            "fill": "$border-subtle"
          },
          "layout": "vertical",
          "gap": 24,
          "padding": 32,
          "children": [
            {
              "type": "frame",
              "id": "We76w",
              "name": "pcBadge",
              "enabled": false,
              "fill": {
                "type": "gradient",
                "gradientType": "linear",
                "enabled": true,
                "rotation": 135,
                "size": {
                  "height": 1
                },
                "colors": [
                  {
                    "color": "#FF5C00",
                    "position": 0
                  },
                  {
                    "color": "#FF8A4C",
                    "position": 1
                  }
                ]
              },
              "cornerRadius": 100,
              "padding": [
                4,
                10
              ],
              "children": [
                {
                  "type": "text",
                  "id": "ttbZY",
                  "name": "pcBadgeText",
                  "fill": "$text-primary",
                  "content": "Ph\u1ed5 bi\u1ebfn nh\u1ea5t",
                  "fontFamily": "Roboto",
                  "fontSize": 11,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "frame",
              "id": "0aQSi",
              "name": "pcTop",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 12,
              "children": [
                {
                  "type": "text",
                  "id": "aSefC",
                  "name": "pcName",
                  "fill": "$text-secondary",
                  "content": "Enterprise",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "600",
                  "letterSpacing": 1
                },
                {
                  "type": "frame",
                  "id": "QJm3P",
                  "name": "pcPriceRow",
                  "gap": 4,
                  "alignItems": "end",
                  "children": [
                    {
                      "type": "text",
                      "id": "PNKkF",
                      "name": "pcPrice",
                      "fill": "$text-primary",
                      "content": "Custom",
                      "fontFamily": "Roboto",
                      "fontSize": 36,
                      "fontWeight": "500",
                      "letterSpacing": -1
                    },
                    {
                      "type": "text",
                      "id": "VHRx4",
                      "name": "pcPer",
                      "enabled": false,
                      "fill": "$text-tertiary",
                      "content": "/th\u00e1ng",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "text",
                  "id": "teqD3",
                  "name": "pcDesc",
                  "fill": "$text-tertiary",
                  "content": "For large enterprise chains",
                  "lineHeight": 1.5,
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "normal"
                }
              ]
            },
            {
              "type": "rectangle",
              "id": "vbKaC",
              "name": "pcDivider",
              "fill": "$border-subtle",
              "width": "fill_container",
              "height": 1
            },
            {
              "type": "frame",
              "id": "dBIlb",
              "name": "pcFeats",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 14,
              "children": [
                {
                  "type": "frame",
                  "id": "EXa0J",
                  "name": "pcF1",
                  "gap": 10,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "U0aiJ",
                      "name": "checkIcon",
                      "width": 16,
                      "height": 16,
                      "iconFontName": "check",
                      "iconFontFamily": "lucide",
                      "fill": "$green-success"
                    },
                    {
                      "type": "text",
                      "id": "F221P",
                      "name": "checkText",
                      "fill": "$text-secondary",
                      "content": "Unlimited stores",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "DHLmw",
                  "name": "pcF2",
                  "gap": 10,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "En6Un",
                      "name": "checkIcon",
                      "width": 16,
                      "height": 16,
                      "iconFontName": "check",
                      "iconFontFamily": "lucide",
                      "fill": "$green-success"
                    },
                    {
                      "type": "text",
                      "id": "ytc60",
                      "name": "checkText",
                      "fill": "$text-secondary",
                      "content": "API integration",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "zWEio",
                  "name": "pcF3",
                  "gap": 10,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "P4YlO",
                      "name": "checkIcon",
                      "width": 16,
                      "height": 16,
                      "iconFontName": "check",
                      "iconFontFamily": "lucide",
                      "fill": "$green-success"
                    },
                    {
                      "type": "text",
                      "id": "seCtG",
                      "name": "checkText",
                      "fill": "$text-secondary",
                      "content": "Dedicated account manager",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "normal"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "8129K",
              "name": "pcBtn",
              "width": "fill_container",
              "cornerRadius": 10,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "gap": 8,
              "padding": [
                14,
                24
              ],
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "kqsyZ",
                  "name": "btnSIcon",
                  "enabled": false,
                  "width": 16,
                  "height": 16,
                  "iconFontName": "arrow-right",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                },
                {
                  "type": "text",
                  "id": "koJzc",
                  "name": "btnSText",
                  "fill": "$text-primary",
                  "content": "Contact Sales",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "500"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "vQqcl",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "NH6gQ",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "FOOTER COMPONENTS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "FootCol1",
          "name": "exampleFooterCol1",
          "layout": "vertical",
          "gap": 16,
          "children": [
            {
              "type": "text",
              "id": "jcBoY",
              "name": "footColTitle",
              "fill": "$text-primary",
              "content": "Products",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "600"
            },
            {
              "type": "text",
              "id": "NX2A9",
              "name": "footColL1",
              "fill": "$text-tertiary",
              "content": "POS System",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "normal"
            },
            {
              "type": "text",
              "id": "qkmXd",
              "name": "footColL2",
              "fill": "$text-tertiary",
              "content": "Loyalty Program",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "normal"
            },
            {
              "type": "text",
              "id": "MqnX1",
              "name": "footColL3",
              "fill": "$text-tertiary",
              "content": "Analytics",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "normal"
            },
            {
              "type": "text",
              "id": "U5fbU",
              "name": "footColL4",
              "fill": "$text-tertiary",
              "content": "Inventory",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "FootCol2",
          "name": "exampleFooterCol2",
          "layout": "vertical",
          "gap": 16,
          "children": [
            {
              "type": "text",
              "id": "3f7yU",
              "name": "footColTitle",
              "fill": "$text-primary",
              "content": "Industries",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "600"
            },
            {
              "type": "text",
              "id": "nUIva",
              "name": "footColL1",
              "fill": "$text-tertiary",
              "content": "Restaurant & F&B",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "normal"
            },
            {
              "type": "text",
              "id": "VMn3X",
              "name": "footColL2",
              "fill": "$text-tertiary",
              "content": "Bar & Lounge",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "normal"
            },
            {
              "type": "text",
              "id": "TYRQA",
              "name": "footColL3",
              "fill": "$text-tertiary",
              "content": "Karaoke",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "normal"
            },
            {
              "type": "text",
              "id": "Y1hlD",
              "name": "footColL4",
              "fill": "$text-tertiary",
              "content": "Coffee Shop",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "FootCol3",
          "name": "exampleFooterCol3",
          "layout": "vertical",
          "gap": 16,
          "children": [
            {
              "type": "text",
              "id": "ynsnj",
              "name": "footColTitle",
              "fill": "$text-primary",
              "content": "Support",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "600"
            },
            {
              "type": "text",
              "id": "CxgY7",
              "name": "footColL1",
              "fill": "$text-tertiary",
              "content": "Help Center",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "normal"
            },
            {
              "type": "text",
              "id": "PNNws",
              "name": "footColL2",
              "fill": "$text-tertiary",
              "content": "Contact",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "normal"
            },
            {
              "type": "text",
              "id": "KTHFx",
              "name": "footColL3",
              "fill": "$text-tertiary",
              "content": "Privacy Policy",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "normal"
            },
            {
              "type": "text",
              "id": "F0e0G",
              "name": "footColL4",
              "fill": "$text-tertiary",
              "content": "Terms of Use",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "LibLogo",
          "name": "componentLibLogo",
          "gap": 8,
          "alignItems": "center",
          "children": [
            {
              "type": "ellipse",
              "id": "L1IHb",
              "name": "logoDot",
              "fill": "$orange-primary",
              "width": 10,
              "height": 10
            },
            {
              "type": "text",
              "id": "oAfvR",
              "name": "logoText",
              "fill": "$text-primary",
              "content": "aPOS",
              "fontFamily": "Roboto",
              "fontSize": 22,
              "fontWeight": "600",
              "letterSpacing": 3
            }
          ]
        },
        {
          "type": "frame",
          "id": "fBoMm",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "o5bXI",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "UTILITIES",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "Check1",
          "name": "exampleCheckItem1",
          "gap": 10,
          "alignItems": "center",
          "children": [
            {
              "type": "icon_font",
              "id": "VJGh3",
              "name": "checkIcon",
              "width": 16,
              "height": 16,
              "iconFontName": "check",
              "iconFontFamily": "lucide",
              "fill": "$green-success"
            },
            {
              "type": "text",
              "id": "VwkNy",
              "name": "checkText",
              "fill": "$text-secondary",
              "content": "Feature check list item",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "Check2",
          "name": "exampleCheckItem2",
          "gap": 10,
          "alignItems": "center",
          "children": [
            {
              "type": "icon_font",
              "id": "BrCzS",
              "name": "checkIcon",
              "width": 16,
              "height": 16,
              "iconFontName": "check",
              "iconFontFamily": "lucide",
              "fill": "$green-success"
            },
            {
              "type": "text",
              "id": "9qmDC",
              "name": "checkText",
              "fill": "$text-secondary",
              "content": "Another check list item",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "Check3",
          "name": "exampleCheckItem3",
          "gap": 10,
          "alignItems": "center",
          "children": [
            {
              "type": "icon_font",
              "id": "87yKj",
              "name": "checkIcon",
              "width": 16,
              "height": 16,
              "iconFontName": "check",
              "iconFontFamily": "lucide",
              "fill": "$green-success"
            },
            {
              "type": "text",
              "id": "JoqXu",
              "name": "checkText",
              "fill": "$text-secondary",
              "content": "Third check list item",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "Social1",
          "name": "exampleFacebook",
          "width": 36,
          "height": 36,
          "cornerRadius": 18,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "icon_font",
              "id": "YXkpa",
              "name": "socIcn",
              "width": 18,
              "height": 18,
              "iconFontName": "facebook",
              "iconFontFamily": "lucide",
              "fill": "$text-disabled"
            }
          ]
        },
        {
          "type": "frame",
          "id": "Social2",
          "name": "exampleInstagram",
          "width": 36,
          "height": 36,
          "cornerRadius": 18,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "icon_font",
              "id": "4UrP1",
              "name": "socIcn",
              "width": 18,
              "height": 18,
              "iconFontName": "instagram",
              "iconFontFamily": "lucide",
              "fill": "$text-disabled"
            }
          ]
        },
        {
          "type": "frame",
          "id": "Social3",
          "name": "exampleYoutube",
          "width": 36,
          "height": 36,
          "cornerRadius": 18,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "icon_font",
              "id": "QG5mc",
              "name": "socIcn",
              "width": 18,
              "height": 18,
              "iconFontName": "youtube",
              "iconFontFamily": "lucide",
              "fill": "$text-disabled"
            }
          ]
        },
        {
          "type": "frame",
          "id": "Social4",
          "name": "exampleLinkedIn",
          "width": 36,
          "height": 36,
          "cornerRadius": 18,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "icon_font",
              "id": "FNwhd",
              "name": "socIcn",
              "width": 18,
              "height": 18,
              "iconFontName": "linkedin",
              "iconFontFamily": "lucide",
              "fill": "$text-disabled"
            }
          ]
        },
        {
          "type": "frame",
          "id": "TrustEx",
          "name": "exampleTrustStat",
          "width": "fill_container",
          "gap": 40,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "iObWZ",
              "name": "tsLabel",
              "fill": "$text-disabled",
              "content": "\u0110\u01b0\u1ee3c tin d\u00f9ng b\u1edfi 2,000+ doanh nghi\u1ec7p",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "normal"
            },
            {
              "type": "rectangle",
              "id": "M0mkC",
              "name": "tsDivider1",
              "fill": "$border-default",
              "width": 1,
              "height": 20
            },
            {
              "type": "text",
              "id": "wZxFi",
              "name": "tsStat1",
              "fill": "$text-tertiary",
              "content": "50,000+ giao d\u1ecbch/ng\u00e0y",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "500"
            },
            {
              "type": "rectangle",
              "id": "9ZsNt",
              "name": "tsDivider2",
              "fill": "$border-default",
              "width": 1,
              "height": 20
            },
            {
              "type": "text",
              "id": "gpriC",
              "name": "tsStat2",
              "fill": "$text-tertiary",
              "content": "99.9% uptime",
              "fontFamily": "Roboto",
              "fontSize": 13,
              "fontWeight": "500"
            }
          ]
        },
        {
          "type": "frame",
          "id": "jNieW",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "jVugF",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "NAVIGATION",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "DesktopNav",
          "name": "exampleDesktopNav",
          "width": "fill_container",
          "height": "fit_content(84)",
          "padding": [
            20,
            120
          ],
          "justifyContent": "space_between",
          "alignItems": "center"
        },
        {
          "type": "frame",
          "id": "MobileNav",
          "name": "exampleMobileNav",
          "width": "fill_container",
          "padding": [
            16,
            20
          ],
          "justifyContent": "space_between",
          "alignItems": "center",
          "children": [
            {
              "type": "frame",
              "id": "EYcUX",
              "name": "mNavLogo",
              "gap": 8,
              "alignItems": "center",
              "children": [
                {
                  "type": "ellipse",
                  "id": "c7KAp",
                  "name": "logoDot",
                  "fill": "$orange-primary",
                  "width": 10,
                  "height": 10
                },
                {
                  "type": "text",
                  "id": "9deBe",
                  "name": "logoText",
                  "fill": "$text-primary",
                  "content": "aPOS",
                  "fontFamily": "Roboto",
                  "fontSize": 18,
                  "fontWeight": "600",
                  "letterSpacing": 3
                }
              ]
            },
            {
              "type": "icon_font",
              "id": "yEnDr",
              "name": "hamburgerIcon",
              "width": 24,
              "height": 24,
              "iconFontName": "menu",
              "iconFontFamily": "lucide",
              "fill": "$text-primary"
            }
          ]
        },
        {
          "type": "frame",
          "id": "CustomerLookupBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "CustomerLookupBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "CUSTOMER LOOKUP",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "CustomerLookupModal",
          "name": "Organism/CustomerLookup/Modal",
          "reusable": true,
          "width": 480,
          "fill": "$bg-elevated",
          "cornerRadius": 20,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "layout": "vertical",
          "clip": true,
          "children": [
            {
              "type": "frame",
              "id": "CustomerLookupTopBar",
              "name": "topBar",
              "width": "fill_container",
              "padding": [
                16,
                20
              ],
              "stroke": {
                "thickness": 1,
                "fill": "$border-subtle",
                "sides": [
                  "bottom"
                ]
              },
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "CustomerLookupModalTitle",
                  "fill": "$text-primary",
                  "content": "T\u00ecm kh\u00e1ch h\u00e0ng",
                  "fontFamily": "Roboto",
                  "fontSize": 18,
                  "fontWeight": "600"
                },
                {
                  "type": "frame",
                  "id": "CustomerLookupCloseBtn",
                  "name": "closeBtn",
                  "width": 36,
                  "height": 36,
                  "fill": "$bg-interactive",
                  "cornerRadius": 10,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "CustomerLookupCloseIcon",
                      "width": 18,
                      "height": 18,
                      "iconFontName": "x",
                      "iconFontFamily": "lucide",
                      "fill": "$text-secondary"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "CustomerLookupBody",
              "name": "body",
              "width": "fill_container",
              "layout": "vertical",
              "padding": 20,
              "gap": 16,
              "children": [
                {
                  "type": "frame",
                  "id": "CustomerLookupSearchBox",
                  "name": "searchBox",
                  "width": "fill_container",
                  "height": 48,
                  "fill": "$bg-surface",
                  "cornerRadius": 12,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "padding": [
                    0,
                    16
                  ],
                  "gap": 12,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "CustomerLookupSearchIcon",
                      "width": 20,
                      "height": 20,
                      "iconFontName": "search",
                      "iconFontFamily": "lucide",
                      "fill": "$text-tertiary"
                    },
                    {
                      "type": "text",
                      "id": "CustomerLookupSearchText",
                      "fill": "$text-primary",
                      "content": "0912",
                      "fontFamily": "Roboto",
                      "fontSize": 15,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "frame",
                      "id": "CustomerLookupSearchSpacer",
                      "width": "fill_container",
                      "height": 1
                    },
                    {
                      "type": "icon_font",
                      "id": "CustomerLookupClearIcon",
                      "width": 18,
                      "height": 18,
                      "iconFontName": "x-circle",
                      "iconFontFamily": "lucide",
                      "fill": "$text-tertiary"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "CustomerLookupResults",
                  "name": "results",
                  "width": "fill_container",
                  "layout": "vertical",
                  "gap": 8,
                  "children": [
                    {
                      "type": "frame",
                      "id": "CustomerResult1",
                      "name": "customerResult1",
                      "width": "fill_container",
                      "fill": "$bg-surface",
                      "cornerRadius": 12,
                      "stroke": {
                        "thickness": 2,
                        "fill": "$orange-primary"
                      },
                      "padding": 16,
                      "gap": 14,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "frame",
                          "id": "CustomerResult1Avatar",
                          "name": "avatar",
                          "width": 44,
                          "height": 44,
                          "fill": "#3B82F630",
                          "cornerRadius": 100,
                          "justifyContent": "center",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "text",
                              "id": "CustomerResult1Initials",
                              "fill": "#3B82F6",
                              "content": "NH",
                              "fontFamily": "Roboto",
                              "fontSize": 16,
                              "fontWeight": "600"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "CustomerResult1Info",
                          "name": "info",
                          "layout": "vertical",
                          "gap": 4,
                          "width": "fill_container",
                          "children": [
                            {
                              "type": "text",
                              "id": "CustomerResult1Name",
                              "fill": "$text-primary",
                              "content": "Nguy\u1ec5n H\u1ed3ng",
                              "fontFamily": "Roboto",
                              "fontSize": 15,
                              "fontWeight": "500"
                            },
                            {
                              "type": "text",
                              "id": "CustomerResult1Phone",
                              "fill": "$text-secondary",
                              "content": "0912 345 678",
                              "fontFamily": "Roboto",
                              "fontSize": 13,
                              "fontWeight": "normal"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "CustomerResult1Points",
                          "name": "points",
                          "fill": "#22C55E18",
                          "cornerRadius": 8,
                          "padding": [
                            6,
                            10
                          ],
                          "children": [
                            {
                              "type": "text",
                              "id": "CustomerResult1PointsText",
                              "fill": "$green-success",
                              "content": "120 \u0111i\u1ec3m",
                              "fontFamily": "Roboto",
                              "fontSize": 12,
                              "fontWeight": "600"
                            }
                          ]
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "CustomerResult2",
                      "name": "customerResult2",
                      "width": "fill_container",
                      "fill": "$bg-surface",
                      "cornerRadius": 12,
                      "stroke": {
                        "thickness": 1,
                        "fill": "$border-default"
                      },
                      "padding": 16,
                      "gap": 14,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "frame",
                          "id": "CustomerResult2Avatar",
                          "name": "avatar",
                          "width": 44,
                          "height": 44,
                          "fill": "#8B5CF630",
                          "cornerRadius": 100,
                          "justifyContent": "center",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "text",
                              "id": "CustomerResult2Initials",
                              "fill": "#8B5CF6",
                              "content": "TL",
                              "fontFamily": "Roboto",
                              "fontSize": 16,
                              "fontWeight": "600"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "CustomerResult2Info",
                          "name": "info",
                          "layout": "vertical",
                          "gap": 4,
                          "width": "fill_container",
                          "children": [
                            {
                              "type": "text",
                              "id": "CustomerResult2Name",
                              "fill": "$text-primary",
                              "content": "Tr\u1ea7n Linh",
                              "fontFamily": "Roboto",
                              "fontSize": 15,
                              "fontWeight": "500"
                            },
                            {
                              "type": "text",
                              "id": "CustomerResult2Phone",
                              "fill": "$text-secondary",
                              "content": "0912 888 999",
                              "fontFamily": "Roboto",
                              "fontSize": 13,
                              "fontWeight": "normal"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "CustomerResult2Points",
                          "name": "points",
                          "fill": "$bg-interactive",
                          "cornerRadius": 8,
                          "padding": [
                            6,
                            10
                          ],
                          "children": [
                            {
                              "type": "text",
                              "id": "CustomerResult2PointsText",
                              "fill": "$text-secondary",
                              "content": "45 \u0111i\u1ec3m",
                              "fontFamily": "Roboto",
                              "fontSize": 12,
                              "fontWeight": "500"
                            }
                          ]
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "CustomerLookupAddNew",
                  "name": "addNewBtn",
                  "width": "fill_container",
                  "height": 48,
                  "cornerRadius": 12,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default",
                    "style": "dashed"
                  },
                  "gap": 8,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "CustomerLookupAddIcon",
                      "width": 18,
                      "height": 18,
                      "iconFontName": "user-plus",
                      "iconFontFamily": "lucide",
                      "fill": "$text-secondary"
                    },
                    {
                      "type": "text",
                      "id": "CustomerLookupAddText",
                      "fill": "$text-secondary",
                      "content": "Th\u00eam kh\u00e1ch h\u00e0ng m\u1edbi",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "CustomerLookupActions",
              "name": "actions",
              "width": "fill_container",
              "padding": [
                16,
                20
              ],
              "stroke": {
                "thickness": 1,
                "fill": "$border-subtle",
                "sides": [
                  "top"
                ]
              },
              "gap": 12,
              "children": [
                {
                  "type": "frame",
                  "id": "CustomerLookupSkipBtn",
                  "name": "skipBtn",
                  "width": "fill_container",
                  "height": 48,
                  "cornerRadius": 12,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "CustomerLookupSkipText",
                      "fill": "$text-secondary",
                      "content": "B\u1ecf qua",
                      "fontFamily": "Roboto",
                      "fontSize": 15,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "CustomerLookupConfirmBtn",
                  "name": "confirmBtn",
                  "width": "fill_container",
                  "height": 48,
                  "fill": {
                    "type": "gradient",
                    "gradientType": "linear",
                    "enabled": true,
                    "rotation": 135,
                    "size": {
                      "height": 1
                    },
                    "colors": [
                      {
                        "color": "#FF5C00",
                        "position": 0
                      },
                      {
                        "color": "#FF8A4C",
                        "position": 1
                      }
                    ]
                  },
                  "cornerRadius": 12,
                  "gap": 8,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "CustomerLookupConfirmIcon",
                      "width": 18,
                      "height": 18,
                      "iconFontName": "check",
                      "iconFontFamily": "lucide",
                      "fill": "$text-primary"
                    },
                    {
                      "type": "text",
                      "id": "CustomerLookupConfirmText",
                      "fill": "$text-primary",
                      "content": "Ch\u1ecdn kh\u00e1ch h\u00e0ng",
                      "fontFamily": "Roboto",
                      "fontSize": 15,
                      "fontWeight": "600"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "CustomerAddBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "CustomerAddBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "ADD CUSTOMER",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "CustomerAddModal",
          "name": "Organism/CustomerLookup/AddForm",
          "reusable": true,
          "width": 480,
          "fill": "$bg-elevated",
          "cornerRadius": 20,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "layout": "vertical",
          "clip": true,
          "children": [
            {
              "type": "frame",
              "id": "CustomerAddTopBar",
              "name": "topBar",
              "width": "fill_container",
              "padding": [
                16,
                20
              ],
              "stroke": {
                "thickness": 1,
                "fill": "$border-subtle",
                "sides": [
                  "bottom"
                ]
              },
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "CustomerAddBackBtn",
                  "name": "backBtn",
                  "gap": 8,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "CustomerAddBackIcon",
                      "width": 20,
                      "height": 20,
                      "iconFontName": "arrow-left",
                      "iconFontFamily": "lucide",
                      "fill": "$text-secondary"
                    },
                    {
                      "type": "text",
                      "id": "CustomerAddModalTitle",
                      "fill": "$text-primary",
                      "content": "Th\u00eam kh\u00e1ch h\u00e0ng",
                      "fontFamily": "Roboto",
                      "fontSize": 18,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "CustomerAddCloseBtn2",
                  "name": "closeBtn",
                  "width": 36,
                  "height": 36,
                  "fill": "$bg-interactive",
                  "cornerRadius": 10,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "CustomerAddCloseIcon2",
                      "width": 18,
                      "height": 18,
                      "iconFontName": "x",
                      "iconFontFamily": "lucide",
                      "fill": "$text-secondary"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "CustomerAddBody",
              "name": "body",
              "width": "fill_container",
              "layout": "vertical",
              "padding": 20,
              "gap": 16,
              "children": [
                {
                  "type": "frame",
                  "id": "CustomerAddFieldName",
                  "name": "fieldName",
                  "width": "fill_container",
                  "layout": "vertical",
                  "gap": 8,
                  "children": [
                    {
                      "type": "text",
                      "id": "CustomerAddLabelName",
                      "fill": "$text-secondary",
                      "content": "H\u1ecd v\u00e0 t\u00ean *",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "500"
                    },
                    {
                      "type": "frame",
                      "id": "CustomerAddInputName",
                      "name": "inputName",
                      "width": "fill_container",
                      "height": 48,
                      "fill": "$bg-surface",
                      "cornerRadius": 12,
                      "stroke": {
                        "thickness": 1,
                        "fill": "$border-default"
                      },
                      "padding": [
                        0,
                        16
                      ],
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "text",
                          "id": "CustomerAddInputNameText",
                          "fill": "$text-tertiary",
                          "content": "Nh\u1eadp h\u1ecd v\u00e0 t\u00ean kh\u00e1ch h\u00e0ng",
                          "fontFamily": "Roboto",
                          "fontSize": 15,
                          "fontWeight": "normal"
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "CustomerAddFieldPhone",
                  "name": "fieldPhone",
                  "width": "fill_container",
                  "layout": "vertical",
                  "gap": 8,
                  "children": [
                    {
                      "type": "text",
                      "id": "CustomerAddLabelPhone",
                      "fill": "$text-secondary",
                      "content": "S\u1ed1 \u0111i\u1ec7n tho\u1ea1i *",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "500"
                    },
                    {
                      "type": "frame",
                      "id": "CustomerAddInputPhone",
                      "name": "inputPhone",
                      "width": "fill_container",
                      "height": 48,
                      "fill": "$bg-surface",
                      "cornerRadius": 12,
                      "stroke": {
                        "thickness": 1,
                        "fill": "$orange-primary"
                      },
                      "padding": [
                        0,
                        16
                      ],
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "text",
                          "id": "CustomerAddInputPhoneText",
                          "fill": "$text-primary",
                          "content": "0987 654 321",
                          "fontFamily": "Roboto",
                          "fontSize": 15,
                          "fontWeight": "normal"
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "CustomerAddFieldEmail",
                  "name": "fieldEmail",
                  "width": "fill_container",
                  "layout": "vertical",
                  "gap": 8,
                  "children": [
                    {
                      "type": "text",
                      "id": "CustomerAddLabelEmail",
                      "fill": "$text-secondary",
                      "content": "Email (t\u00f9y ch\u1ecdn)",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "500"
                    },
                    {
                      "type": "frame",
                      "id": "CustomerAddInputEmail",
                      "name": "inputEmail",
                      "width": "fill_container",
                      "height": 48,
                      "fill": "$bg-surface",
                      "cornerRadius": 12,
                      "stroke": {
                        "thickness": 1,
                        "fill": "$border-default"
                      },
                      "padding": [
                        0,
                        16
                      ],
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "text",
                          "id": "CustomerAddInputEmailText",
                          "fill": "$text-tertiary",
                          "content": "email@example.com",
                          "fontFamily": "Roboto",
                          "fontSize": 15,
                          "fontWeight": "normal"
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "CustomerAddFieldNote",
                  "name": "fieldNote",
                  "width": "fill_container",
                  "layout": "vertical",
                  "gap": 8,
                  "children": [
                    {
                      "type": "text",
                      "id": "CustomerAddLabelNote",
                      "fill": "$text-secondary",
                      "content": "Ghi ch\u00fa",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "500"
                    },
                    {
                      "type": "frame",
                      "id": "CustomerAddInputNote",
                      "name": "inputNote",
                      "width": "fill_container",
                      "height": 80,
                      "fill": "$bg-surface",
                      "cornerRadius": 12,
                      "stroke": {
                        "thickness": 1,
                        "fill": "$border-default"
                      },
                      "padding": 16,
                      "children": [
                        {
                          "type": "text",
                          "id": "CustomerAddInputNoteText",
                          "fill": "$text-tertiary",
                          "content": "Th\u00eam ghi ch\u00fa v\u1ec1 kh\u00e1ch h\u00e0ng...",
                          "fontFamily": "Roboto",
                          "fontSize": 15,
                          "fontWeight": "normal"
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "CustomerAddActions",
              "name": "actions",
              "width": "fill_container",
              "padding": [
                16,
                20
              ],
              "stroke": {
                "thickness": 1,
                "fill": "$border-subtle",
                "sides": [
                  "top"
                ]
              },
              "gap": 12,
              "children": [
                {
                  "type": "frame",
                  "id": "CustomerAddCancelBtn",
                  "name": "cancelBtn",
                  "width": "fill_container",
                  "height": 48,
                  "cornerRadius": 12,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "CustomerAddCancelText",
                      "fill": "$text-secondary",
                      "content": "H\u1ee7y",
                      "fontFamily": "Roboto",
                      "fontSize": 15,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "CustomerAddSaveBtn",
                  "name": "saveBtn",
                  "width": "fill_container",
                  "height": 48,
                  "fill": {
                    "type": "gradient",
                    "gradientType": "linear",
                    "enabled": true,
                    "rotation": 135,
                    "size": {
                      "height": 1
                    },
                    "colors": [
                      {
                        "color": "#FF5C00",
                        "position": 0
                      },
                      {
                        "color": "#FF8A4C",
                        "position": 1
                      }
                    ]
                  },
                  "cornerRadius": 12,
                  "gap": 8,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "CustomerAddSaveIcon",
                      "width": 18,
                      "height": 18,
                      "iconFontName": "save",
                      "iconFontFamily": "lucide",
                      "fill": "$text-primary"
                    },
                    {
                      "type": "text",
                      "id": "CustomerAddSaveText",
                      "fill": "$text-primary",
                      "content": "L\u01b0u kh\u00e1ch h\u00e0ng",
                      "fontFamily": "Roboto",
                      "fontSize": 15,
                      "fontWeight": "600"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "OrderPanelBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "OrderPanelBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "ORDER PANEL",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "OrderPanelFull",
          "name": "Organism/OrderPanel/Full",
          "reusable": true,
          "width": 420,
          "height": 720,
          "fill": "$bg-elevated",
          "cornerRadius": 20,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "layout": "vertical",
          "clip": true,
          "children": [
            {
              "type": "frame",
              "id": "OrderPanelTopBar",
              "name": "topBar",
              "width": "fill_container",
              "padding": [
                16,
                20
              ],
              "stroke": {
                "thickness": 1,
                "fill": "$border-subtle",
                "sides": [
                  "bottom"
                ]
              },
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "OrderPanelOrderInfo",
                  "name": "orderInfo",
                  "layout": "vertical",
                  "gap": 4,
                  "children": [
                    {
                      "type": "text",
                      "id": "OrderPanelOrderNum",
                      "name": "orderNumber",
                      "fill": "$text-primary",
                      "content": "\u0110\u01a1n #0042",
                      "fontFamily": "Roboto",
                      "fontSize": 18,
                      "fontWeight": "600"
                    },
                    {
                      "type": "text",
                      "id": "OrderPanelTableInfo",
                      "name": "tableInfo",
                      "fill": "$text-secondary",
                      "content": "B\u00e0n 12 \u2022 3 m\u00f3n",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "OrderPanelActions",
                  "name": "actions",
                  "gap": 8,
                  "children": [
                    {
                      "type": "frame",
                      "id": "OrderPanelBtnHold",
                      "name": "holdBtn",
                      "width": 40,
                      "height": 40,
                      "fill": "$bg-interactive",
                      "cornerRadius": 10,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "id": "OrderPanelHoldIcon",
                          "width": 20,
                          "height": 20,
                          "iconFontName": "pause",
                          "iconFontFamily": "lucide",
                          "fill": "$text-secondary"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "OrderPanelBtnMore",
                      "name": "moreBtn",
                      "width": 40,
                      "height": 40,
                      "fill": "$bg-interactive",
                      "cornerRadius": 10,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "id": "OrderPanelMoreIcon",
                          "width": 20,
                          "height": 20,
                          "iconFontName": "more-vertical",
                          "iconFontFamily": "lucide",
                          "fill": "$text-secondary"
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "OrderPanelItemsList",
              "name": "itemsList",
              "width": "fill_container",
              "height": "fill_container",
              "layout": "vertical",
              "gap": 0,
              "children": [
                {
                  "type": "frame",
                  "id": "OrderPanelItem1",
                  "name": "orderItem1",
                  "width": "fill_container",
                  "padding": [
                    14,
                    20
                  ],
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-subtle",
                    "sides": [
                      "bottom"
                    ]
                  },
                  "justifyContent": "space_between",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "frame",
                      "id": "OrderPanelItem1Left",
                      "name": "leftContent",
                      "gap": 12,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "frame",
                          "id": "OrderPanelItem1Qty",
                          "name": "qtyBadge",
                          "width": 32,
                          "height": 32,
                          "fill": "$bg-interactive",
                          "cornerRadius": 8,
                          "justifyContent": "center",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "text",
                              "id": "OrderPanelItem1QtyText",
                              "fill": "$text-primary",
                              "content": "2",
                              "fontFamily": "Roboto",
                              "fontSize": 14,
                              "fontWeight": "600"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "OrderPanelItem1Info",
                          "name": "itemInfo",
                          "layout": "vertical",
                          "gap": 2,
                          "children": [
                            {
                              "type": "text",
                              "id": "OrderPanelItem1Name",
                              "fill": "$text-primary",
                              "content": "C\u00e0 Ph\u00ea S\u1eefa \u0110\u00e1",
                              "fontFamily": "Roboto",
                              "fontSize": 14,
                              "fontWeight": "500"
                            },
                            {
                              "type": "text",
                              "id": "OrderPanelItem1Note",
                              "fill": "$text-tertiary",
                              "content": "\u00cdt \u0111\u01b0\u1eddng",
                              "fontFamily": "Roboto",
                              "fontSize": 12,
                              "fontWeight": "normal"
                            }
                          ]
                        }
                      ]
                    },
                    {
                      "type": "text",
                      "id": "OrderPanelItem1Price",
                      "fill": "$text-primary",
                      "content": "58,000\u20ab",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "OrderPanelItem2",
                  "name": "orderItem2",
                  "width": "fill_container",
                  "padding": [
                    14,
                    20
                  ],
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-subtle",
                    "sides": [
                      "bottom"
                    ]
                  },
                  "justifyContent": "space_between",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "frame",
                      "id": "OrderPanelItem2Left",
                      "name": "leftContent",
                      "gap": 12,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "frame",
                          "id": "OrderPanelItem2Qty",
                          "name": "qtyBadge",
                          "width": 32,
                          "height": 32,
                          "fill": "$bg-interactive",
                          "cornerRadius": 8,
                          "justifyContent": "center",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "text",
                              "id": "OrderPanelItem2QtyText",
                              "fill": "$text-primary",
                              "content": "1",
                              "fontFamily": "Roboto",
                              "fontSize": 14,
                              "fontWeight": "600"
                            }
                          ]
                        },
                        {
                          "type": "text",
                          "id": "OrderPanelItem2Name",
                          "fill": "$text-primary",
                          "content": "B\u00e1nh M\u00ec Th\u1ecbt Ngu\u1ed9i",
                          "fontFamily": "Roboto",
                          "fontSize": 14,
                          "fontWeight": "500"
                        }
                      ]
                    },
                    {
                      "type": "text",
                      "id": "OrderPanelItem2Price",
                      "fill": "$text-primary",
                      "content": "45,000\u20ab",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "OrderPanelItem3",
                  "name": "orderItem3",
                  "width": "fill_container",
                  "padding": [
                    14,
                    20
                  ],
                  "justifyContent": "space_between",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "frame",
                      "id": "OrderPanelItem3Left",
                      "name": "leftContent",
                      "gap": 12,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "frame",
                          "id": "OrderPanelItem3Qty",
                          "name": "qtyBadge",
                          "width": 32,
                          "height": 32,
                          "fill": "$bg-interactive",
                          "cornerRadius": 8,
                          "justifyContent": "center",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "text",
                              "id": "OrderPanelItem3QtyText",
                              "fill": "$text-primary",
                              "content": "1",
                              "fontFamily": "Roboto",
                              "fontSize": 14,
                              "fontWeight": "600"
                            }
                          ]
                        },
                        {
                          "type": "text",
                          "id": "OrderPanelItem3Name",
                          "fill": "$text-primary",
                          "content": "Tr\u00e0 \u0110\u00e0o Cam S\u1ea3",
                          "fontFamily": "Roboto",
                          "fontSize": 14,
                          "fontWeight": "500"
                        }
                      ]
                    },
                    {
                      "type": "text",
                      "id": "OrderPanelItem3Price",
                      "fill": "$text-primary",
                      "content": "35,000\u20ab",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "600"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "OrderPanelSummary",
              "name": "summarySection",
              "width": "fill_container",
              "fill": "$bg-surface",
              "layout": "vertical",
              "padding": 20,
              "gap": 12,
              "children": [
                {
                  "type": "frame",
                  "id": "OrderPanelSubtotal",
                  "name": "subtotalRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "OrderPanelSubtotalLabel",
                      "fill": "$text-secondary",
                      "content": "T\u1ea1m t\u00ednh",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "text",
                      "id": "OrderPanelSubtotalValue",
                      "fill": "$text-secondary",
                      "content": "138,000\u20ab",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "OrderPanelDiscount",
                  "name": "discountRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "OrderPanelDiscountLabel",
                      "fill": "$green-success",
                      "content": "Khuy\u1ebfn m\u00e3i",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "text",
                      "id": "OrderPanelDiscountValue",
                      "fill": "$green-success",
                      "content": "-10,000\u20ab",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "OrderPanelDivider",
                  "name": "divider",
                  "width": "fill_container",
                  "height": 1,
                  "fill": "$border-subtle"
                },
                {
                  "type": "frame",
                  "id": "OrderPanelTotal",
                  "name": "totalRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "OrderPanelTotalLabel",
                      "fill": "$text-primary",
                      "content": "T\u1ed5ng c\u1ed9ng",
                      "fontFamily": "Roboto",
                      "fontSize": 16,
                      "fontWeight": "600"
                    },
                    {
                      "type": "text",
                      "id": "OrderPanelTotalValue",
                      "fill": "$orange-primary",
                      "content": "128,000\u20ab",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "700"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "OrderPanelPayBtn",
              "name": "payButton",
              "width": "fill_container",
              "height": 64,
              "fill": {
                "type": "gradient",
                "gradientType": "linear",
                "enabled": true,
                "rotation": 135,
                "size": {
                  "height": 1
                },
                "colors": [
                  {
                    "color": "#FF5C00",
                    "position": 0
                  },
                  {
                    "color": "#FF8A4C",
                    "position": 1
                  }
                ]
              },
              "justifyContent": "center",
              "alignItems": "center",
              "gap": 10,
              "children": [
                {
                  "type": "icon_font",
                  "id": "OrderPanelPayIcon",
                  "width": 24,
                  "height": 24,
                  "iconFontName": "credit-card",
                  "iconFontFamily": "lucide",
                  "fill": "$text-primary"
                },
                {
                  "type": "text",
                  "id": "OrderPanelPayText",
                  "fill": "$text-primary",
                  "content": "Thanh to\u00e1n",
                  "fontFamily": "Roboto",
                  "fontSize": 18,
                  "fontWeight": "600"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "OrderPanelVariantsBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "OrderPanelVariantsBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "STATES",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "OrderPanelEmpty",
          "name": "Organism/OrderPanel/Empty",
          "reusable": true,
          "width": 360,
          "height": 400,
          "fill": "$bg-elevated",
          "cornerRadius": 20,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "layout": "vertical",
          "justifyContent": "center",
          "alignItems": "center",
          "gap": 16,
          "children": [
            {
              "type": "icon_font",
              "id": "OrderPanelEmptyIcon",
              "width": 64,
              "height": 64,
              "iconFontName": "shopping-cart",
              "iconFontFamily": "lucide",
              "fill": "$text-tertiary"
            },
            {
              "type": "text",
              "id": "OrderPanelEmptyTitle",
              "fill": "$text-secondary",
              "content": "Ch\u01b0a c\u00f3 m\u00f3n",
              "fontFamily": "Roboto",
              "fontSize": 18,
              "fontWeight": "500"
            },
            {
              "type": "text",
              "id": "OrderPanelEmptyDesc",
              "fill": "$text-tertiary",
              "content": "Ch\u1ecdn s\u1ea3n ph\u1ea9m \u0111\u1ec3 th\u00eam v\u00e0o \u0111\u01a1n",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "OrderPanelCompact",
          "name": "Organism/OrderPanel/Compact",
          "reusable": true,
          "width": 360,
          "height": 400,
          "fill": "$bg-elevated",
          "cornerRadius": 20,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "layout": "vertical",
          "clip": true,
          "children": [
            {
              "type": "frame",
              "id": "OrderPanelCompactHeader",
              "name": "header",
              "width": "fill_container",
              "padding": [
                14,
                20
              ],
              "stroke": {
                "thickness": 1,
                "fill": "$border-subtle",
                "sides": [
                  "bottom"
                ]
              },
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "OrderPanelCompactTitle",
                  "fill": "$text-primary",
                  "content": "\u0110\u01a1n #0043",
                  "fontFamily": "Roboto",
                  "fontSize": 16,
                  "fontWeight": "600"
                },
                {
                  "type": "frame",
                  "id": "OrderPanelCompactBadge",
                  "name": "itemCount",
                  "fill": "$orange-primary",
                  "cornerRadius": 100,
                  "padding": [
                    4,
                    10
                  ],
                  "children": [
                    {
                      "type": "text",
                      "id": "OrderPanelCompactCount",
                      "fill": "$text-primary",
                      "content": "5 m\u00f3n",
                      "fontFamily": "Roboto",
                      "fontSize": 12,
                      "fontWeight": "600"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "OrderPanelCompactItems",
              "name": "itemsList",
              "width": "fill_container",
              "height": "fill_container",
              "layout": "vertical",
              "padding": [
                12,
                20
              ],
              "gap": 8,
              "children": [
                {
                  "type": "text",
                  "id": "OrderPanelCompactItem1",
                  "fill": "$text-secondary",
                  "content": "2x C\u00e0 Ph\u00ea S\u1eefa \u0110\u00e1",
                  "fontFamily": "Roboto",
                  "fontSize": 13,
                  "fontWeight": "normal"
                },
                {
                  "type": "text",
                  "id": "OrderPanelCompactItem2",
                  "fill": "$text-secondary",
                  "content": "1x B\u00e1nh M\u00ec Th\u1ecbt Ngu\u1ed9i",
                  "fontFamily": "Roboto",
                  "fontSize": 13,
                  "fontWeight": "normal"
                },
                {
                  "type": "text",
                  "id": "OrderPanelCompactItem3",
                  "fill": "$text-secondary",
                  "content": "2x Tr\u00e0 \u0110\u00e0o Cam S\u1ea3",
                  "fontFamily": "Roboto",
                  "fontSize": 13,
                  "fontWeight": "normal"
                }
              ]
            },
            {
              "type": "frame",
              "id": "OrderPanelCompactFooter",
              "name": "footer",
              "width": "fill_container",
              "fill": "$bg-surface",
              "padding": [
                16,
                20
              ],
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "OrderPanelCompactTotalLabel",
                  "fill": "$text-primary",
                  "content": "T\u1ed5ng c\u1ed9ng",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "500"
                },
                {
                  "type": "text",
                  "id": "OrderPanelCompactTotalValue",
                  "fill": "$orange-primary",
                  "content": "198,000\u20ab",
                  "fontFamily": "Roboto",
                  "fontSize": 20,
                  "fontWeight": "700"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "PaymentModalBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "PaymentModalBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "PAYMENT MODAL",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "PaymentModalFull",
          "name": "Organism/PaymentModal/Full",
          "reusable": true,
          "width": 520,
          "fill": "$bg-elevated",
          "cornerRadius": 24,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "layout": "vertical",
          "clip": true,
          "children": [
            {
              "type": "frame",
              "id": "PaymentModalTopBar",
              "name": "topBar",
              "width": "fill_container",
              "padding": [
                20,
                24
              ],
              "stroke": {
                "thickness": 1,
                "fill": "$border-subtle",
                "sides": [
                  "bottom"
                ]
              },
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "PaymentModalTopTitle",
                  "fill": "$text-primary",
                  "content": "Thanh to\u00e1n",
                  "fontFamily": "Roboto",
                  "fontSize": 20,
                  "fontWeight": "600"
                },
                {
                  "type": "frame",
                  "id": "PaymentModalCloseBtn",
                  "name": "closeBtn",
                  "width": 40,
                  "height": 40,
                  "fill": "$bg-interactive",
                  "cornerRadius": 10,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "PaymentModalCloseIcon",
                      "width": 20,
                      "height": 20,
                      "iconFontName": "x",
                      "iconFontFamily": "lucide",
                      "fill": "$text-secondary"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "PaymentModalBody",
              "name": "body",
              "width": "fill_container",
              "layout": "vertical",
              "padding": 24,
              "gap": 24,
              "children": [
                {
                  "type": "frame",
                  "id": "PaymentModalAmount",
                  "name": "amountSection",
                  "width": "fill_container",
                  "fill": "$bg-surface",
                  "cornerRadius": 16,
                  "layout": "vertical",
                  "padding": 20,
                  "gap": 8,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "PaymentModalAmountLabel",
                      "fill": "$text-secondary",
                      "content": "T\u1ed5ng thanh to\u00e1n",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "text",
                      "id": "PaymentModalAmountValue",
                      "fill": "$orange-primary",
                      "content": "128,000\u20ab",
                      "fontFamily": "Roboto",
                      "fontSize": 42,
                      "fontWeight": "700"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "PaymentModalMethods",
                  "name": "methodsSection",
                  "width": "fill_container",
                  "layout": "vertical",
                  "gap": 12,
                  "children": [
                    {
                      "type": "text",
                      "id": "PaymentModalMethodsLabel",
                      "fill": "$text-secondary",
                      "content": "Ph\u01b0\u01a1ng th\u1ee9c thanh to\u00e1n",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    },
                    {
                      "type": "frame",
                      "id": "PaymentModalMethodsGrid",
                      "name": "methodsGrid",
                      "width": "fill_container",
                      "gap": 12,
                      "children": [
                        {
                          "type": "frame",
                          "id": "PayMethodCash",
                          "name": "cashMethod",
                          "width": "fill_container",
                          "height": 80,
                          "fill": "$bg-surface",
                          "cornerRadius": 14,
                          "stroke": {
                            "thickness": 2,
                            "fill": "$orange-primary"
                          },
                          "layout": "vertical",
                          "gap": 6,
                          "justifyContent": "center",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "icon_font",
                              "id": "PayMethodCashIcon",
                              "width": 28,
                              "height": 28,
                              "iconFontName": "banknote",
                              "iconFontFamily": "lucide",
                              "fill": "$orange-primary"
                            },
                            {
                              "type": "text",
                              "id": "PayMethodCashText",
                              "fill": "$text-primary",
                              "content": "Ti\u1ec1n m\u1eb7t",
                              "fontFamily": "Roboto",
                              "fontSize": 13,
                              "fontWeight": "500"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "PayMethodCard",
                          "name": "cardMethod",
                          "width": "fill_container",
                          "height": 80,
                          "fill": "$bg-surface",
                          "cornerRadius": 14,
                          "stroke": {
                            "thickness": 1,
                            "fill": "$border-default"
                          },
                          "layout": "vertical",
                          "gap": 6,
                          "justifyContent": "center",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "icon_font",
                              "id": "PayMethodCardIcon",
                              "width": 28,
                              "height": 28,
                              "iconFontName": "credit-card",
                              "iconFontFamily": "lucide",
                              "fill": "$text-secondary"
                            },
                            {
                              "type": "text",
                              "id": "PayMethodCardText",
                              "fill": "$text-secondary",
                              "content": "Th\u1ebb",
                              "fontFamily": "Roboto",
                              "fontSize": 13,
                              "fontWeight": "500"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "PayMethodQR",
                          "name": "qrMethod",
                          "width": "fill_container",
                          "height": 80,
                          "fill": "$bg-surface",
                          "cornerRadius": 14,
                          "stroke": {
                            "thickness": 1,
                            "fill": "$border-default"
                          },
                          "layout": "vertical",
                          "gap": 6,
                          "justifyContent": "center",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "icon_font",
                              "id": "PayMethodQRIcon",
                              "width": 28,
                              "height": 28,
                              "iconFontName": "qr-code",
                              "iconFontFamily": "lucide",
                              "fill": "$text-secondary"
                            },
                            {
                              "type": "text",
                              "id": "PayMethodQRText",
                              "fill": "$text-secondary",
                              "content": "QR Code",
                              "fontFamily": "Roboto",
                              "fontSize": 13,
                              "fontWeight": "500"
                            }
                          ]
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "PaymentModalCashInput",
                  "name": "cashInputSection",
                  "width": "fill_container",
                  "layout": "vertical",
                  "gap": 12,
                  "children": [
                    {
                      "type": "text",
                      "id": "PaymentModalCashLabel",
                      "fill": "$text-secondary",
                      "content": "Ti\u1ec1n kh\u00e1ch \u0111\u01b0a",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    },
                    {
                      "type": "frame",
                      "id": "PaymentModalCashField",
                      "name": "cashField",
                      "width": "fill_container",
                      "height": 56,
                      "fill": "$bg-surface",
                      "cornerRadius": 12,
                      "stroke": {
                        "thickness": 1,
                        "fill": "$border-default"
                      },
                      "padding": [
                        0,
                        20
                      ],
                      "justifyContent": "space_between",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "text",
                          "id": "PaymentModalCashValue",
                          "fill": "$text-primary",
                          "content": "200,000",
                          "fontFamily": "Roboto",
                          "fontSize": 24,
                          "fontWeight": "600"
                        },
                        {
                          "type": "text",
                          "id": "PaymentModalCashCurrency",
                          "fill": "$text-tertiary",
                          "content": "\u20ab",
                          "fontFamily": "Roboto",
                          "fontSize": 18,
                          "fontWeight": "normal"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "PaymentModalQuickAmounts",
                      "name": "quickAmounts",
                      "width": "fill_container",
                      "gap": 8,
                      "children": [
                        {
                          "type": "frame",
                          "id": "QuickAmt50",
                          "name": "amt50k",
                          "fill": "$bg-interactive",
                          "cornerRadius": 8,
                          "padding": [
                            10,
                            16
                          ],
                          "children": [
                            {
                              "type": "text",
                              "id": "QuickAmt50Text",
                              "fill": "$text-secondary",
                              "content": "50K",
                              "fontFamily": "Roboto",
                              "fontSize": 13,
                              "fontWeight": "500"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "QuickAmt100",
                          "name": "amt100k",
                          "fill": "$bg-interactive",
                          "cornerRadius": 8,
                          "padding": [
                            10,
                            16
                          ],
                          "children": [
                            {
                              "type": "text",
                              "id": "QuickAmt100Text",
                              "fill": "$text-secondary",
                              "content": "100K",
                              "fontFamily": "Roboto",
                              "fontSize": 13,
                              "fontWeight": "500"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "QuickAmt200",
                          "name": "amt200k",
                          "fill": "$orange-primary",
                          "cornerRadius": 8,
                          "padding": [
                            10,
                            16
                          ],
                          "children": [
                            {
                              "type": "text",
                              "id": "QuickAmt200Text",
                              "fill": "$text-primary",
                              "content": "200K",
                              "fontFamily": "Roboto",
                              "fontSize": 13,
                              "fontWeight": "600"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "QuickAmt500",
                          "name": "amt500k",
                          "fill": "$bg-interactive",
                          "cornerRadius": 8,
                          "padding": [
                            10,
                            16
                          ],
                          "children": [
                            {
                              "type": "text",
                              "id": "QuickAmt500Text",
                              "fill": "$text-secondary",
                              "content": "500K",
                              "fontFamily": "Roboto",
                              "fontSize": 13,
                              "fontWeight": "500"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "QuickAmtExact",
                          "name": "amtExact",
                          "fill": "$bg-interactive",
                          "cornerRadius": 8,
                          "padding": [
                            10,
                            16
                          ],
                          "children": [
                            {
                              "type": "text",
                              "id": "QuickAmtExactText",
                              "fill": "$text-secondary",
                              "content": "\u0110\u1ee7 ti\u1ec1n",
                              "fontFamily": "Roboto",
                              "fontSize": 13,
                              "fontWeight": "500"
                            }
                          ]
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "PaymentModalChange",
                  "name": "changeSection",
                  "width": "fill_container",
                  "fill": "#22C55E18",
                  "cornerRadius": 12,
                  "padding": [
                    16,
                    20
                  ],
                  "justifyContent": "space_between",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "PaymentModalChangeLabel",
                      "fill": "$green-success",
                      "content": "Ti\u1ec1n th\u1ed1i l\u1ea1i",
                      "fontFamily": "Roboto",
                      "fontSize": 15,
                      "fontWeight": "500"
                    },
                    {
                      "type": "text",
                      "id": "PaymentModalChangeValue",
                      "fill": "$green-success",
                      "content": "72,000\u20ab",
                      "fontFamily": "Roboto",
                      "fontSize": 20,
                      "fontWeight": "700"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "PaymentModalActions",
              "name": "actions",
              "width": "fill_container",
              "padding": 24,
              "stroke": {
                "thickness": 1,
                "fill": "$border-subtle",
                "sides": [
                  "top"
                ]
              },
              "gap": 12,
              "children": [
                {
                  "type": "frame",
                  "id": "PaymentModalCancelBtn",
                  "name": "cancelBtn",
                  "width": "fill_container",
                  "height": 52,
                  "cornerRadius": 12,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "PaymentModalCancelText",
                      "fill": "$text-secondary",
                      "content": "H\u1ee7y",
                      "fontFamily": "Roboto",
                      "fontSize": 16,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "PaymentModalConfirmBtn",
                  "name": "confirmBtn",
                  "width": "fill_container",
                  "height": 52,
                  "fill": {
                    "type": "gradient",
                    "gradientType": "linear",
                    "enabled": true,
                    "rotation": 135,
                    "size": {
                      "height": 1
                    },
                    "colors": [
                      {
                        "color": "#FF5C00",
                        "position": 0
                      },
                      {
                        "color": "#FF8A4C",
                        "position": 1
                      }
                    ]
                  },
                  "cornerRadius": 12,
                  "gap": 8,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "PaymentModalConfirmIcon",
                      "width": 20,
                      "height": 20,
                      "iconFontName": "check",
                      "iconFontFamily": "lucide",
                      "fill": "$text-primary"
                    },
                    {
                      "type": "text",
                      "id": "PaymentModalConfirmText",
                      "fill": "$text-primary",
                      "content": "X\u00e1c nh\u1eadn thanh to\u00e1n",
                      "fontFamily": "Roboto",
                      "fontSize": 16,
                      "fontWeight": "600"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "PaymentSuccessBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "PaymentSuccessBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "SUCCESS STATE",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "PaymentSuccessModal",
          "name": "Organism/PaymentModal/Success",
          "reusable": true,
          "width": 420,
          "fill": "$bg-elevated",
          "cornerRadius": 24,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "layout": "vertical",
          "padding": 40,
          "gap": 24,
          "alignItems": "center",
          "children": [
            {
              "type": "frame",
              "id": "PaymentSuccessIconWrapper",
              "name": "iconWrapper",
              "width": 80,
              "height": 80,
              "fill": "#22C55E18",
              "cornerRadius": 100,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "PaymentSuccessIcon",
                  "width": 40,
                  "height": 40,
                  "iconFontName": "check-circle",
                  "iconFontFamily": "lucide",
                  "fill": "$green-success"
                }
              ]
            },
            {
              "type": "frame",
              "id": "PaymentSuccessContent",
              "name": "content",
              "layout": "vertical",
              "gap": 8,
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "PaymentSuccessContentTitle",
                  "fill": "$text-primary",
                  "content": "Thanh to\u00e1n th\u00e0nh c\u00f4ng!",
                  "fontFamily": "Roboto",
                  "fontSize": 22,
                  "fontWeight": "600",
                  "textAlign": "center"
                },
                {
                  "type": "text",
                  "id": "PaymentSuccessContentDesc",
                  "fill": "$text-secondary",
                  "content": "\u0110\u01a1n h\u00e0ng #0042 \u0111\u00e3 \u0111\u01b0\u1ee3c thanh to\u00e1n",
                  "fontFamily": "Roboto",
                  "fontSize": 15,
                  "fontWeight": "normal",
                  "textAlign": "center"
                }
              ]
            },
            {
              "type": "frame",
              "id": "PaymentSuccessSummary",
              "name": "summary",
              "width": "fill_container",
              "fill": "$bg-surface",
              "cornerRadius": 14,
              "layout": "vertical",
              "padding": 20,
              "gap": 12,
              "children": [
                {
                  "type": "frame",
                  "id": "PaymentSuccessSummaryTotal",
                  "name": "totalRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "PaymentSuccessTotalLabel",
                      "fill": "$text-secondary",
                      "content": "T\u1ed5ng thanh to\u00e1n",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "text",
                      "id": "PaymentSuccessTotalValue",
                      "fill": "$text-primary",
                      "content": "128,000\u20ab",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "PaymentSuccessSummaryMethod",
                  "name": "methodRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "PaymentSuccessMethodLabel",
                      "fill": "$text-secondary",
                      "content": "Ph\u01b0\u01a1ng th\u1ee9c",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "text",
                      "id": "PaymentSuccessMethodValue",
                      "fill": "$text-primary",
                      "content": "Ti\u1ec1n m\u1eb7t",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "PaymentSuccessSummaryChange",
                  "name": "changeRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "PaymentSuccessChangeLabel",
                      "fill": "$green-success",
                      "content": "Ti\u1ec1n th\u1ed1i l\u1ea1i",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "text",
                      "id": "PaymentSuccessChangeValue",
                      "fill": "$green-success",
                      "content": "72,000\u20ab",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "600"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "PaymentSuccessActions",
              "name": "actions",
              "width": "fill_container",
              "gap": 12,
              "children": [
                {
                  "type": "frame",
                  "id": "PaymentSuccessPrintBtn",
                  "name": "printBtn",
                  "width": "fill_container",
                  "height": 48,
                  "cornerRadius": 10,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "gap": 8,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "PaymentSuccessPrintIcon",
                      "width": 18,
                      "height": 18,
                      "iconFontName": "printer",
                      "iconFontFamily": "lucide",
                      "fill": "$text-secondary"
                    },
                    {
                      "type": "text",
                      "id": "PaymentSuccessPrintText",
                      "fill": "$text-secondary",
                      "content": "In h\u00f3a \u0111\u01a1n",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "PaymentSuccessNewBtn",
                  "name": "newOrderBtn",
                  "width": "fill_container",
                  "height": 48,
                  "fill": {
                    "type": "gradient",
                    "gradientType": "linear",
                    "enabled": true,
                    "rotation": 135,
                    "size": {
                      "height": 1
                    },
                    "colors": [
                      {
                        "color": "#FF5C00",
                        "position": 0
                      },
                      {
                        "color": "#FF8A4C",
                        "position": 1
                      }
                    ]
                  },
                  "cornerRadius": 10,
                  "gap": 8,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "PaymentSuccessNewIcon",
                      "width": 18,
                      "height": 18,
                      "iconFontName": "plus",
                      "iconFontFamily": "lucide",
                      "fill": "$text-primary"
                    },
                    {
                      "type": "text",
                      "id": "PaymentSuccessNewText",
                      "fill": "$text-primary",
                      "content": "\u0110\u01a1n m\u1edbi",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "600"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "ProductGridBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "ProductGridBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "PRODUCT GRID",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "ProductGridFull",
          "name": "Organism/ProductGrid/Full",
          "reusable": true,
          "width": "fill_container",
          "fill": "$bg-elevated",
          "cornerRadius": 16,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "layout": "vertical",
          "clip": true,
          "children": [
            {
              "type": "frame",
              "id": "ProductGridToolbar",
              "name": "toolbar",
              "width": "fill_container",
              "padding": [
                16,
                20
              ],
              "stroke": {
                "thickness": 1,
                "fill": "$border-subtle",
                "sides": [
                  "bottom"
                ]
              },
              "gap": 16,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "ProductGridSearch",
                  "name": "searchBox",
                  "width": 320,
                  "height": 44,
                  "fill": "$bg-surface",
                  "cornerRadius": 12,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "padding": [
                    0,
                    16
                  ],
                  "gap": 12,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "ProductGridSearchIcon",
                      "width": 20,
                      "height": 20,
                      "iconFontName": "search",
                      "iconFontFamily": "lucide",
                      "fill": "$text-tertiary"
                    },
                    {
                      "type": "text",
                      "id": "ProductGridSearchText",
                      "fill": "$text-tertiary",
                      "content": "T\u00ecm s\u1ea3n ph\u1ea9m, m\u00e3 v\u1ea1ch...",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "ProductGridScanBtn",
                  "name": "scanButton",
                  "height": 44,
                  "fill": "$bg-interactive",
                  "cornerRadius": 12,
                  "padding": [
                    0,
                    16
                  ],
                  "gap": 8,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "ProductGridScanIcon",
                      "width": 20,
                      "height": 20,
                      "iconFontName": "scan-barcode",
                      "iconFontFamily": "lucide",
                      "fill": "$text-secondary"
                    },
                    {
                      "type": "text",
                      "id": "ProductGridScanText",
                      "fill": "$text-secondary",
                      "content": "Qu\u00e9t m\u00e3",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "ProductGridViewToggle",
                  "name": "viewToggle",
                  "fill": "$bg-surface",
                  "cornerRadius": 10,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "padding": 4,
                  "gap": 4,
                  "children": [
                    {
                      "type": "frame",
                      "id": "ProductGridViewGrid",
                      "name": "gridView",
                      "width": 36,
                      "height": 36,
                      "fill": "$bg-interactive",
                      "cornerRadius": 8,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "id": "ProductGridViewGridIcon",
                          "width": 18,
                          "height": 18,
                          "iconFontName": "grid-2x2",
                          "iconFontFamily": "lucide",
                          "fill": "$text-primary"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "ProductGridViewList",
                      "name": "listView",
                      "width": 36,
                      "height": 36,
                      "cornerRadius": 8,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "id": "ProductGridViewListIcon",
                          "width": 18,
                          "height": 18,
                          "iconFontName": "list",
                          "iconFontFamily": "lucide",
                          "fill": "$text-tertiary"
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "ProductGridCategories",
              "name": "categoriesBar",
              "width": "fill_container",
              "padding": [
                12,
                20
              ],
              "stroke": {
                "thickness": 1,
                "fill": "$border-subtle",
                "sides": [
                  "bottom"
                ]
              },
              "gap": 12,
              "children": [
                {
                  "type": "frame",
                  "id": "ProductGridCatAll",
                  "name": "catAll",
                  "fill": "$orange-primary",
                  "cornerRadius": 100,
                  "padding": [
                    10,
                    20
                  ],
                  "children": [
                    {
                      "type": "text",
                      "id": "ProductGridCatAllText",
                      "fill": "$text-primary",
                      "content": "T\u1ea5t c\u1ea3",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "ProductGridCatDrinks",
                  "name": "catDrinks",
                  "fill": "$bg-interactive",
                  "cornerRadius": 100,
                  "padding": [
                    10,
                    20
                  ],
                  "children": [
                    {
                      "type": "text",
                      "id": "ProductGridCatDrinksText",
                      "fill": "$text-secondary",
                      "content": "\u0110\u1ed3 u\u1ed1ng",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "ProductGridCatFood",
                  "name": "catFood",
                  "fill": "$bg-interactive",
                  "cornerRadius": 100,
                  "padding": [
                    10,
                    20
                  ],
                  "children": [
                    {
                      "type": "text",
                      "id": "ProductGridCatFoodText",
                      "fill": "$text-secondary",
                      "content": "Th\u1ee9c \u0103n",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "ProductGridCatDesserts",
                  "name": "catDesserts",
                  "fill": "$bg-interactive",
                  "cornerRadius": 100,
                  "padding": [
                    10,
                    20
                  ],
                  "children": [
                    {
                      "type": "text",
                      "id": "ProductGridCatDessertsText",
                      "fill": "$text-secondary",
                      "content": "Tr\u00e1ng mi\u1ec7ng",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "ProductGridCatCombo",
                  "name": "catCombo",
                  "fill": "$bg-interactive",
                  "cornerRadius": 100,
                  "padding": [
                    10,
                    20
                  ],
                  "children": [
                    {
                      "type": "text",
                      "id": "ProductGridCatComboText",
                      "fill": "$text-secondary",
                      "content": "Combo",
                      "fontFamily": "Roboto",
                      "fontSize": 13,
                      "fontWeight": "500"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "ProductGridContent",
              "name": "productsGrid",
              "width": "fill_container",
              "padding": 20,
              "gap": 16,
              "wrap": true,
              "children": [
                {
                  "type": "frame",
                  "id": "PGridCard1",
                  "name": "productCard1",
                  "width": 160,
                  "fill": "$bg-surface",
                  "cornerRadius": 14,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "layout": "vertical",
                  "clip": true,
                  "children": [
                    {
                      "type": "frame",
                      "id": "PGridCard1Img",
                      "name": "img",
                      "width": "fill_container",
                      "height": 110,
                      "fill": "#3B82F618"
                    },
                    {
                      "type": "frame",
                      "id": "PGridCard1Content",
                      "name": "content",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 6,
                      "padding": 14,
                      "children": [
                        {
                          "type": "text",
                          "id": "PGridCard1Name",
                          "fill": "$text-primary",
                          "content": "C\u00e0 Ph\u00ea S\u1eefa \u0110\u00e1",
                          "fontFamily": "Roboto",
                          "fontSize": 14,
                          "fontWeight": "500"
                        },
                        {
                          "type": "text",
                          "id": "PGridCard1Price",
                          "fill": "$orange-primary",
                          "content": "29,000\u20ab",
                          "fontFamily": "Roboto",
                          "fontSize": 15,
                          "fontWeight": "600"
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "PGridCard2",
                  "name": "productCard2",
                  "width": 160,
                  "fill": "$bg-surface",
                  "cornerRadius": 14,
                  "stroke": {
                    "thickness": 2,
                    "fill": "$orange-primary"
                  },
                  "layout": "vertical",
                  "clip": true,
                  "children": [
                    {
                      "type": "frame",
                      "id": "PGridCard2Img",
                      "name": "img",
                      "width": "fill_container",
                      "height": 110,
                      "fill": "#22C55E18"
                    },
                    {
                      "type": "frame",
                      "id": "PGridCard2Content",
                      "name": "content",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 6,
                      "padding": 14,
                      "children": [
                        {
                          "type": "text",
                          "id": "PGridCard2Name",
                          "fill": "$text-primary",
                          "content": "Tr\u00e0 \u0110\u00e0o Cam S\u1ea3",
                          "fontFamily": "Roboto",
                          "fontSize": 14,
                          "fontWeight": "500"
                        },
                        {
                          "type": "text",
                          "id": "PGridCard2Price",
                          "fill": "$orange-primary",
                          "content": "35,000\u20ab",
                          "fontFamily": "Roboto",
                          "fontSize": 15,
                          "fontWeight": "600"
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "PGridCard3",
                  "name": "productCard3",
                  "width": 160,
                  "fill": "$bg-surface",
                  "cornerRadius": 14,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "layout": "vertical",
                  "clip": true,
                  "children": [
                    {
                      "type": "frame",
                      "id": "PGridCard3Img",
                      "name": "img",
                      "width": "fill_container",
                      "height": 110,
                      "fill": "#F59E0B18"
                    },
                    {
                      "type": "frame",
                      "id": "PGridCard3Content",
                      "name": "content",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 6,
                      "padding": 14,
                      "children": [
                        {
                          "type": "text",
                          "id": "PGridCard3Name",
                          "fill": "$text-primary",
                          "content": "B\u00e1nh M\u00ec Th\u1ecbt Ngu\u1ed9i",
                          "fontFamily": "Roboto",
                          "fontSize": 14,
                          "fontWeight": "500"
                        },
                        {
                          "type": "text",
                          "id": "PGridCard3Price",
                          "fill": "$orange-primary",
                          "content": "45,000\u20ab",
                          "fontFamily": "Roboto",
                          "fontSize": 15,
                          "fontWeight": "600"
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "PGridCard4",
                  "name": "productCard4",
                  "width": 160,
                  "fill": "$bg-surface",
                  "cornerRadius": 14,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "layout": "vertical",
                  "clip": true,
                  "children": [
                    {
                      "type": "frame",
                      "id": "PGridCard4Img",
                      "name": "img",
                      "width": "fill_container",
                      "height": 110,
                      "fill": "#8B5CF618"
                    },
                    {
                      "type": "frame",
                      "id": "PGridCard4Content",
                      "name": "content",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 6,
                      "padding": 14,
                      "children": [
                        {
                          "type": "text",
                          "id": "PGridCard4Name",
                          "fill": "$text-primary",
                          "content": "Matcha Latte",
                          "fontFamily": "Roboto",
                          "fontSize": 14,
                          "fontWeight": "500"
                        },
                        {
                          "type": "text",
                          "id": "PGridCard4Price",
                          "fill": "$orange-primary",
                          "content": "42,000\u20ab",
                          "fontFamily": "Roboto",
                          "fontSize": 15,
                          "fontWeight": "600"
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "PGridCard5",
                  "name": "productCard5",
                  "width": 160,
                  "fill": "$bg-surface",
                  "cornerRadius": 14,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "layout": "vertical",
                  "clip": true,
                  "children": [
                    {
                      "type": "frame",
                      "id": "PGridCard5Img",
                      "name": "img",
                      "width": "fill_container",
                      "height": 110,
                      "fill": "#EC489918"
                    },
                    {
                      "type": "frame",
                      "id": "PGridCard5Content",
                      "name": "content",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 6,
                      "padding": 14,
                      "children": [
                        {
                          "type": "text",
                          "id": "PGridCard5Name",
                          "fill": "$text-primary",
                          "content": "Sinh T\u1ed1 D\u00e2u",
                          "fontFamily": "Roboto",
                          "fontSize": 14,
                          "fontWeight": "500"
                        },
                        {
                          "type": "text",
                          "id": "PGridCard5Price",
                          "fill": "$orange-primary",
                          "content": "38,000\u20ab",
                          "fontFamily": "Roboto",
                          "fontSize": 15,
                          "fontWeight": "600"
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "PGridCard6",
                  "name": "productCard6",
                  "width": 160,
                  "fill": "$bg-surface",
                  "cornerRadius": 14,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "layout": "vertical",
                  "clip": true,
                  "opacity": 0.5,
                  "children": [
                    {
                      "type": "frame",
                      "id": "PGridCard6Img",
                      "name": "img",
                      "width": "fill_container",
                      "height": 110,
                      "fill": "$bg-interactive",
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "text",
                          "id": "PGridCard6OOS",
                          "fill": "$text-disabled",
                          "content": "H\u1ebft h\u00e0ng",
                          "fontFamily": "Roboto",
                          "fontSize": 12,
                          "fontWeight": "600"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "PGridCard6Content",
                      "name": "content",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 6,
                      "padding": 14,
                      "children": [
                        {
                          "type": "text",
                          "id": "PGridCard6Name",
                          "fill": "$text-disabled",
                          "content": "Sinh T\u1ed1 B\u01a1",
                          "fontFamily": "Roboto",
                          "fontSize": 14,
                          "fontWeight": "500"
                        },
                        {
                          "type": "text",
                          "id": "PGridCard6Price",
                          "fill": "$text-disabled",
                          "content": "45,000\u20ab",
                          "fontFamily": "Roboto",
                          "fontSize": 15,
                          "fontWeight": "600"
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "CategoryTabsBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "CategoryTabsBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "CATEGORY TABS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "CategoryTabsVertical",
          "name": "Organism/CategoryTabs/Vertical",
          "reusable": true,
          "width": 200,
          "fill": "$bg-elevated",
          "cornerRadius": 16,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "layout": "vertical",
          "padding": 12,
          "gap": 8,
          "children": [
            {
              "type": "frame",
              "id": "CategoryTabAll",
              "name": "tabAll",
              "width": "fill_container",
              "fill": "$orange-primary",
              "cornerRadius": 12,
              "padding": [
                14,
                16
              ],
              "gap": 12,
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "CategoryTabAllIcon",
                  "width": 20,
                  "height": 20,
                  "iconFontName": "layout-grid",
                  "iconFontFamily": "lucide",
                  "fill": "$text-primary"
                },
                {
                  "type": "text",
                  "id": "CategoryTabAllText",
                  "fill": "$text-primary",
                  "content": "T\u1ea5t c\u1ea3",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "frame",
              "id": "CategoryTabDrinks",
              "name": "tabDrinks",
              "width": "fill_container",
              "cornerRadius": 12,
              "padding": [
                14,
                16
              ],
              "gap": 12,
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "CategoryTabDrinksIcon",
                  "width": 20,
                  "height": 20,
                  "iconFontName": "coffee",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                },
                {
                  "type": "text",
                  "id": "CategoryTabDrinksText",
                  "fill": "$text-secondary",
                  "content": "\u0110\u1ed3 u\u1ed1ng",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "500"
                }
              ]
            },
            {
              "type": "frame",
              "id": "CategoryTabFood",
              "name": "tabFood",
              "width": "fill_container",
              "cornerRadius": 12,
              "padding": [
                14,
                16
              ],
              "gap": 12,
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "CategoryTabFoodIcon",
                  "width": 20,
                  "height": 20,
                  "iconFontName": "utensils",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                },
                {
                  "type": "text",
                  "id": "CategoryTabFoodText",
                  "fill": "$text-secondary",
                  "content": "Th\u1ee9c \u0103n",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "500"
                }
              ]
            },
            {
              "type": "frame",
              "id": "CategoryTabDesserts",
              "name": "tabDesserts",
              "width": "fill_container",
              "cornerRadius": 12,
              "padding": [
                14,
                16
              ],
              "gap": 12,
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "CategoryTabDessertsIcon",
                  "width": 20,
                  "height": 20,
                  "iconFontName": "cake-slice",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                },
                {
                  "type": "text",
                  "id": "CategoryTabDessertsText",
                  "fill": "$text-secondary",
                  "content": "Tr\u00e1ng mi\u1ec7ng",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "500"
                }
              ]
            },
            {
              "type": "frame",
              "id": "CategoryTabCombo",
              "name": "tabCombo",
              "width": "fill_container",
              "cornerRadius": 12,
              "padding": [
                14,
                16
              ],
              "gap": 12,
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "CategoryTabComboIcon",
                  "width": 20,
                  "height": 20,
                  "iconFontName": "package",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                },
                {
                  "type": "text",
                  "id": "CategoryTabComboText",
                  "fill": "$text-secondary",
                  "content": "Combo",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "500"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "QuickActionsBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "QuickActionsBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "QUICK ACTIONS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "QuickActionsBar",
          "name": "Organism/QuickActions/Bar",
          "reusable": true,
          "fill": "$bg-elevated",
          "cornerRadius": 16,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "padding": 16,
          "gap": 12,
          "children": [
            {
              "type": "frame",
              "id": "QABtnNewOrder",
              "name": "newOrderBtn",
              "width": 100,
              "height": 90,
              "fill": {
                "type": "gradient",
                "gradientType": "linear",
                "enabled": true,
                "rotation": 135,
                "size": {
                  "height": 1
                },
                "colors": [
                  {
                    "color": "#FF5C00",
                    "position": 0
                  },
                  {
                    "color": "#FF8A4C",
                    "position": 1
                  }
                ]
              },
              "cornerRadius": 14,
              "layout": "vertical",
              "gap": 8,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "QABtnNewOrderIcon",
                  "width": 28,
                  "height": 28,
                  "iconFontName": "plus",
                  "iconFontFamily": "lucide",
                  "fill": "$text-primary"
                },
                {
                  "type": "text",
                  "id": "QABtnNewOrderText",
                  "fill": "$text-primary",
                  "content": "\u0110\u01a1n m\u1edbi",
                  "fontFamily": "Roboto",
                  "fontSize": 12,
                  "fontWeight": "600"
                }
              ]
            },
            {
              "type": "frame",
              "id": "QABtnHold",
              "name": "holdBtn",
              "width": 100,
              "height": 90,
              "fill": "$bg-interactive",
              "cornerRadius": 14,
              "layout": "vertical",
              "gap": 8,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "QABtnHoldIcon",
                  "width": 28,
                  "height": 28,
                  "iconFontName": "pause",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                },
                {
                  "type": "text",
                  "id": "QABtnHoldText",
                  "fill": "$text-secondary",
                  "content": "T\u1ea1m gi\u1eef",
                  "fontFamily": "Roboto",
                  "fontSize": 12,
                  "fontWeight": "500"
                }
              ]
            },
            {
              "type": "frame",
              "id": "QABtnRecall",
              "name": "recallBtn",
              "width": 100,
              "height": 90,
              "fill": "$bg-interactive",
              "cornerRadius": 14,
              "layout": "vertical",
              "gap": 8,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "QABtnRecallBadge",
                  "name": "badge",
                  "fill": "#EF4444",
                  "cornerRadius": 100,
                  "padding": [
                    2,
                    6
                  ],
                  "position": "absolute",
                  "x": 70,
                  "y": 8,
                  "children": [
                    {
                      "type": "text",
                      "id": "QABtnRecallBadgeText",
                      "fill": "#FFFFFF",
                      "content": "3",
                      "fontFamily": "Roboto",
                      "fontSize": 10,
                      "fontWeight": "700"
                    }
                  ]
                },
                {
                  "type": "icon_font",
                  "id": "QABtnRecallIcon",
                  "width": 28,
                  "height": 28,
                  "iconFontName": "clipboard-list",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                },
                {
                  "type": "text",
                  "id": "QABtnRecallText",
                  "fill": "$text-secondary",
                  "content": "\u0110\u01a1n ch\u1edd",
                  "fontFamily": "Roboto",
                  "fontSize": 12,
                  "fontWeight": "500"
                }
              ]
            },
            {
              "type": "frame",
              "id": "QABtnDiscount",
              "name": "discountBtn",
              "width": 100,
              "height": 90,
              "fill": "$bg-interactive",
              "cornerRadius": 14,
              "layout": "vertical",
              "gap": 8,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "QABtnDiscountIcon",
                  "width": 28,
                  "height": 28,
                  "iconFontName": "percent",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                },
                {
                  "type": "text",
                  "id": "QABtnDiscountText",
                  "fill": "$text-secondary",
                  "content": "Gi\u1ea3m gi\u00e1",
                  "fontFamily": "Roboto",
                  "fontSize": 12,
                  "fontWeight": "500"
                }
              ]
            },
            {
              "type": "frame",
              "id": "QABtnCustomer",
              "name": "customerBtn",
              "width": 100,
              "height": 90,
              "fill": "$bg-interactive",
              "cornerRadius": 14,
              "layout": "vertical",
              "gap": 8,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "QABtnCustomerIcon",
                  "width": 28,
                  "height": 28,
                  "iconFontName": "user",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                },
                {
                  "type": "text",
                  "id": "QABtnCustomerText",
                  "fill": "$text-secondary",
                  "content": "Kh\u00e1ch h\u00e0ng",
                  "fontFamily": "Roboto",
                  "fontSize": 12,
                  "fontWeight": "500"
                }
              ]
            },
            {
              "type": "frame",
              "id": "QABtnPrint",
              "name": "printBtn",
              "width": 100,
              "height": 90,
              "fill": "$bg-interactive",
              "cornerRadius": 14,
              "layout": "vertical",
              "gap": 8,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "QABtnPrintIcon",
                  "width": 28,
                  "height": 28,
                  "iconFontName": "printer",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                },
                {
                  "type": "text",
                  "id": "QABtnPrintText",
                  "fill": "$text-secondary",
                  "content": "In bill",
                  "fontFamily": "Roboto",
                  "fontSize": 12,
                  "fontWeight": "500"
                }
              ]
            },
            {
              "type": "frame",
              "id": "QABtnMore",
              "name": "moreBtn",
              "width": 100,
              "height": 90,
              "fill": "$bg-interactive",
              "cornerRadius": 14,
              "layout": "vertical",
              "gap": 8,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "QABtnMoreIcon",
                  "width": 28,
                  "height": 28,
                  "iconFontName": "more-horizontal",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                },
                {
                  "type": "text",
                  "id": "QABtnMoreText",
                  "fill": "$text-secondary",
                  "content": "Th\u00eam",
                  "fontFamily": "Roboto",
                  "fontSize": 12,
                  "fontWeight": "500"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "QAVerticalBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "QAVerticalBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "SIDEBAR ACTIONS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "QuickActionsSidebar",
          "name": "Organism/QuickActions/Sidebar",
          "reusable": true,
          "width": 72,
          "fill": "$bg-elevated",
          "cornerRadius": 16,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "layout": "vertical",
          "padding": 12,
          "gap": 8,
          "alignItems": "center",
          "children": [
            {
              "type": "frame",
              "id": "QASideNewOrder",
              "name": "newOrderBtn",
              "width": 48,
              "height": 48,
              "fill": "$orange-primary",
              "cornerRadius": 12,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "QASideNewOrderIcon",
                  "width": 22,
                  "height": 22,
                  "iconFontName": "plus",
                  "iconFontFamily": "lucide",
                  "fill": "$text-primary"
                }
              ]
            },
            {
              "type": "frame",
              "id": "QASideHold",
              "name": "holdBtn",
              "width": 48,
              "height": 48,
              "fill": "$bg-interactive",
              "cornerRadius": 12,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "QASideHoldIcon",
                  "width": 22,
                  "height": 22,
                  "iconFontName": "pause",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                }
              ]
            },
            {
              "type": "frame",
              "id": "QASideRecall",
              "name": "recallBtn",
              "width": 48,
              "height": 48,
              "fill": "$bg-interactive",
              "cornerRadius": 12,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "QASideRecallIcon",
                  "width": 22,
                  "height": 22,
                  "iconFontName": "clipboard-list",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                }
              ]
            },
            {
              "type": "frame",
              "id": "QASideDiscount",
              "name": "discountBtn",
              "width": 48,
              "height": 48,
              "fill": "$bg-interactive",
              "cornerRadius": 12,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "QASideDiscountIcon",
                  "width": 22,
                  "height": 22,
                  "iconFontName": "percent",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                }
              ]
            },
            {
              "type": "frame",
              "id": "QASideCustomer",
              "name": "customerBtn",
              "width": 48,
              "height": 48,
              "fill": "$bg-interactive",
              "cornerRadius": 12,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "QASideCustomerIcon",
                  "width": 22,
                  "height": 22,
                  "iconFontName": "user",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                }
              ]
            },
            {
              "type": "frame",
              "id": "QASidePrint",
              "name": "printBtn",
              "width": 48,
              "height": 48,
              "fill": "$bg-interactive",
              "cornerRadius": 12,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "QASidePrintIcon",
                  "width": 22,
                  "height": 22,
                  "iconFontName": "printer",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                }
              ]
            },
            {
              "type": "frame",
              "id": "QASideSpacer",
              "name": "spacer",
              "width": 1,
              "height": "fill_container"
            },
            {
              "type": "frame",
              "id": "QASideSettings",
              "name": "settingsBtn",
              "width": 48,
              "height": 48,
              "fill": "$bg-interactive",
              "cornerRadius": 12,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "QASideSettingsIcon",
                  "width": 22,
                  "height": 22,
                  "iconFontName": "settings",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "ReceiptPreviewBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "ReceiptPreviewBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "RECEIPT PREVIEW",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "ReceiptPreviewFull",
          "name": "Organism/ReceiptPreview/Full",
          "reusable": true,
          "width": 340,
          "fill": "#FFFFFF",
          "cornerRadius": 4,
          "layout": "vertical",
          "padding": [
            24,
            20
          ],
          "gap": 16,
          "children": [
            {
              "type": "frame",
              "id": "ReceiptHeader",
              "name": "receiptHeader",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 4,
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "ReceiptStoreName",
                  "fill": "#111111",
                  "content": "GoodGo Caf\u00e9",
                  "fontFamily": "Roboto",
                  "fontSize": 20,
                  "fontWeight": "700",
                  "textAlign": "center"
                },
                {
                  "type": "text",
                  "id": "ReceiptStoreAddr",
                  "fill": "#666666",
                  "content": "123 Nguy\u1ec5n Hu\u1ec7, Q.1, TP.HCM",
                  "fontFamily": "Roboto",
                  "fontSize": 11,
                  "fontWeight": "normal",
                  "textAlign": "center"
                },
                {
                  "type": "text",
                  "id": "ReceiptStorePhone",
                  "fill": "#666666",
                  "content": "Tel: 1900 1234",
                  "fontFamily": "Roboto",
                  "fontSize": 11,
                  "fontWeight": "normal",
                  "textAlign": "center"
                }
              ]
            },
            {
              "type": "frame",
              "id": "ReceiptDivider1",
              "name": "divider1",
              "width": "fill_container",
              "height": 1,
              "stroke": {
                "thickness": 1,
                "fill": "#CCCCCC",
                "style": "dashed"
              }
            },
            {
              "type": "frame",
              "id": "ReceiptInfo",
              "name": "receiptInfo",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 4,
              "children": [
                {
                  "type": "frame",
                  "id": "ReceiptInfoOrder",
                  "name": "orderRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "ReceiptInfoOrderLabel",
                      "fill": "#666666",
                      "content": "S\u1ed1 H\u0110:",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "text",
                      "id": "ReceiptInfoOrderValue",
                      "fill": "#111111",
                      "content": "#0042",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "ReceiptInfoDate",
                  "name": "dateRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "ReceiptInfoDateLabel",
                      "fill": "#666666",
                      "content": "Ng\u00e0y:",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "text",
                      "id": "ReceiptInfoDateValue",
                      "fill": "#111111",
                      "content": "05/02/2026 23:00",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "ReceiptInfoTable",
                  "name": "tableRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "ReceiptInfoTableLabel",
                      "fill": "#666666",
                      "content": "B\u00e0n:",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "text",
                      "id": "ReceiptInfoTableValue",
                      "fill": "#111111",
                      "content": "B\u00e0n 12",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "ReceiptInfoCashier",
                  "name": "cashierRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "ReceiptInfoCashierLabel",
                      "fill": "#666666",
                      "content": "Thu ng\u00e2n:",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "text",
                      "id": "ReceiptInfoCashierValue",
                      "fill": "#111111",
                      "content": "Minh",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "normal"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "ReceiptDivider2",
              "name": "divider2",
              "width": "fill_container",
              "height": 1,
              "stroke": {
                "thickness": 1,
                "fill": "#CCCCCC",
                "style": "dashed"
              }
            },
            {
              "type": "frame",
              "id": "ReceiptItems",
              "name": "receiptItems",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 8,
              "children": [
                {
                  "type": "frame",
                  "id": "ReceiptItem1",
                  "name": "receiptItem1",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "frame",
                      "id": "ReceiptItem1Left",
                      "name": "leftContent",
                      "layout": "vertical",
                      "gap": 2,
                      "children": [
                        {
                          "type": "text",
                          "id": "ReceiptItem1Name",
                          "fill": "#111111",
                          "content": "C\u00e0 Ph\u00ea S\u1eefa \u0110\u00e1 x2",
                          "fontFamily": "Roboto",
                          "fontSize": 12,
                          "fontWeight": "500"
                        },
                        {
                          "type": "text",
                          "id": "ReceiptItem1Note",
                          "fill": "#888888",
                          "content": "\u00cdt \u0111\u01b0\u1eddng",
                          "fontFamily": "Roboto",
                          "fontSize": 10,
                          "fontWeight": "normal"
                        }
                      ]
                    },
                    {
                      "type": "text",
                      "id": "ReceiptItem1Price",
                      "fill": "#111111",
                      "content": "58,000",
                      "fontFamily": "Roboto",
                      "fontSize": 12,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "ReceiptItem2",
                  "name": "receiptItem2",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "ReceiptItem2Name",
                      "fill": "#111111",
                      "content": "B\u00e1nh M\u00ec Th\u1ecbt Ngu\u1ed9i x1",
                      "fontFamily": "Roboto",
                      "fontSize": 12,
                      "fontWeight": "500"
                    },
                    {
                      "type": "text",
                      "id": "ReceiptItem2Price",
                      "fill": "#111111",
                      "content": "45,000",
                      "fontFamily": "Roboto",
                      "fontSize": 12,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "ReceiptItem3",
                  "name": "receiptItem3",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "ReceiptItem3Name",
                      "fill": "#111111",
                      "content": "Tr\u00e0 \u0110\u00e0o Cam S\u1ea3 x1",
                      "fontFamily": "Roboto",
                      "fontSize": 12,
                      "fontWeight": "500"
                    },
                    {
                      "type": "text",
                      "id": "ReceiptItem3Price",
                      "fill": "#111111",
                      "content": "35,000",
                      "fontFamily": "Roboto",
                      "fontSize": 12,
                      "fontWeight": "500"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "ReceiptDivider3",
              "name": "divider3",
              "width": "fill_container",
              "height": 1,
              "stroke": {
                "thickness": 1,
                "fill": "#CCCCCC",
                "style": "dashed"
              }
            },
            {
              "type": "frame",
              "id": "ReceiptSummary",
              "name": "receiptSummary",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 6,
              "children": [
                {
                  "type": "frame",
                  "id": "ReceiptSummarySubtotal",
                  "name": "subtotalRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "ReceiptSubtotalLabel",
                      "fill": "#666666",
                      "content": "T\u1ea1m t\u00ednh:",
                      "fontFamily": "Roboto",
                      "fontSize": 12,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "text",
                      "id": "ReceiptSubtotalValue",
                      "fill": "#111111",
                      "content": "138,000",
                      "fontFamily": "Roboto",
                      "fontSize": 12,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "ReceiptSummaryDiscount",
                  "name": "discountRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "ReceiptDiscountLabel",
                      "fill": "#666666",
                      "content": "Gi\u1ea3m gi\u00e1:",
                      "fontFamily": "Roboto",
                      "fontSize": 12,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "text",
                      "id": "ReceiptDiscountValue",
                      "fill": "#22C55E",
                      "content": "-10,000",
                      "fontFamily": "Roboto",
                      "fontSize": 12,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "ReceiptSummaryTotal",
                  "name": "totalRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "ReceiptTotalLabel",
                      "fill": "#111111",
                      "content": "T\u1ed4NG C\u1ed8NG:",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "700"
                    },
                    {
                      "type": "text",
                      "id": "ReceiptTotalValue",
                      "fill": "#111111",
                      "content": "128,000\u20ab",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "700"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "ReceiptDivider4",
              "name": "divider4",
              "width": "fill_container",
              "height": 1,
              "stroke": {
                "thickness": 1,
                "fill": "#CCCCCC",
                "style": "dashed"
              }
            },
            {
              "type": "frame",
              "id": "ReceiptPayment",
              "name": "receiptPayment",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 4,
              "children": [
                {
                  "type": "frame",
                  "id": "ReceiptPaymentMethod",
                  "name": "methodRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "ReceiptPaymentMethodLabel",
                      "fill": "#666666",
                      "content": "Thanh to\u00e1n:",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "text",
                      "id": "ReceiptPaymentMethodValue",
                      "fill": "#111111",
                      "content": "Ti\u1ec1n m\u1eb7t",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "ReceiptPaymentCash",
                  "name": "cashRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "ReceiptPaymentCashLabel",
                      "fill": "#666666",
                      "content": "Ti\u1ec1n kh\u00e1ch:",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "text",
                      "id": "ReceiptPaymentCashValue",
                      "fill": "#111111",
                      "content": "200,000",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "ReceiptPaymentChange",
                  "name": "changeRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "ReceiptPaymentChangeLabel",
                      "fill": "#666666",
                      "content": "Ti\u1ec1n th\u1ed1i:",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "text",
                      "id": "ReceiptPaymentChangeValue",
                      "fill": "#111111",
                      "content": "72,000",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "normal"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "ReceiptFooter",
              "name": "receiptFooter",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 8,
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "ReceiptThanks",
                  "fill": "#666666",
                  "content": "C\u1ea3m \u01a1n qu\u00fd kh\u00e1ch!",
                  "fontFamily": "Roboto",
                  "fontSize": 12,
                  "fontWeight": "500",
                  "textAlign": "center"
                },
                {
                  "type": "text",
                  "id": "ReceiptWifi",
                  "fill": "#888888",
                  "content": "WiFi: GoodGo_Guest | Pass: goodgo123",
                  "fontFamily": "Roboto",
                  "fontSize": 10,
                  "fontWeight": "normal",
                  "textAlign": "center"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "NumpadFullBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "NumpadFullBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "POS NUMPAD",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "NumpadFull",
          "name": "Organism/Numpad/Full",
          "reusable": true,
          "fill": "$bg-elevated",
          "cornerRadius": 16,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "layout": "vertical",
          "gap": 8,
          "padding": 16,
          "children": [
            {
              "type": "frame",
              "id": "NumpadRow1",
              "name": "row1",
              "gap": 8,
              "children": [
                {
                  "type": "frame",
                  "id": "NK7",
                  "name": "key7",
                  "width": 64,
                  "height": 64,
                  "fill": "$bg-interactive",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "NK7T",
                      "fill": "$text-primary",
                      "content": "7",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "NK8",
                  "name": "key8",
                  "width": 64,
                  "height": 64,
                  "fill": "$bg-interactive",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "NK8T",
                      "fill": "$text-primary",
                      "content": "8",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "NK9",
                  "name": "key9",
                  "width": 64,
                  "height": 64,
                  "fill": "$bg-interactive",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "NK9T",
                      "fill": "$text-primary",
                      "content": "9",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "NKC",
                  "name": "keyClear",
                  "width": 64,
                  "height": 64,
                  "fill": "#EF444418",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "NKCT",
                      "fill": "#EF4444",
                      "content": "C",
                      "fontFamily": "Roboto",
                      "fontSize": 20,
                      "fontWeight": "700"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "NumpadRow2",
              "name": "row2",
              "gap": 8,
              "children": [
                {
                  "type": "frame",
                  "id": "NK4",
                  "name": "key4",
                  "width": 64,
                  "height": 64,
                  "fill": "$bg-interactive",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "NK4T",
                      "fill": "$text-primary",
                      "content": "4",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "NK5",
                  "name": "key5",
                  "width": 64,
                  "height": 64,
                  "fill": "$bg-interactive",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "NK5T",
                      "fill": "$text-primary",
                      "content": "5",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "NK6",
                  "name": "key6",
                  "width": 64,
                  "height": 64,
                  "fill": "$bg-interactive",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "NK6T",
                      "fill": "$text-primary",
                      "content": "6",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "NKBack",
                  "name": "keyBackspace",
                  "width": 64,
                  "height": 64,
                  "fill": "$bg-interactive",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "NKBackI",
                      "width": 24,
                      "height": 24,
                      "iconFontName": "delete",
                      "iconFontFamily": "lucide",
                      "fill": "$text-secondary"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "NumpadRow3",
              "name": "row3",
              "gap": 8,
              "children": [
                {
                  "type": "frame",
                  "id": "NK1",
                  "name": "key1",
                  "width": 64,
                  "height": 64,
                  "fill": "$bg-interactive",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "NK1T",
                      "fill": "$text-primary",
                      "content": "1",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "NK2",
                  "name": "key2",
                  "width": 64,
                  "height": 64,
                  "fill": "$bg-interactive",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "NK2T",
                      "fill": "$text-primary",
                      "content": "2",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "NK3",
                  "name": "key3",
                  "width": 64,
                  "height": 64,
                  "fill": "$bg-interactive",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "NK3T",
                      "fill": "$text-primary",
                      "content": "3",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "NKEnter",
                  "name": "keyEnter",
                  "width": 64,
                  "height": 136,
                  "fill": {
                    "type": "gradient",
                    "gradientType": "linear",
                    "enabled": true,
                    "rotation": 135,
                    "size": {
                      "height": 1
                    },
                    "colors": [
                      {
                        "color": "#FF5C00",
                        "position": 0
                      },
                      {
                        "color": "#FF8A4C",
                        "position": 1
                      }
                    ]
                  },
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "NKEnterI",
                      "width": 28,
                      "height": 28,
                      "iconFontName": "corner-down-left",
                      "iconFontFamily": "lucide",
                      "fill": "$text-primary"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "NumpadRow4",
              "name": "row4",
              "gap": 8,
              "children": [
                {
                  "type": "frame",
                  "id": "NK0",
                  "name": "key0",
                  "width": 136,
                  "height": 64,
                  "fill": "$bg-interactive",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "NK0T",
                      "fill": "$text-primary",
                      "content": "0",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "NKDot",
                  "name": "keyDot",
                  "width": 64,
                  "height": 64,
                  "fill": "$bg-interactive",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "NKDotT",
                      "fill": "$text-primary",
                      "content": ".",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "PaymentMethodsBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "PaymentMethodsBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "PAYMENT METHODS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "PaymentGrid",
          "name": "Organism/PaymentMethods",
          "reusable": true,
          "gap": 16,
          "children": [
            {
              "type": "frame",
              "id": "PayCash",
              "name": "cashMethod",
              "width": 120,
              "height": 100,
              "fill": "$bg-elevated",
              "cornerRadius": 16,
              "stroke": {
                "thickness": 2,
                "fill": "$orange-primary"
              },
              "layout": "vertical",
              "gap": 8,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "PayCashIcon",
                  "width": 32,
                  "height": 32,
                  "iconFontName": "banknote",
                  "iconFontFamily": "lucide",
                  "fill": "$orange-primary"
                },
                {
                  "type": "text",
                  "id": "PayCashText",
                  "fill": "$text-primary",
                  "content": "Ti\u1ec1n m\u1eb7t",
                  "fontFamily": "Roboto",
                  "fontSize": 13,
                  "fontWeight": "500"
                }
              ]
            },
            {
              "type": "frame",
              "id": "PayCard",
              "name": "cardMethod",
              "width": 120,
              "height": 100,
              "fill": "$bg-elevated",
              "cornerRadius": 16,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "layout": "vertical",
              "gap": 8,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "PayCardIcon",
                  "width": 32,
                  "height": 32,
                  "iconFontName": "credit-card",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                },
                {
                  "type": "text",
                  "id": "PayCardText",
                  "fill": "$text-primary",
                  "content": "Th\u1ebb",
                  "fontFamily": "Roboto",
                  "fontSize": 13,
                  "fontWeight": "500"
                }
              ]
            },
            {
              "type": "frame",
              "id": "PayQR",
              "name": "qrMethod",
              "width": 120,
              "height": 100,
              "fill": "$bg-elevated",
              "cornerRadius": 16,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "layout": "vertical",
              "gap": 8,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "PayQRIcon",
                  "width": 32,
                  "height": 32,
                  "iconFontName": "qr-code",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                },
                {
                  "type": "text",
                  "id": "PayQRText",
                  "fill": "$text-primary",
                  "content": "QR Code",
                  "fontFamily": "Roboto",
                  "fontSize": 13,
                  "fontWeight": "500"
                }
              ]
            },
            {
              "type": "frame",
              "id": "PayWallet",
              "name": "walletMethod",
              "width": 120,
              "height": 100,
              "fill": "$bg-elevated",
              "cornerRadius": 16,
              "stroke": {
                "thickness": 1,
                "fill": "$border-default"
              },
              "layout": "vertical",
              "gap": 8,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "PayWalletIcon",
                  "width": 32,
                  "height": 32,
                  "iconFontName": "wallet",
                  "iconFontFamily": "lucide",
                  "fill": "$text-secondary"
                },
                {
                  "type": "text",
                  "id": "PayWalletText",
                  "fill": "$text-primary",
                  "content": "V\u00ed \u0111i\u1ec7n t\u1eed",
                  "fontFamily": "Roboto",
                  "fontSize": 13,
                  "fontWeight": "500"
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "DialogBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "DialogBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "DIALOGS & TOASTS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "ConfirmDialog",
          "name": "Organism/Dialog/Confirm",
          "reusable": true,
          "width": 400,
          "fill": "$bg-elevated",
          "cornerRadius": 20,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "layout": "vertical",
          "gap": 24,
          "padding": 28,
          "children": [
            {
              "type": "frame",
              "id": "ConfirmDialogHeader",
              "name": "header",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 8,
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "ConfirmDialogIcon",
                  "width": 48,
                  "height": 48,
                  "iconFontName": "circle-alert",
                  "iconFontFamily": "lucide",
                  "fill": "$orange-primary"
                },
                {
                  "type": "text",
                  "id": "ConfirmDialogTitle",
                  "name": "title",
                  "fill": "$text-primary",
                  "content": "X\u00e1c nh\u1eadn thanh to\u00e1n",
                  "fontFamily": "Roboto",
                  "fontSize": 20,
                  "fontWeight": "600",
                  "textAlign": "center"
                },
                {
                  "type": "text",
                  "id": "ConfirmDialogMessage",
                  "name": "message",
                  "fill": "$text-secondary",
                  "content": "Thanh to\u00e1n \u0111\u01a1n h\u00e0ng 100,116\u20ab b\u1eb1ng Ti\u1ec1n m\u1eb7t?",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "normal",
                  "textAlign": "center",
                  "lineHeight": 1.5
                }
              ]
            },
            {
              "type": "frame",
              "id": "ConfirmDialogActions",
              "name": "actions",
              "width": "fill_container",
              "gap": 12,
              "children": [
                {
                  "type": "frame",
                  "id": "ConfirmDialogCancel",
                  "name": "cancelBtn",
                  "width": "fill_container",
                  "height": 48,
                  "cornerRadius": 10,
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border-default"
                  },
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "ConfirmDialogCancelText",
                      "fill": "$text-secondary",
                      "content": "H\u1ee7y",
                      "fontFamily": "Roboto",
                      "fontSize": 15,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "ConfirmDialogConfirm",
                  "name": "confirmBtn",
                  "width": "fill_container",
                  "height": 48,
                  "fill": {
                    "type": "gradient",
                    "gradientType": "linear",
                    "enabled": true,
                    "rotation": 135,
                    "size": {
                      "height": 1
                    },
                    "colors": [
                      {
                        "color": "#FF5C00",
                        "position": 0
                      },
                      {
                        "color": "#FF8A4C",
                        "position": 1
                      }
                    ]
                  },
                  "cornerRadius": 10,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "ConfirmDialogConfirmText",
                      "fill": "$text-primary",
                      "content": "X\u00e1c nh\u1eadn",
                      "fontFamily": "Roboto",
                      "fontSize": 15,
                      "fontWeight": "600"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "ToastSuccess",
          "name": "Organism/Toast/Success",
          "reusable": true,
          "width": 400,
          "fill": "#22C55E18",
          "cornerRadius": 12,
          "stroke": {
            "thickness": 1,
            "fill": "$green-success"
          },
          "gap": 12,
          "padding": [
            16,
            20
          ],
          "alignItems": "center",
          "children": [
            {
              "type": "icon_font",
              "id": "ToastSuccessIcon",
              "width": 24,
              "height": 24,
              "iconFontName": "check-circle",
              "iconFontFamily": "lucide",
              "fill": "$green-success"
            },
            {
              "type": "text",
              "id": "ToastSuccessText",
              "name": "message",
              "fill": "$green-success",
              "content": "Thanh to\u00e1n th\u00e0nh c\u00f4ng!",
              "fontFamily": "Roboto",
              "fontSize": 15,
              "fontWeight": "500"
            }
          ]
        },
        {
          "type": "frame",
          "id": "ToastError",
          "name": "Organism/Toast/Error",
          "reusable": true,
          "width": 400,
          "fill": "#EF444418",
          "cornerRadius": 12,
          "stroke": {
            "thickness": 1,
            "fill": "#EF4444"
          },
          "gap": 12,
          "padding": [
            16,
            20
          ],
          "alignItems": "center",
          "children": [
            {
              "type": "icon_font",
              "id": "ToastErrorIcon",
              "width": 24,
              "height": 24,
              "iconFontName": "x-circle",
              "iconFontFamily": "lucide",
              "fill": "#EF4444"
            },
            {
              "type": "text",
              "id": "ToastErrorText",
              "name": "message",
              "fill": "#EF4444",
              "content": "Giao d\u1ecbch th\u1ea5t b\u1ea1i. Vui l\u00f2ng th\u1eed l\u1ea1i.",
              "fontFamily": "Roboto",
              "fontSize": 15,
              "fontWeight": "500"
            }
          ]
        },
        {
          "type": "frame",
          "id": "ApptBadge",
          "name": "shBadge",
          "fill": "#14B8A618",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "ApptBadgeText",
              "name": "badgeText",
              "fill": "$spa-primary",
              "content": "\ud83d\udc86 APPOINTMENT",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "SlotAvailable",
          "name": "Organism/Appointment/Available",
          "reusable": true,
          "width": 140,
          "height": 80,
          "fill": "$bg-elevated",
          "cornerRadius": 12,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default",
            "dashPattern": [
              4,
              4
            ]
          },
          "layout": "vertical",
          "gap": 4,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "SlotAvailTime",
              "name": "slotTime",
              "fill": "$text-primary",
              "content": "09:00",
              "fontFamily": "Roboto",
              "fontSize": 16,
              "fontWeight": "500"
            },
            {
              "type": "text",
              "id": "SlotAvailLabel",
              "fill": "$green-success",
              "content": "C\u00f3 slot",
              "fontFamily": "Roboto",
              "fontSize": 12,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "SlotBooked",
          "name": "Organism/Appointment/Booked",
          "reusable": true,
          "width": 140,
          "height": 80,
          "fill": "$spa-primary",
          "cornerRadius": 12,
          "layout": "vertical",
          "padding": 12,
          "gap": 4,
          "alignItems": "flex_start",
          "children": [
            {
              "type": "text",
              "id": "SlotBookTime",
              "name": "timeRange",
              "fill": "$text-muted",
              "content": "10:00 - 11:30",
              "fontFamily": "Roboto",
              "fontSize": 12,
              "fontWeight": "normal"
            },
            {
              "type": "text",
              "id": "SlotBookCust",
              "name": "customerName",
              "fill": "$text-primary",
              "content": "Ch\u1ecb Lan",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "600"
            },
            {
              "type": "text",
              "id": "SlotBookSvc",
              "name": "serviceName",
              "fill": "$text-muted",
              "content": "Facial 90 ph\u00fat",
              "fontFamily": "Roboto",
              "fontSize": 12,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "SlotInProgress",
          "name": "Organism/Appointment/InProgress",
          "reusable": true,
          "width": 140,
          "height": 80,
          "fill": "$spa-dark",
          "cornerRadius": 12,
          "stroke": {
            "thickness": 2,
            "fill": "$green-success"
          },
          "layout": "vertical",
          "padding": 12,
          "gap": 4,
          "alignItems": "flex_start",
          "children": [
            {
              "type": "frame",
              "id": "SlotProgTop",
              "width": "fill_container",
              "justifyContent": "space_between",
              "children": [
                {
                  "type": "text",
                  "id": "SlotProgStatus",
                  "fill": "$green-success",
                  "content": "\u0110ANG L\u00c0M",
                  "fontFamily": "Roboto",
                  "fontSize": 10,
                  "fontWeight": "700"
                },
                {
                  "type": "text",
                  "id": "SlotProgRemain",
                  "fill": "$text-muted",
                  "content": "45p c\u00f2n",
                  "fontFamily": "Roboto",
                  "fontSize": 10,
                  "fontWeight": "normal"
                }
              ]
            },
            {
              "type": "text",
              "id": "SlotProgCust",
              "name": "customerName",
              "fill": "$text-primary",
              "content": "Ch\u1ecb H\u01b0\u01a1ng",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "600"
            },
            {
              "type": "text",
              "id": "SlotProgStaff",
              "name": "therapist",
              "fill": "$text-muted",
              "content": "NV: Ng\u1ecdc",
              "fontFamily": "Roboto",
              "fontSize": 12,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "RmGridBadge",
          "name": "shBadge",
          "fill": "#EC489918",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "icon_font",
              "id": "RmGridBadgeIcon",
              "iconFontName": "mic",
              "iconFontFamily": "lucide",
              "width": 12,
              "height": 12,
              "fill": "$karaoke-primary"
            },
            {
              "type": "text",
              "id": "RmGridBadgeText",
              "name": "badgeText",
              "fill": "$karaoke-primary",
              "content": "ROOM GRID",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "RoomAvailable",
          "name": "Organism/Room/Available",
          "reusable": true,
          "width": 160,
          "height": 120,
          "fill": "$bg-elevated",
          "cornerRadius": 16,
          "stroke": {
            "thickness": 2,
            "fill": "$border-default"
          },
          "layout": "vertical",
          "gap": 8,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "icon_font",
              "id": "RmAvailIcon",
              "iconFontName": "mic",
              "iconFontFamily": "lucide",
              "width": 24,
              "height": 24,
              "fill": "$text-secondary"
            },
            {
              "type": "text",
              "id": "RmAvailName",
              "name": "roomName",
              "fill": "$text-primary",
              "content": "Ph\u00f2ng VIP 01",
              "fontFamily": "Roboto",
              "fontSize": 16,
              "fontWeight": "600"
            },
            {
              "type": "text",
              "id": "RmAvailCap",
              "name": "capacity",
              "fill": "$text-secondary",
              "content": "8-12 ng\u01b0\u1eddi",
              "fontFamily": "Roboto",
              "fontSize": 12,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "RoomOccupied",
          "name": "Organism/Room/Occupied",
          "reusable": true,
          "width": 160,
          "height": 120,
          "fill": "$karaoke-primary",
          "cornerRadius": 16,
          "layout": "vertical",
          "justifyContent": "space_between",
          "padding": 12,
          "children": [
            {
              "type": "frame",
              "id": "RmOccTop",
              "width": "fill_container",
              "justifyContent": "space_between",
              "children": [
                {
                  "type": "text",
                  "id": "RmOccName",
                  "name": "roomName",
                  "fill": "$text-primary",
                  "content": "VIP 02",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "600"
                },
                {
                  "type": "text",
                  "id": "RmOccTimer",
                  "name": "sessionTimer",
                  "fill": "$text-primary",
                  "content": "01:45:22",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "700"
                }
              ]
            },
            {
              "type": "frame",
              "id": "RmOccMid",
              "layout": "vertical",
              "gap": 4,
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "RmOccAmount",
                  "name": "totalAmount",
                  "fill": "$text-primary",
                  "content": "1,250,000\u0111",
                  "fontFamily": "Roboto",
                  "fontSize": 18,
                  "fontWeight": "700"
                },
                {
                  "type": "text",
                  "id": "RmOccRate",
                  "name": "hourlyRate",
                  "fill": "$text-muted",
                  "content": "Gi\u1edd: 150K/h",
                  "fontFamily": "Roboto",
                  "fontSize": 12,
                  "fontWeight": "normal"
                }
              ]
            },
            {
              "type": "frame",
              "id": "RmOccActions",
              "gap": 8,
              "justifyContent": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "RmOccAddBtn",
                  "width": 60,
                  "height": 28,
                  "fill": "#FFFFFF33",
                  "cornerRadius": 6,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "RmOccAddTxt",
                      "fill": "$text-primary",
                      "content": "+ Th\u00eam",
                      "fontFamily": "Roboto",
                      "fontSize": 12,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "RmOccEndBtn",
                  "width": 60,
                  "height": 28,
                  "fill": "#FFFFFF33",
                  "cornerRadius": 6,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "RmOccEndTxt",
                      "fill": "$text-primary",
                      "content": "K\u1ebft th\u00fac",
                      "fontFamily": "Roboto",
                      "fontSize": 12,
                      "fontWeight": "500"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "SvcDispBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "text",
              "id": "SvcDispBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "SERVICE DISPLAYS",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "KitchenTicket",
          "name": "Organism/Display/KitchenTicket",
          "reusable": true,
          "width": 280,
          "fill": "$bg-elevated",
          "cornerRadius": 16,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "layout": "vertical",
          "children": [
            {
              "type": "frame",
              "id": "KTHeader",
              "name": "ticketHeader",
              "width": "fill_container",
              "fill": "$orange-primary",
              "cornerRadius": [
                16,
                16,
                0,
                0
              ],
              "padding": [
                12,
                16
              ],
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "KTOrderNum",
                  "name": "orderNumber",
                  "fill": "#FFFFFF",
                  "content": "#0042",
                  "fontFamily": "Roboto",
                  "fontSize": 18,
                  "fontWeight": "700"
                },
                {
                  "type": "text",
                  "id": "KTTableInfo",
                  "name": "tableInfo",
                  "fill": "#FFFFFFCC",
                  "content": "B\u00e0n 07",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "500"
                },
                {
                  "type": "text",
                  "id": "KTElapsed",
                  "name": "elapsedTime",
                  "fill": "#FFFFFF",
                  "content": "5:32",
                  "fontFamily": "Roboto",
                  "fontSize": 16,
                  "fontWeight": "700"
                }
              ]
            },
            {
              "type": "frame",
              "id": "KTItems",
              "name": "ticketItems",
              "width": "fill_container",
              "layout": "vertical",
              "padding": 12,
              "gap": 8,
              "children": [
                {
                  "type": "frame",
                  "id": "KTItem1",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "KTItem1Name",
                      "fill": "$text-primary",
                      "content": "2x Ph\u1edf b\u00f2 t\u00e1i",
                      "fontFamily": "Roboto",
                      "fontSize": 16,
                      "fontWeight": "500"
                    },
                    {
                      "type": "text",
                      "id": "KTItem1Note",
                      "fill": "$status-warning",
                      "content": "\u00cdt h\u00e0nh",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "KTItem2",
                  "width": "fill_container",
                  "children": [
                    {
                      "type": "text",
                      "id": "KTItem2Name",
                      "fill": "$text-primary",
                      "content": "1x B\u00fan ch\u1ea3",
                      "fontFamily": "Roboto",
                      "fontSize": 16,
                      "fontWeight": "500"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "KTItem3",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {
                      "type": "text",
                      "id": "KTItem3Name",
                      "fill": "$text-secondary",
                      "content": "1x N\u01b0\u1edbc cam",
                      "fontFamily": "Roboto",
                      "fontSize": 16,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "text",
                      "id": "KTItem3Station",
                      "fill": "$text-tertiary",
                      "content": "Bar",
                      "fontFamily": "Roboto",
                      "fontSize": 12,
                      "fontWeight": "normal"
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "KTActions",
              "name": "ticketActions",
              "padding": 12,
              "justifyContent": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "KTDoneBtn",
                  "width": 100,
                  "height": 36,
                  "fill": "$green-success",
                  "cornerRadius": 8,
                  "gap": 6,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "icon_font",
                      "id": "KTDoneIcon",
                      "iconFontName": "check",
                      "iconFontFamily": "lucide",
                      "width": 16,
                      "height": 16,
                      "fill": "#FFFFFF"
                    },
                    {
                      "type": "text",
                      "id": "KTDoneTxt",
                      "fill": "#FFFFFF",
                      "content": "Xong",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "600"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "QueueNumber",
          "name": "Organism/Display/QueueNumber",
          "reusable": true,
          "width": 200,
          "height": 160,
          "fill": "$bg-elevated",
          "cornerRadius": 20,
          "stroke": {
            "thickness": 1,
            "fill": "$border-default"
          },
          "layout": "vertical",
          "gap": 8,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "QNLabel",
              "fill": "$text-secondary",
              "content": "S\u1ed1 th\u1ee9 t\u1ef1",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "normal"
            },
            {
              "type": "text",
              "id": "QNNumber",
              "name": "queueNumber",
              "fill": "$spa-primary",
              "content": "A-042",
              "fontFamily": "Roboto",
              "fontSize": 48,
              "fontWeight": "700"
            },
            {
              "type": "text",
              "id": "QNService",
              "name": "serviceType",
              "fill": "$text-primary",
              "content": "Facial",
              "fontFamily": "Roboto",
              "fontSize": 16,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "QueueCalling",
          "name": "Organism/Display/QueueCalling",
          "reusable": true,
          "width": 300,
          "height": 120,
          "fill": "$green-success",
          "cornerRadius": 20,
          "layout": "vertical",
          "gap": 8,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "frame",
              "id": "QCLabelRow",
              "gap": 8,
              "alignItems": "center",
              "children": [
                {
                  "type": "icon_font",
                  "id": "QCBellIcon",
                  "iconFontName": "bell-ring",
                  "iconFontFamily": "lucide",
                  "width": 20,
                  "height": 20,
                  "fill": "#FFFFFF"
                },
                {
                  "type": "text",
                  "id": "QCLabel",
                  "fill": "#FFFFFF",
                  "content": "M\u1edcI KH\u00c1CH",
                  "fontFamily": "Roboto",
                  "fontSize": 16,
                  "fontWeight": "700"
                }
              ]
            },
            {
              "type": "text",
              "id": "QCNumber",
              "name": "callingNumber",
              "fill": "#FFFFFF",
              "content": "A-038",
              "fontFamily": "Roboto",
              "fontSize": 48,
              "fontWeight": "700"
            },
            {
              "type": "text",
              "id": "QCStation",
              "name": "station",
              "fill": "#FFFFFFCC",
              "content": "Ph\u00f2ng 3 - Ng\u1ecdc",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "RoomDisplay",
          "name": "Organism/Display/RoomStatus",
          "reusable": true,
          "width": 400,
          "height": 300,
          "fill": "$bg-surface",
          "cornerRadius": 20,
          "stroke": {
            "thickness": 1,
            "fill": "$border-subtle"
          },
          "layout": "vertical",
          "justifyContent": "space_between",
          "padding": 24,
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "RDName",
              "name": "roomName",
              "fill": "$text-primary",
              "content": "PH\u00d2NG VIP 01",
              "fontFamily": "Roboto",
              "fontSize": 24,
              "fontWeight": "700"
            },
            {
              "type": "frame",
              "id": "RDTimerBox",
              "layout": "vertical",
              "gap": 8,
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "RDTimerLabel",
                  "fill": "$text-secondary",
                  "content": "TH\u1edcI GIAN",
                  "fontFamily": "Roboto",
                  "fontSize": 14,
                  "fontWeight": "normal"
                },
                {
                  "type": "text",
                  "id": "RDTimer",
                  "name": "sessionTimer",
                  "fill": "$karaoke-primary",
                  "content": "02:15:42",
                  "fontFamily": "Roboto",
                  "fontSize": 64,
                  "fontWeight": "700"
                }
              ]
            },
            {
              "type": "frame",
              "id": "RDStats",
              "gap": 24,
              "children": [
                {
                  "type": "frame",
                  "id": "RDTotalBox",
                  "layout": "vertical",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "RDTotalLabel",
                      "fill": "$text-secondary",
                      "content": "T\u1ed5ng ti\u1ec1n",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "text",
                      "id": "RDTotalVal",
                      "name": "totalAmount",
                      "fill": "$text-primary",
                      "content": "1,850,000\u0111",
                      "fontFamily": "Roboto",
                      "fontSize": 24,
                      "fontWeight": "600"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "RDPendingBox",
                  "layout": "vertical",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "text",
                      "id": "RDPendingLabel",
                      "fill": "$text-secondary",
                      "content": "Order m\u1edbi",
                      "fontFamily": "Roboto",
                      "fontSize": 14,
                      "fontWeight": "normal"
                    },
                    {
                      "type": "text",
                      "id": "RDPendingVal",
                      "name": "pendingItems",
                      "fill": "$status-warning",
                      "content": "3 m\u00f3n",
                      "fontFamily": "Roboto",
                      "fontSize": 20,
                      "fontWeight": "500"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "TblMapBadge",
          "name": "shBadge",
          "fill": "#FF5C0018",
          "cornerRadius": 100,
          "padding": [
            6,
            14
          ],
          "children": [
            {
              "type": "icon_font",
              "id": "TblMapBadgeIcon",
              "iconFontName": "utensils",
              "iconFontFamily": "lucide",
              "width": 12,
              "height": 12,
              "fill": "$orange-primary"
            },
            {
              "type": "text",
              "id": "TblMapBadgeText",
              "name": "badgeText",
              "fill": "$orange-primary",
              "content": "TABLE MAP",
              "fontFamily": "Roboto",
              "fontSize": 11,
              "fontWeight": "500",
              "letterSpacing": 2
            }
          ]
        },
        {
          "type": "frame",
          "id": "TableAvailable",
          "name": "Organism/Table/Available",
          "reusable": true,
          "width": 100,
          "height": 100,
          "fill": "#22C55E18",
          "cornerRadius": 12,
          "stroke": {
            "thickness": 2,
            "fill": "$green-success"
          },
          "layout": "vertical",
          "gap": 4,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "TblAvailNum",
              "name": "tableNumber",
              "fill": "$green-success",
              "content": "T01",
              "fontFamily": "Roboto",
              "fontSize": 18,
              "fontWeight": "600"
            },
            {
              "type": "text",
              "id": "TblAvailSeats",
              "name": "seatCount",
              "fill": "$text-secondary",
              "content": "4 gh\u1ebf",
              "fontFamily": "Roboto",
              "fontSize": 12,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "TableOccupied",
          "name": "Organism/Table/Occupied",
          "reusable": true,
          "width": 100,
          "height": 100,
          "fill": "$orange-primary",
          "cornerRadius": 12,
          "layout": "vertical",
          "gap": 4,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "TblOccNum",
              "name": "tableNumber",
              "fill": "$text-primary",
              "content": "T02",
              "fontFamily": "Roboto",
              "fontSize": 18,
              "fontWeight": "600"
            },
            {
              "type": "text",
              "id": "TblOccAmount",
              "name": "orderAmount",
              "fill": "$text-muted",
              "content": "450K",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "500"
            },
            {
              "type": "text",
              "id": "TblOccTime",
              "name": "elapsedTime",
              "fill": "#FFFFFF99",
              "content": "45 ph\u00fat",
              "fontFamily": "Roboto",
              "fontSize": 12,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "TableReserved",
          "name": "Organism/Table/Reserved",
          "reusable": true,
          "width": 100,
          "height": 100,
          "fill": "#F59E0B18",
          "cornerRadius": 12,
          "stroke": {
            "thickness": 2,
            "fill": "$status-warning"
          },
          "layout": "vertical",
          "gap": 4,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {
              "type": "text",
              "id": "TblResNum",
              "name": "tableNumber",
              "fill": "$status-warning",
              "content": "T03",
              "fontFamily": "Roboto",
              "fontSize": 18,
              "fontWeight": "600"
            },
            {
              "type": "text",
              "id": "TblResTime",
              "name": "reserveTime",
              "fill": "$text-secondary",
              "content": "19:00",
              "fontFamily": "Roboto",
              "fontSize": 14,
              "fontWeight": "500"
            },
            {
              "type": "text",
              "id": "TblResName",
              "name": "guestName",
              "fill": "$text-tertiary",
              "content": "Anh Minh",
              "fontFamily": "Roboto",
              "fontSize": 12,
              "fontWeight": "normal"
            }
          ]
        },
        {
          "type": "frame",
          "id": "TableMapContainer",
          "name": "Organism/TableMap/Container",
          "reusable": true,
          "width": 600,
          "height": 400,
          "fill": "$bg-surface",
          "cornerRadius": 16,
          "stroke": {
            "thickness": 1,
            "fill": "$border-subtle"
          },
          "layout": "vertical",
          "padding": 20,
          "gap": 16,
          "children": [
            {
              "type": "frame",
              "id": "TblMapContHeader",
              "name": "header",
              "width": "fill_container",
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {
                  "type": "text",
                  "id": "TblMapContTitle",
                  "fill": "$text-primary",
                  "content": "S\u01a1 \u0111\u1ed3 b\u00e0n",
                  "fontFamily": "Roboto",
                  "fontSize": 20,
                  "fontWeight": "600"
                },
                {
                  "type": "frame",
                  "id": "TblMapLegend",
                  "name": "legend",
                  "gap": 16,
                  "children": [
                    {
                      "type": "frame",
                      "id": "LegAvail",
                      "gap": 6,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "rectangle",
                          "id": "LegAvailDot",
                          "width": 12,
                          "height": 12,
                          "fill": "$green-success",
                          "cornerRadius": 2
                        },
                        {
                          "type": "text",
                          "id": "LegAvailTxt",
                          "fill": "$text-secondary",
                          "content": "Tr\u1ed1ng",
                          "fontFamily": "Roboto",
                          "fontSize": 12,
                          "fontWeight": "normal"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "LegOcc",
                      "gap": 6,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "rectangle",
                          "id": "LegOccDot",
                          "width": 12,
                          "height": 12,
                          "fill": "$orange-primary",
                          "cornerRadius": 2
                        },
                        {
                          "type": "text",
                          "id": "LegOccTxt",
                          "fill": "$text-secondary",
                          "content": "\u0110ang ph\u1ee5c v\u1ee5",
                          "fontFamily": "Roboto",
                          "fontSize": 12,
                          "fontWeight": "normal"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "LegRes",
                      "gap": 6,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "rectangle",
                          "id": "LegResDot",
                          "width": 12,
                          "height": 12,
                          "fill": "$status-warning",
                          "cornerRadius": 2
                        },
                        {
                          "type": "text",
                          "id": "LegResTxt",
                          "fill": "$text-secondary",
                          "content": "\u0110\u00e3 \u0111\u1eb7t",
                          "fontFamily": "Roboto",
                          "fontSize": 12,
                          "fontWeight": "normal"
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "variables": {
    "bg-page": {
      "type": "color",
      "value": "#0A0A0B"
    },
    "bg-surface": {
      "type": "color",
      "value": "#111113"
    },
    "bg-elevated": {
      "type": "color",
      "value": "#1A1A1D"
    },
    "bg-interactive": {
      "type": "color",
      "value": "#2A2A2E"
    },
    "bg-hover": {
      "type": "color",
      "value": "#3A3A3E"
    },
    "bg-active": {
      "type": "color",
      "value": "#4A4A4E"
    },
    "text-primary": {
      "type": "color",
      "value": "#FFFFFF"
    },
    "text-secondary": {
      "type": "color",
      "value": "#ADADB0"
    },
    "text-tertiary": {
      "type": "color",
      "value": "#8B8B90"
    },
    "text-muted": {
      "type": "color",
      "value": "#6B6B70"
    },
    "text-disabled": {
      "type": "color",
      "value": "#4B4B50"
    },
    "text-inverse": {
      "type": "color",
      "value": "#0A0A0B"
    },
    "border-default": {
      "type": "color",
      "value": "#2A2A2E"
    },
    "border-subtle": {
      "type": "color",
      "value": "#1F1F23"
    },
    "border-strong": {
      "type": "color",
      "value": "#4A4A4E"
    },
    "border-focus": {
      "type": "color",
      "value": "#FF5C00"
    },
    "accent-primary": {
      "type": "color",
      "value": "#FF5C00"
    },
    "accent-primary-hover": {
      "type": "color",
      "value": "#FF7A33"
    },
    "accent-primary-active": {
      "type": "color",
      "value": "#E55200"
    },
    "orange-primary": {
      "type": "color",
      "value": "#FF5C00"
    },
    "orange-light": {
      "type": "color",
      "value": "#FF8A4C"
    },
    "status-success": {
      "type": "color",
      "value": "#22C55E"
    },
    "status-success-bg": {
      "type": "color",
      "value": "#22C55E1A"
    },
    "status-warning": {
      "type": "color",
      "value": "#F59E0B"
    },
    "status-warning-bg": {
      "type": "color",
      "value": "#F59E0B1A"
    },
    "status-error": {
      "type": "color",
      "value": "#EF4444"
    },
    "status-error-bg": {
      "type": "color",
      "value": "#EF44441A"
    },
    "status-info": {
      "type": "color",
      "value": "#3B82F6"
    },
    "status-info-bg": {
      "type": "color",
      "value": "#3B82F61A"
    },
    "green-success": {
      "type": "color",
      "value": "#22C55E"
    },
    "vertical-restaurant": {
      "type": "color",
      "value": "#FF5C00"
    },
    "vertical-bar": {
      "type": "color",
      "value": "#8B5CF6"
    },
    "vertical-karaoke": {
      "type": "color",
      "value": "#EC4899"
    },
    "vertical-spa": {
      "type": "color",
      "value": "#14B8A6"
    },
    "vertical-retail": {
      "type": "color",
      "value": "#3B82F6"
    },
    "space-1": {
      "type": "number",
      "value": 4
    },
    "space-2": {
      "type": "number",
      "value": 8
    },
    "space-3": {
      "type": "number",
      "value": 12
    },
    "space-4": {
      "type": "number",
      "value": 16
    },
    "space-5": {
      "type": "number",
      "value": 20
    },
    "space-6": {
      "type": "number",
      "value": 24
    },
    "space-8": {
      "type": "number",
      "value": 32
    },
    "space-10": {
      "type": "number",
      "value": 40
    },
    "space-12": {
      "type": "number",
      "value": 48
    },
    "radius-sm": {
      "type": "number",
      "value": 4
    },
    "radius-md": {
      "type": "number",
      "value": 8
    },
    "radius-lg": {
      "type": "number",
      "value": 12
    },
    "radius-xl": {
      "type": "number",
      "value": 16
    },
    "radius-full": {
      "type": "number",
      "value": 9999
    },
    "text-xs": {
      "type": "number",
      "value": 12
    },
    "text-sm": {
      "type": "number",
      "value": 14
    },
    "text-base": {
      "type": "number",
      "value": 16
    },
    "text-lg": {
      "type": "number",
      "value": 18
    },
    "text-xl": {
      "type": "number",
      "value": 20
    },
    "text-2xl": {
      "type": "number",
      "value": 24
    },
    "text-3xl": {
      "type": "number",
      "value": 30
    },
    "text-4xl": {
      "type": "number",
      "value": 36
    },
    "font-normal": {
      "type": "string",
      "value": "400"
    },
    "font-medium": {
      "type": "string",
      "value": "500"
    },
    "font-semibold": {
      "type": "string",
      "value": "600"
    },
    "font-bold": {
      "type": "string",
      "value": "700"
    },
    "shadow-sm": {
      "type": "string",
      "value": "0 1px 2px rgba(0,0,0,0.3)"
    },
    "shadow-md": {
      "type": "string",
      "value": "0 4px 6px rgba(0,0,0,0.4)"
    },
    "shadow-lg": {
      "type": "string",
      "value": "0 10px 15px rgba(0,0,0,0.5)"
    },
    "shadow-xl": {
      "type": "string",
      "value": "0 20px 25px rgba(0,0,0,0.6)"
    },
    "bar-primary": {
      "type": "color",
      "value": "#8B5CF6"
    },
    "karaoke-primary": {
      "type": "color",
      "value": "#EC4899"
    },
    "spa-primary": {
      "type": "color",
      "value": "#14B8A6"
    },
    "spa-dark": {
      "type": "color",
      "value": "#0D9488"
    }
  }
}