/* =========================================================
   Pre-Register Page Styles
   ---------------------------------------------------------
   Sections:
   1. Hero Section
   2. Event Section
   3. News Section
   4. Milestone Detail Modal
   5. Character Section (Refined)
   6. Social Section
   7. Animations
   ========================================================= */


/* =========================================
   1. Hero Section
   ========================================= */
.s-hero {
  display: flex;
  align-items: center;
  min-height: 100vh;
  height: auto;
  padding-top: 5rem;
  padding-bottom: 5rem;
  overflow-x: hidden;
}

/* ขอบล่างไล่เป็นสีดำ ให้ต่อกับ Section กิจกรรม (ด้านบนเป็นดำ) แบบไม่มีรอยต่อ */
.s-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: clamp(140px, 22%, 320px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 45%, #000 100%);
  pointer-events: none;
}

.title-wrapper {
  position: relative;
  width: 100%;
  max-width: 340px;
}

.title-wrapper img {
  max-width: 340px;
}

.registered-badge {
  position: absolute;
  right: 50%;
  bottom: 8%;
  width: max-content;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  /* ชั้นบน = แถบแสงวิ่ง, ชั้นล่าง = สีเงินพื้นฐาน */
  background-image:
    linear-gradient(110deg,
      transparent 40%,
      rgba(255, 255, 255, 0.95) 50%,
      transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #e6edf3 45%, #a9bccb 100%);
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0, 0 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65));
  transform: translate(50%, 0%);
  animation:
    badge-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both,
    badge-shine 5s ease-in-out 1.2s infinite;
}

/* ตัวเลข: สีทอง ใหญ่ขึ้น มีแสงวิ่งตามหลังข้อความเล็กน้อย */
.registered-badge span {
  display: inline-block;
  margin: 0 0.15em;
  font-size: 1.3em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-align: center;
  background-image:
    linear-gradient(110deg,
      transparent 40%,
      rgba(255, 255, 255, 0.95) 50%,
      transparent 60%),
    linear-gradient(180deg, #fff6d5 0%, #f6d27a 45%, #c8902c 100%);
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0, 0 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(241, 199, 105, 0.45));
  animation: badge-shine 5s ease-in-out 1.45s infinite;
}

@keyframes badge-in {
  from { opacity: 0; translate: 0 12px; }
  to   { opacity: 1; translate: 0 0; }
}

/* แสงกวาดผ่านครั้งเดียวแล้วพัก — เริ่ม/จบนอกตัวอักษร จึงวนลูปไม่กระตุก */
@keyframes badge-shine {
  0%        { background-position: 150% 0, 0 0; }
  35%, 100% { background-position: -50% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .registered-badge,
  .registered-badge span {
    animation: none;
  }
}


/* ----- Milestone Container ----- */
.milestone-container {
  width: 100%;
  max-width: 1000px;
}

.milestone-box-wrapper {
  width: 650px;
}

.milestone-item {
  --ms-glow: rgba(241, 199, 105, 0.55);
  position: relative;
  z-index: 0;
  isolation: isolate; /* ให้ ::before อยู่หลังการ์ดเสมอ ทั้งตอนปกติและตอน hover */
  min-width: 150px;
  aspect-ratio: 1 / 1.4;
  padding: 2%;
  margin: 0;
  background: url(../images/s-hero/milestone.webp) center / 110% no-repeat;
  cursor: pointer;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease;
}

/* แสงเรืองด้านหลัง: วงรีนุ่ม ๆ แทนกล่องสี่เหลี่ยมเดิม */
.milestone-item.succeed::before {
  content: "";
  position: absolute;
  inset: 12% 14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
      rgba(200, 20, 20, 0.75) 0%,
      rgba(167, 0, 0, 0.35) 45%,
      rgba(167, 0, 0, 0) 70%);
  filter: blur(14px);
  opacity: 0.7;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

.milestone-item.succeed {
  --ms-glow: rgba(255, 90, 60, 0.6);
  background: url(../images/s-hero/milestone-done.webp) center / 110% no-repeat;
}

.milestone-item:last-child {
  --ms-glow: rgba(255, 210, 110, 0.75);
  background: url(../images/s-hero/milestone-rare.webp) center / 110% no-repeat;
}

.milestone-item:last-child.succeed::before {
  background: radial-gradient(ellipse at center,
      rgba(233, 168, 41, 0.8) 0%,
      rgba(233, 168, 41, 0.35) 45%,
      rgba(233, 168, 41, 0) 70%);
}

/* ----- Hover ----- */
.milestone-item:hover {
  z-index: 2;
  transform: translateY(-10px) scale(1.04);
  /* drop-shadow เดินตามรูปทรงการ์ด ไม่เป็นกรอบสี่เหลี่ยม */
  filter:
    brightness(1.08)
    drop-shadow(0 0 6px var(--ms-glow))
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
}

.milestone-item.succeed:hover::before {
  opacity: 1;
  transform: scale(1.1);
}

.milestone-item .item-img-wrapper {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.milestone-item:hover .item-img-wrapper {
  transform: translate(-50%, -4%) scale(1.08);
}

.milestone-item .milestone-text {
  transition: text-shadow 0.35s ease;
}

.milestone-item:hover .milestone-text {
  text-shadow:
    1px 1px 3px rgba(0, 0, 0, 0.8),
    0 0 10px var(--ms-glow);
}

.milestone-item:hover .btn-detail {
  opacity: 1;
}

.btn-detail:hover {
  transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .milestone-item,
  .milestone-item .item-img-wrapper {
    transition: none;
  }

  .milestone-item:hover,
  .milestone-item:hover .item-img-wrapper {
    transform: none;
  }

  .milestone-item:hover .item-img-wrapper {
    transform: translate(-50%, 0%);
  }
}

.milestone-box {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1.27;
  font-size: 19px;
  font-weight: 600;
  line-height: 100%;
  color: #fff;
}

.milestone-bg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.milestone-text {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.milestone-text .target::after {
  content: "ลงทะเบียน";
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0.7em;
  font-weight: 500;
}

.succeed .milestone-text .target::after {
  content: "ลงทะเบียนแล้ว";
}


/* ----- Milestone Item Image ----- */
.item-img-wrapper {
  position: absolute;
  top: 13%;
  left: 50%;
  width: 50%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, 0%);
}

.item-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.milestone-box.succeed .item-img-wrapper {
  animation: pulse-subtle 2s infinite;
}


/* ----- Milestone Detail Button ----- */
.btn-detail {
  position: absolute;
  top: 7%;
  right: 10%;
  z-index: 10;
  width: 18%;
  aspect-ratio: 1 / 1;
  background: url(../images/s-hero/btn-detail.webp) center / cover no-repeat;
  opacity: 0.8;
  transition: transform 0.2s, opacity 0.2s;
}


/* ----- Timeline / Steps ----- */
.timeline-steps-wrapper {
  width: 560px;
  padding: 0;
  margin-top: 10px;
}

.progress-line-bg {
  width: 95%;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  z-index: 0;
}

.progress-line-fill {
  /* ความยาวจริงถูกเซ็ตเป็น inline style จาก Hero.astro ตามยอดลงทะเบียน
     ค่าตั้งต้นต้องเป็น 0 ไม่งั้น div ไม่มี width จะกินเต็มเส้นไปเลย */
  width: 0;
  height: 100%;
  background: #f1c769;
  box-shadow: 0 0 10px #f1c769;
  transition: width 1s ease-in-out;
}

.step-icon {
  position: relative;
  z-index: 2;
  width: 40px;
  aspect-ratio: 1 / 1;
  background: url(../images/s-hero/step.webp) center / 100% no-repeat;
  cursor: pointer;
  transition: transform 0.2s;
}

.step-icon:hover {
  transform: scale(1.1);
}

/* Step completion states */

.complete-1 .step1,
.complete-2 .step1,
.complete-3 .step1,
.complete-4 .step1,
.complete-5 .step1,
.complete-2 .step2,
.complete-3 .step2,
.complete-4 .step2,
.complete-5 .step2,
.complete-3 .step3,
.complete-4 .step3,
.complete-5 .step3,
.complete-4 .step4,
.complete-5 .step4,
.complete-5 .step5 {
  background: url(../images/s-hero/step-done.webp) center / 100% no-repeat;
}


/* ----- Register Button ----- */
.register-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  max-width: 452px;
  aspect-ratio: 452 / 91;
  font-size: 35px;
  background: url('../images/s-hero/btn-pre-register.webp') center / 100% 100% no-repeat;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
}

/* ข้อความ "ลงทะเบียนล่วงหน้า" ยาวขึ้น → ย่อตามความกว้างปุ่ม ไม่ให้ชนลายประดับซ้ายขวา */
.register-btn {
  container-type: inline-size;
}

.register-btn p {
  font-size: clamp(16px, 6.4cqw, 30px);
  line-height: 1;
  white-space: nowrap;
}

.register-btn:hover {
  transform: scale(1.03);
  filter: brightness(1.1);
}


/* ----- Milestone Scroll (mobile) ----- */
.milestone-scroll {
  gap: 10px;
  /* เผื่อพื้นที่ด้านบนให้การ์ดลอยขึ้นตอน hover โดยไม่ถูกตัด (overflow-x: auto ตัดแกน y ด้วย) */
  /* + ด้านล่าง ให้วงแหวน step ที่ขยายออกไม่ถูกตัด */
  padding: 20px 15px 24px;
  margin: -20px 0 -24px;
  overflow-x: auto;
  flex-wrap: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.milestone-scroll::-webkit-scrollbar {
  display: none;
}

.milestone-scroll > div > .d-flex {
  flex-wrap: nowrap;
  justify-content: flex-start !important;
}

.milestone-scroll .milestone-item {
  min-width: 130px;
  flex-shrink: 0;
}


/* ----- Hero Responsive ----- */
@media (min-width: 768px) {
  .title-wrapper {
    width: 90%;
    max-width: 600px;
  }

  .title-wrapper img {
    max-width: 600px;
  }

  .registered-badge {
    font-size: 1.7rem;
  }

  .milestone-scroll .milestone-item {
    min-width: 150px;
    width: 19%;
  }

  .milestone-box-wrapper {
    width: 100%;
  }

  .timeline-steps-wrapper {
    width: 80%;
  }
}

/* iPad / มือถือจอใหญ่: การ์ด 5 ใบพอดีจอ ไม่ต้องเลื่อน ไม่โดนตัดขอบ */
@media (min-width: 576px) and (max-width: 991.98px) {
  .milestone-scroll {
    overflow-x: visible;
    padding-left: 0;
    padding-right: 0;
  }

  .milestone-scroll > div > .d-flex {
    justify-content: space-between !important;
  }

  .milestone-scroll .milestone-item {
    min-width: 0;
    width: 19%;
  }

  .milestone-scroll .milestone-box {
    min-width: 0;
    font-size: clamp(14px, 2.3vw, 19px);
  }

  .milestone-box-wrapper {
    width: 100%;
  }

  /* จุด step ตรงกับกึ่งกลางการ์ดใบแรก–ใบสุดท้าย */
  .timeline-steps-wrapper {
    width: calc(80% + 28px);
  }
}

@media (min-width: 992px) {
  .milestone-box {
    font-size: 24px;
  }

  .milestone-scroll {
    overflow-x: visible;
    flex-wrap: wrap;
  }

  .milestone-scroll > div > .d-flex {
    flex-wrap: wrap;
    justify-content: center !important;
  }
}


/* =========================================
   2. Event Section
   ========================================= */
.s-event {
  overflow: hidden;
}

.bg-section2 {
  background: url('../images/bg-section2.webp') center / cover no-repeat;
}

.event-title-img {
  width: 60%;
  max-width: 280px;
}

.event-subtitle {
  max-width: 600px;
  margin: 0 auto;
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
}


/* ----- Carousel Wrapper ----- */
.event-carousel-wrapper {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.event-carousel {
  width: 100%;
  margin: 0 auto;
}

.event-carousel-slider .owl-stage-outer {
  width: 100%;
  padding: 2% 0;
  margin: auto;
}

/* ----- Carousel Dots ----- */
.event-carousel-slider .owl-theme .owl-dots {
  margin-top: -20px !important;
}

.event-carousel-slider .owl-theme .owl-dots .owl-dot span {
  width: 30px;
  height: auto;
  aspect-ratio: 1 / 1;
  background: url(../images/s-event/point-slide.webp) center / 100% no-repeat;
  transition: all 0.3s ease-in-out;
}

.event-carousel-slider .owl-theme .owl-dots .owl-dot:hover span {
  scale: 1.2;
  box-shadow: 0 0 10px #bf7404;
}

.event-carousel-slider .owl-theme .owl-dots .owl-dot.active span {
  height: auto;
  aspect-ratio: 1 / 1;
  background: url(../images/s-event/point-slide-active.webp) center / 100% no-repeat;
  scale: 1.5;
}


/* ----- Character Image ----- */
.event-character {
  position: absolute;
  right: -100px;
  bottom: 0;
  z-index: 3;
  width: 30px;
  pointer-events: none;
}


/* ----- Event Responsive ----- */
@media (min-width: 992px) {
  .event-carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 85%;              /* ลดขนาดลง 15% */
    max-width: 1632px;       /* จอกว้าง: คงขนาดเท่าที่จอ 1920 (85% × 1920) ไม่ขยายต่อ */
    margin: 0 auto;
    aspect-ratio: 1715 / 823;
    background: url('../images/s-event/bg-event-container.webp') center / 100% no-repeat;
  }

  .event-carousel-wrapper::before,
  .event-carousel-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    aspect-ratio: 348 / 823;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
  }

  .event-carousel-wrapper::before {
    left: 0;
    z-index: 20;
    background-image: url('../images/s-event/bg-event-container-before.webp');
  }

  .event-carousel-wrapper::after {
    right: 0;
    z-index: 2;
    background-image: url('../images/s-event/bg-event-container-after.webp');
  }

  .event-title-img {
    max-width: 323px;        /* 380 × 0.85 */
  }

  .event-carousel {
    position: relative;
    top: -3.6%;              /* จัดก้อน แบนเนอร์+จุดสไลด์ ให้อยู่กึ่งกลางพื้นขาวของกรอบ */
    width: 80%;
  }

  .event-carousel-wrapper .event-arrow-prev,
  .event-carousel-wrapper .event-arrow-next {
    top: 45.5%;              /* ให้ลูกศรอยู่กึ่งกลางแบนเนอร์ */
  }

  /* ลดระยะห่างระหว่างแบนเนอร์กับจุดสไลด์ */
  .event-carousel-slider.owl-theme .owl-dots {
    margin-top: -1.5% !important;
  }

  .event-carousel-slider .owl-stage-outer {
    padding: 13% 0;
  }
}

@media (min-width: 1200px) {
  /* ตั้งแต่ 1200 ขึ้นไป owl โชว์ 3 สไลด์แบบ center ใบข้างหรี่/เบลอ ใบกลางเด่น
     (ค่าจริงระหว่างเลื่อนคำนวณต่อเนื่องโดย coverflow ใน EventSection.astro) */
  .event-carousel-slider .owl-item.active {
    scale: 1.2;
    opacity: 0.7;
    border-radius: 12px;
    overflow: hidden;
    filter: blur(1px) brightness(0.9) contrast(0.5);
  }

  .event-carousel-slider .owl-item.active.center {
    scale: 2;
    z-index: 100;
    opacity: 1;
    filter: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.6);
  }

  /* มีสไลด์เดียว (API ส่งบทความมาอันเดียว) ใบนั้นแสดงเหมือน "ใบกลาง" */
  .event-carousel-slider.has-single-slide .owl-item.active,
  .event-carousel-slider.has-single-slide .owl-item.active.center {
    scale: 2;
    z-index: 100;
    opacity: 1;
    filter: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.6);
  }

  .event-character {
    right: -187px;           /* -220 × 0.85 */
    width: 638px;            /* 750 × 0.85 */
  }
}


/* =========================================
   3. News Section
   ========================================= */
.s-news {
  overflow: hidden;
}

.s-news .container-fluid {
  width: 100%;
}

.news-title-img {
  width: 100%;
  max-width: 500px;
}


/* ----- News Banner Carousel ----- */
.news-banner-wrapper {
  /* ความสูงพื้นที่ dots ใต้แบนเนอร์ (margin 10 + dot 22 + padding 10) */
  --news-dots-h: 42px;
  --news-frame-offset: 10px;
  position: relative;
  border-radius: 12px;
}

