/* ═══════════════════════════════════════════════════════════════
   VÂN QUẺ cho MyBB — Diễn đàn Hoài Niệm
   Theme sáng "Giấy Dó" (mặc định) · theme tối "Mực Đêm"
   Token màu lấy nguyên từ tuvi.work/resources/css/app.css
   ═══════════════════════════════════════════════════════════════ */

:root {
	--vq-bg: #f4ecd9;
	--vq-bg-deep: #ece0c4;
	--vq-card: #fbf6e9;
	--vq-ink: #241c12;
	--vq-ink-soft: #5c4d38;
	--vq-son: #b23a2a;
	--vq-son-soft: #8f2e21;
	--vq-gold: #b8860b;
	--vq-gold-strong: #8f6708;
	--vq-cham: #2e4a6b;
	--vq-luc: #2e7d5b;
	--vq-line: #d8c9a6;
	--vq-line-strong: #b9a377;
	--vq-shadow: 0 1px 0 rgba(90, 70, 40, 0.12), 0 10px 28px -20px rgba(60, 45, 20, 0.5);
	--vq-on-son: #fbf6e9;
	--vq-display: 'Phudu', 'Be Vietnam Pro', sans-serif;
	--vq-sans: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
	--vq-mono: 'JetBrains Mono', ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--vq-bg: #14110c;
		--vq-bg-deep: #0d0b07;
		--vq-card: #1e1912;
		--vq-ink: #efe4c6;
		--vq-ink-soft: #b7a47f;
		--vq-son: #e06a50;
		--vq-son-soft: #eb8a74;
		--vq-gold: #d9ae52;
		--vq-gold-strong: #e7c979;
		--vq-cham: #8fb0d6;
		--vq-luc: #6fbf9a;
		--vq-line: #3a3222;
		--vq-line-strong: #57492e;
		--vq-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 10px 28px -20px rgba(0, 0, 0, 0.85);
		--vq-on-son: #14110c;
	}
}

:root[data-theme='dark'] {
	--vq-bg: #14110c;
	--vq-bg-deep: #0d0b07;
	--vq-card: #1e1912;
	--vq-ink: #efe4c6;
	--vq-ink-soft: #b7a47f;
	--vq-son: #e06a50;
	--vq-son-soft: #eb8a74;
	--vq-gold: #d9ae52;
	--vq-gold-strong: #e7c979;
	--vq-cham: #8fb0d6;
	--vq-luc: #6fbf9a;
	--vq-line: #3a3222;
	--vq-line-strong: #57492e;
	--vq-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 10px 28px -20px rgba(0, 0, 0, 0.85);
	--vq-on-son: #14110c;
}

/* ── nền giấy dó + nhiễu hạt ── */
html { background: var(--vq-bg); }
body {
	background: var(--vq-bg);
	color: var(--vq-ink);
	font-family: var(--vq-sans);
	font-size: 14px;
	line-height: 1.55;
	position: relative;
}
body::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(../../../%23n)'/%3E%3C/svg%3E");
}
#container {
	color: var(--vq-ink);
	font-family: var(--vq-sans);
	font-size: 14px;
	line-height: 1.55;
	min-width: 0;
	position: relative;
	z-index: 1;
}
.wrapper { width: min(1140px, 94%); min-width: 0; }

a:link, a:visited { color: var(--vq-cham); text-decoration: none; }
a:hover, a:active { color: var(--vq-son); text-decoration: underline; text-underline-offset: 2px; }

/* ── ấn triện son ── */
.seal {
	display: inline-grid;
	place-items: center;
	border: 2px solid var(--vq-son);
	color: var(--vq-son);
	font-family: var(--vq-display);
	font-weight: 700;
	line-height: 1.05;
	text-align: center;
	border-radius: 6px;
	transform: rotate(-2deg);
	width: 40px;
	height: 40px;
	font-size: 12px;
	letter-spacing: 0.02em;
}
.hao { display: block; height: 4px; border-radius: 2px; background: var(--vq-gold); }
.hao--broken { background: linear-gradient(90deg, var(--vq-gold) 42%, transparent 42%, transparent 58%, var(--vq-gold) 58%); }

