/* Theme DHK Festival — Mid-Autumn Festival */
:root {
  /* Theme color start */
  /* # basic */
  --title-font-color: #000;
  --main-font-color: #000;
  --link-color: #000;
  --link-color-hover: #C73A9C;
  --primary-button-font-color: #fff;
	--primary-button-bgcolor: #3F30A4;
  --selection-font-color: #fff;
  --selection-bgcolor: #3B002B;
  --scrollarea-scrollbar-color-thumb: #ff1600;
  --scrollarea-scrollbar-color-track: #ebe5e9;
  --scrollarea-scrollbar-width: 5px;
  /* # intro */
  --intro-font-color: #fff;
  --intro-bgcolor: #3F30A4;
  --intro-video-icon: url(/content/dam/dhk/common/theme/2024/festival/icon-video-play.svg);
  --intro-date-icon: url("data:image/svg+xml,%3Csvg width='29' height='29' viewBox='0 0 29 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.69824' y='5.24237' width='26.303' height='23.7576' rx='2' fill='url(%23paint0_linear_261_714)'/%3E%3Cpath d='M9.08165 19.6675V21.9552H6.79395V19.6675H9.08165ZM14.8009 19.6675V21.9552H12.5132V19.6675H14.8009ZM20.5202 19.6675V21.9552H18.2325V19.6675H20.5202ZM9.08165 14.2075V16.4952H6.79395V14.2075H9.08165ZM14.8009 14.2075V16.4952H12.5132V14.2075H14.8009ZM20.5202 14.2075V16.4952H18.2325V14.2075H20.5202Z' fill='white' stroke='white' stroke-width='0.2'/%3E%3Cpath d='M7.70996 1V3.51648' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.9111 1V3.51648' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24.7921 3.88257H2.52514C1.68283 3.88257 1 4.5654 1 5.40771V24.9295C1 25.7718 1.68283 26.4546 2.52514 26.4546H24.7921C25.6345 26.4546 26.3173 25.7718 26.3173 24.9295V5.40771C26.3173 4.5654 25.6345 3.88257 24.7921 3.88257Z' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 9.81561H26.2258' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_261_714' x1='7.95885' y1='6.56224' x2='7.95885' y2='21.7878' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23AD30D8'/%3E%3Cstop offset='0.88' stop-color='%23731C75'/%3E%3Cstop offset='1' stop-color='%23731C75'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
  /* # story */
  --story-font-color: #000;
  --story-bgcolor: #f4f0fc;
  --story-border-color: #D8CCD5;
  --story-button-font-color: #fff;
  --story-button-bgcolor: #3B002B;
  --story-swiper-button-arrow-color: #3B002B;
  --story-swiper-button-bgcolor: #fff;
  --story-more-bio-date-color: #9B9098;
  --picks-list-date-icon: url(/content/dam/dhk/common/theme/2024/mid-autumn/date-icon.png);
  --picks-list-location-icon: url(/content/dam/dhk/common/theme/2024/mid-autumn/location-icon.png);
  --picks-list-arrow: url(/content/dam/dhk/common/theme/2024/mid-autumn/list-arrow.png);
  /* --story-card-background-color: #f4f0fc; */
  /* # image text list */
  --imagetextlist-alignment: flex-start;
  --imagetextlist-circle-bgcolor: #3F30A4;
  --imagetextlist-circle-arrow-color: #fff;
  /* # line table */
  --line-table-font-color: #333;
  /* # deals & offers */
	--offer-name-color: #9D8095;
	--offer-name-border-bottom-color: #D8CCD5;
	--offer-desc-color: #000;
  /* Theme color end */
}


#theme-fest span.list-head {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  padding: 3px 3px 3px 0;
  font-size: 13px;
  font-weight: 700;
  background-color: var(--story-card-background-color);
  color: #000000 !important;
}


#theme-fest .picks-list>ul {
  list-style: none;
  padding-left: 0;
}

#theme-fest .picks-list {
  position: relative;
  padding-top: 4px;
  border-top: 1px solid #D8CCD5;
}

#theme-fest .picks-list>ul>li {
  padding-top: 20px;
}


#theme-fest .picks-list>ul>li>a {
  display: block;
  position: relative;
  padding-right: 40px;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}


#theme-fest .picks-item {
  display: flex;
  align-items: center;
  width: 100%;
}

#theme-fest .picks-item-image {
  width: 20%;
  margin-right: 15px;
}

#theme-fest .picks-item-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

#theme-fest .picks-item-content {
  width: 80%;
}

#theme-fest .picks-item-content a {
  display: block;
  position: relative;
  padding-right: 40px;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

#theme-fest .picks-item-content a:after {
  display: block;
  content: '';
  position: absolute;
  right: 0;
  top: 1px;
  width: 17px;
  height: 17px;
  background-image: var(--picks-list-arrow);
  background-size: contain;
  background-repeat: no-repeat;
}

#theme-fest .picks-item-content .date-list {
  font-size: 15px;
  font-weight: 600;
  color: #9B9098 !important;
  margin-top: 5px;
  background-image: var(--picks-list-date-icon);
  background-repeat: no-repeat;
  background-position-y: top;
  border-width: 0px;
  margin-bottom: 8px;
  padding-left: 25px;
  align-content: center;
}

.card-date {
  font-size: 15px;
  font-weight: 600;
  margin-top: 5px;
  background-image: var(--picks-list-date-icon);
  background-repeat: no-repeat;
  background-position-y: top;
  border-width: 0px;
  margin-bottom: 8px;
  padding-left: 25px;
  align-content: center;
}

.card-venue {
  font-size: 15px;
  font-weight: 600;
  margin-top: 5px;
  background-image: var(--picks-list-location-icon);
  background-repeat: no-repeat;
  background-position-y: top;
  border-width: 0px;
  margin-bottom: 8px;
  padding-left: 25px;
  align-content: center;
}

.upcoming-event-list .list-content .list-item {
  flex: 0 0 calc(25% - 20px);
  /* 每個列表項佔寬度的 25%,減去 20px 的間距 */
  margin-top: 5px !important;
  margin-bottom: 20px;
  /* 增加列表項之間的垂直間距 */
}

/* .story-card {
background-color: var(--story-card-background-color) !important;} */

.hot-offer-spot-text {
  font-weight: 600 !important;
}

.look-more {
    border-radius: 10px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}