@import "../../assets/css/breakpoints.css";

:root{
  --cr:var(--color-red-600);--cb:var(--color-brand-blue);--cr-dk:var(--color-red-700);--cb-dk:var(--color-brand-blue-dark);
  --cr-bg:var(--color-red-100);--cb-bg:var(--color-bg-secondary);
  --bg:var(--color-bg-primary);--bg2:var(--color-bg-secondary);--bg3:var(--color-neutral-100);
  --cd:var(--color-text-primary);--ct:var(--color-text-secondary);--cm:var(--color-neutral-500);--bdr:var(--color-border);
  --cs:var(--color-success);--cw:var(--color-warning);
  --rad:var(--radius-md);--rad-lg:var(--radius-xl);
  --sh:var(--shadow-sm);
  --sh2:var(--shadow-lg);--sh-red:var(--shadow-red-lg);
  --tr:var(--transition-base);
}

/* ── LAYOUT ────────────────────────────────────── */
.dp-wrap{background:var(--bg);padding-bottom:0;}
.dp-con{width:100%;margin:0 auto;padding-left:var(--bs-gutter-x,.75rem);padding-right:var(--bs-gutter-x,.75rem);}
@media (min-width:576px){.dp-con{max-width:540px;}}
@media (min-width:768px){.dp-con{max-width:720px;}}
@media (min-width:992px){.dp-con{max-width:960px;}}
@media (min-width:1200px){.dp-con{max-width:1140px;}}
@media (min-width:1400px){.dp-con{max-width:1320px;}}

/* ── BREADCRUMB ────────────────────────────────── */
.dp-bre{border-bottom:1px solid var(--bdr);padding:12px 0;background:var(--bg);}
.dp-bre ol{display:flex;gap:6px;align-items:center;list-style:none;margin:0;padding:0;font-size:var(--text-xs);color:var(--ct);flex-wrap:wrap;}
.dp-bre a{color:var(--ct);text-decoration:none;transition:color .2s;}
.dp-bre a:hover{color:var(--cb);}
.dp-bre-sep{color:var(--cm);font-size:var(--text-xs);}
.dp-bre-cur{color:var(--cd);font-weight:600;}

/* ── ABOVE FOLD 2-COL ──────────────────────────── */
.dp-above{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:36px 0 48px;align-items:start;}
.dp-hero__media{align-self:start;}
.dp-hero__content{min-width:0;}

/* Gallery */
.dp-main-img{border-radius:var(--rad-lg);overflow:hidden;background:var(--bg2);aspect-ratio:4/3;position:relative;}
.dp-main-img img{width:100%;height:100%;object-fit:contain;display:block;transition:opacity .3s;}
.dp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px;}
.dp-thumb{border-radius:8px;overflow:hidden;border:2px solid transparent;cursor:pointer;aspect-ratio:4/3;background:var(--bg2);transition:border-color .2s;}
.dp-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.dp-thumb.active,.dp-thumb:hover{border-color:var(--cb);}

/* Info panel */
.dp-badge{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--cb-bg);color:var(--cb);font-size:var(--text-xs);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);margin-bottom:var(--space-4);}
.dp-h1{font-size:clamp(22px,3vw,30px);font-weight:900;color:var(--cd);line-height:1.2;margin-bottom:14px;letter-spacing:-.4px;}
.dp-stars{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);font-size:var(--text-sm);color:var(--ct);}
.dp-urgency{display:flex;align-items:center;gap:var(--space-2);background:var(--cr-bg);border:1px solid var(--color-red-100);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--cr);margin-bottom:var(--space-5);}
.dp-urgency strong{margin:0 3px;}

/* Price block */
.dp-price-block{border:1px solid var(--bdr);border-radius:var(--rad-lg);padding:20px 22px;margin-bottom:20px;background:var(--bg);}
.dp-price-label{font-size:var(--text-xs);color:var(--ct);margin-bottom:var(--space-2);}
.dp-price-value{font-size:clamp(28px,4vw,38px);font-weight:900;color:var(--cr);line-height:1;letter-spacing:-.5px;}
.dp-price-unit{font-size:var(--text-sm);color:var(--ct);margin-top:var(--space-2);}
.dp-price-range{font-size:var(--text-sm);color:var(--ct);margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--bdr);}

