:root {
  color-scheme: dark;
}

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.preload * a,
.preload a {
  pointer-events: none !important;
  cursor: progress !important;
}

.preload .navbar-toggler {
  opacity: 0 !important;
}

.langbutton {
  position: relative;
  display: block;
  width: 40px;
  height: 30px;
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  padding: 0.625rem 0;
  margin-left: 15px;
  line-height: 50px;
  cursor: pointer;
  border-radius: 3px;
}

#langbutton {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  font-family: 'Graphik TH', sans-serif;
  font-weight: 500;
  transition: none;
  color: #1da1f2;
  margin: 0 0 0 10px;
  transition: all 0.15s ease-in-out;
  will-change: transform, animation;
}

/* pop only when actually switching language (site.js adds .active on click) — not on every page load */
#langbutton.active {
  animation: langButton 0.2s ease-in-out;
  -webkit-animation: langButton 0.2s ease-in-out;
}

#langbutton,
#langbutton * {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  -webkit-font-smoothing: subpixel-antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

#langbutton .ripple-container {
  display: none;
}

#langbutton:visited *,
#langbutton:hover *,
#langbutton:focus *,
#langbutton:active * {
  color: #1da1f2 !important;
}

#langbutton:hover {
  transform: scale(1.05) translateZ(0);
}

#langbutton .langwrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

@keyframes langButton {
  0% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.langwrapper i {
  display: inline;
}

.langwrapper p {
  display: inline;
  margin-bottom: 2px;
  margin-left: 6px;
  font-size: 15px;
}

.langwrapper div {
  transform: translateX(0);
  transition: all 0.15s ease-in-out !important;
  opacity: 0.5;
}

#langbutton:focus .langwrapper .active,
#langbutton:active .langwrapper .active {
  transform: translateX(33px);
  opacity: 0.5;
}

#langbutton:focus .langwrapper div,
#langbutton:active .langwrapper div {
  transform: translateX(-33px);
  opacity: 1;
}

#langbutton:not(:active) .langwrapper .active {
  transform: translateX(0);
  opacity: 1;
}

#langbutton:not(:active) .langwrapper div {
  transform: translateX(0);
  opacity: 0.5;
}

#langbutton.active .langwrapper .active {
  transform: translateX(33px);
  opacity: 0.5;
}

#langbutton.active .langwrapper div {
  transform: translateX(-33px);
  opacity: 1;
}

#langbutton span {
  height: 11px;
  width: 2px;
  margin-top: -1px;
  background-color: #1da1f2;
  opacity: 0.5;
  margin-left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  background: #1da1f2;
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 4px 0;
}

.skip-link:focus {
  left: 0;
  color: #fff;
}

#indextitle,
.seo-page-title {
  pointer-events: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  display: inline-flex;
  overflow: hidden;
  position: absolute;
  height: 0;
  width: 0;
  z-index: -1;
  opacity: 0;
}

.modal {
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.modal-open>.wrapper,
.gUhQEu {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.modal-open>.wrapper::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.gUhQEu::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  display: none !important;
}

.modal-dialog {
  margin: 100px 0 !important;
  display: flex;
  justify-content: center;
  width: unset;
  max-width: unset !important;
}

.modal-content {
  flex-basis: 680px;
  min-width: 0px;
  background: #16223c;
  color: #fff;
  padding: 40px;
  width: 100%;
  font-family: 'Graphik TH', sans-serif;
  border-radius: 16px;
  display: inline-flex;
  padding: 25px;
  border: none !important;
  box-shadow: none !important;
}

.modal-content .close {
  position: absolute;
  background-color: #fff !important;
  width: 40px !important;
  height: 40px !important;
  top: 0 !important;
  right: 0 !important;
  border-radius: 0 16px 0 16px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s ease all;
  opacity: 0.6;
}

.modal-content .close:hover {
  opacity: 1;
}

.modal-content .close svg {
  position: absolute;
}

.modal-body {
  padding: 5px 15px;
  font-family: 'Graphik TH Loop', sans-serif;
}

.modal-header {
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-bottom: none !important;
}

#supporter {
  font-family: 'Graphik TH', sans-serif;
  color: #aaa;
  transition: all 0.15s ease-in-out 0s;
  cursor: pointer;
}

#supporter:hover {
  color: #fff;
}

#supportModal {
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#supportModal::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
  display: none;
}

#supportList {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  margin-bottom: 15px;
}

#supportList li {
  flex: 0 0 33.33%;
  padding: 3px;
  margin: 2px 0;
  box-sizing: border-box;
}

#supportList li:nth-child(6n),
#supportList li:nth-child(6n-1),
#supportList li:nth-child(6n-2) {
  background: #001226;
}

#supportNum {
  padding: 5px;
  text-align: center;
  color: rgb(29, 161, 242);
}

#supportNum span {
  color: #fff;
}

.modal-footer {
  padding: 0;
  border-top: none;
}

.modal-content h1,
.modal-content .modal-h1 {
  font-family: "Graphik TH", sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: rgb(29, 161, 242);
  margin-bottom: 1rem;
  text-align: center;
}

.modal-body p {
  text-indent: 1.25rem;
  font-family: 'Graphik TH Loop', sans-serif;
}

.modal-body p:last-of-type {
  margin-bottom: 5px;
}

.modal-body span {
  font-weight: 500;
  color: rgb(29, 161, 242);
}

@media screen and (max-width: 680px) {
  .modal-body {
    padding: 5px !important;
  }
}

@media screen and (max-width: 618px) {
  .modal-dialog {
    margin-top: 0 !important;

  }

  .modal-content {
    border-radius: 0 0 16px 16px !important;
  }

  .modal-content .close {
    width: 30px !important;
    height: 30px !important;
    border-radius: 0 0 0 8px !important
  }
}

@media screen and (max-width: 480px) {
  .modal-body .modal-content {
    padding: 15px;
  }

  .modal-body .modal-body {
    padding: 8px;
  }

  .modal-body p:last-of-type {
    margin-bottom: 0;
  }

  .modal-body .modal-footer {
    justify-content: center;
  }
}

@media screen and (max-width: 460px) {
  #supportList li {
    flex: 0 0 50%;
  }

  #supportList li:nth-child(6n),
  #supportList li:nth-child(6n-1),
  #supportList li:nth-child(6n-2) {
    background: unset;
  }

  #supportList li:nth-child(4n),
  #supportList li:nth-child(4n-1) {
    background: #001226;
  }
}

@media screen and (max-width: 360px) {
  .modal-content {
    padding: 20px 0 !important;
  }

  #filmModal .modal-content {
    padding: 20px 20px 20px !important;
  }

  #filmInfo #channelLogo {
    max-width: 60px !important;
  }

  .modal-body {
    padding: 0 !important;
  }

  #supportList {
    margin-bottom: 8px !important;
  }
}

.modal-body .btn {
  font-family: 'Graphik TH', sans-serif;
  font-weight: 600;
  color: #fff;
  text-align: center;
  background: transparent;
  position: relative;
  height: 40px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  box-shadow: none !important;
  border-radius: 9999px;
  width: 100px;
  right: 0;
}

.modal-body .btn:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgb(0, 172, 238) 0%, rgb(0, 77, 228) 100%);
  z-index: -2;
  border-radius: 9999px;
}

.modal-body .btn:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(0, 172, 238);
  z-index: -1;
  transition: all 0.15s ease-in-out 0s;
  opacity: 0;
  border-radius: 9999px;
  top: 0;
  left: 0;
}

.modal.fade {
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  background: radial-gradient(circle at left top, transparent, rgba(0, 0, 0, 0.35)), radial-gradient(circle at left bottom, transparent, rgba(0, 0, 0, 0.53)) !important;
  transition: all 0.15s ease-in-out 0s;
}

.modal.fade.show {
  opacity: 1;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding-right: 0 !important;
  height: 100lvh !important;
}

.modal-backdrop {
  opacity: 0 !important;
  height: 100lvh !important;
}

#filmModal .modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#filmModal .modal-content {
  padding: 30px 60px;
  flex-basis: 680px;
  min-width: 0px;
  align-self: flex-start;
}

#filmType {
  font-family: "Graphik TH", sans-serif;
  font-weight: 400;
  color: #f99a30;
  font-size: 15px;
  text-transform: uppercase;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
  line-height: 1.3;
}

#filmTitle {
  font-size: 24px;
  margin-top: 12px;
  margin-bottom: 0;
  line-height: 1.8rem;
}

#filmExtra {
  font-family: "Graphik TH", sans-serif;
  font-weight: 600;
  text-align: center;
  color: #1da1f2;
  font-size: 20px;
}

#filmRole {
  margin-top: 4px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  color: #ddd;
  font-family: 'Graphik TH Loop', sans-serif;
}

#filmRole .as {
  font-size: .85rem;
}

#filmRole .title {
  margin-left: .25rem;
  color: #ddd;
}

#filmHashtag {
  font-family: "Graphik TH Loop", sans-serif;
  font-size: 15px;
  font-weight: 300;
  font-style: italic;
  color: #1da1f2 !important;
  margin: 0 0 -10px;
}

#filmInfo {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin: 25px 0px 20px;
}

#filmInfo>div {
  width: 50%;
}

#filmInfo .dateTitle,
#filmInfo .channelTitle {
  display: flex;
  align-items: center;
  color: #ccc;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
}

#filmInfo .dateTitle i {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  top: -1.5px;
  width: 12px;
  height: 12px;
  background-size: contain;
  background-position: center center;
  margin-right: 8px;
  background-color: #ccc;
  mask-image: url('../icon/calendar.svg');
  mask-repeat: no-repeat;
  -webkit-mask-image: url('../icon/calendar.svg');
  -webkit-mask-repeat: no-repeat;
}

#filmInfo .dateTitle i {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  top: -1px;
  width: 12px;
  height: 12px;
  background-size: contain;
  background-position: center center;
  margin-right: 8px;
  background-color: #ccc;
  mask-image: url('../icon/calendar.svg');
  mask-repeat: no-repeat;
  -webkit-mask-image: url('../icon/calendar.svg');
  -webkit-mask-repeat: no-repeat;
}

#filmInfo .channelTitle.tv i:after {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  content: "\f8dd";
  position: relative;
  width: 16px;
  height: 16px;
  font-size: 13px;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  line-height: 16px;
  text-rendering: optimizeLegibility;
  padding-right: 20px;
}

/* เดิมใช้ mask-image ชี้ icon/clapperboard.svg ที่ไม่มีจริง (404 บนเว็บเดิมด้วย — Chrome ไม่โชว์อะไร,
   Firefox โชว์ผิดเป็นปฏิทิน) — เปลี่ยนเป็น Font Awesome แบบเดียวกับไอคอนทีวีของ .tv (คำสั่งเจ้าของ 6 ก.ค. 2026) */
#filmInfo .channelTitle.film i {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  top: -1px;
  margin-right: 8px;
}

#filmInfo .channelTitle.film i:after {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  content: "\f8a9";
  font-size: 13px;
  line-height: 16px;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: optimizeLegibility;
}

#filmInfo .dateInfo,
#filmInfo .channelInfo {
  margin-top: 12px;
  font-family: 'Graphik TH Loop', sans-serif;
  font-size: 14px;
}

#filmInfo .channel {
  position: relative;
}

#filmInfo #channelLogo {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 75px;
  top: 0;
  right: 0;
  user-select: none;
  touch-action: pan-y;
  -webkit-user-drag: none;
  font-size: 0px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

/* per-channel logo rules moved to generated /assets/css/channel-logos.css (data: content/site/channels.json — แก้ผ่าน CMS) */

#filmModal hr {
  border-top: solid 1px rgba(255, 255, 255, 0.098);
  width: 100%;
}

#filmWatch {
  margin-top: .5rem;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#filmWatch a {
  display: inline-flex;
  width: 100%;
  height: 50px;
  justify-content: center;
  align-items: center;
  border-radius: 9999px;
  transition: all .2s ease-in-out;
  flex: 0 1;
  flex-basis: calc(50% - 5px);
  margin: 10px auto 0;
}

#filmWatch a:nth-child(-n+2) {
  margin-top: 0;
}

#filmWatch a i {
  max-height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#filmWatch a:hover {
  background-color: rgba(247, 249, 249, 0.1);
}

#filmWatch a:active {
  background-color: rgba(247, 249, 249, 0.15);
}

#filmWatch a span {
  font-weight: 500;
  color: #fff;
  position: relative;
}

#filmWatch a span {
  top: 1px;
  padding-left: 3px;
  font-size: 20px;
  line-height: 24px;
}

#filmWatch a[href*="youtu.be"] i,
#filmWatch a[href*="youtube.com"] i {
  width: 90px;
  height: 20px;
  background-image: url(../brand/yt_logo_rgb_dark.svg);
}

#filmWatch a[href*="youtu.be"]:has(span) i,
#filmWatch a[href*="youtube.com"]:has(span) i {
  width: 28px;
  height: 20px;
  background-image: url(../brand/yt_icon_dark.svg);
}

#filmWatch a[href*="facebook.com"] span,
#filmWatch a[href*="fb.watch"] span {
  top: 1.5px;
}

#filmWatch a[href*="facebook.com"] i,
#filmWatch a[href*="fb.watch"] i {
  width: auto;
  height: 20px;
}

#filmWatch a[href*="facebook.com"] i:before,
#filmWatch a[href*="fb.watch"] i:before {
  content: '';
  display: inline-flex;
  position: relative;
  width: 22px;
  height: 22px;
  background: url(../brand/Facebook_Logo_Primary.svg) no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

#filmWatch a[href*="facebook.com"] i::after,
#filmWatch a[href*="fb.watch"] i:after {
  content: '';
  display: inline-flex;
  position: relative;
  top: -2px;
  width: 100px;
  height: 18px;
  background: url(../brand/Facebook_logo_2023.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: 4px;
}

#filmWatch a[href*="facebook.com"]:has(span) i,
#filmWatch a[href*="fb.watch"]:has(span) i {
  display: inline-flex;
  width: 22px;
  height: 22px;
}

#filmWatch a[href*="facebook.com"]:has(span) i:after,
#filmWatch a[href*="fb.watch"]:has(span) i i:after {
  display: none;
}

#filmWatch a[href*="netflix.com"] i {
  width: 74px;
  height: 20px;
  background-image: url(../brand/Netflix_Logo_RGB.svg);
}

#filmWatch a[href*="hotstar.com"] i {
  width: 138px;
  height: 42px;
  background-image: url(../brand/disney-hotstar-logo-dark.svg);
  max-height: unset;
}

#filmWatch a[href*="viu.com"] i {
  width: 62px;
  height: 24px;
  background-image: url(../brand/viu.svg);
  max-height: unset;
}

#filmWatch a[href*="wetv.vip"] i,
#filmWatch a[href*="https://bit.ly/BadBuddySeriesEP1"] i {
  width: 77px;
  height: 20px;
  background-image: url(../brand/wetv-logo.svg);
}

#filmWatch a[href*="monomax.me"] i {
  width: 83px;
  height: 20px;
  background-image: url(../brand/monomax.png);
}

#filmWatch a[href*="seeme.me"] i {
  width: 89px;
  height: 20px;
  background-image: url(../brand/seeme.png);
}

#filmWatch a[href*="oned.net"] i,
#filmWatch a[href*="oned.page"] i {
  width: 56px;
  height: 20px;
  background-image: url(../brand/oneD-logo.png);
}

#filmWatch a[href*="trueid.net"] i {
  width: 80px;
  height: 20px;
  background-image: url(../brand/trueid-logo.svg);
}

#filmWatch a[href*="ch3plus.com"] i {
  width: 36px;
  height: 36px;
  background-image: url(../brand/ch3plus-logo-2021.svg);
  max-height: unset;
}

#filmWatch a[href*="dailymotion.com"] i {
  width: 102px;
  height: 16px;
  background-image: url(../brand/Dailymotion_logo_2023.svg);
}

#filmTrailer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px -60px 20px;
  position: relative;
}

#filmTrailer iframe {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  height: 100%;
  width: 100%;
  display: block;
  border: none;
  overflow: hidden;
  background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Bpbm5lciIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxzdHlsZT4KLnNwaW5uZXIgewoJYW5pbWF0aW9uOiByb3RhdG9yIDVzIGxpbmVhciBpbmZpbml0ZTsKCXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlcjsKCW92ZXJmbG93OiBoaWRkZW47Cn0KQGtleWZyYW1lcyByb3RhdG9yewoJMCUgewoJCXRyYW5zZm9ybTpyb3RhdGUoMGRlZyk7Cgl9CgkxMDAlIHsKCQl0cmFuc2Zvcm06cm90YXRlKDM2MGRlZyk7Cgl9Cn0KLnBhdGggewogIHN0cm9rZS1kYXNoYXJyYXk6IDI3MDsKICBzdHJva2UtZGFzaG9mZnNldDogMDsKICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgc3Ryb2tlOiAjMWRhMWYyOwogIGFuaW1hdGlvbjogZGFzaCAxLjRzIGVhc2UtaW4tb3V0IGluZmluaXRlOwp9CkBrZXlmcmFtZXMgZGFzaCB7CgkwJSB7CgkJc3Ryb2tlLWRhc2hvZmZzZXQ6IDI2NTsKCX0KCTUwJSB7CgkgIHN0cm9rZS1kYXNob2Zmc2V0OiA2NTsKICAgIHRyYW5zZm9ybTpyb3RhdGUoOTBkZWcpOwogIH0KICAxMDAlIHsKICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAyNjU7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOwogIH0KfQo8L3N0eWxlPgo8Y2lyY2xlIGNsYXNzPSJwYXRoIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjEwIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIj48L2NpcmNsZT4KPC9zdmc+");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50px;
}

