@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');
:root{font-family:'Noto Sans Thai',sans-serif;color:#242d34;background:#f4f0e8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #2457b6;outline-offset:4px}button{border:0}#experience{height:100svh;min-height:650px;position:relative;overflow:hidden}#scene{position:absolute;inset:0}canvas{display:block;touch-action:none}header{position:absolute;top:30px;left:40px;right:40px;display:flex;justify-content:space-between;align-items:center;z-index:3}.brand{display:flex;gap:13px;align-items:center;text-decoration:none;color:#263247;font-size:12px;font-weight:800;letter-spacing:.07em}.brand small{display:block;font-size:8px;font-weight:500;letter-spacing:.23em;margin-top:3px}.brandmark{display:flex;position:relative;padding:4px 9px;font-size:27px;color:#18377d;letter-spacing:-2px;isolation:isolate;text-shadow:-1px -1px white,1px 1px white}.brandmark:before,.brandmark:after{content:'';position:absolute;z-index:-1;width:43px;height:43px;border-radius:50%;top:2px;left:0;background:#e42129;border:2px solid white}.brandmark:after{left:27px;background:#ffd321;z-index:-2}.outline{background:#ffffff80;padding:12px 20px;border:1px solid #d9d4cb;border-radius:30px;font-size:12px}.outline span{margin-left:20px}.intro{position:absolute;left:42px;top:155px;pointer-events:none;width:300px;z-index:2}.eyebrow{font-size:10px;letter-spacing:.17em;color:#b83a2d;font-weight:600;display:flex;align-items:center;gap:7px}.eyebrow i{width:6px;height:6px;background:#c83b30;border-radius:50%}h1{font-size:clamp(30px,3.4vw,54px);line-height:1.3;letter-spacing:-.05em;margin:17px 0;color:#293330;font-weight:800}h1 span{color:#c72c26}.intro p{font-size:12px;line-height:1.9;color:#7a7a70}.text-button{pointer-events:auto;padding:10px 0;background:none;border-bottom:1px solid #c6b8a8;font-size:12px;font-weight:600}.text-button span{margin-left:38px;color:#ba3626}.scene-meta{position:absolute;right:40px;top:150px;text-align:right;display:grid;gap:7px}.scene-meta span,.scene-meta small{font-size:8px;letter-spacing:.15em;color:#969084}.scene-meta b{font-size:11px;letter-spacing:.09em}footer{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);text-align:center;z-index:4}nav{display:flex;background:#fffdf6eF;border:1px solid #e2dbd0;padding:7px;border-radius:19px;box-shadow:0 10px 35px #5c473717;gap:3px;backdrop-filter:blur(15px)}nav button{background:none;border-radius:13px;color:#514e47;min-width:72px;padding:10px 12px;font-size:20px;line-height:1.2}nav button span{display:block;font-size:10px;margin-top:6px}nav button.active,nav button[aria-pressed=true]{background:#c9352b;color:#fff}.divider{width:1px;background:#e5e0d7;margin:10px 5px}footer p{font-size:10px;color:#8b857b;margin:11px 0 0}.bottom-label{position:absolute;bottom:38px;left:40px;font-size:8px;letter-spacing:.15em;color:#989185}.hotspot{position:absolute;border-radius:50%;width:37px;height:37px;background:#fff9ed;color:#b63129;border:1px solid #dcb89c;box-shadow:0 0 0 6px #fff4df44,0 3px 8px #0002;font-size:11px;transform:translate(-50%,-50%);z-index:2;transition:opacity .2s}.hotspot:hover{background:#c9352b;color:white}.hotspot span{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fffdf7;padding:7px 12px;border-radius:6px;opacity:0;pointer-events:none;font-size:11px;color:#363a36}.hotspot:hover span,.hotspot:focus-visible span{opacity:1}#loading{position:absolute;inset:0;display:flex;gap:13px;justify-content:center;align-items:center;background:#f4f0e8;z-index:10;font-size:13px}.spinner{width:20px;height:20px;border:2px solid #d7c9b9;border-top-color:#c9352b;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}dialog{border:0;border-radius:24px;padding:0;width:min(850px,92vw);max-height:88svh;background:#fffdf7;color:#293330;box-shadow:0 30px 100px #0004}dialog::backdrop{background:#26272088;backdrop-filter:blur(6px)}.close{position:sticky;float:right;right:15px;top:15px;width:37px;height:37px;border-radius:50%;background:white;box-shadow:0 2px 10px #0002;font-size:25px;z-index:1}#detail-content{padding:35px}#detail-content h2{font-size:29px;line-height:1.4;margin:10px 0}#detail-content p{font-size:14px;line-height:1.9;color:#73766d}#detail-content img{max-width:100%;max-height:53vh;object-fit:contain;border-radius:12px;display:block;margin:20px auto;background:#f1ede4}.detail-tag{color:#c9352b;font-size:10px;letter-spacing:.16em}.pills{display:flex;gap:8px;flex-wrap:wrap}.pills span{padding:7px 12px;border:1px solid #e0d9ce;border-radius:20px;font-size:12px}#toast{position:absolute;bottom:160px;left:50%;transform:translateX(-50%);background:#293330;color:white;border-radius:20px;padding:10px 20px;font-size:12px;opacity:0;pointer-events:none}#toast.show{opacity:1}@media(min-width:1500px){.intro{top:22%}}@media(max-width:800px){header{top:22px;left:22px;right:22px}.brand{font-size:9px;gap:8px}.brand small{font-size:6px}.outline{font-size:10px;padding:10px 13px}.outline span{margin-left:8px}.intro{top:110px;left:24px;width:230px}h1{font-size:34px;margin:12px 0}.intro p{font-size:10px}.eyebrow{font-size:8px}.text-button{font-size:11px}.scene-meta{right:25px;top:122px}.scene-meta b{font-size:8px}.scene-meta small{display:none}.scene-meta span{font-size:7px}.bottom-label{display:none}nav button{min-width:49px;padding:9px 7px;font-size:18px}nav button span{font-size:9px}.divider{margin:8px 2px}footer{bottom:22px}footer p{font-size:8px}#experience{min-height:730px}#detail-content{padding:30px 22px}#detail-content h2{font-size:23px}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}}
h1 span{white-space:nowrap}@media(min-width:801px){.intro{width:350px}h1{font-size:44px}}
.intro,.scene-meta{transition:opacity .35s}#experience:not([data-view="overview"]) .intro,#experience:not([data-view="overview"]) .scene-meta{opacity:0;pointer-events:none}#experience:not([data-view="overview"]) .intro button{pointer-events:none}

.brand-logo{display:block;width:72px;height:auto;flex:none}@media(max-width:800px){.brand-logo{width:64px}}

dialog.image-only{width:min(1400px,96vw);background:#fff;border-radius:16px}dialog.image-only #detail-content{padding:0}dialog.image-only .detail-tag,dialog.image-only h2,dialog.image-only p,dialog.image-only .pills{display:none}dialog.image-only #detail-content img{margin:0;width:100%;max-height:87svh;object-fit:contain;border-radius:0;background:#fff}dialog.image-only .close{position:absolute;top:12px;right:12px;float:none}body{overflow-x:hidden}

.gsb-contact{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:24px max(24px,calc((100% - 1120px)/2)) 32px;background:#fff}.gsb-contact a{min-height:60px;display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-radius:12px;color:#fff;text-decoration:none;font-weight:700;font-size:17px}.gsb-contact a:focus-visible{outline:3px solid #173678;outline-offset:4px}.gsb-contact .facebook{background:#0866d9}.gsb-contact .tiktok{background:#151515}.gsb-contact .instagram{background:linear-gradient(115deg,#a82daf,#d5266b 62%,#c64824)}.gsb-contact .line{background:#067d38}.gsb-contact a:hover{filter:brightness(.93)}@media(max-width:760px){.gsb-contact{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:20px 16px 28px}.gsb-contact a{min-height:54px;font-size:15px;padding:14px 18px}}