/* กรอบมุม: ใช้ภาพมุมซ้ายบน แล้วหมุน 180° เป็นมุมขวาล่าง */
.news-banner-wrapper::before,
.news-banner-wrapper::after {
  content: "";
  position: absolute;
  z-index: 20;
  width: clamp(120px, 30%, 304px);
  aspect-ratio: 219 / 144;
  background: url('../images/s-news/frame-banner.webp') center / 100% 100% no-repeat;
  pointer-events: none;
}

.news-banner-wrapper::before {
  top: calc(var(--news-frame-offset) * -1);
  left: calc(var(--news-frame-offset) * -1);
}

.news-banner-wrapper::after {
  right: calc(var(--news-frame-offset) * -1);
  bottom: calc(var(--news-dots-h) - var(--news-frame-offset));
  transform: rotate(180deg);
}

.news-banner-wrapper .owl-carousel .item img,
.news-banner-wrapper .owl-carousel .owl-stage-outer {
  border-radius: 12px;
}

.news-banner-wrapper .owl-dots {
  margin-top: 10px !important;
}

.news-banner-wrapper .owl-theme .owl-dots .owl-dot span {
  width: 22px;
  height: auto;
  aspect-ratio: 1 / 1;
  background: url('../images/s-event/point-slide.webp') center / 100% no-repeat;
}

.news-banner-wrapper .owl-theme .owl-dots .owl-dot.active span {
  height: auto;
  aspect-ratio: 1 / 1;
  background: url('../images/s-event/point-slide-active.webp') center / 100% no-repeat;
  scale: 1.3;
}


/* ----- Custom Arrows ----- */
.news-arrow {
  position: absolute;
  top: 40%;
  z-index: 10;
  width: 51px;
  height: 51px;
  padding: 0;
  border: none;
  opacity: 0.8;
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

.news-arrow-prev,
.event-arrow-prev {
  left: -15px;
  background: url(../images/s-news/btn-arrow.webp) center / 100% no-repeat;
  transform: translateY(-50%) scaleX(-1);
}

.news-arrow-next,
.event-arrow-next {
  right: -15px;
  background: url(../images/s-news/btn-arrow.webp) center / 100% no-repeat;
}

.event-arrow-prev {
  top: 50%;
  left: -10px;
  transform: translateY(-50%) scaleX(-1);
}

.event-arrow-next {
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
}

.news-arrow-prev:hover,
.news-arrow-next:hover,
.event-arrow-prev:hover,
.event-arrow-next:hover {
  filter: brightness(1.7);
}


/* ----- Category Tabs ----- */
.news-tab {
  width: 130px;
  aspect-ratio: 150 / 37;
  padding: 6px 18px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  background: url('../images/s-news/btn-tab-news.webp') center / 100% 100% no-repeat;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.news-tab:hover {
  transform: scale(1.05);
}

.news-tab.active {
  color: #fff;
  background: url('../images/s-news/btn-tab-news-active.webp') center / 100% 100% no-repeat;
}


/* ----- News List ----- */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 16px;
}

.news-item {
  gap: 10px;
  padding: 3px 15px;
  aspect-ratio: 365 / 38;
  background: url(../images/s-news/bg-news-list.webp) top center / 100% no-repeat;
  border-radius: 6px;
  color: #3a2a14;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.news-item:hover {
  transform: translateX(3px);
}

.news-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 60px;
  aspect-ratio: 56 / 16;
  padding-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  background: url(../images/s-news/tag-news-all.webp) center / 100% no-repeat;
}

.news-badge.badge-news {
  background-image: url(../images/s-news/tag-news.webp);
}

.news-badge.badge-promo {
  background-image: url(../images/s-news/tag-promotion.webp);
}

.news-badge.badge-event {
  background-image: url(../images/s-news/tag-ervent.webp);
}

.news-badge.badge-other {
  background-image: url(../images/s-news/btn-other.webp);
}

.news-item-content {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 5%;
  font-size: 12px;
  line-height: 1.2em;
  text-overflow: ellipsis;
}

.news-title {
  font-weight: 700;
  color: #3a2a14;
}

.news-subtitle {
  font-weight: 300;
  color: #5a4a34;
}

.news-date {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 400;
  color: #8a7a6a;
  white-space: nowrap;
}


/* ----- Read More Button ----- */
.btn-read-more {
  display: inline-block;
  width: 160px;
  aspect-ratio: 202 / 46;
  font-size: 20px;
  font-weight: 300;
  color: #fff;
  text-align: center;
  background: url(../images/s-news/btn-read-more.webp) center / cover no-repeat;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-read-more:hover {
  filter: brightness(1.2);
}


/* ----- News Responsive ----- */
@media (min-width: 768px) {
  .news-arrow {
    width: 71px;
    height: 71px;
  }

  .news-arrow-prev {
    left: -20px;
  }

  .news-arrow-next {
    right: -20px;
  }

  .event-arrow-prev {
    left: 350px;
  }

  .event-arrow-next {
    right: 350px;
  }

  .news-item {
    aspect-ratio: 777 / 73;
  }

  .news-item-content,
  .news-date {
    font-size: 14px;
  }

  .news-badge {
    width: 82px;
    aspect-ratio: 96 / 27;
    font-size: 14px;
  }
}

@media (min-width: 992px) {
  .news-arrow {
    width: 50px;
  }

  .news-arrow-prev {
    left: -30px;
  }

  .news-arrow-next {
    right: -30px;
  }
}

@media (min-width: 1200px) {
  .s-news {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }

  .s-news .container-fluid {
    width: 100%;
    max-width: 1600px;
  }

  .news-tab {
    flex: 1;
  }
}


/* =========================================
   3b. News — ตามดีไซน์ "ข่าวสาร (หน้าเดิม)" Desktop / iPad / Mobile
   (แก้เฉพาะการแสดงผล — ข้อมูลยังมาจาก feed เดิม)
   ========================================= */
.s-news .container-fluid {
  max-width: 390px;
  padding: 48px 16px 40px !important;
}

.s-news .news-title {
  margin-bottom: 0 !important;
}

.s-news .news-title-img {
  max-width: 330px;
}

.s-news .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  margin: 26px auto 0 !important;
}

.s-news .row > * {
  margin-top: 0 !important;
  padding: 0;
}

.s-news .row > :last-child {
  margin-top: 28px !important;
}

/* แบนเนอร์ */
.news-banner-wrapper .owl-carousel .owl-stage-outer {
  background-color: #1a1a1a;
}

.news-banner-wrapper .owl-carousel .item img {
  aspect-ratio: 1280 / 640; /* แบนเนอร์ข่าว 1280×640 (2:1) */
  object-fit: cover;
}

.news-banner-wrapper::before,
.news-banner-wrapper::after {
  width: 108px;
}

.news-banner-wrapper .owl-dots {
  margin-top: 12px !important;
  line-height: 0;
}

.news-banner-wrapper .owl-theme .owl-dots .owl-dot span {
  width: 20px;
  margin: 0 5px;
}

.s-news .news-arrow {
  top: calc(50% - 17px); /* กึ่งกลางแบนเนอร์ (หักพื้นที่จุดสไลด์ด้านล่าง) */
  width: 51px;
  height: 51px;
}

.s-news .news-arrow-prev { left: -8px; }
.s-news .news-arrow-next { right: -8px; }

/* แท็บหมวด */
.s-news .news-tabs {
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

.s-news .news-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 32px;
  aspect-ratio: auto;
  padding: 0 12px;
  font-size: 17px;
  font-family: inherit;
}

.s-news .news-tab p {
  margin: 0;
  line-height: 1;
}

/* รายการข่าว: 5 แถวเสมอ ความสูงคงที่ */
.s-news .news-list {
  --news-row-h: 37px;
  gap: 5px;
  height: calc(var(--news-row-h) * 5 + 20px);
}

.s-news .news-item {
  position: relative;
  box-sizing: border-box;
  height: var(--news-row-h);
  aspect-ratio: auto;
  padding: 3px 12px;
  background: url(../images/s-news/bg-news-list.webp) center / 100% 100% no-repeat;
}

.s-news .news-badge {
  width: 60px;
  height: 17px;
  aspect-ratio: auto;
  background-size: 100% 100%;
}

.s-news .news-item-content {
  min-width: 0;
  font-size: 12px;
}

.s-news .news-date {
  font-size: 10px;
}

/* แถวจางเติมให้ครบ 5 แถว */
.news-item-ghost {
  opacity: 0.32;
  pointer-events: none;
  filter: grayscale(0.4);
}

.news-item-ghost:hover {
  transform: none;
}

.news-ghost-badge,
.news-ghost-title,
.news-ghost-date {
  flex: none;
  border-radius: 5px;
  background-color: rgba(58, 42, 20, 0.2);
}

.news-ghost-badge {
  width: 60px;
  height: 13px;
  border-radius: 3px;
  background-color: rgba(58, 42, 20, 0.22);
}

.news-ghost-title {
  flex: 1;
  max-width: 170px;
  height: 8px;
}

.news-ghost-date {
  width: 52px;
  height: 8px;
  background-color: rgba(58, 42, 20, 0.16);
}

.news-item-ghost.is-blank {
  opacity: 0;
}

/* ยังไม่มีข่าว / โหลดไม่สำเร็จ / กำลังโหลด — วางทับแถวว่าง */
.s-news .news-list {
  position: relative;
}

.news-empty-box {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  text-align: center;
  isolation: isolate;
}

.news-empty-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(../images/s-news/bg-news-list.webp) center / cover no-repeat;
  opacity: 0.5;
}

.news-empty-box::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(58, 42, 20, 0.35);
  border-radius: 8px;
  pointer-events: none;
}

.news-empty-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #3a2a14;
}

.news-empty-text {
  margin: 0;
  font-size: 13px;
  color: #6b5a44;
}

.news-empty-btn {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  padding: 7px 18px;
  border: 1px solid #9b1c14;
  border-radius: 999px;
  background-color: rgba(155, 28, 20, 0.08);
  color: #8a1a12;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none; /* ปุ่มนี้เป็น <a> ได้ด้วย (เช่น "ดูข่าวทั้งหมด") */
  cursor: pointer;
  transition: filter 0.2s ease, background-color 0.2s ease;
}

.news-empty-btn:hover {
  background-color: rgba(155, 28, 20, 0.16);
}

.news-empty-btn:focus-visible,
.s-news .news-tab:focus-visible,
.s-news .news-item:focus-visible,
.s-news .btn-read-more:focus-visible {
  outline: 2px solid #9b1c14;
  outline-offset: 2px;
}

.s-news .news-list > .news-empty {
  margin: auto 0;
  color: #6b5a44 !important;
}

/* ปุ่มอ่านเพิ่มเติม */
.s-news .tab-content + div {
  margin-top: 20px !important;
  text-align: center !important;
}

.s-news .btn-read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 36px;
  aspect-ratio: auto;
  background-size: 100% 100%;
  text-decoration: none;
}

/* ----- iPad (768–1199): ซ้อนบน-ล่าง กว้าง 738 ----- */
@media (min-width: 768px) {
  .s-news .container-fluid {
    max-width: 834px;
    padding: 64px 48px 56px !important;
  }

  .s-news .news-title-img {
    max-width: 500px;
  }

  .s-news .row {
    max-width: 738px;
    margin-top: 40px !important;
  }

  .s-news .row > :last-child {
    margin-top: 36px !important;
  }

  .news-banner-wrapper::before,
  .news-banner-wrapper::after {
    width: 186px;
  }

  .s-news .news-arrow {
    width: 71px;
    height: 71px;
  }

  .s-news .news-arrow-prev { left: -20px; }
  .s-news .news-arrow-next { right: -20px; }

  .s-news .news-tab {
    height: 37px;
  }

  .s-news .news-list {
    --news-row-h: 69px;
  }

  .s-news .news-item {
    padding: 3px 18px;
  }

  .s-news .news-badge,
  .news-ghost-badge {
    width: 82px;
    height: 23px;
  }

  .news-ghost-badge {
    height: 18px;
  }

  .s-news .news-item-content {
    font-size: 15px;
  }

  .s-news .news-date {
    font-size: 14px;
  }

  .news-ghost-title {
    max-width: 360px;
    height: 10px;
  }

  .news-ghost-date {
    width: 70px;
    height: 10px;
  }

  .news-empty-title {
    font-size: 20px;
  }

  .news-empty-text {
    font-size: 15px;
  }
}

/* ----- Desktop (≥1200): แบนเนอร์ซ้าย 620 + รายการขวา ----- */
@media (min-width: 1200px) {
  .s-news .container-fluid {
    max-width: 1440px;
    padding: 40px 100px 60px !important;
  }

  .s-news .row {
    flex-wrap: nowrap;
    gap: 48px;
    max-width: 1240px;
    margin-top: 56px !important;
    align-items: flex-start;
  }

  .s-news .row > :first-child {
    flex: 0 0 620px;
    width: 620px;
    margin-top: 20px !important;
  }

  .s-news .row > :last-child {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin-top: 0 !important;
  }

  .s-news .news-tabs {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    margin-bottom: 16px !important;
  }

  .s-news .news-tab {
    flex: 1;
    width: auto;
    height: 44px;
    font-size: 19px;
  }

  .s-news .news-list {
    --news-row-h: 54px;
  }

  .s-news .news-item {
    padding: 3px 15px;
  }

  .news-ghost-title {
    max-width: 300px;
  }

  .s-news .tab-content + div {
    margin-top: 22px !important;
    text-align: right !important;
  }
}

/* ----- Desktop ยืดตามจอ → จอกว้าง 2560 (ตามดีไซน์ "ข่าวสาร – จอกว้าง 2560") -----
   คอนเทนต์กว้างได้ถึง 1600 แบ่งครึ่ง, แถวข่าวสูงตามสัดส่วน,
   ภาพพื้นหลังกว้างไม่เกิน 1920 แล้วจางขอบซ้ายขวาเข้ากับสีพื้น */
@media (min-width: 1200px) {
  .s-news.bg-section3 {
    height: clamp(900px, 40vw, 1100px);
    min-height: 100vh;
    background: linear-gradient(90deg, #a0b3bb 0%, #b0bfc6 50%, #c0ccd2 100%);
  }

  .s-news::before {
    --f: clamp(0px, calc(100vw - 1920px), 260px);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 0;
    width: min(100%, 1920px);
    transform: translateX(-50%);
    background: url('../images/bg-section3.webp') center / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--f), #000 calc(100% - var(--f)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--f), #000 calc(100% - var(--f)), transparent 100%);
    pointer-events: none;
  }

  .s-news .container-fluid {
    max-width: none;
  }

  .s-news .news-title-img {
    width: clamp(500px, 26vw, 600px);
    max-width: none;
  }

  .s-news .row {
    width: min(1600px, calc(100% - 160px));
    max-width: none;
  }

  .s-news .row > :first-child {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .news-banner-wrapper::before,
  .news-banner-wrapper::after {
    width: 30%;
    max-width: 304px;
  }

  .s-news .news-arrow {
    top: calc(50% - 17px);
  }

  .s-news .news-list {
    height: auto;
  }

  .s-news .news-item {
    height: auto;
    aspect-ratio: 777 / 73;
  }
}


/* =========================================
   4. Milestone Detail Modal
   ========================================= */
.milestone-modal-content {
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(167, 0, 0, 0.18) 0%, rgba(167, 0, 0, 0) 60%),
    linear-gradient(180deg, #1a0a0a 0%, #0d0505 100%);
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 14px;
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(167, 0, 0, 0.3),
    0 20px 60px rgba(0, 0, 0, 0.8);
}

.milestone-modal-header {
  position: relative;
  padding: 18px 24px 16px;
  text-align: center;
  background: linear-gradient(180deg, #8b0000 0%, #5a0000 100%);
}

.milestone-modal-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f1c769 20%, #f1c769 80%, transparent);
}

.milestone-modal-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ----- รายการไอเทม ----- */
.milestone-modal-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(62vh, 540px);
  padding: 20px 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 169, 110, 0.4) transparent;
}

.milestone-modal-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.milestone-modal-item:hover {
  background: rgba(201, 169, 110, 0.07);
  border-color: rgba(201, 169, 110, 0.3);
}

.milestone-modal-item-img {
  width: 64px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(241, 199, 105, 0.35);
  border-radius: 8px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
}

