/* ============ BREADCRUMB BAR ============ */
.pdp-crumb{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.pdp-crumb__in{display:flex;align-items:center;gap:8px;padding:14px var(--gutter);font-size:14px;color:var(--ink-soft);flex-wrap:wrap;}
.pdp-crumb__in .sep{color:rgba(0,0,0,.4);}
.pdp-crumb__in a:hover{color:var(--brand);}
.pdp-crumb__in .cur{color:var(--ink);font-weight:500;}

/* ============ SP HERO ============ */
.pdp-hero{background:var(--bg);padding:56px var(--gutter) 64px;display:flex;gap:48px;align-items:flex-start;}

/* Gallery */
.gallery{width:520px;flex:none;display:flex;flex-direction:column;gap:14px;}
.gallery__main{width:100%;height:430px;border-radius:10px;object-fit:cover;background:var(--bg-alt);}
.gallery__thumbs{display:flex;gap:12px;}
.gallery__thumb{
  width:92px;height:92px;flex:none;padding:0;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);transition:border-color .15s ease;
}
.gallery__thumb img{width:100%;height:100%;object-fit:cover;}
.gallery__thumb.is-active{border:2px solid var(--brand);}
.gallery__thumb:hover{border-color:var(--brand);}

/* Info */
.pdp-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
.pdp-eyebrow{font-size:12.5px;font-weight:500;letter-spacing:1px;color:var(--brand);text-transform:uppercase;}
.pdp-title{font-size:32px;font-weight:700;line-height:1.22;color:var(--ink);}
.pdp-bullets{display:flex;flex-direction:column;gap:9px;width:100%;}
.pdp-bullet{display:flex;gap:10px;align-items:flex-start;}
.pdp-bullet svg{width:18px;height:18px;flex:none;margin-top:2px;}
.pdp-bullet p{font-size:15px;line-height:1.58;color:var(--ink-soft);}

.pdp-spec{width:100%;display:flex;flex-direction:column;background:var(--bg-alt);border-radius:10px;overflow:hidden;}
.pdp-spec__row{display:flex;align-items:center;padding:12px 18px;border:1px solid var(--line);margin-top:-1px;}
.pdp-spec__row:first-child{margin-top:0;}
.pdp-spec__k{width:190px;flex:none;font-size:14px;font-weight:500;color:var(--muted);}
.pdp-spec__v{font-size:14.5px;font-weight:500;color:var(--ink);}

