/* ================================================================
   BILUXURY — theme.css FINAL
   Header trong suốt ↔ trắng, Search Prada, Menu slide-right
   ================================================================ */

/* ── VARIABLES ── */
:root {
  --blx-h:       64px;
  --blx-h-mb:    52px;
  --blx-black:   #0f0f0f;
  --blx-white:   #ffffff;
  --blx-border:  rgba(255,255,255,.2);
  --blx-border-dark: rgba(0,0,0,.1);
  --blx-ease:    cubic-bezier(.4,0,.2,1);
  --blx-nav-w:   360px;
  --f-head: 'Cormorant Garamond', Georgia, serif;
  --f-body: 'Jost', 'Be Vietnam Pro', sans-serif;
}
body { font-family: var(--f-body); -webkit-font-smoothing: antialiased; }

/* ================================================================
   HEADER — Transparent ↔ White
   ================================================================ */
.blx-hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  height: var(--blx-h);
  transition: background .3s var(--blx-ease),
              box-shadow .3s var(--blx-ease),
              color .3s var(--blx-ease);
  /* Mặc định: trong suốt trên banner */
  background: transparent;
  color: var(--blx-white);
}

/* Khi scroll xuống hoặc không có banner: nền trắng */
.blx-hdr.is-solid,
.blx-hdr.is-scrolled {
  background: var(--blx-white);
  color: var(--blx-black);
  box-shadow: 0 1px 0 var(--blx-border-dark);
}

/* Khi menu / search mở: nền trắng */
.blx-hdr.nav-open,
.blx-hdr.search-open {
  background: var(--blx-white);
  color: var(--blx-black);
}

.blx-hdr-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  padding: 0 28px;
  max-width: 1600px;
  margin: 0 auto;
}

/* ── LEFT ── */
.blx-hdr-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ── BUTTONS ── */
.blx-hdr-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 4px 0;
  font-family: var(--f-body);
  transition: opacity .15s;
}
.blx-hdr-btn:hover { opacity: .55; }

.blx-btn-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.blx-hamburger {
  display: flex;
  flex-direction: column;
  gap: 4.5px;
  width: 18px;
  flex-shrink: 0;
}
.blx-hamburger span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: background .3s;
}

.blx-ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

/* ── LOGO ── */
.blx-logo {
  justify-self: center;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.blx-logo-img {
  max-height: 46px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: filter .3s;
}
/* Logo trên nền tối: invert để hiện trắng */
.blx-hdr:not(.is-solid):not(.is-scrolled):not(.nav-open):not(.search-open) .blx-logo-img {
  filter: brightness(0) invert(1);
}
.blx-logo-text {
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
}

/* ── RIGHT ── */
.blx-hdr-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 4px;
}
.blx-hdr-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: opacity .15s;
}
.blx-hdr-icon:hover { opacity: .55; }

.blx-cart-count {
  position: absolute;
  top: 5px; right: 5px;
  background: currentColor;
  color: var(--blx-white);
  font-size: 9px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  /* Invert khi header trong suốt */
}
.blx-hdr.is-solid .blx-cart-count,
.blx-hdr.is-scrolled .blx-cart-count {
  background: var(--blx-black);
  color: var(--blx-white);
}

/* Spacer dưới header (tránh content bị che) — chỉ khi header is-solid */
.blx-hdr-spacer {
  height: var(--blx-h);
  display: none;
}
body.header-solid .blx-hdr-spacer { display: block; }

/* ================================================================
   SEARCH OVERLAY — Prada style
   ================================================================ */
.blx-search-overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  background: var(--blx-white);
  padding: 0 40px;
  /* Ẩn mặc định */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .28s var(--blx-ease),
              visibility .28s var(--blx-ease),
              transform .28s var(--blx-ease);
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.blx-search-overlay.is-open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.blx-search-container {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--blx-h) 0 0;
  position: relative;
}

