body {
    background: linear-gradient( 180deg, #f4f9ff, #eef5ff);
}

.card-donor {
    max-width: 650px;
    margin: auto;
    margin-top: 40px;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    border: none;
}

.card-header {
    background: #d62828;
    color: white;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
}

.btn-donor {
    width: 100%;
    height: 55px;
    font-size: 22px;
    border-radius: 12px;
}

.title-small {
    color: #777;
    text-align: center;
    font-size: 18px;
}

.form-label {
    font-weight: 600;
}
.card-header {
    border-radius: 18px 18px 0 0 !important;
}

.form-select {
    height: 52px;
    font-size: 18px;
    border-radius: 10px;
}

.btn-donor {
    margin-top: 15px;
    font-weight: bold;
    letter-spacing: 1px;
}

    .btn-donor:hover {
        transform: scale(1.02);
        transition: .25s;
    }

.card-donor {
    overflow: hidden;
}
/* Màn hình 3 - Khai báo sức khỏe */
.health-page {
    max-width: 1120px;
}

.health-section {
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
}

.health-section-title {
    margin: 0;
    padding: 0.85rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 700;
    color: #1f2937;
}

.health-question-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #eef0f2;
    transition: background-color 0.15s ease;
}

.health-question-row:last-child {
    border-bottom: 0;
}

.health-question-row:hover,
.health-question-row.answered {
    background: #fbfdff;
}

.health-question-text {
    line-height: 1.45;
}

.health-answer {
    text-align: right;
}

.health-answer .form-check-inline {
    margin-right: 1rem;
}

@media (max-width: 767.98px) {
    .health-question-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .health-answer {
        text-align: left;
    }
}

/*============================================================
  Màn hình 3 - phiếu khai báo sức khỏe theo biểu mẫu giấy
============================================================*/
.phieu-khai-bao {
    overflow: hidden;
}

.phieu-header-row,
.phieu-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px 78px;
    align-items: center;
}

.phieu-header-row {
    background: #f1f5f9;
    border-bottom: 1px solid #cbd5e1;
    font-weight: 700;
    text-align: center;
    padding: .65rem .75rem;
}

.phieu-row {
    position: relative;
    border-bottom: 1px solid #e2e8f0;
    padding: .65rem .75rem;
    transition: background-color .15s ease;
}

.phieu-row:hover,
.phieu-row.answered {
    background: #f8fafc;
}

.phieu-row.sub-question .phieu-text {
    padding-left: 1.2rem;
}

.phieu-text {
    line-height: 1.45;
    padding-right: .75rem;
}

.phieu-choice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

.phieu-choice label {
    margin: 0;
    cursor: pointer;
}

.phieu-group-title {
    padding: .75rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.phieu-error {
    grid-column: 1 / -1;
    padding-left: .25rem;
}

.phieu-gift-row {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 44%);
}

.phieu-gift-row .gift-options {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    padding-left: .75rem;
}

@media (max-width: 767.98px) {
    .phieu-header-row {
        display: none;
    }

    .phieu-row,
    .phieu-gift-row {
        grid-template-columns: 1fr 1fr;
        gap: .65rem;
        padding: .85rem;
    }

    .phieu-text {
        grid-column: 1 / -1;
        padding-right: 0;
    }

    .phieu-row.sub-question .phieu-text {
        padding-left: .4rem;
    }

    .phieu-choice {
        border: 1px solid #cbd5e1;
        border-radius: .5rem;
        padding: .55rem;
        background: #fff;
    }

    .phieu-gift-row .gift-options {
        grid-column: 1 / -1;
        padding-left: 0;
        display: block;
    }

    .phieu-gift-row .form-check {
        margin-bottom: .6rem;
    }
}


