:root {
   --navy-dark: #152A44;
   --navy-mid: #1B3358;
   --orange: #F7941D;
   --orange-light: #FCB040;
   --blue: #2F5FE0;
   --blue-dark: #274FC0;
   --bg-light: #F3F5F9;
   --text-muted: #8895A7;
   --green: #22C55E;
 }

 body {
   background: var(--bg-light);
   font-family: "Inter", sans-serif !important;
 }
.error-msg {
    color: #dc3545;
    font-size: 13px;
    margin-top: 0px;
    margin-bottom: 10px;
    font-weight: 500;
}
 .left-panel {
   background: #1f354e;
   color: #fff;
   min-height: 100vh;
   position: relative;
   overflow: hidden;
   padding: 3rem 3.5rem;
 }

 .left-panel::before,
 .left-panel::after {
   content: "";
   position: absolute;
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 50%;
 }

 .left-panel::before {
   width: 520px;
   height: 520px;
   top: -243px;
   right: -245px;
 }

 .item-feast {
   margin-top: 4rem;
 }

 .left-panel::after {
   width: 380px;
   height: 380px;
   bottom: 60px;
   right: -80px;
 }

 .logo-img {
   height: 81px;
   width: auto;
   display: block;
 }

 .badge-portal {
   background: rgba(255, 255, 255, 0.08);
   color: #fff;
   font-size: .85rem;
   font-weight: 500;
   padding: .5rem 1rem;
   border-radius: 2rem;
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   letter-spacing: .5px;
   margin-top: 10px;
 }

 .badge-portal .dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--green);
   display: inline-block;
 }

 .hero-title {
   font-weight: 700;
   font-size: 45px;
   line-height: 56px;
   letter-spacing: .2px;
   margin: 14px 0;
 }

 .hero-desc {
   color: #b9c4d3ad;
   font-size: 19px;
   max-width: 375px;
   line-height: 31px;
 }

 .feature-item {
   display: flex;
   align-items: center;
   gap: 1rem;
   margin-bottom: 1.2rem;
 }

 .feature-icon {
   width: 42px;
   height: 42px;
   border-radius: .7rem;
   background: rgba(255, 255, 255, 0.08);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   color: #9eafc8;
   flex-shrink: 0;
 }

 .feature-item span {
   color: #b9c4d3ad;
   font-weight: 500;
   font-size: 18px;
 }

 .footer-note {
   color: #7C8AA0;
   font-size: .85rem;
 }

 hr.divider {
   border-color: rgba(255, 255, 255, 0.12);
 }

 .right-panel {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 2rem 1.5rem;
 }

 .icon-circle {
   width: 74px;
   height: 74px;
   border-radius: 1.1rem;
   background: linear-gradient(135deg, var(--blue), var(--blue-dark));
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 2rem;
   box-shadow: 0 10px 24px rgba(47, 95, 224, 0.35);
   margin: 0 auto 1.5rem;
 }

 .form-title {
   font-weight: 800;
   color: #16233A;
 }

 .form-subtitle {
   color: #7C8AA0;
   max-width: 81%;
   margin: 0 auto;
   font-weight: 500;
   font-size: 17px;
   margin-bottom: 1.7rem;
 }

 .login-card {
   background: #fff;
   border-radius: 1.25rem;
   box-shadow: 0 20px 45px rgba(20, 40, 70, 0.08);
   padding: 2.5rem;
   max-width: 520px;
   width: 100%;
 }

 .form-label {
   font-weight: 700;
   color: #000;
 }

 .code-input-group {
   border: 2px solid var(--blue);
   border-radius: .75rem;
   display: flex;
   align-items: center;
   padding: .4rem .9rem;
   background: #fff;
 }

 .code-input-group i {
   color: var(--blue);
   font-size: 1.3rem;
 }

 .code-input-group input {
   border: none;
   outline: none;
   width: 100%;
   font-size: 1.15rem;
   letter-spacing: .05em;
   padding: .5rem .6rem;
   color: #1E293B;
 }

 .code-input-group input::placeholder {
   color: #AAB4C2;
 }

 .hint-text {
   color: #7088a9;
   font-size: 15px;
   font-weight: 500;
 }

