/*
Theme Name:   BVĐ
Theme URI:    https://github.com/vintech-company/thbevandan
Description:  Theme riêng cho Trường Tiểu học Bế Văn Đàn. Dựng thẳng từ template
              HTML/CSS có sẵn — không page builder, không framework CSS.
Author:       vintech
Version:      0.2.1
Requires at least: 6.4
Requires PHP: 8.1
Text Domain:  bvd
*/

/* ===== BASE ===== */
:root {
  --blue: #0b5ed7;
  --blue-dark: #06327a;
  --amber: #f7b32b;
  --ink: #16202e;
  --muted: #6b7a90;
  --line: #e4e9f0;
  --bg-alt: #f5f8fc;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(11, 46, 100, .09);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  line-height: 1.65;
  background: #fff;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container { width: min(1180px, 92%); margin: 0 auto; }

h1, h2, h3, h4 { line-height: 1.2; font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }

.btn {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: .25s;
}
.btn-primary { background: var(--amber); color: #3a2600; }
.btn-primary:hover { background: #ffc84d; transform: translateY(-2px); }
.btn-ghost { border-color: #fff; color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--blue-dark); }

/* ===== TOPBAR ===== */
.topbar {
  background: var(--blue-dark);
  color: #cddcf5;
  font-size: .82rem;
}
.topbar-inner {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 38px; flex-wrap: wrap; gap: 6px;
}
.topbar-right { display: flex; gap: 18px; }
.topbar a:hover { color: var(--amber); }

/* ===== HEADER ===== */
.header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s;
}
.header.scrolled { box-shadow: 0 4px 18px rgba(0, 0, 0, .08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: 16px; }

.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #fff; font-weight: 800; font-size: .95rem; letter-spacing: .5px;
}
.logo-text strong { display: block; font-size: 1rem; }
.logo-text small { color: var(--muted); font-size: .78rem; }

.nav { display: flex; gap: 6px; }
.nav a {
  padding: 9px 16px; border-radius: 999px;
  font-weight: 600; font-size: .93rem; color: #3d4d64;
  transition: .2s;
}
.nav a:hover { background: var(--bg-alt); color: var(--blue); }
.nav a.active { background: var(--blue); color: #fff; }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; margin: 5px 0; transition: .25s; }
.burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ===== HERO ===== */
.hero { position: relative; height: min(78vh, 620px); overflow: hidden; background: var(--blue-dark); }
.slide {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  opacity: 0; transition: opacity .8s ease;
  pointer-events: none;
}
.slide.active { opacity: 1; pointer-events: auto; }
.slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6, 30, 70, .88) 0%, rgba(6, 30, 70, .6) 55%, rgba(6, 30, 70, .3) 100%);
}
.slide-content { position: relative; z-index: 2; color: #fff; max-width: 640px; }
.eyebrow {
  display: inline-block; margin-bottom: 12px;
  padding: 5px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .15);
  font-size: .82rem; font-weight: 600; letter-spacing: .5px;
}
.slide h1 { font-size: clamp(2.1rem, 5.6vw, 3.7rem); margin-bottom: 16px; }
.lead { font-size: 1.05rem; color: #dbe6f7; margin-bottom: 26px; }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .2); color: #fff;
  font-size: 1.8rem; line-height: 1;
  transition: .2s;
}
.slider-arrow:hover { background: var(--amber); color: #3a2600; }
.slider-arrow.prev { left: 3%; }
.slider-arrow.next { right: 3%; }

.dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 9px; }
.dots button {
  width: 11px; height: 11px; border-radius: 50%;
  border: 0; cursor: pointer; padding: 0;
  background: rgba(255, 255, 255, .45); transition: .2s;
}
.dots button.active { background: var(--amber); width: 28px; border-radius: 999px; }

/* ===== STATS ===== */
.stats { background: var(--blue); color: #fff; }
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  text-align: center; padding: 34px 0;
}
.stat + .stat { border-left: 1px solid rgba(255, 255, 255, .2); }
.stat b { display: block; font-size: 2.1rem; color: var(--amber); }
.stat span { font-size: .9rem; color: #d5e3fb; }

/* ===== SECTIONS ===== */
.section { padding: 80px 0; }
.section-alt { background: var(--bg-alt); }

.section-label {
  color: var(--blue); font-weight: 700; font-size: .85rem;
  text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px;
}
.section-head { text-align: center; max-width: 660px; margin: 0 auto 46px; }
.section-sub { color: var(--muted); margin-top: 12px; }

/* ===== ABOUT ===== */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-img { position: relative; }
.about-img img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.badge {
  position: absolute; right: -18px; bottom: -18px;
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--amber); color: #3a2600;
  display: grid; place-items: center; align-content: center;
  font-size: 2rem; font-weight: 800; line-height: 1;
  box-shadow: var(--shadow);
}
.badge small { font-size: .75rem; font-weight: 700; }
.about-text p { color: var(--muted); margin: 16px 0; }

.check-list { margin: 22px 0 28px; }
.check-list li { position: relative; padding-left: 30px; margin-bottom: 10px; font-weight: 500; }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-size: .7rem; display: grid; place-items: center;
}

