@font-face {
    font-family: 'Sarabun';        
    src: url('../font/sarabun-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Sarabun', sans-serif;
}

.chart-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 280px;
    margin: auto;
}

@media (min-width: 768px) {
    .chart-container {
        height: 350px;
    }
}

.tab-active {
    border-color: #8B5CF6; /* a shade of purple */
    background-color: #8B5CF6;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
    transform: translateY(-2px) scale(1.02); /* Slight lift */
}

.tab-inactive {
    border-color: #E5E7EB; /* gray-200 */
    background-color: #F9FAFB; /* gray-50 */
    color: #4B5563; /* gray-600 */
}

.content-panel {
    display: none;
}

.diagram-box {
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08); /* Slightly more prominent shadow */
    padding: 1.75rem; /* More padding */
    border-radius: 0.75rem; /* Consistent border radius */
}

    .diagram-box:hover {
        transform: translateY(-8px) scale(1.02); /* More noticeable lift and slight scale */
        box-shadow: 0 15px 25px -5px rgba(139, 92, 246, 0.3), 0 6px 10px -3px rgba(139, 92, 246, 0.15); /* Stronger shadow */
        border-color: #A78BFA; /* Light purple border on hover */
    }

.flowchart-step {
    position: relative;
    padding-right: 2.5rem; /* Space for the arrow */
}

    .flowchart-step:not(:last-child)::after {
        content: '→';
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.5rem;
        color: #9CA3AF; /* gray-400 */
    }

.checklist-item-header {
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-bottom: 1px solid #E5E7EB;
    padding: 1.25rem 1.5rem; /* More padding for header */
    font-size: 1.125rem; /* text-lg */
}

    .checklist-item-header.active {
        background-color: #EDE9FE; /* violet-100 */
        color: #5B21B6; /* violet-800 */
        border-bottom: none;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtle shadow on active header */
    }

.checklist-item-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    padding: 0 1.5rem; /* Initial padding */
}

    .checklist-item-body p {
        padding-bottom: 1.25rem; /* Padding for content inside body */
    }

.section-image {
    width: 100%;
    height: auto;
    max-height: 400px; /* Increased limit for more visual impact */
    object-fit: cover; /* Changed to cover for better filling */
    margin: 3rem auto; /* Increased margin */
    border-radius: 1.25rem; /* Larger border-radius */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); /* Stronger shadow */
    display: block;
    border: 2px solid #ddd; /* More prominent border */
    filter: brightness(0.95); /* Slightly dim for aesthetic */
}

.content-box {
    background-color: #F8FAFC; /* Light gray for content boxes */
    border-radius: 1rem; /* Larger border-radius */
    padding: 2rem; /* More padding */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05); /* More prominent inset shadow */
    border: 1px solid #E0E7FF; /* Light blue border */
}

.section-intro {
    margin-bottom: 2.5rem; /* More margin */
    font-size: 1.25rem; /* text-xl */
    line-height: 2rem; /* leading-8 */
    color: #4A5568; /* gray-700 */
    font-weight: 500; /* Medium font weight */
}

.section-highlight {
    background-color: #F0F4FF; /* Light blue background for highlights */
    border-left: 5px solid #6D28D9; /* Darker violet border */
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin-top: 1.5rem;
    color: #312E81; /* Darker blue text */
    font-weight: 600;
}

ul.list-disc.list-inside li {
    margin-bottom: 0.5rem; /* Space between list items */
}