/* ==========================================================================
   STANDARD: bộ giao diện chuẩn của DataVault (thay dần template/vendor: Bootstrap + icon mdi còn lại)
   Cùng ngôn ngữ thiết kế với Whiteboard (DESIGN.md): chữ Inter, nét mảnh 1px, nút và thẻ vuông vức,
   màu thương hiệu #004aad, tab có gạch chân, nền chấm lưới như bảng vẽ.
   Quy ước: tiền tố .sd-, không phụ thuộc Bootstrap / Hyper, chữ không đậm quá 600.
   Mục lục: 1 Token · 2 Nền · 3 Bố cục · 4 Thanh đầu · 5 Nút · 6 Thành phần · 7 Trang · 8 Chân trang · 9 Co giãn · 10 Admin · 11 Đăng nhập · 12 Form, modal, spinner (thay Bootstrap) · 13 Chế độ tối
   ========================================================================== */

/* 1. Token ------------------------------------------------------------------ */
:root {
  --sd-brand: #004aad;
  --sd-brand-dark: #003b8a;
  --sd-brand-50: #eef4fd;
  --sd-brand-100: #dbe7fb;

  --sd-ui-0: #ffffff;
  --sd-ui-50: #f8fafc;
  --sd-ui-100: #f1f5f9;
  --sd-ui-200: #e2e8f0;
  --sd-ui-300: #cbd5e1;
  --sd-ui-400: #94a3b8;
  --sd-ui-500: #64748b;
  --sd-ui-600: #475569;
  --sd-ui-700: #475569;
  /* Màu "đen" của chữ đậm / tiêu đề: xanh xám (slate-700), dịu hơn #0f172a / #1e293b nhưng vẫn đủ tương phản (≈ 10:1 trên nền trắng) */
  --sd-ui-900: #334155;

  --sd-font: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --sd-header-h: 78px;
  --sd-container: 1160px;
  --sd-gutter: 20px;
}

