{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "id": "RoomExtendDialog",
      "name": "Dialog/Room Extend",
      "reusable": true,
      "width": 1440,
      "height": 900,
      "fill": "#0A0A0B80",
      "justifyContent": "center",
      "alignItems": "center",
      "children": [
        {
          "type": "frame",
          "id": "ExtendModal",
          "width": 420,
          "fill": "#111113",
          "cornerRadius": 24,
          "stroke": {"thickness": 1, "fill": "#1F1F23"},
          "layout": "vertical",
          "gap": 24,
          "padding": 28,
          "children": [
            {
              "type": "frame",
              "id": "ExtendHeader",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 12,
              "alignItems": "center",
              "children": [
                {"type": "frame", "id": "ExtendIcon", "width": 64, "height": 64, "fill": "#F59E0B1A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [
                  {"type": "icon_font", "id": "ExtendIconI", "width": 28, "height": 28, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#F59E0B"}
                ]},
                {"type": "text", "id": "ExtendTitle", "fill": "#FFFFFF", "content": "Gia hạn thời gian", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"},
                {"type": "text", "id": "ExtendRoom", "fill": "#8B8B90", "content": "Phòng VIP 01", "fontFamily": "Roboto", "fontSize": 14}
              ]
            },
            {
              "type": "frame",
              "id": "ExtendCurrent",
              "width": "fill_container",
              "fill": "#F59E0B10",
              "cornerRadius": 14,
              "padding": 16,
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {"type": "frame", "id": "ExtendCurrentLeft", "layout": "vertical", "gap": 4, "children": [
                  {"type": "text", "id": "ExtendCurrentLabel", "fill": "#8B8B90", "content": "Thời gian còn lại", "fontFamily": "Roboto", "fontSize": 12},
                  {"type": "text", "id": "ExtendCurrentTime", "fill": "#F59E0B", "content": "00:12:45", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}
                ]},
                {"type": "frame", "id": "ExtendCurrentRight", "layout": "vertical", "gap": 4, "alignItems": "flex-end", "children": [
                  {"type": "text", "id": "ExtendCurrentUsed", "fill": "#8B8B90", "content": "Đã dùng", "fontFamily": "Roboto", "fontSize": 12},
                  {"type": "text", "id": "ExtendCurrentUsedTime", "fill": "#FFFFFF", "content": "1h 47'", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
                ]}
              ]
            },
            {
              "type": "frame",
              "id": "ExtendOptions",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 10,
              "children": [
                {"type": "text", "id": "ExtendOptionsLabel", "fill": "#8B8B90", "content": "Chọn thời gian gia hạn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
                {"type": "frame", "id": "ExtendOptionsRow", "width": "fill_container", "gap": 10, "children": [
                  {"type": "frame", "id": "ExtendOpt30", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "padding": [14, 0], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
                    {"type": "text", "id": "ExtendOpt30Time", "fill": "#8B8B90", "content": "+30 phút", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
                    {"type": "text", "id": "ExtendOpt30Price", "fill": "#6B6B70", "content": "75,000₫", "fontFamily": "Roboto", "fontSize": 12}
                  ]},
                  {"type": "frame", "id": "ExtendOpt60", "width": "fill_container", "fill": "#F59E0B20", "stroke": {"thickness": 2, "fill": "#F59E0B"}, "cornerRadius": 12, "padding": [14, 0], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
                    {"type": "text", "id": "ExtendOpt60Time", "fill": "#F59E0B", "content": "+1 giờ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
                    {"type": "text", "id": "ExtendOpt60Price", "fill": "#F59E0B", "content": "150,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
                  ]},
                  {"type": "frame", "id": "ExtendOpt120", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "padding": [14, 0], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [
                    {"type": "text", "id": "ExtendOpt120Time", "fill": "#8B8B90", "content": "+2 giờ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
                    {"type": "text", "id": "ExtendOpt120Price", "fill": "#6B6B70", "content": "280,000₫", "fontFamily": "Roboto", "fontSize": 12}
                  ]}
                ]}
              ]
            },
            {"type": "frame", "id": "ExtendDivider", "width": "fill_container", "height": 1, "fill": "#1F1F23"},
            {
              "type": "frame",
              "id": "ExtendSummary",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 8,
              "children": [
                {"type": "frame", "id": "ExtendSumRow1", "width": "fill_container", "justifyContent": "space_between", "children": [
                  {"type": "text", "id": "ExtendSumLabel1", "fill": "#8B8B90", "content": "Thời gian mới", "fontFamily": "Roboto", "fontSize": 13},
                  {"type": "text", "id": "ExtendSumValue1", "fill": "#FFFFFF", "content": "01:12:45", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
                ]},
                {"type": "frame", "id": "ExtendSumRow2", "width": "fill_container", "justifyContent": "space_between", "children": [
                  {"type": "text", "id": "ExtendSumLabel2", "fill": "#8B8B90", "content": "Phí gia hạn", "fontFamily": "Roboto", "fontSize": 13},
                  {"type": "text", "id": "ExtendSumValue2", "fill": "#F59E0B", "content": "+150,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
                ]},
                {"type": "frame", "id": "ExtendSumRow3", "width": "fill_container", "justifyContent": "space_between", "children": [
                  {"type": "text", "id": "ExtendSumLabel3", "fill": "#FFFFFF", "content": "Tổng bill hiện tại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
                  {"type": "text", "id": "ExtendSumValue3", "fill": "#FF5C00", "content": "560,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
                ]}
              ]
            },
            {"type": "frame", "id": "ExtendActions", "width": "fill_container", "gap": 12, "children": [
              {"type": "frame", "id": "ExtendCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ExtendCancelT", "fill": "#ADADB0", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
              {"type": "frame", "id": "ExtendConfirm", "width": "fill_container", "height": 48, "fill": "#F59E0B", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "ExtendConfirmIcon", "width": 18, "height": 18, "iconFontName": "timer", "iconFontFamily": "lucide", "fill": "#000"}, {"type": "text", "id": "ExtendConfirmT", "fill": "#000", "content": "Xác nhận gia hạn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}
            ]}
          ]
        }
      ]
    }
  ]
}
