.credit-detail-page {
    color: #151d30;
}

main.credit-detail-page {
    margin-top: 0;
}

@media only screen and (max-width: 992px) {
    main.credit-detail-page {
        margin-top: 0;
    }
}

/* Sticky Credit Bar */
.credit-detail-page .sticky_credit {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    padding: 15px 20px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    display: none;
}

.credit-detail-page .sticky_credit.visible {
    display: block;
}

.credit-detail-page .sticky_credit .bank-logo {
    width: auto;
    max-width: 150px;
    height: 60px;
    margin-right: 15px;
    display: flex;
    align-items: center;
}

.credit-detail-page .sticky_credit .bank-logo img {
    max-width: 200%;
    max-height: 200%;
}

.credit-detail-page .sticky_credit span {
    font: 16px "Manrope SemiBold";
}

/* Credit Payment Section */
.credit-detail-page .credit-payment {
    border: none !important;
    font-size: 14px;
    padding: 20px;
    height: calc(100% - 65px);
}

@media only screen and (max-width: 1200px) {
    .credit-detail-page .credit-payment {
        height: auto;
    }
}

@media only screen and (max-width: 480px) {
    .credit-detail-page .credit-payment {
        padding: 15px;
    }
}

.credit-detail-page .credit-payment .payment-top {
    padding: 0 15px;
}

.credit-detail-page .credit-payment .payment-top .name {
    display: flex;
    align-items: center;
}

.credit-detail-page .credit-payment .payment-top strong {
    font-size: 18px;
    margin-left: 10px;
}

@media only screen and (max-width: 480px) {
    .credit-detail-page .credit-payment .payment-top strong {
        font-size: 16px;
    }
}

.credit-detail-page .credit-payment .credit-payment-table {
    background: #fff;
    border-radius: 12px;
    padding: 5px 20px;
    margin-top: 15px;
}

.credit-detail-page .credit-payment .all-plan {
    color: #235CFF;
    border: none;
    background: none;
    text-align: center;
    font-family: "Manrope Bold";
    margin-top: 15px;
    transition: 0.3s;
    cursor: pointer;
}

.credit-detail-page .credit-payment .all-plan:hover {
    letter-spacing: 1px;
}

.credit-detail-page .credit-payment .left-tb table tr td {
    padding: 12px 0;
}

.credit-detail-page .credit-payment .left-tb table tr td:first-child {
    font-family: "Manrope Regular";
}

.credit-detail-page .credit-payment .right-tb table tr th {
    border-bottom: 1px dashed #A4B4E0;
}

.credit-detail-page .credit-payment .right-tb table tr td {
    color: #151D30;
}

.credit-detail-page .credit-payment table {
    width: 100%;
}

.credit-detail-page .credit-payment table tr {
    border-bottom: 1px dashed #A4B4E0;
}

.credit-detail-page .credit-payment table tr:last-child {
    border: none;
}

.credit-detail-page .credit-payment table tr th {
    font-family: "Manrope Bold";
}

.credit-detail-page .credit-payment table tr th,
.credit-detail-page .credit-payment table tr td {
    padding: 7px 0;
    width: auto;
}

.credit-detail-page .credit-payment table tr th:last-child,
.credit-detail-page .credit-payment table tr td:last-child {
    text-align: right;
}

/* Chart Styles */
.credit-detail-page .highcharts-figure {
    margin: 0;
    height: 250px;
    overflow: hidden;
}

@media (max-width: 1500px) {
    .credit-detail-page .highcharts-figure {
        height: 200px;
    }
}

@media only screen and (max-width: 992px) {
    .credit-detail-page .highcharts-figure {
        height: 22vw;
    }
}

@media only screen and (max-width: 480px) {
    .credit-detail-page .highcharts-figure {
        height: 180px;
    }
}

.credit-detail-page .highcharts-description {
    font: 12px/18px "Manrope Regular" !important;
}

/* Credit Card Block */
.credit-detail-page .credit-card-content {
    margin-top: 64px;
}

.credit-detail-page .credit-card-content .row>.col-lg-3 {
    margin-bottom: 30px;
}

.credit-detail-page .credit-card-block {
    position: relative;
    border-radius: 12px;
    padding: 20px;
    letter-spacing: -0.005em;
    font-size: 15px;
    height: 100%;
}

.credit-detail-page .credit-card-block.bg-blue {
    background-color: #EEF4FF;
    border-radius: 12px;
    border: 1px solid #D1DDF2;
}

.credit-detail-page .credit-card-block.spn-bank {
    border: 2px solid #235CFF !important;
}

.credit-detail-page .credit-card-block .spn {
    color: #fff;
    background: #235CFF;
    font: 15px "Manrope Bold";
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 3px 12px;
    margin: -36px auto 0;
}

.credit-detail-page .credit-card-block .spn:before {
    content: "";
    background: url("/assets/img/star-01.svg") no-repeat 0 0;
    display: block;
    margin-right: 5px;
    -webkit-animation: sponsorStar 4s ease-out 1s infinite;
    animation: sponsorStar 4s ease-out 1s infinite;
    width: 16px;
    height: 16px;
}

