.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:40px; padding-bottom:40px;
	width: 100%;
	display:block;
	background-color:#0d121f;
	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;
}
#footer-top .footer-img {
   width: 70%;
}

.social-icons {
  display: flex;
  /*justify-content: flex-end; /* ให้ชิดขวา */
  gap: 16px; /* ระยะห่างระหว่างไอคอน */
  margin-top: 30px; 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:#0d121f;
	font-family: 'Kanit', sans-serif;
	color:#f2f2f2;	
   border-top: 1px solid #252525;
}

@media (max-width: 768px) {
   #footer-top {
      padding-top: 40px;
   }
   #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;       /* ดีเลย์นิดให้ตัวแถบเลื่อนเสร็จก่อน */
}