:root{
  --bg:#ffffff; --bg-soft:#f6f6f8; --bg-hover:#eeeef1; --ph:#e9e9ed;
  --fg:#16161a; --fg-dim:#65656f; --fg-faint:#9a9aa4;
  --line:#e4e4e9; --line-soft:#efeff3;
  --accent:#2563eb; --accent-ink:#ffffff;
  --radius:12px; --header-h:60px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--fg);
  font:15px/1.5 ui-sans-serif,-apple-system,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased; overflow-y:scroll;
}
button{font:inherit; color:inherit}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(18px) saturate(1.6); -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid var(--line);
  padding-top:var(--sat);
}
.bar{display:flex; align-items:center; gap:16px; height:var(--header-h); padding:0 22px; max-width:1800px; margin:0 auto}
.brand{display:flex; flex-direction:column; gap:1px; margin-right:auto; min-width:0}
#home{text-decoration:none; color:inherit; display:block}
#home:hover b{opacity:.65}
.brand b{cursor:pointer; font-size:16px; font-weight:680; letter-spacing:-.018em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand span{font-size:12.5px; color:var(--fg-dim); font-variant-numeric:tabular-nums; white-space:nowrap}


.btn{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:8px 14px;
  border-radius:9px; border:1px solid var(--line); background:var(--bg); color:var(--fg);
  font-size:13px; font-weight:560; cursor:pointer; transition:background .14s,border-color .14s,opacity .14s;
}
.btn:hover{background:var(--bg-hover)}
.btn:disabled{opacity:.55; cursor:default}
.btn.on{background:#1743a8; color:#fff; border-color:#1743a8}
.btn svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn.primary:hover{background:#1d4fd8}

.chips{display:flex; gap:6px; padding:0 22px 2px; max-width:1800px; margin:0 auto;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; padding:5px 13px; border-radius:99px; border:1px solid var(--line);
  background:var(--bg); color:var(--fg-dim); font-size:12.5px; font-weight:560;
  cursor:pointer; white-space:nowrap; transition:background .14s,color .14s,border-color .14s;
}
.chip:hover{background:var(--bg-hover); color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--fg); color:#fff; border-color:var(--fg); font-weight:650}

/* ---------- timeline chương ---------- */
.chapters{
  display:flex; gap:22px; padding:0 22px 11px; max-width:1800px; margin:0 auto;
  overflow-x:auto; scrollbar-width:none;
}
.chapters::-webkit-scrollbar{display:none}
.ch{
  flex:0 0 auto; min-width:104px; text-align:left; padding:9px 0 0; background:none; border:none;
  border-top:2px solid var(--line); color:var(--fg-faint); cursor:pointer;
  transition:color .14s,border-color .14s;
}
.ch:hover{color:var(--fg-dim); border-top-color:#cfcfd8}
.ch[aria-current="true"]{border-top-color:var(--accent); color:var(--fg)}
.ch b{display:block; font-size:13px; font-weight:620; letter-spacing:-.01em; white-space:nowrap}
.ch span{display:block; font-size:11.5px; color:var(--fg-faint); font-variant-numeric:tabular-nums; margin-top:1px; white-space:nowrap}

/* ---------- lưới ---------- */
#grid{position:relative; max-width:1800px; margin:0 auto; padding:18px 22px 90px}
#canvas{position:relative; width:100%}
.cell{
  position:absolute; overflow:hidden; border-radius:var(--radius); background:var(--ph);
  cursor:zoom-in; contain:strict; -webkit-tap-highlight-color:transparent;
}
.cell img{width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .32s ease}
.cell img.in{opacity:1}
.cell::after{
  content:''; position:absolute; inset:0; border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.07); pointer-events:none;
}


.load{text-align:center; padding:120px 20px; color:var(--fg-faint); font-size:14px}

/* ---------- lưới người ---------- */
#people{max-width:1800px;margin:0 auto;padding:18px 22px 90px;display:none}
#people.on{display:block}
#grid.off{display:none}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px}
.person{border:none;background:none;padding:0;cursor:pointer;text-align:center;display:flex;
  flex-direction:column;align-items:center;gap:7px;-webkit-tap-highlight-color:transparent}
.person img{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;background:var(--ph);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);transition:transform .16s,box-shadow .16s}
.person:hover img{transform:scale(1.045);box-shadow:0 5px 16px rgba(0,0,0,.16)}
.person span{font-size:12px;color:var(--fg-dim);font-variant-numeric:tabular-nums}

/* ---------- thanh đang lọc theo người ---------- */
.filterbar{display:none;align-items:center;gap:12px;max-width:1800px;margin:0 auto;
  padding:11px 22px 0}
.filterbar.on{display:flex}
.filterbar img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--ph)}
.filterbar b{font-size:14px}
.filterbar span{color:var(--fg-dim);font-size:13px;font-variant-numeric:tabular-nums}
.filterbar .btn{margin-left:auto}

