/* ============================================================
   PHOEBE - Base + component system (dung chung moi page)
   Nap sau tokens.css. Page rieng chi them css/<page>.css.
   Quy chuan 26/09: khong box, khong bong, nut chinh champagne chu navy,
   tab gach chan, chi o nhap + anh moi co vien.
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body);
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:lining-nums;   /* so tien Cormorant dung chu so thang hang */
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:var(--lh-tight); margin:0; letter-spacing:.005em; color:var(--c-navy); }
::selection{ background:var(--c-gold-tint); color:var(--c-navy); }

/* --- Layout --- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut); }
.section{ padding-top:var(--sp-7); padding-bottom:var(--sp-7); }
.section--tight{ padding-top:var(--sp-6); padding-bottom:var(--sp-6); }

/* --- Eyebrow / label --- */
.eyebrow{ font-size:var(--fs-xs); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--muted); font-weight:500; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* --- Buttons ---
   .btn          = nut chinh: nen champagne, CHU NAVY semibold, cao 50, bo 10 (moi man 1 nut)
   .btn--ghost   = nut phu: nen trong, vien 1px line, chu navy
   .link-underline = nut chu: chu vang #7D6437 */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:0 28px; border:1px solid var(--c-champ); border-radius:var(--radius);
  background:var(--c-champ); color:var(--c-navy);
  font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.02em; text-transform:none;
  text-align:center; transition:filter .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.btn:hover{ filter:brightness(.96); }
.btn[disabled]{ opacity:.7; cursor:default; }
.btn--ghost{ background:transparent; color:var(--c-navy); border-color:var(--c-line); }
.btn--ghost:hover{ filter:none; border-color:var(--c-champ); }
.btn--gold{ background:var(--c-champ); border-color:var(--c-champ); color:var(--c-navy); }
.btn--block{ width:100%; }
@media (max-width:600px){
  .btn:not(.btn--ghost){ width:100%; }
}
.link-underline{ font-size:var(--fs-xs); letter-spacing:var(--ls-label); text-transform:uppercase; font-weight:600;
  color:var(--c-gold-ink); position:relative; padding-bottom:4px; display:inline-block; background:none; border:0; }
.link-underline::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--c-champ);
  transform:scaleX(1); transform-origin:right; transition:transform var(--dur) var(--ease); }
.link-underline:hover::after{ transform:scaleX(0); transform-origin:left; }
/* Vung cham 44 cho link chu nho (khong doi bo cuc): lop trong suot cao 44 canh giua */
.link-underline::before{ content:""; position:absolute; left:0; right:0; top:50%; height:44px; margin-top:-22px; }

/* --- HEADER (do js/store.js dung len vao #site-header). Khong ke duoi header. --- */
#site-header{ position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter:saturate(120%) blur(10px); }
.hd-strip{ text-align:center; font-size:var(--fs-xs); letter-spacing:var(--ls-wide); color:var(--muted);
  padding:8px var(--gut); }
