/* ===================== 1. TOKENS ===================== */
:root{
  /* Màu chính trích từ logo [CẦN XÁC MINH] */
  --brand:#004088;
  --brand-900:#00264f;
  --brand-800:#00264f;   /* gộp về một navy (= --brand-900) */
  --brand-50:#eaf1f9;
  /* 3 màu nhấn từ palette tham chiếu */
  --accent-orange:#fe6d2e;   /* chỉ dùng với chữ tối (--ink) */
  --accent-yellow:#fed933;   /* chỉ dùng với chữ tối/brand */
  --accent-lime:#c6f886;     /* chỉ dùng với chữ tối/brand */
  /* Trung tính */
  --ink:#121826;
  --ink-2:#121826;       /* chữ thân bài dùng màu mực đầy đủ; xám chỉ là --muted cho ghi chú */
  --muted:#566173;
  --line:#d5dbe4;
  --line-strong:#121826;
  --paper:#ffffff;
  --paper-2:#f5f7fa;
  --on-dark:#ffffff;
  --on-dark-2:#c9d6e8;
  /* Chữ */
  --font-sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-serif:"Source Serif 4","Noto Serif",Georgia,"Times New Roman",serif;
  /* Chuyển động */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:200ms;
  --t-mid:400ms;
  --t-slow:500ms;
  /* Bố cục */
  --gutter:16px;
  --maxw:1280px;
  --header-h:64px;
  --radius-pill:999px;
  --track:rgba(0,38,79,.12);   /* đường nền của mọi thanh tiến độ / vạch chọn */
  /* Màu mảng của vé ngành và túi hồ sơ */
  --tk-1:var(--accent-lime);--tk-2:var(--accent-yellow);--tk-3:#ffd6bf;--tk-4:#a9c9f2;--tk-5:var(--brand-50);
  --kraft:#e6d8bb;--kraft-label:#fffdf8;
  /* Thang cỡ chữ dùng chung */
  --fs-h3:clamp(1.5rem,1.2vw + 1rem,2rem);
  --fs-h2:clamp(2rem,3vw + 1rem,3.25rem);
  --fs-display:clamp(2.25rem,5vw + .5rem,5rem);
}
@media (min-width:768px){:root{--gutter:32px}}

/* ===================== HỆ THỐNG BỐ CỤC — quy tắc chung của trang =====================
   Đầu section : chuẩn = tiêu đề 52px bên trái + một câu giới thiệu (tùy chọn) + nút bên phải (.section-head).
                 Biến thể lớn = Ban lãnh đạo, hero. Tiêu đề trong cột = Về TTC, Đào tạo (nằm trong bố cục riêng).
   Cột         : 7/5 (nội dung + ảnh/danh sách) · 6/6 (cặp đối xứng) · 3/5/4 (Đào tạo, footer) · 4 cột đều (Con số).
   Ảnh         : 3:2 (ngang) · 4:5 (chân dung, dọc) · 16:9 (video). Góc vuông; hover phóng 1.04; xuất hiện = mở từ dưới lên.
   Chuyển động : --t-fast 200ms (phản hồi khi bấm/rê) · --t-mid 400ms · --t-slow var(--t-slow) (xuất hiện, chuyển mục). Chữ: trượt lên 24px + mờ dần.
   Đang chọn   : chữ mực đầy đủ + vạch dày 4px (--track là đường nền, navy là phần đã chọn). Vé và danh sách lãnh đạo
                 giữ hình dáng riêng nhưng dùng cùng thời gian và cùng ngôn ngữ chữ đậm / sáng.
   Chữ ký      : tối đa 4 điểm nhấn riêng — số "20" lồng ảnh · vé ngành · Đào tạo cuộn ghim · danh sách Ban lãnh đạo.
   ================================================================================== */
/* ===================== 2. BASE ===================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:var(--font-sans);font-size:1rem;line-height:1.6;color:var(--ink);background:var(--paper);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent-orange);outline-offset:2px}
h1,h2,h3{font-family:var(--font-serif);font-weight:600;line-height:1.15;margin:0;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:8px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;font-weight:600}
.skip-link:focus{top:8px}

/* Nhãn nhỏ có ô vuông đầu dòng */

