/* ============================================================
 * Polku Theme — global layout (clone banpham.com/fi/)
 * ============================================================ */
* { box-sizing: border-box; }
html { font-size: 16px; }
body.polku-body {
	margin: 0; padding: 0;
	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	font-size: 16px; line-height: 1.55; color: #1a1a1a;
	background: #f0f4f8; -webkit-font-smoothing: antialiased;
}
.polku-app { display: flex; min-height: 100vh; }
.polku-main-wrap { flex: 1; min-width: 0; background: #f0f4f8; overflow-x: hidden; }

/* === SIDEBAR === */
.polku-sidebar {
	width: 240px; flex-shrink: 0;
	background: #fff; border-right: 1px solid #e2e8f0;
	padding: 20px 0; min-height: 100vh;
	position: sticky; top: 0; align-self: flex-start;
	overflow-y: auto; max-height: 100vh;
}
.polku-sb-logo {
	display: flex; align-items: center; gap: 10px;
	padding: 0 20px 16px; border-bottom: 1px solid #e2e8f0; margin-bottom: 12px;
}
.polku-sb-logo h2 { font-size: 0.95rem; font-weight: 800; margin: 0; color: #1a1a1a; }
.polku-sb-label {
	font-size: 0.7rem; font-weight: 700; color: #4a5568;
	text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 20px 6px;
}
.polku-sb-item {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 16px; margin: 0 8px; border-radius: 8px;
	font-size: 0.9rem; font-weight: 500; color: #1a1a1a;
	transition: all 0.1s; text-decoration: none;
}
.polku-sb-item:hover { background: #f0f4f8; color: #1a1a1a; text-decoration: none; }
.polku-sb-item.polku-sb-on { background: #dbeafe; color: #2563eb; font-weight: 700; }
.polku-sb-item .e { font-size: 1.1rem; width: 22px; text-align: center; }

@media (max-width: 900px) {
	.polku-sidebar { display: none; }
}

/* === Hide WordPress admin bar gap on desktop === */
.admin-bar .polku-sidebar { top: 32px; max-height: calc(100vh - 32px); }
@media screen and (max-width: 782px) {
	.admin-bar .polku-sidebar { top: 46px; max-height: calc(100vh - 46px); }
}

/* Screen reader text */
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute; width: 1px; word-wrap: normal !important;
}

/* ============================================================
 * MOBILE BOTTOM NAV + MENU SHEET
 * ============================================================ */
.polku-botnav { display: none; }
.polku-sheet { display: none; }

@media (max-width: 900px) {
	/* chừa chỗ cho thanh đáy */
	.polku-main-wrap { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

	/* thanh điều hướng ghim đáy */
	.polku-botnav {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
		background: #fff; border-top: 1px solid #e2e8f0;
		box-shadow: 0 -4px 16px rgba(15,23,42,0.06);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.polku-bn-item {
		flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
		min-height: 58px; padding: 7px 2px; border: none; background: none; cursor: pointer;
		font-family: inherit; font-size: 10.5px; font-weight: 700; color: #64748b; text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}
	.polku-bn-item:hover, .polku-bn-item:active { color: #2563eb; text-decoration: none; }
	.polku-bn-item.on { color: #2563eb; }
	.polku-bn-ic { font-size: 20px; line-height: 1; }
	.polku-bn-lb { line-height: 1.1; white-space: nowrap; }
	.admin-bar .polku-botnav { /* admin bar ở trên, không ảnh hưởng */ }

	/* menu sheet (bấm "Thêm") */
	.polku-sheet { display: block; position: fixed; inset: 0; z-index: 1100; }
	.polku-sheet[hidden] { display: none; }
	.polku-sheet-bg { position: absolute; inset: 0; background: rgba(15,23,42,0.45); animation: pkSheetFade 180ms ease; }
	.polku-sheet-panel {
		position: absolute; left: 0; right: 0; bottom: 0;
		background: #fff; border-radius: 18px 18px 0 0; padding: 8px 14px calc(18px + env(safe-area-inset-bottom, 0px));
		max-height: 80vh; overflow-y: auto; animation: pkSheetUp 220ms cubic-bezier(0.16,1,0.3,1);
	}
	.polku-sheet-grip { width: 40px; height: 4px; border-radius: 999px; background: #cbd5e1; margin: 6px auto 4px; }
	.polku-sheet-h { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 10px; font-size: 15px; font-weight: 900; color: #0f172a; }
	.polku-sheet-x { width: 32px; height: 32px; border-radius: 8px; border: none; background: #f1f5f9; color: #475569; font-size: 15px; cursor: pointer; }
	.polku-sheet-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
	.polku-sheet-item { display: flex; align-items: center; gap: 10px; padding: 13px 12px; border-radius: 11px; background: #f8fafc; font-size: 14px; font-weight: 700; color: #0f172a; text-decoration: none; }
	.polku-sheet-item:hover { background: #f1f5f9; color: #0f172a; text-decoration: none; }
	.polku-sheet-item.on { background: #dbeafe; color: #2563eb; }
	.polku-sheet-ic { font-size: 18px; width: 24px; text-align: center; }
}
@keyframes pkSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes pkSheetFade { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
 * MOBILE — giảm padding ngang cho các trang công cụ + nội dung
 * ============================================================ */
@media (max-width: 600px) {
	.sm, .pk, .kq, .koe, .koe-detail, .vdv, .vdv-write, .pbt, .pbt-quiz,
	.container, .container-prose, .article-header, .entry-content {
		padding-left: 14px !important; padding-right: 14px !important;
	}
}
