/*!
 * moldich-ui.css — giao diện Mol Dịch
 *
 * Tối giản: không hộp lồng hộp, không bóng đổ, không viền bao quanh nội dung.
 * Phân cấp đến từ chữ, khoảng trắng và một đường kẻ mảnh. Chỉ giữ đúng một
 * màu nhấn cho hành động chính và trạng thái hiện tại.
 */

/* ==========================================================================
   1. Token
   ========================================================================== */

:root,
[data-bs-theme="light"] {
  --md-paper: #fcfcfa;
  --md-paper-2: #f4f4f0;
  --md-paper-3: #eceae4;
  --md-ink: #1a1a18;
  --md-ink-2: #55554f;
  --md-ink-3: #6b6b63;
  --md-line: #e3e2dc;
  --md-line-2: #cfcec7;

  --md-accent: #1a6b54;
  --md-accent-strong: #12513f;
  --md-accent-tint: #eaf1ee;
  --md-accent-rgb: 26, 107, 84;

  --md-warn: #8a5a0b;
  --md-warn-tint: #f8f1e2;
  --md-danger: #a5241d;
  --md-danger-tint: #f9ebe9;

  --md-focus: #1a6b54;

  /* Thang chữ cố định, tỉ lệ ~1.2 */
  --md-t-micro: .8125rem;
  --md-t-body: .9375rem;
  --md-t-lead: 1.0625rem;
  --md-t-h2: 1.25rem;
  --md-t-h1: 1.625rem;

  --md-r: 8px;
  --md-ease: cubic-bezier(.2, .7, .3, 1);
  --md-dur: 150ms;
}

[data-bs-theme="dark"] {
  --md-paper: #131413;
  --md-paper-2: #1b1c1a;
  --md-paper-3: #242622;
  --md-ink: #e8e8e3;
  --md-ink-2: #a8a8a0;
  --md-ink-3: #8f8f87;
  --md-line: #2a2c28;
  --md-line-2: #3a3d38;

  --md-accent: #66c9a8;
  --md-accent-strong: #8ad9bf;
  --md-accent-tint: #17302a;
  --md-accent-rgb: 102, 201, 168;

  --md-warn: #d9ac66;
  --md-warn-tint: #2b2417;
  --md-danger: #e89089;
  --md-danger-tint: #2f1d1b;

  --md-focus: #66c9a8;
}

/* ==========================================================================
   2. Nền tảng
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0 auto;
  max-width: 46rem;
  min-height: 100vh;
  background: var(--md-paper);
  color: var(--md-ink);
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--md-t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--md-ink);
}

h1 { font-size: var(--md-t-h1); letter-spacing: -.025em; }
h2 { font-size: var(--md-t-h2); }
h3 { font-size: var(--md-t-body); }

p { margin: 0 0 .75em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--md-accent);
  text-decoration: none;
  transition: color var(--md-dur) var(--md-ease);
}

a:hover {
  text-decoration: underline;
  text-underline-offset: .16em;
}

::selection {
  background: color-mix(in srgb, var(--md-accent) 22%, transparent);
}

:where(input, textarea) { caret-color: var(--md-accent); }

* {
  scrollbar-width: thin;
  scrollbar-color: var(--md-line-2) transparent;
}

:focus-visible {
  outline: 2px solid var(--md-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ==========================================================================
   3. Khung trang
   ========================================================================== */

.md-main {
  padding: 2.5rem 1.25rem 4rem;
}

.md-head {
  margin-bottom: 2rem;
}

.md-head h1 {
  margin-bottom: 1rem;
}

/* ==========================================================================
   4. Nhập và nút
   ========================================================================== */

.md-input {
  width: 100%;
  padding: .55rem .7rem;
  font-family: inherit;
  font-size: var(--md-t-body);
  line-height: 1.5;
  color: var(--md-ink);
  background: var(--md-paper);
  border: 1px solid var(--md-line-2);
  border-radius: var(--md-r);
  transition: border-color var(--md-dur) var(--md-ease), box-shadow var(--md-dur) var(--md-ease);
  appearance: none;
}

