/* ============================================================
   PHOEBE ATELIER - Trang chu (home). Nap sau tokens.css + base.css.
   Chi dung bien token; khong hardcode mau/px roi rac.
   ============================================================ */

/* --- Menu mobile (drawer trai) --- */
.mmenu{ position:fixed; top:0; left:0; bottom:0; width:min(84vw,340px); background:var(--cream);
  z-index:90; transform:translateX(-100%); transition:transform var(--dur) var(--ease);
  padding:calc(var(--sp-6)) var(--gut) var(--sp-5); display:flex; flex-direction:column; }
.mmenu.show{ transform:none; }
.mmenu__close{ align-self:flex-start; background:none; border:0; color:var(--muted);
  font-size:var(--fs-xs); letter-spacing:var(--ls-label); text-transform:uppercase; margin-bottom:var(--sp-4); }
.mmenu__nav a{ display:block; font-family:var(--serif); font-size:var(--fs-d3); color:var(--ink);
  padding:12px 0; border-bottom:1px solid var(--line); }
.mmenu__nav a:hover{ color:var(--gold-deep); }

/* --- 1. HERO (dung component .hero-full cua Dot A) --- */
.hero-full__cta{ position:relative; z-index:2; margin-bottom:var(--sp-7); }

/* --- 1b. HERO SLIDES (CRM dang qua shop/config.heroSlides, home.js do vao #heroSlides) --- */
#heroSlides{ position:absolute; inset:0; width:100%; height:100%; }
.hero-slide{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; padding-bottom:var(--sp-7); opacity:0; z-index:1; text-decoration:none;
  transition:opacity 1.1s var(--ease); }
.hero-slide.is-active{ opacity:1; z-index:2; }
.hero-slide__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-slide__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,18,14,0) 45%, rgba(20,18,14,.32) 82%, rgba(20,18,14,.45) 100%); }
.hero-slide__wordmark{ position:relative; z-index:2; margin-bottom:var(--sp-4); }
.hero-slide__headline{ position:relative; z-index:2; display:block; font-family:var(--serif);
  font-size:var(--fs-d2); color:var(--cream); text-align:center; margin-bottom:var(--sp-2); }
.hero-slide__sub{ position:relative; z-index:2; display:block; font-size:var(--fs-xs);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--cream); text-align:center; }
.hero-dots{ position:absolute; z-index:3; bottom:var(--sp-3); left:0; right:0;
  display:flex; gap:10px; justify-content:center; }
/* Nut cham: vung cham 44x44 trong suot, cham 8px ve bang ::before */
.hero-dots{ gap:0; }
.hero-dots button{ position:relative; width:44px; height:44px; border:0; padding:0; cursor:pointer; background:transparent; }
.hero-dots button::before{ content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  background:rgba(251,250,247,.45); transition:background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.hero-dots button.is-active::before{ background:var(--cream); transform:scale(1.25); }
.hero-full--empty{ justify-content:center; min-height:56vh; min-height:56svh; background:var(--cream); }
.hero-full--empty::after{ display:none; }
.hero-full--empty #heroSlides{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero-empty__wordmark{ display:block; width:70vw; max-width:900px; height:auto; }

/* --- Tieu de khoi dung chung --- */
.newin__head{ display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap;
  margin-bottom:var(--sp-5); }
.newin__title{ font-size:var(--fs-d1); }
.newin__all{ margin-left:auto; }

/* --- 2. NEW IN (dung component .pgrid cua Dot A) --- */
.newin__empty{ color:var(--muted); font-size:var(--fs-sm); grid-column:1/-1; }

/* --- 2b. CAC DAY SAN PHAM CUON NGANG THEO DANH MUC --- */
.pshelf__head{ display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.pshelf__title{ font-size:var(--fs-d1); }
.pshelf__all{ margin-left:auto; }
.pshelf__row{ display:flex; gap:var(--sp-3); overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity; padding-bottom:var(--sp-2); }
.pshelf__row .pcard{ flex:0 0 260px; scroll-snap-align:start; }
@media (max-width:640px){
  .pshelf__row .pcard{ flex-basis:198px; }
}

/* --- 2c. REAL BRIDES REAL MOMENTS (mau phoebevietnam 10/10: tieu de nho dam, anh bo goc, 1 cau thuong hieu) --- */
.brides__title{ font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.01em; color:#111; text-align:center; margin-bottom:22px; }
.brides__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.brides--n8 .brides__grid, .brides--n4 .brides__grid{ grid-template-columns:repeat(4,1fr); }
.brides__item{ position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:8px; background:var(--ivory); }
.brides__item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s ease; }
@media (hover:hover){ .brides__item:hover img{ transform:scale(1.03); } }
.brides__line{ max-width:340px; margin:22px auto 0; text-align:center; font-size:14.5px; line-height:1.45; color:#3a3a3a; }
@media (max-width:900px){
  .brides__grid, .brides--n8 .brides__grid, .brides--n4 .brides__grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .brides__item{ border-radius:6px; }
}

/* --- 3. CATEGORY TILES: full-bleed, khong khung, khong nen xam --- */
.tiles__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.tile{ position:relative; display:block; overflow:hidden; background:var(--ivory); }
.tile__media{ position:relative; aspect-ratio:3/4; background:var(--c-gold-tint); }
.tile__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.tile:hover .tile__media img{ transform:scale(1.045); }
.tile::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,25,20,0) 55%, rgba(28,25,20,.5) 100%); }
.tile__label{ position:absolute; left:0; right:0; bottom:var(--sp-5); z-index:2; text-align:center;
  font-family:var(--serif); font-size:var(--fs-d2); color:var(--paper); letter-spacing:.02em; }

