:root {
  --bg-img-press: #F9F6F0;
  --join-purple: #49308B;
}
#carouselBanner .carousel-item {
    transition: transform 1s ease-in-out;
}

/* ซ่อนปุ่ม play วงกลมตรงกลาง */
#carouselBanner .video-js .vjs-big-play-button {
    display: none !important;
}

/* เผื่ออยากซ่อนทุกอย่างให้เหลือแค่วิดีโอล้วน ๆ */
#carouselBanner .video-js .vjs-control-bar,
#carouselBanner .video-js .vjs-loading-spinner {
    display: none !important;
}

.videoBanner{
    width: 100%;
    height: auto;
  aspect-ratio: 1 / 1.6375;
  overflow:hidden;
  pointer-events: none !important;
}
.videoBanner > video{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
}
.videoBanner .video-js{
    height:100% !important;
}
#carouselBanner .carousel-item .video-js video, #carouselBanner .carousel-item .video-js .vjs-tech {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.kv-countdown {
    background-image: url(../images/bg_ud_l.webp), url(../images/bg_ud_r.webp);
    background-repeat: no-repeat;
    background-position: left bottom, right bottom;
    background-size:  30% auto,  30% auto;
}
.kv-symbolic{
    background-color: var(--primary);
    background-image: url(../images/bg_symbolic.svg), url(../images/bg_symbolic.svg);
    background-repeat: repeat-x;
    background-position: center top -40px, center bottom -40px;
    background-size:auto;
}
/* ===== Press Release : < xl = ข้อความบน + รูป 6 ใบรวมเป็นกองเดียวด้านล่าง / xl = รูปซ้าย-ข้อความ-รูปขวา ===== */
.press-wrap {
    display: grid;
    grid-template-areas:
        "text"
        "imgs";
    justify-items: center;
    row-gap: 2.5rem;
}
.press-text {
    grid-area: text;
}
/* กล่องซ้าย/ขวาวางซ้อนกันในช่องเดียวกัน ตำแหน่งรูปเป็น % ของกล่อง */
.img-press-box {
    grid-area: imgs;
    position: relative;
    width: min(360px, 100%);
    aspect-ratio: 3 / 2;
}
.img-press-box > img {
    position: absolute;
    top: 0;
    width: 27%;
    height: auto;
    aspect-ratio: 18 / 25;
    translate: var(--tx, 0) var(--ty, 0);
    object-fit: cover;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid #00000014;
    box-shadow: 0px 4px 16px 0px #00000014;
    background-color: var(--bg-img-press);
}
#imgPress1 { left: 1%;  top: 25%; rotate: -15deg; z-index: 1; }
#imgPress2 { left: 18%; top: 0;   rotate: -10deg; z-index: 2; width: 30%; }
#imgPress3 { left: 47%; top: 3%;  rotate: 3deg;   z-index: 1; }
#imgPress4 { left: 71%; top: 17%; rotate: 10deg;  z-index: 0; }
#imgPress5 { left: 29%; top: 35%; rotate: -2deg;  z-index: 3; }
#imgPress6 { left: 52%; top: 35%; rotate: 15deg;  z-index: 4; width: 25%; }

@media (min-width: 576px) {
    .img-press-box {
        width: min(440px, 100%);
    }
    .img-press-box > img {
        padding: .5rem;
        border-radius: 12px;
    }
}
@media (min-width: 1200px) {
    .press-wrap {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "left text right";
        align-items: center;
        column-gap: 1rem;
    }
    .press-left  { grid-area: left; }
    .press-right { grid-area: right; }
    .img-press-box {
        width: 400px;
        height: 300px;
        aspect-ratio: auto;
    }
    .img-press-box > img {
        padding: .5rem;
    }
    #imgPress1, #imgPress2, #imgPress3, #imgPress4, #imgPress5, #imgPress6 {
        top: 0;
        left: auto;
        right: auto;
    }
    #imgPress1, #imgPress3, #imgPress4, #imgPress6 {
        width: 144px;
        height: 200px;
    }
    #imgPress2, #imgPress5 {
        width: 158px;
        height: 220px;
    }
    #imgPress1 { left: 0;   --ty: 72px; --tx: 20px;  rotate: -20deg; z-index: 0; }
    #imgPress2 { left: 50%; --ty: 12px; --tx: -50%;  rotate: -6deg;  z-index: 2; }
    #imgPress3 { right: 0;  --ty: 53px; --tx: -12px; rotate: 4deg;   z-index: 1; }
    #imgPress4 { left: 0;   --ty: 53px; --tx: 12px;  rotate: -12deg; z-index: 0; }
    #imgPress5 { left: 50%; --ty: 12px; --tx: -50%;  rotate: 4deg;   z-index: 2; }
    #imgPress6 { right: 0;  --ty: 72px; --tx: -20px; rotate: 12deg;  z-index: 1; }
}
#secViewMap {
  background: linear-gradient(rgba(255, 255, 255, 0.8)), url(../images/expomap.webp);
  background-position: center, bottom -54px center;
  background-size: cover, cover;
  background-repeat: no-repeat;
}

