/*
Theme Name: Mầm non 19/5
Theme URI: https://mamnon195.edu.vn
Author: vintech
Description: Theme viết tay cho cổng thông tin Trường Mầm non 19/5 Đà Nẵng.
Version: 0.1.1
Requires PHP: 8.1
Text Domain: mn195
*/

/* ==========================================================================
   1. BIẾN GIAO DIỆN — đổi màu, font, bo góc chỉ cần sửa ở đây.
   Bảng màu pastel lấy từ logo (hồng, xanh lá) và site cũ.
   ========================================================================== */
:root {
	--pink: #ec4d8b;
	--pink-600: #c2306b; /* đủ tương phản AA cho chữ trên nền trắng và nền --pink-soft */
	--pink-soft: #ffe6ef;
	--green: #3dae6b;
	--green-soft: #e3f6ea;
	--sun: #f8b54d;
	--sun-soft: #fff2da;
	--sky: #19a4c6;
	--sky-soft: #dcf2f9;
	--coral: #fc5b4e;
	--coral-soft: #ffe5e2;
	--grape: #8373ce;
	--grape-soft: #ece8fb;

	--ink: #3a2e48;
	--muted: #76698a;
	--line: #f1e6ee;
	--bg: #fffaf7;
	--bg-alt: #fff3f7;
	--white: #fff;
	--footer-bg: #3a2e48;

	--font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--radius: 24px;
	--radius-sm: 14px;
	--shadow: 0 14px 34px rgba(214, 58, 120, 0.14);
	--shadow-sm: 0 4px 16px rgba(58, 46, 72, 0.08);
	--gap: 1.5rem;
}

/* ==========================================================================
   2. FONT — Be Vietnam Pro tự host (assets/fonts, giấy phép OFL).
   ========================================================================== */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/QdVPSTAyLFyeg_IDWvOJmVES_Hw4BXoKZA.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/QdVPSTAyLFyeg_IDWvOJmVES_Hw5BXoKZA.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/QdVPSTAyLFyeg_IDWvOJmVES_Hw3BXo.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HTEJm86Rb0bcw.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HTEJm87Rb0bcw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HTEJm81Rb0.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HToIW86Rb0bcw.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HToIW87Rb0bcw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HToIW81Rb0.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HSMIG86Rb0bcw.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HSMIG87Rb0bcw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/QdVMSTAyLFyeg_IDWvOJmVES_HSMIG81Rb0.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   3. NỀN TẢNG
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Chỉ trình đọc màn hình đọc được (h1 trang chủ, tiêu đề phân trang của WordPress). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--pink-600); text-decoration: none; }
a:hover { color: var(--pink); }
/* Icon SVG của mn195_icon(): cao bằng chữ, nằm trên cùng dòng. */
.icon { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.18em; flex: none; }

h1, h2, h3, h4, .h1 {
	margin: 0 0 0.6em;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--ink);
}

p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 6px; }

.container { width: min(1180px, 92%); margin-inline: auto; }
.center { text-align: center; margin-top: 2.5rem; }

.skip-link {
	position: absolute;
	left: 1rem;
	top: -3rem;
	z-index: 100;
	padding: 0.6rem 1rem;
	background: var(--ink);
	color: var(--white);
	border-radius: var(--radius-sm);
}
.skip-link:focus { top: 1rem; color: var(--white); }

/* Nút */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.8em 1.6em;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--pink-600);
	color: var(--white);
	font-weight: 600;
	box-shadow: var(--shadow);
	transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.btn:hover { color: var(--white); background: var(--pink-600); transform: translateY(-2px); }
.btn-ghost { background: var(--white); color: var(--pink-600); border-color: var(--pink-soft); box-shadow: none; }
.btn-ghost:hover { background: var(--pink-soft); color: var(--pink-600); }
.btn-light { background: var(--white); color: var(--pink-600); }
.btn-light:hover { background: var(--sun-soft); color: var(--pink-600); }

.eyebrow {
	display: inline-block;
	margin-bottom: 0.8rem;
	padding: 0.3em 0.95em;
	border-radius: 999px;
	background: var(--pink-soft);
	color: var(--pink-600);
	font-size: 0.85rem;
	font-weight: 600;
}

.empty {
	padding: 2rem;
	border: 2px dashed var(--line);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--muted);
	text-align: center;
}

/* ==========================================================================
   4. THANH THÔNG TIN + HEADER + MENU
   ========================================================================== */
.topbar { background: var(--pink-soft); font-size: 0.85rem; }
.topbar-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.3rem 1.2rem;
	padding-block: 0.45rem;
}
.topbar a { color: var(--ink); }
.topbar a:hover { color: var(--pink-600); }
.topbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.2rem; }
.topbar-login { font-weight: 600; color: var(--pink-600) !important; }

.header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	transition: box-shadow 0.2s;
}
.header.scrolled { box-shadow: var(--shadow-sm); }
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 78px;
}

.logo { display: flex; align-items: center; gap: 0.7rem; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo-mark {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: contain;
	background: var(--white);
	border: 3px solid var(--white);
	box-shadow: var(--shadow-sm);
}
.logo-text { display: flex; flex-direction: column; line-height: 1.25; }
.logo-text strong { font-size: 1.15rem; color: var(--pink-600); }
.logo-text small { font-size: 0.8rem; color: var(--muted); }

.nav .menu { display: flex; align-items: center; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }
.nav .menu > li { position: relative; }
.nav .menu a {
	display: block;
	padding: 0.55em 0.95em;
	border-radius: 999px;
	color: var(--ink);
	font-weight: 600;
	font-size: 0.95rem;
	white-space: nowrap;
	transition: background 0.2s, color 0.2s;
}
.nav .menu a:hover { background: var(--pink-soft); color: var(--pink-600); }
.nav .menu > .current-menu-item > a,
.nav .menu > .current-menu-ancestor > a,
.nav .menu > .current-menu-parent > a,
.nav .menu > .current_page_item > a { background: var(--pink-600); color: var(--white); }

.nav .menu-item-has-children > a::after { content: ''; display: inline-block; width: 0.38em; height: 0.38em; margin-left: 0.4em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.2em) rotate(45deg); opacity: 0.7; }

.nav .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 270px;
	margin: 0;
	padding: 0.5rem;
	list-style: none;
	background: var(--white);
	border-radius: 18px;
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
/* Cầu nối vô hình để chuột đi từ mục cha xuống menu con không bị rớt. */
.nav .sub-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.nav .menu > li:hover > .sub-menu,
.nav .menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav .sub-menu a { border-radius: 12px; font-weight: 500; white-space: normal; }

.burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 0 11px;
	border: 0;
	border-radius: 50%;
	background: var(--pink-soft);
	cursor: pointer;
}
.burger span { display: block; height: 3px; border-radius: 3px; background: var(--pink-600); transition: transform 0.25s, opacity 0.25s; }
.burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   5. TRANG CHỦ
   ========================================================================== */
.hero {
	position: relative;
	padding-block: 3rem 4rem;
	overflow: hidden;
	background: linear-gradient(160deg, var(--pink-soft) 0%, var(--sky-soft) 60%, var(--sun-soft) 100%);
}
.slide { display: none; }
.slide.active { display: block; animation: fade-in 0.7s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 3rem; }
.hero h1, .hero .h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.hero .lead { max-width: 34em; font-size: 1.08rem; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }

.hero-media { position: relative; }
.hero-media img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 8px solid var(--white);
	border-radius: 42% 58% 55% 45% / 45% 40% 60% 55%;
	box-shadow: var(--shadow);
}
.blob { position: absolute; border-radius: 50%; }
.blob-1 { top: -14px; right: 8%; width: 92px; height: 92px; background: var(--sun); opacity: 0.85; }
.blob-2 { bottom: 4%; left: -18px; z-index: 2; width: 58px; height: 58px; background: var(--green); opacity: 0.8; }

.hero-controls { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 2.2rem; }
.hero-arrow {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--white);
	color: var(--pink-600);
	font-size: 1.6rem;
	line-height: 1;
	box-shadow: var(--shadow-sm);
	cursor: pointer;
}
.hero-pause { font-size: 0.85rem; letter-spacing: -0.1em; }
.dots { display: flex; }
/* Nút đủ vùng chạm 44px, chấm nhìn thấy là pseudo-element bên trong. */
.dots button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.dots button::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--white); transition: width 0.25s, background 0.25s; }
.dots button.active::before { width: 28px; background: var(--pink-600); }

.wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 60px; fill: var(--bg); }

