.blog-detail {
      padding-top: var(--header-offset, 120px);
      background-color: #f8f8f8;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      padding-bottom: 40px;
    }

    .blog-detail__article {
      background-color: #ffffff;
      max-width: 800px;
      width: 100%;
      margin: 20px;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    }

    .blog-detail__header {
      margin-bottom: 25px;
    }

    .blog-detail__title {
      font-size: 38px;
      color: #2c3e50;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 15px;
      text-align: center;
    }

    .blog-detail__meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 15px;
      font-size: 14px;
      color: #7f8c8d;
      margin-top: 15px;
    }

    .blog-detail__date {
      white-space: nowrap;
    }

    .blog-detail__keywords-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .blog-detail__keywords-label {
      font-weight: 600;
      color: #7f8c8d;
    }

    .blog-detail__keyword {
      display: inline-block;
      padding: 5px 12px;
      background-color: #e6f7ff;
      color: #333333;
      border-radius: 20px;
      text-decoration: none;
      font-size: 13px;
      transition: background-color 0.3s ease;
    }

    .blog-detail__keyword:hover {
      background-color: #cceeff;
    }

    .blog-detail__figure {
      margin: 0 0 30px 0;
      border-radius: 8px;
      overflow: hidden;
    }

    .blog-detail__cover {
      width: 100%;
      max-height: 400px;
      object-fit: cover;
      display: block;
      border-radius: 8px;
    }

    .blog-detail__content {
      font-size: 17px;
      line-height: 1.7;
      color: #333333;
      margin-bottom: 30px;
    }

    .blog-detail__content p {
      margin-bottom: 18px;
    }

    .blog-detail__content h2 {
      font-size: 28px;
      color: #2c3e50;
      font-weight: 600;
      margin-top: 35px;
      margin-bottom: 18px;
      line-height: 1.3;
    }

    .blog-detail__content h3 {
      font-size: 24px;
      color: #2c3e50;
      font-weight: 600;
      margin-top: 28px;
      margin-bottom: 15px;
      line-height: 1.3;
    }

    .blog-detail__content ul,
    .blog-detail__content ol {
      margin-bottom: 18px;
      padding-left: 25px;
    }

    .blog-detail__content li {
      margin-bottom: 8px;
    }

    .blog-detail__content a {
      color: #0056b3;
      text-decoration: underline;
    }

    .blog-detail__content a:hover {
      text-decoration: none;
    }

    .blog-detail__content strong {
      font-weight: 700;
    }

    .blog-detail__content em {
      font-style: italic;
    }

    .blog-detail__article-footer {
      border-top: 1px solid #eee;
      padding-top: 25px;
      text-align: center;
    }

    .blog-detail__share-prompt {
      font-size: 16px;
      color: #555555;
      margin-bottom: 15px;
    }

    .blog-detail__social-share {
      display: flex;
      justify-content: center;
      gap: 15px;
    }

    .blog-detail__social-link {
      display: block;
      width: 40px;
      height: 40px;
      background-size: cover;
      background-position: center;
      border-radius: 50%;
      transition: transform 0.2s ease-in-out;
    }

    .blog-detail__social-link:hover {
      transform: translateY(-3px);
    }

    .blog-detail__social-link--facebook {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M12 2C6.477 2 2 6.477 2 12c0 5.016 3.655 9.177 8.438 9.878V14.89h-2.935V12h2.935V9.742c0-2.906 1.77-4.498 4.364-4.498 1.243 0 2.31.093 2.62.134v3.033h-1.79c-1.42 0-1.697.675-1.697 1.66v2.19h3.39L17.76 14.89h-3.085v6.988C19.345 21.177 23 17.016 23 12c0-5.523-4.477-10-10-10z"/></svg>');
      background-color: #3b5998;
    }

    .blog-detail__social-link--twitter {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M22.46 6c-.77.34-1.6.56-2.46.69.88-.53 1.55-1.37 1.87-2.37-.83.5-1.75.85-2.73 1.05C18.3 4.5 17.22 4 16.05 4c-2.36 0-4.27 1.91-4.27 4.27 0 .34.04.67.11.98C8.57 9.11 5.4 7.47 3.32 4.79c-.37.64-.58 1.38-.58 2.18 0 1.49.76 2.81 1.92 3.59-.7-.02-1.35-.21-1.92-.53v.05c0 2.07 1.47 3.8 3.42 4.19-.36.1-.74.15-1.13.15-.28 0-.55-.03-.82-.08.54 1.7 2.11 2.94 3.97 2.97-1.46 1.14-3.3 1.82-5.3 1.82-.34 0-.67-.02-1-.06C3.04 20.35 5.27 21 7.5 21c8.98 0 13.9-7.43 13.9-13.9 0-.21-.01-.42-.01-.63.96-.69 1.8-1.56 2.46-2.58z"/></svg>');
      background-color: #1DA1F2;
    }

    .blog-detail__social-link--whatsapp {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.23 4.74 1.23 5.46 0 9.91-4.45 9.91-9.91C21.95 6.46 17.5 2 12.04 2zm5.41 14.88c-.14.23-.48.29-.82.12-.34-.17-.49-.26-.7-.34-.21-.08-.45-.14-.68-.14-.23 0-.46.09-.6.23-.14.14-.37.47-.45.56-.08.09-.17.1-.31.05-.14-.05-.59-.22-1.13-.7-.41-.36-.7-.81-.79-.97-.09-.16-.01-.25.07-.33.07-.08.14-.17.21-.24.07-.07.09-.13.14-.22.05-.09.02-.17-.01-.23-.03-.06-.29-.69-.4-.95-.12-.29-.25-.24-.34-.24-.09 0-.19-.01-.28-.01-.09 0-.25.04-.38.19-.14.14-.53.52-.53 1.27s.54 1.47.61 1.56c.07.09 1.05 1.6 2.54 2.29.37.17.66.27.89.36.33.12.59.1.81.06.24-.04.48-.2.55-.31.07-.12.23-.39.29-.48.06-.09.11-.18.17-.24.06-.06.13-.09.21-.11.08-.02.16-.01.24.01.08.02.15.06.21.11.06.05.13.12.18.2.05.08.08.16.12.23.04.07.05.14.05.22 0 .08-.01.16-.03.23-.02.07-.06.14-.11.21z"/></svg>');
      background-color: #25D366;
    }

    @media (max-width: 768px) {
      .blog-detail__article {
        margin: 15px;
        padding: 20px;
      }

      .blog-detail__title {
        font-size: 28px;
        margin-bottom: 10px;
      }

      .blog-detail__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }

      .blog-detail__keywords-wrapper {
        flex-direction: row;
        align-items: center;
        width: 100%;
      }

      .blog-detail__cover {
        max-height: 250px;
      }

      .blog-detail__content {
        font-size: 16px;
        line-height: 1.6;
      }

      .blog-detail__content h2 {
        font-size: 24px;
        margin-top: 30px;
        margin-bottom: 15px;
      }

      .blog-detail__content h3 {
        font-size: 20px;
        margin-top: 25px;
        margin-bottom: 12px;
      }
    }

    @media (max-width: 480px) {
      .blog-detail__article {
        margin: 10px;
        padding: 15px;
      }

      .blog-detail__title {
        font-size: 24px;
      }

      .blog-detail__meta {
        font-size: 13px;
      }

      .blog-detail__keyword {
        font-size: 12px;
        padding: 4px 10px;
      }

      .blog-detail__content {
        font-size: 15px;
      }

      .blog-detail__content h2 {
        font-size: 22px;
      }

      .blog-detail__content h3 {
        font-size: 18px;
      }

      .blog-detail__social-link {
        width: 35px;
        height: 35px;
      }
    }