:root{--primary:oklch(20.5% 0 0);--primary-hover:oklch(30% 0 0);--border:oklch(92.2% 0 0);--border-dark:oklch(85% 0 0);--bg:oklch(99% 0 0);--surface:oklch(100% 0 0);--text:oklch(20.5% 0 0);--text-muted:oklch(45% 0 0);--accent:oklch(70% .1 250);--bg-dark:oklch(10% 0 0);--text-white:oklch(100% 0 0);--text-white-muted:oklch(80% 0 0);--font-sans:"Inter", "Noto Sans Thai", system-ui, -apple-system, sans-serif;--font-mono:"Geist Mono", monospace;--radius:5px;--radius-full:9999px;--spacing-xxs:4px;--spacing-xs:8px;--spacing-sm:12px;--spacing-md:15px;--spacing-lg:20px;--spacing-xl:24px;--spacing-2xl:32px;--spacing-3xl:48px;--spacing-4xl:64px;--spacing-5xl:96px;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;--shadow-xl:0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;--transition:.2s ease-in-out}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-sans);color:var(--text);background-color:var(--bg);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}a{color:inherit;transition:color var(--transition);text-decoration:none}img{max-width:100%;display:block}button{cursor:pointer;background:0 0;border:none;font-family:inherit}.container{width:100%;max-width:1200px;padding:0 var(--spacing-xl);margin:0 auto}.section-padding{padding:var(--spacing-5xl) 0}@media (width<=768px){.section-padding{padding:var(--spacing-3xl) 0}}.text-primary{color:var(--primary)}.text-muted{color:var(--text-muted)}.text-white{color:var(--text-white)}.text-white-muted{color:var(--text-white-muted)}.bg-surface{background-color:var(--surface)}.bg-light{background-color:var(--border)}.border-y{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.border-t{border-top:1px solid var(--border)}.rounded-full{border-radius:var(--radius-full)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.hover-shadow-md:hover{box-shadow:var(--shadow-md);transition:all var(--transition);transform:translateY(-2px)}.mono{font-family:var(--font-mono)}.text-xs{font-size:12px}.btn{justify-content:center;align-items:center;gap:var(--spacing-xs);border-radius:var(--radius);transition:all var(--transition);outline:none;font-weight:500;display:inline-flex}.btn:active{transform:scale(.98)}.btn:focus-visible{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--primary)}.btn-primary{background-color:var(--primary);color:var(--text-white)}.btn-primary:hover{background-color:var(--primary-hover)}.btn-secondary{background-color:var(--surface);color:var(--primary);border:1px solid var(--border)}.btn-secondary:hover{background-color:var(--bg);border-color:var(--border-dark)}.btn-sm{padding:var(--spacing-xs) var(--spacing-md);font-size:13px}.btn-lg{padding:var(--spacing-md) var(--spacing-xl);font-size:15px}.btn-xl{padding:var(--spacing-lg) var(--spacing-2xl);width:100%;font-size:16px;font-weight:600}@media (width>=640px){.btn-xl{width:auto}}.navbar{-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:100;background-color:#fffc;align-items:center;height:64px;display:flex;position:sticky;top:0}.navbar-container{justify-content:space-between;align-items:center;display:flex}.logo{align-items:center;gap:var(--spacing-xs);letter-spacing:-.5px;font-size:18px;font-weight:700;display:flex}.logo-img{width:auto;height:28px}.nav-links{align-items:center;gap:var(--spacing-lg);display:flex}.nav-link{color:var(--text-muted);font-weight:500}.nav-link:hover{color:var(--primary)}@media (width<=768px){.nav-link{display:none}}.hero{background-image:url(/BG/BG1.png);background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;position:relative;overflow:hidden}.hero-container{z-index:1;gap:var(--spacing-4xl);grid-template-columns:1fr;align-items:center;display:grid;position:relative}@media (width>=992px){.hero-container{grid-template-columns:1fr 1fr}}.hero-content{gap:var(--spacing-xl);-webkit-backdrop-filter:blur(16px)saturate(140%);padding:var(--spacing-2xl);background:#ffffffbf;border:1px solid #fff9;border-radius:20px;flex-direction:column;max-width:620px;display:flex;box-shadow:0 20px 40px #0000000f,inset 0 1px #fffc}.version-badge{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--surface);border:1px solid var(--border);width:fit-content;font-size:13px;font-weight:500;display:inline-flex}.icon-sm{width:16px;height:16px}.hero-title{letter-spacing:-.5px;background:linear-gradient(135deg,oklch(20% 0 0) 40%,oklch(50% .18 240) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:48px;font-weight:700;line-height:1.2}@media (width<=768px){.hero-title{font-size:36px}}.hero-desc{color:oklch(35% 0 0);max-width:500px;font-size:16px;line-height:1.6}.hero-actions{align-items:center;gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.version-select-wrapper{align-items:center;width:100%;max-width:280px;display:inline-flex;position:relative}.version-select{border-radius:var(--radius);border:1px solid var(--border);background-color:var(--surface);width:100%;color:var(--text);cursor:pointer;appearance:none;transition:all var(--transition);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");background-position:right 16px center;background-repeat:no-repeat;background-size:14px;outline:none;padding:16px 40px 16px 16px;font-family:inherit;font-size:15px;font-weight:600}.version-select:hover{border-color:var(--border-dark);background-color:var(--bg)}.version-select:focus-visible{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--primary)}@media (width<=640px){.version-select-wrapper{max-width:100%}}.hero-meta{gap:var(--spacing-lg);margin-top:var(--spacing-md);color:var(--text-muted);flex-wrap:wrap;font-size:13px;font-weight:500;display:flex}.meta-item{align-items:center;gap:var(--spacing-xxs);display:flex}.meta-item svg{width:16px;height:16px}.hero-visual{justify-content:center;display:flex;position:relative}.mascot-hero-wrapper{width:100%;max-width:400px;position:relative}.mascot-hero-img{width:100%;animation:6s ease-in-out infinite float}.floating-card{background:var(--surface);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius);align-items:center;gap:var(--spacing-sm);border:1px solid var(--border);font-weight:600;display:flex;position:absolute}.floating-card.card-1{animation:5s ease-in-out infinite alternate float;top:10%;left:-20px}.floating-card.card-2{animation:7s ease-in-out infinite alternate-reverse float;bottom:20%;right:-20px}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-15px)}to{transform:translateY(0)}}.stats-bar{background-color:var(--surface);padding:var(--spacing-2xl) 0}.stats-grid{gap:var(--spacing-2xl);text-align:center;grid-template-columns:repeat(2,1fr);display:grid}@media (width>=768px){.stats-grid{grid-template-columns:repeat(4,1fr)}}.stat-value{letter-spacing:-1px;font-size:32px;font-weight:700}.stat-label{color:var(--text-muted);margin-top:var(--spacing-xxs);font-weight:500}.section-header{text-align:center;margin-bottom:var(--spacing-4xl);max-width:600px;margin-inline:auto}.section-title{letter-spacing:-.5px;margin-bottom:var(--spacing-sm);font-size:32px;font-weight:700}.section-desc{color:var(--text-muted);font-size:16px}.screenshots-gallery{width:100%;padding-bottom:var(--spacing-xl);scrollbar-width:thin;scrollbar-color:var(--border-dark) transparent;overflow-x:auto}.screenshots-gallery::-webkit-scrollbar{height:6px}.screenshots-gallery::-webkit-scrollbar-thumb{background:var(--border-dark);border-radius:var(--radius-full)}.screenshot-track{gap:var(--spacing-2xl);width:max-content;padding:var(--spacing-xs);display:flex}.phone-mockup{border:8px solid var(--primary);width:260px;height:540px;box-shadow:var(--shadow-lg);background-color:var(--surface);border-radius:30px;overflow:hidden}.phone-mockup img{object-fit:cover;width:100%;height:100%}.phone-mockup img.object-contain{object-fit:contain;padding:var(--spacing-xl)}.features-grid{gap:var(--spacing-xl);grid-template-columns:1fr;display:grid}@media (width>=640px){.features-grid{grid-template-columns:repeat(2,1fr)}}@media (width>=992px){.features-grid{grid-template-columns:repeat(3,1fr)}}.feature-card{background-color:var(--surface);padding:var(--spacing-xl);border-radius:var(--radius);border:1px solid var(--border)}.feature-icon{background-color:var(--bg);border-radius:var(--radius);width:48px;height:48px;margin-bottom:var(--spacing-md);border:1px solid var(--border);justify-content:center;align-items:center;display:flex}.feature-title{margin-bottom:var(--spacing-xs);font-size:18px;font-weight:600}.feature-desc{color:var(--text-muted)}.dark-section{background-color:var(--bg-dark);color:var(--text-white)}.why-choose-wrapper{gap:var(--spacing-4xl);grid-template-columns:1fr;align-items:center;display:grid}@media (width>=992px){.why-choose-wrapper{grid-template-columns:1fr 1fr}}.benefits-list{margin-top:var(--spacing-2xl);gap:var(--spacing-md);grid-template-columns:1fr;list-style:none;display:grid}@media (width>=640px){.benefits-list{grid-template-columns:1fr 1fr}}.benefits-list li{align-items:center;gap:var(--spacing-sm);font-weight:500;display:flex}.benefits-list svg{color:var(--text-white);flex-shrink:0}.mascot-why-img{width:100%;max-width:450px;margin:0 auto}.download{background:linear-gradient(to bottom, var(--bg) 50%, var(--surface) 50%)}.download-card{background-color:var(--surface);border-radius:var(--radius);border:1px solid var(--border);padding:var(--spacing-3xl)}.download-card-inner{gap:var(--spacing-3xl);grid-template-columns:1fr;align-items:center;display:grid}@media (width>=768px){.download-card-inner{grid-template-columns:1fr auto}}.download-info h2{margin-bottom:var(--spacing-xs);font-size:28px;font-weight:700}.download-info p{color:var(--text-muted);margin-bottom:var(--spacing-xl);font-size:16px}.apk-details{gap:var(--spacing-md);grid-template-columns:1fr;display:grid}@media (width>=640px){.apk-details{grid-template-columns:1fr 1fr}}.detail-row{gap:var(--spacing-xxs);flex-direction:column;display:flex}.detail-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.detail-value{word-break:break-all;font-weight:500}.download-action{text-align:center;align-items:center;gap:var(--spacing-md);flex-direction:column;display:flex}.app-icon{width:96px;height:96px}.download-note{color:var(--text-muted);font-size:12px}.timeline{max-width:600px;margin:0 auto;position:relative}.timeline:before{content:"";background-color:var(--border);width:2px;position:absolute;top:0;bottom:0;left:20px}.timeline-item{padding-left:var(--spacing-4xl);margin-bottom:var(--spacing-xl);position:relative}.timeline-item:last-child{margin-bottom:0}.timeline-marker{background-color:var(--primary);width:42px;height:42px;color:var(--text-white);border-radius:var(--radius-full);z-index:1;justify-content:center;align-items:center;font-size:18px;font-weight:700;display:flex;position:absolute;top:0;left:0}.timeline-content{background-color:var(--surface);border:1px solid var(--border);padding:var(--spacing-lg);border-radius:var(--radius)}.timeline-content h3{margin-bottom:var(--spacing-xs);font-size:18px;font-weight:600}.timeline-content p{color:var(--text-muted)}.timeline-content code{font-family:var(--font-mono);background-color:var(--bg);border:1px solid var(--border);border-radius:4px;padding:2px 6px;font-size:13px}.faq-container{max-width:768px}.accordion{gap:var(--spacing-sm);flex-direction:column;display:flex}.accordion-item{background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.accordion-header{text-align:left;width:100%;padding:var(--spacing-lg);color:var(--text);transition:background-color var(--transition);justify-content:space-between;align-items:center;font-size:16px;font-weight:600;display:flex}.accordion-header:hover{background-color:var(--bg)}.accordion-header:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}.accordion-icon{transition:transform var(--transition)}.accordion-header[aria-expanded=true] .accordion-icon{transform:rotate(180deg)}.accordion-content{max-height:0;transition:max-height .3s ease-in-out;overflow:hidden}.accordion-inner{padding:0 var(--spacing-lg) var(--spacing-lg);color:var(--text-muted);line-height:1.6}.footer{background-color:var(--surface);padding:var(--spacing-4xl) 0 var(--spacing-xl)}.footer-grid{gap:var(--spacing-2xl);margin-bottom:var(--spacing-3xl);grid-template-columns:1fr;display:grid}@media (width>=640px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}@media (width>=992px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}.footer-desc{color:var(--text-muted);margin-top:var(--spacing-sm);max-width:300px}.footer-heading{text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-lg);font-size:14px;font-weight:600}.footer-links{gap:var(--spacing-sm);flex-direction:column;display:flex}.footer-links a{color:var(--text-muted)}.footer-links a:hover{color:var(--primary)}.footer-bottom{justify-content:space-between;align-items:center;gap:var(--spacing-md);padding-top:var(--spacing-xl);color:var(--text-muted);flex-direction:column;font-size:14px;display:flex}@media (width>=640px){.footer-bottom{flex-direction:row}}.reveal{opacity:0;transition:all .6s cubic-bezier(.16,1,.3,1);transform:translateY(20px)}.reveal.active{opacity:1;transform:translateY(0)}.fade-right{transform:translate(30px)}.fade-right.active{transform:translate(0)}.fade-left{transform:translate(-30px)}.fade-left.active{transform:translate(0)}.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}.delay-3{transition-delay:.3s}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:1s linear infinite spin}body{margin:0}.admin-page{--bg:oklch(97% .005 240);--surface:oklch(100% 0 0);--surface-hover:oklch(96% .005 240);--primary:oklch(50% .16 240);--primary-hover:oklch(44% .17 240);--border:oklch(90% .01 240);--border-focus:oklch(55% .15 240);--text:oklch(20% .01 240);--text-muted:oklch(50% .01 240);--success:oklch(60% .15 140);--font-sans:"Inter", "Noto Sans Thai", system-ui, -apple-system, sans-serif;--radius:12px;--transition:.25s cubic-bezier(.16, 1, .3, 1);font-family:var(--font-sans);background-color:var(--bg);color:var(--text);background-image:radial-gradient(at 0 0,oklch(90% .04 240/.5) 0,#0000 50%),radial-gradient(at 100% 100%,oklch(92% .05 280/.4) 0,#0000 50%);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.admin-page *{box-sizing:border-box}.admin-page .login-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);text-align:center;background:#fffc;border-radius:24px;width:100%;max-width:420px;padding:40px;box-shadow:0 20px 50px #00000014}.admin-page .login-logo{background:var(--surface);border:1px solid var(--border);width:64px;height:64px;color:var(--primary);border-radius:16px;justify-content:center;align-items:center;margin-bottom:24px;display:inline-flex}.admin-page .login-title{letter-spacing:-.5px;margin-bottom:8px;font-size:24px;font-weight:700}.admin-page .login-subtitle{color:var(--text-muted);margin-bottom:32px;font-size:14px}.admin-page .form-group{text-align:left;margin-bottom:20px}.admin-page .form-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:13px;font-weight:600;display:block}.admin-page .form-input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);transition:all var(--transition);outline:none;padding:12px 16px;font-family:inherit;font-size:14px}.admin-page .form-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px oklch(50% .16 240/.15)}.admin-page .form-input:disabled{background:var(--bg);color:var(--text-muted);cursor:not-allowed}.admin-page .btn{background-color:var(--primary);color:#fff;border-radius:var(--radius);cursor:pointer;width:100%;transition:all var(--transition);border:none;justify-content:center;align-items:center;gap:8px;padding:14px;font-size:15px;font-weight:600;display:flex}.admin-page .btn:hover:not(:disabled){background-color:var(--primary-hover);transform:translateY(-1px)}.admin-page .btn:disabled{opacity:.6;cursor:not-allowed}.admin-page .dashboard-container{width:100%;max-width:900px}.admin-page .dashboard-grid{grid-template-columns:1.2fr 1fr;gap:24px;display:grid}@media (width<=768px){.admin-page .dashboard-grid{grid-template-columns:1fr}}.admin-page .dashboard-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);background:#ffffffd9;border-radius:24px;padding:32px;box-shadow:0 20px 45px #0000000f}.admin-page .header-bar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:32px;padding-bottom:16px;display:flex}.admin-page .header-title{align-items:center;gap:10px;font-size:20px;font-weight:700;display:flex}.admin-page .logout-btn{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;transition:all var(--transition);background:0 0;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:500}.admin-page .logout-btn:hover{background:var(--surface-hover);color:var(--text);border-color:var(--text-muted)}.admin-page .btn-secondary{background-color:var(--surface);border:1px solid var(--border);color:var(--text)}.admin-page .btn-secondary:hover:not(:disabled){background-color:var(--surface-hover)}.admin-page .btn-row{grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;display:grid}.admin-page .preview-panel{flex-direction:column;gap:20px;display:flex}.admin-page .preview-title{margin-bottom:8px;font-size:16px;font-weight:600}.admin-page .meta-preview-box{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:12px;padding:20px;font-size:13px;display:flex}.admin-page .preview-item{align-items:center;gap:10px;display:flex}.admin-page .toast{background:var(--success);color:#fff;z-index:1000;border-radius:12px;align-items:center;gap:10px;padding:16px 24px;animation:.4s cubic-bezier(.16,1,.3,1) toast-in;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 10px 30px #00000026}@keyframes toast-in{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}