{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "id": "POSCafeMobile",
      "name": "POS Cafe Mobile",
      "reusable": true,
      "width": 390,
      "height": 844,
      "fill": "$bg-page",
      "layout": "vertical",
      "clip": true,
      "children": [
        {
          "type": "frame",
          "id": "CafeMobHeader",
          "width": "fill_container",
          "height": 56,
          "fill": "$bg-elevated",
          "padding": [0, 16],
          "justifyContent": "space_between",
          "alignItems": "center",
          "children": [
            {"type": "frame", "id": "CafeMobLogo", "gap": 8, "alignItems": "center", "children": [
              {"type": "frame", "id": "CafeMobLogoIcon", "width": 32, "height": 32, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CafeMobLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]},
              {"type": "text", "id": "CafeMobStoreName", "fill": "$text-primary", "content": "GoodGo Café", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
            ]},
            {"type": "frame", "id": "CafeMobCartBtn", "width": 44, "height": 44, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [
              {"type": "icon_font", "id": "CafeMobCartIcon", "width": 22, "height": 22, "iconFontName": "shopping-cart", "iconFontFamily": "lucide", "fill": "$text-primary"},
              {"type": "frame", "id": "CafeMobCartBadge", "width": 18, "height": 18, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "position": "absolute", "top": -4, "right": -4, "children": [{"type": "text", "id": "CafeMobCartBadgeText", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]}
            ]},
            {"type": "frame", "id": "CafeMobCustomerBtn", "width": 44, "height": 44, "fill": "#14B8A620", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#14B8A6"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CafeMobCustomerIcon", "width": 20, "height": 20, "iconFontName": "user-search", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}
          ]
        },
        {
          "type": "frame",
          "id": "CafeMobSearch",
          "width": "fill_container",
          "padding": [12, 16],
          "fill": "$bg-elevated",
          "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
          "children": [
            {"type": "frame", "id": "CafeMobSearchBox", "width": "fill_container", "height": 44, "fill": "$bg-surface", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [
              {"type": "icon_font", "id": "CafeMobSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
              {"type": "text", "id": "CafeMobSearchText", "fill": "$text-tertiary", "content": "Tìm món...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}
            ]}
          ]
        },
        {
          "type": "frame",
          "id": "CafeMobCategories",
          "width": "fill_container",
          "fill": "$bg-elevated",
          "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
          "padding": [10, 16],
          "gap": 8,
          "children": [
            {"type": "frame", "id": "CafeMobCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "CafeMobCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]},
            {"type": "frame", "id": "CafeMobCatCoffee", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "CafeMobCatCoffeeText", "fill": "$text-secondary", "content": "Cà phê", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
            {"type": "frame", "id": "CafeMobCatTea", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "CafeMobCatTeaText", "fill": "$text-secondary", "content": "Trà", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]},
            {"type": "frame", "id": "CafeMobCatSnack", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "CafeMobCatSnackText", "fill": "$text-secondary", "content": "Bánh", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}
          ]
        },
        {
          "type": "frame",
          "id": "CafeMobProducts",
          "width": "fill_container",
          "height": "fill_container",
          "padding": 12,
          "layout": "vertical",
          "gap": 12,
          "clip": true,
          "children": [
            {"type": "frame", "id": "CafeMobProdRow1", "width": "fill_container", "gap": 12, "children": [
              {"type": "frame", "id": "CafeMobProd1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeMobProd1Img", "width": "fill_container", "height": 100, "fill": "#8B4513"}, {"type": "frame", "id": "CafeMobProd1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeMobProd1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "CafeMobProd1Price", "fill": "$orange-primary", "content": "29,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]},
              {"type": "frame", "id": "CafeMobProd2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeMobProd2Img", "width": "fill_container", "height": 100, "fill": "#654321"}, {"type": "frame", "id": "CafeMobProd2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeMobProd2Name", "fill": "$text-primary", "content": "Bạc Xỉu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "CafeMobProd2Price", "fill": "$orange-primary", "content": "32,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}
            ]},
            {"type": "frame", "id": "CafeMobProdRow2", "width": "fill_container", "gap": 12, "children": [
              {"type": "frame", "id": "CafeMobProd3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeMobProd3Img", "width": "fill_container", "height": 100, "fill": "#FFA500"}, {"type": "frame", "id": "CafeMobProd3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeMobProd3Name", "fill": "$text-primary", "content": "Trà Đào", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "CafeMobProd3Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]},
              {"type": "frame", "id": "CafeMobProd4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeMobProd4Img", "width": "fill_container", "height": 100, "fill": "#90EE90"}, {"type": "frame", "id": "CafeMobProd4Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeMobProd4Name", "fill": "$text-primary", "content": "Matcha Latte", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "CafeMobProd4Price", "fill": "$orange-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}
            ]},
            {"type": "frame", "id": "CafeMobProdRow3", "width": "fill_container", "gap": 12, "children": [
              {"type": "frame", "id": "CafeMobProd5", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeMobProd5Img", "width": "fill_container", "height": 100, "fill": "#D2691E"}, {"type": "frame", "id": "CafeMobProd5Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeMobProd5Name", "fill": "$text-primary", "content": "Bánh Mì", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "CafeMobProd5Price", "fill": "$orange-primary", "content": "25,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]},
              {"type": "frame", "id": "CafeMobProd6", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeMobProd6Img", "width": "fill_container", "height": 100, "fill": "#FFD700"}, {"type": "frame", "id": "CafeMobProd6Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeMobProd6Name", "fill": "$text-primary", "content": "Croissant", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "CafeMobProd6Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}
            ]}
          ]
        },
        {
          "type": "frame",
          "id": "CafeMobBottomBar",
          "width": "fill_container",
          "fill": "$bg-elevated",
          "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
          "padding": [12, 16],
          "gap": 12,
          "alignItems": "center",
          "children": [
            {"type": "frame", "id": "CafeMobCartSummary", "layout": "vertical", "gap": 2, "children": [
              {"type": "text", "id": "CafeMobCartItems", "fill": "$text-secondary", "content": "3 món", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"},
              {"type": "text", "id": "CafeMobCartTotal", "fill": "$text-primary", "content": "90,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
              {"type": "frame", "id": "CafeMobLoyalty", "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "CafeMobLoyaltyIcon", "width": 12, "height": 12, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, {"type": "text", "id": "CafeMobLoyaltyText", "fill": "#14B8A6", "content": "-10,000₫", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}]}
            ]},
            {"type": "frame", "id": "CafeMobPayBtn", "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": "CafeMobPayIcon", "width": 20, "height": 20, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"},
              {"type": "text", "id": "CafeMobPayText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 15, "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"},
    "orange-primary": {"type": "color", "value": "#FF5C00"},
    "text-primary": {"type": "color", "value": "#FFFFFF"},
    "text-secondary": {"type": "color", "value": "#ADADB0"},
    "text-tertiary": {"type": "color", "value": "#8B8B90"}
  }
}
