/* OpenAI Style - Clean and Professional */

/* Sidebar navigation - indent child items để đồng bộ với các section khác */
/* Level 1 items (TTS API, Caption Editor API) - không indent */
.md-sidebar--primary .md-nav__item:not(.md-nav__item--nested) > .md-nav__link {
  padding-left: 0.6rem !important;
}

/* Level 2 items (Text to Speech, Blur Region, etc.) - indent 1 cấp */
.md-sidebar--primary .md-nav__item--nested > .md-nav__link {
  padding-left: 1.25rem !important;
}

/* Level 3 items (Social Download dưới Download, etc.) - indent 2 cấp */
.md-sidebar--primary .md-nav__item--nested .md-nav__item .md-nav__link {
  padding-left: 2rem !important;
}

/* Level 4 items - indent 3 cấp */
.md-sidebar--primary .md-nav__item--nested .md-nav__item .md-nav__item .md-nav__link {
  padding-left: 2.75rem !important;
}

/* Overall brightness and spacing - OpenAI style */
.md-main {
  background: #ffffff !important;
}

[data-md-color-scheme="slate"] .md-main {
  background: #111827 !important;
}

.md-typeset {
  line-height: 1.6;
  color: #111827;
  font-size: 0.875rem;
  max-width: 100%;
  font-weight: 400;
}

[data-md-color-scheme="slate"] .md-typeset {
  color: #f9fafb;
}

