@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@600;700&family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');

:root{
  --red: #a3172c;
  --red-dark: #7c1121;
  --gold: #c99a2e;
  --gold-light: #e8c874;
  --cream: #f7f1e3;
  --paper: #fbf8f1;
  --ink: #2c2620;
  --ink-soft: #5c5348;
  --line: #e3d8bf;
  --white: #ffffff;
  --shadow: 0 6px 24px rgba(44,38,32,0.10);
  --radius: 10px;
  --font-head: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  font-size:17px;
  color: var(--ink);
  background: var(--paper);
  line-height:1.6;
}
a{color:inherit; text-decoration:none;}
img{display:block; width:100%; height:auto;}
ul{list-style:none;}
button{font-family:var(--font-body); cursor:pointer;}

/* ---------- Site header / nav ---------- */
.site-header{ background: var(--paper); border-bottom: 3px solid var(--gold); position:sticky; top:0; z-index:40; }
.topline{ background: var(--red); color:#fbe9c9; font-size:13.5px; letter-spacing:.03em; padding:6px 28px; text-align:center; }
.logo-row{ padding:16px 28px 12px; max-width:1480px; margin:0 auto; }
.nav-row{ display:flex; align-items:center; gap:8px; padding:10px 12px 14px; max-width:1480px; margin:0 auto; border-top:1px solid var(--line); }
.logo{display:flex; align-items:center; gap:16px;}
.logo .badge{
  width:144px; height:144px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; border:3px solid var(--gold);
  box-shadow: var(--shadow); overflow:hidden; flex:none;
}
.logo .badge img{width:100%; height:100%; object-fit:cover; display:block;}
.logo-text{font-family:var(--font-head); line-height:1.25;}
.logo-text .l1{font-size:14.5px; letter-spacing:.1em; color:var(--red); font-weight:700; text-transform:uppercase; font-family:var(--font-body);}
.logo-text .l2{font-size:26px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.01em;}

@media (max-width:900px){
  .logo .badge{width:64px; height:64px; border:2px solid var(--gold);}
  .logo-text .l2{font-size:18px;}
  .logo-text .l1{font-size:12px;}
}

.main-nav{display:flex; gap:1px; flex:1; flex-wrap:wrap; align-items:center;}
.main-nav a{font-size:15.5px; font-weight:700; color:var(--ink-soft); padding:9px 6px; border-radius:20px; border-bottom:none; white-space:nowrap; transition:background .15s ease, color .15s ease;}
.main-nav a.current{color:#fff; background:var(--red); box-shadow:0 2px 10px rgba(163,23,44,.4);}
.main-nav a:hover{color:var(--red); background:var(--cream);}

.search-pill{
  display:flex; align-items:center; gap:5px; background:var(--cream); border:1px solid var(--line);
  border-radius:18px; padding:7px 10px; font-size:14px; color:var(--ink-soft); width:88px; flex:none; box-sizing:border-box;
}
.search-pill input{border:0; background:transparent; outline:none; font-family:var(--font-body); font-size:14px; width:100%; color:var(--ink);}

.nav-toggle{ display:none; background:transparent; border:1px solid var(--line); border-radius:6px; padding:8px 10px; font-size:18px; }

@media (max-width:900px){
  .main-nav{
    display:none; position:absolute; left:0; right:0; top:100%; background:var(--paper);
    flex-direction:column; gap:0; padding:10px 20px 16px; border-bottom:1px solid var(--line); box-shadow:var(--shadow);
  }
  .main-nav.open{display:flex;}
  .main-nav a{padding:10px 12px; border-bottom:1px solid var(--line); border-radius:0;}
  .main-nav a.current{box-shadow:none;}
  .nav-toggle{display:block;}
  .nav-row{position:relative; flex-wrap:wrap;}
  .search-pill{order:3; width:100%; margin-top:10px;}
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size:14px; color:var(--ink-soft); padding:14px 28px 0; max-width:1160px; margin:0 auto; }
.breadcrumb a{color:var(--red);}

/* ---------- Hero (trang chủ) ---------- */
.hero{
  position:relative;
  background: linear-gradient(180deg, rgba(30,20,12,.35), rgba(30,20,12,.72)),
              repeating-linear-gradient(135deg, #7c1121 0 40px, #8f1527 40px 80px);
  color:#fbf3de; padding:78px 28px 64px; text-align:center;
}
.hero .eyebrow{ font-size:14px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-light); margin-bottom:16px; font-weight:600; }
.hero h1{ font-family:var(--font-head); font-size:45px; font-weight:700; max-width:840px; margin:0 auto 18px; line-height:1.25; }
.hero h1 .nowrap-line{ white-space:nowrap; }
.hero .quote{ max-width:640px; margin:0 auto 26px; font-family:var(--font-head); font-style:italic; font-size:20px; color:#f7e6bd; line-height:1.5; }
.hero .quote cite{display:block; font-style:normal; font-size:14.5px; margin-top:10px; color:var(--gold-light);}
.hero-search{ max-width:520px; margin:0 auto; display:flex; background:#fff; border-radius:30px; overflow:hidden; box-shadow:var(--shadow); }
.hero-search input{flex:1; border:0; padding:14px 20px; font-size:15.5px; font-family:var(--font-body); outline:none;}
.hero-search button{ border:0; background:var(--red); color:#fff; padding:0 26px; font-weight:600; }

/* ---------- Page banner (trang con) ---------- */
.page-banner{
  background: linear-gradient(180deg, rgba(30,20,12,.3), rgba(30,20,12,.78)),
              repeating-linear-gradient(135deg, #7c1121 0 40px, #8f1527 40px 80px);
  color:#fbf3de; padding:52px 28px; text-align:center;
}
.page-banner .kicker{ font-size:13.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-light); margin-bottom:12px; font-weight:700; }
.page-banner h1{ font-family:var(--font-head); font-size:33.5px; max-width:760px; margin:0 auto; }
.page-banner p{ max-width:640px; margin:14px auto 0; font-size:15px; color:#f3ead2; }

/* ---------- Section headings ---------- */
.section{padding:56px 28px;}
.section-head{max-width:1160px; margin:0 auto 30px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.section-head h2{font-family:var(--font-head); font-size:29px; color:var(--ink);}
.section-head .kicker{font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); font-weight:700; margin-bottom:6px;}
.section-head .more{font-size:14.5px; font-weight:600; color:var(--red);}
.divider-line{width:56px; height:3px; background:var(--gold); margin:10px 0 0;}
.container{max-width:1160px; margin:0 auto; padding:0 28px;}

/* ---------- Quick topic cards (trang chủ) ---------- */
.topic-grid{max-width:1160px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.topic-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; text-align:left; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease; }
.topic-card:hover{ transform:translateY(-3px); box-shadow:0 10px 30px rgba(44,38,32,.14); }
.topic-card .thumb{width:100%; height:132px; border-radius:8px; overflow:hidden; margin-bottom:14px; background:var(--cream);}
.topic-card .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.topic-card .thumb.placeholder{display:flex; align-items:center; justify-content:center; text-align:center; padding:10px;
  background:repeating-linear-gradient(135deg, var(--cream) 0 14px, #f0e6cf 14px 28px); color:var(--ink-soft); font-size:12.5px; line-height:1.4;}
.topic-card .num{font-family:var(--font-head); font-size:14.5px; color:var(--gold); font-weight:700; margin-bottom:10px;}
.topic-card h3{font-family:var(--font-head); font-size:19.5px; margin-bottom:8px; color:var(--red); text-transform:uppercase; letter-spacing:.015em; font-weight:700; line-height:1.3;}
.topic-card p{font-size:14.5px; color:var(--ink-soft);}

/* ---------- Mini timeline ---------- */
.mini-timeline{ background:var(--cream); padding:44px 28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.mt-track{max-width:1160px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; position:relative; flex-wrap:wrap; gap:20px 0;}
.mt-track::before{content:''; position:absolute; left:0; right:0; top:9px; height:2px; background:var(--gold);}
.mt-point{position:relative; text-align:center; flex:1; min-width:90px;}
.mt-dot{width:18px; height:18px; border-radius:50%; background:var(--red); border:3px solid var(--paper); margin:0 auto 10px; position:relative; z-index:2;}
.mt-thumb{width:76px; height:76px; border-radius:10px; overflow:hidden; margin:0 auto 8px; box-shadow:var(--shadow); border:1px solid var(--line);}
.mt-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.mt-point .yr{font-family:var(--font-head); font-weight:700; color:var(--red); font-size:17px;}
.mt-point .lb{font-size:13px; color:var(--ink-soft); max-width:110px; margin:4px auto 0;}

/* ---------- Document cards ---------- */
.doc-grid{max-width:1160px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.doc-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.doc-cover{height:120px; background:linear-gradient(135deg,var(--red),var(--red-dark)); display:flex; align-items:center; justify-content:center; gap:12px; color:var(--gold-light); font-family:var(--font-head); font-size:14.5px; text-align:center; padding:10px 14px;}
.doc-cover.has-thumb{justify-content:flex-start; text-align:left;}
.doc-cover .cv-thumb{flex:none; width:58px; height:78px; border-radius:5px; overflow:hidden; border:2px solid rgba(255,255,255,.85); box-shadow:0 3px 10px rgba(0,0,0,.35); background:var(--paper);}
.doc-cover .cv-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.doc-cover .cv-title{flex:1; line-height:1.28;}
.doc-card .body{padding:14px 16px;}
.doc-card h4{font-size:15.5px; font-family:var(--font-head); margin-bottom:6px; color:var(--ink);}
.doc-card .tag{font-size:12.5px; color:var(--red); font-weight:700; text-transform:uppercase; letter-spacing:.06em;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink); color:#cfc6b4; padding:40px 28px 24px; font-size:14.5px;}
.footer-grid{max-width:1160px; margin:0 auto; display:grid; grid-template-columns:1.8fr 1.3fr 1fr 1fr; gap:24px;}
.footer-grid h5{color:var(--gold-light); font-family:var(--font-head); font-size:15.5px; margin-bottom:12px;}
.footer-grid a{display:block; color:#cfc6b4; margin-bottom:7px; font-size:14px;}
.footer-bottom{max-width:1160px; margin:26px auto 0; border-top:1px solid #45402f; padding-top:16px; font-size:13px; color:#8b8371;}
.footer-logo-row{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.footer-logo-row img{width:48px; height:48px; border-radius:50%; border:2px solid var(--gold); background:#fff; object-fit:cover;}
.footer-logo-row .fname{font-family:var(--font-head); color:#f3ead2; font-size:17px; font-weight:700; line-height:1.35;}
.footer-logo-row .fname small{display:block; font-size:13px; color:#a99f89; font-weight:400; font-family:var(--font-body);}

/* ---------- Trang chuyên đề (mục 1-4) ---------- */
.page-hero{position:relative; background:var(--ink);}
.page-hero img{opacity:.55; max-height:300px; object-fit:cover;}
.page-hero.no-img{ background: linear-gradient(180deg, rgba(30,20,12,.3), rgba(30,20,12,.78)), repeating-linear-gradient(135deg, #7c1121 0 40px, #8f1527 40px 80px); height:220px; }
.page-hero .overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:30px 28px; background:linear-gradient(180deg, rgba(20,14,8,.35), rgba(20,14,8,.85));
}
.page-hero .overlay .kicker{color:var(--gold-light); font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin-bottom:8px;}
.page-hero .overlay h1{color:#fff; font-family:var(--font-head); font-size:31.5px; max-width:800px; margin:0 auto;}
.page-body{display:grid; grid-template-columns:2.1fr 1fr; gap:36px; padding:40px 28px; max-width:1160px; margin:0 auto;}
.intro-text{color:var(--ink-soft); font-size:16px; margin-bottom:30px;}
.intro-text p + p{margin-top:12px;}

.tl-item{display:flex; gap:16px; padding-bottom:26px; position:relative;}
.tl-item::before{content:''; position:absolute; left:8px; top:22px; bottom:0; width:1px; background:var(--line);}
.tl-item:last-child::before{display:none;}
.tl-dot{width:17px; height:17px; border-radius:50%; background:var(--gold); border:3px solid var(--paper); box-shadow:0 0 0 1px var(--gold); flex:none; margin-top:2px;}
.tl-content .yr{font-family:var(--font-head); font-weight:700; color:var(--red); font-size:17px; margin-bottom:4px;}
.tl-content p{font-size:15px; color:var(--ink-soft);}
.tl-content .tl-image{
  margin-top:14px; max-width:360px; border-radius:10px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow);
}
.tl-content .tl-image img{display:block; width:100%; height:auto;}
.tl-item.tl-major{padding-bottom:36px;}
.tl-source{font-size:12.5px; color:var(--ink-soft); margin-top:10px; font-style:italic;}

/* ---------- Lưới ảnh tư liệu theo từng mốc (tách ảnh riêng + chú thích) ---------- */
.tl-photo-grid{display:grid; gap:14px; margin-top:16px;}
.tl-photo-grid.cols-1{grid-template-columns:minmax(160px,360px);}
.tl-photo-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.tl-photo-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:640px){
  .tl-photo-grid.cols-2, .tl-photo-grid.cols-3{grid-template-columns:repeat(2,1fr);}
}
.tl-photo{margin:0; background:var(--white); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;}
.tl-photo img{display:block; width:100%; height:130px; object-fit:cover; background:var(--cream);}
.tl-photo figcaption{font-size:13px; line-height:1.4; color:var(--ink-soft); padding:8px 10px; font-style:italic; flex:1;}

/* ---------- Trang 4 - mốc phụ dạng gọn (không có ảnh) ---------- */
.mini-tl{max-width:1160px; margin:0 auto;}
.mini-tl-item{display:flex; gap:14px; padding:10px 0; border-bottom:1px dashed var(--line); font-size:14.5px;}
.mini-tl-item:last-child{border-bottom:none;}
.mini-tl-item .yr{flex:none; width:70px; font-family:var(--font-head); font-weight:700; color:var(--red);}
.mini-tl-item p{color:var(--ink-soft);}

.side-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:20px; box-shadow:var(--shadow);}
.side-card h5{font-family:var(--font-head); font-size:17px; margin-bottom:12px; color:var(--ink); border-bottom:2px solid var(--gold); padding-bottom:8px;}
.related-doc{display:flex; gap:10px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:14.5px; align-items:flex-start;}
.related-doc:last-child{border-bottom:none;}
.related-doc .ico{width:30px; height:30px; border-radius:6px; background:var(--cream); color:var(--red); display:flex; align-items:center; justify-content:center; font-size:15.5px; flex:none;}
button.related-doc{
  width:100%; background:none; border:0; border-bottom:1px dashed var(--line); text-align:left;
  font-family:var(--font-body); color:var(--ink); cursor:pointer; border-radius:8px;
}
button.related-doc:last-child{border-bottom:none;}
button.related-doc:hover{background:var(--cream);}
button.related-doc div:nth-child(2){flex:1;}
.related-doc .go{color:var(--red); font-size:19px; flex:none; align-self:center; opacity:0; transition:opacity .15s ease;}
button.related-doc:hover .go{opacity:1;}

.cta-strip{ max-width:1160px; margin:0 auto; background:var(--cream); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 30px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.cta-strip h3{font-family:var(--font-head); font-size:19px; color:var(--ink);}

/* ---------- Trang 5 — Tác phẩm tiêu biểu ---------- */
.works-grid{max-width:1160px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:24px; padding:0 0 10px;}
.work-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:row;}
.work-cover{
  width:200px; flex:none; background:repeating-linear-gradient(45deg, var(--red) 0 10px, var(--red-dark) 10px 20px);
  display:flex; align-items:center; justify-content:center; color:#f7e6bd; font-family:var(--font-head); font-size:13.5px; text-align:center; padding:8px;
}
.work-cover.has-img{padding:12px; background:var(--cream);}
.work-cover.has-img img{width:100%; height:100%; object-fit:contain; display:block;}
.btn[href]{text-decoration:none; display:inline-flex; align-items:center; justify-content:center;}
@media (max-width:640px){
  .work-card{flex-direction:column;}
  .work-cover{width:100%; height:180px;}
}
.work-card .wbody{padding:18px 18px 20px; flex:1; display:flex; flex-direction:column;}
.work-card h4{font-family:var(--font-head); font-size:18px; margin-bottom:4px;}
.work-card .yr-tag{font-size:13.5px; color:var(--gold); font-weight:700; margin-bottom:10px;}
.work-card p{font-size:14.5px; color:var(--ink-soft); flex:1; margin-bottom:14px;}
.btn-row{display:flex; gap:8px;}
.btn{ font-size:14px; font-weight:600; padding:9px 14px; border-radius:6px; text-align:center; flex:1; cursor:pointer; border:0; }
.btn-primary{background:var(--red); color:#fff;}
.btn-outline{background:transparent; border:1px solid var(--line); color:var(--ink-soft);}

.toantap-box{max-width:1160px; margin:36px auto 0; background:var(--cream); border-radius:var(--radius); padding:26px 28px; border:1px solid var(--line);}
.toantap-box h3{font-family:var(--font-head); font-size:19px; margin-bottom:14px;}
.toantap-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
.tt-chip{
  background:var(--white); border:1px solid var(--line); border-radius:6px; padding:10px; text-align:center;
  font-size:14px; font-weight:600; color:var(--red); font-family:var(--font-body); cursor:pointer; width:100%;
  transition:background .15s ease, border-color .15s ease;
}
.tt-chip:hover{background:var(--cream); border-color:var(--gold);}

/* ---------- Modal đọc trực tuyến (trang 5) ---------- */
.pdf-modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(20,14,8,.72); z-index:200;
  align-items:center; justify-content:center; padding:24px;
}
.pdf-modal-overlay.open{display:flex;}
.pdf-modal{
  background:var(--paper); border-radius:14px; overflow:hidden; width:100%; max-width:920px; height:88vh;
  display:flex; flex-direction:column; box-shadow:0 24px 64px rgba(0,0,0,.5); border:3px solid var(--gold);
}
.pdf-modal-header{
  background:linear-gradient(135deg,var(--red),var(--red-dark)); color:#fff; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex:none;
}
.pdf-modal-kicker{display:block; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--gold-light); margin-bottom:4px;}
.pdf-modal-header h3{font-family:var(--font-head); font-size:19px; margin:0; color:#fff; line-height:1.3;}
.pdf-modal-actions{display:flex; align-items:center; gap:10px; flex:none;}
.pdf-modal-actions .btn-sm{padding:8px 14px; font-size:14px; flex:none;}
.pdf-modal-actions .btn-outline{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); color:#fff;}
.pdf-modal-close{
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.4); color:#fff; width:34px; height:34px;
  border-radius:50%; font-size:17px; line-height:1; display:flex; align-items:center; justify-content:center; flex:none;
}
.pdf-modal-close:hover{background:rgba(255,255,255,.3);}
.pdf-modal-body{
  flex:1; background:#525659; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:16px 0;
}
.pdf-modal-loading{color:#eee; text-align:center; padding:60px 20px; font-size:15.5px; font-family:var(--font-body);}
.pdf-modal-pages{display:flex; flex-direction:column; align-items:center; gap:14px; padding:0 12px;}
.pdf-modal-pages canvas{max-width:100%; height:auto; display:block; box-shadow:0 2px 14px rgba(0,0,0,.4); background:#fff;}
.pdf-modal-body img{width:100%; height:auto; display:block; object-fit:contain; background:#525659;}
@media (max-width:700px){
  .pdf-modal{height:92vh; border-radius:10px;}
  .pdf-modal-header{flex-wrap:wrap; gap:10px;}
  .pdf-modal-actions{width:100%; justify-content:space-between;}
}

/* ---------- Trang 7 — Phim tư liệu về Bác Hồ ---------- */
.film-grid{max-width:1160px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.film-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column; width:100%; text-align:left; border-width:1px;
  font-family:var(--font-body); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; padding:0;
}
.film-card:hover{transform:translateY(-3px); box-shadow:0 10px 30px rgba(44,38,32,.14);}
.film-cover{position:relative; aspect-ratio:16/9; background:var(--ink); overflow:hidden;}
.film-cover img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease;}
.film-card:hover .film-cover img{transform:scale(1.05);}
.film-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(0deg, rgba(20,14,8,.35), rgba(20,14,8,0) 45%);}
.film-play span{
  width:56px; height:56px; border-radius:50%; background:rgba(163,23,44,.9); color:#fff; display:flex;
  align-items:center; justify-content:center; font-size:20px; padding-left:3px; box-shadow:0 4px 16px rgba(0,0,0,.4);
  border:2px solid rgba(255,255,255,.85); transition:transform .15s ease;
}
.film-card:hover .film-play span{transform:scale(1.08);}
.film-card .fbody{padding:14px 16px 18px;}
.film-card .tag{font-size:11.5px; color:var(--red); font-weight:700; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:5px;}
.film-card h4{font-family:var(--font-head); font-size:15.5px; color:var(--ink); line-height:1.35;}

.film-modal.pdf-modal{height:auto; max-width:960px;}
.film-modal-body{background:#000; flex:1; display:flex; align-items:center; justify-content:center; aspect-ratio:16/9; padding:0;}
.film-modal-body iframe{width:100%; height:100%; border:0; display:block;}

/* ---------- Trang 6 — Làm theo lời Bác ---------- */
.activity-grid{max-width:1160px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.activity-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px; box-shadow:var(--shadow);}
.activity-card .icon{
  width:44px; height:44px; border-radius:50%; background:var(--cream); color:var(--red);
  display:flex; align-items:center; justify-content:center; font-size:21.5px; margin-bottom:14px;
}
.activity-card h4{font-family:var(--font-head); font-size:17.5px; margin-bottom:6px; color:var(--ink);}
.activity-card p{font-size:14px; color:var(--ink-soft);}

.news-list{max-width:1160px; margin:0 auto;}
.news-item{display:flex; gap:18px; align-items:center; padding:16px 4px; border-bottom:1px solid var(--line);}
.news-item:last-child{border-bottom:none;}
.news-item .date-badge{
  flex:none; width:60px; height:60px; border-radius:8px; background:var(--red); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--font-head);
}
.news-item .date-badge .d{font-size:21.5px; font-weight:700; line-height:1;}
.news-item .date-badge .m{font-size:11px; text-transform:uppercase; margin-top:2px;}
.news-item .ntext h4{font-family:var(--font-head); font-size:17px; margin-bottom:4px; color:var(--ink);}
.news-item .ntext p{font-size:14px; color:var(--ink-soft);}

.gallery-grid{max-width:1160px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.gallery-tile{
  aspect-ratio:4/3; border-radius:8px; background:linear-gradient(135deg,var(--cream),var(--line));
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:12.5px; text-align:center; padding:8px;
  border:1px dashed var(--line);
}
.gallery-tile.has-img{
  position:relative; padding:0; border:1px solid var(--line); border-style:solid; overflow:hidden; box-shadow:var(--shadow);
}
.gallery-tile.has-img img{width:100%; height:100%; object-fit:cover; display:block;}
.gallery-tile.has-img .cap{
  position:absolute; left:0; right:0; bottom:0; padding:20px 10px 8px; text-align:center; line-height:1.3;
  font-size:13.5px; color:#fff; background:linear-gradient(0deg, rgba(20,14,8,.78), rgba(20,14,8,0));
}

/* ---------- Trang tra cứu / kết quả tìm kiếm ---------- */
.search-page-box{max-width:1160px; margin:0 auto 30px; display:flex; background:#fff; border-radius:30px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line);}
.search-page-box input{flex:1; border:0; padding:14px 20px; font-size:15.5px; font-family:var(--font-body); outline:none;}
.search-page-box button{border:0; background:var(--red); color:#fff; padding:0 26px; font-weight:600;}
.search-empty{max-width:1160px; margin:0 auto; text-align:center; color:var(--ink-soft); font-size:15px; padding:30px 0; display:none;}
[data-searchable].hidden-by-search, [data-searchable].hidden-by-filter{display:none !important;}
.filter-row{max-width:1160px; margin:0 auto 26px; display:flex; gap:10px; flex-wrap:wrap;}
.filter-chip{background:#fff; border:1px solid var(--line); border-radius:20px; padding:8px 16px; font-size:14px; font-weight:600; color:var(--ink-soft); cursor:pointer;}
.filter-chip.active{background:var(--red); border-color:var(--red); color:#fff;}
.result-count{max-width:1160px; margin:0 auto 18px; font-size:14px; color:var(--ink-soft);}

/* ---------- Notice / ghi chú bản nháp ---------- */
.draft-note{
  max-width:1160px; margin:18px auto 0; background:var(--cream); border-left:4px solid var(--gold);
  border-radius:6px; padding:14px 18px; font-size:14px; color:var(--ink-soft); display:flex; gap:10px;
}

@media (max-width:900px){
  .topic-grid{grid-template-columns:repeat(2,1fr);}
  .doc-grid, .activity-grid, .gallery-grid, .film-grid{grid-template-columns:repeat(2,1fr);}
  .page-body{grid-template-columns:1fr;}
  .works-grid, .footer-grid{grid-template-columns:1fr 1fr;}
  .toantap-grid{grid-template-columns:repeat(3,1fr);}
  .hero h1{font-size:33.5px;}
  .hero h1 .nowrap-line{white-space:normal;}
}
@media (max-width:560px){
  .topic-grid, .doc-grid, .activity-grid, .gallery-grid, .works-grid, .footer-grid, .film-grid{grid-template-columns:1fr;}
}