/* ── header ── */
#header { background: transparent; }
#logo {
	background: color-mix(in srgb, var(--vq-bg) 90%, transparent);
	border-bottom: 1px solid var(--vq-line);
	padding: 12px 0;
	position: sticky;
	top: 0;
	z-index: 40;
}
#logo .wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.vq-brand { display: flex; align-items: center; gap: 12px; text-decoration: none !important; }
.vq-brand__name {
	font-family: var(--vq-display);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--vq-ink);
}
.vq-brand__sub {
	display: block;
	font-family: var(--vq-sans);
	font-size: 11.5px;
	font-weight: 400;
	color: var(--vq-ink-soft);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
#header ul.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; align-items: center; }
#header ul.menu li { margin: 0; }
#header ul.menu li a,
#logo ul.top_links a.search, #logo ul.top_links a.memberlist,
#logo ul.top_links a.calendar, #logo ul.top_links a.help, #logo ul.top_links a.portal {
	background-image: none;
	padding: 6px 12px;
	border-radius: 8px;
	color: var(--vq-ink-soft);
	font-weight: 500;
	font-size: 13px;
	display: inline-block;
}
#header ul.menu li a:hover { background: var(--vq-bg-deep); color: var(--vq-ink); text-decoration: none; }
#logo ul.top_links { float: none; margin: 0; padding: 0; }
.vq-toggle {
	background: transparent;
	border: 1px solid var(--vq-line-strong);
	border-radius: 999px;
	padding: 5px 12px;
	font-family: var(--vq-sans);
	font-size: 12.5px;
	color: var(--vq-ink-soft);
	cursor: pointer;
	margin-left: 6px;
}
.vq-toggle:hover { border-color: var(--vq-gold); color: var(--vq-ink); }

/* ── panel đăng nhập / chào mừng ── */
#panel .upper {
	background: var(--vq-card);
	border-bottom: 1px solid var(--vq-line);
	color: var(--vq-ink-soft);
	padding: 8px 0;
	font-size: 13px;
}
#panel .upper a:link, #panel .upper a:visited { color: var(--vq-cham); }
#panel .upper a:hover, #panel .upper a:active { color: var(--vq-son); }
#panel .upper a.logout, #panel .upper a.lost_password, #panel .upper a.register {
	background: none;
	padding: 0;
	font-weight: 500;
}
#panel .lower {
	background: transparent;
	color: var(--vq-ink-soft);
	border-bottom: 1px solid var(--vq-line);
	font-size: 13px;
}
#panel .lower a:link, #panel .lower a:visited { color: var(--vq-cham); }
#panel .lower ul.panel_links a.usercp, #panel .lower ul.panel_links a.modcp, #panel .lower ul.panel_links a.admincp {
	background: none;
	padding: 0;
}
#panel .lower ul.user_links li a { background: none; padding: 0; }
#quick_login .remember_me input { vertical-align: middle; }
#search input.textbox {
	background: var(--vq-card);
	border: 1.5px solid var(--vq-line-strong);
	border-radius: 999px 0 0 999px;
	padding: 5px 12px;
	color: var(--vq-ink);
}
#search input.button {
	background: var(--vq-son);
	color: var(--vq-on-son);
	border: 1px solid var(--vq-son-soft);
	border-radius: 0 999px 999px 0;
	padding: 5px 12px;
	font-weight: 600;
	cursor: pointer;
}

/* ── breadcrumb ── */
.navigation { color: var(--vq-ink-soft); font-size: 13px; }
.navigation a:link, .navigation a:visited { color: var(--vq-cham); }
.navigation .active { color: var(--vq-ink); font-weight: 600; }

