/* =========================================================
   ULAW — KHOA QUẢN TRỊ — DESIGN SYSTEM (prototype)
   Palette sampled approximately from the reference images — NOT the
   official ULAW brand codes. Replace once the brand guideline is supplied.
     primary       #2D55A8  headlines, main links, active menu, some sections
     primary-deep  #2B6595  info blocks, footer, accent borders, hover
     utility       #1C56AE  top utility bar
     accents       teal #459787/#449798 · purple #97589A · orange #F19E4B (sparingly)
     cta           #D91E36  admissions CTA / urgent labels (red; headings/chevrons use --accent orange)
   Rough visual budget: ~70% white/light, ~25% the two blues, ~5% accents.
   ========================================================= */

:root{
  /* brand */
  --primary:#2D55A8;
  --primary-ink:#1F3F82;      /* darker shade for small text on light bg */
  --primary-deep:#2B6595;
  --primary-deep-ink:#1E4A6F;
  --primary-tint:#E8EEF8;
  --utility:#1A3D8F;          /* deep ULAW blue, clearer than the previous navy */
  /* accents — the six ULAW programme colours (sampled from the reference image) */
  --c-blue:#2D55A8;           /* Đại học chính quy */
  --c-green:#169C83;          /* Đào tạo sau đại học */
  --c-purple:#9B57A0;         /* Văn bằng 2 */
  --c-orange:#F89B38;         /* Vừa làm vừa học */
  --c-deep:#1C5E97;           /* Đào tạo & bồi dưỡng */
  --c-teal:#0E9A9A;           /* Đào tạo từ xa */
  --brand-stripe:linear-gradient(90deg,var(--primary) 0%,var(--c-deep) 100%);  /* single-tone ULAW blue (user request) */
  --teal:#169C83;
  --teal-2:#0E9A9A;
  --teal-ink:#0B6B5A;         /* AA text version of teal/green */
  --teal-tint:#E0F4EF;
  --purple:#9B57A0;
  --purple-ink:#7A3E7F;
  --purple-tint:#F5EAF5;
  --orange:#F89B38;
  --orange-ink:#8F4D0C;       /* AA text version of orange */
  --orange-tint:#FEF1E2;
  --accent:#D91E36;          /* ULAW red: tab titles, section bars, accents (was orange) */
  --accent-deep:#B5162B;
  --ulaw-green:#43937F;      /* ULAW logo outer-ring green: round chevron buttons */
  --ulaw-green-deep:#2C7564;
  --cta-ink:#D91E36;         /* red for small text on light backgrounds */
  --heading-navy:#15264A;
  --cta:#D91E36;
  --cta-hover:#B5162B;
  /* surfaces & text */
  --surface:#FFFFFF;
  --surface-2:#F5F8FC;
  --ink:#182230;
  --ink-soft:#4A5668;
  --line:#D9E2EC;
  --line-strong:#B9C7D8;
  /* states */
  --focus:#1C56AE;
  --hover-bg:#EEF3FA;
  --current:#2D55A8;
  --ok-bg:#E3F4EA;
  --ok-ink:#17613A;
  --warn-bg:#FDF0E2;
  --warn-ink:#7A420A;
  --err-ink:#B01C2E;
  /* layout */
  --radius:14px;
  --radius-sm:8px;
  --container:1280px;
  --header-h:76px;
  --utility-h:40px;
  --gap-section:88px;
  --shadow-sm:0 1px 2px rgba(24,34,48,.06), 0 1px 1px rgba(24,34,48,.04);
  --shadow-md:0 10px 28px rgba(24,34,48,.10);
  --motion:190ms cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

body{
  margin:0;
  font-family:'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:1.0625rem;
  color:var(--ink);
  background:var(--surface);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
[hidden]{display:none !important}

img,svg{max-width:100%}
img{display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:1rem}

/* Focus: always visible for keyboard users, never colour-only */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.section-deep :focus-visible, .site-footer :focus-visible, .utility-bar :focus-visible, .home-hero-copy :focus-visible{outline-color:#fff}

/* Anchored sections clear the sticky header */
[id]{scroll-margin-top:calc(var(--utility-h) + var(--header-h) + 24px)}
/* program pages also have the sticky sub-nav (≈48px) under the header */
#prog-root [id]{scroll-margin-top:calc(var(--utility-h) + var(--header-h) + 72px)}

.container{max-width:var(--container);margin:0 auto;padding:0 16px}
@media(min-width:768px){.container{padding:0 32px}}
@media(min-width:1024px){.container{padding:0 40px}}

.section{padding:56px 0}
@media(min-width:1024px){.section{padding:72px 0}}
@media(min-width:1280px){.section{padding:var(--gap-section) 0}}
.section-soft{background:var(--surface-2)}
.section-deep{background:linear-gradient(135deg,var(--primary-deep-ink),var(--primary-deep) 55%,var(--primary));color:#fff}

.eyebrow{
  display:inline-block;font-size:.8125rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--primary);margin-bottom:12px;
}
.section-deep .eyebrow{color:#D6E2F5}
.eyebrow.c-teal{color:var(--teal-ink)}
.eyebrow.c-purple{color:var(--purple)}
.eyebrow.c-red{color:var(--cta-ink)}

h1,h2,h3,h4{
  font-family:'Plus Jakarta Sans', Inter, sans-serif;
  font-weight:700;line-height:1.18;margin:0 0 16px;color:var(--primary-ink);
}
.section-deep h1,.section-deep h2,.section-deep h3{color:#fff}

h1{font-size:clamp(2.125rem, 1.4rem + 2.6vw, 3.75rem);letter-spacing:-.015em}
h2{font-size:clamp(1.625rem, 1.3rem + 1.2vw, 2.375rem)}
h3{font-size:clamp(1.2rem, 1.1rem + .4vw, 1.5rem)}
h4{font-size:1.0625rem}

p{margin:0 0 16px;color:var(--ink-soft)}
.section-deep p{color:#E3EAF5}

.section-head{max-width:760px;margin-bottom:40px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:32px}
.section-head-row .section-head{margin-bottom:0}

.lede{font-size:1.1875rem;color:var(--ink-soft)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 24px;border-radius:999px;font-weight:700;font-size:1rem;
  border:2px solid transparent;transition:background var(--motion), border-color var(--motion), color var(--motion), box-shadow var(--motion);
  text-align:center;
}
.btn:hover{box-shadow:var(--shadow-sm)}
.btn-primary{background:var(--ulaw-green-deep);color:#fff}  /* ULAW logo green (user request) */
.btn-primary:hover{background:#1F5C4F}
.btn-cta{background:var(--cta);color:#fff}
.btn-cta:hover{background:var(--cta-hover)}
.btn-secondary{background:transparent;border-color:var(--primary);color:var(--primary)}
.btn-secondary:hover{background:var(--primary);color:#fff}
.btn-light{background:#fff;color:var(--primary-ink)}
.btn-light:hover{background:var(--primary-tint)}
.section-deep .btn-secondary, .home-hero-copy .btn-secondary{border-color:#fff;color:#fff}
.section-deep .btn-secondary:hover, .home-hero-copy .btn-secondary:hover{background:#fff;color:var(--primary-ink)}
.btn-ghost{background:transparent;color:var(--primary);padding:8px 4px;border:none;min-height:44px}
.btn-ghost:hover{text-decoration:underline}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}

.link-arrow{color:var(--primary);font-weight:700;display:inline-flex;gap:6px;align-items:center;min-height:44px}
.link-arrow:hover{text-decoration:underline;text-underline-offset:3px}
.section-deep .link-arrow{color:#fff}

/* ---------- Utility bar (tier 1) ---------- */
/* Both navigation tiers stay pinned while scrolling: utility bar at the top, main header right below it */
.utility-bar{position:sticky;top:0;z-index:61;background:var(--utility);color:#fff;font-size:.875rem}
.utility-bar .container{display:flex;align-items:center;justify-content:space-between;height:var(--utility-h);gap:16px}
.utility-home{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.utility-home:hover{text-decoration:underline}
.utility-links{display:none}
@media(min-width:1024px){
  .utility-links{display:flex;align-items:stretch;align-self:stretch}
  .utility-links a{
    display:flex;align-items:center;padding:0 14px;position:relative;
    border-left:1px solid rgba(255,255,255,.22);font-weight:500;
  }
  .utility-links a:last-child{border-right:1px solid rgba(255,255,255,.22)}
  .utility-links a:hover{background:rgba(255,255,255,.12)}
  .utility-links a[aria-current]{background:#fff;color:var(--utility);font-weight:700}
  .utility-links a[aria-current]::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;background:var(--utility)}
}

/* ---------- Main header (tier 2) ---------- */
.site-header{
  position:sticky;top:var(--utility-h);z-index:60;background:#fff;
  border-bottom:1px solid var(--line);transition:box-shadow var(--motion);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);gap:16px;transition:min-height var(--motion)}
.site-header.is-compact{box-shadow:var(--shadow-md)}
.site-header.is-compact .container{min-height:62px}

.brand{display:flex;align-items:center;gap:10px;line-height:1.2;color:var(--primary-ink);flex:none;min-width:0}
.brand-logo{width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-main{font-size:1.0625rem;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.brand-sub{font-size:.75rem;font-weight:600;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}

.main-nav{display:none}
@media(min-width:1280px){.main-nav{display:block}}
.nav-list{display:flex;align-items:center;gap:2px}
.nav-item{position:relative}
.nav-link{
  display:flex;align-items:center;gap:6px;min-height:48px;padding:0 10px;
  font-size:1rem;font-weight:600;color:var(--ink);background:none;border:none;border-radius:var(--radius-sm);
  white-space:nowrap;position:relative;
}
/* Desktop nav (7 items) needs the room: the utility bar already names the university, so drop the logo subtitle */
@media(min-width:1280px){.brand-sub{display:none}}
@media(min-width:1280px) and (max-width:1439px){.nav-link{padding:0 8px}.header-cta{padding:10px 14px}.site-header .container{gap:10px}}
.nav-link:hover{background:var(--hover-bg);color:var(--primary-ink)}
.nav-link::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;border-radius:3px;background:transparent}
.nav-link.is-current{color:var(--primary);font-weight:700}
.nav-link.is-current::after{background:var(--current)}
.nav-item.is-open > .nav-link{background:var(--primary-tint);color:var(--primary-ink)}
.nav-item.is-open > .nav-link::after{background:var(--primary-deep)}
.nav-caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform var(--motion)}
.nav-item.is-open .nav-caret{transform:rotate(-135deg);margin-top:4px}

.header-actions{display:flex;align-items:center;gap:8px;flex:none}
.header-cta{display:none;min-height:44px;padding:10px 18px;font-size:.9375rem}
@media(min-width:640px){.header-cta{display:inline-flex}}
.icon-btn{
  width:44px;height:44px;flex:none;border-radius:999px;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--primary-ink);transition:background var(--motion);
}
.icon-btn:hover{background:var(--hover-bg)}
.hamburger{display:flex}
@media(min-width:1280px){.hamburger{display:none}}

/* Mega menu */
.mega{
  position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);
  width:min(760px, 92vw);background:#fff;border:1px solid var(--line);border-top:3px solid var(--primary);
  border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-md);padding:24px 28px 26px;display:none;z-index:70;
}
.mega-wide{width:min(1040px, 94vw)}
.mega-narrow{width:300px}
.nav-item:last-child .mega{left:auto;right:0;transform:none}
.nav-item .mega-wide{left:50%;transform:translateX(-62%)}
.nav-item.is-open .mega{display:block}
.mega-head{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px}
.mega-title{margin:0;font-weight:800;font-size:1.125rem;color:var(--primary-ink)}
.mega-head .link-arrow{font-size:.9375rem}
.mega-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px 28px}
.mega-col-title{margin:0 0 8px;font-size:.8125rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--primary-deep)}
.mega-col a{display:flex;align-items:center;gap:6px;min-height:40px;padding:6px 8px;border-radius:var(--radius-sm);color:var(--ink);font-size:.975rem}
.mega-col a:hover{background:var(--hover-bg);color:var(--primary-ink)}
.mega-col a[aria-current]{color:var(--primary);font-weight:700;box-shadow:inset 3px 0 0 var(--primary)}
.mega-sub{margin:0 0 4px 12px;border-left:2px solid var(--line);padding-left:6px}
.mega-sub a{font-size:.9rem;min-height:36px;color:var(--ink-soft)}
.mega-col-accent{background:var(--surface-2);border-radius:var(--radius-sm);padding:10px 8px 6px;margin:-10px -8px 0}
.mini-badge{font-size:.6875rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--warn-bg);color:var(--warn-ink);white-space:nowrap}

/* Mobile menu: single-level accordion; inside a group every link shows at once */
.mobile-menu{position:fixed;inset:0;background:#fff;z-index:80;overflow-y:auto;overscroll-behavior:contain}
.mobile-menu .container{padding-top:16px;padding-bottom:32px}
.mobile-menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.mobile-quick{display:flex;align-items:center;min-height:48px;padding:10px 16px;margin-bottom:10px;border-radius:var(--radius-sm);background:var(--utility);color:#fff;font-weight:700}
.mobile-top{display:flex;align-items:center;min-height:56px;padding:0 4px;font-weight:700;font-size:1.0625rem;color:var(--primary-ink);border-bottom:1px solid var(--line)}
.mobile-group{border-bottom:1px solid var(--line)}
.mobile-group summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:56px;
  padding:0 4px;font-weight:700;color:var(--primary-ink);font-size:1.0625rem;cursor:pointer;
}
.mobile-group summary::-webkit-details-marker{display:none}
.mobile-top.is-current, .mobile-group summary.is-current{color:var(--primary);box-shadow:inset 4px 0 0 var(--primary);padding-left:12px}
.mobile-group summary .car{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform var(--motion)}
.mobile-group[open] summary .car{transform:rotate(-135deg)}
.mobile-links{padding:0 4px 16px;display:grid;gap:2px}
.mobile-links a{display:flex;align-items:center;min-height:44px;padding:6px 12px;border-radius:var(--radius-sm);color:var(--ink)}
.mobile-links a:hover{background:var(--hover-bg)}
.mobile-links a[aria-current]{background:var(--primary-tint);color:var(--primary-ink);font-weight:700}
.mobile-links .mobile-all{font-weight:700;color:var(--primary)}
.mobile-cta{margin:24px 0 0}

/* Search overlay */
.search-overlay{
  position:fixed;inset:0;background:rgba(24,34,48,.55);z-index:90;display:flex;
  align-items:flex-start;justify-content:center;padding:6vh 16px;
}
.search-panel{background:#fff;border-radius:var(--radius);width:min(720px,100%);padding:24px;max-height:86vh;overflow:auto}
.search-panel-head{margin-bottom:10px}
.search-dialog-title{margin:0;font-weight:800;font-size:1.25rem;color:var(--primary-ink)}
.search-panel form, .search-field{display:flex;gap:10px;border:2px solid var(--line-strong);border-radius:999px;padding:4px 6px 4px 18px;align-items:center;background:#fff}
.search-panel form:focus-within, .search-field:focus-within{border-color:var(--primary)}
.search-panel input[type=search], .search-field input{flex:1;min-width:0;border:none;font-size:1.0625rem;background:transparent;min-height:44px}
.search-panel input[type=search]:focus-visible, .search-field input:focus-visible{outline:none}
.search-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.tab-chip{min-height:40px;padding:6px 16px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;font-size:.9rem;font-weight:600;color:var(--ink-soft)}
.tab-chip:hover{border-color:var(--primary);color:var(--primary-ink)}
.tab-chip.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
.search-results{display:grid;gap:10px}
.search-result{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.search-result:hover{border-color:var(--primary);background:var(--surface-2)}
.search-result .kind{font-size:.75rem;font-weight:700;color:var(--primary-deep);text-transform:uppercase;letter-spacing:.04em}
.search-result h3{margin:4px 0;font-size:1.0625rem}
.search-result p{margin:0;font-size:.9375rem}
.search-empty{padding:28px 0;text-align:center;color:var(--ink-soft)}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:.875rem;color:var(--ink-soft);padding:14px 16px;display:flex;gap:8px;flex-wrap:wrap}
@media(min-width:768px){.breadcrumb{padding-left:32px;padding-right:32px}}
@media(min-width:1024px){.breadcrumb{padding-left:40px;padding-right:40px}}
.breadcrumb a{color:var(--primary);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(45,85,168,.35)}
.breadcrumb [aria-current]{font-weight:600;color:var(--ink)}

/* ---------- Inner-page hero ---------- */
.hero{padding:40px 0 56px}
@media(min-width:1024px){.hero{padding:56px 0 72px}}
.hero-grid{display:grid;gap:32px;align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.1fr .9fr;gap:56px}}
.hero-visual{
  order:-1;border-radius:var(--radius);overflow:hidden;background:var(--surface-2);position:relative;
  aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);
}
@media(min-width:960px){.hero-visual{order:2}}
.hero-visual svg{width:100%;height:100%;display:block}
.hero-tagline{font-weight:700;color:var(--primary-deep);letter-spacing:.02em;font-size:1.0625rem;margin-bottom:14px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.img-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--ink-soft);text-align:center;padding:20px;height:100%;width:100%;
  background:repeating-linear-gradient(135deg, var(--surface-2) 0 12px, var(--primary-tint) 12px 24px);
}
.img-placeholder small{font-size:.8125rem;max-width:240px}
.img-placeholder .ph-icon{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink-soft);display:flex;align-items:center;justify-content:center;opacity:.6}
.illus-label{
  position:absolute;right:10px;bottom:10px;z-index:2;font-size:.75rem;font-weight:700;
  background:rgba(255,255,255,.94);color:var(--ink);padding:4px 10px;border-radius:999px;box-shadow:var(--shadow-sm);
}

/* ---------- Home hero banner ---------- */
.home-hero{padding:20px 0 0}
@media(min-width:1024px){.home-hero{padding:28px 0 0}}
.home-hero-frame{border-radius:var(--radius);overflow:hidden;background:var(--primary-deep-ink);box-shadow:var(--shadow-md)}
.home-hero-stage{position:relative;display:flex;flex-direction:column}
.home-hero-copy{
  position:relative;z-index:3;color:#fff;padding:32px 20px 28px;
  background:linear-gradient(160deg,var(--primary-deep-ink),var(--primary));
}
.home-hero-copy .eyebrow{color:#D6E2F5}
.home-hero-copy h1{color:#fff;margin-bottom:14px;max-width:14ch}
.home-hero-copy p{color:#E8EEF8;font-size:1.0625rem;max-width:46ch}
.home-hero-copy .hero-ctas{margin-top:20px}
.hb-track{position:relative;aspect-ratio:4/3;background:var(--primary-tint)}
.hb-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 420ms ease}
.hb-slide.is-active{opacity:1;visibility:visible}
@media(prefers-reduced-motion: reduce){.hb-slide{transition:none}}
.hb-media, .hb-media svg, .hb-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:900px){
  .home-hero-stage{display:block;aspect-ratio:16/9;max-height:640px;width:100%}
  .hb-track{position:absolute;inset:0;aspect-ratio:auto}
  .home-hero-copy{
    position:absolute;inset:0 auto 0 0;width:min(58%,640px);display:flex;flex-direction:column;justify-content:center;
    padding:48px 56px;background:linear-gradient(90deg, rgba(20,44,88,.94) 0%, rgba(30,62,120,.86) 62%, rgba(30,62,120,0) 100%);
  }
  .home-hero-copy h1{font-size:clamp(2.75rem, 1.6rem + 2.2vw, 4rem)}
}
.hb-panel{display:flex;flex-direction:column;gap:14px;padding:18px 20px;background:#fff;border-top:4px solid var(--primary-deep)}
@media(min-width:900px){.hb-panel{flex-direction:row;align-items:center;justify-content:space-between;gap:28px;padding:20px 28px}}
.hb-captions{position:relative;flex:1;min-width:0}
.hb-caption{display:none}
.hb-caption.is-active{display:block}
.hb-caption .hb-eyebrow{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink)}
.hb-caption .hb-title{margin:2px 0 4px;font-size:1.25rem;font-weight:800;color:var(--primary-ink);line-height:1.3}
.hb-caption .hb-summary{margin:0 0 6px;font-size:.975rem}
.hb-caption .badge{margin-left:6px;vertical-align:middle}
.hb-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;flex:none}
@media(max-width:899px){.hb-controls .hb-dots{flex:1;justify-content:center}}
.hb-btn{
  width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line-strong);background:#fff;
  color:var(--primary-ink);display:flex;align-items:center;justify-content:center;font-size:1rem;line-height:1;
}
.hb-btn:hover{background:var(--hover-bg)}
.hb-pause{width:auto;padding:0 16px;border-radius:999px;gap:8px;font-weight:700;font-size:.875rem}
.hb-pause[aria-pressed="true"]{background:var(--primary-tint);border-color:var(--primary)}
.hb-dots{display:flex;gap:4px}
.hb-dots button{width:32px;height:44px;border:none;background:none;padding:0;display:flex;align-items:center;justify-content:center}
.hb-dots button::before{content:"";width:10px;height:10px;border-radius:999px;background:var(--line-strong);transition:width var(--motion), background var(--motion)}
.hb-dots button[aria-current="true"]::before{width:24px;background:var(--primary)}

/* ---------- Grids & cards ---------- */
.grid{display:grid;gap:24px}
.grid > *{min-width:0}
.grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}
@media(min-width:640px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-5{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:960px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .grid-5{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1200px){.grid-5{grid-template-columns:repeat(5,1fr)}}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;transition:box-shadow var(--motion), border-color var(--motion);
  display:flex;flex-direction:column;gap:10px;height:100%;
}
a.card:hover, .card.is-link:hover{box-shadow:var(--shadow-md);border-color:var(--line-strong)}
a.card:hover h3{color:var(--primary)}
.card h3{margin-bottom:4px;font-size:1.1875rem}
.card p{margin-bottom:0}
.card .card-kicker{font-size:.75rem;font-weight:800;color:var(--primary-deep);text-transform:uppercase;letter-spacing:.05em}
.card-kicker.c-teal{color:var(--teal-ink)}
.card-kicker.c-purple{color:var(--purple)}
.card-kicker.c-red{color:var(--cta-ink)}
.card .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.tag{font-size:.8125rem;font-weight:600;background:var(--surface-2);color:var(--ink-soft);padding:4px 10px;border-radius:999px;border:1px solid var(--line)}
.card-link{margin-top:auto;font-weight:700;color:var(--primary)}

.quick-card{padding:22px 20px;border-top:4px solid var(--primary)}
.quick-card:nth-child(2){border-top-color:var(--primary-deep)}
.quick-card:nth-child(3){border-top-color:var(--teal)}
.quick-card:nth-child(4){border-top-color:var(--purple)}
.quick-card:nth-child(5){border-top-color:var(--orange)}
.quick-card .qc-who{font-size:.8125rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
.quick-card .qc-title{font-weight:800;color:var(--primary-ink);font-size:1.125rem;margin:0}
.quick-card .qc-desc{font-size:.9375rem;color:var(--ink-soft);margin:0}

/* Program cards */
.program-card{border-left:4px solid var(--primary)}
.program-card[data-prog-group="finance"]{border-left-color:var(--primary-deep)}
.program-card[data-prog-group="digital"]{border-left-color:var(--teal)}
.track-links{display:flex;gap:8px;flex-wrap:wrap}
.track-links > a, .track-links > span{
  display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;border-radius:999px;
  border:1px solid var(--line-strong);font-size:.875rem;font-weight:600;color:var(--primary-ink);background:#fff;
}
.track-links > a:hover{border-color:var(--primary);background:var(--hover-bg)}

/* Business × Law × Technology */
.blt-col{border-top:4px solid var(--primary);padding-top:18px}
.blt-col.law{border-color:var(--primary-deep)}
.blt-col.tech{border-color:var(--teal)}
.blt-col h3{margin-bottom:8px}

/* Journey */
.journey{display:flex;flex-direction:column;gap:0}
@media(min-width:900px){.journey{flex-direction:row;align-items:stretch}}
.journey-step{flex:1;padding:20px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
.journey-step .step-num{font-weight:800;color:var(--primary-deep);font-size:.875rem}
.journey-step h3{font-size:1.0625rem;margin:6px 0}
.journey-step p{margin:0;font-size:.9375rem}
.journey-arrow{display:flex;align-items:center;justify-content:center;color:var(--line-strong);font-weight:700;padding:6px 0}
@media(min-width:900px){.journey-arrow{padding:0 8px}}

/* Faculty card */
.faculty-card{text-align:left}
.faculty-photo{aspect-ratio:4/5;height:auto;border-radius:var(--radius-sm);margin-bottom:14px}
.faculty-card h3{font-size:1rem;margin-bottom:2px}
.faculty-card .role{font-size:.875rem;color:var(--ink-soft)}

/* Empty state */
.empty-state{border:1px dashed var(--line-strong);border-radius:var(--radius);padding:40px 24px;text-align:center;background:var(--surface-2)}
.empty-state .es-icon{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;background:var(--primary-tint);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.empty-state h3{margin-bottom:8px}
.empty-state p{max-width:540px;margin-left:auto;margin-right:auto}
.empty-state .hero-ctas{justify-content:center;margin-top:16px}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;padding:4px 10px;border-radius:999px;line-height:1.4}
.badge-illustrative{background:var(--warn-bg);color:var(--warn-ink)}
.badge-pending{background:var(--primary-tint);color:var(--primary-ink)}
.badge-verified{background:var(--ok-bg);color:var(--ok-ink)}
.badge-public{background:var(--teal-tint);color:var(--teal-ink)}
.badge-student{background:var(--purple-tint);color:#6E3A71}
.badge-cta{background:var(--cta);color:#fff}

/* News & events (home SECTION 9 + listing pages) */
.news-events{display:grid;gap:40px}
@media(min-width:960px){.news-events{grid-template-columns:1fr 1fr;gap:56px}}
.ne-col-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px;border-bottom:2px solid var(--primary);padding-bottom:10px}
.ne-col-head h3{margin:0;font-size:1.25rem}
.news-feature{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.news-feature:hover{box-shadow:var(--shadow-md)}
.news-feature:hover .nf-title{color:var(--primary)}
.nf-media{position:relative;aspect-ratio:3/2;background:var(--primary-tint)}
.nf-media svg, .nf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nf-body{padding:18px 20px 20px;background:#fff}
.news-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:.8125rem;color:var(--ink-soft);margin-bottom:8px}
.news-cat{font-weight:800;color:var(--primary-deep);text-transform:uppercase;letter-spacing:.04em}
.nf-title{font-size:1.25rem;margin:0 0 8px;color:var(--primary-ink);line-height:1.3}
.news-mini-list{display:grid;gap:4px;margin-top:14px}
.news-mini{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:10px;border-radius:var(--radius-sm)}
.news-mini:hover{background:var(--surface-2)}
.news-mini:hover .nm-title{color:var(--primary)}
.nm-thumb{position:relative;aspect-ratio:3/2;border-radius:6px;overflow:hidden;background:var(--primary-tint)}
.nm-thumb svg{position:absolute;inset:0;width:100%;height:100%}
.nm-title{font-weight:700;color:var(--ink);font-size:.975rem;line-height:1.35;margin:2px 0 0}

.event-list{display:grid;gap:12px}
.event-row{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:start;padding:14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
.event-date{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--primary);color:#fff;padding:8px 4px;line-height:1.1}
.event-date .d{font-size:1.625rem;font-weight:800}
.event-date .m{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.event-row h4{margin:0 0 4px;font-size:1.0625rem}
.event-row h4 a:hover{color:var(--primary);text-decoration:underline}
.event-info{font-size:.875rem;color:var(--ink-soft);margin:0}

/* Story / news card (tin-tuc listing) */
.story-card{overflow:hidden}
.story-thumb{position:relative;aspect-ratio:3/2;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:6px;background:var(--primary-tint)}
.story-thumb svg{position:absolute;inset:0;width:100%;height:100%}
.story-card .cat{font-size:.75rem;font-weight:800;color:var(--primary-deep);text-transform:uppercase;letter-spacing:.04em}
.story-card .date{font-size:.8125rem;color:var(--ink-soft)}

/* Filter bar */
.filter-bar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px;align-items:flex-end}
.filter-bar .field{flex:1 1 180px;min-width:0}
.filter-bar .field label{font-size:.8125rem}
.filter-bar select, .filter-bar input{
  width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;color:var(--ink);
}
.result-count{font-size:.9375rem;color:var(--ink-soft);margin:0 0 16px}

/* Học liệu library */
.library-groups{display:grid;gap:16px;margin-bottom:32px}
@media(min-width:768px){.library-groups{grid-template-columns:repeat(3,1fr)}}
.library-group{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:#fff;border-top:4px solid var(--primary)}
.library-group:nth-child(2){border-top-color:var(--primary-deep)}
.library-group:nth-child(3){border-top-color:var(--teal)}
.library-group h3{font-size:1.125rem;margin-bottom:6px}
.library-group p{font-size:.9375rem;margin-bottom:10px}
.resource-list{display:grid;gap:12px}
.resource-card{display:grid;gap:8px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
@media(min-width:768px){.resource-card{grid-template-columns:1fr auto;align-items:center;gap:18px}}
.resource-card h3{font-size:1.0625rem;margin:0}
.resource-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.8125rem;color:var(--ink-soft);margin:0}
.resource-meta b{color:var(--ink);font-weight:600}
.resource-action{font-size:.875rem;font-weight:700;color:var(--ink-soft);display:flex;flex-direction:column;align-items:flex-start;gap:6px}
@media(min-width:768px){.resource-action{align-items:flex-end;text-align:right}}
.notice{border-left:4px solid var(--primary-deep);background:var(--surface-2);padding:16px 20px;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.notice p{margin:0 0 6px}
.notice p:last-child{margin:0}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 4px;font-weight:700;cursor:pointer;color:var(--primary-ink);min-height:44px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .car{flex:none;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform var(--motion);margin-top:6px}
.faq-item[open] summary .car{transform:rotate(-135deg)}
.faq-item .faq-a{padding:0 4px 18px;color:var(--ink-soft)}

/* Anchor sub-nav (program detail) */
.subnav{position:sticky;top:calc(var(--utility-h) + 62px);z-index:40;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto}
.subnav .container{display:flex;gap:4px;white-space:nowrap}
.subnav a{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;font-size:.9375rem;font-weight:600;color:var(--ink-soft);border-bottom:3px solid transparent}
.subnav a:hover{color:var(--primary-ink)}
.subnav a.is-active{color:var(--primary-ink);border-color:var(--primary)}

/* Curriculum groups */
.curr-group{border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 20px;margin-bottom:12px}
.curr-group h4{margin:0 0 6px;color:var(--primary-ink);font-size:1rem}

/* Tracks (Quản trị – Luật: Chính quy / CLC) */
.track-cards{display:grid;gap:20px}
@media(min-width:768px){.track-cards{grid-template-columns:1fr 1fr}}
.track-card{border:1px solid var(--line);border-top:4px solid var(--primary);border-radius:var(--radius);padding:24px;background:#fff}
.track-card.is-pending{border-top-color:var(--orange);background:var(--surface-2)}
.track-card h3{margin-bottom:8px}

/* Form */
.form-grid{display:grid;gap:18px}
@media(min-width:640px){.form-grid.two{grid-template-columns:1fr 1fr}}
.field label{display:block;font-weight:700;font-size:.9375rem;margin-bottom:6px;color:var(--primary-ink)}
.field .req{color:var(--err-ink)}
.field input, .field select, .field textarea{
  width:100%;min-height:46px;padding:11px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;color:var(--ink);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.field [aria-invalid="true"]{border-color:var(--err-ink);border-width:2px}
.field-error{display:block;margin-top:6px;font-size:.875rem;font-weight:600;color:var(--err-ink)}
.field-error:empty{display:none}
.checkbox-row{display:flex;gap:10px;align-items:flex-start}
.checkbox-row input{width:20px;height:20px;min-height:0;margin-top:3px;flex:none}
.checkbox-row label{font-weight:500;color:var(--ink)}
.form-note{font-size:.875rem;color:var(--warn-ink);margin:0 0 18px;padding:12px 14px;background:var(--warn-bg);border-radius:var(--radius-sm);font-weight:600}
.form-success{padding:18px 20px;border-radius:var(--radius-sm);background:var(--ok-bg);color:var(--ok-ink);font-weight:600;margin-top:16px}

/* Footer */
.site-footer{background:var(--primary-deep-ink);color:#E3EAF5;padding:56px 0 28px;border-top:4px solid var(--primary-deep)}
.site-footer p{color:#E3EAF5}
.footer-grid{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:640px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.footer-title{color:#fff;font-size:1rem;margin-bottom:12px}
.site-footer ul li{margin-bottom:4px}
.site-footer ul a{display:inline-flex;align-items:center;min-height:36px}
.site-footer a:hover{text-decoration:underline;color:#fff}
.footer-muted{color:#BFD0E6}
.footer-bottom{border-top:1px solid rgba(255,255,255,.18);margin-top:40px;padding-top:20px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.875rem;color:#BFD0E6}
.footer-brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff;font-size:1.0625rem;margin-bottom:10px}
.footer-brand img{border-radius:50%}

/* Utilities */
.mt-0{margin-top:0}
.text-center{text-align:center}
.max-w{max-width:760px}
.max-w-wide{max-width:920px}
.mx-auto{margin-left:auto;margin-right:auto}
.flex-between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--primary-ink);color:#fff;padding:12px 18px;z-index:100;font-weight:700}
.skip-link:focus{left:12px;top:12px}
.visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}

/* Pending link lists (items without an official target yet) */
.pending-list{display:grid;gap:6px;margin:4px 0 8px}
.pending-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:36px;border-bottom:1px dashed var(--line);font-size:.975rem;color:var(--ink)}
.pending-list li:last-child{border-bottom:none}
a.library-group:hover{box-shadow:var(--shadow-md);border-color:var(--line-strong)}
a.library-group:hover h3{color:var(--primary)}

/* Illustration wrapper from site.js media(): fills its positioned frame */
span[role="img"]{position:absolute;inset:0;display:block}
span[role="img"] > svg{width:100%;height:100%;display:block}
/* Badges keep their natural width inside flex-column cards */
.card > .badge, .empty-state > .badge, .track-card > .badge{align-self:flex-start;width:max-content;max-width:100%}

/* Second block inside a mega menu (e.g. Đào tạo → Sau đại học) */
.mega-section{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.mega-section .mega-head{border-bottom:none;padding-bottom:0;margin-bottom:8px}

/* Second programme block (Sau đại học) inside the home programmes section */
.program-block{margin-top:64px;padding-top:48px;border-top:1px solid var(--line)}

/* ---------- Home: Cuộc sống sinh viên (bento grid) ---------- */
.student-life{display:grid;gap:14px;grid-template-columns:1fr 1fr;grid-auto-rows:170px;
  grid-template-areas:"a a" "a a" "info info" "c d" "c f" "e e" "g g"}
@media(min-width:768px){
  .student-life{grid-template-columns:repeat(3,1fr);grid-auto-rows:190px;
    grid-template-areas:"a a info" "a a c" "d e c" "f e g"}
}
@media(min-width:1100px){
  .student-life{grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:18px;
    grid-template-areas:"a a info c" "a a d c" "e e f g"}
}
.sl-a{grid-area:a}.sl-info{grid-area:info}.sl-c{grid-area:c}.sl-d{grid-area:d}.sl-e{grid-area:e}.sl-f{grid-area:f}.sl-g{grid-area:g}

.sl-tile{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--primary-tint);isolation:isolate;display:block;min-width:0}
.sl-media{position:absolute;inset:0;transition:transform 500ms cubic-bezier(.2,.7,.3,1)}
a.sl-tile:hover .sl-media, a.sl-tile:focus-visible .sl-media{transform:scale(1.06)}
.sl-tile .illus-label{top:10px;bottom:auto;right:10px}
.sl-cap{
  position:absolute;inset:auto 0 0 0;z-index:2;padding:16px 18px 18px;color:#fff;
  background:linear-gradient(to top, rgba(18,38,78,.94) 0%, rgba(18,38,78,.78) 58%, rgba(18,38,78,0) 100%);
}
.sl-cap h3{color:#fff;font-size:1.0625rem;margin:6px 0 2px;line-height:1.3}
.sl-cap p{color:#E3EAF5;font-size:.875rem;margin:0;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sl-a .sl-cap{padding:24px 26px 26px}
.sl-a .sl-cap h3{font-size:1.5rem}
.sl-a .sl-cap p{font-size:.975rem}
.sl-tag{display:inline-block;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);padding:3px 10px;border-radius:999px}
a.sl-tile:hover .sl-cap h3::after, a.sl-tile:focus-visible .sl-cap h3::after{content:" →"}
/* small tiles: keep only title visible */
.sl-d .sl-cap p, .sl-f .sl-cap p, .sl-g .sl-cap p{display:none}
@media(max-width:767px){.sl-c .sl-cap p, .sl-e .sl-cap p{display:none}}

/* info tile */
.sl-info{
  background:radial-gradient(circle at 92% 12%, var(--orange) 0 14px, transparent 15px),
             radial-gradient(circle at 100% 0%, rgba(255,255,255,.12) 0 28%, transparent 29%),
             radial-gradient(circle at 0% 100%, rgba(69,151,135,.55) 0 30%, transparent 31%),
             var(--primary-deep);
  color:#fff;padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;
}
.sl-info-eyebrow{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#D6E2F5}
.sl-info-title{color:#fff;font-weight:800;font-size:1.1875rem;line-height:1.3;margin:0}
.sl-info-link{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
.sl-info-link:hover{text-decoration-thickness:2px}
@media(max-width:767px){
  .sl-tag{font-size:.625rem;padding:2px 8px}
  .sl-tile .illus-label{font-size:.625rem;padding:2px 8px;top:8px;right:8px}
  .sl-cap{padding:12px 14px 14px}
  .sl-cap h3{font-size:.975rem}
}

/* Admissions CTA dropdown (header) */
.cta-dropdown{position:relative;display:none}
@media(min-width:640px){.cta-dropdown{display:block}}
.cta-dropdown .header-cta{display:inline-flex;gap:8px;border:none}
.cta-dropdown.is-open .nav-caret{transform:rotate(-135deg);margin-top:4px}
.cta-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:75;width:300px;background:#fff;border:1px solid var(--line);
  border-top:3px solid var(--cta);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-md);padding:8px}
.cta-menu a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:var(--radius-sm);min-height:44px}
.cta-menu a:hover{background:var(--hover-bg)}
.cta-menu strong{color:var(--primary-ink);font-size:.975rem}
.cta-menu a > span:not(.visually-hidden){font-size:.8125rem;color:var(--ink-soft)}
.cta-menu li + li{border-top:1px solid var(--line)}
/* Mobile menu: two admissions buttons */
.mobile-cta{display:grid;gap:10px}
.mobile-cta-title{margin:0;font-weight:800;color:var(--primary-ink)}

/* =========================================================
   Colour layer — ULAW six-colour system, used as accents on a blue base.
   Colours carry decoration (stripes, borders, dots, tints); text on colour
   always uses the *-ink shade or sits on the deep blues for AA contrast.
   ========================================================= */
/* Signature multicolour stripe */
.site-footer{border-top:none}
.section-head .eyebrow::before{content:"";display:inline-block;width:28px;height:4px;border-radius:4px;margin-right:10px;vertical-align:middle;background:var(--brand-stripe)}

/* Home hero: lively backdrop */
.home-hero-copy{background:
  radial-gradient(circle at 88% 12%, rgba(248,155,56,.9) 0 10px, transparent 11px),
  radial-gradient(circle at 12% 92%, rgba(14,154,154,.55) 0 60px, transparent 61px),
  linear-gradient(160deg,var(--primary-deep-ink),var(--primary))}
@media(min-width:900px){.home-hero-copy{background:linear-gradient(90deg, rgba(20,44,88,.95) 0%, rgba(28,94,151,.88) 62%, rgba(28,94,151,0) 100%)}}
.home-hero-copy .eyebrow{color:#F19E4B;font-size:1.22rem;letter-spacing:.07em}  /* orange of the hero illustration (scenes.js C.o), 1.5× size */
.hb-panel{border-top:4px solid transparent;border-image:var(--brand-stripe) 1}

/* Quick-entry cards: each audience gets a colour, tinted on hover */
.quick-card{border-top-width:5px}
.quick-card:nth-child(1){border-top-color:var(--c-blue)}
.quick-card:nth-child(2){border-top-color:var(--c-green)}
.quick-card:nth-child(3){border-top-color:var(--c-purple)}
.quick-card:nth-child(4){border-top-color:var(--c-orange)}
.quick-card:nth-child(5){border-top-color:var(--c-teal)}
.quick-card:nth-child(1):hover{background:var(--primary-tint)}
.quick-card:nth-child(2):hover{background:var(--teal-tint)}
.quick-card:nth-child(3):hover{background:var(--purple-tint)}
.quick-card:nth-child(4):hover{background:var(--orange-tint)}
.quick-card:nth-child(5):hover{background:#E0F3F3}

/* Programme cards cycle through the six colours */
.program-card{border-left-width:5px;position:relative;overflow:hidden}
.program-card::after{content:"";position:absolute;right:-28px;top:-28px;width:84px;height:84px;border-radius:50%;opacity:.12;background:currentColor;pointer-events:none}
[data-program-cards] > .program-card:nth-child(6n+1){border-left-color:var(--c-blue);color:var(--c-blue)}
[data-program-cards] > .program-card:nth-child(6n+2){border-left-color:var(--c-green);color:var(--c-green)}
[data-program-cards] > .program-card:nth-child(6n+3){border-left-color:var(--c-purple);color:var(--c-purple)}
[data-program-cards] > .program-card:nth-child(6n+4){border-left-color:var(--c-orange);color:var(--c-orange)}
[data-program-cards] > .program-card:nth-child(6n+5){border-left-color:var(--c-deep);color:var(--c-deep)}
[data-program-cards] > .program-card:nth-child(6n+6){border-left-color:var(--c-teal);color:var(--c-teal)}
.program-card > *{color:initial}
.program-card p{color:var(--ink-soft)}
.program-card .card-kicker{color:var(--primary-deep)}
.program-card h3, .program-card h3 a{color:var(--primary-ink)}
.program-card .card-link{color:var(--primary)}
.program-card:hover{box-shadow:var(--shadow-md)}

/* Business × Law × Technology */
.blt-col{border-top-width:6px}
.blt-col{border-color:var(--c-blue)}
.blt-col.law{border-color:var(--c-purple)}
.blt-col.tech{border-color:var(--c-green)}

/* Journey steps: coloured number badges */
.journey-step .step-num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:#fff;font-size:.875rem}
.journey > :nth-child(1) .step-num{background:var(--c-blue)}
.journey > :nth-child(3) .step-num{background:var(--c-deep)}
.journey > :nth-child(5) .step-num{background:var(--purple-ink)}
.journey > :nth-child(7) .step-num{background:var(--teal-ink)}
.journey-arrow{color:var(--c-orange)}

/* Học liệu groups & tracks */
.library-group:nth-child(1){border-top-color:var(--c-blue)}
.library-group:nth-child(2){border-top-color:var(--c-green)}
.library-group:nth-child(3){border-top-color:var(--c-purple)}
.track-card{border-top-width:5px}

/* News & events */
.ne-col-head{border-bottom:3px solid transparent;border-image:var(--brand-stripe) 1}
.event-row:nth-child(4n+1) .event-date{background:var(--c-blue)}
.event-row:nth-child(4n+2) .event-date{background:var(--teal-ink)}
.event-row:nth-child(4n+3) .event-date{background:var(--purple-ink)}
.event-row:nth-child(4n+4) .event-date{background:var(--c-deep)}

/* Cuộc sống sinh viên: coloured tags */
.sl-a .sl-tag{background:var(--c-blue);border-color:var(--c-blue)}
.sl-c .sl-tag{background:var(--teal-ink);border-color:var(--teal-ink)}
.sl-d .sl-tag{background:var(--purple-ink);border-color:var(--purple-ink)}
.sl-e .sl-tag{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.sl-f .sl-tag{background:var(--c-deep);border-color:var(--c-deep)}
.sl-g .sl-tag{background:#0B7373;border-color:#0B7373}

/* Deep CTA band: colour dots for energy */
.section-deep{background:
  radial-gradient(circle at 6% 20%, rgba(248,155,56,.85) 0 8px, transparent 9px),
  radial-gradient(circle at 94% 80%, rgba(155,87,160,.6) 0 70px, transparent 71px),
  radial-gradient(circle at 98% 10%, rgba(14,154,154,.55) 0 36px, transparent 37px),
  linear-gradient(135deg,var(--primary-deep-ink),var(--c-deep) 55%,var(--primary))}
/* Partner cards on the home page */
section[aria-labelledby="partner-title"] .card{border-top:5px solid var(--c-orange)}
section[aria-labelledby="partner-title"] .card:nth-child(2){border-top-color:var(--c-teal)}
section[aria-labelledby="partner-title"] .card:nth-child(3){border-top-color:var(--c-purple)}

/* Programme cards: image first, then text; one soft colour tone per programme (--tone set inline) */
[data-program-cards] > .program-card.has-tone{
  border:1px solid color-mix(in srgb, var(--tone) 22%, var(--line));
  border-top:5px solid var(--tone);
  background:color-mix(in srgb, var(--tone) 4%, #fff);
  padding-top:0;color:inherit;
}
[data-program-cards] > .program-card.has-tone::after{display:none}
.pc-media{position:relative;margin:0 -24px 6px;aspect-ratio:16/9;overflow:hidden;
  background:color-mix(in srgb, var(--tone) 14%, #fff)}
.pc-media span[role="img"] > svg{transition:transform 500ms cubic-bezier(.2,.7,.3,1)}
.program-card.has-tone:hover .pc-media span[role="img"] > svg{transform:scale(1.05)}
.program-card.has-tone .card-kicker{color:color-mix(in srgb, var(--tone) 70%, #111)}
.program-card.has-tone h3 a{color:color-mix(in srgb, var(--tone) 55%, #10203d)}
.program-card.has-tone .card-link{color:color-mix(in srgb, var(--tone) 65%, #10203d)}
.program-card.has-tone .track-links > a{border-color:color-mix(in srgb, var(--tone) 35%, #fff)}

/* Home: long search bar (replaces the quick-entry cards) */
.home-search{max-width:880px;margin:0 auto;text-align:center}
.home-search .section-head{margin-left:auto;margin-right:auto;margin-bottom:24px}
.home-search .section-head .eyebrow::before{display:none}
.home-search-form{position:relative;display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--primary);
  border-radius:999px;padding:6px 6px 6px 22px;box-shadow:var(--shadow-md)}
.home-search-form:focus-within{border-color:var(--primary-ink);box-shadow:0 0 0 4px rgba(45,85,168,.18),var(--shadow-md)}
.home-search-form svg{flex:none;color:var(--primary)}
.home-search-form input{flex:1;min-width:0;border:none;background:transparent;font-size:1.125rem;min-height:52px}
.home-search-form input:focus-visible{outline:none}
.home-search-form .btn{min-height:52px;padding:12px 28px}
@media(max-width:559px){.home-search-form{padding-left:16px}.home-search-form .btn{padding:12px 16px}.home-search-form .btn span{display:none}}
.home-search-suggest{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;text-align:left;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:6px;max-height:360px;overflow:auto}
.home-search-suggest a{display:block;padding:10px 14px;border-radius:var(--radius-sm)}
.home-search-suggest a:hover, .home-search-suggest a:focus-visible{background:var(--hover-bg)}
.home-search-suggest .kind{font-size:.75rem;font-weight:700;color:var(--primary-deep);text-transform:uppercase;letter-spacing:.04em;margin-right:8px}
.home-search-suggest .all{font-weight:700;color:var(--primary);border-top:1px solid var(--line);margin-top:4px}
.home-search-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.home-search-chips span{font-size:.9rem;color:var(--ink-soft);align-self:center}
.home-search-chips a{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border-radius:999px;border:1px solid var(--line-strong);
  background:#fff;font-size:.9rem;font-weight:600;color:var(--primary-ink)}
.home-search-chips a:hover{border-color:var(--primary);background:var(--hover-bg)}

/* ---------- Home: Những cột mốc đáng nhớ (timeline) ---------- */
.milestones-sec{position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(circle at 12% 18%, rgba(14,154,154,.35) 0, transparent 38%),
    radial-gradient(circle at 88% 80%, rgba(155,87,160,.30) 0, transparent 40%),
    linear-gradient(160deg,#0f2447 0%, #173a73 55%, #1c5e97 100%)}
.milestones-sec::before{content:"QT";position:absolute;right:-2vw;top:-6vw;font-size:clamp(12rem,28vw,26rem);font-weight:800;line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.06);pointer-events:none;letter-spacing:-.05em}
.milestones-sec::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:48px 48px;mask-image:linear-gradient(to bottom, #000 30%, transparent)}
.milestones-sec .container{position:relative;z-index:1}
.milestones-sec h2{color:#fff}
.milestones-sec .section-head p{color:#D6E2F5}
.milestones-sec .eyebrow{color:#FFD7A8}

/* ---------- Home: "Bạn đang tìm gì?" search hero ---------- */
.search-hero{position:relative;overflow:hidden;isolation:isolate;padding:88px 0 96px;
  background:
    radial-gradient(rgba(45,85,168,.10) 1.2px, transparent 1.3px) 0 0/22px 22px,
    linear-gradient(180deg,#F4F8FE 0%, #FFFFFF 100%)}
.sh-blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(40px);opacity:.55;animation:sh-float 14s ease-in-out infinite alternate}
.sh-blob-1{width:380px;height:380px;left:-120px;top:-80px;background:#9FD9CE}
.sh-blob-2{width:320px;height:320px;right:-80px;top:40px;background:#D9B8DC;animation-delay:-5s}
.sh-blob-3{width:260px;height:260px;left:45%;bottom:-140px;background:#FBD2A6;animation-delay:-9s}
@keyframes sh-float{from{transform:translate(0,0) scale(1)}to{transform:translate(30px,-24px) scale(1.08)}}
.sh-kicker{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:.8125rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);box-shadow:var(--shadow-sm)}
.sh-pulse{width:8px;height:8px;border-radius:50%;background:var(--c-green);box-shadow:0 0 0 0 rgba(22,156,131,.6);animation:sh-pulse 1.8s infinite}
@keyframes sh-pulse{to{box-shadow:0 0 0 10px rgba(22,156,131,0)}}
.sh-title{margin:18px 0 10px;font-size:clamp(2.1rem,1.4rem + 3vw,3.6rem);letter-spacing:-.02em;color:var(--primary-ink)}
.sh-rotator{display:inline-block;position:relative;padding:0 .12em;
  background:linear-gradient(90deg,var(--c-blue),var(--c-teal),var(--c-purple));-webkit-background-clip:text;background-clip:text;color:transparent}
.sh-rotator::after{content:"";position:absolute;left:.12em;right:.12em;bottom:.02em;height:.12em;border-radius:.1em;
  background:linear-gradient(90deg,var(--c-blue),var(--c-teal),var(--c-purple));opacity:.25}
.sh-word{display:inline-block;transition:transform 320ms cubic-bezier(.2,.7,.3,1), opacity 320ms}
.sh-word.is-out{transform:translateY(-.4em);opacity:0}
.sh-sub{font-size:1.0625rem;margin:0 auto 30px;max-width:560px}
/* gradient-bordered, floating search bar */
.sh-bar{padding:3px;border-radius:999px;background:linear-gradient(90deg,var(--c-blue),var(--c-teal),var(--c-purple),var(--c-orange));
  box-shadow:0 18px 40px rgba(28,94,151,.18)}
.search-hero .home-search-form{border:none;box-shadow:none;padding:8px 8px 8px 24px}
.search-hero .home-search-form:focus-within{box-shadow:none}
.sh-bar:focus-within{box-shadow:0 0 0 5px rgba(45,85,168,.18),0 18px 40px rgba(28,94,151,.22)}
.search-hero .home-search-form input{font-size:1.1875rem;min-height:56px}
.search-hero .home-search-form .btn{min-height:56px;background:linear-gradient(135deg,var(--primary),var(--c-deep))}
/* icon chips */
.search-hero .home-search-chips{margin-top:26px;gap:10px}
.search-hero .home-search-chips a{gap:8px;padding:6px 16px 6px 6px;border-color:color-mix(in srgb, var(--tone) 30%, #fff);
  transition:transform 200ms, box-shadow 200ms, border-color 200ms}
.search-hero .home-search-chips a:hover{transform:translateY(-3px);border-color:var(--tone);box-shadow:0 8px 18px color-mix(in srgb, var(--tone) 25%, transparent);background:#fff}
.chip-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:color-mix(in srgb, var(--tone) 14%, #fff);color:color-mix(in srgb, var(--tone) 80%, #000)}
@media(prefers-reduced-motion: reduce){.sh-blob,.sh-pulse{animation:none}}
.home-search-form .btn svg{color:#fff}
.home-search-form .btn{gap:8px}

/* Key-figure counters inside .milestones-sec */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:900px){.stat-grid{grid-template-columns:repeat(4,1fr);gap:20px}}
.stat-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:26px 22px 22px;border-radius:var(--radius);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform 300ms cubic-bezier(.2,.7,.3,1), background 300ms}
.stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tone)}
.stat-card::after{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--tone) 55%, transparent) 0, transparent 70%);opacity:.6}
.stat-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.12)}
.stat-num{position:relative;z-index:1;font-size:clamp(3.4rem,2.4rem + 3vw,5.4rem);font-weight:800;line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff 30%, color-mix(in srgb, var(--tone) 45%, #fff));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat-pending{color:transparent;background:none;-webkit-text-stroke:1.5px rgba(255,255,255,.45)}
.stat-label{position:relative;z-index:1;font-weight:700;font-size:1.0625rem;color:#fff;line-height:1.3}
.stat-note{position:relative;z-index:1;font-size:.875rem;color:#C9D7EE}
.stat-badge{align-self:flex-start;margin-top:4px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-size:.75rem;font-weight:700}
.stat-card.is-pending{background:rgba(255,255,255,.04);border-style:dashed}
@media(prefers-reduced-motion: reduce){.stat-card:hover{transform:none}}

/* ---------- Home: postgraduate feature (layered visual + content) ---------- */
.pg-feature{position:relative;display:grid;gap:36px;align-items:center;padding:28px;border-radius:calc(var(--radius) + 8px);overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at 0% 0%, rgba(155,87,160,.14) 0, transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(224,138,46,.16) 0, transparent 45%),
    #fff;
  border:1px solid color-mix(in srgb, var(--c-purple) 18%, var(--line));box-shadow:0 24px 60px rgba(28,52,100,.12)}
@media(min-width:960px){.pg-feature{grid-template-columns:1.05fr 1fr;gap:56px;padding:44px 52px}}
.pg-visual{position:relative;padding:22px 22px 30px 8px}
.pg-layer{position:absolute;pointer-events:none}
.pg-layer-back{inset:6% 0 0 12%;border-radius:28px;transform:rotate(4deg);
  background:linear-gradient(135deg,var(--c-purple),var(--c-deep));opacity:.9}
.pg-layer-ring{width:120px;height:120px;left:-24px;bottom:-18px;border-radius:50%;border:14px solid color-mix(in srgb, var(--c-orange) 70%, #fff);opacity:.8}
.pg-frame{position:relative;z-index:1;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:var(--primary-tint);
  border:6px solid #fff;box-shadow:0 22px 44px rgba(20,40,80,.28);transform:rotate(-2deg);transition:transform 500ms cubic-bezier(.2,.7,.3,1)}
.pg-feature:hover .pg-frame{transform:rotate(0deg) scale(1.02)}
.pg-float{position:absolute;z-index:2;display:flex;align-items:center;background:#fff;border-radius:16px;box-shadow:0 14px 30px rgba(20,40,80,.2)}
.pg-float-1{left:-4px;top:4px;flex-direction:column;align-items:flex-start;padding:12px 18px;border-left:5px solid var(--c-purple);animation:pg-bob 5s ease-in-out infinite}
.pg-float-1 strong{font-size:1.125rem;color:var(--purple-ink);line-height:1.1}
.pg-float-1 small{font-size:.8125rem;color:var(--ink-soft)}
.pg-float-2{right:0;bottom:6px;width:58px;height:58px;justify-content:center;border-radius:50%;color:#fff;
  background:linear-gradient(135deg,var(--c-orange),#d9722a);animation:pg-bob 5s ease-in-out -2.5s infinite}
@keyframes pg-bob{50%{transform:translateY(-8px)}}
.pg-body h3{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);margin:8px 0 12px}
.pg-body h3 a{color:var(--primary-ink)}
.pg-body h3 a:hover{color:var(--purple-ink)}
.pg-kicker{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;
  background:var(--purple-tint);color:var(--purple-ink)}
.pg-lede{font-size:1.0625rem}
.pg-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 12px}
.pg-facts li{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.pg-facts span{font-size:.8125rem;color:var(--ink-soft)}
.pg-facts strong{font-size:.9375rem;color:var(--primary-ink)}
.pg-note{font-size:.875rem;margin-bottom:0}
@media(prefers-reduced-motion: reduce){.pg-float-1,.pg-float-2{animation:none}.pg-feature:hover .pg-frame{transform:rotate(-2deg)}}
.pg-frame .illus-label{top:10px;bottom:auto}

/* ---------- Home: faculty mosaic (portrait tiles spelling "QT") ---------- */
.faculty-mosaic-sec{background:
  radial-gradient(circle at 85% 20%, rgba(155,87,160,.12) 0, transparent 40%),
  radial-gradient(circle at 10% 90%, rgba(22,156,131,.12) 0, transparent 40%), var(--surface-2)}
.fm-layout{display:grid;gap:40px;align-items:center}
@media(min-width:1024px){.fm-layout{grid-template-columns:.9fr 1.1fr;gap:64px}}
.fm-copy h2{font-size:clamp(1.9rem,1.3rem + 2vw,2.8rem)}
.fm-quote{position:relative;font-size:1.25rem;font-weight:600;font-style:italic;color:var(--primary-ink);line-height:1.5;
  padding-left:22px;border-left:4px solid var(--c-purple)}
.fm-note{font-size:.8125rem;margin-top:18px}
.fm-stage{position:relative;padding:24px;border-radius:24px;background:#fff;box-shadow:0 24px 60px rgba(28,52,100,.12);border:1px solid var(--line)}
.fm-mosaic{display:grid;grid-template-columns:repeat(14,1fr);gap:6px}
.fm-tile{aspect-ratio:1;border-radius:22%;background:color-mix(in srgb, var(--primary) 4%, #fff)}
.fm-tile.is-face{position:relative;overflow:hidden;border:none;
  background:linear-gradient(160deg, color-mix(in srgb, var(--tone) 70%, #fff), var(--tone));
  box-shadow:0 4px 10px color-mix(in srgb, var(--tone) 30%, transparent);
  opacity:0;transform:scale(.4) rotate(-8deg);transition:opacity 500ms var(--d), transform 600ms cubic-bezier(.2,1.4,.4,1) var(--d)}
/* portrait silhouette: head + shoulders */
.fm-tile.is-face::before{content:"";position:absolute;left:50%;top:22%;width:36%;height:36%;border-radius:50%;transform:translateX(-50%);background:rgba(255,255,255,.92)}
.fm-tile.is-face::after{content:"";position:absolute;left:50%;bottom:-24%;width:76%;height:52%;border-radius:50% 50% 0 0;transform:translateX(-50%);background:rgba(255,255,255,.75)}
.fm-mosaic.is-in .fm-tile.is-face{opacity:1;transform:none}
.fm-tile.is-face:hover{transform:scale(1.25);z-index:2;box-shadow:0 10px 22px color-mix(in srgb, var(--tone) 45%, transparent)}
.fm-caption{display:block;margin-top:16px;text-align:right;font-weight:800;font-size:.875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--primary-ink)}
.fm-caption span{color:var(--ink-soft);font-weight:600;letter-spacing:.08em}
@media(max-width:599px){.fm-stage{padding:14px}.fm-mosaic{gap:3px}}
@media(prefers-reduced-motion: reduce){.fm-tile.is-face{transition:none}.fm-tile.is-face:hover{transform:none}}
/* Admissions dropdown used on in-page CTAs (menu positioned by JS, fixed to viewport) */
.adm-dropdown{position:relative;display:inline-block}
.adm-dropdown > .btn{gap:8px}
.adm-dropdown.is-open .nav-caret{transform:rotate(-135deg);margin-top:4px}
.adm-dropdown .cta-menu{text-align:left;z-index:95}
.stat-badge{position:relative;z-index:1;align-self:flex-start;margin-top:6px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-size:.75rem;font-weight:700}
.stat-num{white-space:nowrap}

/* Utility bar: Alumni dropdown */
.utility-dd{position:relative;display:none}
@media(min-width:1024px){.utility-dd{display:flex;align-self:stretch}}
.utility-dd-toggle{display:flex;align-items:center;gap:8px;padding:0 14px;border:none;border-left:1px solid rgba(255,255,255,.22);
  background:none;color:#fff;font:inherit;font-weight:500;cursor:pointer}
.utility-dd-toggle:hover,.utility-dd.is-open .utility-dd-toggle{background:rgba(255,255,255,.12)}
.utility-dd-toggle[aria-current]{background:#fff;color:var(--utility);font-weight:700}
.utility-dd .nav-caret{width:7px;height:7px}
.utility-dd.is-open .nav-caret{transform:rotate(-135deg);margin-top:4px}
.utility-menu{right:auto;left:0;top:100%;z-index:80;color:var(--ink);font-size:.9375rem}
/* Alumni page */
.al-benefits{display:grid;gap:18px}
@media(min-width:640px){.al-benefits{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.al-benefits{grid-template-columns:repeat(4,1fr)}}
.al-benefit{padding:24px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);border-top:4px solid var(--tone)}
.al-ico{display:inline-flex;width:48px;height:48px;border-radius:14px;align-items:center;justify-content:center;margin-bottom:12px;
  background:color-mix(in srgb, var(--tone) 14%, #fff);color:color-mix(in srgb, var(--tone) 80%, #000)}
.al-benefit h3{font-size:1.125rem;margin-bottom:6px}
.al-benefit p{margin:0;font-size:.9375rem}
.utility-menu{text-align:left}
.utility-dd .utility-dd-toggle[aria-current]{background:#fff;color:var(--utility);font-weight:700}

/* ================= Giới thiệu page ================= */
/* Thông điệp Trưởng Khoa */
.dean-sec{background:linear-gradient(180deg,#fff 0%, var(--surface-2) 100%);overflow:hidden}
.dean-layout{display:grid;gap:48px;align-items:center}
@media(min-width:960px){.dean-layout{grid-template-columns:.85fr 1.15fr;gap:72px}}
.dean-portrait{position:relative;margin:0;padding:24px 28px 40px 0;max-width:460px;justify-self:center;width:100%}
.dean-layer{position:absolute;border-radius:28px;pointer-events:none}
.dean-layer-1{inset:0 0 16px 36px;background:linear-gradient(145deg,var(--c-deep),var(--c-purple));transform:rotate(3deg)}
.dean-layer-2{width:110px;height:110px;right:-10px;top:-14px;border-radius:50%;background:radial-gradient(circle,var(--c-orange) 0 45%,transparent 46%);opacity:.9}
.dean-photo{position:relative;z-index:1;aspect-ratio:4/5;border-radius:24px;overflow:hidden;border:8px solid #fff;box-shadow:0 26px 50px rgba(20,40,80,.25);background:var(--surface-2)}
.dean-photo img{width:100%;height:100%;object-fit:cover}
.dean-tag{position:absolute;z-index:2;left:-6px;bottom:8px;display:flex;flex-direction:column;padding:14px 20px;border-radius:16px;background:#fff;
  border-left:5px solid var(--c-purple);box-shadow:0 14px 30px rgba(20,40,80,.18)}
.dean-tag strong{color:var(--primary-ink)}
.dean-tag span{font-size:.8125rem;color:var(--ink-soft)}
.dean-body{position:relative}
.dean-quote-mark{display:block;height:.55em;margin:4px 0 0 -6px;font-family:Georgia,serif;font-size:9rem;line-height:1;
  background:linear-gradient(135deg,var(--c-purple),var(--c-teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.dean-title{font-size:clamp(1.8rem,1.2rem + 2vw,2.8rem);margin:18px 0 16px}
.dean-pending{font-size:.5em;font-weight:600;color:var(--ink-soft);vertical-align:middle}
.dean-message p{font-size:1.125rem;line-height:1.75;color:var(--ink)}
.dean-sign{display:flex;align-items:center;gap:16px;margin-top:24px}
.dean-sign-line{width:56px;height:3px;border-radius:3px;background:var(--c-purple)}
.dean-sign div{display:flex;flex-direction:column}
.dean-sign strong{color:var(--primary-ink);font-size:1.0625rem}
.dean-sign span{font-size:.875rem;color:var(--ink-soft)}

/* Tầm nhìn – Sứ mệnh: offset panels with oversized outline words */
.vm-sec{overflow:hidden}
.vm-grid{position:relative;display:grid;gap:22px}
@media(min-width:960px){.vm-grid{grid-template-columns:1.1fr 1fr;grid-template-rows:auto auto;gap:0 28px}
  .vm-mission{margin-top:96px}}
.vm-panel{position:relative;overflow:hidden;isolation:isolate;min-height:320px;padding:40px 36px;border-radius:28px;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.vm-vision{background:linear-gradient(150deg,#0f2447 0%, var(--c-deep) 100%)}
.vm-mission{background:linear-gradient(150deg,var(--c-purple) 0%, #6d3c8f 55%, var(--c-deep) 100%)}
.vm-word{position:absolute;z-index:-1;left:-6px;top:-10px;font-size:clamp(4.4rem,3rem + 5vw,8.5rem);font-weight:800;line-height:.9;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.16);white-space:nowrap}
.vm-num{position:absolute;right:28px;top:24px;font-weight:800;font-size:1rem;letter-spacing:.2em;color:rgba(255,255,255,.7)}
.vm-num::after{content:"";display:block;width:40px;height:3px;margin-top:8px;margin-left:auto;background:#FF4D5E;border-radius:3px}
.vm-panel h3{color:#fff;font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);margin:0}
.vm-text{color:#E3EAF5;font-size:1.0625rem;max-width:44ch;margin:0}
.vm-panel .badge{align-self:flex-start;background:rgba(255,255,255,.16);color:#fff}
.vm-motto{grid-column:1/-1;margin-top:28px;text-align:right;font-weight:800;font-size:clamp(1.4rem,1rem + 2vw,2.6rem);letter-spacing:-.02em;color:var(--primary-ink)}
.vm-motto i{font-style:normal;color:var(--cta);padding:0 .15em}

/* Lịch sử hình thành: vertical alternating timeline */
.hx-timeline{position:relative;display:grid;gap:26px;padding-left:34px}
.hx-timeline::before{content:"";position:absolute;left:17px;top:6px;bottom:6px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--c-blue),var(--c-green),var(--c-purple),var(--c-orange),var(--c-deep),var(--c-teal))}
.hx-item{position:relative}
.hx-node{position:absolute;left:-34px;top:14px;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;background:var(--tone);box-shadow:0 0 0 5px #fff, 0 6px 16px color-mix(in srgb, var(--tone) 45%, transparent);transform:translateX(-2px)}
.hx-card{margin-left:22px;padding:20px 22px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);border-top:4px solid var(--tone);
  box-shadow:var(--shadow-sm);transition:transform 250ms, box-shadow 250ms}
.hx-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.hx-year{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;
  background:color-mix(in srgb, var(--tone) 12%, #fff);color:color-mix(in srgb, var(--tone) 75%, #000)}
.hx-card h3{font-size:1.1875rem;margin:10px 0 6px}
.hx-card p{margin:0;font-size:.9375rem}
@media(min-width:900px){
  .hx-timeline{padding-left:0}
  .hx-timeline::before{left:50%;transform:translateX(-50%)}
  .hx-item{width:50%;padding-right:48px}
  .hx-item:nth-child(even){margin-left:50%;padding-right:0;padding-left:48px}
  .hx-item .hx-node{left:auto;right:-19px;transform:none}
  .hx-item:nth-child(even) .hx-node{right:auto;left:-19px}
  .hx-card{margin-left:0}
  .hx-timeline{gap:0}
  .hx-item + .hx-item{margin-top:-40px}
}

/* Cơ cấu tổ chức: tiered chart with connectors */
.org-chart{position:relative;display:grid;gap:44px;padding:36px 20px;border-radius:24px;background:
  radial-gradient(rgba(45,85,168,.08) 1.2px, transparent 1.3px) 0 0/20px 20px, var(--surface-2);border:1px solid var(--line)}
.org-tier{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.org-tier + .org-tier::before{content:"";position:absolute;left:50%;top:-44px;width:2px;height:44px;background:var(--line-strong);transform:translateX(-50%)}
@media(min-width:768px){
  .org-tier-2::after,.org-tier-3::after{content:"";position:absolute;top:-22px;left:18%;right:18%;height:2px;background:var(--line-strong)}
  .org-tier-3::after{left:12%;right:12%}
  .org-tier-2 .org-node::before,.org-tier-3 .org-node::before{content:"";position:absolute;left:50%;top:-22px;width:2px;height:22px;background:var(--line-strong)}
  .org-tier + .org-tier::before{height:22px}
}
.org-node{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:200px;padding:16px 22px;border-radius:16px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.org-node strong{color:var(--primary-ink)}
.org-node span{font-size:.8125rem;color:var(--ink-soft)}
.org-top{min-width:280px;padding:22px 30px;color:#fff;border:none;background:linear-gradient(135deg,var(--primary),var(--c-deep));box-shadow:0 16px 34px rgba(28,94,151,.3)}
.org-top strong{color:#fff;font-size:1.125rem}
.org-top span{color:#D6E2F5}
.org-dept{min-width:180px;border-top:4px solid var(--tone);transition:transform 200ms, box-shadow 200ms}
.org-dept:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
@media(max-width:767px){.org-node{min-width:0;width:100%}}
.hx-timeline{list-style:none;margin:0}
@media(min-width:768px){
  .org-tier-2,.org-tier-3{display:grid;justify-content:center;gap:18px}
  .org-tier-2{grid-template-columns:repeat(2,240px)}
  .org-tier-3{grid-template-columns:repeat(4,210px)}
  .org-tier-2 .org-node,.org-tier-3 .org-node{min-width:0}
  .org-tier-2::after{left:calc(50% - 129px);right:calc(50% - 129px)}
  .org-tier-3::after{left:calc(50% - 342px);right:calc(50% - 342px)}
}
@media(min-width:768px) and (max-width:959px){
  .org-tier-3{grid-template-columns:repeat(2,210px)}
  .org-tier-3::after{left:calc(50% - 114px);right:calc(50% - 114px)}
}

/* ================= Nghiên cứu page ================= */
.pub-top{display:grid;gap:24px}
@media(min-width:1024px){.pub-top{grid-template-columns:1.35fr 1fr}}
.pub-spot{display:grid;height:100%;overflow:hidden;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 20px 44px rgba(28,52,100,.10)}
@media(min-width:640px){.pub-spot{grid-template-columns:1fr 1fr}}
.pub-spot-media{position:relative;min-height:240px;background:var(--purple-tint)}
.pub-spot-body{display:flex;flex-direction:column;gap:8px;padding:26px 26px 24px;position:relative}
.pub-badge{align-self:flex-start;padding:5px 12px;border-radius:999px;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#6b4200;background:linear-gradient(135deg,#FFE3B8,#FBD08F)}
.pub-type{font-size:.8125rem;font-weight:700;color:var(--purple-ink)}
.pub-spot h3{font-size:1.375rem;line-height:1.3;margin:4px 0}
.pub-meta{display:block;font-size:.875rem;color:var(--ink-soft);margin:0}
.pub-spot.is-empty .badge{align-self:flex-start}
.pub-stats{display:flex;flex-direction:column;padding:24px;border-radius:22px;background:#fff;border:1px solid var(--line)}
.pub-stats-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.pub-stats-head h3{font-size:1.125rem;margin:0}
.pub-stats-total{font-size:.875rem;font-weight:700;color:var(--ink-soft)}
.pub-chart{flex:1;min-height:220px;display:flex}
.pub-bars{flex:1;display:grid;grid-template-columns:repeat(8,1fr);gap:8px;align-items:end;border-bottom:1px solid var(--line);padding-top:26px}
.pub-bar-col{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;outline:none}
.pub-bar{width:60%;max-width:26px;min-height:0;border-radius:4px 4px 0 0;background:var(--primary)}
.pub-bar-label{position:absolute;bottom:-34px;font-size:.75rem;font-weight:700;color:var(--ink-soft);display:flex;flex-direction:column;align-items:center;line-height:1.1}
.pub-bar-label small{font-weight:500}
.pub-bar-tip{position:absolute;bottom:calc(100% + 4px);white-space:nowrap;padding:4px 8px;border-radius:6px;background:var(--ink);color:#fff;font-size:.75rem;opacity:0;pointer-events:none;transition:opacity 150ms}
.pub-bar-col:hover .pub-bar-tip,.pub-bar-col:focus-visible .pub-bar-tip{opacity:1}
.pub-bar-col:hover .pub-bar{background:var(--primary-ink)}
.pub-chart-empty{position:relative;flex:1;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:14px;overflow:hidden;background:var(--surface-2)}
.pub-chart-ghost{position:absolute;inset:16px 16px 0;display:grid;grid-template-columns:repeat(8,1fr);gap:8px;align-items:end;opacity:.35}
.pub-chart-ghost span{border-radius:4px 4px 0 0;background:repeating-linear-gradient(45deg,var(--line-strong) 0 4px,transparent 4px 8px)}
.pub-chart-empty p{position:relative;margin:0;padding:14px 18px;border-radius:12px;background:rgba(255,255,255,.92);font-size:.9rem;max-width:260px}
.pub-list-wrap{margin-top:32px}
.pub-list-title{font-size:1.125rem;margin-bottom:12px}
.pub-list{display:grid;gap:10px;list-style:none;padding:0;margin:0}
.pub-list li{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:14px 18px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.pub-q{font-size:.75rem;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--primary-tint);color:var(--primary-ink);white-space:nowrap}
.pub-list-empty{display:grid;grid-template-columns:2fr 1fr 1.4fr .6fr;gap:12px;padding:14px 18px;border-radius:14px;background:#fff;border:1px dashed var(--line-strong)}
.pub-list-empty span{font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.pub-list-empty p{grid-column:1/-1;margin:0;padding-top:10px;border-top:1px dashed var(--line)}
@media(max-width:639px){.pub-list-empty{grid-template-columns:1fr 1fr}.pub-list li{grid-template-columns:1fr}}
/* projects */
.proj-grid{display:grid;gap:18px}
@media(min-width:768px){.proj-grid{grid-template-columns:repeat(3,1fr)}}
.proj-card{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:18px;background:#fff;border:1px solid var(--line);border-left:5px solid var(--c-deep)}
.proj-card:nth-child(3n+2){border-left-color:var(--c-purple)}
.proj-card:nth-child(3n+3){border-left-color:var(--c-green)}
.proj-type{align-self:flex-start;font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--primary-ink)}
.proj-card h3{font-size:1.125rem;margin:0}
.proj-grid.is-empty .proj-card h3{color:var(--ink-soft)}
.proj-card .badge{align-self:flex-start}
/* conferences */
.conf-grid{display:grid;gap:28px}
@media(min-width:960px){.conf-grid{grid-template-columns:1fr 1fr;gap:40px}}
.conf-col-title{display:flex;align-items:center;gap:10px;font-size:1.25rem;padding-bottom:12px;margin-bottom:16px;border-bottom:2px solid var(--line)}
.conf-dot{width:12px;height:12px;border-radius:50%;background:var(--tone)}
.conf-dot.is-live{box-shadow:0 0 0 0 color-mix(in srgb, var(--tone) 60%, transparent);animation:sh-pulse 1.8s infinite}
.conf-list{display:grid;gap:12px;list-style:none;padding:0;margin:0}
.conf-item{padding:18px 20px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.conf-item h4{margin:0 0 4px}
@media(prefers-reduced-motion: reduce){.conf-dot.is-live{animation:none}}
.pub-chart{padding-bottom:38px}

/* ---------- Program pages: curriculum structure (credits per block) ---------- */
.cs-summary{display:grid;gap:20px;align-items:center;padding:22px 24px;margin:8px 0 16px;border-radius:20px;background:#fff;border:1px solid var(--line)}
@media(min-width:768px){.cs-summary{grid-template-columns:auto 1fr;gap:28px}}
.cs-total{display:flex;flex-direction:column;align-items:flex-start}
.cs-total strong{font-size:3rem;line-height:1;font-weight:800;color:var(--primary-ink);font-variant-numeric:tabular-nums}
.cs-total span{font-size:.875rem;color:var(--ink-soft)}
.cs-bar{display:flex;gap:2px;height:22px;border-radius:6px;overflow:hidden;background:#fff}
.cs-seg{display:flex;align-items:center;justify-content:center;background:var(--tone);color:#fff;font-size:.75rem}
.cs-seg:first-child{border-radius:6px 0 0 6px}.cs-seg:last-child{border-radius:0 6px 6px 0}
.cs-bar.is-pending .cs-seg{background:repeating-linear-gradient(45deg,color-mix(in srgb, var(--tone) 35%, #fff) 0 5px,color-mix(in srgb, var(--tone) 18%, #fff) 5px 10px)}
.cs-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:.875rem;color:var(--ink-soft)}
.cs-legend li{display:flex;align-items:center;gap:8px}
.cs-swatch{width:12px;height:12px;border-radius:3px;background:var(--tone)}
.cs-law{display:flex;gap:16px;align-items:center;padding:18px 22px;margin-bottom:20px;border-radius:18px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--c-purple) 10%,#fff),#fff);border:1px solid color-mix(in srgb,var(--c-purple) 25%,var(--line))}
.cs-law-ico{flex:none;width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff;
  background:linear-gradient(135deg,var(--c-purple),var(--c-deep))}
.cs-law strong{font-size:1.375rem;color:var(--purple-ink)}
.cs-law span{color:var(--ink-soft)}
.cs-law small{display:block;margin-top:2px;color:var(--ink-soft);font-size:.875rem}
.cs-law .badge{margin-left:6px;vertical-align:middle}
.cs-blocks{display:grid;gap:16px}
@media(min-width:640px){.cs-blocks{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cs-blocks{grid-template-columns:repeat(4,1fr)}}
.cs-block{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:22px 20px;border-radius:18px;background:#fff;
  border:1px solid color-mix(in srgb, var(--tone) 22%, var(--line));border-top:5px solid var(--tone)}
.cs-step{position:absolute;right:14px;top:10px;font-size:2.4rem;font-weight:800;line-height:1;color:color-mix(in srgb, var(--tone) 14%, #fff)}
.cs-credit{display:flex;align-items:baseline;gap:6px}
.cs-credit strong{font-size:2.2rem;font-weight:800;line-height:1;color:color-mix(in srgb, var(--tone) 75%, #10203d)}
.cs-credit span{font-size:.875rem;color:var(--ink-soft)}
.cs-block h3{font-size:1.0625rem;margin:6px 0 2px}
.cs-block p{margin:0;font-size:.9rem}
.cs-block .badge{align-self:flex-start;margin-top:auto}

/* ---------- Nghiên cứu: Case Studies ("hồ sơ tình huống") — ink navy + single orange accent ---------- */
.cases-sec{position:relative;overflow:hidden;isolation:isolate;color:#E7ECF6;
  background:
    radial-gradient(circle at 90% 10%, rgba(248,155,56,.18) 0, transparent 35%),
    radial-gradient(circle at 5% 95%, rgba(91,141,239,.14) 0, transparent 40%),
    linear-gradient(160deg,#0b1730 0%, #13254a 60%, #0f1d3b 100%)}
.cases-sec::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 34px)}
.cases-bigword{position:absolute;z-index:-1;right:-1vw;top:-2vw;font-size:clamp(9rem,22vw,20rem);font-weight:800;line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:2px rgba(248,155,56,.22);pointer-events:none}
.cases-head{display:grid;gap:28px;margin-bottom:40px}
@media(min-width:960px){.cases-head{grid-template-columns:1.2fr 1fr;align-items:end;gap:56px}}
.cases-kicker{display:inline-block;font-size:.8125rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#F8B56A;
  padding-bottom:10px;border-bottom:3px solid var(--c-orange)}
.cases-sec h2{color:#fff;font-size:clamp(2.2rem,1.4rem + 3vw,3.8rem);line-height:1.05;margin:18px 0 16px;letter-spacing:-.02em}
.cases-sec h2 span{color:var(--c-orange)}
.cases-head p{color:#C9D4EA;font-size:1.0625rem;max-width:52ch;margin:0}
.cases-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;margin:0;padding:0;counter-reset:none}
.cases-steps li{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px 12px 12px;border-top:3px solid rgba(255,255,255,.18);
  font-weight:700;font-size:.95rem;color:#fff}
.cases-steps li:last-child{border-top-color:var(--c-orange)}
.cases-steps li::before{content:"";position:absolute;left:0;top:-7px;width:11px;height:11px;border-radius:50%;background:#13254a;border:3px solid rgba(255,255,255,.4)}
.cases-steps li:last-child::before{border-color:var(--c-orange);background:var(--c-orange)}
.cases-steps b{font-size:.75rem;letter-spacing:.12em;color:#8FA3C8}
.cases-grid{display:grid;gap:26px}
@media(min-width:768px){.cases-grid{grid-template-columns:repeat(3,1fr)}}
/* folder card */
.case-card{position:relative;display:block;padding-top:26px;color:inherit;transition:transform 300ms cubic-bezier(.2,.7,.3,1)}
.case-tab{position:absolute;left:18px;top:0;height:30px;padding:6px 16px 0;border-radius:12px 12px 0 0;font-size:.75rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#0b1730;background:var(--lens)}
.case-paper{position:relative;display:flex;flex-direction:column;gap:10px;min-height:280px;padding:24px 24px 22px;border-radius:0 18px 18px 18px;
  background:linear-gradient(170deg,#fffdf8 0%, #f6f1e6 100%);color:var(--ink);border-top:4px solid var(--lens);
  box-shadow:0 22px 40px rgba(0,0,0,.35)}
.case-paper::after{content:"";position:absolute;right:0;top:0;width:34px;height:34px;border-radius:0 18px 0 12px;
  background:linear-gradient(225deg,#0f1d3b 50%, #e6dfcf 50%)}
.case-card:hover{transform:translateY(-8px) rotate(-.6deg)}
.case-card:nth-child(2):hover{transform:translateY(-8px) rotate(.6deg)}
.case-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.case-no{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8125rem;font-weight:700;letter-spacing:.12em;color:#8a7a5a}
.case-stamp{transform:rotate(-6deg);padding:3px 10px;border:2px solid var(--c-orange);border-radius:6px;font-size:.6875rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#b4600f;margin-right:26px}
.case-paper h3{font-size:1.25rem;color:#10203d;margin:4px 0 0}
.case-org{font-size:.875rem;color:var(--ink-soft);margin:0}
.case-q{display:flex;gap:12px;margin:4px 0 0;font-size:1rem;line-height:1.5;color:#2b3446}
.case-q span{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;
  color:#fff;background:var(--c-orange)}
.case-tags{display:flex;flex-wrap:wrap;gap:6px}
.case-tags span{font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:999px;background:rgba(16,32,61,.07);color:#34405a}
.case-more{margin-top:auto;padding-top:12px;border-top:1px dashed #d8cfbd;font-size:.875rem;font-weight:700;color:#b4600f}
.cases-note{margin:28px 0 0;font-size:.875rem;color:#9FB0CF}
@media(prefers-reduced-motion: reduce){.case-card:hover,.case-card:nth-child(2):hover{transform:none}}

/* ---------- Program pages: learning-method photo collage ---------- */
.lc-sec{position:relative;overflow:hidden;isolation:isolate;background:
  radial-gradient(circle at 85% 30%, rgba(224,138,46,.12) 0, transparent 38%),
  radial-gradient(circle at 60% 90%, rgba(22,156,131,.10) 0, transparent 35%), #fff}
.lc-word{position:absolute;z-index:-1;left:-1vw;bottom:-1.5vw;font-size:clamp(4rem,10vw,9rem);font-weight:800;line-height:.9;letter-spacing:-.04em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:2px rgba(45,85,168,.09);pointer-events:none}
.lc-layout{display:grid;gap:44px;align-items:center}
@media(min-width:1024px){.lc-layout{grid-template-columns:.8fr 1.2fr;gap:56px}}
.lc-copy h2{font-size:clamp(1.9rem,1.3rem + 2vw,2.8rem)}
.lc-copy h2 span{position:relative;white-space:nowrap;color:var(--c-deep)}
.lc-copy h2 span::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:.28em;z-index:-1;border-radius:4px;background:color-mix(in srgb,var(--c-orange) 45%,#fff)}
.lc-methods{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 20px}
.lc-methods li{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:999px;font-size:.875rem;font-weight:700;color:var(--primary-ink);
  background:color-mix(in srgb, var(--tone) 10%, #fff);border:1px solid color-mix(in srgb, var(--tone) 30%, #fff)}
.lc-methods li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tone)}
/* collage */
.lc-collage{position:relative;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,34px);gap:0}
.lc-frame{position:relative;margin:0;transition:transform 400ms cubic-bezier(.2,.7,.3,1)}
.lc-img{position:relative;width:100%;height:100%;overflow:hidden;background:color-mix(in srgb, var(--tone) 14%, #fff)}
.lc-img span[role="img"] > svg, .lc-img img{object-fit:cover}
.lc-frame figcaption{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:#fff;
  font-size:.8125rem;font-weight:800;color:var(--primary-ink);box-shadow:0 8px 20px rgba(20,40,80,.18);white-space:nowrap}
.lc-num{font-size:.6875rem;color:#fff;background:var(--tone);border-radius:999px;padding:2px 7px}
.lc-frame .illus-label{top:10px;bottom:auto;right:10px;font-size:.625rem;padding:2px 8px}
.lc-frame:hover{transform:scale(1.03) rotate(0deg)!important;z-index:5}
/* shapes */
.lc-arch{grid-column:1/7;grid-row:1/9;transform:rotate(-2deg);z-index:2}
.lc-arch .lc-img{border-radius:999px 999px 18px 18px;border:6px solid #fff;box-shadow:0 20px 40px rgba(20,40,80,.2)}
.lc-arch figcaption{left:14px;bottom:-14px}
.lc-polaroid{grid-column:7/13;grid-row:1/7;transform:rotate(4deg);z-index:1;padding:12px 12px 44px;background:#fff;box-shadow:0 18px 36px rgba(20,40,80,.18)}
.lc-polaroid figcaption{left:12px;bottom:8px;box-shadow:none;padding-left:0}
.lc-circle{grid-column:5/10;grid-row:7/13;z-index:3;aspect-ratio:1;align-self:center}
.lc-circle .lc-img{border-radius:50%;border:6px solid #fff;box-shadow:0 20px 40px rgba(20,40,80,.22),0 0 0 3px var(--tone)}
.lc-circle figcaption{left:50%;bottom:-6px;transform:translateX(-50%)}
.lc-tall{grid-column:10/13;grid-row:6/13;transform:rotate(-3deg);z-index:2}
.lc-tall .lc-img{border-radius:18px;border:6px solid #fff;box-shadow:0 18px 36px rgba(20,40,80,.2)}
.lc-tall figcaption{right:-6px;top:-14px;white-space:normal;max-width:150px;line-height:1.2}
.lc-tape{position:absolute;z-index:6;width:92px;height:26px;background:rgba(248,155,56,.55);box-shadow:0 2px 4px rgba(0,0,0,.08)}
.lc-tape-1{left:44%;top:-6px;transform:rotate(-8deg)}
.lc-tape-2{right:6%;top:46%;transform:rotate(18deg);background:rgba(22,156,131,.45)}
.lc-spark{position:absolute;left:2%;bottom:6%;z-index:4;font-size:2.6rem;color:var(--c-orange)}
@media(max-width:639px){
  .lc-collage{grid-template-rows:repeat(12,26px)}
  .lc-frame figcaption{font-size:.6875rem;padding:5px 10px}
  .lc-tall figcaption{max-width:110px}
}
@media(prefers-reduced-motion: reduce){.lc-frame{transition:none}}
/* collage fine-tuning: keep every caption and label visible */
.lc-polaroid figcaption{left:auto;right:12px}
.lc-tall figcaption{top:auto;bottom:-12px;right:-8px}
.lc-tape-2{top:40%;right:3%}
.lc-arch .illus-label{top:auto;bottom:34px;right:22px}
.lc-circle .illus-label{top:16%;right:22%}
.lc-circle{grid-column:4/9}
/* collage geometry v2: less overlap so all four captions stay readable */
.lc-arch{grid-column:1/7;grid-row:1/9}
.lc-arch figcaption{top:18px;bottom:auto;left:-8px}
.lc-polaroid{grid-column:7/13;grid-row:1/7}
.lc-polaroid figcaption{left:12px;right:auto}
.lc-circle{grid-column:4/9;grid-row:8/13}
.lc-tall{grid-column:10/13;grid-row:7/13}
.lc-tape-2{top:52%;right:2%}
.lc-tape-2{top:47%;right:-1%;width:70px}
.lc-tall .illus-label{top:auto;bottom:40px;right:10px}

/* Program pages: the programme name stays pinned in the sticky sub-nav */
.subnav-prog{box-shadow:0 6px 16px rgba(24,34,48,.06)}
.subnav-prog .container{align-items:center}
.subnav-name{display:inline-flex;align-items:center;gap:8px;flex:none;margin-right:10px;padding:6px 14px 6px 10px;border-radius:999px;
  font-weight:800;font-size:.9375rem;color:color-mix(in srgb, var(--tone) 70%, #10203d);
  background:color-mix(in srgb, var(--tone) 10%, #fff);border:1px solid color-mix(in srgb, var(--tone) 30%, #fff)}
.subnav-dot{width:9px;height:9px;border-radius:50%;background:var(--tone)}
.subnav-prog a.is-active{border-color:var(--tone)}

/* ---------- Nghiên cứu: Hội thảo khoa học v2 — bright full-bleed ---------- */
.cf2-sec{position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(rgba(45,85,168,.12) 1.2px, transparent 1.3px) 0 0/24px 24px,
    linear-gradient(120deg,#DCEBFF 0%, #EEF4FF 40%, #FFF1E0 100%)}
.cf2-blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(30px);opacity:.7}
.cf2-blob-1{width:420px;height:420px;right:-120px;top:-140px;background:#FFD2A1}
.cf2-blob-2{width:360px;height:360px;left:-140px;bottom:-160px;background:#B9E6DB}
.cf2-top{display:grid;gap:36px;align-items:center}
@media(min-width:1024px){.cf2-top{grid-template-columns:1.15fr .85fr;gap:56px}}
.cf2-kicker{display:inline-block;padding:6px 14px;border-radius:999px;background:#fff;box-shadow:var(--shadow-sm);
  font-size:.8125rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.cf2-intro h2{font-size:clamp(2rem,1.3rem + 2.6vw,3.3rem);line-height:1.15;margin:18px 0 14px;color:#10203d}
.cf2-intro mark{background:linear-gradient(transparent 58%, #FFC98B 58%);color:inherit;padding:0 .08em}
.cf2-intro mark.alt{background:linear-gradient(transparent 58%, #9FE0D0 58%)}
.cf2-intro > p{font-size:1.0625rem;max-width:56ch;color:#3c4a60}
.cf2-tracks{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cf2-tracks li{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;background:#fff;font-weight:700;font-size:.9375rem;
  color:#10203d;box-shadow:0 6px 16px rgba(28,52,100,.08);border:1px solid color-mix(in srgb, var(--tone) 25%, #fff)}
.cf2-tracks span{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--tone);color:#fff;font-size:.75rem}
/* next conference card */
.cf2-next{position:relative;display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:26px;background:#fff;
  box-shadow:0 26px 50px rgba(28,52,100,.16);border:1px solid #fff}
.cf2-next::before{content:"";position:absolute;inset:-10px -10px auto auto;width:90px;height:90px;border-radius:50%;background:var(--c-orange);opacity:.18;z-index:-1}
.cf2-next-tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#b4600f}
.cf2-next-tag i{width:8px;height:8px;border-radius:50%;background:var(--c-orange);animation:sh-pulse 1.8s infinite;box-shadow:0 0 0 0 rgba(248,155,56,.6)}
.cf2-next-date{display:flex;align-items:baseline;gap:10px}
.cf2-next-date b{font-size:3.4rem;line-height:1;font-weight:800;color:var(--primary);letter-spacing:-.03em}
.cf2-next-date span{font-weight:700;color:var(--ink-soft)}
.cf2-next h3{font-size:1.3rem;margin:0}
.cf2-count{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 8px}
.cf2-count div{display:flex;flex-direction:column;align-items:center;padding:12px 6px;border-radius:14px;background:linear-gradient(160deg,var(--primary),var(--c-deep));color:#fff}
.cf2-count b{font-size:1.8rem;line-height:1;font-variant-numeric:tabular-nums}
.cf2-count span{font-size:.75rem;opacity:.85;margin-top:4px}
.cf2-next.is-empty .cf2-count div{background:repeating-linear-gradient(45deg,#e9eef8 0 6px,#f4f7fc 6px 12px);color:var(--ink-soft)}
.cf2-next .btn{align-self:flex-start}
.cf2-more{display:grid;gap:6px;margin-top:6px;padding-top:10px;border-top:1px dashed var(--line)}
.cf2-more li{display:flex;gap:10px;font-size:.9rem}.cf2-more b{color:var(--primary)}
/* bottom panels */
.cf2-bottom{display:grid;gap:24px;margin-top:40px}
@media(min-width:1024px){.cf2-bottom{grid-template-columns:1.6fr 1fr}}
.cf2-panel{padding:26px;border-radius:24px;background:rgba(255,255,255,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.9)}
.cf2-title{font-size:1.25rem;margin:0 0 16px}
.cf2-cards{display:grid;gap:14px}
@media(min-width:640px){.cf2-cards{grid-template-columns:repeat(3,1fr)}}
.cf2-card{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:16px;background:#fff;border:1px solid var(--line);border-top:5px solid var(--tone)}
.cf2-card h4{margin:0;font-size:1.0625rem}
.cf2-card p{margin:0;font-size:.875rem}
.cf2-card-date{font-size:.75rem;font-weight:800;letter-spacing:.04em;color:color-mix(in srgb, var(--tone) 75%, #000)}
.cf2-cards.is-empty .cf2-card{opacity:.55;border-style:dashed;border-top-style:solid}
.cf2-cards + .event-info{margin:12px 0 0}
.cf2-cfp{position:relative;background:linear-gradient(160deg,#fff 0%, #FFF4E6 100%)}
.cf2-cfp-tag{display:inline-block;margin-bottom:8px;font-size:.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#b4600f}
.cf2-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 14px;padding:0;list-style:none;counter-reset:none}
.cf2-steps li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:.8125rem;font-weight:700;color:#10203d}
.cf2-steps b{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--c-orange);color:#fff}
.cf2-steps li + li b{background:color-mix(in srgb, var(--c-orange) 75%, #fff)}
.cf2-cfp p{font-size:.9375rem}
@media(prefers-reduced-motion: reduce){.cf2-next-tag i{animation:none}}
/* Hội thảo v2: past conferences as a list; bottom panel spans full width (no CFP) */
.cf2-bottom{grid-template-columns:1fr!important}
.cf2-past{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.cf2-past li{display:grid;grid-template-columns:86px 1fr auto;gap:18px;align-items:center;padding:14px 18px;border-radius:16px;background:#fff;
  border:1px solid var(--line);border-left:5px solid var(--tone)}
.cf2-past-date{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 0;border-radius:12px;
  background:color-mix(in srgb, var(--tone) 10%, #fff)}
.cf2-past-date b{font-size:1.25rem;line-height:1.1;color:color-mix(in srgb, var(--tone) 80%, #10203d)}
.cf2-past-date span{font-size:.75rem;font-weight:700;color:var(--ink-soft)}
.cf2-past-body h4{margin:0 0 2px;font-size:1.0625rem}
.cf2-past-body p{margin:0;font-size:.875rem}
.cf2-past.is-empty li{opacity:.5;border-style:dashed;border-left-style:solid}
.cf2-past + .event-info{margin:12px 0 0}
@media(max-width:639px){.cf2-past li{grid-template-columns:70px 1fr}.cf2-past li > a{grid-column:2}}

/* ---------- Đội ngũ: Ban Chủ nhiệm cards (photo · info · intro) ---------- */
.leader-grid{display:grid;gap:24px}
@media(min-width:768px){.leader-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.leader-grid{grid-template-columns:repeat(3,1fr)}}
.leader-card{display:flex;flex-direction:column;overflow:hidden;border-radius:22px;background:#fff;border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(28,52,100,.08);transition:transform 250ms, box-shadow 250ms}
.leader-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(28,52,100,.14)}
.leader-card.is-head{border-color:color-mix(in srgb, var(--tone) 35%, var(--line))}
/* 1 · photo */
.leader-photo{position:relative;aspect-ratio:4/4.2;background:linear-gradient(160deg,color-mix(in srgb, var(--tone) 16%, #fff),color-mix(in srgb, var(--tone) 32%, #fff))}
.leader-photo img{width:100%;height:100%;object-fit:cover}
.leader-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:color-mix(in srgb, var(--tone) 60%, #fff)}
.leader-ph small{font-size:.8125rem;font-weight:700;color:color-mix(in srgb, var(--tone) 70%, #10203d)}
.leader-role{position:absolute;left:16px;bottom:-16px;padding:8px 16px;border-radius:999px;font-size:.8125rem;font-weight:800;letter-spacing:.03em;color:#fff;
  background:var(--tone);box-shadow:0 8px 18px color-mix(in srgb, var(--tone) 40%, transparent)}
/* 2 · info */
.leader-info{padding:30px 22px 14px}
.leader-info h3{font-size:1.25rem;margin:0 0 12px}
.leader-info dl{display:grid;gap:8px;margin:0}
.leader-info dl div{display:grid;grid-template-columns:120px 1fr;gap:10px;font-size:.9rem;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.leader-info dt{color:var(--ink-soft)}
.leader-info dd{margin:0;font-weight:600;color:var(--ink)}
.leader-info .pending{font-weight:600;color:var(--ink-soft);font-style:italic}
/* 3 · intro */
.leader-intro{position:relative;margin:auto 16px 16px;padding:16px 18px 16px 44px;border-radius:14px;background:color-mix(in srgb, var(--tone) 7%, #fff)}
.leader-q{position:absolute;left:12px;top:0;font-family:Georgia,serif;font-size:3rem;line-height:1;color:var(--tone)}
.leader-intro p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--ink)}
.leader-intro p.is-pending{color:var(--ink-soft);font-style:italic}

/* ---------- Đội ngũ: department cards + department page ---------- */
.dept-card{border-top:5px solid var(--tone)}
.dept-card:hover h3{color:var(--tone)}
.dept-ico{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;font-weight:800;font-size:1.25rem;color:#fff;background:var(--tone)}
.dept-card p{font-size:.875rem;margin:0}
.dept-hero{background:linear-gradient(135deg,color-mix(in srgb, var(--tone, #2D55A8) 12%, #fff),#fff)}
.dept-hero h1{color:color-mix(in srgb, var(--tone, #2D55A8) 70%, #10203d)}
.dept-switch{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.dept-switch a{padding:8px 16px;border-radius:999px;font-weight:700;font-size:.9rem;background:#fff;border:1px solid color-mix(in srgb, var(--tone) 30%, #fff);color:var(--primary-ink)}
.dept-switch a:hover{border-color:var(--tone)}
.dept-switch a[aria-current]{background:var(--tone);border-color:var(--tone);color:#fff}
.dept-head-card{display:grid;gap:0;overflow:hidden;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(28,52,100,.10)}
@media(min-width:768px){.dept-head-card{grid-template-columns:300px 1fr}}
.dept-head-photo,.lec-photo{position:relative;aspect-ratio:4/5;background:linear-gradient(160deg,color-mix(in srgb, var(--tone) 14%, #fff),color-mix(in srgb, var(--tone) 30%, #fff))}
.dept-head-photo img,.lec-photo img{width:100%;height:100%;object-fit:cover}
.lec-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:color-mix(in srgb, var(--tone) 55%, #fff)}
.dept-head-info{display:flex;flex-direction:column;gap:10px;padding:30px 32px;justify-content:center}
.dept-head-role{align-self:flex-start;padding:5px 14px;border-radius:999px;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--tone)}
.dept-head-info h3{font-size:1.6rem;margin:4px 0}
.dept-head-info dl{display:grid;gap:8px;margin:0 0 8px}
.dept-head-info dl div{display:grid;grid-template-columns:140px 1fr;gap:10px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.dept-head-info dt{color:var(--ink-soft)}.dept-head-info dd{margin:0;font-weight:600}
.pending{color:var(--ink-soft);font-style:italic;font-weight:600}
.lec-cv{align-self:flex-start}
.lec-cv.is-pending{font-size:.8125rem;font-weight:700;color:var(--ink-soft);padding:6px 12px;border-radius:999px;background:var(--surface-2);border:1px dashed var(--line-strong)}
.lec-grid{display:grid;gap:18px;list-style:none;margin:20px 0 0;padding:0;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.lec-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.lec-grid{grid-template-columns:repeat(4,1fr)}}
.lec-card{display:flex;flex-direction:column;overflow:hidden;border-radius:18px;background:#fff;border:1px solid var(--line);transition:transform 200ms, box-shadow 200ms}
.lec-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.lec-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.lec-body h3{font-size:1.0625rem;margin:0}
.lec-body p{margin:0;font-size:.875rem}
.lec-grid.is-empty .lec-card{opacity:.6}
.lec-grid + .event-info{margin-top:14px}

/* ---------- Đội ngũ: lecturer leisure moments (mixed-size gallery frames) ---------- */
.moments{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;
  grid-template-areas:"a a" "a a" "b c" "d d" "e f"}
@media(min-width:768px){.moments{grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;
  grid-template-areas:"a a b c" "a a d d" "e f d d"}}
@media(min-width:768px){.moments{grid-template-areas:"a a b c" "a a d c" "e f d c"}}
.m-a{grid-area:a}.m-b{grid-area:b}.m-c{grid-area:c}.m-d{grid-area:d}.m-e{grid-area:e}.m-f{grid-area:f}
.moment{position:relative;margin:0;overflow:hidden;border-radius:18px;background:color-mix(in srgb, var(--tone) 12%, #fff)}
.moment img{width:100%;height:100%;object-fit:cover;transition:transform 500ms cubic-bezier(.2,.7,.3,1)}
.moment:hover img{transform:scale(1.06)}
.moment.is-template{border:2px dashed color-mix(in srgb, var(--tone) 35%, #fff);
  background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--tone) 8%, #fff) 0 14px, color-mix(in srgb, var(--tone) 14%, #fff) 14px 28px)}
.moment-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--tone)}
.moment-ph small{font-size:.75rem;font-weight:700;color:color-mix(in srgb, var(--tone) 70%, #10203d)}
.m-a .moment-ph svg{width:64px;height:64px}
.moment figcaption{position:absolute;left:12px;bottom:12px;right:12px;display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 24px);
  padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.95);font-size:.8125rem;font-weight:800;color:#10203d;box-shadow:0 6px 14px rgba(20,40,80,.12)}
.moment figcaption::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--tone)}
.m-a figcaption{font-size:.9375rem;padding:8px 16px}
@media(prefers-reduced-motion: reduce){.moment img{transition:none}}
@media(max-width:767px){.moment-ph small{display:none}.moment-ph{padding-bottom:30px}}

/* ---------- Đội ngũ: guest experts — Case-Studies style: ink navy + single orange accent ---------- */
.experts-sec{position:relative;overflow:hidden;isolation:isolate;color:#E7ECF6;
  background:
    radial-gradient(circle at 88% 12%, rgba(248,155,56,.18) 0, transparent 35%),
    radial-gradient(circle at 6% 92%, rgba(91,141,239,.14) 0, transparent 40%),
    linear-gradient(160deg,#0b1730 0%, #13254a 60%, #0f1d3b 100%)}
.experts-sec::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 34px)}
.ex-bigword{position:absolute;z-index:-1;right:-1vw;top:-2vw;font-size:clamp(7rem,17vw,16rem);font-weight:800;line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:2px rgba(248,155,56,.22);pointer-events:none}
.ex-head{max-width:720px;margin-bottom:36px}
.ex-kicker{display:inline-block;font-size:.8125rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#F8B56A;
  padding-bottom:10px;border-bottom:3px solid var(--c-orange)}
.experts-sec h2{color:#fff;font-size:clamp(2.2rem,1.4rem + 3vw,3.8rem);line-height:1.05;letter-spacing:-.02em;margin:18px 0 16px}
.experts-sec h2 span{color:var(--c-orange)}
.ex-head p{color:#C9D4EA;font-size:1.0625rem;margin:0;max-width:56ch}
.ex-marquee{display:flex;overflow:hidden;padding:10px 0 18px;
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.ex-marquee:focus-visible{outline:3px solid var(--c-orange);outline-offset:-3px}
.ex-marquee{padding-top:18px}
.ex-track{display:flex;flex:none;gap:16px;padding-right:16px;margin:0;list-style:none;animation:ex-scroll var(--ex-dur,36s) linear infinite}
.ex-marquee:hover .ex-track,.ex-marquee:focus-within .ex-track,.ex-marquee:focus .ex-track{animation-play-state:paused}
@keyframes ex-scroll{to{transform:translateX(-100%)}}
.ex-card{position:relative;flex:none;display:flex;align-items:center;gap:14px;width:310px;margin-top:14px;padding:18px 18px 16px;border-radius:0 18px 18px 18px;
  background:linear-gradient(170deg,#fffdf8 0%, #f6f1e6 100%);color:var(--ink);box-shadow:0 18px 34px rgba(0,0,0,.35);border-top:4px solid var(--tone)}
.ex-card::before{content:"";position:absolute;left:0;top:-14px;width:74px;height:14px;border-radius:10px 10px 0 0;background:var(--tone)}
.ex-card::after{content:"";position:absolute;right:0;top:0;width:26px;height:26px;border-radius:0 18px 0 10px;background:linear-gradient(225deg,#0f1d3b 50%, #e6dfcf 50%)}
.ex-photo{flex:none;width:72px;height:72px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;
  color:var(--tone);background:color-mix(in srgb, var(--tone) 12%, #fffdf8);box-shadow:0 0 0 3px #fffdf8,0 0 0 5px var(--c-orange)}
.ex-photo img{width:100%;height:100%;object-fit:cover}
.ex-info{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.ex-title{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.75rem;font-weight:700;letter-spacing:.08em;color:#b4600f}
.ex-name{font-size:1rem;color:#10203d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-pos{font-size:.8125rem;color:var(--ink)}
.ex-org{font-size:.8125rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-track.is-sample .ex-card{opacity:.92}
.ex-track.is-sample .ex-info span,.ex-track.is-sample .ex-name{color:var(--ink-soft);font-style:italic}
.ex-note{margin:10px 0 0;font-size:.875rem;color:#9FB0CF}
@media(prefers-reduced-motion: reduce){
  .ex-marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
  .ex-track{animation:none}
  .ex-track[aria-hidden="true"]{display:none}
}
/* Guest experts: static grid (auto-scroll removed) */
.ex-marquee{overflow:visible;mask-image:none;-webkit-mask-image:none;padding:0}
.ex-track.ex-grid{display:grid;grid-template-columns:1fr;gap:26px 20px;padding:14px 0 0;animation:none}
@media(min-width:640px){.ex-track.ex-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.ex-track.ex-grid{grid-template-columns:repeat(3,1fr)}}
.ex-grid .ex-card{width:auto;margin-top:0;transition:transform 250ms cubic-bezier(.2,.7,.3,1)}
.ex-grid .ex-card:hover{transform:translateY(-6px) rotate(-.4deg)}
.ex-grid .ex-photo{width:84px;height:84px}
@media(prefers-reduced-motion: reduce){.ex-grid .ex-card:hover{transform:none}}
.ex-marquee{display:block}
.ex-track.ex-grid{width:100%;flex:initial;padding-right:0}

/* Guest experts — refined academic card (overrides the folder style) */
@media(min-width:1100px){.ex-track.ex-grid{grid-template-columns:repeat(4,1fr)}}
.ex-grid .ex-card{flex-direction:column;align-items:stretch;gap:0;padding:0;border:none;border-radius:6px;overflow:hidden;
  background:#fff;box-shadow:0 1px 0 rgba(255,255,255,.08),0 16px 36px rgba(0,0,0,.28)}
.ex-grid .ex-card::before,.ex-grid .ex-card::after{display:none}
.ex-grid .ex-card:hover{transform:translateY(-4px)}
.ex-grid .ex-photo{width:100%;height:auto;aspect-ratio:4/5;border-radius:0;box-shadow:none;
  background:linear-gradient(180deg,#eef1f6 0%, #dfe5ee 100%);color:#9aa8bf}
.ex-grid .ex-photo svg{width:56px;height:56px}
.ex-grid .ex-photo img{filter:saturate(.9)}
.ex-grid .ex-info{gap:0;padding:18px 20px 20px;text-align:left}
.ex-grid .ex-title{display:flex;align-items:center;gap:10px;font-family:inherit;font-style:normal;font-size:.6875rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#9a7a45}
.ex-grid .ex-title::after{content:"";flex:1;height:1px;background:#d9c9a8}
.ex-grid .ex-name{margin:8px 0 10px;padding-bottom:10px;border-bottom:1px solid #e6e8ee;font-family:Georgia,'Times New Roman',serif;
  font-size:1.25rem;font-weight:700;font-style:normal;color:#10203d;white-space:normal}
.ex-grid .ex-pos{font-size:.875rem;font-style:normal;color:#2b3446}
.ex-grid .ex-org{margin-top:4px;font-size:.6875rem;font-style:normal;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6b778c;white-space:normal}
.ex-track.is-sample.ex-grid .ex-info span,.ex-track.is-sample.ex-grid .ex-name{font-style:normal;color:#9aa3b3}
.ex-track.is-sample.ex-grid .ex-title{color:#b9a784}
.ex-grid .ex-photo{aspect-ratio:1/1}
/* Mega-menu column headings that are links (e.g. Sinh viên groups) */
.mega-col-title .mega-col-link{display:inline-flex;align-items:center;gap:6px;min-height:0;padding:2px 0;border-radius:4px;
  font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none}
.mega-col-title .mega-col-link span{opacity:0;transform:translateX(-4px);transition:opacity 150ms, transform 150ms}
.mega-col-title .mega-col-link:hover{background:none;color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.mega-col-title .mega-col-link[aria-current]{padding-left:10px}  /* keep the current-page bar off the text */
.mega-col-title .mega-col-link:hover span,.mega-col-title .mega-col-link:focus-visible span{opacity:1;transform:none}
.mega-title .mega-col-link{display:inline-flex;align-items:center;gap:6px;color:inherit;border-radius:4px}
.mega-title .mega-col-link span{opacity:0;transform:translateX(-4px);transition:opacity 150ms, transform 150ms}
.mega-title .mega-col-link:hover{color:var(--primary);text-decoration:underline;text-underline-offset:4px}
.mega-title .mega-col-link:hover span,.mega-title .mega-col-link:focus-visible span{opacity:1;transform:none}

/* Home postgrad block: link tiles + class-photo strip (replaces the pending facts grid) */
.pg-links{display:grid;gap:10px;margin:18px 0 20px}
@media(min-width:560px){.pg-links{grid-template-columns:1fr 1fr}}
.pg-link{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--tone);transition:transform 200ms, box-shadow 200ms, border-color 200ms}
.pg-link:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb, var(--tone) 40%, var(--line))}
.pg-link-ico{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;
  color:var(--tone);background:color-mix(in srgb, var(--tone) 12%, #fff)}
.pg-link-txt{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.pg-link-txt strong{color:#10203d;font-size:.975rem}
.pg-link-txt small{color:var(--ink-soft);font-size:.8125rem}
.pg-link-arrow{margin-left:auto;color:var(--tone);font-weight:800;transition:transform 200ms}
.pg-link:hover .pg-link-arrow{transform:translateX(3px)}
.pg-gallery-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pg-gallery-head strong{color:#10203d}
.pg-gallery-head .link-arrow{min-height:0;font-size:.875rem}
.ths-photos{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.ths-photos{grid-template-columns:repeat(3,1fr)}}
.ths-photos.is-strip{grid-template-columns:repeat(3,1fr);gap:8px}
.ths-photo{position:relative;margin:0;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--purple-tint)}
.ths-photo img{width:100%;height:100%;object-fit:cover}
.ths-photo figcaption{position:absolute;left:8px;bottom:8px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.95);font-size:.75rem;font-weight:700}
.ths-photo.is-template{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--c-purple);
  border:1.5px dashed color-mix(in srgb, var(--c-purple) 35%, #fff);background:repeating-linear-gradient(135deg,#faf5fb 0 10px,#f3eaf5 10px 20px)}
.ths-photo.is-template small{font-size:.6875rem;font-weight:700;color:var(--purple-ink)}

/* ThS QTKD page: links to Phòng Đào tạo SĐH (Thông báo / Tin tức / Sự kiện) */
.sdh-grid{display:grid;gap:18px}
@media(min-width:768px){.sdh-grid{grid-template-columns:repeat(3,1fr)}}
.sdh-card{display:flex;flex-direction:column;gap:8px;padding:26px 24px;border-radius:20px;background:#fff;border:1px solid var(--line);
  border-top:5px solid var(--tone);transition:transform 220ms, box-shadow 220ms}
.sdh-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.sdh-ico{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;margin-bottom:6px;
  color:var(--tone);background:color-mix(in srgb, var(--tone) 12%, #fff)}
.sdh-card h3{font-size:1.3rem;margin:0;color:#10203d}
.sdh-card p{margin:0;font-size:.9375rem}
.sdh-go{margin-top:auto;padding-top:10px;font-weight:700;font-size:.9rem;color:color-mix(in srgb, var(--tone) 80%, #10203d)}
.sdh-card:hover .sdh-go{text-decoration:underline;text-underline-offset:3px}

/* ---------- ThS QTKD page: Thông báo (bold warm board) + Tin tức & Sự kiện posts ---------- */
.notice-sec{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  /* ULAW logo ring green (#43937F sampled from assets/images/logo-ulaw.png) */
  background:radial-gradient(circle at 12% 20%, rgba(190,240,225,.35) 0, transparent 35%),
             radial-gradient(circle at 90% 90%, rgba(5,45,38,.40) 0, transparent 40%),
             linear-gradient(125deg,#357F6D 0%, #2C7564 40%, #1F6B5C 72%, #0F4A40 100%)}
.notice-sec::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.18;pointer-events:none;
  background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.35) 0 2px, transparent 2px 22px)}
.notice-bigword{position:absolute;z-index:-1;left:-1vw;bottom:-2.4vw;font-size:clamp(5rem,13vw,12rem);font-weight:800;line-height:.8;letter-spacing:-.04em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.22);pointer-events:none}
.notice-layout{display:grid;gap:32px;align-items:start}
@media(min-width:960px){.notice-layout{grid-template-columns:.8fr 1.2fr;gap:56px}}
.notice-bell{display:inline-flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:20px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.4);transform-origin:50% 10%;animation:bell-ring 3.2s ease-in-out infinite}
@keyframes bell-ring{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(14deg)}88%{transform:rotate(-12deg)}92%{transform:rotate(8deg)}96%{transform:rotate(-4deg)}}
.notice-kicker{display:block;margin-top:18px;font-size:.8125rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#D6F3EA}
.notice-sec h2{color:#fff;font-size:clamp(2.4rem,1.6rem + 3vw,4rem);line-height:1;margin:8px 0 12px;letter-spacing:-.02em}
.notice-head p{color:#E6F6F0;font-size:1.0625rem;margin:0 0 22px}
.notice-head .btn-light{color:#1F6B5C}
.notice-board{padding:10px;border-radius:24px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.notice-list{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.notice-list a,.notice-list li > div{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:16px;background:#fff;color:#10203d;
  box-shadow:0 8px 20px rgba(10,60,50,.18);transition:transform 200ms}
.notice-list a:hover{transform:translateX(6px)}
.notice-date{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:58px;height:58px;border-radius:14px;
  font-size:.6875rem;font-weight:800;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#43937F,#1F6B5C)}
.notice-date b{font-size:1.4rem;line-height:1}
.notice-txt{display:flex;flex-direction:column;min-width:0}
.notice-txt small{font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#1F6B5C}
.notice-txt strong{font-size:1rem;line-height:1.35}
.notice-new{flex:none;margin-left:auto;padding:3px 10px;border-radius:999px;font-size:.6875rem;font-weight:800;text-transform:uppercase;color:#fff;background:#1F6B5C}
.notice-arrow{flex:none;margin-left:auto;font-weight:800;color:#1F6B5C}
.notice-new + .notice-arrow{margin-left:8px}
.notice-list.is-empty li > div{opacity:.55}
.notice-empty{margin:12px 6px 4px;font-size:.9rem;color:#EAF7F2}
/* posts */
.ths-ext{display:flex;flex-wrap:wrap;gap:10px}
.ths-ext a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;font-weight:700;font-size:.9rem;
  background:#fff;border:1px solid var(--line-strong);color:var(--primary-ink)}
.ths-ext a:hover{border-color:var(--primary)}
.ths-filter{display:flex;gap:8px;margin:-8px 0 20px}
.ths-posts{display:grid;gap:18px}
@media(min-width:768px){.ths-posts{grid-template-columns:repeat(3,1fr)}.post-card.is-feature{grid-column:span 2;grid-row:span 2}}
.post-card{display:flex;flex-direction:column;overflow:hidden;border-radius:18px;background:#fff;border:1px solid var(--line);transition:transform 220ms, box-shadow 220ms}
a.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.post-media{position:relative;aspect-ratio:3/2;background:var(--primary-tint)}
.post-card.is-feature .post-media{aspect-ratio:16/10}
.post-media img{width:100%;height:100%;object-fit:cover}
.post-type{position:absolute;left:12px;top:12px;z-index:2;padding:4px 12px;border-radius:999px;font-size:.75rem;font-weight:800;color:#fff;background:var(--primary)}
.post-type.is-event{background:#E08A2E}
.post-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.post-date{font-size:.8125rem;font-weight:700;color:var(--ink-soft)}
.post-body h3{font-size:1.125rem;margin:0}
.post-card.is-feature .post-body h3{font-size:1.5rem}
.post-body p{margin:0;font-size:.9375rem}
.post-card.is-template{opacity:.6;border-style:dashed}
.post-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:.75rem;font-weight:700;color:var(--primary-ink);
  background:repeating-linear-gradient(135deg,#eef3fb 0 12px,#e4ecf8 12px 24px)}
.ths-posts-note{grid-column:1/-1;margin:0}
@media(prefers-reduced-motion: reduce){.notice-bell{animation:none}.notice-list a:hover{transform:none}}

/* =========================================================
   Sinh viên hub + sub-pages (sinh-vien/*.html)
   Each page sets --tone (decoration), --tone-deep (white-text bg, AA) and --tone-tint.
   ========================================================= */
.tone-blue{--tone:#2D55A8;--tone-deep:#1F3F82;--tone-ink:#1F3F82;--tone-tint:#E8EEF8}
.tone-orange{--tone:#F89B38;--tone-deep:#9A4A08;--tone-ink:#8F4D0C;--tone-tint:#FEF1E2}
.tone-green{--tone:#169C83;--tone-deep:#0B6B5A;--tone-ink:#0B6B5A;--tone-tint:#E0F4EF}
.tone-purple{--tone:#9B57A0;--tone-deep:#6E3A71;--tone-ink:#7A3E7F;--tone-tint:#F5EAF5}

.sv-hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding:48px 0 40px;
  background:radial-gradient(120% 90% at 100% 0%,var(--tone) 0%,transparent 55%),linear-gradient(135deg,var(--tone-deep) 0%,#10203d 120%)}
.sv-hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.12;pointer-events:none;
  background-image:radial-gradient(#fff 1px,transparent 1.4px);background-size:22px 22px}
.sv-hero .hero-grid{align-items:center}
.sv-hero .eyebrow{color:#fff;opacity:.9}
.sv-hero h1{color:#fff;font-size:clamp(2.2rem,1.4rem + 3vw,3.75rem);line-height:1.04;letter-spacing:-.02em;margin:8px 0 14px}
.sv-hero .lede{color:rgba(255,255,255,.9);max-width:44ch}
.sv-hero .hero-visual{border:0;background:rgba(255,255,255,.1);border-radius:28px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);transform:rotate(1.5deg)}
.sv-hero .btn-secondary{border-color:#fff;color:#fff}
.sv-hero .btn-secondary:hover{background:#fff;color:var(--tone-ink)}
.sv-hero .btn-light{color:var(--tone-ink)}
.sv-num{position:absolute;right:-1vw;bottom:-3vw;z-index:-1;font-size:clamp(8rem,22vw,20rem);font-weight:800;line-height:.8;letter-spacing:-.06em;color:rgba(255,255,255,.07);pointer-events:none}
.sv-jump{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px;padding:0;list-style:none}
.sv-jump a{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border-radius:999px;font-size:.875rem;font-weight:700;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);transition:background var(--motion)}
.sv-jump a:hover{background:rgba(255,255,255,.26)}
.sv-hero :focus-visible{outline:3px solid #fff;outline-offset:3px}

.sv-kicker{color:var(--tone-ink)}
.section-head .sv-kicker{display:inline-block}

/* Hub: four big tiles */
.sv-hub{display:grid;gap:18px}
@media(min-width:768px){.sv-hub{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.sv-hub{grid-template-columns:1.25fr 1fr 1fr;grid-auto-rows:minmax(250px,auto)}.sv-hub > :first-child{grid-row:span 2}.sv-hub > :last-child{grid-column:span 2}}
.hub-tile{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:24px;color:#fff;
  background:linear-gradient(150deg,var(--tone-deep),#10203d 140%);transition:transform 240ms, box-shadow 240ms;min-height:250px}
.hub-tile:hover{transform:translateY(-4px);box-shadow:0 24px 48px -24px rgba(16,32,61,.6)}
.hub-tile .hub-no{font-size:.8125rem;font-weight:800;letter-spacing:.14em;opacity:.8}
.hub-tile h2{color:#fff;font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);margin:0}
.hub-tile p{color:rgba(255,255,255,.88);margin:0;max-width:40ch}
.hub-tile ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:4px 0 0;padding:0}
.hub-tile li{font-size:.8125rem;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14)}
.hub-tile .hub-go{margin-top:auto;padding-top:14px;font-weight:800}
.hub-art{position:absolute;right:-30px;bottom:-30px;width:55%;max-width:300px;z-index:-1;opacity:.22;border-radius:24px;overflow:hidden;transform:rotate(-8deg);transition:transform 300ms}
.hub-tile:hover .hub-art{transform:rotate(-4deg) scale(1.04)}
.hub-art{aspect-ratio:4/3}.hub-art > span{display:block;height:100%}.hub-art svg{display:block;width:100%;height:auto}.hub-art .illus-label{display:none}
.hub-tile:first-child .hub-art{width:80%;max-width:420px;opacity:.3}

/* Quick tiles */
.sv-tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sv-tile{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:18px;background:#fff;border:1px solid var(--line);position:relative;transition:transform 200ms, box-shadow 200ms, border-color 200ms}
a.sv-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--tone)}
.sv-ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;background:var(--tone-tint);color:var(--tone-ink)}
.sv-tile strong{font-size:1.0625rem;line-height:1.3}
.sv-tile span{font-size:.875rem;color:var(--ink-soft)}
.sv-tile .mini-badge{align-self:flex-start;margin-top:auto}
.sv-tile .sv-tile-go{margin-top:auto;font-weight:800;color:var(--tone-ink);font-size:.875rem}

/* Split feature: text + illustration */
.sv-split{display:grid;gap:32px;align-items:center}
@media(min-width:960px){.sv-split{grid-template-columns:1fr 1fr;gap:56px}.sv-split.is-flip > :first-child{order:2}}
.sv-split .hero-visual{order:0;border-radius:24px}
.sv-checks{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.sv-checks li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.sv-checks li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--tone-tint) no-repeat center/12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3' fill='none' stroke='%23182230' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.sv-checks li > .sv-ck{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.sv-checks small{color:var(--ink-soft);font-size:.875rem}
.sv-checks .mini-badge{margin-left:auto;align-self:center}

/* Numbered process */
.sv-steps{display:grid;gap:14px;list-style:none;padding:0;margin:0;counter-reset:st}
@media(min-width:768px){.sv-steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.sv-steps{grid-template-columns:repeat(4,1fr)}}
.sv-steps li{counter-increment:st;position:relative;padding:22px 20px 20px;border-radius:18px;background:#fff;border:1px solid var(--line);overflow:hidden}
.sv-steps li::before{content:counter(st,decimal-leading-zero);display:block;font-size:2.4rem;font-weight:800;line-height:1;color:var(--tone);margin-bottom:10px;letter-spacing:-.03em}
.sv-steps li::after{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,var(--tone),transparent)}
.sv-steps strong{display:block;font-size:1.0625rem;margin-bottom:4px}
.sv-steps p{margin:0;font-size:.9375rem;color:var(--ink-soft)}

/* Roadmap (Học tập) */
.sv-road{display:grid;gap:16px;list-style:none;padding:0;margin:0;position:relative}
@media(min-width:960px){.sv-road{grid-template-columns:repeat(4,1fr);gap:20px}
  .sv-road::before{content:"";position:absolute;left:4%;right:4%;top:31px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--c-blue),var(--c-green),var(--c-orange),var(--c-purple))}}
.sv-road li{position:relative;display:flex;flex-direction:column;gap:8px}
.sv-road .yr{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;font-size:.875rem;font-weight:800;color:#fff;background:var(--c);box-shadow:0 0 0 6px var(--surface-2)}
.sv-road .yr-card{padding:18px;border-radius:18px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--c);flex:1}
.sv-road h3{font-size:1.0625rem;margin:0 0 6px}
.sv-road p{margin:0;font-size:.9375rem;color:var(--ink-soft)}

/* Posts grid */
.sv-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.sv-posts{display:grid;gap:18px}
@media(min-width:640px){.sv-posts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.sv-posts{grid-template-columns:repeat(3,1fr)}}
.sv-post-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.sv-deadline{font-size:.8125rem;font-weight:800;color:var(--cta-ink);background:#FDECEE;padding:3px 10px;border-radius:999px}
.sv-note{grid-column:1/-1;margin:0;font-size:.9375rem;color:var(--ink-soft)}
.sv-post .post-type{background:var(--tone-deep, var(--primary))}

/* Photo frames: bento gallery */
.sv-gallery{display:grid;grid-auto-flow:dense;gap:12px;grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
@media(min-width:768px){.sv-gallery{grid-template-columns:repeat(4,1fr);grid-auto-rows:180px}
  .sv-gallery .sv-photo:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
  .sv-gallery .sv-photo:nth-child(6n+4){grid-row:span 2}}
.sv-photo{position:relative;margin:0;border-radius:18px;overflow:hidden;background:var(--tone-tint)}
.sv-photo img,.sv-photo > span[role=img],.sv-photo > span[role=img] svg{width:100%;height:100%;object-fit:cover;display:block}
.sv-photo figcaption{position:absolute;left:10px;right:10px;bottom:10px;padding:6px 12px;border-radius:12px;font-size:.8125rem;font-weight:700;color:#fff;background:rgba(16,32,61,.72);backdrop-filter:blur(4px)}
.sv-photo.is-template{border:2px dashed color-mix(in srgb,var(--tone) 45%,transparent)}
.sv-photo-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--tone-ink);font-weight:700;
  background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(255,255,255,.5) 12px 24px)}
.sv-photo-ph small{font-size:.75rem}

/* Clubs */
.club-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
@media(min-width:960px){.club-grid{grid-template-columns:repeat(3,1fr)}}
.club-card{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:20px;background:#fff;border:1px solid var(--line);transition:transform 200ms, box-shadow 200ms}
a.club-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.club-card.is-template{border-style:dashed}
.club-logo{width:56px;height:56px;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--tone),var(--tone-deep));margin-bottom:6px}
.club-logo img{width:100%;height:100%;object-fit:cover}
.club-field{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--tone-ink)}
.club-card h3{font-size:1.125rem;margin:0}
.club-card p{margin:0;font-size:.9375rem;color:var(--ink-soft)}
.club-grid .club-card:nth-child(4n+2){--tone:#169C83;--tone-deep:#0B6B5A;--tone-ink:#0B6B5A}
.club-grid .club-card:nth-child(4n+3){--tone:#F89B38;--tone-deep:#9A4A08;--tone-ink:#8F4D0C}
.club-grid .club-card:nth-child(4n+4){--tone:#2D55A8;--tone-deep:#1F3F82;--tone-ink:#1F3F82}

/* Sibling navigation between the four sub-pages */
.sv-next{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.sv-next a{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:18px;background:#fff;border:1px solid var(--line);font-weight:800;color:var(--ink);transition:border-color 200ms, transform 200ms}
.sv-next a:hover{border-color:var(--tone);transform:translateY(-2px)}
.sv-next a::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--tone)}
.sv-next a::after{content:"→";margin-left:auto;color:var(--tone-ink)}

@media(prefers-reduced-motion: reduce){.hub-tile,.hub-art,.sv-tile,.sv-next a,.club-card{transition:none}.hub-tile:hover,.sv-tile:hover,a.club-card:hover{transform:none}.sv-hero .hero-visual{transform:none}}

/* =========================================================
   Đối tác (doanh-nghiep/index.html): partner logo strip + job board
   ========================================================= */
/* Logo strip: slides continuously; pauses on hover/focus; static with reduced motion */
.logo-strip{position:relative;overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logo-track{display:flex;gap:16px;width:max-content;list-style:none;margin:0;padding:0;animation:logo-slide 40s linear infinite}
.logo-strip:hover .logo-track,.logo-strip:focus-within .logo-track,.logo-strip.is-paused .logo-track{animation-play-state:paused}
@keyframes logo-slide{to{transform:translateX(calc(-50% - 8px))}}
.logo-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:240px;height:130px;padding:18px 24px;border-radius:18px;background:#fff;border:1px solid var(--line);color:var(--ink)}
@media(min-width:1024px){.logo-card{width:260px;height:140px}}
.logo-card img{max-width:100%;max-height:100%;object-fit:contain}
a.logo-card:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}
.logo-name{font-weight:800;font-size:1.125rem;text-align:center}
.logo-card.is-template{border:2px dashed var(--line-strong);background:transparent;color:var(--ink-soft)}
.logo-card.is-template small{font-size:.8125rem;font-weight:600}
.logo-strip-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.logo-strip-bar p{margin:0;font-size:.9375rem;color:var(--ink-soft)}
@media(prefers-reduced-motion: reduce){.logo-track{animation:none;flex-wrap:wrap;width:auto}.logo-track [data-clone]{display:none}.logo-strip{-webkit-mask-image:none;mask-image:none}}

/* Job board */
.job-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.job-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.job-row{display:grid;gap:12px 18px;align-items:center;grid-template-columns:56px 1fr;padding:18px 20px;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--ink)}
@media(min-width:900px){.job-row{grid-template-columns:56px 1fr auto auto}}
a.job-row:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}
a.job-row:hover h3{color:var(--primary)}
.job-logo{width:56px;height:56px;border-radius:12px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:800;color:var(--primary-ink)}
.job-logo img{max-width:100%;max-height:100%;object-fit:contain}
.job-main h3{font-size:1.0625rem;margin:0 0 2px}
.job-main span{font-size:.875rem;color:var(--ink-soft)}
.job-tags{display:flex;gap:6px;flex-wrap:wrap;grid-column:1/-1}
@media(min-width:900px){.job-tags{grid-column:auto}}
.job-type{font-size:.75rem;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--primary-tint);color:var(--primary-ink)}
.job-type.is-intern{background:var(--teal-tint);color:var(--teal-ink)}
.job-dl{font-size:.8125rem;font-weight:800;color:var(--cta-ink);white-space:nowrap;grid-column:1/-1}
@media(min-width:900px){.job-dl{grid-column:auto}}
.job-row.is-template{border-style:dashed;opacity:.7}
.job-foot{margin-top:18px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.job-foot p{margin:0;color:var(--ink-soft);font-size:.9375rem}

/* Đề xuất hợp tác: colour panel + form card with progress and pick chips */
.prop{display:grid;gap:24px;align-items:stretch}
@media(min-width:1024px){.prop{grid-template-columns:.85fr 1.15fr;gap:32px}}
.prop-side{position:relative;overflow:hidden;isolation:isolate;padding:36px 32px;border-radius:28px;color:#fff;
  background:radial-gradient(90% 70% at 100% 0%,#4A78D0 0%,transparent 60%),linear-gradient(160deg,#1F3F82 0%,#16305F 100%)}
.prop-side .eyebrow{color:#C9D8FF}
.prop-side .eyebrow::before{background:#C9D8FF}
.prop-side h2{color:#fff;font-size:clamp(2rem,1.4rem + 2vw,2.75rem);margin:8px 0 12px}
.prop-side > p{color:rgba(255,255,255,.86);margin:0 0 28px}
.prop-ring{position:absolute;z-index:-1;border-radius:50%;border:2px solid rgba(255,255,255,.12);pointer-events:none}
.prop-ring.r1{width:340px;height:340px;right:-120px;bottom:-120px}
.prop-ring.r2{width:200px;height:200px;right:-40px;bottom:-40px;border-color:rgba(248,155,56,.45);animation:prop-spin 18s linear infinite;border-style:dashed}
@keyframes prop-spin{to{transform:rotate(360deg)}}
.prop-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:ps;position:relative}
.prop-steps::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:rgba(255,255,255,.25)}
.prop-steps li{counter-increment:ps;position:relative;padding-left:56px;display:flex;flex-direction:column;gap:2px}
.prop-steps li::before{content:counter(ps);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#1F3F82;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.15)}
.prop-steps li:nth-child(2)::before{background:#FFD08A}
.prop-steps li:nth-child(3)::before{background:#BFE9DC}
.prop-steps b{font-size:1.0625rem}
.prop-steps span{font-size:.9375rem;color:rgba(255,255,255,.8)}
.prop-contact{list-style:none;margin:28px 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.2);display:grid;gap:8px}
.prop-contact li{display:flex;justify-content:space-between;gap:12px;font-size:.9375rem}
.prop-contact span{color:rgba(255,255,255,.7)}
.prop-side :focus-visible{outline:3px solid #fff;outline-offset:3px}

.prop-form{padding:28px;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 48px -28px rgba(31,63,130,.35)}
@media(min-width:768px){.prop-form{padding:36px}}
.prop-progress{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.prop-bar{flex:1;height:8px;border-radius:999px;background:var(--primary-tint);overflow:hidden}
.prop-bar i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--c-teal));transition:width 300ms ease}
.prop-progress small{font-size:.8125rem;font-weight:700;color:var(--primary-ink);white-space:nowrap}
.picks{border:0;margin:0;padding:0;min-width:0}
.picks legend{font-weight:700;font-size:.9375rem;margin-bottom:10px;color:var(--primary-ink);padding:0}
.picks .req{color:var(--err-ink)}
.pick-grid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.pick-grid{grid-template-columns:repeat(3,1fr)}}
.pick{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border-radius:16px;border:1.5px solid var(--line);cursor:pointer;
  transition:border-color 180ms, background 180ms, transform 180ms, box-shadow 180ms}
.pick:hover{border-color:var(--primary);transform:translateY(-2px)}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--primary-tint);color:var(--primary-ink);transition:background 180ms, color 180ms}
.pick-t{font-weight:700;font-size:.9375rem;line-height:1.3}
.pick:has(input:checked){border-color:var(--primary);background:var(--primary-tint);box-shadow:0 0 0 3px rgba(45,85,168,.15)}
.pick:has(input:checked) .pick-ico{background:var(--primary);color:#fff}
.pick:has(input:checked)::after{content:"✓";position:absolute;right:12px;top:10px;font-weight:800;color:var(--primary)}
.pick:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.picks:has([aria-invalid="true"]) .pick{border-color:var(--err-ink)}
.prop-submit{margin-top:18px;width:100%;justify-content:center;padding:16px}
.prop-submit span{transition:transform 200ms}
.prop-submit:hover span{transform:translateX(4px)}
@media(prefers-reduced-motion: reduce){.prop-ring.r2{animation:none}.pick,.prop-bar i,.prop-submit span{transition:none}.pick:hover{transform:none}}

/* Tuyển thực tập sinh: 2/3 featured pictures + 1/3 update list */
.in-layout{display:grid;gap:20px}
@media(min-width:1024px){.in-layout{grid-template-columns:2fr 1fr;gap:24px;align-items:stretch}}
.in-feature{display:grid;gap:14px}
@media(min-width:640px){.in-feature{grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr}.in-feature > :first-child{grid-row:span 2}}
.in-shot{position:relative;display:flex;flex-direction:column;min-height:220px;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line);color:var(--ink);
  transition:box-shadow var(--motion), transform var(--motion)}
a.in-shot:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.in-img{position:relative;flex:1;min-height:150px;background:var(--teal-tint);color:var(--teal-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.in-img img,.in-img > span[role=img],.in-img > span[role=img] svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.in-img small{font-size:.8125rem;font-weight:700}
.in-img-ph{color:var(--teal-ink)}
.in-shot:not(.is-template) .in-img{background:linear-gradient(135deg,var(--teal-tint),var(--primary-tint))}
.in-dl{position:absolute;right:12px;top:12px;padding:4px 12px;border-radius:999px;font-size:.75rem;font-weight:800;color:#fff;background:var(--cta)}
.in-cap{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff}
.in-cap .job-logo{width:44px;height:44px;flex:none}
.in-cap > span:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1}
.in-cap small{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--teal-ink)}
.in-cap strong{font-size:1rem;line-height:1.3}
.in-cap em{font-style:normal;font-size:.8125rem;color:var(--ink-soft)}
.in-feature > :first-child .in-cap strong{font-size:1.25rem}
.in-shot.is-template{border:2px dashed var(--line-strong)}
.in-shot.is-template .in-img{background:repeating-linear-gradient(135deg,var(--teal-tint) 0 12px,#eaf7f3 12px 24px)}

.in-side{display:flex;flex-direction:column;padding:18px;border-radius:20px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--c-teal);min-height:0}
@media(min-width:1024px){.in-side{max-height:560px}}
.in-side-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.in-side-head h3{font-size:1.0625rem;margin:0}
.in-count{font-size:.75rem;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--teal-tint);color:var(--teal-ink)}
.in-updates{list-style:none;margin:0;padding:0 4px 0 0;display:grid;gap:4px;overflow-y:auto;overscroll-behavior:contain}
.in-upd{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;color:var(--ink);transition:background var(--motion)}
a.in-upd:hover{background:var(--surface-2)}
a.in-upd:hover strong{color:var(--primary)}
.in-upd .job-logo{width:44px;height:44px;flex:none}
.in-upd-txt{display:flex;flex-direction:column;min-width:0}
.in-upd-txt strong{font-size:.9375rem;line-height:1.3}
.in-upd-txt span{font-size:.875rem;color:var(--ink)}
.in-upd-txt small{font-size:.75rem;color:var(--ink-soft)}
.in-upd.is-template{opacity:.6}
.in-updates li + li{border-top:1px solid var(--line)}
.in-updates .sv-note{border:0;padding:8px 10px 0}
@media(prefers-reduced-motion: reduce){.in-shot{transition:none}a.in-shot:hover{transform:none}}

/* Home — Tin tức & Sự kiện: 3 news cards + event calendar */
.ne-part + .ne-part{margin-top:56px}
.hn-grid{display:grid;gap:18px}
@media(min-width:768px){.hn-grid{grid-template-columns:repeat(3,1fr)}}
.hn-card{display:flex;flex-direction:column;overflow:hidden;border-radius:18px;background:#fff;border:1px solid var(--line);color:var(--ink);transition:box-shadow var(--motion), transform var(--motion)}
a.hn-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
a.hn-card:hover h4{color:var(--primary)}
.hn-media{position:relative;aspect-ratio:3/2;background:var(--primary-tint);overflow:hidden}
.hn-media img,.hn-media > span[role=img],.hn-media > span[role=img] svg{width:100%;height:100%;object-fit:cover;display:block}
.hn-cat{position:absolute;left:12px;top:12px;padding:4px 12px;border-radius:999px;font-size:.75rem;font-weight:800;color:#fff;background:var(--primary)}
.hn-body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
.hn-body h4{font-size:1.125rem;line-height:1.35;margin:0}
.hn-body p{margin:0;font-size:.9375rem;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hn-body .link-arrow{margin-top:auto;min-height:0;padding-top:4px}
.hn-card.is-template{border-style:dashed;opacity:.7}
.hn-ph{display:flex;align-items:center;justify-content:center;color:var(--primary-ink);font-weight:700;background:repeating-linear-gradient(135deg,#eef3fb 0 12px,#e4ecf8 12px 24px)}

.ev-cal{display:grid;gap:20px}
@media(min-width:960px){.ev-cal{grid-template-columns:380px 1fr;gap:28px;align-items:start}}
.cal{padding:20px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-head h4{margin:0;font-size:1.125rem;color:var(--primary-ink)}
.cal-nav{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:#fff;font-size:1.4rem;line-height:1;color:var(--primary);cursor:pointer}
.cal-nav:hover{background:var(--primary-tint)}
.cal-grid{width:100%;border-collapse:collapse;table-layout:fixed;text-align:center}
.cal-grid th{font-size:.75rem;font-weight:800;color:var(--ink-soft);padding:6px 0}
.cal-grid td{padding:3px}
.cal-day{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;font-size:.9375rem;font-weight:600;color:var(--ink);border:0;background:none}
.cal-day.is-today{box-shadow:inset 0 0 0 2px var(--primary)}
button.cal-day{position:relative;cursor:pointer;background:var(--primary-tint);color:var(--primary-ink);font-weight:800}
button.cal-day::after{content:"";position:absolute;bottom:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--cta)}
button.cal-day:hover{background:var(--primary);color:#fff}
button.cal-day.is-sel{background:var(--primary);color:#fff}
button.cal-day.is-sel::after{background:#fff}
.cal-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 0;font-size:.8125rem;color:var(--ink-soft)}
.cal-dot{width:8px;height:8px;border-radius:50%;background:var(--cta)}
.cal-today-key{width:14px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 2px var(--primary);margin-left:10px}
.ev-panel{min-width:0}
.ev-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ev-panel-head h4{margin:0;font-size:1.125rem}
.ev-all{border:1px solid var(--line-strong);background:#fff;border-radius:999px;padding:6px 14px;font-weight:700;color:var(--primary);cursor:pointer;min-height:36px}
.ev-list{display:grid;gap:12px}
.ev-item{display:flex;gap:16px;padding:18px;border-radius:18px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--primary)}
.ev-date{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:68px;border-radius:14px;color:#fff;font-size:.75rem;font-weight:700;
  background:linear-gradient(160deg,var(--primary),var(--primary-ink))}
.ev-date b{font-size:1.6rem;line-height:1}
.ev-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.ev-cat{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--teal-ink)}
.ev-body h5{font-size:1.125rem;margin:0;line-height:1.35}
.ev-body h5 a{color:var(--ink)}
.ev-body h5 a:hover{color:var(--primary)}
.ev-meta{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.875rem;font-weight:600}
.ev-meta span{display:block;font-size:.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.ev-body p{margin:0;font-size:.9375rem;color:var(--ink-soft)}
.ev-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.ev-actions .btn{min-height:40px;padding:8px 18px}
.ev-empty{padding:28px;border-radius:18px;border:2px dashed var(--line-strong);background:#fff}
.ev-empty p{margin:6px 0 4px;color:var(--ink-soft)}
@media(max-width:420px){.cal{padding:14px}.cal-day{width:34px;height:34px;font-size:.875rem}}
@media(prefers-reduced-motion: reduce){.hn-card{transition:none}a.hn-card:hover{transform:none}}

/* Tin tuyển dụng — bold ULAW-green stage (logo #43937F; dark #1F6B5C→#0F3F35 so white text passes AA) */
.jobs-sec{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:radial-gradient(80% 60% at 0% 0%,#2C7564 0%,transparent 60%),linear-gradient(150deg,#1F6B5C 0%,#134A3F 55%,#0B2F28 100%)}
.jobs-sec::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.14;pointer-events:none;
  background-image:radial-gradient(#fff 1px,transparent 1.5px);background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.jobs-deco{position:absolute;inset:0;z-index:-1;pointer-events:none}
.jb{position:absolute;border-radius:50%;filter:blur(60px)}
.jb.b1{width:420px;height:420px;right:-120px;top:-140px;background:#43937F;opacity:.7;animation:jb-float 14s ease-in-out infinite}
.jb.b2{width:320px;height:320px;left:30%;bottom:-180px;background:#F89B38;opacity:.28;animation:jb-float 18s ease-in-out infinite reverse}
.jb.b3{width:180px;height:180px;right:18%;top:40%;border:2px dashed rgba(255,255,255,.25);filter:none;animation:jb-spin 40s linear infinite}
@keyframes jb-float{50%{transform:translate(-30px,24px) scale(1.06)}}
@keyframes jb-spin{to{transform:rotate(360deg)}}
.jobs-word{position:absolute;right:-1vw;bottom:-2.2vw;font-size:clamp(6rem,17vw,15rem);font-weight:800;line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.12)}
.jobs-head{display:grid;gap:24px;align-items:end;margin-bottom:28px}
@media(min-width:960px){.jobs-head{grid-template-columns:1fr auto}}
.jobs-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:.8125rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3)}
.jobs-pill i{width:8px;height:8px;border-radius:50%;background:#7CF0C8;box-shadow:0 0 0 0 rgba(124,240,200,.7);animation:jb-ping 1.6s infinite}
@keyframes jb-ping{70%{box-shadow:0 0 0 8px rgba(124,240,200,0)}100%{box-shadow:0 0 0 0 rgba(124,240,200,0)}}
.jobs-sec h2{color:#fff;font-size:clamp(2.2rem,1.4rem + 3vw,3.75rem);line-height:1.02;letter-spacing:-.03em;margin:14px 0 12px}
.jobs-sec h2 span{color:#A8E6D3}
.jobs-head p{color:rgba(255,255,255,.85);max-width:52ch;margin:0}
.jobs-cta{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
@media(min-width:960px){.jobs-cta{align-items:flex-end}}
.jobs-btn{background:#fff;color:#134A3F;border-radius:999px;padding:14px 24px;font-weight:800;box-shadow:0 12px 30px -12px rgba(0,0,0,.5)}
.jobs-btn:hover{background:#E6F7F1}
.jobs-btn span{transition:transform 200ms}.jobs-btn:hover span{transform:translateX(4px)}
.jobs-link{color:#A8E6D3;font-weight:700;font-size:.9375rem}
.jobs-link:hover{color:#fff;text-decoration:underline}
.jobs-sec .tab-chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:#fff}
.jobs-sec .tab-chip:hover{background:rgba(255,255,255,.18);border-color:#fff;color:#fff}
.jobs-sec .tab-chip.is-active{background:#fff;border-color:#fff;color:#134A3F}
.jobs-sec :focus-visible{outline:3px solid #fff;outline-offset:3px}
.jobs-sec .job-list{gap:12px}
.jobs-sec .job-row{border:0;border-radius:20px;background:rgba(255,255,255,.97);box-shadow:0 14px 30px -20px rgba(0,0,0,.6);position:relative;padding-right:64px;
  transition:transform 220ms, box-shadow 220ms}
.jobs-sec a.job-row::after{content:"→";position:absolute;right:16px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#fff;background:#2C7564;transition:transform 220ms, background 220ms}
.jobs-sec a.job-row:hover{transform:translateY(-3px);box-shadow:0 22px 40px -20px rgba(0,0,0,.7)}
.jobs-sec a.job-row:hover::after{transform:rotate(-45deg);background:var(--cta)}
.jobs-sec .job-main h3{color:#0F3F35}
.jobs-sec a.job-row:hover h3{color:#2C7564}
.jobs-sec .job-logo{background:#DDEFEA;color:#1F6B5C}
.jobs-sec .job-type{background:#DDEFEA;color:#1F6B5C}
.jobs-sec .job-row.is-template{background:rgba(255,255,255,.1);box-shadow:none;border:1.5px dashed rgba(255,255,255,.35);opacity:1;color:#fff}
.jobs-sec .job-row.is-template .job-main h3,.jobs-sec .job-row.is-template .job-main span{color:rgba(255,255,255,.8)}
.jobs-sec .job-row.is-template .job-logo,.jobs-sec .job-row.is-template .job-type{background:rgba(255,255,255,.14);color:#fff}
.jobs-sec .job-row.is-template .job-dl{color:#FFB4BD}
.jobs-sec .sv-note{color:rgba(255,255,255,.8)}
@media(prefers-reduced-motion: reduce){.jb,.jobs-pill i{animation:none}.jobs-sec .job-row,.jobs-sec a.job-row::after{transition:none}.jobs-sec a.job-row:hover{transform:none}}
/* "New" tag: red circle, white text */
.new-tag.new-tag{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:6px;width:28px;height:28px;border-radius:50%;
  font-size:.5rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;line-height:1;color:#fff;background:var(--cta);
  box-shadow:0 0 0 2px #fff,0 0 0 3px var(--cta);animation:new-pulse 1.8s ease-in-out infinite}
@keyframes new-pulse{0%,100%{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--cta),0 0 0 3px rgba(217,30,54,.45)}50%{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--cta),0 0 0 9px rgba(217,30,54,0)}}
@media(prefers-reduced-motion: reduce){.new-tag{animation:none}}

/* News split: left half 3 image+text rows, right half chronological list */
.news-split{display:grid;gap:20px}
@media(min-width:1024px){.news-split{grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}}
.ns-feature{display:grid;gap:14px}
.ns-row{display:grid;grid-template-columns:40% 1fr;gap:0;overflow:hidden;border-radius:18px;background:#fff;border:1px solid var(--line);color:var(--ink);transition:box-shadow var(--motion), transform var(--motion)}
a.ns-row:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
a.ns-row:hover h4{color:var(--primary)}
.ns-media{position:relative;min-height:150px;background:var(--primary-tint);overflow:hidden}
.ns-media img,.ns-media > span[role=img],.ns-media > span[role=img] svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ns-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px;min-width:0}
.ns-body h4{font-size:1.0625rem;line-height:1.35;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ns-body p{margin:0;font-size:.875rem;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ns-body .badge{align-self:flex-start}
.ns-row.is-template{border-style:dashed;opacity:.7}
.ns-ph{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--primary-ink);background:repeating-linear-gradient(135deg,#eef3fb 0 12px,#e4ecf8 12px 24px)}
@media(max-width:519px){.ns-row{grid-template-columns:1fr}.ns-media{aspect-ratio:3/2;min-height:0}}

.ns-side{display:flex;flex-direction:column;padding:18px;border-radius:18px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--primary);min-height:0}
@media(min-width:1024px){.ns-side{max-height:100%;overflow:hidden}}
.ns-side-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.ns-side-head h4{margin:0;font-size:1.0625rem}
.ns-side .in-count{background:var(--primary-tint);color:var(--primary-ink)}
.nl-list{list-style:none;margin:0;padding:0 4px 0 0;overflow-y:auto;flex:1;position:relative}
.nl-list::before{content:"";position:absolute;left:31px;top:8px;bottom:8px;width:2px;background:var(--line)}
.nl-item{position:relative;display:flex;gap:14px;align-items:flex-start;padding:10px 8px;border-radius:12px;color:var(--ink)}
a.nl-item:hover{background:var(--surface-2)}
a.nl-item:hover strong{color:var(--primary)}
.nl-date{position:relative;z-index:1;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;
  background:#fff;border:1.5px solid var(--primary);color:var(--primary-ink);font-size:.5625rem;font-weight:700;line-height:1.15;text-align:center}
.nl-date b{font-size:1.05rem}
.nl-list li:first-child .nl-date{background:var(--primary);color:#fff}
.nl-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.nl-txt small{font-size:.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--primary-deep)}
.nl-txt strong{font-size:.9375rem;line-height:1.35;font-weight:700}
.nl-foot{margin:10px 0 0;font-size:.8125rem;color:var(--ink-soft)}
@media(prefers-reduced-motion: reduce){.ns-row{transition:none}a.ns-row:hover{transform:none}}

/* Utility bar: links + round search button pinned to the far right (visible at every width) */
.utility-right{display:flex;align-items:center;align-self:stretch;gap:12px}
.utility-links .ext-ico{margin-left:4px;font-size:.75em;opacity:.8}
.utility-search{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background var(--motion), color var(--motion)}
.utility-search:hover{background:#fff;color:var(--utility)}

/* VI/EN language dropdown — far right of the utility bar (flag + code, active row red) */
.lang-dd{position:relative;display:flex;align-self:stretch}
.lang-toggle{display:flex;align-items:center;gap:10px;padding:0 12px 0 14px;border:0;border-left:1px solid rgba(255,255,255,.22);
  background:var(--utility);color:#fff;font:inherit;font-weight:600;cursor:pointer;transition:background var(--motion)}
.lang-toggle:hover,.lang-dd.is-open .lang-toggle{background:rgba(255,255,255,.12)}
.lang-toggle [data-lang-current]{display:flex;align-items:center;gap:10px}
html[lang=en] [data-lang-current=vi],html:not([lang=en]) [data-lang-current=en],
html[lang=en] [data-lang-item=en],html:not([lang=en]) [data-lang-item=vi]{display:none}
.lang-toggle b{font-size:.9375rem;font-weight:600;letter-spacing:.04em}
.lang-toggle .nav-caret{width:7px;height:7px;opacity:.75}
.lang-dd.is-open .lang-toggle .nav-caret{transform:rotate(-135deg);margin-top:4px}
.flag{flex:none;display:block;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.lang-menu{position:absolute;right:0;top:100%;z-index:80;min-width:170px;margin:0;padding:0;list-style:none;overflow:hidden;
  background:#fff;border-radius:0 0 10px 10px;box-shadow:0 18px 36px -12px rgba(16,32,61,.45);border:1px solid var(--line)}
.lang-opt{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:10px 20px;border:0;background:#fff;color:var(--ink);
  font:inherit;font-size:1rem;cursor:pointer;text-align:left;text-decoration:none;transition:background var(--motion)}
.lang-opt b{font-weight:500;letter-spacing:.06em}
.lang-opt:hover{background:var(--cta);color:#fff}
.lang-opt:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.utility-bar .lang-dd :focus-visible{outline-color:#fff}
@media(max-width:519px){.lang-toggle{padding:0 8px 0 10px;gap:6px}.lang-toggle [data-lang-current]{gap:6px}}
/* Never let the utility bar squeeze the switch: the caret used to slide over "VN" on phones */
.lang-dd,.lang-toggle,.lang-toggle [data-lang-current],.lang-toggle .flag,.lang-toggle .nav-caret{flex:none}
.lang-toggle b{white-space:nowrap}
@media(max-width:519px){.lang-toggle{gap:9px}.lang-toggle .nav-caret{margin-left:1px}}
/* Phones: the long university name must shrink (ellipsis) instead of pushing the switch past the screen edge */
.utility-home{flex:1 1 auto;min-width:0}
.utility-right{flex:none}
@media(max-width:399px){.lang-toggle{padding:0 6px 0 8px;gap:7px}.lang-toggle .flag{width:26px;height:17px}}
@media print{.lang-dd{display:none}}
@media(prefers-reduced-motion: reduce){.lang-opt,.lang-toggle{transition:none}}

/* Alumni — success-story mosaic (editorial tiles with tinted photos) */
.am-sec{background:linear-gradient(180deg,#132F6B 0%,#0E2350 100%);color:#fff}
.am-sec h2{color:#fff}
.am-sec .section-head p{color:rgba(255,255,255,.8)}
.am-eyebrow{color:#A9C4F5}.am-eyebrow::before{background:#A9C4F5}
.am-share{background:#fff;color:#132F6B;border-radius:0;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.8125rem;padding:14px 22px}
.am-share:hover{background:#E8EEF8}
.am-sec :focus-visible{outline:3px solid #fff;outline-offset:2px}
.am-grid{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:640px){.am-grid{grid-template-columns:repeat(2,1fr)}.am-tile.is-big{grid-column:span 2}}
@media(min-width:1024px){.am-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(260px,auto);grid-auto-flow:dense}
  .am-tile.is-big{grid-column:span 2;grid-row:span 2}}
.am-tile{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:240px;color:#fff;background:var(--tone)}
.am-bg{position:absolute;inset:0;z-index:-2}
.am-bg img,.am-bg > span,.am-bg svg{width:100%;height:100%;object-fit:cover;display:block}
.am-bg img{filter:grayscale(.35) contrast(1.05);mix-blend-mode:multiply;opacity:.85;transition:transform 600ms ease}
.am-scene{opacity:.28;mix-blend-mode:luminosity}
.am-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,rgba(8,18,40,.55) 100%)}
.am-body{display:flex;flex-direction:column;gap:10px;padding:28px 32px}
.am-tile.is-big .am-body{justify-content:center;flex:1;padding:48px 40px}
.am-kicker{align-self:flex-start;font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding-bottom:12px;position:relative}
.am-kicker::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:1px;background:rgba(255,255,255,.7)}
.am-title{margin:0;color:#fff;font-weight:800;letter-spacing:-.01em;font-size:clamp(1.4rem,1.1rem + .8vw,1.9rem);line-height:1.2;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.am-tile.is-big .am-title{font-size:clamp(2rem,1.3rem + 2.2vw,3.4rem);line-height:1.1}
.am-text{margin:0;max-width:46ch;font-size:1.0625rem;line-height:1.6;color:rgba(255,255,255,.92)}
.am-meta{font-size:.875rem;color:rgba(255,255,255,.82)}
.am-link{font-size:.8125rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.am-btn{align-self:flex-start;margin-top:10px;padding:12px 22px;border:1px solid rgba(255,255,255,.8);font-size:.8125rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;transition:background var(--motion), color var(--motion)}
a.am-tile:hover .am-btn{background:#fff;color:#132F6B}
a.am-tile:hover .am-bg img{transform:scale(1.06)}
a.am-tile:hover .am-link{text-decoration:underline;text-underline-offset:4px}
.am-tile.is-template .am-title,.am-tile.is-template .am-meta{opacity:.9}
.am-tile.is-template::before{content:"";position:absolute;inset:14px;border:1px dashed rgba(255,255,255,.35);pointer-events:none}
.am-ctl{justify-content:center;align-items:stretch;gap:0;padding:36px 32px;background:#3E6DC2}
.am-ctl::after{display:none}
.am-select{width:100%;min-height:64px;padding:0 44px 0 22px;border:0;border-radius:0;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%233E6DC2'/%3E%3C/svg%3E") no-repeat right 20px center;
  -webkit-appearance:none;appearance:none;color:#2D55A8;font:inherit;font-weight:800;font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.am-select:disabled{cursor:not-allowed;opacity:.9}
.am-or{display:flex;align-items:center;gap:12px;margin:20px auto;font-size:.9375rem;color:rgba(255,255,255,.85)}
.am-or::before,.am-or::after{content:"";width:48px;height:1px;background:rgba(255,255,255,.35)}
.am-shuffle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:64px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;
  font:inherit;font-weight:800;font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background var(--motion)}
.am-shuffle:hover:not(:disabled){background:rgba(255,255,255,.12)}
.am-shuffle:disabled{opacity:.6;cursor:not-allowed}
.am-hint{margin-top:14px;text-align:center;font-size:.75rem;color:rgba(255,255,255,.75)}
@media(prefers-reduced-motion: reduce){.am-bg img,.am-btn{transition:none}a.am-tile:hover .am-bg img{transform:none}}

/* =========================================================
   Bold editorial headings (user request: vivid, premium, Gen Z)
   1. Tab titles: big orange H1 + bold navy subtitle
   2. Section intros: heading | orange bar | text
   3. Arrow links: trailing "→" replaced by a round orange chevron (see site.js)
   ========================================================= */
.hero h1,.section > .max-w-wide > h1,.section > .max-w > h1{
  color:var(--accent);font-weight:800;letter-spacing:-.03em;line-height:1.02;font-size:clamp(2.6rem,1.6rem + 3.6vw,4.75rem);margin-bottom:22px}
.hero .lede,.section > .max-w-wide > h1 + .lede,.section > .max-w-wide > h1 ~ .lede{
  color:var(--heading-navy);font-weight:700;font-size:clamp(1.15rem,1rem + .5vw,1.5rem);line-height:1.45;max-width:36ch}
.hero .eyebrow,.section > .max-w-wide > .eyebrow{color:var(--heading-navy);display:inline-flex;align-items:center;gap:10px}
.hero .eyebrow::before,.section > .max-w-wide > .eyebrow::before{content:"";width:28px;height:4px;border-radius:4px;background:var(--accent)}

.section > .container > .section-head:not(.center) h2{color:var(--heading-navy);font-weight:800;letter-spacing:-.02em;font-size:clamp(1.9rem,1.4rem + 1.6vw,2.75rem);line-height:1.1}
.section > .container > .section-head:not(.center) p{font-size:1.0625rem;line-height:1.7;color:var(--ink-soft);max-width:68ch;margin-top:4px}
.section-deep > .container > .section-head:not(.center) h2,.section-deep > .container > .section-head:not(.center) p{color:#fff}
.am-sec > .container > .section-head h2{color:#fff}

/* Round orange chevron after arrow links */
.chev{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;margin-left:10px;border-radius:50%;
  background:var(--ulaw-green);color:#fff;vertical-align:middle;box-shadow:0 6px 14px -8px rgba(44,117,100,.8);transition:transform var(--motion), background var(--motion)}
.chev svg{width:16px;height:16px}
a:hover > .chev,a:focus-visible > .chev{background:var(--ulaw-green-deep);transform:translateX(3px)}
.has-chev{display:inline-flex;align-items:center}
.has-chev .chev,a .chev{color:#fff}
.mobile-all .chev,.mega .chev{width:26px;height:26px}
.mobile-all .chev svg,.mega .chev svg{width:13px;height:13px}
@media(prefers-reduced-motion: reduce){.chev{transition:none}a:hover > .chev{transform:none}}

/* Alumni — community network visual + benefits + join form */
.al-net-sec{position:relative;overflow:hidden;isolation:isolate;color:var(--heading-navy);background:#fff}
.al-bigword{position:absolute;z-index:-1;left:-1vw;top:-2vw;font-size:clamp(8rem,18vw,17rem);font-weight:800;line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:2px rgba(248,155,56,.3);pointer-events:none}
.al-net{display:grid;gap:48px;align-items:center}
@media(min-width:1024px){.al-net{grid-template-columns:.85fr 1.15fr;gap:40px}}
.al-net-copy .eyebrow{color:#EE8A3C}
.al-net-copy .eyebrow::before{background:#F8B56A}
.al-net-copy h2{color:var(--heading-navy);font-weight:800;letter-spacing:-.025em;font-size:clamp(2.2rem,1.4rem + 2.6vw,3.5rem);line-height:1.04}
.al-net-copy h2 em{font-style:normal;color:#E06A10}
.al-net-copy > p{font-size:1.0625rem;line-height:1.75;color:var(--heading-navy)}
.al-net-legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;padding:0;margin:4px 0 8px;font-size:.875rem;font-weight:700;color:var(--heading-navy)}
.al-net-legend li{display:flex;align-items:center;gap:8px}
.al-net-legend span{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--c)}
.al-btn{background:var(--ulaw-green-deep);color:#fff;font-weight:800;box-shadow:0 12px 28px -12px rgba(44,117,100,.85)}
.al-btn:hover{background:#1F5C4F}
.al-btn-ghost{background:transparent;color:var(--heading-navy);border:1px solid var(--heading-navy)}
.al-btn-ghost:hover{background:var(--heading-navy);color:#fff}
.al-net-sec :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.al-net-visual{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1}
.al-net-visual svg{width:100%;height:100%;display:block;overflow:visible}
.nring{fill:none;stroke:#15264A;stroke-opacity:.14;stroke-width:1.2;stroke-dasharray:3 7}
.nl{stroke:#15264A;stroke-opacity:.18;stroke-width:1.2}
.nl-hub{stroke:#E8742A;stroke-opacity:.5}
.nn.has-photo{filter:drop-shadow(0 6px 14px rgba(21,38,74,.3))}
.nhub circle{filter:drop-shadow(0 0 24px rgba(232,116,42,.75))}
@media(max-width:767px){.al-net-visual{max-width:440px;margin:24px auto}}

.alb-grid{display:grid;gap:16px}
@media(min-width:640px){.alb-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.alb-grid{grid-template-columns:repeat(4,1fr)}}
.alb{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px 22px;border-radius:20px;background:#fff;border:1px solid var(--line);color:var(--ink);overflow:hidden;
  transition:transform var(--motion), box-shadow var(--motion), border-color var(--motion)}
.alb::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--accent),#E86A77)}
a.alb:hover{transform:translateY(-4px);box-shadow:0 18px 36px -20px rgba(21,38,74,.45);border-color:#F3B7BE}
.alb h3{font-size:1.125rem;margin:0;color:var(--heading-navy);font-weight:800}
.alb p{margin:0;font-size:.9375rem;line-height:1.6}
.alb .link-arrow,.alb .mini-badge{margin-top:auto;padding-top:6px;align-self:flex-start}
.alb .link-arrow{min-height:0;font-size:.9375rem;color:var(--heading-navy)}
@media(prefers-reduced-motion: reduce){.alb{transition:none}a.alb:hover{transform:none}}

.al-join{display:grid;gap:32px;align-items:start}
@media(min-width:1024px){.al-join{grid-template-columns:.8fr 1.2fr;gap:56px}}
.al-join h2{color:var(--heading-navy);font-weight:800}
.al-form{padding:28px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 48px -30px rgba(21,38,74,.4)}



/* "Business × Law × Technology": the × signs in ULAW red (same as the admissions CTA) */
.x-mark{color:var(--cta);font-weight:800;margin:0 .15em}
.home-hero-copy .x-mark{color:#F19E4B}
.section-deep .x-mark,.hb-panel .x-mark,.hb-slide .x-mark{color:#FF4D5E}  /* brighter red on dark backgrounds */
.vm-motto .x-mark{margin:0}

/* Lợi ích Alumni: top border tones follow the Giới thiệu timeline palette */
.alb-grid > :nth-child(6n+1){--tone:#2D55A8}.alb-grid > :nth-child(6n+2){--tone:#169C83}.alb-grid > :nth-child(6n+3){--tone:#9B57A0}
.alb-grid > :nth-child(6n+4){--tone:#E08A2E}.alb-grid > :nth-child(6n+5){--tone:#1C5E97}.alb-grid > :nth-child(6n+6){--tone:#0E9A9A}
.alb-grid .alb::before{background:var(--tone)}
.alb-grid a.alb:hover{border-color:color-mix(in srgb,var(--tone) 40%,#fff)}

/* Notice board rows ([data-sv-notices]) — Thông báo học vụ + Tin mới cho sinh viên */
.nb-legend{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.875rem;color:var(--ink-soft)}
.nb-legend li{display:flex;align-items:center;gap:10px}
.nb-board{min-width:0}
.nb-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nb-row{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);color:var(--ink);transition:border-color 180ms, transform 180ms, box-shadow 180ms}
a.nb-row:hover{border-color:var(--primary);transform:translateX(4px);box-shadow:var(--shadow-sm)}
a.nb-row:hover strong{color:var(--primary)}
.nb-date{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:62px;height:62px;border-radius:14px;
  background:linear-gradient(160deg,var(--primary),var(--primary-ink));color:#fff;font-size:.6875rem;font-weight:700;line-height:1.2}
.nb-date b{font-size:1.4rem;line-height:1}
.nb-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.nb-txt strong{font-size:1rem;line-height:1.35}
.nb-txt > span{font-size:.875rem;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.nb-tag{align-self:flex-start;font-size:.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-ink)}
.nb-tag.nb-hoc-bong{color:var(--orange-ink)}.nb-tag.nb-thuc-tap{color:var(--teal-ink)}.nb-tag.nb-cuoc-song{color:var(--purple-ink)}
.nb-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.nb-flag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.6875rem;font-weight:800;text-transform:uppercase;color:#fff;background:var(--primary)}
.nb-flag.is-pin{background:var(--cta)}
.nb-arrow{flex:none;font-weight:800;color:var(--primary)}
.nb-list.is-empty .nb-row{border-style:dashed;opacity:.65}
.nb-list.is-empty .nb-date{background:var(--primary-tint);color:var(--primary-ink)}
@media(max-width:639px){.nb-row{align-items:flex-start;flex-wrap:wrap}.nb-side{flex-direction:row;width:100%;padding-left:78px;align-items:center}.nb-date{width:54px;height:54px}}
@media(prefers-reduced-motion: reduce){.nb-row{transition:none}a.nb-row:hover{transform:none}}


.site-footer .x-mark{color:inherit}  /* footer keeps the × white (user request) */

/* Tin tức: year groups in the right-hand list */
.nl-year{position:sticky;top:0;z-index:2;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 8px 6px;margin-top:6px;
  background:#fff;border-bottom:2px solid var(--primary)}
.nl-year:first-child{margin-top:0}
.nl-year-label{font-size:1.125rem;font-weight:800;color:var(--heading-navy);letter-spacing:-.01em}
.nl-year-count{font-size:.75rem;font-weight:700;color:var(--ink-soft)}

/* Biểu mẫu: 4 groups */
.fm-jump{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.fm-jump a{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border-radius:999px;border:1px solid var(--line-strong);font-weight:700;font-size:.9375rem;color:var(--heading-navy);background:#fff}
.fm-jump a:hover{border-color:var(--primary);color:var(--primary)}
.fm-note{margin-top:12px;font-size:.9375rem}
.fm-groups{display:grid;gap:20px}
@media(min-width:960px){.fm-groups{grid-template-columns:repeat(2,1fr)}}
.fm-group{padding:24px;border-radius:20px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--tone)}
.fm-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.fm-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;color:var(--tone);background:color-mix(in srgb,var(--tone) 12%,#fff)}
.fm-head h2{font-size:1.25rem;margin:0 0 2px;color:var(--heading-navy)}
.fm-head p{margin:0;font-size:.9375rem}
.fm-count{margin-left:auto;flex:none;font-size:.75rem;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-soft)}
.fm-list{list-style:none;margin:0;padding:0;display:grid}
.fm-list li{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px solid var(--line)}
.fm-doc{flex:none;width:36px;height:42px;border-radius:6px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;font-size:.5625rem;font-weight:800;color:#fff;background:var(--tone)}
.fm-name{flex:1;font-weight:600;color:var(--ink)}
.fm-list .mini-badge{flex:none}
.fm-dl{flex:none;min-height:36px;padding:6px 14px}
.fm-empty{color:var(--ink-soft)}

/* Home hero: motto below the H1 */
.home-hero-copy .hero-motto{display:block;margin:-2px 0 16px}

/* Home "Cập nhật mới" ticker */
.news-ticker{background:#0F1D3D;color:#fff;border-top:3px solid #F19E4B}
.nt-inner{display:flex;align-items:center;gap:14px;min-height:54px}
.nt-label{flex:none;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#F19E4B;color:#10203d;font-size:.8125rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.nt-dot{width:8px;height:8px;border-radius:50%;background:#10203d;animation:nt-blink 1.4s ease-in-out infinite}
@keyframes nt-blink{50%{opacity:.25}}
.nt-viewport{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.nt-track{display:flex;width:max-content;list-style:none;margin:0;padding:0;animation:nt-scroll var(--nt-dur,40s) linear infinite}
.news-ticker:hover .nt-track,.news-ticker:focus-within .nt-track,.news-ticker.is-paused .nt-track{animation-play-state:paused}
@keyframes nt-scroll{to{transform:translateX(-50%)}}
.nt-track li{display:flex;align-items:center;padding-right:40px}
.nt-track li::after{content:"✦";margin-left:40px;color:#F19E4B}
.nt-track a,.nt-track li > span{display:inline-flex;align-items:center;gap:10px;color:#fff;white-space:nowrap;font-weight:600}
.nt-track a:hover .nt-text{text-decoration:underline;text-underline-offset:3px}
.nt-tag{font-size:.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:6px;background:rgba(255,255,255,.14);color:#FFD7A8}
.nt-pause{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:.75rem;cursor:pointer}
.nt-pause:hover{background:rgba(255,255,255,.12)}
.news-ticker :focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(max-width:639px){.nt-label{font-size:.6875rem;padding:5px 10px}}
@media(prefers-reduced-motion: reduce){.nt-track{animation:none;flex-wrap:nowrap;overflow-x:auto;width:auto}.nt-track [aria-hidden="true"]{display:none}.nt-dot{animation:none}.nt-viewport{overflow-x:auto}}

.am-ctl-title{margin:0 0 18px;text-align:center;font-weight:800;font-size:1.25rem;color:#fff}

/* Tin tuyển dụng — modern static stage: mesh gradient + fine grid + glass arcs + light beam */
.jobs-sec{background:
  radial-gradient(60% 80% at 100% 0%,rgba(67,147,127,.55) 0%,transparent 60%),
  radial-gradient(45% 60% at 0% 100%,rgba(28,86,174,.45) 0%,transparent 65%),
  radial-gradient(30% 40% at 55% 110%,rgba(241,158,75,.25) 0%,transparent 70%),
  linear-gradient(135deg,#0B2B26 0%,#0F3A33 45%,#0A1F2E 100%)}
.jobs-sec::before{opacity:1;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(80% 70% at 70% 30%,#000 20%,transparent 85%);mask-image:radial-gradient(80% 70% at 70% 30%,#000 20%,transparent 85%)}
.jobs-sec::after{content:"";position:absolute;z-index:-1;inset:-20% -10% auto auto;width:70%;height:140%;pointer-events:none;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06) 45%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.06) 55%,transparent)}
.jb,.jb.b1,.jb.b2{animation:none}
.jb.b1{width:520px;height:520px;right:-180px;top:-200px;filter:none;opacity:1;background:none;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.02)}
.jb.b2{width:260px;height:260px;left:-80px;bottom:-120px;filter:none;opacity:1;background:none;border:1px solid rgba(241,158,75,.35)}
.jb.b3{display:none}
.jobs-word{-webkit-text-stroke:1.5px rgba(255,255,255,.1)}

/* Học liệu — SSO login gate */
.lib-gate-sec{padding-top:0}
.lib-gate{display:grid;gap:28px;padding:32px;border-radius:24px;background:linear-gradient(135deg,#0F2447 0%,#17376E 60%,#1C56AE 100%);color:#fff;box-shadow:var(--shadow-md)}
@media(min-width:960px){.lib-gate{grid-template-columns:1.2fr 1fr;gap:48px;padding:44px}}
.lg-lock{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.14);margin-bottom:14px}
.lib-gate h2{color:#fff;margin:0 0 10px}
.lg-copy > p{color:#DCE6F7}
.lg-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.lg-steps li{display:flex;gap:12px;align-items:center;color:#fff;font-weight:600}
.lg-steps b{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#17376E;font-size:.875rem}
.lg-card{align-self:center;padding:26px;border-radius:20px;background:#fff;color:var(--ink)}
.lg-card-title{margin:0 0 14px;font-weight:800;color:var(--heading-navy);font-size:1.125rem}
.lg-sso{gap:10px;min-height:52px}
.lg-sso[aria-disabled="true"]{opacity:.85}
.lg-status{margin:12px 0 0;font-size:.875rem;color:var(--ink-soft)}
.lg-status.is-alert{color:var(--warn-ink);background:var(--warn-bg);padding:10px 12px;border-radius:10px;font-weight:600}
.lg-safe{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--ok-bg);color:var(--ok-ink);font-size:.8125rem;font-weight:600}
.lg-help{margin:12px 0 0;font-size:.8125rem}
.lib-gate :focus-visible{outline:3px solid #fff;outline-offset:3px}
.lg-card :focus-visible{outline-color:var(--focus)}
.lib-locked{font-weight:700;color:var(--purple-ink)}

/* Học tập — Khóa luận: photos left, notices right */
.kl-split{display:grid;gap:24px;align-items:start}
@media(min-width:1024px){.kl-split{grid-template-columns:1fr 1fr;gap:32px}}
.kl-photos.sv-gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
@media(min-width:768px){.kl-photos.sv-gallery .sv-photo:nth-child(6n+1){grid-column:span 2;grid-row:span 1}.kl-photos.sv-gallery .sv-photo:nth-child(6n+4){grid-row:span 1}}
.kl-sub{font-size:1.125rem;margin:0 0 12px;color:var(--heading-navy)}
.lib-open{font-weight:700;color:var(--ok-ink)}

/* Học tập — Khóa luận in the Case-Studies stage style, Sinh viên blue/teal palette */
.kl-sec{position:relative;overflow:hidden;isolation:isolate;color:#E7ECF6;
  background:radial-gradient(circle at 92% 8%,rgba(61,214,176,.2) 0,transparent 35%),radial-gradient(circle at 4% 96%,rgba(126,166,255,.2) 0,transparent 40%),
    linear-gradient(160deg,#0b1730 0%,#15306a 60%,#0f1d3b 100%)}
.kl-sec::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 34px)}
.kl-bigword{position:absolute;z-index:-1;right:-1vw;top:-2vw;font-size:clamp(8rem,20vw,18rem);font-weight:800;line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px rgba(61,214,176,.22);pointer-events:none}
.kl-head{display:grid;gap:20px;margin-bottom:36px}
@media(min-width:960px){.kl-head{grid-template-columns:1.2fr 1fr;align-items:end;gap:56px}}
.kl-kicker{display:inline-block;font-size:.8125rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7FE7CC;padding-bottom:10px;border-bottom:3px solid #3DD6B0}
.kl-sec h2{color:#fff;font-size:clamp(2.1rem,1.4rem + 2.8vw,3.5rem);line-height:1.05;margin:18px 0 0;letter-spacing:-.02em}
.kl-sec h2 span{color:#3DD6B0}
.kl-head p{color:#C9D4EA;font-size:1.0625rem;margin:0;max-width:48ch}
.kl-sec .kl-sub{color:#fff}
.kl-sec .sv-photo{background:rgba(255,255,255,.06)}
.kl-sec .sv-photo.is-template{border-color:rgba(127,231,204,.4)}
.kl-sec .sv-photo-ph{color:#BFEFE2;background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(255,255,255,.05) 12px 24px)}
.kl-sec .sv-note{color:#C9D4EA}
.kl-sec :focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Tin tuyển dụng: no grid lines / diagonal beam (user request) */
.jobs-sec::before,.jobs-sec::after{display:none}

/* Khóa luận: exact Case Studies palette (orange accents on navy) */
.kl-sec{background:radial-gradient(circle at 90% 10%,rgba(248,155,56,.18) 0,transparent 35%),radial-gradient(circle at 5% 95%,rgba(91,141,239,.14) 0,transparent 40%),
  linear-gradient(160deg,#0b1730 0%,#13254a 60%,#0f1d3b 100%)}
.kl-bigword{-webkit-text-stroke:2px rgba(248,155,56,.22)}
.kl-kicker{color:#F8B56A;border-bottom-color:var(--c-orange)}
.kl-sec h2 span{color:var(--c-orange)}
.kl-sec .sv-photo.is-template{border-color:rgba(248,181,106,.4)}
.kl-sec .sv-photo-ph{color:#F8D2A6}

/* Tin tuyển dụng — navy stage with teal accents (the Khóa luận palette before its Case-Studies recolour) */
.jobs-sec{color:#E7ECF6;background:
  radial-gradient(circle at 92% 8%,rgba(61,214,176,.2) 0,transparent 35%),
  radial-gradient(circle at 4% 96%,rgba(126,166,255,.2) 0,transparent 40%),
  linear-gradient(160deg,#0b1730 0%,#15306a 60%,#0f1d3b 100%)}
.jobs-sec::before{display:block;opacity:.5;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 34px);background-size:auto;-webkit-mask-image:none;mask-image:none}
.jb.b1{border-color:rgba(61,214,176,.22);box-shadow:0 0 0 70px rgba(61,214,176,.03),0 0 0 140px rgba(61,214,176,.02)}
.jb.b2{border-color:rgba(126,166,255,.35)}
.jobs-word{-webkit-text-stroke:2px rgba(61,214,176,.22)}
.jobs-pill{background:rgba(61,214,176,.12);border-color:rgba(61,214,176,.45);color:#7FE7CC}
.jobs-sec h2 span{color:#3DD6B0}
.jobs-head p{color:#C9D4EA}
.jobs-btn{color:#15306a}
.jobs-btn:hover{background:#E6FBF5}
.jobs-link{color:#7FE7CC}
.jobs-sec .tab-chip.is-active{color:#15306a}
.jobs-sec a.job-row::after{background:#169C83}
.jobs-sec .job-main h3{color:#10203d}
.jobs-sec a.job-row:hover h3{color:#0B6B5A}

/* Utility bar: bolder links + search */
.utility-links a{font-weight:700}
.utility-search{border-width:2px}
.utility-search svg{stroke-width:2.8}
.utility-home{font-weight:700}

/* Utility bar: richer, clearer deep blue with a soft sheen */
.utility-bar{background:linear-gradient(90deg,#15327A 0%,#1D4AA8 50%,#15327A 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.08)}
.utility-links a,.lang-toggle{border-color:rgba(255,255,255,.18)!important}
.lang-toggle{background:transparent}

/* Mobile menu: group headings (Đào tạo đại học / sau đại học) like the desktop mega menu */
.mobile-links .mobile-sub-title{margin-top:6px;font-size:.8125rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--primary-ink)}
.mobile-links .mobile-sub-title:not(:first-child){margin-top:14px;border-top:1px solid var(--line);padding-top:14px}


/* Brand wordmark "KHOA QUẢN TRỊ": bolder, solid blue ink */
.brand-main{font-size:1.1875rem;font-weight:800;letter-spacing:.04em;color:#1D4AA8}
@media(min-width:1280px) and (max-width:1439px){.brand-main{font-size:1.0625rem}}

/* Lịch trực khoa (tin-tuc#lich-truc): navy "hôm nay" spotlight + month grid with Sáng/Chiều slots */
.duty{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}
.duty-spot{position:sticky;top:calc(var(--utility-h) + var(--header-h) + 24px);padding:24px;border-radius:24px;color:#fff;
  background:radial-gradient(120% 80% at 100% 0,rgba(67,147,127,.45),transparent 60%),linear-gradient(160deg,#15327A,#1D4AA8);box-shadow:0 18px 40px -18px rgba(21,50,122,.55)}
.duty-kicker{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:.8125rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#BFD3FF}
.duty-pulse{width:10px;height:10px;border-radius:50%;background:#5EE0B5;box-shadow:0 0 0 0 rgba(94,224,181,.7);animation:dutyPulse 1.8s infinite}
@keyframes dutyPulse{70%{box-shadow:0 0 0 10px rgba(94,224,181,0)}100%{box-shadow:0 0 0 0 rgba(94,224,181,0)}}
.duty-date{display:flex;align-items:center;gap:14px;margin:0 0 18px;color:#fff}
.duty-date b{font-size:3.5rem;line-height:1;font-weight:800}
.duty-date span{font-weight:700;line-height:1.35;color:#DCE6FF}
.duty-card{padding:14px 16px;margin-top:10px;border-radius:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.duty-card.is-now{background:#fff;color:var(--ink);border-color:#fff}
.duty-shift{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:.8125rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:inherit}
.duty-card:not(.is-now) .duty-shift{color:#BFD3FF}
.duty-live{margin-left:auto;padding:2px 8px;border-radius:999px;background:var(--ulaw-green-deep);color:#fff;font-size:.6875rem}
.duty-who{display:flex;align-items:center;gap:10px;margin:0;color:inherit}
.duty-who small{display:block;font-weight:600;opacity:.8}
.duty-meta{margin:8px 0 0;padding:0;list-style:none;font-size:.875rem}
.duty-meta a{color:inherit;font-weight:700}
.duty-empty,.duty-note{margin:0;color:#DCE6FF;font-style:italic}
.duty-card.is-now .duty-empty{color:var(--ink-soft)}
.duty-ava{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--ulaw-green-deep);color:#fff;font-style:normal;font-weight:800;font-size:.8125rem}
.duty-main{padding:20px;border-radius:24px;background:#fff;border:1px solid var(--line);min-width:0}
.duty-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
.duty-month{display:flex;align-items:center;gap:8px}
.duty-title{margin:0 6px;min-width:9.5em;text-align:center;font-size:1.25rem;color:var(--primary-ink)}
.duty-today{height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--primary-tint);color:var(--primary);font-weight:800;cursor:pointer}
.duty-today:hover{background:var(--primary);color:#fff}
.duty-find{margin:0;min-width:220px}
.duty-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.duty-wd{padding:4px 0;text-align:center;font-size:.75rem;font-weight:800;color:var(--ink-soft)}
.duty-wd.is-we{color:var(--cta)}
.duty-day{display:flex;flex-direction:column;gap:4px;min-height:112px;padding:8px;border-radius:14px;border:1px solid var(--line);background:#fff;text-align:left;font:inherit;color:var(--ink);cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.duty-day:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(29,74,168,.45)}
.duty-day.is-we{background:#F5F7FA}
.duty-day.is-past .duty-n{color:var(--ink-soft)}
.duty-day.is-today{border:2px solid var(--primary)}
.duty-day.is-sel{background:var(--primary-tint);border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.duty-day.is-hit{border-color:var(--ulaw-green-deep);box-shadow:0 0 0 3px rgba(67,147,127,.3)}
.duty-day.is-dim>*{opacity:.35}
.duty-n{font-weight:800;font-size:.9375rem}
.duty-day.is-today .duty-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff}
.duty-off{margin-top:auto;font-size:.75rem;color:var(--ink-soft)}
.duty-slot{display:flex;align-items:center;gap:5px;min-width:0;padding:3px 6px;border-radius:8px;font-size:.75rem;line-height:1.2}
.duty-slot b{flex:none;font-weight:800}
.duty-slot em{font-style:normal;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.duty-slot .duty-ava{display:none}
.duty-slot.is-on{background:#E3F2ED;color:var(--ulaw-green-deep)}
.duty-slot.is-off{border:1px dashed var(--line-strong);color:var(--ink-soft)}
.duty-slot.is-off em{opacity:.75}
.duty-slot.is-hit{background:var(--ulaw-green-deep);color:#fff}
.duty-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:14px 0 0;font-size:.8125rem}
.dl{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:-4px;vertical-align:-2px}
.dl-on{background:#E3F2ED;border:1px solid var(--ulaw-green)}
.dl-off{border:1px dashed var(--line-strong)}
.dl-now{border:2px solid var(--primary)}
@media(max-width:1099px){.duty-slot em{display:none}.duty-day{min-height:88px}}
@media(max-width:899px){.duty{grid-template-columns:1fr}.duty-spot{position:static}}
@media(max-width:599px){
  .duty-main{padding:14px}.duty-find{min-width:0;width:100%}.duty-grid{gap:3px}
  .duty-day{min-height:58px;padding:5px 3px;align-items:center;gap:3px}
  .duty-slot{width:100%;height:6px;padding:0;border-radius:3px}.duty-slot b{display:none}
  .duty-slot.is-off{border-style:dashed}.duty-title{min-width:0;font-size:1.0625rem}}
@media(prefers-reduced-motion: reduce){.duty-pulse{animation:none}.duty-day{transition:none}.duty-day:hover{transform:none}}

/* Home: Thông tin nổi bật slider (≤5 photos) above the "Tư duy Quản trị" banner */
.hl{padding:0}
.hl-frame{position:relative;overflow:hidden;background:#0A183C}
.hl-track{position:relative;aspect-ratio:16/9;max-height:calc(100vh - var(--utility-h) - var(--header-h))}
.hl-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 500ms ease,visibility 500ms}
.hl-slide.is-active{opacity:1;visibility:visible}
.hl-media,.hl-media>span,.hl-media svg,.hl-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hl-slide.is-active .hl-media img,.hl-slide.is-active .hl-media svg{animation:hlZoom 7s ease-out both}
@keyframes hlZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
.hl-cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:64px 40px 64px;color:#fff;background:linear-gradient(0deg,rgba(10,24,60,.92) 0%,rgba(10,24,60,.72) 30%,rgba(10,24,60,0) 62%)}
.hl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px;color:#DCE6FF;font-size:.875rem;font-weight:600}
.hl-cat{padding:4px 12px;border-radius:999px;background:var(--cta);color:#fff;font-weight:800;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
.hl-title{max-width:780px;margin:0 0 8px;font-weight:800;font-size:clamp(1.25rem,2.4vw,2rem);line-height:1.25;color:#fff}
.hl-title a{color:#fff;text-decoration:none}
.hl-title a::after{content:"";position:absolute;inset:0}  /* whole slide clickable */
.hl-title a:hover{text-decoration:underline}
.hl-more{font-weight:700;color:#BFF0DD}
.hl-arrow{position:absolute;top:50%;z-index:2;width:48px;height:48px;margin-top:-40px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--primary);font-size:1.75rem;line-height:1;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.2);transition:background var(--motion)}
.hl-arrow:hover{background:#fff}
.hl-prev{left:16px}.hl-next{right:16px}
.hl-bar{position:absolute;left:40px;right:40px;bottom:18px;z-index:2;display:flex;align-items:center;gap:12px}
.hl-dots{display:flex;gap:8px;flex:1;max-width:360px}
.hl-dots button{flex:1;height:24px;padding:0;border:0;background:none;cursor:pointer}
.hl-dots i{display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.35);overflow:hidden;position:relative}
.hl-dots i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.hl-dots [aria-current] i::after{transform:scaleX(1)}
.hl-frame.is-timing .hl-dots [aria-current] i::after{animation:hlFill 5.5s linear both}
@keyframes hlFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hl-pause{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.2);color:#fff;font-size:.75rem;cursor:pointer}
.hl-count{color:#fff;font-weight:700;font-size:.875rem;font-variant-numeric:tabular-nums}
.hl :focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--focus)}

@media(max-width:767px){
  .hl-track{aspect-ratio:4/3}
  .hl-cap{padding:48px 18px 52px}.hl-bar{left:18px;right:18px;bottom:12px}
  .hl-arrow{display:none}.hl-more{display:none}}
@media(prefers-reduced-motion: reduce){.hl-slide{transition:none}.hl-slide.is-active .hl-media img,.hl-slide.is-active .hl-media svg{animation:none}}

/* Design review 2026-09-27: touch targets ≥44px on phones, 44px calendar controls */
.cal-nav,.duty-today{min-width:44px;height:44px}
.utility-search{position:relative}
.utility-search::before{content:"";position:absolute;inset:-7px}
@media(max-width:767px){.hl-dots button{height:44px}.hl-pause{width:44px;height:44px}.hl-bar{bottom:2px}.hl-cap{padding-bottom:58px}}
.contact-h{font-size:1.0625rem;color:#fff}

/* Highlights slider — Laptop/desktop: full screen below the sticky bars */
@media(min-width:1024px){.hl-track{aspect-ratio:auto;height:calc(100vh - var(--utility-h) - var(--header-h));height:calc(100svh - var(--utility-h) - var(--header-h));min-height:520px;max-height:none}
  .hl-cap{padding:80px max(40px,calc((100vw - 1280px)/2)) 96px}.hl-bar{left:max(40px,calc((100vw - 1280px)/2));right:auto;width:min(480px,60vw);bottom:32px}
  .hl-title{font-size:clamp(1.75rem,3vw,2.75rem)}.hl-arrow{width:56px;height:56px;margin-top:-28px}.hl-prev{left:24px}.hl-next{right:24px}}

/* Highlights demo art motion (scenes.js ULAW_HL_SCENES) */
.hl-media svg *{transform-box:fill-box;transform-origin:center}
.hla-drift{animation:hlaDrift 14s ease-in-out infinite alternate}
.hla-drift2{animation:hlaDrift 18s ease-in-out infinite alternate-reverse}
@keyframes hlaDrift{to{transform:translate(-60px,40px) scale(1.08)}}
.hla-sway{transform-origin:top center!important;animation:hlaSway 6s ease-in-out infinite alternate}
.hla-sway2{transform-origin:top center!important;animation:hlaSway 7s ease-in-out infinite alternate-reverse}
@keyframes hlaSway{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.hla-fall{animation:hlaFall 5s linear infinite}
@keyframes hlaFall{0%{transform:translateY(-40px) rotate(0)}100%{transform:translateY(520px) rotate(300deg);opacity:0}}
.hla-pulse,.hla-glow{animation:hlaPulse 2s ease-in-out infinite}
@keyframes hlaPulse{50%{transform:scale(1.18);opacity:.8}}
.hla-ring{animation:hlaRing 2.4s ease-out infinite;opacity:0}
@keyframes hlaRing{0%{opacity:0;transform:scale(.85)}30%{opacity:.9}100%{opacity:0;transform:scale(1.12)}}
.hla-bob{animation:hlaBob 3.2s ease-in-out infinite}
.hla-bob2{animation:hlaBob 3.6s ease-in-out infinite reverse}
@keyframes hlaBob{50%{transform:translateY(-18px)}}
.hla-slide{animation:hlaSlide 4s ease-in-out infinite}
@keyframes hlaSlide{0%,100%{transform:translateX(0)}50%{transform:translateX(30px)}}
.hla-ring-bell{transform-origin:top center!important;animation:hlaBell 2.6s ease-in-out infinite}
@keyframes hlaBell{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-12deg)}30%{transform:rotate(8deg)}40%{transform:rotate(-5deg)}}
.hla-grow{transform-origin:bottom center!important;animation:hlaGrow 3.5s ease-out infinite}
@keyframes hlaGrow{0%{transform:scaleY(.15)}45%,100%{transform:scaleY(1)}}
.hla-draw{stroke-dasharray:900;animation:hlaDraw 3.5s ease-out infinite}
@keyframes hlaDraw{0%{stroke-dashoffset:900}60%,100%{stroke-dashoffset:0}}
.hla-twinkle{animation:hlaTwinkle 2.2s ease-in-out infinite}
@keyframes hlaTwinkle{50%{transform:scale(.4);opacity:.4}}
.hla-d1{animation-delay:.35s}.hla-d2{animation-delay:.7s}.hla-d3{animation-delay:1.05s}.hla-d4{animation-delay:1.4s}.hla-d5{animation-delay:1.75s}
.hl-slide:not(.is-active) .hl-media svg *{animation-play-state:paused}
@media(prefers-reduced-motion: reduce){.hl-media svg *{animation:none!important}}

/* Utility bar school name: short form on phones (user request), full form from 768px */
.uh-short{display:none}
@media(max-width:767px){.uh-full{display:none}.uh-short{display:inline}}
@media(max-width:767px){.brand-sub{max-width:none;overflow:visible}}

/* Phones: compact slider + hero so the banner buttons show up sooner (user option 1) */
@media(max-width:599px){
  .hl-track{aspect-ratio:16/10}
  .hl-cap{padding:36px 16px 50px}.hl-title{font-size:1.125rem;margin-bottom:4px}.hl-meta{margin-bottom:6px;font-size:.8125rem}
  .home-hero{padding-top:14px}
  .home-hero-copy{padding:22px 18px 20px}
  .home-hero-copy h1{font-size:1.875rem;margin-bottom:10px}
  .home-hero-copy p{font-size:.9375rem;line-height:1.5;margin-bottom:0}
  .home-hero-copy .hero-ctas{margin-top:14px;gap:8px}
  .home-hero-copy .btn{min-height:44px;padding:10px 18px;font-size:.9375rem}
}

/* Buttons: <a class="btn"> and <button class="btn"> (admissions dropdown) render the same height */
.btn{line-height:1.25;font-size:1rem}
/* Home hero: both CTAs same size (user request) */
.home-hero-copy .hero-ctas{align-items:stretch}
.home-hero-copy .hero-ctas > .btn,.home-hero-copy .hero-ctas > .adm-dropdown > .btn{min-width:230px;min-height:52px}
.home-hero-copy .hero-ctas > .adm-dropdown{display:flex}
@media(max-width:599px){.home-hero-copy .hero-ctas > .btn,.home-hero-copy .hero-ctas > .adm-dropdown > .btn{min-width:0;min-height:44px;font-size:.9375rem}}
@media(max-width:599px){.hl-track{max-height:none}}
/* Phones without JS sizing yet: slider fills the first screen minus bars and the ~320px hero banner */
@media(max-width:599px){.hl-track{aspect-ratio:auto;height:max(75vw,calc(100svh - var(--utility-h) - var(--header-h) - 300px))}}

/* ---------- English pages (generated under en/ by tools/build_layout.py) ---------- */
/* The English wordmark (FACULTY OF MANAGEMENT) is ~60px wider than KHOA QUẢN TRỊ: on desktop, where the
   sub-line is hidden, it stacks on two lines so the header still fits. */
.brand-br{display:none}
@media(min-width:1280px){.site-header .brand-br{display:inline}html[lang=en] .site-header .brand-main{line-height:1.1;font-size:1rem}}
html:not([lang=en]) [data-lang-only=en]{display:none}
.footer-lang-note{display:block;margin-top:6px}