.section { padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.section-alt { background: var(--bg-alt); }

.section-head { max-width: 720px; margin: 0 auto 2rem; text-align: center; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
/* Đường chấm bi dưới tiêu đề */
.section-head h2::after {
	content: '';
	display: block;
	width: 64px;
	height: 8px;
	margin: 0.7rem auto 0;
	background: radial-gradient(circle, var(--pink) 3px, transparent 3.5px) 0 0 / 16px 8px repeat-x;
}
.section-head p { color: var(--muted); font-size: 1.05rem; }
.section-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; max-width: none; text-align: left; }
.section-head-row h2 { margin-bottom: 0; }
.section-head-row h2::after { margin-left: 0; }
.link-more { font-weight: 600; }

/* Bốn giá trị cốt lõi */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.value { --c: var(--pink); --c-soft: var(--pink-soft); text-align: center; }
.value-green { --c: var(--green); --c-soft: var(--green-soft); }
.value-sky { --c: var(--sky); --c-soft: var(--sky-soft); }
.value-coral { --c: var(--coral); --c-soft: var(--coral-soft); }
.value-grape { --c: var(--grape); --c-soft: var(--grape-soft); }
.value-photo {
	display: block;
	width: min(200px, 100%);
	aspect-ratio: 1;
	margin: 0 auto;
	overflow: hidden;
	border: 8px solid var(--c-soft);
	border-radius: 50%;
	box-shadow: var(--shadow-sm);
	transition: transform 0.3s;
}
.value-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.value:hover .value-photo { transform: rotate(-4deg) scale(1.04); }
.value strong { display: block; margin-top: 1rem; font-size: 1.1rem; color: var(--c); }

/* Carousel thẻ bài */
.carousel { display: flex; align-items: center; gap: 0.75rem; }
.carousel-track {
	display: grid;
	flex: 1;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
	gap: var(--gap);
	padding-block: 0.5rem 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }
.carousel-arrow {
	flex: none;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--white);
	color: var(--pink-600);
	font-size: 1.6rem;
	line-height: 1;
	box-shadow: var(--shadow-sm);
	cursor: pointer;
}

/* Thẻ bài viết */
.post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--white);
	box-shadow: var(--shadow-sm);
	transition: transform 0.25s, box-shadow 0.25s;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card-thumb { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pink-soft); }
.post-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.post-card:hover .post-card-thumb img { transform: scale(1.05); }
.date-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 0.35em 0.75em;
	border-radius: 16px;
	background: var(--white);
	color: var(--muted);
	font-size: 0.72rem;
	line-height: 1.2;
	text-align: center;
	box-shadow: var(--shadow-sm);
}
.date-badge b { display: block; font-size: 1.35rem; color: var(--pink); }
.post-card-body { padding: 1.2rem 1.3rem 1.5rem; }
.post-card-body h3 { margin: 0.6rem 0 0.4rem; font-size: 1.05rem; }
.post-card-body h3 a { color: var(--ink); }
.post-card-body h3 a:hover { color: var(--pink-600); }
.post-card-body p {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--muted);
	font-size: 0.92rem;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.chip {
	display: inline-block;
	padding: 0.25em 0.8em;
	border-radius: 999px;
	background: var(--sun-soft);
	color: var(--ink);
	font-size: 0.75rem;
	font-weight: 600;
}
.chip-thong-tin-su-kien { background: var(--pink-soft); color: var(--pink-600); }
.chip-van-ban-cong-khai { background: var(--grape-soft); color: var(--ink); }

/* Hoạt động nổi bật: lưới 3 cột xen câu nói, như bố cục cũ */
/* Lưới chữ nhật: hàng trên là các thẻ ảnh cao bằng nhau, chia đều theo số bài
   (1-4 bài, không để ô trống); hàng dưới 2 câu nói chia đôi. Câu nói xen giữa
   thẻ trong HTML, nên dùng order để dồn chúng xuống cuối. */
.highlight-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: stretch; }
.highlight-grid > .highlight { grid-column: span 3; display: flex; flex-direction: column; }
.highlight-grid:not(:has(.highlight:nth-of-type(4))) > .highlight { grid-column: span 4; }
.highlight-grid:not(:has(.highlight:nth-of-type(3))) > .highlight { grid-column: span 6; }
.highlight-grid:not(:has(.highlight:nth-of-type(2))) > .highlight { grid-column: span 12; }
.highlight-grid > .quote { order: 1; grid-column: span 6; display: flex; flex-direction: column; justify-content: center; }
.highlight-grid .quote p { margin: 0.4rem 0 0.6rem; }

.highlight { overflow: hidden; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.highlight-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pink-soft); }
.highlight-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.highlight:hover .highlight-thumb img { transform: scale(1.05); }
.highlight-body { padding: 1rem 1.2rem 1.3rem; }
.highlight-body time { color: var(--pink-600); font-size: 0.82rem; font-weight: 600; }
.highlight-body h3 { margin: 0.3rem 0 0; font-size: 1.02rem; }
.highlight-body h3 a { color: var(--ink); }

.quote { margin: 0; padding: 2rem 1.7rem; border-radius: var(--radius); background: var(--sun-soft); }
.quote::before { content: '“'; display: block; height: 2.2rem; color: var(--sun); font-size: 4.2rem; font-weight: 700; line-height: 1; }
.quote p { font-size: 1.12rem; font-weight: 600; }
.quote cite { color: var(--muted); font-style: normal; }
.quote cite::before { content: '— '; }
.quote-2 { background: var(--green-soft); }
.quote-2::before { color: var(--green); }

/* Thư viện ảnh trang chủ */
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.photo { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 22px; background: var(--pink-soft); }
.photo:nth-child(odd) { border-radius: 28px 28px 28px 8px; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.photo:hover img { transform: scale(1.06); }

/* Kêu gọi liên hệ */
.cta { padding-block: 2.5rem; }
.cta-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1.2rem;
	padding: 2.2rem 2.5rem;
	border-radius: 32px;
	background: linear-gradient(120deg, var(--pink) 0%, var(--grape) 100%);
	box-shadow: var(--shadow);
}
.cta-inner h2 { margin: 0; color: var(--white); font-size: clamp(1.25rem, 2.5vw, 1.75rem); }

/* ==========================================================================
   5b. TRANG CON — dải tiêu đề dùng chung
   ========================================================================== */
.page-hero {
	position: relative;
	padding-block: 2.8rem 4.4rem;
	overflow: hidden;
	background: linear-gradient(160deg, var(--pink-soft) 0%, var(--sky-soft) 70%, var(--sun-soft) 100%);
	text-align: center;
}
.page-hero h1 { margin: 0.4rem 0; font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.page-hero p { max-width: 40em; margin: 0 auto; color: var(--muted); }
.breadcrumb { color: var(--muted); font-size: 0.85rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--pink-600); }
.breadcrumb span { margin-inline: 0.45rem; }

/* Danh sách theo danh mục */
.filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-bottom: 2.4rem; }
.filter-bar a {
	padding: 0.5rem 1.15rem;
	border: 2px solid var(--pink-soft);
	border-radius: 999px;
	background: var(--white);
	color: var(--ink);
	font-size: 0.92rem;
	font-weight: 600;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.filter-bar a:hover { border-color: var(--pink); color: var(--pink-600); }
.filter-bar a[aria-current="page"] { border-color: var(--pink-600); background: var(--pink-600); color: var(--white); }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }
.pagination, .pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; }
.pagination { margin-top: 2.8rem; }
.pagination .page-numbers {
	display: inline-flex;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	background: var(--white);
	color: var(--ink);
	font-weight: 600;
	box-shadow: var(--shadow-sm);
}
.pagination a.page-numbers:hover { background: var(--pink-soft); color: var(--pink-600); }
.pagination .page-numbers.current { background: var(--pink-600); color: var(--white); }
.pagination .page-numbers.dots { background: none; box-shadow: none; }

/* Bài viết */
.article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(1.5rem, 4vw, 2.6rem); align-items: start; }
.article { padding: clamp(1.3rem, 3.5vw, 2.4rem); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin: 0 0 1.4rem; color: var(--muted); font-size: 0.9rem; }
.article-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 2px dashed var(--line); }
.article-nav a { max-width: 48%; color: var(--ink); font-weight: 600; }
.article-nav a:hover { color: var(--pink-600); }
.article-nav small { display: block; color: var(--muted); font-weight: 500; }
.article-nav .next { margin-left: auto; text-align: right; }
.article-side { display: grid; gap: 1.2rem; }
.side-box { padding: 1.4rem; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.side-box h2 { margin: 0 0 1rem; font-size: 1.1rem; }
.side-info { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.9rem; margin: 0; font-size: 0.92rem; }
.side-info dt { color: var(--muted); }
.side-info dd { margin: 0; font-weight: 500; }
.side-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; font-size: 0.92rem; }
.side-list li { display: flex; gap: 0.8rem; align-items: flex-start; }
.side-thumb { flex: 0 0 72px; }
.side-thumb img { display: block; width: 72px; height: 72px; border-radius: var(--radius-sm); object-fit: cover; }
.side-list li > div a { color: var(--ink); font-weight: 600; line-height: 1.4; }
.side-list li > div a:hover { color: var(--pink-600); }
.side-list time { display: block; margin-top: 0.2rem; color: var(--muted); font-size: 0.82rem; }
.side-cta { background: linear-gradient(150deg, var(--pink-soft), var(--sun-soft)); box-shadow: none; }
.side-cta p { color: var(--muted); }

