/* ═══════════════════════════════════════════════════════════════
   Guide videos — sân khấu 16:9 (1920×1080), nhận diện web
   (kem #FBF7EE + vàng đồng #BF8C3A, Cormorant Garamond + DM Sans)
   Bố cục: điện thoại bên trái · panel chữ theo bước bên phải.
═══════════════════════════════════════════════════════════════ */
:root{
  --v-bg:#FBF7EE; --v-gold:#BF8C3A; --v-gold-d:#A8771C;
  --v-ink:#2A2014; --v-ink2:#6B6052; --v-ink3:#9C9080;
  --v-line:rgba(42,32,20,.16); --v-gold-soft:rgba(191,140,58,.14); --v-gold-bd:rgba(191,140,58,.3);
}
html,body{ height:100%; }
body{ background:#15100a; overflow:hidden; font-family:'DM Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
/* Xem trước: menu video bên trái (.gv-nav) + vùng sân khấu (.gv-main). ?record=1 không có menu, #frame cố định 0,0 */
html:not(.record) body{ display:flex; }
.gv-main{ flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:16px; }

#frame{ position:relative; overflow:hidden; box-shadow:0 20px 80px rgba(0,0,0,.55); }
html.record #frame{ position:fixed; left:0; top:0; width:1920px; height:1080px; box-shadow:none; }
#stage{
  position:absolute; left:0; top:0; width:1920px; height:1080px; overflow:hidden;
  transform-origin:0 0; background:var(--v-bg); color:var(--v-ink);
}
html.record *, html.record *::before, html.record *::after{ transition:none !important; animation:none !important; }

/* Nền */
.v-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1100px 820px at 29% 52%, rgba(191,140,58,.17), transparent 62%),
    radial-gradient(900px 600px at 100% 0%, rgba(191,140,58,.10), transparent 60%),
    linear-gradient(180deg,#FCF9F2,#F5EDDD);
}
.v-bg::before,.v-bg::after{ content:''; position:absolute; left:560px; top:540px; border-radius:50%; }
.v-bg::before{ width:780px; height:780px; margin:-390px 0 0 -390px; border:1.5px solid rgba(191,140,58,.22); }
.v-bg::after{ width:1010px; height:1010px; margin:-505px 0 0 -505px; border:1px dashed rgba(191,140,58,.18); }

/* Điện thoại: .ph gốc 292×618 → phóng 1.5 */
.v-phone{ position:absolute; left:341px; top:76px; width:438px; height:927px; }
.v-phone-in{ width:292px; transform:scale(1.5); transform-origin:0 0; }
.v-phone .ph{ box-shadow:0 46px 70px -30px rgba(42,32,20,.6), inset 0 0 0 1px rgba(255,255,255,.07); }

/* Panel chữ bên phải */
.v-panel{ position:absolute; left:900px; top:0; width:900px; height:1080px; }
.v-brand{ position:absolute; left:0; top:92px; display:flex; align-items:center; gap:16px; }
.v-brand img{ width:56px; height:56px; }
.v-brand span{ font-family:'Cormorant Garamond',serif; font-weight:700; font-size:34px; }
.v-brand i{ width:1px; height:30px; background:var(--v-line); }
.v-brand em{ font-style:normal; font-size:18px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--v-gold-d); }

