c

/* css for exhibition */
.font-100 {
   font-weight: 100;
}

.font-200 {
   font-weight: 200;
}

.font-300 {
   font-weight: 300;
}

.font-400 {
   font-weight: 400;
}

.font-14 {
   font-size: 14px !important;
}

.color-3c3c43 {
   color: #3c3c43;
}

.color-76767b {
   color: #76767b;
}

.margin_p p {
   margin-bottom: 0 !important;
}

.exhibition-list-scope .exhibition-banner {
   background-color: #f5f5f5;
   display: flex;
   align-items: center;
   min-height: 100px;
}

.exhibition-list-scope .exhibition-banner .exhibition-banner-title {
   font-weight: bold;
   font-size: var(--font-size-32);
   color: var(--common-gray-800);
   margin: 0;
   align-items: center;
   display: flex;
}

.exhibition-cards {
   padding: 48px 0;
   /* background: #f8f9fa; */
   min-height: 50dvh;
}

.exh-filter-row {
   display: flex;
   flex-wrap: wrap;
   gap: .75rem
}

.exh-dropdown {
   position: relative;
   display: inline-block
}

.exh-dropdown-button {
   display: inline-flex;
   align-items: center;
   gap: .375rem;
   border: solid 1px #000;
   /* border-radius: .5rem; */
   padding: .5rem .75rem;
   background: transparent;
   font-size: .875rem;
   font-weight: 500;
   color: #374151;
   /* box-shadow: 0 1px 2px rgba(0, 0, 0, .05); */
   cursor: pointer
}

.exh-dropdown-button:hover {
   background: #f9fafb
}

.exh-dropdown-button .exh-selected-value {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%
}

.exh-dropdown-button svg {
   width: 1.1rem;
   height: 1.1rem;
   margin-left: .25rem
}

.exh-dropdown-menu {
   position: absolute;
   top: 100%;
   left: 0;
   margin-top: 0;
   min-width: 14rem;
   /* border-radius: .5rem;  */
   background: #fff;
   border: 1px solid rgba(0, 0, 0, .06);
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
   opacity: 0;
   transform: scale(.92);
   transform-origin: top left;
   visibility: hidden;
   transition: opacity .07s ease, transform .07s ease, visibility 0s linear .07s;
   z-index: 30
}

.exh-dropdown-menu.show {
   opacity: 1;
   transform: scale(1);
   visibility: visible
}

.exh-dropdown-option {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: .5rem .75rem;
   font-size: .875rem;
   color: #374151;
   border-radius: .375rem;
   cursor: pointer
}

.exh-dropdown-option:hover {
   background: #f3f4f6;
   color: #111827
}

.exhibition-card-img {
   aspect-ratio: 3 / 2;
   object-fit: cover;
   width: 100%;
   height: 100%;
}

.exh-meta {
   display: flex;
   align-items: center;
   gap: .5rem;
   flex-wrap: wrap;
   color: var(--common-gray-800);
   font-size: var(--font-size-16);
}

.tag-exh {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: 10px
}

.tag-exh .tag-chip {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   padding: 6px 14px 8px;
   height: 33px;
   border: 1px solid var(--common-gray-800, #3C3C43);
   border-radius: 17px;
   background: transparent;
   color: var(--common-gray-800, #3C3C43);
   font-weight: 700;
   font-size: var(--font-size-12);
   white-space: nowrap
}

.exhibition-list-scope .card {
   border-radius: 0;
   border: none;
   position: relative;
}

.exhibition-list-scope .card-body {
   padding: 16px 0;
}

.exhibition-list-scope .card-title a {
   color: #000;
   text-decoration: none;
}

.exhibition-list-scope .card-title a:hover {
   text-decoration: none;
}

.exhibition-list-scope .exhibition-card-img,
.exhibition-list-scope .card-img-top {
   border-radius: 0 !important;
}

#emptyState {
   display: none
}

.exh-pagination-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   margin-top: 32px
}

.exh-page-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 6px;
   background: transparent;
   border: none;
   border-radius: 0;
   cursor: pointer;
   color: #111827
}

.exh-page-button:hover {
   opacity: .8
}


.card-title-exh {
   font-size: var(--font-size-18);
   font-weight: bold;
   color: var(--common-gray-800);
}

.exh-page-button.is-disabled {
   opacity: .35;
   pointer-events: none
}

.exh-page-prev svg {
   transform: rotate(180deg)
}

.exh-page-button svg {
   width: 22px;
   height: 22px
}

.exh-pagination {
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap
}

.exh-pagination a.page-numbers,
.exh-pagination span.page-numbers {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0 2px;
   background: transparent;
   border: none;
   color: #111827;
   text-decoration: none;
   font-weight: 500;
   font-size: var(--font-size-16);
   line-height: 1
}

.exh-pagination span.page-numbers.current {
   color: #111827;
   border-bottom: 2px solid #111827
}

@media (max-width: 992px) {
   .card-title-exh {
      font-size: var(--font-size-16);
   }

   .exh-meta {
      font-size: var(--font-size-14);
   }
}

@media (min-width:1000px) {
   .exhibition-list-scope .exhibition-banner {
      min-height: 179px
   }
}


/* event */

.event-list-scope .event-banner {
   background-color: #f5f5f5;
   display: flex;
   align-items: center;
   min-height: 100px;

}

.event-list-scope .event-banner .event-banner-title {
   font-weight: bold;
   font-size: var(--font-size-32);
   color: var(--common-gray-800);
}


.event-cards {
   padding: 48px 0;
   min-height: 50dvh;
}

