@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&family=Rufina:wght@400;700&display=swap');
:root {
  --css-white: #FFFFFF;
  --css-grey: #707070;
  --css-lightgrey: #ffeded;
  --css-black: #000000;
  --css-pink: #eccabb;
  --css-lightpink: #f5c7d2;
  --css-lightpink2: rgba(245, 199, 210, .3);
  --css-brown: #b5a08c;
}
html {
  margin: 0px;
  padding: 0px;
  border: 0;
  outline: 0;
  scroll-behavior: smooth;
  /* height: 100vh;*/
  overflow-x: hidden;
  color: var(--css-black);
  background-color: #FFFFFF;
}
body {
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-optical-sizing: auto;
  /*  background-image: linear-gradient(to left top, #fab5d1, #fab8d2, #fbbbd3, #fbbed5, #fbc1d6, #fcc3d5, #fdc4d3, #fec6d2, #ffc7ce, #ffc9ca, #ffcbc7, #ffcdc4);*/
  margin: 0px;
  padding: 0px;
  /* height: 100%;*/
  font-size: 16px;
  line-height: 20px;
  color: #383838;
  font-weight: 400;
  background-color: #FFFFFF;
}
body {
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
::-webkit-selection {
  color: var(--css-white);
  background: var(--css-lightpink);
}
::-moz-selection {
  color: var(--css-white);
  background: var(--css-lightpink);
}
::selection {
  color: var(--css-white);
  background: var(--css-lightpink);
}
a {
  color: var(--css-lightpink);
  /*  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;*/
  text-decoration: none;
  outline: none;
}
a:hover, a:active, a:focus {
  outline: none;
  text-decoration: none;
  cursor: pointer;
  color: var(--css-lightpink);
}
*:focus {
  outline: none;
}
strong {
  font-weight: 600;
}
input:focus {
  outline: none;
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
img a:hover, img a:active, img a:focus {
  opacity: .7;
}
.mobile {
  display: none;
}
.desktop {
  display: block;
}
.startcontents {
  padding-top: 30px;
}
.start {
  padding: 0px;
  padding-top: 30px;
  margin: 0px;
}
.introtext {
  padding: 10px;
  font-family: "Rufina", "IBM Plex Sans Thai", sans-serif;
}
.bgimage {
  background-image: url(../../images/bg.jpg);
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
.bgimagefotter {
  background-image: url(../../images/bg.jpg);
  background-position: top left; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: initial; /* Resize the background image to cover the entire container */
}

.navbar-nav
{
	text-align: left;
}




.bgbread {
  background-image: url(../../images/circlebread.png);
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
hr.line {
  border-top: 1px dashed var(--css-black);
  width: 100%;
  height: 1px;
  margin-left: auto;
  margin-right: auto;
}
.ordered {
  background-color: rgba(255, 255, 255, .9);
  color: var(--css-black);
  border: 4px solid var(--css-pink);
  width: 35px;
  height: 35px;
  font-size: 11px;
  line-height: 30px;
  font-weight: 600;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  z-index: 9;
  margin-left: 10px;
  margin-top: -20px;
}
#frontrotate .swiper-slide {
  border: 8px solid #ffffff;
  box-shadow: rgba(235, 81, 152, 0.1) 0px 4px 16px, rgba(235, 81, 152, 0.1) 0px 8px 24px, rgba(235, 81, 152, 0.1) 0px 16px 56px;
}
.onsale {
  background-image: url(../../images/sale.png);
  margin-left: 10px;
  margin-top: 10px;
  width: 70px;
  height: 70px;
  background-size: 70px;
  position: absolute;
  background-repeat: no-repeat; /* Do not repeat the image */
}
#mainImage {
  width: 100%;
  border: 5px solid var(--css-pink);
  margin-bottom: 15px;
  box-shadow: rgba(235, 81, 152, 0.1) 0px 4px 16px, rgba(235, 81, 152, 0.1) 0px 8px 24px, rgba(235, 81, 152, 0.1) 0px 16px 56px;
}
.thumbnails {
  cursor: pointer;
  border: 2px solid var(--css-pink);
}
#optional {
  margin-bottom: 20px;
}
#optional .thumbnails {
  cursor: pointer;
  border: 2px solid var(--css-white);
  font-size: 11px;
  line-height: 12px;
  margin-top: 10px;
}
#optional img {
  width: 70px;
  padding: 5px;
  margin-right: 10px;
}
#description ul {
  padding-top: 10px;
}
#description ul li {
  padding-bottom: 10px;
}
#offcanvasBasket {
  font-size: 14px;
  line-height: 16px;
}
#offcanvasBasket .productsbasket {
  max-width: 80px;
  padding: 0px;
  margin: 10px;
  margin-left: 0px;
}
#offcanvasBasket hr.line {
  border-top: 1px dashed var(--css-black);
  width: 100%;
  height: 1px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.offcanvas-footer {
  font-size: 18px;
  line-height: 18px;
  font-weight: 400;
  padding: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: var(--css-pink);
  box-shadow: rgba(235, 81, 152, 0.1) 0px 4px 16px, rgba(235, 81, 152, 0.1) 0px 8px 24px, rgba(235, 81, 152, 0.1) 0px 16px 56px;
}
.offcanvas-header {
  max-height: 40px;
  box-shadow: rgba(235, 81, 152, 0.1) 0px 4px 16px, rgba(235, 81, 152, 0.1) 0px 8px 24px, rgba(235, 81, 152, 0.1) 0px 16px 56px;
}
.remove {
  width: 20px;
  margin-right: 15px;
  margin-top: 15px;
  margin-left: auto;
  float: right;
}
.checkbox-lg .form-check-input {
  top: 1.2rem;
  scale: 1.7;
  margin-right: 0.8rem;
	margin-top: 20px;
}
.checkbox-lg .form-check-label {
  padding-top: 13px;
}
.custom-selectship {
  appearance: none; /* Remove default arrow in most browsers */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px 40px 10px 15px;
  margin-bottom: 10px;
  font-size: 16px;
  border-radius: 8px;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23999" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  cursor: pointer;
  width: 100%;
  max-width: 350px;
  transition: border-color 0.3s ease;
	color: #000000;
}
.custom-selectship:focus {
  border-color: #5c67f2;
  outline: none;
}
@media (max-width:768px) {
  .mobile {
    display: block;
  }
  .desktop {
    display: none;
  }
  .startcontents {
    padding-top: 0px;
    margin-top: -6px;
  }
  .start {
    padding-top: 5px;
  }
  .onsale {
    background-image: url(../../images/sale.png);
    width: 40px;
    height: 40px;
    background-size: 40px;
  }
  #mainImage {
    border: 0px;
  }
}
@media (max-width:512px) {
  body {
    font-size: 16px;
    line-height: 20px;
  }
  a:hover, a:active, a:focus {
    opacity: 1;
  }
  img a:hover, img a:active, img a:focus {
    opacity: 1;
  }
  .ordered {
    border: 0px solid;
    background-color: var(--css-pink);
    margin-left: 10px;
    margin-top: -0px;
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
  #frontrotate .swiper-slide {
    border: 0px;
  }
}
/**************************** color ****************************/
.red {
  color: #D92023;
}
.green {
  color:#52D416;
}
.white {
  color: var(--css-white);
}
.grey {
  color: var(--css-grey);
}
.black {
  color: var(--css-black);
}
.lightpink {
  color: var(--css-lightpink);
}
.pink {
  color: var(--css-pink);
}
.brown {
  color: var(--css-brown);
}