/* Màn hình 4 - xác nhận */
.confirm-page { max-width: 1120px; }
.confirm-grid > div { display: flex; flex-direction: column; gap: .2rem; }
.confirm-grid span { color: #6c757d; font-size: .9rem; }
.confirm-grid strong { color: #1f2937; }
.confirm-health-table th:last-child,
.confirm-health-table td:last-child { width: 190px; text-align: center; font-weight: 600; }
.phieu-not-applicable { background: #f8f9fa; }
@media (max-width: 767.98px) {
  .confirm-health-table th:last-child, .confirm-health-table td:last-child { width: 120px; }
}


/* V20 - nhận diện trang đăng ký */
.donor-public-brand{display:flex;align-items:center;gap:10px;color:#067a3f!important;font-family:"Segoe UI",Arial,sans-serif;font-weight:800;font-size:20px;text-decoration:none}
.donor-public-brand img{width:44px;height:36px;object-fit:contain}
.donor-public-brand span{white-space:normal}
.donor-register-title{font-family:"Segoe UI",Arial,sans-serif;font-weight:800;letter-spacing:.4px}
@media(max-width:600px){.donor-public-brand{font-size:15px}.donor-public-brand img{width:36px;height:31px}}

/* V27.3 - tìm xã/phường gần đúng */
.xa-search-wrap-v273{position:relative}
.xa-search-results-v273{position:absolute;z-index:1060;left:0;right:0;top:calc(100% + 4px);max-height:260px;overflow:auto;background:#fff;border:1px solid #ced4da;border-radius:8px;box-shadow:0 10px 24px rgba(15,23,42,.12);padding:4px}
.xa-result-item-v273{display:block;width:100%;border:0;background:#fff;text-align:left;padding:9px 11px;border-radius:6px;color:#1f2937;font:inherit}
.xa-result-item-v273:hover,.xa-result-item-v273:focus{background:#eef5ff;color:#0d6efd;outline:0}
.xa-result-empty-v273{padding:10px 11px;color:#6b7280;font-size:13px}


/* V27.4 - đồng nhất chiều cao các ô nhập cùng hàng */
.field-height-v274{height:52px!important;min-height:52px!important;padding-top:.5rem!important;padding-bottom:.5rem!important}

/* V28.0 - quét QR CCCD bằng camera điện thoại */
.cccd-scan-group-v280{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:8px;align-items:stretch}
.cccd-scan-group-v280 .form-control,.btn-quet-cccd-v280{height:52px!important;min-height:52px!important}
.btn-quet-cccd-v280{border:1px solid #0d6efd;border-radius:.375rem;background:#fff;color:#0d6efd;font-family:"Segoe UI",Arial,sans-serif;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 10px;white-space:nowrap;transition:.18s ease}
.btn-quet-cccd-v280:hover{background:#0d6efd;color:#fff;box-shadow:0 4px 12px rgba(13,110,253,.18)}
.btn-quet-cccd-v280 svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2}
.cccd-camera-modal-v280[hidden]{display:none!important}.cccd-camera-modal-v280{position:fixed;inset:0;z-index:2000;background:rgba(4,15,25,.78);display:grid;place-items:center;padding:18px;backdrop-filter:blur(2px)}
.cccd-camera-dialog-v280{width:min(520px,100%);background:#fff;border-radius:16px;padding:17px;box-shadow:0 24px 70px rgba(0,0,0,.32)}
.cccd-camera-head-v280{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}.cccd-camera-head-v280 h3{font-size:19px;margin:0 0 3px}.cccd-camera-head-v280 p{font-size:13px;color:#6c757d;margin:0}.cccd-camera-head-v280 button{width:38px;height:38px;border:0;border-radius:50%;background:#eef2f7;font-size:25px;line-height:1}
.cccd-camera-frame-v280{position:relative;overflow:hidden;border-radius:13px;background:#111}.cccd-camera-frame-v280 video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.cccd-camera-guide-v280{position:absolute;inset:17%;border:3px solid rgba(255,255,255,.94);border-radius:15px;box-shadow:0 0 0 999px rgba(0,0,0,.18);pointer-events:none}
.cccd-camera-message-v280{min-height:24px;margin-top:10px;color:#c62828;font-weight:650}.cccd-camera-dialog-v280 small{display:block;color:#687480;line-height:1.45}
@media(max-width:575.98px){.cccd-scan-group-v280{grid-template-columns:minmax(0,1fr) 58px}.btn-quet-cccd-v280 span{display:none}.btn-quet-cccd-v280{padding:0}.btn-quet-cccd-v280 svg{width:24px;height:24px}}


/* V28.1 - nút quét CCCD tròn và đồng nhất chiều cao trường hành chính */
.cccd-scan-group-v280{grid-template-columns:minmax(0,1fr) 52px;align-items:center}
.btn-quet-cccd-v281{width:52px;height:52px;min-width:52px;min-height:52px;border:0;border-radius:50%;background:linear-gradient(145deg,#0b6ee8,#15ad65);color:#fff;display:grid;place-items:center;padding:0;box-shadow:0 7px 18px rgba(12,118,197,.24);transition:transform .16s ease,box-shadow .16s ease}
.btn-quet-cccd-v281:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(12,118,197,.30)}
.btn-quet-cccd-v281:focus-visible{outline:3px solid rgba(13,110,253,.22);outline-offset:2px}
.qr-ui-icon-v281{width:25px;height:25px;display:block;fill:none;stroke:currentColor;stroke-width:2}
.field-height-v281{height:52px!important;min-height:52px!important;padding-top:.5rem!important;padding-bottom:.5rem!important}
@media(max-width:575.98px){.cccd-scan-group-v280{grid-template-columns:minmax(0,1fr) 48px}.btn-quet-cccd-v281{width:48px;height:48px;min-width:48px;min-height:48px}}