#vx-judge-portal {
  /* Bang mau theo trang quan tri Haravan: xanh duong chu dao tren nen xam nhat */
  --vxj-slate-50: #f7f9fb;
  --vxj-slate-100: #eef2f6;
  --vxj-slate-200: #dfe4e9;
  --vxj-slate-300: #c4cdd5;
  --vxj-slate-400: #919eab;
  --vxj-slate-500: #637381;
  --vxj-slate-600: #45525f;
  --vxj-slate-700: #33414d;
  --vxj-slate-800: #212b36;
  --vxj-slate-900: #182027;

  /* Xanh duong Haravan */
  --vxj-indigo-50: #e6f4ff;
  --vxj-indigo-600: #0088ff;
  --vxj-indigo-700: #006fd6;

  --vxj-cyan-700: #0e7490;

  --vxj-emerald-50: #e3f8ef;
  --vxj-emerald-600: #00a878;
  --vxj-emerald-700: #007f5c;
  --vxj-amber-50: #fff4e5;
  --vxj-amber-200: #ffd79d;
  --vxj-amber-700: #b26b00;
  --vxj-amber-800: #8a5300;
  --vxj-rose-50: #fdecea;
  --vxj-rose-200: #f9c6c0;
  --vxj-rose-700: #d13b2e;

  --vxj-radius: 8px;
  --vxj-shadow: 0 1px 1px rgba(33, 43, 54, 0.06), 0 1px 3px rgba(33, 43, 54, 0.08);

  /* Chieu cao header cua theme Haravan. Doi o day neu theme thay doi. */
  --vxj-header-height: 120px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--vxj-slate-800);
  background: var(--vxj-slate-50);
  padding: 24px 16px 48px;
  line-height: 1.5;

  /* Nen xam phai phu het phan con lai cua khung nhin. Thieu dong nay thi luc moi tai
     trang (chua co du lieu) noi dung ngan, nen xam ket thuc som va lo nen trang cua
     theme ben duoi -> trang bi chia thanh hai vung xam / trang. */
  min-height: calc(100vh - var(--vxj-header-height));
}

#vx-judge-portal *,
#vx-judge-portal *::before,
#vx-judge-portal *::after {
  box-sizing: border-box;
}

#vx-judge-portal .vxj-shell {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#vx-judge-portal [hidden] {
  display: none !important;
}

#vx-judge-portal p {
  margin: 0;
}

/* ---------- Nut chung ---------- */
#vx-judge-portal .vxj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}

#vx-judge-portal .vxj-btn-primary {
  background: var(--vxj-indigo-600);
  color: #fff;
  box-shadow: var(--vxj-shadow);
}

#vx-judge-portal .vxj-btn-primary:hover {
  background: var(--vxj-indigo-700);
}

#vx-judge-portal .vxj-btn-ghost {
  background: #fff;
  border-color: var(--vxj-slate-300);
  color: var(--vxj-slate-700);
}

#vx-judge-portal .vxj-btn-ghost:hover {
  background: var(--vxj-slate-50);
}

#vx-judge-portal .vxj-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* ---------- Dang nhap ---------- */
#vx-judge-portal .vxj-login {
  max-width: 420px;
  margin: 32px auto;
  background: #fff;
  border: 1px solid var(--vxj-slate-200);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--vxj-shadow);
}

#vx-judge-portal .vxj-login h2 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--vxj-slate-900);
}

#vx-judge-portal .vxj-login-sub {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--vxj-slate-500);
}

#vx-judge-portal .vxj-field {
  display: block;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vxj-slate-700);
}

#vx-judge-portal .vxj-field input {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--vxj-slate-300);
  border-radius: 8px;
  outline: none;
  color: var(--vxj-slate-800);
}

#vx-judge-portal .vxj-field input:focus {
  border-color: var(--vxj-indigo-600);
}

#vx-judge-portal .vxj-login .vxj-btn {
  width: 100%;
}

#vx-judge-portal .vxj-login-error {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  background: var(--vxj-rose-50);
  border: 1px solid var(--vxj-rose-200);
  color: var(--vxj-rose-700);
}

/* ---------- Header ---------- */
#vx-judge-portal .vxj-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#vx-judge-portal .vxj-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--vxj-slate-900);
}

#vx-judge-portal .vxj-header-sub {
  margin-top: 4px;
  font-size: 14px;
  color: var(--vxj-slate-600);
}

#vx-judge-portal .vxj-header-main {
  min-width: 0;
}

/* Bo chon mua giai: cung dang voi cac o chon khac cua trang */
#vx-judge-portal .vxj-season {
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--vxj-slate-200);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--vxj-slate-700);
}

#vx-judge-portal .vxj-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Nut ba gach: chi co tac dung tu 1024px tro xuong, nen mac dinh an di */
#vx-judge-portal .vxj-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  margin-right: 2px;
  border: 1px solid var(--vxj-slate-200);
  border-radius: 10px;
  background: #fff;
  color: var(--vxj-slate-700);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: background-color .15s ease, color .15s ease;
}

#vx-judge-portal .vxj-burger:hover {
  background: var(--vxj-slate-100);
  color: var(--vxj-slate-900);
}

/* Lop phu mo sau menu. Cung chi dung o man hinh nho. */
#vx-judge-portal .vxj-scrim {
  display: none;
}

#vx-judge-portal .vxj-hello {
  font-size: 14px;
  font-weight: 600;
  color: var(--vxj-indigo-700);
}

