body {
  background: linear-gradient(192.32deg, #00A460 2.46%, #00252D 43.68%);
  background-repeat: no-repeat;
  background-color: #00252D;
}
.main {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
#icw .container:before,
#icw .container:after {
  display: none !important;
}
.c-green {
  color: #01CF61 !important;
}

.nw {
  white-space: nowrap;
}

.text-center {
  text-align: center;
}

.images-cover {
  display: flex;
  justify-content: center;
  padding-bottom: 48px;
  position: relative;
  z-index: 5;
}

.sc-product {
  background: transparent;
  position: relative;
}
/* .sc-product::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  background: url(https://kbank-uat.kasikornbank.com/SiteCollectionDocuments/assets/PFS2022/pages/promotion/npa-alwayon2026/img/background-desktop.jpg) top center no-repeat;
  background-size: cover;
  z-index: 0;
} */
.sc-product::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: #F4F4F4;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 53%);
  z-index: 0;
}
.sc-product .sc-inner {
  padding-top: 160px;
  position: relative;
  z-index: 1;
}
.sc-product .head-title {
  position: relative;
  z-index: 5;
}
.sc-product .head-title .h-title {
  color: var(--green-color-3) !important;
  font-size: 42px !important;
  line-height: 150% !important;
  margin-bottom: 8px !important;
}
.sc-product .head-title .s-title {
  font-size: 24px !important;
  line-height: 36px !important;
  color: #333333 !important;
}

.product-menu {
  position: relative;
  z-index: 5;
  padding-bottom: 64px;
  /* border-bottom: 1px solid rgba(219, 219, 219, 0.3); */
}
.product-menu .product-list {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
}
.product-menu .product-list .menu-list {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  transform: scale(1);
  transition: 400ms ease-in-out;
  border: 2px solid transparent;
}
.product-menu .product-list .menu-list.active {
  transform: scale(1.1);
  border: 2px solid rgb(62, 184, 123);
}
.product-menu .product-list .menu-list .image-bg {
  position: relative;
  z-index: 0;
  width: 100%;
}
.product-menu .product-list .menu-list .image-bg img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.product-menu .product-list .menu-list .wrap-text {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  padding: 24px 16px;
  z-index: 1;
}
.product-menu .product-list .menu-list .wrap-text .title {
  display: block;
}
.product-menu .product-list .menu-list .wrap-text .title p {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}
.product-menu .product-list .menu-list .wrap-text .title span {
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
  color: #fff;
}
.product-menu .product-list .menu-list .wrap-text a {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-top: 16px;
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .sc-product .head-title .s-title {
    font-size: 24px;
  }
  .product-menu .product-list {
    display: flex;
    justify-content: center;
    flex-direction: unset;
    gap: 24px;
    padding-top: 32px;
  }
  .product-menu .product-list .menu-list {
    border-radius: 8px;
    overflow: hidden;
    max-width: 240px;
  }
  .product-menu .product-list .menu-list .wrap-text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: unset;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: end;
    padding: 0;
    padding-bottom: 24px;
    z-index: 1;
  }
  .product-menu .product-list .menu-list .wrap-text .title {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .product-menu .product-list .menu-list {
    max-width: 328px;
    margin: 0 auto;
    width: 100%;
  }
}
@media screen and (max-width: 540px) {
  .product-menu .product-list .menu-list {
    max-width: unset;
    margin: 0 auto;
    width: auto;
    height: 168px;
  }
}
.section.sc-category {
  background: unset;
  position: relative;
}
.section.sc-category:first-of-type {
  background: unset;
}