.md-input::placeholder { color: var(--md-ink-3); opacity: 1; }

.md-input:hover { border-color: var(--md-ink-3); }

.md-input:focus {
  outline: none;
  border-color: var(--md-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-accent) 15%, transparent);
}

.md-input[readonly] {
  border-color: transparent;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  cursor: text;
}

textarea.md-input {
  min-height: 4.5rem;
  resize: vertical;
  font-size: var(--md-t-micro);
}

.md-search {
  display: flex;
  gap: .4rem;
}

.md-search .md-input { flex: 1; }

.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .55rem .9rem;
  font-family: inherit;
  font-size: var(--md-t-micro);
  font-weight: 600;
  line-height: 1.4;
  color: var(--md-ink);
  background: transparent;
  border: 1px solid var(--md-line-2);
  border-radius: var(--md-r);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--md-dur) var(--md-ease),
              border-color var(--md-dur) var(--md-ease),
              color var(--md-dur) var(--md-ease);
}

.md-btn:hover {
  background: var(--md-paper-2);
  border-color: var(--md-ink-3);
}

.md-btn--primary {
  color: #fff;
  background: var(--md-accent);
  border-color: var(--md-accent);
}

.md-btn--primary:hover {
  color: #fff;
  background: var(--md-accent-strong);
  border-color: var(--md-accent-strong);
}

[data-bs-theme="dark"] .md-btn--primary { color: #08130f; }
[data-bs-theme="dark"] .md-btn--primary:hover { color: #08130f; }

.md-icon-btn {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: .8125rem;
  color: var(--md-ink-3);
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: color var(--md-dur) var(--md-ease), background-color var(--md-dur) var(--md-ease);
}

.md-icon-btn:hover {
  color: var(--md-ink);
  background: var(--md-paper-2);
}

/* ==========================================================================
   5. Khối nội dung: chỉ một đường kẻ phía trên, không hộp
   ========================================================================== */

.md-sec {
  padding-top: 1.5rem;
  margin-top: 1.75rem;
  border-top: 1px solid var(--md-line);
}

.md-sec__label {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0 0 1rem;
  font-size: var(--md-t-micro);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--md-ink-3);
}

.md-sec__sub {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--md-ink-3);
}

/* ==========================================================================
   6. Kết quả: danh sách phẳng
   ========================================================================== */

.md-results {
  margin: 0 0 .5rem;
  padding: 0;
  list-style: none;
}

.md-result {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid var(--md-line);
}

.md-result:last-child { border-bottom: 0; }

.md-result__val {
  flex: 1;
  min-width: 0;
  padding: .5rem 0;
  font-family: inherit;
  font-size: var(--md-t-lead);
  color: var(--md-accent);
  background: transparent;
  border: 0;
  cursor: text;
}

.md-result__val:focus {
  outline: none;
  box-shadow: inset 0 -1px 0 var(--md-accent);
}

/* ==========================================================================
   7. Góp ý: mở ra tại chỗ, không phải hộp thoại
   ========================================================================== */

.md-gopy {
  margin-top: .75rem;
}

.md-gopy > summary,
.md-more > summary {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem 0;
  font-size: var(--md-t-micro);
  color: var(--md-ink-2);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: color var(--md-dur) var(--md-ease);
}

.md-gopy > summary::-webkit-details-marker,
.md-more > summary::-webkit-details-marker { display: none; }

.md-gopy > summary::before,
.md-more > summary::before {
  content: "+";
  display: inline-block;
  width: .8rem;
  font-weight: 600;
  color: var(--md-ink-3);
}

.md-gopy[open] > summary::before,
.md-more[open] > summary::before { content: "−"; }

.md-gopy > summary:hover,
.md-more > summary:hover { color: var(--md-ink); }

.md-gopy__body {
  display: flex;
  gap: .4rem;
  margin-top: .6rem;
}

.md-gopy__body .md-input { flex: 1; }