/* Variant pills */
.dp-vars-label{font-size:var(--text-xs);color:var(--ct);margin-bottom:var(--space-3);}
.dp-variants{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.dp-var-btn{padding:var(--space-2) var(--space-3);border:1.5px solid var(--bdr);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-semibold);background:var(--bg);color:var(--ct);cursor:pointer;transition:var(--tr);}
.dp-var-btn:hover{border-color:var(--cb);color:var(--cb);background:var(--cb-bg);}
.dp-var-btn.active{border-color:var(--cb);background:var(--cb);color:var(--color-white);font-weight:var(--weight-bold);}

/* Color swatches */
.dp-colors{margin-bottom:20px;}
.dp-colors-label{font-size:var(--text-xs);color:var(--ct);margin-bottom:var(--space-3);}
.dp-colors-label span{font-weight:600;color:var(--cd);}
.dp-swatches{display:flex;flex-wrap:wrap;gap:10px;}
.dp-swatch{width:32px;height:32px;border-radius:var(--radius-full);border:2.5px solid var(--bg);outline:2px solid var(--bdr);background:var(--swatch-color,var(--color-neutral-200));cursor:pointer;transition:outline-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out);box-shadow:var(--shadow-sm);}
.dp-swatch:hover{transform:scale(1.1);}
.dp-swatch.active{outline-color:var(--cd);outline-width:2.5px;}
/* Ẩn Select2 wrapper của changePhienBan */
#select2-changePhienBan-container,
.select2-container:has(#select2-changePhienBan-container){display:none;}

/* Promo box */
.dp-promo{background:var(--color-neutral-800);border-radius:var(--rad-lg);padding:var(--space-5) var(--space-6);margin-bottom:var(--space-5);position:relative;overflow:hidden;}
.dp-promo::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--cr);}
.dp-promo-badge{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--color-red-800);color:var(--color-white);font-size:var(--text-xs);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);margin-bottom:var(--space-3);}
.dp-promo-hd{margin-bottom:14px;}
.dp-promo-title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-neutral-50);margin-bottom:var(--space-1);line-height:var(--leading-snug);}
.dp-promo-sub{font-size:var(--text-xs);color:var(--color-neutral-300);margin-top:var(--space-1);}
.dp-promo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);}
.dp-promo-list li{font-size:var(--text-sm);color:var(--color-neutral-100);padding-left:var(--space-5);position:relative;line-height:var(--leading-normal);}
.dp-promo-list li::before{content:'✓';position:absolute;left:0;color:var(--cs);font-weight:700;}

/* CTA buttons */
.dp-ctas{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-5);}
.dp-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
/* Trust badges */
.dp-trust{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-1) 0 0;list-style:none;margin:0;}
.dp-trust-item{display:flex;align-items:flex-start;gap:var(--space-2);font-size:15px;line-height:var(--leading-normal);color:var(--cd);}
.dp-trust-item>i{color:var(--cs);flex-shrink:0;margin-top:3px;}
.dp-trust-body{flex:1;min-width:0;}
.dp-trust-link{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-sm);color:var(--color-link);text-decoration:none;transition:var(--transition-base);}
.dp-trust-link:hover{color:var(--color-red-600);}
.dp-trust-phone{font-weight:var(--fw-semibold);color:var(--color-neutral-900);text-decoration:none;}
.dp-trust-phone:hover{color:var(--color-red-600);}
.dp-trust-hours{font-size:var(--text-sm);color:var(--color-neutral-500);}

/* ── STICKY TAB NAV ────────────────────────────── */
.dp-tabs-wrap{border-bottom:1px solid var(--bdr);background:var(--bg);position:sticky;top:0;z-index:90;box-shadow:0 2px 12px rgba(0,0,0,.06);}
.dp-tabs{display:flex;overflow-x:auto;scrollbar-width:none;width:100%;margin:0 auto;padding-left:var(--bs-gutter-x,.75rem);padding-right:var(--bs-gutter-x,.75rem);justify-content:center;}
@media (min-width:576px){.dp-tabs{max-width:540px;}}
@media (min-width:768px){.dp-tabs{max-width:720px;}}
@media (min-width:992px){.dp-tabs{max-width:960px;}}
@media (min-width:1200px){.dp-tabs{max-width:1140px;}}
@media (min-width:1400px){.dp-tabs{max-width:1320px;}}
.dp-tabs::-webkit-scrollbar{display:none;}
.dp-tab-btn{flex-shrink:0;padding:var(--space-4) var(--space-6);font-size:16px;font-weight:var(--weight-semibold);color:var(--ct);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;transition:var(--tr);}
.dp-tab-btn:hover{color:var(--color-link);}
.dp-tab-btn.active{color:var(--color-link);border-bottom-color:var(--color-link);font-weight:700;}

