/* ==========================================================================
   KHR Tranh Tô Màu — v2.0.0
   Palette kế thừa nguyên bản từ trang chủ khoahocreview.vn.
   KHÔNG đặt max-width / padding / font-family ở cấp gốc — layout, container
   và typography do theme (Blocksy) quyết định.
   ========================================================================== */

.khr-tm {
	--g:          #16a34a;
	--g-dark:     #12833b;
	--g-deep:     #17332a;
	--ink:        #33413c;
	--muted:      #6b7a73;
	--orange:     #f97316;
	--orange-deep:#c2410c;
	--mint:       #f0fbf4;
	--cream:      #fff7ed;
	--line:       #e6efe9;
	--line-hover: #cfe6d8;

	--r-sm: 12px;
	--r-md: 16px;
	--r-lg: 18px;
	--r-xl: 22px;

	--shadow:       0 10px 30px -18px rgba(19, 60, 40, .22);
	--shadow-hover: 0 20px 40px -20px rgba(19, 60, 40, .32);
	--shadow-green: 0 12px 24px -12px rgba(22, 163, 74, .75);

	color: var(--ink);
	line-height: 1.6;
}

.khr-tm *,
.khr-tm *::before,
.khr-tm *::after { box-sizing: border-box; }

.khr-tm h2 {
	color: var(--g-deep);
	font-weight: 800;
	font-size: clamp(20px, 3vw, 26px);
	margin: 0 0 14px;
	line-height: 1.25;
}

.khr-tm--top    { margin-bottom: 2rem; }
.khr-tm--bottom { margin-top: 3rem; }

/* --------------------------------------------------------------------------
   TỜ GIẤY — thành phần chữ ký của trang
   Tranh nằm trên tờ A4 trắng, đổ bóng, nổi trên nền mint.
   -------------------------------------------------------------------------- */

.khr-tm__canvas {
	position: relative;
	max-width: 440px;
	margin: 0 auto 22px;
	padding: 22px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 4px;                       /* giấy thì không bo tròn nhiều */
	box-shadow:
		0 1px 2px rgba(19, 60, 40, .06),
		0 18px 40px -22px rgba(19, 60, 40, .34);
	text-align: center;
}

/* Mép giấy phía sau — gợi ý "cả một tập tranh, không chỉ một tờ". */
.khr-tm__canvas::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: translate(6px, 6px) rotate(1.1deg);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 4px;
}

.khr-tm__img {
	display: block;
	max-width: 100%;
	max-height: 66vh;
	width: auto;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   NHÃN META (độ khó · độ tuổi · miễn phí)
   -------------------------------------------------------------------------- */

.khr-tm__meta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.khr-tm__tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--g-dark);
	background: #e7f7ee;
	border-radius: 999px;
	padding: 5px 12px;
	text-decoration: none;
}
.khr-tm a.khr-tm__tag:hover { background: #d8f0e3; color: var(--g-dark); }

.khr-tm__tag--kho  { color: var(--orange-deep); background: var(--cream); }
.khr-tm__tag--free { color: var(--muted);       background: #f2f5f3; }

/* --------------------------------------------------------------------------
   NÚT — Tải PDF là hành động chính (xanh). In ngay & PNG là phụ (ghost).
   Dùng !important vì Blocksy có style riêng cho a/button trong vùng content.
   -------------------------------------------------------------------------- */

.khr-tm__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 8px;
}

.khr-tm .khr-tm__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 24px;
	border: 0;
	border-radius: var(--r-sm);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.khr-tm .khr-tm__btn:active { transform: translateY(1px); }

/* Chính */
.khr-tm .khr-tm__btn--pdf,
.khr-tm .khr-tm__btn--cta {
	background: var(--g) !important;
	color: #fff !important;
	box-shadow: var(--shadow-green);
}
.khr-tm .khr-tm__btn--pdf:hover,
.khr-tm .khr-tm__btn--cta:hover { background: var(--g-dark) !important; color: #fff !important; }

/* Phụ */
.khr-tm .khr-tm__btn--print,
.khr-tm .khr-tm__btn--png {
	background: #fff !important;
	color: var(--g-deep) !important;
	border: 1.5px solid var(--line);
}
.khr-tm .khr-tm__btn--print:hover,
.khr-tm .khr-tm__btn--png:hover {
	border-color: var(--g);
	color: var(--g-dark) !important;
	background: #fff !important;
}

.khr-tm__hint {
	text-align: center;
	font-size: 13px;
	color: var(--muted);
	margin: 0 0 4px;
}

/* --------------------------------------------------------------------------
   BẢNG TỪ VỰNG
   -------------------------------------------------------------------------- */

.khr-tm__vocab,
.khr-tm__phrases { margin-bottom: 2.5rem; }

.khr-tm__vocab-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--shadow);
	font-size: 15px;
}
.khr-tm__vocab-table thead { background: var(--mint); }
.khr-tm__vocab-table th {
	text-align: left;
	padding: 12px 16px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--g-dark);
	border-bottom: 1px solid var(--line);
}
.khr-tm__vocab-table td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
}
.khr-tm__vocab-table tbody tr:last-child td { border-bottom: 0; }
.khr-tm__vocab-table tbody tr { background: transparent !important; }
.khr-tm__vocab-table tbody tr:hover { background: #fafdfb !important; }
.khr-tm__vocab-table td:first-child strong { color: var(--g-deep); font-weight: 800; }
.khr-tm__vocab-table td:nth-child(2) { color: var(--muted); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13.5px; }

/* --------------------------------------------------------------------------
   CÂU MẪU — thẻ mint, gạch xanh bên trái
   -------------------------------------------------------------------------- */

.khr-tm__phrases ul {
	margin: 0;
	padding: 20px 22px 20px 40px;
	background: var(--mint);
	border-left: 3px solid var(--g);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	list-style: none;
}
.khr-tm__phrases li {
	position: relative;
	margin-bottom: 10px;
	font-size: 15px;
	color: var(--ink);
}
.khr-tm__phrases li:last-child { margin-bottom: 0; }
.khr-tm__phrases li::before {
	content: "";
	position: absolute;
	left: -18px;
	top: .62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--g);
}

