:root {
  --gold: #e9c55f;
  --red: #c62828;
  --blue: #0b1e39;

  --fc-default: #0b1e39;

  --fc-a: #060b1a;
  --fc-a-hover: #1f4e8c;
  --f-default: "Sarabun", serif;
  --f-a: "Prompt", sans-serif;

  --header-height: 80px;
  --header-height-mobile: 80px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--f-default);
  font-optical-sizing: auto;
  font-weight: normal;
  font-size: 1em;
  color: var(--fc-default);
  background-color: #fafafa;
  min-width: 355px;
  margin: 0;
}

a {
  transition: color 0.3s, background-color 0.3s;
  text-decoration: none;
  font-family: var(--f-a);
  color: var(--fc-a);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--fc-a-hover);
}

button {
  border: 0;
  background: none;
}

img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

h1,
h2,
h3 {
  font-family: var(--f-a);
}

h3 {
  line-height: 1.4em;
}

::placeholder {
  font-size: .9em;
  font-weight: 200;
  color: #999;
}

/** Footer Begin */
footer {
  background-color: var(--blue);
  transition: 0.5s;
  color: #fff;
}

footer a {
  display: inline-block;
  color: #fff;
}

footer a:hover {
  color: #fff;
}

footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

footer ul li {
  margin-bottom: 1em;
}

/** Footer End */


/** Header Begin */
header {
  height: var(--header-height-mobile);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 3;
  background-color: var(--blue);
  transition: 0.5s;
}

header .login button,
header .logout button {
  margin-top: .2em;
  line-height: .9em;
}

header .login:hover,
header .login button:hover,
header .logout:hover,
header .logout button:hover {
  background: none !important;
  color: var(--gold);
}

header .navbar {
  background-color: var(--blue);
  padding-left: 1em;
  padding-right: 1em;
}

header .navbar-collapse {
  padding-top: 1em;
}

header .nav-link {
  color: rgba(255, 255, 255, 0.9);
  padding-left: 1em;
}

header .nav-link:hover {
  color: #0C1F3F;
  background-color: #d4b441;
}

header .nav-item.active a {
  color: #0C1F3F;
  background-color: #d4b441;
}

header .navbar-toggler {
  border: 0;
  font-size: 1.5em;
}

header .navbar-dark {
  --bs-navbar-toggler-border-color: none;
  --bs-navbar-toggler-focus-width: 0;
}

@media screen and (min-width: 991.99px) {
  header {
    height: var(--header-height);
    padding-left: 2em;
    padding-right: 2em;
  }

  header .login button {
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  header .navbar-collapse {
    padding-top: 0;
  }

  header .nav-link {
    border-radius: 8px;
    padding-left: 0;
  }
}

/** Header End */


/** Main Begin */
#main {
  overflow: hidden;
  margin-top: var(--header-height-mobile);
}

#main>section {
  padding-top: 2.5em;
  padding-bottom: 3em;
  position: relative;
  transition: 0.5s;
}

@media screen and (min-width: 991.99px) {
  #main {
    margin-top: var(--header-height);
  }

  #main>section {
    padding-left: 3em !important;
    padding-right: 3em !important;
  }
}

/** Main End */


/** Border Begin */
.bg-photo-gold {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding-bottom: 2px;
}

.bg-photo-gold::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: repeating-linear-gradient(to right, #e9c55f, #e9c55f 20%, #f7e6a2 40%, #e9c55f 60%);
  transition: opacity 2s ease;
}