.inner-product {
  background: url(https://kbank-uat.kasikornbank.com/SiteCollectionDocuments/assets/PFS2022/pages/promotion/npa-alwayon2026/img/section-1.png) top center no-repeat;
  border-radius: 8px;
  background-size: cover !important;
}
.inner-product.product-2 {
  background: url(https://kbank-uat.kasikornbank.com/SiteCollectionDocuments/assets/PFS2022/pages/promotion/npa-alwayon2026/img/npa-alway-on-2026-bg-hospital-desktop.jpg) top center no-repeat;
}
.inner-product.product-3 {
  background: url(https://kbank-uat.kasikornbank.com/SiteCollectionDocuments/assets/PFS2022/pages/promotion/npa-alwayon2026/img/npa-alway-on-2026-bg-sea-desktop.jpg) top center no-repeat;
}
.inner-product.product-4 {
  background: url(https://kbank-uat.kasikornbank.com/SiteCollectionDocuments/assets/PFS2022/pages/promotion/npa-alwayon2026/img/npa-alway-on-2026-bg-nature-desktop.jpg) top center no-repeat;
}

.sc-category {
  background: #00252d;
  position: relative;
}
/* .sc-category .wrapper-product {
  padding-top: 64px;
} */
.sc-category .wrapper-product .inner-product {
  padding: 32px 40px;
}
.sc-category .wrapper-product .inner-product .head-title {
  padding-bottom: 24px;
}
.sc-category .wrapper-product .inner-product .head-title .title {
  color: #fff;
  font-size: 26px;
  line-height: 39px;
  margin-bottom: 4px;
}
.sc-category .wrapper-product .inner-product .head-title .sub-title {
  color: #fff;
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 16px;
}
.sc-category .wrapper-product .inner-product .head-title span {
  color: #fff;
  display: block;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 16px;
}
.sc-category .wrapper-product .inner-product .slide-section {
  /* height: 450px; */
  min-height: 407px;
  height: auto;
  /* background: rgba(219, 219, 219, 0.6); */
  /* border-radius: 8px; */
  overflow: hidden;
}
.sc-category:last-child {
  padding-bottom: 64px;
}
.wrap-detail {
  margin-bottom: 10px;
}
#icw .assets-swiper .spacial-price {
  font-size: 20px;
}
.wrap-address .asset-address, 
.wrap-address .asset-code,
.location p {
  font-size: 14px;
}

.images-cover {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.images-cover.is-hide {
  opacity: 0;
  transform: translateY(-40px);
  pointer-events: none;
}

.head-title {
  transition: transform 0.5s ease;
}
.content-move {
  transition: all 0.5s ease;
}
.text-change {
  transition: all 0.5s ease;
}
.is-move-up {
  transform: translateY(-350px);
  margin-bottom: -350px;
}
#product .is-move-up {
  margin-bottom: 0;
}

/* .sc-product .head-title .h-title.text-change.is-change {
  color: #333 !important;
}
.sc-product .head-title .s-title.text-change.is-change {
  color: #666666 !important;
} */
img.icon-arrow {
  width: 16px;
  height: 16px;
  margin-left: 8px;
}
.btn-control.card-content a {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-decoration: underline;
  color: #ffffff;
}
.card-content img.icon-arrow {
  transform: rotate(270deg);
}
.wrapper-content-card .sc-category {
  padding-bottom: 0;
}
.wrapper-content-card .sc-category:first-of-type {
  padding-top: 0;
}
.wrapper-slide-pagination {
  left: 0;
}
.sc-category.cate-nature {
  margin-bottom: 64px;
}
.wrapper-slide-pagination .swiper-pagination .swiper-pagination-current,
.wrapper-slide-pagination .swiper-pagination {
  color: #fff !important;
}
#icw .promotion-swiper, #icw .assets-swiper, #icw .blog-swiper {
  margin: 0;
  padding: 0;
}
.show-mb {
  display: none;
}

/* ===== Mobile Category Popup ===== */
.popup-active .container {
  padding: 0 !important;
}
.popup-active .swiper-slide {
  width: 100% !important;
}
.sc-product.popup-active .sc-inner {
  padding-top: 35px;
}
.category-popup {
    display: none;
    /* position: absolute; */
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    background: #013433;
    z-index: 100;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s ease;
}

.category-popup.is-open {
    display: block;
}

.category-popup.is-visible {
    transform: translateX(0);
}
.sc-product {
    position: relative;
    overflow: hidden;
}

/* ไม่ต้องซ่อน content เดิม — popup ทับอยู่ด้านบน */
.sc-product.popup-active .product-original-content {
    visibility: hidden;
}

/* ตอน popup เปิด ซ่อนเนื้อหาเดิม */
.sc-product.popup-active .product-original-content {
    display: none;
}

.category-popup-back {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
    margin-top: 2px;
}

.category-popup-title {
    flex: 1;
}

.category-popup-title .popup-title {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    margin-top: 24px;
}

.category-popup-title .popup-subtitle {
    font-size: 18px;
    line-height: 27px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 14px;
}

.category-popup-title .popup-price {
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.category-popup-banner {
    width: 100%;
    overflow: hidden;
}

.category-popup-banner img {
    width: 100%;
    height: auto;
    display: block;
}

.category-popup-body {
    padding: 16px;
}

.category-popup-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.category-popup-cards > .wrapper-slide-pagination {
    display: none;
}
.wrap-detail {
  font-size: 14px;
}
.wrapper-slide-pagination,
.swiper-pagination.swiper-pagination-bullets {
  display: none;
}
.sc-category .wrapper-product .inner-product .slide-section {
  max-width: 1190px;
  margin: 0 auto;
}

/* ซ่อน loader เมื่อ parent มีรูปที่โหลดแล้ว */
.property-img-inner:has(.swiper-lazy-loaded) .g-loader,
.property-img-inner:has(img[src]:not([src=""])) .g-loader {
    display: none !important;
}

/* Fallback: ซ่อน loader ด้วย opacity เมื่อรูปโหลดแล้ว */
.swiper-lazy-loaded ~ .g-loader,
.swiper-lazy-loaded + .g-loader,
img[src]:not([src=""]) ~ .g-loader,
img[src]:not([src=""]) + .g-loader {
    display: none !important;
}

@media (max-width: 767px) {
    .category-popup-back {
      margin-top: 24px !important;
    }
    .category-popup-banner {
        position: absolute;
        /* top: 35px; */
        top: 0;
        left: 0;
        width: 100%;
        height: 300px;
        z-index: 0;
        overflow: hidden;
    }

    .category-popup-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .category-popup-banner::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .category-popup-header {
        position: relative;
        z-index: 2;
        padding: 16px;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
    }
    .category-popup-header svg {
      color: #ffffff;
      margin-left: -8px;
    }

    .category-popup-body {
        position: relative;
        z-index: 1;
        padding: 16px;
        padding-top: 24px;
        margin-top: 0;
        background: linear-gradient(to bottom, rgba(0, 37, 45, 0.05) 0%, rgba(0, 37, 45, 0.95) 5%, rgba(0, 37, 45, 1) 100%);
    }

    .wrapper-content-card {
        display: none;
    }
}

/* Desktop ไม่แสดง popup */
@media (min-width: 768px) {
    .category-popup {
        display: none !important;
    }
    .sc-category .container {
      max-width: 1352px !important;
      padding: 0 !important;
    }
    /* .assets-swiper .swiper-slide {
      max-width: 282px;
    } */
}
/* @media screen and (min-width: 2350px) {
  .h2.h-title.text-change,
  .s-title.text-change {
    text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);
  }
  .h2.h-title.text-change.is-change,
  .s-title.text-change.is-change {
    text-shadow: none;
  }
} */

@media screen and (max-width: 768px) {
  .show-mb {
    display: block;
  }
  .sc-product::before {
    top: -19%;
    height: 76%;
    clip-path: polygon(0 0, 100% 0, 100% 63%, 0 53%);
  }
  .images-cover img {
    max-width: 280px;
  }
  .inner-product {
    background: url(https://kbank-uat.kasikornbank.com/SiteCollectionDocuments/assets/PFS2022/pages/promotion/npa-alwayon2026/img/npa-alway-on-2026-bg-bts-mobile.jpg) top center no-repeat;
    border-radius: 8px;
  }
  .inner-product.product-2 {
    background: url(https://kbank-uat.kasikornbank.com/SiteCollectionDocuments/assets/PFS2022/pages/promotion/npa-alwayon2026/img/npa-alway-on-2026-bg-hospital-mobile.jpg) top center no-repeat;
  }
  .inner-product.product-3 {
    background: url(https://kbank-uat.kasikornbank.com/SiteCollectionDocuments/assets/PFS2022/pages/promotion/npa-alwayon2026/img/npa-alway-on-2026-bg-sea-mobile.jpg) top center no-repeat;
  }
  .inner-product.product-4 {
    background: url(https://kbank-uat.kasikornbank.com/SiteCollectionDocuments/assets/PFS2022/pages/promotion/npa-alwayon2026/img/npa-alway-on-2026-bg-nature-mobile.jpg) top center no-repeat;
  }
  .sc-product .head-title .h-title {
    font-size: 24px !important;
    line-height: 150% !important;
    margin-bottom: 8px !important;
  }
  .sc-product .head-title .s-title {
    font-size: 18px !important;
    line-height: 27px !important;
  }
  .product-menu .product-list .menu-list.active {
    transform: unset;
  }
  .product-menu {
    padding-bottom: 48px;
  }
  img.icon-arrow {
    transform: rotate(270deg);
  }
  .product-menu .product-list .menu-list.menu-2 .wrap-text,
  .product-menu .product-list .menu-list.menu-4 .wrap-text {
      right: 60px;
      transform: translateX(50%);
      text-align: left;
      left: unset;
  }

  .product-menu .product-list .menu-list .wrap-text .title {
    margin-bottom: 16px;
  }
  .sc-product .sc-inner {
    padding-top: 80px;
  }
}