/* Nút vuông có mũi tên (hero, CTA) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 22px;border-radius:var(--radius-pill);font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;border:1px solid transparent;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.btn .arrow{width:18px;height:18px;flex:none;transition:transform var(--t-fast) var(--ease)}
.btn:hover .arrow,.btn:focus-visible .arrow,.pill:hover .arrow,.pill:focus-visible .arrow{transform:translateX(4px)}
.btn--primary{background:var(--accent-orange);color:var(--ink)}
.btn--primary:hover{background:var(--accent-yellow)}
.btn--ghost-light{background:rgba(255,255,255,.16);color:var(--on-dark)}
.btn--ghost-light:hover{background:#fff;color:var(--brand-900)}
.btn--dark{background:var(--brand);color:#fff}
.btn--dark:hover{background:var(--brand-900)}
/* Nút pill (các khối nội dung) */
.pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--radius-pill);border:0;font-weight:600;font-size:.9375rem;text-decoration:none;color:var(--ink);background:var(--brand-50);transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.pill:hover{background:var(--ink);color:#fff}
.pill .arrow{width:16px;height:16px;transition:transform var(--t-fast) var(--ease)}
.pill--solid{background:var(--brand);border-color:var(--brand);color:#fff}
.pill--solid:hover{background:var(--brand-900);border-color:var(--brand-900)}
/* Trạng thái "đang cập nhật" cho liên kết chưa có đích thật */
.is-pending{cursor:not-allowed;opacity:.85}
.pending-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:var(--radius-pill);font-size:.8125rem;font-weight:600;background:var(--paper-2);color:var(--muted);vertical-align:middle;white-space:nowrap}

/* Hiện khi cuộn (JS thêm .is-hidden cho phần tử ngoài màn hình, chạy một lần) */
.reveal{transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.reveal.is-hidden{opacity:0;transform:translateY(24px)}

/* ===================== 3. HEADER ===================== */
.site-header{position:sticky;top:0;z-index:50;background:#fff}
.topbar{background:var(--brand-900);color:var(--on-dark-2);font-size:.8125rem;overflow:hidden;max-height:40px;transition:max-height var(--t-mid) var(--ease)}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px}
.topbar a{position:relative;color:#fff;text-decoration:none}
.topbar a::after{content:"";position:absolute;inset:-12px -6px}
.topbar a:hover{text-decoration:underline}
.topbar-hotline strong{color:var(--accent-yellow);font-weight:700}
.quick-links{display:none;gap:20px}
.quick-links .pending-tag{background:transparent;color:var(--on-dark-2);border-color:rgba(255,255,255,.35)}
@media (min-width:768px){.quick-links{display:flex}}
.mainbar{display:flex;align-items:center;gap:12px;min-height:var(--header-h);transition:min-height var(--t-mid) var(--ease)}
.brand{display:flex;align-items:center;min-height:44px;gap:10px;text-decoration:none;min-width:0;flex:1 1 auto}
.brand img{width:44px;height:44px;flex:none;transition:width var(--t-mid) var(--ease),height var(--t-mid) var(--ease)}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-name{font-weight:700;font-size:.8125rem;line-height:1.25;color:var(--brand);letter-spacing:.01em}
.brand-name>span{display:block;white-space:nowrap}
@media (max-width:399px){.brand-name{font-size:.8125rem}.brand{gap:8px}.brand img{width:40px;height:40px}
  /* Chừa chỗ cho dòng "Cao đẳng Công nghệ" (13px) không chạm nút Đăng ký */
  .mainbar{gap:6px}.mainbar .header-cta{padding-inline:10px}}
@media (min-width:480px){.brand-name{font-size:.9375rem;text-transform:uppercase}}
@media (min-width:1280px){.brand{flex:0 0 auto}}
.header-cta{min-height:44px;padding:8px 14px;font-size:.9375rem;gap:0;flex:none}
.header-cta .long{display:none}
@media (min-width:420px){.header-cta .long{display:inline}}
.menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--paper-2);flex:none}
.menu-toggle svg{width:22px;height:22px}
.menu-toggle .i-close{display:none}
.site-header.is-menu-open .menu-toggle .i-open{display:none}
.site-header.is-menu-open .menu-toggle .i-close{display:block}
/* Header thu nhỏ khi cuộn */
.site-header.is-compact .topbar{max-height:0}
.site-header.is-compact .mainbar{min-height:56px}
.site-header.is-compact .brand img{width:36px;height:36px}
/* ===== Đầu trang (phương án A1): nút đăng ký ở thanh trên, logo lớn cân với tên trường ===== */
.topbar .container{min-height:40px}
.topbar-right{display:flex;align-items:center;gap:22px;margin-left:auto}
.topbar a.topbar-cta{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 14px;border-radius:var(--radius-pill);background:var(--accent-orange);color:var(--ink);font-weight:700;white-space:nowrap}
.topbar a.topbar-cta:hover{text-decoration:none;filter:brightness(1.06)}
.topbar-cta svg{width:14px;height:14px;flex:none}
.topbar-cta .long{display:none}
.mainbar{min-height:72px}
.brand{gap:11px}
.brand img{width:52px;height:52px}
.brand-name{font-size:.96875rem;line-height:1.22;letter-spacing:0}
.site-header .header-cta{display:none}
.site-header.is-compact .header-cta{display:inline-flex;min-height:36px;padding:4px 14px;font-size:.8125rem}
.site-header.is-compact .mainbar{min-height:56px}
.site-header.is-compact .brand img{width:40px;height:40px}
.site-header.is-compact .brand-name{font-size:.84375rem}
@media (min-width:370px){.topbar-cta .long{display:inline}}
@media (min-width:480px){.brand-name{font-size:.90625rem;letter-spacing:.02em}.site-header.is-compact .brand-name{font-size:.9375rem}}
@media (min-width:768px){
  .topbar a.topbar-cta{padding:0 16px}
  .mainbar{min-height:80px}.brand{gap:14px}.brand img{width:62px;height:62px}.brand-name{font-size:1.03125rem}
  .site-header.is-compact .mainbar{min-height:60px}.site-header.is-compact .brand img{width:44px;height:44px}.site-header.is-compact .brand-name{font-size:.9375rem}
}
@media (min-width:1280px){.brand-name{font-size:1.09375rem;letter-spacing:.025em}.site-header.is-compact .brand-name{font-size:.9375rem}}

/* Nav: mobile = panel thả xuống */
.nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;max-height:calc(100vh - 100px);overflow-y:auto;padding:8px var(--gutter) 24px}
.site-header.is-menu-open .nav{display:block}
.nav-list>li+li{margin-top:2px}
.nav-top{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:8px 0;font-weight:600;text-decoration:none;color:var(--ink);text-align:left}
.nav-top .chev{width:16px;height:16px;transition:transform var(--t-fast) var(--ease)}
.has-sub.is-open>.nav-top .chev{transform:rotate(180deg)}
.sub{display:none;padding:0 0 12px 12px}
.has-sub.is-open>.sub{display:block}
.sub a{display:flex;align-items:center;flex-wrap:wrap;min-height:40px;padding:6px 0;text-decoration:none;color:var(--ink-2);font-size:.9375rem}
.sub a:hover{color:var(--brand);text-decoration:underline}
.sub-label{display:block;margin-top:8px;font-size:.8125rem;font-weight:700;color:var(--muted)}
.nav-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.nav-quick a{font-size:.9375rem}
@media (min-width:1280px){
  .menu-toggle{display:none}
  .nav{display:block;position:static;border:0;padding:0;max-height:none;overflow:visible;margin-left:auto}
  .nav-list{display:flex;align-items:center;gap:2px}
  .nav-list>li{position:relative;border:0}
  .nav-top{min-height:44px;padding:8px 7px;font-size:.9375rem;gap:4px;white-space:nowrap}
  .nav-top:hover{color:var(--brand)}
  .sub{position:absolute;top:100%;left:0;min-width:260px;padding:8px 16px 12px;background:#fff;box-shadow:0 12px 32px rgba(18,24,38,.12)}
  .has-sub:hover>.sub,.has-sub:focus-within>.sub{display:block}
  .has-sub:hover>.nav-top .chev{transform:rotate(180deg)}
  .nav-list>li:nth-last-child(-n+2) .sub{left:auto;right:0}
  .nav-quick{display:none}
}
/* Màn hình 1280–1439px: thu gọn chữ/khoảng đệm để menu không tràn ra ngoài khung */
@media (min-width:1280px) and (max-width:1439px){
  .nav-top{padding-inline:5px;font-size:.875rem}
}

/* ===================== 4. HERO ===================== */
/* Hero toàn màn hình: ảnh nền crossfade + zoom chậm, parallax khi cuộn (JS), lớp phủ gradient tối */
.hero{position:relative;color:var(--on-dark);background:var(--brand-900);overflow:hidden;isolation:isolate;min-height:calc(100svh - 100px);display:flex;align-items:flex-end}
.hero-media{position:absolute;inset:0;z-index:-2;will-change:transform}
.hero-photo{position:absolute;inset:0;margin:0;opacity:0;transition:opacity var(--t-slow) var(--ease)}
.hero-photo.is-active{opacity:1;z-index:1}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo.is-active img{animation:zoom 12s linear forwards}
.hero-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.2) 100%)}
@media (min-width:1024px){.hero-overlay{background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.5) 40%,rgba(0,0,0,0) 66%),linear-gradient(0deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 45%)}}
.hero-inner{padding-block:120px 40px;display:grid;gap:28px;will-change:transform,opacity}
.hero-pause-wrap{position:absolute;right:var(--gutter);top:16px;z-index:2}
@media (min-width:1024px){.hero-pause-wrap{top:auto;bottom:40px;right:max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter)))}}
.hero-pause-wrap .hero-pause{background:rgba(0,20,45,.5)}
.hero-title{font-size:clamp(2rem,7.5vw + .25rem,5.25rem);line-height:1.08;color:#fff}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero-title .line>span{display:block;animation:rise var(--t-slow) var(--ease) both;animation-delay:calc(var(--i) * 80ms + 120ms)}
@keyframes rise{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}
.hero-sub{max-width:46ch;font-size:1.125rem;color:var(--on-dark-2)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
/* Dải banner tuyển sinh 2026: crossfade + zoom chậm */
.admission{padding-block:32px 36px;background:var(--paper)}
.admission-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:20px}
.admission-head h2{font-size:var(--fs-h3);margin-top:10px}
.hero-banner{position:relative}
.slides{position:relative;aspect-ratio:1400/391;overflow:hidden;background:var(--brand-800)}
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity var(--t-slow) var(--ease)}
.slide.is-active{opacity:1;z-index:1}
.slide img{width:100%;height:100%;object-fit:cover;transform-origin:center}
.slide.is-active img{animation:zoom 12s linear forwards}
@keyframes zoom{from{transform:scale(1)}to{transform:scale(1.06)}}
.hero-controls{display:flex;align-items:center;gap:12px;margin-top:12px}
.hero-pause{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:rgba(0,0,0,.4);color:#fff}
.admission .hero-pause{border-color:var(--line-strong);color:var(--ink)}
.hero-pause svg{width:16px;height:16px}
.hero-pause .i-play{display:none}
.hero-pause[aria-pressed="true"] .i-play{display:block}
.hero-pause[aria-pressed="true"] .i-pause{display:none}
.dots{display:flex;gap:4px}
.dot{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
.dot::before{content:"";width:24px;height:3px;background:var(--line);transition:background-color var(--t-fast) var(--ease)}
.dot[aria-current="true"]::before{background:var(--brand)}
@media (min-width:1024px){
  .hero-inner{padding-block:160px 72px;gap:32px}
}

/* ===================== 5. SECTION CHUNG ===================== */
.section{padding-block:36px}
@media (min-width:1024px){.section{padding-block:48px}}
.section-head{display:grid;gap:12px;margin-bottom:28px}
.section-head h2{font-size:var(--fs-h2)}
.section-head p{color:var(--muted);max-width:60ch}
@media (min-width:768px){.section-head{grid-template-columns:1fr auto;align-items:end}.section-head .eyebrow,.section-head h2,.section-head p{grid-column:1}.section-head .pill{grid-column:2;grid-row:1 / span 3;align-self:end}}

/* ===================== 6. TIN TỨC 2026 ===================== */
.news-grid{display:grid;gap:32px}
@media (min-width:1024px){.news-grid{grid-template-columns:1fr 1fr;gap:40px;align-items:start}}
.date{font-size:.8125rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.tag{display:inline;font-size:.9375rem;font-weight:600;color:var(--brand)}
.tag::after{content:" ·";font-weight:400;color:var(--muted)}
.news-feature a{text-decoration:none;display:block}
.news-feature .media{overflow:hidden;background:var(--paper-2);aspect-ratio:16/9}
.news-feature .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px}
.news-feature h3{font-size:var(--fs-h3);margin-top:16px}
/* Tiêu đề gốc của bài (giữ nguyên văn) đặt dưới tiêu đề ngắn */
.news-item .meta{margin-top:6px}
.news-feature a:hover h3{text-decoration:underline;text-decoration-thickness:1px}
.news-feature p{margin-top:6px;color:var(--ink-2)}
.news-list>li+li{border-top:1px solid var(--track)}
.news-list>li:first-child .news-item{padding-top:0}
.news-item{display:grid;grid-template-columns:72px 1fr;gap:14px;padding:12px 0;text-decoration:none;align-items:start}
.news-item .thumb{width:72px;height:72px;object-fit:cover;background:var(--paper-2)}
.news-item .thumb--empty{display:flex;align-items:center;justify-content:center;background:var(--brand-50);color:var(--brand);font-family:var(--font-serif);font-weight:600;font-size:1.25rem}
.news-item h3{font-family:var(--font-sans);font-size:1rem;font-weight:600;line-height:1.4;margin-top:4px}
.news-item:hover h3{color:var(--brand);text-decoration:underline}
.news-item .excerpt{font-size:.9375rem;color:var(--muted);margin-top:2px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
/* Hàng 2: hội nghị + bài giới thiệu ngành */
.news-sub{margin-top:40px;display:grid;gap:28px}
@media (min-width:1024px){.news-sub{grid-template-columns:1fr 2fr;gap:48px}}
.news-sub h3.sub-title{font-size:1.5rem;margin-bottom:16px}
.card{display:block;text-decoration:none;background:var(--paper-2);transition:background-color var(--t-fast) var(--ease)}
.card:hover{background:var(--brand-50)}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--paper-2)}
.card-body{padding:16px}
.card-body h4{font-size:1rem;font-weight:600;line-height:1.4;margin:6px 0 0}
.major-posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:640px){.major-posts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.major-posts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.major-posts .card img{aspect-ratio:454/355}
.major-posts .card-body{padding:12px}
.major-posts h4{font-size:.9375rem}

/* ===================== 7. NGÀNH ĐÀO TẠO — 5 khối dạng vé (học từ "How to Get Tickets" của sitcon.org/2026) ===================== */
/* Nền xanh đậm, chữ lớn mờ trôi chậm phía sau. Mỗi khối là một tấm vé màu: thân vé (danh sách ngành) + cuống vé (số + tên khối).
   Không JS / mobile: vé xếp dọc, cuống thành thanh tiêu đề; JS (.is-live) biến thành dạng xổ xuống.
   Desktop + JS: vé xếp ngang, vé đang mở giãn rộng (flex-grow), các vé khác chỉ còn cuống với chữ dọc. */
.majors{--tk-gap:12px;position:relative;overflow:hidden;isolation:isolate;background:var(--brand-900);color:#fff;padding-block:40px}
.majors .legend{color:var(--on-dark-2)}
.majors .legend .ts-dot{background:var(--on-dark-2)}

/* Màu vé (chữ luôn xanh đậm) */
.k1{--tk:var(--tk-1)}
.k2{--tk:var(--tk-2)}
.k3{--tk:var(--tk-3)}
.k4{--tk:var(--tk-4)}
.k5{--tk:var(--tk-5)}
.tk-row{display:grid;gap:14px}
.tk{--stub:84px;--ink:var(--brand-900);--rule:rgba(0,38,79,.22);position:relative;overflow:hidden;border-radius:20px;background:var(--tk);color:var(--ink)}
/* Cuống vé = thanh tiêu đề (mobile) */
.tk-stub{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:14px 20px;text-align:left;color:var(--ink)}
.tk-stub-title{flex:1;font-family:var(--font-serif);font-weight:600;font-size:1.25rem;line-height:1.2}
.tk-stub-plus{display:none;position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:rgba(0,38,79,.12)}
.tk-stub-plus::before,.tk-stub-plus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:var(--ink);transition:transform var(--t-mid) var(--ease)}
.tk-stub-plus::after{transform:rotate(90deg)}
.tk.is-active .tk-stub-plus::after{transform:rotate(0)}
/* Thân vé; đường đục lỗ + hai khấc tròn (màu nền section) ở mép trên */
.tk-main{position:relative;display:grid;grid-template-rows:1fr;border-top:2px dashed var(--rule)}
.tk-main::before,.tk-main::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--brand-900);z-index:1}
.tk-main::before{left:-11px}
.tk-main::after{right:-11px}
.tk-inner{min-height:0;overflow:hidden}
.tk-pad{display:flex;flex-direction:column;gap:20px;padding:22px 20px 24px}
.tk-top{display:flex;align-items:center;gap:14px}
.tk-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:rgba(0,38,79,.09)}
.tk-icon svg{width:24px;height:24px}
.tk-stub .tk-icon{width:36px;height:36px}
.tk-stub .tk-icon svg{width:20px;height:20px}
.tk-title{flex:1;font-size:var(--fs-h3);line-height:1.15}
.tk-title a{text-decoration:none}
.tk-title a:hover{text-decoration:underline}
.tk-list{display:grid;grid-template-columns:minmax(0,1fr);column-gap:32px}
.tk-list a{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-height:44px;padding:11px 0;text-decoration:none;font-weight:500;font-size:.9375rem;line-height:1.35}
.tk-list a:hover{text-decoration:underline;text-underline-offset:3px}
.tk-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.tk-actions{display:flex;flex-wrap:wrap;gap:10px}
.tk-btn{display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;border-radius:999px;border:0;background:rgba(0,38,79,.1);font-weight:600;font-size:.9375rem;text-decoration:none;color:var(--ink);transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.tk-btn:hover{background:var(--ink);color:#fff}
.tk-btn--solid{background:var(--accent-orange);color:var(--ink)}
.tk-btn--solid:hover{background:var(--accent-yellow);color:var(--ink)}
.tk-meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:.8125rem}
.tk-count{font-weight:600}
@media (min-width:640px){.tk-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Dưới 1024px tên khối đã nằm trên cuống vé (thanh tiêu đề) nên bỏ dòng lặp trong thân vé */
@media (max-width:1023px){.tk-top{display:none}}

/* Mobile + JS: dạng xổ xuống, mở một vé mỗi lần */
.majors.is-live .tk-stub{cursor:pointer}
.majors.is-live .tk-stub-plus{display:block}
.majors.is-live .tk-main{grid-template-rows:0fr;visibility:hidden;border-top-color:transparent;
  transition:grid-template-rows var(--t-slow) cubic-bezier(.25,1,.5,1),visibility 0s linear var(--t-slow),border-color var(--t-mid)}
.majors.is-live .tk-main::before,.majors.is-live .tk-main::after{opacity:0;transition:opacity 200ms}
.majors.is-live .tk.is-active .tk-main{grid-template-rows:1fr;visibility:visible;border-top-color:var(--rule);transition:grid-template-rows var(--t-slow) cubic-bezier(.25,1,.5,1),visibility 0s,border-color var(--t-mid)}
.majors.is-live .tk.is-active .tk-main::before,.majors.is-live .tk.is-active .tk-main::after{opacity:1}
/* Vé xuất hiện lần lượt khi cuộn tới */
.tk-row.reveal.is-hidden{opacity:1;transform:none}
.tk{transition:opacity var(--t-slow) var(--ease) calc(var(--k,0) * 90ms),transform var(--t-slow) var(--ease) calc(var(--k,0) * 90ms)}
.tk-row.is-hidden .tk{opacity:0;transform:translateY(48px)}

/* Desktop + JS: vé xếp ngang */
@media (min-width:1024px){
  .majors{padding-block:44px}
  .majors .section-head{margin-bottom:22px}
  /* Vé gọn: cao theo màn hình (372–412px) để cả hàng vé luôn nằm trọn trong khung nhìn */
  .majors.is-live .tk-row{display:flex;gap:var(--tk-gap);height:clamp(372px,52vh,412px);container-type:inline-size}
  .majors.is-live .tk-list a{font-size:.9375rem;padding-block:6px;min-height:38px}
  .majors.is-live .tk{flex:1 1 0;min-width:var(--stub);display:flex;
    transition:flex-grow var(--t-slow) cubic-bezier(.25,1,.5,1),opacity var(--t-slow) var(--ease) calc(var(--k,0) * 90ms),transform var(--t-slow) var(--ease) calc(var(--k,0) * 90ms);
    /* Hai khấc tròn ở mép trên/dưới, đúng vị trí đường đục lỗ trước cuống vé */
    -webkit-mask:radial-gradient(circle at calc(100% - var(--stub)) 0,#0000 11.5px,#000 12px),radial-gradient(circle at calc(100% - var(--stub)) 100%,#0000 11.5px,#000 12px);
    -webkit-mask-composite:source-in;
    mask:radial-gradient(circle at calc(100% - var(--stub)) 0,#0000 11.5px,#000 12px),radial-gradient(circle at calc(100% - var(--stub)) 100%,#0000 11.5px,#000 12px);
    mask-composite:intersect}
  .majors.is-live .tk.is-active{flex-grow:16}
  .majors.is-live .tk:not(.is-active):hover{filter:brightness(1.05)}
  .majors.is-live .tk-stub{order:2;flex:none;flex-direction:column;justify-content:space-between;width:var(--stub);height:100%;min-height:0;padding:16px 0;
    border-left:2px dashed var(--rule)}
  .majors.is-live .tk:not(.is-active) .tk-stub{border-left-color:transparent}
  .majors.is-live .tk-stub-title{flex:1;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;
    font-family:var(--font-sans);font-weight:700;font-size:1rem;letter-spacing:.03em;padding-block:10px;white-space:nowrap}
  .majors.is-live .tk-stub-plus{display:none}
  .majors.is-live .tk-stub::after{content:"";width:22px;height:22px;flex:none;border-radius:50%;
    background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 5l5 5-5 5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/14px no-repeat;
    transition:transform 400ms var(--ease),opacity var(--t-mid)}
  .majors.is-live .tk.is-active .tk-stub::after{opacity:0;transform:scale(.6)}
  .majors.is-live .tk-stub-title{transition:opacity var(--t-mid) var(--ease)}
  .majors.is-live .tk.is-active .tk-stub-title{opacity:0}
  .majors.is-live .tk:not(.is-active) .tk-stub:hover::after{transform:translateX(3px)}
  /* Thân vé: rộng cố định bằng phần còn lại khi mở, nên chữ không nhảy dòng lúc vé đang giãn */
  .majors.is-live .tk-main{order:1;flex:1 1 0;min-width:0;display:block;border-top:0;opacity:0;visibility:hidden;
    transition:opacity 250ms var(--ease),visibility 0s linear 250ms}
  .majors.is-live .tk-main::before,.majors.is-live .tk-main::after{display:none}
  .majors.is-live .tk.is-active .tk-main{opacity:1;visibility:visible;transition:opacity 400ms var(--ease) 250ms,visibility 0s}
  .majors.is-live .tk-inner{width:calc(100cqw - 4 * (var(--stub) + var(--tk-gap)) - var(--stub));height:100%;overflow:hidden}
  .majors.is-live .tk-pad{height:100%;gap:14px;padding:22px 28px 20px}
  .majors.is-live .tk-title{font-size:clamp(1.25rem,1vw + .9rem,1.5rem)}
  .majors.is-live .tk-stub .tk-icon{width:36px;height:36px}
  .majors.is-live .tk-stub .tk-icon svg{width:18px;height:18px}
  .majors.is-live .tk-list{align-content:start;flex:1}
  .majors.is-live .tk-foot{margin-top:auto;gap:12px}
  .majors.is-live .tk-meta{align-items:flex-end;text-align:right}
}
@media (min-width:1024px) and (max-width:1199px){
  .majors.is-live .tk{--stub:76px}
  .majors.is-live .tk-stub-title{font-size:.9375rem}
  .majors.is-live .tk-pad{padding:20px 22px 18px}
}
.ts-dot{flex:none;width:10px;height:10px;margin-top:5px;border-radius:50%;background:currentColor}
.legend{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:1rem;color:var(--ink-2)}

/* ===================== 8. ĐÀO TẠO, CƠ SỞ VÀ TƯ VẤN — kiểu "What we do", dạng tab ===================== */
/* Không JS: 4 mục xếp chồng, mỗi mục có ảnh riêng. Có JS (.is-tabs): bấm mục trong danh sách để đổi nội dung và ảnh.
   Desktop: 3 cột (nhãn | nội dung + danh sách | ảnh dọc rõ nét); mobile: ảnh → nội dung → danh sách.
   Chế độ cuộn ghim (.is-scroll, xem cuối mục này) dùng cho mọi kích thước; "giảm chuyển động" hoặc màn hình quá thấp giữ dạng tab bấm. */
.wwd{background:var(--brand-50);padding-block:64px}
@media (min-width:1024px){.wwd{padding-block:104px}}
.wwd-grid{display:grid;gap:24px}
.wwd-tag{margin:0;font-size:1.25rem;line-height:1.2;color:var(--ink)}
@media (min-width:768px){.wwd-tag{font-size:var(--fs-h3)}}
.wwd-items{display:grid;gap:48px}
.wwd-item h3{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-h3);line-height:1.25;margin-top:16px}
.wwd-item p{margin-top:16px;color:var(--ink);max-width:52ch}
.wwd-label{display:block;margin-top:16px;font-size:.9375rem;font-weight:600;color:var(--brand)}
.wwd-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}
.wwd-cta{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-weight:600;text-decoration:none;color:var(--ink)}
.wwd-cta .sq{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--accent-lime);color:var(--brand-900)}
.wwd-cta .sq svg{width:16px;height:16px;transition:transform var(--t-fast) var(--ease)}
.wwd-cta:hover .sq svg,.wwd-cta:focus-visible .sq svg{transform:translateX(4px)}
.wwd-cta:hover span:last-child{text-decoration:underline}
.wwd-link{font-weight:600;color:var(--ink-2);min-height:44px;display:inline-flex;align-items:center}
.wwd-link.is-pending{color:var(--muted)}
.wwd-photo{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--paper-2)}
.wwd-photo img{width:100%;height:100%;object-fit:cover}
.wwd-nav,.wwd-media{display:none}
/* Chế độ tab (JS bật) */
.wwd.is-tabs .wwd-items{gap:0}
.wwd.is-tabs .wwd-item{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease),visibility 0s linear var(--t-slow)}
.wwd.is-tabs .wwd-item.is-active{opacity:1;visibility:visible;transform:none;transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease),visibility 0s}
.wwd.is-tabs .wwd-label{display:none}
.wwd.is-tabs .wwd-nav{display:block;margin-top:40px;padding:0;list-style:none}
.wwd-nav li+li{margin-top:2px}
.wwd-nav button{position:relative;display:block;width:100%;min-height:44px;padding:12px 0;text-align:left;font-size:.9375rem;color:var(--muted);transition:color var(--t-fast) var(--ease)}
.wwd-nav button:hover,.wwd-nav button[aria-selected="true"]{color:var(--ink)}
.wwd-nav button[aria-selected="true"]{font-weight:600}
.wwd-nav button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:4px;border-radius:2px;background:var(--track)}
.wwd-nav .bar{position:absolute;left:0;right:0;bottom:-1px;height:4px;border-radius:2px;background:var(--brand-900);transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow) var(--ease)}
.wwd-nav button[aria-selected="true"] .bar{transform:scaleX(1)}
@media (min-width:1024px){
  .wwd.is-tabs .wwd-grid{grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:64px;align-items:start}
  .wwd.is-tabs .wwd-tag{margin-top:8px}
  .wwd.is-tabs .wwd-item .wwd-photo{display:none}
  .wwd.is-tabs .wwd-item h3{margin-top:0}
  .wwd.is-tabs .wwd-nav{max-width:30rem;margin-top:48px}
  .wwd.is-tabs .wwd-media{display:block;position:relative;aspect-ratio:4/5;max-height:560px;width:100%;overflow:hidden;background:var(--paper-2)}
  /* Ảnh mới quét từ trên xuống che ảnh cũ */
  .wwd-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 100% 0);z-index:0}
  .wwd-media img.is-prev{clip-path:inset(0);z-index:1}
  .wwd-media img.is-active{clip-path:inset(0);z-index:2;transition:clip-path var(--t-slow) var(--ease)}
}
/* Chế độ cuộn (mọi kích thước, JS thêm .is-scroll) — học từ mục "What we do" của higherlifefoundation.org:
   section cao (số mục × 60% + 1) × màn hình, khối nội dung ghim giữa màn hình; mỗi mục ứng với 60% màn hình cuộn
   (trang mẫu dùng 100%, rút ngắn để đi qua section nhanh hơn).
   --wwd-p (0→1): tiến độ cuộn trong mục hiện tại → thanh dưới tên mục chạy theo.
   --wwd-wipe: ảnh hiện tại co dần từ dưới lên, lộ ảnh mục kế tiếp nằm bên dưới.
   Ảnh và khoảng cách co theo chiều cao màn hình; JS chỉ trả về dạng tab khi nội dung vẫn không vừa một màn hình. */
