/* ==================================================================
   detail-page.css
   สไตล์กลางสำหรับหน้ารายละเอียด (view_social.php, view_researchunit.php,
   view_award.php ฯลฯ) — โทนสีเดียวกับ header ของเว็บ
   ================================================================== */

.rv-page {
	--rv-primary: #667eea;
	--rv-secondary: #764ba2;
	--rv-ink: #1f2937;
	--rv-ink-soft: #6b7280;
	--rv-line: #e9ecf3;
	--rv-surface: #ffffff;
	--rv-tint: #f4f5fb;
	--rv-soft: rgba(102, 126, 234, 0.14);
	--rv-soft-strong: rgba(102, 126, 234, 0.35);
	--rv-glow: rgba(102, 126, 234, 0.38);
	--rv-radius: 18px;
	--rv-shadow: 0 10px 30px rgba(31, 41, 55, 0.07);
	--rv-shadow-hover: 0 18px 42px var(--rv-soft);

	font-family: 'Prompt', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--rv-ink);
}

/* ---------- ธีมสีตามหมวดเนื้อหา ---------- */

.rv-page--award {
	--rv-primary: #e0562b;
	--rv-secondary: #d62a67;
	--rv-soft: rgba(224, 86, 43, 0.14);
	--rv-soft-strong: rgba(224, 86, 43, 0.4);
	--rv-glow: rgba(224, 86, 43, 0.38);
	--rv-tint: #fdf5f1;
}

.rv-page--news {
	--rv-primary: #2575fc;
	--rv-secondary: #6a11cb;
	--rv-soft: rgba(37, 117, 252, 0.13);
	--rv-soft-strong: rgba(37, 117, 252, 0.4);
	--rv-glow: rgba(37, 117, 252, 0.36);
	--rv-tint: #f2f6fe;
}

/* ================= ส่วนหัวของหน้า ================= */

.rv-hero {
	position: relative;
	margin-top: 72px;          /* ชดเชยแถบเมนูที่ตรึงอยู่ด้านบน */
	padding: 3.25rem 0 5.5rem;
	background: linear-gradient(135deg, var(--rv-primary) 0%, var(--rv-secondary) 100%);
	color: #fff;
	overflow: hidden;
}

.rv-hero::after {
	content: '';
	position: absolute;
	right: -120px;
	top: -140px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	pointer-events: none;
}

.rv-hero::before {
	content: '';
	position: absolute;
	left: -90px;
	bottom: -170px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	pointer-events: none;
}

.rv-hero > .container {
	position: relative;
	z-index: 1;
}

.rv-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 1.1rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.82);
}

.rv-breadcrumb a {
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none;
	transition: color 0.2s ease;
}

.rv-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.rv-breadcrumb .sep { opacity: 0.55; }
.rv-breadcrumb .current {
	max-width: 32ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rv-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.85rem;
	margin-bottom: 0.9rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.28);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.rv-hero-title {
	font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.6rem);
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 0.6rem;
	color: #fff;
	max-width: 30ch;
}

.rv-hero-subtitle {
	font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.12rem);
	font-weight: 300;
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 1.25rem;
	max-width: 60ch;
}

.rv-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.rv-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.25);
	font-size: 0.86rem;
	line-height: 1.4;
	backdrop-filter: blur(4px);
}

.rv-chip i { font-size: 0.95rem; opacity: 0.9; }

.rv-chip--solid {
	background: #fff;
	color: var(--rv-secondary);
	border-color: #fff;
	font-weight: 600;
}

.rv-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.rv-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.25rem;
	border-radius: 999px;
	font-size: 0.92rem;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.rv-btn:hover { transform: translateY(-2px); }

.rv-btn--light {
	background: #fff;
	color: var(--rv-secondary);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.rv-btn--light:hover { color: var(--rv-secondary); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2); }

.rv-btn--ghost {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

.rv-btn--ghost:hover { background: rgba(255, 255, 255, 0.24); color: #fff; }

.rv-btn--outline {
	background: transparent;
	border-color: var(--rv-primary);
	color: var(--rv-primary);
}

.rv-btn--outline:hover {
	background: var(--rv-primary);
	color: #fff;
}

/* ================= เนื้อหาหลัก ================= */

.rv-main {
	position: relative;
	margin-top: -3.75rem;
	padding-bottom: 3.5rem;
	z-index: 2;
}

.rv-panel {
	background: var(--rv-surface);
	border: 1px solid var(--rv-line);
	border-radius: var(--rv-radius);
	box-shadow: var(--rv-shadow);
	padding: clamp(1.25rem, 0.9rem + 1.2vw, 2.25rem);
	margin-bottom: 1.5rem;
}

.rv-block + .rv-block {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px dashed var(--rv-line);
}

.rv-heading {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--rv-ink);
	margin: 0 0 1.1rem;
}

.rv-heading-icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: var(--rv-soft);
	color: var(--rv-primary);
	font-size: 1.1rem;
}

/* ---------- ตารางข้อมูลย่อย ---------- */

.rv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0.85rem;
}

.rv-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.9rem 1rem;
	border-radius: 14px;
	background: var(--rv-tint);
	border: 1px solid transparent;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.rv-item:hover {
	background: #fff;
	border-color: var(--rv-soft-strong);
}

.rv-item--wide { grid-column: 1 / -1; }

.rv-item-icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: #fff;
	color: var(--rv-primary);
	box-shadow: 0 2px 6px rgba(31, 41, 55, 0.08);
	font-size: 1rem;
}

.rv-item-body { min-width: 0; }

.rv-item-label {
	font-size: 0.78rem;
	color: var(--rv-ink-soft);
	margin-bottom: 0.15rem;
}

