/* ==========================================================
   39GO PUBLIC HOME — VISUAL EDITOR V2.3.0
   Loaded after the V2.2.x public-home CSS.
   ========================================================== */

/* Runtime variables / overrides */
#go39PublicHomeV22{
  --ed-brand-size:20px;
  --ed-nav-size:14px;
  --ed-kicker-size:12px;
  --ed-headline-size:58px;
  --ed-headline-line:1.00;
  --ed-body-size:16px;
  --ed-body-line:1.48;
  --ed-chip-size:12px;
  --ed-age-size:14px;
  --ed-login-size:16px;
  --ed-policy-size:11px;

  --ed-safe-title-size:25px;
  --ed-safe-body-size:14px;
  --ed-online-size:13px;

  --ed-nav-height:52px;
  --ed-page-pad:5px;
  --ed-card-pad-y:8px;
  --ed-main-gap:18px;
  --ed-left-pct:42%;
  --ed-right-pct:58%;
  --ed-hero-height:650px;

  --ed-photo-scale:1.00;
  --ed-photo-x:50%;
  --ed-photo-y:28%;

  --ed-safe-left:18px;
  --ed-safe-right:18px;
  --ed-safe-bottom:18px;
  --ed-safe-padding:17px;
  --ed-radar-size:185px;

  --ed-green:#0f8b57;
  --ed-text:#0f1512;
  --ed-bg:#f4f8f5;
  --ed-google:#707a75;
  --ed-line:#06c755;

  --ed-mobile-headline:30px;
  --ed-mobile-body:13px;
  --ed-mobile-login:13px;
  --ed-mobile-hero-vh:34dvh;
  --ed-glass-opacity:.72;
  --ed-glass-blur:18px;
  --ed-glass-border:.72;
  --ed-glass-shadow:.10;
}

#go39PublicHomeV22{
  color:var(--ed-text)!important;
  background-color:var(--ed-bg)!important;
}
#go39PublicHomeV22 .pm22-brandcopy strong{font-size:var(--ed-brand-size)!important}
#go39PublicHomeV22 .pm22-links a{font-size:var(--ed-nav-size)!important}
#go39PublicHomeV22 .pm22-kicker{
  font-size:var(--ed-kicker-size)!important;
  color:var(--ed-green)!important;
}
#go39PublicHomeV22 .pm22-left h1{
  font-size:var(--ed-headline-size)!important;
  line-height:var(--ed-headline-line)!important;
}
#go39PublicHomeV22 .pm22-left h1 em{color:var(--ed-green)!important}
#go39PublicHomeV22 .pm22-left p{
  font-size:var(--ed-body-size)!important;
  line-height:var(--ed-body-line)!important;
  white-space:pre-line;
}
#go39PublicHomeV22 .pm22-chip{font-size:var(--ed-chip-size)!important}
#go39PublicHomeV22 .pm22-age{font-size:var(--ed-age-size)!important}
#go39PublicHomeV22 .pm22-btn{font-size:var(--ed-login-size)!important}
#go39PublicHomeV22 .pm22-policy{font-size:var(--ed-policy-size)!important}

#go39PublicHomeV22 .pm22-safe-copy h2{
  font-size:var(--ed-safe-title-size)!important;
  color:var(--ed-green)!important;
}
#go39PublicHomeV22 .pm22-safe-copy p{
  font-size:var(--ed-safe-body-size)!important;
  white-space:pre-line;
}
#go39PublicHomeV22 .pm22-online{font-size:var(--ed-online-size)!important}

#go39PublicHomeV22 .pm22-shell{
  padding-top:var(--ed-page-pad)!important;
  padding-bottom:var(--ed-page-pad)!important;
}
#go39PublicHomeV22 .pm22-card{
  padding-top:var(--ed-card-pad-y)!important;
  padding-bottom:var(--ed-card-pad-y)!important;
}
#go39PublicHomeV22 .pm22-nav{min-height:var(--ed-nav-height)!important}
#go39PublicHomeV22 .pm22-main{gap:var(--ed-main-gap)!important}
#go39PublicHomeV22 .pm22-right{
  height:var(--ed-hero-height)!important;
  min-height:var(--ed-hero-height)!important;
}

#go39PublicHomeV22 .pm22-photo{
  transform:scale(var(--ed-photo-scale))!important;
  transform-origin:var(--ed-photo-x) var(--ed-photo-y)!important;
  background-position:var(--ed-photo-x) var(--ed-photo-y)!important;
}

