/* Lớp giao diện bổ sung, không thay thế các selector legacy đang được sử dụng. */
:root {
  --site-primary: #5b1020;
  --site-primary-dark: #3b0713;
  --site-accent: #f4b41a;
  --site-surface: #ffffff;
  --site-background: #f5f7fb;
  --site-text: #202938;
  --site-muted: #687385;
  --site-radius: 14px;
  --site-shadow: 0 10px 30px rgba(25, 35, 55, .08);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--site-background);
  color: var(--site-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

body img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--site-primary);
  transition: color .2s ease, opacity .2s ease;
}

a:hover {
  color: var(--site-primary-dark);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(244, 180, 26, .75);
  outline-offset: 2px;
}

.title_top {
  background: linear-gradient(110deg, var(--site-primary-dark), var(--site-primary)) !important;
}

.menutop_bar {
  background: var(--site-primary) !important;
  box-shadow: 0 2px 12px rgba(59, 7, 19, .18);
}

.menutop_bar a,
.menu_mobile_list a {
  transition: background-color .2s ease, color .2s ease;
}

#content,
#center-content {
  background: transparent;
}

.breadcrumb {
  border-radius: 0 0 var(--site-radius) var(--site-radius);
  padding: 4px 12px;
}

.breadcrumb a {
  color: #fff;
}

/* Bọc ngang các bảng cũ trên màn hình nhỏ, không thay đổi dữ liệu hoặc markup. */
table {
  max-width: 100%;
}

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .content-main,
  .conten-main,
  #content,
  #center-content {
    width: 100%;
    max-width: 100%;
  }

  .table-responsive,
  .table-wrap,
  .box-table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hearder_mobile {
    box-shadow: 0 2px 12px rgba(25, 35, 55, .12);
  }

  .menumobiletop {
    box-shadow: 0 12px 24px rgba(25, 35, 55, .18);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}