@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Quicksand:wght@400;500;600;700&display=swap');

/* =========================================================
   API Docs – đồng bộ giao diện hồng với các trang còn lại
   ========================================================= */

body.api-docs-page {
  font-family: "Quicksand", "Inter", "Be Vietnam Pro", system-ui, sans-serif !important;
  color: var(--pink-ink, #5f2440) !important;
  background: transparent !important;
}

body.api-docs-page h1,
body.api-docs-page h2,
body.api-docs-page h3,
body.api-docs-page h4,
body.api-docs-page .font-display {
  font-family: "Baloo 2", "Quicksand", "Inter", sans-serif !important;
  color: var(--pink-strong, #ec3c6e) !important;
}

/* ---------- Header: bỏ chữ "Locket Gold" nhân đôi do theme chung chèn vào ---------- */
body.api-docs-page header a[href="/"]::after {
  content: none !important;
  display: none !important;
}

body.api-docs-page header a[href="/"] > span {
  white-space: nowrap;
  flex-shrink: 0;
}

body.api-docs-page header nav {
  scrollbar-width: none;
}

body.api-docs-page header nav::-webkit-scrollbar {
  display: none;
}

body.api-docs-page header nav a {
  white-space: nowrap;
}

/* Dưới desktop rộng: đưa menu xuống hàng riêng, cuộn ngang nếu thiếu chỗ */
@media (max-width: 1279px) {
  body.api-docs-page header .max-w-7xl {
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 14px;
  }

  body.api-docs-page header .max-w-7xl > div:first-child {
    display: contents;
  }

  body.api-docs-page header .max-w-7xl > div:last-child {
    order: 2;
    margin-left: auto;
  }

  body.api-docs-page header nav {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 1px 0 2px;
  }

  body.api-docs-page header nav a {
    padding: 6px 11px;
    font-size: 13px;
  }
}

/* ---------- Chip / nút xám đậm cũ → chip hồng nhạt ---------- */
body.api-docs-page [class*="bg-zinc-800"] {
  background-color: rgba(255, 240, 247, .92) !important;
  border-color: rgba(255, 143, 181, .35) !important;
  color: var(--pink-ink, #5f2440) !important;
}

body.api-docs-page [class*="bg-zinc-800"] * {
  color: var(--pink-ink, #5f2440) !important;
}

body.api-docs-page [class*="hover:bg-zinc-700"]:hover {
  background-color: rgba(255, 225, 239, .96) !important;
}

/* ---------- Chọn văn bản ---------- */
body.api-docs-page ::selection,
body.api-docs-page *::selection {
  background: rgba(255, 111, 149, .3) !important;
  color: var(--pink-ink, #5f2440) !important;
}

/* ---------- Header ---------- */
body.api-docs-page header {
  background: rgba(255, 250, 252, .94) !important;
  border-color: var(--pink-border, rgba(255, 214, 235, .75)) !important;
}

body.api-docs-page header .text-white {
  color: var(--pink-ink, #5f2440) !important;
}

body.api-docs-page header nav a {
  color: var(--pink-muted, #7b5069) !important;
}

body.api-docs-page header nav a:hover {
  color: var(--pink-strong, #ec3c6e) !important;
  background: rgba(255, 132, 170, .12) !important;
}

body.api-docs-page header nav a[href="/api-docs"] {
  color: var(--pink-strong, #ec3c6e) !important;
  background: rgba(255, 132, 170, .14) !important;
  border-color: var(--pink-border, rgba(255, 214, 235, .75)) !important;
}

body.api-docs-page header a[href="/login"] {
  background-image: linear-gradient(120deg, #ff9ec3 0%, #ff6f95 45%, #e83367 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(236, 60, 110, .24) !important;
}

body.api-docs-page header a[href*="zalo.me"] {
  background: rgba(255, 238, 246, .92) !important;
  color: var(--pink-ink, #5f2440) !important;
  border-color: var(--pink-border, rgba(255, 214, 235, .75)) !important;
}

/* ---------- Thẻ / khối nội dung ---------- */
body.api-docs-page .glass-panel {
  background: rgba(255, 255, 255, .9) !important;
  border-color: var(--pink-border, rgba(255, 214, 235, .75)) !important;
  box-shadow: 0 24px 60px rgba(236, 60, 110, .10) !important;
}

body.api-docs-page .gold-gradient-text {
  background: linear-gradient(135deg, #ff8fb5 0%, #ec3c6e 55%, #a10f42 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.api-docs-page .gold-border-glow {
  box-shadow: 0 0 25px -5px rgba(236, 60, 110, .28) !important;
}

/* ---------- Chữ trong các khối sáng ---------- */
body.api-docs-page .glass-panel p,
body.api-docs-page .glass-panel li {
  color: var(--pink-muted, #7b5069) !important;
}

body.api-docs-page .glass-panel .text-white {
  color: var(--pink-ink, #5f2440) !important;
}

body.api-docs-page .glass-panel .text-zinc-300,
body.api-docs-page .glass-panel .text-zinc-400 {
  color: var(--pink-muted, #7b5069) !important;
}

body.api-docs-page .glass-panel .text-zinc-500 {
  color: #9a6d82 !important;
}

body.api-docs-page .glass-panel a:not([class*="bg-"]) {
  color: var(--pink-strong, #ec3c6e) !important;
}

/* ---------- Các thẻ số liệu nền tối cũ ---------- */
body.api-docs-page [class*="bg-zinc-900/80"],
body.api-docs-page [class*="bg-zinc-900/90"] {
  background-color: rgba(255, 244, 249, .96) !important;
  border-color: var(--pink-border, rgba(255, 214, 235, .75)) !important;
}

body.api-docs-page [class*="bg-zinc-900/80"] *,
body.api-docs-page [class*="bg-zinc-900/90"] * {
  color: var(--pink-ink, #5f2440) !important;
}

body.api-docs-page [class*="bg-zinc-900/80"] [class*="text-amber-"],
body.api-docs-page [class*="bg-zinc-900/90"] [class*="text-amber-"] {
  color: var(--pink-strong, #ec3c6e) !important;
}

/* ---------- Bảng tham số ---------- */
body.api-docs-page table {
  color: var(--pink-ink, #5f2440) !important;
  border-color: var(--pink-border, rgba(255, 214, 235, .75)) !important;
}

body.api-docs-page table thead tr {
  background: #fff1f8 !important;
  color: var(--pink-strong, #ec3c6e) !important;
  border-color: var(--pink-border, rgba(255, 214, 235, .75)) !important;
}

body.api-docs-page table tbody {
  color: var(--pink-ink, #5f2440) !important;
}

body.api-docs-page table tbody tr:nth-child(even) {
  background: rgba(255, 132, 170, .06) !important;
}

body.api-docs-page table th,
body.api-docs-page table td {
  border-color: rgba(255, 143, 181, .25) !important;
}

body.api-docs-page table .text-zinc-400,
body.api-docs-page table .text-zinc-500 {
  color: var(--pink-muted, #7b5069) !important;
}

body.api-docs-page table code,
body.api-docs-page p code {
  background: rgba(255, 132, 170, .12) !important;
  color: var(--pink-strong, #ec3c6e) !important;
  padding: 1px 5px;
  border-radius: 5px;
}

/* ---------- Nút / badge vàng cũ ---------- */
body.api-docs-page [class*="text-amber-"] {
  color: var(--pink-strong, #ec3c6e) !important;
}

body.api-docs-page [class*="bg-amber-"] {
  background-color: rgba(255, 132, 170, .12) !important;
  background-image: none !important;
  border-color: var(--pink-border, rgba(255, 214, 235, .75)) !important;
  color: var(--pink-strong, #ec3c6e) !important;
}

body.api-docs-page [class*="border-amber-"] {
  border-color: var(--pink-border, rgba(255, 214, 235, .75)) !important;
}

body.api-docs-page [class*="from-amber-"],
body.api-docs-page [class*="to-amber-"] {
  background-image: linear-gradient(120deg, #ff9ec3 0%, #ff6f95 48%, #e83367 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ---------- Khối code: giữ nền tối để dễ đọc ---------- */
body.api-docs-page [class*="bg-black/60"]:not(input),
body.api-docs-page [class*="bg-black/70"]:not(input),
body.api-docs-page .code-block[class*="bg-black/80"],
body.api-docs-page .bg-zinc-900,
body.api-docs-page #testResultBox {
  background-color: #241018 !important;
  border-color: rgba(255, 143, 181, .28) !important;
  color: #ffd7e5 !important;
}

body.api-docs-page [class*="bg-black/60"]:not(input) .text-zinc-300,
body.api-docs-page [class*="bg-black/60"]:not(input) .text-zinc-400,
body.api-docs-page [class*="bg-black/60"]:not(input) .text-zinc-500,
body.api-docs-page [class*="bg-black/70"]:not(input) .text-zinc-300,
body.api-docs-page [class*="bg-black/70"]:not(input) .text-zinc-400,
body.api-docs-page [class*="bg-black/70"]:not(input) .text-zinc-500,
body.api-docs-page .code-block[class*="bg-black/80"] .text-zinc-300,
body.api-docs-page .code-block[class*="bg-black/80"] .text-zinc-400,
body.api-docs-page .code-block[class*="bg-black/80"] .text-zinc-500,
body.api-docs-page #testResultBox .text-zinc-300,
body.api-docs-page #testResultBox .text-zinc-400,
body.api-docs-page #testResultBox .text-zinc-500 {
  color: #ffd7e5 !important;
}

body.api-docs-page [class*="bg-black/60"]:not(input) [class*="text-amber-"],
body.api-docs-page [class*="bg-black/70"]:not(input) [class*="text-amber-"],
body.api-docs-page .code-block[class*="bg-black/80"] [class*="text-amber-"],
body.api-docs-page #testResultBox [class*="text-amber-"] {
  color: #ff9ec3 !important;
}

body.api-docs-page [class*="bg-black/60"]:not(input) [class*="text-white"],
body.api-docs-page [class*="bg-black/70"]:not(input) [class*="text-white"],
body.api-docs-page .code-block[class*="bg-black/80"] [class*="text-white"],
body.api-docs-page #testResultBox [class*="text-white"] {
  color: #fff !important;
}

body.api-docs-page [class*="bg-black/60"]:not(input) a,
body.api-docs-page [class*="bg-black/70"]:not(input) a,
body.api-docs-page .code-block[class*="bg-black/80"] a,
body.api-docs-page #testResultBox a {
  color: #ffb6d2 !important;
}

body.api-docs-page [class*="bg-black/70"] pre,
body.api-docs-page [class*="bg-black/70"] code,
body.api-docs-page .code-block[class*="bg-black/80"] pre,
body.api-docs-page .code-block[class*="bg-black/80"] code,
body.api-docs-page .bg-zinc-900 pre,
body.api-docs-page .bg-zinc-900 code {
  background: transparent !important;
}

/* Nút Copy nằm trong khối code tối: không dùng nền hồng nhạt để chữ khỏi biến mất */
body.api-docs-page .code-block button,
body.api-docs-page [class*="bg-black/60"]:not(input) button,
body.api-docs-page [class*="bg-black/70"]:not(input) button {
  background-color: rgba(255, 255, 255, .1) !important;
  background-image: none !important;
  color: #ffe3ee !important;
  border: 1px solid rgba(255, 143, 181, .3) !important;
}

body.api-docs-page .code-block button:hover,
body.api-docs-page [class*="bg-black/60"]:not(input) button:hover,
body.api-docs-page [class*="bg-black/70"]:not(input) button:hover {
  background-color: rgba(255, 143, 181, .28) !important;
  color: #fff !important;
}

/* Nút test thử: đổi từ xanh teal sang hồng nhạt để đồng bộ theme */
body.api-docs-page [class*="from-emerald-"] {
  background-image: linear-gradient(120deg, #ffe0ee 0%, #ffc1d9 100%) !important;
  color: var(--pink-ink, #5f2440) !important;
  border: 1px solid rgba(255, 143, 181, .45) !important;
  box-shadow: 0 8px 18px rgba(236, 60, 110, .10) !important;
}

/* Mobile rất nhỏ: ẩn badge API DEV để header không bị tràn */
@media (max-width: 639px) {
  body.api-docs-page header a[href="/"] > span > span:last-child {
    display: none !important;
  }

  body.api-docs-page header .max-w-7xl {
    column-gap: 8px;
  }

  body.api-docs-page header a[href="/login"] {
    padding: 8px 14px;
  }
}

body.api-docs-page .bg-zinc-900.text-zinc-300 {
  color: #ffd7e5 !important;
}

/* Modal API key: nền sáng thay vì đen */
body.api-docs-page .fixed .bg-zinc-900 {
  background-color: #fff7fc !important;
  color: var(--pink-ink, #5f2440) !important;
  border-color: var(--pink-border, rgba(255, 214, 235, .75)) !important;
}

/* ---------- Input ---------- */
body.api-docs-page input:not([type="hidden"]) {
  background: rgba(255, 255, 255, .95) !important;
  border-color: rgba(255, 143, 181, .35) !important;
  color: var(--pink-ink, #5f2440) !important;
}

body.api-docs-page input:not([type="hidden"]):focus {
  border-color: var(--pink, #ff6f95) !important;
  box-shadow: 0 0 0 4px rgba(255, 111, 149, .16) !important;
}

body.api-docs-page input::placeholder {
  color: #b68197 !important;
}

/* ---------- Footer ---------- */
body.api-docs-page footer {
  border-color: var(--pink-border, rgba(255, 214, 235, .75)) !important;
  color: var(--pink-muted, #7b5069) !important;
}

/* ---------- Scrollbar ---------- */
body.api-docs-page ::-webkit-scrollbar-track {
  background: #ffeaf5;
}

body.api-docs-page ::-webkit-scrollbar-thumb {
  background: #ffb6d2;
}

body.api-docs-page ::-webkit-scrollbar-thumb:hover {
  background: #ff8fb5;
}