#go39PublicHomeV22 .pm22-safe{
  left:var(--ed-safe-left)!important;
  right:var(--ed-safe-right)!important;
  bottom:var(--ed-safe-bottom)!important;
  padding:var(--ed-safe-padding)!important;
}
#go39PublicHomeV22 .pm22-radar{
  width:var(--ed-radar-size)!important;
  height:var(--ed-radar-size)!important;
}
#go39PublicHomeV22 .pm22-google{
  background:var(--ed-google)!important;
  border-color:var(--ed-google)!important;
}
#go39PublicHomeV22 .pm22-line{
  background:var(--ed-line)!important;
  border-color:var(--ed-line)!important;
}

#go39PublicHomeV22.ed-hide-chips .pm22-chips{display:none!important}
#go39PublicHomeV22.ed-hide-safe .pm22-safe{display:none!important}
#go39PublicHomeV22.ed-hide-footer .pm22-footer{display:none!important}
#go39PublicHomeV22.ed-hide-navlinks .pm22-links{display:none!important}

/* Desktop column ratio */
@media(min-width:821px){
  #go39PublicHomeV22 .pm22-main{
    grid-template-columns:var(--ed-left-pct) var(--ed-right-pct)!important;
  }
}

/* Mobile settings */
@media(max-width:820px){
  #go39PublicHomeV22 .pm22-left h1{
    font-size:var(--ed-mobile-headline)!important;
  }
  #go39PublicHomeV22 .pm22-left p{
    font-size:var(--ed-mobile-body)!important;
  }
  #go39PublicHomeV22 .pm22-btn{
    font-size:var(--ed-mobile-login)!important;
  }
  #go39PublicHomeV22 .pm22-right{
    height:var(--ed-mobile-hero-vh)!important;
    min-height:220px!important;
  }
}

/* ==========================================================
   EDITOR PANEL — only rendered for authorized owner in ?public-edit=1
   ========================================================== */
#go39VisualEditor{
  position:fixed;
  z-index:2147483600;
  top:10px;
  right:10px;
  width:390px;
  max-width:calc(100vw - 20px);
  height:calc(100dvh - 20px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  background:rgba(17,25,21,.94);
  color:#f5faf7;
  box-shadow:0 24px 80px rgba(0,0,0,.28);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans Thai","Segoe UI",sans-serif;
}
#go39VisualEditor *{box-sizing:border-box}
#go39VisualEditor.is-collapsed{
  width:190px;
  height:58px;
}
#go39VisualEditor.is-collapsed .ed-body,
#go39VisualEditor.is-collapsed .ed-footer-actions{
  display:none;
}

.ed-head{
  min-height:58px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.ed-head strong{
  flex:1;
  font-size:14px;
  letter-spacing:.01em;
}
.ed-head small{
  display:block;
  color:#a9bbb1;
  font-size:9px;
}
.ed-head button{
  min-width:36px;height:36px;
  border:0;
  border-radius:11px;
  background:rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  font-weight:850;
}

.ed-body{
  flex:1;
  overflow:auto;
  padding:10px;
}
.ed-section{
  margin-bottom:9px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.045);
}
.ed-section summary{
  list-style:none;
  cursor:pointer;
  padding:12px 13px;
  font-size:12px;
  font-weight:850;
  color:#eff8f2;
}
.ed-section summary::-webkit-details-marker{display:none}
.ed-section[open] summary{
  border-bottom:1px solid rgba(255,255,255,.07);
}
.ed-grid{
  padding:10px 12px 12px;
  display:grid;
  gap:10px;
}
.ed-field{
  display:grid;
  gap:5px;
}
.ed-field label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#bdcbc3;
  font-size:10px;
}
.ed-field output{
  color:#fff;
  font-weight:800;
  font-size:10px;
}
.ed-field input[type="range"]{
  width:100%;
  accent-color:#29bd78;
}
.ed-field input[type="text"],
.ed-field textarea{
  width:100%;
  min-height:37px;
  padding:8px 9px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:9px;
  outline:none;
  background:rgba(255,255,255,.07);
  color:#fff;
  font:600 11px/1.4 inherit;
}
.ed-field textarea{
  min-height:72px;
  resize:vertical;
}
.ed-field input[type="color"]{
  width:100%;
  height:35px;
  padding:2px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:9px;
  background:rgba(255,255,255,.07);
}
.ed-toggle{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#dfe8e3;
  font-size:11px;
}
.ed-toggle input{
  width:38px;
  height:22px;
  accent-color:#29bd78;
}
.ed-status{
  padding:7px 10px;
  border-radius:9px;
  background:rgba(41,189,120,.12);
  color:#9ce0bb;
  font-size:10px;
  display:none;
}
.ed-status.is-on{display:block}

