{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "name": "Product Grid Showcase",
      "width": 1440,
      "fill": "$bg-page",
      "layout": "vertical",
      "gap": 80,
      "padding": [80, 120],
      "children": [
        {
          "type": "frame",
          "id": "ProductGridSection",
          "name": "Product Grid Section",
          "width": "fill_container",
          "layout": "vertical",
          "gap": 32,
          "children": [
            {
              "type": "frame",
              "id": "ProductGridHeader",
              "name": "productGridSectionHeader",
              "layout": "vertical",
              "gap": 16,
              "alignItems": "center",
              "children": [
                {
                  "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": "text",
                  "id": "ProductGridTitle",
                  "name": "shTitle",
                  "fill": "$text-primary",
                  "content": "POS Product Selection Area",
                  "textAlign": "center",
                  "fontFamily": "Roboto",
                  "fontSize": 42,
                  "fontWeight": "normal",
                  "letterSpacing": -1
                }
              ]
            },
            {
              "type": "frame",
              "id": "ProductGridExample",
              "name": "productGridExample",
              "width": "fill_container",
              "fill": "$bg-surface",
              "cornerRadius": 16,
              "stroke": {"thickness": 1, "fill": "$border-subtle"},
              "padding": 24,
              "children": [
                {
                  "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ìm sản phẩm, mã vạch...", "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ét mã", "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ất cả", "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": "Đồ uống", "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ức ăn", "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áng miệng", "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à Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                                {"type": "text", "id": "PGridCard1Price", "fill": "$orange-primary", "content": "29,000₫", "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à Đào Cam Sả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                                {"type": "text", "id": "PGridCard2Price", "fill": "$orange-primary", "content": "35,000₫", "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ánh Mì Thịt Nguội", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                                {"type": "text", "id": "PGridCard3Price", "fill": "$orange-primary", "content": "45,000₫", "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₫", "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ố Dâu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                                {"type": "text", "id": "PGridCard5Price", "fill": "$orange-primary", "content": "38,000₫", "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ết hàng", "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ố Bơ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                                {"type": "text", "id": "PGridCard6Price", "fill": "$text-disabled", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
                              ]
                            }
                          ]}
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "CategoryTabsSection",
          "name": "Category Tabs Section",
          "width": "fill_container",
          "layout": "vertical",
          "gap": 32,
          "children": [
            {
              "type": "frame",
              "id": "CategoryTabsHeader",
              "name": "categoryTabsSectionHeader",
              "layout": "vertical",
              "gap": 16,
              "alignItems": "center",
              "children": [
                {
                  "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": "text",
                  "id": "CategoryTabsTitle",
                  "name": "shTitle",
                  "fill": "$text-primary",
                  "content": "Vertical Category Navigation",
                  "textAlign": "center",
                  "fontFamily": "Roboto",
                  "fontSize": 42,
                  "fontWeight": "normal",
                  "letterSpacing": -1
                }
              ]
            },
            {
              "type": "frame",
              "id": "CategoryTabsExample",
              "name": "categoryTabsExample",
              "width": "fill_container",
              "fill": "$bg-surface",
              "cornerRadius": 16,
              "stroke": {"thickness": 1, "fill": "$border-subtle"},
              "padding": 40,
              "justifyContent": "center",
              "children": [
                {
                  "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ất cả", "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": "Đồ uống", "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ức ăn", "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áng miệng", "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"}
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "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-light": {"type": "color", "value": "#FF8A4C"},
    "orange-primary": {"type": "color", "value": "#FF5C00"},
    "text-disabled": {"type": "color", "value": "#6B6B70"},
    "text-muted": {"type": "color", "value": "#FFFFFFCC"},
    "text-primary": {"type": "color", "value": "#FFFFFF"},
    "text-secondary": {"type": "color", "value": "#ADADB0"},
    "text-tertiary": {"type": "color", "value": "#8B8B90"}
  }
}
