:root { 
  --bg-main: #05071a; 
  --bg-section: #0c1024; 
  --bg-card: #141a3a; 
  --bg-card-soft: #191f45; 
  --accent-pink: #ff4b8a; 
  --accent-orange: #ffb347; 
  --accent-green: #3ddc97; 
  --accent-blue: #3aa0ff; 
  --text-main: #f5f5ff; 
  --text-soft: #c5c7e6; 
  --text-muted: #8b8fb2; 
  --border-soft: #262b4f; 
  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.55); 
  --radius-lg: 18px; 
  --radius-md: 12px; 
  --radius-sm: 999px; 
  --gap-lg: 32px; 
  --gap-md: 20px; 
  --gap-sm: 12px; 
} 
/* รีเซ็ตพื้นฐาน */ 
*, 
*::before, 
*::after { 
  box-sizing: border-box; 
} 
/* ครอบหน้า cartoon ทั้งหมด */ 
.cartoon-section { 
  padding-top: 0; 
  padding-bottom: 0; 
} 
/* main กันเผื่อจะใช้สไตล์รวม */ 
.cartoon-main { 
  padding-top: 20px; 
  padding-bottom: 0; 
} 
/* คอนเทนเนอร์รวม */ 
.container { 
  width: 100%; 
  max-width: 1280px; 
  margin-left: auto; 
  margin-right: auto; 
  padding-left: 40px; 
  padding-right: 40px; 
} 
/* HEADER / HERO */ 
.cartoon-header { 
  padding-top: 30px; 
  padding-bottom: 30px; 
  background: radial-gradient(circle at top left, #22285a, #05071a 60%); 
} 
.header-inner { 
  display: grid; 
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); 
  gap: var(--gap-lg); 
  align-items: center; 
} 
.header-text { 
  max-width: 640px; 
} 
.header-badge { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  padding-top: 6px; 
  padding-right: 14px; 
  padding-bottom: 6px; 
  padding-left: 14px; 
  margin-bottom: 12px; 
  border-radius: var(--radius-sm); 
  background: linear-gradient(90deg, var(--accent-pink), var(--accent-orange)); 
  color: #ffffff; 
  font-size: 13px; 
  letter-spacing: 0.04em; 
  text-transform: uppercase; 
} 
.header-title { 
  margin-top: 0; 
  margin-bottom: 10px; 
  font-size: 20px; 
  line-height: 1.3; 
} 
.header-subtitle { 
  margin-top: 0; 
  margin-bottom: 16px; 
  color: var(--text-soft); 
  font-size: 18px; 
} 
.header-list { 
  margin-top: 0; 
  margin-bottom: 0; 
  padding-left: 18px; 
  color: var(--text-soft); 
  font-size: 16px; 
} 
.header-list li { 
  margin-bottom: 4px; 
} 
/* รูปภาพใน header */ 
.header-image-wrap { 
  display: flex; 
  justify-content: center; 
} 
.header-image-card { 
  position: relative; 
  width: 100%; 
  max-width: 100%; 
  border-radius: 24px; 
  overflow: hidden; 
  background: linear-gradient(145deg, #222b5a, #161b3a); 
  box-shadow: var(--shadow-soft); 
} 
.header-image-card img { 
  display: block; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  opacity: 0.95; 
} 
.header-image-label { 
  position: absolute; 
  left: 16px; 
  bottom: 16px; 
  padding-top: 8px; 
  padding-right: 14px; 
  padding-bottom: 8px; 
  padding-left: 14px; 
  border-radius: 999px; 
  background: rgba(5, 7, 26, 0.94); 
  color: #ffffff; 
  font-size: 13px; 
  display: inline-flex; 
f
 lex-direction: column; 
  gap: 2px; 
} 
.header-image-label span { 
  color: var(--accent-orange); 
  font-weight: 600; 
  font-size: 13px; 
} 

/* ================================
   INTRO (โครงใหม่แบบ HEADER)
================================ */

.cartoon-intro {
  padding-top: 30px;
  padding-bottom: 30px;
  background: radial-gradient(circle at top left, #05071a, #22285a 60%);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--gap-lg);
  align-items: center;
}

.intro-text-wrap {
  max-width: 640px;
}

.intro-title {
  margin: 0 0 12px 0;
  font-size: 20px;
  line-height: 1.3;
  color: #ffffff;
}

.intro-text {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: var(--text-soft);
}

.intro-list {
  padding-left: 18px;
  margin-top: 8px;
  margin-bottom: 0;
  color: var(--text-soft);
  font-size: 16px;
}

.intro-list li {
  margin-bottom: 4px;
}

/* IMAGE SIDE */
.intro-image-wrap {
  display: flex;
  justify-content: center;
}

.intro-image-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(145deg, #222b5a, #161b3a);
  box-shadow: var(--shadow-soft);
}

.intro-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intro-image-label { 
  position: absolute; 
  left: 16px; 
  bottom: 16px; 
  padding-top: 8px; 
  padding-right: 14px; 
  padding-bottom: 8px; 
  padding-left: 14px; 
  border-radius: 999px; 
  background: rgba(5, 7, 26, 0.94); 
  color: #ffffff; 
  font-size: 13px; 
  display: inline-flex; 
f
 lex-direction: column; 
  gap: 2px; 
} 
.intro-image-label span { 
  color: var(--accent-orange); 
  font-weight: 600; 
  font-size: 13px; 
} 

/* MOBILE FIX */
@media (max-width: 935px) {
  .intro-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================
   SECTION รายการการ์ตูน (6 ใบ = 3 แถว × 2 คอลัมน์)
   ========================================= */

.cartoon-list-section{
  padding-top:28px;
  padding-bottom:28px;
}

.section-header{
  max-width:760px;
  margin-bottom:20px;
}

.section-title{
  margin-top:0;
  margin-bottom:8px;
  font-size:20px;
}

.section-subtitle{
  margin-top:0;
  margin-bottom:0;
  font-size:16px;
  color:var(--text-soft);
}

/* GRID การ์ตูน – 2 คอลัมน์ (3 แถว) */
.cartoon-grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:var(--gap-lg);
  margin-top:24px;
}

/* การ์ดการ์ตูน – แบ่งด้านใน 2:3 (รูป:ข้อความ) */
.cartoon-card{
  display:grid;
  grid-template-columns:
    2fr 3fr; /* อัตราส่วน 2:3 */
  border-radius:var(--radius-lg);
  background:
    linear-gradient(
      145deg,
      var(--bg-card),
      var(--bg-card-soft)
    );
  border:1px solid rgba(255,255,255,0.04);
  box-shadow:0 14px 35px rgba(0,0,0,0.65);
  overflow:hidden;
  transform:translateY(0);
  transition-property:
    transform,
    box-shadow,
    border-color;
  transition-duration:0.2s;
  transition-timing-function:ease-out;
}

.cartoon-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,0.8);
  border-color:rgba(255,255,255,0.12);
}

