:root {
  --pri: #226FF5;
  --pri-d: #1B59C4;
  --pri-l1: #4E8CF7;
  --pri-l2: #E9F1FE;
  --pri-l3: #F4F8FF;
  --pri-l4: #91B7FA;
  --pri-l5: #BDD4FC;
  --pri-l6: #D3E2FD;
}


:root {
  --ac-1: #7239EA;
  --ac-1-d: #5B2EBB;
  --ac-1-l1: #8E61EE;
  --ac-1-l2: #F1EBFD;
  --ac-1-l3: #F8F5FE;

  --ac-2: #04C8C8;
  --ac-2-d: #03A0A0;
  --ac-2-l1: #36D3D3;
  --ac-2-l2: #E6FAFA;
  --ac-2-l3: #CDF4F4;

  --ac-3: #F5226F;
  --ac-3-d: #C41B59;
  --ac-3-l1: #F74E8C;
  --ac-3-l2: #FEE9F1;
  --ac-3-l3: #FDD3E2;

  --r: #EE2D41;
  --r-d: #BE2434;
  --r-l1: #F15767;
  --r-l2: #FDEAEC;
  --r-l3: #FEF5F6;

  --y: #FFA621;
  --y-d: #CC851A;
  --y-l1: #FFB84D;
  --y-l2: #FFF6E9;
  --y-l3: #FFFBF4;

  --g: #00BC62;
  --g-d: #00A757;
  --g-l1: #33DA8A;
  --g-l2: #E6FAF0;
  --g-l3: #F2FCF7;

  --ad-1: #663259;
  --ad-1-d: #522847;
  --ad-1-l1: #855B7A;
  --ad-1-l2: #F0EBEE;
  --ad-1-l3: #e0d6de;

  --ad-2: #F05800;
  --ad-2-d: #C04600;
  --ad-2-l1: #F37933;
  --ad-2-l2: #FDEAEC;
  --ad-2-l3: #FCDECC;

  --menu-bg: #030B18;
  --main-txt: #071631;
  --btn-txt: #6A7383;
  --cap-txt: #9CA2AD;
  --disabled: #CDD0D6;
  --border: #E6E7EA;
  --bg: #F8F9FA;
  --w: #ffffff;
  --trans: transparent;
}

/* --------------------- FONT --------------------- */


@font-face {
	font-family: "Bold Sharp Sans";
	src: url(./assets/fonts/sharp-sans/SharpSansBold.otf)  format("woff2");
	font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
	font-style:normal;
}

@font-face {
	font-family: "SBold Sharp Sans";
	src: url(./assets/fonts/sharp-sans/Sharp\ Sans\ Semibold.otf)  format("woff2");
	font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
	font-style:normal;
}

@font-face {
	font-family: "Medium Sharp Sans";
	src: url(./assets/fonts/sharp-sans/Sharp\ Sans\ Medium.otf)  format("woff2");
	font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
	font-style:normal;
}

@font-face {
	font-family: "EBold Sharp Sans";
	src: url(./assets/fonts/sharp-sans/Sharp\ Sans\ Extrabold.otf)  format("woff2");
	font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
	font-style:normal;
}


body {
  font-family: "Medium Sharp Sans";
}

.font-800 {
  font-family: "EBold Sharp Sans";
  font-weight: 800;
}

.font-700 {
  font-family: "Bold Sharp Sans";
  font-weight: 700;
}

.font-600 {
  font-family: "SBold Sharp Sans";
  font-weight: 600;
}

.font-500 {
  font-family: "Medium Sharp Sans";
  font-weight: 500;
}

.text-64 { font-size: 64px; line-height: 120%; }
.text-48 { font-size: 48px; line-height: 120%; }
.text-42 { font-size: 42px; line-height: 120%; }
.text-38 { font-size: 38px; line-height: 120%; }
.text-36 { font-size: 36px; line-height: 120%; }
.text-32 { font-size: 32px; line-height: 120%; }
.text-28 { font-size: 28px; line-height: 120%; }
.text-26 { font-size: 26px; line-height: 120%; }
.text-24 { font-size: 24px; line-height: 120%; }
.text-22 { font-size: 22px; line-height: 120%; }
.text-20 { font-size: 20px; line-height: 120%; }
.text-18 { font-size: 18px; line-height: 120%; }
.text-16 { font-size: 16px; line-height: 120%; }
.text-14 { font-size: 14px; line-height: 120%; }


.color-pri {
  color: var(--pri)
}

.color-white {
  color: #fff
}

.flex-1 {
  flex: 1 1 0;
}

body {
  background-color: black;
  font-size: 14px;
  color: #666;
  line-height: 1.7em;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}



.list-menu {
  flex-wrap: wrap;
  display: flex;
  -webkit-box-align: stretch;
  line-height: 1.7em;
}

.menu-item {
  display: flex;
  position: relative;
  -webkit-box-align: stretch;
  margin: 0;
}

.menu-item a {
  color: var(--pri) !important;
  font-size: 16px;
  padding: 16px 27.5px 13px 27.5px !important
}

.menu-item:after {
  width: calc(100% - 8px);
}

.menu-item.current-menu-item:after {
  opacity: 1;
}


