/* Extracted from Home/KeyActive.cshtml. */
input[type=text] {
        padding: 12px 20px;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 12px 30px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
    }

    canvas {
        /*prevent interaction with the canvas*/
        pointer-events: none;
    }

/* Additional extracted block. */
.key-active-page {
        display: block;
        width: min(800px, calc(100% - 24px)) !important;
        height: auto !important;
        min-height: 450px;
        margin: 24px auto 36px !important;
        padding: 26px 30px !important;
        border: 1px solid #dce7f5;
        border-radius: 14px;
        background: linear-gradient(135deg, #f5f9ff, #fff 58%, #eef5ff);
        box-shadow: 0 10px 30px rgba(34, 78, 145, .14);
        color: #24324a;
        font-family: Roboto, Arial, sans-serif;
    }

    .key-active-page h3 {
        margin: 0 0 20px;
        padding: 13px 16px;
        border-radius: 0 10px 10px 0;
        background: linear-gradient(90deg, #eaf2ff, rgba(234, 242, 255, .25));
        color: #173b78;
        font-size: clamp(21px, 2.5vw, 29px);
        font-weight: 700;
    }

    .key-active-page .form-control {
        min-height: 44px;
        border: 1px solid #cbdaf2;
        border-radius: 9px;
        box-shadow: none;
        font-family: Roboto, Arial, sans-serif;
    }

    .key-active-page .form-control:focus,
    .key-active-page .captcha-input:focus {
        border-color: #5590ee;
        box-shadow: 0 0 0 3px rgba(85, 144, 238, .14);
        outline: 0;
    }

    .key-active-page .captcha-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 130px;
        height: 64px;
        margin: 14px 0 10px;
        border: 1px dashed #8ab2ed;
        border-radius: 9px;
        background: #fff;
        box-shadow: 0 4px 12px rgba(34, 78, 145, .1);
    }

    .key-active-page .captcha-box canvas { max-width: 100%; }
    .key-active-page .captcha-input { width: min(240px, 100%); }
    .key-active-page .btn-primary {
        min-height: 44px;
        margin: 10px 0 0 8px;
        padding: 10px 22px;
        border: 0;
        border-radius: 9px;
        background: linear-gradient(135deg, #2457c5, #4385ed);
        box-shadow: 0 6px 14px rgba(36, 87, 197, .24);
        font-weight: 600;
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .key-active-page .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 9px 19px rgba(36, 87, 197, .32);
    }

    .key-active-page #MaLoi,
    .key-active-page #sKey {
        display: block;
        margin: 10px 0;
        padding: 10px 12px;
        border-radius: 8px;
        background: #fff1f1;
        color: #c0392b !important;
        line-height: 1.5;
    }

    .key-active-notes {
        margin-top: 22px;
        padding: 16px 18px;
        border: 1px solid #dce7f5;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 5px 14px rgba(34, 78, 145, .08);
        color: #68758a;
        line-height: 1.8;
    }

    .key-active-notes b { color: #2457c5; }
    .key-active-notes span { display: block; }

    @media (max-width: 575px) {
        .key-active-page {
            width: calc(100% - 16px) !important;
            min-height: 0;
            margin: 12px auto 24px !important;
            padding: 18px 14px !important;
        }

        .key-active-page .btn-primary { width: 100%; margin: 10px 0 0; }
        .key-active-page .captcha-input { width: 100%; }
        .key-active-notes { padding: 13px 14px; font-size: 14px; }
    }