:root{color-scheme:light;--ink:#103749;--muted:#476471;--a:#087265;--line:#ccdeda;--paper:#fff;--tint:#ecf6f2}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--paper);font:1rem/1.7 system-ui,"Noto Sans Thai",Tahoma,sans-serif;overflow-wrap:break-word}
a{color:var(--a);text-underline-offset:.18em}
a:hover{color:#0c5060}
a:focus-visible,summary:focus-visible{outline:3px solid #ea9f27;outline-offset:3px}
h1,h2,h3,p,ul,dl,figure{margin:0}
h1,h2,h3{line-height:1.38}
h1{font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.035em;max-width:29ch}
h2{font-size:clamp(1.35rem,3vw,1.75rem);letter-spacing:-.02em;margin-bottom:.55em}
h3{font-size:1.06rem}
.wrap{width:min(100% - 2rem,54rem);margin-inline:auto}
.bar{border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px}
.logo{line-height:1;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:.85rem;font-weight:700}
.logo img{display:block;width:61px;height:53px;object-fit:contain}
.lang-v85{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px;line-height:1}
.lang-v85 a,.lang-v85 span{padding:.6rem .7rem;border-radius:999px;font-size:.8rem;font-weight:700;text-decoration:none}
.lang-v85 [aria-current]{background:#0b5870;color:white}
.lead{background:var(--tint);border-bottom:1px solid var(--line);padding:clamp(1.5rem,4vw,3rem) 0}
.trail{display:flex;gap:.6rem;align-items:center;color:var(--muted);font-size:.85rem;margin-bottom:.9rem}
.intro{max-width:77ch;margin:1rem 0 .75rem;font-size:1.07rem}
.byline{color:var(--muted);font-size:.86rem}
article section{padding:clamp(1.3rem,3.5vw,2.3rem) 0;border-bottom:1px solid var(--line);scroll-margin-top:1rem}
p+p,li+li{margin-top:.5rem}
.options,.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.option{background:#f6f9fa;border:1px solid var(--line);border-radius:.75rem;padding:1rem 1.1rem}
.option h3{margin-bottom:.45rem}
.ref{font-size:.87rem;margin-top:.75rem;color:var(--muted)}
.units{display:flex;flex-wrap:wrap;gap:.45rem .9rem;margin-top:1rem}
.units div{width:100%}.units dt,.units dd{display:inline;margin:0}.units dt{font-weight:700;color:#075b67}
.table{border:1px solid var(--line);border-radius:.6rem;overflow:hidden;margin:.85rem 0}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:start;padding:.55rem .75rem;vertical-align:top;line-height:1.45}
thead{background:#174351;color:white}tbody tr+tr{border-top:1px solid var(--line)}tbody th{font-weight:500}td{font-variant-numeric:tabular-nums}
details{margin-top:.6rem}summary{cursor:pointer;color:#06695d;font-weight:600}details[open] summary{margin-bottom:.4rem}
.case{display:grid;grid-template-columns:clamp(80px,12vw,116px) minmax(0,1fr);align-items:start;gap:.75rem}
.case img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block;border-radius:.65rem}
.case figcaption{color:var(--muted);font-size:.93rem;line-height:1.6}.case figcaption strong{display:block;color:var(--ink);font-size:1rem}
.steps{padding-inline-start:1.3rem;margin:.55rem 0 1rem}
.btn{border-radius:.48rem;padding:.6rem .9rem;display:inline-block;text-decoration:none;font-weight:650;background:#096955;color:white}
.btn:hover{color:white;background:#075345}
footer{padding:1.15rem 0 1.7rem;color:var(--muted);font-size:.9rem}footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.65rem}
@media(max-width:580px){.options,.cases{grid-template-columns:minmax(0,1fr)}.case{grid-template-columns:92px minmax(0,1fr);align-items:start;gap:.7rem}.case img{aspect-ratio:1}.intro{font-size:1rem}th,td{padding:.5rem;font-size:.86rem}}

@media(min-width:581px) and (max-width:760px){.cases{grid-template-columns:minmax(0,1fr)}}