/* Màn "Thử API tra cứu". Chỉ dùng biến màu của giao-dien/theme, không đặt màu cứng. */
.ta-dai { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 10px 12px; border: 1px solid var(--line, #ccd); border-radius: var(--radius, 8px); margin-bottom: 12px; font-size: var(--fs-m); }
.ta-dai select { max-width: 100%; }
.ta-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.ta-tab { font: inherit; padding: 6px 14px; border: 1px solid var(--line, #ccd); background: none; color: inherit; border-radius: 999px; cursor: pointer; }
.ta-tab.on { background: var(--accent, #0b6b5c); color: #fff; border-color: transparent; }
.ta-hang { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.ta-hang input:not([type=checkbox]) { flex: 1 1 260px; min-width: 0; }
.ta-nho { font-size: var(--fs-s); }
.ta-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ta-chip { font: inherit; font-size: var(--fs-s); padding: 3px 10px; border: 1px solid var(--line, #ccd); background: none; color: inherit; border-radius: 999px; cursor: pointer; }
.ta-chip.on { background: var(--accent, #0b6b5c); color: #fff; }
.ta-so { opacity: .7; margin-left: 2px; }
.ta-hai-cot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 860px) { .ta-hai-cot { grid-template-columns: minmax(0, 1fr); } }
.ta-ds, .ta-ct { border: 1px solid var(--line, #ccd); border-radius: var(--radius, 8px); padding: 10px; max-height: 70vh; overflow: auto; min-width: 0; }
.ta-tong { font-weight: 600; margin-bottom: 8px; }
.ta-dong { display: block; width: 100%; text-align: left; font: inherit; background: none; color: inherit; border: 0; border-bottom: 1px solid var(--line, #ccd); padding: 8px 4px; cursor: pointer; }
.ta-dong.on, .ta-dong:hover { background: color-mix(in srgb, var(--accent, #0b6b5c) 10%, transparent); }
.ta-ten { display: block; font-weight: 600; }
.ta-en { display: block; font-style: italic; opacity: .8; font-size: var(--fs-s); }
.ta-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: var(--fs-xs); margin-top: 2px; }
.ta-the { border: 1px solid var(--line, #ccd); border-radius: 4px; padding: 0 5px; font-size: var(--fs-xs); }
.ta-ngung { color: var(--err, #b00020); border-color: currentColor; }
.ta-ly { opacity: .7; font-size: var(--fs-xs); }
.ta-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; font-size: var(--fs-m); }
.ta-dl dt { opacity: .7; } .ta-dl dd { margin: 0; overflow-wrap: anywhere; }
.ta-ds-nho { margin: 4px 0 10px; padding-left: 18px; font-size: var(--fs-m); }
.ta-loi { color: var(--err, #b00020); }
.ta-json { max-height: 320px; overflow: auto; font-size: var(--fs-xs); white-space: pre-wrap; overflow-wrap: anywhere; background: color-mix(in srgb, currentColor 6%, transparent); padding: 8px; border-radius: 6px; }
.ta-h2 { margin: 26px 0 6px; }
.ta-nk { border-bottom: 1px solid var(--line, #ccd); padding: 4px 0; }
.ta-nk summary { cursor: pointer; overflow-wrap: anywhere; }
.ta-ma { display: inline-block; min-width: 34px; text-align: center; padding: 0 6px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 700; color: #fff; }
.ta-ma-ok { background: var(--ok, #1b7f3b); } .ta-ma-warn { background: var(--warn, #b26a00); } .ta-ma-err { background: var(--err, #b00020); }
.ta-rong { flex: 1 1 100%; }