/* 2. Nền -------------------------------------------------------------------- */
.sd-body,
.sd-body *,
.sd-body *::before,
.sd-body *::after {
  box-sizing: border-box;
}
.sd-body {
  margin: 0;
  background: var(--sd-ui-0);
  color: var(--sd-ui-700);
  font: 400 15px/1.7 var(--sd-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sd-body img {
  max-width: 100%;
  height: auto;
  display: block;
}
.sd-body a {
  color: var(--sd-brand);
  text-decoration: none;
}
.sd-body a:hover {
  color: var(--sd-brand-dark);
}
.sd-body h1,
.sd-body h2,
.sd-body h3,
.sd-body h4 {
  margin: 0 0 10px;
  color: var(--sd-ui-900);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.sd-body h1 {
  font-size: 40px;
  letter-spacing: -0.025em;
}
.sd-body h2 {
  font-size: 26px;
}
.sd-body h3 {
  font-size: 16px;
}
.sd-body h4 {
  font-size: 14px;
}
.sd-body p {
  margin: 0 0 14px;
}
.sd-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sd-body :focus-visible {
  outline: 2px solid color-mix(in srgb, var(--sd-brand) 60%, transparent);
  outline-offset: 2px;
}
.sd-muted {
  color: var(--sd-ui-500);
}
.sd-small {
  font-size: 13px;
}
.sd-center {
  text-align: center;
}
.sd-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 3. Bố cục ----------------------------------------------------------------- */
.sd-container {
  width: 100%;
  max-width: calc(var(--sd-container) + 2 * var(--sd-gutter));
  margin: 0 auto;
  padding: 0 var(--sd-gutter);
}
.sd-section {
  padding: 64px 0;
}
.sd-section--tint {
  background: var(--sd-ui-50);
  border-top: 1px solid var(--sd-ui-200);
  border-bottom: 1px solid var(--sd-ui-200);
}
.sd-section-head {
  max-width: 620px;
  margin: 0 auto 32px;
  text-align: center;
}
.sd-section-head p {
  margin: 0;
  color: var(--sd-ui-500);
}
/* Nhãn nhỏ viết hoa, giống tiêu đề nhóm công cụ của Whiteboard */
.sd-eyebrow {
  display: block;
  margin: 0 0 10px;
  color: var(--sd-ui-500);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sd-grid {
  display: grid;
  gap: 16px;
}
.sd-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sd-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sd-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sd-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.sd-stack > * + * {
  margin-top: 16px;
}
.sd-aside-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.sd-aside-layout > aside {
  position: sticky;
  top: calc(var(--sd-header-h) + 16px);
}

/* 4. Thanh đầu: tầng trên là thương hiệu + tài khoản, tầng dưới là menu các trang (tab có gạch chân) ---- */
.sd-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--sd-ui-0);
  border-bottom: 1px solid var(--sd-ui-200);
}
.sd-topbar__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--sd-header-h);
}
.sd-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  color: var(--sd-ui-900) !important;
}
.sd-brand img {
  width: 56px;
  height: 56px;
}
.sd-brand__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}
.sd-brand__text small {
  color: var(--sd-ui-500);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.sd-brand__text strong {
  color: var(--sd-brand);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sd-brand__slogan {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-left: 4px;
  padding-left: 16px;
  border-left: 1px solid var(--sd-ui-200);
  color: var(--sd-ui-500);
  font-size: 12.5px;
  line-height: 1.25;
}
.sd-brand__slogan strong {
  color: var(--sd-ui-900);
  font-size: 13px;
  font-weight: 500;
}
.sd-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
/* Thanh menu: nền xanh thương hiệu, chữ trắng, khoảng cách rộng để nổi bật hẳn so với nội dung */
.sd-menubar {
  background: var(--sd-brand);
}
.sd-nav {
  display: flex;
  align-items: stretch;
  gap: 4px;
  height: 48px;
}
.sd-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 22px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.86) !important;
  font: 500 14px/1 var(--sd-font);
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.sd-nav__link::after {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 3px;
  background: transparent;
}
.sd-nav__link:hover,
.sd-dropdown.is-open > .sd-nav__link {
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
}
.sd-nav__link.is-active {
  background: rgba(255, 255, 255, 0.16);
  color: #fff !important;
}
.sd-nav__link.is-active::after {
  background: #fff;
}
.sd-nav__caret {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sd-dropdown {
  position: relative;
  display: flex;
}
.sd-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: none;
  min-width: 230px;
  max-height: 70vh;
  overflow: auto;
  padding: 4px 0;
  background: var(--sd-ui-0);
  border: 1px solid var(--sd-ui-200);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.sd-dropdown__menu--right {
  left: auto;
  right: 0;
}
.sd-dropdown.is-open > .sd-dropdown__menu {
  display: block;
}
.sd-dropdown__item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  background: transparent;
  border: 0;
  color: var(--sd-ui-700) !important;
  font: 400 13.5px/1.5 var(--sd-font);
  text-align: left;
  cursor: pointer;
}
.sd-dropdown__item:hover {
  background: var(--sd-ui-100);
  color: var(--sd-ui-900) !important;
}
.sd-dropdown__item--strong {
  font-weight: 500;
  color: var(--sd-ui-900) !important;
}
.sd-dropdown__item--sub {
  padding-left: 30px;
  color: var(--sd-ui-600) !important;
}
.sd-dropdown__sep {
  height: 1px;
  margin: 4px 0;
  background: var(--sd-ui-200);
}
.sd-dropdown__note {
  display: block;
  padding: 8px 16px;
  color: var(--sd-ui-500);
  font-size: 12.5px;
  font-style: italic;
}
/* Tài khoản đã đăng nhập: tên + email + ô chữ cái đầu */
.sd-user {
  display: none;
}
.sd-signed-in .sd-user {
  display: flex;
}
.sd-signed-in [data-sd-guest] {
  display: none;
}
.sd-user__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px 0 6px;
  background: var(--sd-ui-0);
  border: 1px solid var(--sd-ui-200);
  border-radius: 0;
  color: var(--sd-ui-700);
  font: 400 13px/1.2 var(--sd-font);
  text-align: left;
  cursor: pointer;
}
.sd-user__btn:hover,
.sd-user.is-open > .sd-user__btn {
  border-color: var(--sd-brand);
}
.sd-user__avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  background: var(--sd-brand-50);
  color: var(--sd-brand);
  font-size: 13px;
  font-weight: 600;
}
.sd-user__text {
  display: flex;
  flex-direction: column;
  max-width: 190px;
}
.sd-user__text strong {
  overflow: hidden;
  color: var(--sd-ui-900);
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-user__text small {
  overflow: hidden;
  color: var(--sd-ui-500);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sd-user__text small:empty {
  display: none;
}
.sd-burger {
  display: none;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--sd-ui-200);
  border-radius: 0;
  color: var(--sd-ui-700);
  cursor: pointer;
}
.sd-burger svg {
  width: 18px;
  height: 18px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
}
/* 5. Nút (vuông vức, nét mảnh) ------------------------------------------------- */
.sd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--sd-brand);
  border-radius: 0;
  background: var(--sd-brand);
  color: #fff !important;
  font: 500 13.5px/1 var(--sd-font);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.sd-btn:hover {
  background: var(--sd-brand-dark);
  border-color: var(--sd-brand-dark);
  color: #fff !important;
}
.sd-btn--outline {
  background: var(--sd-ui-0);
  border-color: var(--sd-ui-300);
  color: var(--sd-ui-700) !important;
}
.sd-btn--outline:hover {
  background: var(--sd-brand-50);
  border-color: var(--sd-brand);
  color: var(--sd-brand) !important;
}
.sd-btn--soft {
  background: var(--sd-brand-50);
  border-color: transparent;
  color: var(--sd-brand) !important;
}
.sd-btn--soft:hover {
  background: var(--sd-brand-100);
  border-color: transparent;
  color: var(--sd-brand-dark) !important;
}
.sd-btn--soft .sd-arrow {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s;
}
.sd-btn--soft:hover .sd-arrow {
  transform: translateX(3px);
}
.sd-btn .sd-icon {
  width: 16px;
  height: 16px;
}
.sd-btn--sm {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
}
.sd-btn--block {
  width: 100%;
}
.sd-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 6. Thành phần --------------------------------------------------------------- */
.sd-card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--sd-ui-0);
  border: 1px solid var(--sd-ui-200);
}
.sd-card--hover:hover {
  border-color: var(--sd-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sd-brand) 12%, transparent);
}
.sd-card__title {
  margin: 0 0 6px;
}
.sd-card__foot {
  margin-top: auto;
  padding-top: 18px;
}
.sd-facts li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sd-ui-100);
  font-size: 13.5px;
}
.sd-facts li:last-child {
  border-bottom: 0;
}
.sd-facts span:first-child {
  color: var(--sd-ui-500);
}
.sd-facts span:last-child {
  color: var(--sd-ui-900);
  text-align: right;
}
.sd-list li {
  position: relative;
  padding: 5px 0 5px 18px;
  font-size: 14px;
}
.sd-list li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 14px;
  width: 8px;
  height: 1.5px;
  background: var(--sd-brand);
}
.sd-numbered li {
  padding: 7px 0;
  border-bottom: 1px solid var(--sd-ui-100);
  font-size: 13.5px;
}
.sd-numbered li:last-child {
  border-bottom: 0;
}
.sd-period {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 12px;
  background: var(--sd-brand-50);
  color: var(--sd-brand);
  font-size: 14.5px;
  font-weight: 500;
}
/* Khối thông tin lớp (trang chi tiết): 4 mục chính cỡ lớn + dòng phụ, tách hẳn khỏi phần chương trình bên dưới */
.sd-info {
  margin-bottom: 20px;
  background: var(--sd-ui-0);
  border: 1px solid var(--sd-brand-100);
  border-left: 3px solid var(--sd-brand);
}
.sd-info__key {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  background: var(--sd-brand-50);
}
.sd-info__key > div {
  padding: 9px 16px;
  border-right: 1px solid var(--sd-brand-100);
}
.sd-info__key > div:last-child {
  border-right: 0;
}
.sd-info__key dt {
  margin: 0 0 1px;
  color: var(--sd-ui-500);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sd-info__key dd {
  margin: 0;
  color: var(--sd-ui-900);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
.sd-info .sd-inline {
  padding: 8px 16px;
  border-top: 1px solid var(--sd-brand-100);
  background: var(--sd-ui-0);
  font-size: 15px;
}
/* Điện thoại: 4 mục chính xếp lưới 2×2 có đường kẻ, dòng phụ (giáo viên, sách, nơi học) xếp dọc, bỏ vạch ngăn */
@media (max-width: 720px) {
  .sd-info__key {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-info__key > div {
    padding: 10px 14px;
  }
  .sd-info__key > div:nth-child(2n) {
    border-right: 0;
  }
  .sd-info__key > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--sd-brand-100);
  }
  .sd-info .sd-inline {
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
  }
  .sd-info .sd-inline li {
    padding: 4px 0;
    border-right: 0;
  }
  .sd-info .sd-inline li > span {
    display: inline-block;
    min-width: 84px;
    color: var(--sd-ui-500);
  }
}
/* Thông tin lớp: một dòng chữ có vạch ngăn, như trang cũ */
.sd-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  color: var(--sd-ui-900);
  font-size: 15px;
}
.sd-inline li {
  padding: 0 18px;
  border-right: 1px solid var(--sd-ui-300);
  line-height: 1.5;
}
.sd-inline li:first-child {
  padding-left: 0;
}
.sd-inline li:last-child {
  border-right: 0;
}
.sd-inline li span {
  color: var(--sd-ui-500);
}
.sd-inline a {
  color: var(--sd-brand);
}
.sd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sd-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--sd-ui-200);
  background: var(--sd-ui-0);
  color: var(--sd-ui-700) !important;
  font-size: 13px;
  font-weight: 500;
}
.sd-chip:hover,
.sd-chip.is-active {
  border-color: var(--sd-brand);
  background: var(--sd-brand-50);
  color: var(--sd-brand) !important;
}
.sd-icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sd-linkcard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--sd-ui-0);
  border: 1px solid var(--sd-ui-200);
  color: var(--sd-ui-900) !important;
}
.sd-linkcard:hover {
  border-color: var(--sd-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sd-brand) 12%, transparent);
}
.sd-linkcard .sd-icon {
  color: var(--sd-brand);
  width: 24px;
  height: 24px;
}
.sd-linkcard strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
}
.sd-linkcard span {
  color: var(--sd-ui-500);
  font-size: 13px;
}
.sd-person {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sd-person img {
  width: 64px;
  height: 64px;
  flex: none;
  object-fit: cover;
  border-radius: 50%;
}
.sd-person strong {
  display: block;
  color: var(--sd-ui-900);
  font-size: 15px;
  font-weight: 600;
}
.sd-quote {
  margin: 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--sd-brand);
  color: var(--sd-ui-900);
  font-size: 14px;
  line-height: 1.7;
}
.sd-frame {
  border: 1px solid var(--sd-ui-200);
  background: var(--sd-ui-50);
}
.sd-faq {
  margin: 0;
}
.sd-faq dt {
  margin: 0;
  padding: 12px 0 2px;
  color: var(--sd-ui-900);
  font-size: 14px;
  font-weight: 500;
}
.sd-faq dt:first-child {
  padding-top: 0;
}
.sd-faq dd {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sd-ui-100);
  color: var(--sd-ui-600);
  font-size: 13.5px;
}
.sd-faq dd:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Thanh thông tin lớp (trang chi tiết): một lần duy nhất, dạng lưới ô viền mảnh */
.sd-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--sd-ui-200);
  background: var(--sd-ui-0);
}
.sd-meta > div {
  padding: 14px 18px;
  border-right: 1px solid var(--sd-ui-200);
}
.sd-meta > div:last-child {
  border-right: 0;
}
.sd-meta dt {
  margin: 0 0 4px;
  color: var(--sd-ui-500);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sd-meta dd {
  margin: 0;
  color: var(--sd-ui-900);
  font-size: 14px;
  font-weight: 500;
}
.sd-meta dd a {
  color: var(--sd-brand);
}
.sd-headrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.sd-headrow .sd-btn-row {
  flex: none;
}

/* Thẻ học phí: vuông, viền mảnh, giống thẻ hình mẫu của Whiteboard */
.sd-plan {
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  background: var(--sd-brand-50);
  border: 1px solid var(--sd-brand-100);
}
.sd-plan:hover {
  border-color: var(--sd-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sd-brand) 12%, transparent);
}
.sd-plan h3 {
  margin: 0 0 12px;
  font-size: 14.5px;
}
.sd-plan__price {
  color: var(--sd-ui-900);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.sd-plan__per {
  margin: 2px 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sd-brand-100);
  color: var(--sd-ui-500);
  font-size: 13px;
}
.sd-bullets {
  margin: 0 0 52px;
  font-size: 13px;
}
.sd-bullets li {
  position: relative;
  padding: 4px 0 4px 22px;
  color: var(--sd-ui-600);
}
.sd-bullets li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 10px;
  width: 9px;
  height: 5px;
  border-left: 1.65px solid var(--sd-brand);
  border-bottom: 1.65px solid var(--sd-brand);
  transform: rotate(-45deg);
}
.sd-plan__btn {
  margin-top: auto;
}