/* ── bảng, khung, hàng ── */
table { color: var(--vq-ink); font-size: 14px; }
.tborder {
	background: var(--vq-card);
	border: 1px solid var(--vq-line-strong);
	border-radius: 10px;
	box-shadow: var(--vq-shadow);
	overflow: hidden;
	padding: 0;
}
.thead {
	background: var(--vq-card);
	color: var(--vq-ink);
	border-bottom: 1px solid var(--vq-line);
	padding: 12px 14px;
	font-family: var(--vq-display);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.01em;
}
.thead a:link, .thead a:visited { color: var(--vq-gold-strong); }
.thead a:hover, .thead a:active { color: var(--vq-son); text-decoration: none; }
.thead .smalltext, .thead div.smalltext {
	font-family: var(--vq-sans);
	font-weight: 400;
	font-size: 12.5px;
	color: var(--vq-ink-soft);
	margin-top: 2px;
}
.thead select { font-family: var(--vq-sans); }
.expcolimage { opacity: 0.7; margin-top: 6px; }
.tcat {
	background: var(--vq-bg-deep);
	color: var(--vq-ink-soft);
	border-bottom: 1px solid var(--vq-line);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 7px 14px;
}
.tcat a:link, .tcat a:visited { color: var(--vq-ink-soft); }
.tcat a:hover, .tcat a:active { color: var(--vq-son); }
.tcat .smalltext, .tcat span.smalltext { color: var(--vq-ink-soft); }
.trow1 { background: var(--vq-card); border-bottom: 1px solid var(--vq-line); padding: 10px 14px; }
.trow2 { background: color-mix(in srgb, var(--vq-card) 55%, var(--vq-bg)); border-bottom: 1px solid var(--vq-line); padding: 10px 14px; }
.trow_shaded { background: var(--vq-bg-deep); border-bottom: 1px solid var(--vq-line); }
.trow_sep { background: var(--vq-bg-deep); color: var(--vq-ink-soft); font-weight: 600; border-bottom: 1px solid var(--vq-line); }
tr.trow_selected td { background: color-mix(in srgb, var(--vq-gold) 18%, var(--vq-card)); }
.tfoot { background: var(--vq-bg-deep); color: var(--vq-ink-soft); border-top: 1px solid var(--vq-line); }
.tfoot a:link, .tfoot a:visited { color: var(--vq-cham); }
.trow1 strong a, .trow2 strong a { font-size: 15px; }
.smalltext { font-size: 12px; color: var(--vq-ink-soft); }
.largetext { font-family: var(--vq-display); font-size: 18px; font-weight: 600; }
.subject_new { font-weight: 700; color: var(--vq-ink); }
.forum_status, .subforumicon { opacity: 0.9; }

/* ── form ── */
input.textbox, textarea, select {
	background: var(--vq-card);
	border: 1.5px solid var(--vq-line-strong);
	border-radius: 8px;
	padding: 6px 10px;
	color: var(--vq-ink);
	font-family: var(--vq-sans);
	font-size: 14px;
	outline: none;
}
input.textbox:focus, textarea:focus, select:focus { border-color: var(--vq-gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vq-gold) 30%, transparent); }
fieldset { border: 1px solid var(--vq-line); border-radius: 8px; }
fieldset.trow2 { background: transparent; }
label.error { color: var(--vq-son); }
input.error, textarea.error, select.error { border-color: var(--vq-son); }
input.valid, textarea.valid, select.valid { border-color: var(--vq-luc); }

input.button, input.button:hover {
	background: var(--vq-son);
	color: var(--vq-on-son);
	border: 1px solid var(--vq-son-soft);
	border-radius: 999px;
	font-family: var(--vq-display);
	font-weight: 600;
	font-size: 14px;
	padding: 7px 18px;
	cursor: pointer;
	outline: none;
}
input.button:hover { background: var(--vq-son-soft); }
a.button:link, a.button:visited, a.button:hover, a.button:active {
	background: var(--vq-son);
	color: var(--vq-on-son);
	border: 1px solid var(--vq-son-soft);
	border-radius: 999px;
	font-family: var(--vq-display);
	font-weight: 600;
	font-size: 13.5px;
	padding: 7px 16px;
	text-decoration: none;
	display: inline-block;
	box-shadow: none;
}
a.button:hover { background: var(--vq-son-soft); }
a.button span, a.button.new_thread_button span, a.button.new_reply_button span, a.button.closed_button span,
a.button.rate_user_button span, a.button.add_buddy_button span, a.button.remove_buddy_button span,
a.button.add_ignore_button span, a.button.remove_ignore_button span, a.button.report_user_button span {
	background-image: none;
	padding: 0;
}
a.button.small_button { font-size: 12px; padding: 4px 12px; }