/* รูปภาพด้านซ้ายของการ์ด */
.cartoon-image-wrap{
  position:relative;
  width:100%;
  height:100%;
  min-height:140px;
  overflow:hidden;
}

.cartoon-image-wrap img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.cartoon-tag{
  position:absolute;
  left:10px;
  bottom:10px;
  padding-top:4px;
  padding-right:10px;
  padding-bottom:4px;
  padding-left:10px;
  border-radius:999px;
  background-color:rgba(5,7,26,0.9);
  color:#ffffff;
  font-size:13px;
}

/* เนื้อหาฝั่งขวา */
.cartoon-body{
  padding-top:14px;
  padding-right:16px;
  padding-bottom:16px;
  padding-left:16px;
}

.cartoon-title{
  margin-top:0;
  margin-bottom:8px;
  font-size:17px;
}

.cartoon-text{
  margin-top:0;
  margin-bottom:10px;
  font-size:16px;
  color:var(--text-soft);
}

/* meta list */
.cartoon-meta{
  margin-top:0;
  margin-bottom:10px;
  padding-left:18px;
  font-size:14px;
  color:var(--text-muted);
}

.cartoon-meta li{
  margin-bottom:2px;
}

/* ลิงก์ด้านล่างการ์ด (ถ้าอนาคตจะเพิ่มปุ่ม “ดูการ์ตูนเรื่องนี้”) */
.cartoon-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:var(--accent-blue);
  text-decoration:none;
  font-weight:600;
  position:relative;
}

.cartoon-link::after{
  content:"→";
  font-size:14px;
  transition-property:transform;
  transition-duration:0.15s;
  transition-timing-function:ease-out;
}

.cartoon-card:hover .cartoon-link::after{
  transform:translateX(3px);
}

/* =========================================
   Responsive
   ========================================= */

@media (max-width:991.98px){
  .header-inner{
    grid-template-columns:
      minmax(0,1fr);
  }

  .intro-grid{
    grid-template-columns:
      minmax(0,1fr);
  }

  /* การ์ดเรียงคอลัมน์เดียวบน tablet / mobile */
  .cartoon-grid{
    grid-template-columns:
      minmax(0,1fr);
  }

  .cartoon-card{
    grid-template-columns:
      minmax(0,1fr);
  }

  .cartoon-image-wrap{
    min-height:180px;
  }

  .header-image-wrap{
    margin-top:16px;
  }

  .intro-image-wrap{
    margin-bottom:16px;
  }
}

@media (max-width:575.98px){
  .cartoon-header{
    padding-top:24px;
    padding-bottom:24px;
  }

  .cartoon-intro{
    padding-top:24px;
    padding-bottom:24px;
  }

  .cartoon-list-section{
    padding-top:24px;
    padding-bottom:24px;
  }

  .header-title{
    font-size:18px;
  }

  .intro-title{
    font-size:18px;
  }

  .section-title{
    font-size:20px;
  }
}

/* SECTION สรุปล่าง */ 
.cartoon-bottom { 
  padding-top: 32px; 
  padding-bottom: 32px; 
  background-color: #060818; 
  border-top: 1px solid var(--border-soft); 
} 
.bottom-inner { 
  max-width: 1280px; 
} 
.bottom-title { 
  margin-top: 0; 
  margin-bottom: 10px; 
  font-size: 20px; 
} 
.bottom-text { 
  margin-top: 0; 
  margin-bottom: 8px; 
  font-size: 16px; 
  color: var(--text-soft); 
} 
/* Responsive */ 
@media (max-width: 992px) { 
  .header-inner { 
    grid-template-columns: minmax(0, 1.2fr); 
  } 
  .header-image-wrap { 
    margin-top: 20px; 
    justify-content: flex-start; 
  } 
  .cartoon-grid { 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
  } 
} 
@media (max-width: 600px) { 
  .cartoon-header { 
    padding-top: 24px; 
    padding-bottom: 24px; 
  } 
  .header-title { 
    font-size: 22px; 
  } 
  .intro-title { 
    font-size: 18px; 
  } 
  .section-title { 
    font-size: 18px; 
  } 
  .cartoon-grid { 
    grid-template-columns: minmax(0, 1fr); 
  } 
  .cartoon-card { 
    border-radius: 16px; 
  } 
}