/* คลุมทั่วหน้าจอ */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 9999; /* อยู่บนสุดเสมอ */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease; /* เอฟเฟกต์ตอนจางหาย */
}

/* สร้างวงกลมหมุนๆ (Spinner) */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3; /* สีขอบจางๆ */
    border-top: 5px solid #ed1c24; /* สีขอบที่หมุน (เปลี่ยนสีได้ตามธีมเว็บ) */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* อนิเมชั่นการหมุน */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* คลาสสำหรับซ่อน Preloader */
.hide-preloader {
    opacity: 0;
    visibility: hidden;
}

.container-fluid {
   padding-left: 30px; padding-right: 30px;
}
@media (max-width: 767.98px) {
   .container-fluid {
      padding-left: 10px; padding-right: 10px;
   }
}

/* footer */
#footer-top {
	position: static;
	margin-bottom: 0px; padding-top:20px; padding-bottom:40px;
	width: 100%;
	display:block;
	background-color:#05439a;
	font-family: 'Kanit', sans-serif;
	color:#f2f2f2;	
}
#footer-top .spacebottom30 {
   margin-bottom: 30px;
}
#footer-top .spacebottom50 {
   margin-bottom: 50px;
}

#footer-top .space-80 {
   height: 80px;
}
#footer-top hr {
   color: #5b5e68;
}
#footer-top h3 {
   font-weight: 400;
}
#footer-top h6 {
   font-size: 1.1em; line-height: 1.4em;
}
#footer-top h6 a {
   color: #ffffff; text-decoration: none;
}
#footer-top h6 a:hover {
   text-decoration: underline;
}

#footer-top ul {
   padding-left: 20px;
}

#footer-top .footer-img {
   width: 70%;
}
#show-total-visitors {
   color: #dab900;
}
#show-active-users {
   color: #56d700;
}

.map-iframe {
   width: 100%;
   height: 500px;
   display: block; /* ป้องกันช่องว่างด้านล่างที่เป็น inline element */
}

.social-icons {
  display: flex;
  /*justify-content: flex-end; /* ให้ชิดขวา */
  gap: 16px; /* ระยะห่างระหว่างไอคอน */
  margin-top: 10px; margin-bottom: 20px;
}

.social-icons a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;   /* ความกว้างเท่ากัน */
  height: 40px;  /* ความสูงเท่ากัน */
  background-color: white; /* หรือ transparent ก็ได้ */
  border-radius: 50%;       /* มุมโค้ง */
  color: black;             /* สีไอคอน */
  font-size: 24px;          /* ขนาดไอคอน */
  text-decoration: none;
}

.social-icons a:hover {
  background-color: #ddd; /* เอฟเฟกต์เวลา hover */
}

.icon-text {
   display: flex;
   align-items: flex-start; /* ให้ icon อยู่บนสุด */
   font-size: 1.1em;
}

.icon-text i {
  margin-right: 8px; /* ระยะห่างไอคอนกับข้อความ */
  margin-top: 2px;   /* ปรับให้อยู่กลางแนวแรก */
}

.icon-text span {
  display: block; font-weight: 300;
}
.icon-text a {
  display: block; font-weight: 300; color: #ffffff;
}

#footer-bottom {
	position: static;
	padding-top:15px;
	width: 100%;
	display:block;
	background-color:#022d68;
	font-family: 'Kanit', sans-serif;
	color:#f2f2f2;	
   border-top: 1px solid #252525;
}

@media (max-width: 768px) {
   #footer-top {
      padding-top: 20px;
   }
   #footer-top .container {
      padding-left: 30px; padding-right: 30px;
   }
   #footer-top .footer-logo {
      text-align: center; padding-bottom: 40px;
   }
   #footer-top .footer-img {
      width: 40%;
   }
   #footer-top .space-80 {
      height: 30px;
   }
   .social-icons {
      justify-content: center; /* จัดให้อยู่ตรงกลางแนวนอน */
   }
}
/* footer close */

#signinLink {
   display: none; position: fixed; right: 20px; bottom: 20px; border: 1px #ed1c24 solid; border-radius: 10px;
   background-color: #ed1c24; padding: 20px 20px; color: #ffffff; font-weight: 300; z-index: 100; width: 300px;
}
#signinLink .btn {
   padding-top: 10px; padding-bottom: 10px;
}
#signinForm .form-control {
   font-weight: 400; font-size: 0.9em; background-color: #ffffff;
}

