#footer-splide .splide__slide {
	width: auto !important;
}
#footer-splide .splide__slide .footer-image-icon {
	width: 13.938rem;
	height: auto;
	display: block;
}
#footer-splide .splide__list {
	align-items: center;
}
/* Lightbox custom download button */
.lb-dataContainer:after {
	content: "";
	display: table;
	clear: both;
}
.lb-download {
	display: block;
	float: right;
	width: 32px;
	height: 32px;
	margin: 0 0 0 10px;
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMSAxNXY0YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0ydi00Ij48L3BhdGg+PHBvbHlsaW5lIHBvaW50cz0iNyAxMCAxMiAxNSAxNyAxMCI+PC9wb2x5bGluZT48bGluZSB4MT0iMTIiIHkxPSIxNSIgeDI9IjEyIiB5Mj0iMyI+PC9saW5lPjwvc3ZnPg==) center center no-repeat;
	background-size: contain;
	opacity: 0.6;
	transition: opacity 0.3s;
	cursor: pointer;
}
.lb-download:hover {
	opacity: 1;
}
/* Bootstrap Modal Custom Styles */
#videoModal .modal-dialog {
	max-width: 600px;
}
#imageModal .modal-dialog {
	/* max-width: 500px; */
}
.modal-share-button {
	display: inline-block;
	transition: transform 0.3s ease;
}
.modal-share-button:hover {
	transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
#videoModal .modal-dialog {
	/* max-width: 400px; */
}
#imageModal .modal-dialog {
	/* max-width: 90%; */
}
.modal-share-button img {
	width: 150px !important;
}
}
    
    /* สไตล์สำหรับ Tab ที่ Active */
.tab-button {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.tab-button:hover {
  transform: scale(1.05);
}

.tab-button.active img {
  transform: translateX(15px) scale(1.1);
}

/* Animation สำหรับเนื้อหาที่เปลี่ยน */
#tab-content {
  transition: opacity 0.3s ease;
}

#tab-content-img {
  transition: all 0.5s ease;
}



/***********************************/

.main-container {
  width: 100%;
  /* height: 314.188rem; */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  font-size: 1.5rem;
  color: #462717;
  font-family: Kanit;
}
.header-container,
.header-content-container {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.header-container {
  align-self: stretch;
  flex: 1;
  overflow: hidden;
  padding: 0.625rem;
  position: relative;
  isolation: isolate;
  gap: 0.625rem;
  min-height: 55rem;
  background: url(../public/bg-sec-1.jpg) lightgray no-repeat;
  background-size: cover;
  background-position: center top;
}
.header-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.header-content-container {
  max-width: 76.5rem;
  padding: 1rem;
  gap: 1rem;
  z-index: 0;
}
.title-container {
  /* height: 47.813rem; */
  width: 40.75rem;
  display: flex;
  align-items: center;
}
.buttons-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0rem;
}
.main-image-icon {
  width: 34.125rem;
  position: relative;
  max-height: 100%;
  object-fit: cover;
}
.button-container {
  /* width: 32.375rem; */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}
