/**
 * Module giadichvu - Tra cứu giá dịch vụ y tế
 * Bs Phạm Minh Thành - BVĐK Hậu Lộc
 * Chỉ dùng lớp .vp* nên không ảnh hưởng giao diện chung, chạy được cả giao diện máy tính và điện thoại
 */
.vp {
    --vp-chinh: #0a7cc4;
    --vp-chinh-dam: #075c93;
    --vp-chinh-nhat: #e8f3fb;
    --vp-chu: #1d2733;
    --vp-mo: #5d6b7a;
    --vp-vien: #dbe3ec;
    --vp-nen: #f4f7fa;
    --vp-trang: #fff;
    --vp-bhyt: #0b7a53;
    --vp-vp: #0a5f9e;
    --vp-yc: #6a3fb8;
    --vp-nb: #b4440f;
    --vp-bo: 12px;
    color: var(--vp-chu);
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 24px;
    -webkit-text-size-adjust: 100%;
    container: vp / inline-size;
}
.vp *, .vp *::before, .vp *::after { box-sizing: border-box; }
.vp a { color: var(--vp-chinh); }
.vp svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.vp-an-chu { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vp [hidden] { display: none !important; }

/* Đầu trang */
.vp-dau { margin-bottom: 14px; }
.vp-dau__tieude { font-size: 22px; line-height: 1.3; font-weight: 700; margin: 0 0 6px; color: var(--vp-chu); }
.vp-dau__cancu { margin: 0 0 12px; color: var(--vp-mo); font-size: 13.5px; }
.vp-dau__ngay { display: inline-block; background: var(--vp-chinh-nhat); color: var(--vp-chinh-dam); border-radius: 999px; padding: 0 8px; font-weight: 600; }
.vp-the { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--vp-vien); }
.vp-the::-webkit-scrollbar { display: none; }
.vp-the__muc { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; white-space: nowrap; text-decoration: none !important; color: var(--vp-mo) !important; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.vp-the__muc:hover { color: var(--vp-chu) !important; }
.vp-the__muc.is-on { color: var(--vp-chinh) !important; border-bottom-color: var(--vp-chinh); }
.vp-dem { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--vp-nb); color: #fff; font-size: 12px; line-height: 20px; text-align: center; }

/* Ô tìm */
.vp-tim { position: relative; display: flex; gap: 8px; margin: 14px 0 10px; }
.vp-tim__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--vp-mo); pointer-events: none; }
.vp-tim__o { flex: 1; min-width: 0; height: 46px; padding: 0 12px 0 40px; border: 1px solid var(--vp-vien); border-radius: var(--vp-bo); font-size: 16px; background: var(--vp-trang); color: var(--vp-chu); -webkit-appearance: none; appearance: none; }
.vp-tim__o:focus { outline: none; border-color: var(--vp-chinh); box-shadow: 0 0 0 3px rgba(10, 124, 196, .18); }
.vp-tim__nut { height: 46px; padding: 0 18px; border: 0; border-radius: var(--vp-bo); background: var(--vp-chinh); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.vp-tim__nut:hover { background: var(--vp-chinh-dam); }

/* Nhóm */
.vp-nhom { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: thin; }
.vp-nhom__muc { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--vp-vien); border-radius: 999px; background: var(--vp-trang); color: var(--vp-chu) !important; text-decoration: none !important; font-size: 14px; white-space: nowrap; }
.vp-nhom__muc span { color: var(--vp-mo); font-size: 12.5px; }
.vp-nhom__muc:hover { border-color: var(--vp-chinh); }
.vp-nhom__muc.is-on { background: var(--vp-chinh); border-color: var(--vp-chinh); color: #fff !important; }
.vp-nhom__muc.is-on span { color: rgba(255, 255, 255, .85); }
@media (min-width: 768px) { .vp-nhom { flex-wrap: wrap; overflow: visible; } }

.vp-dem-kq { margin: 6px 0 10px; color: var(--vp-mo); font-size: 14px; }
.vp-rong { padding: 22px 16px; text-align: center; color: var(--vp-mo); background: var(--vp-nen); border: 1px dashed var(--vp-vien); border-radius: var(--vp-bo); }

/* Bảng giá */
.vp-bang { border: 1px solid var(--vp-vien); border-radius: var(--vp-bo); overflow-x: auto; background: var(--vp-trang); }
.vp-bang .c-ten { min-width: 220px; }
.vp-bang table { width: 100%; border-collapse: collapse; margin: 0; }
.vp-bang th, .vp-bang td { padding: 10px 12px; border-bottom: 1px solid var(--vp-vien); text-align: left; vertical-align: top; font-size: 14.5px; }
.vp-bang thead th { background: var(--vp-nen); color: var(--vp-mo); font-size: 13px; font-weight: 600; white-space: nowrap; }
.vp-bang tbody tr:last-child > * { border-bottom: 0; }
.vp-bang tbody tr:hover { background: #fafcfe; }
.vp-bang .c-ma { color: var(--vp-mo); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vp-bang .c-ten a { color: var(--vp-chu); text-decoration: none; font-weight: 600; }
.vp-bang .c-ten a:hover { color: var(--vp-chinh); text-decoration: underline; }
.vp-bang .c-dvt { color: var(--vp-mo); white-space: nowrap; }
.vp-bang .c-gia { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.vp-bang .c-bhyt { color: var(--vp-bhyt); }
.vp-bang .c-vp { color: var(--vp-vp); }
.vp-bang .c-yc { color: var(--vp-yc); }
.vp-bang .c-nb { color: var(--vp-nb); }
.vp-bang .c-them { width: 1%; text-align: right; }
.vp-rong-gia { color: #98a4b1; font-weight: 400; font-size: 13px; }

.vp-nut-them { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 4px 10px; border: 1px solid var(--vp-chinh); border-radius: 8px; background: var(--vp-trang); color: var(--vp-chinh); font-weight: 700; font-size: 13px; white-space: nowrap; cursor: pointer; }
.vp-nut-them:hover { background: var(--vp-chinh-nhat); }
.vp-nut-them.is-da-them { background: var(--vp-bhyt); border-color: var(--vp-bhyt); color: #fff; }

@media (max-width: 767px) { .vp-dau__tieude { font-size: 20px; } }

/* Khung hẹp (điện thoại, hoặc cột giữa của giao diện 3 cột): bảng thành thẻ */
@container vp (max-width: 700px) {
    .vp-bang:not(.vp-bang--nho) thead { display: none; }
    .vp-bang:not(.vp-bang--nho) table, .vp-bang:not(.vp-bang--nho) tbody { display: block; }
    .vp-bang:not(.vp-bang--nho) tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px 12px; padding: 12px; border-bottom: 1px solid var(--vp-vien); }
    .vp-bang:not(.vp-bang--nho) tbody tr:last-child { border-bottom: 0; }
    .vp-bang:not(.vp-bang--nho) td { display: block; padding: 0; border: 0; text-align: left; }
    .vp-bang:not(.vp-bang--nho) .c-ma { grid-column: 1 / -1; order: 1; font-size: 12.5px; }
    .vp-bang:not(.vp-bang--nho) .c-ten { grid-column: 1 / -1; order: 2; margin-bottom: 6px; font-size: 15px; line-height: 1.35; min-width: 0; }
    .vp-bang:not(.vp-bang--nho) .c-gia { order: 3; text-align: left; font-size: 15px; }
    .vp-bang:not(.vp-bang--nho) .c-dvt { order: 4; font-size: 13px; }
    .vp-bang:not(.vp-bang--nho) .c-them { order: 5; width: auto; grid-column: 1 / -1; text-align: left; margin-top: 8px; }
    .vp-bang:not(.vp-bang--nho) .c-ma { grid-column: 1 / 3; }
    .vp-bang:not(.vp-bang--nho) .c-dvt { grid-column: 3; order: 1; text-align: right; font-size: 12.5px; }
    .vp-bang:not(.vp-bang--nho) .c-dvt::before { display: inline !important; content: "ĐVT: " !important; }
    .vp-bang:not(.vp-bang--nho) .c-them { justify-self: end; margin-top: 6px; }
    .vp-bang:not(.vp-bang--nho) td[data-nhan]::before { content: attr(data-nhan); display: block; color: var(--vp-mo); font-size: 12px; font-weight: 400; }
    .vp-bang:not(.vp-bang--nho) .c-ma:empty { display: none; }
    .vp-nut-them { min-height: 36px; padding: 4px 14px; font-size: 14px; }
    .vp-tim__nut { padding: 0 14px; }
}

/* Bảng nhỏ (trang chi tiết) */
.vp-bang--nho th[scope="row"] { font-weight: 600; color: var(--vp-chu); background: transparent; }
@container vp (max-width: 520px) {
    .vp-bang--nho thead { display: none; }
    .vp-bang--nho tr { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 10px 12px; border-bottom: 1px solid var(--vp-vien); }
    .vp-bang--nho tbody tr:last-child { border-bottom: 0; }
    .vp-bang--nho th, .vp-bang--nho td { display: block; padding: 0; border: 0; text-align: left; }
    .vp-bang--nho th[scope="row"] { width: 100%; }
    .vp-bang--nho td[data-nhan]::before { content: attr(data-nhan) ": "; color: var(--vp-mo); font-weight: 400; font-size: 13px; }
}

.vp-phantrang { margin: 14px 0; text-align: center; }
.vp-phantrang .pagination { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0; list-style: none; }
.vp-phantrang .pagination > li { display: inline; }
.vp-phantrang .pagination > li > a, .vp-phantrang .pagination > li > span { display: inline-block; min-width: 38px; padding: 7px 10px; border: 1px solid var(--vp-vien); border-radius: 8px; color: var(--vp-chu); text-decoration: none; background: var(--vp-trang); float: none; margin: 0; }
.vp-phantrang .pagination > .active > a, .vp-phantrang .pagination > .active > span { background: var(--vp-chinh); border-color: var(--vp-chinh); color: #fff; }
.vp-phantrang .pagination > .disabled > a { color: #a0abb7; }

.vp-luuy { margin: 14px 0 4px; padding: 10px 12px; border-left: 3px solid #e3a008; background: #fffaeb; border-radius: 6px; font-size: 13.5px; color: #5c4a12; }
.vp-capnhat { margin: 6px 0 0; color: var(--vp-mo); font-size: 13px; }
.vp-goi-y { margin: 8px 0 0; color: var(--vp-mo); font-size: 13.5px; }

/* Khối, nút */
.vp-khoi { margin: 16px 0; padding: 16px; border: 1px solid var(--vp-vien); border-radius: var(--vp-bo); background: var(--vp-trang); }
.vp-khoi__tieude { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 12px; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--vp-chu); }
.vp-khoi__tieude small { flex-basis: 100%; font-weight: 400; color: var(--vp-mo); font-size: 13px; }
.vp-khoi > p:last-child { margin-bottom: 0; }
.vp-buoc { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--vp-chinh); color: #fff; font-size: 14px; flex: none; }
.vp-nut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 8px 16px; border: 1px solid var(--vp-vien); border-radius: 10px; background: var(--vp-trang); color: var(--vp-chu) !important; text-decoration: none !important; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.vp-nut:hover { border-color: var(--vp-chinh); }
.vp-nut--chinh { background: var(--vp-chinh); border-color: var(--vp-chinh); color: #fff !important; }
.vp-nut--chinh:hover { background: var(--vp-chinh-dam); }
.vp-nut.vp-nut-them { width: auto; }
.vp-nut.vp-nut-them.is-da-them { background: var(--vp-bhyt); border-color: var(--vp-bhyt); color: #fff !important; }

/* Chi tiết */
.vp-ct { padding: 16px; border: 1px solid var(--vp-vien); border-radius: var(--vp-bo); background: var(--vp-trang); }
.vp-ct__nhom { margin: 0 0 4px; font-size: 13px; }
.vp-ct__nhom a { text-decoration: none; font-weight: 600; }
.vp-ct__ten { margin: 0 0 10px; font-size: 21px; line-height: 1.35; font-weight: 700; color: var(--vp-chu); }
.vp-ct__tt { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 14px; font-size: 14px; }
.vp-ct__tt div { display: flex; gap: 6px; }
.vp-ct__tt dt { color: var(--vp-mo); font-weight: 400; }
.vp-ct__tt dd { margin: 0; font-weight: 600; }
.vp-ct__gia { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.vp-ct__hanh-dong { margin: 14px 0 0; }
.vp-o { padding: 12px 14px; border-radius: 10px; background: var(--vp-nen); border: 1px solid var(--vp-vien); }
.vp-o__nhan { display: block; font-size: 13px; color: var(--vp-mo); }
.vp-o__nhan small { font-size: 12px; }
.vp-o__so { display: block; margin-top: 2px; font-size: 22px; line-height: 1.25; font-weight: 800; font-variant-numeric: tabular-nums; }
.vp-o__so small { font-size: 14px; font-weight: 600; }
.vp-o__so--chu { font-size: 16px; font-weight: 600; color: var(--vp-mo) !important; }
.vp-o--bhyt { background: #ecf8f3; border-color: #c6eadb; } .vp-o--bhyt .vp-o__so { color: var(--vp-bhyt); }
.vp-o--vp { background: #edf5fc; border-color: #cfe3f5; } .vp-o--vp .vp-o__so { color: var(--vp-vp); }
.vp-o--yc { background: #f4effc; border-color: #e1d5f6; } .vp-o--yc .vp-o__so { color: var(--vp-yc); }
.vp-o--nb { background: #fff3ec; border-color: #f6d3bf; } .vp-o--nb .vp-o__so { color: var(--vp-nb); }
.vp-lq__ds { list-style: none; margin: 0 0 12px; padding: 0; }
.vp-lq__ds li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--vp-vien); font-size: 14px; }
.vp-lq__ds li span { color: var(--vp-mo); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vp-lq__ds a { text-decoration: none; color: var(--vp-chu); }
.vp-lq__ds a:hover { color: var(--vp-chinh); }
@media (max-width: 480px) { .vp-lq__ds li { flex-direction: column; gap: 0; } }

/* Dự toán */
.vp-chon { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.vp-chon__muc { position: relative; display: block; margin: 0; cursor: pointer; font-weight: 400; }
.vp-chon__muc input { position: absolute; opacity: 0; pointer-events: none; }
.vp-chon__muc > span { display: block; height: 100%; padding: 10px 12px 10px 38px; border: 1px solid var(--vp-vien); border-radius: 10px; background: var(--vp-trang); position: relative; }
.vp-chon__muc > span::before { content: ""; position: absolute; left: 12px; top: 13px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #9aa8b6; background: #fff; }
.vp-chon__muc strong { display: block; font-size: 15px; }
.vp-chon__muc small { display: block; color: var(--vp-mo); font-size: 12.5px; line-height: 1.4; }
.vp-chon__muc input:checked + span { border-color: var(--vp-chinh); background: var(--vp-chinh-nhat); box-shadow: 0 0 0 1px var(--vp-chinh) inset; }
.vp-chon__muc input:checked + span::before { border-color: var(--vp-chinh); box-shadow: 0 0 0 3px #fff inset; background: var(--vp-chinh); }
.vp-chon__muc input:focus-visible + span { outline: 3px solid rgba(10, 124, 196, .35); }
.vp-hop { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-weight: 400; font-size: 14px; cursor: pointer; }
.vp-hop input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.vp-tim--dt { margin: 0; }
.vp-goiy { list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--vp-vien); border-radius: 10px; background: var(--vp-trang); box-shadow: 0 8px 24px rgba(16, 38, 60, .12); max-height: 340px; overflow-y: auto; }
.vp-goiy li { margin: 0; }
.vp-goiy button { display: flex; width: 100%; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 0; background: transparent; text-align: left; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--vp-chu); }
.vp-goiy button:hover, .vp-goiy button:focus { background: var(--vp-chinh-nhat); outline: none; }
.vp-goiy button small { color: var(--vp-mo); white-space: nowrap; }
.vp-goiy .vp-goiy__rong { padding: 9px 10px; color: var(--vp-mo); font-size: 14px; }
.vp-dt__ds { margin-top: 12px; }
.vp-dt__muc { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--vp-vien); }
.vp-dt__muc:first-child { border-top: 1px solid var(--vp-vien); }
.vp-dt__ten { font-weight: 600; line-height: 1.35; }
.vp-dt__ten small { display: block; color: var(--vp-mo); font-weight: 400; font-size: 12.5px; }
.vp-dt__xoa { border: 0; background: transparent; color: #a0abb7; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; align-self: start; }
.vp-dt__xoa:hover { color: #c0392b; }
.vp-dt__dong2 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; }
.vp-sl { display: inline-flex; align-items: center; border: 1px solid var(--vp-vien); border-radius: 8px; overflow: hidden; }
.vp-sl button { width: 34px; height: 34px; border: 0; background: var(--vp-nen); font-size: 18px; cursor: pointer; color: var(--vp-chu); }
.vp-sl input { width: 46px; height: 34px; border: 0; text-align: center; font-size: 15px; -moz-appearance: textfield; }
.vp-sl input::-webkit-inner-spin-button { -webkit-appearance: none; }
.vp-dt__yc { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-weight: 400; cursor: pointer; }
.vp-dt__tien { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.vp-dt__tien strong { color: var(--vp-nb); font-size: 15.5px; }
.vp-dt__tien small { display: block; color: var(--vp-mo); font-size: 12.5px; }
.vp-tong__luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.vp-thong-bao-xanh { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #ecf8f3; color: #0b5e40; font-size: 14px; }
.vp-dt__nut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vp-tong { position: relative; }
@media (max-width: 767px) {
    .vp-tong__luoi { grid-template-columns: 1fr 1fr; }
    .vp-tong__luoi .vp-o--nb { grid-column: 1 / -1; }
    .vp-tong .vp-o { padding: 8px 10px; }
    .vp-tong .vp-o__so { font-size: 18px; }
}

/* Căn cứ */
.vp-vb { list-style: none; margin: 0; padding: 0; }
.vp-vb__muc { padding: 12px 0; border-bottom: 1px solid var(--vp-vien); }
.vp-vb__muc:first-child { padding-top: 0; }
.vp-vb__muc:last-child { border-bottom: 0; padding-bottom: 0; }
.vp-vb__muc p { margin: 0 0 4px; }
.vp-vb__so { font-weight: 700; color: var(--vp-chinh-dam); }
.vp-vb__so span { font-weight: 400; color: var(--vp-mo); }
.vp-vb__ten { font-weight: 600; }
.vp-vb__ngay, .vp-vb__mota { color: var(--vp-mo); font-size: 14px; }
.vp-hd details { border-bottom: 1px solid var(--vp-vien); padding: 10px 0; }
.vp-hd details:last-child { border-bottom: 0; }
.vp-hd summary { cursor: pointer; font-weight: 600; }
.vp-hd details p { margin: 8px 0 0; color: #33414f; }
.vp-lien-he { padding: 12px 14px; border-radius: 10px; background: var(--vp-chinh-nhat); }
.vp-lien-he a { font-weight: 700; }

/* Thông báo nổi */
.vp-noi { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); z-index: 9999; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 10px; background: #1d2733; color: #fff; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.vp-noi.is-hien { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.vp-noi a { color: #8fd0ff; font-weight: 700; margin-left: 8px; }

@media print {
    .vp-the, .vp-tim, .vp-nhom, .vp-nut-them, .vp-phantrang, .vp-dt__nut { display: none !important; }
}