/* ===== secInfoCard : การ์ดพื้นหลังสี + แถบล่าง + ภาพประกอบมุมขวาล่าง ===== */
#secInfoCard{
  background-image: url(../images/bg_info.webp);
  background-size:auto 64px;
  background-position: top center;
  background-repeat: repeat-x;
  padding-top:64px;
}
.info-card {
    --card-bg: var(--primary);
    --card-band: var(--pink);
    --card-band-h: 40px;
    --card-art: none;
    --card-art-pos: right bottom;
    --card-art-pos-1: left center;
    --card-art-size: 170px auto;
    min-height: 280px;
    background-color: var(--card-bg);
    background-image: var(--card-art), linear-gradient(to top, var(--card-band) var(--card-band-h), transparent var(--card-band-h)), var(--card-art-1);
    background-repeat: no-repeat;
    background-position: var(--card-art-pos), 0 0, var(--card-art-pos-1);
    background-size: var(--card-art-size), 100% 100%, auto 100%;
}
.info-card-symposium {
    --card-bg: var(--primary);
    --card-band: var(--pink);
    /* บน -> ล่าง : ใบบัว, ต้นกก */
    --card-art: url(../images/bg_cd_sym.webp);
    --card-art-1: url(../images/bg_cd_sym_1.webp);

}
.info-card-guidebook {
    --card-bg: #DAAE00;
    --card-band: #DF9632;
    --card-art: url(../images/bg_cd_exh.webp);
    --card-art-1: url(../images/bg_cd_exh_1.webp);
}
.info-card-body {
    padding: 1.25rem 1rem;
}
.info-card-text {
    max-width: 440px;
}
.btn-outline-white-cust {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 40px;
    min-width: 116px;
    padding: .5rem 1rem;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    font-size: .875rem;
    color: var(--white);
    text-decoration: none;
    transition: background-color var(--trans-2);
    &:hover {
        color: var(--white);
        background-color: rgba(255, 255, 255, .16);
    }
}

/* ===== Goods & shop : mobile = ซ้อนลง / tablet = title+ปุ่มแถวเดียว / desktop = ข้อความซ้าย รูปขวา ===== */
.info-gs {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "title"
        "desc"
        "btn"
        "img";
    align-items: center;
    padding: 1.5rem 1rem 0;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    overflow: hidden;
    background:
        url(../images/bg-press.webp) repeat,
        linear-gradient(to right, #F7F5F2, #ECEAE6);
}
.info-gs-title {
    grid-area: title;
}
.info-gs-desc {
    grid-area: desc;
}
.info-gs-btn {
    grid-area: btn;
    justify-self: start;
    min-width: 136px;
}
.info-gs-img {
    grid-area: img;
    width: calc(100% + 2rem);
    max-width: none;
    margin: 1rem -1rem -18%; /* ล้นขอบซ้ายขวา + ตัดขอบล่างของรูป */
}

@media (min-width: 576px) {
    .info-gs {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title btn"
            "desc  ."
            "img   img";
        padding: 1.5rem 1rem 0;
    }
    .info-gs-desc {
        max-width: 420px;
    }
    .info-gs-btn {
        justify-self: end;
    }
    .info-gs-img {
        width: 100%;
        margin: 1rem 0 -6%;
    }
}
@media (min-width: 992px) {
    .info-gs {
        grid-template-columns: auto 1fr;
        grid-template-rows: 1fr auto auto auto 1fr;
        grid-template-areas:
            ".     img"
            "title img"
            "desc  img"
            "btn   img"
            ".     img";
        column-gap: 1.5rem;
        padding: 1.5rem 0 0 1.5rem;
    }
    .info-gs-btn {
        justify-self: start;
    }
    .info-gs-img {
        align-self: end;
        justify-self: end;
        width: 100%;
        max-width: 640px;
        margin: 0;
    }
}
@media (min-width: 1200px) {
    .info-gs {
        min-height: 400px;
        padding-left: 1.5rem;
    }
}

@media (min-width: 576px) {
    .info-card-body {
        padding: 1.5rem 1rem;
    }
}

@media (min-width: 576px) {
    .videoBanner{
        aspect-ratio: 2 / .79325;
    }
    .kv-countdown {
        background-size: auto 220px;
    }
    #secViewMap {
        background-position: center, center bottom -72px;
    }
}
@media (min-width: 768px) {
    .info-card {
        --card-band-h:62px;
    }
    .info-card-symposium, .info-card-guidebook {
        --card-art-size: 255px auto;
    }
}

