@charset "utf-8";

/* บังคับฟอนต์ */
* { font-family: 'Bai Jamjuree', sans-serif; box-sizing: border-box; }

/* พื้นหลังสีเบจ (Theme เดียวกับ Home/ITA) */
body {
    background-color: #f4f1ea !important;
    margin: 0; padding: 0;
    color: #333;
}

/* --- 1. Header Banner --- */
.header-parallax {
    position: relative;
    height: 50vh; min-height: 350px;
    background-size: cover; background-position: center; background-attachment: fixed;
    display: flex; justify-content: center; align-items: center; text-align: center;
}
/* ใส่ Overlay สีดำอมแดงจางๆ เพื่อให้อ่านตัวหนังสือออก */
.header-overlay {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background: linear-gradient(135deg, rgba(97, 5, 5, 0.8), rgba(0,0,0,0.6));
    z-index: 1;
}
.header-con {
    position: relative; z-index: 2; padding: 20px;
}
.header-con h1 {
    font-size: 3.5rem; font-weight: 800; color: #FFD700;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8); margin-bottom: 10px;
}
.header-con p {
    font-size: 1.3rem; color: #fff; font-weight: 300; letter-spacing: 1px;
}

/* --- 2. Image Box (กล่องรูป) --- */
.section-padding { padding: 50px 0; position: relative; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 15px; }

.history-img-box {
    text-align: center; 
    margin-bottom: 60px; 
    padding: 15px;
    background: #fff; /* พื้นหลังขาว */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid #b8860b; /* ขอบทองบางๆ */
}
.history-img-box img {
    max-width: 100%; height: auto; border-radius: 10px;
}

/* --- 3. Timeline Structure --- */
.timeline-container {
    position: relative;
    padding-left: 50px;
    max-width: 900px; margin: 0 auto;
}
/* เส้นแกนกลาง */
.timeline-container::before {
    content: '';
    position: absolute; left: 19px; top: 0; bottom: 0;
    width: 4px; background: rgba(184, 134, 11, 0.3); /* สีทองจางๆ */
    border-radius: 2px;
}

.timeline-item { position: relative; margin-bottom: 60px; }

/* ไอคอนวงกลม */
.timeline-icon {
    position: absolute; left: -51px; top: 0;
    width: 44px; height: 44px;
    background: #610505; /* สีเลือดหมู */
    color: #FFD700; /* ไอคอนสีทอง */
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.2rem;
    box-shadow: 0 0 0 6px #f4f1ea; /* วงแหวนสีเบจตัดเส้น */
    z-index: 2;
}

/* --- 4. History Card (การ์ดเนื้อหา) --- */
.history-card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s;
}
.history-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(97, 5, 5, 0.1);
    border-color: #b8860b;
}

/* หัวข้อการ์ด */
.card-header-badge {
    background: linear-gradient(135deg, #961919, #610505); /* แดงเลือดหมู */
    padding: 15px 30px;
    border-bottom: 4px solid #b8860b; /* แถบทอง */
}
.card-header-badge h3 {
    color: #fff; font-size: 1.4rem; font-weight: 700; margin: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* เนื้อหา */
.card-body-text { padding: 30px; }
.card-body-text p {
    font-size: 1.05rem; line-height: 1.8; color: #444; margin-bottom: 15px;
    text-align: justify; text-indent: 2em;
}

/* คำคม/Quote */
.history-quote {
    background: #fffbf0; /* เหลืองอ่อนๆ */
    padding: 20px 30px;
    border-left: 5px solid #FFD700;
    border-radius: 5px;
    font-style: italic; color: #5e4b35;
    margin: 20px 0;
}

/* รายการ List */
.history-list { list-style: none; padding: 0; }
.history-list li {
    margin-bottom: 20px; padding-left: 25px; position: relative;
    border-bottom: 1px dashed #eee; padding-bottom: 15px;
}
.history-list li:last-child { border-bottom: none; }
.history-list li::before {
    content: '✦'; color: #b8860b; 
    position: absolute; left: 0; top: 2px; font-size: 1.1rem;
}
.history-list strong { color: #610505; font-size: 1.1rem; }

/* หัวข้อย่อย */
.history-sub-section h4 {
    color: #610505; font-size: 1.2rem; font-weight: 700;
    margin-top: 15px; margin-bottom: 10px;
    display: inline-block; border-bottom: 2px solid #b8860b;
}

/* --- 5. Footer Wave --- */
.custom-shape-divider-footer-down {
    position: absolute; bottom: 0; left: 0; width: 100%;
    overflow: hidden; line-height: 0;
}
.custom-shape-divider-footer-down svg {
    position: relative; display: block; width: calc(130% + 1.3px); height: 80px;
}
.custom-shape-divider-footer-down .shape-fill { fill: #f4f1ea; }

/* Responsive */
@media (max-width: 768px) {
    .header-con h1 { font-size: 2rem; }
    .timeline-container { padding-left: 0; }
    .timeline-container::before { display: none; }
    .timeline-icon {
        position: relative; left: 0; margin: 0 auto 15px;
        width: 50px; height: 50px;
    }
    .timeline-item { text-align: center; }
    .card-body-text p { text-align: left; }
}