.pick-up-slider .splide__slide .thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 319 / 180;
}

.pick-up-slider .splide__slide .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pick-up-slider-arrows {
  position: absolute;
  width: 84%;
  height: auto;
  aspect-ratio: 233 / 131;
  left: 8%;
}

.pick-up-slider-arrow {
  width: 30px;
  height: 30px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
  opacity: 1;
}

.pick-up-slider-prev {
  left: -10px;
}

.pick-up-slider-next {
  right: -10px;
}

.pick-up-slider-arrow svg {
  width: 12px;
  height: 12px;
  fill: #8C7826;
}

.pick-up-slider-pagination {
  position: static;
  margin-top: 10px;
}

.pick-up-slider-page {
  background: rgba(89, 89, 89, 0.40);
  margin: 0 5px;
}

.pick-up-slider-page.is-active {
  background: #73715D;
  transform: none;
}

@media (min-width:768px) {
  .pick-up-slider-arrows {
    width: 60%;
    left: 20%;
  }

  .pick-up-slider-arrow {
    width: 45px;
    height: 45px;
  }

  .pick-up-slider-prev {
    left: -44px;
  }

  .pick-up-slider-next {
    right: -44px;
  }

  .pick-up-slider-arrow svg {
    width: 20px;
    height: 20px;
  }

  .pick-up-slider-pagination {
    margin-top: 40px;
  }

  .pick-up-slider-page {
    margin: 0 7px;
  }

}
@media (min-width:1000px) {
  .pickup-section {
    overflow: clip;
  }

  .splide-wrapper {
    overflow: visible;
    max-width: 1000px;
    margin: 0 auto;
  }

  .splide-wrapper .splide {
    overflow: visible;
  }

  .splide-wrapper .splide__track{
    overflow: visible;
  }

  .pick-up-slider-arrows {
    width: 60%;
    left: 20%;
  }

  .pick-up-slider-arrow {
    width: 45px;
    height: 45px;
  }

  .pick-up-slider-prev {
    left: -75px;
  }

  .pick-up-slider-next {
    right: -75px;
  }

}
@media (min-width:1800px) {
  .pick-up-slider-arrows {
    width: 60%;
    left: 20%;
  }

  .pick-up-slider-arrow {
    width: 45px;
    height: 45px;
  }

}

/***************************************
Currently Open
***************************************/
/* filter-box */
.filter {
  background: #F3F0E9;
}

.accordion-panel.filter-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  transition-property: gap;
  transition-duration: 0.3s;
}

.accordion-panel.filter-panel:has(.toggle-filter.open) {
  gap: 10px;
}

.accordion-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toggle-filter:hover {
  opacity: 1;
}

.accordion-trigger::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none'>\<path d='M0.34375 0.362061L10.8438 10.3621L21.3438 0.362061' stroke='%2398822a' stroke-width='3'/>\</svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: transform 0.3s;
}

.accordion-trigger.open::after {
  transform: rotate(180deg);
}

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s;
}

.accordion-panel .accordion-content[aria-hidden=false] {
  grid-template-rows: 1fr;
}


.accordion-panel .accordion-content > div {
  overflow: hidden;
}