.button-container2 {
  text-decoration: none;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.button-container-icon {
  width: 32.375rem;
  height: 7.494rem;
  object-fit: cover;
}
.buttons-container2 {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 0.937rem;
}
.button-container3 {
  text-decoration: none;
  /* width: 15.719rem; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.button-container-icon2 {
  align-self: stretch;
  height: 5.494rem;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}
.logo-image-icon {
  width: 15.313rem;
  position: absolute;
  margin: 0 !important;
  top: 1.875rem;
  left: 2.5rem;
  max-height: 100%;
  object-fit: cover;
  z-index: 1;
}
.divider-image-icon,
.main-image-container {
  align-self: stretch;
  overflow: hidden;
  position: relative;
}
.divider-image-icon {
  height: 1.125rem;
  max-width: 100%;
  flex-shrink: 0;
  object-fit: cover;
}
.main-image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
  box-sizing: border-box;
  isolation: isolate;
  gap: 0.625rem;
  min-height: 55rem;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 0%;
  will-change: background-position;
  background: url(../public/bg-sec-2.jpg);
  background-size: cover;
}
.promotion-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.625rem;
  z-index: 0;
  flex-shrink: 0;
  max-width: 62.5rem;
}
.promotion-title-container {
  width: 70.563rem;
  height: 9.313rem;
  position: relative;
  object-fit: cover;
}
.promotion-content-container {
  align-self: stretch;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0 1.25rem;
  flex-direction: column;
}
.promotion-item-container {
  height: 12.125rem;
  width: 18.938rem;
  box-shadow: 0 9px 15px rgba(0, 0, 0, 0.45);
  object-fit: cover;
}
.promotion-image-icon {
  width: 37.875rem;
  position: absolute;
  margin: 0 !important;
  bottom: -11.306rem;
  left: -28.875rem;
  /* max-height: 100%; */
  /* object-fit: cover; */
  z-index: -1;
  flex-shrink: 0;
}
.main-image-container2 {
  align-self: stretch;
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
  box-sizing: border-box;
  min-height: 55rem;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 0%;
  will-change: background-position;
  background: url(../public/bg-sec-3.jpg);
  background-size: cover;
}

.main-image-container,
.main-image-container2,
.main-image-container3 {
  overflow: hidden;
  position: relative;
}

.main-image-container2 {}
.content-container {
  width: 76.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.content-section-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.content-section-image {
  align-self: stretch;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
}
.content-section-container2 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 5.562rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  background: url(../public/bg-board.png);
  background-size: contain;
  background-position: center top;
  background-size: 100%;
}
.content-section-container3 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 100%;
}
.content-section-text-container {
  align-self: stretch;
  height: 4rem;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}
.content-section-container4 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.187rem;
}
.content-section-container5,
.content-section-container6 {
  align-self: stretch;
  height: 7.75rem;
  border-radius: 10px;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}
