/* ============================================================
   AM2026 — legal pages (privacy / data deletion)
   ใช้ร่วมกับ privacy.html และ delete-data.html
   Brand: light theme, Kanit, primary #0071b9, accent #ffcb36
   ============================================================ */
/* ========== Kanit — self-hosted (Thai + Latin) ========== */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/Kanit-Light-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/Kanit-Light-latin.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: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Kanit-Regular-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Kanit-Regular-latin.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: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Kanit-Medium-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Kanit-Medium-latin.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: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Kanit-SemiBold-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Kanit-SemiBold-latin.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: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Kanit-Bold-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Kanit-Bold-latin.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:      #F3F4F6;
  --panel:   #ffffff;
  --blue:    #0071b9;
  --gold:    #ffcb36;
  --red:     #c0392b;
  --green:   #1a9e5c;
  --dim:     #6b7280;
  --border:  #e5e7eb;
  --text:    #1a1a1a;
  --radius:  6px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Kanit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

.topbar {
  background: var(--blue);
  border-bottom: 3px solid var(--gold);
  padding: 14px 20px;
}
.topbar .brand { color: #fff; font-weight: 600; font-size: 16px; }
.topbar .brand small { display: block; font-weight: 300; font-size: 12px; opacity: .85; }

.wrap { max-width: 860px; margin: 0 auto; padding: 26px 20px 70px; }

.paper {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: 30px 32px;
}
@media (max-width: 640px) { .paper { padding: 22px 18px; } }

h1 { font-size: 24px; font-weight: 600; line-height: 1.35; }
h2 {
  font-size: 17px; font-weight: 600; color: var(--blue);
  margin: 30px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
h3 { font-size: 15px; font-weight: 600; margin: 18px 0 6px; }
p  { margin: 10px 0; }
ul, ol { margin: 10px 0 10px 22px; }
li { margin: 5px 0; }
a { color: var(--blue); }

.meta { color: var(--dim); font-size: 13px; margin-top: 6px; }

.lede {
  background: #f0f6fb;
  border-left: 3px solid var(--blue);
  padding: 14px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 18px 0 4px;
}

.en {
  background: #fbfbfc;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: 14px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 14px 0;
  font-size: 14px;
  color: #374151;
}
.en b { color: var(--text); }

table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
th, td { border: 1px solid var(--border); padding: 9px 11px; text-align: left; vertical-align: top; }
th { background: #f7f9fb; font-weight: 600; }
.tablewrap { overflow-x: auto; }

.tag {
  display: inline-block; font-size: 12px; font-weight: 500;
  padding: 1px 8px; border-radius: 999px; white-space: nowrap;
}
.tag.drv { background: #e3f0f9; color: #0a5c92; }
.tag.lo  { background: #fdf3d6; color: #8a6a00; }

footer.pagefoot {
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--dim); font-size: 13px;
}

/* ---- form (delete-data) ---- */
label { display: block; font-weight: 500; font-size: 14px; margin: 16px 0 5px; }
input[type=text], input[type=email], textarea, select {
  width: 100%; font-family: inherit; font-size: 15px;
  padding: 10px 12px; border: 1px solid #cbd5e1;
  border-radius: var(--radius); background: #fff; color: var(--text);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
textarea { min-height: 90px; resize: vertical; }
.hint { color: var(--dim); font-size: 13px; margin-top: 4px; }

button.submit {
  margin-top: 22px; width: 100%;
  font-family: inherit; font-size: 16px; font-weight: 600;
  background: var(--blue); color: #fff;
  border: 0; border-radius: var(--radius); padding: 13px 18px; cursor: pointer;
}
button.submit:disabled { opacity: .55; cursor: default; }

.result { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius); font-size: 14px; display: none; }
.result.ok   { display: block; background: #e8f6ee; border: 1px solid #a8ddc0; color: #14663c; }
.result.err  { display: block; background: #fdeceb; border: 1px solid #f0b6b0; color: #922b21; }