/* ---------- Metric ---------- */
#vx-judge-portal .vxj-metrics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

#vx-judge-portal .vxj-metric {
  background: #fff;
  border: 1px solid var(--vxj-slate-200);
  border-radius: var(--vxj-radius);
  padding: 16px;
  box-shadow: var(--vxj-shadow);
}

#vx-judge-portal .vxj-metric-label {
  font-size: 14px;
  color: var(--vxj-slate-500);
}

#vx-judge-portal .vxj-metric-value {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 700;
  color: var(--vxj-slate-900);
}

#vx-judge-portal .vxj-metric.is-emerald .vxj-metric-value {
  color: var(--vxj-emerald-700);
}

#vx-judge-portal .vxj-metric.is-amber .vxj-metric-value {
  color: var(--vxj-amber-700);
}

/* ---------- Hang muc duoc phan cong ---------- */
#vx-judge-portal .vxj-card {
  background: #fff;
  border: 1px solid var(--vxj-slate-200);
  border-radius: var(--vxj-radius);
  padding: 20px;
  box-shadow: var(--vxj-shadow);
}

#vx-judge-portal .vxj-card h3 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--vxj-slate-900);
}

#vx-judge-portal .vxj-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#vx-judge-portal .vxj-chip {
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--vxj-indigo-50);
  font-size: 14px;
  font-weight: 600;
  color: var(--vxj-indigo-700);
}

/* ---------- Tim kiem ---------- */
#vx-judge-portal .vxj-search-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vxj-slate-700);
}

#vx-judge-portal .vxj-search input {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--vxj-slate-300);
  border-radius: 8px;
  outline: none;
}

#vx-judge-portal .vxj-search input:focus {
  border-color: var(--vxj-indigo-600);
}

/* ---------- Bang bai du thi ---------- */
#vx-judge-portal .vxj-table-card {
  background: #fff;
  border: 1px solid var(--vxj-slate-200);
  border-radius: var(--vxj-radius);
  box-shadow: var(--vxj-shadow);
  overflow: hidden;
}

#vx-judge-portal .vxj-table-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--vxj-slate-100);
}

#vx-judge-portal .vxj-table-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--vxj-slate-900);
}

#vx-judge-portal .vxj-table-title svg {
  color: var(--vxj-emerald-600);
}

#vx-judge-portal .vxj-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#vx-judge-portal .vxj-filters select {
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--vxj-slate-700);
  background: #fff;
  border: 1px solid var(--vxj-slate-300);
  border-radius: 8px;
  outline: none;
  box-shadow: var(--vxj-shadow);
}

#vx-judge-portal .vxj-table-scroll {
  overflow-x: auto;
}

#vx-judge-portal table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}

#vx-judge-portal thead {
  background: var(--vxj-slate-50);
}

#vx-judge-portal th {
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vxj-slate-500);
}

#vx-judge-portal td {
  padding: 16px 20px;
  border-top: 1px solid var(--vxj-slate-100);
  vertical-align: top;
}

#vx-judge-portal tbody tr {
  cursor: pointer;
}

#vx-judge-portal tbody tr:hover {
  background: var(--vxj-slate-50);
}

#vx-judge-portal .vxj-row-title {
  font-weight: 600;
  color: var(--vxj-slate-900);
}

#vx-judge-portal .vxj-row-code {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vxj-slate-400);
}

#vx-judge-portal .vxj-row-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--vxj-slate-500);
}

#vx-judge-portal .vxj-row-score {
  font-weight: 600;
  color: var(--vxj-slate-800);
}

#vx-judge-portal .vxj-row-score span {
  font-weight: 400;
  color: var(--vxj-slate-400);
}

#vx-judge-portal .vxj-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

#vx-judge-portal .vxj-badge.is-done {
  background: var(--vxj-emerald-50);
  color: var(--vxj-emerald-700);
}

#vx-judge-portal .vxj-badge.is-pending {
  background: var(--vxj-amber-50);
  color: var(--vxj-amber-700);
}

#vx-judge-portal .vxj-action {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

#vx-judge-portal .vxj-action.is-primary {
  background: var(--vxj-indigo-600);
  color: #fff;
  box-shadow: var(--vxj-shadow);
}

#vx-judge-portal .vxj-action.is-primary:hover {
  background: var(--vxj-indigo-700);
}

#vx-judge-portal .vxj-action.is-ghost {
  background: #fff;
  border-color: var(--vxj-slate-300);
  color: var(--vxj-slate-700);
}

#vx-judge-portal .vxj-action.is-ghost:hover {
  background: var(--vxj-slate-50);
}

#vx-judge-portal .vxj-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--vxj-slate-500);
}

/* ---------- Phan trang ---------- */
#vx-judge-portal .vxj-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--vxj-slate-100);
  font-size: 14px;
  color: var(--vxj-slate-600);
}

#vx-judge-portal .vxj-pagination b {
  color: var(--vxj-slate-900);
}

#vx-judge-portal .vxj-pagination-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

#vx-judge-portal .vxj-pagination select {
  padding: 6px 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vxj-slate-700);
  border: 1px solid var(--vxj-slate-300);
  border-radius: 8px;
  background: #fff;
  outline: none;
}

#vx-judge-portal .vxj-page-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#vx-judge-portal .vxj-page-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vxj-slate-300);
  border-radius: 8px;
  background: #fff;
  color: var(--vxj-slate-600);
  cursor: pointer;
}

#vx-judge-portal .vxj-page-btn:hover {
  background: var(--vxj-slate-50);
}

