@import url("https://use.typekit.net/gkt6orc.css");

:root {
  --primary: #E17795;
  --secondary : #4B833E;
  --white: #FFF;
  --black:#242424;
  --black-variant:#515151;
  --grey:#625B71;
  --yellow:#B8BE68;
  --pink:#E80A89;
  --green:#1CA350;
  --lighpink : #FEEDEE;
  --border-input: #79747E;
  --color-input:#49454F;
  --pd-body-top:134px;
  --bg-copyright:#DED2BB;
  --bg-body:#F9F6F0;
  --bg-vr:#D9D9D9;
  --btn-white-hov:#E3779729;
  --btn-primary-hov:#E68DA6;
  --trans-2: ease .2s;
  --height-menu-mobile: 80px;
  --height-menu-tablet: 94px;
  --height-menu-desktop: 136px;
  --deco-green: #C2D62E;
}

@font-face {
  font-family: "IBM Plex Sans Thai";
  src: url(../fonts/IBMPlexSansThai/IBMPlexSansThai-Thin.ttf) format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  src: url(../fonts/IBMPlexSansThai/IBMPlexSansThai-ExtraLight.ttf) format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  src: url(../fonts/IBMPlexSansThai/IBMPlexSansThai-Light.ttf) format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  src: url(../fonts/IBMPlexSansThai/IBMPlexSansThai-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  src: url(../fonts/IBMPlexSansThai/IBMPlexSansThai-Medium.ttf) format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  src: url(../fonts/IBMPlexSansThai/IBMPlexSansThai-SemiBold.ttf) format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  src: url(../fonts/IBMPlexSansThai/IBMPlexSansThai-Bold.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* html[lang="th"]{
  font-family: 'IBM Plex Sans Thai', sans-serif;
}
html[lang="en"]{
  font-family: 'Roboto', sans-serif;
} */
body{
  font-family: "IBM Plex Sans Thai", sans-serif;;
  font-size: 1rem;
  color:var(--black);
  background-color: var(--bg-body);
  padding-top:var(--height-menu-mobile);
}
header .navbar{
  padding:.75rem 0;
  background-color: var(--bg-body);
}
h1, h2, h3, h4, h5, h6{
  margin-bottom: 0;
}
a{
  text-decoration: none;
  outline: none;
}

.f-preuksa, .f-preuksa *{
  font-family: "preuksa", sans-serif;
}
html[lang="th"] .f-preuksa, html[lang="th"] .f-preuksa *{
  font-family: 'IBM Plex Sans Thai', sans-serif;
}
input{
  border-color: var(--border-input) !important;
}
/* input[type="text"], input[type="email"]{
  height: 56px;
} */
.fs-large{
  font-size: 3rem !important;
}
.fs-1{
  font-size: 2.5rem !important;
}
.fs-2{
  font-size: 2rem !important;
}
.fs-3{
  font-size: 1.75rem !important;
}
.fs-4{
  font-size: 1.5rem !important;
}
.fs-5{
  font-size: 1.25rem !important;
}
.fs-6{
  font-size: 1rem !important;
}
.fs-7{
  font-size: .875rem !important;
}
.fs-8{
  font-size: .75rem !important;
}
.form-group{
  position: relative;
}
.form-group label{
  position: absolute;
  font-size: 0.75rem;
  padding:0 0.25rem;
  top:0;
  left:0.75rem;
  transform: translateY(-50%);
  color:var(--color-input);
}
.form-group .inp-placeholder{
  position: absolute;
  font-size: 0.75rem;
  padding:0 0.25rem;
  bottom:0;
  left:0.75rem;
  transform: translateY(1.25rem);
  color:var(--color-input);
}
.form-check-app{
  color:#1D1B20;
  height: 56px;
  border:1px solid var(--border-input);
  display: flex;
  align-items: center;
  padding :1rem;
  border-radius: var(--bs-border-radius);
  justify-content: space-between;
  cursor: pointer;
}
.form-check-app input[type="radio"]{
  margin:0;
  border:2px solid #49454F;
  width: 20px;
  height: 20px;
}
.form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23C14E52'/%3e%3c/svg%3e");
    border:2px solid #C14E52 !important;
}
.vr{
  background-color:var(--bg-vr);
  opacity: 1;
}
.navbar ul.navbar-nav .nav-item a{
  /* padding-top:0;
  padding-bottom: 0; */
  border-radius:.75rem;
  padding:.5rem;
}
.bg-primary{
  background-color: var(--primary) !important;
}
.bg-secondary{
  background-color: var(--secondary) !important;
}
.bg-lighpink{
  background-color: var(--lighpink) !important;
}
.bg-press{
  background-image: linear-gradient(to bottom, var(--bg-body) 30%, transparent 60%), url(../images/bg-press.webp) ;
  background-position: center;
  background-size: cover, auto;
  background-repeat:no-repeat, repeat;
}
.text-primary{
  color:var(--primary) !important;
}
.text-pink{
  color:var(--pink) !important;
}
.text-yellow{
  color:var(--yellow);
}
.text-black-v{
  color:var(--black-variant)
}
.text-green{
  color:var(--green)
}
.bg-pink{
  background-color: var(--pink) !important;
}
.link-black{
  color: var(--black);
  transition: color var(--trans-2);
  &:hover {
    color: var(--primary);
  }
}
/* ตัดบรรทัดให้แต่ละบรรทัดยาวใกล้เคียงกัน (แทนการใส่ <br> ในข้อความที่แปลได้) */
.text-balance{
  text-wrap: balance;
}
.line-clamp-2, .line-clamp-3{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2{
  -webkit-line-clamp: 2;
}
.line-clamp-3{
  -webkit-line-clamp: 3;
}
.object-position-top{
  object-position: top !important;
}
.py-sec-40{
  padding-top:2.5rem;
  padding-bottom: 2.5rem;
}
.py-sec-80{
  padding-top:5rem;
  padding-bottom: 5rem;
}
.px-sec{
  padding-left:1rem;
  padding-right:1rem;
}
.px-40{
  padding-left:2.5rem;
  padding-right:2.5rem;
}

hr.dashed {
  border-top: var(--bs-border-width) dashed;
}
.navbar-nav{
  column-gap:8px;
  row-gap:12px;
}
.navbar-nav .nav-link{
  color: var(--black);
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover{
  /* color: var(--primary); */
  background-color:#E377973D;
}

#btnHideform{
  background:none;
  border:none;
}
.max-w-lg-440{
  width: 100%;
}
#btnLang{
  border:1px solid #00000040;
  min-height: 48px;
}
#drowdownLang{
  right: 0;
  left:unset;
  min-width: 3rem;
  text-align: start;
  padding:0;
  overflow: hidden;
  margin-top:0;
  border:none;
  box-shadow: 0 4px 4px #00000040;
}
#drowdownLang li:not(:last-child){
  border-bottom: 1px solid #CAC4D0;
}
#drowdownLang li a{
  padding:1rem;
  display: flex;
  gap:.5rem;
}
#topMenu{
  height:42px;
}
#topMenu a, .menu-more a{
  color: var(--white);
  display: flex;
  align-items: center;
  gap:4px;
}
#topMenu a > span, .menu-more a > span{
  display: block;
  height: 22px;
}
#topMenu .vr{
  height:26px;
  background-color:var(--white);
  opacity: .25;
}
.lang-cont a{
  opacity: .25;
  &.active{
    opacity: 1;
    font-weight: 500;
    pointer-events: none;
  }
}
#logo{
  height: 56px;
  width: auto;
}

