/* =========================================================
   VMOD Point – thanh tiêu đề trang
   Màu chủ đạo: --vtb-c1 / --vtb-c2 (dạng "r,g,b")
   ========================================================= */
:root { --vtb-c1: 225, 29, 72; --vtb-c2: 255, 181, 71; }

.vmodp-titlebar {
	position: relative !important;
	overflow: hidden !important;
	isolation: isolate;
	box-sizing: border-box;
	padding-top: clamp(26px, 4vw, 42px) !important;
	padding-bottom: clamp(26px, 4vw, 42px) !important;
	color: #e8edf7 !important;
	background:
		radial-gradient(900px 260px at 6% 0%, rgba(var(--vtb-c1), .38), transparent 62%),
		radial-gradient(700px 260px at 100% 120%, rgba(var(--vtb-c2), .22), transparent 60%),
		linear-gradient(135deg, #161a29 0%, #0b0e17 100%) !important;
	border-top: 1px solid rgba(255, 255, 255, .06) !important;
	border-bottom: 1px solid rgba(var(--vtb-c1), .55) !important;
	box-shadow: inset 0 -30px 60px -40px rgba(var(--vtb-c1), .45);
}
/* Lưới mờ + vệt sáng chéo kiểu GTA */
.vmodp-titlebar::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 38px 38px;
	-webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 85%);
	mask-image: linear-gradient(90deg, #000 20%, transparent 85%);
	pointer-events: none;
}
.vmodp-titlebar::after {
	content: "";
	position: absolute; z-index: -1;
	top: -40%; right: 8%;
	width: 180px; height: 180%;
	background: linear-gradient(90deg, transparent, rgba(var(--vtb-c2), .10), transparent);
	transform: skewX(-24deg);
	pointer-events: none;
	animation: vmodp-tb-sweep 7s ease-in-out infinite;
}
@keyframes vmodp-tb-sweep {
	0%, 100% { transform: translateX(0) skewX(-24deg); opacity: .6; }
	50% { transform: translateX(-120px) skewX(-24deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .vmodp-titlebar::after { animation: none; } }

/* Lớp bọc trung gian của theme */
.vmodp-titlebar .vmodp-titlebar__layer {
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border-color: transparent !important;
}

/* Tiêu đề */
.vmodp-titlebar .vmodp-titlebar__title {
	position: relative !important;
	display: inline-block !important;
	margin: 0 !important;
	padding: 0 0 14px !important;
	font-size: clamp(26px, 4.2vw, 42px) !important;
	line-height: 1.1 !important;
	font-weight: 900 !important;
	letter-spacing: .03em !important;
	text-transform: uppercase;
	text-shadow: none !important;
	background: linear-gradient(92deg, #ffffff 0%, #ffffff 45%, rgb(var(--vtb-c2)) 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	border: 0 !important;
}
.vmodp-titlebar .vmodp-titlebar__title * { -webkit-text-fill-color: inherit !important; color: inherit !important; background: none !important; }
.vmodp-titlebar .vmodp-titlebar__title::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: 72px; height: 4px; border-radius: 4px;
	background: linear-gradient(90deg, rgb(var(--vtb-c1)), rgb(var(--vtb-c2)));
	box-shadow: 0 0 14px rgba(var(--vtb-c1), .8);
}

/* Dòng phụ dạng nhãn */
.vmodp-titlebar .vmodp-titlebar__sub {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	width: auto !important;
	margin: 14px 0 0 !important;
	padding: 5px 14px 5px 10px !important;
	border-radius: 99px !important;
	background: rgba(255, 255, 255, .06) !important;
	border: 1px solid rgba(255, 255, 255, .14) !important;
	color: #dfe5f1 !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase;
}
.vmodp-titlebar .vmodp-titlebar__sub::before {
	content: "";
	width: 8px; height: 8px; border-radius: 50%; flex: none;
	background: rgb(var(--vtb-c1));
	box-shadow: 0 0 0 3px rgba(var(--vtb-c1), .25), 0 0 10px rgba(var(--vtb-c1), .9);
}
.vmodp-titlebar .vmodp-titlebar__sub * { color: inherit !important; background: none !important; }

/* Đặt tiêu đề và nhãn trên 2 dòng riêng */
.vmodp-titlebar .vmodp-titlebar__title + .vmodp-titlebar__sub,
.vmodp-titlebar .vmodp-titlebar__layer + .vmodp-titlebar__sub { display: flex !important; width: max-content !important; max-width: 100%; }

/* Breadcrumb */
.vmodp-titlebar .vmodp-titlebar__crumbs,
.vmodp-titlebar .vmodp-titlebar__crumbs * { color: #9aa4b8 !important; background: none !important; font-size: 13px !important; }
.vmodp-titlebar .vmodp-titlebar__crumbs a:hover { color: #fff !important; }

/* Liên kết & chữ khác trong thanh */
.vmodp-titlebar a { color: #fff; }
.vmodp-titlebar p { color: #b9c2d4 !important; }

/* Căn giữa */
.vmodp-titlebar--center { text-align: center !important; }
.vmodp-titlebar--center .vmodp-titlebar__title::after { left: 50%; transform: translateX(-50%); }
.vmodp-titlebar--center .vmodp-titlebar__sub { margin-left: auto !important; margin-right: auto !important; }

@media (max-width: 680px) {
	.vmodp-titlebar .vmodp-titlebar__title { font-size: 26px !important; }
	.vmodp-titlebar::after { display: none; }
}