.blx-search-form {
  position: relative;
  border-bottom: 1.5px solid var(--blx-black);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 8px;
}

.blx-search-ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--blx-black);
  opacity: .5;
}

.blx-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: var(--f-body);
  color: var(--blx-black);
  background: transparent;
  padding: 6px 0;
  letter-spacing: .2px;
  caret-color: var(--blx-black);
}
.blx-search-input::placeholder {
  color: #bbb;
  font-weight: 300;
}

.blx-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  flex-shrink: 0;
  transition: color .15s;
}
.blx-search-clear:hover { color: var(--blx-black); }
.blx-search-input:not(:placeholder-shown) ~ .blx-search-clear { display: flex; }

.blx-search-close-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blx-black);
  padding: 16px 0 20px;
  opacity: .5;
  transition: opacity .15s;
}
.blx-search-close-btn:hover { opacity: 1; }

/* Ajax results */
.blx-search-results {
  max-height: 60vh;
  overflow-y: auto;
  border-top: 1px solid #f0f0f0;
}

/* Backdrop */
.blx-search-backdrop {
  position: fixed;
  inset: 0;
  z-index: 850;
  background: rgba(0,0,0,.3);
  display: none;
  cursor: pointer;
}
.blx-search-backdrop.is-active { display: block; }

/* ================================================================
   SITENAV — Slide-in từ trái, submenu slide sang PHẢI (Prada style)
   ================================================================ */
.blx-nav {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--blx-nav-w);
  max-width: 92vw;
  background: var(--blx-white);
  z-index: 1000;
  overflow: hidden; /* panels bên trong scroll riêng */
  transform: translateX(-100%);
  transition: transform .38s var(--blx-ease);
  box-shadow: 4px 0 32px rgba(0,0,0,.1);
}
.blx-nav.is-open {
  transform: translateX(0);
}

.blx-nav-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ── NAV HEADER ── */
.blx-nav-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 24px;
  height: var(--blx-h);
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.blx-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--blx-black);
  transition: opacity .15s;
}
.blx-nav-close:hover { opacity: .4; }

/* ── PANELS ── */
.blx-nav-panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: var(--blx-h);
  background: var(--blx-white);
  /* Mặc định: nằm ngoài bên phải */
  transform: translateX(100%);
  transition: transform .32s var(--blx-ease), visibility .32s;
  visibility: hidden;
}
/* Panel đang active: ở giữa */
.blx-nav-panel.blx-panel-active {
  transform: translateX(0);
  visibility: visible;
}
/* Panel bị đẩy sang trái (panel cha khi mở sub) */
.blx-nav-panel.blx-panel-left {
  transform: translateX(-30%);
  visibility: visible;
  pointer-events: none;
}
/* Panel đang thoát ra phải (khi back) */
.blx-nav-panel.blx-panel-right {
  transform: translateX(100%);
  visibility: hidden;
}
/* Root panel: mặc định ở vị trí 0 nếu chưa có class nào */
#blxNavRoot:not(.blx-panel-left):not(.blx-panel-right) {
  transform: translateX(0);
}

/* ── NAV ITEMS ── */
.blx-nav-list {
  list-style: none;
  margin: 0;
  padding: 8px 0 24px;
}
.blx-nav-item {
  border-bottom: 1px solid #f5f5f5;
}
.blx-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--blx-black);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--f-body);
  transition: background .15s;
  text-align: left;
}
.blx-nav-link:hover { background: #fafafa; }
.blx-nav-item.is-active > .blx-nav-link { opacity: 1; }
.blx-nav-link--all {
  font-weight: 400;
  letter-spacing: .5px;
  color: #666;
  text-transform: none;
  font-size: 13px;
}

.blx-nav-arrow {
  flex-shrink: 0;
  transition: transform .2s;
}

/* ── BACK BUTTON ── */
.blx-nav-back {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  background: none;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #888;
  font-family: var(--f-body);
  transition: color .15s;
}
.blx-nav-back:hover { color: var(--blx-black); }

/* ── PANEL TITLE ── */
.blx-nav-panel-title {
  padding: 16px 24px 8px;
  font-size: 16px;
  font-family: var(--f-head);
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blx-black);
  margin: 0;
  border-bottom: 1px solid #f0f0f0;
}

