@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #1F2937;
  background: #F4F6FA;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font-family: inherit;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  max-width: 100%;
}

h1:focus,
[tabindex="-1"]:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid rgba(58, 105, 226, 0.6);
  outline-offset: 2px;
}

::placeholder {
  color: rgba(107, 114, 128, 0.7);
}

::selection {
  background: rgba(58, 105, 226, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
.tai-trang {
  padding: 24px;
  color: #6B7280;
}

#blazor-error-ui {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  padding: 12px 16px;
  background: #FEF2F2;
  border-top: 1px solid #B91C1C;
  color: #B91C1C;
  font-size: 13px;
}
#blazor-error-ui .reload {
  color: #B91C1C;
  margin-left: 8px;
  text-decoration: underline;
}
#blazor-error-ui .dismiss {
  float: right;
  cursor: pointer;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.text-muted {
  color: #6B7280;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  background: #FBFCFE;
  color: #4B5563;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
.btn:hover:not(:disabled) {
  background-color: #EEF1F6;
}
.btn:disabled, .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn .fa {
  opacity: 0.85;
}

.btn--primary {
  border: 0;
  background-image: linear-gradient(135deg, #3A69E2, #6D66DA);
  color: #FFFFFF;
  box-shadow: 0 10px 26px -10px rgba(58, 105, 226, 0.55);
}
.btn--primary:hover:not(:disabled) {
  background-color: #3A69E2;
  filter: brightness(1.08);
}
.btn--primary:disabled, .btn--primary[disabled] {
  box-shadow: none;
}
.btn--primary .fa {
  opacity: 1;
}

.btn--ghost {
  background: transparent;
}

.btn--danger {
  border-color: rgba(185, 28, 28, 0.35);
  color: #B91C1C;
}
.btn--danger:hover:not(:disabled) {
  background: #FEF2F2;
}

.btn--sm {
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 9px;
}

.btn--icon {
  width: 36px;
  padding: 0;
}

.btn--tach-trai {
  margin-right: auto;
}

.thanh-nut {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.card {
  background: #FBFCFE;
  border: 1px solid #E0E4EB;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px -16px rgba(16, 24, 40, 0.2);
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  background: #F7F9FC;
  border-bottom: 1px solid #E0E4EB;
  border-radius: 16px 16px 0 0;
}

.card__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: #1F2937;
}
.card__title::before {
  content: "";
  flex: none;
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background-image: linear-gradient(135deg, #3A69E2, #6D66DA);
}

.card__body {
  padding: 24px;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 24px;
}

.page-head__title {
  font-size: 28px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #1F2937;
}

.page-head__desc {
  margin-top: 4px;
  max-width: 46rem;
  font-size: 14px;
  color: #6B7280;
}

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.trang-thai {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 560px;
  margin: 32px auto;
  padding: 32px 24px;
  text-align: center;
  color: #6B7280;
  background: #FBFCFE;
  border: 1px solid #E0E4EB;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px -16px rgba(16, 24, 40, 0.2);
}

.trang-thai__ico {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #EEF3FD;
  color: #3A69E2;
  font-size: 20px;
}

.trang-thai--chan .trang-thai__ico {
  background: #FFFBEB;
  color: #B45309;
}

.trang-thai__tieu-de {
  font-size: 16px;
  font-weight: 600;
  color: #1F2937;
}

.trang-thai__hang {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.o {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.o__nhan {
  font-size: 14px;
  font-weight: 500;
  color: #1F2937;
}

.o__phu {
  font-weight: 400;
  color: #6B7280;
}

.o__goi-y {
  font-size: 12px;
  color: #6B7280;
}

.o__loi {
  font-size: 12px;
  color: #B91C1C;
}
.o__loi:empty {
  display: none;
}

.o input[type=text],
.o input[type=email],
.o input[type=search],
.o input[type=tel],
.o input[type=password],
.o input[type=number],
.o select,
.o textarea,
.o-nhap {
  width: 100%;
  height: 40px;
  padding: 0 13px;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  background: #FBFCFE;
  color: #1F2937;
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.o input[type=text]:focus,
.o input[type=email]:focus,
.o input[type=search]:focus,
.o input[type=tel]:focus,
.o input[type=password]:focus,
.o input[type=number]:focus,
.o select:focus,
.o textarea:focus,
.o-nhap:focus {
  border-color: #3A69E2;
  box-shadow: 0 0 0 4px rgba(58, 105, 226, 0.12);
}
.o input[type=text]:disabled, .o input[type=text][readonly],
.o input[type=email]:disabled,
.o input[type=email][readonly],
.o input[type=search]:disabled,
.o input[type=search][readonly],
.o input[type=tel]:disabled,
.o input[type=tel][readonly],
.o input[type=password]:disabled,
.o input[type=password][readonly],
.o input[type=number]:disabled,
.o input[type=number][readonly],
.o select:disabled,
.o select[readonly],
.o textarea:disabled,
.o textarea[readonly],
.o-nhap:disabled,
.o-nhap[readonly] {
  background: #EEF1F6;
  color: #6B7280;
}

.o textarea {
  height: auto;
  min-height: 92px;
  padding: 9px 13px;
  resize: vertical;
}

.o .input-validation-error {
  border-color: #B91C1C;
}
.o .input-validation-error:focus {
  box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.12);
}

.o__chon {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 20px;
  color: #1F2937;
  cursor: pointer;
}
.o__chon input[type=checkbox] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: #3A69E2;
  cursor: pointer;
}
.o__chon a {
  color: #6D66DA;
  font-weight: 500;
}
.o__chon a:hover {
  text-decoration: underline;
}

.cong-tac {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #4B5563;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.cong-tac:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.cong-tac:focus-visible .cong-tac__ray {
  box-shadow: 0 0 0 3px rgba(58, 105, 226, 0.25);
}
.cong-tac__ray {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  border-radius: 9999px;
  background: #E8EBF1;
  box-shadow: inset 0 0 0 1px rgba(31, 41, 55, 0.08);
  transition: background-color 0.15s ease;
}
.cong-tac__nut {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.25);
  transition: transform 0.15s ease;
}
.cong-tac.is-bat {
  color: #1F2937;
}
.cong-tac.is-bat .cong-tac__ray {
  background: #3A69E2;
}
.cong-tac.is-bat .cong-tac__nut {
  transform: translateX(16px);
}

.dai {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.5;
}
.dai > .fa {
  flex: none;
  margin-top: 3px;
}

.dai__ma {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 4px;
  background: rgba(31, 41, 55, 0.07);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.dai--loi {
  background: #FEF2F2;
  border-color: rgba(185, 28, 28, 0.3);
  color: #B91C1C;
}

.dai--canh {
  background: #FFFBEB;
  border-color: rgba(180, 83, 9, 0.35);
  color: #B45309;
}

.dai--ok {
  background: #EEF3FD;
  border-color: rgba(58, 105, 226, 0.3);
  color: #3A69E2;
}

.dai--tin {
  background: #F7F9FC;
  border-color: #E0E4EB;
  color: #4B5563;
}

.dai-dung-luong {
  flex-wrap: wrap;
}
.dai-dung-luong > span {
  flex: 1 1 240px;
}
.dai-dung-luong__lien-ket {
  margin-left: auto;
  font-weight: 600;
  white-space: nowrap;
  color: inherit;
  text-decoration: underline;
}
.dai-dung-luong__lien-ket .fa {
  opacity: 0.75;
}

.vt-toast {
  position: fixed;
  top: calc(4rem + var(--cao-dai, 0px) + 12px);
  right: 16px;
  z-index: 4000;
  width: min(24rem, 100vw - 2rem);
  margin: 0;
  padding: 12px 16px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
}
.vt-toast__dong {
  flex: none;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1.4;
}
.vt-toast__dong:hover {
  opacity: 1;
}

.skeleton {
  background: linear-gradient(90deg, #EEF1F6 25%, #E8EBF1 37%, #EEF1F6 63%);
  background-size: 400% 100%;
  border-radius: 6px;
  animation: skeleton-chay 1.4s ease infinite;
}

.skeleton--dong {
  height: 14px;
  margin: 12px 0;
}

@keyframes skeleton-chay {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
.vnh-loading {
  padding: 16px 0;
}

.modal-nen {
  position: fixed;
  inset: 0;
  background: rgba(38, 43, 54, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

.modal {
  width: 100%;
  max-width: 640px;
  background: #FBFCFE;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
}

.modal--rong {
  max-width: 960px;
}

.modal--nho {
  max-width: 28rem;
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  background: #F7F9FC;
  border-bottom: 1px solid #E0E4EB;
  border-radius: 16px 16px 0 0;
}
.modal__head h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1F2937;
}

.modal__body {
  padding: 24px;
  overflow-y: auto;
}

.modal__body--tha-noi {
  overflow: visible;
}

.modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid #E0E4EB;
}

.modal__dong {
  border: 0;
  background: transparent;
  color: #6B7280;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.modal__dong:hover {
  background: #EEF1F6;
  color: #1F2937;
}

.hop-chon-anh {
  max-width: 48rem;
}
.hop-chon-anh .modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hop-chon-anh .dai {
  margin-bottom: 0;
}

.hop-chon-anh__ngan {
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid #E0E4EB;
}

.hop-chon-anh__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 4px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #6B7280;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hop-chon-anh__tab .fa {
  opacity: 0.7;
}
.hop-chon-anh__tab:hover:not(:disabled) {
  color: #1F2937;
}
.hop-chon-anh__tab:disabled {
  cursor: not-allowed;
}
.hop-chon-anh__tab.is-dang-chon {
  border-bottom-color: #3A69E2;
  color: #3A69E2;
  font-weight: 600;
}
.hop-chon-anh__tab.is-dang-chon .fa {
  opacity: 1;
}

.hop-chon-anh__noi-dung {
  min-height: 260px;
}

.hop-chon-anh__tha {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 36rem;
  margin: 0 auto;
  padding: 16px;
  aspect-ratio: 1200/630;
  border: 2px dashed #E0E4EB;
  border-radius: 8px;
  background: #F4F6FA;
  text-align: center;
  overflow: hidden;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.hop-chon-anh__tha:hover, .hop-chon-anh__tha:focus-within {
  border-color: #B8C8F5;
  background: #EEF3FD;
}

.hop-chon-anh__tha-ico {
  font-size: 36px;
  color: #6D66DA;
  opacity: 0.85;
}

.hop-chon-anh__tha-chu {
  font-size: 13px;
  color: #1F2937;
}

.hop-chon-anh__tha-phu {
  font-size: 12px;
  color: #6B7280;
}

.hop-chon-anh__o-tep {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.hop-chon-anh__o-tep:disabled {
  cursor: wait;
}

.hop-chon-anh__xem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #EEF1F6;
}

.hop-chon-anh__nhan-anh {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(251, 252, 254, 0.92);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  font-size: 11px;
  font-weight: 500;
  color: #4B5563;
}

.hop-chon-anh__dang-tai {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(244, 246, 250, 0.92);
  font-size: 13px;
  color: #1F2937;
}
.hop-chon-anh__dang-tai .fa {
  font-size: 30px;
  color: #6D66DA;
}

.hop-chon-anh__luoi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.hop-chon-anh__anh {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #EEF1F6;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hop-chon-anh__anh img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hop-chon-anh__anh:hover {
  border-color: #9CA3AF;
}
.hop-chon-anh__anh.is-dang-chon {
  border-color: #3A69E2;
  box-shadow: 0 0 0 3px rgba(58, 105, 226, 0.3);
}

.hop-chon-anh__dau-chon {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #3A69E2;
  color: #FFFFFF;
  font-size: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.hop-chon-anh__trong {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
  color: #6B7280;
}
.hop-chon-anh__trong .fa {
  font-size: 40px;
  color: #9CA3AF;
}

.hop-chon-anh__nhac {
  font-size: 12px;
  color: #B45309;
}

.o-anh {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.o-anh__xem {
  position: relative;
  width: 100%;
  aspect-ratio: 1200/630;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  background: #EEF1F6;
  overflow: hidden;
}
.o-anh__xem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.o-anh__trong {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px dashed #E0E4EB;
  border-radius: 10px;
  font-size: 12px;
  color: #6B7280;
}
.o-anh__trong .fa {
  font-size: 22px;
  color: #9CA3AF;
}
.o-anh__nut {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.o-anh--vuong .o-anh__xem {
  width: 120px;
  aspect-ratio: 1/1;
}
.o-anh--logo .o-anh__xem {
  aspect-ratio: auto;
  height: 88px;
}
.o-anh--logo .o-anh__xem img {
  object-fit: contain;
  padding: 8px;
}
.o-anh--vuong .o-anh__xem img {
  object-fit: contain;
}

.modal .o-anh--ngang .o-anh__xem {
  max-width: 320px;
}

.hop-chon-tep__nhom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hop-chon-tep__nhom-nut {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #E0E4EB;
  border-radius: 9999px;
  background: #FBFCFE;
  color: #4B5563;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.hop-chon-tep__nhom-nut .fa {
  opacity: 0.7;
}
.hop-chon-tep__nhom-nut:hover:not(:disabled) {
  border-color: #9CA3AF;
}
.hop-chon-tep__nhom-nut:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.hop-chon-tep__nhom-nut.is-dang-chon {
  border-color: #3A69E2;
  background: #EEF3FD;
  color: #3A69E2;
  font-weight: 600;
}
.hop-chon-tep__nhom-nut.is-dang-chon .fa {
  opacity: 1;
}
.hop-chon-tep__tha {
  aspect-ratio: auto;
  min-height: 190px;
}
.hop-chon-tep__ten {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: #1F2937;
}
.hop-chon-tep__thanh {
  display: block;
  width: min(280px, 80%);
  height: 6px;
  border-radius: 3px;
  background: #E8EBF1;
  overflow: hidden;
}
.hop-chon-tep__thanh-chay {
  display: block;
  height: 100%;
  border-radius: 3px;
  background-image: linear-gradient(90deg, #3A69E2, #6D66DA);
  transition: width 0.2s ease;
}
.hop-chon-tep__ds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.hop-chon-tep__muc {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: #FBFCFE;
  border: 1px solid #E0E4EB;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hop-chon-tep__muc:hover {
  border-color: #9CA3AF;
}
.hop-chon-tep__muc.is-dang-chon {
  border-color: #3A69E2;
  box-shadow: 0 0 0 3px rgba(58, 105, 226, 0.18);
}
.hop-chon-tep__bieu-tuong {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #EEF1F6;
  color: #9CA3AF;
  font-size: 18px;
}
.hop-chon-tep__chu {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hop-chon-tep__muc .hop-chon-tep__ten {
  font-size: 13px;
}
.hop-chon-tep__phu {
  font-size: 12px;
  color: #6B7280;
}
.hop-chon-tep__dau {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #3A69E2;
  color: #FFFFFF;
  font-size: 12px;
}

.the-so-lieu {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
}
.the-so-lieu__o {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #FBFCFE;
  border: 1px solid #E0E4EB;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px -16px rgba(16, 24, 40, 0.2);
}
.the-so-lieu__ico {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #EEF3FD;
  color: #3A69E2;
  font-size: 17px;
}
.the-so-lieu__ico.is-tim {
  background: #F2F1FC;
  color: #6D66DA;
}
.the-so-lieu__ico.is-cam {
  background: #FFFBEB;
  color: #B45309;
}
.the-so-lieu__nhan {
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
}
.the-so-lieu__so {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  color: #1F2937;
}
.the-so-lieu__so span {
  font-size: 13px;
  font-weight: 400;
  color: #6B7280;
}
.the-so-lieu__ghi {
  margin-top: 2px;
  font-size: 12px;
  color: #6B7280;
}

.cay-dau {
  padding: 10px 0;
  background: #F7F9FC;
  border-bottom: 1px solid #E0E4EB;
  border-radius: 16px 16px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6B7280;
}
.cay-dau > span {
  padding: 0 16px;
}
.cay-dau__giua {
  text-align: center;
}
.cay-dau__phai {
  text-align: right;
}

.cay-ds {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cay-dong {
  position: relative;
  border-bottom: 1px solid #E0E4EB;
  transition: background-color 0.15s ease;
}
.cay-dong:last-child {
  border-bottom: 0;
}
.cay-dong:hover {
  background: rgba(242, 241, 252, 0.6);
}
.cay-dong.is-loi {
  background: rgba(254, 242, 242, 0.7);
}

.cay-o {
  min-width: 0;
  padding: 12px 16px;
  font-size: 13px;
  color: #4B5563;
}
.cay-o--ten {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cay-o--giua {
  text-align: center;
}
.cay-o--nut {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}
.cay-o__ico {
  flex: none;
  width: 18px;
  margin-top: 1px;
  text-align: center;
  color: #9CA3AF;
}
.cay-o__chu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}
.cay-o__ten {
  font-size: 14px;
  font-weight: 500;
  color: #1F2937;
  overflow-wrap: anywhere;
}
.cay-o__ten.is-goc {
  font-weight: 600;
}
.cay-o__mo-ta, .cay-o__nhac {
  flex-basis: 100%;
  font-size: 12px;
  color: #6B7280;
}
.cay-o__nhac {
  color: #B45309;
}
.cay-o__so {
  font-variant-numeric: tabular-nums;
  color: #1F2937;
}
.cay-o__phu {
  margin-left: 4px;
  font-size: 12px;
  color: #6B7280;
}
.cay-o code {
  display: inline-block;
  max-width: 100%;
  padding: 3px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 6px;
  background: #F7F9FC;
  font-size: 12px;
  color: #6B7280;
}

.cay-cap-1 .cay-o--ten {
  padding-left: 40px;
}

.cay-cap-2 .cay-o--ten {
  padding-left: 64px;
}

.cay-cap-3 .cay-o--ten {
  padding-left: 88px;
}

.cay-cap-4 .cay-o--ten {
  padding-left: 112px;
}

.cay-cap-5 .cay-o--ten {
  padding-left: 136px;
}

.cay-ke {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px solid #E0E4EB;
  pointer-events: none;
}
.cay-ke--noi.is-cuoi {
  bottom: 50%;
}
.cay-ke--noi::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px;
  border-top: 1px solid #E0E4EB;
}
.cay-ke--noi.is-cuoi::after {
  top: 100%;
}

.cay-ke--cot-1 {
  left: 25px;
}

.cay-ke--cot-2 {
  left: 49px;
}

.cay-ke--cot-3 {
  left: 73px;
}

.cay-ke--cot-4 {
  left: 97px;
}

.cay-ke--cot-5 {
  left: 121px;
}

.nut-ico {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #EEF1F6;
  color: #4B5563;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nut-ico:hover:not(:disabled) {
  background: #4B5563;
  color: #FFFFFF;
}
.nut-ico:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.nut-ico--sua {
  background: #EEF3FD;
  color: #3A69E2;
}
.nut-ico--sua:hover:not(:disabled) {
  background: #3A69E2;
  color: #FFFFFF;
}
.nut-ico--xoa {
  background: #FEF2F2;
  color: #B91C1C;
}
.nut-ico--xoa:hover:not(:disabled) {
  background: #B91C1C;
  color: #FFFFFF;
}
.nut-ico--xanh {
  background: rgba(22, 163, 74, 0.1);
  color: #16A34A;
}
.nut-ico--xanh:hover:not(:disabled) {
  background: #16A34A;
  color: #FFFFFF;
}

.nhan {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background: #EEF1F6;
  color: #6B7280;
}

.nhan--mau {
  background: #FFFBEB;
  color: #B45309;
}

.nhan--nhap {
  background: #EEF1F6;
  color: #4B5563;
}

.nhan--dang {
  background: rgba(22, 163, 74, 0.1);
  color: #16A34A;
}

.nhan--go {
  background: #FFFBEB;
  color: #B45309;
}

.nhan--rac {
  background: #FEF2F2;
  color: #B91C1C;
}

.nhan--tim {
  background: #F2F1FC;
  color: #6D66DA;
}

.nhan-hien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid #E0E4EB;
  border-radius: 9999px;
  background: #EEF1F6;
  color: #6B7280;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.nhan-hien.is-hien {
  border-color: rgba(22, 163, 74, 0.3);
  background: rgba(22, 163, 74, 0.1);
  color: #16A34A;
}
.nhan-hien:hover:not(:disabled) {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.nhan-hien:disabled {
  opacity: 0.5;
  cursor: wait;
}

.trang-thai--trong-the {
  margin: 0 auto;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.o__canh {
  font-size: 12px;
  color: #B45309;
}

.cm-bieu-mau {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cm-bieu-mau .dai {
  margin-bottom: 0;
}

.cm-xoa-ds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cm-xoa-ds li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #F7F9FC;
  font-size: 13px;
  line-height: 1.5;
  color: #4B5563;
}
.cm-xoa-ds li > .fa {
  flex: none;
  width: 16px;
  margin-top: 3px;
  text-align: center;
  color: #9CA3AF;
}
.cm-xoa-ds li.is-canh {
  background: #FFFBEB;
  color: #B45309;
}
.cm-xoa-ds li.is-canh > .fa {
  color: #B45309;
  opacity: 0.8;
}

.tab-loc {
  display: flex;
  gap: 8px;
  padding: 16px 16px 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.tab-loc__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #6B7280;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tab-loc__tab:hover {
  background: #EEF1F6;
  color: #1F2937;
}
.tab-loc__tab.is-on {
  background-image: linear-gradient(135deg, #3A69E2, #6D66DA);
  color: #FFFFFF;
  box-shadow: 0 10px 26px -10px rgba(58, 105, 226, 0.55);
}
.tab-loc__tab.is-on .tab-loc__so {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}
.tab-loc__so {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 9999px;
  background: #EEF1F6;
  color: #4B5563;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.thanh-loc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid #E0E4EB;
}
.thanh-loc__o--chon {
  width: 220px;
}
.thanh-loc__o--ngay {
  width: 150px;
}
.thanh-loc__o--ngay input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  background: #FBFCFE;
  color: #1F2937;
  font: inherit;
  font-size: 14px;
}

.o-tim {
  position: relative;
  flex: 1 1 260px;
  min-width: 200px;
}
.o-tim__ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
}
.o-tim__nhap {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 36px;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  background: #FBFCFE;
  color: #1F2937;
  font: inherit;
  font-size: 14px;
  outline: none;
}
.o-tim__nhap:focus {
  border-color: #3A69E2;
  box-shadow: 0 0 0 4px rgba(58, 105, 226, 0.12);
}

.dai--trong-the {
  margin: 12px 16px 0;
}

.thanh-phan-trang {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px;
}

a.the-so-lieu__o {
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.the-so-lieu__o:hover {
  border-color: #B8C8F5;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
}

.bai-nhom-ds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bai-nhom {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #F7F9FC;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.bai-nhom:hover {
  background: rgba(242, 241, 252, 0.6);
  border-color: #B8C8F5;
}
.bai-nhom.is-ghim {
  box-shadow: inset 3px 0 0 #B45309;
}
.bai-nhom.is-ha .bai-nhom__tieu-de {
  color: #6B7280;
}
.bai-nhom__anh {
  position: relative;
  flex: none;
  width: 64px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #EEF1F6;
  color: #9CA3AF;
  overflow: hidden;
}
.bai-nhom__anh img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bai-nhom__so {
  position: absolute;
  top: 3px;
  left: 3px;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(38, 43, 54, 0.78);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}
.bai-nhom__chu {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bai-nhom__tieu-de {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #1F2937;
  overflow-wrap: anywhere;
}
.bai-nhom__phu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 12px;
  color: #6B7280;
}
.bai-nhom__chuyen-muc {
  max-width: 100%;
  padding: 1px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 6px;
  background: #F2F1FC;
  color: #6D66DA;
  font-weight: 500;
}
.bai-nhom__ngay {
  font-variant-numeric: tabular-nums;
}
.bai-nhom__nhan {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.bai-nhom__nut {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bai-nhom__ghim.is-on {
  background: #FFFBEB;
  color: #B45309;
}
.bai-nhom__ghim.is-on:hover:not(:disabled) {
  background: #B45309;
  color: #FFFFFF;
}

.nhom-trong {
  padding: 16px;
  border: 1px dashed #E0E4EB;
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
  color: #6B7280;
}

.chon-gan {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chon-gan__tim {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chon-gan__tim .o-tim {
  flex: 1 1 auto;
  min-width: 0;
}

.vtri-o-so {
  max-width: 120px;
}

.dai-khach {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #B45309;
  color: #FFFFFF;
  font-weight: 500;
}

.dai-khach__ico {
  flex: none;
  font-size: 15px;
  opacity: 0.8;
}

.dai-khach__chu {
  min-width: 0;
}

.dai-khach__ai strong {
  font-weight: 700;
}

.dai-khach__form {
  flex: none;
  margin: 0;
}

.dai-khach__thoat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.dai-khach__thoat .fa {
  opacity: 0.85;
}
.dai-khach__thoat:hover, .dai-khach__thoat:focus-visible {
  background: #FFFFFF;
  color: #B45309;
}

.dai-khach--sap-het {
  font-weight: 600;
}

.dai-khach--da-het {
  background: #B91C1C;
}
.dai-khach--da-het .dai-khach__thoat:hover,
.dai-khach--da-het .dai-khach__thoat:focus-visible {
  color: #B91C1C;
}

@keyframes vnh-spin {
  to {
    transform: rotate(360deg);
  }
}
.vnh-dropdownlist {
  position: relative;
  font-size: 14px;
}
.vnh-dropdownlist.disabled .ddl-categories {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.vnh-dropdownlist .ddl-categories {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #E0E4EB;
  border-radius: 6px;
  background-color: #FBFCFE;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 34px;
}
.vnh-dropdownlist .ddl-categories:hover {
  border-color: #3A69E2;
}
.vnh-dropdownlist .ddl-categories:focus-within {
  border-color: #3A69E2;
  box-shadow: 0 0 0 2px rgba(58, 105, 226, 0.15);
}
.vnh-dropdownlist .ddl-categories .disp-text {
  padding: 0 12px;
  font-size: 14px;
  line-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  color: #1F2937;
}
.vnh-dropdownlist .ddl-categories .disp-text.multi {
  overflow: unset;
  white-space: unset;
  line-height: 1.4;
  padding: 4px 8px;
}
.vnh-dropdownlist .ddl-categories .disp-text.multi .item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background-color: #EEF3FD;
  color: #3A69E2;
  border-radius: 6px;
  margin: 2px 4px 2px 0;
  font-size: 13px;
}
.vnh-dropdownlist .ddl-categories .disp-text.multi .item a {
  color: #6B7280;
  text-decoration: none;
  font-weight: 700;
}
.vnh-dropdownlist .ddl-categories .disp-text.multi .item a:hover {
  color: #B91C1C;
}
.vnh-dropdownlist .ddl-categories .disp-text .place-holder {
  color: #9CA3AF;
}
.vnh-dropdownlist .ddl-categories .btn-clear {
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  cursor: pointer;
  color: #9CA3AF;
  font-size: 16px;
  line-height: 1;
  transition: color 0.12s;
}
.vnh-dropdownlist .ddl-categories .btn-clear:hover {
  color: #1F2937;
}
.vnh-dropdownlist .ddl-categories .btn-ddl {
  border-radius: 0 6px 6px 0;
  padding: 0 8px;
  min-height: 32px;
  border-width: 0 0 0 1px;
  box-sizing: border-box;
  border-style: solid;
  border-color: #E0E4EB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.12s;
}
.vnh-dropdownlist .ddl-categories .btn-ddl:hover {
  background-color: #EEF3FD;
}
.vnh-dropdownlist .ddl-categories .btn-ddl .caret {
  cursor: pointer;
  user-select: none;
}
.vnh-dropdownlist .ddl-categories .btn-ddl .caret::before {
  font-size: 10px;
  content: "▶";
  color: #3A69E2;
  display: inline-block;
  transition: transform 0.15s;
  vertical-align: middle;
  transform: rotate(90deg);
}
.vnh-dropdownlist .ddl-categories .btn-ddl.expaned .caret::before {
  transform: rotate(270deg);
}
.vnh-dropdownlist .content-data {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 8px 12px;
  border: 1px solid #E0E4EB;
  border-radius: 6px;
  background-color: #FBFCFE;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  display: none;
}
.vnh-dropdownlist .content-data.expaned {
  display: block;
}
.vnh-dropdownlist .content-data .search {
  margin: 8px 0;
}
.vnh-dropdownlist .content-data .search .search-text {
  width: 100%;
  border: 1px solid #E0E4EB;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
}
.vnh-dropdownlist .content-data .search .search-text:focus {
  outline: none;
  border-color: #3A69E2;
}
.vnh-dropdownlist .content-data .p-data {
  max-height: 320px;
  overflow-y: auto;
}
.vnh-dropdownlist .content-data .list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vnh-dropdownlist .content-data .list-items .item {
  cursor: pointer;
}
.vnh-dropdownlist .content-data .list-items .item .name {
  display: inline-block;
  padding: 7px 8px;
}
.vnh-dropdownlist .content-data .list-items .item:hover {
  border-radius: 6px;
  background-color: #EEF1F6;
}
.vnh-dropdownlist .content-data .list-items .item.active {
  color: #FFFFFF;
  border-radius: 6px;
  background-color: #3A69E2;
}
.vnh-dropdownlist .content-data .list-items .item.active:hover {
  background-color: #2D52B0;
}
.vnh-dropdownlist .content-data .spinner {
  width: 32px;
  height: 32px;
  border: 4px solid #EEF1F6;
  border-top-color: #3A69E2;
  border-radius: 50%;
  animation: vnh-spin 0.7s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -16px 0 0 -16px;
}

.vnh-timepicker .ddl-categories .timepicker-mask-input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  min-width: 0;
  padding: 0 8px;
  font-size: 14px;
  color: #1F2937;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}
.vnh-timepicker .ddl-categories .timepicker-mask-input:disabled {
  cursor: not-allowed;
  background: transparent;
}

.vnh-dropdowntree {
  position: relative;
  font-size: 14px;
}
.vnh-dropdowntree .ddl-categories {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #E0E4EB;
  border-radius: 6px;
  min-height: 34px;
  background-color: #FBFCFE;
  transition: border-color 0.15s;
}
.vnh-dropdowntree .ddl-categories:hover {
  border-color: #3A69E2;
}
.vnh-dropdowntree .ddl-categories .disp-text {
  padding: 0 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 1rem);
  line-height: 32px;
  cursor: pointer;
  color: #1F2937;
}
.vnh-dropdowntree .ddl-categories .disp-text.multi {
  overflow: unset;
  white-space: unset;
  line-height: 1.4;
  padding: 4px 8px;
}
.vnh-dropdowntree .ddl-categories .disp-text .item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background-color: #EEF3FD;
  color: #3A69E2;
  border-radius: 6px;
  margin: 2px 4px 2px 0;
  font-size: 13px;
}
.vnh-dropdowntree .ddl-categories .disp-text .item a {
  color: #6B7280;
  text-decoration: none;
  font-weight: 700;
}
.vnh-dropdowntree .ddl-categories .disp-text .item a:hover {
  color: #B91C1C;
}
.vnh-dropdowntree .ddl-categories .disp-text .place-holder {
  color: #9CA3AF;
}
.vnh-dropdowntree .ddl-categories .btn-clear {
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  cursor: pointer;
  color: #9CA3AF;
}
.vnh-dropdowntree .ddl-categories .btn-clear:hover {
  color: #1F2937;
}
.vnh-dropdowntree .ddl-categories .btn-ddl {
  border-radius: 0 6px 6px 0;
  padding: 0 8px;
  min-height: 32px;
  border-width: 0 0 0 1px;
  box-sizing: border-box;
  border-style: solid;
  border-color: #E0E4EB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.12s;
}
.vnh-dropdowntree .ddl-categories .btn-ddl:hover {
  background-color: #EEF3FD;
}
.vnh-dropdowntree .ddl-categories .btn-ddl .caret {
  cursor: pointer;
  user-select: none;
}
.vnh-dropdowntree .ddl-categories .btn-ddl .caret::before {
  font-size: 10px;
  content: "▶";
  color: #3A69E2;
  display: inline-block;
  transition: transform 0.15s;
  vertical-align: middle;
  transform: rotate(90deg);
}
.vnh-dropdowntree .ddl-categories .btn-ddl.expaned .caret::before {
  transform: rotate(270deg);
}
.vnh-dropdowntree .content-data {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 8px 12px 12px;
  border: 1px solid #E0E4EB;
  border-radius: 6px;
  background-color: #FBFCFE;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.vnh-dropdowntree .content-data .search {
  margin: 8px 0;
}
.vnh-dropdowntree .content-data .search .search-text {
  width: 100%;
  border: 1px solid #E0E4EB;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
}
.vnh-dropdowntree .content-data .search .search-text:focus {
  outline: none;
  border-color: #3A69E2;
}
.vnh-dropdowntree .content-data .p-data {
  max-height: 320px;
  overflow-y: auto;
}
.vnh-dropdowntree .content-data .list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vnh-dropdowntree .content-data .list-items li ul {
  padding-left: 24px;
  border-left: 1px solid #E0E4EB;
  height: fit-content;
}
.vnh-dropdowntree .content-data .list-items ul {
  list-style: none;
}
.vnh-dropdowntree .content-data .list-items ul li {
  position: relative;
}
.vnh-dropdowntree .content-data .list-items ul li::before {
  content: "";
  position: absolute;
  top: 18px;
  left: -24px;
  width: 24px;
  height: 1px;
  background: #E0E4EB;
}
.vnh-dropdowntree .content-data .list-items .item-multi {
  padding-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vnh-dropdowntree .content-data .list-items .item-multi.no-child {
  margin-left: 19px;
}
.vnh-dropdowntree .content-data .list-items .arrow {
  display: inline-block;
  padding: 7px 5px;
  cursor: pointer;
  width: 15px;
  height: 18px;
}
.vnh-dropdowntree .content-data .list-items .item {
  display: inline-block;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 6px;
}
.vnh-dropdowntree .content-data .list-items .item:hover {
  background-color: #EEF1F6;
}
.vnh-dropdowntree .content-data .list-items .item.active {
  color: #FFFFFF;
  background-color: #3A69E2;
}
.vnh-dropdowntree .content-data .list-items .item.active:hover {
  background-color: #2D52B0;
}
.vnh-dropdowntree .content-data .list-items .caret {
  cursor: pointer;
  user-select: none;
}
.vnh-dropdowntree .content-data .list-items .caret::before {
  font-size: 10px;
  content: "▶";
  color: #6B7280;
  display: inline-block;
  transition: transform 0.15s;
  vertical-align: middle;
}
.vnh-dropdowntree .content-data .list-items .caret.caret-down::before {
  transform: rotate(90deg);
}
.vnh-dropdowntree .content-data .list-items .nested {
  display: none;
}
.vnh-dropdowntree .content-data .list-items .active {
  margin-left: 3px;
}
.vnh-dropdowntree .content-data .list-items .no-child {
  display: inline-block;
  margin-left: 12px;
}
.vnh-dropdowntree .content-data .list-items .no-child .item {
  margin-left: 5px;
}
.vnh-dropdowntree .content-data .spinner {
  width: 32px;
  height: 32px;
  border: 4px solid #EEF1F6;
  border-top-color: #3A69E2;
  border-radius: 50%;
  animation: vnh-spin 0.7s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -16px 0 0 -16px;
}

.chk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid #E0E4EB;
  border-radius: 4px;
  cursor: pointer;
  flex: 0 0 auto;
  background: #FBFCFE;
  transition: background-color 0.12s, border-color 0.12s;
}

.chk--active {
  background: #3A69E2;
  border-color: #3A69E2;
  position: relative;
}
.chk--active::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.vnh-treeview {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.vnh-treeview li ul {
  padding-left: 16px;
  border-left: 1px solid #E0E4EB;
  height: fit-content;
}
.vnh-treeview ul {
  list-style: none;
}
.vnh-treeview ul li {
  position: relative;
}
.vnh-treeview ul li::before {
  content: "";
  position: absolute;
  top: 18px;
  left: -16px;
  width: 16px;
  height: 1px;
  background: #E0E4EB;
}
.vnh-treeview .item {
  display: inline-block;
  padding: 6px 0;
  color: #1F2937;
}
.vnh-treeview .caret {
  cursor: pointer;
  user-select: none;
}
.vnh-treeview .caret::before {
  font-size: 10px;
  content: "▶";
  color: #6B7280;
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s;
  vertical-align: middle;
}
.vnh-treeview .caret.caret-down::before {
  transform: rotate(90deg);
}

.pagination-component {
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
}
.pagination-component nav {
  display: inline-block;
  margin-left: 16px;
  vertical-align: middle;
}
.pagination-component input::-webkit-outer-spin-button,
.pagination-component input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pagination-component input[type=number] {
  -moz-appearance: textfield;
}
.pagination-component .invalid-msg {
  font-size: 12px;
  color: #B91C1C;
  margin-bottom: 8px;
}
.pagination-component .input-group {
  display: inline-flex;
  align-items: stretch;
}
.pagination-component .input-group-prepend .input-group-text {
  display: flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #E0E4EB;
  border-right: 0;
  border-radius: 6px 0 0 6px;
  background: #EEF1F6;
  color: #6B7280;
  font-size: 12px;
}
.pagination-component .form-control {
  border: 1px solid #E0E4EB;
  border-radius: 0 6px 6px 0;
  padding: 4px 8px;
  font-size: 13px;
}
.pagination-component .pagination {
  display: inline-flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}
.pagination-component .pagination .page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid #E0E4EB;
  border-radius: 6px;
  color: #3A69E2;
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
}
.pagination-component .pagination .page-item .page-link:hover {
  background-color: #EEF3FD;
  border-color: #B8C8F5;
}
.pagination-component .pagination .page-item.active .page-link {
  background-color: #3A69E2;
  border-color: #3A69E2;
  color: #FFFFFF;
}
.pagination-component .pagination .page-item.disabled .page-link {
  color: #9CA3AF;
  background-color: #FBFCFE;
  border-color: #E0E4EB;
  cursor: default;
}
.pagination-component__caret {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #3A69E2;
  border-bottom: 2px solid #3A69E2;
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.pagination-component__caret--len {
  transform: rotate(225deg);
}

.vnh-progress-bar {
  min-height: 5px;
  background-color: #EEF1F6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 12px;
  color: #FFFFFF;
  border-radius: 6px;
  overflow: hidden;
}
.vnh-progress-bar .processed-percent {
  border-radius: 6px;
  text-align: center;
  background-color: #3A69E2;
  background-image: linear-gradient(45deg, hsla(0, 0%, 100%, 0.15) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, 0.15) 0, hsla(0, 0%, 100%, 0.15) 75%, transparent 0, transparent);
  background-size: 1rem 1rem;
  animation: vnh-progress-stripes 1s linear infinite;
}

@keyframes vnh-progress-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}
.overlay-loading {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 999;
}
.overlay-loading.true {
  display: block;
}
.overlay-loading .bk-load {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
}
.overlay-loading .bk-load .spinner {
  border: 5px solid #EEF1F6;
  border-top: 5px solid #3A69E2;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  animation: vnh-spin 0.7s linear infinite;
  position: sticky;
  top: 35vh;
}

.panel-processing {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: #3A69E2;
  background-color: #EEF3FD;
  z-index: 9999;
  border-top: 1px solid #B8C8F5;
}
.panel-processing.true {
  display: flex;
}
.panel-processing .msg {
  padding: 8px;
  text-align: center;
  font-size: 13px;
}

.zoom-image-modal {
  background: transparent;
  box-shadow: none;
  max-width: 90vw;
  max-height: 90vh;
  position: relative;
}
.zoom-image-modal__dong {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FBFCFE;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
  z-index: 1;
}
.zoom-image-modal__anh {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.zoom-image-modal__anh img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 10px;
}

.page-trang-chu .tc-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 24px;
  border-radius: 20px;
  color: #fff;
  background-image: linear-gradient(118deg, #264296 0%, #2D52B0 52%, #5550AA 100%);
  box-shadow: 0 18px 40px -22px rgba(58, 105, 226, 0.7);
}
.page-trang-chu .tc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
}
.page-trang-chu .tc-hero > * {
  position: relative;
  z-index: 1;
}
.page-trang-chu .tc-hero__trai {
  min-width: 0;
  max-width: 42rem;
}
.page-trang-chu .tc-hero__ngay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}
.page-trang-chu .tc-hero__chao {
  margin: 12px 0 6px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.page-trang-chu .tc-hero__dong {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  overflow-wrap: anywhere;
}
.page-trang-chu .tc-hero__dong b {
  color: #fff;
}
.page-trang-chu .tc-hero__mien {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.page-trang-chu .tc-hero__hang-nut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.page-trang-chu .tc-hnut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.page-trang-chu .tc-hnut:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  text-decoration: none;
}
.page-trang-chu .tc-hnut:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.page-trang-chu .tc-hnut--dac {
  background: #fff;
  border-color: #fff;
  color: #2D52B0;
}
.page-trang-chu .tc-hnut--dac:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.92);
}
.page-trang-chu .tc-hero__o {
  flex: none;
  min-width: 14rem;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
}
.page-trang-chu .tc-hero__nhan {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.page-trang-chu .tc-hero__tt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 17px;
  font-weight: 700;
}
.page-trang-chu .tc-hero__phu {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
}
.page-trang-chu .tc-luoi {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}
.page-trang-chu .tc-so-bai {
  margin-top: 24px;
}
.page-trang-chu .tc-dem {
  padding: 2px 10px;
  border-radius: 9999px;
  background: rgba(58, 105, 226, 0.1);
  color: #3A69E2;
  font-size: 12px;
  font-weight: 700;
}
.page-trang-chu .tc-tien-do {
  border-radius: 4px;
  background-color: #E8EBF1;
}
.page-trang-chu .tc-tien-do .processed-percent {
  min-height: 8px;
  border-radius: 4px;
  background-image: linear-gradient(90deg, #3A69E2, #6D66DA);
  animation: none;
}
.page-trang-chu .tc-tien-do span {
  display: none;
}
.page-trang-chu .tc-tien-do.is-gan-day .processed-percent {
  background-image: none;
  background-color: #B45309;
}
.page-trang-chu .tc-tien-do.is-day .processed-percent {
  background-image: none;
  background-color: #B91C1C;
}
.page-trang-chu .tc-buoc {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.page-trang-chu .tc-buoc__muc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #E0E4EB;
}
.page-trang-chu .tc-buoc__muc:first-child {
  border-top: 0;
}
.page-trang-chu .tc-buoc__dau {
  flex: none;
  width: 22px;
  font-size: 20px;
  text-align: center;
  color: #9CA3AF;
}
.page-trang-chu .tc-buoc__chu {
  flex: 1;
  min-width: 0;
}
.page-trang-chu .tc-buoc__ten {
  font-weight: 600;
  color: #1F2937;
}
.page-trang-chu .tc-buoc__mo-ta {
  font-size: 13px;
  color: #6B7280;
}
.page-trang-chu .tc-buoc__muc.is-xong .tc-buoc__dau {
  color: #3A69E2;
}
.page-trang-chu .tc-buoc__muc.is-xong .tc-buoc__ten {
  color: #6B7280;
  text-decoration: line-through;
}
.page-trang-chu .tc-so {
  margin-bottom: 8px;
  color: #6B7280;
}
.page-trang-chu .tc-so b {
  font-size: 20px;
  color: #1F2937;
  font-variant-numeric: tabular-nums;
}
.page-trang-chu .tc-ghi-chu {
  margin-top: 12px;
  font-size: 13px;
  color: #6B7280;
}

.page-cau-hinh-website .chw-luoi {
  display: grid;
  gap: 24px;
  align-items: start;
}
.page-cau-hinh-website .chw-dau-ico {
  font-size: 16px;
  color: #9CA3AF;
}
.page-cau-hinh-website .chw-cac-o {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.page-cau-hinh-website .chw-nhan-hang {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.page-cau-hinh-website .chw-dem {
  flex: none;
  font-size: 12px;
  color: #6B7280;
  font-variant-numeric: tabular-nums;
}
.page-cau-hinh-website .chw-dem.is-gan-day {
  color: #B45309;
  font-weight: 600;
}
.page-cau-hinh-website .chw-google__nhan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6B7280;
}
.page-cau-hinh-website .chw-google__phu {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
}
.page-cau-hinh-website .chw-google__phu .fa {
  opacity: 0.7;
}
.page-cau-hinh-website .chw-google__khung {
  padding: 16px;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  background: #F7F9FC;
  font-family: Arial, sans-serif;
  overflow-wrap: anywhere;
}
.page-cau-hinh-website .chw-google__nguon {
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-cau-hinh-website .chw-google__bieu-tuong {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #EEF1F6;
  color: #4B5563;
  font-size: 13px;
  font-weight: 700;
}
.page-cau-hinh-website .chw-google__nguon-chu {
  min-width: 0;
  line-height: 1.3;
}
.page-cau-hinh-website .chw-google__ten {
  display: block;
  font-size: 14px;
  color: #202124;
}
.page-cau-hinh-website .chw-google__url {
  display: block;
  font-size: 12px;
  color: #4d5156;
}
.page-cau-hinh-website .chw-google__tieu-de {
  margin-top: 6px;
  font-size: 19px;
  line-height: 1.3;
  color: #1a0dab;
}
.page-cau-hinh-website .chw-google__mo-ta {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.58;
  color: #4d5156;
}
.page-cau-hinh-website .chw-chan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 24px;
  border-top: 1px solid #E0E4EB;
  background: #F7F9FC;
  border-radius: 0 0 16px 16px;
}
.page-cau-hinh-website .chw-chan__trang-thai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6B7280;
}
.page-cau-hinh-website .chw-chan__cham {
  font-size: 8px;
  color: #B45309;
}
.page-cau-hinh-website .chw-chan__nut {
  margin-top: 0;
}
.page-cau-hinh-website .chw-phu {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.page-cau-hinh-website .chw-goi-y {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  color: #4B5563;
}
.page-cau-hinh-website .chw-goi-y li {
  display: flex;
  gap: 8px;
}
.page-cau-hinh-website .chw-goi-y .fa {
  flex: none;
  margin-top: 3px;
  color: #3A69E2;
  opacity: 0.8;
}
.page-cau-hinh-website .chw-goi-y b {
  color: #1F2937;
}
.page-cau-hinh-website .chw-duong-dan__mien {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #E0E4EB;
  border-radius: 8px;
  background: #F7F9FC;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  color: #1F2937;
  overflow-wrap: anywhere;
}
.page-cau-hinh-website .chw-duong-dan__cham {
  font-size: 8px;
  color: #9CA3AF;
}
.page-cau-hinh-website .chw-duong-dan__cham.is-chay {
  color: #16A34A;
}
.page-cau-hinh-website .chw-duong-dan__chu {
  margin-top: 12px;
  font-size: 13px;
  color: #6B7280;
}
.page-cau-hinh-website .chw-cot {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.page-cau-hinh-website .chw-google__bieu-tuong img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.page-cau-hinh-website .chw-anh-the__trang-thai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6B7280;
}
.page-cau-hinh-website .chw-anh-the__trang-thai .fa {
  opacity: 0.7;
}
.page-cau-hinh-website .chw-anh-luoi {
  display: grid;
  gap: 24px;
}
.page-cau-hinh-website .chw-anh {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.page-cau-hinh-website .chw-anh .o__nhan {
  margin: 0;
}
.page-cau-hinh-website .chw-anh__mo-ta {
  margin: 0 0 4px;
  font-size: 12px;
  color: #6B7280;
}

.page-xac-thuc .xt-the {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: #FBFCFE;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.page-xac-thuc .xt-dau {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.page-xac-thuc .xt-dau__logo {
  height: 40px;
  width: auto;
}
.page-xac-thuc .xt-dau__tieu-de {
  font-size: 28px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #1F2937;
  text-wrap: balance;
}
.page-xac-thuc .xt-dau__mo-ta {
  font-size: 13px;
  line-height: 1.5;
  color: #6B7280;
}
.page-xac-thuc .xt-form,
.page-xac-thuc .xt-form > form,
.page-xac-thuc .xt-cac-o {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-xac-thuc .xt-form .dai {
  margin-bottom: 0;
}
.page-xac-thuc .o input[type=text],
.page-xac-thuc .o input[type=email],
.page-xac-thuc .o input[type=tel],
.page-xac-thuc .o input[type=password] {
  border-radius: 8px;
  padding: 0 14px;
}
.page-xac-thuc .o input[type=text]:focus,
.page-xac-thuc .o input[type=email]:focus,
.page-xac-thuc .o input[type=tel]:focus,
.page-xac-thuc .o input[type=password]:focus {
  border-color: #6D66DA;
  box-shadow: 0 0 0 3px rgba(109, 102, 218, 0.12);
}
.page-xac-thuc .o .input-validation-error {
  border-color: #B91C1C;
}
.page-xac-thuc .o-mat-khau {
  position: relative;
}
.page-xac-thuc .o-mat-khau input[type=password],
.page-xac-thuc .o-mat-khau input[type=text] {
  padding-right: 44px;
}
.page-xac-thuc .o-mat-khau__nut {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #6B7280;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.page-xac-thuc .o-mat-khau__nut:hover {
  background: #EEF1F6;
  color: #1F2937;
}
.page-xac-thuc .xt-dieu-kien {
  list-style: none;
  margin: 2px 0 0;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 8px;
  background: #EEF3FD;
}
.page-xac-thuc .xt-dieu-kien li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #6B7280;
}
.page-xac-thuc .xt-dieu-kien li .fa {
  width: 14px;
  text-align: center;
  color: #9CA3AF;
}
.page-xac-thuc .xt-dieu-kien li.is-dat {
  color: #2D52B0;
  font-weight: 500;
}
.page-xac-thuc .xt-dieu-kien li.is-dat .fa {
  color: #3A69E2;
}
.page-xac-thuc .xt-nut {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  background-image: linear-gradient(90deg, #3A69E2, #6D66DA);
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.page-xac-thuc .xt-nut:hover {
  filter: brightness(1.1);
}
.page-xac-thuc .xt-nut-phu {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  font-size: 14px;
}
.page-xac-thuc .xt-lien-ket {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 13px;
}
.page-xac-thuc .xt-lien-ket a {
  color: #6D66DA;
}
.page-xac-thuc .xt-lien-ket a:hover {
  text-decoration: underline;
}
.page-xac-thuc .xt-lien-ket .fa {
  margin-right: 4px;
  font-size: 12px;
}
.page-xac-thuc .xt-lien-ket--hai-ben {
  justify-content: space-between;
}

.than-xac-thuc {
  position: relative;
  min-height: 100vh;
}

.than-xac-thuc .page-xac-thuc {
  padding-bottom: 48px;
}

.xt-phien-ban {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  margin: 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
}

.than-xac-thuc:has(.page-dieu-khoan) .xt-phien-ban {
  color: #6B7280;
}

.page-dieu-khoan {
  min-height: 100vh;
  margin: 0 auto;
  max-width: 880px;
  color: #1F2937;
}
.page-dieu-khoan .dk-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.page-dieu-khoan .dk-dau__logo img {
  height: 36px;
  width: auto;
}
.page-dieu-khoan .dk-the__dau {
  padding: 24px;
}
.page-dieu-khoan .dk-tieu-de {
  font-size: 28px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.page-dieu-khoan .dk-ngay {
  margin-top: 4px;
  font-size: 13px;
  color: #6B7280;
}
.page-dieu-khoan .dk-than {
  font-size: 15px;
  line-height: 1.7;
}
.page-dieu-khoan .dk-mo-dau {
  color: #4B5563;
}
.page-dieu-khoan .dk-muc-luc {
  margin: 24px 0;
  padding: 16px 24px;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  background: #F7F9FC;
}
.page-dieu-khoan .dk-muc-luc ol {
  margin: 8px 0 0;
  padding-left: 24px;
  columns: 2;
  column-gap: 32px;
  font-size: 14px;
}
.page-dieu-khoan .dk-muc-luc li {
  break-inside: avoid;
}
.page-dieu-khoan .dk-muc-luc a {
  color: #2D52B0;
}
.page-dieu-khoan .dk-muc-luc a:hover {
  text-decoration: underline;
}
.page-dieu-khoan .dk-muc-luc__tieu-de {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6B7280;
}
.page-dieu-khoan .dk-muc {
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid #E0E4EB;
  scroll-margin-top: 16px;
}
.page-dieu-khoan .dk-muc h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 600;
}
.page-dieu-khoan .dk-muc h3 {
  margin: 16px 0 4px;
  font-size: 16px;
  font-weight: 600;
}
.page-dieu-khoan .dk-muc p {
  margin: 0 0 12px;
}
.page-dieu-khoan .dk-muc ul,
.page-dieu-khoan .dk-muc ol {
  margin: 0 0 12px;
  padding-left: 24px;
}
.page-dieu-khoan .dk-muc li + li {
  margin-top: 6px;
}
.page-dieu-khoan .dk-muc .dai {
  margin: 12px 0;
  font-size: 14px;
}
.page-dieu-khoan .dk-so {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: #EEF3FD;
  color: #2D52B0;
  font-size: 13px;
  font-weight: 700;
}
.page-dieu-khoan .dk-buoc li::marker {
  font-weight: 700;
  color: #2D52B0;
}
.page-dieu-khoan .dk-ma {
  padding: 1px 6px;
  border-radius: 6px;
  background: #EEF1F6;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
  white-space: nowrap;
}
.page-dieu-khoan .dk-lien-he {
  padding: 16px 24px;
  border: 1px solid #B8C8F5;
  border-radius: 10px;
  background: #EEF3FD;
}
.page-dieu-khoan .dk-lien-he p {
  margin: 0;
  overflow-wrap: anywhere;
}
.page-dieu-khoan .dk-lien-he__dau {
  margin-bottom: 4px;
  font-weight: 600;
  color: #2D52B0;
}
.page-dieu-khoan .dk-chan {
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  color: #6B7280;
}

.tk-thu {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  font-size: 13.5px;
  line-height: 1.45;
  color: #1F2937;
}
.tk-thu__nut {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #B45309;
  border-radius: 50%;
  background: #FFFBEB;
  color: #B45309;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.tk-thu__nut:hover, .tk-thu__nut[aria-expanded=true] {
  background: #B45309;
  border-color: #B45309;
  color: #FFFBEB;
}
.tk-thu__nut:focus-visible {
  outline: 2px solid #3A69E2;
  outline-offset: 2px;
}
.tk-thu__bang {
  position: absolute;
  right: 0;
  bottom: 48px;
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
  background: #FBFCFE;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.tk-thu__bang[hidden] {
  display: none;
}
.tk-thu__dau {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  background: #FFFBEB;
  border-bottom: 1px solid rgba(180, 83, 9, 0.4);
}
.tk-thu__tieu-de {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #B45309;
}
.tk-thu__tieu-de .fa {
  font-size: 14px;
  opacity: 0.65;
}
.tk-thu__phu {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: #B45309;
}
.tk-thu__dong {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #B45309;
  font-size: 15px;
  cursor: pointer;
}
.tk-thu__dong:hover {
  background: rgba(180, 83, 9, 0.22);
}
.tk-thu__dong:focus-visible {
  outline: 2px solid #3A69E2;
  outline-offset: 1px;
}
.tk-thu__ds {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}
.tk-thu__muc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid #E0E4EB;
}
.tk-thu__muc:last-child {
  border-bottom: 0;
}
.tk-thu__muc:hover {
  background: #F7F9FC;
}
.tk-thu__noi-dung {
  min-width: 0;
}
.tk-thu__ai b {
  font-weight: 700;
  color: #1F2937;
}
.tk-thu__ai span {
  margin-left: 6px;
  font-size: 12.5px;
  color: #6B7280;
}
.tk-thu__tt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  margin-top: 3px;
  font-size: 13px;
}
.tk-thu__blog {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 12.5px;
  color: #6D66DA;
  overflow-wrap: anywhere;
}
.tk-thu__blog .fa {
  opacity: 0.75;
}
.tk-thu__blog:hover {
  text-decoration: underline;
}
.tk-thu__email {
  color: #1F2937;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.tk-thu__mk {
  color: #6B7280;
  white-space: nowrap;
}
.tk-thu__mk .fa {
  display: none;
}
.tk-thu__mk code {
  margin-left: 2px;
  padding: 1px 6px;
  border: 1px solid #E0E4EB;
  border-radius: 5px;
  background: #F7F9FC;
  color: #1F2937;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12.5px;
}
.tk-thu__vao {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #B8C8F5;
  border-radius: 6px;
  background: #EEF3FD;
  color: #2D52B0;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.tk-thu__vao:hover {
  background: #2D52B0;
  border-color: #2D52B0;
  color: #fff;
}
.tk-thu__vao:focus-visible {
  outline: 2px solid #3A69E2;
  outline-offset: 2px;
}
.tk-thu__chan {
  flex: none;
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid rgba(180, 83, 9, 0.4);
  background: #FFFBEB;
  font-size: 12px;
  line-height: 1.5;
  color: #B45309;
}

@media print {
  .tk-thu {
    display: none;
  }
}
.page-thu-vien-file .page-head__actions.tvf-dau {
  align-items: center;
}
.page-thu-vien-file .dai {
  margin-bottom: 16px;
}
.page-thu-vien-file .btn.is-tat {
  opacity: 0.55;
  pointer-events: none;
}
.page-thu-vien-file .thanh-phan-trang {
  margin-top: 12px;
  padding: 0;
}

.tvf-dung-luong {
  min-width: 280px;
  padding: 10px 14px;
  background: #FBFCFE;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px -16px rgba(16, 24, 40, 0.2);
}
.tvf-dung-luong__chu {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12px;
  color: #6B7280;
}
.tvf-dung-luong__chu b {
  color: #1F2937;
  font-weight: 600;
  white-space: nowrap;
}
.tvf-dung-luong .tvf-dung-luong__thanh {
  border-radius: 3px;
  background-color: #E8EBF1;
}
.tvf-dung-luong .tvf-dung-luong__thanh .processed-percent {
  min-height: 6px;
  border-radius: 3px;
  background-image: linear-gradient(90deg, #3A69E2, #6D66DA);
  animation: none;
}
.tvf-dung-luong .tvf-dung-luong__thanh .processed-percent span {
  display: none;
}
.tvf-dung-luong.is-gan-day {
  border-color: rgba(180, 83, 9, 0.35);
  background: #FFFBEB;
}
.tvf-dung-luong.is-gan-day .tvf-dung-luong__thanh .processed-percent {
  background-image: none;
  background-color: #B45309;
}
.tvf-dung-luong.is-day {
  border-color: rgba(185, 28, 28, 0.3);
  background: #FEF2F2;
}
.tvf-dung-luong.is-day .tvf-dung-luong__thanh .processed-percent {
  background-image: none;
  background-color: #B91C1C;
}

.tvf-tha {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 32px 24px;
  text-align: center;
  background: #FBFCFE;
  border: 2px dashed #E0E4EB;
  border-radius: 16px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.tvf-tha:hover, .tvf-tha:focus-within {
  border-color: #B8C8F5;
  background: #EEF3FD;
}
.tvf-tha.is-dang-tai {
  opacity: 0.75;
}
.tvf-tha__ico {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #EEF3FD;
  color: #3A69E2;
  font-size: 24px;
}
.tvf-tha__chu {
  font-size: 16px;
  font-weight: 500;
  color: #1F2937;
}
.tvf-tha__nhan {
  color: #6D66DA;
  text-decoration: underline;
}
.tvf-tha__phu {
  font-size: 13px;
  color: #6B7280;
}
.tvf-tha__luat {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: #6B7280;
}
.tvf-tha__luat b {
  color: #4B5563;
  font-weight: 600;
}
.tvf-tha__o {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.tvf-tha__o:disabled {
  cursor: wait;
}

.tvf-hang-tai {
  margin-bottom: 24px;
}
.tvf-hang-tai__ds {
  list-style: none;
  margin: 0;
  padding: 4px 16px;
}
.tvf-hang-tai__dong {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid #E0E4EB;
  font-size: 13px;
}
.tvf-hang-tai__dong:last-child {
  border-bottom: 0;
}
.tvf-hang-tai__dong.is-dang-tai .tvf-hang-tai__ico {
  color: #3A69E2;
}
.tvf-hang-tai__dong.is-xong .tvf-hang-tai__ico {
  color: #16A34A;
}
.tvf-hang-tai__dong.is-loi .tvf-hang-tai__ico,
.tvf-hang-tai__dong.is-loi .tvf-hang-tai__tt {
  color: #B91C1C;
}
.tvf-hang-tai__dong.is-da-huy .tvf-hang-tai__ico,
.tvf-hang-tai__dong.is-da-huy .tvf-hang-tai__ten,
.tvf-hang-tai__dong.is-da-huy .tvf-hang-tai__tt {
  color: #9CA3AF;
}
.tvf-hang-tai__huy {
  grid-column: 4;
  grid-row: 1;
  margin: 0;
}
.tvf-hang-tai__thanh {
  grid-column: 2/-1;
  display: block;
  height: 4px;
  margin-top: 4px;
  border-radius: 2px;
  background: #E8EBF1;
  overflow: hidden;
}
.tvf-hang-tai__thanh-chay {
  display: block;
  height: 100%;
  border-radius: 2px;
  background-image: linear-gradient(90deg, #3A69E2, #6D66DA);
  transition: width 0.2s ease;
}
.tvf-hang-tai__ico {
  color: #9CA3AF;
}
.tvf-hang-tai__ten {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: #1F2937;
}
.tvf-hang-tai__co {
  font-size: 12px;
  color: #6B7280;
  white-space: nowrap;
}
.tvf-hang-tai__tt {
  grid-column: 2/-1;
  font-size: 12px;
  color: #6B7280;
}

.tvf-tab {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 16px;
  border-bottom: 1px solid #E0E4EB;
  overflow-x: auto;
}
.tvf-tab__nut {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 4px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #6B7280;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tvf-tab__nut .fa {
  opacity: 0.7;
}
.tvf-tab__nut:hover {
  color: #1F2937;
}
.tvf-tab__nut.is-dang-chon {
  border-bottom-color: #3A69E2;
  color: #3A69E2;
  font-weight: 600;
}
.tvf-tab__nut.is-dang-chon .fa {
  opacity: 1;
}
.tvf-tab__nut.is-dang-chon .tvf-tab__so {
  background: #EEF3FD;
  color: #3A69E2;
}
.tvf-tab__so {
  padding: 0 6px;
  border-radius: 9999px;
  background: #EEF1F6;
  color: #6B7280;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

.tvf-luoi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tvf-the {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  background: #FBFCFE;
  border: 1px solid #E0E4EB;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px -16px rgba(16, 24, 40, 0.2);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tvf-the:hover {
  border-color: #9CA3AF;
}
.tvf-the.is-dang-chon {
  border-color: #3A69E2;
  box-shadow: 0 0 0 3px rgba(58, 105, 226, 0.18);
}
.tvf-the__anh {
  position: relative;
  display: block;
  aspect-ratio: 16/10;
  background: #EEF1F6;
  overflow: hidden;
}
.tvf-the__anh img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tvf-the__bieu-tuong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #EEF1F6;
  color: #9CA3AF;
  font-size: 44px;
}
.tvf-the__bieu-tuong--video {
  background: #F2F1FC;
  color: #6D66DA;
}
.tvf-the__bieu-tuong--am-thanh {
  background: #EEF3FD;
  color: #3A69E2;
}
.tvf-the__loai {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(38, 43, 54, 0.72);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tvf-the__dau {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #3A69E2;
  color: #FFFFFF;
  font-size: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.tvf-the__chu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px 12px;
}
.tvf-the__ten {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #1F2937;
}
.tvf-the__phu {
  font-size: 12px;
  color: #6B7280;
}

.tvf-chi-tiet__trong {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 24px;
  text-align: center;
  color: #6B7280;
}
.tvf-chi-tiet__trong .fa {
  font-size: 28px;
  color: #9CA3AF;
}
.tvf-chi-tiet__than {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tvf-chi-tiet__xem {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 10px;
  background: #EEF1F6;
  overflow: hidden;
}
.tvf-chi-tiet__xem img,
.tvf-chi-tiet__xem video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tvf-chi-tiet__xem video {
  background: #262B36;
}
.tvf-chi-tiet__xem--am-thanh, .tvf-chi-tiet__xem--tai-lieu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
}
.tvf-chi-tiet__xem audio {
  width: 100%;
  max-width: 280px;
}
.tvf-chi-tiet__bieu-tuong {
  font-size: 56px;
  color: #9CA3AF;
}
.tvf-chi-tiet__co {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(38, 43, 54, 0.72);
  color: #FFFFFF;
  font-size: 12px;
}
.tvf-chi-tiet__co .fa {
  opacity: 0.8;
}
.tvf-chi-tiet__ds {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 10px 12px;
  background: #F7F9FC;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  font-size: 13px;
}
.tvf-chi-tiet__ds > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.tvf-chi-tiet__ds dt {
  color: #6B7280;
}
.tvf-chi-tiet__ds dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-weight: 500;
  color: #1F2937;
}
.tvf-chi-tiet__nhan-hang {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.tvf-chi-tiet__dem {
  font-size: 12px;
  color: #6B7280;
}
.tvf-chi-tiet__nut {
  margin-top: 0;
}

.page-bai-viet .page-head__desc b {
  color: #1F2937;
  font-weight: 600;
}
.page-bai-viet .bv-khung {
  overflow: visible;
}

.bv-dong {
  border-bottom: 1px solid #E0E4EB;
  transition: background-color 0.15s ease;
}
.bv-dong:hover {
  background: rgba(242, 241, 252, 0.6);
}
.bv-dong.is-rac .bv-bai__tieu-de {
  color: #6B7280;
  text-decoration: line-through;
}
.bv-dong--dau {
  background: #F7F9FC;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6B7280;
}
.bv-dong--dau:hover {
  background: #F7F9FC;
}
.bv-dong--dau > span {
  padding: 10px 16px;
}

.bv-o {
  min-width: 0;
  padding: 12px 16px;
  font-size: 13px;
  color: #4B5563;
}
.bv-o--so {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bv-o--ngay {
  font-variant-numeric: tabular-nums;
}
.bv-o--nut {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}
.bv-o--bai {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bv-anh {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #EEF1F6;
  color: #9CA3AF;
  overflow: hidden;
}
.bv-anh img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bv-bai {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bv-bai__tieu-de {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: #1F2937;
}
.bv-bai__tieu-de:hover {
  color: #3A69E2;
}
.bv-bai__duong-dan {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #6B7280;
}
.bv-bai__nhan {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.bv-chuyen-muc {
  display: inline-block;
  max-width: 100%;
  padding: 3px 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 6px;
  background: #F2F1FC;
  color: #6D66DA;
  font-size: 12px;
  font-weight: 500;
}

.bv-mo {
  font-size: 12px;
  color: #6B7280;
}

.bv-ve {
  display: block;
  margin-top: 3px;
}

.bv-cham {
  font-size: 7px;
  opacity: 0.9;
}

.page-soan-thao {
  padding-bottom: 8px;
}
.page-soan-thao .dai {
  margin-bottom: 16px;
}
.page-soan-thao .card + .card {
  margin-top: 24px;
}

.st-quay-lai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
  color: #6B7280;
}
.st-quay-lai:hover {
  color: #3A69E2;
}

.st-cac-o {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.o input.st-tieu-de {
  height: 48px;
  font-size: 20px;
  font-weight: 600;
}

.st-duong-dan {
  display: flex;
  align-items: stretch;
}
.st-duong-dan__dau {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #E0E4EB;
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: #F7F9FC;
  font-size: 13px;
  color: #6B7280;
  white-space: nowrap;
}
.st-duong-dan input[type=text] {
  border-radius: 0 10px 10px 0;
}

.st-lien-ket {
  padding: 0;
  border: 0;
  background: transparent;
  color: #6D66DA;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.st-nhan-hang {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.st-dem {
  font-size: 12px;
  color: #6B7280;
  white-space: nowrap;
}

.st-dau-ico {
  color: #9CA3AF;
}

.st-trinh-soan {
  border-radius: 10px;
}
.st-trinh-soan.is-khoa {
  opacity: 0.6;
  pointer-events: none;
}
.st-trinh-soan .ck.ck-editor__top .ck-toolbar {
  border-color: #E0E4EB;
  border-radius: 10px 10px 0 0;
  background: #F7F9FC;
}
.st-trinh-soan .ck.ck-editor__main > .ck-editor__editable {
  border-color: #E0E4EB;
  border-radius: 0 0 10px 10px;
  background: #FBFCFE;
}

.article-content .ck-editor__editable:not(.ck-editor__nested-editable) {
  min-height: 284px;
}

.ck-content {
  font-size: 15px;
  line-height: 1.7;
  color: #1F2937;
}
.ck-content ol,
.ck-content ul {
  padding-left: 2em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.ck-content ol ol,
.ck-content ol ul,
.ck-content ul ol,
.ck-content ul ul {
  margin-top: 0;
  margin-bottom: 0;
}
.ck-content .youtube-video iframe,
.ck-content iframe {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
.ck-content .hop-noi-bat {
  margin: 1em 0;
  padding: 12px 16px;
  border-left: 4px solid #3A69E2;
  border-radius: 0 10px 10px 0;
  background: #EEF3FD;
}

.soan-hop .ck-editor__editable:not(.ck-editor__nested-editable) {
  min-height: 140px;
}

.cyt-xem {
  border-radius: 10px;
  overflow: hidden;
  background: #EEF1F6;
}
.cyt-xem img {
  display: block;
  width: 100%;
}

.st-phu-dong {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  background: #F7F9FC;
}
.st-phu-dong__chon {
  grid-column: 1/-1;
}

.st-tao-nhanh {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  background: #F7F9FC;
}
.st-tao-nhanh__chu {
  font-size: 13px;
  color: #4B5563;
}
.st-tao-nhanh__chu .fa {
  color: #B45309;
  margin-right: 4px;
}
.st-tao-nhanh__hang {
  display: flex;
  gap: 8px;
}
.st-tao-nhanh__hang input {
  flex: 1;
  min-width: 0;
}
.st-tao-nhanh__hang .btn {
  flex: none;
}

.st-ds-chon {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #E0E4EB;
  border-radius: 8px;
  background: #F7F9FC;
}

.st-chon__hang {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
}
.st-chon.is-khoa .st-chon__hang {
  opacity: 0.6;
  cursor: default;
}
.st-chon.is-khoa .st-chon__hang input[type=checkbox] {
  cursor: default;
}
.st-chon__ten {
  flex: 1 1 auto;
  min-width: 0;
  color: #1F2937;
}
.st-chon__nhan {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.st-chon__goi-y {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 0 calc(16px + 8px);
  font-size: 12px;
  line-height: 1.45;
  color: #6B7280;
}

.st-thanh {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding: 12px 16px;
  background: #FBFCFE;
  border: 1px solid #E0E4EB;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 24px -12px rgba(16, 24, 40, 0.25);
}
.st-thanh__trang-thai {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}
.st-thanh__doi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #B45309;
}
.st-thanh__doi .fa {
  font-size: 8px;
}
.st-thanh__doi.is-da-luu {
  color: #6B7280;
}
.st-thanh__doi.is-da-luu .fa {
  font-size: 12px;
}
.st-thanh__nut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.page-menu .mn-ghi-chu {
  margin-top: 16px;
}
.page-menu .cay-ke--cot-1 {
  left: 32px;
}
.page-menu .cay-ke--noi::after {
  width: 20px;
}
.page-menu .cay-cap-1 .cay-o--ten {
  padding-left: 56px;
}

.mn-ico {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #EEF3FD;
  color: #3A69E2;
  font-size: 14px;
}
.mn-ico.is-loi {
  background: #FEF2F2;
  color: #B91C1C;
}

.mn-loi {
  flex-basis: 100%;
  font-size: 12px;
  font-weight: 500;
  color: #B91C1C;
}

.page-ho-so-ca-nhan {
  padding-bottom: 8px;
}
.page-ho-so-ca-nhan .card + .card {
  margin-top: 24px;
}
.page-ho-so-ca-nhan .hs-dau-ico {
  color: #9CA3AF;
  font-size: 15px;
}
.page-ho-so-ca-nhan .hs-cac-o {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-ho-so-ca-nhan .hs-nhan-hang {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.page-ho-so-ca-nhan .hs-dem {
  font-size: 12px;
  color: #6B7280;
  white-space: nowrap;
}
.page-ho-so-ca-nhan .hs-trong {
  margin: 0;
  font-size: 13px;
  color: #6B7280;
  font-style: italic;
}

.page-ho-so-ca-nhan .hs-dau-nut {
  gap: 12px;
}

.hs-nhan-cong-khai {
  background: #EEF1F6;
  color: #6B7280;
}
.hs-nhan-cong-khai .fa {
  font-size: 8px;
}
.hs-nhan-cong-khai.is-bat {
  background: rgba(22, 163, 74, 0.1);
  color: #16A34A;
}

.hs-cong-khai {
  padding: 7px 12px;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  background: #FBFCFE;
  font-weight: 600;
}

.page-ho-so-ca-nhan .hs-nhac {
  margin: 0;
}

.hs-truong {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.hs-truong__o {
  flex: 1 1 auto;
  min-width: 0;
}
.hs-truong__cong-tac {
  flex: none;
  margin-top: 34px;
  font-size: 12px;
  white-space: nowrap;
}

.hs-ngay {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hs-ngay > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.hs-ngay input {
  width: 100%;
  height: 40px;
  padding: 0 13px;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  background: #FBFCFE;
  color: #1F2937;
  font: inherit;
  font-size: 14px;
}
.hs-ngay.is-loi input {
  border-color: #B91C1C;
}

.hs-cong-tac-mxh {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  background: #F7F9FC;
}
.hs-cong-tac-mxh .o__goi-y {
  padding-left: 44px;
}

.hs-mxh {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hs-mxh__dong {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  background: #FBFCFE;
}
.hs-mxh__ico {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #EEF3FD;
  color: #3A69E2;
  font-size: 15px;
}
.hs-mxh__chu {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hs-mxh__ten {
  font-size: 13px;
  font-weight: 600;
  color: #1F2937;
}
.hs-mxh__lien-ket {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #6B7280;
}
.hs-mxh__lien-ket:hover {
  color: #3A69E2;
  text-decoration: underline;
}
.hs-mxh__nut {
  flex: none;
  display: flex;
  gap: 4px;
}

.hs-bieu-mau-mxh {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hs-bieu-mau-mxh .dai {
  margin-bottom: 0;
}

.hs-khu-khoi__dan {
  margin: 0 0 16px;
  font-size: 13px;
  color: #6B7280;
}

.hs-nhom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid #E0E4EB;
  border-radius: 16px;
  background: #F7F9FC;
}
.hs-nhom + .hs-nhom {
  margin-top: 16px;
}
.hs-nhom__dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hs-nhom__ten {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1F2937;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hs-nhom__ten .fa {
  color: #9CA3AF;
}
.hs-nhom__dem {
  font-size: 12px;
  color: #6B7280;
}

.hs-khoi {
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  background: #FBFCFE;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.hs-khoi.is-dang-sua {
  border-color: #B8C8F5;
  box-shadow: 0 0 0 3px rgba(58, 105, 226, 0.1);
}
.hs-khoi__dau {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #E0E4EB;
  background: #F7F9FC;
  border-radius: 10px 10px 0 0;
}
.hs-khoi__ten {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: #1F2937;
}
.hs-khoi__nut {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.hs-khoi__than {
  padding: 12px;
}
.hs-khoi__tom-tat {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #4B5563;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hs-con {
  list-style: none;
  margin: 0 0 12px 8px;
  padding: 0 0 0 16px;
  border-left: 1px solid #E0E4EB;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hs-con__dong {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hs-con__dong::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 12px;
  border-top: 1px solid #E0E4EB;
}
.hs-con__dong.is-dang-sua {
  display: block;
  padding: 12px;
  border: 1px solid #B8C8F5;
  border-radius: 10px;
  background: #EEF3FD;
}
.hs-con__chu {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hs-con__hang {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.hs-con__ten {
  color: #1F2937;
  font-weight: 500;
}
.hs-con__so {
  color: #6B7280;
  font-variant-numeric: tabular-nums;
}
.hs-con__phu {
  font-size: 12px;
  color: #6B7280;
}
.hs-con__thanh {
  height: 6px;
  border-radius: 9999px;
  background: #E8EBF1;
  overflow: hidden;
}
.hs-con__thanh span {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background-image: linear-gradient(90deg, #3A69E2, #6D66DA);
}
.hs-con__nut {
  flex: none;
  display: flex;
  gap: 4px;
}
.hs-con--chi-xem {
  margin: 12px 0 0 8px;
}
.hs-con--chi-xem .hs-con__dong {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.hs-them-con {
  margin-left: 8px;
}

.hs-bieu-mau {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.hs-bieu-mau .dai {
  margin-bottom: 0;
}
.hs-bieu-mau__hang {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hs-bieu-mau__tieu-de {
  flex: 1 1 260px;
  min-width: 0;
}
.hs-bieu-mau__kieu {
  flex: 0 0 200px;
}
.hs-bieu-mau__con {
  display: flex;
  gap: 8px;
}
.hs-bieu-mau__con > input {
  flex: 1 1 auto;
  min-width: 0;
}
.hs-bieu-mau__nut {
  margin-top: 0;
}
.hs-bieu-mau--con {
  padding: 0;
  gap: 8px;
}

.page-ho-so-ca-nhan .hs-bieu-mau__con > input,
.page-ho-so-ca-nhan .hs-o-phan-tram input {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  background: #FBFCFE;
  color: #1F2937;
  font: inherit;
  font-size: 13px;
  outline: none;
}
.page-ho-so-ca-nhan .hs-bieu-mau__con > input:focus,
.page-ho-so-ca-nhan .hs-o-phan-tram input:focus {
  border-color: #3A69E2;
  box-shadow: 0 0 0 4px rgba(58, 105, 226, 0.12);
}

.hs-o-phan-tram {
  position: relative;
  flex: 0 0 104px;
}

.page-ho-so-ca-nhan .hs-o-phan-tram input {
  width: 100%;
  padding-right: 28px;
  text-align: right;
}
.page-ho-so-ca-nhan .hs-o-phan-tram__dau {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: #6B7280;
  pointer-events: none;
}

.hs-trinh-soan {
  border-radius: 10px;
}
.hs-trinh-soan .ck.ck-editor__top .ck-toolbar {
  border-color: #E0E4EB;
  border-radius: 10px 10px 0 0;
  background: #F7F9FC;
}
.hs-trinh-soan .ck.ck-editor__main > .ck-editor__editable {
  border-color: #E0E4EB;
  border-radius: 0 0 10px 10px;
  background: #FBFCFE;
}

.cv-section-content .ck-editor__editable:not(.ck-editor__nested-editable) {
  min-height: 200px;
}

.hs-thanh {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding: 12px 16px;
  background: #FBFCFE;
  border: 1px solid #E0E4EB;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 24px -12px rgba(16, 24, 40, 0.25);
}
.hs-thanh__trang-thai {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.hs-thanh__doi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #B45309;
  font-weight: 500;
}
.hs-thanh__doi .fa {
  font-size: 8px;
}
.hs-thanh__doi.is-da-luu {
  color: #6B7280;
}
.hs-thanh__doi.is-da-luu .fa {
  font-size: 12px;
}
.hs-thanh__phu {
  font-size: 12px;
  color: #6B7280;
}
.hs-thanh__nut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.page-ten-mien .card + .card {
  margin-top: 24px;
}
.page-ten-mien .tm-ma {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.page-ten-mien .tm-phu {
  font-size: 12px;
  color: #6B7280;
}
.page-ten-mien .tm-trong {
  margin: 0;
  font-size: 13px;
  color: #6B7280;
  font-style: italic;
}
.page-ten-mien .tm-cac-o {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-ten-mien .tm-cac-o .dai {
  margin-bottom: 0;
}
.page-ten-mien .tm-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  border-radius: 20px;
  color: #FFFFFF;
  background-image: linear-gradient(118deg, #264296 0%, #2D52B0 52%, #5550AA 100%);
  box-shadow: 0 18px 40px -22px rgba(58, 105, 226, 0.7);
}
.page-ten-mien .tm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #262B36 100%);
  mask-image: linear-gradient(100deg, transparent 35%, #262B36 100%);
}
.page-ten-mien .tm-hero > * {
  position: relative;
  z-index: 1;
}
.page-ten-mien .tm-hero__trai {
  min-width: 0;
  max-width: 44rem;
}
.page-ten-mien .tm-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 12px;
  font-weight: 600;
}
.page-ten-mien .tm-hero__ten {
  margin: 12px 0 6px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.page-ten-mien .tm-hero__dong {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  overflow-wrap: anywhere;
}
.page-ten-mien .tm-hero__hang-nut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.page-ten-mien .tm-hero__o {
  flex: none;
  align-self: flex-end;
  min-width: 14rem;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
}
.page-ten-mien .tm-hero__nhan {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.page-ten-mien .tm-hero__tt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 17px;
  font-weight: 700;
}
.page-ten-mien .tm-hero__phu {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
}
.page-ten-mien .tm-hnut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.page-ten-mien .tm-hnut:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  text-decoration: none;
}
.page-ten-mien .tm-hnut:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.page-ten-mien .tm-hnut--dac {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #2D52B0;
}
.page-ten-mien .tm-hnut--dac:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.92);
}
.page-ten-mien .tm-buoc {
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 22px 16px 19px;
}
.page-ten-mien .tm-buoc__muc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  padding: 0 6px;
}
.page-ten-mien .tm-buoc__muc::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 50%;
  width: 100%;
  height: 2px;
  background-color: #E0E4EB;
}
.page-ten-mien .tm-buoc__muc:first-child::before {
  display: none;
}
.page-ten-mien .tm-buoc__muc.is-xong::before, .page-ten-mien .tm-buoc__muc.is-dang::before {
  background-image: linear-gradient(90deg, #3A69E2, #6D66DA);
}
.page-ten-mien .tm-buoc__cham {
  position: relative;
  z-index: 1;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-color: #E8EBF1;
  color: #6B7280;
  font-size: 15px;
}
.page-ten-mien .tm-buoc__muc.is-xong .tm-buoc__cham {
  background-image: linear-gradient(135deg, #3A69E2, #6D66DA);
  color: #FFFFFF;
  box-shadow: 0 10px 26px -10px rgba(58, 105, 226, 0.55);
}
.page-ten-mien .tm-buoc__muc.is-dang .tm-buoc__cham {
  background-color: #FBFCFE;
  color: #3A69E2;
  box-shadow: inset 0 0 0 2px #3A69E2, 0 0 0 5px rgba(58, 105, 226, 0.14);
}
.page-ten-mien .tm-buoc__muc.is-hong .tm-buoc__cham {
  background-color: #FEF2F2;
  color: #B91C1C;
  box-shadow: inset 0 0 0 2px #B91C1C;
}
.page-ten-mien .tm-buoc__chu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.page-ten-mien .tm-buoc__ten {
  font-size: 13px;
  font-weight: 700;
  color: #1F2937;
}
.page-ten-mien .tm-buoc__muc.is-cho .tm-buoc__ten {
  color: #6B7280;
  font-weight: 600;
}
.page-ten-mien .tm-buoc__goi-y {
  font-size: 12px;
  line-height: 1.35;
  color: #6B7280;
}
.page-ten-mien .tm-kiem {
  padding: 12px 16px;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  background: #F7F9FC;
}
.page-ten-mien .tm-kiem__dau {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1F2937;
}
.page-ten-mien .tm-kiem__ds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.page-ten-mien .tm-kiem__ds li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: #4B5563;
}
.page-ten-mien .tm-kiem__ds .is-dat .fa {
  color: #16A34A;
}
.page-ten-mien .tm-kiem__ds .is-chua .fa {
  color: #B91C1C;
}
.page-ten-mien .tm-kiem__cau {
  margin: 8px 0 0;
  font-size: 13px;
  color: #4B5563;
}
.page-ten-mien .tm-ban-ghi {
  margin-top: 8px;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  overflow: hidden;
}
.page-ten-mien .tm-ban-ghi__dau, .page-ten-mien .tm-ban-ghi__dong {
  display: grid;
  grid-template-columns: 4.5rem 4.5rem minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
}
.page-ten-mien .tm-ban-ghi__dau {
  background: #EEF1F6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6B7280;
}
.page-ten-mien .tm-ban-ghi__dong {
  font-size: 14px;
  background: #FBFCFE;
}
.page-ten-mien .tm-ban-ghi__dong + .tm-ban-ghi__dong {
  border-top: 1px solid #E0E4EB;
}
.page-ten-mien .tm-ban-ghi__loai {
  font-weight: 700;
  color: #3A69E2;
}
.page-ten-mien .tm-ban-ghi__gia-tri {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.page-ten-mien .tm-ban-ghi__gia-tri .tm-ma {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.page-ten-mien .tm-ban-ghi .dai {
  margin: 0;
  border: 0;
  border-radius: 0;
}
.page-ten-mien .tm-ly-do {
  font-size: 14px;
}
.page-ten-mien .tm-thanh-nut {
  margin-top: 0;
}
.page-ten-mien .tm-chay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.page-ten-mien .tm-chay .fa {
  color: #16A34A;
}
.page-ten-mien .tm-chay a {
  color: #1F2937;
}
.page-ten-mien .tm-chay a:hover {
  color: #3A69E2;
  text-decoration: underline;
}
.page-ten-mien .tm-nhap {
  display: flex;
  gap: 8px;
}
.page-ten-mien .tm-nhap input {
  flex: 1 1 auto;
  min-width: 0;
}
.page-ten-mien .tm-nhap .btn {
  height: 40px;
}
.page-ten-mien .tm-se-gui {
  font-size: 13px;
  color: #4B5563;
}
.page-ten-mien .tm-se-gui b {
  color: #3A69E2;
}
.page-ten-mien .tm-huong-dan__dau {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #E0E4EB;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.page-ten-mien .tm-huong-dan__dau[aria-expanded=false] {
  border-bottom: 0;
  border-radius: 16px;
}
.page-ten-mien .tm-huong-dan__dau:hover {
  background: #EEF1F6;
}
.page-ten-mien .tm-huong-dan__mui {
  color: #6B7280;
}
.page-ten-mien .tm-huong-dan__than {
  font-size: 14px;
  line-height: 1.65;
  color: #4B5563;
}
.page-ten-mien .tm-huong-dan__than h3 {
  margin: 16px 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #1F2937;
}
.page-ten-mien .tm-huong-dan__than h3:first-child {
  margin-top: 0;
}
.page-ten-mien .tm-huong-dan__than p {
  margin: 0;
}
.page-ten-mien .tm-huong-dan__ho-tro {
  margin-top: 16px !important;
  padding-top: 12px;
  border-top: 1px dashed #E0E4EB;
  font-weight: 500;
  color: #1F2937;
}
.page-ten-mien .tm-tt {
  margin: 0;
  padding: 8px 24px;
}
.page-ten-mien .tm-tt__dong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 13.5px;
}
.page-ten-mien .tm-tt__dong + .tm-tt__dong {
  border-top: 1px solid #E0E4EB;
}
.page-ten-mien .tm-tt dt {
  color: #6B7280;
}
.page-ten-mien .tm-tt dd {
  margin: 0;
  min-width: 0;
  text-align: right;
  color: #1F2937;
  overflow-wrap: anywhere;
}
.page-ten-mien .tm-lich-su {
  margin-top: 24px;
}
.page-ten-mien .tm-bang__dau, .page-ten-mien .tm-bang__dong {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 9.5rem 7rem 9.5rem minmax(0, 2fr);
  gap: 12px;
  align-items: center;
  padding: 10px 24px;
}
.page-ten-mien .tm-bang__dau {
  background: #F7F9FC;
  border-bottom: 1px solid #E0E4EB;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6B7280;
}
.page-ten-mien .tm-bang__dong {
  font-size: 13px;
  color: #4B5563;
}
.page-ten-mien .tm-bang__dong + .tm-bang__dong {
  border-top: 1px solid #E0E4EB;
}
.page-ten-mien .tm-bang__ten {
  font-weight: 600;
  color: #1F2937;
  overflow-wrap: anywhere;
}
.page-ten-mien .tm-bang__ly-do {
  overflow-wrap: anywhere;
}

.page-bo-cuc-trang .bct-khung {
  overflow: clip;
}
.page-bo-cuc-trang .bct-ghi-chu {
  margin: 16px 16px 0;
}
.page-bo-cuc-trang .bct-hinh {
  margin: 16px;
  padding: 16px;
  background: #F4F6FA;
  border: 1px solid #E0E4EB;
  border-radius: 16px;
}
.page-bo-cuc-trang .bct-chu-giai {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 16px 16px;
  font-size: 12px;
  color: #6B7280;
}
.page-bo-cuc-trang .bct-chu-giai__mau {
  display: inline-block;
  width: 18px;
  height: 12px;
  margin-right: 6px;
  vertical-align: -1px;
  border-radius: 3px;
}
.page-bo-cuc-trang .bct-chu-giai__mau--co-dinh {
  background: #E8EBF1;
  border: 1px solid #E0E4EB;
}
.page-bo-cuc-trang .bct-chu-giai__mau--vung {
  background: rgba(58, 105, 226, 0.05);
  border: 1.5px dashed #3A69E2;
}
.page-bo-cuc-trang .bct-co-dinh {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 12px;
  background: #E8EBF1;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  text-align: center;
}
.page-bo-cuc-trang .bct-co-dinh__ten {
  font-size: 13px;
  font-weight: 600;
  color: #4B5563;
}
.page-bo-cuc-trang .bct-co-dinh__phu {
  font-size: 11px;
  font-style: italic;
  color: #6B7280;
}
.page-bo-cuc-trang .bct-vung {
  display: flex;
  flex-direction: column;
  background: rgba(58, 105, 226, 0.03);
  border: 1.5px dashed #3A69E2;
  border-radius: 10px;
}
.page-bo-cuc-trang .bct-vung__dau {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  background: rgba(58, 105, 226, 0.06);
  border-bottom: 1px dashed rgba(58, 105, 226, 0.45);
  border-radius: 10px 10px 0 0;
}
.page-bo-cuc-trang .bct-vung__chu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.page-bo-cuc-trang .bct-vung__ten {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #1F2937;
}
.page-bo-cuc-trang .bct-vung__mo-ta {
  font-size: 12px;
  line-height: 1.45;
  color: #6B7280;
}
.page-bo-cuc-trang .bct-vung__them {
  flex: none;
  border-color: rgba(58, 105, 226, 0.4);
  color: #3A69E2;
}
.page-bo-cuc-trang .bct-vung__them:hover:not(:disabled) {
  background-color: #EEF3FD;
}
.page-bo-cuc-trang .bct-vung__than {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  padding: 12px;
}
.page-bo-cuc-trang .bct-vung__trong {
  grid-column: 1/-1;
  padding: 8px 0;
  font-size: 13px;
  color: #6B7280;
  text-align: center;
}
.page-bo-cuc-trang .bct-vung--hep .bct-vung__than {
  grid-template-columns: minmax(0, 1fr);
}
.page-bo-cuc-trang .bct-vung--hep .bct-vung__dau {
  flex-direction: column;
}
.page-bo-cuc-trang .bct-khoi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #FBFCFE;
  border: 1px solid #E0E4EB;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px -16px rgba(16, 24, 40, 0.2);
}
.page-bo-cuc-trang .bct-khoi.is-canh {
  border-color: rgba(180, 83, 9, 0.45);
}
.page-bo-cuc-trang .bct-khoi__dau {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.page-bo-cuc-trang .bct-khoi__so {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: #EEF3FD;
  color: #3A69E2;
  font-size: 12px;
  font-weight: 700;
}
.page-bo-cuc-trang .bct-khoi__chu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
}
.page-bo-cuc-trang .bct-khoi__ten {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #1F2937;
}
.page-bo-cuc-trang .bct-khoi__kieu {
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-bo-cuc-trang .bct-khoi__anh {
  flex: none;
  width: 72px;
  height: 44px;
  object-fit: cover;
  object-position: top center;
  border: 1px solid #E0E4EB;
  border-radius: 6px;
  background: #F7F9FC;
}
.page-bo-cuc-trang .bct-khoi__anh--trong {
  display: grid;
  place-items: center;
  color: #9CA3AF;
}
.page-bo-cuc-trang .bct-khoi__kieu-chu {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.page-bo-cuc-trang .bct-khoi__ten-kieu {
  font-size: 12px;
  font-weight: 600;
  color: #4B5563;
}
.page-bo-cuc-trang .bct-khoi__so-bai {
  font-size: 12px;
  color: #6B7280;
}
.page-bo-cuc-trang .bct-khoi__canh {
  padding: 6px 8px;
  border-radius: 6px;
  background: #FFFBEB;
  color: #B45309;
  font-size: 12px;
  line-height: 1.45;
}
.page-bo-cuc-trang .bct-khoi__nut {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid #E0E4EB;
}
.page-bo-cuc-trang .bct-khoi__nut-xoa {
  margin-right: auto;
}
.page-bo-cuc-trang .kt-nhom-nut {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: #EEF1F6;
  border-radius: 10px;
}
.page-bo-cuc-trang .kt-nhom-nut__nut {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #4B5563;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.page-bo-cuc-trang .kt-nhom-nut__nut .fa {
  opacity: 0.7;
}
.page-bo-cuc-trang .kt-nhom-nut__nut:hover {
  background: rgba(251, 252, 254, 0.7);
}
.page-bo-cuc-trang .kt-nhom-nut__nut.is-on {
  background: #FBFCFE;
  color: #3A69E2;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.page-bo-cuc-trang .kt-nhom-nut__nut.is-on .fa {
  opacity: 1;
}
.page-bo-cuc-trang .kt-kieu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.page-bo-cuc-trang .kt-kieu__the {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: #FBFCFE;
  border: 1.5px solid #E0E4EB;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.page-bo-cuc-trang .kt-kieu__the:hover {
  border-color: #9CA3AF;
}
.page-bo-cuc-trang .kt-kieu__the.is-on {
  border-color: #3A69E2;
  box-shadow: 0 0 0 3px rgba(58, 105, 226, 0.15);
}
.page-bo-cuc-trang .kt-kieu__the:focus-within {
  box-shadow: 0 0 0 3px rgba(58, 105, 226, 0.25);
}
.page-bo-cuc-trang .kt-kieu__chon {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.page-bo-cuc-trang .kt-kieu__anh {
  display: grid;
  place-items: center;
  height: 84px;
  overflow: hidden;
  border-radius: 6px;
  background: #F7F9FC;
  color: #9CA3AF;
}
.page-bo-cuc-trang .kt-kieu__anh img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-bo-cuc-trang .kt-kieu__ten {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #4B5563;
}
.page-bo-cuc-trang .kt-kieu__ten .fa {
  color: #3A69E2;
}
.page-bo-cuc-trang .kt-kieu__the.is-on .kt-kieu__ten {
  color: #3A69E2;
}
.page-bo-cuc-trang .kt-so-bai {
  max-width: 120px;
}
.page-bo-cuc-trang .kt-nhac {
  font-size: 12px;
  line-height: 1.5;
  color: #B45309;
}
.page-bo-cuc-trang .kt-nhac .fa {
  margin-right: 4px;
}
.page-bo-cuc-trang .kt-ghi {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #F7F9FC;
  border: 1px solid #E0E4EB;
  font-size: 13px;
  line-height: 1.5;
  color: #4B5563;
}
.page-bo-cuc-trang .kt-ghi > .fa {
  flex: none;
  margin-top: 3px;
  color: #9CA3AF;
}
.page-bo-cuc-trang .kt-ghi a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  color: #3A69E2;
  font-weight: 600;
  white-space: nowrap;
}
.page-bo-cuc-trang .kt-ghi a:hover {
  text-decoration: underline;
}
.page-bo-cuc-trang .kt-ghi--trong {
  background: #FFFBEB;
  border-color: rgba(180, 83, 9, 0.3);
  color: #B45309;
}
.page-bo-cuc-trang .kt-ghi--trong > .fa {
  color: #B45309;
  opacity: 0.8;
}
.page-bo-cuc-trang .bct-mau-ve {
  margin: 16px 16px 0;
  font-size: 12px;
  color: #6B7280;
}
.page-bo-cuc-trang .bct-co-dinh--anh-bia {
  min-height: 72px;
}
.page-bo-cuc-trang .bct-co-dinh--tieu-de-blog,
.page-bo-cuc-trang .bct-co-dinh--ten-chuyen-muc {
  flex-direction: row;
  gap: 8px;
  min-height: 0;
  padding: 8px 12px;
}
.page-bo-cuc-trang .bct-nhom-tin {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: #FBFCFE;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
}
.page-bo-cuc-trang .bct-nhom-tin__dau {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid #E0E4EB;
}
.page-bo-cuc-trang .bct-nhom-tin__tieu-de {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1F2937;
}
.page-bo-cuc-trang .bct-nhom-tin__tieu-de .fa {
  color: #9CA3AF;
}
.page-bo-cuc-trang .bct-nhom-tin__goi-y {
  font-size: 12px;
  line-height: 1.45;
  color: #6B7280;
}
.page-bo-cuc-trang .bct-nhom-tin__loai {
  align-self: flex-start;
}
.page-bo-cuc-trang .bct-nhom-tin__loai .kt-nhom-nut__nut {
  padding: 0 9px;
}
.page-bo-cuc-trang .bct-nhom-tin__trong {
  font-size: 13px;
  line-height: 1.5;
  color: #6B7280;
}
.page-bo-cuc-trang .bct-nhom-tin__trong a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: #3A69E2;
  font-weight: 600;
}
.page-bo-cuc-trang .bct-nhom-tin__cay {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-bo-cuc-trang .bct-nhom-tin__muc {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #FBFCFE;
  border: 1px solid #E0E4EB;
  border-radius: 6px;
  font-size: 13px;
  color: #1F2937;
  cursor: grab;
  user-select: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.page-bo-cuc-trang .bct-nhom-tin__muc:hover {
  border-color: rgba(58, 105, 226, 0.5);
  background: #EEF3FD;
}
.page-bo-cuc-trang .bct-nhom-tin__muc:active {
  cursor: grabbing;
}
.page-bo-cuc-trang .bct-nhom-tin__muc.is-an {
  color: #6B7280;
}
.page-bo-cuc-trang .bct-nhom-tin__nam {
  flex: none;
  color: #9CA3AF;
  font-size: 12px;
}
.page-bo-cuc-trang .bct-nhom-tin__ten {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-bo-cuc-trang .bct-nhom-tin__an {
  flex: none;
  font-size: 12px;
  font-style: italic;
  color: #9CA3AF;
}
.page-bo-cuc-trang .bct-nhom-tin__muc--co-dinh {
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.06);
  font-weight: 600;
}
.page-bo-cuc-trang .bct-nhom-tin__muc--co-dinh:hover {
  border-color: rgba(22, 163, 74, 0.6);
  background: rgba(22, 163, 74, 0.12);
}
.page-bo-cuc-trang .bct-nhom-tin__ico {
  flex: none;
  color: #16A34A;
  opacity: 0.85;
}
.page-bo-cuc-trang .bct-nhom-tin__muc--dang-xem {
  border-color: rgba(109, 102, 218, 0.35);
  background: #F2F1FC;
}
.page-bo-cuc-trang .bct-nhom-tin__muc--dang-xem:hover {
  border-color: rgba(109, 102, 218, 0.6);
  background: rgba(109, 102, 218, 0.14);
}
.page-bo-cuc-trang .bct-nhom-tin__muc--dang-xem .bct-nhom-tin__ico {
  color: #6D66DA;
}
.page-bo-cuc-trang .bct-nhom-tin__cay .bct-nhom-tin__cay {
  margin-top: 4px;
  margin-left: 12px;
  padding-left: 14px;
  border-left: 1px solid #E0E4EB;
}
.page-bo-cuc-trang .bct-nhom-tin__cay .bct-nhom-tin__cay > .bct-nhom-tin__nut > .bct-nhom-tin__muc::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  width: 13px;
  border-top: 1px solid #E0E4EB;
}
.page-bo-cuc-trang .bct-nhom-tin__nut + .bct-nhom-tin__nut {
  margin-top: 4px;
}
.page-bo-cuc-trang .bct-vung.is-nhan {
  background: rgba(58, 105, 226, 0.07);
}
.page-bo-cuc-trang .bct-vung.is-nhan .bct-vung__trong {
  padding: 12px;
  border: 1px dashed rgba(58, 105, 226, 0.55);
  border-radius: 6px;
  color: #3A69E2;
  font-weight: 600;
}
.page-bo-cuc-trang .bct-vung.is-dich {
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(58, 105, 226, 0.18);
}
.page-bo-cuc-trang .bct-khoi.is-chen-truoc::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  width: 3px;
  border-radius: 2px;
  background: #3A69E2;
}
.page-bo-cuc-trang .bct-vung--hep .bct-khoi.is-chen-truoc::before {
  top: -8px;
  bottom: auto;
  left: 0;
  right: 0;
  width: auto;
  height: 3px;
}
.page-bo-cuc-trang .bct-vung__chen-cuoi {
  align-self: stretch;
  width: 3px;
  min-height: 80px;
  border-radius: 2px;
  background: #3A69E2;
}
.page-bo-cuc-trang .bct-vung--hep .bct-vung__chen-cuoi {
  grid-column: 1/-1;
  width: auto;
  min-height: 0;
  height: 3px;
}
.page-bo-cuc-trang .bct-khoi {
  position: relative;
}
.page-bo-cuc-trang .bct-khoi.is-dang-keo {
  opacity: 0.45;
}
.page-bo-cuc-trang .bct-khoi[draggable=true] .bct-khoi__dau {
  cursor: grab;
}
.page-bo-cuc-trang .bct-khoi__nam {
  flex: none;
  width: 16px;
  display: grid;
  place-items: center;
  height: 24px;
  color: #9CA3AF;
  font-size: 12px;
}

.page-mau-giao-dien .mgd-dang-ap-dung {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #6B7280;
}
.page-mau-giao-dien .mgd-dang-ap-dung b {
  color: #1F2937;
  font-weight: 600;
}
.page-mau-giao-dien .mgd-dang-ap-dung__cham {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #3A69E2;
}
.page-mau-giao-dien .mgd-luoi {
  display: grid;
  gap: 24px;
}
.page-mau-giao-dien .mgd-the {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
}
.page-mau-giao-dien .mgd-the.is-dang-dung::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background-image: linear-gradient(90deg, #3A69E2, #6D66DA);
}
.page-mau-giao-dien .mgd-the__anh {
  position: relative;
  aspect-ratio: 16/10;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #E0E4EB;
  border-radius: 10px;
  background: #F7F9FC;
  color: #9CA3AF;
  font-size: 40px;
}
.page-mau-giao-dien .mgd-the__anh img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  font-size: 12px;
  color: #6B7280;
}
.page-mau-giao-dien .mgd-the__nhan {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  background: #EEF3FD;
  color: #3A69E2;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.page-mau-giao-dien .mgd-the__than {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.page-mau-giao-dien .mgd-the__ten {
  font-size: 16px;
  font-weight: 600;
  color: #1F2937;
}
.page-mau-giao-dien .mgd-the__mo-ta {
  font-size: 13px;
  line-height: 1.55;
  color: #6B7280;
}
.page-mau-giao-dien .mgd-the__nut {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.page-mau-giao-dien .mgd-the__nut .btn {
  width: 100%;
  height: 40px;
}
.page-mau-giao-dien .mgd-the__xem {
  background: #F7F9FC;
}
.page-mau-giao-dien .mgd-bang-mau {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid #E0E4EB;
}
.page-mau-giao-dien .mgd-bang-mau__nhan {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6B7280;
}
.page-mau-giao-dien .mgd-bang-mau__hang {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.page-mau-giao-dien .mgd-o-mau {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 56px;
  cursor: pointer;
}
.page-mau-giao-dien .mgd-o-mau__chon {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.page-mau-giao-dien .mgd-o-mau__tron {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  border: 1px solid #E0E4EB;
  background: conic-gradient(from -90deg, var(--mau-nen) 0 50%, var(--mau-nhan) 50% 75%, var(--mau-chu) 75% 100%);
  box-shadow: inset 0 0 0 3px #FBFCFE;
  transition: box-shadow 0.15s ease;
}
.page-mau-giao-dien .mgd-o-mau__tron .fa {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: #FBFCFE;
  color: #3A69E2;
  font-size: 11px;
}
.page-mau-giao-dien .mgd-o-mau__ten {
  font-size: 12px;
  color: #4B5563;
}
.page-mau-giao-dien .mgd-o-mau:hover .mgd-o-mau__tron {
  border-color: #9CA3AF;
}
.page-mau-giao-dien .mgd-o-mau.is-on .mgd-o-mau__tron {
  box-shadow: inset 0 0 0 3px #FBFCFE, 0 0 0 2px #3A69E2;
}
.page-mau-giao-dien .mgd-o-mau.is-on .mgd-o-mau__ten {
  color: #3A69E2;
  font-weight: 600;
}
.page-mau-giao-dien .mgd-o-mau:focus-within .mgd-o-mau__tron {
  box-shadow: inset 0 0 0 3px #FBFCFE, 0 0 0 3px rgba(58, 105, 226, 0.4);
}

.page-vi-tri .vtri-luoi {
  display: grid;
  gap: 24px;
  align-items: start;
}
.page-vi-tri .vtri-the {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.page-vi-tri .vtri-the__dau {
  flex-wrap: wrap;
}
.page-vi-tri .vtri-the__ten-khoi {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.page-vi-tri .vtri-the__so {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #EEF3FD;
  color: #3A69E2;
  font-size: 13px;
  font-weight: 700;
}
.page-vi-tri .vtri-the__ten {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  color: #1F2937;
}
.page-vi-tri .vtri-the__nhan {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.page-vi-tri .vtri-the__than {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.page-vi-tri .vtri-the__trong {
  padding: 16px;
  border: 1px dashed #E0E4EB;
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
  color: #6B7280;
}
.page-vi-tri .vtri-the__chan {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding: 12px 16px;
  border-top: 1px solid #E0E4EB;
}
.page-vi-tri .vtri-the__xoa {
  margin-right: auto;
}
.page-vi-tri .vtri-the.is-an .vtri-the__so {
  background: #EEF1F6;
  color: #6B7280;
}
.page-vi-tri .vtri-the.is-an .vtri-the__ten {
  color: #6B7280;
}
.page-vi-tri .vtri-the.is-day .vtri-the__so {
  background: #FFFBEB;
  color: #B45309;
}
.page-vi-tri .vtri-o-chua {
  display: flex;
  gap: 5px;
}
.page-vi-tri .vtri-o-chua__o {
  flex: 1 1 0;
  height: 8px;
  border-radius: 9999px;
  background: #E8EBF1;
}
.page-vi-tri .vtri-o-chua__o.is-co {
  background: #3A69E2;
}
.page-vi-tri .vtri-o-chua--lien {
  height: 8px;
  border-radius: 9999px;
  background: #E8EBF1;
  overflow: hidden;
}
.page-vi-tri .vtri-o-chua__day {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: #3A69E2;
}
.page-vi-tri .vtri-the.is-day .vtri-o-chua__o.is-co,
.page-vi-tri .vtri-the.is-day .vtri-o-chua__day {
  background: #B45309;
}
.page-vi-tri .vtri-day-xuong {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #6B7280;
}
.page-vi-tri .vtri-day-xuong .fa {
  flex: none;
  margin-top: 2px;
  opacity: 0.7;
}
.page-vi-tri .vtri-day-xuong.is-canh {
  padding: 8px 12px;
  border-radius: 8px;
  background: #FFFBEB;
  color: #B45309;
}
.page-vi-tri .vtri-day-xuong.is-canh .fa {
  opacity: 1;
}