/* ── bài viết ── */
#posts_container { }
.post {
	background: var(--vq-card);
	border-bottom: 1px solid var(--vq-line);
	padding: 0;
}
.post .post_author {
	background: color-mix(in srgb, var(--vq-bg-deep) 60%, var(--vq-card));
	border-bottom: 1px dashed var(--vq-line);
	padding: 10px 14px;
}
.post.classic .post_author {
	background: color-mix(in srgb, var(--vq-bg-deep) 60%, var(--vq-card));
	border: 1px solid var(--vq-line);
	border-radius: 8px;
}
.post .post_author div.author_avatar img { border-radius: 8px; border: 1px solid var(--vq-line-strong); }
.post .post_author div.author_information { color: var(--vq-ink); }
.post .post_author div.author_information strong a { font-family: var(--vq-display); font-size: 15px; font-weight: 600; }
.post .post_author div.author_statistics { color: var(--vq-ink-soft); font-size: 12px; }
.post .post_head { border-bottom: 1px dashed var(--vq-line); padding: 8px 14px; }
.post .post_head span.post_date { color: var(--vq-ink-soft); font-size: 12px; }
.post .post_head span.edited_post { color: var(--vq-ink-soft); }
.post_body { line-height: 1.75; padding: 14px; font-size: 15px; }
.post_content .signature { border-top: 1px dashed var(--vq-line); color: var(--vq-ink-soft); padding-top: 8px; }
.post .post_meta { color: var(--vq-ink-soft); font-size: 12px; }
.post_controls { background: color-mix(in srgb, var(--vq-bg-deep) 50%, var(--vq-card)); border-top: 1px solid var(--vq-line); padding: 8px 14px; }
.postbit_buttons > a:link, .postbit_buttons > a:visited, .postbit_buttons > a:hover, .postbit_buttons > a:active {
	background: var(--vq-card);
	border: 1px solid var(--vq-line-strong);
	border-radius: 999px;
	color: var(--vq-ink-soft);
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	margin: 0 2px 4px 0;
}
.postbit_buttons > a:hover { border-color: var(--vq-gold); color: var(--vq-ink); }
.postbit_buttons a span { background-image: none; padding: 0; }
.thread_start_datetime { color: var(--vq-ink-soft); }

blockquote {
	background: var(--vq-bg-deep);
	border: 1px solid var(--vq-line);
	border-left: 3px solid var(--vq-gold);
	border-radius: 8px;
	padding: 10px 14px;
	margin: 8px 0;
	color: var(--vq-ink);
}
blockquote cite {
	font-family: var(--vq-display);
	font-weight: 600;
	font-style: normal;
	border-bottom: 1px solid var(--vq-line);
	display: block;
	padding-bottom: 4px;
	margin-bottom: 6px;
}
.codeblock {
	background: var(--vq-bg-deep);
	border: 1px solid var(--vq-line);
	border-radius: 8px;
	padding: 10px 14px;
	font-family: var(--vq-mono);
}
.codeblock .title { border-bottom: 1px solid var(--vq-line); font-family: var(--vq-display); font-weight: 600; }
.codeblock code { font-family: var(--vq-mono); font-size: 13px; }
hr { border: 0; border-top: 1px solid var(--vq-line); }
.highlight { background: color-mix(in srgb, var(--vq-gold) 30%, transparent); padding: 0 2px; }