.ed-footer-actions{
  padding:10px;
  display:grid;
  grid-template-columns:1fr 1fr 1.35fr;
  gap:8px;
  border-top:1px solid rgba(255,255,255,.09);
}
.ed-footer-actions button{
  min-height:42px;
  border:0;
  border-radius:11px;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
}
.ed-reset{background:#3c4741;color:#fff}
.ed-close{background:#fff;color:#172019}
.ed-save{background:#1cad68;color:#fff}

@media(max-width:620px){
  #go39VisualEditor{
    top:auto;
    left:7px;
    right:7px;
    bottom:7px;
    width:auto;
    max-width:none;
    height:min(65dvh,620px);
    border-radius:18px;
  }
  #go39VisualEditor.is-collapsed{
    left:auto;
    width:190px;
    height:58px;
  }
}


/* ==========================================================
   V2.3.1 — BALANCED SAFE CARD
   Desktop: safe card inset equal left/right.
   Mobile: symmetric, compact, no overflow.
   ========================================================== */

#go39PublicHomeV22 .pm22-safe{
  left:var(--ed-safe-left)!important;
  right:var(--ed-safe-right)!important;
  width:auto!important;
  max-width:none!important;
  box-sizing:border-box!important;
}

@media(min-width:821px){
  #go39PublicHomeV22 .pm22-safe{
    left:var(--ed-safe-left)!important;
    right:var(--ed-safe-right)!important;
    border-radius:24px!important;
  }
}

@media(max-width:820px){
  #go39PublicHomeV22 .pm22-safe{
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    width:auto!important;
    min-height:104px!important;
    padding:10px 12px!important;
    grid-template-columns:minmax(0,1fr) 82px!important;
    gap:8px!important;
    border-radius:18px!important;
  }

  #go39PublicHomeV22 .pm22-safe-copy{
    min-width:0!important;
  }

  #go39PublicHomeV22 .pm22-safe-copy h2{
    font-size:15px!important;
    line-height:1.18!important;
    margin:0 0 4px!important;
  }

  #go39PublicHomeV22 .pm22-safe-copy p{
    font-size:10px!important;
    line-height:1.35!important;
  }

  #go39PublicHomeV22 .pm22-radar{
    width:76px!important;
    height:76px!important;
  }
}

@media(max-width:480px){
  #go39PublicHomeV22 .pm22-safe{
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    min-height:96px!important;
    padding:9px 10px!important;
    grid-template-columns:minmax(0,1fr) 70px!important;
    gap:6px!important;
    border-radius:16px!important;
  }

  #go39PublicHomeV22 .pm22-safe-copy h2{
    font-size:14px!important;
  }

  #go39PublicHomeV22 .pm22-safe-copy p{
    font-size:9.5px!important;
  }

  #go39PublicHomeV22 .pm22-radar{
    width:66px!important;
    height:66px!important;
  }
}


/* ==========================================================
   V2.3.2 — MOBILE SAFE CARD FLOW
   Desktop: Safe Card overlays Hero as before.
   Mobile: Safe Card becomes a separate section BELOW the Hero
   so it never covers the face / main photo.
   ========================================================== */

@media(max-width:820px){

  /* Right side becomes a normal vertical stack */
  #go39PublicHomeV22 .pm22-right{
    display:flex!important;
    flex-direction:column!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    background:transparent!important;
  }

  /* Hero photo gets its own fixed viewport area */
  #go39PublicHomeV22 .pm22-photo{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:var(--ed-mobile-hero-vh)!important;
    min-height:230px!important;
    max-height:420px!important;
    flex:0 0 auto!important;
    border-radius:0!important;
    overflow:hidden!important;
  }

  /* Safe Card moves OUT of the image area */
  #go39PublicHomeV22 .pm22-safe{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:calc(100% - 20px)!important;
    margin:10px auto 0!important;
    min-height:108px!important;
    flex:0 0 auto!important;
    border-radius:18px!important;
    box-shadow:0 12px 30px rgba(17,52,33,.11)!important;
  }

  /* Keep mobile layout compact and readable */
  #go39PublicHomeV22 .pm22-safe-copy h2{
    font-size:15px!important;
    line-height:1.18!important;
  }

  #go39PublicHomeV22 .pm22-safe-copy p{
    font-size:10px!important;
    line-height:1.35!important;
  }

  #go39PublicHomeV22 .pm22-radar{
    width:76px!important;
    height:76px!important;
  }

  /* Owner edit button stays on top of the photo only */
  #go39PublicHomeV22 .pm22-photo-tools{
    top:10px!important;
    right:10px!important;
  }
}

