.elementor-kit-9{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ซ่อน badge-text เฉพาะที่อยู่ใน Loop Item เท่านั้น */
.e-loop-item .ccard-badge-text { 
  display: none !important; 
}

/* แอนิเมชันตัวหนังสือ badge text */
#ci-badge-text .elementor-heading-title{
  display:inline-block;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s;
  will-change: transform, opacity;
}
#ci-badge-text .elementor-heading-title.is-out{ transform: translateY(12px); opacity:0; }
#ci-badge-text.is-hidden{ display:none; }

/* ซ่อนข้อมูลที่ฝังในแต่ละการ์ด */
.ccard-title,
.ccard-desc,
.ccard-badge-text{
  display:none;
}

/* เอฟเฟกต์สไลด์ที่ไม่ active (ออปชัน) */
.js-card-carousel .swiper-slide{
  cursor:pointer;
}
.js-card-carousel .swiper-slide:not(.swiper-slide-active){
  opacity:.55;
  transition:opacity .25s;
}

/* ปีใหญ่ + หัวข้อ + ย่อหน้า: แอนิเมชันตอนเปลี่ยนสไลด์ */
#carousel-year,
#carousel-heading,
#ci-desc{
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s;
  will-change: transform, opacity;
}
#carousel-year.is-out,
#carousel-heading.is-out,
#ci-desc.is-out{
  transform: translateY(12px);
  opacity:0;
}

/* โครงคำอธิบายด้านล่าง */
#carousel-info{
  display:flex;
  gap:24px;
  align-items:flex-start;
}
#ci-badge{
  max-width:260px;
  height:auto;
}
#ci-badge.is-hidden,
#ci-badge-text.is-hidden{
  display:none;
}

/* (ถ้าใช้ปุ่ม hit area ครอบการ์ด) */
.card-wrap{
  position:relative;
}

/* ใส่คลาสนี้ที่คอนเทนเนอร์การ์ด */
.card-hit{
  position:absolute;
  inset:0;
  z-index:5;
  background:transparent;
  border:none;
  box-shadow:none;
  opacity:0; /* มองไม่เห็น แต่คลิกได้ */
}

/* ====== CONFIG ปรับได้ ====== */
:root{
  --active-blue: #217ae1;     /* สีฟ้าหลัก */
  --active-scale: 1.07;       /* ขยายการ์ดตอน Active */
  --inactive-scale: .94;      /* ย่อการ์ดที่ไม่ Active */
  --ring: 8px;                /* เคยใช้กับ ring รอบนอก */
  --radius: 0px;              /* มุมโค้งการ์ด */
}

/* ให้มีพื้นที่เผื่อเงา/กรอบเวลาขยาย ไม่โดนคลิป */
.js-card-carousel .swiper{
  overflow: visible;
  padding-block: 6px;
}

/* สไลด์พื้นฐาน + ทรานซิชันนุ่ม ๆ */
.js-card-carousel .swiper-slide{
  transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .35s, opacity .35s;
  transform-origin: center center;
  position:relative; /* ใช้วางของตกแต่ง */
}

/* โครงการ์ด */
.js-card-carousel .swiper-slide .card-wrap{
  position: relative;
  border-radius: var(--radius);
  overflow: visible; /* ให้เห็นของที่ยื่นออกมาจากรูป เช่น วงกลม */
}

/* ---------- card-wrap ::before/after (ไม่ใช้ ring แล้ว) ---------- */
.js-card-carousel .swiper-slide .card-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  border: 0;
  box-shadow: none;
  transition: border-color .35s, box-shadow .35s;
  pointer-events:none;
}
.js-card-carousel .swiper-slide .card-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  transition: opacity .35s;
  pointer-events:none;
}

/* ---------- เอฟเฟกต์บน "เฉพาะรูป" ผ่าน .ccard-img-wrap ---------- */
/* Container ที่ครอบเฉพาะรูปต้องมีคลาส .ccard-img-wrap */
.js-card-carousel .swiper-slide .ccard-img-wrap{
  position:relative;
  overflow:visible;                /* ให้วงกลมที่ยื่นลงมามองเห็นได้เต็ม */
  border-radius: var(--radius);
  border: 3px solid transparent;   /* กรอบจะโชว์เฉพาะตอน active */
}

