/* ================================================================
   HERO trang chủ "Grand Reveal" — ảnh tập thể toàn màn hình.
   Vào trang: khung vòm vàng nhỏ giữa nền tối → mở bung ra toàn màn hình.
   Đổi cảnh: cảnh mới mọc lên từ một vòm, ảnh trôi chậm (Ken Burns),
   vệt sáng vàng lướt qua, tên vai trò hiện trên đầu bác sĩ / Giám đốc.
   Nạp SAU style.css + luxe.css, chỉ dùng ở index.html.
   ================================================================ */
.gx{--e:cubic-bezier(.16,1,.3,1);--io:cubic-bezier(.7,0,.2,1);--nt:#1C221F;--bar:86px;
  position:relative;overflow:hidden;isolation:isolate;background:var(--nt);color:#FAF8F3;
  height:calc(100svh - var(--gx-top,124px));min-height:600px;max-height:1060px}
.gx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- sân khấu ảnh ---------- */
.gx-stage{position:absolute;inset:0;z-index:0;touch-action:pan-y}
.gx-s{position:absolute;inset:0;margin:0;overflow:hidden;container-type:size;
  --ar:var(--ar-d);--px:var(--px-d,.5);--py:var(--py-d,.5)}
/* khối ảnh đúng tỉ lệ ảnh, phủ kín khung (như object-fit:cover) — để chấm tên bám đúng người */
.gx-kb{position:absolute;
  width:max(100cqw,calc(100cqh * var(--ar)));height:max(100cqh,calc(100cqw / var(--ar)));
  left:calc((100cqw - max(100cqw,calc(100cqh * var(--ar)))) * var(--px));
  top:calc((100cqh - max(100cqh,calc(100cqw / var(--ar)))) * var(--py));
  transform-origin:var(--ox,50%) var(--oy,30%)}
.gx-kb picture,.gx-kb img{display:block;width:100%;height:100%}
.gx-kb img{object-fit:cover;-webkit-user-drag:none;user-select:none}

.gx-js .gx-s{visibility:hidden}
.gx-js .gx-s.on,.gx-js .gx-s.off{visibility:visible}
.gx-s.off{z-index:1}
.gx-s.on{z-index:2;animation:gxIris 1.7s var(--e) both}
.gx-s.on.intro{animation:gxIntro 2.5s var(--io) both}
.gx-s.on .gx-kb,.gx-s.off .gx-kb{animation:gxKb 10s cubic-bezier(.3,.1,.3,1) both}
.gx-s.on.intro .gx-kb{animation-name:gxKbIn}
.gx-s.off .gx-kb{animation-play-state:paused;filter:brightness(.5) saturate(.8);transition:filter 1.5s ease}
@keyframes gxIris{0%{clip-path:inset(40% 37% 0 37% round 40vw 40vw 0 0)}100%{clip-path:inset(0 0 0 0 round 0 0 0 0)}}
@keyframes gxIntro{
  0%{clip-path:inset(56% 45.5% 7% 45.5% round 40vw 40vw 0 0)}
  36%{clip-path:inset(22% 39% 7% 39% round 40vw 40vw 0 0)}
  100%{clip-path:inset(0 0 0 0 round 0 0 0 0)}}
@keyframes gxKb{from{transform:scale(1.13)}to{transform:scale(1)}}
@keyframes gxKbIn{from{transform:scale(1.3)}to{transform:scale(1)}}

/* khung vòm vàng chạy theo đường cắt */
.gx-frame{position:absolute;z-index:4;pointer-events:none;opacity:0;border:1px solid rgba(234,219,185,.9);
  box-shadow:0 0 50px rgba(205,175,120,.35),inset 0 0 40px rgba(205,175,120,.18)}
.gx.fi .gx-frame{animation:gxFrameIn 2.5s var(--io) both}
.gx.fx .gx-frame{animation:gxFrame 1.7s var(--e) both}
@keyframes gxFrameIn{
  0%{opacity:0;inset:56% 45.5% 7% 45.5%;border-radius:40vw 40vw 0 0}
  12%{opacity:1}
  36%{opacity:1;inset:22% 39% 7% 39%;border-radius:40vw 40vw 0 0}
  82%{opacity:.7}
  100%{opacity:0;inset:0;border-radius:0}}
@keyframes gxFrame{
  0%{opacity:1;inset:40% 37% 0 37%;border-radius:40vw 40vw 0 0}
  70%{opacity:.6}
  100%{opacity:0;inset:0;border-radius:0}}

/* lớp tối để chữ nổi, vệt sáng vàng lướt qua */
.gx-veil{position:absolute;inset:0;z-index:3;pointer-events:none;background:
  linear-gradient(0deg,rgba(22,27,24,.95) 0%,rgba(22,27,24,.74) 20%,rgba(22,27,24,.28) 44%,rgba(22,27,24,0) 62%),
  linear-gradient(90deg,rgba(22,27,24,.62) 0%,rgba(22,27,24,.18) 38%,rgba(22,27,24,0) 58%),
  linear-gradient(180deg,rgba(22,27,24,.42) 0%,rgba(22,27,24,0) 16%)}
