{"id":10,"date":"2026-05-28T15:11:52","date_gmt":"2026-05-28T15:11:52","guid":{"rendered":"https:\/\/datlich.diennhienweb.com\/?page_id=10"},"modified":"2026-05-28T15:28:43","modified_gmt":"2026-05-28T15:28:43","slug":"trang-chu","status":"publish","type":"page","link":"https:\/\/datlich.diennhienweb.com\/","title":{"rendered":"Trang ch\u1ee7"},"content":{"rendered":"\n\t<section class=\"section\" id=\"section_1505499608\">\n\t\t<div class=\"section-bg fill\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1052\" src=\"https:\/\/datlich.diennhienweb.com\/wp-content\/uploads\/2026\/05\/cole-keister-8V1gfeaPP1Y-unsplash.jpg\" class=\"bg attachment- size-\" alt=\"\" \/>\t\t\t\t\t\t\n\t\t\t\n\n\t\t<\/div>\n\n\t\t\n\n\t\t<div class=\"section-content relative\">\n\t\t\t\n\t<div id=\"gap-980265047\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-980265047 {\n  padding-top: 30px;\n}\n<\/style>\n\t<\/div>\n\t\n<div class=\"row align-center\"  id=\"row-1671374223\">\n\n\t<div id=\"col-934997653\" class=\"col medium-8 small-12 large-12\"  >\n\t\t\t\t<div class=\"col-inner text-center\" style=\"background-color:rgba(255, 255, 255, 0.84);\" >\n\t\t\t\n\t\t\t\n\t<div id=\"text-2173625867\" class=\"text\">\n\t\t\n<h1>\u0110\u1eb6T L\u1ecaCH TR\u1ef0C TUY\u1ebeN<\/h1>\n\t\t\n<style>\n#text-2173625867 {\n  color: rgb(240, 14, 14);\n}\n#text-2173625867 > * {\n  color: rgb(240, 14, 14);\n}\n<\/style>\n\t<\/div>\n\t\n\t<div id=\"gap-1784902897\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-1784902897 {\n  padding-top: 10px;\n}\n<\/style>\n\t<\/div>\n\t\n    <script>\r\n        \/\/ Inject holidays data directly into page\r\n        var dat_lich_holidays = [{\"id\":\"1\",\"name\":\"Ng\\u00e0y ngh\\u1ec9\",\"description\":\"\",\"holiday_date\":\"2026-05-30\",\"start_date\":\"2026-05-30\",\"end_date\":\"2026-05-31\",\"is_recurring\":\"0\",\"status\":\"active\"}];\r\n        console.log('Holidays injected:', dat_lich_holidays);\r\n        var dat_lich_non_working_rules = [];\r\n\r\nconsole.log('Non-working rules injected:', dat_lich_non_working_rules);\r\n\r\n    <\/script>\r\n    <style id=\"dat-lich-holiday-critical\">\r\n        \/* ULTRA CRITICAL: Holiday styles - Maximum specificity *\/\r\n        html body .dat-lich-booking-container .calendar-days .calendar-day.holiday,\r\n        html body div.calendar-day.holiday,\r\n        .calendar-day.holiday.holiday.holiday {\r\n            background-color: #fefce8 !important;\r\n            background: #fefce8 !important;\r\n            color: #92400e !important;\r\n            cursor: not-allowed !important;\r\n            border: 2px solid #fbbf24 !important;\r\n            font-weight: 700 !important;\r\n            box-shadow: inset 0 0 0 2px #fbbf24 !important;\r\n        }\r\n        html body .calendar-day.holiday:hover,\r\n        .calendar-day.holiday.holiday.holiday:hover {\r\n            background-color: #fee2e2 !important;\r\n            background: #fee2e2 !important;\r\n            transform: none !important;\r\n        }\r\n        \/* Tooltip styles - ONLY for holiday days *\/\r\n        .calendar-day.holiday[data-tooltip]:hover::after {\r\n            content: attr(data-tooltip);\r\n            position: absolute;\r\n            bottom: calc(100% + 12px);\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            background: linear-gradient(135deg, #1f2937 0%, #374151 100%);\r\n            color: #ffffff !important;\r\n            padding: 14px 20px;\r\n            border-radius: 10px;\r\n            font-size: 13px;\r\n            white-space: pre-line;\r\n            z-index: 10000;\r\n            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);\r\n        }\r\n        .calendar-day.holiday[data-tooltip]:hover::before {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: calc(100% + 4px);\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            border: 8px solid transparent;\r\n            border-top-color: #1f2937;\r\n            z-index: 10000;\r\n        }\r\n\r\n        \/* CRITICAL: Override theme button styles - Maximum specificity *\/\r\n        \/* REMOVED: Button styles moved to dynamic styles section below *\/\r\n\r\n        \/* Mobile UX fix: prevent iOS Safari auto-zoom on form focus *\/\r\n        @media (max-width: 768px) {\r\n            .dat-lich-booking-container input,\r\n            .dat-lich-booking-container select,\r\n            .dat-lich-booking-container textarea,\r\n            .dat-lich-booking-container #booking-form input,\r\n            .dat-lich-booking-container #booking-form textarea,\r\n            .dat-lich-booking-container #booking-form select {\r\n                font-size: 17px !important;\r\n                line-height: 1.45 !important;\r\n            }\r\n\r\n            html body .dat-lich-booking-container #booking-form #customer_name,\r\n            html body .dat-lich-booking-container #booking-form #customer_phone,\r\n            html body .dat-lich-booking-container #booking-form #customer_email {\r\n                font-size: 17px !important;\r\n                line-height: 1.45 !important;\r\n                min-height: 48px !important;\r\n                -webkit-text-size-adjust: 100% !important;\r\n            }\r\n        }\r\n    <\/style>\r\n<div class=\"dat-lich-booking-container max-w-7xl mx-auto p-6 min-h-screen\">\r\n    \r\n    <div class=\"booking-layout grid grid-cols-1 lg:grid-cols-2 gap-8\">\r\n        <!-- Calendar Section - Left Side -->\r\n        <div class=\"calendar-section\">\r\n            <div class=\"calendar-card bg-white shadow-lg overflow-hidden rounded-lg\" style=\"\">\r\n                <div class=\"calendar-header p-6\" style=\"background: linear-gradient(to right, #2563EBff, #7C3AEDff) !important; border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;\">\r\n                    <h3 class=\"text-xl font-bold text-white\">Ch\u1ecdn Ng\u00e0y & Gi\u1edd<\/h3>\r\n                <\/div>\r\n\r\n                <div class=\"calendar-content p-6\">\r\n                    <!-- Calendar Grid -->\r\n                    <div class=\"calendar-grid mb-6\">\r\n                        <div class=\"calendar-nav flex justify-between items-center mb-4\">\r\n                            <button type=\"button\" class=\"calendar-prev bg-gray-200 hover:bg-gray-300 text-gray-700 w-10 h-10 rounded-full flex items-center justify-center text-xl font-bold\" id=\"calendar-prev\">\u2039<\/button>\r\n                            <span class=\"calendar-month text-lg font-semibold text-gray-800\" id=\"calendar-month\"><\/span>\r\n                            <button type=\"button\" class=\"calendar-next bg-gray-200 hover:bg-gray-300 text-gray-700 w-10 h-10 rounded-full flex items-center justify-center text-xl font-bold\" id=\"calendar-next\">\u203a<\/button>\r\n                        <\/div>\r\n                        <div class=\"calendar-weekdays grid grid-cols-7 gap-1 mb-2\">\r\n                            <div class=\"weekday text-center text-sm font-medium text-gray-600 py-2\">CN<\/div>\r\n                            <div class=\"weekday text-center text-sm font-medium text-gray-600 py-2\">T2<\/div>\r\n                            <div class=\"weekday text-center text-sm font-medium text-gray-600 py-2\">T3<\/div>\r\n                            <div class=\"weekday text-center text-sm font-medium text-gray-600 py-2\">T4<\/div>\r\n                            <div class=\"weekday text-center text-sm font-medium text-gray-600 py-2\">T5<\/div>\r\n                            <div class=\"weekday text-center text-sm font-medium text-gray-600 py-2\">T6<\/div>\r\n                            <div class=\"weekday text-center text-sm font-medium text-gray-600 py-2\">T7<\/div>\r\n                        <\/div>\r\n                        <div class=\"calendar-days grid grid-cols-7 gap-1\" id=\"calendar-days\">\r\n                            <div class=\"calendar-day empty\"><\/div><div class=\"calendar-day empty\"><\/div><div class=\"calendar-day empty\"><\/div><div class=\"calendar-day empty\"><\/div><div class=\"calendar-day empty\"><\/div><div class=\"calendar-day past\" data-date=\"2026-05-01\">1<\/div><div class=\"calendar-day past\" data-date=\"2026-05-02\">2<\/div><div class=\"calendar-day past\" data-date=\"2026-05-03\">3<\/div><div class=\"calendar-day past\" data-date=\"2026-05-04\">4<\/div><div class=\"calendar-day past\" data-date=\"2026-05-05\">5<\/div><div class=\"calendar-day past\" data-date=\"2026-05-06\">6<\/div><div class=\"calendar-day past\" data-date=\"2026-05-07\">7<\/div><div class=\"calendar-day past\" data-date=\"2026-05-08\">8<\/div><div class=\"calendar-day past\" data-date=\"2026-05-09\">9<\/div><div class=\"calendar-day past\" data-date=\"2026-05-10\">10<\/div><div class=\"calendar-day past\" data-date=\"2026-05-11\">11<\/div><div class=\"calendar-day past\" data-date=\"2026-05-12\">12<\/div><div class=\"calendar-day past\" data-date=\"2026-05-13\">13<\/div><div class=\"calendar-day past\" data-date=\"2026-05-14\">14<\/div><div class=\"calendar-day past\" data-date=\"2026-05-15\">15<\/div><div class=\"calendar-day past\" data-date=\"2026-05-16\">16<\/div><div class=\"calendar-day past\" data-date=\"2026-05-17\">17<\/div><div class=\"calendar-day past\" data-date=\"2026-05-18\">18<\/div><div class=\"calendar-day past\" data-date=\"2026-05-19\">19<\/div><div class=\"calendar-day past\" data-date=\"2026-05-20\">20<\/div><div class=\"calendar-day past\" data-date=\"2026-05-21\">21<\/div><div class=\"calendar-day past\" data-date=\"2026-05-22\">22<\/div><div class=\"calendar-day past\" data-date=\"2026-05-23\">23<\/div><div class=\"calendar-day past\" data-date=\"2026-05-24\">24<\/div><div class=\"calendar-day past\" data-date=\"2026-05-25\">25<\/div><div class=\"calendar-day past\" data-date=\"2026-05-26\">26<\/div><div class=\"calendar-day past\" data-date=\"2026-05-27\">27<\/div><div class=\"calendar-day available today\" data-date=\"2026-05-28\">28<\/div><div class=\"calendar-day available\" data-date=\"2026-05-29\">29<\/div><div class=\"calendar-day holiday disabled\" data-date=\"2026-05-30\" data-tooltip=\"Ng\u00e0y ngh\u1ec9\">30<\/div><div class=\"calendar-day holiday disabled\" data-date=\"2026-05-31\" data-tooltip=\"Ng\u00e0y ngh\u1ec9\">31<\/div>                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Time Slot Selection (Movie Theater Style) -->\r\n                    <div class=\"time-slots-section hidden\" id=\"time-slots-section\">\r\n                        <div class=\"time-slots-header flex justify-between items-center mb-4\">\r\n                            <h4 class=\"text-lg font-semibold text-gray-800\">\r\n                                \ud83c\udfac Ch\u1ecdn Khung Gi\u1edd                            <\/h4>\r\n                            <span class=\"selected-date-display text-sm text-gray-600\" id=\"selected-date-text\"><\/span>\r\n                        <\/div>\r\n                        <div class=\"time-slots-legend\">\r\n                            <div class=\"legend-item\">\r\n                                <span class=\"legend-box available\"><\/span>\r\n                                <span>C\u00f2n tr\u1ed1ng<\/span>\r\n                            <\/div>\r\n                            <div class=\"legend-item\">\r\n                                <span class=\"legend-box booked\"><\/span>\r\n                                <span>\u0110\u00e3 \u0111\u1eb7t<\/span>\r\n                            <\/div>\r\n                            <div class=\"legend-item\">\r\n                                <span class=\"legend-box selected\"><\/span>\r\n                                <span>\u0110ang ch\u1ecdn<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"time-slots-grid\" style=\"display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 7px;\" id=\"time-slots-grid\">\r\n                            <!-- Time slots will be populated via AJAX -->\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Hidden inputs for form submission -->\r\n                    <input type=\"hidden\" name=\"appointment_date\" id=\"appointment_date\" required \/>\r\n                    <input type=\"hidden\" name=\"start_time\" id=\"start_time\" required \/>\r\n\r\n                    <!-- Selected Info Display -->\r\n                    <div class=\"selected-info bg-gray-50 rounded-lg p-4 mt-6\">\r\n                        <div class=\"info-item flex justify-between mb-2\" id=\"selected-date-display\">\r\n                            <span class=\"info-label text-sm font-medium text-gray-600\">Ng\u00e0y \u0111\u00e3 ch\u1ecdn:<\/span>\r\n                            <span class=\"info-value text-sm font-semibold text-gray-800\" id=\"selected-date-value\">-<\/span>\r\n                        <\/div>\r\n                        <div class=\"info-item flex justify-between\" id=\"selected-time-display\">\r\n                            <span class=\"info-label text-sm font-medium text-gray-600\">Gi\u1edd \u0111\u00e3 ch\u1ecdn:<\/span>\r\n                            <span class=\"info-value text-sm font-semibold text-gray-800\" id=\"selected-time-value\">-<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Form Section - Right Side -->\r\n        <div class=\"form-section\">\r\n            <div class=\"form-card bg-white shadow-lg overflow-hidden rounded-lg\" style=\"\">\r\n                <div class=\"form-header p-6\" style=\"background: linear-gradient(to right, #2563EBff, #7C3AEDff) !important; border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;\">\r\n                    <h3 class=\"text-xl font-bold text-white\">Th\u00f4ng Tin \u0110\u1eb7t L\u1ecbch<\/h3>\r\n                <\/div>\r\n\r\n                <form id=\"booking-form\" method=\"post\" class=\"p-6\">\r\n                    <input type=\"hidden\" id=\"dat_lich_nonce\" name=\"dat_lich_nonce\" value=\"9975f16b0c\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php\/wp-json\/wp\/v2\/pages\/10\" \/>\r\n                    <!-- Service Selection -->\r\n                    <div class=\"form-group mb-6\">\r\n                        <label for=\"service\" class=\"block text-sm font-medium text-gray-700 mb-2\">\r\n                            <span class=\"label-icon mr-2\">\u2b50\ufe0f<\/span>\r\n                            D\u1ecbch V\u1ee5                            <span class=\"required-star text-red-500 ml-1\">*<\/span>\r\n                        <\/label>\r\n                        <div class=\"select-wrapper relative\">\r\n                            <select name=\"service\" id=\"service\" required class=\"w-full px-4 py-3 border border-gray-300 rounded-lg appearance-none\">\r\n                                <option value=\"\">Ch\u1ecdn d\u1ecbch v\u1ee5<\/option>\r\n                                <option value=\"2\" data-price=\"0.00\" data-price-text=\"0 VND\">C\u1ea7u Long - 0 VND<\/option><option value=\"1\" data-price=\"450000.00\" data-price-text=\"450.000 VND\">\u0110\u00e1 B\u00f3ng - 450.000 VND<\/option>                            <\/select>\r\n                            <div class=\"absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none\">\r\n                                <svg class=\"w-5 h-5 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path>\r\n                                <\/svg>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Staff Selection -->\r\n                    <div class=\"form-group mb-6\">\r\n                        <label for=\"staff\" class=\"block text-sm font-medium text-gray-700 mb-2\">\r\n                            <span class=\"label-icon mr-2\">\ud83d\udc68\u200d\ud83d\udcbc<\/span>\r\n                            Nh\u00e2n Vi\u00ean                            <span class=\"required-star text-red-500 ml-1\">*<\/span>\r\n                        <\/label>\r\n                        <div class=\"select-wrapper relative\">\r\n                            <select name=\"staff\" id=\"staff\" required class=\"w-full px-4 py-3 border border-gray-300 rounded-lg appearance-none\">\r\n                                <option value=\"\">Ch\u1ecdn nh\u00e2n vi\u00ean<\/option>\r\n                                <option value=\"1\">Nguy\u1ec5n Thanh \u0110i\u1ec1n<\/option>                            <\/select>\r\n                            <div class=\"absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none\">\r\n                                <svg class=\"w-5 h-5 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path>\r\n                                <\/svg>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Location Selection -->\r\n                    <div class=\"form-group mb-6\">\r\n                        <label for=\"location\" class=\"block text-sm font-medium text-gray-700 mb-2\">\r\n                            <span class=\"label-icon mr-2\">\ud83c\udfe0<\/span>\r\n                            \u0110\u1ecba \u0110i\u1ec3m                            <span class=\"required-star text-red-500 ml-1\">*<\/span>\r\n                        <\/label>\r\n                        <div class=\"select-wrapper relative\">\r\n                            <select name=\"location\" id=\"location\" required class=\"w-full px-4 py-3 border border-gray-300 rounded-lg appearance-none\">\r\n                                <option value=\"\">Ch\u1ecdn \u0111\u1ecba \u0111i\u1ec3m<\/option>\r\n                                <option value=\"1\">S\u00e2n Th\u1ec3 Thao<\/option>                            <\/select>\r\n                            <div class=\"absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none\">\r\n                                <svg class=\"w-5 h-5 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path>\r\n                                <\/svg>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Customer Information -->\r\n                    <div class=\"customer-info-section mb-6\">\r\n                        <h4 class=\"text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200\">Th\u00f4ng Tin C\u00e1 Nh\u00e2n<\/h4>\r\n\r\n                        <!-- Name and Phone Row -->\r\n                        <div class=\"form-row grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n                            <div class=\"form-group name-field\">\r\n                                <label for=\"customer_name\" class=\"block text-sm font-medium text-gray-700 mb-2\">\r\n                                    <span class=\"label-icon mr-2\">\ud83d\ude4b\u200d\u2640\ufe0f<\/span>\r\n                                    H\u1ecd T\u00ean                                    <span class=\"required-star text-red-500 ml-1\">*<\/span>                                <\/label>\r\n                                <input type=\"text\" name=\"customer_name\" id=\"customer_name\" required placeholder=\"Nh\u1eadp h\u1ecd t\u00ean c\u1ee7a b\u1ea1n\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg\" \/>\r\n                            <\/div>\r\n\r\n                            <div class=\"form-group phone-field\">\r\n                                <label for=\"customer_phone\" class=\"block text-sm font-medium text-gray-700 mb-2\">\r\n                                    <span class=\"label-icon mr-2\">\ud83d\udcde<\/span>\r\n                                    S\u1ed1 \u0110i\u1ec7n Tho\u1ea1i                                    <span class=\"required-star text-red-500 ml-1\">*<\/span>                                <\/label>\r\n                                <input type=\"tel\" name=\"customer_phone\" id=\"customer_phone\" required placeholder=\"Nh\u1eadp s\u1ed1 \u0111i\u1ec7n tho\u1ea1i\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg\" \/>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Email Field -->\r\n                        <div class=\"form-group email-field mb-4\">\r\n                            <label for=\"customer_email\" class=\"block text-sm font-medium text-gray-700 mb-2\">\r\n                                <span class=\"label-icon mr-2\">\u2709\ufe0f<\/span>\r\n                                Email                                <span class=\"required-star text-red-500 ml-1\">*<\/span>                            <\/label>\r\n                            <input type=\"email\" name=\"customer_email\" id=\"customer_email\" required placeholder=\"Nh\u1eadp \u0111\u1ecba ch\u1ec9 email\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg\" \/>\r\n                        <\/div>\r\n\r\n                        <!-- Notes Field -->\r\n                        <div class=\"form-group notes-field mb-6\">\r\n                            <label for=\"notes\" class=\"block text-sm font-medium text-gray-700 mb-2\">\r\n                                <span class=\"label-icon mr-2\">\ud83d\udcdd<\/span>\r\n                                Ghi ch\u00fa                                                            <\/label>\r\n                                                            <textarea name=\"notes\" id=\"notes\"  placeholder=\"Nh\u1eadp Ghi ch\u00fa \u0111\u1eb7c bi\u1ec7t\" class=\"w-full px-4 py-3 border border-gray-300 rounded-lg resize-none\" rows=\"3\"><\/textarea>\r\n                                                    <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Submit Button -->\r\n                    <div class=\"form-actions\">\r\n                        <button type=\"submit\" class=\"booking-submit-btn text-white font-bold py-4 px-6 rounded-lg transition duration-200 flex items-center justify-center gap-2 text-lg\" style=\"width: 100%; background: linear-gradient(to bottom right, #ee0842, #fba7a7) !important; border: none !important;\">\r\n                            <span class=\"btn-icon\">\u2705<\/span>\r\n                            \u0110\u1eb7t L\u1ecbch Ngay                        <\/button>\r\n                    <\/div>\r\n                <\/form>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Success Modal -->\r\n<!-- Success Modal -->\r\n<div id=\"booking-success-modal\" class=\"fixed inset-0 hidden overflow-hidden\" aria-labelledby=\"modal-title\" role=\"dialog\" aria-modal=\"true\" style=\"z-index:2147483647;\">\r\n    <div class=\"flex items-start sm:items-center justify-center h-full px-3 py-3 sm:px-4 sm:py-4 text-center\">\r\n        <!-- Background overlay -->\r\n        <div class=\"fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75\" aria-hidden=\"true\" onclick=\"closeSuccessModal()\" style=\"z-index:0;\"><\/div>\r\n\r\n        <!-- Modal panel -->\r\n        <div class=\"inline-block w-full max-w-xs sm:max-w-xs md:max-w-xs lg:max-w-sm overflow-hidden text-left align-bottom transition-all transform bg-white rounded-xl shadow-2xl sm:align-middle relative\">\r\n            <!-- Close Button Top Right -->\r\n            <button type=\"button\" class=\"booking-success-close-btn\" style=\"position:absolute;right:12px;top:0px;z-index:10\" onclick=\"closeSuccessModal()\" aria-label=\"\u0110\u00f3ng\">\r\n                <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                    <circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"#ef4444\"\/>\r\n                    <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/>\r\n                <\/svg>\r\n            <\/button>\r\n            <!-- Success Icon Header (full width block) -->\r\n            <div class=\"w-full p-4 bg-gradient-to-br from-green-50 to-emerald-50 flex items-center justify-center rounded-lg mb-2 text-center\">\r\n                <span class=\"flex items-center justify-center w-8 h-8 bg-green-100 rounded-full animate-bounce-once mr-2\">\r\n                    <svg class=\"w-5 h-5 text-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\"><\/path>\r\n                    <\/svg>\r\n                <\/span>\r\n                <h3 class=\"text-lg font-bold text-gray-900 m-0\" id=\"modal-title\">\r\n                    \u0110\u1eb7t L\u1ecbch Th\u00e0nh C\u00f4ng!                <\/h3>\r\n            <\/div>\r\n\r\n            <!-- Booking Details -->\r\n            <div class=\"px-4 py-3 booking-success-modal-body\">\r\n                <div class=\"space-y-3\">\r\n                    <!-- Booking ID (inline label and code) -->\r\n                    <div class=\"flex items-center p-2 bg-blue-50 rounded-lg border border-blue-100 gap-2\">\r\n                        <svg class=\"w-5 h-5 text-blue-600 flex-shrink-0\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 20l4-16m2 16l4-16M6 9h14M4 15h14\"><\/path>\r\n                        <\/svg>\r\n                        <span class=\"text-xs font-medium text-blue-900 uppercase tracking-wide mr-2\">M\u00e3 \u0110\u1eb7t L\u1ecbch:<\/span>\r\n                        <span class=\"text-base font-bold text-blue-600\" id=\"modal-booking-id\">12345<\/span>\r\n                    <\/div>\r\n\r\n                    <!-- Customer Info -->\r\n                    <div class=\"p-4 bg-gray-50 rounded-lg\">\r\n                        <h4 class=\"text-sm font-semibold text-gray-900 mb-3 flex items-center\">\r\n                            <svg class=\"w-4 h-4 mr-2 text-gray-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"><\/path>\r\n                            <\/svg>\r\n                            Th\u00f4ng Tin Kh\u00e1ch H\u00e0ng                        <\/h4>\r\n                        <div class=\"space-y-2 text-sm\">\r\n                            <div class=\"flex justify-between\">\r\n                                <span class=\"text-gray-600\">H\u1ecd t\u00ean:<\/span>\r\n                                <span class=\"font-medium text-gray-900\" id=\"modal-customer-name\">-<\/span>\r\n                            <\/div>\r\n                            <div class=\"flex justify-between\" id=\"modal-customer-email-row\">\r\n                                <span class=\"text-gray-600\">Email:<\/span>\r\n                                <span class=\"font-medium text-gray-900\" id=\"modal-customer-email\">-<\/span>\r\n                            <\/div>\r\n                            <div class=\"flex justify-between\">\r\n                                <span class=\"text-gray-600\">S\u1ed1 \u0111i\u1ec7n tho\u1ea1i:<\/span>\r\n                                <span class=\"font-medium text-gray-900\" id=\"modal-customer-phone\">-<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Appointment Info -->\r\n                    <div class=\"p-4 bg-purple-50 rounded-lg border border-purple-100\">\r\n                        <h4 class=\"text-sm font-semibold text-gray-900 mb-3 flex items-center\">\r\n                            <svg class=\"w-4 h-4 mr-2 text-purple-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"><\/path>\r\n                            <\/svg>\r\n                            Th\u00f4ng Tin L\u1ecbch H\u1eb9n                        <\/h4>\r\n                        <div class=\"space-y-2 text-sm\">\r\n                            <div class=\"flex justify-between\">\r\n                                <span class=\"text-gray-600\">D\u1ecbch v\u1ee5:<\/span>\r\n                                <span class=\"font-medium text-gray-900\" id=\"modal-service\">-<\/span>\r\n                            <\/div>\r\n                            <div class=\"flex justify-between\">\r\n                                <span class=\"text-gray-600\">Nh\u00e2n vi\u00ean:<\/span>\r\n                                <span class=\"font-medium text-gray-900\" id=\"modal-staff\">-<\/span>\r\n                            <\/div>\r\n                            <div class=\"flex justify-between\">\r\n                                <span class=\"text-gray-600\">\u0110\u1ecba \u0111i\u1ec3m:<\/span>\r\n                                <span class=\"font-medium text-gray-900\" id=\"modal-location\">-<\/span>\r\n                            <\/div>\r\n                            <div class=\"flex justify-between items-center pt-2 border-t border-purple-200\">\r\n                                <span class=\"text-gray-600\">Ng\u00e0y gi\u1edd:<\/span>\r\n                                <div class=\"text-right\">\r\n                                    <p class=\"font-bold text-purple-700\" id=\"modal-date\">-<\/p>\r\n                                    <p class=\"text-lg font-bold text-purple-900\" id=\"modal-time\">-<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Notes -->\r\n                    <div id=\"modal-notes-wrapper\" class=\"hidden p-2 bg-yellow-50 rounded-lg border border-yellow-100\">\r\n                        <h4 class=\"text-sm font-semibold text-red-600 mb-1 flex items-center\">\r\n                            <svg class=\"w-4 h-4 mr-2 text-yellow-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\"><\/path>\r\n                            <\/svg>\r\n                            Ghi ch\u00fa                        <\/h4>\r\n                        <p class=\"text-sm text-red-600\" id=\"modal-notes\">-<\/p>\r\n                    <\/div>\r\n\r\n                    <!-- Status Badge -->\r\n                    <div class=\"flex items-center justify-center p-3 rounded-lg\" id=\"modal-status-container\">\r\n                        <span class=\"inline-flex items-center px-3 py-1.5 rounded-full text-xs font-semibold\" id=\"modal-status-badge\">\r\n                            <svg class=\"w-3.5 h-3.5 mr-1.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n                                <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"><\/path>\r\n                            <\/svg>\r\n                            <span id=\"modal-status-text\">\u0110ang Ch\u1edd X\u00e1c Nh\u1eadn<\/span>\r\n                        <\/span>\r\n                    <\/div>\r\n\r\n                    <!-- Info Message -->\r\n                    <div id=\"modal-email-info-box\" class=\"p-4 bg-blue-50 rounded-lg border-l-4 border-blue-400\">\r\n                        <div class=\"flex\">\r\n                            <div class=\"flex-shrink-0\">\r\n                                <svg class=\"w-4 h-4 text-blue-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\r\n                                    <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\"><\/path>\r\n                                <\/svg>\r\n                            <\/div>\r\n                            <div class=\"ml-3\">\r\n                                <p class=\"text-sm text-blue-700\">\r\n                                    Ch\u00fang t\u00f4i \u0111\u00e3 g\u1eedi email x\u00e1c nh\u1eadn \u0111\u1ebfn \u0111\u1ecba ch\u1ec9 c\u1ee7a b\u1ea1n. Vui l\u00f2ng ki\u1ec3m tra h\u1ed9p th\u01b0 \u0111\u1ec3 bi\u1ebft th\u00eam chi ti\u1ebft.                                <\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Thank You Message as block -->\r\n            <div class=\"w-full p-3 mt-2 mb-3 bg-blue-50 rounded-lg border border-blue-100 flex items-center justify-center\">\r\n                <span class=\"text-xs text-gray-700 text-center break-words\" style=\"width:100%;text-align:center;\">\r\n                    C\u1ea3m \u01a1n b\u1ea1n \u0111\u00e3 tin t\u01b0\u1edfng s\u1eed d\u1ee5ng d\u1ecbch v\u1ee5 c\u1ee7a ch\u00fang t\u00f4i                <\/span>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n@keyframes bounce-once {\r\n    0%, 100% { transform: translateY(0); }\r\n    50% { transform: translateY(-7px); }\r\n}\r\n.animate-bounce-once {\r\n    animation: bounce-once 0.5s ease-in-out;\r\n}\r\n\r\n\/* Modal always on top and centered *\/\r\n#booking-success-modal {\r\n    z-index: 999999999 !important;\r\n    position: fixed !important;\r\n    inset: 0 !important;\r\n    isolation: isolate !important;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    pointer-events: auto !important;\r\n}\r\n\r\n#booking-success-modal > div {\r\n    position: fixed !important;\r\n    z-index: 1000000000 !important;\r\n    padding: 0 !important;\r\n    align-items: center !important;\r\n    justify-content: center !important;\r\n    width: 100vw;\r\n    height: 100vh;\r\n    display: flex;\r\n    top: 56px;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    pointer-events: auto !important;\r\n    overflow-y: auto;\r\n    -webkit-overflow-scrolling: touch;\r\n}\r\n#booking-success-modal > div > div.inline-block {\r\n    position: relative;\r\n    z-index: 2;\r\n    max-width: 340px !important;\r\n    width: 100%;\r\n    max-height: calc(100dvh - 8px) !important;\r\n    display: flex;\r\n    flex-direction: column;\r\n    border-radius: 14px !important;\r\n    margin: auto;\r\n    overflow-y: auto;\r\n    -webkit-overflow-scrolling: touch;\r\n}\r\n\r\n@media (max-width: 640px) {\r\n    #booking-success-modal > div > div.inline-block {\r\n        max-width: 300px !important;\r\n        min-width: 0 !important;\r\n        width: 94vw !important;\r\n    }\r\n    #booking-success-modal > div {\r\n        width: 100vw !important;\r\n        height: 100vh !important;\r\n        padding: 0 !important;\r\n    }\r\n}\r\n\r\n#booking-success-modal .booking-success-close-btn {\r\n    position: static;\r\n    margin-left: 12px;\r\n    background: transparent;\r\n    border: none;\r\n    padding: 0;\r\n    width: 28px;\r\n    height: 28px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    box-shadow: none;\r\n    transition: all 0.18s ease;\r\n}\r\n\r\n#booking-success-modal .booking-success-close-btn svg {\r\n    width: 28px;\r\n    height: 28px;\r\n    display: block;\r\n}\r\n\r\n#booking-success-modal .booking-success-close-btn:hover svg circle {\r\n    fill: #dc2626;\r\n}\r\n\r\n#booking-success-modal .booking-success-close-btn:focus-visible {\r\n    outline: 2px solid #ef4444;\r\n    outline-offset: 2px;\r\n}\r\n\r\n#booking-success-modal .booking-success-modal-body {\r\n    overflow-y: auto;\r\n    -webkit-overflow-scrolling: touch;\r\n    max-height: calc(100dvh - 90px) !important;\r\n    padding: 8px 8px !important;\r\n    scrollbar-width: thin;\r\n}\r\n\r\n#booking-success-modal .booking-success-modal-body::-webkit-scrollbar {\r\n    width: 6px;\r\n}\r\n\r\n#booking-success-modal .booking-success-modal-body::-webkit-scrollbar-thumb {\r\n    background: #9ca3af;\r\n    border-radius: 999px;\r\n}\r\n\r\n#booking-success-modal .booking-success-modal-body::-webkit-scrollbar-track {\r\n    background: transparent;\r\n}\r\n\r\n#booking-success-modal .booking-success-modal-body .space-y-3 > div {\r\n    padding: 6px !important;\r\n    border-radius: 8px !important;\r\n}\r\n\r\n#booking-success-modal .booking-success-modal-body h4 {\r\n    font-size: 0.92rem !important;\r\n    margin-bottom: 5px !important;\r\n}\r\n\r\n#booking-success-modal .booking-success-modal-body .text-sm {\r\n    font-size: 0.87rem !important;\r\n    line-height: 1.4 !important;\r\n}\r\n\r\n#booking-success-modal #modal-booking-id {\r\n    font-size: 0.98rem !important;\r\n}\r\n\r\n#booking-success-modal #modal-time {\r\n    font-size: 0.98rem !important;\r\n}\r\n\r\n@media (max-width: 640px) {\r\n    #booking-success-modal > div {\r\n        padding: 0 !important;\r\n        align-items: flex-start !important;\r\n        justify-content: center !important;\r\n        top: 10px !important;\r\n        bottom: 84px !important;\r\n    }\r\n\r\n    #booking-success-modal > div > div.inline-block {\r\n        max-width: 100% !important;\r\n        border-radius: 10px !important;\r\n        max-height: calc(100dvh - 4px) !important;\r\n    }\r\n\r\n    #booking-success-modal .booking-success-close-btn {\r\n        width: 22px;\r\n        height: 22px;\r\n    }\r\n\r\n    #booking-success-modal .booking-success-close-btn svg {\r\n        width: 22px;\r\n        height: 22px;\r\n    }\r\n\r\n    #booking-success-modal .bg-gradient-to-br.from-green-50.to-emerald-50 {\r\n        padding: 8px 6px 6px !important;\r\n    }\r\n\r\n    #booking-success-modal .animate-bounce-once {\r\n        width: 24px !important;\r\n        height: 24px !important;\r\n        margin-bottom: 0 !important;\r\n    }\r\n\r\n    #booking-success-modal .animate-bounce-once svg {\r\n        width: 14px !important;\r\n        height: 14px !important;\r\n    }\r\n\r\n    #booking-success-modal #modal-title {\r\n        font-size: 0.95rem !important;\r\n        line-height: 1.15 !important;\r\n        margin-bottom: 0 !important;\r\n    }\r\n\r\n    #booking-success-modal #modal-title + p {\r\n        font-size: 0.7rem !important;\r\n        line-height: 1.2 !important;\r\n    }\r\n\r\n    #booking-success-modal .booking-success-modal-body {\r\n        max-height: calc(100dvh - 50px) !important;\r\n        padding: 5px 3px !important;\r\n    }\r\n\r\n    #booking-success-modal .booking-success-modal-body .space-y-3 > div {\r\n        padding: 4px !important;\r\n        border-radius: 6px !important;\r\n    }\r\n\r\n    #booking-success-modal .booking-success-modal-body h4 {\r\n        font-size: 0.8rem !important;\r\n        margin-bottom: 3px !important;\r\n    }\r\n\r\n    #booking-success-modal .booking-success-modal-body .text-sm {\r\n        font-size: 0.75rem !important;\r\n        line-height: 1.3 !important;\r\n    }\r\n\r\n    #booking-success-modal #modal-booking-id {\r\n        font-size: 0.85rem !important;\r\n    }\r\n\r\n    #booking-success-modal #modal-time {\r\n        font-size: 0.85rem !important;\r\n    }\r\n}\r\n\r\nbody:has(#booking-success-modal:not(.hidden)) .stuck,\r\nbody:has(#booking-success-modal:not(.hidden)) .sticky,\r\nbody:has(#booking-success-modal:not(.hidden)) .ux-sticky-footer,\r\nbody:has(#booking-success-modal:not(.hidden)) .footer-wrapper {\r\n    z-index: 0 !important;\r\n}\r\n\r\nbody:has(#booking-success-modal:not(.hidden)) {\r\n    position: fixed !important;\r\n    width: 100vw !important;\r\n    overflow: hidden !important;\r\n    touch-action: auto !important;\r\n    overscroll-behavior: contain !important;\r\n    height: 100vh !important;\r\n    top: 0 !important;\r\n    left: 0 !important;\r\n}\r\n<\/style>\r\n\r\n<style id=\"dat-lich-dynamic-styles\">\r\n    \/* Dynamic Color Variables *\/\r\n    :root {\r\n        --dat-lich-warning: #F59E0B;\r\n        --dat-lich-error: #EF4444;\r\n        --dat-lich-background: #FFFFFF;\r\n        --dat-lich-text: #1F2937;\r\n        --dat-lich-border: #E5E7EB;\r\n        --dat-lich-selected: #1e40af;\r\n        --dat-lich-selected-time: #63B710;\r\n        --dat-lich-normal-day: #FFFFFF;\r\n        --dat-lich-unavailable-day: #FEE2E2;\r\n        --dat-lich-selected-border: #1e40af;\r\n        --dat-lich-selected-bg: #3b82f6;\r\n        --dat-lich-today-border: #1e40af;\r\n        --dat-lich-today-dot: #1e40af;\r\n        --dat-lich-holiday-text: #92400e;\r\n        --dat-lich-holiday-border: #fbbf24;\r\n        --dat-lich-holiday-shadow: #fbbf24;\r\n        --dat-lich-available-slot-start: #059669;\r\n        --dat-lich-available-slot-end: #10b981;\r\n        --dat-lich-selected-slot-start: #1d4ed8;\r\n        --dat-lich-selected-slot-end: #3b82f6;\r\n        --dat-lich-available-time: #E0F2FE;\r\n        --dat-lich-unavailable-time: #fef2f2;\r\n        --dat-lich-hover: #f1f5f9;\r\n        --dat-lich-border-hover: #1e40af;\r\n        --dat-lich-holiday: #fefce8;\r\n        --dat-lich-primary: #1e40af;\r\n    }\r\n\r\n    \/* Apply dynamic colors to booking form - OVERRIDE INLINE STYLES WITH MAXIMUM SPECIFICITY *\/\r\n    html body .dat-lich-booking-container.dat-lich-booking-container {\r\n        color: var(--dat-lich-text) !important;\r\n    }\r\n\r\n    \/* Form inputs - MAXIMUM SPECIFICITY *\/\r\n    html body .dat-lich-booking-container.dat-lich-booking-container input,\r\n    html body .dat-lich-booking-container.dat-lich-booking-container select,\r\n    html body .dat-lich-booking-container.dat-lich-booking-container textarea {\r\n        border-color: var(--dat-lich-border) !important;\r\n        color: var(--dat-lich-text) !important;\r\n        background-color: var(--dat-lich-background) !important;\r\n    }\r\n\r\n    html body .dat-lich-booking-container.dat-lich-booking-container input:focus,\r\n    html body .dat-lich-booking-container.dat-lich-booking-container select:focus,\r\n    html body .dat-lich-booking-container.dat-lich-booking-container textarea:focus {\r\n        border-color: var(--dat-lich-primary) !important;\r\n        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;\r\n    }\r\n\r\n    \/* REMOVED: Button styles moved to inline styles for better override *\/\r\n\r\n    \/* Submit button styles *\/\r\n    .booking-submit-btn {\r\n        width: 100% !important;\r\n        display: flex !important;\r\n        align-items: center !important;\r\n        justify-content: center !important;\r\n        gap: 0.5rem !important;\r\n        transition: all 0.2s ease !important;\r\n        border: none !important;\r\n    }\r\n\r\n    .booking-submit-btn:hover {\r\n        transform: translateY(-1px);\r\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n    }\r\n\r\n    \/* Selected calendar days - MAXIMUM SPECIFICITY *\/\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .calendar-day.selected {\r\n        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;\r\n        color: #ffffff !important;\r\n        border-color: #1e40af !important;\r\n        transform: translateY(-2px) scale(1.05) !important;\r\n        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3) !important;\r\n        font-weight: 700 !important;\r\n    }\r\n\r\n    \/* Force override for selected calendar days *\/\r\n    .dat-lich-booking-container .calendar-day.selected {\r\n        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;\r\n        color: #ffffff !important;\r\n        border-color: #1e40af !important;\r\n        transform: translateY(-2px) scale(1.05) !important;\r\n        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3) !important;\r\n        font-weight: 700 !important;\r\n    }\r\n\r\n    \/* Today calendar day (only for available dates) - Updated 1779986627 *\/\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .calendar-day.today.available {\r\n        border-color: #1e40af !important;\r\n        font-weight: 700 !important;\r\n        box-shadow: 0 0 0 1px #1e40af inset !important;\r\n        position: relative !important;\r\n    }\r\n\r\n    .dat-lich-booking-container .calendar-day.today.available:not(.selected)::after {\r\n        content: '' !important;\r\n        position: absolute !important;\r\n        top: 2px !important;\r\n        right: 2px !important;\r\n        width: 6px !important;\r\n        height: 6px !important;\r\n        background: #1e40af !important;\r\n        border-radius: 50% !important;\r\n    }\r\n\r\n    \/* Normal calendar days *\/\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .calendar-day {\r\n        background-color: var(--dat-lich-normal-day) !important;\r\n        color: var(--dat-lich-text) !important;\r\n    }\r\n\r\n    \/* Force override for normal calendar days *\/\r\n    .dat-lich-booking-container .calendar-day {\r\n        background-color: var(--dat-lich-normal-day, #FFFFFF) !important;\r\n        color: var(--dat-lich-text, #1F2937) !important;\r\n    }\r\n\r\n    \/* Unavailable calendar days *\/\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .calendar-day.unavailable {\r\n        background-color: var(--dat-lich-holiday) !important;\r\n        color: var(--dat-lich-text) !important;\r\n        opacity: 0.6 !important;\r\n    }\r\n\r\n    \/* Force override for unavailable calendar days *\/\r\n    .dat-lich-booking-container .calendar-day.unavailable {\r\n        background-color: var(--dat-lich-holiday, #FEF2F2) !important;\r\n        color: var(--dat-lich-text, #1F2937) !important;\r\n        opacity: 0.6 !important;\r\n    }\r\n\r\n    \/* Calendar day hover *\/\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .calendar-day:hover:not(.selected):not(.unavailable) {\r\n        background-color: var(--dat-lich-hover) !important;\r\n        border-color: var(--dat-lich-border-hover) !important;\r\n    }\r\n\r\n    \/* Force override for calendar day hover *\/\r\n    .dat-lich-booking-container .calendar-day:hover:not(.selected):not(.unavailable) {\r\n        background-color: var(--dat-lich-hover, #E2E8F0) !important;\r\n        border-color: var(--dat-lich-border-hover, #643BF7) !important;\r\n    }\r\n\r\n    \/* Time slots *\/\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .time-slot {\r\n        background-color: var(--dat-lich-available-time) !important;\r\n        color: var(--dat-lich-text) !important;\r\n        border: 1px solid var(--dat-lich-border) !important;\r\n    }\r\n\r\n    \/* Selected time slot *\/\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .time-slot.selected {\r\n        background-color: var(--dat-lich-selected-time) !important;\r\n        color: white !important;\r\n        border-color: var(--dat-lich-selected-time) !important;\r\n    }\r\n\r\n    \/* Unavailable time slot *\/\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .time-slot.unavailable {\r\n        background-color: var(--dat-lich-unavailable-time) !important;\r\n        color: var(--dat-lich-text) !important;\r\n        opacity: 0.6 !important;\r\n        cursor: not-allowed !important;\r\n    }\r\n\r\n    \/* Booked time slot (same as unavailable) *\/\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .time-slot.booked {\r\n        background-color: var(--dat-lich-unavailable-time) !important;\r\n        color: var(--dat-lich-text) !important;\r\n        opacity: 0.6 !important;\r\n        cursor: not-allowed !important;\r\n        pointer-events: none !important;\r\n    }\r\n\r\n    \/* Time slot hover *\/\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .time-slot:hover:not(.selected):not(.unavailable) {\r\n        background-color: var(--dat-lich-hover) !important;\r\n        border-color: var(--dat-lich-primary) !important;\r\n    }\r\n\r\n    \/* Legend boxes - Time slots legend colors *\/\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .legend-box.available {\r\n        background-color: var(--dat-lich-available-slot-start) !important;\r\n        border: 1px solid var(--dat-lich-border) !important;\r\n    }\r\n\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .legend-box.booked {\r\n        background-color: var(--dat-lich-unavailable-time) !important;\r\n        border: 1px solid var(--dat-lich-border) !important;\r\n    }\r\n\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .legend-box.selected {\r\n        background-color: var(--dat-lich-selected-slot-start) !important;\r\n        border: 1px solid var(--dat-lich-selected-slot-start) !important;\r\n    }\r\n\r\n    \/* Legend styling *\/\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .time-slots-legend {\r\n        display: flex !important;\r\n        gap: 40px !important;\r\n        margin-bottom: 15px !important;\r\n        flex-wrap: wrap !important;\r\n    }\r\n\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .legend-item {\r\n        display: flex !important;\r\n        align-items: center !important;\r\n        gap: 8px !important;\r\n        font-size: 14px !important;\r\n        color: var(--dat-lich-text) !important;\r\n    }\r\n\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .legend-box {\r\n        width: 30px !important;\r\n        height: 30px !important;\r\n        border-radius: 3px !important;\r\n        display: inline-block !important;\r\n    }\r\n\r\n    \/* REMOVED: Header gradient styles moved to inline styles for better override *\/\r\n\r\n    \/* Header styles - FIX: Target correct headers *\/\r\n    \r\n    \/* Success states *\/\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .success-message {\r\n        background-color: rgba(16, 185, 129, 0.1) !important;\r\n        border-color: var(--dat-lich-success) !important;\r\n        color: var(--dat-lich-success) !important;\r\n    }\r\n\r\n    \/* Error states *\/\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .error-message {\r\n        background-color: rgba(239, 68, 68, 0.1) !important;\r\n        border-color: var(--dat-lich-error) !important;\r\n        color: var(--dat-lich-error) !important;\r\n    }\r\n\r\n    \/* Warning states *\/\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .warning-message {\r\n        background-color: rgba(245, 158, 11, 0.1) !important;\r\n        border-color: var(--dat-lich-warning) !important;\r\n        color: var(--dat-lich-warning) !important;\r\n    }\r\n\r\n    \/* Loading spinner animation *\/\r\n    @keyframes spin {\r\n        0% { transform: rotate(0deg); }\r\n        100% { transform: rotate(360deg); }\r\n    }\r\n\r\n    \/* Loading button state *\/\r\n    html body .dat-lich-booking-container.dat-lich-booking-container .booking-submit-btn.loading {\r\n        opacity: 0.8 !important;\r\n        cursor: not-allowed !important;\r\n        position: relative !important;\r\n    }\r\n\r\n    \/* ===== Select Wrapper & Dropdown Styling ===== *\/\r\n    .dat-lich-booking-container .select-wrapper {\r\n        position: relative;\r\n        display: block;\r\n        width: 100%;\r\n    }\r\n\r\n    \/* Remove any focus outline from the wrapper div itself *\/\r\n    .dat-lich-booking-container .select-wrapper:focus,\r\n    .dat-lich-booking-container .select-wrapper *:focus-visible {\r\n        outline: none !important;\r\n        box-shadow: none !important;\r\n    }\r\n\r\n    \/* Custom-styled select element *\/\r\n    .dat-lich-booking-container .select-wrapper select {\r\n        display: block !important;\r\n        width: 100% !important;\r\n        padding: 12px 44px 12px 16px !important;\r\n        font-size: 15px !important;\r\n        font-weight: 400 !important;\r\n        line-height: 1.5 !important;\r\n        color: var(--dat-lich-text, #1F2937) !important;\r\n        background-color: var(--dat-lich-background, #fff) !important;\r\n        border: 1.5px solid var(--dat-lich-border, #D1D5DB) !important;\r\n        border-radius: 10px !important;\r\n        appearance: none !important;\r\n        -webkit-appearance: none !important;\r\n        -moz-appearance: none !important;\r\n        cursor: pointer !important;\r\n        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;\r\n        outline: none !important;\r\n        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;\r\n        min-height: 48px !important;\r\n        \/* Mobile: ensure touch events work *\/\r\n        position: relative !important;\r\n        z-index: 2 !important;\r\n        pointer-events: auto !important;\r\n        touch-action: manipulation !important;\r\n        -webkit-tap-highlight-color: transparent !important;\r\n    }\r\n\r\n    \/* Select hover state *\/\r\n    .dat-lich-booking-container .select-wrapper select:hover {\r\n        border-color: var(--dat-lich-border-hover, #6366f1) !important;\r\n        box-shadow: 0 2px 8px rgba(99,102,241,0.10) !important;\r\n    }\r\n\r\n    \/* Select focus state \u2013 no blue browser ring, custom ring *\/\r\n    .dat-lich-booking-container .select-wrapper select:focus {\r\n        outline: none !important;\r\n        border-color: var(--dat-lich-selected, #2563EB) !important;\r\n        box-shadow: 0 0 0 3px rgba(37,99,235,0.12), 0 2px 8px rgba(37,99,235,0.08) !important;\r\n    }\r\n\r\n    \/* Arrow icon container \u2013 always non-interactive, sit below select *\/\r\n    .dat-lich-booking-container .select-wrapper > .absolute {\r\n        pointer-events: none !important;\r\n        z-index: 1 !important;\r\n        right: 12px !important;\r\n        top: 0 !important;\r\n        bottom: 0 !important;\r\n        transform: none !important;\r\n        display: flex !important;\r\n        align-items: center !important;\r\n    }\r\n\r\n    .dat-lich-booking-container .select-wrapper > .absolute svg {\r\n        width: 18px !important;\r\n        height: 18px !important;\r\n        color: #9CA3AF !important;\r\n        transition: transform 0.2s ease !important;\r\n    }\r\n\r\n    \/* Rotate arrow when select is open (focus) *\/\r\n    .dat-lich-booking-container .select-wrapper select:focus ~ .absolute svg {\r\n        transform: rotate(180deg) !important;\r\n        color: var(--dat-lich-selected, #2563EB) !important;\r\n    }\r\n\r\n    \/* Option elements \u2013 basic cross-browser improvements *\/\r\n    .dat-lich-booking-container .select-wrapper select option {\r\n        padding: 10px 16px !important;\r\n        font-size: 15px !important;\r\n        background-color: #fff !important;\r\n        color: #1F2937 !important;\r\n    }\r\n\r\n    .dat-lich-booking-container .select-wrapper select option:checked,\r\n    .dat-lich-booking-container .select-wrapper select option:hover {\r\n        background-color: #EFF6FF !important;\r\n        color: #1D4ED8 !important;\r\n    }\r\n\r\n    \/* Placeholder option (value=\"\") *\/\r\n    .dat-lich-booking-container .select-wrapper select option[value=\"\"] {\r\n        color: #9CA3AF !important;\r\n        font-style: italic !important;\r\n    }\r\n\r\n    \/* Mobile responsive adjustments *\/\r\n    @media (max-width: 640px) {\r\n        .dat-lich-booking-container .customer-info-section .form-row {\r\n            display: flex !important;\r\n            flex-direction: column !important;\r\n            gap: 12px !important;\r\n            margin-bottom: 12px !important;\r\n        }\r\n\r\n        .dat-lich-booking-container .customer-info-section .form-row > .form-group {\r\n            width: 100% !important;\r\n            max-width: 100% !important;\r\n            margin-bottom: 0 !important;\r\n        }\r\n\r\n        .dat-lich-booking-container #booking-form input,\r\n        .dat-lich-booking-container #booking-form textarea {\r\n            font-size: 17px !important;\r\n            line-height: 1.45 !important;\r\n        }\r\n\r\n        html body .dat-lich-booking-container #booking-form #customer_name,\r\n        html body .dat-lich-booking-container #booking-form #customer_phone,\r\n        html body .dat-lich-booking-container #booking-form #customer_email {\r\n            font-size: 17px !important;\r\n            line-height: 1.45 !important;\r\n            min-height: 48px !important;\r\n            -webkit-text-size-adjust: 100% !important;\r\n        }\r\n\r\n        .dat-lich-booking-container .select-wrapper select {\r\n            font-size: 17px !important; \/* prevent iOS zoom on focus *\/\r\n            padding: 13px 44px 13px 14px !important;\r\n            min-height: 50px !important;\r\n            \/* iOS fix: ensure native picker opens *\/\r\n            appearance: auto !important;\r\n        -webkit-appearance: menulist !important;\r\n        background-image: none !important;\r\n            opacity: 1 !important;\r\n        }\r\n\r\n        \/* Ensure wrapper doesn't clip the native picker overlay *\/\r\n        .dat-lich-booking-container .select-wrapper {\r\n            overflow: visible !important;\r\n        }\r\n    }\r\n<\/style>\r\n\n\t\t<\/div>\n\t\t\t\t\n<style>\n#col-934997653 > .col-inner {\n  padding: 50px 30px 10px 30px;\n  border-radius: 10px;\n}\n@media (min-width:550px) {\n  #col-934997653 > .col-inner {\n    padding: 70px 70px 30px 70px;\n  }\n}\n<\/style>\n\t<\/div>\n\n\t\n<\/div>\n\t\t<\/div>\n\n\t\t\n<style>\n#section_1505499608 {\n  padding-top: 60px;\n  padding-bottom: 60px;\n}\n@media (min-width:550px) {\n  #section_1505499608 {\n    padding-top: 90px;\n    padding-bottom: 90px;\n  }\n}\n<\/style>\n\t<\/section>\n\t\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-blank.php","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/datlich.diennhienweb.com\/index.php\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datlich.diennhienweb.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/datlich.diennhienweb.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/datlich.diennhienweb.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datlich.diennhienweb.com\/index.php\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":6,"href":"https:\/\/datlich.diennhienweb.com\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":28,"href":"https:\/\/datlich.diennhienweb.com\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions\/28"}],"wp:attachment":[{"href":"https:\/\/datlich.diennhienweb.com\/index.php\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}