:root {
    --primary-rgb: 0, 70, 255;
    --primary-color: #0046FF;
    --invert-color: #E5ECFF;
    --border-button-invert-color: #96B3FF;
    --btn-disabled-color: #D6E0F8;
    --text-disabled-button-color: #FFFFFF;
    --table-header-color: #DEE7FF;
    --title-font-size: var(--fs-13);
    --content-font-size: var(--fs-15);
    --content-font-weight: 900;
    --min-height-button: 35px;
    --min-width-button: 100px;
    --customer-portal-sidebar-width: 415px;
    --dx-editor-outlined-hover: var(--border-button-invert-color);
    --dx-editor-outlined: var(--primary-color);
    --dx-editor-invalid-outlined: rgba(217,83,79,.4);
    --cui-sidebar-width: var(--customer-portal-sidebar-width);
    --background-button-invert-color: var(--invert-color);
    --background-button-color: var(--primary-color);
    --cui-body-font-family: ShinhanLight;
}

/* === Accordion variables [BEGIN] === */
:root {
    --accordion-button-height: 24px;
    --accordion-button-width: 24px;
    --accordion-button-gap: 8px;
    --accordion-button-padding: 24px;
    --accordion-button-padding-mobile: 8px;
}
/* === Accordion variables [END] === */

/* === Font scale variables [BEGIN] === */
:root {
    --fs-8: 0.5rem;
    --fs-12: 0.75rem;
    --fs-13: 0.8125rem;
    --fs-14: 0.875rem;
    --fs-15: 0.9375rem;
    --fs-16: 1rem;
    --fs-17: 1.0625rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-25: 1.5625rem;
    --fs-32: 2rem;
    --fs-38: 2.375rem;
    --fs-45: 2.8125rem;
    --fs-100: 6.25rem;
    --fs-150: 9.375rem;
    --fs-200: 12.5rem;
}

/* Mobile: giảm 2 bậc cho mỗi size */
@media (max-width: 576px) {
    :root {
        --fs-8: 0.5rem;
        --fs-12: 0.5rem;
        --fs-13: 0.75rem;
        --fs-14: 0.8125rem;
        --fs-15: 0.875rem;
        --fs-16: 0.9375rem;
        --fs-17: 1rem;
        --fs-18: 1.0625rem;
        --fs-20: 1.125rem;
        --fs-24: 1.25rem;
        --fs-25: 1.5rem;
        --fs-32: 1.5625rem;
        --fs-38: 2rem;
        --fs-45: 2.375rem;
        --fs-100: 2.8125rem;
        --fs-150: 6.25rem;
        --fs-200: 9.375rem;
        --bs-body-font-size: var(--fs-16);
    }

    :root {
        --accordion-button-padding: var(--accordion-button-padding-mobile);
    }
}
/* === Font scale variables [END] === */

html {
    font-size: 100%;
    font-family: ShinhanLight !important;
    position: relative;
    min-height: 100%;
}

@media only screen and (max-width: 480px) {
    /* Styles for mobile devices */
    .text-error.error-code {
        font-weight: 700;
        /* font-size: var(--fs-100);*/
    }

    .error-page-image {
        width: 80%;
    }

    .error-page.clearfix {
        padding-top: 100px;
    }

    /*    .text-error.error-title {
        margin-top: -50px;
    }*/


    /*.body.flex-grow-1 {
        background-size: 80% auto;
    }*/
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    /* Styles for tablets */
    .text-error.error-code {
        font-weight: 700;
        /*font-size: var(--fs-150);*/
    }

    .error-page-image {
        width: 80%;
    }

    .error-page.clearfix {
        padding-top: 50px;
    }

    /*    .text-error.error-title {
        margin-top: -70px;
    }*/


    /*.body.flex-grow-1 {
        background-size: 80% auto;
    }*/
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    /* Styles for small desktop screens */

    .text-error.error-code {
        font-weight: 700;
        /*font-size: var(--fs-200);*/
    }

    .error-page-image {
        width: 70%;
    }

    .error-page.clearfix {
        padding-top: 50px;
    }

    /*    .text-error.error-title {
        margin-top: -100px;
    }*/


    /*.body.flex-grow-1 {
        background-size: 70% auto;
    }*/
}

