/* Trang chi tiết sản phẩm — MPE Mall. Cấu trúc theo mẫu HopLongTech.
   Mọi màu/chữ/nút map 1:1 token design-system.html (§9 CSS Tokens).
   Vai trò DS: Primary --brand-navy (Mua hàng/Báo giá/CTA) · Secondary --brand-green ·
   Accent --brand-lime · Link/Info --brand-blue · Heading navy · Text/Muted/Surface/Border xám. */
:root{
  --pdp-navy:#1F5D8F; --pdp-navy-hover:#174A72; --pdp-navy-soft:#EDF4F9;
  --pdp-green:#2B86A9; --pdp-green-hover:#226B87; --pdp-green-soft:#EDF7FA;
  --pdp-lime:#48AFC6; --pdp-blue:#3B9FC0; --pdp-blue-soft:#E9F6FA;
  --pdp-success:#15803D; --pdp-success-soft:#ECFDF3;
  --pdp-border:#EAECF0; --pdp-text:#344054; --pdp-muted:#667085; --pdp-surface:#F8FAFC;
  --pdp-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --pdp-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
.pdp-wrap{background:#fff; padding:8px 0 40px; font-family:var(--pdp-font); color:var(--pdp-text); font-size:14px; line-height:1.5;}
/* Hiện nút "Danh mục sản phẩm" trên header: theme mặc định ẩn (chỉ hiện khi sticky hoặc body.archive) */
#header .menu-header__category{display:list-item!important;}
/* Breadcrumb */
.pdp-crumbs{font-size:13px; color:var(--pdp-muted); padding:14px 0; border-bottom:1px solid var(--pdp-border); margin-bottom:24px;}
.pdp-crumbs a{color:var(--pdp-blue); text-decoration:none;}
.pdp-crumbs .sep{margin:0 8px; opacity:.5;}
.pdp-crumbs .cur{color:var(--pdp-text); font-weight:600;}
/* Layout chính: gallery + info + sidebar */
.pdp-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:36px; align-items:start;}
/* Gallery */
.pdp-gallery{position:sticky; top:90px;}
.pdp-main-img{border:1px solid var(--pdp-border); border-radius:14px; overflow:hidden; background:#fff; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; position:relative;}
.pdp-main-img img{width:100%; height:100%; object-fit:contain;}
.pdp-badge-save{position:absolute; top:12px; left:12px; background:var(--pdp-navy); color:#fff; font-size:12px; font-weight:700; border-radius:8px; padding:5px 10px;}
.pdp-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px;}
.pdp-thumbs button{border:1px solid var(--pdp-border); border-radius:8px; background:#fff; padding:4px; cursor:pointer; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.pdp-thumbs button.active{border-color:var(--pdp-navy); box-shadow:0 0 0 1px var(--pdp-navy);}
.pdp-thumbs img{max-width:100%; max-height:100%; object-fit:contain;}
/* Info */
.pdp-title{font-size:28px; line-height:1.25; color:var(--pdp-navy); margin:0 0 10px; font-weight:700;}
.pdp-sku{font-size:13px; color:var(--pdp-muted); margin-bottom:12px;}
.pdp-sku strong{font-family:var(--pdp-mono); color:var(--pdp-navy);}
.pdp-price-box{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; background:var(--pdp-surface); border-radius:14px; padding:14px 16px; margin-bottom:6px;}
.pdp-price-box ins{text-decoration:none; font-size:28px; font-weight:700; color:red; white-space:nowrap;}
.pdp-price-box del{font-size:16px; color:var(--pdp-muted); white-space:nowrap; position:relative; text-decoration:none; line-height:1.4;}
.pdp-price-box del::after{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:currentColor; transform:translateY(-50%);}
.pdp-vat-note{font-size:12px; color:var(--pdp-muted); margin-bottom:14px;}
/* Specs nhanh kiểu card HopLong */
.pdp-specs{list-style:none; margin:0 0 16px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 20px;}
.pdp-specs li{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--pdp-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pdp-specs li::before{content:"›"; flex-shrink:0; width:18px; height:18px; background:var(--pdp-blue); color:#fff; border-radius:50%; font-size:13px; line-height:17px; text-align:center; font-weight:700;}
.pdp-specs li b{font-weight:700;}
/* Khuyến mãi */
.pdp-promos{border:1px dashed var(--pdp-navy); border-radius:14px; padding:14px 16px; margin-bottom:18px; background:var(--pdp-navy-soft);}
.pdp-promos .t{font-weight:700; color:var(--pdp-navy); font-size:14px; text-transform:uppercase; margin-bottom:10px;}
.pdp-promos ul{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.pdp-promos li{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--pdp-text);}
.pdp-promos li i[data-lucide], .pdp-promos li svg{width:18px; height:18px; flex-shrink:0; color:var(--pdp-navy);}
/* Mua hàng — 3 nút cân đối: cùng cao, cùng giãn đều */
.pdp-buyrow{display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; margin-bottom:14px;}
.pdp-qty{display:inline-flex; align-items:center; border:1px solid var(--pdp-border); border-radius:10px; overflow:hidden; flex-shrink:0; height:46px; box-sizing:border-box; background:#fff;}
.pdp-qty button{flex:0 0 42px; width:42px; height:44px; min-height:0; border:0; margin:0; padding:0; background:#fff; font-size:20px; line-height:1; font-weight:700; color:var(--pdp-navy); cursor:pointer; font-family:var(--pdp-font); display:flex; align-items:center; justify-content:center; box-sizing:border-box; appearance:none; -webkit-appearance:none;}
.pdp-qty button:hover{background:var(--pdp-navy-soft);}
.pdp-qty input{flex:0 0 48px; width:48px; min-width:0; height:44px; min-height:0; line-height:44px; border:0; border-left:1px solid var(--pdp-border); border-right:1px solid var(--pdp-border); margin:0; padding:0; text-align:center; font-size:14px; font-weight:700; font-family:var(--pdp-font); color:var(--pdp-text); box-sizing:border-box; appearance:textfield; -moz-appearance:textfield;}
.pdp-qty input::-webkit-outer-spin-button, .pdp-qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.pdp-qty input:focus{outline:none; background:var(--pdp-navy-soft);}
.pdp-btn{flex:1 1 0!important; width:0!important; min-width:0!important; max-width:none!important; margin:0!important; box-sizing:border-box!important; appearance:none; -webkit-appearance:none; display:inline-flex!important; align-items:center; justify-content:center; gap:8px; min-height:46px; border-radius:10px; font-size:14px; font-weight:700; font-family:var(--pdp-font); cursor:pointer; text-decoration:none; border:1px solid var(--pdp-navy)!important; padding:10px 8px!important; text-align:center; line-height:1.25; text-transform:none!important; letter-spacing:0!important;}
.pdp-btn.cart{background:#fff; color:var(--pdp-navy);}
.pdp-btn.cart:hover{background:var(--pdp-navy-soft);}
.pdp-btn.quote{background:var(--pdp-green); border-color:var(--pdp-green); color:#fff;}
.pdp-btn.quote:hover{background:var(--pdp-green-hover);}
.pdp-btn.quote.in-list{background:var(--pdp-blue); border-color:var(--pdp-blue);}
.pdp-hotline{display:flex; align-items:center; gap:10px; font-size:14px; background:var(--pdp-navy-soft); border:1px solid var(--pdp-navy); border-radius:10px; padding:10px 14px; margin-bottom:8px;}
.pdp-hotline i[data-lucide], .pdp-hotline svg{width:18px; height:18px; color:var(--pdp-navy); flex-shrink:0;}
.pdp-hotline a{font-weight:700; color:var(--pdp-navy); text-decoration:none; font-size:16px;}
.pdp-doc-link{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--pdp-blue); text-decoration:none; margin-bottom:4px;}
.pdp-doc-link:hover{text-decoration:underline;}
/* Tabs */
.pdp-tabs{margin-top:36px;}
.pdp-tabnav{display:flex; gap:4px; border-bottom:2px solid var(--pdp-border); flex-wrap:wrap;}
.pdp-tabnav button{border:0; background:none; font-family:var(--pdp-font); font-size:14px; font-weight:700; color:var(--pdp-muted); padding:12px 18px; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px;}
.pdp-tabnav button.active{color:var(--pdp-navy); border-bottom-color:var(--pdp-navy);}
.pdp-tabpanel{display:none; padding:22px 4px;}
.pdp-tabpanel.active{display:block;}
.pdp-tabpanel h2{font-size:22px; line-height:1.25; margin:0 0 14px; color:var(--pdp-navy); font-weight:700;}
.pdp-tabpanel p, .pdp-tabpanel li{font-size:14px; line-height:1.65; color:var(--pdp-text);}
/* Bảng thông số */
.pdp-spec-table{width:100%; border-collapse:collapse; font-size:14px;}
.pdp-spec-table th, .pdp-spec-table td{border:1px solid var(--pdp-border); padding:10px 14px; text-align:left; vertical-align:top;}
.pdp-spec-table th{width:32%; background:var(--pdp-surface); font-weight:700; color:var(--pdp-navy); font-size:12px; text-transform:uppercase; letter-spacing:.04em;}
/* Tài liệu */
.pdp-doc-card{display:flex; align-items:center; gap:14px; border:1px solid var(--pdp-border); border-radius:14px; padding:14px 16px; margin-bottom:12px;}
.pdp-doc-card .ic{width:44px; height:44px; flex-shrink:0; border-radius:10px; background:var(--pdp-navy-soft); display:flex; align-items:center; justify-content:center; color:var(--pdp-navy); font-weight:700; font-size:13px;}
.pdp-doc-card .inf{flex:1; min-width:0;}
.pdp-doc-card .inf b{display:block; font-size:14px;}
.pdp-doc-card .inf span{font-size:13px; color:var(--pdp-muted);}
.pdp-doc-card a.dl{flex-shrink:0; background:var(--pdp-navy); color:#fff; font-size:13px; font-weight:700; border-radius:10px; padding:11px 18px; text-decoration:none; font-family:var(--pdp-font);}
/* Sidebar hỗ trợ */
.pdp-layout{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:36px; align-items:start;}
.pdp-side{display:grid; gap:14px; position:sticky; top:90px;}
.pdp-box{border:1px solid var(--pdp-border); border-radius:14px; padding:16px;}
.pdp-box .t{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--pdp-navy); text-transform:uppercase; margin-bottom:10px;}
.pdp-box .t i[data-lucide], .pdp-box .t svg{width:18px; height:18px;}
.pdp-box ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:14px; color:var(--pdp-text);}
.pdp-box li{display:flex; gap:8px; align-items:flex-start; line-height:1.5;}
.pdp-box li::before{content:"✓"; flex-shrink:0; color:var(--pdp-success); font-weight:700;}
.pdp-box a{color:var(--pdp-blue); font-weight:700; text-decoration:none;}
/* SP liên quan */
.pdp-related{margin-top:44px;}
.pdp-related h2{font-size:22px; line-height:1.25; margin:0 0 18px; color:var(--pdp-navy); font-weight:700; display:flex; align-items:center; gap:10px;}
.pdp-related h2::after{content:""; flex:1; height:2px; background:var(--pdp-border);}
@media (max-width:1024px){
  .pdp-layout{grid-template-columns:1fr;}
  .pdp-side{position:static; grid-template-columns:1fr 1fr;}
  .pdp-gallery{position:static;}
}
@media (max-width:768px){
  .pdp-grid{grid-template-columns:1fr;}
  .pdp-specs{grid-template-columns:1fr;}
  .pdp-side{grid-template-columns:1fr;}
  .pdp-title{font-size:22px;}
  .pdp-price-box ins{font-size:22px;}
  .pdp-btn{flex:1 1 100%;}
}