/* 7. Trang -------------------------------------------------------------------- */
.sd-hero {
  background: var(--sd-ui-50);
  border-bottom: 1px solid var(--sd-ui-200);
  overflow: hidden;
}
.sd-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 32px;
  align-items: end;
  padding-top: 56px;
}
.sd-hero__text {
  align-self: center;
  padding-bottom: 56px;
}
.sd-hero__text h1 {
  margin-bottom: 14px;
  font-size: 44px;
  line-height: 1.12;
}
.sd-hero__text p {
  max-width: 540px;
  color: var(--sd-ui-600);
  font-size: 15.5px;
}
.sd-hero__text .sd-eyebrow {
  margin-bottom: 14px;
}
/* Ảnh thầy Nguyên: giữ nguyên, căn sát đáy phần đầu trang. Có bản 2x (thay-nguyen@2x.png) để rõ nét trên màn hình độ phân giải cao. */
.sd-teacher {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.sd-teacher__img {
  width: 100%;
  height: auto;
  margin-bottom: -8%;
}.sd-hero__media {
  min-width: 0;
}.sd-person--hero {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin: 0 0 22px;
  padding: 10px 14px;
  background: var(--sd-ui-0);
  border: 1px solid var(--sd-ui-200);
  color: var(--sd-ui-600) !important;
  font-size: 13px;
  line-height: 1.5;
}
.sd-person--hero:hover {
  border-color: var(--sd-brand);
}
.sd-person--hero img {
  width: 44px;
  height: 44px;
}
.sd-person--hero strong {
  display: block;
  color: var(--sd-ui-900);
  font-size: 14px;
  font-weight: 600;
}
.sd-pagehead {
  padding: 32px 0 30px;
  background: var(--sd-ui-50);
  border-bottom: 1px solid var(--sd-ui-200);
}
.sd-pagehead h1 {
  margin: 0;
  font-size: 30px;
}
.sd-crumbs {
  margin-bottom: 10px;
  color: var(--sd-ui-500);
  font-size: 12.5px;
}
.sd-crumbs a {
  color: var(--sd-ui-500);
}
.sd-crumbs a:hover {
  color: var(--sd-brand);
}
.sd-lead {
  max-width: 720px;
  margin: 10px 0 0;
  color: var(--sd-ui-600);
  font-size: 15px;
}
.sd-prose p {
  color: var(--sd-ui-600);
}

/* 8. Chân trang: chỉ một dòng bản quyền ----------------------------------------- */
.sd-footer {
  padding: 22px 0;
  border-top: 1px solid var(--sd-ui-200);
  color: var(--sd-ui-500);
  font-size: 13px;
  text-align: center;
}
/* 9. Co giãn ------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .sd-grid--4,
  .sd-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .sd-body h1 {
    font-size: 32px;
  }
  .sd-hero__text h1 {
    font-size: 34px;
  }
  .sd-section {
    padding: 48px 0;
  }
  .sd-burger {
    display: flex;
  }
  .sd-brand img {
    width: 44px;
    height: 44px;
  }
  .sd-brand__text strong {
    font-size: 14.5px;
  }
  .sd-user__text {
    display: none;
  }
  .sd-menubar {
    display: none;
  }
  .sd-header.is-open .sd-menubar {
    display: block;
  }
  .sd-nav {
    flex-direction: column;
    height: auto;
    padding: 4px 0 8px;
  }
  .sd-nav {
    gap: 0;
  }
  .sd-nav__link {
    height: 44px;
    padding: 0 4px;
  }
  .sd-nav__link::after {
    display: none;
  }
  /* Chỉ áp cho dropdown trong thanh menu xanh: menu tài khoản ở thanh đầu vẫn là hộp nổi nền trắng, chữ tối */
  .sd-menubar .sd-dropdown__menu {
    background: rgba(255, 255, 255, 0.08);
  }
  .sd-menubar .sd-dropdown__item,
  .sd-menubar .sd-dropdown__note {
    color: rgba(255, 255, 255, 0.9) !important;
  }
  .sd-menubar .sd-dropdown__item:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff !important;
  }
  .sd-menubar .sd-dropdown__sep {
    background: rgba(255, 255, 255, 0.2);
  }
  .sd-menubar .sd-dropdown {
    flex-direction: column;
  }
  .sd-menubar .sd-dropdown__menu {
    position: static;
    min-width: 0;
    max-height: none;
    padding: 0 0 4px 12px;
    border: 0;
    box-shadow: none;
  }
  .sd-headrow {
    flex-direction: column;
    align-items: flex-start;
  }
  .sd-aside-layout > aside {
    position: static;
  }
  .sd-aside-layout,
  .sd-hero__inner,
  .sd-split,
  .sd-grid--2,
  .sd-footer__top {
    grid-template-columns: minmax(0, 1fr);
  }
  .sd-hero__inner {
    gap: 24px;
    padding-top: 36px;
  }
  .sd-hero__text {
    padding-bottom: 0;
  }
  .sd-brand__slogan {
    display: none;
  }
  .sd-split {
    gap: 28px;
  }
  .sd-footer__top {
    gap: 28px;
  }
}
@media (max-width: 1180px) {
  .sd-brand__slogan {
    display: none;
  }
}
@media (max-width: 560px) {
  :root {
    --sd-gutter: 16px;
  }
  .sd-grid--4,
  .sd-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media print {
  .sd-header,
  .sd-footer {
    display: none;
  }
}

/* 10. Admin -------------------------------------------------------------------
   Khung Admin (thanh đầu, menu) dùng thành phần .sd- ở trên. Phần nội dung các trang còn là Bootstrap/Hyper + Vue,
   nên mục này đổi diện mạo chúng theo chuẩn (nét 1px, vuông vức, xanh thương hiệu, chữ không đậm quá 600).
   Mọi quy tắc nằm dưới body.sd-admin để không ảnh hưởng Portal. Khi một trang được viết lại bằng .sd- thì bỏ dần phần ghi đè tương ứng. */
[v-cloak] {
  display: none !important;
}
.sd-container--wide {
  max-width: none;
}
.sd-dropdown__heading {
  display: block;
  padding: 8px 16px 2px;
  color: var(--sd-ui-500);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 860px) {
  .sd-menubar .sd-dropdown__heading {
    color: rgba(255, 255, 255, 0.6);
  }
}

/* 10.1 Biến của Hyper -> token chuẩn */
body.sd-admin {
  --bs-primary: #004aad;
  --bs-primary-rgb: 0, 74, 173;
  --bs-primary-bg-subtle: var(--sd-brand-50);
  --bs-primary-border-subtle: var(--sd-brand-100);
  --bs-primary-text-emphasis: var(--sd-brand-dark);
  --bs-link-color: var(--sd-brand);
  --bs-link-color-rgb: 0, 74, 173;
  --bs-link-hover-color: var(--sd-brand-dark);
  --bs-font-sans-serif: var(--sd-font);
  --bs-body-font-family: var(--sd-font);
  --bs-body-font-size: 14px;
  --bs-body-color: var(--sd-ui-700);
  /* Nền thành phần (modal, thẻ, dropdown, ô nhập, bảng) lấy từ --bs-body-bg nên phải là trắng; màu nền xám nhạt của trang đặt trực tiếp ở background của body bên dưới */
  --bs-body-bg: var(--sd-ui-0);
  /* Bootstrap 5.3 tô chữ bảng / tiêu đề bằng --bs-emphasis-color (mặc định #000) và chữ phụ bằng --bs-body-color-rgb: đổi sang thang màu chuẩn */
  --bs-body-color-rgb: 71, 85, 105;
  --bs-emphasis-color: var(--sd-ui-900);
  --bs-emphasis-color-rgb: 51, 65, 85;
  --bs-heading-color: var(--sd-ui-900);
  --bs-secondary-color: var(--sd-ui-500);
  --bs-secondary-color-rgb: 100, 116, 139;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-secondary-bg: var(--sd-ui-100);
  --bs-tertiary-bg: var(--sd-ui-50);
  --bs-body-line-height: 1.5;
  --bs-border-color: var(--sd-ui-200);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-pill: 0;
  margin: 0;
  background: var(--sd-ui-50);
  font-family: var(--sd-font);
  font-size: 14px;
  color: var(--sd-ui-700);
  -webkit-font-smoothing: antialiased;
}
.sd-admin__main {
  min-height: calc(100vh - 220px);
  padding: 8px 20px 32px;
}
/* Lề trái / phải của thanh đầu, menu và chân trang bằng lề của nội dung: .sd-admin__main (20px) + .container-fluid của Bootstrap (12px),
   để logo, menu và chữ tiêu đề trang (Lớp, Câu hỏi...) cùng thẳng một đường. */
.sd-admin .sd-container--wide {
  padding-left: 32px;
  padding-right: 32px;
}
@media (max-width: 767.98px) {
  .sd-admin .sd-container--wide {
    padding-left: 24px;
    padding-right: 24px;
  }
}
/* Thanh đầu Admin giống Portal (logo 56px, chữ hoa giãn chữ). Riêng desktop: chữ trái của logo thẳng hàng với chữ của mục menu đầu tiên. */
@media (min-width: 861px) {
  .sd-admin .sd-menubar .sd-nav {
    margin-left: -22px;
  }
}
.sd-admin .sd-footer {
  background: var(--sd-ui-0);
}
.sd-admin :is(b, strong, .fw-bold) {
  font-weight: 600;
}
.sd-admin .rounded,
.sd-admin .rounded-1,
.sd-admin .rounded-2,
.sd-admin .rounded-3 {
  border-radius: 0 !important;
}

/* Icon trạng thái Công khai (quả địa cầu): xanh tươi hơn xanh #198754 mặc định của Bootstrap vốn hơi tối */
.sd-admin .mdi.text-success {
  color: #22c55e !important;
}

/* 10.2 Tiêu đề trang, thẻ */
.sd-admin .page-title-box {
  padding: 14px 0 10px;
}
.sd-admin .page-title {
  margin: 0;
  color: var(--sd-ui-900);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sd-admin :is(h1, h2, h3, h4, h5, h6) {
  color: var(--sd-ui-900);
  font-weight: 600;
}
.sd-admin .card {
  background: var(--sd-ui-0);
  border: 1px solid var(--sd-ui-200);
  box-shadow: none;
}
.sd-admin .card-header {
  background: var(--sd-ui-0);
  border-bottom: 1px solid var(--sd-ui-200);
}

/* 10.3 Nút */
.sd-admin .btn {
  --bs-btn-border-radius: 0;
  border-radius: 0;
  box-shadow: none;
  font-weight: 500;
}
.sd-admin :is(.btn-primary, .btn-info, .btn-success) {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sd-brand);
  --bs-btn-border-color: var(--sd-brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sd-brand-dark);
  --bs-btn-hover-border-color: var(--sd-brand-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sd-brand-dark);
  --bs-btn-active-border-color: var(--sd-brand-dark);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--sd-brand);
  --bs-btn-disabled-border-color: var(--sd-brand);
  --bs-btn-focus-shadow-rgb: 0, 74, 173;
}
.sd-admin :is(.btn-outline-primary, .btn-outline-info, .btn-outline-success) {
  --bs-btn-color: var(--sd-brand);
  --bs-btn-border-color: var(--sd-brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sd-brand);
  --bs-btn-hover-border-color: var(--sd-brand);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sd-brand);
  --bs-btn-active-border-color: var(--sd-brand);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--sd-brand);
  --bs-btn-focus-shadow-rgb: 0, 74, 173;
}
.sd-admin :is(.btn-outline-secondary, .btn-outline-dark, .btn-light) {
  --bs-btn-color: var(--sd-ui-700);
  --bs-btn-bg: var(--sd-ui-0);
  --bs-btn-border-color: var(--sd-ui-300);
  --bs-btn-hover-color: var(--sd-brand);
  --bs-btn-hover-bg: var(--sd-brand-50);
  --bs-btn-hover-border-color: var(--sd-brand);
  --bs-btn-active-color: var(--sd-brand);
  --bs-btn-active-bg: var(--sd-brand-50);
  --bs-btn-active-border-color: var(--sd-brand);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--sd-ui-400);
  --bs-btn-disabled-border-color: var(--sd-ui-200);
  --bs-btn-focus-shadow-rgb: 0, 74, 173;
}
.sd-admin .action-icon {
  color: var(--sd-ui-500);
}
.sd-admin .action-icon:hover {
  color: var(--sd-brand);
}

