/* Customer pages G1-G3 — sizes measured on the client mockups (896 px wide) and expressed in --u = 1 mockup pixel,
   so the page scales with the phone width exactly like the artwork. */
@font-face{font-family:P;font-weight:300;font-display:swap;src:url(../fonts/prompt-thai-300-normal.woff2)}
@font-face{font-family:P;font-weight:400;font-display:swap;src:url(../fonts/prompt-thai-400-normal.woff2)}
@font-face{font-family:P;font-weight:500;font-display:swap;src:url(../fonts/prompt-thai-500-normal.woff2)}
@font-face{font-family:P;font-weight:600;font-display:swap;src:url(../fonts/prompt-thai-600-normal.woff2)}
@font-face{font-family:P;font-weight:700;font-display:swap;src:url(../fonts/prompt-thai-700-normal.woff2)}
@font-face{font-family:P;font-weight:800;font-display:swap;src:url(../fonts/prompt-thai-800-normal.woff2)}
@font-face{font-family:P;font-weight:400;font-display:swap;src:url(../fonts/prompt-latin-400-normal.woff2);unicode-range:U+0000-00FF,U+2013-201D}
@font-face{font-family:P;font-weight:500;font-display:swap;src:url(../fonts/prompt-latin-500-normal.woff2);unicode-range:U+0000-00FF,U+2013-201D}
@font-face{font-family:P;font-weight:600;font-display:swap;src:url(../fonts/prompt-latin-600-normal.woff2);unicode-range:U+0000-00FF,U+2013-201D}
@font-face{font-family:P;font-weight:700;font-display:swap;src:url(../fonts/prompt-latin-700-normal.woff2);unicode-range:U+0000-00FF,U+2013-201D}
@font-face{font-family:P;font-weight:800;font-display:swap;src:url(../fonts/prompt-latin-800-normal.woff2);unicode-range:U+0000-00FF,U+2013-201D}
:root{--g9:#023f1f;--g8:#0b5424;--g7:#0f6b2d;--g6:#1d7a35;--lime:#e4f53a;--ink:#17231b;--mut:#6b746e;--line:#d7e2da;--red:#c62828}
*{box-sizing:border-box}
html,body{margin:0;background:#e9f1ea}
body{font-family:P,"Noto Sans Thai",Tahoma,sans-serif;color:var(--ink);-webkit-text-size-adjust:100%}
a{color:inherit}
.phone{position:relative;display:flex;flex-direction:column;max-width:480px;min-height:100vh;min-height:100dvh;margin:0 auto;background:#fbfcfd;container-type:inline-size;overflow-x:hidden}
.phone{--u:calc(100cqw / 896)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--mut)}

/* ---------- hero (art 895x640, text removed; live text at the mockup positions) */
.hero{position:relative;width:100%;background:#0b5424 url(../img/hero_home.jpg) top center/100% auto no-repeat;aspect-ratio:895/640;color:#fff}
.hero h1,.hero p{margin:0}
.h-title{position:absolute;left:calc(70*var(--u));top:calc(188*var(--u));font-weight:800;font-style:italic;font-size:calc(66*var(--u));line-height:1.13;letter-spacing:calc(-1*var(--u));text-shadow:0 calc(3*var(--u)) calc(10*var(--u)) rgba(0,40,10,.35)}
.h-title span{display:block}.h-title em{color:var(--lime)}
.h-swoosh{position:absolute;left:calc(330*var(--u));top:calc(336*var(--u));width:calc(170*var(--u));height:calc(18*var(--u));border-top:calc(4*var(--u)) solid #fff;border-radius:50% 50% 0 0/100% 100% 0 0;transform:rotate(-3deg)}
.h-sub{position:absolute;left:calc(70*var(--u));top:calc(366*var(--u));display:flex;gap:calc(14*var(--u));align-items:flex-start;font-size:calc(25*var(--u));line-height:1.45;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.h-sub svg{width:calc(46*var(--u));height:calc(54*var(--u));margin-left:calc(-8*var(--u));color:var(--lime);flex:none;margin-top:calc(2*var(--u))}
.h-cta{position:absolute;left:calc(64*var(--u));top:calc(453*var(--u));width:calc(429*var(--u));height:calc(78*var(--u));display:flex;align-items:center;gap:calc(14*var(--u));padding:0 calc(26*var(--u));border-radius:calc(40*var(--u));background:linear-gradient(180deg,#eefc6a,#d3ef2a);color:#13301b;text-decoration:none;font-weight:700;font-size:calc(31*var(--u));box-shadow:0 calc(6*var(--u)) calc(14*var(--u)) rgba(0,40,10,.25)}
.h-cta span{flex:1;white-space:nowrap}.h-cta svg:first-child{width:calc(58*var(--u));height:calc(58*var(--u))}.h-cta svg:last-child{width:calc(26*var(--u));height:calc(26*var(--u))}
.hero-reg{background-image:url(../img/hero_register.jpg);aspect-ratio:896/470}
/* G1 art (no button; content starts at y 548) — used by the login page and by home while the travel button is off */
.hero-plain{background-image:url(../img/hero_login.jpg);aspect-ratio:896/570}
.hero-plain .h-title{top:calc(200*var(--u))}.hero-plain .h-swoosh{top:calc(346*var(--u))}.hero-plain .h-sub{top:calc(374*var(--u))}
.hero-plain+.g3{margin-top:calc(-22*var(--u))}
.r-title{position:absolute;left:calc(152*var(--u));top:calc(205*var(--u));font-weight:800;font-style:italic;font-size:calc(70*var(--u));line-height:1.2;text-shadow:0 calc(3*var(--u)) calc(10*var(--u)) rgba(0,40,10,.35);white-space:nowrap}
.r-sub{position:absolute;left:calc(55*var(--u));top:calc(312*var(--u));font-size:calc(31*var(--u));line-height:1.36;text-shadow:0 1px 4px rgba(0,0,0,.4)}

/* hamburger: transparent target over the icon baked into the hero art; opens the bottom sheet */
.menu summary{position:absolute;z-index:30;left:calc(790*var(--u));top:calc(32*var(--u));width:calc(84*var(--u));height:calc(76*var(--u));list-style:none;cursor:pointer;border-radius:calc(14*var(--u))}
.menu summary::-webkit-details-marker{display:none}
.p-register .menu summary{left:calc(795*var(--u));top:calc(18*var(--u))}
.p-login .menu summary,.p-privacy .menu summary,.p-error .menu summary{top:calc(30*var(--u));background:center/60% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E")}
.menu[open] summary{position:fixed;inset:0;left:0;top:0;width:auto;height:auto;border-radius:0;background:rgba(5,25,12,.5);z-index:40}
.sheet{position:fixed;z-index:50;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:480px;background:#fff;border-radius:22px 22px 0 0;padding:12px 18px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(0,0,0,.2)}
.grip{width:44px;height:5px;border-radius:3px;background:#d4d9d5;margin:0 auto 14px}
.sheet-h{display:flex;gap:8px;align-items:center;font-weight:600;color:var(--g7);margin-bottom:8px}
.langs{display:flex;gap:10px;margin-bottom:12px}
.langs button{flex:1;font:inherit;font-size:16px;padding:10px;border-radius:14px;border:1.6px solid var(--line);background:#fff;color:var(--ink)}
.langs button.on{border-color:var(--g6);background:#e8f6eb;color:var(--g8);font-weight:700}
.sheet-a{display:flex;gap:10px;align-items:center;width:100%;padding:13px 4px;border:0;border-top:1px solid #eef2ef;background:none;font:inherit;font-size:16px;color:var(--ink);text-decoration:none;text-align:left}
.sheet-a.danger{color:var(--red)}
.sheet-a svg{color:var(--g7)}.sheet-a.danger svg{color:var(--red)}

/* ---------- shared controls */
.btn-g{display:flex;align-items:center;justify-content:center;text-decoration:none;gap:calc(16*var(--u));width:100%;height:calc(100*var(--u));min-height:46px;border:0;border-radius:calc(52*var(--u));font:inherit;font-weight:700;font-size:calc(38*var(--u));color:#fff;cursor:pointer;
  background:linear-gradient(90deg,#66bb00 0%,#3aa507 22%,#0b8027 50%,#016230 78%,#005a2a 100%);box-shadow:0 calc(8*var(--u)) calc(16*var(--u)) rgba(15,90,35,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-g svg{width:calc(30*var(--u));height:calc(30*var(--u))}
.btn-o{display:flex;align-items:center;justify-content:center;gap:calc(16*var(--u));width:100%;height:calc(108*var(--u));min-height:46px;border:calc(5*var(--u)) solid var(--g8);border-radius:calc(56*var(--u));background:#fff;color:var(--g8);font-weight:700;font-size:calc(38*var(--u));text-decoration:none}
.btn-o svg{width:calc(52*var(--u));height:calc(52*var(--u))}
.btn-o.sm{display:inline-flex;width:auto;height:auto;padding:8px 22px;font-size:16px;border-width:2px}
.err{color:var(--red);font-size:calc(25*var(--u));margin:calc(8*var(--u)) calc(10*var(--u)) 0;line-height:1.4}
.err a{color:var(--g8);font-weight:700}
.err.top{background:#fdecec;border-radius:12px;padding:8px 12px;margin:0 0 10px}
.toast{position:sticky;top:0;z-index:20;margin:0;padding:10px 16px;font-size:15px;text-align:center}
.t-ok{background:#e3f6e7;color:var(--g8)}.t-error{background:#fdecec;color:var(--red)}

/* ---------- G1 login */
.g1{position:relative;margin-top:calc(-22*var(--u));padding:0 calc(18*var(--u))}
.login-card{background:#fff;border-radius:calc(46*var(--u)) calc(46*var(--u)) calc(40*var(--u)) calc(40*var(--u));padding:calc(38*var(--u)) calc(52*var(--u)) calc(60*var(--u));box-shadow:0 calc(-4*var(--u)) calc(30*var(--u)) rgba(10,60,20,.12);text-align:center}
.avatar{width:calc(130*var(--u));height:calc(130*var(--u));margin:0 auto;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,#2f9a3a,#0b5424);box-shadow:0 calc(6*var(--u)) calc(14*var(--u)) rgba(10,80,30,.3)}
.avatar svg{width:calc(70*var(--u));height:calc(70*var(--u))}
.login-card h2{margin:calc(22*var(--u)) 0 0;font-size:calc(58*var(--u));font-weight:700;color:#13301b;line-height:1.25}
.login-card .muted{margin:calc(4*var(--u)) 0 calc(48*var(--u));font-size:calc(30*var(--u));color:#3d4741}
.pill-in{display:flex;align-items:center;gap:calc(26*var(--u));height:calc(106*var(--u));min-height:46px;padding:0 calc(34*var(--u));border-radius:calc(30*var(--u));background:#fff;border:calc(2*var(--u)) solid #e3ebe5;box-shadow:0 calc(6*var(--u)) calc(18*var(--u)) rgba(10,60,20,.1);text-align:left}
.pill-in svg{width:calc(50*var(--u));height:calc(50*var(--u));color:var(--g6);flex:none}
.pill-in input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:max(16px,calc(32*var(--u)));color:var(--ink)}
.pill-in input::placeholder{color:#8c938f}
.pill-in.bad{border-color:var(--red)}
.g1 form .btn-g{margin-top:calc(46*var(--u))}
.or{display:flex;align-items:center;gap:calc(24*var(--u));margin:calc(40*var(--u)) calc(16*var(--u)) calc(34*var(--u));color:#5f6863;font-size:calc(30*var(--u))}
.or:before,.or:after{content:"";flex:1;height:calc(2*var(--u));background:#d7ddd9}
.feat{display:flex;margin:calc(30*var(--u)) 0 0;padding:calc(26*var(--u)) calc(8*var(--u));border-radius:calc(34*var(--u));background:#eef7ea}
.feat div{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;font-size:calc(24*var(--u));color:#1f2a24;line-height:1.35}
.feat div+div{border-left:calc(2*var(--u)) solid #d6e6d6}
.feat svg{width:calc(66*var(--u));height:calc(66*var(--u));color:var(--g8);margin-bottom:calc(8*var(--u))}
.feat .ic-golf path{fill:currentColor}
.feat b{font-weight:500}.feat span{font-weight:400}
.foot-wave{height:calc(73*var(--u));margin-top:auto;padding-top:calc(20*var(--u));background:url(../img/footer_wave.jpg) bottom center/100% auto no-repeat}

/* ---------- G2 register */
.g2{padding:calc(10*var(--u)) calc(32*var(--u)) 0}
.lab{display:flex;align-items:center;gap:calc(18*var(--u));margin:calc(22*var(--u)) 0 calc(8*var(--u));font-weight:600;font-size:calc(30*var(--u));color:#13301b}
.lab svg{width:calc(38*var(--u));height:calc(38*var(--u));color:var(--g6);flex:none}
.lab i{color:var(--red);font-style:normal}
.line-b{display:inline-grid;place-items:center;width:calc(42*var(--u));height:calc(42*var(--u));border-radius:50%;background:#06c755;color:#fff;font-size:calc(11*var(--u));font-weight:800;letter-spacing:-.2px}
.in,.sel{display:block;width:calc(100% - 74*var(--u));margin-left:calc(74*var(--u));height:calc(70*var(--u));min-height:36px;box-shadow:inset 0 1px 3px rgba(0,40,20,.06);border:calc(2.4*var(--u)) solid #cfd8d3;border-radius:calc(30*var(--u));background:#fff;padding:0 calc(26*var(--u));font:inherit;font-size:max(16px,calc(29*var(--u)));color:var(--ink)}
.in::placeholder{color:#8c938f}
.in:focus,.sel:focus-within,.pill-in:focus-within{outline:none;border-color:#3aa64a;box-shadow:0 0 0 3px rgba(58,166,74,.18)}
.in.bad,.sel.bad{border-color:var(--red)}
.sel{position:relative;padding:0}
.sel select{appearance:none;-webkit-appearance:none;width:100%;height:100%;border:0;background:none;padding:0 calc(70*var(--u)) 0 calc(26*var(--u));font:inherit;font-size:max(16px,calc(29*var(--u)));color:var(--ink);border-radius:calc(30*var(--u))}
.sel svg{position:absolute;right:calc(24*var(--u));top:50%;transform:translateY(-50%);width:calc(36*var(--u));height:calc(36*var(--u));pointer-events:none;color:#2b3530}
.g2 .err{margin-left:calc(84*var(--u))}
.p-home .phone{background:linear-gradient(180deg,#f3f8f6 0%,#e4eef2 60%,#eef4f3 100%)}
.cb{display:flex;gap:calc(22*var(--u));align-items:flex-start;margin:calc(40*var(--u)) 0 0;font-size:calc(26*var(--u));line-height:1.45;color:#26302a;cursor:pointer}
.cb input{position:absolute;opacity:0;width:1px;height:1px}
.cb i{flex:none;width:calc(40*var(--u));height:calc(40*var(--u));border-radius:calc(8*var(--u));border:calc(2.5*var(--u)) solid #9aa59d;background:#fff;display:grid;place-items:center;color:#fff;margin-top:calc(2*var(--u))}
.cb i svg{width:calc(26*var(--u));height:calc(26*var(--u));opacity:0}
.cb input:checked+i{background:#22a33a;border-color:#22a33a}.cb input:checked+i svg{opacity:1}
.cb input:focus-visible+i{box-shadow:0 0 0 3px rgba(58,166,74,.35)}
.cb.bad i{border-color:var(--red)}
.cb a{color:var(--g7);font-weight:600}
.btn-g.big{margin-top:calc(44*var(--u));height:calc(108*var(--u));font-size:calc(44*var(--u))}.btn-g.big svg:first-child{width:calc(50*var(--u));height:calc(50*var(--u))}
.have{text-align:center;margin:calc(36*var(--u)) 0 0;font-size:calc(30*var(--u));color:#3d4741}
.have a{color:var(--g7);font-weight:700;text-decoration:underline;text-underline-offset:calc(6*var(--u))}
.have svg{width:calc(24*var(--u));height:calc(24*var(--u));vertical-align:middle;color:var(--g7)}
.foot-city{flex:none;height:calc(195*var(--u));margin-top:auto;background:url(../img/footer_city.jpg) bottom center/100% auto no-repeat}

/* ---------- G3 home */
.g3{padding:0 calc(26*var(--u)) calc(230*var(--u));margin-top:calc(-4*var(--u))}
.member-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border-radius:calc(30*var(--u));padding:calc(24*var(--u)) calc(30*var(--u));box-shadow:0 calc(4*var(--u)) calc(18*var(--u)) rgba(20,60,30,.08);margin-bottom:calc(20*var(--u))}
.member-card span{display:block;font-size:calc(26*var(--u))}.member-card b{display:block;font-size:calc(32*var(--u));color:var(--g8)}
.member-card svg{width:calc(56*var(--u));height:calc(56*var(--u));color:var(--g6)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:calc(20*var(--u))}
.tile{position:relative;display:flex;align-items:center;height:calc(177*var(--u));background:#fff;border-radius:calc(30*var(--u));box-shadow:0 calc(4*var(--u)) calc(18*var(--u)) rgba(20,60,30,.09);text-decoration:none;overflow:hidden}
.tile img{width:calc(150*var(--u));height:100%;object-fit:cover;border-radius:calc(30*var(--u));flex:none}
.tile span{flex:1;min-width:0;padding:0 calc(44*var(--u)) 0 calc(10*var(--u))}
.tile b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:calc(31*var(--u));line-height:1.15;font-weight:700;color:#13301b}
.tile small{display:block;font-size:calc(20*var(--u));color:#5d6862;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:calc(4*var(--u))}
.tile i{position:absolute;right:calc(14*var(--u));top:50%;transform:translateY(-50%);width:calc(36*var(--u));height:calc(36*var(--u));border-radius:50%;background:#38b03f;color:#fff;display:grid;place-items:center}
.tile i svg{width:calc(20*var(--u));height:calc(20*var(--u))}
.soon{text-align:center;color:var(--mut);font-size:calc(28*var(--u));background:#fff;border-radius:calc(30*var(--u));padding:calc(40*var(--u)) calc(30*var(--u));margin:0}
.bnav{position:fixed;z-index:10;left:50%;transform:translateX(-50%);bottom:calc(8px + env(safe-area-inset-bottom));width:calc(min(100vw,480px) - 16px);display:flex;align-items:flex-end;background:#fff;border-radius:calc(46*var(--u));padding:calc(10*var(--u));box-shadow:0 calc(4*var(--u)) calc(26*var(--u)) rgba(0,0,0,.12)}
.bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:calc(4*var(--u));padding:calc(14*var(--u)) 0 calc(12*var(--u));border-radius:calc(38*var(--u));font-size:calc(25*var(--u));font-weight:600;color:#1d4a2b;text-decoration:none}
.bnav a svg{width:calc(46*var(--u));height:calc(46*var(--u))}
.bnav a.on{background:linear-gradient(180deg,#1b7a36,#0b4f22);color:var(--lime);box-shadow:0 calc(6*var(--u)) calc(14*var(--u)) rgba(10,80,30,.3)}
.bnav a.qr{font-weight:500;font-size:calc(21*var(--u))}
.bnav a.qr span{display:grid;place-items:center;width:calc(110*var(--u));height:calc(110*var(--u));margin-top:calc(-60*var(--u));border-radius:50%;background:var(--lime);color:#13301b;box-shadow:0 calc(6*var(--u)) calc(14*var(--u)) rgba(80,110,0,.3)}

/* ---------- plain pages (privacy / error) */
.plain-h{background:linear-gradient(135deg,var(--g9),var(--g7));padding:14px 16px 18px;border-radius:0 0 22px 22px}
.plain-h img{height:44px;display:block}
.doc{padding:18px 18px 40px;font-size:16px;line-height:1.6}
.doc h1{font-size:21px;margin:4px 0 6px}
.draft{display:inline-block;background:#fff4d6;color:#8a5a00;border-radius:10px;padding:2px 10px;font-size:13px;margin:0 0 6px}