/* ============================================================
   HOME / STYLE
   ============================================================ */


/* ============================================================
   GLOBAL PAGE SAFETY
   ============================================================ */

main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

section {
    width: 100%;
    max-width: 100%;
}

button,
input,
select,
textarea {
    max-width: 100%;
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
    width: 100%;

    padding:
        15px
        24px
        25px;

    background:
        radial-gradient(
            circle at 85% 10%,
            #ffd9e7 0,
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #fff 0,
            #fff8fa 100%
        );

    overflow: visible;
}

.hero-inner {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 470px);

    gap: 80px;

    align-items: center;
}

.hero-copy {
    width: 100%;
    min-width: 0;

    padding-bottom: 20px;
}

.badge {
    display: inline-flex;

    align-items: center;

    max-width: 100%;

    padding:
        8px
        13px;

    background: var(--light);

    color: var(--pink);

    border-radius: 20px;

    font-size: 12px;

    font-weight: 700;

    margin-bottom: 18px;
}

h1 {
    max-width: 100%;

    font-size: 55px;

    line-height: 1.07;

    letter-spacing: -3px;

    margin:
        0
        0
        22px;

    font-weight: 800;

    overflow-wrap: break-word;
}

h1 span {
    color: var(--pink);
}

.hero-copy p {
    width: 100%;
    max-width: 550px;

    margin:
        0;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.7;
}

.mini-trust {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 25px;

    font-size: 12px;

    color: #777;
}

.mini-trust span {
    display: inline-flex;

    align-items: center;

    max-width: 100%;

    white-space: nowrap;
}


/* ============================================================
   FORM CARD
   ============================================================ */

.loan-card {
    width: 100%;
    min-width: 0;

    background: #fff;

    border:
        1px solid
        #f0dfe5;

    border-radius: 22px;

    padding: 28px;

    box-shadow:
        0 22px 60px
        #b9154a18;

    overflow: visible;
}

.card-title {
    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 22px;
}

.card-title b {
    font-size: 18px;

    font-weight: 700;

    text-align: center;
}


/* ============================================================
   LABEL
   ============================================================ */
label {
    display: block;

    margin: 17px 0 8px;

    color: #3f4145;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;
}


/* ============================================================
   AMOUNT
   ============================================================ */

.amount {
    width: 100%;

    display: flex;

    align-items: flex-end;

    gap: 8px;

    margin-bottom: 12px;

    min-width: 0;
}

.amount strong {
    min-width: 0;

    font-size: 30px;

    letter-spacing: -1px;

    line-height: 1.1;

    overflow-wrap: anywhere;
}

.amount span {
    flex-shrink: 0;

    font-size: 25px;

    color: #000;

    font-weight: 600;

    margin-bottom: 3px;
}


/* ============================================================
   RANGE
   ============================================================ */

input[type="range"] {
    display: block;

    width: 100%;
    max-width: 100%;

    height: 6px;

    margin: 0;

    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;

    border: 0;

    outline: none;

    border-radius: 999px;

    background:
        linear-gradient(
            to right,
            var(--pink) 0%,
            var(--pink) var(--range-progress, 50%),
            #f8c4dc var(--range-progress, 50%),
            #f8c4dc 100%
        );
}


/* ============================================================
   RANGE - CHROME / EDGE / SAFARI
   ============================================================ */

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;

    height: 6px;

    border: 0;

    border-radius: 999px;

    background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    width: 18px;
    height: 18px;

    margin-top: -6px;

    background: #fff;

    border:
        3px solid
        var(--pink);

    border-radius: 50%;

    box-shadow:
        0 2px 6px
        rgba(216, 27, 96, .25);

    cursor: grab;
}

input[type="range"]::-webkit-slider-thumb:active {
    cursor: grabbing;

    transform: scale(1.08);
}


/* ============================================================
   RANGE - FIREFOX
   ============================================================ */

input[type="range"]::-moz-range-track {
    width: 100%;

    height: 6px;

    border: 0;

    border-radius: 999px;

    background: #f8c4dc;
}

input[type="range"]::-moz-range-progress {
    height: 6px;

    border-radius: 999px;

    background: var(--pink);
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;

    background: #fff;

    border:
        3px solid
        var(--pink);

    border-radius: 50%;

    box-shadow:
        0 2px 6px
        rgba(216, 27, 96, .25);

    cursor: grab;
}

input[type="range"]::-moz-range-thumb:active {
    cursor: grabbing;
}


/* ============================================================
   RANGE LABEL
   ============================================================ */

.range-label {
    width: 100%;

    display: flex;

    justify-content: space-between;

    gap: 10px;

    color: #aaa;

    font-size: 13px;

    margin-top: 5px;
}

.range-label span {
    min-width: 0;

    white-space: nowrap;
}


/* ============================================================
   HÌNH THỨC VAY
   ============================================================ */

.asset-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 8px;
}

