@charset "UTF-8";
.table-modern tbody tr{
transition:.15s;
}
.table-modern tbody tr:hover td{
background:#e8f4ff !important;
}
.table-modern tbody tr:hover td:first-child{
border-left:4px solid #C527F5;
}	
.owl-theme .owl-nav [class*='owl-'] {
background:#b085f5 !important;
color:white !important;
border-radius:50%;
padding:6px 12px !important;
font-size:18px !important;
}
.owl-theme .owl-nav [class*='owl-']:hover {
background:#7b56c7 !important;
}	
/* ================================
ปุ่มลูกศร Owl Carousel (โทนม่วงอ่อน)================================ */
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
background: rgba(111, 66, 193, 0.9); /* พื้นหลังม่วงโปร่ง */
color: #fff !important;  /* สีลูกศรขาว */
border-radius: 50%;  /* ปุ่มกลม */
width: 45px;
height: 45px;
font-size: 22px !important;
line-height: 1;
box-shadow: 0 3px 8px rgba(111, 66, 193, 0.3);
border: none;
transition: all 0.25s ease;
}
/* Hover = ม่วงเข้ม + เงาชัด */
.owl-nav button.owl-prev:hover,
.owl-nav button.owl-next:hover {
background: #5a32a3; /* ม่วงเข้ม */
transform: scale(1.1);
box-shadow: 0 4px 10px rgba(90, 50, 163, 0.4);
}
/* ตำแหน่งปุ่มให้อยู่กลางแนวตั้งของรูป */
.owl-nav {
position: absolute;
top: 20%;
width: 100%;
display: flex;
justify-content: space-between;
pointer-events: none; /* ให้คลิกทะลุได้ */
}
.owl-nav button {
pointer-events: all; /* ให้ปุ่มคลิกได้ */
}
/* จุดบอกตำแหน่งสไลด์ (pagination dots) */
.owl-dots {
margin-top: 15px;
text-align: center;
}
.owl-dots .owl-dot span {
background: #d3c2f2; /* ม่วงอ่อน */
width: 12px;
height: 12px;
margin: 5px 4px;
border-radius: 50%;
transition: all 0.25s ease;
}
.owl-dots .owl-dot.active span {
background: #6f42c1; /* ม่วงหลัก */
transform: scale(1.2);
box-shadow: 0 0 6px rgba(111, 66, 193, 0.5);
}	
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
width: 45px;
height: 45px;
}
.owl-nav i {
font-size: 60px;
}
body {  
font-family: 'Sarabun', sans-serif;
font-size: 16px;
} 
p {
line-height: 2rem;
margin-top:0px;
}
h1, .h1 {
line-height: 2rem;
margin-top:0px;
}
h2, .h2 {
line-height: 2rem;
margin-top:0px;
}
h3, .h3 {
line-height: 2rem;
margin-top:0px;
}
h4, .h4 {
line-height: 2rem;
margin-top:0px;
}
h5, .h5 {
line-height: 2rem;
margin-top:0px;
}
h6, .h6 {
line-height: 2rem;
margin-top:0px;
}   
.doubleUnderline {
border-bottom: 3px double;
}   
/* Important part */
.edit{
width:100%;
min-height:35px;
line-height:35px;
border:1px solid #bad2e3;
border-radius:4px;
padding:0 8px;
background:#fff;
transition:all .2s ease;
}
.edit:hover{
border-color:#86b7fe;
}
.edit:focus{
outline:none;
border-color:#0d6efd;
background:#fff8dc;
box-shadow:0 0 0 .2rem rgba(13,110,253,.15);
}
.editMode{
border-color:#0d6efd !important;
background:#fff8dc;
}
.fixTableHead { 
max-height: 700px;
overflow-y: auto;
} 
.fixTableHead thead th { 
position: sticky; 
top: 0; 
border: 0.1px solid #D0D0D0;
border-collapse: collapse; 
} 
.fixTableHead tfoot th { 
border: 0.1px solid #D0D0D0;
border-collapse: collapse; 
}
.resizeme {
width: 100%;  /* กว้างเต็มคอลัมน์ */
height: 500px;/* ปรับความสูงตามต้องการ เช่น 200px */
object-fit: cover;/* ครอบรูปให้เต็มโดยไม่บิดเบี้ยว */
border-radius: 10px;  /* ขอบโค้ง ถ้าไม่ต้องการลบได้ */
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.resizethumb {
width: 150;  /* กว้างเต็มคอลัมน์ */
height: 150px;/* ปรับความสูงตามต้องการ เช่น 200px */
object-fit: cover;/* ครอบรูปให้เต็มโดยไม่บิดเบี้ยว */
border-radius: 10px;  /* ขอบโค้ง ถ้าไม่ต้องการลบได้ */
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}	
@media (max-width: 768px) {
.resizeme {
height: 300px;
}
}
.chart {
width: 100%; 
min-height: 450px;
}	
/* สไตล์ปุ่ม Back to Top */
.back-to-top {
position: fixed;
bottom: 25px;
right: 25px;
width: 45px;
height: 45px;
background-color: #B018D6; /* สีน้ำเงินกรมท่า เข้ากับธีมเว็บ SRP POSN */
color: #ffffff !important;
text-align: center;
line-height: 45px;
border-radius: 5%; /* ทำเป็นรูปวงกลม */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* ใส่เงาฟุ้งแบบโมเดิร์น */
z-index: 9999;
display: none; /* ซ่อนไว้ก่อนในตอนแรก */
transition: all 0.3s ease-in-out;
text-decoration: none;
font-size: 14px;
}
/* เอฟเฟกต์เวลาเอาเมาส์ไปชี้ (Hover) */
.back-to-top:hover {
background-color: #0d6efd; /* เปลี่ยนเป็นสีฟ้าสว่างขึ้น */
color: #ffffff;
transform: translateY(-5px); /* เด้งขึ้นเล็กน้อย */
box-shadow: 0 6px 15px rgba(13, 110, 253, 0.4);
}