/* SCROLLUP SMOOTH */
.scrollTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 10px 15px;
  background: #000;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #fff; /* แก้ไขจาก border-radius เป็น border */
  cursor: pointer;
  transition: all 0.5s ease 0s;
  opacity: 0; /* เริ่มต้นด้วยค่า opacity เป็น 0 */
  visibility: hidden; /* ซ่อนปุ่มเมื่อโหลดหน้าเว็บ */
  transition: opacity 0.5s, visibility 0.5s;
}



body {
  scroll-behavior: smooth;
}



/*LOADING*/
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333333;
  transition: opacity 0.75s, visibility 0.75s;
  z-index: 1000px;
}

.loader--hidden {
  opacity: 0;
  visibility: hidden;
}

.loader::after {
  content: "";
  width: 75px;
  height: 75px;
  border: 15px solid hwb(226 6% 70%);
  border-top-color: #ffe100;
  border-radius: 50%;
  animation: loading 0.75s ease infinite;
  z-index: 1000px;
}

@keyframes loading {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}
/* END */

/* BG */
html {
  scroll-behavior: smooth;
}





* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'IBM Plex Sans Thai', sans-serif;
}

body {
  height: 100vh;
  background-color: #ffffff;
  background-size: cover;
  background-position: center;
}


li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
}

a:hover {
  color: gold;
}

/*HEADER*/
.headercolor {
  background-image: linear-gradient(0deg, rgba(17, 39, 79, 0.99) 18%, rgba(9, 22, 46, 1) 100%);
}
header {
  position: relative;
  padding: 0 2rem;
}

