{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "id": "POSSpaScreen",
      "name": "POS Spa Screen",
      "reusable": true,
      "width": 1920,
      "height": 1080,
      "fill": "$bg-page",
      "layout": "horizontal",
      "clip": true,
      "children": [
        {
          "type": "frame",
          "id": "SpaSidebar",
          "name": "sidebar",
          "width": 320,
          "height": "fill_container",
          "fill": "$bg-elevated",
          "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]},
          "layout": "vertical",
          "children": [
            {"type": "frame", "id": "SpaSideHeader", "width": "fill_container", "padding": 20, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "SpaLogo", "width": 44, "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}, {"type": "frame", "id": "SpaStoreInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaStoreName", "fill": "$text-primary", "content": "GoodGo Beauty Spa", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "SpaBranch", "fill": "$text-secondary", "content": "Chi nhánh Phú Mỹ Hưng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]},
            {
              "type": "frame",
              "id": "SpaAppointmentArea",
              "name": "appointmentArea",
              "width": "fill_container",
              "height": "fill_container",
              "layout": "vertical",
              "padding": 16,
              "gap": 12,
              "children": [
                {"type": "frame", "id": "SpaDatePicker", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 14], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaDateLeft", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaCalendarIcon", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaDateText", "fill": "$text-primary", "content": "Hôm nay, 05/02", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "icon_font", "id": "SpaDateChevron", "width": 18, "height": 18, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]},
                {"type": "text", "id": "SpaApptLabel", "fill": "$text-secondary", "content": "Lịch hẹn hôm nay", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
                {
                  "type": "frame",
                  "id": "SpaApptList",
                  "name": "appointmentList",
                  "width": "fill_container",
                  "height": "fill_container",
                  "layout": "vertical",
                  "gap": 10,
                  "children": [
                    {"type": "frame", "id": "SpaAppt1", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": 14, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "SpaAppt1Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt1Time", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "SpaAppt1TimeText", "fill": "#22C55E", "content": "10:00 - 11:30", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt1Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaAppt1StatusText", "fill": "#22C55E", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, {"type": "frame", "id": "SpaAppt1Customer", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt1Avatar", "width": 36, "height": 36, "fill": "#EC489930", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaAppt1Init", "fill": "#EC4899", "content": "TL", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaAppt1Name", "fill": "$text-primary", "content": "Trần Linh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaAppt1Service", "fill": "$text-secondary", "content": "Facial + Massage", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "SpaAppt1Staff", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAppt1StaffIcon", "width": 14, "height": 14, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaAppt1StaffName", "fill": "$text-tertiary", "content": "NV: Hồng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]},
                    {"type": "frame", "id": "SpaAppt2", "width": "fill_container", "fill": "#F59E0B15", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#F59E0B50"}, "padding": 14, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "SpaAppt2Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt2Time", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "SpaAppt2TimeText", "fill": "#F59E0B", "content": "11:30 - 12:30", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt2Status", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaAppt2StatusText", "fill": "#F59E0B", "content": "Chờ đến", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, {"type": "frame", "id": "SpaAppt2Customer", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt2Avatar", "width": 36, "height": 36, "fill": "#3B82F630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaAppt2Init", "fill": "#3B82F6", "content": "NH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaAppt2Name", "fill": "$text-primary", "content": "Nguyễn Hoa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaAppt2Service", "fill": "$text-secondary", "content": "Nail Art", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "SpaAppt2Staff", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAppt2StaffIcon", "width": 14, "height": 14, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaAppt2StaffName", "fill": "$text-tertiary", "content": "NV: Mai", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]},
                    {"type": "frame", "id": "SpaAppt3", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 14, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "SpaAppt3Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt3Time", "fill": "$bg-surface", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "SpaAppt3TimeText", "fill": "$text-secondary", "content": "14:00 - 15:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt3Status", "fill": "$bg-surface", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaAppt3StatusText", "fill": "$text-tertiary", "content": "Đã đặt", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, {"type": "frame", "id": "SpaAppt3Customer", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt3Avatar", "width": 36, "height": 36, "fill": "#8B5CF630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaAppt3Init", "fill": "#8B5CF6", "content": "PT", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt3Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaAppt3Name", "fill": "$text-primary", "content": "Phạm Thảo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaAppt3Service", "fill": "$text-secondary", "content": "Triệt lông", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "SpaAppt3Staff", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAppt3StaffIcon", "width": 14, "height": 14, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaAppt3StaffName", "fill": "$text-tertiary", "content": "NV: Lan", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]},
                    {"type": "frame", "id": "SpaAppt4", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 14, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "SpaAppt4Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt4Time", "fill": "$bg-surface", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "SpaAppt4TimeText", "fill": "$text-secondary", "content": "15:30 - 17:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt4Status", "fill": "$bg-surface", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaAppt4StatusText", "fill": "$text-tertiary", "content": "Đã đặt", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, {"type": "frame", "id": "SpaAppt4Customer", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt4Avatar", "width": 36, "height": 36, "fill": "#06B6D430", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaAppt4Init", "fill": "#06B6D4", "content": "LM", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt4Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaAppt4Name", "fill": "$text-primary", "content": "Lê My", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaAppt4Service", "fill": "$text-secondary", "content": "Full Body Massage", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "SpaAppt4Staff", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAppt4StaffIcon", "width": 14, "height": 14, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaAppt4StaffName", "fill": "$text-tertiary", "content": "NV: Hồng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}
                  ]
                },
                {"type": "frame", "id": "SpaAddApptBtn", "width": "fill_container", "height": 44, "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default", "style": "dashed"}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAddApptIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaAddApptText", "fill": "$text-secondary", "content": "Thêm lịch hẹn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "SpaMainContent",
          "name": "mainContent",
          "width": "fill_container",
          "height": "fill_container",
          "layout": "vertical",
          "children": [
            {"type": "frame", "id": "SpaHeader", "width": "fill_container", "height": 64, "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [0, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaHeaderCustomerInfo", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "SpaCustomerAvatar", "width": 44, "height": 44, "fill": "#EC489930", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaCustomerInit", "fill": "#EC4899", "content": "TL", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaCustomerDetails", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaCustomerName", "fill": "$text-primary", "content": "Trần Linh", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "frame", "id": "SpaCustomerPoints", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaPointsIcon", "width": 14, "height": 14, "iconFontName": "crown", "iconFontFamily": "lucide", "fill": "#F59E0B"}, {"type": "text", "id": "SpaPointsText", "fill": "#F59E0B", "content": "VIP Gold • 2,500 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}]}, {"type": "frame", "id": "SpaSearchBox", "width": 360, "height": 44, "fill": "$bg-surface", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 16], "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm dịch vụ, sản phẩm...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}]}, {"type": "frame", "id": "SpaHeaderRight", "gap": 16, "alignItems": "center", "children": [{"type": "frame", "id": "SpaDateTime", "layout": "vertical", "gap": 2, "alignItems": "flex_end", "children": [{"type": "text", "id": "SpaTime", "fill": "$text-primary", "content": "10:45", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "SpaDate", "fill": "$text-secondary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "frame", "id": "SpaUserAvatar", "width": 40, "height": 40, "fill": "#EC489930", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaUserInit", "fill": "#EC4899", "content": "H", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]}]},
            {"type": "frame", "id": "SpaCategoryBar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [12, 24], "gap": 12, "children": [{"type": "frame", "id": "SpaCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaCatFacial", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaCatFacialIcon", "width": 14, "height": 14, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaCatFacialText", "fill": "$text-secondary", "content": "Chăm sóc da", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaCatMassage", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatMassageText", "fill": "$text-secondary", "content": "Massage", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaCatNail", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatNailText", "fill": "$text-secondary", "content": "Nail", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaCatHair", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatHairText", "fill": "$text-secondary", "content": "Tóc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaCatProducts", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatProductsText", "fill": "$text-secondary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}]},
            {
              "type": "frame",
              "id": "SpaProductArea",
              "name": "productArea",
              "width": "fill_container",
              "height": "fill_container",
              "padding": 24,
              "gap": 20,
              "wrap": true,
              "alignContent": "flex_start",
              "children": [
                {"type": "frame", "id": "SpaProd1", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd1Img", "width": "fill_container", "height": 130, "fill": "#EC489918"}, {"type": "frame", "id": "SpaProd1Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd1Name", "fill": "$text-primary", "content": "Chăm sóc da mặt cao cấp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd1Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd1DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd1DurationText", "fill": "$text-tertiary", "content": "60 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd1Price", "fill": "$orange-primary", "content": "650,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]},
                {"type": "frame", "id": "SpaProd2", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd2Img", "width": "fill_container", "height": 130, "fill": "#8B5CF618"}, {"type": "frame", "id": "SpaProd2Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd2Name", "fill": "$text-primary", "content": "Massage body thư giãn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd2Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd2DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd2DurationText", "fill": "$text-tertiary", "content": "90 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd2Price", "fill": "$orange-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]},
                {"type": "frame", "id": "SpaProd3", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd3Img", "width": "fill_container", "height": 130, "fill": "#F59E0B18"}, {"type": "frame", "id": "SpaProd3Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd3Name", "fill": "$text-primary", "content": "Sơn gel cao cấp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd3Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd3DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd3DurationText", "fill": "$text-tertiary", "content": "45 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd3Price", "fill": "$orange-primary", "content": "180,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]},
                {"type": "frame", "id": "SpaProd4", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd4Img", "width": "fill_container", "height": 130, "fill": "#22C55E18"}, {"type": "frame", "id": "SpaProd4Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd4Name", "fill": "$text-primary", "content": "Triệt lông vĩnh viễn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd4Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd4DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd4DurationText", "fill": "$text-tertiary", "content": "30 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd4Price", "fill": "$orange-primary", "content": "350,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]},
                {"type": "frame", "id": "SpaProd5", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd5Img", "width": "fill_container", "height": 130, "fill": "#3B82F618"}, {"type": "frame", "id": "SpaProd5Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd5Name", "fill": "$text-primary", "content": "Uốn/Duỗi tóc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd5Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd5DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd5DurationText", "fill": "$text-tertiary", "content": "120 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd5Price", "fill": "$orange-primary", "content": "800,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]}
              ]
            },
            {"type": "frame", "id": "SpaBottomBar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "padding": [12, 24], "gap": 12, "children": [{"type": "frame", "id": "SpaQuickStaff", "height": 52, "fill": "#EC4899", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaQuickStaffIcon", "width": 20, "height": 20, "iconFontName": "user-check", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "SpaQuickStaffText", "fill": "$text-primary", "content": "Chọn NV", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaQuickHistory", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaQuickHistoryIcon", "width": 20, "height": 20, "iconFontName": "history", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaQuickHistoryText", "fill": "$text-secondary", "content": "Lịch sử", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaQuickPackage", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaQuickPackageIcon", "width": 20, "height": 20, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaQuickPackageText", "fill": "$text-secondary", "content": "Gói dịch vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaQuickCustomer", "width": 52, "height": 52, "fill": "#14B8A620", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#14B8A6"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaQuickCustomerIcon", "width": 22, "height": 22, "iconFontName": "user-search", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}]}
          ]
        },
        {
          "type": "frame",
          "id": "SpaOrderPanel",
          "name": "orderPanel",
          "width": 380,
          "height": "fill_container",
          "fill": "$bg-elevated",
          "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]},
          "layout": "vertical",
          "children": [
            {"type": "frame", "id": "SpaOrderHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrderInfo", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "SpaOrderTitle", "fill": "$text-primary", "content": "Hóa đơn - Trần Linh", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "SpaOrderSub", "fill": "$text-secondary", "content": "Lịch hẹn 10:00 - 11:30", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]}, {"type": "frame", "id": "SpaOrderMore", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaOrderMoreIcon", "width": 20, "height": 20, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}]},
            {
              "type": "frame",
              "id": "SpaOrderItems",
              "name": "orderItems",
              "width": "fill_container",
              "height": "fill_container",
              "layout": "vertical",
              "gap": 0,
              "children": [
                {"type": "frame", "id": "SpaOrdItem1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrdItem1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrdItem1Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaOrdItem1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaOrdItem1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaOrdItem1Name", "fill": "$text-primary", "content": "Chăm sóc da mặt cao cấp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaOrdItem1Staff", "fill": "$text-tertiary", "content": "NV: Hồng • 60 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "text", "id": "SpaOrdItem1Price", "fill": "$text-primary", "content": "650,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
                {"type": "frame", "id": "SpaOrdItem2", "width": "fill_container", "padding": [14, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrdItem2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrdItem2Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaOrdItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaOrdItem2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaOrdItem2Name", "fill": "$text-primary", "content": "Massage body thư giãn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaOrdItem2Staff", "fill": "$text-tertiary", "content": "NV: Hồng • 90 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "text", "id": "SpaOrdItem2Price", "fill": "$text-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}
              ]
            },
            {"type": "frame", "id": "SpaOrderSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 20, "gap": 12, "children": [{"type": "frame", "id": "SpaSummSubtotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SpaSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "SpaSubtotalValue", "fill": "$text-primary", "content": "1,100,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaSummPoints", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SpaPointsLabel", "fill": "$text-secondary", "content": "Dùng 500 điểm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "SpaPointsValue", "fill": "#22C55E", "content": "-50,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaSummDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, {"type": "frame", "id": "SpaSummTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SpaTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, {"type": "text", "id": "SpaTotalValue", "fill": "$orange-primary", "content": "1,050,000₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}, {"type": "frame", "id": "SpaSummEarn", "width": "fill_container", "justifyContent": "flex_end", "children": [{"type": "text", "id": "SpaEarnText", "fill": "#F59E0B", "content": "+105 điểm tích lũy", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]},
            {"type": "frame", "id": "SpaPaymentBtn", "width": "fill_container", "height": 64, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaPaymentIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "SpaPaymentText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 18, "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"}
  }
}