@keyframes sponsorStar {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

.credit-detail-page .credit-card-block .credit-logo {
    display: inline-block;
    width: 100%;
    max-width: 145px;
    height: 40px;
    line-height: 40px;
}

.credit-detail-page .credit-card-block .credit-logo img {
    max-height: 50px;
}

.credit-detail-page .credit-card-block .form-group {
    font: 18px "Manrope Bold";
    margin: 10px 0;
}

.credit-detail-page .credit-card-block .form-group .form-control {
    height: 54px;
    line-height: 54px;
    padding: 0 55px 0 15px;
    background: #fff;
    border: none;
    border-radius: 12px;
}

.credit-detail-page .credit-card-block .form-group .input-prefix {
    position: absolute;
    top: 50%;
    right: 0;
    pointer-events: none;
    margin: -11px 20px;
}

.credit-detail-page .credit-card-block .form-horizontal {
    margin-bottom: 20px;
}

.credit-detail-page .credit-card-block .form-horizontal table {
    width: 100% !important;
}

.credit-detail-page .credit-card-block .form-horizontal table tr:last-child td {
    border: none;
}

.credit-detail-page .credit-card-block .form-horizontal table tr td {
    border-bottom: 1px dashed #A4B4E0;
    padding: 6px 0;
    font: 14px "Manrope SemiBold";
}

.credit-detail-page .credit-card-block .form-horizontal table tr td:first-child {
    color: #6C7281;
}

.credit-detail-page .credit-card-block .form-horizontal table tr td:last-child {
    text-align: right;
}

.credit-detail-page .credit-card-block .dty {
    text-align: center;
}

.credit-detail-page .credit-card-block .dty a {
    color: #151D30;
    display: inline-block;
    text-decoration: none;
}

.credit-detail-page .credit-card-block .dty a:hover {
    text-decoration: underline;
}

/* Credit Loan Types Slider */
.credit-detail-page .credi-loan-types .swiper-pagination {
    position: initial !important;
    margin: 20px 0 0 !important;
    display: block !important;
}

.credit-detail-page .credi-loan-types .swiper-pagination .swiper-pagination-bullet {
    width: 9px !important;
    height: 9px !important;
    background: none !important;
    border: 1px solid #235CFF !important;
    border-radius: 50% !important;
    transition: 0.4s !important;
    opacity: 1 !important;
    display: inline-block !important;
    margin: 0 4px !important;
}

.credit-detail-page .credi-loan-types .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #235CFF !important;
    border-color: #235CFF !important;
}

.credit-detail-page .credi-loan-types .list {
    text-align: center;
    font: 16px "Manrope SemiBold";
    border-radius: 12px;
    padding: 15px;
}

.credit-detail-page .credi-loan-types .list:hover .icon {
    transform: scale(1.1) rotate(-10deg);
}

.credit-detail-page .credi-loan-types .list .icon {
    height: 50px;
    line-height: 50px;
    margin-bottom: 15px;
    transition: 0.4s;
}

.credit-detail-page .credi-loan-types .list a {
    color: #fff;
    background: #235CFF;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 14px "Manrope Medium";
    margin-top: 15px;
    height: 32px;
    border-radius: 32px;
    transition: 0.4s;
}

.credit-detail-page .credi-loan-types .list a:hover {
    background: #fff;
    color: #235CFF;
}

/* Modal Styles */
.credit-detail-page .modals {
    max-width: 800px;
    padding: 30px;
}

.credit-detail-page .modals .modal-title {
    font: 24px "Manrope Bold";
    margin-bottom: 20px;
    text-align: center;
}

.credit-detail-page .modals .credit-payment {
    height: auto;
    padding: 0;
}

.credit-detail-page .modals .table-responsive {
    max-height: 400px;
    overflow-y: auto;
}

.credit-detail-page .modals .pdf {
    text-align: center;
    margin: 20px 0;
}

.credit-detail-page .modals .pdf a {
    color: #235CFF;
    text-decoration: none;
    font-family: "Manrope SemiBold";
}

.credit-detail-page .modals .pdf a:hover {
    text-decoration: underline;
}

.credit-detail-page .modals .not {
    font: 12px "Manrope Regular";
    color: #6C7281;
}

/* SSS (FAQ) Styles */
/* .credit-detail-page .sss ul {
    padding-left: 0;
    list-style: none;
}

.credit-detail-page .sss ul li {
    background: #EEF4FF;
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
}

.credit-detail-page .sss ul li span {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    font: 16px "Manrope SemiBold";
    transition: 0.3s;
}

.credit-detail-page .sss ul li span i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #151d30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    position: relative;
}

.credit-detail-page .sss ul li span i::before,
.credit-detail-page .sss ul li span i::after {
    content: "";
    position: absolute;
    background: #151d30;
}

.credit-detail-page .sss ul li span i::before {
    width: 10px;
    height: 2px;
}

.credit-detail-page .sss ul li span i::after {
    width: 2px;
    height: 10px;
    transition: 0.3s;
}

.credit-detail-page .sss ul li.active span i::after {
    transform: rotate(90deg);
}

.credit-detail-page .sss ul li .bodys {
    display: none;
    padding: 0 20px 15px 53px;
}

.credit-detail-page .sss ul li .bodys p {
    font: 14px/22px "Manrope Regular";
    margin: 0;
}

.credit-detail-page .sss ul li.active .bodys {
    display: block;
} */