#meta-consent[hidden], #cookie-settings[hidden] { display: none !important; }
#meta-consent { position: fixed; z-index: 10000; inset: auto 16px 16px; max-width: 540px; margin: auto; padding: 18px; background: #fffdf8; color: #243d32; border: 2px solid #557662; border-radius: 16px; box-shadow: 0 4px 24px #0002; font: inherit; }
#meta-consent p { margin: 0 0 6px; line-height: 1.45; }
/* อ่านเป็นสามบรรทัด: ถามอะไร · ปลอดภัยแค่ไหน · ส่งอะไรบ้าง
   เดิมเป็นย่อหน้าเดียวยาว พ่อแม่กวาดตาไม่เจอประโยคที่ต้องการที่สุด (ไม่ส่งข้อมูลลูก) */
.consent-ask { font-weight: 600; }
.consent-safe { color: #2f6a4a; font-weight: 600; }
.consent-facts { margin-bottom: 0; font-size: .88em; color: #40584b; }
.consent-facts a { text-decoration: underline; text-underline-offset: 3px; }
.consent-details { margin: 0 0 6px; }
.consent-details summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; color: #243d32; }
.meta-consent-actions { margin-top: 12px; }
.meta-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.meta-consent-actions button { width: 100%; min-height: 48px; padding: 10px; border: 2px solid #557662; border-radius: 12px; background: #fff; color: #243d32; font: inherit; cursor: pointer; }
.meta-consent-actions button:focus-visible, #cookie-settings:focus-visible { outline: 3px solid #243d32; outline-offset: 3px; }
/* จอเตี้ยหรือตัวอักษรใหญ่: ให้แถบเลื่อนในตัวเอง ดีกว่าดันจนปุ่มหลุดขอบจอ */
#meta-consent { max-height: min(62vh, 440px); overflow: auto; overscroll-behavior: contain; }
/* แถบแสดงอยู่ · กันปุ่มล่างถูกบังบนจอมือถือ
   ความสูงจริงวัดจาก JS (--consent-space) · 220px เป็นค่าสำรองตอน JS ยังไม่ทันตั้ง
   เดิมเผื่อ 220px ตายตัว · วัดจริงบนจอ 390px แถบสูง 276px แปลว่าแถบบังท้ายหน้าอยู่ราว 56px */
body:has(#meta-consent:not([hidden])) { padding-bottom: calc(var(--consent-space, 220px) + env(safe-area-inset-bottom)); }
@media (max-width: 480px) {
  #meta-consent { padding: 12px 14px; font-size: 15px; max-height: 40vh; }
  .meta-consent-actions { margin-top: 10px; gap: 10px; }
  .meta-consent-actions button { min-height: 44px; padding: 8px; }
}
/* มือถือ (ระลอก 2 · 2026-09-23): แถบยินยอมบังจอแรกได้ไม่เกิน ~15% · เดิมสูง ~220px (ราว 1 ใน 3 ของจอ 664px)
   ข้อความเดิมครบทุกบรรทัด แค่จัดใหม่: คำถาม + ประโยคความปลอดภัยบรรทัดละ 1 · "ส่งอะไรบ้าง" กับปุ่มสองปุ่ม (กว้างเท่ากัน · ยอมรับไม่เด่นกว่าไม่ยอมรับ) อยู่แถวเดียวกัน
   เปิด "ส่งอะไรบ้าง" แล้วรายละเอียดกางเต็มแถว ปุ่มลงไปแถวถัดไป · แก้แค่หน้าตา ไม่แตะ tracking.js/เงื่อนไข Pixel */
@media (max-width: 480px) {
  #meta-consent {
    inset: auto 6px 6px;
    display: grid;
    grid-template-columns: 1fr 104px 104px;
    align-items: center;
    gap: 0 8px;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 14px;
  }
  #meta-consent .consent-ask { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.35; }
  #meta-consent .consent-safe { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.35; }
  #meta-consent .consent-details { grid-column: 1; margin: 0; min-width: 0; }
  #meta-consent .consent-details[open] { grid-column: 1 / -1; }
  #meta-consent .consent-details summary { min-height: 40px; font-size: 13px; }
  #meta-consent .meta-consent-actions { display: contents; }
  #meta-consent .meta-consent-actions button { width: 100%; min-height: 40px; padding: 4px 8px; font-size: 14px; border-radius: 10px; }
}
/* มือถือแนวนอน (จอเตี้ย): เรียงเป็นแถวเดียว ข้อความซ้าย · "ส่งอะไรบ้าง" + ปุ่มขวา · สูงราว 55px จากจอ 390px */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 481px) {
  #meta-consent {
    inset: auto 6px 6px;
    max-width: none;
    display: grid;
    grid-template-columns: 1fr auto 124px 124px;
    align-items: center;
    gap: 0 10px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 14px;
  }
  #meta-consent .consent-ask { grid-column: 1; grid-row: 1; margin: 0; font-size: 14px; line-height: 1.35; }
  #meta-consent .consent-safe { grid-column: 1; grid-row: 2; margin: 0; font-size: 12.5px; line-height: 1.35; }
  #meta-consent .consent-details { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  #meta-consent .consent-details[open] { grid-column: 1 / -1; grid-row: 3; }
  #meta-consent .consent-details summary { min-height: 40px; font-size: 13px; }
  #meta-consent .meta-consent-actions { display: contents; }
  #meta-consent .meta-consent-actions button { grid-row: 1 / 3; width: 100%; min-height: 40px; padding: 4px 8px; font-size: 14px; border-radius: 10px; }
}