.movie-box {
   background-color: transparent;
   padding: 10px;
   text-align: center;
   /*border: 1px solid #ddd;*/
   margin-bottom: 20px;
}


.bow-parts {
   position: absolute; /* ทำให้โบว์อยู่บนสุด */
   top: 10px; /* ปรับระยะห่างจากด้านบน */
   left: 10px; /* ปรับระยะห่างจากด้านซ้าย */
   background-color: rgba(42, 0, 0, 0.8); /* สีพื้นหลังของโบว์ (สีแดง) */
   color: white; /* สีของข้อความ */
   padding: 5px 15px; /* เพิ่ม padding เพื่อให้ข้อความไม่ชิดขอบ */
   font-weight: bold; /* ทำให้ข้อความหนา */
   font-size: 14px; /* ขนาดตัวอักษร */
   border-radius: 5px; /* มุมโค้งมนของโบว์ */
   border: 2px solid #1e1f06;
   z-index: 10; /* ทำให้โบว์อยู่เหนือทุกอย่าง */
}

.sidebar-section {
   background-color: #08070652;
   /*padding: 15px;*/
   border: 1px solid #67676787;
   max-height: 100%;
   overflow: auto;
   border-radius: 9px;
   text-align: center;
}

.sidebar-section h4 {
   background-color: #4b4b4b;
   padding: 12px 0;
   margin: 0;
   box-shadow: inset 0px 0px 2px 1px #313131;
}

.sidebar-section .col-6 {
   border: 1px solid #52525233;
}

.sidebar-section .col-6:hover {
   background-color: #525252;
}

.sidebar-section .row a {
   display: block;
   padding: 12px;
   white-space: nowrap; /* เพื่อให้ลิงก์ไม่ล้นบรรทัด */
}

.col-5ths {
   width: 20%;
   float: left;
   padding-right: 15px;
   padding-left: 15px;
   box-sizing: border-box;
}

.card-img-top {
   width: 100%; /* ให้ภาพเต็มความกว้างของการ์ด */
   height: 270px; /* ตั้งค่าความสูงให้มากขึ้น เพื่อให้เป็นแนวตั้ง */
   object-fit: cover; /* ครอบภาพให้เต็มพื้นที่ และรักษาสัดส่วน */
   border-top-left-radius: 8px; /* ทำให้มุมภาพโค้งมนตามกล่อง */
   border-top-right-radius: 8px;
   box-shadow: 0px -1px 1px 0px rgb(171 171 171 / 67%);
   transition: filter 0.3s ease;
   min-width: 100%;
   min-width: -webkit-fill-available;
   min-height: 269px;
}

.card-link {
   display: flex;
   justify-content: center;
   width: 100%;
}

.card-movie {
   border: none; /* ลบเส้นขอบ */
   border-radius: 9px;
   /*border-radius: 8px; !* ปรับมุมให้โค้งมน *!*/
   box-shadow: 2px 2px 8px 0.5px rgba(58, 58, 58, 0.88); /* เพิ่มเงาให้กล่อง */
   transition: transform 0.3s ease, box-shadow 0.3s ease; /* ทำให้มีการเคลื่อนไหว smooth */
   background-color: #151313;
   /*min-width: 180px;*/
   max-width: 200px;
   width: -webkit-fill-available;
   position: relative;
}

.card-movie:hover {
   /*transform: translateY(-10px); !* ยกการ์ดขึ้นเมื่อ hover *!*/
   box-shadow: 1px 0px 5px 2px rgba(112, 112, 112, 0.88); /* เพิ่มเงาเมื่อ hover *!*/
   transform: scale(1.0323);
   filter: brightness(1.071);
}

.card-body {
   /*padding: 6px 8px 9px 8px;*/
   padding: 15px; /* เพิ่มช่องว่างภายในการ์ด */
   border-radius: 0 0 8px 8px;
   display: flex;                   /* ใช้ Flexbox ใน card-body เพื่อจัดการตำแหน่ง */
   justify-content: center;         /* จัดข้อความให้อยู่กลางในแนวนอน */
   align-items: center;
   box-shadow: inset 0px -2px 1px 0px rgb(110 107 107 / 0.63), 0px -5px 8px 1px #2825257a;
   background-color: #151313;
}