/* ── phân trang ── */
.pagination { font-size: 13px; }
.pagination .pages { font-weight: 600; color: var(--vq-ink-soft); }
.pagination a:link, .pagination a:visited {
	background: var(--vq-card);
	border: 1px solid var(--vq-line-strong);
	color: var(--vq-ink-soft);
	border-radius: 6px;
	padding: 3px 8px;
	text-decoration: none;
}
.pagination a:hover { border-color: var(--vq-gold); color: var(--vq-ink); background: var(--vq-card); }
.pagination .pagination_current {
	background: var(--vq-gold);
	color: #241c12;
	border: 1px solid var(--vq-gold);
	border-radius: 6px;
	padding: 3px 8px;
	font-weight: 600;
}
.pagination_breadcrumb { background: var(--vq-card); border: 1px solid var(--vq-line-strong); border-radius: 6px; }
.drop_go_page { background: var(--vq-card); border: 1px solid var(--vq-line-strong); border-radius: 8px; box-shadow: var(--vq-shadow); }

/* ── thông báo ── */
.pm_alert { background: color-mix(in srgb, var(--vq-gold) 14%, var(--vq-card)); border: 1px solid var(--vq-gold); border-radius: 8px; color: var(--vq-ink); }
.red_alert { background: color-mix(in srgb, var(--vq-son) 12%, var(--vq-card)); border: 1px solid var(--vq-son); border-radius: 8px; color: var(--vq-son-soft); }
.red_alert a:link, .red_alert a:visited { color: var(--vq-son-soft); }
div.error { background: color-mix(in srgb, var(--vq-son) 10%, var(--vq-card)); border: 1px solid var(--vq-son); border-radius: 8px; color: var(--vq-ink); }
div.error p em { color: var(--vq-son); font-style: normal; font-weight: 600; }
.success_message { color: var(--vq-luc); }
.error_message { color: var(--vq-son); }
.online { color: var(--vq-luc); }
.offline { color: var(--vq-ink-soft); }
.reputation_positive { color: var(--vq-luc); }
.reputation_negative { color: var(--vq-son); }
.trow_reputation_positive { background: color-mix(in srgb, var(--vq-luc) 12%, var(--vq-card)); }
.trow_reputation_negative { background: color-mix(in srgb, var(--vq-son) 12%, var(--vq-card)); }

/* ── popup menu ── */
.popup_menu {
	background: var(--vq-card);
	border: 1px solid var(--vq-line-strong);
	border-radius: 8px;
	box-shadow: var(--vq-shadow);
}
.popup_menu .popup_item { background: var(--vq-card); color: var(--vq-ink); }
.popup_menu .popup_item:hover, .popup_menu a.popup_item:hover { background: var(--vq-bg-deep); color: var(--vq-ink); }
.popup_menu .popup_item_container { border-bottom: 1px solid var(--vq-line); }

.pollbar { background: var(--vq-gold); border: 0; border-radius: 4px; }
.pollbar .percent { color: var(--vq-ink); }
.quick_jump { background: none; padding-left: 0; }

/* ── footer ── */
#footer { background: transparent; color: var(--vq-ink-soft); border-top: 1px solid var(--vq-line); margin-top: 48px; }
#footer .upper { background: transparent; border: 0; padding: 14px 0 6px; }
#footer ul.menu li a { color: var(--vq-ink-soft); font-size: 13px; }
#footer ul.menu li a:hover { color: var(--vq-ink); }
#footer .upper .language select, #footer .upper .theme select { background: var(--vq-card); border: 1px solid var(--vq-line-strong); border-radius: 8px; color: var(--vq-ink); }
#footer .lower { background: transparent; color: var(--vq-ink-soft); font-family: var(--vq-mono); font-size: 12px; border: 0; padding: 6px 0 28px; }
#footer .lower a:link, #footer .lower a:visited { color: var(--vq-ink-soft); }
.vq-foot { text-align: center; padding: 8px 0 4px; }
.vq-foot__hao { width: 64px; display: flex; flex-direction: column; gap: 4px; margin: 0 auto 10px; }
.vq-foot__tag { font-family: var(--vq-display); font-size: 15px; color: var(--vq-ink-soft); margin: 0; }

/* ── responsive nhẹ ── */
@media (max-width: 760px) {
	.wrapper { width: 96%; }
	#logo .wrapper { flex-direction: column; align-items: flex-start; gap: 8px; }
	.vq-brand__name { font-size: 19px; }
	.tborder { border-radius: 8px; }
	table.tborder td[width] { width: auto !important; }
}