/* /tiktok-shop-developer — lớp giao diện tông cam cho trang tài liệu API (chỉ trình bày, không đổi nội
 * dung). Nạp ngay sau khối <style> đầu trang; các khối <style> inline phía dưới (Code mẫu, Tích hợp AI)
 * đứng SAU file này nên rule đè chúng mang tiền tố `body` để thắng bằng specificity, không cần
 * !important. Rule mobile chung của tiktok-shop-mobile.css (cuộn ngang TOC/tab, chừa chỗ nút copy)
 * vẫn giữ — file này chỉ thêm màu, khoảng cách và vài rule hẹp cho màn nhỏ. */

/* ─── Thẻ mục ─── */
body .dev-card {
    border: 1px solid #eef0f3; border-radius: 14px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04); margin-bottom: 14px; padding: 20px;
}
body .dev-card h5 { font-size: 1.08rem; font-weight: 800; color: #111827; }
body .dev-card h6.fw-bold { color: #111827; }
/* Icon tiêu đề các mục nhiều màu (xanh/tím/đỏ) ⇒ gom về cam cho đồng bộ. */
body .dev-card h5 > .bi:first-child,
body .dev-start-steps .bi { color: #ea580c !important; }

/* Dòng đầu mỗi endpoint (METHOD + URL): đóng khung nhạt để mắt bắt được ranh giới từng endpoint. */
body .dev-card[id^="ep-"] > p:first-child {
    display: flex; align-items: flex-start; gap: 8px;
    background: #f9fafb; border: 1px solid #eef0f3; border-radius: 10px;
    padding: 8px 10px; margin-bottom: 12px !important;
}
body .dev-card[id^="ep-"] > p:first-child .method-pill { flex: 0 0 auto; margin-top: 1px; }
body .dev-card[id^="ep-"] > p:first-child .endpoint-url { min-width: 0; color: #111827; }
body .dev-card[id^="ep-"] > h5 { margin-top: 0; }

/* ─── Khối code: dòng thưa hơn, góc bo khớp thẻ, nút copy gọn ─── */
body .code-block {
    background: #0f172a; color: #e2e8f0; border-radius: 12px;
    line-height: 1.6; tab-size: 2; padding: 14px 16px;
    scrollbar-width: thin; scrollbar-color: #334155 transparent;
}
body .code-block .copy-code {
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #e2e8f0;
    padding: 2px 8px; border-radius: 8px; line-height: 1.4;
}
body .code-block .copy-code:hover { background: rgba(255, 255, 255, .18); color: #fff; }
body .ai-preview-wrap:not(.open)::after { background: linear-gradient(transparent, #0f172a); }


/* ─── Mục lục ─── */
body .dev-toc-inner { border: 1px solid #eef0f3; border-radius: 14px; box-shadow: 0 1px 2px rgba(17, 24, 39, .04); }
body .dev-toc-inner .toc-title { color: #9ca3af; }
body .dev-toc-inner a { color: #374151; }
body .dev-toc-inner a > .bi { color: #9ca3af !important; }
body .dev-toc-inner a:hover { background: #fff7ed; color: #9a3412; }
body .dev-toc-inner a.active { background: #fff7ed; color: #9a3412; box-shadow: inset 3px 0 0 #ea580c; }
body .dev-toc-inner a.active > .bi { color: #ea580c !important; }

/* ─── "Có gì mới": <details> gọn, mobile mặc định thu lại ─── */
.dev-news {
    background: #fff; border: 1px solid #eef0f3; border-left: 4px solid #ea580c;
    border-radius: 14px; margin-bottom: 14px; font-size: .84rem; color: #374151;
}
.dev-news > summary {
    list-style: none; cursor: pointer; padding: 10px 14px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dev-news > summary::-webkit-details-marker { display: none; }
.dev-news > summary .bi-megaphone-fill { color: #ea580c; }
.dev-news > summary strong { color: #111827; }
.dev-news-latest { color: #6b7280; font-size: .78rem; }
.dev-news > summary::after {
    content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; color: #9ca3af; transition: transform .15s;
}
.dev-news[open] > summary::after { transform: rotate(180deg); }
.dev-news-body { padding: 0 14px 12px 14px; }
.dev-news-body ul { margin: 0; padding-left: 1.1rem; }
.dev-news-body li { margin-bottom: 4px; line-height: 1.55; }

/* ─── Khách: 3 bước bắt đầu ─── */
body .dev-start-steps > div { background: #fff7ed; border: 1px solid #fed7aa; color: #4b5563; }
body .dev-start-steps b { color: #9a3412; }

/* ─── Tích hợp bằng AI: bỏ tông tím, đồng bộ cam ─── */
body .ai-card { border-color: #fed7aa; background: linear-gradient(180deg, #fff7ed 0, #fff 140px); }
body .ai-card h5 .bi, body .dev-toc-inner a[href="#sec-ai"].active .bi { color: #ea580c !important; }
body .ai-step { color: #9a3412; }
body .ai-chip:hover { border-color: #fdba74; }
body .ai-chip.on { border-color: #ea580c; background: #fff7ed; color: #9a3412; }

/* Tab ngôn ngữ / Playground: tab đang chọn tô cam thay xanh Bootstrap. */
body .lang-pills .nav-link { color: #4b5563; border-radius: 999px; }
body .lang-pills .nav-link.active { background: #ea580c; color: #fff; }
body .lang-pills .nav-link.active .method-pill { background: rgba(255, 255, 255, .9); }

/* Bảng API key: đầu cột hẹp bị ngắt giữa chữ ("Tê n", "Prefi x") ⇒ cấm ngắt; bảng đã nằm trong
   .table-responsive nên hẹp thì cuộn ngang. */
body .key-table th { white-space: nowrap; }

/* Ô key một lần: viền cam thay vàng chói. */
body .one-time-key { background: #fff7ed; border-color: #fdba74; }

/* ─── Màn nhỏ ─── */
@media (max-width: 767.98px) {
    /* Chip mục lục cuộn ngang (rule ở tiktok-shop-mobile.css) — viền mỏng cho từng chip dễ bấm. */
    body .dev-toc-inner { padding: 6px; gap: 6px; }
    body .dev-toc-inner a { border: 1px solid #eef0f3; border-radius: 999px; padding: 6px 12px; font-size: .8rem; }
    body .dev-toc-inner a.active { box-shadow: none; border-color: #fdba74; }
}
@media (max-width: 575.98px) {
    body .dev-card { padding: 14px; margin-bottom: 12px; border-radius: 12px; }
    body .dev-card h5 { font-size: 1rem; }
    body .code-block { font-size: .72rem; padding: 12px; border-radius: 10px; }
    /* URL endpoint dài: cho ngắt ở bất kỳ ký tự, không đẩy tràn khung. */
    body .dev-card[id^="ep-"] > p:first-child { padding: 7px 8px; }
    body .dev-card[id^="ep-"] > p:first-child .endpoint-url { font-size: .76rem; overflow-wrap: anywhere; }
    /* Cột 1 bảng field là tên field (creator_username…): bị ép hẹp thì ngắt giữa tên, đọc như
       chữ vỡ. Giữ nguyên 1 dòng; bảng nằm trong .table-responsive nên cuộn ngang được. */
    body .table-responsive .table th:first-child,
    body .table-responsive .table td:first-child { white-space: nowrap; }
    body .table-responsive .table td:first-child code { overflow-wrap: normal; }
    body .dev-start-steps > div { padding: 10px 12px; }
    .dev-news > summary { padding: 10px 12px; }
    .dev-news-body { padding: 0 12px 10px; }
}