.hd-main{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:16px var(--gut); }
.hd-nav{ display:flex; gap:26px; align-items:center; }
.hd-nav a{ font-size:var(--fs-xs); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--c-navy); font-weight:500; white-space:nowrap; }
.hd-nav a:hover{ color:var(--c-gold-ink); }
.hd-logo{ text-align:center; min-width:0; }
.hd-logo .mark{ font-family:var(--serif); font-size:32px; letter-spacing:.14em; color:var(--ink); font-weight:600; line-height:1; }
.hd-logo .sub{ display:block; font-size:var(--fs-xs); letter-spacing:.36em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.hd-tools{ display:flex; gap:20px; align-items:center; justify-content:flex-end; min-width:0; }
.hd-tools button, .hd-tools a{ background:none; border:0; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; }
.hd-bag{ position:relative; }
.hd-bag .count{ position:absolute; top:-8px; right:-10px; min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  background:var(--c-champ); color:var(--c-navy); font-size:var(--fs-xs); font-weight:600; display:none; align-items:center; justify-content:center; font-family:var(--sans); }
.hd-burger{ display:none; }

/* --- HEADER NAV DROPDOWN (hover panel, chi desktop >=861px). Panel noi: giu 1 vien manh, khong bong. --- */
.hd-nav__item{ position:relative; }
.hd-nav__panel{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  min-width:190px; background:var(--cream); border:1px solid var(--line);
  padding:10px 0; opacity:0; visibility:hidden; pointer-events:none; z-index:70;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.hd-nav__panel a{ display:block; padding:8px 20px; white-space:nowrap; font-size:var(--fs-sm);
  letter-spacing:var(--ls-wide); text-transform:none; color:var(--ink-soft); }
.hd-nav__panel a:hover{ color:var(--c-gold-ink); background:var(--c-gold-tint); }
@media (min-width:861px){
  .hd-nav__item--drop:hover .hd-nav__panel,
  .hd-nav__item--drop:focus-within .hd-nav__panel{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
}
@media (max-width:1360px){ .hd-nav{ gap:18px; } }
/* Duoi 1240px nav 7 muc khong du cho canh logo: chuyen sang nut menu */
@media (max-width:1240px){
  .hd-main{ grid-template-columns:auto minmax(0,1fr) auto; gap:12px; }
  .hd-nav{ display:none; }
  .hd-burger{ display:inline-flex; background:none; border:0; color:var(--ink); padding:0; min-width:44px; min-height:44px; align-items:center; }
}
/* Dien thoai: bot icon (Search/Account co trong menu), thu logo, khong tran ngang */
@media (max-width:600px){
  .hd-main{ padding:10px var(--gut); gap:8px; }
  .hd-tools{ gap:10px; }
  .hd-tools .hd-search, .hd-tools .hd-acct{ display:none; }
  .hd-tools .hd-bag{ min-width:44px; min-height:44px; }
  .hd-logo{ display:flex; align-items:center; justify-content:center; min-height:44px; }   /* vung cham 44 */
  .hd-logo .mark{ font-size:26px; letter-spacing:.12em; }
  .hd-logo .sub{ letter-spacing:.3em; }
}
@media (max-width:360px){
  .hd-logo .mark{ font-size:23px; letter-spacing:.1em; }
  .hd-logo .sub{ letter-spacing:.24em; }
}

/* --- FOOTER: xem css/footer.css (10/10/2026, kieu Dior nen trang) --- */
.news{ display:flex; border-bottom:1px solid rgba(251,250,247,.3); max-width:320px; }
.news input{ flex:1; background:none; border:0; color:var(--cream); padding:10px 0; font-family:var(--sans); font-size:var(--fs-sm); outline:none; }
.news button{ background:none; border:0; color:var(--c-champ); font-size:var(--fs-xs); letter-spacing:var(--ls-label); text-transform:uppercase; }

/* --- PRODUCT CARD (dung o PLP, home, PDP goi y). Anh khong bo goc, khong khung. --- */
.pcard{ display:block; }
.pcard .ph{ position:relative; aspect-ratio:2/3; background:var(--ivory); overflow:hidden; }
.pcard .ph img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1; transition:opacity var(--dur) var(--ease), transform 1.2s var(--ease); }
.pcard .ph img.alt{ position:absolute; inset:0; opacity:0; }
.pcard:hover .ph img.alt{ opacity:1; }
.pcard:hover .ph img.main{ transform:scale(1.03); }
.pcard .meta{ padding:14px 2px 4px; }
.pcard .kd{ font-size:var(--fs-xs); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--c-gold-ink); font-weight:500; margin-bottom:6px; }
.pcard .nm{ font-family:var(--serif); font-size:21px; font-weight:600; color:var(--ink); line-height:1.2; }
.pcard .pr{ font-family:var(--serif); font-size:var(--fs-price); font-weight:600; color:var(--ink); margin-top:4px; }
.pcard .fav{ position:absolute; top:10px; right:10px; background:none; border:0; color:var(--ink); opacity:0; transition:opacity var(--dur); }
.pcard:hover .fav{ opacity:1; }

/* --- Placeholder anh (khi chua co anh that): nen vang nhat + ten serif --- */
.ph-fallback{ position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--c-gold-tint); color:var(--c-gold-ink); font-family:var(--serif); font-size:24px; letter-spacing:.06em; padding:20px; }

/* --- Accordion (PDP) --- */
.acc{ border-top:1px solid var(--line); }
.acc__h{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:20px 0; min-height:44px; background:none; border:0;
  font-size:var(--fs-xs); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink); font-weight:600; }
.acc__c{ overflow:hidden; max-height:0; transition:max-height var(--dur) var(--ease); }
.acc.open .acc__c{ max-height:420px; }
.acc__c .inner{ padding-bottom:22px; color:var(--ink-soft); font-size:var(--fs-body); line-height:var(--lh-body); }
.acc__chev{ transition:transform var(--dur) var(--ease); }
.acc.open .acc__chev{ transform:rotate(180deg); }

/* --- Forms: o nhap la noi duy nhat co vien 1px, bo 10 --- */
.field{ display:block; margin-bottom:18px; }
.field label{ font-size:var(--fs-xs); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--muted); font-weight:500; display:block; margin-bottom:7px; }
.field input, .field select, .field textarea{ width:100%; background:var(--c-white); border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px;
  font-family:var(--sans); font-size:15px; color:var(--ink); outline:none; transition:border-color var(--dur); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--c-champ); }