.orange
{
  color: #f39c12;
}

.blue
{
  color: #3498db;
}

.bggrey {
 background-color:: var(--css-grey);
}
.bgpink {
  background-color: var(--css-pink);
}
.bgprod {
  background-color: var(--css-brown);
}
.bglightpink {
  background-color: var(--css-lightpink);
  color: #FFFFFF;
}
.bglightpink2 {
  background-color: var(--css-lightpink2);
}
.bgwhite {
  background-color: var(--css-white);
}
.bgtabfront {
  background-color: rgba(247, 246, 245, 1);
  width: 100%;
  margin-left: -70px;
  padding: 50px;
  padding-bottom: 30px;
  z-index: 9;
  border-radius: 32px;
  border-bottom-left-radius: 0px;
}
.bgtabin {
  background-color: rgba(247, 246, 245, 1);
  width: 100%;
  margin-left: -70px;
  padding: 50px;
  padding-bottom: 30px;
  z-index: 9;
  border-radius: 32px;
  border-bottom-left-radius: 0px;
}
.bgtabnormal {
  background-color: var(--css-lightpink2);
  width: 100%;
  padding: 20px;
  padding-bottom: 30px;
  z-index: 9;
  border-radius: 32px;
  border-bottom-right-radius: 0px;
  margin-bottom: 40px;
}
.bgdescription {
  background-color: var(--css-lightpink2);
  width: 100%;
  padding: 20px;
  padding-bottom: 40px;
  z-index: 9;
  border-radius: 32px;
  border-bottom-left-radius: 0px;
  margin-bottom: 40px;
}
#arrival .bgpink {
  min-height: 240px;
  min-width: 350px;
  width: 100%;
  margin-bottom: 30px;
  margin-left: 15px;
  padding: 20px;
}
.textgradient {
  background: #ff5800;
  background: linear-gradient(to right, #ffe7bf 0%, #ff5800 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width:512px) {
  #arrival .bgpink {
    margin-left: 0px;
  }
}
/**************************** font ****************************/
.title {
  font-family: "Rufina", "IBM Plex Sans Thai", sans-serif;
  font-size: 60px;
  line-height: 64px;
  font-weight: 900;
}
.header {
  font-family: "Rufina", "IBM Plex Sans Thai", sans-serif;
  font-size: 42px;
  line-height: 42px;
  font-weight: 600;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.subheader {
  font-size: 24px;
  line-height: 28px;
  font-weight: 400;
}
.en {
  font-family: "Rufina", sans-serif;
  font-size: 18px;
}
.sales {
  color: #FF0004;
  text-decoration: line-through;
}
.small {
  font-size: 12px;
  line-height: 14px;
}
#direction .small {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: .1em;
}
.copy {
  font-size: 11px;
  line-height: 12px;
}
#footer {
  background-color: #FFFFFF;
}
#footer {
  font-size: 12px;
  line-height: 18px;
}
#footer .small {
  font-size: 14px;
  line-height: 14px;
}
#footer li {
  font-size: 14px;
  font-weight: 600;
  color: var(--css-lightpink);
  padding-bottom: 10px;
  list-style: none;
  /*margin-left: -10px;*/
  margin-top: 20px;
  border-bottom: 2px dotted var(--css-lightpink);
}
#footer li > a:hover {
  color: var(--css-black);
}
#footer li.active a {
  color: var(--css-lightpink);
}
#footer a {
  color: var(--css-lightpink);
  background-color: transparent;
  text-decoration: none;
  border: none;
}
#footer a:hover, a:active, a:focus {
  color: var(--css-black);
  text-decoration: none;
  background-color: transparent;
  border: none;
}
/**************************** element ****************************/
.logo {
  width: 160px;
  margin-top: 3px;
position: relative;
}
.textcount {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.round {
  border-radius: 24px;
  border-bottom-left-radius: 0px;
  border: 1px solid var(--css-white);
}
.box {
  box-shadow: rgba(235, 81, 152, 0.1) 0px 4px 16px, rgba(235, 81, 152, 0.1) 0px 8px 24px, rgba(235, 81, 152, 0.1) 0px 16px 56px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 2px solid rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, .4);
  text-decoration: none;
  border-radius: 24px;
  border-bottom-left-radius: 0px;
  text-align: left;
  padding: 15px;
  margin-top: 10px;
  height: auto;
}
#swiper .box {
  box-shadow: rgba(235, 81, 152, 0.1) 0px 4px 16px, rgba(235, 81, 152, 0.1) 0px 8px 24px, rgba(235, 81, 152, 0.1) 0px 16px 56px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 2px solid rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, .5);
  text-decoration: none;
  border-radius: 24px;
  border-bottom-left-radius: 0px;
  text-align: left;
  padding: 13px;
  margin-top: 10px;
  height: auto;
  min-height: 340px;
}
#swiper3 .swiper-wrapper {
  /* min-height: 520px;*/
  min-height: 200px;
}
.boxoutline {
  box-shadow: rgba(235, 81, 152, 0.1) 0px 0px 0px 1px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid #e9e9e9;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
  border-radius: 24px;
  border-bottom-left-radius: 0px;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 30px;
  padding: 20px;
}
.pointer {
  cursor: pointer;
}
.lineleft {
  border: 1px;
  border-bottom: 0px;
  border-right-style: none;
  border-left-style: solid;
  padding: 5px;
  border-color: var(--css-lightpink);
  text-align: left;
}
.lineright {
  border: 1px;
  border-bottom: 0px;
  border-left-style: none;
  border-right-style: solid;
  padding: 5px;
  margin-right: 20px;
  border-color: var(--css-white);
  margin-left: 10px;
}
.shadow {
  box-shadow: rgba(235, 81, 152, 0.1) 0px 4px 16px, rgba(235, 81, 152, 0.1) 0px 8px 24px, rgba(235, 81, 152, 0.1) 0px 16px 56px;
}
.swiper-button-prev, .swiper-button-next {
  position: absolute;
  top: 60%;
  margin-top: 22px;
  opacity: .4;
  width: 15px;
  height: 24px;
  background-size: 15px 24px;
}
.swiper-container {
  width: 100%;
  height: auto;
  margin: 0px;
  padding-bottom: 45px;
}
.swiper-container {
  width: 100%;
  padding-bottom: 45px;
}
.swiper-slide {
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  text-align: left;
  align-items: flex-start;
  margin: 0px;
  padding: 0px;
  height: auto;
}
.swiper-container-horizontal > .swiper-pagination {
  position: absolute;
  bottom: 0;
}
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 100%;
  background: var(--css-pink);
  opacity: 1;
  border: 1px solid rgba(255, 255, 255, .5);
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: #b37663;
  width: 20px;
  height: 20px;
}
.swiper-button-prev, .swiper-button-next {
  position: absolute;
  top: 91%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}