.filter .filter-tags > div {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter .filter-tags .filter-tag {
  border-radius: 27px;
  background: #FFF;
  padding: 5px 15px;
  color: #5C5C5C;
  font-size: var(--fz14);
}
.filter .filter-tags .filter-tag:hover {
  opacity: 1;
}

.filter .filter-tags .filter-tag.active {
  background:#444;
  color:#fff;
}

.btn-filter {
  border: 1px solid var(--h3, #98822A);
  background: #FFF;
  display: flex;
  padding: 6px 28px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.btn-filter::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(/assets/img/icon_filter.svg) no-repeat center / contain;
}

.accordion-trigger span.text-close {
  display: none;
}
.accordion-trigger.open span.text-close {
  display: block;
}
.accordion-trigger.open span.text-open {
  display: none;
}

.filter-wrapper-accordion-trigger {
  gap: 10px;
}

.filter-wrapper-accordion-trigger::after {
  margin-top: 3px;
}

@media (min-width:768px) {
  .filter-box {
    position: relative;
  }
  
  /* .accordion-content.filter-wrapper-content {
    grid-template-rows: 1fr;
  }

  .accordion-trigger.filter-wrapper-accordion-trigger {
    display: none;
  } */

  /* .accordion-panel.filter-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    transition-property: gap;
    transition-duration: 0.3s;
  } */

  /* .accordion-panel.filter-panel:has(.toggle-filter.open) {
    gap: 20px;
  }

  .accordion-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
  } */

  /* .toggle-filter:hover {
    opacity: 1;
  } */

  /* .accordion-trigger::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 12px;
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none'>\<path d='M0.34375 0.362061L10.8438 10.3621L21.3438 0.362061' stroke='%2398822a' stroke-width='3'/>\</svg>");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: transform 0.3s;
  }

  .accordion-trigger.open::after {
    transform: rotate(180deg);
  } */

  /* .accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s;
  } */


  /* .accordion-panel .accordion-content[aria-hidden=false] {
    grid-template-rows: 1fr;
  }


  .accordion-panel .accordion-content > div {
    overflow: hidden;
  } */

  .filter .filter-tags > div {
    /* display: flex; */
    gap: 10px 16px;
    /* flex-wrap: wrap; */
  }

  .filter .filter-tags .filter-tag {
    font-size: 1rem;
    line-height: 1.6;
  }

  .btn-reset-filter {
    position: absolute;
    top: 35px;
    right: 32px;
  }

}

/***************************************
Article list
***************************************/
/* .list-articles .article-texts > div:first-child {
  display: flex;
  flex-direction: column-reverse;

} */

.list-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* grid-template-rows: 1fr 1fr; */
  gap: 30px 10px;
}

.list-articles > li {
  display: flex;
  flex-direction: column;
}

.list-articles > li.hidden {
  visibility: hidden;
}

.list-articles .img-wrapper {
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 125;
}

.list-articles {
  line-height: 1.6;
}

.list-articles .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.list-articles time {
  margin-right: 10px;
}

.list-articles .category {
  border-radius: 18px;
  background: #FFF;
  padding: 3px 10px;
  color: #7E6A20;
  font-size: 12px;
  font-weight: 700;
  margin-right: 4px;
  display: inline-block;
}

.list-articles .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.list-articles .tags .tag {
  font-size: var(--fz12);
  border-radius: 27px;
  background: #EFEFEF;
  padding: 3px 12px 4px 12px;
}

@media (min-width:768px) {
  .list-articles {
    gap: 30px 20px;
  }
}

@media (min-width:1200px) {
  .list-articles {
    grid-template-columns: 1fr 1fr;
    /* grid-template-rows: 1fr 1fr 1fr; */
    gap: 32px 40px;
  }
  .list-articles > li {
    display: flex;
    flex-direction: row;
    gap: 10px;
  }
    
  .list-articles .img-wrapper {
    width: 200px;
    height: auto;
  }

  .list-articles > li > div {
    flex: 1;
  }

  .list-articles .article-texts > div:first-child {
    display: flex;
    flex-direction: column-reverse;
  }


}

/***************************************
Other events
***************************************/
.list-other-events {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.list-other-events .img-wrapper {
  width: 100%;
  height: auto;
  aspect-ratio: 1160 / 400;
}

.list-other-events .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (min-width:768px) {
  .list-other-events {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 40px;
  }


}

/***************************************
check-filter
***************************************/

  .status-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    margin-top: 12px;
  }

  .status-radios label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.4;
    color: #222;
  }

  .status-radios input[type="radio"] {
    appearance: auto;
    -webkit-appearance: radio;
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 18px;
    accent-color: #a88a1f;
    cursor: pointer;
  }