.api-doc-wrapper {
            max-width: 1100px;
            margin: auto;
        }

        .api-doc-card {
            background: #fff;
            border-radius: 18px;
            padding: 35px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
        }

        .api-title {
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 35px;
        }

        .api-key-box {
            background: var(--color-primary-soft);
            border: 1px solid var(--color-primary-border);
            border-radius: 14px;
            padding: 20px;
        }

        .api-section {
            margin-top: 50px;
        }

        .endpoint-box {
            background: var(--color-primary-soft);
            padding: 18px 20px;
            border-radius: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            border: 1px solid var(--color-primary-border);
        }

        .method-badge {
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 6px;
            font-weight: 600;
            margin-right: 10px;
        }

        .method-get {
            background: rgba(var(--color-primary-rgb), 0.15);
            color: var(--color-primary);
        }

        .method-post {
            background: rgba(34, 197, 94, 0.15);
            color: #16a34a;
        }

        .api-code {
            background: #0f172a;
            border-radius: 14px;
            padding: 22px;
            margin-top: 18px;
            position: relative;
            cursor: pointer;
            /* 👈 nhìn là biết bấm được */
        }

        .api-code pre {
            margin: 0;
            color: #38bdf8;
            /* 👈 xanh biển */
            font-size: 14px;
            white-space: pre-wrap;
        }

        .api-code:hover {
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.3);
        }


        .copy-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: #fff;
            padding: 6px 12px;
            font-size: 12px;
            border-radius: 6px;
        }

        .copy-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        @media(max-width:768px) {
            .api-doc-card {
                padding: 20px;
            }

            .api-code {
                font-size: 12px;
            }
        }
    

  
        .api-key-box {
            background: var(--color-primary-soft);
            border: 1px solid var(--color-primary-border);
            border-radius: 16px;
            padding: 22px;
        }

        .api-key-row {
            display: flex;
            gap: 12px;
            /* 👈 tách ra kiểu 1 2 3 */
            align-items: center;
        }

        .api-key-input {
            flex: 1;
            height: 48px;
            border-radius: 12px;
            border: 1px solid var(--color-primary-border);
            padding: 0 16px;
            background: var(--color-primary-soft);
            cursor: pointer;
            font-weight: 500;
            transition: 0.2s;
        }

        .api-key-input:hover {
            background: var(--color-primary-soft);
        }

        .api-key-btn {
            height: 48px;
            min-width: 48px;
            padding: 0 18px;
            border-radius: 12px;
            border: 1px solid var(--color-primary-border);
            background: var(--color-primary-soft);
            cursor: pointer;
            transition: 0.2s;
        }

        .api-key-btn:hover {
            background: var(--color-primary-soft);
        }

        .api-key-reset {
            background: var(--color-primary-soft);
            color: #fff;
            font-weight: 600;
            border: 1px solid var(--color-primary-border);
        }

        .api-key-reset:hover {
            background: var(--color-primary-soft);
        }
/* ===== MOBILE: 3 Ô NẰM NGANG ===== */
@media (max-width: 768px) {

  .api-key-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
  }

  /* Ô API KEY dài nhất */
  .api-key-input {
    flex: 3;
    height: 50px !important;
    min-width: 0;
  }

  /* Nút 👁 nhỏ */
  .api-key-btn {
    flex: 1;
    height: 50px !important;
    padding: 0;
  }

  /* RESET trung bình */
  .api-key-reset {
    flex: 2;
    height: 50px !important;
  }

}