/* demo-shots.css — hệ "màn hình thật + modal demo" dùng chung toàn site.
   Nguồn gốc: hợp nhất style inline của sandbox.html + tinh-nang.html (sandbox là bản chuẩn).
   Dùng kèm assets/js/demo-player.js (tự inject modal #part-player khi trang có [data-ch]).
   Load SAU base.css. Trang nào dùng .shot-url cần có JetBrains Mono trong font link. */

/* ===== Zigzag: mỗi bước 1 màn hình thật trong khung browser ===== */
.steps{display:flex;flex-direction:column;gap:56px}
/* minmax(0,...) thay vì 1fr: track được phép co nhỏ hơn min-content, nếu không ảnh mockup 1600px
   ép cột rộng hơn viewport → tràn ngang, bị .shot-frame overflow:hidden cắt cụt (bug mobile). */
.step{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:center}
@media (min-width:1024px){
  .steps{gap:104px}
  .step{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:64px}
  .step--flip .step-media{order:2}
}
.step-media,.step-text{min-width:0}
/* nút chứa màn hình — min-width:0 để khi shot-btn là grid/flex item trực tiếp vẫn co được */
.shot-btn{display:block;width:100%;max-width:100%;min-width:0;text-align:left;font:inherit;border:0;background:none;padding:0;cursor:pointer}
.shot-frame{display:block;position:relative;background:#fff;border:1px solid rgba(36,10,70,.10);border-radius:14px;overflow:hidden;
  box-shadow:0 22px 50px -30px rgba(36,10,70,.32),0 3px 10px -5px rgba(36,10,70,.14);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.shot-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:linear-gradient(180deg,#F4F1FA,#EBE6F5);border-bottom:1px solid rgba(36,10,70,.08)}
.shot-dot{width:10px;height:10px;border-radius:50%}
.shot-url{margin-left:10px;flex:1;min-width:0;height:23px;display:flex;align-items:center;padding:0 12px;border-radius:6px;
  background:#fff;border:1px solid rgba(36,10,70,.08);font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#8E86A4;letter-spacing:.005em;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.shot-view{display:block;overflow:hidden}
.shot-view img{display:block;width:100%;height:auto;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.shot-hint{position:absolute;left:50%;bottom:18px;transform:translate(-50%,10px);display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:9999px;background:var(--grad);color:#fff;font-weight:600;font-size:13.5px;
  box-shadow:0 14px 34px -12px rgba(157,4,213,.6);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.shot-btn:hover .shot-frame,.shot-btn:focus-visible .shot-frame{transform:translateY(-6px);
  box-shadow:0 40px 78px -34px rgba(157,4,213,.42),0 8px 20px -10px rgba(36,10,70,.2)}
.shot-btn:hover .shot-view img{transform:scale(1.035)}
.shot-btn:hover .shot-hint,.shot-btn:focus-visible .shot-hint{opacity:1;transform:translate(-50%,0)}
.shot-btn:focus-visible{outline:2px solid var(--brand);outline-offset:5px;border-radius:16px}
.shot-btn:active .shot-frame{transform:translateY(-3px)}
/* mobile: touch không hover → hint hiện thường trực (badge góc dưới) báo bấm được */
@media (max-width:767px){
  .shot-hint{opacity:1;transform:translate(-50%,0);bottom:12px;padding:8px 15px;font-size:12.5px}
}
/* touch: bỏ hover-lift/zoom dính sau khi chạm (giữ :active) */
@media (hover:none){
  .shot-btn:hover .shot-frame{transform:none;box-shadow:0 22px 50px -30px rgba(36,10,70,.32),0 3px 10px -5px rgba(36,10,70,.14)}
  .shot-btn:hover .shot-view img{transform:none}
}
/* khung nhỏ hơn cho thẻ 2-up */
.shot-frame--sm{border-radius:12px}
.shot-frame--sm .shot-bar{padding:9px 13px}
/* text bên cạnh màn hình */
.step-num{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(38px,5vw,60px);line-height:1;
  letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.step-cta{align-items:center;gap:8px;margin-top:20px;font:inherit;font-weight:600;font-size:14px;color:var(--brand);
  background:none;border:0;cursor:pointer;padding:0;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.step-cta:hover{transform:translateX(3px)}
.step-cta:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.step-cta--light{color:#fff}
/* bullet tính năng có ô icon */
.feat-li{display:flex;gap:11px;align-items:flex-start}
.feat-ic{flex:none;width:22px;height:22px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(157,4,213,.1);color:var(--brand);margin-top:1px}

/* ===== Modal demo dùng chung (#part-player do demo-player.js inject) ===== */
#part-player{position:fixed;inset:0;z-index:80;align-items:center;justify-content:center;padding:16px}
#part-player.show{display:flex}
.pp-backdrop{position:absolute;inset:0;background:rgba(10,4,20,.9);backdrop-filter:blur(6px)}
.pp-window{position:relative;z-index:1;width:100%;max-width:1160px}
.pp-window .mockup-browser__view{width:100%;height:80vh;border:0}
.fs-enter,.pp-close{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);color:#EDEBF2;border-radius:999px;padding:4px 13px;font:inherit;font-size:12.5px;cursor:pointer;
  transition:border-color .2s,background .2s}
.fs-enter{margin-left:auto}
.pp-close{margin-left:8px}
.fs-enter:hover,.pp-close:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.14)}
.fs-enter:focus-visible,.pp-close:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fs-exit{display:none;align-items:center;gap:6px;margin-left:auto;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);color:#EDEBF2;border-radius:999px;padding:4px 14px;font:inherit;font-size:12.5px;cursor:pointer}
.fs-exit:hover{border-color:rgba(255,255,255,.55)}
.fs-exit:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* overlay bấm-để-mở cho iframe demo nhúng (hero sandbox): phủ kín, bấm là mở toàn màn hình */
.fs-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;justify-content:center;
  width:100%;border:0;padding:0 0 22px;cursor:pointer;font:inherit;
  background:linear-gradient(180deg,rgba(10,4,20,.04),transparent 32%,rgba(10,4,20,.42))}
.fs-overlay .fs-cta{transition:transform .2s cubic-bezier(.16,1,.3,1)}
.fs-overlay:hover .fs-cta{transform:translateY(-2px)}
.fs-overlay:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
/* native fullscreen: khung phủ kín, giấu nút modal-only + overlay */
.fs-wrap:fullscreen{display:flex;flex-direction:column;border-radius:0;background:#0A0414;max-width:none}
.fs-wrap:fullscreen .fs-body{flex:1;min-height:0}
.fs-wrap:fullscreen .mockup-browser__view{height:100%}
.fs-wrap:fullscreen .fs-exit{display:inline-flex}
.fs-wrap:fullscreen .fs-enter,.fs-wrap:fullscreen .pp-close,.fs-wrap:fullscreen .fs-overlay{display:none}
.fs-wrap:-webkit-full-screen{display:flex;flex-direction:column;border-radius:0;background:#0A0414;max-width:none}
.fs-wrap:-webkit-full-screen .fs-body{flex:1;min-height:0}
.fs-wrap:-webkit-full-screen .mockup-browser__view{height:100%}
.fs-wrap:-webkit-full-screen .fs-exit{display:inline-flex}
.fs-wrap:-webkit-full-screen .fs-enter,.fs-wrap:-webkit-full-screen .pp-close,.fs-wrap:-webkit-full-screen .fs-overlay{display:none}

/* ===== Mobile: modal demo phủ kín màn hình điện thoại ===== */
@media (max-width:767px){
  #part-player{padding:0}
  /* flex-column: bar cao cố định + iframe chiếm phần còn lại. KHÔNG để iframe height:100dvh
     vì cộng thêm chiều cao bar sẽ tràn xuống dưới màn hình, cắt mất nút "Tiếp theo" của coach-mark. */
  .pp-window{max-width:none;height:100dvh;border-radius:0;display:flex;flex-direction:column}
  .pp-window .fs-body{flex:1;min-height:0}
  .pp-window .mockup-browser__view{height:100%}
  .pp-window .mockup-browser__bar{padding:9px 12px;flex:none}
  #part-title{display:none}                 /* URL bar chật, bỏ tiêu đề dài */
  .mockup-browser__url{display:none}
  .fs-enter{display:none}                    /* modal đã full-screen, không cần nút toàn màn hình */
  .pp-close{margin-left:auto;padding:6px 15px;font-size:13px}
}