/* ===== CARDS ===== */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card {
  background: #fff; padding: 34px 28px;
  border-radius: var(--radius); border: 1px solid var(--line);
  transition: .3s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.card-icon {
  width: 58px; height: 58px; border-radius: 16px;
  background: var(--bg-alt); display: grid; place-items: center;
  font-size: 1.7rem; margin-bottom: 18px;
}
.card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: .95rem; }

/* ===== TABS + GALLERY ===== */
.tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.tab {
  padding: 9px 22px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-weight: 600; font-size: .9rem; cursor: pointer;
  font-family: inherit; color: #3d4d64; transition: .2s;
}
.tab:hover { border-color: var(--blue); color: var(--blue); }
.tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.gal-item {
  position: relative; overflow: hidden;
  border-radius: var(--radius); cursor: pointer;
}
.gal-item.hide { display: none; }
.gal-item img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  transition: transform .5s;
}
.gal-item:hover img { transform: scale(1.07); }
.gal-item figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 40px 18px 16px;
  background: linear-gradient(transparent, rgba(6, 30, 70, .9));
  color: #fff; font-weight: 700; font-size: 1rem;
}

/* ===== NEWS ===== */
.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.news {
  display: flex; background: #fff;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); transition: .3s;
}
.news:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.news-thumb { position: relative; width: 210px; flex: none; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tag {
  position: absolute; top: 12px; left: 12px;
  background: var(--amber); color: #3a2600;
  padding: 3px 12px; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
}
.news-body { padding: 20px 22px; }
.news-body time { color: var(--muted); font-size: .8rem; }
.news-body h3 { font-size: 1.02rem; margin: 6px 0 8px; }
.news-body p { color: var(--muted); font-size: .9rem; margin-bottom: 10px; }
.read-more { color: var(--blue); font-weight: 700; font-size: .88rem; }
.read-more:hover { color: var(--amber); }

/* ===== CONTACT ===== */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact-info > p { color: var(--muted); margin: 14px 0 26px; }
.info-list li { display: flex; gap: 14px; margin-bottom: 18px; }
.info-list span {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  background: var(--bg-alt); display: grid; place-items: center;
}
.info-list b { display: block; font-size: .82rem; color: var(--muted); font-weight: 600; }

.contact-form {
  background: var(--bg-alt); padding: 32px;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.contact-form h3 { margin-bottom: 18px; }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 13px 16px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: .95rem; background: #fff;
  resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: 0; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(11, 94, 215, .12);
}
.contact-form .invalid { border-color: #e14b4b; }
.form-msg { margin-top: 12px; font-size: .9rem; font-weight: 600; min-height: 20px; }
.form-msg.ok { color: #1a9a5a; }
.form-msg.err { color: #e14b4b; }

/* ===== FOOTER ===== */
.footer { background: var(--blue-dark); color: #b7c9e6; padding-top: 60px; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr 1fr; gap: 36px; padding-bottom: 44px; }
.footer h4 { color: #fff; margin-bottom: 16px; font-size: 1rem; }
.footer li { margin-bottom: 9px; }
.footer a:hover { color: var(--amber); }
.footer-logo { margin-bottom: 14px; }
.footer-logo .logo-text strong { color: #fff; }
.footer-logo .logo-text small { color: #93aad2; }

.socials { display: flex; gap: 10px; margin-top: 16px; }
.socials a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  transition: .2s;
}
.socials a:hover { background: var(--amber); color: #3a2600; }

.copyright {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 18px 0; font-size: .82rem; text-align: center;
}

/* ===== TO TOP ===== */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--blue); color: #fff; font-size: 1.2rem;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: .3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }

/* ===== REVEAL ===== */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s, transform .6s; }
.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== PAGE HERO (trang con) ===== */
.page-hero { position: relative; background: var(--blue-dark); overflow: hidden; }
.page-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6, 30, 70, .9) 0%, rgba(6, 30, 70, .6) 100%);
}
.page-hero-inner { position: relative; z-index: 2; color: #fff; padding: 74px 0; }
.page-hero h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); margin-bottom: 14px; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9rem; color: #cddcf5; }
.breadcrumb a:hover { color: var(--amber); }
.breadcrumb b { color: #fff; font-weight: 700; }
.breadcrumb span { opacity: .5; }
.breadcrumb.dark { color: var(--muted); margin-bottom: 18px; }
.breadcrumb.dark b { color: var(--ink); }
.breadcrumb.dark a:hover { color: var(--blue); }

/* ===== CTA ===== */
.section-cta { text-align: center; margin-top: 40px; }

.cta-band { background: var(--blue); color: #fff; padding: 46px 0; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.cta-inner h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.cta-inner p { color: #d5e3fb; margin-top: 6px; }

/* ===== TIMELINE ===== */
.timeline { max-width: 760px; margin: 0 auto; border-left: 2px solid var(--line); }
.timeline li { display: flex; gap: 22px; padding: 0 0 30px 26px; position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue); border: 3px solid #fff;
}
.timeline b { flex: none; width: 62px; color: var(--blue); font-size: 1.05rem; }
.timeline h3 { font-size: 1.05rem; margin-bottom: 4px; }
.timeline p { color: var(--muted); font-size: .95rem; }

/* ===== BAN GIÁM HIỆU ===== */
.person {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; text-align: center;
  transition: .3s;
}
.person:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.person img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.person h3 { font-size: 1.1rem; margin: 18px 0 4px; }
.person p { color: var(--muted); font-size: .9rem; padding-bottom: 20px; }

/* ===== PAGINATION ===== */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 46px; }
.pagination a, .pagination span {
  min-width: 40px; padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff;
  text-align: center; font-weight: 600; font-size: .9rem;
}
.pagination a:hover { border-color: var(--blue); color: var(--blue); }
.pagination .active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ===== TRANG BÀI VIẾT ===== */
.article-top { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: 34px 0 40px; }
.article-top h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); max-width: 860px; }
.article-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.article-meta time { color: var(--muted); font-size: .85rem; }
.tag-inline {
  background: var(--amber); color: #3a2600;
  padding: 3px 12px; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
}

.article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.article-cover {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 30px;
}
.article-body p { margin-bottom: 18px; color: #3d4d64; }
.article-body .article-lead { font-size: 1.08rem; color: var(--ink); font-weight: 500; }
.article-body h2 { font-size: 1.35rem; margin: 30px 0 12px; }
.article-body ul { margin: 0 0 18px; }
.article-body li { position: relative; padding-left: 22px; margin-bottom: 9px; color: #3d4d64; }
.article-body li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
}
.article-body blockquote {
  margin: 26px 0; padding: 20px 26px;
  border-left: 4px solid var(--amber); background: var(--bg-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.02rem; font-style: italic;
}
.article-body cite { display: block; margin-top: 10px; font-size: .85rem; font-style: normal; color: var(--muted); font-weight: 600; }

.article-nav {
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: .9rem;
}

.article-side { position: sticky; top: 94px; display: grid; gap: 22px; }
.side-box { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.side-box h4 { font-size: 1rem; margin-bottom: 16px; }
.side-news li { display: flex; gap: 12px; margin-bottom: 16px; }
.side-news li:last-child { margin-bottom: 0; }
.side-news img { width: 74px; height: 58px; flex: none; object-fit: cover; border-radius: 10px; }
.side-news div a { font-size: .88rem; font-weight: 600; line-height: 1.35; display: block; }
.side-news div a:hover { color: var(--blue); }
.side-news time { color: var(--muted); font-size: .78rem; }
.side-cta p { color: var(--muted); font-size: .9rem; margin-bottom: 16px; }

/* ===== MAP ===== */
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.map iframe { display: block; width: 100%; height: 380px; border: 0; }

/* ===== RESPONSIVE ===== */
@media (max-width: 980px) {
  .about, .contact { grid-template-columns: 1fr; gap: 40px; }
  .cards-3, .gallery { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .article-wrap { grid-template-columns: 1fr; gap: 36px; }
  .article-side { position: static; }
}

@media (max-width: 720px) {
  .topbar-inner { justify-content: center; font-size: .75rem; }
  .topbar-right { gap: 12px; }
  .burger { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px 5%;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { border-radius: 8px; }
  .logo-text strong { font-size: .88rem; }
  .logo-text small { display: none; }

  .hero { height: auto; min-height: 500px; }
  .slide { position: relative; display: none; padding: 70px 0; }
  .slide.active { display: flex; }
  .slider-arrow { display: none; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .stat + .stat { border-left: 0; }

  .section { padding: 56px 0; }
  .cards-3, .gallery { grid-template-columns: 1fr; }
  .news { flex-direction: column; }
  .news-thumb { width: 100%; height: 190px; }
  .contact-form .row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .badge { right: 10px; width: 88px; height: 88px; font-size: 1.6rem; }
  .page-hero-inner { padding: 52px 0; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .timeline li { flex-direction: column; gap: 4px; }
  .article-nav { flex-direction: column; }
  .map iframe { height: 300px; }
}

/* ═══════════════════════════════════════════════════════════════
   CẦU NỐI WORDPRESS
   WordPress sinh ra markup hơi khác template gốc (phân trang bọc
   thêm .nav-links, dùng .current thay .active). Phần dưới ánh xạ
   lại cho khớp — không đổi thiết kế, chỉ nối class.
   ═══════════════════════════════════════════════════════════════ */

.pagination .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pagination .current { background: var(--blue); border-color: var(--blue); color: #fff; }
.pagination .dots { position: static; transform: none; border: 0; background: none; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.footer .menu { list-style: none; }

/* Ảnh do WordPress chèn vào nội dung bài viết */
.article-body img { border-radius: var(--radius); margin: 22px 0; }
.article-body figure { margin: 22px 0; }
.article-body figcaption { color: var(--muted); font-size: .88rem; text-align: center; margin-top: 8px; }
.article-body ul, .article-body ol { margin: 16px 0 16px 22px; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }

/* Logo ảnh của trường. */
.logo-mark.logo-mark-image {
  width: 62px;
  height: 54px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}

/* Nhãn danh mục và nút lọc giờ là thẻ <a> dẫn tới trang lưu trữ danh mục.
   Chỉ bỏ gạch chân của trình duyệt, giữ nguyên hình dáng cũ. */
a.tab,
a.tag,
a.tag-inline { text-decoration: none; }

a.tag:hover,
a.tag-inline:hover { background: #eece74; }

/* ═══════════════════════════════════════════════════════════════
   BẢNG MÀU NGỌC LỤC
   Đổi màu chủ đạo từ xanh dương #0b5ed7 sang ngọc lục #09696d.
   Thang màu dựng trong không gian OKLCH quanh sắc độ 199.6° nên
   các bậc cách đều nhau về thị giác. Nhóm trung tính cũng lệch
   theo, từ xám ám lam (hue 257) sang hue 210, để cả trang cùng
   một tông lạnh.

   Khối này ghi đè :root và những mã màu cứng nằm rải rác phía
   trên — phần CSS gốc của template giữ nguyên, không sửa.
   Mọi cặp màu bên dưới đều đã kiểm tra tương phản theo WCAG 2.1.
   ═══════════════════════════════════════════════════════════════ */

:root {
	--blue:      #09696d; /* ngọc lục chủ đạo — 6.46:1 trên nền trắng, đạt AA */
	--blue-dark: #003e41; /* thanh trên cùng, chân trang, nền hero */
	--amber:     #e4b756; /* vàng đồng, màu nhấn — trầm hơn #f7b32b */
	--ink:       #152326;
	--muted:     #5e7579; /* 4.89:1 trên nền trắng, đạt AA */
	--line:      #dfeaec;
	--bg-alt:    #f2f9fa;
	--shadow: 0 10px 30px rgba( 0, 62, 65, .10 );
}

/* --- Mã màu cứng còn sót trong CSS gốc --- */

.btn-primary:hover { background: #eece74; }

.topbar,
.breadcrumb,
.footer { color: #a8c9cb; } /* 6.73:1 trên nền #003e41 */

.footer-logo .logo-text small { color: #83aeb0; } /* 4.90:1 */

.nav a,
.tab,
.article-body p,
.article-body li { color: #41565a; } /* 7.77:1 trên nền trắng */

.lead { color: #d3e7e8; }

.stat span,
.cta-inner p { color: #b6e1e3; } /* 4.57:1 trên nền #09696d */

.slide::after {
	background: linear-gradient( 90deg, rgba( 0, 44, 46, .88 ) 0%, rgba( 0, 44, 46, .6 ) 55%, rgba( 0, 44, 46, .3 ) 100% );
}

.page-hero::after {
	background: linear-gradient( 90deg, rgba( 0, 44, 46, .9 ) 0%, rgba( 0, 44, 46, .6 ) 100% );
}

.gal-item figcaption {
	background: linear-gradient( transparent, rgba( 0, 44, 46, .9 ) );
}

.contact-form input:focus,
.contact-form textarea:focus {
	box-shadow: 0 0 0 3px rgba( 9, 105, 109, .14 );
}

/* --- Thẻ tin xen kẽ ---
 * Lưới tin trước đây là thẻ trắng trên nền mục trắng, chỉ ngăn nhau bằng
 * viền rất nhạt nên gần như không thấy ranh giới. Tô một sắc ngọc lục cực
 * nhạt cho các thẻ so le để tạo nhịp.
 *
 * #e9f9f9 là bậc đậm nhất còn giữ được chữ phụ --muted đạt AA (4.51:1);
 * đậm hơn nữa là phần tóm tắt bài rớt chuẩn. Viền thẻ tô màu đổi sang
 * #cae6e7 để giữ đúng độ đậm thị giác như viền thẻ trắng.
 *
 * Lưới 2 cột thì :nth-child(even) rơi hết vào cột phải — thành sọc dọc chứ
 * không phải xen kẽ. Muốn ra bàn cờ phải tô vị trí 2, 3 của mỗi nhóm bốn.
 */
.news-grid .news:nth-child( 4n + 2 ),
.news-grid .news:nth-child( 4n + 3 ) {
	background: #e9f9f9;
	border-color: #cae6e7;
}

/* Dưới 980px lưới còn 1 cột: quay về xen kẽ từng dòng cho đều. */
@media (max-width: 980px) {
	.news-grid .news:nth-child( 4n + 3 ) {
		background: #fff;
		border-color: var(--line);
	}
	.news-grid .news:nth-child( even ) {
		background: #e9f9f9;
		border-color: #cae6e7;
	}
}

/* ═══════════════════════════════════════════════════════════════
   LƯỚI ẢNH CHỒNG LỚP — MỤC "VỀ CHÚNG TÔI" TRANG CHỦ
   Thay một ảnh 4:3 đơn lẻ bằng năm ảnh xếp lệch tầng, để mục giới
   thiệu nói được nhiều mặt hoạt động của trường cùng lúc.

   Cách dựng: lưới 12 cột × 16 hàng cao 32px, mỗi ảnh chiếm một vùng
   khai báo bằng grid-area. Đúng BA chỗ đè nhau, mỗi chỗ rộng một cột
   (1↔2, 3↔4, 4↔5) — grid cho phép hai ô cùng vị trí, z-index quyết
   định ảnh nào nằm trên, viền trắng 5px chạy dọc chỗ đè nên mắt đọc
   ra là "ảnh xếp chồng" chứ không phải ảnh bị cắt.

   Ít chỗ đè và chừa hai khoảng trống (góc trên phải, khe giữa) là
   chủ ý: nhiều chỗ đè hơn thì lưới rối, không còn thấy ảnh nào là
   ảnh chính.

   Muốn đổi bố cục thì sửa grid-area, không cần đụng vào PHP.
   ═══════════════════════════════════════════════════════════════ */

.about-collage {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 12, 1fr );
	grid-auto-rows: 32px;
}

.collage-item {
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 5px solid #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.collage-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* grid-area: hàng-đầu / cột-đầu / hàng-cuối / cột-cuối */
.collage-item-1 { grid-area:  1 /  1 / 10 /  8; z-index: 1; }
.collage-item-2 { grid-area:  3 /  7 / 10 / 13; z-index: 2; }
.collage-item-3 { grid-area: 10 /  1 / 16 /  6; z-index: 3; }
.collage-item-4 { grid-area: 11 /  5 / 17 / 10; z-index: 4; }
.collage-item-5 { grid-area: 10 /  9 / 17 / 13; z-index: 5; }

/* Huy hiệu "45 năm" phải nằm trên mọi ảnh. */
.about-collage .badge {
	z-index: 10;
}

/* --- Hover ---
 * Ảnh được trỏ vào nhấc lên trên các ảnh đang đè nó, đổ bóng sâu hơn
 * và phóng rất nhẹ. Ba lưu ý về cách viết:
 *
 * 1. Phải khai báo trên .about-collage .collage-item (hai class) mới
 *    thắng được .js .reveal ở phần CSS gốc — nếu chỉ .collage-item thì
 *    thuộc tính transition bị .js .reveal ghi đè và hover mất mượt.
 *    Vì vậy danh sách dưới đây phải chép lại cả opacity/transform của
 *    hiệu ứng hiện-khi-cuộn.
 * 2. z-index không nội suy được. Để 0s kèm delay .55s ở trạng thái
 *    thường: lúc rê vào thì đổi ngay, lúc rời ra thì chờ ảnh thu nhỏ
 *    xong mới hạ xuống — không bị "tụt" đột ngột giữa chừng.
 * 3. Nhịp chậm (.55s) và đường cong tắt dần cubic-bezier( .22, .61,
 *    .36, 1 ) cho cảm giác trôi, thay vì bật ra như ease mặc định.
 */
.about-collage .collage-item {
	transition:
		opacity .6s,
		transform .6s,
		box-shadow .55s cubic-bezier( .22, .61, .36, 1 ),
		z-index 0s linear .55s;
}

.about-collage .collage-item img {
	transition: transform .55s cubic-bezier( .22, .61, .36, 1 );
	will-change: transform;
}

.about-collage .collage-item:hover {
	z-index: 9;
	box-shadow: 0 20px 44px rgba( 0, 62, 65, .22 );
	transition:
		opacity .6s,
		transform .6s,
		box-shadow .55s cubic-bezier( .22, .61, .36, 1 ),
		z-index 0s;
}

.about-collage .collage-item:hover img {
	transform: scale( 1.05 );
}

@media (prefers-reduced-motion: reduce) {
	.about-collage .collage-item,
	.about-collage .collage-item img {
		transition: none;
	}
	.about-collage .collage-item:hover img {
		transform: none;
	}
}

/* Dưới 980px .about còn một cột nên lưới rộng bằng cả container —
   nâng chiều cao hàng để ảnh không bị bẹt. */
@media (max-width: 980px) and (min-width: 721px) {
	.about-collage { grid-auto-rows: 46px; }
}

/* Trên điện thoại, chồng lớp làm ảnh vụn và khó nhìn: bỏ hẳn phần đè
   nhau, xếp lại thành ảnh lớn trên cùng rồi lưới 2×2 bên dưới. */
@media (max-width: 720px) {
	.about-collage {
		grid-template-columns: repeat( 2, 1fr );
		grid-auto-rows: auto;
		gap: 8px;
	}
	.collage-item {
		grid-area: auto;
		border-width: 0;
	}
	.collage-item-1 {
		grid-column: span 2;
	}
	.collage-item img {
		height: auto;
		aspect-ratio: 4/3;
	}
	.about-collage .badge {
		right: 4px;
		bottom: -14px;
	}
}

/* Lưới ảnh tập thể giáo viên ở trang Giới thiệu.
   Dùng lại .gallery của trang Hoạt động, chỉ bỏ con trỏ bàn tay:
   bên đó ảnh lọc được theo tab nên bấm có tác dụng, ở đây thì không. */
.team-gallery .gal-item {
	cursor: default;
}

/* Ảnh ở thư viện Hoạt động chỉ dùng để xem và lọc theo loại hoạt động. */
#gallery .gal-item {
	cursor: default;
}

/* --- Cờ Việt Nam và lối vào khu vực quản trị --- */
.topbar-right {
	align-items: center;
}

.topbar-login {
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.3;
}

.topbar-login:hover {
	color: var(--amber);
}

.nav-vietnam-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 20px;
	align-self: center;
	margin-left: 6px;
	border-radius: 2px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, .2 );
	overflow: hidden;
}

.nav-vietnam-flag svg {
	display: block;
	width: 100%;
	height: 100%;
}

@media (max-width: 720px) {
	.nav-vietnam-flag {
		align-self: flex-start;
		margin: 8px 16px;
	}
}

/* --- Thư viện ảnh từ Classic Editor ---
 * WordPress cũng dùng class .gallery, trùng với lưới ảnh của theme. Chỉ trong
 * nội dung bài viết, trả lại số cột mà giáo viên đã chọn khi chèn thư viện. */
.article-body .gallery {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 16px;
	margin: 22px 0;
}

.article-body .gallery-columns-2 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
.article-body .gallery-columns-3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
.article-body .gallery-columns-4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }

.article-body .gallery-item {
	min-width: 0;
	margin: 0;
}

.article-body .gallery-icon a,
.article-body .gallery-icon img {
	display: block;
}

.article-body .gallery-icon img {
	width: 100%;
	height: auto;
	margin: 0;
}

@media (max-width: 720px) {
	.article-body .gallery-columns-3,
	.article-body .gallery-columns-4 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* --- Nhịp chữ trang chi tiết --- */
.article-top h1 {
	font-size: clamp( 1.45rem, 3vw, 2.1rem );
	font-weight: 600;
}

.article-body h2 {
	font-weight: 600;
}

.side-box h4 {
	font-size: .92rem;
	font-weight: 600;
}

/* --- Thanh cuộn Tin tức mới nhất ở trang chủ --- */
.news-carousel {
	position: relative;
}

.news-carousel-track {
	display: grid;
	grid-auto-columns: calc( ( 100% - 52px ) / 3 );
	grid-auto-flow: column;
	gap: 26px;
	overflow-x: auto;
	padding: 2px;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.news-carousel-track::-webkit-scrollbar {
	display: none;
}

.news-carousel-item {
	min-width: 0;
	scroll-snap-align: start;
}

.news-carousel-item .news {
	flex-direction: column;
	height: 100%;
}

.news-carousel-item .news-thumb {
	width: 100%;
	height: 180px;
}

.news-carousel-controls {
	position: absolute;
	top: 50%;
	left: -19px;
	right: -19px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transform: translateY( -50% );
	pointer-events: none;
}

.news-carousel-control {
	width: 38px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: rgba( 255, 255, 255, .94 );
	box-shadow: 0 5px 16px rgba( 0, 62, 65, .16 );
	color: var(--blue-dark);
	cursor: pointer;
	font-size: 1.55rem;
	line-height: 1;
	pointer-events: auto;
	transition: .2s;
}

.news-carousel-control:hover {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

@media (max-width: 980px) {
	.news-carousel-track {
		grid-auto-columns: calc( ( 100% - 26px ) / 2 );
	}
}

@media (max-width: 720px) {
	.news-carousel-track {
		grid-auto-columns: 100%;
	}

	.news-carousel-controls {
		left: 6px;
		right: 6px;
	}
}

/* --- Trang Tin tức --- */
.news-directory {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient( circle at 8% 10%, rgba( 9, 105, 109, .09 ), transparent 24rem ),
		linear-gradient( 180deg, #fff 0%, var(--bg-alt) 100% );
}

.news-directory::before {
	position: absolute;
	top: 148px;
	right: -90px;
	width: 260px;
	height: 260px;
	border: 36px solid rgba( 228, 183, 86, .16 );
	border-radius: 50%;
	content: '';
}

.news-directory .container {
	position: relative;
	z-index: 1;
}

.news-directory-intro {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 26px;
}

.news-directory-intro h2 {
	font-size: clamp( 1.65rem, 3vw, 2.25rem );
}

.news-directory-intro > p {
	max-width: 450px;
	margin: 0;
	color: var(--muted);
}

.news-directory-filter {
	margin-bottom: 30px;
	padding: 14px;
	border: 1px solid rgba( 9, 105, 109, .13 );
	border-radius: 18px;
	background: rgba( 255, 255, 255, .82 );
	box-shadow: 0 10px 28px rgba( 0, 62, 65, .06 );
	backdrop-filter: blur( 8px );
}

.news-directory-filter .tabs {
	margin-bottom: 0;
}

.news-directory .news {
	box-shadow: 0 6px 18px rgba( 0, 62, 65, .06 );
}

.news-directory .news:hover {
	box-shadow: 0 16px 32px rgba( 0, 62, 65, .14 );
}

.news-directory .news-thumb {
	background: var(--blue-dark);
}

@media (max-width: 720px) {
	.news-directory-intro {
		align-items: start;
		flex-direction: column;
		gap: 10px;
	}

	.news-directory-filter {
		padding: 10px;
	}
}

/* --- Menu chính gọn hơn ---
 * Menu có chín mục nên vùng header được rộng hơn nội dung bài viết. Thu nhỏ
 * logo và khoảng đệm từng mục để nhãn luôn nằm trên một hàng ở màn hình lớn. */
.header .container {
	width: min( 1440px, 96% );
}

.header-inner {
	min-height: 64px;
	gap: 10px;
}

.logo {
	gap: 8px;
}

.logo-mark.logo-mark-image {
	width: 48px;
	height: 42px;
}

.logo-text strong {
	font-size: .9rem;
}

.nav {
	gap: 2px;
}

.nav a {
	padding: 8px 9px;
	font-size: .84rem;
	white-space: nowrap;
}

@media (max-width: 1120px) and (min-width: 721px) {
	.logo-text strong {
		font-size: .8rem;
	}

	.logo-mark.logo-mark-image {
		width: 42px;
		height: 38px;
	}

	.nav a {
		padding: 7px 5px;
		font-size: .74rem;
	}
}