/* ── TAB PANELS ────────────────────────────────── */
.dp-panel{display:none;padding:52px 0;}
.dp-panel.active{display:block;}
.dp-sec-h2{font-size:var(--text-h2);font-weight:var(--weight-extrabold);color:var(--cb);margin-bottom:var(--space-2);letter-spacing:var(--tracking-tight);text-align:center;}
.dp-sec-sub{font-size:var(--text-sm);color:var(--ct);margin-bottom:var(--space-8);line-height:var(--leading-normal);text-align:center;}

/* Version comparison table — horizontal scroll */
.dp-vt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.dp-vt{width:100%;border-collapse:collapse;font-size:var(--text-sm);border:1px solid var(--bdr);min-width:600px;}
.dp-vt thead th{background:var(--cb);color:var(--color-white);padding:var(--space-3) var(--space-4);font-size:var(--text-xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-wide);white-space:nowrap;}
.dp-vt tbody td{padding:13px 16px;border-bottom:1px solid var(--bdr);vertical-align:middle;color:var(--cd);white-space:nowrap;}
.dp-vt tbody tr:last-child td{border-bottom:none;}
.dp-vt tbody tr:hover td{background:var(--cb-bg);}
.dp-vt tbody tr.dp-vt-hot td{background:var(--color-red-50);}
.dp-vt-col-name{text-align:left;}
.dp-vt-col-price,.dp-vt-col-spec,.dp-vt-price,.dp-vt-spec,.dp-vt-action{text-align:center;}
.dp-vt-price{font-size:var(--text-base);font-weight:var(--weight-extrabold);color:var(--cr);}
.dp-vt-spec{font-size:var(--text-sm);}
.dp-vt-badge{display:inline-flex;align-items:center;margin-left:var(--space-2);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:var(--cr);color:var(--color-white);font-size:var(--text-xs);vertical-align:middle;}

.dp-hidden{display:none;}

/* Review collapse/expand */
.dp-review-wrap{border:1px solid var(--bdr);border-radius:var(--rad-lg);overflow:hidden;}
.dp-review-body{position:relative;max-height:50vh;overflow:hidden;transition:max-height .45s ease;}
.dp-review-body.expanded{max-height:none;}
/* Gradient fade khi thu gọn */
.dp-review-body:not(.expanded)::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:120px;
  background:linear-gradient(transparent,var(--color-white));
  pointer-events:none;
}
/* Nội dung EditorJS / HTML */
.dp-review-content{padding:28px 32px;font-size:var(--text-base);line-height:var(--leading-loose);color:var(--color-neutral-900);}
.dp-review-content h2,.dp-review-content h3{color:var(--cb);font-weight:800;margin:20px 0 10px;}
.dp-review-content h2{font-size:var(--text-h3);}
.dp-review-content h3{font-size:var(--text-base);}
.dp-review-content p{margin-bottom:14px;}
.dp-review-content ul,.dp-review-content ol{padding-left:20px;margin-bottom:14px;}
.dp-review-content li{margin-bottom:6px;}
.dp-review-content img{max-width:100%;border-radius:8px;margin:12px 0;}
.dp-review-content strong{color:var(--cd);}
.dp-review-content table{width:100%;border-collapse:collapse;font-size:var(--text-sm);margin-bottom:14px;}
.dp-review-content table td,.dp-review-content table th{padding:9px 14px;border:1px solid var(--bdr);}
.dp-review-content table th{background:var(--cb-bg);color:var(--cb);font-weight:700;}
/* Toggle button */
.dp-review-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:14px;border:none;background:var(--bg2);cursor:pointer;font-size:var(--text-sm);font-weight:600;color:var(--cb);border-top:1px solid var(--bdr);transition:var(--tr);}
.dp-review-toggle:hover{background:var(--cb-bg);color:var(--cb-dk);}
.dp-review-toggle svg{transition:transform .3s;flex-shrink:0;}
.dp-review-toggle.expanded svg{transform:rotate(180deg);}
@media (max-width:575px){.dp-review-content{padding:20px 18px;font-size:var(--text-base);}}

