/* หน้าตากลางของหน้าเอกสาร (ความเป็นส่วนตัว / เงื่อนไข / ติดต่อ / บันทึกการเปลี่ยนแปลง)
   หน้าพวกนี้เขียนเป็น HTML ธรรมดา ไม่ผ่าน dc runtime ตั้งใจให้เป็นแบบนั้น
   เพราะเป็นข้อความล้วน ไม่ต้องใช้ React และจะได้ไม่พังตอนเน็ตหลุด
   สีกับฟอนต์ลอกมาจากหน้าหลักทุกค่า แก้ตรงนี้ที่เดียวมีผลทั้ง 4 หน้า */

@font-face{font-family:'LINE Seed Sans TH';src:url('./fonts/LINESeedSansTH_Th.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'LINE Seed Sans TH';src:url('./fonts/LINESeedSansTH_Rg.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'LINE Seed Sans TH';src:url('./fonts/LINESeedSansTH_Bd.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:'LINE Seed Sans TH';src:url('./fonts/LINESeedSansTH_He.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'LINE Seed Sans TH';src:url('./fonts/LINESeedSansTH_XBd.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

/* Sora ใช้กับหัวข้อ (ละตินล้วน ไม่มีตัวไทย) — ตัวไทยตกไปใช้ LINE Seed ตามลำดับใน font stack
   เดิมตรงนี้เป็นฟอนต์ Cygre ของร้าน RandomMaerks (Gumroad) ซึ่งไม่มีสัญญาอนุญาตให้แจกต่อ
   การวางไฟล์ .woff2 ไว้บนเว็บสาธารณะคือการแจกต่อ จึงถอดออกทั้งหมด 2026-08-29
   อย่าเอากลับมาถ้ายังไม่ได้ซื้อสิทธิ์แบบใช้บนเว็บ · ฟอนต์ที่เหลือทุกตัวเป็น OFL 1.1 (assets/fonts/OFL.txt) */
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/sora-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/sora-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('./fonts/sora-latin-ext-600.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('./fonts/sora-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('./fonts/sora-latin-ext-700.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('./fonts/sora-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('./fonts/sora-latin-ext-800.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('./fonts/sora-latin-800.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --bg:#050607; --ink:#E8EDF2; --mute:#B8C1CC; --dim:#8E98A4; --faint:#7E8894;
  --mint:#6FE3B8; --mint-hi:#9FF0D2; --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.1);
  --card:rgba(255,255,255,.028);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'LINE Seed Sans TH','Noto Sans Thai',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.75}
a{color:var(--mint);text-decoration:none;transition:color .15s}
a:hover{color:var(--mint-hi)}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

/* ---- แถบเมนู ต้องเหมือนหน้าอื่นเป๊ะ ---------------------------------- */
nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(18px);
  background:rgba(5,6,7,.78);border-bottom:1px solid var(--line)}
.navin{max-width:940px;margin:0 auto;padding:0 40px;height:72px;display:flex;align-items:center;gap:40px}
.brand{display:flex;align-items:center;gap:11px;color:inherit}
.brand:hover{color:inherit}
.brand img{width:40px;height:40px;display:block;object-fit:contain}
.brand span{font:700 17px 'Sora','LINE Seed Sans TH',sans-serif;letter-spacing:-.02em;color:var(--ink)}
.navlinks{display:flex;align-items:center;gap:30px;font:500 13.5px 'LINE Seed Sans TH',sans-serif}
.navlinks a{color:var(--dim)}
.navlinks a:hover{color:var(--ink)}
.spacer{flex:1}
.cta{display:flex;align-items:center;gap:8px;padding:10px 20px;border-radius:11px;
  background:var(--mint);color:#04150F;font:700 13.5px 'LINE Seed Sans TH',sans-serif;
  transition:transform .18s,box-shadow .18s}
.cta:hover{transform:translateY(-1px);box-shadow:0 8px 26px -6px rgba(111,227,184,.6);color:#04150F}
.cta:active{transform:translateY(1px)}

/* ---- ตัวหน้า -------------------------------------------------------- */
main{max-width:940px;margin:0 auto;padding:76px 40px 100px}
.eyebrow{font:700 11.5px 'LINE Seed Sans TH',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mint);margin:0 0 14px}
h1{font:800 clamp(30px,4.4vw,44px)/1.25 'Sora','LINE Seed Sans TH',sans-serif;letter-spacing:-.025em;margin:0 0 16px}
.lede{font:400 16.5px/1.8 'LINE Seed Sans TH',sans-serif;color:var(--mute);max-width:620px;margin:0}
.updated{font:400 13px 'LINE Seed Sans TH',sans-serif;color:var(--faint);margin:26px 0 0}
h2{font:700 clamp(20px,2.6vw,25px)/1.4 'Sora','LINE Seed Sans TH',sans-serif;letter-spacing:-.02em;
  margin:56px 0 14px;padding-top:8px}
h3{font:700 16px/1.55 'LINE Seed Sans TH',sans-serif;color:var(--ink);margin:30px 0 8px}
p,li{font:400 15.5px/1.85 'LINE Seed Sans TH',sans-serif;color:var(--mute)}
p{margin:0 0 15px}
ul{margin:0 0 15px;padding-left:22px}
li{margin:0 0 9px}
li::marker{color:var(--mint)}
strong{color:var(--ink);font-weight:700}
hr{border:0;border-top:1px solid var(--line);margin:56px 0 0}

.card{background:var(--card);border:1px solid var(--line2);border-radius:16px;padding:26px 28px;margin:0 0 18px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card.mint{background:rgba(111,227,184,.055);border-color:rgba(111,227,184,.26)}
.card h3{margin-top:0}

/* กล่องที่ยังต้องเติมข้อมูลจริง — ตั้งใจให้สะดุดตา จะได้ไม่ขึ้นจริงทั้งอย่างนี้ */
.todo{background:rgba(255,196,84,.07);border:1px solid rgba(255,196,84,.34);
  border-radius:14px;padding:18px 22px;margin:0 0 18px}
.todo p{color:#F6D08A;margin:0}
.todo strong{color:#FFC454}

table{width:100%;border-collapse:collapse;margin:0 0 18px;display:block;overflow-x:auto}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);
  font:400 14.5px/1.7 'LINE Seed Sans TH',sans-serif;color:var(--mute);vertical-align:top}
th{font-weight:700;color:var(--ink);white-space:nowrap}
td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}

/* ---- ท้ายหน้า ------------------------------------------------------- */
footer{border-top:1px solid var(--line);padding:34px 40px 46px}
.footin{max-width:940px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
  font:400 12.5px 'LINE Seed Sans TH',sans-serif;color:var(--faint)}
.footin a{color:var(--faint)}
.footin a:hover{color:var(--dim)}
.footin .grow{flex:1;min-width:0}

@media (max-width:900px){
  .navlinks{display:none}
}
@media (max-width:680px){
  .navin{padding:0 18px;gap:16px}
  main{padding:52px 18px 76px}
  footer{padding:28px 18px 40px}
  h2{margin-top:44px}
  .card{padding:20px 20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001s !important}
}

/* ไทยไม่มีเว้นวรรค เบราว์เซอร์จึงตัดบรรทัดเองตามพจนานุกรม
 ปัญหาที่เหลือไม่ใช่ตัดกลางคำ (ตรวจแล้วไม่มี) แต่เป็น "คำโดดค้างบรรทัดสุดท้าย"
 text-wrap:pretty สั่งให้เบราว์เซอร์ยอมขยับคำลงมาเพื่อไม่ให้บรรทัดท้ายสั้นผิดปกติ
 ยิงกว้าง ๆ ได้ เพราะกับ element ที่ไม่ใช่บล็อกมันจะถูกมองข้ามไปเอง
 **inline style ที่เขียน text-wrap:balance ไว้ชนะกฎนี้** หัวข้อจึงยังบาลานซ์เหมือนเดิม */
h1,h2,h3,h4,p,li,td,th,span,div{text-wrap:pretty}