.catalog-hero{
  display:grid;
  grid-template-columns:260px 1fr;
  max-width:1400px;   /* GIỚI HẠN */
  margin:60px auto;   /* CANH GIỮA */
  height:380px;       /* HERO NHỎ LẠI */
  gap:200px;           /* KHOẢNG GIỮA MENU & SLIDE */
}

/* LEFT */
.catalog-left{
  padding:40px 30px;
}

.cat-title{
  font-size:42px;
  color:#b89b74;
  margin-bottom:30px;
}

.cat-menu{
  list-style:none;
  padding:0;
}

.cat-menu li{
  margin-bottom:14px;
  color:#b89b74;
  cursor:pointer;
  transition:.3s;
}

.cat-menu li.active{
  color:#000;
  font-weight:600;
}

/* RIGHT HERO */
.catalog-right{
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-panel{
  width:100%;
  min-height:520px;
  background:linear-gradient(180deg,#ffffff 0%,#fafafa 100%);
  border-radius:16px;
  display:grid;
  grid-template-columns: 280px 1fr 120px;
  align-items:center;
  padding:60px 70px;
  gap:40px;
  box-shadow:0 25px 60px rgba(0,0,0,.08);
}

/* TEXT */
.product-info{
  color:#333;
}

.product-title{
  font-size:30px;
  font-weight:600;
  letter-spacing:1px;
  margin-bottom:6px;
  white-space:normal;   /* cho phép xuống dòng */
  line-height:1.2;
  max-width:420px;      /* giới hạn chiều ngang text */ 
}

.product-sub{
  color:#777;
  font-size:14px;
  margin-bottom:14px;
}

.product-code{
  font-size:12px;
  letter-spacing:2px;
  color:#aaa;
}

/* IMAGE */


.product-view img{
  position:absolute;
  inset:0;
  margin:auto;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  transition:transform .45s ease, opacity .45s ease;
}

/* trạng thái chính */
.img-current{
  transform:translateY(0);
  opacity:1;
  z-index:2;
}

.img-enter-up{
  transform:translateY(60%);
  opacity:0;
}

.img-enter-down{
  transform:translateY(-60%);
  opacity:0;
}

.img-exit-up{
  transform:translateY(-60%);
  opacity:0;
}

.img-exit-down{
  transform:translateY(60%);
  opacity:0;
}



/* THUMBS */
.product-thumbs{
  width:90px;
  height:460px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-right:18px;
  align-items:center;
  justify-content:flex-start;  /* ✅ FIX */
  padding-top:6px;             /* optional cho đẹp */
}


.product-thumbs img{
  width:64px;
  height:64px;
  object-fit:contain;
  background:#fff;
  border-radius:8px;
  padding:6px;
  cursor:pointer;
  opacity:.5;
  transition:.25s;
}

.product-thumbs img:hover{
  opacity:1;
  transform:scale(1.05);
}

.product-thumbs img.active{
  opacity:1;
  border:none;
  transform:scale(1.08);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.img-enter-up{
  transform:translateY(80%);
  opacity:0;
  
}

.img-enter-down{
  transform:translateY(-80%);
  opacity:0;
}
.product-view{
  position:relative;   /* QUAN TRỌNG */
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;     /* GIỮ ẢNH TRONG KHUNG */
  height:280px;        /* KHUNG ẢNH CỐ ĐỊNH */
  min-height:420px;
}


.thumb-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow-y:auto;
  height:100%;
  padding-right:4px;
}
/* scrollbar */
.product-thumbs::-webkit-scrollbar{
  width:4px;
}
.product-thumbs::-webkit-scrollbar-thumb{
   background:#d0d0d0;
  border-radius:10px;
}
.product-thumbs::-webkit-scrollbar-track{
  background:transparent;
}
.product-thumbs img{
  width:64px;
  height:64px;
  object-fit:contain;
  background:#fff;
  border-radius:10px;
  padding:6px;
  cursor:pointer;
  opacity:.45;
  transition:.25s;
}

.product-thumbs img:hover{
  opacity:1;
  transform:scale(1.05);
}


.product-panel{
  display:none;
}

.product-panel.active{
  display:grid;
}




/* ===== HOVER DETAIL PROFESSIONAL ===== */

.product-view{
  position:relative;
  overflow:visible;
}

/* PANEL */
.product-detail{
  position:absolute;
  top:50%;
  left:100%;                 /* nằm sát phải ảnh */
  margin-left:40px;          /* khoảng cách khỏi ảnh */
  transform:translateY(-50%);
  z-index: 10;
  width:420px;
  padding:32px 34px;
  
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  
  border-radius:20px;
  box-shadow:
    0 30px 60px rgba(0,0,0,.18),
    0 8px 20px rgba(0,0,0,.08);
  
  opacity:0;
  pointer-events:none;
  transition:all .45s cubic-bezier(.22,.61,.36,1);
}
.product-detail::before{
  content:"";
  position:absolute;
  left:-40px;   /* che luôn cột thumb */
  top:0;
  bottom:0;
  width:40px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  border-radius:20px 0 0 20px;
  z-index:-1;
}
/* SHOW */
.product-view:hover .product-detail{
  opacity:1;
  transform:translate(20px,-50%);
}

/* TITLE */
.detail-title{
  font-size:22px;
  font-weight:600;
  letter-spacing:.3px;
  color:#222;
  margin-bottom:14px;
}

/* BODY TEXT */
.detail-text{
  font-size:14px;
  line-height:1.8;
  color:#555;
  margin-bottom:18px;
}

/* SECTION */
.detail-section{
  margin-top:14px;
}

.detail-section-title{
  font-size:13px;
  letter-spacing:.15em;
  color:#888;
  margin-bottom:10px;
}

/* LIST */
.detail-list{
  padding-left:18px;
  margin:0;
}

.detail-list li{
  font-size:14px;
  line-height:1.7;
  color:#444;
  margin-bottom:6px;
}

/* ===== VENEER SWATCH ONLY ===== */

/* khung ảnh chính veneer */
.product-panel[data-cat="veneer"] .product-view img{
  width:420px;
  height:420px;
}

/* ảnh chính veneer luôn vuông */
.product-panel[data-cat="veneer"] .product-view img{
  width:360px;
  height:360px;
  object-fit:cover;        /* fill vuông */
  object-position:center;
  border-radius:6px;
}

/* thumb veneer vuông đều */
.product-panel[data-cat="veneer"] .product-view img{
  position:relative !important;   /* bỏ absolute */
  width:360px;
  height:360px;
  object-fit:cover;
  object-position:center;
  border-radius:6px;
}
/* ===== FRAMED CABINET IMAGE CENTER ===== */
.product-panel[data-cat="framed"] .product-view img{
  object-position:center center;
}
.product-panel[data-cat="frameless"] .product-view img{
  object-fit:contain;
  object-position:center;
  max-height:420px;
}
/* inset cabinet always centered */
.product-panel[data-cat="inset"] .product-view img{
  object-fit:contain;
  object-position:center;
}