.milestone-modal-item-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.milestone-modal-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  text-align: left;
}

.milestone-modal-item-info .item-name,
.milestone-modal-item-info .item-qty {
  font-size: 0.9rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.75);
}

.milestone-modal-item-info .item-name {
  /* ข้อความมาจาก src/config/milestones.ts (ป้าย + ชื่อ + คำอธิบาย) */
  word-break: break-word;
  overflow-wrap: anywhere;
}

.milestone-modal-item-info .item-qty {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}

.milestone-modal-item-info .item-name strong {
  font-weight: 700;
  color: #f1c769;
}

.milestone-modal-item-info .item-qty strong {
  font-weight: 700;
  color: #fff;
}

.milestone-modal-item-amount {
  justify-self: end;
  min-width: 96px;
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: #3a2a14;
  white-space: nowrap;
  background: linear-gradient(135deg, #f5e6c8 0%, #d4b88c 100%);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ----- Footer ----- */
.milestone-modal-footer {
  padding: 16px 24px 24px;
  text-align: center;
  border-top: 1px solid rgba(201, 169, 110, 0.15);
}

.milestone-modal-note {
  margin-bottom: 14px;
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
}


/* ----- Modal Close Button (ใช้ภาพปุ่มของโปรเจกต์) ----- */
.btn-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  aspect-ratio: 269 / 80;
  padding: 0 0 2px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #f5e6c8;
  background: url(../images/s-preregiser/btn-close.webp) center / 100% 100% no-repeat;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-modal-close:hover {
  color: #fff;
  filter: brightness(1.25) drop-shadow(0 0 6px rgba(241, 199, 105, 0.45));
  transform: scale(1.04);
}

.btn-modal-close:focus-visible {
  outline: 2px solid #f1c769;
  outline-offset: 3px;
}


/* ----- Modal Animation ----- */
#milestoneDetailModal .modal-dialog {
  max-width: 560px;
  padding: 0 12px;
}

#milestoneDetailModal.modal.fade .modal-dialog {
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

#milestoneDetailModal.modal.show .modal-dialog {
  transform: scale(1);
}


/* ----- Modal Responsive (Mobile) ----- */
@media (max-width: 575.98px) {
  .milestone-modal-title {
    font-size: 1.25rem;
  }

  .milestone-modal-body {
    padding: 16px;
  }

  .milestone-modal-item {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 8px 10px;
  }

  .milestone-modal-item-img {
    width: 48px;
  }

  .milestone-modal-item-info .item-name {
    font-size: 0.8rem;
  }

  .milestone-modal-item-info .item-qty {
    font-size: 0.72rem;
  }

  .milestone-modal-item-amount {
    min-width: 0;
    padding: 4px 10px;
    font-size: 0.68rem;
  }

  .btn-modal-close {
    width: 170px;
    font-size: 1.15rem;
  }
}


/* =========================================
   5. Character Section — Refined
   ========================================= */
/* --u = 1px ที่จอ 1440 แล้วย่อลงตามความกว้างจอ (สัดส่วนเดียวกับดีไซน์) */
.cr {
  --accent: #e86aa6;
  --u: min(1px, calc(100vw / 1440));
  position: relative;
  /* แยกชั้น z-index ไว้ใน section ไม่ให้ทับ Navbar */
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: #121111 url('../images/bg-section4.webp') center / cover no-repeat;
}

.cr-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18, 17, 17, 0) 0%, rgba(18, 17, 17, 0.25) 45%, rgba(18, 17, 17, 0.6) 100%);
  pointer-events: none;
}

.cr-inner {
  position: relative;
  max-width: 1440px;
  height: calc(900 * var(--u));
  margin: 0 auto;
}

.cr-title {
  position: absolute;
  z-index: 4;
  top: calc(34 * var(--u));
  left: 50%;
  margin: 0;
  line-height: 0;
  transform: translateX(-50%);
}

.cr-title img {
  display: block;
  width: max(200px, calc(330 * var(--u)));
  height: auto;
}

/* ----- ฝั่งซ้าย: ตัวละคร + ออร่า + แสงรัศมี + ละออง ----- */
.cr-stage {
  position: absolute;
  left: calc(40 * var(--u));
  bottom: calc(30 * var(--u));
  width: calc(720 * var(--u));
  height: calc(830 * var(--u));
}

.cr-aura {
  position: absolute;
  left: 11%;
  top: 17%;
  width: 78%;
  height: 72%;
  border-radius: 50%;
  background-color: var(--accent);
  opacity: 0.28;
  filter: blur(calc(120 * var(--u)));
  transition: background-color 1.2s ease;
  pointer-events: none;
}

.cr-rays {
  position: absolute;
  left: -11%;
  top: -5%;
  width: 125%;
  aspect-ratio: 1 / 1;
  opacity: 0.22;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 20%, transparent) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 68%);
          mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 68%);
  animation: cr-spin 60s linear infinite;
  pointer-events: none;
}

.cr-motes {
  position: absolute;
  left: 3%;
  top: 19%;
  width: 94%;
  height: 77%;
  pointer-events: none;
}

.cr-mote {
  position: absolute;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  opacity: 0;
  animation: cr-rise linear infinite;
  transition: background-color 1s ease, box-shadow 1s ease;
}

.cr-float {
  position: absolute;
  inset: 0;
  animation: cr-float 7s ease-in-out infinite;
}

.cr-figs {
  position: absolute;
  inset: 0;
}

.cr-fig {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 100%;
  margin: 0;
  aspect-ratio: 968 / 1240; /* ค่าจริงตั้งจาก JS ตามรูปแต่ละตัว */
  translate: -50% 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.cr-fig.is-on {
  opacity: 1;
  transition: opacity 0.4s ease 0.05s;
}

/* เปิดตัว: เฟดเข้า + เลื่อนจากซ้าย + ชัดขึ้นจากเบลอ */
.cr-cut {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(10px) brightness(1.4);
  transform: translateX(-48px) scale(1.04);
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.5s ease;
}

.cr-fig.is-on .cr-cut {
  opacity: 1;
  filter: none;
  transform: none;
  transition: opacity 0.8s ease 0.05s, filter 1s ease 0.05s, transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cr-fig-img,
.cr-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.55));
}

.cr-gl { visibility: hidden; }
.cr-fig.is-gl .cr-gl { visibility: visible; }
.cr-fig.is-gl .cr-fig-img { visibility: hidden; }

/* ----- เอฟเฟกต์เปิดตัว ----- */
.cr-fxl {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* ประกายแสงวิ่งตามอาวุธ */
.cr-glint,
.cr-slash {
  position: absolute;
  transform-origin: 0 50%;
  mix-blend-mode: screen;
}

.cr-glint {
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 45%, #fff 50%, rgba(255, 255, 255, 0.95) 55%, transparent);
  background-size: 35% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px var(--accent));
  animation: cr-glint 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* รอยฟัน: เส้นแสงพุ่งผ่านแล้วจางหาย */
.cr-slash {
  height: 6px;
  margin-top: -3px;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent 0%, #fff 30%, #fff 70%, transparent 100%);
  filter: drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 22px var(--accent));
  animation: cr-slash 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* คลื่นพลังขยายออก */
.cr-wave {
  position: absolute;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  box-shadow: 0 0 18px var(--accent), inset 0 0 18px var(--accent);
  opacity: 0;
  animation: cr-wave 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cr-wave.is-taiji {
  border-style: dashed;
  border-width: 3px;
  animation-name: cr-taiji;
  animation-duration: 2s;
}

/* อาวุธลับพุ่งออก */
.cr-dart {
  position: absolute;
  width: 46px;
  height: 2px;
  margin-top: -1px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, #fff 70%, var(--accent));
  filter: drop-shadow(0 0 6px var(--accent));
  opacity: 0;
  animation: cr-dart 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}

/* อนุภาค: กลีบดอก / ใบไม้ / ประกาย / สะเก็ดไฟ */
.cr-bit {
  position: absolute;
  background: var(--c);
  opacity: 0;
  animation: cr-bit 1.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cr-bit.is-petal { width: 12px; height: 8px; border-radius: 80% 0 80% 0; box-shadow: 0 0 6px rgba(255, 255, 255, 0.35); }
.cr-bit.is-leaf  { width: 16px; height: 6px; border-radius: 100% 0 100% 0; }
.cr-bit.is-spark { width: 4px; height: 4px; border-radius: 50%; box-shadow: 0 0 8px var(--c), 0 0 2px #fff; }
.cr-bit.is-ember { width: 5px; height: 5px; border-radius: 50%; box-shadow: 0 0 10px var(--c), 0 0 3px #fff; }
.cr-bit.is-rise  { animation-duration: 2.4s; animation-timing-function: cubic-bezier(0.3, 0.6, 0.5, 1); }

@keyframes cr-glint {
  0%   { background-position: -40% 0; opacity: 0; }
  15%  { opacity: 1; }
  100% { background-position: 140% 0; opacity: 0; }
}

@keyframes cr-slash {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  20%  { opacity: 1; }
  45%  { clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}

@keyframes cr-wave {
  0%   { opacity: 0.9; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(7); }
}

@keyframes cr-taiji {
  0%   { opacity: 0.9; transform: scale(0.4) rotate(0deg); }
  100% { opacity: 0; transform: scale(6.5) rotate(200deg); }
}

@keyframes cr-dart {
  0%   { opacity: 0; transform: rotate(var(--a)) translateX(0); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)); }
}

@keyframes cr-bit {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0) scale(calc(var(--s) * 0.4)); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(var(--s)); }
}

@keyframes cr-spin { to { transform: rotate(360deg); } }
@keyframes cr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes cr-rise {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  15%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--dx), -460px) scale(1.1); }
}
@keyframes cr-pulse {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.95); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

/* ----- ฝั่งขวา: ชื่อ + คำบรรยาย ----- */
.cr-infos {
  position: absolute;
  z-index: 4;
  left: calc(720 * var(--u));
  top: calc(200 * var(--u));
  width: calc(640 * var(--u));
  display: grid;
}

.cr-info {
  --accent: #e86aa6;
  grid-area: 1 / 1;
  pointer-events: none;
}

.cr-info.is-on {
  pointer-events: auto;
}

.cr-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  height: calc(84 * var(--u));
  min-height: 56px;
  padding-left: calc(70 * var(--u)); /* ชื่อสำนักตรงกับคำบรรยายด้านล่าง */
}

.cr-hdr {
  position: absolute;
  left: calc(-30 * var(--u));
  top: 50%;
  width: calc(660 * var(--u));
  height: calc(72 * var(--u));
  min-height: 48px;
  margin-top: max(-24px, calc(-36 * var(--u)));
  background: url('../images/s-character/bg-info-header.webp') center / 100% 100% no-repeat;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.25s ease;
}

.cr-info.is-on .cr-hdr {
  transform: none;
  opacity: 1;
  transition: transform 0.75s cubic-bezier(0.65, 0, 0.3, 1) 0.15s, opacity 0.3s ease 0.15s;
}

.cr-name {
  position: relative;
  margin: 0;
  font-family: "proxima-nova-thai", sans-serif;
  font-size: max(28px, calc(40 * var(--u)));
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.2s ease, transform 0.3s ease;
}

.cr-info.is-on .cr-name {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease 0.45s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}

.cr-ico {
  position: relative;
  width: max(40px, calc(54 * var(--u)));
  height: max(40px, calc(54 * var(--u)));
  object-fit: contain;
  filter: drop-shadow(0 0 12px var(--accent));
  opacity: 0;
  transform: scale(0.3) rotate(-120deg);
  transition: opacity 0.2s ease, transform 0.3s ease;
}

.cr-info.is-on .cr-ico {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease 0.6s, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s;
}

.cr-panel {
  position: relative;
  box-sizing: border-box;
  min-height: calc(250 * var(--u));
  margin-top: calc(4 * var(--u));
  padding: calc(44 * var(--u)) calc(60 * var(--u)) calc(36 * var(--u)) calc(70 * var(--u));
  background: url('../images/s-character/bg-character-info-col.webp') center / 100% 100% no-repeat;
  transform-origin: top center;
  opacity: 0;
  transform: translateY(16px) scaleY(0.92);
  transition: opacity 0.2s ease, transform 0.3s ease;
}

.cr-info.is-on .cr-panel {
  opacity: 0.96;
  transform: none;
  transition: opacity 0.6s ease 0.4s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}

.cr-desc {
  margin: 0;
  font-size: max(13px, calc(15 * var(--u)));
  line-height: 1.8;
  color: #ddd7cb;
  white-space: pre-line;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.3s ease;
}

.cr-info.is-on .cr-desc {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease 0.7s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.7s;
}

/* ----- แถบเลือกสำนักด้านล่าง ----- */
.cr-nav {
  position: absolute;
  z-index: 5;
  left: calc(140 * var(--u));
  right: calc(140 * var(--u));
  bottom: 0;
  height: calc(230 * var(--u));
}

.cr-nav::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-30 * var(--u));
  width: calc(1200 * var(--u));
  height: calc(224 * var(--u));
  transform: translateX(-50%);
  background: url('../images/s-character/bg-character-nav-wrappe.webp') center / 100% 100% no-repeat;
  opacity: 0.95;
}

.cr-nav-line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(140 * var(--u));
  height: calc(8 * var(--u));
  background: url('../images/s-character/character-nav-before.webp') center / 100% 100% no-repeat;
  opacity: 0.5;
}

.cr-nav-dot {
  position: absolute;
  top: calc(144 * var(--u) - 7px);
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 0 0 12px var(--accent), 0 0 28px var(--accent);
  transition: left 0.7s cubic-bezier(0.65, 0, 0.3, 1), background-color 0.7s ease, box-shadow 0.7s ease;
}

.cr-picks {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(18 * var(--u));
  display: flex;
  justify-content: center;
  gap: calc(22 * var(--u));
}

.cr-pick {
  position: relative;
  flex: none;
  width: calc(100 * var(--u));
  height: calc(125 * var(--u));
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  opacity: 0.62;
  filter: grayscale(0.65) brightness(0.85);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease, opacity 0.4s ease;
}

.cr-pick img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ตอนเลือก: แสงเรืองนุ่ม ๆ ด้านหลังปุ่ม (แทนกรอบเส้น) */
.cr-pick-ring {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 120%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent) 0%, color-mix(in srgb, var(--accent) 18%, transparent) 42%, transparent 70%);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.cr-pick:hover {
  opacity: 1;
  filter: none;
  transform: translateY(-8px) scale(1.05);
}

.cr-pick.is-on {
  opacity: 1;
  filter: drop-shadow(0 0 16px var(--accent));
  transform: translateY(calc(-14 * var(--u))) scale(1.12);
}

.cr-pick.is-on .cr-pick-ring {
  opacity: 0.85;
  transform: translate(-50%, -50%) scale(1);
  animation: cr-pulse 2.8s ease-in-out 0.6s infinite;
}

.cr-pick:focus-visible {
  outline: 2px solid #e2c78e;
  outline-offset: 3px;
}

.cr-await .cr-fig.is-on,
.cr-await .cr-info {
  opacity: 0;
}

/* ----- แถบเลือกแบบเรียงแถว: ปุ่มที่เลือกใหญ่สีเต็ม ปุ่มอื่นสีเทา มีเส้นเชื่อมกลางปุ่ม ----- */
.cr-nav-line {
  top: calc(18 * var(--u) + 76 * var(--u));
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45) 8%, rgba(255, 255, 255, 0.45) 92%, rgba(255, 255, 255, 0));
  opacity: 1;
}

.cr-nav-dot {
  display: none;
}

/* เว้นช่องให้พอกับปุ่มที่ขยาย ปุ่มอื่นจึงไม่ต้องขยับ */
.cr-picks {
  gap: calc(36 * var(--u));
}

.cr-pick {
  opacity: 0.9;
  filter: grayscale(1) brightness(0.78);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease, opacity 0.4s ease;
}

.cr-pick:hover {
  filter: grayscale(0.3) brightness(0.95);
  transform: translateY(-6px);
}

.cr-pick.is-on {
  opacity: 1;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.6));
  transform: scale(1.34);
}

.cr-pick-ring {
  display: none;
}

/* ----- ส่วนที่ใช้เฉพาะ iPad / มือถือ (ซ่อนบนเดสก์ท็อป) ----- */
.cr-count,
.cr-arrow,
.cr-label {
  display: none;
}

