:root{
  --bg:#0b0f1a;          
  --panel:#10182a;      
  --muted:#9bb0d1;       
  --text:#e7eefc;        
  --brand:#5aa9ff;       
  --brand-2:#7ef0ff;     
  --accent:#ffd166;      
  --ok:#2dd4bf;          
  --danger:#ff6b6b;      
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:radial-gradient(1200px 800px at 10% -10%,rgba(90,169,255,.15),transparent 60%),radial-gradient(1000px 700px at 120% 0%,rgba(126,240,255,.1),transparent 60%),var(--bg);color:var(--text)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;padding:32px;border-radius:var(--radius);background:linear-gradient(135deg,rgba(16,24,42,.9),rgba(16,24,42,.6));box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:-2px;pointer-events:none;background:radial-gradient(500px 180px at 20% 0%,rgba(90,169,255,.25),transparent 60%),radial-gradient(600px 200px at 60% 100%,rgba(126,240,255,.18),transparent 60%)}
.title{font-size:clamp(28px,3.4vw,44px);line-height:1.15;margin:0 0 8px}
.subtitle{margin:0 0 18px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.chip{padding:6px 10px;border-radius:999px;background:rgba(90,169,255,.12);border:1px solid rgba(90,169,255,.25);color:#cfe6ff;font-size:13px}
.cta{display:flex;gap:12px;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid transparent;cursor:pointer;background:var(--ok);color:#08262a;font-weight:600;box-shadow:var(--shadow)}
.btn.secondary{background:transparent;color:var(--text);border-color:rgba(255,255,255,.18)}
.hero-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);padding:18px 16px;border-radius:16px}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.hero{grid-template-columns:1fr}.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}