/* 10.4 Form */
.sd-admin :is(.form-control, .form-select) {
  min-height: 36px;
  background-color: var(--sd-ui-0);
  border: 1px solid var(--sd-ui-300);
  border-radius: 0;
  box-shadow: none;
  color: var(--sd-ui-900);
  font-size: 14px;
}
.sd-admin :is(.form-control, .form-select):focus {
  border-color: var(--sd-brand);
  box-shadow: 0 0 0 1px var(--sd-brand);
}
.sd-admin :is(.form-control, .form-select):disabled {
  background-color: var(--sd-ui-100);
}
.sd-admin .form-label {
  margin-bottom: 4px;
  color: var(--sd-ui-600);
  font-size: 13px;
  font-weight: 500;
}
.sd-admin .form-text {
  color: var(--sd-ui-500);
  font-size: 12.5px;
}
.sd-admin .input-group-text {
  background: var(--sd-ui-50);
  border: 1px solid var(--sd-ui-300);
  border-radius: 0;
  color: var(--sd-ui-500);
}
.sd-admin .form-check-input {
  border: 1px solid var(--sd-ui-300);
  border-radius: 0;
  box-shadow: none;
}
.sd-admin .form-check-input[type="radio"] {
  border-radius: 50%;
}
.sd-admin .form-check-input:checked {
  background-color: var(--sd-brand);
  border-color: var(--sd-brand);
}

/* 10.5 Bảng */
.sd-admin .table {
  --bs-table-border-color: var(--sd-ui-200);
  --bs-table-striped-bg: var(--sd-ui-50);
  --bs-table-hover-bg: var(--sd-brand-50);
  --bs-table-active-bg: var(--sd-ui-100);
  color: var(--sd-ui-700);
}
.sd-admin .table-light {
  --bs-table-bg: var(--sd-ui-50);
  --bs-table-color: var(--sd-ui-600);
  --bs-table-border-color: var(--sd-ui-200);
}
.sd-admin .table thead th {
  color: var(--sd-ui-600);
  font-size: 12.5px;
  font-weight: 400;
}

/* 10.6 Modal, dropdown, thông báo */
.sd-admin .modal-content {
  border: 1px solid var(--sd-ui-200);
  border-radius: 0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
}
.sd-admin .modal-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--sd-ui-200);
}
.sd-admin .modal-title {
  color: var(--sd-ui-900);
  font-size: 15px;
  font-weight: 600;
}
.sd-admin .modal-footer {
  border-top: 1px solid var(--sd-ui-200);
}
.sd-admin .dropdown-menu {
  border: 1px solid var(--sd-ui-200);
  border-radius: 0;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.sd-admin .dropdown-item {
  color: var(--sd-ui-700);
}
.sd-admin .dropdown-item:hover,
.sd-admin .dropdown-item:focus {
  background: var(--sd-ui-100);
  color: var(--sd-ui-900);
}
.sd-admin .dropdown-item.active,
.sd-admin .dropdown-item:active {
  background: var(--sd-brand-50);
  color: var(--sd-brand);
}
.sd-admin .alert {
  border-radius: 0;
}
.sd-admin .badge {
  border-radius: 0;
  font-weight: 500;
}
.sd-admin .list-group-item {
  border-color: var(--sd-ui-200);
}
.sd-admin .list-group-item.active {
  background: var(--sd-brand);
  border-color: var(--sd-brand);
  color: #fff;
}

/* 10.7 Tab: mục đang chọn có gạch chân 2px */
.sd-admin .nav-tabs {
  border-bottom: 1px solid var(--sd-ui-200);
}
.sd-admin .nav-tabs .nav-link {
  margin-bottom: -1px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--sd-ui-600);
  font-weight: 500;
}
.sd-admin .nav-tabs .nav-link:hover {
  color: var(--sd-brand);
}
.sd-admin .nav-tabs .nav-link.active {
  background: transparent;
  border-bottom-color: var(--sd-brand);
  color: var(--sd-brand);
}
.sd-admin .nav-pills.bg-nav-pills {
  background: var(--sd-ui-50);
  border: 1px solid var(--sd-ui-200);
}
.sd-admin .nav-pills .nav-link {
  border-radius: 0;
  color: var(--sd-ui-600);
  font-weight: 500;
}
.sd-admin .nav-pills .nav-link.active {
  background: var(--sd-ui-0);
  box-shadow: inset 0 -2px 0 var(--sd-brand);
  color: var(--sd-brand);
}
.sd-admin .page-link {
  border-radius: 0;
}