.event-filter-row {
   display: flex;
   flex-wrap: wrap;
   gap: .75rem
}

.event-dropdown {
   position: relative;
   display: inline-block
}

.event-dropdown-button {
   display: inline-flex;
   align-items: center;
   gap: .375rem;
   border: none;
   padding: .5rem .75rem;
   background: transparent;
   font-size: .875rem;
   font-weight: 500;
   color: #374151;
   cursor: pointer;
   border: solid 1px #000;
}

.event-dropdown-button:hover {
   background: #f9fafb
}

.event-dropdown-button .event-selected-value {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%
}

.event-dropdown-button svg {
   width: 1.1rem;
   height: 1.1rem;
   margin-left: .25rem
}

.event-dropdown-menu {
   position: absolute;
   top: 100%;
   left: 0;
   margin-top: 0;
   min-width: 14rem;
   background: #fff;
   border: 1px solid rgba(0, 0, 0, .06);
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
   opacity: 0;
   transform: scale(.92);
   transform-origin: top left;
   visibility: hidden;
   transition: opacity .07s ease, transform .07s ease, visibility 0s linear .07s;
   z-index: 30
}

.event-dropdown-menu.show {
   opacity: 1;
   transform: scale(1);
   visibility: visible
}

.event-dropdown-option {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: .5rem .75rem;
   font-size: .875rem;
   color: #374151;
   border-radius: .375rem;
   cursor: pointer
}

.event-dropdown-option:hover {
   background: #f3f4f6;
   color: #111827
}

.event-card-img {
   aspect-ratio: 3 / 2;
   object-fit: cover;
   width: 100%;
   height: 100%;
}

.event-meta {
   display: flex;
   align-items: center;
   gap: .5rem;
   flex-wrap: wrap;
   color: var(--common-gray-800);
   font-size: var(--font-size-14)
}

.tag-event {
   display: inline-flex;
   flex-wrap: wrap;
   margin-bottom: 6px;
   background-color: #F5F5F5;
}

.tag-event .event-tag-chip {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 10px 12px;
   min-width: 57px;
   /* font-family: 'Helvetica', Arial, sans-serif; */
   font-style: normal;
   font-weight: 700;
   font-size: var(--font-size-14);
   color: #3C3C43;
   flex: none;
   flex-grow: 0;
   white-space: nowrap
}

.tag-event .event-tag-chip.is-other {
   background-color: #000000;
   color: #ffffff;
}

.card-title-event-list {
   font-size: var(--font-size-18);
   font-weight: bold;
   color: var(--common-gray-800);
}

.event-list-scope .card {
   border-radius: 0;
   border: none;
   position: relative;
}

.event-list-scope .card-body {
   padding: 16px 0;
}

.event-list-scope .card-title a {
   color: #000;
   text-decoration: none;
}

.event-list-scope .card-title a:hover {
   text-decoration: none;
}

.event-list-scope .event-card-img,
.event-list-scope .card-img-top {
   border-radius: 0 !important;
}

#emptyState {
   display: none
}

.event-pagination-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   margin-top: 32px
}

.event-page-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 6px;
   background: transparent;
   border: none;
   border-radius: 0;
   cursor: pointer;
   color: #111827
}

.event-page-button:hover {
   opacity: .8
}

.event-page-button.is-disabled {
   opacity: .35;
   pointer-events: none
}

.event-page-prev svg {
   transform: rotate(180deg)
}

.event-page-button svg {
   width: 22px;
   height: 22px
}

.event-pagination {
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap
}

.event-pagination a.page-numbers,
.event-pagination span.page-numbers {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0 2px;
   background: transparent;
   border: none;
   color: #111827;
   text-decoration: none;
   font-weight: 500;
   font-size: 1rem;
   line-height: 1
}

.event-pagination span.page-numbers.current {
   color: #111827;
   border-bottom: 2px solid #111827
}

@media (max-width: 768px) {
   .tag-event .event-tag-chip {
      font-size: var(--font-size-12);
   }

   .event-meta {
      font-size: var(--font-size-14)
   }
}

@media (min-width:1000px) {
   .event-list-scope .event-banner {
      min-height: 179px
   }
}


/* bkk */

.bangkok-page-scope .bangkok-hero-img {
   width: 100%;
   height: 720px;
   object-fit: cover;
   display: block;
}

.bangkok-page-scope .inf-title h3 {
   font-size: var(--font-size-20);
   font-weight: bold;
}

.bangkok-page-scope .inf-sub h4 {
   font-size: var(--font-size-18);
   font-weight: bold;
}

.bangkok-page-scope .inf-bkk-title {
   font-size: var(--font-size-16);
   font-weight: bold;
}

.bangkok-page-scope .bangkok-cards {
   padding: 48px 0;
   min-height: 50dvh;
}

.bangkok-page-scope .bangkok-card-img {
   /* aspect-ratio: 16/10;
   object-fit: cover; */
   display: block;
}

.bangkok-page-scope .bangkok-meta {
   display: flex;
   align-items: center;
   /* gap: .1rem; */
   flex-wrap: wrap;
   color: #6b7280;
   font-size: var(--font-size-16);
   font-weight: 100;
}

.bangkok-page-scope .bangkok-tag {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: 6px;
}