/* Very small phones */
@media(max-width:480px){
  #go39PublicHomeV22 .pm22-photo{
    min-height:210px!important;
  }

  #go39PublicHomeV22 .pm22-safe{
    width:calc(100% - 16px)!important;
    margin-top:8px!important;
    min-height:96px!important;
    grid-template-columns:minmax(0,1fr) 70px!important;
    gap:6px!important;
    padding:9px 10px!important;
    border-radius:16px!important;
  }

  #go39PublicHomeV22 .pm22-radar{
    width:66px!important;
    height:66px!important;
  }
}

/* Extremely short landscape screens:
   still keep the card separate; just make it compact instead of hiding it */
@media(max-height:650px) and (max-width:820px){
  #go39PublicHomeV22 .pm22-safe{
    display:grid!important;
    min-height:88px!important;
    padding:8px 9px!important;
  }

  #go39PublicHomeV22 .pm22-safe-copy h2{
    font-size:13px!important;
  }

  #go39PublicHomeV22 .pm22-safe-copy p{
    font-size:9px!important;
  }

  #go39PublicHomeV22 .pm22-radar{
    width:60px!important;
    height:60px!important;
  }
}


/* ==========================================================
   V2.3.3 — SOFT GLASS + NO-FLASH POLISH
   ========================================================== */
#go39PublicHomeV22 .pm22-login,
#go39PublicHomeV22 .pm22-safe{
  background:rgba(255,255,255,var(--ed-glass-opacity))!important;
  border:1px solid rgba(255,255,255,var(--ed-glass-border))!important;
  -webkit-backdrop-filter:blur(var(--ed-glass-blur)) saturate(125%)!important;
  backdrop-filter:blur(var(--ed-glass-blur)) saturate(125%)!important;
  box-shadow:
    0 16px 42px rgba(18,55,36,var(--ed-glass-shadow)),
    inset 0 1px 0 rgba(255,255,255,.36)!important;
}
#go39PublicHomeV22 .pm22-age{
  background:rgba(255,255,255,.52)!important;
  border:1px solid rgba(255,255,255,.48)!important;
}
#go39PublicHomeV22 .pm22-policy{color:#647169!important}
#go39PublicHomeV22 .pm22-safe::before{
  background:
    radial-gradient(360px 180px at 92% 45%,rgba(15,139,87,.07),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(246,250,247,.18))!important;
}
@media(max-width:820px){
  #go39PublicHomeV22 .pm22-login,
  #go39PublicHomeV22 .pm22-safe{
    background:rgba(255,255,255,.84)!important;
    border-color:rgba(255,255,255,.88)!important;
    -webkit-backdrop-filter:blur(16px) saturate(120%)!important;
    backdrop-filter:blur(16px) saturate(120%)!important;
  }
}
html.go39-public-boot body{opacity:0!important}
html.go39-public-ready body{opacity:1!important;transition:opacity .12s ease-out}


/* ==========================================================
   V2.3.4 — MOBILE NO SCROLL
   Public home on mobile is locked to one dynamic viewport.
   Prevents vertical page scrolling / bounce when the layout already fits.
   ========================================================== */

@media(max-width:820px){
  html:has(body.pm22-public-active),
  body.pm22-public-active{
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  body.pm22-public-active #go39PublicHomeV22{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
    -webkit-overflow-scrolling:auto!important;
  }

  body.pm22-public-active #go39PublicHomeV22 .pm22-shell{
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }

  body.pm22-public-active #go39PublicHomeV22 .pm22-card{
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }

  body.pm22-public-active #go39PublicHomeV22 .pm22-nav{
    flex:0 0 auto!important;
  }

  body.pm22-public-active #go39PublicHomeV22 .pm22-main{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }

  body.pm22-public-active #go39PublicHomeV22 .pm22-footer{
    flex:0 0 auto!important;
  }
}

/* Very short mobile browser viewports:
   keep single-screen behavior by tightening only vertical spacing. */