/* ── REVIEW TAB — desktop reading width ─────────────────── */
#ct-exterior.dp-panel.active .dp-review-wrap,
#ct-exterior.dp-panel.active .dp-sec-h2,
#ct-exterior.dp-panel.active .dp-sec-sub {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
#ct-exterior.dp-panel.active .dp-sec-sub {
  text-align: center;
}

/* ── SPECS TABLE (Redesigned: scroll dọc + ngang, sticky, touch-friendly) ── */
.hsp-outer {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--rad-lg);
  border: 1px solid var(--bdr);
  max-height: 520px;
}
.hsp-outer::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.hsp-outer::-webkit-scrollbar-thumb {
  background: var(--bdr);
  border-radius: 3px;
}
.hsp-outer::-webkit-scrollbar-track {
  background: transparent;
}
.hsp-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 560px;
  border-spacing: 0;
}
/* Sticky header */
.hsp-tbl thead th {
  background: var(--cb);
  color: var(--color-white);
  padding: 14px 20px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  position: sticky;
  top: 0;
  z-index: 3;
  white-space: nowrap;
}
/* Sticky header + first column (top-left corner) */
.hsp-tbl thead th:first-child {
  text-align: left;
  min-width: 160px;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 5;
  background: var(--cb);
  box-shadow: 2px 0 6px rgba(0,0,0,.12);
}
.hsp-tbl thead th:not(:first-child) {
  text-align: center;
  min-width: 130px;
}
/* Category row — first cell sticky left, fill cells match background */
.hsp-cat td:first-child {
  background: var(--cb-bg);
  color: var(--cb);
  font-size: var(--text-sm);
  font-weight: 800;
  padding: 12px 20px;
  border-top: 2px solid var(--cb);
  letter-spacing: .2px;
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 160px;
  box-shadow: 2px 0 6px rgba(0,0,0,.07);
}
.hsp-cat-fill {
  background: var(--cb-bg);
  border-top: 2px solid var(--cb);
  padding: 12px 16px;
}
/* Data rows — first column sticky */
.hsp-row td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;
  font-size: var(--text-sm);
  color: var(--cd);
  padding: 14px 20px;
  min-width: 160px;
  box-shadow: 2px 0 6px rgba(0,0,0,.07);
}
.hsp-row td:not(:first-child) {
  text-align: center;
  padding: 14px 16px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--cd);
  border-left: 1px solid var(--bdr);
}
.hsp-row { border-bottom: 1px solid var(--color-neutral-100); }
.hsp-row:nth-child(odd) {
  background: var(--color-white);
}
.hsp-row:nth-child(even) {
  background: var(--color-neutral-50);
}
.hsp-row:hover td {
  background: var(--cb-bg);
}
.hsp-empty {
  color: var(--cm);
  font-weight: 400;
}
.hsp-hint {
  display: none;
  font-size: var(--text-xs);
  color: var(--cm);
  margin-bottom: 8px;
  text-align: right;
}
@media (max-width: 767px) {
  .hsp-hint { display: block; }
  .hsp-tbl { font-size: var(--text-sm); }
  .hsp-tbl thead th:first-child,
  .hsp-row td:first-child { min-width: 140px; }
  .hsp-tbl thead th:not(:first-child),
  .hsp-row td:not(:first-child) { min-width: 110px; }
  .hsp-row td:first-child,
  .hsp-row td:not(:first-child) { padding: 12px 14px; }
}

/* Gallery */
.dp-gal-tabs{display:flex;gap:var(--space-2);margin-bottom:var(--space-5);}
.dp-gal-tab{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-semibold);border:1.5px solid var(--bdr);background:var(--bg);color:var(--ct);cursor:pointer;transition:var(--tr);}
.dp-gal-tab.active,.dp-gal-tab:hover{border-color:var(--cb);color:var(--cb);background:var(--cb-bg);}
.dp-gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.dp-gal-item{border-radius:var(--radius-md);overflow:hidden;aspect-ratio:16/9;background:var(--bg2);cursor:pointer;position:relative;display:block;border:none;padding:0;text-align:left;}
.dp-gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s;}
.dp-gal-item:hover img{transform:scale(1.06);}
.dp-gal-item.empty{display:flex;align-items:center;justify-content:center;}
.dp-gal-item.empty::after{content:'\f030';font-family:"Font Awesome 5 Pro";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;opacity:.2;pointer-events:none;}
.dp-gal-video-fallback{display:flex;align-items:center;justify-content:center;height:100%;background:var(--color-neutral-950);color:var(--color-white);font-size:2rem;}