#vx-judge-portal .vxj-page-btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
}

#vx-judge-portal .vxj-page-info {
  min-width: 88px;
  text-align: center;
  font-weight: 500;
  color: var(--vxj-slate-700);
}

/* ---------- Drawer chi tiet ---------- */
/* Khung cham diem la noi giam khao lam viec lau nhat, nen chiem gan het man
   hinh va nam GIUA thay vi ep sat mep phai. Chua mot khoang ho quanh vien de
   con thay nen trang phia sau - nguoi dung biet minh dang o mot lop ben tren. */
#vx-judge-portal .vxj-drawer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(15, 23, 42, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#vx-judge-portal .vxj-drawer-panel {
  width: 100%;
  max-width: 1600px;
  height: 100%;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .3);
}

#vx-judge-portal .vxj-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--vxj-slate-200);
}

#vx-judge-portal .vxj-drawer-code {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vxj-indigo-600);
}

#vx-judge-portal .vxj-drawer-title {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--vxj-slate-900);
}

#vx-judge-portal .vxj-drawer-sub {
  margin-top: 4px;
  font-size: 14px;
  color: var(--vxj-slate-500);
}

#vx-judge-portal .vxj-drawer-close {
  border: none;
  background: transparent;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--vxj-slate-500);
  font-size: 20px;
  line-height: 1;
}

#vx-judge-portal .vxj-drawer-close:hover {
  background: var(--vxj-slate-100);
}

#vx-judge-portal .vxj-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#vx-judge-portal .vxj-drawer-main,
#vx-judge-portal .vxj-drawer-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Man hinh rong: ho so ben trai, bang cham diem ben phai. Hai cot deu bam mep
   tren (align-items: start) de cot ngan khong bi keo dai theo cot dai. */
@media (min-width: 1200px) {
  #vx-judge-portal .vxj-drawer-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 38%);
    align-items: start;
    gap: 24px;
    padding: 24px 28px;
  }

  #vx-judge-portal .vxj-media-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Co cho rong thi nut diem to len cho de bam, nhat la tieu chi toi da 40 diem */
  #vx-judge-portal .vxj-score-btn {
    width: 42px;
    height: 42px;
    font-size: 15px;
  }
}

#vx-judge-portal .vxj-detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

#vx-judge-portal .vxj-detail-metric {
  border: 1px solid var(--vxj-slate-200);
  background: var(--vxj-slate-50);
  border-radius: 8px;
  padding: 12px;
}

#vx-judge-portal .vxj-detail-metric-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--vxj-slate-500);
}

#vx-judge-portal .vxj-detail-metric-value {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vxj-slate-800);
}

#vx-judge-portal .vxj-section {
  border: 1px solid var(--vxj-slate-200);
  border-radius: var(--vxj-radius);
  padding: 16px;
}

#vx-judge-portal .vxj-section h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--vxj-slate-900);
}

#vx-judge-portal .vxj-section-body {
  margin-top: 12px;
}

#vx-judge-portal .vxj-detail-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--vxj-slate-100);
  font-size: 14px;
}

#vx-judge-portal .vxj-detail-row:first-child {
  border-top: none;
}

#vx-judge-portal .vxj-detail-row>p:first-child {
  font-weight: 500;
  color: var(--vxj-slate-500);
}

#vx-judge-portal .vxj-detail-row .vxj-multiline {
  white-space: pre-wrap;
  line-height: 1.6;
}

#vx-judge-portal .vxj-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: var(--vxj-indigo-700);
  text-decoration: none;
}

#vx-judge-portal .vxj-detail-link:hover {
  text-decoration: underline;
}

/* Hinh anh va video */
#vx-judge-portal .vxj-media-label {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vxj-slate-700);
}

#vx-judge-portal .vxj-media-cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--vxj-slate-200);
  border-radius: var(--vxj-radius);
  display: block;
}

#vx-judge-portal .vxj-desc-grid {
  display: grid;
  gap: 16px;
}

#vx-judge-portal .vxj-media-top-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 1024px) {
  #vx-judge-portal .vxj-desc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  #vx-judge-portal .vxj-media-top-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

#vx-judge-portal .vxj-desc-box {
  border: 1px solid var(--vxj-slate-200);
  border-radius: var(--vxj-radius);
  background: var(--vxj-slate-50);
  padding: 12px;
  min-height: 80px;
}

#vx-judge-portal .vxj-desc-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vxj-slate-500);
  margin-bottom: 6px;
}

#vx-judge-portal .vxj-desc-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--vxj-slate-800);
  white-space: pre-wrap;
}

#vx-judge-portal .vxj-media-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

#vx-judge-portal .vxj-media-grid a {
  overflow: hidden;
  border: 1px solid var(--vxj-slate-200);
  border-radius: var(--vxj-radius);
  background: var(--vxj-slate-50);
}

#vx-judge-portal .vxj-media-grid img {
  width: 100%;
  height: 208px;
  object-fit: cover;
  display: block;
}

#vx-judge-portal .vxj-media-video {
  overflow: hidden;
  border: 1px solid var(--vxj-slate-200);
  border-radius: var(--vxj-radius);
  background: var(--vxj-slate-50);
}

#vx-judge-portal .vxj-media-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

/* Binh chon / cham diem */
#vx-judge-portal .vxj-vote-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#vx-judge-portal .vxj-vote-note {
  font-size: 14px;
  color: var(--vxj-slate-600);
}