/**************************** button ****************************/

input.enter2, .enter2{
  background: #ff5e7e !important;
  color: white !important;
  border: none !important;
  padding: 10px 15px !important;
  cursor: pointer !important;
  border-radius: 24px !important;
  border-bottom-left-radius: 0px !important;
  margin-top: 20px ;
  letter-spacing: 0px !important;
  font-size: 18px !important;
  font-weight: 600  !important;
}
input.enter2:hover .enter2:hover {
  background: #ff3c63 !important;
}

#cart-count {
  transition: transform 0.3s ease;
}
.cart-animate {
  transform: scale(1);
  color: #ffffff; /* Optional: Add a color change to make the animation more noticeable */
  background: #ff6347;
  font-size: 18px;
  font-weight: 900;
}
.add-to-cart {
  background: #ff5e7e;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 24px;
  border-bottom-left-radius: 0px;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 600;
}
.add-to-cart:hover {
  background: #ff3c63;
}
.buynow {
  background: #ff5e7e;
  color: white;
  border: 2px solid #ff5e7e;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 24px;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 600;
  margin-left: 20px;
  width: 90%;
}
.buynow:hover {
  color: #ff5e7e;
  border: 2px solid #ffffff;
  background: #ffffff;
}
/* Center the Popup */
.popup {
  display: none;
  position: fixed;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for exact centering */
  background-color: #ffffff;
  color: #ff5e7e;
  padding: 15px;
  border: 8px solid #ff5e7e;
  border-radius: 5px;
  font-size: 16px;
	width: 95%;
  max-width: 400px;
  max-height: 400px;
  opacity: 0;
  transition: opacity 3s ease-in-out;
  z-index: 9999; /* Ensure it's above other content */
}
.popup.show {
  display: block;
  opacity: 1;
}
.enter {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 8px;
  font-size: 12px;
  line-height: 6px;
  font-weight: 400;
  text-align: center;
  border: 1px solid var(--css-lightpink);
  border-radius: 24px;
  background-color: var(--css-white);
  color: var(--css-lightpink);
  text-decoration: none;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 60px;
}
.enter:hover {
  color: var(--css-white);
  border: 1px solid var(--css-lightpink);
  text-decoration: none;
  background-color: var(--css-lightpink);
}
.enter:active {
  color: var(--css-white);
  border: 1px solid var(--css-lightpink);
  text-decoration: none;
  background-color: var(--css-lightpink);
}
.enter:hover {
  text-decoration: none;
}
.enter:focus {
  text-decoration: none;
}
.enteroutline {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 15px;
  font-size: 16px;
  line-height: 18px;
  font-weight: 400;
  text-align: center;
  border: 1px solid var(--css-grey);
  border-radius: 6px;
  background-color: transparent;
  color: var(--css-grey);
  text-decoration: none;
  width: 100%;
}
.enteroutline:hover {
  color: var(--css-white);
  text-decoration: none;
  background-color: var(--css-grey);
}
.enteroutline:active {
  color: var(--css-white);
  text-decoration: none;
  background-color: var(--css-grey);
}


