/* ==================================================================
   app.css — ธีมร่วมของหน้ารอง: terms / refund / privacy / contact
   ------------------------------------------------------------------
   ค่าสี เงา รัศมี และฟอนต์ทั้งหมดคัดมาจาก <style> ใน index.html ตรง ๆ
   เพราะหน้าเอกสารต้องดูเป็นเว็บเดียวกับหน้าร้าน แต่แยกเป็นไฟล์ต่างหาก
   ด้วยเหตุผล 2 ข้อ: index.html มีเจ้าของแล้วห้ามแตะ และ 4 หน้านี้จะได้
   โหลดสไตล์ชุดเดียวกันจากแคชแทนที่จะฝัง CSS ซ้ำกันสี่รอบ

   หน้าเหล่านี้ต้องเปิดดูได้โดย "ไม่ต้องล็อกอิน" (Stripe เข้าตรวจก่อน
   อนุมัติบัญชี) จึงตั้งใจไม่ใส่ JavaScript เลยแม้แต่บรรทัดเดียว
   ================================================================== */
:root{
  /* surfaces */
  --panel-hi:#f6e6cd;  --panel-a:#eed3b0;  --panel-b:#e8d3b3;  --panel-c:#e4ccb0;
  --tile:#ead2ba;      --card:#ebd8c0;     --edge:#fffcf6;
  --pill-a:#efdcc4;    --pill-b:#dfcbb4;
  --on-a:#d1ecfd;      --on-b:#b3d6ed;     --on-ink:#2c6fa6;
  --mint-a:#a3e2cd;    --mint-b:#98d2bf;   --mint-edge:#cfefe2;
  /* ink */
  --ink:#3e2c1e;  --ink-2:#6b4a2f;  --ink-soft:#8a6b4f;  --gold:#a4702f;

  --shadow-lift:0 10px 0 rgba(90,62,42,.16), 0 20px 34px rgba(56,36,22,.28);
  --shadow-sm:0 5px 0 rgba(90,62,42,.18), 0 10px 18px rgba(56,36,22,.18);
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; overflow-x:hidden;
  font-family:'Mitr',system-ui,sans-serif; font-weight:300; color:var(--ink);
  background:#6d4a34;
}
/* พื้นหลังกระเบื้องเดียวกับหน้าร้าน — fixed ไว้เพื่อให้เอกสารยาว ๆ เลื่อนแล้วลายไม่วิ่งตาม */
.bg{position:fixed; inset:0; z-index:-2;
  background:url(img/bg-tile.png) repeat; background-size:420px 2420px}
.bg::after{content:''; position:absolute; inset:0;
  background:radial-gradient(78% 62% at 50% 34%, transparent 45%, rgba(58,36,22,.42) 100%)}
img{max-width:100%}
h1,h2,h3,h4,p{margin:0}

/* ======================= โครงหน้าเอกสาร ======================= */
.docwrap{max-width:900px; margin:0 auto; padding:18px 14px 60px}