.v-steps{ position:absolute; left:0; top:262px; width:880px; height:620px; }
.v-step{ position:absolute; left:0; top:0; width:100%; opacity:0; }
.v-kick{ display:inline-flex; align-items:center; gap:14px; font-size:21px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--v-gold-d); }
.v-kick::before{ content:''; width:44px; height:2px; background:var(--v-gold); }
.v-step h2{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:92px; line-height:1.02; letter-spacing:-.5px; margin:22px 0 30px; text-wrap:balance; }
.v-step p{ font-size:34px; line-height:1.5; color:var(--v-ink2); max-width:840px; }
.v-step p b{ color:var(--v-ink); font-weight:700; }
.v-step .k{ display:inline-block; padding:0 14px; border-radius:12px; background:var(--v-gold-soft); color:#7a5210; font-weight:700; line-height:1.45; }
.v-note{
  margin-top:34px; display:inline-flex; gap:14px; align-items:flex-start; max-width:840px;
  padding:16px 24px; border-radius:18px; background:#fff; border:1px solid var(--v-gold-bd);
  font-size:26px; line-height:1.45; color:var(--v-ink2); box-shadow:0 10px 30px -18px rgba(42,32,20,.35);
}
.v-note i{ font-style:normal; }
.v-note b{ color:var(--v-ink); }

.v-dots{ position:absolute; left:0; top:950px; display:flex; gap:12px; align-items:center; }
.v-dots span{ width:12px; height:12px; border-radius:999px; background:rgba(42,32,20,.14); }
.v-dots span.done{ background:rgba(191,140,58,.55); }
.v-dots span.on{ width:44px; background:var(--v-gold); }
.v-url{ position:absolute; right:20px; top:940px; font-size:22px; font-weight:600; letter-spacing:.5px; color:var(--v-ink3); }

.v-prog{ position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--v-gold-soft); }
.v-prog i{ display:block; height:100%; background:var(--v-gold); transform-origin:0 0; transform:scaleX(0); }

