.custom-select {
    position: relative;
    display: inline-block;
}

.custom-select select {
    padding-right: 30px; /* tạo khoảng trống bên phải cho icon */
    appearance: none; /* ẩn icon mặc định */
    -webkit-appearance: none;
    -moz-appearance: none;
}

.custom-select select:invalid {
    color: #9F9F9F !important;
}

.custom-select::after {
    content: "▼"; /* hoặc dùng hình ảnh */
    position: absolute;
    right: 22px; /* chỉnh khoảng cách icon */
    top: 47%;
    transform: translateY(-50%);
    pointer-events: none;
}

.header-right-sp {
    visibility: hidden;
}

.content-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    align-self: stretch;
    max-width: 872px;
    width: 100%;
    margin: 0 auto;
}

.content-form {
    display: flex;
    padding: 80px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFF;
    max-width: 872px;
    width: 100%;
}

.form-title {
    align-self: stretch;
    color: #2D3133;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 120% */
}

.form-title-sub {
    align-self: stretch;
    color: #2D3133;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.form-group-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    align-self: stretch;
    max-width: 672px;
    width: 100%;
    margin: 0 auto;
}

.form-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #1769F4;
}

.form-group-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    align-self: stretch;
}

.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    align-self: stretch;
}

.form-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.form-row {
    display: flex;
    align-items: stretch;
    gap: 24px;
    align-self: stretch;
    flex: 1;
}

.form-row-checkbox {
    flex-direction: column;
    gap: 0px;
}

.form-row-checkbox .parsley-errors-list.filled {
    margin-top: 4px;
}

.form-item {
    display: flex; 
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
}

.form-item-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-item-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-item-label label {
    color: #2D3133;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
}

.form-item-label .chip-required {
    display: flex;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 140px;
    background: #EF7F6B;
}

.form-item-label .chip-required span {
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
}

.form-item-input {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    flex: 1;
}

.form-item-input input, .form-item-input .input {
    display: flex;
    padding: 8px 16px;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 4px;
    background: #F2F2F2;
    border: none;
    width: 100%;
    color: #2D3133;
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.form-item-input .input {
    flex: 1;
    word-break: break-all;
}

.form-item-input input::placeholder {
    color: #9F9F9F;
}

.form-item-input-checkbox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: flex-start;
    align-self: stretch;
}

.form-item-input-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-item-input-checkbox-item input {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.form-item-input-checkbox-item label {
    color: #2D3133;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    word-break: break-word;
    white-space: normal;
}

.form-item-input-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    border: 1px solid #B3B3B3;
    padding: 16px 8px 16px 16px;
    height: 400px;
    border-radius: 8px;
    background: #F8F8F8;
}

.form-item-input-area-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
    align-self: stretch;
    color: #1A1A1A;
    font-family: "Noto Sans JP";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
    overflow-y: auto;
    height: 368px;
    padding-right: 5px;
    word-break: break-all;
}

.form-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-items: center;
    gap: 20px;
    margin-top: -40px;
}

