@charset "utf-8";
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;
}
.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 #0C6D09;
}	
.news-scroll-container .news-item {
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
cursor: pointer; /* เปลี่ยนรูปเมาส์เป็นมือ */
}
/* สีพื้นหลังตอน Hover (เลือกปรับโค้ดสีได้ตามใจชอบ) */
.news-scroll-container .news-item:hover {
background-color: #f0fdf4 !important; /* ตัวอย่าง: สีเขียวอ่อนๆ ละมุนตา */
/* background-color: #f8f9fa !important; */ /* ตัวอย่าง: สีเทาอ่อนแบบ Bootstrap */
/* แถม: ใส่เอฟเฟกต์ยกการ์ดขึ้นเล็กน้อยให้ดูมีมิติ (ถ้าไม่ชอบลบออกได้ครับ) */
transform: translateY(-2px); 
}	
/* 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; 
} 
.fixed-size {
width: 350px;
height: 460px;
object-fit: cover;
}	
.resize-profile {
width: 135px;         /* กำหนดขนาดกว้างกำลังดีสำหรับแสดงบนหน้าจอ */
height: 180px;        /* กำหนดความสูงให้เท่ากันทุกรูป */
object-fit: cover;    /* ทีเด็ด! คำสั่งนี้จะตัดรูป (Crop) ส่วนเกินทิ้งให้อัตโนมัติ โดยที่รูปไม่บี้ ไม่ยืด ไม่แบน */
}
.invalid-tooltip {
top: auto;
bottom: 100%; /* Moves tooltip to the top */
margin-bottom: 5px; /* Adds space between input and tooltip */
/* Optional: Centering tweak if needed */
left: 50%;
transform: translateX(-50%);
}	
.row-data{
border-bottom:1px solid #dee2e6;
padding:6px 0;
align-items:center;
}
.sticky-header{
position:sticky;
top:60px !important;
background:#D3E0ED;
box-shadow:0 2px 5px rgba(0,0,0,.08);
z-index:1020;
}
#load_data .row-data:nth-child(odd){
background-color:rgba(0,0,0,.02);
}
#load_data .row-data:hover{
background-color:rgba(0,0,0,.075);
}	
#load_data .row-data{
transition:all .15s;
}
#load_data .row-data:hover{
background:#e8f4ff;
box-shadow: inset 3px 0 #07855A;
}	
.chart {
width: 100%; 
min-height: 650px;
}
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #32a568;
color: white;
padding: 10px 15px;
border-radius: 50px;
text-align: center;
text-decoration: none;
display: none; /* Hidden by default */
font-size: 18px;
transition: opacity 0.3s ease;
}
/* Show the button when user scrolls */
.back-to-top.show {
display: block;
opacity: 1;
}
.back-to-top:hover {
background-color: #0056b3;
}	
/* ลบกรอบของ dselect หลังจากเลือกค่า */
.dselect-wrapper .form-select {
border: none !important;
box-shadow: none !important;
background: transparent !important;
padding-right: 2rem; /* เว้นที่ให้ลูกศร */
}
/* ถ้าอยากลบเส้นตอน focus ด้วย */
.dselect-wrapper {
position: relative;
}
.dselect-wrapper::after {
content: "▼";
font-size: 0.8rem;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: #666;
}
.col-medname {
width: 30%;
min-width: 320px;
white-space: normal;
word-break: break-word;
}	
.user-profile {
position: sticky;
top: 0;
z-index: 10;
}