/* ATD × UEH — Digital Skills to Success 2026.
   Bảng màu riêng của /about-atd/, tách khỏi hệ coral/orange/amber của /workshop-atd/ và /about-leonix/:
   giữ đôi màu gốc của ATD — xanh dương–xanh ngọc #005c68 (học thuật, UEH) và cam #F16D2E (hành động, CTA).
   Dark mode KHÔNG copy nguyên bộ số cũ mà được suy ra từ chính 2 màu gốc này: tăng độ sáng/giảm bão hòa
   vừa đủ để giữ đúng "chất" xanh–cam nhưng vẫn đọc tốt trên nền tối.
   Bố cục vay mượn vài chi tiết đặc trưng của bản gốc (hero gradient chéo, viền trên đổi màu xen kẽ,
   nút bo góc vừa phải thay vì pill tròn) để giữ /about-atd/ có cá tính riêng so với 2 trang kia,
   trong khi vẫn dùng chung font, cấu trúc header/nav/footer và vài component (checklist, steps, tag). */
:root{
  --blue:#005c68;--blue-deep:#003f49;--blue-pale:#e8f3f4;
  --orange:#F16D2E;--orange-pale:#fff0e8;--on-orange:#fff;
  --ueh:#0B4DA2;--ueh-soft:rgba(11,77,162,.09);
  --ink:#0b333b;--charcoal:#2b4448;--slate:#587177;--stone:#8aa3a7;
  --bone:#eef3f3;--paper:#fbfdfd;--white:#fff;
  --surface:#fff;--surface-2:#eef6f6;--border:#d7e4e5;--soft:rgba(241,109,46,.09);
  --shadow:0 1px 2px rgba(0,63,73,.05),0 10px 26px rgba(0,63,73,.07);
  --shadow-lift:0 2px 6px rgba(0,63,73,.06),0 18px 40px rgba(0,63,73,.12);
  --r-xl:16px;--r-lg:12px;--r-md:9px;--r-sm:6px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-display:"Be Vietnam Pro",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-body:Inter,"Be Vietnam Pro",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
/* Dark mode — suy ra từ --blue (#005c68) và --orange (#F16D2E) gốc:
   + --blue giữ nguyên hue (~186°) nhưng tăng độ sáng ~28%→62% để nổi trên nền tối.
   + --orange giữ hue (~19°) nhưng tăng sáng nhẹ + giảm bão hòa một chút cho đỡ chói.
   + --ueh (navy UEH) tăng sáng tương tự để vẫn phân biệt được với --blue.
   + Nền/bề mặt dùng chính hue xanh ngọc ở độ sáng rất thấp thay vì đen trung tính,
     giữ cảm giác "ATD" nhất quán giữa 2 chế độ sáng/tối. */
@media (prefers-color-scheme: dark){
  :root{
    --blue:#4FC7D3;--blue-deep:#8FE1E9;--blue-pale:#0e2a2d;
    --orange:#FF9A5C;--orange-pale:rgba(255,154,92,.14);--on-orange:#fff;
    --ueh:#7FA9E8;--ueh-soft:rgba(127,169,232,.14);
    --ink:#EAF3F2;--charcoal:#CFE3E3;--slate:#9FBDC0;--stone:#6f9195;
    --bone:#141a1b;--paper:#0a0d0e;--white:#101516;
    --surface:#101516;--surface-2:#161d1e;--border:#212a2b;--soft:rgba(255,154,92,.14);
    --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.3);
    --shadow-lift:0 2px 6px rgba(0,0,0,.4),0 18px 42px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);background:var(--paper);color:var(--charcoal);
  line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:4px}
::selection{background:rgba(241,109,46,.28)}

.shell{max-width:1120px;margin:auto;padding:0 24px}
.section{padding:64px 0;scroll-margin-top:84px}
.section + .section{border-top:1px solid var(--border)}
.section-alt{background:var(--surface-2)}
.center{text-align:center}

