/* Header Styles - k653 Style */
.header { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.topbar { background: #f5f5f5; border-bottom: 1px solid #eee; }
.topbar .inner { max-width: 1200px; margin: 0 auto; padding: 8px 15px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #666; }
.topbar a { color: #666; }
.topbar a:hover { color: #2b6cb0; }
#pagelist ul { display: flex; gap: 20px; list-style: none; }
#pagelist ul li a { color: #666; }

#header { background: #fff; }
#header .inner { max-width: 1200px; margin: 0 auto; padding: 15px; display: flex; align-items: center; justify-content: space-between; }
#logo img { height: 50px; }
#topBtn { display: flex; gap: 10px; }
#topBtn .btn { width: 40px; height: 40px; background: #f5f5f5; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#topBtn .btn i { width: 20px; height: 2px; background: #333; position: relative; }
#topBtn .btn i::before, #topBtn .btn i::after { content: ''; position: absolute; width: 20px; height: 2px; background: #333; left: 0; }
#topBtn .btn i::before { top: -6px; }
#topBtn .btn i::after { bottom: -6px; }

.clear { clear: both; }

/* Navigation */
#nav { background: #2b6cb0; }
#nav .inner { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
#nav ul { display: flex; list-style: none; flex-wrap: wrap; }
#nav ul li a { display: block; padding: 15px 20px; color: #fff; font-size: 15px; font-weight: 500; transition: background 0.2s; }
#nav ul li a:hover, #nav ul li.current-menu-item a { background: #1a4a8a; }

@media (max-width: 768px) {
    .topbar .inner { flex-direction: column; gap: 8px; text-align: center; }
    #header .inner { flex-direction: column; gap: 15px; }
    #logo { text-align: center; }
    #nav ul { flex-direction: column; }
    #nav ul li a { padding: 12px 15px; border-bottom: 1px solid rgba(255,255,255,0.1); }
}