/* Thẻ mở đầu / kết thúc (toàn khung) */
.v-card{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(1200px 760px at 50% 45%, #FFFDF8, #F4EBD8); opacity:0; visibility:hidden;
}
.v-card .logo{ width:120px; height:120px; }
.v-card .kick{ margin-top:34px; font-size:24px; font-weight:700; letter-spacing:6px; text-transform:uppercase; color:var(--v-gold-d); }
.v-card h1{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:150px; line-height:1; letter-spacing:-1px; margin:24px 0 26px; text-wrap:balance; }
.v-card .sub{ font-size:38px; color:var(--v-ink2); }
.v-card .sub b{ color:var(--v-ink); }
.v-card .flow{ display:flex; gap:22px; align-items:center; margin-top:60px; }
.v-card .flow span{
  display:inline-flex; gap:12px; align-items:center; padding:16px 30px; border-radius:999px;
  background:#fff; border:1px solid var(--v-gold-bd); font-size:28px; font-weight:600;
  box-shadow:0 12px 30px -20px rgba(42,32,20,.4);
}
.v-card .flow em{ font-style:normal; font-size:30px; color:var(--v-gold); }
.v-card .ok{
  width:150px; height:150px; border-radius:50%; display:grid; place-items:center;
  background:var(--v-gold); color:#fff; font-size:84px; font-weight:700;
  box-shadow:0 24px 50px -20px rgba(168,119,28,.7);
}
.v-card .next{
  margin-top:50px; display:inline-flex; gap:14px; align-items:center; padding:18px 32px; border-radius:20px;
  background:#fff; border:1px solid var(--v-gold-bd); font-size:30px; color:var(--v-ink2);
}
.v-card .next b{ color:var(--v-ink); }
.v-card .foot{ position:absolute; bottom:80px; display:flex; align-items:center; gap:16px; font-size:26px; font-weight:600; color:var(--v-ink2); }
.v-card .foot img{ width:48px; height:48px; }
.v-card .foot b{ font-family:'Cormorant Garamond',serif; font-size:32px; color:var(--v-ink); }
.v-card .foot i{ width:1px; height:28px; background:var(--v-line); }
.v-card .foot span{ color:var(--v-gold-d); }

/* Thẻ bìa 1 video — <x-guide-video.cover>: màn "đang thực hiện" (.v-empty, guides/video-empty.blade.php)
   + thumbnail menu trái (.gv-thumb). Luôn hiện, không animate như intro/outro */
.v-card.v-cover{ opacity:1; visibility:visible; }
.v-cover h1{ font-size:112px; max-width:1560px; text-wrap:balance; }
.v-empty ~ .v-prog{ display:none; }

/* Menu video cột trái — components/guide-video/nav.blade.php (chỉ khi xem trước) */
.gv-nav{ --tw:200; flex:0 0 calc(var(--tw) * 1px + 32px); display:flex; flex-direction:column; min-height:0; background:#1b140b; border-right:1px solid #33281a; color:#d8cbb4; font-size:13px; }
.gv-nav a{ color:inherit; text-decoration:none; }
.gv-nav-brand{ display:flex; align-items:center; gap:10px; padding:14px 14px 12px; border-bottom:1px solid #33281a; }
.gv-nav-brand img{ width:32px; height:32px; }
.gv-nav-brand b{ display:block; font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:700; color:#f5e6c8; }
.gv-nav-brand small{ display:block; margin-top:1px; font-size:11px; color:#9c8b70; }
.gv-nav-list{ position:relative; flex:1; min-height:0; overflow-y:auto; padding:2px 10px 14px; scrollbar-width:thin; scrollbar-color:#4a3c28 transparent; }
.gv-nav-grp{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 6px 4px; font-size:10.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#BF8C3A; }
.gv-nav-grp small{ font-size:10.5px; font-weight:600; letter-spacing:0; color:#7d6f5c; }
.gv-nav-it{ display:block; padding:6px; border-radius:10px; color:#eadfc8; }
.gv-nav a.gv-nav-it:hover{ background:#261d11; }
/* Thumbnail: thẻ bìa dựng trên khung 1440×810 (vẫn 16:9, nhỏ hơn 1920 để chữ trong thumb to hơn) rồi thu về
   bề rộng --tw (px, đặt trên .gv-nav) → scale = --tw/1440; .gv-nav rộng = thumb + 2×6 + 2×10 */
.gv-thumb{ position:relative; display:block; width:calc(var(--tw) * 1px); aspect-ratio:16/9; overflow:hidden; border-radius:7px; outline:1px solid #33281a; background:var(--v-bg); color:var(--v-ink); }
.gv-thumb-in{ position:absolute; left:0; top:0; width:1440px; height:810px; transform-origin:0 0; transform:scale(calc(var(--tw) / 1440)); pointer-events:none; }
.gv-thumb em{ position:absolute; right:5px; bottom:5px; padding:2px 6px; border-radius:4px; font-style:normal; font-size:10px; font-weight:700; background:rgba(21,16,10,.82); color:#e8c98c; }
.gv-nav-t{ display:flex; align-items:flex-start; gap:6px; margin-top:6px; line-height:1.35; }
.gv-nav-t i{ flex:0 0 17px; height:17px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:9.5px; font-weight:700; background:#2e2415; color:#d4b271; }
.gv-nav-t span{ flex:1; }
.gv-nav-it.off{ color:#8a7a60; }
.gv-nav-it.off .gv-thumb-in{ opacity:.45; }
.gv-nav-it.off i{ background:transparent; border:1px dashed #4a3c28; color:#7d6f5c; }
.gv-nav a.gv-nav-it.on{ background:rgba(191,140,58,.2); color:#fff3dc; }
.gv-nav-it.on .gv-thumb{ outline:2px solid #BF8C3A; }
.gv-nav-it.on i{ border:0; background:#BF8C3A; color:#1b140b; }
.gv-nav a.gv-nav-doc{ padding:12px 14px; border-top:1px solid #33281a; font-size:12px; color:#c9a86a; }
.gv-nav a.gv-nav-doc:hover{ color:#f5d9a8; }
/* Mobile / khung hẹp: menu nằm trên sân khấu — hàng đầu brand + link tài liệu, bên dưới các nhóm nối
   tiếp nhau theo chiều ngang; mỗi nhóm xếp thumbnail theo cột, --rows hàng (2, màn cao thì 3), vuốt ngang */
@media (max-width:900px){
  html:not(.record) body{ flex-direction:column; }
  .gv-nav{ --tw:150; --rows:2; flex:none; display:grid; grid-template-columns:auto 1fr; align-items:center; border-right:0; border-bottom:1px solid #33281a; }
  .gv-nav-brand{ grid-area:1 / 1; padding:10px 12px 4px; border-bottom:0; white-space:nowrap; }
  .gv-nav-brand img{ width:28px; height:28px; }
  .gv-nav-brand b{ font-size:17px; }
  .gv-nav a.gv-nav-doc{ grid-area:1 / 2; padding:10px 12px 4px; border-top:0; font-size:11.5px; line-height:1.3; text-align:right; }
  .gv-nav-list{ grid-area:2 / 1 / 3 / 3; display:flex; align-items:flex-start; overflow:auto hidden; padding:0 6px 6px; overscroll-behavior-x:contain; }
  .gv-nav-sec{ flex:none; }
  .gv-nav-sec + .gv-nav-sec{ margin-left:4px; padding-left:4px; border-left:1px solid #33281a; }
  /* Tên nhóm dính mép trái khi vuốt qua nhóm dài */
  .gv-nav-grp{ position:sticky; left:0; width:max-content; gap:8px; padding:8px 6px 2px; }
  .gv-nav-grid{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(var(--rows), auto); grid-auto-columns:calc(var(--tw) * 1px + 12px); }
  .gv-nav-t{ font-size:12px; }
  .gv-nav-t span{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
}
@media (max-width:900px) and (min-height:800px){ .gv-nav{ --rows:3; } }

/* Thanh điều khiển preview (engine.js player; ẩn khi ?record=1). Icon SVG (ICON trong engine.js), rộng bằng sân khấu (GV.fit) */
.v-ctl{
  display:flex; align-items:center; gap:6px; max-width:100%; padding:6px 10px 6px 6px; border-radius:12px;
  background:#1b140b; border:1px solid #33281a; color:#d8cbb4; font:13px/1 'DM Sans',system-ui,sans-serif;
}
.v-ctl button{
  flex:none; width:34px; height:34px; padding:0; display:grid; place-items:center; border:0; border-radius:8px;
  background:transparent; color:#e8d3aa; cursor:pointer;
}
.v-ctl button:hover{ background:rgba(245,217,168,.1); color:#fff3dc; }
.v-ctl button:focus-visible{ outline:2px solid #BF8C3A; outline-offset:1px; }
.v-ctl button svg{ display:block; }
.v-ctl button.pp{ width:38px; height:38px; border-radius:50%; background:#BF8C3A; color:#1b140b; }
.v-ctl button.pp:hover{ background:#d4a24c; color:#1b140b; }
.v-ctl .tm{ flex:none; padding:0 6px; font-variant-numeric:tabular-nums; color:#eadfc8; }
.v-ctl .sep{ flex:none; width:1px; height:20px; margin:0 4px; background:#33281a; }
.v-ctl .mu{ flex:none; display:flex; align-items:center; gap:5px; max-width:180px; padding-right:2px; color:#b5a282; font-size:12px; white-space:nowrap; cursor:help; }
.v-ctl .mu svg{ flex:none; color:#8a7a60; }
.v-ctl .mu span{ overflow:hidden; text-overflow:ellipsis; }
/* Thanh tua: rãnh mảnh, phần đã chạy màu vàng (--p do engine đặt theo t) */
.v-ctl input[type=range]{
  flex:1; min-width:60px; height:16px; margin:0 6px; -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer;
}
.v-ctl input[type=range]::-webkit-slider-runnable-track{
  height:4px; border-radius:2px; background:linear-gradient(to right,#BF8C3A var(--p,0%),#3a2e1e var(--p,0%));
}
.v-ctl input[type=range]::-moz-range-track{ height:4px; border-radius:2px; background:#3a2e1e; }
.v-ctl input[type=range]::-moz-range-progress{ height:4px; border-radius:2px; background:#BF8C3A; }
.v-ctl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:14px; height:14px; margin-top:-5px; border:0; border-radius:50%;
  background:#f5d9a8; box-shadow:0 0 0 3px rgba(191,140,58,.35);
}
.v-ctl input[type=range]::-moz-range-thumb{ width:14px; height:14px; border:0; border-radius:50%; background:#f5d9a8; box-shadow:0 0 0 3px rgba(191,140,58,.35); }
.v-ctl input[type=range]:hover::-webkit-slider-thumb{ box-shadow:0 0 0 5px rgba(191,140,58,.35); }
@media (max-width:700px){ .v-ctl .mu{ display:none; } }
/* Điện thoại: bỏ nút đổi bài + vạch ngăn để thanh tua còn đủ chỗ */
@media (max-width:560px){
  .v-ctl{ gap:2px; padding-right:6px; }
  .v-ctl [data-a=shuffle], .v-ctl .sep{ display:none; }
  .v-ctl .tm{ padding:0 4px; font-size:12px; }
}
html.record .v-ctl{ display:none; }

/* Toàn màn hình (nút fsIn / phím F / nhấp đúp chuột — engine.js player) kiểu player native: .gv-main phủ màn,
   sân khấu co vừa màn (GV.fit không chừa chỗ thanh điều khiển). Thanh điều khiển ĐÈ lên đáy video trên nền gradient,
   nút phát/dừng lớn giữa video (.v-big). --fx/--fy/--fw/--fh = vị trí khung video, GV.fit đặt.
   .gv-idle = ẩn điều khiển (đang phát + 2.5s yên, hoặc chạm video trên cảm ứng) */
.v-big{ display:none; }
html.record .v-big{ display:none; }
.gv-main:fullscreen{ padding:0; background:#000; }
.gv-main:fullscreen #frame{ box-shadow:none; -webkit-tap-highlight-color:transparent; }
.gv-main:fullscreen .v-ctl{
  position:absolute; left:var(--fx); top:calc(var(--fy) + var(--fh)); width:var(--fw); transform:translateY(-100%);
  padding:44px 12px 10px; border:0; border-radius:0; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.4) 55%, rgba(0,0,0,0));
  transition:opacity .25s; pointer-events:none; /* vùng gradient trống: chạm xuyên xuống video */
}
.gv-main:fullscreen .v-ctl > *{ pointer-events:auto; }
.gv-main:fullscreen .v-ctl [data-a=play], .gv-main:fullscreen .v-ctl .sep{ display:none; }
.gv-main:fullscreen .v-ctl button{ color:#fff; -webkit-tap-highlight-color:transparent; }
.gv-main:fullscreen .v-ctl button:hover{ background:rgba(255,255,255,.14); }
.gv-main:fullscreen .v-ctl .tm{ color:#fff; }
.gv-main:fullscreen .v-ctl .mu, .gv-main:fullscreen .v-ctl .mu svg{ color:rgba(255,255,255,.75); }
.gv-main:fullscreen .v-ctl input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(to right,#BF8C3A var(--p,0%),rgba(255,255,255,.3) var(--p,0%));
}
.gv-main:fullscreen .v-ctl input[type=range]::-moz-range-track{ background:rgba(255,255,255,.3); }
.gv-main:fullscreen .v-big{
  position:absolute; left:calc(var(--fx) + var(--fw) / 2); top:calc(var(--fy) + var(--fh) / 2); transform:translate(-50%,-50%);
  display:grid; place-items:center; width:64px; height:64px; padding:0; border:0; border-radius:50%;
  background:rgba(0,0,0,.5); color:#fff; cursor:pointer; transition:opacity .25s; -webkit-tap-highlight-color:transparent;
}
.gv-main:fullscreen .v-big svg{ display:block; }
.gv-main.gv-idle{ cursor:none; }
.gv-main.gv-idle .v-ctl, .gv-main.gv-idle .v-big{ opacity:0; }
.gv-main.gv-idle .v-ctl > *, .gv-main.gv-idle .v-big{ pointer-events:none; }