/* =========================================================
   365 Tour Booking — Frontend styles
   Toàn bộ dùng !important để tránh bị theme (Flatsome/UX Builder...)
   ghi đè, vì các theme thường set sẵn style mặc định cho button, ảnh, link.
   ========================================================= */
.t365-wrap, .t365-wrap * { box-sizing: border-box !important; }

:root {
	--t365-primary: #1a7a4c;
	--t365-primary-dark: #0f5c37;
	--t365-star: #f5a623;
	--t365-text: #1d2327;
	--t365-muted: #6b7280;
	--t365-border: #e5e7eb;
	--t365-radius: 10px;

	/* Căn chỉnh (đổi trong 365 Tour Booking → Cài đặt & Hướng dẫn) */
	--t365-align-title: left;
	--t365-align-meta: space-between;
	--t365-align-price: left;
	--t365-align-actions: space-between;
}

.t365-wrap {
	font-family: inherit !important;
	color: var(--t365-text) !important;
	max-width: 1280px !important;
	margin: 0 auto !important;
	position: relative !important;
	line-height: normal !important;
}

.t365-empty { text-align: center !important; color: var(--t365-muted) !important; padding: 24px !important; }

/* ---------- Grid ---------- */
.t365-grid {
	display: grid !important;
	grid-template-columns: repeat(var(--t365-cols, 4), 1fr) !important;
	gap: 20px !important;
}
.t365-grid-preview { grid-template-columns: repeat(4, 1fr) !important; }

/* ---------- Card ---------- */
.t365-card {
	background: #fff !important;
	border: 1px solid var(--t365-border) !important;
	border-radius: var(--t365-radius) !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	transition: box-shadow .2s ease, transform .2s ease !important;
	list-style: none !important;
	margin: 0 !important;
}
.t365-card:hover {
	box-shadow: 0 10px 25px rgba(0,0,0,.08) !important;
	transform: translateY(-2px) !important;
}

.t365-card-media {
	position: relative !important;
	cursor: pointer !important;
	aspect-ratio: 4 / 3 !important;
	overflow: hidden !important;
	background: #f3f4f6 !important;
	display: block !important;
}
.t365-card-media img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
	border: 0 !important;
	transition: transform .35s ease !important;
}
.t365-card-media:hover img { transform: scale(1.06) !important; }

.t365-badge {
	position: absolute !important;
	top: 12px !important;
	left: 12px !important;
	background: var(--t365-primary-dark) !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .04em !important;
	padding: 5px 10px !important;
	border-radius: 4px !important;
	z-index: 2 !important;
	text-transform: uppercase !important;
	line-height: normal !important;
}

.t365-gallery-count {
	position: absolute !important;
	bottom: 10px !important;
	right: 10px !important;
	background: rgba(0,0,0,.6) !important;
	color: #fff !important;
	font-size: 12px !important;
	padding: 3px 8px !important;
	border-radius: 20px !important;
	z-index: 2 !important;
	line-height: normal !important;
}

.t365-card-body {
	padding: 16px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	flex: 1 !important;
}

.t365-card-title {
	font-size: 16px !important;
	font-weight: 700 !important;
	margin: 0 !important;
	line-height: 1.35 !important;
	min-height: 2.7em !important;
	text-align: var(--t365-align-title) !important;
}

.t365-card-meta {
	display: flex !important;
	align-items: center !important;
	justify-content: var(--t365-align-meta) !important;
	flex-wrap: wrap !important;
	gap: 6px 14px !important;
	font-size: 13px !important;
	color: var(--t365-muted) !important;
	width: 100% !important;
}

.t365-duration { display: inline-flex !important; align-items: center !important; gap: 4px !important; }

.t365-rating { display: inline-flex !important; align-items: center !important; gap: 6px !important; }

.t365-stars {
	position: relative !important;
	display: inline-block !important;
	font-size: 14px !important;
	line-height: 1 !important;
	letter-spacing: 2px !important;
}
.t365-stars-bg { color: #e5e7eb !important; }
.t365-stars-fg {
	position: absolute !important;
	top: 0 !important; left: 0 !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	color: var(--t365-star) !important;
}

.t365-rating-value { font-weight: 700 !important; color: var(--t365-text) !important; }
.t365-review-count { color: var(--t365-muted) !important; }

.t365-price {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--t365-text) !important;
	margin-top: 2px !important;
	text-align: var(--t365-align-price) !important;
	width: 100% !important;
}

