/* fp-responsive.css
   ทำให้หน้าที่แปลงมาจาก mockup (index, novel, chapter, ranking, search, buffet,
   profile, login, player) รองรับจอทุกขนาด โดย "ไม่แตะมาร์กอัป/ฟอนต์/สี" ตามกติกาข้อ 6
   วิธีทำ: เลือกอิลิเมนต์จากค่า inline style ที่ React เขียนลง DOM แล้วทับเฉพาะเรื่องเลย์เอาต์
   (ความกว้าง จำนวนคอลัมน์ ระยะขอบ) เท่านั้น

   จุดตัด: 1330 / 1180 / 980 / 640 / 400 px
*/

/* ---------- 1) ปลดล็อกกรอบตายตัว 1330px ---------- */
@media (max-width: 1330px) {
  [style*="min-width: 1330px"] { min-width: 0 !important; }
}

/* ---------- 2) จอโน้ตบุ๊กเล็ก / แท็บเล็ตแนวนอน ---------- */
@media (max-width: 1180px) {
  [style*="grid-template-columns: repeat(6, 1fr)"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ---------- 3) แท็บเล็ตแนวตั้ง ---------- */
@media (max-width: 980px) {
  /* สองคอลัมน์ที่มีแถบข้างกว้างคงที่ -> เรียงลงมาเป็นคอลัมน์เดียว */
  [style*="grid-template-columns: 1fr 420px"],
  [style*="grid-template-columns: 1fr 380px"],
  [style*="grid-template-columns: 1fr 372px"],
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns: 1fr 330px"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns: 268px 1fr"],
  [style*="grid-template-columns: 236px 1fr"],
  [style*="grid-template-columns: 230px 1fr"],
  [style*="grid-template-columns: 1fr 1.14fr 1fr"],
  [style*="grid-template-columns: 1fr 1.08fr"],
  [style*="grid-template-columns: 1.05fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [style*="grid-template-columns: repeat(6, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* แถบข้างที่ sticky ไม่ต้องหนึบเมื่อวางซ้อนกันแล้ว */
  [style*="position: sticky"][style*="top: 9"],
  [style*="position: sticky"][style*="top: 10"],
  [style*="position: sticky"][style*="top: 11"],
  [style*="position: sticky"][style*="top: 12"] { position: static !important; }

  /* แบนเนอร์สูง ๆ */
  [style*="height: 330px"] { height: 260px !important; }

  /* ---- แถบเมนูบน: ตัดบรรทัดแล้วให้เมนูเลื่อนแนวนอนได้ ---- */
  header [style*="max-width: 1330px"],
  header [style*="max-width: 1160px"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  header nav {
    order: 3;
    width: 100%;
    margin: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  header nav::-webkit-scrollbar { display: none; }
  header nav > * { flex: none; }
}

/* ---------- 4) มือถือ ---------- */
@media (max-width: 640px) {
  [style*="grid-template-columns: repeat(6, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* การ์ดแนวเลื่อนที่ล็อกความกว้างไว้ */
  [style*="flex: 0 0 318px"] { flex: 0 0 82vw !important; }
  [style*="flex: 0 0 190px"] { flex: 0 0 42vw !important; }
  [style*="flex: 0 0 150px"] { flex: 0 0 36vw !important; }

  /* ระยะขอบด้านข้างของทุกคอนเทนเนอร์ */
  [style*="padding: 0px 28px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding: 12px 28px"] { padding: 10px 16px !important; }
  [style*="padding: 0px 26px"] { padding-left: 14px !important; padding-right: 14px !important; }

  /* กันของกว้างคงที่ทะลุจอ */
  [style*="width: 1160px"], [style*="width: 1000px"], [style*="width: 980px"],
  [style*="width: 760px"], [style*="width: 640px"], [style*="width: 540px"],
  [style*="width: 520px"], [style*="width: 440px"], [style*="width: 430px"],
  [style*="width: 420px"], [style*="width: 392px"], [style*="width: 390px"],
  [style*="width: 380px"], [style*="width: 340px"], [style*="width: 330px"],
  [style*="width: 300px"], [style*="width: 280px"], [style*="width: 260px"],
  [style*="width: 250px"] {
    max-width: 100% !important;
  }

  [style*="height: 330px"] { height: 210px !important; }
  [style*="height: 304px"], [style*="height: 280px"] { height: 220px !important; }

  /* แถบข่าววิ่งด้านบนสูงเกินจำเป็นบนมือถือ */
  [style*="animation: 26s linear 0s infinite normal none running fpMarquee"] { animation-duration: 40s !important; }
}

/* ---------- 5) มือถือจอเล็ก ---------- */
@media (max-width: 400px) {
  [style*="padding: 0px 28px"] { padding-left: 12px !important; padding-right: 12px !important; }
  [style*="padding: 12px 28px"] { padding: 10px 12px !important; }
  [style*="flex: 0 0 318px"] { flex: 0 0 86vw !important; }
}

/* ---------- 6) สไลด์หน้าแรก (hero carousel) ----------
   บนเดสก์ท็อปสไลด์กว้าง 820px เลื่อนด้วย transform ที่คำนวณเป็น px คงที่ (838px ต่อสไลด์)
   พอย่อจอลง เลขนั้นใช้ไม่ได้ จึงเปลี่ยนรางสไลด์เป็นแถบเลื่อนแบบ snap ของเบราว์เซอร์แทน
   แล้วซ่อนปุ่มลูกศร/จุดที่ผูกกับ transform ไว้ (ปัดนิ้วเลื่อนได้ตามปกติ) */
@media (max-width: 1180px) {
  [style*="calc(50% - 410px)"] {
    transform: none !important;
    width: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  [style*="calc(50% - 410px)"]::-webkit-scrollbar { display: none; }

  [style*="flex: 0 0 820px"] {
    flex: 0 0 min(820px, 86vw) !important;
    transform: none !important;
    opacity: 1 !important;
    scroll-snap-align: center;
  }
  /* ปุ่มลูกศรซ้าย/ขวา และแถวจุดบอกสไลด์ (ผูกกับ transform เดิม จึงซ่อนไว้) */
  [style*="width: 52px"][style*="height: 52px"][style*="position: absolute"][style*="top: 50%"] { display: none !important; }
  [style*="height: 8px"][style*="border-radius: 999px"] { display: none !important; }
}

/* ต่ำกว่า 940px สไลด์แคบกว่า 820px จริง ๆ จึงยุบเนื้อในของสไลด์ด้วย */
@media (max-width: 940px) {
  [style*="flex: 0 0 820px"] { padding: 24px 22px !important; }
  [style*="flex: 0 0 820px"] > [style*="margin-left: auto"] { display: none !important; }
  [style*="flex: 0 0 820px"] [style*="right: 228px"] { display: none !important; }
  [style*="flex: 0 0 820px"] [style*="max-width: 4"] { max-width: 100% !important; }
}

/* ---------- 7) ขนาดตัวอักษรหัวข้อใหญ่บนมือถือ ---------- */
@media (max-width: 640px) {
  [style*="font-size: 38px"] { font-size: 26px !important; }
  [style*="font-size: 37px"] { font-size: 25px !important; }
  [style*="font-size: 34px"] { font-size: 24px !important; }
  [style*="font-size: 30px"] { font-size: 22px !important; }
  [style*="font-size: 28px"] { font-size: 21px !important; }
  [style*="font-size: 22px"] { font-size: 19px !important; }
  [style*="font-size: 21px"] { font-size: 18px !important; }
}