/* Phần chung mọi kích thước: chữ, vạch tiến độ và ảnh chạy theo cuộn */
.wwd.is-scroll .wwd-item.is-past{transform:translateY(-12px)}
.wwd.is-scroll .wwd-nav .bar{transform:scaleX(0);transition:none}
.wwd.is-scroll .wwd-nav button[aria-selected="true"] .bar{transform:scaleX(var(--wwd-p,0))}
.wwd.is-scroll .wwd-media img{clip-path:inset(0 0 100% 0);z-index:0;transition:none}
.wwd.is-scroll .wwd-media img.is-next{clip-path:inset(0);z-index:1}
.wwd.is-scroll .wwd-media img.is-active{clip-path:inset(0 0 var(--wwd-wipe,0%) 0);z-index:2}
/* Máy tính bảng và desktop */
@media (min-width:768px){
  .wwd.is-scroll{padding-block:0;height:calc(var(--wwd-n) * 60vh + 100vh)}
  /* Header được giữ ẩn trong lúc section đang ghim (JS), nên khối nội dung dùng trọn chiều cao màn hình */
  .wwd.is-scroll .wwd-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;padding:12px 0}
  .wwd.is-scroll .wwd-grid{width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 40px;align-items:start}
  .wwd.is-scroll .wwd-tag{grid-column:1/-1}
  .wwd.is-scroll .wwd-item .wwd-photo{display:none}
  .wwd.is-scroll .wwd-item h3{margin-top:0}
  .wwd.is-scroll .wwd-nav{max-width:30rem;margin-top:clamp(20px,5vh,48px)}
  .wwd.is-scroll .wwd-media{display:block;position:relative;width:100%;aspect-ratio:4/5;max-height:min(560px,calc(100vh - 48px));overflow:hidden;background:var(--paper-2)}
  .wwd.is-scroll .wwd-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}
