@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
body {
  font-family: 'Raleway', serif;
}


body[data-md-color-scheme="default"] {
  position: relative;
  background: url('../public/images/bg-home.webp') no-repeat center center fixed !important;
  background-size: cover !important;
}

body[data-md-color-scheme="slate"] {
  background: url('../public/images/bg-home.webp') no-repeat center center fixed !important;
  background-size: cover !important;
}

.md-nav__title {
  background: none !important;
  box-shadow: none !important;
}

/* Light theme */
[data-md-color-scheme="default"] .md-main {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(2px);
}

/* Dark theme */
[data-md-color-scheme="slate"] .md-main {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(2px);
}

.md-overlay {
  display: none !important;
}

[data-md-color-scheme="default"] .md-footer {
  background-color: rgba(255, 255, 255, 0.92) !important;
}

[data-md-color-scheme="slate"] .md-footer {
  background-color: rgba(0, 0, 0, 0.88) !important;
}

.md-footer-meta {
  background-color: transparent !important;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.md-copyright {
  opacity: 0.9; 
}

/* Icon mạng xã hội */
.md-social__link {
  transition: opacity 0.3s;
}

.md-social__link:hover {
  opacity: 0.7;
}

.md-footer-meta__inner {
  justify-content: center !important;
  text-align: center;
}

[data-md-color-scheme="slate"] .md-copyright__highlight {
  color: white !important;
}

[data-md-color-scheme="default"] .md-copyright__highlight {
  color: black !important;
}

.md-copyright__highlight::before {
  content: "© ";
  font-size: 1.2em;
}

.text-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.text-with-icon img.small {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.text-with-icon img.medium {
  width: 24px;
  height: 24px;
}

.text-with-icon img.large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.center-table {
  text-align: center;
}
.md-typeset .center-table :is(td,th):not([align]) {
  text-align: initial; /* Reset alignment for table cells */
}