.pdp-actions{display:flex;gap:12px;align-items:center;padding-top:6px;}
.pdp-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:8px;font-size:15px;font-weight:700;}
.pdp-btn--primary{background:var(--brand);color:#fff;}
.pdp-btn--primary:hover{background:var(--brand-deep);}
.pdp-btn--phone{background:var(--bg);border:1.4px solid var(--brand);color:var(--brand);}
.pdp-btn--phone:hover{background:var(--brand-soft);}
.pdp-btn--phone svg{width:16px;height:16px;}

/* ============ SP CHI TIẾT — TAB + SIDEBAR ============ */
.pdp-body{background:var(--bg-alt);padding:16px var(--gutter) 80px;display:flex;gap:40px;align-items:flex-start;}
.pdp-main{width:900px;flex:none;}

.tabbar{display:flex;gap:4px;border-bottom:2px solid var(--line);margin-bottom:28px;}
.tab-btn{
  padding:14px 26px;font-size:15.5px;font-weight:700;color:var(--muted);
  border-bottom:3px solid transparent;margin-bottom:-2px;transition:color .15s ease;white-space:nowrap;
}
.tab-btn:hover{color:var(--ink);}
.tab-btn.is-active{color:var(--brand);border-bottom-color:var(--brand);}
.panel{display:none;flex-direction:column;gap:16px;align-items:flex-start;}
.panel.is-active{display:flex;}

/* Tab Mô tả */
.pdp-art p{font-size:15.5px;line-height:1.72;color:var(--ink-soft);}
.pdp-h3{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin-top:14px;}
.pdp-h3 h3{font-size:20px;font-weight:700;line-height:1.25;color:var(--ink);}
.pdp-h3::after{content:"";width:44px;height:3px;background:var(--brand);border-radius:2px;}
.pdp-art figure{width:100%;margin:0;padding:8px 0;display:flex;flex-direction:column;gap:8px;align-items:center;}
.pdp-art figure img{width:100%;height:420px;object-fit:cover;border-radius:12px;background:var(--bg);}
.pdp-art figcaption{width:100%;font-size:13px;font-style:italic;color:var(--muted);text-align:center;}

/* Tab Thông số */
.spectable{width:100%;border-collapse:collapse;border-radius:10px;overflow:hidden;}
.spectable caption{font-size:18px;font-weight:700;color:var(--ink);text-align:left;margin-bottom:16px;}
.spectable th{padding:13px 20px;background:var(--ink);font-size:14px;font-weight:700;color:#fff;text-align:left;}
.spectable td{padding:12px 20px;font-size:14.5px;color:var(--ink-soft);border-bottom:1px solid var(--line);}
.spectable tbody tr:nth-child(odd){background:var(--bg);}
.spectable tbody tr:nth-child(even){background:var(--bg-alt);}
.spectable td:first-child{width:260px;font-weight:700;color:var(--ink);}

/* Tab HDSD */
.hdsd__lead{font-size:15.5px;line-height:1.7;color:var(--ink-soft);}
.step{display:flex;gap:16px;align-items:flex-start;width:100%;}
.step__no{
  width:34px;height:34px;flex:none;border-radius:50%;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:var(--brand);
}
.step__title{font-size:16px;font-weight:700;color:var(--ink);}
.step__text{font-size:15px;line-height:1.6;color:var(--ink-soft);margin-top:3px;}
.hdsd__file{
  display:flex;gap:14px;align-items:center;width:100%;margin-top:12px;
  padding:18px 20px;background:var(--bg);border:1px solid var(--line);border-radius:10px;
}
.hdsd__file-ic{width:42px;height:42px;flex:none;border-radius:8px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;}
.hdsd__file-ic svg{width:22px;height:22px;}
.hdsd__file-meta{flex:1;min-width:0;}
.hdsd__file-name{font-size:15px;font-weight:700;color:var(--ink);}
.hdsd__file-size{font-size:13px;color:var(--muted);margin-top:2px;}
.hdsd__file-dl{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:var(--brand);border-radius:8px;font-size:14px;font-weight:700;color:#fff;white-space:nowrap;}
.hdsd__file-dl:hover{background:var(--brand-deep);}

/* Sidebar */
.pdp-side{width:300px;flex:none;display:flex;flex-direction:column;gap:20px;position:sticky;top:24px;}
.side-quote{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:24px 22px;background:var(--brand);border-radius:12px;color:#fff;}
.side-quote__title{font-size:17px;font-weight:700;}
.side-quote__text{font-size:13.5px;line-height:1.55;}
.side-quote__tel{font-size:24px;font-weight:700;margin-top:2px;}
.side-quote__tel:hover{text-decoration:underline;}
.side-comm{display:flex;flex-direction:column;gap:14px;padding:22px;background:var(--bg);border:1px solid var(--line);border-radius:12px;}
.side-comm__title{font-size:15px;font-weight:700;color:var(--ink);}
.side-comm__item{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-soft);}
.side-comm__item svg{width:18px;height:18px;flex:none;margin-top:1px;}

/* ============ SẢN PHẨM LIÊN QUAN ============ */
.rel{background:var(--bg);padding:72px var(--gutter) 80px;display:flex;flex-direction:column;gap:36px;align-items:flex-start;}
.rel__grid{display:flex;gap:24px;align-items:stretch;width:100%;}
.rcard{
  flex:1;min-width:0;display:flex;flex-direction:column;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.14);transition:transform .18s ease, box-shadow .18s ease;
}
.rcard:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(0,0,0,.18);}
.rcard__img{width:100%;aspect-ratio:800/500;object-fit:contain;padding:12px;background:var(--bg);flex:none;}
.rcard__name{padding:14px 16px 18px;font-size:15.5px;font-weight:700;line-height:1.3;color:var(--ink);text-align:center;}

/* === RESP-PAGE (auto) === */
@media (max-width:1024px){
  .pdp-hero{flex-direction:column;gap:32px;}
  .gallery{width:100%;}
  .gallery__main{height:auto;aspect-ratio:520/430;}
  .pdp-body{flex-direction:column;}
  .pdp-main{width:100%;}
  .pdp-side{width:100%;position:static;}
  .rel__grid{flex-wrap:wrap;}
  .rcard{flex:1 1 calc(50% - 12px);min-width:calc(50% - 12px);}
}
@media (max-width:600px){
  .pdp-title{font-size:26px;line-height:1.25;}
  .tabbar{gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .tab-btn{padding:12px 16px;font-size:14px;white-space:nowrap;}
  .pdp-art figure img{height:auto;aspect-ratio:16/10;}
  .pdp-actions{flex-wrap:wrap;}
  .pdp-actions .pdp-btn{flex:1 1 auto;justify-content:center;}
  .rcard{flex-basis:100%;min-width:100%;}
  .spectable td:first-child{width:auto;}
}
/* === END RESP-PAGE === */