/* --- 4. HANH TRINH DAT MAY: bo khung/nen, anh full-bleed mot ben --- */
.journey{ background:var(--cream); }
.journey__grid{ display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch; gap:0; }
.journey__media{ aspect-ratio:4/5; background:var(--c-gold-tint); overflow:hidden; }
.journey__media img{ width:100%; height:100%; object-fit:cover; }
.journey__body{ padding:var(--sp-8) var(--gut) var(--sp-8) var(--sp-6); display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; }
.journey__title{ font-size:var(--fs-d1); margin:0 0 var(--sp-6); max-width:14ch; }
.journey__steps{ list-style:none; margin:0 0 var(--sp-6); padding:0; display:flex; gap:var(--sp-6); }
.step{ display:flex; flex-direction:column; gap:var(--sp-2); }
.step__no{ font-family:var(--serif); font-size:var(--fs-d3); color:var(--ink); }
.step__name{ font-size:var(--fs-xs); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink-soft); }

/* --- 5. THE ITEM: dung component .item-block cua Dot A (khong can them CSS) --- */

/* --- 6. TRAI NGHIEM ATELIER: chu to thua hon --- */
.exp{ background:var(--navy); color:var(--cream); }
.exp__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);
  padding-top:var(--sp-7); padding-bottom:var(--sp-7); }
.exp__item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--sp-3); }
.exp__icon{ color:var(--champagne); }
.exp__label{ font-size:var(--fs-xs); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--cream); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .journey__grid{ grid-template-columns:1fr; }
  .journey__media{ aspect-ratio:16/10; }
  .journey__body{ padding:var(--sp-6) var(--gut); }
}
@media (max-width:640px){
  .tiles__grid{ grid-template-columns:1fr; }
  .journey__steps{ gap:var(--sp-4); }
  .exp__grid{ grid-template-columns:1fr; gap:var(--sp-5); }
}

