.lk-trang-thai-khoi{
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:calc(var(--kc) * 1.5);
  padding:calc(var(--kc) * 3);
  background:var(--mat);
  border:1px solid var(--vien);
  border-radius:var(--bo-vua);
  color:var(--chu);
  font-family:var(--font-than);
}
.lk-trang-thai-khoi *{
  box-sizing:border-box;
}
.lk-trang-thai-khoi + .lk-trang-thai-khoi{
  margin-top:calc(var(--kc) * 2);
}
.lk-trang-thai-khoi--lon{
  min-height:360px;
  padding:calc(var(--kc) * 6) calc(var(--kc) * 3);
}
.lk-trang-thai-khoi--nho{
  min-height:180px;
  padding:calc(var(--kc) * 3);
}
.lk-trang-thai-khoi__icon{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--mat-2);
  color:var(--chu-phu);
}
.lk-trang-thai-khoi--nho .lk-trang-thai-khoi__icon{
  width:44px;
  height:44px;
}
.lk-trang-thai-khoi__icon svg{
  width:28px;
  height:28px;
}
.lk-trang-thai-khoi--nho .lk-trang-thai-khoi__icon svg{
  width:22px;
  height:22px;
}
.lk-trang-thai-khoi__icon--loi{
  color:var(--loi);
}
.lk-trang-thai-khoi__tieu-de{
  margin:0;
  font-family:var(--font-tieu-de);
  font-size:18px;
  font-weight:600;
  color:var(--chu);
}
.lk-trang-thai-khoi--nho .lk-trang-thai-khoi__tieu-de{
  font-size:15px;
}
.lk-trang-thai-khoi__mo-ta{
  margin:0;
  max-width:420px;
  font-size:14px;
  line-height:1.5;
  color:var(--chu-phu);
}
.lk-trang-thai-khoi--nho .lk-trang-thai-khoi__mo-ta{
  font-size:13.5px;
}
.lk-trang-thai-khoi__nut{
  margin-top:calc(var(--kc) * 0.5);
  min-height:40px;
  padding:0 calc(var(--kc) * 2.25);
  border:1px solid var(--nhan);
  border-radius:var(--bo-nho);
  background:var(--nhan);
  color:var(--tren-nhan);
  font-family:var(--font-than);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:opacity 0.15s ease;
}
.lk-trang-thai-khoi__nut:hover{
  opacity:0.88;
}
.lk-trang-thai-khoi__nut:focus-visible{
  outline:2px solid var(--nhan);
  outline-offset:2px;
}
.lk-trang-thai-khoi__nut--phu{
  background:var(--mat);
  color:var(--chu);
  border-color:var(--vien);
}
.lk-trang-thai-khoi__spinner{
  width:44px;
  height:44px;
  color:var(--nhan);
}
.lk-trang-thai-khoi__spinner svg{
  width:100%;
  height:100%;
  animation:lk-trang-thai-khoi-quay 1.2s linear infinite;
}
.lk-trang-thai-khoi__spinner circle{
  stroke-dasharray:90 150;
  stroke-dashoffset:0;
  animation:lk-trang-thai-khoi-day 1.6s ease-in-out infinite;
}
@keyframes lk-trang-thai-khoi-quay{
  100%{transform:rotate(360deg)}
}
@keyframes lk-trang-thai-khoi-day{
  0%{stroke-dasharray:1 200;stroke-dashoffset:0}
  50%{stroke-dasharray:120 200;stroke-dashoffset:-40}
  100%{stroke-dasharray:120 200;stroke-dashoffset:-160}
}
.lk-trang-thai-khoi--khung-xuong{
  align-items:stretch;
  gap:calc(var(--kc) * 1.25);
  padding:calc(var(--kc) * 2);
}
.lk-trang-thai-khoi__khung-hang{
  height:16px;
  border-radius:var(--bo-nho);
  background:var(--mat-2);
  background-image:linear-gradient(90deg, var(--mat-2), var(--vien), var(--mat-2));
  background-size:200% 100%;
  animation:lk-trang-thai-khoi-nhap-nhay 1.4s ease-in-out infinite;
}
.lk-trang-thai-khoi__khung-hang:nth-child(2){
  width:82%;
}
.lk-trang-thai-khoi__khung-hang:nth-child(3){
  width:91%;
}
.lk-trang-thai-khoi__khung-hang:nth-child(4){
  width:76%;
}
.lk-trang-thai-khoi__khung-hang:nth-child(5){
  width:88%;
}
@keyframes lk-trang-thai-khoi-nhap-nhay{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
@media (prefers-reduced-motion: reduce){
  .lk-trang-thai-khoi__spinner svg,
  .lk-trang-thai-khoi__spinner circle,
  .lk-trang-thai-khoi__khung-hang{
    animation:none;
  }
}
@media (max-width:640px){
  .lk-trang-thai-khoi--lon{
    min-height:280px;
    padding:calc(var(--kc) * 4) calc(var(--kc) * 2);
  }
  .lk-trang-thai-khoi__mo-ta{
    font-size:13.5px;
  }
}
