/* Custom card styling กาดเนื้อหาโค้งของกาด 8 บท 
*/
.custom-card {
    background-color: #001f3e; /* Custom blue color */
    color: #000000; /* White text color for contrast */
    border: none; /* Remove default border */
    border-radius: 8px; /* Rounded corners for entire card */
    box-shadow: 0 4px 8px rgb(0, 0, 0); /* Subtle shadow */
    margin-bottom: 20px; /* Space between cards */
    overflow: hidden; /* Ensures children elements adhere to rounded corners */
}

/* Style for card body */
.custom-card .card-body {
    background-color: #ffffff; /* Darker background color */
    padding: 20px; /* Add padding inside the card body */
    border-radius: 8px; /* Match the border radius of the card */
}

/* Style for card title */
.custom-card .card-title {
    color: #000000; /* White text color for title */
    font-size: 1.25rem; /* Slightly larger font size for the title */
    font-weight: bold; /* Bold text for emphasis */
    margin-bottom: 15px; /* Space below the title */
}

/* Style for card text */
.custom-card .card-text {
    color: #ffffff; /* Slightly lighter text for readability */
    font-size: 0.875rem; /* Slightly smaller font size for body text */
    line-height: 1.6; /* Increase line-height for better readability */
}

/* Style for card image */
.custom-card .card-img-bottom {
    border-top: 1px solid #fff4f4; /* Darker border for image section */
    border-radius: 0 0 8px 8px; /* Rounded corners for bottom of the card */
}

.btn-gradient {
    background: linear-gradient(45deg, #eeff00, #00ff62); /* Gradient from pink to orange ไล่สีปุ่ม */
    color: #000000; /* White text color */
    border: none; /* Remove default border */
    font-size: 1rem; /* Adjust font size if needed */
    padding: 10px 20px; /* Adjust padding for better button appearance */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Ensure the button is an inline block */
    border-radius: 5px; /* Rounded corners */
    transition: background 0.3s ease; /* Smooth transition for hover effect */
}

.btn-gradient:hover {
    background: linear-gradient(45deg, #04ff00, #2200a9); /* Reverse gradient on hover */
}




ของchap
.custom-card {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.custom-card:hover {
    transform: translateY(-5px);
}

.custom-card img {
    border-radius: 10px 10px 0 0;
}

.card {
    border: none; /* ไม่มีขอบการ์ด */
    border-radius: 15px; /* มุมโค้งมน */
    overflow: hidden; /* ทำให้ภาพไม่เกินขอบ */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* เงาของการ์ด */
    transition: transform 0.3s, box-shadow 0.3s; /* เพิ่มการเคลื่อนไหว */
}

.card:hover {
    transform: translateY(-5px); /* การเคลื่อนไหวเมื่อเลื่อนเมาส์ */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* เงาที่ชัดเจนขึ้น */
}

.card-img-top {
    border-radius: 5px 5px 0 0; /* มุมโค้งมนที่มุมบนของรูปภาพ */
}

.card-body {
    padding: 15px;
}
.navbar-nav {
    margin-left: auto; /* ทำให้เมนูชิดขวา */
}
.navbar-nav .nav-item {
    margin: 0 10px; /* ระยะห่างระหว่างไอเท็มเมนู */
}


/**/


/* ปรับขนาดสูงสุดของ Carousel */
.carousel {
    max-width: 80%; /* กำหนดให้ Carousel มีขนาดสูงสุดเป็น 80% ของ container */
    margin: auto; /* จัดตำแหน่งกลาง */
    margin-top: 100px; /* เพิ่มระยะห่างด้านบนให้ Carousel ห่างจาก navbar */
}

/**/
/* ตกแต่งปุ่มควบคุม Carousel */
.carousel-control-prev,
.carousel-control-next {
    background-color: rgba(0, 0, 0, 0.5); /* สีพื้นหลังของปุ่ม */
    border-radius: 50%; /* ทำให้ปุ่มเป็นทรงกลม */
    width: 50px; /* ขนาดปุ่ม */
    height: 50px; /* ขนาดปุ่ม */
    display: flex; /* ใช้ flexbox สำหรับจัดตำแหน่ง */
    align-items: center; /* จัดตำแหน่งเนื้อหาในแนวตั้ง */
    justify-content: center; /* จัดตำแหน่งเนื้อหาในแนวนอน */
    z-index: 1; /* จัดลำดับชั้นของปุ่มให้สูงกว่าภาพ */
    opacity: 0.8; /* ความโปร่งใสของปุ่ม */
    transition: background-color 0.3s, opacity 0.3s; /* การเปลี่ยนแปลงเมื่อชี้เมาส์ */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: red; /* สีพื้นหลังของไอคอนลูกศร */
    color: white; /* สีของลูกศร */
    border-radius: 50%; /* ทำให้ไอคอนเป็นทรงกลม */
    padding: 10px; /* การจัดระยะห่างภายในไอคอน */
    font-size: 20px; /* ขนาดของลูกศร */
  
}
 /*  /ปุ่มม**/ 

     .btn-link-custom {
         color: yellow; /* ตัวหนังสือสีเหลือง */
         background-color: #007bff; /* สีพื้นหลังฟ้า */
         border: 1px solid #007bff; /* สีขอบฟ้า */
         font-weight: bold; /* ตัวหนังสือหนา */
         text-align: center; /* จัดตำแหน่งตัวหนังสือให้ตรงกลาง */
         padding: 10px 20px; /* เพิ่ม padding ให้ปุ่มดูใหญ่ขึ้น */
         border-radius: 4px; /* มุมปุ่มโค้งมน */
         text-decoration: none; /* ลบเส้นขีดใต้ลิ้งค์ */
         display: inline-block; /* ให้ปุ่มปรับขนาดตามเนื้อหา */
     }
     .btn-link-custom:hover {
         color: yellow; /* สีตัวหนังสือเมื่อวางเมาส์ */
         background-color: #0056b3; /* สีพื้นหลังเข้มขึ้นเมื่อวางเมาส์ */
         border-color: #0056b3; /* สีขอบเข้มขึ้นเมื่อวางเมาส์ */
         text-decoration: none; /* ลบเส้นขีดใต้ลิ้งค์เมื่อวางเมาส์ */
     }