/* 10.8 Mobile: thanh công cụ, bảng dạng thẻ, phân trang */
.sd-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sd-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.sd-pager__info {
  color: var(--sd-ui-600);
  font-size: 13px;
}
.sd-pager__buttons {
  display: flex;
  gap: 8px;
}
@media (max-width: 767.98px) {
  .sd-admin__main {
    padding: 4px 12px 24px;
  }
  .sd-admin .card-body {
    padding: 12px;
  }
  .sd-admin .page-title-box {
    padding: 10px 0 6px;
  }
  .sd-toolbar > .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .sd-pager {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .sd-pager__buttons > .btn {
    flex: 1 1 0;
    min-height: 40px;
  }
  /* Bảng -> thẻ: ẩn tiêu đề cột, mỗi dòng là một thẻ, mỗi ô là một cặp nhãn / giá trị */
  .sd-admin .sd-table-stack thead {
    display: none;
  }
  .sd-admin .sd-table-stack,
  .sd-admin .sd-table-stack tbody,
  .sd-admin .sd-table-stack tr,
  .sd-admin .sd-table-stack td {
    display: block;
    width: 100%;
  }
  .sd-admin .sd-table-stack tr {
    margin-bottom: 8px;
    background: var(--sd-ui-0);
    border: 1px solid var(--sd-ui-200);
  }
  .sd-admin .sd-table-stack > :not(caption) > * > * {
    background: transparent;
    box-shadow: none;
  }
  .sd-admin .sd-table-stack td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 12px;
    border: 0;
    text-align: right;
    white-space: normal !important;
  }
  .sd-admin .sd-table-stack td::before {
    content: attr(data-label);
    flex: none;
    color: var(--sd-ui-500);
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
  }
  .sd-admin .sd-table-stack td.sd-cell-index {
    display: none;
  }
  .sd-admin .sd-table-stack td.sd-cell-title {
    display: block;
    padding-top: 10px;
    color: var(--sd-ui-900);
    font-weight: 400;
    text-align: left;
  }
  .sd-admin .sd-table-stack td.sd-cell-title::before {
    content: none;
  }
  .sd-admin .sd-table-stack td.sd-cell-actions {
    display: block;
    margin-top: 4px;
    border-top: 1px solid var(--sd-ui-200);
  }
  .sd-admin .sd-table-stack td.sd-cell-actions::before {
    content: none;
  }
  .sd-admin .sd-table-stack .table-action {
    gap: 20px;
  }
  .sd-admin .sd-table-stack .table-action .action-icon {
    padding: 4px 6px;
    font-size: 1.4rem;
  }
}

/* Tên hệ thống dài: trên mobile không viết hoa, bỏ dòng nhỏ để khỏi tràn thanh đầu */
@media (max-width: 860px) {
  .sd-admin .sd-brand__text strong {
    letter-spacing: 0.01em;
    text-transform: none;
  }
}
@media (max-width: 560px) {
  .sd-admin .sd-brand__text small {
    display: none;
  }
  .sd-admin .sd-brand__text strong {
    font-size: 13px;
  }
  .sd-admin .sd-user__text {
    display: none;
  }
}

/* Sửa mobile: thanh đầu không để burger bị đẩy ra ngoài màn hình; ô trong thẻ luôn sát mép phải */
@media (max-width: 860px) {
  .sd-admin .sd-topbar__bar {
    gap: 8px;
  }
  .sd-admin .sd-brand {
    flex: 1 1 auto;
    min-width: 0;
  }
  .sd-admin .sd-brand__text {
    min-width: 0;
  }
  .sd-admin .sd-brand__text strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sd-admin .sd-header__actions {
    flex: none;
    gap: 6px;
  }
  .sd-admin .sd-burger {
    flex: none;
  }
}
@media (max-width: 767.98px) {
  /* pe-3 / pe-4 của Bootstrap là !important nên làm lệch lề phải giữa các ô */
  .sd-admin .sd-table-stack td {
    padding-right: 12px !important;
  }
}

/* 10.9 Bảng trên desktop: nội dung dài tự xuống dòng thay vì tràn ngang.
   Bỏ nowrap của Bootstrap ở ô nội dung (cột ngắn như ngày, số vẫn giữ nguyên chiều rộng vì trình duyệt chia cột theo độ dài nội dung),
   chỉ kẻ ngang mảnh, không sọc nền; cột thao tác gọn bên phải, cột tên (sd-cell-title) có chiều rộng tối thiểu. */
.sd-admin .table {
  --bs-table-striped-bg: transparent;
  --bs-table-accent-bg: transparent;
}
.sd-admin .table tbody tr:hover > td {
  background-color: var(--sd-brand-50);
}
@media (min-width: 768px) {
  .sd-admin .table > :not(caption) > * > * {
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--sd-ui-200);
    box-shadow: none;
    vertical-align: middle;
  }
  .sd-admin .table > thead > tr > th {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    border-top: 1px solid var(--sd-ui-200);
    white-space: nowrap;
  }
  .sd-admin .table > tbody > tr > td {
    overflow-wrap: break-word;
  }
  .sd-admin .table > tbody > tr > td.text-nowrap {
    white-space: normal !important;
  }
  .sd-admin .table > tbody > tr:last-child > td {
    border-bottom: 0;
  }
  .sd-admin .table td.sd-cell-title {
    min-width: 240px;
    color: var(--sd-ui-900);
    font-weight: 400;
  }
  .sd-admin .table td.sd-cell-index {
    width: 1%;
    color: var(--sd-ui-500);
    white-space: nowrap !important;
  }
  .sd-admin .table td:has(> .table-action),
  .sd-admin .table td:has(> .action-icon),
  .sd-admin .table td.sd-cell-actions {
    width: 1%;
    white-space: nowrap !important;
  }
  .sd-admin .table .table-action {
    gap: 14px;
  }
}

/* 10.10 Đáp án câu hỏi trong bảng (Admin/QuestionUseCase/_QuestionAnswerPreview.cshtml).
   Lưới phương án nét mảnh dưới nội dung câu; phương án đúng: ô đánh dấu xanh đặc + chữ xanh, không tô nền đậm.
   Đáp án đúng màu xanh lá, mỗi phương án một dòng, ô đánh dấu canh theo dòng đầu. Ô đánh dấu tròn = một đáp án, vuông = nhiều đáp án (cùng quy ước với ô chọn khi làm bài). */
.sd-answers {
  --sd-ok: #15803d;
  --sd-ok-mark: #16a34a;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--sd-ui-200);
  font-size: 13.5px;
  font-weight: 400;
  white-space: normal;
}
.sd-answers--list {
  grid-template-columns: minmax(0, 1fr);
}
.sd-answers__caption {
  color: var(--sd-ui-500);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sd-answer {
  display: flex;
  /* Canh theo đường cơ sở (dòng chữ đầu), không canh theo đỉnh: công thức LaTeX làm dòng đầu cao hơn, ô đánh dấu cố định ở đỉnh sẽ lệch khỏi chữ */
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  line-height: 1.5;
  color: var(--sd-ui-700);
}
.sd-answer__mark {
  /* Ô rỗng nên đường cơ sở là mép dưới ô; top: 3px hạ ô xuống để tâm ô ngang giữa chiều cao chữ, dù dòng có công thức hay không */
  display: block;
  position: relative;
  top: 3px;
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--sd-ui-300);
  border-radius: 50%;
  background: var(--sd-ui-0);
}
.sd-answer__mark--square {
  border-radius: 0;
}
.sd-answer__mark svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sd-answer__label {
  flex: none;
  color: var(--sd-ui-500);
  font-weight: 500;
}
.sd-answer__text {
  min-width: 0;
  overflow-wrap: break-word;
}
.sd-answer__arrow {
  flex: none;
  color: var(--sd-ui-400);
}
.sd-answer__img {
  display: block;
  max-width: 160px;
  max-height: 72px;
  margin-top: 4px;
  border: 1px solid var(--sd-ui-200);
}
.sd-answer.is-correct {
  color: var(--sd-ok);
}
.sd-answer.is-correct .sd-answer__label {
  color: var(--sd-ok);
}
.sd-answer.is-correct .sd-answer__mark {
  border-color: var(--sd-ok-mark);
  background: var(--sd-ok-mark);
}
.sd-answer-key {
  color: #15803d;
  font-weight: 500;
}
@media (max-width: 767.98px) {
  .sd-answers {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Nội dung câu hiện đầy đủ (không rút gọn 2 dòng), nên không còn nút Xem đầy đủ / Thu gọn */
.sd-admin .question-cell .latex-cell {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
/* 11. Trang đăng nhập, đăng ký, đặt lại mật khẩu (_LayoutAuthentication của Admin và Portal) ---------------
   body có cả .sd-admin (mục 10) nên ô nhập, nút, modal Bootstrap trong form có cùng diện mạo chuẩn.
   Bố cục: thanh đầu chỉ có thương hiệu, một thẻ vuông viền mảnh ở giữa nền chấm lưới, chân trang một dòng. */
body.sd-auth {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--sd-ui-50) radial-gradient(var(--sd-ui-200) 1px, transparent 1px) 0 0 / 22px 22px;
}
.sd-auth__main {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}
.sd-auth__card {
  width: 100%;
  max-width: 420px;
  padding: 32px 32px 24px;
  background: var(--sd-ui-0);
  border: 1px solid var(--sd-ui-200);
  border-top: 3px solid var(--sd-brand);
}
.sd-auth .sd-auth__title {
  margin: 0 0 6px;
  color: var(--sd-ui-900);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.sd-auth__lead {
  margin: 0 0 24px;
  color: var(--sd-ui-500);
  font-size: 13.5px;
}
.sd-auth__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.sd-auth__label-row a {
  font-size: 12.5px;
}
.sd-auth .btn-primary {
  min-height: 38px;
}
/* Ngăn giữa form và nút Google: đường kẻ mảnh, chữ nhỏ ở giữa */
.sd-auth__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  color: var(--sd-ui-500);
  font-size: 12.5px;
}
.sd-auth__divider::before,
.sd-auth__divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--sd-ui-200);
}
.sd-auth__switch {
  margin: 24px -32px -24px;
  padding: 14px 32px;
  border-top: 1px solid var(--sd-ui-200);
  background: var(--sd-ui-50);
  color: var(--sd-ui-500);
  font-size: 13px;
  text-align: center;
}
.sd-auth__switch a {
  font-weight: 500;
}
.sd-auth .sd-footer {
  flex: none;
}
@media (max-width: 560px) {
  .sd-auth__main {
    align-items: flex-start;
    padding: 24px 12px;
  }
  .sd-auth__card {
    padding: 24px 20px 20px;
  }
  .sd-auth__switch {
    margin: 20px -20px -20px;
    padding: 14px 20px;
  }
}