#filmTrailer img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  height: 100%;
  width: 100%;
  display: block;
  border: none;
  overflow: hidden;
  background: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Bpbm5lciIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxzdHlsZT4KLnNwaW5uZXIgewoJYW5pbWF0aW9uOiByb3RhdG9yIDVzIGxpbmVhciBpbmZpbml0ZTsKCXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlcjsKCW92ZXJmbG93OiBoaWRkZW47Cn0KQGtleWZyYW1lcyByb3RhdG9yewoJMCUgewoJCXRyYW5zZm9ybTpyb3RhdGUoMGRlZyk7Cgl9CgkxMDAlIHsKCQl0cmFuc2Zvcm06cm90YXRlKDM2MGRlZyk7Cgl9Cn0KLnBhdGggewogIHN0cm9rZS1kYXNoYXJyYXk6IDI3MDsKICBzdHJva2UtZGFzaG9mZnNldDogMDsKICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgc3Ryb2tlOiAjMWRhMWYyOwogIGFuaW1hdGlvbjogZGFzaCAxLjRzIGVhc2UtaW4tb3V0IGluZmluaXRlOwp9CkBrZXlmcmFtZXMgZGFzaCB7CgkwJSB7CgkJc3Ryb2tlLWRhc2hvZmZzZXQ6IDI2NTsKCX0KCTUwJSB7CgkgIHN0cm9rZS1kYXNob2Zmc2V0OiA2NTsKICAgIHRyYW5zZm9ybTpyb3RhdGUoOTBkZWcpOwogIH0KICAxMDAlIHsKICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAyNjU7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOwogIH0KfQo8L3N0eWxlPgo8Y2lyY2xlIGNsYXNzPSJwYXRoIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjEwIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIj48L2NpcmNsZT4KPC9zdmc+");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60px;
}

.dark-edition .table-hover tbody tr[data-film-id] td a:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.dark-edition .table-hover tbody tr[data-film-id] td a:active {
  background-color: rgba(0, 0, 0, 0.325);
}

@media screen and (max-width: 480px) {
  #filmModal .modal-content {
    padding: 20px 20px 20px;
  }

  #filmTrailer {
    margin: 20px -20px 15px;
  }

  #filmInfo {
    flex-direction: column;
    margin: 10px 0 15px 0;
  }

  #filmInfo>div {
    width: 100%;
  }

  #filmInfo .channel {
    margin-top: 20px;
  }

  #filmModal hr {
    margin: 0 0 .75rem;
  }

  #filmWatch a {
    height: 34px;
    flex-basis: 100%;
    margin-top: 6px;
  }

  #filmWatch a:nth-child(2) {
    margin-top: 5px;
  }

  #filmWatch a i {
    max-height: 18px;
  }

  #filmWatch a[href*="youtu.be"]:has(span) i,
  #filmWatch a[href*="youtube.com"]:has(span) i {
    width: 20px;
    height: 14px;
  }

  #filmWatch a[href*="facebook.com"] i:before,
  #filmWatch a[href*="fb.watch"] i:before {
    width: 20px;
    height: 20px;
  }

  #filmWatch a[href*="facebook.com"] i::after,
  #filmWatch a[href*="fb.watch"] i:after {
    top: -3px;
    width: 84px;
    height: 15px;
    margin-left: 3px;
  }

  #filmWatch a[href*="facebook.com"]:has(span) i,
  #filmWatch a[href*="fb.watch"]:has(span) i {
    display: inline-flex;
    width: 20px;
    height: 20px;
    max-height: unset;
  }

  #filmWatch a[href*="ch3plus.com"] i {
    width: 30px;
    height: 30px;
  }

  #filmWatch a span,
  #filmWatch a span {
    top: .5px !important;
    font-size: 16px !important;
    line-height: 18px !important;
  }

  #filmWatch a[href*="viu.com"] i {
    max-height: 22px;
  }

  #filmWatch a[href*="hotstar.com"] i {
    max-height: 30px;
  }

  #filmWatch a[href*="dailymotion.com"] i {
    max-height: 14px;
  }
}

@media screen and (max-width: 360px) {}

/*#filmTrailer::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  z-index: 999999;
  aspect-ratio: 16 / 9;
  position: absolute;
  user-select: none; 
  -webkit-user-select: none;  
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}*/

html,
html * {
  -webkit-text-size-adjust: none;
  touch-action: pan-x pan-y;
}

html[lang="en"] .langbutton {
  background-image: url(../flags/4x3/th.svg);
}

html[lang="th"] .langbutton:before,
html[lang="th"] .langbutton:after {
  content: '';
  position: absolute;
  display: block;
  width: 40px;
  height: 30px;
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  border-radius: 3px;
  top: 0;
}

html[lang="th"] .langbutton:before {
  background-image: url(../flags/4x3/us.svg);
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}

html[lang="th"] .langbutton:after {
  background-image: url(../flags/4x3/gb.svg);
  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

.logo span {
  display: block;
  font-size: 0.8em;
}

#books {
  display: none;
  width: 25px;
  height: 25px;
  background: url(../logo/books.png);
  background-size: cover;
  line-height: 25px;
  vertical-align: bottom;
}

.sidebar .logo {
  margin-top: 1em;
}

#logo {
  display: inline-block;
  width: 160px;
  height: 76px;
  background: url(../logo/logo-v2.svg);
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 0;
}

/* html[lang="th"] #logo {
  background: url(../logo/logo-th.svg);
}

html[lang="en"] #logo {
  margin-top: 6.5px;
  width: 180px;
  height: 34px;
  background: url(../logo/logo-en.svg);
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

html[lang="en"] #books {
  width: 24px;
  height: 24px;
  margin-bottom: 4.5px;
}

*/

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes textfadeIn {
  from {
    color: rgba(221, 221, 221, 0);
  }

  to {
    color: rgba(221, 221, 221, 1);
  }
}

#update {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  width: 145px;
}

html[lang*="en"] #update {
  width: 135px;
}

#update update {
  width: 81.5px;
  max-width: 81.5px;
  display: inline-flex;
  justify-content: space-evenly;
}

/*html[lang="en"] #update {
  margin-top: 3.5px;
}*/

update,
#year {
  opacity: 0;
}

.infobox {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  box-sizing: border-box;
}

/* date/year are baked into the HTML now (updated by the daily rebuild) — no fade-in;
   the old animation replayed on every navigation and read as flicker */
update.current,
#year.current {
  opacity: 1;
}

.nav-item .nav-link i {
  width: 30px;
  height: 30px;
  opacity: 0.8;
  transition: opacity .2s ease-in-out !important;
  background-repeat: no-repeat;
  background-position: center center;
}

.nav-item.active {
  cursor: pointer !important;
}

.nav-item.active .nav-link:first-child i:before {
  content: '';
  display: inline-flex;
  overflow: hidden;
  position: absolute;
  height: 0;
  width: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}

.sidebar li.active a p,
.sidebar li a:active p {
  letter-spacing: -.075px;
}

li.active:has(~ li a:active) a p,
.sidebar li:has(a:active)+li.active a p {
  letter-spacing: normal !important;
}

html[lang*="en"] .sidebar li a.active p,
html[lang*="en"] .sidebar li a:active p,
.sidebar #triplen.active a p,
.sidebar #triplen a:active p {
  letter-spacing: -.2px;
}

#triplen.active:has(~ li a:active) a p,
.sidebar li:has(a:active)~#triplen.active a p {
  letter-spacing: normal !important;
}

html[lang*="en"] #events:has(~ li a:active) p,
html[lang*="en"] li:has(a:active)+#events p,
html[lang*="en"] #events p {
  letter-spacing: -.15px;
}

#info i,
#info:has(~ li a:active) i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MCIgaGVpZ2h0PSI5MCIgdmlld0JveD0iMCAwIDkwIDkwIj4KICA8cGF0aCBkPSJNNDUsOC40NGMyMC4xOSwwLDM2LjU2LDE2LjM3LDM2LjU2LDM2LjU2cy0xNi4zNywzNi41Ni0zNi41NiwzNi41NlM4LjQ0LDY1LjE5LDguNDQsNDUsMjQuODEsOC40NCw0NSw4LjQ0Wk00NSw5MGMyNC44NSwwLDQ1LTIwLjE1LDQ1LTQ1UzY5Ljg1LDAsNDUsMCwwLDIwLjE1LDAsNDVzMjAuMTUsNDUsNDUsNDVaTTM3Ljk3LDU5LjA2Yy0yLjM0LDAtNC4yMiwxLjg4LTQuMjIsNC4yMnMxLjg4LDQuMjIsNC4yMiw0LjIyaDE0LjA2YzIuMzQsMCw0LjIyLTEuODgsNC4yMi00LjIycy0xLjg4LTQuMjItNC4yMi00LjIyaC0xLjQxdi0xNS40N2MwLTIuMzQtMS44OC00LjIyLTQuMjItNC4yMmgtOC40NGMtMi4zNCwwLTQuMjIsMS44OC00LjIyLDQuMjJzMS44OCw0LjIyLDQuMjIsNC4yMmg0LjIydjExLjI1aC00LjIyWk00NSwzMy43NWMzLjExLDAsNS42Mi0yLjUyLDUuNjItNS42MnMtMi41Mi01LjYyLTUuNjItNS42Mi01LjYyLDIuNTItNS42Miw1LjYyLDIuNTIsNS42Miw1LjYyLDUuNjJaIiBzdHlsZT0iZmlsbDogI2ZmZjsiLz4KPC9zdmc+");
  background-size: 24px;
}

#info.active i,
#info a:active i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MCIgaGVpZ2h0PSI5MCIgdmlld0JveD0iMCAwIDkwIDkwIj4KICA8cGF0aCBkPSJNNDUsMEMyMC4xNSwwLDAsMjAuMTUsMCw0NXMyMC4xNSw0NSw0NSw0NSw0NS0yMC4xNSw0NS00NVM2OS44NSwwLDQ1LDBaTTQ1LDIyLjVjMy4xMSwwLDUuNjIsMi41Miw1LjYyLDUuNjJzLTIuNTIsNS42Mi01LjYyLDUuNjItNS42Mi0yLjUyLTUuNjItNS42MiwyLjUyLTUuNjIsNS42Mi01LjYyWk01Mi4wMyw2Ny41aC0xNC4wNmMtMi4zNCwwLTQuMjItMS44OC00LjIyLTQuMjJzMS44OC00LjIyLDQuMjItNC4yMmg0LjIydi0xMS4yNWgtNC4yMmMtMi4zNCwwLTQuMjItMS44OC00LjIyLTQuMjJzMS44OC00LjIyLDQuMjItNC4yMmg4LjQ0YzIuMzQsMCw0LjIyLDEuODgsNC4yMiw0LjIydjE1LjQ3aDEuNDFjMi4zNCwwLDQuMjIsMS44OCw0LjIyLDQuMjJzLTEuODgsNC4yMi00LjIyLDQuMjJaIiBzdHlsZT0iZmlsbDogI2ZmZjsiLz4KPC9zdmc+");
}

#photoshoots i,
#photoshoots:has(~ li a:active) i,
li:has(a:active)+#photoshoots i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI5MiIgdmlld0JveD0iMCAwIDcyIDkyIj4KICA8cGF0aCBkPSJNNjAsMEgxMkM1LjM4LDAsMCw1LjM4LDAsMTJ2NjhjMCw2LjYyLDUuMzgsMTIsMTIsMTJoNDhjNi42MiwwLDEyLTUuMzgsMTItMTJWMTJjMC02LjYyLTUuMzgtMTItMTItMTJaTTYzLDgwYzAsMS42NS0xLjM1LDMtMywzSDEyYy0xLjY1LDAtMy0xLjM1LTMtM1YxMmMwLTEuNjUsMS4zNS0zLDMtM2g0OGMxLjY1LDAsMywxLjM1LDMsM3Y2OFoiIHN0eWxlPSJmaWxsOiAjZmZmOyIvPgogIDxwYXRoIGQ9Ik01Mi42Miw1NC4yM2MtMS42Mi0xLjI4LTMuNjItMi01Ljg5LTIuNDEtMi4yNi0uNDItNC45Ni0uNTYtOC4xLS41NmgtNS4yNmMtMy4xNCwwLTUuODQuMTQtOC4xLjU2LTIuMjcuNDItNC4yNywxLjE1LTUuODksMi40MS0zLjM2LDIuNjMtNC4yMSw2Ljg2LTQuMzcsMTEuOTctLjA4LDIuNDksMS42Niw0LjcyLDQuMjIsNS4xMSwyLjc0LjQxLDguMDguOTgsMTYuNzcuOThzMTQuMDMtLjU2LDE2Ljc3LS45OGMyLjU2LS4zOCw0LjMtMi42Miw0LjIyLTUuMTEtLjE3LTUuMTEtMS05LjM0LTQuMzctMTEuOTdaIiBzdHlsZT0iZmlsbDogI2ZmZjsiLz4KICA8cGF0aCBkPSJNMzYsNDZjMy43OCwwLDcuMTEtMS4yMSw5LjUzLTMuNjEsMi40MS0yLjQsMy42MS01Ljc0LDMuNjEtOS41M3MtMS4yMS03LjEyLTMuNjEtOS41My01Ljc1LTMuNjEtOS41My0zLjYxLTcuMTIsMS4yMS05LjUzLDMuNjFjLTIuNCwyLjQtMy42MSw1Ljc0LTMuNjEsOS41M3MxLjIxLDcuMTIsMy42MSw5LjUzYzIuNCwyLjQsNS43NCwzLjYxLDkuNTMsMy42MVoiIHN0eWxlPSJmaWxsOiAjZmZmOyIvPgo8L3N2Zz4=");
  background-size: 19px;
}

#photoshoots .blur p:after,
#photoshoots:has(~ li a:active) p:after,
li:has(a:active)~#photoshoots p:after {
  opacity: 0;
}

#photoshoots.active i,
#photoshoots a:active i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI5MiIgdmlld0JveD0iMCAwIDcyIDkyIj4KICA8cGF0aCBkPSJNNjAsMEgxMkM1LjM4LDAsMCw1LjM4LDAsMTJ2NjhjMCw2LjYyLDUuMzgsMTIsMTIsMTJoNDhjNi42MiwwLDEyLTUuMzgsMTItMTJWMTJjMC02LjYyLTUuMzgtMTItMTItMTJaTTI2LjQ3LDIzLjMzYzIuNC0yLjQsNS43NC0zLjYxLDkuNTMtMy42MXM3LjEyLDEuMjEsOS41MywzLjYxLDMuNjEsNS43NCwzLjYxLDkuNTMtMS4yLDcuMTItMy42MSw5LjUzYy0yLjQxLDIuNC01Ljc0LDMuNjEtOS41MywzLjYxcy03LjEyLTEuMjEtOS41My0zLjYxYy0yLjQtMi40LTMuNjEtNS43NC0zLjYxLTkuNTNzMS4yMS03LjEyLDMuNjEtOS41M1pNNTIuNzcsNzEuMzFjLTIuNzQuNDEtOC4wOC45OC0xNi43Ny45OHMtMTQuMDMtLjU2LTE2Ljc3LS45OGMtMi41Ni0uMzgtNC4zMS0yLjYyLTQuMjItNS4xMS4xNy01LjExLDEuMDEtOS4zNCw0LjM3LTExLjk3LDEuNjItMS4yNywzLjYyLTEuOTksNS44OS0yLjQxLDIuMjYtLjQyLDQuOTYtLjU2LDguMS0uNTZoMHM1LjI2LDAsNS4yNiwwYzMuMTQsMCw1Ljg0LjE0LDguMS41NiwyLjI3LjQxLDQuMjcsMS4xNCw1Ljg5LDIuNDEsMy4zNywyLjYzLDQuMjEsNi44Niw0LjM3LDExLjk3LjA4LDIuNDktMS42Niw0LjcyLTQuMjIsNS4xMVoiIHN0eWxlPSJmaWxsOiAjZmZmOyIvPgo8L3N2Zz4=");
}

#commercials i,
#commercials:has(~ li a:active) i,
li:has(a:active)~#commercials i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI3MiIgdmlld0JveD0iMCAwIDk2IDcyIj4KICA8cGF0aCBkPSJNMTIsOWMtMS42NSwwLTMsMS4zNS0zLDN2NDhjMCwxLjY1LDEuMzUsMywzLDNoNzJjMS42NSwwLDMtMS4zNSwzLTNWMTJjMC0xLjY1LTEuMzUtMy0zLTNIMTJaTTAsMTJDMCw1LjM4LDUuMzgsMCwxMiwwaDcyYzYuNjIsMCwxMiw1LjM4LDEyLDEydjQ4YzAsNi42Mi01LjM4LDEyLTEyLDEySDEyYy02LjYyLDAtMTItNS4zOC0xMi0xMlYxMlpNMjcsMzB2Nmg5di02YzAtMS42NS0xLjM1LTMtMy0zaC0zYy0xLjY1LDAtMywxLjM1LTMsM1pNMzYsNDkuNXYtNC41aC05djQuNWMwLDIuNDktMi4wMSw0LjUtNC41LDQuNXMtNC41LTIuMDEtNC41LTQuNXYtMTkuNWMwLTYuNjIsNS4zOC0xMiwxMi0xMmgzYzYuNjIsMCwxMiw1LjM4LDEyLDEydjE5LjVjMCwyLjQ5LTIuMDEsNC41LTQuNSw0LjVzLTQuNS0yLjAxLTQuNS00LjVaTTc4LDIyLjV2MjdjMCwyLjQ5LTIuMDEsNC41LTQuNSw0LjUtMS4zMywwLTIuNTMtLjU4LTMuMzYtMS41LTEuOTEuOTYtNC4wOSwxLjUtNi4zOSwxLjUtNy44OCwwLTE0LjI1LTYuMzgtMTQuMjUtMTQuMjVzNi4zOC0xNC4yNSwxNC4yNS0xNC4yNWMxLjg2LDAsMy42Mi4zNiw1LjI1Ljk5di0zLjk5YzAtMi40OSwyLjAxLTQuNSw0LjUtNC41czQuNSwyLjAxLDQuNSw0LjVaTTYzLjc1LDM0LjVjLTIuOSwwLTUuMjUsMi4zNS01LjI1LDUuMjVzMi4zNSw1LjI1LDUuMjUsNS4yNSw1LjI1LTIuMzUsNS4yNS01LjI1LTIuMzUtNS4yNS01LjI1LTUuMjVaIiBzdHlsZT0iZmlsbDogI2ZmZjsiLz4KPC9zdmc+");
  background-size: 25px;
  position: relative;
  top: -1px;
}

