body {margin:0; font-family:Arial, sans-serif; background:#f7f7f7;}
.container {max-width:1200px; margin:0 auto; padding:0 15px;}
/* Header */
.site-header {background:#0B3D91; color:#fff; position:sticky; top:0; z-index:999;}
.header-container {display:flex; justify-content:space-between; align-items:center; padding:10px 0;}
.logo img {height:50px;}
.nav-bar ul {list-style:none; display:flex; margin:0; padding:0;}
.nav-bar ul li {position:relative;}
.nav-bar ul li a {color:#fff; text-decoration:none; padding:10px 15px; display:block;}
.nav-bar ul li a:hover {background:#1749A4;}
.dropdown-menu {display:none; position:absolute; top:100%; left:0; background:#fff; min-width:150px; box-shadow:0 4px 8px rgba(0,0,0,0.1);}
.dropdown-menu li a {color:#333; padding:10px;}
.dropdown:hover .dropdown-menu {display:block;}
.header-right {display:flex; align-items:center;}
.header-right a {color:#FFD700; margin-right:15px; text-decoration:none;}
.header-right button {background:#1749A4; border:none; color:#fff; padding:8px 12px; cursor:pointer;}
.menu-toggle {display:none; font-size:24px; color:#fff; cursor:pointer;}
/* Responsive */
@media(max-width:992px){
  .nav-bar ul {flex-direction:column; display:none; background:#0B3D91; position:absolute; top:60px; left:0; width:100%;}
  .nav-bar ul.active {display:flex;}
  .menu-toggle {display:block;}
}

/* Main */
.main-container {display:flex; gap:20px; margin-top:20px;}
.content {flex:3; background:#fff; padding:20px; border-radius:6px;}
.sidebar {flex:1; background:#fff; padding:20px; border-radius:6px;}
.section-title {font-size:22px; color:#0B3D91; margin-bottom:10px;}
.popular-grid {display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.name-card {background:#f1f1f1; padding:10px; border-radius:6px;}
.name-card h4 {margin-bottom:8px;}
.name-btn {display:inline-block; margin:3px; padding:5px 10px; border-radius:4px; text-decoration:none;}
.name-boy {background:#cce4ff; color:#0B3D91;}
.name-girl {background:#ffe0f0; color:#d63384;}
.view-all {display:block; margin-top:10px; color:#0B3D91; text-decoration:none;}

/* Sidebar */
.tool-box {margin-bottom:20px;}
.tool-box h3 {margin-bottom:10px; color:#d35400;}
.tool-box input, .tool-box select {width:100%; padding:8px; margin-bottom:10px; border:1px solid #ccc; border-radius:4px;}
.tool-box button {width:100%; background:#0B3D91; color:#fff; padding:10px; border:none; border-radius:4px; cursor:pointer;}
.tool-box button:hover {background:#1749A4;}

/* Footer */
.site-footer {background:#f4f4f4; text-align:center; padding:15px; margin-top:20px;}
.social-bar a {margin:0 10px; text-decoration:none; color:#0B3D91;}