/* --------------------------------------------------------------------------
   CTA — cùng ngôn ngữ với khối "closing" ở trang chủ
   -------------------------------------------------------------------------- */

.khr-tm__cta {
	text-align: center;
	background: linear-gradient(135deg, #17332a, #1f4a3a);
	border-radius: var(--r-xl);
	padding: 42px 28px;
	margin: 0 0 3rem;
}
.khr-tm__cta h2 { color: #fff; margin-bottom: 10px; }
.khr-tm__cta p {
	color: #c7e6d4;
	font-size: 15.5px;
	max-width: 50ch;
	margin: 0 auto 22px;
}
.khr-tm .khr-tm__cta .khr-tm__btn--cta:hover { background: #1bb35a !important; }

/* --------------------------------------------------------------------------
   THANH LỌC CHỦ ĐỀ (shortcode)
   -------------------------------------------------------------------------- */

.khr-tm__filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 28px;
}
.khr-tm .khr-tm__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--g-deep);
	text-decoration: none;
	transition: border-color .15s, background .15s, color .15s;
}
.khr-tm .khr-tm__chip:hover { border-color: var(--g); color: var(--g-dark); }
.khr-tm .khr-tm__chip.is-active {
	background: var(--g);
	border-color: var(--g);
	color: #fff;
}
.khr-tm__chip-count { opacity: .6; font-size: 12.5px; font-weight: 700; }

/* --------------------------------------------------------------------------
   LƯỚI TRANH — kế thừa .card của trang chủ
   -------------------------------------------------------------------------- */

.khr-tm__related { margin-bottom: 1rem; }

.khr-tm__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 18px;
}

.khr-tm .khr-tm__card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	text-decoration: none;
	box-shadow: var(--shadow);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.khr-tm .khr-tm__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
	border-color: var(--line-hover);
}
.khr-tm .khr-tm__card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1.15;
	object-fit: contain;
	background: var(--mint);
	padding: 10px;
}
.khr-tm__card-title {
	display: block;
	padding: 12px 14px 16px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--g-deep);
}

/* --------------------------------------------------------------------------
   TRUY CẬP & CHUYỂN ĐỘNG
   -------------------------------------------------------------------------- */

.khr-tm a:focus-visible,
.khr-tm button:focus-visible {
	outline: 2px solid var(--g);
	outline-offset: 3px;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.khr-tm * { transition: none !important; }
	.khr-tm .khr-tm__card:hover { transform: none; }
}

@media (max-width: 640px) {
	.khr-tm__canvas { padding: 14px; }
	.khr-tm__canvas::before { display: none; }
	.khr-tm__actions { flex-direction: column; }
	.khr-tm .khr-tm__btn { justify-content: center; width: 100%; }
	.khr-tm__cta { padding: 32px 20px; }
	.khr-tm__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}


/* ==========================================================================
   TRANG TAXONOMY (/to-mau/chu-de/... và /to-mau/do-tuoi/...)

   Card ở đây do THEME render, không phải plugin. Không đoán tên class của
   Blocksy nữa — nhắm rộng, nhưng đóng khung tuyệt đối trong body.tax-khr_*
   nên không ảnh hưởng bất kỳ trang nào khác của site.
   ========================================================================== */

/* 1. Bỏ mọi khung tỉ lệ cố định mà theme áp lên vùng chứa ảnh. */
body.tax-khr_chu_de article [class*="media"],
body.tax-khr_chu_de article [class*="image"],
body.tax-khr_chu_de article [class*="thumb"],
body.tax-khr_do_tuoi article [class*="media"],
body.tax-khr_do_tuoi article [class*="image"],
body.tax-khr_do_tuoi article [class*="thumb"] {
	--ratio: 1/1.414 !important;
	aspect-ratio: 1 / 1.414 !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
}

/* 2. Ảnh: hiện TRỌN VẸN, không cắt. */
body.tax-khr_chu_de article img,
body.tax-khr_do_tuoi article img {
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: center !important;
	padding: 10px;
	background: #fff;
}

/* 3. Lưới: tranh dọc thì cần nhiều cột hơn, nếu không thẻ cao lêu nghêu. */
@media (min-width: 1000px) {
	body.tax-khr_chu_de .entries,
	body.tax-khr_do_tuoi .entries { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (min-width: 600px) and (max-width: 999px) {
	body.tax-khr_chu_de .entries,
	body.tax-khr_do_tuoi .entries { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 599px) {
	body.tax-khr_chu_de .entries,
	body.tax-khr_do_tuoi .entries { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==========================================================================
   IN GIẤY
   display:none (KHÔNG dùng visibility:hidden — nó vẫn chiếm chỗ và sinh ra
   các trang trắng thừa).
   ========================================================================== */

@media print {

	body > * { display: none !important; }

	body > #khr-print-root {
		display: block !important;
		position: static;
		margin: 0;
		padding: 0;
		width: 100%;
	}

	#khr-print-root img {
		display: block;
		width: 100%;
		height: auto;
		max-height: 100vh;
		object-fit: contain;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	html, body {
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		overflow: visible !important;
	}

	@page {
		size: A4 portrait;
		margin: 8mm;
	}
}