{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "id": "POSMainScreen",
      "name": "POS Main Screen",
      "reusable": true,
      "width": 1920,
      "height": 1080,
      "fill": "$bg-page",
      "layout": "horizontal",
      "clip": true,
      "children": [
        {
          "type": "frame",
          "id": "POSLeftPanel",
          "name": "leftPanel",
          "width": "fill_container",
          "height": "fill_container",
          "layout": "vertical",
          "children": [
            {
              "type": "frame",
              "id": "POSHeader",
              "name": "header",
              "width": "fill_container",
              "height": 64,
              "fill": "$bg-elevated",
              "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
              "padding": [0, 24],
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "POSHeaderLeft",
                  "name": "headerLeft",
                  "gap": 16,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "frame",
                      "id": "POSLogo",
                      "name": "logo",
                      "width": 40,
                      "height": 40,
                      "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": "POSLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "POSStoreInfo",
                      "name": "storeInfo",
                      "layout": "vertical",
                      "gap": 2,
                      "children": [
                        {"type": "text", "id": "POSStoreName", "fill": "$text-primary", "content": "GoodGo Café", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
                        {"type": "text", "id": "POSStoreLocation", "fill": "$text-secondary", "content": "Chi nhánh Nguyễn Huệ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSHeaderCenter",
                  "name": "headerCenter",
                  "width": 400,
                  "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": "POSSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
                    {"type": "text", "id": "POSSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm sản phẩm, mã vạch...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
                    {"type": "frame", "id": "POSSearchSpacer", "width": "fill_container", "height": 1},
                    {
                      "type": "frame",
                      "id": "POSScanBtn",
                      "name": "scanBtn",
                      "fill": "$bg-interactive",
                      "cornerRadius": 8,
                      "padding": [6, 10],
                      "gap": 6,
                      "alignItems": "center",
                      "children": [
                        {"type": "icon_font", "id": "POSScanIcon", "width": 16, "height": 16, "iconFontName": "scan-barcode", "iconFontFamily": "lucide", "fill": "$text-secondary"},
                        {"type": "text", "id": "POSScanText", "fill": "$text-secondary", "content": "F2", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSHeaderRight",
                  "name": "headerRight",
                  "gap": 16,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "frame",
                      "id": "POSDateTime",
                      "name": "dateTime",
                      "layout": "vertical",
                      "gap": 2,
                      "alignItems": "flex_end",
                      "children": [
                        {"type": "text", "id": "POSTime", "fill": "$text-primary", "content": "23:19", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
                        {"type": "text", "id": "POSDate", "fill": "$text-secondary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "POSUserAvatar",
                      "name": "userAvatar",
                      "width": 40,
                      "height": 40,
                      "fill": "#3B82F630",
                      "cornerRadius": 100,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {"type": "text", "id": "POSUserInitials", "fill": "#3B82F6", "content": "M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "POSCategoryBar",
              "name": "categoryBar",
              "width": "fill_container",
              "fill": "$bg-elevated",
              "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
              "padding": [12, 24],
              "gap": 12,
              "children": [
                {
                  "type": "frame",
                  "id": "POSCatAll",
                  "name": "catAll",
                  "fill": "$orange-primary",
                  "cornerRadius": 100,
                  "padding": [10, 20],
                  "children": [
                    {"type": "text", "id": "POSCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSCatDrinks",
                  "name": "catDrinks",
                  "fill": "$bg-interactive",
                  "cornerRadius": 100,
                  "padding": [10, 20],
                  "children": [
                    {"type": "text", "id": "POSCatDrinksText", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSCatFood",
                  "name": "catFood",
                  "fill": "$bg-interactive",
                  "cornerRadius": 100,
                  "padding": [10, 20],
                  "children": [
                    {"type": "text", "id": "POSCatFoodText", "fill": "$text-secondary", "content": "Thức ăn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSCatDesserts",
                  "name": "catDesserts",
                  "fill": "$bg-interactive",
                  "cornerRadius": 100,
                  "padding": [10, 20],
                  "children": [
                    {"type": "text", "id": "POSCatDessertsText", "fill": "$text-secondary", "content": "Tráng miệng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSCatCombo",
                  "name": "catCombo",
                  "fill": "$bg-interactive",
                  "cornerRadius": 100,
                  "padding": [10, 20],
                  "children": [
                    {"type": "text", "id": "POSCatComboText", "fill": "$text-secondary", "content": "Combo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "POSProductArea",
              "name": "productArea",
              "width": "fill_container",
              "height": "fill_container",
              "padding": 24,
              "gap": 20,
              "wrap": true,
              "alignContent": "flex_start",
              "children": [
                {
                  "type": "frame",
                  "id": "POSProduct1",
                  "name": "product1",
                  "width": 180,
                  "fill": "$bg-elevated",
                  "cornerRadius": 16,
                  "stroke": {"thickness": 1, "fill": "$border-default"},
                  "layout": "vertical",
                  "clip": true,
                  "children": [
                    {"type": "frame", "id": "POSProduct1Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#3B82F618"},
                    {
                      "type": "frame",
                      "id": "POSProduct1Content",
                      "name": "content",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 6,
                      "padding": 14,
                      "children": [
                        {"type": "text", "id": "POSProduct1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                        {"type": "text", "id": "POSProduct1Price", "fill": "$orange-primary", "content": "29,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSProduct2",
                  "name": "product2",
                  "width": 180,
                  "fill": "$bg-elevated",
                  "cornerRadius": 16,
                  "stroke": {"thickness": 2, "fill": "$orange-primary"},
                  "layout": "vertical",
                  "clip": true,
                  "children": [
                    {"type": "frame", "id": "POSProduct2Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#22C55E18"},
                    {
                      "type": "frame",
                      "id": "POSProduct2Content",
                      "name": "content",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 6,
                      "padding": 14,
                      "children": [
                        {"type": "text", "id": "POSProduct2Name", "fill": "$text-primary", "content": "Trà Đào Cam Sả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                        {"type": "text", "id": "POSProduct2Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSProduct3",
                  "name": "product3",
                  "width": 180,
                  "fill": "$bg-elevated",
                  "cornerRadius": 16,
                  "stroke": {"thickness": 1, "fill": "$border-default"},
                  "layout": "vertical",
                  "clip": true,
                  "children": [
                    {"type": "frame", "id": "POSProduct3Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#F59E0B18"},
                    {
                      "type": "frame",
                      "id": "POSProduct3Content",
                      "name": "content",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 6,
                      "padding": 14,
                      "children": [
                        {"type": "text", "id": "POSProduct3Name", "fill": "$text-primary", "content": "Bánh Mì Thịt Nguội", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                        {"type": "text", "id": "POSProduct3Price", "fill": "$orange-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSProduct4",
                  "name": "product4",
                  "width": 180,
                  "fill": "$bg-elevated",
                  "cornerRadius": 16,
                  "stroke": {"thickness": 1, "fill": "$border-default"},
                  "layout": "vertical",
                  "clip": true,
                  "children": [
                    {"type": "frame", "id": "POSProduct4Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#8B5CF618"},
                    {
                      "type": "frame",
                      "id": "POSProduct4Content",
                      "name": "content",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 6,
                      "padding": 14,
                      "children": [
                        {"type": "text", "id": "POSProduct4Name", "fill": "$text-primary", "content": "Matcha Latte", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                        {"type": "text", "id": "POSProduct4Price", "fill": "$orange-primary", "content": "42,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSProduct5",
                  "name": "product5",
                  "width": 180,
                  "fill": "$bg-elevated",
                  "cornerRadius": 16,
                  "stroke": {"thickness": 1, "fill": "$border-default"},
                  "layout": "vertical",
                  "clip": true,
                  "children": [
                    {"type": "frame", "id": "POSProduct5Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#EC489918"},
                    {
                      "type": "frame",
                      "id": "POSProduct5Content",
                      "name": "content",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 6,
                      "padding": 14,
                      "children": [
                        {"type": "text", "id": "POSProduct5Name", "fill": "$text-primary", "content": "Sinh Tố Dâu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                        {"type": "text", "id": "POSProduct5Price", "fill": "$orange-primary", "content": "38,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSProduct6",
                  "name": "product6",
                  "width": 180,
                  "fill": "$bg-elevated",
                  "cornerRadius": 16,
                  "stroke": {"thickness": 1, "fill": "$border-default"},
                  "layout": "vertical",
                  "clip": true,
                  "children": [
                    {"type": "frame", "id": "POSProduct6Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#06B6D418"},
                    {
                      "type": "frame",
                      "id": "POSProduct6Content",
                      "name": "content",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 6,
                      "padding": 14,
                      "children": [
                        {"type": "text", "id": "POSProduct6Name", "fill": "$text-primary", "content": "Nước Ép Cam", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                        {"type": "text", "id": "POSProduct6Price", "fill": "$orange-primary", "content": "32,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSProduct7",
                  "name": "product7",
                  "width": 180,
                  "fill": "$bg-elevated",
                  "cornerRadius": 16,
                  "stroke": {"thickness": 1, "fill": "$border-default"},
                  "layout": "vertical",
                  "clip": true,
                  "children": [
                    {"type": "frame", "id": "POSProduct7Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#F4393918"},
                    {
                      "type": "frame",
                      "id": "POSProduct7Content",
                      "name": "content",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 6,
                      "padding": 14,
                      "children": [
                        {"type": "text", "id": "POSProduct7Name", "fill": "$text-primary", "content": "Trà Sữa Trân Châu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                        {"type": "text", "id": "POSProduct7Price", "fill": "$orange-primary", "content": "39,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSProduct8",
                  "name": "product8",
                  "width": 180,
                  "fill": "$bg-elevated",
                  "cornerRadius": 16,
                  "stroke": {"thickness": 1, "fill": "$border-default"},
                  "layout": "vertical",
                  "clip": true,
                  "opacity": 0.5,
                  "children": [
                    {
                      "type": "frame", 
                      "id": "POSProduct8Img", 
                      "name": "img", 
                      "width": "fill_container", 
                      "height": 120, 
                      "fill": "$bg-interactive",
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {"type": "text", "id": "POSProduct8OOS", "fill": "$text-disabled", "content": "Hết hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "POSProduct8Content",
                      "name": "content",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 6,
                      "padding": 14,
                      "children": [
                        {"type": "text", "id": "POSProduct8Name", "fill": "$text-disabled", "content": "Sinh Tố Bơ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                        {"type": "text", "id": "POSProduct8Price", "fill": "$text-disabled", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "POSBottomBar",
              "name": "bottomBar",
              "width": "fill_container",
              "fill": "$bg-elevated",
              "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
              "padding": [12, 24],
              "gap": 12,
              "children": [
                {
                  "type": "frame",
                  "id": "POSQuickNewOrder",
                  "name": "newOrderBtn",
                  "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,
                  "padding": [0, 20],
                  "gap": 8,
                  "alignItems": "center",
                  "children": [
                    {"type": "icon_font", "id": "POSQuickNewOrderIcon", "width": 20, "height": 20, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"},
                    {"type": "text", "id": "POSQuickNewOrderText", "fill": "$text-primary", "content": "Đơn mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSQuickHold",
                  "name": "holdBtn",
                  "width": 52,
                  "height": 52,
                  "fill": "$bg-interactive",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {"type": "icon_font", "id": "POSQuickHoldIcon", "width": 22, "height": 22, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSQuickRecall",
                  "name": "recallBtn",
                  "width": 52,
                  "height": 52,
                  "fill": "$bg-interactive",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {"type": "icon_font", "id": "POSQuickRecallIcon", "width": 22, "height": 22, "iconFontName": "clipboard-list", "iconFontFamily": "lucide", "fill": "$text-secondary"},
                    {
                      "type": "frame",
                      "id": "POSQuickRecallBadge",
                      "name": "badge",
                      "fill": "#EF4444",
                      "cornerRadius": 100,
                      "padding": [2, 5],
                      "position": "absolute",
                      "x": 34,
                      "y": 6,
                      "children": [
                        {"type": "text", "id": "POSQuickRecallBadgeText", "fill": "#FFFFFF", "content": "3", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSQuickDiscount",
                  "name": "discountBtn",
                  "width": 52,
                  "height": 52,
                  "fill": "$bg-interactive",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {"type": "icon_font", "id": "POSQuickDiscountIcon", "width": 22, "height": 22, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "$text-secondary"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSQuickCustomer",
                  "name": "customerBtn",
                  "width": 52,
                  "height": 52,
                  "fill": "$bg-interactive",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {"type": "icon_font", "id": "POSQuickCustomerIcon", "width": 22, "height": 22, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-secondary"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSQuickPrint",
                  "name": "printBtn",
                  "width": 52,
                  "height": 52,
                  "fill": "$bg-interactive",
                  "cornerRadius": 12,
                  "justifyContent": "center",
                  "alignItems": "center",
                  "children": [
                    {"type": "icon_font", "id": "POSQuickPrintIcon", "width": 22, "height": 22, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"}
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "POSRightPanel",
          "name": "rightPanel",
          "width": 420,
          "height": "fill_container",
          "fill": "$bg-elevated",
          "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]},
          "layout": "vertical",
          "children": [
            {
              "type": "frame",
              "id": "POSOrderHeader",
              "name": "orderHeader",
              "width": "fill_container",
              "padding": [16, 20],
              "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "POSOrderInfo",
                  "name": "orderInfo",
                  "layout": "vertical",
                  "gap": 4,
                  "children": [
                    {"type": "text", "id": "POSOrderNum", "fill": "$text-primary", "content": "Đơn #0042", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
                    {"type": "text", "id": "POSOrderTable", "fill": "$text-secondary", "content": "Bàn 12 • 3 món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSOrderActions",
                  "name": "orderActions",
                  "gap": 8,
                  "children": [
                    {"type": "frame", "id": "POSOrderHoldBtn", "name": "holdBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "POSOrderHoldIcon", "width": 20, "height": 20, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"}]},
                    {"type": "frame", "id": "POSOrderMoreBtn", "name": "moreBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "POSOrderMoreIcon", "width": 20, "height": 20, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "POSCustomerSection",
              "name": "customerSection",
              "width": "fill_container",
              "fill": "#14B8A610",
              "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
              "padding": [12, 20],
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "POSCustomerInfo",
                  "gap": 12,
                  "alignItems": "center",
                  "children": [
                    {"type": "frame", "id": "POSCustomerAvatar", "width": 36, "height": 36, "fill": "#14B8A630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "POSCustomerAvatarIcon", "width": 18, "height": 18, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#14B8A6"}]},
                    {
                      "type": "frame",
                      "id": "POSCustomerDetails",
                      "layout": "vertical",
                      "gap": 2,
                      "children": [
                        {"type": "frame", "id": "POSCustomerNameRow", "gap": 8, "alignItems": "center", "children": [
                          {"type": "text", "id": "POSCustomerName", "fill": "$text-primary", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
                          {"type": "frame", "id": "POSCustomerVIP", "fill": "#F59E0B", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "POSCustomerVIPText", "fill": "#000", "content": "Gold", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]}
                        ]},
                        {"type": "text", "id": "POSCustomerPhone", "fill": "$text-tertiary", "content": "0901***234 • 2,520 điểm", "fontFamily": "Roboto", "fontSize": 12}
                      ]
                    }
                  ]
                },
                {"type": "frame", "id": "POSCustomerRemove", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "POSCustomerRemoveIcon", "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}
              ]
            },
            {
              "type": "frame",
              "id": "POSOrderItems",
              "name": "orderItems",
              "width": "fill_container",
              "height": "fill_container",
              "layout": "vertical",
              "gap": 0,
              "children": [
                {
                  "type": "frame",
                  "id": "POSOrderItem1",
                  "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": "POSOrderItem1Left",
                      "name": "leftContent",
                      "gap": 12,
                      "alignItems": "center",
                      "children": [
                        {"type": "frame", "id": "POSOrderItem1Qty", "name": "qtyBadge", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "POSOrderItem1QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
                        {
                          "type": "frame",
                          "id": "POSOrderItem1Info",
                          "name": "itemInfo",
                          "layout": "vertical",
                          "gap": 2,
                          "children": [
                            {"type": "text", "id": "POSOrderItem1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                            {"type": "text", "id": "POSOrderItem1Note", "fill": "$text-tertiary", "content": "Ít đường", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
                          ]
                        }
                      ]
                    },
                    {"type": "text", "id": "POSOrderItem1Price", "fill": "$text-primary", "content": "58,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSOrderItem2",
                  "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": "POSOrderItem2Left",
                      "name": "leftContent",
                      "gap": 12,
                      "alignItems": "center",
                      "children": [
                        {"type": "frame", "id": "POSOrderItem2Qty", "name": "qtyBadge", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "POSOrderItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
                        {"type": "text", "id": "POSOrderItem2Name", "fill": "$text-primary", "content": "Bánh Mì Thịt Nguội", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
                      ]
                    },
                    {"type": "text", "id": "POSOrderItem2Price", "fill": "$text-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSOrderItem3",
                  "name": "orderItem3",
                  "width": "fill_container",
                  "padding": [14, 20],
                  "justifyContent": "space_between",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "frame",
                      "id": "POSOrderItem3Left",
                      "name": "leftContent",
                      "gap": 12,
                      "alignItems": "center",
                      "children": [
                        {"type": "frame", "id": "POSOrderItem3Qty", "name": "qtyBadge", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "POSOrderItem3QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
                        {"type": "text", "id": "POSOrderItem3Name", "fill": "$text-primary", "content": "Trà Đào Cam Sả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
                      ]
                    },
                    {"type": "text", "id": "POSOrderItem3Price", "fill": "$text-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "POSOrderSummary",
              "name": "orderSummary",
              "width": "fill_container",
              "fill": "$bg-surface",
              "layout": "vertical",
              "padding": 20,
              "gap": 12,
              "children": [
                {
                  "type": "frame",
                  "id": "POSSummarySubtotal",
                  "name": "subtotalRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {"type": "text", "id": "POSSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
                    {"type": "text", "id": "POSSubtotalValue", "fill": "$text-primary", "content": "138,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSSummaryDiscount",
                  "name": "discountRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {"type": "text", "id": "POSDiscountLabel", "fill": "$text-secondary", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
                    {"type": "text", "id": "POSDiscountValue", "fill": "$green-success", "content": "-10,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSSummaryLoyalty",
                  "name": "loyaltyRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {"type": "frame", "id": "POSLoyaltyLabelRow", "gap": 6, "alignItems": "center", "children": [
                      {"type": "icon_font", "id": "POSLoyaltyIcon", "width": 14, "height": 14, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"},
                      {"type": "text", "id": "POSLoyaltyLabel", "fill": "#14B8A6", "content": "Dùng 100 điểm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
                    ]},
                    {"type": "text", "id": "POSLoyaltyValue", "fill": "#14B8A6", "content": "-10,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
                  ]
                },
                {
                  "type": "frame",
                  "id": "POSSummaryDivider",
                  "name": "divider",
                  "width": "fill_container",
                  "height": 1,
                  "fill": "$border-subtle"
                },
                {
                  "type": "frame",
                  "id": "POSSummaryTotal",
                  "name": "totalRow",
                  "width": "fill_container",
                  "justifyContent": "space_between",
                  "children": [
                    {"type": "text", "id": "POSTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
                    {"type": "text", "id": "POSTotalValue", "fill": "$orange-primary", "content": "128,000₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "POSPaymentBtn",
              "name": "paymentBtn",
              "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}]},
              "gap": 10,
              "justifyContent": "center",
              "alignItems": "center",
              "children": [
                {"type": "icon_font", "id": "POSPaymentIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"},
                {"type": "text", "id": "POSPaymentText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}
              ]
            }
          ]
        }
      ]
    }
  ],
  "variables": {
    "bg-elevated": {"type": "color", "value": "#1A1A1D"},
    "bg-interactive": {"type": "color", "value": "#2A2A2E"},
    "bg-page": {"type": "color", "value": "#0A0A0B"},
    "bg-surface": {"type": "color", "value": "#111113"},
    "border-default": {"type": "color", "value": "#2A2A2E"},
    "border-subtle": {"type": "color", "value": "#1F1F23"},
    "green-success": {"type": "color", "value": "#22C55E"},
    "orange-primary": {"type": "color", "value": "#FF5C00"},
    "text-disabled": {"type": "color", "value": "#6B6B70"},
    "text-primary": {"type": "color", "value": "#FFFFFF"},
    "text-secondary": {"type": "color", "value": "#ADADB0"},
    "text-tertiary": {"type": "color", "value": "#8B8B90"}
  }
}
