/* เว็บเดโม่: มือถือเต็มจอ จอกว้างมีแถบด้านข้างกระจก เนื้อหากว้างไม่เกิน --cw */
:root{--st:max(12px,env(safe-area-inset-top));--sb:max(10px,env(safe-area-inset-bottom));--cw:760px}
html,body{height:100%;overflow:hidden;background:var(--bg)}
#stage{position:fixed;inset:0}
.stg-frame{position:absolute;inset:0;overflow:hidden}
.stg-body{position:absolute;inset:0}
.dsb{display:none}
@media (min-width:960px){
  .dsb{display:block;position:fixed;left:10px;top:10px;bottom:10px;width:262px;z-index:7;border-radius:28px;padding:14px 10px;overflow:auto;scrollbar-width:none}
  .dsb::-webkit-scrollbar{display:none}
  .dsb a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:16px;font-size:16px}
  .dsb a:hover{background:var(--fill)}
  .dsb a[aria-current]{background:var(--drop);color:var(--jade);font-weight:600}
  .dsb a span{flex:1;min-width:0}
  .dsb a i{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#d92d20;color:#fff;font-style:normal;font-size:13px;line-height:20px;font-weight:600;text-align:center}
  .dsb .dbr{padding:6px 12px 8px}
  .dsb .dsr{background:var(--fill);color:var(--label-2);margin:4px 2px 2px}
  .dsb h4{margin:14px 12px 4px;font-size:14px;font-weight:600;color:var(--label-2)}
  .dsb p{margin:14px 12px 4px;font-size:14px;line-height:1.4;color:var(--label-2)}
  .stg-frame{left:282px}
  .bot .trow{display:none}
  .stg-screen.is-root .tb [data-back]{visibility:hidden}
  body.bare .dsb{display:none}
  body.bare .stg-frame{left:0}
}
@container (min-width:720px){
  .sc{padding-inline:max(0px,calc((100cqw - var(--cw))/2))}
  .tb{padding-inline:max(16px,calc((100cqw - var(--cw))/2 + 16px))}
  .bot{left:50%;right:auto;width:min(560px,100%);transform:translateX(-50%)}
  .acc{left:50%;right:auto;width:min(528px,calc(100% - 32px));transform:translateX(-50%)}
  .heroimg{aspect-ratio:1.7;width:auto;margin:12px 16px 0;border-radius:30px;overflow:hidden}
  .grid2{grid-template-columns:repeat(3,1fr)}
  .vgrid{grid-template-columns:repeat(3,1fr)}
  .pass-hs>*{width:340px}
  .sec>.pass{aspect-ratio:2.6!important}
  .wl{inset:auto auto 56px 56px!important;width:440px}
}
@media (min-width:960px){
  .acc{bottom:calc(var(--sb) + 12px)}
  .sc.acc-on{padding-bottom:calc(var(--sb) + 96px)}
  .sc{padding-bottom:calc(var(--sb) + 40px)}
}