/* ── FOOTER ── */
.blx-nav-footer {
  padding: 20px 24px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666;
}
.blx-nav-footer a { color: var(--blx-black); text-decoration: none; }

/* ── OVERLAY ── */
.blx-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,.4);
  display: none;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.blx-nav-overlay.is-active { display: block; }

/* ================================================================
   ẨN CÁC PHẦN CŨ CỦA BILUXURY — không conflict
   ================================================================ */
/* Header cũ */
.mainHeader.mainHeader_temp01,
.mainHeader--height,
.header-search-mobile,
.searchform-mobile,
.header-menu-desktop,
.header-prada-menu-inline {
  display: none !important;
}

/* Ẩn topbar gốc (dùng topbar mới trong as-header) */
.topbar-wrapper { display: none !important; }

/* Sidebar Biluxury cũ */
.sidebar-main { display: none !important; }
.sitenav-mobile, #site-nav-mobile { display: none !important; }

/* ================================================================
   PRODUCT GRID — không gap (Prada style)
   ================================================================ */
.prada-product-grid { gap:0!important; margin-left:0!important; margin-right:0!important; }
.prada-product-grid>[class*="col-"] { padding-left:1px!important; padding-right:1px!important; padding-bottom:2px!important; }
.prada-product-grid .product-loop-item { border:none!important; box-shadow:none!important; }
.prada-product-grid .product-loop-item .product-image img { transition:transform .5s ease; }
.prada-product-grid .product-loop-item:hover .product-image img { transform:scale(1.03); }
.prada-collection-section .sectionHeading { padding:40px 0 20px; text-align:center; }
.prada-collection-section .sectionHeading h3 { font-size:1rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase; }

/* ================================================================
   SLIDER + BANNER SPLIT + CATEGORY + VIDEO BANNER
   ================================================================ */