/* Nội dung soạn trong trình soạn thảo (bài, trang) */
.prose { font-size: 1.02rem; line-height: 1.75; overflow-wrap: anywhere; }
.prose-page { max-width: 820px; margin-inline: auto; }
.prose > :first-child { margin-top: 0; }
.prose h2, .prose h3 { margin-top: 1.6em; }
.prose a { color: var(--pink-600); text-decoration: underline; text-underline-offset: 3px; }
.prose img { height: auto; border-radius: var(--radius-sm); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose blockquote { margin: 1.5em 0; padding: 1em 1.4em; border-left: 4px solid var(--pink); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--bg-alt); }
.prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
.prose th, .prose td { padding: 0.5em 0.75em; border: 1px solid var(--line); }
.prose figure { margin: 1.5em 0; }
.prose iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-sm); }
.prose a[href$=".pdf" i]::before {
	content: "PDF";
	display: inline-block;
	margin-right: 0.45em;
	padding: 0.1em 0.45em;
	border-radius: 6px;
	background: var(--coral);
	color: var(--white);
	font-size: 0.72em;
	font-weight: 700;
	vertical-align: 0.15em;
}

/* 404 */
.error-404 { text-align: center; }
.error-code {
	margin: 0;
	color: var(--pink);
	font-size: clamp(5rem, 18vw, 9rem);
	font-weight: 700;
	line-height: 1;
	text-shadow: 6px 6px 0 var(--sun-soft);
}
.error-404 h1 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.error-404 p { color: var(--muted); }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 1.6rem; }

@media (max-width: 900px) {
	.article-wrap { grid-template-columns: 1fr; }
}

/* ==========================================================================
   6. ĐỐI TÁC + CHÂN TRANG
   ========================================================================== */
.partners { padding-block: 1.5rem 3.5rem; }
.partners-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem 2.8rem; }
.partners img { width: auto; height: 46px; filter: grayscale(1); opacity: 0.7; transition: filter 0.2s, opacity 0.2s; }
.partners img:hover { filter: none; opacity: 1; }

.footer { position: relative; background: var(--footer-bg); color: #eadff0; }
.footer-wave { position: absolute; left: 0; top: -49px; width: 100%; height: 50px; fill: var(--footer-bg); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-block: 3rem 2.5rem; }
.footer h2 { margin-bottom: 1rem; color: var(--white); font-size: 1.05rem; }
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer li { margin: 0.45rem 0; }
.footer a { color: #eadff0; }
.footer a:hover { color: var(--sun); }
.footer-brand .logo-text strong { color: var(--white); }
.footer-brand p { margin-top: 1rem; color: #cbbfd7; font-size: 0.92rem; }
.socials { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.socials a { padding: 0.35em 0.9em; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 0.85rem; }
.copyright { padding-block: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.12); color: #bfb2cc; font-size: 0.85rem; text-align: center; }

.to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 40;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--pink-600);
	color: var(--white);
	font-size: 1.2rem;
	box-shadow: var(--shadow);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s;
}
.to-top.show { opacity: 1; pointer-events: auto; }

/* Hiện dần khi cuộn (chỉ khi có JS) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s, transform 0.6s; }
.js .reveal.visible { opacity: 1; transform: none; }

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
	.burger { display: flex; }
	.nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		max-height: calc(100vh - 78px);
		padding: 0.8rem 4% 1.2rem;
		overflow-y: auto;
		background: var(--white);
		box-shadow: var(--shadow);
	}
	.nav.open { display: block; }
	.nav .menu { flex-direction: column; align-items: stretch; }
	.nav .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 0 1rem;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.nav .sub-menu::before { display: none; }
}

@media (max-width: 900px) {
	.hero-grid { grid-template-columns: 1fr; gap: 2rem; }
	.hero-media { max-width: 520px; margin-inline: auto; }
	.values { grid-template-columns: repeat(2, 1fr); }
	.carousel-track { grid-auto-columns: calc((100% - var(--gap)) / 2); }
	.highlight-grid > .highlight, .highlight-grid:not(:has(.highlight:nth-of-type(4))) > .highlight { grid-column: span 6; }
	.highlight-grid > .highlight:last-of-type:nth-of-type(odd) { grid-column: span 12; }
	.photo-grid { grid-template-columns: repeat(3, 1fr); }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
	.topbar-address, .topbar-right a[href^="mailto:"] { display: none; }
	.logo-text small { display: none; }
	.logo-text strong { font-size: 1rem; }
	.hero { padding-block: 2.5rem 4.5rem; }
	.carousel-arrow { display: none; }
	.carousel-track { grid-auto-columns: 85%; }
	.highlight-grid > .quote { grid-column: span 12; }
	.photo-grid { grid-template-columns: repeat(2, 1fr); }
	.cta-inner { padding: 1.8rem; text-align: center; justify-content: center; }
	.footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   7b. TRANG ĐĂNG NHẬP
   ========================================================================== */
.login-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); max-width: 860px; margin-inline: auto; }
.login-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 2rem; border-radius: var(--radius); background: var(--pink-soft); box-shadow: var(--shadow-sm); }
.login-card h2 { margin: 0; font-size: 1.35rem; }
.login-card p { margin: 0 0 0.6rem; }
.login-card .btn, .login-soon { margin-top: auto; }
.login-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--white); color: var(--pink-600); }
.login-card.is-soon { background: var(--bg-alt); color: var(--muted); }
.login-card.is-soon .login-icon { color: var(--muted); }
.login-soon { padding: 0.45rem 1rem; border-radius: 999px; background: var(--white); font-size: 0.85rem; font-weight: 600; }
@media (max-width: 640px) {
	.login-choices { grid-template-columns: 1fr; }
}

/* ==========================================================================
   8. TRANG GIỚI THIỆU, THƯ VIỆN ẢNH, LIÊN HỆ
   CSS của ba trang này chỉ thêm bên dưới dòng này (kể cả @media riêng).
   ========================================================================== */