#vx-judge-portal .vxj-criterion {
  border: 1px solid var(--vxj-slate-200);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

#vx-judge-portal .vxj-criterion-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#vx-judge-portal .vxj-criterion-title {
  font-weight: 600;
  color: var(--vxj-slate-900);
}

#vx-judge-portal .vxj-criterion-desc {
  margin-top: 4px;
  font-size: 14px;
  color: var(--vxj-slate-500);
  white-space: pre-wrap;
}

#vx-judge-portal .vxj-criterion-max {
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--vxj-slate-100);
  font-size: 12px;
  font-weight: 600;
  color: var(--vxj-slate-600);
}

#vx-judge-portal .vxj-score-label {
  margin: 12px 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vxj-slate-700);
}

#vx-judge-portal .vxj-score-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#vx-judge-portal .vxj-score-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--vxj-slate-300);
  background: #fff;
  color: var(--vxj-slate-700);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

#vx-judge-portal .vxj-score-btn:hover {
  border-color: #818cf8;
  background: var(--vxj-indigo-50);
}

#vx-judge-portal .vxj-score-btn.is-selected {
  border-color: var(--vxj-indigo-600);
  background: var(--vxj-indigo-600);
  color: #fff;
}

#vx-judge-portal .vxj-score-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

#vx-judge-portal .vxj-score-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--vxj-slate-100);
}

#vx-judge-portal .vxj-score-total {
  font-size: 14px;
  color: var(--vxj-slate-600);
}

#vx-judge-portal .vxj-score-total b {
  font-size: 18px;
  color: var(--vxj-slate-900);
}

#vx-judge-portal .vxj-closed-note {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  background: var(--vxj-amber-50);
  border: 1px solid var(--vxj-amber-200);
  color: var(--vxj-amber-800);
}

#vx-judge-portal .vxj-criteria-warning {
  font-size: 14px;
  color: var(--vxj-amber-700);
}

/* ---------- Popup xac nhan ---------- */
#vx-judge-portal .vxj-modal {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, .5);
}

#vx-judge-portal .vxj-modal-box {
  width: 100%;
  max-width: 384px;
  background: #fff;
  border-radius: var(--vxj-radius);
  padding: 20px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, .3);
}

#vx-judge-portal .vxj-modal-box h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--vxj-slate-900);
}

#vx-judge-portal .vxj-modal-text {
  margin-top: 8px;
  font-size: 14px;
  color: var(--vxj-slate-600);
}

#vx-judge-portal .vxj-modal-text b {
  color: var(--vxj-slate-900);
}

#vx-judge-portal .vxj-modal-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- Toast ---------- */
#vx-judge-portal .vxj-toast {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9200;
  max-width: 384px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--vxj-radius);
  border: 1px solid;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
  background: #fff;
}

#vx-judge-portal .vxj-toast.is-success {
  border-color: #a7f3d0;
  background: var(--vxj-emerald-50);
  color: var(--vxj-emerald-700);
}

#vx-judge-portal .vxj-toast.is-error {
  border-color: var(--vxj-rose-200);
  background: var(--vxj-rose-50);
  color: var(--vxj-rose-700);
}

#vx-judge-portal .vxj-toast.is-info {
  border-color: #c7d2fe;
  background: var(--vxj-indigo-50);
  color: var(--vxj-indigo-700);
}

#vx-judge-portal .vxj-toast-close {
  border: none;
  background: transparent;
  color: var(--vxj-slate-400);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

#vx-judge-portal .vxj-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--vxj-slate-200);
  border-radius: var(--vxj-radius);
  font-size: 14px;
  color: var(--vxj-slate-500);
}

#vx-judge-portal .vxj-error-box {
  padding: 16px;
  border-radius: 8px;
  background: var(--vxj-rose-50);
  color: var(--vxj-rose-700);
  font-size: 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  #vx-judge-portal .vxj-metrics {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {

  /* Man hinh nho thi khoang ho quanh vien chi lam mat cho - cho khung tran vien */
  #vx-judge-portal .vxj-drawer {
    padding: 0;
  }

  #vx-judge-portal .vxj-drawer-panel {
    border-radius: 0;
  }

  #vx-judge-portal .vxj-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  #vx-judge-portal .vxj-detail-metrics {
    grid-template-columns: 1fr;
  }

  #vx-judge-portal .vxj-detail-row {
    grid-template-columns: 1fr;
  }

  #vx-judge-portal .vxj-media-grid {
    grid-template-columns: 1fr;
  }

  #vx-judge-portal .vxj-filters select {
    width: 100%;
  }

  }

/* =========================================================================
   Layout 2 cot: menu trai + noi dung (clone CmsSidebar cua ban React)
   ========================================================================= */
#vx-judge-portal .vxj-layout {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

#vx-judge-portal .vxj-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  min-height: 420px;
}

#vx-judge-portal .vxj-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---------- Sidebar ---------- */
#vx-judge-portal .vxj-sidebar {
  position: sticky;
  top: 16px;
  background: var(--vxj-slate-900);
  color: var(--vxj-slate-300);
  border-radius: var(--vxj-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

#vx-judge-portal .vxj-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

#vx-judge-portal .vxj-sidebar-logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--vxj-indigo-600);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#vx-judge-portal .vxj-sidebar-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#vx-judge-portal .vxj-sidebar-brand-text b {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

#vx-judge-portal .vxj-sidebar-brand-text em {
  font-style: normal;
  font-size: 12px;
  color: var(--vxj-slate-400);
}