.prada-slider-wrap { position:relative; overflow:hidden; background:#111; }
.prada-slider      { position:relative; width:100%; }
.prada-slide       { display:none; position:relative; }
.prada-slide--active { display:block; }
.prada-slide-media img { width:100%; display:block; object-fit:cover; max-height:100vh; }
.prada-slide-media--video { position:relative; background:#000; overflow:hidden; }
.prada-video { width:100%; height:100vh; object-fit:cover; display:block; }
@media(max-width:767px){
  .prada-slide-media img { max-height:70vw; min-height:260px; }
  .prada-video { height:70vw; min-height:260px; }
}
.prada-slide-caption {
  position:absolute; bottom:60px; left:50%; transform:translateX(-50%);
  text-align:center; color:#fff; z-index:5; width:90%; max-width:560px;
}
.prada-slide-sub { font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; opacity:.8; }
.prada-slide-title { font-size:clamp(1.8rem,5vw,3.5rem); font-weight:400; margin-bottom:12px; line-height:1.1; color:#fff; font-family:var(--f-head); }
.prada-slide-desc { font-size:.88rem; margin-bottom:20px; opacity:.85; }
.prada-slide-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.prada-btn-cta {
  display:inline-block; padding:4px 0; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; border-bottom:1px solid rgba(255,255,255,.6); transition:border-color .2s;
}
.prada-btn-cta:hover { border-color:#fff; }
.prada-btn-cta--outline { border:1px solid rgba(255,255,255,.7); padding:10px 28px; }
.prada-slider-ui {
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; z-index:10;
}
.prada-dots { display:flex; gap:7px; }
.prada-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.4); border:none; cursor:pointer; padding:0; transition:all .3s;
}
.prada-dot--active { width:20px; border-radius:3px; background:#fff; }
.prada-slider-prev,.prada-slider-next {
  width:36px; height:36px; border:none; border-radius:50%;
  background:rgba(255,255,255,.18); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); transition:background .2s;
}
.prada-slider-prev:hover,.prada-slider-next:hover { background:rgba(255,255,255,.4); }
.prada-video-toggle {
  position:absolute; bottom:20px; right:20px; z-index:10;
  background:none; border:none; color:rgba(255,255,255,.7);
  font-size:11px; cursor:pointer; display:flex; align-items:center; gap:3px; padding:4px;
}
.prada-video-toggle:hover { color:#fff; }

/* ================================================================
   PRADA SPLIT BANNER — Editorial style (hình ref 3)
   Cột trái: nền xám nhạt, ảnh nhỏ căn giữa + caption dưới ảnh
   Cột phải: video/ảnh full-height (cao hơn, chiếm nhiều hơn)
   ================================================================ */
.prada-split-section { width:100%; overflow:hidden; background:#f5f5f3; }

/* Grid: cột trái 45%, cột phải 55% — tạo asymmetry như Prada */
.prada-split-wrap {
  display: grid;
  grid-template-columns: 45% 55%;
  min-height: 680px;
  align-items: stretch;
}
@media(max-width:767px){
  .prada-split-wrap { grid-template-columns:1fr; min-height:auto; }
}

/* ── Cột trái: nền xám, ảnh nhỏ căn giữa ── */
.prada-split-col { position:relative; overflow:hidden; }

.prada-split-col--img {
  background: #f0ede8;           /* nền xám kem như Prada */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 48px;
}

/* Container ảnh + caption căn giữa */
.prada-split-editorial-inner {
  max-width: 340px;
  width: 100%;
  text-align: center;
}

/* Ảnh nhỏ — không full-height, có khoảng trắng xung quanh */
.prada-split-imglink {
  display: block;
  overflow: hidden;
  margin-bottom: 24px;
}
.prada-split-imglink img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;             /* tỉ lệ dọc nhỏ như Prada */
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.prada-split-col--img:hover .prada-split-imglink img { transform:scale(1.02); }

/* Caption nằm DƯỚI ảnh, không overlay — giống Prada */
.prada-split-caption {
  position: static;              /* KHÔNG absolute nữa */
  background: none;
  padding: 0;
  color: #0f0f0f;
  text-align: center;
}
.prada-split-title {
  font-size: clamp(.95rem, 1.6vw, 1.2rem);
  font-weight: 500;
  margin-bottom: 6px;
  color: #0f0f0f;
  font-family: var(--f-head);
  letter-spacing: .3px;
}
.prada-split-desc {
  font-size: .8rem;
  margin-bottom: 14px;
  opacity: .65;
  color: #0f0f0f;
}
.prada-btn-underline {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0f0f0f;
  border-bottom: 1.5px solid #0f0f0f;
  padding-bottom: 2px;
  transition: opacity .2s;
  text-decoration: none;
}
.prada-btn-underline:hover { opacity: .45; color:#0f0f0f; }

/* ── Cột phải: video/ảnh full-height ── */
.prada-split-col--video {
  background: #111;
  position: relative;
  overflow: hidden;
}
.prada-split-video {
  width: 100%;
  height: 100%;
  min-height: 680px;
  object-fit: cover;
  display: block;
}
@media(max-width:767px){
  .prada-split-video { min-height: 320px; }
  .prada-split-col--img { padding: 40px 24px; }
  .prada-split-editorial-inner { max-width: 280px; }
}

/* ── Banner 2: đảo cột (video trái, ảnh phải) ── */
@media(min-width:768px){
  .prada-split-section--reversed .prada-split-wrap {
    grid-template-columns: 55% 45%;  /* video chiếm nhiều hơn bên trái */
  }
  .prada-split-section--reversed .prada-split-col--video { order:1; }
  .prada-split-section--reversed .prada-split-col--img   { order:2; }
}

.prada-video-toggle--corner { position:absolute; bottom:14px; right:14px; }

/* Category grid */
.prada-category-section { padding:0; overflow:hidden; }
.prada-category-section .sectionHeading { padding:40px 0 24px; text-align:center; }
.prada-category-section .sectionHeading h3 { font-size:1rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase; }
.prada-category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; width:100%; }
@media(max-width:767px){ .prada-category-grid { grid-template-columns:repeat(2,1fr); } }
.prada-category-item { display:block; position:relative; overflow:hidden; background:#f5f5f5; }
.prada-category-img { aspect-ratio:3/4; overflow:hidden; }
.prada-category-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.prada-category-item:hover .prada-category-img img { transform:scale(1.04); }
.prada-category-name { text-align:center; padding:14px 8px 20px; font-size:.76rem; letter-spacing:.07em; text-transform:uppercase; color:var(--shop-color-text,#111); }

/* Video banner */
.prada-videobanner-section { position:relative; overflow:hidden; }
.prada-videobanner-wrap { position:relative; width:100%; }
.prada-videobanner-video { width:100%; height:90vh; object-fit:cover; display:block; }
@media(max-width:767px){ .prada-videobanner-video { height:70vw; min-height:280px; } }
.prada-videobanner-content {
  position:absolute; bottom:60px; left:50%; transform:translateX(-50%);
  text-align:center; color:#fff; z-index:5; width:90%; max-width:500px;
}
.prada-videobanner-title { font-size:clamp(1.5rem,3.5vw,2.8rem); font-weight:400; margin-bottom:10px; color:#fff; font-family:var(--f-head); }
.prada-videobanner-desc { font-size:.88rem; margin-bottom:20px; opacity:.85; }
.prada-videobanner-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.prada-videobanner-toggle { position:absolute; bottom:20px; right:24px; }

/* ================================================================
   CONTENT OFFSET — tránh bị che bởi header fixed
   ================================================================ */
/* Khi header IS solid (không có banner), add padding-top vào content */
body.page-no-banner main,
body.page-no-banner .wrapperMain_content { padding-top: var(--blx-h); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 991px) {
  :root { --blx-h: var(--blx-h-mb); }
  .blx-hdr-inner { padding: 0 16px; }
  .blx-btn-label { display: none; }
  .blx-logo-img { max-height: 36px; }
  .blx-search-overlay { padding: 0 16px; }
  :root { --blx-nav-w: 300px; }
}
@media (max-width: 480px) {
  .blx-hdr-left { gap: 12px; }
}

/* ── ẨN TOPBAR HOÀN TOÀN ── */
.topbar,
.topbar-wrapper,
.mainTopbar,
.topbar-bottom,
.topbar-banner,
.topbar-slideText,
[class*="topbar"] {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ================================================================
   STYLE 5 — PRADA PRODUCT PAGE
   Gallery scroll dọc trái · Info sticky phải · Dots · Accordion
   ================================================================ */

.prd5 {
  --prd5-gap: 1px;
  --prd5-info-w: 42%;
  --prd5-gallery-w: 58%;
}

.prd5-wrap {
  display: grid;
  grid-template-columns: var(--prd5-gallery-w) var(--prd5-info-w);
  min-height: 100vh;
  align-items: start;
}

/* ── GALLERY (trái) ── */
.prd5-gallery {
  position: relative;
  display: flex;
  flex-direction: row;
}

/* Dots bên trái trước, images sau */
.prd5-dots { order: 1; }
.prd5-images {
  order: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--prd5-gap);
}

.prd5-img-item {
  width: 100%;
  background: #f4f4f4;
  overflow: hidden;
}

.prd5-img-link {
  display: block;
  overflow: hidden;
}

.prd5-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform .6s ease;
}

.prd5-img-item:hover .prd5-img {
  transform: scale(1.02);
}

/* Dots navigation — cột dọc bên trái ngoài gallery */
.prd5-dots {
  position: sticky;
  top: 50vh;
  transform: translateY(-50%);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 10px 0 14px;
  z-index: 10;
  width: 32px;
  flex-shrink: 0;
  /* height: 0 bị xóa — phải chiếm space để hiện dots */
}

.prd5-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0,0,0,.2);
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all .25s;
}

.prd5-dot--active {
  background: #0f0f0f;
  height: 20px;
  border-radius: 3px;
}

/* ── INFO (phải, sticky) ── */
.prd5-info {
  position: sticky;
  top: 64px; /* JS sẽ override */
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 48px 48px 60px 40px;
  border-left: 1px solid #f0f0f0;
  scrollbar-width: none;
}
.prd5-info::-webkit-scrollbar { display: none; }

/* ── HEAD ── */
.prd5-vendor {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #888;
  margin: 0 0 8px;
}

.prd5-title {
  font-family: var(--f-head, Georgia, serif);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 400;
  letter-spacing: .5px;
  color: #0f0f0f;
  margin: 0 0 16px;
  line-height: 1.25;
}

/* ── PRICE ── */
.prd5-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 24px;
}

.prd5-price-current {
  font-size: 1.1rem;
  font-weight: 400;
  color: #0f0f0f;
}

.prd5-price-compare {
  font-size: .9rem;
  color: #aaa;
  text-decoration: line-through;
}

/* ── OPTIONS ── */
.prd5-option {
  margin-bottom: 20px;
}

.prd5-option-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.prd5-option-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #0f0f0f;
}

.prd5-sizeguide {
  font-size: 11px;
  color: #666;
  text-decoration: underline;
  cursor: pointer;
}

/* Swatches màu */
.prd5-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prd5-swatch-color {
  position: relative;
  cursor: pointer;
}

.prd5-swatch-input { display: none; }

.prd5-swatch-dot {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  outline: 1px solid rgba(0,0,0,.15);
  transition: outline .15s;
}

.prd5-swatch-color.is-selected .prd5-swatch-dot,
.prd5-swatch-input:checked + .prd5-swatch-dot {
  outline: 2px solid #0f0f0f;
  outline-offset: 2px;
}

/* Swatch text (size chữ) */
.prd5-swatch {
  position: relative;
  cursor: pointer;
}

.prd5-swatch-label {
  display: block;
  padding: 7px 14px;
  border: 1px solid #ddd;
  font-size: 12px;
  font-weight: 500;
  color: #0f0f0f;
  transition: all .15s;
  white-space: nowrap;
}

.prd5-swatch.is-selected .prd5-swatch-label,
.prd5-swatch-input:checked + .prd5-swatch-label {
  border-color: #0f0f0f;
  background: #0f0f0f;
  color: #fff;
}

/* Size select */
.prd5-sizes {
  display: flex;
  align-items: center;
  gap: 12px;
}

.prd5-size-select {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  color: #0f0f0f;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  transition: border-color .15s;
}
.prd5-size-select:focus { border-color: #0f0f0f; }

.prd5-sizeguide-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 500;
  color: #666;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* Variant select ẩn */
.prd5-variant-select { display: none; }

/* ── BUTTONS ── */
.prd5-btn-add {
  display: block;
  width: 100%;
  padding: 16px;
  background: #0f0f0f;
  color: #fff;
  border: 1.5px solid #0f0f0f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s, color .2s;
  margin-bottom: 10px;
}
.prd5-btn-add:hover {
  background: #fff;
  color: #0f0f0f;
}
.prd5-btn-add--soldout {
  opacity: .5;
  cursor: not-allowed;
}

.prd5-btn-buy {
  display: block;
  width: 100%;
  padding: 16px;
  background: transparent;
  color: #0f0f0f;
  border: 1.5px solid #0f0f0f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s, color .2s;
  margin-bottom: 20px;
}
.prd5-btn-buy:hover {
  background: #0f0f0f;
  color: #fff;
}

/* ── DELIVERY ── */
.prd5-delivery {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.prd5-delivery-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #555;
}

.prd5-delivery-icon {
  flex-shrink: 0;
  opacity: .7;
}

/* ── ACCORDION ── */
.prd5-accordion {
  margin-top: 8px;
}

.prd5-accordion-item {
  border-top: 1px solid #f0f0f0;
}
.prd5-accordion-item:last-child {
  border-bottom: 1px solid #f0f0f0;
}

.prd5-accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #0f0f0f;
  font-family: inherit;
  text-align: left;
}

.prd5-acc-icon {
  flex-shrink: 0;
  transition: transform .25s;
}

.prd5-accordion-item.is-open .prd5-acc-icon {
  transform: rotate(180deg);
}

.prd5-accordion-body {
  display: none;
  padding-bottom: 16px;
}

.prd5-accordion-item.is-open .prd5-accordion-body {
  display: block !important;
}

.prd5-description {
  font-size: 13px;
  line-height: 1.7;
  color: #555;
}

/* ── SKU ── */
.prd5-sku {
  font-size: 11px;
  color: #aaa;
  margin: 16px 0 0;
  letter-spacing: .5px;
}

/* ── REVIEWS ── */
.prd5-reviews {
  margin-bottom: 16px;
}

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  .prd5-wrap {
    grid-template-columns: 1fr;
  }
  .prd5-info {
    position: static;
    max-height: none;
    padding: 28px 16px 40px;
    border-left: none;
    border-top: 1px solid #f0f0f0;
  }
  .prd5-dots {
    display: none;
  }
  :root { --prd5-info-w: 100%; --prd5-gallery-w: 100%; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .prd5-info { padding: 36px 28px 48px 24px; }
}

/* ── Footer địa chỉ đa chi nhánh ── */
.footer-branch {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-branch:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.footer-branch-name {
  font-size: 12px;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  opacity: 0.9;
}
.address-footer--multi ul {
  margin: 0;
  padding: 0;
}

/* ── Category 3 nhóm (4.1 / 4.2 / 4.3) ── */
.prada-cat-heading {
  padding: 36px 0 20px;
  text-align: left;
}
.prada-cat-heading h3 {
  font-family: var(--f-head, Georgia, serif);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0f0f0f;
  margin: 0;
}
.prada-category-section + .prada-category-section {
  margin-top: 48px;
}
/* ================================================================
   STYLE 5 — PRADA PRODUCT PAGE
   Gallery trái scroll dọc · Info phải sticky · Dots · Accordion
   ================================================================ */

/* ── Wrapper ── */
.prd5 { --prd5-gap: 2px; }
.prd5-wrap {
  display: grid;
  grid-template-columns: 52% 48%;
  min-height: 100vh;
  align-items: start;
}

/* ── GALLERY (trái) ── */
.prd5-gallery {
  position: relative;
  display: flex;
}
.prd5-images {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--prd5-gap);
}
.prd5-img-item {
  width: 100%;
  background: #f4f4f2;
  overflow: hidden;
  flex-shrink: 0;
}
.prd5-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Dots navigation — cột dọc ngoài cùng bên trái */
.prd5-dots {
  position: sticky;
  top: 50vh;
  transform: translateY(-50%);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 10px 0 14px;
  z-index: 10;
  width: 32px;
  flex-shrink: 0;
}
.prd5-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0,0,0,.2);
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all .25s;
}
.prd5-dot--active {
  background: #0f0f0f;
  height: 18px;
  border-radius: 2.5px;
}

/* ── INFO (phải, sticky) ── */
.prd5-info {
  position: sticky;
  top: 64px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 60px 48px 60px 40px;
  border-left: 1px solid #ebebeb;
  scrollbar-width: none;
}
.prd5-info::-webkit-scrollbar { display: none; }

/* Vendor label — "ONLINE EXCLUSIVE" style */
.prd5-vendor {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #888;
  margin: 0 0 10px;
}

/* Tên sản phẩm */
.prd5-title {
  font-family: var(--f-head, Georgia, serif);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 400;
  letter-spacing: .3px;
  color: #0f0f0f;
  margin: 0 0 14px;
  line-height: 1.3;
}

/* Giá */
.prd5-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 28px;
}
.prd5-price-current {
  font-size: 1.05rem;
  font-weight: 400;
  color: #0f0f0f;
}
.prd5-price-compare {
  font-size: .88rem;
  color: #aaa;
}
.prd5-price-badge {
  font-size: .78rem;
  color: #e53935;
  font-weight: 500;
}