.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:16px}
.backlink{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg,var(--pill-a),var(--pill-b));
  border:4px solid var(--edge); border-radius:14px; box-shadow:var(--shadow-sm);
  padding:9px 18px; font-size:18px; font-weight:400; color:var(--ink);
  text-decoration:none; transition:transform .12s ease;
}
.backlink:hover{transform:translateY(-3px)}
.brand{font-size:18px; font-weight:400; color:#f4e6d4; opacity:.9}

.plain-title{text-align:center; font-size:clamp(26px,5vw,34px); font-weight:500; color:#fffdf7;
  text-shadow:0 3px 0 rgba(146,106,70,.75), 0 6px 14px rgba(60,40,25,.3); margin-bottom:8px}
.dates{text-align:center; font-size:15px; color:#f0dfc8; opacity:.92; margin-bottom:18px;
  line-height:1.8}
.dates b{font-weight:500; color:#ffe6c6}

/* ลิงก์ไขว้ระหว่างเอกสาร 4 ฉบับ — Stripe อยากเห็นว่านโยบายทุกฉบับเดินถึงกันได้ */
.crosslinks{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:18px}
.crosslinks a{
  background:linear-gradient(180deg,var(--pill-a),var(--pill-b));
  border:4px solid var(--edge); border-radius:13px; box-shadow:var(--shadow-sm);
  padding:8px 16px; font-size:16px; font-weight:400; color:var(--ink);
  text-decoration:none; transition:transform .12s ease, background .15s ease;
}
.crosslinks a:hover{transform:translateY(-3px)}
.crosslinks a[aria-current="page"]{
  background:linear-gradient(180deg,var(--on-a),var(--on-b)); color:var(--on-ink)}

.panel{
  background:
    radial-gradient(120% 78% at 50% 0%, var(--panel-hi) 0%, rgba(246,230,205,0) 60%),
    linear-gradient(180deg, var(--panel-a) 0%, var(--panel-b) 52%, var(--panel-c) 100%);
  border:7px solid var(--edge); border-radius:34px; box-shadow:var(--shadow-lift);
  padding:22px 26px 30px; margin-bottom:18px;
}
@media(max-width:620px){
  .panel{padding:16px 14px 22px; border-width:5px; border-radius:24px}
  .docwrap{padding:12px 10px 44px}
}

/* ======================= เนื้อความ ======================= */
/* ภาษาไทยไม่มีช่องว่างระหว่างคำ ระยะบรรทัดจึงต้องกว้างกว่าอังกฤษ ไม่งั้นอ่านแล้วตาลาย */
.doc{font-size:17px; line-height:1.95; color:var(--ink)}
.doc h2{
  font-size:23px; font-weight:500; color:var(--ink-2); margin:30px 0 10px;
  padding-bottom:6px; border-bottom:3px solid rgba(255,252,246,.85);
}
.doc section:first-child h2{margin-top:4px}
.doc h3{font-size:19px; font-weight:500; color:var(--ink-2); margin:18px 0 6px}
.doc p{margin:0 0 10px}
.doc ul,.doc ol{margin:0 0 12px; padding-left:26px}
.doc li{margin-bottom:6px}
.doc li::marker{color:var(--gold)}
.doc a{color:var(--on-ink); text-decoration:underline; text-underline-offset:3px}
.doc a:hover{color:#1d5c8f}
.doc b,.doc strong{font-weight:500; color:var(--ink-2)}
.doc small{font-size:15px; color:var(--ink-soft)}
.lead{font-size:18px; color:var(--ink-2); margin-bottom:14px}
.muted{color:var(--ink-soft)}
.center{text-align:center}
/* ชื่อคุกกี้ / คำนำหน้าเลขคำสั่งซื้อ — ต้องแยกจากข้อความไทยรอบ ๆ ให้ผู้ใช้ก๊อปไปแจ้งทีมงานได้ถูกตัว */
.doc code{font-family:ui-monospace,'Consolas',monospace; font-size:15px;
  background:#fff; border:1px solid #ddcdb6; border-radius:6px; padding:1px 6px; color:var(--ink-2)}
/* หัวข้อที่ถูกลิงก์ข้ามหน้ามาหา — เน้นให้เห็นว่าโดดมาที่ตรงไหน */
.doc section:target > h2{background:#fff6df; border-radius:10px; padding-left:10px}
.doc section{scroll-margin-top:14px}

/* ======================= ชิ้นส่วนเฉพาะหน้าเอกสาร ======================= */

/* ช่องที่เจ้าของเว็บต้องกรอกเอง — ตั้งใจทำให้สะดุดตาจนลืมกรอกไม่ได้
   ข้อมูลนิติบุคคลปลอมบนหน้าเว็บทำให้ Stripe ปิดบัญชีถาวร จึงยอมให้หน้าดูรก
   ดีกว่าปล่อยเลขมั่ว ๆ ไว้ */
/* ตั้งใจให้เป็น inline (ไม่ใช่ inline-block) เพราะ placeholder บางตัวยาวกว่าจอมือถือ
   ถ้าห้ามตัดบรรทัดจะดันหน้าให้เลื่อนแนวนอน — box-decoration-break ทำให้เศษที่ตัดไป
   บรรทัดใหม่ยังมีกรอบประกับหัวท้ายครบ */
.fill{
  display:inline; background:#fff3cf; border:2px dashed #d8a441; border-radius:9px;
  padding:0 9px; color:#8a5a12; font-weight:400; overflow-wrap:break-word;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* สารบัญ — เอกสารพวกนี้ยาว คนมักเข้ามาหาหัวข้อเดียว */
.toc{background:var(--card); border:5px solid var(--edge); border-radius:24px;
  box-shadow:0 6px 0 rgba(90,62,42,.14); padding:16px 20px 18px; margin-bottom:22px}
.toc h2{font-size:19px; font-weight:500; color:var(--ink-2); margin:0 0 8px;
  border:0; padding:0}
.toc ol{margin:0; padding-left:22px; font-size:16px; line-height:1.9; columns:2; gap:24px}
.toc li{margin:0; break-inside:avoid}
@media(max-width:620px){ .toc ol{columns:1} }

/* กล่องเน้นข้อความที่ผู้ใช้พลาดไม่ได้ (แลกเป็นเงินไม่ได้ / สุ่มแล้วยกเลิกไม่ได้) */
.callout{background:#fff; border-left:9px solid var(--mint-b); border-radius:18px;
  padding:14px 18px; margin:14px 0; box-shadow:0 6px 14px rgba(90,60,35,.18)}
.callout.warn{border-left-color:#ef9d16; background:#fff8ec}
.callout.stop{border-left-color:#e0463c; background:#fff1ef}
.callout h3{margin-top:0}
.callout :last-child{margin-bottom:0}

/* กล่องขาวสำหรับ "ข้อมูลติดต่อ" — คัดจาก .whitecard ในหน้าร้าน */
.whitecard{background:#fff; border-radius:26px; padding:20px 24px;
  box-shadow:0 8px 18px rgba(90,60,35,.22); margin-bottom:16px}
.whitecard h3{margin-top:0}

/* คู่ ป้ายกำกับ→ค่า ใช้ในหน้า contact และหัวเอกสารทุกฉบับ */
.kv{display:grid; grid-template-columns:190px minmax(0,1fr); gap:6px 14px; font-size:17px}
.kv dt{font-weight:500; color:var(--ink-2)}
.kv dd{margin:0}
@media(max-width:560px){
  .kv{grid-template-columns:1fr; gap:0}
  .kv dt{margin-top:10px}
}

/* ตาราง PDPA (ข้อมูลที่เก็บ / ฐานกฎหมาย / ระยะเวลาเก็บ) —
   ห่อด้วยกล่องที่เลื่อนแนวนอนได้เอง จอมือถือจะได้ไม่ดันทั้งหน้าให้เลื่อนตาม */
.tablebox{overflow-x:auto; border-radius:20px; border:5px solid var(--edge);
  box-shadow:0 6px 0 rgba(90,62,42,.14); margin:14px 0 18px; background:#fff}
.tablebox table{border-collapse:collapse; width:100%; min-width:640px; font-size:15.5px}
.tablebox th,.tablebox td{padding:10px 14px; text-align:left; vertical-align:top;
  border-bottom:2px solid #e3d6c4; line-height:1.75}
.tablebox thead th{background:var(--tile); color:#fffdf7; font-weight:500;
  text-shadow:0 2px 0 rgba(150,110,74,.8); border-bottom:0; white-space:nowrap}
.tablebox tbody tr:nth-child(even) td{background:#f7f2ec}
.tablebox tbody tr:last-child td{border-bottom:0}

/* ปุ่มมิ้นต์ชุดเดียวกับหน้าร้าน ใช้เป็น CTA "ติดต่อเรา" ท้ายเอกสาร */
.mint{
  background:linear-gradient(180deg,var(--mint-a),var(--mint-b));
  border:5px solid var(--mint-edge); border-radius:15px;
  box-shadow:0 5px 0 rgba(60,120,100,.3), 0 12px 20px rgba(40,70,60,.26);
  color:#fff; font-weight:500; font-size:20px; line-height:1;
  text-shadow:0 2px 3px rgba(38,92,76,.55);
  padding:12px 26px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .12s ease;
}
.mint:hover{transform:translateY(-2px)} .mint:active{transform:translateY(3px)}

.foot{text-align:center; margin-top:22px; color:#f4e6d4; font-size:14px; font-weight:300;
  opacity:.9; line-height:2}
.foot a{color:#ffe6c6}
.foot .sep{opacity:.5; margin:0 5px}

/* พิมพ์ลงกระดาษ/บันทึกเป็น PDF — ผู้ปกครองกับฝ่ายกฎหมายชอบขอเป็นไฟล์ */
@media print{
  body{background:#fff; color:#000}
  .bg,.crosslinks,.topbar,.mint{display:none}
  .panel{border:1px solid #999; box-shadow:none; background:#fff; border-radius:0}
  .plain-title,.dates{color:#000; text-shadow:none}
  .doc a{color:#000}
}