/* ============================================================
   CAWACO - ĐĂNG KÝ GẮN MỚI ĐỒNG HỒ NƯỚC
   CSS độc lập, không cần Bootstrap.
   Toàn bộ selector được giới hạn trong .water-registration-page.
   ============================================================ */

:root {
    --water-primary: #0878d1;
    --water-primary-dark: #045fae;
    --water-primary-soft: #eaf5ff;
    --water-secondary: #29a9ed;
    --water-bg: #eef5fa;
    --water-surface: #ffffff;
    --water-border: #dce6ee;
    --water-border-strong: #bed1df;
    --water-text: #1e2f3d;
    --water-text-soft: #627487;
    --water-danger: #e53935;
    --water-success: #17864b;
    --water-shadow: 0 12px 34px rgba(24, 78, 119, 0.10);
    --water-shadow-soft: 0 5px 18px rgba(24, 78, 119, 0.07);
    --water-radius-lg: 18px;
    --water-radius-md: 13px;
    --water-radius-sm: 9px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--water-bg);
    color: var(--water-text);
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

button,
input,
select,
textarea {
    font: inherit;
}

.water-registration-page {
    min-height: 100vh;
    padding: 20px;
    background: radial-gradient( circle at 10% 0%, rgba(41, 169, 237, 0.09), transparent 28% ), linear-gradient(180deg, #f7fbfe 0%, var(--water-bg) 100%);
}

.registration-shell {
    width: min(1500px, 100%);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(190, 209, 223, 0.75);
    border-radius: var(--water-radius-lg);
    background: var(--water-surface);
    box-shadow: var(--water-shadow);
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

.registration-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 112px;
    overflow: hidden;
    padding: 24px 32px;
    color: #ffffff;
    background: linear-gradient( 130deg, #0866c4 0%, #138ee1 58%, #53b8ee 100% );
}

    .registration-hero::before,
    .registration-hero::after {
        position: absolute;
        content: "";
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.10);
    }

    .registration-hero::before {
        right: 8%;
        bottom: -55px;
        width: 250px;
        height: 120px;
        transform: rotate(-8deg);
    }

    .registration-hero::after {
        right: 2%;
        bottom: -76px;
        width: 340px;
        height: 150px;
        background: rgba(255, 255, 255, 0.07);
        transform: rotate(5deg);
    }

.registration-hero__icon {
    position: relative;
    z-index: 2;
    display: grid;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    place-items: center;
    margin-right: 18px;
    border: 3px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.17);
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.08);
}

    .registration-hero__icon .material-icons {
        font-size: 34px;
    }

.registration-hero__content {
    position: relative;
    z-index: 2;
    min-width: 0;
}

    .registration-hero__content h1 {
        margin: 0 0 7px;
        color: #ffffff;
        font-size: clamp(24px, 3vw, 32px);
        font-weight: 760;
        letter-spacing: -0.02em;
        line-height: 1.2;
    }

    .registration-hero__content p {
        max-width: 760px;
        margin: 0;
        color: rgba(255, 255, 255, 0.92);
        font-size: 14px;
    }

.registration-hero__decoration {
    position: absolute;
    z-index: 1;
    top: 16px;
    right: 55px;
    display: grid;
    width: 200px;
    height: 95px;
    place-items: center;
    opacity: 0.24;
}

    .registration-hero__decoration > span {
        position: absolute;
        bottom: 6px;
        width: 170px;
        height: 35px;
        border: 2px solid #ffffff;
        border-radius: 50%;
    }

    .registration-hero__decoration .material-icons {
        margin-bottom: 18px;
        font-size: 56px;
    }

/* ------------------------------------------------------------
   CHUNG
   ------------------------------------------------------------ */

.registration-content {
    padding: 24px;
}

.required-note {
    margin: 0 0 14px;
    color: var(--water-text-soft);
    font-size: 13px;
    text-align: right;
}

    .required-note strong,
    .required {
        color: var(--water-danger);
    }

.form-section {
    min-width: 0;
    margin-bottom: 14px;
    padding: 18px;
    border: 1px solid var(--water-border);
    border-radius: var(--water-radius-md);
    background: linear-gradient( 180deg, rgba(251, 253, 255, 0.98), rgba(255, 255, 255, 1) );
    box-shadow: var(--water-shadow-soft);
}

.section-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 17px;
}

.section-heading__icon {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: var(--water-primary);
    background: var(--water-primary-soft);
}

    .section-heading__icon .material-icons {
        font-size: 21px;
    }