/* Lightbox */
.dp-lb{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(10,10,10,.93);animation:dpLbFade .2s ease;}
.dp-lb.open{display:flex;}
@keyframes dpLbFade{from{opacity:0}to{opacity:1}}
.dp-lb-inner{position:relative;display:flex;align-items:center;justify-content:center;max-width:90vw;max-height:88vh;}
.dp-lb-img{max-width:90vw;max-height:88vh;object-fit:contain;border-radius:var(--radius-sm);display:block;box-shadow:var(--shadow-xl);user-select:none;}
.dp-lb-close{position:fixed;top:14px;right:18px;background:rgba(255,255,255,.12);border:none;color:var(--color-white);font-size:var(--text-h2);line-height:1;width:40px;height:40px;border-radius:var(--radius-full);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10001;transition:background .2s;}
.dp-lb-close:hover{background:rgba(255,255,255,.28);}
.dp-lb-prev,.dp-lb-next{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.13);border:none;color:var(--color-white);font-size:var(--text-h1);line-height:1;width:52px;height:72px;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10001;transition:background .2s;}
.dp-lb-prev{left:10px;}
.dp-lb-next{right:10px;}
.dp-lb-prev:hover,.dp-lb-next:hover{background:rgba(255,255,255,.28);}
.dp-lb-count{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.65);font-size:var(--text-sm);font-weight:500;z-index:10001;white-space:nowrap;}
.dp-lb-vid{width:min(88vw,960px);aspect-ratio:16/9;border:none;border-radius:var(--radius-sm);background:var(--color-neutral-950);}
@media (max-width:575px){
  .dp-lb-prev,.dp-lb-next{width:36px;height:56px;font-size:var(--text-h1);}
  .dp-lb-prev{left:4px;}
  .dp-lb-next{right:4px;}
}

/* ── WHY SECTION ──────────────────────────────── */
.dp-why{background:var(--bg2);padding:64px 0;}
.dp-why-head{text-align:center;margin-bottom:36px;}
.dp-why-head h2{font-size:var(--text-h2);font-weight:800;color:var(--cb);margin-bottom:var(--space-2);}
.dp-why-head p{font-size:var(--text-sm);color:var(--ct);}
.dp-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.dp-why-card{text-align:center;padding:var(--space-6) var(--space-4);background:var(--bg);border-radius:var(--rad-lg);border:1px solid var(--bdr);transition:var(--tr);}
.dp-why-card:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:transparent;}
.dp-why-ico{width:52px;height:52px;border-radius:var(--radius-full);background:var(--cb-bg);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-3);font-size:1.25rem;color:var(--cb);}
.dp-why-title{font-size:var(--text-base);font-weight:700;color:var(--cd);margin:0 0 var(--space-2);}
.dp-why-desc{font-size:var(--text-sm);color:var(--ct);line-height:var(--leading-normal);}

/* ── CTA BANNER ──────────────────────────────── */
.dp-cta-banner{background:var(--cb);padding:60px 0;text-align:center;position:relative;overflow:hidden;}
.dp-cta-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(0,61,145,.6) 0%,transparent 70%);pointer-events:none;}
.dp-cta-banner h2{font-size:var(--text-h2);font-weight:900;color:var(--color-white);margin-bottom:var(--space-2);position:relative;}
.dp-cta-banner p{font-size:var(--text-sm);color:rgba(255,255,255,.75);margin-bottom:var(--space-8);position:relative;}
.dp-cta-banner-btns{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:nowrap;position:relative;}
.dp-cta-banner-btns .btn{flex:1;max-width:220px;justify-content:center;white-space:nowrap;}
.dp-cta-banner-btns .btn-ghost{color:var(--color-white);border-color:rgba(255,255,255,.5);background:transparent;}
.dp-cta-banner-btns .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:var(--color-white);}