/* --- Hero video PHOEBE (10/10/2026) --- */
.hero-full--video{ justify-content:flex-end; align-items:center; background:#000; }
.hero-full--video #heroSlides{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.hero-full--video .hero-video{ object-position:50% 35%; }
.hero-video__mark{ position:relative; z-index:2; display:block; width:clamp(150px, 16vw, 260px); height:auto; margin-bottom:26px; }
@media (max-width:760px){ .hero-video__mark{ width:min(44vw, 180px); margin-bottom:20px; } }

/* 10/10/2026 (Phuc): bo tieu de nen khoang cach giua cac day anh thu hep lai */
#homeShelves .pshelf.section, #homeBrides .brides.section{ padding-top:22px; padding-bottom:22px; }
#homeShelves .pshelf.section:first-child{ padding-top:44px; }
#homeBrides .brides.section{ padding-bottom:56px; }
@media (max-width:760px){
  #homeShelves .pshelf.section, #homeBrides .brides.section{ padding-top:14px; padding-bottom:14px; }
  #homeShelves .pshelf.section:first-child{ padding-top:24px; }
  #homeBrides .brides.section{ padding-bottom:36px; }
}

/* --- LOOKBOOK (lookbook.js): luoi so le kieu Pinterest theo cot, luot ngang --- */
.lbk{ padding-top:22px; padding-bottom:22px; }
.lbk-bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.lbk-label{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--c-gold-ink); }
.lbk-name{ font-family:var(--serif); font-size:18px; color:var(--c-navy); }
.lbk-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.lbk-chip{ height:34px; padding:0 14px; border:1px solid var(--c-line); border-radius:17px; background:#fff; font:inherit; font-size:13.5px; color:var(--c-navy); cursor:pointer; }
.lbk-chip.is-on{ background:var(--c-navy); border-color:var(--c-navy); color:#fff; }
.lbk-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding-bottom:6px; outline:none; }
.lbk-scroll::-webkit-scrollbar{ height:4px; }
.lbk-scroll::-webkit-scrollbar-thumb{ background:var(--c-line); border-radius:2px; }
.lbk-grid{ display:inline-flex; flex-direction:column; gap:0; }
.lbk-row{ display:flex; gap:0; height:330px; }
.lbk-item{ display:block; flex:none; height:100%; padding:0; border:0; background:var(--ivory); border-radius:0; overflow:hidden; cursor:zoom-in; scroll-snap-align:start; }
.lbk-item img{ display:block; height:100%; width:auto; aspect-ratio:auto 4 / 5; transition:transform .8s ease; }
@media (hover:hover){ .lbk-item:hover img{ transform:scale(1.03); } }
@media (max-width:760px){
  .lbk{ padding-top:14px; padding-bottom:14px; }
  .lbk-row{ height:210px; }
}

/* xem lon */
.lbx{ position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; gap:10px; padding:56px 70px 24px;
  background:rgba(251,250,247,.97); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.lbx.show{ display:flex; }
.lbx-fig{ margin:0; display:flex; flex-direction:column; align-items:center; max-height:100%; }
.lbx-fig img{ display:block; max-width:min(78vw, 900px); max-height:calc(100vh - 140px); max-height:calc(100dvh - 140px); object-fit:contain; border-radius:6px; }
.lbx-n{ margin-top:10px; font-size:12px; letter-spacing:.12em; color:var(--muted); }
.lbx-x, .lbx-prev, .lbx-next{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; background:none; color:var(--c-navy); cursor:pointer; }
.lbx-x{ position:absolute; top:12px; right:14px; }
.lbx-prods{ display:flex; flex-direction:column; gap:10px; width:240px; max-height:calc(100vh - 140px); overflow:auto; }
.lbx-prod{ display:grid; grid-template-columns:56px 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; color:var(--c-navy); text-decoration:none; }
.lbx-prod img{ grid-row:1 / span 2; width:56px; height:72px; object-fit:cover; border-radius:4px; }
.lbx-prod span{ font-family:var(--serif); font-size:17px; line-height:1.2; }
.lbx-prod b{ font-weight:400; font-size:14px; color:#444; }
@media (max-width:760px){
  .lbx{ flex-direction:column; padding:56px 12px 16px; }
  .lbx-prev, .lbx-next{ position:absolute; top:50%; transform:translateY(-50%); }
  .lbx-prev{ left:2px; } .lbx-next{ right:2px; }
  .lbx-fig img{ max-width:calc(100vw - 80px); max-height:62vh; }
  .lbx-prods{ flex-direction:row; width:100%; max-height:none; overflow-x:auto; }
  .lbx-prod{ flex:0 0 220px; }
}
#lookbook{ scroll-margin-top:calc(var(--header-h, 80px) + 10px); }

/* dau hieu luot xuong duoi chu PHOEBE: vach manh, 1 doan sang chay doc xuong */
.hero-cue{ position:relative; z-index:2; display:block; width:28px; height:64px; margin:0 0 5vh; padding:0; border:0; background:none; cursor:pointer; }
.hero-cue span{ position:absolute; left:50%; top:0; width:1px; height:100%; margin-left:-.5px; overflow:hidden; background:rgba(251,250,247,.28); }
.hero-cue span::after{ content:""; position:absolute; left:0; top:-40%; width:1px; height:40%;
  background:linear-gradient(to bottom, rgba(251,250,247,0), rgba(251,250,247,.95)); animation:heroCue 2.4s cubic-bezier(.65,0,.35,1) infinite; }
.hero-cue:focus-visible{ outline:1px solid rgba(251,250,247,.8); outline-offset:4px; }
@keyframes heroCue{ 0%{ top:-40%; } 70%{ top:100%; } 100%{ top:100%; } }
@media (max-width:760px){ .hero-cue{ height:52px; margin-bottom:4vh; } }
@media (prefers-reduced-motion: reduce){ .hero-cue span::after{ animation:none; top:30%; } }

/* o View all cuoi moi day san pham */
.pshelf__all-tile{ flex:0 0 200px; display:flex; align-items:center; justify-content:center; aspect-ratio:2 / 3; align-self:flex-start;
  border:1px solid var(--c-line); color:var(--c-navy); text-decoration:none; font-size:14px; letter-spacing:.04em; scroll-snap-align:start; }
.pshelf__all-tile span{ border-bottom:1px solid currentColor; padding-bottom:3px; }
.pshelf__all-tile:hover{ border-color:var(--c-navy); }
@media (max-width:640px){ .pshelf__all-tile{ flex-basis:150px; } }
a.lbk-name{ text-decoration:none; color:var(--c-navy); }
a.lbk-name:hover{ text-decoration:underline; text-underline-offset:5px; }

/* cau thuong hieu giong app PHOEBE iOS: logo navy + 1 cau nghieng */
.brides__brand{ margin:46px auto 10px; text-align:center; }
.brides__brand img{ display:block; width:clamp(150px, 15vw, 210px); height:auto; margin:0 auto 22px; }
.brides__brand .brides__line{ max-width:620px; margin:0 auto; font-family:'Cormorant Garamond', var(--serif); font-style:italic; font-size:clamp(20px, 1.9vw, 27px); line-height:1.45; color:#3F3F3F; }
@media (max-width:760px){ .brides__brand{ margin-top:32px; } .brides__brand img{ width:140px; margin-bottom:16px; } }
/* Ke SCARLETT AFFAIR tren home PHOEBE (10/10/2026): o cuoi mang mau thuong hieu SCARLETT, dan scarlett.html */
.pshelf__all-tile--line{ background:#360F0E; border-color:#360F0E; color:#E8BB84; font-family:var(--serif); font-size:15px; letter-spacing:.16em; text-align:center; padding:0 12px; }
.pshelf__all-tile--line:hover{ border-color:#360F0E; }
/* 10/10/2026 (Phuc): ten hang nho + See all ben phai */
#homeShelves .pshelf__head{ align-items:baseline; flex-wrap:nowrap; margin-bottom:14px; }
.pshelf__label{ margin:0; font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--c-navy); }
.pshelf__all{ margin-left:auto; font-size:13px; color:var(--c-ink); white-space:nowrap; }

/* --- 10/10/2026 (Phuc): trang chu PHOEBE, hang ban chay (khong tieu de) + lookbook the to cuon ngang --- */
#homeShelves .hlb.section{ padding-top:22px; padding-bottom:22px; }
#homeShelves .hlb.section:first-child{ padding-top:44px; }
.hlb__row{ display:flex; gap:var(--sp-3); overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding-bottom:var(--sp-2); }
.hlb__card{ flex:0 0 min(32%, 520px); display:block; text-decoration:none; color:var(--c-navy); scroll-snap-align:start; }
.hlb__img{ display:block; aspect-ratio:4 / 5; overflow:hidden; background:var(--ivory); }
.hlb__img img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
@media (hover:hover){ .hlb__card:hover .hlb__img img{ transform:scale(1.02); } }
.hlb__name{ display:block; margin-top:12px; font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--c-navy); }
@media (max-width:760px){
  #homeShelves .hlb.section{ padding-top:14px; padding-bottom:14px; }
  #homeShelves .hlb.section:first-child{ padding-top:24px; }
  .hlb__card{ flex-basis:82%; }
  .hlb__name{ margin-top:10px; }
}

/* 10/10/2026: lookbook = carousel anh cua bo, ten bo nho dau hang */
.hlb__title{ text-decoration:none; }
.hlb__row{ gap:4px; }
/* skeleton cho anh lookbook khi chua tai xong */
.hlb__img{ background:linear-gradient(100deg, #EFECE6 30%, #F7F5F1 50%, #EFECE6 70%); background-size:220% 100%; animation:ph-skel 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .hlb__img{ animation:none; } }