/* BKVN Projects Slider - ACF logo per project */
.bkvn-prj{
  --red:#d61f26;
  --text:#0f172a;
  --radius:18px;
  --gap:26px;
  --peek:160px;
  --line:#e5e7eb;
  --shadow:0 20px 40px rgba(15,23,42,.08);

  font-family:'Be Vietnam Pro', sans-serif;
  color:var(--text);
  background:transparent;
}

.bkvn-prj *{ box-sizing:border-box; }
.bkvn-prj a{ text-decoration:none; }

.bkvn-prj .bkvn-prj-wrap{
  width:100%;
  max-width:100% !important;
  margin:0 auto;
  padding:56px 20px;
}

.bkvn-prj .bkvn-prj-head{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:22px;
}

.bkvn-prj .bkvn-prj-title{
  margin:0 !important;
  padding:0 !important;
  flex:1 1 auto;
  width:auto !important;
  max-width:100%;
  font-size:28px;
  font-weight:800;
  letter-spacing:-.02em;
  text-transform:uppercase;
  line-height:1.15;
}

.bkvn-prj .bkvn-prj-nav{
  flex:0 0 auto;
  display:flex;
  gap:12px;
  margin-left:auto;
}

.bkvn-prj .bkvn-prj-btn{
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition:transform .15s ease, border-color .15s ease, opacity .15s ease;
  display:flex;align-items:center;justify-content:center;
}
.bkvn-prj .bkvn-prj-btn:hover{ transform:translateY(-1px); border-color:#cbd5e1; }
.bkvn-prj .bkvn-prj-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

.bkvn-prj .bkvn-prj-mask{ width:100%; overflow:hidden; position:relative; }
.bkvn-prj .bkvn-prj-viewport{
  overflow:visible;
  width:calc(100% + var(--peek));
  margin-right:calc(var(--peek) * -1);
  padding-right:var(--peek);
  border-radius:20px;
}
.bkvn-prj .bkvn-prj-track{
  display:flex;
  gap:var(--gap);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
  padding:6px;
  will-change:transform;
}

.bkvn-prj .bkvn-prj-card{
  flex:0 0 auto;
  width:360px;
  flex-shrink:0 !important;
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
}

.bkvn-prj .bkvn-prj-hero{ position:relative; height:420px; background:#f1f5f9; }
.bkvn-prj .bkvn-prj-hero img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.01); }

.bkvn-prj .bkvn-prj-tint{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.bkvn-prj .bkvn-prj-card.is-white .bkvn-prj-tint{
  background:linear-gradient(to bottom, rgba(255,255,255,.92) 0%, rgba(255,255,255,.50) 20%, rgba(255,255,255,0) 48%);
}
.bkvn-prj .bkvn-prj-card.is-red .bkvn-prj-tint{
  background:linear-gradient(to bottom, rgba(214,31,38,.92) 0%, rgba(214,31,38,.55) 20%, rgba(214,31,38,0) 55%);
}

.bkvn-prj .bkvn-prj-overlay{
  position:absolute; top:24px; left:16px; right:16px;
  z-index:3; display:flex; gap:12px; align-items:flex-start;
}
.bkvn-prj .bkvn-prj-brand{
  font-size:41px; font-weight:600; letter-spacing:.02em; line-height:1; white-space:nowrap;
}
.bkvn-prj .bkvn-prj-brand .bk{ color:var(--red); }
.bkvn-prj .bkvn-prj-brand .vn{ color:#111827; }

.bkvn-prj .bkvn-prj-meta{ margin-top:4px; min-width:0; flex:1 1 auto; }
.bkvn-prj .bkvn-prj-name{
  font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.02em;
  white-space:normal; overflow:hidden;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  line-height:1.2; max-height:calc(1.2em * 2);
}

.bkvn-prj .bkvn-prj-card.is-red .bkvn-prj-overlay{ color:#fff; }
.bkvn-prj .bkvn-prj-card.is-red .bkvn-prj-brand .bk,
.bkvn-prj .bkvn-prj-card.is-red .bkvn-prj-brand .vn{ color:#fff; }

.bkvn-prj .bkvn-prj-bottom{
  background:#fff;
  border-top:1px solid var(--line);
  padding:25px 16px;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.bkvn-prj .bkvn-prj-partner{ height:50px; width:auto; object-fit:contain; display:block; opacity:.95; }
.bkvn-prj .bkvn-prj-cta{
  font-weight:300;
  color:var(--text);
  display:flex; align-items:center; gap:10px; white-space:nowrap;
}
.bkvn-prj .bkvn-prj-cta:hover{ text-decoration:underline; }

.bkvn-prj .bkvn-prj-card.view-all{
  background:var(--red);
  color:#fff;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.bkvn-prj .bkvn-prj-viewall{ padding:24px 18px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.bkvn-prj .bkvn-prj-viewall i{ font-size:28px; opacity:.95; }
.bkvn-prj .bkvn-prj-viewall span{ font-size:26px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; line-height:1.2; }
.bkvn-prj .bkvn-prj-viewall a{ margin-top:5px; color:#fff; font-weight:700; opacity:.9; }
.bkvn-prj .bkvn-prj-viewall a:hover{ text-decoration:underline; opacity:1; }

@media (max-width:1024px){
  .bkvn-prj{ --gap:18px; }
  .bkvn-prj .bkvn-prj-hero{ height:380px; }
  .bkvn-prj .bkvn-prj-title{ font-size:24px; }
}
@media (max-width:640px){
  .bkvn-prj{ --gap:14px; }
  .bkvn-prj .bkvn-prj-wrap{ padding:36px 14px; }
  .bkvn-prj .bkvn-prj-hero{ height:340px; }
  .bkvn-prj .bkvn-prj-title{ font-size:20px; }
  .bkvn-prj .bkvn-prj-head{ gap:10px; }
  .bkvn-prj .bkvn-prj-btn{ width:40px; height:40px; border-radius:10px; }
}