/* CSS gần giống ssstik.io nhưng tinh chỉnh nhẹ để khác biệt và tối ưu font đa ngôn ngữ */
:root {
	--bg: #fbfafa;
	--fg: #0f172a;
	--muted: #475569;
	--brand: #5940f1;
	--accent: #4a2ee8;
	--danger: #ef4444;
	--container: 1080px;
}
* { 
	box-sizing: border-box; 
	/* Prevent unnecessary repaints/reflows */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Noto Sans JP", "Noto Sans SC", "Noto Sans KR", "DejaVu Sans", sans-serif;
	/* Lưu ý: dùng bộ font rộng để tránh vỡ chữ đa ngôn ngữ */
	overflow-x: hidden; /* Ngăn thanh cuộn ngang */
	width: 100%;
	max-width: 100vw;
	/* Prevent layout shift */
	min-height: 0;
	/* Optimize rendering */
	will-change: auto;
}
.container { max-width: var(--container); margin: 0 auto; padding: 0 16px; }
@media (max-width: 600px) {
	.container { padding: 0 12px; }
}
.site-header { 
	border-bottom: 1px solid rgba(15,23,42,.08);
	background: var(--bg);
	/* Ensure header always visible */
	position: relative;
	z-index: 100;
	/* Prevent layout shift */
	min-height: 60px;
	display: block;
	visibility: visible;
	opacity: 1;
}
.header-inner { 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	padding: 10px 16px;
	max-width: var(--container);
	margin: 0 auto;
	/* Ensure header inner always visible */
	visibility: visible;
	opacity: 1;
}
@media (max-width: 600px) {
	.header-inner {
		padding: 10px 12px;
	}
}
.brand img { height: 50px; }
.nav { display: flex; align-items: center; gap: 16px; position: relative; }
.nav a { color: var(--fg); text-decoration: none; opacity: .9; }
.nav a:hover { opacity: 1; color: var(--brand); }
.mobile-menu-toggle {
	display: none !important;
}
.mobile-menu {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	max-height: 0 !important;
	overflow: hidden !important;
}
@media (max-width: 600px) {
	.nav-link-mobile-hide { display: none !important; }
	.lang-dropdown { display: none !important; }
	.lang-btn { display: none !important; }
	.lang-menu { display: none !important; }
	.mobile-menu-toggle {
		display: flex !important;
		cursor: pointer !important;
		padding: 8px;
		background: rgba(15,23,42,.06);
		border: 1px solid rgba(15,23,42,.12);
		border-radius: 8px;
		width: 36px;
		height: 36px;
		min-width: 36px;
		min-height: 36px;
		align-items: center;
		justify-content: center;
		z-index: 1001;
		position: relative;
		pointer-events: auto !important;
		-webkit-tap-highlight-color: transparent;
		user-select: none;
		touch-action: manipulation;
		appearance: none;
		-webkit-appearance: none;
		margin: 0;
		border: none;
		outline: none;
	}
	.mobile-menu-toggle:hover {
		background: rgba(15,23,42,.1);
	}
	.mobile-menu-toggle:active {
		background: rgba(15,23,42,.15);
	}
	.mobile-menu-toggle:focus {
		outline: 2px solid rgba(89,64,241,.5);
		outline-offset: 2px;
	}
	.mobile-menu-toggle svg {
		width: 20px;
		height: 20px;
	}
	.mobile-menu {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
		position: absolute;
		top: 100%;
		right: 0;
		background: var(--bg);
		border: 1px solid rgba(15,23,42,.12);
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0,0,0,.1);
		margin-top: 8px;
		min-width: 280px;
		max-width: 90vw;
		width: auto;
		z-index: 1000;
		padding: 8px;
		max-height: 0;
		overflow: hidden;
	}
	.mobile-menu.active {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		flex-direction: column;
		gap: 4px;
		max-height: 80vh !important;
		overflow-y: auto !important;
		padding: 8px !important;
	}
	.mobile-menu a {
		display: block;
		padding: 8px 12px;
		color: var(--fg);
		text-decoration: none;
		border-radius: 6px;
	}
	.mobile-menu a:hover {
		background: rgba(15,23,42,.05);
	}
	.mobile-menu-divider {
		height: 1px;
		background: rgba(15,23,42,.1);
		margin: 8px 0;
	}
	.mobile-menu-languages {
		margin-top: 4px;
	}
	.mobile-menu-lang-title {
		padding: 8px 12px 4px;
		font-weight: 600;
		font-size: 14px;
		color: var(--fg);
		opacity: 0.8;
	}
	.mobile-menu-lang-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px;
	}
	.mobile-menu-lang-list a {
		padding: 6px 10px;
		font-size: 13px;
		display: block;
	}
	.mobile-menu-lang-list a.active {
		background: rgba(89,64,241,.1);
		font-weight: 600;
	}
}
/* Dropdown ngôn ngữ */
.lang-dropdown { 
	position: relative; 
	display: block; /* Hiện nút Languages trên desktop */
}
.lang-btn {
	background: rgba(15,23,42,.06);
	border: 1px solid rgba(15,23,42,.12);
	padding: 8px 12px;
	border-radius: 8px;
	cursor: pointer;
	color: var(--fg);
	font-size: 14px;
}
.lang-btn:hover { background: rgba(15,23,42,.1); }
.lang-menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 0;
	background: var(--bg);
	border: 1px solid rgba(15,23,42,.12);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,.1);
	width: 360px;
	max-height: 400px;
	overflow-y: auto;
	display: none !important; /* Critical: Ẩn ngay từ đầu, chỉ hiện khi hover */
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	z-index: 1000;
	padding: 8px;
	visibility: hidden !important; /* Thêm để chắc chắn ẩn ngay */
	opacity: 0 !important; /* Thêm để chắc chắn ẩn ngay */
	pointer-events: none !important; /* Không thể click khi ẩn */
}
.lang-dropdown:hover .lang-menu { 
	display: grid !important; 
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important; /* Cho phép click khi hiện */
}
.lang-menu a {
	display: block;
	padding: 8px 10px;
	color: var(--fg);
	text-decoration: none;
	border-radius: 6px;
	font-size: 13px;
}
.lang-menu a:hover { background: rgba(15,23,42,.05); }
.lang-menu a.active { background: rgba(89,64,241,.1); font-weight: 600; }
.hero { 
	text-align: center; 
	padding: 40px 0 32px; 
	background: linear-gradient(86deg, #2596be 0%, #a41ef6 100%);
	margin: 0 calc(-50vw + 50%);
	width: 100vw;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Fix horizontal scrollbar on desktop */
	box-sizing: border-box;
	/* Smooth transitions for hide/show */
	transition: opacity 0.3s ease, visibility 0.3s ease;
	/* Ensure stable layout */
	min-height: 0;
	/* Optimize rendering */
	will-change: opacity, visibility;
}
/* Hide hero section smoothly when hidden via JS - prevent flash */
.hero[style*="display: none"],
.hero[style*="visibility: hidden"] {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
	/* Prevent layout shift - use absolute positioning to remove from flow */
	position: absolute !important;
	width: 0 !important;
	left: -9999px !important;
	/* Prevent any transition/animation */
	transition: none !important;
	animation: none !important;
}
.hero > * {
	max-width: var(--container);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}
@media (max-width: 600px) {
	.hero {
		margin: 0 calc(-50vw + 50%);
		padding: 32px 0 24px;
	}
	.hero > * {
		padding-left: 12px;
		padding-right: 12px;
	}
}
.hero h1 { 
	margin: 0 0 8px; 
	font-size: 32px; 
	font-weight: 700; 
	color: #ffffff;
	text-align: center;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0;
}
.hero p { 
	margin: 0 0 12px; 
	color: #ffffff; 
	font-size: 18px; 
	opacity: 0.95;
	text-align: center;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0;
}
.download-form { 
	display: flex; 
	gap: 8px; 
	justify-content: center; 
	margin: 16px 0; 
	position: relative;
}
.download-form .input-wrapper {
	position: relative;
	width: 75%;
	display: flex;
	align-items: center;
}
.download-form input[type=url] {
	width: 100%;
	padding: 20px 60px 20px 20px;
	background: rgba(255,255,255,.95);
	border: 1px solid rgba(255,255,255,.3);
	color: var(--fg);
	border-radius: 10px;
	font-size: 16px;
	box-shadow: 0 2px 8px rgba(0,0,0,.1);
	box-sizing: border-box;
}
.download-form input[type=url]::placeholder {
	color: rgba(15,23,42,.5);
}
/* Paste button - styles riêng, không bị ảnh hưởng từ button submit */
.download-form .paste-btn,
.download-form button.paste-btn,
.download-form button[type="button"].paste-btn {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	padding: 10px 12px;
	background: #d6d4d4;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	color: var(--fg);
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: normal;
	transition: none;
	z-index: 5;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
	white-space: nowrap;
	flex-shrink: 0;
	box-sizing: border-box;
}
.download-form .paste-btn:hover {
	background: #d6d4d4 !important;
	color: var(--fg) !important;
}
.download-form .paste-btn.clear-btn {
	background: #d6d4d4;
}
.download-form .paste-btn.clear-btn:hover {
	background: #d6d4d4;
	cursor: default;
}
.download-form .paste-btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}
.download-form .loading-indicator {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 10;
}
.download-form.loading .loading-indicator {
	display: block;
	animation: fadeIn 0.2s ease;
}
.download-form.loading input[type=url] {
	opacity: 0.6;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.download-form.loading button[type="submit"] {
	opacity: 0.7;
	cursor: wait;
	transition: opacity 0.2s ease;
}
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
/* Submit button - chỉ áp dụng cho button submit, không áp dụng cho paste button */
.download-form button[type="submit"] {
	padding: 20px 28px;
	background: var(--brand);
	border: 0;
	border-radius: 10px;
	color: #ffffff;
	font-weight: 700;
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.download-form button[type="submit"]:hover:not(:disabled) { 
	background: var(--accent); 
}
.download-form button[type="submit"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.download-form button[type="submit"] svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
/* Backward compatibility - nếu button không có type="submit" thì vẫn apply */
.download-form button:not(.paste-btn):not([type="button"]) {
	padding: 20px 28px;
	background: var(--brand);
	border: 0;
	border-radius: 10px;
	color: #ffffff;
	font-weight: 700;
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.download-form button:not(.paste-btn):not([type="button"]):hover:not(:disabled) { 
	background: var(--accent); 
}
.download-form button:not(.paste-btn):not([type="button"]):disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.note { color: var(--muted); font-size: 14px; }
.ads { margin: 16px 0; text-align: center; }
.hero .ads { margin: 8px 0; }
/* Hide hero section when result is shown - smooth transition */
.hero.hero-hidden-by-js,
section.page.hero-hidden-by-js {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: none;
	margin: 0;
	padding: 0;
}
.result { 
	padding: 32px 0; 
	/* Ensure stable layout */
	min-height: 0;
	will-change: auto;
}
/* Input section - khu nhập liệu ban đầu */
.input-section {
	display: block;
}

/* Result section - khu kết quả, ẩn ban đầu */
#result-section {
	margin-top: 20px;
	margin-bottom: 0px;
	/* Prevent layout shift */
	min-height: 0;
	/* Smooth fade in animation */
	opacity: 0;
	transition: opacity 0.4s ease;
	/* Optimize rendering */
	will-change: opacity;
}
#result-section[style*="display: block"] {
	opacity: 1;
}

/* Backward compatibility */
#resultContainer {
	margin-top: 20px;
	margin-bottom: 0px;
	min-height: 0;
	will-change: auto;
}
/* Ensure result section doesn't cause layout shift */
section.result {
	display: block;
	visibility: visible;
	opacity: 1;
}
.result h2 { margin: 0 0 12px; }
.result-layout { display: flex; flex-direction: column; gap: 12px; }
.result-top {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 20px;
	background: rgba(15,23,42,.02);
	border-radius: 12px;
	border: 1px solid rgba(15,23,42,.08);
}
.result-bottom { margin-top: 8px; }
.video-thumb {
	width: 96px;
	min-width: 96px;
	height: auto;
	border-radius: 8px;
	aspect-ratio: 9/16;
	object-fit: cover;
	border: 1px solid rgba(15,23,42,.1);
	flex-shrink: 0;
}
.video-info { 
	display: flex; 
	flex-direction: column; 
	gap: 12px; 
	flex: 1;
	min-width: 0;
}
.video-author {
	color: var(--muted);
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 4px;
}
.video-title { 
	color: var(--fg); 
	opacity: .95; 
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
}
.video-description {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.5;
	margin-top: 8px;
	margin-bottom: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
}
.video-meta-info {
	display: flex;
	gap: 16px;
	margin-top: 8px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}
.video-meta-info .meta-item {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--muted);
	font-size: 13px;
}
.video-meta-info .meta-item svg {
	flex-shrink: 0;
	opacity: 0.7;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	max-width: 100%;
	word-break: break-word;
	/* Giới hạn ký tự: 130 ký tự desktop */
	max-width: 130ch;
}
.hashtags { 
	display: flex; 
	flex-wrap: wrap; 
	gap: 6px; 
	max-width: 100%;
	overflow: hidden;
}
.hashtag {
	display: inline-block;
	padding: 4px 10px;
	background: rgba(89,64,241,.1);
	color: var(--brand);
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.author {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	color: var(--muted);
	font-size: 15px;
	font-weight: 600;
}
.author-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.video-stats {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 8px;
}
.stat-item {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
	font-size: 14px;
}
.stat-item svg {
	flex-shrink: 0;
}
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.actions .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.btn {
	display: inline-block;
	padding: 12px 16px;
	border-radius: 10px;
	background: rgba(15,23,42,.06);
	color: var(--fg);
	text-decoration: none;
}
/* Primary button style - Higher priority than highlight-video */
.actions .btn.primary,
.btn.primary { 
	background: var(--brand) !important; 
	color: #ffffff !important; 
	font-weight: 700 !important; 
}
.btn:hover { filter: brightness(1.1); }
.btn.highlight-video {
	background: linear-gradient(135deg, var(--brand) 0%, #a41ef6 100%);
	box-shadow: 0 4px 12px rgba(89, 64, 241, 0.3);
	position: relative;
	overflow: hidden;
}
/* Ensure primary takes precedence over highlight-video when both classes present */
.btn.primary.highlight-video {
	background: linear-gradient(135deg, var(--brand) 0%, #a41ef6 100%) !important;
}
.btn.highlight-video::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	animation: shimmer 2s infinite;
}
@keyframes shimmer {
	0% { left: -100%; }
	100% { left: 100%; }
}
.btn.highlight-video:hover {
	box-shadow: 0 6px 16px rgba(89, 64, 241, 0.4);
	transform: translateY(-1px);
}
.extras { margin-top: 24px; }
.row { display: grid; gap: 10px; margin: 8px 0; }
.alert { padding: 12px; border-radius: 8px; }
.alert.error { background: rgba(239,68,68,.08); color: #7f1d1d; border: 1px solid rgba(239,68,68,.25); }
.alert.success { background: rgba(89,64,241,.10); color: #3b2a9e; border: 1px solid rgba(89,64,241,.25); }

/* Inline error message style - improved readability and UX */
.error-message-inline {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 20px;
	margin: 20px 0;
	border-radius: 12px;
	background: rgba(239, 68, 68, 0.08);
	border: 1px solid rgba(239, 68, 68, 0.2);
	color: #dc2626;
	font-size: 15px;
	line-height: 1.5;
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
	/* Smooth animations */
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.error-message-inline svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: #dc2626;
}
.error-message-inline span {
	flex: 1;
	word-wrap: break-word;
}
.site-footer { border-top: 1px solid rgba(15,23,42,.08); margin-top: 40px; padding: 40px 0 20px; }
.footer-content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-bottom: 24px;
}
.footer-column h3 {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 600;
	color: var(--fg);
}
.footer-column ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.footer-column ul li {
	margin-bottom: 8px;
}
.footer-column ul li a {
	color: var(--muted);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s;
}
.footer-column ul li a:hover {
	color: var(--brand);
}
.footer-copyright {
	text-align: center;
	color: var(--muted);
	font-size: 14px;
	margin: 0;
	padding-top: 20px;
	border-top: 1px solid rgba(15,23,42,.08);
}
@media (max-width: 768px) {
	.footer-content {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}
/* Page content container - đồng đều với container */
.page {
	padding: 32px 0;
	max-width: var(--container);
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: break-word;
}
.page > * {
	max-width: 100%;
	box-sizing: border-box;
}
.page img,
.page iframe,
.page video,
.page embed,
.page object {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 20px auto;
	border-radius: 8px;
}
.page iframe,
.page video,
.page embed,
.page object {
	width: 100%;
	max-width: 800px;
}
.page table {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	display: block;
	white-space: nowrap;
}
.page table td,
.page table th {
	word-break: break-word;
	white-space: normal;
}
.page pre,
.page code {
	max-width: 100%;
	overflow-x: auto;
	word-wrap: break-word;
	white-space: pre-wrap;
}
/* Quill alignment classes - chỉ giữ !important cho alignment vì cần override content từ editor */
.page [class*="ql-align-center"],
.page p[class*="ql-align-center"],
.page div[class*="ql-align-center"],
.page h1[class*="ql-align-center"],
.page h2[class*="ql-align-center"],
.page h3[class*="ql-align-center"],
.page h4[class*="ql-align-center"],
.page h5[class*="ql-align-center"],
.page h6[class*="ql-align-center"],
.page blockquote[class*="ql-align-center"],
.page ul[class*="ql-align-center"],
.page ol[class*="ql-align-center"],
.page li[class*="ql-align-center"],
.page span[class*="ql-align-center"],
.page strong[class*="ql-align-center"],
.page em[class*="ql-align-center"] {
	text-align: center !important;
}
.page [class*="ql-align-right"],
.page p[class*="ql-align-right"],
.page div[class*="ql-align-right"],
.page h1[class*="ql-align-right"],
.page h2[class*="ql-align-right"],
.page h3[class*="ql-align-right"],
.page h4[class*="ql-align-right"],
.page h5[class*="ql-align-right"],
.page h6[class*="ql-align-right"],
.page blockquote[class*="ql-align-right"],
.page ul[class*="ql-align-right"],
.page ol[class*="ql-align-right"],
.page li[class*="ql-align-right"],
.page span[class*="ql-align-right"],
.page strong[class*="ql-align-right"],
.page em[class*="ql-align-right"] {
	text-align: right !important;
}
.page [class*="ql-align-justify"],
.page p[class*="ql-align-justify"],
.page div[class*="ql-align-justify"],
.page blockquote[class*="ql-align-justify"],
.page span[class*="ql-align-justify"],
.page strong[class*="ql-align-justify"],
.page em[class*="ql-align-justify"] {
	text-align: justify !important;
}
@media (max-width: 600px) {
	.page {
		padding: 24px 0;
		overflow-x: hidden;
	}
	.page img,
	.page iframe,
	.page video,
	.page embed,
	.page object {
		margin: 16px auto;
		border-radius: 6px;
		max-width: 100%;
		width: 100%;
	}
}
/* 404 and Not Found pages */
.page-404,
.page-notfound {
	max-width: 600px;
	margin: 80px auto;
	padding: 40px 20px;
	text-align: center;
}
@media (max-width: 600px) {
	.page-404,
	.page-notfound {
		padding: 24px 16px;
		margin: 40px auto;
	}
}
/* Blog content styles */
.blog-content {
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: break-word;
	line-height: 1.8;
}
.blog-content > * {
	max-width: 100%;
	box-sizing: border-box;
}
.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4 {
	margin-top: 24px;
	margin-bottom: 16px;
	color: var(--fg);
	font-weight: 700;
}
.blog-content h1 { font-size: 32px; }
.blog-content h2 { font-size: 28px; }
.blog-content h3 { font-size: 24px; }
.blog-content h4 { font-size: 20px; }
.blog-content p {
	margin: 16px 0;
	line-height: 1.8;
}
.blog-content ul, .blog-content ol {
	margin: 16px 0;
	padding-left: 32px;
	line-height: 1.8;
}
.blog-content li {
	margin: 8px 0;
}
.blog-content a {
	color: var(--brand);
	text-decoration: none;
}
.blog-content a:hover {
	text-decoration: underline;
}
.blog-content blockquote {
	border-left: 4px solid var(--brand);
	padding-left: 16px;
	margin: 24px 0;
	font-style: italic;
	color: var(--muted);
}
.blog-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
}
.blog-content table th,
.blog-content table td {
	border: 1px solid rgba(15,23,42,.12);
	padding: 12px;
	text-align: left;
}
.blog-content table th {
	background: rgba(15,23,42,.05);
	font-weight: 600;
}

/* RTL Support for Arabic and other RTL languages */
html[dir="rtl"] {
	direction: rtl;
	text-align: right;
}
html[dir="rtl"] .header-inner {
	flex-direction: row-reverse !important;
}
html[dir="rtl"] .header-inner .brand {
	order: 2;
}
html[dir="rtl"] .header-inner .nav {
	order: 1;
}
html[dir="rtl"] .nav {
	flex-direction: row-reverse !important;
}
html[dir="rtl"] .nav a {
	text-align: right;
	direction: rtl;
}
html[dir="rtl"] .nav .mobile-menu-toggle {
	order: -1;
}
html[dir="rtl"] .nav .lang-dropdown {
	order: 0;
}
html[dir="rtl"] .nav .nav-link-mobile-hide {
	order: 1;
}
html[dir="rtl"] .download-form {
	flex-direction: row-reverse !important;
}
html[dir="rtl"] .download-form .input-wrapper {
	direction: rtl;
	order: 2;
}
html[dir="rtl"] .download-form button[type="submit"] {
	order: 1;
}
html[dir="rtl"] .download-form input[type=url] {
	text-align: right !important;
	padding: 20px 20px 20px 50px !important;
	direction: rtl;
}
html[dir="rtl"] .download-form .paste-btn {
	left: 8px !important;
	right: auto !important;
}
html[dir="rtl"] .download-form .loading-indicator {
	left: auto;
	right: 50%;
	transform: translate(50%, -50%);
}
html[dir="rtl"] .footer-content {
	flex-direction: row-reverse;
}
html[dir="rtl"] .footer-column {
	text-align: right;
}
html[dir="rtl"] .footer-column ul {
	padding-right: 0;
	padding-left: 0;
}
html[dir="rtl"] .mobile-menu {
	right: auto !important;
	left: 0 !important;
	text-align: right;
	direction: rtl;
}
html[dir="rtl"] .mobile-menu a {
	text-align: right;
	direction: rtl;
}
html[dir="rtl"] .mobile-menu-languages {
	text-align: right;
	direction: rtl;
}
html[dir="rtl"] .mobile-menu-lang-title {
	text-align: right;
}
html[dir="rtl"] .mobile-menu-lang-list {
	direction: rtl;
}
html[dir="rtl"] .mobile-menu-lang-list a {
	text-align: right;
	direction: rtl;
}
html[dir="rtl"] .lang-dropdown {
	direction: rtl;
}
html[dir="rtl"] .lang-btn {
	text-align: right;
	direction: rtl;
}
html[dir="rtl"] .lang-menu {
	right: auto !important;
	left: 0 !important;
	text-align: right;
	direction: rtl;
}
html[dir="rtl"] .lang-menu a {
	text-align: right;
	direction: rtl;
}
html[dir="rtl"] .page {
	text-align: right;
}
html[dir="rtl"] .blog-content {
	text-align: right;
}
html[dir="rtl"] .blog-content table th,
html[dir="rtl"] .blog-content table td {
	text-align: right;
}
html[dir="rtl"] .hero {
	text-align: right;
}
html[dir="rtl"] .hero h1,
html[dir="rtl"] .hero p {
	text-align: right;
}
html[dir="rtl"] .actions {
	flex-direction: row-reverse;
}
html[dir="rtl"] .btn {
	text-align: right;
}
html[dir="rtl"] .stat-item {
	flex-direction: row-reverse;
}
html[dir="rtl"] .video-stats {
	flex-direction: row-reverse;
}
html[dir="rtl"] .result-container {
	text-align: right;
}
html[dir="rtl"] .result-container .video-info {
	text-align: right;
}
html[dir="rtl"] .result-container .actions {
	justify-content: flex-start;
}
html[dir="rtl"] .result-layout {
	direction: rtl;
}
html[dir="rtl"] .result-top {
	flex-direction: row-reverse !important;
}
html[dir="rtl"] .result-top .video-thumb {
	order: 2;
}
html[dir="rtl"] .result-top .video-info {
	order: 1;
	text-align: right;
}
html[dir="rtl"] .video-info {
	text-align: right;
}
html[dir="rtl"] .author {
	flex-direction: row-reverse !important;
}
html[dir="rtl"] .author .author-avatar {
	order: 2;
	margin-left: 8px;
	margin-right: 0;
}
html[dir="rtl"] .author span {
	order: 1;
}
html[dir="rtl"] .video-title {
	text-align: right !important;
	direction: rtl;
}
html[dir="rtl"] .hashtags {
	flex-direction: row-reverse !important;
	justify-content: flex-start;
}
html[dir="rtl"] .hashtag {
	text-align: right;
	direction: rtl;
}
html[dir="rtl"] .video-stats {
	flex-direction: row-reverse !important;
	justify-content: flex-start;
}
html[dir="rtl"] .stat-item {
	flex-direction: row-reverse !important;
}
html[dir="rtl"] .stat-item svg {
	order: 2;
	margin-left: 6px;
	margin-right: 0;
}
html[dir="rtl"] .stat-item span,
html[dir="rtl"] .stat-item {
	order: 1;
}
html[dir="rtl"] .actions {
	flex-direction: row-reverse !important;
	justify-content: flex-start;
}
html[dir="rtl"] .result-bottom {
	text-align: right;
}
html[dir="rtl"] .slide-images {
	text-align: right;
}
html[dir="rtl"] .slide-images h3 {
	text-align: right;
}
html[dir="rtl"] .images-grid {
	direction: rtl;
}
html[dir="rtl"] .btn-download {
	text-align: center;
}
html[dir="rtl"] .alert {
	text-align: right;
}
html[dir="rtl"] .row {
	direction: rtl;
}
html[dir="rtl"] .container {
	text-align: right;
}
@media (max-width: 600px) {
	html[dir="rtl"] .download-form {
		flex-direction: column !important;
	}
	html[dir="rtl"] .download-form .input-wrapper {
		order: 1;
	}
	html[dir="rtl"] .download-form button[type="submit"] {
		order: 2;
	}
		html[dir="rtl"] .download-form input[type=url] {
			padding: 15px 35px 15px 16px !important;
		}
	html[dir="rtl"] .download-form .paste-btn {
		left: 4px !important;
		right: auto !important;
	}
	html[dir="rtl"] .footer-content {
		grid-template-columns: 1fr;
	}
}
.admin { max-width: 720px; margin: 24px auto; padding: 0 16px; }
.admin-nav a { margin-right: 12px; }
.admin form input[type=file], .admin form textarea, .admin form input[type=password] {
	width: 100%; padding: 10px; border-radius: 8px; border: 1px solid rgba(15,23,42,.12);
	background: rgba(15,23,42,.03); color: var(--fg);
}
.admin select {
	width: 100%; padding: 10px; border-radius: 8px; border: 1px solid rgba(15,23,42,.12);
	background: rgba(15,23,42,.03); color: var(--fg);
}
.admin form button { padding: 10px 14px; border: 0; border-radius: 8px; background: var(--brand); color: #ffffff; font-weight: 700; cursor: pointer; }
.admin-logs-container {
	max-width: 1440px; /* Gấp đôi so với .admin (720px) */
	margin: 24px auto;
	padding: 0 16px;
}
.logs { 
	background: rgba(15,23,42,.04); 
	padding: 12px; 
	border-radius: 10px; 
	max-height: 60vh; 
	overflow: auto;
	width: 100%;
	font-family: monospace;
	font-size: 13px;
	line-height: 1.6;
}
@media (max-width: 1460px) {
	.admin-logs-container {
		max-width: calc(100vw - 32px);
	}
}
/* Grid ảnh slide */
.slide-images { margin-top: 24px; }
.slide-images h3 { margin: 0 0 16px; }
.images-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 16px;
}
.slide-item {
	border: 1px solid rgba(15,23,42,.12);
	border-radius: 10px;
	overflow: hidden;
	background: rgba(15,23,42,.02);
}
.slide-item img {
	width: 100%;
	height: auto;
	display: block;
}
.btn-download {
	display: block;
	text-align: center;
	margin: 8px;
	padding: 10px 14px;
	font-size: 14px;
	background: var(--brand);
	color: #ffffff;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 700;
}
.video-thumb { max-width: 100%; border-radius: 10px; margin-bottom: 12px; border: 1px solid rgba(15,23,42,.1); }
/* Loading spinner animation - optimized */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.loading-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid rgba(37,150,190,.2);
	border-top-color: #2596be;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	/* Optimize animation performance */
	will-change: transform;
}
@media (max-width: 900px) {
	.images-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.download-form { flex-direction: column; align-items: stretch; margin: 8px 0; }
	.download-form .input-wrapper { width: 100%; }
	.download-form input[type=url] { width: 100%; padding: 17px 75px 17px 16px; font-size: 15px; box-sizing: border-box; }
	.download-form button[type="submit"] { padding: 17px 24px; font-size: 17px; min-height: 44px; width: 100%; box-sizing: border-box; }
	.download-form .paste-btn { 
		padding: 8px 6px;
		font-size: 12px;
		gap: 2px;
		right: 4px;
		line-height: 1;
		height: auto;
		min-height: auto;
		width: auto;
		max-width: none;
		white-space: nowrap;
		z-index: 5;
		pointer-events: auto;
	}
	.download-form .paste-btn svg {
		width: 14px;
		height: 14px;
	}
	.hero h1 { font-size: 26px; margin: 0 0 6px; text-align: center; width: 100%; max-width: 100%; box-sizing: border-box; padding: 0; }
	.hero p { font-size: 16px; margin: 0 0 10px; text-align: center; width: 100%; max-width: 100%; box-sizing: border-box; padding: 0; }
	.header-inner { flex-wrap: wrap; }
	.nav { flex-wrap: wrap; gap: 8px; }
	.images-grid { grid-template-columns: 1fr; gap: 12px; }
	/* Ensure all buttons are touch-friendly */
	.btn, button, a.btn {
		min-height: 44px;
		min-width: 44px;
		padding: 12px 16px;
	}
	.result-top {
		flex-direction: row;
		gap: 12px;
		padding: 16px;
	}
	.video-thumb {
		width: 96px;
		min-width: 96px;
	}
	.video-title {
		font-size: 18px;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		/* Giới hạn ký tự: 80 ký tự mobile */
		max-width: 80ch;
	}
	.hashtag {
		max-width: 80ch;
	}
	.video-stats {
		gap: 12px;
	}
}