.navbar {
  width: 100%;
  height: 60px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .logo a{
  font-size: 1.5rem;
  font-weight: bold;
}

/* LOGO พรรค */
.logo img{
  width: 60px;
  height: 60px;
}

.navbar .links {
  display: flex;
  gap: 2rem;
}

.navbar .toggle_btn {
  color: #fff;
  padding: 1.5rem;
  cursor: pointer;
  display: none;
}
.Section_top {
  /* ตรวจสอบและปรับขนาดพื้นหลังที่นี่ */
  background-size: contain; /* หรืออาจใช้ค่าอื่น ๆ เช่น 'cover' หรือขนาดที่เฉพาะเจาะจง */
}

.action_btn:active{
  scale: 0.95;
}
/* DROPDOWN MENU */
.dropdown_menu {
  display: none;
  position: absolute;
  right: 2.5rem;
  top: 80px;
  height: 0;
  width: 300px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: 10px;
  overflow: hidden;
  transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dropdown_menu.open{
  height: 145px;
  z-index: 1000;
}

.dropdown_menu li {
  padding: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown_menu .action_btn{
  width: 100%;
  display: flex;
  justify-content: center;
}
/* RESPONSIVE DESIGN */
@media(max-width: 992px) {
  .navbar .links,
  .navbar .action_btn {
    display: none;
  }

  .navbar .toggle_btn {
    display: block;
  }

  .dropdown_menu{
    display: block;
  }
}
/* Filter Pic */
.slider img {
  filter: blur(5px);
}

/*PICTURE SLIDE*/
.Section_top{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-image: url();
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  justify-content: center;
  animation: change 13s infinite ease-in-out;
  z-index: -1;
}

.content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;

}
.content h1{
  font-size: 20px;
  background: linear-gradient(45deg, #FF661B, #ff874b, #ff8e56, #ff9966);
  background-size: 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  animation: animate 5s ease-in-out infinite;

}
.content p{
  color: #ffffff;
  font-size: 15px;
}

body::before{
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
}
.conten {
  padding: 40px;
  border-radius: 10px;
  /* ลบหรือปรับค่า box-shadow ที่นี่ */
  box-shadow: none; /* ตัวอย่างการลบ box-shadow */
}
@keyframes change{
  0%
  {
      background-image: url(https://i.ibb.co/R6vV2FT/IMG-4152.png);
  }
  20%
  {
      background-image: url(https://i.ibb.co/JC3f6tw/IMG-4166.png);
  }
  40%
  {
      background-image: url(https://i.ibb.co/dWbdrz4/60-20240122222833.png);
  }
  60%
  {
      background-image: url(https://i.ibb.co/R6vV2FT/IMG-4152.png);
  }
  80%
  {
      background-image: url(https://i.ibb.co/JC3f6tw/IMG-4166.png);
  }
  100%
  {
      background-image: url(https://i.ibb.co/dWbdrz4/60-20240122222833.png);
  }
  
}
/* HEADOPEN */
.HeadTeaser h1 {
  text-align: center;
}
.HeadTeaser {
  text-align: center; /* จัดให้ข้อความอยู่ตรงกลางในแนวนอน */
}

.textteaser {
  background: linear-gradient(45deg, #000000, #262626, #c7c7c7, #ffffff);
  background-size: 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  animation: animate 5s ease-in-out infinite;
  font-size: 50px;
}
.HeadTeaser{
  background-image: linear-gradient(180deg, rgba(255, 129, 66, 1) 0%, rgba(255, 92, 10, 1) 100%);
}




/* VDO */

.video-container {
  position: relative;
  overflow: hidden; /* ป้องกันไม่ให้เงาและขอบโค้งหลุดออกไปนอก container */
  width: 80%; /* กำหนดให้วิดีโอมีความกว้างน้อยกว่าเต็มจอ */
  max-width: 1090px; /* กำหนดความกว้างสูงสุด */
  margin: auto; /* จัดกึ่งกลาง */
  padding-top: 90px; /* เพิ่มระยะห่างจากด้านบน */
}

.video-section {
  width: 100%; /* กำหนดให้วิดีโอมีความกว้างเต็ม container */
  height: auto; /* กำหนดให้ความสูงปรับตามอัตราส่วนของวิดีโอ */
  object-fit: cover; /* ให้วิดีโอครอบคลุมพื้นที่ทั้งหมดโดยไม่เสียอัตราส่วน */
  display: block; /* ให้วิดีโอเป็น block-level element เพื่อใช้ margin: auto */
}

.containerbg {
  background-image: linear-gradient(180deg, rgba(9, 22, 46, 1) 69%, rgba(102, 34, 0, 1) 100%);
  z-index: -10;
}



/*HEAD POLICY*/



.HeadPolicy h1 {
  text-align: center;
}
.HeadPolicy {
  text-align: center; /* จัดให้ข้อความอยู่ตรงกลางในแนวนอน */
}

.text {
  background: linear-gradient(45deg, #000000, #262626, #c7c7c7, #ffffff);
  background-size: 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  animation: animate 5s ease-in-out infinite;
  font-size: 50px;
}
.HeadPolicy{
  background-image: linear-gradient(180deg, rgba(255, 129, 66, 1) 0%, rgba(255, 92, 10, 1) 100%);
}



/* POLICY */

.texth1{
  background: linear-gradient(45deg, #09162E, #1f4996, #a24110, #FF661B);
  background-size: 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  animation: animate 5s ease-in-out infinite;

}
@keyframes animate{
  0%{
    background-position: 0 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0 50%;
  }
}
.div {
  text-align: center; /* จัดให้เนื้อหาทั้งหมดอยู่ตรงกลางในแนวนอน */
  padding: 20px; /* ระยะห่างภายในสี่เหลี่ยม */
}


.div img {
  max-width: 100%; /* ให้รูปภาพมีความกว้างไม่เกินสี่เหลี่ยม */
  height: auto; /* ให้ความสูงของรูปภาพปรับตามขนาดความกว้าง */
  display: block; /* ให้รูปภาพแสดงเป็นบล็อก */
  margin: 0 auto; /* จัดให้รูปภาพอยู่ตรงกลางในแนวนอน */
}



.div h1, .div p {
  margin-top: 10px; /* ระยะห่างด้านบนสำหรับหัวข้อและย่อหน้า */
}

.containerpolicy{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: column;
}
.div{
  height: 800px;
  width: 300px;
  color: rgb(255, 255, 255);
  margin: 30px;
  border-radius: 7px;
  
}
.div {
  width: 100%; /* กำหนดให้องค์ประกอบเต็มความกว้างของพื้นที่ที่มี */
  max-width: 700px;
  max-height: 800px; /* จำกัดความกว้างสูงสุดไม่ให้เกิน 1200px */
 
}
.containerpolicy{
  background-color: #09162E;
}

/* กำหนดความกว้างสำหรับจอมือถือ */
@media (max-width: 767px) {
  .div {
    max-width: 100%; /* อนุญาตให้องค์ประกอบเต็มความกว้างของจอมือถือ */

   }
}


.last {
  display: flex;
  justify-content: center; /* จัดกลางแนวนอน */
  align-items: center; /* จัดกลางแนวตั้ง */
  height: 10%; /* กำหนดความสูงของ footer */
  min-height: 10px; /* กำหนดความสูงขั้นต่ำของ footer */
}

.last1 {
  margin: 0; /* ลบ margin ของ h1 ออกเพื่อให้จัดกลางได้อย่างถูกต้อง */
}

.last {
  background-image: linear-gradient(180deg, rgba(255, 129, 66, 1) 0%, rgba(255, 92, 10, 1) 100%);
}

.last1 {
  background: linear-gradient(45deg, #000000, #262626, #c7c7c7, #ffffff);
  background-size: 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  animation: animate 5s ease-in-out infinite;
}