/* Điều hướng ba phần giới thiệu và các thẻ thông tin. */
.mn195-about-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding-top: 2rem; }
.mn195-about-nav a { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; border-radius: var(--radius); background: var(--pink-soft); color: var(--ink); font-weight: 600; }
.mn195-about-nav a:nth-child(2) { background: var(--green-soft); }
.mn195-about-nav a:nth-child(3) { background: var(--sky-soft); }
.mn195-about-nav a:nth-child(4) { background: var(--sun-soft); }
.mn195-about-nav span { font-size: 1.6rem; opacity: 0.65; }
.mn195-about { scroll-margin-top: 110px; }
.mn195-history { max-width: 940px; margin-inline: auto; }
.mn195-source-note { color: var(--muted); font-size: 0.85rem; }
.mn195-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-block: 1.5rem; }
.mn195-stats p { margin: 0; padding: 1.5rem; border-radius: var(--radius); background: var(--sun-soft); }
.mn195-stats p:nth-child(2) { background: var(--green-soft); }
.mn195-stats p:nth-child(3) { background: var(--grape-soft); }
.mn195-stats strong { display: block; font-size: 2.4rem; line-height: 1.3; }
.mn195-detail-list { padding-left: 1.3rem; }
.mn195-detail-list li { padding-left: 0.3rem; margin-bottom: 0.8rem; }
.mn195-detail-list li::marker { color: var(--pink-600); }
.mn195-about-split { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 3rem; }
.mn195-about h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.mn195-timeline { list-style: none; padding: 0 0 0 1.4rem; margin-block: 1.8rem 0; border-left: 2px solid var(--pink-soft); }
.mn195-timeline li { position: relative; padding-bottom: 0.5rem; }
.mn195-timeline li::before { content: ''; position: absolute; top: 0.45rem; left: -1.78rem; width: 10px; height: 10px; background: var(--pink); border-radius: 50%; }
.mn195-timeline strong { color: var(--pink-600); }
.mn195-timeline p { margin-top: 0.2rem; font-size: 0.95rem; }
.mn195-about-photo { margin: 0; padding: 0.8rem; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); transform: rotate(2deg); }
.mn195-about-photo img { display: block; width: 100%; border-radius: var(--radius-sm); }
.mn195-about-photo figcaption { padding: 1rem 0.4rem 0.3rem; text-align: center; font-size: 0.85rem; color: var(--muted); }
.mn195-team-photo { margin: 0 0 2rem; }
.mn195-team-photo img { display: block; width: 100%; border-radius: var(--radius); }
.mn195-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.mn195-feature { padding: 1.7rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.mn195-feature h3 { font-size: 1.15rem; margin-top: 1rem; }
.mn195-feature p { margin: 0; color: var(--muted); }
.mn195-feature-number { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--green-soft); font-weight: 700; }
.mn195-feature:nth-child(3n + 2) .mn195-feature-number { background: var(--sun-soft); }
.mn195-feature:nth-child(3n) .mn195-feature-number { background: var(--grape-soft); }
.mn195-care-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; }
.mn195-care-layout > *, .mn195-about-split > * { min-width: 0; }
.mn195-tab-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block: 1.5rem 2rem; }
.mn195-tab-list button { padding: 0.75rem 1.35rem; font: inherit; font-weight: 600; color: var(--ink); border: 1px solid var(--line); background: var(--white); border-radius: 999px; cursor: pointer; }
.mn195-tab-list button[aria-selected="true"] { background: var(--pink-soft); border-color: var(--pink-600); color: var(--ink); }
.mn195-tabs [role="tabpanel"] { scroll-margin-top: 110px; }
.mn195-tabs [hidden] { display: none !important; }
.mn195-care-panel { overflow: hidden; background: var(--green-soft); border-radius: var(--radius); }
.mn195-care-panel > img { width: 100%; height: 250px; object-fit: cover; display: block; }
.mn195-care-panel > div { padding: 1.8rem; }
.mn195-care-panel p { margin: 0; }
.mn195-testimonials blockquote { margin: 1.5rem 0; padding: 1.8rem; background: var(--sun-soft); border-radius: var(--radius); }
.mn195-testimonials blockquote:nth-of-type(2) { background: var(--sky-soft); }
.mn195-testimonials blockquote:nth-of-type(3) { background: var(--pink-soft); }
.mn195-testimonials cite { font-size: 0.85rem; font-style: normal; color: var(--ink); }

/* Album và video dùng chung bố cục thẻ. */
.mn195-library .mn195-tab-list { justify-content: center; }
.mn195-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.mn195-album, .mn195-video-card { overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-sm); }
.mn195-album-cover { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pink-soft); }
.mn195-album-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; }
.mn195-album-cover:hover > img { transform: scale(1.03); }
.mn195-album-count { position: absolute; right: 1rem; bottom: 1rem; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--white); color: var(--ink); font-size: 0.85rem; font-weight: 600; }
.mn195-library-body { padding: 1.4rem; overflow-wrap: anywhere; }
.mn195-library-body time { color: var(--muted); font-size: 0.8rem; }
.mn195-library-body h3 { font-size: 1.1rem; line-height: 1.5; margin-top: 0.65rem; }
.mn195-library-body h3 a { color: var(--ink); }
.mn195-library-body h3 a:hover { color: var(--pink-600); }
.mn195-video-player { position: relative; aspect-ratio: 16 / 9; background: var(--ink); }
.mn195-video-player button { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; font: inherit; cursor: pointer; color: var(--white); background: var(--ink); }
.mn195-video-player img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.65; }
.mn195-video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mn195-play { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--pink-600); }
.mn195-video-label { position: absolute; left: 0; right: 0; bottom: 0.7rem; font-size: 0.9rem; font-weight: 600; }
.mn195-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 2.5rem; }
.mn195-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0.5rem 0.8rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.mn195-pagination .current { background: var(--pink-soft); border-color: var(--pink-600); font-weight: 700; }

/* Hộp thoại ảnh dùng chung với gallery trong bài viết. */
.mn195-gallery-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.mn195-gallery-open img { display: block; width: 100%; }
.mn195-lightbox { width: min(1100px, 94vw); max-width: 94vw; max-height: 94dvh; padding: 3.8rem 1rem 1rem; border: 0; border-radius: var(--radius-sm); background: var(--ink); color: var(--white); }
.mn195-lightbox::backdrop { background: var(--ink); opacity: 0.85; }
.mn195-lightbox > img { display: block; max-width: 100%; max-height: 72dvh; width: auto; height: auto; margin: auto; object-fit: contain; }
.mn195-lightbox > p { margin: 1rem 0 0; text-align: center; overflow-wrap: anywhere; }
.mn195-lightbox-close { position: absolute; top: 0.6rem; right: 0.8rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--white); color: var(--ink); font-size: 1.7rem; cursor: pointer; }
.mn195-lightbox-open { overflow: hidden; }

@media (max-width: 1000px) {
	.mn195-library-grid, .mn195-feature-grid, .mn195-about-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mn195-about-nav a { gap: 0.6rem; padding: 1rem; font-size: 0.9rem; }
}
@media (max-width: 800px) {
	.mn195-about-split, .mn195-care-layout { grid-template-columns: 1fr; gap: 2rem; }
	.mn195-about-photo { max-width: 550px; margin-inline: auto; }
}
@media (max-width: 640px) {
	.mn195-about-nav, .mn195-stats, .mn195-feature-grid, .mn195-library-grid { grid-template-columns: 1fr; }
	.mn195-about-nav { gap: 0.7rem; }
	.mn195-about-nav a { padding: 0.8rem 1.2rem; }
	.mn195-about-nav span { font-size: 1.2rem; }
	.mn195-stats { gap: 0.8rem; }
	.mn195-stats p { padding: 1rem 1.4rem; }
	.mn195-stats strong { font-size: 2rem; }
	.mn195-tab-list { gap: 0.5rem; }
	.mn195-tab-list button { padding: 0.7rem 1rem; font-size: 0.9rem; }
	.mn195-care-panel > div { padding: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
	.mn195-album-cover:hover > img { transform: none; }
}

/* ==========================================================================
   8b. NỘI DUNG BÀI VIẾT
   Bổ sung cho .prose của single.php/page.php, không đổi nội dung trong database.
   ========================================================================== */
.prose .wp-block-gallery.has-nested-images {
	/* Số cột lấy từ class columns-N của trình soạn thảo, xem cuối mục 8b. */
	--mn195-cot: 2;
	display: grid;
	grid-template-columns: repeat(var(--mn195-cot), minmax(0, 1fr));
	gap: 0.75rem;
	align-items: start;
}
.prose .wp-block-gallery.has-nested-images > figure.wp-block-image {
	/* Core dùng :not(#individual-image), nên cần ghi đè riêng bề rộng cột. */
	width: 100% !important;
	min-width: 0;
	margin: 0;
	display: block;
	border-radius: var(--radius-sm);
	background: var(--bg-alt);
}
.prose .wp-block-gallery .wp-block-image > a,
.prose .wp-block-gallery .mn195-gallery-open { border-radius: inherit; cursor: zoom-in; }
.prose .wp-block-gallery .wp-block-image img {
	display: block;
	width: 100%;
	border-radius: var(--radius-sm);
	cursor: zoom-in;
}
.prose .wp-block-gallery.is-cropped .wp-block-image img {
	/* Core đặt height:100% với độ ưu tiên ID; kích thước ở đây theo ô vuông. */
	height: auto !important;
	aspect-ratio: 1;
	object-fit: cover;
}
.prose .wp-block-gallery:not(.is-cropped) .wp-block-image img {
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
}
.prose .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before { content: none; }
.prose .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	padding: 0.7rem;
	color: var(--muted);
	background: none;
	text-shadow: none;
}
.prose .wp-block-gallery > figcaption { grid-column: 1 / -1; }
.prose > .wp-block-image,
.prose .wp-block-embed.is-provider-youtube { max-width: 100%; margin-inline: auto; text-align: center; }
.prose > .wp-block-image img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--radius-sm); }
.prose .wp-block-embed.is-provider-youtube .wp-block-embed__wrapper {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--bg-alt);
}
/* Bỏ khoảng đệm tỷ lệ của core để không tạo hai lần chiều cao cho iframe. */
.prose .wp-block-embed.is-provider-youtube .wp-block-embed__wrapper::before { display: none; }
.prose .wp-block-embed.is-provider-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Importer xuất h2 + ul không có class; chỉ chọn danh sách chứa link PDF. */
.prose h2 + ul:has(> li > a[href$=".pdf" i]) { display: grid; gap: 0.75rem; padding: 0; list-style: none; }
.prose h2 + ul > li:has(> a[href$=".pdf" i]) { margin: 0; }
.prose h2 + ul > li > a[href$=".pdf" i] {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0.85rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--sun-soft);
	color: var(--ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.prose h2 + ul > li > a[href$=".pdf" i]::before { flex: none; }
.prose h2 + ul > li > a[href$=".pdf" i]:hover { background: var(--pink-soft); text-decoration: underline; }
/* Gallery cổ điển ([gallery] của Classic Editor, theme bật html5 nên core không in CSS): cùng giao diện block gallery. */
.prose .gallery {
	--mn195-cot: 2;
	display: grid;
	grid-template-columns: repeat(var(--mn195-cot), minmax(0, 1fr));
	gap: 0.75rem;
	align-items: start;
	margin-block: 1.5rem;
	padding: 0.6rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
}
.prose .gallery-item { min-width: 0; margin: 0; }
.prose .gallery-icon > a { display: block; border-radius: var(--radius-sm); cursor: zoom-in; }
.prose .gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-sm);
	background: var(--bg-alt);
}
.prose .gallery-caption { padding: 0.7rem; color: var(--muted); }
/* Gallery chọn 1 cột: ảnh rộng hết nội dung, giữ đúng tỷ lệ gốc thay vì cắt vuông. */
.prose .wp-block-gallery.columns-1,
.prose .gallery-columns-1 { --mn195-cot: 1; }
.prose .wp-block-gallery.columns-1 .wp-block-image img,
.prose .gallery-columns-1 .gallery-item img { aspect-ratio: auto; object-fit: contain; }
@media (min-width: 700px) {
	.prose .wp-block-gallery.has-nested-images,
	.prose .gallery { gap: 1rem; }
	/* columns-default là bài cũ do importer tạo: giữ 3 cột như trước. */
	.prose .wp-block-gallery.columns-default,
	.prose .wp-block-gallery.columns-3,
	.prose .gallery-columns-3 { --mn195-cot: 3; }
	.prose .wp-block-gallery.columns-4,
	.prose .wp-block-gallery.columns-5,
	.prose .wp-block-gallery.columns-6,
	.prose .wp-block-gallery.columns-7,
	.prose .wp-block-gallery.columns-8,
	.prose .gallery-columns-4,
	.prose .gallery-columns-5,
	.prose .gallery-columns-6,
	.prose .gallery-columns-7,
	.prose .gallery-columns-8,
	.prose .gallery-columns-9 { --mn195-cot: 4; }
}
@media (min-width: 1100px) {
	.prose .wp-block-gallery.columns-5, .prose .gallery-columns-5 { --mn195-cot: 5; }
	.prose .wp-block-gallery.columns-6, .prose .gallery-columns-6 { --mn195-cot: 6; }
	.prose .wp-block-gallery.columns-7, .prose .gallery-columns-7 { --mn195-cot: 7; }
	.prose .wp-block-gallery.columns-8, .prose .gallery-columns-8 { --mn195-cot: 8; }
	.prose .gallery-columns-9 { --mn195-cot: 9; }
}

