/**
 * TC Popup Frontend Styles
 * Flatsome Child Theme
 */

/* =====================================================
   POPUP WRAPPER
   ===================================================== */

.tc-popup {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	overscroll-behavior: contain;
	transition:
		opacity .25s ease,
		visibility .25s ease;
}

/* OPEN */
.tc-popup.is-open {
	visibility: visible;
	opacity: 1;
}

/* =====================================================
   OVERLAY
   ===================================================== */

.tc-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .65);
}

/* =====================================================
   DIALOG
   ===================================================== */

.tc-popup__dialog {
	border-radius: 6px;
	position: relative;
	z-index: 2;
	width: min(600px, calc(100% - 30px));
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: #f8f0df;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
	transform: translateY(20px);
	transition: transform .25s ease;
}

/* OPEN ANIMATION */
.tc-popup.is-open .tc-popup__dialog {
	transform: translateY(0);
}

/* =====================================================
   CONTENT
   ===================================================== */

.tc-popup__content {
	position: relative;
	/* padding: 40px 30px; */
}

.tc-popup__content .section-content {
	padding: 30px;
}

/* =====================================================
   CLOSE BUTTON
   ===================================================== */

.tc-popup__close {
	position: absolute;
	top: -18px;
    right: -25px;
	z-index: 10;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #a51d15;
	font-size: 38px;
	line-height: 36px;
	cursor: pointer;
}

.tc-popup__close:hover {
	background: transparent;
	color: #7f1710;
}

/* =====================================================
   BODY LOCK (Khóa cuộn trang khi mở popup)
   ===================================================== */

html.tc-popup-open,
body.tc-popup-open {
	overflow: hidden !important;
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px) {
	.tc-popup__dialog {
		width: calc(100% - 24px);
		max-height: calc(100vh - 24px);
	}

	.tc-popup__content {
		padding: 35px 20px 25px;
	}

	.tc-popup__close {
		top: 7px;
		right: 8px;
	}
}