.enteroutline2 {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 15px;
  font-size: 16px;
  line-height: 18px;
  font-weight: 600;
  text-align: center;
  border: 3px solid #D92023;;
  border-radius: 6px;
  background-color: white;
  color: #D92023;;
  text-decoration: none;
  width: 100%;
	margin-top: 10px;
}
.enteroutline2:hover {
  color: var(--css-white);
  text-decoration: none;
  background-color:#D92023;;
}
.enteroutline2:active {
  color: var(--css-white);
  text-decoration: none;
  background-color: var(--css-grey);
}

.button-fit {
  display: inline-block;
  padding: 2px 2px; /* Adjust padding for spacing */
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background-color: transparent; /* Primary blue color */
  border: none;
  border-radius: 8px; /* Rounded corners */
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  margin-top: 10px;
  margin-left: 10px;
}
.button-fit:hover {
  color: #000000;
  transform: scale(1.05); /* Slight zoom effect */
}
.button-fit:active {
  color: #000000;
  transform: scale(0.98); /* Slight press effect */
}
.hide-scrollbar {
  overflow: auto;
  scrollbar-width: none; /* Firefox */
}
.nav1 {
  margin-top: 30px;
}
ul.nav1 li {
  width: 100%;
  color: black;
  display: inline-block;
  margin-bottom: 30px;
  margin-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  opacity: 1;
}
.liststyle li {
  padding: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e1e1e1;
  opacity: 1;
  color: var(--css-white);
}
ul.nav1 li:hover {
  width: 100%;
  opacity: 1;
  color: var(--css-white);
  background-color: var(--css-lightpink);
}
.tabactive {
  color: var(--css-white);
  background-color: var(--css-lightpink);
}
.enterspace {
  margin-left: auto;
  margin-right: 0px;
}
@media (max-width:768px) {
  ul.nav1 {
    white-space: nowrap;
    overflow-x: auto;
    margin-bottom: 10px;
  }
  ul.nav1 li {
    width: inherit;
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 5px;
    margin-right: 10px;
    padding: 10px;
    padding-left: 10px;
    padding-bottom: 0px;
    color: var(--css-black);
    position: relative;
	  font-size: 12px;
	  font-weight: 400;
  }
  ul.nav1 li::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px; /* Adjust for the distance from the text */
    width: 100%;
    height: 3px; /* Line thickness */
    background-color: var(--css-pink); /* Line color */
  }
  ul.nav1 li::before {
    content: "";
    display: inline-block;
    width: 13px; /* Adjust image size */
    height: 13px;
   /* background-image: url('../images/sap.png');  */
    background-size: contain;
    background-repeat: no-repeat;
    /*margin-right: 3px; */
  }
  .nav1 {
    margin-top: 10px;
  }
  .enterspace {
    margin-right: auto;
    margin-left: 0px;
  }
}
/**************************** others ****************************/
.zoom {
  transform: scale(1, 1);
  transition: transform .2s; /* Animation */
}
.zoom:hover {
  transform: scale(1.09); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  moz-transform: scale(1.09);
  -webkit-transform: scale(1.09);
  -o-transform: scale(1.09);
  -ms-transform: scale(1.09);
  transform: scale(1.09);
}
.zoomin {
  transform: scale(1, 1);
  transition: transform .2s; /* Animation */
}
.zoomin:hover {
  opacity: .5;
  border: 2px solid var(--css-white);
  cursor: pointer;
}
.fadeIn {
  transition: transform .9s; /* Animation */
}
.fadeOut {
  transition: transform .4s; /* Animation */
}
.fadeOut:hover {
  transition: transform .4s; /* Animation */
}
.pagination > li > a, .pagination > li > span {
  border: 1px solid white;
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  margin: 0 5px;
  font-size: 12px;
  line-height: 15px;
}
.page-item {
  margin-right: 10px;
}
/*.pagination > li > a, .pagination > li > span {
  border: 1px solid white;
}
.pagination li.active a {
  background-color: red;
  color: white;
}
.pagination li:hover:not(.active) a {
  background-color: #ddd;
}*/
.pagination {
  margin-top: 40px;
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
}
.pagination .page-link {
  color: var(--css-white);
  font-size: 14px;
  line-height: 30px;
  font-weight: 400;
  border: none;
  text-align: center;
  border-radius: 50% !important;
}
.page-link {
  color: var(--css-white);
  background-color: var(--css-lightpink);
  border: 1px solid var(--css-black);
}
/**************************** form  ****************************/
form {
  color: #AEB0B2;
 /* display: flex;*/
  padding: 1px;
  border: none;
  border-radius: 0px;
/*  max-width: 500px;*/
/*  margin-left: auto;
  margin-right: auto;*/
  margin-top: 0px;
}
.btn:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}
input[type="search"] {
  border: none;
  background: transparent;
  margin: 0;
  padding: 7px 8px;
  font-size: 14px;
  color: #AEB0B2;
  width: 100%;
}
input[type="search"]::placeholder {
  color: #bbb;
}
button[type="submit"] {
  /* text-indent: -999px; */
  overflow: hidden;
  width: 40px;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  /* background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat center; */
  cursor: pointer;
  opacity: 0.7;
}
button[type="submit"]:hover {
  opacity: 1;
}
button[type="submit"]:focus, input[type="search"]:focus {
  box-shadow: 0 0 3px 0 #AEB0B2;
  border-color: #AEB0B2;
  outline: none;
}
.bg {
  background-image: linear-gradient(to left top, #ffd3dd, #fed0dc, #fecddb, #fdcbda, #fcc8d9, #fdc9d8, #fdc9d6, #fecad5, #ffced3, #ffd3d2, #ffd7d3, #ffdcd4);
  max-height: 80vh;
  width: 100%;
  margin-top: 100px
}
.textwrap {
  font-family: "Rufina", "IBM Plex Sans Thai", sans-serif;
  margin-left: auto;
  margin-right: auto;
  /*  margin-top: 50px; */
  /*   text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.4);*/
}
.textwrap .title {
  font-size: 65px;
  line-height: 60px;
  font-weight: 800;
}
.textwrap .text {
  color: rgba(255, 255, 255, 0.1);
  font-size: 50px;
  line-height: 40px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -2px;
  background-size: cover;
  background-image: url(../../images/bgtext.jpg);
  -webkit-background-clip: text;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover;
  background-size: 100% auto;
}
@media (max-width:1366px) {
  .logo {
    width: 130px;
    margin-left: 20px;
  }
}
@media (max-width:1024px) {
  .title {
    font-size: 50px;
    line-height: 50px;
  }
  .header {
    font-size: 31px;
    line-height: 32px;
  }
  .subheader {
    font-size: 22px;
    line-height: 24px;
  }
}
@media (max-width:768px) {
  .bgtabfront {
    margin: 0px;
    margin-left: 0px;
    padding: 25px;
    margin-top: -10px;
    border-radius: 0px;
    border-bottom-left-radius: 0px;
  }
  .bgtabin {
    margin-left: 0px;
    padding: 20px;
    padding-bottom: 30px;
    z-index: 9;
    border-radius: 0px;
    border-bottom-left-radius: 0px;
    margin-bottom: 20px;
  }
  .bgtabnormal {
    padding: 5px;
  }


}
@media (max-width:512px) {
  body {
    font-size: 16px;
    line-height: 20px;
  }
  .logo {
    width: 140px;
  }
  .bg {
    margin-top: 100px
  }
  .textwrap {
    margin-top: 0px;
    margin-bottom: 40px;
  }
  .textwrap .title {
    font-size: 70px;
    line-height: 60px;
  }
  .textwrap .text {
    font-size: 55px;
    line-height: 50px;
  }
  #swiper .box {
    padding: 5px;
    height: auto;
    min-height: 315px;
  }
}
@media (max-width:411px) {
  .textwrap {
    margin-top: 0px;
    margin-bottom: 40px;
  }
  .textwrap .title {
    font-size: 60px;
    line-height: 50px;
  }
  .textwrap .text {
    font-size: 45px;
    line-height: 40px;
  }
}
/* ************************ */
.quantity-control {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  background-color: #FFFFFF;
  width: auto;
  padding: 10px;
  border-radius: 12px;
  border-bottom-right-radius: 0px;
}
#offcanvasBasket .quantity-control {
  background-color: transparent;
  align-items: right;
  gap: 3px;
  margin-top: 0px;
  padding: 3px;
}
.qty-input {
  width: 50px;
  text-align: center;
  padding: 3px;
  font-size: 16px;
  line-height: 12px;
  font-weight: 600;
  border-radius: 6px;
}
#offcanvasBasket .qty-input {
  width: 30px;
  text-align: center;
  padding: 3px;
  font-size: 11px;
  line-height: 11px;
  font-weight: 600;
  border-radius: 6px;
}
.btn-plus, .btn-minus {
  padding: 3px 5px;
  font-size: 18px;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  border-radius: 4px;
  border-bottom-right-radius: 0px;
}
.btn-plus:hover, .btn-minus:hover {
  background-color: #ddd;
}

#memberregister
{
		color: var(--css-black);
}


#memberregister .form-control
{
	margin-bottom: 20px;
	margin-top: 5px;
	border: 0px;

	 border-bottom: 1px dashed #ccc;
}

.accordion-collapse
{
	width: 100%;
}
.accordion-body
{
		width: 100%;
	margin: 0px;
	padding: 0px;
}


.accordion-button
{
  color: var(--css-pink);
	margin: 0px;
	padding: 5px;
	background-color: var(--css-white);
}
.accordion-button:not(.collapsed) {
  color: var(--css-white);lor);
  background-color: var(--css-pink);
}
 .accordion-button:focus {
  border-color:var(--css-pink);
  box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}
.accordion-item {
	border: none;
}

.accordion-body .small
{
	margin-bottom: 20px;
	margin-top: 10px;
}

.bi-file-earmark-text-fill
{
	font-size: 20px;
	font-weight: 900;
}
.boderdocument
{
	border: 1px dashed var(--css-grey);
	padding: 20px;
	padding-top: 30px;
	padding-bottom: 140px;
	margin-top: 30px;
}