/* dh-compare R02 (LEAD131 27/10/2026, LO8T R03; sửa theo B3 vòng 1) — phối cảnh ↔ ảnh thật. Không JS / lệch khung: hai ảnh kề nhau (≥640px) hoặc xếp chồng.
   JS + cùng tỉ lệ (lệch ≤ 2%): thanh trượt. Tiền tố .dh-compare; không đổi phần tử ngoài module. */
.dh-compare{margin:28px 0}
.dh-compare__stage{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
@media (min-width:640px){.dh-compare__stage{grid-template-columns:1fr 1fr}}
.dh-compare__item{position:relative;margin:0;min-width:0}
.dh-compare__item img{display:block;width:100%!important;height:auto!important;max-width:100%;object-fit:contain;border-radius:8px;margin:0!important}
.dh-compare__tag{position:absolute;top:10px;left:10px;z-index:2;padding:4px 10px;border-radius:99px;background:rgba(38,51,40,.84);color:#fff;font-size:12px;font-weight:500;line-height:1.3;letter-spacing:.02em;pointer-events:none}
.dh-compare figcaption{margin-top:10px;font-size:.92em;line-height:1.6;color:var(--ink,#263328)}

/* Thanh trượt (JS bật, cùng tỉ lệ) */
.dh-compare.is-slider .dh-compare__stage{display:block;position:relative;aspect-ratio:var(--dh-ar,1.7778);overflow:hidden;border-radius:8px;touch-action:pan-y pinch-zoom;cursor:ew-resize;-webkit-user-select:none;user-select:none;background:var(--line,#c5c5b5)}
.dh-compare.is-slider .dh-compare__item{position:absolute;inset:0}
.dh-compare.is-slider .dh-compare__item img{height:100%!important;object-fit:cover;border-radius:0;-webkit-user-drag:none;pointer-events:none}
.dh-compare.is-slider .dh-compare__item--before{z-index:1;clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.dh-compare.is-slider .dh-compare__item--after .dh-compare__tag{left:auto;right:10px}
.dh-compare__handle{position:absolute;z-index:3;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.35);pointer-events:none}
.dh-compare__knob{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--green,#2e3c2d);border:2px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.3)}
.dh-compare__knob:before,.dh-compare__knob:after{content:"";position:absolute;top:50%;margin-top:-6px;border:6px solid transparent}
.dh-compare__knob:before{left:5px;border-right-color:#fff}
.dh-compare__knob:after{right:5px;border-left-color:#fff}
.dh-compare__range{position:absolute;z-index:0;left:0;bottom:0;width:100%;height:44px;margin:0;opacity:0;pointer-events:none}
.dh-compare__range:focus-visible~.dh-compare__handle .dh-compare__knob{outline:3px solid #c59f4c;outline-offset:3px}