/* Trang Shop (View all) + trang Lookbook kieu Dior (10/10/2026). Khong box, chu nho, anh lon. */
.cl-head{ padding:26px var(--gut) 0; text-align:center; }
.cl-title{ margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(30px, 3vw, 44px); color:var(--c-navy); }
.cl-tabs{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px 26px; margin:16px 0 0; }
.cl-tabs a{ padding:6px 0; font-size:14px; color:#6E6A65; text-decoration:none; border-bottom:1px solid transparent; }
.cl-tabs a:hover{ color:var(--c-navy); }
.cl-tabs a.is-on{ color:var(--c-navy); border-bottom-color:var(--c-navy); }

.cl-bar{ position:sticky; top:var(--header-h, 70px); z-index:20; display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:22px; padding:12px var(--gut); background:rgba(251,250,247,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.cl-filt{ display:inline-flex; align-items:center; gap:10px; min-height:40px; padding:0 2px; border:0; background:none; font:inherit; font-size:14.5px; color:var(--c-navy); cursor:pointer; }
.cl-count{ font-size:13.5px; color:#8A8D90; }
.cl-view{ display:flex; gap:4px; }
.cl-view button{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; background:none; color:#B4B6B8; cursor:pointer; }
.cl-view button.is-on{ color:var(--c-navy); }
.cl-bar__r{ display:flex; align-items:center; gap:16px; }

.cl-grid{ display:grid; gap:34px 12px; padding:6px var(--gut) 80px; }
.cl-grid--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.cl-grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:40px 14px; }
.cl-grid .pcard .ph{ aspect-ratio:3 / 4; background:#F1EFEC; }
.cl-grid .pcard .meta{ padding:12px 2px 0; text-align:center; }
.cl-grid .pcard .nm{ font-family:var(--sans); font-size:14px; font-weight:400; color:#222; line-height:1.35; }
.cl-grid .pcard .pr{ font-family:var(--sans); font-size:13.5px; font-weight:400; color:#555; margin-top:4px; }
.cl-grid .pcard .kd{ font-size:10.5px; margin-bottom:4px; }
.cl-ed{ position:relative; grid-column:span 2; grid-row:span 2; display:block; overflow:hidden; min-height:420px; background:#E7E5E1; }
.cl-ed img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease; }
.cl-ed:hover img{ transform:scale(1.02); }
.cl-ed span{ position:absolute; left:0; right:0; bottom:28px; text-align:center; color:#fff; font-family:var(--serif); font-size:24px;
  text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; text-shadow:0 1px 12px rgba(0,0,0,.35); }
.cl-empty{ grid-column:1 / -1; padding:60px 0; text-align:center; color:#8A8D90; }

/* o loc: noi ben phai, cung kieu menu ben */
.cl-scrim{ position:fixed; inset:0; z-index:94; background:rgba(20,22,26,.18); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.cl-scrim.show{ opacity:1; visibility:visible; }
.cl-p{ position:fixed; z-index:95; top:16px; bottom:16px; right:16px; width:420px; max-width:calc(100vw - 32px); display:flex; flex-direction:column;
  background:rgba(244,243,241,.98); border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.12); transform:translateX(calc(100% + 24px)); transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.cl-p.show{ transform:none; }
.cl-p__top{ padding:20px 26px 6px; border-bottom:1px solid #E1DFDB; }
.cl-p__x{ 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; }
.cl-p__body{ flex:1; overflow-y:auto; padding:6px 26px 18px; }
.cl-f{ padding:18px 0; border-bottom:1px solid #E6E4E0; }
.cl-f h3{ margin:0 0 12px; font-family:var(--sans); font-weight:500; font-size:15px; color:#33383C; }
.cl-f__opts{ display:flex; flex-wrap:wrap; gap:8px; }
.cl-chip{ min-height:38px; padding:0 14px; border:1px solid #D9D7D3; border-radius:19px; background:#fff; font:inherit; font-size:13.5px; color:#33383C; cursor:pointer; }
.cl-chip:hover{ border-color:#33383C; }
.cl-chip.is-on{ background:#111; border-color:#111; color:#fff; }
.cl-p__foot{ display:grid; grid-template-columns:1fr 1.4fr; gap:10px; padding:14px 16px 16px; border-top:1px solid #E1DFDB; }
.cl-p__clear, .cl-p__go{ height:50px; border-radius:8px; font:inherit; font-size:15px; cursor:pointer; }
.cl-p__clear{ border:1px solid #D9D7D3; background:#fff; color:#33383C; }
.cl-p__go{ border:0; background:#111; color:#fff; }
.cl-p__go b{ font-weight:400; }

/* trang lookbook */
.lbp-hero{ position:relative; height:100vh; height:100svh; min-height:520px; overflow:hidden; background:#000; }
.lbp-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.lbp-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.35)); }
.lbp-hero h1{ position:absolute; z-index:2; left:0; right:0; bottom:9%; margin:0; text-align:center; color:#fff; font-family:var(--serif); font-weight:400; font-size:clamp(34px, 4.4vw, 64px); }
.lbp-hero p{ position:absolute; z-index:2; left:0; right:0; bottom:calc(9% - 34px); margin:0; text-align:center; color:rgba(255,255,255,.85); font-size:13px; letter-spacing:.2em; text-transform:uppercase; }
.lbp{ padding:40px var(--gut) 90px; display:flex; flex-direction:column; gap:40px; }
.lbp-row{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:34px 12px; }
.lbp-row .pcard .ph{ aspect-ratio:3 / 4; background:#F1EFEC; }
.lbp-row .pcard .meta{ padding:12px 2px 0; text-align:center; }
.lbp-row .pcard .nm{ font-family:var(--sans); font-size:14px; font-weight:400; color:#222; }
.lbp-row .pcard .pr{ font-family:var(--sans); font-size:13.5px; font-weight:400; color:#555; }
.lbp-ed{ display:grid; gap:12px; }
.lbp-ed--1{ grid-template-columns:1fr; }
.lbp-ed--2{ grid-template-columns:1fr 1fr; }
.lbp-ed figure{ display:block; margin:0; background:#E7E5E1; overflow:hidden; }
.lbp-ed img{ display:block; width:100%; height:auto; transition:transform 1.2s ease; }
.lbp-ed--1 img{ max-height:92vh; object-fit:cover; }
.lbp-ed figure:hover img{ transform:scale(1.015); }

@media (max-width: 900px){
  .cl-grid--4{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 8px; }
  .cl-grid--2{ grid-template-columns:1fr; gap:30px; }
  .cl-ed{ min-height:300px; }
  .cl-ed span{ font-size:19px; bottom:18px; }
  .cl-tabs{ justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; gap:6px 20px; }
  .cl-tabs a{ white-space:nowrap; }
  .cl-head{ text-align:left; }
  .lbp-row{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 8px; }
  .lbp-ed--2{ grid-template-columns:1fr; }
  .lbp{ gap:28px; padding-top:24px; }
}
@media (max-width: 760px){
  .cl-p{ top:10px; bottom:10px; right:10px; left:10px; width:auto; max-width:none; }
}
/* 11/10/2026 (Phuc): bo tieu de tab tren trang danh muc (giu cho cong cu tim kiem, an voi mat) */
.cl-title{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }