/* Trình chiếu đào tạo (show.js): bảng dựng buổi học, màn chiếu 16:9, cửa sổ người dạy */
:root { --sh-ink: #22262B; --sh-cream: #FAF8F2; --sh-gold: #FFCB05; --sh-gold-ink: #8a6d00; --sh-mute: #6B7077; }

/* Bảng dựng buổi học */
.sh-build { display: grid; gap: 14px; }
.sh-step { padding: 16px 18px; }
.sh-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.sh-h b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sh-gold); color: var(--sh-ink); font-size: 14px; }
.sh-h h3 { margin: 0; font-size: 17px; }
.sh-all { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.sh-roles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sh-row { display: grid; grid-template-columns: 26px 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.sh-row.on { background: rgba(255, 203, 5, .08); }
.sh-row:last-child { border-bottom: 0; }
.sh-mid b { font-weight: 600; }
.sh-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sh-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sh-part { font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; color: inherit; }
.sh-part.on { background: var(--sh-ink); color: #fff; border-color: var(--sh-ink); }
.sh-run { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.sh-run label { display: flex; gap: 8px; align-items: center; }
.sh-run .btn-gold { font-size: 16px; padding: 10px 18px; }
.sh-save { display: flex; gap: 8px; flex-wrap: wrap; }
.sh-save .inp { flex: 1 1 260px; }
.sh-keys { margin-top: 10px; }
.sh-saved { display: grid; gap: 8px; }
.sh-sv { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink, inherit); }
@media (max-width: 640px) { .sh-row { grid-template-columns: 22px 24px minmax(0, 1fr); } .sh-row .sh-act { grid-column: 3; justify-content: flex-start; } .sh-sv { flex-direction: column; align-items: flex-start; } }

/* Màn chiếu */
body.sh-on { overflow: hidden; }
.sh-ov { position: fixed; inset: 0; z-index: 9999; background: #0d0f12; display: grid; place-items: center; outline: none; cursor: none; font-family: inherit; }
.sh-ov.hud { cursor: default; }
.sh-stage { position: relative; width: min(100vw, 177.78vh); height: min(56.25vw, 100vh); overflow: hidden; container-type: size; background: #111; }
.sh-s { position: absolute; inset: 0; transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; }
.fx-fade .sh-s { opacity: 0; } .fx-fade .sh-s.on { opacity: 1; }
.fx-slide .sh-s { transform: translateX(100%); } .fx-slide.back .sh-s { transform: translateX(-100%); }
.fx-slide .sh-s.on { transform: none; }
.fx-slide .sh-s.leave { transform: translateX(-100%); } .fx-slide.back .sh-s.leave { transform: translateX(100%); }
.fx-zoom .sh-s { opacity: 0; transform: scale(1.08); } .fx-zoom .sh-s.on { opacity: 1; transform: none; } .fx-zoom .sh-s.leave { opacity: 0; transform: scale(.96); }
.fx-none .sh-s { transition: none; opacity: 0; } .fx-none .sh-s.on { opacity: 1; }

.sv-img { background: #111; display: grid; place-items: center; }
.sv-img img { width: 100%; height: 100%; object-fit: contain; }
.sv-img:not(.full) { background: var(--sh-cream); padding: 4cqh 4cqw 9cqh; }
.sv-img:not(.full) img { filter: drop-shadow(0 1cqh 2cqh rgba(0, 0, 0, .12)); }
.sh-cap { position: absolute; left: 0; right: 0; bottom: 3cqh; text-align: center; color: var(--sh-ink); font-size: 1.7cqw; font-weight: 600; }

.sv-title { background: var(--sh-ink); color: var(--sh-cream); padding: 12cqh 8cqw; display: flex; flex-direction: column; justify-content: center; gap: 2.4cqh; }
.sv-title .sk, .sv-sec .sk { color: var(--sh-gold); font-size: 1.6cqw; font-weight: 700; letter-spacing: .25cqw; text-transform: uppercase; }
.sv-title h1 { margin: 0; font-size: 5.4cqw; line-height: 1.08; font-weight: 800; color: var(--sh-cream); }
.sv-title p { margin: 0; font-size: 2.1cqw; line-height: 1.45; color: #C9CDD2; max-width: 70cqw; }
.sv-title .sm { font-size: 1.35cqw; color: #9AA0A6; line-height: 1.6; }
.sv-title ul { margin: 0; padding-left: 2.2cqw; font-size: 1.9cqw; line-height: 1.6; color: #E4E6E8; }
.sh-brand { position: absolute; right: 4cqw; bottom: 4cqh; font-size: 1.1cqw; letter-spacing: .2cqw; color: var(--sh-gold); }
.sv-sec { background: var(--sh-gold); color: var(--sh-ink); padding: 12cqh 8cqw; display: flex; flex-direction: column; justify-content: center; gap: 2cqh; }
.sv-sec .sk { color: var(--sh-ink); opacity: .7; }
.sv-sec h1 { margin: 0; font-size: 4.6cqw; line-height: 1.12; font-weight: 800; }
.sv-sec p { font-size: 2cqw; margin: 0; max-width: 70cqw; }
.sv-msg { background: #EDEBE4; }

.sv-text { background: var(--sh-cream); color: var(--sh-ink); padding: 8cqh 6.5cqw 7cqh; display: flex; flex-direction: column; gap: 2.2cqh; }
.sv-text.two { display: grid; grid-template-columns: 1.1fr .9fr; gap: 4cqw; align-items: center; }
.sv-text .st { display: flex; flex-direction: column; gap: 2.2cqh; min-width: 0; }
.sv-text .sk { font-size: 1.25cqw; font-weight: 700; color: var(--sh-gold-ink); letter-spacing: .15cqw; text-transform: uppercase; }
.sv-text h2 { margin: 0; font-size: 3.5cqw; line-height: 1.15; font-weight: 700; }
.sv-text ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.7cqh; }
.sv-text li { position: relative; padding-left: 2.4cqw; font-size: 1.85cqw; line-height: 1.4; }
.sv-text li::before { content: ''; position: absolute; left: .3cqw; top: .75cqw; width: .9cqw; height: .9cqw; border-radius: 50%; background: var(--sh-gold); box-shadow: 0 0 0 .25cqw rgba(255, 203, 5, .25); }
.sv-text .sp { margin: 0; font-size: 2cqw; line-height: 1.5; color: #3A3F45; }
.sv-text figure { margin: 0; display: flex; flex-direction: column; gap: 1cqh; align-items: center; }
.sv-text figure img { max-width: 100%; max-height: 66cqh; object-fit: contain; border-radius: 1cqw; box-shadow: 0 1.2cqh 3cqh rgba(0, 0, 0, .12); background: #fff; }
.sv-text figcaption { font-size: 1.2cqw; color: var(--sh-mute); text-align: center; }
.sv-text table { border-collapse: collapse; width: 100%; font-size: 1.5cqw; line-height: 1.35; background: #fff; border-radius: 1cqw; overflow: hidden; }
.sv-text th { background: var(--sh-ink); color: #fff; text-align: left; padding: 1.2cqh 1.2cqw; font-weight: 600; }
.sv-text td { padding: 1.1cqh 1.2cqw; border-top: 1px solid #E7E2D6; vertical-align: top; }

@keyframes shUp { from { opacity: 0; transform: translateY(2.2cqh); } to { opacity: 1; transform: none; } }
.sh-s.on li, .sh-s.on .sp, .sh-s.on tr, .sh-s.on figure { animation: shUp .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 260ms); }
.sh-s.on figure { animation-delay: 380ms; }
.fx-none .sh-s.on li, .fx-none .sh-s.on .sp, .fx-none .sh-s.on tr, .fx-none .sh-s.on figure { animation: none; }
@media (prefers-reduced-motion: reduce) { .sh-s { transition: opacity .2s; transform: none !important; } .sh-s.on li, .sh-s.on .sp, .sh-s.on tr, .sh-s.on figure { animation: none; } }

.sh-black { position: fixed; inset: 0; background: #000; display: none; z-index: 3; }
.sh-ov.black .sh-black { display: block; }
.sh-hud { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 4; color: #fff; font-size: 14px; }
.sh-ov.hud .sh-hud { opacity: 1; }
.sh-top, .sh-bot { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px; pointer-events: auto; }
.sh-top { top: 0; justify-content: space-between; background: linear-gradient(rgba(0, 0, 0, .55), transparent); }
.sh-bot { bottom: 0; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.sh-hud button { font: inherit; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; padding: 6px 11px; cursor: pointer; }
.sh-hud button:hover { background: rgba(255, 255, 255, .26); }
.sh-tbtn { display: flex; gap: 8px; }
.sh-bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.sh-bar i { display: block; height: 100%; width: 0; background: var(--sh-gold); transition: width .4s; }
.sh-notes { position: fixed; left: 0; right: 0; bottom: 0; max-height: 32vh; overflow: auto; background: rgba(20, 22, 26, .94); color: #E4E6E8; padding: 16px 22px 54px; font-size: 16px; line-height: 1.55; display: none; z-index: 5; }
.sh-ov.notes .sh-notes { display: block; }
.sh-notes p { margin: 6px 0 0; }

/* Cửa sổ người dạy */
body.sh-pres-on #topbar, body.sh-pres-on #nav { display: none !important; }
.sh-pres { padding: 18px 22px; display: grid; gap: 12px; }
.sh-ph { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; font-size: 15px; }
.sh-clock { margin-left: auto; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-pg { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.sh-pl { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--sh-mute); margin-bottom: 6px; }
.sh-pcur, .sh-pnext { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fff; min-height: 120px; }
.sh-pcur img, .sh-pnext img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #111; border-radius: 8px; }
.sh-pt { font-weight: 700; margin-top: 8px; }
.sh-pcur ul, .sh-pnext ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.sh-pbtn { display: flex; gap: 10px; margin-top: 12px; }
.sh-pbtn .btn { flex: 1; font-size: 18px; padding: 12px; }
.sh-pnotes { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fffdf5; font-size: 18px; line-height: 1.6; white-space: pre-wrap; min-height: 140px; }
@media (max-width: 760px) { .sh-pg { grid-template-columns: 1fr; } }

.sh-seq { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #22262B; }
.sh-row.on .sh-seq { background: #FFCB05; }
.sh-blk { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 2px; padding: 0 8px; font-weight: 600; font-size: 14px; }
.sh-blk:first-child { margin-top: 2px; }
.sh-blk b { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: #22262B; color: #FFCB05; font-size: 12px; align-self: center; }
.sh-blk small { font-weight: 400; color: var(--muted, #6B7077); font-size: 12px; }