@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700&family=Source+Code+Pro:wght@300;400;500;600&display=swap');:root{--color-primary:#DA291C;--color-primary-dark:#AE2116;--color-secondary:#1565C0;--color-secondary-light:#E3F2FD;--color-accent:#FFA000;--color-neutral-100:#F8FAFC;--color-neutral-200:#F1F5F9;--color-neutral-300:#E2E8F0;--color-neutral-400:#CBD5E1;--color-neutral-500:#94A3B8;--color-neutral-600:#64748B;--color-neutral-700:#334155;--color-neutral-800:#1E293B;--color-neutral-900:#0F172A;--color-primary-button:#DA291C;--color-secondary-button:#1565C0;--color-table-header:#F8FAFC;--color-list-hover:#E3F2FD;--color-card-bg:#F1F5F9;--font-primary:'Kanit',sans-serif;--font-secondary:'Roboto',sans-serif;--font-mono:'Source Code Pro',monospace;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--spacing-3xl:4rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);--transition-fast:150ms ease-in-out;--transition-base:300ms ease-in-out;--transition-slow:500ms ease-in-out}[data-theme="dark"]{--color-neutral-100:#0F172A;--color-neutral-200:#1E293B;--color-neutral-300:#334155;--color-neutral-400:#475569;--color-neutral-500:#64748B;--color-neutral-600:#94A3B8;--color-neutral-700:#CBD5E1;--color-neutral-800:#E2E8F0;--color-neutral-900:#F1F5F9;--color-table-header:#1E293B;--color-card-bg:#334155;--color-list-hover:#1E293B}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;line-height:1.6;scroll-behavior:smooth}body{font-family:var(--font-secondary);background-color:var(--color-neutral-100);color:var(--color-neutral-900);transition:var(--transition-base)}h1,h2,h3,h4,h5,h6{font-family:var(--font-primary);font-weight:600;line-height:1.2;margin-bottom:var(--spacing-md);color:var(--color-neutral-900)}h1{font-size:2.5rem;font-weight:700}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1.125rem}p{margin-bottom:var(--spacing-md);color:var(--color-neutral-800)}strong{color:var(--color-neutral-900);font-weight:600}blockquote{border-left:4px solid var(--color-primary);padding-left:var(--spacing-lg);margin:var(--spacing-lg) 0;font-style:italic;color:var(--color-neutral-700)}code{font-family:var(--font-mono);background-color:var(--color-neutral-200);padding:0.125rem 0.25rem;border-radius:var(--radius-sm);font-size:0.875rem;color:var(--color-neutral-800)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:var(--radius-md);font-family:var(--font-primary);font-weight:500;text-decoration:none;cursor:pointer;transition:var(--transition-fast);position:relative;overflow:hidden;text-transform:uppercase;letter-spacing:0.5px}.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:var(--transition-base)}.btn:hover::before{left:100%}.btn-primary{background-color:var(--color-primary);color:white;box-shadow:var(--shadow-md)}.btn-primary:hover{background-color:var(--color-primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-secondary{background-color:var(--color-secondary);color:white;box-shadow:var(--shadow-md)}.btn-secondary:hover{background-color:#1976D2;transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-outline{background-color:transparent;color:var(--color-primary);border:2px solid var(--color-primary)}.btn-outline:hover{background-color:var(--color-primary);color:white}.btn-accent{background-color:var(--color-accent);color:var(--color-neutral-900);box-shadow:var(--shadow-md)}.btn-accent:hover{background-color:#FF8F00;transform:translateY(-2px);box-shadow:var(--shadow-lg)}.card{background-color:white;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;transition:var(--transition-base);position:relative}.card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent))}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}.card-header{padding:var(--spacing-lg);background-color:var(--color-table-header);border-bottom:1px solid var(--color-neutral-300)}.card-body{padding:var(--spacing-lg)}.card-footer{padding:var(--spacing-lg);background-color:var(--color-neutral-100);border-top:1px solid var(--color-neutral-300)}.table-container{overflow-x:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin:var(--spacing-lg) 0}table{width:100%;border-collapse:collapse;background-color:white}th{background-color:var(--color-table-header);color:var(--color-neutral-900);font-family:var(--font-primary);font-weight:600;padding:var(--spacing-md) var(--spacing-lg);text-align:left;border-bottom:2px solid var(--color-neutral-300);position:relative}th::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent))}td{padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-neutral-300);color:var(--color-neutral-800)}tr:nth-child(even){background-color:var(--color-neutral-100)}tr:hover{background-color:var(--color-list-hover);color:var(--color-neutral-900)}.list{list-style:none;background-color:white;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden}.list-item{padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-neutral-300);transition:var(--transition-fast);color:var(--color-neutral-800)}.list-item:hover{background-color:var(--color-list-hover);color:var(--color-neutral-900);transform:translateX(4px)}.list-item:last-child{border-bottom:none}.input-group{margin-bottom:var(--spacing-lg)}label{display:block;margin-bottom:var(--spacing-sm);font-family:var(--font-primary);font-weight:500;color:var(--color-neutral-800)}input,textarea,select{width:100%;padding:var(--spacing-md);border:2px solid var(--color-neutral-400);border-radius:var(--radius-md);font-family:var(--font-secondary);background-color:white;color:var(--color-neutral-900);transition:var(--transition-fast)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(218,41,28,0.1)}.logo-container{display:flex;align-items:center;justify-content:center;padding:var(--spacing-sm);background-color:white;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}.logo-light-bg{background-color:white;padding:var(--spacing-sm);border-radius:var(--radius-sm)}.logo-dark-bg{background-color:var(--color-neutral-900);padding:var(--spacing-sm);border-radius:var(--radius-sm)}.logo img{max-width:100%;height:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.1))}.thai-pattern{position:relative;overflow:hidden}.thai-pattern::before{content:'';position:absolute;top:-50%;right:-50%;width:100%;height:100%;background-image:radial-gradient(circle at 25% 25%,var(--color-primary) 2px,transparent 2px),radial-gradient(circle at 75% 25%,var(--color-accent) 2px,transparent 2px),radial-gradient(circle at 25% 75%,var(--color-secondary) 2px,transparent 2px),radial-gradient(circle at 75% 75%,var(--color-primary) 2px,transparent 2px);background-size:40px 40px;background-position:0 0,20px 0,0 20px,20px 20px;opacity:0.05;animation:float 20s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0px) rotate(0deg)}33%{transform:translateY(-10px) rotate(1deg)}66%{transform:translateY(5px) rotate(-1deg)}}.m-xs{margin:var(--spacing-xs) !important}.m-sm{margin:var(--spacing-sm) !important}.m-md{margin:var(--spacing-md) !important}.m-lg{margin:var(--spacing-lg) !important}.m-xl{margin:var(--spacing-xl) !important}.p-xs{padding:var(--spacing-xs) !important}.p-sm{padding:var(--spacing-sm) !important}.p-md{padding:var(--spacing-md) !important}.p-lg{padding:var(--spacing-lg) !important}.p-xl{padding:var(--spacing-xl) !important}.text-primary{color:var(--color-primary) !important}.text-secondary{color:var(--color-secondary) !important}.text-accent{color:var(--color-accent) !important}.text-muted{color:var(--color-neutral-500) !important}.text-dark{color:var(--color-neutral-900) !important}.bg-primary{background-color:var(--color-primary) !important}.bg-secondary{background-color:var(--color-secondary) !important}.bg-accent{background-color:var(--color-accent) !important}.bg-light{background-color:var(--color-neutral-100) !important}.bg-white{background-color:white !important}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg)}.row{display:flex;flex-wrap:wrap;margin:0 calc(-1 * var(--spacing-md))}.col{flex:1;padding:0 var(--spacing-md)}.col-1{flex:0 0 8.333%;max-width:8.333%}.col-2{flex:0 0 16.666%;max-width:16.666%}.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.333%;max-width:33.333%}.col-6{flex:0 0 50%;max-width:50%}.col-8{flex:0 0 66.666%;max-width:66.666%}.col-9{flex:0 0 75%;max-width:75%}.col-12{flex:0 0 100%;max-width:100%}.d-flex{display:flex !important}.d-block{display:block !important}.d-none{display:none !important}.justify-center{justify-content:center !important}.justify-between{justify-content:space-between !important}.justify-around{justify-content:space-around !important}.align-center{align-items:center !important}.align-start{align-items:flex-start !important}.align-end{align-items:flex-end !important}.text-left{text-align:left !important}.text-center{text-align:center !important}.text-right{text-align:right !important}.shadow-sm{box-shadow:var(--shadow-sm) !important}.shadow-md{box-shadow:var(--shadow-md) !important}.shadow-lg{box-shadow:var(--shadow-lg) !important}.shadow-none{box-shadow:none !important}.border{border:1px solid var(--color-neutral-300) !important}.border-top{border-top:1px solid var(--color-neutral-300) !important}.border-bottom{border-bottom:1px solid var(--color-neutral-300) !important}.border-none{border:none !important}.rounded{border-radius:var(--radius-md) !important}.rounded-sm{border-radius:var(--radius-sm) !important}.rounded-lg{border-radius:var(--radius-lg) !important}.rounded-full{border-radius:50% !important}.animate-pulse{animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}.animate-bounce{animation:bounce 1s infinite}@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}.hover-lift{transition:var(--transition-base)}.hover-lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.hover-scale{transition:var(--transition-base)}.hover-scale:hover{transform:scale(1.05)}@media (max-width:768px){.container{padding:0 var(--spacing-md)}h1{font-size:2rem}h2{font-size:1.75rem}h3{font-size:1.5rem}.col-1,.col-2,.col-3,.col-4,.col-6,.col-8,.col-9{flex:0 0 100%;max-width:100%}.row{margin:0 calc(-1 * var(--spacing-sm))}.col{padding:0 var(--spacing-sm)}.btn{width:100%;margin-bottom:var(--spacing-sm)}.table-container{font-size:0.875rem}th,td{padding:var(--spacing-sm)}}@media (max-width:480px){.container{padding:0 var(--spacing-sm)}.card-body,.card-header,.card-footer{padding:var(--spacing-md)}th,td{padding:var(--spacing-xs) var(--spacing-sm)}}[data-theme="dark"]{color-scheme:dark}[data-theme="dark"] body{background-color:var(--color-neutral-900);color:var(--color-neutral-100)}[data-theme="dark"] .card{background-color:var(--color-neutral-800)}[data-theme="dark"] input,[data-theme="dark"] textarea,[data-theme="dark"] select{background-color:var(--color-neutral-800);color:var(--color-neutral-100);border-color:var(--color-neutral-600)}[data-theme="dark"] table{background-color:var(--color-neutral-800)}[data-theme="dark"] .logo-light-bg{background-color:var(--color-neutral-700)}@media print{*{background:white !important;color:black !important;box-shadow:none !important}.btn{border:1px solid black !important}.card{border:1px solid #ccc !important}}@media (prefers-reduced-motion:reduce){*,::before,::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}*:focus{outline:2px solid var(--color-primary);outline-offset:2px}.btn:focus{outline:2px solid var(--color-primary);outline-offset:2px}@media (prefers-contrast:high){.card{border:2px solid var(--color-neutral-900)}.btn{border:2px solid currentColor}}.thai-resto-header{background:linear-gradient(135deg,var(--color-neutral-100) 0%,var(--color-secondary-light) 100%);position:relative;max-height:250px;overflow:hidden}.thai-resto-header::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 20% 20%,rgba(218,41,28,0.05) 2px,transparent 2px),radial-gradient(circle at 80% 20%,rgba(255,160,0,0.05) 2px,transparent 2px),radial-gradient(circle at 20% 80%,rgba(21,101,192,0.05) 2px,transparent 2px);background-size:60px 60px,40px 40px,80px 80px;animation:thai-pattern-float 25s ease-in-out infinite;pointer-events:none}@keyframes thai-pattern-float{0%,100%{transform:translate(0px,0px) rotate(0deg)}33%{transform:translate(-5px,-10px) rotate(1deg)}66%{transform:translate(5px,-5px) rotate(-1deg)}}.thai-logo-container{position:relative;z-index:2}.thai-logo-text{display:flex;flex-direction:column;align-items:flex-start}.thai-main-name{font-family:var(--font-primary);font-size:1.75rem;font-weight:700;color:var(--color-primary);text-shadow:0 2px 4px rgba(0,0,0,0.1);line-height:1;margin-bottom:0.25rem}.thai-tagline{font-family:var(--font-secondary);font-size:0.875rem;color:var(--color-secondary);font-weight:500;font-style:italic}.thai-main-nav{position:relative;z-index:2}.thai-nav-menu{gap:var(--spacing-lg);margin:0;padding:0}.thai-nav-item{position:relative}.thai-nav-link{font-family:var(--font-primary);font-weight:500;color:var(--color-neutral-800);text-decoration:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);transition:var(--transition-base);position:relative;overflow:hidden;text-transform:uppercase;font-size:0.95rem;letter-spacing:0.5px}.thai-nav-link::before{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));transition:var(--transition-base);transform:translateX(-50%)}.thai-nav-link:hover{color:var(--color-primary);background-color:rgba(218,41,28,0.05);transform:translateY(-2px)}.thai-nav-link:hover::before{width:80%}.thai-hero-section{position:relative;z-index:2;padding:var(--spacing-lg) 0}.thai-hero-content{max-width:600px;margin:0 auto}.thai-slogan{font-family:var(--font-primary);font-size:1.25rem;font-weight:600;color:var(--color-neutral-800);margin-bottom:var(--spacing-sm);line-height:1.4}.thai-location{font-family:var(--font-secondary);font-size:1rem;color:var(--color-secondary);font-weight:400}@media (max-width:768px){.thai-resto-header{max-height:none}.thai-main-name{font-size:1.5rem}.thai-tagline{font-size:0.8rem}.thai-nav-menu{flex-direction:column;gap:var(--spacing-sm)}.thai-nav-link{font-size:0.875rem;padding:var(--spacing-xs) var(--spacing-sm)}.thai-slogan{font-size:1.1rem}.thai-location{font-size:0.9rem}.thai-hero-section{padding:var(--spacing-md) 0}}@media (max-width:480px){.uk-grid{flex-direction:column;gap:var(--spacing-md)}.thai-logo-text{align-items:center;text-align:center}.thai-main-name{font-size:1.375rem}}.thai-nav-item{animation:thai-fade-in 0.6s ease forwards;opacity:0}.thai-nav-item:nth-child(1){animation-delay:0.1s}.thai-nav-item:nth-child(2){animation-delay:0.2s}.thai-nav-item:nth-child(3){animation-delay:0.3s}.thai-nav-item:nth-child(4){animation-delay:0.4s}.thai-nav-item:nth-child(5){animation-delay:0.5s}.thai-nav-item:nth-child(6){animation-delay:0.6s}@keyframes thai-fade-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.thai-logo-text{animation:thai-logo-glow 0.8s ease forwards}@keyframes thai-logo-glow{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}.thai-hero-content{animation:thai-hero-rise 1s ease forwards 0.3s;opacity:0;transform:translateY(20px)}@keyframes thai-hero-rise{to{opacity:1;transform:translateY(0)}}