.btn-login {
    background: var(--blue);
    border: none;
    font-weight: 600;
    font-size: 19px;
    padding: 18px;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

 .btn-login:hover {
   background: var(--blue-dark);
 }

 .info-box {
   background: #F1F5FB;
   border-radius: .75rem;
   padding: 1rem 1.1rem;
   color: #5C6B80;
   font-size: 15px;
   display: flex;
   gap: 11px;
   border: 1px solid #ddd;
   font-weight: 500;
 }

 .info-box i {
   color: #2a2a2a;
   font-size: 20px;
   flex-shrink: 0;
   margin-top: .1rem;
 }

 .powered-by {
   color: #8895A7;
   font-size: .9rem;
 }

 .powered-by b {
   color: #33455E;
 }



 @media (max-width: 1680px) {
 .text-center.mb-4 {
    margin-bottom: 0 !important;
}.code-input-group i {
    font-size: 16px;
}     .powered-by {
    font-size: 13px;
}  .info-box {
        font-size: 13px;
        gap: 7px;
    }.btn-login {
    font-weight: 500;
    font-size: 18px;
    padding: 12px;
}  .info-box i {
    font-size: 17px;
}.logo-img {
        height: 66px;
        margin-bottom: 12px !important;
    }.form-label {
    font-size: 15px;
}.code-input-group input {
    font-size: 15px;
}    .code-input-group {
        padding: .26rem .9rem;
        margin-bottom: 0 !important;
    }   .hint-text {
        font-size: 14px;
        margin-top: 6px;
    }
    .left-panel {
        padding: 1.75rem 2rem;
    }
    .hero-title {
        font-size: 29px;
        line-height: 37px;
        width: 92%;
    }.feature-icon {
    width: 35px;
    height: 35px;
    font-size: 14px;
}.feature-item span {
    font-size: 16px;
}
.icon-circle {
    width: 60px;
    height: 60px;
    font-size: 22px;
}.form-title {
    font-size: 24px;
}.form-subtitle {
    max-width: 77%;
    font-size: 16px;
}.login-card {
    padding: 2rem;
}
    .hero-desc {
        font-size: 16px;
        line-height: 26px;
    }
      .login-card {
        max-width: 450px;
    }
 }


 @media (max-width: 1280px) {
    .hero-title {
        font-size: 28px;
        line-height: 39px;
    }

   .hero-desc {
     font-size: 16px;
     max-width: 340px;
   }

   .feature-item span {
     font-size: 16px;
   }

   .login-card {
     padding: 2rem;
   }
 }

 @media (max-width: 1024px) {
   .left-panel {
     padding: 2rem;
   }

   .hero-title {
     font-size: 30px;
     line-height: 40px;
   }

   .hero-desc {
     font-size: 15px;
     line-height: 26px;
   }

   .feature-item span {
     font-size: 15px;
   }

   .icon-circle {
     width: 68px;
     height: 68px;
     font-size: 1.8rem;
   }

   .form-subtitle {
     max-width: 90%;
     font-size: 16px;
   }
 }

 @media (max-width: 992px) {
   .left-panel {
     min-height: auto;
     padding: 2rem;
   }

   .item-feast {
     margin-top: 2rem;
   }

   .hero-title {
     font-size: 32px;
     line-height: 42px;
   }

   .hero-desc {
     max-width: 100%;
   }

   .right-panel {
     min-height: auto;
     padding: 3rem 1.5rem;
   }

   .login-card {
     max-width: 650px;
   }
 }

 @media (max-width: 768px) {
.item-feast{
  display: none;
}
    .left-panel, .right-panel {
        padding: 1.75rem;
        text-align: center;
    }
.divider {
  display: none;
}.badge-portal {
    margin-bottom: 0 !important;
}
    .logo-img {
        height: 64px;
        margin: auto;
    }
.footer-note{
  display: none;
}
    .hero-title {
        font-size: 25px;
        line-height: 32px;
        margin-bottom: 6px !important;
    }
    .hero-desc {
        font-size: 15px;
        line-height: 24px;
        margin-bottom: 0 !important;
    }

    .form-title {
        font-size: 22px;
    }

    .form-subtitle {
        max-width: 100%;
        font-size: 15px;
    }

    .login-card {
        padding: 1.75rem;
        text-align: left;
    }
 }

 @media (max-width: 576px) {

   .left-panel,
   .right-panel {
     padding: 1.5rem 1rem;
   }

   .hero-title {
     font-size: 24px;
     line-height: 32px;
   }

   .feature-item span {
     font-size: 14px;
   }

   .login-card {
     padding: 1.5rem;
   }

   .info-box {
     font-size: 14px;
   }
 }

 @media (max-width: 450px) {

   .left-panel,
   .right-panel {
     padding: 1.25rem .875rem;
   }

   .logo-img {
     height: 56px;
   }

    .hero-title {
        font-size: 22px;
        line-height: 30px;
        text-align: center;
        margin: 17px auto;
        font-weight: 600;
    }

   .hero-desc {
     font-size: 14px;
     line-height: 22px;
   }

    .icon-circle {
        width: 55px;
        height: 55px;
        font-size: 24px;
    }
    .form-title {
        font-size: 21px;
    }

   .form-subtitle {
     font-size: 14px;
   }
    .code-input-group input {
        font-size: 14px;
    }    .hint-text {
        font-size: 13px;
    }
     .login-card {
        padding: 0;
        background: transparent;
        box-shadow: none;
    }
    .powered-by {
        font-size: 12px;
    }
    .btn-login {
        font-size: 15px;
        padding: 11px;
    }       .info-box {
        font-size: 12px;
        padding: 9px;
    }
 }