.popup-wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;}
.popup-wrap.hidden {display: none;}
.popup-container {background: #fff; border-radius: 12px; max-width: 600px; width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); position: relative;}
.popup-close {position: absolute; top: 15px; right: 15px; width: 32px; height: 32px; background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.3s; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);}
.popup-close:hover {background: #fff; transform: scale(1.1);}
.popup-close img {width: 16px; height: 16px; display: block;}
.popup-prev,.popup-next {position: absolute; top: 43%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.3s; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);}
.popup-prev {left: 15px;}
.popup-next {right: 15px;}
.popup-prev:hover,.popup-next:hover {background: #fff; transform: translateY(-50%) scale(1.1);}
.popup-prev img,.popup-next img {width: 20px; height: 20px; display: block;}
.popup-prev img {margin-left: -3px;}
.popup-next img {margin-right: -3px;}
#popup-slide {flex: 1; overflow: hidden;}
#popup-slide .list {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
#popup-slide .list img {max-width: 100%; height: auto; display: block;}
.popup-wrap .btn-box {padding: 15px 20px; background: #f8f9fa; border-top: 1px solid #e9ecef;}
.popup-wrap .btn-box p {text-align: center; margin: 0 0 10px 0; font-size: 14px; color: #333;}
.popup-wrap .btn-box p span {color: #0a276a; font-weight: bold;}
.popup-wrap .btn-box .btn {display: flex; gap: 10px; justify-content: center;}
.popup-wrap .btn-box button {flex: 1; max-width: 200px; padding: 12px 20px; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s;}
.popup-wrap .btn-box button:first-child {background: #0a276a; color: #fff;}
.popup-wrap .btn-box button:first-child:hover {background: #081d4f;}
.popup-wrap .btn-box button:last-child {background: #6c757d; color: #fff;}
.popup-wrap .btn-box button:last-child:hover {background: #5a6268;}

@media (max-width: 768px) {
	.popup-wrap {padding: 15px;}
	.popup-container {max-width: 100%; max-height: 85vh;}
	.popup-close {top: 10px; right: 10px; width: 28px; height: 28px;}
	.popup-close img {width: 14px; height: 14px;}
	.popup-prev,.popup-next {width: 36px; height: 36px;}
	.popup-prev {left: 10px;}
	.popup-next {right: 10px;}
	.popup-prev img,.popup-next img {width: 18px; height: 18px;}
	.popup-wrap .btn-box {padding: 12px 15px;}
	.popup-wrap .btn-box p {font-size: 13px;}
	.popup-wrap .btn-box button {padding: 10px 15px; font-size: 13px;}
}
@media (max-width: 480px) {
	.popup-wrap {padding: 10px;}
	.popup-container {border-radius: 8px;}
	.popup-close {top: 8px; right: 8px; width: 26px; height: 26px;}
	.popup-close img {width: 13px; height: 13px;}
	.popup-prev,.popup-next {width: 32px; height: 32px;}
	.popup-prev {left: 8px;}
	.popup-next {right: 8px;}
	.popup-prev img,.popup-next img {width: 16px; height: 16px;}
	.popup-wrap .btn-box {padding: 10px 12px;}
	.popup-wrap .btn-box .btn {flex-direction: column; gap: 8px;}
	.popup-wrap .btn-box button {max-width: 100%; padding: 10px; font-size: 12px;}
}