:root{color-scheme:light;--red:#d73540;--red-dark:#ae132b;--ink:#25303b;--muted:#727c89;--line:#e9ebef;--surface:#f7f8fa;--app-width:100%;--thai:'Noto Sans Thai',Tahoma,sans-serif;--latin:'Plus Jakarta Sans',var(--thai)}
*{box-sizing:border-box}html{min-height:100%;background:#eceef2}body{margin:0;color:var(--ink);font:14px/1.65 var(--thai);background:radial-gradient(ellipse at 12% 17%,#fff 0,transparent 48%),linear-gradient(140deg,#f3f4f6,#e8eaf0);min-height:100svh}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button{border:0}img{display:block;max-width:100%;object-fit:contain}svg{width:20px;height:20px;flex:none;stroke-width:1.8}button svg,a svg{pointer-events:none}h1,h2,h3,p{margin:0}h1{font-size:29px;line-height:1.4;font-weight:700;letter-spacing:-.7px}h2{font-size:16px;line-height:1.5;font-weight:600}h3{font-size:21px;line-height:1.5}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #2769b1;outline-offset:4px}button:hover{filter:brightness(.98)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;top:-100px;left:16px;z-index:20;padding:12px 20px;background:white;border:2px solid var(--red)}.skip-link:focus{top:12px}
.app-shell{max-width:var(--app-width);margin:0 auto;min-height:100svh;background:linear-gradient(165deg,#fff 0,#f7f8fa 43%,#fff 100%);box-shadow:0 0 80px #2630420e;position:relative;border-inline:1px solid #ffffffb3}.app-header{height:89px;display:flex;align-items:center;gap:4px;padding:16px 21px 14px;background:#ffffffed;border-bottom:1px solid #ebedf180}.brand{display:flex;align-items:center;gap:9px;min-width:0;flex:1}.brand img{width:43px;height:43px;flex:none}.brand>span{min-width:0}.brand strong{font-size:15px;letter-spacing:-.3px;white-space:nowrap;display:block}.brand small{font-size:8px;display:block;letter-spacing:-.1px;white-space:nowrap;line-height:1.9}.icon-button{width:44px;height:44px;background:#f3f4f7;display:flex;align-items:center;justify-content:center;border-radius:50%;flex:none}.notification{background:#fff;box-shadow:0 3px 14px #2a354408;position:relative}.notification-dot{position:absolute;width:7px;height:7px;background:var(--red);border:2px solid #fff;border-radius:50%;right:10px;top:9px}.account-button{margin-left:3px}
main{padding:0 23px calc(112px + env(safe-area-inset-bottom));outline:none}.greeting{display:flex;align-items:center;justify-content:space-between;min-height:166px;padding:23px 1px 20px;gap:4px}.eyebrow{color:var(--muted);font-size:11px;font-weight:500;margin-bottom:4px}.greeting h1{font-size:29px;white-space:nowrap;letter-spacing:-.6px}.greeting-copy>p:last-child{font-size:12px;line-height:1.8;color:#596473;margin-top:6px}.hello-spark{font-size:24px;color:#e3a652;display:inline-block;vertical-align:2px;font-family:serif}.handwriting{font:600 24px/.97 'Caveat',cursive;color:#bd223a;transform:rotate(-10deg);text-align:center;flex:none;padding-right:7px;padding-top:8px}.handwriting span{padding-left:10px}.section-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}.section-label h2{font-size:13px}.demo-tag{display:inline-flex;align-items:center;gap:5px;color:#8c4a30;background:#f8ede5;border:1px solid #f2e2d6;border-radius:6px;padding:2px 7px;font-size:9px;line-height:1.8;white-space:nowrap}.demo-tag>span{width:4px;height:4px;border-radius:50%;background:#b57b4f}
.student-card{isolation:isolate;position:relative;overflow:hidden;border-radius:20px;border:1px solid #fff;background:linear-gradient(112deg,#f7f9fb 0%,#f4f6fa 36%,#dbf3ef 59%,#faf0ec 72%,#e6e7f5 90%,#fff 100%);box-shadow:0 0 0 2px #d7354020,0 8px 28px #aa163222,0 2px 3px #af203323}.student-card:after{content:'';position:absolute;z-index:-1;inset:18% 0 0 28%;background:repeating-radial-gradient(ellipse at 55% 50%,transparent 0 12px,#bb9f7420 12.5px 13px,transparent 13.5px 17px);mask-image:linear-gradient(120deg,transparent,#000 55%,transparent);opacity:.6;transform:rotate(-19deg)}.id-card-top{height:57px;background:#ffffffdb;display:flex;align-items:center;justify-content:space-between;position:relative}.id-brand{display:flex;gap:6px;align-items:center;padding-left:15px}.id-brand img{width:28px;height:28px}.id-brand strong{font:800 16px/1.2 var(--latin);letter-spacing:-.7px}.id-brand small{font:400 5.4px/1.35 var(--latin);display:block;margin-top:2px}.id-type{align-self:stretch;min-width:133px;background:linear-gradient(128deg,#e23846,#bc132b);color:#fff;padding:11px 15px 8px 28px;text-align:right;clip-path:polygon(23% 0,100% 0,100% 100%,0 100%)}.id-type strong{font:700 15px/1.3 var(--latin);display:block;letter-spacing:.1px}.id-type small{font:400 8px var(--latin);display:block;letter-spacing:1px;margin-top:2px}.id-card-body{padding:17px 16px 14px;position:relative;min-height:234px;display:grid;grid-template-columns:94px 1fr;align-items:start;gap:14px}.id-card-body:before{content:'';position:absolute;z-index:-1;bottom:0;left:0;width:67%;height:95px;background:linear-gradient(142deg,#e22136,#a10c24);clip-path:polygon(0 0,100% 100%,0 100%)}.id-card-body:after{content:'';position:absolute;z-index:-1;bottom:0;left:0;width:69%;height:106px;background:linear-gradient(145deg,#d7354030,#e3315550);clip-path:polygon(0 0,100% 100%,0 100%)}.portrait{position:relative;border-radius:12px;overflow:hidden;background:#dfe2e6;width:94px;height:121px}.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 35%}.portrait>span{position:absolute;bottom:0;left:0;right:0;text-align:center;background:#273544a6;color:#fff;font:600 7px/1.8 var(--latin);letter-spacing:2px}.student-info h3{font-size:21px;letter-spacing:-.4px;line-height:1.4;margin-top:1px}.english-name{font:400 11px/1.6 var(--latin);color:#5f6878;margin-top:1px}.student-number{margin-top:10px}.student-number>span{display:block;font-size:9px}.student-number strong{display:block;font:700 15px/1.6 var(--latin);letter-spacing:.2px}.faculty{font-size:10px;line-height:1.65;margin-top:9px;max-width:145px}.card-bottom{grid-column:1/-1;display:flex;align-items:end;justify-content:space-between;min-height:68px;margin-top:0}.card-student-label{color:white;align-self:end;display:grid;margin:0 0 0 1px}.card-student-label strong{font:700 14px/1.5 var(--latin)}.card-student-label>span{font:400 9px/1.7 var(--latin);letter-spacing:.5px}.qr-preview{position:absolute;right:14px;bottom:12px;padding:8px;background:#ffffffed;border-radius:12px;box-shadow:0 5px 15px #2a354415;display:flex;flex-direction:column;align-items:center;gap:4px}.qr-pattern{position:relative;display:block;width:86px;height:86px;border:5px solid #fff;background:repeating-conic-gradient(#25303b 0% 25%,transparent 0% 50%) 0 0/9px 9px;background-color:#fff;opacity:.95}.qr-finder{width:25px;height:25px;position:absolute;background:#fff;border:4px solid #25303b;outline:3px solid #fff}.qr-finder:after{content:'';position:absolute;inset:4px;background:#25303b}.finder-one{left:0;top:0}.finder-two{right:0;top:0}.finder-three{left:0;bottom:0}.qr-pattern b{position:absolute;left:11px;right:0;top:31px;background:#fff;color:#ad2539;font:800 10px/1.7 var(--latin);letter-spacing:1px;padding:1px;text-align:center;transform:rotate(-9deg);box-shadow:0 0 0 3px #fff}.qr-caption{font-size:8px;display:flex;align-items:center;gap:4px}.qr-caption svg{width:12px;height:12px}.card-hint{font-size:9px;color:#7e7680;display:flex;justify-content:center;align-items:center;gap:4px;margin:10px 0 17px}.card-hint svg{width:12px;height:12px}
.benefit-strip{display:grid;grid-template-columns:repeat(3,1fr);padding:11px 0 12px;background:linear-gradient(140deg,#fff9,#f0f2f6aa);border:1px solid #fff;border-radius:17px;box-shadow:0 4px 16px #2a354403}.benefit-strip>div{text-align:center;display:flex;flex-direction:column;align-items:center;position:relative}.benefit-strip>div+div:before{content:'';position:absolute;left:0;top:13px;bottom:3px;width:1px;background:linear-gradient(transparent,#dfe3e9,transparent)}.benefit-icon{display:grid;place-items:center;border-radius:50%;background:white;box-shadow:0 3px 8px #25303b04;width:34px;height:34px;margin-bottom:5px}.benefit-strip strong{font-size:10px;font-weight:600;line-height:1.7}.benefit-strip small{font-size:8px;color:#798290}.verify-button{background:linear-gradient(160deg,#e9344d 0%,#d52037 42%,#ac1127 100%);color:white;display:flex;align-items:center;gap:13px;width:100%;margin:21px 0 23px;padding:16px 20px;border:1px solid #ffffff40;border-radius:19px;box-shadow:0 8px 17px #ae132b20,inset 0 1px 0 #ffffff20;text-align:left;min-height:78px}.scan-box{width:36px;height:36px;display:grid;place-items:center;border:1px solid #ffffff50;border-radius:10px}.verify-button>span:nth-child(2){flex:1;min-width:0}.verify-button strong{display:block;font-size:15px;font-weight:600;line-height:1.6;letter-spacing:-.3px}.verify-button small{font:400 11px/1.8 var(--latin);display:block;color:#ffe8ec;margin-top:2px}.verify-button small span{font:400 9px var(--thai);color:#ffc6cf;margin-left:4px}.verify-button>svg{width:18px;height:18px}
.usage-panel{display:flex;justify-content:space-between;align-items:center;gap:0;background:linear-gradient(100deg,#eff1f680,#f3f4f8);border-radius:17px;padding:15px 0 14px 16px;overflow:hidden}.usage-panel h2{font-size:14px}.usage-panel p{font-size:9px;color:var(--muted);margin-top:2px}.usage-panel ul{margin:8px 0 0;padding:0;list-style:none}.usage-panel li{display:flex;align-items:center;gap:4px;font-size:9px;line-height:2;color:#66717f}.usage-panel li svg{width:12px;height:12px;color:#7a8998;background:#e7ebf1;border-radius:50%;padding:1px}.usage-panel>img{width:110px;height:125px;object-fit:contain;margin:0 2px 0 -5px}.quick-heading{margin-top:26px}.section-label a{color:#b4253a;display:flex;align-items:center;gap:4px;font-size:10px;min-height:44px}.section-label a svg{width:13px;height:13px}.quick-services{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quick-services>button{display:flex;flex-direction:column;align-items:center;gap:8px;background:transparent;font-size:10px;padding:8px 0 14px}.service-icon{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:15px}.coral{background:#fff0ed;color:#c2483b}.blue{background:#eaf0fb;color:#5576aa}.mint{background:#eaf3ef;color:#42826a}.lilac{background:#f0ebf9;color:#8b68ac}.sand{background:#f8f0df;color:#a88035}.neutral{background:#f0f2f5;color:#606d7d}
.bottom-nav{position:fixed;z-index:5;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,var(--app-width));display:grid;grid-template-columns:repeat(5,1fr);background:#ffffffed;backdrop-filter:blur(18px);border-top:1px solid #ebedf1;box-shadow:0 -8px 25px #25303b03;padding:8px 10px calc(12px + env(safe-area-inset-bottom))}.bottom-nav a{position:relative;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;min-height:48px;font-size:10px;font-weight:500;color:#78818f;border-radius:9px}.bottom-nav a[aria-current]{color:#cd2136;font-weight:700}.bottom-nav a[aria-current]:before{content:'';position:absolute;top:-9px;width:19px;height:3px;background:var(--red);border-radius:0 0 4px 4px}.bottom-nav a[aria-current] svg{stroke-width:2.5}.bottom-nav a:hover{background:#f9f1f2}
.page-heading{padding:29px 0 23px}.page-heading h1{margin-bottom:8px}.page-heading>p:not(.eyebrow){color:var(--muted);font-size:12px}.page-heading>.demo-tag{margin-top:13px}.search-field{border:1px solid var(--line);border-radius:13px;background:#fff;display:flex;gap:10px;align-items:center;padding:0 13px;min-height:48px;margin-bottom:16px;color:#7d8793}.search-field input{background:transparent;border:0;min-width:0;width:100%;height:48px;color:var(--ink);font-size:13px}.search-field input:focus-visible{outline-offset:0}.service-list{display:grid}.service-row{width:100%;display:flex;align-items:center;gap:13px;min-height:90px;padding:17px 2px;background:transparent;border-bottom:1px solid var(--line);text-align:left}.service-row>span:nth-child(2),.service-row>strong{flex:1;min-width:0}.service-row strong{display:block;font-size:14px;font-weight:600}.service-row small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.service-row>svg{width:15px;height:15px;color:#8c94a0}.demo-footnote{font-size:10px;text-align:center;color:var(--muted);margin-top:25px}.empty-state{padding:30px 12px;color:var(--muted);text-align:center}.featured-news{border-radius:19px;background:white;overflow:hidden;border:1px solid var(--line)}.news-art{height:206px;background:#bf243a;position:relative;overflow:hidden;padding:27px 25px;color:white}.news-art:before{content:'';position:absolute;width:230px;height:230px;border:1px solid #ffffff50;border-radius:50%;right:-90px;top:-75px;box-shadow:0 0 0 22px #ffffff06,0 0 0 44px #ffffff09}.news-art-label{font:500 35px/1.2 var(--latin);position:relative;z-index:1;letter-spacing:-2px}.news-art-label b{font-size:57px;font-weight:800}.news-art-circle{position:absolute;right:17px;bottom:-35px;width:145px;height:145px;border-radius:50%;background:#f4d2bf;color:#c42f44;font:800 60px/140px var(--latin);text-align:center;transform:rotate(-17deg)}.news-copy{padding:20px 23px}.category-label{font-size:10px;color:#a94454}.news-copy h2{font-size:23px;margin:7px 0 10px}.news-copy p{font-size:12px;color:var(--muted)}.text-button{display:flex;gap:10px;align-items:center;min-height:44px;background:transparent;color:#ad2539;padding:10px 0;font-size:12px;margin-top:10px}.text-button svg{width:15px;height:15px}.event-banner{background:#e8eee5;border-radius:18px;padding:26px;color:#385944;position:relative}.event-banner>span{font:600 11px var(--latin);letter-spacing:1.7px}.event-banner strong{display:block;font:700 39px/1.13 var(--latin);letter-spacing:-1.8px;margin:9px 0 16px}.event-banner p{font-size:12px}.event-banner>svg{position:absolute;right:22px;top:28px}.event-number{width:46px;height:58px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;font:600 19px var(--latin);color:var(--red);background:white}.event-row em{font-size:9px;font-style:normal;color:#9b7c4d;display:block;margin-top:5px}.profile-panel{display:flex;align-items:center;gap:16px;border-radius:18px;background:linear-gradient(120deg,#f9ecec,#f2f2f6);padding:20px;margin-bottom:16px}.profile-panel img{width:66px;height:78px;object-fit:cover;border-radius:10px}.profile-panel h2{font-size:20px}.profile-panel p{font:500 10px var(--latin);margin:4px 0 8px;color:var(--muted)}.about-demo{text-align:center;padding:35px 0 15px}.about-demo img{margin:0 auto 13px;opacity:.75}.about-demo h2{font:600 16px var(--latin)}.about-demo p{font-size:11px;color:var(--muted);margin-top:9px}.about-demo small{font-size:8px;color:#828996;display:block;margin-top:15px}
dialog{border:1px solid #fff;border-radius:24px;padding:22px;width:calc(100% - 32px);max-width:420px;max-height:calc(100svh - 40px);overflow:auto;color:var(--ink);background:#fff;box-shadow:0 20px 100px #17213430}dialog::backdrop{background:#18202c65;backdrop-filter:blur(5px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.dialog-icon{display:grid;place-items:center;background:#fff0ed;color:var(--red);width:48px;height:48px;border-radius:15px;margin-bottom:17px}dialog h2{font-size:21px;line-height:1.6}#dialog-description{font-size:13px;line-height:1.9;color:#6b7582;margin-top:9px}#dialog-extra ul{padding:0;list-style:none}#dialog-extra li{border-top:1px solid var(--line);padding:12px 0;font-size:12px}.dialog-confirm{border-radius:12px;background:var(--red);color:#fff;min-height:46px;width:100%;font-weight:500;margin-top:22px}body:has(dialog[open]){overflow:hidden}
@media(min-width:700px){.app-shell{border-inline-color:#fff}.greeting{padding-top:26px}.app-header{height:92px}}
@media(max-width:380px){main{padding-inline:17px}.app-header{padding-inline:13px;gap:1px;height:80px}.brand{gap:6px}.brand img{width:35px;height:35px}.brand strong{font-size:12px}.brand small{font-size:6.2px}.account-button{margin-left:0}.greeting{min-height:150px}.greeting h1{font-size:25px}.greeting-copy>p:last-child{font-size:11px}.handwriting{font-size:20px;padding-right:2px}.id-card-body{padding:15px 12px 12px;grid-template-columns:74px 1fr;gap:10px;min-height:243px}.portrait{width:74px;height:100px}.student-info h3{font-size:18px}.english-name{font-size:10px}.student-number strong{font-size:13px}.faculty{font-size:9px;max-width:154px}.id-brand{padding-left:10px;gap:4px}.id-brand img{width:23px;height:23px}.id-brand strong{font-size:13px}.id-brand small{font-size:4.4px}.id-type{min-width:111px;padding-right:12px}.id-type strong{font-size:12px}.id-type small{font-size:6px}.qr-preview{right:12px;bottom:12px;padding:7px}.qr-pattern{width:69px;height:69px;background-size:7px 7px}.qr-finder{width:21px;height:21px;border-width:3px}.qr-finder:after{inset:3px}.qr-pattern b{font-size:8px;top:24px;left:6px}.qr-caption{font-size:7px}.verify-button{gap:9px;padding:15px 12px}.verify-button strong{font-size:12px}.scan-box{width:31px;height:35px}.verify-button small{font-size:10px}.verify-button small span{font-size:8px}.usage-panel{padding-left:12px}.usage-panel h2{font-size:12px}.usage-panel li{font-size:8px}.usage-panel>img{width:83px;height:110px;margin:0}.section-label h2{font-size:12px}.bottom-nav{padding-inline:5px}.bottom-nav a{font-size:9px}.service-row strong{font-size:12px}}
.brand{min-height:44px}
.student-card,.student-card-heading{width:100%;max-width:432px;margin-inline:auto}
@media(max-width:430px){.faculty{position:absolute;left:16px;top:149px;width:calc(100% - 139px);max-width:none;margin:0}.id-card-body{min-height:250px}.id-card-body:before{height:65px}.id-card-body:after{height:76px}}
@media(max-width:380px){.faculty{left:12px;top:132px;width:calc(100% - 115px)}.id-card-body{min-height:243px}}
@media(prefers-reduced-motion:no-preference){dialog[open]{animation:dialog-in .18s ease-out}@keyframes dialog-in{from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}}