/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* Fix mất xuống dòng: khối mô tả tòa nhà (Elementor text-editor pull dynamic content
   không chạy wpautop) xuất text thô không có <p>/<br>, trình duyệt dồn thành 1 đoạn.
   pre-line giữ nguyên newline trong source HTML. */
.single-product .content-box {
	white-space: pre-line;
}

/* 27-08: bỏ cơ chế "Xem thêm/Rút gọn" (widget HTML tự viết cắt mô tả ở max-height 420px,
   chỉ hiện đủ khi bấm nút) — client báo "trên máy tính thiếu thông tin, không hiện full".
   Nội dung giờ luôn hiển thị đầy đủ trên mọi thiết bị. Nút ẩn luôn. */
.single-product .content-box {
	max-height: none !important;
	overflow: visible !important;
}
.single-product .moreless-button {
	display: none !important;
}

/* 27-08: toàn bộ link bài viết hiện màu Xanh Lam nổi bật (client yêu cầu — trước đó
   link hiện màu đen do theme không đặt màu cho link trong content-box).
   KHÔNG gạch chân (bỏ 27-08: client chỉ muốn màu xanh, không muốn gạch chân). */
.single-product .content-box a,
.single-product .content-box a:visited {
	color: #1a6dd4 !important;
}
.single-product .content-box a:hover {
	color: #0b4ea2 !important;
}

/* 31-08: đồng bộ khoảng cách nội dung frontend ≡ backend editor (client: "backend chuẩn,
   ngoài trang lại rộng thênh thang"). Nguyên nhân: line-height 1.65 + p margin-bottom 28px
   (product) / 31.5px (post), cộng white-space:pre-line giữ ký tự \n giữa các thẻ <p> →
   mỗi đoạn cách nhau 54px thay vì ~1 dòng. Fix: line-height 1.5; product p margin 0
   (khoảng cách đoạn do \n giữa các thẻ tạo ra ≈ 24px ≈ 1 dòng như backend — đã kiểm tra
   0/621 product có thẻ dính chặt </p><p> nên không có đoạn nào dính khối);
   bài viết blog p margin 1em. */
.single-product .content-box {
	line-height: 1.5;
}
.single-product .content-box p {
	margin: 0;
}
.single-post .elementor-widget-theme-post-content,
.single-post .entry-content {
	line-height: 1.5;
}
.single-post .elementor-widget-theme-post-content p,
.single-post .entry-content p {
	margin: 0 0 1em;
}

/* ==========================================================================
   Gallery Lightbox & View More Button
   ========================================================================== */
.jet-woo-product-gallery-slider {
	position: relative;
}

.jet-woo-product-gallery-slider .jet-woo-product-gallery__image-item a {
	cursor: zoom-in;
}

.jet-gallery-view-more-btn {
	position: absolute;
	bottom: 16px;
	right: 16px;
	z-index: 9;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	background: rgba(18, 24, 38, 0.75);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #ffffff;
	font-size: 13px;
	font-weight: 500;
	border-radius: 20px;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
	transition: all 0.2s ease;
	user-select: none;
}

.jet-gallery-view-more-btn:hover {
	background: #1a6dd4;
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(26, 109, 212, 0.35);
}

.jet-gallery-view-more-btn svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

/* ==========================================================================
   TVP Custom Showcase Gallery (Grid 60/40 + Fullscreen Lightbox & Thumbnails)
   ========================================================================== */
.tvp-gallery-wrapper {
	position: relative;
	width: 100%;
	margin-bottom: 24px;
	font-family: inherit;
}

/* Action Bar: Chia sẻ & Lưu toà nhà */
.tvp-gallery-action-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-bottom: 12px;
}

.tvp-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 500;
	color: #374151;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.2s ease;
	user-select: none;
	line-height: 1;
}

.tvp-action-btn svg {
	width: 15px;
	height: 15px;
	fill: #4b5563;
	transition: fill 0.2s ease;
}

.tvp-action-btn:hover {
	color: #1a6dd4;
	border-color: #1a6dd4;
	background: #f0f7ff;
}

.tvp-action-btn:hover svg {
	fill: #1a6dd4;
}

.tvp-action-save.is-saved svg {
	fill: #ef4444;
}

/* Mosaic Grid — theo design Stitch: grid 4 cột, hero span 2x2 (~50%), gap 16px */
.tvp-gallery-mosaic {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr 1fr;
	gap: 16px;
	width: 100%;
	height: 500px;
	background: #f3f4f6;
}

.tvp-mosaic-item {
	position: relative;
	cursor: pointer;
	overflow: hidden;
	border-radius: 8px;
}

.tvp-mosaic-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.tvp-mosaic-item:hover img {
	transform: scale(1.05);
}

.tvp-mosaic-main {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
	border-radius: 12px;
}

.tvp-mosaic-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.10);
	transition: background 0.3s ease;
	pointer-events: none;
}

.tvp-mosaic-item:hover .tvp-mosaic-overlay {
	background: transparent;
}