/* --- Reveal on scroll --- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* --- Drawer scrim (mini-bag / menu) --- */
.scrim{ position:fixed; inset:0; background:rgba(31,58,95,.32); opacity:0; visibility:hidden; transition:opacity var(--dur); z-index:80; }
.scrim.show{ opacity:1; visibility:visible; }

/* --- Mobile menu (store.js dung len moi trang). Khong bong. --- */
.mmenu{ position:fixed; top:0; left:0; bottom:0; width:min(84vw,360px); background:var(--cream); z-index:90;
  transform:translateX(-100%); transition:transform var(--dur) var(--ease); padding:26px 24px; overflow-y:auto; }
.mmenu.show{ transform:none; }
.mm-x{ border:0; background:none; font-size:28px; color:var(--ink); line-height:1; margin-bottom:24px; min-width:44px; min-height:44px; }
.mm-nav{ display:flex; flex-direction:column; }
.mm-nav a{ font-family:var(--serif); font-size:27px; font-weight:500; color:var(--ink); padding:12px 0; border-bottom:1px solid var(--line); }
.mm-nav .hd-nav__panel{ display:none; }

/* ============================================================
   DOT A - NEN Zara-couture: component tai dung cho dot B (page)
   ============================================================ */

/* --- HEADER CO DINH tren trang co hero: chi doi mau nen, KHONG doi vi tri (tranh trang nhay) --- */
#site-header.hd--fixed{ position:fixed; top:0; left:0; right:0; width:100%; transition:background-color .35s ease, backdrop-filter .35s ease; }

/* --- HEADER OVERLAY (dung khi #site-header nam de len .hero-full) --- */
#site-header.hd--overlay{ position:fixed; top:0; left:0; right:0; width:100%;
  background:transparent; backdrop-filter:none; }
#site-header.hd--overlay .hd-strip{ color:rgba(251,250,247,.86); }
#site-header.hd--overlay .hd-nav a{ color:var(--cream); }
#site-header.hd--overlay .hd-nav a:hover{ color:var(--champagne); }
#site-header.hd--overlay .hd-nav__panel a{ color:var(--ink-soft); }
#site-header.hd--overlay .hd-logo .mark{ color:var(--cream); }
#site-header.hd--overlay .hd-logo .sub{ color:rgba(251,250,247,.8); }
#site-header.hd--overlay .hd-tools a, #site-header.hd--overlay .hd-tools button{ color:var(--cream); }
#site-header.hd--overlay .hd-burger{ color:var(--cream); }
#site-header.hd--overlay .hd-logo{ opacity:0; pointer-events:none; }

/* --- HERO FULL BLEED (anh hoac video full man hinh, scrim nhe, slot wordmark + caption) --- */
.hero-full{ position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; overflow:hidden; background:var(--navy); }
.hero-full__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-full::after{ content:""; 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-full__wordmark{ position:relative; z-index:2; margin-bottom:var(--sp-4); }
.hero-full__caption{ position:relative; z-index:2; margin:0 0 var(--sp-6); font-size:var(--fs-xs);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--cream); text-align:center; }

/* --- WORDMARK KHONG LO (logo dang chu SVG, dung trong hero/footer) --- */
.wordmark-xl{ display:block; width:86vw; max-width:1160px; height:auto; margin:0 auto; }

/* --- ITEM BLOCK ("THE ITEM"): chu display lon 1 ben, anh lon 1 ben --- */
.item-block{ display:grid; grid-template-columns:1fr 1fr; align-items:center; }
.item-block__media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--ivory); }
.item-block__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.item-block__copy{ padding:var(--sp-6) var(--gut); }
.item-block__copy .eyebrow{ display:block; margin-bottom:var(--sp-2); }
.item-block__title{ font-family:var(--serif); font-weight:500; font-size:var(--fs-giant); line-height:.9;
  letter-spacing:-.01em; color:var(--ink); margin:0; }
.item-block__desc{ margin-top:var(--sp-4); max-width:40ch; color:var(--ink-soft); font-size:var(--fs-body); line-height:var(--lh-body); }
.item-block__cta{ margin-top:var(--sp-4); }
.item-block--flip{ direction:rtl; }
.item-block--flip > *{ direction:ltr; }
@media (max-width:900px){
  .item-block{ grid-template-columns:1fr; }
  .item-block--flip{ direction:ltr; }
  .item-block__copy{ padding:var(--sp-5) var(--gut); }
  .item-block__title{ font-size:clamp(44px, 14vw, 80px); overflow-wrap:anywhere; }
}

