From 536e6780ba2087268d49ae26de4457e07ec277df Mon Sep 17 00:00:00 2001
From: David Nguyen <h250694@gmail.com>
Date: Tue, 10 Nov 2026 18:24:15 +0700
Subject: [PATCH 01/14] feat(seatmap): add zoom controls, pinch gestures and
 center-zone outline with explicit selection state

---
 src/components/SeatMap.astro | 147 ++++++++++++++++++++++++++++++++++-
 1 file changed, 143 insertions(+), 4 deletions(-)

diff --git a/src/components/SeatMap.astro b/src/components/SeatMap.astro
index eedb425e..b3f7bc8f 100644
--- a/src/components/SeatMap.astro
+++ b/src/components/SeatMap.astro
@@ -19,6 +19,16 @@ import '../styles/seatmap-redesign.css';
       </div>
       <button type="button" class="seatmap__close" data-seatmap-close aria-label="Đóng">✕</button>
     </header>
+    <div class="seatmap__zoom-controls" data-seatmap-zoom-controls hidden role="group" aria-label="Điều chỉnh độ phóng to sơ đồ ghế">
+      <span class="seatmap__zoom-label">Sơ đồ ghế</span>
+      <div class="seatmap__zoom-actions">
+        <button type="button" data-seatmap-zoom-out aria-label="Thu nhỏ sơ đồ ghế" title="Thu nhỏ">−</button>
+        <output data-seatmap-zoom-value aria-live="polite">100%</output>
+        <button type="button" data-seatmap-zoom-in aria-label="Phóng to sơ đồ ghế" title="Phóng to">+</button>
+        <button type="button" data-seatmap-zoom-fit aria-label="Hiển thị toàn bộ chiều ngang sơ đồ" title="Vừa màn hình">Vừa khung</button>
+        <button type="button" data-seatmap-zoom-reset aria-label="Đặt tỷ lệ sơ đồ về 100 phần trăm" title="Đặt lại 100%">100%</button>
+      </div>
+    </div>
     <div class="seatmap__body" data-seatmap-body aria-live="polite"></div>
     <footer class="seatmap__footer" data-seatmap-footer></footer>
   </div>
@@ -27,7 +37,7 @@ import '../styles/seatmap-redesign.css';
 <style is:global>
   /* Global on purpose: the seat grid is injected via innerHTML after the API
      responds, and Astro's scoped styles never reach injected nodes. */
-  .seatmap { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; }
+  .seatmap { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; }
   .seatmap[hidden] { display: none; }
   .seatmap__backdrop { position: absolute; inset: 0; background: rgba(13, 20, 36, .62); }
   .seatmap__panel {
@@ -113,6 +123,19 @@ import '../styles/seatmap-redesign.css';
     const metaEl = root.querySelector('[data-seatmap-meta]');
     const bodyEl = root.querySelector('[data-seatmap-body]');
     const footerEl = root.querySelector('[data-seatmap-footer]');
+    const zoomControls = root.querySelector('[data-seatmap-zoom-controls]');
+    const zoomValueEl = root.querySelector('[data-seatmap-zoom-value]');
+    const zoomOutBtn = root.querySelector('[data-seatmap-zoom-out]');
+    const zoomInBtn = root.querySelector('[data-seatmap-zoom-in]');
+    const zoomFitBtn = root.querySelector('[data-seatmap-zoom-fit]');
+    const zoomResetBtn = root.querySelector('[data-seatmap-zoom-reset]');
+    const ZOOM_MIN = 0.45;
+    const ZOOM_MAX = 1.8;
+    const ZOOM_STEP = 0.15;
+    let zoom = 1;
+    let naturalStageWidth = 0;
+    let pinchStartDistance = 0;
+    let pinchStartZoom = 1;
     const vnd = new Intl.NumberFormat('vi-VN');
     const selected = new Map();
     let requestToken = 0;
@@ -122,8 +145,10 @@ import '../styles/seatmap-redesign.css';
     ));
 
     function close() {
+      ++requestToken; // Ignore a late seat response after the dialog closes.
       root.hidden = true;
       document.body.style.overflow = '';
+      zoomControls.hidden = true;
     }
     root.querySelectorAll('[data-seatmap-close]').forEach((el) => el.addEventListener('click', close));
     window.addEventListener('keydown', (event) => { if (event.key === 'Escape' && !root.hidden) close(); });
@@ -142,6 +167,87 @@ import '../styles/seatmap-redesign.css';
         '<span class="seatmap__note">Trạng thái ghế theo dữ liệu MoMo tại thời điểm tải. ePlus hiện chưa hỗ trợ giữ ghế và thanh toán trực tuyến.</span>';
     }
 