.tvp-zoom-hint {
	position: absolute;
	bottom: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 12px;
	color: #ffffff;
	background: rgba(17, 24, 39, 0.7);
	backdrop-filter: blur(4px);
	border-radius: 16px;
	opacity: 0;
	transform: translateY(6px);
	transition: all 0.25s ease;
}

.tvp-zoom-hint svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.tvp-mosaic-main:hover .tvp-zoom-hint {
	opacity: 1;
	transform: translateY(0);
}

/* Badge 'Xem tất cả X ảnh' — pill trắng icon xanh theo Stitch, neo góc dưới-phải grid */
.tvp-mosaic-badge-btn {
	position: absolute;
	bottom: 16px;
	right: 16px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px !important;
	box-sizing: border-box !important;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
	font-family: inherit;
	line-height: 1;
}

.tvp-mosaic-badge-btn:hover {
	background: #ffffff;
	transform: translateY(-1px);
}

.tvp-mosaic-badge-btn svg {
	width: 16px;
	height: 16px;
	fill: #1a6dd4;
	flex-shrink: 0;
}

.tvp-mosaic-badge-btn span {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: #191c22;
	white-space: nowrap;
}

/* Mobile Responsive */
@media (max-width: 767px) {
	.tvp-gallery-mosaic {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 260px 110px 110px;
		gap: 8px;
		height: auto;
	}
	.tvp-mosaic-main {
		grid-column: 1 / 3;
		grid-row: 1 / 2;
		border-radius: 10px;
	}
}

/* ==========================================================================
   TVP Lightbox Modal & Thumbnail Strip
   ========================================================================== */
.tvp-lightbox-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tvp-lightbox-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.tvp-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 15, 25, 0.94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.tvp-lightbox-container {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	z-index: 2;
}

/* Header */
.tvp-lightbox-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 24px;
	background: rgba(0, 0, 0, 0.45);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

.tvp-lightbox-info {
	display: flex;
	align-items: center;
	gap: 14px;
}

.tvp-lightbox-title {
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
}

.tvp-lightbox-counter {
	display: inline-block;
	font-size: 13px;
	color: #94a3b8;
	padding: 2px 10px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 12px;
}

.tvp-lightbox-controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tvp-ctrl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border: none;
	cursor: pointer;
	color: #ffffff;
	transition: background 0.2s ease, transform 0.2s ease;
}

.tvp-ctrl-btn:hover {
	background: #1a6dd4;
	transform: scale(1.05);
}

.tvp-ctrl-btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Viewport & Slide */
.tvp-lightbox-viewport {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 60px;
	overflow: hidden;
}

.tvp-lightbox-slide {
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tvp-lightbox-main-img {
	max-width: 100%;
	max-height: calc(100vh - 180px);
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	transition: opacity 0.2s ease;
	user-select: none;
}

/* Navigation Buttons */
.tvp-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #ffffff;
	cursor: pointer;
	transition: all 0.2s ease;
}

.tvp-nav-prev { left: 20px; }
.tvp-nav-next { right: 20px; }

.tvp-nav-btn:hover {
	background: #1a6dd4;
	border-color: #1a6dd4;
	transform: translateY(-50%) scale(1.08);
}

.tvp-nav-btn svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

/* Bottom Thumbnails Strip Bar */
.tvp-lightbox-footer {
	padding: 12px 20px;
	background: rgba(0, 0, 0, 0.55);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	overflow-x: auto;
	white-space: nowrap;
}

.tvp-thumbnail-track {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0 auto;
	width: max-content;
}

.tvp-thumb-item {
	width: 76px;
	height: 52px;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.45;
	border: 2px solid transparent;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.tvp-thumb-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tvp-thumb-item:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}

.tvp-thumb-item.is-active {
	opacity: 1;
	border-color: #1a6dd4;
	box-shadow: 0 0 10px rgba(26, 109, 212, 0.7);
	transform: translateY(-2px);
}

/* ==========================================================================
   SVG hardening: theme main.css sets .elementor-element svg { width: 1em }
   which collapses inline icons — pin icon dimensions explicitly.
   Astra inline CSS also sets button { padding: 20px 40px } which blows up
   the control buttons — reset padding explicitly.
   ========================================================================== */
.tvp-gallery-wrapper svg,
.tvp-lightbox-modal svg {
	display: inline-block !important;
	flex: none !important;
	min-width: 14px !important;
}

.tvp-ctrl-btn,
.tvp-nav-btn {
	padding: 0 !important;
	box-sizing: border-box !important;
}

.tvp-action-btn {
	padding: 6px 14px !important;
	box-sizing: border-box !important;
}

.tvp-action-btn svg {
	width: 15px !important;
	height: 15px !important;
}

.tvp-mosaic-badge-btn svg {
	width: 16px !important;
	height: 16px !important;
}

.tvp-zoom-hint svg {
	width: 14px !important;
	height: 14px !important;
}

.tvp-ctrl-btn svg {
	width: 18px !important;
	height: 18px !important;
}

.tvp-nav-btn svg {
	width: 26px !important;
	height: 26px !important;
}