/* 12. Form, modal, spinner, danh sách chọn: thay Bootstrap cho các trang đã viết lại bằng .sd- (hiện là đăng nhập, đăng ký, đặt lại mật khẩu).
   Modal do BootstrapManager.ShowModal / HideModal bật tắt khi phần tử có lớp .sd-modal (thêm / bỏ .is-open). */
.sd-field {
  margin-bottom: 16px;
}
.sd-label {
  display: block;
  margin-bottom: 4px;
  color: var(--sd-ui-600);
  font-size: 13px;
  font-weight: 500;
}
.sd-input {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--sd-ui-300);
  border-radius: 0;
  background: var(--sd-ui-0);
  color: var(--sd-ui-900);
  font: 400 14px/1.5 var(--sd-font);
}
.sd-input:focus {
  border-color: var(--sd-brand);
  box-shadow: 0 0 0 1px var(--sd-brand);
  outline: none;
}
.sd-input:disabled {
  background: var(--sd-ui-100);
}
.sd-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.sd-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sd-spin 0.7s linear infinite;
}
@keyframes sd-spin {
  to {
    transform: rotate(360deg);
  }
}
.sd-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--sd-ui-200);
  margin-top: -1px;
  color: var(--sd-ui-700) !important;
}
.sd-choice:hover {
  background: var(--sd-brand-50);
  border-color: var(--sd-brand);
  position: relative;
}
.sd-choice__tag {
  margin-left: 8px;
  padding: 1px 6px;
  background: var(--sd-ui-100);
  color: var(--sd-ui-600);
  font-size: 11.5px;
  font-weight: 500;
}
.sd-choice svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sd-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.45);
}
.sd-modal.is-open {
  display: flex;
}
body.sd-modal-open {
  overflow: hidden;
}
.sd-modal__dialog {
  width: 100%;
  max-width: 440px;
  max-height: 100%;
  overflow: auto;
  background: var(--sd-ui-0);
  border: 1px solid var(--sd-ui-200);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
}
.sd-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sd-ui-200);
}
.sd-modal__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.sd-modal__close {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--sd-ui-500);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.sd-modal__close:hover {
  color: var(--sd-ui-900);
}
.sd-modal__body {
  padding: 16px;
  word-break: break-word;
}

/* 10.11 Lớp riêng của Hyper còn được các trang dùng (Hyper đã bỏ, Bootstrap 5.3.9 không có sẵn): giữ đúng tên lớp, định nghĩa lại ở đây */
.font-20 {
  font-size: 20px !important;
}
.font-24 {
  font-size: 24px !important;
}
.bg-primary-lighten {
  background-color: var(--bs-primary-bg-subtle) !important;
}
.bg-success-lighten {
  background-color: var(--bs-success-bg-subtle) !important;
}
.bg-warning-lighten {
  background-color: var(--bs-warning-bg-subtle) !important;
}
.badge-outline-secondary {
  --bs-badge-color: var(--bs-secondary);
  border: 1px solid var(--bs-secondary);
  background-color: transparent;
}
.modal-full-width {
  width: 95%;
  max-width: none;
}
.nav-tabs.nav-bordered {
  border-bottom: 2px solid var(--bs-border-color);
}
.nav-tabs.nav-bordered .nav-item {
  margin-bottom: -1px;
}
.nav-tabs.nav-bordered li a {
  border: 0;
  padding: 0.625rem 1.25rem;
}
.nav-tabs.nav-bordered li a.active {
  border-bottom: 2px solid var(--bs-primary);
}
.table-centered td,
.table-centered th {
  vertical-align: middle !important;
}
.border-dashed {
  --bs-border-style: dashed;
}
.page-title-box .page-title-right {
  float: right;
  margin-top: 20px;
}
@media (max-width: 767.98px) {
  .page-title-box .page-title-right {
    display: none;
  }
}

/* 10.12 Cỡ chữ và khoảng đệm theo số của Hyper cũ (Bootstrap 5.3 mặc định lớn hơn: nút 16px, h4 24px, thẻ đệm 16px).
   Đặt dưới .sd-admin để Portal và Admin giống nhau; Bootstrap 5.3 còn gạch chân mọi liên kết, Hyper thì không. */
.sd-admin :is(h1, .h1) {
  font-size: 2.25rem;
}
.sd-admin :is(h2, .h2) {
  font-size: 1.872rem;
}
.sd-admin :is(h3, .h3) {
  font-size: 1.503rem;
}
.sd-admin :is(h4, .h4) {
  font-size: 1.125rem;
}
.sd-admin :is(h5, .h5) {
  font-size: 0.936rem;
}
.sd-admin :is(h6, .h6) {
  font-size: 0.765rem;
}
.sd-admin a:not(.btn),
.sd-admin a:not(.btn):hover {
  text-decoration: none;
}
.sd-admin .btn {
  --bs-btn-padding-x: 0.9rem;
  --bs-btn-padding-y: 0.45rem;
  --bs-btn-font-size: 0.9rem;
  --bs-btn-line-height: 1.5;
}
.sd-admin .btn-sm {
  --bs-btn-padding-x: 0.8rem;
  --bs-btn-padding-y: 0.28rem;
  --bs-btn-font-size: 0.875rem;
}
.sd-admin .btn-lg {
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-font-size: 1.251rem;
}
.sd-admin :is(.form-control, .form-select) {
  padding: 0.45rem 0.9rem;
  line-height: 1.5;
}
.sd-admin .form-select {
  padding-right: 2.7rem;
  background-position: right 0.9rem center;
}
.sd-admin :is(.form-control-sm, .form-select-sm) {
  min-height: 0;
  padding: 0.28rem 0.8rem;
  font-size: 0.875rem;
}
.sd-admin .input-group-text {
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
}
.sd-admin .card {
  --bs-card-spacer-y: 1.5rem;
  --bs-card-spacer-x: 1.5rem;
  --bs-card-cap-padding-y: 1.125rem;
  --bs-card-cap-padding-x: 1.5rem;
  --bs-card-cap-bg: transparent;
}
.sd-admin .modal {
  --bs-modal-padding: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-bg: var(--sd-ui-0);
}
.sd-admin .modal-title {
  line-height: 1.5;
}
.sd-admin .dropdown-menu {
  --bs-dropdown-font-size: 0.9rem;
  --bs-dropdown-bg: var(--sd-ui-0);
}
.sd-admin .list-group {
  --bs-list-group-item-padding-x: 1.2rem;
  --bs-list-group-item-padding-y: 0.75rem;
  --bs-list-group-bg: var(--sd-ui-0);
}
.sd-admin .badge {
  --bs-badge-padding-x: 0.4em;
  --bs-badge-padding-y: 0.25em;
  vertical-align: middle;
}
.sd-admin .alert {
  --bs-alert-padding-x: 1.25rem;
  --bs-alert-padding-y: 0.8rem;
}
.sd-admin .table {
  margin-bottom: 1.5rem;
}

/* 10.13 Spinner tải danh sách: không chiếm chỗ trong bố cục (trước đây hiện / ẩn làm tiêu đề trang nhảy lên xuống mỗi lần nạp),
   và chỉ hiện nếu tải lâu hơn 0,4 giây để lần nạp nhanh không nháy. */
.sd-admin .row > :has(> .sd-list-spinner) {
  position: relative;
}
.sd-admin .sd-list-spinner {
  position: absolute;
  top: 50%;
  right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  z-index: 1;
  transform: translateY(-50%);
  opacity: 0;
  animation: sd-spinner-in 0.2s 0.4s forwards;
}
.sd-admin .sd-list-spinner .spinner-grow {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0 !important;
}
@keyframes sd-spinner-in {
  to {
    opacity: 1;
  }
}

