/* Skin: Magazine — lưới tile, tiêu đề đè ảnh, tông tối hiện đại. */
:root {
	--mag-accent: #ff2d55;
}

.skin-magazine .nf-site-header { background: #0f0f14; }
.skin-magazine .nf-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 16px;
}
.skin-magazine .nf-logo {
	color: #fff;
	font-size: 26px;
	font-weight: 800;
	text-decoration: none;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.skin-magazine .nf-tagline { color: #9a9aa5; margin: 0; font-size: 12px; }
.skin-magazine .nf-nav ul { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.skin-magazine .nf-nav a { color: #d8d8e0; text-decoration: none; font-size: 14px; font-weight: 600; }
.skin-magazine .nf-nav a:hover { color: var(--mag-accent); }

.skin-magazine .nf-article-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 18px;
	padding: 24px 0;
}

.skin-magazine .mag-tile-link { text-decoration: none; display: block; }
.skin-magazine .mag-tile-media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #222 center/cover no-repeat;
	border-radius: 10px;
	overflow: hidden;
}
.skin-magazine .mag-tile-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	padding: 16px;
	background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0) 60%);
}
.skin-magazine .mag-tile-cat a { color: var(--mag-accent); font-size: 12px; font-weight: 700; text-transform: uppercase; text-decoration: none; }
.skin-magazine .mag-tile-title { color: #fff; margin: 0; font-size: 20px; line-height: 1.25; }
.skin-magazine .mag-badge {
	align-self: flex-start;
	background: var(--mag-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 3px;
}

.skin-magazine .nf-article-title { font-size: 40px; line-height: 1.1; }