{
  "version": "2.7",
  "children": [
    {
      "type": "frame",
      "id": "SocialHubScreen",
      "x": 0,
      "y": 0,
      "name": "Screen/Social Hub",
      "reusable": true,
      "clip": true,
      "width": 1280,
      "height": 920,
      "fill": "$bg-page",
      "children": [
        {
          "type": "frame",
          "id": "Sidebar",
          "width": 240,
          "height": "fill_container",
          "fill": "$bg-card",
          "stroke": {
            "align": "inside",
            "thickness": 3,
            "fill": "$yellow-primary"
          },
          "layout": "vertical",
          "padding": [
            24,
            16
          ],
          "justifyContent": "space_between",
          "children": [
            {
              "type": "frame",
              "id": "SidebarTop",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 32,
              "children": [
                {
                  "type": "frame",
                  "id": "LogoSection",
                  "width": "fill_container",
                  "stroke": {
                    "align": "inside",
                    "thickness": 1,
                    "fill": "$border"
                  },
                  "gap": 8,
                  "padding": [
                    0,
                    0,
                    16,
                    0
                  ],
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "frame",
                      "id": "LogoMark",
                      "width": 32,
                      "height": 32,
                      "fill": "$yellow-primary",
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "text",
                          "id": "LogoLetter",
                          "fill": "$bg-card",
                          "content": "M",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 16,
                          "fontWeight": "700"
                        }
                      ]
                    },
                    {
                      "type": "text",
                      "id": "LogoText",
                      "fill": "$text-primary",
                      "content": "tMARKETING",
                      "fontFamily": "JetBrains Mono",
                      "fontSize": 14,
                      "fontWeight": "700"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "NavSection",
                  "width": "fill_container",
                  "layout": "vertical",
                  "gap": 2,
                  "children": [
                    {
                      "type": "frame",
                      "id": "NavHub",
                      "width": "fill_container",
                      "fill": "#FACC1515",
                      "stroke": {
                        "align": "inside",
                        "thickness": 1,
                        "fill": "$yellow-primary"
                      },
                      "gap": 10,
                      "padding": [
                        10,
                        12
                      ],
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "text",
                          "id": "NavHubNum",
                          "fill": "$yellow-primary",
                          "content": "01",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 12,
                          "fontWeight": "600"
                        },
                        {
                          "type": "text",
                          "id": "NavHubLabel",
                          "fill": "$text-primary",
                          "content": "HUB",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 12,
                          "fontWeight": "600"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "NavChat",
                      "width": "fill_container",
                      "gap": 10,
                      "padding": [
                        10,
                        12
                      ],
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "text",
                          "id": "NavChatNum",
                          "fill": "$text-tertiary",
                          "content": "02",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 12,
                          "fontWeight": "600"
                        },
                        {
                          "type": "text",
                          "id": "NavChatLabel",
                          "fill": "$text-secondary",
                          "content": "CHAT",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 12,
                          "fontWeight": "500"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "NavCRM",
                      "width": "fill_container",
                      "gap": 10,
                      "padding": [
                        10,
                        12
                      ],
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "text",
                          "id": "NavCRMNum",
                          "fill": "$text-tertiary",
                          "content": "03",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 12,
                          "fontWeight": "600"
                        },
                        {
                          "type": "text",
                          "id": "NavCRMLabel",
                          "fill": "$text-secondary",
                          "content": "CRM",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 12,
                          "fontWeight": "500"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "NavAI",
                      "width": "fill_container",
                      "gap": 10,
                      "padding": [
                        10,
                        12
                      ],
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "text",
                          "id": "NavAINum",
                          "fill": "$text-tertiary",
                          "content": "04",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 12,
                          "fontWeight": "600"
                        },
                        {
                          "type": "text",
                          "id": "NavAILabel",
                          "fill": "$text-secondary",
                          "content": "AI STUDIO",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 12,
                          "fontWeight": "500"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "NavStats",
                      "width": "fill_container",
                      "gap": 10,
                      "padding": [
                        10,
                        12
                      ],
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "text",
                          "id": "NavStatsNum",
                          "fill": "$text-tertiary",
                          "content": "05",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 12,
                          "fontWeight": "600"
                        },
                        {
                          "type": "text",
                          "id": "NavStatsLabel",
                          "fill": "$text-secondary",
                          "content": "ANALYTICS",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 12,
                          "fontWeight": "500"
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "SidebarBottom",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 20,
              "children": [
                {
                  "type": "frame",
                  "id": "MetricsBox",
                  "width": "fill_container",
                  "fill": "#FACC1510",
                  "stroke": {
                    "thickness": 1,
                    "fill": "#FACC1530"
                  },
                  "layout": "vertical",
                  "gap": 12,
                  "padding": 16,
                  "children": [
                    {
                      "type": "frame",
                      "id": "MetricsHeader",
                      "gap": 8,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "id": "MetricsIcon",
                          "width": 14,
                          "height": 14,
                          "iconFontName": "bar-chart-2",
                          "iconFontFamily": "lucide",
                          "fill": "$yellow-primary"
                        },
                        {
                          "type": "text",
                          "id": "MetricsLabel",
                          "fill": "$yellow-primary",
                          "content": "REACH TODAY",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 11,
                          "fontWeight": "700"
                        }
                      ]
                    },
                    {
                      "type": "text",
                      "id": "MetricsValue",
                      "fill": "$text-primary",
                      "content": "45.2K",
                      "fontFamily": "Space Grotesk",
                      "fontSize": 28,
                      "fontWeight": "700"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "AccountRow",
                  "width": "fill_container",
                  "stroke": {
                    "align": "inside",
                    "thickness": 1,
                    "fill": "$border"
                  },
                  "gap": 10,
                  "padding": [
                    20,
                    0,
                    0,
                    0
                  ],
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "frame",
                      "id": "Avatar",
                      "width": 32,
                      "height": 32,
                      "fill": "$border",
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "text",
                          "id": "AvatarText",
                          "fill": "$text-primary",
                          "content": "AD",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 10,
                          "fontWeight": "700"
                        }
                      ]
                    },
                    {
                      "type": "text",
                      "id": "UserName",
                      "fill": "$text-primary",
                      "content": "ADMIN",
                      "fontFamily": "JetBrains Mono",
                      "fontSize": 12,
                      "fontWeight": "600"
                    },
                    {
                      "type": "icon_font",
                      "id": "ChevronIcon",
                      "width": 14,
                      "height": 14,
                      "iconFontName": "chevron-right",
                      "iconFontFamily": "lucide",
                      "fill": "$text-tertiary"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "MainContent",
          "width": "fill_container",
          "height": "fill_container",
          "fill": "$bg-page",
          "layout": "vertical",
          "gap": 24,
          "padding": [
            32,
            40
          ],
          "children": [
            {
              "type": "frame",
              "id": "PageHeader",
              "width": "fill_container",
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "HeaderLeft",
                  "layout": "vertical",
                  "gap": 4,
                  "children": [
                    {
                      "type": "text",
                      "id": "PageTitle",
                      "fill": "$text-primary",
                      "content": "SOCIAL HUB",
                      "fontFamily": "Space Grotesk",
                      "fontSize": 32,
                      "fontWeight": "700"
                    },
                    {
                      "type": "text",
                      "id": "PageSubtitle",
                      "fill": "$text-secondary",
                      "content": "Manage all your social media channels in one place",
                      "fontFamily": "JetBrains Mono",
                      "fontSize": 14,
                      "fontWeight": "normal"
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "HeaderActions",
                  "gap": 12,
                  "children": [
                    {
                      "type": "frame",
                      "id": "SearchBtn",
                      "stroke": {
                        "thickness": 1,
                        "fill": "$border"
                      },
                      "gap": 8,
                      "padding": [
                        10,
                        14
                      ],
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "id": "SearchIcon",
                          "width": 14,
                          "height": 14,
                          "iconFontName": "search",
                          "iconFontFamily": "lucide",
                          "fill": "$text-tertiary"
                        },
                        {
                          "type": "text",
                          "id": "SearchText",
                          "fill": "$text-secondary",
                          "content": "SEARCH",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 11,
                          "fontWeight": "500"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "NewPostBtn",
                      "fill": "$yellow-primary",
                      "gap": 6,
                      "padding": [
                        10,
                        18
                      ],
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "id": "PlusIcon",
                          "width": 14,
                          "height": 14,
                          "iconFontName": "plus",
                          "iconFontFamily": "lucide",
                          "fill": "$bg-card"
                        },
                        {
                          "type": "text",
                          "id": "NewPostText",
                          "fill": "$bg-card",
                          "content": "NEW POST",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 11,
                          "fontWeight": "700"
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "TopRow",
              "width": "fill_container",
              "gap": 20,
              "children": [
                {
                  "type": "frame",
                  "id": "PlatformStatus",
                  "width": "fill_container",
                  "fill": "$bg-card",
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border"
                  },
                  "layout": "vertical",
                  "children": [
                    {
                      "type": "frame",
                      "id": "PlatformHeader",
                      "width": "fill_container",
                      "stroke": {
                        "align": "inside",
                        "thickness": 1,
                        "fill": "$border"
                      },
                      "gap": 10,
                      "padding": [
                        16,
                        20
                      ],
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "id": "PlatformIcon",
                          "width": 16,
                          "height": 16,
                          "iconFontName": "globe",
                          "iconFontFamily": "lucide",
                          "fill": "$yellow-primary"
                        },
                        {
                          "type": "text",
                          "id": "PlatformTitle",
                          "fill": "$text-primary",
                          "content": "PLATFORM STATUS",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 12,
                          "fontWeight": "700"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "PlatformList",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 12,
                      "padding": 16,
                      "children": [
                        {
                          "type": "frame",
                          "id": "PlatformFB",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "frame",
                              "id": "PlatformFBLeft",
                              "gap": 10,
                              "alignItems": "center",
                              "children": [
                                {
                                  "type": "frame",
                                  "id": "FBDot",
                                  "width": 8,
                                  "height": 8,
                                  "fill": "$success"
                                },
                                {
                                  "type": "text",
                                  "id": "FBName",
                                  "fill": "$text-primary",
                                  "content": "Facebook",
                                  "fontFamily": "JetBrains Mono",
                                  "fontSize": 12,
                                  "fontWeight": "normal"
                                }
                              ]
                            },
                            {
                              "type": "text",
                              "id": "FBStatus",
                              "fill": "$success",
                              "content": "ACTIVE",
                              "fontFamily": "JetBrains Mono",
                              "fontSize": 10,
                              "fontWeight": "700"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "PlatformIG",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "frame",
                              "id": "PlatformIGLeft",
                              "gap": 10,
                              "alignItems": "center",
                              "children": [
                                {
                                  "type": "frame",
                                  "id": "IGDot",
                                  "width": 8,
                                  "height": 8,
                                  "fill": "$success"
                                },
                                {
                                  "type": "text",
                                  "id": "IGName",
                                  "fill": "$text-primary",
                                  "content": "Instagram",
                                  "fontFamily": "JetBrains Mono",
                                  "fontSize": 12,
                                  "fontWeight": "normal"
                                }
                              ]
                            },
                            {
                              "type": "text",
                              "id": "IGStatus",
                              "fill": "$success",
                              "content": "ACTIVE",
                              "fontFamily": "JetBrains Mono",
                              "fontSize": 10,
                              "fontWeight": "700"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "PlatformZalo",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "frame",
                              "id": "PlatformZaloLeft",
                              "gap": 10,
                              "alignItems": "center",
                              "children": [
                                {
                                  "type": "frame",
                                  "id": "ZaloDot",
                                  "width": 8,
                                  "height": 8,
                                  "fill": "$success"
                                },
                                {
                                  "type": "text",
                                  "id": "ZaloName",
                                  "fill": "$text-primary",
                                  "content": "Zalo OA",
                                  "fontFamily": "JetBrains Mono",
                                  "fontSize": 12,
                                  "fontWeight": "normal"
                                }
                              ]
                            },
                            {
                              "type": "text",
                              "id": "ZaloStatus",
                              "fill": "$success",
                              "content": "ACTIVE",
                              "fontFamily": "JetBrains Mono",
                              "fontSize": 10,
                              "fontWeight": "700"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "PlatformX",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "frame",
                              "id": "PlatformXLeft",
                              "gap": 10,
                              "alignItems": "center",
                              "children": [
                                {
                                  "type": "frame",
                                  "id": "XDot",
                                  "width": 8,
                                  "height": 8,
                                  "fill": "$warning"
                                },
                                {
                                  "type": "text",
                                  "id": "XName",
                                  "fill": "$text-primary",
                                  "content": "X (Twitter)",
                                  "fontFamily": "JetBrains Mono",
                                  "fontSize": 12,
                                  "fontWeight": "normal"
                                }
                              ]
                            },
                            {
                              "type": "text",
                              "id": "XStatus",
                              "fill": "$warning",
                              "content": "PENDING",
                              "fontFamily": "JetBrains Mono",
                              "fontSize": 10,
                              "fontWeight": "700"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "PlatformWA",
                          "width": "fill_container",
                          "justifyContent": "space_between",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "frame",
                              "id": "PlatformWALeft",
                              "gap": 10,
                              "alignItems": "center",
                              "children": [
                                {
                                  "type": "frame",
                                  "id": "WADot",
                                  "width": 8,
                                  "height": 8,
                                  "fill": "$success"
                                },
                                {
                                  "type": "text",
                                  "id": "WAName",
                                  "fill": "$text-primary",
                                  "content": "WhatsApp",
                                  "fontFamily": "JetBrains Mono",
                                  "fontSize": 12,
                                  "fontWeight": "normal"
                                }
                              ]
                            },
                            {
                              "type": "text",
                              "id": "WAStatus",
                              "fill": "$success",
                              "content": "ACTIVE",
                              "fontFamily": "JetBrains Mono",
                              "fontSize": 10,
                              "fontWeight": "700"
                            }
                          ]
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "QuickActions",
                  "width": 280,
                  "fill": "$bg-card",
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border"
                  },
                  "layout": "vertical",
                  "children": [
                    {
                      "type": "frame",
                      "id": "ActionsHeader",
                      "width": "fill_container",
                      "stroke": {
                        "align": "inside",
                        "thickness": 1,
                        "fill": "$border"
                      },
                      "gap": 10,
                      "padding": [
                        16,
                        20
                      ],
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "id": "ActionsIcon",
                          "width": 16,
                          "height": 16,
                          "iconFontName": "zap",
                          "iconFontFamily": "lucide",
                          "fill": "$yellow-primary"
                        },
                        {
                          "type": "text",
                          "id": "ActionsTitle",
                          "fill": "$text-primary",
                          "content": "QUICK ACTIONS",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 12,
                          "fontWeight": "700"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "ActionsList",
                      "width": "fill_container",
                      "layout": "vertical",
                      "gap": 10,
                      "padding": 16,
                      "children": [
                        {
                          "type": "frame",
                          "id": "ActionPost",
                          "width": "fill_container",
                          "fill": "$bg-page",
                          "stroke": {
                            "thickness": 1,
                            "fill": "$border"
                          },
                          "gap": 10,
                          "padding": [
                            10,
                            14
                          ],
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "icon_font",
                              "id": "ActionPostIcon",
                              "width": 14,
                              "height": 14,
                              "iconFontName": "edit-3",
                              "iconFontFamily": "lucide",
                              "fill": "$text-secondary"
                            },
                            {
                              "type": "text",
                              "id": "ActionPostText",
                              "fill": "$text-primary",
                              "content": "CREATE POST",
                              "fontFamily": "JetBrains Mono",
                              "fontSize": 11,
                              "fontWeight": "600"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "ActionStats",
                          "width": "fill_container",
                          "fill": "$bg-page",
                          "stroke": {
                            "thickness": 1,
                            "fill": "$border"
                          },
                          "gap": 10,
                          "padding": [
                            10,
                            14
                          ],
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "icon_font",
                              "id": "ActionStatsIcon",
                              "width": 14,
                              "height": 14,
                              "iconFontName": "bar-chart-2",
                              "iconFontFamily": "lucide",
                              "fill": "$text-secondary"
                            },
                            {
                              "type": "text",
                              "id": "ActionStatsText",
                              "fill": "$text-primary",
                              "content": "VIEW STATS",
                              "fontFamily": "JetBrains Mono",
                              "fontSize": 11,
                              "fontWeight": "600"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "ActionReply",
                          "width": "fill_container",
                          "fill": "$bg-page",
                          "stroke": {
                            "thickness": 1,
                            "fill": "$border"
                          },
                          "gap": 10,
                          "padding": [
                            10,
                            14
                          ],
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "icon_font",
                              "id": "ActionReplyIcon",
                              "width": 14,
                              "height": 14,
                              "iconFontName": "message-circle",
                              "iconFontFamily": "lucide",
                              "fill": "$text-secondary"
                            },
                            {
                              "type": "text",
                              "id": "ActionReplyText",
                              "fill": "$text-primary",
                              "content": "REPLY ALL",
                              "fontFamily": "JetBrains Mono",
                              "fontSize": 11,
                              "fontWeight": "600"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "ActionSchedule",
                          "width": "fill_container",
                          "fill": "$bg-page",
                          "stroke": {
                            "thickness": 1,
                            "fill": "$border"
                          },
                          "gap": 10,
                          "padding": [
                            10,
                            14
                          ],
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "icon_font",
                              "id": "ActionScheduleIcon",
                              "width": 14,
                              "height": 14,
                              "iconFontName": "calendar",
                              "iconFontFamily": "lucide",
                              "fill": "$text-secondary"
                            },
                            {
                              "type": "text",
                              "id": "ActionScheduleText",
                              "fill": "$text-primary",
                              "content": "SCHEDULE",
                              "fontFamily": "JetBrains Mono",
                              "fontSize": 11,
                              "fontWeight": "600"
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "UnifiedFeed",
              "width": "fill_container",
              "height": "fill_container",
              "fill": "$bg-card",
              "stroke": {
                "thickness": 1,
                "fill": "$border"
              },
              "layout": "vertical",
              "children": [
                {
                  "type": "frame",
                  "id": "FeedHeader",
                  "width": "fill_container",
                  "stroke": {
                    "align": "inside",
                    "thickness": 1,
                    "fill": "$border"
                  },
                  "padding": [
                    16,
                    20
                  ],
                  "justifyContent": "space_between",
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "frame",
                      "id": "FeedHeaderLeft",
                      "gap": 10,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "id": "FeedIcon",
                          "width": 16,
                          "height": 16,
                          "iconFontName": "rss",
                          "iconFontFamily": "lucide",
                          "fill": "$yellow-primary"
                        },
                        {
                          "type": "text",
                          "id": "FeedTitle",
                          "fill": "$text-primary",
                          "content": "UNIFIED FEED",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 12,
                          "fontWeight": "700"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "FeedActions",
                      "gap": 12,
                      "children": [
                        {
                          "type": "frame",
                          "id": "FilterBtn",
                          "stroke": {
                            "thickness": 1,
                            "fill": "$border"
                          },
                          "gap": 6,
                          "padding": [
                            6,
                            10
                          ],
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "text",
                              "id": "FilterText",
                              "fill": "$text-secondary",
                              "content": "ALL",
                              "fontFamily": "JetBrains Mono",
                              "fontSize": 10,
                              "fontWeight": "600"
                            },
                            {
                              "type": "icon_font",
                              "id": "FilterArrow",
                              "width": 12,
                              "height": 12,
                              "iconFontName": "chevron-down",
                              "iconFontFamily": "lucide",
                              "fill": "$text-tertiary"
                            }
                          ]
                        },
                        {
                          "type": "frame",
                          "id": "RefreshBtn",
                          "stroke": {
                            "thickness": 1,
                            "fill": "$border"
                          },
                          "padding": 6,
                          "justifyContent": "center",
                          "alignItems": "center",
                          "children": [
                            {
                              "type": "icon_font",
                              "id": "RefreshIcon",
                              "width": 14,
                              "height": 14,
                              "iconFontName": "refresh-cw",
                              "iconFontFamily": "lucide",
                              "fill": "$text-secondary"
                            }
                          ]
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "FeedList",
                  "width": "fill_container",
                  "height": "fill_container",
                  "layout": "vertical",
                  "padding": 16,
                  "children": [
                    {
                      "type": "frame",
                      "id": "FeedItem1",
                      "width": "fill_container",
                      "stroke": {
                        "align": "inside",
                        "thickness": 1,
                        "fill": "$border"
                      },
                      "gap": 12,
                      "padding": [
                        12,
                        0
                      ],
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "frame",
                          "id": "Indicator1",
                          "width": 3,
                          "height": 36,
                          "fill": "#3B82F6"
                        },
                        {
                          "type": "frame",
                          "id": "FeedContent1",
                          "width": "fill_container",
                          "layout": "vertical",
                          "gap": 4,
                          "children": [
                            {
                              "type": "text",
                              "id": "FeedTitle1",
                              "fill": "$text-primary",
                              "content": "@customer1 commented on your post",
                              "fontFamily": "JetBrains Mono",
                              "fontSize": 12,
                              "fontWeight": "600"
                            },
                            {
                              "type": "text",
                              "id": "FeedDesc1",
                              "fill": "$text-secondary",
                              "content": "\"Great product! Love it!\"",
                              "fontFamily": "JetBrains Mono",
                              "fontSize": 11,
                              "fontWeight": "normal"
                            }
                          ]
                        },
                        {
                          "type": "text",
                          "id": "FeedBadge1",
                          "fill": "#3B82F6",
                          "content": "FB",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 10,
                          "fontWeight": "700"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "FeedItem2",
                      "width": "fill_container",
                      "stroke": {
                        "align": "inside",
                        "thickness": 1,
                        "fill": "$border"
                      },
                      "gap": 12,
                      "padding": [
                        12,
                        0
                      ],
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "frame",
                          "id": "Indicator2",
                          "width": 3,
                          "height": 36,
                          "fill": "#E1306C"
                        },
                        {
                          "type": "frame",
                          "id": "FeedContent2",
                          "width": "fill_container",
                          "layout": "vertical",
                          "gap": 4,
                          "children": [
                            {
                              "type": "text",
                              "id": "FeedTitle2",
                              "fill": "$text-primary",
                              "content": "@user123 liked your post",
                              "fontFamily": "JetBrains Mono",
                              "fontSize": 12,
                              "fontWeight": "600"
                            },
                            {
                              "type": "text",
                              "id": "FeedDesc2",
                              "fill": "$text-secondary",
                              "content": "Spring Collection 2026 announcement",
                              "fontFamily": "JetBrains Mono",
                              "fontSize": 11,
                              "fontWeight": "normal"
                            }
                          ]
                        },
                        {
                          "type": "text",
                          "id": "FeedBadge2",
                          "fill": "#E1306C",
                          "content": "IG",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 10,
                          "fontWeight": "700"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "FeedItem3",
                      "width": "fill_container",
                      "stroke": {
                        "align": "inside",
                        "thickness": 1,
                        "fill": "$border"
                      },
                      "gap": 12,
                      "padding": [
                        12,
                        0
                      ],
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "frame",
                          "id": "Indicator3",
                          "width": 3,
                          "height": 36,
                          "fill": "#0068FF"
                        },
                        {
                          "type": "frame",
                          "id": "FeedContent3",
                          "width": "fill_container",
                          "layout": "vertical",
                          "gap": 4,
                          "children": [
                            {
                              "type": "text",
                              "id": "FeedTitle3",
                              "fill": "$text-primary",
                              "content": "Khách hàng gửi tin nhắn mới",
                              "fontFamily": "JetBrains Mono",
                              "fontSize": 12,
                              "fontWeight": "600"
                            },
                            {
                              "type": "text",
                              "id": "FeedDesc3",
                              "fill": "$text-secondary",
                              "content": "\"Cho mình hỏi giá sản phẩm X...\"",
                              "fontFamily": "JetBrains Mono",
                              "fontSize": 11,
                              "fontWeight": "normal"
                            }
                          ]
                        },
                        {
                          "type": "text",
                          "id": "FeedBadge3",
                          "fill": "#0068FF",
                          "content": "ZALO",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 10,
                          "fontWeight": "700"
                        }
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "FeedItem4",
                      "width": "fill_container",
                      "gap": 12,
                      "padding": [
                        12,
                        0
                      ],
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "frame",
                          "id": "Indicator4",
                          "width": 3,
                          "height": 36,
                          "fill": "#25D366"
                        },
                        {
                          "type": "frame",
                          "id": "FeedContent4",
                          "width": "fill_container",
                          "layout": "vertical",
                          "gap": 4,
                          "children": [
                            {
                              "type": "text",
                              "id": "FeedTitle4",
                              "fill": "$text-primary",
                              "content": "+84912xxx sent a message",
                              "fontFamily": "JetBrains Mono",
                              "fontSize": 12,
                              "fontWeight": "600"
                            },
                            {
                              "type": "text",
                              "id": "FeedDesc4",
                              "fill": "$text-secondary",
                              "content": "\"Hi, I want to order...\"",
                              "fontFamily": "JetBrains Mono",
                              "fontSize": 11,
                              "fontWeight": "normal"
                            }
                          ]
                        },
                        {
                          "type": "text",
                          "id": "FeedBadge4",
                          "fill": "#25D366",
                          "content": "WA",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 10,
                          "fontWeight": "700"
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "type": "frame",
              "id": "KPICards",
              "width": "fill_container",
              "gap": 16,
              "children": [
                {
                  "type": "frame",
                  "id": "KPIReach",
                  "width": "fill_container",
                  "fill": "$bg-card",
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border"
                  },
                  "layout": "vertical",
                  "gap": 12,
                  "padding": 20,
                  "children": [
                    {
                      "type": "text",
                      "id": "KPIReachLabel",
                      "fill": "$text-secondary",
                      "content": "TOTAL REACH",
                      "fontFamily": "JetBrains Mono",
                      "fontSize": 11,
                      "fontWeight": "600"
                    },
                    {
                      "type": "text",
                      "id": "KPIReachValue",
                      "fill": "$text-primary",
                      "content": "45.2K",
                      "fontFamily": "Space Grotesk",
                      "fontSize": 28,
                      "fontWeight": "700"
                    },
                    {
                      "type": "frame",
                      "id": "KPIReachChange",
                      "gap": 6,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "id": "KPIReachArrow",
                          "width": 12,
                          "height": 12,
                          "iconFontName": "arrow-up-right",
                          "iconFontFamily": "lucide",
                          "fill": "$success"
                        },
                        {
                          "type": "text",
                          "id": "KPIReachPercent",
                          "fill": "$success",
                          "content": "12.5%",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 12,
                          "fontWeight": "600"
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "KPIEngage",
                  "width": "fill_container",
                  "fill": "$bg-card",
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border"
                  },
                  "layout": "vertical",
                  "gap": 12,
                  "padding": 20,
                  "children": [
                    {
                      "type": "text",
                      "id": "KPIEngageLabel",
                      "fill": "$text-secondary",
                      "content": "ENGAGEMENT",
                      "fontFamily": "JetBrains Mono",
                      "fontSize": 11,
                      "fontWeight": "600"
                    },
                    {
                      "type": "text",
                      "id": "KPIEngageValue",
                      "fill": "$text-primary",
                      "content": "12.8%",
                      "fontFamily": "Space Grotesk",
                      "fontSize": 28,
                      "fontWeight": "700"
                    },
                    {
                      "type": "frame",
                      "id": "KPIEngageChange",
                      "gap": 6,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "id": "KPIEngageArrow",
                          "width": 12,
                          "height": 12,
                          "iconFontName": "arrow-up-right",
                          "iconFontFamily": "lucide",
                          "fill": "$success"
                        },
                        {
                          "type": "text",
                          "id": "KPIEngagePercent",
                          "fill": "$success",
                          "content": "8.2%",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 12,
                          "fontWeight": "600"
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "KPIFollowers",
                  "width": "fill_container",
                  "fill": "$bg-card",
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border"
                  },
                  "layout": "vertical",
                  "gap": 12,
                  "padding": 20,
                  "children": [
                    {
                      "type": "text",
                      "id": "KPIFollowersLabel",
                      "fill": "$text-secondary",
                      "content": "NEW FOLLOWERS",
                      "fontFamily": "JetBrains Mono",
                      "fontSize": 11,
                      "fontWeight": "600"
                    },
                    {
                      "type": "text",
                      "id": "KPIFollowersValue",
                      "fill": "$text-primary",
                      "content": "+1.2K",
                      "fontFamily": "Space Grotesk",
                      "fontSize": 28,
                      "fontWeight": "700"
                    },
                    {
                      "type": "frame",
                      "id": "KPIFollowersChange",
                      "gap": 6,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "id": "KPIFollowersArrow",
                          "width": 12,
                          "height": 12,
                          "iconFontName": "arrow-up-right",
                          "iconFontFamily": "lucide",
                          "fill": "$success"
                        },
                        {
                          "type": "text",
                          "id": "KPIFollowersPercent",
                          "fill": "$success",
                          "content": "24.1%",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 12,
                          "fontWeight": "600"
                        }
                      ]
                    }
                  ]
                },
                {
                  "type": "frame",
                  "id": "KPIMessages",
                  "width": "fill_container",
                  "fill": "$bg-card",
                  "stroke": {
                    "thickness": 1,
                    "fill": "$border"
                  },
                  "layout": "vertical",
                  "gap": 12,
                  "padding": 20,
                  "children": [
                    {
                      "type": "text",
                      "id": "KPIMessagesLabel",
                      "fill": "$text-secondary",
                      "content": "MESSAGES",
                      "fontFamily": "JetBrains Mono",
                      "fontSize": 11,
                      "fontWeight": "600"
                    },
                    {
                      "type": "text",
                      "id": "KPIMessagesValue",
                      "fill": "$text-primary",
                      "content": "234",
                      "fontFamily": "Space Grotesk",
                      "fontSize": 28,
                      "fontWeight": "700"
                    },
                    {
                      "type": "frame",
                      "id": "KPIMessagesChange",
                      "gap": 6,
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "icon_font",
                          "id": "KPIMessagesArrow",
                          "width": 12,
                          "height": 12,
                          "iconFontName": "minus",
                          "iconFontFamily": "lucide",
                          "fill": "$text-tertiary"
                        },
                        {
                          "type": "text",
                          "id": "KPIMessagesPercent",
                          "fill": "$text-tertiary",
                          "content": "0.0%",
                          "fontFamily": "JetBrains Mono",
                          "fontSize": 12,
                          "fontWeight": "600"
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "variables": {
    "bg-page": {
      "type": "color",
      "value": "#18181B"
    },
    "bg-card": {
      "type": "color",
      "value": "#0F0F10"
    },
    "yellow-primary": {
      "type": "color",
      "value": "#FACC15"
    },
    "text-primary": {
      "type": "color",
      "value": "#FAFAFA"
    },
    "text-secondary": {
      "type": "color",
      "value": "#71717A"
    },
    "text-tertiary": {
      "type": "color",
      "value": "#52525B"
    },
    "border": {
      "type": "color",
      "value": "#27272A"
    },
    "success": {
      "type": "color",
      "value": "#22C55E"
    },
    "warning": {
      "type": "color",
      "value": "#FACC15"
    },
    "error": {
      "type": "color",
      "value": "#EF4444"
    },
    "info": {
      "type": "color",
      "value": "#3B82F6"
    }
  }
}