/* Custom CSS */

body {
    background-image: url('configimg/bg.jpg');
    background-size: cover; /* ให้รูปภาพขยายตามขนาดหน้าจอ */
    background-repeat: no-repeat; /* ไม่ให้ซ้ำซ้อน */
    background-attachment: fixed; /* ให้พื้นหลังติดตามหน้าจอ */
  }

/* ลบ underline ของลิงค์ */
        a {
            text-decoration: none;
        }
/* Sticky Menu */
.navbar {
  background-color: #fff;
}

.navbar-brand img {
  width: 300px; /* Set default width for logo */
}

@media (max-width: 576px) {
  /* For mobile devices */
  .navbar-brand img {
    width: 200px; /* Set width for logo on mobile devices */
  }
}

@media (min-width: 992px) {
  /* For desktop devices */
  .navbar-brand img {
    width: 300px; /* Set width for logo on desktop devices */
  }
}

.navbar-nav .nav-link {
  color: #000;
}

.navbar-nav .nav-link:hover {
  color: #215089;
}

.navbar-nav {
  display: flex;
  align-items: center;
}

.icons {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.nav-item {
  position: relative;
}

.nav-link {
  display: inline-block;
  padding-right: 10px; /* เปลี่ยนจาก 40px เป็น 30px */
}

.icons img {
  margin-left: 5px;
}


.dropdown-menu {
  background-color: #d4cece;
  width: 800px; /* Set width of dropdown menu */
  height: auto;
  position: absolute; /* Set position to absolute */
  left: 50%; /* Move the menu to the middle of the screen */
  transform: translateX(-50%); /* Adjust position to center */
  padding: 20px; /* Add padding to create space */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Add shadow */
}


.dropdown-menu .row {
  display: flex;
  justify-content: space-between; /* Align items evenly */
}

.dropdown-menu .col {
  width: 23%; /* Set width of each column */
}

.dropdown-menu img {
  width: 100%;
  height: auto; /* Allow image height to adjust proportionally */
  display: block; /* Ensure images display as blocks */
  margin: 0 auto; /* Center images horizontally */
}

.dropdown-menu .dropdown-item {
  padding: 0; /* Remove padding */
}

/* Banner Section */
.banner-section {
  margin-top: 0; /* Remove margin-top */
}

/* Adjust banner position */
.banner-section .container-fluid {
  padding: 0; /* Remove padding */
}

.banner-section img {
  width: 100%; /* Make banner image width 100% */
}

@media (max-width: 768px) {
  .bg-white-mobile {
    background-color: white !important;
    padding: 20px;
  }
}

@media (max-width: 991px) {
  .hide-mobile {
    display: none !important;
  }
}

.carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%; /* กำหนดให้ตำแหน่งอยู่ที่ตรงกลางของภาพ */
    transform: translate(-50%, -50%); /* ใช้การเลื่อนแกน x และ y ของข้อความ */
    width: 100%;
    text-align: center;
  }

  #video {
      width: 100%;
      height: auto;
  }

  #text-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: white;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      z-index: 1;
  }

  .bxselect {
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 10px;
  }

  .bxselect_sale {
    padding: 10px;
    background-color: #375be1;
    border-radius: 5px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 10px;
  }

  .province-label {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ff0000;
    color: #ffffff;
    padding: 5px;
    border-radius: 5px;
}

.new-project-label {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: red;
    color: white;
    padding: 2px 5px;
    border-radius: 5px;
}

/* เพิ่ม style ให้ป้าย popup.png แสดงก่อน sticky menu และจัดตรงกลาง */
 .popup {
  display: none; /* Initially hidden */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the popup */
  background-color: rgba(0, 0, 0, 0.7);  Semi-transparent black background */
  z-index: 100;
}

