{"id":3435,"date":"2026-06-03T07:22:57","date_gmt":"2026-06-03T07:22:57","guid":{"rendered":"https:\/\/prelive.ceosuite.com\/workwise\/booking\/"},"modified":"2026-07-06T01:32:48","modified_gmt":"2026-07-06T01:32:48","slug":"booking","status":"publish","type":"page","link":"https:\/\/prelive.ceosuite.com\/workwise\/zh-hk\/booking\/","title":{"rendered":"\u9810\u8a02"},"content":{"rendered":"<div class=\"font-tertiary\">\n    <div class=\"container\">\n        <div class=\"container-sm\">\n            <div class=\"max-w-[1050px] mx-auto\">\n                <div class=\"overflow-x-auto py-[26px] flex justify-between gap-5 relative booking-steps\">\n                    <div\n                        class=\"relative after:absolute after:w-full after:-right-full after:h-[2px] after:bg-gainsboro after:top-1\/2 after:-translate-y-1\/2\">\n                        <button data-step=\"1\" class=\"active bg-white z-[1] inline-flex items-center heading6 font-semibold leading-[normal] active:text-blue text-grey-dark1 [&#038;.active_span]:text-blue group relative\n                            \">\n                            <span\n                                class=\" inline-flex mr-4 justify-center items-center lg:min-w-[50px] md:min-w-10 min-w-[30px] aspect-square rounded-full border-2 bg-ghost-white1 group-active:bg-white border-ghost-white1 group-[.active]:border-blue \">1<\/span>\n                            <span class=\"inline-block lg:pr-5 pr-3 whitespace-nowrap\">\u60a8\u7684\u7a7a\u9593<\/span>\n                        <\/button>\n                    <\/div>\n                    <div\n                        class=\"relative after:absolute after:w-full after:-right-full after:h-[2px] after:bg-gainsboro after:top-1\/2 after:-translate-y-1\/2\">\n                        <button data-step=\"2\"\n                            class=\"lg:pl-5 pl-3 bg-white z-[1] inline-flex items-center heading6 font-semibold leading-[normal] active:text-blue text-grey-dark1 [&#038;.active_span]:text-blue group relative\">\n                            <span\n                                class=\"inline-flex mr-4 justify-center items-center lg:min-w-[50px] md:min-w-10 min-w-[30px] aspect-square rounded-full border-2 bg-ghost-white1 border-ghost-white1 group-active:bg-white group-[.active]:border-blue \">2<\/span>\n                            <span class=\"inline-block lg:pr-5 pr-3 whitespace-nowrap\">\u65e5\u671f\u8207\u6642\u9593<\/span>\n                        <\/button>\n                    <\/div>\n                    <div>\n                        <button data-step=\"3\"\n                            class=\"lg:pl-5 pl-3 bg-white z-[1] inline-flex items-center heading6 font-semibold leading-[normal] active:text-blue text-grey-dark1 [&#038;.active_span]:text-blue group relative\">\n                            <span\n                                class=\"inline-flex mr-4 justify-center items-center lg:min-w-[50px] md:min-w-10 min-w-[30px] aspect-square rounded-full border-2 bg-ghost-white1 border-ghost-white1 group-active:bg-white group-[.active]:border-blue \">3<\/span>\n                            <span class=\"inline-block lg:pr-5 pr-3 whitespace-nowrap\">\u67e5\u770b<\/span>\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n<div block-name=\"workwise-booking-step\" class=\"workwise-booking-step font-tertiary bg-ghost-white1\">\n    <div class=\"container\">\n        <div class=\"container-sm\">\n            <div class=\"py-[60px]\">\n                <div class=\"flex items-start xl:flex-row flex-col\">\n                    <div class=\"w-full 6xl:max-w-[65.2%] xl:max-w-[68%] 5xl:pr-10 2xl:pr-7 xl:pr-6 xl:mb-0 mb-10\">\n                        <div\n                            class=\"bg-white 2xl:py-10 py-6 5xl:px-10 2xl:px-7 px-6 2xl:rounded-[40px] rounded-[20px] shadow-[0_1px_3px_0_rgba(0,0,0,0.10)]\">\n                            <!-- booking step1 -->\n                            <div data-step=\"1\" class=\"booking-step-content active\" id=\"booking-step1\">\n                                <div class=\"xl:pb-10 pb-5 xl:mb-10 mb-5 relative\n                                after:absolute after:bottom-0 5xl:after:-left-10 2xl:after:-left-7 after:-left-6\n                                5xl:after:w-[calc(100%_+_80px)] 2xl:after:w-[calc(100%_+_56px)] after:w-[calc(100%_+_48px)] \n                                after:h-[1px] after:content-normal after:bg-stroke\">\n                                    <span\n                                        class=\"text-body-small font-bold text-turquoise leading-[normal] inline-block\">\u7b2c1\u6b65\uff08\u51713\u6b65)<\/span>\n                                    <h5 class=\"my-2 heading5-large font-semibold text-blue leading-[normal]\">\u60a8\u9700\u8981\u4ec0\u9ebc\u6a23\u7684\u7a7a\u9593\uff1f<\/h5>\n                                    <div class=\"text-body-medium font-medium text-grey-dark leading-[normal]\">\u5373\u6642\u9810\u7d04\uff0d\u7121\u9700\u5be9\u6279\uff0c\u7121\u9700\u7b49\u5f85\u3002<\/div>\n                                <\/div>\n                                <div>\n                                    <span\n                                        class=\"text-body-small font-medium leading-[normal] text-black mb-[10px] inline-block\">\u7a7a\u9593<\/span>\n                                    <div class=\"grid lg:grid-cols-3 sm:grid-cols-2 gap-5 mb-10\">\n\n                                                                                                                                    <div class=\"group relative cursor-pointer\">\n                                                    <input\n                                                        id=\"%e5%85%b1%e5%90%8c%e5%b7%a5%e4%bd%9c%e7%a9%ba%e9%96%93\"\n                                                        type=\"radio\"\n                                                        name=\"space-type\"\n                                                        value=\"\u5171\u540c\u5de5\u4f5c\u7a7a\u9593\"\n                                                        data-price=\"39\"\n                                                        data-sku=\"ww-coworking\"\n                                                        class=\"peer hidden\">\n                                                    <label for=\"%e5%85%b1%e5%90%8c%e5%b7%a5%e4%bd%9c%e7%a9%ba%e9%96%93\" class=\"cursor-pointer block h-full w-full border border-stroke bg-white rounded-[16px] peer-checked:border-[1.5px] peer-checked:border-blue\n                                                    shadow-[0_1px_3px_0_rgba(0,0,0,0.10)]\n                                                    group-hover:shadow-[0_10px_15px_-3px_rgba(0,0,0,0.10),0_4px_6px_-4px_rgba(0,0,0,0.10)] transition-all duration-300\n                                                    overflow-hidden\">\n                                                        <img decoding=\"async\"\n                                                            src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/uploads\/sites\/2\/2026\/06\/Image-Container.png\"\n                                                            alt=\"\u5171\u540c\u5de5\u4f5c\u7a7a\u9593\"\n                                                            class=\"aspect-[403\/256] object-cover w-full\">\n                                                        <div class=\"5xl:p-[26px] 2xl:p-[18px] p-4\">\n                                                            <h6 class=\"heading6 font-semibold leading-[normal] text-blue mb-[2px]\">\n                                                                \u5171\u540c\u5de5\u4f5c\u7a7a\u9593                                                            <\/h6>\n                                                                                                                            <div class=\"text-body-extra-small font-normal leading-[160%] text-grey-dark mb-4 pb-4 border-b border-b-stroke\">\n                                                                    \u5c08\u5fc3\u5de5\u4f5c\u6216\u5354\u4f5c\u4ea4\u6d41                                                                <\/div>\n                                                                                                                        <div>\n                                                                <span class=\"text-body-extra-small font-semibold leading-[normal] text-turquoise inline-block \">\u7531\u4ee5\u4e0b\u50f9\u683c\u8d77<\/span>\n                                                                <h5 class=\"mt-[6px] heading5 font-semibold leading-[normal] text-blue\">\n                                                                    HKD 39\/\u5c0f\u6642                                                                <\/h5>\n                                                            <\/div>\n                                                        <\/div>\n                                                    <\/label>\n                                                    <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/booking\/charm_tick.svg\"\n                                                        class=\"absolute top-[10px] right-[10px] opacity-0 peer-checked:opacity-100\" \/>\n                                                <\/div>\n                                                                                            <div class=\"group relative cursor-pointer\">\n                                                    <input\n                                                        id=\"%e7%a7%81%e4%ba%ba%e8%be%a6%e5%85%ac%e5%ae%a4\"\n                                                        type=\"radio\"\n                                                        name=\"space-type\"\n                                                        value=\"\u79c1\u4eba\u8fa6\u516c\u5ba4\"\n                                                        data-price=\"185\"\n                                                        data-sku=\"ww-private-office\"\n                                                        class=\"peer hidden\">\n                                                    <label for=\"%e7%a7%81%e4%ba%ba%e8%be%a6%e5%85%ac%e5%ae%a4\" class=\"cursor-pointer block h-full w-full border border-stroke bg-white rounded-[16px] peer-checked:border-[1.5px] peer-checked:border-blue\n                                                    shadow-[0_1px_3px_0_rgba(0,0,0,0.10)]\n                                                    group-hover:shadow-[0_10px_15px_-3px_rgba(0,0,0,0.10),0_4px_6px_-4px_rgba(0,0,0,0.10)] transition-all duration-300\n                                                    overflow-hidden\">\n                                                        <img decoding=\"async\"\n                                                            src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/uploads\/sites\/2\/2026\/06\/317934db039e49346e17ea8c732f669b033f2b24-1024x576.png\"\n                                                            alt=\"\u79c1\u4eba\u8fa6\u516c\u5ba4\"\n                                                            class=\"aspect-[403\/256] object-cover w-full\">\n                                                        <div class=\"5xl:p-[26px] 2xl:p-[18px] p-4\">\n                                                            <h6 class=\"heading6 font-semibold leading-[normal] text-blue mb-[2px]\">\n                                                                \u79c1\u4eba\u8fa6\u516c\u5ba4                                                            <\/h6>\n                                                                                                                            <div class=\"text-body-extra-small font-normal leading-[160%] text-grey-dark mb-4 pb-4 border-b border-b-stroke\">\n                                                                    \u9069\u5408\u6210\u9577\u578b\u5718\u968a                                                                <\/div>\n                                                                                                                        <div>\n                                                                <span class=\"text-body-extra-small font-semibold leading-[normal] text-turquoise inline-block \">\u7531\u4ee5\u4e0b\u50f9\u683c\u8d77<\/span>\n                                                                <h5 class=\"mt-[6px] heading5 font-semibold leading-[normal] text-blue\">\n                                                                    HKD 185\/\u5c0f\u6642                                                                <\/h5>\n                                                            <\/div>\n                                                        <\/div>\n                                                    <\/label>\n                                                    <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/booking\/charm_tick.svg\"\n                                                        class=\"absolute top-[10px] right-[10px] opacity-0 peer-checked:opacity-100\" \/>\n                                                <\/div>\n                                                                                            <div class=\"group relative cursor-pointer\">\n                                                    <input\n                                                        id=\"%e6%9c%83%e8%ad%b0%e5%ae%a4\"\n                                                        type=\"radio\"\n                                                        name=\"space-type\"\n                                                        value=\"\u6703\u8b70\u5ba4\"\n                                                        data-price=\"400\"\n                                                        data-sku=\"ww-meeting-room\"\n                                                        class=\"peer hidden\">\n                                                    <label for=\"%e6%9c%83%e8%ad%b0%e5%ae%a4\" class=\"cursor-pointer block h-full w-full border border-stroke bg-white rounded-[16px] peer-checked:border-[1.5px] peer-checked:border-blue\n                                                    shadow-[0_1px_3px_0_rgba(0,0,0,0.10)]\n                                                    group-hover:shadow-[0_10px_15px_-3px_rgba(0,0,0,0.10),0_4px_6px_-4px_rgba(0,0,0,0.10)] transition-all duration-300\n                                                    overflow-hidden\">\n                                                        <img decoding=\"async\"\n                                                            src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/uploads\/sites\/2\/2026\/06\/f1b8b3e52c9520d9c3f45f2235cfec4dac682e70-1024x576.jpg\"\n                                                            alt=\"\u6703\u8b70\u5ba4\"\n                                                            class=\"aspect-[403\/256] object-cover w-full\">\n                                                        <div class=\"5xl:p-[26px] 2xl:p-[18px] p-4\">\n                                                            <h6 class=\"heading6 font-semibold leading-[normal] text-blue mb-[2px]\">\n                                                                \u6703\u8b70\u5ba4                                                            <\/h6>\n                                                                                                                            <div class=\"text-body-extra-small font-normal leading-[160%] text-grey-dark mb-4 pb-4 border-b border-b-stroke\">\n                                                                    \u96a8\u6642\u6eff\u8db3\u60a8\u7684\u9700\u6c42                                                                <\/div>\n                                                                                                                        <div>\n                                                                <span class=\"text-body-extra-small font-semibold leading-[normal] text-turquoise inline-block \">\u7531\u4ee5\u4e0b\u50f9\u683c\u8d77<\/span>\n                                                                <h5 class=\"mt-[6px] heading5 font-semibold leading-[normal] text-blue\">\n                                                                    HKD 400\/\u5c0f\u6642                                                                <\/h5>\n                                                            <\/div>\n                                                        <\/div>\n                                                    <\/label>\n                                                    <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/booking\/charm_tick.svg\"\n                                                        class=\"absolute top-[10px] right-[10px] opacity-0 peer-checked:opacity-100\" \/>\n                                                <\/div>\n                                                                                    \n                                    <\/div>\n                                <\/div>\n                                <div class=\" xl:pb-10 pb-5 border-b border-b-stroke\">\n                                    <span\n                                        class=\"text-body-small font-medium leading-[normal] text-black mb-[10px] inline-block\">\u5730\u9ede<\/span>\n                                    <div class=\"flex flex-wrap loc-pills\">\n                                        <div class=\"text-body-small font-bold leading-[normal] relative mr-[10px] mb-[10px] last:mr-0\"><input id=\"loc-central-hong-kong\" type=\"radio\" name=\"location\" class=\"peer hidden\" value=\"Work Wise \u2013 Hong Kong\" data-slug=\"central-hong-kong\" data-spaces=\"[&quot;ww-meeting-room&quot;,&quot;ww-private-office&quot;,&quot;ww-coworking&quot;]\" checked><label for=\"loc-central-hong-kong\" class=\"cursor-pointer text-grey-dark peer-checked:text-white block xl:px-8 px-5 xl:py-4 py-3 border bg-white rounded-[10px] border-grey-dark peer-checked:bg-blue peer-checked:border-blue\">Work Wise \u2013 Hong Kong<\/label><\/div><div class=\"text-body-small font-bold leading-[normal] relative mr-[10px] mb-[10px] last:mr-0\"><input id=\"loc-nan-fung-tower\" type=\"radio\" name=\"location\" class=\"peer hidden\" value=\"Nan Fung Tower\" data-slug=\"nan-fung-tower\" data-spaces=\"[&quot;ww-coworking&quot;]\" ><label for=\"loc-nan-fung-tower\" class=\"cursor-pointer text-grey-dark peer-checked:text-white block xl:px-8 px-5 xl:py-4 py-3 border bg-white rounded-[10px] border-grey-dark peer-checked:bg-blue peer-checked:border-blue\">Nan Fung Tower<\/label><\/div>                                    <\/div>\n                                <\/div>\n                                <div class=\"flex justify-end mt-[30px]\">\n                                    <button data-step=\"1\"\n                                        class=\"group relative booking-step-next-btn text-body-extra-small font-medium leading-[normal] text-white px-5 md:py-4 py-3 bg-blue rounded-[10px] inline-flex items-center\">\n                                        <span class=\"inline-block transition-all duration-300\">\u4e0b\u4e00\u6b65<\/span>\n                                        <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/wise\/right-arrow-white.svg\"\n                                            alt=\"right\" class=\"ml-3 opacity-0\">\n                                        <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/wise\/right-arrow-white.svg\"\n                                            alt=\"right\" class=\"absolute sm:right-5 right-4 top-1\/2\n                    -translate-y-1\/2 sm:group-hover:right-[16px] group-hover:right-3 transition-all duration-300\">\n                                    <\/button>\n                                <\/div>\n                            <\/div>\n                            <!-- booking step1 -->\n                            <!-- booking step2 -->\n                            <div data-step=\"2\" class=\"booking-step-content\" data-step=\"2\" id=\"booking-step2\">\n                                <div class=\"xl:pb-10 pb-5 xl:mb-10 mb-5 relative\n                                after:absolute after:bottom-0 5xl:after:-left-10 2xl:after:-left-7 after:-left-6\n                                5xl:after:w-[calc(100%_+_80px)] 2xl:after:w-[calc(100%_+_56px)] after:w-[calc(100%_+_48px)] \n                                after:h-[1px] after:content-normal after:bg-stroke\">\n                                    <span\n                                        class=\"text-body-small font-bold text-turquoise leading-[normal] inline-block\">\u7b2c 2 \u6b65\uff08\u5171 3 \u6b65\uff09<\/span>\n                                    <h5 class=\"my-2 heading5-large font-semibold text-blue leading-[normal]\">\u4f60\u60f3\u4ec0\u9ebc\u6642\u5019\u9032\u5834\uff1f<\/h5>\n                                    <div class=\"text-body-medium font-medium text-grey-dark leading-[normal]\">\n                                        \u9078\u64c7\u4e00\u5929\u3001\u591a\u5929\u3001\u6574\u9031\u6216\u6574\u500b\u6708                                    <\/div>\n                                <\/div>\n                                <div class=\"xl:pb-10 pb-5\">\n                                    <div id=\"availText\" class=\"px-[26px] py-4 border-2 border-turquoise rounded-lg bg-light-green\n                                    text-body-extra-small font-medium text-grey-dark \n                                    [&#038;_strong]:font-bold [&#038;_strong]:text-blue [&#038;_b]:font-bold [&#038;_b]:text-blue\">\n                                        <b>\u4eca\u65e5\u65bc\u4e2d\u74b0\u6709 8 \u500b\u7a7a\u9593\u53ef\u7528<\/b> \u525b\u525b\u5df2\u66f4\u65b0\u3002                                    <\/div>\n                                <\/div>\n                                <div>\n                                    <span\n                                        class=\"text-body-small font-medium text-black leading-[normal] mb-[10px] block\">\u65e5\u671f<\/span>\n                                    <!-- calendar -->\n                                    <div>\n                                        <div class=\"flex items-center justify-between mb-[10px] calendar-buttons\">\n                                            <button class=\"cal-arrow w-10 min-w-10 aspect-square rounded-full border border-blue\n                                            bg-white hover:bg-blue flex justify-center items-center prev-button\">\n                                                <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/booking\/calendar-prev.svg\"\n                                                    alt=\"prev\">\n                                            <\/button>\n                                            <h3 id=\"calMonthLabel\"\n                                                class=\"heading6 font-semibold text-blue leading-[normal]\"><\/h3>\n                                            <button class=\"cal-arrow w-10 min-w-10 aspect-square rounded-full border border-blue\n                                            bg-white hover:bg-blue flex justify-center items-center next-button\">\n                                                <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/booking\/calendar-next.svg\"\n                                                    alt=\"prev\">\n                                            <\/button>\n                                        <\/div>\n                                        <table class=\"cal-table w-full border-separate border-spacing-1\">\n                                            <thead>\n                                                <tr>\n                                                    <th>\u65e5<\/th>\n                                                    <th>\u4e00<\/th>\n                                                    <th>\u4e8c<\/th>\n                                                    <th>\u4e09<\/th>\n                                                    <th>\u56db<\/th>\n                                                    <th>\u4e94<\/th>\n                                                    <th>\u516d<\/th>\n                                                <\/tr>\n                                            <\/thead>\n                                            <tbody id=\"calBody\"><\/tbody>\n                                        <\/table>\n\n                                        <div\n                                            class=\"mt-[10px] px-[26px] py-4 border-2 border-turquoise rounded-lg bg-light-green\n                                    text-body-extra-small font-medium text-grey-dark \n                                    [&#038;_strong]:font-bold [&#038;_strong]:text-blue [&#038;_b]:font-bold [&#038;_b]:text-blue flex items-center\">\n                                            <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/booking\/date-green.svg\"\n                                                alt=\"prev\" class=\"mr-[10px]\">\n                                            <div class=\"date-summary\" id=\"dateSummary\">\u672a\u9078\u64c7\u65e5\u671f<\/div>\n                                        <\/div>\n                                        <!-- Duration -->\n                                        <div class=\"xl:mt-10 mt-5\">\n                                            <span\n                                                class=\"field-label text-body-small font-medium text-black leading-[normal] block mb-[10px]\">\u7232\u671f<\/span>\n                                            <div class=\"dur-row duration-list\">\n                                                <button data-duration=\"Hourly\" data-text=\"\u6bcf\u5c0f\u6642\" class=\"dur-btn\"\n                                                    id=\"dur-Hourly\">\u6bcf\u5c0f\u6642<\/button>\n                                                <button data-duration=\"Full Day\" data-text=\"\u5168\u5929\" class=\"dur-btn\" id=\"dur-FullDay\">\u5168\u5929<\/button>\n                                                <button data-duration=\"Weekly\" data-text=\"\u6bcf\u5468\" class=\"dur-btn\"\n                                                    id=\"dur-Weekly\">\u6bcf\u5468<\/button>\n                                                <button data-duration=\"Monthly\" data-text=\"\u6bcf\u6708\" Monthly class=\"dur-btn\"\n                                                    id=\"dur-Monthly\">\u6bcf\u6708<\/button>\n                                            <\/div>\n                                        <\/div>\n\n                                        <!-- Hour picker (Hourly only) -->\n                                        <div id=\"hourPickerWrap\" class=\"xl:mt-10 mt-5\" style=\"display:none\">\n                                            <div\n                                                class=\" text-body-small font-medium text-black leading-[normal] block mb-[10px]\">\n                                                <span class=\"field-label inline-block mr-[10px]\">\u8acb\u9078\u64c7\u6642\u9593<\/span>\n                                                <span class=\"text-turquoise font-medium leading-[normal]\">(\u901a\u884c\u6642\u9593\u70ba\u4e0a\u5348 7 \u9ede\u81f3\u665a\u4e0a 11 \u9ede)<\/span>\n                                            <\/div>\n                                            <div class=\"hour-grid grid md:grid-cols-4 xs:grid-cols-2 gap-[10px] text-body-small font-bold text-grey-dark leading-[normal]\"\n                                                id=\"hourGrid\"><\/div>\n\n\n                                            <div class=\"time-summary\" id=\"timeSummary\" style=\"display:none\">\n                                                <div\n                                                    class=\"w-full mt-[10px] px-[26px] py-4 border-2 border-turquoise rounded-lg bg-light-green\n                                    text-body-extra-small font-medium text-grey-dark \n                                    [&#038;_strong]:font-bold [&#038;_strong]:text-blue [&#038;_b]:font-bold [&#038;_b]:text-blue flex items-center\">\n                                                    <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/booking\/time-green.svg\"\n                                                        alt=\"prev\" class=\"mr-[10px]\">\n                                                    <span\n                                                        class=\"ts-label font-bold text-blue text-body-extra-small mr-[10px]\">\u5df2\u9078\u6642\u6bb5\uff1a<\/span>\n                                                    <span id=\"tsText\">\u2014<\/span>\n                                                <\/div>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <!-- calendar -->\n                                <\/div>\n                                <div class=\"flex justify-between xl:mt-10 mt-5 xl:pt-10 pt-5 border-t border-t-stroke\">\n                                    <button data-step=\"2\"\n                                        class=\"group relative booking-step-prev-btn text-body-extra-small font-medium leading-[normal] text-white px-5 md:py-4 py-3 bg-blue rounded-[10px] inline-flex items-center\">\n                                        <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/booking\/left-arrow-white.svg\"\n                                            alt=\"right\" class=\"ml-3 opacity-0\">\n                                        <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/booking\/left-arrow-white.svg\"\n                                            alt=\"right\" class=\"absolute sm:left-5 left-4 top-1\/2\n                    -translate-y-1\/2 sm:group-hover:left-[16px] group-hover:left-3 transition-all duration-300\">\n                                        <span class=\"transition-all duration-300\">\u8fd4\u56de<\/span>\n                                    <\/button>\n                                    <button data-step=\"2\"\n                                        class=\"group relative booking-step-next-btn text-body-extra-small font-medium leading-[normal] text-white px-5 md:py-4 py-3 bg-blue rounded-[10px] inline-flex items-center\">\n                                        <span class=\"inline-block transition-all duration-300\">\u4e0b\u4e00\u6b65<\/span>\n                                        <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/wise\/right-arrow-white.svg\"\n                                            alt=\"right\" class=\"ml-3 opacity-0\">\n                                        <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/wise\/right-arrow-white.svg\"\n                                            alt=\"right\" class=\"absolute sm:right-5 right-4 top-1\/2\n                    -translate-y-1\/2 sm:group-hover:right-[16px] group-hover:right-3 transition-all duration-300\">\n                                    <\/button>\n                                <\/div>\n                            <\/div>\n                            <!-- booking step2 -->\n                            <!-- booking step3 -->\n                            <div data-step=\"3\" class=\"booking-step-content\" data-step=\"3\" id=\"booking-step3\">\n                                <div class=\"xl:pb-10 pb-5 xl:mb-10 mb-5 relative\n                                after:absolute after:bottom-0 5xl:after:-left-10 2xl:after:-left-7 after:-left-6\n                                5xl:after:w-[calc(100%_+_80px)] 2xl:after:w-[calc(100%_+_56px)] after:w-[calc(100%_+_48px)] \n                                after:h-[1px] after:content-normal after:bg-stroke\">\n                                    <span\n                                        class=\"text-body-small font-bold text-turquoise leading-[normal] inline-block\">\u7b2c 3 \u6b65\uff08\u5171 3 \u6b65\uff09<\/span>\n                                    <h5 class=\"my-2 heading5-large font-semibold text-blue leading-[normal]\">\u5feb\u5b8c\u6210\u4e86<\/h5>\n                                    <div class=\"text-body-medium font-medium text-grey-dark leading-[normal]\">\n                                        \u53ea\u9700\u586b\u5beb\u4f60\u7684\u8cc7\u6599\u2014\u201430 \u79d2\u5b8c\u6210\uff0c\u4f60\u7684\u7a7a\u9593\u5df2\u70ba\u4f60\u4fdd\u7559                                    <\/div>\n                                <\/div>\n\n                                <!-- Step 3 Form -->\n                                <div class=\"xl:pb-10 pb-5\">\n\n                                    <!-- Name row -->\n                                    <div class=\"grid sm:grid-cols-2 gap-5 mb-5\">\n                                        <div>\n                                            <label for=\"inFirst\" class=\"text-body-small font-medium text-black leading-[normal] mb-2 block\">\u540d\u5b57<\/label>\n                                            <input id=\"inFirst\" type=\"text\" placeholder=\"Jane\"\n                                                class=\"w-full border border-stroke rounded-[10px] px-4 py-3 text-body-small font-normal text-grey-dark focus:outline-none focus:border-blue transition-colors\">\n                                        <\/div>\n                                        <div>\n                                            <label for=\"inLast\" class=\"text-body-small font-medium text-black leading-[normal] mb-2 block\">\u59d3\u6c0f<\/label>\n                                            <input id=\"inLast\" type=\"text\" placeholder=\"Smith\"\n                                                class=\"w-full border border-stroke rounded-[10px] px-4 py-3 text-body-small font-normal text-grey-dark focus:outline-none focus:border-blue transition-colors\">\n                                        <\/div>\n                                    <\/div>\n\n                                    <!-- Email + Phone row -->\n                                    <div class=\"grid sm:grid-cols-2 gap-5 mb-8\">\n                                        <div>\n                                            <label for=\"inEmail\" class=\"text-body-small font-medium text-black leading-[normal] mb-2 block\"> \u90f5\u7bb1<\/label>\n                                            <input id=\"inEmail\" type=\"email\" placeholder=\"\u8acb\u586b\u5beb\u60a8\u7684\u90f5\u7bb1\"\n                                                class=\"w-full border border-stroke rounded-[10px] px-4 py-3 text-body-small font-normal text-grey-dark focus:outline-none focus:border-blue transition-colors\">\n                                        <\/div>\n                                        <div>\n                                            <label for=\"inPhone\" class=\"text-body-small font-medium text-black leading-[normal] mb-2 block\">\u96fb\u8a71\u865f\u78bc<\/label>\n                                            <input id=\"inPhone\" type=\"text\" placeholder=\"\u8acb\u8f38\u5165\u60a8\u7684\u96fb\u8a71\u865f\u78bc\"\n                                                class=\"w-full border border-stroke rounded-[10px] px-4 py-3 text-body-small font-normal text-grey-dark focus:outline-none focus:border-blue transition-colors\">\n                                        <\/div>\n                                    <\/div>\n\n                                    <!-- Payment Method -->\n                                    <div class=\"mb-8\">\n                                        <span class=\"text-body-small font-medium text-black leading-[normal] mb-3 block\">\u4ed8\u6b3e\u65b9\u5f0f<\/span>\n                                        \n                                        <!-- Credit Card \/ Airwallex Option -->\n                                        <div class=\"mb-4\">\n                                            <label class=\"flex items-center justify-between cursor-pointer mb-4 flex-wrap\">\n                                                <div class=\"flex items-center gap-3\">\n                                                    <input type=\"radio\" name=\"payment_method\" value=\"credit_card\" checked\n                                                        class=\"w-4 h-4 accent-blue\">\n                                                    <span class=\"text-body-small font-medium text-black whitespace-nowrap\">Credit Card<\/span>\n                                                <\/div>\n                                                <div class=\"flex gap-2 items-center flex-wrap\">\n                                                    <img decoding=\"async\" src=\"https:\/\/checkout-demo.airwallex.com\/static\/media\/visa.745a6485.svg\" alt=\"card_visa\" class=\"h-[22px] object-contain\"><img decoding=\"async\" src=\"https:\/\/checkout-demo.airwallex.com\/static\/media\/mastercard.262f85fc.svg\" alt=\"card_mastercard\" class=\"h-[22px] object-contain\"><img decoding=\"async\" src=\"https:\/\/checkout-demo.airwallex.com\/static\/media\/amex.f6c1eb25db0f19a0aada.svg\" alt=\"card_amex\" class=\"h-[22px] object-contain\"><img decoding=\"async\" src=\"https:\/\/checkout-demo.airwallex.com\/static\/media\/jcb.20230511083200.svg\" alt=\"card_jcb\" class=\"h-[22px] object-contain\"><img decoding=\"async\" src=\"https:\/\/checkout.airwallex.com\/static\/media\/discover.346345.svg\" alt=\"card_discover\" class=\"h-[22px] object-contain\"><img decoding=\"async\" src=\"https:\/\/checkout-demo.airwallex.com\/static\/media\/alipaycn.32c11f62.svg\" alt=\"alipaycn\" class=\"h-[22px] object-contain\"><img decoding=\"async\" src=\"https:\/\/checkout-demo.airwallex.com\/static\/media\/alipayhk.6a629046.svg\" alt=\"alipayhk\" class=\"h-[22px] object-contain\"><img decoding=\"async\" src=\"https:\/\/checkout-demo.airwallex.com\/static\/media\/fps.123.svg\" alt=\"fps\" class=\"h-[22px] object-contain\">                                                <\/div>\n                                            <\/label>\n                                            \n                                            <!-- Credit Card Info (Redirect Notice) -->\n                                            <div class=\"border border-stroke rounded-[10px] p-5 bg-ghost-white1 payment-method-details\" id=\"cc-details\">\n                                                <p class=\"text-body-extra-small font-medium text-grey-dark leading-[160%]\">\n                                                    \u60a8\u5c07\u88ab\u5c0e\u5411\u81f3\u5b89\u5168\u4ed8\u6b3e\u9801\u9762\u4ee5\u5b8c\u6210\u9810\u8a02\u3002                                                <\/p>\n                                            <\/div>\n                                        <\/div>\n\n                                        <!-- Bank Transfer Option -->\n                                        <div>\n                                            <label class=\"flex items-center gap-3 cursor-pointer mb-4\">\n                                                <input type=\"radio\" name=\"payment_method\" value=\"bacs\"\n                                                    class=\"w-4 h-4 accent-blue\">\n                                                <span class=\"text-body-small font-medium text-black\">\u9280\u884c\u8f49\u5e33<\/span>\n                                            <\/label>\n                                            \n                                            <!-- Bank Transfer Instructions -->\n                                            <div class=\"border border-stroke rounded-[10px] px-5 py-4 bg-ghost-white1 payment-method-details\" id=\"bacs-details\" style=\"display:none;\">\n                                                <p class=\"text-body-extra-small font-medium text-grey-dark leading-[160%] mb-3\">\n                                                    \u8acb\u5c07\u7e3d\u91d1\u984d\u8f49\u5e33\u81f3\u4ee5\u4e0b\u9280\u884c\u5e33\u6236\u3002\u8acb\u4f7f\u7528\u4f60\u7684 <strong class=\"text-blue\">\u8a02\u55ae\u7de8\u865f<\/strong> \u4f5c\u70ba\u4ed8\u6b3e\u5099\u8a3b\u2014\u2014\u4f60\u5c07\u5728\u78ba\u8a8d\u96fb\u90f5\u4e2d\u6536\u5230\u76f8\u95dc\u8cc7\u6599\u3002                                                <\/p>\n                                                <table class=\"text-body-extra-small font-medium text-grey-dark w-full\">\n                                                    <tr>\n                                                        <td class=\"opacity-60 pr-4 pb-1\">\u9280\u884c\u540d\u7a31<\/td>\n                                                        <td class=\"font-semibold text-blue pb-1\">HSBC Hong Kong<\/td>\n                                                    <\/tr>\n                                                    <tr>\n                                                        <td class=\"opacity-60 pr-4 pb-1\">\u6236\u53e3\u540d\u7a31<\/td>\n                                                        <td class=\"font-semibold text-blue pb-1\">CEO Suite Ltd<\/td>\n                                                    <\/tr>\n                                                    <tr>\n                                                        <td class=\"opacity-60 pr-4 pb-1\">\u6236\u53e3\u865f\u78bc<\/td>\n                                                        <td class=\"font-semibold text-blue pb-1\">\u2014<\/td>\n                                                    <\/tr>\n                                                    <tr>\n                                                        <td class=\"opacity-60 pr-4\">\u5099\u8a3b<\/td>\n                                                        <td class=\"font-semibold text-blue\">\u60a8\u7684\u8a02\u55ae\u865f\u78bc\uff08\u8acb\u5728\u90f5\u7bb1\u67e5\u770b\uff09<\/td>\n                                                    <\/tr>\n                                                <\/table>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n\n                                    <!-- Error message -->\n                                    <div id=\"bookingError\" style=\"display:none;\"\n                                        class=\"mb-5 px-5 py-3 bg-red-50 border border-red-200 rounded-[10px] text-body-small font-medium text-[#a00]\">\n                                    <\/div>\n\n                                <\/div>\n\n                                <div class=\"flex justify-between xl:mt-10 mt-5 xl:pt-10 pt-5 border-t border-t-stroke flex-wrap\">\n                                    <button data-step=\"3\"\n                                        class=\"mb-2 group relative booking-step-prev-btn text-body-extra-small font-medium leading-[normal] text-white px-5 md:py-4 py-3 bg-blue rounded-[10px] inline-flex items-center\">\n                                        <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/booking\/left-arrow-white.svg\"\n                                            alt=\"right\" class=\"ml-3 opacity-0\">\n                                        <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/booking\/left-arrow-white.svg\"\n                                            alt=\"right\" class=\"absolute sm:left-5 left-4 top-1\/2\n                    -translate-y-1\/2 sm:group-hover:left-3 group-hover:left-[6px] transition-all duration-300\">\n                                        <span class=\"transition-all duration-300\">\u8fd4\u56de<\/span>\n                                    <\/button>\n                                    <button id=\"confirmBtn\"\n                                        class=\"mb-2 group relative text-body-extra-small font-medium leading-[normal] text-white px-5 md:py-4 py-3 bg-blue rounded-[10px] inline-flex items-center hover:bg-blue\/90 transition-colors disabled:opacity-60 disabled:cursor-not-allowed\">\n                                        <span class=\"inline-block transition-all duration-300\">\u78ba\u8a8d\u4e26\u9810\u8a02<\/span>\n                                        <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/wise\/right-arrow-white.svg\"\n                                            alt=\"right\" class=\"ml-3 opacity-0\">\n                                        <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/wise\/right-arrow-white.svg\"\n                                            alt=\"right\" class=\"absolute sm:right-5 right-4 top-1\/2\n                    -translate-y-1\/2 sm:group-hover:right-[16px] group-hover:right-3 transition-all duration-300\">\n                                    <\/button>\n                                <\/div>\n                            <\/div>\n                            <!-- booking step3 -->\n                        <\/div>\n                    <\/div>\n                    <div\n                        class=\"booking-summary w-full 6xl:max-w-[34.8%] xl:max-w-[32%] bg-blue 2xl:rounded-[40px] rounded-[20px] shadow-[0_1px_3px_0_rgba(0,0,0,0.10)] sticky top-0  2xl:py-10 py-6 5xl:px-10 2xl:px-7 px-6\">\n                        <h5\n                            class=\"heading5-large font-semibold text-white leading-[normal] mb-8 pb-8 border-b border-b-stroke\">\n                            \u9810\u5b9a\u6458\u8981<\/h5>\n                        <div class=\" mb-8 pb-8 border-b border-b-stroke\">\n                            <table class=\"w-full text-body-medium font-medium text-white leading-[normal]\">\n                                <tr id=\"sumRowSpace\">\n                                    <td class=\"opacity-60 pb-4 pr-5\">\u7a7a\u9593<\/td>\n                                    <td id=\"sumSpace\" class=\"text-right pb-4 opacity-60\">\u672a\u9078\u64c7<\/td>\n                                <\/tr>\n                                <tr id=\"sumRowLoc\">\n                                    <td class=\"opacity-60 pb-4 pr-5\">\u5730\u9ede<\/td>\n                                    <td id=\"sumLoc\" class=\"text-right pb-4 opacity-60\">\u672a\u9078\u64c7<\/td>\n                                <\/tr>\n                                <tr id=\"sumRowDate\">\n                                    <td class=\"opacity-60 pb-4 pr-5\">\u65e5\u671f<\/td>\n                                    <td id=\"sumDate\" class=\"text-right pb-4 opacity-60\">\u672a\u9078\u64c7<\/td>\n                                <\/tr>\n                                <tr id=\"sumRowDur\">\n                                    <td class=\"opacity-60 pr-5\">\u7232\u671f<\/td>\n                                    <td class=\"text-right opacity-60\" id=\"sumDur\">\u672a\u9078\u64c7<\/td>\n                                <\/tr>\n                            <\/table>\n                        <\/div>\n                        <div class=\"flex justify-between mb-8\">\n                            <span class=\"text-body-medium font-medium text-white leading-[normal] pr-5\">\u7e3d\u5171<\/span>\n                            <span id=\"sumTotal\" class=\"heading6 font-bold text-turquoise leading-[normal]\">HKD 0.00<\/span>\n                        <\/div>\n                        <div>\n                            <ul>\n                                <li\n                                    class=\"text-body-medium font-medium text-white leading-[160%] flex items-center mb-4 last:mb-0\">\n                                    <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/booking\/star.svg\"\n                                        alt=\"\" class=\"mr-[10px] min-w-6\">\n                                    <span>\u5373\u6642\u78ba\u8a8d\uff0d\u7121\u9700\u7b49\u5f85<\/span>\n                                <\/li>\n                                <li\n                                    class=\"text-body-medium font-medium text-white leading-[160%] flex items-center mb-4 last:mb-0\">\n                                    <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/booking\/lock.svg\"\n                                        alt=\"\" class=\"mr-[10px] min-w-6\">\n                                    <span>\u53ef\u65bc24\u5c0f\u6642\u524d\u514d\u8cbb\u53d6\u6d88<\/span>\n                                <\/li>\n                                <li\n                                    class=\"text-body-medium font-medium text-white leading-[160%] flex items-center mb-4 last:mb-0\">\n                                    <img decoding=\"async\" src=\"https:\/\/prelive.ceosuite.com\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/booking\/time-green.svg\"\n                                        alt=\"\" class=\"mr-[10px] min-w-6\">\n                                    <span>\u958b\u653e\u6642\u9593\uff1a\u6bcf\u65e5\u4e0a\u5348 7 \u9ede\u81f3\u665a\u4e0a 11 \u9ede<\/span>\n                                <\/li>\n                            <\/ul>\n                            <div\n                                class=\"text-body-medium font-normal mt-8 text-center text-white leading-[160%] [&#038;_code]:text-turquoise [&#038;_code]:font-tertiary\">\n                                <code>\u5373\u6642\u9032\u5165<\/code> &#8211; \u4f60\u7684\u9580\u7981\u78bc\u6703\u5728\u9810\u8a02\u5b8c\u6210\u5f8c\u7acb\u5373\u900f\u904e\u96fb\u90f5\u767c\u9001                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const paymentRadios = document.querySelectorAll('input[name=\"payment_method\"]');\n    const ccDetails = document.getElementById('cc-details');\n    const bacsDetails = document.getElementById('bacs-details');\n\n    if (paymentRadios.length > 0) {\n        paymentRadios.forEach(radio => {\n            radio.addEventListener('change', function() {\n                if (this.value === 'credit_card') {\n                    if (ccDetails) ccDetails.style.display = 'block';\n                    if (bacsDetails) bacsDetails.style.display = 'none';\n                } else if (this.value === 'bacs') {\n                    if (ccDetails) ccDetails.style.display = 'none';\n                    if (bacsDetails) bacsDetails.style.display = 'block';\n                }\n            });\n        });\n    }\n});\n<\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"class_list":["post-3435","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/prelive.ceosuite.com\/workwise\/zh-hk\/wp-json\/wp\/v2\/pages\/3435","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prelive.ceosuite.com\/workwise\/zh-hk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/prelive.ceosuite.com\/workwise\/zh-hk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/prelive.ceosuite.com\/workwise\/zh-hk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prelive.ceosuite.com\/workwise\/zh-hk\/wp-json\/wp\/v2\/comments?post=3435"}],"version-history":[{"count":1,"href":"https:\/\/prelive.ceosuite.com\/workwise\/zh-hk\/wp-json\/wp\/v2\/pages\/3435\/revisions"}],"predecessor-version":[{"id":5816,"href":"https:\/\/prelive.ceosuite.com\/workwise\/zh-hk\/wp-json\/wp\/v2\/pages\/3435\/revisions\/5816"}],"wp:attachment":[{"href":"https:\/\/prelive.ceosuite.com\/workwise\/zh-hk\/wp-json\/wp\/v2\/media?parent=3435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}