h1,h2,h3{font-family:var(--font-display);color:var(--ink);letter-spacing:-.015em;line-height:1.15;margin:0}
h1{font-size:clamp(34px,5vw,58px);font-weight:700;line-height:1.05;margin:18px 0 20px}
h2{font-size:clamp(25px,3.2vw,36px);font-weight:600;margin:12px 0 14px;padding-bottom:12px;position:relative}
h2::after{content:"";position:absolute;left:0;bottom:0;width:52px;height:3px;background:var(--orange);border-radius:2px}
h2.center::after{left:50%;transform:translateX(-50%)}
h3{font-size:19px;font-weight:600;margin:0 0 8px}
p{margin:0}
strong{font-weight:600;color:var(--ink)}
.lead{font-size:clamp(17px,1.9vw,20px);color:var(--slate);max-width:66ch}
.sub{color:var(--slate);max-width:70ch;margin-top:4px}
.tagline{font:600 clamp(17px,2vw,21px)/1.5 var(--font-display);margin:16px 0 0;color:var(--blue)}

.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--orange);
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.eyebrow::before{content:"";width:18px;height:2px;background:currentColor;border-radius:2px}
.bi{line-height:1;display:inline-block}
.gradient-text{color:var(--orange)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border)}
.site-header .shell{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:64px;flex-wrap:wrap}
.nav-toggle{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);
  font-size:19px;line-height:1;cursor:pointer;transition:border-color .15s var(--ease)}
.nav-toggle:hover{border-color:var(--orange)}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:700;color:var(--ink)}
.brand-logo-link,.partner-logo-link{display:flex;align-items:center}
.brand .logo{height:24px;width:auto;display:block}
.brand .logo-dark-bg{display:none}
@media (prefers-color-scheme: dark){
  .brand .logo-light-bg{display:none}
  .brand .logo-dark-bg{display:block}
}
.brand .cross{color:var(--stone);font-weight:400}
.brand .partner-logo{height:24px;width:auto;display:block}
.header-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
nav[data-site-nav]{display:flex;gap:18px;flex-wrap:wrap}
nav[data-site-nav] a{color:var(--slate);font-size:14px;font-weight:500;padding:4px 0;
  border-bottom:2px solid transparent;transition:color .15s var(--ease)}
nav[data-site-nav] a:hover{color:var(--ink)}
nav[data-site-nav] a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--blue)}
.btn-header{padding:9px 18px;font-size:14px;border-radius:999px;font-weight:600;
  background:linear-gradient(90deg,#F04B2D 0%,#F0782D 52%,#F0A53C 100%);
  box-shadow:var(--shadow)}
.btn-header:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift)}

/* ---------- Buttons ---------- */
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;
  border-radius:var(--r-sm);font-family:var(--font-body);font-weight:700;font-size:15px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),border-color .15s var(--ease)}
.btn-primary{background:#F16D2E;color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn-ghost{border-color:var(--border);color:var(--blue);background:var(--surface)}
.btn-ghost:hover{border-color:var(--blue);background:var(--blue-pale)}
.btn-lg{padding:15px 30px;font-size:16px}

/* ---------- Hero ---------- */
.hero{padding:64px 0 56px;background:linear-gradient(120deg,var(--paper) 30%,var(--blue-pale) 100%)}
.hero .lead{margin:16px 0 26px}

/* ---------- Fact chips ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:28px 0 0}
.fact{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--shadow)}
.fact .bi{font-size:18px;color:var(--orange);margin-top:2px}
.fact .v{font-size:15px;font-weight:700;color:var(--ink);line-height:1.4}
.fact .n{font-size:13px;color:var(--slate);line-height:1.5;margin-top:2px}

/* ---------- Callout / big idea ---------- */
.callout{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--blue);
  border-radius:var(--r-lg);padding:28px 30px;box-shadow:var(--shadow)}