/* =====================================================
   iPad — ตามดีไซน์ "ตัวละคร 6 – iPad C3 · ไม่มีกรอบ" (834 × 1130)
   --t = 1px ที่จอ 834
   ===================================================== */
@media (max-width: 991.98px) {
  .cr {
    --t: calc(100vw / 834);
    background: #121111;
  }

  /* พื้นหลังเบลอจาง + ไล่มืดรอบตัวละคร */
  .cr::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/bg-section4.webp') 30% center / cover no-repeat;
    opacity: 0.45;
    filter: blur(3px);
  }

  .cr-shade {
    background: radial-gradient(ellipse at 50% 32%, rgba(18, 17, 17, 0.15) 0%, rgba(18, 17, 17, 0.8) 55%, rgba(18, 17, 17, 0.96) 85%);
  }

  .cr-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: calc(28 * var(--t)) 0 calc(60 * var(--t));
  }

  .cr-title {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }

  .cr-title img {
    width: calc(290 * var(--t));
  }

  /* หน้าต่างตัวละคร: กว้างเต็มจอ เห็นครึ่งตัวบน จางทั้งขอบบน (ไม่เห็นรอยต่อสี) และด้านล่าง */
  .cr-stage {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    height: calc(610 * var(--t));
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 4%, #000 10%, #000 52%, rgba(0, 0, 0, 0.55) 75%, rgba(0, 0, 0, 0.15) 90%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 4%, #000 10%, #000 52%, rgba(0, 0, 0, 0.55) 75%, rgba(0, 0, 0, 0.15) 90%, transparent 100%);
  }

  .cr-aura {
    left: 50%;
    top: calc(74 * var(--t));
    width: calc(640 * var(--t));
    height: calc(520 * var(--t));
    margin-left: calc(-320 * var(--t));
    opacity: 0.22;
    filter: blur(calc(120 * var(--t)));
  }

  .cr-rays {
    left: 50%;
    top: calc(-68 * var(--t));
    width: calc(900 * var(--t));
    margin-left: calc(-450 * var(--t));
    opacity: 0.25;
  }

  .cr-motes {
    left: 10%;
    top: 20%;
    width: 80%;
    height: 80%;
  }

  .cr-float {
    inset: auto;
    left: 50%;
    top: calc(20 * var(--t));
    width: calc(780 * var(--t));
    height: calc(1040 * var(--t));
    margin-left: calc(-390 * var(--t));
  }

  .cr-fig {
    top: 0;
    bottom: auto;
  }

  .cr-fig-img,
  .cr-gl {
    object-position: center top;
  }

  /* ตัวเลข 01 / 08 + ปุ่มลูกศร */
  .cr-count {
    display: block;
    position: absolute;
    z-index: 5;
    right: calc(36 * var(--t));
    top: calc(120 * var(--t));
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(226, 199, 142, 0.4);
    background-color: rgba(10, 10, 10, 0.6);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
  }

  .cr-count b {
    color: #e2c78e;
    font-weight: 700;
  }

  .cr-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 6;
    top: calc(375 * var(--t));
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(226, 199, 142, 0.55);
    background-color: rgba(10, 10, 10, 0.55);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .cr-arrow.is-prev { left: calc(36 * var(--t)); }
  .cr-arrow.is-next { right: calc(36 * var(--t)); }
  .cr-arrow:hover { background-color: rgba(155, 28, 20, 0.85); }
  .cr-arrow:active { transform: scale(0.94); }
  .cr-arrow:focus-visible { outline: 2px solid #e2c78e; outline-offset: 3px; }

  /* ชื่อ + คำบรรยาย (ซ้อนทับช่วงล่างของตัวละครเล็กน้อย) */
  .cr-infos {
    position: relative;
    z-index: 5;
    left: auto;
    top: auto;
    width: calc(738 * var(--t));
    margin-top: calc(-52 * var(--t));
  }

  .cr-head {
    flex-direction: row-reverse;
    justify-content: center;
    gap: 12px;
    height: calc(74 * var(--t));
    min-height: 56px;
    padding-left: 0;
  }

  .cr-hdr {
    left: 50%;
    width: calc(560 * var(--t));
    height: calc(60 * var(--t));
    min-height: 0;
    margin: calc(-30 * var(--t)) 0 0 calc(-280 * var(--t));
  }

  .cr-name {
    font-size: calc(38 * var(--t));
    font-weight: 700;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
  }

  .cr-ico {
    width: calc(54 * var(--t));
    height: calc(54 * var(--t));
  }

  .cr-panel {
    min-height: calc(168 * var(--t));
    margin-top: calc(8 * var(--t));
    padding: calc(28 * var(--t)) calc(60 * var(--t)) calc(24 * var(--t));
  }

  .cr-info.is-on .cr-panel {
    opacity: 0.94;
  }

  .cr-desc {
    font-size: max(13px, calc(15 * var(--t)));
    line-height: 1.75;
    color: #e6e0d4;
    text-align: center;
  }

  /* แถบเลือกสำนัก */
  .cr-nav {
    position: relative;
    left: auto;
    right: auto;
    width: calc(786 * var(--t));
    height: auto;
    margin-top: calc(16 * var(--t));
  }

  .cr-nav::before,
  .cr-nav-dot {
    display: none;
  }

  .cr-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 calc(36 * var(--t)) calc(14 * var(--t));
    font-size: 13px;
    letter-spacing: 4px;
    color: #e2c78e;
  }

  .cr-label span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(226, 199, 142, 0), rgba(226, 199, 142, 0.5));
  }

  .cr-label span:last-child {
    background: linear-gradient(90deg, rgba(226, 199, 142, 0.5), rgba(226, 199, 142, 0));
  }

  /* เส้นตกแต่งใต้ปุ่ม */
  .cr-nav-line {
    top: auto;
    bottom: calc(-10 * var(--t) - 7px);
    left: calc(24 * var(--t));
    right: calc(24 * var(--t));
    height: 7px;
    background: url('../images/s-character/character-nav-before.webp') center / 100% 100% no-repeat;
    opacity: 0.5;
  }

  .cr-picks {
    position: relative;
    top: auto;
    display: flex;
    justify-content: center;
    gap: calc(8 * var(--t));
  }

  .cr-pick {
    width: calc(88 * var(--t));
    height: calc(110 * var(--t));
  }

  .cr-pick.is-on {
    transform: translateY(-6px) scale(1.08);
  }
}

/* =====================================================
   มือถือ — ตามดีไซน์ "ตัวละคร 6 – Mobile C3 · ไม่มีกรอบ" (390 × 880)
   --t = 1px ที่จอ 390
   ===================================================== */
@media (max-width: 575.98px) {
  .cr {
    /* ไม่ให้ขยายเกินไปบนมือถือจอใหญ่ */
    --t: min(calc(100vw / 390), 1.2px);
  }

  .cr::before {
    background-position: 28% center;
  }

  .cr-shade {
    background: radial-gradient(ellipse at 50% 28%, rgba(18, 17, 17, 0.15) 0%, rgba(18, 17, 17, 0.8) 55%, rgba(18, 17, 17, 0.96) 85%);
  }

  .cr-inner {
    padding: calc(22 * var(--t)) 0 calc(28 * var(--t));
  }

  .cr-title img {
    width: calc(236 * var(--t));
  }

  .cr-stage {
    height: calc(320 * var(--t));
  }

  .cr-aura {
    top: calc(20 * var(--t));
    width: calc(300 * var(--t));
    height: calc(240 * var(--t));
    margin-left: calc(-150 * var(--t));
    opacity: 0.26;
    filter: blur(calc(80 * var(--t)));
  }

  .cr-rays {
    top: calc(-76 * var(--t));
    width: calc(440 * var(--t));
    margin-left: calc(-220 * var(--t));
  }

  .cr-float {
    top: calc(10 * var(--t));
    width: calc(400 * var(--t));
    height: calc(534 * var(--t));
    margin-left: calc(-200 * var(--t));
  }

  .cr-count {
    right: calc(14 * var(--t));
    top: calc(90 * var(--t));
    padding: 4px 10px;
    font-size: 12px;
  }

  .cr-arrow {
    top: calc(206 * var(--t));
    width: 44px;
    height: 44px;
  }

  .cr-arrow svg {
    width: 20px;
    height: 20px;
  }

  .cr-arrow.is-prev { left: calc(10 * var(--t)); }
  .cr-arrow.is-next { right: calc(10 * var(--t)); }

  /* ความสูงตามคำบรรยายของสำนักที่เลือก (ไม่เผื่อตามข้อความที่ยาวสุด) */
  .cr-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .cr-info.is-on {
    position: relative;
  }

  .cr-infos {
    width: calc(366 * var(--t));
    margin-top: calc(-54 * var(--t));
  }

  .cr-head {
    gap: 10px;
    height: calc(58 * var(--t));
    min-height: 0;
  }

  .cr-hdr {
    width: calc(360 * var(--t));
    height: calc(46 * var(--t));
    margin: calc(-23 * var(--t)) 0 0 calc(-180 * var(--t));
  }

  .cr-name {
    font-size: calc(26 * var(--t));
  }

  .cr-ico {
    width: calc(40 * var(--t));
    height: calc(40 * var(--t));
  }

  .cr-panel {
    min-height: 0;
    margin-top: calc(6 * var(--t));
    padding: calc(28 * var(--t)) calc(30 * var(--t)) calc(32 * var(--t));
  }

  .cr-desc {
    font-size: 13px;
    line-height: 1.7;
    white-space: normal;
  }

  .cr-nav {
    width: calc(358 * var(--t));
    margin-top: calc(12 * var(--t));
  }

  .cr-label {
    gap: 12px;
    margin: 0 calc(8 * var(--t)) calc(14 * var(--t));
    font-size: 12px;
  }

  .cr-nav-line {
    display: none;
  }

  .cr-picks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: calc(10 * var(--t));
    justify-items: center;
  }

  .cr-pick {
    width: calc(78 * var(--t));
    height: calc(98 * var(--t));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cr-rays,
  .cr-float,
  .cr-mote,
  .cr-pick-ring,
  .cr-fig,
  .cr-cut,
  .cr-hdr,
  .cr-name,
  .cr-ico,
  .cr-panel,
  .cr-desc,
  .cr-pick,
  .cr-nav-dot {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================
   6. Social Section
   ========================================= */
.s-social {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.bg-section5 {
  background: url('../images/bg-section5.webp') center / cover no-repeat;
}

.social-title {
  width: 100%;
  max-width: 1000px;
  margin: auto;
}

.social-title-img {
  width: 100%;
  margin-top: 2rem;
}

.social-subtitle-text {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #dbd2c3;
  background: linear-gradient(180deg, #FFF 0%, #BD8945 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.box-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 900px;
  aspect-ratio: 521 / 121;
  margin: -35px auto 0;
  padding: 15px 40px 0;
  background: url('../images/s-social/bg-subtitle.webp') center bottom / 100% no-repeat;
}

.box-subtitle .social-cta-text {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: #D4D4D4;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.social-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 90%;
  padding: 15px 40px;
  font-size: 1.2rem;
  color: #D4D4D4;
  background: url('../images/s-social/bg-subtitle.webp') center / 100% 100% no-repeat;
}


/* ----- Social Buttons ----- */
.social-btn {
  color: #fff;
  text-align: center;
  transition: transform 0.3s ease;
}

.social-btn:hover {
  color: #f1c769;
  transform: translateY(-5px);
}

.social-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 75px;
  margin: 0 auto;
  border-radius: 50%;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.social-icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.social-btn:hover .social-icon-wrapper {
  filter: brightness(1.2);
  transform: scale(1.05);
}

.social-label {
  font-size: 1rem;
}


/* ----- Social Responsive ----- */
@media (min-width: 768px) {
  .social-subtitle-text {
    font-size: 44px;
  }

  .box-subtitle {
    max-width: 900px;
    aspect-ratio: 945 / 148;
    margin: -15px auto 0;
    padding: 15px 40px 35px;
    background: url('../images/s-social/bg-subtitle.webp') center bottom / 900px no-repeat;
  }

  .box-subtitle .social-cta-text {
    font-size: 1.8rem;
  }

  .social-icon-wrapper {
    width: 142px;
    height: 142px;
  }

  .social-label {
    font-size: 1.3rem;
  }
}


/* =========================================
   7. Animations
   ========================================= */
.game-seo-content {
  width: 100%;
  margin: 0;
  color: #d1cabb;
  background: transparent;
  border-top: 1px solid rgba(190, 151, 82, 0.25);
  border-bottom: 1px solid rgba(190, 151, 82, 0.25);
  font-size: 0.9rem;
}

.game-seo-content summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.75rem 0;
  color: #c6a563;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  list-style: none;
  transition: color 180ms ease;
}

.game-seo-content summary:hover,
.game-seo-content summary:focus-visible {
  color: #f0d18f;
}

.game-seo-content summary:focus-visible {
  outline: 1px solid rgba(190, 151, 82, 0.65);
  outline-offset: 3px;
}

.game-seo-content summary::-webkit-details-marker {
  display: none;
}

.game-seo-content summary::after {
  content: none;
}

.game-seo-summary-rule {
  position: relative;
  flex: 1 1 auto;
  min-width: 0.75rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190, 151, 82, 0.55));
}

.game-seo-summary-rule.is-before {
  background: linear-gradient(90deg, transparent, rgba(190, 151, 82, 0.55));
}

.game-seo-summary-rule.is-after {
  background: linear-gradient(90deg, rgba(190, 151, 82, 0.55), transparent);
}

.game-seo-summary-rule.is-before::after,
.game-seo-summary-rule.is-after::before {
  position: absolute;
  top: 50%;
  color: #c6a563;
  font-size: 0.72rem;
  line-height: 1;
  transform: translateY(-50%);
}

.game-seo-summary-rule.is-before::after {
  content: "◇";
  right: -0.3rem;
}

.game-seo-summary-rule.is-after::before {
  content: "◇";
  left: -0.3rem;
}

.game-seo-summary-label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.game-seo-summary-toggle {
  display: inline-block;
  min-width: 0.6em;
  margin-left: 0.45rem;
  color: #927747;
  font-weight: 300;
  transition: transform 180ms ease, color 180ms ease;
}

.game-seo-summary-toggle::before {
  content: "+";
}

.game-seo-content[open] {
  padding: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.46)),
    url("../images/bg-seo-information.png");
  background-position: center 58%;
  background-size: cover;
  background-repeat: no-repeat;
}

.game-seo-content[open] .game-seo-summary-toggle {
  color: #d3b477;
  transform: rotate(180deg);
}

.game-seo-content[open] .game-seo-summary-toggle::before {
  content: "−";
}

