{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "id": "AppointmentBookDialog",
      "name": "Dialog/Appointment Book",
      "reusable": true,
      "width": 1440,
      "height": 900,
      "fill": "#0A0A0B80",
      "justifyContent": "center",
      "alignItems": "center",
      "children": [
        {
          "type": "frame",
          "id": "AppointmentModal",
          "width": 520,
          "fill": "#111113",
          "cornerRadius": 24,
          "stroke": {"thickness": 1, "fill": "#1F1F23"},
          "layout": "vertical",
          "gap": 20,
          "padding": 28,
          "children": [
            {
              "type": "frame",
              "id": "AppHeader",
              "width": "fill_container",
              "justifyContent": "space_between",
              "alignItems": "center",
              "children": [
                {"type": "frame", "id": "AppHeaderLeft", "gap": 12, "alignItems": "center", "children": [
                  {"type": "frame", "id": "AppIcon", "width": 44, "height": 44, "fill": "#22C55E1A", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [
                    {"type": "icon_font", "id": "AppIconI", "width": 22, "height": 22, "iconFontName": "calendar-plus", "iconFontFamily": "lucide", "fill": "#22C55E"}
                  ]},
                  {"type": "frame", "id": "AppTitleBlock", "layout": "vertical", "gap": 2, "children": [
                    {"type": "text", "id": "AppTitle", "fill": "#FFFFFF", "content": "Đặt lịch hẹn", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
                    {"type": "text", "id": "AppDesc", "fill": "#8B8B90", "content": "Massage toàn thân 90'", "fontFamily": "Roboto", "fontSize": 12}
                  ]}
                ]},
                {"type": "frame", "id": "AppClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [
                  {"type": "icon_font", "id": "AppCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"}
                ]}
              ]
            },
            {
              "type": "frame",
              "id": "AppDatePicker",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 12,
              "children": [
                {"type": "text", "id": "AppDateLabel", "fill": "#8B8B90", "content": "Chọn ngày", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
                {"type": "frame", "id": "AppDates", "width": "fill_container", "gap": 8, "children": [
                  {"type": "frame", "id": "AppDate1", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [
                    {"type": "text", "id": "AppDate1Day", "fill": "#6B6B70", "content": "T2", "fontFamily": "Roboto", "fontSize": 11},
                    {"type": "text", "id": "AppDate1Num", "fill": "#8B8B90", "content": "10", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
                  ]},
                  {"type": "frame", "id": "AppDate2", "width": "fill_container", "fill": "#22C55E20", "stroke": {"thickness": 2, "fill": "#22C55E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [
                    {"type": "text", "id": "AppDate2Day", "fill": "#22C55E", "content": "T3", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"},
                    {"type": "text", "id": "AppDate2Num", "fill": "#22C55E", "content": "11", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}
                  ]},
                  {"type": "frame", "id": "AppDate3", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [
                    {"type": "text", "id": "AppDate3Day", "fill": "#6B6B70", "content": "T4", "fontFamily": "Roboto", "fontSize": 11},
                    {"type": "text", "id": "AppDate3Num", "fill": "#8B8B90", "content": "12", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
                  ]},
                  {"type": "frame", "id": "AppDate4", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [
                    {"type": "text", "id": "AppDate4Day", "fill": "#6B6B70", "content": "T5", "fontFamily": "Roboto", "fontSize": 11},
                    {"type": "text", "id": "AppDate4Num", "fill": "#8B8B90", "content": "13", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
                  ]},
                  {"type": "frame", "id": "AppDate5", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [
                    {"type": "text", "id": "AppDate5Day", "fill": "#6B6B70", "content": "T6", "fontFamily": "Roboto", "fontSize": 11},
                    {"type": "text", "id": "AppDate5Num", "fill": "#8B8B90", "content": "14", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
                  ]},
                  {"type": "frame", "id": "AppDate6", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [
                    {"type": "text", "id": "AppDate6Day", "fill": "#EC4899", "content": "T7", "fontFamily": "Roboto", "fontSize": 11},
                    {"type": "text", "id": "AppDate6Num", "fill": "#8B8B90", "content": "15", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
                  ]},
                  {"type": "frame", "id": "AppDate7", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [
                    {"type": "text", "id": "AppDate7Day", "fill": "#EF4444", "content": "CN", "fontFamily": "Roboto", "fontSize": 11},
                    {"type": "text", "id": "AppDate7Num", "fill": "#8B8B90", "content": "16", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
                  ]}
                ]}
              ]
            },
            {
              "type": "frame",
              "id": "AppTimePicker",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 12,
              "children": [
                {"type": "frame", "id": "AppTimeHeader", "width": "fill_container", "justifyContent": "space_between", "children": [
                  {"type": "text", "id": "AppTimeLabel", "fill": "#8B8B90", "content": "Chọn giờ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
                  {"type": "text", "id": "AppTimeAvail", "fill": "#22C55E", "content": "6 slot trống", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}
                ]},
                {"type": "frame", "id": "AppTimes", "width": "fill_container", "gap": 8, "children": [
                  {"type": "frame", "id": "AppTime1", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTime1T", "fill": "#8B8B90", "content": "09:00", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
                  {"type": "frame", "id": "AppTime2", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTime2T", "fill": "#8B8B90", "content": "10:30", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
                  {"type": "frame", "id": "AppTime3", "fill": "#22C55E20", "stroke": {"thickness": 2, "fill": "#22C55E"}, "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTime3T", "fill": "#22C55E", "content": "14:00", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]},
                  {"type": "frame", "id": "AppTime4", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTime4T", "fill": "#8B8B90", "content": "15:30", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}
                ]},
                {"type": "frame", "id": "AppTimes2", "width": "fill_container", "gap": 8, "children": [
                  {"type": "frame", "id": "AppTime5", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTime5T", "fill": "#8B8B90", "content": "17:00", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
                  {"type": "frame", "id": "AppTime6", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTime6T", "fill": "#8B8B90", "content": "19:00", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
                  {"type": "frame", "id": "AppTimeDisabled", "fill": "#1A1A1D40", "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTimeDisabledT", "fill": "#3A3A3E", "content": "20:30", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}
                ]}
              ]
            },
            {
              "type": "frame",
              "id": "AppStaff",
              "width": "fill_container",
              "layout": "vertical",
              "gap": 10,
              "children": [
                {"type": "text", "id": "AppStaffLabel", "fill": "#8B8B90", "content": "Nhân viên phục vụ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"},
                {"type": "frame", "id": "AppStaffSelected", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#22C55E"}, "cornerRadius": 12, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [
                  {"type": "frame", "id": "AppStaffLeft", "gap": 10, "alignItems": "center", "children": [
                    {"type": "frame", "id": "AppStaffAvatar", "width": 36, "height": 36, "fill": "#22C55E30", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "AppStaffInitial", "fill": "#22C55E", "content": "H", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
                    {"type": "frame", "id": "AppStaffInfo", "layout": "vertical", "gap": 2, "children": [
                      {"type": "text", "id": "AppStaffName", "fill": "#FFFFFF", "content": "Hương", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
                      {"type": "frame", "id": "AppStaffRating", "gap": 4, "alignItems": "center", "children": [
                        {"type": "icon_font", "id": "AppStaffStar", "width": 12, "height": 12, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"},
                        {"type": "text", "id": "AppStaffRatingT", "fill": "#8B8B90", "content": "4.9 • 5 năm KN", "fontFamily": "Roboto", "fontSize": 11}
                      ]}
                    ]}
                  ]},
                  {"type": "icon_font", "id": "AppStaffCheck", "width": 20, "height": 20, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#22C55E"}
                ]}
              ]
            },
            {"type": "frame", "id": "AppDivider", "width": "fill_container", "height": 1, "fill": "#1F1F23"},
            {
              "type": "frame",
              "id": "AppSummary",
              "width": "fill_container",
              "fill": "#22C55E10",
              "cornerRadius": 12,
              "padding": 14,
              "gap": 12,
              "alignItems": "center",
              "children": [
                {"type": "icon_font", "id": "AppSumIcon", "width": 20, "height": 20, "iconFontName": "calendar-check", "iconFontFamily": "lucide", "fill": "#22C55E"},
                {"type": "text", "id": "AppSumText", "fill": "#22C55E", "content": "T3, 11/02 lúc 14:00 • NV Hương", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
              ]
            },
            {"type": "frame", "id": "AppActions", "width": "fill_container", "gap": 12, "children": [
              {"type": "frame", "id": "AppCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "AppCancelT", "fill": "#ADADB0", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
              {"type": "frame", "id": "AppConfirm", "width": "fill_container", "height": 48, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "AppConfirmIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFF"}, {"type": "text", "id": "AppConfirmT", "fill": "#FFF", "content": "Xác nhận đặt lịch", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}
            ]}
          ]
        }
      ]
    }
  ]
}