.callout .q{font-family:var(--font-display);font-size:clamp(18px,2.2vw,23px);font-weight:600;
  color:var(--ink);line-height:1.4;letter-spacing:-.01em}
.callout .bi{color:var(--orange);font-size:20px;margin-right:8px}

/* ---------- Generic grids & cards ---------- */
.grid{display:grid;gap:16px;margin-top:32px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--blue);
  border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.card:nth-child(even){border-top-color:var(--orange)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.card .ico{width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--soft);color:var(--orange);font-size:18px;margin-bottom:14px}
.card .n{font-family:var(--font-display);font-weight:700;color:var(--stone);font-size:13px}
.card p{font-size:15px;color:var(--slate)}

.checklist{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.checklist li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  font-size:15px;color:var(--slate)}
.checklist .bi{color:var(--orange);font-size:16px;margin-top:4px}

/* ---------- Pillars (trụ cột) ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:32px}
.pillar{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--orange);
  border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow)}
.pillar:nth-child(even){border-top-color:var(--blue)}
.pillar .n{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--orange)}
.pillar:nth-child(even) .n{color:var(--blue)}
.pillar h3{margin:10px 0 6px;font-size:16px}
.pillar p{font-size:14px;color:var(--slate);line-height:1.6}

/* ---------- Fact line ---------- */
.factline{margin-top:26px;padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  font-size:13px;font-weight:700;color:var(--ink);display:flex;flex-wrap:wrap;gap:8px 4px}
.factline span.sep{color:var(--orange);padding:0 4px}

/* ---------- Program cards ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:999px;
  padding:4px 11px;border:1px solid var(--border);color:var(--slate);background:var(--paper);white-space:nowrap}
.tag-leonix{color:var(--orange);border-color:color-mix(in srgb,var(--orange) 40%,transparent);background:var(--soft)}
.tag-ueh{color:var(--ueh);border-color:color-mix(in srgb,var(--ueh) 40%,transparent);background:var(--ueh-soft)}
.program{display:flex;flex-direction:column}
.program h3{margin-top:14px;font-size:18px}
.program .eng{font-size:13px;font-weight:700;color:var(--blue);margin-bottom:10px}
.program p{font-size:14px;color:var(--slate)}
.program .modules{margin-top:auto;padding-top:14px;border-top:1px dashed var(--border);
  font-size:12.5px;color:var(--slate);line-height:1.6}

/* ---------- Level cards ---------- */
.level .n{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--stone);letter-spacing:.06em}
.level h3{margin:10px 0 4px;font-size:18px}

/* ---------- Steps (quy trình) ---------- */
.steps{counter-reset:step;margin-top:32px;display:grid;gap:0}
.step{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:20px 0;border-bottom:1px dashed var(--border)}
.step:last-child{border-bottom:0}
.step .num{counter-increment:step;font-family:var(--font-display);font-weight:700;font-size:15px;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--blue);color:var(--blue);background:var(--surface)}
.step:nth-child(even) .num{border-color:var(--orange);color:var(--orange)}
.step h3{font-size:16px;margin-bottom:4px}
.step p{font-size:15px;color:var(--slate)}

/* ---------- Metrics ---------- */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;margin-top:36px;
  border-top:1px solid var(--border);border-left:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow)}
.metric{padding:26px 24px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.metric b{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4vw,46px);
  line-height:1;color:var(--orange)}
.metric span{display:block;margin-top:10px;font-size:13px;color:var(--slate);line-height:1.5}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start;margin-top:32px}
.contact-info{margin-top:22px;display:grid;gap:12px}
.contact-info .row{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--slate)}
.contact-info .bi{color:var(--orange);font-size:16px;margin-top:3px}
.contact-info a{color:var(--blue);font-weight:700}
.contact-info a:hover{color:var(--orange)}
.offer{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:30px;box-shadow:0 10px 0 var(--orange-pale),var(--shadow-lift)}
.offer .badge{display:inline-flex;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--orange);background:var(--soft);border-radius:999px;padding:5px 13px;
  border:1px solid color-mix(in srgb,var(--orange) 35%,transparent)}