/* ── RELATED ARTICLES ─────────────────────────── */
.dp-related{padding:64px 0;background:var(--bg);}
.dp-related-heading{margin-bottom:var(--space-6);}
.dp-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.dp-art-card{display:block;text-decoration:none;border-radius:var(--rad-lg);overflow:hidden;border:1px solid var(--bdr);transition:var(--tr);background:var(--bg);}
.dp-art-card:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:transparent;}
.dp-art-img{aspect-ratio:16/9;overflow:hidden;background:var(--bg2);}
.dp-art-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s;}
.dp-art-card:hover .dp-art-img img{transform:scale(1.05);}
.dp-art-body{padding:var(--space-4);}
.dp-art-date{font-size:var(--text-xs);color:var(--cm);margin-bottom:var(--space-1);}
.dp-art-title{font-size:var(--text-base);font-weight:600;color:var(--cd);line-height:var(--leading-normal);margin:0;}

/* ── RESPONSIVE ───────────────────────────────── */
@media (max-width:991px){
  .dp-above{grid-template-columns:1fr;gap:28px;padding-top:var(--bs-gutter-x,.75rem);}
  .dp-why-grid{grid-template-columns:1fr 1fr;}
  .dp-related-grid{grid-template-columns:1fr 1fr;}
  .dp-contact-grid{grid-template-columns:1fr;}
  .dp-parts-grid{grid-template-columns:1fr 1fr;}
  .dp-gal-grid{grid-template-columns:1fr 1fr;}
}
@media (min-width:992px){
  .dp-hero__media{
    position: sticky;
    top: var(--space-6);
    z-index: 1;
  }
}
@media (max-width:575px){
  .dp-parts-grid{grid-template-columns:1fr;}
  .dp-gal-grid{grid-template-columns:1fr 1fr;}
  .dp-why-grid{grid-template-columns:1fr 1fr;}
  .dp-field-row{grid-template-columns:1fr;}
  .dp-cta-row{grid-template-columns:1fr;}
  .dp-panel{padding:36px 0;}
  .dp-badge,.dp-price-label,.dp-vars-label,.dp-colors-label,.dp-promo-badge{font-size:var(--text-xs);}
  .dp-review-toggle{font-size:16px;}
  .dp-tabs{overflow:visible;padding-left:0;padding-right:0;justify-content:space-between;}
  .dp-tab-btn{flex:1 1 0;min-width:0;white-space:normal;text-align:center;padding:10px 4px;font-size:15px;line-height:1.2;color:var(--color-neutral-900);}
  .dp-tab-btn.active{color:var(--color-link);}
  .dp-cta-banner .dp-con{padding-inline:var(--container-padding-x);}
  .dp-cta-banner-btns{
    flex-direction:column;
    align-items:stretch;
    gap:var(--space-3);
  }
  .dp-cta-banner-btns .btn{
    width:100%;
    max-width:none;
  }
  /* Related articles — horizontal swipe carousel */
  .dp-related{padding:40px 0;}
  .dp-related .dp-con{overflow:hidden;padding-left:0;padding-right:0;}
  .dp-related-grid{
    display:flex;
    flex-wrap:nowrap;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:4px var(--bs-gutter-x,.75rem) 16px;
    margin:0;
  }
  .dp-related-grid::-webkit-scrollbar{display:none;}
  .dp-art-card{
    flex:0 0 78vw;
    scroll-snap-align:start;
  }
}

/* ── Focus-visible styles for keyboard navigation ── */
.dp-switch:focus-visible,.dp-swatch:focus-visible,.dp-thumb:focus-visible,.dp-gal-item:focus-visible,.dp-art-card:focus-visible{outline:2px solid var(--cb);outline-offset:2px;border-radius:4px;}
.dp-var-btn:focus-visible{border-color:var(--cb);box-shadow:0 0 0 2px rgba(0,47,108,.3);}
.dp-tab-btn:focus-visible{outline:2px solid var(--color-link);outline-offset:-2px;}
.dp-review-toggle:focus-visible{outline:2px solid var(--cb);outline-offset:-2px;}

/* ── Hide site header on scroll (product page) ── */
.header{transition:transform .32s cubic-bezier(.4,0,.2,1);}
.header.dp-hdr-hidden{transform:translateY(-110%);}

/* ── Quote Popup (popupBaoGia redesign) ── */
.qp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 999;
}

.qp-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 920px;
  max-width: 95%;
  background: var(--color-white);
  border-radius: var(--rad-lg);
  z-index: 1000;
  overflow: hidden;
  font-family: system-ui;
}

.qp-close {
  position: absolute;
  right: 12px;
  top: 10px;
  font-size: var(--text-h2);
  border: none;
  background: none;
  cursor: pointer;
  z-index: 10;
  color: var(--cd);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background .2s;
}
.qp-close:hover {
  background: var(--bg2);
}