.bangkok-page-scope .bangkok-tag .bangkok-tag-chip {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   padding: 6px 14px 8px;
   height: 33px;
   border: 1px solid var(--common-gray-800, #3C3C43);
   border-radius: 17px;
   background: transparent;
   color: var(--common-gray-800, #3C3C43);
   font-weight: 700;
   font-size: var(--font-size-12);
   line-height: 160%;
   white-space: nowrap;
}

.bangkok-page-scope .bangkok-list-scope .card {
   border-radius: 0;
   border: none;
   position: relative;
}

.card-title-bkk {
   font-size: var(--font-size-20);
   font-weight: bold;
}


.bangkok-page-scope .bangkok-list-scope .card-body {
   padding: 16px 0;
}

.bangkok-page-scope .bangkok-list-scope .card-title-bkk a {
   font-size: var(--font-size-18);
   color: var(--common-gray-800);
   text-decoration: none;
   font-weight: bold;
}

.bangkok-page-scope .bangkok-list-scope .card-title-bkk a:hover {
   text-decoration: none;
}

.bangkok-page-scope .bangkok-list-scope .bangkok-card-img,
.bangkok-page-scope .bangkok-list-scope .card-img-top {
   border-radius: 0 !important;
}

.bangkok-page-scope .event-bangkok-cards {
   padding: 48px 0;
   min-height: 50dvh;
}

.bangkok-page-scope .event-bangkok-card-img {
   aspect-ratio: 16/10;
   object-fit: cover;
   display: block;
}

.bangkok-page-scope .event-bangkok-meta {
   display: flex;
   align-items: center;
   gap: .5rem;
   flex-wrap: wrap;
   color: var(--common-gray-600);
   font-size: var(--font-size-16);
}

.bangkok-page-scope .event-bangkok-tag {
   display: inline-flex;
   flex-wrap: wrap;
   margin-bottom: 6px;
   background-color: #F5F5F5;
}

.bangkok-page-scope .event-bangkok-tag-chip {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 10px 12px;
   min-width: 57px;
   /* font-family: 'Helvetica', Arial, sans-serif; */
   font-style: normal;
   font-weight: 700;
   font-size: var(--font-size-14);
   color: #3C3C43;
   flex: none;
   flex-grow: 0;
   white-space: nowrap;
}

.bangkok-page-scope .event-bangkok-tag-chip.is-other {
   background-color: #000000;
   color: #ffffff;
}

.bangkok-page-scope .event-bangkok-list-scope .card {
   border-radius: 0;
   border: none;
   position: relative;
}

.bangkok-page-scope .event-bangkok-list-scope .card-body {
   padding: 16px 0;
}

.bangkok-page-scope .event-bangkok-list-scope .card-title-bkk a {
   font-size: var(--font-size-20);
   color: var(--common-gray-800);
   text-decoration: none;
   font-weight: bold;
}

.bangkok-page-scope .event-bangkok-list-scope .card-title-bkk a:hover {
   text-decoration: none;
}

.bangkok-page-scope .event-bangkok-list-scope .event-bangkok-card-img,
.bangkok-page-scope .event-bangkok-list-scope .card-img-top {
   border-radius: 0 !important;
}

.bangkok-page-scope .pdf-coffee p .pdf-icon {
   margin-left: 4px;
   width: 16px;
   height: auto;
   vertical-align: middle;
}

.pdf-icon {
   width: 16px;
   height: auto;
   vertical-align: middle;
}

.bangkok-page-scope .coffee-title {
   color: var(--common-gray-800);
   font-weight: bold;
}

.bangkok-page-scope .pdf-coffee {
   font-size: var(--font-size-16);
   color: var(--common-gray-800);
   font-weight: bold;
}

.bangkok-page-scope .coffee-title h1 {
   color: var(--common-gray-800);
   font-size: var(--font-size-52);
   font-weight: 600;
}

.bangkok-page-scope .limited-menu {
   padding: 48px 0;
   min-height: 50dvh;
}

.bangkok-page-scope .limited-menu-card-img {
   aspect-ratio: 16/10;
   object-fit: cover;
   display: block;
}

.bangkok-page-scope .limited-menu-meta {
   display: flex;
   align-items: center;
   gap: .5rem;
   flex-wrap: wrap;
   color: #000000ff;
   font-size: var(--font-size-16);
}

.bangkok-page-scope .limited-menu-time-title {
   color: #000;
   font-weight: bold;
}

.bangkok-page-scope .limited-menu-list-scope .card {
   border-radius: 0;
   border: none;
   position: relative;
   background-color: transparent !important;
}

.bangkok-page-scope .limited-menu-list-scope .card-body {
   padding: 16px 0;
}

.bangkok-page-scope .limited-menu-list-scope .card-title-bkk a {
   color: #000;
   text-decoration: none;
}

.bangkok-page-scope .limited-menu-list-scope .card-title-bkk a:hover {
   text-decoration: none;
}

.bangkok-page-scope .limited-menu-list-scope .limited-menu-card-img,
.bangkok-page-scope .limited-menu-list-scope .card-img-top {
   border-radius: 0 !important;
}

.bangkok-page-scope .limited-menu-excerpt {
   font-size: var(--font-size-16);
   margin: 0;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   white-space: normal;
   word-break: break-word;
}

.bangkok-page-scope .title-limited-menu {
   font-size: var(--font-size-26);
   font-weight: bold;
}

.bangkok-page-scope .pdf-muji-book p .pdf-icon {
   margin-left: 4px;
   width: 16px;
   height: auto;
   vertical-align: middle;
}

.bangkok-page-scope .muji-book-title {
   font-size: var(--font-size-16);
   color: var(--common-gray-800);
   font-weight: bold;
}

.bangkok-page-scope .pdf-muji-book {
   font-size: var(--font-size-16);
   color: var(--common-gray-800);
   font-weight: bold;
}

.bangkok-page-scope .muji-book-title h1 {
   color: var(--common-gray-800);
   font-size: var(--font-size-52);
   font-weight: 600;
}

.content-muji-book {
   font-size: var(--font-size-16);
   color: var(--common-gray-800);
}

.bangkok-page-scope .muji-book-btn {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   max-width: 319px;
   height: 70px;
   border: 1px solid #1D1D1F;
   border-radius: 8px;
   padding: 0 24px;
   text-decoration: none;
   background: transparent;
}

.bangkok-page-scope .muji-book-btn-text {
   font-weight: 700;
   font-size: var(--font-size-16);
   color: #3C3C43;
}

.bangkok-page-scope .floor.map .floor-image {
   display: flex;
   justify-content: center;
}

.bangkok-page-scope .floor.map .floor-image img {
   max-width: 100%;
   height: auto;
   display: block;
}

.bangkok-page-scope .floor-text h4 {
   font-size: var(--font-size-20);
   font-weight: bold;
}

.bangkok-page-scope .access-title {
   font-size: var(--font-size-20);
   font-weight: bold;
}

.bangkok-page-scope .access-content p {
   font-size: var(--font-size-16);
   margin-bottom: 0;
   font-weight: 100;
}

.bangkok-page-scope .related-btn {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   max-width: 372px;
   height: 90px;
   border: 1px solid #1D1D1F;
   border-radius: 8px;
   padding: 0 24px;
   text-decoration: none;
   background: transparent;
}


.bangkok-page-scope .related-btn:hover {
   color: var(--common-gray-800);
   background-color: var(--common-beige-250);
}

.bangkok-page-scope .related-btn-text {
   font-weight: 700;
   font-size: var(--font-size-16);
   color: #3C3C43;
}

.bangkok-page-scope .related-container {
   display: flex;
   justify-content: flex-start;
}

.free-admis-title {
   font-size: var(--font-size-16);
   font-weight: bold;
}

.free-admis-content {
   font-size: var(--font-size-12);
   color: var(--common-gray-600);
   font-weight: 100;
}

.gallery-open-title {
   font-size: var(--font-size-40);
   font-weight: bold;
}

.opening-title {
   font-size: var(--font-size-16);
   font-weight: bold;
}

.exh-bkk-title {
   font-size: var(--font-size-20);
   font-weight: bold;
}

.event-bkk-title {
   font-size: var(--font-size-26);
   font-weight: bold;
}

.library-open-title {
   font-size: var(--font-size-52);
   font-weight: 600;
}

.library-open-sub {
   font-size: var(--font-size-16);
   font-weight: 600;
}

.library-title {
   font-size: var(--font-size-16);
   font-weight: bold;
}

.inf-bkk-mark {
   color: var(--common-gray-600);
   font-size: var(--font-size-12);
   font-weight: 100;
}

.inf-bkk-content {
   font-size: var(--font-size-16);
   color: var(--common-gray-800);
   font-weight: 100;
}

.inf-bkk-title {
   font-size: var(--font-size-16);
   color: var(--common-gray-800);
   font-weight: bold;
}

.opening-time {
   font-weight: 100 !important;
}

.opening-content {
   font-size: var(--font-size-16);
   font-weight: 100;
   max-width: 100%;
   overflow-wrap: break-word;
   word-break: break-word;
   margin: 0;
}

.bangkok-page-scope .venue-prefix {
   position: relative;
   padding-right: 8px;
   margin-right: 8px;
}

.bangkok-page-scope .venue-prefix::after {
   content: "";
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   height: 1em;
   border-right: 1px solid currentColor;
}

.img-box-bkk {
   display: flex;
   align-items: center;
}


.content-block-bkk {
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 100%;
}

.card-title-bkk-limited {
   font-size: var(--font-size-20);
   color: var(--common-gray-800);
   font-weight: bold;
}

.card-title-bkk-mujibook {
   font-size: var(--font-size-20);
   color: var(--common-gray-800);
   font-weight: bold;
}

.related-bkk {
   font-size: var(--font-size-20);
   font-weight: bold;
   color: var(--common-gray-800);
}

.coffee-size {
   font-size: var(--font-size-16);
}

.content-coffee {
   font-size: var(--font-size-16);
}


.access-map-embed iframe {
   width: 100%;
   height: 490px;
   border: 0;
}



@media (max-width: 991.98px) {

   .bangkok-page-scope .access-content p {
      font-size: var(--font-size-14);
      font-weight: 100;
      margin-bottom: 0;
   }

   .library-open-title {
      font-size: var(--font-size-40);
   }

   .library-open-sub {
      font-size: var(--font-size-14);

   }

   .opening-title {
      font-size: var(--font-size-14);
   }

   .bangkok-page-scope .limited-menu-excerpt {
      font-size: var(--font-size-14);
   }

   .card-title-bkk-limited {
      font-size: var(--font-size-18);
   }

   .bangkok-page-scope .title-limited-menu {
      font-size: var(--font-size-22);
      font-weight: bold;
   }

   .bangkok-page-scope .pdf-coffee {
      font-size: var(--font-size-14);
   }

   .coffee-size {
      font-size: var(--font-size-14);
   }

   .content-coffee {
      font-size: var(--font-size-14);
   }

   .card-title-bkk {
      font-size: var(--font-size-16);
   }

   .card-title-bkk-mujibook {
      font-size: var(--font-size-16);
   }

   .gallery-open-title {
      font-size: var(--font-size-32);
   }

   .opening-content {
      font-size: var(--font-size-14);
   }

   .exh-bkk-title {
      font-size: var(--font-size-22);
   }

   .event-bkk-title {
      font-size: var(--font-size-22);

   }

   .bangkok-page-scope .related-container {
      justify-content: flex-start;
   }

   .bangkok-page-scope .bangkok-meta {
      font-size: var(--font-size-14);
   }

   .bangkok-page-scope .limited-menu-meta {
      font-size: var(--font-size-14);
   }

   .bangkok-page-scope .bangkok-cards {
      padding: 12px 0;
   }

   .bangkok-page-scope .coffee-title h1 {
      font-size: var(--font-size-40);
   }

   .bangkok-page-scope .muji-book-title h1 {
      font-size: var(--font-size-40);
   }

   .bangkok-page-scope .muji-book-title p {
      font-size: var(--font-size-14);
   }


   .bangkok-page-scope .muji-book-title {
      font-size: var(--font-size-14);
   }

   .bangkok-page-scope .pdf-muji-book {
      font-size: var(--font-size-14);
   }

   .bangkok-page-scope .muji-book-title h1 {
      font-size: var(--font-size-40);
   }

   .content-muji-book {
      font-size: var(--font-size-14);
   }

   .bangkok-page-scope .muji-book-btn-text {
      font-size: var(--font-size-14);
   }

   .bangkok-page-scope .related-btn-text {
      font-size: var(--font-size-14);
   }
}

@media (max-width: 767.98px) {
   .bangkok-page-scope .bangkok-hero-img {
      height: 360px;
   }

   .bangkok-page-scope .opening-item .d-flex,
   .bangkok-page-scope .library-item .d-flex,
   .bangkok-page-scope .coffee-section .coffee,
   .bangkok-page-scope .muji-book-section .muji-book {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
   }

   .bangkok-page-scope .related-btn {
      height: 64px;
   }

   .bangkok-page-scope .muji-book-btn {
      height: 64px;
   }

   .access-map-embed iframe {
      height: 320px;
   }
}

/* single exhibition */

.banner-exhibition-page {
   background-color: var(--common-beige-250);
}

.banner-exhibition-page .row {
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
}

.banner-exhibition-page .display {
   display: flex;
}

.banner-exhibition-page .exh-title {
   /* display: flex;
   align-items: center;
   flex: 0 0 40%;
   max-width: 40%; */

   display: flex;
   flex-direction: column;
   align-self: center;
   flex: 1;
   padding: 2.5rem;
}

.banner-exhibition-page .exh-image {
   /* flex: 0 0 60%;
   max-width: 60%;
   position: relative;
   overflow: hidden;
   min-height: 780px; */
   flex: 2;
}

.banner-exhibition-page .exh-img {
   /* position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   display: block; */
}

.banner-exhibition-page .exh-title-text {
   margin: 0;
   font-weight: 700;
   color: var(--common-gray-800, #3c3c43);
   font-size: var(--font-size-24);
}

.banner-exhibition-page .exh-date {
   font-size: var(--font-size-16);
   margin-bottom: 1rem;
   color: var(--common-gray-800, #3c3c43);
   font-weight: 100;
}

@media (max-width: 1000px) {
   .banner-exhibition-page .display {
      display: flex;
      flex-direction: column;
   }

   .banner-exhibition-page .exh-title {
      order: 2;
      align-self: start;
      padding: 1.25rem 1.25rem 1.5rem;
   }

   .banner-exhibition-page .exh-image {
      order: 1;
   }
}

.venue-single-exh {
   display: flex;
   gap: .5rem;
   /* align-items: center;
   flex-wrap: wrap; */
}

.venue-single-exh p {
   font-size: var(--font-size-14);
   margin: 0;
   font-weight: 600;
   color: var(--common-gray-800, #3C3C43);
}

.venue-single-exh span {
   font-size: var(--font-size-14);
   font-weight: 600;
   color: var(--common-gray-800, #3C3C43);
}

.venue-single-exh .venue-single-exh-values {
   position: relative;
   display: flex;
   align-items: center;
   /* margin-left: .25rem;
   padding-left: .75rem; */
}

/* .venue-single-exh .venue-single-exh-values::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 1px;
   height: 14px;
   background: #111827;
} */

/* .venue-single-exh .venue-single-exh-text {
   color: #111827;
} */

.tag-exh {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   padding: 0;
}

.tag-exh .tag-chip {
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   padding: 6px 14px 8px;
   height: 33px;
   border: 1px solid var(--common-gray-800, #3C3C43);
   border-radius: 17px;
   background: transparent;
   color: var(--common-gray-800, #3C3C43);
   /* font-family: Helvetica, Arial, sans-serif; */
   font-weight: 700;
   font-size: var(--font-size-12);
   line-height: 160%;
   text-decoration: none;
   user-select: none;
   white-space: nowrap;
   width: 116px;
}

.time-exh {
   display: flex;
   flex-direction: column;
   gap: .25rem;
}

.time-exh h3 {
   margin: 0;
   font-size: var(--font-size-20);
   font-weight: 600;
   color: var(--common-gray-800);
}

.time-values {
   display: flex;
   align-items: center;
   gap: .35rem;
   color: var(--common-gray-800);
   flex-wrap: wrap;
   font-size: var(--font-size-16);
   font-weight: 300;
}

.time-text-exh {
   margin-top: .25rem;
}

.time-text-exh p {
   font-size: var(--font-size-14);
   margin-bottom: 10px;
   color: var(--common-gray-600);
   font-weight: 100;
}

.venue-single-exh-content h3 {
   font-size: var(--font-size-20);
   font-weight: 600;
   color: var(--common-gray-800);
}

.venue-single-exh-content p {
   font-size: var(--font-size-16);
   margin-bottom: 2px;
   font-weight: 300;
   color: var(--common-gray-800);
}

.venue-single-exh-tax-values {
   font-size: var(--font-size-16);
   font-weight: 600;
   color: var(--common-gray-800);
}

.venue-single-exh-map-list {
   display: flex;
   flex-direction: column;
   gap: .5rem;
}

.venue-single-exh-map-item a.map-link,
.venue-single-exh-map-item .map-text {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: var(--common-gray-800);
   text-decoration: none;
   font-size: var(--font-size-16);
   font-weight: 300;
}

.venue-single-exh-map-item a.map-link:hover {
   color: #727272ff;
}

.venue-single-exh-map-item svg {
   width: 16px;
   height: 16px;
   flex: 0 0 16px;
}

.event-exh .event-title {
   font-size: var(--font-size-22);
   font-weight: 600;
   color: var(--common-gray-800);
}

.event-exh .event-card {
   overflow: hidden;
}

.event-exh .event-img {
   aspect-ratio: 4/3;
   overflow: hidden;
}

.event-exh .event-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.event-exh .event-body {
   padding: 14px 0px;
}

.event-exh .event-item-title {
   font-size: var(--font-size-18);
   font-weight: 700;
   margin: 0 0 8px;
   color: #111827;
}

.event-exh .event-item-content {
   font-size: var(--font-size-16);
   color: #111827;
}

.exh-content {
   font-size: var(--font-size-16);
   font-weight: 300;
}

.exh-gallery .gallery-img-exh {
   display: block;
   width: 100%;
   height: 420px;
   max-height: none;
   object-fit: cover;
   object-position: center;
}

.exh-gallery .gallery-first-exh {
   display: block;
   width: 100%;
   height: 520px;
   max-height: none;
   object-fit: cover;
   object-position: center;
}

.exh-single-btn {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   max-width: 319px;
   min-height: 74px;
   border: 1px solid #1D1D1F;
   border-radius: 8px;
   padding: 0 24px;
   margin: 48px auto 0;
   text-decoration: none;
   background: #fff;
}


.exh-single-btn:hover {
   color: var(--common-gray-800);
   background-color: var(--common-beige-250);
}

.exh-single-btn-text {
   font-weight: 600;
   font-size: var(--font-size-16);
   color: #3C3C43;
}

.credits-exh h3 {
   font-size: var(--font-size-20);
   font-weight: 600;
}

.credits-exh .credits-list {
   display: flex;
   flex-direction: column;
   gap: .5rem;
}

.credits-exh .credit-item {
   display: flex;
   align-items: center;
   gap: .5rem;
   flex-wrap: wrap;
}

/* .credit-brand {
   font-weight: bold;
} */

.custom_h {
   width: 100%;
   aspect-ratio: 375/617;
   -o-object-fit: cover;
   object-fit: cover
}

.custom_position {
   position: absolute;
   top: 50%;
   left: 50%;
   content: "";
   transform: translate(-50%, -50%);
   width: 100%;
}

@media(min-width: 600px) {
   .custom_h {
      aspect-ratio: 612/460
   }
}

@media(min-width: 1000px) {
   .custom_h {
      max-height: 650px;
      aspect-ratio: 612/325
   }
}

.credits-exh .credit-text {
   font-size: var(--font-size-14);
   color: var(--common-gray-600);
   font-weight: 100;
}

.credits-exh .credit-sep {
   width: 1px;
   height: 14px;
   background: var(--common-gray-300, #d8d8d9);
}

@media (max-width: 991.98px) {

   .event-exh .event-title {
      font-size: var(--font-size-18);
   }

   .credits-exh .credit-text {
      font-size: var(--font-size-14);
   }

   .credits-exh h3 {
      font-size: var(--font-size-18);
   }

   .venue-single-exh-map-item a.map-link,
   .venue-single-exh-map-item .map-text {
      font-size: var(--font-size-14);
   }

   .venue-single-exh-content p {
      font-size: var(--font-size-14);
   }

   .venue-single-exh-tax-values {
      font-size: var(--font-size-14);
   }

   .venue-single-exh-content h3 {
      font-size: var(--font-size-18);
   }

   .time-values {
      font-size: var(--font-size-14);
   }

   /* .banner-exhibition-page .exh-image {
      order: -1;
      flex: 0 0 100%;
      max-width: 100%;
      min-height: 400px;
   } */

   /* .banner-exhibition-page .exh-title {
      flex: 0 0 100%;
      max-width: 100%;
   } */

   .exh-gallery .gallery-first-exh,
   .exh-gallery .gallery-img-exh {
      height: 320px;
   }

   .exh-content {
      font-size: var(--font-size-14);
   }

   .time-exh h3 {
      font-size: var(--font-size-18);
   }
}

@media (max-width: 768px) {
   .event-exh .event-item-title {
      font-size: var(--font-size-16);
   }

   .event-exh .event-item-content {
      font-size: var(--font-size-14);
   }

   .venue-single-exh p {
      font-size: var(--font-size-14);
   }

   .venue-single-exh span {
      font-size: var(--font-size-14);
   }
}

@media (max-width: 575.98px) {
   .banner-exhibition-page .container {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
   }

   .banner-exhibition-page .exh-title-text {
      font-size: var(--font-size-18);
   }
}

@media (max-width: 575.98px) {
   .tag-exh .tag-chip {
      width: auto;
      padding-inline: 10px;
   }
}

@media (max-width: 575.98px) {

   .exh-gallery .gallery-first-exh,
   .exh-gallery .gallery-img-exh {
      height: 260px;
   }
}


/* event */

.banner-event-page {
   background-color: var(--common-beige-250);
}

.banner-event-page .row {
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
}

.banner-event-page .event-title {
   display: flex;
   align-items: center;
   flex: 0 0 40%;
   max-width: 40%;
}

.banner-event-page .event-image {
   flex: 0 0 60%;
   max-width: 100%;
   position: relative;
   overflow: hidden;
   min-height: 720px
}

.banner-event-page .event-img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   display: block;
}

.banner-event-page .event-title-text {
   margin: 0;
   font-weight: 700;
   color: var(--common-gray-800, #3c3c43);
   font-size: var(--font-size-24);
}

.time-event p {
   font-size: var(--font-size-16);
   font-weight: 500;
   margin-bottom: 2px;
}



.venue-single-event {
   display: flex;
   align-items: center;
   gap: .5rem;
   flex-wrap: wrap;
}

.venue-single-event p {
   font-size: var(--font-size-16);
   margin: 0;
   font-weight: 600;
   color: var(--common-gray-800, #3C3C43);
}

.venue-single-event span {
   font-size: var(--font-size-16);
   font-weight: 600;
   color: var(--common-gray-800, #3C3C43);
}

.venue-single-event .venue-values {
   position: relative;
   display: flex;
   align-items: center;
   margin-left: .25rem;
   padding-left: .75rem;
}

.venue-single-event .venue-values::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 1px;
   height: 14px;
   background: #111827;
}

.venue-single-event .venue-text {
   color: #111827;
}

.time-event h3 {
   font-size: var(--font-size-20);
   font-weight: bold;
}

.event-venue h3 {
   font-size: var(--font-size-20);
   font-weight: bold;
}

.event-tax {
   font-size: var(--font-size-16);
   font-weight: bold;
}

.event-address p {
   margin-bottom: 2px;
}

.event-content {
   font-size: var(--font-size-16);
}

.event-reservation-wrap {
   display: flex;
   justify-content: center;
}

.event-reservation-header {
   display: flex;
   justify-content: flex-start;
}

.event-reservation-secondary {
   display: flex;
   justify-content: center;
}


.event-reservation-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 24px;
   width: 319px;
   max-width: 100%;
   min-height: 64px;
   background: #3C3C43;
   border-radius: 8px;
   border: none;
   text-decoration: none;
}

.event-reservation-btn:hover,
.event-reservation-btn:focus,
.event-reservation-btn:active,
.event-reservation-btn:focus-visible {
   background: #3C3C43;
   text-decoration: none;
   outline: none;
   box-shadow: none;
}

.event-reservation-wrap {
   display: flex;
   justify-content: center;
}

.event-reservation-inner {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   max-width: 271px;
   gap: 1.5rem;
}

.event-reservation-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 24px;
   width: 319px;
   max-width: 100%;
   min-height: 64px;
   background: #3C3C43;
   border-radius: 8px;
   border: none;
   text-decoration: none;
   cursor: pointer;
   appearance: none;
   -webkit-appearance: none;
}

.event-reservation-btn:hover,
.event-reservation-btn:focus,
.event-reservation-btn:active,
.event-reservation-btn:focus-visible {
   background: #3C3C43;
   text-decoration: none;
   outline: none;
   box-shadow: none;
}

.event-reservation-label {
   margin: 0;
   font-weight: 700;
   font-size: var(--font-size-16);
   color: #FFFFFF;
   white-space: nowrap;
}

.event-reservation-icon {
   width: 16px;
   height: 16px;
   flex: none;
   position: relative;
}

.event-reservation-icon svg {
   width: 16px;
   height: 16px;
   display: block;
}

.event-last-btn-wrap {
   text-align: center;
   margin-top: 40px;
   margin-bottom: 80px;
}

.event-last-btn {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 319px;
   max-width: 100%;
   min-height: 80px;
   border: 1px solid #1D1D1F;
   border-radius: 8px;
   padding: 0 24px;
   margin: 0 auto;
   text-decoration: none;
   background: #fff;
}

.event-last-btn:hover {
   color: var(--common-gray-800);
   background-color: var(--common-beige-250);
}

.event-last-btn-text {
   font-weight: 700;
   font-size: var(--font-size-16);
   color: #3C3C43;
}

.event-last-btn svg {
   display: block;
}

.being-gallery h3,
.particpation h3 {
   font-size: var(--font-size-20);
   font-weight: bold;
}

.being-gallery p,
.particpation p {
   font-size: var(--font-size-16);
   font-weight: 500;
}

.event-history-title {
   font-size: var(--font-size-16);
   font-weight: bold;
}

.event-history-content {
   font-size: var(--font-size-14);
}

.text-event-last p {
   font-size: var(--font-size-12);
   margin-bottom: 6px;
   color: var(--common-gray-600);
}

.venue-map-item a.map-link,
.venue-map-item .map-text {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: var(--common-gray-800);
   text-decoration: none;
   font-size: var(--font-size-16);
   font-weight: bold;
}

.venue-map-item a.map-link:hover {
   color: #727272;
}

.event-history-img {
   width: 150px;
   height: 150px;
   max-width: 100%;
   object-fit: cover;
   border-radius: 0;
   display: block;
}

@media (max-width: 991.98px) {

   .banner-event-page .event-title,
   .banner-event-page .event-image {
      flex: 0 0 100%;
      max-width: 100%;
   }

   .banner-event-page .event-image {
      order: -1;
   }

   .banner-event-page .event-title .container {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
   }

   .time-event p {
      font-size: var(--font-size-14);
   }

   .banner-event-page .event-image {
      min-height: 340px;
   }

}

@media (max-width: 992.98px) {

   .event-address {
      font-size: var(--font-size-14);
   }

   .event-tax {
      font-size: var(--font-size-14);
   }

   .event-content {
      font-size: var(--font-size-14);
   }

   .venue-single-event p {
      font-size: var(--font-size-14);
   }

   .venue-single-event span {
      font-size: var(--font-size-14);
   }

   .being-gallery h3,
   .particpation h3 {
      font-size: var(--font-size-18);
   }

   .being-gallery p,
   .particpation p {
      font-size: var(--font-size-14);
   }

   .event-history-title {
      font-size: var(--font-size-14);
   }

   .venue-map-item a.map-link,
   .venue-map-item .map-text {
      font-size: var(--font-size-14);
   }

   .event-history .row-history {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-areas:
         "img title"
         "content content";
      column-gap: 12px;
      row-gap: 6px;
      align-items: flex-start;
   }

   .event-history .row-history .col-60.col-lg-13 {
      grid-area: img;
   }

   .event-history .row-history .col-60.col-lg-47 {
      grid-area: auto;
      display: contents;
   }

   .event-history-title-wrap {
      grid-area: title;
   }

   .event-history-content-wrap {
      margin-top: 10px;
      grid-area: content;
   }

   .event-history .row-history {
      align-items: center;
   }

   .event-history-title-wrap {
      align-self: center;
   }
}

@media (max-width: 575.98px) {
   .event-history .row {
      align-items: flex-start;
   }

   .event-last-btn {
      min-height: 64px;
   }

   .event-reservation-inner {
      gap: 0.75rem;
   }
}

/* 
news */

.post-hero-img {
   width: 100%;
   max-height: clamp(260px, 60vh, 675px);
   height: 100%;
   object-fit: cover;
   display: block;
}

.news-header-heading {
   font-size: clamp(22px, 3vw, 32px);
   font-weight: bold;
   margin-bottom: 0.75rem;
   color: #1d1d1f;
}

.news-header-lead {
   font-size: 16px;
   color: #3c3c43;
}

.news-content {
   padding: 32px 0;
}

.news-content .news-block-title {
   font-size: var(--font-size-24);
   font-weight: 600;
   margin-bottom: 12px;
   color: #1d1d1f;
}

.news-content .news-block-body {
   font-size: var(--font-size-14);
   color: #3c3c43;
}

.news-content .news-block-body p {
   margin-bottom: 0.75rem;
}

.news-content-first {
   margin-top: 32px;
}

.gallery-news-row {
   align-items: stretch;
}

.news-gallery-frame {
   position: relative;
   width: 100%;
   aspect-ratio: 4 / 3;
   overflow: hidden;
   background-color: #e5e5e5;
}

.news-gallery-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.youtube-embed {
   position: relative;
   width: 100%;
   max-width: 100%;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   background-color: #000;
}

.youtube-embed iframe,
.youtube-embed video {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
   display: block;
}


body.is-bangkok-nav-open {
   overflow: hidden;
}

.bangkok-page-scope .bangkok-mobile-nav {
   position: sticky;
   top: 0;
   z-index: 80;
   background-color: #ffffff;
}



.bangkok-page-scope .bangkok-mobile-nav-toggle {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0;
   border: none;
   background-color: #ffffff;
   cursor: pointer;
   font-size: var(--font-size-14);
   color: #111827;
}

.bangkok-page-scope .bangkok-mobile-nav-label {
   font-weight: 700;
   text-transform: uppercase;
   font-size: var(--font-size-18);
}

.bangkok-page-scope .bangkok-mobile-nav-icon svg {
   width: 16px;
   height: 16px;
   transition: transform 0.2s ease;
}

.bangkok-page-scope .bangkok-mobile-nav.is-open .bangkok-mobile-nav-icon svg {
   transform: rotate(180deg);
}

.bangkok-page-scope .bangkok-mobile-nav-menu {
   margin-top: 4px;
   padding-top: 6px;
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.bangkok-page-scope .bangkok-mobile-nav-item {
   width: 100%;
   text-align: left;
   padding: 6px 12px;
   border: none;
   background-color: transparent;
   font-size: var(--font-size-16);
   line-height: 1.5;
   font-weight: 600;
   color: var(--common-gray-800);
   cursor: pointer;
}

.bangkok-page-scope .bangkok-mobile-nav-item:hover {
   background-color: #F3F4F6;
}

.bangkok-page-scope .bangkok-mobile-nav-item:active,
.bangkok-page-scope .bangkok-mobile-nav-item:focus-visible {
   outline: none;
   background-color: #E5E7EB;
}

.bangkok-page-scope .bangkok-mobile-nav-backdrop {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.35);
   z-index: 60;
}

.bangkok-page-scope [hidden] {
   display: none !important;
}

@media (min-width: 992px) {
   .bangkok-page-scope .bangkok-mobile-nav {
      display: none;
   }

   .bangkok-page-scope .bangkok-mobile-nav-backdrop {
      display: none !important;
   }
}

@media (max-width: 991.98px) {
   .news-content {
      padding: 0px 0 32px 0;
   }
}

@media (max-width: 767.98px) {
   /* .news-content .news-block-title {
         font-size: 20px;
      } */

   .news-content .news-block-body {
      font-size: var(--font-size-14);
   }

   .youtube-embed {
      aspect-ratio: 4 / 3;
   }

   .news-gallery-frame {
      aspect-ratio: 3 / 2;
   }
}