* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  height: 100vh;
  font-family: "Varent Grotesk_OTF", sans-serif;
}

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  pointer-events: none;
  z-index: 1000002; /* đảm bảo phủ lên nav có z-index rất cao */
}

.counter {
  position: fixed;
  left: 50px;
  bottom: 50px;
  display: flex;
  height: 100px;
  font-size: 100px;
  line-height: 102px;
  clip-path: polygon(0 0, 100% 0, 100% 100px, 0 100px);
  font-weight: 400;
}

.counter-1,
.counter-2,
.counter-3 {
  position: relative;
  top: -15px;
}
/* Tách riêng số 1 khi hiển thị 100 để không dính với số 0 kế */
.counter-1.digit .num:last-child {
  margin-right: 2px;  /* tạo khoảng cách nhỏ */
  letter-spacing: 5px; /* nới rộng khoảng giữa ký tự */
}

.num1offset1 {
  position: relative;
  right: -25px;
}

.num1offset2 {
  position: relative;
  right: -10px;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 50px;
  transform: translate(-50%, -50%);
  display: flex;
  background: rgb(80, 80, 80);
}

.loader-1 {
  position: relative;
  background: #fff;
  width: 200px;
}

.loader-2 {
  position: relative;
  width: 100px;
  background: #fff;
}

.bar {
  height: 50px;
}

.website-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header {
  position: relative;
  width: max-content;
  height: max-content;
}

.h1 {
  display: flex;
}

h1 {
  font-size: 80px;
}

.header .h1 h1 {
  text-align: center;
  position: relative;
  top: 80px;
  margin: 0 10px;
  text-transform: uppercase;
  font-weight: 400;
}

.header-revealer {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.header-revealer:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 105%;
  height: 110%;
  background: #fff;
  top: 80px;
}