@media(max-width:820px) and (max-height:700px){
  body.pm22-public-active #go39PublicHomeV22 .pm22-nav{
    min-height:48px!important;
  }

  body.pm22-public-active #go39PublicHomeV22 .pm22-left{
    padding-top:8px!important;
    padding-bottom:7px!important;
  }

  body.pm22-public-active #go39PublicHomeV22 .pm22-login{
    margin-top:7px!important;
    padding-top:7px!important;
    padding-bottom:7px!important;
  }

  body.pm22-public-active #go39PublicHomeV22 .pm22-footer{
    display:none!important;
  }
}

/* Editor panel still scrolls normally even while the public page is locked. */
#go39VisualEditor .ed-body{
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}


/* ==========================================================
   V2.3.5 — TOP CTA
   ========================================================== */

#go39PublicHomeV22 .pm22-enter{
  cursor:pointer!important;
}

#go39PublicHomeV22 .pm22-login.pm22-attention{
  animation:pm22LoginAttention 1.25s ease!important;
}

@keyframes pm22LoginAttention{
  0%,100%{
    transform:translateY(0);
  }
  35%{
    transform:translateY(-2px);
    box-shadow:
      0 0 0 3px rgba(15,139,87,.16),
      0 20px 48px rgba(18,55,36,.16)!important;
  }
}

@media(max-width:820px){
  #go39PublicHomeV22 .pm22-enter{
    display:none!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #go39PublicHomeV22 .pm22-login.pm22-attention{
    animation:none!important;
    outline:3px solid rgba(15,139,87,.16)!important;
    outline-offset:2px!important;
  }
}


/* ==========================================================
   V2.3.6 — GOLD RUNNING LOGIN BORDER
   When "เริ่มใช้งาน" is pressed, .pm22-attention is added by V2.3.5.
   This patch turns that state into a premium animated gold border.
   ========================================================== */

@property --pm22-gold-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}

#go39PublicHomeV22 .pm22-login{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
}

#go39PublicHomeV22 .pm22-login.pm22-attention{
  animation:pm22GoldCardLift 1.55s ease-out!important;
}

#go39PublicHomeV22 .pm22-login.pm22-attention::before{
  content:""!important;
  position:absolute!important;
  z-index:5!important;
  inset:-3px!important;
  padding:3px!important;
  border-radius:inherit!important;
  pointer-events:none!important;

  background:
    conic-gradient(
      from var(--pm22-gold-angle),
      rgba(255,255,255,0) 0deg,
      rgba(255,255,255,0) 205deg,
      #8b6514 228deg,
      #d9a92f 244deg,
      #fff0a8 260deg,
      #f6cf59 275deg,
      #b78218 292deg,
      rgba(255,255,255,0) 315deg,
      rgba(255,255,255,0) 360deg
    )!important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0)!important;
  mask-composite:exclude!important;

  filter:
    drop-shadow(0 0 4px rgba(255,215,96,.72))
    drop-shadow(0 0 10px rgba(183,126,18,.24))!important;

  animation:pm22GoldBorderRun .78s linear 2!important;
}

#go39PublicHomeV22 .pm22-login.pm22-attention::after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  inset:-8px!important;
  border-radius:calc(1em + 12px)!important;
  pointer-events:none!important;
  box-shadow:
    0 0 0 1px rgba(224,177,57,.15),
    0 0 24px rgba(224,177,57,.20)!important;
  animation:pm22GoldGlow 1.55s ease-out!important;
}

@keyframes pm22GoldBorderRun{
  from{--pm22-gold-angle:0deg}
  to{--pm22-gold-angle:360deg}
}

@keyframes pm22GoldCardLift{
  0%,100%{transform:translateY(0) scale(1)}
  34%{transform:translateY(-2px) scale(1.004)}
  70%{transform:translateY(0) scale(1)}
}

@keyframes pm22GoldGlow{
  0%,100%{opacity:0}
  18%{opacity:1}
  78%{opacity:.75}
}

/* Fallback for browsers that do not animate CSS custom angle smoothly:
   keep a visible premium gold border during attention state. */
@supports not (background:conic-gradient(from 0deg,#000,#fff)){
  #go39PublicHomeV22 .pm22-login.pm22-attention{
    outline:3px solid #d9a92f!important;
    outline-offset:2px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #go39PublicHomeV22 .pm22-login.pm22-attention{
    animation:none!important;
  }
  #go39PublicHomeV22 .pm22-login.pm22-attention::before{
    animation:none!important;
    background:linear-gradient(90deg,#b78218,#fff0a8,#d9a92f)!important;
  }
  #go39PublicHomeV22 .pm22-login.pm22-attention::after{
    animation:none!important;
    opacity:.7!important;
  }
}