#commercials.active i,
#commercials a:active i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI3MiIgdmlld0JveD0iMCAwIDk2IDcyIj4KICA8Y2lyY2xlIGN4PSI2My43NSIgY3k9IjM5Ljc1IiByPSI1LjI1IiBzdHlsZT0iZmlsbDogI2ZmZjsiLz4KICA8cGF0aCBkPSJNMzYsMzBjMC0xLjY1LTEuMzUtMy0zLTNoLTNjLTEuNjUsMC0zLDEuMzUtMywzdjZoOXYtNloiIHN0eWxlPSJmaWxsOiAjZmZmOyIvPgogIDxwYXRoIGQ9Ik04NCwwSDEyQzUuMzgsMCwwLDUuMzgsMCwxMnY0OGMwLDYuNjIsNS4zOCwxMiwxMiwxMmg3MmM2LjYyLDAsMTItNS4zOCwxMi0xMlYxMmMwLTYuNjItNS4zOC0xMi0xMi0xMlpNMjcsNDV2NC41YzAsMi40OS0yLjAxLDQuNS00LjUsNC41cy00LjUtMi4wMS00LjUtNC41di0xOS41YzAtNi42Miw1LjM4LTEyLDEyLTEyaDNjNi42MiwwLDEyLDUuMzgsMTIsMTJ2MTkuNWMwLDIuNDktMi4wMSw0LjUtNC41LDQuNXMtNC41LTIuMDEtNC41LTQuNXYtNC41aC05Wk03OCw0OS41YzAsMi40OS0yLjAxLDQuNS00LjUsNC41LTEuMzMsMC0yLjUzLS41OC0zLjM2LTEuNS0xLjkxLjk2LTQuMDksMS41LTYuMzksMS41LTcuODgsMC0xNC4yNS02LjM4LTE0LjI1LTE0LjI1czYuMzgtMTQuMjUsMTQuMjUtMTQuMjVjMS44NiwwLDMuNjIuMzYsNS4yNS45OXYtMy45OWMwLTIuNDksMi4wMS00LjUsNC41LTQuNXM0LjUsMi4wMSw0LjUsNC41djI3WiIgc3R5bGU9ImZpbGw6ICNmZmY7Ii8+Cjwvc3ZnPg==");
}

#discography i,
#discography:has(~ li a:active) i,
li:has(a:active)~#discography i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MCIgaGVpZ2h0PSI3MCIgdmlld0JveD0iMCAwIDkwIDcwIj4KICA8cGF0aCBkPSJNMzcuNSwwQzIzLjY5LDAsMTIuNSwxMS4xOSwxMi41LDI1YzAsLjc3LjAzLDEuNTMuMTEsMi4yOEM1LjE0LDMwLjk0LDAsMzguNjEsMCw0Ny41YzAsMTIuNDIsMTAuMDgsMjIuNSwyMi41LDIyLjVoNDcuNWMxMS4wNSwwLDIwLTguOTUsMjAtMjAsMC03LjgtNC40NS0xNC41My0xMC45NS0xNy44NC42Mi0xLjg2Ljk1LTMuODQuOTUtNS45MSwwLTEwLjM2LTguMzktMTguNzUtMTguNzUtMTguNzUtMS44LDAtMy41NS4yNS01LjIuNzNDNTEuNDcsMy4xOSw0NC44NiwwLDM3LjUsMGgwWk0yMC42NywyNS4yN2MwLTkuNDEsNy42Mi0xNy4wMywxNy4wMy0xNy4wMyw1LjczLDAsMTAuNzksMi44MywxMy44OSw3LjE2LDEuMDIsMS40NCwyLjk0LDEuOTUsNC41NCwxLjE5LDEuNDEtLjY3LDMtMS4wNSw0LjY4LTEuMDUsNi4wNSwwLDEwLjk1LDQuOSwxMC45NSwxMC45NSwwLDIuMTQtLjYsNC4xNC0xLjY3LDUuODItLjYyLjk5LS43MywyLjIyLS4zLDMuM3MxLjM3LDEuOSwyLjUxLDIuMTdjNS4yOSwxLjMyLDkuMiw2LjExLDkuMiwxMS44LDAsNi43Mi01LjQ0LDEyLjE3LTEyLjE3LDEyLjE3SDIzLjA4Yy04LjA2LDAtMTQuNi02LjU0LTE0LjYtMTQuNiwwLTYuNDksNC4yNC0xMi4wMSwxMC4xMy0xMy45LDEuNzktLjU3LDIuODYtMi40MywyLjQ1LTQuMjctLjI3LTEuMi0uNDEtMi40NS0uNDEtMy43M2wuMDIuMDJoMFpNNTMuNzUsMjIuNWgtNy41Yy0yLjA4LDAtMy43NSwxLjY3LTMuNzUsMy43NXYxNC4wM2MtLjgtLjE5LTEuNjQtLjI4LTIuNS0uMjgtNS41MiwwLTEwLDMuOTItMTAsOC43NXM0LjQ4LDguNzUsMTAsOC43NSwxMC0zLjkyLDEwLTguNzV2LTE2LjI1aDMuNzVjMi4wOCwwLDMuNzUtMS42NywzLjc1LTMuNzV2LTIuNWMwLTIuMDgtMS42Ny0zLjc1LTMuNzUtMy43NVoiIHN0eWxlPSJmaWxsOiAjZmZmOyIvPgo8L3N2Zz4=");
  background-size: 26px;
}

#discography .blur p:after,
#discography:has(~ li a:active) p:after,
li:has(a:active)~#discography p:after {
  opacity: 0;
}

#discography.active i,
#discography a:active i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MCIgaGVpZ2h0PSI3MCIgdmlld0JveD0iMCAwIDkwIDcwIj4KICA8cGF0aCBkPSJNNzkuMDUsMzIuMTZjLjYyLTEuODYuOTUtMy44NC45NS01LjkxLDAtMTAuMzYtOC4zOS0xOC43NS0xOC43NS0xOC43NS0xLjgsMC0zLjU1LjI1LTUuMi43M0M1MS40NywzLjE5LDQ0Ljg2LDAsMzcuNSwwLDIzLjY5LDAsMTIuNSwxMS4xOSwxMi41LDI1YzAsLjc3LjAzLDEuNTMuMTEsMi4yOEM1LjE0LDMwLjk0LDAsMzguNjEsMCw0Ny41YzAsMTIuNDIsMTAuMDgsMjIuNSwyMi41LDIyLjVoNDcuNWMxMS4wNSwwLDIwLTguOTUsMjAtMjAsMC03LjgtNC40NS0xNC41My0xMC45NS0xNy44NFpNNDAsNDBjLjg2LDAsMS43LjA5LDIuNS4yOHYtMTQuMDNjMC0yLjA4LDEuNjctMy43NSwzLjc1LTMuNzVoNy41YzIuMDgsMCwzLjc1LDEuNjcsMy43NSwzLjc1djIuNWMwLDIuMDgtMS42NywzLjc1LTMuNzUsMy43NWgtMy43NXYxNi4yNWMwLDQuODMtNC40OCw4Ljc1LTEwLDguNzVzLTEwLTMuOTItMTAtOC43NSw0LjQ4LTguNzUsMTAtOC43NVoiIHN0eWxlPSJmaWxsOiAjZmZmOyIvPgo8L3N2Zz4=");
}

#filmography i,
#filmography:has(~ li a:active) i,
li:has(a:active)~#filmography i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI3MiIgdmlld0JveD0iMCAwIDk2IDcyIj4KICA8cGF0aCBkPSJNODQsMGgtMTMuMTRsLS4xOS4xOS0yMy44MSwyMy44MWgxNy4yN2wuMTktLjE5TDg3LjU4LjU0Qzg2LjQ2LjE5LDg1LjI2LDAsODQsMFpNMzQuMTQsMjRsLjE5LS4xOUw1OC4xNCwwaC0xNy4yN2wtLjE5LjE5LTIzLjgxLDIzLjgxaDE3LjI3Wk05LDI0di00Ljg2TDI4LjE0LDBIMTJDNS4zOCwwLDAsNS4zOCwwLDEydjQ4YzAsNi42Miw1LjM4LDEyLDEyLDEyaDcyYzYuNjIsMCwxMi01LjM4LDEyLTEyVjEyYzAtMi4wNi0uNTItNC4wMS0xLjQ0LTUuN2wtMTcuNywxNy43aDEwLjE0djM2YzAsMS42NS0xLjM1LDMtMywzSDEyYy0xLjY1LDAtMy0xLjM1LTMtM1YyNFoiIHN0eWxlPSJmaWxsOiAjZmZmOyIvPgo8L3N2Zz4=");
  background-size: 24px;
}

#filmography.active i,
#filmography a:active i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI3MiIgdmlld0JveD0iMCAwIDk2IDcyIj4KICA8cGF0aCBkPSJNOTQuNTYsNi4zbC0xNy43LDE3LjdoLTEyLjczbC4xOS0uMTlMODcuNTguNTRjLTEuMTItLjM2LTIuMzMtLjU0LTMuNTgtLjU0aC0xMy4xNGwtLjE5LjE5LTIzLjgxLDIzLjgxaC0xMi43MWwuMTktLjE5TDU4LjE0LDBoLTE3LjI3bC0uMTkuMTktMjMuODEsMjMuODFoLTcuODh2LTQuODZMMjguMTQsMEgxMkM1LjM4LDAsMCw1LjM4LDAsMTJ2NDhjMCw2LjYyLDUuMzgsMTIsMTIsMTJoNzJjNi42MiwwLDEyLTUuMzgsMTItMTJWMTJjMC0yLjA2LS41My00LjAxLTEuNDQtNS43WiIgc3R5bGU9ImZpbGw6ICNmZmY7Ii8+Cjwvc3ZnPg==");
}

#shows i,
#shows:has(~ li a:active) i,
li:has(a:active)~#shows i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI4MCIgdmlld0JveD0iMCAwIDk2IDgwIj4KICA8cGF0aCBkPSJNMTAuNjcsOGMtMS40NywwLTIuNjcsMS4yLTIuNjcsMi42N3Y0Mi42N2MwLDEuNDcsMS4yLDIuNjcsMi42NywyLjY3aDc0LjY3YzEuNDcsMCwyLjY3LTEuMiwyLjY3LTIuNjdWMTAuNjdjMC0xLjQ3LTEuMi0yLjY3LTIuNjctMi42N0gxMC42N1pNMCwxMC42N0MwLDQuNzgsNC43OCwwLDEwLjY3LDBoNzQuNjdjNS44OCwwLDEwLjY3LDQuNzgsMTAuNjcsMTAuNjd2NDIuNjdjMCw1Ljg4LTQuNzgsMTAuNjctMTAuNjcsMTAuNjdIMTAuNjdjLTUuODgsMC0xMC42Ny00Ljc4LTEwLjY3LTEwLjY3VjEwLjY3Wk0yNS4zMyw3Mmg0NS4zM2MyLjIyLDAsNCwxLjc4LDQsNHMtMS43OCw0LTQsNEgyNS4zM2MtMi4yMiwwLTQtMS43OC00LTRzMS43OC00LDQtNFoiIHN0eWxlPSJmaWxsOiAjZmZmOyIvPgo8L3N2Zz4=");
  background-size: 24px;
}

#shows .blur p:after,
#shows:has(~ li a:active) p:after,
li:has(a:active)~#shows p:after {
  opacity: 0;
}

#shows.active i,
#shows a:active i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI4MCIgdmlld0JveD0iMCAwIDk2IDgwIj4KICA8cGF0aCBkPSJNMCwxMC42N0MwLDQuNzgsNC43OCwwLDEwLjY3LDBoNzQuNjdjNS44OCwwLDEwLjY3LDQuNzgsMTAuNjcsMTAuNjd2NDIuNjdjMCw1Ljg4LTQuNzgsMTAuNjctMTAuNjcsMTAuNjdIMTAuNjdjLTUuODgsMC0xMC42Ny00Ljc4LTEwLjY3LTEwLjY3VjEwLjY3Wk0yNS4zMyw3Mmg0NS4zM2MyLjIyLDAsNCwxLjc4LDQsNHMtMS43OCw0LTQsNEgyNS4zM2MtMi4yMiwwLTQtMS43OC00LTRzMS43OC00LDQtNFoiIHN0eWxlPSJmaWxsOiAjZmZmOyIvPgo8L3N2Zz4=");
}

#schedule i,
#schedule:has(~ li a:active) i,
li:has(a:active)~#schedule i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4NCIgaGVpZ2h0PSI5MCIgdmlld0JveD0iMCAwIDg0IDkwIj4KICA8cGF0aCBkPSJNNzIsMTJoLTZ2LTZjMC0zLjMyLTIuNjgtNi02LTZzLTYsMi42OC02LDZ2NmgtMjR2LTZjMC0zLjMyLTIuNjgtNi02LTZzLTYsMi42OC02LDZ2NmgtNkM1LjM4LDEyLDAsMTcuMzgsMCwyNHY1NGMwLDYuNjIsNS4zOCwxMiwxMiwxMmg2MGM2LjYyLDAsMTItNS4zOCwxMi0xMlYyNGMwLTYuNjItNS4zOC0xMi0xMi0xMlpNNzUsMzYuOTR2NDEuMDZjMCwxLjY1LTEuMzUsMy0zLDNIMTJjLTEuNjUsMC0zLTEuMzUtMy0zdi00MmMwLTEuNjUsMS4zNS0zLDMtM2g2MGMxLjY1LDAsMywxLjM1LDMsM3YuOTRaIiBzdHlsZT0iZmlsbDogI2ZmZjsiLz4KICA8cmVjdCB4PSIxOCIgeT0iNDgiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgcng9IjYiIHJ5PSI2IiBzdHlsZT0iZmlsbDogI2ZmZjsiLz4KPC9zdmc+");
  background-size: 22px;
}

#schedule.active i,
#schedule a:active i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4NCIgaGVpZ2h0PSI5MCIgdmlld0JveD0iMCAwIDg0IDkwIj4KICA8cGF0aCBkPSJNNzIsMTJoLTZ2LTZjMC0zLjMyLTIuNjgtNi02LTZzLTYsMi42OC02LDZ2NmgtMjR2LTZjMC0zLjMyLTIuNjgtNi02LTZzLTYsMi42OC02LDZ2NmgtNkM1LjM4LDEyLDAsMTcuMzgsMCwyNHY5aDg0di05YzAtNi42Mi01LjM4LTEyLTEyLTEyWiIgc3R5bGU9ImZpbGw6ICNmZmY7Ii8+CiAgPHBhdGggZD0iTTAsNzhjMCw2LjYyLDUuMzgsMTIsMTIsMTJoNjBjNi42MiwwLDEyLTUuMzgsMTItMTJ2LTM2SDB2MzZaTTE4LDU0YzAtMy4zMiwyLjY4LTYsNi02aDEyYzMuMzIsMCw2LDIuNjgsNiw2djEyYzAsMy4zMi0yLjY4LDYtNiw2aC0xMmMtMy4zMiwwLTYtMi42OC02LTZ2LTEyWiIgc3R5bGU9ImZpbGw6ICNmZmY7Ii8+Cjwvc3ZnPg==");
}

#events i,
#events:has(~ li a:active) i,
li:has(a:active)~#events i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDk2IDY0Ij4KICA8cGF0aCBkPSJNOCwxMC42N3Y3LjQ4YzQuNzgsMi43Nyw4LDcuOTMsOCwxMy44NXMtMy4yMiwxMS4xLTgsMTMuODV2Ny40OGMwLDEuNDcsMS4yLDIuNjcsMi42NywyLjY3aDc0LjY3YzEuNDcsMCwyLjY3LTEuMiwyLjY3LTIuNjd2LTcuNDhjLTQuNzgtMi43Ny04LTcuOTMtOC0xMy44NXMzLjIyLTExLjEsOC0xMy44NXYtNy40OGMwLTEuNDctMS4yLTIuNjctMi42Ny0yLjY3SDEwLjY3Yy0xLjQ3LDAtMi42NywxLjItMi42NywyLjY3Wk0wLDEwLjY3QzAsNC43OCw0Ljc4LDAsMTAuNjcsMGg3NC42N2M1Ljg4LDAsMTAuNjcsNC43OCwxMC42NywxMC42N3YxMC42N2MwLDEuNDctMS4yMywyLjYyLTIuNjIsMy4xLTMuMTMsMS4wOC01LjM4LDQuMDctNS4zOCw3LjU3czIuMjUsNi40OCw1LjM4LDcuNTdjMS4zOC40OCwyLjYyLDEuNjMsMi42MiwzLjF2MTAuNjdjMCw1Ljg4LTQuNzgsMTAuNjctMTAuNjcsMTAuNjdIMTAuNjdjLTUuODgsMC0xMC42Ny00Ljc4LTEwLjY3LTEwLjY3di0xMC42N2MwLTEuNDcsMS4yMy0yLjYyLDIuNjItMy4xLDMuMTMtMS4wOCw1LjM4LTQuMDcsNS4zOC03LjU3cy0yLjI1LTYuNDgtNS4zOC03LjU3Yy0xLjM4LS40OC0yLjYyLTEuNjMtMi42Mi0zLjF2LTEwLjY3Wk02Ni42Nyw0MHYtMTZIMjkuMzN2MTZoMzcuMzNaTTIxLjMzLDIxLjMzYzAtMi45NSwyLjM4LTUuMzMsNS4zMy01LjMzaDQyLjY3YzIuOTUsMCw1LjMzLDIuMzgsNS4zMyw1LjMzdjIxLjMzYzAsMi45NS0yLjM4LDUuMzMtNS4zMyw1LjMzSDI2LjY3Yy0yLjk1LDAtNS4zMy0yLjM4LTUuMzMtNS4zM3YtMjEuMzNaIiBzdHlsZT0iZmlsbDogI2ZmZjsiLz4KPC9zdmc+");
  background-size: 24px;
}