.md-gopy__hint {
  margin-top: .4rem;
  font-size: .75rem;
  color: var(--md-ink-3);
}

/* ==========================================================================
   8. Chip chọn công cụ
   ========================================================================== */

.md-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.md-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .6rem;
  font-family: inherit;
  font-size: var(--md-t-micro);
  font-weight: 500;
  color: var(--md-ink-2);
  background: transparent;
  border: 1px solid var(--md-line-2);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--md-dur) var(--md-ease),
              border-color var(--md-dur) var(--md-ease),
              background-color var(--md-dur) var(--md-ease);
}

.md-chip:hover {
  color: var(--md-ink);
  border-color: var(--md-ink-3);
  background: var(--md-paper-2);
}

.md-chip span {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--md-ink-3);
}

.md-chip:hover span { color: var(--md-ink-2); }

.md-out {
  margin-top: 1rem;
}

.md-out__act {
  display: flex;
  gap: .4rem;
  margin-top: .5rem;
}

/* ==========================================================================
   10. Liên kết ngoài
   ========================================================================== */

.md-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem;
  margin-top: .9rem;
}

.md-links__col {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.md-links__title {
  margin: 0 0 .35rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--md-ink-3);
}

.md-links__col a,
.md-links__btn {
  padding: .15rem 0;
  font-family: inherit;
  font-size: var(--md-t-micro);
  text-align: left;
  color: var(--md-ink-2);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--md-dur) var(--md-ease);
}

.md-links__col a:hover,
.md-links__btn:hover {
  color: var(--md-accent);
  text-decoration: none;
}

/* ==========================================================================
   10. Điều hướng trong trang
   ========================================================================== */

.md-inline {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem 1rem;
  font-size: var(--md-t-micro);
}

.md-inline a {
  color: var(--md-ink-2);
  transition: color var(--md-dur) var(--md-ease);
}

.md-inline a:hover { color: var(--md-accent); text-decoration: none; }

.md-inline__all { margin-left: auto; }

/* ==========================================================================
   11. Trạng thái trống
   ========================================================================== */

.md-empty__body {
  margin: 0;
  max-width: 52ch;
  font-size: var(--md-t-micro);
  line-height: 1.6;
  color: var(--md-ink-2);
}

/* ==========================================================================
   12. Thanh điều hướng
   ========================================================================== */

.md-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: color-mix(in srgb, var(--md-paper) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--md-line);
}

.md-nav__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 46rem;
  margin: 0 auto;
  padding: .55rem 1.25rem;
}

.md-brand {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  color: var(--md-ink);
  flex-shrink: 0;
}

.md-brand:hover { text-decoration: none; }

.md-brand__name {
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.md-brand__sub {
  font-size: .625rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--md-ink-3);
  line-height: 1.2;
}

.md-nav__links {
  display: flex;
  align-items: center;
  gap: .1rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.md-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .5rem;
  font-size: var(--md-t-micro);
  font-weight: 500;
  color: var(--md-ink-2);
  border-radius: 6px;
  cursor: pointer;
  transition: color var(--md-dur) var(--md-ease);
}

.md-nav__link:hover,
.md-nav__link[aria-current="page"] {
  color: var(--md-ink);
  text-decoration: none;
}

/* Menu tiện ích */
.md-menu { position: relative; }

.md-menu > summary { list-style: none; user-select: none; }
.md-menu > summary::-webkit-details-marker { display: none; }

.md-menu__panel {
  position: absolute;
  top: calc(100% + .3rem);
  left: 0;
  z-index: 1040;
  min-width: 13rem;
  padding: .3rem;
  background: var(--md-paper);
  border: 1px solid var(--md-line);
  border-radius: var(--md-r);
}

.md-menu__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem;
  font-size: var(--md-t-micro);
  color: var(--md-ink);
  border-radius: 5px;
  transition: background-color var(--md-dur) var(--md-ease);
}

.md-menu__item:hover {
  background: var(--md-paper-2);
  text-decoration: none;
}

.md-menu__item i { width: .9rem; text-align: center; color: var(--md-ink-3); }