/* Menu tài khoản trên mobile: hộp nổi sát mép phải màn hình, không rộng quá màn hình, không bị header cắt */
@media (max-width: 860px) {
  .sd-topbar .sd-dropdown__menu {
    min-width: 200px;
    max-width: calc(100vw - 24px);
  }
}

/* 10.14 Đường dẫn vị trí của câu hỏi (Lớp › Môn › chủ đề) trong bảng câu hỏi: chữ xám nhỏ, dấu ngăn mảnh,
   chủ đề cuối là nhãn xanh nhạt. Tự xuống dòng khi đường dẫn dài. */
.sd-qpath {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}
.sd-qpath__item {
  color: var(--sd-ui-500);
}
.sd-qpath__item.is-last {
  padding: 1px 8px;
  background: var(--sd-brand-50);
  color: var(--sd-brand);
  font-weight: 500;
}
.sd-qpath__sep {
  flex: none;
  width: 8px;
  height: 8px;
  fill: none;
  stroke: var(--sd-ui-300);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 10.15 Menu 3 chấm cho thao tác trên dòng của mọi bảng quản lý (.sd-row-actions > .sd-rowmenu), cả desktop lẫn mobile.
   Menu dùng popper strategy fixed (data-bs-config trên nút) nên không bị .table-responsive cắt.
   Bảng câu hỏi trên mobile: các ô phụ (phạm vi, độ khó, loại, đáp án, chất lượng) mặc định ẩn, nút "Chi tiết" mở ra. */
.sd-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
/* Nút chính của dòng ("Câu hỏi", "Bài giảng" ở danh mục): không xuống dòng và không bị ô 1% bóp lại */
.sd-row-actions {
  flex-wrap: nowrap;
}
.sd-row-actions__main {
  flex: none;
  white-space: nowrap;
}
.sd-rowmenu__btn {
  padding: 2px 6px;
  border: 0;
  background: transparent;
  color: var(--sd-ui-500);
  font-size: 20px;
  line-height: 1;
}
.sd-rowmenu__btn:hover,
.sd-rowmenu__btn:focus,
.sd-rowmenu__btn.show {
  background: var(--sd-ui-100);
  color: var(--sd-brand);
}
.sd-rowmenu .dropdown-menu {
  min-width: 190px;
}
.sd-extra-toggle {
  display: none;
}
@media (max-width: 767.98px) {
  .sd-admin .sd-table-stack td.sd-extra {
    display: none;
  }
  .sd-admin .sd-table-stack tr.sd-extra-open td.sd-extra {
    display: flex;
  }
  .sd-admin .sd-table-stack .sd-row-actions {
    justify-content: space-between;
  }
  .sd-admin .sd-table-stack .sd-row-actions:not(:has(> :not(.sd-rowmenu))) {
    justify-content: flex-end;
  }
  .sd-admin .sd-table-stack .sd-extra-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--sd-ui-600);
  }
  .sd-admin .sd-table-stack .sd-extra-toggle .mdi {
    transition: transform 0.15s;
  }
  .sd-admin .sd-table-stack tr.sd-extra-open .sd-extra-toggle .mdi {
    transform: rotate(180deg);
  }
  .sd-admin .sd-extra-less,
  .sd-admin tr.sd-extra-open .sd-extra-more {
    display: none;
  }
  .sd-admin tr.sd-extra-open .sd-extra-less {
    display: inline;
  }
}

/* 10.16 Cây danh mục trên mobile (.sd-tree-stack: tab Chủ đề của Câu hỏi, Bài giảng): bỏ kiểu "thẻ nhiều hàng" của .sd-table-stack,
   mỗi danh mục là một khối gọn: dòng trên [mũi tên][thư mục] Tên (xuống dòng nếu dài), dòng dưới góc phải [số lượng] [⋮].
   Số lượng là nút bấm mở danh sách câu hỏi / bài giảng của danh mục (thay cho nút riêng), ⋮ mở menu thao tác.
   Đường dẫn đầy đủ (chỉ có ở cấp gốc) xuống dòng nhỏ dưới tên. Desktop giữ bảng như cũ. */
.sd-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--sd-ui-200);
  background: var(--sd-ui-0);
  color: var(--sd-ui-600);
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
}
.sd-count-chip:hover,
.sd-count-chip:focus-visible {
  border-color: var(--sd-brand);
  background: var(--sd-brand-50);
  color: var(--sd-brand);
}
@media (max-width: 767.98px) {
  .sd-admin .sd-tree-stack tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0;
    padding: 0 0 8px 0;
    border: 0;
    border-bottom: 1px solid var(--sd-ui-200);
    background: transparent;
  }
  .sd-admin .sd-tree-stack tr:last-child {
    border-bottom: 0;
  }
  .sd-admin .sd-tree-stack td {
    display: block;
    flex: none;
    width: auto;
    padding: 0;
    text-align: left;
  }
  .sd-admin .sd-tree-stack td::before {
    content: none;
  }
  .sd-admin .sd-tree-stack td.sd-cell-title {
    flex: 1 1 100%;
    min-width: 0;
    padding-top: 10px;
    padding-bottom: 0;
    padding-right: 0;
    font-weight: 400;
  }
  /* Đường dẫn đầy đủ của cấp gốc: dòng phụ nhỏ dưới tên */
  .sd-admin .sd-tree-stack td.sd-cell-title > span.text-muted {
    display: block;
    margin: 2px 0 0 !important;
    padding-left: 22px;
    font-size: 12px;
    font-weight: 400;
  }
  /* Hai biểu tượng nằm dòng dưới, dồn sang phải: ô số lượng đẩy sát phải, ô thao tác đứng ngay sau */
  .sd-admin .sd-tree-stack td.sd-tree-count {
    margin-left: auto;
  }
  .sd-admin .sd-tree-stack td.sd-cell-actions {
    margin: 0;
    padding: 0;
    border: 0;
  }
  .sd-admin .sd-tree-stack .sd-row-actions {
    justify-content: flex-end;
  }
}

/* 13. Chế độ tối -------------------------------------------------------------------
   theme.js đặt data-bs-theme="dark" lên <html> (lưu ở localStorage 'sd-theme'); mặc định là sáng như trước.
   Cách làm: chỉ đảo thang token --sd-ui-* (nền tối dần lên, chữ sáng dần lên) và làm sáng màu thương hiệu cho đủ tương phản,
   nên mọi thành phần .sd- và phần ghi đè Bootstrap ở mục 10 tự đổi theo. Ở đây chỉ sửa những chỗ còn ghi màu cố định.
   Thang màu theo VS Code "Dark Modern" (đen dịu, chữ không trắng tinh): nền trang (ui-50) #181818 tối hơn
   nền thẻ / thanh đầu (ui-0) #1f1f1f, giữ đúng quan hệ "thẻ nổi trên nền" của chế độ sáng; chữ #cccccc, chữ phụ #9d9d9d. */
