/* Trang chủ: bố cục wireframe đã duyệt, với khoảng thở rộng như Study in Japan. */
.home-page { --ink:#0b214b; --muted:#344c71; --red:#d71920; --red-dark:#b81820; --paper:#fff; --mist:#fffdfa; --line:#e4e8ef; --soft-red:#fff3f0; background:#fff; color:var(--ink); font-size:14px; }
.home-page .container { width:min(100% - 100px, 1280px); }
.home-page .site-header { position:relative; background:#fff; border:0; box-shadow:0 1px 10px rgba(17,35,76,.045); }
.home-page .header-inner { min-height:64px; }
.home-page .logo-link { flex-basis:245px; }
.home-page .nav { gap:24px; }
.home-page .nav a { font-size:12px; }
.home-page .button { min-height:40px; padding:9px 18px; border-radius:5px; font-size:12px; }
.home-page .nav .button { padding:10px 15px; }
.home-page h1,.home-page h2 { font-family:'Noto Serif',Georgia,serif; font-weight:700; letter-spacing:-.025em; }
.home-page h1,.home-page h2,.home-page h3,.home-page p { word-break:normal; overflow-wrap:normal; }
.home-page h1 { font-size:clamp(31px,3.45vw,52px); line-height:1.13; }
.home-page h2 { margin:0 0 3px; font-size:clamp(24px,2.7vw,36px); line-height:1.22; }
.home-page .lead { max-width:720px; margin:0; color:var(--muted); font-size:clamp(14px,1.16vw,16px); line-height:1.75; }
.home-page .eyebrow { margin-bottom:8px; color:var(--ink); font-size:10px; letter-spacing:.035em; }
.home-page main { display:flex; flex-direction:column; }
.home-page .hero { order:1; padding:76px 0 84px; background:#fff url('/assets/preview-japan.svg') center bottom / cover no-repeat; }
.home-page .hero::before,.home-page .hero::after { content:none; }
.home-page .hero-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(36px,5vw,76px); }
.home-page .hero-title { max-width:none; font-size:clamp(31px,3.45vw,52px); }
.home-page .hero .lead { max-width:580px; margin:24px 0 28px; }
.home-page .hero-actions { align-items:center; gap:18px; }
.home-page .hero-secondary { color:var(--ink); font-size:12px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.home-page .hero-art { width:100%; min-height:0; max-width:420px; justify-self:end; align-self:center; }
.home-page .hero-art img { width:100%; height:clamp(300px,30vw,410px); object-fit:cover; object-position:center 73%; border:5px solid rgba(255,255,255,.84); border-radius:3px; box-shadow:0 6px 20px rgba(13,35,73,.09); }
.home-page .hero-caption { position:static; display:block; padding:3px 0 0; border:0; background:none; box-shadow:none; color:var(--muted); font-size:10px; text-align:right; }
.home-page .section { padding:88px 0 96px; background:#fff; }
.home-page .section-header { margin:0 0 30px; }
.home-page .section-header h2 { margin-bottom:12px; }
.home-page .section-header .text-link { display:none; }
.home-page #su-kien { order:2; }
.home-page .event-grid { gap:22px; }
.home-page .event-card { display:flex; flex-direction:row; gap:22px; min-height:215px; padding:30px 32px; border-radius:5px; background:linear-gradient(112deg,#fff8f6,#fff4f0); }
.home-page .event-card.event-public { border-color:#e5e9f2; background:linear-gradient(110deg,#f7faff,#f2f6fc); }
.home-page .event-symbol { display:grid; place-items:center; flex:0 0 51px; width:51px; height:51px; border-radius:50%; background:#fce4e1; color:var(--red); }
.home-page .event-public .event-symbol { background:#dfeaf8; color:var(--ink); }
.home-page .event-symbol svg { width:26px; height:26px; }
.home-page .event-content { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.home-page .event-card h3 { margin:0; color:var(--ink); font:700 clamp(19px,2vw,27px)/1.18 'Be Vietnam Pro',sans-serif; letter-spacing:-.05em; }
.home-page .event-card p { margin:0; color:var(--ink); font-size:clamp(12px,1vw,15px); }
.home-page .event-tag { display:inline-block; margin:4px 0 8px; padding:6px 10px; border-radius:4px; background:#fce2df; color:#ae242b; font-size:11px; line-height:1.35; }
.home-page .event-public .event-tag { background:#e5eefb; color:#1d467b; }
.home-page .event-card .button { min-height:35px; margin:0; padding:7px 17px; }
.home-page .event-card .button.secondary { color:var(--ink); border-color:#9aabc5; background:#fff; }
.home-page #truong { order:3; }
.home-page .school-grid { gap:16px; }
.home-page .school-card { padding:6px 6px 18px; border-color:#e9eaf0; border-radius:5px; box-shadow:0 3px 12px rgba(18,37,77,.035); }
.home-page .school-photo { aspect-ratio:1.33; border-radius:3px; }
.home-page .school-card h3 { min-height:2.7em; margin:16px 7px 12px; font-size:clamp(11px,1.04vw,15px); line-height:1.34; letter-spacing:-.025em; }
.home-page .school-links { gap:10px; padding:0 7px; }
.home-page .school-links a { font-size:clamp(10px,.78vw,12px); }
.home-page .school-links a:first-child { padding:7px 4px; color:var(--ink); border-color:#aebed7; }
.home-page #cau-chuyen { order:4; background:#faf9f7; }
.home-page .story-grid { gap:20px; }
.home-page .story-card { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:210px; border:0; border-radius:6px; background:linear-gradient(130deg,#efeeed,#e8e5e3); text-align:center; }
.home-page .story-play { position:absolute; left:20px; top:50%; display:grid; place-items:center; width:37px; height:37px; border-radius:50%; background:#fff; color:var(--ink); font-size:13px; transform:translateY(-50%); }
.home-page .story-art { display:block; width:auto; height:auto; margin:0 0 3px; background:none; color:#b7babf; font:44px/1 Georgia,serif; letter-spacing:0; }
.home-page .story-card h3 { margin:0; font-size:14px; }
.home-page .story-card p { margin:0; font-size:12px; }
.home-page #trao-doi { order:5; }
.home-page .topics { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; border:0; background:none; }
.home-page .topic { display:flex; align-items:center; gap:15px; min-height:105px; padding:18px 20px; border:1px solid var(--line); border-radius:5px; }
.home-page .topic svg { flex:0 0 38px; width:38px; height:38px; padding:9px; border-radius:50%; background:#fff0ee; }
.home-page .topic strong { margin:0; font-size:clamp(10px,.87vw,13px); line-height:1.5; }
.home-page .topic p { display:none; }
.home-page #chuong-trinh { order:6; }
.home-page .agenda-grid { display:grid; grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr; align-items:center; gap:8px; }
.home-page .agenda-step { display:flex; align-items:center; gap:14px; min-height:90px; padding:18px 16px; border:1px solid var(--line); border-radius:5px; }
.home-page .agenda-step strong { font-size:clamp(10px,.84vw,13px); line-height:1.45; }
.home-page .agenda-icon { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border-radius:50%; background:#fff0ee; color:var(--red); font-size:20px; }
.home-page .agenda-icon svg { width:20px; height:20px; }
.home-page .agenda-arrow { color:var(--ink); font-size:23px; text-align:center; }
.home-page #don-vi { order:7; background:#faf9f7; }
.home-page .organizer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.home-page .organizer-card { display:flex; align-items:center; gap:20px; min-height:105px; padding:22px 28px; border-radius:5px; background:#fff; }
.home-page .organizer-icon { color:var(--red); font-size:31px; line-height:1; }
.home-page .organizer-icon svg { display:block; width:31px; height:31px; }
.home-page .organizer-card strong,.home-page .organizer-card small { display:block; }
.home-page .organizer-card strong { font-size:13px; }
.home-page .organizer-card small { color:var(--muted); font-size:11px; }
.home-page #cau-hoi { order:8; }
.home-page .faq-list { margin-top:30px; border:1px solid var(--line); border-radius:5px; }
.home-page .faq-list details:last-child { border-bottom:0; }
.home-page .faq-list summary { min-height:64px; padding:16px 22px; font-size:14px; line-height:1.5; }
.home-page .faq-list summary::after { font-size:18px; }
.home-page .faq-list summary::after { content:'⌄'; color:var(--ink); font-size:17px; font-weight:700; }
.home-page .faq-list details[open] summary::after { content:'⌃'; }
.home-page .faq-list details p { margin:0; padding:2px 22px 20px; font-size:13px; }
.home-page .cta-band { order:9; padding:62px 0; background:#fff8f5; color:var(--ink); }
.home-page .cta-band .container { align-items:center; }
.home-page .cta-band strong { font-size:18px; letter-spacing:.02em; }
.home-page .cta-band .button { background:var(--red); border-color:var(--red); color:#fff; }
.home-page .site-footer { padding:26px 0; background:#fff; color:var(--ink); }
.home-page .footer-inline { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.home-page .footer-inline,.home-page .footer-inline a { color:var(--ink); font-size:11px; }
.home-page .footer-inline nav { display:flex; gap:15px; }
@media(max-width:980px){
  .home-page .container { width:min(100% - 56px,1280px); }
  .home-page .header-inner { min-height:60px; }
  .home-page .hero-art { max-width:320px; }
  .home-page .hero { padding:62px 0 72px; }
  .home-page .section { padding:72px 0 80px; }
}
@media(min-width:721px) and (max-width:980px){
  .home-page .menu-toggle { display:none; }
  .home-page .nav { display:flex; position:static; flex-direction:row; align-items:center; gap:13px; padding:0; border:0; background:none; }
  .home-page .nav a { padding:0; font-size:11px; }
  .home-page .school-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media(max-width:720px){
  .home-page .container { width:min(100% - 36px,1280px); }
  .home-page .header-inner { min-height:66px; }
  .home-page .logo-link { flex-basis:205px; }
  .home-page .menu-toggle { display:inline-flex; }
  .home-page .hero { padding:46px 0 58px; }
  .home-page .hero-grid { grid-template-columns:1fr; gap:34px; }
  .home-page h1,.home-page .hero-title { font-size:clamp(31px,8.5vw,43px); }
  .home-page h2 { font-size:25px; }
  .home-page .hero-art { display:block; justify-self:stretch; max-width:none; }
  .home-page .hero-art img { height:280px; object-position:center 70%; }
  .home-page .hero-caption { font-size:10px; }
  .home-page .hero-actions { display:flex; flex-direction:column; align-items:stretch; gap:10px; }
  .home-page .hero-secondary { min-height:40px; text-align:center; align-content:center; }
  .home-page .section { padding:58px 0 66px; }
  .home-page .section-header { margin-bottom:26px; }
  .home-page .event-grid,.home-page .school-grid,.home-page .story-grid,.home-page .organizer-grid { grid-template-columns:1fr; }
  .home-page .event-card { min-height:0; padding:24px 20px; }
  .home-page .school-grid { gap:13px; }
  .home-page .school-card { display:grid; grid-template-columns:120px 1fr; column-gap:12px; padding:6px; }
  .home-page .school-photo { grid-row:span 2; aspect-ratio:1; }
  .home-page .school-card h3 { min-height:0; margin:8px 4px 0; font-size:15px; }
  .home-page .school-links { padding:0 4px 6px; }
  .home-page .school-links a { font-size:11px; }
  .home-page .story-grid { gap:14px; }
  .home-page .story-card { min-height:170px; }
  .home-page .topics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .home-page .topic { min-height:92px; padding:14px; }
  .home-page .topic strong { font-size:11px; }
  .home-page .agenda-grid { grid-template-columns:1fr; gap:6px; }
  .home-page .agenda-arrow { transform:rotate(90deg); line-height:20px; }
  .home-page .organizer-grid { gap:14px; }
  .home-page .cta-band { padding:48px 0; }
  .home-page .cta-band .container,.home-page .footer-inline { flex-direction:column; align-items:stretch; gap:12px; }
  .home-page .cta-band .button { width:100%; }
  .home-page .footer-inline nav { justify-content:flex-start; }
}