#vx-judge-portal .vxj-sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#vx-judge-portal .vxj-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  color: var(--vxj-slate-300);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: background-color .15s ease, color .15s ease;
}

#vx-judge-portal .vxj-nav-item:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

#vx-judge-portal .vxj-nav-item.is-active {
  background: var(--vxj-indigo-600);
  color: #fff;
}

/* Ghi chu cham diem cua hang muc (vd. co che bo phieu cua Grand Prix) */
#vx-judge-portal .vxj-category-note {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--vxj-indigo-50);
  border: 1px solid #bfe0ff;
  font-size: 13px;
  line-height: 1.55;
  color: var(--vxj-indigo-700);
}

#vx-judge-portal .vxj-sidebar-foot {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

#vx-judge-portal .vxj-sidebar-user {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  word-break: break-word;
}

#vx-judge-portal .vxj-sidebar-role {
  margin-top: 2px;
  font-size: 12px;
  color: var(--vxj-slate-400);
}

#vx-judge-portal .vxj-sidebar-logout {
  margin-top: 12px;
  width: 100%;
}


/* Tu 1024px tro xuong: menu trai thanh ngan keo truot ra tu canh trai,
   mo/dong bang nut ba gach tren header. Khong con xep chen ngang tren noi dung. */
@media (max-width: 1024px) {
  #vx-judge-portal .vxj-layout {
    grid-template-columns: 1fr;
  }

  #vx-judge-portal {
    padding-bottom: 24px;
  }

  #vx-judge-portal .vxj-content {
    min-height: 0;
  }

  #vx-judge-portal .vxj-burger {
    display: inline-flex;
  }

  /* Tieu de trang nam ngay ben phai nut ba gach.
     Header dang dan deu hai dau (space-between): khi nut hanh dong xuong dong
     thi phan tieu de bi day sang tan mep phai. Bo dan deu, cho tieu de gian ra
     chiem cho con lai, nut hanh dong tu ep sat phai. */
  #vx-judge-portal .vxj-header {
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
  }

  #vx-judge-portal .vxj-header-main {
    flex: 1 1 auto;
  }

  #vx-judge-portal .vxj-header-actions {
    flex: none;
  }

  #vx-judge-portal .vxj-header h2 {
    font-size: 20px;
  }

  #vx-judge-portal .vxj-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 9500;
    width: 272px;
    max-width: 84vw;
    min-height: 0;
    border-radius: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .28);
  }

  #vx-judge-portal.is-menu-open .vxj-sidebar {
    transform: translateX(0);
  }

  #vx-judge-portal .vxj-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9400;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
  }

  #vx-judge-portal.is-menu-open .vxj-scrim {
    opacity: 1;
    visibility: visible;
  }
}

/* Nguoi dung tat hieu ung chuyen dong thi bo luon phan truot */
@media (prefers-reduced-motion: reduce) {

  #vx-judge-portal .vxj-sidebar,
  #vx-judge-portal .vxj-scrim {
    transition: none;
  }
}


/* =========================================================================
   TRANG TONG QUAN
   Moi vong thi mot khu rieng, gom 2 bieu do tron:
     1. Bai duoc phan cong theo hang muc
     2. Tien do cham (da cham / chua cham) — hien % o giua
   ========================================================================= */
#vx-judge-portal .vxj-rounds {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#vx-judge-portal .vxj-round {
  background: #fff;
  border: 1px solid var(--vxj-slate-200);
  border-radius: 16px;
  box-shadow: var(--vxj-shadow);
  overflow: hidden;
}

#vx-judge-portal .vxj-round-bar-top {
  height: 3px;
}

#vx-judge-portal .vxj-round.is-preliminary .vxj-round-bar-top {
  background: var(--vxj-indigo-600);
}

#vx-judge-portal .vxj-round.is-final .vxj-round-bar-top {
  background: var(--vxj-amber-700);
}

#vx-judge-portal .vxj-round-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--vxj-slate-100);
}

#vx-judge-portal .vxj-round-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

#vx-judge-portal .vxj-round-name {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--vxj-slate-900);
}

#vx-judge-portal .vxj-round-count {
  font-size: 14px;
  color: var(--vxj-slate-500);
}

/* Bo cuc trang Tong quan: tien do cac vong len truoc, ho so BGK xuong duoi.
   Thu tu nay giong nhau tren moi kich thuoc man hinh, nen khong can doi cho
   bang order - thu tu nhin thay va thu tu trinh doc man hinh doc la mot. */
#vx-judge-portal .vxj-overview {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#vx-judge-portal .vxj-overview-info {
  min-width: 0;
}

/* Hai vong nam CANH NHAU thanh hai cot. Man hinh hep thi tu xep chong lai.
   auto-fit + minmax: chi co MOT vong thi khu do chiem tron be ngang, khong de
   lai mot o trong lo ra ben canh. */
#vx-judge-portal .vxj-overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  min-width: 0;
  /* stretch (mac dinh cua grid): hai the cao bang nhau du noi dung lech nhau.
     Dat "start" thi moi the co chieu cao rieng, nhin so le rat kho chiu. */
  align-items: stretch;
}

/* The cao bang nhau roi thi phan than phai gian ra cho het cho trong, khong de
   bieu do dinh sat dau the va chua mot khoang trong o duoi. */
#vx-judge-portal .vxj-overview-stats .vxj-round {
  display: flex;
  flex-direction: column;
}

