#timeline-container{-webkit-backdrop-filter:blur(30px)saturate(150%);z-index:100;background:#1e1e1e66;border:1px solid #ffffff2e;border-bottom:none;border-radius:20px 20px 0 0;width:90%;max-width:1400px;transition:height .4s cubic-bezier(.4,0,.2,1);position:fixed;bottom:0;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 -8px 32px #0006}.timeline-collapsed{height:130px}.timeline-expanded{height:40vh;max-height:500px}#timeline-toggle{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fffffff2;cursor:pointer;font-family:var(--font-cinzel),var(--font-sarabun),serif;z-index:101;background:#8b451399;border:1px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:14px;font-weight:600;transition:all .3s;display:flex;box-shadow:0 2px 8px #0000004d}#timeline-toggle:hover{background:#6b3410bf;transform:scale(1.05);box-shadow:0 4px 12px #0006}#timeline-content{height:100%;padding:60px 40px 20px;overflow-y:auto}.year-display{color:#fffffff2;text-shadow:0 2px 8px #00000080;font-size:1.8em;font-weight:700;font-family:var(--font-cinzel),var(--font-sarabun),serif;position:absolute;top:15px;left:30px}.slider-track{margin:20px 0 10px;position:relative}#timeline-slider{appearance:none;cursor:pointer;background:linear-gradient(90deg,#d4af37 0%,#8b4513 100%);border-radius:5px;outline:none;width:100%;height:6px}#timeline-slider::-webkit-slider-thumb{appearance:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);cursor:pointer;background:#8b4513cc;border:3px solid #ffffffe6;border-radius:50%;width:20px;height:20px;transition:transform .2s;box-shadow:0 2px 8px #0000004d}#timeline-slider::-webkit-slider-thumb:hover{transform:scale(1.3)}.dots-container{align-items:center;gap:11.1px;height:60px;margin:15px 0;padding:0 10px;display:flex;position:relative;overflow:visible}.timeline-dot{cursor:pointer;transform-origin:bottom;background:linear-gradient(135deg,#8b4513 0%,sienna 100%);border:2px solid #ffffffe6;border-radius:50%;flex-shrink:0;width:12px;height:12px;transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .2s,box-shadow .2s;position:absolute;box-shadow:0 2px 8px #0000004d,inset 0 1px 2px #ffffff4d}.timeline-dot.active{background:linear-gradient(135deg,#d4af37 0%,gold 100%);border-color:gold;box-shadow:0 0 20px #d4af37cc,0 0 40px #d4af3766,inset 0 1px 2px #ffffff80}.year-labels{height:25px;margin-top:10px;position:relative}.year-label{color:#fffc;text-shadow:0 1px 3px #00000080;font-size:12px;font-family:var(--font-cinzel),var(--font-sarabun),serif;white-space:nowrap;position:absolute;transform:translate(-50%)}.timeline-nav{z-index:102;align-items:center;gap:10px;padding:0;display:flex;position:absolute;top:15px;right:180px}.nav-btn{-webkit-backdrop-filter:blur(15px)saturate(150%);backdrop-filter:blur(15px)saturate(150%);color:#fffffff2;cursor:pointer;font-family:var(--font-cinzel),var(--font-sarabun),serif;background:#8b451380;border:1px solid #d4af3766;border-radius:25px;justify-content:center;align-items:center;gap:8px;min-width:110px;height:40px;padding:10px 20px;font-size:13px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 3px 10px #00000059,inset 0 1px #ffffff26}.nav-btn:hover:not(:disabled){background:#6b3410b3;border-color:#d4af37b3;transform:translateY(-2px)scale(1.05)}.nav-btn:disabled{opacity:.3;cursor:not-allowed}.nav-btn-text{letter-spacing:.3px;font-size:12px}@media (max-width:768px){#timeline-container{border-left:none;border-right:none;border-radius:20px 20px 0 0;width:100%;padding-bottom:0;left:0;transform:none}.timeline-nav{gap:8px;top:60px;right:10px}.nav-btn{border-radius:50%;width:36px;min-width:36px;height:36px;padding:0}.nav-btn-text{display:none}.nav-btn svg{width:18px;height:18px}#timeline-toggle{font-size:12px}.year-display{font-size:1.4rem;top:15px;left:20px}#timeline-content{padding:50px 15px 20px}}#timeline-content::-webkit-scrollbar{width:6px}#timeline-content::-webkit-scrollbar-track{background:#0003;border-radius:3px}#timeline-content::-webkit-scrollbar-thumb{background:#8b451399;border:1px solid #d4af374d;border-radius:3px}#timeline-content::-webkit-scrollbar-thumb:hover{background:#8b4513e6;border-color:#d4af3799}
@media (max-width:768px){#timeline-container{border-left:none;border-right:none;border-radius:0;width:100%;max-width:100%;left:0;transform:none}.timeline-collapsed{height:140px}.timeline-expanded{height:400px}#timeline-toggle{padding:8px;font-size:12px;top:10px;right:15px}#timeline-content{padding:50px 20px 15px}.year-display{font-size:1.4em;top:10px;left:15px}.dots-container{gap:8px;height:50px;padding:0 5px}.timeline-dot{width:10px;height:10px;transform:scale(1)!important}.timeline-nav{gap:12px;bottom:12px}.nav-btn{min-width:90px;padding:8px 14px;font-size:11px}.nav-btn-text{font-size:11px}.nav-btn svg{width:16px;height:16px}.year-labels{height:20px;margin-top:8px}.year-label{font-size:10px}.event-list-item{padding:8px 12px;font-size:12px}}@media (max-width:480px){.timeline-collapsed{height:120px}.timeline-expanded{height:350px}.year-display{font-size:1.2em}.dots-container{gap:6px}.timeline-dot{width:8px;height:8px}.nav-btn{min-width:80px;padding:6px 12px;font-size:10px}.nav-btn-text{display:none}}@media (hover:none) and (pointer:coarse){.timeline-dot{width:14px;height:14px}.timeline-dot.active{width:18px;height:18px}.nav-btn{min-height:44px;padding:12px 18px}#timeline-toggle{padding:10px}}
#nprogress{pointer-events:none}#nprogress .bar{z-index:1031;background:#29d;width:100%;height:2px;position:fixed;top:0;left:0}#nprogress .peg{opacity:1;width:100px;height:100%;display:block;position:absolute;right:0;transform:rotate(3deg)translateY(-4px);box-shadow:0 0 10px #29d,0 0 5px #29d}#nprogress .spinner{z-index:1031;display:block;position:fixed;top:15px;right:15px}#nprogress .spinner-icon{box-sizing:border-box;border:2px solid #0000;border-color:#29d #0000 #0000 #29d;border-radius:50%;width:18px;height:18px;animation:.4s linear infinite nprogress-spinner}.nprogress-custom-parent{position:relative;overflow:hidden}.nprogress-custom-parent #nprogress .spinner,.nprogress-custom-parent #nprogress .bar{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
