:root {
    --at-red: #c0101c; /* แดงออสเตรีย */
    --at-gold: #a68a56;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --bg-light: #f8fafc;
}

.toc-container { max-width: 900px; margin: 40px auto; padding: 20px; font-family: 'Prompt', sans-serif; }

/* Language Nav */
.lang-nav { display: flex; gap: 10px; margin-bottom: 30px; justify-content: flex-end; }
.lang-btn { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: 20px; text-decoration: none; color: var(--text-light); transition: 0.3s; font-size: 14px; }
.lang-btn.active { background: var(--at-red); color: white; border-color: var(--at-red); }
.lang-btn img { width: 18px; border-radius: 2px; }

/* Chapter Styling */
/* Header แบบเลื่อนตาม (Sticky) */
.toc-header {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    background-color: rgba(255, 255, 255, 0.95); /* ขาวแบบโปร่งแสงนิดๆ */
    backdrop-filter: blur(10px); /* เอฟเฟกต์กระจกฝ้า (สวยมาก) */
    padding: 15px 20px;
    margin-bottom: 30px;
    z-index: 1000; /* ให้อยู่เหนือเนื้อหาอื่นๆ */
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-radius: 0 0 12px 12px; /* โค้งมนด้านล่างนิดๆ */
}

.toc-header h1 {
    font-size: 1.5rem;
    margin: 0;
    color: var(--at-red);
    font-weight: 700;
}

/* ปรับระยะขอบของเนื้อหาหลักไม่ให้โดน Header บัง */
.toc-main-content {
    padding-top: 10px;
}

/* ปรับ Lang Nav ให้เข้าไปอยู่ใน Header เลยถ้าต้องการ */
.toc-header .lang-nav {
    margin-bottom: 0; /* เอา margin เดิมออก */
}

/* ใส่เส้นสีแดงแนวตั้งและปรับระยะขอบ */
.chapter-title-box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding: 10px 0 10px 15px; /* เพิ่ม Padding ด้านซ้าย (15px) เพื่อให้มีที่ว่างสำหรับเส้น */
    border-left: 4px solid var(--at-red); /* ใส่เส้นสีแดงแนวตั้งหนา 4px */
    border-bottom: 2px solid #e2e8f0; /* ยังคงเส้นใต้ไว้เหมือนเดิม */
    background-color: #fef2f2; /* เพิ่มพื้นหลังสีแดงอ่อนๆ (Optional) ช่วยให้เด่นขึ้นอีก */
    border-radius: 4px 0 0 4px; /* ทำมุมโค้งมนที่เส้นสีแดงนิดๆ */
}

/* ปรับสไตล์ตัวเลขบทที่ให้เข้ากับเส้น */
.chapter-num {
    background: var(--at-red); /* เปลี่ยนพื้นหลังตัวเลขเป็นสีแดงเดียวกับเส้น */
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
}

/* ปรับสไตล์หัวข้อบทที่ */
.chapter-title-box h2 {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin: 0;
    font-weight: 700;
}

/* Accordion Styling */
.sitemap-accordion { background: white; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 10px; overflow: hidden; transition: 0.3s; }
.sitemap-accordion[open] { border-color: var(--at-red); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.main-cat-trigger { padding: 15px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--text-dark); list-style: none; }
.main-cat-trigger::-webkit-details-marker { display: none; }
.item-badge { background: var(--bg-light); color: var(--text-light); padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: normal; }

.accordion-body { padding: 10px 20px 25px; border-top: 1px solid #f1f5f9; }
.sub-cat-title { color: var(--at-gold); margin: 20px 0 10px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }

/* The Dot Connector */
.toc-list { list-style: none; padding: 0; }
.toc-list li { margin-bottom: 12px; }
.toc-list li a { display: flex; align-items: baseline; text-decoration: none; color: var(--text-dark); transition: 0.2s; }
.toc-list li a:hover { color: var(--at-red); }
.item-title { flex-shrink: 0; max-width: 80%; }
.item-dots { flex-grow: 1; border-bottom: 1px dotted #cbd5e1; margin: 0 10px; height: 1px; }

/* Static list in Chapter 3 */
.static-list { margin-top: 20px; }