.md-menu__sep { height: 1px; margin: .25rem .3rem; background: var(--md-line); }

.md-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  color: var(--md-ink-3);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: color var(--md-dur) var(--md-ease), background-color var(--md-dur) var(--md-ease);
}

.md-theme-btn:hover { color: var(--md-ink); background: var(--md-paper-2); }

/* ==========================================================================
   13. Tiêu đề trang cho các trang công cụ
   ========================================================================== */

.md-page-head {
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--md-line);
}

.md-page-head h1 { margin-bottom: .3rem; }

.md-page-head__sub {
  margin: 0;
  font-size: var(--md-t-micro);
  color: var(--md-ink-2);
  max-width: 56ch;
}

/* ==========================================================================
   14. Danh mục công cụ
   ========================================================================== */

.md-group + .md-group { margin-top: 2rem; }

.md-group__title {
  margin: 0 0 .6rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--md-ink-3);
}

.md-tools {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--md-line);
}

.md-tool {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--md-line);
  color: var(--md-ink);
  transition: color var(--md-dur) var(--md-ease);
}

.md-tool:hover { text-decoration: none; }
.md-tool:hover .md-tool__name { color: var(--md-accent); }
.md-tool:hover .md-tool__icon { color: var(--md-accent); }

.md-tool__icon {
  flex-shrink: 0;
  width: 1.1rem;
  text-align: center;
  font-size: .8125rem;
  color: var(--md-ink-3);
  transition: color var(--md-dur) var(--md-ease);
}

.md-tool__body {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  min-width: 0;
}

.md-tool__name {
  font-size: var(--md-t-body);
  font-weight: 500;
  line-height: 1.4;
  transition: color var(--md-dur) var(--md-ease);
}

.md-tool__desc {
  font-size: var(--md-t-micro);
  color: var(--md-ink-2);
  line-height: 1.45;
}

/* ==========================================================================
   15. Chân trang
   ========================================================================== */

.md-foot {
  margin-top: 3rem;
  border-top: 1px solid var(--md-line);
}

.md-foot__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
}

.md-foot__brand {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: var(--md-t-micro);
}

.md-foot__name { font-weight: 600; color: var(--md-ink); }
.md-foot__copy { color: var(--md-ink-3); }

.md-foot__links {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.md-foot__links a {
  padding: .2rem .35rem;
  font-size: var(--md-t-micro);
  color: var(--md-ink-2);
}

.md-foot__links a:hover { color: var(--md-accent); text-decoration: none; }

.md-foot__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  font-size: .8125rem;
  color: var(--md-ink-3);
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: color var(--md-dur) var(--md-ease), background-color var(--md-dur) var(--md-ease);
}

.md-foot__btn:hover { color: var(--md-ink); background: var(--md-paper-2); }

/* ==========================================================================
   16. Thông báo nổi
   ========================================================================== */

.md-toasts {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}

.md-toast {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .55rem .65rem;
  font-size: var(--md-t-micro);
  line-height: 1.45;
  color: var(--md-ink);
  background: var(--md-paper);
  border: 1px solid var(--md-line-2);
  border-radius: var(--md-r);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms var(--md-ease), transform 160ms var(--md-ease);
}

.md-toast.is-in { opacity: 1; transform: none; }

.md-toast > i { padding-top: .1rem; color: var(--md-ink-3); }
.md-toast--success > i { color: var(--md-accent); }
.md-toast--warning > i { color: var(--md-warn); }
.md-toast--danger > i { color: var(--md-danger); }

.md-toast__body { flex: 1; min-width: 0; }

.md-toast__close {
  flex-shrink: 0;
  padding: 0 .1rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--md-ink-3);
  background: none;
  border: 0;
  cursor: pointer;
}

.md-toast__close:hover { color: var(--md-ink); }

