:root{--gold:#e2c08d;--rose:#f3b6c0;--ink:#140f12;--panel:#221a1e;--glass:rgba(34,26,30,.78);--line:rgba(255,255,255,.16);--muted:#b9aeb2}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html,body{height:100%;background:var(--ink);color:#fff;overflow:hidden;overscroll-behavior:none}
body{font:400 clamp(14px,calc(.8vmin + 9px),20px)/1.4 'Be Vietnam Pro',system-ui,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input{-webkit-user-select:text;user-select:text}
button,input{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Bố cục chính: header / khung camera / nút điều khiển */
.app{height:100vh;height:100dvh;display:grid;grid-template:auto minmax(0,1fr) auto/minmax(0,1fr);grid-template-areas:"head" "stage" "ctrl";
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
header{grid-area:head;display:flex;align-items:center;gap:.5em;padding:.6em .9em;min-width:0}
.logo{font-family:'Dancing Script',cursive;font-weight:700;font-size:1.7em;line-height:1;color:var(--gold);margin-right:auto}
.pill{background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:.45em .95em;white-space:nowrap}
.pill.icon{padding:.45em .75em}
.up{font-size:.85em;color:var(--gold)}
body.busy header>button{opacity:.35;pointer-events:none}

.stage{grid-area:stage;position:relative;margin:0 .75em}
.cvwrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:14px;overflow:hidden;background:#000;box-shadow:0 10px 40px rgba(0,0,0,.5)}
#cv{display:block;width:100%;height:100%}
.flip{position:absolute;top:.6em;right:.6em;width:2.7em;height:2.7em;border-radius:50%;background:var(--glass);border:1px solid var(--line);font-size:1.05em}
body.busy .flip{display:none}
.count{position:absolute;inset:0;display:grid;place-items:center;font-size:min(30vmin,220px);font-weight:600;text-shadow:0 4px 30px rgba(0,0,0,.7);pointer-events:none}
.camerr{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1em;text-align:center;padding:1.5em;color:var(--muted)}
.camerr p{max-width:30em}

.ctrl{grid-area:ctrl;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"hint hint hint" "dur dur dur" "priv priv priv" ". rec .";
  justify-items:center;align-items:center;gap:.6em .9em;padding:.6em .9em .8em}
.hint{grid-area:hint;color:var(--muted);font-size:.9em;text-align:center;min-height:1.4em}
.durs,.timer{grid-area:dur}
.opts{grid-area:priv}
.rw{grid-area:rec}

.opts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5em}
.seg{display:flex;gap:.25em;background:var(--glass);border:1px solid var(--line);padding:.25em;border-radius:999px;max-width:100%}
.seg button{padding:.5em .95em;border-radius:999px;color:#ddd;white-space:nowrap}
.seg button.on{background:var(--gold);color:var(--ink);font-weight:600}
body.busy .opts{opacity:.4;pointer-events:none}

.timer{font-variant-numeric:tabular-nums;font-weight:600;font-size:1.1em;padding:.4em 1.1em}
.timer::before{content:'';display:inline-block;width:.6em;height:.6em;border-radius:50%;background:#ff4d55;margin-right:.5em;vertical-align:.05em;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.rw{--rw:clamp(64px,10vmin,104px);position:relative;width:var(--rw);height:var(--rw)}
.rw svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
#rec{position:absolute;inset:14%;border-radius:50%;background:#e5484d;transition:inset .2s,border-radius .2s;animation:pulse 1.8s infinite}
body.busy #rec{inset:31%;border-radius:12%;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}100%{box-shadow:0 0 0 18px rgba(229,72,77,0)}}

/* Máy tính / máy tính bảng nằm ngang: nút điều khiển trên một hàng */
@media (orientation:landscape){
  .ctrl{grid-template-areas:"hint hint hint" "dur rec priv"}
  .durs,.timer{justify-self:end}
  .opts{justify-self:start}
}
/* Điện thoại xoay ngang (màn thấp): nút điều khiển thành cột bên phải */
@media (orientation:landscape) and (max-height:540px){
  .app{grid-template:auto minmax(0,1fr)/minmax(0,1fr) auto;grid-template-areas:"head head" "stage ctrl"}
  .ctrl{grid-template-columns:auto;grid-template-areas:"dur" "rec" "priv";align-content:center;padding:0 .9em .6em 0}
  .hint{display:none}
  .durs{display:grid;grid-template-columns:1fr 1fr;border-radius:1.3em}
  .durs,.timer,.opts{justify-self:center}
  header{padding:.4em .9em}
}
/* Điện thoại nhỏ đứng */
@media (orientation:portrait) and (max-height:680px){
  .hint{display:none}
  .ctrl{gap:.45em}
}

/* Màn hình chào */
.start{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em;text-align:center;
  padding:max(2em,env(safe-area-inset-top)) 1.2em max(2em,env(safe-area-inset-bottom));overflow:auto;background:radial-gradient(ellipse at 50% 35%,#3a2730,var(--ink) 72%)}
.orn{position:fixed;width:clamp(90px,22vmin,200px);height:clamp(90px,22vmin,200px);pointer-events:none}
.orn.tl{top:0;left:0}.orn.tr{top:0;right:0;transform:scaleX(-1)}.orn.bl{bottom:0;left:0;transform:scaleY(-1)}.orn.br{bottom:0;right:0;transform:scale(-1)}
.small-caps{font-size:.8em;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.start .names{font-family:'Dancing Script',cursive;font-weight:700;font-size:clamp(40px,9vmin,104px);line-height:1.15;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.start .names i{font-style:normal;color:var(--rose)}
.start .date{letter-spacing:.35em;color:var(--gold)}
.start p{color:var(--muted);max-width:28em}
.qr{display:none;align-items:center;gap:1em;margin-top:.5em;text-align:left;color:var(--muted);font-size:.9em}
body.kiosk .qr{display:flex}
.qr img{width:clamp(96px,16vmin,170px);background:#fff;padding:6px;border-radius:10px}
.fsguard{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(10,8,9,.94);font-size:1.5em;text-align:center;padding:2em;cursor:pointer}

/* Nút, hộp thoại */
.btn{background:var(--gold);color:var(--ink);font-weight:600;padding:.65em 1.3em;border-radius:999px}
.btn.big{font-size:1.15em;padding:.85em 1.8em}
.btn.ghost{background:transparent;color:#fff;border:1px solid var(--line)}
.btn.danger{background:transparent;color:#ff8a8f;border:1px solid rgba(255,138,143,.4);margin-right:auto}
dialog{margin:auto;border:0;border-radius:18px;padding:1.1em;background:var(--panel);color:#fff;width:min(30em,calc(100% - 24px));max-width:none;max-height:calc(100% - 24px);overflow:auto}
dialog::backdrop{background:rgba(0,0,0,.7)}
dialog h3{font-size:1.15em;margin-bottom:.4em}
.muted{color:var(--muted);font-size:.9em}
label{display:block;margin-top:.9em;font-size:.95em}
input.text{display:block;width:100%;margin-top:.4em;padding:.7em .8em;border-radius:10px;border:1px solid var(--line);background:#120d10}
.row{display:flex;flex-wrap:wrap;gap:.6em;justify-content:flex-end;margin-top:1em}
#review,#player{width:min(46em,calc(100% - 24px))}
#review video,#player video{display:block;width:100%;max-height:50vh;max-height:52dvh;background:#000;border-radius:12px}
#player video{max-height:calc(100dvh - 12em)}
#review .seg{margin-top:.9em;width:fit-content}
#privNote{margin-top:.5em}
.prow{margin-top:.7em}
#code{display:block;width:100%;margin-top:.9em;text-align:center;font-size:1.9em;letter-spacing:.5em;padding:.3em;border-radius:12px;border:1px solid var(--line);background:#120d10}
.err{color:#ff8a8f;font-size:.9em;min-height:1.4em;margin-top:.5em}

/* Thư viện lời chúc */
dialog.full{width:100%;height:100%;max-height:none;margin:0;border-radius:0;padding:0;background:var(--ink)}
dialog.full[open]{display:flex;flex-direction:column}
.ghead{display:flex;align-items:center;gap:.5em;padding:max(.8em,env(safe-area-inset-top)) 1em .8em}
.ghead h3{margin:0 auto 0 0;font-family:'Dancing Script',cursive;font-size:1.9em;color:var(--gold);font-weight:700;white-space:nowrap}
.grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(160px,42vw),1fr));gap:.75em;padding:.25em 1em max(1.5em,env(safe-area-inset-bottom));align-content:start}
.card{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#4a3640,#1f171b);text-align:left}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card.lock img{filter:blur(6px);transform:scale(1.15)}
.ico{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:3em;height:3em;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);font-size:1.1em}
.badge{position:absolute;top:.5em;right:.5em;background:rgba(0,0,0,.55);border-radius:6px;padding:.1em .45em;font-size:.8em}
.meta{position:absolute;left:0;right:0;bottom:0;padding:1.8em .7em .6em;background:linear-gradient(transparent,rgba(0,0,0,.82))}
.meta b,.meta small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta small{font-size:.78em;color:#ddd}
.empty{color:var(--muted);text-align:center;padding:3em 1em}

/* Chọn khung */
#frames{width:min(60em,calc(100% - 24px))}
.ghead.flat{padding:0 0 .6em}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,40vw),1fr));gap:.6em}
.fgrid button{display:flex;flex-direction:column;align-items:center;gap:.35em;padding:.35em .35em .5em;border-radius:12px;border:2px solid transparent;font-size:.85em;color:#ddd}
.fgrid button.on{border-color:var(--gold);color:#fff;font-weight:600}
.fgrid canvas{display:block;width:100%;height:auto;border-radius:8px}

.toast{position:fixed;inset:auto auto max(1.5em,env(safe-area-inset-bottom)) 50%;transform:translateX(-50%);margin:0;z-index:30;background:#2b2125;color:#fff;border:1px solid var(--line);
  padding:.7em 1.1em;border-radius:12px;width:max-content;max-width:calc(100% - 32px);text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.4)}