#btnHamburger{
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  /* background-color: var(--primary); */
  box-shadow: none;
  border:none;
}

#btnHamburger span{
  display: block;
  position: absolute;
  height: 2px;
  width: 24px;
  background: var(--black);
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  transform: translateX(-50%);
}
#btnHamburger span:nth-child(1) {
  top: 10px;
  left: 50%;
}

#btnHamburger span:nth-child(2),#btnHamburger span:nth-child(3) {
  top: 18px;
  left: 50%;
}

#btnHamburger span:nth-child(4) {
  top: 26px;
  left: 50%;
}

#btnHamburger[aria-expanded="true"] span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#btnHamburger[aria-expanded="true"] span:nth-child(2) {
  left:54%;
  -webkit-transform: rotate(45deg) translate(-45%, 11px);
  -moz-transform: rotate(45deg) translate(-45%, 11px);
  -o-transform: rotate(45deg) translate(-45%, 11px);
  transform: rotate(45deg) translate(-45%, 11px);
}

#btnHamburger[aria-expanded="true"] span:nth-child(3) {
  left:54%;
  -webkit-transform: rotate(-45deg) translate(-45%, -11px);
  -moz-transform: rotate(-45deg) translate(-45%, -11px);
  -o-transform: rotate(-45deg) translate(-45%, -11px);
  transform: rotate(-45deg) translate(-45%, -11px);
}