/* ==========================================================================
   17. Bootstrap: ghi đè tối thiểu
   ========================================================================== */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-bg: var(--md-paper);
  --bs-body-color: var(--md-ink);
  --bs-border-color: var(--md-line);
  --bs-primary: var(--md-accent);
  --bs-primary-rgb: var(--md-accent-rgb);
  --bs-link-color: var(--md-accent);
  --bs-link-hover-color: var(--md-accent-strong);
  --bs-secondary-color: var(--md-ink-2);
  --bs-emphasis-color: var(--md-ink);
  --bs-tertiary-bg: var(--md-paper-2);
  --bs-secondary-bg: var(--md-paper-2);
  --bs-heading-color: var(--md-ink);
  --bs-border-radius: var(--md-r);
  --bs-border-radius-lg: var(--md-r);
}

.text-primary { color: var(--md-accent) !important; }
.text-muted { color: var(--md-ink-2) !important; }
.text-success { color: var(--md-accent) !important; }
.text-danger { color: var(--md-danger) !important; }
.text-warning { color: var(--md-warn) !important; }
.text-info { color: var(--md-ink-2) !important; }
.bg-primary { background-color: var(--md-accent) !important; }
.bg-body-tertiary { background-color: var(--md-paper-2) !important; }

/* Card cũ: bỏ hộp, chỉ còn đường kẻ trên */
.card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--md-line);
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 1.75rem;
}

.card:hover { transform: none; border-color: var(--md-line); }

.card-header {
  padding: .7rem 0 .5rem;
  background: transparent;
  border-bottom: 1px solid var(--md-line);
  color: var(--md-ink);
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5 {
  margin: 0;
  font-size: var(--md-t-body);
  color: var(--md-ink);
}

.card-body { padding: .9rem 0 0; }
.card-title { font-size: var(--md-t-lead); margin-bottom: .3rem; }
.card-text { font-size: var(--md-t-micro); color: var(--md-ink-2); }

.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }

.alert {
  padding: .7rem .85rem;
  border: 1px solid var(--md-line);
  border-radius: var(--md-r);
  background: var(--md-paper-2);
  color: var(--md-ink);
  font-size: var(--md-t-micro);
}

.alert-success {
  background: var(--md-accent-tint);
  border-color: color-mix(in srgb, var(--md-accent) 25%, var(--md-line));
}

.alert-warning {
  background: var(--md-warn-tint);
  border-color: color-mix(in srgb, var(--md-warn) 28%, var(--md-line));
}

.alert-danger {
  background: var(--md-danger-tint);
  border-color: color-mix(in srgb, var(--md-danger) 28%, var(--md-line));
}

.alert-heading { font-size: var(--md-t-body); font-weight: 600; margin-bottom: .3rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .45rem .8rem;
  font-family: inherit;
  font-size: var(--md-t-micro);
  font-weight: 600;
  line-height: 1.4;
  color: var(--md-ink);
  background: transparent;
  border: 1px solid var(--md-line-2);
  border-radius: var(--md-r);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--md-dur) var(--md-ease),
              border-color var(--md-dur) var(--md-ease),
              color var(--md-dur) var(--md-ease);
}

.btn:hover { background: var(--md-paper-2); border-color: var(--md-ink-3); color: var(--md-ink); text-decoration: none; }
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-sm { padding: .3rem .55rem; font-size: .75rem; }
.btn-lg { padding: .55rem .95rem; font-size: var(--md-t-body); }