.form-footer-checkbox {
    display: flex;
    width: 158px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.form-footer-checkbox .checkbox-custom  {
    gap: 16px;
}

.form-footer-checkbox .checkbox-custom label {
    color: #2D3133;
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}

.form-footer-checkbox .checkbox-custom input:disabled + label {
    color: #9F9F9F;
}

.form-footer-button {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-submit {
    display: flex;
    min-width: 200px;
    padding: 12px 16px;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    border-radius: 300px;
    background: #3B4043;
    border: none;
    color: #FFF;
}

.btn-submit span {
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
    width: 140px;
}

.btn-submit svg {
    width: 24px;
    height: 24px;
}

.btn-submit:disabled {
    background: #E4E5E6;
    color: #9F9F9F;
    cursor: not-allowed;
}

.btn-submit:disabled svg path {
    fill: #9F9F9F;
}

.form-footer-confirm {
    display: flex;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    justify-content: center;
}

.form-footer-confirm .btn-back {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border-radius: 300px;
    border: 2px solid #3B4043;
    background: #FFF;
    color: #3B4043;
    min-width: 200px;
    padding: 10px 16px;
    gap: 4px;
    text-decoration: none;
}

.form-footer-confirm .btn-back span {
    flex: 1 0 0;
    color: #2D3133;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.form-footer-confirm .btn-next {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border-radius: 300px;
    border: 2px solid #3B4043;
    background: #3B4043;
    color: #fff;
    min-width: 200px;
    padding: 10px 16px;
    gap: 4px;
}

.form-footer-confirm .btn-next span {
    flex: 1 0 0;
    color: #fff;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
}

.content-panel {
    display: flex;
    padding: 80px 100px;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    align-self: stretch;
    border-radius: 16px;
    background: #FFF;
}

.content-panel-content {
    align-self: stretch;
    color: #2D3133;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.spinner-custom {
    display: inline-block;
    animation: spin 1s linear infinite;
}
  
@keyframes spin {
    100% {
      transform: rotate(360deg);
    }
}

.form-item-badge-container {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 8px;
    align-self: stretch;
    flex-wrap: wrap;
}

.form-item-badge {
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: #F2F2F2;
    color: #2D3133;
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    word-break: break-word;
    white-space: normal;
}

.form-item-badge-another {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    border-radius: 4px;
    padding: 8px 16px;
    justify-content: space-between;
    align-self: stretch;
    background: #F2F2F2;
    flex: 1 0 0;
    color: #2D3133;
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    word-break: break-word;
    white-space: normal;
}

.form-item-license-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.form-item-license-item {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 8px;
    align-self: stretch;
    flex-wrap: wrap;
}

.form-item-license-line {
    width: 100%;
    height: 1px;
    background: #E4E5E6;
}

.form-item-input-attribute {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    align-items: flex-start;
    width: 100%;
}
.form-item-input-attribute-choose-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.form-item-input-attribute-choose-container .parsley-errors-list.filled {
    width: max-content;
}

.form-item-input-attribute-choose {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
}

.form-item-input-attribute-choose input[type=radio], .form-item-input-attribute-choose input[type=checkbox] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.form-item-input-attribute-choose label {
    color: #1E1E1E;
    /* Body Base */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
}

.form-item-input-attribute-comment {
    display: flex;
    padding: 8px 16px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 4px;
    background: #F2F2F2;
    color: #2D3133;
    /* Body/M */
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    border: none;
}

.form-item-input-work-type-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

.form-item-input-work-type-item {
    display: flex;
    padding-left: 10px;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.form-item-input-work-type-item-select {
    display: flex;
    width: 300px;
    align-items: center;
    gap: 8px;
}

.form-item-input-work-type-item-select input[type=checkbox] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.form-item-input-work-type-item-select label {
    color: #1E1E1E;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
}

.form-item-input-work-type-item-info {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    width: 50%;
}

.form-item-input-work-type-item-info select {
    display: flex;
    width: 100px;
    align-items: center;
    gap: 16px;
    border: none;
    height: 40px;
    background-position: right 16px top 40%;
}

.form-item-input-work-type-item-info input {
    display: flex;
    height: 40px;
    padding: 8px 16px;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 4px;
    background: #F2F2F2;
    color: #2D3133;
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    border: none;
    max-width: 180px;
}

.swal-internal-error {
    padding: 32px 80px;
    gap: 8px;
    width: 100%;
    max-width: 530px;
    border-radius: 8px;;
}

.swal-internal-error .swal2-title {
    color: #2D3133;
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
}

.swal-internal-error .swal2-confirm {
    background: #3B4043;
    height: 48x;
    margin-bottom: 20px;
}

.swal-internal-error-content {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
    gap: 4px;
}

.swal-internal-error-content svg {
    width: 20px;
    height: 20px;
}

.swal-internal-error-content span {
    color: #2D3133;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
}

.choose-work-type-check-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: flex-start;
    align-self: stretch;
}

.form-item-input-work-type-container-custome {
    align-self: stretch;
}

#form-item-input-work-type-check-error .parsley-errors-list.filled li,
#form-item-input-main-attribute-error .parsley-errors-list.filled li,
#form-item-input-attribute-error .parsley-errors-list.filled li,
#form-item-input-work-type-kind-error .parsley-errors-list.filled li,
#form-item-input-work-type-license-no-error .parsley-errors-list.filled li,
#form-item-input-work-type-id .parsley-errors-list.filled li {
    margin-top: 16px;
}

.form-item-input-work-type-container-custome .parsley-errors-list-container:nth-child(1) .parsley-errors-list.filled li {
    margin-top: 0px!important;
}

.form-item-input-work-type-container-custome .parsley-errors-list-container:nth-child(2) .parsley-errors-list.filled li {
    margin-bottom: 16px!important;
}

@media (max-width: 919px) {
    .form-item-input-work-type-item {
        padding-left: 0px;
        flex-direction: column;
        align-items: flex-start;
    }

    .form-item-input-work-type-item-select {
        width: 100%;
    }

    .form-item-input-work-type-item-info {
        width: 100%;
        padding-left: 24px;
    }

    .form-item-input-work-type-item-info input {
        flex: 1;
        max-width: unset;
        min-width: 0;
    }
}

@media (max-width: 767px) {
    .swal-internal-error {
        padding: 16px;
    }

    .swal-internal-error .swal2-confirm {
        margin-bottom: 0px;
    }

    .content {
        padding: 0px;
    }

    .content .content-top {
        display: none;
    }

    .content-form {
        padding: 40px 16px;
        border-radius: 0px;
    }

    .form-footer {
        margin-top: 8px;
    }

    .form-footer-checkbox {
        margin-top: 0px;
    }

    .form-item-input-area {
        height: 464px;
    }

    .form-item-input-area-content {
        height: 432px;
    }

    .form-item-dot {
        display: none;
    }

    .form-footer-confirm .btn-back {
        width: 160px;
        min-width: 160px;
    }

    .form-footer-confirm .btn-back span {
        flex: unset;
    }

    .form-footer-confirm .btn-next {
        width: 160px;
        min-width: 160px;
    }

    .form-footer-confirm .btn-next span {
        flex: unset;
    }

    .content-panel {
        border-radius: 0px;
        padding: 40px 16px;
    }

    .content-header {
        display: none;
    }

    .content-step {
        display: none;
    }

    .content-step-mobile {
        display: flex;
    }

    .form-item-input-attribute-choose-container {
        width: 100%;
    }

    .choose-work-type-check-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .choose-work-type-check-container .form-item-input-attribute-choose-container {
        width: 50%;
    }

    .choose-work-type-check {
        width: 100%;
    }
    
    .form-item-input-checkbox {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 392px) {
    .form-footer-button {
        flex-direction: column;
    }
}