/* =====================================================================
   mobile.css — Diamond RO : responsive (มือถือ + PC จอแคบ/ซูม)
   หน้าเดิมวาง element แบบ absolute พิกัดตายตัว (กว้าง ~1250-1555px)
   -> เมื่อความกว้างจอ/หน้าต่างน้อยกว่านั้น ให้ "ไหลเรียงแนวตั้ง" พอดีจอ
   (ครอบคลุมทั้งมือถือ และตอนกด Ctrl+scroll ย่อ/ขยายบราวเซอร์บน PC)
   โหลดไฟล์นี้ "เป็นไฟล์สุดท้าย" ในทุกหน้า เพื่อ override ของเดิม
   ===================================================================== */

/* ====== ช่วงหลัก: จอ/หน้าต่างแคบกว่า 1250px = layout desktop เริ่มล้น -> stack ====== */
@media (max-width: 1250px){

  html, body { overflow-x: hidden !important; }

  /* พื้นหลัง: ใช้ bg เดิมแบบ cover เป็นฉากหลัง (ไม่ยืดดันเนื้อหา) */
  body.custom{
    background: #0b1740 url("../img/bg_main.png") top center / cover no-repeat !important;
  }
  video{ display:none !important; }                 /* วิดีโอพื้นหลัง: ปิด */
  .site-footer{ position: static !important; top:auto !important; height: 90px !important; }

  /* ---- หน้าแบบ "การ์ดเนื้อหา" (download / monster-database / serverinfo) ---- */
  .page-detail-wrap{ padding-top: 16px !important; padding-bottom: 40px !important; }
  .page-detail-box{ width:auto !important; max-width: 940px !important; margin:0 auto !important;
                    margin-left: 10px !important; margin-right: 10px !important; padding:18px 14px !important; border-radius:12px !important; }
  .page-title-box{ font-size: 22px !important; }
  .download-table, .download-table thead, .download-table tbody,
  .download-table th, .download-table td, .download-table tr{ display:block !important; width:auto !important; }
  .download-table th{ display:none !important; }
  .download-table td{ border:none !important; padding:6px 4px !important; }

  /* ---- ทุก section จาก absolute -> ไหลเรียงแนวตั้ง (จัดกลาง กว้างพอเหมาะ) ---- */
  .logo-box,
  .member-login-section,
  .status-section,
  .news-section,
  .after-news-section,
  .menu-support-title,
  .button-wrapper,
  .main-buttons,
  .main-buttons2,
  .starter-box{
    position: relative !important;
    left: auto !important; right: auto !important; top: auto !important; bottom:auto !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 16px auto !important;
    float: none !important;
  }

  /* โลโก้ */
  .logo-box{ margin-top: 20px !important; text-align:center !important; }
  .main-logo{ width: 280px !important; max-width: 80% !important; animation: none !important; transform:none !important; }

  /* กล่องล็อกอิน (artwork 699x426 + input วางทับ) -> zoom ทั้งชิ้นให้พอดี */
  .member-login-section{ text-align:center !important; width:auto !important; max-width:100% !important; }
  .member-login-box{ width: 699px !important; height: 426px !important; margin: 0 auto !important; zoom: 1; }

  /* สไลด์ข่าว: ย่อทั้งเฟรม (กรอบ+รูป) แบบสัดส่วน -> กรอบยังอยู่ + สไลด์ยังทำงาน
     (ไม่ใช้ zoom เพราะสคริปต์เลื่อนสไลด์คำนวณ px จะเพี้ยน)
     เฟรมจริง 700x530, ช่องรูป(area) อยู่ที่ซ้าย 68px บน 95px กว้าง 560 สูง 340
     -> คิดเป็น % : left 9.7%, top 17.9%, width 80%, height 64.2% */
  .slide-frame{
    position: relative !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    transform:none !important; float:none !important;
    width: min(94vw, 640px) !important;
    height: auto !important; aspect-ratio: 700 / 530 !important;
    margin: 16px auto !important;
  }
  .slide-bg{ display:block !important; position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; }
  .slide-area{
    position:absolute !important;
    left: 9.7% !important; top: 17.9% !important;
    width: 80% !important; height: 64.2% !important;
    margin:0 !important;
  }
  .slide-track{ height:100% !important; }
  .slide-image{
    width: min(75.2vw, 512px) !important;    /* = 80% ของความกว้างเฟรม (ตรงกับ .slide-area) */
    height: 100% !important;
    flex: 0 0 min(75.2vw, 512px) !important;
  }

  /* แถบตัวเลข (status.css มี @media เดิม 650px อยู่แล้ว) */
  .status-section{ z-index: 5 !important; }
  .status-list{ flex-wrap: wrap !important; justify-content:center !important; }

  /* เมนูปุ่ม (register/download/... เป็นรูป 350px) */
  .after-news-section{ text-align:center !important; }
  .menu-support-title{ text-align:center !important; }
  .menu-support-title img{ width: min(86vw, 480px) !important; height:auto !important; margin:0 auto !important; display:inline-block !important; }
  /* ปุ่ม = 2 คอลัมน์ ซ้าย|ขวา (กลุ่มซ้าย 5 ปุ่ม, กลุ่มขวา 5 ปุ่ม) อยู่ใต้รูป จัดกลาง */
  .button-wrapper{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; justify-content:center !important; align-items:flex-start !important; gap: 12px 40px !important; }
  .main-buttons, .main-buttons2{ display:flex !important; flex-direction:column !important; align-items:center !important; gap: 10px !important; margin:0 !important; }
  /* ขนาดปุ่มคุมที่ตัว <a> (รูปข้างในตาม 100%) */
  .main-buttons a, .main-buttons2 a{ width: 180px !important; max-width:100% !important; display:block !important; }
  .main-buttons a img, .main-buttons2 a img{ width: 100% !important; height:auto !important; }
  .register-btn:hover, .download-btn:hover, .topup-btn:hover, .discord-btn:hover{ animation:none !important; }

  /* ข่าว: การ์ดเรียงพอดี (wrap ได้ -> จอกว้างเห็นหลายใบ, จอแคบ 1 ใบ) */
  .news-section{ width: auto !important; max-width: 1000px !important; margin: 16px auto !important; padding: 0 10px !important; }
  .news-tabs{ flex-wrap: wrap !important; justify-content:center !important; }
  .news-content{ display:flex !important; flex-wrap:wrap !important; justify-content:center !important; gap: 14px !important; padding: 0 4px !important; }
  .news-card{ width: 330px !important; max-width: 92% !important; margin: 0 !important; }

  img{ max-width: 100%; }
}

/* ====== แท็บเล็ต/จอกลาง ~760px ลงไป: ย่อ artwork ที่กว้างเกิน ====== */
@media (max-width: 760px){
  .member-login-box{ zoom: 0.68 !important; }         /* 699 -> ~475px */
  .main-logo{ width: 240px !important; }
  .main-buttons a, .main-buttons2 a{ width: 158px !important; }
}

/* ====== มือถือ ~540px ลงไป ====== */
@media (max-width: 540px){
  .member-login-box{ zoom: 0.5 !important; }          /* 699 -> ~349px */
  .main-logo{ width: 190px !important; }
  .main-buttons a, .main-buttons2 a{ width: 140px !important; }
  .news-card{ width: 100% !important; }
  .page-title-box{ font-size: 19px !important; }
}

/* ====== มือถือเครื่องเล็ก ~380px ลงไป ====== */
@media (max-width: 380px){
  .member-login-box{ zoom: 0.46 !important; }
  .main-logo{ width: 160px !important; }
  .main-buttons a, .main-buttons2 a{ width: 120px !important; }
}