/* Trang SCARLETT: nen do ruou gan den (#360F0E), chu vang #E8BB84 (do tu logo), chu kem. Khong box. */
body.sc{ background:#360F0E; color:#F3E9DC; font-family:var(--sans); margin:0; }
.sc a{ text-decoration:none; }

/* header noi tren video, cuon xuong thi nen dac */
.sc-hd{ position:fixed; top:0; left:0; right:0; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  height:72px; padding:0 32px; color:#F3E9DC; transition:background .35s ease; }
.sc-hd.is-solid{ background:rgba(54,15,14,.95); }
.sc-hd__back img{ display:block; width:92px; height:auto; opacity:.9; }
.sc-hd__back:hover img{ opacity:1; }
.sc-hd__mark{ font-family:'Cinzel', var(--serif); font-size:22px; letter-spacing:.08em; color:#E8BB84; }
.sc-hd__bag{ justify-self:end; position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; color:#F3E9DC; }
.sc-count{ position:absolute; top:6px; right:2px; font-size:10px; font-weight:600; color:#E8BB84; }

/* video */
.sc-hero{ position:relative; height:88vh; height:88svh; min-height:520px; overflow:hidden; background:#000; }
.sc-hero__v{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.sc-hero__shade{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(54,15,14,.35), rgba(54,15,14,0) 30%, rgba(54,15,14,.15) 60%, #360F0E); }
.sc-hero__cap{ position:absolute; left:0; right:0; bottom:9%; text-align:center; padding:0 20px; }
.sc-hero__t{ margin:0; font-family:'Cinzel', var(--serif); font-weight:400; font-size:clamp(34px, 5.2vw, 84px); letter-spacing:.06em; padding-left:.06em; color:#E8BB84; line-height:1; }
.sc-hero__s{ margin:16px 0 0; font-family:'Cormorant Garamond', var(--serif); font-style:italic; font-size:clamp(18px, 1.7vw, 24px); color:#F3E9DC; }

/* luoi san pham */
.sc-main{ max-width:1400px; margin:0 auto; padding:70px 40px 100px; }
.sc-h{ margin:0 0 40px; text-align:center; font-family:'Cinzel', var(--serif); font-weight:400; font-size:15px; letter-spacing:.24em; color:#E8BB84; text-transform:uppercase; }
.sc-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:36px 22px; min-height:120px; }
.sc-grid .pcard .ph{ background:#46191A; }
.sc-grid .pcard .ph-fallback{ color:#E8BB84; }
.sc-grid .pcard .nm{ color:#F3E9DC; font-weight:500; }
.sc-grid .pcard .pr{ color:#E8BB84; font-weight:500; }
.sc-grid .pcard .kd{ color:#E8BB84; }
.sc-empty{ grid-column:1 / -1; margin:20px 0; text-align:center; font-family:'Cormorant Garamond', var(--serif); font-style:italic; font-size:22px; color:#F3E9DC; opacity:.8; }

@media (max-width: 1000px){
  .sc-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 760px){
  .sc-hd{ height:60px; padding:0 14px; }
  .sc-hd__back img{ width:72px; }
  .sc-hd__mark{ font-size:18px; }
  .sc-hero{ height:78svh; min-height:440px; }
  .sc-main{ padding:48px 16px 70px; }
  .sc-h{ margin-bottom:26px; }
  .sc-grid{ grid-template-columns:repeat(2, 1fr); gap:26px 12px; }
  .sc-grid .pcard .nm{ font-size:17px; }
}
/* chu SCARLETT tren header chi hien khi da cuon qua video (tren video da co chu lon) */
.sc-hd__mark{ transition:opacity .35s ease; }
.sc-hd:not(.is-solid) .sc-hd__mark{ opacity:0; pointer-events:none; }
.sc-hd__menu{ justify-self:start; display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0; border:0; background:none; color:#F3E9DC; cursor:pointer; }

/* dau hieu luot xuong (cung kieu trang PHOEBE, mau vang) */
.sc-cue{ position:relative; display:block; width:28px; height:60px; margin:22px auto 0; padding:0; border:0; background:none; cursor:pointer; }
.sc-cue span{ position:absolute; left:50%; top:0; width:1px; height:100%; margin-left:-.5px; overflow:hidden; background:rgba(232,187,132,.28); }
.sc-cue span::after{ content:""; position:absolute; left:0; top:-40%; width:1px; height:40%;
  background:linear-gradient(to bottom, rgba(232,187,132,0), rgba(232,187,132,.95)); animation:scCue 2.4s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes scCue{ 0%{ top:-40%; } 70%{ top:100%; } 100%{ top:100%; } }
@media (prefers-reduced-motion: reduce){ .sc-cue span::after{ animation:none; top:30%; } }