#btnHamburger[aria-expanded="true"] span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

.btn-primary-cust, .btn-secondary-cust, .btn-green-cust{
  flex-direction: row;
  gap:.25rem;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 400;
  border: 1px solid #00000040;
  border-radius: 999px;
  padding: .5rem 1rem;
  min-height:40px;
  transition: background-color var(--trans-2);
}
.btn-primary-cust {
  color:var(--white);
  background-color: var(--primary);
  &:hover {
    background-color: var(--btn-primary-hov);
  }
}
.btn-secondary-cust{
  color:var(--black);
  background-color: transparent;
  &:hover {
    background-color: var(--btn-white-hov);
  }
}
.btn-green-cust{
  color:var(--white);
  background-color: var(--green);
  &:hover {
    background-color: var(--primary);
  }
}
.btn-icon-arrow{
  &:after{
    content:'';
    display: block;
    width:16px;
    height:16px;
    background-image:url('../images/visit_ud.svg');
    background-repeat: no-repeat;
    background-position: center;
  }
}
.btn-min-w{
  min-width: 116px;
}
#sec-copyright{
  background-color:var(--bg-copyright);
}
#sec-copyright > div{
  column-gap:8px;
  row-gap:6px;
}
#social > a{
  background-color: transparent;
  border-radius:100%;
  transition:background-color var(--trans-2);
  &:hover {
    background-color: var(--btn-white-hov);
  }
}
ul.ft-ls-menu{
  display: flex;
  flex-direction: column;
  gap:.5rem;
  list-style: none;
  margin-bottom:0;
}
ul.ft-ls-menu-main{
  column-count: 2;
  column-gap: 1.5rem;
}
ul.ft-ls-menu-main li {
  break-inside: avoid;
  margin-bottom: .5rem;
}
ul.ft-ls-menu-main li > a, ul.ft-ls-menu a {
  color: var(--black);
  transition:color var(--trans-2);

  &:hover {
    color: var(--primary);
  }
}
.menu-more a span{
  color:#6F6F6F;
}
.menu-more .lang-cont{
  padding:.5rem .75rem;
  height:42px;
  border:1px solid #6F6F6F;
  border-radius:.5rem;
}

footer{
  border-top:1px solid #00000014;
}
.modal .btn-close{
  width: 30px;
  height: 30px;
}

/* ===== Modal เลือกประเภทบัตร (footer-2.php) ===== */
.ticket-modal {
  gap: 1.25rem;
  /* padding: 1.5rem 1rem; */
  border: none;
  border-radius: 1.5rem;
  background-color: var(--bg-body);
  background-image: url(../images/bg-press.webp);
  box-shadow: 0 8px 32px #00000026;
}
.ticket-modal .modal-header{
  padding:1.5rem;
  padding-bottom:0;
}
.ticket-modal .modal-body{
  padding:1.5rem;
  padding-top:0;
}
.ticket-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid #00000040;
  border-radius: 50%;
  background-color: transparent;
  color: var(--black);
  transition: background-color var(--trans-2);
  &:hover {
    background-color: var(--btn-white-hov);
  }
}
.ticket-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 280px;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid #E4DED3;
  border-radius: .75rem;
  background-color: var(--bg-body);
}
.ticket-title {
  font-size: 1.5rem;
  line-height: 1.6;
}
.ticket-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: .5rem 0 1.5rem;
  padding: 0;
  list-style: none;
  color: var(--black-variant);
}
.ticket-list li {
  display: flex;
  gap: .75rem;
  line-height: 1.4;
}
.ticket-bullet {
  flex-shrink: 0;
  margin-top: .15rem;
}
.ticket-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
}
/* mascot มุมขวาล่างของการ์ด (ถูกตัดตามขอบการ์ด) */
.ticket-mascot {
  position: absolute;
  right: -6px;
  bottom: -8px;
  width: auto;
  height: 160px;
  pointer-events: none;
}


