@charset "UTF-8";@font-face {
  font-family: 'TeXGyreAdventor';
  font-style: normal;
  font-weight: normal;
  src: url(./gothic/texgyreadventor-regular.otf)
}

@font-face {
  font-family: 'TeXGyreAdventor';
  font-style: normal;
  font-weight: bold;
  src: url(./gothic/texgyreadventor-bold.otf)
}

@font-face {
  font-family: 'TeXGyreAdventor';
  font-style: italic;
  font-weight: normal;
  src: url(./gothic/texgyreadventor-italic.otf)
}

@font-face {
  font-family: 'TeXGyreAdventor';
  font-style: italic;
  font-weight: bold;
  src: url(./gothic/texgyreadventor-bolditalic.otf)
}

@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: var(--sb-thumb-color)
    var(--sb-track-color);
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  
  50% {
    transform: scale(0.95);
  }
  
  100% {
    transform: scale(1);
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
	}
	50% {
    background-position: 100% 50%;
	}
	100% {
    background-position: 0% 50%;
	}
}

:root{
  /* color */
  --nav-color:#FFEAD2;
  --text-color: #000000;
  --btn-text-color: #fff;
  --card-color: #DBDFEA;
  --btn-color: rgb(255, 56, 86) !important;
  --bg-color: #ACB1D6 !important;
  --ss-bg-color: #FFEAD2;
  --docs-bg-color: #DBDFEA;
  
  /* font-size */
  --ss-heading-text-size: clamp(1.8rem, calc(7vw + 1rem), 3rem);
  --content-text-size: clamp(0.5rem, calc(1vw + 1rem), 1rem);
  --brandname-text-size: clamp(1.5rem, calc(7vw + 1rem), 3rem);
  --member-name-text-size: clamp(1rem, calc(4vw + 1rem), 1.2rem);


}

html{
  font-size: 12pt;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body{
  color: var(--text-color);
  background-color: var(--bg-color);
  font-family: 'Century Gothic','TeXGyreAdventor',"STHeiti",sans-serif;
}

/* Custom Scrollbar cho modern browsers */
.table-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.table-container::-webkit-scrollbar-track {
  background: var(--ss-bg-color) !important;
  border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb {
  background: var(--vard-color) !important;
  border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: var(--ss-bg-color) !important;
}

a:focus{
  text-decoration: none;
  color: var(--text-color);
}

.ssbg{
  border: #000 2px solid;
  border-radius: 10px;
  box-shadow: 2px 2px 0px 2px rgba(0,0,0,1);
  -webkit-box-shadow: 2px 2px 0px 2px rgba(0,0,0,1);
  -moz-box-shadow: 2px 2px 0px 2px rgba(0,0,0,1);
  height: 100%;
  width: 90vw;
  margin: 20px auto 20px auto;
  background-size: 20px 20px;
  background-color: var(--ss-bg-color);
  /* transition: 0.7s ease; */
}

.ss-heading{
  margin: 0 auto 40px auto;
  padding-bottom: 25px;
  width: 80%;
  font-size: var(--ss-heading-text-size);
  border-bottom: var(--text-color) 2px solid;
  text-align: center ;
  color: var(--text-color);
}

.gradient-bg{
  background: linear-gradient(-45deg, #0a085d, #0f0c8c, #1410bb , #7712f7, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100%;
}

.theme-switch__checkbox:checked {
  background-color: #000;
}

/* login */
.login-btn{
  display: flex;
  justify-content: end;
  position: relative;
  right: 20px;
  top: 2px;
}

.login-btn a{
  background-color: var(--nav-color);
  padding: 10px 15px 2px 15px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  border: #000 2px solid ;
  border-bottom: none;
  font-size: 20px;
  color: var(--text-color);
}

.login-btn a:hover{
  cursor: pointer;
}

@media (max-width: 768px)
{
  .ssbg{
    height: auto;
  }  
}

#latest-app-size{
  display: flex;
  align-items: center;
  flex-direction: column;
}