/* Sidebar Base */
.sidebar {
  position: fixed;
  top: 30%;
  right: 0;
  width: 200px;                 /* ความกว้างจริงเมื่อเปิด */
  height: auto;
  background: #2c2f33;
  overflow: hidden;
  z-index: 1000;
  border-radius: 10px 0 0 10px;

  /* ซ่อนเข้าไปด้านขวาให้เหลือเห็น 50px
     200 - 50 = 150px */
  transform: translateX(150px);
  transition: transform 0.35s ease;
  will-change: transform;
}

.sidebar .sidebar-top {
  background-color: #ed1c24;
}

/* เปิดออกอย่างนุ่มนวล */
.sidebar:hover,
.sidebar:focus-within {          /* ช่วยกรณีโฟกัสด้วยคีย์บอร์ด/ทัช */
  transform: translateX(0);
}

/* Menu Items */
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar ul li {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar ul li:hover {
  background-color: #ed1c24;
}

.sidebar ul li a {
  display: flex;
  align-items: center;
  padding: 15px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.sidebar ul li a i {
  font-size: 18px;
  margin-right: 15px;
  min-width: 24px;
  text-align: center;
}

/* ซ่อนข้อความตอนพับ */
.sidebar ul li a span {
  opacity: 0;
  transition: opacity 0.2s ease 0s;
}

/* โชว์ข้อความตอนคลาย */
.sidebar:hover ul li a span,
.sidebar:focus-within ul li a span {
  opacity: 1;
  transition-delay: .05s;       /* ดีเลย์นิดให้ตัวแถบเลื่อนเสร็จก่อน */
}

/* สไตล์สำหรับปุ่มแชร์ Line แบบลอย */
.line-share-float {
    position: fixed;
    bottom: 30px; /* ระยะห่างจากขอบล่าง */
    right: 20px;  /* ระยะห่างจากขอบขวา */
    z-index: 9999;
    width: 55px;
    height: 55px;
    background-color: #06C755; /* สีเขียว LINE */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    text-decoration: none;
}

/* เอฟเฟกต์เมื่อเอาเมาส์วางหรือกด (สำหรับ Mobile จะเห็นตอนแตะ) */
.line-share-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
    background-color: #05b34c;
}

/* ไอคอนภายใน */
.line-share-float img {
    width: 30px;
    height: 30px;
}

/* ปุ่ม Copy Link แบบลอย */
.copy-link-float {
    position: fixed;
    bottom: 30px;
    right: 20px;
    z-index: 9999;
    width: 55px;
    height: 55px;
    background-color: #333; /* สีเทาเข้มดูพรีเมียม */
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
}

.copy-link-float:active {
    transform: scale(0.9);
}

/* ปุ่ม Copy Link แบบลอย */
.copy-link-float {   
   position: fixed;
   bottom: 30px;
   right: 20px;
   z-index: 9999;
   width: 55px;
   height: 55px;
   background-color: #ed1c24; /* สีเทาเข้มดูพรีเมียม */
   border: none;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(0,0,0,0.3);
   cursor: pointer;
   transition: all 0.3s ease;
   color: white;
}

.copy-link-float:active {
    transform: scale(0.9);
}

/* Tooltip แจ้งเตือนเวลาคัดลอกสำเร็จ */
#copy-toast {
    visibility: hidden;
    min-width: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 30px;
    padding: 10px;
    position: fixed;
    z-index: 10000;
    left: 50%;
    bottom: 100px;
    transform: translateX(-50%);
    font-size: 14px;
}

#copy-toast.show {
    visibility: visible;
    animation: fadein 0.5s, fadeout 0.5s 1.5s;
}

@keyframes fadein { from {bottom: 80px; opacity: 0;} to {bottom: 100px; opacity: 1;} }
@keyframes fadeout { from {bottom: 100px; opacity: 1;} to {bottom: 80px; opacity: 0;} }

@media (max-width: 768px) {
   .line-share-float {
      position: fixed;
      bottom: 20px; /* ระยะห่างจากขอบล่าง */
      right: 5px;  /* ระยะห่างจากขอบขวา */
   }

   .copy-link-float {
      display: block;
      position: fixed;
      bottom: 20px; /* ระยะห่างจากขอบล่าง */
      right: 10px;  /* ระยะห่างจากขอบขวา */
   }
}