/* =====================================================================
   Trang chu - Truong PTDTBT Tieu hoc Sin Thau
   Bo cuc theo mau: noi bat + thong bao, loi tat, ban tin, chuyen mon,
   cot phu (van ban, tra cuu, video), ba cong khai, khoanh khac hoc duong
   ===================================================================== */
.mn-home {
    --mn-navy: #123a7a;
    --mn-blue: #0a60b6;
    --mn-sky: #e8f1fb;
    --mn-text: #1f2d3d;
    --mn-muted: #6b7a8c;
    --mn-orange: #f59e0b;
    --mn-red: #e11d48;
    --mn-card: #ffffff;
    --mn-radius: 14px;
    --mn-shadow: 0 4px 16px rgba(20, 50, 100, .09);
    color: var(--mn-text);
    padding: 6px 0 18px;
}
.mn-home *, .mn-home *::before, .mn-home *::after { box-sizing: border-box; }
.mn-home a { text-decoration: none; color: inherit; }
.mn-home img { max-width: 100%; display: block; }
.mn-home h2, .mn-home h3, .mn-home h4, .mn-home p, .mn-home ul { margin: 0; padding: 0; }
.mn-home ul { list-style: none; }

/* ---- chao mung ---- */
.mn-welcome {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border-radius: 10px; padding: 9px 16px; margin-bottom: 16px;
    box-shadow: var(--mn-shadow); font-size: 14px; color: var(--mn-navy); font-weight: 600;
}
.mn-welcome i { color: var(--mn-orange); font-size: 18px; }

/* ---- the chung ---- */
.mn-card { background: var(--mn-card); border-radius: var(--mn-radius); box-shadow: var(--mn-shadow); padding: 16px 18px; }
.mn-title { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; color: var(--mn-navy); letter-spacing: .2px; text-transform: uppercase; }
.mn-title i { color: var(--mn-blue); font-size: 20px; }
.mn-title-red i { color: var(--mn-red); }
.mn-title-orange i { color: var(--mn-orange); }
.mn-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.mn-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--mn-blue); white-space: nowrap; }
.mn-more:hover { color: var(--mn-navy); }
.mn-card > .mn-more { margin-top: 12px; float: right; }
.mn-date, .mn-home small { font-size: 12.5px; color: var(--mn-muted); }
.mn-date i, .mn-home small i { margin-right: 4px; }

