/* กำหนดสีหลักสำหรับ Bootstrap Variables ใหม่ */
:root {
    --bs-primary: #D34C94; /* ชมพูเข้ม/บานเย็น (สีหลัก) */
    --bs-secondary: #003366; /* น้ำเงินเข้ม (สีรอง/พื้นหลัง Header/Footer) */
    --bs-link-color: #D34C94; /* สีลิงก์เป็นชมพูเข้ม */
}

/* Navbar/Header Customization: ใช้สีน้ำเงินเข้มเป็นพื้นหลังเพื่อให้ตัดกับส่วนเนื้อหา */
.navbar-custom {
    background-color: var(--bs-secondary) !important; /* น้ำเงินเข้ม */
}
.navbar-custom .nav-link, .navbar-custom .navbar-brand {
    color: #FFFFFF !important;
}
.navbar-custom .nav-link:hover {
    color: var(--bs-primary) !important; /* ชมพูเข้มเมื่อโฮเวอร์ */
}

/* Button Customization: ปุ่มหลักเป็นสีชมพูเข้ม */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.btn-primary:hover {
    background-color: #A33B76; /* ชมพูเข้มขึ้นอีกเมื่อโฮเวอร์ */
    border-color: #A33B76;
}

/* Hero Section: อาจใช้สีชมพูอ่อนๆ หรือพื้นหลังสีขาวเพื่อให้ข้อความชัดเจน */
.hero-section {
    background-color: #FFE5EE; /* ชมพูอ่อนมาก */
    padding: 100px 0;
}
.hero-section h1 span {
    color: var(--bs-secondary); /* ชื่อสำนักงานใช้สีน้ำเงินเข้ม */
}

/* Card Links Section (ระบบงาน): เน้นด้วยเส้นขอบสีชมพูเข้ม */
.card-system-link {
    border-top: 5px solid var(--bs-primary); 
    transition: transform 0.3s ease;
}
.card-system-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(211, 76, 148, 0.2); /* เงาสีชมพูเข้ม */
}
.card-system-link .bi {
    color: var(--bs-primary) !important; /* ไอคอนใน Card เป็นสีชมพูเข้ม */
}

/* Footer: ใช้สีน้ำเงินเข้มเหมือน Header */
.bg-primary { /* Bootstrap Class ที่ใช้ใน Footer */
    background-color: var(--bs-secondary) !important; 
}
.bg-primary .text-secondary { /* ใช้สีชมพูเข้มสำหรับเน้นใน Footer */
    color: var(--bs-primary) !important; 
}