/* ต้นกก + ใบบัว + แถบสีเขียว ก่อน footer (news, shop) */
.page-deco {
  height: 120px;
  margin-top: 2.5rem;
  background-image: url(../images/bg_c_2.webp), url(../images/bg_c_1.webp), linear-gradient(var(--deco-green), var(--deco-green));
  background-repeat: no-repeat;
  background-position: right -40px bottom, left 16px bottom, left bottom;
  background-size: auto 80px, auto 100%, 100% 62px;
}



@media (min-width: 576px) {

}
@media (min-width: 768px) {
  .fs-md-2 {
    font-size: 2rem !important;
  }
  header .navbar{
    padding:.75rem 0;
  }
  #logo {
    height: 70px;
  }
  .btn-primary-cust, .btn-secondary-cust, .btn-green-cust{
    padding: .5rem 1.25rem;
    min-height:48px;
  }
  body{
    padding-top:var(--height-menu-tablet);
  }
  .fs-md-1{
    font-size: 2.5rem !important;
  }
  .fs-md-2{
    font-size: 2rem !important;
  }
  .fs-md-3{
    font-size: 1.75rem !important;
  }
  .fs-md-4{
    font-size: 1.5rem !important;
  }
  .fs-md-5{
    font-size: 1.25rem !important;
  }
  .fs-md-6{
    font-size: 1rem !important;
  }
  .fs-md-7{
    font-size: .875rem !important;
  }
  .fs-md-8{
    font-size: .75rem !important;
  }
  .page-deco {
    height: 200px;
    background-position: right bottom, left 16px bottom, left bottom;
    background-size: auto 120px, auto 100%, 100% 62px;
  }

}

@media (min-width: 992px) {
  .navbar-collapse.collapsing > ul, .navbar-collapse.collapse.show > ul{
    border-top:unset;
  }
  .max-w-lg-440{
    max-width: 440px;
  }
  .fs-lg-1{
    font-size: 2.5rem !important;
  }
  .fs-lg-2{
    font-size: 2rem !important;
  }
  .fs-lg-3{
    font-size: 1.75rem !important;
  }
  .fs-lg-4{
    font-size: 1.5rem !important;
  }
  .fs-lg-5{
    font-size: 1.25rem !important;
  }
  .fs-lg-6{
    font-size: 1rem !important;
  }
  .fs-lg-7{
    font-size: .875rem !important;
  }
  .fs-lg-8{
    font-size: .75rem !important;
  }

  .ticket-card {
    min-height: 400px;
  }
  
}

@media (min-width: 1200px) {
  body{
    padding-top:0;
  }
  .fs-xl-1{
    font-size: 2.5rem !important;
  }
  .fs-xl-2{
    font-size: 2rem !important;
  }
  .fs-xl-3{
    font-size: 1.75rem !important;
  }
  .fs-xl-4{
    font-size: 1.5rem !important;
  }
  .fs-xl-5{
    font-size: 1.25rem !important;
  }
  .fs-xl-6{
    font-size: 1rem !important;
  }
  .fs-xl-7{
    font-size: .875rem !important;
  }
  .fs-xl-8{
    font-size: .75rem !important;
  }
}

@media (min-width: 1400px) {
  .navbar-nav{
    column-gap:12px;
  }
}