/* Singlty · ไฟล์เสริม (22 ต.ค. 2569)
   1) ท้ายเว็บ 5 คอลัมน์ (เพิ่มคอลัมน์ "ข้อตกลง")
   2) แถบขอความยินยอมคุกกี้
   3) หน้าข้อตกลง: ข้อกำหนด · ความเป็นส่วนตัว · คืนเงิน
   ใช้สีและฟอนต์จาก site.css เท่านั้น ไม่เพิ่มสีใหม่ */

/* 1 · ท้ายเว็บ */
@media (min-width:1001px){.foot{grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr))}}
.foot ul button{display:block;padding:5px 0;color:var(--navy-80);background:none;border:0;cursor:pointer;font:inherit;text-align:left}
.foot ul button:hover{color:var(--navy)}

/* 2 · แถบยินยอมคุกกี้ */
.ck{position:fixed;z-index:80;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));width:min(440px,calc(100vw - 32px));
  background:#fff;border-radius:20px;padding:20px 20px 18px;box-shadow:0 0 0 1px var(--line),0 18px 44px -14px rgba(43,47,62,.32);
  font-size:14.5px;line-height:1.65;color:var(--navy-80);transform:translateY(0);opacity:1;transition:transform .3s,opacity .3s}
.ck[hidden]{display:none}
.ck.ck-hide{transform:translateY(12px);opacity:0}
.ck h2{font:600 16px/1.3 var(--display);color:var(--navy);margin:0 0 6px}
.ck p{margin:0}
.ck p a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.ck .ck-b{display:flex;gap:10px;margin-top:14px}
.ck .ck-b .btn{flex:1 1 0;height:42px;padding:0 14px;font-size:14.5px}
@media (prefers-reduced-motion:reduce){.ck{transition:none}}

/* 3 · หน้าข้อตกลง */
.doc{display:grid;grid-template-columns:232px minmax(0,1fr);gap:64px;align-items:start;max-width:1040px;margin:0 auto}
.toc{position:sticky;top:100px;font-size:14px;line-height:1.5}
.toc h2{font:600 13.5px/1 var(--display);color:var(--navy);margin-bottom:14px}
.toc ol{border-left:1px solid var(--line)}
.toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--navy-60);transition:color .15s,border-color .15s}
.toc a:hover{color:var(--navy);border-left-color:var(--sky)}
.toc a.on{color:var(--navy);border-left-color:var(--navy);font-weight:500}

.prose{min-width:0;color:var(--navy-80);font-size:16px;line-height:1.85}
.prose>section{scroll-margin-top:100px;padding-top:48px}
.prose>section:first-of-type{padding-top:0}
.prose h2{font-size:24px;line-height:1.35;color:var(--navy);margin-bottom:14px}
.prose h3{font-size:17.5px;line-height:1.4;color:var(--navy);margin:26px 0 8px}
.prose p{margin:0 0 14px;max-width:70ch}
.prose b,.prose strong{color:var(--navy);font-weight:600}
.prose a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--sky);text-decoration-thickness:2px;text-underline-offset:4px}
.prose ul,.prose ol.list{margin:0 0 16px;max-width:70ch;display:grid;gap:6px}
.prose ul li{position:relative;padding-left:20px}
.prose ul li::before{content:"";position:absolute;left:4px;top:.78em;width:6px;height:6px;border-radius:50%;background:var(--sky)}
.prose ol.list{counter-reset:n}
.prose ol.list li{position:relative;padding-left:34px;counter-increment:n}
.prose ol.list li::before{content:counter(n);position:absolute;left:0;top:.18em;width:24px;height:24px;border-radius:50%;background:var(--sky-100);color:var(--navy);font:600 13px/24px var(--body);text-align:center}

/* สรุปสั้นบนสุด: กล่องฟ้าอ่อน */
.prose>.sum{background:var(--sky-100);border-radius:20px;padding:22px 26px;margin-bottom:18px}
.sum h2{font-size:18px;margin-bottom:10px}
.sum ul{margin:0}
.sum li::before{background:var(--navy)!important}

/* ตาราง: จอกว้างเป็นตาราง จอแคบเรียงเป็นก้อน */
.dtable{width:100%;min-width:0;border-collapse:collapse;margin:6px 0 18px;font-size:15px;line-height:1.6}
.dtable th,.dtable td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line);width:auto;color:inherit}
.dtable thead th{position:static}
.dtable tbody tr:last-child>*{border-bottom:1px solid var(--line)}
.dtable thead th{font:600 13.5px/1.4 var(--display);color:var(--navy);background:var(--sky-100);border-bottom:0}
.dtable thead th:first-child{border-radius:12px 0 0 12px}
.dtable thead th:last-child{border-radius:0 12px 12px 0}
.dtable td:first-child{color:var(--navy);font-weight:500}
@media (max-width:680px){
  .dtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .dtable,.dtable tbody,.dtable tr,.dtable td{display:block;width:100%}
  .dtable tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .dtable td{border:0;padding:2px 0}
  .dtable td[data-l]::before{content:attr(data-l);display:block;font:600 12.5px/1.6 var(--display);color:var(--navy-60);margin-top:6px}
  .dtable td:first-child[data-l]::before{display:none}
}

/* ข้อมูลที่ทีมต้องเติม: ป้ายลาเวนเดอร์ให้เห็นชัด */
.tbd{background:var(--lav-50);color:var(--lav-ink);border-radius:6px;padding:1px 6px;font-weight:500;white-space:normal}
.upd{font-size:14px!important;color:var(--navy-60)!important}
.prose .btn{text-decoration:none;margin:4px 0 14px}

@media (max-width:1000px){
  .doc{grid-template-columns:minmax(0,1fr);gap:28px}
  .toc{position:static;background:#fff;box-shadow:inset 0 0 0 1px var(--line);border-radius:20px;padding:20px 22px}
  .toc ol{border-left:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:0}
  .toc a{padding:5px 0;border-left:0;margin-left:0}
  .toc a.on{font-weight:400;color:var(--navy-60)}
}
@media (max-width:680px){
  .prose{font-size:15.5px}
  .prose h2{font-size:21px}
  .prose>section{padding-top:40px}
  .prose>.sum{padding:20px}
}