/*
 * Showroom ảo 3D/360 (page-templates/showroom.php) — giao diện phủ trên cảnh 3D.
 * Toàn màn hình; điện thoại (≤ 760px): thanh công cụ ở đáy, bảng SP / tùy chỉnh dạng bottom sheet.
 */
body.ag-showroom-page {
	margin: 0;
	background: #0b0d10;
	color: #1d2329;
	font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
html.sr-html:has(.sr-ready), body.ag-showroom-page:has(.sr-ready) { overflow: hidden; height: 100%; overscroll-behavior: none; }
.sr { --sr-blue: #0060ef; --sr-text: #1d2329; --sr-muted: #6c7073; --sr-line: rgba(0, 0, 0, .08); --sr-glass: rgba(255, 255, 255, .9); --sr-top: 12px; --sr-r: 14px; }
.admin-bar .sr { --sr-top: 44px; }
@media (max-width: 782px) { .admin-bar .sr { --sr-top: 58px; } }
.sr *, .sr *::before, .sr *::after { box-sizing: border-box; }
:where(.sr) button, :where(.sr) a { font: inherit; color: inherit; letter-spacing: 0; text-transform: none; }
:where(.sr) button { margin: 0; min-height: 0; line-height: 1.3; background: none; border: 0; cursor: pointer; padding: 0; box-shadow: none; }
.sr button:focus-visible, .sr a:focus-visible, .sr input:focus-visible { outline: 2px solid var(--sr-blue); outline-offset: 2px; }
:where(.sr) :is(h2, h3, p, ul, dl, dd) { margin: 0; padding: 0; }
:where(.sr) ul { list-style: none; }
.sr .sr-i { width: 20px; height: 20px; flex: 0 0 auto; display: block; }
.sr [hidden] { display: none !important; }

.sr.sr-ready { position: fixed; inset: 0; overflow: hidden; background: #0b0d10; z-index: 1; }
.sr-ready .sr-fallback { display: none; }
.sr-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; touch-action: none; outline: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
.sr-canvas.is-dragging { cursor: grabbing; }

/* ---------- Màn hình tải / chào ---------- */
.sr-loader { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; color: #fff; background: radial-gradient(120% 90% at 50% 0%, #1d2a3d 0%, #0b0d10 62%), #0b0d10; transition: opacity .5s ease, visibility .5s; overflow-y: auto; }
.sr-loader.is-out { opacity: 0; visibility: hidden; }
.sr-loader__box { width: min(720px, 100%); text-align: center; }
.sr-loader__brand { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin: 0 0 10px; }
.sr-loader__title { font-size: clamp(30px, 5vw, 48px); line-height: 1.15; font-weight: 700; margin: 0 0 18px; color: #fff; }
.sr-loader__status { color: rgba(255, 255, 255, .7); font-size: 15px; margin: 0 0 14px; }
.sr-loader__bar { width: min(320px, 80%); height: 4px; margin: 0 auto; border-radius: 4px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.sr-loader__bar span { display: block; height: 100%; width: 4%; background: var(--sr-blue); border-radius: 4px; transition: width .3s ease; }
.sr-start__tag { color: rgba(255, 255, 255, .72); font-size: 16px; margin: -6px 0 20px; }
.sr-start__lang { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); margin-bottom: 22px; }
.sr-start__lang button { padding: 6px 14px; border-radius: 999px; font-size: 13px; color: rgba(255, 255, 255, .8); }
.sr-start__lang button[aria-pressed="true"] { background: #fff; color: #111; font-weight: 600; }
.sr-start__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.sr-start__opt { display: grid; justify-items: center; gap: 6px; padding: 20px 16px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14) !important; color: #fff; text-align: center; transition: background .2s, transform .2s; }
.sr-start__opt:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }
.sr-start__opt .sr-i { width: 30px; height: 30px; margin-bottom: 4px; }
.sr-start__opt b { font-size: 17px; font-weight: 700; }
.sr-start__opt small { font-size: 13px; color: rgba(255, 255, 255, .68); line-height: 1.4; }
.sr-start__opt--main { background: var(--sr-blue); border-color: var(--sr-blue) !important; }
.sr-start__opt--main:hover { background: #1a73ff; }
.sr-start__opt--main small { color: rgba(255, 255, 255, .85); }
.sr-start__note { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .55); }
.sr-start__note .sr-i { width: 16px; height: 16px; }

/* ---------- Khung UI ---------- */
.sr-ui { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; }
.sr-started .sr-ui { opacity: 1; }
.sr-ui > * { pointer-events: auto; }
.sr-xr .sr-ui { display: none; }
.sr-glass, .sr-brand, .sr-zone, .sr-actions, .sr-minimap, .sr-zonebar, .sr-guide, .sr-tourbar, .sr-tcard {
	background: var(--sr-glass);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
}
.sr-top { position: absolute; top: var(--sr-top); left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.sr-top > * { pointer-events: auto; }
.sr-brand { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 12px; border-radius: 999px; text-decoration: none; color: var(--sr-text); flex: 0 0 auto; }
.sr-brand img { height: 26px; width: auto; max-width: 110px; object-fit: contain; display: block; }
.sr-brand__t { font-weight: 700; font-size: 15px; white-space: nowrap; padding-left: 10px; border-left: 1px solid var(--sr-line); }
.sr-zone { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; min-width: 0; max-width: 34vw; }
.sr-zone__dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(0, 96, 239, .14); }
.sr-zone__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; }
.sr-act { position: relative; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--sr-text); text-decoration: none; white-space: nowrap; transition: background .15s; }
.sr-act:hover { background: rgba(0, 0, 0, .06); }
.sr-act[aria-pressed="true"] { color: var(--sr-blue); }
.sr-act[data-act="tour"][aria-pressed="true"] { background: var(--sr-blue); color: #fff; }
.sr-act__lang { font-weight: 700; }
/* Tooltip (thanh công cụ, thanh tour, phụ đề): hiện ngay khi rê chuột / chọn bằng bàn phím; thiết bị cảm ứng không dùng. */
.sr [data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 10px); z-index: 40; transform: translate(-50%, -4px); padding: 7px 11px; border-radius: 8px; background: rgba(16, 18, 22, .92); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s, transform .12s; }
.sr [data-tip]:hover::after, .sr [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.sr-actions > [data-tip]:nth-last-child(-n+2)::after { left: auto; right: 0; transform: translate(0, -4px); }
.sr-actions > [data-tip]:nth-last-child(-n+2):hover::after, .sr-actions > [data-tip]:nth-last-child(-n+2):focus-visible::after { transform: none; }
.sr-tourbar [data-tip]::after, .sr-guide [data-tip]::after { top: auto; bottom: calc(100% + 10px); transform: translate(-50%, 4px); }
.sr-guide__ctrl [data-tip]::after { left: auto; right: 0; transform: translate(0, 4px); }
.sr-guide__ctrl [data-tip]:hover::after { transform: none; }
.sr-act, .sr-ibtn { position: relative; }
@media (hover: none), (max-width: 760px) { .sr [data-tip]::after { display: none; } }
.sr-badge { position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #e02020; color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700; }
@media (max-width: 1680px) and (min-width: 761px) {
	.sr-act span:not(.sr-act__lang):not(.sr-badge) { display: none; }
	.sr-act { padding: 0 10px; }
}

.sr-ibtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--sr-text); transition: background .15s; flex: 0 0 auto; }
.sr-ibtn:hover { background: rgba(0, 0, 0, .07); }
.sr-ibtn--main { background: var(--sr-blue); color: #fff; width: 42px; height: 42px; }
.sr-ibtn--main:hover { background: #1a73ff; }
.sr-ibtn[aria-pressed="true"] { background: var(--sr-blue); color: #fff; }

.sr-minimap { position: absolute; left: 12px; bottom: 12px; padding: 6px; border-radius: 12px; line-height: 0; }
.sr-minimap canvas { width: 110px; height: 208px; display: block; }
.sr-zonebar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; border-radius: 999px; max-width: calc(100% - 300px); overflow-x: auto; scrollbar-width: none; }
.sr-zonebar::-webkit-scrollbar { display: none; }
/* Còn khu bị khuất ở mép → mờ dần mép đó (gợi ý cuộn ngang). */
.sr-zonebar.is-fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.sr-zonebar.is-fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.sr-zonebar.is-fade-l.is-fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.sr-zonebar button { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--sr-text); }
.sr-zonebar button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.sr-zonebar button:hover { background: rgba(0, 0, 0, .06); }
.sr-zonebar button.is-on { background: #1d2329; color: #fff; }
.sr-touring .sr-zonebar, .sr-panel-open .sr-zonebar { display: none; }
@media (min-width: 761px) {
	.sr-panel-open .sr-guide { left: calc((100% - 484px) / 2); width: min(560px, calc(100% - 640px)); }
	.sr-panel-open .sr-tourbar { left: calc((100% - 484px) / 2); width: min(520px, calc(100% - 640px)); }
	.sr-panel-open .sr-tcard { display: none; }
}

.sr-hint { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: min(820px, calc(100% - 24px)); pointer-events: none !important; transition: opacity .5s; }
.sr-hint span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(16, 18, 22, .78); color: #fff; font-size: 13px; }
.sr-hint.is-out { opacity: 0; }

/* ---------- Toàn cảnh bên ngoài ---------- */
.sr-ovbar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 8px; border-radius: 999px; background: var(--sr-glass); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 6px 24px rgba(0, 0, 0, .14); }
.sr-ovbar__seg { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .06); }
.sr-ovbar__seg button { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--sr-muted); }
.sr-ovbar__seg button.is-on { background: #fff; color: var(--sr-text); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.sr-ovbar__seg .sr-i { width: 18px; height: 18px; }
.sr-ovbar__hint { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: rgba(16, 18, 22, .78); color: #fff; font-size: 13px; pointer-events: none; }
.sr-overview .sr-zonebar, .sr-overview .sr-hint, .sr-overview .sr-guide, .sr-overview .sr-tourbar, .sr-overview .sr-tcard { display: none !important; }
.sr-overview .sr-canvas { cursor: grab; }
@media (max-width: 760px) {
	.sr-ovbar { bottom: calc(70px + env(safe-area-inset-bottom)); width: calc(100% - 16px); border-radius: 18px; }
	.sr-ovbar__hint { display: none; }
}

/* ---------- Bảng Nhạc nền (công tắc + âm lượng) ---------- */
.sr-pop { position: fixed; z-index: 30; width: 260px; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 10px 36px rgba(0, 0, 0, .22); display: grid; gap: 10px; }
.sr-pop__row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.sr-switch { position: relative; width: 44px; height: 26px; border-radius: 13px !important; background: #c9cdd2 !important; transition: background .2s; }
.sr-switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.sr-switch[aria-checked="true"] { background: var(--sr-blue) !important; }
.sr-switch[aria-checked="true"] i { transform: translateX(18px); }
.sr-pop__vol { display: flex; align-items: center; gap: 10px; color: var(--sr-muted); }
.sr-pop__vol input { flex: 1 1 auto; min-width: 0; accent-color: var(--sr-blue); margin: 0; height: 24px; }
.sr-pop__vol output { width: 38px; text-align: right; font-size: 13px; font-weight: 600; color: var(--sr-text); }
.sr-pop__note { font-size: 12px; color: var(--sr-muted); line-height: 1.4; }
.sr-pop__tracks { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid var(--sr-line); }
.sr-pop__tracks button { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 13px; text-align: left; }
.sr-pop__tracks button:hover { background: #f3f4f6; }
.sr-pop__tracks i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #c9cdd2; flex: 0 0 auto; }
.sr-pop__tracks [aria-checked="true"] { font-weight: 600; color: var(--sr-blue); }
.sr-pop__tracks [aria-checked="true"] i { border: 5px solid var(--sr-blue); }

/* ---------- Gợi ý rê chuột, thông báo ---------- */
.sr-tip { position: fixed; left: 0; top: 0; z-index: 30; display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: rgba(16, 18, 22, .9); color: #fff; font-size: 13px; pointer-events: none !important; max-width: 280px; }
.sr-tip b { font-size: 14px; }
.sr-tip span { color: rgba(255, 255, 255, .78); }
.sr-tip em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 11px; font-weight: 700; color: #5fb4ff; }
.sr-tip em .sr-i { width: 14px; height: 14px; }
.sr-toast { position: absolute; left: 50%; top: calc(var(--sr-top) + 60px); transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: rgba(16, 18, 22, .92); color: #fff; font-size: 14px; max-width: calc(100% - 32px); transition: opacity .4s; }
.sr-toast a { color: #5fb4ff; font-weight: 600; }
.sr-toast.is-out { opacity: 0; }

/* ---------- Hướng dẫn viên ---------- */
.sr-guide { position: absolute; left: 50%; bottom: 66px; z-index: 5; display: flex; align-items: flex-start; gap: 12px; width: min(620px, calc(100% - 300px)); padding: 12px 10px 12px 14px; border-radius: 16px; transform: translate(-50%, 12px); opacity: 0; transition: opacity .3s, transform .3s; }
.sr-guide.is-open { opacity: 1; transform: translate(-50%, 0); }
.sr-guide__avatar { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; position: relative; }
.sr-guide__avatar svg { width: 100%; height: 100%; display: block; }
.sr-guide.is-speaking .sr-guide__avatar::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--sr-blue); animation: sr-pulse 1.4s ease-out infinite; }
@keyframes sr-pulse { from { opacity: .9; transform: scale(.92); } to { opacity: 0; transform: scale(1.22); } }
.sr-guide__body { flex: 1 1 auto; min-width: 0; }
.sr-guide__name { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sr-blue); }
.sr-guide__title { font-size: 15px; font-weight: 700; margin-top: 2px !important; }
.sr-guide__text { font-size: 14px; line-height: 1.5; color: #3b3e40; margin-top: 4px !important; max-height: 6em; overflow-y: auto; }
.sr-guide__ctrl { display: flex; flex-direction: column; gap: 2px; }
.sr-guide__link { display: inline; padding: 0; line-height: inherit; color: var(--sr-blue); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(0, 96, 239, .35); text-underline-offset: 2px; cursor: pointer; }
.sr-guide__link:hover { text-decoration-color: currentColor; }
.sr-guide__min .sr-i + .sr-i, .sr-guide.is-min .sr-guide__min .sr-i:first-child { display: none; }
.sr-guide.is-min .sr-guide__min .sr-i + .sr-i { display: block; }
/* Thu gọn: một dòng — hình hướng dẫn viên, tiêu đề (không có thì tên), nút mở rộng / tắt; bấm vào hộp để mở lại. */
.sr-guide.is-min { width: max-content; max-width: min(420px, calc(100% - 24px)); align-items: center; gap: 8px; padding: 5px 6px; border-radius: 999px; cursor: pointer; }
.sr-guide.is-min .sr-guide__avatar { width: 32px; height: 32px; }
.sr-guide.is-min .sr-guide__text, .sr-guide.is-min [data-guide="replay"] { display: none; }
.sr-guide.is-min .sr-guide__body:has(.sr-guide__title:not(:empty)) .sr-guide__name { display: none; }
.sr-guide.is-min :is(.sr-guide__name, .sr-guide__title) { margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-guide.is-min .sr-guide__title { font-size: 14px; }
.sr-guide.is-min .sr-guide__ctrl { flex-direction: row; }
.sr-guide.is-min .sr-ibtn { width: 32px; height: 32px; }

/* ---------- Tour ---------- */
.sr-tourbar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; width: min(560px, calc(100% - 300px)); }
.sr-tourbar__info { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; padding: 0 8px; }
.sr-tourbar__step { font-size: 11px; color: var(--sr-muted); font-weight: 600; }
.sr-tourbar__title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-tourbar__bar { height: 3px; border-radius: 3px; background: rgba(0, 0, 0, .08); overflow: hidden; margin-top: 3px; }
.sr-tourbar__bar span { display: block; height: 100%; background: var(--sr-blue); transition: width .4s; }
.sr-touring .sr-guide { bottom: 76px; }
.sr-tcard { position: absolute; right: 12px; bottom: 12px; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; max-width: 360px; }
.sr-tcard img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: #fff; }
.sr-tcard div { display: grid; gap: 2px; min-width: 0; }
.sr-tcard b { font-size: 14px; }
.sr-tcard span { font-size: 13px; color: var(--sr-blue); font-weight: 600; }

/* ---------- Nút ---------- */
.sr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; border: 1px solid transparent !important; }
.sr-btn .sr-i { width: 18px; height: 18px; }
.sr-btn--primary { background: var(--sr-blue) !important; color: #fff !important; }
.sr-btn--primary:hover { background: #1a73ff !important; }
.sr-btn--dark { background: #1d2329 !important; color: #fff !important; }
.sr-btn--ghost { border-color: rgba(0, 0, 0, .16) !important; color: var(--sr-text) !important; background: #fff; }
.sr-btn--ghost:hover { border-color: rgba(0, 0, 0, .4) !important; }
.sr-btn:disabled { opacity: .6; cursor: wait; }

/* ---------- Bảng sản phẩm ---------- */
.sr-panel { position: absolute; z-index: 20; top: calc(var(--sr-top) + 56px); right: 12px; bottom: 12px; width: min(460px, calc(100% - 24px)); background: #fff; border-radius: 18px; box-shadow: 0 12px 48px rgba(0, 0, 0, .28); overflow-y: auto; overscroll-behavior: contain; transform: translateX(calc(100% + 24px)); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.sr-panel.is-open { transform: none; }
.sr-panel__head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sr-panel__zone { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--sr-muted); text-transform: uppercase; letter-spacing: .04em; }
.sr-panel__zone::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.sr-panel__media { padding: 0 12px; }
.sr-stage { position: relative; aspect-ratio: 1 / 1; max-height: 52vh; width: 100%; border-radius: 14px; overflow: hidden; background: radial-gradient(90% 80% at 50% 40%, #ffffff 0%, #eceef1 100%); }
.sr-stage--video { aspect-ratio: auto; background: transparent; max-height: none; border-radius: 0; overflow: visible; }
.sr-stage--spin { background: #0e0f11; }
.sr-stage--spin .sr-stage__hint { color: rgba(255, 255, 255, .7); }
.sr-stage--spin .sr-viewer__spin { background: #0e0f11; }
.sr-viewer { position: absolute; inset: 0; touch-action: none; }
.sr-viewer.is-dragging { cursor: grabbing; }
.sr-viewer__canvas { width: 100% !important; height: 100% !important; display: block; cursor: grab; }
.sr-viewer__spin { width: 100%; height: 100%; object-fit: contain; display: block; cursor: ew-resize; touch-action: pan-y; background: #fff; }
.sr-stage__state { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--sr-muted); pointer-events: none; }
.sr-stage__hint { position: absolute; left: 12px; bottom: 10px; font-size: 12px; color: var(--sr-muted); pointer-events: none; }
.sr-variants { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .1); max-width: calc(100% - 24px); }
.sr-variants button { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sr-variants button.is-on { background: #1d2329; color: #fff; }
/* Danh sách video: dải ảnh bìa nhỏ (vuốt ngang, không hiện thanh cuộn), video đang xem viền xanh. */
.sr-stage--video .sr-video { border-radius: 14px; }
.sr-vlist { display: flex; gap: 10px; margin: 10px -12px 0; padding: 2px 12px 4px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 12px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent); }
.sr-vlist::-webkit-scrollbar { display: none; }
.sr-vthumb { flex: 0 0 118px; display: grid; gap: 6px; padding: 0; text-align: left; scroll-snap-align: start; color: var(--sr-muted); }
.sr-vthumb__img { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #2a2f36, #14171b); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s; }
.sr-vthumb__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr-vthumb__img .sr-i { position: absolute; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; stroke: none; }
.sr-vthumb__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; font-weight: 600; line-height: 1.3; }
.sr-vthumb:hover .sr-vthumb__t { color: var(--sr-text); }
.sr-vthumb.is-on { color: var(--sr-text); }
.sr-vthumb.is-on .sr-vthumb__img { box-shadow: inset 0 0 0 2px var(--sr-blue), 0 0 0 1px var(--sr-blue); }
.sr-vthumb.is-on .sr-vthumb__img .sr-i { background: var(--sr-blue); }
.sr-vthumb:focus-visible { outline: none; }
.sr-vthumb:focus-visible .sr-vthumb__img { box-shadow: 0 0 0 3px rgba(0, 96, 239, .45); }
.sr-vtools { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .1); }
.sr-vtools .sr-ibtn { width: 34px; height: 34px; }
.sr-gal { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; }
.sr-gal__img { width: 100%; height: 100%; min-height: 0; object-fit: contain; display: block; padding: 18px; user-select: none; -webkit-user-drag: none; }
/* Ảnh dịch vụ thường có chữ in trong ảnh: hiện trọn ảnh theo đúng tỉ lệ, không cắt. */
.sr-svc__img { display: block; width: 100%; height: auto; max-height: 52vh; object-fit: contain; border-radius: 14px; background: #eef0f2; }
.sr-svc__media { position: relative; }
/* Toàn màn hình (ảnh / video / 3D / 360°): nút góc trên phải; .is-full = Fullscreen API hoặc phủ kín bằng CSS (iPhone). */
.sr-fullbtn { position: absolute; top: 10px; right: 10px; z-index: 4; width: 36px; height: 36px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.sr-stage--3d .sr-vtools { top: calc(50% + 22px); }
.sr-media-full .sr-panel { z-index: 1000; }
.is-full { position: fixed !important; inset: 0; z-index: 1000; width: 100% !important; height: 100% !important; max-height: none !important; aspect-ratio: auto !important; margin: 0; border-radius: 0 !important; }
.is-full .sr-fullbtn { top: calc(14px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); width: 42px; height: 42px; }
.sr-stage--photos.is-full { background: #fff; }
.sr-stage--photos.is-full .sr-gal__img { padding: calc(56px + env(safe-area-inset-top)) 72px 12px; }
.sr-stage--photos.is-full .sr-gal__thumbs { justify-content: center; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.sr-stage--photos.is-full .sr-gal__thumbs button { flex-basis: 64px; height: 64px; }
.sr-stage--photos.is-full .sr-gal__nav--prev { left: 18px; }
.sr-stage--photos.is-full .sr-gal__nav--next { right: 18px; }
.sr-stage--video.is-full { display: flex; flex-direction: column; justify-content: center; gap: 12px; background: #000; padding: calc(64px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom)); }
.sr-stage--video.is-full .sr-video { flex: 1 1 auto; min-height: 0; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 0; }
.sr-stage--video.is-full .sr-vlist { flex: none; margin: 0 auto; max-width: 100%; }
.sr-stage--video.is-full .sr-vthumb { flex-basis: 150px; color: rgba(255, 255, 255, .6); }
.sr-stage--video.is-full .sr-vthumb.is-on, .sr-stage--video.is-full .sr-vthumb:hover .sr-vthumb__t { color: #fff; }
.sr-svc__media.is-full { display: grid; place-items: center; background: #0e0f11; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.sr-svc__media.is-full .sr-svc__img { width: auto; max-width: 100%; height: auto; max-height: 100%; border-radius: 0; background: none; }
.sr-gal__nav { position: absolute; top: calc(50% - 40px); background: rgba(255, 255, 255, .9); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.sr-gal__nav--prev { left: 8px; }
.sr-gal__nav--next { right: 8px; }
.sr-gal__thumbs { display: flex; gap: 6px; padding: 8px; overflow-x: auto; scrollbar-width: none; }
.sr-gal__thumbs button { flex: 0 0 52px; height: 52px; border-radius: 8px; overflow: hidden; background: #fff; border: 2px solid transparent !important; }
.sr-gal__thumbs button.is-on { border-color: var(--sr-blue) !important; }
.sr-gal__thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sr-video { width: 100%; display: block; aspect-ratio: 16 / 9; background: #000; }
.sr-tabs { display: flex; gap: 4px; margin: 10px 0 0; padding: 4px; border-radius: 999px; background: #f3f4f6; }
.sr-tabs button { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--sr-muted); }
.sr-tabs button .sr-i { width: 17px; height: 17px; }
.sr-tabs button[aria-selected="true"] { background: #fff; color: var(--sr-text); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.sr-panel__body { padding: 18px 20px 22px; display: grid; gap: 12px; }
.sr-panel__series { font-size: 12px; font-weight: 600; color: var(--sr-muted); }
.sr-panel__name { font-size: 24px; line-height: 1.25; font-weight: 700; margin-top: -8px !important; }
.sr-panel__series + .sr-panel__name { margin-top: -10px !important; }
.sr-panel__tagline { font-size: 15px; color: #3b3e40; font-style: italic; margin-top: -4px !important; }
.sr-panel__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.sr-panel__price > span { font-size: 22px; font-weight: 700; color: var(--sr-text); }
.sr-panel__price > span.is-quote { font-size: 17px; color: var(--sr-muted); }
.sr-panel__price del { color: var(--sr-muted); font-size: 14px; }
.sr-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; background: #fff2e8; color: #c2570c; }
.sr-tag--moi { background: #eef3fe; color: var(--sr-blue); }
.sr-tag--het-hang { background: #f3f4f6; color: var(--sr-muted); }
.sr-panel__cta { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-panel__cta .sr-btn { flex: 1 1 auto; }
.sr-panel__short { font-size: 14px; line-height: 1.65; color: #3b3e40; }
.sr-listen { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px !important; border-radius: 999px; background: #eef3fe !important; color: var(--sr-blue) !important; font-size: 13px; font-weight: 600; }
.sr-listen .sr-i { width: 18px; height: 18px; }
.sr-panel__body h3 { font-size: 15px; font-weight: 700; margin-top: 6px !important; }
.sr-points { display: grid; gap: 8px; }
.sr-points li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.5; }
.sr-points li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 2px solid var(--sr-blue); border-bottom: 2px solid var(--sr-blue); transform: rotate(-45deg); }
.sr-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: 12px; overflow: hidden; background: var(--sr-line); }
.sr-specs div { background: #f7f9fa; padding: 10px 12px; display: grid; gap: 2px; }
.sr-specs dt { font-size: 12px; color: var(--sr-muted); }
.sr-specs dd { font-size: 14px; font-weight: 600; }
.sr-panel__contact { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 12px; border-top: 1px solid var(--sr-line); }
.sr-panel__contact a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--sr-text); text-decoration: none; }
.sr-panel__contact a:hover { color: var(--sr-blue); }
.sr-zalo { display: inline-grid; place-items: center; height: 22px; padding: 0 6px; border-radius: 6px; background: #0068ff; color: #fff; font-size: 11px; font-weight: 700; }

/* ---------- Bản đồ ---------- */
.sr-map, .sr-modal { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; padding: calc(var(--sr-top) + 8px) 16px 16px; background: rgba(8, 10, 14, .5); }
.sr-map__card { width: min(1120px, 100%); max-height: 100%; overflow-y: auto; background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.sr-map__head, .sr-custom__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 14px 22px; background: #fff; border-bottom: 1px solid var(--sr-line); }
.sr-map__head h2, .sr-custom__head h2 { font-size: 18px; font-weight: 700; }
.sr-map__grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; min-height: 440px; }
.sr-map__side { border-right: 1px solid var(--sr-line); padding: 14px; display: grid; grid-template-rows: auto 1fr; gap: 10px; min-height: 0; }
.sr-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 999px; background: #f3f4f6; color: var(--sr-muted); }
.sr-search input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0 !important; background: none !important; box-shadow: none !important; font: inherit; font-size: 14px; color: var(--sr-text); padding: 0 !important; margin: 0; outline: none; }
.sr-map__list { overflow-y: auto; max-height: 60vh; display: grid; gap: 6px; align-content: start; }
.sr-mz__head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px; border-radius: 10px; text-align: left; }
.sr-mz__head:hover { background: #f3f4f6; }
.sr-mz__head i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.sr-mz__head b { flex: 1 1 auto; font-size: 14px; }
.sr-mz__head small { font-size: 12px; color: var(--sr-muted); }
.sr-mz ul { display: grid; gap: 2px; padding: 0 0 6px 18px; }
.sr-mz li button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 8px; text-align: left; }
.sr-mz li button:hover { background: #f3f4f6; }
.sr-mz li img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--sr-line); flex: 0 0 auto; }
.sr-mz li span { display: grid; flex: 1 1 auto; min-width: 0; }
.sr-mz li b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-mz li small { font-size: 12px; color: var(--sr-muted); }
.sr-mz li em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--sr-blue); background: #eef3fe; padding: 2px 6px; border-radius: 4px; }
.sr-map__empty { padding: 20px; text-align: center; color: var(--sr-muted); font-size: 14px; }
.sr-map__plan { position: relative; padding: 16px; display: grid; place-items: center; min-height: 420px; }
.sr-map__plan canvas { display: block; max-width: 100%; }
.sr-map__me { position: absolute; left: 20px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sr-muted); }
.sr-map__me i { width: 10px; height: 10px; border-radius: 50%; background: var(--sr-blue); box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 96, 239, .3); }
.sr-map__dir { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 18px; padding: 18px 22px 22px; border-top: 1px solid var(--sr-line); }
.sr-map__dir h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; margin-bottom: 8px !important; }
.sr-map__dir p { font-size: 14px; color: #3b3e40; line-height: 1.55; }
.sr-map__dir-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px !important; }
.sr-map__frame { min-height: 240px; border-radius: 12px; overflow: hidden; background: #eef0f2; }
.sr-map__frame iframe { width: 100%; height: 100%; min-height: 240px; border: 0; display: block; }

/* ---------- Tùy chỉnh ---------- */
.sr-custom { position: absolute; z-index: 20; top: calc(var(--sr-top) + 56px); left: 12px; width: min(360px, calc(100% - 24px)); max-height: calc(100% - var(--sr-top) - 80px); overflow-y: auto; background: #fff; border-radius: 18px; box-shadow: 0 12px 48px rgba(0, 0, 0, .25); transform: translateX(calc(-100% - 24px)); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.sr-custom.is-open { transform: none; }
.sr-custom__body { padding: 14px 18px 18px; display: grid; gap: 10px; }
.sr-custom__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sr-muted); margin-top: 6px !important; }
.sr-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: #f3f4f6; }
.sr-seg--3 { grid-template-columns: repeat(3, 1fr); }
.sr-seg--4 { grid-template-columns: repeat(4, 1fr); }
.sr-seg--4 button { padding: 8px 4px; font-size: 12.5px; }
.sr-custom__hint { font-size: 12px; line-height: 1.45; color: var(--sr-muted); margin-top: -2px !important; }
.sr-seg button { padding: 8px 8px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--sr-muted); text-align: center; }
.sr-seg button[aria-pressed="true"] { background: #fff; color: var(--sr-text); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.sr-seg b { font-weight: 700; }
.sr-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sr-sw { display: grid; gap: 4px; justify-items: center; text-align: center; font-size: 11px; line-height: 1.3; color: #3b3e40; }
.sr-sw img { width: 100%; aspect-ratio: 1; height: auto; border-radius: 10px; display: block; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--sr-line); }
.sr-sw.is-on img { border-color: var(--sr-blue); box-shadow: 0 0 0 2px rgba(0, 96, 239, .25); }
.sr-sw.is-on span { color: var(--sr-blue); font-weight: 700; }
.sr-custom__foot { display: grid; gap: 8px; margin-top: 8px; }

/* ---------- Hộp thoại ---------- */
.sr-modal__card { position: relative; width: min(980px, 100%); max-height: 100%; overflow-y: auto; background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.sr-modal__close { position: absolute; top: 8px; right: 8px; z-index: 2; background: rgba(255, 255, 255, .92); }
.sr-modal--video .sr-modal__card { background: #000; color: #fff; }
.sr-modal--video .sr-modal__close { color: #111; }
.sr-modal__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.sr-modal__cap { padding: 12px 18px; font-size: 14px; }
.sr-pano { width: 100%; aspect-ratio: 16 / 9; position: relative; }
.sr-pano canvas { position: absolute; inset: 0; cursor: grab; }
.sr-modal--help .sr-modal__card { width: min(560px, 100%); }
.sr-modal--help .sr-modal__body { padding: 24px 26px 26px; }
.sr-modal--help h2 { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.sr-help { display: grid; gap: 12px; }
.sr-help li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; }
.sr-help .sr-i { color: var(--sr-blue); margin-top: 1px; }
.sr-help__pano { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ---------- Danh sách SP khi không có WebGL / cho máy tìm kiếm ---------- */
.sr-fallback { max-width: 1100px; margin: 0 auto; padding: 32px 20px 60px; background: #fff; color: #1d2329; min-height: 100vh; }
.sr-fallback__home { color: #0060ef; text-decoration: none; font-size: 14px; }
.sr-fallback h1 { font-size: 32px; margin: 12px 0; }
.sr-fallback__note { padding: 12px 16px; border-radius: 10px; background: #fff7e6; margin: 16px 0; }
.sr-fallback__zone { margin-top: 36px; }
.sr-fallback__zone h2 { font-size: 22px; margin-bottom: 8px; }
.sr-fallback__zone > p { color: #555; line-height: 1.6; }
.sr-fallback__zone ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.sr-fallback__zone a { display: grid; gap: 8px; text-decoration: none; color: inherit; font-size: 14px; font-weight: 600; }
.sr-fallback__zone img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #f5f5f5; border-radius: 10px; }

/* ---------- Điện thoại ---------- */
@media (max-width: 760px) {
	.sr-top { left: 8px; right: 8px; gap: 6px; }
	.sr-brand { height: 40px; padding: 0 12px 0 10px; }
	.sr-brand img { height: 22px; max-width: 84px; }
	.sr-brand__t { display: none; }
	.sr-zone { height: 40px; font-size: 13px; padding: 0 12px; max-width: none; flex: 1 1 auto; }
	.sr-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; margin: 0; border-radius: 16px 16px 0 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); justify-content: space-around; gap: 0; overflow-x: auto; scrollbar-width: none; }
	.sr-act { flex: 0 0 auto; flex-direction: column; justify-content: center; height: 52px; gap: 2px; padding: 0 6px; font-size: 10px; border-radius: 10px; min-width: 64px; }
	.sr-actions { justify-content: flex-start; }
	.sr-act--desk { display: none; }
	.sr-act span:not(.sr-badge) { display: block; }
	.sr-minimap, .sr-zonebar { display: none; }
	.sr-hint { bottom: auto; top: calc(var(--sr-top) + 52px); }
	.sr-hint span { font-size: 12px; padding: 8px 12px; }
	.sr-guide { width: calc(100% - 16px); bottom: calc(68px + env(safe-area-inset-bottom)); padding: 10px; }
	.sr-fab { transition: bottom .25s; }
	.sr-guide-on .sr-fab { bottom: calc(78px + var(--sr-guide-h, 110px) + env(safe-area-inset-bottom)); }
	.sr-touring.sr-guide-on .sr-fab { bottom: calc(138px + var(--sr-guide-h, 110px) + env(safe-area-inset-bottom)); }
	.sr-guide__text { font-size: 13px; max-height: 4.6em; }
	.sr-touring .sr-guide { bottom: calc(128px + env(safe-area-inset-bottom)); }
	.sr-tourbar { width: calc(100% - 16px); bottom: calc(66px + env(safe-area-inset-bottom)); }
	.sr-tcard { left: 8px; right: 8px; top: calc(var(--sr-top) + 48px); bottom: auto; max-width: none; padding: 8px; }
	.sr-tcard .sr-btn { height: 36px; padding: 0 12px; font-size: 13px; }
	.sr-toast { top: auto; bottom: calc(140px + env(safe-area-inset-bottom)); font-size: 13px; }
	.sr-panel, .sr-custom { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 88%; border-radius: 18px 18px 0 0; transform: translateY(105%); z-index: 22; padding-bottom: env(safe-area-inset-bottom); }
	.sr-panel.is-open, .sr-custom.is-open { transform: none; }
	.sr-stage { aspect-ratio: 4 / 3.4; max-height: 42vh; }
	.sr-svc__img { max-height: 42vh; }
	.sr-panel__name { font-size: 20px; }
	.sr-map, .sr-modal { padding: calc(var(--sr-top) - 4px) 0 0; place-items: end stretch; }
	.sr-map__card, .sr-modal__card { border-radius: 18px 18px 0 0; max-height: 100%; }
	.sr-map__grid, .sr-map__dir { grid-template-columns: 1fr; }
	.sr-map__side { border-right: 0; border-bottom: 1px solid var(--sr-line); }
	.sr-map__list { max-height: 38vh; }
	.sr-map__plan { min-height: 300px; }
	.sr-swatches { grid-template-columns: repeat(4, 1fr); }
	.sr-start__opts { grid-template-columns: 1fr; }
	.sr-start__opt { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 14px; padding: 14px 16px; }
	.sr-start__opt .sr-i { grid-row: span 2; margin: 0; align-self: center; }
}
/* ---------- Trợ lý ảo (assistant.js) ---------- */
.sr-fab { position: absolute; right: 14px; bottom: 14px; z-index: 18; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 13px; border-radius: 999px; background: linear-gradient(135deg, #0a6cff, #0050d0); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 8px 26px rgba(0, 80, 208, .45); transition: transform .2s, box-shadow .2s; }
.sr-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 80, 208, .5); }
.sr-fab::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; border: 2px solid rgba(10, 108, 255, .45); animation: sr-pulse 2.4s ease-out infinite; pointer-events: none; }
.sr-chat-open .sr-fab, .sr-touring .sr-fab, .sr-overview .sr-fab { display: none; }
.sr-chat-open .sr-zonebar { left: calc((100% - 420px) / 2); max-width: calc(100% - 580px); }
.sr-chat-open .sr-guide, .sr-chat-open .sr-hint { display: none; }
.sr-chat { position: absolute; right: 12px; bottom: 12px; z-index: 21; display: flex; flex-direction: column; width: min(400px, calc(100% - 24px)); height: min(640px, calc(100% - var(--sr-top) - 72px)); background: #fff; border-radius: 18px; box-shadow: 0 14px 50px rgba(0, 0, 0, .3); overflow: hidden; opacity: 0; transform: translateY(16px) scale(.98); transform-origin: bottom right; transition: opacity .22s, transform .22s cubic-bezier(.2, .8, .2, 1), left .3s, right .3s; }
.sr-chat.is-open { opacity: 1; transform: none; }
@media (min-width: 761px) { .sr-panel-open .sr-chat { right: auto; left: 12px; transform-origin: bottom left; } }
.sr-chat__head { display: flex; align-items: center; gap: 10px; padding: 12px 8px 12px 14px; border-bottom: 1px solid var(--sr-line); }
.sr-chat__av { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #0a6cff, #0050d0); color: #fff; position: relative; }
.sr-chat.is-speaking .sr-chat__head .sr-chat__av::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--sr-blue); animation: sr-pulse 1.4s ease-out infinite; }
.sr-chat__who { flex: 1 1 auto; min-width: 0; display: grid; }
.sr-chat__who b { font-size: 15px; color: var(--sr-text); }
.sr-chat__who small { font-size: 12px; color: var(--sr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-chat__log { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; background: #f6f7f9; }
.sr-msg { max-width: 88%; font-size: 14px; line-height: 1.5; color: var(--sr-text); position: relative; }
.sr-msg p { margin: 0 0 6px !important; }
.sr-msg p:last-child { margin-bottom: 0 !important; }
.sr-msg ul { margin: 4px 0 6px !important; padding-left: 18px !important; }
.sr-msg li { margin: 2px 0; }
.sr-msg a { color: var(--sr-blue); }
.sr-msg--me { align-self: flex-end; padding: 9px 13px; border-radius: 16px 16px 4px 16px; background: var(--sr-blue); color: #fff; white-space: pre-wrap; }
.sr-msg--ai { align-self: flex-start; }
.sr-msg--ai .sr-msg__body { padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.sr-msg--ai.is-error .sr-msg__body { background: #fff4f2; color: #8a2b1c; }
.sr-msg__say { position: absolute; right: -30px; top: 4px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--sr-muted); }
.sr-msg__say:hover { background: rgba(0, 0, 0, .06); color: var(--sr-blue); }
.sr-msg--typing { display: flex; gap: 4px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.sr-msg--typing span { width: 7px; height: 7px; border-radius: 50%; background: #9aa1a8; animation: sr-dots 1.1s infinite ease-in-out; }
.sr-msg--typing span:nth-child(2) { animation-delay: .15s; }
.sr-msg--typing span:nth-child(3) { animation-delay: .3s; }
@keyframes sr-dots { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.sr-msg__cards { display: grid; gap: 6px; margin-top: 6px; }
.sr-pcard { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid var(--sr-line); }
.sr-pcard img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: #f3f4f6; flex: 0 0 auto; }
.sr-pcard__b { display: grid; gap: 2px; min-width: 0; }
.sr-pcard__b b { font-size: 13.5px; line-height: 1.3; }
.sr-pcard__b > span { font-size: 13px; color: #c2410c; font-weight: 600; }
.sr-pcard__act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.sr-msg--ai:has(.sr-msg__cards) { max-width: 92%; }
.sr-pcard__act button, .sr-pcard__act a { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.sr-pcard__act button { background: var(--sr-blue); color: #fff; }
.sr-pcard__act a { color: var(--sr-text); border: 1px solid rgba(0, 0, 0, .14); }
.sr-pcard__act .sr-i { width: 15px; height: 15px; }
.sr-chat__chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.sr-chat__chips button.is-lead { background: var(--sr-blue); border-color: var(--sr-blue); color: #fff; }
/* Ô để lại số điện thoại dưới câu trả lời có lời mời ([[lead]]) */
.sr-lead { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 8px; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid rgba(0, 96, 239, .35); }
.sr-lead input { min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--sr-line); border-radius: 10px; font: inherit; font-size: 16px; color: inherit; background: #fff; }
.sr-lead input:focus { outline: 2px solid var(--sr-blue); outline-offset: 0; border-color: transparent; }
.sr-lead button { height: 40px; padding: 0 16px; border-radius: 10px; background: var(--sr-blue); color: #fff; font-weight: 700; }
.sr-lead small { grid-column: 1 / -1; font-size: 12px; color: #6a737d; }
.sr-lead.is-bad input { border-color: #d63638; }
.sr-lead.is-bad small { color: #d63638; }
.sr-chat__chips button { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(0, 96, 239, .3); background: #fff; color: var(--sr-blue); font-size: 13px; font-weight: 600; text-align: left; }
.sr-chat__chips button:hover { background: #eef4ff; }
.sr-chat__chips button.is-lead:hover, .sr-chat__chips button.is-lead:focus-visible { background: #004fc4; border-color: #004fc4; color: #fff; }
.sr-chat__form { display: flex; align-items: flex-end; gap: 6px; padding: 10px; border-top: 1px solid var(--sr-line); background: #fff; }
.sr-chat__form textarea { flex: 1 1 auto; min-width: 0; resize: none; min-height: 42px; max-height: 120px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(0, 0, 0, .14); font: inherit; font-size: 14px; line-height: 1.4; color: var(--sr-text); background: #fff; outline: none; }
.sr-chat__form textarea:focus { border-color: var(--sr-blue); box-shadow: 0 0 0 3px rgba(0, 96, 239, .12); }
.sr-chat__mic, .sr-chat__send { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; }
.sr-chat__mic { background: #eef4ff; color: var(--sr-blue); position: relative; }
.sr-chat__send { background: var(--sr-blue); color: #fff; }
.sr-chat.is-listening .sr-chat__mic { background: #e5372b; color: #fff; }
.sr-chat.is-listening .sr-chat__mic::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #e5372b; animation: sr-pulse 1.2s ease-out infinite; }
.sr-chat-peek { position: absolute; right: 10px; bottom: calc(136px + env(safe-area-inset-bottom)); z-index: 23; display: flex; align-items: flex-start; gap: 8px; max-width: min(320px, calc(100% - 20px)); padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); font-size: 13px; line-height: 1.4; color: var(--sr-text); text-align: left; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.sr-chat-peek.is-on { opacity: 1; transform: none; }
.sr-chat-peek .sr-chat__av { width: 30px; height: 30px; }
@media (max-width: 760px) {
	.sr-fab { right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); height: 54px; width: 54px; padding: 0; justify-content: center; }
	.sr-fab span { display: none; }
	.sr-panel-open .sr-fab { display: none; }
	.sr-chat { left: 0; right: 0; bottom: 0; width: 100%; height: 86%; border-radius: 18px 18px 0 0; z-index: 25; padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); }
	.sr-chat.is-open { transform: none; }
	.sr-msg { max-width: 86%; }
	.sr-chat__form textarea { font-size: 16px; } /* iOS: < 16px thì tự phóng to trang khi gõ */
	.sr-chat-peek { top: calc(var(--sr-top) + 50px); bottom: auto; right: 8px; left: 8px; max-width: none; }
}
/*
 * Điện thoại xoay ngang (rộng > 760px nhưng thấp): bố cục máy tính quá chật — thanh trên gọn lại để tên khu không bị bóp còn
 * "M..", chừa chỗ tai thỏ / Dynamic Island (safe-area), ẩn sơ đồ nhỏ (vẫn có nút Sơ đồ), nút trợ lý tròn không đè thanh khu.
 */
@media (min-width: 761px) and (max-height: 500px) {
	.sr-top { left: calc(8px + env(safe-area-inset-left)); right: calc(8px + env(safe-area-inset-right)); gap: 6px; }
	.sr-brand { height: 40px; padding: 0 12px 0 10px; }
	.sr-brand img { height: 22px; max-width: 84px; }
	.sr-brand__t { display: none; }
	.sr-zone { height: 40px; min-width: 120px; max-width: none; padding: 0 12px; font-size: 13px; }
	.sr-actions { gap: 0; padding: 2px; }
	.sr-act { height: 36px; padding: 0 7px; }
	.sr-actions > a.sr-act--desk { display: none; } /* "Thoát": logo đã dẫn về trang chủ */
	.sr-minimap { display: none; }
	.sr-zonebar { bottom: calc(8px + env(safe-area-inset-bottom)); max-width: calc(100% - 2 * (72px + env(safe-area-inset-right))); }
	.sr-zonebar button { height: 32px; padding: 0 12px; }
	.sr-fab { right: calc(10px + env(safe-area-inset-right)); bottom: calc(6px + env(safe-area-inset-bottom)); width: 48px; height: 48px; padding: 0; justify-content: center; }
	.sr-fab span { display: none; }
	.sr-guide { bottom: calc(54px + env(safe-area-inset-bottom)); width: min(620px, calc(100% - 2 * (72px + env(safe-area-inset-right)))); }
	.sr-guide__text { max-height: 4.6em; }
	.sr-panel-open .sr-guide { display: none; } /* bảng SP chiếm hơn nửa màn hình, phần còn lại quá hẹp cho phụ đề (lời vẫn đọc) */
	.sr-panel { top: calc(var(--sr-top) + 50px); right: calc(8px + env(safe-area-inset-right)); bottom: 8px; }
	.sr-chat { right: calc(8px + env(safe-area-inset-right)); bottom: 8px; height: calc(100% - var(--sr-top) - 58px); }
	.sr-panel-open .sr-chat { left: calc(8px + env(safe-area-inset-left)); }
	.sr-tcard { top: calc(var(--sr-top) + 48px); bottom: auto; right: calc(8px + env(safe-area-inset-right)); max-width: 320px; padding: 8px; }
	.sr-tcard .sr-btn { height: 36px; padding: 0 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.sr-panel, .sr-custom, .sr-guide, .sr-loader, .sr-chat, .sr-chat-peek { transition: none; }
	.sr-fab::after { animation: none; }
}

/* ---------- So sánh sản phẩm ---------- */
.sr-panel__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-cmpbtn.is-on { background: var(--sr-blue) !important; color: #fff !important; }
.sr-cmpbar { position: absolute; z-index: 16; left: 12px; top: calc(var(--sr-top) + 58px); display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; border-radius: 999px; background: var(--sr-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 8px 30px rgba(0, 0, 0, .18); animation: sr-cmpbar-in .25s ease-out; }
@keyframes sr-cmpbar-in { from { opacity: 0; transform: translateY(-8px); } }
.sr-cmpbar__items { display: flex; gap: 6px; }
.sr-cmpbar__it, .sr-cmpbar__slot { position: relative; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--sr-line); display: grid; place-items: center; }
.sr-cmpbar__it img { width: 34px; height: 34px; object-fit: contain; border-radius: 50%; }
.sr-cmpbar__it button { position: absolute; top: -3px; right: -3px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: rgba(29, 35, 41, .7); color: #fff; transition: opacity .15s; }
@media (hover: hover) { .sr-cmpbar__it button { opacity: 0; } .sr-cmpbar__it:hover button, .sr-cmpbar__it button:focus-visible { opacity: 1; } }
.sr-cmpbar__slot { color: var(--sr-muted); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .14); background: transparent; border: 0; }
.sr-cmpbar__go { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--sr-blue); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.sr-cmpbar__x { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--sr-muted); }
.sr-cmpbar__x:hover { background: rgba(0, 0, 0, .06); color: var(--sr-text); }

.sr-cmp { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #f5f5f7; color: var(--sr-text); --cw: minmax(0, 1fr); }
.sr-cmp[hidden] { display: none; }
.sr-cmp__head { flex: none; display: flex; align-items: center; gap: 16px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px 22px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--sr-line); }
.sr-cmp__head h2 { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; font-weight: 700; }
.sr-cmp__head h2 .sr-i { color: var(--sr-blue); }
.sr-cmp__diff { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; white-space: nowrap; }
.sr-cmp__diff input { position: absolute; opacity: 0; pointer-events: none; }
/* Công tắc riêng của bảng so sánh (không dùng chung .sr-switch của bảng nhạc: bên đó có !important). */
.sr-cmp__sw { position: relative; width: 40px; height: 24px; border-radius: 999px; background: #c3c7cd; transition: background .2s; flex: none; }
.sr-cmp__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.sr-cmp__diff input:checked + .sr-cmp__sw { background: var(--sr-blue); }
.sr-cmp__diff input:checked + .sr-cmp__sw::after { transform: translateX(16px); }
.sr-cmp__diff b { font-weight: inherit; transition: color .2s; }
.sr-cmp__diff input:checked ~ b { color: var(--sr-blue); }
.sr-cmp__diff input:focus-visible + .sr-cmp__sw { outline: 2px solid var(--sr-blue); outline-offset: 2px; }
.sr-cmp__scroll { position: relative; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 max(16px, calc((100% - 1080px) / 2)) calc(28px + env(safe-area-inset-bottom)); }
.sr-cmp__names, .sr-cmp__cards, .sr-cmp__vals { display: grid; grid-template-columns: repeat(var(--n), var(--cw)); gap: 16px; }
.sr-cmp__names { position: sticky; top: 0; z-index: 2; margin: 0 -16px; padding: 10px 16px; background: rgba(245, 245, 247, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sr-line); font-size: 14px; font-weight: 700; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s, transform .2s; }
.sr-cmp.is-stuck .sr-cmp__names { opacity: 1; transform: none; }
.sr-cmp__names span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-cmp__cards { margin-top: -30px; padding: 0 0 8px; }
.sr-cmp__card, .sr-cmp__add { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 14px 16px; border-radius: 18px; background: #fff; min-width: 0; }
.sr-cmp__rm { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--sr-muted); }
.sr-cmp__rm:hover { background: rgba(0, 0, 0, .06); color: var(--sr-text); }
.sr-cmp__img { width: 100%; max-width: 200px; aspect-ratio: 1; margin-bottom: 8px; }
.sr-cmp__img img { width: 100%; height: 100%; object-fit: contain; }
.sr-cmp__kicker { margin: 0; font-size: 12px; font-weight: 600; color: var(--sr-muted); }
.sr-cmp__name { margin: 2px 0 4px; font-size: 19px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.sr-cmp__price { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.sr-cmp__price.is-quote { color: var(--sr-muted); }
.sr-cmp__acts { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.sr-cmp__go { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--sr-blue); color: #fff; font-size: 13px; font-weight: 600; }
.sr-cmp__link { display: inline-flex; align-items: center; gap: 5px; height: 36px; font-size: 13px; font-weight: 600; color: var(--sr-blue); text-decoration: none; }
.sr-cmp__add { justify-content: center; gap: 10px; min-height: 220px; color: var(--sr-blue); font-size: 15px; font-weight: 600; background: transparent; border: 2px dashed rgba(0, 96, 239, .3); }
.sr-cmp__add:hover { background: rgba(0, 96, 239, .05); }
.sr-cmp__specs { margin-top: 8px; }
.sr-cmp__group { margin-top: 26px; }
.sr-cmp__group h3 { margin: 0 0 4px; padding-bottom: 10px; font-size: 21px; font-weight: 700; border-bottom: 1px solid rgba(0, 0, 0, .14); }
.sr-cmp__row { padding: 14px 0; border-bottom: 1px solid var(--sr-line); }
.sr-cmp__label { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--sr-muted); }
.sr-cmp__v { min-width: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.sr-cmp__v.is-best { font-weight: 700; }
.sr-cmp__best { display: inline-block; margin-left: 6px; padding: 0 7px 0 5px; border-radius: 999px; background: #e7f6ec; color: #1a7f3c; font-size: 11px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.sr .sr-cmp__best .sr-i { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }
.sr-cmp__na { color: #b4b7bb; }
.sr-cmp__msg { margin: 30px 0; text-align: center; font-size: 15px; color: var(--sr-muted); }
.sr-cmp__msg.is-loading::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px; border: 2px solid rgba(0, 96, 239, .25); border-top-color: var(--sr-blue); border-radius: 50%; animation: sr-spin .8s linear infinite; }
@keyframes sr-spin { to { transform: rotate(360deg); } }
.sr-cmp__note { margin: 22px 0 0; font-size: 12px; color: var(--sr-muted); }
.sr-cmp__picker { position: absolute; z-index: 5; top: calc(64px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 24px)); max-height: min(560px, calc(100% - 90px)); display: flex; flex-direction: column; border-radius: 18px; background: #fff; box-shadow: 0 18px 60px rgba(0, 0, 0, .28); overflow: hidden; }
.sr-cmp__picker[hidden] { display: none; }
.sr-cmp.is-picking .sr-cmp__scroll { filter: blur(2px); opacity: .55; pointer-events: none; }
.sr-cmp__pickhead { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--sr-line); color: var(--sr-muted); }
.sr-cmp__pickhead input { flex: 1 1 auto; min-width: 0; height: 40px; border: 0; outline: none; font: inherit; font-size: 16px; color: var(--sr-text); background: none; }
.sr-cmp__picklist { margin: 0; padding: 6px; list-style: none; overflow-y: auto; }
.sr-cmp__picklist button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; text-align: left; }
.sr-cmp__picklist button:hover, .sr-cmp__picklist button:focus-visible { background: #f3f4f6; outline: none; }
.sr-cmp__picklist img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.sr-cmp__picklist span { flex: 1 1 auto; min-width: 0; display: grid; }
.sr-cmp__picklist b { font-size: 14px; font-weight: 600; }
.sr-cmp__picklist small { font-size: 12px; color: var(--sr-muted); }
.sr-cmp__picklist .sr-i { color: var(--sr-blue); flex: none; }
.sr-cmp__none { padding: 20px; text-align: center; color: var(--sr-muted); }
.sr-cmp-open .sr-fab, .sr-cmp-open .sr-chat { visibility: hidden; }
@media (max-width: 760px) {
	.sr-cmpbar { left: 8px; top: calc(var(--sr-top) + 52px); gap: 6px; }
	.sr-cmpbar-on .sr-hint { display: none; }
	.sr-chat-open .sr-cmpbar { display: none; }
	.sr-cmpbar__go { padding: 0 12px; font-size: 13px; }
	.sr-panel-open .sr-cmpbar { display: none; }
	.sr-cmp__head { gap: 10px; padding-left: 14px; flex-wrap: wrap; }
	.sr-cmp__head h2 { font-size: 17px; }
	.sr-cmp__diff { order: 3; width: 100%; font-size: 13px; }
	.sr-cmp__scroll { padding: 0 10px calc(24px + env(safe-area-inset-bottom)); }
	.sr-cmp__names, .sr-cmp__cards, .sr-cmp__vals { gap: 8px; }
	.sr-cmp__names { margin: 0 -10px; padding: 8px 10px; font-size: 12px; }
	.sr-cmp__card, .sr-cmp__add { padding: 14px 8px 12px; border-radius: 14px; }
	.sr-cmp__add { min-height: 170px; font-size: 13px; }
	.sr-cmp__name { font-size: 15px; }
	.sr-cmp__price { font-size: 13px; }
	.sr-cmp__go { height: 32px; padding: 0 12px; font-size: 12px; white-space: nowrap; }
	.sr-cmp__go .sr-i, .sr-cmp__link .sr-i { display: none; }
	.sr-cmp__kicker { font-size: 11px; }
	.sr-cmp__img { margin-bottom: 4px; }
	.sr-cmp__link { height: 28px; font-size: 12px; }
	.sr-cmp__group h3 { font-size: 17px; }
	.sr-cmp__v { font-size: 13px; }
	.sr-cmp__best { display: table; margin: 4px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .sr-cmpbar, .sr-cmp__names, .sr-cmp__sw, .sr-cmp__sw::after { animation: none; transition: none; } }