/* Headings - OpenAI style, smaller font size */
.md-typeset h1 {
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  margin-top: 0;
  color: #111827;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

[data-md-color-scheme="slate"] .md-typeset h1 {
  color: #f9fafb;
}

.md-typeset h2 {
  font-weight: 600;
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
  color: #111827;
  line-height: 1.4;
}

[data-md-color-scheme="slate"] .md-typeset h2 {
  color: #f9fafb;
  border-bottom-color: #374151;
}

.md-typeset h3 {
  font-weight: 600;
  font-size: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: #111827;
  line-height: 1.5;
}

[data-md-color-scheme="slate"] .md-typeset h3 {
  color: #f9fafb;
}

.md-typeset h4 {
  font-weight: 600;
  font-size: 0.9375rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  color: #111827;
  line-height: 1.5;
}

[data-md-color-scheme="slate"] .md-typeset h4 {
  color: #f9fafb;
}

/* Paragraphs - OpenAI style */
.md-typeset p {
  margin-bottom: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #111827;
}

[data-md-color-scheme="slate"] .md-typeset p {
  color: #f9fafb;
}

/* Better spacing for list items - OpenAI style */
.md-typeset ul,
.md-typeset ol {
  margin-left: 1.5rem;
  margin-bottom: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #111827;
}

[data-md-color-scheme="slate"] .md-typeset ul,
[data-md-color-scheme="slate"] .md-typeset ol {
  color: #f9fafb;
}

.md-typeset li {
  margin-bottom: 0.375rem;
  line-height: 1.6;
}

/* Tables - OpenAI style, clean and readable */
.md-typeset table {
  font-size: 0.875rem;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 1.5rem 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  overflow: hidden;
  background: white;
  width: 100% !important;
  max-width: 100% !important;
  display: table;
  table-layout: auto;
}

.md-typeset table th {
  background: #f9fafb;
  color: #111827;
  font-weight: 600;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.md-typeset table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  background: white;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #111827;
}

.md-typeset table tr:last-child td {
  border-bottom: none;
}

.md-typeset table tr:hover td {
  background-color: #f9fafb;
}

.md-typeset table tbody tr {
  border-bottom: 1px solid #f3f4f6;
}

.md-typeset table tbody tr:last-child {
  border-bottom: none;
}

/* Code in table cells */
.md-typeset table td code,
.md-typeset table th code {
  background: transparent;
  padding: 0;
  font-size: 0.875rem;
  color: #000000;
  font-weight: 500;
}

[data-md-color-scheme="slate"] .md-typeset table {
  background: #1f2937;
  border-color: #374151;
}

[data-md-color-scheme="slate"] .md-typeset table th {
  background: #111827;
  color: #f9fafb;
  border-bottom-color: #374151;
}

[data-md-color-scheme="slate"] .md-typeset table td {
  background: #1f2937;
  border-bottom-color: #374151;
  color: #f9fafb;
}

[data-md-color-scheme="slate"] .md-typeset table tbody tr {
  border-bottom-color: #374151;
}

[data-md-color-scheme="slate"] .md-typeset table tr:hover td {
  background-color: #111827;
}

[data-md-color-scheme="slate"] .md-typeset table td code,
[data-md-color-scheme="slate"] .md-typeset table th code {
  color: #ffffff;
}

/* Code blocks - OpenAI style */
.md-typeset pre {
  border-radius: 0.375rem;
  padding: 1rem;
  margin: 1rem 0;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  font-size: 0.8125rem;
  line-height: 1.6;
  overflow-x: auto;
}

.md-typeset pre > code {
  border-radius: 0;
  padding: 0;
  background: transparent;
  font-size: 0.8125rem;
  color: #111827;
  font-family: 'Roboto Mono', monospace;
}

.md-typeset code {
  background: #f3f4f6;
  color: #111827;
  padding: 0.125em 0.375em;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  font-family: 'Roboto Mono', monospace;
  border: 1px solid #e5e7eb;
}

[data-md-color-scheme="slate"] .md-typeset code {
  background: #374151;
  color: #f9fafb;
  border-color: #4b5563;
}

[data-md-color-scheme="slate"] .md-typeset pre {
  background: #1f2937;
  border-color: #374151;
}

[data-md-color-scheme="slate"] .md-typeset pre > code {
  color: #f9fafb;
}

/* Ẩn script tags trong header */
.md-header__inner script {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Header height - 2rem - Sửa toàn bộ elements trong header */
.md-header {
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  position: relative !important;
  z-index: 100 !important;
  overflow: visible !important;
}

.md-header__inner {
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  padding: 0 1rem !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  line-height: 2rem !important;
  overflow: visible !important;
  position: relative !important;
}

/* Override md-grid on header inner */
.md-header__inner.md-grid {
  display: flex !important;
  grid-template-columns: none !important;
}

/* Tất cả direct children của header inner phải align center và có height 2rem */
.md-header__inner > *:not(script) {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  line-height: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

/* Ẩn script tags trong header - chúng không nên hiển thị và không nên chiếm không gian */
.md-header__inner script {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  text-indent: -9999px !important;
}

/* All buttons in header - 2rem height */
.md-header__button {
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  line-height: 2rem !important;
  margin: 0 !important;
  padding: 0 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.md-header__button svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* Header title - 2rem height */
.md-header__title {
  height: 2rem !important;
  line-height: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.md-header__ellipsis {
  height: 2rem !important;
  line-height: 2rem !important;
  display: flex !important;
  align-items: center !important;
}

.md-header__topic {
  height: 2rem !important;
  line-height: 2rem !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.md-header__topic .md-ellipsis {
  line-height: 2rem !important;
}

/* Ẩn search button và search overlay trong header - đảm bảo không che phủ */
.md-header__inner label[for="__search"],
.md-header__inner .md-header__option:has(label[for="__search"]),
.md-header__inner .md-search,
.md-search,
.md-search__overlay {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  z-index: -1 !important;
}

/* Đảm bảo không có overlay nào che phủ header và sidebar */
.md-overlay,
.md-search__overlay,
.md-dialog,
.md-dialog__backdrop {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Đảm bảo header và sidebar có thể click được */
.md-header,
.md-header__inner,
.md-sidebar,
.md-sidebar--primary,
.md-sidebar--primary .md-nav,
.md-sidebar--primary .md-nav__list,
.md-sidebar--primary .md-nav__item,
.md-sidebar--primary .md-nav__link {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Header options - 2rem height */
.md-header__option {
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  line-height: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 0.5rem !important;
}

/* Main area - adjust for header - thu hẹp khoảng trắng */
.md-main {
  padding-top: 0.5rem !important;
}

.md-main__inner {
  margin-top: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* Sidebar adjustments - OpenAI style layout */
.md-grid {
  display: block !important;
}

.md-sidebar {
  position: fixed !important;
  top: 2rem !important;
}

.md-sidebar--primary {
  width: 12rem !important;
  left: 4rem !important;
}

.md-sidebar--secondary {
  width: 12rem !important;
  right: 6rem !important;
}

/* Content area - fills space between sidebars, giãn thêm 0.5rem mỗi bên */
.md-content {
  margin-left: calc(4rem + 12rem - 0.5rem) !important;
  margin-right: calc(6rem + 12rem - 0.5rem) !important;
  width: calc(100% - 4rem - 6rem - 24rem + 1rem) !important;
  max-width: none !important;
  padding: 2rem 3rem !important;
}

.md-content__inner {
  max-width: none !important;
  width: 100% !important;
}

/* Hide mermaid diagrams */
.md-typeset .mermaid {
  display: none !important;
}

/* Footer - minimized */
.md-footer {
  padding: 1rem 0 !important;
  font-size: 0.75rem !important;
  margin-top: 2rem !important;
}

.md-footer__inner {
  padding: 0 !important;
}

/* Custom header navigation - hiển thị trong header bar, cùng hàng với các elements khác */
.md-header .custom-header-nav,
header .custom-header-nav,
.md-header__inner .custom-header-nav {
  margin-left: auto !important;
  margin-right: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  line-height: 2rem !important;
  position: relative !important;
  z-index: 100 !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.custom-header-nav ul {
  display: flex !important;
  gap: 1.5rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  height: 2rem !important;
  line-height: 2rem !important;
}

.custom-header-nav li {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 2rem !important;
  line-height: 2rem !important;
}

.custom-header-nav a {
  color: #000000 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  font-weight: 400 !important;
  box-sizing: border-box !important;
}

.custom-header-nav a:hover {
  opacity: 0.7 !important;
  color: #000000 !important;
  text-decoration: none !important;
}

.custom-header-nav a:visited {
  color: #000000 !important;
}

/* Ẩn custom nav nếu nó xuất hiện trong sidebar (sai chỗ) */
.md-sidebar .custom-header-nav {
  display: none !important;
}

/* Ensure content area doesn't have max-width constraints */
.md-main__inner {
  max-width: none !important;
}

.md-grid {
  max-width: none !important;
}

/* Responsive adjustments */
@media screen and (max-width: 76.1875em) {
  .md-sidebar--primary {
    left: 0 !important;
  }
  
  .md-content {
    margin-left: calc(12rem - 0.5rem) !important;
    margin-right: calc(6rem + 12rem - 0.5rem) !important;
    width: calc(100% - 6rem - 24rem + 1rem) !important;
    max-width: none !important;
  }
}

@media screen and (max-width: 59.9375em) {
  .md-sidebar--secondary {
    display: none;
  }
  
  .md-sidebar--primary {
    left: 0 !important;
  }
  
  .md-content {
    margin-left: calc(12rem - 0.5rem) !important;
    margin-right: -0.5rem !important;
    width: calc(100% - 12rem + 1rem) !important;
    max-width: none !important;
  }
}

}

/* Header title - 2rem height */
.md-header__title {
  height: 2rem !important;
  line-height: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.md-header__ellipsis {
  height: 2rem !important;
  line-height: 2rem !important;
  display: flex !important;
  align-items: center !important;
}

.md-header__topic {
  height: 2rem !important;
  line-height: 2rem !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.md-header__topic .md-ellipsis {
  line-height: 2rem !important;
}

/* Ẩn search button và search overlay trong header - đảm bảo không che phủ */
.md-header__inner label[for="__search"],
.md-header__inner .md-header__option:has(label[for="__search"]),
.md-header__inner .md-search,
.md-search,
.md-search__overlay {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  z-index: -1 !important;
}

/* Đảm bảo không có overlay nào che phủ header và sidebar */
.md-overlay,
.md-search__overlay,
.md-dialog,
.md-dialog__backdrop {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Đảm bảo header và sidebar có thể click được */
.md-header,
.md-header__inner,
.md-sidebar,
.md-sidebar--primary,
.md-sidebar--primary .md-nav,
.md-sidebar--primary .md-nav__list,
.md-sidebar--primary .md-nav__item,
.md-sidebar--primary .md-nav__link {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Header options - 2rem height */
.md-header__option {
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  line-height: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 0.5rem !important;
}

/* Main area - adjust for header - thu hẹp khoảng trắng */
.md-main {
  padding-top: 0.5rem !important;
}

.md-main__inner {
  margin-top: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* Sidebar adjustments - OpenAI style layout */
.md-grid {
  display: block !important;
}

.md-sidebar {
  position: fixed !important;
  top: 2rem !important;
}

.md-sidebar--primary {
  width: 12rem !important;
  left: 4rem !important;
}

.md-sidebar--secondary {
  width: 12rem !important;
  right: 6rem !important;
}

/* Content area - fills space between sidebars, giãn thêm 0.5rem mỗi bên */
.md-content {
  margin-left: calc(4rem + 12rem - 0.5rem) !important;
  margin-right: calc(6rem + 12rem - 0.5rem) !important;
  width: calc(100% - 4rem - 6rem - 24rem + 1rem) !important;
  max-width: none !important;
  padding: 2rem 3rem !important;
}

.md-content__inner {
  max-width: none !important;
  width: 100% !important;
}

/* Hide mermaid diagrams */
.md-typeset .mermaid {
  display: none !important;
}

/* Footer - minimized */
.md-footer {
  padding: 1rem 0 !important;
  font-size: 0.75rem !important;
  margin-top: 2rem !important;
}

.md-footer__inner {
  padding: 0 !important;
}

/* Custom header navigation - hiển thị trong header bar, cùng hàng với các elements khác */
.md-header .custom-header-nav,
header .custom-header-nav,
.md-header__inner .custom-header-nav {
  margin-left: auto !important;
  margin-right: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  line-height: 2rem !important;
  position: relative !important;
  z-index: 100 !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.custom-header-nav ul {
  display: flex !important;
  gap: 1.5rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  height: 2rem !important;
  line-height: 2rem !important;
}

.custom-header-nav li {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 2rem !important;
  line-height: 2rem !important;
}

.custom-header-nav a {
  color: #000000 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  font-weight: 400 !important;
  box-sizing: border-box !important;
}

.custom-header-nav a:hover {
  opacity: 0.7 !important;
  color: #000000 !important;
  text-decoration: none !important;
}

.custom-header-nav a:visited {
  color: #000000 !important;
}

/* Ẩn custom nav nếu nó xuất hiện trong sidebar (sai chỗ) */
.md-sidebar .custom-header-nav {
  display: none !important;
}

/* Ensure content area doesn't have max-width constraints */
.md-main__inner {
  max-width: none !important;
}

.md-grid {
  max-width: none !important;
}

/* Responsive adjustments */
@media screen and (max-width: 76.1875em) {
  .md-sidebar--primary {
    left: 0 !important;
  }
  
  .md-content {
    margin-left: calc(12rem - 0.5rem) !important;
    margin-right: calc(6rem + 12rem - 0.5rem) !important;
    width: calc(100% - 6rem - 24rem + 1rem) !important;
    max-width: none !important;
  }
}

@media screen and (max-width: 59.9375em) {
  .md-sidebar--secondary {
    display: none;
  }
  
  .md-sidebar--primary {
    left: 0 !important;
  }
  
  .md-content {
    margin-left: calc(12rem - 0.5rem) !important;
    margin-right: -0.5rem !important;
    width: calc(100% - 12rem + 1rem) !important;
    max-width: none !important;
  }
}