@charset "utf-8";
body {  
font-family: 'Kanit', sans-serif;
font-size: 16px;        
}   
p {
line-height: 2rem;
margin-top:0px;
font-family: 'Kanit', sans-serif;	
}
h1, .h1 {
font-family: 'Kanit', sans-serif;	
line-height: 2rem;
margin-top:0px;
}
h2, .h2 {
font-family: 'Kanit', sans-serif;	
line-height: 2rem;
margin-top:0px;
}
h3, .h3 {
font-family: 'Kanit', sans-serif;	
line-height: 2rem;
margin-top:0px;
}
h4, .h4 {
font-family: 'Kanit', sans-serif;	
line-height: 2rem;
margin-top:0px;
}
h5, .h5 {
font-family: 'Kanit', sans-serif;	
line-height: 2rem;
margin-top:0px;
}
h6, .h6 {
font-family: 'Kanit', sans-serif;	
line-height: 2rem;
margin-top:0px;
}  
.doubleUnderline {
border-bottom: 3px double;
}
.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: #f3e1c3; /* สีอ่อนของโทน #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: #f3e1c3 !important; 
cursor: pointer;
transition: background-color 0.3s ease;
}	
.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: #EDD08C !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;
}
.chart {
width: 100%; 
min-height: 650px;
}