.gx-sweep{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 38%,rgba(255,232,186,0) 42%,rgba(255,232,186,.2) 50%,rgba(255,232,186,0) 58%,transparent 62%);
  background-size:320% 100%}
.gx.sw .gx-sweep{animation:gxSweep 2.4s ease-in-out 1s both}
.gx.sw.fi .gx-sweep{animation-delay:2.1s}
@keyframes gxSweep{0%{opacity:1;background-position:135% 0}100%{opacity:1;background-position:-35% 0}}

.gx #stars{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:.6}

/* ---------- chấm tên vai trò trên đầu người ---------- */
.gx-pin{position:absolute;z-index:2;--x:var(--xd);--y:var(--yd);left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);
  width:30px;height:30px;margin:-15px 0 0 -15px;padding:0;border:0;background:none;cursor:pointer;opacity:0;transition:opacity .7s}
.gx-s.on .gx-pin{opacity:1;transition-delay:1.4s}
.gx-pin i{position:absolute;inset:9px;border-radius:50%;background:radial-gradient(circle,#FFF6DF 0 32%,#D9BC84 34% 100%);
  box-shadow:0 0 0 1px rgba(20,25,22,.45),0 0 0 4px rgba(234,219,185,.35),0 0 18px 2px rgba(234,219,185,.9)}
.gx-pin i::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(234,219,185,.85);animation:gxPing 2.6s ease-out infinite}
@keyframes gxPing{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.9);opacity:0}}
.gx-pin>span{position:absolute;left:50%;bottom:calc(100% + 12px);--tx:calc(var(--x) * -100%);translate:var(--tx) 8px;white-space:nowrap;
  padding:10px 18px 11px;border-radius:12px;border:1px solid rgba(226,203,156,.6);
  background:linear-gradient(160deg,rgba(34,41,37,.86),rgba(22,27,24,.78));-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
  color:rgba(250,248,243,.85);font-size:11.5px;letter-spacing:.08em;line-height:1.4;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .45s ease,translate .7s var(--e)}
