:root{
  --navy:#071d4a; --navy1:#08265c; --navy2:#0b3d91; --blue:#1a73e8; --cyan:#22d3ee;
  --gold:#ffc93c; --ink:#f8fbff; --muted:#a9c2e6; --line:rgba(140,190,255,.28);
  --card:rgba(10,40,95,.55); --card2:rgba(6,28,70,.72);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#04122e;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}

/* ---------- sân khấu: khung 1280x720 tự scale ---------- */
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
/* flex:0 0 auto — bắt buộc: không có nó, cửa sổ nhỏ hơn 1280px sẽ co khung lại và làm vỡ layout slide */
#deck{position:relative;flex:0 0 auto;width:1280px;height:720px;transform-origin:center center;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.slide{position:absolute;inset:0;padding:64px 76px 76px;display:none;flex-direction:column;
  background:linear-gradient(120deg,#06214f 0%,#0a2f6d 45%,#0b3d91 100%);overflow:hidden}
.slide.on{display:flex;animation:in .32s ease both}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.slide::after{content:"";position:absolute;right:-60px;top:-80px;width:620px;height:620px;
  background:radial-gradient(circle at 70% 30%,rgba(34,211,238,.16),transparent 62%);pointer-events:none}

/* slide dùng ảnh nền ChatGPT */
.slide.bg{background:#06214f url("assets/bg.png") center/cover no-repeat}
.slide.bg::after{display:none}
.slide.bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,18,46,.82) 0%,rgba(5,25,62,.55) 52%,rgba(6,30,74,.12) 100%)}
.slide.bg>*{position:relative;z-index:2}

