
<style>
    * {
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    body {
      margin: 0;
      background: #f4f6f8;
      color: #333;
    }

    .container1 {
      max-width: 1000px;
      margin: 40px auto;
      padding: 20px;
    }

    .layout {
      display: flex;
      gap: 20px;
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      overflow: hidden;
    }

    .menu {
      width: 280px;
      background: #1f2937;
      padding: 20px;
    }

    .menu h2 {
      color: #fff;
      font-size: 20px;
      margin-bottom: 20px;
    }

    .menu input {
      display: none;
    }

    .menu label {
      display: block;
      padding: 10px 16px;
      margin-bottom: 10px;
      border-radius: 10px;
      color: #d1d5db;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .menu label:hover {
      background: #374151;
      color: #fff;
    }

    #item1:checked ~ .labels label[for="item1"],
    #item2:checked ~ .labels label[for="item2"],
    #item3:checked ~ .labels label[for="item3"],
    #item4:checked ~ .labels label[for="item4"],
    #item5:checked ~ .labels label[for="item5"],
    #item6:checked ~ .labels label[for="item6"],
    #item7:checked ~ .labels label[for="item7"],
    #item8:checked ~ .labels label[for="item8"],
    #item9:checked ~ .labels label[for="item9"],
    #item10:checked ~ .labels label[for="item10"],
    #item11:checked ~ .labels label[for="item11"],
    #item12:checked ~ .labels label[for="item12"],
    #item13:checked ~ .labels label[for="item13"],
    #item14:checked ~ .labels label[for="item14"],
    #item15:checked ~ .labels label[for="item15"],
    #item16:checked ~ .labels label[for="item16"],
    #item17:checked ~ .labels label[for="item17"],
    #item18:checked ~ .labels label[for="item18"],
    #item19:checked ~ .labels label[for="item19"],
    #item20:checked ~ .labels label[for="item20"],
    #item21:checked ~ .labels label[for="item21"],
    #item22:checked ~ .labels label[for="item22"],
    #item23:checked ~ .labels label[for="item23"] {
      background: #2563eb;
      color: #fff;
      font-weight: bold;
    }

    .content {
      flex: 1;
      padding: 30px;
      min-height: 340px;
    }

    .panel {
      display: none;
      animation: fadeIn 0.3s ease;
    }

    .panel h1 {
      margin-top: 0;
      color: #111827;
    }

    .panel p {
      line-height: 1.6;
      color: #4b5563;
    }

    .badge {
      display: inline-block;
      margin-top: 10px;
      padding: 8px 12px;
      background: #e0ecff;
      color: #2563eb;
      border-radius: 20px;
      font-size: 14px;
      font-weight: bold;
    }
     
    .badge1 {
      display: inline-block;
      margin-top: 10px;
      padding: 8px 12px;
      background: #ffe0e8;
      color: #eb2525;
      border-radius: 20px;
      font-size: 14px;
      font-weight: bold;
    }

    .layout:has(#item1:checked) .panel-1,
    .layout:has(#item2:checked) .panel-2,
    .layout:has(#item3:checked) .panel-3,
    .layout:has(#item4:checked) .panel-4,
    .layout:has(#item5:checked) .panel-5,
    .layout:has(#item6:checked) .panel-6,
    .layout:has(#item7:checked) .panel-7,
    .layout:has(#item8:checked) .panel-8,
    .layout:has(#item9:checked) .panel-9,
    .layout:has(#item10:checked) .panel-10,
    .layout:has(#item11:checked) .panel-11,
    .layout:has(#item12:checked) .panel-12,
    .layout:has(#item13:checked) .panel-13,
    .layout:has(#item14:checked) .panel-14,
    .layout:has(#item15:checked) .panel-15,
    .layout:has(#item16:checked) .panel-16,
    .layout:has(#item17:checked) .panel-17,
    .layout:has(#item18:checked) .panel-18,
    .layout:has(#item19:checked) .panel-19,
    .layout:has(#item20:checked) .panel-20,
    .layout:has(#item21:checked) .panel-21,
    .layout:has(#item22:checked) .panel-22,
    .layout:has(#item23:checked) .panel-23 {
      display: block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 768px) {
      .layout {
        flex-direction: column;
      }

      .menu {
        width: 100%;
      }

      .content {
        padding: 20px;
      }
    }
</style>