/*.bb::before, .bb::after, .bb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.bb {
  width: 200px;
  height: 20px;
  margin: auto;
  background: rgba(17, 17, 17, 0.1);
  color: red;
  box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Josefin Sans", sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bb::before, .bb::after {
  content: "";
  z-index: -1;
  margin: -5%;
  box-shadow: inset 0 0 0 2px;
  animation: clipMe 4s linear infinite;
}
.bb::before {
  animation-delay: -2s;
}
.bb:hover::after, .bb:hover::before {
  background-color: rgba(255, 0, 0, 0.3);
}

@keyframes clipMe {
  0%, 100% {
    clip: rect(0px, 220px, 2px, 0px);
  }
  25% {
    clip: rect(0px, 2px, 220px, 0px);
  }
  50% {
    clip: rect(218px, 220px, 220px, 0px);
  }
  75% {
    clip: rect(0px, 220px, 220px, 218px);
  }
}
html,
body {
  height: 100%;
}

body {
  position: relative;
  background-color: #0f222b;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}/*# sourceMappingURL=effect.css.map */

/*SANGSTART - TEXTLOGO*/
.logo-nav {
  display:flex;
  align-items:flex-start;
  gap:50px;
}
.fixed-title {
  position: absolute;
  top: 0px;
  left: 33px;
  line-height: 10px;
  }
.content-title {
width:450px;
font-size:16px;
line-height:40px;
font-family:'Muli';
color:#5e5e5e;
height:50px;
position:absolute;
}

.content-title.visible {
position: relative;
margin: 0;
padding: 0;
left: -38px;
top: 4px;
float: none;
font-weight: 400;
overflow: hidden;
height: 50px;

display: flex;
align-items: flex-start; /* đưa sát lên trên */
}

.content-title ul {
margin-top:0;
padding-left: 0px;
text-align:left;
list-style:none;
animation:3.5s linear 0s normal none infinite change;
-webkit-animation:3.5s linear 0s normal none infinite change;
-moz-animation:3.5s linear 0s normal none infinite change;
-o-animation:3.5s linear 0s normal none infinite change;
animation-delay: 1.05s;
}

.content-title ul li {
line-height:50px;
margin:0;
 text-transform: uppercase;
}

@-webkit-keyframes change {
0%   {margin-top:0;}
25%  {margin-top:0;}
50%  {margin-top:-50px;}
75%  {margin-top:-50px;}
100% {margin-top:0;}
}

@keyframes change {
0%   {margin-top:0;}
25%  {margin-top:0;}
50%  {margin-top:-50px;}
75%  {margin-top:-50px;}
100% {margin-top:0;}
}

#fpldbp .canvas {
display: block;
overflow: hidden;
position: relative;
text-indent: -9999px;
height: 55px;
width: 55px;
margin: 0;
}

#fpldbp .icon-wrapper {
position: absolute;
left:4%;
top: 0%;
transform: translate(-50%, -50%) scale(0.25);
transform-origin: center;
}

#fpldbp .icon {
height: 198px;
width: 198px;
left: 0;
top: 10px;
animation: logo-rotate 6s ease-in-out infinite;
animation-delay: 1.05s;
}

#fpldbp .icon * {
display: block;
position: absolute;
border-radius: 50%;
height: 138px;
width: 142px;
}

#fpldbp .curve1 {
left: 54px;
top: 20px;
box-shadow: 0 27px 0 #51978C;
}

#fpldbp .icon .curve1 * {
left: -15px;
top: 35px;
transform: rotate(90deg);
}

#fpldbp .curve1,
#fpldbp .curve3 {
box-shadow: 0 27px 0 #51978c;
}

#fpldbp .curve2,
#fpldbp .curve4 {
box-shadow: 0 27px 0 #214644;
animation: curve-color 3s ease-in-out infinite alternate;
animation-delay: 1.05s;
}

.fixed-login {
  position: absolute;
  top: 0px;
  left: 33px;
  line-height: 10px;
  }
#login .canvas {
  display: block;
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  height: 75px;
  width: 75px;
  margin: 0;
}

#login .icon-wrapper {
  position: absolute;
  left:4%;
  top: 0%;
  transform: translate(-50%, -50%) scale(0.35);
  transform-origin: center;
}

#login .icon {
  height: 198px;
  width: 198px;
  left: 0;
  top: 10px;
  animation: logo-rotate 6s ease-in-out infinite;
  animation-delay: 1.0s;
}

#login .icon * {
  display: block;
  position: absolute;
  border-radius: 50%;
  height: 138px;
  width: 142px;
}

#login .curve1 {
  left: 54px;
  top: 20px;
  box-shadow: 0 27px 0 #51978C;
}