@media (min-width:1024px){
  .wwd.is-scroll .wwd-grid{grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:64px}
  .wwd.is-scroll .wwd-tag{grid-column:auto;margin-top:8px}
}
/* Màn hình thấp (laptop nhỏ, cửa sổ thu nhỏ): thu gọn khoảng cách để vừa một màn hình */
@media (min-width:768px) and (max-height:760px){
  .wwd.is-scroll .wwd-nav{margin-top:16px}
  .wwd.is-scroll .wwd-item h3{font-size:clamp(1.125rem,3.6vh,1.625rem)}
  .wwd.is-scroll .wwd-item p{margin-top:10px;font-size:.9375rem;line-height:1.5}
  .wwd.is-scroll .wwd-actions{margin-top:14px;gap:4px 20px}
  .wwd.is-scroll .wwd-nav button{min-height:44px;padding-block:10px}
}
/* Điện thoại (< 768px), chế độ cuộn: một cột vừa khít màn hình (100svh, không tính thanh địa chỉ):
   nhãn → 4 vạch tiến độ (kiểu "stories") → ảnh co giãn lấp chỗ trống → tên mục + nội dung.
   Tên mục trong danh sách ẩn bằng font-size:0 (vẫn đọc được bằng trình đọc màn hình), hiện qua .wwd-label phía trên tiêu đề. */
@media (max-width:767px){
  .wwd.is-scroll{padding-block:0;height:calc(var(--wwd-n) * 60vh + 100vh);height:calc(var(--wwd-n) * 60svh + 100svh)}
  .wwd.is-scroll .wwd-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding:16px 0}
  .wwd.is-scroll .wwd-grid{display:flex;flex-direction:column;gap:0;height:100%}
  .wwd.is-scroll .wwd-grid > div:not(.wwd-media){display:contents}
  .wwd.is-scroll .wwd-tag{order:0;flex:none}
  .wwd.is-scroll .wwd-nav{order:1;flex:none;display:flex;gap:6px;max-width:none;margin:4px 0 8px}
  .wwd.is-scroll .wwd-media{order:2;display:block;position:relative;flex:1 1 0;min-height:140px;width:100%;overflow:hidden;background:var(--paper-2)}
  .wwd.is-scroll .wwd-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  /* Chừa bên phải cho cụm nút Zalo / gọi / Facebook cố định ở góc dưới */
  .wwd.is-scroll .wwd-items{order:3;flex:none;margin-top:16px;padding-right:56px}
  .wwd.is-scroll .wwd-item .wwd-photo{display:none}
  .wwd.is-scroll .wwd-label{display:block;margin:0 0 6px;font-size:.8125rem}
  .wwd.is-scroll .wwd-item h3{margin-top:0;font-size:1.25rem}
  .wwd.is-scroll .wwd-item p{margin-top:8px;font-size:.9375rem;line-height:1.5}
  .wwd.is-scroll .wwd-actions{margin-top:12px;gap:0 20px}
  .wwd.is-scroll .wwd-link{min-height:44px}
  .wwd.is-scroll .wwd-cta{min-height:44px}
  .wwd.is-scroll .wwd-nav li,.wwd.is-scroll .wwd-nav li:last-child{flex:1;border:0}
  .wwd.is-scroll .wwd-nav button{min-height:44px;padding:0;font-size:0}
  .wwd.is-scroll .wwd-nav button::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:var(--track)}
  .wwd.is-scroll .wwd-nav .bar{top:50%;bottom:auto;height:4px;margin-top:-2px}
  .wwd.is-scroll .wwd-nav button.is-done .bar{transform:scaleX(1)}
}