.mo-button {
  color: #8f1209 !important;
  border-width: 0px !important;
  border-radius: 0px;
  font-size: 18px;
  font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
  font-weight: 600 !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-blend-mode: normal;
  background-image: url(./images/gapu-button.png);
}

.gapu-btn-color {
  color: #8f1209 !important;
}

.w-224px {
  width: 224px !important;
  max-width: 100% !important;
}

.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.space-h-100 {
  height: 100px;
}


.gapu-statistical .static-value,.gapu-statistical .static-sign {
  font-size: 50px;
  color: #fff
}

.gapu-statistical .static-sign::after {
  content: "+";
  font-size: 50px;
  color: white;
  font-weight: 600;
}

.footer a {
  color: #fff
}

.footer a:hover {
  color: #fff;
  text-decoration: none;
}


.footer-bg {
  background-color: #fff !important;
}

.bg-primary-2 {
  background-color: #C7F45B;
}

.footer {
  background-color: #1a1a1a !important;
}

ul {
  list-style-type: none;
}

.title-h2 {
  font-size: 16px;
  color: var(--pri);
  font-weight: 600;
  letter-spacing: 2px;
}

.title-h3 {
  font-weight: 600;
  font-size: 36px;
  color: #FFFFFF;
  line-height: 52px;
}

.text-color {
  color: #b3b3b3!important
}

.col-span-2 {
  grid-column: span 2 / span 2
}

.partner {
  padding: 100px 20px;
  background-color: #1a1a1a;
}

.partner .owl-carousel .owl-item img {
  width: auto;
  height: 40px
}

.owl-carousel .item {
  transition-timing-function: linear !important;
}

.marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.track {
  display: flex;
  width: max-content;
  animation: scroll-left 60s linear infinite;
}

.track img {
  margin-right: 30px;
  height: 40px; /* hoặc tùy chỉnh */
  object-fit: contain;
}

@keyframes scroll-left {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-50%);
  }
}

.bg-trans {
  background-color: transparent;
}

.bg-black {
  background-color: #000;
}

.menu-top-fixed {
  background-color: black;
}

.game-thumbnail-slider .game-icon {
  border-radius: 5px;
}

.game-thumbnail-slider .game-title, .game-thumbnail-slider .game-download {
  color: #fff; 
}

.game-thumbnail-slider .thumbmail-wrapper {
  backdrop-filter: blur(5px)
}

.thumbmail-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80%; /* độ cao gradient */
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
  z-index: 1;
  pointer-events: none;
}

.game-box,.game-box-info {
  display: flex;
  align-items: stretch; /* 2 cột cao bằng nhau */
}

.game-box-info {
  flex: 1 1;
}



.game-img {
  display: flex;
  align-items: stretch; /* kéo img theo chiều cao cha */
  flex: 0 0 150px;
}

.game-info {
  flex: 1;
}

.game-icon {
  height: 150px;
  width: auto;
  object-fit: contain; /* giữ tỷ lệ, tránh méo ảnh */
  display: block;
  max-height: 100%; /* thêm cho chắc chắn */
}

.game-download-links {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.game-thumbnail-slider.owl-carousel .owl-dots {
  display: flex;
  justify-content: center;
}

.game-thumbnail-slider.owl-carousel .owl-dot {
  margin-bottom: 20px;
}

.game-thumbnail-slider.owl-carousel .owl-dots>.owl-dot>span {
  border-radius: 0;
  background: #f36229
}

.game-thumbnail-slider.owl-carousel .owl-dots>.owl-dot.active>span {
  background: #8f1209
}

.game-item {
  position: relative;
  background-position: 50%;
  background-color: transparent;
  background-size: cover;
}

.game-item .game-preview {
  padding: 0 !important;
  border-radius: 20px;
}

.game-item .game-preview img {
  padding: 0 !important;
  border-radius: 20px;
}

.show-when-hover {
  visibility: hidden;
}

.game-preview:hover~.show-when-hover {
  visibility: visible;
  transition: 250ms;
}

.show-when-hover:hover {
  transition: 250ms;
  visibility: visible;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}


.show-when-hover {
  padding: 0 !important;
  border-radius: 20px;
  z-index: 3;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.show-when-hover .game-info-container {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.game-info-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-info-container>img{
  width: 80px;
  border-radius: 20px;
}

.game-info-container .links {
  display: flex;
  column-gap: 10px;
}

.game-info-container .links img {
  height: 25px;
}

.header-career .welcome {
  background-image: url(./images/about-us/v2/bg-career.png);
  background-repeat: no-repeat;
  height: 560px;
  background-size: cover;
}

@media screen and (max-width: 767px) {
  .header-career .welcome {
      background-position: 90%;
  }
}

.gapu-career-intro .mo-column {
  background-color: #1e1e1e;
}

.bg-brown {
  background-color: #1e1e1e;
}

.self-center {
  justify-self: center;
}

@media screen and (max-width: 992px) {
  .game-box {
    flex-direction: column;
    row-gap: 20px;
  }

  .game-download-links {
    flex-direction: row;
    justify-content: start;
    column-gap: 20px;
  }
}

@media screen and (max-width: 767px) {
  .game-icon {
    height: 60px;
  }

  .game-download-links img {
    width: 100px !important;
  }
}