.offer h3{margin:14px 0 2px;font-size:22px;color:var(--blue-deep)}
.offer em{font-size:13px;color:var(--slate);font-style:normal}
.offer ol{padding-left:20px;font-size:14px;color:var(--slate);margin:20px 0;display:grid;gap:8px}
.offer li::marker{color:var(--orange);font-weight:700}

/* ---------- Diễn giả ---------- */
.speaker{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start;margin-top:36px}
.speaker-photo{margin:0;position:sticky;top:96px;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--border);border-top:3px solid var(--orange);background:var(--surface);
  box-shadow:0 10px 0 var(--orange-pale),var(--shadow-lift)}
.speaker-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center top}
.roles{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.roles li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;background:var(--surface);
  border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:var(--r-md);
  padding:12px 16px;box-shadow:var(--shadow);font-size:15px;font-weight:600;color:var(--ink);line-height:1.5}
.roles li:nth-child(even){border-left-color:var(--orange)}
.roles .bi{color:var(--orange);font-size:17px;margin-top:3px}
.speaker-sub{display:flex;align-items:center;gap:10px;margin:32px 0 16px;font-size:14px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.speaker-sub .bi{color:var(--orange);font-size:17px}
.research-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:26px}
.research{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--blue);
  border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow)}
.research:nth-child(even){border-top-color:var(--orange)}
.research h4{font:600 16px/1.3 var(--font-display);color:var(--ink);margin:0 0 6px}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:12px 0;border-bottom:1px dashed var(--border);
  font-size:14px;color:var(--slate);line-height:1.6}
.timeline li:last-child{border-bottom:0;padding-bottom:0}
.timeline b{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--orange);padding-top:1px}
.research:nth-child(odd) .timeline b{color:var(--blue)}
.timeline em{display:block;font-style:normal;font-size:12.5px;margin-top:4px}
.timeline .venue{color:var(--stone);font-weight:600}
.timeline .pill{display:inline-block;font-weight:700;color:var(--blue);background:var(--blue-pale);
  border-radius:999px;padding:2px 10px;font-size:12px}
.research .more{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:13.5px;
  font-weight:600;color:var(--ink)}
@media (max-width:850px){
  .speaker{grid-template-columns:1fr;gap:28px}
  .speaker-photo{position:static;max-width:300px}
}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 16px;
  background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);display:none}
.sticky-cta .btn{width:100%}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border);padding:28px 0;margin-top:16px}
.site-footer .shell{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--stone);font-size:13px}
.site-footer .shell > span:last-child{margin-left:auto}
.site-footer a{color:var(--slate)}
.site-footer a:hover{color:var(--orange)}

@media (max-width:850px){
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .section{padding:48px 0}
  .hero{padding:44px 0 40px}
  .callout,.offer{padding:22px}
  .sticky-cta{display:block}
  body{padding-bottom:72px}
  .metric{border-right:0}

  .nav-toggle{display:inline-flex}
  .header-right{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:4px;width:auto;justify-content:flex-start;background:var(--paper);border-bottom:1px solid var(--border);
    padding:10px 20px 18px;box-shadow:var(--shadow-lift);max-height:0;opacity:0;overflow:hidden;
    pointer-events:none;transition:max-height .2s var(--ease),opacity .15s var(--ease)}
  .header-right.is-open{max-height:320px;opacity:1;pointer-events:auto}
  nav[data-site-nav]{flex-direction:column;gap:0;width:100%}
  nav[data-site-nav] a{padding:12px 2px;border-bottom:1px solid var(--border)}
  nav[data-site-nav] a:last-child{border-bottom:none}
  .btn-header{width:100%;margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}