/* ---- hang 1: noi bat + thong bao ---- */
.mn-hero { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 20px; margin-bottom: 18px; align-items: stretch; }
.mn-feature { background: #fff; border-radius: var(--mn-radius); box-shadow: var(--mn-shadow); overflow: hidden; display: flex; flex-direction: column; }
.mn-feature-img { position: relative; display: block; aspect-ratio: 16 / 8.6; background: #dfe9f5; overflow: hidden; }
.mn-feature-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.mn-feature:hover .mn-feature-img img { transform: scale(1.03); }
.mn-badge { position: absolute; left: 14px; top: 14px; background: var(--mn-orange); color: #fff; font-weight: 800; font-size: 13px; padding: 6px 14px; border-radius: 20px; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.mn-feature-body { padding: 14px 20px 16px; border-left: 4px solid var(--mn-orange); margin: 0; }
.mn-feature-body h2 { font-size: 25px; line-height: 1.3; font-weight: 800; color: var(--mn-navy); margin-bottom: 8px; }
.mn-feature-body h2 a:hover { color: var(--mn-blue); }
.mn-feature-body p { font-size: 14.5px; line-height: 1.55; color: #3c4b5d; margin-bottom: 8px; }

.mn-notice { display: flex; flex-direction: column; }
.mn-notice .mn-title { margin-bottom: 8px; }
.mn-notice ul { flex: 1; }
.mn-notice li, .mn-laws li { border-bottom: 1px dashed #d6e0ee; }
.mn-notice li:last-child, .mn-laws li:last-child { border-bottom: 0; }
.mn-notice li a, .mn-laws li a { display: flex; gap: 12px; padding: 11px 0; align-items: flex-start; }
.mn-li-text strong { display: block; font-size: 14px; line-height: 1.4; color: var(--mn-navy); font-weight: 700; margin-bottom: 3px; }
.mn-notice li a:hover strong, .mn-laws li a:hover strong { color: var(--mn-blue); }
.mn-ico { flex: 0 0 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.mn-ico-blue { background: #e3efff; color: #2b7de0; }
.mn-ico-red { background: #ffe5e9; color: #e0364c; }

/* ---- loi tat ---- */
.mn-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 20px; }
.mn-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px 8px; border-radius: 16px; font-weight: 800; font-size: 17px; text-align: center; box-shadow: var(--mn-shadow); transition: transform .2s, box-shadow .2s; border: 1px solid rgba(255,255,255,.7); }
.mn-tile i { font-size: 36px; }
.mn-tile:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(20, 50, 100, .16); }
.mn-t1 { background: linear-gradient(160deg, #e4f6e1, #cfeccb); color: #2f8f3a; }
.mn-t2 { background: linear-gradient(160deg, #e1f0ff, #cde5fb); color: #1f69b8; }
.mn-t3 { background: linear-gradient(160deg, #fff1d9, #fde3b3); color: #d9820d; }
.mn-t4 { background: linear-gradient(160deg, #ece6ff, #dcd2fb); color: #6a45c9; }
.mn-t5 { background: linear-gradient(160deg, #dff5e6, #c9edd5); color: #2a9150; }

/* ---- 2 cot ---- */
.mn-cols { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; margin-bottom: 20px; align-items: stretch; }
.mn-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mn-main > .mn-card { flex: 1; }
.mn-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mn-side > .mn-card:last-child { flex: 1; }

.mn-news3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mn-news-img { display: block; aspect-ratio: 4 / 2.9; border-radius: 10px; overflow: hidden; background: #dfe9f5; margin-bottom: 9px; }
.mn-news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.mn-news:hover .mn-news-img img { transform: scale(1.05); }
.mn-news h4, .mn-cm-big h4 { font-size: 15.5px; line-height: 1.38; font-weight: 800; color: var(--mn-navy); margin-bottom: 5px; }
.mn-news h4 a:hover, .mn-cm-big h4 a:hover { color: var(--mn-blue); }
.mn-news p, .mn-cm-big p { font-size: 13px; line-height: 1.5; color: #4a5a6c; margin-bottom: 6px; }

.mn-cm { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; }
.mn-cm-img { display: block; aspect-ratio: 16 / 9.2; border-radius: 10px; overflow: hidden; background: #dfe9f5; margin-bottom: 9px; }
.mn-cm-img img { width: 100%; height: 100%; object-fit: cover; }
.mn-cm-list { display: flex; flex-direction: column; gap: 12px; }
.mn-cm-item { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px dashed #d6e0ee; }
.mn-cm-item:last-child { border-bottom: 0; padding-bottom: 0; }
.mn-cm-item img { flex: 0 0 96px; width: 96px; height: 70px; object-fit: cover; border-radius: 8px; background: #dfe9f5; }
.mn-cm-item strong { display: block; font-size: 14px; line-height: 1.38; color: var(--mn-navy); font-weight: 700; margin-bottom: 3px; }
.mn-cm-item:hover strong { color: var(--mn-blue); }

/* ---- cot phu ---- */
.mn-laws { margin-top: 4px; }
.mn-search { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.mn-search label { display: flex; align-items: center; gap: 8px; border: 1px solid #cfdcec; border-radius: 10px; padding: 0 12px; background: #f8fbff; }
.mn-search label i { color: var(--mn-blue); }
.mn-search input, .mn-search select { border: 0; background: transparent; outline: 0; width: 100%; height: 38px; font-size: 14px; color: var(--mn-text); }
.mn-search button { height: 42px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #1b78d6, #0a5aae); color: #fff; font-weight: 800; letter-spacing: .5px; cursor: pointer; }
.mn-search button:hover { filter: brightness(1.08); }
.mn-video { display: block; margin-top: 12px; }
.mn-video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0b2a55; margin-bottom: 9px; }
.mn-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mn-video-thumb i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; line-height: 54px; text-align: center; border-radius: 50%; background: rgba(225, 29, 72, .92); color: #fff; font-size: 22px; padding-left: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.mn-video strong { display: block; font-size: 14.5px; line-height: 1.4; color: var(--mn-navy); margin-bottom: 4px; }

/* ---- ba cong khai ---- */
.mn-public { margin-bottom: 20px; background: linear-gradient(180deg, #f1f7ff, #e4effb); }
.mn-public-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 14px; }
.mn-pub { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: var(--mn-shadow); transition: transform .2s; }
.mn-pub:hover { transform: translateY(-3px); }
.mn-pub-ico { flex: 0 0 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.mn-p1 .mn-pub-ico { background: #e1eeff; color: #2b7de0; }
.mn-p2 .mn-pub-ico { background: #dff5e6; color: #2a9150; }
.mn-p3 .mn-pub-ico { background: #fff1d9; color: #d9820d; }
.mn-pub-text { flex: 1; min-width: 0; }
.mn-pub-text strong { display: block; font-size: 16px; color: var(--mn-navy); font-weight: 800; margin-bottom: 3px; }
.mn-pub-text small { display: block; line-height: 1.4; margin-bottom: 3px; }
.mn-pub-text em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--mn-blue); }
.mn-pub > .fa-angle-right { font-size: 26px; color: #9bb3d1; }

/* ---- khoanh khac ---- */
.mn-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mn-photos a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #dfe9f5; }
.mn-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.mn-photos a:hover img { transform: scale(1.07); }
.mn-photos span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(180deg, transparent, rgba(5, 25, 60, .78)); }

/* ---- khau hieu ---- */
.mn-quote { margin: 22px 0 6px; text-align: center; font-size: 25px; font-style: italic; font-weight: 700; color: #1d5fa8; font-family: Georgia, 'Times New Roman', serif; }
.mn-quote em { color: var(--mn-red); }
.mn-quote span { color: var(--mn-orange); font-size: 34px; vertical-align: -6px; padding: 0 6px; }

/* ---- man hinh nho ---- */
@media (max-width: 991px) {
    .mn-hero, .mn-cols { grid-template-columns: 1fr; }
    .mn-tiles { grid-template-columns: repeat(3, 1fr); }
    .mn-public-grid { grid-template-columns: 1fr; }
    .mn-photos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .mn-news3, .mn-cm { grid-template-columns: 1fr; }
    .mn-tiles { grid-template-columns: repeat(2, 1fr); }
    .mn-feature-body h2 { font-size: 20px; }
    .mn-quote { font-size: 19px; }
}

/* =====================================================================
   Tach khoi ro rang: vien + bong, duong ke duoi tieu de, vach ngan the tin
   ===================================================================== */
.mn-home { --mn-line: #d5e3f4; --mn-shadow: 0 6px 18px rgba(18, 58, 122, .11), 0 1px 3px rgba(18, 58, 122, .08); }
.mn-card, .mn-feature, .mn-welcome, .mn-pub {
    border: 1px solid var(--mn-line);
    box-shadow: var(--mn-shadow);
}
.mn-cols, .mn-hero, .mn-main, .mn-side { gap: 22px; }
.mn-tiles { gap: 18px; margin-bottom: 22px; }
.mn-hero, .mn-cols, .mn-public { margin-bottom: 22px; }

/* tieu de khoi + duong ke phan cach */
.mn-card > .mn-title,
.mn-head,
.mn-notice > .mn-title {
    padding-bottom: 11px;
    margin-bottom: 14px;
    border-bottom: 2px solid #e3edf9;
    position: relative;
}
.mn-card > .mn-title::after,
.mn-head::after,
.mn-notice > .mn-title::after {
    content: ''; position: absolute; left: 0; bottom: -2px; width: 64px; height: 2px; background: var(--mn-blue);
}
.mn-head .mn-title { margin: 0; }
.mn-head > .mn-title-orange::after { background: var(--mn-orange); }

/* vach ngan giua 3 the ban tin */
.mn-news3 { gap: 0; }
.mn-news { padding: 0 16px; }
.mn-news:first-child { padding-left: 0; }
.mn-news:last-child { padding-right: 0; }
.mn-news + .mn-news { border-left: 1px solid var(--mn-line); }

/* vach ngan trong chuyen mon */
.mn-cm { gap: 0; }
.mn-cm-big { padding-right: 18px; border-right: 1px solid var(--mn-line); }
.mn-cm-list { padding-left: 18px; }

/* khoi ba cong khai va anh: noi bat hon nen */
.mn-public { background: linear-gradient(180deg, #eaf3fd, #dcebfa); border: 1px solid #c6daf0; }
.mn-pub { border: 1px solid #d3e2f3; }
.mn-photos a { border: 3px solid #fff; box-shadow: 0 3px 10px rgba(18, 58, 122, .18); }
.mn-tile { border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 5px 14px rgba(18, 58, 122, .12); }

@media (max-width: 640px) {
    .mn-news { padding: 0 0 14px; border-left: 0 !important; border-bottom: 1px solid var(--mn-line); margin-bottom: 14px; }
    .mn-cm-big { padding-right: 0; border-right: 0; }
    .mn-cm-list { padding-left: 0; margin-top: 14px; }
}

/* =====================================================================
   Nut link nhanh (thiet ke lai): bieu tuong trong vong tron mau, tieu de cung tong mau, khong dung mau den
   ===================================================================== */
.mn-home .mn-tiles { gap: 18px; }
.mn-home a.mn-tile {
    --c1: #2f8f3a; --c2: #5bbd5e; --bg1: #f1faf0; --bg2: #dff3dc; --ink: #1f6f2b;
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
    padding: 22px 10px 16px; border-radius: 18px; text-align: center; overflow: hidden;
    background: linear-gradient(165deg, var(--bg1), var(--bg2));
    border: 1px solid color-mix(in srgb, var(--c1) 22%, #fff);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--c1) 16%, transparent);
    color: var(--ink);
    transition: transform .22s, box-shadow .22s;
}
.mn-home a.mn-tile::after {            /* vong tron trang tri o goc */
    content: ''; position: absolute; right: -26px; top: -26px; width: 86px; height: 86px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--c2) 38%, transparent), transparent 70%);
    pointer-events: none;
}
.mn-home a.mn-tile:hover { transform: translateY(-5px); box-shadow: 0 14px 26px color-mix(in srgb, var(--c1) 28%, transparent); }
.mn-home .mn-tile-ico {
    width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 6px;
    background: linear-gradient(145deg, var(--c2), var(--c1));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--c1) 40%, transparent), inset 0 2px 0 rgba(255, 255, 255, .35);
}
.mn-home .mn-tile-ico i { font-size: 28px; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .18); }
.mn-home a.mn-tile strong { font-size: 16.5px; line-height: 1.25; font-weight: 800; color: var(--ink); }
.mn-home a.mn-tile small { font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--ink) 70%, #fff); }
.mn-home a.mn-t1 { --c1: #2e9a45; --c2: #66c46f; --bg1: #f2fbf1; --bg2: #ddf3da; --ink: #1d6b2e; }
.mn-home a.mn-t2 { --c1: #1f74c9; --c2: #58a6ee; --bg1: #f1f8ff; --bg2: #dbeafc; --ink: #174f8f; }
.mn-home a.mn-t3 { --c1: #e08a0b; --c2: #fbbf3c; --bg1: #fffaf0; --bg2: #fdebc6; --ink: #94580a; }
.mn-home a.mn-t4 { --c1: #6c47d1; --c2: #a587f0; --bg1: #f7f4ff; --bg2: #e6defc; --ink: #4b2fa0; }
.mn-home a.mn-t5 { --c1: #11a384; --c2: #4fd1b3; --bg1: #f0fcf9; --bg2: #d5f4ec; --ink: #0c6e59; }

/* ---- dong khau hieu chay luan phien (3 giay / cau, hien an muot) ---- */
.mn-welcome { position: relative; overflow: hidden; gap: 12px; min-height: 44px; }
.mn-welcome > i { flex: 0 0 auto; animation: mnRing 3s ease-in-out infinite; transform-origin: 70% 70%; }
.mn-rotator { position: relative; flex: 1; min-width: 0; height: 24px; }
.mn-slide {
    position: absolute; left: 0; right: 0; top: 50%; line-height: 24px; margin-top: -12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transform: translateY(12px); filter: blur(4px); pointer-events: none;
    transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1), filter .8s ease;
    background: linear-gradient(90deg, var(--g2, #14692f), #123a7a 60%, var(--g1, #1f8f46));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.mn-slide.is-on { opacity: 1; transform: translateY(0); filter: blur(0); }
.mn-slide.is-out { opacity: 0; transform: translateY(-12px); filter: blur(4px); }
.mn-dots { display: flex; gap: 5px; flex: 0 0 auto; align-items: center; }
.mn-dots b { width: 6px; height: 6px; border-radius: 6px; background: #cfe3d6; transition: width .4s ease, background .4s ease; }
.mn-dots b.is-on { width: 20px; background: var(--g1, #1f8f46); }
@keyframes mnRing { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-14deg); } 82% { transform: rotate(12deg); } 89% { transform: rotate(-8deg); } 95% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .mn-welcome > i { animation: none; } .mn-slide, .mn-slide.is-out { transform: none; filter: none; transition: opacity .6s ease; } }
@media (max-width: 640px) { .mn-dots { display: none; } .mn-slide { font-size: 13px; } }

/* ===== Khau hieu cach dieu: chu viet tay, mau chuyen sac, hoa tiet hai ben ===== */
.mn-quote {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 18px;
    margin: 26px 0 8px; padding: 14px 10px; text-align: center; font-style: normal;
}
.mn-quote .mn-q-text {
    margin: 0; font-family: 'Dancing Script', 'Segoe Script', cursive; font-weight: 700; font-size: 38px; line-height: 1.25;
    background: linear-gradient(100deg, #14692f 0%, #2aa356 28%, #d4a000 52%, #2aa356 74%, #14692f 100%); background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 2px 2px rgba(20, 105, 47, .18));
    animation: mnShimmer 7s ease-in-out infinite, mnRise 1.2s cubic-bezier(.22, .61, .36, 1) both;
}
.mn-quote .mn-q-text em {
    font-style: normal; font-weight: 700; font-size: 1.12em;
    background: linear-gradient(100deg, #e11d48, #f59e0b 60%, #e11d48); background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    animation: mnShimmer 5s ease-in-out infinite reverse;
}
.mn-quote .mn-q-orn { display: flex; align-items: center; gap: 8px; flex: 1 1 60px; max-width: 230px; color: #2aa356; }
.mn-quote .mn-q-orn::before { content: ''; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #2aa356 55%, #d4a000); }
.mn-quote .mn-q-orn-r::before { display: none; }
.mn-quote .mn-q-orn-r::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #d4a000, #2aa356 45%, transparent); }
.mn-quote .mn-q-orn .fa-leaf { font-size: 20px; transform: rotate(-35deg); animation: mnSway 4s ease-in-out infinite; transform-origin: 50% 100%; }
.mn-quote .mn-q-orn-r .fa-leaf { transform: scaleX(-1) rotate(-35deg); animation-delay: -2s; }
.mn-quote .mn-q-orn .fa-diamond { font-size: 9px; color: #d4a000; }
@keyframes mnShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes mnRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mnSway { 0%, 100% { rotate: -6deg; } 50% { rotate: 7deg; } }
@media (max-width: 767px) { .mn-quote .mn-q-text { font-size: 26px; } .mn-quote .mn-q-orn { display: none; } }
@media (prefers-reduced-motion: reduce) { .mn-quote .mn-q-text, .mn-quote .mn-q-text em, .mn-quote .mn-q-orn .fa-leaf { animation: none; } }