/* ==========================================================================
   8c. GIỚI THIỆU: ĐẶC ĐIỂM, HOẠT ĐỘNG, PHỤ HUYNH
   ========================================================================== */
.mn195-feature-orbit { display: grid; grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr); gap: var(--gap); align-items: center; }
.mn195-feature-orbit .mn195-feature { height: 100%; }
.mn195-feature-orbit .mn195-feature:nth-of-type(-n + 3) { grid-column: 1; }
.mn195-feature-orbit .mn195-feature:nth-of-type(n + 4) { grid-column: 3; }
.mn195-feature-orbit .mn195-feature:nth-of-type(3n + 1) { grid-row: 1; }
.mn195-feature-orbit .mn195-feature:nth-of-type(3n + 2) { grid-row: 2; }
.mn195-feature-orbit .mn195-feature:nth-of-type(3n) { grid-row: 3; }
.mn195-feature-logo { grid-column: 2; grid-row: 1 / 4; margin: 0; padding: 1rem; border-radius: 50%; background: var(--white); box-shadow: var(--shadow); }
.mn195-feature-logo img { display: block; width: 100%; height: auto; border-radius: 50%; }
.mn195-feature-orbit .mn195-feature-number { font-size: 1.5rem; }
.mn195-care-section { max-width: 1100px; }
.mn195-care-section .mn195-tab-list { justify-content: center; }
.mn195-care-section .mn195-care-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.mn195-care-section .mn195-care-panel > img { height: 100%; min-height: 320px; }
.mn195-care-section .mn195-care-panel > div { padding: clamp(1.5rem, 4vw, 3rem); }
.mn195-parent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.mn195-parent-grid blockquote { margin: 0; text-align: center; }
.mn195-parent-avatar { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--white); color: var(--ink); font-weight: 700; }
.mn195-parent-stars { display: block; margin-top: 0.5rem; color: var(--ink); letter-spacing: 0.2em; }
@media (max-width: 1000px) {
	.mn195-feature-orbit { grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr); gap: 1rem; }
}
@media (max-width: 800px) {
	.mn195-feature-orbit { grid-template-columns: 1fr; }
	.mn195-feature-logo { grid-column: 1; grid-row: auto; max-width: 180px; margin-inline: auto; }
	.mn195-feature-orbit .mn195-feature:nth-of-type(n) { grid-column: 1; grid-row: auto; }
	.mn195-care-section .mn195-care-panel, .mn195-parent-grid { grid-template-columns: 1fr; }
	.mn195-care-section .mn195-care-panel > img { height: 240px; min-height: 0; }
}

/* Facade YouTube trong bài dùng cùng nút phát với thư viện. */
.prose .mn195-video-player { margin-block: 1.5em; overflow: hidden; border-radius: var(--radius-sm); }
.prose .mn195-video-player iframe { height: 100%; }
/* Không có JavaScript vẫn đọc được liên kết YouTube ở panel Video. */
html:not(.js) .mn195-library [role="tabpanel"][hidden] { display: block !important; }

/* ==========================================================================
   9. NGÔN NGỮ THIẾT KẾ DÙNG CHUNG
   ========================================================================== */