/* ---------- Nút bấm (SEE MORE / BOOKING NOW) — dạng pill, gọn trong ô ---------- */
.t365-card-actions {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin-top: auto !important;
	padding-top: 10px !important;
	justify-content: var(--t365-align-actions) !important;
	flex-wrap: wrap !important;
	width: 100% !important;
}

.t365-wrap .t365-btn,
.t365-wrap a.t365-btn,
.t365-wrap button.t365-btn,
.t365-modal-overlay .t365-btn,
.t365-modal-overlay a.t365-btn,
.t365-modal-overlay button.t365-btn {
	all: unset !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 100% !important;
	text-align: center !important;
	padding: 9px 20px !important;
	border-radius: 999px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: .02em !important;
	line-height: 1.3 !important;
	cursor: pointer !important;
	border: 2px solid var(--t365-primary) !important;
	text-decoration: none !important;
	transition: background .2s ease, color .2s ease, opacity .2s ease !important;
	white-space: nowrap !important;
	overflow: visible !important;
	font-family: inherit !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
}
html body .t365-wrap .t365-btn:visited,
html body .t365-modal-overlay .t365-btn:visited { color: inherit !important; }

html body .t365-wrap .t365-btn-outline,
html body .t365-wrap a.t365-btn-outline,
html body .t365-wrap button.t365-btn-outline,
html body .t365-modal-overlay .t365-btn-outline,
html body .t365-modal-overlay a.t365-btn-outline,
html body .t365-modal-overlay button.t365-btn-outline {
	background: #fff !important;
	color: var(--t365-primary) !important;
}
html body .t365-wrap .t365-btn-outline:hover, html body .t365-wrap .t365-btn-outline:focus,
html body .t365-modal-overlay .t365-btn-outline:hover, html body .t365-modal-overlay .t365-btn-outline:focus {
	background: var(--t365-primary) !important; color: #fff !important;
}

html body .t365-wrap .t365-btn-solid,
html body .t365-wrap a.t365-btn-solid,
html body .t365-wrap button.t365-btn-solid,
html body .t365-modal-overlay .t365-btn-solid,
html body .t365-modal-overlay a.t365-btn-solid,
html body .t365-modal-overlay button.t365-btn-solid {
	background: var(--t365-primary) !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}
html body .t365-wrap .t365-btn-solid:hover, html body .t365-wrap .t365-btn-solid:focus,
html body .t365-modal-overlay .t365-btn-solid:hover, html body .t365-modal-overlay .t365-btn-solid:focus {
	background: var(--t365-primary-dark) !important; border-color: var(--t365-primary-dark) !important; color: #fff !important;
}

/* Hàng 2 nút trong thẻ Tour: luôn cân đối 2 bên, chia đều, KHÔNG rớt xuống dòng. */
.t365-card-actions .t365-btn,
.t365-card-actions a.t365-btn,
.t365-card-actions button.t365-btn {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
}

@media (max-width: 380px) {
	.t365-card-actions .t365-btn {
		font-size: 12px !important;
		padding: 8px 6px !important;
	}
}

/* ---------- Slider (preview) ---------- */
.t365-slider { position: relative !important; overflow: hidden !important; }
.t365-slider-track {
	display: flex !important;
	transition: transform .5s ease !important;
	will-change: transform !important;
}
.t365-slide {
	flex: 0 0 100% !important;
	max-width: 100% !important;
}