#events.active i,
#events a:active i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDk2IDY0Ij4KICA8cGF0aCBkPSJNOTMuMzgsMjQuNDNjMS4zOC0uNDgsMi42Mi0xLjYzLDIuNjItMy4xdi0xMC42N2MwLTUuODgtNC43OC0xMC42Ny0xMC42Ny0xMC42N0gxMC42N0M0Ljc4LDAsMCw0Ljc4LDAsMTAuNjd2MTAuNjdjMCwxLjQ3LDEuMjMsMi42MiwyLjYyLDMuMSwzLjEzLDEuMDgsNS4zOCw0LjA3LDUuMzgsNy41N3MtMi4yNSw2LjQ4LTUuMzgsNy41N2MtMS4zOC40OC0yLjYyLDEuNjMtMi42MiwzLjF2MTAuNjdjMCw1Ljg4LDQuNzgsMTAuNjcsMTAuNjcsMTAuNjdoNzQuNjdjNS44OCwwLDEwLjY3LTQuNzgsMTAuNjctMTAuNjd2LTEwLjY3YzAtMS40Ny0xLjIzLTIuNjItMi42Mi0zLjEtMy4xMy0xLjA4LTUuMzgtNC4wNy01LjM4LTcuNTdzMi4yNS02LjQ4LDUuMzgtNy41N1pNNzQuNjcsNDIuNjdjMCwyLjk1LTIuMzgsNS4zMy01LjMzLDUuMzNIMjYuNjdjLTIuOTUsMC01LjMzLTIuMzgtNS4zMy01LjMzdi0yMS4zM2MwLTIuOTUsMi4zOC01LjMzLDUuMzMtNS4zM2g0Mi42N2MyLjk1LDAsNS4zMywyLjM4LDUuMzMsNS4zM3YyMS4zM1oiIHN0eWxlPSJmaWxsOiAjZmZmOyIvPgogIDxyZWN0IHg9IjI5LjMzIiB5PSIyNCIgd2lkdGg9IjM3LjMzIiBoZWlnaHQ9IjE2IiBzdHlsZT0iZmlsbDogI2ZmZjsiLz4KPC9zdmc+");
  background-size: 24px;
}

#triplen i,
#triplen:has(~ li a:active) i,
li:has(a:active)~#triplen i {
  background-image: url(../icon/youtube.svg);
  background-size: 26px;
}

#triplen.active i,
#triplen a:active i {
  background-image: url(../icon/youtube-active.svg);
}

#triplen {
  display: none !important;
}

.card-profile.sticky {
  display: inline-block;
  position: sticky;
  position: -webkit-sticky;
  top: 70px;
  margin-bottom: 0;
}

.card-profile table {
  line-height: 23.5px;
}

.awards {
  margin-bottom: 0;
}

table#award tr td a {
  padding: 3px 6px !important;
}

html[lang*="th"] table#award tr td.won a {
  padding-top: 5px !important;
}

html[lang*="th"] table#award tr td.nom a {
  padding-top: 6px !important;
}

html[lang*="th"] table#award tr td.nom a div {
  min-width: 47.125px !important;
}

@media screen and (max-width: 1366px) {
  #howe2022 {
    max-width: 1024px;
    max-height: 576px;
  }
}

@media screen and (max-width: 1024px) {
  #howe2022 {
    max-width: 854px;
    max-height: 480px;
  }
}

@media screen and (max-width: 992px) {
  #howe2022 {
    max-width: 640px;
    max-height: 360px;
  }
}

@media screen and (max-width: 767px) {
  .card-profile.sticky {
    margin-bottom: 15px;
  }
}

@media screen and (max-width: 480px) {
  #howe2022 {
    max-width: 416px;
    max-height: 234px;
  }

  .eapp-events-calendar-date-element-item {
    text-align: center !important;
  }
}

@media screen and (max-width: 414px) {
  #howe2022 {
    max-width: 320px;
    max-height: 180px;
  }

  .card-body.schedule {
    padding: 15px 15px 0 !important;
  }

  .eapp-events-calendar-events-calendar-component {
    padding-top: 0 !important;
  }

  .eapp-events-calendar-grid-item {
    padding-bottom: 16px !important;
  }

  .eapp-events-calendar-grid-item:last-child {
    padding-bottom: 20px !important;
  }

  .eapp-events-calendar-date-element-item {
    margin-bottom: 15px !important;
  }
}

@media screen and (max-width: 320px) {
  #howe2022 {
    max-width: 256px;
    max-height: 144px;
  }
}

@media (max-width: 991px) {
  .card-profile.sticky {
    position: fixed;
    top: 60px;
    width: calc(33.333333% - 15px);
    right: 15px;
    -webkit-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -moz-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -o-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -ms-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
    transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
  }

  /* legacy bug fix (owner, 6 Jul 2026): no manual right-shift when the menu opens —
     .main-panel's translate3d(-260px) already carries position:fixed descendants
     (transform = containing block), so right:275px double-shifted the card at 768–991px */

  #support-mobile {
    visibility: visible !important;
  }

  #langbutton {
    margin: 0 0 0 10px;
  }
}

div.order-1 {
  z-index: 1;
}

@media (max-width: 991px) {
  div.order-1 {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  div.order-1 {
    padding-left: 15px;
  }

  .card-profile.sticky {
    position: relative;
    width: 100%;
  }

  .nav-open .card-profile.sticky,
  .card-profile.sticky {
    right: 0;
    top: unset;
  }
}

iframe {
  display: block;
  width: 100%;
  border: none;
  overflow: hidden;
}

.dark-edition .footer .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.dark-edition .footer ul li span {
  color: #aaa;
  padding: 0.9375rem;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  border-radius: 3px;
  text-decoration: none;
  position: relative;
  display: block;
  line-height: 12px;
}

.dark-edition .footer ul li span i {
  font-size: 12px !important;
  line-height: 12px;
}

table.award th:nth-child(4),
table.award tr td:nth-child(4) {
  min-width: 75px;
}

.showlist th:first-child,
.showlist tr td:first-child,
.triplenlist th:first-child,
.triplenlist tr td:first-child,
.triplenlive th:first-child,
.triplenlive tr td:first-child {
  padding: 12px 5px;
  min-width: 85px;
  width: 10%;
}

div.moredate {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  line-height: 1.25rem;
}

div.moredate span {
  display: inline-flex;
  white-space: nowrap;
}

div.moredate span.space {
  min-width: 3.5px;
  flex-shrink: 2;
}

.triplenlist td:last-child div {
  margin: 4px 0;
}

.commerciallist th:nth-child(2),
.commerciallist tr td:nth-child(2) {
  width: 37.5%;
}

.showlist th:nth-child(2),
.showlist tr td:nth-child(2) {
  width: 40%;
}

.showlist th:nth-child(3),
.showlist tr td:nth-child(3),
.commerciallist th:nth-child(3),
.commerciallist tr td:nth-child(3) {
  min-width: 120px;
  width: 15%;
}

.musiclist th:first-child,
.musiclist tr td:first-child,
.songlist th:first-child,
.songlist tr td:first-child,
.albumlist th:first-child,
.albumlist tr td:first-child,
.stagelist th:first-child,
.stagelist tr td:first-child,
.filmlist th:first-child,
.filmlist tr td:first-child,
.dramalist th:first-child,
.dramalist tr td:first-child,
.commerciallist th:first-child,
.commerciallist tr td:first-child {
  width: 7.5%;
}

.filmlist th:nth-child(2),
.filmlist tr td:nth-child(2),
.dramalist th:nth-child(2),
.dramalist tr td:nth-child(2),
.musiclist th:nth-child(2),
.musiclist tr td:nth-child(2),
.filmlist th:nth-child(4),
.filmlist tr td:nth-child(4) {
  width: 30%;
  min-width: 160px;
}

.filmlist th:nth-child(3),
.filmlist tr td:nth-child(3),
.dramalist th:nth-child(3),
.dramalist tr td:nth-child(3),
.dramalist th:nth-child(4),
.dramalist tr td:nth-child(4),
.dramalist th:nth-child(5),
.dramalist tr td:nth-child(5) {
  width: 15%;
  min-width: 90px;
}

.musiclist th:nth-child(3),
.musiclist tr td:nth-child(3) {
  width: 20%;
}

.songlist th:nth-child(3),
.songlist tr td:nth-child(3) {
  min-width: 130px;
  width: 20%;
}

.musiclist th:nth-child(4),
.musiclist tr td:nth-child(4) {
  min-width: 130px;
  width: 15%;
}

.stagelist th:nth-child(2),
.stagelist th:nth-child(3) {
  max-width: 200px;
  width: 25%;
}

.stagelist th:nth-child(4) {
  width: 20%;
  min-width: 120px;
}

.stagelist th:nth-child(5) {
  min-width: 140px;
  width: 15%;
}

.stagelist th:last-child,
.stagelist tr td:last-child {
  width: 50%;
}

.triplenlist th:nth-child(3),
.triplenlist tr td:nth-child(3),
.triplenlive th:nth-child(3),
.triplenlive tr td:nth-child(3) {
  min-width: 100px;
  width: 15%;
}

.songlist th:nth-child(2),
.songlist tr td:nth-child(2) {
  width: 50%;
}

.albumlist th:nth-child(2),
.albumlist tr td:nth-child(2) {
  width: 30%;
}

.albumlist th:nth-child(3),
.albumlist tr td:nth-child(3) {
  width: 20%;
}

.triplenlist th:nth-child(2),
.triplenlist tr td:nth-child(2),
.triplenlive th:nth-child(2),
.triplenlive tr td:nth-child(2) {
  width: 50%;
}

.triplenlive th:nth-child(3),
.triplenlive tr td:nth-child(3) {
  width: 40%;
}

.triplenlist th:nth-child(4),
.triplenlist tr td:nth-child(4) {
  min-width: 60px;
  white-space: nowrap;
}

.commerciallist tr td:nth-child(3),
.songlist tr td:nth-child(3),
.filmlist tr td:nth-child(4),
.dramalist tr td:nth-child(5),
.showlist tr td:nth-child(3),
.triplenlist tr td:nth-child(3) {
  padding: 12px 0;
}

.triplenlist tr td:nth-child(4)[data-sort] span,
.triplenlist tr td:nth-child(4) div[data-sort] span {
  animation: fadeIn .5s ease;
  -webkit-animation: fadeIn .5s ease;
}

br.mobile {
  display: none;
}

line.mobile {
  display: none;
}

@media (max-width: 768px) {
  line.mobile {
    display: block;
  }

  br.mobile {
    display: unset;
  }

  th.mobile,
  td.mobile {
    padding: 12px 0 !important;
  }

}

@media (max-width: 480px) {

  .showlist th:first-child,
  .showlist tr td:first-child,
  .musiclist th:nth-child(4),
  .musiclist tr td:nth-child(4),
  .songlist th:nth-child(3),
  .songlist tr td:nth-child(3),
  .triplenlist th:first-child,
  .triplenlist tr td:first-child,
  .triplenlist th:nth-child(3),
  .triplenlist tr td:nth-child(3),
  .triplenlive th:nth-child(3),
  .triplenlive tr td:nth-child(3),
  .triplenlist th:nth-child(4),
  .triplenlist tr td:nth-child(4) {
    width: unset;
    padding: 12px 0px !important;
  }

  .showlist th:nth-child(2),
  .showlist tr td:nth-child(2),
  .commerciallist th:nth-child(2),
  .commerciallist tr td:nth-child(2) {
    width: unset;
  }

  .showlist th:nth-child(3),
  .showlist tr td:nth-child(3),
  .commerciallist th:nth-child(3),
  .commerciallist tr td:nth-child(3) {
    width: unset;
  }

  .triplenlist th:nth-child(2),
  .triplenlist tr td:nth-child(2),
  .triplenlive th:nth-child(2),
  .triplenlive tr td:nth-child(2) {
    min-width: 140px;
    max-width: 140px;
  }

  span.mobile {
    font-size: 0.925em;
  }
}

@media (max-width: 411px) {

  .commerciallist th:nth-child(2),
  .commerciallist tr td:nth-child(2) {
    min-width: 125px;
    max-width: 125px;
  }

  .showlist th:nth-child(2),
  .showlist tr td:nth-child(2) {
    min-width: 95px;
    max-width: 95px;
  }

  .songlist th:nth-child(2),
  .songlist tr td:nth-child(2),
  .musiclist th:nth-child(2),
  .musiclist tr td:nth-child(2) {
    min-width: 135px;
    max-width: 135px;
  }

  .songlist th:nth-child(3),
  .songlist tr td:nth-child(3) {
    min-width: 100px;
    max-width: 100px;
  }

  .albumlist th:nth-child(3) {
    padding: 12px 0 !important;
  }

  .albumlist th:nth-child(2),
  .albumlist tr td:nth-child(2),
  .albumlist th:nth-child(3),
  .albumlist tr td:nth-child(3) {
    min-width: 100px;
    max-width: 100px;
  }

  .musiclist th:nth-child(3),
  .musiclist tr td:nth-child(3) {
    min-width: 100px;
    max-width: 100px;
  }

  .triplenlist th:nth-child(2),
  .triplenlist tr td:nth-child(2),
  .triplenlive th:nth-child(2),
  .triplenlive tr td:nth-child(2) {
    min-width: 100px;
    max-width: 100px;
  }
}

#bio p {
  text-indent: 30px;
}

table {
  text-align: center;
}

table th {
  color: #1da1f2 !important;
}

td a {
  display: inline-block;
  padding: 2.5px 5px;
}

td div a {
  margin-bottom: 3px;
}

td div a:last-child {
  margin-bottom: 0;
}

.table-hover td.dataTables_empty {
  border-radius: 0 0 8px 8px !important;
}

#stage.table-hover tbody tr:nth-child(odd) td {
  border-radius: 0;
}

.table-hover tbody tr:nth-child(odd) td {
  background: #091226;
}

.table-hover.stagelist tbody tr td {
  background: unset !important;
}

.table-hover.stagelist tbody tr:nth-child(1),
.table-hover.stagelist tbody tr:nth-child(2),
.table-hover.stagelist tbody tr:nth-child(4),
.table-hover.stagelist tbody tr:nth-child(5),
.table-hover.stagelist tbody tr:nth-child(7),
.table-hover.stagelist tbody tr:nth-child(9),
.table-hover.stagelist tbody tr:nth-child(10),
.table-hover.stagelist tbody tr:nth-child(12),
.table-hover.stagelist tbody tr:nth-child(14),
.table-hover.stagelist tbody tr:nth-child(16),
.table-hover.stagelist tbody tr:nth-child(17),
.table-hover.stagelist tbody tr:nth-child(18),
.table-hover.stagelist tbody tr:nth-child(19),
.table-hover.stagelist tbody tr:nth-child(20),
.table-hover.stagelist tbody tr:nth-child(21),
.table-hover.stagelist tbody tr:nth-child(22) {
  background: #091226;
}

body:not(.preload) #award tbody tr,
body:not(.preload) tr[data-film-id] {
  transition: all .2s ease-in-out;
  cursor: pointer;
}

#award tbody tr:nth-child(odd) td,
.table-hover tbody tr[data-film-id] td {
  background: transparent;
}

#award tbody tr:nth-child(odd),
.table-hover tbody tr[data-film-id]:nth-child(odd) {
  background: #091226;
}

#award tr td a:hover,
#award tr td a:active {
  background: none !important;
}

body:not(.preload) #award tbody tr:hover,
body:not(.preload) .table-hover tbody tr[data-film-id]:hover {
  background-color: rgba(247, 249, 249, 0.1);
}

body:not(.preload) #award tbody tr:active,
body:not(.preload) .table-hover tbody tr[data-film-id]:active {
  background-color: rgba(247, 249, 249, 0.15);
}

body:not(.preload) .dark-edition .table-hover tbody tr[data-film-id] td a:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

body:not(.preload) .dark-edition .table-hover tbody tr[data-film-id] td a:active {
  background-color: rgba(0, 0, 0, 0.35);
}

.table-hover tbody tr:nth-child(odd):last-of-type td:first-child {
  border-bottom-left-radius: 8px;
}

.table-hover tbody tr:nth-child(odd):last-of-type td:last-child {
  border-bottom-right-radius: 8px;
}

a.link {
  color: #fff;
}

.table-hover tr td:first-of-type {
  line-height: 1.75rem !important;
}

tr td>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dark-edition .table-hover tbody tr td a {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  -webkit-font-smoothing: subpixel-antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  display: inline-flex;
  padding: 6px;
  align-items: center;
  justify-content: center;
}

.table-hover tbody tr td a span {
  line-height: 1;
  margin-left: 3px;
  text-wrap: nowrap;
  white-space: nowrap;
  color: #fff;
  font-size: 13px;
}

td a i+span:not(.ext) {
  font-family: 'Graphik TH', sans-serif !important;
  font-weight: 500;
}

td a[href*="youtu.be"],
td a[href*="youtube.com"],
td a.youtube,
td a.vimeo {
  align-items: baseline !important;
}

