/* Khối tương tác riêng của bài ATV-550 (CRM bất động sản). Chỉ tải trên trang bài này. */
.i550{--b:#2448FF;--bd:#1631C9;--hi:#D6F43C;--ink:#10131A;--mu:#5B626F;--ln:#D8DDE6;--sf:#F2F4F7;--nb:#EEF1FF;--ok:#127a3a;--warn:#9A6400;--bad:#C8262E;
  margin:28px 0;border:1px solid var(--ln);border-radius:14px;background:linear-gradient(180deg,#fff 0,#F7F8FF 100%);padding:18px 18px 16px;position:relative;overflow:hidden;color:var(--ink)}
.i550:empty{display:none}
.i550 *{box-sizing:border-box}
.i550-on .i550-fallback{display:none}
.i550-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:0 0 4px}
.i550-tag{display:inline-block;background:var(--hi);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:4px 8px;border-radius:4px}
.i550-t{font-weight:700;font-size:19px;line-height:1.3;margin:0}
.i550-sub{font-size:14px;color:var(--mu);margin:2px 0 12px;line-height:1.5}
.i550-seg{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.i550-seg button,.i550-case button{font:inherit;font-size:14px;border:1px solid var(--ln);background:#fff;color:var(--ink);border-radius:999px;padding:7px 13px;cursor:pointer;line-height:1.2;transition:background .18s,border-color .18s,transform .18s}
.i550-seg button:hover,.i550-case button:hover{border-color:var(--b)}
.i550-seg button[aria-pressed="true"],.i550-case button[aria-pressed="true"]{background:var(--b);border-color:var(--b);color:#fff}
.i550 button:focus-visible{outline:3px solid var(--hi);outline-offset:2px}
.i550-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.i550-note{font-size:13px;color:var(--mu);margin:10px 0 0;line-height:1.5}
.i550-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 1. Phễu 3D */
.i550-pheu-stage{perspective:1100px;padding:6px 0 4px}
.i550-pheu-3d{transform-style:preserve-3d;transform:rotateX(var(--rx,8deg)) rotateY(var(--ry,-3deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.i550-row{display:grid;grid-template-columns:minmax(96px,150px) 1fr 58px;gap:10px;align-items:center;margin:0 0 10px}
.i550-row-l{font-size:14px;line-height:1.25}
.i550-row-v{font-weight:700;font-size:20px;text-align:right;font-variant-numeric:tabular-nums}
.i550-track{position:relative;height:30px;transform-style:preserve-3d}
.i550-slab{position:absolute;left:0;top:0;height:30px;min-width:6px;border-radius:7px;background:linear-gradient(180deg,#4C6BFF,var(--b));
  box-shadow:0 7px 0 var(--bd),0 14px 18px rgba(16,19,26,.18);transform:translateZ(calc(var(--z,0)*1px));transition:width .7s cubic-bezier(.2,.8,.2,1),transform .7s}
.i550-row.is-last .i550-slab{background:linear-gradient(180deg,#E4FF62,var(--hi));box-shadow:0 7px 0 #9DB51C,0 14px 18px rgba(16,19,26,.18)}
.i550-rate{display:block;font-size:11px;color:var(--mu);margin-top:1px}
.i550-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.i550-k{background:#fff;border:1px solid var(--ln);border-radius:10px;padding:10px 10px 9px;min-width:0}
.i550-k b{display:block;font-size:18px;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.i550-k span{display:block;font-size:12px;color:var(--mu);margin-top:3px;line-height:1.35}
.i550-k.is-main{background:var(--ink);border-color:var(--ink);color:#fff}
.i550-k.is-main span{color:#C9CEDA}
.i550-k.is-main b{color:var(--hi)}

/* 2. Mô phỏng chia khách */
.i550-case{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.i550-case button{font-size:13px;padding:6px 11px}
.i550-flow{position:relative}
.i550-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0 0 16px;counter-reset:s}
.i550-step{position:relative;background:#fff;border:1.5px solid var(--ln);border-radius:10px;padding:8px 6px;text-align:center;font-size:12.5px;line-height:1.25;font-weight:600;min-width:0;transition:border-color .25s,background .25s,transform .25s,box-shadow .25s}
.i550-step small{display:block;font-weight:400;color:var(--mu);font-size:11px;margin-top:2px}
.i550-step.is-on{border-color:var(--b);background:var(--nb);transform:translateY(-3px);box-shadow:0 8px 16px rgba(36,72,255,.18)}
.i550-step.is-stop{border-color:var(--warn);background:#FFF8E6}
.i550-team{display:grid;grid-template-columns:repeat(5,1fr) 1.1fr;gap:8px;perspective:800px}
.i550-sale,.i550-q{position:relative;border:1.5px solid var(--ln);background:#fff;border-radius:12px;padding:10px 6px 9px;text-align:center;min-width:0;
  transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s,opacity .3s}
.i550-av{width:34px;height:34px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;background:linear-gradient(140deg,#5B76FF,var(--b));box-shadow:0 4px 0 var(--bd)}
.i550-sale .n{font-weight:700;font-size:13px}
.i550-sale .s{font-size:11px;color:var(--mu);line-height:1.3;margin-top:2px}
.i550-load{height:5px;background:var(--sf);border-radius:3px;margin:6px 4px 0;overflow:hidden}
.i550-load i{display:block;height:100%;background:var(--b);border-radius:3px;transition:width .4s}
.i550-sale.is-off{opacity:.55}
.i550-sale.is-off .i550-av{background:#9AA1AE;box-shadow:0 4px 0 #6D7482}
.i550-sale.is-full .i550-load i{background:var(--bad)}
.i550-sale.is-next::after{content:"đến lượt";position:absolute;top:-9px;left:50%;transform:translateX(-50%) translateZ(1px);font-size:10px;background:var(--ink);color:#fff;border-radius:999px;padding:1px 7px;white-space:nowrap}
.i550-sale.is-hit,.i550-q.is-hit{border-color:var(--ok);box-shadow:0 14px 26px rgba(18,122,58,.22);transform:translateY(-6px) rotateX(10deg)}
.i550-q{background:#FFF8E6;border-style:dashed;border-color:#E0C27A}
.i550-q .n{font-weight:700;font-size:12.5px;color:var(--warn)}
.i550-q .s{font-size:11px;color:var(--mu);line-height:1.3;margin-top:4px}
.i550-q.is-hit{border-color:var(--warn);box-shadow:0 14px 26px rgba(154,100,0,.22)}
.i550-tok{position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,var(--hi) 35%,#9DB51C 100%);
  box-shadow:0 0 0 4px rgba(214,244,60,.35),0 6px 14px rgba(16,19,26,.3);z-index:3;opacity:0;pointer-events:none;transition:transform .42s cubic-bezier(.3,.7,.2,1),opacity .2s}
.i550-out{margin-top:14px;border-left:4px solid var(--b);background:#fff;border-radius:0 10px 10px 0;padding:10px 14px;font-size:14.5px;line-height:1.55;min-height:62px}
.i550-out b{display:block;font-size:15px;margin-bottom:2px}
.i550-out.is-warn{border-left-color:var(--warn)}
.i550-out.is-stop{border-left-color:var(--bad)}

/* 3. Bản đồ vòng khoảng cách */
.i550-map-wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:center}
.i550-map{position:relative;aspect-ratio:5/4;perspective:900px;touch-action:pan-y;cursor:grab;user-select:none}
.i550-plane{position:absolute;left:4%;right:4%;top:50%;aspect-ratio:1/1;translate:0 -50%;transform-style:preserve-3d;transform:rotateX(var(--mx,54deg)) rotateZ(var(--mz,-28deg));transition:transform .25s ease-out}
.i550-ring{position:absolute;border-radius:50%;border:2px solid rgba(36,72,255,.28);background:rgba(36,72,255,.05);transition:background .25s,border-color .25s}
.i550-ring.is-on{background:rgba(214,244,60,.28);border-color:#9DB51C}
.i550-grid{position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(16,19,26,.05) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(16,19,26,.05) 23px 24px)}
.i550-pin{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.i550-pin i{position:absolute;left:-15px;bottom:0;width:30px;height:46px;transform-origin:50% 100%;transform:rotateX(-90deg);transform-style:preserve-3d}
.i550-pin i::before{content:"";position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:linear-gradient(135deg,#E4FF62,#9DB51C);box-shadow:0 0 0 3px #fff}
.i550-pin em{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:rgba(16,19,26,.25);filter:blur(2px)}
.i550-d{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;transform-style:preserve-3d;transition:opacity .35s,transform .5s}
.i550-d::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;transform:translateZ(6px);box-shadow:0 0 0 1.5px #fff}
.i550-d.is-dim{opacity:.1}
.i550-d.fb{background:#2448FF}.i550-d.gg{background:#E0662B}.i550-d.gt{background:#127a3a}
.i550-legend{font-size:13.5px}
.i550-zone{display:grid;grid-template-columns:76px 1fr 30px;gap:8px;align-items:center;padding:6px 6px;border-radius:8px;cursor:pointer;border:1px solid transparent;background:none;width:100%;font:inherit;color:inherit;text-align:left}
.i550-zone:hover,.i550-zone.is-on{background:#fff;border-color:var(--ln)}
.i550-zone .bar{display:flex;height:14px;background:var(--sf);border-radius:3px;overflow:hidden}
.i550-zone .bar i{display:block;height:100%;transition:width .5s}
.i550-zone b{text-align:right;font-variant-numeric:tabular-nums}
.i550-zinfo{margin-top:8px;font-size:13.5px;line-height:1.5;min-height:42px}
.i550 details{margin-top:10px;font-size:13.5px}
.i550 details table{width:100%;border-collapse:collapse;margin-top:6px}
.i550 details th,.i550 details td{border-bottom:1px solid var(--ln);padding:5px 6px;text-align:right}
.i550 details th:first-child,.i550 details td:first-child{text-align:left}

@media (max-width:640px){
  .i550{padding:14px 12px 12px;margin:22px -4px}
  .i550-t{font-size:17px}
  .i550-kpi{grid-template-columns:repeat(2,1fr)}
  .i550-row{grid-template-columns:88px 1fr 40px;gap:8px}
  .i550-row-l{font-size:12.5px}
  .i550-row-v{font-size:17px}
  .i550-steps{gap:4px}
  .i550-step{font-size:11px;padding:6px 3px}
  .i550-step small{display:none}
  .i550-team{grid-template-columns:repeat(5,1fr);gap:5px}
  .i550-q{grid-column:1/-1;display:flex;gap:8px;align-items:center;justify-content:center;padding:7px}
  .i550-q .s{margin:0}
  .i550-av{width:28px;height:28px;font-size:11px}
  .i550-sale .s,.i550-sale .n{display:none}
  .i550-sale{padding:8px 4px 7px}
  .i550-map-wrap{grid-template-columns:1fr}
  .i550-map{max-width:340px;margin:0 auto;width:100%;aspect-ratio:1/0.85}
}
@media (prefers-reduced-motion:reduce){
  .i550 *,.i550 *::before,.i550 *::after{transition:none!important;animation:none!important}
}