#vx-judge-portal .vxj-overview-stats .vxj-round-body {
  flex: 1;
}

/* Hai cot thi bieu do va chu thich phai xep doc, khong con du be ngang de
   dat canh nhau nhu luc mot cot */
@media (min-width: 720px) {
  #vx-judge-portal .vxj-overview-stats .vxj-round-body {
    gap: 18px;
  }
}

/* Than khu vong: mot hoac nhieu khung bieu do.
   Vong chung khao co hai khung (tien do + phan bo theo hang muc), vong so khao
   chi mot. Dung auto-fit de mot khung thi chiem tron, hai khung thi chia doi
   khi du rong va tu xep chong khi hep. */
#vx-judge-portal .vxj-round-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  padding: 22px 24px;
}

#vx-judge-portal .vxj-round-panel {
  min-width: 0;
}

/* Tieu de khoi so lieu + nhan pham vi ben PHAI.
 * Nhan do noi ro khoi nay dang dem gi ("Tất cả hạng mục" hay ten mot hang muc):
 * hai trang dung chung mot khoi bieu do, khong ghi ra thi hai con so khac nhau
 * ma nhin y het nhau. */
#vx-judge-portal .vxj-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
#vx-judge-portal .vxj-panel-head .vxj-panel-title { margin-bottom: 0; }
#vx-judge-portal .vxj-panel-scope {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 600; text-align: right;
  color: var(--vxj-slate-500);
}

#vx-judge-portal .vxj-panel-title {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vxj-slate-500);
}

#vx-judge-portal .vxj-panel-chart {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

#vx-judge-portal .vxj-donut {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}

#vx-judge-portal .vxj-donut svg {
  width: 100%;
  height: 100%;
  display: block;
}

#vx-judge-portal .vxj-donut-track {
  fill: none;
  stroke: var(--vxj-slate-100);
  stroke-width: 16;
}

#vx-judge-portal .vxj-donut-value {
  fill: none;
  stroke-width: 16;
  stroke-linecap: round;
  transition: stroke-dasharray .4s ease;
}

#vx-judge-portal .vxj-donut.is-preliminary .vxj-donut-value {
  stroke: var(--vxj-indigo-600);
}

#vx-judge-portal .vxj-donut.is-final .vxj-donut-value {
  stroke: var(--vxj-emerald-600);
}

/* Bieu do chia lat tu dat mau tung cung o JS, khong lay mau theo vong */
#vx-judge-portal .vxj-donut.is-slices .vxj-donut-value {
  stroke: var(--vxj-cyan-700);
}

#vx-judge-portal .vxj-donut-hole {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#vx-judge-portal .vxj-donut-big {
  font-size: 28px;
  font-weight: 700;
  color: var(--vxj-slate-900);
  line-height: 1.1;
}

#vx-judge-portal .vxj-donut-small {
  margin-top: 2px;
  font-size: 12px;
  color: var(--vxj-slate-500);
}

#vx-judge-portal .vxj-round-legend {
  flex: 1;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#vx-judge-portal .vxj-legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

#vx-judge-portal .vxj-legend-mark {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--vxj-slate-300);
}

#vx-judge-portal .vxj-legend-label {
  flex: 1;
  min-width: 0;
  color: var(--vxj-slate-600);
}

#vx-judge-portal .vxj-legend-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--vxj-slate-900);
}

#vx-judge-portal .vxj-legend-row.is-total .vxj-legend-mark {
  background: var(--vxj-slate-400);
}

#vx-judge-portal .vxj-legend-row.is-done .vxj-legend-mark {
  background: var(--vxj-emerald-600);
}

#vx-judge-portal .vxj-legend-row.is-done .vxj-legend-value {
  color: var(--vxj-emerald-700);
}

#vx-judge-portal .vxj-legend-row.is-pending .vxj-legend-mark {
  background: var(--vxj-rose-700);
}

#vx-judge-portal .vxj-legend-row.is-pending .vxj-legend-value {
  color: var(--vxj-rose-700);
}

/* Danh sach hang muc: "da cham / tong". Mau lat lay tu JS nen khong dat o day. */
#vx-judge-portal .vxj-legend-total {
  font-size: 13px;
  font-weight: 500;
  color: var(--vxj-slate-400);
}

/* Hang muc da cham xong: to xanh la cho de nhan ra giua danh sach dai */
#vx-judge-portal .vxj-legend-row.is-full .vxj-legend-value {
  color: var(--vxj-emerald-700);
}

#vx-judge-portal .vxj-legend-row.is-full .vxj-legend-label {
  color: var(--vxj-slate-800);
}

/* Danh sach hang muc co the rat dai - cho cuon trong khung thay vi keo dai the */
#vx-judge-portal .vxj-round-legend.is-scroll {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

/* ---------- The thong tin ban giam khao ----------
   Bo cuc bam theo the ho so BGK trong CMS admin: anh vuong ben trai, ten lon,
   o "Mã giám khảo" gim goc phai, roi luoi hai cot thong tin ben duoi. */
#vx-judge-portal .vxj-judge-card {
  background: #fff;
  border: 1px solid var(--vxj-slate-200);
  border-radius: 16px;
  box-shadow: var(--vxj-shadow);
  padding: 24px;
}

#vx-judge-portal .vxj-judge-top {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

#vx-judge-portal .vxj-judge-avatar {
  width: 104px;
  height: 104px;
  flex-shrink: 0;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vxj-indigo-50);
  color: var(--vxj-indigo-700);
  font-size: 30px;
  font-weight: 700;
}