.card-title {
   font-size: 1rem;
   font-weight: bold; /* ทำให้ตัวอักษรหนา */
   line-height: 1.241;              /* ระยะห่างระหว่างบรรทัด */
   height: 2.4rem;                  /* ความสูงสำหรับ 2 บรรทัด */
   text-align: center;              /* จัดข้อความให้อยู่กลางในแนวนอน */
   margin: 3px 0;
   display: flex;
   align-items: center;
   background-color: #151313;
}

.card-title-ellipsis {
   overflow: hidden;                /* ซ่อนข้อความที่ล้นออกไป */
   text-overflow: ellipsis;         /* แสดงเครื่องหมาย ... */
   display: -webkit-box;            /* สำหรับ WebKit */
   -webkit-line-clamp: 2;           /* จำกัดข้อความให้แสดงได้ 2 บรรทัด */
   -webkit-box-orient: vertical;    /* จัดบรรทัดในแนวตั้ง */
   /*word-wrap: break-word;           !* ตัดคำอัตโนมัติ *!*/
}


.card-title:hover {
   cursor: pointer;            /* เปลี่ยนเคอร์เซอร์เมื่อ hover */
}

/*select2*/
.select2-container--open .select2-dropdown--below {
   z-index: 100000;
   margin: 0 -5px;
}

.select2-search__field {
   color: #000;
}
.select2-container {
   width: 280px !important;  /* กำหนดความกว้างตามที่ต้องการ */
   margin: 0 5px;
}
.select2-results__option {
   color: #000;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
   top: 5px;
}

@media (max-width: 768px) {
   .col-5ths {
      width: 50%; /* 2 คอลัมน์เมื่อเป็นจอขนาดเล็ก */
   }
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
   line-height: 36px;
}
.select2-container--default .select2-selection--single {
   height: 36px;
}

.active-ep {
   background-color: #0a0d0d;
   color: white;
   border: 1px solid #5d5d5d;
}

@media (max-width: 375px) {
   .pagination .page-item {
      display: none;
   }

   /* แสดงลูกศร Previous และ Next */
   .pagination .page-item:first-child,  /* ปุ่ม Previous */
   .pagination .page-item:last-child,   /* ปุ่ม Next */
   .pagination .page-item:nth-last-child(2), /* หน้าสุดท้าย */
   .pagination .page-item.active,       /* หน้าปัจจุบัน */
   .pagination .page-item.active + .page-item,  /* หน้าถัดจากหน้าปัจจุบัน */
   .pagination .page-item.active + .page-item + .page-item, /* หน้าถัดไป */
   .pagination .page-item:first-child + .page-item.disabled, /* จุดไข่ปลาแรก */
   .pagination .page-item:nth-last-child(3) + .page-item.disabled /* จุดไข่ปลาหลัง */
   {
      display: inline-block;
   }
}

.user-icon {
   position: relative;
   display: inline-block;
   margin-left: 10px;
}
.user-icon button {
   background-color: #f1f1f1;
   border: 1px solid #ccc;
   border-radius: 18%;
   padding: 10px;
   cursor: pointer;
   height: 35px;
}
.user-icon button i:before {
   position: absolute;
   width: 30px;
   display: block;
   top: 9px;
   right: 2px;
   color: #000;
}

.user-dropdown {
   display: none;
   position: absolute;
   top: 33px;
   right: -5px;
   background-color: white;
   border: 1px solid #ccc;
   width: 234px;
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   border-radius: 5px;
   z-index: 1000;
   color: #000;
   margin-top: 3%;
}
.user-dropdown div {
   padding: 10px;
   text-align: center;
   color: #2b2b2b;
}
.user-dropdown hr {
   margin: 0;
   border: none;
   border-top: 1px solid #ccc;
}
.user-dropdown a {
   display: block;
   padding: 10px;
   text-align: center;
   color: #000;
   text-decoration: none;
   background-color: #fae8e8;
   border-top: 2px solid #562d2d;
   border-radius: 0 0 4px 4px;
}
.user-dropdown a:hover {
   color: #f00;
}
.user-icon:hover .user-dropdown {
   display: block;
}

/*sliker*/
/* ทำให้ container เป็น flex และจัดให้อยู่ตรงกลาง */
.container-slicker {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;  /* จัดให้อยู่ตรงกลาง */
   gap: 10px;
   padding: 5px;
   align-items: center; /* ถ้าต้องการให้จัดกึ่งกลางแนวตั้ง */
   width: 85%;
   margin: 0 auto; /* ให้อยู่ตรงกลาง */
}

