/* ═══════════════════════════════════════════════════════════════
   PORTLOGICS · Block Builder — FRONTEND (light techno)
   Hiển thị blocks do sales/marketing dựng cho trang/bài.
   ═══════════════════════════════════════════════════════════════ */

.pl-blocks { margin: 0 0 32px; font-family: Inter, system-ui, -apple-system, sans-serif; color: #0a0f1f; }
.pl-blk { margin: 28px 0; }
.pl-blk:first-child { margin-top: 0; }
.pl-blk:last-child  { margin-bottom: 0; }

/* Heading chung */
.pl-blk-h {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 2.4vw, 30px);
	letter-spacing: -0.01em;
	color: #0a0f1f;
	margin: 0 0 20px;
	position: relative;
	padding-left: 14px;
}
.pl-blk-h::before {
	content: '';
	position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px;
	background: linear-gradient(180deg, #06b6d4, #7c3aed);
	border-radius: 3px;
}

/* ═══ 1. HERO ═══════════════════════════════════════════════════ */
.pl-blk-hero {
	position: relative;
	padding: clamp(36px, 5vw, 64px) clamp(20px, 3vw, 40px);
	border-radius: 20px;
	background:
		radial-gradient(600px 400px at 20% 20%, rgba(6,182,212,.12), transparent 60%),
		radial-gradient(500px 380px at 85% 80%, rgba(124,58,237,.10), transparent 65%),
		linear-gradient(135deg, #ffffff 0%, #f9fafc 100%);
	border: 1px solid #e3e6ef;
	overflow: hidden;
}
/* Compact khi không có eyebrow / subtitle — tránh khoảng trống thô ở đầu/cuối hero */
.pl-blk-hero.no-eyebrow { padding-top: clamp(28px, 3.5vw, 44px); }
.pl-blk-hero.no-sub.no-btn { padding-bottom: clamp(28px, 3.5vw, 44px); }
.pl-blk-hero.no-eyebrow.no-sub.no-btn { padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px); }
.pl-blk-hero.has-bg {
	background:
		linear-gradient(135deg, rgba(10,15,31,.62), rgba(10,15,31,.35)),
		var(--bg, transparent) center / cover no-repeat;
	border: none;
	color: #ffffff;
}
.pl-blk-hero.has-bg { background-size: cover; background-position: center; }
.pl-blk-hero.has-bg .pl-blk-hero-title,
.pl-blk-hero.has-bg .pl-blk-hero-sub { color: #ffffff; }
.pl-blk-hero.has-bg .pl-blk-eyebrow { background: rgba(255,255,255,.15); color:#fff; border-color: rgba(255,255,255,.25); }
.pl-blk-hero::before {
	content: '';
	position: absolute; inset: 0;
	background-image:
		repeating-linear-gradient(0deg,  rgba(8,145,178,.04) 0 1px, transparent 1px 48px),
		repeating-linear-gradient(90deg, rgba(8,145,178,.04) 0 1px, transparent 1px 48px);
	pointer-events: none;
}
.pl-blk-hero.has-bg::before { display: none; }

.pl-blk-hero-inner { position: relative; z-index: 1; max-width: 720px; }
.pl-blk-eyebrow {
	display: inline-block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .12em;
	padding: 4px 10px;
	border: 1px solid rgba(6,182,212,.35);
	border-radius: 999px;
	background: rgba(6,182,212,.07);
	color: #0891b2;
	margin-bottom: 16px;
}
.pl-blk-hero-title {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-weight: 900;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 14px;
	color: #0a0f1f;
}
.pl-blk-hero-sub {
	font-size: clamp(15px, 1.3vw, 17px);
	line-height: 1.6;
	color: #4b5468;
	margin: 0 0 22px;
}

/* ═══ 2. TEXT / WYSIWYG ════════════════════════════════════════ */
.pl-blk-text {
	max-width: 780px;
	font-size: 16px;
	line-height: 1.75;
	color: #0a0f1f;
}
.pl-blk-text p { margin: 0 0 1em; }
.pl-blk-text a { color: #0891b2; text-decoration: none; border-bottom: 1px solid rgba(6,182,212,.35); transition: border-color .15s, color .15s; }
.pl-blk-text a:hover { color: #06b6d4; border-bottom-color: #06b6d4; }
.pl-blk-text ul, .pl-blk-text ol { padding-left: 1.4em; margin: 0 0 1em; }
.pl-blk-text li { margin-bottom: .5em; }
.pl-blk-text strong, .pl-blk-text b { color: #0a0f1f; font-weight: 700; }

/* ═══ 3. IMAGE ════════════════════════════════════════════════════ */
.pl-blk-image { margin-inline: auto; }
.pl-blk-image img {
	max-width: 100%; height: auto;
	border-radius: 14px;
	border: 1px solid #e3e6ef;
	box-shadow: 0 12px 32px -12px rgba(10,15,31,.12);
	display: block;
}
.pl-blk-image figcaption {
	margin-top: 10px;
	font-size: 13px;
	color: #6d7589;
	text-align: center;
	font-style: italic;
}
.pl-blk-img-center { text-align: center; }
.pl-blk-img-center img { margin: 0 auto; }
.pl-blk-img-left    { float: left; margin: 0 24px 16px 0; max-width: 50%; }
.pl-blk-img-right   { float: right; margin: 0 0 16px 24px; max-width: 50%; }
.pl-blk-img-full img { width: 100%; border-radius: 0; margin-inline: calc(50% - 50vw); max-width: 100vw; }

/* ═══ 4. FEATURES 3 cột ═══════════════════════════════════════════ */
.pl-blk-features { padding: 12px 0; }
.pl-blk-feat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.pl-blk-feat {
	background: #ffffff;
	border: 1px solid #e3e6ef;
	border-radius: 14px;
	padding: 22px 20px;
	transition: border-color .18s, transform .18s, box-shadow .18s;
	position: relative;
	overflow: hidden;
}
.pl-blk-feat::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
	background: linear-gradient(90deg, #06b6d4, #7c3aed);
	opacity: 0; transition: opacity .18s;
}
.pl-blk-feat:hover {
	border-color: #06b6d4;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -12px rgba(6,182,212,.25);
}
.pl-blk-feat:hover::before { opacity: 1; }
.pl-blk-feat-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(6,182,212,.10), rgba(124,58,237,.08));
	border: 1px solid rgba(6,182,212,.18);
	font-size: 22px;
	margin-bottom: 14px;
}
.pl-blk-feat-title {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-weight: 700;
	font-size: 17px;
	margin: 0 0 8px;
	color: #0a0f1f;
}
.pl-blk-feat-desc { font-size: 14.5px; line-height: 1.6; color: #4b5468; margin: 0; }

/* ═══ 5. STATS 4 số ═══════════════════════════════════════════════ */
.pl-blk-stats {
	padding: 24px 22px;
	background: linear-gradient(135deg, #0a0f1f 0%, #1e2436 100%);
	border-radius: 18px;
	color: #ffffff;
	position: relative;
	overflow: hidden;
}
.pl-blk-stats .pl-blk-h { color: #ffffff; }
.pl-blk-stats .pl-blk-h::before { background: linear-gradient(180deg, #22d3ee, #a78bfa); }
.pl-blk-stats::before {
	content: ''; position: absolute; inset: 0;
	background:
		radial-gradient(400px 260px at 10% 20%, rgba(34,211,238,.18), transparent 60%),
		radial-gradient(420px 280px at 90% 80%, rgba(167,139,250,.15), transparent 62%);
	pointer-events: none;
}
.pl-blk-stat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	position: relative;
	z-index: 1;
}
.pl-blk-stat {
	text-align: center;
	padding: 16px 10px;
	border-right: 1px solid rgba(255,255,255,.08);
}
.pl-blk-stat:last-child { border-right: none; }
.pl-blk-stat-num {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 900;
	font-size: clamp(32px, 4vw, 44px);
	background: linear-gradient(135deg, #22d3ee, #a78bfa);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	letter-spacing: -.01em;
	line-height: 1;
	margin-bottom: 6px;
}
.pl-blk-stat-lbl {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
	color: #cbd5e1;
}

/* ═══ 6. CTA ═══════════════════════════════════════════════════════ */
.pl-blk-cta {
	text-align: center;
	padding: clamp(32px, 4.5vw, 56px) clamp(20px, 3vw, 40px);
	border-radius: 18px;
	background:
		radial-gradient(500px 300px at 50% 0%, rgba(6,182,212,.10), transparent 60%),
		linear-gradient(135deg, #ffffff, #f6f7fb);
	border: 1px solid #e3e6ef;
	position: relative; overflow: hidden;
}
.pl-blk-cta::before {
	content: '';
	position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 140px; height: 2px;
	background: linear-gradient(90deg, transparent, #06b6d4, #7c3aed, transparent);
}
.pl-blk-cta-title {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 900;
	font-size: clamp(22px, 2.6vw, 32px);
	line-height: 1.2;
	margin: 0 0 12px;
	color: #0a0f1f;
}
.pl-blk-cta-sub {
	font-size: 15.5px; line-height: 1.6; color: #4b5468;
	margin: 0 0 24px; max-width: 540px; margin-inline: auto;
}

/* ═══ 7. QUOTE ════════════════════════════════════════════════════ */
.pl-blk-quote {
	background: #ffffff;
	border: 1px solid #e3e6ef;
	border-left: 4px solid #06b6d4;
	border-radius: 14px;
	padding: 24px 28px;
	margin: 28px 0;
	position: relative;
}
.pl-blk-quote::before {
	content: '"';
	position: absolute; top: -8px; right: 22px;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 80px; font-weight: 900;
	color: rgba(6,182,212,.15);
	line-height: 1;
}
.pl-blk-quote-text {
	font-size: 17px; line-height: 1.6;
	color: #0a0f1f;
	font-style: italic;
	margin: 0 0 14px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
}
.pl-blk-quote-foot {
	font-size: 13.5px; color: #4b5468;
	display: flex; gap: 8px; align-items: baseline;
}
.pl-blk-quote-foot cite {
	font-style: normal;
	font-weight: 600;
	color: #0a0f1f;
}
.pl-blk-quote-foot span { color: #6d7589; }

/* ═══ 8. GALLERY ═══════════════════════════════════════════════════ */
.pl-blk-gallery { padding: 6px 0; }
.pl-blk-gal-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.pl-blk-gal-cell {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
	background: #e3e6ef;
	position: relative;
	transition: transform .2s;
}
.pl-blk-gal-cell img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .4s, filter .2s;
}
.pl-blk-gal-cell:hover img { transform: scale(1.06); filter: brightness(1.05); }
.pl-blk-gal-cell::after {
	content: '⤢';
	position: absolute; top: 8px; right: 8px;
	width: 28px; height: 28px;
	background: rgba(10,15,31,.55);
	color: #fff;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: opacity .2s;
	font-size: 14px;
}
.pl-blk-gal-cell:hover::after { opacity: 1; }

/* ═══ BUTTON chung — high-contrast, chuyên nghiệp ═════════════════ */
.pl-blk-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 26px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	letter-spacing: .02em;
	/* Gradient đậm hơn để chữ trắng hiện rõ */
	background: linear-gradient(135deg, #0891b2 0%, #6d28d9 100%);
	color: #ffffff !important;
	text-decoration: none;
	border-radius: 11px;
	border: 1px solid rgba(255,255,255,.16);
	box-shadow:
		0 1px 0 rgba(255,255,255,.18) inset,
		0 0 0 1px rgba(10,15,31,.08),
		0 10px 24px -10px rgba(8,145,178,.55);
	text-shadow: 0 1px 0 rgba(10,15,31,.35);
	transition: transform .15s, box-shadow .15s, filter .15s;
	cursor: pointer;
}
.pl-blk-btn span, .pl-blk-btn * { color: #ffffff; }
.pl-blk-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.08);
	box-shadow:
		0 1px 0 rgba(255,255,255,.2) inset,
		0 0 0 1px rgba(10,15,31,.1),
		0 14px 32px -10px rgba(109,40,217,.55);
	color: #ffffff !important;
}
.pl-blk-btn:active { transform: translateY(0); }
.pl-blk-btn-lg { padding: 16px 32px; font-size: 16px; }

/* Khi hero có chữ trắng (has-bg), giữ nút rõ */
.pl-blk-hero.has-bg .pl-blk-btn {
	background: rgba(255,255,255,.96);
	color: #0a0f1f !important;
	border-color: rgba(255,255,255,.8);
	text-shadow: none;
}
.pl-blk-hero.has-bg .pl-blk-btn span { color: #0a0f1f; }

/* ═══ RESPONSIVE ═════════════════════════════════════════════════ */
@media (max-width: 900px) {
	.pl-blk-feat-grid { grid-template-columns: 1fr; gap: 14px; }
	.pl-blk-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.pl-blk-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 16px; }
	.pl-blk-stat:nth-last-child(-n+2) { border-bottom: none; }
	.pl-blk-gal-grid { grid-template-columns: repeat(2, 1fr); }
	.pl-blk-img-left, .pl-blk-img-right { float: none; margin: 16px auto; max-width: 100%; }
}
@media (max-width: 480px) {
	.pl-blk-hero-title { font-size: 26px; }
	.pl-blk-gal-grid   { grid-template-columns: 1fr; }
}

/* Background image helper cho hero (inline) */
.pl-blk-hero.has-bg[style*="background-image"] { background-blend-mode: normal; }