#vx-judge-portal .vxj-judge-avatar.is-photo {
  object-fit: cover;
  background: var(--vxj-slate-100);
  border: 1px solid var(--vxj-slate-200);
}

/* Chua co anh: vien dut + hinh nguoi mo, giong khung cho san ben CMS */
#vx-judge-portal .vxj-judge-avatar.is-empty {
  background: var(--vxj-slate-50);
  border: 2px dashed var(--vxj-slate-300);
  color: var(--vxj-slate-400);
}

#vx-judge-portal .vxj-judge-main {
  flex: 1;
  min-width: 0;
}

#vx-judge-portal .vxj-judge-title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#vx-judge-portal .vxj-judge-name {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--vxj-slate-900);
}

#vx-judge-portal .vxj-judge-code {
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1px solid var(--vxj-slate-200);
  border-radius: 8px;
  background: var(--vxj-slate-50);
  text-align: right;
}

#vx-judge-portal .vxj-judge-code-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--vxj-slate-500);
}

#vx-judge-portal .vxj-judge-code-value {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 700;
  color: var(--vxj-slate-900);
}

#vx-judge-portal .vxj-judge-code-panel {
  font-size: 12px;
  color: var(--vxj-slate-500);
}

#vx-judge-portal .vxj-judge-rows {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}

#vx-judge-portal .vxj-judge-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#vx-judge-portal .vxj-judge-row-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--vxj-slate-500);
}

#vx-judge-portal .vxj-judge-row-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--vxj-slate-800);
  word-break: break-word;
}

#vx-judge-portal .vxj-judge-cats {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--vxj-slate-100);
}

#vx-judge-portal .vxj-judge-cats-label {
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--vxj-slate-500);
}

/* ------------------------------------------------------------------ *
 * CAY HANG MUC PHU TRACH
 *
 * judgeCategoryTreeHtml() trong bgk.js sinh ra mot cay <ul>/<li> long nhau,
 * nhung KHONG CO MOT DONG CSS NAO cho no - ca nam lop (vxj-cat-branch,
 * -name, -list, is-root, is-mine) deu khong duoc dinh nghia o dau.
 *
 * Hau qua: trinh duyet ve bang mac dinh - cham tron va thut le 40px moi cap -
 * theo bat cu thu gi theme Haravan dat cho ul/li. Va te nhat la `is-mine`
 * KHONG CO DAU HIEU GI.
 *
 * `is-mine` la thu phan biet HANG MUC THUC SU DUOC GIAO voi cac nut to hop
 * chi hien de lam ngu canh (cha, ong cua no). Khong to ra thi giam khao doc
 * ca cay ma khong biet minh phu trach nhung muc nao - dung cai cau hoi ma
 * khoi nay sinh ra de tra loi.
 * ------------------------------------------------------------------ */

#vx-judge-portal .vxj-cat-branch-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cap con: thut vao va co mot duong doc lam moc, ro hon dau cham */
#vx-judge-portal .vxj-cat-branch-list:not(.is-root) {
  margin-left: 7px;
  padding-left: 13px;
  border-left: 1px solid var(--vxj-slate-200);
}

#vx-judge-portal .vxj-cat-branch {
  margin: 0;
  padding: 0;
  list-style: none;
}

#vx-judge-portal .vxj-cat-branch + .vxj-cat-branch {
  margin-top: 4px;
}

#vx-judge-portal .vxj-cat-branch-list:not(.is-root) > .vxj-cat-branch {
  position: relative;
}

/* Nhanh ngang noi tu duong doc sang ten - doc theo cap thay ro cha con */
#vx-judge-portal .vxj-cat-branch-list:not(.is-root) > .vxj-cat-branch::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 12px;
  width: 9px;
  border-top: 1px solid var(--vxj-slate-200);
}

/*
 * NUT NGU CANH: cha/ong duoc keo vao chi de biet hang muc nam o dau. Chu nhat
 * va nhat de mat khong dung lai o day.
 */
#vx-judge-portal .vxj-cat-branch-name {
  display: inline-block;
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--vxj-slate-500);
  word-break: break-word;
}

/*
 * NUT DUOC GIAO: day moi la cau tra loi cua ca khoi.
 *
 * Dung dung bo mau cua .vxj-chip - cung mot thu duoc noi bang cung mot cach o
 * hai cho: khi khong dung duoc cay, bgk.js quay ve ve chips, va hai kieu hien
 * do phai nhin ra la CUNG MOT y nghia.
 */
#vx-judge-portal .vxj-cat-branch.is-mine > .vxj-cat-branch-name {
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--vxj-indigo-50);
  font-size: 14px;
  font-weight: 600;
  color: var(--vxj-indigo-700);
}

@media (max-width: 640px) {

  /* Man hinh hep: anh xuong hang rieng, luoi ve mot cot cho khoi vo chu */
  #vx-judge-portal .vxj-judge-top {
    flex-direction: column;
  }

  #vx-judge-portal .vxj-judge-name {
    font-size: 22px;
  }

  #vx-judge-portal .vxj-judge-code {
    text-align: left;
  }

  #vx-judge-portal .vxj-judge-rows {
    grid-template-columns: 1fr;
  }
}

#vx-judge-portal .vxj-rounds-empty {
  font-size: 14px;
  color: var(--vxj-slate-500);
}


/* =========================================================================
   Trang Danh sach bai du thi: moi vong co so lieu + o tim kiem rieng
   ========================================================================= */