.qp-container {
  display: flex;
}

.qp-left {
  width: 40%;
  background: var(--bg2);
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.qp-car {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.qp-left-img-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.qp-trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 50px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  max-width: 100%;
}
.qp-trust-badge i {
  font-size: var(--text-lg);
  color: var(--cr);
  flex-shrink: 0;
}
.qp-trust-badge__text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  text-align: left;
}
.qp-trust-badge__text span:first-child {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--cd);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.qp-trust-badge__text span:last-child {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--cd);
}

.qp-benefits {
  margin-top: 16px;
  font-size: var(--text-sm);
  color: var(--cd);
  text-align: left;
  list-style: none;
  padding: 0;
}
.qp-benefits li {
  padding: 6px 0;
  line-height: 1.5;
}
.qp-benefits li i {
  color: var(--cr);
  margin-right: 6px;
  width: 18px;
  text-align: center;
}

.qp-right {
  width: 60%;
  padding: 32px;
}

.qp-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--cd);
  margin: 0 0 10px;
  line-height: 1.3;
  text-align: center;
}

.qp-title span {
  color: var(--cr);
}

.qp-sub {
  margin: 0 0 20px;
  color: var(--ct);
  font-size: var(--text-sm);
  line-height: 1.6;
  text-align: center;
}

.qp-field-row {
  display: flex;
  gap: 10px;
}
.qp-field-row .qp-field {
  flex: 1;
  min-width: 0;
}

.qp-field input,
.qp-field select {
  width: 100%;
  height: 48px;
  margin-bottom: 12px;
  padding: 0 12px;
  border: 1px solid var(--bdr);
  border-radius: var(--rad);
  font-size: var(--text-sm);
  color: var(--cd);
  background: var(--color-white);
  outline: none;
  transition: border-color .2s;
}
.qp-field input:focus,
.qp-field select:focus {
  border-color: var(--cb);
  box-shadow: 0 0 0 3px rgba(0,47,108,.1);
}

.qp-btn {
  width: 100%;
  height: 52px;
  background: var(--cr);
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--text-sm);
  border: none;
  border-radius: var(--rad);
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.qp-btn:hover {
  background: var(--cr-dk);
  transform: translateY(-1px);
}

.qp-trust {
  margin-top: 14px;
  font-size: var(--text-xs);
  display: flex;
  justify-content: space-between;
  color: var(--cm);
  gap: 8px;
  flex-wrap: wrap;
}
.qp-trust span i {
  color: var(--cr);
  margin-right: 4px;
}

.qp-privacy {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--cm);
  line-height: 1.4;
}
.qp-privacy i {
  font-size: var(--text-xs);
  color: var(--cm);
  flex-shrink: 0;
}

.hidden {
  display: none !important;
}

/* MOBILE */
@media (max-width: 768px) {
  .qp-container {
    flex-direction: column;
  }

  .qp-left {
    display: flex;
    width: 100%;
    padding: 16px 20px 8px;
    flex-direction: column;
    align-items: center;
  }

  .qp-left-img-wrap {
    width: 100%;
    max-width: none;
  }

  .qp-car {
    width: 100%;
  }

  .qp-trust-badge {
    width: 100%;
    margin-bottom: 20px;
  }

  .qp-benefits {
    display: none;
  }

  .qp-field-row {
    flex-direction: column;
    gap: 0;
  }

  .qp-right {
    width: 100%;
    padding: 12px 20px 24px;
  }

  .qp-modal {
    max-width: 98%;
    max-height: 90vh;
    overflow-y: auto;
  }

  .qp-title {
    font-size: calc(var(--text-h3) * 1.2);
  }

  .qp-field input,
  .qp-field select {
    font-size: var(--text-base);
  }
}


/* ── POPUP PARTS OVERLAY ─────────────────────────── */
.popup-theme {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -2;
	opacity: 0;
	background-color: var(--bs-black);
	width: 100%;
	height: 100vh;
	max-width: 100vw;
	overflow: hidden;
	transition: all .5s;
}

.is-popup {
	overflow: hidden;
	height: 100vh;
}

.is-popup .popup-theme {
	opacity: 1;
	z-index: 1055;
}