.game-seo-content-inner {
  max-width: 1050px;
  margin: 0 auto;
  padding: 0.15rem 0 1rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.game-seo-block + .game-seo-block {
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid rgba(190, 151, 82, 0.32);
}

.game-seo-content h2 {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin: 0 0 0.45rem;
  color: #d6b774;
  font-size: clamp(1.12rem, 2.2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.4;
}

.game-seo-content h2::before {
  content: "❖";
  flex: 0 0 auto;
  color: #b99653;
  font-size: 0.7em;
}

.game-seo-content h3 {
  margin: 0 0 0.35rem;
  color: #eee9df;
  font-size: clamp(1rem, 2vw, 1.12rem);
  font-weight: 600;
  line-height: 1.45;
}

.game-seo-content p {
  margin: 0;
  color: #c4beb3;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.6;
}

.game-seo-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 0.6rem;
}

.game-seo-feature {
  padding: 0.55rem 1.25rem 0.55rem 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.game-seo-feature + .game-seo-feature {
  padding-right: 0;
  padding-left: 1.65rem;
  border-left: 1px solid rgba(190, 151, 82, 0.4);
}

.game-seo-sect-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.game-seo-sect-list li {
  padding: 0 1rem;
  color: #d7c18e;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 0.88rem;
  line-height: 1.8;
  white-space: nowrap;
}

.game-seo-sect-list li:first-child {
  padding-left: 0;
}

.game-seo-sect-list li + li {
  border-left: 1px solid rgba(190, 151, 82, 0.42);
}

.game-seo-content[open] ~ footer {
  margin-top: 0;
  padding-top: 1rem;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .game-seo-summary-toggle {
    transition: none;
  }
}

@media (max-width: 575.98px) {
  .game-seo-content {
    width: 100%;
    font-size: 0.85rem;
  }

  .game-seo-content summary {
    gap: 0.45rem;
    padding: 0.65rem 0;
    font-size: 0.8rem;
  }

  .game-seo-summary-label {
    white-space: normal;
  }

  .game-seo-content-inner {
    padding-bottom: 0.75rem;
  }

  .game-seo-block {
    padding: 0.8rem 0;
  }

  .game-seo-block + .game-seo-block {
    padding-top: 0.8rem;
  }

  .game-seo-features {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .game-seo-feature {
    padding: 0.35rem 0;
  }

  .game-seo-feature + .game-seo-feature {
    padding: 0.65rem 0 0.35rem;
    border-top: 1px solid rgba(190, 151, 82, 0.2);
    border-left: 0;
  }

  .game-seo-sect-list {
    row-gap: 0.15rem;
  }

  .game-seo-sect-list li {
    padding: 0 0.55rem;
  }

  .game-seo-sect-list li:first-child {
    padding-left: 0;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes pulse-subtle {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.03);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@keyframes shine-text {
  to {
    background-position: 200% center;
  }
}


/* =========================================
   Milestone Animations
   (JS เติมคลาส .is-inview / .is-next / .is-next-step)
   ========================================= */

/* ----- 1) การ์ดค่อย ๆ ลอยขึ้นทีละใบเมื่อเลื่อนมาถึง ----- */
.milestone-container .milestone-item {
  opacity: 0;
  translate: 0 30px;
}

.milestone-container.is-inview .milestone-item {
  animation: ms-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--rise-delay, 0s) both;
}

.milestone-item:nth-child(1) { --rise-delay: 0.05s; }
.milestone-item:nth-child(2) { --rise-delay: 0.15s; }
.milestone-item:nth-child(3) { --rise-delay: 0.25s; }
.milestone-item:nth-child(4) { --rise-delay: 0.35s; }
.milestone-item:nth-child(5) { --rise-delay: 0.45s; }

@keyframes ms-rise {
  from { opacity: 0; translate: 0 30px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ----- 2) ไอเทมลอยขึ้นลงเบา ๆ ----- */
.milestone-item .item-img {
  animation: ms-float 3.2s ease-in-out infinite;
}

.milestone-item:nth-child(2) .item-img { animation-delay: -0.6s; }
.milestone-item:nth-child(3) .item-img { animation-delay: -1.2s; }
.milestone-item:nth-child(4) .item-img { animation-delay: -1.8s; }
.milestone-item:nth-child(5) .item-img { animation-delay: -2.4s; }

@keyframes ms-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -5px; }
}

/* ----- 3) แสงเรืองหลังการ์ดที่สำเร็จ "หายใจ" ----- */
.milestone-container.is-inview .milestone-item.succeed::before {
  animation: ms-breathe 3s ease-in-out infinite;
}

@keyframes ms-breathe {
  0%, 100% { opacity: 0.55; scale: 1; }
  50%      { opacity: 1;    scale: 1.08; }
}

/* ----- 4) แสงวิ้งกวาดผ่านการ์ด (มาสก์ตามรูปทรงการ์ด) ----- */
.milestone-item.succeed::after,
.milestone-item:last-child::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg,
      transparent 35%,
      rgba(255, 255, 255, 0.05) 42%,
      rgba(255, 240, 200, 0.45) 50%,
      rgba(255, 255, 255, 0.05) 58%,
      transparent 65%);
  background-size: 300% 100%;
  background-position: 150% 0;
  mix-blend-mode: screen;
  -webkit-mask: url(../images/s-hero/milestone-done.webp) center / 110% no-repeat;
          mask: url(../images/s-hero/milestone-done.webp) center / 110% no-repeat;
}

.milestone-item:last-child::after {
  background-image: linear-gradient(115deg,
      transparent 35%,
      rgba(255, 255, 255, 0.1) 42%,
      rgba(255, 255, 255, 0.75) 50%,
      rgba(255, 255, 255, 0.1) 58%,
      transparent 65%);
  mix-blend-mode: overlay;
  -webkit-mask-image: url(../images/s-hero/milestone-rare.webp);
          mask-image: url(../images/s-hero/milestone-rare.webp);
}

.milestone-container.is-inview .milestone-item.succeed::after {
  animation: ms-shine 10s ease-in-out infinite;
}

.milestone-container.is-inview .milestone-item.succeed:nth-child(2)::after { animation-delay: 3.3s; }
.milestone-container.is-inview .milestone-item.succeed:nth-child(3)::after { animation-delay: 6.6s; }
.milestone-container.is-inview .milestone-item.succeed:nth-child(4)::after { animation-delay: 1.6s; }

/* การ์ดรางวัลใหญ่ วิ้งถี่กว่าใบอื่นเล็กน้อย */
.milestone-container.is-inview .milestone-item:last-child::after {
  animation: ms-shine 7s ease-in-out 2s infinite;
}

@keyframes ms-shine {
  /* กวาดผ่านช่วงต้น แล้วพักยาวจนครบรอบ */
  0%        { background-position: 150% 0; }
  22%, 100% { background-position: -50% 0; }
}

/* ----- 5) การ์ดรางวัลใหญ่: ประกายทองลอยขึ้น ----- */
.ms-spark {
  position: absolute;
  bottom: 18%;
  z-index: 3;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #fff3c4 40%, rgba(255, 220, 130, 0) 72%);
  box-shadow:
    0 0 6px 2px rgba(255, 255, 255, 0.9),
    0 0 14px 4px rgba(255, 170, 40, 0.7);
  opacity: 0;
  pointer-events: none;
  animation: ms-spark 3.6s ease-in infinite;
}

@keyframes ms-spark {
  0%   { opacity: 0; translate: 0 0;      scale: 0.4; }
  15%  { opacity: 1; }
  70%  { opacity: 0.9; }
  100% { opacity: 0; translate: var(--dx, 0px) -170px; scale: 1; }
}

/* ----- 6) การ์ดเป้าหมายถัดไป: เรืองแสงทองรอบขอบการ์ด (ตามรูปทรง) ----- */
@property --ms-pulse {
  syntax: "<length>";
  inherits: false;
  initial-value: 4px;
}

.milestone-item.is-next {
  filter: drop-shadow(0 0 var(--ms-pulse) rgba(241, 199, 105, 0.8));
}

.milestone-container.is-inview .milestone-item.is-next {
  animation:
    ms-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--rise-delay, 0s) both,
    ms-next-pulse 2.2s ease-in-out 1.2s infinite;
}

.milestone-item.is-next:hover {
  filter:
    brightness(1.08)
    drop-shadow(0 0 calc(var(--ms-pulse) + 4px) rgba(241, 199, 105, 0.9))
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
}

@keyframes ms-next-pulse {
  0%, 100% { --ms-pulse: 2px; }
  50%      { --ms-pulse: 10px; }
}

/* ----- 7) เส้น Progress: วิ่งเติมตอนเห็น + แสงไหลตามเส้น ----- */
.milestone-container:not(.is-inview) .progress-line-fill {
  width: 0 !important;
}

.progress-line-fill {
  position: relative;
  overflow: visible;
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
}

.progress-line-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 100%);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: ms-flow 2.2s linear infinite;
}

@keyframes ms-flow {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}

/* ----- 8) ไอคอน step: เด้งขึ้นตามลำดับ + วงแหวนชี้เป้าถัดไป ----- */
.milestone-container.is-inview .step-icon {
  animation: ms-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.milestone-container.is-inview .step1 { animation-delay: 0.7s; }
.milestone-container.is-inview .step2 { animation-delay: 0.9s; }
.milestone-container.is-inview .step3 { animation-delay: 1.1s; }
.milestone-container.is-inview .step4 { animation-delay: 1.3s; }
.milestone-container.is-inview .step5 { animation-delay: 1.5s; }

@keyframes ms-pop {
  from { opacity: 0; scale: 0.3; }
  to   { opacity: 1; scale: 1; }
}

.step-icon.is-next-step::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(241, 199, 105, 0.9);
  border-radius: 50%;
  pointer-events: none;
  animation: ms-ring 1.8s ease-out infinite;
}

@keyframes ms-ring {
  0%   { opacity: 0.9; scale: 0.8; }
  100% { opacity: 0;   scale: 1.7; }
}

/* ----- ปิดแอนิเมชันสำหรับผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว ----- */
@media (prefers-reduced-motion: reduce) {
  .milestone-container .milestone-item,
  .milestone-container .step-icon {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }

  .milestone-container *,
  .milestone-container *::before,
  .milestone-container *::after {
    animation: none !important;
  }

  .ms-spark {
    display: none;
  }
}


/* =========================================
   Scroll Cue (เส้นคั่นท้าย Hero + ลูกศรชวนเลื่อนลง)
   ========================================= */
.scroll-cue {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  max-width: 400px;
  padding-bottom: 6px;
  text-decoration: none;
}

.scroll-cue-line {
  position: relative;
  width: 100%;
  transition: filter 0.3s ease;
  animation: cue-nudge 3.6s ease-in-out infinite;
}

/* ลูกศรสีขาว 3 ชั้นไล่กันลงมา */
.scroll-cue-arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2px;
}

.scroll-cue-arrows i {
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -5px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  rotate: 45deg;
  opacity: 0;
  animation: cue-arrow 3s ease-in-out infinite;
}

.scroll-cue-arrows i:nth-child(2) { animation-delay: 0.35s; }
.scroll-cue-arrows i:nth-child(3) { animation-delay: 0.7s; }

.scroll-cue:hover .scroll-cue-line,
.scroll-cue:focus-visible .scroll-cue-line {
  filter: brightness(1.3);
}

.scroll-cue:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 6px;
}

@keyframes cue-nudge {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 3px; }
}

@keyframes cue-arrow {
  0%   { opacity: 0; translate: 0 -6px; }
  40%  { opacity: 1; }
  80%  { opacity: 0; translate: 0 6px; }
  100% { opacity: 0; translate: 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue-line,
  .scroll-cue-arrows i {
    animation: none;
  }

  .scroll-cue-arrows i {
    opacity: 0.8;
  }
}


/* =========================================
   Hero atmosphere FX (canvas ทับภาพนิ่ง bg-section1)
   ========================================= */
.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-fx {
    display: none;
  }
}

/* Portrait art is composed for phone screens; iPad keeps its own layouts. */
@media (max-width: 767.98px) {
  .s-hero.bg-section1 {
    /* ภาพแนวตั้งสำหรับมือถือ + เฟดสีเข้มเฉพาะด้านล่าง ให้อ่านข้อความออก */
    background-image: linear-gradient(180deg, rgba(8, 12, 20, 0) 0%, rgba(8, 12, 20, 0) 45%, rgba(8, 12, 20, 0.7) 68%, rgba(8, 12, 20, 0.92) 100%), url('../images/bg-section1-mobile.webp?v=3');
    background-position: center top;
    background-size: cover;
  }
}

@media (min-width: 768px) and (max-width: 1366px) {
  .s-hero.bg-section1 {
    background-image: url('../images/bg-section1.webp'); /* iPad แนวนอนใช้ภาพแนวกว้างหลัก */
    background-position: center top;
    background-size: cover;
  }
}

@media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
  .s-hero.bg-section1 {
    /* ภาพ 3:4 สำหรับ iPad แนวตั้ง + เฟดสีเข้มเฉพาะด้านล่าง */
    background-image: linear-gradient(180deg, rgba(8, 12, 20, 0) 0%, rgba(8, 12, 20, 0) 45%, rgba(8, 12, 20, 0.7) 68%, rgba(8, 12, 20, 0.92) 100%), url('../images/bg-section1-ipad-portrait.webp?v=2');
  }
}


/* =========================================
   Event Slider: smooth animation
   (จอ ≥1200px: JS คำนวณ scale/เบลอ ต่อเนื่องทุกเฟรมแบบ coverflow)
   ========================================= */
.event-carousel-slider .owl-item {
  will-change: scale, opacity;
  backface-visibility: hidden;
  border-radius: 12px;
}

.event-carousel-slider .owl-item img {
  border-radius: 12px;
}

/* จอ 992–1199 (iPad แนวนอน / โน้ตบุ๊กเล็ก): ให้เหมือนดีไซน์เดสก์ท็อป
   แบนเนอร์ใบกลางขนาดพอดีพื้นขาวของกรอบ มุมมน มีเงา และมีตัวละครด้านขวา */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .event-carousel {
    top: -2%;
    width: 52%;
  }

  /* ตัดใบที่กำลังเลื่อนเข้า/ออก ไม่ให้ทะลุออกนอกพื้นที่แบนเนอร์ */
  .event-carousel-slider .owl-stage-outer {
    padding: 6% 0 7%;
    overflow: hidden;
  }

  .event-carousel-slider .owl-item {
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  .event-carousel-slider .owl-item.active {
    opacity: 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
    overflow: hidden;
  }

  .event-carousel-slider.owl-theme .owl-dots {
    margin-top: 1.5% !important;
  }

  /* ลูกศรวางชิดขอบแบนเนอร์ (แบนเนอร์กว้าง 52% ของกรอบ อยู่กลาง) */
  .event-carousel-wrapper .event-arrow-prev,
  .event-carousel-wrapper .event-arrow-next {
    top: 44%;
    z-index: 30;
    width: 44px;
    height: 44px;
  }

  .event-carousel-wrapper .event-arrow-prev { left: 25%; }
  .event-carousel-wrapper .event-arrow-next { right: 25%; }

  .event-character {
    right: -12%;
    width: 46%;
  }
}

/* จอ < 1200px แสดงทีละใบ: ไม่ย่อ ไม่เบลอ */
@media (max-width: 1199.98px) {
  .event-carousel-slider .owl-item.active,
  .event-carousel-slider .owl-item.active.center {
    scale: 1;
    opacity: 1;
    filter: none;
    box-shadow: none;
  }
}

/* จุดสไลด์: วงกลมเล็ก -> แคปซูลสีทองเมื่อ active */
.event-carousel-slider.owl-theme .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 5px 4px;
  background: rgba(60, 50, 40, 0.25);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.5s ease;
}

.event-carousel-slider.owl-theme .owl-dots .owl-dot:hover span {
  background: rgba(60, 50, 40, 0.45);
}

.event-carousel-slider.owl-theme .owl-dots .owl-dot.active span {
  width: 30px;
  background: linear-gradient(90deg, #b8862f, #f1c769, #b8862f);
}

@media (prefers-reduced-motion: reduce) {
  .event-carousel-slider.owl-theme .owl-dots .owl-dot span {
    transition: none;
  }
}


/* =========================================
   7. Feature Section (ระบบเด่น) — Cinematic Showcase
   ========================================= */
.fb {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background-color: #0a0a0a;
}

/* ภาพใหญ่ฝั่งขวา: เฟดสลับ + ซูมช้า ๆ */
.fb-scenes {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 76%;
  /* ภาพซูม (scale 1.08) ตอนสลับ ห้ามล้นออกนอกกรอบ */
  overflow: hidden;
  /* ขอบซ้ายของภาพค่อย ๆ จางหาย ไม่เห็นรอยต่อ */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.06) 8%, rgba(0, 0, 0, 0.2) 16%, rgba(0, 0, 0, 0.45) 25%, rgba(0, 0, 0, 0.72) 34%, rgba(0, 0, 0, 0.9) 42%, #000 50%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.06) 8%, rgba(0, 0, 0, 0.2) 16%, rgba(0, 0, 0, 0.45) 25%, rgba(0, 0, 0, 0.72) 34%, rgba(0, 0, 0, 0.9) 42%, #000 50%);
}

.fb-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* จอกว้างภาพถูกครอปบน-ล่างเยอะ ยึดช่วงบน (หน้าตัวละคร) ไว้ไม่ให้หัวขาด */
  object-position: 60% 18%;
  opacity: 0;
  transform: scale(1.08);
  transform-origin: 60% 18%;
  transition: opacity 0.9s ease, transform 6s cubic-bezier(0.22, 1, 0.36, 1);
}

.fb-scene.is-on {
  opacity: 1;
  transform: scale(1);
}

.fb-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 10, 10, 0.96) 0%, rgba(10, 10, 10, 0.85) 34%, rgba(10, 10, 10, 0.15) 70%, rgba(10, 10, 10, 0.35) 100%);
  pointer-events: none;
}

.fb-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(0deg, #0a0a0a 0%, rgba(10, 10, 10, 0) 100%);
  pointer-events: none;
}