.bg-photo-gold:hover::before {
  background: repeating-linear-gradient(to right, #d4ac3c, #d4ac3c 20%, #fff3c0 40%, #d4ac3c 60%);
}

/** Border End */

/** Button Begin */
.btn-default {
  background: none;
  padding: 0.8em 1.6em;
  border-radius: 3em;
  min-width: 14em;
  display: inline-block;
  text-align: center;
  transition: 0.3s;
}

.btn-blue {
  color: var(--blue);
  border: 1px solid var(--blue);
}

.btn-blue.active,
.btn-blue:focus,
.btn-blue:hover {
  background-color: var(--blue);
  color: #fff;
}

.btn-gold {
  color: #0C1F3F;
  border: 1px solid #d4b441;
  background-color: #e9c55f;
}

.btn-gold.active,
.btn-gold:focus,
.btn-gold:hover {
  color: #fff;
  background-color: #d4b441;
}

.btn-gray {
  color: #fff;
  border: 1px solid #bbbbbb;
  background-color: #bbbbbb;
}

.btn-gray.active,
.btn-gray:focus,
.btn-gray:hover {
  color: #fff;
  background-color: #aaaaaa;
}

.border-gold {
  border-color: var(--gold) !important;
}

/** Button End */


/* Hero Banner End*/


/* Spacing Begin */
.w-icon {
  width: 18px;
}

.w-80 {
  width: 80px;
  overflow-x: hidden;
}

.w-100 {
  width: 100px;
  overflow-x: hidden;
}

.mw-60 {
  min-width: 60px;
  display: inline-block;
}

.mw-80 {
  min-width: 80px;
  display: inline-block;
}

.mw-100 {
  min-width: 100px;
  display: inline-block;
}

.mw-160 {
  min-width: 160px;
  display: inline-block;
}

.mw-200 {
  min-width: 200px;
  display: inline-block;
}

.wh-100 {
  width: 100%;
  height: 100%;
}

/* Spacing End */

/** Standard Begin */
.x-small {
  font-size: .8125em;
}

.xx-small {
  font-size: .75em;
}

.xxx-small {
  font-size: .6em;
}

.fs-0 {
  font-size: 5rem;
}

/* Font Begin */
.ff-prompt {
  font-family: "Prompt", sans-serif;
}

.fc-default {
  color: var(--fc-default);
}

.fc-white,
a.fc-white:hover {
  color: #fff;
}

.fc-black {
  color: #000;
}

a.fc-black:hover {
  color: var(--fc-a-hover);
}

.fc-gray {
  color: #aaa;
}

.fc-red {
  color: var(--red);
}

.fc-gold {
  color: var(--gold);
}

a.fc-gold:hover {
  color: #f1c55e;
}


.fc-blue {
  color: var(--blue);
  transition: color 0.3s, background-color 0.3s;
}

button.fc-blue:hover,
a.fc-blue:hover {
  color: var(--fc-a-hover);
}

.fw-thin {
  font-weight: 100;
}

.fw-med {
  font-weight: 500;
}

/* Font End */

/* Background Begin */
.bg-blue {
  background-color: #1A2D5A;
  color: #fff;
}

.bg-gray {
  background-color: #F0F0F0;
}

.bg-gold {
  background: linear-gradient(to bottom, #ffffff 0%, #fff9e9 20%, #f6ebbb 60%, #fff9e9 80%, #ffffff 100%);
  overflow: hidden;
}

.bg-white {
  background-color: #fff;
}

/* Background End */

/* Image Caption Begin */
.caption {
  position: absolute;
  z-index: 2;
  bottom: 10%;
  left: 0;
  padding: 0 1.5em;
  color: #fff;
  font-size: .75em;
  font-family: "Prompt", sans-serif;
  width: 100%;
}

.caption-wrapper {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(0, 0, 0, 1));
}

/* Image Caption End */


/* Hover photo scale up Begin */
.auto-scale {
  opacity: 1;
  transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
}

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

[data-fancybox] {
  cursor: pointer;
}

/* Hover photo scale up End */

/** Standard End */


/** Swiper Control Begin */
.swiper-control {
  min-height: 32px;
}

.swiper-blue .swiper-control {
  color: var(--blue);
}

.swiper-control [class^=button] {
  font-size: .8em;
  background-color: #fff;
  padding: 0.3em 0.65em;
  border-radius: 50%;
  transition: color 0.3s, background-color 0.3s;
  display: inline-block;
}

.swiper-blue .swiper-control [class^=button] {
  color: var(--blue);
  border: 1px solid var(--blue);
}

.swiper-control [class^=button]:hover,
.swiper-control [class^=button]:active,
.swiper-control [class^=button]:focus {
  color: #fff;
}

.swiper-blue .swiper-control [class^=button]:hover,
.swiper-blue .swiper-control [class^=button]:active,
.swiper-blue .swiper-control [class^=button]:focus {
  background-color: var(--blue);
}

.swiper-control .pagination {
  display: inline-block;
  font-size: .92em;
  letter-spacing: 0.2em;
  width: 56px;
  text-align: center;
  font-weight: 500;
}

/** Swiper Control End */

/** Breadcrumb Begin */
.breadcrumb a {
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: #000;
}

.breadcrumb-item+.breadcrumb-item::before {
  content: ">";
}

/** Breadcrumb End */


/** Text Begin */
.text-caption {
  text-align: center;
  font-size: .75em;
  text-decoration: underline;
  font-family: "Prompt", sans-serif;
}

.text-truncate-2 {
  height: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

.text-truncate-3 {
  height: auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
}

@media screen and (min-width: 1200px) {
  .text-truncate-2 {
    height: 42px;
  }

  .text-truncate-3 {
    height: 63px;
  }
}

/** Text End */


/* Pagination Begin */
.paging .previous,
.paging .pages,
.paging .next {
  display: inline-block;
}

.paging .previous,
.paging .next {
  border: 1px solid #ddd;
}

.paging .previous a,
.paging .next a {
  padding: 0 1em;
}

.paging .pages li {
  width: 30px;
  text-align: center;
}

.paging a {
  display: block;
}

.paging a.current,
.paging a:hover {
  background-color: var(--blue);
  color: #fff;
}

/* Pagination End */

/* Social button Begin */
a.phone,
a.line {
  display: inline-block;
  color: #fff;
  font-size: 1.2em;
  background-color: #018601;
  letter-spacing: 0.05em;
  padding: 0.2em 1em;
  border-radius: 1em;
}

a.phone:hover,
a.line:hover {
  background-color: #02a501;
}

.social {
  margin-top: 0.5em;
}

.social a {
  margin-left: 0.3em;
}

.social .facebook,
.social .linkedin,
.social .x,
.social .pinterest {
  width: 30px;
  height: 30px;
  display: inline-block;
  border-radius: 6px;
}

.social .facebook {
  background-color: #0966ff;
}

.social .linkedin {
  background-color: #027bb5;
}

.social .x {
  background-color: #1a1a1a;
}

.social .pinterest {
  background-color: #e60223;
}

/** Social button End */

/** Specify Begin */
#gmap {
  margin: 0 auto;
  width: 100%;
  height: 500px;
}

#gmap-search {
  margin-bottom: 2px;
  position: relative;
  z-index: 2;
}

.form-label.required::after {
  content: ' *';
  color: var(--red);
}

#gmap-text [data-filter="fdatetime"]::after,
#gmap-text [data-filter="tdatetime"]::after {
  content: ' น.';
}

#gmap-text .m-3600::before {
  content: 'รวมเวลาเดินทาง ';
}

#gmap-text .m-1000::before {
  content: 'รวมระยะทาง ';
}

#gmap-text .m-1000::after {
  content: ' กม.';
}

#gmap-text input[type="radio"].btn-check:checked+label {
  border-color: var(--blue) !important;
}

/** Specify End */

/** Tabs Begin */

.custom-tabs {
  display: flex;
  justify-content: center;
}

.custom-tabs .btn {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin: 0 0.25rem;
  padding: 8px 20px;
  border-color: #d2d2d2;
  border-bottom: 0;
  font-family: var(--f-a);
}

.custom-tabs .btn.active {
  background: #fff;
  color: var(--red);
  border-color: #d2d2d2;
}

/** Tabs End */

#LoginModal .btn-close {
  background-color: #fff;
}