/* Style riêng của /api/. Component chung ở base.css, giá trị ở tokens.css. Breakpoint: md 640px, lg 900px. */

/* Hero */
.api-hero{padding:var(--sp-10) 0;}
.api-hero h1{font-size:var(--fs-h2);max-width:22ch;}
.api-hero .lede{max-width:var(--w-text);color:var(--ink-soft);font-size:var(--fs-lg);margin:var(--sp-6) 0 0;}
@media (min-width:900px){ .api-hero{padding:var(--sp-16) 0 var(--sp-10);} }

/* Danh sách endpoint */
.endpoint-section{padding:var(--sp-10) 0;}
.endpoint-card{max-width:var(--w-read);margin-bottom:var(--sp-5);}
.endpoint-method{display:inline-block;background:var(--violet);color:var(--on-dark);font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-sm);margin-right:var(--sp-2);vertical-align:middle;}
.endpoint-url{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-md);font-weight:700;word-break:break-all;}
.endpoint-card p{color:var(--ink-soft);margin:var(--sp-3) 0 0;}
@media (min-width:900px){ .endpoint-section{padding:var(--sp-16) 0;} }

/* Ví dụ gọi API */
.example-section{padding:0 0 var(--sp-10);}
.example-section .code-block{max-width:var(--w-read);margin-bottom:var(--sp-5);}

/* Quy tắc sử dụng */
.rules-section{padding:0 0 var(--sp-10);}
.rules-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3);max-width:var(--w-read);}
.rules-list .notice{font-size:var(--fs-md);color:var(--ink-soft);}

/* CTA cuối trang — box dùng .cta-box component chung ở base.css */
.api-cta{padding:0 0 var(--sp-20);}