.detail-hero{position:relative;margin-top:0;height:32vh;min-height:220px;color:#fff;background:url("../image/1.webp") center/cover no-repeat;overflow:hidden}
.detail-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,40,.55),rgba(10,20,40,.55))}
.hero-inner{position:relative;z-index:2;height:100%}
.breadcrumb{position:absolute;left:60px;bottom:60px;color:#cfe6ff}
.breadcrumb a{color:#cfe6ff}
.title{position:absolute;left:60px;bottom:22px;font-size:28px;font-weight:800}
main{padding:40px 0}
.detail-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:start;margin-top: 50px;}
.preview{border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.preview img{width:100%;display:block;transition:transform .22s ease}
.preview img:hover{transform:scale(1.04)}
.info .name{font-size:26px;font-weight:800;color:#0b2f4a}
.tags{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.tag{display:inline-block;background:#e6f9fc;color:#0a6;padding:8px 12px;border-radius:999px;font-weight:700}
.section{margin-top:22px}
.section h3{font-size:18px;font-weight:800;color:#0b2f4a;margin-bottom:10px}
.list{color:#4a5a6a;line-height:1.9;font-size:14px}
.spec{width:100%;border-collapse:collapse;border-spacing:0}
.spec th,.spec td{border:1px solid #e2e8f0;padding:10px;font-size:14px}
.spec th{background:#f7fbff;text-align:left;color:#0b2f4a}
.back{display:inline-block;margin-top:18px;background:#0ac;color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;transition:transform .16s ease, box-shadow .16s ease}
.back:hover{transform:scale(1.05);box-shadow:0 10px 22px rgba(0,170,204,.35)}
.related{margin-top:36px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#f7fbff;border-radius:12px;padding:12px;transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:scale(1.04);box-shadow:0 12px 28px rgba(0,0,0,.12)}
.pic{width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#fff}
.pic img{width:100%;height:100%;object-fit:cover;display:block}
.nm{text-align:center;margin-top:8px;color:#0b2f4a;font-weight:700}

@media (max-width:960px){
  .breadcrumb,.title{left:24px}
  .detail-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}