/* --- PRODUCT GRID THUA: 3 cot desktop, gap doc lon --- */
.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:var(--sp-3); row-gap:var(--sp-7); }
.pgrid .pcard--wide{ grid-column:span 2; }
.pgrid .pcard--wide .ph{ aspect-ratio:16/10; }
@media (max-width:900px){
  .pgrid{ grid-template-columns:repeat(2,1fr); row-gap:var(--sp-5); column-gap:var(--sp-2); }
  .pgrid .pcard--wide{ grid-column:span 2; }
  .pgrid .pcard--wide .ph{ aspect-ratio:2/3; }
}
@media (max-width:560px){
  .pgrid{ grid-template-columns:repeat(1,1fr); row-gap:var(--sp-4); }
  .pgrid .pcard--wide{ grid-column:span 1; }
}


/* Trang dich sau hieu ung chuyen tu gateway (10/10/2026): man mau giu yen den khi trang san sang (js/pt-in.js them .pt-go),
   roi nhat dan; tung phan (.pt-el, --d = do tre) hien len tu duoi lan luot. */
html.pt-in body::after{ content:""; position:fixed; inset:0; z-index:300; background:var(--pt-color, #F7F6F4); pointer-events:none; }
html.pt-in.pt-go body::after{ animation:ptReveal .8s cubic-bezier(.4,0,.2,1) forwards; }
html.pt-in .pt-el{ opacity:0; transform:translateY(18px); }
html.pt-in.pt-go .pt-el{ animation:ptUp 1s cubic-bezier(.2,.7,.2,1) var(--d, 0s) both; }
@keyframes ptReveal{ to{ opacity:0; visibility:hidden; } }
@keyframes ptUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ html.pt-in body::after{ display:none; } html.pt-in .pt-el{ opacity:1; transform:none; animation:none; } }

/* 10/10/2026 (Phuc): bo tieu de trang chu to (Bag, Your private space, ten chinh sach, Shop...).
   Tieu de trang chi con nhan nho viet hoa kieu Dior. Giu nguyen: ten san pham, chu tren anh hero. */
main h1:not(.pdp-title):not(.sc-hero__t):not(.pdp-missing__t),
.cl-title, .atelier-intro__title, .policy h1, body > h1{
  font-family:var(--sans) !important; font-size:13px !important; font-weight:500 !important; letter-spacing:.2em !important;
  text-transform:uppercase; line-height:1.4 !important; color:var(--c-navy); margin-top:0; }
.lbp-hero h1{ font-family:var(--serif) !important; font-size:clamp(34px, 4.4vw, 64px) !important; font-weight:400 !important; letter-spacing:0 !important; text-transform:none; color:#fff; }

/* 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; }

/* PHOEBE ATELIER (10/10/2026): logo header = PHOEBE + chu ATELIER nho ben duoi */
.hd-logo--at{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.hd-logo--at .sub{ padding-left:.36em; color:var(--c-gold-ink); }
@media (max-width:900px){ .hd-logo--at{ min-height:44px; } .hd-logo--at .sub{ margin-top:3px; font-size:10.5px; } }

/* Size Custom (10/10/2026): tom tat so do duoi dong hang (gio, thanh toan, trang thai don, gio mini) */
.cus-lines{ display:flex; flex-direction:column; gap:3px; margin-top:6px; font-family:var(--sans); font-size:12.5px; font-weight:400; letter-spacing:0; text-transform:none; line-height:1.45; color:var(--c-ink); overflow-wrap:anywhere; text-align:left; }
.cus-line{ display:block; }
.cus-line--note{ color:var(--c-muted); white-space:pre-wrap; }

/* 10/10/2026 (Phuc): anh chua tai xong = skeleton (khoi xam nhat chay sang), khong hien chu ten san pham */
.ph-fallback{ font-size:0 !important; color:transparent !important; padding:0 !important;
  background:linear-gradient(100deg, #EFECE6 30%, #F7F5F1 50%, #EFECE6 70%) !important; background-size:220% 100% !important;
  animation:ph-skel 1.4s ease-in-out infinite; }
@keyframes ph-skel{ 0%{ background-position:120% 0; } 100%{ background-position:-120% 0; } }
@media (prefers-reduced-motion: reduce){ .ph-fallback{ animation:none; } }
.sc .ph-fallback, .sc-grid .pcard .ph-fallback{ background:linear-gradient(100deg, #431816 30%, #4E1E1B 50%, #431816 70%) !important; background-size:220% 100% !important; }

/* 10/10/2026 (Phuc): noi dung accordion dai (mo ta) mo vua phai va cuon duoc ben trong, khong bi cat */
.acc.open .acc__c{ max-height:min(420px, 55vh); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.acc.open .acc__c .inner{ padding-right:6px; }
/* 10/10/2026: het hang */
.pcard .kd--so{ color:#8A857D; letter-spacing:.12em; text-transform:uppercase; }
.pdp-add--so, .pdp-add--so:hover{ background:#E9E6E0 !important; color:#8A857D !important; cursor:not-allowed; }