/* ---------- đầu trang ---------- */
.brand{display:flex;align-items:baseline;gap:12px;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.brand b{color:#dbeafe;letter-spacing:.1em}
.kicker{display:inline-block;font-size:14px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(255,201,60,.45);border-radius:999px;padding:6px 16px;margin-bottom:20px}
h1{font-size:60px;line-height:1.1;font-weight:800;letter-spacing:-.5px}
h2{font-size:42px;line-height:1.16;font-weight:800;margin-bottom:22px;letter-spacing:-.3px}
h2 .num{color:var(--gold);font-weight:800;margin-right:14px}
h3{font-size:24px;font-weight:700;margin-bottom:10px;color:#e8f2ff}
p,li{font-size:22px;line-height:1.55;color:#e6eefc}
.lead{font-size:26px;color:#cfe0fb;max-width:1000px}
.small{font-size:17px;color:var(--muted)}
strong{color:#fff}
em{color:var(--cyan);font-style:normal;font-weight:700}
hr.rule{border:0;height:3px;width:96px;background:linear-gradient(90deg,var(--gold),transparent);margin:18px 0 22px}

/* ---------- khối nội dung ---------- */
.body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px;min-height:0}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 24px}
.card .ico{font-size:32px;margin-bottom:10px;display:block}
.card p{font-size:19px;color:#d5e5fb}
.card.hi{background:linear-gradient(140deg,rgba(26,115,232,.55),rgba(11,61,145,.35));border-color:rgba(120,190,255,.5)}
ul{list-style:none;display:flex;flex-direction:column;gap:12px}
ul li{padding-left:34px;position:relative}
ul li::before{content:"";position:absolute;left:6px;top:12px;width:10px;height:10px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px rgba(255,201,60,.18)}
ol{counter-reset:s;list-style:none;display:flex;flex-direction:column;gap:14px}
ol li{counter-increment:s;padding-left:52px;position:relative}
ol li::before{content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:10px;
  background:var(--blue);color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center}

table{width:100%;border-collapse:collapse;font-size:19px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid rgba(140,190,255,.18)}
th{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
tbody tr:nth-child(even){background:rgba(10,40,95,.35)}
td b{color:var(--gold)}

/* prompt + nút copy */
.prompt{position:relative;background:#03122d;border:1px solid rgba(120,190,255,.35);border-radius:16px;
  padding:22px 26px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:17.5px;line-height:1.62;color:#cfe6ff;white-space:pre-wrap;overflow:auto;max-height:400px}
.prompt .ph{color:var(--gold);font-weight:700}
.copy{position:absolute;top:12px;right:12px;background:var(--blue);color:#fff;border:0;border-radius:10px;
  padding:8px 14px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.copy:hover{background:#2b84f5}
.copy.done{background:#16a34a}

.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(26,115,232,.28);
  border:1px solid rgba(120,190,255,.4);border-radius:999px;padding:8px 18px;font-size:18px}
.tag{font-size:15px;padding:4px 12px;border-radius:8px;background:rgba(255,201,60,.16);
  color:var(--gold);border:1px solid rgba(255,201,60,.35)}
.no{color:#ff9b9b}.yes{color:#7ee2a8}
.check li::before{content:"☐";background:none;box-shadow:none;font-size:22px;color:var(--cyan);top:-4px;left:0;width:auto;height:auto;border-radius:0}
.check li{padding-left:36px}

/* ---------- chân trang, HUD ---------- */
.foot{position:absolute;left:76px;right:76px;bottom:26px;display:flex;align-items:center;
  justify-content:space-between;font-size:14px;color:rgba(169,194,230,.75);z-index:3}
.progress{position:absolute;left:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--gold),var(--cyan));z-index:5;transition:width .3s}
#hud{position:fixed;right:16px;top:14px;display:flex;gap:8px;align-items:center;z-index:60;
  font-size:13px;color:#cfe0fb;font-variant-numeric:tabular-nums}
#hud .box{background:rgba(4,18,46,.82);border:1px solid rgba(140,190,255,.3);border-radius:10px;padding:7px 12px}
#timer.run{border-color:rgba(126,226,168,.6);color:#9ff0c2}
#help{position:fixed;left:16px;bottom:14px;font-size:12.5px;color:rgba(169,194,230,.6);z-index:60}
#black{position:fixed;inset:0;background:#000;z-index:200;display:none}

/* ---------- xem trước dạng thumbnail ---------- */
#grid{position:fixed;inset:0;background:rgba(3,12,32,.97);z-index:150;display:none;overflow:auto;padding:26px 30px 40px}
#grid.on{display:block}
#grid h4{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
#grid h4 span{color:#7fb2ff;text-transform:none;letter-spacing:0;font-size:13px;margin-left:10px}
#grid .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}

.it{position:relative;cursor:pointer;border-radius:12px;overflow:hidden;
  border:2px solid rgba(140,190,255,.22);background:#06214f;transition:border-color .15s,transform .15s}
.it:hover{border-color:rgba(120,190,255,.75);transform:translateY(-2px)}
.it.cur{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,201,60,.22)}
.it.sel{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.3)}
/* khung tỉ lệ 16:9, chứa bản thu nhỏ của slide thật */
.it .shot{position:relative;width:100%;padding-top:56.25%;overflow:hidden;background:#06214f}
.it .shot .inner{position:absolute;top:0;left:0;width:1280px;height:720px;transform-origin:top left;
  pointer-events:none;user-select:none}
.it .shot .inner .slide{display:flex!important;position:absolute;inset:0;animation:none!important}
.it .shot .inner .progress,.it .shot .inner .copy{display:none!important}
.it .cap{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(4,18,46,.92);
  font-size:12.5px;color:#cfe0fb;line-height:1.3}
.it .cap b{flex:0 0 auto;min-width:22px;height:22px;border-radius:6px;background:var(--blue);color:#fff;
  font-size:12px;display:flex;align-items:center;justify-content:center}
.it .cap span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* dải thumbnail nhỏ khi đang trình chiếu */
#strip{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;gap:10px;padding:10px 14px;
  background:rgba(3,12,32,.94);border-top:1px solid rgba(140,190,255,.25);overflow-x:auto;overflow-y:hidden}
#strip.on{display:flex}
#strip .it{flex:0 0 150px}
#strip .it .cap{padding:4px 7px;font-size:11px}
#strip .it .cap b{min-width:18px;height:18px;font-size:10.5px}

/* ---------- slide bản quyền: video dọc ---------- */
.vids{display:flex;gap:14px}
.vidbox{flex:1;position:relative}
.vidbox video{width:100%;aspect-ratio:9/16;max-height:330px;display:block;border-radius:14px;
  background:#000;border:1px solid rgba(140,190,255,.3);object-fit:contain}
/* khi bấm nút toàn màn hình của video: bỏ mọi giới hạn kích thước của slide,
   nếu không video dọc sẽ bị giới hạn 330px rồi phóng/cắt sai tỉ lệ */
.vidbox video:fullscreen,
.vidbox video:-webkit-full-screen{
  width:100%;height:100%;max-height:none;max-width:none;aspect-ratio:auto;
  object-fit:contain;border:0;border-radius:0;background:#000}
.vidbox .lb{margin-top:8px;font-size:13px;color:var(--muted);line-height:1.35;text-align:center}
.law{display:flex;gap:10px;align-items:flex-start;font-size:19px;line-height:1.5;color:#e6eefc}
.law .k{flex:0 0 auto;font-size:15px;font-weight:700;padding:3px 10px;border-radius:8px;
  background:rgba(255,201,60,.16);color:var(--gold);border:1px solid rgba(255,201,60,.35);white-space:nowrap}

/* nút "Xem lớn" trên mỗi video + lớp phủ xem video giữa màn hình.
   Không dùng Fullscreen API: phần tử fullscreen nằm trong ancestor có transform
   bị trình duyệt phóng sai tỉ lệ, nên tự dựng lớp phủ cho chắc. */
.vidbox .big{position:absolute;top:8px;right:8px;z-index:4;background:rgba(4,18,46,.86);
  color:#dbeafe;border:1px solid rgba(140,190,255,.45);border-radius:9px;padding:5px 10px;
  font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;line-height:1}
.vidbox .big:hover{background:var(--blue);color:#fff}
#cine{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;
  background:rgba(2,8,22,.96);padding:26px}
#cine.on{display:flex}
#cine video{max-width:min(52vh,96vw);max-height:92vh;width:auto;height:auto;
  border-radius:14px;background:#000;box-shadow:0 24px 70px rgba(0,0,0,.7)}
#cine .x{position:absolute;top:18px;right:22px;background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:9px 16px;font-size:15px;
  font-weight:600;cursor:pointer;font-family:inherit}
#cine .x:hover{background:rgba(255,255,255,.2)}
#cine .cap{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:14px;color:#a9c2e6}