@libs-ui/services-grid-layout 0.2.357-25 → 0.2.357-27

package/fesm2022/libs-ui-services-grid-layout.mjs

@@ -6,6 +6,7 @@ import * as i1 from 'gridster18';
 import { GridType, CompactType, DisplayGrid, GridsterComponent, GridsterModule } from 'gridster18';
 import { NgTemplateOutlet } from '@angular/common';
 import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
+import { LibsUiComponentsScrollOverlayDirective } from '@libs-ui/components-scroll-overlay';
 import * as i2 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -307,7 +308,11 @@ rowStep = 68) => {
     const elements = typeof document.elementsFromPoint === 'function'
         ? document.elementsFromPoint(event.clientX, event.clientY)
         : [];
-    const hovered = findHoveredGroup(elements, canvasContainer, root);
+    // Nơi dùng khai `canDropInsideContainer: false` thì coi như KHÔNG rê qua khối ghép nào: không tô
+    // ô li lên khối ghép, và bóng thả rơi về toạ độ cấp mặt phẳng — đúng chỗ khối sẽ nằm khi thả.
+    const hovered = payload.canDropInsideContainer === false
+        ? undefined
+        : findHoveredGroup(elements, canvasContainer, root);
     const stageMouseX = (event.clientX - stageRect.left) / zoom;
     const stageMouseY = (event.clientY - stageRect.top) / zoom;
     if (hovered) {
@@ -771,6 +776,23 @@ class LibsUiGridLayoutService {
         // gridster vẫn giữ options cũ — chuyển sang XEM mà khối vẫn kéo được.
         this.version.update((v) => v + 1);
     }
+    /**
+     * Đổi số hàng TỐI THIỂU của lưới cấp trang — KHÔNG dựng lại mặt phẳng.
+     *
+     * 🔴 `minRows` chỉ được đọc MỘT LẦN lúc `init()`, nên nơi dùng muốn đổi nó theo chế độ (sửa thì ô
+     * li phủ kín màn, xem thì đúng số hàng của bố cục) buộc phải gọi `init()` lại — mà `init()` huỷ
+     * sạch rồi dựng lại mọi component nội dung. Hệ quả đo được 15/09/2026: mở ở chế độ xem rồi bấm
+     * Sửa thì lưới đứng ở số hàng của bố cục (28 hàng = 448px) trong khi vùng nhìn cao hơn nhiều, nên
+     * ô li ngừng ngay dưới khối cuối và phần còn lại trống trơn không có đường kẻ nào.
+     */
+    setMinRows(value) {
+        if (!this.config || !Number.isFinite(value) || value <= 0) {
+            return;
+        }
+        this.config = { ...this.config, minRows: value };
+        // Bơm `version` để `gridOptions` bên canvas tính lại — cùng lý do như `setEditMode`.
+        this.version.update((v) => v + 1);
+    }
     /**
      * Bật/tắt cho khối chồng lên nhau — KHÔNG dựng lại mặt phẳng.
      *
@@ -824,6 +846,7 @@ class LibsUiGridLayoutService {
             ...(depth > 0 && config.nestedRowHeight !== undefined ? { fixedRowHeight: config.nestedRowHeight } : {}),
             ...(depth === 0 && config.outerMargin !== undefined ? { outerMargin: config.outerMargin } : {}),
             ...(depth === 0 && config.outerMarginBottom !== undefined ? { outerMarginBottom: config.outerMarginBottom } : {}),
+            ...(depth === 0 && config.outerMarginTop !== undefined ? { outerMarginTop: config.outerMarginTop } : {}),
             ...(config.minItemRows !== undefined ? { minItemRows: config.minItemRows } : {}),
             ...(config.defaultItemCols !== undefined ? { defaultItemCols: config.defaultItemCols } : {}),
             ...(config.defaultItemRows !== undefined ? { defaultItemRows: config.defaultItemRows } : {}),
@@ -1398,6 +1421,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 
+/**
+ * Cầu nối cho phép một phần tử BÁO CÁO scroll của phần tử khác.
+ *
+ * 🔴 Vì sao tồn tại: `angular-gridster2` đổi vị trí chuột thành ô lưới bằng
+ * `e.clientY + (el.scrollTop - el.offsetTop)` — công thức chỉ đúng khi CHÍNH `<gridster>` là phần tử
+ * cuộn. Ở mặt phẳng có THU PHÓNG, việc cuộn nằm ở khung bọc còn `<gridster>` giữ đủ cỡ sân khấu bên
+ * trong một tầng `transform: scale`, nên `el.scrollTop` luôn bằng 0: mọi px người dùng cuộn đều vô
+ * hình với thư viện. Hệ quả đo được 15/09/2026: tự cuộn lúc kéo không chạy, và nếu nơi dùng tự cuộn
+ * thì khối đứng im trong khi mặt phẳng trôi.
+ *
+ * 🔴 CHỈ vá `scrollTop`/`scrollLeft`. CẤM đụng `offsetWidth`/`offsetHeight`: `setGridSize()` của
+ * gridster đọc hai cái đó để tính bề rộng cột, đè vào là vỡ lưới.
+ */
+/**
+ * Cắm cầu nối, trả về hàm gỡ.
+ *
+ * `zoom` là hàm chứ không phải số: mức phóng đổi bất cứ lúc nào, đọc lại mỗi lần truy cập mới đúng.
+ * Chia cho mức phóng vì `offsetTop` là px BỐ CỤC còn scroll của khung bọc đã nhân thu phóng — không
+ * quy đổi thì ở mức khác 100% khối trôi nhanh hơn hoặc chậm hơn con trỏ.
+ */
+const bridgeScrollBetweenElements = (target, source, zoom) => {
+    const mucPhong = () => {
+        const value = zoom();
+        return Number.isFinite(value) && value > 0 ? value : 1;
+    };
+    Object.defineProperty(target, 'scrollTop', {
+        configurable: true,
+        get: () => source.scrollTop / mucPhong(),
+        set: (val) => {
+            source.scrollTop = val * mucPhong();
+        },
+    });
+    Object.defineProperty(target, 'scrollLeft', {
+        configurable: true,
+        get: () => source.scrollLeft / mucPhong(),
+        set: (val) => {
+            source.scrollLeft = val * mucPhong();
+        },
+    });
+    // Xoá thuộc tính RIÊNG vừa cắm là trả lại accessor gốc của `Element` — nhờ `configurable: true`.
+    return () => {
+        delete target['scrollTop'];
+        delete target['scrollLeft'];
+    };
+};
+/**
+ * Bước cuộn cho một trục khi con trỏ đang ở sát mép vùng cuộn.
+ *
+ * Trả `0` khi con trỏ còn ở giữa. Mép DƯỚI/PHẢI được soát trước: con trỏ ra ngoài hẳn khung thì
+ * `pos` vượt `max`, phải cuộn xuôi chứ không phải ngược.
+ */
+const edgeScrollStep = (options) => {
+    // 🔴 Mép kích hoạt KHÔNG được rộng quá 1/4 cạnh khung. Khung nhỏ (ruột khối ghép nhiều khi chỉ cao
+    // vài chục px) thì hai vùng mép chạm nhau, đặt con trỏ ở đâu trong đó mặt phẳng cũng tự trôi — và
+    // trôi cả hai chiều ngược nhau tuỳ thứ tự kiểm.
+    const mep = Math.min(options.edge, (options.max - options.min) / 4);
+    if (options.max - options.pos < mep) {
+        return options.step;
+    }
+    if (options.pos - options.min < mep) {
+        return -options.step;
+    }
+    return 0;
+};
+
 /**
  * Mặt phẳng kéo thả. Đệ quy: khối có `children` thì ruột nó lại là một mặt phẳng nữa.
  *
@@ -1486,7 +1574,48 @@ class LibsUiGridLayoutCanvasComponent {
     outConfigNode = output();
     gridsterRef = viewChild(GridsterComponent);
     scrollAreaRef = viewChild('scrollArea');
+    /**
+     * Cầm BẤT CỨ ĐÂU trên khối để kéo, thay cho dải kéo ba chấm.
+     *
+     * 🔴 Mặc định `false` — giữ nguyên luật đã chốt 28/08/2026 cho mọi sản phẩm: *"phải hover vào vùng
+     * màu xanh thì mới kéo thả được cho đồng nhất"*. Nơi dùng nào muốn kiểu "cầm vào thẻ là kéo" thì tự
+     * bật, không đổi hành vi của màn khác.
+     *
+     * Bật lên thì dải kéo biến mất và gridster chuyển sang `ignoreContent: false` — cho kéo từ mọi chỗ
+     * TRỪ phần tử mang `ignoreContentClass`. Nhờ vậy khối con nằm trong khối ghép vẫn không nhấc nhầm
+     * khối ghép: vỏ khối con đã mang sẵn class chặn đó.
+     */
+    dragFromAnywhere = input(false);
+    /**
+     * Nơi dùng đã đẩy vùng cuộn DỌC vào thẳng `<gridster>` (bằng CSS của chính nó).
+     *
+     * 🔴 Bật cờ này là trả `angular-gridster2` về đúng giả định gốc của nó — `dragMove` đọc
+     * `gridster.el.scrollTop`, `scroll()` đo `gridsterElement.offsetHeight` — nên thư viện KHÔNG bắc
+     * cầu `scrollTop` sang khung bọc nữa, và vòng tự cuộn khi kéo cũng cuộn thẳng vào gridster.
+     *
+     * 🔴 PHẢI là input, KHÔNG dò bằng `getComputedStyle`: thanh cuộn nổi của libs-ui mới là thứ đặt
+     * `overflow` lên phần tử, mà nó chạy SAU `ngAfterViewInit` — dò lúc đó luôn ra "không cuộn" và cầu
+     * nối vẫn cắm vào, nuốt sạch đoạn cuộn thật (đo 15/09/2026: `g.scrollTop = 300` xong đọc lại vẫn 0).
+     */
+    gridsterOwnsScroll = input(false);
+    /**
+     * Vẽ thanh cuộn nổi của libs-ui cho mặt phẳng LỒNG (ruột khối ghép).
+     *
+     * 🔴 Vùng cuộn của mặt phẳng lồng phải giấu thanh cuộn mặc định của trình duyệt — nó dày, xám, và
+     * ăn mất bề rộng của lưới con nên 24 cột hẹp lại mỗi khi nội dung vừa đủ tràn. Hệ quả là người
+     * dùng cuộn được nhưng KHÔNG THẤY có gì để cuộn: thẻ con nằm dưới đáy trông như biến mất (người
+     * dùng chỉ ra 16/09/2026). Bật cờ này để thư viện gắn thanh cuộn nổi — nhìn thấy được mà không
+     * chiếm chỗ.
+     */
+    nestedScrollbar = input(false);
     zoomDockRef = viewChild('zoomDock');
+    /** Gỡ cầu nối scroll đã cắm lên phần tử `<gridster>` — xem `bridgeScrollToGridster`. */
+    removeScrollBridge;
+    /** Gỡ vòng tự cuộn khi kéo — xem `startDragAutoScroll`. */
+    stopDragAutoScroll;
+    /** Khoảng cách tới mép vùng cuộn (px) bắt đầu tự cuộn, và bước cuộn mỗi khung hình. */
+    dragScrollEdge = 36;
+    dragScrollStep = 8;
     /** mỗi ô một chỗ gắn riêng — cùng thứ tự với `children()` */
     itemHosts = viewChildren('itemHost', { read: ViewContainerRef });
     /**
@@ -1559,6 +1688,13 @@ class LibsUiGridLayoutCanvasComponent {
         toggleType: () => this.emitToggleType(item),
     })));
     isNestedCanvas = computed(() => this.depth() > 0);
+    /** Chỉ mặt phẳng LỒNG mới vẽ thanh cuộn nổi — mặt phẳng gốc do nơi dùng tự lo. */
+    showNestedScrollbar = computed(() => this.isNestedCanvas() && this.nestedScrollbar());
+    /**
+     * Chỉ cuộn DỌC: bề rộng khối con luôn bị gridster kẹp trong số cột của lưới nên không có gì để
+     * cuộn ngang.
+     */
+    nestedScrollOverlayOptions = { scrollX: 'hidden', scrollY: 'scroll' };
     /**
      * Khe nhìn thấy giữa các khối CẤP GỐC. Mặt phẳng lồng trả 0 — khối con là các dòng của cùng một
      * thẻ, tách chúng ra làm chúng trông như thẻ rời.
@@ -1580,7 +1716,17 @@ class LibsUiGridLayoutCanvasComponent {
         // Đọc `Version` để `init()` lại (đổi chế độ, bật/tắt chồng khối) sinh ra options MỚI —
         // gridster chỉ áp dụng cấu hình khi tham chiếu `options` đổi.
         this.service.Version();
-        return this.service.FunctionsControl.gridsterOptions(this.depth(), () => this.outChange.emit({ root: this.currentNode() }));
+        const options = this.service.FunctionsControl.gridsterOptions(this.depth(), () => this.outChange.emit({ root: this.currentNode() }));
+        if (!this.dragFromAnywhere()) {
+            return options;
+        }
+        // 🔴 `delayStart` PHẢI khác 0 ở chế độ này. Với tay cầm chuyên dụng thì `0` là đúng (bấm vào dải
+        // chỉ có thể là ý định kéo), nhưng khi cả thẻ là tay cầm thì `0` nuốt luôn mọi cú bấm vào nút và
+        // liên kết bên trong thẻ. 150ms: bấm nhanh vẫn ăn, giữ lại một nhịp mới là kéo.
+        return {
+            ...options,
+            draggable: { ...options.draggable, ignoreContent: false, delayStart: 150 },
+        };
     });
     constructor() {
         // Gắn component của nơi dùng vào từng ô, và gắn LẠI mỗi khi cây đổi.
@@ -1619,6 +1765,7 @@ class LibsUiGridLayoutCanvasComponent {
         });
     }
     ngAfterViewInit() {
+        this.bridgeScrollToGridster();
         if (!this.isZoomActive() || !this.autoFitOnLoad()) {
             return;
         }
@@ -1642,6 +1789,8 @@ class LibsUiGridLayoutCanvasComponent {
         }
     }
     ngOnDestroy() {
+        this.removeScrollBridge?.();
+        this.stopDragAutoScroll?.();
         this.cleanupDragGrid();
         for (const item of this.children()) {
             this.service.FunctionsControl.detachNode(item.id);
@@ -1664,6 +1813,110 @@ class LibsUiGridLayoutCanvasComponent {
             scrollArea: () => this.scrollAreaRef()?.nativeElement,
         };
     }
+    /**
+     * Bắc CẦU NỐI để `<gridster>` báo cáo scroll của KHUNG CUỘN, thay vì scroll của chính nó.
+     *
+     * 🔴 Vì sao cần: gridster đổi vị trí chuột thành ô lưới bằng
+     * `e.clientY + (el.scrollTop - el.offsetTop)` (xem `calculateItemPositionWithoutScale` và
+     * `this.offsetTop = this.gridster.el.scrollTop - this.gridster.el.offsetTop` trong
+     * `angular-gridster2@18`). Công thức chỉ đúng khi CHÍNH `<gridster>` là phần tử cuộn — đúng như
+     * comment đã ghi ở template cho `offsetParent`. Ở nhánh THU PHÓNG, việc cuộn nằm ở `#scrollArea`
+     * còn `<gridster>` giữ đủ cỡ sân khấu bên trong một tầng `transform: scale`, nên
+     * `el.scrollTop` luôn bằng 0: mọi px người dùng cuộn đều vô hình với thư viện. Hệ quả đo được
+     * 15/09/2026 trên mặt phẳng cấp trang: tự cuộn lúc kéo không chạy, và nếu nơi dùng tự cuộn thì thẻ
+     * đứng im trong khi mặt phẳng trôi.
+     *
+     * 🔴 CHỈ vá `scrollTop`/`scrollLeft`. CẤM đụng `offsetWidth`/`offsetHeight`: `setGridSize()` của
+     * gridster đọc hai cái đó để tính `curColWidth`, đè vào là vỡ bề rộng cột của mọi lưới.
+     *
+     * 🔴 Chia cho mức phóng: `offsetTop` là px BỐ CỤC, còn `scrollTop` của khung cuộn là px đã nhân
+     * thu phóng. Không quy đổi thì ở mức phóng khác 100% khối trôi nhanh hơn hoặc chậm hơn con trỏ.
+     */
+    /** Phần tử thật sự cuộn theo chiều dọc — `<gridster>` nếu nơi dùng đã đẩy cuộn vào trong nó. */
+    vungCuonDoc() {
+        const gridsterEl = this.gridsterRef()?.el;
+        if (this.gridsterOwnsScroll() && gridsterEl) {
+            return gridsterEl;
+        }
+        return this.scrollAreaRef()?.nativeElement;
+    }
+    bridgeScrollToGridster() {
+        // `GridsterComponent.el` là HTMLElement thẳng, không phải `ElementRef` (xem `gridster.component.d.ts`).
+        const gridsterEl = this.gridsterRef()?.el;
+        const scrollEl = this.scrollAreaRef()?.nativeElement;
+        if (!this.isZoomActive() || !gridsterEl || !scrollEl || this.removeScrollBridge) {
+            return;
+        }
+        // 🔴 `<gridster>` đã tự cuộn thì CẤM bắc cầu: cầu nối ghi đè `scrollTop`/`scrollLeft` của phần tử
+        // bằng số của khung bọc, nên chính đoạn cuộn thật của gridster bị nuốt — đặt `scrollTop` không
+        // ăn, kéo khối là nó nhảy về đầu lưới.
+        if (this.gridsterOwnsScroll()) {
+            return;
+        }
+        this.removeScrollBridge = bridgeScrollBetweenElements(gridsterEl, scrollEl, () => this.service.Zoom());
+    }
+    /**
+     * Tự cuộn mặt phẳng khi người dùng kéo khối tới sát mép.
+     *
+     * 🔴 Tự cuộn sẵn có của gridster (`scrollSensitivity`) không dùng được ở nhánh thu phóng: hàm
+     * `scroll()` của nó đo bằng `gridsterElement.offsetHeight`, mà `<gridster>` cao bằng CẢ sân khấu
+     * nên con trỏ không bao giờ "tới sát mép" theo con mắt của nó.
+     *
+     * 🔴 Chỉ cuộn khi thư viện ĐANG kéo thật (`.gridster-item-moving`) — không có chốt này thì một cú
+     * bấm bình thường gần mép cũng làm mặt phẳng trôi.
+     */
+    handlerScrollAreaPointerDown() {
+        this.startDragAutoScroll();
+    }
+    startDragAutoScroll() {
+        this.stopDragAutoScroll?.();
+        const scrollEl = this.scrollAreaRef()?.nativeElement;
+        const cuonDoc = this.vungCuonDoc();
+        if (!scrollEl) {
+            return;
+        }
+        let viTri;
+        let khung;
+        const chay = () => {
+            if (viTri && scrollEl.querySelector('.gridster-item-moving')) {
+                const hop = scrollEl.getBoundingClientRect();
+                const buoc = { edge: this.dragScrollEdge, step: this.dragScrollStep };
+                // `edgeScrollStep` tự kẹp mép theo cạnh khung, nên khung nhỏ như ruột khối ghép vẫn đúng.
+                const doc = edgeScrollStep({ ...buoc, pos: viTri.y, min: hop.top, max: hop.bottom });
+                const ngang = edgeScrollStep({ ...buoc, pos: viTri.x, min: hop.left, max: hop.right });
+                if (doc !== 0 || ngang !== 0) {
+                    // Hai chiều có thể nằm ở HAI phần tử khác nhau: nơi dùng được phép đẩy cuộn dọc vào trong
+                    // `<gridster>` mà vẫn để cuộn ngang ở khung bọc (sân khấu rộng hơn khung khi phóng to).
+                    (cuonDoc ?? scrollEl).scrollTop += doc;
+                    scrollEl.scrollLeft += ngang;
+                    // 🔴 Cuộn xong PHẢI bắn lại một nhịp `mousemove` ở đúng chỗ con trỏ đang đứng. gridster chỉ
+                    // tính lại vị trí khối trong `dragMove`, tức chỉ khi có sự kiện chuột — cuộn bằng mã mà
+                    // không bắn thì giữa hai lần người dùng rê chuột, mặt phẳng trôi còn khối đứng im rồi giật
+                    // về chỗ đúng ở nhịp sau (người dùng chỉ ra 15/09/2026: "kéo xuống dưới bị giật giật").
+                    // Bắn `mousemove` chứ không phải `pointermove`: draggable của gridster chỉ nghe `mousemove`
+                    // và `touchmove`, nên cũng không dội ngược vào chính listener bên dưới.
+                    document.dispatchEvent(new MouseEvent('mousemove', { clientX: viTri.x, clientY: viTri.y, bubbles: true, cancelable: true, view: window }));
+                }
+            }
+            khung = requestAnimationFrame(chay);
+        };
+        const theoChuot = (event) => {
+            viTri = { x: event.clientX, y: event.clientY };
+        };
+        this.stopDragAutoScroll = () => {
+            document.removeEventListener('pointermove', theoChuot);
+            document.removeEventListener('pointerup', dung);
+            if (khung !== undefined) {
+                cancelAnimationFrame(khung);
+                khung = undefined;
+            }
+            this.stopDragAutoScroll = undefined;
+        };
+        const dung = () => this.stopDragAutoScroll?.();
+        document.addEventListener('pointermove', theoChuot);
+        document.addEventListener('pointerup', dung);
+        chay();
+    }
     handlerZoomIn() {
         this.service.FunctionsControl.zoomIn(this.zoomStep(), this.storageKey());
         this.syncZoomOut();
@@ -1841,6 +2094,15 @@ class LibsUiGridLayoutCanvasComponent {
         if (this.depth() === 0) {
             return;
         }
+        // 🔴 `dragFromAnywhere` bật thì KHÔNG chặn — CẤM bỏ nhánh này.
+        // Khối ghép không còn dải kéo riêng, nên chỗ DUY NHẤT còn lại để cầm nó là NỀN TRỐNG của mặt
+        // phẳng lồng bên trong. Chặn ở đây là bịt nốt đường đó: người dùng bấm vào đâu trong khối ghép
+        // cũng không kéo nó đi được (người dùng chỉ ra 15/09/2026).
+        // Khối CON vẫn an toàn: `gridster-item` của chúng tự chặn (xem `handlerBlockParentDrag`), nên
+        // chỉ sự kiện rơi vào nền trống mới nổi lên tới khối ghép.
+        if (this.dragFromAnywhere()) {
+            return;
+        }
         event.stopPropagation();
     }
     handlerSelectNode(node, event) {
@@ -1987,11 +2249,17 @@ class LibsUiGridLayoutCanvasComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiGridLayoutCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiGridLayoutCanvasComponent, isStandalone: true, selector: "libs_ui-services-grid_layout-canvas", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, hiddenToolbar: { classPropertyName: "hiddenToolbar", publicName: "hiddenToolbar", isSignal: true, isRequired: false, transformFunction: null }, templateToolbar: { classPropertyName: "templateToolbar", publicName: "templateToolbar", isSignal: true, isRequired: false, transformFunction: null }, enableZoom: { classPropertyName: "enableZoom", publicName: "enableZoom", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, zoomMin: { classPropertyName: "zoomMin", publicName: "zoomMin", isSignal: true, isRequired: false, transformFunction: null }, zoomMax: { classPropertyName: "zoomMax", publicName: "zoomMax", isSignal: true, isRequired: false, transformFunction: null }, zoomStep: { classPropertyName: "zoomStep", publicName: "zoomStep", isSignal: true, isRequired: false, transformFunction: null }, stageWidth: { classPropertyName: "stageWidth", publicName: "stageWidth", isSignal: true, isRequired: false, transformFunction: null }, stageMinHeight: { classPropertyName: "stageMinHeight", publicName: "stageMinHeight", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, showZoomDock: { classPropertyName: "showZoomDock", publicName: "showZoomDock", isSignal: true, isRequired: false, transformFunction: null }, autoFitOnLoad: { classPropertyName: "autoFitOnLoad", publicName: "autoFitOnLoad", isSignal: true, isRequired: false, transformFunction: null }, enableExternalDrop: { classPropertyName: "enableExternalDrop", publicName: "enableExternalDrop", isSignal: true, isRequired: false, transformFunction: null }, showGridLines: { classPropertyName: "showGridLines", publicName: "showGridLines", isSignal: true, isRequired: false, transformFunction: null }, selectedNodeId: { classPropertyName: "selectedNodeId", publicName: "selectedNodeId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outChange: "outChange", outRemoveNode: "outRemoveNode", outAddBlockInside: "outAddBlockInside", outToggleType: "outToggleType", zoom: "zoomChange", outZoomChange: "outZoomChange", selectedNodeId: "selectedNodeIdChange", outDropNode: "outDropNode", outSelectNode: "outSelectNode", outConfigNode: "outConfigNode" }, host: { listeners: { "document:keydown": "handlerDocumentKeyDown($event)", "document:click": "handlerDocumentClick($event)" } }, viewQueries: [{ propertyName: "gridsterRef", first: true, predicate: GridsterComponent, descendants: true, isSignal: true }, { propertyName: "scrollAreaRef", first: true, predicate: ["scrollArea"], descendants: true, isSignal: true }, { propertyName: "zoomDockRef", first: true, predicate: ["zoomDock"], descendants: true, isSignal: true }, { propertyName: "itemHosts", predicate: ["itemHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "childCanvasTemplates", predicate: ["childCanvasTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isZoomActive()) {\n  <!-- Khu v\u1EF1c cu\u1ED9n ch\u1EE9a canvas stage thu ph\u00F3ng -->\n  <div\n    #scrollArea\n    class=\"libs-ui-grid-layout-scroll-area relative h-full min-h-0 w-full min-w-0 overflow-auto p-6 flex justify-start items-start\"\n    (mousedown)=\"handlerMouseDownTrongLuoi($event)\"\n    (wheel)=\"handlerWheel($event)\"\n    (dragover)=\"handlerDragOver($event)\"\n    (dragleave)=\"handlerDragLeave($event)\"\n    (drop)=\"handlerDrop($event)\">\n    <div\n      #canvasStage\n      id=\"bi-canvas-stage\"\n      class=\"libs-ui-grid-layout-stage relative flex flex-col transition-[zoom] duration-150 origin-top shrink-0 mx-auto bg-white/80 border border-slate-200/80 rounded-2xl shadow-sm p-4\"\n      [style.zoom]=\"currentZoom()\"\n      [style.width.px]=\"stageWidth()\"\n      [style.min-width.px]=\"stageWidth()\"\n      [style.min-height.px]=\"stageMinHeight()\"\n      [style.--libs-ui-grid-layout-visual-gap.px]=\"visualGap()\">\n      <!-- Snapped Drop Ghost Preview -->\n      @if (dropGhost(); as ghost) {\n        <div\n          class=\"pointer-events-none absolute z-30 flex flex-col items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-blue-500 bg-blue-500/15 p-1 shadow-sm transition-all duration-75 ease-out backdrop-blur-[0.5px] select-none\"\n          [style.left.px]=\"ghost.pixelLeft\"\n          [style.top.px]=\"ghost.pixelTop\"\n          [style.width.px]=\"ghost.pixelWidth\"\n          [style.height.px]=\"ghost.pixelHeight\">\n          <div class=\"inline-flex max-w-[95%] items-center gap-1 truncate rounded-md bg-blue-600 px-2 py-0.5 text-[11px] font-semibold text-white shadow-xs\">\n            @if (ghost.cardIconClass) {\n              <i [class]=\"ghost.cardIconClass + ' text-xs'\"></i>\n            } @else if (ghost.cardIconText) {\n              <span class=\"text-[10px] font-bold\">{{ ghost.cardIconText }}</span>\n            } @else {\n              <span class=\"text-xs font-bold\">{{ ghost.isInsideGroup ? '\u21B3' : '+' }}</span>\n            }\n            <span class=\"truncate\">{{ ghost.cardTitle }}</span>\n            <span class=\"text-[9px] font-mono opacity-75\">({{ ghost.cols }}c)</span>\n          </div>\n\n          @if (ghost.pixelHeight >= 80) {\n            <div class=\"mt-1 flex max-w-[95%] items-center gap-1.5 truncate rounded border border-blue-100 bg-white/95 px-2 py-0.5 text-[10px] font-medium text-blue-700 shadow-xs\">\n              @if (ghost.isInsideGroup) {\n                <span class=\"truncate font-bold text-blue-900\">\u21B3 {{ ghost.groupTitle }}</span>\n                <span class=\"text-blue-300\">\u2022</span>\n              }\n              <span>C\u1ED9t {{ ghost.col + 1 }}-{{ ghost.col + ghost.cols }}</span>\n            </div>\n          }\n        </div>\n      }\n      <gridster class=\"h-full w-full\" [class.display-grid]=\"showGridLines()\" [options]=\"gridOptions()\">\n          @for (item of children(); track item.id; let itemIndex = $index) {\n    <!-- \uD83D\uDD34 Ch\u1EB7n `mousedown` t\u1EA1i \u0110\u00C2Y cho l\u01B0\u1EDBi l\u1ED3ng \u2014 C\u1EA4M b\u1ECF v\u00E0 C\u1EA4M chuy\u1EC3n sang ch\u1ED7 kh\u00E1c.\n         `ignoreContentClass` m\u1ED9t m\u00ECnh KH\u00D4NG \u0111\u1EE7: `delayStart: 160` l\u00E0m M\u1ED6I l\u01B0\u1EDBi l\u00EAn l\u1ECBch\n         `dragStart` b\u1EB1ng `setTimeout` ngay t\u1EA1i `mousedown`, c\u00F2n `stopPropagation` m\u00E0 lib g\u1ECDi b\u00EAn\n         trong `dragStart` ch\u1EA1y sau 160ms n\u00EAn qu\u00E1 mu\u1ED9n \u2014 l\u01B0\u1EDBi CHA \u0111\u00E3 k\u1ECBp nh\u1EADn (\u0111o 28/08/2026: k\u00E9o\n         d\u1EA3i kh\u1ED1i con, chu\u1ED7i class duy\u1EC7t l\u00EAn \u0110\u00DANG m\u00E0 container v\u1EABn nh\u1EA3y 0,0 \u2192 0,1).\n         G\u1EAFn \u1EDF `gridster-item` l\u00E0 \u0111\u00FAng bi\u00EAn: l\u01B0\u1EDBi con nghe tr\u00EAn ch\u00EDnh ph\u1EA7n t\u1EED n\u00E0y n\u00EAn \u0111\u00E3 nh\u1EADn xong,\n         l\u01B0\u1EDBi cha \u1EDF ngo\u00E0i b\u1ECB ch\u1EB7n. -->\n    <gridster-item\n      [item]=\"item\"\n      [class.libs-ui-grid-layout-selected]=\"selectedNodeId() === item.id\"\n      (click)=\"handlerSelectNode(item, $event)\"\n      (mousedown)=\"handlerBlockParentDrag($event)\">\n      <!-- \uD83D\uDD34 V\u1ECF n\u00E0y mang `dragHandleClass` \u2014 C\u1EA4M b\u1ECF.\n           `ignoreContent: true` b\u1EAFt gridster CH\u1EC8 cho k\u00E9o khi ch\u1ED7 b\u1EA5m n\u1EB1m d\u01B0\u1EDBi m\u1ED9t ph\u1EA7n t\u1EED c\u00F3\n           `dragHandleClass`. Kh\u00F4ng c\u00F3 v\u1ECF n\u00E0y th\u00EC component c\u1EE7a n\u01A1i d\u00F9ng (th\u01B0 vi\u1EC7n kh\u00F4ng ki\u1EC3m so\u00E1t\n           \u0111\u01B0\u1EE3c class c\u1EE7a n\u00F3) s\u1EBD kh\u00F4ng c\u00F3 tay c\u1EA7m n\u00E0o, v\u00E0 KH\u00D4NG kh\u1ED1i n\u00E0o k\u00E9o \u0111\u01B0\u1EE3c \u2014 \u0111o 28/08/2026:\n           k\u00E9o 320px, to\u1EA1 \u0111\u1ED9 kh\u1ED1i gi\u1EEF nguy\u00EAn x=3,y=0.\n           T\u00EAn class theo c\u1EA5p: l\u01B0\u1EDBi trang v\u00E0 l\u01B0\u1EDBi l\u1ED3ng d\u00F9ng hai t\u00EAn KH\u00C1C nhau, n\u1EBFu kh\u00F4ng l\u01B0\u1EDBi cha\n           c\u0169ng nh\u1EADn ra tay c\u1EA7m c\u1EE7a kh\u1ED1i con v\u00E0 nh\u1EA5c lu\u00F4n container. -->\n      <!-- \uD83D\uDD34 V\u1ECF KH\u00D4NG mang `dragHandleClass` \u2014 C\u1EA4M th\u00EAm l\u1EA1i.\n           K\u00E9o ch\u1EC9 \u0111\u01B0\u1EE3c ph\u00E9p b\u1EAFt \u0111\u1EA7u t\u1EEB D\u1EA2I XANH (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026: \"ph\u1EA3i hover v\u00E0o v\u00F9ng\n           m\u00E0u xanh th\u00EC m\u1EDBi k\u00E9o th\u1EA3 \u0111\u01B0\u1EE3c cho \u0111\u1ED3ng nh\u1EA5t\"). Cho c\u1EA3 v\u1ECF l\u00E0m tay c\u1EA7m th\u00EC b\u1EA5m \u0111\u00E2u c\u0169ng\n           k\u00E9o, v\u00E0 kh\u1ED1i con n\u1EB1m trong container s\u1EBD nh\u1EA5c lu\u00F4n container v\u00EC l\u01B0\u1EDBi cha duy\u1EC7t l\u00EAn g\u1EB7p\n           tay c\u1EA7m c\u1EE7a v\u1ECF container tr\u01B0\u1EDBc.\n           V\u1ECF kh\u1ED1i con v\u1EABn gi\u1EEF class CH\u1EB6N \u0111\u1EC3 l\u01B0\u1EDBi cha d\u1EEBng \u0111\u00FAng \u1EDF bi\u00EAn. -->\n      <div\n        class=\"libs-ui-grid-layout-block-shell group relative h-full w-full min-w-0\"\n        [attr.data-node-id]=\"item.id\"\n        [class.libs-ui-grid-layout-block-parent-drag]=\"isNestedCanvas()\">\n        <!-- D\u1EA3i k\u00E9o: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i, ba ch\u1EA5m l\u00E0 d\u1EA5u hi\u1EC7u k\u00E9o quen thu\u1ED9c.\n             Ng\u01B0\u1EDDi d\u00F9ng c\u1EA7n m\u1ED9t ch\u1ED7 b\u00E1m R\u00D5 R\u00C0NG thay v\u00EC \u0111o\u00E1n xem b\u1EA5m \u0111\u00E2u th\u00EC k\u00E9o \u0111\u01B0\u1EE3c\n             (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng d\u1EA3i \u0111ang d\u00F9ng \u1EDF m\u00E0n Customer 360 c\u1EE7a mobio-web). -->\n        @if (isEditMode()) {\n          <!-- \uD83D\uDD34 D\u1EA3i PH\u1EA2I mang tay c\u1EA7m \u0110\u00DANG C\u1EA4P c\u1EE7a n\u00F3. D\u1EA3i nh\u1EADn chu\u1ED9t (`pointer-events: auto`),\n               n\u00EAn n\u1EBFu kh\u00F4ng mang tay c\u1EA7m th\u00EC `checkDragHandleClass` duy\u1EC7t l\u00EAn g\u1EB7p tay c\u1EA7m c\u1EE7a\n               container v\u00E0 nh\u1EA5c container thay v\u00EC kh\u1ED1i con (\u0111o 28/08/2026: k\u00E9o d\u1EA3i kh\u1ED1i con,\n               container nh\u1EA3y 0,0 \u2192 0,1 c\u00F2n kh\u1ED1i con \u0111\u1EE9ng im).\n               \uD83D\uDD34 D\u1EA3i CH\u1EC8 mang tay c\u1EA7m, C\u1EA4M mang th\u00EAm class ch\u1EB7n: `checkDragHandleClass` x\u00E9t hai\n               class \u0111\u00F3 tr\u00EAn C\u00D9NG m\u1ED9t node n\u00EAn \u0111\u1EC3 chung l\u00E0 k\u00E9o h\u1ECFng (\u0111o 28/08/2026: b\u1EA5m d\u1EA3i kh\u1ED1i\n               con k\u00E9o 140px, kh\u1ED1i \u0111\u1EE9ng im). Vi\u1EC7c ch\u1EB7n l\u01B0\u1EDBi cha do V\u1ECE KH\u1ED0I lo. -->\n          <div\n            class=\"libs-ui-grid-layout-drag-bar\"\n            [class.libs-ui-grid-layout-drag-bar-child]=\"isNestedCanvas()\"\n            [class.libs-ui-grid-layout-drag-handle]=\"!isNestedCanvas()\"\n            [class.libs-ui-grid-layout-drag-handle-child]=\"isNestedCanvas()\">\n            <span class=\"libs-ui-grid-layout-drag-bar-dots\">\n              @for (dot of dragBarDots; track dot) {\n                <span class=\"libs-ui-grid-layout-drag-bar-dot\"></span>\n              }\n            </span>\n          </div>\n        }\n\n        <!-- Khung ch\u1EE9a component c\u1EE7a n\u01A1i d\u00F9ng.\n             \uD83D\uDD34 PH\u1EA2I c\u00F3 khung th\u1EADt (kh\u00F4ng ph\u1EA3i `ng-container` tr\u1ED1ng): n\u00F3 lo h\u1ED9 n\u01A1i d\u00F9ng ph\u1EA7n l\u1EA5p \u0111\u1EA7y\n             \u00F4 v\u00E0 vi\u1EC1n b\u00E1o ch\u1EBF \u0111\u1ED9 s\u1EEDa. Kh\u00F4ng c\u00F3 khung th\u00EC m\u1ED7i component n\u1ED9i dung l\u1EA1i ph\u1EA3i t\u1EF1 vi\u1EBFt\n             `:host { width/height: 100% }` + vi\u1EC1n \u0111\u1EE9t \u2014 \u0111\u00F3 l\u00E0 vi\u1EC7c c\u1EE7a th\u01B0 vi\u1EC7n, kh\u00F4ng ph\u1EA3i c\u1EE7a\n             ng\u01B0\u1EDDi d\u00F9ng (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026).\n             M\u1ED7i kh\u1ED1i m\u1ED9t ViewContainerRef ri\u00EAng n\u00EAn component n\u1EB1m \u0111\u00FAng \u00F4 c\u1EE7a n\u00F3. -->\n        <!-- \uD83D\uDD34 Container C\u00D3 `getComponentOutlet`: khung n\u00E0y l\u00E0 V\u1ECE, v\u00E0 canvas con \u0111\u01B0\u1EE3c \u0111\u01B0a V\u00C0O TRONG\n             component v\u1ECF qua input `childCanvas` (m\u1ED9t `TemplateRef`) \u2014 xem `ng-template #childCanvasTpl`\n             b\u00EAn d\u01B0\u1EDBi. V\u1ECF t\u1EF1 quy\u1EBFt \u0111\u1EB7t canvas \u1EDF \u0111\u00E2u gi\u1EEFa ti\u00EAu \u0111\u1EC1 v\u00E0 ph\u1EA7n th\u00E2n c\u1EE7a n\u00F3.\n             Tr\u01B0\u1EDBc \u0111\u00E2y canvas con l\u00E0 ANH EM c\u1EE7a khung n\u00E0y, n\u00EAn v\u1ECF chi\u1EBFm tr\u1ECDn chi\u1EC1u cao r\u1ED3i \u0111\u1EA9y to\u00E0n b\u1ED9\n             th\u1EBB con ra ngo\u00E0i v\u00F9ng nh\u00ECn th\u1EA5y (\u0111o 14/09/2026: m\u1ECDi kh\u1ED1i gh\u00E9p ch\u1EC9 c\u00F2n nh\u00E3n v\u00E0 ru\u1ED9t tr\u1EAFng). -->\n        <div\n          class=\"libs-ui-grid-layout-content-frame\"\n          [class.libs-ui-grid-layout-content-frame-edit]=\"isEditMode() && !isContainer(item)\"\n          [class.libs-ui-grid-layout-content-frame-empty]=\"isContainer(item) && !item.getComponentOutlet\">\n          <ng-container #itemHost />\n        </div>\n\n        <!-- D\u1EA5u hi\u1EC7u CONTAINER: nh\u00E3n g\u00F3c tr\u00EAn-ph\u1EA3i + vi\u1EC1n \u0111\u1EE9t bao ru\u1ED9t. Kh\u00F4ng c\u00F3 d\u1EA5u hi\u1EC7u th\u00EC\n             ng\u01B0\u1EDDi d\u00F9ng kh\u00F4ng bi\u1EBFt kh\u1ED1i n\u00E0o ch\u1EE9a \u0111\u01B0\u1EE3c kh\u1ED1i kh\u00E1c (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng c\u00E1ch\n             m\u00E0n Customer 360 c\u1EE7a mobio-web \u0111ang l\u00E0m). -->\n        @if (isEditMode() && isContainer(item)) {\n          <div class=\"libs-ui-grid-layout-container-label\">{{ 'i18n_container_block' | translate }}</div>\n          <div class=\"libs-ui-grid-layout-container-border\"></div>\n        }\n\n        <!-- Thanh c\u00F4ng c\u1EE5: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i.\n             \uD83D\uDD34 D\u00F9ng `libs_ui-components-buttons-button` \u2014 C\u1EA4M t\u1EF1 d\u1EF1ng th\u1EBB `<button>`.\n             Component n\u00E0y \u0111\u00E3 c\u00F3 s\u1EB5n ki\u1EC3u n\u00FAt, c\u1EE1 n\u00FAt v\u00E0 bong b\u00F3ng ch\u00FA th\u00EDch theo \u0111\u00FAng b\u1ED9 giao di\u1EC7n\n             c\u1EE7a s\u1EA3n ph\u1EA9m; t\u1EF1 d\u1EF1ng l\u00E0 m\u1ED7i n\u01A1i m\u1ED9t ki\u1EC3u v\u00E0 m\u1EA5t lu\u00F4n tooltip. -->\n        @if (isEditMode() && !hiddenToolbar()) {\n          @if (templateToolbar()) {\n            <!-- N\u01A1i d\u00F9ng t\u1EF1 v\u1EBD thanh c\u00F4ng c\u1EE5: nh\u1EADn kh\u1ED1i + c\u00E1c h\u00E0m ph\u00E1t event qua context.\n\n                 \uD83D\uDD34 Kh\u1ED1i b\u1ECDc t\u1EF1 ch\u1EB7n `mousedown`/`click` n\u1ED5i l\u00EAn gridster. Thanh c\u00F4ng c\u1EE5 n\u1EB1m trong\n                 v\u00F9ng mang `dragHandleClass`; kh\u00F4ng ch\u1EB7n th\u00EC c\u00FA b\u1EA5m b\u1ECB hi\u1EC3u l\u00E0 b\u1EAFt \u0111\u1EA7u k\u00E9o v\u00E0\n                 `delayStart: 160` nu\u1ED1t lu\u00F4n `click` \u2014 n\u00FAt trong template ngo\u00E0i b\u1EA5m kh\u00F4ng \u0103n\n                 (\u0111o 09/09/2026: b\u1EA5m b\u1EB1ng `.click()` c\u1EE7a DOM th\u00EC m\u1EDF, b\u1EA5m chu\u1ED9t th\u1EADt th\u00EC kh\u00F4ng).\n                 Ch\u1EB7n \u1EDF \u0110\u00C2Y \u0111\u1EC3 n\u01A1i d\u00F9ng kh\u00F4ng ph\u1EA3i bi\u1EBFt b\u1EABy n\u00E0y. -->\n            <div\n              class=\"libs-ui-grid-layout-toolbar\"\n              role=\"toolbar\"\n              tabindex=\"0\"\n              [class.libs-ui-grid-layout-toolbar-child]=\"isNestedCanvas()\"\n              (mousedown)=\"handlerStopEvent($event)\"\n              (keydown)=\"handlerStopEvent($event)\"\n              (click)=\"handlerStopEvent($event)\">\n              <ng-container\n                *ngTemplateOutlet=\"templateToolbar()!; context: toolbarContexts()[itemIndex]\" />\n            </div>\n          } @else {\n            <div\n              class=\"libs-ui-grid-layout-toolbar\"\n              [class.libs-ui-grid-layout-toolbar-child]=\"isNestedCanvas()\">\n              <span class=\"libs-ui-grid-layout-dim-badge\">\n                {{ item.rows }} h\u00E0ng \u00D7 {{ item.cols }} c\u1ED9t\n              </span>\n              @if (canAddInside(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"'libs-ui-icon-add'\"\n                  [popover]=\"{ config: { content: 'Th\u00EAm kh\u1ED1i v\u00E0o trong', zIndex: 1300 } }\"\n                  (outClick)=\"handlerAddInside($event, item)\" />\n              }\n              @if (canToggleType(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"isContainer(item) ? 'libs-ui-icon-split-cell' : 'libs-ui-icon-merge-cell'\"\n                  [popover]=\"{ config: { content: isContainer(item) ? '\u0110\u01B0a v\u1EC1 kh\u1ED1i \u0111\u01A1n' : 'Chuy\u1EC3n th\u00E0nh kh\u1ED1i gh\u00E9p', zIndex: 1300 } }\"\n                  (outClick)=\"handlerToggleType($event, item)\" />\n              }\n              <libs_ui-components-buttons-button\n                [type]=\"'button-third'\"\n                [iconOnlyType]=\"true\"\n                [sizeButton]=\"'smaller'\"\n                [classIconLeft]=\"'libs-ui-icon-setting'\"\n                [popover]=\"{ config: { content: 'C\u1EA5u h\u00ECnh th\u1EBB', zIndex: 1300 } }\"\n                (outClick)=\"handlerConfig($event, item)\" />\n              <libs_ui-components-buttons-button\n                [type]=\"'button-third-hover-danger'\"\n                [iconOnlyType]=\"true\"\n                [sizeButton]=\"'smaller'\"\n                [classIconLeft]=\"'libs-ui-icon-remove'\"\n                [popover]=\"{ config: { content: isContainer(item) ? 'Xo\u00E1 c\u1EA3 kh\u1ED1i gh\u00E9p' : 'Xo\u00E1 kh\u1ED1i', zIndex: 1300 } }\"\n                (outClick)=\"handlerRemove($event, item)\" />\n            </div>\n          }\n        }\n\n        @if (item.children && item.children.length > 0) {\n          <!-- Kh\u1ED1i c\u00F3 con \u2192 ru\u1ED9t n\u00F3 l\u1EA1i l\u00E0 m\u1ED9t m\u1EB7t ph\u1EB3ng n\u1EEFa. \u0110\u1EC7 quy \u1EDF \u0111\u00E2y, n\u01A1i d\u00F9ng kh\u00F4ng ph\u1EA3i lo.\n               L\u1EC1 \u0111\u1EB7t \u1EDF \u0110\u00C2Y (v\u1ECF container), kh\u00F4ng \u0111\u1EB7t v\u00E0o l\u01B0\u1EDBi con \u2014 l\u01B0\u1EDBi con gi\u1EEF nguy\u00EAn khe 2px.\n\n               \uD83D\uDD34 Khu\u00F4n \u0111\u1EB7t trong `ng-template` \u0111\u1EC3 \u0111i \u0111\u01B0\u1EE3c HAI \u0111\u01B0\u1EDDng:\n               - Container KH\u00D4NG c\u00F3 v\u1ECF ri\u00EAng \u2192 v\u1EBD th\u1EB3ng t\u1EA1i \u0111\u00E2y, y nh\u01B0 tr\u01B0\u1EDBc.\n               - Container C\u00D3 `getComponentOutlet` \u2192 th\u01B0 vi\u1EC7n truy\u1EC1n khu\u00F4n n\u00E0y xu\u1ED1ng component v\u1ECF qua\n                 input `childCanvas`, v\u1ECF t\u1EF1 \u0111\u1EB7t n\u00F3 v\u00E0o gi\u1EEFa ti\u00EAu \u0111\u1EC1 v\u00E0 ph\u1EA7n th\u00E2n c\u1EE7a m\u00ECnh. V\u1EBD th\u00EAm \u1EDF\n                 \u0111\u00E2y n\u1EEFa l\u00E0 hai m\u1EB7t ph\u1EB3ng l\u1ED3ng ch\u1ED3ng nhau. -->\n          <ng-template #childCanvasTpl>\n            <libs_ui-services-grid_layout-canvas\n              class=\"block h-full w-full\"\n              [style.padding]=\"containerPadding()\"\n              [node]=\"item\"\n              [depth]=\"depth() + 1\"\n              [hiddenToolbar]=\"hiddenToolbar()\"\n              [templateToolbar]=\"templateToolbar()\"\n              [selectedNodeId]=\"selectedNodeId()\"\n              (outSelectNode)=\"outSelectNode.emit($event)\"\n              (outConfigNode)=\"outConfigNode.emit($event)\"\n              (outChange)=\"outChange.emit($event)\"\n              (outRemoveNode)=\"outRemoveNode.emit($event)\"\n              (outAddBlockInside)=\"outAddBlockInside.emit($event)\"\n              (outToggleType)=\"outToggleType.emit($event)\" />\n          </ng-template>\n\n          @if (!item.getComponentOutlet) {\n            <ng-container [ngTemplateOutlet]=\"childCanvasTpl\" />\n          }\n        }\n      </div>\n    </gridster-item>\n  }\n      </gridster>\n    </div>\n  </div>\n\n  <!-- Thanh dock \u0111i\u1EC1u khi\u1EC3n thu ph\u00F3ng n\u1ED5i \u1EDF g\u00F3c d\u01B0\u1EDBi tr\u00E1i -->\n  @if (showZoomDock()) {\n    <div\n      #zoomDock\n      id=\"canvas-zoom-dock\"\n      role=\"toolbar\"\n      tabindex=\"0\"\n      class=\"absolute bottom-4 left-6 z-30 flex items-center bg-white rounded-full shadow-2xl border-2 border-slate-400 p-1 space-x-1 select-none\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (keydown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation()\">\n      <!-- Thu nh\u1ECF (-) -->\n      <button\n        type=\"button\"\n        class=\"w-[28px] h-[28px] flex items-center justify-center rounded-full text-slate-700 hover:text-slate-900 hover:bg-slate-200 disabled:opacity-30 disabled:hover:bg-transparent transition-colors cursor-pointer\"\n        [disabled]=\"currentZoom() <= zoomMin()\"\n        [title]=\"'i18n_zoom_out' | translate\"\n        (click)=\"handlerZoomOut()\">\n        <svg class=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/></svg>\n      </button>\n\n      <!-- T\u1EF7 l\u1EC7 % v\u00E0 menu preset -->\n      <div class=\"relative\">\n        <button\n          type=\"button\"\n          class=\"h-[28px] px-2 flex items-center gap-1 rounded-full text-xs font-semibold text-slate-700 hover:bg-slate-200 transition-colors cursor-pointer\"\n          [title]=\"'i18n_zoom_options' | translate\"\n          (click)=\"handlerToggleMenu()\">\n          <span>{{ zoomPercent() }}%</span>\n          <svg class=\"w-[12px] h-[12px] text-slate-400 transition-transform duration-150\" [class.rotate-180]=\"isMenuOpen()\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"/></svg>\n        </button>\n\n        <!-- Menu dropdown c\u00E1c m\u1ED1c thu ph\u00F3ng -->\n        @if (isMenuOpen()) {\n          <div class=\"absolute bottom-full mb-2 left-0 w-[256px] bg-white rounded-xl shadow-xl border border-slate-200 py-1.5 z-40 text-xs select-none\">\n            <div class=\"px-3 py-1 text-[11px] font-semibold text-slate-400 uppercase tracking-wider\">\n              {{ 'i18n_zoom_canvas_width' | translate: { width: stageWidth() } }}\n            </div>\n            <button\n              type=\"button\"\n              class=\"w-full px-3 py-2 text-left flex items-center justify-between hover:bg-slate-50 transition-colors cursor-pointer\"\n              (click)=\"handlerFitScreen()\">\n              <span class=\"flex items-center gap-2 text-slate-700 font-medium\">\n                <svg class=\"w-3.5 h-3.5 text-slate-600\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" y1=\"3\" x2=\"14\" y2=\"10\"/><line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"/></svg>\n                {{ 'i18n_zoom_fit_screen' | translate }}\n              </span>\n              <span class=\"text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded font-medium\">{{ 'i18n_auto' | translate }}</span>\n            </button>\n            <div class=\"h-px bg-slate-100 my-1\"></div>\n            @for (preset of zoomPresets; track preset.value) {\n              <button\n                type=\"button\"\n                class=\"w-full px-3 py-1.5 text-left flex items-center justify-between hover:bg-slate-50 transition-colors cursor-pointer\"\n                [class.text-blue-600]=\"isCurrentPreset(preset.value)\"\n                [class.font-semibold]=\"isCurrentPreset(preset.value)\"\n                [class.bg-blue-50]=\"isCurrentPreset(preset.value)\"\n                (click)=\"handlerSelectPreset(preset.value)\">\n                <span class=\"text-slate-700\" [class.text-blue-600]=\"isCurrentPreset(preset.value)\">\n                  {{ preset.label | translate }}\n                </span>\n                @if (isCurrentPreset(preset.value)) {\n                  <svg class=\"w-3.5 h-3.5 text-blue-600\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n                }\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Ph\u00F3ng to (+) -->\n      <button\n        type=\"button\"\n        class=\"w-[28px] h-[28px] flex items-center justify-center rounded-full text-slate-700 hover:text-slate-900 hover:bg-slate-200 disabled:opacity-30 disabled:hover:bg-transparent transition-colors cursor-pointer\"\n        [disabled]=\"currentZoom() >= zoomMax()\"\n        [title]=\"'i18n_zoom_in' | translate\"\n        (click)=\"handlerZoomIn()\">\n        <svg class=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/></svg>\n      </button>\n\n      <!-- Ph\u00E2n c\u00E1ch -->\n      <div class=\"h-[16px] w-px bg-slate-200\"></div>\n\n      <!-- N\u00FAt V\u1EEBa m\u00E0n h\u00ECnh nhanh -->\n      <button\n        type=\"button\"\n        class=\"h-[28px] shrink-0 px-2.5 flex items-center gap-1 rounded-full text-xs text-slate-700 hover:text-slate-900 hover:bg-slate-200 transition-colors cursor-pointer\"\n        [title]=\"'i18n_zoom_fit_screen_tooltip' | translate\"\n        (click)=\"handlerFitScreen()\">\n        <svg class=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" y1=\"3\" x2=\"14\" y2=\"10\"/><line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"/></svg>\n        <span class=\"whitespace-nowrap font-medium\">{{ 'i18n_zoom_fit_screen' | translate }}</span>\n      </button>\n\n      <!-- N\u00FAt \u0110\u1EB7t l\u1EA1i 100% (ch\u1EC9 hi\u1EC7n khi kh\u00E1c 100%) -->\n      @if (zoomPercent() !== 100) {\n        <button\n          type=\"button\"\n          class=\"h-[28px] px-2 flex items-center gap-1 rounded-full text-xs font-semibold text-blue-600 hover:bg-blue-50 transition-colors cursor-pointer\"\n          [title]=\"'i18n_zoom_reset_tooltip' | translate: { width: stageWidth(), height: stageMinHeight() }\"\n          (click)=\"handlerResetZoom()\">\n          <svg class=\"w-[12px] h-[12px]\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"1 4 1 10 7 10\"/><path d=\"M3.51 15a9 9 0 1 0 2.13-9.36L1 10\"/></svg>\n          <span>100%</span>\n        </button>\n      }\n    </div>\n  }\n} @else {\n  <!-- \uD83D\uDD34 `relative` l\u00E0 B\u1EAET BU\u1ED8C, C\u1EA4M b\u1ECF.\n       gridster \u0111\u1ED5i v\u1ECB tr\u00ED chu\u1ED9t th\u00E0nh \u00F4 l\u01B0\u1EDBi b\u1EB1ng `e.clientY + (el.scrollTop - el.offsetTop)` \u2014 c\u00F4ng\n       th\u1EE9c \u0111\u00F3 ch\u1EC9 \u0111\u00FAng khi `offsetParent` c\u1EE7a <gridster> CH\u00CDNH L\u00C0 kh\u1ED1i cu\u1ED9n n\u00E0y. Thi\u1EBFu `relative` th\u00EC\n       `offsetParent` nh\u1EA3y l\u00EAn kh\u1ED1i bao ngo\u00E0i: `offsetTop` tr\u1EA3 16 trong khi l\u1EC7ch th\u1EADt l\u00E0 65 \u2192 gridster\n       t\u00EDnh \u00F4 sai 49px, \u00F4 ch\u1EDD \u0111\u1EB7t hi\u1EC7n l\u1EC7ch kh\u1ECFi con tr\u1ECF n\u00EAn k\u00E9o th\u1EA3 kh\u00F4ng \u0111\u1ED5i \u0111\u01B0\u1EE3c v\u1ECB tr\u00ED, v\u00E0 k\u00E9o m\u00E9p\n       c\u0169ng t\u00EDnh sai \u0111i\u1EC3m d\u1EEBng. -->\n  <div\n    #scrollArea\n    class=\"libs-ui-grid-layout-scroll-area relative h-full min-h-0 w-full min-w-0\"\n    [class.overflow-y-auto]=\"!isNestedCanvas()\"\n    (mousedown)=\"handlerMouseDownTrongLuoi($event)\"\n    (dragover)=\"handlerDragOver($event)\"\n    (dragleave)=\"handlerDragLeave($event)\"\n    (drop)=\"handlerDrop($event)\">\n    <!-- Snapped Drop Ghost Preview -->\n    @if (dropGhost(); as ghost) {\n      <div\n        class=\"pointer-events-none absolute z-30 flex flex-col items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-blue-500 bg-blue-500/15 p-1 shadow-sm transition-all duration-75 ease-out backdrop-blur-[0.5px] select-none\"\n        [style.left.px]=\"ghost.pixelLeft\"\n        [style.top.px]=\"ghost.pixelTop\"\n        [style.width.px]=\"ghost.pixelWidth\"\n        [style.height.px]=\"ghost.pixelHeight\">\n        <div class=\"inline-flex max-w-[95%] items-center gap-1 truncate rounded-md bg-blue-600 px-2 py-0.5 text-[11px] font-semibold text-white shadow-xs\">\n          @if (ghost.cardIconClass) {\n            <i [class]=\"ghost.cardIconClass + ' text-xs'\"></i>\n          } @else if (ghost.cardIconText) {\n            <span class=\"text-[10px] font-bold\">{{ ghost.cardIconText }}</span>\n          } @else {\n            <span class=\"text-xs font-bold\">{{ ghost.isInsideGroup ? '\u21B3' : '+' }}</span>\n          }\n          <span class=\"truncate\">{{ ghost.cardTitle }}</span>\n          <span class=\"text-[9px] font-mono opacity-75\">({{ ghost.cols }}c)</span>\n        </div>\n\n        @if (ghost.pixelHeight >= 80) {\n          <div class=\"mt-1 flex max-w-[95%] items-center gap-1.5 truncate rounded border border-blue-100 bg-white/95 px-2 py-0.5 text-[10px] font-medium text-blue-700 shadow-xs\">\n            @if (ghost.isInsideGroup) {\n              <span class=\"truncate font-bold text-blue-900\">\u21B3 {{ ghost.groupTitle }}</span>\n              <span class=\"text-blue-300\">\u2022</span>\n            }\n            <span>C\u1ED9t {{ ghost.col + 1 }}-{{ ghost.col + ghost.cols }}</span>\n          </div>\n        }\n      </div>\n    }\n    <gridster class=\"h-full w-full\" [class.display-grid]=\"showGridLines()\" [options]=\"gridOptions()\">\n        @for (item of children(); track item.id; let itemIndex = $index) {\n    <!-- \uD83D\uDD34 Ch\u1EB7n `mousedown` t\u1EA1i \u0110\u00C2Y cho l\u01B0\u1EDBi l\u1ED3ng \u2014 C\u1EA4M b\u1ECF v\u00E0 C\u1EA4M chuy\u1EC3n sang ch\u1ED7 kh\u00E1c.\n         `ignoreContentClass` m\u1ED9t m\u00ECnh KH\u00D4NG \u0111\u1EE7: `delayStart: 160` l\u00E0m M\u1ED6I l\u01B0\u1EDBi l\u00EAn l\u1ECBch\n         `dragStart` b\u1EB1ng `setTimeout` ngay t\u1EA1i `mousedown`, c\u00F2n `stopPropagation` m\u00E0 lib g\u1ECDi b\u00EAn\n         trong `dragStart` ch\u1EA1y sau 160ms n\u00EAn qu\u00E1 mu\u1ED9n \u2014 l\u01B0\u1EDBi CHA \u0111\u00E3 k\u1ECBp nh\u1EADn (\u0111o 28/08/2026: k\u00E9o\n         d\u1EA3i kh\u1ED1i con, chu\u1ED7i class duy\u1EC7t l\u00EAn \u0110\u00DANG m\u00E0 container v\u1EABn nh\u1EA3y 0,0 \u2192 0,1).\n         G\u1EAFn \u1EDF `gridster-item` l\u00E0 \u0111\u00FAng bi\u00EAn: l\u01B0\u1EDBi con nghe tr\u00EAn ch\u00EDnh ph\u1EA7n t\u1EED n\u00E0y n\u00EAn \u0111\u00E3 nh\u1EADn xong,\n         l\u01B0\u1EDBi cha \u1EDF ngo\u00E0i b\u1ECB ch\u1EB7n. -->\n    <gridster-item\n      [item]=\"item\"\n      [class.libs-ui-grid-layout-selected]=\"selectedNodeId() === item.id\"\n      (click)=\"handlerSelectNode(item, $event)\"\n      (mousedown)=\"handlerBlockParentDrag($event)\">\n      <!-- \uD83D\uDD34 V\u1ECF n\u00E0y mang `dragHandleClass` \u2014 C\u1EA4M b\u1ECF.\n           `ignoreContent: true` b\u1EAFt gridster CH\u1EC8 cho k\u00E9o khi ch\u1ED7 b\u1EA5m n\u1EB1m d\u01B0\u1EDBi m\u1ED9t ph\u1EA7n t\u1EED c\u00F3\n           `dragHandleClass`. Kh\u00F4ng c\u00F3 v\u1ECF n\u00E0y th\u00EC component c\u1EE7a n\u01A1i d\u00F9ng (th\u01B0 vi\u1EC7n kh\u00F4ng ki\u1EC3m so\u00E1t\n           \u0111\u01B0\u1EE3c class c\u1EE7a n\u00F3) s\u1EBD kh\u00F4ng c\u00F3 tay c\u1EA7m n\u00E0o, v\u00E0 KH\u00D4NG kh\u1ED1i n\u00E0o k\u00E9o \u0111\u01B0\u1EE3c \u2014 \u0111o 28/08/2026:\n           k\u00E9o 320px, to\u1EA1 \u0111\u1ED9 kh\u1ED1i gi\u1EEF nguy\u00EAn x=3,y=0.\n           T\u00EAn class theo c\u1EA5p: l\u01B0\u1EDBi trang v\u00E0 l\u01B0\u1EDBi l\u1ED3ng d\u00F9ng hai t\u00EAn KH\u00C1C nhau, n\u1EBFu kh\u00F4ng l\u01B0\u1EDBi cha\n           c\u0169ng nh\u1EADn ra tay c\u1EA7m c\u1EE7a kh\u1ED1i con v\u00E0 nh\u1EA5c lu\u00F4n container. -->\n      <!-- \uD83D\uDD34 V\u1ECF KH\u00D4NG mang `dragHandleClass` \u2014 C\u1EA4M th\u00EAm l\u1EA1i.\n           K\u00E9o ch\u1EC9 \u0111\u01B0\u1EE3c ph\u00E9p b\u1EAFt \u0111\u1EA7u t\u1EEB D\u1EA2I XANH (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026: \"ph\u1EA3i hover v\u00E0o v\u00F9ng\n           m\u00E0u xanh th\u00EC m\u1EDBi k\u00E9o th\u1EA3 \u0111\u01B0\u1EE3c cho \u0111\u1ED3ng nh\u1EA5t\"). Cho c\u1EA3 v\u1ECF l\u00E0m tay c\u1EA7m th\u00EC b\u1EA5m \u0111\u00E2u c\u0169ng\n           k\u00E9o, v\u00E0 kh\u1ED1i con n\u1EB1m trong container s\u1EBD nh\u1EA5c lu\u00F4n container v\u00EC l\u01B0\u1EDBi cha duy\u1EC7t l\u00EAn g\u1EB7p\n           tay c\u1EA7m c\u1EE7a v\u1ECF container tr\u01B0\u1EDBc.\n           V\u1ECF kh\u1ED1i con v\u1EABn gi\u1EEF class CH\u1EB6N \u0111\u1EC3 l\u01B0\u1EDBi cha d\u1EEBng \u0111\u00FAng \u1EDF bi\u00EAn. -->\n      <div\n        class=\"libs-ui-grid-layout-block-shell group relative h-full w-full min-w-0\"\n        [attr.data-node-id]=\"item.id\"\n        [class.libs-ui-grid-layout-block-parent-drag]=\"isNestedCanvas()\">\n        <!-- D\u1EA3i k\u00E9o: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i, ba ch\u1EA5m l\u00E0 d\u1EA5u hi\u1EC7u k\u00E9o quen thu\u1ED9c.\n             Ng\u01B0\u1EDDi d\u00F9ng c\u1EA7n m\u1ED9t ch\u1ED7 b\u00E1m R\u00D5 R\u00C0NG thay v\u00EC \u0111o\u00E1n xem b\u1EA5m \u0111\u00E2u th\u00EC k\u00E9o \u0111\u01B0\u1EE3c\n             (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng d\u1EA3i \u0111ang d\u00F9ng \u1EDF m\u00E0n Customer 360 c\u1EE7a mobio-web). -->\n        @if (isEditMode()) {\n          <!-- \uD83D\uDD34 D\u1EA3i PH\u1EA2I mang tay c\u1EA7m \u0110\u00DANG C\u1EA4P c\u1EE7a n\u00F3. D\u1EA3i nh\u1EADn chu\u1ED9t (`pointer-events: auto`),\n               n\u00EAn n\u1EBFu kh\u00F4ng mang tay c\u1EA7m th\u00EC `checkDragHandleClass` duy\u1EC7t l\u00EAn g\u1EB7p tay c\u1EA7m c\u1EE7a\n               container v\u00E0 nh\u1EA5c container thay v\u00EC kh\u1ED1i con (\u0111o 28/08/2026: k\u00E9o d\u1EA3i kh\u1ED1i con,\n               container nh\u1EA3y 0,0 \u2192 0,1 c\u00F2n kh\u1ED1i con \u0111\u1EE9ng im).\n               \uD83D\uDD34 D\u1EA3i CH\u1EC8 mang tay c\u1EA7m, C\u1EA4M mang th\u00EAm class ch\u1EB7n: `checkDragHandleClass` x\u00E9t hai\n               class \u0111\u00F3 tr\u00EAn C\u00D9NG m\u1ED9t node n\u00EAn \u0111\u1EC3 chung l\u00E0 k\u00E9o h\u1ECFng (\u0111o 28/08/2026: b\u1EA5m d\u1EA3i kh\u1ED1i\n               con k\u00E9o 140px, kh\u1ED1i \u0111\u1EE9ng im). Vi\u1EC7c ch\u1EB7n l\u01B0\u1EDBi cha do V\u1ECE KH\u1ED0I lo. -->\n          <div\n            class=\"libs-ui-grid-layout-drag-bar\"\n            [class.libs-ui-grid-layout-drag-bar-child]=\"isNestedCanvas()\"\n            [class.libs-ui-grid-layout-drag-handle]=\"!isNestedCanvas()\"\n            [class.libs-ui-grid-layout-drag-handle-child]=\"isNestedCanvas()\">\n            <span class=\"libs-ui-grid-layout-drag-bar-dots\">\n              @for (dot of dragBarDots; track dot) {\n                <span class=\"libs-ui-grid-layout-drag-bar-dot\"></span>\n              }\n            </span>\n          </div>\n        }\n\n        <!-- Khung ch\u1EE9a component c\u1EE7a n\u01A1i d\u00F9ng.\n             \uD83D\uDD34 PH\u1EA2I c\u00F3 khung th\u1EADt (kh\u00F4ng ph\u1EA3i `ng-container` tr\u1ED1ng): n\u00F3 lo h\u1ED9 n\u01A1i d\u00F9ng ph\u1EA7n l\u1EA5p \u0111\u1EA7y\n             \u00F4 v\u00E0 vi\u1EC1n b\u00E1o ch\u1EBF \u0111\u1ED9 s\u1EEDa. Kh\u00F4ng c\u00F3 khung th\u00EC m\u1ED7i component n\u1ED9i dung l\u1EA1i ph\u1EA3i t\u1EF1 vi\u1EBFt\n             `:host { width/height: 100% }` + vi\u1EC1n \u0111\u1EE9t \u2014 \u0111\u00F3 l\u00E0 vi\u1EC7c c\u1EE7a th\u01B0 vi\u1EC7n, kh\u00F4ng ph\u1EA3i c\u1EE7a\n             ng\u01B0\u1EDDi d\u00F9ng (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026).\n             M\u1ED7i kh\u1ED1i m\u1ED9t ViewContainerRef ri\u00EAng n\u00EAn component n\u1EB1m \u0111\u00FAng \u00F4 c\u1EE7a n\u00F3. -->\n        <!-- \uD83D\uDD34 Container C\u00D3 `getComponentOutlet`: khung n\u00E0y l\u00E0 V\u1ECE, v\u00E0 canvas con \u0111\u01B0\u1EE3c \u0111\u01B0a V\u00C0O TRONG\n             component v\u1ECF qua input `childCanvas` (m\u1ED9t `TemplateRef`) \u2014 xem `ng-template #childCanvasTpl`\n             b\u00EAn d\u01B0\u1EDBi. V\u1ECF t\u1EF1 quy\u1EBFt \u0111\u1EB7t canvas \u1EDF \u0111\u00E2u gi\u1EEFa ti\u00EAu \u0111\u1EC1 v\u00E0 ph\u1EA7n th\u00E2n c\u1EE7a n\u00F3.\n             Tr\u01B0\u1EDBc \u0111\u00E2y canvas con l\u00E0 ANH EM c\u1EE7a khung n\u00E0y, n\u00EAn v\u1ECF chi\u1EBFm tr\u1ECDn chi\u1EC1u cao r\u1ED3i \u0111\u1EA9y to\u00E0n b\u1ED9\n             th\u1EBB con ra ngo\u00E0i v\u00F9ng nh\u00ECn th\u1EA5y (\u0111o 14/09/2026: m\u1ECDi kh\u1ED1i gh\u00E9p ch\u1EC9 c\u00F2n nh\u00E3n v\u00E0 ru\u1ED9t tr\u1EAFng). -->\n        <div\n          class=\"libs-ui-grid-layout-content-frame\"\n          [class.libs-ui-grid-layout-content-frame-edit]=\"isEditMode() && !isContainer(item)\"\n          [class.libs-ui-grid-layout-content-frame-empty]=\"isContainer(item) && !item.getComponentOutlet\">\n          <ng-container #itemHost />\n        </div>\n\n        <!-- D\u1EA5u hi\u1EC7u CONTAINER: nh\u00E3n g\u00F3c tr\u00EAn-ph\u1EA3i + vi\u1EC1n \u0111\u1EE9t bao ru\u1ED9t. Kh\u00F4ng c\u00F3 d\u1EA5u hi\u1EC7u th\u00EC\n             ng\u01B0\u1EDDi d\u00F9ng kh\u00F4ng bi\u1EBFt kh\u1ED1i n\u00E0o ch\u1EE9a \u0111\u01B0\u1EE3c kh\u1ED1i kh\u00E1c (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng c\u00E1ch\n             m\u00E0n Customer 360 c\u1EE7a mobio-web \u0111ang l\u00E0m). -->\n        @if (isEditMode() && isContainer(item)) {\n          <div class=\"libs-ui-grid-layout-container-label\">{{ 'i18n_container_block' | translate }}</div>\n          <div class=\"libs-ui-grid-layout-container-border\"></div>\n        }\n\n        <!-- Thanh c\u00F4ng c\u1EE5: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i.\n             \uD83D\uDD34 D\u00F9ng `libs_ui-components-buttons-button` \u2014 C\u1EA4M t\u1EF1 d\u1EF1ng th\u1EBB `<button>`.\n             Component n\u00E0y \u0111\u00E3 c\u00F3 s\u1EB5n ki\u1EC3u n\u00FAt, c\u1EE1 n\u00FAt v\u00E0 bong b\u00F3ng ch\u00FA th\u00EDch theo \u0111\u00FAng b\u1ED9 giao di\u1EC7n\n             c\u1EE7a s\u1EA3n ph\u1EA9m; t\u1EF1 d\u1EF1ng l\u00E0 m\u1ED7i n\u01A1i m\u1ED9t ki\u1EC3u v\u00E0 m\u1EA5t lu\u00F4n tooltip. -->\n        @if (isEditMode() && !hiddenToolbar()) {\n          @if (templateToolbar()) {\n            <!-- N\u01A1i d\u00F9ng t\u1EF1 v\u1EBD thanh c\u00F4ng c\u1EE5: nh\u1EADn kh\u1ED1i + c\u00E1c h\u00E0m ph\u00E1t event qua context.\n\n                 \uD83D\uDD34 Kh\u1ED1i b\u1ECDc t\u1EF1 ch\u1EB7n `mousedown`/`click` n\u1ED5i l\u00EAn gridster. Thanh c\u00F4ng c\u1EE5 n\u1EB1m trong\n                 v\u00F9ng mang `dragHandleClass`; kh\u00F4ng ch\u1EB7n th\u00EC c\u00FA b\u1EA5m b\u1ECB hi\u1EC3u l\u00E0 b\u1EAFt \u0111\u1EA7u k\u00E9o v\u00E0\n                 `delayStart: 160` nu\u1ED1t lu\u00F4n `click` \u2014 n\u00FAt trong template ngo\u00E0i b\u1EA5m kh\u00F4ng \u0103n\n                 (\u0111o 09/09/2026: b\u1EA5m b\u1EB1ng `.click()` c\u1EE7a DOM th\u00EC m\u1EDF, b\u1EA5m chu\u1ED9t th\u1EADt th\u00EC kh\u00F4ng).\n                 Ch\u1EB7n \u1EDF \u0110\u00C2Y \u0111\u1EC3 n\u01A1i d\u00F9ng kh\u00F4ng ph\u1EA3i bi\u1EBFt b\u1EABy n\u00E0y. -->\n            <div\n              class=\"libs-ui-grid-layout-toolbar\"\n              role=\"toolbar\"\n              tabindex=\"0\"\n              [class.libs-ui-grid-layout-toolbar-child]=\"isNestedCanvas()\"\n              (mousedown)=\"handlerStopEvent($event)\"\n              (keydown)=\"handlerStopEvent($event)\"\n              (click)=\"handlerStopEvent($event)\">\n              <ng-container\n                *ngTemplateOutlet=\"templateToolbar()!; context: toolbarContexts()[itemIndex]\" />\n            </div>\n          } @else {\n            <div\n              class=\"libs-ui-grid-layout-toolbar\"\n              [class.libs-ui-grid-layout-toolbar-child]=\"isNestedCanvas()\">\n              <span class=\"libs-ui-grid-layout-dim-badge\">\n                {{ item.rows }} h\u00E0ng \u00D7 {{ item.cols }} c\u1ED9t\n              </span>\n              @if (canAddInside(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"'libs-ui-icon-add'\"\n                  [popover]=\"{ config: { content: 'Th\u00EAm kh\u1ED1i v\u00E0o trong', zIndex: 1300 } }\"\n                  (outClick)=\"handlerAddInside($event, item)\" />\n              }\n              @if (canToggleType(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"isContainer(item) ? 'libs-ui-icon-split-cell' : 'libs-ui-icon-merge-cell'\"\n                  [popover]=\"{ config: { content: isContainer(item) ? '\u0110\u01B0a v\u1EC1 kh\u1ED1i \u0111\u01A1n' : 'Chuy\u1EC3n th\u00E0nh kh\u1ED1i gh\u00E9p', zIndex: 1300 } }\"\n                  (outClick)=\"handlerToggleType($event, item)\" />\n              }\n              <libs_ui-components-buttons-button\n                [type]=\"'button-third'\"\n                [iconOnlyType]=\"true\"\n                [sizeButton]=\"'smaller'\"\n                [classIconLeft]=\"'libs-ui-icon-setting'\"\n                [popover]=\"{ config: { content: 'C\u1EA5u h\u00ECnh th\u1EBB', zIndex: 1300 } }\"\n                (outClick)=\"handlerConfig($event, item)\" />\n              <libs_ui-components-buttons-button\n                [type]=\"'button-third-hover-danger'\"\n                [iconOnlyType]=\"true\"\n                [sizeButton]=\"'smaller'\"\n                [classIconLeft]=\"'libs-ui-icon-remove'\"\n                [popover]=\"{ config: { content: isContainer(item) ? 'Xo\u00E1 c\u1EA3 kh\u1ED1i gh\u00E9p' : 'Xo\u00E1 kh\u1ED1i', zIndex: 1300 } }\"\n                (outClick)=\"handlerRemove($event, item)\" />\n            </div>\n          }\n        }\n\n        @if (item.children && item.children.length > 0) {\n          <!-- Kh\u1ED1i c\u00F3 con \u2192 ru\u1ED9t n\u00F3 l\u1EA1i l\u00E0 m\u1ED9t m\u1EB7t ph\u1EB3ng n\u1EEFa. \u0110\u1EC7 quy \u1EDF \u0111\u00E2y, n\u01A1i d\u00F9ng kh\u00F4ng ph\u1EA3i lo.\n               L\u1EC1 \u0111\u1EB7t \u1EDF \u0110\u00C2Y (v\u1ECF container), kh\u00F4ng \u0111\u1EB7t v\u00E0o l\u01B0\u1EDBi con \u2014 l\u01B0\u1EDBi con gi\u1EEF nguy\u00EAn khe 2px.\n\n               \uD83D\uDD34 Khu\u00F4n \u0111\u1EB7t trong `ng-template` \u0111\u1EC3 \u0111i \u0111\u01B0\u1EE3c HAI \u0111\u01B0\u1EDDng:\n               - Container KH\u00D4NG c\u00F3 v\u1ECF ri\u00EAng \u2192 v\u1EBD th\u1EB3ng t\u1EA1i \u0111\u00E2y, y nh\u01B0 tr\u01B0\u1EDBc.\n               - Container C\u00D3 `getComponentOutlet` \u2192 th\u01B0 vi\u1EC7n truy\u1EC1n khu\u00F4n n\u00E0y xu\u1ED1ng component v\u1ECF qua\n                 input `childCanvas`, v\u1ECF t\u1EF1 \u0111\u1EB7t n\u00F3 v\u00E0o gi\u1EEFa ti\u00EAu \u0111\u1EC1 v\u00E0 ph\u1EA7n th\u00E2n c\u1EE7a m\u00ECnh. V\u1EBD th\u00EAm \u1EDF\n                 \u0111\u00E2y n\u1EEFa l\u00E0 hai m\u1EB7t ph\u1EB3ng l\u1ED3ng ch\u1ED3ng nhau. -->\n          <ng-template #childCanvasTpl>\n            <libs_ui-services-grid_layout-canvas\n              class=\"block h-full w-full\"\n              [style.padding]=\"containerPadding()\"\n              [node]=\"item\"\n              [depth]=\"depth() + 1\"\n              [hiddenToolbar]=\"hiddenToolbar()\"\n              [templateToolbar]=\"templateToolbar()\"\n              [selectedNodeId]=\"selectedNodeId()\"\n              (outSelectNode)=\"outSelectNode.emit($event)\"\n              (outConfigNode)=\"outConfigNode.emit($event)\"\n              (outChange)=\"outChange.emit($event)\"\n              (outRemoveNode)=\"outRemoveNode.emit($event)\"\n              (outAddBlockInside)=\"outAddBlockInside.emit($event)\"\n              (outToggleType)=\"outToggleType.emit($event)\" />\n          </ng-template>\n\n          @if (!item.getComponentOutlet) {\n            <ng-container [ngTemplateOutlet]=\"childCanvasTpl\" />\n          }\n        }\n      </div>\n    </gridster-item>\n  }\n    </gridster>\n  </div>\n}\n", styles: [":host{display:block;position:relative;box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0}.libs-ui-grid-layout-block-shell{container-type:inline-size;display:block;box-sizing:border-box;height:100%}.libs-ui-grid-layout-drag-bar{position:absolute;top:2px;left:50%;z-index:15;display:flex;align-items:center;justify-content:center;width:64px;height:16px;background:transparent;transform:translate(-50%);opacity:1;transition:opacity .12s ease;pointer-events:auto;cursor:move}.libs-ui-grid-layout-drag-bar-dots{display:grid;grid-template-columns:repeat(3,3px);gap:3px;color:#9ca2ad}.libs-ui-grid-layout-drag-bar-dot{width:3px;height:3px;background:currentColor;border-radius:50%}.libs-ui-grid-layout-drag-bar:hover .libs-ui-grid-layout-drag-bar-dots{color:#3d6ef5}.libs-ui-grid-layout-drag-bar:not(.libs-ui-grid-layout-drag-bar-child){opacity:1}.libs-ui-grid-layout-drag-bar-child{top:auto;bottom:0;background:#d9f2e4;border-radius:4px 4px 0 0}.libs-ui-grid-layout-drag-bar-child .libs-ui-grid-layout-drag-bar-dots{color:#9ca2ad}.libs-ui-grid-layout-drag-bar-child:hover .libs-ui-grid-layout-drag-bar-dots{color:#00a757}.libs-ui-grid-layout-drag-bar-child{opacity:0}.libs-ui-grid-layout-block-shell:hover>.libs-ui-grid-layout-drag-bar-child{opacity:1}.libs-ui-grid-layout-block-shell:has(>.libs-ui-grid-layout-drag-bar:not(.libs-ui-grid-layout-drag-bar-child):hover){outline:2px solid #3d6ef5;outline-offset:-2px;border-radius:8px}.libs-ui-grid-layout-block-shell:has(>.libs-ui-grid-layout-drag-bar-child:hover){outline:2px solid #00a757;outline-offset:-2px;border-radius:8px}.libs-ui-grid-layout-container-label{position:absolute;left:6px;top:2px;display:flex;height:20px;align-items:center;z-index:3;padding:0 6px;color:#3d6ef5;font-weight:500;font-size:10px;line-height:14px;background:#dbe4ff;border-radius:4px;pointer-events:none}.libs-ui-grid-layout-content-frame{box-sizing:border-box;width:100%;height:100%;overflow:hidden;border-radius:6px}.libs-ui-grid-layout-content-frame ::ng-deep>*{display:block;box-sizing:border-box;width:100%;height:100%}.libs-ui-grid-layout-content-frame-empty{height:0}.libs-ui-grid-layout-content-frame-edit{border:1px dashed #c3cede}.libs-ui-grid-layout-container-border{position:absolute;inset:0;border:1px dashed #9db4f0;border-radius:8px;pointer-events:none}.libs-ui-grid-layout-toolbar{position:absolute;top:6px;right:8px;z-index:24;display:flex;gap:2px;align-items:center;height:20px;background:#fff;border-radius:4px;box-shadow:0 2px 8px #0716311f;opacity:0;transition:opacity .12s ease}.libs-ui-grid-layout-toolbar-child{top:50%;right:8px;left:auto;transform:translateY(-50%)}.libs-ui-grid-layout-block-shell:hover>.libs-ui-grid-layout-toolbar{opacity:1}:host ::ng-deep gridster{background:transparent}:host ::ng-deep .gridster-item-resizable-handler.handle-n,:host ::ng-deep .gridster-item-resizable-handler.handle-s{height:16px}:host ::ng-deep .gridster-item-resizable-handler.handle-e,:host ::ng-deep .gridster-item-resizable-handler.handle-w{width:16px}:host ::ng-deep .gridster-item-resizable-handler.handle-n{top:0}:host ::ng-deep .gridster-item-resizable-handler.handle-s{bottom:0}:host ::ng-deep .gridster-item-resizable-handler.handle-e{right:0}:host ::ng-deep .gridster-item-resizable-handler.handle-w{left:0}:host ::ng-deep gridster-item.gridster-item-moving,:host ::ng-deep gridster-item.gridster-item-resizing{z-index:30!important}:host ::ng-deep gridster-item.gridster-item-moving>.libs-ui-grid-layout-block-shell,:host ::ng-deep gridster-item.gridster-item-resizing>.libs-ui-grid-layout-block-shell{outline:2px solid #3d6ef5;outline-offset:-2px;border-radius:8px}:host ::ng-deep gridster gridster gridster-item.gridster-item-moving>.libs-ui-grid-layout-block-shell,:host ::ng-deep gridster gridster gridster-item.gridster-item-resizing>.libs-ui-grid-layout-block-shell{outline-color:#00a757}:host ::ng-deep gridster-item.libs-ui-grid-layout-selected>.libs-ui-grid-layout-block-shell{outline:2px solid #2563eb!important;outline-offset:-2px!important;border-radius:8px!important;box-shadow:0 0 0 4px #2563eb26!important}:host ::ng-deep gridster.display-grid .gridster-column,:host ::ng-deep gridster gridster.display-grid .gridster-column{border-right:1px solid rgba(226,232,240,.7)!important;border-left:none!important;pointer-events:none!important;height:100%!important;min-height:100%!important}:host ::ng-deep gridster.display-grid .gridster-column:first-child,:host ::ng-deep gridster gridster.display-grid .gridster-column:first-child{border-left:1px solid rgba(226,232,240,.7)!important}:host ::ng-deep gridster.display-grid .gridster-row,:host ::ng-deep gridster gridster.display-grid .gridster-row{border-bottom:1px solid rgba(226,232,240,.7)!important;border-top:none!important;pointer-events:none!important}:host ::ng-deep gridster.display-grid .gridster-row:first-child,:host ::ng-deep gridster gridster.display-grid .gridster-row:first-child{border-top:1px solid rgba(226,232,240,.7)!important}:host ::ng-deep gridster gridster.display-grid{background-color:#f8fafc80!important}:host ::ng-deep gridster-preview{background:#2563eb1f!important;border:1.5px dashed #2563eb!important;border-radius:6px!important;z-index:25!important}.libs-ui-grid-layout-dim-badge{display:inline-flex;align-items:center;height:20px;padding:0 6px;background-color:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;color:#64748b;font-size:10px;font-weight:500;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;pointer-events:none;white-space:nowrap}@container (max-width: 80px){.libs-ui-grid-layout-drag-bar{top:26px}}.libs-ui-grid-layout-stage{box-sizing:border-box;transform-origin:top center;transition:zoom .15s ease-out}#canvas-zoom-dock{box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.libs-ui-grid-layout-stage>gridster>gridster-item>.libs-ui-grid-layout-block-shell{inset:calc(var(--libs-ui-grid-layout-visual-gap, 0px) / 2);width:calc(100% - var(--libs-ui-grid-layout-visual-gap, 0px));height:calc(100% - var(--libs-ui-grid-layout-visual-gap, 0px));box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: LibsUiGridLayoutCanvasComponent, selector: "libs_ui-services-grid_layout-canvas", inputs: ["node", "depth", "hiddenToolbar", "templateToolbar", "enableZoom", "zoom", "zoomMin", "zoomMax", "zoomStep", "stageWidth", "stageMinHeight", "storageKey", "showZoomDock", "autoFitOnLoad", "enableExternalDrop", "showGridLines", "selectedNodeId"], outputs: ["outChange", "outRemoveNode", "outAddBlockInside", "outToggleType", "zoomChange", "outZoomChange", "selectedNodeIdChange", "outDropNode", "outSelectNode", "outConfigNode"] }, { kind: "ngmodule", type: GridsterModule }, { kind: "component", type: i1.GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "component", type: i1.GridsterItemComponent, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiGridLayoutCanvasComponent, isStandalone: true, selector: "libs_ui-services-grid_layout-canvas", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, hiddenToolbar: { classPropertyName: "hiddenToolbar", publicName: "hiddenToolbar", isSignal: true, isRequired: false, transformFunction: null }, templateToolbar: { classPropertyName: "templateToolbar", publicName: "templateToolbar", isSignal: true, isRequired: false, transformFunction: null }, enableZoom: { classPropertyName: "enableZoom", publicName: "enableZoom", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, zoomMin: { classPropertyName: "zoomMin", publicName: "zoomMin", isSignal: true, isRequired: false, transformFunction: null }, zoomMax: { classPropertyName: "zoomMax", publicName: "zoomMax", isSignal: true, isRequired: false, transformFunction: null }, zoomStep: { classPropertyName: "zoomStep", publicName: "zoomStep", isSignal: true, isRequired: false, transformFunction: null }, stageWidth: { classPropertyName: "stageWidth", publicName: "stageWidth", isSignal: true, isRequired: false, transformFunction: null }, stageMinHeight: { classPropertyName: "stageMinHeight", publicName: "stageMinHeight", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, showZoomDock: { classPropertyName: "showZoomDock", publicName: "showZoomDock", isSignal: true, isRequired: false, transformFunction: null }, autoFitOnLoad: { classPropertyName: "autoFitOnLoad", publicName: "autoFitOnLoad", isSignal: true, isRequired: false, transformFunction: null }, enableExternalDrop: { classPropertyName: "enableExternalDrop", publicName: "enableExternalDrop", isSignal: true, isRequired: false, transformFunction: null }, showGridLines: { classPropertyName: "showGridLines", publicName: "showGridLines", isSignal: true, isRequired: false, transformFunction: null }, selectedNodeId: { classPropertyName: "selectedNodeId", publicName: "selectedNodeId", isSignal: true, isRequired: false, transformFunction: null }, dragFromAnywhere: { classPropertyName: "dragFromAnywhere", publicName: "dragFromAnywhere", isSignal: true, isRequired: false, transformFunction: null }, gridsterOwnsScroll: { classPropertyName: "gridsterOwnsScroll", publicName: "gridsterOwnsScroll", isSignal: true, isRequired: false, transformFunction: null }, nestedScrollbar: { classPropertyName: "nestedScrollbar", publicName: "nestedScrollbar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outChange: "outChange", outRemoveNode: "outRemoveNode", outAddBlockInside: "outAddBlockInside", outToggleType: "outToggleType", zoom: "zoomChange", outZoomChange: "outZoomChange", selectedNodeId: "selectedNodeIdChange", outDropNode: "outDropNode", outSelectNode: "outSelectNode", outConfigNode: "outConfigNode" }, host: { listeners: { "document:keydown": "handlerDocumentKeyDown($event)", "document:click": "handlerDocumentClick($event)" } }, viewQueries: [{ propertyName: "gridsterRef", first: true, predicate: GridsterComponent, descendants: true, isSignal: true }, { propertyName: "scrollAreaRef", first: true, predicate: ["scrollArea"], descendants: true, isSignal: true }, { propertyName: "zoomDockRef", first: true, predicate: ["zoomDock"], descendants: true, isSignal: true }, { propertyName: "itemHosts", predicate: ["itemHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "childCanvasTemplates", predicate: ["childCanvasTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isZoomActive()) {\n  <!-- Khu v\u1EF1c cu\u1ED9n ch\u1EE9a canvas stage thu ph\u00F3ng -->\n  <div\n    #scrollArea\n    class=\"libs-ui-grid-layout-scroll-area relative h-full min-h-0 w-full min-w-0 overflow-auto p-6 flex justify-start items-start\"\n    (mousedown)=\"handlerMouseDownTrongLuoi($event)\"\n    (pointerdown)=\"handlerScrollAreaPointerDown()\"\n    (wheel)=\"handlerWheel($event)\"\n    (dragover)=\"handlerDragOver($event)\"\n    (dragleave)=\"handlerDragLeave($event)\"\n    (drop)=\"handlerDrop($event)\">\n    <div\n      #canvasStage\n      id=\"bi-canvas-stage\"\n      class=\"libs-ui-grid-layout-stage relative flex flex-col transition-[zoom] duration-150 origin-top shrink-0 mx-auto bg-white/80 border border-slate-200/80 rounded-2xl shadow-sm p-4\"\n      [style.zoom]=\"currentZoom()\"\n      [style.width.px]=\"stageWidth()\"\n      [style.min-width.px]=\"stageWidth()\"\n      [style.min-height.px]=\"stageMinHeight()\"\n      [style.--libs-ui-grid-layout-visual-gap.px]=\"visualGap()\">\n      <!-- Snapped Drop Ghost Preview -->\n      @if (dropGhost(); as ghost) {\n        <div\n          class=\"pointer-events-none absolute z-30 flex flex-col items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-blue-500 bg-blue-500/15 p-1 shadow-sm transition-all duration-75 ease-out backdrop-blur-[0.5px] select-none\"\n          [style.left.px]=\"ghost.pixelLeft\"\n          [style.top.px]=\"ghost.pixelTop\"\n          [style.width.px]=\"ghost.pixelWidth\"\n          [style.height.px]=\"ghost.pixelHeight\">\n          <div class=\"inline-flex max-w-[95%] items-center gap-1 truncate rounded-md bg-blue-600 px-2 py-0.5 text-[11px] font-semibold text-white shadow-xs\">\n            @if (ghost.cardIconClass) {\n              <i [class]=\"ghost.cardIconClass + ' text-xs'\"></i>\n            } @else if (ghost.cardIconText) {\n              <span class=\"text-[10px] font-bold\">{{ ghost.cardIconText }}</span>\n            } @else {\n              <span class=\"text-xs font-bold\">{{ ghost.isInsideGroup ? '\u21B3' : '+' }}</span>\n            }\n            <span class=\"truncate\">{{ ghost.cardTitle }}</span>\n            <span class=\"text-[9px] font-mono opacity-75\">({{ ghost.cols }}c)</span>\n          </div>\n\n          @if (ghost.pixelHeight >= 80) {\n            <div class=\"mt-1 flex max-w-[95%] items-center gap-1.5 truncate rounded border border-blue-100 bg-white/95 px-2 py-0.5 text-[10px] font-medium text-blue-700 shadow-xs\">\n              @if (ghost.isInsideGroup) {\n                <span class=\"truncate font-bold text-blue-900\">\u21B3 {{ ghost.groupTitle }}</span>\n                <span class=\"text-blue-300\">\u2022</span>\n              }\n              <span>C\u1ED9t {{ ghost.col + 1 }}-{{ ghost.col + ghost.cols }}</span>\n            </div>\n          }\n        </div>\n      }\n      <gridster\n        class=\"h-full w-full\"\n        [class.display-grid]=\"showGridLines()\"\n        [class.libs-ui-grid-layout-drag-anywhere]=\"dragFromAnywhere()\"\n        [options]=\"gridOptions()\">\n          @for (item of children(); track item.id; let itemIndex = $index) {\n    <!-- \uD83D\uDD34 Ch\u1EB7n `mousedown` t\u1EA1i \u0110\u00C2Y cho l\u01B0\u1EDBi l\u1ED3ng \u2014 C\u1EA4M b\u1ECF v\u00E0 C\u1EA4M chuy\u1EC3n sang ch\u1ED7 kh\u00E1c.\n         `ignoreContentClass` m\u1ED9t m\u00ECnh KH\u00D4NG \u0111\u1EE7: `delayStart: 160` l\u00E0m M\u1ED6I l\u01B0\u1EDBi l\u00EAn l\u1ECBch\n         `dragStart` b\u1EB1ng `setTimeout` ngay t\u1EA1i `mousedown`, c\u00F2n `stopPropagation` m\u00E0 lib g\u1ECDi b\u00EAn\n         trong `dragStart` ch\u1EA1y sau 160ms n\u00EAn qu\u00E1 mu\u1ED9n \u2014 l\u01B0\u1EDBi CHA \u0111\u00E3 k\u1ECBp nh\u1EADn (\u0111o 28/08/2026: k\u00E9o\n         d\u1EA3i kh\u1ED1i con, chu\u1ED7i class duy\u1EC7t l\u00EAn \u0110\u00DANG m\u00E0 container v\u1EABn nh\u1EA3y 0,0 \u2192 0,1).\n         G\u1EAFn \u1EDF `gridster-item` l\u00E0 \u0111\u00FAng bi\u00EAn: l\u01B0\u1EDBi con nghe tr\u00EAn ch\u00EDnh ph\u1EA7n t\u1EED n\u00E0y n\u00EAn \u0111\u00E3 nh\u1EADn xong,\n         l\u01B0\u1EDBi cha \u1EDF ngo\u00E0i b\u1ECB ch\u1EB7n. -->\n    <gridster-item\n      [item]=\"item\"\n      [class.libs-ui-grid-layout-selected]=\"selectedNodeId() === item.id\"\n      (click)=\"handlerSelectNode(item, $event)\"\n      (mousedown)=\"handlerBlockParentDrag($event)\">\n      <!-- \uD83D\uDD34 V\u1ECF n\u00E0y mang `dragHandleClass` \u2014 C\u1EA4M b\u1ECF.\n           `ignoreContent: true` b\u1EAFt gridster CH\u1EC8 cho k\u00E9o khi ch\u1ED7 b\u1EA5m n\u1EB1m d\u01B0\u1EDBi m\u1ED9t ph\u1EA7n t\u1EED c\u00F3\n           `dragHandleClass`. Kh\u00F4ng c\u00F3 v\u1ECF n\u00E0y th\u00EC component c\u1EE7a n\u01A1i d\u00F9ng (th\u01B0 vi\u1EC7n kh\u00F4ng ki\u1EC3m so\u00E1t\n           \u0111\u01B0\u1EE3c class c\u1EE7a n\u00F3) s\u1EBD kh\u00F4ng c\u00F3 tay c\u1EA7m n\u00E0o, v\u00E0 KH\u00D4NG kh\u1ED1i n\u00E0o k\u00E9o \u0111\u01B0\u1EE3c \u2014 \u0111o 28/08/2026:\n           k\u00E9o 320px, to\u1EA1 \u0111\u1ED9 kh\u1ED1i gi\u1EEF nguy\u00EAn x=3,y=0.\n           T\u00EAn class theo c\u1EA5p: l\u01B0\u1EDBi trang v\u00E0 l\u01B0\u1EDBi l\u1ED3ng d\u00F9ng hai t\u00EAn KH\u00C1C nhau, n\u1EBFu kh\u00F4ng l\u01B0\u1EDBi cha\n           c\u0169ng nh\u1EADn ra tay c\u1EA7m c\u1EE7a kh\u1ED1i con v\u00E0 nh\u1EA5c lu\u00F4n container. -->\n      <!-- \uD83D\uDD34 V\u1ECF KH\u00D4NG mang `dragHandleClass` \u2014 C\u1EA4M th\u00EAm l\u1EA1i.\n           K\u00E9o ch\u1EC9 \u0111\u01B0\u1EE3c ph\u00E9p b\u1EAFt \u0111\u1EA7u t\u1EEB D\u1EA2I XANH (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026: \"ph\u1EA3i hover v\u00E0o v\u00F9ng\n           m\u00E0u xanh th\u00EC m\u1EDBi k\u00E9o th\u1EA3 \u0111\u01B0\u1EE3c cho \u0111\u1ED3ng nh\u1EA5t\"). Cho c\u1EA3 v\u1ECF l\u00E0m tay c\u1EA7m th\u00EC b\u1EA5m \u0111\u00E2u c\u0169ng\n           k\u00E9o, v\u00E0 kh\u1ED1i con n\u1EB1m trong container s\u1EBD nh\u1EA5c lu\u00F4n container v\u00EC l\u01B0\u1EDBi cha duy\u1EC7t l\u00EAn g\u1EB7p\n           tay c\u1EA7m c\u1EE7a v\u1ECF container tr\u01B0\u1EDBc.\n           V\u1ECF kh\u1ED1i con v\u1EABn gi\u1EEF class CH\u1EB6N \u0111\u1EC3 l\u01B0\u1EDBi cha d\u1EEBng \u0111\u00FAng \u1EDF bi\u00EAn. -->\n      <!-- \uD83D\uDD34 `dragFromAnywhere` b\u1EADt th\u00EC B\u1ECE class ch\u1EB7n \u2014 C\u1EA4M g\u1EAFn l\u1EA1i v\u00F4 \u0111i\u1EC1u ki\u1EC7n.\n           `libs-ui-grid-layout-block-parent-drag` CH\u00CDNH L\u00C0 `ignoreContentClass` c\u1EE7a gridster (xem\n           `gridster-config.define`). V\u1EDBi `ignoreContent: true` n\u00F3 ch\u1EC9 mang ngh\u0129a \"kh\u00F4ng ph\u1EA3i tay\n           c\u1EA7m\"; nh\u01B0ng v\u1EDBi `ignoreContent: false` (ch\u1EBF \u0111\u1ED9 c\u1EA7m-c\u1EA3-th\u1EBB) gridster hi\u1EC3u l\u00E0 \"v\u00F9ng C\u1EA4M\n           k\u00E9o\": duy\u1EC7t t\u1EEB ch\u1ED7 b\u1EA5m l\u00EAn g\u1EB7p class n\u00E0y l\u00E0 d\u1EEBng h\u1EB3n, n\u00EAn KH\u1ED0I CON trong kh\u1ED1i gh\u00E9p b\u1EA5m\n           v\u00E0o \u0111\u00E2u c\u0169ng kh\u00F4ng nh\u00FAc nh\u00EDch (ng\u01B0\u1EDDi d\u00F9ng ch\u1EC9 ra 15/09/2026; \u0111o \u0111\u01B0\u1EE3c k\u00E9o 150px m\u00E0 kh\u1ED1i\n           l\u1EC7ch 0px). Ch\u1EB7n l\u01B0\u1EDBi cha \u1EDF ch\u1EBF \u0111\u1ED9 n\u00E0y do `handlerBlockParentDrag` tr\u00EAn ch\u00EDnh\n           `gridster-item` lo, kh\u00F4ng c\u1EA7n class n\u00E0y. -->\n      <div\n        class=\"libs-ui-grid-layout-block-shell group relative h-full w-full min-w-0\"\n        [attr.data-node-id]=\"item.id\"\n        [class.libs-ui-grid-layout-block-parent-drag]=\"isNestedCanvas() && !dragFromAnywhere()\">\n        <!-- D\u1EA3i k\u00E9o: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i, ba ch\u1EA5m l\u00E0 d\u1EA5u hi\u1EC7u k\u00E9o quen thu\u1ED9c.\n             Ng\u01B0\u1EDDi d\u00F9ng c\u1EA7n m\u1ED9t ch\u1ED7 b\u00E1m R\u00D5 R\u00C0NG thay v\u00EC \u0111o\u00E1n xem b\u1EA5m \u0111\u00E2u th\u00EC k\u00E9o \u0111\u01B0\u1EE3c\n             (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng d\u1EA3i \u0111ang d\u00F9ng \u1EDF m\u00E0n Customer 360 c\u1EE7a mobio-web). -->\n        <!-- \uD83D\uDD34 `dragFromAnywhere` b\u1EADt th\u00EC KH\u00D4NG v\u1EBD d\u1EA3i: c\u1EA3 th\u1EBB \u0111\u00E3 l\u00E0 tay c\u1EA7m, \u0111\u1EC3 l\u1EA1i d\u1EA3i ch\u1EC9 th\u1EEBa. -->\n        @if (isEditMode() && !dragFromAnywhere()) {\n          <!-- \uD83D\uDD34 D\u1EA3i PH\u1EA2I mang tay c\u1EA7m \u0110\u00DANG C\u1EA4P c\u1EE7a n\u00F3. D\u1EA3i nh\u1EADn chu\u1ED9t (`pointer-events: auto`),\n               n\u00EAn n\u1EBFu kh\u00F4ng mang tay c\u1EA7m th\u00EC `checkDragHandleClass` duy\u1EC7t l\u00EAn g\u1EB7p tay c\u1EA7m c\u1EE7a\n               container v\u00E0 nh\u1EA5c container thay v\u00EC kh\u1ED1i con (\u0111o 28/08/2026: k\u00E9o d\u1EA3i kh\u1ED1i con,\n               container nh\u1EA3y 0,0 \u2192 0,1 c\u00F2n kh\u1ED1i con \u0111\u1EE9ng im).\n               \uD83D\uDD34 D\u1EA3i CH\u1EC8 mang tay c\u1EA7m, C\u1EA4M mang th\u00EAm class ch\u1EB7n: `checkDragHandleClass` x\u00E9t hai\n               class \u0111\u00F3 tr\u00EAn C\u00D9NG m\u1ED9t node n\u00EAn \u0111\u1EC3 chung l\u00E0 k\u00E9o h\u1ECFng (\u0111o 28/08/2026: b\u1EA5m d\u1EA3i kh\u1ED1i\n               con k\u00E9o 140px, kh\u1ED1i \u0111\u1EE9ng im). Vi\u1EC7c ch\u1EB7n l\u01B0\u1EDBi cha do V\u1ECE KH\u1ED0I lo. -->\n          <div\n            class=\"libs-ui-grid-layout-drag-bar\"\n            [class.libs-ui-grid-layout-drag-bar-child]=\"isNestedCanvas()\"\n            [class.libs-ui-grid-layout-drag-handle]=\"!isNestedCanvas()\"\n            [class.libs-ui-grid-layout-drag-handle-child]=\"isNestedCanvas()\">\n            <span class=\"libs-ui-grid-layout-drag-bar-dots\">\n              @for (dot of dragBarDots; track dot) {\n                <span class=\"libs-ui-grid-layout-drag-bar-dot\"></span>\n              }\n            </span>\n          </div>\n        }\n\n        <!-- Khung ch\u1EE9a component c\u1EE7a n\u01A1i d\u00F9ng.\n             \uD83D\uDD34 PH\u1EA2I c\u00F3 khung th\u1EADt (kh\u00F4ng ph\u1EA3i `ng-container` tr\u1ED1ng): n\u00F3 lo h\u1ED9 n\u01A1i d\u00F9ng ph\u1EA7n l\u1EA5p \u0111\u1EA7y\n             \u00F4 v\u00E0 vi\u1EC1n b\u00E1o ch\u1EBF \u0111\u1ED9 s\u1EEDa. Kh\u00F4ng c\u00F3 khung th\u00EC m\u1ED7i component n\u1ED9i dung l\u1EA1i ph\u1EA3i t\u1EF1 vi\u1EBFt\n             `:host { width/height: 100% }` + vi\u1EC1n \u0111\u1EE9t \u2014 \u0111\u00F3 l\u00E0 vi\u1EC7c c\u1EE7a th\u01B0 vi\u1EC7n, kh\u00F4ng ph\u1EA3i c\u1EE7a\n             ng\u01B0\u1EDDi d\u00F9ng (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026).\n             M\u1ED7i kh\u1ED1i m\u1ED9t ViewContainerRef ri\u00EAng n\u00EAn component n\u1EB1m \u0111\u00FAng \u00F4 c\u1EE7a n\u00F3. -->\n        <!-- \uD83D\uDD34 Container C\u00D3 `getComponentOutlet`: khung n\u00E0y l\u00E0 V\u1ECE, v\u00E0 canvas con \u0111\u01B0\u1EE3c \u0111\u01B0a V\u00C0O TRONG\n             component v\u1ECF qua input `childCanvas` (m\u1ED9t `TemplateRef`) \u2014 xem `ng-template #childCanvasTpl`\n             b\u00EAn d\u01B0\u1EDBi. V\u1ECF t\u1EF1 quy\u1EBFt \u0111\u1EB7t canvas \u1EDF \u0111\u00E2u gi\u1EEFa ti\u00EAu \u0111\u1EC1 v\u00E0 ph\u1EA7n th\u00E2n c\u1EE7a n\u00F3.\n             Tr\u01B0\u1EDBc \u0111\u00E2y canvas con l\u00E0 ANH EM c\u1EE7a khung n\u00E0y, n\u00EAn v\u1ECF chi\u1EBFm tr\u1ECDn chi\u1EC1u cao r\u1ED3i \u0111\u1EA9y to\u00E0n b\u1ED9\n             th\u1EBB con ra ngo\u00E0i v\u00F9ng nh\u00ECn th\u1EA5y (\u0111o 14/09/2026: m\u1ECDi kh\u1ED1i gh\u00E9p ch\u1EC9 c\u00F2n nh\u00E3n v\u00E0 ru\u1ED9t tr\u1EAFng). -->\n        <div\n          class=\"libs-ui-grid-layout-content-frame\"\n          [class.libs-ui-grid-layout-content-frame-edit]=\"isEditMode() && !isContainer(item)\"\n          [class.libs-ui-grid-layout-content-frame-empty]=\"isContainer(item) && !item.getComponentOutlet\">\n          <ng-container #itemHost />\n        </div>\n\n        <!-- D\u1EA5u hi\u1EC7u CONTAINER: nh\u00E3n g\u00F3c tr\u00EAn-ph\u1EA3i + vi\u1EC1n \u0111\u1EE9t bao ru\u1ED9t. Kh\u00F4ng c\u00F3 d\u1EA5u hi\u1EC7u th\u00EC\n             ng\u01B0\u1EDDi d\u00F9ng kh\u00F4ng bi\u1EBFt kh\u1ED1i n\u00E0o ch\u1EE9a \u0111\u01B0\u1EE3c kh\u1ED1i kh\u00E1c (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng c\u00E1ch\n             m\u00E0n Customer 360 c\u1EE7a mobio-web \u0111ang l\u00E0m). -->\n        @if (isEditMode() && isContainer(item)) {\n          <div class=\"libs-ui-grid-layout-container-label\">{{ 'i18n_container_block' | translate }}</div>\n          <div class=\"libs-ui-grid-layout-container-border\"></div>\n        }\n\n        <!-- Thanh c\u00F4ng c\u1EE5: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i.\n             \uD83D\uDD34 D\u00F9ng `libs_ui-components-buttons-button` \u2014 C\u1EA4M t\u1EF1 d\u1EF1ng th\u1EBB `<button>`.\n             Component n\u00E0y \u0111\u00E3 c\u00F3 s\u1EB5n ki\u1EC3u n\u00FAt, c\u1EE1 n\u00FAt v\u00E0 bong b\u00F3ng ch\u00FA th\u00EDch theo \u0111\u00FAng b\u1ED9 giao di\u1EC7n\n             c\u1EE7a s\u1EA3n ph\u1EA9m; t\u1EF1 d\u1EF1ng l\u00E0 m\u1ED7i n\u01A1i m\u1ED9t ki\u1EC3u v\u00E0 m\u1EA5t lu\u00F4n tooltip. -->\n        @if (isEditMode() && !hiddenToolbar()) {\n          @if (templateToolbar()) {\n            <!-- N\u01A1i d\u00F9ng t\u1EF1 v\u1EBD thanh c\u00F4ng c\u1EE5: nh\u1EADn kh\u1ED1i + c\u00E1c h\u00E0m ph\u00E1t event qua context.\n\n                 \uD83D\uDD34 Kh\u1ED1i b\u1ECDc t\u1EF1 ch\u1EB7n `mousedown`/`click` n\u1ED5i l\u00EAn gridster. Thanh c\u00F4ng c\u1EE5 n\u1EB1m trong\n                 v\u00F9ng mang `dragHandleClass`; kh\u00F4ng ch\u1EB7n th\u00EC c\u00FA b\u1EA5m b\u1ECB hi\u1EC3u l\u00E0 b\u1EAFt \u0111\u1EA7u k\u00E9o v\u00E0\n                 `delayStart: 160` nu\u1ED1t lu\u00F4n `click` \u2014 n\u00FAt trong template ngo\u00E0i b\u1EA5m kh\u00F4ng \u0103n\n                 (\u0111o 09/09/2026: b\u1EA5m b\u1EB1ng `.click()` c\u1EE7a DOM th\u00EC m\u1EDF, b\u1EA5m chu\u1ED9t th\u1EADt th\u00EC kh\u00F4ng).\n                 Ch\u1EB7n \u1EDF \u0110\u00C2Y \u0111\u1EC3 n\u01A1i d\u00F9ng kh\u00F4ng ph\u1EA3i bi\u1EBFt b\u1EABy n\u00E0y. -->\n            <div\n              class=\"libs-ui-grid-layout-toolbar\"\n              role=\"toolbar\"\n              tabindex=\"0\"\n              [class.libs-ui-grid-layout-toolbar-child]=\"isNestedCanvas()\"\n              (mousedown)=\"handlerStopEvent($event)\"\n              (keydown)=\"handlerStopEvent($event)\"\n              (click)=\"handlerStopEvent($event)\">\n              <ng-container\n                *ngTemplateOutlet=\"templateToolbar()!; context: toolbarContexts()[itemIndex]\" />\n            </div>\n          } @else {\n            <div\n              class=\"libs-ui-grid-layout-toolbar\"\n              [class.libs-ui-grid-layout-toolbar-child]=\"isNestedCanvas()\">\n              <span class=\"libs-ui-grid-layout-dim-badge\">\n                {{ item.rows }} h\u00E0ng \u00D7 {{ item.cols }} c\u1ED9t\n              </span>\n              @if (canAddInside(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"'libs-ui-icon-add'\"\n                  [popover]=\"{ config: { content: 'Th\u00EAm kh\u1ED1i v\u00E0o trong', zIndex: 1300 } }\"\n                  (outClick)=\"handlerAddInside($event, item)\" />\n              }\n              @if (canToggleType(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"isContainer(item) ? 'libs-ui-icon-split-cell' : 'libs-ui-icon-merge-cell'\"\n                  [popover]=\"{ config: { content: isContainer(item) ? '\u0110\u01B0a v\u1EC1 kh\u1ED1i \u0111\u01A1n' : 'Chuy\u1EC3n th\u00E0nh kh\u1ED1i gh\u00E9p', zIndex: 1300 } }\"\n                  (outClick)=\"handlerToggleType($event, item)\" />\n              }\n              <libs_ui-components-buttons-button\n                [type]=\"'button-third'\"\n                [iconOnlyType]=\"true\"\n                [sizeButton]=\"'smaller'\"\n                [classIconLeft]=\"'libs-ui-icon-setting'\"\n                [popover]=\"{ config: { content: 'C\u1EA5u h\u00ECnh th\u1EBB', zIndex: 1300 } }\"\n                (outClick)=\"handlerConfig($event, item)\" />\n              <libs_ui-components-buttons-button\n                [type]=\"'button-third-hover-danger'\"\n                [iconOnlyType]=\"true\"\n                [sizeButton]=\"'smaller'\"\n                [classIconLeft]=\"'libs-ui-icon-remove'\"\n                [popover]=\"{ config: { content: isContainer(item) ? 'Xo\u00E1 c\u1EA3 kh\u1ED1i gh\u00E9p' : 'Xo\u00E1 kh\u1ED1i', zIndex: 1300 } }\"\n                (outClick)=\"handlerRemove($event, item)\" />\n            </div>\n          }\n        }\n\n        @if (item.children && item.children.length > 0) {\n          <!-- Kh\u1ED1i c\u00F3 con \u2192 ru\u1ED9t n\u00F3 l\u1EA1i l\u00E0 m\u1ED9t m\u1EB7t ph\u1EB3ng n\u1EEFa. \u0110\u1EC7 quy \u1EDF \u0111\u00E2y, n\u01A1i d\u00F9ng kh\u00F4ng ph\u1EA3i lo.\n               L\u1EC1 \u0111\u1EB7t \u1EDF \u0110\u00C2Y (v\u1ECF container), kh\u00F4ng \u0111\u1EB7t v\u00E0o l\u01B0\u1EDBi con \u2014 l\u01B0\u1EDBi con gi\u1EEF nguy\u00EAn khe 2px.\n\n               \uD83D\uDD34 Khu\u00F4n \u0111\u1EB7t trong `ng-template` \u0111\u1EC3 \u0111i \u0111\u01B0\u1EE3c HAI \u0111\u01B0\u1EDDng:\n               - Container KH\u00D4NG c\u00F3 v\u1ECF ri\u00EAng \u2192 v\u1EBD th\u1EB3ng t\u1EA1i \u0111\u00E2y, y nh\u01B0 tr\u01B0\u1EDBc.\n               - Container C\u00D3 `getComponentOutlet` \u2192 th\u01B0 vi\u1EC7n truy\u1EC1n khu\u00F4n n\u00E0y xu\u1ED1ng component v\u1ECF qua\n                 input `childCanvas`, v\u1ECF t\u1EF1 \u0111\u1EB7t n\u00F3 v\u00E0o gi\u1EEFa ti\u00EAu \u0111\u1EC1 v\u00E0 ph\u1EA7n th\u00E2n c\u1EE7a m\u00ECnh. V\u1EBD th\u00EAm \u1EDF\n                 \u0111\u00E2y n\u1EEFa l\u00E0 hai m\u1EB7t ph\u1EB3ng l\u1ED3ng ch\u1ED3ng nhau. -->\n          <ng-template #childCanvasTpl>\n            <libs_ui-services-grid_layout-canvas\n              class=\"block h-full w-full\"\n              [style.padding]=\"containerPadding()\"\n              [node]=\"item\"\n              [depth]=\"depth() + 1\"\n              [dragFromAnywhere]=\"dragFromAnywhere()\"\n              [nestedScrollbar]=\"nestedScrollbar()\"\n              [hiddenToolbar]=\"hiddenToolbar()\"\n              [templateToolbar]=\"templateToolbar()\"\n              [selectedNodeId]=\"selectedNodeId()\"\n              (outSelectNode)=\"outSelectNode.emit($event)\"\n              (outConfigNode)=\"outConfigNode.emit($event)\"\n              (outChange)=\"outChange.emit($event)\"\n              (outRemoveNode)=\"outRemoveNode.emit($event)\"\n              (outAddBlockInside)=\"outAddBlockInside.emit($event)\"\n              (outToggleType)=\"outToggleType.emit($event)\" />\n          </ng-template>\n\n          @if (!item.getComponentOutlet) {\n            <ng-container [ngTemplateOutlet]=\"childCanvasTpl\" />\n          }\n        }\n      </div>\n    </gridster-item>\n  }\n      </gridster>\n    </div>\n  </div>\n\n  <!-- Thanh dock \u0111i\u1EC1u khi\u1EC3n thu ph\u00F3ng n\u1ED5i \u1EDF g\u00F3c d\u01B0\u1EDBi tr\u00E1i -->\n  @if (showZoomDock()) {\n    <div\n      #zoomDock\n      id=\"canvas-zoom-dock\"\n      role=\"toolbar\"\n      tabindex=\"0\"\n      class=\"absolute bottom-4 left-6 z-30 flex items-center bg-white rounded-full shadow-2xl border-2 border-slate-400 p-1 space-x-1 select-none\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (keydown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation()\">\n      <!-- Thu nh\u1ECF (-) -->\n      <button\n        type=\"button\"\n        class=\"w-[28px] h-[28px] flex items-center justify-center rounded-full text-slate-700 hover:text-slate-900 hover:bg-slate-200 disabled:opacity-30 disabled:hover:bg-transparent transition-colors cursor-pointer\"\n        [disabled]=\"currentZoom() <= zoomMin()\"\n        [title]=\"'i18n_zoom_out' | translate\"\n        (click)=\"handlerZoomOut()\">\n        <svg class=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/></svg>\n      </button>\n\n      <!-- T\u1EF7 l\u1EC7 % v\u00E0 menu preset -->\n      <div class=\"relative\">\n        <button\n          type=\"button\"\n          class=\"h-[28px] px-2 flex items-center gap-1 rounded-full text-xs font-semibold text-slate-700 hover:bg-slate-200 transition-colors cursor-pointer\"\n          [title]=\"'i18n_zoom_options' | translate\"\n          (click)=\"handlerToggleMenu()\">\n          <span>{{ zoomPercent() }}%</span>\n          <svg class=\"w-[12px] h-[12px] text-slate-400 transition-transform duration-150\" [class.rotate-180]=\"isMenuOpen()\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"/></svg>\n        </button>\n\n        <!-- Menu dropdown c\u00E1c m\u1ED1c thu ph\u00F3ng -->\n        @if (isMenuOpen()) {\n          <div class=\"absolute bottom-full mb-2 left-0 w-[256px] bg-white rounded-xl shadow-xl border border-slate-200 py-1.5 z-40 text-xs select-none\">\n            <div class=\"px-3 py-1 text-[11px] font-semibold text-slate-400 uppercase tracking-wider\">\n              {{ 'i18n_zoom_canvas_width' | translate: { width: stageWidth() } }}\n            </div>\n            <button\n              type=\"button\"\n              class=\"w-full px-3 py-2 text-left flex items-center justify-between hover:bg-slate-50 transition-colors cursor-pointer\"\n              (click)=\"handlerFitScreen()\">\n              <span class=\"flex items-center gap-2 text-slate-700 font-medium\">\n                <svg class=\"w-3.5 h-3.5 text-slate-600\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" y1=\"3\" x2=\"14\" y2=\"10\"/><line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"/></svg>\n                {{ 'i18n_zoom_fit_screen' | translate }}\n              </span>\n              <span class=\"text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded font-medium\">{{ 'i18n_auto' | translate }}</span>\n            </button>\n            <div class=\"h-px bg-slate-100 my-1\"></div>\n            @for (preset of zoomPresets; track preset.value) {\n              <button\n                type=\"button\"\n                class=\"w-full px-3 py-1.5 text-left flex items-center justify-between hover:bg-slate-50 transition-colors cursor-pointer\"\n                [class.text-blue-600]=\"isCurrentPreset(preset.value)\"\n                [class.font-semibold]=\"isCurrentPreset(preset.value)\"\n                [class.bg-blue-50]=\"isCurrentPreset(preset.value)\"\n                (click)=\"handlerSelectPreset(preset.value)\">\n                <span class=\"text-slate-700\" [class.text-blue-600]=\"isCurrentPreset(preset.value)\">\n                  {{ preset.label | translate }}\n                </span>\n                @if (isCurrentPreset(preset.value)) {\n                  <svg class=\"w-3.5 h-3.5 text-blue-600\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n                }\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Ph\u00F3ng to (+) -->\n      <button\n        type=\"button\"\n        class=\"w-[28px] h-[28px] flex items-center justify-center rounded-full text-slate-700 hover:text-slate-900 hover:bg-slate-200 disabled:opacity-30 disabled:hover:bg-transparent transition-colors cursor-pointer\"\n        [disabled]=\"currentZoom() >= zoomMax()\"\n        [title]=\"'i18n_zoom_in' | translate\"\n        (click)=\"handlerZoomIn()\">\n        <svg class=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/></svg>\n      </button>\n\n      <!-- Ph\u00E2n c\u00E1ch -->\n      <div class=\"h-[16px] w-px bg-slate-200\"></div>\n\n      <!-- N\u00FAt V\u1EEBa m\u00E0n h\u00ECnh nhanh -->\n      <button\n        type=\"button\"\n        class=\"h-[28px] shrink-0 px-2.5 flex items-center gap-1 rounded-full text-xs text-slate-700 hover:text-slate-900 hover:bg-slate-200 transition-colors cursor-pointer\"\n        [title]=\"'i18n_zoom_fit_screen_tooltip' | translate\"\n        (click)=\"handlerFitScreen()\">\n        <svg class=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" y1=\"3\" x2=\"14\" y2=\"10\"/><line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"/></svg>\n        <span class=\"whitespace-nowrap font-medium\">{{ 'i18n_zoom_fit_screen' | translate }}</span>\n      </button>\n\n      <!-- N\u00FAt \u0110\u1EB7t l\u1EA1i 100% (ch\u1EC9 hi\u1EC7n khi kh\u00E1c 100%) -->\n      @if (zoomPercent() !== 100) {\n        <button\n          type=\"button\"\n          class=\"h-[28px] px-2 flex items-center gap-1 rounded-full text-xs font-semibold text-blue-600 hover:bg-blue-50 transition-colors cursor-pointer\"\n          [title]=\"'i18n_zoom_reset_tooltip' | translate: { width: stageWidth(), height: stageMinHeight() }\"\n          (click)=\"handlerResetZoom()\">\n          <svg class=\"w-[12px] h-[12px]\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"1 4 1 10 7 10\"/><path d=\"M3.51 15a9 9 0 1 0 2.13-9.36L1 10\"/></svg>\n          <span>100%</span>\n        </button>\n      }\n    </div>\n  }\n} @else {\n  <!-- \uD83D\uDD34 `relative` l\u00E0 B\u1EAET BU\u1ED8C, C\u1EA4M b\u1ECF.\n       gridster \u0111\u1ED5i v\u1ECB tr\u00ED chu\u1ED9t th\u00E0nh \u00F4 l\u01B0\u1EDBi b\u1EB1ng `e.clientY + (el.scrollTop - el.offsetTop)` \u2014 c\u00F4ng\n       th\u1EE9c \u0111\u00F3 ch\u1EC9 \u0111\u00FAng khi `offsetParent` c\u1EE7a <gridster> CH\u00CDNH L\u00C0 kh\u1ED1i cu\u1ED9n n\u00E0y. Thi\u1EBFu `relative` th\u00EC\n       `offsetParent` nh\u1EA3y l\u00EAn kh\u1ED1i bao ngo\u00E0i: `offsetTop` tr\u1EA3 16 trong khi l\u1EC7ch th\u1EADt l\u00E0 65 \u2192 gridster\n       t\u00EDnh \u00F4 sai 49px, \u00F4 ch\u1EDD \u0111\u1EB7t hi\u1EC7n l\u1EC7ch kh\u1ECFi con tr\u1ECF n\u00EAn k\u00E9o th\u1EA3 kh\u00F4ng \u0111\u1ED5i \u0111\u01B0\u1EE3c v\u1ECB tr\u00ED, v\u00E0 k\u00E9o m\u00E9p\n       c\u0169ng t\u00EDnh sai \u0111i\u1EC3m d\u1EEBng. -->\n  <!-- \uD83D\uDD34 `ignoreInit` l\u00E0 c\u00F4ng t\u1EAFc B\u1EACT/T\u1EAET c\u1EE7a thanh cu\u1ED9n n\u1ED5i: directive kh\u00F4ng th\u1EC3 g\u1EAFn c\u00F3 \u0111i\u1EC1u ki\u1EC7n,\n       n\u00EAn khi t\u1EAFt ph\u1EA3i ch\u1EB7n ngay \u1EDF \u0111\u00E2y \u2014 b\u1EADt r\u1ED3i m\u1EDBi b\u1ECDc th\u00EAm `div.libs-ui-scroll-overlay-container`.\n       Nh\u1EDD v\u1EADy m\u1EB7t ph\u1EB3ng G\u1ED0C c\u1EE7a n\u01A1i d\u00F9ng kh\u00E1c gi\u1EEF nguy\u00EAn c\u1EA5u tr\u00FAc DOM nh\u01B0 tr\u01B0\u1EDBc. -->\n  <div\n    #scrollArea\n    class=\"libs-ui-grid-layout-scroll-area relative h-full min-h-0 w-full min-w-0\"\n    [class.overflow-y-auto]=\"!isNestedCanvas()\"\n    LibsUiComponentsScrollOverlayDirective\n    [ignoreInit]=\"!showNestedScrollbar()\"\n    [options]=\"nestedScrollOverlayOptions\"\n    (mousedown)=\"handlerMouseDownTrongLuoi($event)\"\n    (pointerdown)=\"handlerScrollAreaPointerDown()\"\n    (dragover)=\"handlerDragOver($event)\"\n    (dragleave)=\"handlerDragLeave($event)\"\n    (drop)=\"handlerDrop($event)\">\n    <!-- Snapped Drop Ghost Preview -->\n    @if (dropGhost(); as ghost) {\n      <div\n        class=\"pointer-events-none absolute z-30 flex flex-col items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-blue-500 bg-blue-500/15 p-1 shadow-sm transition-all duration-75 ease-out backdrop-blur-[0.5px] select-none\"\n        [style.left.px]=\"ghost.pixelLeft\"\n        [style.top.px]=\"ghost.pixelTop\"\n        [style.width.px]=\"ghost.pixelWidth\"\n        [style.height.px]=\"ghost.pixelHeight\">\n        <div class=\"inline-flex max-w-[95%] items-center gap-1 truncate rounded-md bg-blue-600 px-2 py-0.5 text-[11px] font-semibold text-white shadow-xs\">\n          @if (ghost.cardIconClass) {\n            <i [class]=\"ghost.cardIconClass + ' text-xs'\"></i>\n          } @else if (ghost.cardIconText) {\n            <span class=\"text-[10px] font-bold\">{{ ghost.cardIconText }}</span>\n          } @else {\n            <span class=\"text-xs font-bold\">{{ ghost.isInsideGroup ? '\u21B3' : '+' }}</span>\n          }\n          <span class=\"truncate\">{{ ghost.cardTitle }}</span>\n          <span class=\"text-[9px] font-mono opacity-75\">({{ ghost.cols }}c)</span>\n        </div>\n\n        @if (ghost.pixelHeight >= 80) {\n          <div class=\"mt-1 flex max-w-[95%] items-center gap-1.5 truncate rounded border border-blue-100 bg-white/95 px-2 py-0.5 text-[10px] font-medium text-blue-700 shadow-xs\">\n            @if (ghost.isInsideGroup) {\n              <span class=\"truncate font-bold text-blue-900\">\u21B3 {{ ghost.groupTitle }}</span>\n              <span class=\"text-blue-300\">\u2022</span>\n            }\n            <span>C\u1ED9t {{ ghost.col + 1 }}-{{ ghost.col + ghost.cols }}</span>\n          </div>\n        }\n      </div>\n    }\n    <gridster\n      class=\"h-full w-full\"\n      [class.display-grid]=\"showGridLines()\"\n      [class.libs-ui-grid-layout-drag-anywhere]=\"dragFromAnywhere()\"\n      [options]=\"gridOptions()\">\n        @for (item of children(); track item.id; let itemIndex = $index) {\n    <!-- \uD83D\uDD34 Ch\u1EB7n `mousedown` t\u1EA1i \u0110\u00C2Y cho l\u01B0\u1EDBi l\u1ED3ng \u2014 C\u1EA4M b\u1ECF v\u00E0 C\u1EA4M chuy\u1EC3n sang ch\u1ED7 kh\u00E1c.\n         `ignoreContentClass` m\u1ED9t m\u00ECnh KH\u00D4NG \u0111\u1EE7: `delayStart: 160` l\u00E0m M\u1ED6I l\u01B0\u1EDBi l\u00EAn l\u1ECBch\n         `dragStart` b\u1EB1ng `setTimeout` ngay t\u1EA1i `mousedown`, c\u00F2n `stopPropagation` m\u00E0 lib g\u1ECDi b\u00EAn\n         trong `dragStart` ch\u1EA1y sau 160ms n\u00EAn qu\u00E1 mu\u1ED9n \u2014 l\u01B0\u1EDBi CHA \u0111\u00E3 k\u1ECBp nh\u1EADn (\u0111o 28/08/2026: k\u00E9o\n         d\u1EA3i kh\u1ED1i con, chu\u1ED7i class duy\u1EC7t l\u00EAn \u0110\u00DANG m\u00E0 container v\u1EABn nh\u1EA3y 0,0 \u2192 0,1).\n         G\u1EAFn \u1EDF `gridster-item` l\u00E0 \u0111\u00FAng bi\u00EAn: l\u01B0\u1EDBi con nghe tr\u00EAn ch\u00EDnh ph\u1EA7n t\u1EED n\u00E0y n\u00EAn \u0111\u00E3 nh\u1EADn xong,\n         l\u01B0\u1EDBi cha \u1EDF ngo\u00E0i b\u1ECB ch\u1EB7n. -->\n    <gridster-item\n      [item]=\"item\"\n      [class.libs-ui-grid-layout-selected]=\"selectedNodeId() === item.id\"\n      (click)=\"handlerSelectNode(item, $event)\"\n      (mousedown)=\"handlerBlockParentDrag($event)\">\n      <!-- \uD83D\uDD34 V\u1ECF n\u00E0y mang `dragHandleClass` \u2014 C\u1EA4M b\u1ECF.\n           `ignoreContent: true` b\u1EAFt gridster CH\u1EC8 cho k\u00E9o khi ch\u1ED7 b\u1EA5m n\u1EB1m d\u01B0\u1EDBi m\u1ED9t ph\u1EA7n t\u1EED c\u00F3\n           `dragHandleClass`. Kh\u00F4ng c\u00F3 v\u1ECF n\u00E0y th\u00EC component c\u1EE7a n\u01A1i d\u00F9ng (th\u01B0 vi\u1EC7n kh\u00F4ng ki\u1EC3m so\u00E1t\n           \u0111\u01B0\u1EE3c class c\u1EE7a n\u00F3) s\u1EBD kh\u00F4ng c\u00F3 tay c\u1EA7m n\u00E0o, v\u00E0 KH\u00D4NG kh\u1ED1i n\u00E0o k\u00E9o \u0111\u01B0\u1EE3c \u2014 \u0111o 28/08/2026:\n           k\u00E9o 320px, to\u1EA1 \u0111\u1ED9 kh\u1ED1i gi\u1EEF nguy\u00EAn x=3,y=0.\n           T\u00EAn class theo c\u1EA5p: l\u01B0\u1EDBi trang v\u00E0 l\u01B0\u1EDBi l\u1ED3ng d\u00F9ng hai t\u00EAn KH\u00C1C nhau, n\u1EBFu kh\u00F4ng l\u01B0\u1EDBi cha\n           c\u0169ng nh\u1EADn ra tay c\u1EA7m c\u1EE7a kh\u1ED1i con v\u00E0 nh\u1EA5c lu\u00F4n container. -->\n      <!-- \uD83D\uDD34 V\u1ECF KH\u00D4NG mang `dragHandleClass` \u2014 C\u1EA4M th\u00EAm l\u1EA1i.\n           K\u00E9o ch\u1EC9 \u0111\u01B0\u1EE3c ph\u00E9p b\u1EAFt \u0111\u1EA7u t\u1EEB D\u1EA2I XANH (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026: \"ph\u1EA3i hover v\u00E0o v\u00F9ng\n           m\u00E0u xanh th\u00EC m\u1EDBi k\u00E9o th\u1EA3 \u0111\u01B0\u1EE3c cho \u0111\u1ED3ng nh\u1EA5t\"). Cho c\u1EA3 v\u1ECF l\u00E0m tay c\u1EA7m th\u00EC b\u1EA5m \u0111\u00E2u c\u0169ng\n           k\u00E9o, v\u00E0 kh\u1ED1i con n\u1EB1m trong container s\u1EBD nh\u1EA5c lu\u00F4n container v\u00EC l\u01B0\u1EDBi cha duy\u1EC7t l\u00EAn g\u1EB7p\n           tay c\u1EA7m c\u1EE7a v\u1ECF container tr\u01B0\u1EDBc.\n           V\u1ECF kh\u1ED1i con v\u1EABn gi\u1EEF class CH\u1EB6N \u0111\u1EC3 l\u01B0\u1EDBi cha d\u1EEBng \u0111\u00FAng \u1EDF bi\u00EAn. -->\n      <!-- \uD83D\uDD34 `dragFromAnywhere` b\u1EADt th\u00EC B\u1ECE class ch\u1EB7n \u2014 C\u1EA4M g\u1EAFn l\u1EA1i v\u00F4 \u0111i\u1EC1u ki\u1EC7n.\n           `libs-ui-grid-layout-block-parent-drag` CH\u00CDNH L\u00C0 `ignoreContentClass` c\u1EE7a gridster (xem\n           `gridster-config.define`). V\u1EDBi `ignoreContent: true` n\u00F3 ch\u1EC9 mang ngh\u0129a \"kh\u00F4ng ph\u1EA3i tay\n           c\u1EA7m\"; nh\u01B0ng v\u1EDBi `ignoreContent: false` (ch\u1EBF \u0111\u1ED9 c\u1EA7m-c\u1EA3-th\u1EBB) gridster hi\u1EC3u l\u00E0 \"v\u00F9ng C\u1EA4M\n           k\u00E9o\": duy\u1EC7t t\u1EEB ch\u1ED7 b\u1EA5m l\u00EAn g\u1EB7p class n\u00E0y l\u00E0 d\u1EEBng h\u1EB3n, n\u00EAn KH\u1ED0I CON trong kh\u1ED1i gh\u00E9p b\u1EA5m\n           v\u00E0o \u0111\u00E2u c\u0169ng kh\u00F4ng nh\u00FAc nh\u00EDch (ng\u01B0\u1EDDi d\u00F9ng ch\u1EC9 ra 15/09/2026; \u0111o \u0111\u01B0\u1EE3c k\u00E9o 150px m\u00E0 kh\u1ED1i\n           l\u1EC7ch 0px). Ch\u1EB7n l\u01B0\u1EDBi cha \u1EDF ch\u1EBF \u0111\u1ED9 n\u00E0y do `handlerBlockParentDrag` tr\u00EAn ch\u00EDnh\n           `gridster-item` lo, kh\u00F4ng c\u1EA7n class n\u00E0y. -->\n      <div\n        class=\"libs-ui-grid-layout-block-shell group relative h-full w-full min-w-0\"\n        [attr.data-node-id]=\"item.id\"\n        [class.libs-ui-grid-layout-block-parent-drag]=\"isNestedCanvas() && !dragFromAnywhere()\">\n        <!-- D\u1EA3i k\u00E9o: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i, ba ch\u1EA5m l\u00E0 d\u1EA5u hi\u1EC7u k\u00E9o quen thu\u1ED9c.\n             Ng\u01B0\u1EDDi d\u00F9ng c\u1EA7n m\u1ED9t ch\u1ED7 b\u00E1m R\u00D5 R\u00C0NG thay v\u00EC \u0111o\u00E1n xem b\u1EA5m \u0111\u00E2u th\u00EC k\u00E9o \u0111\u01B0\u1EE3c\n             (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng d\u1EA3i \u0111ang d\u00F9ng \u1EDF m\u00E0n Customer 360 c\u1EE7a mobio-web). -->\n        <!-- \uD83D\uDD34 `dragFromAnywhere` b\u1EADt th\u00EC KH\u00D4NG v\u1EBD d\u1EA3i: c\u1EA3 th\u1EBB \u0111\u00E3 l\u00E0 tay c\u1EA7m, \u0111\u1EC3 l\u1EA1i d\u1EA3i ch\u1EC9 th\u1EEBa. -->\n        @if (isEditMode() && !dragFromAnywhere()) {\n          <!-- \uD83D\uDD34 D\u1EA3i PH\u1EA2I mang tay c\u1EA7m \u0110\u00DANG C\u1EA4P c\u1EE7a n\u00F3. D\u1EA3i nh\u1EADn chu\u1ED9t (`pointer-events: auto`),\n               n\u00EAn n\u1EBFu kh\u00F4ng mang tay c\u1EA7m th\u00EC `checkDragHandleClass` duy\u1EC7t l\u00EAn g\u1EB7p tay c\u1EA7m c\u1EE7a\n               container v\u00E0 nh\u1EA5c container thay v\u00EC kh\u1ED1i con (\u0111o 28/08/2026: k\u00E9o d\u1EA3i kh\u1ED1i con,\n               container nh\u1EA3y 0,0 \u2192 0,1 c\u00F2n kh\u1ED1i con \u0111\u1EE9ng im).\n               \uD83D\uDD34 D\u1EA3i CH\u1EC8 mang tay c\u1EA7m, C\u1EA4M mang th\u00EAm class ch\u1EB7n: `checkDragHandleClass` x\u00E9t hai\n               class \u0111\u00F3 tr\u00EAn C\u00D9NG m\u1ED9t node n\u00EAn \u0111\u1EC3 chung l\u00E0 k\u00E9o h\u1ECFng (\u0111o 28/08/2026: b\u1EA5m d\u1EA3i kh\u1ED1i\n               con k\u00E9o 140px, kh\u1ED1i \u0111\u1EE9ng im). Vi\u1EC7c ch\u1EB7n l\u01B0\u1EDBi cha do V\u1ECE KH\u1ED0I lo. -->\n          <div\n            class=\"libs-ui-grid-layout-drag-bar\"\n            [class.libs-ui-grid-layout-drag-bar-child]=\"isNestedCanvas()\"\n            [class.libs-ui-grid-layout-drag-handle]=\"!isNestedCanvas()\"\n            [class.libs-ui-grid-layout-drag-handle-child]=\"isNestedCanvas()\">\n            <span class=\"libs-ui-grid-layout-drag-bar-dots\">\n              @for (dot of dragBarDots; track dot) {\n                <span class=\"libs-ui-grid-layout-drag-bar-dot\"></span>\n              }\n            </span>\n          </div>\n        }\n\n        <!-- Khung ch\u1EE9a component c\u1EE7a n\u01A1i d\u00F9ng.\n             \uD83D\uDD34 PH\u1EA2I c\u00F3 khung th\u1EADt (kh\u00F4ng ph\u1EA3i `ng-container` tr\u1ED1ng): n\u00F3 lo h\u1ED9 n\u01A1i d\u00F9ng ph\u1EA7n l\u1EA5p \u0111\u1EA7y\n             \u00F4 v\u00E0 vi\u1EC1n b\u00E1o ch\u1EBF \u0111\u1ED9 s\u1EEDa. Kh\u00F4ng c\u00F3 khung th\u00EC m\u1ED7i component n\u1ED9i dung l\u1EA1i ph\u1EA3i t\u1EF1 vi\u1EBFt\n             `:host { width/height: 100% }` + vi\u1EC1n \u0111\u1EE9t \u2014 \u0111\u00F3 l\u00E0 vi\u1EC7c c\u1EE7a th\u01B0 vi\u1EC7n, kh\u00F4ng ph\u1EA3i c\u1EE7a\n             ng\u01B0\u1EDDi d\u00F9ng (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026).\n             M\u1ED7i kh\u1ED1i m\u1ED9t ViewContainerRef ri\u00EAng n\u00EAn component n\u1EB1m \u0111\u00FAng \u00F4 c\u1EE7a n\u00F3. -->\n        <!-- \uD83D\uDD34 Container C\u00D3 `getComponentOutlet`: khung n\u00E0y l\u00E0 V\u1ECE, v\u00E0 canvas con \u0111\u01B0\u1EE3c \u0111\u01B0a V\u00C0O TRONG\n             component v\u1ECF qua input `childCanvas` (m\u1ED9t `TemplateRef`) \u2014 xem `ng-template #childCanvasTpl`\n             b\u00EAn d\u01B0\u1EDBi. V\u1ECF t\u1EF1 quy\u1EBFt \u0111\u1EB7t canvas \u1EDF \u0111\u00E2u gi\u1EEFa ti\u00EAu \u0111\u1EC1 v\u00E0 ph\u1EA7n th\u00E2n c\u1EE7a n\u00F3.\n             Tr\u01B0\u1EDBc \u0111\u00E2y canvas con l\u00E0 ANH EM c\u1EE7a khung n\u00E0y, n\u00EAn v\u1ECF chi\u1EBFm tr\u1ECDn chi\u1EC1u cao r\u1ED3i \u0111\u1EA9y to\u00E0n b\u1ED9\n             th\u1EBB con ra ngo\u00E0i v\u00F9ng nh\u00ECn th\u1EA5y (\u0111o 14/09/2026: m\u1ECDi kh\u1ED1i gh\u00E9p ch\u1EC9 c\u00F2n nh\u00E3n v\u00E0 ru\u1ED9t tr\u1EAFng). -->\n        <div\n          class=\"libs-ui-grid-layout-content-frame\"\n          [class.libs-ui-grid-layout-content-frame-edit]=\"isEditMode() && !isContainer(item)\"\n          [class.libs-ui-grid-layout-content-frame-empty]=\"isContainer(item) && !item.getComponentOutlet\">\n          <ng-container #itemHost />\n        </div>\n\n        <!-- D\u1EA5u hi\u1EC7u CONTAINER: nh\u00E3n g\u00F3c tr\u00EAn-ph\u1EA3i + vi\u1EC1n \u0111\u1EE9t bao ru\u1ED9t. Kh\u00F4ng c\u00F3 d\u1EA5u hi\u1EC7u th\u00EC\n             ng\u01B0\u1EDDi d\u00F9ng kh\u00F4ng bi\u1EBFt kh\u1ED1i n\u00E0o ch\u1EE9a \u0111\u01B0\u1EE3c kh\u1ED1i kh\u00E1c (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng c\u00E1ch\n             m\u00E0n Customer 360 c\u1EE7a mobio-web \u0111ang l\u00E0m). -->\n        @if (isEditMode() && isContainer(item)) {\n          <div class=\"libs-ui-grid-layout-container-label\">{{ 'i18n_container_block' | translate }}</div>\n          <div class=\"libs-ui-grid-layout-container-border\"></div>\n        }\n\n        <!-- Thanh c\u00F4ng c\u1EE5: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i.\n             \uD83D\uDD34 D\u00F9ng `libs_ui-components-buttons-button` \u2014 C\u1EA4M t\u1EF1 d\u1EF1ng th\u1EBB `<button>`.\n             Component n\u00E0y \u0111\u00E3 c\u00F3 s\u1EB5n ki\u1EC3u n\u00FAt, c\u1EE1 n\u00FAt v\u00E0 bong b\u00F3ng ch\u00FA th\u00EDch theo \u0111\u00FAng b\u1ED9 giao di\u1EC7n\n             c\u1EE7a s\u1EA3n ph\u1EA9m; t\u1EF1 d\u1EF1ng l\u00E0 m\u1ED7i n\u01A1i m\u1ED9t ki\u1EC3u v\u00E0 m\u1EA5t lu\u00F4n tooltip. -->\n        @if (isEditMode() && !hiddenToolbar()) {\n          @if (templateToolbar()) {\n            <!-- N\u01A1i d\u00F9ng t\u1EF1 v\u1EBD thanh c\u00F4ng c\u1EE5: nh\u1EADn kh\u1ED1i + c\u00E1c h\u00E0m ph\u00E1t event qua context.\n\n                 \uD83D\uDD34 Kh\u1ED1i b\u1ECDc t\u1EF1 ch\u1EB7n `mousedown`/`click` n\u1ED5i l\u00EAn gridster. Thanh c\u00F4ng c\u1EE5 n\u1EB1m trong\n                 v\u00F9ng mang `dragHandleClass`; kh\u00F4ng ch\u1EB7n th\u00EC c\u00FA b\u1EA5m b\u1ECB hi\u1EC3u l\u00E0 b\u1EAFt \u0111\u1EA7u k\u00E9o v\u00E0\n                 `delayStart: 160` nu\u1ED1t lu\u00F4n `click` \u2014 n\u00FAt trong template ngo\u00E0i b\u1EA5m kh\u00F4ng \u0103n\n                 (\u0111o 09/09/2026: b\u1EA5m b\u1EB1ng `.click()` c\u1EE7a DOM th\u00EC m\u1EDF, b\u1EA5m chu\u1ED9t th\u1EADt th\u00EC kh\u00F4ng).\n                 Ch\u1EB7n \u1EDF \u0110\u00C2Y \u0111\u1EC3 n\u01A1i d\u00F9ng kh\u00F4ng ph\u1EA3i bi\u1EBFt b\u1EABy n\u00E0y. -->\n            <div\n              class=\"libs-ui-grid-layout-toolbar\"\n              role=\"toolbar\"\n              tabindex=\"0\"\n              [class.libs-ui-grid-layout-toolbar-child]=\"isNestedCanvas()\"\n              (mousedown)=\"handlerStopEvent($event)\"\n              (keydown)=\"handlerStopEvent($event)\"\n              (click)=\"handlerStopEvent($event)\">\n              <ng-container\n                *ngTemplateOutlet=\"templateToolbar()!; context: toolbarContexts()[itemIndex]\" />\n            </div>\n          } @else {\n            <div\n              class=\"libs-ui-grid-layout-toolbar\"\n              [class.libs-ui-grid-layout-toolbar-child]=\"isNestedCanvas()\">\n              <span class=\"libs-ui-grid-layout-dim-badge\">\n                {{ item.rows }} h\u00E0ng \u00D7 {{ item.cols }} c\u1ED9t\n              </span>\n              @if (canAddInside(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"'libs-ui-icon-add'\"\n                  [popover]=\"{ config: { content: 'Th\u00EAm kh\u1ED1i v\u00E0o trong', zIndex: 1300 } }\"\n                  (outClick)=\"handlerAddInside($event, item)\" />\n              }\n              @if (canToggleType(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"isContainer(item) ? 'libs-ui-icon-split-cell' : 'libs-ui-icon-merge-cell'\"\n                  [popover]=\"{ config: { content: isContainer(item) ? '\u0110\u01B0a v\u1EC1 kh\u1ED1i \u0111\u01A1n' : 'Chuy\u1EC3n th\u00E0nh kh\u1ED1i gh\u00E9p', zIndex: 1300 } }\"\n                  (outClick)=\"handlerToggleType($event, item)\" />\n              }\n              <libs_ui-components-buttons-button\n                [type]=\"'button-third'\"\n                [iconOnlyType]=\"true\"\n                [sizeButton]=\"'smaller'\"\n                [classIconLeft]=\"'libs-ui-icon-setting'\"\n                [popover]=\"{ config: { content: 'C\u1EA5u h\u00ECnh th\u1EBB', zIndex: 1300 } }\"\n                (outClick)=\"handlerConfig($event, item)\" />\n              <libs_ui-components-buttons-button\n                [type]=\"'button-third-hover-danger'\"\n                [iconOnlyType]=\"true\"\n                [sizeButton]=\"'smaller'\"\n                [classIconLeft]=\"'libs-ui-icon-remove'\"\n                [popover]=\"{ config: { content: isContainer(item) ? 'Xo\u00E1 c\u1EA3 kh\u1ED1i gh\u00E9p' : 'Xo\u00E1 kh\u1ED1i', zIndex: 1300 } }\"\n                (outClick)=\"handlerRemove($event, item)\" />\n            </div>\n          }\n        }\n\n        @if (item.children && item.children.length > 0) {\n          <!-- Kh\u1ED1i c\u00F3 con \u2192 ru\u1ED9t n\u00F3 l\u1EA1i l\u00E0 m\u1ED9t m\u1EB7t ph\u1EB3ng n\u1EEFa. \u0110\u1EC7 quy \u1EDF \u0111\u00E2y, n\u01A1i d\u00F9ng kh\u00F4ng ph\u1EA3i lo.\n               L\u1EC1 \u0111\u1EB7t \u1EDF \u0110\u00C2Y (v\u1ECF container), kh\u00F4ng \u0111\u1EB7t v\u00E0o l\u01B0\u1EDBi con \u2014 l\u01B0\u1EDBi con gi\u1EEF nguy\u00EAn khe 2px.\n\n               \uD83D\uDD34 Khu\u00F4n \u0111\u1EB7t trong `ng-template` \u0111\u1EC3 \u0111i \u0111\u01B0\u1EE3c HAI \u0111\u01B0\u1EDDng:\n               - Container KH\u00D4NG c\u00F3 v\u1ECF ri\u00EAng \u2192 v\u1EBD th\u1EB3ng t\u1EA1i \u0111\u00E2y, y nh\u01B0 tr\u01B0\u1EDBc.\n               - Container C\u00D3 `getComponentOutlet` \u2192 th\u01B0 vi\u1EC7n truy\u1EC1n khu\u00F4n n\u00E0y xu\u1ED1ng component v\u1ECF qua\n                 input `childCanvas`, v\u1ECF t\u1EF1 \u0111\u1EB7t n\u00F3 v\u00E0o gi\u1EEFa ti\u00EAu \u0111\u1EC1 v\u00E0 ph\u1EA7n th\u00E2n c\u1EE7a m\u00ECnh. V\u1EBD th\u00EAm \u1EDF\n                 \u0111\u00E2y n\u1EEFa l\u00E0 hai m\u1EB7t ph\u1EB3ng l\u1ED3ng ch\u1ED3ng nhau. -->\n          <ng-template #childCanvasTpl>\n            <libs_ui-services-grid_layout-canvas\n              class=\"block h-full w-full\"\n              [style.padding]=\"containerPadding()\"\n              [node]=\"item\"\n              [depth]=\"depth() + 1\"\n              [dragFromAnywhere]=\"dragFromAnywhere()\"\n              [nestedScrollbar]=\"nestedScrollbar()\"\n              [hiddenToolbar]=\"hiddenToolbar()\"\n              [templateToolbar]=\"templateToolbar()\"\n              [selectedNodeId]=\"selectedNodeId()\"\n              (outSelectNode)=\"outSelectNode.emit($event)\"\n              (outConfigNode)=\"outConfigNode.emit($event)\"\n              (outChange)=\"outChange.emit($event)\"\n              (outRemoveNode)=\"outRemoveNode.emit($event)\"\n              (outAddBlockInside)=\"outAddBlockInside.emit($event)\"\n              (outToggleType)=\"outToggleType.emit($event)\" />\n          </ng-template>\n\n          @if (!item.getComponentOutlet) {\n            <ng-container [ngTemplateOutlet]=\"childCanvasTpl\" />\n          }\n        }\n      </div>\n    </gridster-item>\n  }\n    </gridster>\n  </div>\n}\n", styles: [":host{display:block;position:relative;box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0}.libs-ui-grid-layout-block-shell{container-type:inline-size;display:block;box-sizing:border-box;height:100%}.libs-ui-grid-layout-drag-bar{position:absolute;top:2px;left:50%;z-index:15;display:flex;align-items:center;justify-content:center;width:64px;height:16px;background:transparent;transform:translate(-50%);opacity:1;transition:opacity .12s ease;pointer-events:auto;cursor:move}.libs-ui-grid-layout-drag-bar-dots{display:grid;grid-template-columns:repeat(3,3px);gap:3px;color:#9ca2ad}.libs-ui-grid-layout-drag-bar-dot{width:3px;height:3px;background:currentColor;border-radius:50%}.libs-ui-grid-layout-drag-bar:hover .libs-ui-grid-layout-drag-bar-dots{color:#3d6ef5}.libs-ui-grid-layout-drag-bar:not(.libs-ui-grid-layout-drag-bar-child){opacity:1}.libs-ui-grid-layout-drag-bar-child{top:auto;bottom:0;background:#d9f2e4;border-radius:4px 4px 0 0}.libs-ui-grid-layout-drag-bar-child .libs-ui-grid-layout-drag-bar-dots{color:#9ca2ad}.libs-ui-grid-layout-drag-bar-child:hover .libs-ui-grid-layout-drag-bar-dots{color:#00a757}.libs-ui-grid-layout-drag-bar-child{opacity:0}.libs-ui-grid-layout-block-shell:hover>.libs-ui-grid-layout-drag-bar-child{opacity:1}.libs-ui-grid-layout-block-shell:has(>.libs-ui-grid-layout-drag-bar:not(.libs-ui-grid-layout-drag-bar-child):hover){outline:2px solid #3d6ef5;outline-offset:-2px;border-radius:8px}.libs-ui-grid-layout-block-shell:has(>.libs-ui-grid-layout-drag-bar-child:hover){outline:2px solid #00a757;outline-offset:-2px;border-radius:8px}.libs-ui-grid-layout-container-label{position:absolute;left:6px;top:2px;display:flex;height:20px;align-items:center;z-index:3;padding:0 6px;color:#3d6ef5;font-weight:500;font-size:10px;line-height:14px;background:#dbe4ff;border-radius:4px;pointer-events:none}.libs-ui-grid-layout-content-frame{box-sizing:border-box;width:100%;height:100%;overflow:hidden;border-radius:6px}.libs-ui-grid-layout-content-frame ::ng-deep>*{display:block;box-sizing:border-box;width:100%;height:100%}.libs-ui-grid-layout-content-frame-empty{height:0}.libs-ui-grid-layout-content-frame-edit{border:1px dashed #c3cede}.libs-ui-grid-layout-container-border{position:absolute;inset:0;border:1px dashed #9db4f0;border-radius:8px;pointer-events:none}.libs-ui-grid-layout-toolbar{position:absolute;top:6px;right:8px;z-index:24;display:flex;gap:2px;align-items:center;height:20px;background:#fff;border-radius:4px;box-shadow:0 2px 8px #0716311f;opacity:0;transition:opacity .12s ease}.libs-ui-grid-layout-toolbar-child{top:50%;right:8px;left:auto;transform:translateY(-50%)}.libs-ui-grid-layout-block-shell:hover>.libs-ui-grid-layout-toolbar{opacity:1}:host ::ng-deep gridster{background:transparent}:host ::ng-deep .gridster-item-resizable-handler.handle-n,:host ::ng-deep .gridster-item-resizable-handler.handle-s{height:16px}:host ::ng-deep .gridster-item-resizable-handler.handle-e,:host ::ng-deep .gridster-item-resizable-handler.handle-w{width:16px}:host ::ng-deep .gridster-item-resizable-handler.handle-n{top:0}:host ::ng-deep .gridster-item-resizable-handler.handle-s{bottom:0}:host ::ng-deep .gridster-item-resizable-handler.handle-e{right:0}:host ::ng-deep .gridster-item-resizable-handler.handle-w{left:0}:host ::ng-deep gridster-item.gridster-item-moving,:host ::ng-deep gridster-item.gridster-item-resizing{z-index:30!important}:host ::ng-deep gridster-item.gridster-item-moving>.libs-ui-grid-layout-block-shell,:host ::ng-deep gridster-item.gridster-item-resizing>.libs-ui-grid-layout-block-shell{outline:2px solid #3d6ef5;outline-offset:-2px;border-radius:8px}:host ::ng-deep gridster gridster gridster-item.gridster-item-moving>.libs-ui-grid-layout-block-shell,:host ::ng-deep gridster gridster gridster-item.gridster-item-resizing>.libs-ui-grid-layout-block-shell{outline-color:#00a757}:host ::ng-deep gridster-item.libs-ui-grid-layout-selected>.libs-ui-grid-layout-block-shell{outline:2px solid #2563eb!important;outline-offset:-2px!important;border-radius:8px!important;box-shadow:0 0 0 4px #2563eb26!important}:host ::ng-deep gridster.display-grid .gridster-column,:host ::ng-deep gridster gridster.display-grid .gridster-column{border-right:1px solid rgba(226,232,240,.7)!important;border-left:none!important;pointer-events:none!important;height:100%!important;min-height:100%!important}:host ::ng-deep gridster.display-grid .gridster-column:first-child,:host ::ng-deep gridster gridster.display-grid .gridster-column:first-child{border-left:1px solid rgba(226,232,240,.7)!important}:host ::ng-deep gridster.display-grid .gridster-row,:host ::ng-deep gridster gridster.display-grid .gridster-row{border-bottom:1px solid rgba(226,232,240,.7)!important;border-top:none!important;pointer-events:none!important}:host ::ng-deep gridster.display-grid .gridster-row:first-child,:host ::ng-deep gridster gridster.display-grid .gridster-row:first-child{border-top:1px solid rgba(226,232,240,.7)!important}:host ::ng-deep gridster gridster.display-grid{background-color:#f8fafc80!important}:host ::ng-deep gridster-preview{background:#2563eb1f!important;border:1.5px dashed #2563eb!important;border-radius:6px!important;z-index:25!important}.libs-ui-grid-layout-dim-badge{display:inline-flex;align-items:center;height:20px;padding:0 6px;background-color:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;color:#64748b;font-size:10px;font-weight:500;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;pointer-events:none;white-space:nowrap}@container (max-width: 80px){.libs-ui-grid-layout-drag-bar{top:26px}}.libs-ui-grid-layout-stage{box-sizing:border-box;transform-origin:top center;transition:zoom .15s ease-out}#canvas-zoom-dock{box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.libs-ui-grid-layout-stage>gridster>gridster-item>.libs-ui-grid-layout-block-shell{inset:calc(var(--libs-ui-grid-layout-visual-gap, 0px) / 2);width:calc(100% - var(--libs-ui-grid-layout-visual-gap, 0px));height:calc(100% - var(--libs-ui-grid-layout-visual-gap, 0px));box-sizing:border-box}gridster.libs-ui-grid-layout-drag-anywhere gridster-item{user-select:none;-webkit-user-select:none}\n"], dependencies: [{ kind: "component", type: LibsUiGridLayoutCanvasComponent, selector: "libs_ui-services-grid_layout-canvas", inputs: ["node", "depth", "hiddenToolbar", "templateToolbar", "enableZoom", "zoom", "zoomMin", "zoomMax", "zoomStep", "stageWidth", "stageMinHeight", "storageKey", "showZoomDock", "autoFitOnLoad", "enableExternalDrop", "showGridLines", "selectedNodeId", "dragFromAnywhere", "gridsterOwnsScroll", "nestedScrollbar"], outputs: ["outChange", "outRemoveNode", "outAddBlockInside", "outToggleType", "zoomChange", "outZoomChange", "selectedNodeIdChange", "outDropNode", "outSelectNode", "outConfigNode"] }, { kind: "ngmodule", type: GridsterModule }, { kind: "component", type: i1.GridsterComponent, selector: "gridster", inputs: ["options"] }, { kind: "component", type: i1.GridsterItemComponent, selector: "gridster-item", inputs: ["item"], outputs: ["itemInit", "itemChange", "itemResize"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiGridLayoutCanvasComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'libs_ui-services-grid_layout-canvas', standalone: true, imports: [GridsterModule, LibsUiComponentsButtonsButtonComponent, NgTemplateOutlet, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isZoomActive()) {\n  <!-- Khu v\u1EF1c cu\u1ED9n ch\u1EE9a canvas stage thu ph\u00F3ng -->\n  <div\n    #scrollArea\n    class=\"libs-ui-grid-layout-scroll-area relative h-full min-h-0 w-full min-w-0 overflow-auto p-6 flex justify-start items-start\"\n    (mousedown)=\"handlerMouseDownTrongLuoi($event)\"\n    (wheel)=\"handlerWheel($event)\"\n    (dragover)=\"handlerDragOver($event)\"\n    (dragleave)=\"handlerDragLeave($event)\"\n    (drop)=\"handlerDrop($event)\">\n    <div\n      #canvasStage\n      id=\"bi-canvas-stage\"\n      class=\"libs-ui-grid-layout-stage relative flex flex-col transition-[zoom] duration-150 origin-top shrink-0 mx-auto bg-white/80 border border-slate-200/80 rounded-2xl shadow-sm p-4\"\n      [style.zoom]=\"currentZoom()\"\n      [style.width.px]=\"stageWidth()\"\n      [style.min-width.px]=\"stageWidth()\"\n      [style.min-height.px]=\"stageMinHeight()\"\n      [style.--libs-ui-grid-layout-visual-gap.px]=\"visualGap()\">\n      <!-- Snapped Drop Ghost Preview -->\n      @if (dropGhost(); as ghost) {\n        <div\n          class=\"pointer-events-none absolute z-30 flex flex-col items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-blue-500 bg-blue-500/15 p-1 shadow-sm transition-all duration-75 ease-out backdrop-blur-[0.5px] select-none\"\n          [style.left.px]=\"ghost.pixelLeft\"\n          [style.top.px]=\"ghost.pixelTop\"\n          [style.width.px]=\"ghost.pixelWidth\"\n          [style.height.px]=\"ghost.pixelHeight\">\n          <div class=\"inline-flex max-w-[95%] items-center gap-1 truncate rounded-md bg-blue-600 px-2 py-0.5 text-[11px] font-semibold text-white shadow-xs\">\n            @if (ghost.cardIconClass) {\n              <i [class]=\"ghost.cardIconClass + ' text-xs'\"></i>\n            } @else if (ghost.cardIconText) {\n              <span class=\"text-[10px] font-bold\">{{ ghost.cardIconText }}</span>\n            } @else {\n              <span class=\"text-xs font-bold\">{{ ghost.isInsideGroup ? '\u21B3' : '+' }}</span>\n            }\n            <span class=\"truncate\">{{ ghost.cardTitle }}</span>\n            <span class=\"text-[9px] font-mono opacity-75\">({{ ghost.cols }}c)</span>\n          </div>\n\n          @if (ghost.pixelHeight >= 80) {\n            <div class=\"mt-1 flex max-w-[95%] items-center gap-1.5 truncate rounded border border-blue-100 bg-white/95 px-2 py-0.5 text-[10px] font-medium text-blue-700 shadow-xs\">\n              @if (ghost.isInsideGroup) {\n                <span class=\"truncate font-bold text-blue-900\">\u21B3 {{ ghost.groupTitle }}</span>\n                <span class=\"text-blue-300\">\u2022</span>\n              }\n              <span>C\u1ED9t {{ ghost.col + 1 }}-{{ ghost.col + ghost.cols }}</span>\n            </div>\n          }\n        </div>\n      }\n      <gridster class=\"h-full w-full\" [class.display-grid]=\"showGridLines()\" [options]=\"gridOptions()\">\n          @for (item of children(); track item.id; let itemIndex = $index) {\n    <!-- \uD83D\uDD34 Ch\u1EB7n `mousedown` t\u1EA1i \u0110\u00C2Y cho l\u01B0\u1EDBi l\u1ED3ng \u2014 C\u1EA4M b\u1ECF v\u00E0 C\u1EA4M chuy\u1EC3n sang ch\u1ED7 kh\u00E1c.\n         `ignoreContentClass` m\u1ED9t m\u00ECnh KH\u00D4NG \u0111\u1EE7: `delayStart: 160` l\u00E0m M\u1ED6I l\u01B0\u1EDBi l\u00EAn l\u1ECBch\n         `dragStart` b\u1EB1ng `setTimeout` ngay t\u1EA1i `mousedown`, c\u00F2n `stopPropagation` m\u00E0 lib g\u1ECDi b\u00EAn\n         trong `dragStart` ch\u1EA1y sau 160ms n\u00EAn qu\u00E1 mu\u1ED9n \u2014 l\u01B0\u1EDBi CHA \u0111\u00E3 k\u1ECBp nh\u1EADn (\u0111o 28/08/2026: k\u00E9o\n         d\u1EA3i kh\u1ED1i con, chu\u1ED7i class duy\u1EC7t l\u00EAn \u0110\u00DANG m\u00E0 container v\u1EABn nh\u1EA3y 0,0 \u2192 0,1).\n         G\u1EAFn \u1EDF `gridster-item` l\u00E0 \u0111\u00FAng bi\u00EAn: l\u01B0\u1EDBi con nghe tr\u00EAn ch\u00EDnh ph\u1EA7n t\u1EED n\u00E0y n\u00EAn \u0111\u00E3 nh\u1EADn xong,\n         l\u01B0\u1EDBi cha \u1EDF ngo\u00E0i b\u1ECB ch\u1EB7n. -->\n    <gridster-item\n      [item]=\"item\"\n      [class.libs-ui-grid-layout-selected]=\"selectedNodeId() === item.id\"\n      (click)=\"handlerSelectNode(item, $event)\"\n      (mousedown)=\"handlerBlockParentDrag($event)\">\n      <!-- \uD83D\uDD34 V\u1ECF n\u00E0y mang `dragHandleClass` \u2014 C\u1EA4M b\u1ECF.\n           `ignoreContent: true` b\u1EAFt gridster CH\u1EC8 cho k\u00E9o khi ch\u1ED7 b\u1EA5m n\u1EB1m d\u01B0\u1EDBi m\u1ED9t ph\u1EA7n t\u1EED c\u00F3\n           `dragHandleClass`. Kh\u00F4ng c\u00F3 v\u1ECF n\u00E0y th\u00EC component c\u1EE7a n\u01A1i d\u00F9ng (th\u01B0 vi\u1EC7n kh\u00F4ng ki\u1EC3m so\u00E1t\n           \u0111\u01B0\u1EE3c class c\u1EE7a n\u00F3) s\u1EBD kh\u00F4ng c\u00F3 tay c\u1EA7m n\u00E0o, v\u00E0 KH\u00D4NG kh\u1ED1i n\u00E0o k\u00E9o \u0111\u01B0\u1EE3c \u2014 \u0111o 28/08/2026:\n           k\u00E9o 320px, to\u1EA1 \u0111\u1ED9 kh\u1ED1i gi\u1EEF nguy\u00EAn x=3,y=0.\n           T\u00EAn class theo c\u1EA5p: l\u01B0\u1EDBi trang v\u00E0 l\u01B0\u1EDBi l\u1ED3ng d\u00F9ng hai t\u00EAn KH\u00C1C nhau, n\u1EBFu kh\u00F4ng l\u01B0\u1EDBi cha\n           c\u0169ng nh\u1EADn ra tay c\u1EA7m c\u1EE7a kh\u1ED1i con v\u00E0 nh\u1EA5c lu\u00F4n container. -->\n      <!-- \uD83D\uDD34 V\u1ECF KH\u00D4NG mang `dragHandleClass` \u2014 C\u1EA4M th\u00EAm l\u1EA1i.\n           K\u00E9o ch\u1EC9 \u0111\u01B0\u1EE3c ph\u00E9p b\u1EAFt \u0111\u1EA7u t\u1EEB D\u1EA2I XANH (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026: \"ph\u1EA3i hover v\u00E0o v\u00F9ng\n           m\u00E0u xanh th\u00EC m\u1EDBi k\u00E9o th\u1EA3 \u0111\u01B0\u1EE3c cho \u0111\u1ED3ng nh\u1EA5t\"). Cho c\u1EA3 v\u1ECF l\u00E0m tay c\u1EA7m th\u00EC b\u1EA5m \u0111\u00E2u c\u0169ng\n           k\u00E9o, v\u00E0 kh\u1ED1i con n\u1EB1m trong container s\u1EBD nh\u1EA5c lu\u00F4n container v\u00EC l\u01B0\u1EDBi cha duy\u1EC7t l\u00EAn g\u1EB7p\n           tay c\u1EA7m c\u1EE7a v\u1ECF container tr\u01B0\u1EDBc.\n           V\u1ECF kh\u1ED1i con v\u1EABn gi\u1EEF class CH\u1EB6N \u0111\u1EC3 l\u01B0\u1EDBi cha d\u1EEBng \u0111\u00FAng \u1EDF bi\u00EAn. -->\n      <div\n        class=\"libs-ui-grid-layout-block-shell group relative h-full w-full min-w-0\"\n        [attr.data-node-id]=\"item.id\"\n        [class.libs-ui-grid-layout-block-parent-drag]=\"isNestedCanvas()\">\n        <!-- D\u1EA3i k\u00E9o: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i, ba ch\u1EA5m l\u00E0 d\u1EA5u hi\u1EC7u k\u00E9o quen thu\u1ED9c.\n             Ng\u01B0\u1EDDi d\u00F9ng c\u1EA7n m\u1ED9t ch\u1ED7 b\u00E1m R\u00D5 R\u00C0NG thay v\u00EC \u0111o\u00E1n xem b\u1EA5m \u0111\u00E2u th\u00EC k\u00E9o \u0111\u01B0\u1EE3c\n             (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng d\u1EA3i \u0111ang d\u00F9ng \u1EDF m\u00E0n Customer 360 c\u1EE7a mobio-web). -->\n        @if (isEditMode()) {\n          <!-- \uD83D\uDD34 D\u1EA3i PH\u1EA2I mang tay c\u1EA7m \u0110\u00DANG C\u1EA4P c\u1EE7a n\u00F3. D\u1EA3i nh\u1EADn chu\u1ED9t (`pointer-events: auto`),\n               n\u00EAn n\u1EBFu kh\u00F4ng mang tay c\u1EA7m th\u00EC `checkDragHandleClass` duy\u1EC7t l\u00EAn g\u1EB7p tay c\u1EA7m c\u1EE7a\n               container v\u00E0 nh\u1EA5c container thay v\u00EC kh\u1ED1i con (\u0111o 28/08/2026: k\u00E9o d\u1EA3i kh\u1ED1i con,\n               container nh\u1EA3y 0,0 \u2192 0,1 c\u00F2n kh\u1ED1i con \u0111\u1EE9ng im).\n               \uD83D\uDD34 D\u1EA3i CH\u1EC8 mang tay c\u1EA7m, C\u1EA4M mang th\u00EAm class ch\u1EB7n: `checkDragHandleClass` x\u00E9t hai\n               class \u0111\u00F3 tr\u00EAn C\u00D9NG m\u1ED9t node n\u00EAn \u0111\u1EC3 chung l\u00E0 k\u00E9o h\u1ECFng (\u0111o 28/08/2026: b\u1EA5m d\u1EA3i kh\u1ED1i\n               con k\u00E9o 140px, kh\u1ED1i \u0111\u1EE9ng im). Vi\u1EC7c ch\u1EB7n l\u01B0\u1EDBi cha do V\u1ECE KH\u1ED0I lo. -->\n          <div\n            class=\"libs-ui-grid-layout-drag-bar\"\n            [class.libs-ui-grid-layout-drag-bar-child]=\"isNestedCanvas()\"\n            [class.libs-ui-grid-layout-drag-handle]=\"!isNestedCanvas()\"\n            [class.libs-ui-grid-layout-drag-handle-child]=\"isNestedCanvas()\">\n            <span class=\"libs-ui-grid-layout-drag-bar-dots\">\n              @for (dot of dragBarDots; track dot) {\n                <span class=\"libs-ui-grid-layout-drag-bar-dot\"></span>\n              }\n            </span>\n          </div>\n        }\n\n        <!-- Khung ch\u1EE9a component c\u1EE7a n\u01A1i d\u00F9ng.\n             \uD83D\uDD34 PH\u1EA2I c\u00F3 khung th\u1EADt (kh\u00F4ng ph\u1EA3i `ng-container` tr\u1ED1ng): n\u00F3 lo h\u1ED9 n\u01A1i d\u00F9ng ph\u1EA7n l\u1EA5p \u0111\u1EA7y\n             \u00F4 v\u00E0 vi\u1EC1n b\u00E1o ch\u1EBF \u0111\u1ED9 s\u1EEDa. Kh\u00F4ng c\u00F3 khung th\u00EC m\u1ED7i component n\u1ED9i dung l\u1EA1i ph\u1EA3i t\u1EF1 vi\u1EBFt\n             `:host { width/height: 100% }` + vi\u1EC1n \u0111\u1EE9t \u2014 \u0111\u00F3 l\u00E0 vi\u1EC7c c\u1EE7a th\u01B0 vi\u1EC7n, kh\u00F4ng ph\u1EA3i c\u1EE7a\n             ng\u01B0\u1EDDi d\u00F9ng (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026).\n             M\u1ED7i kh\u1ED1i m\u1ED9t ViewContainerRef ri\u00EAng n\u00EAn component n\u1EB1m \u0111\u00FAng \u00F4 c\u1EE7a n\u00F3. -->\n        <!-- \uD83D\uDD34 Container C\u00D3 `getComponentOutlet`: khung n\u00E0y l\u00E0 V\u1ECE, v\u00E0 canvas con \u0111\u01B0\u1EE3c \u0111\u01B0a V\u00C0O TRONG\n             component v\u1ECF qua input `childCanvas` (m\u1ED9t `TemplateRef`) \u2014 xem `ng-template #childCanvasTpl`\n             b\u00EAn d\u01B0\u1EDBi. V\u1ECF t\u1EF1 quy\u1EBFt \u0111\u1EB7t canvas \u1EDF \u0111\u00E2u gi\u1EEFa ti\u00EAu \u0111\u1EC1 v\u00E0 ph\u1EA7n th\u00E2n c\u1EE7a n\u00F3.\n             Tr\u01B0\u1EDBc \u0111\u00E2y canvas con l\u00E0 ANH EM c\u1EE7a khung n\u00E0y, n\u00EAn v\u1ECF chi\u1EBFm tr\u1ECDn chi\u1EC1u cao r\u1ED3i \u0111\u1EA9y to\u00E0n b\u1ED9\n             th\u1EBB con ra ngo\u00E0i v\u00F9ng nh\u00ECn th\u1EA5y (\u0111o 14/09/2026: m\u1ECDi kh\u1ED1i gh\u00E9p ch\u1EC9 c\u00F2n nh\u00E3n v\u00E0 ru\u1ED9t tr\u1EAFng). -->\n        <div\n          class=\"libs-ui-grid-layout-content-frame\"\n          [class.libs-ui-grid-layout-content-frame-edit]=\"isEditMode() && !isContainer(item)\"\n          [class.libs-ui-grid-layout-content-frame-empty]=\"isContainer(item) && !item.getComponentOutlet\">\n          <ng-container #itemHost />\n        </div>\n\n        <!-- D\u1EA5u hi\u1EC7u CONTAINER: nh\u00E3n g\u00F3c tr\u00EAn-ph\u1EA3i + vi\u1EC1n \u0111\u1EE9t bao ru\u1ED9t. Kh\u00F4ng c\u00F3 d\u1EA5u hi\u1EC7u th\u00EC\n             ng\u01B0\u1EDDi d\u00F9ng kh\u00F4ng bi\u1EBFt kh\u1ED1i n\u00E0o ch\u1EE9a \u0111\u01B0\u1EE3c kh\u1ED1i kh\u00E1c (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng c\u00E1ch\n             m\u00E0n Customer 360 c\u1EE7a mobio-web \u0111ang l\u00E0m). -->\n        @if (isEditMode() && isContainer(item)) {\n          <div class=\"libs-ui-grid-layout-container-label\">{{ 'i18n_container_block' | translate }}</div>\n          <div class=\"libs-ui-grid-layout-container-border\"></div>\n        }\n\n        <!-- Thanh c\u00F4ng c\u1EE5: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i.\n             \uD83D\uDD34 D\u00F9ng `libs_ui-components-buttons-button` \u2014 C\u1EA4M t\u1EF1 d\u1EF1ng th\u1EBB `<button>`.\n             Component n\u00E0y \u0111\u00E3 c\u00F3 s\u1EB5n ki\u1EC3u n\u00FAt, c\u1EE1 n\u00FAt v\u00E0 bong b\u00F3ng ch\u00FA th\u00EDch theo \u0111\u00FAng b\u1ED9 giao di\u1EC7n\n             c\u1EE7a s\u1EA3n ph\u1EA9m; t\u1EF1 d\u1EF1ng l\u00E0 m\u1ED7i n\u01A1i m\u1ED9t ki\u1EC3u v\u00E0 m\u1EA5t lu\u00F4n tooltip. -->\n        @if (isEditMode() && !hiddenToolbar()) {\n          @if (templateToolbar()) {\n            <!-- N\u01A1i d\u00F9ng t\u1EF1 v\u1EBD thanh c\u00F4ng c\u1EE5: nh\u1EADn kh\u1ED1i + c\u00E1c h\u00E0m ph\u00E1t event qua context.\n\n                 \uD83D\uDD34 Kh\u1ED1i b\u1ECDc t\u1EF1 ch\u1EB7n `mousedown`/`click` n\u1ED5i l\u00EAn gridster. Thanh c\u00F4ng c\u1EE5 n\u1EB1m trong\n                 v\u00F9ng mang `dragHandleClass`; kh\u00F4ng ch\u1EB7n th\u00EC c\u00FA b\u1EA5m b\u1ECB hi\u1EC3u l\u00E0 b\u1EAFt \u0111\u1EA7u k\u00E9o v\u00E0\n                 `delayStart: 160` nu\u1ED1t lu\u00F4n `click` \u2014 n\u00FAt trong template ngo\u00E0i b\u1EA5m kh\u00F4ng \u0103n\n                 (\u0111o 09/09/2026: b\u1EA5m b\u1EB1ng `.click()` c\u1EE7a DOM th\u00EC m\u1EDF, b\u1EA5m chu\u1ED9t th\u1EADt th\u00EC kh\u00F4ng).\n                 Ch\u1EB7n \u1EDF \u0110\u00C2Y \u0111\u1EC3 n\u01A1i d\u00F9ng kh\u00F4ng ph\u1EA3i bi\u1EBFt b\u1EABy n\u00E0y. -->\n            <div\n              class=\"libs-ui-grid-layout-toolbar\"\n              role=\"toolbar\"\n              tabindex=\"0\"\n              [class.libs-ui-grid-layout-toolbar-child]=\"isNestedCanvas()\"\n              (mousedown)=\"handlerStopEvent($event)\"\n              (keydown)=\"handlerStopEvent($event)\"\n              (click)=\"handlerStopEvent($event)\">\n              <ng-container\n                *ngTemplateOutlet=\"templateToolbar()!; context: toolbarContexts()[itemIndex]\" />\n            </div>\n          } @else {\n            <div\n              class=\"libs-ui-grid-layout-toolbar\"\n              [class.libs-ui-grid-layout-toolbar-child]=\"isNestedCanvas()\">\n              <span class=\"libs-ui-grid-layout-dim-badge\">\n                {{ item.rows }} h\u00E0ng \u00D7 {{ item.cols }} c\u1ED9t\n              </span>\n              @if (canAddInside(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"'libs-ui-icon-add'\"\n                  [popover]=\"{ config: { content: 'Th\u00EAm kh\u1ED1i v\u00E0o trong', zIndex: 1300 } }\"\n                  (outClick)=\"handlerAddInside($event, item)\" />\n              }\n              @if (canToggleType(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"isContainer(item) ? 'libs-ui-icon-split-cell' : 'libs-ui-icon-merge-cell'\"\n                  [popover]=\"{ config: { content: isContainer(item) ? '\u0110\u01B0a v\u1EC1 kh\u1ED1i \u0111\u01A1n' : 'Chuy\u1EC3n th\u00E0nh kh\u1ED1i gh\u00E9p', zIndex: 1300 } }\"\n                  (outClick)=\"handlerToggleType($event, item)\" />\n              }\n              <libs_ui-components-buttons-button\n                [type]=\"'button-third'\"\n                [iconOnlyType]=\"true\"\n                [sizeButton]=\"'smaller'\"\n                [classIconLeft]=\"'libs-ui-icon-setting'\"\n                [popover]=\"{ config: { content: 'C\u1EA5u h\u00ECnh th\u1EBB', zIndex: 1300 } }\"\n                (outClick)=\"handlerConfig($event, item)\" />\n              <libs_ui-components-buttons-button\n                [type]=\"'button-third-hover-danger'\"\n                [iconOnlyType]=\"true\"\n                [sizeButton]=\"'smaller'\"\n                [classIconLeft]=\"'libs-ui-icon-remove'\"\n                [popover]=\"{ config: { content: isContainer(item) ? 'Xo\u00E1 c\u1EA3 kh\u1ED1i gh\u00E9p' : 'Xo\u00E1 kh\u1ED1i', zIndex: 1300 } }\"\n                (outClick)=\"handlerRemove($event, item)\" />\n            </div>\n          }\n        }\n\n        @if (item.children && item.children.length > 0) {\n          <!-- Kh\u1ED1i c\u00F3 con \u2192 ru\u1ED9t n\u00F3 l\u1EA1i l\u00E0 m\u1ED9t m\u1EB7t ph\u1EB3ng n\u1EEFa. \u0110\u1EC7 quy \u1EDF \u0111\u00E2y, n\u01A1i d\u00F9ng kh\u00F4ng ph\u1EA3i lo.\n               L\u1EC1 \u0111\u1EB7t \u1EDF \u0110\u00C2Y (v\u1ECF container), kh\u00F4ng \u0111\u1EB7t v\u00E0o l\u01B0\u1EDBi con \u2014 l\u01B0\u1EDBi con gi\u1EEF nguy\u00EAn khe 2px.\n\n               \uD83D\uDD34 Khu\u00F4n \u0111\u1EB7t trong `ng-template` \u0111\u1EC3 \u0111i \u0111\u01B0\u1EE3c HAI \u0111\u01B0\u1EDDng:\n               - Container KH\u00D4NG c\u00F3 v\u1ECF ri\u00EAng \u2192 v\u1EBD th\u1EB3ng t\u1EA1i \u0111\u00E2y, y nh\u01B0 tr\u01B0\u1EDBc.\n               - Container C\u00D3 `getComponentOutlet` \u2192 th\u01B0 vi\u1EC7n truy\u1EC1n khu\u00F4n n\u00E0y xu\u1ED1ng component v\u1ECF qua\n                 input `childCanvas`, v\u1ECF t\u1EF1 \u0111\u1EB7t n\u00F3 v\u00E0o gi\u1EEFa ti\u00EAu \u0111\u1EC1 v\u00E0 ph\u1EA7n th\u00E2n c\u1EE7a m\u00ECnh. V\u1EBD th\u00EAm \u1EDF\n                 \u0111\u00E2y n\u1EEFa l\u00E0 hai m\u1EB7t ph\u1EB3ng l\u1ED3ng ch\u1ED3ng nhau. -->\n          <ng-template #childCanvasTpl>\n            <libs_ui-services-grid_layout-canvas\n              class=\"block h-full w-full\"\n              [style.padding]=\"containerPadding()\"\n              [node]=\"item\"\n              [depth]=\"depth() + 1\"\n              [hiddenToolbar]=\"hiddenToolbar()\"\n              [templateToolbar]=\"templateToolbar()\"\n              [selectedNodeId]=\"selectedNodeId()\"\n              (outSelectNode)=\"outSelectNode.emit($event)\"\n              (outConfigNode)=\"outConfigNode.emit($event)\"\n              (outChange)=\"outChange.emit($event)\"\n              (outRemoveNode)=\"outRemoveNode.emit($event)\"\n              (outAddBlockInside)=\"outAddBlockInside.emit($event)\"\n              (outToggleType)=\"outToggleType.emit($event)\" />\n          </ng-template>\n\n          @if (!item.getComponentOutlet) {\n            <ng-container [ngTemplateOutlet]=\"childCanvasTpl\" />\n          }\n        }\n      </div>\n    </gridster-item>\n  }\n      </gridster>\n    </div>\n  </div>\n\n  <!-- Thanh dock \u0111i\u1EC1u khi\u1EC3n thu ph\u00F3ng n\u1ED5i \u1EDF g\u00F3c d\u01B0\u1EDBi tr\u00E1i -->\n  @if (showZoomDock()) {\n    <div\n      #zoomDock\n      id=\"canvas-zoom-dock\"\n      role=\"toolbar\"\n      tabindex=\"0\"\n      class=\"absolute bottom-4 left-6 z-30 flex items-center bg-white rounded-full shadow-2xl border-2 border-slate-400 p-1 space-x-1 select-none\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (keydown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation()\">\n      <!-- Thu nh\u1ECF (-) -->\n      <button\n        type=\"button\"\n        class=\"w-[28px] h-[28px] flex items-center justify-center rounded-full text-slate-700 hover:text-slate-900 hover:bg-slate-200 disabled:opacity-30 disabled:hover:bg-transparent transition-colors cursor-pointer\"\n        [disabled]=\"currentZoom() <= zoomMin()\"\n        [title]=\"'i18n_zoom_out' | translate\"\n        (click)=\"handlerZoomOut()\">\n        <svg class=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/></svg>\n      </button>\n\n      <!-- T\u1EF7 l\u1EC7 % v\u00E0 menu preset -->\n      <div class=\"relative\">\n        <button\n          type=\"button\"\n          class=\"h-[28px] px-2 flex items-center gap-1 rounded-full text-xs font-semibold text-slate-700 hover:bg-slate-200 transition-colors cursor-pointer\"\n          [title]=\"'i18n_zoom_options' | translate\"\n          (click)=\"handlerToggleMenu()\">\n          <span>{{ zoomPercent() }}%</span>\n          <svg class=\"w-[12px] h-[12px] text-slate-400 transition-transform duration-150\" [class.rotate-180]=\"isMenuOpen()\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"/></svg>\n        </button>\n\n        <!-- Menu dropdown c\u00E1c m\u1ED1c thu ph\u00F3ng -->\n        @if (isMenuOpen()) {\n          <div class=\"absolute bottom-full mb-2 left-0 w-[256px] bg-white rounded-xl shadow-xl border border-slate-200 py-1.5 z-40 text-xs select-none\">\n            <div class=\"px-3 py-1 text-[11px] font-semibold text-slate-400 uppercase tracking-wider\">\n              {{ 'i18n_zoom_canvas_width' | translate: { width: stageWidth() } }}\n            </div>\n            <button\n              type=\"button\"\n              class=\"w-full px-3 py-2 text-left flex items-center justify-between hover:bg-slate-50 transition-colors cursor-pointer\"\n              (click)=\"handlerFitScreen()\">\n              <span class=\"flex items-center gap-2 text-slate-700 font-medium\">\n                <svg class=\"w-3.5 h-3.5 text-slate-600\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" y1=\"3\" x2=\"14\" y2=\"10\"/><line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"/></svg>\n                {{ 'i18n_zoom_fit_screen' | translate }}\n              </span>\n              <span class=\"text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded font-medium\">{{ 'i18n_auto' | translate }}</span>\n            </button>\n            <div class=\"h-px bg-slate-100 my-1\"></div>\n            @for (preset of zoomPresets; track preset.value) {\n              <button\n                type=\"button\"\n                class=\"w-full px-3 py-1.5 text-left flex items-center justify-between hover:bg-slate-50 transition-colors cursor-pointer\"\n                [class.text-blue-600]=\"isCurrentPreset(preset.value)\"\n                [class.font-semibold]=\"isCurrentPreset(preset.value)\"\n                [class.bg-blue-50]=\"isCurrentPreset(preset.value)\"\n                (click)=\"handlerSelectPreset(preset.value)\">\n                <span class=\"text-slate-700\" [class.text-blue-600]=\"isCurrentPreset(preset.value)\">\n                  {{ preset.label | translate }}\n                </span>\n                @if (isCurrentPreset(preset.value)) {\n                  <svg class=\"w-3.5 h-3.5 text-blue-600\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n                }\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Ph\u00F3ng to (+) -->\n      <button\n        type=\"button\"\n        class=\"w-[28px] h-[28px] flex items-center justify-center rounded-full text-slate-700 hover:text-slate-900 hover:bg-slate-200 disabled:opacity-30 disabled:hover:bg-transparent transition-colors cursor-pointer\"\n        [disabled]=\"currentZoom() >= zoomMax()\"\n        [title]=\"'i18n_zoom_in' | translate\"\n        (click)=\"handlerZoomIn()\">\n        <svg class=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/></svg>\n      </button>\n\n      <!-- Ph\u00E2n c\u00E1ch -->\n      <div class=\"h-[16px] w-px bg-slate-200\"></div>\n\n      <!-- N\u00FAt V\u1EEBa m\u00E0n h\u00ECnh nhanh -->\n      <button\n        type=\"button\"\n        class=\"h-[28px] shrink-0 px-2.5 flex items-center gap-1 rounded-full text-xs text-slate-700 hover:text-slate-900 hover:bg-slate-200 transition-colors cursor-pointer\"\n        [title]=\"'i18n_zoom_fit_screen_tooltip' | translate\"\n        (click)=\"handlerFitScreen()\">\n        <svg class=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" y1=\"3\" x2=\"14\" y2=\"10\"/><line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"/></svg>\n        <span class=\"whitespace-nowrap font-medium\">{{ 'i18n_zoom_fit_screen' | translate }}</span>\n      </button>\n\n      <!-- N\u00FAt \u0110\u1EB7t l\u1EA1i 100% (ch\u1EC9 hi\u1EC7n khi kh\u00E1c 100%) -->\n      @if (zoomPercent() !== 100) {\n        <button\n          type=\"button\"\n          class=\"h-[28px] px-2 flex items-center gap-1 rounded-full text-xs font-semibold text-blue-600 hover:bg-blue-50 transition-colors cursor-pointer\"\n          [title]=\"'i18n_zoom_reset_tooltip' | translate: { width: stageWidth(), height: stageMinHeight() }\"\n          (click)=\"handlerResetZoom()\">\n          <svg class=\"w-[12px] h-[12px]\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"1 4 1 10 7 10\"/><path d=\"M3.51 15a9 9 0 1 0 2.13-9.36L1 10\"/></svg>\n          <span>100%</span>\n        </button>\n      }\n    </div>\n  }\n} @else {\n  <!-- \uD83D\uDD34 `relative` l\u00E0 B\u1EAET BU\u1ED8C, C\u1EA4M b\u1ECF.\n       gridster \u0111\u1ED5i v\u1ECB tr\u00ED chu\u1ED9t th\u00E0nh \u00F4 l\u01B0\u1EDBi b\u1EB1ng `e.clientY + (el.scrollTop - el.offsetTop)` \u2014 c\u00F4ng\n       th\u1EE9c \u0111\u00F3 ch\u1EC9 \u0111\u00FAng khi `offsetParent` c\u1EE7a <gridster> CH\u00CDNH L\u00C0 kh\u1ED1i cu\u1ED9n n\u00E0y. Thi\u1EBFu `relative` th\u00EC\n       `offsetParent` nh\u1EA3y l\u00EAn kh\u1ED1i bao ngo\u00E0i: `offsetTop` tr\u1EA3 16 trong khi l\u1EC7ch th\u1EADt l\u00E0 65 \u2192 gridster\n       t\u00EDnh \u00F4 sai 49px, \u00F4 ch\u1EDD \u0111\u1EB7t hi\u1EC7n l\u1EC7ch kh\u1ECFi con tr\u1ECF n\u00EAn k\u00E9o th\u1EA3 kh\u00F4ng \u0111\u1ED5i \u0111\u01B0\u1EE3c v\u1ECB tr\u00ED, v\u00E0 k\u00E9o m\u00E9p\n       c\u0169ng t\u00EDnh sai \u0111i\u1EC3m d\u1EEBng. -->\n  <div\n    #scrollArea\n    class=\"libs-ui-grid-layout-scroll-area relative h-full min-h-0 w-full min-w-0\"\n    [class.overflow-y-auto]=\"!isNestedCanvas()\"\n    (mousedown)=\"handlerMouseDownTrongLuoi($event)\"\n    (dragover)=\"handlerDragOver($event)\"\n    (dragleave)=\"handlerDragLeave($event)\"\n    (drop)=\"handlerDrop($event)\">\n    <!-- Snapped Drop Ghost Preview -->\n    @if (dropGhost(); as ghost) {\n      <div\n        class=\"pointer-events-none absolute z-30 flex flex-col items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-blue-500 bg-blue-500/15 p-1 shadow-sm transition-all duration-75 ease-out backdrop-blur-[0.5px] select-none\"\n        [style.left.px]=\"ghost.pixelLeft\"\n        [style.top.px]=\"ghost.pixelTop\"\n        [style.width.px]=\"ghost.pixelWidth\"\n        [style.height.px]=\"ghost.pixelHeight\">\n        <div class=\"inline-flex max-w-[95%] items-center gap-1 truncate rounded-md bg-blue-600 px-2 py-0.5 text-[11px] font-semibold text-white shadow-xs\">\n          @if (ghost.cardIconClass) {\n            <i [class]=\"ghost.cardIconClass + ' text-xs'\"></i>\n          } @else if (ghost.cardIconText) {\n            <span class=\"text-[10px] font-bold\">{{ ghost.cardIconText }}</span>\n          } @else {\n            <span class=\"text-xs font-bold\">{{ ghost.isInsideGroup ? '\u21B3' : '+' }}</span>\n          }\n          <span class=\"truncate\">{{ ghost.cardTitle }}</span>\n          <span class=\"text-[9px] font-mono opacity-75\">({{ ghost.cols }}c)</span>\n        </div>\n\n        @if (ghost.pixelHeight >= 80) {\n          <div class=\"mt-1 flex max-w-[95%] items-center gap-1.5 truncate rounded border border-blue-100 bg-white/95 px-2 py-0.5 text-[10px] font-medium text-blue-700 shadow-xs\">\n            @if (ghost.isInsideGroup) {\n              <span class=\"truncate font-bold text-blue-900\">\u21B3 {{ ghost.groupTitle }}</span>\n              <span class=\"text-blue-300\">\u2022</span>\n            }\n            <span>C\u1ED9t {{ ghost.col + 1 }}-{{ ghost.col + ghost.cols }}</span>\n          </div>\n        }\n      </div>\n    }\n    <gridster class=\"h-full w-full\" [class.display-grid]=\"showGridLines()\" [options]=\"gridOptions()\">\n        @for (item of children(); track item.id; let itemIndex = $index) {\n    <!-- \uD83D\uDD34 Ch\u1EB7n `mousedown` t\u1EA1i \u0110\u00C2Y cho l\u01B0\u1EDBi l\u1ED3ng \u2014 C\u1EA4M b\u1ECF v\u00E0 C\u1EA4M chuy\u1EC3n sang ch\u1ED7 kh\u00E1c.\n         `ignoreContentClass` m\u1ED9t m\u00ECnh KH\u00D4NG \u0111\u1EE7: `delayStart: 160` l\u00E0m M\u1ED6I l\u01B0\u1EDBi l\u00EAn l\u1ECBch\n         `dragStart` b\u1EB1ng `setTimeout` ngay t\u1EA1i `mousedown`, c\u00F2n `stopPropagation` m\u00E0 lib g\u1ECDi b\u00EAn\n         trong `dragStart` ch\u1EA1y sau 160ms n\u00EAn qu\u00E1 mu\u1ED9n \u2014 l\u01B0\u1EDBi CHA \u0111\u00E3 k\u1ECBp nh\u1EADn (\u0111o 28/08/2026: k\u00E9o\n         d\u1EA3i kh\u1ED1i con, chu\u1ED7i class duy\u1EC7t l\u00EAn \u0110\u00DANG m\u00E0 container v\u1EABn nh\u1EA3y 0,0 \u2192 0,1).\n         G\u1EAFn \u1EDF `gridster-item` l\u00E0 \u0111\u00FAng bi\u00EAn: l\u01B0\u1EDBi con nghe tr\u00EAn ch\u00EDnh ph\u1EA7n t\u1EED n\u00E0y n\u00EAn \u0111\u00E3 nh\u1EADn xong,\n         l\u01B0\u1EDBi cha \u1EDF ngo\u00E0i b\u1ECB ch\u1EB7n. -->\n    <gridster-item\n      [item]=\"item\"\n      [class.libs-ui-grid-layout-selected]=\"selectedNodeId() === item.id\"\n      (click)=\"handlerSelectNode(item, $event)\"\n      (mousedown)=\"handlerBlockParentDrag($event)\">\n      <!-- \uD83D\uDD34 V\u1ECF n\u00E0y mang `dragHandleClass` \u2014 C\u1EA4M b\u1ECF.\n           `ignoreContent: true` b\u1EAFt gridster CH\u1EC8 cho k\u00E9o khi ch\u1ED7 b\u1EA5m n\u1EB1m d\u01B0\u1EDBi m\u1ED9t ph\u1EA7n t\u1EED c\u00F3\n           `dragHandleClass`. Kh\u00F4ng c\u00F3 v\u1ECF n\u00E0y th\u00EC component c\u1EE7a n\u01A1i d\u00F9ng (th\u01B0 vi\u1EC7n kh\u00F4ng ki\u1EC3m so\u00E1t\n           \u0111\u01B0\u1EE3c class c\u1EE7a n\u00F3) s\u1EBD kh\u00F4ng c\u00F3 tay c\u1EA7m n\u00E0o, v\u00E0 KH\u00D4NG kh\u1ED1i n\u00E0o k\u00E9o \u0111\u01B0\u1EE3c \u2014 \u0111o 28/08/2026:\n           k\u00E9o 320px, to\u1EA1 \u0111\u1ED9 kh\u1ED1i gi\u1EEF nguy\u00EAn x=3,y=0.\n           T\u00EAn class theo c\u1EA5p: l\u01B0\u1EDBi trang v\u00E0 l\u01B0\u1EDBi l\u1ED3ng d\u00F9ng hai t\u00EAn KH\u00C1C nhau, n\u1EBFu kh\u00F4ng l\u01B0\u1EDBi cha\n           c\u0169ng nh\u1EADn ra tay c\u1EA7m c\u1EE7a kh\u1ED1i con v\u00E0 nh\u1EA5c lu\u00F4n container. -->\n      <!-- \uD83D\uDD34 V\u1ECF KH\u00D4NG mang `dragHandleClass` \u2014 C\u1EA4M th\u00EAm l\u1EA1i.\n           K\u00E9o ch\u1EC9 \u0111\u01B0\u1EE3c ph\u00E9p b\u1EAFt \u0111\u1EA7u t\u1EEB D\u1EA2I XANH (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026: \"ph\u1EA3i hover v\u00E0o v\u00F9ng\n           m\u00E0u xanh th\u00EC m\u1EDBi k\u00E9o th\u1EA3 \u0111\u01B0\u1EE3c cho \u0111\u1ED3ng nh\u1EA5t\"). Cho c\u1EA3 v\u1ECF l\u00E0m tay c\u1EA7m th\u00EC b\u1EA5m \u0111\u00E2u c\u0169ng\n           k\u00E9o, v\u00E0 kh\u1ED1i con n\u1EB1m trong container s\u1EBD nh\u1EA5c lu\u00F4n container v\u00EC l\u01B0\u1EDBi cha duy\u1EC7t l\u00EAn g\u1EB7p\n           tay c\u1EA7m c\u1EE7a v\u1ECF container tr\u01B0\u1EDBc.\n           V\u1ECF kh\u1ED1i con v\u1EABn gi\u1EEF class CH\u1EB6N \u0111\u1EC3 l\u01B0\u1EDBi cha d\u1EEBng \u0111\u00FAng \u1EDF bi\u00EAn. -->\n      <div\n        class=\"libs-ui-grid-layout-block-shell group relative h-full w-full min-w-0\"\n        [attr.data-node-id]=\"item.id\"\n        [class.libs-ui-grid-layout-block-parent-drag]=\"isNestedCanvas()\">\n        <!-- D\u1EA3i k\u00E9o: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i, ba ch\u1EA5m l\u00E0 d\u1EA5u hi\u1EC7u k\u00E9o quen thu\u1ED9c.\n             Ng\u01B0\u1EDDi d\u00F9ng c\u1EA7n m\u1ED9t ch\u1ED7 b\u00E1m R\u00D5 R\u00C0NG thay v\u00EC \u0111o\u00E1n xem b\u1EA5m \u0111\u00E2u th\u00EC k\u00E9o \u0111\u01B0\u1EE3c\n             (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng d\u1EA3i \u0111ang d\u00F9ng \u1EDF m\u00E0n Customer 360 c\u1EE7a mobio-web). -->\n        @if (isEditMode()) {\n          <!-- \uD83D\uDD34 D\u1EA3i PH\u1EA2I mang tay c\u1EA7m \u0110\u00DANG C\u1EA4P c\u1EE7a n\u00F3. D\u1EA3i nh\u1EADn chu\u1ED9t (`pointer-events: auto`),\n               n\u00EAn n\u1EBFu kh\u00F4ng mang tay c\u1EA7m th\u00EC `checkDragHandleClass` duy\u1EC7t l\u00EAn g\u1EB7p tay c\u1EA7m c\u1EE7a\n               container v\u00E0 nh\u1EA5c container thay v\u00EC kh\u1ED1i con (\u0111o 28/08/2026: k\u00E9o d\u1EA3i kh\u1ED1i con,\n               container nh\u1EA3y 0,0 \u2192 0,1 c\u00F2n kh\u1ED1i con \u0111\u1EE9ng im).\n               \uD83D\uDD34 D\u1EA3i CH\u1EC8 mang tay c\u1EA7m, C\u1EA4M mang th\u00EAm class ch\u1EB7n: `checkDragHandleClass` x\u00E9t hai\n               class \u0111\u00F3 tr\u00EAn C\u00D9NG m\u1ED9t node n\u00EAn \u0111\u1EC3 chung l\u00E0 k\u00E9o h\u1ECFng (\u0111o 28/08/2026: b\u1EA5m d\u1EA3i kh\u1ED1i\n               con k\u00E9o 140px, kh\u1ED1i \u0111\u1EE9ng im). Vi\u1EC7c ch\u1EB7n l\u01B0\u1EDBi cha do V\u1ECE KH\u1ED0I lo. -->\n          <div\n            class=\"libs-ui-grid-layout-drag-bar\"\n            [class.libs-ui-grid-layout-drag-bar-child]=\"isNestedCanvas()\"\n            [class.libs-ui-grid-layout-drag-handle]=\"!isNestedCanvas()\"\n            [class.libs-ui-grid-layout-drag-handle-child]=\"isNestedCanvas()\">\n            <span class=\"libs-ui-grid-layout-drag-bar-dots\">\n              @for (dot of dragBarDots; track dot) {\n                <span class=\"libs-ui-grid-layout-drag-bar-dot\"></span>\n              }\n            </span>\n          </div>\n        }\n\n        <!-- Khung ch\u1EE9a component c\u1EE7a n\u01A1i d\u00F9ng.\n             \uD83D\uDD34 PH\u1EA2I c\u00F3 khung th\u1EADt (kh\u00F4ng ph\u1EA3i `ng-container` tr\u1ED1ng): n\u00F3 lo h\u1ED9 n\u01A1i d\u00F9ng ph\u1EA7n l\u1EA5p \u0111\u1EA7y\n             \u00F4 v\u00E0 vi\u1EC1n b\u00E1o ch\u1EBF \u0111\u1ED9 s\u1EEDa. Kh\u00F4ng c\u00F3 khung th\u00EC m\u1ED7i component n\u1ED9i dung l\u1EA1i ph\u1EA3i t\u1EF1 vi\u1EBFt\n             `:host { width/height: 100% }` + vi\u1EC1n \u0111\u1EE9t \u2014 \u0111\u00F3 l\u00E0 vi\u1EC7c c\u1EE7a th\u01B0 vi\u1EC7n, kh\u00F4ng ph\u1EA3i c\u1EE7a\n             ng\u01B0\u1EDDi d\u00F9ng (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026).\n             M\u1ED7i kh\u1ED1i m\u1ED9t ViewContainerRef ri\u00EAng n\u00EAn component n\u1EB1m \u0111\u00FAng \u00F4 c\u1EE7a n\u00F3. -->\n        <!-- \uD83D\uDD34 Container C\u00D3 `getComponentOutlet`: khung n\u00E0y l\u00E0 V\u1ECE, v\u00E0 canvas con \u0111\u01B0\u1EE3c \u0111\u01B0a V\u00C0O TRONG\n             component v\u1ECF qua input `childCanvas` (m\u1ED9t `TemplateRef`) \u2014 xem `ng-template #childCanvasTpl`\n             b\u00EAn d\u01B0\u1EDBi. V\u1ECF t\u1EF1 quy\u1EBFt \u0111\u1EB7t canvas \u1EDF \u0111\u00E2u gi\u1EEFa ti\u00EAu \u0111\u1EC1 v\u00E0 ph\u1EA7n th\u00E2n c\u1EE7a n\u00F3.\n             Tr\u01B0\u1EDBc \u0111\u00E2y canvas con l\u00E0 ANH EM c\u1EE7a khung n\u00E0y, n\u00EAn v\u1ECF chi\u1EBFm tr\u1ECDn chi\u1EC1u cao r\u1ED3i \u0111\u1EA9y to\u00E0n b\u1ED9\n             th\u1EBB con ra ngo\u00E0i v\u00F9ng nh\u00ECn th\u1EA5y (\u0111o 14/09/2026: m\u1ECDi kh\u1ED1i gh\u00E9p ch\u1EC9 c\u00F2n nh\u00E3n v\u00E0 ru\u1ED9t tr\u1EAFng). -->\n        <div\n          class=\"libs-ui-grid-layout-content-frame\"\n          [class.libs-ui-grid-layout-content-frame-edit]=\"isEditMode() && !isContainer(item)\"\n          [class.libs-ui-grid-layout-content-frame-empty]=\"isContainer(item) && !item.getComponentOutlet\">\n          <ng-container #itemHost />\n        </div>\n\n        <!-- D\u1EA5u hi\u1EC7u CONTAINER: nh\u00E3n g\u00F3c tr\u00EAn-ph\u1EA3i + vi\u1EC1n \u0111\u1EE9t bao ru\u1ED9t. Kh\u00F4ng c\u00F3 d\u1EA5u hi\u1EC7u th\u00EC\n             ng\u01B0\u1EDDi d\u00F9ng kh\u00F4ng bi\u1EBFt kh\u1ED1i n\u00E0o ch\u1EE9a \u0111\u01B0\u1EE3c kh\u1ED1i kh\u00E1c (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng c\u00E1ch\n             m\u00E0n Customer 360 c\u1EE7a mobio-web \u0111ang l\u00E0m). -->\n        @if (isEditMode() && isContainer(item)) {\n          <div class=\"libs-ui-grid-layout-container-label\">{{ 'i18n_container_block' | translate }}</div>\n          <div class=\"libs-ui-grid-layout-container-border\"></div>\n        }\n\n        <!-- Thanh c\u00F4ng c\u1EE5: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i.\n             \uD83D\uDD34 D\u00F9ng `libs_ui-components-buttons-button` \u2014 C\u1EA4M t\u1EF1 d\u1EF1ng th\u1EBB `<button>`.\n             Component n\u00E0y \u0111\u00E3 c\u00F3 s\u1EB5n ki\u1EC3u n\u00FAt, c\u1EE1 n\u00FAt v\u00E0 bong b\u00F3ng ch\u00FA th\u00EDch theo \u0111\u00FAng b\u1ED9 giao di\u1EC7n\n             c\u1EE7a s\u1EA3n ph\u1EA9m; t\u1EF1 d\u1EF1ng l\u00E0 m\u1ED7i n\u01A1i m\u1ED9t ki\u1EC3u v\u00E0 m\u1EA5t lu\u00F4n tooltip. -->\n        @if (isEditMode() && !hiddenToolbar()) {\n          @if (templateToolbar()) {\n            <!-- N\u01A1i d\u00F9ng t\u1EF1 v\u1EBD thanh c\u00F4ng c\u1EE5: nh\u1EADn kh\u1ED1i + c\u00E1c h\u00E0m ph\u00E1t event qua context.\n\n                 \uD83D\uDD34 Kh\u1ED1i b\u1ECDc t\u1EF1 ch\u1EB7n `mousedown`/`click` n\u1ED5i l\u00EAn gridster. Thanh c\u00F4ng c\u1EE5 n\u1EB1m trong\n                 v\u00F9ng mang `dragHandleClass`; kh\u00F4ng ch\u1EB7n th\u00EC c\u00FA b\u1EA5m b\u1ECB hi\u1EC3u l\u00E0 b\u1EAFt \u0111\u1EA7u k\u00E9o v\u00E0\n                 `delayStart: 160` nu\u1ED1t lu\u00F4n `click` \u2014 n\u00FAt trong template ngo\u00E0i b\u1EA5m kh\u00F4ng \u0103n\n                 (\u0111o 09/09/2026: b\u1EA5m b\u1EB1ng `.click()` c\u1EE7a DOM th\u00EC m\u1EDF, b\u1EA5m chu\u1ED9t th\u1EADt th\u00EC kh\u00F4ng).\n                 Ch\u1EB7n \u1EDF \u0110\u00C2Y \u0111\u1EC3 n\u01A1i d\u00F9ng kh\u00F4ng ph\u1EA3i bi\u1EBFt b\u1EABy n\u00E0y. -->\n            <div\n              class=\"libs-ui-grid-layout-toolbar\"\n              role=\"toolbar\"\n              tabindex=\"0\"\n              [class.libs-ui-grid-layout-toolbar-child]=\"isNestedCanvas()\"\n              (mousedown)=\"handlerStopEvent($event)\"\n              (keydown)=\"handlerStopEvent($event)\"\n              (click)=\"handlerStopEvent($event)\">\n              <ng-container\n                *ngTemplateOutlet=\"templateToolbar()!; context: toolbarContexts()[itemIndex]\" />\n            </div>\n          } @else {\n            <div\n              class=\"libs-ui-grid-layout-toolbar\"\n              [class.libs-ui-grid-layout-toolbar-child]=\"isNestedCanvas()\">\n              <span class=\"libs-ui-grid-layout-dim-badge\">\n                {{ item.rows }} h\u00E0ng \u00D7 {{ item.cols }} c\u1ED9t\n              </span>\n              @if (canAddInside(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"'libs-ui-icon-add'\"\n                  [popover]=\"{ config: { content: 'Th\u00EAm kh\u1ED1i v\u00E0o trong', zIndex: 1300 } }\"\n                  (outClick)=\"handlerAddInside($event, item)\" />\n              }\n              @if (canToggleType(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"isContainer(item) ? 'libs-ui-icon-split-cell' : 'libs-ui-icon-merge-cell'\"\n                  [popover]=\"{ config: { content: isContainer(item) ? '\u0110\u01B0a v\u1EC1 kh\u1ED1i \u0111\u01A1n' : 'Chuy\u1EC3n th\u00E0nh kh\u1ED1i gh\u00E9p', zIndex: 1300 } }\"\n                  (outClick)=\"handlerToggleType($event, item)\" />\n              }\n              <libs_ui-components-buttons-button\n                [type]=\"'button-third'\"\n                [iconOnlyType]=\"true\"\n                [sizeButton]=\"'smaller'\"\n                [classIconLeft]=\"'libs-ui-icon-setting'\"\n                [popover]=\"{ config: { content: 'C\u1EA5u h\u00ECnh th\u1EBB', zIndex: 1300 } }\"\n                (outClick)=\"handlerConfig($event, item)\" />\n              <libs_ui-components-buttons-button\n                [type]=\"'button-third-hover-danger'\"\n                [iconOnlyType]=\"true\"\n                [sizeButton]=\"'smaller'\"\n                [classIconLeft]=\"'libs-ui-icon-remove'\"\n                [popover]=\"{ config: { content: isContainer(item) ? 'Xo\u00E1 c\u1EA3 kh\u1ED1i gh\u00E9p' : 'Xo\u00E1 kh\u1ED1i', zIndex: 1300 } }\"\n                (outClick)=\"handlerRemove($event, item)\" />\n            </div>\n          }\n        }\n\n        @if (item.children && item.children.length > 0) {\n          <!-- Kh\u1ED1i c\u00F3 con \u2192 ru\u1ED9t n\u00F3 l\u1EA1i l\u00E0 m\u1ED9t m\u1EB7t ph\u1EB3ng n\u1EEFa. \u0110\u1EC7 quy \u1EDF \u0111\u00E2y, n\u01A1i d\u00F9ng kh\u00F4ng ph\u1EA3i lo.\n               L\u1EC1 \u0111\u1EB7t \u1EDF \u0110\u00C2Y (v\u1ECF container), kh\u00F4ng \u0111\u1EB7t v\u00E0o l\u01B0\u1EDBi con \u2014 l\u01B0\u1EDBi con gi\u1EEF nguy\u00EAn khe 2px.\n\n               \uD83D\uDD34 Khu\u00F4n \u0111\u1EB7t trong `ng-template` \u0111\u1EC3 \u0111i \u0111\u01B0\u1EE3c HAI \u0111\u01B0\u1EDDng:\n               - Container KH\u00D4NG c\u00F3 v\u1ECF ri\u00EAng \u2192 v\u1EBD th\u1EB3ng t\u1EA1i \u0111\u00E2y, y nh\u01B0 tr\u01B0\u1EDBc.\n               - Container C\u00D3 `getComponentOutlet` \u2192 th\u01B0 vi\u1EC7n truy\u1EC1n khu\u00F4n n\u00E0y xu\u1ED1ng component v\u1ECF qua\n                 input `childCanvas`, v\u1ECF t\u1EF1 \u0111\u1EB7t n\u00F3 v\u00E0o gi\u1EEFa ti\u00EAu \u0111\u1EC1 v\u00E0 ph\u1EA7n th\u00E2n c\u1EE7a m\u00ECnh. V\u1EBD th\u00EAm \u1EDF\n                 \u0111\u00E2y n\u1EEFa l\u00E0 hai m\u1EB7t ph\u1EB3ng l\u1ED3ng ch\u1ED3ng nhau. -->\n          <ng-template #childCanvasTpl>\n            <libs_ui-services-grid_layout-canvas\n              class=\"block h-full w-full\"\n              [style.padding]=\"containerPadding()\"\n              [node]=\"item\"\n              [depth]=\"depth() + 1\"\n              [hiddenToolbar]=\"hiddenToolbar()\"\n              [templateToolbar]=\"templateToolbar()\"\n              [selectedNodeId]=\"selectedNodeId()\"\n              (outSelectNode)=\"outSelectNode.emit($event)\"\n              (outConfigNode)=\"outConfigNode.emit($event)\"\n              (outChange)=\"outChange.emit($event)\"\n              (outRemoveNode)=\"outRemoveNode.emit($event)\"\n              (outAddBlockInside)=\"outAddBlockInside.emit($event)\"\n              (outToggleType)=\"outToggleType.emit($event)\" />\n          </ng-template>\n\n          @if (!item.getComponentOutlet) {\n            <ng-container [ngTemplateOutlet]=\"childCanvasTpl\" />\n          }\n        }\n      </div>\n    </gridster-item>\n  }\n    </gridster>\n  </div>\n}\n", styles: [":host{display:block;position:relative;box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0}.libs-ui-grid-layout-block-shell{container-type:inline-size;display:block;box-sizing:border-box;height:100%}.libs-ui-grid-layout-drag-bar{position:absolute;top:2px;left:50%;z-index:15;display:flex;align-items:center;justify-content:center;width:64px;height:16px;background:transparent;transform:translate(-50%);opacity:1;transition:opacity .12s ease;pointer-events:auto;cursor:move}.libs-ui-grid-layout-drag-bar-dots{display:grid;grid-template-columns:repeat(3,3px);gap:3px;color:#9ca2ad}.libs-ui-grid-layout-drag-bar-dot{width:3px;height:3px;background:currentColor;border-radius:50%}.libs-ui-grid-layout-drag-bar:hover .libs-ui-grid-layout-drag-bar-dots{color:#3d6ef5}.libs-ui-grid-layout-drag-bar:not(.libs-ui-grid-layout-drag-bar-child){opacity:1}.libs-ui-grid-layout-drag-bar-child{top:auto;bottom:0;background:#d9f2e4;border-radius:4px 4px 0 0}.libs-ui-grid-layout-drag-bar-child .libs-ui-grid-layout-drag-bar-dots{color:#9ca2ad}.libs-ui-grid-layout-drag-bar-child:hover .libs-ui-grid-layout-drag-bar-dots{color:#00a757}.libs-ui-grid-layout-drag-bar-child{opacity:0}.libs-ui-grid-layout-block-shell:hover>.libs-ui-grid-layout-drag-bar-child{opacity:1}.libs-ui-grid-layout-block-shell:has(>.libs-ui-grid-layout-drag-bar:not(.libs-ui-grid-layout-drag-bar-child):hover){outline:2px solid #3d6ef5;outline-offset:-2px;border-radius:8px}.libs-ui-grid-layout-block-shell:has(>.libs-ui-grid-layout-drag-bar-child:hover){outline:2px solid #00a757;outline-offset:-2px;border-radius:8px}.libs-ui-grid-layout-container-label{position:absolute;left:6px;top:2px;display:flex;height:20px;align-items:center;z-index:3;padding:0 6px;color:#3d6ef5;font-weight:500;font-size:10px;line-height:14px;background:#dbe4ff;border-radius:4px;pointer-events:none}.libs-ui-grid-layout-content-frame{box-sizing:border-box;width:100%;height:100%;overflow:hidden;border-radius:6px}.libs-ui-grid-layout-content-frame ::ng-deep>*{display:block;box-sizing:border-box;width:100%;height:100%}.libs-ui-grid-layout-content-frame-empty{height:0}.libs-ui-grid-layout-content-frame-edit{border:1px dashed #c3cede}.libs-ui-grid-layout-container-border{position:absolute;inset:0;border:1px dashed #9db4f0;border-radius:8px;pointer-events:none}.libs-ui-grid-layout-toolbar{position:absolute;top:6px;right:8px;z-index:24;display:flex;gap:2px;align-items:center;height:20px;background:#fff;border-radius:4px;box-shadow:0 2px 8px #0716311f;opacity:0;transition:opacity .12s ease}.libs-ui-grid-layout-toolbar-child{top:50%;right:8px;left:auto;transform:translateY(-50%)}.libs-ui-grid-layout-block-shell:hover>.libs-ui-grid-layout-toolbar{opacity:1}:host ::ng-deep gridster{background:transparent}:host ::ng-deep .gridster-item-resizable-handler.handle-n,:host ::ng-deep .gridster-item-resizable-handler.handle-s{height:16px}:host ::ng-deep .gridster-item-resizable-handler.handle-e,:host ::ng-deep .gridster-item-resizable-handler.handle-w{width:16px}:host ::ng-deep .gridster-item-resizable-handler.handle-n{top:0}:host ::ng-deep .gridster-item-resizable-handler.handle-s{bottom:0}:host ::ng-deep .gridster-item-resizable-handler.handle-e{right:0}:host ::ng-deep .gridster-item-resizable-handler.handle-w{left:0}:host ::ng-deep gridster-item.gridster-item-moving,:host ::ng-deep gridster-item.gridster-item-resizing{z-index:30!important}:host ::ng-deep gridster-item.gridster-item-moving>.libs-ui-grid-layout-block-shell,:host ::ng-deep gridster-item.gridster-item-resizing>.libs-ui-grid-layout-block-shell{outline:2px solid #3d6ef5;outline-offset:-2px;border-radius:8px}:host ::ng-deep gridster gridster gridster-item.gridster-item-moving>.libs-ui-grid-layout-block-shell,:host ::ng-deep gridster gridster gridster-item.gridster-item-resizing>.libs-ui-grid-layout-block-shell{outline-color:#00a757}:host ::ng-deep gridster-item.libs-ui-grid-layout-selected>.libs-ui-grid-layout-block-shell{outline:2px solid #2563eb!important;outline-offset:-2px!important;border-radius:8px!important;box-shadow:0 0 0 4px #2563eb26!important}:host ::ng-deep gridster.display-grid .gridster-column,:host ::ng-deep gridster gridster.display-grid .gridster-column{border-right:1px solid rgba(226,232,240,.7)!important;border-left:none!important;pointer-events:none!important;height:100%!important;min-height:100%!important}:host ::ng-deep gridster.display-grid .gridster-column:first-child,:host ::ng-deep gridster gridster.display-grid .gridster-column:first-child{border-left:1px solid rgba(226,232,240,.7)!important}:host ::ng-deep gridster.display-grid .gridster-row,:host ::ng-deep gridster gridster.display-grid .gridster-row{border-bottom:1px solid rgba(226,232,240,.7)!important;border-top:none!important;pointer-events:none!important}:host ::ng-deep gridster.display-grid .gridster-row:first-child,:host ::ng-deep gridster gridster.display-grid .gridster-row:first-child{border-top:1px solid rgba(226,232,240,.7)!important}:host ::ng-deep gridster gridster.display-grid{background-color:#f8fafc80!important}:host ::ng-deep gridster-preview{background:#2563eb1f!important;border:1.5px dashed #2563eb!important;border-radius:6px!important;z-index:25!important}.libs-ui-grid-layout-dim-badge{display:inline-flex;align-items:center;height:20px;padding:0 6px;background-color:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;color:#64748b;font-size:10px;font-weight:500;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;pointer-events:none;white-space:nowrap}@container (max-width: 80px){.libs-ui-grid-layout-drag-bar{top:26px}}.libs-ui-grid-layout-stage{box-sizing:border-box;transform-origin:top center;transition:zoom .15s ease-out}#canvas-zoom-dock{box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.libs-ui-grid-layout-stage>gridster>gridster-item>.libs-ui-grid-layout-block-shell{inset:calc(var(--libs-ui-grid-layout-visual-gap, 0px) / 2);width:calc(100% - var(--libs-ui-grid-layout-visual-gap, 0px));height:calc(100% - var(--libs-ui-grid-layout-visual-gap, 0px));box-sizing:border-box}\n"] }]
+            args: [{ selector: 'libs_ui-services-grid_layout-canvas', standalone: true, imports: [
+                        GridsterModule,
+                        LibsUiComponentsButtonsButtonComponent,
+                        LibsUiComponentsScrollOverlayDirective,
+                        NgTemplateOutlet,
+                        TranslateModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isZoomActive()) {\n  <!-- Khu v\u1EF1c cu\u1ED9n ch\u1EE9a canvas stage thu ph\u00F3ng -->\n  <div\n    #scrollArea\n    class=\"libs-ui-grid-layout-scroll-area relative h-full min-h-0 w-full min-w-0 overflow-auto p-6 flex justify-start items-start\"\n    (mousedown)=\"handlerMouseDownTrongLuoi($event)\"\n    (pointerdown)=\"handlerScrollAreaPointerDown()\"\n    (wheel)=\"handlerWheel($event)\"\n    (dragover)=\"handlerDragOver($event)\"\n    (dragleave)=\"handlerDragLeave($event)\"\n    (drop)=\"handlerDrop($event)\">\n    <div\n      #canvasStage\n      id=\"bi-canvas-stage\"\n      class=\"libs-ui-grid-layout-stage relative flex flex-col transition-[zoom] duration-150 origin-top shrink-0 mx-auto bg-white/80 border border-slate-200/80 rounded-2xl shadow-sm p-4\"\n      [style.zoom]=\"currentZoom()\"\n      [style.width.px]=\"stageWidth()\"\n      [style.min-width.px]=\"stageWidth()\"\n      [style.min-height.px]=\"stageMinHeight()\"\n      [style.--libs-ui-grid-layout-visual-gap.px]=\"visualGap()\">\n      <!-- Snapped Drop Ghost Preview -->\n      @if (dropGhost(); as ghost) {\n        <div\n          class=\"pointer-events-none absolute z-30 flex flex-col items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-blue-500 bg-blue-500/15 p-1 shadow-sm transition-all duration-75 ease-out backdrop-blur-[0.5px] select-none\"\n          [style.left.px]=\"ghost.pixelLeft\"\n          [style.top.px]=\"ghost.pixelTop\"\n          [style.width.px]=\"ghost.pixelWidth\"\n          [style.height.px]=\"ghost.pixelHeight\">\n          <div class=\"inline-flex max-w-[95%] items-center gap-1 truncate rounded-md bg-blue-600 px-2 py-0.5 text-[11px] font-semibold text-white shadow-xs\">\n            @if (ghost.cardIconClass) {\n              <i [class]=\"ghost.cardIconClass + ' text-xs'\"></i>\n            } @else if (ghost.cardIconText) {\n              <span class=\"text-[10px] font-bold\">{{ ghost.cardIconText }}</span>\n            } @else {\n              <span class=\"text-xs font-bold\">{{ ghost.isInsideGroup ? '\u21B3' : '+' }}</span>\n            }\n            <span class=\"truncate\">{{ ghost.cardTitle }}</span>\n            <span class=\"text-[9px] font-mono opacity-75\">({{ ghost.cols }}c)</span>\n          </div>\n\n          @if (ghost.pixelHeight >= 80) {\n            <div class=\"mt-1 flex max-w-[95%] items-center gap-1.5 truncate rounded border border-blue-100 bg-white/95 px-2 py-0.5 text-[10px] font-medium text-blue-700 shadow-xs\">\n              @if (ghost.isInsideGroup) {\n                <span class=\"truncate font-bold text-blue-900\">\u21B3 {{ ghost.groupTitle }}</span>\n                <span class=\"text-blue-300\">\u2022</span>\n              }\n              <span>C\u1ED9t {{ ghost.col + 1 }}-{{ ghost.col + ghost.cols }}</span>\n            </div>\n          }\n        </div>\n      }\n      <gridster\n        class=\"h-full w-full\"\n        [class.display-grid]=\"showGridLines()\"\n        [class.libs-ui-grid-layout-drag-anywhere]=\"dragFromAnywhere()\"\n        [options]=\"gridOptions()\">\n          @for (item of children(); track item.id; let itemIndex = $index) {\n    <!-- \uD83D\uDD34 Ch\u1EB7n `mousedown` t\u1EA1i \u0110\u00C2Y cho l\u01B0\u1EDBi l\u1ED3ng \u2014 C\u1EA4M b\u1ECF v\u00E0 C\u1EA4M chuy\u1EC3n sang ch\u1ED7 kh\u00E1c.\n         `ignoreContentClass` m\u1ED9t m\u00ECnh KH\u00D4NG \u0111\u1EE7: `delayStart: 160` l\u00E0m M\u1ED6I l\u01B0\u1EDBi l\u00EAn l\u1ECBch\n         `dragStart` b\u1EB1ng `setTimeout` ngay t\u1EA1i `mousedown`, c\u00F2n `stopPropagation` m\u00E0 lib g\u1ECDi b\u00EAn\n         trong `dragStart` ch\u1EA1y sau 160ms n\u00EAn qu\u00E1 mu\u1ED9n \u2014 l\u01B0\u1EDBi CHA \u0111\u00E3 k\u1ECBp nh\u1EADn (\u0111o 28/08/2026: k\u00E9o\n         d\u1EA3i kh\u1ED1i con, chu\u1ED7i class duy\u1EC7t l\u00EAn \u0110\u00DANG m\u00E0 container v\u1EABn nh\u1EA3y 0,0 \u2192 0,1).\n         G\u1EAFn \u1EDF `gridster-item` l\u00E0 \u0111\u00FAng bi\u00EAn: l\u01B0\u1EDBi con nghe tr\u00EAn ch\u00EDnh ph\u1EA7n t\u1EED n\u00E0y n\u00EAn \u0111\u00E3 nh\u1EADn xong,\n         l\u01B0\u1EDBi cha \u1EDF ngo\u00E0i b\u1ECB ch\u1EB7n. -->\n    <gridster-item\n      [item]=\"item\"\n      [class.libs-ui-grid-layout-selected]=\"selectedNodeId() === item.id\"\n      (click)=\"handlerSelectNode(item, $event)\"\n      (mousedown)=\"handlerBlockParentDrag($event)\">\n      <!-- \uD83D\uDD34 V\u1ECF n\u00E0y mang `dragHandleClass` \u2014 C\u1EA4M b\u1ECF.\n           `ignoreContent: true` b\u1EAFt gridster CH\u1EC8 cho k\u00E9o khi ch\u1ED7 b\u1EA5m n\u1EB1m d\u01B0\u1EDBi m\u1ED9t ph\u1EA7n t\u1EED c\u00F3\n           `dragHandleClass`. Kh\u00F4ng c\u00F3 v\u1ECF n\u00E0y th\u00EC component c\u1EE7a n\u01A1i d\u00F9ng (th\u01B0 vi\u1EC7n kh\u00F4ng ki\u1EC3m so\u00E1t\n           \u0111\u01B0\u1EE3c class c\u1EE7a n\u00F3) s\u1EBD kh\u00F4ng c\u00F3 tay c\u1EA7m n\u00E0o, v\u00E0 KH\u00D4NG kh\u1ED1i n\u00E0o k\u00E9o \u0111\u01B0\u1EE3c \u2014 \u0111o 28/08/2026:\n           k\u00E9o 320px, to\u1EA1 \u0111\u1ED9 kh\u1ED1i gi\u1EEF nguy\u00EAn x=3,y=0.\n           T\u00EAn class theo c\u1EA5p: l\u01B0\u1EDBi trang v\u00E0 l\u01B0\u1EDBi l\u1ED3ng d\u00F9ng hai t\u00EAn KH\u00C1C nhau, n\u1EBFu kh\u00F4ng l\u01B0\u1EDBi cha\n           c\u0169ng nh\u1EADn ra tay c\u1EA7m c\u1EE7a kh\u1ED1i con v\u00E0 nh\u1EA5c lu\u00F4n container. -->\n      <!-- \uD83D\uDD34 V\u1ECF KH\u00D4NG mang `dragHandleClass` \u2014 C\u1EA4M th\u00EAm l\u1EA1i.\n           K\u00E9o ch\u1EC9 \u0111\u01B0\u1EE3c ph\u00E9p b\u1EAFt \u0111\u1EA7u t\u1EEB D\u1EA2I XANH (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026: \"ph\u1EA3i hover v\u00E0o v\u00F9ng\n           m\u00E0u xanh th\u00EC m\u1EDBi k\u00E9o th\u1EA3 \u0111\u01B0\u1EE3c cho \u0111\u1ED3ng nh\u1EA5t\"). Cho c\u1EA3 v\u1ECF l\u00E0m tay c\u1EA7m th\u00EC b\u1EA5m \u0111\u00E2u c\u0169ng\n           k\u00E9o, v\u00E0 kh\u1ED1i con n\u1EB1m trong container s\u1EBD nh\u1EA5c lu\u00F4n container v\u00EC l\u01B0\u1EDBi cha duy\u1EC7t l\u00EAn g\u1EB7p\n           tay c\u1EA7m c\u1EE7a v\u1ECF container tr\u01B0\u1EDBc.\n           V\u1ECF kh\u1ED1i con v\u1EABn gi\u1EEF class CH\u1EB6N \u0111\u1EC3 l\u01B0\u1EDBi cha d\u1EEBng \u0111\u00FAng \u1EDF bi\u00EAn. -->\n      <!-- \uD83D\uDD34 `dragFromAnywhere` b\u1EADt th\u00EC B\u1ECE class ch\u1EB7n \u2014 C\u1EA4M g\u1EAFn l\u1EA1i v\u00F4 \u0111i\u1EC1u ki\u1EC7n.\n           `libs-ui-grid-layout-block-parent-drag` CH\u00CDNH L\u00C0 `ignoreContentClass` c\u1EE7a gridster (xem\n           `gridster-config.define`). V\u1EDBi `ignoreContent: true` n\u00F3 ch\u1EC9 mang ngh\u0129a \"kh\u00F4ng ph\u1EA3i tay\n           c\u1EA7m\"; nh\u01B0ng v\u1EDBi `ignoreContent: false` (ch\u1EBF \u0111\u1ED9 c\u1EA7m-c\u1EA3-th\u1EBB) gridster hi\u1EC3u l\u00E0 \"v\u00F9ng C\u1EA4M\n           k\u00E9o\": duy\u1EC7t t\u1EEB ch\u1ED7 b\u1EA5m l\u00EAn g\u1EB7p class n\u00E0y l\u00E0 d\u1EEBng h\u1EB3n, n\u00EAn KH\u1ED0I CON trong kh\u1ED1i gh\u00E9p b\u1EA5m\n           v\u00E0o \u0111\u00E2u c\u0169ng kh\u00F4ng nh\u00FAc nh\u00EDch (ng\u01B0\u1EDDi d\u00F9ng ch\u1EC9 ra 15/09/2026; \u0111o \u0111\u01B0\u1EE3c k\u00E9o 150px m\u00E0 kh\u1ED1i\n           l\u1EC7ch 0px). Ch\u1EB7n l\u01B0\u1EDBi cha \u1EDF ch\u1EBF \u0111\u1ED9 n\u00E0y do `handlerBlockParentDrag` tr\u00EAn ch\u00EDnh\n           `gridster-item` lo, kh\u00F4ng c\u1EA7n class n\u00E0y. -->\n      <div\n        class=\"libs-ui-grid-layout-block-shell group relative h-full w-full min-w-0\"\n        [attr.data-node-id]=\"item.id\"\n        [class.libs-ui-grid-layout-block-parent-drag]=\"isNestedCanvas() && !dragFromAnywhere()\">\n        <!-- D\u1EA3i k\u00E9o: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i, ba ch\u1EA5m l\u00E0 d\u1EA5u hi\u1EC7u k\u00E9o quen thu\u1ED9c.\n             Ng\u01B0\u1EDDi d\u00F9ng c\u1EA7n m\u1ED9t ch\u1ED7 b\u00E1m R\u00D5 R\u00C0NG thay v\u00EC \u0111o\u00E1n xem b\u1EA5m \u0111\u00E2u th\u00EC k\u00E9o \u0111\u01B0\u1EE3c\n             (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng d\u1EA3i \u0111ang d\u00F9ng \u1EDF m\u00E0n Customer 360 c\u1EE7a mobio-web). -->\n        <!-- \uD83D\uDD34 `dragFromAnywhere` b\u1EADt th\u00EC KH\u00D4NG v\u1EBD d\u1EA3i: c\u1EA3 th\u1EBB \u0111\u00E3 l\u00E0 tay c\u1EA7m, \u0111\u1EC3 l\u1EA1i d\u1EA3i ch\u1EC9 th\u1EEBa. -->\n        @if (isEditMode() && !dragFromAnywhere()) {\n          <!-- \uD83D\uDD34 D\u1EA3i PH\u1EA2I mang tay c\u1EA7m \u0110\u00DANG C\u1EA4P c\u1EE7a n\u00F3. D\u1EA3i nh\u1EADn chu\u1ED9t (`pointer-events: auto`),\n               n\u00EAn n\u1EBFu kh\u00F4ng mang tay c\u1EA7m th\u00EC `checkDragHandleClass` duy\u1EC7t l\u00EAn g\u1EB7p tay c\u1EA7m c\u1EE7a\n               container v\u00E0 nh\u1EA5c container thay v\u00EC kh\u1ED1i con (\u0111o 28/08/2026: k\u00E9o d\u1EA3i kh\u1ED1i con,\n               container nh\u1EA3y 0,0 \u2192 0,1 c\u00F2n kh\u1ED1i con \u0111\u1EE9ng im).\n               \uD83D\uDD34 D\u1EA3i CH\u1EC8 mang tay c\u1EA7m, C\u1EA4M mang th\u00EAm class ch\u1EB7n: `checkDragHandleClass` x\u00E9t hai\n               class \u0111\u00F3 tr\u00EAn C\u00D9NG m\u1ED9t node n\u00EAn \u0111\u1EC3 chung l\u00E0 k\u00E9o h\u1ECFng (\u0111o 28/08/2026: b\u1EA5m d\u1EA3i kh\u1ED1i\n               con k\u00E9o 140px, kh\u1ED1i \u0111\u1EE9ng im). Vi\u1EC7c ch\u1EB7n l\u01B0\u1EDBi cha do V\u1ECE KH\u1ED0I lo. -->\n          <div\n            class=\"libs-ui-grid-layout-drag-bar\"\n            [class.libs-ui-grid-layout-drag-bar-child]=\"isNestedCanvas()\"\n            [class.libs-ui-grid-layout-drag-handle]=\"!isNestedCanvas()\"\n            [class.libs-ui-grid-layout-drag-handle-child]=\"isNestedCanvas()\">\n            <span class=\"libs-ui-grid-layout-drag-bar-dots\">\n              @for (dot of dragBarDots; track dot) {\n                <span class=\"libs-ui-grid-layout-drag-bar-dot\"></span>\n              }\n            </span>\n          </div>\n        }\n\n        <!-- Khung ch\u1EE9a component c\u1EE7a n\u01A1i d\u00F9ng.\n             \uD83D\uDD34 PH\u1EA2I c\u00F3 khung th\u1EADt (kh\u00F4ng ph\u1EA3i `ng-container` tr\u1ED1ng): n\u00F3 lo h\u1ED9 n\u01A1i d\u00F9ng ph\u1EA7n l\u1EA5p \u0111\u1EA7y\n             \u00F4 v\u00E0 vi\u1EC1n b\u00E1o ch\u1EBF \u0111\u1ED9 s\u1EEDa. Kh\u00F4ng c\u00F3 khung th\u00EC m\u1ED7i component n\u1ED9i dung l\u1EA1i ph\u1EA3i t\u1EF1 vi\u1EBFt\n             `:host { width/height: 100% }` + vi\u1EC1n \u0111\u1EE9t \u2014 \u0111\u00F3 l\u00E0 vi\u1EC7c c\u1EE7a th\u01B0 vi\u1EC7n, kh\u00F4ng ph\u1EA3i c\u1EE7a\n             ng\u01B0\u1EDDi d\u00F9ng (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026).\n             M\u1ED7i kh\u1ED1i m\u1ED9t ViewContainerRef ri\u00EAng n\u00EAn component n\u1EB1m \u0111\u00FAng \u00F4 c\u1EE7a n\u00F3. -->\n        <!-- \uD83D\uDD34 Container C\u00D3 `getComponentOutlet`: khung n\u00E0y l\u00E0 V\u1ECE, v\u00E0 canvas con \u0111\u01B0\u1EE3c \u0111\u01B0a V\u00C0O TRONG\n             component v\u1ECF qua input `childCanvas` (m\u1ED9t `TemplateRef`) \u2014 xem `ng-template #childCanvasTpl`\n             b\u00EAn d\u01B0\u1EDBi. V\u1ECF t\u1EF1 quy\u1EBFt \u0111\u1EB7t canvas \u1EDF \u0111\u00E2u gi\u1EEFa ti\u00EAu \u0111\u1EC1 v\u00E0 ph\u1EA7n th\u00E2n c\u1EE7a n\u00F3.\n             Tr\u01B0\u1EDBc \u0111\u00E2y canvas con l\u00E0 ANH EM c\u1EE7a khung n\u00E0y, n\u00EAn v\u1ECF chi\u1EBFm tr\u1ECDn chi\u1EC1u cao r\u1ED3i \u0111\u1EA9y to\u00E0n b\u1ED9\n             th\u1EBB con ra ngo\u00E0i v\u00F9ng nh\u00ECn th\u1EA5y (\u0111o 14/09/2026: m\u1ECDi kh\u1ED1i gh\u00E9p ch\u1EC9 c\u00F2n nh\u00E3n v\u00E0 ru\u1ED9t tr\u1EAFng). -->\n        <div\n          class=\"libs-ui-grid-layout-content-frame\"\n          [class.libs-ui-grid-layout-content-frame-edit]=\"isEditMode() && !isContainer(item)\"\n          [class.libs-ui-grid-layout-content-frame-empty]=\"isContainer(item) && !item.getComponentOutlet\">\n          <ng-container #itemHost />\n        </div>\n\n        <!-- D\u1EA5u hi\u1EC7u CONTAINER: nh\u00E3n g\u00F3c tr\u00EAn-ph\u1EA3i + vi\u1EC1n \u0111\u1EE9t bao ru\u1ED9t. Kh\u00F4ng c\u00F3 d\u1EA5u hi\u1EC7u th\u00EC\n             ng\u01B0\u1EDDi d\u00F9ng kh\u00F4ng bi\u1EBFt kh\u1ED1i n\u00E0o ch\u1EE9a \u0111\u01B0\u1EE3c kh\u1ED1i kh\u00E1c (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng c\u00E1ch\n             m\u00E0n Customer 360 c\u1EE7a mobio-web \u0111ang l\u00E0m). -->\n        @if (isEditMode() && isContainer(item)) {\n          <div class=\"libs-ui-grid-layout-container-label\">{{ 'i18n_container_block' | translate }}</div>\n          <div class=\"libs-ui-grid-layout-container-border\"></div>\n        }\n\n        <!-- Thanh c\u00F4ng c\u1EE5: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i.\n             \uD83D\uDD34 D\u00F9ng `libs_ui-components-buttons-button` \u2014 C\u1EA4M t\u1EF1 d\u1EF1ng th\u1EBB `<button>`.\n             Component n\u00E0y \u0111\u00E3 c\u00F3 s\u1EB5n ki\u1EC3u n\u00FAt, c\u1EE1 n\u00FAt v\u00E0 bong b\u00F3ng ch\u00FA th\u00EDch theo \u0111\u00FAng b\u1ED9 giao di\u1EC7n\n             c\u1EE7a s\u1EA3n ph\u1EA9m; t\u1EF1 d\u1EF1ng l\u00E0 m\u1ED7i n\u01A1i m\u1ED9t ki\u1EC3u v\u00E0 m\u1EA5t lu\u00F4n tooltip. -->\n        @if (isEditMode() && !hiddenToolbar()) {\n          @if (templateToolbar()) {\n            <!-- N\u01A1i d\u00F9ng t\u1EF1 v\u1EBD thanh c\u00F4ng c\u1EE5: nh\u1EADn kh\u1ED1i + c\u00E1c h\u00E0m ph\u00E1t event qua context.\n\n                 \uD83D\uDD34 Kh\u1ED1i b\u1ECDc t\u1EF1 ch\u1EB7n `mousedown`/`click` n\u1ED5i l\u00EAn gridster. Thanh c\u00F4ng c\u1EE5 n\u1EB1m trong\n                 v\u00F9ng mang `dragHandleClass`; kh\u00F4ng ch\u1EB7n th\u00EC c\u00FA b\u1EA5m b\u1ECB hi\u1EC3u l\u00E0 b\u1EAFt \u0111\u1EA7u k\u00E9o v\u00E0\n                 `delayStart: 160` nu\u1ED1t lu\u00F4n `click` \u2014 n\u00FAt trong template ngo\u00E0i b\u1EA5m kh\u00F4ng \u0103n\n                 (\u0111o 09/09/2026: b\u1EA5m b\u1EB1ng `.click()` c\u1EE7a DOM th\u00EC m\u1EDF, b\u1EA5m chu\u1ED9t th\u1EADt th\u00EC kh\u00F4ng).\n                 Ch\u1EB7n \u1EDF \u0110\u00C2Y \u0111\u1EC3 n\u01A1i d\u00F9ng kh\u00F4ng ph\u1EA3i bi\u1EBFt b\u1EABy n\u00E0y. -->\n            <div\n              class=\"libs-ui-grid-layout-toolbar\"\n              role=\"toolbar\"\n              tabindex=\"0\"\n              [class.libs-ui-grid-layout-toolbar-child]=\"isNestedCanvas()\"\n              (mousedown)=\"handlerStopEvent($event)\"\n              (keydown)=\"handlerStopEvent($event)\"\n              (click)=\"handlerStopEvent($event)\">\n              <ng-container\n                *ngTemplateOutlet=\"templateToolbar()!; context: toolbarContexts()[itemIndex]\" />\n            </div>\n          } @else {\n            <div\n              class=\"libs-ui-grid-layout-toolbar\"\n              [class.libs-ui-grid-layout-toolbar-child]=\"isNestedCanvas()\">\n              <span class=\"libs-ui-grid-layout-dim-badge\">\n                {{ item.rows }} h\u00E0ng \u00D7 {{ item.cols }} c\u1ED9t\n              </span>\n              @if (canAddInside(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"'libs-ui-icon-add'\"\n                  [popover]=\"{ config: { content: 'Th\u00EAm kh\u1ED1i v\u00E0o trong', zIndex: 1300 } }\"\n                  (outClick)=\"handlerAddInside($event, item)\" />\n              }\n              @if (canToggleType(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"isContainer(item) ? 'libs-ui-icon-split-cell' : 'libs-ui-icon-merge-cell'\"\n                  [popover]=\"{ config: { content: isContainer(item) ? '\u0110\u01B0a v\u1EC1 kh\u1ED1i \u0111\u01A1n' : 'Chuy\u1EC3n th\u00E0nh kh\u1ED1i gh\u00E9p', zIndex: 1300 } }\"\n                  (outClick)=\"handlerToggleType($event, item)\" />\n              }\n              <libs_ui-components-buttons-button\n                [type]=\"'button-third'\"\n                [iconOnlyType]=\"true\"\n                [sizeButton]=\"'smaller'\"\n                [classIconLeft]=\"'libs-ui-icon-setting'\"\n                [popover]=\"{ config: { content: 'C\u1EA5u h\u00ECnh th\u1EBB', zIndex: 1300 } }\"\n                (outClick)=\"handlerConfig($event, item)\" />\n              <libs_ui-components-buttons-button\n                [type]=\"'button-third-hover-danger'\"\n                [iconOnlyType]=\"true\"\n                [sizeButton]=\"'smaller'\"\n                [classIconLeft]=\"'libs-ui-icon-remove'\"\n                [popover]=\"{ config: { content: isContainer(item) ? 'Xo\u00E1 c\u1EA3 kh\u1ED1i gh\u00E9p' : 'Xo\u00E1 kh\u1ED1i', zIndex: 1300 } }\"\n                (outClick)=\"handlerRemove($event, item)\" />\n            </div>\n          }\n        }\n\n        @if (item.children && item.children.length > 0) {\n          <!-- Kh\u1ED1i c\u00F3 con \u2192 ru\u1ED9t n\u00F3 l\u1EA1i l\u00E0 m\u1ED9t m\u1EB7t ph\u1EB3ng n\u1EEFa. \u0110\u1EC7 quy \u1EDF \u0111\u00E2y, n\u01A1i d\u00F9ng kh\u00F4ng ph\u1EA3i lo.\n               L\u1EC1 \u0111\u1EB7t \u1EDF \u0110\u00C2Y (v\u1ECF container), kh\u00F4ng \u0111\u1EB7t v\u00E0o l\u01B0\u1EDBi con \u2014 l\u01B0\u1EDBi con gi\u1EEF nguy\u00EAn khe 2px.\n\n               \uD83D\uDD34 Khu\u00F4n \u0111\u1EB7t trong `ng-template` \u0111\u1EC3 \u0111i \u0111\u01B0\u1EE3c HAI \u0111\u01B0\u1EDDng:\n               - Container KH\u00D4NG c\u00F3 v\u1ECF ri\u00EAng \u2192 v\u1EBD th\u1EB3ng t\u1EA1i \u0111\u00E2y, y nh\u01B0 tr\u01B0\u1EDBc.\n               - Container C\u00D3 `getComponentOutlet` \u2192 th\u01B0 vi\u1EC7n truy\u1EC1n khu\u00F4n n\u00E0y xu\u1ED1ng component v\u1ECF qua\n                 input `childCanvas`, v\u1ECF t\u1EF1 \u0111\u1EB7t n\u00F3 v\u00E0o gi\u1EEFa ti\u00EAu \u0111\u1EC1 v\u00E0 ph\u1EA7n th\u00E2n c\u1EE7a m\u00ECnh. V\u1EBD th\u00EAm \u1EDF\n                 \u0111\u00E2y n\u1EEFa l\u00E0 hai m\u1EB7t ph\u1EB3ng l\u1ED3ng ch\u1ED3ng nhau. -->\n          <ng-template #childCanvasTpl>\n            <libs_ui-services-grid_layout-canvas\n              class=\"block h-full w-full\"\n              [style.padding]=\"containerPadding()\"\n              [node]=\"item\"\n              [depth]=\"depth() + 1\"\n              [dragFromAnywhere]=\"dragFromAnywhere()\"\n              [nestedScrollbar]=\"nestedScrollbar()\"\n              [hiddenToolbar]=\"hiddenToolbar()\"\n              [templateToolbar]=\"templateToolbar()\"\n              [selectedNodeId]=\"selectedNodeId()\"\n              (outSelectNode)=\"outSelectNode.emit($event)\"\n              (outConfigNode)=\"outConfigNode.emit($event)\"\n              (outChange)=\"outChange.emit($event)\"\n              (outRemoveNode)=\"outRemoveNode.emit($event)\"\n              (outAddBlockInside)=\"outAddBlockInside.emit($event)\"\n              (outToggleType)=\"outToggleType.emit($event)\" />\n          </ng-template>\n\n          @if (!item.getComponentOutlet) {\n            <ng-container [ngTemplateOutlet]=\"childCanvasTpl\" />\n          }\n        }\n      </div>\n    </gridster-item>\n  }\n      </gridster>\n    </div>\n  </div>\n\n  <!-- Thanh dock \u0111i\u1EC1u khi\u1EC3n thu ph\u00F3ng n\u1ED5i \u1EDF g\u00F3c d\u01B0\u1EDBi tr\u00E1i -->\n  @if (showZoomDock()) {\n    <div\n      #zoomDock\n      id=\"canvas-zoom-dock\"\n      role=\"toolbar\"\n      tabindex=\"0\"\n      class=\"absolute bottom-4 left-6 z-30 flex items-center bg-white rounded-full shadow-2xl border-2 border-slate-400 p-1 space-x-1 select-none\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (keydown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation()\">\n      <!-- Thu nh\u1ECF (-) -->\n      <button\n        type=\"button\"\n        class=\"w-[28px] h-[28px] flex items-center justify-center rounded-full text-slate-700 hover:text-slate-900 hover:bg-slate-200 disabled:opacity-30 disabled:hover:bg-transparent transition-colors cursor-pointer\"\n        [disabled]=\"currentZoom() <= zoomMin()\"\n        [title]=\"'i18n_zoom_out' | translate\"\n        (click)=\"handlerZoomOut()\">\n        <svg class=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/></svg>\n      </button>\n\n      <!-- T\u1EF7 l\u1EC7 % v\u00E0 menu preset -->\n      <div class=\"relative\">\n        <button\n          type=\"button\"\n          class=\"h-[28px] px-2 flex items-center gap-1 rounded-full text-xs font-semibold text-slate-700 hover:bg-slate-200 transition-colors cursor-pointer\"\n          [title]=\"'i18n_zoom_options' | translate\"\n          (click)=\"handlerToggleMenu()\">\n          <span>{{ zoomPercent() }}%</span>\n          <svg class=\"w-[12px] h-[12px] text-slate-400 transition-transform duration-150\" [class.rotate-180]=\"isMenuOpen()\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"/></svg>\n        </button>\n\n        <!-- Menu dropdown c\u00E1c m\u1ED1c thu ph\u00F3ng -->\n        @if (isMenuOpen()) {\n          <div class=\"absolute bottom-full mb-2 left-0 w-[256px] bg-white rounded-xl shadow-xl border border-slate-200 py-1.5 z-40 text-xs select-none\">\n            <div class=\"px-3 py-1 text-[11px] font-semibold text-slate-400 uppercase tracking-wider\">\n              {{ 'i18n_zoom_canvas_width' | translate: { width: stageWidth() } }}\n            </div>\n            <button\n              type=\"button\"\n              class=\"w-full px-3 py-2 text-left flex items-center justify-between hover:bg-slate-50 transition-colors cursor-pointer\"\n              (click)=\"handlerFitScreen()\">\n              <span class=\"flex items-center gap-2 text-slate-700 font-medium\">\n                <svg class=\"w-3.5 h-3.5 text-slate-600\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" y1=\"3\" x2=\"14\" y2=\"10\"/><line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"/></svg>\n                {{ 'i18n_zoom_fit_screen' | translate }}\n              </span>\n              <span class=\"text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded font-medium\">{{ 'i18n_auto' | translate }}</span>\n            </button>\n            <div class=\"h-px bg-slate-100 my-1\"></div>\n            @for (preset of zoomPresets; track preset.value) {\n              <button\n                type=\"button\"\n                class=\"w-full px-3 py-1.5 text-left flex items-center justify-between hover:bg-slate-50 transition-colors cursor-pointer\"\n                [class.text-blue-600]=\"isCurrentPreset(preset.value)\"\n                [class.font-semibold]=\"isCurrentPreset(preset.value)\"\n                [class.bg-blue-50]=\"isCurrentPreset(preset.value)\"\n                (click)=\"handlerSelectPreset(preset.value)\">\n                <span class=\"text-slate-700\" [class.text-blue-600]=\"isCurrentPreset(preset.value)\">\n                  {{ preset.label | translate }}\n                </span>\n                @if (isCurrentPreset(preset.value)) {\n                  <svg class=\"w-3.5 h-3.5 text-blue-600\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>\n                }\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Ph\u00F3ng to (+) -->\n      <button\n        type=\"button\"\n        class=\"w-[28px] h-[28px] flex items-center justify-center rounded-full text-slate-700 hover:text-slate-900 hover:bg-slate-200 disabled:opacity-30 disabled:hover:bg-transparent transition-colors cursor-pointer\"\n        [disabled]=\"currentZoom() >= zoomMax()\"\n        [title]=\"'i18n_zoom_in' | translate\"\n        (click)=\"handlerZoomIn()\">\n        <svg class=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/></svg>\n      </button>\n\n      <!-- Ph\u00E2n c\u00E1ch -->\n      <div class=\"h-[16px] w-px bg-slate-200\"></div>\n\n      <!-- N\u00FAt V\u1EEBa m\u00E0n h\u00ECnh nhanh -->\n      <button\n        type=\"button\"\n        class=\"h-[28px] shrink-0 px-2.5 flex items-center gap-1 rounded-full text-xs text-slate-700 hover:text-slate-900 hover:bg-slate-200 transition-colors cursor-pointer\"\n        [title]=\"'i18n_zoom_fit_screen_tooltip' | translate\"\n        (click)=\"handlerFitScreen()\">\n        <svg class=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" y1=\"3\" x2=\"14\" y2=\"10\"/><line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\"/></svg>\n        <span class=\"whitespace-nowrap font-medium\">{{ 'i18n_zoom_fit_screen' | translate }}</span>\n      </button>\n\n      <!-- N\u00FAt \u0110\u1EB7t l\u1EA1i 100% (ch\u1EC9 hi\u1EC7n khi kh\u00E1c 100%) -->\n      @if (zoomPercent() !== 100) {\n        <button\n          type=\"button\"\n          class=\"h-[28px] px-2 flex items-center gap-1 rounded-full text-xs font-semibold text-blue-600 hover:bg-blue-50 transition-colors cursor-pointer\"\n          [title]=\"'i18n_zoom_reset_tooltip' | translate: { width: stageWidth(), height: stageMinHeight() }\"\n          (click)=\"handlerResetZoom()\">\n          <svg class=\"w-[12px] h-[12px]\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"1 4 1 10 7 10\"/><path d=\"M3.51 15a9 9 0 1 0 2.13-9.36L1 10\"/></svg>\n          <span>100%</span>\n        </button>\n      }\n    </div>\n  }\n} @else {\n  <!-- \uD83D\uDD34 `relative` l\u00E0 B\u1EAET BU\u1ED8C, C\u1EA4M b\u1ECF.\n       gridster \u0111\u1ED5i v\u1ECB tr\u00ED chu\u1ED9t th\u00E0nh \u00F4 l\u01B0\u1EDBi b\u1EB1ng `e.clientY + (el.scrollTop - el.offsetTop)` \u2014 c\u00F4ng\n       th\u1EE9c \u0111\u00F3 ch\u1EC9 \u0111\u00FAng khi `offsetParent` c\u1EE7a <gridster> CH\u00CDNH L\u00C0 kh\u1ED1i cu\u1ED9n n\u00E0y. Thi\u1EBFu `relative` th\u00EC\n       `offsetParent` nh\u1EA3y l\u00EAn kh\u1ED1i bao ngo\u00E0i: `offsetTop` tr\u1EA3 16 trong khi l\u1EC7ch th\u1EADt l\u00E0 65 \u2192 gridster\n       t\u00EDnh \u00F4 sai 49px, \u00F4 ch\u1EDD \u0111\u1EB7t hi\u1EC7n l\u1EC7ch kh\u1ECFi con tr\u1ECF n\u00EAn k\u00E9o th\u1EA3 kh\u00F4ng \u0111\u1ED5i \u0111\u01B0\u1EE3c v\u1ECB tr\u00ED, v\u00E0 k\u00E9o m\u00E9p\n       c\u0169ng t\u00EDnh sai \u0111i\u1EC3m d\u1EEBng. -->\n  <!-- \uD83D\uDD34 `ignoreInit` l\u00E0 c\u00F4ng t\u1EAFc B\u1EACT/T\u1EAET c\u1EE7a thanh cu\u1ED9n n\u1ED5i: directive kh\u00F4ng th\u1EC3 g\u1EAFn c\u00F3 \u0111i\u1EC1u ki\u1EC7n,\n       n\u00EAn khi t\u1EAFt ph\u1EA3i ch\u1EB7n ngay \u1EDF \u0111\u00E2y \u2014 b\u1EADt r\u1ED3i m\u1EDBi b\u1ECDc th\u00EAm `div.libs-ui-scroll-overlay-container`.\n       Nh\u1EDD v\u1EADy m\u1EB7t ph\u1EB3ng G\u1ED0C c\u1EE7a n\u01A1i d\u00F9ng kh\u00E1c gi\u1EEF nguy\u00EAn c\u1EA5u tr\u00FAc DOM nh\u01B0 tr\u01B0\u1EDBc. -->\n  <div\n    #scrollArea\n    class=\"libs-ui-grid-layout-scroll-area relative h-full min-h-0 w-full min-w-0\"\n    [class.overflow-y-auto]=\"!isNestedCanvas()\"\n    LibsUiComponentsScrollOverlayDirective\n    [ignoreInit]=\"!showNestedScrollbar()\"\n    [options]=\"nestedScrollOverlayOptions\"\n    (mousedown)=\"handlerMouseDownTrongLuoi($event)\"\n    (pointerdown)=\"handlerScrollAreaPointerDown()\"\n    (dragover)=\"handlerDragOver($event)\"\n    (dragleave)=\"handlerDragLeave($event)\"\n    (drop)=\"handlerDrop($event)\">\n    <!-- Snapped Drop Ghost Preview -->\n    @if (dropGhost(); as ghost) {\n      <div\n        class=\"pointer-events-none absolute z-30 flex flex-col items-center justify-center overflow-hidden rounded-lg border-2 border-dashed border-blue-500 bg-blue-500/15 p-1 shadow-sm transition-all duration-75 ease-out backdrop-blur-[0.5px] select-none\"\n        [style.left.px]=\"ghost.pixelLeft\"\n        [style.top.px]=\"ghost.pixelTop\"\n        [style.width.px]=\"ghost.pixelWidth\"\n        [style.height.px]=\"ghost.pixelHeight\">\n        <div class=\"inline-flex max-w-[95%] items-center gap-1 truncate rounded-md bg-blue-600 px-2 py-0.5 text-[11px] font-semibold text-white shadow-xs\">\n          @if (ghost.cardIconClass) {\n            <i [class]=\"ghost.cardIconClass + ' text-xs'\"></i>\n          } @else if (ghost.cardIconText) {\n            <span class=\"text-[10px] font-bold\">{{ ghost.cardIconText }}</span>\n          } @else {\n            <span class=\"text-xs font-bold\">{{ ghost.isInsideGroup ? '\u21B3' : '+' }}</span>\n          }\n          <span class=\"truncate\">{{ ghost.cardTitle }}</span>\n          <span class=\"text-[9px] font-mono opacity-75\">({{ ghost.cols }}c)</span>\n        </div>\n\n        @if (ghost.pixelHeight >= 80) {\n          <div class=\"mt-1 flex max-w-[95%] items-center gap-1.5 truncate rounded border border-blue-100 bg-white/95 px-2 py-0.5 text-[10px] font-medium text-blue-700 shadow-xs\">\n            @if (ghost.isInsideGroup) {\n              <span class=\"truncate font-bold text-blue-900\">\u21B3 {{ ghost.groupTitle }}</span>\n              <span class=\"text-blue-300\">\u2022</span>\n            }\n            <span>C\u1ED9t {{ ghost.col + 1 }}-{{ ghost.col + ghost.cols }}</span>\n          </div>\n        }\n      </div>\n    }\n    <gridster\n      class=\"h-full w-full\"\n      [class.display-grid]=\"showGridLines()\"\n      [class.libs-ui-grid-layout-drag-anywhere]=\"dragFromAnywhere()\"\n      [options]=\"gridOptions()\">\n        @for (item of children(); track item.id; let itemIndex = $index) {\n    <!-- \uD83D\uDD34 Ch\u1EB7n `mousedown` t\u1EA1i \u0110\u00C2Y cho l\u01B0\u1EDBi l\u1ED3ng \u2014 C\u1EA4M b\u1ECF v\u00E0 C\u1EA4M chuy\u1EC3n sang ch\u1ED7 kh\u00E1c.\n         `ignoreContentClass` m\u1ED9t m\u00ECnh KH\u00D4NG \u0111\u1EE7: `delayStart: 160` l\u00E0m M\u1ED6I l\u01B0\u1EDBi l\u00EAn l\u1ECBch\n         `dragStart` b\u1EB1ng `setTimeout` ngay t\u1EA1i `mousedown`, c\u00F2n `stopPropagation` m\u00E0 lib g\u1ECDi b\u00EAn\n         trong `dragStart` ch\u1EA1y sau 160ms n\u00EAn qu\u00E1 mu\u1ED9n \u2014 l\u01B0\u1EDBi CHA \u0111\u00E3 k\u1ECBp nh\u1EADn (\u0111o 28/08/2026: k\u00E9o\n         d\u1EA3i kh\u1ED1i con, chu\u1ED7i class duy\u1EC7t l\u00EAn \u0110\u00DANG m\u00E0 container v\u1EABn nh\u1EA3y 0,0 \u2192 0,1).\n         G\u1EAFn \u1EDF `gridster-item` l\u00E0 \u0111\u00FAng bi\u00EAn: l\u01B0\u1EDBi con nghe tr\u00EAn ch\u00EDnh ph\u1EA7n t\u1EED n\u00E0y n\u00EAn \u0111\u00E3 nh\u1EADn xong,\n         l\u01B0\u1EDBi cha \u1EDF ngo\u00E0i b\u1ECB ch\u1EB7n. -->\n    <gridster-item\n      [item]=\"item\"\n      [class.libs-ui-grid-layout-selected]=\"selectedNodeId() === item.id\"\n      (click)=\"handlerSelectNode(item, $event)\"\n      (mousedown)=\"handlerBlockParentDrag($event)\">\n      <!-- \uD83D\uDD34 V\u1ECF n\u00E0y mang `dragHandleClass` \u2014 C\u1EA4M b\u1ECF.\n           `ignoreContent: true` b\u1EAFt gridster CH\u1EC8 cho k\u00E9o khi ch\u1ED7 b\u1EA5m n\u1EB1m d\u01B0\u1EDBi m\u1ED9t ph\u1EA7n t\u1EED c\u00F3\n           `dragHandleClass`. Kh\u00F4ng c\u00F3 v\u1ECF n\u00E0y th\u00EC component c\u1EE7a n\u01A1i d\u00F9ng (th\u01B0 vi\u1EC7n kh\u00F4ng ki\u1EC3m so\u00E1t\n           \u0111\u01B0\u1EE3c class c\u1EE7a n\u00F3) s\u1EBD kh\u00F4ng c\u00F3 tay c\u1EA7m n\u00E0o, v\u00E0 KH\u00D4NG kh\u1ED1i n\u00E0o k\u00E9o \u0111\u01B0\u1EE3c \u2014 \u0111o 28/08/2026:\n           k\u00E9o 320px, to\u1EA1 \u0111\u1ED9 kh\u1ED1i gi\u1EEF nguy\u00EAn x=3,y=0.\n           T\u00EAn class theo c\u1EA5p: l\u01B0\u1EDBi trang v\u00E0 l\u01B0\u1EDBi l\u1ED3ng d\u00F9ng hai t\u00EAn KH\u00C1C nhau, n\u1EBFu kh\u00F4ng l\u01B0\u1EDBi cha\n           c\u0169ng nh\u1EADn ra tay c\u1EA7m c\u1EE7a kh\u1ED1i con v\u00E0 nh\u1EA5c lu\u00F4n container. -->\n      <!-- \uD83D\uDD34 V\u1ECF KH\u00D4NG mang `dragHandleClass` \u2014 C\u1EA4M th\u00EAm l\u1EA1i.\n           K\u00E9o ch\u1EC9 \u0111\u01B0\u1EE3c ph\u00E9p b\u1EAFt \u0111\u1EA7u t\u1EEB D\u1EA2I XANH (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026: \"ph\u1EA3i hover v\u00E0o v\u00F9ng\n           m\u00E0u xanh th\u00EC m\u1EDBi k\u00E9o th\u1EA3 \u0111\u01B0\u1EE3c cho \u0111\u1ED3ng nh\u1EA5t\"). Cho c\u1EA3 v\u1ECF l\u00E0m tay c\u1EA7m th\u00EC b\u1EA5m \u0111\u00E2u c\u0169ng\n           k\u00E9o, v\u00E0 kh\u1ED1i con n\u1EB1m trong container s\u1EBD nh\u1EA5c lu\u00F4n container v\u00EC l\u01B0\u1EDBi cha duy\u1EC7t l\u00EAn g\u1EB7p\n           tay c\u1EA7m c\u1EE7a v\u1ECF container tr\u01B0\u1EDBc.\n           V\u1ECF kh\u1ED1i con v\u1EABn gi\u1EEF class CH\u1EB6N \u0111\u1EC3 l\u01B0\u1EDBi cha d\u1EEBng \u0111\u00FAng \u1EDF bi\u00EAn. -->\n      <!-- \uD83D\uDD34 `dragFromAnywhere` b\u1EADt th\u00EC B\u1ECE class ch\u1EB7n \u2014 C\u1EA4M g\u1EAFn l\u1EA1i v\u00F4 \u0111i\u1EC1u ki\u1EC7n.\n           `libs-ui-grid-layout-block-parent-drag` CH\u00CDNH L\u00C0 `ignoreContentClass` c\u1EE7a gridster (xem\n           `gridster-config.define`). V\u1EDBi `ignoreContent: true` n\u00F3 ch\u1EC9 mang ngh\u0129a \"kh\u00F4ng ph\u1EA3i tay\n           c\u1EA7m\"; nh\u01B0ng v\u1EDBi `ignoreContent: false` (ch\u1EBF \u0111\u1ED9 c\u1EA7m-c\u1EA3-th\u1EBB) gridster hi\u1EC3u l\u00E0 \"v\u00F9ng C\u1EA4M\n           k\u00E9o\": duy\u1EC7t t\u1EEB ch\u1ED7 b\u1EA5m l\u00EAn g\u1EB7p class n\u00E0y l\u00E0 d\u1EEBng h\u1EB3n, n\u00EAn KH\u1ED0I CON trong kh\u1ED1i gh\u00E9p b\u1EA5m\n           v\u00E0o \u0111\u00E2u c\u0169ng kh\u00F4ng nh\u00FAc nh\u00EDch (ng\u01B0\u1EDDi d\u00F9ng ch\u1EC9 ra 15/09/2026; \u0111o \u0111\u01B0\u1EE3c k\u00E9o 150px m\u00E0 kh\u1ED1i\n           l\u1EC7ch 0px). Ch\u1EB7n l\u01B0\u1EDBi cha \u1EDF ch\u1EBF \u0111\u1ED9 n\u00E0y do `handlerBlockParentDrag` tr\u00EAn ch\u00EDnh\n           `gridster-item` lo, kh\u00F4ng c\u1EA7n class n\u00E0y. -->\n      <div\n        class=\"libs-ui-grid-layout-block-shell group relative h-full w-full min-w-0\"\n        [attr.data-node-id]=\"item.id\"\n        [class.libs-ui-grid-layout-block-parent-drag]=\"isNestedCanvas() && !dragFromAnywhere()\">\n        <!-- D\u1EA3i k\u00E9o: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i, ba ch\u1EA5m l\u00E0 d\u1EA5u hi\u1EC7u k\u00E9o quen thu\u1ED9c.\n             Ng\u01B0\u1EDDi d\u00F9ng c\u1EA7n m\u1ED9t ch\u1ED7 b\u00E1m R\u00D5 R\u00C0NG thay v\u00EC \u0111o\u00E1n xem b\u1EA5m \u0111\u00E2u th\u00EC k\u00E9o \u0111\u01B0\u1EE3c\n             (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng d\u1EA3i \u0111ang d\u00F9ng \u1EDF m\u00E0n Customer 360 c\u1EE7a mobio-web). -->\n        <!-- \uD83D\uDD34 `dragFromAnywhere` b\u1EADt th\u00EC KH\u00D4NG v\u1EBD d\u1EA3i: c\u1EA3 th\u1EBB \u0111\u00E3 l\u00E0 tay c\u1EA7m, \u0111\u1EC3 l\u1EA1i d\u1EA3i ch\u1EC9 th\u1EEBa. -->\n        @if (isEditMode() && !dragFromAnywhere()) {\n          <!-- \uD83D\uDD34 D\u1EA3i PH\u1EA2I mang tay c\u1EA7m \u0110\u00DANG C\u1EA4P c\u1EE7a n\u00F3. D\u1EA3i nh\u1EADn chu\u1ED9t (`pointer-events: auto`),\n               n\u00EAn n\u1EBFu kh\u00F4ng mang tay c\u1EA7m th\u00EC `checkDragHandleClass` duy\u1EC7t l\u00EAn g\u1EB7p tay c\u1EA7m c\u1EE7a\n               container v\u00E0 nh\u1EA5c container thay v\u00EC kh\u1ED1i con (\u0111o 28/08/2026: k\u00E9o d\u1EA3i kh\u1ED1i con,\n               container nh\u1EA3y 0,0 \u2192 0,1 c\u00F2n kh\u1ED1i con \u0111\u1EE9ng im).\n               \uD83D\uDD34 D\u1EA3i CH\u1EC8 mang tay c\u1EA7m, C\u1EA4M mang th\u00EAm class ch\u1EB7n: `checkDragHandleClass` x\u00E9t hai\n               class \u0111\u00F3 tr\u00EAn C\u00D9NG m\u1ED9t node n\u00EAn \u0111\u1EC3 chung l\u00E0 k\u00E9o h\u1ECFng (\u0111o 28/08/2026: b\u1EA5m d\u1EA3i kh\u1ED1i\n               con k\u00E9o 140px, kh\u1ED1i \u0111\u1EE9ng im). Vi\u1EC7c ch\u1EB7n l\u01B0\u1EDBi cha do V\u1ECE KH\u1ED0I lo. -->\n          <div\n            class=\"libs-ui-grid-layout-drag-bar\"\n            [class.libs-ui-grid-layout-drag-bar-child]=\"isNestedCanvas()\"\n            [class.libs-ui-grid-layout-drag-handle]=\"!isNestedCanvas()\"\n            [class.libs-ui-grid-layout-drag-handle-child]=\"isNestedCanvas()\">\n            <span class=\"libs-ui-grid-layout-drag-bar-dots\">\n              @for (dot of dragBarDots; track dot) {\n                <span class=\"libs-ui-grid-layout-drag-bar-dot\"></span>\n              }\n            </span>\n          </div>\n        }\n\n        <!-- Khung ch\u1EE9a component c\u1EE7a n\u01A1i d\u00F9ng.\n             \uD83D\uDD34 PH\u1EA2I c\u00F3 khung th\u1EADt (kh\u00F4ng ph\u1EA3i `ng-container` tr\u1ED1ng): n\u00F3 lo h\u1ED9 n\u01A1i d\u00F9ng ph\u1EA7n l\u1EA5p \u0111\u1EA7y\n             \u00F4 v\u00E0 vi\u1EC1n b\u00E1o ch\u1EBF \u0111\u1ED9 s\u1EEDa. Kh\u00F4ng c\u00F3 khung th\u00EC m\u1ED7i component n\u1ED9i dung l\u1EA1i ph\u1EA3i t\u1EF1 vi\u1EBFt\n             `:host { width/height: 100% }` + vi\u1EC1n \u0111\u1EE9t \u2014 \u0111\u00F3 l\u00E0 vi\u1EC7c c\u1EE7a th\u01B0 vi\u1EC7n, kh\u00F4ng ph\u1EA3i c\u1EE7a\n             ng\u01B0\u1EDDi d\u00F9ng (ng\u01B0\u1EDDi d\u00F9ng ch\u1ED1t 28/08/2026).\n             M\u1ED7i kh\u1ED1i m\u1ED9t ViewContainerRef ri\u00EAng n\u00EAn component n\u1EB1m \u0111\u00FAng \u00F4 c\u1EE7a n\u00F3. -->\n        <!-- \uD83D\uDD34 Container C\u00D3 `getComponentOutlet`: khung n\u00E0y l\u00E0 V\u1ECE, v\u00E0 canvas con \u0111\u01B0\u1EE3c \u0111\u01B0a V\u00C0O TRONG\n             component v\u1ECF qua input `childCanvas` (m\u1ED9t `TemplateRef`) \u2014 xem `ng-template #childCanvasTpl`\n             b\u00EAn d\u01B0\u1EDBi. V\u1ECF t\u1EF1 quy\u1EBFt \u0111\u1EB7t canvas \u1EDF \u0111\u00E2u gi\u1EEFa ti\u00EAu \u0111\u1EC1 v\u00E0 ph\u1EA7n th\u00E2n c\u1EE7a n\u00F3.\n             Tr\u01B0\u1EDBc \u0111\u00E2y canvas con l\u00E0 ANH EM c\u1EE7a khung n\u00E0y, n\u00EAn v\u1ECF chi\u1EBFm tr\u1ECDn chi\u1EC1u cao r\u1ED3i \u0111\u1EA9y to\u00E0n b\u1ED9\n             th\u1EBB con ra ngo\u00E0i v\u00F9ng nh\u00ECn th\u1EA5y (\u0111o 14/09/2026: m\u1ECDi kh\u1ED1i gh\u00E9p ch\u1EC9 c\u00F2n nh\u00E3n v\u00E0 ru\u1ED9t tr\u1EAFng). -->\n        <div\n          class=\"libs-ui-grid-layout-content-frame\"\n          [class.libs-ui-grid-layout-content-frame-edit]=\"isEditMode() && !isContainer(item)\"\n          [class.libs-ui-grid-layout-content-frame-empty]=\"isContainer(item) && !item.getComponentOutlet\">\n          <ng-container #itemHost />\n        </div>\n\n        <!-- D\u1EA5u hi\u1EC7u CONTAINER: nh\u00E3n g\u00F3c tr\u00EAn-ph\u1EA3i + vi\u1EC1n \u0111\u1EE9t bao ru\u1ED9t. Kh\u00F4ng c\u00F3 d\u1EA5u hi\u1EC7u th\u00EC\n             ng\u01B0\u1EDDi d\u00F9ng kh\u00F4ng bi\u1EBFt kh\u1ED1i n\u00E0o ch\u1EE9a \u0111\u01B0\u1EE3c kh\u1ED1i kh\u00E1c (ch\u1ED1t 28/08/2026, theo \u0111\u00FAng c\u00E1ch\n             m\u00E0n Customer 360 c\u1EE7a mobio-web \u0111ang l\u00E0m). -->\n        @if (isEditMode() && isContainer(item)) {\n          <div class=\"libs-ui-grid-layout-container-label\">{{ 'i18n_container_block' | translate }}</div>\n          <div class=\"libs-ui-grid-layout-container-border\"></div>\n        }\n\n        <!-- Thanh c\u00F4ng c\u1EE5: hi\u1EC7n khi r\u00EA chu\u1ED9t v\u00E0o kh\u1ED1i.\n             \uD83D\uDD34 D\u00F9ng `libs_ui-components-buttons-button` \u2014 C\u1EA4M t\u1EF1 d\u1EF1ng th\u1EBB `<button>`.\n             Component n\u00E0y \u0111\u00E3 c\u00F3 s\u1EB5n ki\u1EC3u n\u00FAt, c\u1EE1 n\u00FAt v\u00E0 bong b\u00F3ng ch\u00FA th\u00EDch theo \u0111\u00FAng b\u1ED9 giao di\u1EC7n\n             c\u1EE7a s\u1EA3n ph\u1EA9m; t\u1EF1 d\u1EF1ng l\u00E0 m\u1ED7i n\u01A1i m\u1ED9t ki\u1EC3u v\u00E0 m\u1EA5t lu\u00F4n tooltip. -->\n        @if (isEditMode() && !hiddenToolbar()) {\n          @if (templateToolbar()) {\n            <!-- N\u01A1i d\u00F9ng t\u1EF1 v\u1EBD thanh c\u00F4ng c\u1EE5: nh\u1EADn kh\u1ED1i + c\u00E1c h\u00E0m ph\u00E1t event qua context.\n\n                 \uD83D\uDD34 Kh\u1ED1i b\u1ECDc t\u1EF1 ch\u1EB7n `mousedown`/`click` n\u1ED5i l\u00EAn gridster. Thanh c\u00F4ng c\u1EE5 n\u1EB1m trong\n                 v\u00F9ng mang `dragHandleClass`; kh\u00F4ng ch\u1EB7n th\u00EC c\u00FA b\u1EA5m b\u1ECB hi\u1EC3u l\u00E0 b\u1EAFt \u0111\u1EA7u k\u00E9o v\u00E0\n                 `delayStart: 160` nu\u1ED1t lu\u00F4n `click` \u2014 n\u00FAt trong template ngo\u00E0i b\u1EA5m kh\u00F4ng \u0103n\n                 (\u0111o 09/09/2026: b\u1EA5m b\u1EB1ng `.click()` c\u1EE7a DOM th\u00EC m\u1EDF, b\u1EA5m chu\u1ED9t th\u1EADt th\u00EC kh\u00F4ng).\n                 Ch\u1EB7n \u1EDF \u0110\u00C2Y \u0111\u1EC3 n\u01A1i d\u00F9ng kh\u00F4ng ph\u1EA3i bi\u1EBFt b\u1EABy n\u00E0y. -->\n            <div\n              class=\"libs-ui-grid-layout-toolbar\"\n              role=\"toolbar\"\n              tabindex=\"0\"\n              [class.libs-ui-grid-layout-toolbar-child]=\"isNestedCanvas()\"\n              (mousedown)=\"handlerStopEvent($event)\"\n              (keydown)=\"handlerStopEvent($event)\"\n              (click)=\"handlerStopEvent($event)\">\n              <ng-container\n                *ngTemplateOutlet=\"templateToolbar()!; context: toolbarContexts()[itemIndex]\" />\n            </div>\n          } @else {\n            <div\n              class=\"libs-ui-grid-layout-toolbar\"\n              [class.libs-ui-grid-layout-toolbar-child]=\"isNestedCanvas()\">\n              <span class=\"libs-ui-grid-layout-dim-badge\">\n                {{ item.rows }} h\u00E0ng \u00D7 {{ item.cols }} c\u1ED9t\n              </span>\n              @if (canAddInside(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"'libs-ui-icon-add'\"\n                  [popover]=\"{ config: { content: 'Th\u00EAm kh\u1ED1i v\u00E0o trong', zIndex: 1300 } }\"\n                  (outClick)=\"handlerAddInside($event, item)\" />\n              }\n              @if (canToggleType(item)) {\n                <libs_ui-components-buttons-button\n                  [type]=\"'button-third'\"\n                  [iconOnlyType]=\"true\"\n                  [sizeButton]=\"'smaller'\"\n                  [classIconLeft]=\"isContainer(item) ? 'libs-ui-icon-split-cell' : 'libs-ui-icon-merge-cell'\"\n                  [popover]=\"{ config: { content: isContainer(item) ? '\u0110\u01B0a v\u1EC1 kh\u1ED1i \u0111\u01A1n' : 'Chuy\u1EC3n th\u00E0nh kh\u1ED1i gh\u00E9p', zIndex: 1300 } }\"\n                  (outClick)=\"handlerToggleType($event, item)\" />\n              }\n              <libs_ui-components-buttons-button\n                [type]=\"'button-third'\"\n                [iconOnlyType]=\"true\"\n                [sizeButton]=\"'smaller'\"\n                [classIconLeft]=\"'libs-ui-icon-setting'\"\n                [popover]=\"{ config: { content: 'C\u1EA5u h\u00ECnh th\u1EBB', zIndex: 1300 } }\"\n                (outClick)=\"handlerConfig($event, item)\" />\n              <libs_ui-components-buttons-button\n                [type]=\"'button-third-hover-danger'\"\n                [iconOnlyType]=\"true\"\n                [sizeButton]=\"'smaller'\"\n                [classIconLeft]=\"'libs-ui-icon-remove'\"\n                [popover]=\"{ config: { content: isContainer(item) ? 'Xo\u00E1 c\u1EA3 kh\u1ED1i gh\u00E9p' : 'Xo\u00E1 kh\u1ED1i', zIndex: 1300 } }\"\n                (outClick)=\"handlerRemove($event, item)\" />\n            </div>\n          }\n        }\n\n        @if (item.children && item.children.length > 0) {\n          <!-- Kh\u1ED1i c\u00F3 con \u2192 ru\u1ED9t n\u00F3 l\u1EA1i l\u00E0 m\u1ED9t m\u1EB7t ph\u1EB3ng n\u1EEFa. \u0110\u1EC7 quy \u1EDF \u0111\u00E2y, n\u01A1i d\u00F9ng kh\u00F4ng ph\u1EA3i lo.\n               L\u1EC1 \u0111\u1EB7t \u1EDF \u0110\u00C2Y (v\u1ECF container), kh\u00F4ng \u0111\u1EB7t v\u00E0o l\u01B0\u1EDBi con \u2014 l\u01B0\u1EDBi con gi\u1EEF nguy\u00EAn khe 2px.\n\n               \uD83D\uDD34 Khu\u00F4n \u0111\u1EB7t trong `ng-template` \u0111\u1EC3 \u0111i \u0111\u01B0\u1EE3c HAI \u0111\u01B0\u1EDDng:\n               - Container KH\u00D4NG c\u00F3 v\u1ECF ri\u00EAng \u2192 v\u1EBD th\u1EB3ng t\u1EA1i \u0111\u00E2y, y nh\u01B0 tr\u01B0\u1EDBc.\n               - Container C\u00D3 `getComponentOutlet` \u2192 th\u01B0 vi\u1EC7n truy\u1EC1n khu\u00F4n n\u00E0y xu\u1ED1ng component v\u1ECF qua\n                 input `childCanvas`, v\u1ECF t\u1EF1 \u0111\u1EB7t n\u00F3 v\u00E0o gi\u1EEFa ti\u00EAu \u0111\u1EC1 v\u00E0 ph\u1EA7n th\u00E2n c\u1EE7a m\u00ECnh. V\u1EBD th\u00EAm \u1EDF\n                 \u0111\u00E2y n\u1EEFa l\u00E0 hai m\u1EB7t ph\u1EB3ng l\u1ED3ng ch\u1ED3ng nhau. -->\n          <ng-template #childCanvasTpl>\n            <libs_ui-services-grid_layout-canvas\n              class=\"block h-full w-full\"\n              [style.padding]=\"containerPadding()\"\n              [node]=\"item\"\n              [depth]=\"depth() + 1\"\n              [dragFromAnywhere]=\"dragFromAnywhere()\"\n              [nestedScrollbar]=\"nestedScrollbar()\"\n              [hiddenToolbar]=\"hiddenToolbar()\"\n              [templateToolbar]=\"templateToolbar()\"\n              [selectedNodeId]=\"selectedNodeId()\"\n              (outSelectNode)=\"outSelectNode.emit($event)\"\n              (outConfigNode)=\"outConfigNode.emit($event)\"\n              (outChange)=\"outChange.emit($event)\"\n              (outRemoveNode)=\"outRemoveNode.emit($event)\"\n              (outAddBlockInside)=\"outAddBlockInside.emit($event)\"\n              (outToggleType)=\"outToggleType.emit($event)\" />\n          </ng-template>\n\n          @if (!item.getComponentOutlet) {\n            <ng-container [ngTemplateOutlet]=\"childCanvasTpl\" />\n          }\n        }\n      </div>\n    </gridster-item>\n  }\n    </gridster>\n  </div>\n}\n", styles: [":host{display:block;position:relative;box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0}.libs-ui-grid-layout-block-shell{container-type:inline-size;display:block;box-sizing:border-box;height:100%}.libs-ui-grid-layout-drag-bar{position:absolute;top:2px;left:50%;z-index:15;display:flex;align-items:center;justify-content:center;width:64px;height:16px;background:transparent;transform:translate(-50%);opacity:1;transition:opacity .12s ease;pointer-events:auto;cursor:move}.libs-ui-grid-layout-drag-bar-dots{display:grid;grid-template-columns:repeat(3,3px);gap:3px;color:#9ca2ad}.libs-ui-grid-layout-drag-bar-dot{width:3px;height:3px;background:currentColor;border-radius:50%}.libs-ui-grid-layout-drag-bar:hover .libs-ui-grid-layout-drag-bar-dots{color:#3d6ef5}.libs-ui-grid-layout-drag-bar:not(.libs-ui-grid-layout-drag-bar-child){opacity:1}.libs-ui-grid-layout-drag-bar-child{top:auto;bottom:0;background:#d9f2e4;border-radius:4px 4px 0 0}.libs-ui-grid-layout-drag-bar-child .libs-ui-grid-layout-drag-bar-dots{color:#9ca2ad}.libs-ui-grid-layout-drag-bar-child:hover .libs-ui-grid-layout-drag-bar-dots{color:#00a757}.libs-ui-grid-layout-drag-bar-child{opacity:0}.libs-ui-grid-layout-block-shell:hover>.libs-ui-grid-layout-drag-bar-child{opacity:1}.libs-ui-grid-layout-block-shell:has(>.libs-ui-grid-layout-drag-bar:not(.libs-ui-grid-layout-drag-bar-child):hover){outline:2px solid #3d6ef5;outline-offset:-2px;border-radius:8px}.libs-ui-grid-layout-block-shell:has(>.libs-ui-grid-layout-drag-bar-child:hover){outline:2px solid #00a757;outline-offset:-2px;border-radius:8px}.libs-ui-grid-layout-container-label{position:absolute;left:6px;top:2px;display:flex;height:20px;align-items:center;z-index:3;padding:0 6px;color:#3d6ef5;font-weight:500;font-size:10px;line-height:14px;background:#dbe4ff;border-radius:4px;pointer-events:none}.libs-ui-grid-layout-content-frame{box-sizing:border-box;width:100%;height:100%;overflow:hidden;border-radius:6px}.libs-ui-grid-layout-content-frame ::ng-deep>*{display:block;box-sizing:border-box;width:100%;height:100%}.libs-ui-grid-layout-content-frame-empty{height:0}.libs-ui-grid-layout-content-frame-edit{border:1px dashed #c3cede}.libs-ui-grid-layout-container-border{position:absolute;inset:0;border:1px dashed #9db4f0;border-radius:8px;pointer-events:none}.libs-ui-grid-layout-toolbar{position:absolute;top:6px;right:8px;z-index:24;display:flex;gap:2px;align-items:center;height:20px;background:#fff;border-radius:4px;box-shadow:0 2px 8px #0716311f;opacity:0;transition:opacity .12s ease}.libs-ui-grid-layout-toolbar-child{top:50%;right:8px;left:auto;transform:translateY(-50%)}.libs-ui-grid-layout-block-shell:hover>.libs-ui-grid-layout-toolbar{opacity:1}:host ::ng-deep gridster{background:transparent}:host ::ng-deep .gridster-item-resizable-handler.handle-n,:host ::ng-deep .gridster-item-resizable-handler.handle-s{height:16px}:host ::ng-deep .gridster-item-resizable-handler.handle-e,:host ::ng-deep .gridster-item-resizable-handler.handle-w{width:16px}:host ::ng-deep .gridster-item-resizable-handler.handle-n{top:0}:host ::ng-deep .gridster-item-resizable-handler.handle-s{bottom:0}:host ::ng-deep .gridster-item-resizable-handler.handle-e{right:0}:host ::ng-deep .gridster-item-resizable-handler.handle-w{left:0}:host ::ng-deep gridster-item.gridster-item-moving,:host ::ng-deep gridster-item.gridster-item-resizing{z-index:30!important}:host ::ng-deep gridster-item.gridster-item-moving>.libs-ui-grid-layout-block-shell,:host ::ng-deep gridster-item.gridster-item-resizing>.libs-ui-grid-layout-block-shell{outline:2px solid #3d6ef5;outline-offset:-2px;border-radius:8px}:host ::ng-deep gridster gridster gridster-item.gridster-item-moving>.libs-ui-grid-layout-block-shell,:host ::ng-deep gridster gridster gridster-item.gridster-item-resizing>.libs-ui-grid-layout-block-shell{outline-color:#00a757}:host ::ng-deep gridster-item.libs-ui-grid-layout-selected>.libs-ui-grid-layout-block-shell{outline:2px solid #2563eb!important;outline-offset:-2px!important;border-radius:8px!important;box-shadow:0 0 0 4px #2563eb26!important}:host ::ng-deep gridster.display-grid .gridster-column,:host ::ng-deep gridster gridster.display-grid .gridster-column{border-right:1px solid rgba(226,232,240,.7)!important;border-left:none!important;pointer-events:none!important;height:100%!important;min-height:100%!important}:host ::ng-deep gridster.display-grid .gridster-column:first-child,:host ::ng-deep gridster gridster.display-grid .gridster-column:first-child{border-left:1px solid rgba(226,232,240,.7)!important}:host ::ng-deep gridster.display-grid .gridster-row,:host ::ng-deep gridster gridster.display-grid .gridster-row{border-bottom:1px solid rgba(226,232,240,.7)!important;border-top:none!important;pointer-events:none!important}:host ::ng-deep gridster.display-grid .gridster-row:first-child,:host ::ng-deep gridster gridster.display-grid .gridster-row:first-child{border-top:1px solid rgba(226,232,240,.7)!important}:host ::ng-deep gridster gridster.display-grid{background-color:#f8fafc80!important}:host ::ng-deep gridster-preview{background:#2563eb1f!important;border:1.5px dashed #2563eb!important;border-radius:6px!important;z-index:25!important}.libs-ui-grid-layout-dim-badge{display:inline-flex;align-items:center;height:20px;padding:0 6px;background-color:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;color:#64748b;font-size:10px;font-weight:500;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;pointer-events:none;white-space:nowrap}@container (max-width: 80px){.libs-ui-grid-layout-drag-bar{top:26px}}.libs-ui-grid-layout-stage{box-sizing:border-box;transform-origin:top center;transition:zoom .15s ease-out}#canvas-zoom-dock{box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.libs-ui-grid-layout-stage>gridster>gridster-item>.libs-ui-grid-layout-block-shell{inset:calc(var(--libs-ui-grid-layout-visual-gap, 0px) / 2);width:calc(100% - var(--libs-ui-grid-layout-visual-gap, 0px));height:calc(100% - var(--libs-ui-grid-layout-visual-gap, 0px));box-sizing:border-box}gridster.libs-ui-grid-layout-drag-anywhere gridster-item{user-select:none;-webkit-user-select:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { handlerDocumentKeyDown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]