#login .icon .curve1 * {
  left: -15px;
  top: 35px;
  transform: rotate(90deg);
}

#login .curve1,
#login .curve3 {
  box-shadow: 0 27px 0 #51978c;
}

#login .curve2,
#login .curve4 {
  box-shadow: 0 27px 0 #214644;
  animation: curve-color 3s ease-in-out infinite alternate;
  animation-delay: 1.0s;
}


.icon,
.icon * {
display: block;
position: absolute;
}


@keyframes logo-rotate {
0%, 100% {
    transform: rotate(45deg) scale(1);
}
50% {
    transform: rotate(55deg) scale(1.05);
}
}

@keyframes curve-color {
0% {
    box-shadow: 0 27px 0 #214644;
}
50% {
    box-shadow: 0 27px 0 #ffffff;
}
100% {
    box-shadow: 0 27px 0 #72C9BD;
}
}
/*SANGEND - TEXTLOGO*/

.infomation-login li {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  font-weight: 700;
  padding: 38px 0px 0px 142px;
  font-size: 28px;
  height: 20px;
  /* Fallback để tránh flash trắng trước khi animation/clip sẵn sàng */
  color: #7adcc9;                      /* fallback text color */
  -webkit-text-fill-color: currentColor;
  background: none;
  animation: none;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .infomation-login li {
    background-image: linear-gradient(to right, #59A397 10%, #4A90E2 50%, #64A7A6 60%);
    background-size: 200% auto;
    background-position: 0% center; /* trạng thái đầu ổn định */
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: textclip 1.0s linear infinite both;
    animation-delay: 1.05s;
    will-change: background-position;
    transform: translate3d(0,0,0);
    contain: paint; /* cô lập vùng vẽ, hạn chế flash */
  }
}
.infomation-logindep li {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 1px 3px 14px;
  height: 20px;
  /* Fallback để tránh flash trắng trước khi animation/clip sẵn sàng */
  color: #7adcc9;                      /* fallback text color */
  -webkit-text-fill-color: currentColor;
  background: none;
  animation: none;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .infomation-logindep li {
    background-image: linear-gradient(to right, #59A397 10%, #61d4c7 50%, #74AA9C 90%);
    background-size: 200% auto;
    background-position: 0% center; /* trạng thái đầu ổn định */
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: textclip 1.0s linear infinite both;
    animation-delay: 1.05s;
    will-change: background-position;
    transform: translate3d(0,0,0);
    contain: paint; /* cô lập vùng vẽ, hạn chế flash */
  }
}
/*SANGEND - TEXTPERMISSION*/

.infomation-title li {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 1px 3px 14px;
  height: 20px;
  /* Fallback để tránh flash trắng trước khi animation/clip sẵn sàng */
  color: #7adcc9;                      /* fallback text color */
  -webkit-text-fill-color: currentColor;
  background: none;
  animation: none;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .infomation-title li {
    background-image: linear-gradient(to right, #59A397 10%, #4A90E2 50%, #64A7A6 60%);
    background-size: 200% auto;
    background-position: 0% center; /* trạng thái đầu ổn định */
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: textclip 1.0s linear infinite both;
    animation-delay: 1.05s;
    will-change: background-position;
    transform: translate3d(0,0,0);
    contain: paint; /* cô lập vùng vẽ, hạn chế flash */
  }
}
.infomation-dep li {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 1px 3px 14px;
  height: 20px;
  /* Fallback để tránh flash trắng trước khi animation/clip sẵn sàng */
  color: #7adcc9;                      /* fallback text color */
  -webkit-text-fill-color: currentColor;
  background: none;
  animation: none;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .infomation-dep li {
    background-image: linear-gradient(to right, #59A397 10%, #4A90E2 50%, #64A7A6 60%);
    background-size: 200% auto;
    background-position: 0% center; /* trạng thái đầu ổn định */
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: textclip 1.0s linear infinite both;
    animation-delay: 1.05s;
    will-change: background-position;
    transform: translate3d(0,0,0);
    contain: paint; /* cô lập vùng vẽ, hạn chế flash */
  }
}
.permission-5 span {
  position: relative;
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  font-family: "Josefin Sans", sans-serif;
  padding: 5px 14px 3px 14px;
  border-radius: 16px;
  border: 1px solid rgba(122, 220, 201, 0.5);

  /* Fallback để tránh flash trắng trước khi animation/clip sẵn sàng */
  color: #7adcc9;                      /* fallback text color */
  -webkit-text-fill-color: currentColor;
  background: none;
  animation: none;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .permission-5 span {
      background-image: linear-gradient(to right, #57d75b 10%, #25abe8 50%, #FF4757 60%);
      background-size: 200% auto;
      background-position: 0% center; /* trạng thái đầu ổn định */
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      animation: textclip 0.5s linear infinite both;
      animation-delay: 1.05s;
      will-change: background-position;
      transform: translate3d(0,0,0);
      contain: paint; /* cô lập vùng vẽ, hạn chế flash */
  }
}

.permission-4 span {
  position: relative;
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  font-family: "Josefin Sans", sans-serif;
  padding: 5px 14px 3px 14px;
  border-radius: 16px;
  border: 1px solid rgba(122, 220, 201, 0.5);

  /* Fallback để tránh flash trắng trước khi animation/clip sẵn sàng */
  color: #7adcc9;                      /* fallback text color */
  -webkit-text-fill-color: currentColor;
  background: none;
  animation: none;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .permission-4 span {
      background-image: linear-gradient(to right, #095fab 10%, #25abe8 50%, #57d75b 60%);
      background-size: 200% auto;
      background-position: 0% center; /* trạng thái đầu ổn định */
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      animation: textclip 1.0s linear infinite both;
      animation-delay: 1.05s;
      will-change: background-position;
      transform: translate3d(0,0,0);
      contain: paint; /* cô lập vùng vẽ, hạn chế flash */
  }
}

.permission-3 span {
  position: relative;
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  font-family: "Josefin Sans", sans-serif;
  padding: 5px 14px 3px 14px;
  border-radius: 16px;
  border: 1px solid rgba(122, 220, 201, 0.5);

  /* Fallback để tránh flash trắng trước khi animation/clip sẵn sàng */
  color: #7adcc9;                      /* fallback text color */
  -webkit-text-fill-color: currentColor;
  background: none;
  animation: none;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .permission-3 span {
      background-image: linear-gradient(to right, #095fab 10%, #25abe8 50%, #BF00FF 60%);
      background-size: 200% auto;
      background-position: 0% center; /* trạng thái đầu ổn định */
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      animation: textclip 1.0s linear infinite both;
      animation-delay: 1.05s;
      will-change: background-position;
      transform: translate3d(0,0,0);
      contain: paint; /* cô lập vùng vẽ, hạn chế flash */
  }
}
.permission-2 span {
  position: relative;
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  font-family: "Josefin Sans", sans-serif;
  padding: 5px 14px 3px 14px;
  border-radius: 16px;
  border: 1px solid rgba(122, 220, 201, 0.5);

  /* Fallback để tránh flash trắng trước khi animation/clip sẵn sàng */
  color: #7adcc9;                      /* fallback text color */
  -webkit-text-fill-color: currentColor;
  background: none;
  animation: none;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .permission-2 span {
      background-image: linear-gradient(to right, #336E6A 10%, #0B1F22 50%, #436E70 60%);
      background-size: 200% auto;
      background-position: 0% center; /* trạng thái đầu ổn định */
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      animation: textclip 1.0s linear infinite both;
      animation-delay: 1.05s;
      will-change: background-position;
      transform: translate3d(0,0,0);
      contain: paint; /* cô lập vùng vẽ, hạn chế flash */
  }
}
.permission-1 span {
  position: relative;
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  font-family: "Josefin Sans", sans-serif;
  padding: 5px 14px 3px 14px;
  border-radius: 16px;
  border: 1px solid rgba(122, 220, 201, 0.5);

  /* Fallback để tránh flash trắng trước khi animation/clip sẵn sàng */
  color: #7adcc9;                      /* fallback text color */
  -webkit-text-fill-color: currentColor;
  background: none;
  animation: none;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .permission-1 span {
      background-image: linear-gradient(to right, #59A397 10%, #4A90E2 50%, #64A7A6 60%);
      background-size: 200% auto;
      background-position: 0% center; /* trạng thái đầu ổn định */
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      animation: textclip 1.0s linear infinite both;
      animation-delay: 1.05s;
      will-change: background-position;
      transform: translate3d(0,0,0);
      contain: paint; /* cô lập vùng vẽ, hạn chế flash */
  }
}

.permission-0 {
text-align: center;
span {
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  font-family: "Josefin Sans", sans-serif;
  background: rgba(122, 220, 201, 0.5);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  background-clip: text;
      padding: 5px 14px 3px 14px;
      border-radius: 16px;
      border: 1px solid rgba(122, 220, 201, 0.5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  display: inline-block;
}
}
.permission-0 span {
color: #fff;
font-size: 10px;
text-transform: uppercase;
font-weight: 700;
font-family: "Josefin Sans", sans-serif;
background: rgba(122, 220, 201, 0.5);;
background-size: auto auto;
background-clip: border-box;
background-size: 200% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

display: inline-block;
}
@keyframes textclip {
  from {
      background-position: 0% center;
  }
  to {
      background-position: 200% center;
  }
}
/*SANGEND - TEXTPERMISSION*/