.asset {
    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;
    min-width: 0;

    height: 44px;

    padding:
        0
        12px;

    border:
        1px solid
        var(--line);

    border-radius: 10px;

    background: #fff;

    color: #333;

    cursor: pointer;

    text-align: left;

    font: inherit;

    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

.asset:hover {
    border-color: #ffb3ca;

    background: #fffafd;
}

.asset.active {
    border-color: #ff8db3;

    background: #fff5f8;

    box-shadow:
        0 0 0 2px
        #ffe0ea;
}

.asset-icon {
    width: 24px;
    height: 24px;

    flex:
        0 0
        24px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.asset-icon svg {
    width: 24px;
    height: 24px;

    margin-bottom: 4px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.asset-name {
    min-width: 0;

    font-size: 14px;

    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ============================================================
   SEARCH SELECT
   ============================================================ */

.search-select {
    width: 100%;
    max-width: 100%;

    height: 48px;

    position: relative;

    border:
        1px solid
        #dedfe3;

    background: #fff;

    border-radius: 11px;

    display: flex;

    align-items: center;

    padding:
        0
        13px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;

    min-width: 0;
}

.search-select:focus-within {
    border-color: #ff78a3;

    box-shadow:
        0 0 0 3px
        #fff0f5;
}

.search-select .search-icon {
    flex:
        0 0
        auto;

    font-size: 22px;

    color: #aaa;

    margin-right: 8px;
}

.search-select input {
    width: 100%;
    min-width: 0;

    height: 100%;

    padding: 0 !important;

    border: 0 !important;

    outline: 0 !important;

    box-shadow: none !important;

    background: transparent !important;

    font: inherit;

    font-size: 13px;
}

.search-select input::placeholder {
    color: #aaa;

    opacity: 1;
}

.chevron {
    color: #aaa;

    flex-shrink: 0;
}


/* ============================================================
   DROPDOWN
   ============================================================ */

.dropdown {
    display: none;

    position: absolute;

    top: 52px;

    left: 0;
    right: 0;

    width: 100%;

    background: #fff;

    border:
        1px solid
        #eee;

    border-radius: 12px;

    box-shadow:
        0 14px 35px
        #00000016;

    max-height: 220px;

    overflow-x: hidden;

    overflow-y: auto;

    z-index: 100;

    padding: 5px;

    -webkit-overflow-scrolling: touch;
}

.search-select.open .dropdown {
    display: block;
}

.option {
    width: 100%;

    padding:
        11px
        12px;

    border-radius: 8px;

    font-size: 12px;

    cursor: pointer;

    overflow-wrap: break-word;
}

.option:hover {
    background: #fff0f5;

    color: var(--pink);
}

.disabled {
    background: #f6f6f7;
}

.search-select.disabled {
    cursor: not-allowed;
}

.search-select.disabled input {
    cursor: not-allowed;
}


/* ============================================================
   RESULT
   ============================================================ */

#result {
    width: 100%;

    margin-top: 13px;
}

.no-result {
    width: 100%;

    padding: 12px;

    margin-top: 10px;

    background: #fff5f8;

    color: #777;

    border-radius: 10px;

    font-size: 13px;

    overflow-wrap: break-word;
}


/* ============================================================
   HOW IT WORKS
   ============================================================ */

.how {
    width: 100%;

    padding:
        55px
        24px;

    background: #fff;

    overflow: hidden;
}

.section-title {
    text-align: center;

    font-size: 22px;

    font-weight: 800;

    margin-bottom: 30px;
}

.how-grid {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 25px;
}

.how-grid div {
    min-width: 0;

    padding: 22px;

    border:
        1px solid
        #f0e5e9;

    border-radius: 16px;

    background: #fff;
}

.how-grid b {
    display: block;

    color: var(--pink);

    font-size: 12px;
}

.how-grid strong {
    display: block;

    margin:
        8px
        0;

    font-size: 14px;
}

.how-grid span {
    display: block;

    color: #999;

    font-size: 12px;

    overflow-wrap: break-word;
}


/* ============================================================
   FORM PAGE
   ============================================================ */

.form-page {
    width: 100%;

    padding:
        60px
        16px;

    min-height: 70vh;

    overflow: hidden;
}

.register-card {
    width: 100%;
    max-width: 520px;

    margin:
        0
        auto;
}

h2 {
    margin:
        0
        0
        8px;

    font-size: 24px;

    line-height: 1.25;

    overflow-wrap: break-word;
}

.muted {
    font-size: 12px;

    color: #888;
}


/* ============================================================
   NORMAL FORM INPUT
   ============================================================ */

input:not([type="range"]),
select,
textarea {
    width: 100%;
    max-width: 100%;

    min-width: 0;

    padding: 13px;

    border:
        1px solid
        var(--line);

    border-radius: 10px;

    font: inherit;

    font-size: 13px;

    outline: none;

    background: #fff;

    box-shadow: none;

    appearance: none;
    -webkit-appearance: none;
}

input:not([type="range"]):focus,
select:focus,
textarea:focus {
    border-color: #ff78a3;

    box-shadow:
        0 0 0 3px
        #fff0f5;
}

textarea {
    min-height: 100px;

    resize: vertical;
}


/* ============================================================
   FORM FIELD
   ============================================================ */

.field {
    width: 100%;
    min-width: 0;

    margin-bottom: 16px;
}

.field label {
    margin:
        0
        0
        7px;
}


/* ============================================================
   TABLET / LAPTOP NHỎ
   ============================================================ */

@media (max-width: 1100px) {

    .hero {
        padding-left: 24px;
        padding-right: 24px;
    }

    .hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(380px, 430px);

        gap: 40px;
    }

    h1 {
        font-size: 48px;

        letter-spacing: -2.5px;
    }

    .hero-copy p {
        font-size: 15px;
    }

    .loan-card {
        padding: 24px;
    }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .hero {
        padding-top: 40px;

        padding-bottom: 50px;
    }

    .hero-inner {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .hero-copy {
        padding: 0;

        max-width: 700px;
    }

    h1 {
        font-size: 46px;
    }

    .hero-copy p {
        max-width: 650px;
    }

    .loan-card {
        width: 100%;
        max-width: 520px;

        margin:
            0
            auto;
    }

    .how-grid {
        grid-template-columns: 1fr;

        max-width: 600px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .hero {
        padding:
            32px
            16px
            40px;
    }

    .hero-inner {
        width: 100%;

        gap: 28px;
    }

    .hero-copy {
        width: 100%;

        max-width: 100%;
    }

    .badge {
        font-size: 11px;

        padding:
            7px
            11px;

        margin-bottom: 14px;
    }

    h1 {
        width: 100%;

        font-size: 38px;

        line-height: 1.1;

        letter-spacing: -1.8px;

        margin-bottom: 16px;
    }

    .hero-copy p {
        width: 100%;

        font-size: 14px;

        line-height: 1.6;

        margin: 0;
    }

    .mini-trust {
        display: block;

        margin-top: 18px;

        font-size: 11px;
    }

    .mini-trust span {
        display: block;

        margin-bottom: 7px;

        white-space: normal;
    }


    /* --------------------------------------------------------
       LOAN CARD
       -------------------------------------------------------- */

    .loan-card {
        width: 100%;
        max-width: 100%;

        padding: 20px;

        border-radius: 18px;
    }

    .card-title {
        margin-bottom: 18px;
    }

    .card-title b {
        font-size: 16px;
    }


    /* --------------------------------------------------------
       LABEL
       -------------------------------------------------------- */

    label {
        margin-top: 15px;
        margin-bottom: 8px;

        font-size: 14px;
        font-weight: 600;
    }


    /* --------------------------------------------------------
       AMOUNT
       -------------------------------------------------------- */

    .amount {
        width: 100%;

        gap: 6px;
    }

    .amount strong {
        font-size: 26px;

        overflow-wrap: anywhere;
    }

    .amount span {
        font-size: 18px;

        margin-bottom: 3px;
    }

    .range-label {
        font-size: 11px;
    }


    /* --------------------------------------------------------
       ASSET
       -------------------------------------------------------- */

    .asset-grid {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .asset {
        height: 46px;

        padding:
            0
            12px;
    }

    .asset-name {
        font-size: 13px;
    }


    /* --------------------------------------------------------
       SEARCH
       -------------------------------------------------------- */

    .search-select {
        width: 100%;

        height: 46px;
    }

    .search-select input {
        font-size: 13px;
    }

    .dropdown {
        top: 50px;

        max-height: 210px;
    }


    /* --------------------------------------------------------
       HOW
       -------------------------------------------------------- */

    .how {
        padding:
            40px
            16px;
    }

    .section-title {
        font-size: 20px;

        margin-bottom: 22px;
    }

    .how-grid {
        width: 100%;

        gap: 12px;
    }

    .how-grid div {
        padding: 18px;
    }


    /* --------------------------------------------------------
       FORM
       -------------------------------------------------------- */

    .form-page {
        padding:
            40px
            16px;
    }

    .register-card {
        width: 100%;
    }

    h2 {
        font-size: 22px;
    }

}


/* ============================================================
   ĐIỆN THOẠI RẤT NHỎ
   ============================================================ */

@media (max-width: 380px) {

    .hero {
        padding-left: 12px;

        padding-right: 12px;
    }

    h1 {
        font-size: 34px;

        letter-spacing: -1.5px;
    }

    .loan-card {
        padding: 16px;
    }

    .amount strong {
        font-size: 23px;
    }

    .amount span {
        font-size: 16px;
    }

    .asset {
        height: 44px;

        padding:
            0
            10px;
    }

    .asset-icon {
        width: 22px;
        height: 22px;

        flex-basis: 22px;
    }

    .asset-icon svg {
        width: 22px;
        height: 22px;
    }

    .asset-name {
        font-size: 12px;
    }

    .search-select {
        height: 44px;
    }

    .search-select .search-icon {
        font-size: 20px;

        margin-right: 6px;
    }

    .amount {
        gap: 4px;
    }

}


/* ============================================================
   INPUT SAFETY - MOBILE KEYBOARD / ZOOM
   ============================================================ */

@media (max-width: 600px) {

    input:not([type="range"]),
    select,
    textarea {
        font-size: 16px;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }

}