.section-heading h2 {
    margin: 1px 0 2px;
    color: #0969bd;
    font-size: 17px;
    font-weight: 740;
    line-height: 1.3;
}

.section-heading p {
    margin: 0;
    color: var(--water-text-soft);
    font-size: 12px;
}

/* ------------------------------------------------------------
   GRID
   ------------------------------------------------------------ */

.form-grid {
    display: grid;
    min-width: 0;
    gap: 14px 18px;
}

.form-grid--customer {
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.8fr) minmax(240px, 0.9fr);
}

.form-grid--address {
    grid-template-columns: 0.85fr 1.25fr 1fr;
}

.form-grid--identity {
    grid-template-columns: 1fr 1fr;
}

.form-grid--split {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.form-grid--payment {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.form-grid--confirmation {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr);
    align-items: end;
}
.form-grid--danhbo {
    grid-template-columns: minmax(260px,1.5fr) minmax(180px,1fr) minmax(420px,2fr);

}
.form-grid--dmgb {
    grid-template-columns: repeat(3,minmax(120px,1fr))!important;
}
.form-grid--contact {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.form-grid--dm {
    grid-template-columns: 1fr 1fr;
}
.form-grid--full {
    grid-template-columns: 1fr;
}

.field,
.form-section--equal {
    min-width: 0;
}

.field--full {
    grid-column: 1 / -1;
}

.field--address-road {
    grid-column: span 2;
}

.field label:not(.dataTables_filter label),
.purpose-fieldset legend {
    display: block;
    margin: 0 0 7px;
    color: #35495a;
    font-size: 12px;
    font-weight: 680;
    border: none
}

.purpose-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.table-responsive-custom {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

    .table-responsive-custom table {
        min-width: 1000px;
        width: max-content;
    }
/* ------------------------------------------------------------
   INPUT
   ------------------------------------------------------------ */

.registration-shell .form-control:not(.dataTables_filter input) {
    display: block !important;
    width: 100% !important;
    min-width: 0;
    height: 44px !important;
    padding: 10px 12px;
    border: 1px solid var(--water-border-strong) ;
    border-radius: var(--water-radius-sm);
    outline: none;
    background: #ffffff;
    color: var(--water-text);
    font-size: 13px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

/* Bootstrap Select ẩn select gốc và thay bằng nút dropdown đã được định dạng.
   Quy tắc display chung ở trên không được làm select gốc hiện lại. */
.registration-shell select.form-control.bs-select-hidden,
.registration-shell select.form-control.selectpicker,
.registration-shell select.form-control.show-tick,
.registration-shell .bootstrap-select > select.bs-select-hidden,
.registration-shell .bootstrap-select > select.selectpicker,
.registration-shell .bootstrap-select > select.form-control,
.registration-shell .select-shell > select.form-control {
    display: none !important;
}

textarea.form-control {
    min-height: 86px;
    height: auto;
    resize: vertical;
}

.form-control::placeholder {
    color: #98a8b7;
}

.registration-shell .form-control:hover {
    border-color: #93b7d0!important;
}

.registration-shell .form-control:not(.dataTables_filter input):focus,
.select-shell .form-control:focus{
    border-color: var(--water-primary) !important;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(8, 120, 209, 0.12) !important;
}

.form-control[aria-invalid="true"] {
    border-color: var(--water-danger);
    background: #fffafa;
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.08);
}

.input-shell,
.select-shell {
    position: relative;
}

    .input-shell > .material-icons,
    .select-shell > .material-icons {
        position: absolute;
        z-index: 3;
        top: 50%;
        left: 12px;
        color: #7e9aaf;
        font-size: 19px;
        pointer-events: none;
        transform: translateY(-50%);
    }

    .input-shell .form-control:not(.dataTables_filter input),
    .select-shell .form-control {
        padding-left: 39px;
    }

    .select-shell .bootstrap-select {
        width: 100%;
        border: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .select-shell .bootstrap-select > .dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-width: 0;
        height: 44px;
        padding: 10px 38px 10px 39px;
        border: 1px solid var(--water-border-strong);
        border-radius: var(--water-radius-sm);
        outline: none;
        background-color: #ffffff;
        color: var(--water-text);
        font-size: 13px;
        text-align: left;
        box-shadow: none;
    }

    .select-shell .bootstrap-select > .dropdown-toggle:hover,
    .select-shell .bootstrap-select > .dropdown-toggle:focus,
    .select-shell .bootstrap-select > .dropdown-toggle:active,
    .select-shell .bootstrap-select.open > .dropdown-toggle 
    {
        border-color: var(--water-primary);
        background-color: #ffffff;
        box-shadow: 0 0 0 3px rgba(8, 120, 209, 0.12);
    }

    .select-shell .bootstrap-select > .dropdown-toggle:after {
        display: none;
    }

    .select-shell .bootstrap-select .dropdown-toggle .filter-option {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        padding-left: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .select-shell .bootstrap-select .dropdown-toggle .bs-caret {
        flex: 0 0 auto;
    }

    .select-shell .bootstrap-select .dropdown-toggle .caret {
        border-top-color: #667b8d;
    }

    .select-shell .dropdown-menu {
        margin-top: 4px;
        border: 1px solid #cfe0ec;
        border-radius: 10px;
        box-shadow: 0 12px 28px rgba(24, 78, 119, 0.12);
    }

    .select-shell .dropdown-menu > .inner {
        max-height: 260px !important;
    }

    .select-shell .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
        line-height: 1.25;
    }

    .select-shell .bootstrap-select .dropdown-menu li a {
        padding: 9px 12px;
    }

    .select-shell .bootstrap-select .dropdown-menu li a:hover,
    .select-shell .bootstrap-select .dropdown-menu li a:focus {
        background: var(--water-primary-soft);
    }

    .select-shell .bootstrap-select > .dropdown-toggle.bs-placeholder,
    .select-shell .bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
    .select-shell .bootstrap-select > .dropdown-toggle.bs-placeholder:focus {
        color: #7c8ea0;
    }

    .select-shell .bootstrap-select .dropdown-toggle:focus {
        outline: none !important;
    }

    .field-error {
        display: block;
        min-height: 17px;
        margin-top: 4px;
        color: var(--water-danger);
        font-size: 11px;
    }

.validation-summary {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #ffc7c4;
    border-radius: var(--water-radius-sm);
    background: #fff3f2;
    color: #a72824;
}

    .validation-summary ul {
        margin: 0;
        padding-left: 19px;
    }

/* ------------------------------------------------------------
   PURPOSE OPTIONS
   ------------------------------------------------------------ */

.purpose-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(105px, 1fr));
    gap: 10px;
}

.purpose-option {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

    .purpose-option input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

.purpose-option__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid var(--water-border-strong);
    border-radius: var(--water-radius-sm);
    background: #ffffff;
    color: #3b5062;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

    .purpose-option__visual .material-icons {
        color: var(--water-primary);
        font-size: 18px;
    }

.purpose-option:hover .purpose-option__visual {
    border-color: #83b7da;
    background: #f6fbff;
}

.purpose-option input:focus-visible + .purpose-option__visual {
    box-shadow: 0 0 0 3px rgba(8, 120, 209, 0.14);
}

.purpose-option input:checked + .purpose-option__visual {
    border-color: var(--water-primary);
    background: var(--water-primary-soft);
    color: var(--water-primary-dark);
    box-shadow: inset 0 0 0 1px rgba(8, 120, 209, 0.1);
}

/* ------------------------------------------------------------
   CAPTCHA
   ------------------------------------------------------------ */

.captcha-row {
    display: grid;
    grid-template-columns: 128px minmax(150px, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.captcha-preview {
    position: relative;
    display: grid;
    height: 46px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #bac8d4;
    border-radius: 7px;
    background: repeating-linear-gradient( 18deg, transparent 0, transparent 8px, rgba(20, 69, 217, 0.07) 9px, transparent 10px ), #f8f9ff;
    color: #1b45db;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-style: italic;
    font-weight: 800;
    letter-spacing: 5px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
    user-select: none;
}

    .captcha-preview::before,
    .captcha-preview::after {
        position: absolute;
        content: "";
        width: 150px;
        height: 1px;
        background: rgba(30, 80, 220, 0.42);
        transform: rotate(-9deg);
    }

    .captcha-preview::after {
        transform: rotate(14deg);
    }

.captcha-input {
    height: 46px;
}

.captcha-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    gap: 5px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--water-primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
}

    .captcha-refresh:hover {
        background: var(--water-primary-soft);
    }

.captcha-refresh .material-icons {
        font-size: 18px;
    }

/* CaptchaMvc render markup: image, hidden token, refresh link and input. */
.captcha-shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

    .captcha-shell > img {
        order: 1;
        flex: 0 0 128px;
        width: 128px;
        height: 46px;
        border: 1px solid #b9cfe2;
        border-radius: 7px;
        background: #f8fbff;
        object-fit: contain;
    }

    .captcha-shell > input[type="text"] {
        order: 2;
        display: block !important;
        flex: 1 1 180px;
        width: auto !important;
        min-width: 0;
        height: 46px !important;
        padding: 10px 12px;
        border: 1px solid #b9cfe2 !important;
        border-radius: 8px;
        outline: 0;
        background: #ffffff;
        color: var(--water-text);
        font-size: 13px;
        transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }

        .captcha-shell > input[type="text"]:focus {
            border-color: var(--water-primary) !important;
            box-shadow: 0 0 0 3px rgba(8, 120, 209, 0.12);
        }

    .captcha-shell > a {
        order: 3;
        display: inline-flex !important;
        align-items: center;
        min-height: 42px;
        gap: 5px;
        padding: 8px 10px;
        border-radius: 8px;
        color: var(--water-primary) !important;
        font-size: 12px;
        font-weight: 650;
        text-decoration: none;
    }

        .captcha-shell > a::before {
            content: "↻";
            font-size: 19px;
            line-height: 1;
        }

        .captcha-shell > a:hover {
            background: var(--water-primary-soft);
        }

    .captcha-shell .field-validation-error,
    .captcha-shell .field-validation-valid {
        order: 4;
        flex-basis: 100%;
        color: var(--water-danger);
        font-size: 11px;
    }

/* ------------------------------------------------------------
   UPLOAD
   ------------------------------------------------------------ */

.upload-layout {
    display: grid;
    grid-template-columns: minmax(250px, 0.56fr) minmax(420px, 1.44fr);
    gap: 18px;
}

.document-requirements {
    padding: 15px;
    border: 1px solid #d4e6f3;
    border-radius: 11px;
    background: #f5fbff;
}

    .document-requirements h3 {
        margin: 0 0 10px;
        color: #1b5e8d;
        font-size: 14px;
    }

    .document-requirements ul {
        margin: 0;
        padding-left: 20px;
        color: #50687a;
        font-size: 12px;
        line-height: 1.75;
    }

.file-rule {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid #d9e9f4;
    color: #6a8091;
    font-size: 11px;
}

    .file-rule .material-icons {
        color: var(--water-primary);
        font-size: 17px;
    }

.upload-zone {
    position: relative;
    min-height: 155px;
    padding: 13px;
    border: 2px dashed #76afe0;
    border-radius: 13px;
    background: #f7fbff;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

    .upload-zone.is-dragover {
        border-color: var(--water-primary);
        background: #eaf6ff;
        box-shadow: inset 0 0 0 3px rgba(8, 120, 209, 0.08);
    }

    .upload-zone > input[type="file"] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

.upload-zone__label {
    display: flex;
    min-height: 123px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 14px;
    color: var(--water-primary);
    text-align: center;
    cursor: pointer;
}

    .upload-zone__label > .material-icons {
        margin-bottom: 7px;
        font-size: 40px;
    }

    .upload-zone__label strong {
        margin-bottom: 3px;
        font-size: 14px;
    }

    .upload-zone__label span {
        color: #698094;
        font-size: 12px;
    }

.selected-files {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.selected-file {
    position: relative; /* thêm dòng này để .dz-remove định vị theo file item */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 34px 8px 10px; /* chừa chỗ bên phải cho nút x */
    border: 1px solid #dce8f1;
    border-radius: 8px;
    background: #ffffff;
    color: #466075;
    font-size: 11px;
}

    .selected-file .dz-remove {
        position: absolute;
        top: -6px;
        right: -6px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        margin-left: 0; /* bỏ margin-left: auto cũ */
        border: 1px solid #f1b0ae;
        border-radius: 50%;
        background: #ffffff;
        color: #d9534f;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
        cursor: pointer;
        z-index: 2;
    }

        .selected-file .dz-remove:hover {
            background: #fdeceb;
            border-color: #d9534f;
        }
    .selected-file .material-icons {
        color: var(--water-primary);
        font-size: 17px;
    }

    .selected-file__thumbnail {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        border-radius: 5px;
        object-fit: cover;
    }

    .selected-file span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .selected-file [data-dz-name] {
        flex: 1;
    }


    .selected-file .dz-error-message {
        display: none;
    }

/* ------------------------------------------------------------
   DOWNLOAD CARDS
   ------------------------------------------------------------ */

.download-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.download-card {
    display: flex;
    min-width: 0;
    min-height: 66px;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--water-border);
    border-radius: 10px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

    .download-card:hover {
        border-color: #92c3e5;
        background: #f8fcff;
        box-shadow: 0 7px 18px rgba(8, 120, 209, 0.09);
        transform: translateY(-1px);
    }

.download-card__icon {
    display: grid;
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 9px;
    color: var(--water-primary);
    background: var(--water-primary-soft);
}

    .download-card__icon .material-icons {
        font-size: 21px;
    }

.download-card__body {
    min-width: 0;
    flex: 1;
}

    .download-card__body strong {
        display: block;
        overflow: hidden;
        color: #314a5e;
        font-size: 12px;
        font-weight: 680;
        line-height: 1.42;
        text-overflow: ellipsis;
    }

    .download-card__body small {
        display: block;
        margin-top: 2px;
        color: #8797a6;
        font-size: 10px;
    }

.download-card__arrow {
    color: #9bb0c0;
    font-size: 20px;
}

/* ------------------------------------------------------------
   SUBMIT
   ------------------------------------------------------------ */

.submit-panel {
    padding: 10px 0 2px;
    text-align: center;
}

.submit-button {
    display: inline-flex;
    min-width: 185px;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 23px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient( 135deg, var(--water-primary), #1598e2 );
    color: #ffffff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 730;
    box-shadow: 0 9px 20px rgba(8, 120, 209, 0.24);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

    .submit-button:hover {
        box-shadow: 0 11px 24px rgba(8, 120, 209, 0.32);
        transform: translateY(-1px);
    }

    .submit-button:active {
        transform: translateY(0);
    }

    .submit-button:disabled {
        cursor: wait;
        opacity: 0.68;
        transform: none;
    }

    .submit-button .material-icons {
        font-size: 20px;
    }

.submit-panel p {
    margin: 8px 0 0;
    color: #7c8e9d;
    font-size: 11px;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1180px) {
    .form-grid--customer {
        grid-template-columns: 1.2fr 0.8fr;
    }

        .form-grid--customer .field:last-child {
            grid-column: 1 / -1;
        }

    .form-grid--payment {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid--confirmation {
        grid-template-columns: 1fr;
    }
    .form-grid--danhbo
   
    {
        grid-template-columns: 1fr;
    }

    .form-grid--dmgb {
        grid-template-columns: repeat(3,1fr);
    }
    .form-grid--contact {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 960px) {
    .form-grid--split,
    .form-grid--dmgb {
        grid-template-columns: 1fr!important;
    }

    .form-grid--address {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .field--address-road {
        grid-column: auto;
    }

    .upload-layout {
        grid-template-columns: 1fr;
    }

    .registration-hero__decoration {
        display: none;
    }
}

@media (max-width: 760px) {
    .water-registration-page {
        padding: 0;
    }

    .registration-shell {
        border: 0;
        border-radius: 0;
    }

    .registration-hero {
        min-height: auto;
        align-items: flex-start;
        padding: 20px 16px;
    }

    .registration-hero__icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        margin-right: 12px;
    }

        .registration-hero__icon .material-icons {
            font-size: 27px;
        }

    .registration-hero__content h1 {
        font-size: 21px;
    }

    .registration-hero__content p {
        font-size: 12px;
    }

    .registration-content {
        padding: 14px 11px 24px;
    }

    .required-note {
        text-align: left;
    }

    .form-section {
        padding: 15px 12px;
    }

    .form-grid--customer,
    .form-grid--address,
    .form-grid--identity,
    .form-grid--payment,
    .form-grid--confirmation,
    .form-grid--dmgb,
    .form-grid--contact,
    .form-grid--dm {
        grid-template-columns: 1fr;
    }

        .field--full,
        .field--address-road,
        .form-grid--customer .field:last-child {
            grid-column: auto;
        }

    .purpose-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .captcha-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .captcha-preview {
        width: 150px;
    }

    .captcha-refresh {
        justify-self: start;
    }

    .download-grid {
        grid-template-columns: 1fr!important;
    }

    .submit-button {
        width: 100%;
    }
}

.registration-shell a,
.registration-shell a:hover,
.registration-shell a:focus {
    text-decoration: none !important;
}

@media (max-width: 420px) {
    .purpose-options {
        grid-template-columns: 1fr;
    }

    .registration-hero__icon {
        display: none;
    }
}

/* Giảm chuyển động đối với người dùng đã chọn chế độ này */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

.input-shell .form-control:not(.dataTables_filter input) {
    border-top-right-radius: 9px !important;
    border-bottom-right-radius: 9px !important;
}