@media only screen and (min-width: 1025px) {
    /* Styles for large desktop screens */

    .text-error.error-code {
        font-weight: 700;
        /*font-size: var(--fs-200);*/
    }

    .error-page-image {
        width: 50%;
    }

    .error-page.clearfix {
        padding-top: 0px;
    }

    /*    .text-error.error-title {
        margin-top: -100px;
    }*/

    /*.body.flex-grow-1 {
        background-size: 60% auto;
    }*/

    .modal-dialog.dialog-noti {
        margin-top: 10%;
    }
}

.background-image {
    position: fixed;
    top: 0;
    left: var(--cui-sidebar-width);
    right: 0;
    bottom: 0;
    background-image: url('/images/homepage-background.png');
    background-size: cover;
    background-position: top center;
    pointer-events: none;
    z-index: -2;
}

    .background-image.shift-left {
        left: 0;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/*body {
    margin-bottom: 60px;
}*/

.error-page {
    text-align: center
}

.text-error {
    color: var(--primary-color);
    font-size: var(--fs-24);
    font-family: ShinhanMedium;
}

.error-page div > span {
    display: inline-block;
    overflow: hidden;
    transition-duration: 0.2s;
    transition-property: transform;
}

    .error-page div > span span {
        display: inline-block;
        transition-duration: 0.5s;
        transition-property: transform;
        transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .error-page div > span:nth-child(odd) {
        transform: translateY(50%);
    }

        .error-page div > span:nth-child(odd) span {
            transform: translateY(-100%);
        }

    .error-page div > span:nth-child(even) {
        transform: translateY(-50%);
    }

        .error-page div > span:nth-child(even) span {
            transform: translateY(100%);
        }

.error-page div.loaded > span {
    transform: translateY(0);
}

    .error-page div.loaded > span span {
        transform: translateY(0);
    }

.error-page .outline {
    color: transparent;
    -webkit-text-stroke: 2px var(--primary-color);
}

.card-title {
    font-size: var(--title-font-size);
    font-weight: var(--header-font-weight);
    color: var(--header-text-color);
    margin-bottom: 1.2rem;
    text-transform: none;
}

/*.body.flex-grow-1 {
    padding: 20px;
}*/

.card-header {
    display: flex;
    background-color: var(--header-panel-color) !important;
    justify-content: space-between;
    height: 30px;
    padding: 7px 15px !important;
    border-radius: 10px 10px 10px 10px !important;
}

    .card-header.have-button {
        display: flex;
        background-color: var(--header-panel-color) !important;
        justify-content: space-between;
        height: 40px;
        padding: 4px !important;
    }

        .card-header.have-button .card-title {
            margin: 8px 15px;
        }

/*Button*/

.btn.btn-purple-style {
    min-width: var(--min-width-button);
    font-family: ShinhanBold;
    font-size: var(--fs-16);
    height: 48px;
    /*margin: 5px 0px 5px 5px;*/
    color: var(--text-button-color);
    background-color: var(--background-button-color);
    border-color: var(--background-button-color);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.btn-purple-style:hover {
    /*color: var(--background-button-color) !important;
    background-color: var(--text-button-color) !important;
    border-color: var(--background-button-color) !important;*/
    opacity: 0.9;
}

.btn-purple-style:focus, .btn-purple-style.focus {
    color: var(--text-button-color) !important;
    background-color: var(--background-button-color) !important;
    border-color: var(--background-button-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-purple-style.disabled, .btn-purple-style:disabled {
    color: var(--text-disabled-button-color) !important;
    background-color: var(--btn-disabled-color) !important;
    border: 0;
    opacity: 1 !important;
}

.btn-purple-style:not(:disabled):not(.disabled):active, .btn-purple-style:not(:disabled):not(.disabled).active,
.show > .btn-purple-style.dropdown-toggle {
    color: var(--text-button-color) !important;
    background-color: var(--background-button-color) !important;
    border-color: var(--background-button-color) !important;
}

    .btn-purple-style:not(:disabled):not(.disabled):active:focus, .btn-purple-style:not(:disabled):not(.disabled).active:focus,
    .show > .btn-purple-style.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
    }

.btn.btn-purple-invert {
    height: 48px;
    padding: 4px !important;
    min-width: var(--min-width-button);
    font-family: ShinhanBold;
    font-size: var(--fs-16);
    color: var(--background-button-color);
    background-color: var(--background-button-invert-color);
    border: 1px solid var(--border-button-invert-color);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.btn-purple-invert:hover {
    /*color: var(--background-button-color) !important;
    background-color: var(--text-button-color) !important;
    border-color: var(--background-button-color) !important;*/
    opacity: 0.9;
}

.btn-purple-invert:focus, .btn-purple-invert.focus {
    color: var(--background-button-color) !important;
    background-color: var(--text-button-color) !important;
    border-color: var(--text-button-color) !important;
    box-shadow: 0 0 0 0.1rem var(--border-button-color);
}

.btn-purple-invert.disabled, .btn-purple-invert:disabled {
    color: var(--background-button-color) !important;
    background-color: var(--text-button-color) !important;
    border-color: var(--text-button-color) !important;
}

.btn-purple-invert:not(:disabled):not(.disabled):active, .btn-purple-invert:not(:disabled):not(.disabled).active,
.show > .btn-purple-invert.dropdown-toggle {
    color: var(--background-button-color) !important;
    background-color: var(--text-button-color) !important;
    border-color: var(--text-button-color) !important;
}

    .btn-purple-invert:not(:disabled):not(.disabled):active:focus, .btn-purple-invert:not(:disabled):not(.disabled).active:focus,
    .show > .btn-purple-invert.dropdown-toggle:focus {
        box-shadow: 0 0 0.1rem var(--border-button-color);
    }

.button-search-row {
    text-align: center;
}

.card .accordion-content {
    padding: 15px;
}

.card.form-control-ui {
    margin-top: 20px;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
}

.accordion-item {
    color: var(--cui-accordion-color);
    background-color: var(--cui-card-bg);
    border: var(--cui-accordion-border-width) solid var(--cui-card-border-color);
}

.fw-normal {
    font-size: var(--fs-13);
    font-family: ShinhanLight;
}

/*Devextreme*/

/* Điều chỉnh vị trí calender ngay cạnh icon */
/*.dx-overlay-content {
    right: 0px !important;
    left:unset !important;
}*/

/*Đổi màu khi hover vào select box*/

.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-hover,
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-list-item-selected {
    background-color: var(--invert-color) !important;
    color: var(--primary-color) !important;
}

/*Remove icon thông báo chấm thang đỏ khi validate*/
.dx-invalid.dx-texteditor.dx-editor-filled.dx-show-invalid-badge .dx-texteditor-input-container::after, .dx-invalid.dx-texteditor.dx-editor-outlined.dx-show-invalid-badge .dx-texteditor-input-container::after, .dx-invalid.dx-texteditor.dx-editor-underlined.dx-show-invalid-badge .dx-texteditor-input-container::after {
    content: unset;
}

/* Đổi màu khi readonly */
.dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-disabled,
.dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-readonly,
.dx-editor-outlined.dx-texteditor-with-label.dx-state-disabled,
.dx-editor-outlined.dx-texteditor-with-label.dx-state-readonly,
.dx-texteditor.dx-state-readonly {
    background-color: var(--invert-color);
}

.dx-widget {
    font-size: var(--content-font-size);
    font-family: ShinhanLight;
    height: 58px;
}

.dx-texteditor {
    height: 58px;
}

.dx-calendar-navigator {
    height: 36px !important;
}

.dx-calendar {
    width: 305px;
    min-width: 305px;
}

@media (max-width: 576px)  {
    .dx-calendar {
        width: 250px;
        min-width: 250px;
    }
}

.dx-texteditor-input {
    font-family: ShinhanLight;
    font-size: var(--fs-16);
    color: #404557 !important;
}

.dx-editor-outlined.dx-texteditor-with-floating-label.dx-lookup-empty .dx-texteditor-label .dx-label span, .dx-editor-outlined.dx-texteditor-with-floating-label.dx-texteditor-empty .dx-texteditor-label .dx-label span {
    font-family: ShinhanLight;
    font-size: var(--fs-16);
    color: #404557 !important;
}

.dx-texteditor.dx-state-focused .dx-texteditor-label,
.dx-texteditor.dx-state-focused.dx-state-hover .dx-texteditor-label {
    color: #404557 !important;
}

.dx-invalid .dx-texteditor-label {
    color: #404557 !important;
}

.dx-texteditor.dx-state-focused.dx-invalid .dx-texteditor-label,
.dx-texteditor.dx-state-focused.dx-state-hover.dx-invalid .dx-texteditor-label {
    color: #404557 !important;
}

.dx-button-has-icon .dx-icon {
    width: 22px;
    height: 22px;
}

/* Thay đổi sang icon theo Figma */
.dx-datebox .dx-dropdowneditor-icon svg,
.dx-datebox .dx-dropdowneditor-icon img {
    display: none !important;
}

.dx-datebox .dx-dropdowneditor-icon {
    background-image: url('/images/icon/calendar.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.dx-datebox .dx-dropdowneditor-icon {
    font-family: initial !important; /* Loại bỏ icon mũi tên */
    font-size: 0 !important; /* Ẩn ký tự */
}

    .dx-datebox .dx-dropdowneditor-icon::before {
        content: none !important; /* Xoá icon mặc định */
        display: none !important;
    }

.dx-popup-title.dx-toolbar {
    display: none !important;
}

/* Xoá icon */
.dx-calendar-cell.dx-calendar-empty-cell {
    background: none !important;
}

/* Xoá thông báo lỗi mặc định */
.dx-invalid-message {
    display: none !important;
}

.dx-editor-outlined.dx-texteditor-with-floating-label.dx-lookup-empty.dx-invalid .dx-texteditor-label .dx-label,
.dx-editor-outlined.dx-texteditor-with-floating-label.dx-texteditor-empty.dx-invalid .dx-texteditor-label .dx-label {
    border-bottom: 2px solid var(--dx-editor-invalid-outlined) !important;
    border-top: 2px solid var(--dx-editor-invalid-outlined) !important;
}

.dx-editor-outlined.dx-texteditor-with-floating-label.dx-lookup-empty.dx-invalid .dx-texteditor-label .dx-label-after,
.dx-editor-outlined.dx-texteditor-with-floating-label.dx-lookup-empty.dx-invalid .dx-texteditor-label .dx-label-before,
/*.dx-editor-outlined.dx-texteditor-with-floating-label.dx-texteditor-empty.dx-invalid .dx-texteditor-label .dx-label-after,*/
.dx-editor-outlined.dx-texteditor-with-floating-label.dx-texteditor-empty.dx-invalid .dx-texteditor-label .dx-label-before {
    border-color: var(--dx-editor-invalid-outlined) !important;
    border-top: 2px solid var(--dx-editor-invalid-outlined) !important;
    border-bottom: 2px solid var(--dx-editor-invalid-outlined) !important;
    border-left: 2px solid var(--dx-editor-invalid-outlined) !important;
}

.dx-editor-outlined.dx-texteditor-with-floating-label.dx-invalid .dx-texteditor-label .dx-label-after,
.dx-editor-outlined.dx-texteditor-with-label.dx-invalid .dx-texteditor-label .dx-label-after,
.dx-editor-outlined.dx-texteditor-with-floating-label.dx-invalid .dx-texteditor-label .dx-label-before,
.dx-editor-outlined.dx-texteditor-with-label.dx-invalid .dx-texteditor-label .dx-label-before {
    border-color: var(--dx-editor-invalid-outlined) !important;
    border-top: 2px solid var(--dx-editor-invalid-outlined) !important;
    border-bottom: 2px solid var(--dx-editor-invalid-outlined) !important;
}

.dx-editor-outlined.dx-texteditor-with-floating-label.dx-invalid .dx-texteditor-label .dx-label-after {
    border-right: 2px solid var(--dx-editor-invalid-outlined) !important;
}

.dx-editor-outlined.dx-texteditor-with-label.dx-invalid .dx-texteditor-label .dx-label-before,
.dx-editor-outlined.dx-texteditor-with-floating-label.dx-invalid .dx-texteditor-label .dx-label-before {
    border-left: 2px solid var(--dx-editor-invalid-outlined) !important;
}

.dx-editor-outlined.dx-texteditor-with-floating-label.dx-invalid.dx-rtl .dx-texteditor-label .dx-label-after,
.dx-editor-outlined.dx-texteditor-with-label.dx-invalid.dx-rtl .dx-texteditor-label .dx-label-after {
    border-left: 2px solid var(--dx-editor-invalid-outlined) !important;
}

.dx-editor-outlined.dx-texteditor-with-floating-label.dx-invalid.dx-rtl .dx-texteditor-label .dx-label-before,
.dx-editor-outlined.dx-texteditor-with-label.dx-invalid.dx-rtl .dx-texteditor-label .dx-label-before {
    border-right: 2px solid var(--dx-editor-invalid-outlined) !important;
}

.dx-editor-outlined.dx-texteditor-with-floating-label.dx-invalid .dx-texteditor-label .dx-label,
.dx-editor-outlined.dx-texteditor-with-label.dx-invalid .dx-texteditor-label .dx-label {
    border-bottom: 2px solid var(--dx-editor-invalid-outlined) !important;
}

/* Thay đổi màu nền khi chọn một phần tử trong SelectBox */
.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-active {
    background-color: rgba(0, 0, 0, .1);
    color: var(--dx-background-color);
}

.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused.dx-list-item-selected {
    background-color: rgba(0, 0, 0, .1) !important;
    color: var(--dx-background-color);
}

.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused {
    background-color: rgba(0, 0, 0, .1) !important;
    color: var(--dx-background-color);
}

/* Thay đổi màu của thanh cuộn trong dropdown SelectBox */
.dx-scrollbar-vertical .dx-scrollable-scroll {
    background-color: #d1d1d1;
}

.dx-scrollbar-vertical.dx-scrollbar-hoverable {
    height: 100%;
}

.dx-toast-content {
    padding: 8px 50px !important; /* Padding 12px trái/phải */
    text-align: center; /* Căn giữa text */
    display: inline-block !important; /* Chiều rộng ôm nội dung */
    max-width: 100%; /* Không vượt quá chiều rộng màn hình */
    display: flex !important; /* Sử dụng flex để căn giữa */
    justify-content: center !important;
    align-items: center !important;
    width: auto !important; /* Cho phép co giãn theo nội dung */
}

.icon-grid {
    font-size: var(--fs-14);
    font-weight: 300;
    padding: 0px 2px;
    color: var(--background-header-color) !important;
    cursor: pointer;
}

    .icon-grid:hover {
        color: var(--cui-orange) !important;
    }

/*.container-fluid.p-0 {
    padding: 0px 5px !important;
}*/

.btn-purple-invert-icon {
    background-color: transparent;
    color: #fff;
    padding: 5px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .btn-purple-invert-icon:hover {
        color: var(--cui-orange);
    }

    .btn-purple-invert-icon i {
        font-size: var(--fs-16);
    }

.btn-icon-only {
    padding: 7px;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-16);
    line-height: 1;
}

    .btn-icon-only i {
        font-size: var(--fs-18);
    }

.custom-arrow.bi-arrow-down-circle, .custom-arrow.bi-arrow-up-circle {
    padding: 5px;
    color: white;
}

.sidebar-nav .nav-group.show .nav-group-toggle {
    margin: 1px;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.overlay-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 79%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

.three-body {
    --uib-size: 35px;
    --uib-speed: 0.8s;
    --uib-color: var(--primary-color);
    position: relative;
    display: inline-block;
    height: var(--uib-size);
    width: var(--uib-size);
    animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
}


.three-body__dot {
    position: absolute;
    height: 100%;
    width: 30%;
}

    .three-body__dot:after {
        content: '';
        position: absolute;
        height: 0%;
        width: 100%;
        padding-bottom: 100%;
        background-color: var(--uib-color);
        border-radius: 50%;
    }

    .three-body__dot:nth-child(1) {
        bottom: 5%;
        left: 0;
        transform: rotate(60deg);
        transform-origin: 50% 85%;
    }

        .three-body__dot:nth-child(1)::after {
            bottom: 0;
            left: 0;
            animation: wobble1 var(--uib-speed) infinite ease-in-out;
            animation-delay: calc(var(--uib-speed) * -0.3);
        }

    .three-body__dot:nth-child(2) {
        bottom: 5%;
        right: 0;
        transform: rotate(-60deg);
        transform-origin: 50% 85%;
    }

        .three-body__dot:nth-child(2)::after {
            bottom: 0;
            left: 0;
            animation: wobble1 var(--uib-speed) infinite calc(var(--uib-speed) * -0.15) ease-in-out;
        }

    .three-body__dot:nth-child(3) {
        bottom: -5%;
        left: 0;
        transform: translateX(116.666%);
    }

        .three-body__dot:nth-child(3)::after {
            top: 0;
            left: 0;
            animation: wobble2 var(--uib-speed) infinite ease-in-out;
        }

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

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

@keyframes wobble1 {
    0%, 100% {
        transform: translateY(0%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translateY(-66%) scale(0.65);
        opacity: 0.8;
    }
}

@keyframes wobble2 {
    0%, 100% {
        transform: translateY(0%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translateY(66%) scale(0.65);
        opacity: 0.8;
    }
}

.modal.fade,
.modal-backdrop {
    background: #00000033 !important;
    backdrop-filter: blur(3px) !important;
}

    .modal.fade.show.in {
        margin-top: 0px;
    }

.required-validation .dx-label span::after {
    content: " *";
    color: #f44336;
}

.dx-row.dx-freespace-row {
    display: none;
}

.validation-text {
    font-size: var(--fs-13) !important;
    min-height: var(--fs-24) !important;
}

.button-right-row {
    text-align: right;
    margin-bottom: 5px;
    margin-top: 15px;
}

.icon-card-header {
    margin: -9px 5px -5px -13px;
    height: 30px;
}

.modal-header {
    padding: 10px;
}

    .modal-header .form-title {
        font-size: var(--fs-16);
        margin-bottom: 0px !important;
    }

.avatar-md {
    --cui-avatar-width: 2.0rem;
    --cui-avatar-height: 2.0rem;
    --cui-avatar-font-size: var(--fs-8);
    --cui-avatar-status-width: 0.7rem;
    --cui-avatar-status-height: 0.7rem;
}

/*2024-12-16*/

a {
    cursor: pointer;
}

.form-control.otp-input {
    margin: 5px;
    text-align: center;
}

.dx-checkbox-container {
    align-items: normal;
}

.dx-checkbox-icon {
    border: 2px solid #D9E0F8;
}

.sidebar-header .btn-close {
    margin-left: 10px;
}

/*CSS RESPONSIVE*/

@media (min-width: 481px) {
    .modal-dialog.dialog-noti {
        margin-top: 40%;
    }
}

@media (min-width: 768px) {
    .modal-dialog.dialog-noti {
        margin-top: 30%;
    }
}

@media (min-width: 992px) {
    .modal-dialog.dialog-noti {
        margin-top: 20%;
    }
}

@media (min-width: 1200px) {
    .modal-dialog.dialog-noti {
        margin-top: 10%;
    }
}

.navigation-sidebar {
    width: var(--customer-portal-sidebar-width);
    background-color: #f8f9fa; /* màu nền ví dụ */
    min-height: 100vh; /* chiếm toàn bộ chiều cao */
    z-index: 1; /* để đè lên nếu cần */
}

.sidebar:not(.sidebar-end) ~ * {
    --cui-sidebar-occupy-start: var(--customer-portal-sidebar-width);
}

.sidebar-narrow-unfoldable:not(.sidebar-end) ~ * {
    --cui-sidebar-occupy-start: 4rem;
}

@media (max-width: 991.98px) {
    /*.sidebar:not(.sidebar-end):not(.show) {
        margin-left: calc(-1 * var(--cui-sidebar-width));
    }*/

    :root {
        --customer-portal-sidebar-width: 350px;
    }

    .background-image {
        left: 0;
    }
}

/* Item cơ bản */
.policy-status-item {
    padding: 4px 8px;
    border-radius: 20px;
    font-size: var(--fs-14) !important;
    font-family: ShinhanBold !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    max-width: fit-content;
    /*text-align: center;*/
}

    .policy-status-item .status-icon {
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        background-size: cover;
        flex-shrink: 0;
        align-self: center;
    }

    .policy-status-item.green {
        color: #2EB553;
        background: #EBFAEF;
        border: 1px solid #B3EBC5;
    }

        .policy-status-item.green::before {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            background-image: url('/images/icon/policy-list/policy-status-green.svg');
            background-size: cover;
            flex-shrink: 0;
            align-self: center;
        }

    .policy-status-item.red {
        color: #FC3535;
        background: #FFF1F0;
        border: 1px solid #FFA39E;
    }

        .policy-status-item.red::before {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            background-image: url('/images/icon/policy-list/policy-status-red.svg');
            background-size: cover;
            flex-shrink: 0;
            align-self: center;
        }

    .policy-status-item.purple {
        color: #7D5CCA;
        background: #F0EAFF;
        border: 1px solid #CAB6FD;
    }

        .policy-status-item.purple::before {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            background-image: url('/images/icon/policy-list/policy-status-purple.svg');
            background-size: cover;
            flex-shrink: 0;
            align-self: center;
        }

    .policy-status-item.orange {
        color: #FA972D;
        background: #FEF7E8;
        border: 1px solid #FED99B;
    }

        .policy-status-item.orange::before {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            background-image: url('/images/icon/policy-list/policy-status-orange.svg');
            background-size: cover;
            flex-shrink: 0;
            align-self: center;
        }

    .policy-status-item.grey {
        color: #8C8C8C;
        background: #F5F5F5;
        border: 1px solid #EBEBED;
    }

        .policy-status-item.grey::before {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            background-image: url('/images/icon/policy-list/policy-status-grey.svg');
            background-size: cover;
            flex-shrink: 0;
            align-self: center;
        }

    .policy-status-item.yellow {
        color: #EABD09;
        background: #FEF7E8;
        border: 1px solid #EABD09;
    }

        .policy-status-item.yellow::before {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            background-image: url('/images/icon/policy-list/policy-status-yellow.svg');
            background-size: cover;
            flex-shrink: 0;
            align-self: center;
        }

.text-primary-color {
    color: var(--primary-color) !important;
}

.alert-error {
    display: flex;
    align-items: center; /* Căn giữa theo chiều dọc */
    border: 1px solid #f44336;
    background-color: #F7F8F8;
    color: #f44336;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: var(--fs-14);
    font-family: ShinhanMedium;
}

    .alert-error .icon {
        background-color: #f44336;
        color: white;
        border-radius: 50%;
        width: 1.5rem !important;
        height: 1.5rem !important;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        flex-shrink: 0;
    }

    .alert-error p {
        margin: 0;
        line-height: 1.4;
    }

.otp-text {
    flex: 1 1 auto;
    min-width: 0; /* cho phép co lại trong flex */
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: ShinhanBold;
    font-weight: 700;
    font-size: var(--fs-16);
    color: #33394C;
    margin-left: 8px;
}

.btn-otp-method {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background-color: white;
    text-align: left;
    padding: 16px;
    border-radius: 8px;
    height: 64px;
    border: 1px solid #DEE7FF;
    margin: 10px 0px;
}

@media (max-width: 400px) {
    .btn-otp-method {
        padding: 12px 14px;
    }

        /*.btn-otp-method .otp-text {
            font-size: var(--fs-14);
        }*/
}

@media (max-width: 576px) {
    .btn-otp-method .otp-text {
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* kẹp 2 dòng */
        word-break: break-word; /* email/chuỗi dài vẫn ngắt được */
        overflow-wrap: anywhere;
    }

    .mb-4 {
        margin-bottom: 0.75rem !important;
    }

    .container-fluid.g-0 .row {
        --bs-gutter-x: 0 !important;
    }
}

.otp-inputs {
    display: flex;
    gap: 10px;
    max-width: 100%;
}

    .otp-inputs input.otp {
        width: 60px;
        height: 80px;
        text-align: center;
        font-size: var(--fs-20);
        border-radius: 8px;
        outline: none;
        transition: border-color 0.2s;
        border: 1px solid #809DFF
    }

        .otp-inputs input.otp:focus {
            border: 1px solid var(--primary-color);
        }

/* Mobile */
@media (max-width: 480px) {
    .otp-inputs {
        gap: var(--otp-gap, 8px); /* giảm gap trên mobile */
    }

        .otp-inputs input.otp {
            /* 6 ô: (100% - 5*gap) / 6  → luôn vừa màn hình */
            width: calc((100% - (6 - 1) * var(--otp-gap, 8px)) / 6);
            /* chiều cao đàn hồi, không bé hơn 52px, không lớn hơn 80px */
            height: clamp(52px, 14vw, 80px);
            /* font-size co giãn, giữ >= 16px để tránh iOS auto-zoom */
            font-size: clamp(16px, 4.5vw, var(--fs-20, 20px));
        }
}

/* Rất hẹp (≤360px): giảm gap thêm chút cho chắc ăn */
@media (max-width: 360px) {
    .otp-inputs {
        --otp-gap: 6px;
    }
}

.otp-error {
    border: 1px solid var(--Error-main, #FC3535) !important;
}

.otp-wrong-text {
    font-family: ShinhanMedium;
    font-size: var(--fs-14) !important;
    color: #FC3535 !important;
    margin-top: 4px;
}

.resend-text {
    font-family: ShinhanMedium;
    font-size: var(--fs-18);
    color: #33394C;
    font-weight: 500;
    margin-bottom: 16px;
}

    .resend-text a {
        font-family: ShinhanBold;
        text-decoration: none;
        font-weight: 700;
        cursor: pointer;
        font-weight: 500;
        transition: color 0.3s;
    }

        .resend-text a.disabled {
            color: #ADB0B7;
            pointer-events: none; /* Ngăn click */
            cursor: default;
        }

        .resend-text a.enabled {
            color: var(--primary-color);
        }

.text-sh-light {
    font-family: ShinhanLight;
}

.text-sh-medium {
    font-family: ShinhanMedium;
}

.text-sh-bold {
    font-family: ShinhanBold;
}

.text-size-18 {
    font-size: var(--fs-18) !important;
}

.text-size-16 {
    font-size: var(--fs-16) !important;
}

.purple-title {
    font-family: ShinhanBold;
    font-weight: 700;
    font-size: var(--fs-32);
    color: var(--primary-color);
}

.step-indicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.step {
    flex: 1;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    color: #CAD9FF;
    position: relative;
}

    .step.active {
        color: var(--primary-color);
    }

    .step::after {
        content: '';
        display: block;
        height: 9px;
        border-radius: 50px;
        background-color: #CAD9FF;
        margin-top: 5px;
        transition: background-color 0.3s;
    }

    .step.active::after {
        background-color: var(--primary-color);
    }

    .step:first-child {
        padding-left: 0;
    }

    .step:last-child {
        padding-right: 0;
    }

.step-content {
    display: none;
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.4s ease;
}

    .step-content.active {
        display: block;
        opacity: 1;
        transform: translateX(0);
    }

.text-primary {
    --text-opacity: 1;
    color: rgba(var(--primary-rgb), var(--text-opacity)) !important;
}

.secondary-text {
    font-family: ShinhanMedium;
    font-weight: 500;
    font-size: var(--fs-20);
    color: #33394C;
    margin-bottom: 32px;
}

input[disabled] {
    background-color: var(--invert-color) !important;
}

.accordion-button {
    box-shadow: none !important;
}

.modal-content {
    background: #FFFFFF !important;
}

.error-mascot-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 8px 0px;
}

    .error-mascot-block .mascot {
        width: 140px;
        height: 175px;
    }

    .error-mascot-block .error-text {
        font-family: ShinhanMedium;
        font-size: var(--fs-16);
        text-align: center;
        color: #666A79;
    }

/* Thông báo đăng xuất cần cao hơn một chút */
.modal-high-priority {
    z-index: 1100 !important;
}

    .modal-high-priority + .modal-backdrop {
        z-index: 1099 !important;
    }

.mb-32 {
    margin-bottom: 2rem !important;
}

.toggle-eye {
    cursor: pointer;
    margin-left: 8px;
    width: 24px;
    height: 24px;
    /*    color: #666;*/
}

.toggleable {
    display: inline-block;
    min-width: 90px;
    max-width: 100%;
    white-space: nowrap;
}

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before {
    content: url("/images/icon/sort-up.svg");
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    margin-right: 4px; /* chỉnh khoảng cách so với text */
}

table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    content: url("/images/icon/sort-down.svg");
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    margin-left: 4px; /* chỉnh khoảng cách so với text */
}

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    opacity: 0.4;
}

table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    opacity: 0.9;
}

/* ép header có scrollbar dọc (giả) để match chiều rộng với body */
/*.dt-scroll-headInner {
    overflow-y: scroll; 
    overflow-x: hidden;
}
    .dt-scroll-headInner::-webkit-scrollbar {
        background-color: #e3d9ff;
        border-bottom: 1px solid var(--border-button-invert-color);
    }*/

.dt-scroll-body::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.dt-scroll-body::-webkit-scrollbar-track {
    background: #E5E4E4;
    border-radius: 16px;
}

.dt-scroll-body::-webkit-scrollbar-thumb {
    background: #ADB0B7;
    border-radius: 16px;
}

div.dt-scroll div.dtfc-top-blocker, div.dt-scroll div.dtfc-bottom-blocker, div.dtfh-floatingparent div.dtfc-top-blocker, div.dtfh-floatingparent div.dtfc-bottom-blocker {
    background: #e3d9ff;
    border-bottom: 1px solid var(--border-button-invert-color) !important;
    z-index: -1;
}

/*.dt-scroll-headInner,
.table:not(.dtfc-scrolling-end):not(.dtfc-scrolling-right):not(.dtfc-scrolling-start):not(.dtfc-scrolling-left)
{
    width: 100% !important;
}*/


.breadcrumb-text {
    font-family: ShinhanMedium;
    font-size: var(--fs-14);
    color: #404557;
}

    .breadcrumb-text.detail {
        margin-left: 0px;
        cursor: pointer;
    }

.breadcrumb-link {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

    .breadcrumb-link.current {
        color: var(--primary-color);
        cursor: default;
    }

.header-row {
    display: flex;
    align-items: center;
}

    .header-row svg,
    .header-row img {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

.page-link {
    color: var(--primary-color);
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.force-wrap {
    white-space: normal; /* cho phép xuống dòng */
    overflow-wrap: anywhere; /* bẻ ở bất kỳ đâu nếu cần */
    word-break: break-all; /* fallback: bẻ giữa ký tự */
}

.radio-option { 
    display: flex;
}

.form-check-input:checked:disabled {
    border-color: #ADB0B7;
    background-color: #ADB0B7;
}