.rv-item-value {
	font-size: 0.97rem;
	font-weight: 500;
	line-height: 1.6;
	word-break: break-word;
}

.rv-item-value a {
	color: var(--rv-primary);
	text-decoration: none;
}

.rv-item-value a:hover { text-decoration: underline; }

/* ---------- เนื้อหายาว (Rich Text) ---------- */

.rv-prose { font-size: 1rem; line-height: 1.85; }
.rv-prose .rich-content > *:first-child { margin-top: 0; }
.rv-prose .rich-content > *:last-child  { margin-bottom: 0; }

/* ---------- รูปภาพปก ---------- */

.rv-cover {
	margin: 0 0 1.75rem;
	border-radius: 14px;
	overflow: hidden;
	background: var(--rv-tint);
	text-align: center;
}

.rv-cover img {
	width: 100%;
	max-height: 420px;
	object-fit: contain;
	display: block;
}

.rv-cover--logo img { max-height: 220px; padding: 1.25rem; }

/* ---------- แถบข้อมูลท้ายบทความ ---------- */

.rv-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.87rem;
	color: var(--rv-ink-soft);
	padding-top: 1.25rem;
	margin-top: 1.75rem;
	border-top: 1px solid var(--rv-line);
}

.rv-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }

/* ================= แถบด้านข้าง ================= */

.rv-side { display: flex; flex-direction: column; gap: 1.25rem; }

@media (min-width: 992px) {
	.rv-side--sticky { position: sticky; top: 96px; }
}

.rv-card {
	background: var(--rv-surface);
	border: 1px solid var(--rv-line);
	border-radius: var(--rv-radius);
	box-shadow: var(--rv-shadow);
	overflow: hidden;
}

.rv-card-head {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.95rem 1.25rem;
	background: linear-gradient(135deg, var(--rv-primary) 0%, var(--rv-secondary) 100%);
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
}

.rv-card-body { padding: 1.25rem; }

.rv-contact-list { display: flex; flex-direction: column; gap: 0.9rem; }

.rv-contact {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-size: 0.94rem;
	line-height: 1.6;
}

.rv-contact i {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: var(--rv-tint);
	color: var(--rv-primary);
}

.rv-contact a { color: var(--rv-primary); text-decoration: none; word-break: break-word; }
.rv-contact a:hover { text-decoration: underline; }
.rv-contact .rich-content { font-size: 0.94rem; line-height: 1.6; }

/* ---------- รายการที่เกี่ยวข้อง ---------- */

.rv-related { display: flex; flex-direction: column; gap: 0.9rem; }

.rv-related-item {
	display: flex;
	gap: 0.85rem;
	padding: 0.7rem;
	border-radius: 13px;
	border: 1px solid var(--rv-line);
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.rv-related-item:hover {
	transform: translateY(-2px);
	border-color: var(--rv-soft-strong);
	box-shadow: var(--rv-shadow-hover);
	color: inherit;
}

.rv-related-thumb {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--rv-tint);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rv-ink-soft);
	font-size: 1.5rem;
	overflow: hidden;
}

.rv-related-thumb img { width: 100%; height: 100%; object-fit: cover; }

.rv-related-body { min-width: 0; }

.rv-related-title {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 0.3rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rv-related-sub {
	font-size: 0.8rem;
	color: var(--rv-ink-soft);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rv-tag {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--rv-soft);
	color: var(--rv-secondary);
	font-size: 0.74rem;
	font-weight: 500;
	margin-bottom: 0.3rem;
}

/* ---------- ฟอร์มค้นหาในแถบข้าง ---------- */

.rv-card .form-control,
.rv-card .form-select {
	border-radius: 11px;
	border-color: var(--rv-line);
	padding: 0.6rem 0.85rem;
	font-family: inherit;
	font-size: 0.94rem;
}

.rv-card .form-control:focus,
.rv-card .form-select:focus {
	border-color: var(--rv-primary);
	box-shadow: 0 0 0 0.2rem var(--rv-soft);
}

.rv-submit {
	width: 100%;
	padding: 0.65rem 1rem;
	border: none;
	border-radius: 11px;
	background: linear-gradient(135deg, var(--rv-primary) 0%, var(--rv-secondary) 100%);
	color: #fff;
	font-weight: 500;
	font-family: inherit;
	box-shadow: 0 6px 18px var(--rv-glow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rv-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 24px var(--rv-glow); }

/* ================= สถานะไม่พบข้อมูล ================= */

.rv-empty {
	margin-top: 96px;
	padding: 3.5rem 1.5rem;
	text-align: center;
}

.rv-empty-icon {
	width: 86px;
	height: 86px;
	margin: 0 auto 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--rv-soft);
	color: var(--rv-primary);
	font-size: 2.4rem;
}

/* ================= จอเล็ก ================= */

@media (max-width: 991.98px) {
	.rv-hero { padding: 2.5rem 0 4.5rem; }
	.rv-main { margin-top: -3rem; }
}

@media (max-width: 575.98px) {
	.rv-hero { padding: 2rem 0 4rem; }
	.rv-hero-title { max-width: none; }
	.rv-grid { grid-template-columns: 1fr; }
	.rv-meta { flex-direction: column; align-items: flex-start; }
	.rv-breadcrumb .current { max-width: 18ch; }
}

/* ================= ตอนสั่งพิมพ์ ================= */

@media print {
	.rv-hero { background: none !important; color: #000; margin-top: 0; padding: 1rem 0; }
	.rv-hero-title, .rv-hero-subtitle { color: #000; }
	.rv-chip { border: 1px solid #999; background: none; }
	.rv-side, .rv-hero-actions, .rv-breadcrumb { display: none !important; }
	.rv-main { margin-top: 0; }
	.rv-panel { box-shadow: none; border: 1px solid #ccc; }
}