.fb-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  max-width: 1440px;
  min-height: clamp(760px, 62.5vw, 900px);
  margin: 0 auto;
  padding: clamp(48px, 5vw, 72px) clamp(20px, 8.3vw, 120px) clamp(40px, 4.2vw, 60px);
}

/* ----- แถวบน ----- */
.fb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.fb-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fb-eyebrow {
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 6px;
  color: #e2c78e;
  text-transform: uppercase;
}

.fb-line {
  width: 40px;
  height: 1px;
  background-color: rgba(226, 199, 142, 0.6);
}

.fb-title-img {
  display: block;
  width: clamp(160px, 15vw, 214px);
  height: auto;
}

.fb-seal {
  display: block;
  width: clamp(26px, 2.4vw, 34px);
  height: auto;
  transform: rotate(4deg);
}

.fb-arrows {
  display: flex;
  gap: 12px;
}

.fb-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.fb-arrow:hover {
  border-color: #9b1c14;
  background-color: #9b1c14;
}

.fb-arrow:focus-visible,
.fb-tab:focus-visible,
.fb-shot:focus-visible,
.fb-lb-btn:focus-visible {
  outline: 2px solid #e2c78e;
  outline-offset: 3px;
}

/* ----- ข้อมูลระบบ ----- */
.fb-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
}

.fb-info.is-in > * {
  animation: fb-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fb-info.is-in > :nth-child(2) { animation-delay: 0.06s; }
.fb-info.is-in > :nth-child(3) { animation-delay: 0.12s; }
.fb-info.is-in > :nth-child(4) { animation-delay: 0.18s; }
.fb-info.is-in > :nth-child(5) { animation-delay: 0.24s; }

.fb-meta {
  display: flex;
  align-items: center;
  gap: 22px;
}

.fb-icon {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: clamp(80px, 7.2vw, 104px);
  aspect-ratio: 1 / 1;
}

.fb-glow {
  position: absolute;
  inset: -24px;
  background: radial-gradient(circle, rgba(226, 199, 142, 0.35) 0%, rgba(226, 199, 142, 0) 66%);
}

.fb-icon img {
  position: relative;
  width: 96%;
  height: 96%;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6));
}

.fb-count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: inherit;
}

.fb-no {
  font-size: clamp(36px, 3.3vw, 48px);
  font-weight: 600;
  line-height: 1;
  color: #e2c78e;
}

.fb-total {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5);
}

.fb-name {
  margin: 0;
  font-family: inherit;
  font-size: clamp(38px, 4.4vw, 64px);
  font-weight: 600;
  line-height: 1.08;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.fb-bar {
  width: 88px;
  height: 3px;
  background-color: #b8241a;
}

.fb-desc {
  max-width: 520px;
  margin: 0;
  /* เงาเข้มรอบตัวอักษร อ่านได้แม้อยู่บนส่วนสว่างของภาพ */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.75), 0 0 18px rgba(0, 0, 0, 0.6);
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.7;
  color: #e0dbd1;
}

/* ภาพในเกม */
.fb-gal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.fb-gal[hidden] {
  display: none;
}

.fb-gal-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: inherit;
  font-size: 14px;
  color: #c9c3b8;
}

.fb-gal-label span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fb-gal-label small {
  font-size: 12px;
  color: #8d877d;
}

.fb-shots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fb-shot {
  position: relative;
  width: 136px;
  height: 76px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  color: #fff;
  background-color: #1f1f1f;
  cursor: zoom-in;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.fb-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fb-shot:hover {
  border-color: rgba(226, 199, 142, 0.6);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
  transform: translateY(-4px);
}

.fb-shot-n {
  position: absolute;
  left: 7px;
  top: 5px;
  font-family: inherit;
  font-size: 11px;
  text-shadow: 0 1px 3px #000;
}

.fb-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.25);
  opacity: 0.7;
  transition: opacity 0.25s ease;
}

.fb-shot:hover .fb-zoom {
  opacity: 1;
}

/* ----- แถบเลือกระบบด้านล่าง ----- */
.fb-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.fb-tab {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border: 0;
  color: #fff;
  text-align: left;
  font-family: inherit;
  background-color: transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.fb-tab:hover {
  opacity: 1;
  transform: translateY(-4px);
}

.fb-tab.is-on {
  opacity: 1;
}

.fb-tab-bar {
  position: relative;
  width: 100%;
  height: 3px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.18);
}

.fb-tab-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #b8241a;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.fb-tab.is-on .fb-tab-bar::after {
  transform: scaleX(1);
}

.fb-tab-img {
  position: relative;
  width: 100%;
  aspect-ratio: 186 / 108;
  overflow: hidden;
  border-radius: 4px;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color 0.3s ease;
}

.fb-tab.is-on .fb-tab-img {
  outline-color: #e2c78e;
}

.fb-tab-img > img:first-child {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.fb-tab:hover .fb-tab-img > img:first-child {
  transform: scale(1.06);
}

.fb-tab-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 30%, rgba(10, 10, 10, 0.75) 100%);
}

