/*
Theme Name: Astra Child
Theme URI: http://example.com/astra-child/
Description: Child theme for the Astra theme
Author: Your Name
Author URI: http://example.com
Template: astra
Version: 1.0.0
*/

/* เพิ่มสไตล์ที่ต้องการที่นี่ */
/* ตั้งค่าพื้นหลังสีดำ */
body {
  background-color: #000000 !important;
}

/* จองพื้นที่โลโก้ ลด CLS */
.site-logo-wrapper {
  display: inline-block;
  width: 60px;    /* หรือปรับตามขนาดโลโก้จริง */
  height: 60px;
}
.custom-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- สไตล์จองพื้นที่ ลด CLS ---------- */

/* 1) จองพื้นที่ header ไม่ให้ shift */
.site-header {
  min-height: 120px; /* ปรับเป็นความสูงจริงของ header คุณ */
}

/* 2) จองพื้นที่โลโก้ */
.site-logo-wrapper,
.site-logo-img {
  display: inline-block;
  width: 60px;    /* ปรับตามขนาดโลโก้จริง */
  height: 60px;
}
.custom-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 3) จองพื้นที่ชื่อเว็บ ไม่ให้ shift */
.ast-site-title-wrap {
  display: inline-flex;
  align-items: center;
  min-height: 1.2em;
}
/* -------------------- */


/* ✅ เดสก์ท็อป: กล่องกว้าง 60% *//* ✅ เดสก์ท็อป: กำหนดขนาดสวยงาม 60% */
.archive #primary .custom-category-intro {
  width: 60%;
  margin: 10px auto;
  text-align: center;
}

/* ✅ ภาพในกล่อง */
.archive #primary .custom-category-intro a img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* ✅ สำหรับ Swiper */
.banner-swiper {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  aspect-ratio: 800 / 418;
  overflow: hidden;
  position: relative;
}

/* -------- มือถือ -------- */
@media (max-width: 768px){

  /* 1) ตัด padding ของคอนเทนเนอร์ Astra ที่ทำให้ดูเล็ก */
  .archive .site-content,
  .archive .ast-container,
  .archive #primary{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* 2) กล่องแบนเนอร์เองให้เต็มกว้าง */
  .archive #primary .custom-category-intro{
    width:100% !important;
    max-width:100% !important;
    margin:8px 0 !important;
    padding:0 !important;
    border-radius:0;
    box-sizing:border-box;
  }

  /* 3) ยกเลิกข้อจำกัดความกว้างของสไลด์ */
  .archive #primary .custom-category-intro .banner-swiper{
    width:100% !important;
    max-width:none !important;  /* สำคัญมาก */
    margin:0 !important;
    aspect-ratio:16/9;          /* หรือเอาออกถ้าอยากใช้สัดส่วนรูปจริง */
    border-radius:0;
  }

  .archive #primary .custom-category-intro .banner-swiper img{
    width:100% !important;
    height:auto !important;
    display:block;
    border-radius:0 !important;
  }
}

/* ป้องกันสกรอลล์ขวาถ้ามีองค์ประกอบล้น */
html, body { overflow-x:hidden; }