{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "id": "OfflineScreen",
      "name": "Screen/Offline Mode",
      "reusable": true,
      "width": 480,
      "height": 320,
      "fill": "$bg-page",
      "layout": "vertical",
      "justifyContent": "center",
      "alignItems": "center",
      "gap": 24,
      "padding": 32,
      "children": [
        {
          "type": "frame",
          "id": "OfflineIndicator",
          "width": 80,
          "height": 80,
          "fill": "#EF444420",
          "cornerRadius": 100,
          "justifyContent": "center",
          "alignItems": "center",
          "children": [
            {"type": "icon_font", "id": "OfflineIcon", "width": 40, "height": 40, "iconFontName": "wifi-off", "iconFontFamily": "lucide", "fill": "#EF4444"}
          ]
        },
        {
          "type": "frame",
          "id": "OfflineText",
          "layout": "vertical",
          "gap": 8,
          "alignItems": "center",
          "children": [
            {"type": "text", "id": "OfflineTitle", "fill": "$text-primary", "content": "Mất kết nối mạng", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"},
            {"type": "text", "id": "OfflineSubtitle", "fill": "$text-tertiary", "content": "Đang hoạt động OFFLINE", "fontFamily": "Roboto", "fontSize": 14}
          ]
        },
        {
          "type": "frame",
          "id": "OfflineFeatures",
          "fill": "$bg-elevated",
          "cornerRadius": 14,
          "padding": 16,
          "layout": "vertical",
          "gap": 10,
          "children": [
            {"type": "frame", "id": "FeatureRow1", "gap": 12, "alignItems": "center", "children": [
              {"type": "icon_font", "id": "FeatureIcon1", "width": 18, "height": 18, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"},
              {"type": "text", "id": "FeatureText1", "fill": "$text-primary", "content": "Tạo đơn hàng mới", "fontFamily": "Roboto", "fontSize": 14}
            ]},
            {"type": "frame", "id": "FeatureRow2", "gap": 12, "alignItems": "center", "children": [
              {"type": "icon_font", "id": "FeatureIcon2", "width": 18, "height": 18, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"},
              {"type": "text", "id": "FeatureText2", "fill": "$text-primary", "content": "Thanh toán tiền mặt", "fontFamily": "Roboto", "fontSize": 14}
            ]},
            {"type": "frame", "id": "FeatureRow3", "gap": 12, "alignItems": "center", "children": [
              {"type": "icon_font", "id": "FeatureIcon3", "width": 18, "height": 18, "iconFontName": "x-circle", "iconFontFamily": "lucide", "fill": "#EF4444"},
              {"type": "text", "id": "FeatureText3", "fill": "$text-tertiary", "content": "QR/Thẻ (cần online)", "fontFamily": "Roboto", "fontSize": 14}
            ]},
            {"type": "frame", "id": "FeatureRow4", "gap": 12, "alignItems": "center", "children": [
              {"type": "icon_font", "id": "FeatureIcon4", "width": 18, "height": 18, "iconFontName": "x-circle", "iconFontFamily": "lucide", "fill": "#EF4444"},
              {"type": "text", "id": "FeatureText4", "fill": "$text-tertiary", "content": "Sync dữ liệu", "fontFamily": "Roboto", "fontSize": 14}
            ]}
          ]
        },
        {
          "type": "frame",
          "id": "PendingSync",
          "fill": "#F59E0B20",
          "cornerRadius": 10,
          "padding": [10, 16],
          "gap": 8,
          "alignItems": "center",
          "children": [
            {"type": "icon_font", "id": "PendingSyncIcon", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "#F59E0B"},
            {"type": "text", "id": "PendingSyncText", "fill": "#F59E0B", "content": "12 đơn chờ đồng bộ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
          ]
        },
        {
          "type": "frame",
          "id": "RetryBtn",
          "fill": "$bg-interactive",
          "cornerRadius": 12,
          "padding": [14, 24],
          "gap": 10,
          "alignItems": "center",
          "children": [
            {"type": "icon_font", "id": "RetryIcon", "width": 18, "height": 18, "iconFontName": "refresh-cw", "iconFontFamily": "lucide", "fill": "$text-secondary"},
            {"type": "text", "id": "RetryText", "fill": "$text-secondary", "content": "Thử kết nối lại", "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"},
    "text-primary": {"type": "color", "value": "#FFFFFF"},
    "text-secondary": {"type": "color", "value": "#ADADB0"},
    "text-tertiary": {"type": "color", "value": "#8B8B90"}
  }
}
