/* Nhịp biên tập cho trang chủ: nhiều khoảng thở, mỗi section một cách đọc. */
.home-page { font-size:16px; }
.home-page .container { width:min(100% - 96px,1240px); }
.home-page .header-inner { min-height:74px; }
.home-page .nav a { font-size:13px; }
.home-page .button { min-height:44px; padding:11px 20px; font-size:13px; }
.home-page .eyebrow { color:var(--red-dark); font-size:12px; letter-spacing:.1em; }
.home-page h2 { font-size:clamp(30px,2.65vw,39px); line-height:1.2; }
.home-page .lead { font-size:16px; line-height:1.75; }

.home-page .hero { padding:88px 0 98px; }
.home-page .hero-grid { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(48px,6vw,92px); }
.home-page .hero-title { max-width:690px; font-size:clamp(43px,4vw,60px); line-height:1.17; }
.home-page .hero .lead { max-width:570px; margin:26px 0 22px; font-size:17px; }
.home-page .hero-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; margin:0 0 28px; color:var(--muted); font-size:13px; }
.home-page .hero-meta strong { padding-left:13px; border-left:3px solid var(--red); color:var(--ink); font-size:17px; }
.home-page .hero-actions { gap:24px; }
.home-page .hero-art { max-width:540px; }
.home-page .hero-art img { height:clamp(370px,34vw,500px); border:0; border-radius:2px; box-shadow:0 20px 50px rgba(13,35,73,.12); }
.home-page .hero-caption { margin-top:10px; font-size:12px; }

