@charset "utf-8";
body {  
font-family: 'Sarabun', sans-serif;
font-size: 16px;
}  
/* เมื่อชี้ที่การ์ดข่าว ให้เปลี่ยนสีพื้นหลังและเพิ่ม Transition ให้ดูนุ่มนวล */
.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: #5BA4F1 !important; /* ตัวอย่าง: สีเขียวอ่อนๆ ละมุนตา */
/* background-color: #f8f9fa !important; */ /* ตัวอย่าง: สีเทาอ่อนแบบ Bootstrap */
/* แถม: ใส่เอฟเฟกต์ยกการ์ดขึ้นเล็กน้อยให้ดูมีมิติ (ถ้าไม่ชอบลบออกได้ครับ) */
transform: translateY(-2px); 
}
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; 
} 
.fixed-size {
width: 350px;
height: 460px;
object-fit: cover;
}	
.fixed-size-std {
width: 120px;
height: 150px;
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 #0d6efd;
}	
.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 #0d6efd;
}	
.my-fixed-width-button {
width: 100%;       /* ยืดเต็มจอเมื่อหน้าจอเล็ก */
max-width: 350px;  /* แต่ไม่เกิน 350px */
display: inline-block;
text-align: center; /* ให้ข้อความอยู่กลางปุ่ม */
}
/* Action Cards */
.action-cards {
margin: 3rem 0;
}
.action-card {
background: white;
border-radius: 12px;
padding: 2rem;
text-align: center;
box-shadow: 0 3px 15px rgba(0,0,0,0.08);
transition: background-color 0.3s ease, transform 0.2s ease;
border: none;
height: 100%;
border-top: 4px solid var(--primary-gold);
}
.action-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(212, 167, 98, 0.2);
background-color: #F5CF27; /* สีอ่อนของโทน #d4a762 */
}
.action-card i {
font-size: 3rem;
color: var(--primary-gold);
margin-bottom: 1rem;
}
.action-card h5 {
color: #333;
font-weight: 600;
margin-bottom: 1rem;
}
.bg-light-hover:hover {
background-color: #F5CF27 !important; 
cursor: pointer;
transition: background-color 0.3s ease;
}	
.dropdown-menu.notifications {
max-height: 600px; /* กำหนดความสูงสูงสุด */
overflow-y: auto;
padding: 0; /* ตัด padding ออกจะได้ให้ sticky ชิดขอบ */
}
.dropdown-menu.notifications .dropdown-header {
position: sticky;
top: 0;
background: #fff; /* ใส่พื้นหลังกันโปร่ง */
z-index: 10;
padding: 10px 15px;
border-bottom: 1px solid #ddd;
}
.chart {
width: 100%; 
min-height: 650px;
}