/*.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%, #579099 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*/
/*SANGSTART _ MENU*/
.menu-custom-item, .menu-custom-open-button {
  background: #EEEEEE;
  border-radius: 100%;
  width: 36px;
  height: 36px;
  margin-left: -30px;
  position: absolute;
  color: #FFFFFF;
  text-align: center;
  line-height: 40px;
  transform: translate3d(0, 0, 0);
  transition: transform ease-out 200ms;
}
.menu-custom-open { display: none; }
.lines {
  width: 20px;
  height: 2px;
  background: #596778;
  display: block;
  position: absolute;
  top: 50%;
  left: 58%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  transition: transform 200ms;
}
.line-1 { transform: translate3d(0, -8px, 0); }
.line-2 { transform: translate3d(0, 0, 0); }
.line-3 { transform: translate3d(0, 8px, 0); }
.menu-custom-open:checked + .menu-custom-open-button .line-1 {
  transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-custom-open:checked + .menu-custom-open-button .line-2 {
  transform: scale(0.1, 1);
}
.menu-custom-open:checked + .menu-custom-open-button .line-3 {
  transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu-custom {
  position: relative;
  width: 80px;
  height: 80px;
  text-align: center;
  font-size: 13px;
}
.menu-custom-item:hover {
  /* Giữ nguyên màu nền của từng item, chỉ đổi màu icon */
  color: #3290B1;
}
.menu-custom-open-button {
  z-index: 2;
  transition: transform 400ms;
  transform: scale(1.1);
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.14);
}
.menu-custom-open-button:hover {
  transform: scale(1.2);
}
.menu-custom-open:checked + .menu-custom-open-button {
  transition-duration: 200ms;
  transform: scale(0.8);
}
.menu-custom-open:checked ~ .menu-custom-item { transition: cubic-bezier(0.935, 0, 0.34, 1.33) 200ms; }
.menu-custom-open:checked ~ .menu-custom-item:nth-child(3) { transform: translate3d(0, -45px, 0); }
.menu-custom-open:checked ~ .menu-custom-item:nth-child(4) { transform: translate3d(40px, -25px, 0); }
.menu-custom-open:checked ~ .menu-custom-item:nth-child(5) { transform: translate3d(40px, 25px, 0); }
.menu-custom-open:checked ~ .menu-custom-item:nth-child(6) { transform: translate3d(0, 45px, 0); }
.menu-custom-open:checked ~ .menu-custom-item:nth-child(7) { transform: translate3d(-40px, 25px, 0); }
.menu-custom-open:checked ~ .menu-custom-item:nth-child(8) { transform: translate3d(-40px, -25px, 0); }
.menu-custom-open:checked ~ .menu-custom-item:nth-child(9) { transform: translate3d(0, -45px, 0); }
.item-1 { background: rgba(17, 46, 51, 0.6) !important; border: 1px solid rgba(122, 220, 201, 0.3) !important;color: #7adcc9 !important;}
.item-2 { background: rgba(17, 46, 51, 0.6) !important; border: 1px solid rgba(16, 171, 156, 0.3) !important;color: #7adcc9 !important; }
.item-3 { background:#74AA9C; }
.item-4 { background:#7CCDC2; }
.item-5 { background:#74AA9C; }
.item-6 { background:#7CCDC2; }

.menu-custom-item::after {
  content: attr(data-tooltip);
  position: absolute;
  background: rgba(0,0,0,0.45);
  color: #fff;
  padding: 0px 4px; 
  border-radius: 4px;
  font-size: 10px;
  opacity: 0;
  gap: 10px;
  vertical-align: middle;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .2s;
}
/* Tooltip positions */
.menu-custom-item[data-pos="top"]::after {
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
}
.menu-custom-item[data-pos="bottom"]::after {
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
}
.menu-custom-item[data-pos="left"]::after {
  right: 35px;
  top: 50%;
  transform: translateY(-50%);
}
.menu-custom-item[data-pos="right"]::after {
  left: 35px;
  top: 50%;
  transform: translateY(-50%);
}
.menu-custom-item:hover::after { opacity: 1; }
.menu-custom-item:hover::after {
  opacity: 1;
}
/*SANGEND _ MENU*/
/*SANGSTART-MENU SPRINT*/
.menu-sprin-wrapper {
      position: relative;
      width: 42px;
      height: 42px;
      overflow: visible;
    }

    /* Ẩn checkbox điều khiển */
    .menu-sprin-toggle {
      display: none;
    }

    /* Nút trung tâm (màu xanh, giống avatar / nút bo tròn trong theme) */
    .menu-sprin-btn {
      width: 42x;
      height: 42px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;

      background: linear-gradient(135deg, #64a7a6 0%, #7adcc9 48%, #5fb9ad 100%);
      border: 1px solid rgba(157, 255, 228, 0.08);
      box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(0, 0, 0, 0.6);

      color: #052729 !important; /* icon trắng ngả xanh */
      font-size: 28px;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .menu-sprin-btn:hover {

      box-shadow: 0 24px 44px rgba(6, 20, 25, 0.55);
      transform: translateY(-1px);
    }

    /* Khi menu mở, nút chính hơi thu lại */
    .menu-sprin-toggle:checked + .menu-sprin-btn {
      transform: scale(0.96);
      box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(0, 0, 0, 0.6);
    }

    /* Nút con – style giống card nhỏ trong theme */
    .menu-sprin-item {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(0, 0, 0, 0.5);
      font-size: 20px;
      background: linear-gradient(145deg, #11535b, #083338);/*rgba(122, 220, 201, 0.1);*/
      
      color: #7adcc9;
      border: 1px solid rgba(122, 220, 201, 0.3);
      position: absolute;
      top: 0px;
      left: 0px;
      opacity: 0 ;
      transform: scale(0.4);
      pointer-events: none;
      transition:
        transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
        opacity 0.25s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
      cursor: pointer;
    }

    .menu-sprin-item:hover {
      background: linear-gradient(145deg, #11535b, #083338);
        box-shadow: 0 24px 44px rgba(6, 20, 25, 0.55);
      transform: translate(var(--tx), var(--ty)) scale(1.06);
      border-color: rgba(122, 220, 201, 0.5);
      color: #a8e6d9;
    }

    /* Khi checkbox bật => bung các nút con ra với delay */
    .menu-sprin-toggle:checked ~ .item1 {
      transform: translate(0px, 90px) scale(1);
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0s;
    }
    .menu-sprin-toggle:checked ~ .item2 {
      transform: translate(-64px, 64px) scale(1);
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0.04s;
    }
    .menu-sprin-toggle:checked ~ .item3 {
      transform: translate(-90px, 0px) scale(1);
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0.08s;
    }
    .menu-sprin-toggle:checked ~ .item4 {
      transform: translate(-64px, -64px) scale(1);
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0.12s;
    }
    .menu-sprin-toggle:checked ~ .item5 {
      transform: translate(0px, -90px) scale(1);
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0.16s;
    }
    .menu-sprin-toggle:checked ~ .item6 {
      transform: translate(64px, -64px) scale(1);
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0.20s;
    }
    .menu-sprin-toggle:checked ~ .item7 {
      transform: translate(90px, 0px) scale(1);
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0.24s;
    }
    .menu-sprin-toggle:checked ~ .item8 {
      transform: translate(64px, 64px) scale(1);
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0.28s;
    }
    /*SANGEND-MENU SPRINT*/

    /* Tooltip for sprint menu items - always visible while menu open */
    .menu-sprin-item::after {
      content: attr(data-tooltip);
      position: absolute;
      top: 50%;
      left: calc(100% + 10px); /* default to the right */
      transform: translateY(-50%);
      background: rgba(17,46,51,0.95);
      color: #e8fbf6;
      border: 1px solid rgba(122,220,201,0.30);
      border-radius: 8px;
      padding: 4px 8px;
      font-size: 11px;
      white-space: nowrap;
      box-shadow: 0 8px 20px rgba(3,15,21,0.4);
      z-index: 2147483000;
      opacity: 0;
      transition: opacity .15s ease;
      pointer-events: none;
    }
    /* show when wrapper has tips-on and menu expanded (checked) */
    .menu-sprin-wrapper.tips-on .menu-sprin-item::after { opacity: 1; }
    /* Position overrides by data-tip-pos */
    .menu-sprin-wrapper.tips-on .menu-sprin-item[data-tip-pos="right"]::after { left: calc(100% + 10px); top: 50%; bottom: auto; transform: translateY(-50%); }
    .menu-sprin-wrapper.tips-on .menu-sprin-item[data-tip-pos="left"]::after  { left: auto; right: calc(100% + 10px); top: 50%; bottom: auto; transform: translateY(-50%); }
    .menu-sprin-wrapper.tips-on .menu-sprin-item[data-tip-pos="top"]::after   { left: 50%; transform: translateX(-50%); top: auto; bottom: calc(100% + 10px); }
    .menu-sprin-wrapper.tips-on .menu-sprin-item[data-tip-pos="bottom"]::after{ left: 50%; transform: translateX(-50%); bottom: auto; top: calc(100% + 10px); }
    /* Default fallback: right; and item1 specifically left if no override */
    .menu-sprin-wrapper.tips-on .item1:not([data-tip-pos])::after { left: auto; right: calc(100% + 10px); }

/* Override fan distances (shorter radius, keep effect) */
.attendance-panel .menu-sprin-wrapper .menu-sprin-item { /* keep defaults */ }
.menu-sprin-toggle:checked ~ .item1 { transform: translate(0px, 64px) scale(1) !important; }
.menu-sprin-toggle:checked ~ .item2 { transform: translate(-48px, 48px) scale(1) !important; }
.menu-sprin-toggle:checked ~ .item3 { transform: translate(-64px, 0px)  scale(1) !important; }
.menu-sprin-toggle:checked ~ .item4 { transform: translate(-48px, -48px) scale(1) !important; }
.menu-sprin-toggle:checked ~ .item5 { transform: translate(0px, -64px) scale(1) !important; }
.menu-sprin-toggle:checked ~ .item6 { transform: translate(48px, -48px) scale(1) !important; }
.menu-sprin-toggle:checked ~ .item7 { transform: translate(64px, 0px)  scale(1) !important; }
.menu-sprin-toggle:checked ~ .item8 { transform: translate(49px, 49px) scale(1) !important; }

/* Also support wrapper.open variant */
.attendance-panel .menu-sprin-wrapper.open .item1 { transform: translate(0px, 64px) scale(1) !important; }
.attendance-panel .menu-sprin-wrapper.open .item2 { transform: translate(-48px, 48px) scale(1) !important; }
.attendance-panel .menu-sprin-wrapper.open .item3 { transform: translate(-64px, 0px)  scale(1) !important; }
.attendance-panel .menu-sprin-wrapper.open .item4 { transform: translate(-48px, -48px) scale(1) !important; }
.attendance-panel .menu-sprin-wrapper.open .item5 { transform: translate(0px, -64px) scale(1) !important; }
.attendance-panel .menu-sprin-wrapper.open .item6 { transform: translate(48px, -48px) scale(1) !important; }
.attendance-panel .menu-sprin-wrapper.open .item7 { transform: translate(64px, 0px)  scale(1) !important; }
.attendance-panel .menu-sprin-wrapper.open .item8 { transform: translate(48px, 64px) scale(1) !important; }
/*
/*SANGSTART-STATUS WORK*/
.status-work-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.12);
  border: 1px solid rgba(33, 196, 93, 0.6);
  box-shadow: 0 0 25px rgba(45, 212, 191, 0.35);
}

.status-work-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.8);
  animation: pulse 1.4s infinite;
}

.status-work-text {
  color: #96EBB5;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  position: relative;
}

.status-work-text::after {
  content: '...';
  position: absolute;
  right: -12px;
  top: 0;
  animation: dots 1.4s steps(4, end) infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.8);
  }
  70% {
    transform: scale(1.35);
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

/* Dùng biến thể nhỏ hơn nếu nhúng trong bảng / thẻ nhỏ */
.status-work-wrapper.small {
  padding: 6px 12px;
  gap: 8px;
}

.status-work-wrapper.small .status-work-text {
  font-size: 13px;
}

.status-work-wrapper.small .status-work-dot {
  width: 10px;
  height: 10px;
}
/*SANGEND-STATUS WORK*/
/*SANGSTART-STATUS RESIGNED*/
/* TRẠNG THÁI: ĐÃ NGHỈ VIỆC (MÀU ĐỎ + HIỆU ỨNG) */
.status-resigned-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(127, 29, 29, 0.25); /* đỏ sẫm trong suốt */
  border: 1px solid rgba(248, 113, 113, 0.9); /* viền đỏ nhạt */
  box-shadow: 0 0 22px rgba(248, 113, 113, 0.45);
}

.status-resigned-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ef4444; /* đỏ tươi */
  box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.9);
  animation: resigned-pulse 1.6s infinite;
}

.status-resigned-text {
  color: #fecaca; /* đỏ rất nhạt */
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  position: relative;
  animation: resigned-fade 2.4s ease-in-out infinite;
}

/* Gạch đỏ bên dưới nhấp nháy nhẹ, thể hiện trạng thái kết thúc */
.status-resigned-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  bottom: -4px;
  background: linear-gradient(90deg, transparent, rgba(248,113,113,0.9), transparent);
  transform-origin: center;
  transform: scaleX(0.2);
  opacity: 0.9;
  animation: resigned-line 1.8s ease-in-out infinite alternate;
}

@keyframes resigned-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.9);
  }
  60% {
    transform: scale(0.9);
    box-shadow: 0 0 0 10px rgba(248, 113, 113, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(248, 113, 113, 0);
  }
}

@keyframes resigned-fade {
  0%   { opacity: 0.65; }
  40%  { opacity: 0.95; }
  100% { opacity: 0.7; }
}

@keyframes resigned-line {
  0% {
    transform: scaleX(0.2);
    opacity: 0.3;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(0.4);
    opacity: 0.5;
  }
}

/* Biến thể nhỏ để nhúng trong bảng hoặc dòng text nhỏ */
.status-resigned-wrapper.small {
  padding: 6px 12px;
  gap: 8px;
}

.status-resigned-wrapper.small .status-resigned-text {
  font-size: 13px;
}

.status-resigned-wrapper.small .status-resigned-dot {
  width: 10px;
  height: 10px;
}
/*SANGEND-STATUS RESIGNED*/
/*SANGSTART-STATUS TRIAL*/
/* TRẠNG THÁI: ĐANG THỬ VIỆC (VÀNG CAM + HIỆU ỨNG KHÁC HẲN "ĐANG LÀM VIỆC") */
.status-trial-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 999px;
  background: radial-gradient(circle at 0% 0%, rgba(250, 204, 21, 0.25), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(251, 191, 36, 0.9);   /* viền vàng */
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.45);
}

