:root{
  --forest:#11423A;    /* deep forest */
  --forest-2:#1C5C51;
  --mint:#CFEBDD;      /* lottery-ticket mint */
  --mint-2:#E8F5EE;
  --gold:#B8892B;
  --gold-2:#E2B755;
  --seal:#C0392B;      /* seal red */
  --ink:#16201D;
  --muted:#4F5F59;
  --line:#CFE0D7;
  --head:"Anuphan",Tahoma,"Leelawadee UI",sans-serif;
  --body:"IBM Plex Sans Thai",Tahoma,"Leelawadee UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--body);font-size:1.08rem;line-height:1.85}
img{max-width:100%;height:auto;display:block}
a{color:var(--forest-2)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--gold-2);outline-offset:3px;border-radius:4px}
.wrap{width:min(1140px,100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--forest);color:#fff;padding:.5rem 1rem;z-index:10}
.skip:focus{left:1rem}

.mast{position:sticky;top:0;z-index:5;background:#fff;border-bottom:3px solid var(--forest)}
.mast-in{display:flex;align-items:center;gap:1.5rem;min-height:62px}
.name{font-family:var(--head);font-weight:700;font-size:1.3rem;color:var(--forest);text-decoration:none;display:flex;align-items:center;gap:.55rem}
.name-seal{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--seal);color:var(--seal);font-size:.9rem;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px var(--seal)}
.mast nav{display:flex;gap:1.3rem;margin-left:auto}
.mast nav a{color:var(--muted);text-decoration:none;font-size:.97rem}
.mast nav a:hover{color:var(--forest)}

.btn{display:inline-block;font-family:var(--head);font-weight:600;background:var(--seal);color:#fff;text-decoration:none;padding:.8rem 1.6rem;border-radius:8px;line-height:1.3;box-shadow:0 3px 0 #8C2419;transition:transform .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #8C2419}
.btn-alt{background:#fff;color:var(--forest);box-shadow:inset 0 0 0 2px var(--forest)}
.btn-sm{padding:.4rem 1rem;font-size:.95rem}
.btn-block{display:block;text-align:center}
.ctr{text-align:center;margin:1.75rem 0}

.lead{background:var(--mint-2);padding:3rem 0 4rem;border-bottom:1px solid var(--line);
  background-image:repeating-linear-gradient(135deg,rgba(17,66,58,.035) 0 2px,transparent 2px 14px)}
.lead-in{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.stamp{display:inline-block;margin:0 0 1rem;font-family:var(--head);font-size:.88rem;color:var(--seal);border:2px solid var(--seal);padding:.15rem .8rem;border-radius:4px;transform:rotate(-2deg)}
.lead h1{font-family:var(--head);font-weight:700;font-size:clamp(1.95rem,3.7vw,2.85rem);line-height:1.38;margin:0 0 1rem;color:var(--forest)}
.deck{margin:0 0 1.6rem;color:var(--muted)}
.go{display:flex;flex-wrap:wrap;gap:.9rem}
.small{font-size:.86rem;color:var(--muted);margin-top:1.2rem}
.lead-art{margin:0;position:relative}
.lead-art img{border-radius:14px;border:8px solid #fff;box-shadow:0 18px 40px rgba(17,66,58,.18)}
.tix{position:absolute;right:-1rem;bottom:-1.75rem;width:230px;background:var(--mint);border-radius:6px;padding:.7rem .9rem;box-shadow:0 12px 26px rgba(17,66,58,.25);
  -webkit-mask:radial-gradient(circle 8px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 8px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 8px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 8px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.tix p{margin:0}
.tix-h{font-size:.78rem;color:var(--forest);border-bottom:1px dashed var(--forest-2);padding-bottom:.25rem}
.tix-n{font-family:var(--head);font-weight:700;font-size:1.7rem;color:var(--seal);text-align:center;letter-spacing:.04em}
.tix-r{display:grid;grid-template-columns:auto 1fr;gap:0 .6rem;font-size:.8rem}
.tix-r b{color:var(--forest);font-family:var(--head)}

.doc{max-width:46rem;margin-inline:auto;padding:3.5rem 0 4rem}
.doc h2{font-family:var(--head);font-weight:700;font-size:clamp(1.45rem,2.5vw,1.9rem);line-height:1.5;margin:3.25rem 0 1rem;color:var(--forest);display:flex;gap:.7rem;align-items:flex-start}
.doc h2::before{content:"";flex:none;width:10px;height:1.4em;border-radius:3px;background:linear-gradient(var(--gold-2),var(--gold));margin-top:.1em}
.doc h3{font-family:var(--head);font-weight:600;font-size:1.15rem;color:var(--forest-2);margin:0 0 .35rem}
.doc p{margin:0 0 1.1rem}
.doc b{color:var(--forest)}

.note-box{background:var(--forest);color:#fff;border-radius:16px;padding:1.5rem;position:relative;overflow:hidden}
.note-box::after{content:"";position:absolute;right:-50px;top:-50px;width:160px;height:160px;border-radius:50%;border:14px solid rgba(226,183,85,.25)}
.nb-top{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;position:relative;z-index:1}
.nb-top p{margin:0!important;font-family:var(--head);font-weight:600;font-size:1.15rem}
.nb-logo{display:inline-flex;padding:.55rem .9rem;border-radius:10px;background:#0B2E28}
.nb-logo img{width:129px;height:30px}
.nb-t{width:100%;border-collapse:collapse;margin-bottom:1.2rem;font-size:1rem;min-width:0}
.nb-t th,.nb-t td{padding:.5rem 0;border-top:1px solid rgba(255,255,255,.15);text-align:left;background:none;color:#fff}
.nb-t th{font-weight:400;color:#A9CFC4;width:40%}
.nb-t td{font-family:var(--head);font-weight:600;color:var(--gold-2)}

.tbl{overflow-x:auto;margin:1.25rem 0 1.5rem;border-radius:12px;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:540px;font-size:.97rem}
caption{text-align:left;padding:.75rem 1rem;font-family:var(--head);font-weight:600;color:var(--forest);background:var(--mint-2)}
th,td{padding:.7rem .9rem;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
th{background:var(--forest);color:#fff;font-weight:500}
td:first-child{font-weight:600;color:var(--forest)}
td.win{color:var(--forest-2);font-weight:600;background:var(--mint-2)}
td.win::before{content:"✓ ";color:var(--seal)}

.lotto{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.25rem 0}
.lotto div{background:var(--mint-2);border-radius:12px;padding:1rem;border-top:4px solid var(--forest)}
.lotto p{margin:0;font-size:.95rem;color:var(--muted)}

.time{list-style:none;padding:0;margin:1.5rem 0;counter-reset:t}
.time li{counter-increment:t;position:relative;padding:0 0 1.1rem 3.4rem}
.time li::before{content:counter(t);position:absolute;left:0;top:0;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--forest);color:var(--gold-2);font-family:var(--head);font-weight:700;display:grid;place-items:center}
.time li::after{content:"";position:absolute;left:1.15rem;top:2.6rem;bottom:.2rem;width:2px;background:var(--line)}
.time li:last-child::after{display:none}
.time b{display:block;font-family:var(--head);color:var(--forest)}
.time span{color:var(--muted)}

.wash{margin:2.25rem 0;border-radius:14px;overflow:hidden;background:var(--mint-2)}
.wash figcaption{padding:.7rem 1rem;font-size:.92rem;color:var(--muted)}

.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:.95rem 2.4rem .95rem 0;font-family:var(--head);font-weight:600;color:var(--forest);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.6rem;font-size:1.5rem;color:var(--seal)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 1rem;color:var(--muted)}

.writer{display:flex;gap:1.25rem;align-items:center;margin-top:3rem;padding:1.4rem;border-radius:16px;background:var(--mint-2);border-left:6px solid var(--forest)}
.writer-img{flex:none;width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--gold-2)}
.writer-name{font-family:var(--head);font-weight:700;color:var(--forest);margin:0 0 .2rem!important;font-size:1.12rem}
.writer p{margin:0;font-size:.97rem}

.end{background:var(--forest);color:#A9CFC4;padding:2.5rem 0 5.5rem;font-size:.93rem}
.end a{color:var(--gold-2)}
.end .age b{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;border:2px solid var(--gold-2);color:var(--gold-2);margin-right:.5rem}
.end .copy{opacity:.7}
.bar{display:none}

@media (max-width:560px){.writer{flex-direction:column;align-items:flex-start}.writer-img{width:80px;height:80px}}
@media (max-width:900px){
  .mast nav{display:none}
  .mast .btn-sm{margin-left:auto}
  .lead{padding:2rem 0 3.25rem}
  .lead-in{grid-template-columns:1fr;gap:2.5rem}
  .tix{right:.5rem;width:200px}
  .lotto{grid-template-columns:1fr 1fr}
  body{font-size:1.03rem}
  .bar{display:block;position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:6;text-align:center;font-family:var(--head);font-weight:600;background:var(--seal);color:#fff;text-decoration:none;padding:.9rem;border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.3);padding-bottom:calc(.9rem + env(safe-area-inset-bottom,0px))}
}
@media (max-width:480px){.lotto{grid-template-columns:1fr}}

/* table of contents */
.toc{margin:2rem 0 0;background:#E8F5EE;border:1px solid #CFE0D7;border-radius:14px}
.toc summary{cursor:pointer;list-style:none;padding:.85rem 1.1rem;font-weight:700;color:#11423A;display:flex;justify-content:space-between;align-items:center}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"▾";transition:transform .2s}
.toc[open] summary::after{transform:rotate(180deg)}
.toc ol{margin:0;padding:0 1.1rem 1rem 2.4rem;columns:2;column-gap:2rem;font-size:.97rem}
.toc li{break-inside:avoid;margin:.2rem 0;color:#4F5F59}
.toc a{color:#16201D;text-decoration:none}
.toc a:hover{color:#11423A;text-decoration:underline}
h2[id]{scroll-margin-top:84px}
@media (max-width:640px){.toc ol{columns:1}}