.gx-pin>span b{display:block;font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.01em;color:#EADBB9}
.gx-pin>span::after{content:"";position:absolute;left:calc(var(--x) * 100%);top:100%;width:1px;height:12px;background:linear-gradient(rgba(226,203,156,.85),rgba(226,203,156,.2))}
.gx-pin:hover>span,.gx-pin:focus-visible>span,.gx-pin.tip>span{opacity:1;translate:var(--tx) 0}
.gx-pin:focus{outline:none}
.gx-pin:focus-visible i{outline:2px solid #EADBB9;outline-offset:8px}

/* ---------- chữ ---------- */
.gx-in{position:absolute;z-index:6;left:0;right:0;bottom:calc(var(--bar) + clamp(18px,3.6vh,42px))}
.gx-titles{display:grid;max-width:min(62%,880px)}
.gx-t{grid-area:1/1;visibility:hidden}
.gx:not(.gx-js) .gx-t:first-child,.gx-t.on,.gx-t.out{visibility:visible}
.gx-eye{display:flex;align-items:center;gap:14px;margin:0 0 16px;font-size:11.5px;font-weight:600;letter-spacing:.36em;text-transform:uppercase;color:#E2CB9C}
.gx-eye::before{content:"";flex:none;width:40px;height:1px;background:linear-gradient(90deg,transparent,#CDAF78)}
.gx-h{margin:0;font-family:var(--serif);font-weight:500;color:#FAF8F3;letter-spacing:-.01em;line-height:.98;
  font-size:clamp(40px,min(5.5vw,9.2vh),100px);filter:drop-shadow(0 8px 30px rgba(0,0,0,.35))}
.gx-h .ln{display:block;overflow:hidden;padding:.03em .1em .12em 0;margin-bottom:-.1em}
.gx-h .ln>span{display:inline-block}
.gx-h .gold>span{font-style:italic;color:#CDAF78;background:var(--champ);background-size:230% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:luxSheen 9s linear infinite;padding-right:.08em}
.gx-d{position:absolute;right:0;bottom:4px;max-width:36ch;margin:0;padding-left:20px;border-left:1px solid rgba(226,203,156,.5);
  font-size:15px;line-height:1.75;color:rgba(250,248,243,.8)}

.gx-js .gx-t .ln>span{transform:translateY(115%)}
.gx-t.on .ln>span{animation:gxUp 1.3s var(--e) both;animation-delay:calc(var(--td,.55s) + var(--i,0) * .13s)}
.gx-t.on .gold>span{animation:gxUp 1.3s var(--e) both,luxSheen 9s linear infinite;animation-delay:calc(var(--td,.55s) + .13s),0s}
.gx-t.on .gx-eye,.gx-t.on .gx-d{animation:gxRise 1.1s var(--e) both;animation-delay:calc(var(--td,.55s) + .3s)}
.gx-t.out .ln>span{animation:gxOut .75s cubic-bezier(.7,0,.84,0) both}
.gx-t.out .gx-eye,.gx-t.out .gx-d{animation:gxFadeOut .5s ease both}
.gx.first{--td:1.55s}
@keyframes gxUp{from{transform:translateY(115%) rotate(2.5deg)}to{transform:none}}
@keyframes gxOut{from{transform:none;opacity:1}to{transform:translateY(-110%);opacity:0}}
@keyframes gxRise{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes gxFadeOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes gxFade{from{opacity:0}to{opacity:1}}

.gx-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3.4vh,34px)}
.gx .btn.ghost{background:rgba(255,255,255,.06);border:1px solid rgba(226,203,156,.55);color:#EADBB9}
.gx .btn.ghost:hover{background:#EADBB9;border-color:#EADBB9;color:var(--ink)}
.gx-js .gx-cta,.gx-js .gx-bar{opacity:0}
.gx.go .gx-cta{animation:gxRise 1.1s var(--e) both;animation-delay:calc(var(--td,.55s) + .45s)}
.gx.go .gx-bar{animation:gxFade 1.2s ease 2.3s both}

/* ---------- thanh chọn cảnh ---------- */
.gx-bar{position:absolute;z-index:6;left:0;right:0;bottom:0;height:var(--bar);display:flex;align-items:center;justify-content:space-between;gap:24px;
  border-top:1px solid rgba(226,203,156,.22)}
.gx-tabs{display:flex;gap:clamp(20px,3.2vw,48px)}
.gx-tab{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:10px 12px;min-width:160px;padding:8px 0;border:0;background:none;
  font:inherit;text-align:left;color:rgba(250,248,243,.5);cursor:pointer;transition:color .5s}
.gx-tab:hover,.gx-tab.on{color:#FAF8F3}
.gx-tab em{font-family:var(--serif);font-style:normal;font-size:19px;color:#CDAF78}
.gx-tab span{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.gx-tab i{grid-column:1/-1;position:relative;height:1px;overflow:hidden;background:rgba(250,248,243,.2)}
.gx-tab i b{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#9E7D46,#EADBB9)}
.gx-arr{display:flex;gap:10px}
.gx-arr button{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(226,203,156,.45);
  background:rgba(255,255,255,.04);color:#EADBB9;cursor:pointer;transition:background .4s,color .4s,transform .4s var(--e)}
.gx-arr button:hover{background:#EADBB9;color:var(--nt);transform:translateY(-2px)}
.gx-arr svg{width:18px;height:18px}

@media(max-width:1100px){
  .gx-titles{max-width:100%}
  .gx-d{position:static;margin-top:16px;max-width:52ch}
}
@media(max-height:820px) and (min-width:761px){
  .gx{--bar:74px}
  .gx-h{font-size:clamp(40px,min(5.5vw,8.2vh),100px)}
  .gx-eye{margin-bottom:12px}
  .gx-cta{margin-top:18px}
  .gx-d{display:none}
}

/* ---------- điện thoại: ảnh vuông ở trên, chữ ở dưới ---------- */
@media(max-width:760px){
  .gx{height:auto;min-height:0;max-height:none;--bar:auto}
  .gx-stage{position:relative;inset:auto;aspect-ratio:1/1.04}
  .gx-s{--ar:var(--ar-m);--px:.5;--py:.5}
  .gx-pin{--x:var(--xm);--y:var(--ym)}
  .gx-pin>span{padding:7px 12px 8px;font-size:9.5px;letter-spacing:.04em}
  .gx-pin>span b{font-size:15px}
  .gx-veil{background:
    linear-gradient(0deg,var(--nt) 0%,rgba(28,34,31,.7) 16%,rgba(28,34,31,0) 42%),
    linear-gradient(180deg,rgba(22,27,24,.35) 0%,rgba(22,27,24,0) 18%)}
  .gx-in{position:relative;bottom:auto;margin-top:-56px}
  .gx-eye{font-size:10px;letter-spacing:.26em;gap:10px;margin-bottom:12px}
  .gx-eye::before{width:26px}
  .gx-h{font-size:clamp(36px,10.4vw,54px)}
  .gx-d{font-size:14.5px;padding-left:14px}
  .gx-cta .btn{flex:1 1 auto;justify-content:center;padding:14px 18px}
  .gx-bar{position:relative;height:auto;margin-top:26px;padding-top:6px;padding-bottom:22px;border-top:0}
  .gx-tabs{flex:1;gap:14px}
  .gx-tab{flex:1;min-width:0;gap:8px}
  .gx-tab em{font-size:16px}
  .gx-tab span{font-size:9.5px;letter-spacing:.14em}
  .gx-arr{display:none}
  .gx.go .gx-bar{animation-delay:1.6s}
}

@media(prefers-reduced-motion:reduce){
  .gx-s.on,.gx-s.on.intro{animation:gxFade .6s ease both}
  .gx-s.on .gx-kb,.gx-s.off .gx-kb{animation:none}
  .gx-frame,.gx-sweep{display:none}
  .gx-t.on .ln>span,.gx-t.on .gold>span{animation:gxFade .6s ease both}
  .gx-pin i::after{animation:none}
}