/* Dot dạng vòng quay (spinner), KHÔNG pulse như "đang làm việc" */
.status-trial-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid #facc15;
  border-top-color: transparent;
  border-right-color: #f97316; /* thêm cam ở cạnh tạo cảm giác xoay */
  background: transparent;
  animation: trial-spin 1.1s linear infinite;
}

.status-trial-text {
  color: #fef3c7; /* vàng rất nhạt */
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  animation: trial-glow 2.4s ease-in-out infinite;
}

/* Thanh tiến trình mảnh dưới chữ, thay cho ba chấm và khác với "đang làm việc" */
.status-trial-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(250, 204, 21, 0.1),
    rgba(250, 204, 21, 1),
    rgba(251, 146, 60, 0.2)
  );
  transform-origin: left;
  transform: scaleX(0.2);
  opacity: 0.9;
  animation: trial-progress 1.8s ease-in-out infinite;
}

@keyframes trial-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes trial-glow {
  0%   { opacity: 0.7; text-shadow: 0 0 0 rgba(250, 204, 21, 0); }
  40%  { opacity: 1;   text-shadow: 0 0 10px rgba(250, 204, 21, 0.8); }
  100% { opacity: 0.75; text-shadow: 0 0 2px rgba(250, 204, 21, 0.3); }
}

@keyframes trial-progress {
  0%   { transform: scaleX(0.2); opacity: 0.3; }
  50%  { transform: scaleX(1);   opacity: 1;   }
  100% { transform: scaleX(0.4); opacity: 0.6; }
}

/* Biến thể nhỏ để nhúng trong bảng hoặc dòng text nhỏ */
.status-trial-wrapper.small {
  padding: 6px 12px;
  gap: 8px;
}

.status-trial-wrapper.small .status-trial-text {
  font-size: 13px;
}

.status-trial-wrapper.small .status-trial-dot {
  width: 12px;
  height: 12px;
  border-width: 2px;
}
/*SANGEND-STATUS TRIAL*/