td a[href*="youtu.be"] i,
td a[href*="youtube.com"] i,
td a.youtube i {
  width: 58px;
  height: 13px;
  background: url(../brand/yt_logo_rgb_dark.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

td a[href*="youtu.be"]:has(span),
td a[href*="youtube.com"]:has(span),
td a.youtube:has(span) {
  padding-bottom: 4px !important;
}

td a[href*="youtube.com"] i:has(+ span:not(.ext)),
td a[href*="youtu.be"] i:has(+ span:not(.ext)),
td a.youtube i:has(+ span:not(.ext)) {
  width: 18px !important;
  background: url(../brand/yt_icon_dark.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

td a[href*="youtube.com"] span,
td a[href*="youtu.be"] span,
td a.youtube span {
  position: relative;
  bottom: 2px;
}

td a[href*="youtube.com"] span.ext,
td a[href*="youtu.be"] span.ext,
td a.youtube span.ext {
  bottom: 1.5px;
}

td a[href*="music.youtube.com"] i {
  width: 86px !important;
  height: 16px !important;
  background: url(../brand/yt_music_full_rgb_white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

td a[href*="facebook.com"] span,
td a[href*="fb.watch"] span,
td a.facebook span {
  position: relative;
  top: 1.5px;
}

td a[href*="facebook.com"] i,
td a[href*="fb.watch"] i,
td a.facebook i {
  width: 78px;
  height: 14px;
  position: relative;
}

td a[href*="facebook.com"] i:before,
td a[href*="fb.watch"] i:before,
td a.facebook i:before {
  content: '';
  display: inline-flex;
  position: absolute;
  left: 0;
  width: 14px;
  height: 14px;
  background: url(../brand/Facebook_Logo_Primary.svg) no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

td a[href*="facebook.com"] i:after,
td a[href*="fb.watch"] i:after,
td a.facebook i:after {
  content: '';
  display: inline-flex;
  position: absolute;
  right: 0;
  width: 61px;
  height: 14px;
  background: url(../brand/Facebook_logo_2023.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center 2px;
}

td a[href*="facebook.com"] i:has(+ span:not(.ext)),
td a[href*="fb.watch"] i:has(+ span:not(.ext)),
td a.facebook i:has(+ span:not(.ext)) {
  width: 14px !important;
}

td a[href*="facebook.com"] i:has(+ span:not(.ext)):after,
td a[href*="fb.watch"] i:has(+ span:not(.ext)):after,
td a.facebook i:has(+ span:not(.ext)):after {
  content: '';
  display: none;
}

.fab.fa-facebook {
  color: transparent;
  background: url(../brand/Facebook_Logo_Primary.svg) no-repeat;
  background-position: center;
  background-size: contain;
  width: 14px;
}

.fab.fa-twitter {
  color: transparent;
  background: url(../brand/X-icon.svg) no-repeat;
  background-position: center;
  background-size: contain;
}

.fab.fa-instagram {
  color: transparent;
  background: url(../brand/instagram-glyph-gradient.svg) no-repeat;
  background-position: center;
  background-size: contain;
  width: 14px;
}

td a.instagram i {
  width: 14px;
  height: 14px;
  background: url(../brand/instagram-glyph-gradient.svg) no-repeat;
  background-position: center;
  background-size: contain;
}

.fab.fa-youtube {
  background: radial-gradient(white 35%, transparent 35%);
}

.fab.fab.fa-dailymotion {
  color: transparent;
  background: url(../brand/dailymotion-logo-ogtag-new.png) no-repeat;
  background-position: center;
  background-size: contain;
  width: 14px;
  border-radius: 50%;
}

li .fab.fa-youtube {
  background: transparent;
}

.infobox .fab {
  font-size: 20px;
}

.infobox .social-link {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0 -15px;
}

.infobox .social-link a {
  image-rendering: auto;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  -webkit-font-smoothing: subpixel-antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  filter: none;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
  display: flex;
  width: 26px;
  height: 26px;
  margin: 0 0.5rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  box-sizing: border-box;
  transition: all .2s ease-in-out;
  will-change: transform;
}

.infobox .social-link a:hover {
  transform: scale(1.25) translateZ(0);
}

.infobox .social-link a.instagram {
  width: 22px;
  height: 22px;
  border-radius: unset !important;
  margin: 0 calc(0.5rem + 2px);
}

.line-break {
  flex-basis: 100%;
  height: 0;
  display: none;
}

@media screen and (max-width: 1280px) and (orientation: landscape) {
  .infobox .social-link a {
    margin: 0 0.675rem;
  }

  .line-break {
    display: block;
    margin: 0.45rem;
  }
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
  .infobox .social-link a {
    margin: 0 0.65rem;
  }

  .line-break {
    display: block;
    margin: 0.5rem;
  }
}

@media screen and (max-width: 767px) {
  .infobox .social-link a {
    margin: 0 0.8rem;
  }
}

@media screen and (max-width: 767px) and (orientation: portrait) {
  .line-break {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .infobox .social-link {
    margin: 0 -20px;
  }

  .infobox .social-link a {
    margin: 0 0.65rem;
  }
}

@media screen and (max-width: 420px) and (orientation: portrait) {
  #supporter {
    padding: 0 6px;
  }

  .dark-edition .footer .container-fluid {
    justify-content: center;
  }
}

@media screen and (max-width: 360px) and (orientation: portrait) {
  .infobox .social-link a {
    margin: 0 0.525rem;
  }
}

@media screen and (max-width: 320px) and (orientation: portrait) {
  .infobox .social-link a {
    margin: 0 0.4rem;
  }

}

@media screen and (max-width: 280px) and (orientation: portrait) {
  .infobox .social-link a {
    margin: 0 0.8rem;
  }

  .line-break {
    display: block;
    margin: 0.425rem;
  }
}

.infobox .facebook {
  background: url(../brand/Facebook_Logo_Primary.svg);
}

.infobox .x {
  background: url(../brand/X-icon.svg);
}

.infobox .instagram {
  background: url(../brand/Instagram_logo_2022.svg);
}

.infobox .weibo {
  background: url(../brand/weibo_101812.svg);
}

.infobox .youtube {
  color: transparent;
  background: url(../brand/youtube_social_circle_red.png);
  background: image-set(url(../brand/youtube_social_circle_red.webp) type("image/webp"), url(../brand/youtube_social_circle_red.png) type("image/png"));
}

.infobox .twitch {
  color: transparent;
  background: url(../brand/twitch.png);
}

.infobox .threads {
  color: transparent;
  background: url(../brand/Threads_logo.svg), #000;
  background-size: 70% !important;
  background-position: center center !important;
  border-radius: 50%;
}

.infobox .tiktok {
  color: transparent;
  background: url(../brand/TikTok_Icon_Black.svg);
}

a.twitter i,
a.x i {
  margin-right: 1px;
  width: 13px;
  height: 12px;
  background: url(../brand/x-logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

a.plern {
  color: #fff;
}

a.spotify {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

a.spotify i {
  width: 60px;
  height: 18px;
  background: url(../brand/Spotify_logo_with_text.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

a.spotify span.ext {
  margin-left: 0 !important;
}

a.applemusic i {
  height: 16px;
  width: 61px;
  background: url(../brand/apple_music.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

a.joox i {
  width: 46px;
  height: 16px;
  background: url(../brand/JOOX.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

a.plern i {
  height: 14px;
  width: 47px;
  background: url(../brand/plern-logo-en.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

a.applepodcasts i {
  width: 75px;
  height: 15px;
  background: url(../brand/applepodcasts.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

a.linetv {
  color: #fff;
}

i.linetv {
  display: inline-block;
  height: 12px;
  width: 12px;
  background: url(../brand/linetvicon.svg);
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: middle;
  border-radius: 2px;
}

a.wetv i {
  width: 54px;
  height: 14px;
  background: url(../brand/wetv-logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

a[href*="oned.net"] i,
a.oneD i {
  width: 36px;
  height: 13px;
  background: url(../brand/oneD-logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

a.netflix i {
  width: 52px;
  height: 14px;
  background: url(../brand/Netflix_Logo_RGB.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

a.dailymotion i {
  width: 69px;
  height: 14px;
  background: url(../brand/Dailymotion_logo_2023.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

a.disney {
  padding: 3px 5px !important;
}

a.disney i {
  height: 25px;
  width: 82px;
  background: url(../brand/disney-hotstar-logo-dark.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

a.bugaboo i {
  height: 12px;
  width: 80px;
  background: url(../brand/bugaboo2021-logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

a.aisplay {
  color: #fff;
}

i.aisplay {
  display: inline-block;
  height: 14px;
  width: 70px;
  background: url(../brand/ais_play.e9f424a5.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.disney span,
i.monomax span,
i.seeme span,
i.oneD span,
i.bugaboo span,
i.viu span {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

a.viu {
  padding-top: 4px !important;
}

a.viu i {
  height: 15px;
  width: 40px;
  background: url(../brand/viu.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

a[href*="drive.google"] i,
a.drive i {
  width: 48px;
  height: 14px;
  background: url(../brand/GoogleDriveLogo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

a[href*="drive.google"] i:has(+ span:not(.ext)),
a.drive i:has(+ span:not(.ext)) {
  width: 14px !important;
  background: url(../brand/Google_Drive_icon_2020.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

a.photos i {
  color: #fff;
}

i.photos {
  display: inline-block;
  height: 14px;
  width: 14px;
  background: url(../brand/logo_photos.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

a.trueid i {
  width: 52px;
  height: 13px;
  background: url(../brand/trueid-logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

a.seeme i {
  height: 12px;
  width: 53px;
  background: url(../brand/seeme.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

a.mono i {
  height: 14px;
  width: 28px;
  background: url(../brand/mono29.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

a.monomax i {
  height: 12px;
  width: 50px;
  background: url(../brand/monomax.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

a.ch3plus {
  color: #fff;
  align-items: center !important;
  font-weight: 500;
  line-height: 1em;
}

a.ch3plus i,
i.ch3plus {
  margin: -2px 1px 0 0;
  height: 16px;
  width: 16px;
  background: url(../brand/ch3plus-logo-2021.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

a.vimeo {
  padding-top: 4px !important;
}

a.vimeo i {
  width: 50px;
  height: 14px;
  background: url(../brand/vimeo_logo_blue.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

a.vimeo span {
  position: relative;
  bottom: .5px;
}

a.vimeo span:not(.ext) {
  position: relative;
  bottom: 2.5px;
}

a.vimeo i:has(+ span:not(.ext)) {
  width: 14px !important;
  background: url(../brand/vimeo_icon_white_on_blue_rounded.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

a.moveek i {
  color: #d71002;
}

i.moveek {
  display: inline-block;
  height: 14px;
  width: 14px;
  background: url(../brand/moveek.png);
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: middle;
}

a.lazada i {
  height: 13px;
  width: 62px;
  background: url(../brand/Lazada.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

a.sanook i {
  height: 14px;
  width: 14px;
  background: url(../brand/sanook-icon.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

i.sanook2 {
  display: inline-block;
  height: 17px;
  width: 103px;
  margin: 3px 0;
  background: url(../brand/logo-sanook-n.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

i.issuu {
  display: inline-block;
  height: 20px;
  width: 82px;
  background: url(../brand/issuu.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

i.gmmtvshop {
  display: inline-block;
  height: 26px;
  width: 41px;
  background: url(../brand/gmmtvshop.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
  margin: -1.5px 0 -0.5px;
}

.card-photoshoot .card-footer a[href^="https://www.ookbee.com"] {
  padding: 7px 0;
}

i.ookbee {
  display: inline-block;
  height: 28px;
  width: 60px;
  background: url(../brand/ookbee.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
  padding: 5px;
  margin-top: -2.5px;
}

i.meb {
  display: inline-block;
  height: 20px;
  width: 62.5px;
  background: url(../brand/meb.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.readd {
  display: inline-block;
  height: 18px;
  width: 78px;
  background: url(../brand/logo_readd_full_h100.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
  margin-top: 2px;
}

i.trueplookpanya {
  display: inline-block;
  height: 32px;
  width: 85px;
  background: url(../brand/logo-plookpanya.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
  margin: -7.5px
}

i.lineshopping {
  display: inline-block;
  height: 24px;
  width: 24px;
  background: url(../brand/LineShopping.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.lofficielmy {
  display: inline-block;
  width: 87px;
  height: 20px;
  background: url(../brand/logo-lofficiel-amtd.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.lofficielhk {
  display: inline-block;
  width: 87px;
  height: 20px;
  background: url(../brand/logo-lofficiel-hk.webp);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.lofficielth {
  display: inline-block;
  width: 87px;
  height: 20px;
  background: url(../brand/Lofficiel_Logo2.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.ellemen {
  display: inline-block;
  width: 92px;
  height: 20px;
  background: url(../brand/ELLE-Men-blanc.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.sumupth {
  display: inline-block;
  width: 90px;
  height: 15px;
  background: url(../brand/SUM-UP-LOGO-2024.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.sudsapda {
  display: inline-block;
  width: 80px;
  height: 26px;
  background: url(../brand/sudsapda.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.hommesth {
  display: inline-block;
  width: 87px;
  height: 20px;
  background: url(../brand/HommesTH.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.naiin {
  display: inline-block;
  height: 24px;
  width: 72px;
  background: url(../brand/naiin.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
  padding: 1.5px 0;
}

i.se-ed {
  display: inline-block;
  height: 24px;
  width: 82px;
  background: url(../brand/se-ed.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.b2s {
  display: inline-block;
  height: 24px;
  width: 46px;
  background: url(../brand/b2s.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.shopat24 {
  display: inline-block;
  height: 28px;
  width: 60px;
  background: url(../brand/shopat24.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.allonline {
  display: inline-block;
  height: 24px;
  width: 51px;
  background: url(../brand/allonline2.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: -7.5px 0;
}

i.lazada {
  display: inline-block;
  height: 19px;
  width: 90px;
  background: url(../brand/Lazada.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.shopee {
  display: inline-block;
  height: 15px;
  width: 15px;
  background: url(../brand/shopee.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
  margin-top: -1px;
}

i.kazz {
  display: inline-block;
  height: 23px;
  width: 60px;
  background: url(../brand/kazz.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.kazz2 {
  display: inline-block;
  height: 20px;
  width: 66px;
  background: url(../brand/kazz-2.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.howe {
  display: inline-block;
  height: 23px;
  width: 50px;
  background: url(../brand/howe-new-logo-1.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.mintmagth {
  display: inline-block;
  height: 18px;
  width: 58px;
  background: url(../brand/mintmagth.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.vogueth {
  display: inline-block;
  height: 20px;
  width: 77px;
  background: url(../brand/logo-white.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.posh {
  display: inline-block;
  height: 16.5px;
  width: 58px;
  background: url(../brand/posh.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.allmag {
  display: inline-block;
  height: 32px;
  width: 100px;
  background: url(../brand/allmagonline2.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
  margin: -5px 0;
}

i.youtube {
  display: inline-block;
  height: 20px;
  width: 90px;
  background: url(../brand/yt_logo_rgb_dark.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin: -5px 0;
}

i.mangu {
  display: inline-block;
  height: 22px;
  width: 47px;
  background: url(../brand/mangu.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
  margin: -5px 0;
}

i.doconcert {
  display: inline-block;
  height: 24px;
  width: 40px;
  background: url(../brand/do-concert-logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.gq {
  display: inline-block;
  height: 20px;
  width: 38px;
  background: url(../brand/logo-gq.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.praew {
  display: inline-block;
  height: 20px;
  width: 86px;
  background: url(../brand/logotop_praew.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.adB {
  display: inline-block;
  height: 20px;
  width: 140px;
  background: url(../brand/adaybulletin-logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.thecloud {
  display: inline-block;
  height: 22px;
  width: 120px;
  background: url(../brand/thecloud-logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.metro {
  display: inline-block;
  height: 13px;
  width: 148px;
  background: url(../brand/MetroSociety_MetroSociety2016_logo_white.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.kinokuniya {
  display: inline-block;
  height: 26px;
  width: 105px;
  background: url(../brand/kinokuniya2.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
  margin-top: -3px;
}

i.magzter {
  display: inline-block;
  width: 120px;
  height: 14px;
  background: url(../brand/magzter_logo_header.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.mensfolioth {
  display: inline-block;
  width: 67px;
  height: 20px;
  background: url(../brand/mensfolioth.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

@media (max-width: 1480px) {
  i.kinokuniya {
    height: 20px;
    width: 81px;
  }
}

@media (max-width: 575px) {
  i.kinokuniya {
    height: 25px;
    width: 101px;
  }
}

@media (max-width: 414px) {
  i.kinokuniya {
    height: 20px;
    width: 81px;
  }
}

@media (max-width: 320px) {
  i.kinokuniya {
    height: 16px;
    width: 61px;
    background: url(../brand/kinokuniya.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    background-position: center;
  }
}

@media (max-width: 280px) {
  i.kinokuniya {
    height: 15px;
    width: 57px;
  }
}

i.honto {
  display: inline-block;
  height: 25px;
  width: 54px;
  background: url(../brand/honto.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
  margin: -0.5px 0;
}

i.spur {
  display: inline-block;
  height: 15px;
  width: 80px;
  background: url(../brand/spur.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.vivi {
  display: inline-block;
  height: 18px;
  width: 32px;
  background: url(../brand/vivi.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.thaihyper {
  display: inline-block;
  height: 26px;
  width: 115px;
  background: url(../brand/thaihyper.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.lifestyletravel {
  display: inline-block;
  height: 28px;
  width: 80px;
  background: url(../brand/logo-lifestyleandtravel.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
  margin: -7.5px 0;
}

i.amazon {
  display: inline-block;
  height: 20px;
  width: 65px;
  background: url(../brand/amazon.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

.wechat {
  display: inline-block;
  height: 20px;
  width: 80px;
  background: url(../brand/wechat.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

i.facebook {
  display: inline-block;
  height: 19px;
  width: 98px;
  background: url(../brand/Facebook_Logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
  margin-top: -1px;
}

i.bangkokbiz {
  display: inline-block;
  height: 24px;
  width: 105px;
  background: url(../brand/bkkbiz.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  background-position: center;
}

@media (max-width: 1366px) {
  i.naiin {
    max-width: 60px;
  }

  i.se-ed {
    max-width: 55px;
  }

  i.b2s {
    max-width: 35px;
  }

  i.shopat24 {
    max-width: 45px;
  }

  i.mangu {
    max-width: 43px;
  }
}

@media (max-width: 414px) {
  i.naiin {
    max-width: 62px;
  }

  i.se-ed {
    max-width: 60px;
  }

  i.shopat24 {
    max-width: 50px;
  }

  .card-photoshoot .card-footer a:first-child:nth-last-child(4),
  .card-photoshoot .card-footer a:first-child:nth-last-child(4)~a,
  .card-event .card-footer a:first-child:nth-last-child(4),
  .card-event .card-footer a:first-child:nth-last-child(4)~a {
    width: 50% !important;
  }

  i.mangu {
    max-width: 45px;
  }
}

.card-icon {
  width: 90px;
  height: 90px;
  padding: 0 !important;
  background: none !important;
  border-radius: 50% !important;
}

.card-icon.instagram {
  -webkit-box-shadow: 0px 0px 0px 2.5px #091226, 0px 0px 0px 5px #ff006a !important;
  -moz-box-shadow: 0px 0px 0px 2.5px #091226, 0px 0px 0px 5px #ff006a !important;
  box-shadow: 0px 0px 0px 2.5px #091226, 0px 0px 0px 5px #ff006a !important;
}

.card-icon.x {
  -webkit-box-shadow: 0px 0px 0px 2.5px #091226, 0px 0px 0px 5px #fff !important;
  -moz-box-shadow: 0px 0px 0px 2.5px #091226, 0px 0px 0px 5px #fff !important;
  box-shadow: 0px 0px 0px 2.5px #091226, 0px 0px 0px 5px #fff !important;
}

.card-icon.facebook {
  -webkit-box-shadow: 0px 0px 0px 2.5px #091226, 0px 0px 0px 5px #1778f2 !important;
  -moz-box-shadow: 0px 0px 0px 2.5px #091226, 0px 0px 0px 5px #1778f2 !important;
  box-shadow: 0px 0px 0px 2.5px #091226, 0px 0px 0px 5px #1778f2 !important;
}

.card-icon.youtube {
  -webkit-box-shadow: 0px 0px 0px 2.5px #091226, 0px 0px 0px 5px #ff0000 !important;
  -moz-box-shadow: 0px 0px 0px 2.5px #091226, 0px 0px 0px 5px #ff0000 !important;
  box-shadow: 0px 0px 0px 2.5px #091226, 0px 0px 0px 5px #ff0000 !important;
}

.card-icon img {
  max-width: 100%;
  height: auto;
  border-radius: 50%;
  position: relative;
  width: 90px;
  height: 90px;
  background: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Bpbm5lciIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxzdHlsZT4KLnNwaW5uZXIgewoJYW5pbWF0aW9uOiByb3RhdG9yIDVzIGxpbmVhciBpbmZpbml0ZTsKCXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlcjsKCW92ZXJmbG93OiBoaWRkZW47Cn0KQGtleWZyYW1lcyByb3RhdG9yewoJMCUgewoJCXRyYW5zZm9ybTpyb3RhdGUoMGRlZyk7Cgl9CgkxMDAlIHsKCQl0cmFuc2Zvcm06cm90YXRlKDM2MGRlZyk7Cgl9Cn0KLnBhdGggewogIHN0cm9rZS1kYXNoYXJyYXk6IDI3MDsKICBzdHJva2UtZGFzaG9mZnNldDogMDsKICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgc3Ryb2tlOiAjMWRhMWYyOwogIGFuaW1hdGlvbjogZGFzaCAxLjRzIGVhc2UtaW4tb3V0IGluZmluaXRlOwp9CkBrZXlmcmFtZXMgZGFzaCB7CgkwJSB7CgkJc3Ryb2tlLWRhc2hvZmZzZXQ6IDI2NTsKCX0KCTUwJSB7CgkgIHN0cm9rZS1kYXNob2Zmc2V0OiA2NTsKICAgIHRyYW5zZm9ybTpyb3RhdGUoOTBkZWcpOwogIH0KICAxMDAlIHsKICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAyNjU7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOwogIH0KfQo8L3N0eWxlPgo8Y2lyY2xlIGNsYXNzPSJwYXRoIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjEwIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIj48L2NpcmNsZT4KPC9zdmc+");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 35px;
}

.card-stats .card-icon img[src],
.card-stats h3.current {
  animation: fadeIn .35s ease;
}

.card-stats h3 {
  height: 1.4em;
}

.card-header-icon .card-header-instagram {
  background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #ff006a, #fd1d1d);
  margin-bottom: 40px;
}

.card-header-instagram .card-title {
  text-align: center;
  color: #fff !important;
}

.card-stats .card-footer,
.card-photoshoot .card-footer,
.card-event .card-footer {
  text-align: center;
  display: inline-block;
}

.card-stats .card-footer>a,
.card-photoshoot .card-footer>a,
.card-event .card-footer>a {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.card-stats .card-footer .stats {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 7.5px 0;
  border-radius: 12px;
  transition: all .2s ease-in-out;
}

.card-stats .card-footer .stats i {
  margin-right: .25em;
}

.card-stats .card-footer .stats i.x {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  top: .5px;
  background: url(../brand/x-logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.card-stats .card-footer .stats i.fa-youtube {
  font-size: 15px;
}

.card-photoshoot .card-footer,
.card-event .card-footer {
  font-size: 0;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px !important;
  margin-bottom: 0 !important;
}

.card-photoshoot .card-footer::before,
.card-event .card-footer::before {
  content: '';
  display: flex;
  position: absolute;
  width: calc(100% - 36px);
  height: auto;
  top: 0;
  border-top: 1px solid hsla(0, 0%, 71%, .1);
}

.card-photoshoot .card-footer span {
  padding-left: 5px;
  font-size: 1rem;
  line-height: 24px;
}

.card-event .card-footer span {
  padding-left: 3px;
  font-size: 1rem;
  line-height: 24px;
}

.card-photoshoot .card-footer a,
.card-event .card-footer a {
  display: block;
  width: 100%;
  height: 40px;
  padding: 8px 0;
  border-radius: 12px;
  transition: background-color .2s ease-in-out !important;
}

.card-event .card-footer span {
  font-weight: 500;
  color: #fff;
}

.card-event .card-footer a[href*="youtu.be"] i,
.card-event .card-footer a[href*="youtube.com"] i {
  width: 81px;
  height: 18px;
  background: url(../brand/yt_logo_rgb_dark.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.card-event .card-footer a[href*="youtu.be"]:has(span) i,
.card-event .card-footer a[href*="youtube.com"]:has(span) i {
  width: 26px;
  height: 18px;
  background: url(../brand/yt_icon_dark.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  top: 1.5px;
}

.card-event .card-footer a[href*="x.com"]:has(span) i,
.card-event .card-footer a[href*="twitter.com"]:has(span) i {
  width: 18px;
  height: 18px;
  background: url(../brand/x-logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  top: 2.5px;
  margin-right: 1.5px;
}

.card-event .card-footer a[href*="facebook.com"] i {
  width: 113px;
  height: 20px;
  position: relative;
}

.card-event .card-footer a[href*="facebook.com"] i:before,
.card-event .card-footer a[href*="fb.watch"] i:before {
  content: '';
  display: inline-flex;
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  background: url(../brand/Facebook_Logo_Primary.svg) no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.card-event .card-footer a[href*="facebook.com"] i:after,
.card-event .card-footer a[href*="fb.watch"] i:after {
  content: '';
  display: inline-flex;
  position: absolute;
  right: 0;
  width: 89px;
  height: 20px;
  background: url(../brand/Facebook_logo_2023.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center 2px;
}

.card-event .card-footer a[href*="tiktok"] i {
  width: 72px;
  height: 18px;
  background: url(../brand/TikTokFull.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.card-event .card-footer a[href*="tiktok"]:has(span) i {
  width: 20px;
  height: 20px;
  background: url(../brand/TikTok_Icon_Black.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  top: 2px;
}

.card-event .card-footer a[href*="thaiticketmajor"] i {
  width: 104px;
  height: 24px;
  background: url(../brand/ThaiTicketMajor.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.card-event .card-footer a[href*="gmm-tv.com"] i {
  width: 41px;
  height: 26px;
  background: url(../brand/gmmtvshop.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  top: -2px;
}

.card-event .card-footer a[href*="telasa.jp"] i {
  width: 66px;
  height: 24px;
  background: url(../brand/telasa.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  top: -1px;
}

.card-photoshoot .card-footer .stats,
.card-event .card-footer .stats {
  vertical-align: middle;
}

.card-photoshoot .card-footer .stats .fa,
.card-photoshoot .card-footer .stats .fas,
.card-photoshoot .card-footer .stats .fad,
.card-photoshoot .card-footer .stats .far,
.card-event .card-footer .stats .fad {
  font-size: 18px;
}

.card-photoshoot .card-footer .stats .fa-shopping-cart {
  font-size: 16px;
  bottom: -4px;
  position: relative;
}

.card-photoshoot .card-footer a:hover,
.card-event .card-footer a:hover {
  background-color: rgba(247, 249, 249, 0.1);
}

.card-photoshoot .card-footer a:active,
.card-event .card-footer a:active {
  background-color: rgba(247, 249, 249, 0.15);
}

.card-photoshoot .card-footer a.disabled,
.card-event .card-footer a.disabled {
  cursor: no-drop;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-photoshoot .card-footer a.disabled .stats,
.card-event .card-footer a.disabled .stats {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-photoshoot .card-footer a.disabled h4,
.card-event .card-footer a.disabled h4 {
  font-family: 'Graphik TH', sans-serif;
  line-height: 24px;
  margin: 0;
  font-weight: 500;
}

.card-stats .card-footer .stats:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.card-stats .card-footer .stats:active {
  background-color: rgba(0, 0, 0, 0.325);
}

.far.fa-sync-alt {
  margin-right: 2px;
  font-size: 12px;
}

.far.fa-cloud-music,
.far.fa-tv-alt,
.fal.fa-calendar-alt {
  -webkit-text-stroke: .25px #ddd;
}

.sidebar .nav li:hover .far.fa-cloud-music,
.sidebar .nav li:hover .far.fa-tv-alt,
.sidebar .nav li:hover .fal.fa-calendar-alt {
  -webkit-text-stroke: .25px #dbdbdc;
}

.fas.fa-tv-alt {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fas.fa-tv-alt:after {
  content: '';
  display: block;
  position: absolute;
  width: 20px;
  height: 12px;
  margin-top: -4px;
  background: #fff;
  border-radius: 1px;
}

#filmography .material-symbols-outlined:before {
  content: 'movie';
  font-size: 26px;
}

.fa-stack {
  font-size: 0.5em;
}

.stats .fa-youtube {
  color: #ff0000;
}

.card-stats .card-category {
  font-weight: 500;
}

.card-stats.ig .card-category {
  color: #ff006a !important;
}

.card-stats.twi .card-category {
  color: #fff !important;
}

.card-stats.fb .card-category {
  color: #1778f2 !important;
}

.card-stats.yt .card-category {
  color: #ff0000 !important;
}

#igfollower,
#xfollower,
#fbfollower,
#ytfollower {
  font-family: 'Graphik TH Loop', sans-serif;
}

#support {
  width: 160px;
  margin: 5px auto 0;
}

#support span {
  font-size: 15px;
  text-transform: uppercase;
}

#support a {
  font-family: 'Graphik TH', sans-serif;
  font-weight: 600;
  color: #fff;
  text-align: center;
  background: transparent;
  position: relative;
  height: 40px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

#support a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgb(0, 172, 238) 0%, rgb(0, 77, 228) 100%);
  z-index: -2;
  border-radius: 9999px;
}

#support a:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(0, 172, 238);
  z-index: -1;
  transition: all 0.15s ease-in-out 0s;
  opacity: 0;
  border-radius: 9999px;
  top: 0;
  left: 0;
}

#support a:hover:after {
  opacity: 0.4;
}

#support a:active:after {
  opacity: 1;
}

#table-triplen {
  background: #2a2a28 !important;
}

#table-triplen .card-header {
  background: #ff0000;
}

#table-triplen .card-header {
  padding: 0;
}

#table-triplen .card-header a {
  padding: 15px;
  display: block;
}

#table-triplen .card-header .fa-youtube {
  background: none;
}

#table-triplen table th {
  color: #ff0000 !important;
}

#table-triplen tbody tr:nth-child(2n+1) td {
  background: #181a16;
}

#table-triplen.card .card-header-primary {
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 0, 0, 0.4);
}

#table-triplen .text-primary tr:first-child th,
#album .text-primary tr:first-child th {
  padding-bottom: 48px !important;
  padding-top: 0 !important;
  position: unset;
}

#album tr th:nth-child(4),
#album tr td:nth-child(4) {
  padding: 12px 0 !important;
}

#table-triplen table .triplentitle {
  color: #fff !important;
  background: #0f0f0f;
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 60px) !important;
  left: 30px;
  height: 48px;
  line-height: 48px;
  white-space: nowrap;
  border-radius: 8px 8px 0 0;
}

.albumtitle {
  color: #fff !important;
  background: #000;
  position: absolute;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  width: calc(100% - 60px) !important;
  left: 30px;
  height: 48px;
  line-height: 48px;
  white-space: nowrap;
  border-radius: 8px 8px 0 0;
}

.albumtitle i {
  font-size: .8em;
  padding-left: 5px;
}

#table-triplen #DataTables_Table_0_wrapper>table:first-of-type .text-primary tr:first-child th,
#table-triplen .table-responsive>table:first-of-type .text-primary tr:first-child th,
#album .table-responsive3 table:first-of-type .text-primary tr:first-child th {
  padding-bottom: 55px !important;
}

#table-triplen #DataTables_Table_0_wrapper>table:first-of-type .triplentitle,
#table-triplen .table-responsive>table:first-of-type .triplentitle,
#album .table-responsive3 table:first-of-type .albumtitle {
  margin-top: 8px !important;
}

@media (max-width:480px) {

  #table-triplen #DataTables_Table_0_wrapper>table:first-of-type .text-primary tr:first-child th,
  #table-triplen .table-responsive>table:first-of-type .text-primary tr:first-child th,
  #album .table-responsive3 table:first-of-type .text-primary tr:first-child th {
    padding-bottom: 48px !important;
  }

  #table-triplen #DataTables_Table_0_wrapper>table:first-of-type .triplentitle,
  #table-triplen .table-responsive>table:first-of-type .triplentitle,
  #album .table-responsive3 table:first-of-type .albumtitle {
    margin-top: unset !important;
  }
}

@media (max-width:414px) {

  #table-triplen table .triplentitle,
  #album table .albumtitle {
    width: calc(100% - 40px) !important;
    left: 20px;
  }
}

@media (max-width:320px) {
  #album table .albumtitle {
    overflow-x: scroll;
    justify-content: flex-start;
    padding: 0 0.5em;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  #album table .albumtitle::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
    display: none;
  }
}

.subtitle {
  display: none;
}

#nanon_diary {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-top: -2px;
  background: url(../logo/nanon_diary.png);
  background: image-set(url(../logo/nanon_diary.webp) type("image/webp"), url(../logo/nanon_diary.png) type("image/png"));
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  border-radius: 50%;
}

.footer button {
  position: fixed;
  z-index: 99;
  width: 230px;
  left: 15px;
  bottom: 15px;
}

@media (max-width: 991px) {
  .footer {
    bottom: -15px;
  }

  .footer button {
    position: relative;
    width: unset;
    left: unset;
    bottom: unset;
  }

}

@media (max-width: 360px) {
  .footer button {
    padding: 12px 20px;
  }
}

@media (max-width: 320px) {
  .footer button {
    padding: 10px 20px;
  }

  .footer .copyright {
    font-size: 14px;
  }

  .footer .copyright>div {
    width: 90.25px;
  }

  .footer .copyright i {
    margin: 0 1px;
  }
}

.nav-button {
  display: block;
  padding: 0.5rem 1rem;
}

.sidebar .nav li:hover>a.nav-button {
  background: transparent !important;
}

.nav-bottom {
  width: 100%;
  position: absolute;
  bottom: 0.5rem;
}

.tim-typo {
  padding-left: 25%;
  margin-bottom: 40px;
  position: relative;
  width: 100%;
}

.tim-typo .tim-note {
  bottom: 5px;
  color: #c0c1c2;
  display: block;
  font-weight: 400;
  font-size: 13px;
  line-height: 15px;
  left: 0;
  margin-left: 20px;
  position: absolute;
  width: 260px;
}

/* offline-doc */

.offline-doc .navbar.navbar-transparent {
  padding-top: 25px;
  border-bottom: none;
}

.offline-doc .navbar.navbar-transparent .navbar-minimize {
  display: none;
}

.offline-doc .navbar.navbar-transparent .navbar-brand,
.offline-doc .navbar.navbar-transparent .collapse .navbar-nav .nav-link {
  color: #FFF;
}

.offline-doc .footer {
  z-index: 3 !important;
  position: absolute;
  width: 100%;
  background: transparent;
  bottom: 0;
  color: #fff;
}

.offline-doc .page-header .content-center {
  z-index: 3;
}

.offline-doc .brand .title {
  color: #fff;
}

.offline-doc .footer {
  z-index: 3 !important;
}

.offline-doc .page-header .container {
  z-index: 3;
}

.offline-doc .page-header:after {
  background-color: rgba(0, 0, 0, 0.5);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

@media all and (max-width: 991px) {

  .offline-doc .navbar .navbar-collapse.collapse,
  .offline-doc .navbar .navbar-collapse.collapse.in,
  .offline-doc .navbar .navbar-collapse.collapsing {
    display: block !important;
  }

  .nav-open .offline-doc .navbar-wrapper,
  .nav-open .offline-doc .navbar-toggler {
    -webkit-transform: translate3d(-260px, 0, 0);
    -moz-transform: translate3d(-260px, 0, 0);
    -o-transform: translate3d(-260px, 0, 0);
    -ms-transform: translate3d(-260px, 0, 0);
    transform: translate3d(-260px, 0, 0);
  }

  .offline-doc .navbar-wrapper,
  .offline-doc .navbar-toggler {
    -webkit-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -moz-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -o-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -ms-transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
    transition: all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
  }

  .offline-doc .navbar .collapse .navbar-nav .nav-item .nav-link {
    margin-left: 15px;
    color: #8b92a9 !important;
  }
}

#map {
  z-index: 2;
  height: calc(100vh - 70px);
  margin-top: 70px;
}

.bd-docs.dark-edition .bd-example {
  background-color: #1a2035;
  border: 0;
  border-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.bd-docs.dark-edition {
  background-color: #fff;
}

.dataTables_wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@media screen and (max-width: 480px) {
  .dataTables_wrapper {
    animation: dataTables .5s ease;
    -webkit-animation: dataTables .5s ease;
  }

  #table-triplen .dataTables_wrapper {
    animation: none;
    -webkit-animation: none;
  }
}

@keyframes dataTables {
  0% {
    transform: translateY(-51px);
  }

  100% {
    transform: translateY(0px);
  }
}

.dataTables_wrapper::-webkit-scrollbar {
  display: none;
  width: 0px;
  background: transparent;
}

.card-header.card-header-primary.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  margin-bottom: 46px;
  z-index: 97 !important;
}

div.dom_wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  margin-top: -108px;
  z-index: 98;
  background: transparent;
  margin-bottom: 18px;
}

table th[class^="sorting"],
table th.date,
.albumlist tr th.sorting:first-child {
  padding: 12px 8px 12px !important;
  cursor: pointer;
}

.table th[class^="sorting"].sorting_disabled {
  cursor: default;
}

table.dataTable.fixedHeader-floating,
table.dataTable.fixedHeader-locked {
  background-color: #16223c !important;
  border-radius: 0 !important;
}

/*
.fixedHeader-floating thead tr {
  display: flex;
  justify-content: space-around;
}

table.dataTable.fixedHeader-floating th[class^="sorting"],
table.dataTable.fixedHeader-locked th[class^="sorting"],
table.dataTable.fixedHeader-floating th.date,
table.dataTable.fixedHeader-locked th.date {
  display: flex;
  align-items: center;
  justify-content: center;
}*/

/* หัวโคลนของ FixedHeader ตอนเปิด/ปิดเมนู: จางออก/จางกลับ 0.33s เข้าจังหวะสไลด์ของเมนู
   (เดิม visibility เปลี่ยนวับเดียว = เด้งหาย/เด้งโผล่ทันทีตัดกับ element อื่นที่สไลด์) */
.dtfh-floatingparent {
  transition: opacity 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1), visibility 0s;
}

.nav-open .dtfh-floatingparent {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1), visibility 0s 0.33s;
}

@media (max-width: 480px) {

  table.dataTable.fixedHeader-floating,
  table.dataTable.fixedHeader-locked {
    display: none !important;
    visibility: hidden !important;
  }
}

.dataTables_filter {
  position: absolute;
  top: -9px;
  z-index: 99;
  right: 30px;
  animation: fadeIn .5s ease;
  -webkit-animation: fadeIn .5s ease;
  transition: box-shadow .5s ease;
}

.dataTables_filter.sticky {
  position: relative;
  text-align: right;
  top: unset;
  right: unset;
}

.dataTables_filter label {
  font-size: 0;
  font-weight: 300;
  color: #fff;
  text-align: left;
  background: #091226;
  border-radius: 9999px;
  width: 300px;
}

.dataTables_filter label input {
  font-family: 'Graphik TH Loop', sans-serif;
  font-weight: 300;
}

.dataTables_filter label input::placeholder {
  /* ตรงกับการ render จริงบน live ปัจจุบัน: FA light ถูกถอดแล้ว ทุกตัวอักษร fallback เป็น Graphik 300 */
  font-family: 'Graphik TH Loop', sans-serif;
  overflow: visible;
  font-weight: 300;
}

@media (max-width: 667px) {
  .dataTables_filter label {
    width: 200px;
    text-align: left;
    margin-bottom: 0.46875rem;
  }
}

@media (max-width: 480px) {
  .dataTables_filter {
    margin-top: 0.5rem;
  }

  #table-triplen .dataTables_filter,
  #album .dataTables_filter {
    margin-bottom: 7.5px;
  }
}

@media (max-width: 768px) {

  table.dataTable.fixedHeader-floating,
  table.dataTable.fixedHeader-locked {
    top: 0 !important;
  }
}

@media (max-width: 480px) {
  .dataTables_filter {
    position: relative;
    top: unset;
    right: unset;
  }

  .dataTables_filter label {
    width: 100%;
  }

  .dataTables_filter label input {
    border-radius: 9999px;
  }

  .form-control,
  .is-focused .form-control {
    border-radius: 9999px;
  }

  div.dom_wrapper {
    position: relative;
    top: unset;
    margin-top: 0;
    margin-bottom: unset;
  }

  .card-header.card-header-primary.sticky {
    margin-bottom: unset;
    z-index: 99 !important;
  }

  .table-responsive,
  .table-responsive2,
  .table-responsive3 {
    overflow-x: hidden;
  }
}

@media (max-width: 480px) {

  .table-responsive table,
  .table-responsive2 table,
  .table-responsive3 table {
    display: block;
    overflow-x: auto;
    overflow-x: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
  }

  .table-responsive table::-webkit-scrollbar,
  .table-responsive2 table::-webkit-scrollbar,
  .table-responsive3 table::-webkit-scrollbar {
    width: 0px;
    background: transparent;
    display: none;
  }

  .table-responsive table::-webkit-scrollbar-track,
  .table-responsive2 table::-webkit-scrollbar-track,
  .table-responsive3 table::-webkit-scrollbar-track {
    background: transparent;
  }

  .table-responsive table::-webkit-scrollbar-thumb,
  .table-responsive2 table::-webkit-scrollbar-thumb,
  .table-responsive3 table::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

table.dataTable thead th {
  position: relative;
  background-image: none !important;
  border: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.albumtitle {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  -o-user-select: text;
  user-select: text;
}

table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:before,
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
  position: absolute;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-size: 0.8em;
  left: 0;
  right: 0;
  transition: color .25s ease !important;
  will-change: color !important;
  animation: fadeIn .5s ease;
  -webkit-animation: fadeIn .5s ease;
}

.fixedHeader-floating th:before,
.fixedHeader-floating th:after {
  animation: none !important;
}

table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:before {
  content: "\f0de";
  top: 0;
}

html[lang="en"] table.dataTable thead th.sorting:before,
html[lang="en"] table.dataTable thead th.sorting_asc:before,
html[lang="en"] table.dataTable thead th.sorting_desc:before {
  top: 1px;
}

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
  content: "\f0dd";
  top: unset;
  bottom: 0;
}

table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:after {
  color: rgba(29, 161, 242, 1) !important;
  transition: color .25s ease !important;
  will-change: color !important;
}

table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:before {
  color: rgba(29, 161, 242, 0.4) !important;
}

#table-triplen table.dataTable thead th.sorting_asc:before,
#table-triplen table.dataTable thead th.sorting_desc:after {
  color: rgba(255, 0, 0, 1) !important;
}

#table-triplen table.dataTable thead th.sorting_asc:after,
#table-triplen table.dataTable thead th.sorting_desc:before {
  color: rgba(255, 0, 0, 0.4) !important;
}

table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting:after {
  color: rgba(221, 221, 221, 0.4);
}

td.won div {
  color: #ddffdd !important;
  font-size: .875rem !important;
}

td.nom div {
  color: #fdd !important;
  font-size: .875rem !important;
}

#howe2022 {
  display: none;
  background: #000;
  cursor: default;
}

#howe2022 .vjs-big-play-button {
  left: 50%;
  margin-left: -45px;
  margin-top: -24.5px;
  top: 50%;
}

td.nopadding {
  padding: 12px 0 !important;
}

.dummy {
  display: none;
}

.card-photoshoot,
.card-event {
  background: #091226 !important;
  border-radius: 0 !important;
  border-radius: 16px !important;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  height: calc(100% - 45px);
}

.card-photoshoot .card-header,
.card-event .card-header {
  position: relative;
  padding: 0;
  display: flex;
  justify-content: center;
}

.card-body.schedule {
  min-height: calc(100dvh - 11.333333em);
  background: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Bpbm5lciIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxzdHlsZT4KLnNwaW5uZXIgewoJYW5pbWF0aW9uOiByb3RhdG9yIDVzIGxpbmVhciBpbmZpbml0ZTsKCXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlcjsKCW92ZXJmbG93OiBoaWRkZW47Cn0KQGtleWZyYW1lcyByb3RhdG9yewoJMCUgewoJCXRyYW5zZm9ybTpyb3RhdGUoMGRlZyk7Cgl9CgkxMDAlIHsKCQl0cmFuc2Zvcm06cm90YXRlKDM2MGRlZyk7Cgl9Cn0KLnBhdGggewogIHN0cm9rZS1kYXNoYXJyYXk6IDI3MDsKICBzdHJva2UtZGFzaG9mZnNldDogMDsKICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgc3Ryb2tlOiAjMWRhMWYyOwogIGFuaW1hdGlvbjogZGFzaCAxLjRzIGVhc2UtaW4tb3V0IGluZmluaXRlOwp9CkBrZXlmcmFtZXMgZGFzaCB7CgkwJSB7CgkJc3Ryb2tlLWRhc2hvZmZzZXQ6IDI2NTsKCX0KCTUwJSB7CgkgIHN0cm9rZS1kYXNob2Zmc2V0OiA2NTsKICAgIHRyYW5zZm9ybTpyb3RhdGUoOTBkZWcpOwogIH0KICAxMDAlIHsKICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAyNjU7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOwogIH0KfQo8L3N0eWxlPgo8Y2lyY2xlIGNsYXNzPSJwYXRoIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjEwIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIj48L2NpcmNsZT4KPC9zdmc+");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60px;
  padding: 15px 30px 5px;
}

.card-photoshoot .card-body,
.card-event .card-body {
  width: 100%;
}

.card-photoshoot .card-body {
  display: flex;
  justify-content: space-between;
}

.card-photoshoot .page-title.pages {
  min-width: 66px;
}

.card-event .card-body {
  padding-bottom: 30px;
}

.card-event .card-body:has(+ .card-footer) {
  padding-bottom: 15px !important;
}

@media (min-width: 992px) {
  .main.row {
    margin-bottom: 30px;
  }

  .row>.col-md-12:last-of-type>.card {
    margin-bottom: 30px;
  }
}

@media (max-width: 991px) {
  .card {
    margin-bottom: 15px;
  }

  .main.row {
    margin-bottom: 0;
  }

  .card-body.schedule {
    min-height: calc(100dvh - 10.25em);
  }
}

@media (max-width: 320px) {
  .card-body.schedule {
    min-height: calc(100dvh - 10.85em);
  }
}

#nschedule,
#nschedule body,
.sidebar .sidebar-wrapper {
  overscroll-behavior: none !important;
}

#nanonschedule>div {
  animation: fadeIn .5s ease;
}

.sidebar .sidebar-wrapper {
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 156px;
}

.sidebar .sidebar-wrapper::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
  display: none;
}

.card-header .fancybox:not(:first-child) {
  display: none;
}

#fashion .card-header .fancybox:not(:first-child) {
  display: none;
}

.eapp-events-calendar-tags-item:after {
  content: none !important;
}

.eapp-events-calendar-tags-item {
  margin-right: 0 !important;
}

.eapp-events-calendar-tags-item:not(:first-child) {
  margin-left: 8px !important;
}

.eapp-events-calendar-events-calendar-header {
  margin: 0 !important;
}

.eapp-events-calendar-events-calendar-component {
  min-width: unset !important;
}

.eapp-events-calendar-date-element-month,
.eapp-events-calendar-popup-time-content,
.eapp-events-calendar-popup-location-content,
.eapp-events-calendar-organizer-content,
.eapp-events-calendar-event-viewer-modal,
.eapp-events-calendar-popup-item-description,
.eapp-events-calendar-organizer-site {
  font-family: 'Graphik TH Loop', sans-serif !important;
}

.ewiaVt,
.eapp-events-calendar-event-viewer-modal {
  overflow-y: auto;
  overflow-y: -moz-scrollbars-none;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  scrollbar-color: transparent transparent;
}

.ewiaVt::-webkit-scrollbar,
.eapp-events-calendar-event-viewer-modal::-webkit-scrollbar {
  width: 0px !important;
  background: transparent !important;
  display: none !important;
}

.ewiaVt::-webkit-scrollbar-track,
.eapp-events-calendar-event-viewer-modal::-webkit-scrollbar-track {
  background: transparent !important;
}

.ewiaVt::-webkit-scrollbar-thumb,
.eapp-events-calendar-event-viewer-modal::-webkit-scrollbar-thumb {
  background-color: transparent !important;
}

.eapp-events-calendar-modal-overlay-component {
  background-color: unset !important;
  background-image:
    radial-gradient(circle at top left, transparent, rgba(0, 0, 0, 0.35)),
    radial-gradient(circle at bottom left, transparent, rgba(0, 0, 0, 0.53));
  transition: all .2s ease-in-out;
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(2px) !important;
  margin-right: 0 !important;
}

.enter-done .eapp-events-calendar-event-viewer-modalContent {
  margin-top: 60px !important;
}

.enter-done .eapp-events-calendar-event-viewer-mobile {
  margin-top: 0 !important;
}

@media screen and (max-width:618px) {
  .eapp-events-calendar-popup-item-mapContainer+.eapp-events-calendar-divider-component {
    height: 0 !important;
    background: transparent !important;
    margin: 0 !important;
  }

  .eapp-events-calendar-tags-item.fixbottom {
    margin-bottom: 20px !important;
  }
}

.eapp-events-calendar-close-component {
  width: 40px !important;
  height: 40px !important;
  top: 0 !important;
  right: 0 !important;
  border-radius: 0 16px 0 8px !important;
  background-color: rgba(255, 255, 255, 0.6) !important;
}

.eapp-events-calendar-close-component:hover {
  background-color: rgba(255, 255, 255, 1) !important;
}

@media (max-width: 618px) {
  .eapp-events-calendar-popup-item-inner {
    border-radius: 0 0 16px 16px !important;
  }

  .eapp-events-calendar-close-component {
    width: 30px !important;
    height: 30px !important;
    border-radius: 0 0 0 8px !important;
  }
}

.eapp-events-calendar-popup-item-description a {
  color: rgb(29, 161, 242);
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 5px;
  padding: 0 3px !important;
  margin: 0 -2px !important;
  transition: all 0.2s ease-in-out;
}

.eapp-events-calendar-popup-item-description a:hover {
  color: rgb(29, 161, 242);
  background-color: rgba(0, 0, 0, 0.2) !important;
  text-decoration: none;
}

.eapp-events-calendar-organizer-titleIcon {
  display: none !important;
}

.eapp-events-calendar-organizer-titleText {
  margin-left: 0 !important;
}

.eapp-events-calendar-organizer-titleText:before {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  content: "\f8dd";
  position: relative;
  width: 16px;
  height: 16px;
  font-size: 13px;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  line-height: 16px;
  text-rendering: optimizeLegibility;
  padding-right: 20px;
}

.eapp-events-calendar-date-element-component {
  background-image: linear-gradient(90deg, rgba(0, 172, 238, 1) 0%, rgba(0, 77, 228, 0.5) 100%) !important;
}

.eapp-events-calendar-time-component,
.eapp-events-calendar-location-component {
  background-color: #18223b !important;
}

.eapp-events-calendar-drop-down-modal .eapp-events-calendar-drop-down-item {
  background: none !important;
}

.eapp-events-calendar-drop-down-modal .eapp-events-calendar-drop-down-item:hover a {
  background: none !important;
}

.eapp-events-calendar-drop-down-modal .eapp-events-calendar-drop-down-item:first-child a {
  border-radius: 16px 16px 0px 0px;
}

.eapp-events-calendar-drop-down-modal .eapp-events-calendar-drop-down-item:last-child a {
  border-radius: 0px 0px 16px 16px;
}

.eapp-events-calendar-drop-down-modal .eapp-events-calendar-drop-down-item a:hover {
  background: rgba(247, 249, 249, 0.25) !important;
  color: #fff;
}

.eapp-events-calendar-drop-down-modal .eapp-events-calendar-drop-down-item a:active {
  background: rgba(247, 249, 249, 0.125) !important;
  color: #fff;
}

.eapp-events-calendar-drop-down-modal .eapp-events-calendar-drop-down-item:first-child,
.eapp-events-calendar-drop-down-modal .eapp-events-calendar-drop-down-item:first-child a {
  height: 37px !important;
}

.eapp-events-calendar-drop-down-modal .eapp-events-calendar-drop-down-item:last-child,
.eapp-events-calendar-drop-down-modal .eapp-events-calendar-drop-down-item:last-child a {
  height: 39px !important;
}

/**.eapp-events-calendar-date-element-item {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.eapp-events-calendar-grid-group:last-of-type > div:first-of-type .eapp-events-calendar-date-element-item {
  visibility: hidden;
  position: relative;
}

.eapp-events-calendar-grid-group:last-of-type > div:first-of-type .eapp-events-calendar-date-element-item:after {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  content: 'เร็ว ๆ นี้';
  width: 100%;
}

html[lang*="en"] .eapp-events-calendar-grid-group:last-of-type > div:first-of-type .eapp-events-calendar-date-element-item:after {
  content: 'Upcoming';
}

@media screen and (max-width: 480px) {
  .eapp-events-calendar-grid-group:last-of-type > div:first-of-type .eapp-events-calendar-date-element-item:after {
    left: 50%;
    transform: translateX(-50%);
  }
}

.eapp-events-calendar-grid-group:last-of-type > .eapp-events-calendar-grid-component .eapp-events-calendar-date-element-start {
  visibility: hidden;
  position: relative;
}

.eapp-events-calendar-grid-group:last-of-type > .eapp-events-calendar-grid-component .eapp-events-calendar-date-element-day:after {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  content: 'TBA';
  left: -19px;
  font-size: 24px;
  width: 75px;
  line-height: 51px;
}
**/

.eapp-events-calendar-grid-item-imageContainer {
  width: calc(100% + 50px) !important;
  margin-left: -25px !important;
  background: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Bpbm5lciIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxzdHlsZT4KLnNwaW5uZXIgewoJYW5pbWF0aW9uOiByb3RhdG9yIDVzIGxpbmVhciBpbmZpbml0ZTsKCXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlcjsKCW92ZXJmbG93OiBoaWRkZW47Cn0KQGtleWZyYW1lcyByb3RhdG9yewoJMCUgewoJCXRyYW5zZm9ybTpyb3RhdGUoMGRlZyk7Cgl9CgkxMDAlIHsKCQl0cmFuc2Zvcm06cm90YXRlKDM2MGRlZyk7Cgl9Cn0KLnBhdGggewogIHN0cm9rZS1kYXNoYXJyYXk6IDI3MDsKICBzdHJva2UtZGFzaG9mZnNldDogMDsKICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgc3Ryb2tlOiAjMWRhMWYyOwogIGFuaW1hdGlvbjogZGFzaCAxLjRzIGVhc2UtaW4tb3V0IGluZmluaXRlOwp9CkBrZXlmcmFtZXMgZGFzaCB7CgkwJSB7CgkJc3Ryb2tlLWRhc2hvZmZzZXQ6IDI2NTsKCX0KCTUwJSB7CgkgIHN0cm9rZS1kYXNob2Zmc2V0OiA2NTsKICAgIHRyYW5zZm9ybTpyb3RhdGUoOTBkZWcpOwogIH0KICAxMDAlIHsKICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAyNjU7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOwogIH0KfQo8L3N0eWxlPgo8Y2lyY2xlIGNsYXNzPSJwYXRoIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjEwIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIj48L2NpcmNsZT4KPC9zdmc+");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50px;
}

.eapp-events-calendar-grid-item-info {
  margin-top: 0px !important;
}

.eapp-events-calendar-grid-item,
.eapp-events-calendar-grid-item * {
  animation: none !important;
}

.eapp-events-calendar-grid-item-location {
  margin-top: 6px !important;
}

.eapp-events-calendar-grid-item-tags {
  margin: 0 -10px 0 0 !important;
}

.eapp-events-calendar-grid-item-locationAndTime {
  margin-top: 10px !important;
}

@media (orientation: landscape) {
  .card-header .fancybox.desktop {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    pointer-events: auto !important;
  }

  .card-header .fancybox.mobile {
    display: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none !important;
  }
}

@media (orientation: portrait) {
  .card-header .fancybox.desktop {
    display: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none !important;
  }

  .card-header>.fancybox.mobile {
    display: block;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    pointer-events: auto !important;
  }

  .card-header>.fancybox.mobile~.fancybox.mobile {
    display: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none !important;
  }
}

.card-photoshoot .card-header a {
  display: block;
  position: relative;
  width: 226px;
  height: 300px;
  margin-top: -15px;
  border-radius: 8px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.card-header .fancybox.visiblea[class*="kazz-"] {
  width: 243px !important;
}

.card-header .fancybox.visiblea[class*="praew"],
.card-header .fancybox.visiblea[class*="sudsapda"] {
  width: 232px !important;
}

.card-header .fancybox.visible.rcchina {
  background-image: url(../magazine/thumbnail/RCChina_Mar22.webp);
  width: 225px !important;
}

/* Fashion */
.card-photoshoot.fashion .card-header .fancybox.visiblea {
  display: block;
  position: relative;
  width: 240px;
  height: auto;
  aspect-ratio: 4 / 5;
  margin: -15px 0 0 0;
  border-radius: 8px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.card-photoshoot .card-header {
  min-height: 300px;
}

.card-photoshoot .card-header,
.card-event .card-header {
  background: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Bpbm5lciIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxzdHlsZT4KLnNwaW5uZXIgewoJYW5pbWF0aW9uOiByb3RhdG9yIDVzIGxpbmVhciBpbmZpbml0ZTsKCXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlcjsKCW92ZXJmbG93OiBoaWRkZW47Cn0KQGtleWZyYW1lcyByb3RhdG9yewoJMCUgewoJCXRyYW5zZm9ybTpyb3RhdGUoMGRlZyk7Cgl9CgkxMDAlIHsKCQl0cmFuc2Zvcm06cm90YXRlKDM2MGRlZyk7Cgl9Cn0KLnBhdGggewogIHN0cm9rZS1kYXNoYXJyYXk6IDI3MDsKICBzdHJva2UtZGFzaG9mZnNldDogMDsKICB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXI7CiAgc3Ryb2tlOiAjMWRhMWYyOwogIGFuaW1hdGlvbjogZGFzaCAxLjRzIGVhc2UtaW4tb3V0IGluZmluaXRlOwp9CkBrZXlmcmFtZXMgZGFzaCB7CgkwJSB7CgkJc3Ryb2tlLWRhc2hvZmZzZXQ6IDI2NTsKCX0KCTUwJSB7CgkgIHN0cm9rZS1kYXNob2Zmc2V0OiA2NTsKICAgIHRyYW5zZm9ybTpyb3RhdGUoOTBkZWcpOwogIH0KICAxMDAlIHsKICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAyNjU7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOwogIH0KfQo8L3N0eWxlPgo8Y2lyY2xlIGNsYXNzPSJwYXRoIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjEwIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIj48L2NpcmNsZT4KPC9zdmc+") no-repeat 50% calc(50% - 15px) / 50px;
  transition: all .5s ease;
}

.card-header .fancybox {
  background-image: none;
  will-change: opacity;
}

.card-header {
  transition: none !important;
}

.card-header .fancybox.visible {
  animation: fadeIn .5s ease-in-out;
  -webkit-animation: fadeIn .5s ease-in-out;
}

.card-header:has(.fancybox.visible)::before {
  content: '';
  background-color: #091226;
  height: calc(100% - 15px);
  display: block;
  width: 100%;
  position: absolute;
  animation: fadeIn .5s ease-in-out;
  -webkit-animation: fadeIn .5s ease-in-out;
}

.card-event .card-header a {
  display: block;
  position: relative;
  width: 250px;
  height: 250px;
  margin: -15px 0 0 0;
  border-radius: 8px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.card-photoshoot .card-header a:before,
.card-event .card-header a:before,
.card-fashion .card-header a:before {
  content: '';
  display: inline-block;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  opacity: 0;
  background-color: rgba(0, 0, 0, 1);
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  pointer-events: none;
  font-size: 0;
  border-radius: 8px;
}

.card-photoshoot .card-header a:hover:before,
.card-event .card-header a:hover:before,
.card-fashion .card-header a:hover:before {
  opacity: 0.5;
}

html[lang*="th"] .card-photoshoot .card-header a:after,
html[lang*="th"] .card-event .card-header a:after,
html[lang*="th"] .card-fashion .card-header a:after {
  content: 'ดูเพิ่มเติม';
  line-height: 32px;
  width: 95px;
}

html[lang*="en"] .card-photoshoot .card-header a:after,
html[lang*="en"] .card-event .card-header a:after,
html[lang*="en"] .card-fashion .card-header a:after {
  content: 'SHOW MORE';
  line-height: 30px;
  width: 120px;
  font-size: 16px;
}

.card-photoshoot .card-header a:after,
.card-event .card-header a:after,
.card-fashion .card-header a:after {
  font-family: 'Graphik TH', sans-serif;
  font-weight: 600;
  font-size: 18px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  height: 28px !important;
  text-align: center;
  background: linear-gradient(90deg, rgb(0, 172, 238) 0%, rgb(0, 77, 228) 100%);
  color: #fff;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transition: all 0.35s ease-in-out;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: none !important;
  outline: 0 !important;
}

.card-photoshoot .card-header a:hover:after,
.card-photoshoot .card-header a:active:after,
.card-event .card-header a:hover:after,
.card-event .card-header a:active:after,
.card-fashion .card-header a:hover:after,
.card-fashion .card-header a:active:after {
  opacity: 1;
}

.card-photoshoot .card-header a:active::before,
.card-event .card-header a:active::before,
.card-fashion .card-header a:active::before {
  opacity: 0.6;
}

.photoshoot-title,
.event-title {
  display: block;
  color: #1da1f2;
  font-weight: 600;
}

.photoshoot-description,
.event-description {
  display: block;
  font-family: 'Graphik TH Loop', sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
}

.card-title .day-of-week {
  display: block;
}

.card-title .day-of-month {
  font-weight: 700;
  font-size: 3rem;
  line-height: 0.8;
  letter-spacing: 3.85px;
}

.card.grayed-out {
  color: #dcdcdc;
}

.card-photoshoot .card-body .card-title span,
.card-photoshoot .card-body .card-page span,
.card-event .card-body .card-page span {
  line-height: 26px;
}

.card-photoshoot .card-body .card-title {
  text-align: left;
  float: left;
  font-size: 1.2rem;
  margin-bottom: 0;
}

.card-event .card-body .card-title {
  display: flex;
  justify-content: flex-start;
  text-align: left;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: 15px;
}

.card-event .card-body .card-title .event-title {
  font-size: 1.2rem;
  line-height: 1.25em;
  margin: 2px 0;
  flex-basis: 100%
}

.card-event .card-body .card-title .event-hashtag {
  font-family: 'Graphik TH Loop', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 12px;
  line-height: 1.5em;
  margin-top: 2px;
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.7);
}

.card-event .card-body .card-title .event-hashtag:not(:nth-child(2)) {
  margin-top: 0 !important;
}

.card-event .card-body .card-title .event-hashtag:last-child {
  margin-right: 0;
}

.card-event .date i {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  top: -1px;
  width: 13px;
  height: 13px;
  background: url('../icon/calendar.svg') no-repeat;
  background-size: contain;
  background-position: center center;
  margin-right: 10px;
}

.card-event .date span {
  position: relative;
}

.card-event .location i {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  top: -1px;
  width: 13px;
  height: 13px;
  background: url('../icon/location.svg') no-repeat;
  background-size: contain;
  background-position: center center;
  margin-right: 10px;
}

.card-event .stream i {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  background: url('../icon/stream.svg') no-repeat;
  background-size: contain;
  background-position: center center;
  margin-right: 10px;
}

.card-event .card-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.card-event .card-info>div {
  display: inline-flex !important;
  border-radius: 13px;
  background-color: #18223b;
  padding: 2.5px 15px 2.5px 8px;
  line-height: 1.25rem;
  flex-direction: row;
  align-items: center;
  max-width: 100%;
  margin-top: 6px;
  font-size: 14px;
}

.card-event .card-info .date {
  margin-top: 0;
  margin-right: 1rem;
}

.card-event .card-info .location {
  margin-right: 0;
}

.card-photoshoot .card-body .card-title:only-child,
.card-event .card-body .card-title:only-child {
  margin-right: 0;
}

.card-photoshoot .card-body .card-page,
.card-event .card-body .card-page {
  display: block;
  right: 30px;
  text-align: right;
  margin: 2px 0 0;
}

.card-photoshoot .card-body .card-page .page-title,
.card-photoshoot .card-body .card-page .page-number,
.card-event .card-body .card-page .page-title,
.card-event .card-body .card-page .page-number {
  display: block;
}

.card-photoshoot .card-body .card-page .page-title,
.card-event .card-body .card-page .page-title {
  color: #1da1f2;
  font-weight: 500;
}

.card-photoshoot .card-body .card-page .page-number,
.card-event .card-body .card-page .page-number {
  font-weight: 400;
}

@media (max-width: 1024px) {
  a span.ext {
    display: inline-block;
  }
}

.eapp-events-calendar-grid-item-component {
  padding: 30px 25px 25px !important;
}

.card-photoshoot.fashion .card-body {
  padding-bottom: 30px;
}

@media (max-width: 480px) {
  .card-photoshoot.fashion .card-body {
    padding-bottom: 20px;
  }
}

@media (max-width: 414px) {

  .card-photoshoot,
  .card-event {
    margin-top: 15px;
    height: calc(100% - 30px);
  }

  .card-photoshoot .card-body,
  .card-event .card-body {
    padding-bottom: 25px;
  }

  .card-photoshoot .card-body .card-page {
    right: 20px;
  }

  .eapps-events-calendar .eapp-events-calendar-grid-item-component {
    padding: 30px 20px 25px !important;
  }

  .card-body.photoshoot,
  .card-body.event {
    padding: 0.9375rem 15px 0;
  }

}

@media (max-width: 320px) {
  .card-header .plook-85 {
    width: 228px !important;
    height: 272px !important;
  }

  .card-header .sanook-jan23 {
    width: 250px !important;
    height: 244px !important;
  }

  .card-header .bkkbiz {
    width: 250px !important;
    height: 250px !important;
  }
}

@media (max-width: 280px) {

  .card-photoshoot .card-body,
  .card-event .card-body {
    padding: 0.9375rem 15px;
  }

  .card-photoshoot .card-body .card-page,
  .card-event .card-body .card-page {
    right: 15px;
  }

  .card-event .card-info>div {
    margin-right: 0;
    padding-right: .5rem;
  }

  .card-event .card-header a {
    width: 200px;
    height: 200px;
  }
}
/* ===== Phase 0: cross-document View Transitions (progressive enhancement) =====
   Chrome 126+ / Safari 18.2+ get a smooth cross-fade between pages; the sidebar
   is kept visually stable. Unsupported browsers navigate normally. */
@view-transition {
	navigation: auto;
}
/* Shared shell regions get their own snapshot group so the root cross-fade
   only animates the actual page content. Selectors must match EXACTLY ONE
   element per page — duplicate view-transition-names abort the transition. */
.sidebar {
	view-transition-name: site-sidebar;
}
.main-panel > .navbar {
	view-transition-name: site-topbar;
}
.row:has(> div > .card-stats) {
	view-transition-name: site-followers;
}
footer.footer {
	view-transition-name: site-footer;
}
/* follower cards fade in on the FIRST page of a session only — from the second page on
   (html.revisit, set by the inline head script) they render instantly like the rest of the shell */
html.revisit .card-stats .card-icon img[src],
html.revisit .card-stats h3.current {
	animation: none;
	-webkit-animation: none;
}
/* ===== เมนูมือถือ/แท็บเล็ตลื่นขึ้น (ระยะ/เวลา/เส้นโค้งเท่าเดิมเป๊ะ) =====
   เดิม transition:all ทำให้ box-shadow ใหญ่ของ sidebar ถูกวาดใหม่ทุกเฟรมตอนสไลด์ —
   จำกัดให้ animate เฉพาะ transform (งาน compositor ล้วน) เงาโผล่ทันทีแทนการ fade
   จองเลเยอร์ sidebar ล่วงหน้าด้วย will-change ได้เพราะมันมี transform พื้นฐานอยู่แล้ว
   (ห้ามทำแบบเดียวกันกับ .main-panel — จะกลายเป็น containing block ถาวร
   แล้ว sticky header/การ์ดโปรไฟล์พังตอนเมนูปิด) */
@media (max-width: 991px) {
	.main-panel,
	.navbar-collapse,
	.wrapper-full-page,
	.navbar .container,
	.navbar .container .navbar-wrapper,
	.navbar .container .navbar-toggler,
	.sidebar,
	.off-canvas-sidebar nav .navbar-collapse {
		transition-property: transform;
	}
	.sidebar {
		will-change: transform;
	}
}
@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}

/* ===== หัวตาราง sticky ช่วงแท็บเล็ต (768-991px) =====
   DataTables FixedHeader (โคลนหัวตาราง + คำนวณจาก scroll event) เพี้ยนบน Safari iPad เครื่องจริง
   (หัวลอยค้าง/เบิ้ลสองแถว — เว็บเดิมก็เป็น) — ช่วงนี้ตารางกว้างไม่ล้นจอ จึงปลด overflow wrapper
   แล้วใช้ position: sticky แท้ของ browser แทน (JS ปิด FixedHeader ช่วงนี้ใน shows.astro) */
@media (min-width: 768px) and (max-width: 991px) {
	/* ช่องค้นหาหลบปุ่ม hamburger ขวาบน (คำสั่งเจ้าของ: เฉพาะแท็บเล็ต) */
	.dataTables_filter {
		right: 85px;
	}
	.dataTables_filter.sticky label {
		margin-right: 55px;
	}
	/* body overflow-x:hidden สร้าง scroll container ปลอมที่ฆ่า position:sticky —
	   clip ตัดส่วนล้นเท่ากันแต่ไม่สร้าง scrollport (Safari 16+; เก่ากว่านั้น = แค่ไม่ sticky) */
	body {
		overflow-x: clip;
	}
	.table-responsive:has(table.showlist) {
		overflow: visible;
	}
	table.showlist thead th {
		position: sticky;
		top: 58px;
		background-color: #16223c;
		z-index: 3;
	}
}