/* Popup xem ảnh bài viết ( assets/xem-anh.js ). */
.sago-xa-duoc { cursor: zoom-in; }
.sago-xa-duoc:focus-visible { outline: 3px solid #1759ba; outline-offset: 3px; }

.sago-xa { position: fixed; inset: 0; z-index: 2147483646; display: none; background: rgba(8, 10, 14, .97); color: #fff; touch-action: none; user-select: none; -webkit-user-select: none; }
.sago-xa.is-open { display: block; }
.sago-xa__san { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sago-xa__anh { max-width: 94vw; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); width: auto; height: auto; object-fit: contain; transform-origin: center; cursor: zoom-in; transition: transform .18s ease; will-change: transform; }
.sago-xa.is-zoom .sago-xa__anh { cursor: grab; }
.sago-xa.is-keo .sago-xa__anh { cursor: grabbing; transition: none; }

.sago-xa__thanh { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: linear-gradient(rgba(0, 0, 0, .55), transparent); pointer-events: none; }
.sago-xa__dem { font-size: 14px; opacity: .8; font-variant-numeric: tabular-nums; }
.sago-xa__cum { display: flex; align-items: center; gap: 6px; pointer-events: auto; }
.sago-xa__nut { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-family: inherit; font-size: 22px; font-weight: 500; line-height: 1; cursor: pointer; }
.sago-xa__nut:hover { background: rgba(255, 255, 255, .28); }
.sago-xa__nut:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sago-xa__pt { min-width: 64px; font-size: 14px; font-variant-numeric: tabular-nums; }
.sago-xa__nut[data-a="x"] { margin-left: 6px; font-size: 18px; }
.sago-xa__nut[data-a="p"], .sago-xa__nut[data-a="n"] { position: absolute; top: 50%; display: none; width: 48px; height: 48px; margin-top: -24px; font-size: 30px; }
.sago-xa__nut[data-a="p"] { left: 16px; }
.sago-xa__nut[data-a="n"] { right: 16px; }
.sago-xa--nhieu .sago-xa__nut[data-a="p"], .sago-xa--nhieu .sago-xa__nut[data-a="n"] { display: inline-flex; }
.sago-xa__cap { position: absolute; left: 50%; bottom: 14px; max-width: min(760px, 90vw); margin: 0; padding: 8px 14px; transform: translateX(-50%); border-radius: 10px; background: rgba(0, 0, 0, .45); font-size: 14px; line-height: 1.45; text-align: center; pointer-events: none; }
.sago-xa__cap[hidden], .sago-xa.is-zoom .sago-xa__cap { display: none; }

@media (max-width: 767px) {
	.sago-xa__nut[data-a="p"], .sago-xa__nut[data-a="n"] { display: none !important; }
	.sago-xa__anh { max-width: 100vw; }
	.sago-xa__pt { min-width: 56px; }
}
@media (prefers-reduced-motion: reduce) {
	.sago-xa__anh { transition: none; }
}
