:root{--plum:#0e5b61;--plum2:#0f6e75;--coral:#1f8a85;--blush:#e8f4f3;--ink:#1c2526;--mut:#56656a;--line:#dde8e8;--bg:#ffffff;--warn:#b5541c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Thai","Helvetica Neue",Arial,sans-serif}
a{color:var(--plum2)}
.w{max-width:1180px;margin:0 auto;padding:0 22px}
.strip{background:var(--plum);color:#f6e7f1;font-size:13px;text-align:center;padding:7px 12px}
.strip a{color:#fff}
.hd{border-bottom:1px solid var(--line)}
.hd-top{display:flex;justify-content:center;align-items:center;padding-top:18px;padding-bottom:10px;position:relative}.hd-nav{display:flex;justify-content:center;padding-bottom:8px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:21px;letter-spacing:-.3px}
.logo i{font-style:normal;color:var(--coral)}
.logo svg{flex:none}
.hd nav[aria-label="Main"]{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.hd nav a{text-decoration:none;color:var(--ink);font-size:15px;padding:7px 12px;border-radius:999px}
.hd nav a:hover,.hd nav a.on{background:var(--blush);color:var(--plum)}
.hd nav a.th{border:1px solid var(--line)}
.layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;padding-top:34px;padding-bottom:50px}
.side{font-size:14.5px;position:sticky;top:20px;align-self:start}
.side h2{font-size:12px;text-transform:uppercase;letter-spacing:1.4px;color:var(--mut);margin:0 0 8px}
.side ul{list-style:none;padding:0;margin:0 0 22px;border-left:2px solid var(--line)}
.side li a{display:block;padding:6px 12px;text-decoration:none;color:var(--ink);margin-left:-2px;border-left:2px solid transparent}
.side li a.on{border-left-color:var(--coral);color:var(--plum);font-weight:600}
.side li a:hover{color:var(--plum)}
.side .sec{font-weight:600;color:var(--plum)}
article{max-width:740px}
.eyebrow{display:inline-block;background:var(--blush);color:var(--plum);font-size:12.5px;font-weight:600;letter-spacing:.4px;padding:4px 10px;border-radius:999px}
article h1{font-size:38px;line-height:1.18;margin:12px 0 12px;letter-spacing:-.6px;color:var(--plum)}
.lede{font-size:19.5px;color:#3c4a4d}
.note{border:1px solid #bcdcd9;background:var(--blush);border-radius:12px;padding:12px 16px;font-size:14.5px;line-height:1.55;margin:18px 0 24px}
.note b{color:var(--plum)}
article h2{font-size:25px;margin:38px 0 8px;color:var(--plum);letter-spacing:-.2px}
article h3{font-size:19px;margin:26px 0 4px}
table{border-collapse:collapse;width:100%;font-size:15px;margin:16px 0;display:block;overflow-x:auto}
th,td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#f2f8f8;color:var(--plum)}
blockquote{margin:22px 0;padding:14px 18px;border-radius:12px;background:#f2f8f8;border:1px solid var(--line)}
.ask{background:#f2f8f8;border-left:4px solid var(--coral);padding:14px 18px;border-radius:0 12px 12px 0;margin:22px 0}
.by{font-size:14px;color:var(--mut);border-top:1px solid var(--line);margin-top:34px;padding-top:12px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:18px 0}
.card{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:18px 20px;transition:border-color .15s}
.card:hover{border-color:var(--coral)}
.card b{display:block;color:var(--plum);font-size:18px;margin-bottom:4px}
.card span{color:var(--mut);font-size:14.5px;line-height:1.5;display:block}
.hero{background:linear-gradient(120deg,#fdf1ee 0%,#f7e8f2 100%);border-radius:0 0 40px 40px}
.hero .w{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;padding-top:56px;padding-bottom:56px;align-items:center}
.hero h1{font-size:46px;line-height:1.1;margin:0 0 16px;color:var(--plum);letter-spacing:-1px}
.hero p{font-size:19px;color:#3c4a4d;margin:0 0 12px}
.hero .box{background:#fff;border-radius:22px;padding:22px 24px;box-shadow:0 10px 30px rgba(14,91,97,.08)}
.hero .box h2{font-size:15px;margin:0 0 6px;color:var(--coral);text-transform:uppercase;letter-spacing:1px}
.hero .box ol{margin:0;padding-left:20px}
.hero .box li{margin:8px 0}
.home-sec{padding:40px 0 10px}
.home-sec>h2{font-size:28px;color:var(--plum);margin:0 0 4px}
.home-sec>p{color:var(--mut);margin:0 0 6px}
.home-sec .cards{grid-template-columns:repeat(4,1fr)}
form.mail label{display:block;font-weight:600;font-size:14.5px;margin-top:12px}
form.mail input,form.mail textarea{width:100%;padding:11px;border:1px solid #c9d9d9;border-radius:10px;font:inherit;margin-top:4px}
form.mail button{margin-top:14px;background:var(--plum);color:#fff;border:0;border-radius:999px;padding:11px 24px;font:600 15px inherit;cursor:pointer}
footer{background:#0d3438;color:#d9eceb;font-size:14.5px}
footer .w{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;padding-top:36px;padding-bottom:28px}
footer a{color:#fff}
footer ul{list-style:none;padding:0;margin:8px 0 0}
footer li{margin:5px 0}
footer .legal{grid-column:1/-1;border-top:1px solid #245257;padding-top:14px;display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px}
@media (max-width:900px){.layout{grid-template-columns:1fr;gap:10px}.side{position:static;order:2;border-top:1px solid var(--line);padding-top:20px}.hero .w{grid-template-columns:1fr}.hero h1{font-size:34px}article h1{font-size:30px}.home-sec .cards,.cards{grid-template-columns:1fr}footer .w{grid-template-columns:1fr}.hd nav{margin-left:0;overflow-x:auto;flex-wrap:nowrap;width:100%;padding-bottom:8px}.hd nav a{white-space:nowrap}}
@media (min-width:901px) and (max-width:1100px){.home-sec .cards{grid-template-columns:repeat(2,1fr)}}

.form-error{color:#b42318;font-size:14px;margin:10px 0 0;min-height:1em}
[aria-invalid="true"]{border-color:#b42318!important;outline-color:#b42318}

/* photos */
picture{display:block}
.pic{margin:1.1rem 0 1.7rem;max-width:100%}
.pic img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:24px;background:#ddd}
.pic.wide img{aspect-ratio:21/9}
.hx-img img,.hx-band img{display:block;width:100%;height:auto;object-fit:cover;border-radius:24px;background:#ccc}
.hx-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px;align-items:center}
.hx-split .hx-img img{aspect-ratio:4/3}
.hx-band img{aspect-ratio:1136/380}
.hx-band{margin-top:28px}
@media (max-width:860px){.hx-split{grid-template-columns:1fr;gap:26px}.hx-split .hx-img img{aspect-ratio:16/10;box-shadow:none}.hx-band img{aspect-ratio:16/9}.pic.wide img{aspect-ratio:16/9}}

/* encyclopedia redesign 2026-10 */
.logo{font-size:25px}
.az{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#f7fbfb}
.az .w{display:flex;justify-content:center;gap:2px;flex-wrap:wrap;padding-top:4px;padding-bottom:4px}
.az a,.az span,.azg a,.azg span{display:inline-block;min-width:30px;text-align:center;padding:5px 0;font-weight:700;font-size:15px;text-decoration:none;border-radius:6px}
.az a,.azg a{color:var(--plum)}.az a:hover,.az a:focus-visible,.azg a:hover{background:var(--blush)}
.az span,.azg span{color:#a9b8ba;font-weight:400}
.azm{display:none}
a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #f0a33a;outline-offset:2px}
.mast{border-bottom:1px solid var(--line)}
.mast .w{max-width:820px;text-align:center;padding-top:46px;padding-bottom:34px}
.kick{text-transform:uppercase;letter-spacing:2px;font-size:13px;font-weight:700;color:var(--coral);margin:0 0 8px}
.mast h1{font-size:44px;line-height:1.12;margin:0 0 14px;color:var(--plum);letter-spacing:-.8px}
.dek{font-size:20px;color:#3c4a4d;margin:0 auto 20px;max-width:700px}
.find{max-width:560px;margin:0 auto 14px;text-align:left}
.find label{font-weight:700;font-size:15px;display:block;margin-bottom:4px}
.find input{width:100%;font:inherit;padding:12px 16px;border:2px solid var(--plum);border-radius:8px}
.qn{font-size:14.5px;color:var(--mut);margin:6px 0 0;min-height:1.2em}
.start{font-size:16px;margin:0}.start a{margin:0 8px;white-space:nowrap}
.azx{padding:34px 0 10px}.azx h2,.sections h2,.rev h2{font-size:26px;color:var(--plum);margin:0 0 14px}
.azcols{columns:4 220px;column-gap:34px}
.azb{break-inside:avoid;margin:0 0 18px;scroll-margin-top:20px}
.azb h3{font-size:24px;margin:0 0 4px;color:var(--coral);border-bottom:2px solid var(--line)}
.azb ul{list-style:none;padding:0;margin:0}.azb li{margin:3px 0}.azb a{text-decoration:none}.azb a:hover{text-decoration:underline}
.two{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding:26px 0}
.kp{border:2px solid var(--coral);border-radius:10px;padding:16px 22px;margin:20px 0 26px;background:#fbfefe}
.kp-h{font-weight:800;color:var(--plum);text-transform:uppercase;letter-spacing:1px;font-size:14px;margin:0 0 6px}
.kp ul,.kp ol{margin:0;padding-left:20px}.kp li{margin:6px 0}
.two .kp{margin:0}
.doc{border-left:6px solid var(--warn);background:#fdf5ef;padding:14px 20px;margin:30px 0 0;border-radius:0 10px 10px 0}
.doc-h{font-weight:800;color:var(--warn);margin:0 0 4px}.doc p:last-child{margin:0}
.secl{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 34px}
.secl li{padding:12px 0;border-bottom:1px solid var(--line)}.secl a{font-weight:700;font-size:19px}.secl span{display:block;color:var(--mut);font-size:16px}
.sections{padding:10px 0 20px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:16px 0}
.row3 img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.scope{color:var(--mut);font-size:15px;margin:22px 0 40px}
.upd{grid-column:1/-1;margin:0;font-weight:700;color:#fff}
@media (max-width:900px){.az{display:none}.azm{display:block;position:absolute;right:16px;top:20px}
.azm summary{cursor:pointer;font-weight:700;font-size:15px;border:1px solid var(--line);border-radius:6px;padding:6px 10px;list-style:none;color:var(--plum)}
.azm[open] .azg{position:absolute;right:0;top:40px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;display:grid;grid-template-columns:repeat(6,40px);gap:2px;z-index:5;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.azg a,.azg span{padding:8px 0}
.hd-top{justify-content:flex-start}.mast h1{font-size:32px}.dek{font-size:18px}.two,.secl{grid-template-columns:1fr}.row3{gap:8px}.mast .w{text-align:left}.start a{display:inline-block;margin:4px 12px 0 0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}