/**
 * assets/css/view-access.css
 * "Quyền xem album theo hạng thành viên" — CTA khoá album khi user chưa đủ hạng.
 *
 * Kế thừa CSS variables từ blog.css (--blog-green, --blog-text, --blog-radius-*…).
 * Prefix: blt-va-
 *
 * @package ToanNV
 */

/* ════════════════════════════════════════════════════════════
   CTA — hiển thị khi user chưa đủ hạng để xem album
════════════════════════════════════════════════════════════ */
.blt-va-cta {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	max-width:      560px;
	margin:         32px auto;
	padding:        36px 24px;
	border:         1px solid var(--blog-border, #e6e0d4);
	border-radius:  var(--blog-radius-lg, 18px);
	background:     var(--blog-green-pale, #e8f5e9);
	color:          var(--blog-text, #2d3a2e);
	font-family:    var(--blog-font-body, 'Nunito', sans-serif);
}
.blt-va-cta__icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           60px;
	height:          60px;
	margin-bottom:   16px;
	border-radius:   50%;
	background:      #fff;
	color:           var(--blog-green, #4caf50);
}
.blt-va-cta__icon svg { width: 28px; height: 28px; }
.blt-va-cta__title {
	margin:      0 0 8px;
	font-family: var(--blog-font-heading, 'Quicksand', sans-serif);
	font-size:   clamp(1.2rem, 3vw, 1.5rem);
	font-weight: 700;
	color:       var(--blog-green-dark, #2e7d32);
}
.blt-va-cta__desc {
	margin:      0 0 18px;
	font-size:   0.96rem;
	line-height: 1.6;
	color:       var(--blog-text-muted, #5a7060);
	overflow-wrap: anywhere;
}
.blt-va-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.blt-va-cta__btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         11px 24px;
	border-radius:   var(--blog-radius-pill, 999px);
	background:      var(--blog-green, #4caf50);
	color:           #fff;
	font-weight:     600;
	text-decoration: none;
	transition:      var(--blog-transition, all 0.25s ease);
}
.blt-va-cta__btn:hover { background: var(--blog-green-dark, #2e7d32); }

/* Hint nhỏ dưới ô select hạng (album create/edit modal) */
.blt-va-field__hint {
	display:    block;
	margin-top: 4px;
	font-size:  0.78rem;
	color:      var(--blog-text-muted, #5a7060);
}

/* ════════════════════════════════════════════════════════════
   Responsive
════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
	.blt-va-cta            { margin: 24px auto; padding: 28px 18px; }
	.blt-va-cta__actions   { flex-direction: column; width: 100%; }
	.blt-va-cta__btn       { width: 100%; }
}