/* =====================================================================
   Mẫu 1 – small stylesheet on top of ix.css for every page of site_m1/
   (copied to site_m1/m1.css by theme_m1.py; THEME=m1 node build_static.js).
   Layout fixes made since the Mẫu 1 baseline that used to live only in
   canvas/m5/m5_base.css, in the Mẫu 1 palette, plus the home hero slider.
   ===================================================================== */

/* year ranges never break; balanced headings */
.nw{white-space:nowrap}
h1,h2,h3{text-wrap:balance}
/* capability lists, notices: no empty description line */
main li>span:empty,.notice-note:empty{display:none}

/* tables in archived posts: scroll sideways inside their box, never break words letter by letter */
.table-wrap{-webkit-overflow-scrolling:touch;max-width:100%}
.post-body .table-wrap{overflow-x:auto;margin:10px 0 18px}
.post-body .table-wrap>table{margin:0;width:auto;min-width:100%}
.post-body td,.post-body th{border:1px solid #c9d6ea}
.post-body tr:first-child td{background:#f2f6fc}
.post-body th,.post-body td{overflow-wrap:normal !important;word-break:keep-all !important;hyphens:manual;min-width:6ch}
html:lang(zh) .post-body th,html:lang(zh) .post-body td{word-break:normal !important}
.table-wrap:focus-visible{outline:3px solid #1e6fd9;outline-offset:2px}
.post-body img{border-radius:8px}

/* yearbook / history pages: readable measure (≤ 700 px), contents list sticky beside the text on wide screens */
.yb{max-width:1240px;margin:0 auto;padding:24px 32px 72px;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;box-sizing:border-box}
.yb-toc{border:1px solid #d9e2ef;border-radius:12px;padding:16px 24px;background:#ffffff}
.yb-toc h2{margin:0 0 8px;font-size:16px;line-height:1.4;font-weight:800;color:#0b2a5b}
.yb-toc ul{margin:0;padding:0;list-style:none;font-size:15px;line-height:1.45}
.yb-toc li a{display:block;padding:7px 0;color:#0b3d91;text-decoration:none;border-top:1px solid #e6ecf5}
.yb-toc li:first-child a{border-top:0}
.yb-toc li a:hover{text-decoration:underline}
.yb-body{min-width:0;max-width:700px}
section.yb-body.yb-body{padding:0 !important}
.yb-body p,.yb-body li{max-width:700px}
.yb-body p[style*="font-size: 17px"]{line-height:1.75 !important;margin-top:14px !important}
.yb-body h2{margin-top:48px !important;scroll-margin-top:96px !important}
.yb-body h3{margin-top:28px !important}
.yb-body table{max-width:100%}
@media (min-width:1100px){
  .yb{grid-template-columns:270px minmax(0,700px);justify-content:center;gap:56px}
  .yb-toc{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow:auto}
}
@media (max-width:760px){.yb{padding:16px 16px 56px}}

/* retired lecturers (doi-ngu, en-people …): photo cards; the old site's beige photo frames are cropped away */
.retired-list{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.retired-list>li{flex:0 0 calc((100% - 4 * 16px) / 5);min-width:0}
.retired-list .rt{box-sizing:border-box;height:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 12px;text-align:center;border:1px solid #d9e2ef;border-radius:12px;background:#ffffff;color:#142033;text-decoration:none}
.retired-list a.rt:hover{border-color:#8fa3c2;box-shadow:0 6px 24px rgba(11,42,91,.08)}
.retired-list a.rt:hover .rt-n{color:#1e6fd9}
.rt-ph{display:block;width:104px;height:104px;border-radius:50%;overflow:hidden;background:#eef2f7;flex:none}
.rt-ph img{display:block;width:100% !important;height:100% !important;object-fit:cover;transform:scale(1.14)}
.rt-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.rt-t{font-size:13px;color:#5a6880}
.rt-n{font-size:15px;font-weight:700;line-height:1.35;color:#0b2a5b}
.rt-go{margin-top:4px;font-size:13px;font-weight:700;color:#0b3d91}
@media (max-width:1099px){.retired-list>li{flex-basis:calc((100% - 4 * 16px) / 5)}}
@media (max-width:860px){.retired-list{gap:8px}.retired-list>li{flex-basis:calc((100% - 4 * 8px) / 5)}.retired-list .rt{padding:12px 8px}.rt-ph{width:72px;height:72px}.rt-n{font-size:14px}}
@media (max-width:600px){
  .retired-list{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .retired-list .rt{flex-direction:row;align-items:center;text-align:left;gap:16px;padding:12px 16px}
  .rt-ph{width:64px;height:64px}
}

/* request forms: the request-type list gets the full row, long option names are not cut mid-word */
main fieldset .tn-field:has(select){grid-column:1 / -1}
main .tn-field select{text-overflow:ellipsis;padding-right:32px !important;font-size:15px !important}

@media (max-width:760px){main{overflow-wrap:break-word}}

/* ---------- home hero: rotating bridge / tunnel photos behind the Mẫu 1 text ----------
   The slider (site_m1/slider.{css,js}, from canvas/m5/slider.*) fills the hero; the scrim sits on each photo,
   the text block keeps the Mẫu 1 layout above it; caption top right (where Mẫu 1 had its photo label),
   play/prev/next bottom right. */
.hero-slide{position:relative;isolation:isolate;overflow:hidden;background:#0b2a5b !important}
.hero-slide.hero-img{background-image:none !important}
.hero-slide > .m5-slider{position:absolute;inset:0;aspect-ratio:auto;height:auto}
.hero-slide > :not(.m5-slider){position:relative;z-index:2}
.hero-slide.hero-img > div:not(.m5-slider){background:none !important}
.hero-slide.hero-img .m5-slider__slide::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,27,61,.35) 0%,rgba(8,27,61,0) 22%,rgba(8,27,61,0) 34%,rgba(8,27,61,.55) 55%,rgba(8,27,61,.9) 80%),
    linear-gradient(90deg,rgba(8,27,61,.55) 0%,rgba(8,27,61,.15) 55%,rgba(8,27,61,0) 75%)}
.hero-slide.hero-en .m5-slider__slide::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,42,91,.95) 0%,rgba(11,42,91,.86) 42%,rgba(11,42,91,.5) 68%,rgba(11,42,91,.25) 100%),
    linear-gradient(0deg,rgba(11,42,91,.55),rgba(11,42,91,0) 30%)}
.hero-slide .m5-slider__cap{top:20px;bottom:auto;right:28px;max-width:min(40ch,46%);background:rgba(8,27,61,.6);border-radius:4px}
.hero-slide .m5-slider__controls{z-index:3;right:28px;bottom:20px}
.hero-slide .m5-slider :focus-visible{outline-color:#9cc3ff}
.hero-slide .m5-slider__dot[aria-current="true"]::before{background:#ffffff}
@media (max-width:1199px){
  .hero-slide .m5-slider__dots{display:none}
  .hero-slide .m5-slider__count{display:block}
}
/* EN/FR/ZH hero: room for the controls under the buttons */
.hero-slide.hero-en > div:not(.m5-slider){padding-bottom:96px !important}
@media (max-width:760px){
  /* phones: caption top left, controls top right, the text stays over the photo as in Mẫu 1 */
  .hero-slide .m5-slider__cap{left:16px;right:auto;top:12px;max-width:calc(100% - 200px);text-align:left}
  .hero-slide .m5-slider__cap span{display:none}
  .hero-slide .m5-slider__controls{top:6px;right:8px;bottom:auto;gap:2px}
  .hero-slide .m5-slider__slide::after{content:"";position:absolute;inset:0;height:auto;pointer-events:none;
    background:linear-gradient(180deg,rgba(8,27,61,.6) 0%,rgba(8,27,61,.2) 16%,rgba(8,27,61,.7) 38%,rgba(8,27,61,.92) 60%) !important}
  .hero-slide.hero-en .m5-slider__slide::after{background:linear-gradient(180deg,rgba(11,42,91,.6) 0%,rgba(11,42,91,.86) 16%,rgba(11,42,91,.92) 100%) !important}
  .hero-slide.hero-en > div:not(.m5-slider){padding-top:96px !important;padding-bottom:56px !important}
}

/* breadcrumbs: links underlined, not told apart by colour alone */
main nav:is([aria-label="Vị trí trang"],[aria-label="Breadcrumb"],[aria-label="Fil d'Ariane"],[aria-label="面包屑导航"]) a{text-decoration:underline;text-underline-offset:3px}

/* current staff (15 people) on the home pages and the people pages: always full rows, never a lone card
   desktop 5 × 3, tablet and phone 3 × 5 (cards equal in width and height; the grid sits centred) */
.team-grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important;justify-content:center;align-items:stretch}
@media (max-width:1099px){.team-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
/* home (VI): photo strip — on phones a grid too, not the sideways scroller of ix.css */
.face-strip.team-grid{gap:24px 16px !important}
.face-strip.team-grid>a{min-width:0;padding:12px 6px;border-radius:12px}
.face-strip.team-grid>a:hover{background:#f2f6fc}
.face-strip.team-grid>a img{width:112px !important;height:112px !important}
@media (max-width:600px){
  .face-strip.team-grid{display:grid !important;overflow:visible !important;margin:28px 0 0 !important;padding:0 !important;gap:16px 8px !important}
  .face-strip.team-grid>a{flex:none;padding:4px 2px}
  .face-strip.team-grid>a img{width:84px !important;height:84px !important}
}
/* home (EN/FR/ZH): name cards — stacked (photo above the name) when the columns get narrow */
.team-rows>li{display:flex;min-width:0}
.team-rows>li>a{flex:1 1 auto;min-width:0}
@media (min-width:1100px) and (max-width:1279px){.team-rows>li>a{padding:8px !important;gap:8px !important}}
@media (max-width:600px){
  .team-rows{gap:8px !important}
  .team-rows>li>a{flex-direction:column !important;align-items:center !important;text-align:center;gap:6px !important;padding:10px 4px !important}
  .team-rows>li>a img{width:64px !important;height:64px !important}
  .team-rows>li>a>span{align-items:center;min-width:0;overflow-wrap:anywhere}
  .team-rows>li>a>span>span{font-size:13.5px !important;line-height:1.3}
  .team-rows>li>a>span>span[style*="flex-wrap"]{display:none !important}   /* research chips: on the profile and the people page */
}
/* people pages (doi-ngu, en-people, fr-people, zh-people): portrait cards, photo on top */
.list.team-grid{gap:18px !important}
#people.list.team-grid>.card:not([hidden]){flex-direction:column !important;align-items:center !important;text-align:center;gap:10px !important;padding:16px 12px !important;min-width:0}
.list.team-grid>.card img{width:104px !important;height:128px !important}
.list.team-grid>.card>div{align-items:center;width:100%}
.list.team-grid>.card>div>span{overflow-wrap:anywhere}
.list.team-grid>.card>div>span:first-child{letter-spacing:.5px !important}
.list.team-grid>.card>div>span[style*="flex-wrap"]{justify-content:center}
@media (max-width:600px){
  .list.team-grid{gap:8px !important}
  .list.team-grid>.card:not([hidden]){padding:10px 4px !important;gap:6px !important;border-radius:10px !important}
  .list.team-grid>.card img{width:72px !important;height:90px !important}
  .list.team-grid>.card>div{gap:2px !important}
  .list.team-grid>.card>div>span{font-size:12.5px !important;line-height:1.3 !important}
  .list.team-grid>.card>div>span:nth-child(2){font-size:14px !important}
  .list.team-grid>.card>div>span:first-child{font-size:10.5px !important;letter-spacing:0 !important}
  .list.team-grid>.card>div>span[style*="flex-wrap"]{display:none !important}   /* research chips: still read out (hidden text in the card) */
}

/* "Giáo trình và sách" block on the home pages: three covers on phones */
@media (max-width:600px){.bk-shelf{grid-template-columns:repeat(3,minmax(0,1fr)) !important}.bk-shelf>li:nth-child(n+4){display:none}}

/* ---------- home: featured projects (mosaic) + lab / testing services (navy band) ----------
   Markup from theme_m1.m1_band (facts and wording of the Mẫu 5 home, canvas/m5/home_<lang>.html).
   Captions sit under each photo, so no text covers the structures. */
.m1-wrap{max-width:1240px;margin:0 auto;padding:72px 32px;box-sizing:border-box}
.m1-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between}
.m1-head h2{margin:6px 0 0;font-size:36px;line-height:1.2;font-weight:800;color:#0b2a5b}
.m1-head a.more{font-size:17px;font-weight:700}
.m1-proj .m1-wrap{padding-bottom:8px}
.m1-mosaic{margin:28px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,340px);gap:20px}
.m1-t{min-width:0;min-height:0}
.m1-t > a.m1-tl{display:flex;flex-direction:column;height:100%;border:1px solid #d9e2ef;border-radius:12px;overflow:hidden;background:#ffffff;color:#142033;text-decoration:none}
.m1-t > a.m1-tl:hover{text-decoration:none;border-color:#9cb4d8;box-shadow:0 6px 18px rgba(11,42,91,.12)}
.m1-t > a.m1-tl:hover .m1-tt{text-decoration:underline;text-underline-offset:3px}
.m1-ph{display:block;flex:1 1 auto;min-height:0;position:relative;overflow:hidden;background:#e8eef7}
.m1-mosaic .m1-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.m1-t > a.m1-tl:hover .m1-ph img{transform:scale(1.03)}
.m1-cap{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;padding:14px 18px 16px}
.m1-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.m1-yr{display:inline-block;font-size:13px;font-weight:700;line-height:1.3;padding:2px 8px;border-radius:4px;background:#0b3d91;color:#ffffff;font-variant-numeric:tabular-nums;white-space:nowrap}
.m1-first{display:inline-block;font-size:12.5px;font-weight:700;line-height:1.3;padding:1px 8px;border-radius:999px;border:1px solid #a51c30;color:#a51c30;letter-spacing:.3px}
.m1-tt{margin:2px 0 0;font-size:19px;line-height:1.3;font-weight:800;color:#0b2a5b}
.m1-d{margin:0;font-size:15px;line-height:1.45;color:#45556e}
.m1-t-dak{grid-column:1 / 3;grid-row:1}
.m1-t-dak .m1-tt{font-size:22px}
.m1-t-dak .m1-ph img{object-position:50% 58%}
.m1-t-rm{grid-column:3;grid-row:1 / 3}
.m1-t-pl{grid-column:4;grid-row:1 / 3}
.m1-t-pl .m1-ph img{object-position:72% 50%}
.m1-t-sh{grid-column:1;grid-row:2}
.m1-t-sh .m1-ph img{object-position:58% 50%}
.m1-t-bc{grid-column:2;grid-row:2}

.m1-lab{background:#0b2a5b;color:#ffffff;margin-top:64px}
.m1-lab-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:start}
.m1-lab h2{margin:8px 0 0;font-size:36px;line-height:1.2;font-weight:800;color:#ffffff}
.m1-huge{display:flex;align-items:baseline;gap:16px;margin:20px 0 0;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.18)}
.m1-huge b{font-size:64px;line-height:1;font-weight:800;color:#ffffff;letter-spacing:-1px}
.m1-huge span{font-size:17px;line-height:1.4;color:#dbe7fa;max-width:20ch}
.m1-lab-x{margin:18px 0 0;font-size:17px;line-height:1.65;color:#dbe7fa}
.m1-svc{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.m1-svc li{font-size:15px;font-weight:600;padding:6px 14px;border-radius:999px;border:1px solid #4f8ff0;background:rgba(79,143,240,.14);color:#ffffff}
.m1-ctas{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.m1-ctas a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:8px;font-size:16px;font-weight:700;text-decoration:none;text-align:center}
.m1-ctas .m1-btn{background:#ffffff;color:#0b3d91}
.m1-ctas .m1-btn:hover{background:#e8f0fc;color:#0b3d91;text-decoration:none}
.m1-ctas .m1-btn2{border:2px solid #9cc3ff;color:#ffffff;font-weight:600}
.m1-ctas .m1-btn2:hover{background:rgba(156,195,255,.14);color:#ffffff;text-decoration:none}
.m1-lab a:focus-visible{outline:3px solid #9cc3ff;outline-offset:3px}
.m1-labph{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.m1-labph figure{margin:0;min-width:0}
.m1-labph figure:first-child{grid-column:1 / -1}
.m1-im{display:block;border-radius:8px;overflow:hidden;background:#113466}
.m1-labph img{width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;display:block}
.m1-labph figcaption{margin-top:8px;font-size:14px;line-height:1.45;color:#c9d7ee}
.m1-labph figcaption .m1-yr{margin-right:8px;background:#4f8ff0;color:#081b3d;padding:1px 6px}

@media (max-width:1023px){
  .m1-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:16px}
  .m1-t-dak,.m1-t-rm,.m1-t-pl,.m1-t-sh,.m1-t-bc{grid-column:auto;grid-row:auto}
  .m1-t-dak{grid-column:1 / -1}
  .m1-ph{flex:0 0 auto;aspect-ratio:16 / 9}
  .m1-t-dak .m1-ph{aspect-ratio:16 / 8}
  .m1-t-rm .m1-ph,.m1-t-pl .m1-ph{aspect-ratio:4 / 5}
  .m1-t > a.m1-tl{height:100%}
  .m1-lab-in{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:760px){
  .m1-wrap{padding:48px 0}
  .m1-proj .m1-wrap{padding-bottom:8px}
  .m1-lab{margin-top:48px}
  .m1-head h2,.m1-lab h2{font-size:26px}
  .m1-huge b{font-size:48px}
  .m1-ctas a{flex:1 1 100%}
}
@media (max-width:600px){
  .m1-mosaic{gap:12px}
  .m1-t-sh,.m1-t-bc{grid-column:1 / -1}
  .m1-t-sh .m1-ph,.m1-t-bc .m1-ph{aspect-ratio:2 / 1}
  .m1-t-rm .m1-ph,.m1-t-pl .m1-ph{aspect-ratio:3 / 4}
  .m1-cap{padding:12px 14px 14px}
  .m1-tt{font-size:17px}
  .m1-t-dak .m1-tt{font-size:19px}
  .m1-d{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.m1-ph img{transition:none}.m1-t > a.m1-tl:hover .m1-ph img{transform:none}}
/* Reading text justified on both sides, like Word (class .jt set by m1.js; the last line and lines ending in <br> stay left) */
.jt{text-align:justify;overflow-wrap:anywhere;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto}
.jt :is(td,th,h1,h2,h3,h4,figcaption,.table-wrap),.post-body.jt>:is(p,div):not(.jt){text-align:left;-webkit-hyphens:manual;hyphens:manual}
/* "Các thầy đã công tác tại Bộ môn": small cards, 9 per row (the ones with a biography first, then the others) */
.retired-list.former-list{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.retired-list.former-list>li{min-width:0}
.retired-list.former-list .rt{flex-direction:column;align-items:center;text-align:center;gap:3px;padding:10px 6px}
.retired-list.former-list .rt-ph{width:48px;height:48px;font-size:17px !important}
.retired-list.former-list .rt-t{font-size:11.5px;line-height:1.3}
.retired-list.former-list .rt-n{font-size:13px;line-height:1.3}
.retired-list.former-list .rt-go{display:none}
.retired-list.former-list .rt-plain{background:#fbfcfe}
.retired-list.former-list .rt-note{color:#8a2432}
@media (max-width:1099px){.retired-list.former-list{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:760px){.retired-list.former-list{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- fixes from the visual review (05/11/2026) ---- */
body{font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif}
/* top bar: one row at 1280 px (icons closer together) */
header nav[aria-label="Liên kết nhanh"],header nav[aria-label="Quick links"]{gap:12px !important}
/* phone hero: the caption keeps clear of the slider buttons */
@media (max-width:760px){.hero-slide .m5-slider__cap{max-width:calc(100% - 240px)}}
/* phone: retired staff and former staff cards two per row */
@media (max-width:600px){
  .retired-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .retired-list .rt{flex-direction:column;align-items:center;text-align:center;gap:6px;padding:12px 8px}
}
@media (max-width:480px){.retired-list.former-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* footer: same left edge as the header (ix.css keeps 96 px on the right for the back-to-top button) */
@media (min-width:761px){footer > div:first-child{box-sizing:border-box;max-width:1304px !important}}
footer > div:last-child > div{box-sizing:border-box;max-width:1304px !important}
@media (min-width:761px) and (max-width:1099px){footer > div:first-child{padding-left:24px !important}footer > div:last-child > div{padding-left:24px !important;padding-right:24px !important}}
@media (max-width:760px){footer > div:last-child > div{padding-left:0 !important;padding-right:0 !important}}

/* about page: generations of lecturers (build_legacy.js generations; dialog in m1.js) */
#the-he .gen-row{margin-top:28px}
#the-he .gen-h{margin:0;font-size:22px;font-weight:800;color:#0b3d91}
#the-he .gen-h span{font-weight:600;color:#5a6880}
#the-he .gen-list{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
#the-he .gen-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;height:100%;box-sizing:border-box;padding:16px 10px;border:1px solid #d9e2ef;border-radius:12px;background:#ffffff;color:#142033;text-decoration:none;cursor:pointer}
#the-he .gen-card:hover,#the-he .gen-card:focus-visible{border-color:#0b3d91;box-shadow:0 4px 14px rgba(11,42,91,.12)}
#the-he .gen-card img,#the-he .gen-ini,.gen-dlg .gen-bio-h img,.gen-dlg .gen-ini{flex:none;width:96px;height:96px;border-radius:50%;object-fit:cover;background:#e3e9f2}
#the-he .gen-ini,.gen-dlg .gen-ini{display:flex;align-items:center;justify-content:center;color:#0b2a5b;font-size:28px;font-weight:800}
#the-he .gen-card img,#the-he .gen-card .gen-ini{margin-bottom:6px}
#the-he .gen-t{font-size:13px;color:#5a6880}
#the-he .gen-n{font-size:16px;line-height:1.3;color:#0b2a5b}
#the-he .gen-y{font-size:13px;font-weight:700;color:#e23a4e}
#the-he .gen-d{margin-top:6px;font-size:14px;line-height:1.5;color:#45556e}
#the-he .gen-go{margin-top:auto;padding-top:8px;font-size:14px;font-weight:700;color:#0b3d91}
.gen-dlg{width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:0;border-radius:14px;box-shadow:0 20px 60px rgba(11,42,91,.35);color:#142033}
.gen-dlg::backdrop{background:rgba(11,42,91,.55)}
.gen-dlg-in{padding:28px 28px 24px}
.gen-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:#eef3fa;color:#0b2a5b;font-size:26px;line-height:1;cursor:pointer}
.gen-x:hover,.gen-x:focus-visible{background:#d9e2ef}
.gen-dlg .gen-bio-h{display:flex;gap:18px;align-items:center;padding-right:44px}
.gen-dlg .gen-bio-n{margin:0;font-size:24px;font-weight:800;color:#0b2a5b}
.gen-dlg .gen-bio-y{margin:6px 0 0;font-size:15px;line-height:1.5;color:#5a6880}
.gen-dlg .gen-bio-t p{margin:16px 0 0;font-size:17px;line-height:1.7}
.gen-dlg .gen-bio-go{margin:18px 0 0;font-size:16px;font-weight:700}
@media (max-width:480px){#the-he{padding-left:16px!important;padding-right:16px!important}#the-he .gen-list{grid-template-columns:1fr;gap:10px}#the-he .gen-card img,#the-he .gen-ini{width:76px;height:76px}.gen-dlg-in{padding:22px 18px 18px}.gen-dlg .gen-bio-h{flex-direction:column;align-items:flex-start}.first-vn strong{font-size:20px!important}}
@media (max-width:600px){.gen-dlg .gen-bio-t,.gen-dlg .gen-bio-t p{text-align:left!important}}
/* phones: compact generation cards, photo left, text right */
@media (max-width:600px){
#the-he .gen-list{grid-template-columns:1fr;gap:10px}
#the-he .gen-card{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:start;text-align:left;padding:12px 14px}
#the-he .gen-card>img,#the-he .gen-card>.gen-ini{grid-row:1 / span 6;width:72px;height:72px;margin:0;font-size:22px}
#the-he .gen-card>span:not(.gen-ini),#the-he .gen-card>b{grid-column:2}
#the-he .gen-d{margin-top:4px;font-size:14px}
#the-he .gen-go{padding-top:4px}
#the-he .gen-h{font-size:19px}
}