:root[data-bs-theme="dark"] {
  color-scheme: dark;
  /* Như VS Code, tách xanh làm chữ và xanh làm nền nút: một màu không thể đạt 4,5:1 ở cả hai vai trò.
     --sd-brand (chữ, liên kết, icon, gạch chân) #4daafc: 6,6:1 trên #1f1f1f.
     --sd-brand-fill (nền nút chính, ô đánh dấu, mục đang chọn) #0078d4: chữ trắng 4,5:1. */
  --sd-brand: #4daafc;
  --sd-brand-dark: #75beff;
  --sd-brand-fill: #0078d4;
  --sd-brand-fill-dark: #026ec1;
  --sd-brand-50: #0f2537;
  --sd-brand-100: #04395e;

  --sd-ui-0: #1f1f1f;
  --sd-ui-50: #181818;
  --sd-ui-100: #2a2a2a;
  --sd-ui-200: #333333;
  --sd-ui-300: #454545;
  --sd-ui-400: #6e6e6e;
  --sd-ui-500: #9d9d9d;
  --sd-ui-600: #b4b4b4;
  --sd-ui-700: #cccccc;
  --sd-ui-900: #e7e7e7;
}
/* Mục 10.1 ghi giá trị rgb dạng số (Bootstrap cần cho rgba()), phải khai lại theo token tối */
:root[data-bs-theme="dark"] body.sd-admin {
  --bs-primary: var(--sd-brand);
  --bs-primary-rgb: 77, 170, 252;
  --bs-link-color-rgb: 77, 170, 252;
  --bs-body-color-rgb: 204, 204, 204;
  --bs-emphasis-color-rgb: 231, 231, 231;
  --bs-secondary-color-rgb: 157, 157, 157;
  --bs-body-bg-rgb: 31, 31, 31;
}
/* Thanh menu: cùng màu khung #181818, ngăn bằng viền mảnh; mục đang chọn vẫn có gạch chân trắng (mục 4) */
:root[data-bs-theme="dark"] .sd-menubar {
  background: #181818;
  border-top: 1px solid var(--sd-ui-200);
  border-bottom: 1px solid var(--sd-ui-200);
}
/* Nền xanh của nút chính, ô đánh dấu, mục đang chọn: --sd-brand-fill (xanh làm chữ #4daafc quá sáng cho chữ trắng) */
:root[data-bs-theme="dark"] .sd-btn:not(.sd-btn--outline, .sd-btn--soft) {
  background: var(--sd-brand-fill);
  border-color: var(--sd-brand-fill);
}
:root[data-bs-theme="dark"] .sd-btn:not(.sd-btn--outline, .sd-btn--soft):hover {
  background: var(--sd-brand-fill-dark);
  border-color: var(--sd-brand-fill-dark);
}
:root[data-bs-theme="dark"] .sd-admin :is(.btn-primary, .btn-info, .btn-success) {
  --bs-btn-bg: var(--sd-brand-fill);
  --bs-btn-border-color: var(--sd-brand-fill);
  --bs-btn-hover-bg: var(--sd-brand-fill-dark);
  --bs-btn-hover-border-color: var(--sd-brand-fill-dark);
  --bs-btn-active-bg: var(--sd-brand-fill-dark);
  --bs-btn-active-border-color: var(--sd-brand-fill-dark);
  --bs-btn-disabled-bg: var(--sd-brand-fill);
  --bs-btn-disabled-border-color: var(--sd-brand-fill);
}
:root[data-bs-theme="dark"] .sd-admin :is(.btn-outline-primary, .btn-outline-info, .btn-outline-success) {
  --bs-btn-hover-bg: var(--sd-brand-fill);
  --bs-btn-hover-border-color: var(--sd-brand-fill);
  --bs-btn-active-bg: var(--sd-brand-fill);
  --bs-btn-active-border-color: var(--sd-brand-fill);
}
:root[data-bs-theme="dark"] .sd-admin :is(.form-check-input:checked, .list-group-item.active, .bg-primary) {
  background-color: var(--sd-brand-fill) !important;
  border-color: var(--sd-brand-fill);
}
/* Ô nhập như VS Code: nền #313131, viền #3c3c3c (tách khỏi thẻ #1f1f1f) */
:root[data-bs-theme="dark"] :is(.sd-admin .form-control, .sd-admin .form-select, .sd-input) {
  background-color: #313131;
  border-color: #3c3c3c;
}
:root[data-bs-theme="dark"] :is(.sd-admin .form-control, .sd-admin .form-select, .sd-input):disabled {
  background-color: var(--sd-ui-100);
}
:root[data-bs-theme="dark"] .sd-admin .input-group-text {
  background: var(--sd-ui-100);
  border-color: #3c3c3c;
}
/* Hộp nổi (modal, menu thả xuống, thẻ đăng nhập): NÂNG LÊN khỏi nền tối để nhận ra ngay.
   Như hộp nổi của VS Code: mặt sáng hơn nền trang (#181818) và thẻ (#1f1f1f) hẳn một bậc, viền sáng #5a5a5a,
   bóng đen đậm, lớp phủ phía sau modal tối hơn. Thang --sd-ui-* được định nghĩa lại BÊN TRONG hộp nổi, nên mọi
   thứ bên trong (thẻ con, bảng, danh sách, hover, viền kẻ) tự nâng theo mà không phải sửa từng thành phần.
   Cùng bậc màu với form nổi của Whiteboard (Css/Dark.css, --wb-elev-*). */
:root[data-bs-theme="dark"] :is(.sd-dropdown__menu, .sd-modal__dialog, .sd-auth__card,
  .sd-admin .dropdown-menu, .sd-admin .modal-content, .sd-admin .popover, .sd-admin .offcanvas) {
  --sd-ui-0: #2a2a2a;
  --sd-ui-50: #262626;
  --sd-ui-100: #363636;
  --sd-ui-200: #3e3e3e;
  --sd-ui-300: #5a5a5a;
  --bs-body-bg: #2a2a2a;
  --bs-body-bg-rgb: 42, 42, 42;
  --bs-secondary-bg: #363636;
  --bs-tertiary-bg: #2f2f2f;
  --bs-border-color: #3e3e3e;
  --bs-modal-bg: #2a2a2a;
  --bs-dropdown-bg: #2a2a2a;
  --bs-list-group-bg: #2a2a2a;
  background-color: #2a2a2a;
  border: 1px solid #5a5a5a;
  /* Viền sáng mảnh phía trên + bóng đen đậm: mép hộp tách rõ khỏi nền tối */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 48px rgba(0, 0, 0, 0.75);
}
/* Điện thoại: menu con của thanh menu nằm phẳng trong thanh (mục 9), không phải hộp nổi */
@media (max-width: 860px) {
  :root[data-bs-theme="dark"] .sd-menubar .sd-dropdown__menu {
    background-color: rgba(255, 255, 255, 0.04);
    border: 0;
    box-shadow: none;
  }
}
/* Thẻ đăng nhập giữ vạch xanh trên đầu (mục 11) */
:root[data-bs-theme="dark"] .sd-auth__card {
  border-top: 3px solid var(--sd-brand);
}
/* Ô nhập trong hộp nổi: sáng hơn mặt hộp một bậc, viền rõ */
:root[data-bs-theme="dark"] :is(.sd-modal__dialog, .sd-auth__card, .sd-admin .modal-content, .sd-admin .offcanvas)
  :is(.form-control, .form-select, .sd-input) {
  background-color: #363636;
  border-color: #555555;
}
:root[data-bs-theme="dark"] :is(.sd-modal__dialog, .sd-auth__card, .sd-admin .modal-content, .sd-admin .offcanvas) .input-group-text {
  background: #303030;
  border-color: #555555;
}
/* Lớp phủ sau modal: tối hẳn phía sau để hộp nổi lên */
:root[data-bs-theme="dark"] .sd-modal {
  background: rgba(0, 0, 0, 0.7);
}
:root[data-bs-theme="dark"] .modal-backdrop {
  --bs-backdrop-opacity: 0.7;
}
/* Mặt khối lớn tô xanh nhạt khi sáng (thẻ học phí, khối thông tin lớp, nhãn thời khóa) sang tối thành xanh than:
   như VS Code, mặt khối dùng xám trung tính, xanh chỉ còn ở viền nhấn và chữ */
:root[data-bs-theme="dark"] :is(.sd-plan, .sd-info__key, .sd-period) {
  background: var(--sd-ui-0);
}
/* Nút phụ (Chi tiết...) như nút phụ của VS Code: nền xám, chữ xanh */
:root[data-bs-theme="dark"] .sd-btn--soft {
  background: var(--sd-ui-100);
}
:root[data-bs-theme="dark"] .sd-btn--soft:hover {
  background: var(--sd-ui-300);
}
:root[data-bs-theme="dark"] :is(.sd-plan, .sd-info, .sd-plan__per, .sd-info__key > div, .sd-info .sd-inline) {
  border-color: var(--sd-ui-200);
}
/* Đáp án đúng: xanh lá đậm của chế độ sáng không đọc được trên nền tối */
:root[data-bs-theme="dark"] .sd-answers {
  --sd-ok: #4ade80;
  --sd-ok-mark: #22c55e;
}
:root[data-bs-theme="dark"] .sd-answer-key {
  color: #4ade80;
}
/* Lớp tiện ích Bootstrap ghi màu sáng cố định (bg-white, bg-light, text-dark), các trang Admin / Portal dùng nhiều: đưa về token */
:root[data-bs-theme="dark"] .sd-admin .bg-white {
  background-color: var(--sd-ui-0) !important;
}
:root[data-bs-theme="dark"] .sd-admin .bg-light {
  background-color: var(--sd-ui-100) !important;
}
:root[data-bs-theme="dark"] .sd-admin :is(.text-dark, .text-black) {
  color: var(--sd-ui-900) !important;
}

/* Nút bật tắt sáng / tối ở thanh đầu: ô vuông viền mảnh như .sd-burger; chế độ sáng hiện mặt trăng, chế độ tối hiện mặt trời */
.sd-theme-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--sd-ui-200);
  border-radius: 0;
  color: var(--sd-ui-600);
  cursor: pointer;
}
.sd-theme-btn:hover {
  border-color: var(--sd-brand);
  color: var(--sd-brand);
}
.sd-theme-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sd-theme-btn__sun,
:root[data-bs-theme="dark"] .sd-theme-btn__moon {
  display: none;
}
:root[data-bs-theme="dark"] .sd-theme-btn__sun {
  display: block;
}
/* Trang đăng nhập không có .sd-header__actions: đẩy nút sang phải thanh đầu */
.sd-auth .sd-topbar__bar > .sd-theme-btn {
  margin-left: auto;
}