/* Khoi bieu do dung chung voi trang Tong quan, chi them duong ke duoi de tach
   khoi hang tim kiem - dung cho ma ba o so cu de lai. */
#vx-judge-portal .vxj-stage-charts {
  border-bottom: 1px solid var(--vxj-slate-100);
}

#vx-judge-portal .vxj-stage-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--vxj-slate-100);
}

#vx-judge-portal .vxj-stage-search {
  position: relative;
  flex: 1 1 260px;
  min-width: 200px;
  display: flex;
  align-items: center;
}

#vx-judge-portal .vxj-stage-search svg {
  position: absolute;
  left: 12px;
  color: var(--vxj-slate-400);
  pointer-events: none;
}

#vx-judge-portal .vxj-stage-search input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  font-size: 14px;
  border: 1px solid var(--vxj-slate-300);
  border-radius: 8px;
  outline: none;
  color: var(--vxj-slate-800);
}

#vx-judge-portal .vxj-stage-search input:focus {
  border-color: var(--vxj-indigo-600);
}
/* --- MAN CHON HANG MUC ---------------------------------------------------
 * Thay cho popup loc hang muc cu. Giam khao chon hang muc TRUOC roi moi vao
 * danh sach bai, nen day la man dau tien ho thay khi bam "Danh sach bai du thi".
 */
#vx-judge-portal .vxj-catlist-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
#vx-judge-portal .vxj-catlist-title { margin: 0; font-size: 16px; font-weight: 700; }

/* O chon vong - chi hien voi giam khao cham ca hai vong */
#vx-judge-portal .vxj-catlist-stage { display: flex; align-items: center; gap: 8px; font-size: 13px; }
#vx-judge-portal .vxj-catlist-stage select { min-width: 180px; }

#vx-judge-portal .vxj-catlist-name { font-weight: 600; }
#vx-judge-portal .vxj-catlist-count { font-weight: 700; }

/* So bai CON LAI to mau khac: do la con so giam khao thuc su di tim */
#vx-judge-portal .vxj-catlist-left { color: #b3261e; font-weight: 600; }
#vx-judge-portal .vxj-catlist-done { opacity: .6; }

/* Ca dong bam duoc, khong chi cai nut - vung bam rong hon han */
#vx-judge-portal [data-vxj-category-row] { cursor: pointer; }
#vx-judge-portal [data-vxj-category-row]:hover { background: rgba(0, 0, 0, .04); }

/* Duong quay lai man chon hang muc */
#vx-judge-portal .vxj-back {
  display: inline-flex; align-items: center; gap: 4px;
  margin-right: auto; padding: 4px 8px 4px 4px;
  border: none; border-radius: 6px; background: none;
  color: inherit; font: inherit; font-size: 13px; opacity: .75; cursor: pointer;
}
#vx-judge-portal .vxj-back:hover { opacity: 1; background: rgba(0, 0, 0, .05); }

/* --- KHUNG XEM ANH PHONG TO ----------------------------------------------
 * Thay cho <a target="_blank"> cu: bam mot anh la nhay sang tab moi, xem xong
 * phai dong tab quay lai, va muon xem anh thu hai thi lam lai tu dau.
 */

/* O anh trong ngan keo la <button>, phai go het dang mac dinh cua nut */
#vx-judge-portal .vxj-media-open {
  display: block; width: 100%; padding: 0;
  border: none; background: none; cursor: zoom-in;
}
#vx-judge-portal .vxj-media-open img { display: block; width: 100%; }
#vx-judge-portal .vxj-media-open:focus-visible {
  outline: 2px solid var(--vxj-gold, #c8a24a); outline-offset: 2px;
}

#vx-judge-portal .vxj-lightbox {
  position: fixed; inset: 0; z-index: 9001;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 24px;
  background: rgba(0, 0, 0, .88);
}

#vx-judge-portal .vxj-lightbox-figure {
  margin: 0; max-width: min(1100px, 100%); max-height: 100%;
  display: flex; flex-direction: column; gap: 10px;
  cursor: default;   /* bam vao anh KHONG dong khung */
}
#vx-judge-portal .vxj-lightbox-figure img {
  max-width: 100%; max-height: calc(100vh - 130px);
  object-fit: contain; border-radius: 6px; background: #111;
}
#vx-judge-portal .vxj-lightbox-figure figcaption {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  color: rgba(255, 255, 255, .82); font-size: 13px;
}
#vx-judge-portal .vxj-lightbox-count { font-variant-numeric: tabular-nums; opacity: .75; }
#vx-judge-portal .vxj-lightbox-figure figcaption a { color: inherit; text-decoration: underline; }

#vx-judge-portal .vxj-lightbox-close,
#vx-judge-portal .vxj-lightbox-nav {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  border: none; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
}
#vx-judge-portal .vxj-lightbox-close:hover,
#vx-judge-portal .vxj-lightbox-nav:hover { background: rgba(255, 255, 255, .24); }
#vx-judge-portal .vxj-lightbox-close { position: absolute; top: 16px; right: 16px; }

/* Dien thoai: hai nut chuyen nam de len hai ben anh, khong day anh hep lai */
@media (max-width: 720px) {
  #vx-judge-portal .vxj-lightbox { padding: 12px; }
  #vx-judge-portal .vxj-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); }
  #vx-judge-portal .vxj-lightbox-nav.is-prev { left: 8px; }
  #vx-judge-portal .vxj-lightbox-nav.is-next { right: 8px; }
}