/* =====================================================================
   Finance Story · hub-hero4.css — v4 (3 ต.ค. 2026)
   1) แถบเมนูแบบ "เม็ดยา" ลอยบน hero (โลโก้กลาง · เมนูซ้าย · ปุ่มขวา)
   2) รูปจารย์แบบตัดพื้นหลัง (ไม่มีกรอบ) ยืนชิดขอบล่างของ hero
   3) คลิปแนะนำตัว เปิดเป็นหน้าต่างลอย (lightbox) แทนการเล่นในกรอบรูป
   โหลดต่อจาก site.css + hub-clip.css
   ===================================================================== */

/* ---------- 1) แถบเมนูลอย ---------- */
html{scroll-padding-top:104px}
.nav{position:fixed!important;top:14px;left:50%;transform:translateX(-50%);z-index:60;
  width:min(1320px,calc(100% - 40px));display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px!important;
  padding:9px 10px 9px 30px!important;background:rgba(255,255,255,.97)!important;border:none!important;border-radius:999px;
  box-shadow:0 14px 34px rgba(4,16,28,.22),0 1px 0 rgba(255,255,255,.6) inset;overflow:hidden;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.nav .links{grid-column:1;grid-row:1;margin:0!important;gap:26px!important}
.nav .links a{font-size:15px!important;color:var(--deep)!important;font-weight:400}
.nav .links a:hover{color:var(--orange-hi)!important}
.nav .brandmark{grid-column:2;grid-row:1;justify-self:center}
.nav .flogo{height:46px!important}
.nav .navmark{grid-column:3;grid-row:1;justify-self:start;margin:0!important}
.nav .cta{grid-column:3;grid-row:1;justify-self:end;margin:0!important}
.nav .cta .btn{padding:10px 22px!important;font-size:14px!important}
.navprog{left:30px!important;bottom:0!important;max-width:calc(100% - 60px);height:3px!important}

/* ---------- 2) hero: รูปตัดพื้นหลัง ---------- */
.h2grid{padding:138px 60px 0!important;align-items:stretch!important;max-width:1240px!important;grid-template-columns:1.05fr .95fr!important}
.h2grid>div:first-child{align-self:center;padding-bottom:70px}
.stagepic{height:auto!important;min-height:640px;max-width:560px!important;align-self:end;margin-left:auto}
.stagepic::before,.stagepic::after{display:none!important}
.cutwrap{position:absolute;left:0;right:0;bottom:0;height:100%;display:flex;justify-content:center;align-items:flex-end}
.cutwrap::before{content:"";position:absolute;left:50%;bottom:6%;width:96%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(232,137,26,.34),rgba(232,137,26,.10) 45%,transparent 68%);pointer-events:none}
.cutwrap .cut{position:relative;display:block;height:96%;max-height:640px;width:auto;max-width:112%;
  filter:drop-shadow(0 24px 40px rgba(3,14,26,.45));user-select:none;-webkit-user-drag:none}
/* ป้ายชื่อแบบกระจก มุมขวาล่าง */
.cutwrap .sig{position:absolute;right:-2%;bottom:26px;z-index:3;text-align:right;color:#fff;
  background:rgba(9,34,53,.72);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:9px 15px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cutwrap .sig b{display:block;font-size:15px;font-weight:500}
.cutwrap .sig span{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.75);letter-spacing:.06em}
/* ปุ่มคลิป: เม็ดยาลอยมุมซ้ายล่างของรูป */
.cutwrap .vplay{top:auto!important;right:auto!important;left:-14%!important;bottom:118px!important;flex-direction:row!important;align-items:center!important;gap:12px!important;
  padding:0!important;border-radius:999px}
.cutwrap .vp-btn{width:60px;height:60px}
.cutwrap .vp-lb{font-size:14px;padding:8px 16px}
/* การ์ดลอย 2 ใบ */
.stagepic .ui.u1{left:-12%!important;right:auto!important;width:auto!important;max-width:280px;top:22%!important;bottom:auto!important}
.stagepic .ui.u2{right:-8%!important;left:auto!important;top:auto!important;bottom:36%!important}

/* ---------- 3) คลิปแบบหน้าต่างลอย ---------- */
.vmodal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(4,16,28,.86);padding:20px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:vmIn .25s ease}
@keyframes vmIn{from{opacity:0}to{opacity:1}}
.vmodal .vbox{position:relative;height:min(86vh,780px);aspect-ratio:9/16;max-width:calc(100vw - 40px);border-radius:22px;overflow:hidden;background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.vmodal iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vmodal .vnote{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:#0E2F49;color:#C9DBEA;font-size:14px}
.vmodal .vnote b{display:block;color:#fff;font-size:17px;margin-bottom:6px;font-weight:500}
.vmodal .vx{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--deep);font-size:18px;cursor:pointer;z-index:2}
.vmodal .vx:focus-visible{outline:3px solid var(--orange)}
body.vm-open{overflow:hidden}

/* ---------- จอแคบ ---------- */
@media(max-width:940px){
  html{scroll-padding-top:84px}
  .nav{display:flex!important;top:10px;width:calc(100% - 24px);padding:7px 8px 7px 18px!important}
  .nav .flogo{height:36px!important}
  .nav .cta{margin-left:auto!important}
  .h2grid{grid-template-columns:1fr!important;padding:104px 22px 0!important;gap:8px!important}
  .h2grid>div:first-child{padding-bottom:0}
  .stagepic{order:2!important;min-height:440px;max-width:420px!important;margin:0 auto!important;height:auto!important}
  .cutwrap .cut{max-height:440px}
  .cutwrap .vplay{left:0!important;bottom:60px!important}
  .cutwrap .sig{display:none}
}
@media(max-width:640px){
  .nav .cta .btn{padding:8px 14px!important;font-size:12.5px!important}
  .stagepic{min-height:400px}
  .cutwrap .cut{max-height:400px}
  .cutwrap .vp-btn{width:52px;height:52px}.cutwrap .vp-btn svg{width:22px;height:22px}
  .cutwrap .vp-lb{font-size:12.5px;padding:6px 12px}
  .stagepic .ui.u1{left:auto!important;right:-2%!important;top:auto!important;bottom:26%!important;max-width:240px}
  .stagepic .ui.u2{display:none!important}
  .cutwrap .vplay{bottom:22px!important}
}
@media(prefers-reduced-motion:reduce){.vmodal{animation:none}}