/* เปลี่ยนขนาดป้าย popup.png เป็น 700px และกำหนดขอบสีขาว */
.popup-content {
  position: relative;
  background-color: #fff;
  border: 13px solid #fff; /* 13px white border */
  border-radius: 15px;
  padding: 10px;
  width: 700px; /* ปรับขนาดป้ายเป็น 700px */
  margin: 0 auto;
  text-align: center; /* จัดตรงกลาง */
}
/* เปลี่ยนจากปุ่ม close ให้เป็นเครื่องหมายกากบาทขนาดใหญ่ */
.close-btn {
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 30px;
  cursor: pointer;
  color: #fff; /* Black close button */
  background-color: transparent; /* เพิ่มสีพื้นหลัง */
  border: none; /* ไม่มีเส้นขอบ */
}

.close-btn:hover {
  color: red;
}

/* ปรับขนาดของป้ายเมื่อเป็นมือถือ */
@media only screen and (max-width: 768px) {
  .popup-content {
    width: 300px;
    position: relative;
    background-color: #fff;
    border: 5px solid #fff; /* 13px white border */
    border-radius: 10px;
    padding: 10px;
    width: 300px; /* ปรับขนาดป้ายเป็น 700px */
    margin: 0 auto;
    text-align: center; /* จัดตรงกลาง */
    top: 25%;
    left: 25%;
    transform: translate(-50%, -50%); /* Center the popup */
  }
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.banner-text h2 {
  font-size: 24px;
  color: white;
  text-shadow:
    -2px -2px 0 rgba(0, 0, 0, 0.7),
    2px -2px 0 rgba(0, 0, 0, 0.7),
    -2px 2px 0 rgba(0, 0, 0, 0.7),
    2px 2px 0 rgba(0, 0, 0, 0.7);
  padding: 20px;
}

@media only screen and (max-width: 768px) {
      #carouselExampleIndicators .carousel-item img {
        height: 550px;
      }

      #carouselExampleIndicators .carousel-caption h2,
      #carouselExampleIndicators .carousel-caption h3 {
        font-size: 3em;
        font-weight: bold;
        color: white;
      }
    }

    .container-box {
      background-color: #f0f4f9;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
      padding: 15px;
      margin: 15px auto;
      max-width: 800px;
    }

    .container-box {
    background-color: #f0f4f9;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    padding: 15px;
    margin: 15px auto;
    max-width: 800px;
  }

  @media (max-width: 800px) {
    .container-box {
      max-width: 100%;
    }
  }

  .container-box h2 {
    color: #007bff;
    margin-top: 0;
  }

  .container-box p {
    color: #333;
  }

  .container-section {
    background-color: #f0f0f3;
    padding: 15px;
    border:2px solid #fff;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  }

  .btn-dark {
      background-color: #000;
      color: #fff;
      border: none;
      border-radius: 25px;
      padding: 10px 20px;
      font-size: 18px;
      transition: all 0.3s ease;
    }

    .btn-dark:hover {
      background-color: #0f0f7f;
      border-radius: 50px; /* เพิ่ม border-radius เมื่อ hover เพื่อให้เกิดรูปร่างโค้งมนเนียม */
    }

    .custom-padding {
               padding: 10px;
           }

           .column {
               float: left;
               width: calc(25% - 10px); /* 4 columns with 5px margin */
               padding: 10px;
               margin: 1px; /* 5px margin between columns */
               background-color: #003366;
               color: #ffffff;
           }
           .row::after {
               content: "";
               clear: both;
               display: table;
           }

           @media (max-width: 767px) {
               .col-xs-2 {
                 flex: 0 0 50%; /* แสดงแถวละ 2 รูปในมือถือ */
                 max-width: 50%;
               }
             }

             .booking-text {
       position: absolute;
       padding-left: 15px;
       bottom: 10px; /* ระยะห่างจากด้านล่างของรูป */
       left: 10px; /* ระยะห่างจากด้านซ้ายของรูป */
       color: white; /* สีข้อความ */
       font-size: 16px; /* ขนาดตัวอักษร */
       font-weight: bold; /* ตัวหนา */
     }

     .position-relative {
     position: relative;
   }

   .img-caption {
     position: absolute;
     top: 50%;
     left: 5%;
     width: 50%; /* กำหนดความกว้างเป็น 50% */
     transform: translateY(-50%);
   }

   .caption-content {
     display: flex;
     flex-direction: column;
   }

   .caption-content > * {
     width: 50%;
   }

   .white-text {
     color: white;
     text-align: left;
   }

   .tab-menu {
       overflow: hidden;
   }

   .tablinks {
       background-color: black;
       border: 1px solid black;
       border-radius: 5px;
       color: white;
       padding: 10px 20px;
       margin: 0 5px;
       float: left;
       cursor: pointer;
   }

   .tablinks:hover {
       background-color: #555;
   }

   .city {
       display: none;
   }

   .city img {
       border-radius: 5px;
   }

   .city img::before {
       content: "ส่วนลด 30%";
       position: absolute;
       top: 0;
       left: 0;
       padding: 5px;
       color: white;
       background-color: red;
   }

   .city p {
       color: black;
   }

   .city p:nth-child(2) {
       display: inline-block;
       margin-right: 5px;
   }

   .city p:nth-child(3) {
       color: #666;
       text-decoration: line-through;
   }

   .city p:nth-child(4) {
       color: red;
       font-weight: bold;
   }

   .flex-container {
       display: flex;
       justify-content: space-between;
   }

   .hotel-deal {
       flex-basis: calc(25% - 10px); /* 25% width for each item with 10px spacing */
       margin-right: 10px; /* Add spacing between items */
       position: relative;
       overflow: hidden;
   }

   .hotel-deal:last-child {
       margin-right: 0; /* Remove margin from the last item */
   }

   .hotel-deal img {
       width: 100%;
       height: auto; /* สัดส่วนความสูงของรูปจะปรับตามสัดส่วนของรูปภาพเอง */
       border-bottom-left-radius: 0px; /* ลบการโค้งมนด้านล่างซ้ายของรูป */
       border-bottom-right-radius: 0px; /* ลบการโค้งมนด้านล่างขวาของรูป */
   }

   .discount-badge {
           position: absolute;
           top: 0%; /* ปรับตำแหน่งของส่วนลดให้อยู่ที่บนของรูป */
           left: 25%; /* ปรับตำแหน่งของส่วนลดให้อยู่ที่ซ้ายของรูป */
           background-color: red;
           color: white;
           padding: 5px;
           width: 50%;
           transform: translate(-50%, 0);
           z-index: 1; /* ตั้งให้ส่วนลดอยู่ข้างบนของรูป */
           border-radius: 0 10px 0 10px; /* ปรับมุมของส่วนลด */
       }


       .hotel-details {
     position: relative;
     background-color: white;
     padding: 10px;
     border-radius: 0; /* ลบการโค้งมนขอบของส่วนรายละเอียด */
     /* width: calc(100% - 10px);  ลบระยะขอบมนซ้ายขวา 5px */
     margin-left: 0px; /* ขยับขวาเพื่อให้รายละเอียดอยู่ติดกับรูป */
     margin-right: 0px; /* ลบ margin-right */
     border-bottom-left-radius: 10px; /* ลบการโค้งมนด้านล่างซ้ายของรูป */
     border-bottom-right-radius: 1s0px; /* ลบการโค้งมนด้านล่างขวาของรูป */
 }

       .hotel-name {
        font-size: 1.25rem; /* ขนาด font size 5 */
        font-weight: bold;
        color: black;
       }

       .hotel-stars {
        font-size: 1rem; /* ขนาด font size 3 */
        color: black;
       }


       .btn {
         padding: 10px;
         text-align: center;
         color: #fff;
         width: 100%;
         background-color: #000;
       }

       .detail-btn:hover {
         background-color: #ff0000;
         color: #fff;
       }