* { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Segoe UI', Roboto, system-ui, sans-serif; background: #0f1720; color: #e4edf5; line-height: 1.7; }
    a { color: #7aa5f0; text-decoration: none; }
    a:hover { text-decoration: underline; color: #b4d0ff; }
    .container { max-width: 1260px; margin: 0 auto; padding: 0 22px; }
    .top-nav { background: #0b1a26; border-bottom: 2px solid #2a3e54; position: sticky; top: 0; z-index: 50; }
    .nav-flex { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; gap: 20px; flex-wrap: wrap; }
    .my-logo { font-size: 1.9rem; font-weight: 700; color: #d0e6ff; letter-spacing: 1px; text-shadow: 0 2px 4px #142f44; }
    .my-logo i { color: #3ba0a0; margin-right: 6px; }
    .nav-links { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
    .nav-links a { font-weight: 500; color: #c0d3e8; }
    .nav-links a:hover { color: white; }
    .burger { display: none; background: none; border: 0; font-size: 2rem; color: #bcd; cursor: pointer; }
    @media (max-width: 860px) {
      .burger { display: block; }
      .nav-links { display: none; flex-basis: 100%; flex-direction: column; align-items: flex-start; padding: 12px 0 16px 10px; }
      .nav-links.open { display: flex; }
    }
    .breadcrumb { background: #101d2b; padding: 9px 0; font-size: 0.9rem; border-bottom: 1px solid #253a4a; }
    .breadcrumb i { margin: 0 7px; color: #5c7a96; font-size: 0.8rem; }
    .breadcrumb a { color: #90b5e6; }
    .breadcrumb span { color: #c5d8f0; }
    .article-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin: 38px 0 20px; }
    @media (min-width: 1050px) { .article-grid { grid-template-columns: 1.9fr 0.9fr; } }
    .content { background: #0f1c28; border: 1px solid #203242; border-radius: 18px; padding: 22px 28px; }
    .sidebar { background: #0e1a25; border-radius: 18px; padding: 22px 18px; border: 1px solid #203242; }
    h1 { font-size: 2.6rem; line-height: 1.2; color: #eef7ff; margin-bottom: 12px; font-weight: 700; border-left: 5px solid #2f8f9a; padding-left: 16px; }
    h2 { font-size: 1.9rem; color: #d6eaff; margin: 28px 0 14px; border-bottom: 2px solid #2b4a62; padding-bottom: 5px; }
    h3 { font-size: 1.5rem; color: #c6defa; margin: 23px 0 8px; }
    h4 { font-size: 1.2rem; color: #b2cde8; margin: 16px 0 5px; font-weight: 600; }
    p { margin-bottom: 16px; }
    .highlight { background: #1a2f40; padding: 3px 8px; border-radius: 6px; color: #b0e0ff; font-weight: 500; }
    .quote { background: #182c3c; border-left: 5px solid #3f9bae; padding: 14px 22px; border-radius: 12px; font-style: italic; margin: 20px 0; }
    .interview-box { background: #1b2d3e; border-radius: 14px; padding: 16px 20px; margin: 20px 0; }
    i.fa-solid, i.fa-regular { margin-right: 7px; color: #4c9fbf; }
    img { max-width: 100%; border-radius: 12px; margin: 18px 0; border: 2px solid #234054; width: 100%; height: auto; }
    table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.95rem; }
    th { background: #1f3546; color: #e2f0ff; padding: 10px 8px; text-align: left; }
    td { border-bottom: 1px solid #2a3d50; padding: 10px 6px; }
    .search-form { display: flex; gap: 10px; margin: 20px 0 0; flex-wrap: wrap; background: #10252f; padding: 16px; border-radius: 14px; }
    .search-form input { flex: 1; background: #0c1922; border: 1px solid #3b5b77; border-radius: 50px; padding: 12px 20px; color: #eaf2fa; font-size: 1rem; }
    .search-form button { background: #216979; border: none; color: white; padding: 0 22px; border-radius: 50px; cursor: pointer; font-size: 1rem; font-weight: 500; }
    .input-group { margin: 22px 0; display: flex; flex-direction: column; gap: 12px; }
    .input-group input, .input-group textarea { background: #0c1822; border: 1px solid #286076; border-radius: 12px; color: #ddeeff; padding: 10px 16px; font-family: inherit; }
    .rating-stars { display: flex; gap: 4px; font-size: 1.9rem; cursor: default; color: #3b5f7a; }
    .rating-stars i.active { color: #f4c152; }
    .btn-like { background: #1d4e5a; color: white; border: none; padding: 8px 18px; border-radius: 30px; cursor: pointer; font-weight: 500; }
    .friend-link { display: block; margin-top: 30px; padding: 18px 15px; background: #101e2a; border-radius: 12px; border: 1px solid #2c4053; font-size: 1rem; }
    .friend-link a { display: inline-block; margin: 6px 14px 0 0; color: #93c6ff; }
    footer { background: #0b161f; border-top: 1px solid #263c4d; margin-top: 45px; padding: 28px 0 24px; }
    .footer-flex { display: flex; justify-content: space-between; flex-wrap: wrap; }
    .copyright { font-size: 0.9rem; color: #839cb2; }
    ul { margin: 8px 0 18px 22px; }
    li { margin-bottom: 8px; }
    .series { background: #132836; padding: 10px 14px; border-radius: 20px; display: inline-block; margin-right: 6px; font-size: 0.85rem; }
    @media (max-width: 700px) {
      h1 { font-size: 2rem; }
      .content, .sidebar { padding: 14px 14px; }
      .nav-flex { align-items: center; }
    }