.popup-theme .popup-theme_container {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.popup-theme .popup-theme_container .popup-theme_close {
	position: absolute;
	top: 0;
	right: 0;
	width: 60px;
	height: 60px;
	background-color: var(--primary-color);
	cursor: pointer;
	transition: var(--transition-default);
	border: 0;
	outline: none;
	box-shadow: none;
}

.popup-theme .popup-theme_container .popup-theme_close:hover {
	background: var(--primary-hover);
}

.popup-theme .popup-theme_container .popup-theme_close:before,
.popup-theme .popup-theme_container .popup-theme_close:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 2px;
	background-color: var(--bs-white);
}

.popup-theme .popup-theme_container .popup-theme_close:before {
	transform-origin: center center;
	transform: translate(-50%, -50%) rotate(-45deg);
}

.popup-theme .popup-theme_container .popup-theme_close:after {
	transform-origin: center center;
	transform: translate(-50%, -50%) rotate(45deg);
}

.popup-theme .popup-theme_content {
	color: var(--bs-white);
	padding-top: 60px;
	padding-bottom: 160px;
	text-align: center;
	width: 60%;
	height: 100%;
	position: relative;
}

.popup-theme .popup-theme_content::-webkit-scrollbar { display: none; }

.popup-theme .popup-theme_scrollbar {
	position: absolute;
	width: 16px;
	top: 0;
	height: 100%;
	bottom: 0;
	right: -30px;
	z-index: 5;
	text-align: center;
	transition: var(--transition-default);
}

.popup-theme .popup-theme_content .popup-theme_scrollbar .popup-theme_scrollbar__button {
	outline: none;
	box-shadow: none;
	border: 0;
	height: 50px;
	width: 4px;
	border-radius: 16px;
	background: #9e9e9e;
	padding: 0;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.popup-theme .popup-theme_content .popup-theme_heading .popup-theme_heading__title {
	font-size: 2em;
	font-weight: 800;
	line-height: 42px;
	color: var(--bs-white);
	font-style: italic;
	text-transform: uppercase;
}

.popup-theme .popup-theme_content .popup-theme_heading .popup-theme_heading__tabs {
	margin-bottom: 30px;
	margin-top: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
}

.popup-theme .popup-theme_content .popup-theme_heading .popup-theme_heading__tabs .popup-theme_heading__tabs___item {
	background: transparent;
	color: var(--bs-white);
	font-size: 1.15em;
	line-height: 30px;
	font-weight: 400;
	border: 0;
	border-bottom: 4px solid transparent;
	transition: var(--transition-default);
	border-radius: 0;
	padding: 4px 0;
}

.popup-theme .popup-theme_content .popup-theme_heading .popup-theme_heading__tabs .popup-theme_heading__tabs___item:hover,
.popup-theme .popup-theme_content .popup-theme_heading .popup-theme_heading__tabs .popup-theme_heading__tabs___item.active {
	border-bottom: 4px solid var(--primary-color);
	font-weight: 700;
}

.popup-theme .popup-theme_description {
	height: 100%;
	position: relative;
}

.popup-theme .popup-theme_description .popup-theme_description__inner {
	height: 100%;
	overflow-y: auto;
}

.popup-theme .popup-theme_description .popup-theme_description__inner::-webkit-scrollbar { display: none; }

.popup-theme .popup-theme_description .popup-theme_description__item .popup-theme_description__item___title {
	position: relative;
	display: flex;
	align-items: center;
	text-align: center;
	width: 100%;
	margin-bottom: 10px;
	font-size: 2em;
	font-weight: 800;
	line-height: 42px;
	white-space: nowrap;
}

.popup-theme .popup-theme_description .popup-theme_description__item .popup-theme_description__item___title:before {
	content: "";
	flex: 1;
	border-bottom: 1px solid var(--bs-white);
	margin: 0 30px 0 0;
}

.popup-theme .popup-theme_description .popup-theme_description__item .popup-theme_description__item___title:after {
	content: "";
	flex: 1;
	border-bottom: 1px solid var(--bs-white);
	margin: 0 0 0 30px;
}

.popup-theme .popup-theme_description .popup-theme_description__item .popup-theme_description__item___list____block {
	text-align: left;
	font-size: 1.15em;
	color: var(--bs-white);
	line-height: 24px;
}

.popup-theme .popup-theme_description .popup-theme_description__item .popup-theme_description__item___list____block img {
	height: 60vh;
}

.popup-theme .popup-theme_description .popup-theme_description__item .popup-theme_description__item___list____block p:last-child {
	margin-bottom: 0;
}