/* * DR.VET CLOUD — global popup visual skin * Chỉ thay đổi bề mặt, nền phủ, viền, bóng và nút đóng. * Giữ nguyên layout và kích thước riêng của từng popup nghiệp vụ. */ body.app-body { --drv-popup-ink: #132238; --drv-popup-muted: #667993; --drv-popup-line: rgba(213, 225, 242, .92); --drv-popup-radius: 24px; --drv-popup-surface: radial-gradient(520px 220px at 12% 0%, rgba(99, 164, 255, .10), transparent 72%), radial-gradient(500px 220px at 90% 0%, rgba(76, 213, 219, .09), transparent 74%), linear-gradient(180deg, rgba(255,255,255,.97), rgba(247,250,255,.96)); --drv-popup-shadow: 0 38px 88px rgba(10, 24, 48, .34), 0 12px 30px rgba(18, 45, 88, .16), inset 0 1px 0 rgba(255,255,255,.98); } /* Nền phía sau chìm xuống; chỉ blur một lớp phủ để tránh lag. */ body.app-body .modal-backdrop.show, body.app-body .drv-global-popup-overlay, body.app-body .swal2-container.swal2-backdrop-show, body.app-body .drv-glass-swal-container.swal2-container, body.app-body .dc-modal-backdrop, body.app-body .trial-popup__backdrop, body.app-body .promo-modal__backdrop, body.app-body .invalid-license-overlay, body.app-body .expired-license-overlay-v2, body.app-body .xq-overlay, body.app-body [data-drv-popup-backdrop], body.app-body [data-drv-glass-backdrop] { opacity: 1 !important; background: rgba(18, 29, 47, .52) !important; backdrop-filter: blur(10px) saturate(112%) !important; -webkit-backdrop-filter: blur(10px) saturate(112%) !important; } /* Bề mặt popup dùng chung, không can thiệp kích thước hay khoảng cách. */ body.app-body .modal .modal-content, body.app-body .drv-global-popup-card, body.app-body .swal2-popup, body.app-body .drv-glass-swal-popup, body.app-body .drv-popup-card, body.app-body .confirm-modal, body.app-body .dc-modal, body.app-body .trial-popup__dialog, body.app-body .promo-modal__dialog, body.app-body .invalid-license-dialog, body.app-body .expired-license-dialog-v2, body.app-body [data-drv-popup-surface], body.app-body [data-drv-glass-surface] { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.94) !important; border-radius: var(--drv-popup-radius) !important; background: var(--drv-popup-surface) !important; box-shadow: var(--drv-popup-shadow) !important; color: var(--drv-popup-ink) !important; } /* Viền sáng nhẹ giúp popup tách khỏi nền mà không đổi kích thước. */ body.app-body .modal .modal-content::after, body.app-body .drv-global-popup-card::after, body.app-body .swal2-popup::after, body.app-body .dc-modal::after, body.app-body [data-drv-popup-surface]::after, body.app-body [data-drv-glass-surface]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(192, 213, 240, .34); z-index: 0; } body.app-body .modal .modal-content > *, body.app-body .drv-global-popup-card > *, body.app-body .swal2-popup > *, body.app-body .dc-modal > *, body.app-body [data-drv-popup-surface] > *, body.app-body [data-drv-glass-surface] > * { position: relative; z-index: 1; } /* Header/footer giữ kích thước gốc, chỉ đổi nền và đường phân cách. */ body.app-body .modal .modal-header { background: linear-gradient(180deg, rgba(255,255,255,.54), rgba(243,248,255,.30)) !important; border-bottom-color: rgba(214, 226, 242, .82) !important; } body.app-body .modal .modal-body { background: transparent !important; } body.app-body .modal .modal-footer { background: rgba(248, 251, 255, .58) !important; border-top-color: rgba(214, 226, 242, .82) !important; } /* Nút đóng đồng bộ DICOM, không ép kích thước nút nghiệp vụ. */ body.app-body .modal .btn-close, body.app-body .modal [data-bs-dismiss="modal"].btn-close, body.app-body .drv-global-popup-close, body.app-body .drv-glass-modal-close, body.app-body .drv-glass-custom-close, body.app-body .swal2-close, body.app-body [data-drv-glass-close] { border: 1px solid rgba(211, 225, 243, .94) !important; border-radius: 14px !important; background-color: rgba(255,255,255,.84) !important; color: #40536d !important; box-shadow: 0 10px 24px rgba(21, 47, 87, .12), inset 0 1px 0 rgba(255,255,255,.96) !important; opacity: 1 !important; } body.app-body .modal .btn-close:hover, body.app-body .drv-global-popup-close:hover, body.app-body .drv-glass-modal-close:hover, body.app-body .drv-glass-custom-close:hover, body.app-body .swal2-close:hover, body.app-body [data-drv-glass-close]:hover { background-color: #fff !important; border-color: rgba(101, 151, 224, .50) !important; } body.app-body .drv-global-popup-title, body.app-body .swal2-title, body.app-body .modal-title { color: var(--drv-popup-ink) !important; } body.app-body .drv-global-popup-msg, body.app-body .swal2-html-container, body.app-body .swal2-content { color: var(--drv-popup-muted) !important; } /* Popup gói kích hoạt giữ nguyên kích thước và cơ chế tự chạy riêng. */ body.app-body .license-renew-plans-modal .modal-content { background: radial-gradient(760px 300px at 12% 0%, rgba(73, 181, 219, .11), transparent 70%), radial-gradient(720px 300px at 88% 0%, rgba(78, 132, 255, .10), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,248,251,.95)) !important; } /* Popup nghiệp vụ như phụ thu giữ nguyên bố cục riêng. */ body.app-body #drvSurchargeChooser .modal-content, body.app-body .drv-business-modal .modal-content { background: radial-gradient(520px 210px at 14% 0%, rgba(94, 165, 255, .08), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.97), rgba(247,250,255,.96)) !important; } body.app-body .modal.fade .modal-dialog { transition: transform .18s ease-out, opacity .18s ease-out !important; } @media (max-width: 767.98px) { body.app-body { --drv-popup-radius: 20px; } } @media (prefers-reduced-motion: reduce) { body.app-body .modal.fade .modal-dialog, body.app-body .drv-global-popup-card, body.app-body .swal2-popup { transition: none !important; animation: none !important; } }