@font-face {
  font-family: 'Anuphan';
  src: url('../fonts/Anuphan-Medium.woff2') format('woff2'),
       url('../fonts/Anuphan-Medium.ttf') format('truetype');
  font-weight: normal;
  /* Regular weight */
}

@font-face {
  font-family: 'Anuphan';
  src: url('../fonts/Anuphan-Bold.woff2') format('woff2'),
       url('../fonts/Anuphan-Bold.ttf') format('truetype');
  font-weight: bold;
  /* Bold weight */
}

@font-face {
  font-family: 'Rift';
  src: url('../fonts/Rift\ Medium.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Chonburi';
  src: url('../fonts/Chonburi-Regular.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Rift';
  src: url('../fonts/Rift\ Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'moliere';
  src: url('../fonts/moliere.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

.font-moliere {
  font-family: 'moliere', sans-serif;
  font-weight: bold;
}

.font-rift {
  font-family: 'Rift', sans-serif;
  font-weight: bold;
}

.font-chonburi {
  font-family: 'Chonburi', sans-serif;
  font-weight: normal;
}

.font-anuphan {
  font-family: 'Anuphan', sans-serif;
  font-weight: normal;
}

.font-anuphan-bold {
  font-family: 'Anuphan', sans-serif;
  font-weight: bold;
}

/* styles.css */
.text-green {
  color: #578371;
}

.text-orange {
  color: #FE604A;
}

.text-red {
  color: #831541;
}

.text-purple {
  color: #5F2B5F;
}

.text-blue {
  color: #034F80;
}

.color-about-1 {
  color: #0A5584;
}

.color-about-2 {
  color: #841541;
}

.color-about-3 {
  color: #fe8528;
}

/* กำหนด Font หลัก */
body {
  font-family: 'Anuphan', 'Kanit', sans-serif;
  /* เพิ่ม Gradient Background */
  /*
  background-image: linear-gradient(to bottom, rgba(243, 234, 229, 1) 0%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 100%);
  background-attachment: fixed;  
  background-repeat: no-repeat;
  background-size: cover;  
  min-height: 100vh;
  /* Ensure gradient covers the whole page */
  /* Ensure body takes at least full viewport height */
}

/* กำหนดสี Custom ที่อาจไม่มีใน Tailwind */
.tn-green {
  color: #1E7350;
}

/* สีเขียวตัวอักษร */
.tn-orange {
  background-color: #FBEFE3;
}

/* สีส้มอ่อนกล่อง Feature */
.tn-purple {
  background-color: #F3E9F4;
}

/* สีม่วงอ่อนกล่อง Feature */
.tn-pink {
  background-color: #FBECEC;
}

/* สีชมพูอ่อนกล่อง Feature */
.tn-blue {
  background-color: #E6F4F4;
}

/* สีฟ้าอ่อนกล่อง Feature */
.line-green {
  background-color: #06C755;
}

/* สีเขียว LINE */
.shopee-orange {
  background-color: #EE4D2D;
}

/* สีส้ม Shopee */
.lazada-blue {
  background-color: #0F146D;
}

/* สีน้ำเงิน Lazada */
.fb-blue {
  background-color: #1877F2;
}

/* สีฟ้า Facebook */
.ig-pink {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

/* สีชมพู IG */
.tiktok-black {
  background-color: #000000;
}

/* สีดำ TikTok */

/* กำหนดระยะห่างระหว่าง Section */
section {  
  opacity: 0;
  /* เริ่มต้นให้โปร่งใส */
  transition: opacity 0.5s ease-in-out;
  /* เพิ่มการเปลี่ยนความโปร่งใส */
}

.section.show {
  opacity: 1;
  /* เมื่ออยู่ใน viewport ให้แสดง */
}

/* ลดระยะห่างบนของ Section แรกหลัง Header */
header+section {
  padding-top: 1.5rem;
  /* 24px */
}

/* กำหนดขนาดปุ่ม Social */
.social-button {}

/* ทำให้ Header มีพื้นหลังสี固定的เมื่อเลื่อน */
header.sticky {
  background-color: #9ab8ac;
  /* Added fixed background color */
  /* Header is no longer transparent */
}

.background-product {
  background-image: url('../images/product/PRODUCT\ MODEL.webp');
  /* Centers the image */
  background-repeat: no-repeat;
  /* Prevents the image from repeating */
  height: 70vh;
  /* Full viewport height */
  background-size: contain;
  background-position: top;
}

.bg-smooth {
  background-image: url('../images/homepage/smooth_control.webp');
  background-repeat: no-repeat;
  background-position: bottom;
}

.bg-volume {
  background-image: url('../images/homepage/volume_thickening.webp');
  background-repeat: no-repeat;
  background-position: bottom;
}

.bg-repair {
  background-image: url('../images/homepage/purple_power.webp');
  background-repeat: no-repeat;
  background-position: bottom;
}

.bg-hydrate {
  background-image: url('../images/homepage/hydrate_nourish.webp');
  background-repeat: no-repeat;
  background-position: center;
}

.bg-whitegreen {
  background-color: #aad9de !important;
}

.bg-whitepink {
  background-color: #ffccd2 !important;
}

.bg-whiteorange {
  background-color: #fcddc8 !important;
}

@media only screen and (max-width: 600px) {

  .bg-hydrate,
  .bg-smooth,
  .bg-volume,
  .bg-repair {
    height: 90vh;
    background-size: cover;
  }
}

.bg-linebox {
  background-image: url('../images/homepage/line_box_2.webp');
  background-position: top;
  /* Centers the image */
  background-repeat: no-repeat;
  /* Prevents the image from repeating */
  background-size: cover;
  aspect-ratio: 260 / 377;  
  /* Full viewport height */
}

.close-linebox {
  background: transparent;
  border: none;
  cursor: pointer;
  /* Optionally add outline for accessibility */
}

.bg-about {
  background-image: url('../images/aboutus/box1_left.webp');
  background-position: top;
  background-size: cover;
  /* Centers the image */
  background-repeat: no-repeat;
  /* Prevents the image from repeating */

  aspect-ratio: 637 / 439;

}

.bg-about2 {
  background-image: url('../images/aboutus/box2_left.webp');
  background-position: top;
  background-size: cover;
  /* Centers the image */
  background-repeat: no-repeat;
  /* Prevents the image from repeating */
  aspect-ratio: 637 / 439;
}

.bg-about3 {
  background-image: url('../images/aboutus/box3_left.webp');
  background-position: top;
  background-size: cover;
  /* Centers the image */
  background-repeat: no-repeat;
  /* Prevents the image from repeating */
  aspect-ratio: 637 / 439;
}

.font-rose {
  color: #e56a54;
}

.font-darkgreen {
  color: #20463e;
}

.relative {
  position: relative;
}

.product-image-container {
  position: relative;
  cursor: pointer;
}

.product-image-container img {
  transition: transform 0.3s ease-in-out;
  /* Smooth zoom effect */
}

.product-image-container:hover img {
  transform: scale(1.15);
  /* Zoom the image to 1.5x */
}


/* Popup Background */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  /* Dark background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Show Popup */
.popup.show {
  opacity: 1;
  visibility: visible;
}

/* Popup Content */
.popup-content {
  width: 80%;
  height: 90%;
  border-radius: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Close Button */
.popup-close {
  position: absolute;
  top: 3vw;
  right: 3vw;
  background: none;
  border: none;  
  font-weight: bold;
  cursor: pointer;
  color: #333;
}

.backface-hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* transform: translateZ(0); /* Another common trick to promote to a layer */
}

.bg-color-faq1 {
  background-color: #fedfcb;
}

.bg-color-faq2 {
  background-color: #ffccd2;
}

.bg-color-faq3 {
  background-color: #e0c2ef;
}

.bg-color-faq4 {
  background-color: #aad9e0;
}

.bg-color-faq5 {
  background-color: #fdcbac;
}

.bg-color-home1 {
  background-color: #fcddc8;
}

.bg-color-home2 {
  background-color: #ffccd2;
}

.bg-color-home3 {
  background-color: #e0c2ef;
}

.bg-color-home4 {
  background-color: #aad9de;
}