@media (min-width: 1200px) {
    #secViewMap {
        background-size: cover, auto;
        background-position: center, left calc(50% + 436px) bottom calc(50% - 0px);
    }
    .info-card {
        min-height: 400px;
    }
    .info-card-symposium, .info-card-guidebook {
        --card-art-size: 340px auto;
    }
}

/* ===== slideImg : auto slide ขวา -> ซ้าย (CSS only) ===== */
#slideImg {
  --slide-gap: 24px;
  --slide-h: 240px;
  --slide-speed: 200s;
  background: #1CA350;
  padding: 24px 0;
  overflow: hidden;
}
#slideImg .slide-track {
  display: flex;
  width: max-content;
  animation: slideImgRTL var(--slide-speed) linear infinite;
}
#slideImg .slide-group {
  display: flex;
  flex-shrink: 0;
}
#slideImg .slide-group a {
  display: block;
  flex-shrink: 0;
  cursor: zoom-in;
}
#slideImg .slide-group img {
  display: block;
  height: var(--slide-h);
  width: auto;
  margin-right: var(--slide-gap); /* ใช้ margin แทน gap เพื่อให้ -50% ต่อกันพอดี */
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
#slideImg:hover .slide-track {
  animation-play-state: paused;
}
@keyframes slideImgRTL {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 575.98px) {
  #slideImg {
    --slide-gap: 12px;
    --slide-h: 180px;
    padding: 16px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #slideImg .slide-track {
    animation: none;
  }
}

/* ===== secJoinNews : การ์ด Join มีกรอบลายขีดชมพู/ม่วง, หัวสีครีม + ตัวสีม่วง / lg = 2 คอลัมน์ ===== */
.join-card {
  padding:1rem;
  background-image: url(../images/bg_participate.webp);
  background-color: var(--join-purple);
  background-size:auto;
  background-repeat: repeat;
}
.join-head {
  background-color: var(--bg-body);
}
.join-body {
  background-color: var(--join-purple);
}
.cd-timer {
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(255, 255, 255, .5);
}
.cd-cell + .cd-cell {
  border-left: 1px solid rgba(255, 255, 255, .5);
}
.cd-loc {
  max-width: 320px;
}
.cd-map-btn {
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, .3);
  background-color: rgba(255, 255, 255, .06);
  transition: background-color var(--trans-2);
  &:hover {
    background-color: rgba(255, 255, 255, .16);
  }
}
.cd-sign {
  width: 160px;
  height: auto;
  flex-shrink: 0;
}
.news-item {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  transition: box-shadow var(--trans-2);
  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
  }
}
.news-thumb {
  width: 80px;
  aspect-ratio: 1;
}
.icon-location{
  padding:4px;
  background-color: var(--pink);
  border-radius: 100%;
}
@media (min-width: 576px) {
  .news-thumb {
    width: 200px;
  }
}

/* ===== secActivity : swiper การ์ดกว้าง 320px ล้นออกนอก container ทั้งสองฝั่ง ===== */
#secActivity {
  overflow: hidden;
  background-image: url(../images/bg_actv_home.webp);
  background-position: center;
  background-size: auto;
  background-repeat: repeat-x;
}
.act-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #00000040;
  color: var(--black);
  background-color: var(--white);
  transition: background-color var(--trans-2), opacity var(--trans-2);
  &:hover {
    background-color: var(--btn-white-hov);
  }
  &.swiper-button-disabled {
    opacity: .4;
    cursor: default;
  }
}
.act-swiper {
  overflow: visible; /* ให้การ์ดล้นออกทั้งซ้าย-ขวา แล้วไปถูกตัดที่ขอบ section */
}
.act-swiper .swiper-slide {
  width: min(320px, 85vw);
  height: auto;
}
.act-card {
  padding: 13px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  transition: box-shadow var(--trans-2);
  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
  }
}
.act-cal {
  width: 32px;
  height: 32px;
  color: #FF6F59;
  background-color: #FF6F5929;
}
.act-img {
  aspect-ratio: 560 / 792;
}
.act-img img {
  transition: transform .4s ease;
}
.act-card:hover .act-img img {
  transform: scale(1.05);
}