/* ============================================================
   pythonvietnam.com - CSS tùy chỉnh trên nền GeneratePress
   Ưu tiên: dễ đọc, code hiển thị đúng, dùng tốt trên điện thoại
   ============================================================ */

/* ------------------------------------------------------------
   1. KHỐI CODE
   Với Python, thụt lề là cú pháp - tuyệt đối không bẻ dòng.
   Dòng dài thì cuộn ngang trong khối, không phá bố cục trang.
   ------------------------------------------------------------ */

.entry-content pre,
.wp-block-code {
	max-width: 100%;
	padding: 16px 18px;
	margin: 0 0 24px;
	border: none;
	border-radius: 8px;
	background-color: #1e293b;
	color: #e2e8f0;

	font-family: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono",
	             Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 14px;
	font-style: normal;
	line-height: 1.65;
	tab-size: 4;

	white-space: pre;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;

	/* Bóng mờ ở mép báo cho người đọc biết còn nội dung bên phải.
	   Hai lớp đặc cuộn cùng nội dung, hai lớp bóng đứng yên,
	   nên bóng tự biến mất khi đã cuộn hết. */
	background-image:
		linear-gradient(to right, #1e293b, #1e293b),
		linear-gradient(to left,  #1e293b, #1e293b),
		linear-gradient(to right, rgba(0,0,0,.45), rgba(0,0,0,0)),
		linear-gradient(to left,  rgba(0,0,0,.45), rgba(0,0,0,0));
	background-position: left center, right center, left center, right center;
	background-repeat: no-repeat;
	background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

.entry-content pre code {
	white-space: pre;
	background: none;
	color: inherit;
	padding: 0;
	border: none;
	font-size: inherit;
	font-family: inherit;
}

/* Code nằm giữa dòng văn bản */
.entry-content :not(pre) > code {
	font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
	font-size: .9em;
	background-color: #f1f5f9;
	color: #be123c;
	padding: 2px 6px;
	border-radius: 4px;
	white-space: break-spaces;
	word-break: break-word;
}

.entry-content pre::-webkit-scrollbar       { height: 8px; }
.entry-content pre::-webkit-scrollbar-track { background: #0f172a; border-radius: 0 0 8px 8px; }
.entry-content pre::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }

/* ------------------------------------------------------------
   2. NỘI DUNG BÀI VIẾT
   ------------------------------------------------------------ */

.entry-content p,
.entry-content li {
	font-size: 17px;
	line-height: 1.75;
}

.entry-content h2 {
	margin-top: 42px;
	margin-bottom: 14px;
	line-height: 1.3;
	font-size: 27px;
}

.entry-content h3 {
	margin-top: 30px;
	margin-bottom: 10px;
	line-height: 1.35;
	font-size: 21px;
}

.entry-content ul,
.entry-content ol { padding-left: 24px; }
.entry-content li + li { margin-top: 6px; }

.entry-content img,
.entry-content iframe,
.entry-content video { max-width: 100%; height: auto; }

.entry-content table {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
}

.entry-content a { word-break: break-word; }

/* Danh sách bài: tiêu đề dễ bấm, phần tóm tắt dễ đọc */
.entry-title { line-height: 1.3; }
.entry-summary p { font-size: 16px; line-height: 1.7; }

/* ------------------------------------------------------------
   3. ĐIỆN THOẠI  (tối đa 768px)
   ------------------------------------------------------------ */

@media (max-width: 768px) {

	/* Khối code tràn hết chiều ngang màn hình để hiện được nhiều cột hơn */
	.entry-content pre,
	.wp-block-code {
		font-size: 12.5px;
		line-height: 1.6;
		padding: 14px;
		margin-left: -20px;
		margin-right: -20px;
		border-radius: 0;
	}

	.entry-content :not(pre) > code { font-size: .88em; }

	.entry-content p,
	.entry-content li { font-size: 16px; line-height: 1.7; }

	.entry-content h2 { font-size: 22px; margin-top: 34px; }
	.entry-content h3 { font-size: 19px; }

	.entry-title { font-size: 25px; }

	.entry-content ul,
	.entry-content ol { padding-left: 20px; }

	/* Vùng chạm đủ lớn theo khuyến nghị về khả năng tiếp cận */
	.main-navigation a,
	.nav-links a,
	.paging-navigation a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}

/* ------------------------------------------------------------
   4. MÀN HÌNH NHỎ  (tối đa 420px)
   ------------------------------------------------------------ */

@media (max-width: 420px) {
	.entry-content pre,
	.wp-block-code { font-size: 11.5px; padding: 12px; }

	.entry-content p,
	.entry-content li { font-size: 15.5px; }

	.entry-title { font-size: 22px; }
	.entry-content h2 { font-size: 20px; }
}

/* ------------------------------------------------------------
   5. IN ẤN
   ------------------------------------------------------------ */

@media print {
	.entry-content pre {
		background: #f8f8f8;
		color: #000;
		white-space: pre-wrap;
		border: 1px solid #ddd;
	}
	.main-navigation,
	.sidebar,
	.site-footer { display: none; }
}

/* ------------------------------------------------------------
   6. HEADER VÀ LOGO

   GeneratePress xuất .site-logo SAU .site-branding nên logo rơi
   xuống dưới tiêu đề. Dùng flex + order để đưa logo lên trước và
   xếp cạnh tiêu đề, không phải sửa PHP của theme.
   ------------------------------------------------------------ */

.inside-header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	padding: 20px 40px;
	text-align: left;
}

.inside-header .site-logo {
	order: 1;
	flex: 0 0 auto;
	margin: 0;
	line-height: 0;
}

.inside-header .site-branding {
	order: 2;
	min-width: 0;              /* cho phép chữ dài xuống dòng thay vì tràn */
}

.site-logo .header-image,
.site-header .header-image {
	width: 52px;
	height: 52px;
	max-width: none;           /* ghi đè img{max-width:100%} của theme */
}

.site-header .main-title {
	font-size: 26px;
	line-height: 1.2;
	letter-spacing: -.01em;
	margin: 0;
}

.site-header .site-description {
	font-size: 13.5px;
	line-height: 1.45;
	margin: 3px 0 0;
	opacity: .85;
}

/* ---- Điện thoại ---- */
@media (max-width: 768px) {

	.inside-header {
		padding: 14px 20px;      /* theme để 40px, quá rộng trên màn nhỏ */
		gap: 11px;
	}

	.site-logo .header-image,
	.site-header .header-image { width: 40px; height: 40px; }

	.site-header .main-title { font-size: 20px; }

	/* Mô tả site chiếm hai dòng trên màn nhỏ mà không mang thêm thông tin */
	.site-header .site-description { display: none; }
}

@media (max-width: 420px) {
	.inside-header { padding: 12px 16px; gap: 10px; }
	.site-logo .header-image,
	.site-header .header-image { width: 36px; height: 36px; }
	.site-header .main-title { font-size: 18.5px; }
}