.t365-nav {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 42px !important;
	height: 42px !important;
	border-radius: 50% !important;
	border: 1px solid var(--t365-border) !important;
	background: #fff !important;
	box-shadow: 0 4px 10px rgba(0,0,0,.1) !important;
	cursor: pointer !important;
	font-size: 15px !important;
	color: var(--t365-text) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 5 !important;
	padding: 0 !important;
	line-height: 1 !important;
}
.t365-nav:hover { background: var(--t365-primary) !important; color: #fff !important; border-color: var(--t365-primary) !important; }
.t365-nav-prev { left: -6px !important; }
.t365-nav-next { right: -6px !important; }

.t365-dots {
	display: flex !important;
	justify-content: center !important;
	gap: 8px !important;
	margin-top: 16px !important;
}
.t365-dot {
	width: 9px !important;
	height: 9px !important;
	border-radius: 50% !important;
	background: var(--t365-border) !important;
	border: none !important;
	cursor: pointer !important;
	padding: 0 !important;
}
.t365-dot.is-active { background: var(--t365-primary) !important; width: 22px !important; border-radius: 6px !important; }

/* ---------- Modal (dùng chung cho Detail + Gallery) ---------- */
.t365-modal-overlay {
	position: fixed !important;
	top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
	background: rgba(15, 20, 25, .65) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 999999 !important;
	padding: 20px !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity .2s ease !important;
	margin: 0 !important;
}
.t365-modal-overlay.is-open { opacity: 1 !important; visibility: visible !important; }

.t365-modal-box {
	background: #fff !important;
	border-radius: 12px !important;
	max-width: 720px !important;
	width: 100% !important;
	max-height: 88vh !important;
	overflow-y: auto !important;
	position: relative !important;
	padding: 28px !important;
	transform: translateY(10px) !important;
	transition: transform .2s ease !important;
	margin: 0 !important;
	box-shadow: 0 20px 60px rgba(0,0,0,.3) !important;
}
.t365-modal-overlay.is-open .t365-modal-box { transform: translateY(0) !important; }

.t365-modal-close {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	width: 34px !important;
	height: 34px !important;
	border-radius: 50% !important;
	background: #f3f4f6 !important;
	border: none !important;
	font-size: 18px !important;
	cursor: pointer !important;
	z-index: 3 !important;
	line-height: 1 !important;
	padding: 0 !important;
	color: var(--t365-text) !important;
}
.t365-modal-close:hover { background: #e5e7eb !important; }

.t365-detail-image {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: 320px !important;
	object-fit: cover !important;
	border-radius: 10px !important;
	margin: 0 0 16px !important;
	display: block !important;
}
.t365-detail-title { margin: 0 0 8px !important; font-size: 22px !important; text-align: left !important; }
.t365-detail-price { font-size: 18px !important; margin: 10px 0 !important; text-align: left !important; }
.t365-detail-content { margin: 16px 0 !important; line-height: 1.7 !important; color: var(--t365-text) !important; }
.t365-detail-content p { margin: 0 0 12px !important; }
.t365-detail-booking {
	display: inline-flex !important;
	max-width: 100% !important;
	margin-top: 6px !important;
}

/* Gallery modal (khác padding vì ảnh full width) */
.t365-modal-overlay.t365-modal-gallery .t365-modal-box { padding: 0 !important; max-width: 900px !important; background: #14161a !important; }
.t365-gallery-slider { position: relative !important; overflow: hidden !important; min-height: 240px !important; }
.t365-gallery-track { display: flex !important; transition: transform .4s ease !important; }
.t365-gallery-slide {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #14161a !important;
	min-height: 240px !important;
}
.t365-gallery-slide img {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 80vh !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 auto !important;
}
.t365-gallery-empty {
	color: #fff !important;
	padding: 60px 20px !important;
	text-align: center !important;
	font-size: 14px !important;
}
.t365-modal-gallery .t365-modal-close { background: rgba(255,255,255,.15) !important; color: #fff !important; }
.t365-modal-gallery .t365-nav { background: rgba(255,255,255,.15) !important; color: #fff !important; border-color: transparent !important; }
.t365-modal-gallery .t365-nav:hover { background: var(--t365-primary) !important; }
.t365-gallery-counter {
	position: absolute !important;
	bottom: 14px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	background: rgba(0,0,0,.55) !important;
	color: #fff !important;
	font-size: 12px !important;
	padding: 4px 10px !important;
	border-radius: 20px !important;
	z-index: 4 !important;
}

body.t365-modal-active { overflow: hidden !important; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
	.t365-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.t365-grid-preview { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
	.t365-grid { grid-template-columns: repeat(1, 1fr) !important; }
	.t365-grid-preview { grid-template-columns: repeat(1, 1fr) !important; }
	.t365-nav { width: 36px !important; height: 36px !important; }
	.t365-nav-prev { left: 4px !important; }
	.t365-nav-next { right: 4px !important; }
	.t365-modal-box { padding: 18px !important; }
}