/* Header gon + menu ben kieu Dior (10/10/2026). Header: nut menu trai, logo giua, cong cu phai.
   Menu: o noi cach mep 16px (dien thoai 10px, gan toan trang), bo goc, nen trang sau mo. */
#site-header .hd-nav{ display:none !important; }
#site-header .hd-main{ grid-template-columns:1fr auto 1fr; }
#site-header .hd-burger{ display:inline-flex; align-items:center; justify-content:center; justify-self:start; gap:10px;
  min-width:44px; min-height:44px; padding:0; border:0; background:none; color:var(--ink); cursor:pointer; }

.sm-scrim{ position:fixed; inset:0; z-index:94; background:rgba(20,22,26,.18); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s; }
.sm-scrim.show{ opacity:1; visibility:visible; }

.sm{ position:fixed; z-index:95; top:16px; bottom:16px; left:16px; width:430px; max-width:calc(100vw - 32px);
  display:flex; flex-direction:column; background:rgba(244,243,241,.97); border-radius:6px; overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.12); font-family:var(--sans); color:#33383C;
  transform:translateX(calc(-100% - 24px)); transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.sm.show{ transform:none; }
.sm a{ color:inherit; text-decoration:none; }

.sm-top{ padding:22px 28px 0; }
.sm-close{ display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:0; border:0; background:none;
  font:inherit; font-size:16px; color:#33383C; cursor:pointer; }
.sm-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 28px 20px; }
.sm-body::before{ content:""; display:block; height:1px; background:#E1DFDB; margin:16px 0 18px; }

.sm-list{ list-style:none; margin:0; padding:0; }
.sm-item{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border:0; background:none;
  font:inherit; font-size:18.5px; line-height:1.3; color:#33383C; text-align:left; cursor:pointer; }
.sm-item svg{ flex:none; color:#5B5F63; }
.sm-item:hover span{ text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.sm-list--sub .sm-item{ font-size:17px; padding:11px 0; }

.sm-hr{ border:0; height:1px; background:#E1DFDB; margin:18px 0 16px; }
.sm-links{ display:flex; flex-direction:column; }
.sm-links a{ padding:11px 0; font-size:16px; color:#33383C; }
.sm-links a:hover{ text-decoration:underline; text-underline-offset:4px; }
.sm-links--gap{ margin-top:26px; }
.sm-region span{ color:#8A8D90; }

.sm-back{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0; border:0; background:none; font:inherit; font-size:15px; color:#5B5F63; cursor:pointer; }
.sm-subt{ margin:10px 0 8px; font-family:var(--sans); font-weight:500; font-size:20px; color:#33383C; }

/* chuyen PHOEBE / SCARLETT AFFAIR (nhu "Fashion & Accessories / Fragrance & Beauty" cua Dior) */
.sm-switch{ display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:10px 12px 12px; padding:4px; border-radius:4px; background:#B4B6B8; }
.sm-switch a{ display:flex; align-items:center; justify-content:center; min-height:46px; border-radius:3px; font-size:15.5px; color:#fff; letter-spacing:.02em; }
.sm-switch a.is-on{ background:#fff; color:#33383C; }

@media (max-width: 760px){
  .sm{ top:10px; bottom:10px; left:10px; right:10px; width:auto; max-width:none; }
  .sm-top{ padding:16px 22px 0; }
  .sm-body{ padding:0 22px 16px; }
  .sm-item{ font-size:18px; }
}
@media (prefers-reduced-motion: reduce){ .sm, .sm-scrim{ transition:none; } }

/* Muc con kieu Dior (10/10/2026): may tinh menu mo rong, ben phai 3 anh (1 lon + 2 nho) co chu duoi;
   dien thoai: hang 3 anh nho cuoi muc con. */
.sm{ transition:transform .45s cubic-bezier(.2,.7,.2,1), width .45s cubic-bezier(.2,.7,.2,1); }
.sm-top, .sm-body, .sm-switch{ width:auto; max-width:414px; }
.sm-switch{ max-width:406px; }
.sm-back{ gap:14px; font-size:17px; color:#33383C; }
.sm-hr--sub{ margin:10px 0 8px; }
.sm-list--sub .sm-item{ padding-left:28px; font-size:17px; }
.sm-hl{ margin:22px 0 0 28px; display:flex; flex-direction:column; }
.sm-hl__t{ margin:0 0 6px; font-size:14px; color:#8A8D90; }
.sm-hl a{ padding:9px 0; font-size:15px; color:#33383C; }
.sm-hl a:hover{ text-decoration:underline; text-underline-offset:4px; }

.sm-media--side{ display:none; }
.sm-media--inline{ display:none; }
.sm-tile{ position:relative; display:block; overflow:hidden; background:#E7E5E1; }
.sm-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s ease; }
.sm-tile:hover img{ transform:scale(1.03); }
.sm-tile span{ position:absolute; left:0; right:0; bottom:22px; text-align:center; color:#fff; font-size:15.5px;
  text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; text-shadow:0 1px 10px rgba(0,0,0,.35); padding:0 10px; }

@media (min-width: 901px){
  .sm.sm--wide{ width:min(1340px, calc(100vw - 32px)); max-width:none; }
  .sm.sm--wide .sm-media--side{ display:grid; position:absolute; top:8px; bottom:8px; left:430px; right:8px;
    grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:8px; animation:smFade .5s ease .15s both; }
  .sm-media--side .sm-tile--big{ grid-row:1 / span 2; }
}
@keyframes smFade{ from{ opacity:0; } to{ opacity:1; } }
@media (max-width: 900px){
  .sm-top, .sm-body, .sm-switch{ max-width:none; }
  .sm-media--inline:not(:empty){ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin:24px 0 6px; }
  .sm-media--inline .sm-tile{ aspect-ratio:3 / 4; }
  .sm-media--inline .sm-tile span{ bottom:10px; font-size:12px; text-underline-offset:3px; }
}