diff --git a/README.md b/README.md
index bc73192..a6a2187 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,7 @@
### 👥 4. ระบบจัดการตัวละคร (Avatars & Character Builder)
- **ข้อมูลครบถ้วน:** ครอบคลุมตัวละครทั้งหมดในเกมตาม Resource มาตรฐานและเนื้อหาล่าสุด
+- **คู่มือ Build รายตัว:** เปิดดูกรวยแสง, เซ็ตรีลิกส์/มิติ และออฟหลักที่พบบ่อยจากข้อมูลตัวอย่าง Endgame พร้อมโหมด/จำนวนตัวอย่าง วันที่เก็บข้อมูล และลิงก์คู่มือเต็มของ Prydwen
- **ปรับแต่งสถานะ:** เลเวล (1-80), เลื่อนขั้น (Ascension 0-6), ระดับ Eidolon (E0-E6), และร่องรอยสกิล (Traces 10/10)
- **ปุ่มลัดจัดการด่วน:**
- ⚡ *ปรับ E0S1 ทุกตัว:* ตั้งค่าตัวละครทุกตัวเป็น E0 พร้อมกรวยแสงประจำตัว S1 เลเวล 80
@@ -122,3 +123,9 @@ GaC-Srtool สื่อสารกับเซิร์ฟเวอร์ GaC-h
### บันทึกตัวละครและ Traces
การบันทึกจากหน้ารายละเอียดส่งข้อมูลตัวละครทั้งชุดผ่าน `/api/freesr` ในคำขอเดียว รวมถึง `data.skills` และ `data.skills_by_anchor_type` สำหรับ Traces เพื่อไม่ให้ server sync ข้อมูลระดับ/Eidolon ระหว่างทางก่อนข้อมูล Trace จะถูกบันทึก `saveAvatarDetails(closeModal = true)` ยังรองรับการเรียกจากปุ่ม build ที่ไม่ต้องปิดหน้าต่าง ถ้า server ตอบผิดพลาดจะแสดงข้อความบันทึกไม่สำเร็จแทนการแจ้งว่าสำเร็จ
+
+### ข้อมูล Build และแหล่งที่มา
+
+หน้า **รายละเอียดตัวละคร → แนวทางบิลด์** แสดงอุปกรณ์และออฟหลักที่พบบ่อยในตัวอย่าง Endgame จากข้อมูลที่แสดงบน Prydwen โดยใส่โหมด/จำนวนผู้เล่นและวันที่เก็บ snapshot ไว้กำกับ ตัวเลขเป็นสัดส่วนการใช้งานในกลุ่มตัวอย่าง ไม่ใช่คะแนนจัดอันดับหรือคำแนะนำทางการ ตัวละครที่ snapshot ไม่มีตัวอย่างจะแสดงลิงก์ไปคู่มือของ Prydwen แทนการแสดงข้อมูลสำรองที่อาจทำให้เข้าใจผิด
+
+ข้อมูลที่สร้างไว้ใน `js/build-guides-data.js` ใช้ชุดข้อมูล MIT จาก [LvlUrArti/MocDataProcessed](https://huggingface.co/datasets/LvlUrArti/MocDataProcessed) ซึ่งระบุว่าเป็นข้อมูลที่ประมวลผลจากเว็บไซต์ Prydwen โปรดให้เครดิต LvlUrArti เมื่อเผยแพร่หรือวิเคราะห์ข้อมูลต่อ สามารถอัปเดต snapshot ด้วย `npm run sync-build-guides` ได้ โดยสคริปต์จะเลือกเวอร์ชันล่าสุดที่มีใน dataset และจับคู่ตัวละครตาม ID จาก `js/avatars-data.js`.
diff --git a/css/styles.css b/css/styles.css
index b3e0bae..da80375 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -3209,3 +3209,137 @@ input:checked + .slider:before {
flex-shrink: 0;
opacity: 0.85;
}
+
+.build-guide-content {
+ display: flex;
+ flex-direction: column;
+ gap: 0.8rem;
+}
+
+.build-guide-topline,
+.build-guide-footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.75rem;
+ flex-wrap: wrap;
+}
+
+.build-guide-title {
+ color: var(--text-highlight);
+ font-size: 1.05rem;
+ font-weight: 800;
+}
+
+.build-guide-meta,
+.build-guide-note,
+.build-guide-sample,
+.build-guide-footer {
+ color: var(--text-muted);
+ font-size: 0.78rem;
+}
+
+.build-guide-note {
+ margin: 0;
+ line-height: 1.55;
+}
+
+.build-guide-sample {
+ display: inline-flex;
+ align-self: flex-start;
+ border: 1px solid rgba(56, 189, 248, 0.28);
+ border-radius: 999px;
+ background: rgba(56, 189, 248, 0.08);
+ color: #bae6fd;
+ padding: 0.3rem 0.7rem;
+}
+
+.build-guide-low-sample {
+ color: var(--accent-gold);
+ font-size: 0.75rem;
+}
+
+.build-guide-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0.7rem;
+}
+
+.build-guide-card {
+ min-width: 0;
+ padding: 0.85rem;
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-sm);
+ background: rgba(18, 24, 38, 0.72);
+}
+
+.build-guide-card h4 {
+ margin: 0 0 0.6rem;
+ color: var(--accent-cyan);
+ font-size: 0.85rem;
+}
+
+.build-guide-ranked-list {
+ display: flex;
+ flex-direction: column;
+ gap: 0.4rem;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.build-guide-ranked-list li {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 0.6rem;
+ font-size: 0.78rem;
+ line-height: 1.4;
+}
+
+.build-guide-ranked-list li span {
+ min-width: 0;
+}
+
+.build-guide-ranked-list li strong {
+ flex-shrink: 0;
+ color: var(--accent-gold);
+ font-size: 0.72rem;
+}
+
+.build-guide-empty,
+.build-guide-no-data {
+ color: var(--text-muted);
+ font-size: 0.78rem;
+ line-height: 1.5;
+}
+
+.build-guide-stat-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 0.65rem;
+}
+
+.build-guide-stat-grid > div > span {
+ display: block;
+ margin-bottom: 0.4rem;
+ color: var(--text-muted);
+ font-size: 0.72rem;
+ font-weight: 700;
+}
+
+.build-guide-footer {
+ border-top: 1px solid var(--border-color);
+ padding-top: 0.65rem;
+}
+
+.build-guide-footer a:not(.btn) {
+ color: var(--accent-cyan);
+}
+
+@media (max-width: 640px) {
+ .build-guide-grid,
+ .build-guide-stat-grid {
+ grid-template-columns: minmax(0, 1fr);
+ }
+}
diff --git a/index.html b/index.html
index 82c6a5c..f0c14f7 100644
--- a/index.html
+++ b/index.html
@@ -869,6 +869,9 @@
+
@@ -1317,6 +1320,11 @@
+
+
+