:root{--color-primary: #4E6EDE;--color-primary-dark: #2D55EB;--color-primary-darker: #2347CC;--color-primary-light: #EFF6FF;--color-primary-soft: #F2F5FF;--color-primary-lightest: #E5EDFF;--color-primary-lighter: #EEF4FF;--color-secondary: #2D2A4A;--color-open: #27C840;--color-black: #000000;--color-black-solid: #0A0A0A;--color-gray-900: #111827;--color-gray-800: #1A1A1A;--color-gray-700: #213547;--color-gray-600: #374151;--color-gray-500: #4A5565;--color-gray-400: #6A7282;--color-gray-300: #6B7280;--color-gray-250: #B3B3B3;--color-gray-200: #787F83;--color-gray-150: #767676;--color-gray-100: #A0A6A9;--color-gray-50: #F3F4F6;--color-gray-25: #F3FBFF;--color-white: #FFFFFF;--color-white-light: #F3F5F7;--color-white-solid: #f9fafb;--color-putih: #d9d9d9;--color-error: #FF3B30;--color-success: #34C759;--color-success-dark: #248A3D;--color-success-light: #D1F4DD;--color-success-gradient-start: #2D9F4E;--color-warning: #FF9500;--color-info: #007AFF;--color-info-600: #0066CC;--color-purple-50: #F3E8FF;--color-purple-100: #E9D5FF;--color-purple-400: #C4B5FD;--color-purple-700: #7C3AED;--color-purple-gradient-start: #F3E8FF;--color-purple-gradient-end: #E9D5FF;--color-blue-50: #EFF6FF;--color-blue-600: #155DFC;--color-blue-duration: #2591b8;--color-link: #646CFF;--color-link-hover: #535BF2;--color-link-light: #747BFF;--color-overlay-dark: rgba(0, 0, 0, .45);--color-overlay-backdrop: rgba(0, 0, 0, .7);--color-overlay-white-90: rgba(255, 255, 255, .9);--color-overlay-white-85: rgba(255, 255, 255, .85);--color-overlay-white-15: rgba(255, 255, 255, .15);--color-overlay-white-30: rgba(255, 255, 255, .3);--color-overlay-primary-dark-10: rgba(45, 85, 235, .1);--color-overlay-primary-dark-15: rgba(45, 85, 235, .15);--color-overlay-info-5: rgba(0, 102, 204, .05);--font-primary: "Inter";--font-thai: "Noto Sans Thai", "Inter", system-ui, sans-serif;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-base: 16px;--font-size-md: 18px;--font-size-lg: 20px;--font-size-lg-2: 22px;--font-size-xl: 24px;--font-size-2xl: 28px;--font-size-3xl: 3.2em;--font-size-amount: 36px;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.1;--line-height-snug: 1.2;--line-height-normal: 1.4;--line-height-relaxed: 1.5;--line-height-loose: 22px;--line-height-xl: 24px;--line-height-2xl: 28px;--space-0: 0;--space-1: 2px;--space-2: 4px;--space-3: 6px;--space-4: 8px;--space-5: 10px;--space-6: 12px;--space-7: 14px;--space-8: 16px;--space-9: 18px;--space-10: 20px;--space-12: 24px;--space-14: 26px;--space-16: 32px;--space-20: 40px;--space-24: 48px;--space-32: 64px;--radius-none: 0;--radius-sm: 8px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 16px;--radius-2xl: 17px;--radius-3xl: 18px;--radius-4xl: 24px;--radius-5xl: 32px;--radius-full: 999px;--border-width-thin: 1px;--border-width-medium: 2px;--border-color-default: #E5E7EB;--border-color-transparent: #ededed;--focus-ring-color: var(--color-primary);--focus-ring-width: 2px;--focus-ring-offset: 2px;--tap-scale: .96;--tap-transition: transform .1s ease-out;--shadow-none: none;--shadow-sm: 0 1px 2px -1px rgba(0, 0, 0, .1);--shadow-md: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 1px 5px rgba(0, 0, 0, .15);--shadow-xl: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-2xl: 0 4px 6px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .1);--shadow-soft: 0 4px 6px rgba(0, 0, 0, .05);--shadow-overlay-top: 0 -2px 4px rgba(0, 0, 0, .05);--shadow-overlay-bottom: 0 2px 7px rgba(0, 0, 0, .25);--height-chip: 32px;--height-input: 44px;--height-tab: 40px;--height-button: 56px;--height-footer: 64px;--height-page-header: 80px;--height-icon-btn: 40px;--height-icon-btn-lg: 48px;--width-search-btn: 36px;--width-add-btn: 40px;--width-icon-btn: 40px;--width-footer-item: 64px;--width-container: 1280px;--width-card-max: 420px;--width-service-max: 400px;--width-chip-row: 303px;--width-chip-row-tablet: 400px;--width-chip-row-desktop: 500px;--size-icon-chip-w: 16px;--size-icon-chip-h: 20px;--height-image-cover: 250px;--height-image-card: 290px;--height-image-card-compact: 200px;--height-image-detail: 160px;--size-qr-image: 160px;--size-qr-image-tablet: 250px;--height-service-card-min: 96px;--size-service-card-image: 96px;--transition-fast: .2s ease;--transition-normal: .25s;--transition-slow: .3s ease;--z-base: 0;--z-above: 1;--z-sticky: 10;--z-modal: 10000;--breakpoint-sm: 480px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--font-size-title-responsive: 24px;--font-size-section-responsive: 18px;--font-size-body-responsive: 16px;--font-size-button-responsive: 24px;--font-size-small-responsive: 14px;--space-content-responsive: 14px;--space-section-responsive: 12px;--space-gap-responsive: 8px;--space-action-responsive: 24px;--height-image-responsive: clamp(250px, 40dvh, 250px);--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--safe-area-left: env(safe-area-inset-left, 0px);--safe-area-right: env(safe-area-inset-right, 0px);--viewport-height: 100dvh;--viewport-height-small: 100svh;--viewport-height-large: 100lvh}:root{font-family:var(--font-primary);line-height:var(--line-height-relaxed);font-weight:var(--font-weight-regular);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{overscroll-behavior:none;scroll-behavior:smooth}@supports (-webkit-touch-callout: none){.app-route-wrapper,.home-container,.service-detail-wrapper,.booking-success-page,.payment-page,.container{min-height:-webkit-fill-available}}a{font-weight:var(--font-weight-medium);color:var(--color-link);text-decoration:inherit}a:hover{color:var(--color-link-hover)}body{margin:0;background-color:var(--color-white);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior-y:contain}.app-route-wrapper{min-height:100dvh;background-color:var(--color-white)}h1{font-size:var(--font-size-3xl);line-height:var(--line-height-tight)}button{border-radius:var(--radius-sm);border:var(--border-width-thin) solid var(--border-color-transparent);padding:.6em 1.2em;font-size:1em;font-weight:var(--font-weight-medium);font-family:inherit;background-color:var(--color-white);cursor:pointer;transition:border-color var(--transition-normal),transform var(--tap-transition);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}button:hover{border-color:var(--color-link)}button:focus{outline:none}button:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-sm)}@media(hover:none)and (pointer:coarse){button:active{outline:none}button:focus,button:focus-visible{outline:none}}@media(prefers-color-scheme:light){:root{color:var(--color-gray-700);background-color:var(--color-white)}a:hover{color:var(--color-link-light)}button{background-color:var(--color-gray-50)}}.error-display-container{display:flex;justify-content:center;align-items:center;min-height:400px;padding:var(--space-10)}.error-display-content{text-align:center;max-width:var(--width-service-max);width:100%}.error-icon{font-size:64px;margin-bottom:var(--space-8)}.error-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-gray-900);margin-bottom:var(--space-6)}.error-message{font-size:var(--font-size-base);color:var(--color-gray-600);margin-bottom:var(--space-12);line-height:var(--line-height-relaxed)}.error-actions{display:flex;gap:var(--space-6);justify-content:center;flex-wrap:wrap}.error-btn{padding:var(--space-6) var(--space-12);border:none;border-radius:var(--radius-sm);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast)}.error-btn-retry{background-color:var(--color-info);color:var(--color-white)}.error-btn-retry:hover{background-color:var(--color-info-600)}.error-btn-back{background-color:var(--color-gray-400);color:var(--color-white)}.error-btn-back:hover{background-color:var(--color-gray-500)}.error-btn:active{transform:scale(.98)}