.fb-tab-ico {
  position: absolute;
  left: 8px;
  bottom: 6px;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

/* ----- แถบเลือกระบบ (เดสก์ท็อป): วงกลมตราสัญลักษณ์ + วงแหวนหมุน ----- */
.fb .fb-tabs {
  position: relative;
  gap: 16px;
  padding-top: 6px;
}

.fb .fb-tabs::before {
  content: "";
  position: absolute;
  left: 60px;
  right: 60px;
  top: 58px;
  height: 1px;
  background: linear-gradient(90deg, rgba(226, 199, 142, 0), rgba(226, 199, 142, 0.45), rgba(226, 199, 142, 0));
  pointer-events: none;
}

.fb .fb-tab {
  align-items: center;
  gap: 12px;
  opacity: 1;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fb .fb-tab:hover {
  transform: translateY(-5px);
}

.fb .fb-tab-bar,
.fb .fb-tab-img {
  display: none;
}

.fb-tab-emb {
  position: relative;
  display: block;
  width: clamp(80px, 7.2vw, 104px);
  aspect-ratio: 1 / 1;
}

.fb-tab-ring {
  position: absolute;
  inset: -12px;
  border: 1px dashed rgba(226, 199, 142, 0.55);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.fb-tab.is-on .fb-tab-ring {
  opacity: 1;
  transform: none;
  animation: fb-spin 18s linear infinite;
}

@keyframes fb-spin {
  to { transform: rotate(360deg); }
}

.fb .fb-tab-disc {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(226, 199, 142, 0.3);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #2a201b 0%, #0f0b0a 75%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fb .fb-tab.is-on .fb-tab-disc {
  border: 2px solid #e2c78e;
  transform: scale(1.1);
  box-shadow: 0 0 0 6px rgba(226, 199, 142, 0.14), 0 0 40px rgba(226, 199, 142, 0.4), 0 14px 30px rgba(0, 0, 0, 0.6);
}

.fb .fb-tab-disc img {
  width: 83%;
  height: 83%;
  object-fit: contain;
  opacity: 0.6;
  filter: grayscale(0.6);
  transition: opacity 0.4s ease, filter 0.4s ease;
}

.fb .fb-tab:hover .fb-tab-disc img,
.fb .fb-tab.is-on .fb-tab-disc img {
  opacity: 1;
  filter: none;
}

.fb .fb-tab-txt {
  justify-content: center;
}

.fb .fb-tab-no {
  color: #c5a75f;
}

.fb .fb-tab-name {
  color: #a9a49b;
  font-weight: 500;
  transition: color 0.3s ease;
}

.fb .fb-tab.is-on .fb-tab-name {
  color: #fff;
}

.fb-tab-dot {
  display: block;
  width: 8px;
  height: 8px;
  background-color: #b8241a;
  opacity: 0;
  transform: scale(0.3) rotate(45deg);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fb-tab.is-on .fb-tab-dot {
  opacity: 1;
  transform: scale(1) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .fb-tab.is-on .fb-tab-ring {
    animation: none;
  }
}

.fb-tab-txt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: inherit;
}

.fb-tab-no {
  font-size: 13px;
  color: #c9c3b8;
}

.fb-tab.is-on .fb-tab-no {
  color: #e2c78e;
}

.fb-tab-name {
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fb-tab.is-on .fb-tab-name {
  font-weight: 500;
}

/* ----- Lightbox ----- */
html.fb-lock {
  overflow: hidden;
}

.fb-lb {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
  background-color: rgba(6, 6, 6, 0.94);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.fb-lb[hidden] {
  display: none;
}

.fb-lb.is-open {
  opacity: 1;
}

.fb-lb-backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: zoom-out;
}

.fb-lb-top,
.fb-lb-mid,
.fb-lb-thumbs {
  position: relative;
}

.fb-lb-top,
.fb-lb-mid {
  display: flex;
  align-items: center;
  width: min(1120px, 100%);
}

.fb-lb-top {
  justify-content: space-between;
}

.fb-lb-mid {
  gap: 20px;
}

.fb-lb-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: inherit;
  font-size: 22px;
  font-weight: 500;
}

.fb-lb-title img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.fb-lb-n {
  font-size: 15px;
  font-weight: 400;
  color: #a9a49b;
}

.fb-lb-img {
  flex: 1;
  min-width: 0;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 220px);
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background-color: #111;
}

.fb-lb-img.is-in {
  animation: fb-zoomin 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fb-lb-btn {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.fb-lb-btn:hover {
  background-color: #9b1c14;
}

.fb-lb-thumbs {
  display: flex;
  gap: 10px;
}

.fb-lb-thumbs button {
  width: 96px;
  height: 54px;
  padding: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background-color: #1f1f1f;
  cursor: pointer;
}

.fb-lb-thumbs button.is-on {
  border-color: #e2c78e;
}

.fb-lb-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes fb-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fb-zoomin {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* ----- จอกว้าง (≥1921px (ใหญ่กว่า 1920)): แบบ B · จอกว้าง 2560 -----
   ภาพคงสัดส่วนจริง (ไม่ครอปหัว) ยึดขอบขวาของเนื้อหา 1440 แล้วจางทั้งสองข้าง */
.fb-backdrop {
  display: none;
}

@media (min-width: 1921px) {
  .fb-wrap {
    min-height: clamp(900px, 40vw, 1040px);
  }

  /* พื้นหลังเต็มจอ: ภาพเดียวกับฉากปัจจุบัน ขยาย + เบลอ + หรี่ ภาพคมวางทับแล้วจางขอบเข้าหา */
  .fb-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .fb-bd {
    position: absolute;
    inset: -60px;
    background-position: center 30%;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(36px) brightness(0.55) saturate(1.1);
    opacity: 0;
    transition: opacity 0.9s ease;
  }

  .fb-bd.is-on {
    opacity: 1;
  }

  /* ภาพฉากกว้างสุดเท่าจอ 1920 (76% × 1920) ชิดขอบขวาของกรอบ 1920 กลางจอ
     ขอบซ้าย-ขวาจางเข้าหาพื้นหลังเบลอ ไม่เห็นรอยตัด */
  .fb-scenes {
    right: calc(50% - 960px);
    width: 1459px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.06) 8%, rgba(0, 0, 0, 0.2) 16%, rgba(0, 0, 0, 0.45) 25%, rgba(0, 0, 0, 0.72) 34%, rgba(0, 0, 0, 0.9) 42%, #000 50%, #000 62%, rgba(0, 0, 0, 0.9) 69%, rgba(0, 0, 0, 0.72) 76%, rgba(0, 0, 0, 0.45) 83%, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0.06) 95%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.06) 8%, rgba(0, 0, 0, 0.2) 16%, rgba(0, 0, 0, 0.45) 25%, rgba(0, 0, 0, 0.72) 34%, rgba(0, 0, 0, 0.9) 42%, #000 50%, #000 62%, rgba(0, 0, 0, 0.9) 69%, rgba(0, 0, 0, 0.72) 76%, rgba(0, 0, 0, 0.45) 83%, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0.06) 95%, transparent 100%);
  }

  /* ฝั่งขวานอกภาพ: ไล่มืดลงจนดำเข้ากับพื้น ไม่เห็นภาพเบลอสีอ่อน */
  .fb-scrim {
    background:
      linear-gradient(90deg, rgba(10, 10, 10, 0) calc(50% + 360px), rgba(10, 10, 10, 0.35) calc(50% + 620px), rgba(10, 10, 10, 0.75) calc(50% + 860px), rgba(10, 10, 10, 0.95) calc(50% + 1040px), #0a0a0a 100%),
      linear-gradient(90deg, rgba(10, 10, 10, 0.96) 0%, rgba(10, 10, 10, 0.85) 34%, rgba(10, 10, 10, 0.15) 70%, rgba(10, 10, 10, 0.35) 100%);
  }
}

/* ภาพ 02 / 06 ตัวละครอยู่ต่ำในรูป → เลื่อนกรอบลง ให้ตัวละครขึ้นมากลางจอ (เดสก์ท็อป) */
@media (min-width: 992px) {
  .fb-scene-02,
  .fb-scene-06 {
    object-position: 60% 58%;
    transform-origin: 60% 58%;
  }
}

/* ----- iPad / มือถือ: Full-bleed + Emblem ----- */
@media (max-width: 991.98px) {
  .fb {
    --fb-img-top: 18vw;
    --fb-img-h: 74vw;
  }

  .fb-scenes {
    top: var(--fb-img-top);
    left: 0;
    bottom: auto;
    width: 100%;
    height: var(--fb-img-h);
    -webkit-mask-image: none;
            mask-image: none;
  }

  .fb-scene {
    object-position: 60% 40%;
  }

  .fb-scrim {
    top: var(--fb-img-top);
    bottom: auto;
    height: var(--fb-img-h);
    background: linear-gradient(180deg, #0a0a0a 0%, rgba(10, 10, 10, 0.35) 14%, rgba(10, 10, 10, 0.08) 34%, rgba(10, 10, 10, 0.7) 72%, #0a0a0a 100%);
  }

  .fb-fade {
    display: none;
  }

  .fb-wrap {
    justify-content: flex-start;
    gap: 0;
    min-height: 0;
    padding: 44px 48px 56px;
  }

  .fb-top {
    justify-content: center;
  }

  .fb-brand {
    display: grid;
    grid-template-columns: auto auto;
    align-items: start;
    justify-content: center;
    gap: 2px 10px;
  }

  .fb-eyebrow {
    grid-column: 1 / -1;
    letter-spacing: 8px;
    text-align: center;
  }

  .fb-line,
  .fb-arrows {
    display: none;
  }

  .fb-title-img {
    width: clamp(214px, 34vw, 285px);
  }

  .fb-seal {
    width: clamp(32px, 5vw, 42px);
  }

  .fb-info {
    position: relative;
    isolation: isolate;
    gap: 14px;
    max-width: none;
    margin-top: 31vw;
  }

  /* แผ่นเงาจาง ๆ หลังข้อความ (ภาพเต็มจอ ข้อความทับภาพตรง ๆ) */
  .fb-info::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -24px -48px -16px;
    background: radial-gradient(120% 90% at 0% 50%, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.5) 45%, rgba(10, 10, 10, 0) 80%);
    pointer-events: none;
  }

  .fb-info > * {
    position: relative;
  }

  .fb-meta {
    gap: 16px;
  }

  .fb-icon {
    width: 104px;
  }

  .fb-glow {
    display: none;
  }

  .fb-count {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .fb-count::after {
    content: "";
    width: 64px;
    height: 3px;
    background-color: #b8241a;
  }

  .fb-no {
    font-size: 40px;
    font-weight: 700;
  }

  .fb-no + .fb-total {
    margin-top: -32px;
    margin-left: 56px;
    font-size: 17px;
  }

  .fb-bar {
    display: none;
  }

  .fb-name {
    font-size: 54px;
    font-weight: 700;
    line-height: 1.12;
    white-space: nowrap;
  }

  .fb-desc {
    min-height: 3.5em;
    max-width: 640px;
    font-size: 19px;
    line-height: 1.75;
  }

  .fb-gal {
    margin-top: 8px;
  }

  .fb-gal-label {
    display: none;
  }

  .fb-shots {
    flex-wrap: nowrap;
    gap: 12px;
  }

  .fb-shot {
    flex: none;
    width: 158px;
    height: 89px;
    border-color: rgba(255, 255, 255, 0.18);
    border-radius: 6px;
  }

  .fb-shot-n {
    display: none;
  }

  .fb-zoom {
    inset: auto 6px 6px auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(10, 10, 10, 0.6);
    opacity: 1;
  }

  .fb-zoom svg {
    width: 14px;
    height: 14px;
  }

  /* แถบเลือกระบบ = วงกลมตราสัญลักษณ์ */
  .fb-tabs {
    position: relative;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    margin: 48px -16px 0;
  }

  .fb-tabs::before {
    content: "";
    position: absolute;
    left: 40px;
    right: 40px;
    top: 46px;
    height: 1px;
    background: linear-gradient(90deg, rgba(226, 199, 142, 0), rgba(226, 199, 142, 0.35), rgba(226, 199, 142, 0));
  }

  .fb-tab {
    position: relative;
    align-items: center;
    gap: 10px;
    opacity: 1;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .fb-tab:hover {
    transform: translateY(-4px);
  }

  .fb-tab:active {
    transform: scale(0.95);
  }

  .fb-tab-bar,
  .fb-tab-img,
  .fb-tab-no {
    display: none;
  }

  .fb-tab-emb {
    width: 92px;
  }

  .fb-tab-ring {
    display: none;
  }

  .fb .fb-tab.is-on .fb-tab-disc {
    transform: none;
  }

  .fb-tab-disc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border: 1px solid rgba(226, 199, 142, 0.25);
    border-radius: 50%;
    background-color: rgba(20, 16, 14, 0.7);
    transition: border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
  }

  .fb-tab.is-on .fb-tab-disc {
    border-color: #e2c78e;
    background-color: rgba(60, 20, 14, 0.85);
    box-shadow: 0 0 0 5px rgba(226, 199, 142, 0.16), 0 0 30px rgba(226, 199, 142, 0.35);
  }

  .fb-tab-disc img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    opacity: 0.6;
    filter: grayscale(0.5);
    transform: scale(0.92);
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .fb-tab.is-on .fb-tab-disc img,
  .fb-tab:hover .fb-tab-disc img {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .fb-tab-txt {
    justify-content: center;
    height: 40px;
  }

  .fb-tab-name,
  .fb-tab.is-on .fb-tab-name {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    color: #a9a49b;
    transition: color 0.3s ease;
  }

  .fb-tab.is-on .fb-tab-name {
    color: #fff;
  }

  .fb-tab-dot {
    display: block;
    width: 8px;
    height: 8px;
    background-color: #b8241a;
    opacity: 0;
    transform: scale(0.3) rotate(45deg);
    transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .fb-tab.is-on .fb-tab-dot {
    opacity: 1;
    transform: scale(1) rotate(45deg);
  }

  .fb-lb-mid {
    gap: 8px;
  }

  .fb-lb-btn {
    width: 44px;
    height: 44px;
  }

  .fb-lb-title {
    font-size: 17px;
  }
}

/* มือถือ */
@media (max-width: 575.98px) {
  .fb {
    --fb-img-top: 28.7vw;
    --fb-img-h: 120vw;
  }

  .fb-wrap {
    padding: 30px 16px 48px;
  }

  .fb-eyebrow {
    font-size: 12px;
    letter-spacing: 6px;
  }

  .fb-title-img {
    width: 214px;
  }

  .fb-seal {
    width: 32px;
  }

  .fb-info {
    gap: 10px;
    margin-top: 49vw;
  }

  .fb-meta {
    gap: 12px;
  }

  .fb-icon {
    width: 76px;
  }

  .fb-no {
    font-size: 30px;
  }

  .fb-no + .fb-total {
    margin-top: -24px;
    margin-left: 44px;
    font-size: 14px;
  }

  .fb-count::after {
    width: 48px;
  }

  .fb-name {
    font-size: 30px;
    line-height: 1.15;
  }

  .fb-desc {
    min-height: 5.1em;
    font-size: 15px;
    line-height: 1.7;
  }

  .fb-shots {
    gap: 8px;
    margin-right: -16px;
    padding-right: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .fb-shots::-webkit-scrollbar {
    display: none;
  }

  .fb-shot {
    width: 124px;
    height: 70px;
  }

  .fb-zoom {
    width: 22px;
    height: 22px;
  }

  .fb-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 14px;
    column-gap: 6px;
    margin: 40px 0 0;
  }

  .fb-tabs::before {
    display: none;
  }

  .fb-tab {
    gap: 7px;
  }

  .fb-tab-emb {
    width: 78px;
  }

  .fb-tab-disc {
    width: 78px;
    height: 78px;
  }

  .fb-tab.is-on .fb-tab-disc {
    box-shadow: 0 0 0 4px rgba(226, 199, 142, 0.16), 0 0 24px rgba(226, 199, 142, 0.35);
  }

  .fb-tab-txt {
    height: 34px;
  }

  .fb-tab-name,
  .fb-tab.is-on .fb-tab-name {
    font-size: 13px;
  }

  .fb-tab-dot {
    width: 7px;
    height: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fb-scene,
  .fb-tab,
  .fb-tab-bar::after,
  .fb-tab-img > img:first-child,
  .fb-shot,
  .fb-lb {
    transition: none !important;
  }

  .fb-info.is-in > *,
  .fb-lb-img.is-in {
    animation: none !important;
  }
}

/* =========================================
   หัวข้อ Section (ข่าวสาร / กิจกรรม / ตัวละคร) ขนาดเท่ากันทุกหน้า
   อ้างอิงขนาดจากหัวข้อข่าวสาร: มือถือ 330 · iPad 500 · Desktop 500–600
   ========================================= */
.s-news .news-title-img,
.s-event .event-title-img,
.s-character .cr-title img {
  width: 330px;
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .s-news .news-title-img,
  .s-event .event-title-img,
  .s-character .cr-title img {
    width: 500px;
  }
}

@media (min-width: 1200px) {
  .s-news .news-title-img,
  .s-event .event-title-img,
  .s-character .cr-title img {
    width: clamp(500px, 26vw, 600px);
  }
}

/* =========================================
   จอใหญ่ (≥1200): ทุก Section สูงเต็มจอ เนื้อหาอยู่กลางแนวตั้ง
   พื้นหลังเต็มทั้งความกว้าง-ความสูง (เหมือน Section ข่าวสาร)
   ========================================= */
@media (min-width: 1200px) {
  .s-event,
  .s-character,
  .s-feature {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* เต็มพื้นที่ใต้ Navbar พอดี (ตอนเลื่อนทีละ Section หัวไม่ถูกบัง ล่างไม่ล้นจอ) */
    min-height: calc(100vh - 70px);
  }

  .s-event > .container-fluid {
    width: 100%;
  }

  /* ตัวละคร: ฉากหลังเต็มจอ เนื้อหา 1440 อยู่กลาง */
  .cr {
    background-size: cover;
    background-position: center;
  }

  /* เนื้อหาสูงเต็ม Section: ตัวละคร + แถบเลือกสำนักชิดด้านล่าง เว้นระยะเหมือน Section ระบบเด่น */
  .cr-inner {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: calc(900 * var(--u));
  }

  .cr {
    --cr-nav-gap: clamp(20px, 2vw, 36px);
  }

  /* ตัวละครขยายตามความสูงที่เพิ่มขึ้นของจอ (จอ 900 = ขนาดดีไซน์เดิม) */
  .cr-stage {
    bottom: calc(var(--cr-nav-gap) + 30 * var(--u));
    width: auto;
    height: calc(830 * var(--u) + var(--cr-extra));
    aspect-ratio: 720 / 830;
  }

  .cr-nav {
    bottom: var(--cr-nav-gap);
  }

  /* หัวข้อ + ชื่อสำนัก + คำบรรยาย: ขยับลงเป็นกลุ่มให้อยู่กึ่งกลางแนวตั้ง
     (ความสูงที่เกินจากดีไซน์ 900 แบ่งครึ่งไปไว้ด้านบน) */
  .cr-inner {
    --cr-extra: max(0px, (100% - 900 * var(--u) - var(--cr-nav-gap)) / 2);
  }

  .cr-title {
    top: calc(34 * var(--u) + var(--cr-extra));
  }

  .cr-infos {
    top: calc(200 * var(--u) + var(--cr-extra));
  }

  /* พื้นหลังหลังปุ่ม: ยืดลงจนสุดขอบล่าง Section แล้วจางหาย ไม่เห็นขอบตัด */
  .cr-nav::before {
    bottom: calc(-1 * var(--cr-nav-gap) - 30 * var(--u));
    height: calc(224 * var(--u) + var(--cr-nav-gap));
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  }

  /* ระบบเด่น: เนื้อหาเต็มความสูง */
  .fb-wrap {
    width: 100%;
    min-height: calc(100vh - 70px);
    padding-bottom: clamp(48px, 4.5vw, 80px);  /* เมนูด้านล่างไม่ชิดขอบจอ */
  }
}

/* ----- ข่าว: จอกว้าง (≥1921) ใช้ภาพพื้นหลังแบบกว้างเต็มจอ ----- */
@media (min-width: 1921px) {
  .s-news.bg-section3 {
    background: #c4ced3;
  }

  .s-news::before {
    width: 100%;
    background: url('../images/s-news/bg-news-wide.webp') center / cover no-repeat;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* =========================================
   เมนูมือถือ — ดีไซน์ "Navbar มือถือ – A6 · การ์ดลอยกระจก" (แสดงเฉพาะ < 768px)
   ========================================= */
@media (max-width: 767.98px) {
  .custom-navbar {
    height: 64px;
    background: linear-gradient(180deg, #22201e, #141211);
    border-bottom: 1px solid rgba(226, 199, 142, 0.18);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  }

  .custom-navbar > .container {
    align-items: center;
    padding: 0 14px;
  }

  .nav-logo {
    height: 46px;
  }

  .navbar-right {
    align-items: center;
    gap: 8px !important;
  }

  /* มือถือโชว์แค่ REGISTER ตามดีไซน์ (LOGIN ยังอยู่บน iPad/เดสก์ท็อป) */
  .navbar-right .btn-login {
    display: none;
  }

  .navbar-right .nav-btn {
    width: 118px;
    height: 38px;
    aspect-ratio: auto;
    font-size: 13px;
    background-size: 100% 100%;
  }
}

.nav-toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid rgba(226, 199, 142, 0.4);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.nav-toggle:hover {
  background-color: rgba(226, 199, 142, 0.12);
  border-color: #e2c78e;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #e2c78e;
  stroke-width: 2;
  stroke-linecap: round;
}

.nav-toggle .nav-toggle-close,
.nav-toggle.is-open .nav-toggle-open {
  display: none;
}

.nav-toggle.is-open .nav-toggle-close {
  display: block;
  width: 20px;
  height: 20px;
}

.nav-toggle:focus-visible,
.nav-drawer a:focus-visible {
  outline: 2px solid #e2c78e;
  outline-offset: 2px;
}

/* ชั้นเมนู: พื้นหลังเบลอ + การ์ดลอยมุมขวาบน */
.nav-drawer {
  position: fixed;
  z-index: 1029;
  inset: 64px 0 0 0;
}

.nav-drawer[hidden] {
  display: none !important;
}

.nav-drawer-scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(8, 6, 5, 0.45);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-drawer.is-open .nav-drawer-scrim {
  opacity: 1;
}

.nav-drawer-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  width: min(286px, calc(100vw - 24px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(226, 199, 142, 0.3);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(40, 32, 28, 0.82), rgba(20, 16, 14, 0.88));
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1), transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-drawer.is-open .nav-drawer-panel {
  opacity: 1;
  transform: none;
}

/* ติ่งชี้ไปที่ปุ่มเมนู */
.nav-drawer-notch {
  position: absolute;
  top: -7px;
  right: 26px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  border-top: 1px solid rgba(226, 199, 142, 0.3);
  border-left: 1px solid rgba(226, 199, 142, 0.3);
  background-color: rgba(40, 32, 28, 0.95);
}

.nav-drawer-label {
  margin: 0;
  padding: 4px 6px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #8d857a;
}

.nav-drawer-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 14px;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.nav-drawer-item:hover {
  color: #fff;
  background-color: rgba(226, 199, 142, 0.07);
}

.nav-drawer-no {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background-color: rgba(226, 199, 142, 0.08);
  color: #e2c78e;
  font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.nav-drawer-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-drawer-text .en {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
}

.nav-drawer-text .th {
  font-size: 11px;
  line-height: 1.3;
  color: #a99f92;
}

.nav-drawer-arrow {
  margin-left: auto;
  font-size: 18px;
  color: #5e554b;
}

/* หน้าที่เปิดอยู่: แถบแดงขอบทอง */
.nav-drawer-item.active {
  background: linear-gradient(90deg, #a81f16, #6e120c);
  box-shadow: 0 10px 24px rgba(110, 18, 12, 0.45), inset 0 0 0 1px rgba(245, 217, 138, 0.5);
}

.nav-drawer-item.active .nav-drawer-no {
  background-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.nav-drawer-item.active .th {
  color: #f5d98a;
}

.nav-drawer-item.active .nav-drawer-arrow {
  color: #fff;
}

/* รายการค่อย ๆ ขึ้นทีละอัน */
.nav-drawer-list > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-drawer.is-open .nav-drawer-list > * {
  opacity: 1;
  transform: none;
}

.nav-drawer.is-open .nav-drawer-list > :nth-child(2) { transition-delay: 0.05s; }
.nav-drawer.is-open .nav-drawer-list > :nth-child(3) { transition-delay: 0.1s; }

.nav-drawer-social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(226, 199, 142, 0.14);
}

.nav-drawer-sc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(226, 199, 142, 0.35);
  border-radius: 50%;
  color: #e2c78e;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.nav-drawer-sc:hover {
  color: #e2c78e;
  background-color: rgba(226, 199, 142, 0.12);
  border-color: #e2c78e;
}

.nav-drawer-sc svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-drawer-sc svg .is-fill {
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer-scrim,
  .nav-drawer-panel,
  .nav-drawer-list > *,
  .nav-toggle {
    transition: none;
  }
}

/* =========================================
   มือถือ (< 576): Section ระบบเด่น + ตัวละคร พอดี 1 หน้าจอ
   --avail = ความสูงจอที่เห็นได้ ลบ navbar 64px
   ========================================= */
@media (max-width: 575.98px) {
  .fb,
  .cr {
    --avail: calc(100vh - 64px);
    --avail: calc(100svh - 64px);
  }

  /* ----- ระบบเด่น ----- */
  /* เต็มความสูงจอ: หัวข้อชิดบน, ข้อความ + แถบเลือกชิดล่าง, ภาพอยู่ตรงกลาง */
  .fb-wrap {
    min-height: var(--avail);
    padding: 32px 16px 36px;
  }

  .fb-top {
    margin-bottom: 130px;
  }

  .fb-title-img {
    width: 190px;
  }

  .fb-seal {
    width: 28px;
  }

  /* ภาพตัวละครเต็มกว้าง ใต้หัวข้อ ถึงเหนือแถบเลือกระบบ */
  .fb-scenes,
  .fb-scrim {
    top: 90px;
    bottom: 100px;
    height: auto;
  }

  /* ข้อความชิดล่าง ทับช่วงล่างของภาพ */
  /* ภาพไม่สูงเกิน: เว้นที่ให้ภาพช่วงบนแค่พอเห็นตัวละคร แล้วต่อด้วยข้อความ */
  .fb-info {
    gap: 8px;
    margin-top: auto;
  }

  .fb-icon {
    width: 56px;
  }

  .fb-no {
    font-size: 26px;
  }

  .fb-no + .fb-total {
    margin-top: -21px;
    margin-left: 38px;
    font-size: 13px;
  }

  .fb-name {
    font-size: 26px;
  }

  .fb-desc {
    min-height: 0;
    font-size: 14px;
    line-height: 1.6;
  }

  .fb-gal {
    margin-top: 2px;
  }

  .fb-shot {
    width: 104px;
    height: 58px;
  }

  /* แถบเลือกระบบ: แถวเดียว 6 ตรา (ชื่อระบบแสดงอยู่ด้านบนแล้ว) */
  .fb-tabs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 0;
    column-gap: 4px;
    margin: 20px 0 0;
  }

  .fb-tab {
    gap: 6px;
  }

  .fb-tab-emb,
  .fb-tab-disc {
    width: 52px;
  }

  .fb-tab-disc {
    height: 52px;
  }

  .fb-tab.is-on .fb-tab-disc {
    box-shadow: 0 0 0 3px rgba(226, 199, 142, 0.16), 0 0 18px rgba(226, 199, 142, 0.35);
  }

  /* ซ่อนชื่อใต้ตรา แต่ยังให้โปรแกรมอ่านหน้าจออ่านได้ */
  .fb-tab-txt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .fb-tab-dot {
    width: 6px;
    height: 6px;
  }

  /* ----- ตัวละคร ----- */
  .cr-inner {
    --st: clamp(200px, calc(var(--avail) - 400px), calc(340 * var(--t)));
    min-height: 0;
    padding: calc(30 * var(--t)) 0 calc(32 * var(--t));
    box-sizing: border-box;
  }

  .cr-title img {
    width: calc(190 * var(--t));
  }

  /* ภาพตัวละครย่อตามความสูงที่เหลือ (สัดส่วนกรอบเท่าเดิม) */
  .cr-stage {
    height: var(--st);
  }

  .cr-float {
    top: calc(var(--st) * 0.03);
    width: calc(var(--st) * 1.25);
    height: calc(var(--st) * 1.67);
    margin-left: calc(var(--st) * -0.625);
  }

  .cr-aura {
    top: calc(var(--st) * 0.06);
    width: calc(var(--st) * 0.94);
    height: calc(var(--st) * 0.75);
    margin-left: calc(var(--st) * -0.47);
  }

  .cr-count {
    top: calc(30 * var(--t) + 45 * var(--t) + 6px);
  }

  .cr-arrow {
    top: calc(30 * var(--t) + 45 * var(--t) + var(--st) * 0.5 - 22px);
  }

  .cr-infos {
    margin-top: calc(-40 * var(--t));
  }

  .cr-head {
    height: calc(50 * var(--t));
  }

  .cr-hdr {
    height: calc(40 * var(--t));
    margin-top: calc(-20 * var(--t));
  }

  .cr-name {
    font-size: calc(22 * var(--t));
  }

  .cr-ico {
    width: calc(34 * var(--t));
    height: calc(34 * var(--t));
  }

  .cr-panel {
    margin-top: calc(4 * var(--t));
    padding: calc(16 * var(--t)) calc(22 * var(--t)) calc(18 * var(--t));
  }

  .cr-desc {
    font-size: 12.5px;
    line-height: 1.6;
  }

  .cr-nav {
    margin-top: calc(14 * var(--t));
    padding-top: 0;
  }

  .cr-label {
    margin-bottom: calc(8 * var(--t));
  }

  /* ปุ่มเลือกสำนัก: แถวเดียว เลื่อนซ้าย-ขวา (ปุ่มที่เลือกเลื่อนมาไว้กลางอัตโนมัติ) */
  .cr-picks {
    display: flex;
    justify-content: flex-start;
    gap: calc(8 * var(--t));
    overflow-x: auto;
    padding: 6px calc(4 * var(--t)) 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .cr-picks::-webkit-scrollbar {
    display: none;
  }

  .cr-pick {
    flex: none;
    width: calc(64 * var(--t));
    height: calc(80 * var(--t));
    scroll-snap-align: center;
  }
}

/* มือถือ: แถบเลือกสำนักให้รู้ว่ามีต่อ — ชิดขอบจอ เห็นปุ่มถัดไปครึ่งใบ + จางที่ขอบ */
@media (max-width: 575.98px) {
  .cr-nav {
    width: 100%;
  }

  .cr-label {
    margin-left: 16px;
    margin-right: 16px;
  }

  .cr-picks {
    gap: 8px;
    padding: 6px 16px 4px;
    scroll-padding: 0 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 48px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 48px), transparent 100%);
  }

  .cr-pick {
    width: 60px;
    height: 75px;
  }
}

/* มือถือ: แถบเลือกระบบ 2 แถว × 3 ตรา (ปุ่มใหญ่ขึ้น กดง่าย) */
@media (max-width: 575.98px) {
  .fb-scenes,
  .fb-scrim {
    bottom: 190px;
  }

  .fb-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 10px;
    column-gap: 12px;
    margin-top: 18px;
  }

  .fb-tab-emb,
  .fb-tab-disc {
    width: 70px;
  }

  .fb-tab-disc {
    height: 70px;
  }

  .fb-tab.is-on .fb-tab-disc {
    box-shadow: 0 0 0 4px rgba(226, 199, 142, 0.16), 0 0 22px rgba(226, 199, 142, 0.35);
  }

  .fb-wrap {
    padding-bottom: 24px;
  }
}

@media (max-width: 575.98px) {
  .fb-wrap {
    padding-top: 26px;
  }

  .fb-top {
    margin-bottom: 76px;
  }
}

/* "เลือกสำนัก" ไม่เว้นระยะตัวอักษร (ภาษาไทยห่างแล้วอ่านยาก) */
@media (max-width: 991.98px) {
  .cr-label {
    letter-spacing: 0;
    font-size: 14px;
  }
}

/* =========================================
   ข่าว Desktop (≥1600): แบนเนอร์ซ้าย สูงเท่ากับแท็บ + รายการข่าวฝั่งขวาพอดี
   - แบนเนอร์กว้าง 55% (รายการข่าวแคบลง) สัดส่วน 2:1
   - ฝั่งขวายืดเท่าความสูงแบนเนอร์ แถวข่าวแบ่งความสูงเท่า ๆ กัน
   - จุดสไลด์ / ปุ่มอ่านเพิ่มเติม ย้ายไปอยู่ใต้กรอบ ไม่นับในความสูง
   (จอ 1200–1599 คงแบบเดิม เพราะฝั่งขวาแคบเกินไปสำหรับแท็บ 5 ปุ่ม)
   ========================================= */
@media (min-width: 1600px) {
  .s-news .row {
    align-items: stretch;
  }

  .s-news .row > :first-child {
    flex: 0 0 calc((100% - 48px) * 0.55);
    width: auto;
    margin-top: 0 !important;
  }

  .s-news .row > :last-child {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .news-banner-wrapper .owl-dots {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 14px !important;
  }

  .s-news .tab-content {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }

  .s-news .tab-content > .tab-pane.active {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .s-news .tab-pane.active > .news-list {
    flex: 1 1 auto;
    height: auto;
  }

  .s-news .tab-pane.active > .news-list > .news-item,
  .s-news .tab-pane.active > .news-list > .news-item-ghost {
    flex: 1 1 0;
    height: auto;
    min-height: 48px;
    aspect-ratio: auto;
  }

  .s-news .tab-content + div {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 16px !important;
  }
}

/* โลโก้ใหม่ (ทรงเกือบจัตุรัส): ย่อให้มีระยะบน-ล่างใน navbar 80px */
@media (min-width: 768px) {
  .nav-logo {
    height: 66px;
  }
}

/* =========================================
   Event coverflow (≥1200) แบบลื่น: ไม่ใช้ filter blur / box-shadow ที่เปลี่ยนทุกเฟรม
   ใบข้าง = overlay หรี่ (::before) / ใบกลาง = เส้นขอบขาว (::after)
   ความเข้มคุมด้วย --t (0 = ข้าง, 1 = กลาง) ที่ JS ตั้งให้ระหว่างเลื่อน
   ========================================= */
@media (min-width: 1200px) {
  .event-carousel-slider .owl-item.active {
    --t: 0;
    filter: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    will-change: scale, opacity;
    transform: translateZ(0);
  }

  .event-carousel-slider .owl-item.active.center,
  .event-carousel-slider.has-single-slide .owl-item.active {
    --t: 1;
    filter: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }

  .event-carousel-slider .owl-item::before,
  .event-carousel-slider .owl-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    will-change: opacity;
  }

  /* หรี่ใบข้าง (แทน blur/brightness/contrast เดิม) */
  .event-carousel-slider .owl-item::before {
    background: rgba(78, 78, 82, 0.42);
    opacity: calc(1 - var(--t, 1));
  }

  /* เส้นขอบขาวของใบกลาง */
  .event-carousel-slider .owl-item::after {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    opacity: var(--t, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .event-carousel-slider .owl-item { will-change: auto; }
}

/* =========================================
   จุดนำทาง Section (ซ้ายกลางจอ) — Desktop ≥ 992
   เส้นทองบาง ๆ + จุดข้าวหลามตัด / active = แดงขอบทอง มีแสง
   ชี้แล้วโชว์ชื่อ Section ด้านขวา
   ========================================= */
.sec-dots { display: none; }

@media (min-width: 992px) {
  .sec-dots {
    position: fixed;
    top: 50%;
    left: 26px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 16px 5px;
    border: 1px solid rgba(226, 199, 142, 0.18);
    border-radius: 999px;
    background: rgba(18, 13, 11, 0.42);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    transform: translateY(-50%);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }

  /* เส้นแกนกลาง */
  .sec-dots::before {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(226, 199, 142, 0), rgba(226, 199, 142, 0.45) 15%, rgba(226, 199, 142, 0.45) 85%, rgba(226, 199, 142, 0));
    pointer-events: none;
  }

  .sec-dots.is-away {
    opacity: 0;
    transform: translate(-12px, -50%);
    pointer-events: none;
  }

  .sec-dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    text-decoration: none;
  }

  .sec-dot::before {
    content: "";
    width: 9px;
    height: 9px;
    transform: rotate(45deg);
    border: 1px solid rgba(226, 199, 142, 0.85);
    background: #17110e;
    transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }

  .sec-dot:hover::before,
  .sec-dot:focus-visible::before {
    background: rgba(226, 199, 142, 0.6);
  }

  .sec-dot.is-active::before {
    width: 13px;
    height: 13px;
    border-color: #e2c78e;
    background: linear-gradient(135deg, #d63a2c, #8a1a12);
    box-shadow: 0 0 0 3px rgba(226, 199, 142, 0.18), 0 0 12px rgba(214, 58, 44, 0.65);
  }

  .sec-dot-label {
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    padding: 4px 12px;
    border: 1px solid rgba(226, 199, 142, 0.45);
    border-radius: 999px;
    background: rgba(18, 13, 11, 0.85);
    color: #f2ece0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-6px, -50%);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
  }

  .sec-dot:hover .sec-dot-label,
  .sec-dot:focus-visible .sec-dot-label {
    opacity: 1;
    transform: translate(0, -50%);
  }

  .sec-dot.is-active .sec-dot-label { color: #e2c78e; }

  .sec-dot:focus-visible {
    outline: 2px solid #e2c78e;
    outline-offset: 2px;
    border-radius: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sec-dots, .sec-dot::before, .sec-dot-label { transition: none; }
}

/* ข่าว Desktop (≥1200): เนื้อหาอยู่กึ่งกลางบน-ล่างของพื้นที่ใต้ navbar
   (ความสูง = จอ − navbar 80px เพราะตอน snap หัว Section อยู่ใต้ navbar พอดี) */
@media (min-width: 1200px) {
  .s-news.bg-section3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
    min-height: calc(100vh - 80px);
  }

  .s-news .container-fluid {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* ≥1600 ปุ่ม "อ่านเพิ่มเติม" ลอยอยู่ใต้กรอบ (absolute) → เผื่อที่ด้านล่างให้เท่ากัน */
@media (min-width: 1600px) {
  .s-news .container-fluid {
    padding-bottom: 92px !important;
  }
}

/* =========================================
   ตัวละคร iPad แนวตั้ง / แท็บเล็ต (576–991): ทั้ง Section พอดี 1 จอใต้ navbar
   เดิมพื้นที่ตัวละครสูงตายตัว 610 → ปุ่มเลือกสำนักถูกตัดด้านล่าง
   ตอนนี้ย่อพื้นที่ตัวละคร (และตัวละคร/ออร่า/ลูกศร) ตามความสูงจอที่เหลือ
   ========================================= */
@media (min-width: 576px) and (max-width: 991.98px) {
  .cr-inner {
    --avail: calc(100svh - 80px);
    --st: clamp(340px, calc(var(--avail) - 545px), calc(610 * var(--t)));
    padding-bottom: 28px;
  }

  .cr-stage {
    height: var(--st);
  }

  .cr-float {
    top: calc(var(--st) * 0.033);
    width: calc(var(--st) * 1.28);
    height: calc(var(--st) * 1.705);
    margin-left: calc(var(--st) * -0.64);
  }

  .cr-aura {
    top: calc(var(--st) * 0.12);
    width: calc(var(--st) * 1.05);
    height: calc(var(--st) * 0.85);
    margin-left: calc(var(--st) * -0.525);
  }

  .cr-rays {
    top: calc(var(--st) * -0.11);
    width: calc(var(--st) * 1.48);
    margin-left: calc(var(--st) * -0.74);
  }

  /* ลูกศรอยู่ราวกลางตัวละคร */
  .cr-arrow {
    top: calc(147 * var(--t) + var(--st) * 0.37);
  }
}

/* =========================================
   มือถือ: แถบเลือกระบบแบบ "แคปซูลแถวเดียว" (แทน 2 แถว × 3 ที่กินพื้นที่)
   6 ตราในแถบกระจกเดียว / ตราที่เลือก = ขอบทอง + แสงเบา ๆ (ไม่ขยายล้นแถว)
   ========================================= */
@media (max-width: 575.98px) {
  .fb-tabs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 0;
    column-gap: 2px;
    margin-top: 16px;
    padding: 6px;
    border: 1px solid rgba(226, 199, 142, 0.22);
    border-radius: 999px;
    background: rgba(12, 9, 8, 0.62);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  }

  .fb-tab {
    gap: 0;
    justify-items: center;
  }

  .fb-tab-emb,
  .fb-tab-disc {
    width: 46px;
  }

  .fb-tab-disc {
    height: 46px;
  }

  .fb-tab-emb {
    height: 46px;
  }

  .fb .fb-tab-disc {
    box-shadow: none;
    border-color: rgba(226, 199, 142, 0.18);
  }

  .fb .fb-tab.is-on .fb-tab-disc {
    transform: none;
    border-width: 2px;
    box-shadow: 0 0 0 2px rgba(226, 199, 142, 0.18), 0 0 14px rgba(226, 199, 142, 0.45);
  }

  /* วงประจุดหมุน + จุดแดงใต้ตรา ไม่ใช้บนมือถือ (เปลืองที่) */
  .fb-tab-ring,
  .fb-tab-dot {
    display: none;
  }

  /* ภาพตัวละครยาวลงมาเกือบถึงแถบ (แถบเตี้ยลงแล้ว) */
  .fb-scenes,
  .fb-scrim {
    bottom: 120px;
  }
}

/* =========================================
   มือถือ: แท็บหมวดข่าวเป็นแคปซูลแถวเดียว (segmented) แทนปุ่มรูปที่ขึ้น 3 แถว
   เข้าชุดกับแถบเลือกระบบเด่น / เมนูมือถือ A6
   ========================================= */
@media (max-width: 575.98px) {
  .s-news .news-tabs {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px !important;
    width: 100%;
    margin: 0 0 14px !important;
    padding: 4px;
    border: 1px solid rgba(226, 199, 142, 0.35);
    border-radius: 999px;
    background: rgba(20, 15, 13, 0.82);
    box-shadow: 0 6px 18px rgba(30, 40, 46, 0.25);
  }

  .s-news .news-tab {
    width: auto;
    min-width: 0;
    height: 34px;
    padding: 0 2px;
    border-radius: 999px;
    background: transparent;
    color: #cfc6b8;
    font-size: 13px;
    font-weight: 600;
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  .s-news .news-tab:hover {
    transform: none;
    color: #fff;
  }

  .s-news .news-tab.active {
    background: linear-gradient(180deg, #c22d22, #7d140e);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(226, 199, 142, 0.55), 0 2px 8px rgba(125, 20, 14, 0.5);
  }

  /* line-height เผื่อสระ/วรรณยุกต์บน-ล่าง ไม่ให้ถูกตัด */
  .s-news .news-tab p {
    line-height: 1.6;
    white-space: nowrap;
  }
}

/* SEO heading: หัวข้อข่าวเป็น <h3> / หัวข้อโซเชียล + คำโปรยโซเชียลเป็น <p>
   รีเซ็ตสไตล์ heading ของ Bootstrap ให้หน้าตาเหมือนเดิม */
.news-item h3.news-title {
  display: inline;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

p.social-title {
  margin-top: 0;
  line-height: normal;
}

p.social-subtitle-text {
  margin-top: 0;
  margin-bottom: 0.5rem;
}