/*
 * ScoreVerve data-sheet interface. Task register and progress patterns are
 * adapted from OpenSourceUI components under the MIT license.
 * https://github.com/bidyut10/opensourceui
 */
:root {
  --paper:#f4f6f3;
  --panel:#fff;
  --ink:#15272a;
  --muted:#536467;
  --line:#d5ddd9;
  --line-strong:#aebbb5;
  --soft:#edf2ef;
  --blue:#146557;
  --blue-deep:#0d473f;
  --lime:#ddeb77;
  --max:1160px;
  font-family:"Aptos","Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);line-height:1.68;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(20,101,87,.035) 1px,transparent 1px);background-size:100% 30px}
a{color:var(--blue);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid #6d998f;outline-offset:3px}
.skip{position:fixed;top:8px;left:12px;z-index:30;transform:translateY(-160%);padding:9px 13px;background:#fff;border:1px solid var(--blue);color:var(--ink);text-decoration:none}.skip:focus{transform:translateY(0)}
.header{position:sticky;top:0;z-index:20;background:rgba(248,249,246,.92);backdrop-filter:blur(18px) saturate(130%);border-bottom:1px solid var(--line-strong)}
.nav{max-width:var(--max);min-height:70px;margin:auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);font-weight:800;letter-spacing:-.02em;text-decoration:none}
.mark{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--blue);border-radius:6px;background:#e6f0eb;color:var(--blue-deep);font:800 12px/1 ui-monospace,monospace;box-shadow:inset 0 0 0 4px #fff}
.brand-logo{width:44px;height:44px;object-fit:contain;flex:0 0 auto}
.menu{display:flex;gap:24px;align-items:center}.menu a{position:relative;color:var(--muted);font-size:.9rem;text-decoration:none}.menu a:hover{color:var(--blue-deep)}.menu a:hover::after{content:"";position:absolute;right:0;bottom:-10px;left:0;height:2px;background:var(--blue)}
.menu-toggle{display:none;border:1px solid var(--line-strong);border-radius:5px;background:#fff;color:var(--ink);padding:.55rem .75rem;font:inherit}
.shell{max-width:var(--max);margin:auto;padding:0 22px}
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr);gap:clamp(42px,7vw,88px);align-items:center;padding:90px 0 64px}
.hero-copy{position:relative}.hero-copy::before{content:"SCORE / RESULT / SOURCE";display:block;margin-bottom:22px;color:#779188;font:700 .68rem/1 ui-monospace,monospace;letter-spacing:.14em}
.hero-evidence{display:grid;gap:16px}
.hero-illustration,.editorial-figure{margin:0;border:1px solid var(--line-strong);border-radius:5px;overflow:hidden;background:#fff}
.hero-illustration img,.editorial-figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.hero-illustration figcaption,.editorial-figure figcaption{padding:10px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem}
.editorial-figure{margin-bottom:34px}
.eyebrow{margin:0 0 13px;color:var(--blue);font:700 .75rem/1.4 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}
h1,h2,h3{color:#173234;font-family:Georgia,"Noto Serif Thai",Tahoma,serif;line-height:1.22;letter-spacing:-.03em}
h1{max-width:11ch;margin:0 0 22px;font-size:clamp(2.8rem,6vw,5.7rem);font-weight:600}
h2{margin:0 0 12px;font-size:clamp(1.9rem,3.3vw,3.1rem);font-weight:600}
h3{font-size:1.24rem;font-weight:600}
.lead{max-width:65ch;margin:0;color:var(--muted);font-size:1.07rem}
.flow{border:1px solid var(--line-strong);border-top:4px solid var(--blue);border-radius:5px;background:rgba(255,255,255,.82);box-shadow:0 20px 55px rgba(33,62,54,.07)}
.flow-head{display:flex;justify-content:space-between;gap:18px;padding:16px 20px;border-bottom:1px solid var(--line);color:var(--muted);font-size:.76rem}.flow-head b{color:var(--ink);font-size:.86rem}.flow-head span{font-variant-numeric:tabular-nums}
.step{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:13px;align-items:center;padding:17px 20px;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}.step::after{content:"ตรวจ";color:#49786d;font:700 .64rem/1 ui-monospace,monospace;letter-spacing:.08em}.step:last-child::after{content:"พร้อม";padding:5px 7px;background:#e4f0ea;border-radius:4px}
.step i{width:32px;height:32px;display:grid;place-items:center;border:1px solid #8da9a1;border-radius:5px;background:#f7faf8;color:var(--blue-deep);font:700 11px/1 ui-monospace,monospace;font-style:normal}
.step b{display:block;color:#244044}.step span{display:block;margin-top:3px;color:var(--muted);font-size:.86rem}
.section{padding:72px 0;border-top:1px solid var(--line-strong)}
.section-head{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);gap:70px;align-items:end;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--line-strong)}
.section-head .lead{font-size:.98rem}.section-head h2::after{content:"";display:block;width:52px;height:4px;margin-top:15px;background:var(--lime)}
.grid{display:block;border-top:1px solid #879a92}
.card{display:grid;grid-template-columns:74px minmax(260px,.9fr) minmax(280px,1.1fr) 32px;gap:24px;align-items:start;min-height:0;padding:25px 8px;border:0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;transition:padding .18s ease,background .18s ease}
.card:hover{padding-inline:18px;background:rgba(255,255,255,.74)}
.card-index{grid-column:1;color:#536b65;font:700 .72rem/1.4 ui-monospace,monospace;letter-spacing:.08em}
.card h3{grid-column:2;margin:0}.card p{grid-column:3;margin:0;color:var(--muted);font-size:.93rem}.card-arrow{grid-column:4;grid-row:1;color:var(--blue);text-align:right}.card small{display:block;margin-bottom:5px;color:var(--blue);font:700 .68rem/1.4 ui-monospace,monospace;letter-spacing:.04em}
.page-head{padding:72px 0 34px;border-bottom:1px solid var(--line-strong)}.page-head h1{max-width:18ch;font-size:clamp(2.35rem,5vw,4.8rem)}
.crumbs,.meta{color:var(--muted);font-size:.84rem}.crumbs a{color:inherit}
.article{max-width:780px;padding:48px 0 78px;color:#304547;font-size:1.02rem}.article h2{margin-top:50px;padding-top:12px;border-top:1px solid var(--line);font-size:1.72rem}.article p,.article ul,.article ol{max-width:72ch}.article li{margin-bottom:.5rem}
.article table{display:table;width:100%;margin:25px 0;border-collapse:collapse;font-size:.93rem}.article th,.article td{padding:13px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.article th{background:#e7ede9;color:#294b49}
.note{margin:26px 0;padding:19px 21px;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:4px;background:rgba(255,255,255,.78)}
.sources{margin-top:48px;padding-top:24px;border-top:1px solid var(--line-strong)}
.footer{padding:30px 22px;border-top:1px solid var(--line-strong);background:#e8ede9;color:var(--muted);font-size:.85rem}.footer>div{max-width:var(--max);margin:auto}
@media(max-width:820px){.nav{min-height:64px}.menu-toggle{display:block}.menu{display:none;position:absolute;top:64px;right:0;left:0;padding:18px 22px 22px;border-bottom:1px solid var(--line-strong);background:#fff;flex-direction:column;align-items:flex-start}.menu.open{display:flex}.hero{grid-template-columns:1fr;padding-top:62px}.section-head{grid-template-columns:1fr;gap:10px}.card{grid-template-columns:62px minmax(0,1fr) 28px;gap:14px}.card h3{grid-column:2}.card p{grid-column:2 / -1;grid-row:2}.card-arrow{grid-column:3;grid-row:1}}
@media(max-width:560px){.shell,.nav{padding-right:17px;padding-left:17px}h1{font-size:2.8rem}.hero{padding:52px 0 44px;gap:34px}.flow-head{display:block}.flow-head span{display:block;margin-top:5px}.section{padding:54px 0}.card{grid-template-columns:1fr 28px;padding:21px 4px}.card-index{grid-column:1}.card h3{grid-column:1 / -1;grid-row:2;margin-top:4px}.card p{grid-column:1 / -1;grid-row:3}.card-arrow{grid-column:2;grid-row:1}.article table{display:block;overflow-x:auto}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{.header,.menu-toggle{display:none}.article{max-width:none}.card{break-inside:avoid}body{background:#fff}}