{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "id": "KaraokeRoomSession",
      "name": "Karaoke/Room Session",
      "reusable": true,
      "width": 480,
      "height": 720,
      "fill": "$bg-page",
      "layout": "vertical",
      "clip": true,
      "children": [
        {
          "type": "frame",
          "id": "SessionHeader",
          "width": "fill_container",
          "padding": [20, 24],
          "fill": "$bg-elevated",
          "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
          "justifyContent": "space_between",
          "alignItems": "center",
          "children": [
            {"type": "frame", "id": "SessionLeft", "gap": 12, "alignItems": "center", "children": [
              {"type": "frame", "id": "SessionBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [
                {"type": "icon_font", "id": "SessionBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}
              ]},
              {"type": "frame", "id": "SessionRoomInfo", "layout": "vertical", "gap": 2, "children": [
                {"type": "text", "id": "SessionRoomName", "fill": "$text-primary", "content": "Phòng 03", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"},
                {"type": "text", "id": "SessionRoomType", "fill": "$text-tertiary", "content": "Medium • 180K/h", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
              ]}
            ]},
            {"type": "frame", "id": "SessionStatus", "fill": "#8B5CF620", "cornerRadius": 8, "padding": [8, 14], "gap": 8, "alignItems": "center", "children": [
              {"type": "frame", "id": "SessionStatusDot", "width": 10, "height": 10, "fill": "#8B5CF6", "cornerRadius": 100},
              {"type": "text", "id": "SessionStatusText", "fill": "#8B5CF6", "content": "Đang hát", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
            ]}
          ]
        },
        {
          "type": "frame",
          "id": "SessionTimer",
          "width": "fill_container",
          "fill": "#8B5CF615",
          "padding": 24,
          "layout": "vertical",
          "gap": 16,
          "alignItems": "center",
          "children": [
            {"type": "frame", "id": "TimerDisplay", "gap": 8, "alignItems": "baseline", "children": [
              {"type": "text", "id": "TimerValue", "fill": "#8B5CF6", "content": "01:45:32", "fontFamily": "Roboto", "fontSize": 48, "fontWeight": "700"},
              {"type": "text", "id": "TimerTotal", "fill": "$text-tertiary", "content": "/ 2:00:00", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "normal"}
            ]},
            {"type": "frame", "id": "TimerBar", "width": "fill_container", "height": 8, "fill": "$bg-interactive", "cornerRadius": 100, "children": [
              {"type": "frame", "id": "TimerBarFill", "width": "87%", "height": "fill_container", "fill": "#8B5CF6", "cornerRadius": 100}
            ]},
            {"type": "frame", "id": "TimerInfo", "gap": 24, "children": [
              {"type": "frame", "id": "TimerStart", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [{"type": "text", "id": "TimerStartLabel", "fill": "$text-tertiary", "content": "Bắt đầu", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "TimerStartValue", "fill": "$text-primary", "content": "22:30", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
              {"type": "frame", "id": "TimerEnd", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [{"type": "text", "id": "TimerEndLabel", "fill": "$text-tertiary", "content": "Kết thúc", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "TimerEndValue", "fill": "$text-primary", "content": "00:30", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
              {"type": "frame", "id": "TimerGuests", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [{"type": "text", "id": "TimerGuestsLabel", "fill": "$text-tertiary", "content": "Số khách", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "TimerGuestsValue", "fill": "$text-primary", "content": "6 người", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}
            ]}
          ]
        },
        {
          "type": "frame",
          "id": "SessionBill",
          "width": "fill_container",
          "height": "fill_container",
          "fill": "$bg-elevated",
          "layout": "vertical",
          "children": [
            {"type": "frame", "id": "BillHeader", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
              {"type": "text", "id": "BillTitle", "fill": "$text-primary", "content": "Chi tiết hóa đơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
              {"type": "frame", "id": "BillAddBtn", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 14], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "BillAddIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "BillAddText", "fill": "$text-primary", "content": "Thêm đồ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}
            ]},
            {"type": "frame", "id": "BillItems", "width": "fill_container", "height": "fill_container", "padding": [12, 24], "layout": "vertical", "gap": 0, "children": [
              {"type": "frame", "id": "BillItem1", "width": "fill_container", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
                {"type": "frame", "id": "BillItem1Left", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "BillItem1Name", "fill": "$text-primary", "content": "⏱️ Tiền phòng (2h)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "BillItem1Note", "fill": "$text-tertiary", "content": "Medium • 180K/h", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]},
                {"type": "text", "id": "BillItem1Price", "fill": "$text-primary", "content": "360,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
              ]},
              {"type": "frame", "id": "BillItem2", "width": "fill_container", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
                {"type": "frame", "id": "BillItem2Left", "gap": 14, "alignItems": "center", "children": [{"type": "frame", "id": "BillItem2Qty", "gap": 8, "children": [{"type": "frame", "id": "BillItem2Minus", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "BillItem2MinusIcon", "width": 14, "height": 14, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}, {"type": "text", "id": "BillItem2QtyText", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "BillItem2Plus", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "BillItem2PlusIcon", "width": 14, "height": 14, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}]}, {"type": "text", "id": "BillItem2Name", "fill": "$text-primary", "content": "Tiger lon", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
                {"type": "text", "id": "BillItem2Price", "fill": "$text-primary", "content": "210,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
              ]},
              {"type": "frame", "id": "BillItem3", "width": "fill_container", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [
                {"type": "frame", "id": "BillItem3Left", "gap": 14, "alignItems": "center", "children": [{"type": "frame", "id": "BillItem3Qty", "gap": 8, "children": [{"type": "frame", "id": "BillItem3Minus", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "BillItem3MinusIcon", "width": 14, "height": 14, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}, {"type": "text", "id": "BillItem3QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "BillItem3Plus", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "BillItem3PlusIcon", "width": 14, "height": 14, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}]}, {"type": "text", "id": "BillItem3Name", "fill": "$text-primary", "content": "Trái cây dĩa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
                {"type": "text", "id": "BillItem3Price", "fill": "$text-primary", "content": "100,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
              ]}
            ]},
            {"type": "frame", "id": "BillSummary", "width": "fill_container", "fill": "$bg-surface", "padding": [14, 24], "layout": "vertical", "gap": 8, "children": [
              {"type": "frame", "id": "BillRoomTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "BillRoomLabel", "fill": "$text-secondary", "content": "Tiền phòng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, {"type": "text", "id": "BillRoomValue", "fill": "$text-primary", "content": "360,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
              {"type": "frame", "id": "BillFBTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "BillFBLabel", "fill": "$text-secondary", "content": "Đồ uống/ăn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, {"type": "text", "id": "BillFBValue", "fill": "$text-primary", "content": "310,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
              {"type": "frame", "id": "BillTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "BillTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "BillTotalValue", "fill": "$orange-primary", "content": "670,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}
            ]}
          ]
        },
        {
          "type": "frame",
          "id": "SessionFooter",
          "width": "fill_container",
          "fill": "$bg-elevated",
          "padding": [16, 24],
          "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
          "gap": 12,
          "children": [
            {"type": "frame", "id": "SessionExtendBtn", "width": "fill_container", "height": 48, "fill": "#8B5CF6", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [
              {"type": "icon_font", "id": "SessionExtendIcon", "width": 18, "height": 18, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-primary"},
              {"type": "text", "id": "SessionExtendText", "fill": "$text-primary", "content": "Gia hạn", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
            ]},
            {"type": "frame", "id": "SessionCloseBtn", "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": "SessionCloseIcon", "width": 18, "height": 18, "iconFontName": "log-out", "iconFontFamily": "lucide", "fill": "$text-primary"},
              {"type": "text", "id": "SessionCloseText", "fill": "$text-primary", "content": "Kết thúc & 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"}
  }
}