.btn-primary { color: #fff; background: var(--md-accent); border-color: var(--md-accent); }
.btn-primary:hover { color: #fff; background: var(--md-accent-strong); border-color: var(--md-accent-strong); }
[data-bs-theme="dark"] .btn-primary { color: #08130f; }
[data-bs-theme="dark"] .btn-primary:hover { color: #08130f; }

.btn-outline-primary { color: var(--md-accent); border-color: color-mix(in srgb, var(--md-accent) 40%, var(--md-line-2)); }
.btn-outline-primary:hover { color: #fff; background: var(--md-accent); border-color: var(--md-accent); }
[data-bs-theme="dark"] .btn-outline-primary:hover { color: #08130f; }

.btn-outline-secondary, .btn-outline-dark, .btn-outline-success {
  color: var(--md-ink-2);
  border-color: var(--md-line-2);
}

.btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-outline-success:hover {
  color: var(--md-ink);
  background: var(--md-paper-2);
  border-color: var(--md-ink-3);
}

.form-control, .form-select {
  display: block;
  width: 100%;
  padding: .5rem .65rem;
  font-family: inherit;
  font-size: var(--md-t-body);
  line-height: 1.5;
  color: var(--md-ink);
  background: var(--md-paper);
  border: 1px solid var(--md-line-2);
  border-radius: var(--md-r);
  transition: border-color var(--md-dur) var(--md-ease), box-shadow var(--md-dur) var(--md-ease);
}

.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--md-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-accent) 15%, transparent);
}

.form-control::placeholder { color: var(--md-ink-3); opacity: 1; }
textarea.form-control { resize: vertical; min-height: 4.5rem; }
.form-check-input { accent-color: var(--md-accent); }
.form-label { margin-bottom: .3rem; font-size: var(--md-t-micro); font-weight: 600; color: var(--md-ink-2); }
.form-text { font-size: .75rem; color: var(--md-ink-3); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: .1rem .35rem;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 600;
  color: var(--md-ink-2);
  background: transparent;
  border: 1px solid var(--md-line-2);
  border-radius: 4px;
  white-space: nowrap;
}

.badge.bg-primary, .badge.bg-info, .badge.bg-success,
.badge.bg-warning, .badge.bg-secondary, .badge.bg-light, .badge.bg-dark {
  color: var(--md-ink-2);
  background: transparent;
  border: 1px solid var(--md-line-2);
}

.badge.bg-primary { color: var(--md-accent); border-color: color-mix(in srgb, var(--md-accent) 35%, var(--md-line)); }

mark {
  padding: .05em .18em;
  color: var(--md-ink);
  background: color-mix(in srgb, var(--md-accent) 14%, transparent);
  border-radius: 2px;
}

.md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--md-t-micro);
  font-variant-numeric: tabular-nums;
}

.md-table th {
  padding: .45rem .5rem;
  text-align: left;
  font-weight: 600;
  color: var(--md-ink-2);
  border-bottom: 1px solid var(--md-line-2);
  white-space: nowrap;
}

.md-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--md-line); vertical-align: top; }
.md-table tbody tr:hover { background: var(--md-paper-2); }
.md-num { font-variant-numeric: tabular-nums; }

textarea.mono, pre.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .75rem;
  line-height: 1.6;
}

pre.scroll-box {
  max-height: 22rem;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.md-drop {
  display: block;
  padding: 1.25rem;
  text-align: center;
  border: 1px dashed var(--md-line-2);
  border-radius: var(--md-r);
  cursor: pointer;
  transition: border-color var(--md-dur) var(--md-ease), background-color var(--md-dur) var(--md-ease);
}

.md-drop:hover, .md-drop.is-dragover {
  border-color: var(--md-accent);
  background: var(--md-accent-tint);
}

/* Trang công cụ cũ bọc trong .container; bỏ tầng thu hẹp để thẳng hàng nav */
body > .container {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

body > .container > .row.justify-content-center > [class*="col-"] {
  flex: 0 0 100%;
  width: 100%;
  max-width: none;
}

/* ==========================================================================
   18. Tiện ích
   ========================================================================== */

.md-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.min-w-0 { min-width: 0; }
img { max-width: 100%; height: auto; }
.md-table-wrap { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .md-nav, .md-foot, .md-theme-btn, .md-btn, .md-chip { display: none !important; }
  body { background: #fff; color: #000; max-width: none; }
  .card, .md-sec { border-color: #ccc; }
}

@media (max-width: 640px) {
  .md-main { padding: 1.75rem 1rem 3rem; }
  .md-search { flex-direction: column; }
  .md-inline { gap: .1rem .75rem; }
  .md-inline__all { margin-left: 0; }
  .md-result__val { font-size: var(--md-t-body); }
}