.slick-next:before, .slick-prev:before{
   font-size: 36px;
}

.slick-prev {
   left: -36px;
}

.slick-dots li.slick-active button:before {
   color: #bdbdbd;
}

.slick-dots li button:before {
   font-size: 16px;
   opacity: 0.72;
}

/* กล่องของแต่ละไอเท็ม */
.live-content {
   background-color: #2f2f2f;
   border: 1px solid #ddd;
   border-radius: 8px;
   width: 430px; /* กำหนดขนาดให้เท่ากันทั้ง PC และมือถือ */
   text-align: center;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   margin: 10px; /* เพิ่มระยะห่างระหว่างกล่อง */
}

/* จัดการรูปภาพในกล่อง */
.live-content img {
   width: 100%; /* รูปภาพเต็มความกว้างของกล่อง */
   height: auto; /* รูปจะย่อและขยายตามกล่อง */
}

/* ข้อความในกล่อง */
.live-content h2 {
   font-size: 16px;
   margin: 10px 0;
}

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

.live-content a {
   display: inline-block;
   margin: 0;
   padding: 5px 10px;
   background-color: #007bff;
   color: #fff;
   text-decoration: none;
   border-radius: 0;
   width: 100%;
}

.live-content a:hover {
   background-color: #0056b3;
}

.movie-detial-2 .col-auto {
   min-width: 108px;
}

.solid-line-container {
   display: flex;
   align-items: center; /* จัดให้ข้อความและเส้นอยู่กึ่งกลางในแนวตั้ง */
   width: 100%;
   margin-bottom: 1%;
}

.solid-line-text {
   white-space: nowrap; /* ป้องกันไม่ให้ข้อความตัดบรรทัด */
   margin-right: 10px; /* เว้นระยะห่างระหว่างข้อความกับเส้น */
}

.solid-line {
   flex-grow: 1; /* ให้เส้นขยายเต็มพื้นที่ที่เหลือ */
   border-bottom: 3px solid #ededed;
   height: 1px;
   border-radius: 5%;
   top: -3px;
   position: relative;
   margin-left: 5px;
}

/*pagination*/

.pagination {
   display: flex;
   justify-content: center;
   padding-left: 0;
   list-style: none;
}

.page-item .page-link {
   color: #000; /* สีปกติของลิงก์ */
   background-color: #fff; /* พื้นหลังปกติ */
   border: 1px solid #dee2e6; /* เส้นขอบปกติ */
   /*margin: 0 3px; !* ระยะห่างระหว่างปุ่ม *!*/
   transition: background-color 0.3s ease, border 0.3s ease;
}

.page-item .page-link:hover {
   color: #fff; /* สีเมื่อ hover */
   background-color: #373c53; /* พื้นหลังเมื่อ hover */
   border-color: #373c53; /* สีของเส้นขอบเมื่อ hover */
}

.page-item.active .page-link {
   color: #fff; /* สีตัวอักษรเมื่อ active */
   background-color: #373c53; /* พื้นหลังเมื่อ active */
   border-color: #373c53; /* เส้นขอบเมื่อ active */
}

.page-item.disabled .page-link {
   color: #6c757d; /* สีของลิงก์เมื่อ disabled */
   background-color: #fff; /* พื้นหลังเมื่อ disabled */
   border-color: #dee2e6; /* เส้นขอบเมื่อ disabled */
   padding: 6px 4px;
}

.page-link:focus {
   outline: unset;
   box-shadow: none;
}

.page-link {
   /*padding: 8px 12px; !* ระยะห่างภายในปุ่ม *!*/
   /*font-size: 14px;*/
   /*line-height: 1.5;*/
   /*border-radius: 4px; !* ทำมุมโค้งมน *!*/
}

.btn-media-sync {
   background: linear-gradient(135deg, #525252, #525252); /* สีพื้นหลังปกติ */
   color: #fff; /* สีฟ้อนท์สีขาว */
   border: none;
   padding: 10px 20px;
   font-size: 16px;
   border-radius: 5px;
   transition: background-color 0.8s ease; /* เพิ่มการเปลี่ยนแปลงที่นุ่มนวล */
}

.btn-media-sync:hover {
   background: linear-gradient(135deg, #525252, #737373); /* ไล่สีจากเทาเข้มไปเทาอ่อน */
}