{"id":3433,"date":"2026-06-03T07:22:57","date_gmt":"2026-06-03T07:22:57","guid":{"rendered":"https:\/\/ceo-suite.visibleone.dev\/workwise\/booking\/"},"modified":"2026-06-03T07:22:57","modified_gmt":"2026-06-03T07:22:57","slug":"booking","status":"publish","type":"page","link":"https:\/\/ceo-suite.visibleone.dev\/workwise\/th-th\/booking\/","title":{"rendered":"Booking"},"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\">Your Space<\/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\">Date &amp; Time<\/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\">Checkout<\/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\">Step 1 of 3<\/span>\n                                    <h5 class=\"my-2 heading5-large font-semibold text-blue leading-[normal]\">What kind of space do you need?<\/h5>\n                                    <div class=\"text-body-medium font-medium text-grey-dark leading-[normal]\">Book instantly &#8211; no approval, no waiting.<\/div>\n                                <\/div>\n                                <div>\n                                    <span\n                                        class=\"text-body-small font-medium leading-[normal] text-black mb-[10px] inline-block\">Space<\/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=\"coworking-zone\"\n                                                        type=\"radio\"\n                                                        name=\"space-type\"\n                                                        value=\"Coworking Zone\"\n                                                        data-price=\"39\"\n                                                        data-sku=\"ww-coworking\"\n                                                        class=\"peer hidden\">\n                                                    <label for=\"coworking-zone\" class=\"cursor-pointer block h-full w-full border border-stroke bg-white rounded-[16px] peer-checked:border-4 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:\/\/ceo-suite.visibleone.dev\/workwise\/wp-content\/uploads\/sites\/2\/2026\/06\/Image-Container.png\"\n                                                            alt=\"Coworking Zone\"\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                                                                Coworking Zone                                                            <\/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                                                                    For focus or collaboration                                                                <\/div>\n                                                                                                                        <div>\n                                                                <span class=\"text-body-extra-small font-bold leading-[normal] text-turquoise inline-block uppercase\">Starting From<\/span>\n                                                                <h5 class=\"mt-[6px] heading5 font-bold leading-[normal] text-blue\">\n                                                                    HKD 39\/HR                                                                <\/h5>\n                                                            <\/div>\n                                                        <\/div>\n                                                    <\/label>\n                                                    <img decoding=\"async\" src=\"https:\/\/ceo-suite.visibleone.dev\/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=\"private-office\"\n                                                        type=\"radio\"\n                                                        name=\"space-type\"\n                                                        value=\"Private Office\"\n                                                        data-price=\"185\"\n                                                        data-sku=\"ww-private-office\"\n                                                        class=\"peer hidden\">\n                                                    <label for=\"private-office\" class=\"cursor-pointer block h-full w-full border border-stroke bg-white rounded-[16px] peer-checked:border-4 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:\/\/ceo-suite.visibleone.dev\/workwise\/wp-content\/uploads\/sites\/2\/2026\/06\/317934db039e49346e17ea8c732f669b033f2b24-1024x576.png\"\n                                                            alt=\"Private Office\"\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                                                                Private Office                                                            <\/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                                                                    For growing teams                                                                <\/div>\n                                                                                                                        <div>\n                                                                <span class=\"text-body-extra-small font-bold leading-[normal] text-turquoise inline-block uppercase\">Starting From<\/span>\n                                                                <h5 class=\"mt-[6px] heading5 font-bold leading-[normal] text-blue\">\n                                                                    HKD 185\/HR                                                                <\/h5>\n                                                            <\/div>\n                                                        <\/div>\n                                                    <\/label>\n                                                    <img decoding=\"async\" src=\"https:\/\/ceo-suite.visibleone.dev\/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=\"meeting-room\"\n                                                        type=\"radio\"\n                                                        name=\"space-type\"\n                                                        value=\"Meeting Room\"\n                                                        data-price=\"380\"\n                                                        data-sku=\"ww-meeting-room\"\n                                                        class=\"peer hidden\">\n                                                    <label for=\"meeting-room\" class=\"cursor-pointer block h-full w-full border border-stroke bg-white rounded-[16px] peer-checked:border-4 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:\/\/ceo-suite.visibleone.dev\/workwise\/wp-content\/uploads\/sites\/2\/2026\/06\/f1b8b3e52c9520d9c3f45f2235cfec4dac682e70-1024x576.jpg\"\n                                                            alt=\"Meeting Room\"\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                                                                Meeting Room                                                            <\/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                                                                    Whenever you need it                                                                <\/div>\n                                                                                                                        <div>\n                                                                <span class=\"text-body-extra-small font-bold leading-[normal] text-turquoise inline-block uppercase\">Starting From<\/span>\n                                                                <h5 class=\"mt-[6px] heading5 font-bold leading-[normal] text-blue\">\n                                                                    HKD 380\/HR                                                                <\/h5>\n                                                            <\/div>\n                                                        <\/div>\n                                                    <\/label>\n                                                    <img decoding=\"async\" src=\"https:\/\/ceo-suite.visibleone.dev\/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\">Location<\/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=\"Central, 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\">Central, Hong Kong<\/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\">Next<\/span>\n                                        <img decoding=\"async\" src=\"https:\/\/ceo-suite.visibleone.dev\/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:\/\/ceo-suite.visibleone.dev\/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\">Step 2 of 3<\/span>\n                                    <h5 class=\"my-2 heading5-large font-semibold text-blue leading-[normal]\">When would you like to come in?<\/h5>\n                                    <div class=\"text-body-medium font-medium text-grey-dark leading-[normal]\">\n                                        Select one day, multiple days, full weeks, or a whole month.                                    <\/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>8 spaces available today at Central.<\/b> Updated just now                                    <\/div>\n                                <\/div>\n                                <div>\n                                    <span\n                                        class=\"text-body-small font-medium text-black leading-[normal] mb-[10px] block\">Date<\/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:\/\/ceo-suite.visibleone.dev\/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:\/\/ceo-suite.visibleone.dev\/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 class=\"wk-col\"><\/th>\n                                                    <th>Sun<\/th>\n                                                    <th>Mon<\/th>\n                                                    <th>Tue<\/th>\n                                                    <th>Wed<\/th>\n                                                    <th>Thu<\/th>\n                                                    <th>Fri<\/th>\n                                                    <th>Sat<\/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:\/\/ceo-suite.visibleone.dev\/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\">No dates selected.<\/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]\">Duration<\/span>\n                                            <div class=\"dur-row duration-list\">\n                                                <button data-duration=\"Hourly\" data-text=\"Hourly\" class=\"dur-btn\"\n                                                    id=\"dur-Hourly\">Hourly<\/button>\n                                                <button data-duration=\"Full Day\" data-text=\"Full Day\" class=\"dur-btn\" id=\"dur-FullDay\">Full Day<\/button>\n                                                <button data-duration=\"Weekly\" data-text=\"Weekly\" class=\"dur-btn\"\n                                                    id=\"dur-Weekly\">Weekly<\/button>\n                                                <button data-duration=\"Monthly\" data-text=\"Monthly\" Monthly class=\"dur-btn\"\n                                                    id=\"dur-Monthly\">Monthly<\/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]\">Select Hours<\/span>\n                                                <span class=\"text-turquoise font-medium leading-[normal]\">( Access Time is from 7 AM &#8211; 11 PM )<\/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:\/\/ceo-suite.visibleone.dev\/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]\">Selected Time Slot:<\/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:\/\/ceo-suite.visibleone.dev\/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:\/\/ceo-suite.visibleone.dev\/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\">Back<\/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\">Next<\/span>\n                                        <img decoding=\"async\" src=\"https:\/\/ceo-suite.visibleone.dev\/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:\/\/ceo-suite.visibleone.dev\/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\">Step 3 of 3<\/span>\n                                    <h5 class=\"my-2 heading5-large font-semibold text-blue leading-[normal]\">Almost there<\/h5>\n                                    <div class=\"text-body-medium font-medium text-grey-dark leading-[normal]\">\n                                        Just your details \u2014 takes 30 seconds. Your space is held for you.                                    <\/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\">First Name<\/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\">Last Name<\/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\">Email<\/label>\n                                            <input id=\"inEmail\" type=\"email\" placeholder=\"Please insert your email\"\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\">Phone Number<\/label>\n                                            <input id=\"inPhone\" type=\"text\" placeholder=\"Please insert your phone number\"\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\">Payment Method<\/span>\n                                        \n                                        <!-- Credit Card \/ Airwallex Option -->\n                                        <div class=\"mb-4\">\n                                            <label class=\"flex items-center justify-between cursor-pointer mb-4\">\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\">Credit Card<\/span>\n                                                <\/div>\n                                                <div class=\"flex gap-2 items-center\">\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.airwallex.com\/static\/media\/diners.345123.svg\" alt=\"card_diners\" class=\"h-[22px] object-contain\"><img decoding=\"async\" src=\"https:\/\/checkout-demo.airwallex.com\/static\/media\/unionPay.efebdbd9.svg\" alt=\"card_unionpay\" class=\"h-[22px] object-contain\"><img decoding=\"async\" src=\"https:\/\/checkout-demo.airwallex.com\/static\/media\/korean_local_card.123456.svg\" alt=\"korean_local_card\" 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                                                    You will be redirected to the secure payment page to complete your booking.                                                <\/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\">Bank Transfer<\/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                                                    Please transfer the total amount to the bank account below. Use your <strong class=\"text-blue\">Order ID<\/strong> as the payment reference \u2014 you&#039;ll receive it in your confirmation email.                                                <\/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\">Bank Name<\/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\">Account Name<\/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\">Account Number<\/td>\n                                                        <td class=\"font-semibold text-blue pb-1\">\u2014<\/td>\n                                                    <\/tr>\n                                                    <tr>\n                                                        <td class=\"opacity-60 pr-4\">Reference<\/td>\n                                                        <td class=\"font-semibold text-blue\">Your Order ID (sent by email)<\/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:\/\/ceo-suite.visibleone.dev\/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:\/\/ceo-suite.visibleone.dev\/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\">Back<\/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\">Confirm and Book<\/span>\n                                        <img decoding=\"async\" src=\"https:\/\/ceo-suite.visibleone.dev\/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:\/\/ceo-suite.visibleone.dev\/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                            Booking Summary<\/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\">Space<\/td>\n                                    <td id=\"sumSpace\" class=\"text-right pb-4 opacity-60\">Not Selected<\/td>\n                                <\/tr>\n                                <tr id=\"sumRowLoc\">\n                                    <td class=\"opacity-60 pb-4 pr-5\">Location<\/td>\n                                    <td id=\"sumLoc\" class=\"text-right pb-4 opacity-60\">Not Selected<\/td>\n                                <\/tr>\n                                <tr id=\"sumRowDate\">\n                                    <td class=\"opacity-60 pb-4 pr-5\">Date<\/td>\n                                    <td id=\"sumDate\" class=\"text-right pb-4 opacity-60\">Not Selected<\/td>\n                                <\/tr>\n                                <tr id=\"sumRowDur\">\n                                    <td class=\"opacity-60 pr-5\">Duration<\/td>\n                                    <td class=\"text-right opacity-60\" id=\"sumDur\">Not Selected<\/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\">Total<\/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:\/\/ceo-suite.visibleone.dev\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/booking\/star.svg\"\n                                        alt=\"\" class=\"mr-[10px] min-w-6\">\n                                    <span>Instant confirmation &#8211; no waiting<\/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:\/\/ceo-suite.visibleone.dev\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/booking\/lock.svg\"\n                                        alt=\"\" class=\"mr-[10px] min-w-6\">\n                                    <span>Free cancellation up to 24h before<\/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:\/\/ceo-suite.visibleone.dev\/workwise\/wp-content\/themes\/ceo-suite-workwise\/resources\/images\/booking\/time-green.svg\"\n                                        alt=\"\" class=\"mr-[10px] min-w-6\">\n                                    <span>Access 7 AM &#8211; 11 PM, 7 days<\/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>Instant access<\/code> &#8211; your door code arrives by email right after booking.                            <\/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,"footnotes":""},"class_list":["post-3433","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/ceo-suite.visibleone.dev\/workwise\/th-th\/wp-json\/wp\/v2\/pages\/3433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ceo-suite.visibleone.dev\/workwise\/th-th\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ceo-suite.visibleone.dev\/workwise\/th-th\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ceo-suite.visibleone.dev\/workwise\/th-th\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ceo-suite.visibleone.dev\/workwise\/th-th\/wp-json\/wp\/v2\/comments?post=3433"}],"version-history":[{"count":0,"href":"https:\/\/ceo-suite.visibleone.dev\/workwise\/th-th\/wp-json\/wp\/v2\/pages\/3433\/revisions"}],"wp:attachment":[{"href":"https:\/\/ceo-suite.visibleone.dev\/workwise\/th-th\/wp-json\/wp\/v2\/media?parent=3433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}