.home-page .section { padding:100px 0 110px; }
.home-page .section-header { margin-bottom:40px; }
.home-page .section-header h2 { margin-bottom:14px; }
.home-page #su-kien { padding-top:90px; }
.home-page .event-grid { grid-template-columns:1fr 1fr; gap:24px; }
.home-page .event-card { flex-direction:column; align-items:flex-start; gap:22px; min-height:310px; padding:35px 38px; border:1px solid #dce3eb; border-top:4px solid #9eafc4; background:#fff; }
.home-page .event-card.event-public { border-color:#ead6d4; border-top-color:var(--red); background:#fff8f6; }
.home-page .event-symbol { width:58px; height:58px; flex-basis:58px; }
.home-page .event-content { width:100%; gap:9px; }
.home-page .event-card h3 { font-size:clamp(26px,2.5vw,35px); letter-spacing:-.045em; }
.home-page .event-card p { font-size:16px; }
.home-page .event-tag { margin:5px 0 14px; padding:7px 10px; font-size:12px; }
.home-page .event-card .button { min-height:44px; padding:10px 20px; font-size:13px; }

.home-page #truong { background:#f8f9fb; }
.home-page .school-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px; }
.home-page .school-card { grid-column:span 2; padding:8px 8px 20px; background:#fff; box-shadow:0 8px 24px rgba(18,37,77,.035); }
.home-page .school-card:nth-child(n+4) { grid-column:span 3; }
.home-page .school-photo { aspect-ratio:16 / 10; }
.home-page .school-card h3 { min-height:0; margin:20px 14px 12px; font-size:18px; line-height:1.35; }
.home-page .school-links { flex-direction:row; align-items:stretch; gap:10px; padding:0 14px; }
.home-page .school-links a { display:grid; place-items:center; flex:1; min-height:44px; font-size:12px; line-height:1.25; }
.home-page .school-links a:first-child { padding:8px 10px; }
@media(min-width:1321px){
  .home-page .school-card:nth-child(n+4) { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:18px; align-items:start; padding:8px 20px 8px 8px; }
  .home-page .school-card:nth-child(n+4) .school-photo { grid-row:1 / span 2; height:100%; aspect-ratio:auto; }
  .home-page .school-card:nth-child(n+4) h3 { margin:20px 0 8px; }
  .home-page .school-card:nth-child(n+4) .school-links { flex-direction:column; align-self:end; padding:0 0 13px; }
}

.home-page #trao-doi { order:4; }
.home-page #trao-doi .container { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:start; gap:clamp(44px,7vw,110px); }
.home-page #trao-doi .section-header { margin:0; }
.home-page .topics { display:block; border:0; }
.home-page .topic { display:grid; grid-template-columns:46px 1fr; grid-template-rows:auto auto; column-gap:20px; min-height:92px; padding:19px 0; border:0; border-top:1px solid var(--line); border-radius:0; }
.home-page .topic:last-child { border-bottom:1px solid var(--line); }
.home-page .topic svg { grid-row:1 / span 2; width:44px; height:44px; padding:11px; }
.home-page .topic strong { align-self:end; font-size:17px; line-height:1.35; }
.home-page .topic p { display:block; margin:3px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }

.home-page #cau-chuyen { order:5; background:#faf9f7; }
.home-page .story-feature { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); align-items:center; gap:clamp(48px,7vw,105px); }
.home-page .story-photo { min-width:0; margin:0; }
.home-page .story-photo img { width:100%; height:420px; object-fit:cover; object-position:center 59%; border-radius:2px; }
.home-page .story-photo figcaption { margin-top:10px; color:var(--muted); font-size:11px; }
.home-page .story-text h2 { max-width:450px; margin:0 0 23px; }
.home-page .story-text .lead { max-width:480px; }
.home-page .story-note { margin:24px 0 0; padding-top:18px; border-top:1px solid #dcdfe4; color:var(--muted); font-size:13px; }

.home-page #chuong-trinh { order:6; }
.home-page .agenda-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; counter-reset:agenda; }
.home-page .agenda-arrow { display:none; }
.home-page .agenda-step { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:18px; min-height:150px; padding:26px 0 0; border:0; border-top:2px solid #cbd5e1; border-radius:0; }
.home-page .agenda-step::before { position:absolute; right:0; top:20px; counter-increment:agenda; content:'0' counter(agenda); color:#8ba0bb; font-size:13px; font-weight:700; }
.home-page .agenda-icon { width:46px; height:46px; flex-basis:46px; }
.home-page .agenda-icon svg { width:23px; height:23px; }
.home-page .agenda-step strong { font-size:17px; line-height:1.45; }

.home-page #don-vi { order:7; background:#faf9f7; }
.home-page #don-vi .container { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(44px,7vw,110px); }
.home-page #don-vi .section-header { margin:0; }
.home-page .organizer-grid { grid-template-columns:1fr; gap:0; }
.home-page .organizer-card { gap:0; min-height:105px; padding:20px 0; border-bottom:1px solid #dfe3e8; border-radius:0; background:none; }
.home-page .organizer-card:first-child { border-top:1px solid #dfe3e8; }
.home-page .organizer-icon { display:none; }
.home-page .organizer-card strong { font-size:19px; line-height:1.4; }
.home-page .organizer-card small { margin-top:5px; font-size:12px; }

.home-page #cau-hoi { order:8; }
.home-page #cau-hoi .container { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); column-gap:clamp(44px,7vw,110px); }
.home-page #cau-hoi h2 { grid-column:1; margin-bottom:14px; }
.home-page #cau-hoi .lead { grid-column:1; grid-row:2; }
.home-page .faq-list { grid-column:2; grid-row:1 / span 2; margin:0; border:0; border-top:1px solid var(--line); border-radius:0; }
.home-page .faq-list summary { min-height:72px; padding:20px 0; font-size:15px; }
.home-page .faq-list details p { padding:0 24px 22px 0; font-size:14px; }
.home-page .cta-band { order:9; padding:75px 0; background:#fff5f2; }
.home-page .cta-band strong { font-size:clamp(20px,2vw,28px); }
.home-page .cta-band .button { min-height:48px; }
.home-page .site-footer { padding:32px 0; }

@media(max-width:1320px){
  .home-page .school-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-page .school-card,.home-page .school-card:nth-child(n+4) { grid-column:span 1; }
  .home-page .school-links { flex-direction:column; }
}
@media(max-width:980px){
  .home-page .container { width:min(100% - 56px,1240px); }
  .home-page .hero { padding:68px 0 78px; }
  .home-page .hero-grid { gap:38px; }
  .home-page .hero-title { font-size:clamp(36px,4.6vw,48px); }
  .home-page .hero-art { max-width:none; }
  .home-page .hero-art img { height:380px; }
  .home-page .section { padding:80px 0 88px; }
  .home-page #trao-doi .container,.home-page #don-vi .container,#cau-hoi .container { gap:44px; }
}
@media(max-width:720px){
  .home-page .container { width:min(100% - 36px,1240px); }
  .home-page .header-inner { min-height:66px; }
  .home-page .hero { padding:38px 0 54px; }
  .home-page .hero-grid { grid-template-columns:1fr; gap:28px; }
  .home-page .hero-title { font-size:clamp(31px,8.2vw,38px); line-height:1.2; }
  .home-page .hero .lead { margin:17px 0 18px; font-size:15px; line-height:1.65; }
  .home-page .hero-meta { margin-bottom:20px; font-size:12px; }
  .home-page .hero-meta strong { font-size:15px; }
  .home-page .hero-art img { height:250px; }
  .home-page .hero-actions { gap:8px; }
  .home-page .hero-secondary { min-height:44px; }
  .home-page .section { padding:66px 0 74px; }
  .home-page #su-kien { padding-top:64px; }
  .home-page .section-header { margin-bottom:30px; }
  .home-page h2 { font-size:28px; }
  .home-page .lead { font-size:15px; }
  .home-page .event-grid { grid-template-columns:1fr; gap:16px; }
  .home-page .event-card { min-height:0; padding:25px 23px; gap:18px; }
  .home-page .event-card h3 { font-size:27px; }
  .home-page .event-card p { font-size:15px; }
  .home-page .school-grid { grid-template-columns:1fr; gap:18px; }
  .home-page .school-card { display:flex; padding:8px 8px 20px; }
  .home-page .school-photo { aspect-ratio:16 / 9; }
  .home-page .school-card h3 { margin:16px 12px 10px; font-size:18px; }
  .home-page .school-links { flex-direction:row; padding:0 12px; }
  .home-page .school-links a { font-size:12px; }
  .home-page #trao-doi .container,.home-page #don-vi .container,.home-page #cau-hoi .container { display:block; }
  .home-page #trao-doi .section-header,.home-page #don-vi .section-header { margin-bottom:30px; }
  .home-page .topic { min-height:86px; }
  .home-page .topic strong { font-size:16px; }
  .home-page .story-feature { grid-template-columns:1fr; gap:30px; }
  .home-page .story-photo img { height:245px; }
  .home-page .story-text h2 { margin-bottom:15px; }
  .home-page .agenda-grid { grid-template-columns:1fr; gap:0; }
  .home-page .agenda-step { flex-direction:row; align-items:center; gap:18px; min-height:88px; padding:16px 34px 16px 20px; border-top:0; border-left:2px solid #cbd5e1; }
  .home-page .agenda-step::before { right:0; top:22px; }
  .home-page .agenda-step strong { font-size:15px; }
  .home-page .organizer-card { min-height:95px; }
  .home-page .organizer-card strong { font-size:17px; }
  .home-page #cau-hoi h2,.home-page #cau-hoi .lead,.home-page .faq-list { display:block; }
  .home-page .faq-list { margin-top:30px; }
  .home-page .cta-band { padding:52px 0; }
  .home-page .cta-band strong { font-size:20px; }
}
/* School explorer: one selected school, one generous image and a clear path to sources. */
.home-page .school-explorer { position:relative; min-height:606px; padding-right:63%; border-top:1px solid #dce3eb; }
.home-page .school-option { width:100%; border-bottom:1px solid #dce3eb; }
.home-page .school-option summary { position:relative; display:flex; flex-direction:column; justify-content:center; min-height:112px; padding:18px 48px 18px 22px; list-style:none; cursor:pointer; transition:background-color .2s ease; }
.home-page .school-option summary::-webkit-details-marker { display:none; }
.home-page .school-option summary::before { position:absolute; inset:13px auto 13px 0; width:3px; content:""; background:transparent; }
.home-page .school-option summary::after { position:absolute; right:20px; top:50%; width:9px; height:9px; border-right:1.5px solid #6d7f98; border-top:1.5px solid #6d7f98; content:""; transform:translateY(-50%) rotate(45deg); }
.home-page .school-option[open] summary { background:#fff; }
.home-page .school-option[open] summary::before { background:var(--red); }
.home-page .school-option[open] summary::after { border-color:var(--red); transform:translateY(-50%) rotate(135deg); }
.home-page .school-option summary:hover { background:#fff; }
.home-page .school-option summary:focus-visible { outline:3px solid #0b214b; outline-offset:-3px; }
.home-page .school-option-name { color:var(--ink); font-family:"Noto Serif",serif; font-size:clamp(17px,1.6vw,22px); font-weight:650; line-height:1.4; }
.home-page .school-option-place { margin-top:6px; color:#63758c; font-size:12px; line-height:1.5; }
.home-page .school-panel { position:absolute; top:0; right:0; width:59.5%; min-height:594px; background:#fff; box-shadow:0 18px 45px rgba(13,35,73,.07); }
.home-page .school-panel figure { position:relative; height:378px; margin:0; overflow:hidden; background:#e9edf1; }
.home-page .school-panel figure img { display:block; width:100%; height:100%; object-fit:cover; }
.home-page .school-option:nth-child(2) .school-panel figure img { width:180%; max-width:none; object-position:left center; }
.home-page .school-option:nth-child(3) .school-panel figure img { object-position:center 34%; }
.home-page .school-option:nth-child(4) .school-panel figure { background:#dfe6e9; }
.home-page .school-option:nth-child(4) .school-panel figure img { width:100%; height:100%; object-fit:contain; }
.home-page .school-panel figcaption { position:absolute; right:16px; bottom:14px; max-width:calc(100% - 32px); padding:7px 11px; background:rgba(255,255,255,.94); color:#4a5b72; font-size:11px; line-height:1.4; }
.home-page .school-panel-body { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:20px; min-height:215px; padding:24px 28px 28px; }
.home-page .school-panel-kicker { margin:0 0 7px; color:var(--red-dark); font-size:11px; font-weight:700; letter-spacing:.11em; }
.home-page .school-panel-body h3 { margin:0 0 9px; color:var(--ink); font-family:"Noto Serif",serif; font-size:clamp(20px,1.9vw,26px); line-height:1.3; }
.home-page .school-panel-body p:not(.school-panel-kicker) { max-width:430px; margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.home-page .school-panel-actions { display:flex; flex-direction:column; align-items:stretch; gap:8px; white-space:nowrap; }
.home-page .school-panel-actions .button { justify-content:center; }
.home-page .school-official { display:grid; place-items:center; min-height:44px; color:var(--ink); font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.home-page .school-official:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
@media(max-width:1090px) {
  .home-page .school-explorer { min-height:588px; padding-right:61%; }
  .home-page .school-panel { width:57%; min-height:576px; }
  .home-page .school-panel figure { height:350px; }
  .home-page .school-panel-body { display:block; min-height:225px; }
  .home-page .school-panel-actions { flex-direction:row; margin-top:16px; }
  .home-page .school-panel-actions .button { flex:1; }
}
@media(max-width:860px) {
  .home-page .school-explorer { min-height:0; padding-right:0; border-top:1px solid #dce3eb; }
  .home-page .school-option summary { min-height:86px; padding:16px 44px 16px 16px; }
  .home-page .school-option-name { font-size:18px; }
  .home-page .school-panel { position:static; width:100%; min-height:0; margin:0 0 18px; box-shadow:0 10px 28px rgba(13,35,73,.06); }
  .home-page .school-panel figure { height:clamp(220px,47vw,390px); }
  .home-page .school-option:nth-child(4) .school-panel figure { height:280px; }
  .home-page .school-panel-body { min-height:0; padding:20px 22px 24px; }
  .home-page .school-panel-actions { flex-wrap:wrap; }
}
@media(max-width:540px) {
  .home-page .school-option summary { min-height:78px; }
  .home-page .school-option-name { font-size:16px; }
  .home-page .school-option-place { font-size:11px; }
  .home-page .school-panel figure { height:235px; }
  .home-page .school-option:nth-child(4) .school-panel figure { height:210px; }
  .home-page .school-panel figcaption { right:8px; bottom:8px; font-size:10px; }
  .home-page .school-panel-body { padding:20px 18px 22px; }
  .home-page .school-panel-body h3 { font-size:20px; }
  .home-page .school-panel-actions { flex-direction:column; align-items:stretch; }
  .home-page .school-panel-actions .button,.home-page .school-official { width:100%; white-space:nowrap; }
}
@media(prefers-reduced-motion:reduce) {
  .home-page .school-option summary { transition:none; }
}
.home-page .school-option summary { align-items:flex-start; text-align:left; }
.home-page .school-option:nth-child(2) .school-panel figure img { object-position:left 22%; }
@media(max-width:860px) {
  .home-page .school-option:nth-child(2) .school-panel figure img { object-position:left center; }
  .home-page .school-panel-body h3 { display:none; }
}