.mn195-icon-lg { width: 28px; height: 28px; }
.mn195-sticker { --sticker-accent: var(--green); position: relative; border: 1px solid var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 2.2rem; transition: transform 180ms ease; }
.mn195-sticker:nth-child(2) { --sticker-accent: var(--sky); }
.mn195-sticker:nth-child(3) { --sticker-accent: var(--pink-600); }
.mn195-sticker:nth-child(4) { --sticker-accent: var(--sun); }
.mn195-sticker::before { content: ''; position: absolute; inset: 9px; border: 1px dashed var(--sticker-accent); border-radius: calc(var(--radius) - 8px); opacity: 0.55; pointer-events: none; }
main .mn195-sticker:hover, main .mn195-sticker:focus-within { transform: translateY(-3px); }
.mn195-icon-badge { display: inline-grid; place-items: center; position: relative; width: 68px; height: 68px; border: 2px solid var(--sticker-accent); outline: 5px solid var(--white); background: var(--white); border-radius: 50%; color: var(--sticker-accent); margin-bottom: 1.5rem; }
.mn195-doodle-section { position: relative; isolation: isolate; }
.mn195-doodle { position: absolute; z-index: -1; pointer-events: none; opacity: 0.3; }
.mn195-doodle-cloud { top: 2rem; left: 2%; color: var(--sky); transform: rotate(-8deg); }
.mn195-doodle-heart { top: 5rem; right: 2%; color: var(--pink-600); transform: rotate(12deg); }
.mn195-polaroid { position: relative; padding: 1rem 1rem 0.3rem; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.mn195-polaroid-tape { position: absolute; top: -12px; left: calc(50% - 58px); z-index: 1; width: 116px; height: 28px; background: var(--sun-soft); border-inline: 2px dashed var(--sun); transform: rotate(-4deg); pointer-events: none; }
.mn195-polaroid > .center { margin-block: 1.3rem; }
.mn195-polaroid .btn, .mn195-polaroid .btn:hover { min-height: 44px; color: var(--ink); background: var(--sun-soft); box-shadow: none; }
.mn195-sticker a:focus-visible, .mn195-polaroid a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.mn195-tab-list button, .filter-bar a { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 44px; }
.prose h2 > .icon, .article-meta .chip > .icon, .value strong > .icon { margin-right: 0.5em; }
.mn195-decorated-list .post-card { border: 1px dashed var(--line); box-shadow: var(--shadow-sm); padding: 0.5rem; }
.mn195-decorated-list .post-card-thumb { border-radius: var(--radius-sm); }
.mn195-page-heading > .container { position: relative; }
.mn195-page-heading > .container::before { content: ''; position: absolute; width: 60px; height: 60px; top: 0; left: 0; border: 1px dashed var(--sky); border-radius: 50%; opacity: 0.4; pointer-events: none; }
.mn195-page-heading > .container::after { content: ''; position: absolute; width: 16px; height: 16px; bottom: 0; right: 0; border: 2px solid var(--pink-soft); border-radius: 4px; transform: rotate(15deg); pointer-events: none; }
.empty.mn195-sticker { background: var(--sun-soft); color: var(--ink); text-align: center; }
.empty > .icon { display: block; margin: 0 auto 1rem; }
.mn195-about-nav a.mn195-sticker { padding: 1.5rem; }
.mn195-about-nav a > span { font-size: 0.9rem; }
.mn195-stats .mn195-sticker { padding: 1.5rem; }
.mn195-stats .icon { display: block; margin-bottom: 0.5rem; color: var(--ink); }
.mn195-feature.mn195-sticker { padding: 1.7rem; }
.mn195-about-photo.mn195-polaroid { padding: 0.8rem; }
.mn195-timeline li::before { display: none; }
.mn195-timeline-icon { position: absolute; left: -2rem; top: 0.2rem; width: 18px; height: 18px; color: var(--pink-600); background: var(--bg-alt); }
.mn195-parent-grid blockquote { position: relative; }
.mn195-quote-icon { position: absolute; top: 1rem; left: 1rem; width: 24px; height: 24px; color: var(--ink); opacity: 0.45; }
.mn195-album.mn195-polaroid { padding: 0.6rem 0.6rem 0; box-shadow: var(--shadow-sm); }
.mn195-library .link-more { display: inline-flex; align-items: center; min-height: 44px; }
.article-meta .chip { display: inline-flex; align-items: center; min-height: 44px; }
.mn195-album .mn195-album-cover { border-radius: var(--radius-sm); }
.mn195-video-player .mn195-play { border: 2px solid var(--white); outline: 2px dashed var(--white); outline-offset: 4px; }
.prose .wp-block-gallery { padding: 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.mn195-page-paper { padding: clamp(1.3rem, 4vw, 2.5rem); border: 1px solid var(--line); border-top: 4px solid var(--pink-soft); border-radius: var(--radius); background: var(--white); }
.login-card.mn195-sticker { padding: 2rem; color: var(--ink); }
.login-card .login-icon { border: 1px solid var(--line); }
.mn195-error-note { max-width: 850px; border-top: 4px solid var(--sun-soft); }
.mn195-empty-icon { width: 48px; height: 48px; color: var(--ink); }
.error-404 .mn195-error-note .error-code { font-size: clamp(4rem, 12vw, 8rem); }
@media (max-width: 800px) {
	.mn195-doodle { display: none; }
	.mn195-sticker { padding: 1.8rem; }
	.mn195-page-heading > .container::before, .mn195-page-heading > .container::after { display: none; }
}
@media (max-width: 640px) {
	.mn195-polaroid { padding: 0.7rem 0.7rem 0.2rem; }
	.mn195-polaroid .btn { padding-inline: 1rem; }
	.mn195-about-nav a.mn195-sticker { padding: 1rem 1.2rem; }
}
/* Không xoay/nâng ảnh hoặc thẻ khi người xem chọn giảm chuyển động. */
@media (prefers-reduced-motion: reduce) {
	main .mn195-sticker, main .mn195-sticker:hover, main .mn195-sticker:focus-within,
	main .mn195-about-photo, main .mn195-polaroid-tape, main .mn195-doodle,
	main .post-card:hover, main .post-card:hover img, main .highlight:hover img,
	main .photo:hover img, main .value:hover .value-photo, main .btn:hover,
	main .mn195-album-cover:hover img, .mn195-page-heading > .container::after { transform: none; transition: none; }
}

/* ==========================================================================
   10. LIÊN HỆ — BỐ CỤC RIÊNG, DÙNG STICKER/POLAROID Ở MỤC 9
   ========================================================================== */
.mn195-contact-playful .section-head { max-width: 760px; margin-inline: auto; }
.mn195-contact-playful .eyebrow, .mn195-contact-map-section .eyebrow { color: var(--ink); }
.mn195-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 2rem; }
.mn195-contact-card { display: flex; flex-direction: column; align-items: center; text-align: center; overflow-wrap: anywhere; background: var(--green-soft); }
.mn195-contact-card:nth-child(2) { background: var(--sky-soft); }
.mn195-contact-card:nth-child(3) { background: var(--pink-soft); }
.mn195-contact-card:nth-child(4) { background: var(--sun-soft); }
.mn195-contact-card h3 { font-size: 1.2rem; margin-bottom: 0.8rem; }
.mn195-contact-card > p { margin: 0 0 0.8rem; }
.mn195-contact-card ul { width: 100%; list-style: none; padding: 0; margin: auto 0 0; }
.mn195-contact-card li { margin: 0.2rem 0; }
.mn195-contact-card li a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.35rem 1.15rem; margin-block: 0.15rem; font-size: 1rem; font-weight: 600; color: var(--ink); background: var(--white); border: 1px solid var(--white); border-radius: 999px; }
.mn195-contact-card li a:hover { border-color: var(--sticker-accent); text-decoration: underline; }
.mn195-contact-card .btn { margin-top: auto; }
.mn195-contact-card .btn, .mn195-contact-card .btn:hover { color: var(--ink); background: var(--white); }
.mn195-contact-card .mn195-source-note { max-width: 30em; margin: 0.6rem 0 0; color: var(--ink); }
.mn195-contact-map-section { padding-top: 3.5rem; }
.mn195-map { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--sky-soft); }
.mn195-map-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; background: var(--sky-soft); color: var(--ink); }
.mn195-map-fallback p { max-width: 28em; }
.mn195-map iframe { position: relative; display: block; width: 100%; border: 0; background: transparent; }
@media (min-width: 641px) {
	.mn195-contact-grid { grid-auto-rows: 1fr; }
}
@media (max-width: 800px) {
	.mn195-contact-grid { gap: 1.3rem; }
}
@media (max-width: 640px) {
	.mn195-contact-grid { grid-template-columns: 1fr; }
	.mn195-map iframe { height: 350px; }
}

/* ==========================================================================
   11. CHIM VÀ HOA — SVG NỘI BỘ TỪ GIAO DIỆN MẦM NON SƠN CA
   Hình tĩnh ở khoảng đệm, không bắt chuột hoặc che nội dung.
   ========================================================================== */
main > .section { position: relative; isolation: isolate; }
main > .section::before, main > .section::after {
	content: '';
	position: absolute;
	pointer-events: none;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 54px;
	height: 42px;
	z-index: -1;
}
main > .section::before {
	top: 6px;
	left: 2%;
	background-image: url('assets/images/decor/sticker-songbird.svg');
}
main > .section::after {
	right: 2%;
	bottom: 4px;
	width: 38px;
	height: 48px;
	background-image: url('assets/images/decor/sticker-flower.svg');
}
main > .section:nth-of-type(2n)::after { background-image: url('assets/images/decor/sticker-daisies.svg'); }
main > .section:nth-of-type(3n)::after { background-image: url('assets/images/decor/sticker-tulip.svg'); }
main > .section:nth-of-type(4n)::after { background-image: url('assets/images/decor/sticker-marigold.svg'); }
/* Thay nét vẽ cũ bằng bộ chim hoa thống nhất. */
.mn195-doodle-section > .mn195-doodle,
.mn195-page-heading > .container::before,
.mn195-page-heading > .container::after { display: none; }
/* Màn hình rộng có lề đủ lớn cho hoa cao và chim đứng cạnh nội dung. */
@media (min-width: 1280px) {
	main > .section::before {
		top: 40px;
		left: max(8px, calc((100% - 1420px) / 2));
		width: 100px;
		height: 82px;
	}
	main > .section::after {
		right: max(8px, calc((100% - 1420px) / 2));
		bottom: 14px;
		width: 90px;
		height: 135px;
	}
}

/* ==========================================================================
   12. TẦM NHÌN - SỨ MỆNH, CƠ CẤU TỔ CHỨC, CƠ SỞ, CHUYỂN NGÔN NGỮ, MENU NHIỀU CẤP
   ========================================================================== */