/* Options wrap */
.prd5-options-wrap { margin-bottom: 4px; }

/* ── BUTTONS ── */
.prd5-buttons { margin-top: 8px; margin-bottom: 20px; }

.prd5-btn-add {
  display: block;
  width: 100%;
  padding: 17px 16px;
  background: #0f0f0f;
  color: #fff;
  border: 1.5px solid #0f0f0f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s, color .2s;
  margin-bottom: 10px;
}
.prd5-btn-add:hover {
  background: #fff;
  color: #0f0f0f;
}
.prd5-btn-soldout {
  opacity: .4;
  cursor: not-allowed;
}
.prd5-btn-buy {
  display: block;
  width: 100%;
  padding: 17px 16px;
  background: transparent;
  color: #0f0f0f;
  border: 1.5px solid #d0d0d0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .2s;
}
.prd5-btn-buy:hover { border-color: #0f0f0f; }

/* Delivery */
.prd5-delivery {
  padding: 14px 0;
  border-top: 1px solid #ebebeb;
  margin-bottom: 8px;
}
.prd5-delivery-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #555;
  margin-bottom: 8px;
}
.prd5-delivery-item:last-child { margin-bottom: 0; }
.prd5-delivery-icon { flex-shrink: 0; opacity: .7; }

/* ── ACCORDION Prada style ── */
.prd5-accordion { margin-top: 0; }
.prd5-accordion-item {
  border-top: 1px solid #ebebeb;
}
.prd5-accordion-item:last-child {
  border-bottom: 1px solid #ebebeb;
}
.prd5-accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  color: #0f0f0f;
  font-family: inherit;
  text-align: left;
  letter-spacing: .2px;
  transition: opacity .15s;
}
.prd5-accordion-btn:hover { opacity: .55; }
.prd5-acc-icon {
  flex-shrink: 0;
  transition: transform .25s;
}
.prd5-accordion-item.is-open .prd5-acc-icon {
  transform: rotate(180deg);
}
.prd5-accordion-body {
  padding-bottom: 20px;
}
.prd5-accordion-body[hidden] { display: none; }
.prd5-description {
  font-size: 13px;
  line-height: 1.75;
  color: #555;
}
.prd5-description img,
.prd5-description video {
  max-width: 100%;
  height: auto;
  margin: 12px 0;
}

/* SKU */
.prd5-sku {
  font-size: 11px;
  color: #bbb;
  margin: 14px 0 0;
  letter-spacing: .5px;
}

/* Reviews */
.prd5-reviews { margin-bottom: 16px; }

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  .prd5-wrap { grid-template-columns: 1fr; }
  .prd5-info {
    position: static;
    max-height: none;
    padding: 28px 16px 40px;
    border-left: none;
    border-top: 1px solid #ebebeb;
  }
  .prd5-dots { display: none; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .prd5-info { padding: 40px 28px 48px 24px; }
}


/* ── Video Banner MP4 cuối trang — khoảng cách so với Banner Bottom ── */
.prada-videobanner-section--spaced {
  margin-top: 80px;
}
@media (max-width: 767px) {
  .prada-videobanner-section--spaced {
    margin-top: 48px;
  }
}