.section{margin:36px 0}
.section h2{font-size:clamp(22px,2.4vw,30px);margin:0 0 14px}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card .photo{aspect-ratio:4/3;background:#0a1426;position:relative;overflow:hidden}
.card .photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.05)}
.card .body{padding:14px 16px}
.role{font-size:13px;color:var(--muted)}
.name{font-size:18px;font-weight:700;margin:2px 0 6px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{font-size:12px;color:#0a1726;background:var(--accent);padding:4px 8px;border-radius:999px}
.social{display:flex;gap:10px;margin-top:10px}
.social a{display:inline-flex;padding:8px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}


.timeline{position:relative;padding-left:26px}
.timeline:before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:linear-gradient(var(--brand),transparent)}
.t{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:10px 12px;margin:10px 0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px}
.t .time{font-weight:700;color:#d4e7ff}
.t .what{display:flex;flex-direction:column}
.t .what .talk{font-weight:700}
.t .who{color:var(--muted)}


.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:24px}
.modal:target{display:flex}
.modal .sheet{max-width:760px;width:100%;background:var(--panel);border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.sheet .head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.sheet .content{padding:16px}
.close{display:inline-flex;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}


footer{margin:36px 0 10px;color:var(--muted);text-align:center}
.note{font-size:13px;color:var(--muted)}


.speakers-swiper { padding: 6px 32px; }    
.speakers-swiper .swiper-slide { height: auto; }


.speakers-swiper .card { height: 100%; display: flex; flex-direction: column; }
.speakers-swiper .card .photo { aspect-ratio: 4 / 3; background: #0a1426; overflow: hidden; }
.speakers-swiper .card .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }


.speakers-swiper .swiper-button-prev,
.speakers-swiper .swiper-button-next {
  color: #e7eefc;  
}
.speakers-swiper .swiper-pagination-bullet { background: rgba(255,255,255,.35); }
.speakers-swiper .swiper-pagination-bullet-active { background: #5aa9ff; }

html[data-theme="light"]{
  --bg:#f6f8fc;          
  --panel:#ffffff;      
  --muted:#5a6a80;        
  --text:#0f172a;        
  --brand:#2563eb;        
  --brand-2:#06b6d4;      
  --accent:#f59e0b;       
  --ok:#10b981;            
  --danger:#ef4444;
  --radius:18px;
  --shadow:0 10px 30px rgba(13,23,38,.08);
}


html[data-theme="light"] body{
  background:
    radial-gradient(900px 600px at 10% -10%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(800px 520px at 120% 0%, rgba(6,182,212,.08), transparent 60%),
    var(--bg);
  color:var(--text);
}

html[data-theme="light"] .hero{
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow:var(--shadow);
}
html[data-theme="light"] .hero:after{
  background:
    radial-gradient(500px 180px at 20% 0%, rgba(37,99,235,.15), transparent 60%),
    radial-gradient(600px 200px at 60% 100%, rgba(6,182,212,.12), transparent 60%);
}

html[data-theme="light"] .chip{
  background:rgba(37,99,235,.10);
  border-color:rgba(37,99,235,.28);
  color:#1e3a8a;
}

html[data-theme="light"] .btn.secondary{
  background:transparent;
  color:var(--text);
  border-color:rgba(13,23,38,.14);
}

html[data-theme="light"] .hero-card{
  background:rgba(13,23,38,.03);
  border:1px solid rgba(13,23,38,.10);
}

html[data-theme="light"] .card{
  background:var(--panel);
  border:1px solid rgba(13,23,38,.10);
  box-shadow:var(--shadow);
}
html[data-theme="light"] .card .photo{ background:#eef2f8; }

html[data-theme="light"] .social a{
  background:rgba(13,23,38,.04);
  border:1px solid rgba(13,23,38,.10);
}

html[data-theme="light"] .t{
  background:rgba(13,23,38,.03);
  border:1px solid rgba(13,23,38,.10);
}
html[data-theme="light"] .t .time{ color:#0f172a; }

html[data-theme="light"] .modal{ background:rgba(15,23,42,.45); }

html[data-theme="light"] .speakers-swiper .swiper-button-prev,
html[data-theme="light"] .speakers-swiper .swiper-button-next{
  color:#0f172a;
}
html[data-theme="light"] .speakers-swiper .swiper-pagination-bullet{
  background:rgba(15,23,42,.35);
}
html[data-theme="light"] .speakers-swiper .swiper-pagination-bullet-active{
  background:var(--brand);
}

.theme-toggle{
  position:fixed; right:18px; top:16px; z-index:50;
  padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); color:var(--text); cursor:pointer;
  box-shadow:var(--shadow);
}
html[data-theme="light"] .theme-toggle{
  background:#ffffff; border-color:rgba(13,23,38,.10);
}


.theme-toggle{
  position:fixed; right:18px; top:16px; z-index:1000;
  width:42px; height:42px; display:inline-grid; place-items:center;
  border-radius:12px; cursor:pointer; border:1px solid rgba(0,0,0,.1);
  background:rgba(255,255,255,.06); box-shadow:var(--shadow);
}
html[data-theme="light"] .theme-toggle{ background:#fff; border-color:rgba(13,23,38,.12); }

.theme-toggle .icon{ width:22px; height:22px; display:none; }
.theme-toggle .icon path{ fill:currentColor; }

html[data-theme="dark"]  .theme-toggle{ color:#ffd166; }
html[data-theme="dark"]  .theme-toggle .sun{ display:block; }

html[data-theme="light"] .theme-toggle{ color:#0b0f1a; }
html[data-theme="light"] .theme-toggle .moon{ display:block; }

.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;
}

.timeline{
  position: relative;
  padding-left: 52px;   
  margin-top: 8px;
  isolation: isolate;   
}
.timeline::before{
  content:"";
  position:absolute; left:26px; top:0; bottom:0;
  width:3px; border-radius:2px;
  background: linear-gradient(180deg, var(--brand), transparent 80%);
  opacity:.75;
}


.t{
  position: relative;
  display: grid;
  grid-template-columns: 170px 1fr; 
  gap: 18px;
  align-items: start;
  margin: 14px 0;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 16px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.t::before{
  content:"";
  position:absolute; left:-30px; top:22px;
  width:14px; height:14px; border-radius:50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(90,169,255,.15), 0 2px 12px rgba(0,0,0,.15);
}

.t:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
  border-color: rgba(37,99,235,.24); 
}


.t .time{
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.22);
  color: var(--text);
  width: max-content;
}


.t .what{ display:flex; flex-direction:column; }
.t .what .talk{ font-weight: 800; font-size: 20px; margin-bottom: 6px; }
.t .who{ color: var(--muted); }


html[data-theme="light"] .timeline::before{ opacity:.28; }
html[data-theme="light"] .t{
  background:#fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}
html[data-theme="light"] .t:hover{
  border-color: rgba(37,99,235,.24);
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
}
html[data-theme="light"] .t .time{ color:#0f172a; }


@media (max-width: 720px){
  .timeline{ padding-left: 24px; }
  .timeline::before{ left:10px; }
  .t{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }
  .t::before{ left:-16px; top:18px; }
  .t .time{ font-size: 14px; padding: 6px 10px; }
}

.sponsor-bar { margin: 8px 0 24px; }
.sponsor-wrap{
  background: var(--panel);           
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .sponsor-wrap{
  border-color: rgba(255,255,255,.10);
}

.sponsor-logos{
  display: flex;
  flex-wrap: wrap;                      
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  justify-content: center;
}

.sponsor{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(90px, 20vw, 180px);
  padding: 8px 10px;
  border-radius: 12px;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.sponsor:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}
html[data-theme="light"] .sponsor:hover{
  background: rgba(15,23,42,.04);
}

.sponsor img{
  display: block;
  height: clamp(36px, 6vw, 90px);         /* mức “mặc định” */
  width: auto;
  filter: saturate(1.05) contrast(1.05);
  transition: filter .18s ease, opacity .18s ease;
  opacity: .95;
}
.sponsor:hover img{ opacity: 1; }

.sponsor[aria-label="PTIT.AI"] img{
  height: clamp(48px, 8vw, 120px);        /* PTIT cao hơn */
}
.sponsor[aria-label="APSIPA ASC 2025"] img{
  height: clamp(40px, 7vw, 90px);         /* APSIPA trung bình */
}
.sponsor[aria-label="Van Lang University"] img{
  height: clamp(28px, 5.5vw, 60px);       /* Van Lang nhỏ hơn */
}

@media (max-width: 520px){
  .sponsor-logos{ gap: 14px; }
  .sponsor{ min-width: 42%; }         
}

@media (prefers-reduced-motion: reduce){
  .sponsor, .sponsor img{ transition: none !important; }
}


.timeline::before { opacity:.45; transform:none; }
.timeline .t { opacity:1; transform:none; }

body.anim .timeline {
  position: relative;
  isolation: isolate;
  padding-left: 52px;
}
body.anim .timeline::before{
  content:"";
  position:absolute; left:26px; top:0; bottom:0;
  width:3px; border-radius:2px;
  background: linear-gradient(180deg, var(--brand), transparent 80%);
  opacity:.75;

  transform-origin: top;
  transform: scaleY(0);
  transition: transform 900ms cubic-bezier(.2,.8,.2,1);
}

body.anim .timeline.line-in::before{
  transform: scaleY(1);
}

body.anim .timeline .t{
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 420ms cubic-bezier(.2,.8,.2,1),
    transform 420ms cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--stagger, 0) * 70ms);
  will-change: transform, opacity;
}
body.anim .timeline .t.in{
  opacity: 1;
  transform: none;
}

body.anim .timeline .t::before{
  content:"";
  position:absolute; left:-30px; top:22px;
  width:14px; height:14px; border-radius:50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(90,169,255,.15);
  opacity:.25;
  transition: opacity 420ms ease;
  transition-delay: calc(var(--stagger, 0) * 70ms);
}
body.anim .timeline .t.in::before{ opacity:.9; }

@media (prefers-reduced-motion: reduce) {
  body.anim .timeline::before { transition-duration: 0ms; }
  body.anim .timeline .t { transition-duration: 0ms; transform:none; opacity:1; }
}

.role-badge{
  display:inline-block; margin-left:.5rem; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:700; line-height:1.6;
  border:1px solid transparent; vertical-align:middle; user-select:none;
}
.role-jury{ background:rgba(37,99,235,.14); border-color:rgba(37,99,235,.25); color:#cfe2ff; }
.role-gc  { background:rgba(16,185,129,.14); border-color:rgba(16,185,129,.25); color:#c7f7e9; }

html[data-theme="light"] .role-jury{ color:#1e3a8a; }
html[data-theme="light"] .role-gc  { color:#065f46; }

.role-badge{
  display:inline-block;
  margin-left:.5rem;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px; font-weight:700; line-height:1.6;
  border:1px solid transparent;
  vertical-align:middle; user-select:none;
}


.role-gc{
  background:rgba(16,185,129,.14);  
  border-color:rgba(16,185,129,.25);
  color:#c7f7e9;
}

.role-jury{
  background:rgba(37,99,235,.14);
  border-color:rgba(37,99,235,.25);
  color:#cfe2ff;
}

html[data-theme="light"] .role-gc{  color:#065f46; }
html[data-theme="light"] .role-jury{color:#1e3a8a; }
.card{ position:relative; }
.card.role-gc .photo::before{
  content:"General Chair";
  position:absolute; top:10px; left:10px;
  padding:4px 8px; font-size:11px; font-weight:800;
  border-radius:8px; color:#fff;
  background:rgba(16,185,129,.65);
  backdrop-filter:blur(4px);
}

.timeline{
  --line: rgba(15,23,42,.14);     
  --flow: var(--brand);          
}

.timeline::before{
  content:"";
  position:absolute; left:26px; top:0; bottom:0;
  width:3px; border-radius:2px;
  background: var(--line);
}

.timeline::after{
  content:"";
  position:absolute; left:26px; top:0; bottom:0;
  width:3px; border-radius:2px;
  background:
    linear-gradient(180deg, transparent 0%,
                             color-mix(in srgb, var(--flow) 65%, transparent) 12%,
                             transparent 24%);
  background-size: 100% 260px;    
  opacity:.35;
  filter: blur(.2px);
  transform: translateZ(0);      
}

.timeline.flow::after{ animation: timeline-flow 8s linear infinite; }

.t::before{
  content:"";
  position:absolute; left:-30px; top:22px;
  width:14px; height:14px; border-radius:50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(73, 80, 87, 0.12);
  opacity:.95;
}

.timeline.flow .t::before{
  animation: dot-ping 8s linear infinite;
  animation-delay: var(--glow-delay, 0s);
}

.timeline .t:nth-child(1){ --glow-delay: 0s; }
.timeline .t:nth-child(2){ --glow-delay: .9s; }
.timeline .t:nth-child(3){ --glow-delay: 1.8s; }
.timeline .t:nth-child(4){ --glow-delay: 2.7s; }
.timeline .t:nth-child(5){ --glow-delay: 3.6s; }
.timeline .t:nth-child(6){ --glow-delay: 4.5s; }
.timeline .t:nth-child(7){ --glow-delay: 5.4s; }
.timeline .t:nth-child(8){ --glow-delay: 6.3s; }
.timeline .t:nth-child(9){ --glow-delay: 7.2s; }


@keyframes timeline-flow{
  0%   { background-position: 0 -260px; }
  100% { background-position: 0 calc(100% + 260px); }
}
@keyframes dot-ping{

  0%, 35%   { box-shadow: 0 0 0 4px rgba(90,169,255,.12); opacity:.95; }

  37%       { box-shadow: 0 0 0 0  rgba(90,169,255,.18); transform: scale(1.02); }
  45%       { box-shadow: 0 0 0 10px rgba(90,169,255,0); transform: scale(1.04); }
  60%,100%  { box-shadow: 0 0 0 4px rgba(90,169,255,.12); transform:none; }
}


html[data-theme="light"] .timeline{ --line: rgba(15,23,42,.10); }


@media (prefers-reduced-motion: reduce){
  .timeline::after, .timeline.flow .t::before{ animation:none !important; }
}