/* PHOEBE gateway (index.html): 2 nua video PHOEBE / SCARLET + footer, theo mau trang chu Dior 10/10/2026.
   Desktop (co chuot): ca 2 nua toi + dung, re chuot vao nua nao thi nua do sang + chay video.
   Dien thoai / may cam ung: ca 2 video chay, khong toi. */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body.gw{ background:#F0EFED; color:#33383C; font-family:var(--sans); -webkit-font-smoothing:antialiased; }
.gw a{ color:inherit; text-decoration:none; }
.mmenu,.scrim{ display:none !important; }

/* ---------- 2 nua ---------- */
.gw-split{ display:flex; width:100%; height:100vh; height:100svh; min-height:520px; background:#000; overflow:hidden; }
.gw-half{ position:relative; flex:1 1 50%; overflow:hidden; }
.gw-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; display:block; background:#111; }
.gw-dim{ position:absolute; inset:0; background:rgba(0,0,0,.6); transition:opacity .7s ease; pointer-events:none; }
.gw-half::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:38%; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0)); }
.gw-link{ position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end; justify-content:center; outline:none; }
.gw-cap{ display:flex; flex-direction:column; align-items:center; gap:22px; padding-bottom:72px; color:#fff;
  opacity:.45; transition:opacity .7s ease; text-align:center; }
.gw-logo{ display:block; width:clamp(118px, 11.5vw, 190px); height:auto; }
/* PHOEBE ATELIER: logo PHOEBE cung co + chu ATELIER nho nam duoi (dat tuyet doi) de chan logo ngang nua PHOEBE */
.gw-cap{ position:relative; }
.gw-sub{ position:absolute; left:50%; top:100%; transform:translate(-50%, -54px); white-space:nowrap;
  font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.42em; padding-left:.42em; color:#fff; }
/* Scarlett: chu vang do tu logo IG (#E8BB84), kieu chu Cinzel gan logo */
.gw-logo--text{ width:auto; font-family:'Cinzel', 'Cormorant Garamond', var(--serif); font-weight:400; line-height:1; white-space:nowrap;
  font-size:clamp(25px, 2.85vw, 46px); letter-spacing:.05em; padding-left:.05em; color:#E8BB84;
  margin-bottom:-.195em; /* Cinzel: chan chu nam cao hon day hop .195em, keo xuong cho ngang chan chu logo PHOEBE */ }

/* nut dung / chay (goc duoi trai moi nua) */
.gw-pp{ position:absolute; z-index:3; left:28px; bottom:28px; width:34px; height:34px; padding:0; border:0; border-radius:4px;
  background:rgba(0,0,0,.18); cursor:pointer; color:#fff; opacity:.75; transition:opacity .3s, background .3s; }
.gw-pp:hover,.gw-pp:focus-visible{ opacity:1; background:rgba(0,0,0,.35); outline:none; }
.gw-pp::before,.gw-pp::after{ content:""; position:absolute; top:11px; height:12px; }
.gw-pp::before{ left:13px; width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent #fff; }
.gw-half.is-playing .gw-pp::before{ left:12px; width:3px; height:12px; border:0; background:#fff; }
.gw-half.is-playing .gw-pp::after{ left:19px; width:3px; background:#fff; }

/* trang thai sang (dang re chuot / dang chay) */
.gw-half.is-on .gw-dim{ opacity:0; }
.gw-half.is-on .gw-cap{ opacity:1; }
.gw-link:focus-visible .gw-cap{ outline:1px solid #fff; outline-offset:10px; }

/* may cam ung / man nho: ca 2 nua sang + chay */
.gw--touch .gw-dim{ opacity:0; }
.gw--touch .gw-cap{ opacity:1; }

/* ---------- dien thoai ---------- */
@media (max-width: 899px){
  /* dien thoai: 2 video dung canh nhau (video doc), day 1 man hinh; cuon xuong moi thay footer */
  .gw-split{ min-height:440px; }
  .gw-cap{ gap:14px; padding-bottom:40px; }
  .gw-logo{ width:min(27vw, 112px); }
  .gw-logo--text{ width:auto; font-size:clamp(17px, 7vw, 30px); letter-spacing:.04em; padding-left:.04em; }
  .gw-sub{ transform:translate(-50%, -27px); font-size:10px; }

  .gw-pp{ left:12px; bottom:12px; width:30px; height:30px; }
  .gw-pp::before{ top:9px; left:11px; }
  .gw-half.is-playing .gw-pp::before{ top:9px; left:10px; }
  .gw-half.is-playing .gw-pp::after{ top:9px; left:17px; }

}
@media (prefers-reduced-motion: reduce){
  .gw-dim,.gw-cap{ transition:none; }
}

/* man che chuyen trang (truot tu duoi len) */
.pt-cover{ position:fixed; left:0; right:0; bottom:0; height:100%; z-index:300; transform:translateY(100%);
  transition:transform .7s cubic-bezier(.76,0,.24,1); will-change:transform; }
.pt-cover.is-up{ transform:translateY(0); }

/* 10/10/2026: bo vien xanh mac dinh khi bam chuot / cham; chi hien vien manh khi dung ban phim (Tab) */
*{ -webkit-tap-highlight-color:transparent; }
:focus:not(:focus-visible){ outline:none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:1px solid currentColor; outline-offset:3px; }