@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@700&display=swap");

* {
  font-family: "Inter", sans-serif;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}

.timer {
  font-family: "IBM Plex Sans", sans-serif;
}

.btn {
  border-radius: 3px !important;
}

.btn-primary {
  background-color: #c10b28 !important;
  border-color: #c10b28 !important;
  color: rgb(255, 255, 255) !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited {
  background-color: #c10b28 !important;
  border-color: #c10b28 !important;
}

.navbar-mod {
  background-color: rgb(58, 58, 58);
  color: white !important;
}
.liner-gradient-sky {
  background: #949494;
  background: -webkit-linear-gradient(to right, #2b32b2, #1488cc);
  background: linear-gradient(to right, #2b32b2, #1488cc);
}
.liner-gradient-margo {
  background: #f8eecc;
  background: -webkit-linear-gradient(to right, #ffffff, #fff5d6);
  background: linear-gradient(to right, #ffffff, #fff5d6);
}

.login {
  min-height: 100vh;
}

.login-heading {
  font-weight: 300;
}

a {
  text-decoration: none !important;
}

.btn-login {
  font-size: 0.9rem;
  letter-spacing: 0.05rem;
  padding: 0.75rem 1rem;
}

.card-header,
.card-footer {
  background-color:  #c10b28;
  color: white!important;
}

.cd {
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
    rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
    rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
  transition: 0.3s;
}

.cd:hover {
  transform: scale(1.1);
}

.container {
  margin-top: 1.5rem;
}

.container-announcement {
  max-width: 40vw;
  min-width: 380px;
}

.profile {
  width: 50%;
  min-width: fit-content;
  height: 40vh;
  border-radius: 1.2rem;
}

.margin-mod {
  padding-top: 4.5rem;
}

.form-border {
  border: 2px solid rgb(10, 10, 48) !important;
}

.shadow {
  box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px !important;
}
.shadow-sm {
  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px !important;
}
.shadow-lg {
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
    rgba(14, 30, 37, 0.32) 0px 2px 16px 0px !important;
}
.login-shadow {
  box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
}

.searchbar {
  border-radius: 3px;
  border: none !important;
}
td,
th {
  vertical-align: middle !important;
}
.searchbar:focus {
  border: none !important;
}

.searchbar:hover {
  border: none !important;
}
.margin-p-bottom {
  margin-bottom: 0.5rem !important;
}
.margin-p-top {
  margin-top: 0.5rem !important;
}
.inline-icons {
  vertical-align: bottom;
}
.gradBg {
  background: linear-gradient(
    0deg,
    rgba(255, 247, 233, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  color: #482307;
}
.navbar-nav .nav-link {
  color: white !important;
}
.navbar-brand {
  color: white !important;
}

.modal-dialog {
  max-width: 80%;
}
.modal-body {
  overflow: auto;
}
video {
  width: 80%;
  max-width: 1600px;
  height: auto;
  margin: 0 auto;
}
.canvas-container {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
canvas {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.watermark-container {
  position: relative;
  width: 100%;
}
.watermark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.watermark {
  font-size: 2.5rem;
  color: rgba(0, 0, 0, 0.3);
  transform: rotate(0deg);
  margin: 10px;
  opacity: 0.3;
}
.modal-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1055;
  overflow: hidden;
}
.modal-fullscreen .modal-dialog {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.modal-fullscreen .modal-content {
  height: 100% !important;
  border: none;
  border-radius: 0;
}
.modal-fullscreen .modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 !important;
}
.modal-fullscreen iframe {
  width: 100% !important;
  height: 100% !important;
}
.source {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border: none;
}

/* test */
.watermark-container {
  position: relative;
  width: 100%;
}
.watermark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.watermark {
  font-size: 2.5rem;
  color: rgba(127, 127, 127, 0.3);
  transform: rotate(0deg);
  margin: 10px;
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 0;
}

#timer {
  position: fixed; /* Đặt vị trí cố định */
  top: 55px; /* Đặt cách đáy màn hình 20px */
  right: 20px; /* Đặt cách bên phải màn hình 20px */
  background-color: rgba(0, 0, 0, 0.7); /* Màu nền trong suốt */
  color: white;
  padding: 10px 20px; /* Padding nhỏ để đồng hồ không chiếm quá nhiều không gian */
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Thêm bóng đổ */
  z-index: 9999; /* Đảm bảo đồng hồ nằm trên các phần tử khác */
  font-size: 10px; /* Điều chỉnh kích thước chữ */
  width: auto; /* Đảm bảo đồng hồ không bị kéo dài ra hết màn hình */
}

/* Nếu bạn muốn thêm hiệu ứng hoạt ảnh khi hiển thị */
.animate__animated.animate__backInUp {
  animation-duration: 1s;
  animation-name: backInUp;
}