.mn195-vision { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.mn195-vision article { background: var(--green-soft); }
.mn195-vision article:nth-child(2) { background: var(--sky-soft); }
.mn195-vision .mn195-icon-badge { margin-bottom: 1rem; }
.mn195-vision h3 { margin-bottom: 0.5rem; font-size: 1.35rem; }
.mn195-vision p { margin: 0; max-width: 52ch; }
.mn195-values-title { margin: 3rem 0 1.2rem; text-align: center; font-size: 1.5rem; }
.mn195-values { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.mn195-values li { padding: 1.5rem 1.2rem; background: var(--white); text-align: center; }
.mn195-values li .icon { margin-inline: auto; color: var(--sticker-accent); }
.mn195-values li:nth-child(5) { --sticker-accent: var(--grape); }
.mn195-values strong { display: block; margin: 0.5rem 0; font-size: 1.1rem; }
.mn195-values p { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* Ban giám hiệu: Hiệu trưởng một thẻ ngang ở trên, ba phó hiệu trưởng một hàng. */
.mn195-leaders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.mn195-leader { display: flex; flex-direction: column; align-items: center; text-align: center; overflow-wrap: anywhere; background: var(--green-soft); }
.mn195-leader:nth-child(3) { background: var(--sky-soft); }
.mn195-leader:nth-child(4) { background: var(--sun-soft); }
.mn195-leader-initial { display: grid; place-items: center; flex-shrink: 0; width: 76px; height: 76px; margin-bottom: 1.1rem; border: 2px solid var(--sticker-accent); outline: 5px solid var(--white); border-radius: 50%; background: var(--white); color: var(--sticker-accent); font-size: 2rem; font-weight: 700; line-height: 1; }
.mn195-leader h3 { margin-bottom: 0.4rem; font-size: 1.2rem; }
.mn195-leader-role { margin: 0 0 1.2rem; color: var(--muted); }
.mn195-leader-role strong { display: block; color: var(--ink); }
.mn195-leader ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: auto 0 0; padding: 0; list-style: none; }
.mn195-leader li a { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.35rem 1rem; border: 1px solid var(--white); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 600; font-size: 0.88rem; overflow-wrap: anywhere; }
.mn195-leader:not(.mn195-leader-head) { padding: 2rem 1.2rem; }
.mn195-leader li a:hover { border-color: var(--sticker-accent); color: var(--pink-600); }
.mn195-leader.mn195-leader-head { --sticker-accent: var(--pink-600); grid-column: 1 / -1; flex-direction: row; gap: 2rem; padding: 2.2rem 2.6rem; text-align: left; background: var(--pink-soft); }
.mn195-leader-head .mn195-leader-initial { width: 112px; height: 112px; margin: 0; font-size: 3rem; }
.mn195-leader-head h3 { font-size: 1.6rem; }
.mn195-leader-head .mn195-leader-role { margin-bottom: 1rem; }
.mn195-leader-head ul { justify-content: flex-start; }

.footer-campuses li { margin-bottom: 0.9rem; }
.footer-campuses li > strong { display: block; color: var(--white); }
.footer-campuses li > span { display: block; margin-top: 0.15rem; }
.footer-campuses li > .footer-phones { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.25rem; }
.footer-phones a { white-space: nowrap; }
.footer-phones a:not(:last-child)::after { content: '/'; margin: 0 0.15rem 0 0.4rem; color: #a998b8; }

/* Liên hệ: mỗi cơ sở là một cụm tên + nội dung, căn giữa như phần còn lại của thẻ. */
.mn195-contact-card .mn195-campus-list { display: grid; gap: 0.9rem; margin: 0.4rem 0 0; }
.mn195-campus-list li { margin: 0; }
.mn195-campus-list li > strong { display: block; font-size: 0.85rem; color: var(--muted); }
.mn195-campus-list li > span { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.4rem; }
.mn195-contact-card .mn195-campus-list li a { min-height: 40px; margin: 0.1rem 0; }

/* VI/EN: nhóm nút liền nhau, mục đang chọn tô đặc. */
.lang-switch { display: inline-flex; gap: 1px; padding: 2px; border: 1px solid var(--pink-soft); border-radius: 999px; background: var(--white); }
.lang-switch button { min-width: 1.9rem; min-height: 22px; padding: 0 0.4rem; border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: background 0.2s, color 0.2s; }
.lang-switch button:hover { color: var(--pink-600); }
.lang-switch button[aria-pressed="true"] { background: var(--pink-600); color: var(--white); }
.lang-switch button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Ẩn thanh công cụ Google Dịch chèn vào đầu trang; nút VI/EN đã thay thế. */
body > .skiptranslate, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* Menu cấp 3 trở xuống: máy tính mở sang trái menu con (mở sang phải sẽ tràn
 * khỏi màn hình hẹp và sinh thanh cuộn ngang), di động thụt lề thêm. */
.nav .sub-menu .menu-item-has-children { position: relative; }
.nav .sub-menu .menu-item-has-children > a { display: flex; justify-content: space-between; gap: 0.6rem; }
.nav .sub-menu .menu-item-has-children > a::after { flex-shrink: 0; align-self: center; transform: rotate(-45deg); }
@media (min-width: 1101px) {
	.nav .sub-menu .sub-menu { top: -0.5rem; left: auto; right: calc(100% + 0.4rem); min-width: 250px; transform: translateX(8px); }
	.nav .sub-menu .sub-menu::before { top: 0; bottom: 0; left: auto; right: -0.5rem; width: 0.5rem; height: auto; }
	.nav .sub-menu .menu-item-has-children > a::after { transform: rotate(135deg); }
	.nav .sub-menu li:hover > .sub-menu,
	.nav .sub-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
	.nav .sub-menu .current-menu-item > a,
	.nav .sub-menu .current-menu-ancestor > a { color: var(--pink-600); }
}
/* Bốn mục cuối menu: neo menu con vào mép phải. Menu con ẩn bằng
 * visibility: hidden vẫn tính vào bề rộng cuộn, neo trái sẽ tràn khỏi màn hình
 * và sinh thanh cuộn ngang trên máy tính. */
@media (min-width: 1101px) {
	.nav .menu > li:nth-last-child(-n + 4) > .sub-menu { left: auto; right: 0; }
}
@media (max-width: 1100px) {
	.nav .sub-menu .menu-item-has-children > a { justify-content: flex-start; gap: 0; }
	.nav .sub-menu .menu-item-has-children > a::after { transform: translateY(-0.2em) rotate(45deg); }
	.nav .sub-menu .sub-menu { border-left: 2px dashed var(--pink-soft); margin-left: 0.9rem; }
}

/* Hàng lọc phụ: chip nhỏ hơn trên dải nền nhạt, nằm sát hàng chính để đọc thành một cụm. */
.filter-bar:has(+ .filter-bar-sub) { margin-bottom: 0.9rem; }
.filter-bar-sub { width: fit-content; max-width: 100%; margin-inline: auto; padding: 0.5rem; gap: 0.4rem; border-radius: var(--radius); background: var(--pink-soft); }
.filter-bar-sub a { min-height: 40px; padding: 0.35rem 0.95rem; border-color: var(--white); font-size: 0.86rem; }
.filter-bar a[aria-current="true"] { border-color: var(--pink-600); color: var(--pink-600); }

@media (max-width: 1000px) {
	/* 5 giá trị: hàng 3 + hàng 2 cân đối thay vì để một ô lẻ. */
	.mn195-values { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.mn195-values li { grid-column: span 2; }
	.mn195-values li:nth-child(n + 4) { grid-column: span 3; }
}
@media (max-width: 900px) {
	.mn195-leaders { grid-template-columns: 1fr; }
	.mn195-leader.mn195-leader-head { flex-direction: column; gap: 0; padding: 2rem 1.5rem; text-align: center; }
	.mn195-leader-head .mn195-leader-initial { width: 88px; height: 88px; margin-bottom: 1.1rem; font-size: 2.4rem; }
	.mn195-leader-head ul { justify-content: center; }
}
@media (max-width: 640px) {
	.mn195-vision, .mn195-values { grid-template-columns: 1fr; }
	.mn195-values li, .mn195-values li:nth-child(n + 4) { grid-column: auto; }
}

/* Khẩu hiệu xuống dòng trong bề rộng tên trường: width 0 + min-width 100% để
 * dòng chữ không tự nới rộng khối logo. */
.logo { flex-shrink: 0; }
.logo-text strong { white-space: nowrap; }
.logo-text small { width: 0; min-width: 100%; }
/* Menu 8 mục đứng cạnh logo: header rộng hơn nội dung, chữ menu gọn lại. */
@media (min-width: 1101px) {
	.header-inner { width: min(1320px, 96%); }
	.nav .menu { flex-wrap: wrap; justify-content: flex-end; }
	.nav .menu > li > a { padding-inline: 0.6em; font-size: 0.88rem; }
}
@media (min-width: 1101px) and (max-width: 1399px) {
	.header-inner { gap: 0.5rem; }
	.nav .menu { gap: 0; }
	.nav .menu > li > a { padding-inline: 0.45em; font-size: 0.84rem; }
}

/* ==========================================================================
   13. CHUYỂN ĐỘNG VUI NHỘN — nhún, lơ lửng, lắc nhẹ.
   Chỉ dùng transform/translate/opacity cho mượt. Người dùng bật "giảm chuyển
   động" trong máy đã được tắt hết bởi khối prefers-reduced-motion ở mục 7.
   Lơ lửng dùng thuộc tính translate riêng để không ghi đè transform sẵn có.
   ========================================================================== */
:root { --nhun: cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Hiện dần khi cuộn: nảy nhẹ, phần tử cùng hàng lần lượt xuất hiện. */
.js .reveal { transform: translateY(26px) scale(0.97); transition: opacity 0.6s ease, transform 0.7s var(--nhun); }
.js .reveal.visible:nth-child(2) { transition-delay: 0.08s; }
.js .reveal.visible:nth-child(3) { transition-delay: 0.16s; }
.js .reveal.visible:nth-child(4) { transition-delay: 0.24s; }
.js .reveal.visible:nth-child(n+5) { transition-delay: 0.3s; }
.js .reveal.visible:hover { transition-delay: 0s; }

/* Nút: nảy lên khi rê chuột, lún xuống khi bấm. */
.btn { transition: transform 0.35s var(--nhun), background 0.2s, color 0.2s, box-shadow 0.2s; }
.btn:hover { transform: translateY(-3px) scale(1.04); }
.btn:active { transform: translateY(1px) scale(0.97); transition-duration: 0.1s; }

/* Logo lắc lư khi rê chuột. */
.logo-mark { transition: transform 0.45s var(--nhun); }
.logo:hover .logo-mark { transform: rotate(-10deg) scale(1.08); }

/* Menu nhích lên một chút. */
.nav .menu a { transition: background 0.2s, color 0.2s, transform 0.3s var(--nhun); }
.nav .menu a:hover { transform: translateY(-2px); }

/* Thẻ tin, thẻ nổi bật, thẻ sticker: nhấc lên và nghiêng nhẹ. */
.post-card, .highlight, main .mn195-sticker { transition: transform 0.4s var(--nhun), box-shadow 0.3s; }
.post-card:hover, .highlight:hover { transform: translateY(-6px) rotate(-0.6deg); box-shadow: var(--shadow); }
main .mn195-sticker:hover, main .mn195-sticker:focus-within { transform: translateY(-5px) rotate(0.6deg); }
.mn195-icon-badge { transition: transform 0.45s var(--nhun); }
.mn195-sticker:hover .mn195-icon-badge { transform: rotate(-12deg) scale(1.12); }

/* Hero: chữ từng dòng nảy vào mỗi lần đổi slide, ảnh nảy vào rồi lơ lửng
   và đổi dáng khung mềm mại; bong bóng nhún. */
@keyframes lo-lung { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes lo-lung-ngang { 0%, 100% { translate: 0 0; } 50% { translate: 6px -6px; } }
@keyframes nay-vao { from { opacity: 0; transform: translateY(28px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes anh-vao { from { opacity: 0; transform: scale(0.85) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes khung-mem {
	0%, 100% { border-radius: 42% 58% 55% 45% / 45% 40% 60% 55%; }
	50% { border-radius: 55% 45% 42% 58% / 58% 52% 48% 42%; }
}
@keyframes bong-bong { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 0 -18px; scale: 1.12; } }
.slide.active .hero-text > * { animation: nay-vao 0.7s var(--nhun) both; }
.slide.active .hero-text > :nth-child(2) { animation-delay: 0.12s; }
.slide.active .hero-text > :nth-child(3) { animation-delay: 0.24s; }
.slide.active .hero-text > :nth-child(4) { animation-delay: 0.36s; }
.slide.active .hero-media { animation: anh-vao 0.8s var(--nhun) both, lo-lung 6s ease-in-out 0.8s infinite; }
.hero-media img { animation: khung-mem 9s ease-in-out infinite; }
.blob-1 { animation: bong-bong 4s ease-in-out infinite; }
.blob-2 { animation: bong-bong 5s ease-in-out 1.2s infinite; }

/* Chim và hoa ở mép section lơ lửng chậm. */
main > .section::before { animation: lo-lung 6s ease-in-out infinite; }
main > .section::after { animation: lo-lung-ngang 7s ease-in-out infinite 1s; }

/* Chào mừng: ảnh tròn nhấp nhô lệch nhịp, icon xoay nảy khi rê chuột. */
.value-photo { transition: transform 0.45s var(--nhun); animation: lo-lung 4.5s ease-in-out infinite; }
.value:hover .value-photo { transform: rotate(-6deg) scale(1.07); }
.value:nth-child(2) .value-photo { animation-delay: 0.6s; }
.value:nth-child(3) .value-photo { animation-delay: 1.2s; }
.value:nth-child(4) .value-photo { animation-delay: 1.8s; }
.value strong .icon { transition: transform 0.45s var(--nhun); }
.value:hover strong .icon { transform: rotate(-15deg) scale(1.25); }

/* Chào mừng: bốn ảnh giá trị rơi nhẹ từ trên xuống, chạm đất nảy nhẹ rồi đứng yên.
   Chạy khi khối cuộn tới (site.js gắn .visible), lệch nhau 0.1s mỗi ảnh.
   Khi giảm chuyển động, animation bị tắt và ảnh hiện ngay ở trạng thái cuối. */
@keyframes roi-xuong {
	0% { opacity: 0; transform: translateY(-80px) rotate(-4deg); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35); }
	55% { opacity: 1; transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
	72% { transform: translateY(-14px) rotate(1deg); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35); }
	86% { transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
	93% { transform: translateY(-4px); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35); }
	100% { opacity: 1; transform: none; }
}
.js .values .value.reveal { opacity: 0; transform: translateY(-80px); transition: none; }
.js .values .value.reveal.visible { opacity: 1; transform: none; animation: roi-xuong 1.1s both; }
.js .values .value.reveal.visible:nth-child(1) { animation-delay: 0.1s; }
.js .values .value.reveal.visible:nth-child(2) { animation-delay: 0.2s; }
.js .values .value.reveal.visible:nth-child(3) { animation-delay: 0.3s; }
.js .values .value.reveal.visible:nth-child(4) { animation-delay: 0.4s; }

/* Hoạt động: dấu ngoặc trích dẫn nhún nhảy. */
.quote::before { animation: lo-lung 3.5s ease-in-out infinite; }
.quote-2::before { animation-delay: 1s; }

/* Nút menu điện thoại luôn giữ đủ 46px: tên trường dài hoặc cỡ chữ hệ thống
   lớn thì chữ logo xuống dòng, không được chèn mất nút. */
.burger { flex-shrink: 0; }
@media (max-width: 1100px) {
	.logo { flex-shrink: 1; min-width: 0; }
	.logo-text { min-width: 0; }
	.logo-text strong { white-space: normal; }
}

/* Hoạt động nổi bật: thẻ bài là ô vuông, ảnh phủ kín, ngày và tiêu đề nằm trên
   dải tối ở đáy ảnh (chữ trắng đủ tương phản). Máy tính 4 ô một hàng, tablet và
   điện thoại 2x2; ô lẻ cuối cùng trải hết hàng thì thành khung 2:1. */
.highlight-grid > .highlight { position: relative; aspect-ratio: 1; }
.highlight-grid:not(:has(.highlight:nth-of-type(2))) > .highlight { aspect-ratio: 2 / 1; }
.highlight-grid .highlight-thumb { position: absolute; inset: 0; aspect-ratio: auto; }
.highlight-grid .highlight-body {
	position: absolute;
	inset: auto 0 0;
	padding: 2.6rem 1rem 0.9rem;
	background: linear-gradient(to top, rgba(24, 32, 28, 0.88), rgba(24, 32, 28, 0.6) 55%, transparent);
	pointer-events: none;
}
.highlight-grid .highlight-body time { color: rgba(255, 255, 255, 0.9); }
.highlight-grid .highlight-body h3 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 0.98rem; line-height: 1.35; }
.highlight-grid .highlight-body h3 a { color: #fff; pointer-events: auto; }
.highlight-grid .highlight-body h3 a:hover { color: var(--sun); }
@media (max-width: 900px) {
	.highlight-grid > .highlight:last-of-type:nth-of-type(odd) { aspect-ratio: 2 / 1; }
}
@media (max-width: 640px) {
	.highlight-grid { gap: 0.75rem; }
	.highlight-grid .highlight-body { padding: 2rem 0.7rem 0.65rem; }
	.highlight-grid .highlight-body time { font-size: 0.72rem; }
	.highlight-grid .highlight-body h3 { font-size: 0.84rem; }
	.highlight-grid .quote { padding: 1.1rem 1.2rem; }
	.highlight-grid .quote::before { height: 1.5rem; font-size: 3rem; }
	.highlight-grid .quote p { font-size: 0.98rem; }
}