:root {
  --v4-shell-blue: #0769e8;
  --v4-shell-blue-dark: #0051bd;
  --v4-shell-blue-deep: #0347a8;
}

.contest-v4-shell-page.has-fixed-header {
  padding-top: var(--contest-header-height, 80px);
}

.contest-v4-shell-page .page-container {
  width: calc(100% - 70px);
  max-width: 1280px;
  margin-inline: auto;
}

.contest-v4-shell-page .contest-v4-shell-header {
  position: relative;
  z-index: 1020;
  color: #fff;
  background: linear-gradient(90deg, var(--v4-shell-blue), var(--v4-shell-blue-dark));
  font-family: "Be Vietnam Pro", Arial, sans-serif;
  transition: box-shadow .25s ease;
}

.contest-v4-shell-page .contest-v4-shell-header.is-fixed {
  position: fixed;
  inset: 0 0 auto;
  animation: contest-v4-header-slide-down .25s ease-out;
  box-shadow: 0 8px 24px rgba(0, 24, 70, .24);
}

@keyframes contest-v4-header-slide-down {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

.contest-v4-shell-page .contest-v4-shell-header .navbar { min-height: 80px; padding: 0; background: transparent; }
.contest-v4-shell-page .contest-v4-shell-header a { text-decoration: none; }
.contest-v4-shell-page .contest-v4-shell-header .brand { display: flex; align-items: center; gap: 9px; margin: 0; padding: 0; color: #fff !important; font: 800 18px/1.4 "Be Vietnam Pro", sans-serif; letter-spacing: -.5px; }
.contest-v4-shell-page .contest-v4-shell-header .brand-mark { display: grid; place-items: center; }
.contest-v4-shell-page .contest-v4-shell-header .brand-mark img { height: 80px; object-fit: contain; }
.contest-v4-shell-page .contest-v4-shell-header .navbar-nav { gap: 4px; }
.contest-v4-shell-page .contest-v4-shell-header .nav-link { position: relative; margin: 0 15px; padding: 20px 3px 22px !important; color: rgba(255, 255, 255, .94); font-size: 15px; font-weight: 600; white-space: nowrap; }
.contest-v4-shell-page .contest-v4-shell-header .nav-link:hover,
.contest-v4-shell-page .contest-v4-shell-header .nav-link.active { color: #fff; }
.contest-v4-shell-page .contest-v4-shell-header .nav-link.active::after { content: ""; position: absolute; right: 4px; bottom: 4px; left: 4px; height: 2px; border-radius: 2px; background: #fff; }
.contest-v4-shell-page .contest-v4-shell-header .auth-actions { display: flex; flex-shrink: 0; gap: 8px; }
.contest-v4-shell-page .contest-v4-shell-header .auth-actions .btn { height: 38px; padding: 9px 15px; border-radius: 11px; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.contest-v4-shell-page .contest-v4-shell-header .btn-login { border: 1px solid rgba(255, 255, 255, .36); }
.contest-v4-shell-page .contest-v4-shell-header .btn-login:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.contest-v4-shell-page .contest-v4-shell-header .auth-actions .btn-register { border: 0; color: var(--v4-shell-blue-dark); background: #fff; box-shadow: 0 4px 11px rgba(0, 54, 142, .2); }
.contest-v4-shell-page .contest-v4-shell-header .navbar-toggler { padding: .35rem .6rem; border: 1px solid rgba(255, 255, 255, .55) !important; background: transparent; }
.contest-v4-shell-page .contest-v4-shell-header .navbar-toggler-icon { filter: invert(1); }
.contest-v4-shell-page .contest-v4-shell-header .user-dropdown-container { display: none; flex: 0 0 auto; }
.contest-v4-shell-page .contest-v4-shell-header .user-menu-toggle { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 700; }
.contest-v4-shell-page .contest-v4-shell-header .user-menu-toggle:hover { color: #fff; }
.contest-v4-shell-page .contest-v4-shell-header .user-avatar { width: 34px; height: 34px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 50%; object-fit: cover; }
.contest-v4-shell-page .contest-v4-shell-header .dropdown-header { display: grid; gap: 2px; }

.contest-v4-shell-page .contest-v4-shell-footer {
  min-height: 270px;
  overflow: hidden;
  isolation: isolate;
  position: relative;
  color: #fff;
  background: var(--v4-shell-blue-dark);
  font-family: "Be Vietnam Pro", Arial, sans-serif;
}

.contest-v4-shell-page .contest-v4-shell-footer::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("assets/images/ctu-campus-footer.jpg") center 61% / cover no-repeat; filter: grayscale(1) saturate(.45) contrast(1.08); opacity: .34; }
.contest-v4-shell-page .contest-v4-shell-footer::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, color-mix(in srgb, var(--v4-shell-blue-deep) 92%, transparent), color-mix(in srgb, var(--v4-shell-blue) 78%, transparent), color-mix(in srgb, var(--v4-shell-blue-dark) 84%, transparent)); }
.contest-v4-shell-page .contest-v4-shell-footer a { color: #fff; text-decoration: none; }
.contest-v4-shell-page .contest-v4-shell-footer .footer-main { min-height: 212px; margin-top: 0; padding: 26px 0 8px; display: grid; grid-template-columns: 27% 73%; position: relative; z-index: 2; color: #fff; background-color: transparent; background-image: none; text-align: left; }
.contest-v4-shell-page .contest-v4-shell-footer .footer-emblem { display: grid; place-items: center; overflow: hidden; }
.contest-v4-shell-page .contest-v4-shell-footer .footer-emblem img { height: 206px; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(0, 37, 94, .18)); }
.contest-v4-shell-page .contest-v4-shell-footer .footer-info { padding-left: 5px; }
.contest-v4-shell-page .contest-v4-shell-footer .footer-info h2 { margin: 0 0 11px; color: #fff; text-align: center; font: 700 21px/1.15 "Be Vietnam Pro", sans-serif; }
.contest-v4-shell-page .contest-v4-shell-footer .footer-info h3 { margin: 0; color: #fff; text-align: center; font: 800 25px/1.2 "Be Vietnam Pro", sans-serif; white-space: nowrap; }
.contest-v4-shell-page .contest-v4-shell-footer .footer-divider { height: 30px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.contest-v4-shell-page .contest-v4-shell-footer .footer-divider::before,
.contest-v4-shell-page .contest-v4-shell-footer .footer-divider::after { content: ""; width: 160px; height: 1px; background: rgba(255, 255, 255, .7); }
.contest-v4-shell-page .contest-v4-shell-footer .footer-info > p { margin: 0 0 14px; color: #fff; font-size: 14px; font-weight: 500; line-height: 1.55; }
.contest-v4-shell-page .contest-v4-shell-footer .footer-contact { margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; font-size: 14px; }
.contest-v4-shell-page .contest-v4-shell-footer .footer-contact li { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.contest-v4-shell-page .contest-v4-shell-footer .footer-contact i { font-size: 20px; }
.contest-v4-shell-page .contest-v4-shell-footer .footer-bottom { height: 52px; margin-top: 0 !important; padding: 0 !important; border-top: 1px solid rgba(255, 255, 255, .65); position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; color: #fff; background: transparent !important; text-align: left; }
.contest-v4-shell-page .contest-v4-shell-footer .footer-bottom p { margin: 0; color: #fff; font-size: 12px; }
.contest-v4-shell-page .contest-v4-shell-footer .social-links { display: flex; gap: 13px; }
.contest-v4-shell-page .contest-v4-shell-footer .social-links a { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #fff; border-radius: 50%; color: #fff; font-size: 13px; transition: .2s; }
.contest-v4-shell-page .contest-v4-shell-footer .social-links a:hover { color: var(--v4-shell-blue); background: #fff; }

body.exam-mode.contest-v4-shell-page .contest-v4-shell-header,
body.exam-mode.contest-v4-shell-page .contest-v4-shell-footer {
  display: none;
}

@media (max-width: 1100px) {
  .contest-v4-shell-page .page-container { width: calc(100% - 40px); }
  .contest-v4-shell-page .contest-v4-shell-header .nav-link { margin-inline: 10px; }
}

@media (max-width: 767.98px) {
  .contest-v4-shell-page .page-container { width: calc(100% - 28px); }
  .contest-v4-shell-page .contest-v4-shell-header .navbar { min-height: 66px; }
  .contest-v4-shell-page .contest-v4-shell-header .brand { font-size: 16px; }
  .contest-v4-shell-page .contest-v4-shell-header .brand-mark img { height: 58px; }
  .contest-v4-shell-page .contest-v4-shell-header .navbar-collapse { margin: 0 -14px; padding: 10px 14px 18px; background: var(--v4-shell-blue-dark); box-shadow: 0 9px 15px rgba(0, 48, 120, .22); }
  .contest-v4-shell-page .contest-v4-shell-header .nav-link { margin: 0; padding: 11px 7px !important; }
  .contest-v4-shell-page .contest-v4-shell-header .auth-actions,
  .contest-v4-shell-page .contest-v4-shell-header .user-dropdown-container { margin-top: 8px; }
  .contest-v4-shell-page .contest-v4-shell-footer .footer-main { grid-template-columns: 1fr; }
  .contest-v4-shell-page .contest-v4-shell-footer .footer-emblem { display: none; }
  .contest-v4-shell-page .contest-v4-shell-footer .footer-info { padding: 0; }
  .contest-v4-shell-page .contest-v4-shell-footer .footer-info h3 { white-space: normal; }
  .contest-v4-shell-page .contest-v4-shell-footer .footer-contact { align-items: flex-start; flex-direction: column; }
}