.content-section-container6 {
  height: 17.5rem;
}
.content-section-container7 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  gap: 0.625rem;
}
.content-section-image3 {
  width: 41.688rem;
  position: relative;
  max-height: 100%;
  object-fit: cover;
  z-index: 0;
  flex-shrink: 0;
}
.button-container5 {
  text-decoration: none;
  width: 35%;
  /* height: 4.75rem; */
  margin: 0 !important;
  position: absolute;
  top: 47%;
  left: 23%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  isolation: isolate;
  gap: 0.625rem;
  z-index: 1;
}
.button-background-icon {
  align-self: stretch;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  z-index: 0;
}
.button-icon-group,
.button-text {
  position: absolute;
  margin: 0 !important;
}
.button-icon-group {
  width: 20.5%;
  height: 54.47%;
  top: 22.89%;
  right: 68.58%;
  bottom: 22.63%;
  left: 10.92%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  mix-blend-mode: screen;
  z-index: 1;
}
.button-text {
  width: 8.75rem;
  height: 2.25rem;
  top: calc(50% - 18px);
  left: calc(50% - 70px);
  font-weight: 600;
  background: #512002, #000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  text-shadow: 0 4px 4px #fedf97;
  z-index: 2;
}
.main-image-container3 {
  align-self: stretch;
  flex: 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding: 0.625rem;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  gap: 0.625rem;
  min-height: 55rem;
  font-size: 3rem;
  font-family: "UID SALMON 2019";
  font-family: "Sriracha", cursive;
  flex-direction: column;
  align-items: stretch;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 0%;
  will-change: background-position;
  background: url(../public/bg-sec-4.jpg);
  background-size: cover;
}
.main-image-container4 {
  align-self: stretch;
  flex: 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding: 0.625rem;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  gap: 0.625rem;
  min-height: 55rem;
  font-size: 3rem;
  font-family: "UID SALMON 2019";
  flex-direction: column;
  align-items: stretch;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 0%;
  will-change: background-position;
  background: url(../public/bg-sec-5.jpg);
  background-size: cover;
}
.main-image-icon2 {
  max-width: 51.188rem;
  position: absolute;
  margin: 0 !important;
  bottom: -4.031rem;
  right: -35rem;
  /* max-height: 100%; */
  object-fit: cover;
  z-index: 0;
  flex-shrink: 0;
}
.content-container2 {
  max-width: 54.938rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  flex-shrink: 0;
  margin: 0 auto;
}
.content-title-container {
  width: 27.375rem;
  height: 6.813rem;
  position: relative;
  object-fit: cover;
}
.content-section-container8 {
  align-self: stretch;
  height: 40.563rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 3.637rem 9.825rem;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  gap: 0.625rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  background: url(../public/bg-book.png);
  background-size: cover;
  background-position: center top;
}
.content-section-container9 {
  max-width: 36.688rem;
  height: 32.688rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  z-index: 0;
  flex-shrink: 0;
}
.content-section-icon {
  width: 33.875rem;
  height: 17.625rem;
  position: relative;
  box-shadow: 0 7px 12.3px rgba(0, 0, 0, 0.25);
  object-fit: cover;
}
.content-section-text-container2 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.content-section-text,
.content-section-text2 {
  align-self: stretch;
  position: relative;
}
.content-section-text2 {
  font-size: 1rem;
  font-family: Kanit;
  color: #000;
}
.button-container6 {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.button-container-icon4 {
  width: 13.625rem;
  height: 4.75rem;
  object-fit: cover;
}
.content-section-container10 {
  margin: 0 !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -9.375rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 1;
  flex-shrink: 0;
}
.content-section-container12 {
  width: 16.813rem;
  height: 4.875rem;
  object-fit: cover;
}
.main-image-icon3 {
  width: 26.813rem;
  position: absolute;
  margin: 0 !important;
  bottom: -7.062rem;
  left: -23.875rem;
  /* max-height: 100%; */
  object-fit: cover;
  z-index: 0;
  flex-shrink: 0;
}
.content-title-container2 {
  width: 27.688rem;
  height: 6.813rem;
  position: relative;
  object-fit: cover;
}
.content-section-container21 {
  align-self: stretch;
  height: 40.563rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4.687rem 5.25rem;
  box-sizing: border-box;
  gap: 1.75rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  background: url(../public/bg-book.png);
  background-size: cover;
  background-position: center top;
}
.content-section-container22 {
  width: 44.125rem;
  height: 23.063rem;
  position: relative;
  object-fit: cover;
}
.footer-container {
  align-self: stretch;
  background-color: #320000;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: 1.187rem 0.937rem;
  gap: 1.187rem;
}
.footer-image-icon {
  width: 13.938rem;
  position: relative;
  max-height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}
.footer-bottom-container {
  align-self: stretch;
  height: 10.25rem;
  background-color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.625rem 0;
  box-sizing: border-box;
  font-size: 1rem;
  color: #fff;
  font-family: Inter;
}
.footer-logo-icon {
  width: 19.875rem;
  position: relative;
  max-height: 100%;
  object-fit: cover;
}



/************************************************/
/******************** Media Query  ************************/
/**********************************************************/
@media (min-width: 1200px) {
  
}

@media (min-width: 992px) and (max-width: 1199px) {
}

@media (min-width: 768px) and (max-width: 991px) {
}

@media (min-width: 576px) and (max-width: 767px) {
}

@media (max-width: 575px) {

  .content-section-container21,.content-section-container8  {
  height: auto;
  background: none;
  background-color: #fff8dc;
  padding: 1.5rem;
  border: 3px solid #2a0806;
  border-radius: 14px;
}
  .main-image-container,.main-image-container4,.main-image-container3,.main-image-container2 {
  padding: 2.625rem 0.625rem;
  min-height: auto;
}

	.content-section-container2 {
    /* background-size: cover; */
    padding: 0 4.562rem;
}
}


/* Media Query สำหรับหน้าจอเล็กกว่า md (768px) */
@media (max-width: 767.98px) {
  .content-section-container10 {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0rem;
    margin-top: 2rem;
    left: 0;
    width: 100%;
    top: 0;
    transform: none;
    margin-top: 20px !important;
  }
    
    .content-section-container10 img{width: 100%;height: auto}
  
  .tab-button.active img {
    transform: translateX(0) scale(1.05);
  }
}