/* ===================== 8b. VIDEO (YouTube tải lười) ===================== */
.videos{background:var(--paper-2)}
.video-grid{display:grid;gap:28px}
@media (min-width:1024px){.video-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:start}}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;color:inherit;text-decoration:none}
.yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.yt:hover img{transform:scale(1.03)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-play{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 18px;background:var(--accent-lime);color:var(--brand-900);font-weight:600}
.yt-play svg{width:16px;height:16px;transition:transform var(--t-fast) var(--ease)}
.yt:hover .yt-play svg{transform:translateX(4px)}
.video-feature h3{font-size:var(--fs-h3);margin-top:16px}
.video-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:.8125rem;color:var(--muted)}
.video-ext{font-weight:600;color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.video-ext:hover{color:var(--brand-900)}
.video-list li+li{margin-top:4px}
.video-pick{display:grid;grid-template-columns:136px 1fr;gap:14px;align-items:start;width:100%;padding:14px 0;text-align:left}
.video-pick .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.video-pick .thumb img{width:100%;height:100%;object-fit:cover}
.video-pick .dur{position:absolute;right:4px;bottom:4px;padding:1px 6px;font-size:.8125rem;font-weight:600;background:rgba(0,0,0,.8);color:#fff}
.video-pick strong{display:block;font-weight:600;font-size:.9375rem;line-height:1.4}
.video-pick:hover strong{color:var(--brand);text-decoration:underline}
.video-pick[aria-current="true"] strong{color:var(--brand)}
.video-pick[aria-current="true"] .thumb{outline:3px solid var(--brand);outline-offset:-3px}
.video-pick .video-meta{margin-top:4px}

/* ===================== 8c. HIỆU ỨNG CUỘN (kiểu higherlifefoundation) ===================== */
/* Header ẩn khi cuộn xuống, hiện khi cuộn lên */
.site-header{transition:transform var(--t-mid) var(--ease)}
.site-header.is-nav-hidden{transform:translateY(-100%)}
/* Tiêu đề hai tông */
/* Tiêu đề hiện từng chữ khi cuộn tới (JS tách chữ) */
.split-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.split-w>span{display:inline-block;transition:transform var(--t-slow) var(--ease),opacity var(--t-slow) var(--ease);transition-delay:var(--d,0ms)}
.is-split-hidden .split-w>span{transform:translateY(105%);opacity:0}
/* Ảnh trượt trong khung (parallax nhẹ) */
[data-parallax]{position:relative;overflow:hidden}
[data-parallax]>img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;transform:translate3d(0,var(--py,0),0) scale(var(--ps,1));transition:transform var(--t-slow) var(--ease)}
.news-feature a:hover [data-parallax]>img{--ps:1.03}



/* ===================== 10. KHOẢNH KHẮC TTC — "Một ngày, hai lễ" ===================== */
/* Hai cột: bước vào (khai giảng) | bước ra (tốt nghiệp). Cột phải hạ thấp hơn để hai cột đọc như hai nhịp của cùng một ngày.
   Ảnh vuông góc, ảnh lớn 4:3 phía trên, hai ảnh nhỏ 3:2 bên dưới; ảnh mở từ dưới lên khi cuộn tới. */
.mo-grid{display:grid;gap:48px}
.mo-col h3{font-size:var(--fs-h3);line-height:1.15}
.mo-col>p{margin-top:8px;font-size:1.125rem;color:var(--ink)}
.mo-pics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.mo-pics figure{margin:0;overflow:hidden;aspect-ratio:3/2;background:var(--paper-2);transition:clip-path var(--t-slow) var(--ease)}
.mo-pics .mo-big{grid-column:1/-1;aspect-ratio:3/2}
.mo-pics img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.mo-pics figure:hover img{transform:scale(1.04)}
.mo-col.is-hidden .mo-pics figure{clip-path:inset(100% 0 0 0)}
.mo-pics figure:nth-child(2){transition-delay:120ms}
.mo-pics figure:nth-child(3){transition-delay:200ms}
@media (min-width:900px){
  .mo-grid{grid-template-columns:1fr 1fr;gap:48px;align-items:start}
  .mo-col--out{margin-top:96px}
}
@media (prefers-reduced-motion:reduce){.mo-col.is-hidden .mo-pics figure{clip-path:none}}
.gallery-caption{margin-top:16px;font-size:1rem;color:var(--muted)}

/* ===================== 11. CTA ===================== */
.cta{background:var(--brand);color:#fff}
.cta-inner{display:grid;gap:20px;padding-block:36px}
@media (min-width:1024px){.cta-inner{grid-template-columns:1.2fr 1fr;align-items:center;padding-block:44px}}
.cta h2{font-size:var(--fs-h2)}
.cta p{margin-top:12px;color:var(--on-dark-2)}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:1024px){.cta-actions{justify-content:flex-end}}
.cta .pill{background:rgba(255,255,255,.14);color:#fff}
.cta .pill:hover{background:#fff;color:var(--brand-900)}

/* ===================== 12. FOOTER ===================== */
.site-footer{background:var(--brand-900);color:var(--on-dark-2);font-size:1rem}
.footer-grid{display:grid;gap:36px;padding-block:44px 32px}
@media (min-width:768px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.footer-grid{grid-template-columns:1.1fr 1.6fr 1fr}}
.footer-brand{display:flex;gap:14px;align-items:center}
.footer-brand img{width:56px;height:56px;background:#fff;border-radius:50%}
.footer-brand strong{display:block;color:#fff;font-size:1rem;text-transform:uppercase;line-height:1.3}
.footer-slogan{font-family:var(--font-serif);font-size:1.5rem;color:#fff;margin-top:20px;line-height:1.3}
.site-footer h2{font-size:1.25rem;color:#fff;margin-bottom:16px}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.addr{display:grid;gap:12px}
.addr dt{color:#fff;font-weight:600}
.addr dd{margin:2px 0 0}
.footer-links{display:grid;gap:0}
.footer-links li{display:flex;flex-wrap:wrap;align-items:center;column-gap:.35em;min-height:44px}
.footer-links a{display:inline-flex;align-items:center;min-height:44px}
.footer-links .pending-tag{background:rgba(255,255,255,.1);color:var(--on-dark-2)}
.footer-bottom{padding-block:20px 96px;font-size:.8125rem}
@media (min-width:768px){.footer-bottom{padding-bottom:24px}}

/* ===================== 13. NÚT NỔI ===================== */
.floating{position:fixed;right:12px;bottom:12px;z-index:40;display:flex;flex-direction:column;gap:10px;transition:transform var(--t-mid) var(--ease)}
@media (max-width:767px){.floating.is-away{transform:translateX(calc(100% + 24px))}}
.floating a{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.2);text-decoration:none;transition:transform var(--t-fast) var(--ease)}
.floating a:hover{transform:translateY(-2px)}
.floating svg{width:24px;height:24px}
.f-zalo{background:var(--brand);color:#fff;font-weight:700;font-size:.8125rem}
.f-phone{background:var(--accent-orange);color:var(--ink)}
.f-fb{background:#fff;color:var(--brand)}

/* ===================== 15. VỀ TTC — chữ số "20" lồng ảnh thật + ba hàng Sứ mạng / Tầm nhìn / Giá trị cốt lõi ===================== */
/* Thiết kế theo skill design-taste-frontend: ý tưởng lấy từ chính Trường (20 năm, 2005 → 2025),
   không nhãn nhỏ trên tiêu đề, không đánh số, không hộp viền; tách mặt bằng bước màu nền (trắng → xanh nhạt). */
.about{padding-bottom:0}
.ab-intro{display:grid;gap:28px;align-items:center}
/* Chữ số khổng lồ: ảnh hội trường của Trường hiện qua nét chữ; --ab-y do JS đặt theo cuộn để ảnh trôi chậm */
.ab-num{display:grid;justify-items:start}
.ab-digits{--ab-img:url('https://caodangcongnghedulich.edu.vn/uploads/migrate/ttc-new/img/2501985c1a-1199-b308da8ed7f9.webp');display:block;font-family:var(--font-sans);font-weight:700;font-size:clamp(7rem,46vw,12rem);line-height:.8;letter-spacing:-.07em;
  padding:.04em .06em .02em 0;color:var(--brand);font-variant-numeric:lining-nums}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .ab-digits{color:transparent;background:var(--brand-900) var(--ab-img) 50% var(--ab-y,50%)/cover no-repeat;-webkit-background-clip:text;background-clip:text}
}
.ab-years{margin-top:14px;font-size:1.125rem;font-weight:600;color:var(--brand)}
.ab-text{display:grid;gap:14px;justify-items:start;max-width:40rem}
.ab-text h2{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
.ab-text p{font-size:1.0625rem;line-height:1.6;color:var(--ink)}
.ab-text .pill{margin-top:8px}
/* Dải nền xanh nhạt chứa ba hàng */
.ab-band{margin-top:clamp(28px,3vw,40px);padding-block:clamp(32px,4vw,48px);background:var(--brand-50)}
.ab-rows{display:grid;gap:24px 40px}
.ab-row{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:16px;row-gap:6px;align-content:start}
.ab-row h3{grid-column:2;font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.015em;color:var(--brand-900)}
.ab-row p{grid-column:2;font-size:1rem;line-height:1.6;color:var(--ink)}
.ab-ph{grid-column:1;grid-row:1 / span 3;align-self:start;margin:0;overflow:hidden;aspect-ratio:4/3;background:#d6e2f0}
/* Đoạn văn rút gọn (JS thêm nút Xem đầy đủ); không JS: hiện nguyên văn */
.about.is-live .ab-row p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.about.is-live .ab-row.is-open p{display:block;overflow:visible}
.ab-more{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;font-weight:600;font-size:.9375rem;color:var(--brand)}
.ab-more:hover{color:var(--brand-900);text-decoration:underline}
.ab-more svg{width:14px;height:14px;transition:transform var(--t-fast) var(--ease)}
.ab-row.is-open .ab-more svg{transform:rotate(180deg)}
.ab-more[hidden]{display:none}
.ab-note{font-size:1rem;color:var(--ink-2);max-width:70ch}
.ab-note a{color:inherit}
.ab-ph img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.ab-row:hover .ab-ph img{transform:scale(1.04)}

/* Hiệu ứng vào: tiêu đề → chữ → ảnh, lệch 80ms, nâng 24px; chữ số "20" mở từ dưới lên */
.ab-stagger.reveal.is-hidden{opacity:1;transform:none}
.ab-stagger>*{transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.ab-stagger>:nth-child(2){transition-delay:80ms}
.ab-stagger>:nth-child(3){transition-delay:160ms}
.ab-stagger>:nth-child(4){transition-delay:240ms}
.ab-stagger.is-hidden>*{opacity:0;transform:translateY(24px)}
.ab-ph{transition:clip-path var(--t-slow) var(--ease) 160ms}
.ab-row.is-hidden .ab-ph{clip-path:inset(100% 0 0 0);opacity:1;transform:none}
.ab-num.reveal.is-hidden{opacity:1;transform:none}
.ab-digits{transition:clip-path var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.ab-num.is-hidden .ab-digits{clip-path:inset(100% 0 0 0);transform:translateY(8%)}
.ab-years{transition:opacity var(--t-slow) var(--ease) var(--t-slow)}
.ab-num.is-hidden .ab-years{opacity:0}

/* từ 900px: ba cột thẻ, ảnh trên – tên – đoạn văn rút gọn */
@media (min-width:900px){
  .ab-rows{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ab-row{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .ab-ph{grid-column:1;grid-row:1;aspect-ratio:16/10}
  .ab-row h3,.ab-row p,.ab-more{grid-column:1}
  .ab-row h3{margin-top:8px}
  .about.is-live .ab-row p{-webkit-line-clamp:5}
  .ab-note{grid-column:1 / -1}
}
@media (min-width:1024px){
  .ab-intro{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px}
  .ab-digits{font-size:clamp(11rem,22vw,19rem)}
}
@media (prefers-reduced-motion:reduce){
  .ab-num.is-hidden .ab-digits,.ab-row.is-hidden .ab-ph{clip-path:none;transform:none}
  .ab-stagger.is-hidden>*,.ab-num.is-hidden .ab-years{opacity:1;transform:none}
}

/* ===================== 16. SỐ LIỆU TRÊN NỀN ẢNH ===================== */
.stats{position:relative;color:#fff;overflow:hidden;isolation:isolate;background:var(--brand-900)}
.stats-media{position:absolute;inset:0;z-index:-2}
.stats-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.45) 100%)}
.stats-inner{padding-block:44px}
@media (min-width:1024px){.stats-inner{padding-block:60px}}
.stats h2{font-size:var(--fs-h2);margin:12px 0 40px;max-width:20ch}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
@media (min-width:1024px){.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 40px}}
.stat{padding:20px 8px 24px 0}
.stat-num{display:block;font-family:var(--font-serif);font-weight:600;font-size:clamp(2.5rem,5vw + 1rem,4.5rem);line-height:1;font-variant-numeric:tabular-nums}
.stat-label{display:block;margin-top:10px;color:var(--on-dark-2);font-size:1rem}
.stat-src{display:block;margin-top:8px;font-size:.8125rem;color:var(--on-dark-2)}
.stat-src a{color:inherit}

/* ===================== 17. THÔNG TIN XÉT TUYỂN 2026 — túi hồ sơ kraft đánh dấu được (skill design-taste-frontend) ===================== */
/* Trái: hai cách xét tuyển trên nền xanh lá + các thông tin cần biết. Phải: túi hồ sơ giấy kraft có nhãn giấy dán,
   9 giấy tờ là ô đánh dấu, thanh tiến độ x/9. Dưới: dải vàng "70%" hỗ trợ học phí. Không đường kẻ, không hộp viền. */
.admit{--label:var(--kraft-label)}
.admit .section-head p{max-width:46ch;font-size:1.125rem;color:var(--ink)}
.adm-grid{display:grid;gap:40px;align-items:start}
.adm-sub{font-size:var(--fs-h3);line-height:1.15;margin-bottom:20px}
/* Hai cách xét tuyển: một mảng màu chia đôi */
.adm-ways{display:grid;gap:20px;padding:28px;background:var(--brand-50);color:var(--brand-900)}
.adm-ways p{display:grid;gap:8px}
.adm-ways strong{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.01em}
.adm-ways span{font-size:1rem;line-height:1.5}
@media (min-width:640px){.adm-ways{grid-template-columns:1fr 1fr;gap:32px;padding:32px 36px}}
/* Thông tin cần biết */
.adm-facts{display:grid;gap:28px;margin:40px 0 0}
.adm-facts dt{font-family:var(--font-serif);font-weight:600;font-size:1.5rem;line-height:1.2;color:var(--brand-900)}
.adm-facts dd{margin:8px 0 0;font-size:1.125rem;line-height:1.6;color:var(--ink);max-width:56ch}
.adm-facts dd a{color:var(--brand);font-weight:600}
@media (min-width:768px){.adm-facts div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:32px}.adm-facts dd{margin-top:2px}}
.src-note{margin-top:28px;font-size:.8125rem;color:var(--muted)}
.src-note a{color:inherit}

/* Túi hồ sơ giấy kraft: quai giấy ở mép trên, nhãn giấy dán, các giấy tờ là ô đánh dấu */
.adm-folder{position:relative;margin-top:22px;padding:28px 24px 28px;background:var(--kraft);color:var(--brand-900);border-radius:8px 20px 20px 20px;
  transform-origin:50% 100%;transition:transform var(--t-slow) var(--ease),opacity var(--t-slow) var(--ease)}
.adm-folder::before{content:"";position:absolute;left:0;top:-22px;width:44%;height:23px;background:var(--kraft);border-radius:20px 20px 0 0}
.adm-folder.reveal.is-hidden{opacity:0;transform:translateY(32px) rotate(-2.5deg)}
.adm-label{padding:18px 20px;background:var(--label);border-radius:8px}
.adm-label h3{font-size:var(--fs-h3);line-height:1.12}
.adm-label p{margin-top:6px;font-size:.9375rem;font-weight:600;color:var(--brand)}
.adm-hint{margin-top:20px;font-size:1rem;font-weight:600}
.adm-check{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px}
.adm-check label{display:flex;align-items:flex-start;gap:14px;min-height:44px;padding:10px 12px;border-radius:8px;cursor:pointer;
  font-size:1rem;line-height:1.45;transition:background-color var(--t-fast) var(--ease)}
.adm-check label:hover{background:rgba(255,255,255,.28)}
.adm-check input{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin:0;border-radius:8px;background:var(--label);cursor:pointer;
  transition:background-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.adm-check input:checked{background:var(--brand-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23c6f886' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.adm-check input:active{transform:scale(.88)}
.adm-check input:focus-visible{outline:3px solid var(--accent-orange);outline-offset:2px}
.adm-check input:checked+span{color:rgba(0,38,79,.62);text-decoration:line-through;text-decoration-thickness:1.5px}
/* Tiến độ: chỉ hiện khi có JS */
.adm-progress,.adm-go{display:none}
.adm-folder.is-live .adm-progress{display:grid;gap:10px;margin-top:20px}
.adm-bar{display:block;height:10px;border-radius:5px;background:rgba(0,38,79,.16);overflow:hidden}
.adm-bar>span{display:block;height:100%;background:var(--brand-900);transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow) var(--ease)}
.adm-count{font-size:1rem;font-weight:600}
.adm-count b{font-family:var(--font-serif);font-size:1.5rem;font-variant-numeric:tabular-nums}
.adm-folder.is-done .adm-bar>span{background:var(--brand)}
.adm-folder.is-live.is-done .adm-go{display:inline-flex;margin-top:16px;animation:admPop var(--t-slow) var(--ease) both}
@keyframes admPop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Hỗ trợ học phí: dải vàng với con số lớn */
.adm-aid{display:grid;gap:20px;margin-top:36px;padding:32px 28px;background:var(--brand-900);color:#fff;align-items:center}
.adm-aid-num{font-family:var(--font-serif);font-weight:600;font-size:clamp(4.5rem,9vw,8.5rem);line-height:.9;letter-spacing:-.04em;color:var(--accent-yellow)}
.adm-aid-num span{display:block;margin-top:10px;font-family:var(--font-sans);font-size:1rem;font-weight:700;letter-spacing:0;color:#fff}
.adm-aid-text h3{font-size:var(--fs-h3);line-height:1.2;color:#fff}
.adm-aid-text p{margin-top:8px;font-size:1.125rem;color:var(--on-dark-2)}
.adm-aid-text .src{font-size:.8125rem;margin-top:10px}
.adm-aid-text .src a{color:inherit}
.adm-aid .btn{justify-self:start}

@media (min-width:1024px){
  .adm-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px}
  .adm-folder{padding:32px 32px 32px;margin-top:62px}
  .adm-aid{grid-template-columns:auto minmax(0,1fr) auto;gap:40px;padding:36px 48px}
  .adm-aid .btn{justify-self:end}
}
@media (prefers-reduced-motion:reduce){
  .adm-folder.reveal.is-hidden{opacity:1;transform:none}
}

/* ===================== 18. DẤU ẤN — dòng thời gian thu gọn ===================== */
/* Thanh 5 mốc (năm + tiêu đề ngắn, vạch dày bên dưới) + khung chi tiết mốc đang chọn; mặc định mốc kỷ niệm 20 năm.
   Các khung chồng cùng một ô lưới nên section luôn cao bằng mốc dài nhất. Không JS: hiện cả 5 mốc xếp dọc. */
.ms2-rail{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.ms2-rail button{position:relative;display:grid;align-content:start;gap:4px;width:100%;min-height:48px;padding:10px 0 16px;text-align:left;color:var(--muted);cursor:pointer;transition:color var(--t-fast) var(--ease)}
.ms2-rail button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:2px;background:var(--track);transition:background-color var(--t-fast) var(--ease)}
.ms2-rail button:hover{color:var(--ink)}
.ms2-rail button:hover::after{background:rgba(0,38,79,.28)}
.ms2-rail button[aria-selected="true"]{color:var(--ink)}
.ms2-rail button[aria-selected="true"]::after{background:var(--brand-900)}
.ms2-y{font-family:var(--font-serif);font-weight:600;font-size:1rem;line-height:1.2;color:inherit}
.ms2-rail button[aria-selected="true"] .ms2-y{color:var(--brand)}
.ms2-t{display:none;font-size:.9375rem;line-height:1.35;overflow:hidden;display:none;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* Khung chi tiết: các mốc chồng cùng một ô, chỉ mốc đang chọn hiện */
.ms2-panels{display:grid}
.ms2-panel{display:grid;gap:20px;align-items:center}
.ms2-fig{margin:0;overflow:hidden;aspect-ratio:3/2;background:var(--paper-2)}
.ms2-fig img{width:100%;height:100%;object-fit:cover}
.ms2-fig--year{display:flex;align-items:flex-end;padding:24px;background:var(--brand-50)}
.ms2-fig--year span{font-family:var(--font-serif);font-weight:600;font-size:clamp(3.5rem,8vw,6.5rem);line-height:.9;letter-spacing:-.03em;color:var(--brand)}
.ms2-year{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-h3);line-height:1;color:var(--brand)}
.ms2-text h3{margin-top:10px;font-size:var(--fs-h3);line-height:1.2}
.ms2-text>p:not(.ms2-year):not(.ms2-src){margin-top:10px;font-size:1.125rem;line-height:1.6;max-width:52ch}
.ms2-src{margin-top:10px;font-size:.8125rem;color:var(--muted)}
.ms2-src a{color:inherit}
.ms2-steps{display:none}
/* Có JS: chỉ hiện mốc đang chọn, có nút chuyển mốc */
.ms2.is-live .ms2-panel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease),visibility 0s linear var(--t-slow)}
.ms2.is-live .ms2-panel.is-active{opacity:1;visibility:visible;transform:none;transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease),visibility 0s}
.ms2.is-live .ms2-steps{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.ms2:not(.is-live) .ms2-rail{display:none}
.ms2:not(.is-live) .ms2-panels{gap:48px}
@media (min-width:768px){
  .ms2-t{display:-webkit-box}
  .ms2-y{font-size:1.125rem}
  .ms2-panel{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px}
  .ms2.is-live .ms2-steps{justify-content:flex-end}
}

/* ===================== 19. BAN LÃNH ĐẠO — kiểu "Invited Speakers" (sitcon.org/2026) ===================== */
/* Nền xanh đậm + quầng vàng nhạt, tiêu đề "Đội ngũ ——— lãnh đạo" ánh vàng.
   Desktop: danh sách tên lớn (cột chức vụ | tên) bên trái, khung chân dung bên phải.
   Mobile: khung ảnh trên, danh sách dưới, chức vụ luôn hiện dưới tên (không nhảy bố cục khi tự chuyển).
   Không JS: mọi tên sáng đều, mọi chức vụ hiện, khung chỉ hiện ảnh đầu. JS thêm .is-live để bật trạng thái chọn. */
.leaders{--ld-bg:var(--brand-900);--ld-gold:#fed933;--ld-cream:#ffffff;--ld-dim:rgba(255,255,255,.5);
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:var(--ld-bg)}
.ld-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;color:rgba(255,246,214,.09)}
/* Tiêu đề: hai cụm chữ hai đầu, đường kẻ ở giữa */
.ld-head{margin-bottom:40px}
.ld-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .26em;margin-top:0;font-size:var(--fs-display);line-height:1.08;
  letter-spacing:-.02em;color:var(--ld-gold)}
.ld-title .ld-mask{flex:none}
.ld-title .ld-mask>span{color:var(--ld-gold)}
.ld-rule{order:3;flex:none;width:88px;margin-right:100%;height:4px;margin-top:18px;border-radius:2px;background:var(--ld-gold);transform-origin:left;transition:transform var(--t-slow) var(--ease) 200ms}
/* Lớp che cho hiệu ứng chữ trượt lên + nghiêng nhẹ */
.ld-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.ld-mask>span{display:inline-block;transition:transform var(--t-slow) var(--ease),opacity var(--t-slow) var(--ease);transition-delay:var(--d,0ms);transform-origin:0 100%}
.leaders.is-armed:not(.is-in) .ld-mask>span{transform:translateY(110%) skewY(7deg);opacity:0}
.leaders.is-armed:not(.is-in) .ld-rule{transform:scaleX(0)}
.leaders.is-armed:not(.is-in) .ld-figure{opacity:0;transform:translateY(32px)}
.leaders.is-armed:not(.is-in) .ld-group-label,.leaders.is-armed:not(.is-in) .ld-role{opacity:0}

.ld-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.ld-stage>*{min-width:0}
.ld-group+.ld-group{margin-top:28px}
.ld-group-label{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-family:var(--font-sans);font-size:.9375rem;font-weight:700;color:var(--on-dark-2);transition:opacity var(--t-slow) var(--ease) .3s}
.ld-list{display:grid;gap:2px}
.ld-item{display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
.ld-btn{display:block;width:100%;min-height:44px;padding:4px 0;text-align:left;font-family:var(--font-serif);font-weight:600;
  font-size:clamp(1.625rem,4.6vw,2.25rem);line-height:1.12;letter-spacing:-.015em;color:#fff;
  transform-origin:0 50%;transition:color var(--t-mid) var(--ease),transform 400ms var(--ease)}
/* Học vị: ô rộng cố định để các tên thẳng hàng dù "ThS.NCS" hay "TS." */
.ld-deg{display:inline-block;width:5em;margin-right:.3em;font-family:var(--font-sans);font-size:max(.8125rem,.34em);font-weight:600;letter-spacing:.03em;vertical-align:1em;color:var(--on-dark-2);transition:color var(--t-mid) var(--ease)}
.ld-role{display:block;margin:-2px 0 8px;font-size:.9375rem;line-height:1.35;color:var(--on-dark-2);transition:opacity var(--t-mid) var(--ease),color var(--t-mid) var(--ease)}
/* Trạng thái chọn (JS) */
.leaders.is-live .ld-btn{color:var(--ld-dim)}
.leaders.is-live .ld-deg{color:var(--on-dark-2)}
.leaders.is-live .ld-btn:hover{color:rgba(255,255,255,.8)}
.leaders.is-live .ld-item.is-active .ld-btn{color:var(--ld-cream);transform:scale(1.04)}
.leaders.is-live .ld-item.is-active .ld-deg{color:var(--on-dark-2)}
.leaders.is-live .ld-item.is-active .ld-role{color:#fff}
.ld-btn:focus-visible{outline-offset:4px}
.pill--light{background:rgba(255,255,255,.14);color:#fff}
.pill--light:hover{background:#fff;color:var(--brand-900)}
.ld-org{margin-top:28px}

/* Khung chân dung */
.ld-figure{margin:0;transition:opacity var(--t-slow) var(--ease) .25s,transform var(--t-slow) var(--ease) .25s}
.ld-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--brand-900)}
/* --z: độ phóng (ảnh chụp tại bàn), --ox/--oy: tâm phóng theo tỉ lệ khung; phóng bằng kích thước nên ảnh vẫn nét */
.ld-photo img,.ld-card-ph img{position:absolute;max-width:none;width:calc(var(--z,1) * 100%);height:calc(var(--z,1) * 100%);
  left:calc((1 - var(--z,1)) * var(--ox,.5) * 100%);top:calc((1 - var(--z,1)) * var(--oy,.5) * 100%);
  object-fit:cover;object-position:var(--pos,50% 30%)}
.ld-photo img{clip-path:inset(100% 0 0 0);z-index:0}
.ld-photo img:first-child{clip-path:inset(0)}
.leaders.is-live .ld-photo img:first-child{clip-path:inset(100% 0 0 0)}
/* Ảnh mới quét từ dưới lên, hơi phóng rồi thu về; ảnh cũ nằm dưới */
.leaders.is-live .ld-photo img.is-prev{clip-path:inset(0);z-index:1}
.leaders.is-live .ld-photo img.is-active{clip-path:inset(0);z-index:2;animation:ldIn var(--t-slow) var(--ease) both}
@keyframes ldIn{from{clip-path:inset(100% 0 0 0);transform:scale(1.08)}to{clip-path:inset(0);transform:none}}
/* Chú thích dưới ảnh: số thứ tự, nhóm, nút dừng, thanh thời gian */
.ld-cap{position:relative;display:flex;align-items:center;gap:14px;padding:14px 0 12px;font-size:.9375rem;color:var(--on-dark-2)}
.ld-count{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.ld-count b{font-family:var(--font-serif);font-size:1.25rem;font-weight:600;color:var(--ld-cream)}
.ld-cap-group{flex:1;min-width:0}
.ld-pause{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin:-8px -10px -8px 0;border-radius:50%;color:#fff}
.ld-pause:hover{background:rgba(255,255,255,.1)}
.ld-pause svg{width:16px;height:16px}
.ld-pause .i-play,.ld-pause[aria-pressed="true"] .i-pause{display:none}
.ld-pause[aria-pressed="true"] .i-play{display:block}
.leaders.is-live .ld-pause{display:inline-flex}
.ld-prog{position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.ld-prog>span{display:block;height:100%;background:var(--ld-gold);transform:scaleX(0);transform-origin:left}
.leaders.is-running .ld-prog>span{animation:ldProg var(--ld-ms,3600ms) linear both}
@keyframes ldProg{to{transform:scaleX(1)}}

/* Câu trích trên nền tối */
.quote{margin:36px 0 0;max-width:880px}
/* Tiêu đề video đang phát: 20px trên điện thoại để không quá hai dòng */
@media (max-width:767px){#yt-title{font-size:1.25rem}}
.quote p{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.25rem,1.2vw + .9rem,2rem);line-height:1.3;color:var(--ld-cream,#fff)}
.quote footer{margin-top:16px;font-size:.9375rem;color:var(--on-dark-2)}
.quote cite{font-style:normal;font-weight:600;color:#fff}
.quote a{color:#fff}

/* Mobile không JS: ảnh trên, danh sách dưới */
@media (max-width:1023px){
  .ld-figure{order:-1;width:100%;max-width:440px}
  .ld-photo{aspect-ratio:4/5}
}
/* Mobile có JS: băng thẻ chân dung chạy ngang (kiểu marquee của sitcon), thay cho danh sách + khung ảnh.
   Băng là vùng cuộn ngang thật: tự trôi bằng JS, vuốt tay được, thả tay 2,5s thì chạy tiếp. Bộ thẻ thứ 2 là bản sao để nối vòng. */
.ld-marquee{display:none}
@media (max-width:1023px){
  .leaders.is-live .ld-group,.leaders.is-live .ld-figure{display:none}
  .leaders.is-live .ld-org{margin-top:24px}
  .leaders.is-live .ld-marquee{display:block;order:-1;margin-inline:calc(-1 * var(--gutter));transition:opacity var(--t-slow) var(--ease) .2s,transform var(--t-slow) var(--ease) .2s}
  .leaders.is-armed:not(.is-in) .ld-marquee{opacity:0;transform:translateX(48px)}
  .ld-mq-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px var(--gutter) 6px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .ld-mq-scroll::-webkit-scrollbar{display:none}
  .ld-mq-track{display:flex;gap:12px;width:max-content;margin:0;padding:0;list-style:none}
  .ld-card{flex:none;width:clamp(180px,52vw,240px);margin:0}
  .ld-card figure{position:relative;margin:0}
  .ld-card-ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--brand-900)}
  .ld-card-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.8) 100%)}
  .ld-card figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:12px 12px 14px;line-height:1.25}
  .ld-card-deg{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.04em;color:var(--accent-lime)}
  .ld-card-name{display:block;margin-top:2px;font-family:var(--font-serif);font-weight:600;font-size:1.25rem;color:var(--ld-cream)}
  .ld-card-role{display:block;margin-top:3px;font-size:.8125rem;color:var(--ld-gold)}
  .ld-mq-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px var(--gutter) 0;font-size:.8125rem;color:var(--on-dark-2)}
  .ld-mq-bar .ld-pause{display:inline-flex;margin:0 -10px 0 0}
}
/* Desktop: cột chức vụ (căn phải, chỉ hiện ở người đang chọn) | tên lớn; khung ảnh bên phải */
@media (min-width:1024px){
  .ld-head{margin-bottom:32px}
  .ld-title{font-size:clamp(2.25rem,3.4vw,3.25rem)}
  .ld-stage{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
  .ld-group+.ld-group{margin-top:22px}
  .ld-item{grid-template-columns:9rem minmax(0,1fr);column-gap:20px}
  .ld-btn{grid-column:2;grid-row:1;min-height:40px;font-size:clamp(1.5rem,2.1vw,2rem)}
  .ld-figure{max-width:400px;justify-self:end;width:100%}
  .ld-role{grid-column:1;grid-row:1;margin:0;text-align:right;font-size:.8125rem}
  .leaders.is-live .ld-role{opacity:0}
  .leaders.is-live .ld-item.is-active .ld-role{opacity:1}
  .ld-group-label,.ld-org{margin-left:calc(9rem + 20px)}
  .ld-figure{position:sticky;top:96px}
}

/* Học đi đôi với hành (tin thực hành) */
.practice{margin-top:32px;padding-top:24px;border-top:1px solid var(--track)}
.practice-posts{display:grid;gap:10px}
@media (min-width:768px){.practice-posts{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
/* Thẻ ngang gọn: ảnh nhỏ bên trái, ngày + tiêu đề bên phải */
.practice .card{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:stretch}
.practice .card img{width:96px;height:100%;min-height:76px;aspect-ratio:auto;object-fit:cover}
.practice .card-body{padding:10px 14px;align-self:center}
.practice .card-body h4{font-size:.9375rem;margin-top:2px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* ===================== 14. GIẢM CHUYỂN ĐỘNG ===================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal.is-hidden{opacity:1;transform:none}
  .slide img,.hero-photo img,.hero-media,.hero-inner,[data-parallax]>img{transform:none!important}
  .is-split-hidden .split-w>span{transform:none;opacity:1}
  .site-header.is-nav-hidden{transform:none}
}

.ab-link{grid-column:2;justify-self:start;display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:.9375rem;color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.ab-link:hover{color:var(--brand-900)}
@media (min-width:900px){.ab-link{grid-column:1}}


/* ===================== SỬA LỖI HIỂN THỊ ĐIỆN THOẠI ===================== */
/* Chân trang: cột đơn phải co được, nếu không email dài đẩy cả trang rộng quá màn hình */
@media (max-width:767px){.footer-grid{grid-template-columns:minmax(0,1fr)}}
.site-footer a,.site-footer dd,.site-footer dt,.site-footer p,.pg-prose li,.pg-prose a[href^="mailto:"]{overflow-wrap:anywhere}
/* Nút nổi (Zalo, điện thoại, Facebook): nhỏ và nhẹ hơn để ít che chữ */
@media (max-width:767px){
  .floating{right:10px;bottom:10px;gap:8px}
  .floating a{width:42px;height:42px;opacity:.94;box-shadow:0 4px 12px rgba(0,0,0,.22)}
  .floating svg{width:20px;height:20px}
  .f-zalo{font-size:.75rem}
}
/* Vùng bấm tối thiểu 44 px cho liên kết dạng nút */
.ts-steps a,#yt-open{min-height:44px}
#yt-open{display:inline-flex;align-items:center}

/* Màn hình rất hẹp (dưới 360 px): thanh đầu trang thu gọn không đủ chỗ cho logo, tên trường, nút Đăng ký và nút menu */
@media (max-width:359px){
  .site-header.is-compact .brand img{width:34px;height:34px}
  .site-header.is-compact .brand-name{font-size:.78rem}
  .site-header.is-compact .header-cta{padding:4px 10px}
  .menu-toggle{width:40px;height:40px}
  .brand{gap:8px}
}

/* Thanh menu ổn định khi cuộn: chiều cao khung menu không đổi giữa trạng thái đầu trang và thu nhỏ,
   nên nội dung bên dưới không bị đẩy lên xuống (nguyên nhân gây rung). Thanh trên cùng (hotline) cuộn đi
   cùng trang nhờ vị trí dính top âm; thanh chính luôn dính ở đầu màn hình. */
.site-header{top:calc(var(--tbh,40px) * -1)!important;will-change:transform!important}
.site-header .topbar,.site-header.is-compact .topbar{max-height:none!important;transition:none!important}
.site-header .mainbar,.site-header.is-compact .mainbar{min-height:60px!important}
.site-header .brand img,.site-header.is-compact .brand img{width:44px!important;height:44px!important}
@media (min-width:768px){
  .site-header .mainbar,.site-header.is-compact .mainbar{min-height:68px!important}
  .site-header .brand img,.site-header.is-compact .brand img{width:50px!important;height:50px!important}
}
@media (min-width:1024px){
  .site-header .mainbar,.site-header.is-compact .mainbar{min-height:76px!important}
  .site-header .brand img,.site-header.is-compact .brand img{width:58px!important;height:58px!important}
}
.site-header .brand-name{transition:none!important}
.site-header.is-compact{box-shadow:0 6px 18px -12px rgba(0,38,79,.45)!important}

/* ===== Mega menu "Chương trình đào tạo": hình thức + 5 khối + 19 ngành ===== */
.sub--mega{padding:0 0 12px 0}
.sub--mega .sub-label{margin-top:10px}
.mg-side ul,.mg-k ul{list-style:none;margin:0;padding:0}
.mg-all{display:inline-flex!important;align-items:center;gap:8px;margin-top:6px;font-weight:700;color:var(--brand)!important}
.mg-all .arrow{width:14px;height:14px}
.mg-cols{display:grid;gap:4px}
.mg-label{display:block}
.mg-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;border-left:5px solid var(--tk);padding-left:10px}
.mg-h{flex:1;display:flex!important;flex-direction:column;align-items:flex-start!important;justify-content:center;flex-wrap:nowrap!important;text-align:left;min-height:44px;padding:6px 0;font-weight:600;color:var(--ink)!important;text-decoration:none}
.mg-h small{display:block;font-size:.75rem;font-weight:500;color:var(--muted)}
.mg-tg{display:grid;place-items:center;width:44px;height:44px;flex:none;color:var(--ink)}
.mg-tg .chev{width:16px;height:16px;transition:transform var(--t-fast) var(--ease)}
.mg-k.is-open .mg-tg .chev{transform:rotate(180deg)}
.mg-k ul{display:none;padding:0 0 8px 15px}
.mg-k.is-open ul{display:block}
.mg-k ul a{min-height:38px;font-size:.9375rem}
@media (min-width:1280px){
  .mainbar{position:relative}
  .nav-list>li.has-mega{position:static}
  .sub--mega{left:0;right:0;min-width:0;padding:22px 26px 26px;border-radius:0 0 12px 12px;grid-template-columns:230px minmax(0,1fr);gap:30px}
  .has-mega:hover>.sub--mega,.has-mega:focus-within>.sub--mega,.has-mega.is-open>.sub--mega{display:grid}
  .sub--mega .sub-label{margin-top:0;margin-bottom:6px}
  .mg-side{padding-right:24px;border-right:1px solid var(--track)}
  .mg-cols{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px 20px;align-content:start}
  .mg-label{grid-column:1 / -1}
  .mg-hd{margin-top:0;border-left-width:4px}
  .mg-tg{display:none}
  .mg-k ul{display:block;padding:6px 0 0 14px}
  .mg-k ul a{min-height:34px;padding:4px 0;line-height:1.3}
}