/* ⭐ วงกลมฟ้าใต้รูป – ยึดกับขอบล่างของรูปพอดี */
.js-card-carousel .swiper-slide .ccard-img-wrap::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;                                    /* แตะขอบล่างของรูป */
  transform:translate(-50%, 50%) scale(0);     /* ดันลงครึ่งหนึ่งของวงกลม → อยู่ "ใต้รูป" พอดี */
  width:16px;
  height:16px;
  border-radius:999px;
  background: var(--active-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--active-blue) 25%, transparent);
  opacity:0;
  transition: transform .25s ease, opacity .25s ease;
  pointer-events:none;
}

/* ฟิล์มสีฟ้าบาง ๆ คลุมเฉพาะรูป (ตอน active เท่านั้น) */
.js-card-carousel .swiper-slide .ccard-img-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: var(--active-blue);
  opacity: 0;               /* ปิดไว้ก่อน */
  mix-blend-mode: multiply; /* ทำให้ไม่กลบรูปทั้งหมด */
  transition: opacity .35s;
  pointer-events:none;
}

/* สไลด์ที่ไม่ Active – ทำให้เล็กลงและจืดลงเล็กน้อย */
.js-card-carousel .swiper-slide:not(.swiper-slide-active){
  transform: scale(var(--inactive-scale));
  filter: grayscale(.15) brightness(.92);
  opacity: .85;
}

/* สไลด์ Active – ขยาย + กรอบฟ้ารอบ "รูป" + solid ฟ้าเบา ๆ + วงกลมฟ้าใต้รูป */
.js-card-carousel .swiper-slide-active{
  transform: scale(var(--active-scale));
  z-index: 3;
}

/* card-wrap ไม่ต้องทำอะไรตอน active แล้ว */
.js-card-carousel .swiper-slide-active .card-wrap::before{
  border-color: transparent;
  box-shadow: none;
}

/* ไฮไลต์เฉพาะรูป */
.js-card-carousel .swiper-slide-active .ccard-img-wrap{
  border-color: var(--active-blue);   /* กรอบฟ้า 3px รอบรูป */
}
.js-card-carousel .swiper-slide-active .ccard-img-wrap::after{
  opacity: .10;                       /* ความเข้มของฟิล์มฟ้า ปรับได้ (.06 – .15) */
}
.js-card-carousel .swiper-slide-active .ccard-img-wrap::before{
  transform:translate(-50%, 50%) scale(1);
  opacity:1;                          /* วงกลมฟ้าเห็นชัด ใต้รูป */
}

/* รูปในการ์ดให้เป็น block เต็มใบ (กันกระตุกตอน scale) */
.js-card-carousel .swiper-slide img{
  display:block;
  width:100%;
  height:auto;
}

/* เคารพ reduce motion ของผู้ใช้ */
@media (prefers-reduced-motion: reduce){
  .js-card-carousel .swiper-slide,
  .js-card-carousel .swiper-slide .card-wrap::before,
  .js-card-carousel .swiper-slide .card-wrap::after,
  .js-card-carousel .swiper-slide .ccard-img-wrap::before,
  .js-card-carousel .swiper-slide .ccard-img-wrap::after{
    transition:none !important;
  }
}

/* ให้แถบเลื่อนของ Loop Carousel วิ่งแบบ linear (ไม่ใช่ ease-out) */
#loopAuto1 .swiper-wrapper{
  transition-timing-function: linear !important;
}

#loopScroll1 .swiper-slide { opacity:.4; transform:scale(.9); transition:opacity .25s, transform .25s; }
#loopScroll1 .swiper-slide.swiper-slide-active { opacity:1; transform:scale(1); }

#carousel-heading,
#ci-desc {
  transition: opacity 0.18s ease;
}

.is-out {
  opacity: 0;
}/* End custom CSS */