+    function limitZoom(value) {
+      return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(value * 100) / 100));
+    }
+
+    function applyZoom(value, { center = true } = {}) {
+      const scroller = bodyEl.querySelector('[data-seatmap-scroll]');
+      const stage = bodyEl.querySelector('[data-seatmap-stage]');
+      if (!scroller || !stage) return;
+      const next = limitZoom(value);
+      const previous = zoom;
+      if (Math.abs(next - previous) < 0.001) return;
+      const centerX = scroller.scrollLeft + scroller.clientWidth / 2;
+      const centerY = scroller.scrollTop + scroller.clientHeight / 2;
+      stage.style.zoom = String(next);
+      zoom = next;
+      zoomValueEl.textContent = Math.round(zoom * 100) + '%';
+      zoomOutBtn.disabled = zoom <= ZOOM_MIN;
+      zoomInBtn.disabled = zoom >= ZOOM_MAX;
+      requestAnimationFrame(() => {
+        if (center) {
+          scroller.scrollLeft = centerX * (next / previous) - scroller.clientWidth / 2;
+          scroller.scrollTop = centerY * (next / previous) - scroller.clientHeight / 2;
+        } else {
+          scroller.scrollLeft = Math.max(0, (scroller.scrollWidth - scroller.clientWidth) / 2);
+          scroller.scrollTop = 0;
+        }
+        const hint = bodyEl.querySelector('[data-seatmap-hint]');
+        if (hint) hint.hidden = scroller.scrollWidth <= scroller.clientWidth + 1;
+      });
+    }
+
+    function zoomToFit() {
+      const scroller = bodyEl.querySelector('[data-seatmap-scroll]');
+      if (!scroller || !naturalStageWidth) return;
+      applyZoom((scroller.clientWidth - 10) / naturalStageWidth, { center: false });
+    }
+
+    function drawCenterRegion() {
+      const grid = bodyEl.querySelector('[data-seatmap-grid]');
+      if (!grid) return;
+      grid.querySelector('[data-seatmap-center-zone]')?.remove();
+      const rows = [...grid.querySelectorAll('.seatmap__row')];
+      if (rows.length < 4) return;
+      // An approximate visual guide, not a provider-defined pricing category.
+      // Compute from the rendered seat geometry so the frame stays aligned
+      // across screen sizes, aisle gaps and any zoom level.
+      const all = rows.flatMap(row => [...row.querySelectorAll('.seat:not(.seat--gap)')]);
+      if (all.length < 12) return;
+      const minX = Math.min(...all.map(seat => seat.offsetLeft));
+      const maxX = Math.max(...all.map(seat => seat.offsetLeft + seat.offsetWidth));
+      const leftTarget = minX + (maxX - minX) * 0.24;
+      const rightTarget = minX + (maxX - minX) * 0.76;
+      const firstRow = Math.floor(rows.length * 0.30);
+      const lastRow = Math.min(rows.length - 1, Math.ceil(rows.length * 0.72));
+      const candidates = rows.slice(firstRow, lastRow + 1).flatMap(row =>
+        [...row.querySelectorAll('.seat:not(.seat--gap)')].filter(seat => {
+          const middleX = seat.offsetLeft + seat.offsetWidth / 2;
+          return middleX >= leftTarget && middleX <= rightTarget;
+        })
+      );
+      if (candidates.length < 6) return;
+      const x = Math.min(...candidates.map(seat => seat.offsetLeft));
+      const y = Math.min(...candidates.map(seat => seat.offsetTop));
+      const right = Math.max(...candidates.map(seat => seat.offsetLeft + seat.offsetWidth));
+      const bottom = Math.max(...candidates.map(seat => seat.offsetTop + seat.offsetHeight));
+      const frame = document.createElement('div');
+      frame.className = 'seatmap__center-zone';
+      frame.dataset.seatmapCenterZone = '';
+      frame.setAttribute('aria-hidden', 'true');
+      Object.assign(frame.style, {
+        left: (x - 5) + 'px', top: (y - 5) + 'px',
+        width: (right - x + 10) + 'px', height: (bottom - y + 10) + 'px'
+      });
+      grid.append(frame);
+    }
+
+    zoomOutBtn.addEventListener('click', () => applyZoom(zoom - ZOOM_STEP));
+    zoomInBtn.addEventListener('click', () => applyZoom(zoom + ZOOM_STEP));
+    zoomFitBtn.addEventListener('click', zoomToFit);
+    zoomResetBtn.addEventListener('click', () => applyZoom(1));
+
     function renderSeats(detail, data) {
       const info = data.SeatsInfo;
       const palette = seatTypePalette(info.SeatTypes || []);
@@ -177,10 +283,10 @@ import '../styles/seatmap-redesign.css';
       const unknownLegend = unknownType
         ? '<span><i class="seatmap__swatch seatmap__swatch--unknown"></i>Chưa rõ loại ghế</span>'
         : '';
-      bodyEl.innerHTML = `<div class="seatmap__map-scroll" data-seatmap-scroll role="region" aria-label="Sơ đồ ghế — cuộn ngang để xem tất cả các ghế" tabindex="0">
-          <div class="seatmap__stage">
+      bodyEl.innerHTML = `<div class="seatmap__map-scroll" data-seatmap-scroll role="region" aria-label="Sơ đồ ghế — cuộn ngang hoặc dùng điều khiển phóng to thu nhỏ để xem tất cả các ghế" tabindex="0">
+          <div class="seatmap__stage" data-seatmap-stage>
             <div class="seatmap__screen">MÀN HÌNH</div>
-            <div class="seatmap__grid">${rowsHtml}</div>
+            <div class="seatmap__grid" data-seatmap-grid>${rowsHtml}</div>
           </div>
         </div>
         <p class="seatmap__scroll-hint" data-seatmap-hint hidden>↔ Vuốt ngang để xem toàn bộ ghế</p>
@@ -193,8 +299,17 @@ import '../styles/seatmap-redesign.css';
           ${unknownLegend}
           <span><i class="seatmap__swatch seatmap__swatch--taken"></i>Đã đặt</span>
           <span><i class="seatmap__swatch seatmap__swatch--selected"></i>Đang chọn</span>
+          <span><i class="seatmap__swatch seatmap__swatch--center"></i>Vùng trung tâm (tham khảo)</span>
         </div>`;
+      zoom = 1;
+      zoomControls.hidden = false;
+      zoomValueEl.textContent = '100%';
+      zoomOutBtn.disabled = false;
+      zoomInBtn.disabled = false;
+      drawCenterRegion();
       const scroller = bodyEl.querySelector('[data-seatmap-scroll]');
+      const stage = bodyEl.querySelector('[data-seatmap-stage]');
+      naturalStageWidth = stage?.offsetWidth || 0;
       const hint = bodyEl.querySelector('[data-seatmap-hint]');
       if (scroller) {
         const horizontalOverflow = scroller.scrollWidth > scroller.clientWidth + 1;
@@ -202,14 +317,34 @@ import '../styles/seatmap-redesign.css';
         // Start at the middle on narrow screens without changing seat positions.
         if (horizontalOverflow) scroller.scrollLeft = (scroller.scrollWidth - scroller.clientWidth) / 2;
       }
+      // Two-finger pinch controls the same geometry as the zoom buttons.
+      // One-finger swipes continue to pan through the auditorium.
+      scroller?.addEventListener('touchstart', (event) => {
+        if (event.touches.length !== 2) return;
+        pinchStartDistance = Math.hypot(event.touches[0].clientX - event.touches[1].clientX,
+          event.touches[0].clientY - event.touches[1].clientY);
+        pinchStartZoom = zoom;
+      }, { passive: true });
+      scroller?.addEventListener('touchmove', (event) => {
+        if (event.touches.length !== 2 || !pinchStartDistance) return;
+        event.preventDefault();
+        const distance = Math.hypot(event.touches[0].clientX - event.touches[1].clientX,
+          event.touches[0].clientY - event.touches[1].clientY);
+        applyZoom(pinchStartZoom * distance / pinchStartDistance);
+      }, { passive: false });
+      scroller?.addEventListener('touchend', (event) => {
+        if (event.touches.length < 2) pinchStartDistance = 0;
+      }, { passive: true });
       bodyEl.querySelectorAll('[data-seat]').forEach((button) => {
         button.addEventListener('click', () => {
           const name = button.dataset.seat;
           if (selected.has(name)) {
             selected.delete(name);
+            button.classList.remove('seat--selected');
             button.setAttribute('aria-pressed', 'false');
           } else {
             selected.set(name, { label: name, price: Number(button.dataset.price || 0) });
+            button.classList.add('seat--selected');
             button.setAttribute('aria-pressed', 'true');
           }
           renderFooter();
@@ -221,6 +356,10 @@ import '../styles/seatmap-redesign.css';
     async function open(detail) {
       const token = ++requestToken;
       selected.clear();
+      zoomControls.hidden = true;
+      zoom = 1;
+      naturalStageWidth = 0;
+      pinchStartDistance = 0;
       footerEl.innerHTML = '';
       titleEl.textContent = detail.filmTitle || 'Chọn ghế';
       metaEl.textContent = [detail.cinemaName, detail.screenName, detail.dateLabel, detail.timeLabel, detail.format]

From 1759819acdb78eac8f89f4ecec133a153abdae98 Mon Sep 17 00:00:00 2001
From: David Nguyen <h250694@gmail.com>
Date: Tue, 10 Nov 2026 18:24:49 +0700
Subject: [PATCH 02/14] style(cinema): keep mobile seat dialog above header,
 zoomable map, center outline and teal selected state

---
 src/styles/seatmap-redesign.css | 74 +++++++++++++++++++++++++++------
 1 file changed, 62 insertions(+), 12 deletions(-)

diff --git a/src/styles/seatmap-redesign.css b/src/styles/seatmap-redesign.css
index a251c124..34f14e01 100644
--- a/src/styles/seatmap-redesign.css
+++ b/src/styles/seatmap-redesign.css
@@ -1,10 +1,47 @@
 /* Accessible dark seat-map preview. No checkout or reservation simulation. */
 .seatmap .seatmap__backdrop { background: rgba(8, 13, 25, .76); backdrop-filter: blur(4px); }
+.seatmap {
+  /* Above the sticky mobile site header (z-index: 150). */
+  z-index: 1200;
+  padding: max(8px, env(safe-area-inset-top)) 0 max(8px, env(safe-area-inset-bottom));
+}
 .seatmap .seatmap__panel {
-  width: min(980px, calc(100vw - 28px)); max-height: min(94dvh, 900px);
+  width: min(980px, calc(100vw - 28px));
+  max-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)));
   border-radius: 21px; background: #201f27; color: #f8fafc;
   box-shadow: 0 36px 110px rgba(0, 0, 0, .42);
 }
+.seatmap .seatmap__zoom-controls {
+  display: flex; justify-content: space-between; align-items: center; gap: 12px;
+  flex: 0 0 auto; padding: 10px 20px; background: #292630;
+  color: #f2edf7; border-bottom: 1px solid rgba(255,255,255,.10);
+}
+.seatmap .seatmap__zoom-controls[hidden] { display: none; }
+.seatmap .seatmap__zoom-label { font-size: 12px; font-weight: 800; }
+.seatmap .seatmap__zoom-actions { display: flex; align-items: center; gap: 6px; }
+.seatmap .seatmap__zoom-actions button {
+  min-width: 36px; min-height: 36px; padding: 6px 9px;
+  color: #f8fafc; background: #393644; border: 1px solid #625b70;
+  border-radius: 9px; font-size: 15px; font-weight: 800; cursor: pointer;
+}
+.seatmap .seatmap__zoom-actions button[data-seatmap-zoom-fit],
+.seatmap .seatmap__zoom-actions button[data-seatmap-zoom-reset] {
+  font-size: 11px; font-weight: 700;
+}
+.seatmap .seatmap__zoom-actions button:disabled { opacity: .4; cursor: not-allowed; }
+.seatmap .seatmap__zoom-actions button:not(:disabled):hover { background: #504b60; }
+.seatmap .seatmap__zoom-actions button:focus-visible { outline: 2px solid #ffd47b; outline-offset: 2px; }
+.seatmap .seatmap__zoom-actions output { font-variant-numeric: tabular-nums; font-size: 12px; min-width: 42px; text-align: center; }
+.seatmap .seatmap__stage { transform-origin: 0 0; }
+.seatmap .seatmap__grid { position: relative; }
+.seatmap .seatmap__center-zone {
+  position: absolute; z-index: 2; pointer-events: none;
+  border: 2px solid #7cdaa4; border-radius: 11px;
+  box-shadow: 0 0 0 1px rgba(10, 34, 20, .6), inset 0 0 0 1px rgba(14, 29, 18, .3);
+}
+.seatmap .seatmap__swatch--center {
+  background: transparent; border: 2px solid #7cdaa4; border-radius: 4px;
+}
 .seatmap .seatmap__header {
   padding: 19px 27px 18px; align-items: center; background: #26314a; color: #fff;
   border-bottom: 1px solid rgba(255,255,255,.10); gap: 16px;
@@ -21,8 +58,9 @@
 }
 .seatmap .seatmap__close:hover { background: rgba(255,255,255,.17); }
 .seatmap .seatmap__body {
-  padding: 29px 25px 20px; background: radial-gradient(circle at center 30%, #2d2934, #211f28 76%);
-  min-height: 230px; scrollbar-color: #5d5866 transparent;
+  padding: 24px 25px 20px; background: radial-gradient(circle at center 30%, #2d2934, #211f28 76%);
+  min-height: 0; flex: 1 1 auto; overflow: auto;
+  scrollbar-color: #5d5866 transparent; overscroll-behavior: contain;
 }
 .seatmap .seatmap__map-scroll { padding: 1px 0 14px; scrollbar-color: #696479 transparent; }
 .seatmap .seatmap__stage { padding: 0 10px; }
@@ -56,14 +94,17 @@
   background: #53505b; border-color: transparent; color: #c3becd;
   text-decoration: none; cursor: not-allowed; opacity: .7;
 }
-.seatmap .seat[aria-pressed="true"], .seatmap .seat--available[aria-pressed="true"] {
-  background: #19b3a8; border-color: #b7fff7; color: #061d25;
-  box-shadow: 0 0 0 2px rgba(25,179,168,.23); transform: none;
-}
-/* Selected seat must stay teal even when hovered (hover specificity is higher). */
-.seatmap .seat--available[aria-pressed="true"]:hover:not(:disabled) {
-  background: #19b3a8; color: #061d25; border-color: #b7fff7;
-  filter: none; transform: none;
+/* Safari may keep :hover/:active sticky after a touch. A dedicated state
+   class takes precedence over provider type colors for ALL interactions. */
+.seatmap .seat.seat--selected,
+.seatmap .seat.seat--selected:hover:not(:disabled),
+.seatmap .seat.seat--selected:focus,
+.seatmap .seat.seat--selected:active,
+.seatmap .seat.seat--available[aria-pressed="true"] {
+  background: #19b3a8 !important; color: #061d25 !important;
+  border-color: #b7fff7 !important;
+  box-shadow: 0 0 0 2px rgba(25,179,168,.28) !important;
+  filter: none !important; transform: none !important;
 }
 .seatmap .seat--gap { visibility: hidden; }
 .seatmap .seatmap__legend {
@@ -97,7 +138,16 @@
 .seatmap .seatmap__seats-placeholder-screen { background: #c5c9d5; }
 .seatmap .seatmap__close:focus-visible, .seatmap .seat:focus-visible { outline-color: #ffe09d; }
 @media (max-width: 600px) {
-  .seatmap .seatmap__panel { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: 15px; }
+  .seatmap .seatmap__panel {
+    width: calc(100vw - 12px);
+    max-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)));
+    border-radius: 15px;
+  }
+  .seatmap .seatmap__zoom-controls { padding: 9px 12px; gap: 6px; }
+  .seatmap .seatmap__zoom-label { display: none; }
+  .seatmap .seatmap__zoom-actions { width: 100%; justify-content: center; gap: 7px; }
+  .seatmap .seatmap__zoom-actions button { min-height: 40px; min-width: 40px; }
+  .seatmap .seatmap__zoom-actions output { min-width: 50px; }
   .seatmap .seatmap__header { padding: 14px 15px; }
   .seatmap .seatmap__header h3 { font-size: 17px; }
   .seatmap .seatmap__header p { font-size: 11px; }

From ec7cc8748459fba63f5ee5a9d92e8e31cab5f77b Mon Sep 17 00:00:00 2001
From: David Nguyen <h250694@gmail.com>
Date: Tue, 10 Nov 2026 18:25:26 +0700
Subject: [PATCH 03/14] fix(cinema): portal seat dialog to body to avoid mobile
 header stacking context

---
 src/components/SeatMap.astro | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/SeatMap.astro b/src/components/SeatMap.astro
index b3f7bc8f..a52baa4b 100644
--- a/src/components/SeatMap.astro
+++ b/src/components/SeatMap.astro
@@ -119,6 +119,9 @@ import '../styles/seatmap-redesign.css';
 
   const root = document.querySelector('[data-seatmap]');
   if (root) {
+    // Escape parent stacking contexts so the fixed dialog is never covered
+    // by the sticky site header or clipped inside a schedule card on iOS.
+    if (root.parentElement !== document.body) document.body.append(root);
     const titleEl = root.querySelector('[data-seatmap-title]');
     const metaEl = root.querySelector('[data-seatmap-meta]');
     const bodyEl = root.querySelector('[data-seatmap-body]');

From b0c10a299bff75f6a8270b33098c3f30685f1a1a Mon Sep 17 00:00:00 2001
From: David Nguyen <h250694@gmail.com>
Date: Tue, 10 Nov 2026 18:25:48 +0700
Subject: [PATCH 04/14] test(cinema): prevent mobile seatmap zoom, center zone
 and selected-color regressions

---
 scripts/seatmap-ui-test.mjs | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 scripts/seatmap-ui-test.mjs

diff --git a/scripts/seatmap-ui-test.mjs b/scripts/seatmap-ui-test.mjs
new file mode 100644
index 00000000..c5bc91a2
--- /dev/null
+++ b/scripts/seatmap-ui-test.mjs
@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+
+const component = readFileSync('src/components/SeatMap.astro', 'utf8');
+const style = readFileSync('src/styles/seatmap-redesign.css', 'utf8');
+
+for (const control of ['zoom-out', 'zoom-in', 'zoom-fit', 'zoom-reset', 'zoom-value']) {
+  assert.ok(component.includes('data-seatmap-' + control), 'Missing zoom control: ' + control);
+}
+assert.match(component, /const ZOOM_MIN = 0\.45;/, 'Minimum zoom must be bounded');
+assert.match(component, /const ZOOM_MAX = 1\.8;/, 'Maximum zoom must be bounded');
+assert.match(component, /stage\.style\.zoom = String\(next\)/, 'Zoom must affect stage layout, not just transform paint');
+assert.match(component, /touchmove/, 'Touch pinch handler missing');
+assert.match(component, /passive: false/, 'Pinch should prevent native zoom of the whole page');
+assert.match(component, /root\.parentElement !== document\.body/, 'Modal needs to escape parent stacking context');
+assert.match(style, /z-index: 1200/, 'Modal must overlay sticky mobile header');
+assert.match(component, /data-seatmap-center-zone/, 'Center frame geometry missing');
+assert.match(component, /pointer-events/, 'Center zone frame should not block seat selections');
+assert.match(style, /pointer-events: none/, 'Center frame must allow clicking seats');
+assert.match(style, /\.seatmap__swatch--center/, 'Legend lacks center zone outline');
+assert.match(component, /Vùng trung tâm \(tham khảo\)/, 'Avoid implying this is official provider zone data');
+assert.match(component, /button\.classList\.add\('seat--selected'\)/, 'Selecting must apply dedicated CSS class');
+assert.match(component, /button\.classList\.remove\('seat--selected'\)/, 'Deselecting must remove dedicated CSS class');
+assert.match(component, /button\.setAttribute\('aria-pressed', 'true'\)/, 'Selected seat must remain accessible');
+assert.match(style, /\.seatmap \.seat\.seat--selected[\s\S]*?background: #19b3a8 !important/, 'Teal must always override provider type color');
+assert.ok(!component.includes('Mua vé'), 'Preview cannot imply it purchases tickets');
+
+console.log('PASS: seat map zoom, selection color, central zone geometry and mobile modal precedence');

From fe8821dff1a3cf74f76e760000d60cef76c54305 Mon Sep 17 00:00:00 2001
From: David Nguyen <h250694@gmail.com>
Date: Tue, 10 Nov 2026 18:26:04 +0700
Subject: [PATCH 05/14] test(cinema): assert center zone click-through in
 stylesheet only

---
 scripts/seatmap-ui-test.mjs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scripts/seatmap-ui-test.mjs b/scripts/seatmap-ui-test.mjs
index c5bc91a2..9915427b 100644
--- a/scripts/seatmap-ui-test.mjs
+++ b/scripts/seatmap-ui-test.mjs
@@ -16,7 +16,6 @@ assert.match(component, /passive: false/, 'Pinch should prevent native zoom of t
 assert.match(component, /root\.parentElement !== document\.body/, 'Modal needs to escape parent stacking context');
 assert.match(style, /z-index: 1200/, 'Modal must overlay sticky mobile header');
 assert.match(component, /data-seatmap-center-zone/, 'Center frame geometry missing');
-assert.match(component, /pointer-events/, 'Center zone frame should not block seat selections');
 assert.match(style, /pointer-events: none/, 'Center frame must allow clicking seats');
 assert.match(style, /\.seatmap__swatch--center/, 'Legend lacks center zone outline');
 assert.match(component, /Vùng trung tâm \(tham khảo\)/, 'Avoid implying this is official provider zone data');

From 79644b8af04fb18d3114b611febec2d2afc56ef9 Mon Sep 17 00:00:00 2001
From: David Nguyen <h250694@gmail.com>
Date: Tue, 10 Nov 2026 18:26:44 +0700
Subject: [PATCH 06/14] test(cinema): run seat map interaction regression check
 in CI and Pages preview

---
 .github/workflows/pages-stage.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/pages-stage.yml b/.github/workflows/pages-stage.yml
index 3e92d0d1..4fbc0b70 100644
--- a/.github/workflows/pages-stage.yml
+++ b/.github/workflows/pages-stage.yml
@@ -87,6 +87,7 @@ jobs:
           node scripts/rewrite-links.mjs
           node scripts/smoke-test.mjs
           node scripts/seat-color-test.mjs
+          node scripts/seatmap-ui-test.mjs
           node scripts/seo-audit.mjs
 
       - name: Stage full site and preview into gh-pages

From b7795eb588bfa9f79b5808f2adca7aaf58af9d29 Mon Sep 17 00:00:00 2001
From: David Nguyen <h250694@gmail.com>
Date: Tue, 10 Nov 2026 18:26:50 +0700
Subject: [PATCH 07/14] test(cinema): run seat map interaction regression check
 in CI and Pages preview

---
 .github/workflows/ci.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 35e62509..9a48cd86 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -34,6 +34,7 @@ jobs:
           node scripts/rewrite-links.mjs
           node scripts/smoke-test.mjs
           node scripts/seat-color-test.mjs
+          node scripts/seatmap-ui-test.mjs
           node scripts/seo-audit.mjs
           node scripts/check-outbound-links.mjs
       - name: Verify explicitly indexable build

From 2aad326cc169edb4a359b35a76e2411768f1abda Mon Sep 17 00:00:00 2001
From: David Nguyen <h250694@gmail.com>
Date: Tue, 10 Nov 2026 18:28:27 +0700
Subject: [PATCH 08/14] fix(cinema): keep green center-zone legend border
 against generic swatch reset

---
 src/styles/seatmap-redesign.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/seatmap-redesign.css b/src/styles/seatmap-redesign.css
index 34f14e01..021c562d 100644
--- a/src/styles/seatmap-redesign.css
+++ b/src/styles/seatmap-redesign.css
@@ -39,7 +39,7 @@
   border: 2px solid #7cdaa4; border-radius: 11px;
   box-shadow: 0 0 0 1px rgba(10, 34, 20, .6), inset 0 0 0 1px rgba(14, 29, 18, .3);
 }
-.seatmap .seatmap__swatch--center {
+.seatmap .seatmap__legend .seatmap__swatch--center {
   background: transparent; border: 2px solid #7cdaa4; border-radius: 4px;
 }
 .seatmap .seatmap__header {

From 2cd1518dcaed588e7bdc742ae2642cfe4fea7a0b Mon Sep 17 00:00:00 2001
From: David Nguyen <h250694@gmail.com>
Date: Tue, 10 Nov 2026 18:41:25 +0700
Subject: [PATCH 09/14] fix(cinema): estimate center zone from contiguous seat
 bank and exclude cross-aisle gaps

---
 src/lib/seat-center-zone.js | 80 +++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 src/lib/seat-center-zone.js

diff --git a/src/lib/seat-center-zone.js b/src/lib/seat-center-zone.js
new file mode 100644
index 00000000..8e0b637e
--- /dev/null
+++ b/src/lib/seat-center-zone.js
@@ -0,0 +1,80 @@
+/**
+ * Approximate the visual middle of the main seating block.
+ * This is NOT a provider-defined best-seat or premium-zone classification.
+ *
+ * Input: [{ seats: [{ x, y, width, height }, ...] }, ...]
+ * Occupancy and seat type do not influence geometry.
+ */
+export function estimateCenterZone(rows) {
+  if (!Array.isArray(rows)) return null;
+  const validRows = rows.map(row => {
+    const seats = (row?.seats || []).filter(p =>
+      [p.x, p.y, p.width, p.height].every(Number.isFinite) && p.width > 0 && p.height > 0);
+    if (!seats.length) return null;
+    return {
+      seats,
+      top: Math.min(...seats.map(p => p.y)),
+      bottom: Math.max(...seats.map(p => p.y + p.height)),
+      height: Math.max(...seats.map(p => p.height))
+    };
+  }).filter(Boolean).sort((a,b) => a.top - b.top);
+  if (validRows.length < 4) return null;
+
+  // A blank aisle between successive banks must never be spanned by one frame.
+  const gaps = validRows.slice(1).map((row,i) => Math.max(0, row.top - validRows[i].bottom));
+  const sorted = [...gaps].sort((a,b) => a-b);
+  const medianGap = sorted.length ? sorted[Math.floor((sorted.length-1)/2)] : 0;
+  const maxSeatHeight = Math.max(...validRows.map(row=>row.height));
+  const aisleThreshold = Math.max(maxSeatHeight * 0.7, medianGap * 2.4);
+
+  const blocks = [];
+  let block = [validRows[0]];
+  for (let i = 1; i < validRows.length; i++) {
+    if (gaps[i-1] > aisleThreshold) {
+      blocks.push(block);
+      block = [];
+    }
+    block.push(validRows[i]);
+  }
+  blocks.push(block);
+
+  // The main continuous auditorium block is the block with the most seats.
+  // A smaller detached row/bank at the back is not included in its box.
+  const primary = blocks.reduce((best, current) => {
+    const count = a => a.reduce((sum,row)=>sum + row.seats.length,0);
+    return count(current)>count(best) ? current : best;
+  }, blocks[0]);
+  if (primary.length < 4) return null;
+
+  // A central viewing band is typically around the middle/back-middle of the
+  // main uninterrupted seat bank. Use 40–90% (row indices are screen-to-back).
+  const start = Math.floor(primary.length * 0.4);
+  const end = Math.max(start + 1, Math.ceil(primary.length * 0.9) - 1);
+  const middleRows = primary.slice(start, Math.min(primary.length,end+1));
+  const seats = middleRows.flatMap(row=>row.seats);
+  if (seats.length < 6) return null;
+
+  const minX = Math.min(...seats.map(s=>s.x));
+  const maxX = Math.max(...seats.map(s=>s.x+s.width));
+  const centerX = (minX+maxX)/2;
+  const halfBand = (maxX-minX)*0.22;
+  const centralSeats = seats.filter(seat => {
+    const mid = seat.x + seat.width/2;
+    return mid>=centerX-halfBand && mid<=centerX+halfBand;
+  });
+  if (centralSeats.length < 6) return null;
+
+  const left = Math.min(...centralSeats.map(s=>s.x));
+  const right = Math.max(...centralSeats.map(s=>s.x+s.width));
+  // Use only the chosen continuous rows, including the end row even when
+  // its central seats happen to be occupied (occupied still counts above).
+  const top = middleRows[0].top;
+  const bottom = middleRows[middleRows.length-1].bottom;
+
+  return {
+    x: left-5, y: top-5,
+    width: right-left+10, height: bottom-top+10,
+    firstMainRow: start, lastMainRow: Math.min(primary.length-1,end),
+    mainRowCount: primary.length, blockCount: blocks.length
+  };
+}

From 6f9f61cbd85fe67c65dfe6556af299d0f7f10695 Mon Sep 17 00:00:00 2001
From: David Nguyen <h250694@gmail.com>
Date: Tue, 10 Nov 2026 18:41:52 +0700
Subject: [PATCH 10/14] fix(cinema): center highlight follows main continuous
 seating bank instead of bridging aisles

---
 src/components/SeatMap.astro | 51 ++++++++++++++++--------------------
 1 file changed, 22 insertions(+), 29 deletions(-)

diff --git a/src/components/SeatMap.astro b/src/components/SeatMap.astro
index a52baa4b..77c5562d 100644
--- a/src/components/SeatMap.astro
+++ b/src/components/SeatMap.astro
@@ -116,6 +116,7 @@ import '../styles/seatmap-redesign.css';
 <script>
   import { loadSeats } from '../lib/momo-client.js';
   import { seatTypePalette, seatColorStyle } from '../lib/seat-colors.js';
+  import { estimateCenterZone } from '../lib/seat-center-zone.js';
 
   const root = document.querySelector('[data-seatmap]');
   if (root) {
@@ -209,41 +210,31 @@ import '../styles/seatmap-redesign.css';
 
     function drawCenterRegion() {
       const grid = bodyEl.querySelector('[data-seatmap-grid]');
-      if (!grid) return;
+      if (!grid) return false;
       grid.querySelector('[data-seatmap-center-zone]')?.remove();
-      const rows = [...grid.querySelectorAll('.seatmap__row')];
-      if (rows.length < 4) return;
-      // An approximate visual guide, not a provider-defined pricing category.
-      // Compute from the rendered seat geometry so the frame stays aligned
-      // across screen sizes, aisle gaps and any zoom level.
-      const all = rows.flatMap(row => [...row.querySelectorAll('.seat:not(.seat--gap)')]);
-      if (all.length < 12) return;
-      const minX = Math.min(...all.map(seat => seat.offsetLeft));
-      const maxX = Math.max(...all.map(seat => seat.offsetLeft + seat.offsetWidth));
-      const leftTarget = minX + (maxX - minX) * 0.24;
-      const rightTarget = minX + (maxX - minX) * 0.76;
-      const firstRow = Math.floor(rows.length * 0.30);
-      const lastRow = Math.min(rows.length - 1, Math.ceil(rows.length * 0.72));
-      const candidates = rows.slice(firstRow, lastRow + 1).flatMap(row =>
-        [...row.querySelectorAll('.seat:not(.seat--gap)')].filter(seat => {
-          const middleX = seat.offsetLeft + seat.offsetWidth / 2;
-          return middleX >= leftTarget && middleX <= rightTarget;
-        })
-      );
-      if (candidates.length < 6) return;
-      const x = Math.min(...candidates.map(seat => seat.offsetLeft));
-      const y = Math.min(...candidates.map(seat => seat.offsetTop));
-      const right = Math.max(...candidates.map(seat => seat.offsetLeft + seat.offsetWidth));
-      const bottom = Math.max(...candidates.map(seat => seat.offsetTop + seat.offsetHeight));
+      // Use the seat positions that are actually rendered, not raw row
+      // indices: detached banks after an aisle must not stretch the box.
+      const seatRows = [...grid.querySelectorAll('.seatmap__row')].map(row => ({
+        seats: [...row.querySelectorAll('.seat:not(.seat--gap)')].map(seat => ({
+          x: seat.offsetLeft,
+          y: seat.offsetTop,
+          width: seat.offsetWidth,
+          height: seat.offsetHeight
+        }))
+      }));
+      const zone = estimateCenterZone(seatRows);
+      if (!zone) return false;
       const frame = document.createElement('div');
       frame.className = 'seatmap__center-zone';
       frame.dataset.seatmapCenterZone = '';
       frame.setAttribute('aria-hidden', 'true');
+      frame.title = 'Ước lượng khu vực giữa dãy ghế chính, không bao gồm lối đi.';
       Object.assign(frame.style, {
-        left: (x - 5) + 'px', top: (y - 5) + 'px',
-        width: (right - x + 10) + 'px', height: (bottom - y + 10) + 'px'
+        left: zone.x + 'px', top: zone.y + 'px',
+        width: zone.width + 'px', height: zone.height + 'px'
       });
       grid.append(frame);
+      return true;
     }
 
     zoomOutBtn.addEventListener('click', () => applyZoom(zoom - ZOOM_STEP));
@@ -302,14 +293,16 @@ import '../styles/seatmap-redesign.css';
           ${unknownLegend}
           <span><i class="seatmap__swatch seatmap__swatch--taken"></i>Đã đặt</span>
           <span><i class="seatmap__swatch seatmap__swatch--selected"></i>Đang chọn</span>
-          <span><i class="seatmap__swatch seatmap__swatch--center"></i>Vùng trung tâm (tham khảo)</span>
+          <span data-seatmap-center-legend><i class="seatmap__swatch seatmap__swatch--center"></i>Giữa dãy ghế chính (ước lượng)</span>
         </div>`;
       zoom = 1;
       zoomControls.hidden = false;
       zoomValueEl.textContent = '100%';
       zoomOutBtn.disabled = false;
       zoomInBtn.disabled = false;
-      drawCenterRegion();
+      const hasCenterZone = drawCenterRegion();
+      const centerLegend = bodyEl.querySelector('[data-seatmap-center-legend]');
+      if (centerLegend) centerLegend.hidden = !hasCenterZone;
       const scroller = bodyEl.querySelector('[data-seatmap-scroll]');
       const stage = bodyEl.querySelector('[data-seatmap-stage]');
       naturalStageWidth = stage?.offsetWidth || 0;

From 76dbcb240d9eba0334e37e89f119079387ecec0d Mon Sep 17 00:00:00 2001
From: David Nguyen <h250694@gmail.com>
Date: Tue, 10 Nov 2026 18:42:21 +0700
Subject: [PATCH 11/14] test(cinema): check new aisle-aware central-seat
 explanation

---
 scripts/seatmap-ui-test.mjs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/scripts/seatmap-ui-test.mjs b/scripts/seatmap-ui-test.mjs
index 9915427b..05b6ec54 100644
--- a/scripts/seatmap-ui-test.mjs
+++ b/scripts/seatmap-ui-test.mjs
@@ -18,7 +18,8 @@ assert.match(style, /z-index: 1200/, 'Modal must overlay sticky mobile header');
 assert.match(component, /data-seatmap-center-zone/, 'Center frame geometry missing');
 assert.match(style, /pointer-events: none/, 'Center frame must allow clicking seats');
 assert.match(style, /\.seatmap__swatch--center/, 'Legend lacks center zone outline');
-assert.match(component, /Vùng trung tâm \(tham khảo\)/, 'Avoid implying this is official provider zone data');
+assert.match(component, /Giữa dãy ghế chính \(ước lượng\)/, 'Do not claim an official provider central-seat classification');
+assert.match(component, /estimateCenterZone\(seatRows\)/, 'Use aisle-aware center seat estimator');
 assert.match(component, /button\.classList\.add\('seat--selected'\)/, 'Selecting must apply dedicated CSS class');
 assert.match(component, /button\.classList\.remove\('seat--selected'\)/, 'Deselecting must remove dedicated CSS class');
 assert.match(component, /button\.setAttribute\('aria-pressed', 'true'\)/, 'Selected seat must remain accessible');

From eb9783969773e9684143cb3d03e79f00abaa7d6f Mon Sep 17 00:00:00 2001
From: David Nguyen <h250694@gmail.com>
Date: Tue, 10 Nov 2026 18:42:44 +0700
Subject: [PATCH 12/14] test(cinema): reproduce reported H-J aisle bug with
 geometry fixtures

---
 scripts/seat-center-zone-test.mjs | 57 +++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 scripts/seat-center-zone-test.mjs

diff --git a/scripts/seat-center-zone-test.mjs b/scripts/seat-center-zone-test.mjs
new file mode 100644
index 00000000..9061efba
--- /dev/null
+++ b/scripts/seat-center-zone-test.mjs
@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+import assert from 'node:assert/strict';
+import { estimateCenterZone } from '../src/lib/seat-center-zone.js';
+
+const createRow = (y, xs, occupied = false) => ({
+  seats: xs.map(x=>({x,y,width:27,height:27,occupied}))
+});
+
+// Reproduces the reported CGV layout: eight contiguous rows A-H, then a
+// detached, smaller J-K block separated by a walkable aisle. The old algorithm
+// stretched the center frame from D to J; the new one MUST stop by H.
+const mainXs = [300,334,368,402,436,470,504,538];
+const frontBank = Array.from({length:8},(_,i)=>createRow(i*35,mainXs,i>4));
+const rearBank = [createRow(365,[140,174,...mainXs]),createRow(400,[140,174,...mainXs])];
+const cg = estimateCenterZone([...frontBank,...rearBank]);
+assert.ok(cg, 'CGV center frame should exist');
+assert.equal(cg.blockCount,2,'Detached back-row bank must not merge into main');
+assert.equal(cg.mainRowCount,8,'A-H are the main continuous block');
+assert.equal(cg.firstMainRow,3,'Central rows should start around row D');
+assert.equal(cg.lastMainRow,7,'Central rows must stop at row H');
+assert.ok(cg.y>frontBank[2].seats[0].y,'Frame starts behind front rows');
+assert.ok(cg.y+cg.height<rearBank[0].seats[0].y,
+  'Frame MUST NOT cross the physical aisle before J');
+assert.ok(cg.x>285 && cg.x+cg.width<555,'Frame stays near central occupied seats');
+assert.ok(cg.width>40 && cg.height>70,'Frame should cover meaningful seats');
+
+// All-occupied geometry must produce the same location; availability cannot
+// change which seating area is objectively in the middle.
+const blocked = estimateCenterZone([...frontBank,...rearBank].map(r => ({
+  seats: r.seats.map(s=>({...s,occupied:true}))
+})));
+assert.deepEqual(blocked,cg,'Seat occupancy cannot alter central-zone position');
+
+// A normal theater with no aisle produces one meaningful box.
+const standard = estimateCenterZone(
+  Array.from({length:11},(_,i)=>createRow(i*34,Array.from({length:12},(_,j)=>j*34)))
+);
+assert.ok(standard && standard.blockCount===1);
+assert.ok(standard.x>70 && standard.x+standard.width<340);
+assert.ok(standard.lastMainRow<11);
+
+// A rear block with more seats than the front should be selected on its own,
+// rather than combining separated seating sections into an enormous rectangle.
+const rearBig = [
+  ...[0,35,70,105].map(y=>createRow(y,[80,115,150,185,220,255])),
+  ...[200,235,270,305,340,375,410].map(y=>createRow(y,[0,35,70,105,140,175,210,245,280,315]))
+];
+const rearZone=estimateCenterZone(rearBig);
+assert.equal(rearZone.blockCount,2);
+assert.equal(rearZone.mainRowCount,7);
+assert.ok(rearZone.y>=200,'Choose main contiguous rear block, without crossing aisle');
+
+// Do not draw misleading pseudo-precision for tiny or malformed seating plans.
+assert.equal(estimateCenterZone([]),null);
+assert.equal(estimateCenterZone([createRow(0,[1]),createRow(35,[1])]),null);
+assert.equal(estimateCenterZone([{seats:[{x:NaN,y:1,width:1,height:1}]}]),null);
+console.log('PASS: center frame avoids the H-J aisle, uses the main bank, and ignores occupancy');

From 083b62b7c4c15ceb0b3d422dc784bb15a3db4eeb Mon Sep 17 00:00:00 2001
From: David Nguyen <h250694@gmail.com>
Date: Tue, 10 Nov 2026 18:42:58 +0700
Subject: [PATCH 13/14] test(cinema): run central-seat aisle regression in CI
 and Pages builds

---
 .github/workflows/ci.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 9a48cd86..53fa0e68 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -35,6 +35,7 @@ jobs:
           node scripts/smoke-test.mjs
           node scripts/seat-color-test.mjs
           node scripts/seatmap-ui-test.mjs
+          node scripts/seat-center-zone-test.mjs
           node scripts/seo-audit.mjs
           node scripts/check-outbound-links.mjs
       - name: Verify explicitly indexable build

From ce51069469bf97c62dd6958791b673b43007c3b5 Mon Sep 17 00:00:00 2001
From: David Nguyen <h250694@gmail.com>
Date: Tue, 10 Nov 2026 18:43:01 +0700
Subject: [PATCH 14/14] test(cinema): run central-seat aisle regression in CI
 and Pages builds

---
 .github/workflows/pages-stage.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/pages-stage.yml b/.github/workflows/pages-stage.yml
index 4fbc0b70..85d58035 100644
--- a/.github/workflows/pages-stage.yml
+++ b/.github/workflows/pages-stage.yml
@@ -88,6 +88,7 @@ jobs:
           node scripts/smoke-test.mjs
           node scripts/seat-color-test.mjs
           node scripts/seatmap-ui-test.mjs
+          node scripts/seat-center-zone-test.mjs
           node scripts/seo-audit.mjs
 
       - name: Stage full site and preview into gh-pages