/* ---------- hàng mặt trong lightbox ---------- */
.pswp__ai{position:absolute;left:0;right:0;bottom:calc(92px + var(--sab));z-index:11;
  display:flex;justify-content:center;pointer-events:none}
.pswp__ai .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;
  padding:4px 16px;max-width:760px;pointer-events:auto}
.pswp__ai button{flex:0 0 auto;width:var(--fs,44px);height:var(--fs,44px);border-radius:50%;
  border:2px solid #fff;padding:0;background:var(--ph);cursor:pointer;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.18);transition:transform .14s}
.pswp__ai button:hover{transform:scale(1.09)}
.pswp__ai img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- lightbox theo tông sáng ---------- */
.pswp{
  --pswp-bg:#fbfbfd;
  --pswp-icon-color:#16161a;
  --pswp-icon-color-secondary:#fff;
  --pswp-icon-stroke-width:0;
}
.pswp__counter{color:var(--fg-dim); opacity:1; font-variant-numeric:tabular-nums}

/* nút tải lớn, nằm giữa dưới ảnh */
.pswp__tai{
  position:absolute; left:0; right:0; bottom:calc(20px + var(--sab)); z-index:10;
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none;
}
.pswp-dl{
  pointer-events:auto; display:inline-flex; align-items:center; gap:9px;
  padding:12px 22px; border-radius:99px; text-decoration:none;
  background:var(--accent); color:#fff; font-size:14.5px; font-weight:620;
  box-shadow:0 6px 20px rgba(37,99,235,.34); transition:background .15s, transform .1s;
}
.pswp-dl:hover{background:#1d4fd8}
.pswp-dl:active{transform:scale(.97)}
.pswp-dl svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.pswp__tai small{color:var(--fg-dim); font-size:12px; font-variant-numeric:tabular-nums}

@media (max-width:720px){
  .pswp__tai{gap:7px; bottom:calc(16px + var(--sab))}
  .pswp-dl{padding:11px 20px; font-size:14px}
  .pswp__tai small{font-size:11.5px}
}

/* ---------- điện thoại ---------- */
@media (max-width:860px){
  :root{--header-h:auto; --radius:9px}
  #people{padding:12px 12px 90px}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:11px}
  .person span{font-size:11px}
  .filterbar{padding:9px 14px 0;gap:10px}
  .pswp__ai{bottom:calc(86px + var(--sab))}
  .pswp__ai .wrap{gap:6px;padding:4px 10px}
  .bar{display:flex; align-items:center; gap:12px; padding:12px 14px 2px; height:auto}
  .brand b{font-size:15px}
  .brand span{font-size:12px}
  #selBtn{padding:8px 11px}
  .chips{padding:0 14px 2px; gap:5px}
  .chip{padding:5px 11px; font-size:12px}
  .chapters{gap:16px; padding:10px 14px 10px; margin:0}
  .ch{min-width:88px; padding-top:8px}
  .ch b{font-size:12.5px}
  .ch span{font-size:11px}
  #grid{padding:10px 10px 100px}
  .hide-sm{display:none}
}
@media (max-width:400px){
  .brand span{font-size:11.5px}
}