vhobjects-admin 0.5.0 → 0.5.1

package/fesm2015/vhobjects-admin.js

@@ -30,6 +30,7 @@ import * as i17 from 'ng-zorro-antd/core/wave';
 import * as i16 from 'ng-zorro-antd/popover';
 import * as i12$2 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
+import { __awaiter } from 'tslib';
 import * as i2$1 from 'vhobjects-service/src/services';
 import { LanguageService } from 'vhobjects-service/src/services';
 import * as i3$2 from '@angular/platform-browser';
@@ -37,10 +38,10 @@ import * as i12$3 from '@angular/material/icon';
 import * as i5$1 from '@angular/material/form-field';
 import * as i16$1 from 'ng-zorro-antd/date-picker';
 import * as i5$2 from 'ng-zorro-antd/radio';
-import * as i22 from 'ng-zorro-antd/popconfirm';
+import * as i21 from 'ng-zorro-antd/tooltip';
+import * as i24 from 'ng-zorro-antd/popconfirm';
 import * as i5$3 from 'ng-zorro-antd/image';
 import * as i15 from '@angular/material/input';
-import * as i21 from 'ng-zorro-antd/tooltip';
 import * as i16$2 from 'ngx-color-picker';
 import { ColorPickerModule } from 'ngx-color-picker';
 import * as i5$4 from '@ckeditor/ckeditor5-angular';
@@ -51,7 +52,6 @@ import * as i9$1 from 'ng-zorro-antd/checkbox';
 import * as i19 from 'ng-zorro-antd/grid';
 import * as i3$3 from '@angular/material/button';
 import * as i6$2 from 'ng-zorro-antd/input-number';
-import { __awaiter } from 'tslib';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import * as i6$3 from '@angular/material/tree';
 import { MatTreeFlattener, MatTreeFlatDataSource } from '@angular/material/tree';
@@ -4436,6 +4436,17 @@ class AtwFrameRepeatAdmin {
             }
         ];
         this.blocks_of_page = [];
+        this.listOfData = [];
+        this.popupHovers = [];
+        this.hoverBlanks = [];
+        /** Dùng cho hình ảnh cần nén cho các thiết bị khác nhau tối ưu SEO */
+        this.deviceTemp = 'desktop';
+        /** Kích thước hình ảnh có phù hợp với kích thước thực tế hay chưa? */
+        this.isDesignImageSizeValid = true;
+        /** Có hiển thị chỗ chọn thiết bị hay không? */
+        this.showChooseDevice = false;
+        /** Chứa các kích thước thiết kế vật thể image của các thiết bị */
+        this.imageSizeOfDevices = {};
         /**
          * Các component con trong frame repeat này, nếu là component khác thì không add
          */
@@ -4454,10 +4465,7 @@ class AtwFrameRepeatAdmin {
             'button-repeat': 'button',
             'popup-repeat': 'popup',
         };
-        this.listOfData = [];
-        this.popupHovers = [];
-        this.hoverBlanks = [];
-        this.path = '/images';
+        this.path = ''; // Nên để rỗng vì ban đâu sẽ đi vào thư mục /images/design/objects
     }
     ngOnInit() {
         this.getBlockPopupHovers();
@@ -4508,33 +4516,51 @@ class AtwFrameRepeatAdmin {
         });
     }
     ngOnChanges(changes) {
-        if (isPlatformBrowser(this.platformId)) {
-            if (changes === null || changes === void 0 ? void 0 : changes.data) {
-                this.getData();
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (isPlatformBrowser(this.platformId)) {
+                if (changes === null || changes === void 0 ? void 0 : changes.data) {
+                    this.getData();
+                }
+                if (((_a = this.itemEdit) === null || _a === void 0 ? void 0 : _a.type) == 'image-repeat' && this.isOpenModal) {
+                    this.isDesignImageSizeValid = yield this.checkDesignImageSize();
+                }
             }
-        }
+        });
     }
     handleAddData() {
+        // Kiểm tra cờ loading để ngăn người dùng click nhiều lần liên tiếp khi đang xử lý
         if (this.loading)
             return;
         this.loading = true;
+        // Lọc ra các đối tượng con (children) hợp lệ dựa trên danh sách component được phép (childrenComp)
         const childrenObject = this.data.objects.filter(o => this.childrenComp.includes(o.component));
+        // Nếu không tìm thấy đối tượng con nào phù hợp, báo lỗi và dừng lại
         if (!childrenObject.length) {
             this.functionService.createMessage('error', 'khong_co_du_lieu_de_them');
             this.loading = false;
             return;
         }
+        // TRƯỜNG HỢP 1: Đã có dữ liệu trong danh sách (Thêm dòng tiếp theo)
         if (this.listOfData.length > 0) {
+            // Sao chép (clone) phần tử cuối cùng trong danh sách để làm mẫu
             const itemAdd = Object.assign({}, this.listOfData[this.listOfData.length - 1]);
+            // Tăng chỉ số index (ví dụ: từ "abc_1" thành "abc_2")
             itemAdd.index = itemAdd.index.split('_')[0] + '_' + (Number(itemAdd.index.split('_')[1]) + 1);
+            // Tính số thứ tự (ordinal) mới
             let ordinal = itemAdd.ordinal + 1;
+            // Xóa _id cũ và ordinal cũ để tránh trùng lặp khi tạo mới
             delete itemAdd._id;
             delete itemAdd.ordinal;
+            // Tăng thứ tự sắp xếp (sort)
             itemAdd.sort++;
+            // Duyệt qua các đối tượng con để khởi tạo dữ liệu mặc định cho item mới
             const dataObject = childrenObject.reduce((obj, item, index) => {
-                // Sử dụng index làm key, hoặc bạn có thể thay đổi để sử dụng một giá trị khác từ item làm key
+                // Xử lý cho các loại: text, button, date, popup
                 if (['text-repeat', 'button-repeat', 'date-repeat', 'popup-repeat'].includes(item.type)) {
+                    // Tạo key theo định dạng: id_ordinal
                     obj[item._id + '_' + ordinal] = {
+                        // Nếu là text/button/popup thì lấy theo ngôn ngữ, ngược lại lấy value gốc
                         [(item.type == 'text-repeat' || item.type == 'button-repeat' || item.type == 'popup-repeat') ? 'value_' + this.functionService.selectedLanguageCode : 'value']: (item.type == 'date-repeat' ? new Date(item.staticdata.value) : item.staticdata.value),
                         type: item.type,
                         type_link: 'none',
@@ -4544,6 +4570,7 @@ class AtwFrameRepeatAdmin {
                         index: index + 1
                     };
                 }
+                // Xử lý cho loại: image
                 if (item.type == 'image-repeat') {
                     obj[item._id + '_' + ordinal] = {
                         value: item.staticdata.value,
@@ -4555,6 +4582,7 @@ class AtwFrameRepeatAdmin {
                         index: index + 1
                     };
                 }
+                // Xử lý cho loại: video
                 if (item.type == 'video-repeat') {
                     obj[item._id + '_' + ordinal] = {
                         value: item.staticdata.value,
@@ -4567,6 +4595,7 @@ class AtwFrameRepeatAdmin {
                         index: index + 1
                     };
                 }
+                // Xử lý cho loại: map (bản đồ)
                 if (item.type == 'map-repeat') {
                     obj[item._id + '_' + ordinal] = {
                         value: item.staticdata.src,
@@ -4579,29 +4608,39 @@ class AtwFrameRepeatAdmin {
                 }
                 return obj;
             }, {});
-            // Gán object mới vào itemAdd.data hoặc sử dụng nó theo cách khác
+            // Gán object dữ liệu vừa tạo vào itemAdd
             itemAdd.data = dataObject;
-            itemAdd._id = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); // tạo _id ngẫu nhiêu với 4 kí tự
+            // Tạo _id ngẫu nhiên mới (hex string 4 ký tự)
+            itemAdd._id = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+            // Cập nhật danh sách data_list trong staticdata
             this.data.staticdata.data_list = [...this.data.staticdata.data_list, itemAdd];
+            // Gọi API cập nhật đối tượng vào cơ sở dữ liệu
             this.vhQueryAutoWeb.updateObject(this.data._id, {
                 staticdata: this.data.staticdata
             }).then((res) => {
+                // Cập nhật thành công: Thêm vào mảng dữ liệu gốc
                 this.listPureData.push(itemAdd);
+                // Xử lý hiển thị: clone item và convert data object sang array để render
                 let newData = Object.assign({}, itemAdd);
                 let dataConvert = this.convertObjectToArray(newData.data);
                 newData.data = dataConvert;
                 newData.ordinal = ordinal;
+                // Cập nhật danh sách hiển thị trên UI
                 this.listOfData = [...this.listOfData, newData];
+                // Hiển thị thông báo thành công nếu đang ở trang admin
                 if (this.functionService.getTypeConfig() == 'admin')
                     this.functionService.createMessage('success', 'cap_nhat_du_lieu_thanh_cong');
+                // Tắt cờ loading
                 this.loading = false;
             });
         }
         else {
+            // TRƯỜNG HỢP 2: Chưa có dữ liệu nào (Tạo dòng đầu tiên)
             let dataObject = {};
-            // chuyển data.objects là mảng  thành object
+            // Duyệt qua childrenObject để tạo dữ liệu khởi tạo (logic tương tự như trên nhưng ordinal mặc định là 1)
             if (Array.isArray(childrenObject)) {
                 dataObject = childrenObject.reduce((obj, item, index) => {
+                    // Xử lý text, button, date, popup
                     if (['text-repeat', 'button-repeat', 'date-repeat', 'popup-repeat'].includes(item.type)) {
                         obj[item._id + '_' + 1] = {
                             [(item.type == 'text-repeat' || item.type == 'button-repeat' || item.type == 'popup-repeat') ? 'value_' + this.functionService.selectedLanguageCode : 'value']: (item.type == 'date-repeat' ? new Date(item.staticdata.value) : item.staticdata.value),
@@ -4612,6 +4651,7 @@ class AtwFrameRepeatAdmin {
                             is_scroll: true,
                         };
                     }
+                    // Xử lý image
                     if (item.type == 'image-repeat') {
                         obj[item._id + '_' + 1] = {
                             value: item.staticdata.value,
@@ -4623,6 +4663,7 @@ class AtwFrameRepeatAdmin {
                             index: index + 1
                         };
                     }
+                    // Xử lý video
                     if (item.type == 'video-repeat') {
                         obj[item._id + '_' + 1] = {
                             value: item.staticdata.value,
@@ -4634,6 +4675,7 @@ class AtwFrameRepeatAdmin {
                             type: item.type,
                         };
                     }
+                    // Xử lý map
                     if (item.type == 'map-repeat') {
                         obj[item._id + '_' + 1] = {
                             value: item.staticdata.src,
@@ -4646,25 +4688,33 @@ class AtwFrameRepeatAdmin {
                     return obj;
                 }, {});
             }
+            // Tạo item mới hoàn toàn với index khởi đầu là id_1
             const itemAdd = {
                 index: this.data._id + '_' + 1,
                 data: dataObject,
                 sort: 1,
-                _id: (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) // tạo _id ngẫu nhiêu với 4 kí tự
+                _id: (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) // tạo _id ngẫu nhiêu
             };
+            // Khởi tạo mảng data_list nếu chưa có và thêm item mới vào
             this.data.staticdata.data_list = this.data.staticdata.data_list || [];
             this.data.staticdata.data_list = [...this.data.staticdata.data_list, itemAdd];
+            // Gọi API cập nhật vào DB
             this.vhQueryAutoWeb.updateObject(this.data._id, {
                 staticdata: this.data.staticdata
             }).then((res) => {
+                // Cập nhật thành công: Thêm vào list dữ liệu gốc
                 this.listPureData.push(itemAdd);
+                // Xử lý hiển thị
                 let newData = Object.assign({}, itemAdd);
                 let dataConvert = this.convertObjectToArray(newData.data);
                 newData.data = dataConvert;
-                newData.ordinal = 1;
+                newData.ordinal = 1; // Mặc định ordinal là 1
+                // Cập nhật UI
                 this.listOfData = [...this.listOfData, newData];
+                // Thông báo thành công
                 if (this.functionService.getTypeConfig() == 'admin')
                     this.functionService.createMessage('success', 'cap_nhat_du_lieu_thanh_cong');
+                // Tắt loading
                 this.loading = false;
             });
         }
@@ -4674,22 +4724,38 @@ class AtwFrameRepeatAdmin {
             return Object.assign({ id_ordinal: key }, value);
         });
     }
+    /**
+     * Hàm chuyển đổi cấu trúc dữ liệu đầu vào.
+     * Mục đích: Duyệt qua danh sách dữ liệu (rows) và ánh xạ với cấu hình đối tượng (columns)
+     * để tạo ra cấu trúc dữ liệu chuẩn cho việc hiển thị (bao gồm cả dữ liệu đã lưu và dữ liệu mặc định).
+     * @param data Mảng dữ liệu đầu vào cần chuyển đổi
+     */
     convertData(data) {
+        // Duyệt qua từng dòng dữ liệu (item) trong mảng đầu vào
         return data.map((item) => {
+            // Lọc lấy các đối tượng cấu hình con (objects) hợp lệ dựa trên danh sách component cho phép
+            // Sau đó map qua từng đối tượng cấu hình này để tạo dữ liệu cho từng ô (cell)
             let dataConvert = this.data.objects.filter(o => this.childrenComp.includes(o.component)).map((ele, index) => {
+                // Tạo key định danh duy nhất cho ô dữ liệu: ID_cấu_hình + Số_thứ_tự_dòng
+                // Ví dụ: text123_1, image456_2
                 const itemIndex = ele._id + '_' + item.index.split('_')[1];
+                // TRƯỜNG HỢP 1: Dữ liệu cho ô này đã tồn tại trong DB
                 if (item.data.hasOwnProperty(itemIndex)) {
-                    return Object.assign({ id_ordinal: itemIndex }, item.data[itemIndex]);
+                    return Object.assign({ id_ordinal: itemIndex }, item.data[itemIndex] // Spread toàn bộ dữ liệu đã lưu
+                    );
                 }
                 else {
-                    // gán tất cả các trường bắt đầu bằng `value` của object vào data
+                    // TRƯỜNG HỢP 2: Dữ liệu chưa tồn tại (mới thêm hoặc lỗi), cần tạo dữ liệu mặc định từ staticdata
+                    // Lấy tất cả các trường bắt đầu bằng 'value' từ staticdata (hỗ trợ đa ngôn ngữ value_vi, value_en...)
                     const valueFields = {};
                     Object.keys(ele.staticdata).forEach(key => {
                         if (key.startsWith('value')) {
                             valueFields[key] = ele.staticdata[key];
                         }
                     });
+                    // Khởi tạo object dữ liệu mặc định
                     let valueReturn = Object.assign(Object.assign({ id_ordinal: itemIndex }, valueFields), { type: ele.type, index: index + 1, type_link: 'none', link: '', hyper_link: '', is_scroll: true });
+                    // Xử lý mặc định riêng cho loại Video
                     if (ele.type == 'video-repeat') {
                         valueReturn = {
                             id_ordinal: itemIndex,
@@ -4703,6 +4769,7 @@ class AtwFrameRepeatAdmin {
                             index: index + 1
                         };
                     }
+                    // Xử lý mặc định riêng cho loại Map (Bản đồ)
                     if (item.type == 'map-repeat') {
                         valueReturn = {
                             value: item.staticdata.src,
@@ -4716,19 +4783,27 @@ class AtwFrameRepeatAdmin {
                     return valueReturn;
                 }
             });
-            return Object.assign(Object.assign({}, item), { ordinal: Number(item.index.split('_')[1]), data: dataConvert });
+            // Trả về item đã được tái cấu trúc
+            return Object.assign(Object.assign({}, item), { 
+                // Tách lấy số thứ tự dòng từ index (ví dụ: "block_1" -> 1)
+                ordinal: Number(item.index.split('_')[1]), 
+                // Gán mảng dữ liệu chi tiết đã convert vào trường data
+                data: dataConvert });
         });
     }
     getData() {
         if (this.loading = false)
             return;
         this.id_subproject = this.vhQueryAutoWeb.getlocalSubProject_Working()._id;
+        this.subproject = this.vhQueryAutoWeb.getlocalSubProject(this.id_subproject);
         this.loading = true;
         if (typeof this.data.staticdata.data_list != 'object') {
             this.data.staticdata.data_list = [];
         }
         this.listPureData = this.data.staticdata.data_list || [];
         this.listOfData = this.convertData(this.listPureData);
+        // Kiểm tra xem có image-repeat để hiển thị chỗ chọn device
+        this.showChooseDevice = this.listOfData[0].data.some(i => i.type === 'image-repeat');
         this.vhAlgorithm.sortNumberbyASC(this.listOfData, 'sort');
         this.loading = false;
         this.getLinkAllPages();
@@ -4825,7 +4900,10 @@ class AtwFrameRepeatAdmin {
         if (file) {
             let compressType = this.compressType;
             let resolution = {};
-            if (compressType == 'custom') {
+            if (compressType == 'compress-frame') {
+                resolution = this.imageSizeOfDevices[this.deviceTemp];
+            }
+            else if (compressType == 'custom') {
                 resolution = {
                     width: +this.compressWidth,
                     height: +this.compressHeight,
@@ -4840,7 +4918,10 @@ class AtwFrameRepeatAdmin {
                 .then((rsp) => {
                 console.log('rsp', rsp);
                 if (rsp.vcode === 0) {
-                    this.itemEdit.value = rsp.data;
+                    this.itemEdit[this.deviceTemp + '_value'] = rsp.data;
+                    if (this.deviceTemp == 'desktop') {
+                        this.itemEdit.value = rsp.data;
+                    }
                     this.updateData(dataRow);
                 }
                 else {
@@ -4862,14 +4943,17 @@ class AtwFrameRepeatAdmin {
             width: '85%',
             maxWidth: '100%',
             data: {
-                startPath: this.path ? this.path : '/images/design/objects',
+                startPath: this.path || '/images/design/objects',
                 scopeData: '/images',
             },
             disableClose: true,
         });
         dialogRef.afterClosed().subscribe((data) => {
             if (data.href) {
-                this.itemEdit.value = data.href;
+                this.itemEdit[this.deviceTemp + '_value'] = data.href;
+                if (this.deviceTemp == 'desktop') {
+                    this.itemEdit.value = data.href;
+                }
                 this.updateData(dataRow);
             }
             this.path = data.path;
@@ -4883,20 +4967,37 @@ class AtwFrameRepeatAdmin {
         });
         dialogRef.afterClosed().subscribe((result) => {
             if (result) {
-                this.itemEdit.value = result;
+                this.itemEdit[this.deviceTemp + '_value'] = result;
+                if (this.deviceTemp == 'desktop') {
+                    this.itemEdit.value = result;
+                }
                 this.updateData(dataRow);
             }
         });
     }
     chooseItemEdit(item, dataRow) {
-        this.itemEdit = item;
-        this.itemEdit.scroll_distance = this.itemEdit.scroll_distance || 0;
-        this.dataRow = dataRow;
-        this.isOpenModal = true;
-        if (item.type == 'map-repeat') {
-            this.radioValue = item.local != '' ? 'location' : 'iframe';
-        }
-        this.getBlocksbyPage();
+        return __awaiter(this, void 0, void 0, function* () {
+            this.itemEdit = item;
+            this.itemEdit.scroll_distance = this.itemEdit.scroll_distance || 0;
+            this.dataRow = dataRow;
+            this.isOpenModal = true;
+            if (item.type == 'image-repeat') {
+                // Lấy ra kích thước thiết kế để dùng cho các hàm
+                this.getDesignDimensionsOfDevices(item);
+                // Khởi tạo device + value nếu chưa có
+                this.functionService.devices.forEach((d) => {
+                    var _a;
+                    var _b, _c;
+                    (_a = (_b = this.itemEdit)[_c = `${d.value}_value`]) !== null && _a !== void 0 ? _a : (_b[_c] = this.itemEdit.value);
+                });
+                // Kiểm tra nút cập nhật size ảnh theo size thiết kế có cần hiển thị hay không
+                this.isDesignImageSizeValid = yield this.checkDesignImageSize();
+            }
+            if (item.type == 'map-repeat') {
+                this.radioValue = item.local != '' ? 'location' : 'iframe';
+            }
+            this.getBlocksbyPage();
+        });
     }
     openUploadToServer() {
         this.isShowUploadToServer = true;
@@ -4971,7 +5072,10 @@ class AtwFrameRepeatAdmin {
         this.uploadToServerLoading = true;
         let compressType = this.compressType;
         let resolution = {};
-        if (compressType == 'custom') {
+        if (compressType == 'compress-frame') {
+            resolution = this.imageSizeOfDevices[this.deviceTemp];
+        }
+        else if (compressType == 'custom') {
             resolution = {
                 width: +this.compressWidth,
                 height: +this.compressHeight,
@@ -4979,23 +5083,21 @@ class AtwFrameRepeatAdmin {
             compressType = 'compress-frame';
         }
         this.vhImage
-            .getImageFromURL_Autoweb(itemEdit.value, 'images/design/objects', {
+            .getImageFromURL_Autoweb(itemEdit[`${this.deviceTemp}_value`] || itemEdit.value, 'images/design/objects', {
             compress_type: compressType,
             resolution: resolution,
         })
             .then((res) => {
-            // console.log('res', res);
-            // res =   {
-            //     "vcode": 0,
-            //     "msg": "success",
-            //     "data": "https://115.78.228.208:20350/autowebapp/66b0479062f72fd82ca62d80/images/design/objects/tw3tnkn4.jpeg"
-            // }
             if (res.vcode != 0) {
                 console.error(res.msg);
-                this.functionService.createMessage('error', res.msg);
+                this.functionService.createMessage('error', res.msg, 5000);
+                this.isShowUploadToServer = false;
                 return;
             }
-            itemEdit.value = res.data;
+            itemEdit[`${this.deviceTemp}_value`] = res.data;
+            if (this.deviceTemp == 'desktop') {
+                itemEdit.value = res.data;
+            }
             this.updateData(this.dataRow);
             this.isShowUploadToServer = false;
         })
@@ -5124,9 +5226,227 @@ class AtwFrameRepeatAdmin {
             return true;
         return true;
     }
+    /**
+     * Hàm lấy kích thước thiết kế của hình ảnh trong khung lưới
+     * @param item
+     */
+    getDesignDimensionsOfDevices(item) {
+        const idObj = item.id_ordinal.split('_')[0];
+        const obj = this.data.objects.find(object => object._id === idObj);
+        this.functionService.devices.forEach((d) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            // Trường hợp dimension đã có dữ liệu
+            if (((_b = (_a = obj === null || obj === void 0 ? void 0 : obj[`${d.value}_config`]) === null || _a === void 0 ? void 0 : _a.dimension) === null || _b === void 0 ? void 0 : _b.width) &&
+                ((_d = (_c = obj === null || obj === void 0 ? void 0 : obj[`${d.value}_config`]) === null || _c === void 0 ? void 0 : _c.dimension) === null || _d === void 0 ? void 0 : _d.height)) {
+                this.imageSizeOfDevices[d.value] = obj[`${d.value}_config`].dimension;
+            }
+            // Trường hợp chưa có dimension thì dùng của class image
+            else if (((_f = (_e = obj[`${d.value}_class`]) === null || _e === void 0 ? void 0 : _e.image) === null || _f === void 0 ? void 0 : _f.width) &&
+                ((_h = (_g = obj[`${d.value}_class`]) === null || _g === void 0 ? void 0 : _g.image) === null || _h === void 0 ? void 0 : _h.height)) {
+                const container = obj[`${d.value}_class`].image;
+                this.imageSizeOfDevices[d.value] = {
+                    width: parseFloat(container.width),
+                    height: parseFloat(container.height)
+                };
+            }
+        });
+    }
+    /**
+     * Lấy ra tên file và đuôi file
+     * @param url Đường dẫn ảnh
+     * @example const { fileName, fileExtension } = getFileInfo("https://115.78.228.208:20350/autowebapp/67c1b593b1344364462b082b/images/design/objects/3-1-768x768%20(3).png");
+     */
+    getFileInfo(url) {
+        const decodedUrl = decodeURIComponent(url);
+        const parts = decodedUrl.split('/');
+        // Lấy tên file (phần cuối)
+        const fullFileName = parts.pop() || '';
+        const dotIndex = fullFileName.lastIndexOf('.');
+        // Tìm và lấy phần giữa (ví dụ: "images/design/objects")
+        const indexImages = parts.indexOf('images');
+        const folderPath = indexImages !== -1 ? parts.slice(indexImages).join('/') : '';
+        return {
+            fullFileName,
+            fileName: fullFileName.substring(0, dotIndex),
+            fileExtension: fullFileName.substring(dotIndex + 1),
+            folderPath, // "images/design/objects"
+        };
+    }
+    /** Hàm kiểm tra có cần phải hiển thị nút cập nhật không */
+    checkDesignImageSize() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // chạy song song cho nhanh
+            const results = yield Promise.all(this.functionService.devices.map((d) => __awaiter(this, void 0, void 0, function* () {
+                var _a, _b;
+                var _c, _d;
+                // Trường hợp itemEdit device value chưa có thì gán tạm
+                (_a = (_c = this.itemEdit)[_d = `${d.value}_value`]) !== null && _a !== void 0 ? _a : (_c[_d] = this.itemEdit.value);
+                // Nếu giao diện thiết kế đã ẩn thiết bị thì không cần check
+                if (!((_b = this.subproject) === null || _b === void 0 ? void 0 : _b[`${d.value}_template_display`])) {
+                    return false;
+                }
+                // Ảnh gốc
+                const url = this.itemEdit[`${d.value}_value`];
+                const imgSize = yield this.functionService.getImageSize(url);
+                // Container thiết kế
+                const containerSize = this.imageSizeOfDevices[d.value];
+                return this.checkRatioDesignImgSize(imgSize, containerSize);
+            })));
+            // chỉ cần 1 device trả về true → return true
+            return results.some(v => v === true);
+        });
+    }
+    /**
+     * Hàm kiểm tra
+     * - Ratio có bị lệch nhiều hay không hoặc
+     * - Kích thước có lớn hơn nhiều so với kích thước hiển thị hay không?
+     * @param imgSize Kích thước của file ảnh gốc
+     * @param containerSize Kích thước thực tế người dùng thấy
+     */
+    checkRatioDesignImgSize(imgSize, containerSize) {
+        // Ratio
+        const imgRatio = imgSize.width / imgSize.height;
+        const containerRatio = containerSize.width / containerSize.height;
+        // Ratio lệch trên 10% → ảnh bị méo → return true
+        const ratioDiff = Math.abs(imgRatio - containerRatio) / containerRatio;
+        if (ratioDiff > 0.1) {
+            return true;
+        }
+        // Tại đây: ratio giống nhau hoặc lệch ít → xét về kích thước
+        const widthFactor = imgSize.width / containerSize.width;
+        const heightFactor = imgSize.height / containerSize.height;
+        // Ảnh lớn hơn container nhiều → ảnh nặng → giảm PageSpeed → return true
+        if (widthFactor > 1.5
+            || heightFactor > 1.5) {
+            return true;
+        }
+        // Ảnh lớn hơn chút nhưng không ảnh hưởng PageSpeed → return false
+        return false;
+    }
+    /**
+     * Hàm update kích thước ảnh phù hợp cho từng kích thước thiết kế của từng thiết bị
+     * @param itemEdit
+     * @param dataRow
+     */
+    updateDesignImageSize(itemEdit, dataRow) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const messages = [];
+            // ⭐ Show Loading 1 lần duy nhất
+            yield this.functionService.showLoading("", "current-loading", null, 0, false);
+            yield Promise.all(this.functionService.devices.map((d) => __awaiter(this, void 0, void 0, function* () {
+                var _a, _b;
+                var _c, _d;
+                // Trường hợp itemEdit device value chưa có thì gán tạm
+                (_a = (_c = this.itemEdit)[_d = `${d}_value`]) !== null && _a !== void 0 ? _a : (_c[_d] = this.itemEdit.value);
+                // Nếu giao diện thiết kế đã ẩn thiết bị thì không cần check
+                if (!this.subproject[`${d.value}_template_display`])
+                    return;
+                /** Khai báo tin nhắn thông báo cho từng thiết bị */
+                const msgDevices = `(${this.languageService.translate('thiet_bi')} ${this.languageService.translate(d.label)}) ${this.findObjectName(itemEdit)}: `;
+                // Ảnh gốc
+                const url = itemEdit[`${d.value}_value`];
+                const imgSize = yield this.functionService.getImageSize(url);
+                // Container thiết kế
+                const containerSize = this.imageSizeOfDevices[d.value];
+                // Trường hợp nếu ảnh này đã phù hợp thì trả về thông báo chứ không update nữa
+                if (!this.checkRatioDesignImgSize(imgSize, containerSize)) {
+                    messages.push({
+                        type: 'warning',
+                        msg: msgDevices + this.languageService.translate('anh_nay_da_phu_hop_khong_can_cap_nhat_nua')
+                    });
+                    return;
+                }
+                const msgSolution = this.functionService.getTypeConfig() == 'admin'
+                    ? 'vui_long_chuan_bi_mot_hinh_khac_phu_hop'
+                    : 'vui_long_sua_thiet_ke_hoac_chuan_bi_mot_hinh_khac_phu_hop';
+                // Trường hợp đã cập nhật hoặc width là bằng sẵn rồi nhưng height thiết kế không phù hợp
+                // Thì trả về thông báo chứ không cho update nữa vì gây tăng dung lượng lưu ảnh không cần thiết
+                if (imgSize.width == containerSize.width &&
+                    imgSize.height != containerSize.height) {
+                    const mTmp = containerSize.height > imgSize.height
+                        ? 'chieu_cao_thiet_ke_lon_hon_chieu_cao_anh'
+                        : 'chieu_cao_thiet_ke_nho_hon_chieu_cao_anh';
+                    const m = this.languageService.translate(mTmp) + '. ' + this.languageService.translate(msgSolution);
+                    messages.push({
+                        type: 'error',
+                        msg: msgDevices + m + '!!!',
+                        duration: 8000
+                    });
+                    return;
+                }
+                // Trường hợp nếu ảnh này bé hơn kích thước thiết kế thì báo cho người dùng và không cập nhật
+                if (imgSize.width < containerSize.width) {
+                    const mTmp = 'chieu_dai_anh_nho_hon_chieu_dai_thiet_ke_lam_cho_viec_nen_anh_theo_khung_hien_thi_hinh_anh_khong_hoat_dong';
+                    const m = this.languageService.translate(mTmp) + '. ' + this.languageService.translate(msgSolution);
+                    messages.push({
+                        type: 'error',
+                        msg: msgDevices + m + '!!!',
+                        duration: 8000
+                    });
+                    return;
+                }
+                // Cập nhật ảnh cho từng thiết bị
+                try {
+                    const rsp = yield this.vhImage.getImageFromURL_Autoweb(url, 'images/design/objects', {
+                        compress_type: 'compress-frame',
+                        resolution: containerSize,
+                    });
+                    if (rsp.vcode == 0) {
+                        itemEdit[`${d.value}_value`] = rsp.data;
+                        if (d.value == 'desktop') {
+                            itemEdit.value = rsp.data;
+                        }
+                        messages.push({
+                            type: 'success',
+                            msg: msgDevices + this.languageService.translate('tai_anh_thanh_cong')
+                        });
+                    }
+                    else {
+                        messages.push({
+                            type: 'error',
+                            msg: msgDevices + this.languageService.translate('tai_anh_that_bai_ly_do') + rsp.msg
+                        });
+                    }
+                }
+                catch (error) {
+                    if ((_b = error.message) === null || _b === void 0 ? void 0 : _b.includes('413')) {
+                        messages.push({
+                            type: 'error',
+                            msg: msgDevices + this.languageService.translate('file_anh_qua_lon_vui_chon_file_anh_co_dung_luong_nho_hon_1mb')
+                        });
+                    }
+                }
+            })));
+            // CHỈ CHẠY SAU KHI HOÀN TẤT TẤT CẢ DEVICE
+            this.updateData(dataRow);
+            // ⭐ Hide loading (delay 200ms để tránh flick)
+            yield this.functionService.hideLoading(200);
+            // Show toàn bộ message sau cùng
+            messages.forEach(m => {
+                var _a;
+                this.functionService.createMessage(m.type, m.msg, (_a = m.duration) !== null && _a !== void 0 ? _a : 5000);
+            });
+        });
+    }
+    /**
+     * Sao chép đường dẫn hình ảnh vào bộ nhớ tạm
+     */
+    copyLinkImg(text) {
+        if (isPlatformBrowser(this.platformId)) {
+            const textCopy = text || this.itemEdit[this.deviceTemp + '_value'];
+            navigator.clipboard.writeText(textCopy)
+                .then(() => {
+                this.functionService.createMessage('success', 'da_sao_chep_vao_bo_nho_tam', 2000);
+            })
+                .catch(err => {
+                this.functionService.createMessage('error', 'loi_khi_sao_chep', 2000);
+                console.error('❌ Lỗi khi copy:', err);
+            });
+        }
+    }
 }
 AtwFrameRepeatAdmin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AtwFrameRepeatAdmin, deps: [{ token: i1.VhAlgorithm }, { token: i1.VhQueryAutoWeb }, { token: i1.VhImage }, { token: i3$1.FunctionService }, { token: i2.MatDialog }, { token: PLATFORM_ID }, { token: i4$1.NzModalRef, optional: true }, { token: i2.MatDialog }, { token: i2$1.LanguageService }, { token: i3$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-AtwFrameRepeatAdmin.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AtwFrameRepeatAdmin, selector: "atw-frame-repeat-admin", inputs: { data: "data", type: "type" }, usesOnChanges: true, ngImport: i0, template: "<!-- TABLE \u1EDE TRANG ADMIN -->\r\n<nz-layout id=\"purchase-invoice-today\">\r\n  <!-- Ph\u1EA7n header -->\r\n  <div class=\"purchase-invoice-today-header\">\r\n    <div class=\"row p-0 m-0\">\r\n      <div class=\"col-6 p-0 m-0 d-flex align-items-center\">\r\n       \r\n      </div>\r\n      <!-- N\u00FAt th\u00EAm s\u1EA3n ph\u1EA9m v\u00E0o frame -->\r\n      <div class=\"col-6 p-0 m-0 d-flex align-items-center justify-content-end\">\r\n        <!-- Ch\u1ECDn ng\u00F4n ng\u1EEF -->\r\n        <div class=\"mr-2\">\r\n          <app-select-language-config [isAdmin]=\"true\"></app-select-language-config>\r\n        </div>\r\n        <button nzType=\"primary\" class=\"_btn _btn_add d-flex align-items-center right-all-content mr-2\" nz-button\r\n          (click)=\"handleAddData()\">\r\n          {{\r\n          'them_du_lieu' | translate\r\n          }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Ph\u1EA7n table -->\r\n  <div style=\"margin-top: 16px; height: 500px\">\r\n    <nz-table #editRowTable nzBordered [nzData]=\"listOfData\" [nzLoading]=\"loading\" [nzTotal]=\"total\" nzShowSizeChanger\r\n      [nzPageSizeOptions]=\"[5, 10, 20, 50]\" [nzPageSize]=\"pageSize\" [nzPageIndex]=\"pageIndex\" [nzScroll]=\"{ y: '400px' }\">\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"10%\">{{'STT' | translate}}</th>\r\n          <th nzWidth=\"80%\">{{'doi_tuong' | translate}}</th>\r\n          <th nzWidth=\"10%\">{{'thao_tac'| translate}}</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let dataRow of editRowTable.data\">\r\n          <td>\r\n            <div class=\"editable-cell\" [hidden]=\"itemEdit?._id === dataRow._id\" (click)=\"itemEdit = dataRow;\">\r\n              {{ dataRow.sort }}\r\n            </div>\r\n            <input [hidden]=\"itemEdit?._id !== dataRow._id\" type=\"text\" nz-input [(ngModel)]=\"dataRow.sort\"\r\n              (blur)=\"updateOrdinal(dataRow)\" />\r\n          </td>\r\n\r\n          <td>\r\n            <ng-container *ngFor=\"let item of dataRow.data\">\r\n              <ng-container *ngIf=\"item.type == 'image-repeat'\">\r\n                <div class=\"editable-cell\" (click)=\"chooseItemEdit(item, dataRow)\">\r\n                  <strong class=\"item-name\">{{ findObjectName(item) }}</strong>:\r\n                  <img width=\"100px\" height=\"100px\" [src]=\"item.value\" alt=\"image-repeat\" class=\"mb-2\" />\r\n                  <!-- M\u00F4 t\u1EA3 n\u1ED9i dung c\u1EE7a \u1EA3nh -->\r\n                  <strong class=\"item-name ml-4\">{{ 'mo_ta' | translate }}</strong>\r\n                  : {{ item['accessibility_alt_' + functionService.languageTempCode] || '\u1EA2nh' }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"item.type == 'text-repeat'\">\r\n                <div class=\"editable-cell\" (click)=\"chooseItemEdit(item, dataRow)\">\r\n                  <strong class=\"item-name\">{{ findObjectName(item) }}</strong>: {{ item['value_' +\r\n                  functionService.languageTempCode] | vhLanguage : 'value' : data.component }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"item.type == 'button-repeat'\">\r\n                <div class=\"editable-cell\" (click)=\"chooseItemEdit(item, dataRow)\">\r\n                  <strong class=\"item-name\">{{ findObjectName(item) }}</strong>\r\n                  : {{ item['value_' + functionService.languageTempCode] | vhLanguage : 'button' : data.component }}\r\n                  <ng-container *ngIf=\"\r\n                    (item['value_' + functionService.languageTempCode] != undefined) && \r\n                    !item['value_' + functionService.languageTempCode]?.trim()\r\n                  \">\r\n                    <strong class=\"item-name ml-4\">{{ 'nhan' | translate }}</strong>\r\n                    : {{ item['accessibility_aria_label_' + functionService.languageTempCode] || 'N\u00FAt \u0111i\u1EC1u h\u01B0\u1EDBng' }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"item.icon_enable\">\r\n                    <strong class=\"item-name ml-4\">{{ 'bieu_tuong' | translate }}</strong>\r\n                    : <mat-icon *ngIf=\"item.icon_name\">{{ item.icon_name }}</mat-icon>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"item.type == 'popup-repeat'\">\r\n                <div class=\"editable-cell\" (click)=\"chooseItemEdit(item, dataRow)\">\r\n                  <strong class=\"item-name\">{{ findObjectName(item) }}</strong>\r\n                  : {{ item['value_' + functionService.languageTempCode] | vhLanguage : 'popup' : data.component }}\r\n                  <ng-container *ngIf=\"\r\n                    (item['value_' + functionService.languageTempCode] != undefined) && \r\n                    !item['value_' + functionService.languageTempCode]?.trim()\r\n                  \">\r\n                    <strong class=\"item-name ml-4\">{{ 'nhan' | translate }}</strong>\r\n                    : {{ item['accessibility_aria_label_' + functionService.languageTempCode] || 'N\u00FAt g\u1ECDi h\u1ED9p tho\u1EA1i' }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"item.icon_enable\">\r\n                    <strong class=\"item-name ml-4\">{{ 'bieu_tuong' | translate }}</strong>\r\n                    : <mat-icon *ngIf=\"item.icon_name\">{{ item.icon_name }}</mat-icon>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"item.type == 'date-repeat'\">\r\n                <div class=\"editable-cell\" (click)=\"chooseItemEdit(item, dataRow)\">\r\n                  <strong class=\"item-name\">{{ findObjectName(item) }}</strong>: {{ item.value | date: 'dd-MM-yyyy HH:mm:ss ' }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"item.type == 'video-repeat'\">\r\n                <div class=\"editable-cell\" (click)=\"chooseItemEdit(item, dataRow)\"> \r\n                  <strong class=\"item-name\">{{ findObjectName(item) }}</strong>:\r\n                  <iframe width=\"150px\" height=\"100px\" [src]=\"sanitizer.bypassSecurityTrustResourceUrl(item.value)\" alt=\"image-repeat\" class=\"mb-2\">\r\n                  </iframe>\r\n                  <!-- M\u00F4 t\u1EA3 n\u1ED9i dung c\u1EE7a video -->\r\n                  <strong class=\"item-name ml-4\">{{ 'mo_ta' | translate }}</strong>\r\n                  : {{ item['accessibility_title_' + functionService.languageTempCode] || 'Video youtube' }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"item.type == 'map-repeat'\">\r\n                <div class=\"editable-cell\" (click)=\"chooseItemEdit(item, dataRow)\">\r\n                  <strong class=\"item-name\">{{ findObjectName(item) }}</strong>: \r\n                  <iframe width=\"200px\" height=\"100px\" scrolling=\"no\" loading=\"lazy\"\r\n                  [src]=\"sanitizer.bypassSecurityTrustResourceUrl(item.value)\"\r\n                  referrerpolicy=\"no-referrer-when-downgrade\" alt=\"map-repeat\"\r\n                  class=\"mb-2\" style=\"pointer-events: none;\" allow=\"geolocation 'none'\">\r\n                  </iframe>\r\n                  <!-- M\u00F4 t\u1EA3 n\u1ED9i dung c\u1EE7a b\u1EA3n \u0111\u1ED3 -->\r\n                  <strong class=\"item-name ml-4\">{{ 'mo_ta' | translate }}</strong>\r\n                  : {{ item['accessibility_title_' + functionService.languageTempCode] || 'B\u1EA3n \u0111\u1ED3' }}\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </td>\r\n          <td>\r\n            <a nz-popconfirm [nzPopconfirmTitle]=\"'ban_co_chac_chan_muon_xoa' | translate\"\r\n              (nzOnConfirm)=\"deleteRow(dataRow._id)\"><span nz-icon nzType=\"delete\" class=\"btn-delete\"\r\n                nzTheme=\"outline\"></span></a>\r\n          </td>\r\n        </tr>\r\n\r\n        <!-- MODAL EDIT -->\r\n        <nz-modal [(nzVisible)]=\"isOpenModal\" (nzOnCancel)=\"isOpenModal = false\" [nzFooter]=\"null\">\r\n          <ng-container *nzModalContent>\r\n            <ng-container *ngIf=\"itemEdit.type == 'image-repeat'\">\r\n              <div class=\"image-container\">\r\n                <img nz-image width=\"100px\" height=\"100px\" [nzSrc]=\"itemEdit.value\" alt=\"L\u1ED7i h\u00ECnh \u1EA3nh\"\r\n                  class=\"mb-2 mr-2\" />\r\n                <div class=\"image-right\">\r\n                  <div style=\"margin-bottom: 10px; display:flex; align-items: center; gap: 1rem;\">\r\n                    <button class=\"_icon_connect  _icon_connect_active\">\r\n                      <!-- icon upload t\u1EEB thi\u1EBFt b\u1ECB -->\r\n                      <label for=\"upload\" nz-icon nzType=\"upload\" nzTheme=\"outline\" *ngIf=\"source == 'device'\"\r\n                        (click)=\"startEdit(itemEdit)\"></label>\r\n                      <input type=\"file\" id=\"upload\" hidden (change)=\"onUpload($event, dataRow)\">\r\n                      <!-- icon upload t\u1EEB th\u01B0 vi\u1EC7n -->\r\n                      <span nz-icon nzType=\"picture\" nzTheme=\"outline\" *ngIf=\"source == 'library'\"\r\n                        (click)=\"startEdit(itemEdit); openLibrary(dataRow)\"></span>\r\n                      <!-- icon \u1EA3nh mi\u1EC5n ph\u00ED -->\r\n                      <span nz-icon nzType=\"cloud-upload\" nzTheme=\"outline\" *ngIf=\"source == 'free_img'\"\r\n                        (click)=\"startEdit(itemEdit); openFreeImage(dataRow)\"></span>\r\n                      <!-- icon \u0111\u01B0\u1EDDng d\u1EABn \u1EA3nh -->\r\n                      <span nz-popover nzPopoverTitle=\"{{'duong_dan_anh' | translate}}\" nzPopoverTrigger=\"click\"\r\n                        [nzPopoverContent]=\"contentTemplate\" nz-icon nzType=\"disconnect\" nzTheme=\"outline\"\r\n                        *ngIf=\"source == 'url'\">\r\n                      </span>\r\n                      <ng-template #contentTemplate>\r\n                        <input style=\"width: 260px;\" class=\"input mr-1\" type=\"text\" [(ngModel)]=\"itemEdit.value\"\r\n                          [value]=\"itemEdit.value\" placeholder=\"{{'nhap_duong_dan_lien_ket' | translate}}\">\r\n                        <span role=\"button\" class=\"text-success\" (click)=\"updateData(dataRow)\">{{'ap_dung' |\r\n                          translate}}</span>\r\n                      </ng-template>\r\n\r\n\r\n                    </button>\r\n\r\n                    <button *ngIf=\"!itemEdit.value.includes(id_subproject)\" nz-button nzType=\"primary\"\r\n                      (click)=\"openUploadToServer()\">{{'chuyen_anh_len_server' | translate}}</button>\r\n                  </div>\r\n                  <div style=\"margin-bottom: 10px;\">\r\n                    <nz-select [(ngModel)]=\"source\">\r\n                      <nz-option *ngFor=\"let source of sources\" [nzValue]=\"source.value\"\r\n                        [nzLabel]=\"source.label | translate\"></nz-option>\r\n                    </nz-select>\r\n                  </div>\r\n\r\n                  <div *ngIf=\"source == 'device'\">\r\n                    <p class=\"m-0\">{{'nen_anh_tai_len' | translate}}</p>\r\n                    <nz-select style=\"margin-bottom: 15px\" [(ngModel)]=\"compressType\"\r\n                      nzPlaceHolder=\"{{'nen_anh_tai_len' | translate}}\" nzAllowClear>\r\n                      <nz-option [nzValue]=\"'no-compress'\"\r\n                        nzLabel=\"{{'khong_nen_anh_sau_khi_tai_len' | translate}}\"></nz-option>\r\n                      <nz-option [nzValue]=\"'custom'\"\r\n                        nzLabel=\"{{'nen_anh_theo_kich_thuoc_tu_chon' | translate}}\"></nz-option>\r\n                    </nz-select>\r\n\r\n                    <div style=\"display:flex; align-items:center; gap: 8px\">\r\n                      <mat-form-field *ngIf=\"compressType == 'custom'\">\r\n                        <mat-label>{{'chieu_rong' | translate}}</mat-label>\r\n                        <input matInput placeholder=\"{{'chieu_rong' | translate}}\" [(ngModel)]=\"compressWidth\">\r\n                      </mat-form-field>\r\n\r\n                      <mat-form-field *ngIf=\"compressType == 'custom'\">\r\n                        <mat-label>{{'chieu_cao' | translate}}</mat-label>\r\n                        <input matInput placeholder=\"{{'chieu_cao' | translate}}\" [(ngModel)]=\"compressHeight\">\r\n                      </mat-form-field>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- C\u1EADp nh\u1EADt m\u00F4 t\u1EA3 n\u1ED9i dung \u1EA3nh -->\r\n              <div class=\"config-font\" style=\"margin-bottom: 20px;\">\r\n                <p class=\"title\">{{'cap_nhat_mo_ta_noi_dung' | translate}}</p>\r\n                <textarea nz-input class=\"content\" placeholder=\"{{'noi_dung' | translate}}...\"\r\n                  [ngModel]=\"itemEdit['accessibility_alt_' + functionService.languageTempCode] || '\u1EA2nh'\"\r\n                  (ngModelChange)=\"itemEdit['accessibility_alt_' + functionService.languageTempCode] = $event\"\r\n                  (blur)=\"updateData(dataRow)\" [nzAutosize]=\"{ minRows: 3, maxRows: 15 }\"\r\n                  nz-tooltip [nzTooltipTitle]=\"'*_giai_thich_aria_label' | translate\"\r\n                  nzOverlayClassName=\"aria-label-tooltip\">\r\n                </textarea>\r\n              </div>\r\n\r\n              <!-- C\u1EADp nh\u1EADt li\u00EAn k\u1EBFt -->\r\n              <div class=\"config-font\">\r\n                <!-- type-link -->\r\n                <div class=\"type-link\">\r\n                  <p class=\"type-link__title\">{{'cap_nhat_duong_dan_lien_ket' | translate}}</p>\r\n                  <nz-select class=\"type-link__select\" [(ngModel)]=\"itemEdit.type_link\"\r\n                    (ngModelChange)=\"getBlocksbyPage();updateData(dataRow)\" nzPlaceHolder=\"{{'chon_kieu_lien_ket' | translate}}\"\r\n                    allowClear>\r\n                    <nz-option *ngFor=\"let item of type_link\" [nzValue]=\"item.value\" nzLabel=\"{{item.label | translate}}\"></nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <!-- \u0110\u1EBEN TRANG -->\r\n                <div class=\"connect-page\" *ngIf=\"itemEdit.type_link == 'page_link'\">\r\n                  <nz-select [(ngModel)]=\"itemEdit.link\" (ngModelChange)=\"getBlocksbyPage();updateData(dataRow)\"\r\n                    nzPlaceHolder=\"{{'chon_trang_lien_ket' | translate}}\" allowClear>\r\n                    <nz-option *ngFor=\"let page of arr_link_page\" [nzValue]=\"page.link\" \r\n                    [nzLabel]=\"page['name_' + functionService.selectedLanguageCode] || page.name\">\r\n                    </nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <!-- LI\u00CAN K\u1EBET \u0110I\u1EC0U H\u01AF\u1EDANG -->\r\n                <div class=\"navigation-link\" *ngIf=\"itemEdit.type_link == 'navigation_link'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\">\r\n                    <input type=\"text\" nz-input placeholder=\"/ten-trang-chi-tiet-san-pham/ten-san-pham\"\r\n                      [(ngModel)]=\"itemEdit.link\" (blur)=\"getBlocksbyPage();updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('link')\"></span>\r\n                  </ng-template>\r\n                </div>\r\n\r\n                <!-- \u0110\u1EBEN MAIL -->\r\n                <div class=\"mail-link\" *ngIf=\"itemEdit.type_link == 'mailto'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\"\r\n                  [style.border-color]=\"itemEdit.mailto && !isValidValue({ mailto: itemEdit.mailto }) ? 'red' : '#d9d9d9'\">\r\n                    <input type=\"text\" nz-input placeholder=\"viethas.info@gmail.com\" [(ngModel)]=\"itemEdit.mailto\"\r\n                      (blur)=\"updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('mailto')\"></span>\r\n                  </ng-template>\r\n                  <p *ngIf=\"itemEdit.mailto && !isValidValue({ mailto: itemEdit.mailto })\" class=\"text-danger mt-1 pl-2 lh-base\">\r\n                    {{'email_khong_hop_le' | translate}}\r\n                  </p>\r\n                </div>\r\n\r\n                <!-- \u0110\u1EBEN S\u1ED0 \u0110I\u1EC6N THO\u1EA0I -->\r\n                <div class=\"mail-link\" *ngIf=\"itemEdit.type_link == 'tel'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\"\r\n                  [style.border-color]=\"itemEdit.tel ? 'red' : '#d9d9d9'\">\r\n                    <input type=\"text\" nz-input placeholder=\"0909925354\" [(ngModel)]=\"itemEdit.tel\"\r\n                      (blur)=\"updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('tel')\"></span>\r\n                  </ng-template>\r\n                  <p *ngIf=\"itemEdit.tel\" class=\"text-danger mt-1 pl-2 lh-base\">\r\n                    {{'so_dien_thoai_khong_hop_le' | translate}}\r\n                  </p>\r\n                </div>\r\n\r\n                <!-- H\u00E0nh \u0111\u1ED9ng khi nh\u1EA5n -->\r\n                <div *ngIf=\"itemEdit.type_link == 'page_link' || itemEdit.type_link == 'navigation_link'\" class=\"mt-3\">\r\n                  <label for=\"scroll-select\">{{'hanh_dong_khi_nhan'| translate}}:</label>\r\n                  <br />\r\n                  <nz-select id=\"scroll-select\" [(ngModel)]=\"itemEdit.is_scroll\" (ngModelChange)=\"updateData(dataRow)\">\r\n                    <nz-option *ngFor=\"let item of clickActionOptions\" [nzValue]=\"item.value\" [nzLabel]=\"item.label | translate\"></nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <!-- CU\u1ED8N \u0110\u1EBEN BLOCK -->\r\n                <ng-container style=\"width: 100%\" *ngIf=\"(itemEdit.type_link == 'page_link' || itemEdit.type_link == 'navigation_link') && itemEdit.is_scroll == 'scroll_to_block'\">\r\n                  <nz-select style=\"margin: 8px 0\" [nzPlaceHolder]=\"'chon_khoi' | translate\" [(ngModel)]=\"itemEdit.scroll_block_id\" (ngModelChange)=\"updateData(dataRow)\">\r\n                    <nz-option *ngFor=\"let block of blocks_of_page\" [nzValue]=\"block._id\" [nzLabel]=\"block.name | translate\"></nz-option>\r\n                  </nz-select>\r\n\r\n                  <div class=\"form-group\">\r\n                      <label for=\"scrollDistance\">{{'khoang_cach_chua_ra_de_tranh_menu_co_dinh' | translate }}</label>\r\n                      <input type=\"number\" nz-input class=\"field-fill\" \r\n                      [(ngModel)]=\"itemEdit.scroll_distance\"\r\n                      (input)=\"updateData(dataRow)\" />\r\n                  </div>\r\n                </ng-container>\r\n\r\n                \r\n                <!-- LI\u00CAN K\u1EBET TRANG KH\u00C1C (URL) -->\r\n                <div class=\"connect-link\" *ngIf=\"itemEdit.type_link == 'hyper_link'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\">\r\n                    <input type=\"text\" nz-input placeholder=\"https://viethas.com/\" [(ngModel)]=\"itemEdit.hyper_link\"\r\n                      (blur)=\"updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('hyper_link')\"></span>\r\n                  </ng-template>\r\n                </div>\r\n\r\n\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"itemEdit.type == 'text-repeat' || itemEdit.type == 'button-repeat' || itemEdit.type == 'popup-repeat'\">\r\n              <!-- Ch\u1ECDn ng\u00F4n ng\u1EEF -->\r\n              <div class=\"mb-3\">\r\n                <app-select-language-config [displayLabel]=\"true\" [isAdmin]=\"true\"></app-select-language-config>\r\n              </div>\r\n              <!-- C\u1EADp nh\u1EADt ch\u1EEF -->\r\n              <div class=\"config-font\" style=\"margin-bottom: 20px;\">\r\n                <p class=\"title\">{{'cap_nhat_noi_dung_hien_thi' | translate}}</p>\r\n                <textarea nz-input class=\"content\" placeholder=\"{{'noi_dung' | translate}}...\"\r\n                  [ngModel]=\"itemEdit['value_' + functionService.languageTempCode] | vhLanguage : mapType[itemEdit.type] : data.component\"\r\n                  (ngModelChange)=\"itemEdit['value_' + functionService.languageTempCode] = $event\"\r\n                  (blur)=\"updateData(dataRow)\" [nzAutosize]=\"{ minRows: 3, maxRows: 15 }\"></textarea>\r\n              </div>\r\n              <ng-container *ngIf=\"itemEdit.type == 'button-repeat' || itemEdit.type == 'popup-repeat'\">\r\n                <!-- C\u1EADp nh\u1EADt nh\u00E3n -->\r\n                <div class=\"config-font\" style=\"margin-bottom: 20px;\"\r\n                *ngIf=\"\r\n                  (itemEdit['value_' + functionService.languageTempCode] != undefined) && \r\n                  !itemEdit['value_' + functionService.languageTempCode]?.trim()\r\n                \">\r\n                  <p class=\"title\">{{'cap_nhat_nhan' | translate}}</p>\r\n                  <textarea nz-input class=\"content\" placeholder=\"{{'nhan' | translate}}...\"\r\n                    [ngModel]=\"itemEdit['accessibility_aria_label_' + functionService.languageTempCode] || 'N\u00FAt \u0111i\u1EC1u h\u01B0\u1EDBng'\"\r\n                    (ngModelChange)=\"itemEdit['accessibility_aria_label_' + functionService.languageTempCode] = $event\"\r\n                    (blur)=\"updateData(dataRow)\" [nzAutosize]=\"{ minRows: 3, maxRows: 15 }\"\r\n                    nz-tooltip [nzTooltipTitle]=\"'*_giai_thich_aria_label' | translate\"\r\n                    nzOverlayClassName=\"aria-label-tooltip\">\r\n                  </textarea>\r\n                </div>\r\n                <!-- Bi\u1EC3u t\u01B0\u1EE3ng -->\r\n                <div class=\"d-flex justify-content-between mt-1 mb-3 align-items-center\">\r\n                  <p class=\"title\" style=\"line-height: 1.5; margin: 0\">{{'su_dung_bieu_tuong' | translate}}</p>\r\n                  <nz-switch [(ngModel)]=\"itemEdit.icon_enable\"></nz-switch>\r\n                  <div class=\"d-flex justify-content-between\">\r\n                    <mat-icon>{{ itemEdit.icon_name }}</mat-icon>\r\n                    <button nz-button nzType=\"default\" (click)=\"openDialogChooseIcon()\"\r\n                    style=\"border-radius: 6px; border: 2px solid #333\"\r\n                    [disabled]=\"!itemEdit.icon_enable\">\r\n                      {{'thay_doi' | translate}}\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n              <!-- C\u1EADp nh\u1EADt li\u00EAn k\u1EBFt -->\r\n              <div class=\"config-font\">\r\n                <!-- type-link -->\r\n                <div class=\"type-link\">\r\n                  <p class=\"type-link__title\">{{'cap_nhat_duong_dan_lien_ket' | translate}}</p>\r\n                  <nz-select class=\"type-link__select\" [(ngModel)]=\"itemEdit.type_link\"\r\n                    (ngModelChange)=\"getBlocksbyPage();updateData(dataRow)\" nzPlaceHolder=\"{{'chon_kieu_lien_ket' | translate}}\"\r\n                    allowClear>\r\n                    <nz-option *ngFor=\"let item of type_link\" [nzValue]=\"item.value\" nzLabel=\"{{item.label | translate}}\"></nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <!-- \u0110\u1EBEN TRANG -->\r\n                <div class=\"connect-page\" *ngIf=\"itemEdit.type_link == 'page_link'\">\r\n                  <nz-select [(ngModel)]=\"itemEdit.link\" (ngModelChange)=\"getBlocksbyPage();updateData(dataRow)\"\r\n                    nzPlaceHolder=\"{{'chon_trang_lien_ket' | translate}}\" allowClear>\r\n                    <nz-option *ngFor=\"let page of arr_link_page\" [nzValue]=\"page.link || ''\"\r\n                    [nzLabel]=\"page['name_' + functionService.selectedLanguageCode] || page.name\">\r\n                    </nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <!-- LI\u00CAN K\u1EBET \u0110I\u1EC0U H\u01AF\u1EDANG -->\r\n                <div class=\"navigation-link\" *ngIf=\"itemEdit.type_link == 'navigation_link'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\">\r\n                    <input type=\"text\" nz-input placeholder=\"/ten-trang-chi-tiet-san-pham/ten-san-pham\"\r\n                      [(ngModel)]=\"itemEdit.link\" (blur)=\"getBlocksbyPage();updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('link')\"></span>\r\n                  </ng-template>\r\n                </div>\r\n\r\n                <!-- \u0110\u1EBEN MAIL -->\r\n                <div class=\"mail-link\" *ngIf=\"itemEdit.type_link == 'mailto'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\"\r\n                  [style.border-color]=\"itemEdit.mailto && !isValidValue({ mailto: itemEdit.mailto }) ? 'red' : '#d9d9d9'\">\r\n                    <input type=\"text\" nz-input placeholder=\"viethas.info@gmail.com\" [(ngModel)]=\"itemEdit.mailto\"\r\n                      (blur)=\"updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('mailto')\"></span>\r\n                  </ng-template>\r\n                  <p *ngIf=\"itemEdit.mailto && !isValidValue({ mailto: itemEdit.mailto })\" class=\"text-danger mt-1 pl-2 lh-base\">\r\n                    {{'email_khong_hop_le' | translate}}\r\n                  </p>\r\n                </div>\r\n\r\n                <!-- \u0110\u1EBEN S\u1ED0 \u0110I\u1EC6N THO\u1EA0I -->\r\n                <div class=\"mail-link\" *ngIf=\"itemEdit.type_link == 'tel'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\"\r\n                  [style.border-color]=\"itemEdit.tel ? 'red' : '#d9d9d9'\">\r\n                    <input type=\"text\" nz-input placeholder=\"0909925354\" [(ngModel)]=\"itemEdit.tel\"\r\n                      (blur)=\"updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('tel')\"></span>\r\n                  </ng-template>\r\n                  <p *ngIf=\"itemEdit.tel\" class=\"text-danger mt-1 pl-2 lh-base\">\r\n                    {{'so_dien_thoai_khong_hop_le' | translate}}\r\n                  </p>\r\n                </div>\r\n\r\n                <!-- H\u00E0nh \u0111\u1ED9ng khi nh\u1EA5n -->\r\n                <div *ngIf=\"itemEdit.type_link == 'page_link' || itemEdit.type_link == 'navigation_link'\" class=\"mt-3\">\r\n                  <label for=\"scroll-select\">{{'hanh_dong_khi_nhan'| translate}}:</label>\r\n                  <br />\r\n                  <nz-select id=\"scroll-select\" [(ngModel)]=\"itemEdit.is_scroll\" (ngModelChange)=\"updateData(dataRow)\">\r\n                    <nz-option *ngFor=\"let item of clickActionOptions\" [nzValue]=\"item.value\" [nzLabel]=\"item.label | translate\"></nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <!-- CU\u1ED8N \u0110\u1EBEN BLOCK -->\r\n                <ng-container style=\"width: 100%\" *ngIf=\"(itemEdit.type_link == 'page_link' || itemEdit.type_link == 'navigation_link') && itemEdit.is_scroll == 'scroll_to_block'\">\r\n                  <nz-select style=\"margin: 8px 0\" [nzPlaceHolder]=\"'chon_khoi' | translate\" [(ngModel)]=\"itemEdit.scroll_block_id\" (ngModelChange)=\"updateData(dataRow)\">\r\n                    <nz-option *ngFor=\"let block of blocks_of_page\" [nzValue]=\"block._id\" [nzLabel]=\"block.name | translate\"></nz-option>\r\n                  </nz-select>\r\n\r\n                  <div class=\"form-group\">\r\n                      <label for=\"scrollDistance\">{{'khoang_cach_chua_ra_de_tranh_menu_co_dinh' | translate }}</label>\r\n                      <input type=\"number\" nz-input class=\"field-fill\" \r\n                      [(ngModel)]=\"itemEdit.scroll_distance\"\r\n                      (input)=\"updateData(dataRow)\" />\r\n                  </div>\r\n                </ng-container>\r\n\r\n                <!-- LI\u00CAN K\u1EBET TRANG KH\u00C1C (URL) -->\r\n                <div class=\"connect-link\" *ngIf=\"itemEdit.type_link == 'hyper_link'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\">\r\n                    <input type=\"text\" nz-input placeholder=\"https://viethas.com/\" [(ngModel)]=\"itemEdit.hyper_link\"\r\n                      (blur)=\"updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('hyper_link')\"></span>\r\n                  </ng-template>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- G\u1ECDi h\u1ED9p tho\u1EA1i -->\r\n              <ng-container *ngIf=\"itemEdit.type == 'popup-repeat'\">\r\n                <!-- type-link -->\r\n                <div class=\"type-link\">\r\n                  <p class=\"type-link__title\">{{'goi_hop_thoai' | translate}}</p>\r\n                  <nz-select class=\"type-link__select\" [(ngModel)]=\"itemEdit.id_freeblock\"\r\n                    (ngModelChange)=\"updateData(dataRow)\" nzPlaceHolder=\"{{'goi_hop_thoai' | translate}}\"\r\n                    nzAllowClear>\r\n                    <nz-option *ngFor=\"let block of popupHovers\" [nzValue]=\"block._id\" nzLabel=\"{{block.name | translate}}\"></nz-option>\r\n                  </nz-select>\r\n                </div>\r\n              </ng-container>\r\n              \r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"itemEdit.type == 'date-repeat'\">\r\n              <!-- Ch\u1ECDn ng\u00E0y v\u00E0 gi\u1EDD -->\r\n              <nz-date-picker\r\n                nzShowTime\r\n                nzFormat=\"dd-MM-yyyy HH:mm:ss\"\r\n                [(ngModel)]=\"itemEdit.value\"\r\n                (ngModelChange)=\"onDateTimeChange($event, itemEdit)\"\r\n                (nzOnOk)=\"onDateTimeOk($event, dataRow)\"\r\n              ></nz-date-picker>\r\n              <!-- C\u1EADp nh\u1EADt li\u00EAn k\u1EBFt -->\r\n              <div class=\"config-font\">\r\n                <!-- type-link -->\r\n                <div class=\"type-link\">\r\n                  <p class=\"type-link__title\">{{'cap_nhat_duong_dan_lien_ket' | translate}}</p>\r\n                  <nz-select class=\"type-link__select\" [(ngModel)]=\"itemEdit.type_link\"\r\n                    (ngModelChange)=\"getBlocksbyPage();updateData(dataRow)\" nzPlaceHolder=\"{{'chon_kieu_lien_ket' | translate}}\"\r\n                    allowClear>\r\n                    <nz-option *ngFor=\"let item of type_link\" [nzValue]=\"item.value\" nzLabel=\"{{item.label | translate}}\"></nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <!-- \u0110\u1EBEN TRANG -->\r\n                <div class=\"connect-page\" *ngIf=\"itemEdit.type_link == 'page_link'\">\r\n                  <nz-select [(ngModel)]=\"itemEdit.link\" (ngModelChange)=\"getBlocksbyPage();updateData(dataRow)\"\r\n                    nzPlaceHolder=\"{{'chon_trang_lien_ket' | translate}}\" allowClear>\r\n                    <nz-option *ngFor=\"let page of arr_link_page\" [nzValue]=\"page.link || ''\"\r\n                    [nzLabel]=\"page['name_' + functionService.selectedLanguageCode] || page.name\">\r\n                    </nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <!-- LI\u00CAN K\u1EBET \u0110I\u1EC0U H\u01AF\u1EDANG -->\r\n                <div class=\"navigation-link\" *ngIf=\"itemEdit.type_link == 'navigation_link'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\">\r\n                    <input type=\"text\" nz-input placeholder=\"/ten-trang-chi-tiet-san-pham/ten-san-pham\"\r\n                      [(ngModel)]=\"itemEdit.link\" (blur)=\"getBlocksbyPage();updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('link')\"></span>\r\n                  </ng-template>\r\n                </div>\r\n\r\n                <!-- \u0110\u1EBEN MAIL -->\r\n                <div class=\"mail-link\" *ngIf=\"itemEdit.type_link == 'mailto'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\"\r\n                  [style.border-color]=\"itemEdit.mailto && !isValidValue({ mailto: itemEdit.mailto }) ? 'red' : '#d9d9d9'\">\r\n                    <input type=\"text\" nz-input placeholder=\"viethas.info@gmail.com\" [(ngModel)]=\"itemEdit.mailto\"\r\n                      (blur)=\"updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('mailto')\"></span>\r\n                  </ng-template>\r\n                  <p *ngIf=\"itemEdit.mailto && !isValidValue({ mailto: itemEdit.mailto })\" class=\"text-danger mt-1 pl-2 lh-base\">\r\n                    {{'email_khong_hop_le' | translate}}\r\n                  </p>\r\n                </div>\r\n\r\n                <!-- \u0110\u1EBEN S\u1ED0 \u0110I\u1EC6N THO\u1EA0I -->\r\n                <div class=\"mail-link\" *ngIf=\"itemEdit.type_link == 'tel'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\"\r\n                  [style.border-color]=\"itemEdit.tel ? 'red' : '#d9d9d9'\">\r\n                    <input type=\"text\" nz-input placeholder=\"0909925354\" [(ngModel)]=\"itemEdit.tel\"\r\n                      (blur)=\"updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('tel')\"></span>\r\n                  </ng-template>\r\n                  <p *ngIf=\"itemEdit.tel\" class=\"text-danger mt-1 pl-2 lh-base\">\r\n                    {{'so_dien_thoai_khong_hop_le' | translate}}\r\n                  </p>\r\n                </div>\r\n\r\n                <!-- H\u00E0nh \u0111\u1ED9ng khi nh\u1EA5n -->\r\n                <div *ngIf=\"itemEdit.type_link == 'page_link' || itemEdit.type_link == 'navigation_link'\" class=\"mt-3\">\r\n                  <label for=\"scroll-select\">{{'hanh_dong_khi_nhan'| translate}}:</label>\r\n                  <br />\r\n                  <nz-select id=\"scroll-select\" [(ngModel)]=\"itemEdit.is_scroll\" (ngModelChange)=\"updateData(dataRow)\">\r\n                    <nz-option *ngFor=\"let item of clickActionOptions\" [nzValue]=\"item.value\" [nzLabel]=\"item.label | translate\"></nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <!-- CU\u1ED8N \u0110\u1EBEN BLOCK -->\r\n                <ng-container style=\"width: 100%\" *ngIf=\"(itemEdit.type_link == 'page_link' || itemEdit.type_link == 'navigation_link') && itemEdit.is_scroll == 'scroll_to_block'\">\r\n                  <nz-select style=\"margin: 8px 0\" [nzPlaceHolder]=\"'chon_khoi' | translate\" [(ngModel)]=\"itemEdit.scroll_block_id\" (ngModelChange)=\"updateData(dataRow)\">\r\n                    <nz-option *ngFor=\"let block of blocks_of_page\" [nzValue]=\"block._id\" [nzLabel]=\"block.name | translate\"></nz-option>\r\n                  </nz-select>\r\n\r\n                  <div class=\"form-group\">\r\n                      <label for=\"scrollDistance\">{{'khoang_cach_chua_ra_de_tranh_menu_co_dinh' | translate }}</label>\r\n                      <input type=\"number\" nz-input class=\"field-fill\" \r\n                      [(ngModel)]=\"itemEdit.scroll_distance\"\r\n                      (input)=\"updateData(dataRow)\" />\r\n                  </div>\r\n                </ng-container>\r\n\r\n                <!-- LI\u00CAN K\u1EBET TRANG KH\u00C1C (URL) -->\r\n                <div class=\"connect-link\" *ngIf=\"itemEdit.type_link == 'hyper_link'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\">\r\n                    <input type=\"text\" nz-input placeholder=\"https://viethas.com/\" [(ngModel)]=\"itemEdit.hyper_link\"\r\n                      (blur)=\"updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('hyper_link')\"></span>\r\n                  </ng-template>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"itemEdit.type == 'video-repeat'\">\r\n              <!-- text-area url -->\r\n              <div class=\"config-font\" style=\"margin-bottom: 20px;\">\r\n                <p class=\"title\">{{'cap_nhat_noi_dung_hien_thi' | translate}}</p>\r\n                <textarea nz-input class=\"content\" placeholder=\"{{'noi_dung' | translate}}...\"\r\n                  [(ngModel)]=\"itemEdit['iframe']\"\r\n                  (blur)=\"updateVideoRepeat('is_mute', $event);updateData(dataRow)\"\r\n                  [nzAutosize]=\"{ minRows: 3, maxRows: 15 }\">\r\n                </textarea>\r\n\r\n                <button nzType=\"primary\" nz-button (click)=\"isOpenGuideVideo = true\"\r\n                class=\"_btn _btn_add d-flex align-items-center right-all-content mr-2 my-2\">\r\n                  {{'huong_dan_khach_hang_chen_video_youtube' | translate}}\r\n                </button>\r\n\r\n                <!-- \u00C2M THANH -->\r\n                <div class=\"border-type mt-4\">\r\n                  <h4>{{'am_thanh' | translate}}</h4>\r\n                  <nz-switch [(ngModel)]=\"itemEdit.is_mute\" (ngModelChange)=\"updateVideoRepeat('is_mute', $event);updateData(dataRow)\"></nz-switch>\r\n                </div>\r\n                \r\n                <!-- T\u1EF0 \u0110\u1ED8NG L\u1EB6P -->\r\n                <div class=\"border-type\">\r\n                  <h4>{{'tu_dong_lap' | translate}}</h4>\r\n                  <nz-switch [(ngModel)]=\"itemEdit.loop\" (ngModelChange)=\"updateVideoRepeat('loop', $event);updateData(dataRow)\"></nz-switch>\r\n                </div>\r\n                \r\n                <!-- TH\u00C0NH C\u00D4NG C\u1EE4 -->\r\n                <div class=\"border-type\">\r\n                  <h4>{{'thanh_cong_cu' | translate}}</h4>\r\n                  <nz-switch [(ngModel)]=\"itemEdit.controls\"\r\n                    (ngModelChange)=\"updateVideoRepeat('controls', $event);updateData(dataRow)\"></nz-switch>\r\n                </div>\r\n                \r\n                <!-- T\u1EF0 \u0110\u1ED8NG PH\u00C1T -->\r\n                <!-- autoplay ph\u1EA3i \u0111i v\u1EDBi mute, n\u00EAn n\u1EBFu kh\u00F4ng mute th\u00EC autoplay s\u1EBD t\u1EF1 \u0111\u1ED9ng set false (Xem t\u1EA1i https://developer.chrome.com/blog/autoplay/) -->\r\n                <div *ngIf=\"!itemEdit.is_mute\" class=\"border-type\">\r\n                  <h4>{{'tu_dong_phat' | translate}}</h4>\r\n                  <nz-switch [(ngModel)]=\"itemEdit.autoplay\"\r\n                    (ngModelChange)=\"updateVideoRepeat('autoplay', $event);updateData(dataRow)\"></nz-switch>\r\n                </div>\r\n\r\n                <!-- C\u1EACP NH\u1EACT M\u00D4 T\u1EA2 N\u1ED8I DUNG C\u1EE6A VIDEO -->\r\n                <div class=\"config-font\" style=\"margin-bottom: 20px;\">\r\n                  <p class=\"title\">{{'cap_nhat_mo_ta_noi_dung' | translate}}</p>\r\n                  <textarea nz-input class=\"content\" placeholder=\"{{'noi_dung' | translate}}...\"\r\n                    [ngModel]=\"itemEdit['accessibility_title_' + functionService.languageTempCode] || 'Video youtube'\"\r\n                    (ngModelChange)=\"itemEdit['accessibility_title_' + functionService.languageTempCode] = $event\"\r\n                    (blur)=\"updateData(dataRow)\" [nzAutosize]=\"{ minRows: 3, maxRows: 15 }\"\r\n                    nz-tooltip [nzTooltipTitle]=\"'*_giai_thich_aria_label' | translate\"\r\n                    nzOverlayClassName=\"aria-label-tooltip\">\r\n                  </textarea>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"itemEdit.type == 'map-repeat'\">\r\n              <nz-radio-group [(ngModel)]=\"radioValue\">\r\n                <label nz-radio nzValue=\"location\">{{ 'nhap_dia_chi' | translate }}</label>\r\n                <label nz-radio nzValue=\"iframe\">{{ 'dung_the_nhung' | translate }}</label>\r\n              </nz-radio-group>\r\n              <!-- Th\u00EAm \u0111\u1ECBa ch\u1EC9 b\u1EB1ng c\u00E1ch nh\u1EADp -->\r\n              <div class=\"container-font\" *ngIf=\"radioValue == 'location'\">\r\n                <div class=\"config-text\" style=\"width:100%\">\r\n                  <mat-form-field style=\"width:100%\">\r\n                    <mat-label>{{ 'nhap_dia_chi' | translate }} </mat-label>\r\n                    <textarea matInput [(ngModel)]=\"itemEdit.local\" (blur)=\"getLocal_atwMapRepeat(itemEdit, dataRow)\"></textarea>\r\n                  </mat-form-field>\r\n                </div>\r\n              </div>\r\n              <!-- Th\u00EAm \u0111\u1ECBa ch\u1EC9 b\u1EB1ng iframe -->\r\n              <div *ngIf=\"radioValue == 'iframe'\" class=\"map__item--change-link\">\r\n                <div>\r\n                  <input #myInput nz-input \r\n                    placeholder=\"<iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.3565404084443!2d106' width='600' height='450' style='border:0;' allowfullscreen='' loading='lazy' referrerpolicy='no-referrer-when-downgrade'></iframe>\"\r\n                    class=\"input_iframe form-group\" nzSize=\"large\" [(ngModel)]=\"itemEdit.iframe\" />\r\n                </div>\r\n                <div class=\"map__item--change-link--button d-flex flex-column\">\r\n                  <button nz-button nzType=\"primary\" (click)=\"getLink_atwMapRepeat(itemEdit, dataRow)\">{{'cap_nhat' | translate}}</button>\r\n                </div>\r\n              </div>\r\n\r\n              <button nzType=\"primary\" nz-button (click)=\"isOpenGuideMap = true\"\r\n                class=\"_btn _btn_add d-flex align-items-center right-all-content mr-2 my-2\">\r\n                {{ 'huong_dan_khach_hang_chen_ban_do' | translate }}\r\n              </button>\r\n\r\n              <!-- C\u1EACP NH\u1EACT M\u00D4 T\u1EA2 N\u1ED8I DUNG C\u1EE6A B\u1EA2N \u0110\u1ED2 -->\r\n              <div class=\"config-font\" style=\"margin-bottom: 20px;\">\r\n                <p class=\"title\">{{'cap_nhat_mo_ta_noi_dung' | translate}}</p>\r\n                <textarea nz-input class=\"content\" placeholder=\"{{'noi_dung' | translate}}...\"\r\n                  [ngModel]=\"itemEdit['accessibility_title_' + functionService.languageTempCode] || 'B\u1EA3n \u0111\u1ED3'\"\r\n                  (ngModelChange)=\"itemEdit['accessibility_title_' + functionService.languageTempCode] = $event\"\r\n                  (blur)=\"updateData(dataRow)\" [nzAutosize]=\"{ minRows: 3, maxRows: 15 }\"\r\n                  nz-tooltip [nzTooltipTitle]=\"'*_giai_thich_aria_label' | translate\"\r\n                  nzOverlayClassName=\"aria-label-tooltip\">\r\n                </textarea>\r\n              </div>\r\n            </ng-container>\r\n          </ng-container>\r\n        </nz-modal>\r\n\r\n        <!-- Modal Chuy\u1EC3n \u1EA3nh l\u00EAn server -->\r\n        <nz-modal nzTitle=\"{{ 'chuyen_anh_len_server' | translate}}\" [(nzVisible)]=\"isShowUploadToServer\"\r\n          (nzOnCancel)=\"cancelUploadToServer()\" [nzContent]=\"modalContent\" [nzFooter]=\"modalFooter\">\r\n          <ng-template #modalContent>\r\n            <p>{{'nen_anh_tai_len' | translate}}</p>\r\n            <nz-select style=\"margin-bottom: 15px\" [(ngModel)]=\"compressType\"\r\n              nzPlaceHolder=\"{{'nen_anh_tai_len' | translate}}\" nzAllowClear>\r\n              <nz-option [nzValue]=\"'no-compress'\"\r\n                nzLabel=\"{{'khong_nen_anh_sau_khi_tai_len' | translate}}\"></nz-option>\r\n              <nz-option [nzValue]=\"'custom'\" nzLabel=\"{{'nen_anh_theo_kich_thuoc_tu_chon' | translate}}\"></nz-option>\r\n            </nz-select>\r\n\r\n            <mat-form-field *ngIf=\"compressType == 'custom'\" class=\"mr-4\">\r\n              <mat-label>{{'chieu_rong' | translate}}</mat-label>\r\n              <input matInput placeholder=\"{{'chieu_rong' | translate}}\" [(ngModel)]=\"compressWidth\">\r\n            </mat-form-field>\r\n\r\n            <mat-form-field *ngIf=\"compressType == 'custom'\">\r\n              <mat-label>{{'chieu_cao' | translate}}</mat-label>\r\n              <input matInput placeholder=\"{{'chieu_cao' | translate}}\" [(ngModel)]=\"compressHeight\">\r\n            </mat-form-field>\r\n          </ng-template>\r\n          <ng-template #modalFooter>\r\n            <button nz-button nzType=\"default\" (click)=\"cancelUploadToServer()\">{{'khong' | translate}}</button>\r\n            <button nz-button nzType=\"primary\" (click)=\"okUploadToServer(itemEdit)\"\r\n              [nzLoading]=\"uploadToServerLoading\">{{'dong_y' | translate}}</button>\r\n          </ng-template>\r\n        </nz-modal>\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n</nz-layout>\r\n\r\n<!-- ------------------------------------------------- H\u1ED8P THO\u1EA0I H\u01AF\u1EDANG D\u1EAAN CH\u00C8N MAP -------------------------------------------------- -->\r\n<nz-modal [(nzVisible)]=\"isOpenGuideMap\" (nzOnCancel)=\"isOpenGuideMap = false\" [nzFooter]=\"null\"\r\n  [nzStyle]=\"{ height: '80vh', top: '32px', overflowY : 'scroll'}\" [nzWidth]=\"'70%'\">\r\n  <ng-container *nzModalContent>\r\n    <div class=\"modal-success\">\r\n      <h4 class=\"title\">\r\n        {{ 'huong_dan_khach_hang_chen_ban_do_vao_trang_web' | translate }}\r\n      </h4>\r\n      <span>\r\n        <i class=\"bi bi-x-lg\"></i>\r\n      </span>\r\n      <div class=\"list-image\">\r\n        <div class=\"item-image\">\r\n          <img src=\"/assets/root/images/system/imgs/map_b1.jpg\" alt=\"image 1\">\r\n          <div class=\"note-content\">\r\n            {{ 'buoc' | translate }} 1: {{ 'truy_cap_vao_duong_dan' | translate }} <a href=\"https://www.google.com/maps\"\r\n              target=\"_blank\">https://www.google.com/maps</a>\r\n          </div>\r\n        </div>\r\n        <div class=\"item-image\">\r\n          <img src=\"/assets/root/images/system/imgs/map_b1b2.jpg\" alt=\"image 2\">\r\n          <div class=\"note-content\">\r\n            {{ 'buoc' | translate }} 2: {{ 'nhap_dia_chi_ban_muon_chia_se_hoac_chen' | translate }}. {{ 'sau_khi_ban_do_da_chon_chinh_xac_vi_tri_ma_dia_chi_vua_nhap' | translate }},\r\n            <span style=\"color:#00a859\"> {{ 'nhan_vao' | translate }} <span style=\"font-weight: bold\">{{ 'nut_chia_se' | translate }}.</span></span>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"list-image pt-3\">\r\n        <div class=\"item-image\">\r\n          <img src=\"/assets/root/images/system/imgs/map_b1b3.jpg\" alt=\"image 3\">\r\n          <div class=\"note-content\">\r\n            {{ 'buoc' | translate }} 3: {{ 'nhan_vao' | translate }} <span style=\"color: black\">{{ 'tab_nhung_ban_do' | translate }}</span> \r\n            <span style=\"color:#00a859; font-weight: bold;\"> & {{ 'nhan_nut_sao_chep_html' | translate }}.</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"item-image\">\r\n          <img src=\"/assets/root/images/system/imgs/map_b1b4.jpg\" alt=\"image 4\">\r\n          <div class=\"note-content\">\r\n            {{ 'buoc' | translate }} 4: <span style=\"color:#00a859\"> {{ 'dan_ma_nhung_vao_o_duong_dan_sau_do_nhan' | translate }} \r\n            <span style=\"font-weight: bold;\">{{ 'nut_cap_nhat' | translate }}</span> </span> {{ 'de_he_thong_lay_ban_do_ve' | translate }}.\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<!-- ------------------------------------------------- H\u1ED8P THO\u1EA0I H\u01AF\u1EDANG D\u1EAAN CH\u00C8N VIDEO -------------------------------------------------- -->\r\n<nz-modal [(nzVisible)]=\"isOpenGuideVideo\" (nzOnCancel)=\"isOpenGuideVideo = false\" [nzFooter]=\"null\"\r\n  [nzStyle]=\"{ height: '500px', top: ' 10px' }\" [nzWidth]=\"'70%'\">\r\n  <ng-container *nzModalContent>\r\n      <div class=\"modal-success\">\r\n          <h4 class=\"title\">\r\n              {{'huong_dan_khach_hang_chen_video_youtube_vao_trang_web' | translate}}\r\n          </h4>\r\n          <span>\r\n              <i class=\"bi bi-x-lg\"></i>\r\n          </span>\r\n          <div class=\"list-image\">\r\n              <div class=\"item-image\">\r\n                  <img src=\"/assets/root/images/system/imgs/video_B1.jpg\" alt=\"image 1\">\r\n                  <div class=\"note-content\">\r\n                      {{ 'buoc' | translate }} 1: {{ 'truy_cap_vao_video_tren_youtube_muon_chen_sau_do' | translate }}\r\n                      <span style=\"color:#00a859\"> {{ 'nhan_vao' | translate }}\r\n                        <span style=\"font-weight: bold;\"> {{ 'nut' | translate}} Share</span>\r\n                      </span> {{ 'o_duoi_video' | translate }}.\r\n                  </div>\r\n              </div>\r\n              <div class=\"item-image\">\r\n                  <img src=\"/assets/root/images/system/imgs/video_b2.jpg\" alt=\"image_2\">\r\n                  <div class=\"note-content\">\r\n                      {{ 'buoc' | translate }} 2: \r\n                      <span style=\"color:#00a859\">{{ 'nhan_vao' | translate }} <span style=\"font-weight: bold;\">{{ 'nut' | translate}} Embed</span></span>\r\n                      {{ 'de_lay_ma_nhung' | translate }}.\r\n                  </div>\r\n              </div>\r\n\r\n          </div>\r\n          <div class=\"list-image pt-2\">\r\n              <div class=\"item-image\">\r\n                  <img src=\"/assets/root/images/system/imgs/video_b3.jpg\" alt=\"image 3\">\r\n                  <div class=\"note-content\">\r\n                      {{ 'buoc' | translate }} 3: \r\n                      <span style=\"color:#00a859\">{{ 'nhan_vao' | translate }} <span style=\"font-weight: bold;\">{{ 'nut' | translate}} Copy</span></span>,\r\n                      {{ 'he_thong_tu_dong_sao_chep_ma_nhung_cua_video' | translate }}.\r\n                  </div>\r\n              </div>\r\n              <div class=\"item-image\">\r\n                  <img src=\"/assets/root/images/system/imgs/video_b4.jpg\" alt=\"image 3\">\r\n                  <div class=\"note-content\">\r\n                      {{ 'buoc' | translate }} 4: \r\n                      <span style=\"color:#00a859\">{{ 'dan_ma_nhung_vao_o_duong_dan_sau_do_nhan' | translate }} \r\n                        <span style=\"font-weight: bold;\">{{ 'nut_cap_nhat' | translate }}</span> \r\n                      </span> {{ 'de_he_thong_lay_video_tu_youtube_ve' | translate }}.\r\n                  </div>\r\n              </div>\r\n          </div>\r\n      </div>\r\n  </ng-container>\r\n</nz-modal>", styles: ["nz-layout{background:#ffffff 0% 0% no-repeat padding-box;padding:16px;height:100%}nz-layout .title{color:var(--ion-color-vh-green);font-size:1.1rem}nz-layout ._btn{border-radius:18px!important;font-size:.9rem}nz-layout ._btn_add{color:#fff;background:#008848 0% 0% no-repeat padding-box;border:1px solid #008848}nz-layout ._btn_add span{color:#fff}nz-layout ._btn_soft{color:#373737;background:#ffffff 0% 0% no-repeat padding-box;border:1px solid #c8c7cc}nz-layout ._btn_soft span{color:#373737}nz-layout ._btn_delete{color:#fff;background:#ff000a 0% 0% no-repeat padding-box;border:1px solid #ff000a}nz-layout ._btn_delete span{color:#fff}nz-layout .search{justify-content:flex-end;display:flex;position:relative}nz-layout .search nz-input-group{border-radius:18px}nz-layout .search input{width:20rem}nz-layout nz-table{font-size:14px!important}nz-layout nz-table th.ant-table-cell{background-color:#529bfc;color:#fff}nz-layout nz-table tbody .icon-action span{font-size:18px;cursor:pointer}nz-layout nz-table tbody .icon-action span:first-child{color:var(--ion-color-vh-green);margin-right:8px}nz-layout nz-table tbody .icon-action span:nth-child(2){color:var(--ion-color-vh-red)}nz-layout nz-table ._select{color:#373737;font-weight:500;text-align:left;display:inline-flex;align-items:center;font-size:14px}nz-layout nz-table ._select ._option{color:#373737;background-color:#fff;font-weight:500;border-radius:5px;text-align:left;margin:8px!important;padding:8px!important;font-size:14px}nz-layout nz-table ._select ._option:hover{color:#fff;background-color:#00a859;cursor:pointer}nz-layout nz-table ._select:focus{outline:none;box-shadow:0 0 0 1px #cbcbcb}nz-layout nz-table ::ng-deep .ant-table-header.nz-table-hide-scrollbar{display:contents}nz-layout nz-table ::ng-deep .ant-select:not(.ant-select-customize-input) .ant-select-selector{border-radius:18px!important}nz-layout .input-container{display:flex;background-color:var(--ion-color-vh-green);color:#fff}nz-layout .goto-page{padding:6px 18px;display:flex;align-items:center;justify-content:center;cursor:pointer}.pagiItem.active{background-color:var(--ion-color-vh-green);color:#fff!important}.ant-input-affix-wrapper{border:1px solid #c8c7cc;border-radius:5px}.pagination{display:flex;align-items:center;justify-content:center}.pagiItem{padding:8px 16px;cursor:pointer;color:var(--ion-color-vh-green);border-top:1px solid #ddd;border-bottom:1px solid #ddd;border-right:1px solid #ddd}.pagiItem:nth-child(1){border-left:1px solid #ddd}.page-go{background-color:#a54f4e;color:#fff}.pagination-list-button{display:flex}.ant-btn{border:none!important}:host ::ng-deep .nz-table .custom-tbody{min-height:350px}.editable-cell{position:relative;padding:5px 12px;cursor:pointer;margin-bottom:10px;display:flex}.editable-cell:hover{outline:1px solid #d9d9d9;border-radius:4px}.image-container{display:flex}.type-link__title,.type-link{margin-bottom:5px}.btn-upload,.btn-add{color:#fff;background-color:#008848;padding:4px 14px;text-align:center}.btn-delete{color:red}label{margin:0}.item-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:-moz-fit-content;width:fit-content;display:inline-block}.title-admin{font-size:18px;font-weight:bold;color:#008848;text-align:center;margin:15px 15px 15px 0}._icon_connect{display:flex;justify-content:center;align-items:center;align-self:center;color:#008848;width:25px;height:25px;padding:0;border:1px solid #c8c7cc;border-radius:50%;background-color:#fff;line-height:normal;margin-bottom:-4px}._icon_connect:hover{border-color:#008848}._icon_connect_active{border-color:#008848!important}.image-right{width:100%}.modal-success .title{display:flex;color:var(--ion-color-vh-green);font-weight:bold;justify-content:center;align-items:center;font-size:18px;margin-bottom:20px}.modal-success .list-image{display:flex;justify-content:space-around}.modal-success .list-image .item-image{width:40%;align-items:center}.modal-success .list-image .item-image .note-content{padding:10px 0;text-align:center}.aria-label-tooltip .ant-tooltip-inner{text-align:justify!important;white-space:pre-line!important}.border-type{display:flex;justify-content:space-between}.config-font .title{margin-bottom:4px;margin-top:8px}\n"], components: [{ type: i4.NzLayoutComponent, selector: "nz-layout", exportAs: ["nzLayout"] }, { type: SelectLanguageConfigComponent, selector: "app-select-language-config", inputs: ["isAdmin", "displayLabel", "isSetLanguageCode", "languages"], outputs: ["handleChangeMultiLanguage"] }, { type: i6.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { type: i7.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzPaginationPosition", "nzScroll", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange"], exportAs: ["nzTable"] }, { type: i7.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { type: i7.NzTbodyComponent, selector: "tbody" }, { type: i12$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.NzModalComponent, selector: "nz-modal", inputs: ["nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzZIndex", "nzWidth", "nzCloseIcon", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel", "nzTitle", "nzFooter", "nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzContent", "nzComponentParams", "nzWrapClassName", "nzClassName", "nzStyle", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { type: i6$1.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { type: i6$1.NzOptionComponent, selector: "nz-option", inputs: ["nzLabel", "nzValue", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzSize", "nzSearch", "nzCompact", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzSuffix"], exportAs: ["nzInputGroup"] }, { type: i10.NzSwitchComponent, selector: "nz-switch", inputs: ["nzLoading", "nzDisabled", "nzControl", "nzCheckedChildren", "nzUnCheckedChildren", "nzSize"], exportAs: ["nzSwitch"] }, { type: i16$1.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzPlaceHolder", "nzPopupStyle", "nzSize", "nzShowToday", "nzMode", "nzShowNow", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzShowTime", "nzFormat", "nzLocale", "nzOpen", "nzDisabledDate", "nzDropdownClassName", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzRanges"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { type: i5$2.NzRadioGroupComponent, selector: "nz-radio-group", inputs: ["nzDisabled", "nzButtonStyle", "nzSize", "nzName"], exportAs: ["nzRadioGroup"] }, { type: i5$2.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus"], exportAs: ["nzRadio"] }], directives: [{ type: i17.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { type: i14.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { type: i7.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { type: i7.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { type: i7.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { type: i12$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "disabled"], exportAs: ["nzInput"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i12$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i22.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus", "nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nz-popconfirm", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDanger", "nzCancelText", "nzIcon"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { type: i18.NzIconDirective, selector: "[nz-icon]", inputs: ["nzRotate", "nzSpin", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { type: i4$1.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { type: i5$3.NzImageDirective, selector: "img[nz-image]", inputs: ["nzSrc", "nzSrcset", "nzDisablePreview", "nzFallback", "nzPlaceholder"], exportAs: ["nzImage"] }, { type: i16.NzPopoverDirective, selector: "[nz-popover]", inputs: ["nzPopoverTrigger", "nzPopoverPlacement", "nzPopoverBackdrop", "nzPopoverArrowPointAtCenter", "nzPopoverTitle", "nzPopoverContent", "nz-popover", "nzPopoverOrigin", "nzPopoverVisible", "nzPopoverMouseEnterDelay", "nzPopoverMouseLeaveDelay", "nzPopoverOverlayClassName", "nzPopoverOverlayStyle"], outputs: ["nzPopoverVisibleChange"], exportAs: ["nzPopover"] }, { type: i5$1.MatLabel, selector: "mat-label" }, { type: i15.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5.NzAutosizeDirective, selector: "textarea[nzAutosize]", inputs: ["nzAutosize"], exportAs: ["nzAutosize"] }, { type: i21.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitleContext", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipTitle", "nz-tooltip", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { type: i5.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { type: i12.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }], pipes: { "translate": i12$2.TranslatePipe, "vhLanguage": VhLanguagePipe, "date": i12$1.DatePipe } });
+AtwFrameRepeatAdmin.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AtwFrameRepeatAdmin, selector: "atw-frame-repeat-admin", inputs: { data: "data", type: "type" }, usesOnChanges: true, ngImport: i0, template: "<!-- TABLE \u1EDE TRANG ADMIN -->\r\n<nz-layout id=\"purchase-invoice-today\">\r\n  <!-- Ph\u1EA7n header -->\r\n  <div class=\"purchase-invoice-today-header\">\r\n    <div class=\"row p-0 m-0\">\r\n      <div class=\"col-4 p-0 m-0 d-flex align-items-center\">\r\n       \r\n      </div>\r\n      <div class=\"col-4 p-0 m-0 d-flex align-items-center justify-content-center\">\r\n        <!-- Ch\u1ECDn thi\u1EBFt b\u1ECB -->\r\n        <div *ngIf=\"showChooseDevice\" class=\"device\">\r\n          <div *ngIf=\"subproject.desktop_template_display\" class=\"icon-field p-2\" role=\"button\"\r\n            [class.active]=\"deviceTemp == 'desktop'\" (click)=\"deviceTemp = 'desktop'\">\r\n            <span nz-icon [nzType]=\"'desktop'\" nzTheme=\"outline\" data-toggle=\"tooltip\" [title]=\"'desktop'\"\r\n              nz-tooltip nzTooltipTitle=\"{{'may_tinh' | translate}}\" nzTooltipPlacement=\"bottom\"></span>\r\n          </div>\r\n          <div *ngIf=\"subproject.tablet_landscape_template_display\" class=\"icon-field p-2\" role=\"button\"\r\n            [class.active]=\"deviceTemp == 'tablet_landscape'\" (click)=\"deviceTemp = 'tablet_landscape'\">\r\n            <span nz-icon style=\"transform: rotate(90deg); scale: 1.2\" [nzType]=\"'tablet'\" nzTheme=\"outline\"\r\n              data-toggle=\"tooltip\" [title]=\"'tablet'\" nz-tooltip\r\n              nzTooltipTitle=\"{{'may_tinh_bang_ngang' | translate}}\" nzTooltipPlacement=\"bottom\"></span>\r\n          </div>\r\n          <div *ngIf=\"subproject.tablet_portrait_template_display\" class=\"icon-field p-2\" role=\"button\"\r\n            [class.active]=\"deviceTemp == 'tablet_portrait'\" (click)=\"deviceTemp = 'tablet_portrait'\">\r\n            <span nz-icon style=\"scale: 1.2\" [nzType]=\"'tablet'\" nzTheme=\"outline\" data-toggle=\"tooltip\"\r\n              [title]=\"'tablet'\" nz-tooltip nzTooltipTitle=\"{{'may_tinh_bang_doc' | translate}}\"\r\n              nzTooltipPlacement=\"bottom\"></span>\r\n          </div>\r\n          <div *ngIf=\"subproject.mobile_landscape_template_display\" class=\"icon-field p-2\" role=\"button\"\r\n            [class.active]=\"deviceTemp == 'mobile_landscape'\" (click)=\"deviceTemp = 'mobile_landscape'\">\r\n            <span nz-icon style=\"transform: rotate(90deg)\" [nzType]=\"'mobile'\" nzTheme=\"outline\"\r\n              data-toggle=\"tooltip\" [title]=\"'mobile'\" nz-tooltip\r\n              nzTooltipTitle=\"{{'dien_thoai_ngang' | translate}}\" nzTooltipPlacement=\"bottom\"></span>\r\n          </div>\r\n          <div *ngIf=\"subproject.mobile_portrait_template_display\" class=\"icon-field p-2\" role=\"button\"\r\n            [class.active]=\"deviceTemp == 'mobile_portrait'\" (click)=\"deviceTemp = 'mobile_portrait'\">\r\n            <span nz-icon [nzType]=\"'mobile'\" nzTheme=\"outline\" data-toggle=\"tooltip\" [title]=\"'mobile'\" nz-tooltip\r\n              nzTooltipTitle=\"{{'dien_thoai_doc' | translate}}\" nzTooltipPlacement=\"bottom\"></span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- N\u00FAt th\u00EAm s\u1EA3n ph\u1EA9m v\u00E0o frame -->\r\n      <div class=\"col-4 p-0 m-0 d-flex align-items-center justify-content-end\">\r\n        <!-- Ch\u1ECDn ng\u00F4n ng\u1EEF -->\r\n        <div class=\"mr-2\">\r\n          <app-select-language-config [isAdmin]=\"true\"></app-select-language-config>\r\n        </div>\r\n        <button nzType=\"primary\" class=\"_btn _btn_add d-flex align-items-center right-all-content mr-2\" nz-button\r\n          (click)=\"handleAddData()\">\r\n          {{\r\n          'them_du_lieu' | translate\r\n          }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- Ph\u1EA7n table -->\r\n  <div style=\"margin-top: 16px; height: 500px\">\r\n    <nz-table #editRowTable nzBordered [nzData]=\"listOfData\" [nzLoading]=\"loading\" [nzTotal]=\"total\" nzShowSizeChanger\r\n      [nzPageSizeOptions]=\"[5, 10, 20, 50]\" [nzPageSize]=\"pageSize\" [nzPageIndex]=\"pageIndex\" [nzScroll]=\"{ y: '400px' }\">\r\n      <thead>\r\n        <tr>\r\n          <th nzWidth=\"10%\">{{'STT' | translate}}</th>\r\n          <th nzWidth=\"80%\">{{'doi_tuong' | translate}}</th>\r\n          <th nzWidth=\"10%\">{{'thao_tac'| translate}}</th>\r\n        </tr>\r\n      </thead>\r\n      <tbody>\r\n        <tr *ngFor=\"let dataRow of editRowTable.data\">\r\n          <td>\r\n            <div class=\"editable-cell\" [hidden]=\"itemEdit?._id === dataRow._id\" (click)=\"itemEdit = dataRow;\">\r\n              {{ dataRow.sort }}\r\n            </div>\r\n            <input [hidden]=\"itemEdit?._id !== dataRow._id\" type=\"text\" nz-input [(ngModel)]=\"dataRow.sort\"\r\n              (blur)=\"updateOrdinal(dataRow)\" />\r\n          </td>\r\n\r\n          <td>\r\n            <ng-container *ngFor=\"let item of dataRow.data\">\r\n              <ng-container *ngIf=\"item.type == 'image-repeat'\">\r\n                <div class=\"editable-cell\" (click)=\"chooseItemEdit(item, dataRow)\">\r\n                  <strong class=\"item-name\">{{ findObjectName(item) }}</strong>:\r\n                  <img\r\n                    width=\"100px\" height=\"100px\"\r\n                    [src]=\"item[deviceTemp + '_value'] || item.value\"\r\n                    alt=\"image-repeat\" class=\"mb-2 item-img\"\r\n                  />\r\n                  <!-- M\u00F4 t\u1EA3 n\u1ED9i dung c\u1EE7a \u1EA3nh -->\r\n                  <strong class=\"item-name ml-4\">{{ 'mo_ta' | translate }}</strong>\r\n                  : {{ item['accessibility_alt_' + functionService.languageTempCode] || '\u1EA2nh' }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"item.type == 'text-repeat'\">\r\n                <div class=\"editable-cell\" (click)=\"chooseItemEdit(item, dataRow)\">\r\n                  <strong class=\"item-name\">{{ findObjectName(item) }}</strong>: {{ item['value_' +\r\n                  functionService.languageTempCode] | vhLanguage : 'value' : data.component }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"item.type == 'button-repeat'\">\r\n                <div class=\"editable-cell\" (click)=\"chooseItemEdit(item, dataRow)\">\r\n                  <strong class=\"item-name\">{{ findObjectName(item) }}</strong>\r\n                  : {{ item['value_' + functionService.languageTempCode] | vhLanguage : 'button' : data.component }}\r\n                  <ng-container *ngIf=\"\r\n                    (item['value_' + functionService.languageTempCode] != undefined) && \r\n                    !item['value_' + functionService.languageTempCode]?.trim()\r\n                  \">\r\n                    <strong class=\"item-name ml-4\">{{ 'nhan' | translate }}</strong>\r\n                    : {{ item['accessibility_aria_label_' + functionService.languageTempCode] || 'N\u00FAt \u0111i\u1EC1u h\u01B0\u1EDBng' }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"item.icon_enable\">\r\n                    <strong class=\"item-name ml-4\">{{ 'bieu_tuong' | translate }}</strong>\r\n                    : <mat-icon *ngIf=\"item.icon_name\">{{ item.icon_name }}</mat-icon>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"item.type == 'popup-repeat'\">\r\n                <div class=\"editable-cell\" (click)=\"chooseItemEdit(item, dataRow)\">\r\n                  <strong class=\"item-name\">{{ findObjectName(item) }}</strong>\r\n                  : {{ item['value_' + functionService.languageTempCode] | vhLanguage : 'popup' : data.component }}\r\n                  <ng-container *ngIf=\"\r\n                    (item['value_' + functionService.languageTempCode] != undefined) && \r\n                    !item['value_' + functionService.languageTempCode]?.trim()\r\n                  \">\r\n                    <strong class=\"item-name ml-4\">{{ 'nhan' | translate }}</strong>\r\n                    : {{ item['accessibility_aria_label_' + functionService.languageTempCode] || 'N\u00FAt g\u1ECDi h\u1ED9p tho\u1EA1i' }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"item.icon_enable\">\r\n                    <strong class=\"item-name ml-4\">{{ 'bieu_tuong' | translate }}</strong>\r\n                    : <mat-icon *ngIf=\"item.icon_name\">{{ item.icon_name }}</mat-icon>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"item.type == 'date-repeat'\">\r\n                <div class=\"editable-cell\" (click)=\"chooseItemEdit(item, dataRow)\">\r\n                  <strong class=\"item-name\">{{ findObjectName(item) }}</strong>: {{ item.value | date: 'dd-MM-yyyy HH:mm:ss ' }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"item.type == 'video-repeat'\">\r\n                <div class=\"editable-cell\" (click)=\"chooseItemEdit(item, dataRow)\"> \r\n                  <strong class=\"item-name\">{{ findObjectName(item) }}</strong>:\r\n                  <iframe width=\"150px\" height=\"100px\" [src]=\"sanitizer.bypassSecurityTrustResourceUrl(item.value)\" alt=\"video-repeat\" class=\"mb-2\">\r\n                  </iframe>\r\n                  <!-- M\u00F4 t\u1EA3 n\u1ED9i dung c\u1EE7a video -->\r\n                  <strong class=\"item-name ml-4\">{{ 'mo_ta' | translate }}</strong>\r\n                  : {{ item['accessibility_title_' + functionService.languageTempCode] || 'Video youtube' }}\r\n                </div>\r\n              </ng-container>\r\n\r\n              <ng-container *ngIf=\"item.type == 'map-repeat'\">\r\n                <div class=\"editable-cell\" (click)=\"chooseItemEdit(item, dataRow)\">\r\n                  <strong class=\"item-name\">{{ findObjectName(item) }}</strong>: \r\n                  <iframe width=\"200px\" height=\"100px\" scrolling=\"no\" loading=\"lazy\"\r\n                  [src]=\"sanitizer.bypassSecurityTrustResourceUrl(item.value)\"\r\n                  referrerpolicy=\"no-referrer-when-downgrade\" alt=\"map-repeat\"\r\n                  class=\"mb-2\" style=\"pointer-events: none;\" allow=\"geolocation 'none'\">\r\n                  </iframe>\r\n                  <!-- M\u00F4 t\u1EA3 n\u1ED9i dung c\u1EE7a b\u1EA3n \u0111\u1ED3 -->\r\n                  <strong class=\"item-name ml-4\">{{ 'mo_ta' | translate }}</strong>\r\n                  : {{ item['accessibility_title_' + functionService.languageTempCode] || 'B\u1EA3n \u0111\u1ED3' }}\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </td>\r\n          <td>\r\n            <a nz-popconfirm [nzPopconfirmTitle]=\"'ban_co_chac_chan_muon_xoa' | translate\"\r\n              (nzOnConfirm)=\"deleteRow(dataRow._id)\"><span nz-icon nzType=\"delete\" class=\"btn-delete\"\r\n                nzTheme=\"outline\"></span></a>\r\n          </td>\r\n        </tr>\r\n\r\n        <!-- MODAL EDIT -->\r\n        <nz-modal [(nzVisible)]=\"isOpenModal\" (nzOnCancel)=\"isOpenModal = false\" [nzFooter]=\"null\">\r\n          <ng-container *nzModalContent>\r\n            <ng-container *ngIf=\"itemEdit.type == 'image-repeat'\">\r\n              <div class=\"d-flex justify-content-between align-items-center mt-4 mb-2\">\r\n                <span>{{'chon_thiet_bi' | translate}}: </span>\r\n                <nz-select style=\"width: 80%\" [ngModel]=\"deviceTemp\" (ngModelChange)=\"deviceTemp = $event\"\r\n                nzPlaceHolder=\"{{'chon_thiet_bi' | translate}}\" nzAllowClear>\r\n                  <ng-container *ngFor=\"let d of functionService.devices\">\r\n                    <nz-option *ngIf=\"subproject?.[d.value + '_template_display']\"\r\n                      [nzValue]=\"d.value\" nzLabel=\"{{d.label | translate}}\"\r\n                    ></nz-option>\r\n                  </ng-container>\r\n                </nz-select>\r\n              </div>\r\n              <div class=\"image-container\">\r\n                <img \r\n                  nz-image width=\"100px\" height=\"100px\" alt=\"L\u1ED7i h\u00ECnh \u1EA3nh\" class=\"mb-2 mr-2\"\r\n                  [nzSrc]=\"itemEdit[deviceTemp + '_value'] || itemEdit.value\"\r\n                  nz-tooltip nzTooltipPlacement=\"left\"\r\n                  [nzTooltipTitle]=\"itemEdit[deviceTemp + '_value']?.includes(id_subproject) ? tooltipImgInfo : null\"\r\n                />\r\n                <div class=\"image-right\">\r\n                  <div style=\"margin-bottom: 10px; display:flex; align-items: center; gap: 1rem;\">\r\n                    <button class=\"_icon_connect  _icon_connect_active\">\r\n                      <!-- icon upload t\u1EEB thi\u1EBFt b\u1ECB -->\r\n                      <label for=\"upload\" nz-icon nzType=\"upload\" nzTheme=\"outline\" *ngIf=\"source == 'device'\"\r\n                        (click)=\"startEdit(itemEdit)\"></label>\r\n                      <input type=\"file\" id=\"upload\" hidden (change)=\"onUpload($event, dataRow)\">\r\n                      <!-- icon upload t\u1EEB th\u01B0 vi\u1EC7n -->\r\n                      <span nz-icon nzType=\"picture\" nzTheme=\"outline\" *ngIf=\"source == 'library'\"\r\n                        (click)=\"startEdit(itemEdit); openLibrary(dataRow)\"></span>\r\n                      <!-- icon \u1EA3nh mi\u1EC5n ph\u00ED -->\r\n                      <span nz-icon nzType=\"cloud-upload\" nzTheme=\"outline\" *ngIf=\"source == 'free_img'\"\r\n                        (click)=\"startEdit(itemEdit); openFreeImage(dataRow)\"></span>\r\n                      <!-- icon \u0111\u01B0\u1EDDng d\u1EABn \u1EA3nh -->\r\n                      <span nz-popover nzPopoverTitle=\"{{'duong_dan_anh' | translate}}\" nzPopoverTrigger=\"click\"\r\n                        [nzPopoverContent]=\"contentTemplate\" nz-icon nzType=\"disconnect\" nzTheme=\"outline\"\r\n                        *ngIf=\"source == 'url'\">\r\n                      </span>\r\n                      <ng-template #contentTemplate>\r\n                        <input style=\"width: 260px;\" class=\"input mr-1\" type=\"text\" [(ngModel)]=\"itemEdit.value\"\r\n                          [value]=\"itemEdit.value\" placeholder=\"{{'nhap_duong_dan_lien_ket' | translate}}\">\r\n                        <span role=\"button\" class=\"text-success\" (click)=\"updateData(dataRow)\">{{'ap_dung' |\r\n                          translate}}</span>\r\n                      </ng-template>\r\n                    </button>\r\n\r\n                    <button nz-button nzType=\"primary\" (click)=\"openUploadToServer()\"\r\n                    *ngIf=\"!(itemEdit[deviceTemp + '_value'] || itemEdit.value)?.includes(id_subproject)\">\r\n                      {{'chuyen_anh_len_server' | translate}}\r\n                    </button>\r\n                  </div>\r\n                  <div style=\"margin-bottom: 10px;\">\r\n                    <nz-select [(ngModel)]=\"source\">\r\n                      <nz-option *ngFor=\"let source of sources\" [nzValue]=\"source.value\"\r\n                        [nzLabel]=\"source.label | translate\"></nz-option>\r\n                    </nz-select>\r\n                  </div>\r\n\r\n                  <div *ngIf=\"source == 'device'\">\r\n                    <p class=\"m-0\">{{'nen_anh_tai_len' | translate}}</p>\r\n                    <nz-select style=\"margin-bottom: 15px\" [(ngModel)]=\"compressType\"\r\n                      nzPlaceHolder=\"{{'nen_anh_tai_len' | translate}}\" nzAllowClear>\r\n                      <nz-option [nzValue]=\"'no-compress'\" nzLabel=\"{{'khong_nen_anh_sau_khi_tai_len' | translate}}\"></nz-option>\r\n                      <nz-option [nzValue]=\"'compress-frame'\" nzLabel=\"{{'nen_anh_theo_ti_le_khung_hien_thi_anh' | translate}}\"></nz-option>\r\n                      <nz-option [nzValue]=\"'custom'\" nzLabel=\"{{'nen_anh_theo_kich_thuoc_tu_chon' | translate}}\"></nz-option>\r\n                    </nz-select>\r\n\r\n                    <div style=\"display:flex; align-items:center; gap: 8px\">\r\n                      <mat-form-field *ngIf=\"compressType == 'custom'\">\r\n                        <mat-label>{{'chieu_rong' | translate}}</mat-label>\r\n                        <input matInput placeholder=\"{{'chieu_rong' | translate}}\" [(ngModel)]=\"compressWidth\">\r\n                      </mat-form-field>\r\n\r\n                      <mat-form-field *ngIf=\"compressType == 'custom'\">\r\n                        <mat-label>{{'chieu_cao' | translate}}</mat-label>\r\n                        <input matInput placeholder=\"{{'chieu_cao' | translate}}\" [(ngModel)]=\"compressHeight\">\r\n                      </mat-form-field>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <button *ngIf=\"isDesignImageSizeValid\" nz-tooltip class=\"w-100\" nz-button nzType=\"primary\"\r\n                  [nzTooltipTitle]=\"'chi_dung_cap_nhat_kich_thuoc_anh_cho_nhung_hinh_anh_dung_yen_khong_co_hieu_ung_truot' | translate\"\r\n                  (click)=\"updateDesignImageSize(itemEdit, dataRow)\">\r\n                    {{'cap_nhat_kich_thuoc_anh_theo_kich_thuoc_thiet_ke' | translate}}\r\n                  </button>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- C\u1EADp nh\u1EADt m\u00F4 t\u1EA3 n\u1ED9i dung \u1EA3nh -->\r\n              <div class=\"config-font\" style=\"margin-bottom: 20px;\">\r\n                <p class=\"title\">{{'cap_nhat_mo_ta_noi_dung' | translate}}</p>\r\n                <textarea nz-input class=\"content\" placeholder=\"{{'noi_dung' | translate}}...\"\r\n                  [ngModel]=\"itemEdit['accessibility_alt_' + functionService.languageTempCode] || '\u1EA2nh'\"\r\n                  (ngModelChange)=\"itemEdit['accessibility_alt_' + functionService.languageTempCode] = $event\"\r\n                  (blur)=\"updateData(dataRow)\" [nzAutosize]=\"{ minRows: 3, maxRows: 15 }\"\r\n                  nz-tooltip [nzTooltipTitle]=\"'*_giai_thich_aria_label' | translate\"\r\n                  nzOverlayClassName=\"aria-label-tooltip\">\r\n                </textarea>\r\n              </div>\r\n\r\n              <!-- C\u1EADp nh\u1EADt li\u00EAn k\u1EBFt -->\r\n              <div class=\"config-font\">\r\n                <!-- type-link -->\r\n                <div class=\"type-link\">\r\n                  <p class=\"type-link__title\">{{'cap_nhat_duong_dan_lien_ket' | translate}}</p>\r\n                  <nz-select class=\"type-link__select\" [(ngModel)]=\"itemEdit.type_link\"\r\n                    (ngModelChange)=\"getBlocksbyPage();updateData(dataRow)\" nzPlaceHolder=\"{{'chon_kieu_lien_ket' | translate}}\"\r\n                    allowClear>\r\n                    <nz-option *ngFor=\"let item of type_link\" [nzValue]=\"item.value\" nzLabel=\"{{item.label | translate}}\"></nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <!-- \u0110\u1EBEN TRANG -->\r\n                <div class=\"connect-page\" *ngIf=\"itemEdit.type_link == 'page_link'\">\r\n                  <nz-select [(ngModel)]=\"itemEdit.link\" (ngModelChange)=\"getBlocksbyPage();updateData(dataRow)\"\r\n                    nzPlaceHolder=\"{{'chon_trang_lien_ket' | translate}}\" allowClear>\r\n                    <nz-option *ngFor=\"let page of arr_link_page\" [nzValue]=\"page.link\" \r\n                    [nzLabel]=\"page['name_' + functionService.selectedLanguageCode] || page.name\">\r\n                    </nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <!-- LI\u00CAN K\u1EBET \u0110I\u1EC0U H\u01AF\u1EDANG -->\r\n                <div class=\"navigation-link\" *ngIf=\"itemEdit.type_link == 'navigation_link'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\">\r\n                    <input type=\"text\" nz-input placeholder=\"/ten-trang-chi-tiet-san-pham/ten-san-pham\"\r\n                      [(ngModel)]=\"itemEdit.link\" (blur)=\"getBlocksbyPage();updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('link')\"></span>\r\n                  </ng-template>\r\n                </div>\r\n\r\n                <!-- \u0110\u1EBEN MAIL -->\r\n                <div class=\"mail-link\" *ngIf=\"itemEdit.type_link == 'mailto'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\"\r\n                  [style.border-color]=\"itemEdit.mailto && !isValidValue({ mailto: itemEdit.mailto }) ? 'red' : '#d9d9d9'\">\r\n                    <input type=\"text\" nz-input placeholder=\"viethas.info@gmail.com\" [(ngModel)]=\"itemEdit.mailto\"\r\n                      (blur)=\"updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('mailto')\"></span>\r\n                  </ng-template>\r\n                  <p *ngIf=\"itemEdit.mailto && !isValidValue({ mailto: itemEdit.mailto })\" class=\"text-danger mt-1 pl-2 lh-base\">\r\n                    {{'email_khong_hop_le' | translate}}\r\n                  </p>\r\n                </div>\r\n\r\n                <!-- \u0110\u1EBEN S\u1ED0 \u0110I\u1EC6N THO\u1EA0I -->\r\n                <div class=\"mail-link\" *ngIf=\"itemEdit.type_link == 'tel'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\"\r\n                  [style.border-color]=\"itemEdit.tel ? 'red' : '#d9d9d9'\">\r\n                    <input type=\"text\" nz-input placeholder=\"0909925354\" [(ngModel)]=\"itemEdit.tel\"\r\n                      (blur)=\"updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('tel')\"></span>\r\n                  </ng-template>\r\n                  <p *ngIf=\"itemEdit.tel\" class=\"text-danger mt-1 pl-2 lh-base\">\r\n                    {{'so_dien_thoai_khong_hop_le' | translate}}\r\n                  </p>\r\n                </div>\r\n\r\n                <!-- H\u00E0nh \u0111\u1ED9ng khi nh\u1EA5n -->\r\n                <div *ngIf=\"itemEdit.type_link == 'page_link' || itemEdit.type_link == 'navigation_link'\" class=\"mt-3\">\r\n                  <label for=\"scroll-select\">{{'hanh_dong_khi_nhan'| translate}}:</label>\r\n                  <br />\r\n                  <nz-select id=\"scroll-select\" [(ngModel)]=\"itemEdit.is_scroll\" (ngModelChange)=\"updateData(dataRow)\">\r\n                    <nz-option *ngFor=\"let item of clickActionOptions\" [nzValue]=\"item.value\" [nzLabel]=\"item.label | translate\"></nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <!-- CU\u1ED8N \u0110\u1EBEN BLOCK -->\r\n                <ng-container style=\"width: 100%\" *ngIf=\"(itemEdit.type_link == 'page_link' || itemEdit.type_link == 'navigation_link') && itemEdit.is_scroll == 'scroll_to_block'\">\r\n                  <nz-select style=\"margin: 8px 0\" [nzPlaceHolder]=\"'chon_khoi' | translate\" [(ngModel)]=\"itemEdit.scroll_block_id\" (ngModelChange)=\"updateData(dataRow)\">\r\n                    <nz-option *ngFor=\"let block of blocks_of_page\" [nzValue]=\"block._id\" [nzLabel]=\"block.name | translate\"></nz-option>\r\n                  </nz-select>\r\n\r\n                  <div class=\"form-group\">\r\n                      <label for=\"scrollDistance\">{{'khoang_cach_chua_ra_de_tranh_menu_co_dinh' | translate }}</label>\r\n                      <input type=\"number\" nz-input class=\"field-fill\" \r\n                      [(ngModel)]=\"itemEdit.scroll_distance\"\r\n                      (input)=\"updateData(dataRow)\" />\r\n                  </div>\r\n                </ng-container>\r\n\r\n                \r\n                <!-- LI\u00CAN K\u1EBET TRANG KH\u00C1C (URL) -->\r\n                <div class=\"connect-link\" *ngIf=\"itemEdit.type_link == 'hyper_link'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\">\r\n                    <input type=\"text\" nz-input placeholder=\"https://viethas.com/\" [(ngModel)]=\"itemEdit.hyper_link\"\r\n                      (blur)=\"updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('hyper_link')\"></span>\r\n                  </ng-template>\r\n                </div>\r\n\r\n\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"itemEdit.type == 'text-repeat' || itemEdit.type == 'button-repeat' || itemEdit.type == 'popup-repeat'\">\r\n              <!-- Ch\u1ECDn ng\u00F4n ng\u1EEF -->\r\n              <div class=\"mb-3\">\r\n                <app-select-language-config [displayLabel]=\"true\" [isAdmin]=\"true\"></app-select-language-config>\r\n              </div>\r\n              <!-- C\u1EADp nh\u1EADt ch\u1EEF -->\r\n              <div class=\"config-font\" style=\"margin-bottom: 20px;\">\r\n                <p class=\"title\">{{'cap_nhat_noi_dung_hien_thi' | translate}}</p>\r\n                <textarea nz-input class=\"content\" placeholder=\"{{'noi_dung' | translate}}...\"\r\n                  [ngModel]=\"itemEdit['value_' + functionService.languageTempCode] | vhLanguage : mapType[itemEdit.type] : data.component\"\r\n                  (ngModelChange)=\"itemEdit['value_' + functionService.languageTempCode] = $event\"\r\n                  (blur)=\"updateData(dataRow)\" [nzAutosize]=\"{ minRows: 3, maxRows: 15 }\"></textarea>\r\n              </div>\r\n              <ng-container *ngIf=\"itemEdit.type == 'button-repeat' || itemEdit.type == 'popup-repeat'\">\r\n                <!-- C\u1EADp nh\u1EADt nh\u00E3n -->\r\n                <div class=\"config-font\" style=\"margin-bottom: 20px;\"\r\n                *ngIf=\"\r\n                  (itemEdit['value_' + functionService.languageTempCode] != undefined) && \r\n                  !itemEdit['value_' + functionService.languageTempCode]?.trim()\r\n                \">\r\n                  <p class=\"title\">{{'cap_nhat_nhan' | translate}}</p>\r\n                  <textarea nz-input class=\"content\" placeholder=\"{{'nhan' | translate}}...\"\r\n                    [ngModel]=\"itemEdit['accessibility_aria_label_' + functionService.languageTempCode] || 'N\u00FAt \u0111i\u1EC1u h\u01B0\u1EDBng'\"\r\n                    (ngModelChange)=\"itemEdit['accessibility_aria_label_' + functionService.languageTempCode] = $event\"\r\n                    (blur)=\"updateData(dataRow)\" [nzAutosize]=\"{ minRows: 3, maxRows: 15 }\"\r\n                    nz-tooltip [nzTooltipTitle]=\"'*_giai_thich_aria_label' | translate\"\r\n                    nzOverlayClassName=\"aria-label-tooltip\">\r\n                  </textarea>\r\n                </div>\r\n                <!-- Bi\u1EC3u t\u01B0\u1EE3ng -->\r\n                <div class=\"d-flex justify-content-between mt-1 mb-3 align-items-center\">\r\n                  <p class=\"title\" style=\"line-height: 1.5; margin: 0\">{{'su_dung_bieu_tuong' | translate}}</p>\r\n                  <nz-switch [(ngModel)]=\"itemEdit.icon_enable\"></nz-switch>\r\n                  <div class=\"d-flex justify-content-between\">\r\n                    <mat-icon>{{ itemEdit.icon_name }}</mat-icon>\r\n                    <button nz-button nzType=\"default\" (click)=\"openDialogChooseIcon()\"\r\n                    style=\"border-radius: 6px; border: 2px solid #333\"\r\n                    [disabled]=\"!itemEdit.icon_enable\">\r\n                      {{'thay_doi' | translate}}\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n              <!-- C\u1EADp nh\u1EADt li\u00EAn k\u1EBFt -->\r\n              <div class=\"config-font\">\r\n                <!-- type-link -->\r\n                <div class=\"type-link\">\r\n                  <p class=\"type-link__title\">{{'cap_nhat_duong_dan_lien_ket' | translate}}</p>\r\n                  <nz-select class=\"type-link__select\" [(ngModel)]=\"itemEdit.type_link\"\r\n                    (ngModelChange)=\"getBlocksbyPage();updateData(dataRow)\" nzPlaceHolder=\"{{'chon_kieu_lien_ket' | translate}}\"\r\n                    allowClear>\r\n                    <nz-option *ngFor=\"let item of type_link\" [nzValue]=\"item.value\" nzLabel=\"{{item.label | translate}}\"></nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <!-- \u0110\u1EBEN TRANG -->\r\n                <div class=\"connect-page\" *ngIf=\"itemEdit.type_link == 'page_link'\">\r\n                  <nz-select [(ngModel)]=\"itemEdit.link\" (ngModelChange)=\"getBlocksbyPage();updateData(dataRow)\"\r\n                    nzPlaceHolder=\"{{'chon_trang_lien_ket' | translate}}\" allowClear>\r\n                    <nz-option *ngFor=\"let page of arr_link_page\" [nzValue]=\"page.link || ''\"\r\n                    [nzLabel]=\"page['name_' + functionService.selectedLanguageCode] || page.name\">\r\n                    </nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <!-- LI\u00CAN K\u1EBET \u0110I\u1EC0U H\u01AF\u1EDANG -->\r\n                <div class=\"navigation-link\" *ngIf=\"itemEdit.type_link == 'navigation_link'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\">\r\n                    <input type=\"text\" nz-input placeholder=\"/ten-trang-chi-tiet-san-pham/ten-san-pham\"\r\n                      [(ngModel)]=\"itemEdit.link\" (blur)=\"getBlocksbyPage();updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('link')\"></span>\r\n                  </ng-template>\r\n                </div>\r\n\r\n                <!-- \u0110\u1EBEN MAIL -->\r\n                <div class=\"mail-link\" *ngIf=\"itemEdit.type_link == 'mailto'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\"\r\n                  [style.border-color]=\"itemEdit.mailto && !isValidValue({ mailto: itemEdit.mailto }) ? 'red' : '#d9d9d9'\">\r\n                    <input type=\"text\" nz-input placeholder=\"viethas.info@gmail.com\" [(ngModel)]=\"itemEdit.mailto\"\r\n                      (blur)=\"updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('mailto')\"></span>\r\n                  </ng-template>\r\n                  <p *ngIf=\"itemEdit.mailto && !isValidValue({ mailto: itemEdit.mailto })\" class=\"text-danger mt-1 pl-2 lh-base\">\r\n                    {{'email_khong_hop_le' | translate}}\r\n                  </p>\r\n                </div>\r\n\r\n                <!-- \u0110\u1EBEN S\u1ED0 \u0110I\u1EC6N THO\u1EA0I -->\r\n                <div class=\"mail-link\" *ngIf=\"itemEdit.type_link == 'tel'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\"\r\n                  [style.border-color]=\"itemEdit.tel ? 'red' : '#d9d9d9'\">\r\n                    <input type=\"text\" nz-input placeholder=\"0909925354\" [(ngModel)]=\"itemEdit.tel\"\r\n                      (blur)=\"updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('tel')\"></span>\r\n                  </ng-template>\r\n                  <p *ngIf=\"itemEdit.tel\" class=\"text-danger mt-1 pl-2 lh-base\">\r\n                    {{'so_dien_thoai_khong_hop_le' | translate}}\r\n                  </p>\r\n                </div>\r\n\r\n                <!-- H\u00E0nh \u0111\u1ED9ng khi nh\u1EA5n -->\r\n                <div *ngIf=\"itemEdit.type_link == 'page_link' || itemEdit.type_link == 'navigation_link'\" class=\"mt-3\">\r\n                  <label for=\"scroll-select\">{{'hanh_dong_khi_nhan'| translate}}:</label>\r\n                  <br />\r\n                  <nz-select id=\"scroll-select\" [(ngModel)]=\"itemEdit.is_scroll\" (ngModelChange)=\"updateData(dataRow)\">\r\n                    <nz-option *ngFor=\"let item of clickActionOptions\" [nzValue]=\"item.value\" [nzLabel]=\"item.label | translate\"></nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <!-- CU\u1ED8N \u0110\u1EBEN BLOCK -->\r\n                <ng-container style=\"width: 100%\" *ngIf=\"(itemEdit.type_link == 'page_link' || itemEdit.type_link == 'navigation_link') && itemEdit.is_scroll == 'scroll_to_block'\">\r\n                  <nz-select style=\"margin: 8px 0\" [nzPlaceHolder]=\"'chon_khoi' | translate\" [(ngModel)]=\"itemEdit.scroll_block_id\" (ngModelChange)=\"updateData(dataRow)\">\r\n                    <nz-option *ngFor=\"let block of blocks_of_page\" [nzValue]=\"block._id\" [nzLabel]=\"block.name | translate\"></nz-option>\r\n                  </nz-select>\r\n\r\n                  <div class=\"form-group\">\r\n                      <label for=\"scrollDistance\">{{'khoang_cach_chua_ra_de_tranh_menu_co_dinh' | translate }}</label>\r\n                      <input type=\"number\" nz-input class=\"field-fill\" \r\n                      [(ngModel)]=\"itemEdit.scroll_distance\"\r\n                      (input)=\"updateData(dataRow)\" />\r\n                  </div>\r\n                </ng-container>\r\n\r\n                <!-- LI\u00CAN K\u1EBET TRANG KH\u00C1C (URL) -->\r\n                <div class=\"connect-link\" *ngIf=\"itemEdit.type_link == 'hyper_link'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\">\r\n                    <input type=\"text\" nz-input placeholder=\"https://viethas.com/\" [(ngModel)]=\"itemEdit.hyper_link\"\r\n                      (blur)=\"updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('hyper_link')\"></span>\r\n                  </ng-template>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- G\u1ECDi h\u1ED9p tho\u1EA1i -->\r\n              <ng-container *ngIf=\"itemEdit.type == 'popup-repeat'\">\r\n                <!-- type-link -->\r\n                <div class=\"type-link\">\r\n                  <p class=\"type-link__title\">{{'goi_hop_thoai' | translate}}</p>\r\n                  <nz-select class=\"type-link__select\" [(ngModel)]=\"itemEdit.id_freeblock\"\r\n                    (ngModelChange)=\"updateData(dataRow)\" nzPlaceHolder=\"{{'goi_hop_thoai' | translate}}\"\r\n                    nzAllowClear>\r\n                    <nz-option *ngFor=\"let block of popupHovers\" [nzValue]=\"block._id\" nzLabel=\"{{block.name | translate}}\"></nz-option>\r\n                  </nz-select>\r\n                </div>\r\n              </ng-container>\r\n              \r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"itemEdit.type == 'date-repeat'\">\r\n              <!-- Ch\u1ECDn ng\u00E0y v\u00E0 gi\u1EDD -->\r\n              <nz-date-picker\r\n                nzShowTime\r\n                nzFormat=\"dd-MM-yyyy HH:mm:ss\"\r\n                [(ngModel)]=\"itemEdit.value\"\r\n                (ngModelChange)=\"onDateTimeChange($event, itemEdit)\"\r\n                (nzOnOk)=\"onDateTimeOk($event, dataRow)\"\r\n              ></nz-date-picker>\r\n              <!-- C\u1EADp nh\u1EADt li\u00EAn k\u1EBFt -->\r\n              <div class=\"config-font\">\r\n                <!-- type-link -->\r\n                <div class=\"type-link\">\r\n                  <p class=\"type-link__title\">{{'cap_nhat_duong_dan_lien_ket' | translate}}</p>\r\n                  <nz-select class=\"type-link__select\" [(ngModel)]=\"itemEdit.type_link\"\r\n                    (ngModelChange)=\"getBlocksbyPage();updateData(dataRow)\" nzPlaceHolder=\"{{'chon_kieu_lien_ket' | translate}}\"\r\n                    allowClear>\r\n                    <nz-option *ngFor=\"let item of type_link\" [nzValue]=\"item.value\" nzLabel=\"{{item.label | translate}}\"></nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <!-- \u0110\u1EBEN TRANG -->\r\n                <div class=\"connect-page\" *ngIf=\"itemEdit.type_link == 'page_link'\">\r\n                  <nz-select [(ngModel)]=\"itemEdit.link\" (ngModelChange)=\"getBlocksbyPage();updateData(dataRow)\"\r\n                    nzPlaceHolder=\"{{'chon_trang_lien_ket' | translate}}\" allowClear>\r\n                    <nz-option *ngFor=\"let page of arr_link_page\" [nzValue]=\"page.link || ''\"\r\n                    [nzLabel]=\"page['name_' + functionService.selectedLanguageCode] || page.name\">\r\n                    </nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <!-- LI\u00CAN K\u1EBET \u0110I\u1EC0U H\u01AF\u1EDANG -->\r\n                <div class=\"navigation-link\" *ngIf=\"itemEdit.type_link == 'navigation_link'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\">\r\n                    <input type=\"text\" nz-input placeholder=\"/ten-trang-chi-tiet-san-pham/ten-san-pham\"\r\n                      [(ngModel)]=\"itemEdit.link\" (blur)=\"getBlocksbyPage();updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('link')\"></span>\r\n                  </ng-template>\r\n                </div>\r\n\r\n                <!-- \u0110\u1EBEN MAIL -->\r\n                <div class=\"mail-link\" *ngIf=\"itemEdit.type_link == 'mailto'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\"\r\n                  [style.border-color]=\"itemEdit.mailto && !isValidValue({ mailto: itemEdit.mailto }) ? 'red' : '#d9d9d9'\">\r\n                    <input type=\"text\" nz-input placeholder=\"viethas.info@gmail.com\" [(ngModel)]=\"itemEdit.mailto\"\r\n                      (blur)=\"updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('mailto')\"></span>\r\n                  </ng-template>\r\n                  <p *ngIf=\"itemEdit.mailto && !isValidValue({ mailto: itemEdit.mailto })\" class=\"text-danger mt-1 pl-2 lh-base\">\r\n                    {{'email_khong_hop_le' | translate}}\r\n                  </p>\r\n                </div>\r\n\r\n                <!-- \u0110\u1EBEN S\u1ED0 \u0110I\u1EC6N THO\u1EA0I -->\r\n                <div class=\"mail-link\" *ngIf=\"itemEdit.type_link == 'tel'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\"\r\n                  [style.border-color]=\"itemEdit.tel ? 'red' : '#d9d9d9'\">\r\n                    <input type=\"text\" nz-input placeholder=\"0909925354\" [(ngModel)]=\"itemEdit.tel\"\r\n                      (blur)=\"updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('tel')\"></span>\r\n                  </ng-template>\r\n                  <p *ngIf=\"itemEdit.tel\" class=\"text-danger mt-1 pl-2 lh-base\">\r\n                    {{'so_dien_thoai_khong_hop_le' | translate}}\r\n                  </p>\r\n                </div>\r\n\r\n                <!-- H\u00E0nh \u0111\u1ED9ng khi nh\u1EA5n -->\r\n                <div *ngIf=\"itemEdit.type_link == 'page_link' || itemEdit.type_link == 'navigation_link'\" class=\"mt-3\">\r\n                  <label for=\"scroll-select\">{{'hanh_dong_khi_nhan'| translate}}:</label>\r\n                  <br />\r\n                  <nz-select id=\"scroll-select\" [(ngModel)]=\"itemEdit.is_scroll\" (ngModelChange)=\"updateData(dataRow)\">\r\n                    <nz-option *ngFor=\"let item of clickActionOptions\" [nzValue]=\"item.value\" [nzLabel]=\"item.label | translate\"></nz-option>\r\n                  </nz-select>\r\n                </div>\r\n\r\n                <!-- CU\u1ED8N \u0110\u1EBEN BLOCK -->\r\n                <ng-container style=\"width: 100%\" *ngIf=\"(itemEdit.type_link == 'page_link' || itemEdit.type_link == 'navigation_link') && itemEdit.is_scroll == 'scroll_to_block'\">\r\n                  <nz-select style=\"margin: 8px 0\" [nzPlaceHolder]=\"'chon_khoi' | translate\" [(ngModel)]=\"itemEdit.scroll_block_id\" (ngModelChange)=\"updateData(dataRow)\">\r\n                    <nz-option *ngFor=\"let block of blocks_of_page\" [nzValue]=\"block._id\" [nzLabel]=\"block.name | translate\"></nz-option>\r\n                  </nz-select>\r\n\r\n                  <div class=\"form-group\">\r\n                      <label for=\"scrollDistance\">{{'khoang_cach_chua_ra_de_tranh_menu_co_dinh' | translate }}</label>\r\n                      <input type=\"number\" nz-input class=\"field-fill\" \r\n                      [(ngModel)]=\"itemEdit.scroll_distance\"\r\n                      (input)=\"updateData(dataRow)\" />\r\n                  </div>\r\n                </ng-container>\r\n\r\n                <!-- LI\u00CAN K\u1EBET TRANG KH\u00C1C (URL) -->\r\n                <div class=\"connect-link\" *ngIf=\"itemEdit.type_link == 'hyper_link'\">\r\n                  <nz-input-group [nzSuffix]=\"suffixIconClose\">\r\n                    <input type=\"text\" nz-input placeholder=\"https://viethas.com/\" [(ngModel)]=\"itemEdit.hyper_link\"\r\n                      (blur)=\"updateData(dataRow)\" />\r\n                  </nz-input-group>\r\n                  <ng-template #suffixIconClose>\r\n                    <span nz-icon nzType=\"close-circle\" class=\"icon-close\" (click)=\"removeLink('hyper_link')\"></span>\r\n                  </ng-template>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"itemEdit.type == 'video-repeat'\">\r\n              <!-- text-area url -->\r\n              <div class=\"config-font\" style=\"margin-bottom: 20px;\">\r\n                <p class=\"title\">{{'cap_nhat_noi_dung_hien_thi' | translate}}</p>\r\n                <textarea nz-input class=\"content\" placeholder=\"{{'noi_dung' | translate}}...\"\r\n                  [(ngModel)]=\"itemEdit['iframe']\"\r\n                  (blur)=\"updateVideoRepeat('is_mute', $event);updateData(dataRow)\"\r\n                  [nzAutosize]=\"{ minRows: 3, maxRows: 15 }\">\r\n                </textarea>\r\n\r\n                <button nzType=\"primary\" nz-button (click)=\"isOpenGuideVideo = true\"\r\n                class=\"_btn _btn_add d-flex align-items-center right-all-content mr-2 my-2\">\r\n                  {{'huong_dan_khach_hang_chen_video_youtube' | translate}}\r\n                </button>\r\n\r\n                <!-- \u00C2M THANH -->\r\n                <div class=\"border-type mt-4\">\r\n                  <h4>{{'am_thanh' | translate}}</h4>\r\n                  <nz-switch [(ngModel)]=\"itemEdit.is_mute\" (ngModelChange)=\"updateVideoRepeat('is_mute', $event);updateData(dataRow)\"></nz-switch>\r\n                </div>\r\n                \r\n                <!-- T\u1EF0 \u0110\u1ED8NG L\u1EB6P -->\r\n                <div class=\"border-type\">\r\n                  <h4>{{'tu_dong_lap' | translate}}</h4>\r\n                  <nz-switch [(ngModel)]=\"itemEdit.loop\" (ngModelChange)=\"updateVideoRepeat('loop', $event);updateData(dataRow)\"></nz-switch>\r\n                </div>\r\n                \r\n                <!-- TH\u00C0NH C\u00D4NG C\u1EE4 -->\r\n                <div class=\"border-type\">\r\n                  <h4>{{'thanh_cong_cu' | translate}}</h4>\r\n                  <nz-switch [(ngModel)]=\"itemEdit.controls\"\r\n                    (ngModelChange)=\"updateVideoRepeat('controls', $event);updateData(dataRow)\"></nz-switch>\r\n                </div>\r\n                \r\n                <!-- T\u1EF0 \u0110\u1ED8NG PH\u00C1T -->\r\n                <!-- autoplay ph\u1EA3i \u0111i v\u1EDBi mute, n\u00EAn n\u1EBFu kh\u00F4ng mute th\u00EC autoplay s\u1EBD t\u1EF1 \u0111\u1ED9ng set false (Xem t\u1EA1i https://developer.chrome.com/blog/autoplay/) -->\r\n                <div *ngIf=\"!itemEdit.is_mute\" class=\"border-type\">\r\n                  <h4>{{'tu_dong_phat' | translate}}</h4>\r\n                  <nz-switch [(ngModel)]=\"itemEdit.autoplay\"\r\n                    (ngModelChange)=\"updateVideoRepeat('autoplay', $event);updateData(dataRow)\"></nz-switch>\r\n                </div>\r\n\r\n                <!-- C\u1EACP NH\u1EACT M\u00D4 T\u1EA2 N\u1ED8I DUNG C\u1EE6A VIDEO -->\r\n                <div class=\"config-font\" style=\"margin-bottom: 20px;\">\r\n                  <p class=\"title\">{{'cap_nhat_mo_ta_noi_dung' | translate}}</p>\r\n                  <textarea nz-input class=\"content\" placeholder=\"{{'noi_dung' | translate}}...\"\r\n                    [ngModel]=\"itemEdit['accessibility_title_' + functionService.languageTempCode] || 'Video youtube'\"\r\n                    (ngModelChange)=\"itemEdit['accessibility_title_' + functionService.languageTempCode] = $event\"\r\n                    (blur)=\"updateData(dataRow)\" [nzAutosize]=\"{ minRows: 3, maxRows: 15 }\"\r\n                    nz-tooltip [nzTooltipTitle]=\"'*_giai_thich_aria_label' | translate\"\r\n                    nzOverlayClassName=\"aria-label-tooltip\">\r\n                  </textarea>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"itemEdit.type == 'map-repeat'\">\r\n              <nz-radio-group [(ngModel)]=\"radioValue\">\r\n                <label nz-radio nzValue=\"location\">{{ 'nhap_dia_chi' | translate }}</label>\r\n                <label nz-radio nzValue=\"iframe\">{{ 'dung_the_nhung' | translate }}</label>\r\n              </nz-radio-group>\r\n              <!-- Th\u00EAm \u0111\u1ECBa ch\u1EC9 b\u1EB1ng c\u00E1ch nh\u1EADp -->\r\n              <div class=\"container-font\" *ngIf=\"radioValue == 'location'\">\r\n                <div class=\"config-text\" style=\"width:100%\">\r\n                  <mat-form-field style=\"width:100%\">\r\n                    <mat-label>{{ 'nhap_dia_chi' | translate }} </mat-label>\r\n                    <textarea matInput [(ngModel)]=\"itemEdit.local\" (blur)=\"getLocal_atwMapRepeat(itemEdit, dataRow)\"></textarea>\r\n                  </mat-form-field>\r\n                </div>\r\n              </div>\r\n              <!-- Th\u00EAm \u0111\u1ECBa ch\u1EC9 b\u1EB1ng iframe -->\r\n              <div *ngIf=\"radioValue == 'iframe'\" class=\"map__item--change-link\">\r\n                <div>\r\n                  <input #myInput nz-input \r\n                    placeholder=\"<iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.3565404084443!2d106' width='600' height='450' style='border:0;' allowfullscreen='' loading='lazy' referrerpolicy='no-referrer-when-downgrade'></iframe>\"\r\n                    class=\"input_iframe form-group\" nzSize=\"large\" [(ngModel)]=\"itemEdit.iframe\" />\r\n                </div>\r\n                <div class=\"map__item--change-link--button d-flex flex-column\">\r\n                  <button nz-button nzType=\"primary\" (click)=\"getLink_atwMapRepeat(itemEdit, dataRow)\">{{'cap_nhat' | translate}}</button>\r\n                </div>\r\n              </div>\r\n\r\n              <button nzType=\"primary\" nz-button (click)=\"isOpenGuideMap = true\"\r\n                class=\"_btn _btn_add d-flex align-items-center right-all-content mr-2 my-2\">\r\n                {{ 'huong_dan_khach_hang_chen_ban_do' | translate }}\r\n              </button>\r\n\r\n              <!-- C\u1EACP NH\u1EACT M\u00D4 T\u1EA2 N\u1ED8I DUNG C\u1EE6A B\u1EA2N \u0110\u1ED2 -->\r\n              <div class=\"config-font\" style=\"margin-bottom: 20px;\">\r\n                <p class=\"title\">{{'cap_nhat_mo_ta_noi_dung' | translate}}</p>\r\n                <textarea nz-input class=\"content\" placeholder=\"{{'noi_dung' | translate}}...\"\r\n                  [ngModel]=\"itemEdit['accessibility_title_' + functionService.languageTempCode] || 'B\u1EA3n \u0111\u1ED3'\"\r\n                  (ngModelChange)=\"itemEdit['accessibility_title_' + functionService.languageTempCode] = $event\"\r\n                  (blur)=\"updateData(dataRow)\" [nzAutosize]=\"{ minRows: 3, maxRows: 15 }\"\r\n                  nz-tooltip [nzTooltipTitle]=\"'*_giai_thich_aria_label' | translate\"\r\n                  nzOverlayClassName=\"aria-label-tooltip\">\r\n                </textarea>\r\n              </div>\r\n            </ng-container>\r\n          </ng-container>\r\n        </nz-modal>\r\n\r\n        <!-- Modal Chuy\u1EC3n \u1EA3nh l\u00EAn server -->\r\n        <nz-modal nzTitle=\"{{ 'chuyen_anh_len_server' | translate}}\" [(nzVisible)]=\"isShowUploadToServer\"\r\n          (nzOnCancel)=\"cancelUploadToServer()\" [nzContent]=\"modalContent\" [nzFooter]=\"modalFooter\">\r\n          <ng-template #modalContent>\r\n            <p>{{'nen_anh_tai_len' | translate}}</p>\r\n            <nz-select style=\"margin-bottom: 15px\" [(ngModel)]=\"compressType\"\r\n              nzPlaceHolder=\"{{'nen_anh_tai_len' | translate}}\" nzAllowClear>\r\n              <nz-option [nzValue]=\"'no-compress'\" nzLabel=\"{{'khong_nen_anh_sau_khi_tai_len' | translate}}\"></nz-option>\r\n              <nz-option [nzValue]=\"'compress-frame'\" nzLabel=\"{{'nen_anh_theo_ti_le_khung_hien_thi_anh' | translate}}\"></nz-option>\r\n              <nz-option [nzValue]=\"'custom'\" nzLabel=\"{{'nen_anh_theo_kich_thuoc_tu_chon' | translate}}\"></nz-option>\r\n            </nz-select>\r\n\r\n            <mat-form-field *ngIf=\"compressType == 'custom'\" class=\"mr-4\">\r\n              <mat-label>{{'chieu_rong' | translate}}</mat-label>\r\n              <input matInput placeholder=\"{{'chieu_rong' | translate}}\" [(ngModel)]=\"compressWidth\">\r\n            </mat-form-field>\r\n\r\n            <mat-form-field *ngIf=\"compressType == 'custom'\">\r\n              <mat-label>{{'chieu_cao' | translate}}</mat-label>\r\n              <input matInput placeholder=\"{{'chieu_cao' | translate}}\" [(ngModel)]=\"compressHeight\">\r\n            </mat-form-field>\r\n          </ng-template>\r\n          <ng-template #modalFooter>\r\n            <button nz-button nzType=\"default\" (click)=\"cancelUploadToServer()\">{{'khong' | translate}}</button>\r\n            <button nz-button nzType=\"primary\" (click)=\"okUploadToServer(itemEdit)\"\r\n              [nzLoading]=\"uploadToServerLoading\">{{'dong_y' | translate}}</button>\r\n          </ng-template>\r\n        </nz-modal>\r\n      </tbody>\r\n    </nz-table>\r\n  </div>\r\n</nz-layout>\r\n\r\n<!-- ------------------------------------------------- H\u1ED8P THO\u1EA0I H\u01AF\u1EDANG D\u1EAAN CH\u00C8N MAP -------------------------------------------------- -->\r\n<nz-modal [(nzVisible)]=\"isOpenGuideMap\" (nzOnCancel)=\"isOpenGuideMap = false\" [nzFooter]=\"null\"\r\n  [nzStyle]=\"{ height: '80vh', top: '32px', overflowY : 'scroll'}\" [nzWidth]=\"'70%'\">\r\n  <ng-container *nzModalContent>\r\n    <div class=\"modal-success\">\r\n      <h4 class=\"title\">\r\n        {{ 'huong_dan_khach_hang_chen_ban_do_vao_trang_web' | translate }}\r\n      </h4>\r\n      <span>\r\n        <i class=\"bi bi-x-lg\"></i>\r\n      </span>\r\n      <div class=\"list-image\">\r\n        <div class=\"item-image\">\r\n          <img src=\"/assets/root/images/system/imgs/map_b1.jpg\" alt=\"image 1\">\r\n          <div class=\"note-content\">\r\n            {{ 'buoc' | translate }} 1: {{ 'truy_cap_vao_duong_dan' | translate }} <a href=\"https://www.google.com/maps\"\r\n              target=\"_blank\">https://www.google.com/maps</a>\r\n          </div>\r\n        </div>\r\n        <div class=\"item-image\">\r\n          <img src=\"/assets/root/images/system/imgs/map_b1b2.jpg\" alt=\"image 2\">\r\n          <div class=\"note-content\">\r\n            {{ 'buoc' | translate }} 2: {{ 'nhap_dia_chi_ban_muon_chia_se_hoac_chen' | translate }}. {{ 'sau_khi_ban_do_da_chon_chinh_xac_vi_tri_ma_dia_chi_vua_nhap' | translate }},\r\n            <span style=\"color:#00a859\"> {{ 'nhan_vao' | translate }} <span style=\"font-weight: bold\">{{ 'nut_chia_se' | translate }}.</span></span>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"list-image pt-3\">\r\n        <div class=\"item-image\">\r\n          <img src=\"/assets/root/images/system/imgs/map_b1b3.jpg\" alt=\"image 3\">\r\n          <div class=\"note-content\">\r\n            {{ 'buoc' | translate }} 3: {{ 'nhan_vao' | translate }} <span style=\"color: black\">{{ 'tab_nhung_ban_do' | translate }}</span> \r\n            <span style=\"color:#00a859; font-weight: bold;\"> & {{ 'nhan_nut_sao_chep_html' | translate }}.</span>\r\n          </div>\r\n        </div>\r\n        <div class=\"item-image\">\r\n          <img src=\"/assets/root/images/system/imgs/map_b1b4.jpg\" alt=\"image 4\">\r\n          <div class=\"note-content\">\r\n            {{ 'buoc' | translate }} 4: <span style=\"color:#00a859\"> {{ 'dan_ma_nhung_vao_o_duong_dan_sau_do_nhan' | translate }} \r\n            <span style=\"font-weight: bold;\">{{ 'nut_cap_nhat' | translate }}</span> </span> {{ 'de_he_thong_lay_ban_do_ve' | translate }}.\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<!-- ------------------------------------------------- H\u1ED8P THO\u1EA0I H\u01AF\u1EDANG D\u1EAAN CH\u00C8N VIDEO -------------------------------------------------- -->\r\n<nz-modal [(nzVisible)]=\"isOpenGuideVideo\" (nzOnCancel)=\"isOpenGuideVideo = false\" [nzFooter]=\"null\"\r\n  [nzStyle]=\"{ height: '500px', top: ' 10px' }\" [nzWidth]=\"'70%'\">\r\n  <ng-container *nzModalContent>\r\n      <div class=\"modal-success\">\r\n          <h4 class=\"title\">\r\n              {{'huong_dan_khach_hang_chen_video_youtube_vao_trang_web' | translate}}\r\n          </h4>\r\n          <span>\r\n              <i class=\"bi bi-x-lg\"></i>\r\n          </span>\r\n          <div class=\"list-image\">\r\n              <div class=\"item-image\">\r\n                  <img src=\"/assets/root/images/system/imgs/video_B1.jpg\" alt=\"image 1\">\r\n                  <div class=\"note-content\">\r\n                      {{ 'buoc' | translate }} 1: {{ 'truy_cap_vao_video_tren_youtube_muon_chen_sau_do' | translate }}\r\n                      <span style=\"color:#00a859\"> {{ 'nhan_vao' | translate }}\r\n                        <span style=\"font-weight: bold;\"> {{ 'nut' | translate}} Share</span>\r\n                      </span> {{ 'o_duoi_video' | translate }}.\r\n                  </div>\r\n              </div>\r\n              <div class=\"item-image\">\r\n                  <img src=\"/assets/root/images/system/imgs/video_b2.jpg\" alt=\"image_2\">\r\n                  <div class=\"note-content\">\r\n                      {{ 'buoc' | translate }} 2: \r\n                      <span style=\"color:#00a859\">{{ 'nhan_vao' | translate }} <span style=\"font-weight: bold;\">{{ 'nut' | translate}} Embed</span></span>\r\n                      {{ 'de_lay_ma_nhung' | translate }}.\r\n                  </div>\r\n              </div>\r\n\r\n          </div>\r\n          <div class=\"list-image pt-2\">\r\n              <div class=\"item-image\">\r\n                  <img src=\"/assets/root/images/system/imgs/video_b3.jpg\" alt=\"image 3\">\r\n                  <div class=\"note-content\">\r\n                      {{ 'buoc' | translate }} 3: \r\n                      <span style=\"color:#00a859\">{{ 'nhan_vao' | translate }} <span style=\"font-weight: bold;\">{{ 'nut' | translate}} Copy</span></span>,\r\n                      {{ 'he_thong_tu_dong_sao_chep_ma_nhung_cua_video' | translate }}.\r\n                  </div>\r\n              </div>\r\n              <div class=\"item-image\">\r\n                  <img src=\"/assets/root/images/system/imgs/video_b4.jpg\" alt=\"image 3\">\r\n                  <div class=\"note-content\">\r\n                      {{ 'buoc' | translate }} 4: \r\n                      <span style=\"color:#00a859\">{{ 'dan_ma_nhung_vao_o_duong_dan_sau_do_nhan' | translate }} \r\n                        <span style=\"font-weight: bold;\">{{ 'nut_cap_nhat' | translate }}</span> \r\n                      </span> {{ 'de_he_thong_lay_video_tu_youtube_ve' | translate }}.\r\n                  </div>\r\n              </div>\r\n          </div>\r\n      </div>\r\n  </ng-container>\r\n</nz-modal>\r\n\r\n<ng-template #tooltipImgInfo>\r\n  <div class=\"my-1 img-info\">\r\n    <p class=\"img-info__text\">\r\n      {{ 'thu_muc_chua_tep_hinh_anh' | translate }}: \r\n    </p>\r\n    <p class=\"img-info__text highlight ml-2\">\r\n      {{ getFileInfo(itemEdit[deviceTemp + '_value']).folderPath }}\r\n    </p>\r\n    <p class=\"img-info__text mt-1\">\r\n      {{ 'ten_tep_hinh_anh' | translate }}: \r\n    </p>\r\n    <p class=\"img-info__text highlight ml-2\">\r\n      {{ getFileInfo(itemEdit[deviceTemp + '_value']).fullFileName }}\r\n    </p>\r\n  </div>\r\n  <button class=\"w-100 my-1\" nz-button nzType=\"default\" style=\"padding: 4px 6px;\"\r\n  (click)=\"copyLinkImg(itemEdit[deviceTemp + '_value'])\">\r\n    {{'nhan_de_sao_chep_duong_dan_anh' | translate}}\r\n  </button>\r\n</ng-template>", styles: ["nz-layout{background:#ffffff 0% 0% no-repeat padding-box;padding:16px;height:100%}nz-layout .title{color:var(--ion-color-vh-green);font-size:1.1rem}nz-layout ._btn{border-radius:18px!important;font-size:.9rem}nz-layout ._btn_add{color:#fff;background:#008848 0% 0% no-repeat padding-box;border:1px solid #008848}nz-layout ._btn_add span{color:#fff}nz-layout ._btn_soft{color:#373737;background:#ffffff 0% 0% no-repeat padding-box;border:1px solid #c8c7cc}nz-layout ._btn_soft span{color:#373737}nz-layout ._btn_delete{color:#fff;background:#ff000a 0% 0% no-repeat padding-box;border:1px solid #ff000a}nz-layout ._btn_delete span{color:#fff}nz-layout .search{justify-content:flex-end;display:flex;position:relative}nz-layout .search nz-input-group{border-radius:18px}nz-layout .search input{width:20rem}nz-layout nz-table{font-size:14px!important}nz-layout nz-table th.ant-table-cell{background-color:#529bfc;color:#fff}nz-layout nz-table tbody .icon-action span{font-size:18px;cursor:pointer}nz-layout nz-table tbody .icon-action span:first-child{color:var(--ion-color-vh-green);margin-right:8px}nz-layout nz-table tbody .icon-action span:nth-child(2){color:var(--ion-color-vh-red)}nz-layout nz-table ._select{color:#373737;font-weight:500;text-align:left;display:inline-flex;align-items:center;font-size:14px}nz-layout nz-table ._select ._option{color:#373737;background-color:#fff;font-weight:500;border-radius:5px;text-align:left;margin:8px!important;padding:8px!important;font-size:14px}nz-layout nz-table ._select ._option:hover{color:#fff;background-color:#00a859;cursor:pointer}nz-layout nz-table ._select:focus{outline:none;box-shadow:0 0 0 1px #cbcbcb}nz-layout nz-table ::ng-deep .ant-table-header.nz-table-hide-scrollbar{display:contents}nz-layout nz-table ::ng-deep .ant-select:not(.ant-select-customize-input) .ant-select-selector{border-radius:18px!important}nz-layout .input-container{display:flex;background-color:var(--ion-color-vh-green);color:#fff}nz-layout .goto-page{padding:6px 18px;display:flex;align-items:center;justify-content:center;cursor:pointer}.pagiItem.active{background-color:var(--ion-color-vh-green);color:#fff!important}.ant-input-affix-wrapper{border:1px solid #c8c7cc;border-radius:5px}.pagination{display:flex;align-items:center;justify-content:center}.pagiItem{padding:8px 16px;cursor:pointer;color:var(--ion-color-vh-green);border-top:1px solid #ddd;border-bottom:1px solid #ddd;border-right:1px solid #ddd}.pagiItem:nth-child(1){border-left:1px solid #ddd}.page-go{background-color:#a54f4e;color:#fff}.pagination-list-button{display:flex}.ant-btn{border:none!important}:host ::ng-deep .nz-table .custom-tbody{min-height:350px}.editable-cell{position:relative;padding:5px 12px;cursor:pointer;margin-bottom:10px;display:flex}.editable-cell .item-img{background-color:#fff;background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.editable-cell:hover{outline:1px solid #d9d9d9;border-radius:4px}.image-container{display:flex}.type-link__title,.type-link{margin-bottom:5px}.btn-upload,.btn-add{color:#fff;background-color:#008848;padding:4px 14px;text-align:center}.btn-delete{color:red}label{margin:0}.item-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:-moz-fit-content;width:fit-content;display:inline-block}.title-admin{font-size:18px;font-weight:bold;color:#008848;text-align:center;margin:15px 15px 15px 0}._icon_connect{display:flex;justify-content:center;align-items:center;align-self:center;color:#008848;width:25px;height:25px;padding:0;border:1px solid #c8c7cc;border-radius:50%;background-color:#fff;line-height:normal;margin-bottom:-4px}._icon_connect:hover{border-color:#008848}._icon_connect_active{border-color:#008848!important}.image-right{width:100%}.modal-success .title{display:flex;color:var(--ion-color-vh-green);font-weight:bold;justify-content:center;align-items:center;font-size:18px;margin-bottom:20px}.modal-success .list-image{display:flex;justify-content:space-around}.modal-success .list-image .item-image{width:40%;align-items:center}.modal-success .list-image .item-image .note-content{padding:10px 0;text-align:center}.aria-label-tooltip .ant-tooltip-inner{text-align:justify!important;white-space:pre-line!important}.border-type{display:flex;justify-content:space-between}.config-font .title{margin-bottom:4px;margin-top:8px}.device{display:flex;justify-content:space-evenly;align-items:center}.device .icon-field{padding:0 4px}.device .icon-field span{font-size:18px}.device .icon-field:hover{color:#00a859}.device .active{color:#00a859}.img-info__text{line-height:1.4;margin-bottom:6px}.img-info__text.highlight{color:#00a859;font-weight:500;font-size:16px}\n"], components: [{ type: i4.NzLayoutComponent, selector: "nz-layout", exportAs: ["nzLayout"] }, { type: SelectLanguageConfigComponent, selector: "app-select-language-config", inputs: ["isAdmin", "displayLabel", "isSetLanguageCode", "languages"], outputs: ["handleChangeMultiLanguage"] }, { type: i6.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { type: i7.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzPaginationPosition", "nzScroll", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange"], exportAs: ["nzTable"] }, { type: i7.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { type: i7.NzTbodyComponent, selector: "tbody" }, { type: i12$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.NzModalComponent, selector: "nz-modal", inputs: ["nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzZIndex", "nzWidth", "nzCloseIcon", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel", "nzTitle", "nzFooter", "nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzContent", "nzComponentParams", "nzWrapClassName", "nzClassName", "nzStyle", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { type: i6$1.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { type: i6$1.NzOptionComponent, selector: "nz-option", inputs: ["nzLabel", "nzValue", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }, { type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzSize", "nzSearch", "nzCompact", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzSuffix"], exportAs: ["nzInputGroup"] }, { type: i10.NzSwitchComponent, selector: "nz-switch", inputs: ["nzLoading", "nzDisabled", "nzControl", "nzCheckedChildren", "nzUnCheckedChildren", "nzSize"], exportAs: ["nzSwitch"] }, { type: i16$1.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-year-picker,nz-range-picker", inputs: ["nzAllowClear", "nzAutoFocus", "nzDisabled", "nzBorderless", "nzInputReadOnly", "nzInline", "nzPlaceHolder", "nzPopupStyle", "nzSize", "nzShowToday", "nzMode", "nzShowNow", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzShowTime", "nzFormat", "nzLocale", "nzOpen", "nzDisabledDate", "nzDropdownClassName", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzRanges"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { type: i5$2.NzRadioGroupComponent, selector: "nz-radio-group", inputs: ["nzDisabled", "nzButtonStyle", "nzSize", "nzName"], exportAs: ["nzRadioGroup"] }, { type: i5$2.NzRadioComponent, selector: "[nz-radio],[nz-radio-button]", inputs: ["nzValue", "nzDisabled", "nzAutoFocus"], exportAs: ["nzRadio"] }], directives: [{ type: i12$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i18.NzIconDirective, selector: "[nz-icon]", inputs: ["nzRotate", "nzSpin", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { type: i14.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { type: i21.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitleContext", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipTitle", "nz-tooltip", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { type: i17.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { type: i7.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { type: i7.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { type: i7.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { type: i12$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "disabled"], exportAs: ["nzInput"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i24.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus", "nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nz-popconfirm", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDanger", "nzCancelText", "nzIcon"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { type: i4$1.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }, { type: i5$3.NzImageDirective, selector: "img[nz-image]", inputs: ["nzSrc", "nzSrcset", "nzDisablePreview", "nzFallback", "nzPlaceholder"], exportAs: ["nzImage"] }, { type: i16.NzPopoverDirective, selector: "[nz-popover]", inputs: ["nzPopoverTrigger", "nzPopoverPlacement", "nzPopoverBackdrop", "nzPopoverArrowPointAtCenter", "nzPopoverTitle", "nzPopoverContent", "nz-popover", "nzPopoverOrigin", "nzPopoverVisible", "nzPopoverMouseEnterDelay", "nzPopoverMouseLeaveDelay", "nzPopoverOverlayClassName", "nzPopoverOverlayStyle"], outputs: ["nzPopoverVisibleChange"], exportAs: ["nzPopover"] }, { type: i5$1.MatLabel, selector: "mat-label" }, { type: i15.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5.NzAutosizeDirective, selector: "textarea[nzAutosize]", inputs: ["nzAutosize"], exportAs: ["nzAutosize"] }, { type: i5.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { type: i12.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }], pipes: { "translate": i12$2.TranslatePipe, "vhLanguage": VhLanguagePipe, "date": i12$1.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AtwFrameRepeatAdmin, decorators: [{
             type: Component,
             args: [{
@@ -7582,7 +7902,7 @@ class AtwMenuHorizontalAdmin {
     }
 }
 AtwMenuHorizontalAdmin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AtwMenuHorizontalAdmin, deps: [{ token: i1.VhQueryAutoWeb }, { token: i0.ChangeDetectorRef }, { token: i3$1.FunctionService }, { token: i1.VhEventMediator }, { token: PLATFORM_ID }, { token: i4$1.NzModalService }, { token: i3$1.LanguageService }], target: i0.ɵɵFactoryTarget.Component });
-AtwMenuHorizontalAdmin.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AtwMenuHorizontalAdmin, selector: "atw-menu-horizontal-admin", inputs: { data: "data", type: "type" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"wrapper\">\r\n    <!-- <div style=\"display: flex; justify-content: space-between; align-items: center; padding: 0 40px\">\r\n        <h1 mat-dialog-title class=\"title-admin\">{{'chinh_sua_noi_dung' | translate}}</h1>\r\n        <div mat-button mat-dialog-close class=\"close\" nz-icon nzType=\"close-circle\"></div>\r\n    </div> -->\r\n    <div style=\"display: flex; justify-content: center; align-items: center; gap: 12px; padding: 0 40px 0 40px;\">\r\n        <!-- ch\u1ECDn ng\u00F4n ng\u1EEF \u0111a ng\u00F4n ng\u1EEF -->\r\n        <app-select-language-config [displayLabel]=\"true\"></app-select-language-config>\r\n    </div>\r\n\r\n    <!-- Danh s\u00E1ch menu -->\r\n    <div class=\"widget-row-elementor\">\r\n        <div class=\"list-menu\" style=\"height: 100%\">\r\n            <!-- Ti\u00EAu \u0111\u1EC1 -->\r\n            <div class=\"heading-menu\">\r\n                <h3 class=\"m-0 menu-title\" style=\"font-weight:500;\">{{'cau_truc_menu' | translate}}</h3>\r\n                <div class=\"nav-header\">\r\n                    <button nz-button style=\"border:1px solid #008848; color:#008848; margin-right:15px;\"\r\n                        (click)=\"openAddMenuItem()\">{{'them_menu' | translate}}</button>\r\n                </div>\r\n            </div>\r\n             <!-- Danh s\u00E1ch menu  -->\r\n             <div class=\"elementor-custom\" style=\"overflow-y: scroll;min-height: 500px;max-height: 300px; height: calc(100% - 100px);\">\r\n                    <mat-tree cdkDropList (cdkDropListDropped)=\"cdkDropListDropped($event)\"\r\n                        [dataSource]=\"dataSource\" [treeControl]=\"treeControl\"  [trackBy]=\"trackById\">\r\n                        <mat-tree-node [id]=\"node._id\" [attr.group]=\"node.group\" [attr.data-level]=\"node.level\" cdkDrag  *matTreeNodeDef=\"let node\" matTreeNodePadding>\r\n                          <div class=\"w-100 tree_node\">\r\n                            <div style=\"display: flex; align-items: center\">\r\n                                <div style=\"padding: 0 10px; display: inline-block; cursor: move\">\r\n                                  <i nz-icon nzType=\"menu\" nzTheme=\"outline\"></i>\r\n                                </div>\r\n                                <!-- C\u00F3 menu con th\u00EC th\u00EAm icon expand_more ph\u00EDa tr\u01B0\u1EDBc -->\r\n                                <button mat-icon-button *ngIf=\"node.expandable\" matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node['name_' + functionService.selectedLanguageCode] | vhLanguage : 'name' : 'AtwMenu'\">\r\n                                    <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\r\n                                    </mat-icon>\r\n                                </button>\r\n                                <!-- Kh\u00F4ng c\u00F3 menu con th\u00EC th\u00EAm button disabled \u0111\u1EC3 c\u00F3 padding ph\u00EDa tr\u01B0\u1EDBc -->\r\n                                <button *ngIf=\"!node.expandable\" mat-icon-button disabled></button>\r\n                                <!-- Icon c\u1EE7a menu -->\r\n                                <span *ngIf=\"node.icon\">\r\n                                    <mat-icon class=\"mr-2\">{{node.icon}}</mat-icon>\r\n                                </span>\r\n                                <!-- N\u1ED9i dung menu -->\r\n                                {{node['name_' + functionService.selectedLanguageCode] | vhLanguage : 'name' : 'AtwMenu'}}\r\n                            </div>\r\n                            <!-- Danh s\u00E1ch c\u00E1c n\u00FAt thao t\u00E1c -->\r\n                            <div class=\"btn-foundation\">\r\n                                <!-- Th\u00EAm icon -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'them_icon' | translate}}\"\r\n                                    (click)=\"addIconToParent(node)\">\r\n                                    <i class=\"bi bi-star\"></i>\r\n                                </button>\r\n                                <!-- Xo\u00E1 icon -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'xoa_icon' | translate}}\"\r\n                                    (click)=\"deleteIcon(node)\">\r\n                                    <i class=\"bi bi-slash-circle-fill\"></i>\r\n                                </button>\r\n                                <!-- Th\u00EAm menu con -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'them_menu_con' | translate}}\"\r\n                                    *ngIf=\"node.group != 'category' && !node.id_freeblock\"\r\n                                    (click)=\"openAddSubMenuItem(node)\">\r\n                                    <i class=\"bi bi-plus\"></i>\r\n                                </button>\r\n                                <!-- G\u1ECDi c\u00E2y danh m\u1EE5c -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'goi_cay_danh_muc' | translate}}\"\r\n                                    *ngIf=\"(node.group == 'category' || node.group == 'pop-up-subcategory') && node.level == 0\"\r\n                                    (click)=\"openAddSubMenuItem(node)\">\r\n                                    <i class=\"bi bi-text-center\"></i>\r\n                                </button>\r\n                                <!-- Ch\u1EC9nh s\u1EEDa menu -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'chinh_sua_menu' | translate}}\"\r\n                                    *ngIf=\"node.group != 'category' || (node.group == 'category' && node.level == 0)\"\r\n                                    (click)=\"openEdit(node)\">\r\n                                    <i class=\"bi bi-pencil\"></i>\r\n                                </button>\r\n                                <!-- X\u00F3a -->\r\n                                <button \r\n                                  nz-popconfirm\r\n                                  nzPopconfirmTitle=\"{{'ban_co_chac_chan_muon_xoa_menu_nay' | translate}}\"\r\n                                  nzPopconfirmPlacement=\"bottom\"\r\n                                  nz-button \r\n                                  nzShape=\"circle\" \r\n                                  nz-tooltip \r\n                                  nzTooltipTitle=\"{{'xoa' | translate}}\"\r\n                                  *ngIf=\"node.group != 'category' || (node.group == 'category' && node.level == 0)\"\r\n                                  (nzOnConfirm)=\"removeMenuItem(node)\"\r\n                                  \r\n                                  >\r\n                                    <i class=\"bi bi-trash\"></i>\r\n                                </button>\r\n                            </div>\r\n                          </div>\r\n                        </mat-tree-node>\r\n                    </mat-tree>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<!-- MODAL TH\u00CAM MENU -->\r\n<nz-modal [(nzVisible)]=\"isOpenAddMenu\" [nzFooter]=\"null\"\r\n    [nzStyle]=\"{width: '60vw', top: '5%',position: 'relative'}\" nzCloseIcon \r\n    [nzTitle]=\"titleAddMenu\" nzCancelText=\"{{'huy' | translate}}\" nzOkText=\"{{'luu' | translate}}\">\r\n    <ng-container *nzModalContent>\r\n        <app-add-menu-header-admin\r\n            (isAddMenu)=\"isCancelFormAddMenu($event)\"\r\n            [data]=\"dataAddMenu\"\r\n            [type]=\"data.type\"\r\n            (valueData)=\"getDataFormAdd($event)\">\r\n        </app-add-menu-header-admin>\r\n    </ng-container>\r\n    <ng-template #titleAddMenu>\r\n        <p class=\"m-0 title\" style=\"font-weight:400;\">{{'them_menu' | translate}}</p>\r\n    </ng-template>\r\n</nz-modal>\r\n<!-- MODAL S\u1EECA MENU -->\r\n<nz-modal [(nzVisible)]=\"isOpenEditMenu\" [nzFooter]=\"null\"\r\n    [nzStyle]=\"{width: '60vw', top: '5%',position: 'relative'}\" nzCloseIcon\r\n    [nzTitle]=\"titleEditMenu\" nzCancelText=\"{{'huy' | translate}}\" nzOkText=\"{{'luu' | translate}}\">\r\n    <ng-container *nzModalContent>\r\n        <app-edit-menu-header-admin \r\n            (isEditMenu)=\"isCancleFormEditMenu($event)\"\r\n            [data]=\"dataEditMenu\"\r\n            [type]=\"data.type\"\r\n            (valueDataEdited)=\"getValueFormEditMenu($event)\">\r\n        </app-edit-menu-header-admin>\r\n    </ng-container>\r\n    <ng-template #titleEditMenu>\r\n        <p class=\"m-0 title\" style=\"font-weight:400;\">{{'chinh_sua_menu' | translate}}</p>\r\n    </ng-template>\r\n</nz-modal>\r\n<!-- MODAL TH\u00CAM MENU PH\u1EE4 -->\r\n<nz-modal [(nzVisible)]=\"isOpenAddFormSubMenu\" [nzFooter]=\"null\"\r\n    [nzStyle]=\"{width: checkExistIdCategory ? '30vw' : '50vw'}\" nzCloseIcon\r\n    [nzTitle]=\"titleAddSubMenu\" nzCancelText=\"{{'huy' | translate}}\" nzOkText=\"{{'luu' | translate}}\">\r\n    <ng-container *nzModalContent>\r\n        <app-add-sub-menu-header-admin \r\n            [data]=\"dataAddSubMenu\"\r\n            (isCancelFormAddSub)=\"isCancelFormAddSub($event)\"\r\n            (valueDataAdd)=\"getValueFormAddSub($event)\"\r\n            (getDataCategoryAgain)=\"getDataCategoryAgain($event)\">\r\n        </app-add-sub-menu-header-admin>\r\n    </ng-container>\r\n    <ng-template #titleAddSubMenu>\r\n        <p class=\"m-0 title\" style=\"font-weight:400;\">{{'them_menu_con' | translate}}</p>\r\n    </ng-template>\r\n</nz-modal>\r\n<!-- MODAL CH\u1EC8NH S\u1EECA MENU PH\u1EE4 -->\r\n<nz-modal [(nzVisible)]=\"isOpenEditFormSubMenu\" [nzFooter]=\"null\"\r\n    [nzStyle]=\"{width: '50vw'}\" nzCloseIcon\r\n    [nzTitle]=\"titleEditSubMenu\" nzCancelText=\"{{'huy' | translate}}\" nzOkText=\"{{'luu' | translate}}\">\r\n    <ng-container *nzModalContent>\r\n        <app-edit-sub-menu-header-admin (isCancelFormEditSub)=\"isCancleFormEditSub($event)\"\r\n            [data]=\"dataEditSubMenu\"\r\n            (valueDataEdit)=\"getValueFormEditSub($event)\">\r\n        </app-edit-sub-menu-header-admin>\r\n    </ng-container>\r\n    <ng-template #titleEditSubMenu>\r\n        <p class=\"m-0 title\" style=\"font-weight:400;\">{{'chinh_sua_menu_con' | translate}}</p>\r\n    </ng-template>\r\n</nz-modal>", styles: [".wrapper .widget-row-elementor{display:grid;width:100%;height:100%;grid-column-gap:10px;column-gap:10px;padding:0 40px}.sub-item .sub-content .btn-foundation{display:flex;grid-gap:10px;gap:10px;opacity:0}.wrapper{width:100%;height:100%;background-color:#f1f0f0}.wrapper .widget-row-elementor{display:grid;width:100%;grid-column-gap:10px;column-gap:10px;padding:20px 40px}.wrapper .widget-row-elementor .elementor-custom{height:100%;background-color:#fff;box-shadow:#e3e3e333 0 2px 8px}.wrapper .widget-row-elementor .heading-menu{display:flex;align-items:center;justify-content:space-between;padding:10px;background:white;margin-bottom:10px}.example-list{width:100%;max-width:100%;height:100%;display:block;padding:20px 10px}.example-list::-webkit-scrollbar{width:5px;background-color:#f5f5f5}.example-list::-webkit-scrollbar-thumb{background-color:#bab9b9;border:2px solid #bab9b9;border-radius:5px}.example-box{position:relative;color:#000000de;box-sizing:border-box;list-style-type:none;cursor:move;font-size:14px;width:70%;margin:10px 10px 10px 50px}.example-box .content{position:relative;display:flex;align-items:center;justify-content:space-between;border:1px solid #b6dbff;padding:8px;border-radius:3px;background:#f8f5f5}.example-box .content .icon .item-icon{position:relative}.example-box .content .icon .close-icon{position:absolute;top:-3px;left:0;color:red;font-size:12px;cursor:pointer}.example-box .content .btn-foundation{display:flex;grid-gap:10px;gap:10px;opacity:0}.example-box .content .collapes-sub{position:absolute;top:25%;left:-20px;cursor:pointer}.example-box:hover>.content .btn-foundation{opacity:1}.sub-item{position:relative;border:1px solid #b6dbff;border-radius:3px;margin-bottom:10px;list-style-type:none}.sub-item .sub-content{display:flex;align-items:center;justify-content:space-between;background-color:#f8f5f5}.sub-item .text{padding:10px 0}.sub-item:hover>.sub-content .btn-foundation{opacity:1}.sub-item:first-child:before{height:70%}.tree_node{display:flex;align-items:center;justify-content:space-between}.tree_node:hover{background-color:#f7f7f7}.btn-foundation{display:flex;justify-content:flex-end;grid-gap:10px;gap:10px;padding-right:16px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.elementor-custom::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px #d2d2d2;background-color:#fff}.elementor-custom::-webkit-scrollbar{width:5px;background-color:#55c4f8}.elementor-custom::-webkit-scrollbar-thumb{border-radius:5px;background-color:#55c4f8}.title-admin{font-weight:bold;color:#008848;text-align:center;margin:15px 0}\n"], components: [{ type: SelectLanguageConfigComponent, selector: "app-select-language-config", inputs: ["isAdmin", "displayLabel", "isSetLanguageCode", "languages"], outputs: ["handleChangeMultiLanguage"] }, { type: i6.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { type: i6$3.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { type: i3$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i12$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.NzModalComponent, selector: "nz-modal", inputs: ["nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzZIndex", "nzWidth", "nzCloseIcon", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel", "nzTitle", "nzFooter", "nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzContent", "nzComponentParams", "nzWrapClassName", "nzClassName", "nzStyle", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { type: AddMenuHeaderAdminComponent, selector: "app-add-menu-header-admin", inputs: ["data", "type"], outputs: ["isAddMenu", "valueData"] }, { type: EditMenuHeaderAdminComponent, selector: "app-edit-menu-header-admin", inputs: ["data", "type"], outputs: ["isEditMenu", "valueDataEdited"] }, { type: AddSubMenuHeaderAdminComponent, selector: "app-add-sub-menu-header-admin", inputs: ["data"], outputs: ["isCancelFormAddSub", "valueDataAdd", "getDataCategoryAgain"] }, { type: EditSubMenuHeaderAdminComponent, selector: "app-edit-sub-menu-header-admin", inputs: ["data"], outputs: ["isCancelFormEditSub", "valueDataEdit"] }], directives: [{ type: i17.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { type: i14.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { type: i19$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i6$3.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { type: i6$3.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { type: i19$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i6$3.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { type: i18.NzIconDirective, selector: "[nz-icon]", inputs: ["nzRotate", "nzSpin", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { type: i12$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$3.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { type: i21.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitleContext", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipTitle", "nz-tooltip", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { type: i22.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus", "nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nz-popconfirm", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDanger", "nzCancelText", "nzIcon"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { type: i4$1.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }], pipes: { "translate": i12$2.TranslatePipe, "vhLanguage": VhLanguagePipe } });
+AtwMenuHorizontalAdmin.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AtwMenuHorizontalAdmin, selector: "atw-menu-horizontal-admin", inputs: { data: "data", type: "type" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"wrapper\">\r\n    <!-- <div style=\"display: flex; justify-content: space-between; align-items: center; padding: 0 40px\">\r\n        <h1 mat-dialog-title class=\"title-admin\">{{'chinh_sua_noi_dung' | translate}}</h1>\r\n        <div mat-button mat-dialog-close class=\"close\" nz-icon nzType=\"close-circle\"></div>\r\n    </div> -->\r\n    <div style=\"display: flex; justify-content: center; align-items: center; gap: 12px; padding: 0 40px 0 40px;\">\r\n        <!-- ch\u1ECDn ng\u00F4n ng\u1EEF \u0111a ng\u00F4n ng\u1EEF -->\r\n        <app-select-language-config [displayLabel]=\"true\"></app-select-language-config>\r\n    </div>\r\n\r\n    <!-- Danh s\u00E1ch menu -->\r\n    <div class=\"widget-row-elementor\">\r\n        <div class=\"list-menu\" style=\"height: 100%\">\r\n            <!-- Ti\u00EAu \u0111\u1EC1 -->\r\n            <div class=\"heading-menu\">\r\n                <h3 class=\"m-0 menu-title\" style=\"font-weight:500;\">{{'cau_truc_menu' | translate}}</h3>\r\n                <div class=\"nav-header\">\r\n                    <button nz-button style=\"border:1px solid #008848; color:#008848; margin-right:15px;\"\r\n                        (click)=\"openAddMenuItem()\">{{'them_menu' | translate}}</button>\r\n                </div>\r\n            </div>\r\n             <!-- Danh s\u00E1ch menu  -->\r\n             <div class=\"elementor-custom\" style=\"overflow-y: scroll;min-height: 500px;max-height: 300px; height: calc(100% - 100px);\">\r\n                    <mat-tree cdkDropList (cdkDropListDropped)=\"cdkDropListDropped($event)\"\r\n                        [dataSource]=\"dataSource\" [treeControl]=\"treeControl\"  [trackBy]=\"trackById\">\r\n                        <mat-tree-node [id]=\"node._id\" [attr.group]=\"node.group\" [attr.data-level]=\"node.level\" cdkDrag  *matTreeNodeDef=\"let node\" matTreeNodePadding>\r\n                          <div class=\"w-100 tree_node\">\r\n                            <div style=\"display: flex; align-items: center\">\r\n                                <div style=\"padding: 0 10px; display: inline-block; cursor: move\">\r\n                                  <i nz-icon nzType=\"menu\" nzTheme=\"outline\"></i>\r\n                                </div>\r\n                                <!-- C\u00F3 menu con th\u00EC th\u00EAm icon expand_more ph\u00EDa tr\u01B0\u1EDBc -->\r\n                                <button mat-icon-button *ngIf=\"node.expandable\" matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node['name_' + functionService.selectedLanguageCode] | vhLanguage : 'name' : 'AtwMenu'\">\r\n                                    <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\r\n                                    </mat-icon>\r\n                                </button>\r\n                                <!-- Kh\u00F4ng c\u00F3 menu con th\u00EC th\u00EAm button disabled \u0111\u1EC3 c\u00F3 padding ph\u00EDa tr\u01B0\u1EDBc -->\r\n                                <button *ngIf=\"!node.expandable\" mat-icon-button disabled></button>\r\n                                <!-- Icon c\u1EE7a menu -->\r\n                                <span *ngIf=\"node.icon\">\r\n                                    <mat-icon class=\"mr-2\">{{node.icon}}</mat-icon>\r\n                                </span>\r\n                                <!-- N\u1ED9i dung menu -->\r\n                                {{node['name_' + functionService.selectedLanguageCode] | vhLanguage : 'name' : 'AtwMenu'}}\r\n                            </div>\r\n                            <!-- Danh s\u00E1ch c\u00E1c n\u00FAt thao t\u00E1c -->\r\n                            <div class=\"btn-foundation\">\r\n                                <!-- Th\u00EAm icon -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'them_icon' | translate}}\"\r\n                                    (click)=\"addIconToParent(node)\">\r\n                                    <i class=\"bi bi-star\"></i>\r\n                                </button>\r\n                                <!-- Xo\u00E1 icon -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'xoa_icon' | translate}}\"\r\n                                    (click)=\"deleteIcon(node)\">\r\n                                    <i class=\"bi bi-slash-circle-fill\"></i>\r\n                                </button>\r\n                                <!-- Th\u00EAm menu con -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'them_menu_con' | translate}}\"\r\n                                    *ngIf=\"node.group != 'category' && !node.id_freeblock\"\r\n                                    (click)=\"openAddSubMenuItem(node)\">\r\n                                    <i class=\"bi bi-plus\"></i>\r\n                                </button>\r\n                                <!-- G\u1ECDi c\u00E2y danh m\u1EE5c -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'goi_cay_danh_muc' | translate}}\"\r\n                                    *ngIf=\"(node.group == 'category' || node.group == 'pop-up-subcategory') && node.level == 0\"\r\n                                    (click)=\"openAddSubMenuItem(node)\">\r\n                                    <i class=\"bi bi-text-center\"></i>\r\n                                </button>\r\n                                <!-- Ch\u1EC9nh s\u1EEDa menu -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'chinh_sua_menu' | translate}}\"\r\n                                    *ngIf=\"node.group != 'category' || (node.group == 'category' && node.level == 0)\"\r\n                                    (click)=\"openEdit(node)\">\r\n                                    <i class=\"bi bi-pencil\"></i>\r\n                                </button>\r\n                                <!-- X\u00F3a -->\r\n                                <button \r\n                                  nz-popconfirm\r\n                                  nzPopconfirmTitle=\"{{'ban_co_chac_chan_muon_xoa_menu_nay' | translate}}\"\r\n                                  nzPopconfirmPlacement=\"bottom\"\r\n                                  nz-button \r\n                                  nzShape=\"circle\" \r\n                                  nz-tooltip \r\n                                  nzTooltipTitle=\"{{'xoa' | translate}}\"\r\n                                  *ngIf=\"node.group != 'category' || (node.group == 'category' && node.level == 0)\"\r\n                                  (nzOnConfirm)=\"removeMenuItem(node)\"\r\n                                  \r\n                                  >\r\n                                    <i class=\"bi bi-trash\"></i>\r\n                                </button>\r\n                            </div>\r\n                          </div>\r\n                        </mat-tree-node>\r\n                    </mat-tree>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<!-- MODAL TH\u00CAM MENU -->\r\n<nz-modal [(nzVisible)]=\"isOpenAddMenu\" [nzFooter]=\"null\"\r\n    [nzStyle]=\"{width: '60vw', top: '5%',position: 'relative'}\" nzCloseIcon \r\n    [nzTitle]=\"titleAddMenu\" nzCancelText=\"{{'huy' | translate}}\" nzOkText=\"{{'luu' | translate}}\">\r\n    <ng-container *nzModalContent>\r\n        <app-add-menu-header-admin\r\n            (isAddMenu)=\"isCancelFormAddMenu($event)\"\r\n            [data]=\"dataAddMenu\"\r\n            [type]=\"data.type\"\r\n            (valueData)=\"getDataFormAdd($event)\">\r\n        </app-add-menu-header-admin>\r\n    </ng-container>\r\n    <ng-template #titleAddMenu>\r\n        <p class=\"m-0 title\" style=\"font-weight:400;\">{{'them_menu' | translate}}</p>\r\n    </ng-template>\r\n</nz-modal>\r\n<!-- MODAL S\u1EECA MENU -->\r\n<nz-modal [(nzVisible)]=\"isOpenEditMenu\" [nzFooter]=\"null\"\r\n    [nzStyle]=\"{width: '60vw', top: '5%',position: 'relative'}\" nzCloseIcon\r\n    [nzTitle]=\"titleEditMenu\" nzCancelText=\"{{'huy' | translate}}\" nzOkText=\"{{'luu' | translate}}\">\r\n    <ng-container *nzModalContent>\r\n        <app-edit-menu-header-admin \r\n            (isEditMenu)=\"isCancleFormEditMenu($event)\"\r\n            [data]=\"dataEditMenu\"\r\n            [type]=\"data.type\"\r\n            (valueDataEdited)=\"getValueFormEditMenu($event)\">\r\n        </app-edit-menu-header-admin>\r\n    </ng-container>\r\n    <ng-template #titleEditMenu>\r\n        <p class=\"m-0 title\" style=\"font-weight:400;\">{{'chinh_sua_menu' | translate}}</p>\r\n    </ng-template>\r\n</nz-modal>\r\n<!-- MODAL TH\u00CAM MENU PH\u1EE4 -->\r\n<nz-modal [(nzVisible)]=\"isOpenAddFormSubMenu\" [nzFooter]=\"null\"\r\n    [nzStyle]=\"{width: checkExistIdCategory ? '30vw' : '50vw'}\" nzCloseIcon\r\n    [nzTitle]=\"titleAddSubMenu\" nzCancelText=\"{{'huy' | translate}}\" nzOkText=\"{{'luu' | translate}}\">\r\n    <ng-container *nzModalContent>\r\n        <app-add-sub-menu-header-admin \r\n            [data]=\"dataAddSubMenu\"\r\n            (isCancelFormAddSub)=\"isCancelFormAddSub($event)\"\r\n            (valueDataAdd)=\"getValueFormAddSub($event)\"\r\n            (getDataCategoryAgain)=\"getDataCategoryAgain($event)\">\r\n        </app-add-sub-menu-header-admin>\r\n    </ng-container>\r\n    <ng-template #titleAddSubMenu>\r\n        <p class=\"m-0 title\" style=\"font-weight:400;\">{{'them_menu_con' | translate}}</p>\r\n    </ng-template>\r\n</nz-modal>\r\n<!-- MODAL CH\u1EC8NH S\u1EECA MENU PH\u1EE4 -->\r\n<nz-modal [(nzVisible)]=\"isOpenEditFormSubMenu\" [nzFooter]=\"null\"\r\n    [nzStyle]=\"{width: '50vw'}\" nzCloseIcon\r\n    [nzTitle]=\"titleEditSubMenu\" nzCancelText=\"{{'huy' | translate}}\" nzOkText=\"{{'luu' | translate}}\">\r\n    <ng-container *nzModalContent>\r\n        <app-edit-sub-menu-header-admin (isCancelFormEditSub)=\"isCancleFormEditSub($event)\"\r\n            [data]=\"dataEditSubMenu\"\r\n            (valueDataEdit)=\"getValueFormEditSub($event)\">\r\n        </app-edit-sub-menu-header-admin>\r\n    </ng-container>\r\n    <ng-template #titleEditSubMenu>\r\n        <p class=\"m-0 title\" style=\"font-weight:400;\">{{'chinh_sua_menu_con' | translate}}</p>\r\n    </ng-template>\r\n</nz-modal>", styles: [".wrapper .widget-row-elementor{display:grid;width:100%;height:100%;grid-column-gap:10px;column-gap:10px;padding:0 40px}.sub-item .sub-content .btn-foundation{display:flex;grid-gap:10px;gap:10px;opacity:0}.wrapper{width:100%;height:100%;background-color:#f1f0f0}.wrapper .widget-row-elementor{display:grid;width:100%;grid-column-gap:10px;column-gap:10px;padding:20px 40px}.wrapper .widget-row-elementor .elementor-custom{height:100%;background-color:#fff;box-shadow:#e3e3e333 0 2px 8px}.wrapper .widget-row-elementor .heading-menu{display:flex;align-items:center;justify-content:space-between;padding:10px;background:white;margin-bottom:10px}.example-list{width:100%;max-width:100%;height:100%;display:block;padding:20px 10px}.example-list::-webkit-scrollbar{width:5px;background-color:#f5f5f5}.example-list::-webkit-scrollbar-thumb{background-color:#bab9b9;border:2px solid #bab9b9;border-radius:5px}.example-box{position:relative;color:#000000de;box-sizing:border-box;list-style-type:none;cursor:move;font-size:14px;width:70%;margin:10px 10px 10px 50px}.example-box .content{position:relative;display:flex;align-items:center;justify-content:space-between;border:1px solid #b6dbff;padding:8px;border-radius:3px;background:#f8f5f5}.example-box .content .icon .item-icon{position:relative}.example-box .content .icon .close-icon{position:absolute;top:-3px;left:0;color:red;font-size:12px;cursor:pointer}.example-box .content .btn-foundation{display:flex;grid-gap:10px;gap:10px;opacity:0}.example-box .content .collapes-sub{position:absolute;top:25%;left:-20px;cursor:pointer}.example-box:hover>.content .btn-foundation{opacity:1}.sub-item{position:relative;border:1px solid #b6dbff;border-radius:3px;margin-bottom:10px;list-style-type:none}.sub-item .sub-content{display:flex;align-items:center;justify-content:space-between;background-color:#f8f5f5}.sub-item .text{padding:10px 0}.sub-item:hover>.sub-content .btn-foundation{opacity:1}.sub-item:first-child:before{height:70%}.tree_node{display:flex;align-items:center;justify-content:space-between}.tree_node:hover{background-color:#f7f7f7}.btn-foundation{display:flex;justify-content:flex-end;grid-gap:10px;gap:10px;padding-right:16px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.elementor-custom::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px #d2d2d2;background-color:#fff}.elementor-custom::-webkit-scrollbar{width:5px;background-color:#55c4f8}.elementor-custom::-webkit-scrollbar-thumb{border-radius:5px;background-color:#55c4f8}.title-admin{font-weight:bold;color:#008848;text-align:center;margin:15px 0}\n"], components: [{ type: SelectLanguageConfigComponent, selector: "app-select-language-config", inputs: ["isAdmin", "displayLabel", "isSetLanguageCode", "languages"], outputs: ["handleChangeMultiLanguage"] }, { type: i6.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { type: i6$3.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { type: i3$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i12$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.NzModalComponent, selector: "nz-modal", inputs: ["nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzZIndex", "nzWidth", "nzCloseIcon", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel", "nzTitle", "nzFooter", "nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzContent", "nzComponentParams", "nzWrapClassName", "nzClassName", "nzStyle", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { type: AddMenuHeaderAdminComponent, selector: "app-add-menu-header-admin", inputs: ["data", "type"], outputs: ["isAddMenu", "valueData"] }, { type: EditMenuHeaderAdminComponent, selector: "app-edit-menu-header-admin", inputs: ["data", "type"], outputs: ["isEditMenu", "valueDataEdited"] }, { type: AddSubMenuHeaderAdminComponent, selector: "app-add-sub-menu-header-admin", inputs: ["data"], outputs: ["isCancelFormAddSub", "valueDataAdd", "getDataCategoryAgain"] }, { type: EditSubMenuHeaderAdminComponent, selector: "app-edit-sub-menu-header-admin", inputs: ["data"], outputs: ["isCancelFormEditSub", "valueDataEdit"] }], directives: [{ type: i17.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { type: i14.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { type: i19$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i6$3.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { type: i6$3.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { type: i19$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i6$3.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { type: i18.NzIconDirective, selector: "[nz-icon]", inputs: ["nzRotate", "nzSpin", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { type: i12$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$3.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { type: i21.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitleContext", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipTitle", "nz-tooltip", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { type: i24.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus", "nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nz-popconfirm", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDanger", "nzCancelText", "nzIcon"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { type: i4$1.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }], pipes: { "translate": i12$2.TranslatePipe, "vhLanguage": VhLanguagePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AtwMenuHorizontalAdmin, decorators: [{
             type: Component,
             args: [{
@@ -8830,7 +9150,7 @@ class AtwMenuVerticalAdmin {
     }
 }
 AtwMenuVerticalAdmin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AtwMenuVerticalAdmin, deps: [{ token: i3$1.FunctionService }, { token: i1.VhQueryAutoWeb }, { token: i2.MatDialog }, { token: i0.ChangeDetectorRef }, { token: i4$1.NzModalRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AtwMenuVerticalAdmin.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AtwMenuVerticalAdmin, selector: "atw-menu-vertical-admin", inputs: { data: "data", type: "type" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"wrapper\">\r\n    <!-- Ch\u1ECDn ng\u00F4n ng\u1EEF -->\r\n    <div class=\"mb-3\" style=\"padding: 20px 40px 0 40px;\">\r\n      <app-select-language-config [isAdmin]=\"true\"></app-select-language-config>\r\n    </div>\r\n    <!-- Danh s\u00E1ch menu -->\r\n    <div class=\"widget-row-elementor\">\r\n        <div class=\"list-menu\" style=\"height: calc(100% - 70px)\">\r\n            <!-- Ti\u00EAu \u0111\u1EC1 -->\r\n            <div class=\"heading-menu\">\r\n                <h3 class=\"m-0 menu-title\" style=\"font-weight:500;\">{{'cau_truc_menu' | translate}}</h3>\r\n                <div class=\"nav-header\">\r\n                    <button nz-button style=\"border:1px solid #008848; color:#008848; margin-right:15px;\"\r\n                        (click)=\"openAddMenuItem()\">{{'them_menu' | translate}}</button>\r\n                </div>\r\n            </div>\r\n            <!-- Danh s\u00E1ch menu  -->\r\n            <div class=\"elementor-custom\" style=\"overflow-y: scroll;min-height: 600px; height: calc(100% - 100px);\">\r\n                <!-- <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\"> -->\r\n                    <mat-tree cdkDropList (cdkDropListDropped)=\"cdkDropListDropped($event)\"\r\n                        [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n                        <mat-tree-node cdkDrag [cdkDragDisabled]=\"node.level != 0\" *matTreeNodeDef=\"let node\" matTreeNodePadding>\r\n                          <div class=\"w-100 tree_node\">\r\n                            <div style=\"display: flex; align-items: center\">\r\n                                <div style=\"padding: 0 10px; display: inline-block\">\r\n                                  <i nz-icon nzType=\"menu\" nzTheme=\"outline\" *ngIf=\"node.level == 0\"></i>\r\n                                </div>\r\n                                <!-- C\u00F3 menu con th\u00EC th\u00EAm icon expand_more ph\u00EDa tr\u01B0\u1EDBc -->\r\n                                <button mat-icon-button *ngIf=\"node.expandable\" matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node['name_' + functionService.selectedLanguageCode] | vhLanguage : 'name' : 'AtwMenu'\">\r\n                                    <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\r\n                                    </mat-icon>\r\n                                </button>\r\n                                <!-- Kh\u00F4ng c\u00F3 menu con th\u00EC th\u00EAm button disabled \u0111\u1EC3 c\u00F3 padding ph\u00EDa tr\u01B0\u1EDBc -->\r\n                                <button *ngIf=\"!node.expandable\" mat-icon-button disabled></button>\r\n                                <!-- Icon c\u1EE7a menu -->\r\n                                <span *ngIf=\"node.icon\">\r\n                                    <mat-icon class=\"mr-2\">{{node.icon}}</mat-icon>\r\n                                </span>\r\n                                <!-- N\u1ED9i dung menu -->\r\n                                {{node['name_' + functionService.selectedLanguageCode] | vhLanguage : 'name' : 'AtwMenu'}}\r\n                            </div>\r\n                            <!-- Danh s\u00E1ch c\u00E1c n\u00FAt thao t\u00E1c -->\r\n                            <div class=\"btn-foundation\">\r\n                                <!-- Th\u00EAm icon -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'them_icon' | translate}}\"\r\n                                    (click)=\"addIconToParent(node)\">\r\n                                    <i class=\"bi bi-star\"></i>\r\n                                </button>\r\n                                <!-- Xo\u00E1 icon -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'xoa_icon' | translate}}\"\r\n                                    (click)=\"deleteIcon(node)\">\r\n                                    <i class=\"bi bi-slash-circle-fill\"></i>\r\n                                </button>\r\n                                <!-- Th\u00EAm menu con -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'them_menu_con' | translate}}\"\r\n                                    *ngIf=\"node.group != 'category' && !node.id_freeblock\"\r\n                                    (click)=\"openAddSubMenuItem(node)\">\r\n                                    <i class=\"bi bi-plus\"></i>\r\n                                </button>\r\n                                <!-- G\u1ECDi c\u00E2y danh m\u1EE5c -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'goi_cay_danh_muc' | translate}}\"\r\n                                    *ngIf=\"node.group == 'category' && node.level == 0\"\r\n                                    (click)=\"openAddSubMenuItem(node)\">\r\n                                    <i class=\"bi bi-text-center\"></i>\r\n                                </button>\r\n                                <!-- Ch\u1EC9nh s\u1EEDa menu -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'chinh_sua_menu' | translate}}\"\r\n                                    *ngIf=\"node.group != 'category' || (node.group == 'category' && node.level == 0)\"\r\n                                    (click)=\"openEdit(node)\">\r\n                                    <i class=\"bi bi-pencil\"></i>\r\n                                </button>\r\n                                <!-- X\u00F3a -->\r\n                                <button \r\n                                  nz-popconfirm\r\n                                  nzPopconfirmTitle=\"{{'ban_co_chac_chan_muon_xoa_menu_nay' | translate}}\"\r\n                                  nzPopconfirmPlacement=\"bottom\"\r\n                                  nz-button \r\n                                  nzShape=\"circle\" \r\n                                  nz-tooltip \r\n                                  nzTooltipTitle=\"{{'xoa' | translate}}\"\r\n                                  *ngIf=\"node.group != 'category' || (node.group == 'category' && node.level == 0)\"\r\n                                  (nzOnConfirm)=\"removeMenuItem(node)\"\r\n                                  \r\n                                  >\r\n                                    <i class=\"bi bi-trash\"></i>\r\n                                </button>\r\n                            </div>\r\n                          </div>\r\n                        </mat-tree-node>\r\n                    </mat-tree>\r\n                <!-- </mat-tree> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<!-- MODAL TH\u00CAM MENU -->\r\n<nz-modal [(nzVisible)]=\"isOpenAddMenu\" [nzFooter]=\"null\"\r\n    [nzStyle]=\"{width: '60vw', top: '5%',position: 'relative'}\" nzCloseIcon \r\n    [nzTitle]=\"titleAddMenu\" nzCancelText=\"{{'huy' | translate}}\" nzOkText=\"{{'luu' | translate}}\">\r\n    <ng-container *nzModalContent>\r\n        <app-add-menu-vertical-admin (isAddMenu)=\"isCancelFormAddMenu($event)\"\r\n            [data]=\"dataAddMenu\"\r\n            [type]=\"type\"\r\n            (valueData)=\"getDataFormAdd($event)\">\r\n        </app-add-menu-vertical-admin>\r\n    </ng-container>\r\n    <ng-template #titleAddMenu>\r\n        <p class=\"m-0 title\" style=\"font-weight:400;\">{{'them_menu' | translate}}</p>\r\n    </ng-template>\r\n</nz-modal>\r\n<!-- MODAL S\u1EECA MENU -->\r\n<nz-modal [(nzVisible)]=\"isOpenEditMenu\" [nzFooter]=\"null\"\r\n    [nzStyle]=\"{width: '60vw', top: '5%',position: 'relative'}\" nzCloseIcon\r\n    [nzTitle]=\"titleEditMenu\" nzCancelText=\"{{'huy' | translate}}\" nzOkText=\"{{'luu' | translate}}\">\r\n    <ng-container *nzModalContent>\r\n        <app-edit-menu-vertical-admin (isEditMenu)=\"isCancleFormEditMenu($event)\"\r\n            [data]=\"dataEditMenu\"\r\n            [type]=\"type\"\r\n            (valueDataEdited)=\"getValueFormEditMenu($event)\">\r\n        </app-edit-menu-vertical-admin>\r\n    </ng-container>\r\n    <ng-template #titleEditMenu>\r\n        <p class=\"m-0 title\" style=\"font-weight:400;\">{{'chinh_sua_menu' | translate}}</p>\r\n    </ng-template>\r\n</nz-modal>\r\n<!-- MODAL TH\u00CAM MENU PH\u1EE4 -->\r\n<nz-modal [(nzVisible)]=\"isOpenAddFormSubMenu\" [nzFooter]=\"null\"\r\n    [nzStyle]=\"{width: checkExistIdCategory ? '30vw' : '50vw'}\" nzCloseIcon\r\n    [nzTitle]=\"titleAddSubMenu\" nzCancelText=\"{{'huy' | translate}}\" nzOkText=\"{{'luu' | translate}}\">\r\n    <ng-container *nzModalContent>\r\n        <app-add-sub-menu-vertical-admin (isCancelFormAddSub)=\"isCancelFormAddSub($event)\"\r\n            [data]=\"dataAddSubMenu\"\r\n            (valueDataAdd)=\"getValueFormAddSub($event)\"\r\n            (getDataCategoryAgain)=\"getDataCategoryAgain($event)\">\r\n        </app-add-sub-menu-vertical-admin>\r\n    </ng-container>\r\n    <ng-template #titleAddSubMenu>\r\n        <p class=\"m-0 title\" style=\"font-weight:400;\">{{'them_menu_con' | translate}}</p>\r\n    </ng-template>\r\n</nz-modal>\r\n<!-- MODAL CH\u1EC8NH S\u1EECA MENU PH\u1EE4 -->\r\n<nz-modal [(nzVisible)]=\"isOpenEditFormSubMenu\" [nzFooter]=\"null\"\r\n    [nzStyle]=\"{width: '50vw'}\" nzCloseIcon\r\n    [nzTitle]=\"titleEditSubMenu\" nzCancelText=\"{{'huy' | translate}}\" nzOkText=\"{{'luu' | translate}}\">\r\n    <ng-container *nzModalContent>\r\n        <app-edit-sub-menu-vertical-admin (isCancelFormEditSub)=\"isCancleFormEditSub($event)\"\r\n            [data]=\"dataEditSubMenu\"\r\n            (valueDataEdit)=\"getValueFormEditSub($event)\">\r\n        </app-edit-sub-menu-vertical-admin>\r\n    </ng-container>\r\n    <ng-template #titleEditSubMenu>\r\n        <p class=\"m-0 title\" style=\"font-weight:400;\">{{'chinh_sua_menu_con' | translate}}</p>\r\n    </ng-template>\r\n</nz-modal>", styles: [".sub-item .sub-content .btn-foundation{display:flex;grid-gap:10px;gap:10px;opacity:0}.wrapper{width:100%;height:100%;background-color:#f1f0f0}.wrapper .widget-row-elementor{display:grid;width:100%;height:100%;grid-column-gap:10px;column-gap:10px;padding:20px 40px}.wrapper .widget-row-elementor .elementor-custom{height:100%;background-color:#fff;box-shadow:#e3e3e333 0 2px 8px}.wrapper .widget-row-elementor .heading-menu{display:flex;align-items:center;justify-content:space-between;padding:10px;background:white;margin-bottom:10px}.example-list{width:100%;max-width:100%;height:100%;display:block;padding:20px 10px}.example-list::-webkit-scrollbar{width:5px;background-color:#f5f5f5}.example-list::-webkit-scrollbar-thumb{background-color:#bab9b9;border:2px solid #bab9b9;border-radius:5px}.example-box{position:relative;color:#000000de;box-sizing:border-box;list-style-type:none;cursor:move;font-size:14px;width:70%;margin:10px 10px 10px 50px}.example-box .content{position:relative;display:flex;align-items:center;justify-content:space-between;border:1px solid #b6dbff;padding:8px;border-radius:3px;background:#f8f5f5}.example-box .content .icon .item-icon{position:relative}.example-box .content .icon .close-icon{position:absolute;top:-3px;left:0;color:red;font-size:12px;cursor:pointer}.example-box .content .btn-foundation{display:flex;grid-gap:10px;gap:10px;opacity:0}.example-box .content .collapes-sub{position:absolute;top:25%;left:-20px;cursor:pointer}.example-box:hover>.content .btn-foundation{opacity:1}.sub-item{position:relative;border:1px solid #b6dbff;border-radius:3px;margin-bottom:10px;list-style-type:none}.sub-item .sub-content{display:flex;align-items:center;justify-content:space-between;background-color:#f8f5f5}.sub-item .text{padding:10px 0}.sub-item:hover>.sub-content .btn-foundation{opacity:1}.sub-item:first-child:before{height:70%}.tree_node{display:flex;align-items:center;justify-content:space-between}.tree_node:hover{background-color:#f7f7f7}.btn-foundation{display:flex;justify-content:flex-end;grid-gap:10px;gap:10px;padding-right:16px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.elementor-custom::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px #d2d2d2;background-color:#fff}.elementor-custom::-webkit-scrollbar{width:5px;background-color:#55c4f8}.elementor-custom::-webkit-scrollbar-thumb{border-radius:5px;background-color:#55c4f8}\n"], components: [{ type: SelectLanguageConfigComponent, selector: "app-select-language-config", inputs: ["isAdmin", "displayLabel", "isSetLanguageCode", "languages"], outputs: ["handleChangeMultiLanguage"] }, { type: i6.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { type: i6$3.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { type: i3$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i12$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.NzModalComponent, selector: "nz-modal", inputs: ["nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzZIndex", "nzWidth", "nzCloseIcon", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel", "nzTitle", "nzFooter", "nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzContent", "nzComponentParams", "nzWrapClassName", "nzClassName", "nzStyle", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { type: AddMenuVerticalAdminComponent, selector: "app-add-menu-vertical-admin", inputs: ["data", "type"], outputs: ["isAddMenu", "isEditMenu", "valueData", "valueDataEdited"] }, { type: EditMenuVerticalAdminComponent, selector: "app-edit-menu-vertical-admin", inputs: ["data", "type"], outputs: ["isEditMenu", "valueDataEdited"] }, { type: AddSubMenuVerticalAdminComponent, selector: "app-add-sub-menu-vertical-admin", inputs: ["data"], outputs: ["isCancelFormAddSub", "valueDataAdd", "getDataCategoryAgain"] }, { type: EditSubMenuVerticalAdminComponent, selector: "app-edit-sub-menu-vertical-admin", inputs: ["data"], outputs: ["isCancelFormEditSub", "valueDataEdit"] }], directives: [{ type: i17.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { type: i14.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { type: i19$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i6$3.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { type: i6$3.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { type: i19$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i6$3.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { type: i12$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i18.NzIconDirective, selector: "[nz-icon]", inputs: ["nzRotate", "nzSpin", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { type: i6$3.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { type: i21.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitleContext", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipTitle", "nz-tooltip", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { type: i22.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus", "nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nz-popconfirm", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDanger", "nzCancelText", "nzIcon"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { type: i4$1.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }], pipes: { "translate": i12$2.TranslatePipe, "vhLanguage": VhLanguagePipe } });
+AtwMenuVerticalAdmin.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AtwMenuVerticalAdmin, selector: "atw-menu-vertical-admin", inputs: { data: "data", type: "type" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"wrapper\">\r\n    <!-- Ch\u1ECDn ng\u00F4n ng\u1EEF -->\r\n    <div class=\"mb-3\" style=\"padding: 20px 40px 0 40px;\">\r\n      <app-select-language-config [isAdmin]=\"true\"></app-select-language-config>\r\n    </div>\r\n    <!-- Danh s\u00E1ch menu -->\r\n    <div class=\"widget-row-elementor\">\r\n        <div class=\"list-menu\" style=\"height: calc(100% - 70px)\">\r\n            <!-- Ti\u00EAu \u0111\u1EC1 -->\r\n            <div class=\"heading-menu\">\r\n                <h3 class=\"m-0 menu-title\" style=\"font-weight:500;\">{{'cau_truc_menu' | translate}}</h3>\r\n                <div class=\"nav-header\">\r\n                    <button nz-button style=\"border:1px solid #008848; color:#008848; margin-right:15px;\"\r\n                        (click)=\"openAddMenuItem()\">{{'them_menu' | translate}}</button>\r\n                </div>\r\n            </div>\r\n            <!-- Danh s\u00E1ch menu  -->\r\n            <div class=\"elementor-custom\" style=\"overflow-y: scroll;min-height: 600px; height: calc(100% - 100px);\">\r\n                <!-- <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\"> -->\r\n                    <mat-tree cdkDropList (cdkDropListDropped)=\"cdkDropListDropped($event)\"\r\n                        [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n                        <mat-tree-node cdkDrag [cdkDragDisabled]=\"node.level != 0\" *matTreeNodeDef=\"let node\" matTreeNodePadding>\r\n                          <div class=\"w-100 tree_node\">\r\n                            <div style=\"display: flex; align-items: center\">\r\n                                <div style=\"padding: 0 10px; display: inline-block\">\r\n                                  <i nz-icon nzType=\"menu\" nzTheme=\"outline\" *ngIf=\"node.level == 0\"></i>\r\n                                </div>\r\n                                <!-- C\u00F3 menu con th\u00EC th\u00EAm icon expand_more ph\u00EDa tr\u01B0\u1EDBc -->\r\n                                <button mat-icon-button *ngIf=\"node.expandable\" matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node['name_' + functionService.selectedLanguageCode] | vhLanguage : 'name' : 'AtwMenu'\">\r\n                                    <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\r\n                                    </mat-icon>\r\n                                </button>\r\n                                <!-- Kh\u00F4ng c\u00F3 menu con th\u00EC th\u00EAm button disabled \u0111\u1EC3 c\u00F3 padding ph\u00EDa tr\u01B0\u1EDBc -->\r\n                                <button *ngIf=\"!node.expandable\" mat-icon-button disabled></button>\r\n                                <!-- Icon c\u1EE7a menu -->\r\n                                <span *ngIf=\"node.icon\">\r\n                                    <mat-icon class=\"mr-2\">{{node.icon}}</mat-icon>\r\n                                </span>\r\n                                <!-- N\u1ED9i dung menu -->\r\n                                {{node['name_' + functionService.selectedLanguageCode] | vhLanguage : 'name' : 'AtwMenu'}}\r\n                            </div>\r\n                            <!-- Danh s\u00E1ch c\u00E1c n\u00FAt thao t\u00E1c -->\r\n                            <div class=\"btn-foundation\">\r\n                                <!-- Th\u00EAm icon -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'them_icon' | translate}}\"\r\n                                    (click)=\"addIconToParent(node)\">\r\n                                    <i class=\"bi bi-star\"></i>\r\n                                </button>\r\n                                <!-- Xo\u00E1 icon -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'xoa_icon' | translate}}\"\r\n                                    (click)=\"deleteIcon(node)\">\r\n                                    <i class=\"bi bi-slash-circle-fill\"></i>\r\n                                </button>\r\n                                <!-- Th\u00EAm menu con -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'them_menu_con' | translate}}\"\r\n                                    *ngIf=\"node.group != 'category' && !node.id_freeblock\"\r\n                                    (click)=\"openAddSubMenuItem(node)\">\r\n                                    <i class=\"bi bi-plus\"></i>\r\n                                </button>\r\n                                <!-- G\u1ECDi c\u00E2y danh m\u1EE5c -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'goi_cay_danh_muc' | translate}}\"\r\n                                    *ngIf=\"node.group == 'category' && node.level == 0\"\r\n                                    (click)=\"openAddSubMenuItem(node)\">\r\n                                    <i class=\"bi bi-text-center\"></i>\r\n                                </button>\r\n                                <!-- Ch\u1EC9nh s\u1EEDa menu -->\r\n                                <button nz-button nzShape=\"circle\" nz-tooltip nzTooltipTitle=\"{{'chinh_sua_menu' | translate}}\"\r\n                                    *ngIf=\"node.group != 'category' || (node.group == 'category' && node.level == 0)\"\r\n                                    (click)=\"openEdit(node)\">\r\n                                    <i class=\"bi bi-pencil\"></i>\r\n                                </button>\r\n                                <!-- X\u00F3a -->\r\n                                <button \r\n                                  nz-popconfirm\r\n                                  nzPopconfirmTitle=\"{{'ban_co_chac_chan_muon_xoa_menu_nay' | translate}}\"\r\n                                  nzPopconfirmPlacement=\"bottom\"\r\n                                  nz-button \r\n                                  nzShape=\"circle\" \r\n                                  nz-tooltip \r\n                                  nzTooltipTitle=\"{{'xoa' | translate}}\"\r\n                                  *ngIf=\"node.group != 'category' || (node.group == 'category' && node.level == 0)\"\r\n                                  (nzOnConfirm)=\"removeMenuItem(node)\"\r\n                                  \r\n                                  >\r\n                                    <i class=\"bi bi-trash\"></i>\r\n                                </button>\r\n                            </div>\r\n                          </div>\r\n                        </mat-tree-node>\r\n                    </mat-tree>\r\n                <!-- </mat-tree> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n<!-- MODAL TH\u00CAM MENU -->\r\n<nz-modal [(nzVisible)]=\"isOpenAddMenu\" [nzFooter]=\"null\"\r\n    [nzStyle]=\"{width: '60vw', top: '5%',position: 'relative'}\" nzCloseIcon \r\n    [nzTitle]=\"titleAddMenu\" nzCancelText=\"{{'huy' | translate}}\" nzOkText=\"{{'luu' | translate}}\">\r\n    <ng-container *nzModalContent>\r\n        <app-add-menu-vertical-admin (isAddMenu)=\"isCancelFormAddMenu($event)\"\r\n            [data]=\"dataAddMenu\"\r\n            [type]=\"type\"\r\n            (valueData)=\"getDataFormAdd($event)\">\r\n        </app-add-menu-vertical-admin>\r\n    </ng-container>\r\n    <ng-template #titleAddMenu>\r\n        <p class=\"m-0 title\" style=\"font-weight:400;\">{{'them_menu' | translate}}</p>\r\n    </ng-template>\r\n</nz-modal>\r\n<!-- MODAL S\u1EECA MENU -->\r\n<nz-modal [(nzVisible)]=\"isOpenEditMenu\" [nzFooter]=\"null\"\r\n    [nzStyle]=\"{width: '60vw', top: '5%',position: 'relative'}\" nzCloseIcon\r\n    [nzTitle]=\"titleEditMenu\" nzCancelText=\"{{'huy' | translate}}\" nzOkText=\"{{'luu' | translate}}\">\r\n    <ng-container *nzModalContent>\r\n        <app-edit-menu-vertical-admin (isEditMenu)=\"isCancleFormEditMenu($event)\"\r\n            [data]=\"dataEditMenu\"\r\n            [type]=\"type\"\r\n            (valueDataEdited)=\"getValueFormEditMenu($event)\">\r\n        </app-edit-menu-vertical-admin>\r\n    </ng-container>\r\n    <ng-template #titleEditMenu>\r\n        <p class=\"m-0 title\" style=\"font-weight:400;\">{{'chinh_sua_menu' | translate}}</p>\r\n    </ng-template>\r\n</nz-modal>\r\n<!-- MODAL TH\u00CAM MENU PH\u1EE4 -->\r\n<nz-modal [(nzVisible)]=\"isOpenAddFormSubMenu\" [nzFooter]=\"null\"\r\n    [nzStyle]=\"{width: checkExistIdCategory ? '30vw' : '50vw'}\" nzCloseIcon\r\n    [nzTitle]=\"titleAddSubMenu\" nzCancelText=\"{{'huy' | translate}}\" nzOkText=\"{{'luu' | translate}}\">\r\n    <ng-container *nzModalContent>\r\n        <app-add-sub-menu-vertical-admin (isCancelFormAddSub)=\"isCancelFormAddSub($event)\"\r\n            [data]=\"dataAddSubMenu\"\r\n            (valueDataAdd)=\"getValueFormAddSub($event)\"\r\n            (getDataCategoryAgain)=\"getDataCategoryAgain($event)\">\r\n        </app-add-sub-menu-vertical-admin>\r\n    </ng-container>\r\n    <ng-template #titleAddSubMenu>\r\n        <p class=\"m-0 title\" style=\"font-weight:400;\">{{'them_menu_con' | translate}}</p>\r\n    </ng-template>\r\n</nz-modal>\r\n<!-- MODAL CH\u1EC8NH S\u1EECA MENU PH\u1EE4 -->\r\n<nz-modal [(nzVisible)]=\"isOpenEditFormSubMenu\" [nzFooter]=\"null\"\r\n    [nzStyle]=\"{width: '50vw'}\" nzCloseIcon\r\n    [nzTitle]=\"titleEditSubMenu\" nzCancelText=\"{{'huy' | translate}}\" nzOkText=\"{{'luu' | translate}}\">\r\n    <ng-container *nzModalContent>\r\n        <app-edit-sub-menu-vertical-admin (isCancelFormEditSub)=\"isCancleFormEditSub($event)\"\r\n            [data]=\"dataEditSubMenu\"\r\n            (valueDataEdit)=\"getValueFormEditSub($event)\">\r\n        </app-edit-sub-menu-vertical-admin>\r\n    </ng-container>\r\n    <ng-template #titleEditSubMenu>\r\n        <p class=\"m-0 title\" style=\"font-weight:400;\">{{'chinh_sua_menu_con' | translate}}</p>\r\n    </ng-template>\r\n</nz-modal>", styles: [".sub-item .sub-content .btn-foundation{display:flex;grid-gap:10px;gap:10px;opacity:0}.wrapper{width:100%;height:100%;background-color:#f1f0f0}.wrapper .widget-row-elementor{display:grid;width:100%;height:100%;grid-column-gap:10px;column-gap:10px;padding:20px 40px}.wrapper .widget-row-elementor .elementor-custom{height:100%;background-color:#fff;box-shadow:#e3e3e333 0 2px 8px}.wrapper .widget-row-elementor .heading-menu{display:flex;align-items:center;justify-content:space-between;padding:10px;background:white;margin-bottom:10px}.example-list{width:100%;max-width:100%;height:100%;display:block;padding:20px 10px}.example-list::-webkit-scrollbar{width:5px;background-color:#f5f5f5}.example-list::-webkit-scrollbar-thumb{background-color:#bab9b9;border:2px solid #bab9b9;border-radius:5px}.example-box{position:relative;color:#000000de;box-sizing:border-box;list-style-type:none;cursor:move;font-size:14px;width:70%;margin:10px 10px 10px 50px}.example-box .content{position:relative;display:flex;align-items:center;justify-content:space-between;border:1px solid #b6dbff;padding:8px;border-radius:3px;background:#f8f5f5}.example-box .content .icon .item-icon{position:relative}.example-box .content .icon .close-icon{position:absolute;top:-3px;left:0;color:red;font-size:12px;cursor:pointer}.example-box .content .btn-foundation{display:flex;grid-gap:10px;gap:10px;opacity:0}.example-box .content .collapes-sub{position:absolute;top:25%;left:-20px;cursor:pointer}.example-box:hover>.content .btn-foundation{opacity:1}.sub-item{position:relative;border:1px solid #b6dbff;border-radius:3px;margin-bottom:10px;list-style-type:none}.sub-item .sub-content{display:flex;align-items:center;justify-content:space-between;background-color:#f8f5f5}.sub-item .text{padding:10px 0}.sub-item:hover>.sub-content .btn-foundation{opacity:1}.sub-item:first-child:before{height:70%}.tree_node{display:flex;align-items:center;justify-content:space-between}.tree_node:hover{background-color:#f7f7f7}.btn-foundation{display:flex;justify-content:flex-end;grid-gap:10px;gap:10px;padding-right:16px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.elementor-custom::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px #d2d2d2;background-color:#fff}.elementor-custom::-webkit-scrollbar{width:5px;background-color:#55c4f8}.elementor-custom::-webkit-scrollbar-thumb{border-radius:5px;background-color:#55c4f8}\n"], components: [{ type: SelectLanguageConfigComponent, selector: "app-select-language-config", inputs: ["isAdmin", "displayLabel", "isSetLanguageCode", "languages"], outputs: ["handleChangeMultiLanguage"] }, { type: i6.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { type: i6$3.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { type: i3$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i12$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.NzModalComponent, selector: "nz-modal", inputs: ["nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzZIndex", "nzWidth", "nzCloseIcon", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel", "nzTitle", "nzFooter", "nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzContent", "nzComponentParams", "nzWrapClassName", "nzClassName", "nzStyle", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { type: AddMenuVerticalAdminComponent, selector: "app-add-menu-vertical-admin", inputs: ["data", "type"], outputs: ["isAddMenu", "isEditMenu", "valueData", "valueDataEdited"] }, { type: EditMenuVerticalAdminComponent, selector: "app-edit-menu-vertical-admin", inputs: ["data", "type"], outputs: ["isEditMenu", "valueDataEdited"] }, { type: AddSubMenuVerticalAdminComponent, selector: "app-add-sub-menu-vertical-admin", inputs: ["data"], outputs: ["isCancelFormAddSub", "valueDataAdd", "getDataCategoryAgain"] }, { type: EditSubMenuVerticalAdminComponent, selector: "app-edit-sub-menu-vertical-admin", inputs: ["data"], outputs: ["isCancelFormEditSub", "valueDataEdit"] }], directives: [{ type: i17.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { type: i14.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { type: i19$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i6$3.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { type: i6$3.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { type: i19$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i6$3.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { type: i12$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i18.NzIconDirective, selector: "[nz-icon]", inputs: ["nzRotate", "nzSpin", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { type: i6$3.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { type: i21.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitleContext", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipTitle", "nz-tooltip", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { type: i24.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus", "nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nz-popconfirm", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDanger", "nzCancelText", "nzIcon"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }, { type: i4$1.NzModalContentDirective, selector: "[nzModalContent]", exportAs: ["nzModalContent"] }], pipes: { "translate": i12$2.TranslatePipe, "vhLanguage": VhLanguagePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AtwMenuVerticalAdmin, decorators: [{
             type: Component,
             args: [{
@@ -14284,6 +14604,8 @@ class AtwImageAdminConfig extends AtwUpdateDbComponent {
                 index: 11,
             },
         ];
+        /** Có nên mở nút cập nhật kích thước ảnh cho bằng kích thước thiết kế hay không */
+        this.isDesignImageSizeValid = true;
         this.imageDeviceWidthMax = 'desktop'; // biến này để lưu thiết bị có hình ảnh width lớn nhất
         this.widthImageMax = 0;
         this.heightImageMax = 0;
@@ -14324,48 +14646,54 @@ class AtwImageAdminConfig extends AtwUpdateDbComponent {
     ngOnInit() {
         var _a, _b, _c, _d, _e, _f;
         var _g;
-        this.id_subproject = this.vhQueryAutoWeb.getlocalSubProject_Working()._id;
-        this.subproject = this.vhQueryAutoWeb.getlocalSubProject(this.vhQueryAutoWeb.getlocalSubProject_Working()._id);
-        this.resolution = this.subproject.resolution;
-        // Kiểm tra nếu chưa có config thì thêm để người dùng không cần xóa thêm lại
-        if (!this.config.hasOwnProperty('position_onscroll')) {
-            this.config.position_onscroll = {
-                type: 0,
-                top: 0,
-            };
-        }
-        if (!this.config.hasOwnProperty('is_top_page'))
-            this.config.is_top_page = false;
-        if (!((_b = (_a = this.objectChoosing.setups) === null || _a === void 0 ? void 0 : _a.upload_image) === null || _b === void 0 ? void 0 : _b.compressWidth))
-            this.objectChoosing.setups.upload_image.compress_width = 100;
-        if (!((_d = (_c = this.objectChoosing.setups) === null || _c === void 0 ? void 0 : _c.upload_image) === null || _d === void 0 ? void 0 : _d.compressHeight))
-            this.objectChoosing.setups.upload_image.compress_height = 100;
-        if (!((_e = this.config['image-fullscreen']) === null || _e === void 0 ? void 0 : _e.hasOwnProperty('toggle_fullscreen'))) {
-            (_f = (_g = this.config)['image-fullscreen']) !== null && _f !== void 0 ? _f : (_g['image-fullscreen'] = {});
-            this.config['image-fullscreen'].toggle_fullscreen = false;
-        }
-        // phần này get dữ liệu json
-        forkJoin([
-            this.http.get('assets/data/effects/image.json'),
-        ]).subscribe(([effects]) => {
-            this.effect_hover = effects;
-            this.effect_hover_data = this.effect_hover.find((e) => e.type == this.staticdata[this.device + '_animation_type']);
+        return __awaiter(this, void 0, void 0, function* () {
+            this.id_subproject = this.vhQueryAutoWeb.getlocalSubProject_Working()._id;
+            this.subproject = this.vhQueryAutoWeb.getlocalSubProject(this.vhQueryAutoWeb.getlocalSubProject_Working()._id);
+            this.resolution = this.subproject.resolution;
+            this.isDesignImageSizeValid = yield this.checkDesignImageSize();
+            // Kiểm tra nếu chưa có config thì thêm để người dùng không cần xóa thêm lại
+            if (!this.config.hasOwnProperty('position_onscroll')) {
+                this.config.position_onscroll = {
+                    type: 0,
+                    top: 0,
+                };
+            }
+            if (!this.config.hasOwnProperty('is_top_page'))
+                this.config.is_top_page = false;
+            if (!((_b = (_a = this.objectChoosing.setups) === null || _a === void 0 ? void 0 : _a.upload_image) === null || _b === void 0 ? void 0 : _b.compressWidth))
+                this.objectChoosing.setups.upload_image.compress_width = 100;
+            if (!((_d = (_c = this.objectChoosing.setups) === null || _c === void 0 ? void 0 : _c.upload_image) === null || _d === void 0 ? void 0 : _d.compressHeight))
+                this.objectChoosing.setups.upload_image.compress_height = 100;
+            if (!((_e = this.config['image-fullscreen']) === null || _e === void 0 ? void 0 : _e.hasOwnProperty('toggle_fullscreen'))) {
+                (_f = (_g = this.config)['image-fullscreen']) !== null && _f !== void 0 ? _f : (_g['image-fullscreen'] = {});
+                this.config['image-fullscreen'].toggle_fullscreen = false;
+            }
+            // phần này get dữ liệu json
+            forkJoin([
+                this.http.get('assets/data/effects/image.json'),
+            ]).subscribe(([effects]) => {
+                this.effect_hover = effects;
+                this.effect_hover_data = this.effect_hover.find((e) => e.type == this.staticdata[this.device + '_animation_type']);
+            });
         });
     }
     ngOnChanges(changes) {
         var _a, _b, _c, _d;
-        if (!this.staticdata.accessibility)
-            this.staticdata.accessibility = {};
-        if (((_a = this.class['image']) === null || _a === void 0 ? void 0 : _a['background-image']) && this.class['image']['background-image'].includes('url(')) {
-            this.class['image']['background-image'] = 'none';
-        }
-        if (this.effect_hover) {
-            this.effect_hover_data = this.effect_hover.find((e) => e.type == this.staticdata[this.device + '_animation_type']);
-            this.customize = ((_d = (_c = (_b = this.effect_hover_data) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.find(e => { var _a; return e.id == ((_a = this.config['animation-selected']) === null || _a === void 0 ? void 0 : _a.id); })) === null || _d === void 0 ? void 0 : _d.customize) || [];
-        }
-        if (changes.device) {
-            this.getWidthHeightImage();
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            this.isDesignImageSizeValid = yield this.checkDesignImageSize();
+            if (!this.staticdata.accessibility)
+                this.staticdata.accessibility = {};
+            if (((_a = this.class['image']) === null || _a === void 0 ? void 0 : _a['background-image']) && this.class['image']['background-image'].includes('url(')) {
+                this.class['image']['background-image'] = 'none';
+            }
+            if (this.effect_hover) {
+                this.effect_hover_data = this.effect_hover.find((e) => e.type == this.staticdata[this.device + '_animation_type']);
+                this.customize = ((_d = (_c = (_b = this.effect_hover_data) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.find(e => { var _a; return e.id == ((_a = this.config['animation-selected']) === null || _a === void 0 ? void 0 : _a.id); })) === null || _d === void 0 ? void 0 : _d.customize) || [];
+            }
+            if (changes.device) {
+                this.getWidthHeightImage();
+            }
+        });
     }
     handleOpenFullscreenPreview() {
         const srcTemp = this.staticdata.img[this.device + '_img'] || 'https://upload.wikimedia.org/wikipedia/commons/1/14/No_Image_Available.jpg';
@@ -14653,7 +14981,7 @@ class AtwImageAdminConfig extends AtwUpdateDbComponent {
      * @param file File được kéo thả vào hoặc được tải lên
      */
     processImageUpload(file) {
-        var _a, _b;
+        var _a, _b, _c;
         let compress_type = this.objectChoosing.setups.upload_image.compress_type;
         let resolution = {};
         switch (this.objectChoosing.setups.upload_image.compress_type) {
@@ -14664,17 +14992,28 @@ class AtwImageAdminConfig extends AtwUpdateDbComponent {
                 };
                 break;
             case 'compress-frame':
-                resolution = {
-                    width: this.functionService.devices.find((device) => device.value == this.device)
-                        .width,
-                    height: this.functionService.devices.find((device) => device.value == this.device)
-                        .height,
-                };
+                const dimension = (_a = this.objectChoosing[`${this.device}_config`]) === null || _a === void 0 ? void 0 : _a.dimension;
+                if (dimension &&
+                    Object.keys(dimension).length > 0 &&
+                    typeof dimension.width === 'number' &&
+                    typeof dimension.height === 'number') {
+                    resolution = {
+                        width: dimension.width,
+                        height: dimension.height,
+                    };
+                }
+                else {
+                    const deviceItem = this.functionService.devices.find((device) => device.value == this.device);
+                    resolution = {
+                        width: deviceItem.width,
+                        height: deviceItem.height,
+                    };
+                }
                 break;
             case 'custom':
                 resolution = {
-                    width: +((_a = this.objectChoosing.setups.upload_image.compress_width) !== null && _a !== void 0 ? _a : 100),
-                    height: +((_b = this.objectChoosing.setups.upload_image.compress_height) !== null && _b !== void 0 ? _b : 100),
+                    width: +((_b = this.objectChoosing.setups.upload_image.compress_width) !== null && _b !== void 0 ? _b : 100),
+                    height: +((_c = this.objectChoosing.setups.upload_image.compress_height) !== null && _c !== void 0 ? _c : 100),
                 };
                 compress_type = 'compress-frame';
                 break;
@@ -14976,7 +15315,7 @@ class AtwImageAdminConfig extends AtwUpdateDbComponent {
      * Lấy hình ảnh từ url đẩy lên server với kích thước hình thay đổi
      * */
     handleOkConfirm() {
-        var _a, _b;
+        var _a, _b, _c;
         this.isConfirmLoading = true;
         let compress_type = this.objectChoosing.setups.upload_image.compress_type;
         let resolution = {};
@@ -14988,17 +15327,28 @@ class AtwImageAdminConfig extends AtwUpdateDbComponent {
                 };
                 break;
             case 'compress-frame':
-                resolution = {
-                    width: this.functionService.devices.find((device) => device.value == this.device)
-                        .width,
-                    height: this.functionService.devices.find((device) => device.value == this.device)
-                        .height,
-                };
+                const dimension = (_a = this.objectChoosing[`${this.device}_config`]) === null || _a === void 0 ? void 0 : _a.dimension;
+                if (dimension &&
+                    Object.keys(dimension).length > 0 &&
+                    typeof dimension.width === 'number' &&
+                    typeof dimension.height === 'number') {
+                    resolution = {
+                        width: dimension.width,
+                        height: dimension.height,
+                    };
+                }
+                else {
+                    const deviceItem = this.functionService.devices.find((device) => device.value == this.device);
+                    resolution = {
+                        width: deviceItem.width,
+                        height: deviceItem.height,
+                    };
+                }
                 break;
             case 'custom':
                 resolution = {
-                    width: +((_a = this.objectChoosing.setups.upload_image.compress_width) !== null && _a !== void 0 ? _a : 100),
-                    height: +((_b = this.objectChoosing.setups.upload_image.compress_height) !== null && _b !== void 0 ? _b : 100),
+                    width: +((_b = this.objectChoosing.setups.upload_image.compress_width) !== null && _b !== void 0 ? _b : 100),
+                    height: +((_c = this.objectChoosing.setups.upload_image.compress_height) !== null && _c !== void 0 ? _c : 100),
                 };
                 compress_type = 'compress-frame';
                 break;
@@ -15118,9 +15468,162 @@ class AtwImageAdminConfig extends AtwUpdateDbComponent {
             });
         }
     }
+    /** Hàm kiểm tra có cần phải hiển thị nút cập nhật không */
+    checkDesignImageSize() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // chạy song song cho nhanh
+            const results = yield Promise.all(this.functionService.devices.map((d) => __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                // Nếu giao diện thiết kế đã ẩn thiết bị thì không cần check
+                if (!((_a = this.subproject) === null || _a === void 0 ? void 0 : _a[`${d.value}_template_display`])) {
+                    return false;
+                }
+                // Ảnh gốc
+                const url = this.staticdata.img[`${d.value}_img`];
+                const imgSize = yield this.functionService.getImageSize(url);
+                // Container thiết kế
+                const container = this.objectChoosing[`${d.value}_class`].image;
+                const containerSize = {
+                    width: parseFloat(container.width),
+                    height: parseFloat(container.height),
+                };
+                return this.checkRatioDesignImgSize(imgSize, containerSize);
+            })));
+            // chỉ cần 1 device trả về true → return true
+            return results.some(v => v === true);
+        });
+    }
+    /**
+     * Hàm kiểm tra
+     * - Ratio có bị lệch nhiều hay không hoặc
+     * - Kích thước có lớn hơn nhiều so với kích thước hiển thị hay không?
+     * @param imgSize Kích thước của file ảnh gốc
+     * @param containerSize Kích thước thực tế người dùng thấy
+     */
+    checkRatioDesignImgSize(imgSize, containerSize) {
+        // Ratio
+        const imgRatio = imgSize.width / imgSize.height;
+        const containerRatio = containerSize.width / containerSize.height;
+        // Ratio lệch trên 10% → ảnh bị méo → return true
+        const ratioDiff = Math.abs(imgRatio - containerRatio) / containerRatio;
+        if (ratioDiff > 0.1) {
+            return true;
+        }
+        // Tại đây: ratio giống nhau hoặc lệch ít → xét về kích thước
+        const widthFactor = imgSize.width / containerSize.width;
+        const heightFactor = imgSize.height / containerSize.height;
+        // Ảnh lớn hơn container nhiều → ảnh nặng → giảm PageSpeed → return true
+        if (widthFactor > 1.5
+            || heightFactor > 1.5) {
+            return true;
+        }
+        // Ảnh lớn hơn chút nhưng không ảnh hưởng PageSpeed → return false
+        return false;
+    }
+    /**
+     * Hàm update kích thước ảnh phù hợp cho từng kích thước thiết kế của từng thiết bị
+     */
+    updateDesignImageSize() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const messages = [];
+            // ⭐ Show Loading 1 lần duy nhất
+            yield this.functionService.showLoading("", "current-loading", null, 0, false);
+            yield Promise.all(this.functionService.devices.map((d) => __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                // Nếu giao diện thiết kế đã ẩn thiết bị thì không cần check
+                if (!this.subproject[`${d.value}_template_display`])
+                    return;
+                /** Khai báo tin nhắn thông báo cho từng thiết bị */
+                const msgDevices = `(${this.languageService.translate('thiet_bi')} ${this.languageService.translate(d.label)}) `;
+                // Ảnh gốc
+                const url = this.staticdata.img[`${d.value}_img`];
+                const imgSize = yield this.functionService.getImageSize(url);
+                // Container thiết kế
+                const container = this.objectChoosing[`${d.value}_class`].image;
+                const containerSize = {
+                    width: parseFloat(container.width),
+                    height: parseFloat(container.height),
+                };
+                // Trường hợp nếu ảnh này đã phù hợp thì trả về thông báo chứ không update nữa
+                if (!this.checkRatioDesignImgSize(imgSize, containerSize)) {
+                    messages.push({
+                        type: 'warning',
+                        msg: msgDevices + this.languageService.translate('anh_nay_da_phu_hop_khong_can_cap_nhat_nua')
+                    });
+                    return;
+                }
+                const msgSolution = this.type == 'admin'
+                    ? 'vui_long_chuan_bi_mot_hinh_khac_phu_hop'
+                    : 'vui_long_sua_thiet_ke_hoac_chuan_bi_mot_hinh_khac_phu_hop';
+                // Trường hợp đã cập nhật hoặc width là bằng sẵn rồi nhưng height thiết kế không phù hợp
+                // Thì trả về thông báo chứ không cho update nữa vì gây tăng dung lượng lưu ảnh không cần thiết
+                if (imgSize.width == containerSize.width &&
+                    imgSize.height != containerSize.height) {
+                    const mTmp = containerSize.height > imgSize.height
+                        ? 'chieu_cao_thiet_ke_lon_hon_chieu_cao_anh'
+                        : 'chieu_cao_thiet_ke_nho_hon_chieu_cao_anh';
+                    const m = this.languageService.translate(mTmp) + '. ' + this.languageService.translate(msgSolution);
+                    messages.push({
+                        type: 'error',
+                        msg: msgDevices + m + '!!!',
+                        duration: 8000
+                    });
+                    return;
+                }
+                // Trường hợp nếu ảnh này bé hơn kích thước thiết kế thì báo cho người dùng và không cập nhật
+                if (imgSize.width < containerSize.width) {
+                    const mTmp = 'chieu_dai_anh_nho_hon_chieu_dai_thiet_ke_lam_cho_viec_nen_anh_theo_khung_hien_thi_hinh_anh_khong_hoat_dong';
+                    const m = this.languageService.translate(mTmp) + '. ' + this.languageService.translate(msgSolution);
+                    messages.push({
+                        type: 'error',
+                        msg: msgDevices + m + '!!!',
+                        duration: 8000
+                    });
+                    return;
+                }
+                // Cập nhật ảnh cho từng thiết bị
+                try {
+                    const rsp = yield this.vhImage.getImageFromURL_Autoweb(url, 'images/design/objects', {
+                        compress_type: 'compress-frame',
+                        resolution: containerSize,
+                    });
+                    if (rsp.vcode == 0) {
+                        this.staticdata.img[d.value + '_img'] = rsp.data;
+                        messages.push({
+                            type: 'success',
+                            msg: msgDevices + this.languageService.translate('tai_anh_thanh_cong')
+                        });
+                    }
+                    else {
+                        messages.push({
+                            type: 'error',
+                            msg: msgDevices + this.languageService.translate('tai_anh_that_bai_ly_do') + rsp.msg
+                        });
+                    }
+                }
+                catch (error) {
+                    if ((_a = error.message) === null || _a === void 0 ? void 0 : _a.includes('413')) {
+                        messages.push({
+                            type: 'error',
+                            msg: msgDevices + this.languageService.translate('file_anh_qua_lon_vui_chon_file_anh_co_dung_luong_nho_hon_1mb')
+                        });
+                    }
+                }
+            })));
+            // CHỈ CHẠY SAU KHI HOÀN TẤT TẤT CẢ DEVICE
+            this.updateStaticData();
+            // ⭐ Hide loading (delay 200ms để tránh flick)
+            yield this.functionService.hideLoading(200);
+            // Show toàn bộ message sau cùng
+            messages.forEach(m => {
+                var _a;
+                this.functionService.createMessage(m.type, m.msg, (_a = m.duration) !== null && _a !== void 0 ? _a : 5000);
+            });
+        });
+    }
 }
 AtwImageAdminConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AtwImageAdminConfig, deps: [{ token: i1.VhQueryAutoWeb }, { token: i2.MatDialog }, { token: i2$4.HttpClient }, { token: i1.VhEventMediator }, { token: i1.VhImage }, { token: i2.MatDialog }, { token: i3$1.FunctionService }, { token: i3$1.LanguageService }, { token: PLATFORM_ID }, { token: i5$3.NzImageService }], target: i0.ɵɵFactoryTarget.Component });
-AtwImageAdminConfig.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AtwImageAdminConfig, selector: "atw-image-admin-config", inputs: { visible_config_tool: "visible_config_tool", objectChoosing: "objectChoosing", type: "type", device: "device", class: "class", staticdata: "staticdata", config: "config", blocks_of_page: "blocks_of_page" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"image-editor\">\r\n  <div style=\"display: flex; align-items: center; gap: 4px; flex-wrap: wrap;\">\r\n    <button [ngClass]=\"configMode == 'basic' ? 'ant-btn ant-btn-primary' : 'ant-btn'\" class=\"d-flex align-items-center\" (click)=\"configMode = 'basic'\">\r\n      <span>{{('cau_hinh_co_ban') | translate}}</span>\r\n    </button>\r\n  \r\n    <button [ngClass]=\"configMode == 'advanced' ? 'ant-btn ant-btn-primary' : 'ant-btn'\" class=\"d-flex align-items-center\" (click)=\"configMode = 'advanced'\">\r\n      <span>{{('cau_hinh_nang_cao') | translate}}</span>\r\n    </button>\r\n  </div>\r\n  <!-- C\u1EA5u h\u00ECnh c\u01A1 b\u1EA3n -->\r\n  <ng-container *ngIf=\"configMode == 'basic'\">\r\n    <div style=\"margin-top: 10px\">\r\n      <div class=\"field-row\" style=\"margin: 0\">\r\n        <div class=\"field-row-sub field-row__switch\" style=\"padding: 0\" nz-tooltip\r\n        [nzTooltipTitle]=\"'*_giai_thich_anh_lcp' | translate\">\r\n          <span> {{'uu_tien_tai_truoc' | translate}} </span>\r\n          <nz-switch [(ngModel)]=\"config.is_top_page\" (ngModelChange)=\"updateConfig()\"></nz-switch>\r\n        </div>\r\n      </div>\r\n\r\n      <mat-form-field appearance=\"fill\">\r\n        <mat-label>{{'kieu_hien_thi_anh' | translate}}</mat-label>\r\n        <mat-select disableRipple [(ngModel)]=\"objectChoosing.setups.upload_image.display\"  (ngModelChange)=\"changeImgType()\">\r\n          <mat-option value=\"shared\">{{'anh_dung_chung_cho_tung_thiet_bi' | translate}}</mat-option>\r\n          <mat-option value=\"individual\">{{'anh_dung_rieng_cho_tung_thiet_bi' | translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field appearance=\"fill\">\r\n        <mat-label>{{'nguon_hinh_anh_hien_thi_len' | translate}}</mat-label>\r\n        <mat-select disableRipple [(ngModel)]=\"objectChoosing.setups.upload_image.source\" (ngModelChange)=\"updateSetups()\">\r\n          <mat-option value=\"device\">{{'tu_thiet_bi' | translate}}</mat-option>\r\n          <mat-option value=\"library\">{{'tu_thu_vien' | translate}}</mat-option>\r\n          <mat-option value=\"url\">{{'duong_dan_hinh_anh' | translate}}</mat-option>\r\n          <mat-option value=\"free_img\">{{'kho_anh_dung_chung' | translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field  *ngIf=\"objectChoosing.setups.upload_image.source == 'device'\" appearance=\"fill\" class=\"config-img\">\r\n        <mat-label>{{'nen_anh_tai_len' | translate}}</mat-label>\r\n        <mat-select disableRipple [(ngModel)]=\"objectChoosing.setups.upload_image.compress_type\" (ngModelChange)=\"updateSetups()\">\r\n          <mat-option [value]=\"'no-compress'\">{{'khong_nen_anh_sau_khi_tai_len' | translate}}</mat-option>\r\n          <mat-option [value]=\"'compress-screen'\">{{'nen_anh_theo_ti_le_man_hinh_hien_thi' | translate}}</mat-option>\r\n          <mat-option [value]=\"'compress-frame'\">{{'nen_anh_theo_ti_le_khung_hien_thi_anh' | translate}}</mat-option>\r\n          <mat-option [value]=\"'custom'\">{{'nen_anh_theo_kich_thuoc_tu_chon' | translate}}</mat-option>\r\n\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field *ngIf=\"objectChoosing.setups.upload_image.source == 'device' &&  objectChoosing.setups.upload_image.compress_type == 'custom'\" class=\"mr-4\">\r\n        <mat-label>{{'chieu_rong' | translate}}</mat-label>\r\n        <input matInput placeholder=\"{{'chieu_rong' | translate}}\" [ngModel]=\"objectChoosing.setups.upload_image.compress_width\"\r\n        (ngModelChange)=\"objectChoosing.setups.upload_image.compress_width = $event\" (blur)=\"updateSetups()\">\r\n      </mat-form-field>\r\n\r\n      <mat-form-field *ngIf=\"objectChoosing.setups.upload_image.source == 'device' &&  objectChoosing.setups.upload_image.compress_type == 'custom'\">\r\n        <mat-label>{{'chieu_cao' | translate}}</mat-label>\r\n        <input matInput placeholder=\"{{'chieu_cao' | translate}}\" [ngModel]=\"objectChoosing.setups.upload_image.compress_height\"\r\n        (ngModelChange)=\"objectChoosing.setups.upload_image.compress_height = $event\" (blur)=\"updateSetups()\">\r\n      </mat-form-field>\r\n\r\n      <!-- Hi\u1EC3n th\u1ECB t\u00EAn v\u00E0 \u0111u\u00F4i file h\u00ECnh \u1EA3nh -->\r\n      <div *ngIf=\"objectChoosing.setups.upload_image.source !== 'url' && staticdata.img[device + '_img'].includes(id_subproject)\"\r\n      class=\"my-1 img-info\">\r\n        <p class=\"img-info__text\">\r\n          {{ 'thu_muc_chua_tep_hinh_anh' | translate }}: \r\n        </p>\r\n        <p class=\"img-info__text highlight ml-2\">\r\n          {{ getFileInfo(staticdata.img[device + '_img']).folderPath }}\r\n        </p>\r\n        <p class=\"img-info__text mt-1\">\r\n          {{ 'ten_tep_hinh_anh' | translate }}: \r\n        </p>\r\n        <p class=\"img-info__text highlight ml-2\">\r\n          {{ getFileInfo(staticdata.img[device + '_img']).fullFileName }}\r\n        </p>\r\n      </div>\r\n\r\n      <!-- Upload input -->\r\n      <input type=\"file\" accept=\"image/*\" (change)=\"onUpload($event)\" id=\"upload\" style=\"display: none\" />\r\n      <!-- Tr\u01B0\u1EDDng h\u1EE3p: K\u00E9o th\u1EA3 \u1EA3nh ho\u1EB7c t\u1EA3i \u1EA3nh t\u1EEB m\u00E1y -->\r\n      <div *ngIf=\"objectChoosing.setups.upload_image.source == 'device'\" class=\"drop-zone\" [class.dragging]=\"dragging\"\r\n      (drop)=\"onFileDropped_upload($event)\" (dragover)=\"onDragOver_upload($event)\" (dragleave)=\"onDragLeave_upload()\">\r\n        <label *ngIf=\"!previewUploadUrl\" for=\"upload\">\r\n          <mat-icon>image</mat-icon>\r\n          <p>{{ 'keo_hinh_anh_vao_day_hoac' | translate }} <span>{{ 'tai_tep_len' | translate }}</span></p>\r\n        </label>\r\n\r\n        <div *ngIf=\"previewUploadUrl\" class=\"preview\">\r\n          <img [src]=\"previewUploadUrl\" alt=\"Preview\" />\r\n        </div>\r\n\r\n        <div *ngIf=\"previewUploadUrl\" class=\"gr-btn button-list\">\r\n          <button (click)=\"openUpload()\">\r\n            <mat-icon>vertical_align_top</mat-icon>\r\n          </button>\r\n          <button (click)=\"previewUploadUrl = ''\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Tr\u01B0\u1EDDng h\u1EE3p t\u1EA3i \u1EA3nh t\u1EEB th\u01B0 vi\u1EC7n -->\r\n      <button *ngIf=\"objectChoosing.setups.upload_image.source == 'library'\"\r\n        (click)=\"openLibrary()\" class=\"upload-background-image\">\r\n        <i class=\"bi bi-upload\"></i>{{'chon_tu_thu_vien' | translate}}\r\n      </button>\r\n      <!-- Tr\u01B0\u1EDDng h\u1EE3p ch\u1ECDn \u1EA3nh t\u1EEB 1 \u0111\u01B0\u1EDDng d\u1EABn b\u1EA5t k\u00EC -->\r\n      <div class=\"title\" *ngIf=\"objectChoosing.setups.upload_image.source == 'url' || objectChoosing.setups.upload_image.source == 'free_img'\">\r\n        <textarea\r\n          class=\"input custom-textarea w-100\"\r\n          name=\"background-image\"\r\n          id=\"background-image\"\r\n          placeholder=\"{{'nhap_duong_dan_anh' | translate}}\"\r\n          [(ngModel)]=\"staticdata.img[device + '_img']\"\r\n          (blur)=\"changeUrl()\"\r\n          [disabled]=\"objectChoosing.setups.upload_image.source == 'free_img'\"\r\n          >\r\n        </textarea>\r\n      </div>\r\n      <!-- Tr\u01B0\u1EDDng h\u1EE3p ch\u1ECDn \u1EA3nh mi\u1EC5n ph\u00ED -->\r\n      <div class=\"custom\" *ngIf=\"objectChoosing.setups.upload_image.source == 'free_img'\">\r\n        <label for=\"upload\" (click)=\"openImageFree()\" style=\"width: 100%\">\r\n          <button  class=\"upload-background-image\">\r\n            <i class=\"bi bi-plus-circle\"></i> {{'kho_anh_dung_chung' | translate }}\r\n          </button>\r\n        </label>\r\n      </div>\r\n\r\n      <!-- N\u00FAt sao ch\u00E9p link h\u00ECnh \u1EA3nh -->\r\n      <button *ngIf=\"staticdata.img[device + '_img'].includes(id_subproject)\"\r\n      (click)=\"copyLinkImg()\" nz-button nzType=\"default\" class=\"mt-2\"\r\n      style=\"white-space: normal; border-color: #00a859;\">\r\n        {{ 'nhan_de_sao_chep_duong_dan_anh' | translate }}\r\n      </button>\r\n\r\n      <!-- N\u1EBFu \u1EA3nh ch\u1EE9a id_subproject th\u00EC \u0111\u00E3 l\u00E0 \u1EA3nh tr\u00EAn server r\u1ED3i n\u00EAn s\u1EBD \u1EA9n -->\r\n      <button *ngIf=\"!staticdata.img[device + '_img'].includes(id_subproject)\" style=\"width: 100%;\" \r\n      nz-button nzType=\"primary\" (click)=\"isShowConfirmPopup = true\" class=\"mt-2\">\r\n        {{'chuyen_anh_len_server'  | translate}}\r\n      </button>\r\n\r\n      <app-link-page-config\r\n        [objectChoosing]=\"objectChoosing\" \r\n        [staticdata]=\"staticdata\"\r\n        [id_object]=\"objectChoosing._id\"\r\n        [dynamic_data]=\"objectChoosing.dynamic_data\"\r\n        [hasContact]=\"true\"\r\n        >\r\n      </app-link-page-config>\r\n    </div>\r\n  </ng-container>\r\n  <!-- Hi\u1EC3n th\u1ECB ti\u00EAu \u0111\u1EC1 m\u1EDF r\u1ED9ng -->\r\n  <div class=\"editor-header\" *ngIf=\"isViewAll\">\r\n    <i class=\"bi bi-chevron-left\" (click)=\"isViewAll = !isViewAll\"></i>\r\n    <span (click)=\"isViewAll = !isViewAll\">{{ currentViewAll.title | translate }}</span>\r\n  </div>\r\n  <!-- Dropdown menu -->\r\n  <div class=\"editor-content\" *ngIf=\"!isViewAll && configMode == 'advanced'\">\r\n    <ul nz-menu nzMode=\"inline\">\r\n      <div class=\"field-row\" style=\"margin: 0\">\r\n        <div class=\"field-row-sub field-row__switch\" style=\"padding: 0\" nz-tooltip\r\n        [nzTooltipTitle]=\"'*_giai_thich_anh_lcp' | translate\">\r\n          <span> {{'uu_tien_tai_truoc' | translate}} </span>\r\n          <nz-switch [(ngModel)]=\"config.is_top_page\" (ngModelChange)=\"updateConfig()\"></nz-switch>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Upload \u1EA3nh -->\r\n      <li nz-submenu nzTitle=\"{{'hien_thi'| translate}}\" [(nzOpen)]=\"openMap.menu1\"\r\n        (nzOpenChange)=\"openHandler('menu1')\">\r\n        <div class=\"upload-image\" *ngIf=\"!isViewAll\">\r\n\r\n          <!-- L\u1EF1a ch\u1ECDn hi\u1EC3n th\u1ECB cho c\u00E1c thi\u1EBFt b\u1ECB -->\r\n          <app-hide-show-config  [elementChoosing]=\"objectChoosing\" [device]=\"device\" >\r\n          </app-hide-show-config>\r\n        </div>\r\n      </li>\r\n\r\n\r\n      <li nz-submenu nzTitle=\"{{'hinh_anh'| translate}}\" [(nzOpen)]=\"openMap.menu2\"\r\n        (nzOpenChange)=\"openHandler('menu2')\">\r\n          <div class=\"mt-2\" >\r\n            <mat-form-field appearance=\"fill\">\r\n              <mat-label>{{'kieu_hien_thi_anh' | translate}}</mat-label>\r\n              <mat-select disableRipple [(ngModel)]=\"objectChoosing.setups.upload_image.display\"  (ngModelChange)=\"changeImgType()\">\r\n                <mat-option value=\"shared\">{{'anh_dung_chung_cho_tung_thiet_bi' | translate}}</mat-option>\r\n                <mat-option value=\"individual\">{{'anh_dung_rieng_cho_tung_thiet_bi' | translate}}</mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-form-field appearance=\"fill\">\r\n              <mat-label>{{'nguon_hinh_anh_hien_thi_len' | translate}}</mat-label>\r\n              <mat-select disableRipple [(ngModel)]=\"objectChoosing.setups.upload_image.source\" (ngModelChange)=\"updateSetups()\">\r\n                <mat-option value=\"device\">{{'tu_thiet_bi' | translate}}</mat-option>\r\n                <mat-option value=\"library\">{{'tu_thu_vien' | translate}}</mat-option>\r\n                <mat-option value=\"url\">{{'duong_dan_hinh_anh' | translate}}</mat-option>\r\n                <mat-option value=\"free_img\">{{'kho_anh_dung_chung' | translate}}</mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-form-field  *ngIf=\"objectChoosing.setups.upload_image.source == 'device'\" appearance=\"fill\" class=\"config-img\">\r\n              <mat-label>{{'nen_anh_tai_len' | translate}}</mat-label>\r\n              <mat-select disableRipple [(ngModel)]=\"objectChoosing.setups.upload_image.compress_type\" (ngModelChange)=\"updateSetups()\">\r\n                <mat-option [value]=\"'no-compress'\">{{'khong_nen_anh_sau_khi_tai_len' | translate}}</mat-option>\r\n                <mat-option [value]=\"'compress-screen'\">{{'nen_anh_theo_ti_le_man_hinh_hien_thi' | translate}}</mat-option>\r\n                <mat-option [value]=\"'compress-frame'\">{{'nen_anh_theo_ti_le_khung_hien_thi_anh' | translate}}</mat-option>\r\n                <mat-option [value]=\"'custom'\">{{'nen_anh_theo_kich_thuoc_tu_chon' | translate}}</mat-option>\r\n\r\n              </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-form-field *ngIf=\"objectChoosing.setups.upload_image.source == 'device' &&  objectChoosing.setups.upload_image.compress_type == 'custom'\" class=\"mr-4\">\r\n              <mat-label>{{'chieu_rong' | translate}}</mat-label>\r\n              <input matInput placeholder=\"{{'chieu_rong' | translate}}\" [ngModel]=\"objectChoosing.setups.upload_image.compress_width\"\r\n              (ngModelChange)=\"objectChoosing.setups.upload_image.compress_width = $event\" (blur)=\"updateSetups()\">\r\n            </mat-form-field>\r\n\r\n            <mat-form-field *ngIf=\"objectChoosing.setups.upload_image.source == 'device' &&  objectChoosing.setups.upload_image.compress_type == 'custom'\">\r\n              <mat-label>{{'chieu_cao' | translate}}</mat-label>\r\n              <input matInput placeholder=\"{{'chieu_cao' | translate}}\" [ngModel]=\"objectChoosing.setups.upload_image.compress_height\"\r\n              (ngModelChange)=\"objectChoosing.setups.upload_image.compress_height = $event\" (blur)=\"updateSetups()\">\r\n            </mat-form-field>\r\n\r\n            <!-- Upload input -->\r\n            <input type=\"file\" accept=\"image/*\" (change)=\"onUpload($event)\" id=\"upload\" style=\"display: none\" />\r\n            <!-- Tr\u01B0\u1EDDng h\u1EE3p: K\u00E9o th\u1EA3 \u1EA3nh ho\u1EB7c t\u1EA3i \u1EA3nh t\u1EEB m\u00E1y -->\r\n            <div *ngIf=\"objectChoosing.setups.upload_image.source == 'device'\" class=\"drop-zone\" [class.dragging]=\"dragging\"\r\n            (drop)=\"onFileDropped_upload($event)\" (dragover)=\"onDragOver_upload($event)\" (dragleave)=\"onDragLeave_upload()\">\r\n              <label *ngIf=\"!previewUploadUrl\" for=\"upload\">\r\n                <mat-icon>image</mat-icon>\r\n                <p>{{ 'keo_hinh_anh_vao_day_hoac' | translate }} <span>{{ 'tai_tep_len' | translate }}</span></p>\r\n              </label>\r\n\r\n              <div *ngIf=\"previewUploadUrl\" class=\"preview\">\r\n                <img [src]=\"previewUploadUrl\" alt=\"Preview\" />\r\n              </div>\r\n\r\n              <div *ngIf=\"previewUploadUrl\" class=\"gr-btn button-list\">\r\n                <button (click)=\"openUpload()\">\r\n                  <mat-icon>vertical_align_top</mat-icon>\r\n                </button>\r\n                <button (click)=\"previewUploadUrl = ''\">\r\n                  <mat-icon>close</mat-icon>\r\n                </button>\r\n              </div>\r\n            </div>\r\n            <!-- Tr\u01B0\u1EDDng h\u1EE3p t\u1EA3i \u1EA3nh t\u1EEB th\u01B0 vi\u1EC7n -->\r\n            <button *ngIf=\"objectChoosing.setups.upload_image.source == 'library'\"\r\n              (click)=\"openLibrary()\" class=\"upload-background-image\">\r\n              <i class=\"bi bi-upload\"></i>{{'chon_tu_thu_vien' | translate}}\r\n            </button>\r\n            <!-- Tr\u01B0\u1EDDng h\u1EE3p ch\u1ECDn \u1EA3nh t\u1EEB 1 \u0111\u01B0\u1EDDng d\u1EABn b\u1EA5t k\u00EC -->\r\n            <div class=\"title\" *ngIf=\"objectChoosing.setups.upload_image.source == 'url' || objectChoosing.setups.upload_image.source == 'free_img'\">\r\n              <textarea\r\n                class=\"input custom-textarea w-100\"\r\n                name=\"background-image\"\r\n                id=\"background-image\"\r\n                placeholder=\"{{'nhap_duong_dan_anh' | translate}}\"\r\n                [(ngModel)]=\"staticdata.img[device + '_img']\"\r\n                (blur)=\"changeUrl()\"\r\n                [disabled]=\"objectChoosing.setups.upload_image.source == 'free_img'\"\r\n                >\r\n              </textarea>\r\n            </div>\r\n            <!-- Tr\u01B0\u1EDDng h\u1EE3p ch\u1ECDn \u1EA3nh mi\u1EC5n ph\u00ED -->\r\n            <div class=\"custom\" *ngIf=\"objectChoosing.setups.upload_image.source == 'free_img'\">\r\n              <label for=\"upload\" (click)=\"openImageFree()\" style=\"width: 100%\">\r\n                <button  class=\"upload-background-image\">\r\n                  <i class=\"bi bi-plus-circle\"></i> {{'kho_anh_dung_chung' | translate }}\r\n                </button>\r\n              </label>\r\n            </div>\r\n\r\n            <!-- N\u1EBFu \u1EA3nh ch\u1EE9a id_subproject th\u00EC \u0111\u00E3 l\u00E0 \u1EA3nh tr\u00EAn server r\u1ED3i n\u00EAn s\u1EBD \u1EA9n -->\r\n            <button *ngIf=\"!staticdata.img[device + '_img'].includes(id_subproject)\" style=\"width: 100%; margin-top: 5px;\" nz-button nzType=\"primary\" (click)=\"isShowConfirmPopup = true\">\r\n              {{'chuyen_anh_len_server'  | translate}}\r\n            </button>\r\n          </div>\r\n      </li>\r\n\r\n      <!-- C\u1EA5u h\u00ECnh filter -->\r\n      <li nz-submenu nzTitle=\"{{'anh_sang_va_tuong_phan'| translate}}\" [(nzOpen)]=\"openMap.menu3\"\r\n        (nzOpenChange)=\"openHandler('menu3')\">\r\n        <app-brightness-contrast-config [elementChoosing]=\"objectChoosing\"  [device]=\"device\" [class]=\"class\" [config]=\"config\"\r\n          [filterConfig]=\"config['filter']\" [opacityClass]=\"class['image__boundary--img']\" [staticdata]=\"staticdata\"\r\n          [id_object]=\"objectChoosing._id\">\r\n        </app-brightness-contrast-config>\r\n      </li>\r\n      <!-- C\u1EA5u h\u00ECnh l\u1EADt \u1EA3nh -->\r\n      <li nz-submenu nzTitle=\"{{'lat_hinh'| translate}}\" [(nzOpen)]=\"openMap.menu4\" (nzOpenChange)=\"openHandler('menu4')\">\r\n        <div class=\"editor-field-body\">\r\n          <div class=\"mb-3\">\r\n            <div class=\"field-row-sub\">\r\n              <div style=\"display: flex; gap: 4px; width: 100%\">\r\n                <span nz-button nzType=\"primary\" nzSize=\"default\" (click)=\"handleSetTransform('y')\"\r\n                  class=\"btn_transform\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\">\r\n                    <path fill=\"currentColor\"\r\n                      d=\"M15.97 15.25h-2.72c-5.3 0-9.5-2.15-9.5-4.5s4.2-4.5 9.5-4.5c3.03 0 5.82.7 7.62 1.86a.75.75 0 1 0 .81-1.26c-2.06-1.33-5.13-2.1-8.43-2.1-6.02 0-11 2.55-11 6s4.98 6 11 6h2.8l-2.3 2.3a.75.75 0 1 0 1.07 1.05l2.83-2.82c.68-.69.68-1.8 0-2.48l-2.83-2.83a.75.75 0 0 0-1.06 1.06l2.21 2.22z\">\r\n                    </path>\r\n                  </svg>\r\n                  <p class=\"m-0\">{{ 'ngang' | translate }}</p>\r\n                </span>\r\n                <button nz-button nzType=\"primary\" nzSize=\"default\" (click)=\"handleSetTransform('x')\"\r\n                  class=\"btn_transform\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\">\r\n                    <path fill=\"currentColor\"\r\n                      d=\"M15.25 8.35v2.4c0 5.3-2.15 9.5-4.5 9.5s-4.5-4.2-4.5-9.5c0-3.03.7-5.82 1.86-7.62a.75.75 0 1 0-1.26-.81c-1.33 2.06-2.1 5.13-2.1 8.43 0 6.02 2.55 11 6 11s6-4.98 6-11V8.27l2.3 2.3A.75.75 0 1 0 20.1 9.5l-2.82-2.83a1.75 1.75 0 0 0-2.48 0L11.97 9.5a.75.75 0 1 0 1.06 1.06l2.22-2.22z\">\r\n                    </path>\r\n                  </svg>\r\n                  <p class=\"m-0\">{{ 'doc' | translate }}</p>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"field-row mb-3\">\r\n            <div class=\"field-row-sub\">\r\n              <div style=\"display: flex; gap: 4px; width: 100%\">\r\n                <button nz-button nzType=\"primary\" nzSize=\"default\" class=\"btn_transform\"\r\n                  (click)=\"handleSetTransform('-z')\">\r\n                  <span nz-icon nzType=\"rotate-left\" nzTheme=\"outline\"></span>\r\n                  <p class=\"m-0\">{{ 'trai' | translate }}</p>\r\n                </button>\r\n                <button nz-button nzType=\"primary\" nzSize=\"default\" class=\"btn_transform\"\r\n                  (click)=\"handleSetTransform('z')\">\r\n                  <span nz-icon nzType=\"rotate-right\" nzTheme=\"outline\"></span>\r\n                  <p class=\"m-0\">{{ 'phai' | translate }}</p>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"view\">\r\n          <p class=\"discover_text\" (click)=\"openViewAll(style_fields[6])\"\r\n            style=\"cursor: pointer; text-align: left; margin: 0\">\r\n            {{ 'mo_rong' | translate }} &#8594;\r\n          </p>\r\n        </div>\r\n      </li>\r\n      <!-- C\u1EA5u h\u00ECnh object-fit -->\r\n      <li nz-submenu nzTitle=\"{{'do_bao_phu'| translate}}\" [(nzOpen)]=\"openMap.menu5\" (nzOpenChange)=\"openHandler('menu5')\">\r\n        <app-object-fit-config  [device]=\"device\" [class]=\"class\" [objectFitClass]=\"class['image__boundary--img']\"\r\n          [style_field]=\"style_fields[2]\" (isViewAll)=\"openViewAll($event)\" [objectChoosing]=\"objectChoosing\">\r\n        </app-object-fit-config>\r\n      </li>\r\n      <!-- C\u1EA5u h\u00ECnh h\u00ECnh d\u1EA1ng vi\u1EC1n -->\r\n      <li nz-submenu nzTitle=\"{{'kieu_vien'| translate}}\" [(nzOpen)]=\"openMap.menu6\" (nzOpenChange)=\"openHandler('menu6')\">\r\n        <app-borders-config  [elementChoosing]=\"objectChoosing\"  [device]=\"device\" [class]=\"class\" [borderClass]=\"class['image__boundary--img']\"\r\n          [id_object]=\"objectChoosing._id\">\r\n        </app-borders-config>\r\n        <!-- N\u00FAt m\u1EDF r\u1ED9ng -->\r\n\r\n        <div class=\"item-border my-3 cursor-pointer\" style=\"float: right\">\r\n          <p class=\"m-0 title-border\" (click)=\"openViewAll(style_fields[3])\">\r\n            {{ 'mo_rong' | translate }} &#8594;\r\n          </p>\r\n        </div>\r\n      </li>\r\n      <!-- T\u1EA1o b\u00F3ng -->\r\n      <li nz-submenu nzTitle=\"{{'do_bong'| translate}}\" [(nzOpen)]=\"openMap.menu7\" (nzOpenChange)=\"openHandler('menu7')\">\r\n        <!-- C\u1EA5u h\u00ECnh b\u00F3ng -->\r\n        <div class=\"editor-field-body\">\r\n          <div class=\"field-row\">\r\n            <div class=\"field-row-sub field-row__switch\">\r\n              <span> {{'ap_dung' | translate}} </span>\r\n              <nz-switch [(ngModel)]=\"config.check_shadow\" (ngModelChange)=\"handleSetShadow()\"></nz-switch>\r\n            </div>\r\n          </div>\r\n          <div class=\"field-row\">\r\n            <div class=\"item\">\r\n              <p class=\"m-0\">{{'ngang' | translate}}</p>\r\n              <nz-input-number [(ngModel)]=\"config['box-shadow'].box_shadow_x\" [nzMin]=\"0\" [nzStep]=\"1\"\r\n                [nzDisabled]=\"!config.check_shadow\" (ngModelChange)=\"handleSetShadow()\"></nz-input-number>\r\n            </div>\r\n            <nz-slider [(ngModel)]=\"config['box-shadow'].box_shadow_x\" (nzOnAfterChange)=\"handleSetShadow()\"\r\n              [nzMin]=\"-100\" [nzStep]=\"0.1\"></nz-slider>\r\n          </div>\r\n          <div class=\"field-row\">\r\n            <div class=\"item\">\r\n              <p class=\"m-0\">{{'doc' | translate}}</p>\r\n              <nz-input-number [nzStep]=\"1\" [(ngModel)]=\"config['box-shadow'].box_shadow_y\"\r\n                [nzDisabled]=\"!config.check_shadow\" (ngModelChange)=\"handleSetShadow()\"></nz-input-number>\r\n            </div>\r\n            <nz-slider [(ngModel)]=\"config['box-shadow'].box_shadow_y\" (nzOnAfterChange)=\"handleSetShadow()\"\r\n              [nzMin]=\"-100\" [nzStep]=\"0.1\"></nz-slider>\r\n          </div>\r\n          <div class=\"field-row\">\r\n            <div class=\"item\">\r\n              <p class=\"m-0 title\">{{'kich_thuoc_bong' | translate}}</p>\r\n              <nz-input-number [nzStep]=\"1\" [(ngModel)]=\"config['box-shadow'].box_shadow_width\"\r\n                [nzDisabled]=\"!config.check_shadow\" (ngModelChange)=\"handleSetShadow()\"></nz-input-number>\r\n            </div>\r\n            <nz-slider [(ngModel)]=\"config['box-shadow'].box_shadow_width\" (nzOnAfterChange)=\"handleSetShadow()\"\r\n              [nzMin]=\"-100\" [nzStep]=\"0.1\"></nz-slider>\r\n          </div>\r\n          <div class=\"field-row\">\r\n            <div class=\"item\">\r\n              <p class=\"m-0 title\">{{'do_nhoe' | translate}}</p>\r\n              <nz-input-number [nzStep]=\"1\" [(ngModel)]=\"config['box-shadow'].box_shadow_blur\"\r\n                [nzDisabled]=\"!config.check_shadow\" (ngModelChange)=\"handleSetShadow()\"></nz-input-number>\r\n            </div>\r\n            <nz-slider [(ngModel)]=\"config['box-shadow'].box_shadow_blur\" (nzOnAfterChange)=\"handleSetShadow()\"\r\n              [nzMin]=\"0\" [nzMax]=\"100\" [nzStep]=\"1\"></nz-slider>\r\n          </div>\r\n          <div class=\"field-row\">\r\n            <div class=\"item w-100\">\r\n              <p class=\"m-0 w-50\">{{'mau_sac' | translate}}</p>\r\n              <input class=\"input-color w-50\" type=\"button\" [cpOKButton]=\"true\" [(colorPicker)]=\"config['box-shadow'].box_shadow_color\"\r\n                [style.background]=\"config['box-shadow'].box_shadow_color\" (colorPickerClose)=\"handleSetShadow()\"\r\n                [cpWidth]=\"'230px'\" [disabled]=\"!config.check_shadow\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </li>\r\n\r\n      <!-- Xem to\u00E0n m\u00E0n h\u00ECnh -->\r\n      <li *ngIf=\"(!staticdata?.type_link || staticdata.type_link == 'none')\" nz-submenu nzTitle=\"{{'xem_toan_man_hinh'| translate}}\"\r\n      [(nzOpen)]=\"openMap.menu10\" (nzOpenChange)=\"openHandler('menu10')\">\r\n        <!-- B\u1EADt t\u1EAFt ch\u1EE9c n\u0103ng c\u1EA5u h\u00ECnh to\u00E0n m\u00E0n h\u00ECnh -->\r\n        <div class=\"field-row\" nz-tooltip [nzTooltipTitle]=\"'khi_click_hinh_anh_se_phong_to_ra_toan_man_hinh' | translate\">\r\n          <span class=\"mx-2 w-50\">{{'toan_man_hinh' | translate}}</span>\r\n          <nz-switch [ngModel]=\"config['image-fullscreen']?.['toggle_fullscreen']\"\r\n          (ngModelChange)=\"config['image-fullscreen']['toggle_fullscreen'] = $event;updateConfig()\"\r\n          class=\"mx-2\">\r\n          </nz-switch>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"config['image-fullscreen']?.['toggle_fullscreen']\">\r\n          <!-- B\u1EADt t\u1EAFt m\u1EDF preview to\u00E0n m\u00E0n h\u00ECnh \u1EDF design \u0111\u1EC3 c\u1EA5u h\u00ECnh -->\r\n          <div class=\"item-border my-3 cursor-pointer\" style=\"float: right\">\r\n            <p class=\"m-0 title-border\" (click)=\"handleOpenFullscreenPreview()\">\r\n              {{ 'xem_truoc' | translate }} &#8594;\r\n            </p>\r\n          </div>\r\n        </ng-container>\r\n      </li>\r\n\r\n      <!-- Hi\u1EC7u \u1EE9ng -->\r\n      <li nz-submenu nzTitle=\"{{'hieu_ung'| translate}}\" [(nzOpen)]=\"openMap.menu8\" (nzOpenChange)=\"openHandler('menu8')\">\r\n        <app-choose-animations-config  [elementChoosing]=\"objectChoosing\" (openAnimationDetail)=\"openAnimationDetail($event)\"\r\n          [id_object]=\"objectChoosing._id\" [device]=\"device\" [class]=\"class\" [config]=\"config\" [staticdata]=\"staticdata\"\r\n          [cursorClass]=\"class['image']\" [effect_hover]=\"effect_hover\" [customize]=\"customize\" \r\n          [effectFileUsing]=\"'image'\">\r\n        </app-choose-animations-config>\r\n      </li>\r\n      <!-- Th\u00EAm li\u00EAn k\u1EBFt -->\r\n      <li  nz-submenu nzTitle=\"{{'lien_ket'| translate}}\" [(nzOpen)]=\"openMap.menu9\"\r\n        (nzOpenChange)=\"openHandler('menu9')\">\r\n        <app-link-page-config\r\n          [objectChoosing]=\"objectChoosing\" \r\n          [staticdata]=\"staticdata\"\r\n          [id_object]=\"objectChoosing._id\"\r\n          [dynamic_data]=\"objectChoosing.dynamic_data\"\r\n          [hasContact]=\"true\"\r\n          [blocks_of_page]=\"blocks_of_page\"\r\n        >\r\n        </app-link-page-config>\r\n      </li>\r\n      <!-- V\u0102N B\u1EA2N G\u1EE2I \u00DD -->\r\n      <li nz-submenu nzTitle=\"{{'van_ban_goi_y' | translate}}\" [(nzOpen)]=\"openMap.menu12\" (nzOpenChange)=\"openHandler('menu12')\">\r\n        <div class=\"editor-field my-0\">\r\n          <div class=\"editor-field-body\">\r\n            <div class=\"field-row my-0\">\r\n              <!-- N\u1ED9i dung ch\u1EEF -->\r\n              <div class=\"config-font\" style=\"width:100%\">\r\n                <mat-form-field style=\"width:100%\">\r\n                  <mat-label>{{'noi_dung' | translate}}</mat-label>\r\n                  <textarea style=\"height:80px;background: #edf6fd;\r\n                    padding:10px 6px;font-size:13px;border-top-left-radius:5px;\r\n                    border-top-right-radius:5px\" matInput [(ngModel)]=\"config['tooltip']\"\r\n                    (blur)=\"updateConfig()\"></textarea>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </li>\r\n      <!-- M\u00D4 T\u1EA2 N\u1ED8I DUNG C\u1EE6A \u1EA2NH -->\r\n      <li nz-submenu nzTitle=\"{{'mo_ta_noi_dung_cua_anh' | translate}}\" [(nzOpen)]=\"openMap.menu14\" (nzOpenChange)=\"openHandler('menu14')\">\r\n        <div class=\"editor-field my-0\">\r\n          <div class=\"editor-field-body\">\r\n            <div class=\"field-row my-0\">\r\n              <!-- N\u1ED9i dung ch\u1EEF -->\r\n              <div class=\"config-font\" style=\"width:100%\">\r\n                <mat-form-field style=\"width: 100%\" class=\"aria-label-input\" [matTooltip]=\"'*_giai_thich_aria_label' | translate\">\r\n                  <mat-label>{{'mo_ta_noi_dung_cua_anh' | translate}}</mat-label>\r\n                  <textarea matInput\r\n                    [ngModel]=\"staticdata.accessibility?.['img_alt_' + functionService.selectedLanguageCode]\"\r\n                    (ngModelChange)=\"staticdata.accessibility['img_alt_' + functionService.selectedLanguageCode] = $event\"\r\n                    (blur)=\"updateStaticData();\"></textarea>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </li>\r\n    </ul>\r\n\r\n    <!-- <div *ngIf=\"loading\" style=\"position: absolute; left:0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); display: flex; justify-content: center; align-items: center\">\r\n\r\n    </div> -->\r\n  </div>\r\n  <!-- M\u1EDF r\u1ED9ng -->\r\n  <div class=\"view-more\" *ngIf=\"isViewAll\">\r\n    <!-- C\u1EA5u h\u00ECnh chi ti\u1EBFt vi\u1EC1n -->\r\n    <div class=\"view_more-border\" *ngIf=\"currentViewAll.index == 4\">\r\n      <app-borders-radius-config [elementChoosing]=\"objectChoosing\" [device]=\"device\" [class]=\"class\" [borderRadiusClass]=\"class['image__boundary--img']\"\r\n        [id_object]=\"objectChoosing._id\">\r\n      </app-borders-radius-config>\r\n    </div>\r\n\r\n    <!-- C\u1EA5u h\u00ECnh chi ti\u1EBFt hi\u1EC7u \u1EE9ng -->\r\n    <div class=\"editor_effect-hover\" *ngIf=\"currentViewAll.index == 6\">\r\n      <app-animations-config [elementChoosing]=\"objectChoosing\"  [device]=\"device\" [staticdata]=\"staticdata\" [id_object]=\"objectChoosing._id\"\r\n        [customize]=\"customize\"></app-animations-config>\r\n    </div>\r\n    <!-- M\u1EDF r\u1ED9ng h\u00ECnh d\u1EA1ng \u1EA3nh-->\r\n    <div class=\"editor-field-body p-0 mt-2\" *ngIf=\"currentViewAll.index == 7\">\r\n      <div class=\"editor-field-body\">\r\n        <div class=\"field-row\">\r\n          <!-- <div class=\"d-flex justify-content-between mt-2 align-items-start\">\r\n            <p class=\"font-weight-bold\">Hi\u1EC3n th\u1ECB tr\u1EE5c \u0111\u1ED1i t\u01B0\u1EE3ng</p>\r\n            <nz-switch [(ngModel)]=\"config.image.show_axis\" (ngModelChange)=\"updateConfig()\"></nz-switch>\r\n          </div> -->\r\n          <p style=\"font-weight: 500; font-size: 16px\">{{'lat_hinh'| translate}}</p>\r\n          <div class=\"field-row-sub\">\r\n            <div style=\"display: flex; gap: 4px; width: 100%\">\r\n              <span nz-button nzType=\"primary\" nzSize=\"default\" (click)=\"handleSetTransform('y')\" class=\"btn_transform\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\">\r\n                  <path fill=\"currentColor\"\r\n                    d=\"M15.97 15.25h-2.72c-5.3 0-9.5-2.15-9.5-4.5s4.2-4.5 9.5-4.5c3.03 0 5.82.7 7.62 1.86a.75.75 0 1 0 .81-1.26c-2.06-1.33-5.13-2.1-8.43-2.1-6.02 0-11 2.55-11 6s4.98 6 11 6h2.8l-2.3 2.3a.75.75 0 1 0 1.07 1.05l2.83-2.82c.68-.69.68-1.8 0-2.48l-2.83-2.83a.75.75 0 0 0-1.06 1.06l2.21 2.22z\">\r\n                  </path>\r\n                </svg>\r\n                <p class=\"m-0\">{{'ngang'| translate}}</p>\r\n              </span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"default\" (click)=\"handleSetTransform('x')\"\r\n                class=\"btn_transform\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\">\r\n                  <path fill=\"currentColor\"\r\n                    d=\"M15.25 8.35v2.4c0 5.3-2.15 9.5-4.5 9.5s-4.5-4.2-4.5-9.5c0-3.03.7-5.82 1.86-7.62a.75.75 0 1 0-1.26-.81c-1.33 2.06-2.1 5.13-2.1 8.43 0 6.02 2.55 11 6 11s6-4.98 6-11V8.27l2.3 2.3A.75.75 0 1 0 20.1 9.5l-2.82-2.83a1.75 1.75 0 0 0-2.48 0L11.97 9.5a.75.75 0 1 0 1.06 1.06l2.22-2.22z\">\r\n                  </path>\r\n                </svg>\r\n                <p class=\"m-0\">{{'doc'| translate}}</p>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"field-row\">\r\n          <div class=\"item mt-2\" style=\"min-height: 32px\">\r\n            <p class=\"m-0\">{{'ngang'| translate}}</p>\r\n            <nz-input-number\r\n              [nzMin]=\"-360\"\r\n              [nzMax]=\"360\"\r\n              [(ngModel)]=\"config['transform'].transform_rotateY\"\r\n              (ngModelChange)=\"SetTransform()\"\r\n              (nzBlur)=\"updateClassAndConfig()\"\r\n            >\r\n            </nz-input-number>\r\n          </div>\r\n          <nz-slider\r\n            [nzMin]=\"-360\"\r\n            [nzMax]=\"360\"\r\n            [(ngModel)]=\"config['transform'].transform_rotateY\"\r\n            (nzOnAfterChange)=\"updateClassAndConfig()\"\r\n            (ngModelChange)=\"SetTransform()\"\r\n          >\r\n          </nz-slider>\r\n        </div>\r\n        <div class=\"field-row\">\r\n          <div class=\"item\" style=\"min-height: 32px\">\r\n            <p class=\"m-0\">{{'doc'| translate}}</p>\r\n            <nz-input-number\r\n              [nzMin]=\"-360\"\r\n              [nzMax]=\"360\"\r\n              [(ngModel)]=\"config['transform'].transform_rotateX\"\r\n              (ngModelChange)=\"SetTransform()\"\r\n              (nzBlur)=\"updateClassAndConfig()\"\r\n            >\r\n            </nz-input-number>\r\n          </div>\r\n          <nz-slider\r\n            [nzMin]=\"-360\"\r\n            [nzMax]=\"360\"\r\n            [(ngModel)]=\"config['transform'].transform_rotateX\"\r\n            (nzOnAfterChange)=\"updateClassAndConfig()\"\r\n            (ngModelChange)=\"SetTransform()\"\r\n          >\r\n          </nz-slider>\r\n        </div>\r\n      </div>\r\n      <br />\r\n      <!-- Xoay h\u00ECnh \u1EA3nh -->\r\n      <div class=\"editor-field-body\">\r\n        <div class=\"field-row mb-3\">\r\n          <div style=\"justify-content: space-between; align-items: center\">\r\n            <p class=\"mt-1\" style=\"font-weight: 500; font-size: 16px\">\r\n              {{'xoay_hinh'| translate}}\r\n            </p>\r\n            <div style=\"display: flex; justify-content: space-between; gap: 4px\">\r\n              <button class=\"btn_transform\" nz-button nzType=\"primary\" nzSize=\"default\"\r\n                (click)=\"handleSetTransform('-z')\">\r\n                <span nz-icon nzType=\"rotate-left\" nzTheme=\"outline\"></span>\r\n                <p class=\"m-0\">{{'trai'| translate}}</p>\r\n              </button>\r\n              <button nz-button nzType=\"primary\" nzSize=\"default\" class=\"btn_transform\"\r\n                (click)=\"handleSetTransform('z')\">\r\n                <span nz-icon nzType=\"rotate-right\" nzTheme=\"outline\"></span>\r\n                <p class=\"m-0\">{{'phai'| translate}}</p>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"field-row\">\r\n          <div class=\"item\" styl=\"min-height: 32px\">\r\n            <p class=\"m-0\">{{'xoay'| translate}}</p>\r\n            <nz-input-number\r\n              [nzMin]=\"-360\"\r\n              [nzMax]=\"360\"\r\n              [(ngModel)]=\"config['transform'].transform_rotateZ\"\r\n              (ngModelChange)=\"SetTransform()\"\r\n              (nzBlur)=\"updateClassAndConfig()\"\r\n              >\r\n            </nz-input-number>\r\n          </div>\r\n          <nz-slider\r\n            [nzMin]=\"-360\"\r\n            [nzMax]=\"360\"\r\n            [(ngModel)]=\"config['transform'].transform_rotateZ\"\r\n            (nzOnAfterChange)=\"updateClassAndConfig()\"\r\n            (ngModelChange)=\"SetTransform()\">\r\n          </nz-slider>\r\n        </div>\r\n      </div>\r\n      <br />\r\n      <!-- C\u1EA5u h\u00ECnh \u0110\u1ED9 nghi\u00EAng -->\r\n      <div class=\"editor-field-body\">\r\n        <div class=\"field-row mb-3\">\r\n          <div class=\"item\">\r\n            <p class=\"m-0\" style=\"font-weight: 500; font-size: 16px\">\r\n              {{'do_nghieng'| translate}}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div class=\"field-row\">\r\n          <div class=\"item\" style=\"min-height: 32px\">\r\n            <p class=\"m-0\">{{'ngang'| translate}}</p>\r\n            <nz-input-number\r\n              [nzMin]=\"-360\"\r\n              [nzMax]=\"360\"\r\n              [(ngModel)]=\"config['transform'].transform_skewY\"\r\n              (ngModelChange)=\"SetTransform()\"\r\n              (nzBlur)=\"updateClassAndConfig()\"\r\n              >\r\n            </nz-input-number>\r\n          </div>\r\n          <nz-slider\r\n            [nzMin]=\"-360\"\r\n            [nzMax]=\"360\"\r\n            [(ngModel)]=\"config['transform'].transform_skewY\"\r\n            (nzOnAfterChange)=\"updateClassAndConfig()\"\r\n            (ngModelChange)=\"SetTransform()\"\r\n            >\r\n          </nz-slider>\r\n        </div>\r\n        <div class=\"field-row\">\r\n          <div class=\"item\" style=\"min-height: 32px\">\r\n            <p class=\"m-0\">{{'doc'| translate}}</p>\r\n            <nz-input-number\r\n              [nzMin]=\"-360\"\r\n              [nzMax]=\"360\"\r\n              [(ngModel)]=\"config['transform'].transform_skewX\"\r\n              (ngModelChange)=\"SetTransform()\"\r\n              (nzBlur)=\"updateClassAndConfig()\"\r\n            >\r\n            </nz-input-number>\r\n          </div>\r\n          <nz-slider\r\n            [nzMin]=\"-360\"\r\n            [nzMax]=\"360\"\r\n            [(ngModel)]=\"config['transform'].transform_skewX\"\r\n            (nzOnAfterChange)=\"updateClassAndConfig()\"\r\n            (ngModelChange)=\"SetTransform()\"\r\n          >\r\n          </nz-slider>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- M\u1EDF r\u1ED9ng c\u1EA5u h\u00ECnh \u0111\u1ED9 bao ph\u1EE7 -->\r\n    <div class=\"editor-field-body p-1\" *ngIf=\"currentViewAll.index == 3\">\r\n      <div class=\"field-row\">\r\n        <div class=\"field-row-sub\">\r\n          <p class=\"m-0\" style=\"font-weight: 500; font-size: 16px\">\r\n            {{'vi_tri_hinh_anh'| translate}}\r\n          </p>\r\n        </div>\r\n      </div>\r\n      <div class=\"field-row\">\r\n        <div class=\"d-flex justify-content-between py-1\">\r\n          <p class=\"m-0\">{{'ngang'| translate}}</p>\r\n          <nz-input-number [(ngModel)]=\"config.image.object_x\" [nzMin]=\"0\" [nzStep]=\"1\"\r\n            (ngModelChange)=\"handleSetPositionImage()\"></nz-input-number>\r\n        </div>\r\n      </div>\r\n      <div class=\"field-row\">\r\n        <div class=\"d-flex justify-content-between py-1\">\r\n          <p class=\"m-0\">{{'doc'| translate}}</p>\r\n          <nz-input-number [(ngModel)]=\"config.image.object_y\" [nzMin]=\"0\" [nzStep]=\"1\"\r\n            (ngModelChange)=\"handleSetPositionImage()\"></nz-input-number>\r\n        </div>\r\n      </div>\r\n      <div class=\"field-row mt-2\">\r\n        <div class=\"field-row-sub\">\r\n          <p class=\"m-0\" style=\"font-weight: 500; font-size: 16px\">\r\n            {{'phong_thu_hinh_anh'| translate}}\r\n          </p>\r\n        </div>\r\n      </div>\r\n      <div class=\"field-row\">\r\n        <div class=\"d-flex justify-content-between py-1\">\r\n          <p class=\"m-0\">{{'do_co_gian'| translate}}</p>\r\n        </div>\r\n        <nz-slider [(ngModel)]=\"class['image__boundary--img'].transfrom_scale\" (nzOnAfterChange)=\"scale()\"\r\n          (ngModelChange)=\"(class['image__boundary--img'].transfrom_scale)\" [nzMin]=\"0.1\" [nzMax]=\"2\"\r\n          [nzStep]=\"0.1\"></nz-slider>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <nz-modal nzTitle=\"{{ 'chuyen_anh_len_server' | translate}}\" [(nzVisible)]=\"isShowConfirmPopup\" [nzContent]=\"modalContent\"\r\n    (nzOnCancel)=\"handleCancelConfirm()\" (nzOnOk)=\"handleOkConfirm()\" [nzFooter]=\"modalFooter\">\r\n    <ng-template #modalContent>\r\n      <p>{{'nen_anh_tai_len' | translate}}</p>\r\n      <nz-select style=\"margin-bottom: 15px\" [(ngModel)]=\"objectChoosing.setups.upload_image.compress_type\"  (ngModelChange)=\"updateSetups()\"\r\n        nzPlaceHolder=\"{{'nen_anh_tai_len' | translate}}\" nzAllowClear>\r\n        <nz-option [nzValue]=\"'no-compress'\" nzLabel=\"{{'khong_nen_anh_sau_khi_tai_len' | translate}}\"></nz-option>\r\n        <nz-option [nzValue]=\"'compress-screen'\" nzLabel=\"{{'nen_anh_theo_ti_le_man_hinh_hien_thi' | translate}}\"></nz-option>\r\n        <nz-option [nzValue]=\"'compress-frame'\" nzLabel=\"{{'nen_anh_theo_ti_le_khung_hien_thi_anh' | translate}}\"></nz-option>\r\n        <nz-option [nzValue]=\"'custom'\" nzLabel=\"{{'nen_anh_theo_kich_thuoc_tu_chon' | translate}}\"></nz-option>\r\n      </nz-select>\r\n\r\n      <mat-form-field *ngIf=\"objectChoosing.setups.upload_image.compress_type == 'custom'\" class=\"mr-4\">\r\n        <mat-label>{{'chieu_rong' | translate}}</mat-label>\r\n        <input matInput placeholder=\"{{'chieu_rong' | translate}}\" [ngModel]=\"objectChoosing.setups.upload_image.compress_width\"\r\n        (ngModelChange)=\"objectChoosing.setups.upload_image.compress_width = $event\" (blur)=\"updateSetups()\">\r\n      </mat-form-field>\r\n\r\n      <mat-form-field *ngIf=\"objectChoosing.setups.upload_image.compress_type == 'custom'\">\r\n        <mat-label>{{'chieu_cao' | translate}}</mat-label>\r\n        <input matInput placeholder=\"{{'chieu_cao' | translate}}\" [ngModel]=\"objectChoosing.setups.upload_image.compress_height\"\r\n        (ngModelChange)=\"objectChoosing.setups.upload_image.compress_height = $event\" (blur)=\"updateSetups()\">\r\n      </mat-form-field>\r\n    </ng-template>\r\n    <ng-template #modalFooter>\r\n      <button nz-button nzType=\"default\" (click)=\"handleCancelConfirm()\">{{'khong' | translate}}</button>\r\n      <button nz-button nzType=\"primary\" (click)=\"handleOkConfirm()\" [nzLoading]=\"isConfirmLoading\">{{'dong_y' | translate}}</button>\r\n    </ng-template>\r\n  </nz-modal>\r\n</div>\r\n", styles: [".image-editor::ng-deep .ant-menu-submenu-title{padding:0!important}.image-editor::ng-deep .ant-menu.ant-menu-root.ant-menu-light.ant-menu-inline{padding:0!important}.image-editor::ng-deep .mat-form-field{width:100%}.image-editor::ng-deep .mat-form-field-underline{bottom:0;position:relative;margin-bottom:.5rem}.image-editor::ng-deep .mat-form-field-wrapper{padding-bottom:0}*{font-size:14px}.ant-radio-input{z-index:0}.title{line-height:1.5}.custom-device{display:flex;justify-content:space-between;align-items:center;padding:7px 0}.custom-textarea{min-height:150px!important}.upload-background-image{width:100%;text-align:center;padding:12px;background-color:var(--ion-color-primary);color:#fff;border-radius:12px}.btn_transform{display:flex;grid-gap:4px;gap:4px;align-items:center;min-width:48%;justify-content:center;background-color:#018848;color:#f5f5f5}.custom{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;padding:5px 0}.input-number{padding:5px!important;border:1px solid #ddd!important;outline:none!important;width:40%!important;border-radius:3px!important}nz-input-number{width:40%;max-height:30px}.view{padding:5px;display:flex;align-items:center;justify-content:flex-end;grid-gap:7px;gap:7px}.item{display:flex;align-items:center;justify-content:space-between}.main{padding:5px;margin-top:10px;line-height:1}.main .item{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.main .hidden-text{margin:0;font-size:14px}.main .title-font{font-size:14px}.main nz-select{width:100px!important}.main label{display:flex;align-items:center;margin-bottom:10px;margin-right:0}.main label span.ant-radio+*{padding-right:0!important}::ng-deep span.ant-radio+*{width:100%}.w-mat-input{width:120px;overflow:hidden}.upload-background-image{display:flex;justify-content:center;align-items:center;padding:16px 18px;grid-gap:5px;gap:5px;background-color:var(--ion-color-primary);color:#fff;margin-right:-8px;border-radius:12px}.disable{opacity:.5}.field-row__switch{display:flex;width:100%;justify-content:space-around;padding:10px 0}.image-editor{background-color:#fff;height:100%;overflow:auto;overflow-x:hidden}.image-editor::-webkit-scrollbar{width:0px}.image-editor::-webkit-scrollbar-track{background:white}.image-editor::-webkit-scrollbar-thumb{background:#888}.image-editor::-webkit-scrollbar-thumb:hover{background:#555;opacity:.5}.image-editor .editor-header{height:40px;border-bottom:1px solid #ddd;display:flex;align-items:center;padding:0 5px;text-transform:uppercase;grid-gap:7px;gap:7px}.image-editor .editor-header span{font-size:13px}.image-editor .editor-header i{font-size:16px}.image-editor .editor-header span,.image-editor .editor-header i{cursor:pointer}.image-editor .upload-image{margin-top:5px}.image-editor .upload-image .switch-image .title{line-height:14px;align-items:baseline}.image-editor .upload-image .upload-image-device{width:100%}.image-editor .upload-image .upload-image-device button{width:100%;padding:10px 0;border-radius:2px}.image-editor .upload-image .upload-image-device button:hover{background-color:#fff!important;color:var(--ion-color-vh-green);border:1px solid var(--ion-color-vh-green)}.image-editor .editor-content li .upload-image{padding:5px}.image-editor .editor-content .editor-field{padding:10px 5px}.image-editor .editor-content .editor-field .editor-field-header{display:flex;justify-content:space-between}.image-editor .editor-content .editor-field .editor-field-header p:nth-child(1){font-weight:500;font-size:16px}.image-editor .editor-content .box-shadow .list-box{width:100%}.image-editor .editor-content .box-shadow .list-box .box{flex-basis:calc(33.333% - 6px);min-width:calc(33.333% - 6px);max-width:calc(33.333% - 3px)}.image-editor .editor-content .field-row{margin-bottom:14px}.image-editor .editor-content .field-row .field-row-sub{display:flex;justify-content:space-between;align-items:center}.image-editor .editor-content .field-row .field-row-sub .title{line-height:16px}.image-editor .editor-content .field-row .field-row-sub nz-input-number{width:40%}.image-editor .editor-content .field-row .field-content{display:flex;flex-wrap:wrap;grid-gap:8px;gap:8px;margin-right:-8px}.image-editor .editor-content .field-row .field-content .image-fit,.image-editor .editor-content .field-row .field-content .image-hover{flex-basis:calc(33.333% - 8px);width:calc(33.333% - 8px);flex-shrink:1;border:1px solid #ddd;cursor:pointer;transition:.2s;overflow:hidden}.image-editor .editor-content .field-row .field-content .image-fit:hover,.image-editor .editor-content .field-row .field-content .image-hover:hover{box-shadow:#0000003d 0 3px 8px;transition:.2s}.image-editor .editor-content .field-row .field-content .image-fit p,.image-editor .editor-content .field-row .field-content .image-hover p{height:25%;display:flex;align-items:center;margin:0;justify-content:center}.image-editor .editor-content .field-row .field-content .image-fit img,.image-editor .editor-content .field-row .field-content .image-hover img{width:100%;height:75%}.image-editor .editor-content .field-row .field-content .image-hover{border:none;position:relative}.image-editor .editor-content .field-row .field-content .image-hover:hover{box-shadow:none;transition:.2s}.image-editor .field-content-slide{padding:10px 0}.image-editor .field-content-slide .field-content-inner{display:flex;flex-wrap:wrap;grid-gap:8px;gap:8px;width:auto;margin-right:-8px}.image-editor .field-content-slide .field-content-inner .image-item{flex-basis:calc(33.333% - 8px);min-width:calc(33.333% - 8px);padding:10px;border:1px solid #ddd;cursor:pointer;transition:.2s;border-radius:6px;overflow:hidden}.image-editor .field-content-slide .field-content-inner .image-item:hover{box-shadow:#0000003d 0 3px 8px;transition:.2s}.image-editor .field-content-slide .field-content-inner .image-item p{height:25%;display:flex;align-items:center;margin:0;justify-content:center}.image-editor .field-content-slide .field-content-inner .image-item img{width:100%;height:75%}.image-editor .field-content-slide .field-content-inner .image-hover-item{flex-basis:calc(50% - 8px);min-width:calc(50% - 8px);height:150px;border:1px solid #ddd;cursor:pointer;transition:.2s;border-radius:6px;overflow:hidden}.image-editor .field-content-slide .field-content-inner .image-hover-item p{height:25%;display:flex;align-items:center;margin:0;justify-content:center}.image-editor .field-content-slide .field-content-inner .image-hover-item img{width:40%;height:40%}.layer-index{display:flex;align-items:center;justify-content:space-between}.layer-index .title{margin:0}.hover-content .hover-effects{display:flex}.field-content .field-content-inner{display:flex;flex-wrap:wrap;grid-gap:8px;gap:8px;width:auto;margin-right:-8px}.field-content .field-content-inner .image-item{flex-basis:calc(50% - 8px);min-width:calc(50% - 8px);height:0;border:1px solid #ddd;cursor:pointer;transition:.2s;border-radius:6px;overflow:hidden}.field-content .field-content-inner .image-item p{height:25%;display:flex;align-items:center;margin:0;justify-content:center}.selected{border:2px solid var(--ion-color-vh-green)!important}.checkbox-border span{color:red!important}.disabled{pointer-events:none;opacity:.3!important}[nz-select]{margin:0 8px 10px 0}[nz-menu]{border:none!important}.btn-more:hover{color:var(--ion-color-vh-green)}.hover-zoom-in{transition:.3s}.hover-zoom-in:hover{transition:.3s}.hover-zoom-out{transition:.3s}.hover-zoom-out:hover{transform:scale(.8)!important;transition:.3s}.hover-drop-shadow{transition:.3s}.hover-drop-shadow:hover{box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px!important;transition:.3s}.hover-opacity{transition:.3s opacity!important}.hover-opacity:hover{opacity:.6;transition:.3s opacity!important}.hover-border{transition:.3s border!important}.hover-border:hover{border:2px solid #333!important;transition:.3s border!important}.square{position:relative;width:100%;overflow:hidden}.square .content{position:absolute;width:100%;height:100%;top:0;left:0}.square:after{content:\"\";display:block;padding-bottom:100%!important}.list-box{grid-gap:4px;gap:4px;flex-wrap:wrap;display:flex}.list-box .box{flex-basis:calc(50% - 6px);min-width:calc(50% - 6px);max-width:calc(50% - 3px);margin-bottom:40px;position:relative;width:100%;display:flex;background-color:#ffa64d}.list-box .box .content-icon{margin:auto 0;color:#fff}.list-box .box .btn-setting{margin:auto;color:#fff}.list-box .box .box-item{position:relative;border:2px solid white;display:flex;background-color:#ffa64d}.list-box .box .box-item img{width:100%;height:100%}.list-box .box .box-name{position:absolute;width:100%;height:30px;bottom:-30px;display:flex;align-items:center;justify-content:center}.ant-drawer-body:ng-deep{padding:0!important}.hideLink{visibility:hidden;opacity:0;transition:visibility 0s linear .3s,opacity .3s}.showLink{visibility:visible;opacity:1;transition:visibility 0s linear 0s,opacity .3s}.button-hover{animation:name duration timing-function delay iteration-count direction fill-mode;margin-bottom:32px;padding:10px 5px;display:flex;flex-wrap:wrap;grid-gap:10px;gap:10px}.button-hover .effect-button{position:relative;background-color:#e5e5e5;text-align:center;height:40px;border-radius:5px}.button-hover .effect-button button{overflow:hidden;width:100%;height:100%;background-color:#e5e5e5;border-radius:5px;text-align:center;display:flex;justify-content:center;align-items:center}.button-hover .active{border:2px solid #00a859;border-radius:5px;min-width:55px;min-height:60px}.button-hover .effect_zoom_button{width:100%;height:34px;border:2px solid #e5e5e5;border-radius:5px;transform:scale(1);transition:.24s all ease-in-out}.button-hover .effect_zoom_button:hover{border:2px solid #00a859;border-radius:5px;transform:scale(1.1)}.button-hover .effect_blur_button{width:100%;height:34px;border:2px solid #e5e5e5;border-radius:5px;transition:.24s all ease-in-out}.button-hover .effect_blur_button:hover{opacity:.6;border:2px solid #00a859}.button-hover .effect_change_color_button{width:100%;height:34px;border:2px solid #e5e5e5;border-radius:5px;transition:.24s all ease-in-out}.button-hover .effect_change_color_button:hover{background-color:#00a859;color:#fff}.button-hover .effect_shadow{width:100%;height:34px;border:2px solid #e5e5e5;border-radius:5px;transition:.24s all ease-in-out}.button-hover .effect_shadow:hover{filter:drop-shadow(0 0 .1rem #00a859)}.button-hover .effect_movotion{position:relative;width:100%;height:34px;border:2px solid #e5e5e5;border-radius:5px;z-index:0}.button-hover .effect_movotion:before{content:\"\";background:#00a859;z-index:-1;height:50%;width:0;position:absolute;top:0;left:0;transition:.3s cubic-bezier(.785,.135,.15,.86)}.button-hover .effect_movotion:after{content:\"\";background:#00a859;z-index:-1;height:50%;width:0;position:absolute;bottom:0;right:0;transition:.3s cubic-bezier(.785,.135,.15,.86)}.button-hover .effect_movotion:hover:before{width:100%}.button-hover .effect_movotion:hover:after{width:100%}.button-hover .effect_movotion:hover{color:#fff}.button-hover .selected{border:2px solid #00a859;border-radius:5px}.label-item{width:100%;cursor:pointer}.label-item input{width:30px}.item-border{padding:0 5px;display:flex;align-items:center;justify-content:space-between;margin-top:10px}.widget-button{padding:5px;background:none}.widget-button:hover{background:#c6c6c6}.widget-button.active{background:#c6c6c6}.item-border-size{padding:5px}.item-border-size .row-border{display:flex;align-items:center;justify-content:space-between;margin-top:10px}.color-pick{display:flex;justify-content:space-around;align-items:center}.input-color{border:1px solid #ccc;outline:none;cursor:pointer;width:80px;height:30px;border-radius:5px;caret-color:transparent;padding:12px 0}.item-border-radius{margin-top:10px;padding:5px}.item-border-radius-top-left,.item-border-radius-top-right,.item-border-radius-bottom-left,.item-border-radius-bottom-right{padding:5px}.slide-bar{display:flex;align-items:center;justify-content:space-between}.cursor-pointer{cursor:pointer}.config-name{display:flex;justify-content:space-between;align-items:center;grid-gap:5px;gap:5px;margin:15px 0}.config-name p{margin:0;line-height:1.5;flex:1}.config-name>nz-input-number,.config-name>input,.config-name>nz-select{width:40%}.drop-zone{border:4px dashed #212121;border-radius:8px;padding:10px;text-align:center;background-color:#414141cc;color:#ccc;transition:border-color .3s,background-color .3s;cursor:pointer;position:relative}.drop-zone.dragging{border-color:#66b29d;background-color:#2b4a46}.drop-zone label{cursor:pointer;display:inline-block;margin-bottom:0!important}.drop-zone label mat-icon{font-size:40px;width:40px;height:40px;margin-bottom:5px;color:#fff}.drop-zone label p{font-size:14px;margin:0}.drop-zone label span{color:#00bfff;text-decoration:underline}.drop-zone .preview img{max-width:100%;max-height:200px;border-radius:8px}.drop-zone .button-list{position:absolute;top:5px;right:5px;display:flex;grid-gap:3px;gap:3px}.drop-zone .button-list button{padding:4px;border-radius:100px;background:#00a859;color:#fff}.drop-zone .button-list button mat-icon{display:flex;justify-content:center;align-items:center}.img-info__text{line-height:1.4;margin-bottom:6px}.highlight{color:#00a859;font-weight:500;font-size:16px}.aria-label-input mat-label{display:flex;grid-gap:8px;gap:8px;font-size:16px}.aria-label-input mat-label mat-icon{font-size:16px}::ng-deep .mat-tooltip{font-size:14px!important;text-align:justify!important;white-space:pre-line!important;max-width:300px!important}\n"], components: [{ type: i10.NzSwitchComponent, selector: "nz-switch", inputs: ["nzLoading", "nzDisabled", "nzControl", "nzCheckedChildren", "nzUnCheckedChildren", "nzSize"], exportAs: ["nzSwitch"] }, { type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i6$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i12$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { type: i3$1.LinkPageComponent, selector: "app-link-page-config", inputs: ["objectChoosing", "staticdata", "linkStaticdata", "id_object", "blocks_of_page", "dynamic_data", "type_page", "type_contact", "hasContact"] }, { type: i5$5.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzOpen", "nzDisabled"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { type: i3$1.HideShowConfigComponent, selector: "app-hide-show-config", inputs: ["device", "isBlock", "elementChoosing"] }, { type: i3$1.BrightnessContrastConfigComponent, selector: "app-brightness-contrast-config", inputs: ["id_object", "device", "class", "config", "staticdata", "filterConfig", "opacityClass", "type", "elementChoosing"] }, { type: i3$1.ObjectFitConfigComponent, selector: "app-object-fit-config", inputs: ["class", "type", "objectFitClass", "style_field", "device", "objectChoosing"], outputs: ["isViewAll"] }, { type: i3$1.BordersConfigComponent, selector: "app-borders-config", inputs: ["elementChoosing", "class", "borderClass", "device", "isBlock", "id_object", "isPage"], outputs: ["isCloseConfig"] }, { type: i6$2.NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzSize", "nzMin", "nzMax", "nzParser", "nzPrecisionMode", "nzPlaceHolder", "nzStep", "nzInputMode", "nzId", "nzDisabled", "nzAutoFocus", "nzFormatter", "nzPrecision"], outputs: ["nzBlur", "nzFocus"], exportAs: ["nzInputNumber"] }, { type: i8$1.NzSliderComponent, selector: "nz-slider", inputs: ["nzDisabled", "nzDots", "nzIncluded", "nzRange", "nzVertical", "nzReverse", "nzMarks", "nzMax", "nzMin", "nzStep", "nzTooltipVisible", "nzTooltipPlacement", "nzDefaultValue", "nzTipFormatter"], outputs: ["nzOnAfterChange"], exportAs: ["nzSlider"] }, { type: i3$1.ChooseAnimationsConfigComponent, selector: "app-choose-animations-config", inputs: ["elementChoosing", "type", "id_object", "device", "class", "config", "staticdata", "cursorClass", "cursorClass2", "titleCursor", "effect_hover", "customize", "isBlock", "isParent", "isShowDialogChooseAnimation", "effectFileUsing", "conditionShowSelectEffect"], outputs: ["openAnimationDetail", "openAnimationDetailChild"] }, { type: i3$1.BordersRadiusConfigComponent, selector: "app-borders-radius-config", inputs: ["elementChoosing", "class", "borderRadiusClass", "device", "id_object", "isBlock", "isPage"] }, { type: i3$1.AnimationsConfigComponent, selector: "app-animations-config", inputs: ["staticdata", "elementChoosing", "config", "device", "id_object", "customize", "type", "isPage", "isBlock", "isParent"] }, { type: i4$1.NzModalComponent, selector: "nz-modal", inputs: ["nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzZIndex", "nzWidth", "nzCloseIcon", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel", "nzTitle", "nzFooter", "nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzContent", "nzComponentParams", "nzWrapClassName", "nzClassName", "nzStyle", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { type: i6$1.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { type: i6$1.NzOptionComponent, selector: "nz-option", inputs: ["nzLabel", "nzValue", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }], directives: [{ type: i12$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i21.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitleContext", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipTitle", "nz-tooltip", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.MatLabel, selector: "mat-label" }, { type: i15.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i17.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { type: i14.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { type: i5$5.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { type: i18.NzIconDirective, selector: "[nz-icon]", inputs: ["nzRotate", "nzSpin", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { type: i16$2.ColorPickerDirective, selector: "[colorPicker]", inputs: ["cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpPresetLabel", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "colorPicker", "cpPresetColors"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "translate": i12$2.TranslatePipe } });
+AtwImageAdminConfig.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AtwImageAdminConfig, selector: "atw-image-admin-config", inputs: { visible_config_tool: "visible_config_tool", objectChoosing: "objectChoosing", type: "type", device: "device", class: "class", staticdata: "staticdata", config: "config", blocks_of_page: "blocks_of_page" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"image-editor\">\r\n  <div style=\"display: flex; align-items: center; gap: 4px; flex-wrap: wrap;\">\r\n    <button [ngClass]=\"configMode == 'basic' ? 'ant-btn ant-btn-primary' : 'ant-btn'\" class=\"d-flex align-items-center\" (click)=\"configMode = 'basic'\">\r\n      <span>{{('cau_hinh_co_ban') | translate}}</span>\r\n    </button>\r\n  \r\n    <button [ngClass]=\"configMode == 'advanced' ? 'ant-btn ant-btn-primary' : 'ant-btn'\" class=\"d-flex align-items-center\" (click)=\"configMode = 'advanced'\">\r\n      <span>{{('cau_hinh_nang_cao') | translate}}</span>\r\n    </button>\r\n  </div>\r\n  <!-- C\u1EA5u h\u00ECnh c\u01A1 b\u1EA3n -->\r\n  <ng-container *ngIf=\"configMode == 'basic'\">\r\n    <div style=\"margin-top: 10px\">\r\n      <div class=\"field-row mb-2\" style=\"margin: 0\">\r\n        <div class=\"field-row-sub field-row__switch justify-content-between\" style=\"padding: 0\" nz-tooltip\r\n        [nzTooltipTitle]=\"'*_giai_thich_anh_lcp' | translate\">\r\n          <span> {{'uu_tien_tai_truoc' | translate}} </span>\r\n          <nz-switch [(ngModel)]=\"config.is_top_page\" (ngModelChange)=\"updateConfig()\"></nz-switch>\r\n        </div>\r\n      </div>\r\n\r\n      <mat-form-field appearance=\"fill\">\r\n        <mat-label>{{'kieu_hien_thi_anh' | translate}}</mat-label>\r\n        <mat-select disableRipple [(ngModel)]=\"objectChoosing.setups.upload_image.display\"  (ngModelChange)=\"changeImgType()\">\r\n          <mat-option value=\"shared\">{{'anh_dung_chung_cho_tung_thiet_bi' | translate}}</mat-option>\r\n          <mat-option value=\"individual\">{{'anh_dung_rieng_cho_tung_thiet_bi' | translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field appearance=\"fill\">\r\n        <mat-label>{{'nguon_hinh_anh_hien_thi_len' | translate}}</mat-label>\r\n        <mat-select disableRipple [(ngModel)]=\"objectChoosing.setups.upload_image.source\" (ngModelChange)=\"updateSetups()\">\r\n          <mat-option value=\"device\">{{'tu_thiet_bi' | translate}}</mat-option>\r\n          <mat-option value=\"library\">{{'tu_thu_vien' | translate}}</mat-option>\r\n          <mat-option value=\"url\">{{'duong_dan_hinh_anh' | translate}}</mat-option>\r\n          <mat-option value=\"free_img\">{{'kho_anh_dung_chung' | translate}}</mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field  *ngIf=\"objectChoosing.setups.upload_image.source == 'device'\" appearance=\"fill\" class=\"config-img\">\r\n        <mat-label>{{'nen_anh_tai_len' | translate}}</mat-label>\r\n        <mat-select disableRipple [(ngModel)]=\"objectChoosing.setups.upload_image.compress_type\" (ngModelChange)=\"updateSetups()\">\r\n          <mat-option [value]=\"'no-compress'\">{{'khong_nen_anh_sau_khi_tai_len' | translate}}</mat-option>\r\n          <mat-option [value]=\"'compress-screen'\">{{'nen_anh_theo_ti_le_man_hinh_hien_thi' | translate}}</mat-option>\r\n          <mat-option [value]=\"'compress-frame'\">{{'nen_anh_theo_ti_le_khung_hien_thi_anh' | translate}}</mat-option>\r\n          <mat-option [value]=\"'custom'\">{{'nen_anh_theo_kich_thuoc_tu_chon' | translate}}</mat-option>\r\n\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field *ngIf=\"objectChoosing.setups.upload_image.source == 'device' &&  objectChoosing.setups.upload_image.compress_type == 'custom'\" class=\"mr-4\">\r\n        <mat-label>{{'chieu_rong' | translate}}</mat-label>\r\n        <input matInput placeholder=\"{{'chieu_rong' | translate}}\" [ngModel]=\"objectChoosing.setups.upload_image.compress_width\"\r\n        (ngModelChange)=\"objectChoosing.setups.upload_image.compress_width = $event\" (blur)=\"updateSetups()\">\r\n      </mat-form-field>\r\n\r\n      <mat-form-field *ngIf=\"objectChoosing.setups.upload_image.source == 'device' &&  objectChoosing.setups.upload_image.compress_type == 'custom'\">\r\n        <mat-label>{{'chieu_cao' | translate}}</mat-label>\r\n        <input matInput placeholder=\"{{'chieu_cao' | translate}}\" [ngModel]=\"objectChoosing.setups.upload_image.compress_height\"\r\n        (ngModelChange)=\"objectChoosing.setups.upload_image.compress_height = $event\" (blur)=\"updateSetups()\">\r\n      </mat-form-field>\r\n\r\n      <!-- Hi\u1EC3n th\u1ECB t\u00EAn v\u00E0 \u0111u\u00F4i file h\u00ECnh \u1EA3nh -->\r\n      <div *ngIf=\"objectChoosing.setups.upload_image.source !== 'url' && staticdata.img[device + '_img'].includes(id_subproject)\"\r\n      class=\"my-1 img-info\">\r\n        <p class=\"img-info__text\">\r\n          {{ 'thu_muc_chua_tep_hinh_anh' | translate }}: \r\n        </p>\r\n        <p class=\"img-info__text highlight ml-2\">\r\n          {{ getFileInfo(staticdata.img[device + '_img']).folderPath }}\r\n        </p>\r\n        <p class=\"img-info__text mt-1\">\r\n          {{ 'ten_tep_hinh_anh' | translate }}: \r\n        </p>\r\n        <p class=\"img-info__text highlight ml-2\">\r\n          {{ getFileInfo(staticdata.img[device + '_img']).fullFileName }}\r\n        </p>\r\n      </div>\r\n\r\n      <!-- Upload input -->\r\n      <input type=\"file\" accept=\"image/*\" (change)=\"onUpload($event)\" id=\"upload\" style=\"display: none\" />\r\n      <!-- Tr\u01B0\u1EDDng h\u1EE3p: K\u00E9o th\u1EA3 \u1EA3nh ho\u1EB7c t\u1EA3i \u1EA3nh t\u1EEB m\u00E1y -->\r\n      <div *ngIf=\"objectChoosing.setups.upload_image.source == 'device'\" class=\"drop-zone\" [class.dragging]=\"dragging\"\r\n      (drop)=\"onFileDropped_upload($event)\" (dragover)=\"onDragOver_upload($event)\" (dragleave)=\"onDragLeave_upload()\">\r\n        <label *ngIf=\"!previewUploadUrl\" for=\"upload\">\r\n          <mat-icon>image</mat-icon>\r\n          <p>{{ 'keo_hinh_anh_vao_day_hoac' | translate }} <span>{{ 'tai_tep_len' | translate }}</span></p>\r\n        </label>\r\n\r\n        <div *ngIf=\"previewUploadUrl\" class=\"preview\">\r\n          <img [src]=\"previewUploadUrl\" alt=\"Preview\" />\r\n        </div>\r\n\r\n        <div *ngIf=\"previewUploadUrl\" class=\"gr-btn button-list\">\r\n          <button (click)=\"openUpload()\">\r\n            <mat-icon>vertical_align_top</mat-icon>\r\n          </button>\r\n          <button (click)=\"previewUploadUrl = ''\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Tr\u01B0\u1EDDng h\u1EE3p t\u1EA3i \u1EA3nh t\u1EEB th\u01B0 vi\u1EC7n -->\r\n      <button *ngIf=\"objectChoosing.setups.upload_image.source == 'library'\"\r\n        (click)=\"openLibrary()\" class=\"upload-background-image\">\r\n        <i class=\"bi bi-upload\"></i>{{'chon_tu_thu_vien' | translate}}\r\n      </button>\r\n      <!-- Tr\u01B0\u1EDDng h\u1EE3p ch\u1ECDn \u1EA3nh t\u1EEB 1 \u0111\u01B0\u1EDDng d\u1EABn b\u1EA5t k\u00EC -->\r\n      <div class=\"title\" *ngIf=\"objectChoosing.setups.upload_image.source == 'url' || objectChoosing.setups.upload_image.source == 'free_img'\">\r\n        <textarea\r\n          class=\"input custom-textarea w-100\"\r\n          name=\"background-image\"\r\n          id=\"background-image\"\r\n          placeholder=\"{{'nhap_duong_dan_anh' | translate}}\"\r\n          [(ngModel)]=\"staticdata.img[device + '_img']\"\r\n          (blur)=\"changeUrl()\"\r\n          [disabled]=\"objectChoosing.setups.upload_image.source == 'free_img'\"\r\n          >\r\n        </textarea>\r\n      </div>\r\n      <!-- Tr\u01B0\u1EDDng h\u1EE3p ch\u1ECDn \u1EA3nh mi\u1EC5n ph\u00ED -->\r\n      <div class=\"custom\" *ngIf=\"objectChoosing.setups.upload_image.source == 'free_img'\">\r\n        <label for=\"upload\" (click)=\"openImageFree()\" style=\"width: 100%\">\r\n          <button  class=\"upload-background-image\">\r\n            <i class=\"bi bi-plus-circle\"></i> {{'kho_anh_dung_chung' | translate }}\r\n          </button>\r\n        </label>\r\n      </div>\r\n\r\n      <!-- N\u00FAt sao ch\u00E9p link h\u00ECnh \u1EA3nh -->\r\n      <button *ngIf=\"staticdata.img[device + '_img'].includes(id_subproject)\"\r\n      (click)=\"copyLinkImg()\" nz-button nzType=\"default\" class=\"mt-2 w-100\"\r\n      style=\"white-space: normal; border-color: #00a859;\">\r\n        {{ 'nhan_de_sao_chep_duong_dan_anh' | translate }}\r\n      </button>\r\n\r\n      <!-- N\u1EBFu \u1EA3nh ch\u1EE9a id_subproject th\u00EC \u0111\u00E3 l\u00E0 \u1EA3nh tr\u00EAn server r\u1ED3i n\u00EAn s\u1EBD \u1EA9n -->\r\n      <button *ngIf=\"!staticdata.img[device + '_img'].includes(id_subproject)\" style=\"width: 100%;\" \r\n      nz-button nzType=\"primary\" (click)=\"isShowConfirmPopup = true\" class=\"mt-2\">\r\n        {{'chuyen_anh_len_server'  | translate}}\r\n      </button>\r\n\r\n      <!-- C\u1EADp nh\u1EADt cho ph\u00F9 h\u1EE3p v\u1EDBi k\u00EDch th\u01B0\u1EDBc hi\u1EC3n th\u1ECB h\u00ECnh \u1EA3nh \u0111\u1EC3 t\u1ED1i \u01B0u ch\u1EC9 s\u1ED1 PageSpeed -->\r\n      <button *ngIf=\"isDesignImageSizeValid\" style=\"line-height: 1.4; padding: 8px\" nz-tooltip\r\n      class=\"upload-background-image mt-2\" (click)=\"updateDesignImageSize()\"\r\n      [nzTooltipTitle]=\"'chi_dung_cap_nhat_kich_thuoc_anh_cho_nhung_hinh_anh_dung_yen_khong_co_hieu_ung_truot' | translate\">\r\n        <i class=\"bi bi-pencil-square\"></i>\r\n        {{'cap_nhat_kich_thuoc_anh_theo_kich_thuoc_thiet_ke'  | translate}}\r\n      </button>\r\n\r\n      <app-link-page-config\r\n        [objectChoosing]=\"objectChoosing\" \r\n        [staticdata]=\"staticdata\"\r\n        [id_object]=\"objectChoosing._id\"\r\n        [dynamic_data]=\"objectChoosing.dynamic_data\"\r\n        [hasContact]=\"true\"\r\n        >\r\n      </app-link-page-config>\r\n    </div>\r\n  </ng-container>\r\n  <!-- Hi\u1EC3n th\u1ECB ti\u00EAu \u0111\u1EC1 m\u1EDF r\u1ED9ng -->\r\n  <div class=\"editor-header\" *ngIf=\"isViewAll\">\r\n    <i class=\"bi bi-chevron-left\" (click)=\"isViewAll = !isViewAll\"></i>\r\n    <span (click)=\"isViewAll = !isViewAll\">{{ currentViewAll.title | translate }}</span>\r\n  </div>\r\n  <!-- Dropdown menu -->\r\n  <div class=\"editor-content mt-2\" *ngIf=\"!isViewAll && configMode == 'advanced'\">\r\n    <ul nz-menu nzMode=\"inline\">\r\n      <div class=\"field-row\" style=\"margin: 0\">\r\n        <div class=\"field-row-sub field-row__switch\" style=\"padding: 0\" nz-tooltip\r\n        [nzTooltipTitle]=\"'*_giai_thich_anh_lcp' | translate\">\r\n          <span> {{'uu_tien_tai_truoc' | translate}} </span>\r\n          <nz-switch [(ngModel)]=\"config.is_top_page\" (ngModelChange)=\"updateConfig()\"></nz-switch>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Upload \u1EA3nh -->\r\n      <li nz-submenu nzTitle=\"{{'hien_thi'| translate}}\" [(nzOpen)]=\"openMap.menu1\"\r\n        (nzOpenChange)=\"openHandler('menu1')\">\r\n        <div class=\"upload-image\" *ngIf=\"!isViewAll\">\r\n\r\n          <!-- L\u1EF1a ch\u1ECDn hi\u1EC3n th\u1ECB cho c\u00E1c thi\u1EBFt b\u1ECB -->\r\n          <app-hide-show-config  [elementChoosing]=\"objectChoosing\" [device]=\"device\" >\r\n          </app-hide-show-config>\r\n        </div>\r\n      </li>\r\n\r\n\r\n      <li nz-submenu nzTitle=\"{{'hinh_anh'| translate}}\" [(nzOpen)]=\"openMap.menu2\"\r\n        (nzOpenChange)=\"openHandler('menu2')\">\r\n          <div class=\"mt-2\" >\r\n            <mat-form-field appearance=\"fill\">\r\n              <mat-label>{{'kieu_hien_thi_anh' | translate}}</mat-label>\r\n              <mat-select disableRipple [(ngModel)]=\"objectChoosing.setups.upload_image.display\"  (ngModelChange)=\"changeImgType()\">\r\n                <mat-option value=\"shared\">{{'anh_dung_chung_cho_tung_thiet_bi' | translate}}</mat-option>\r\n                <mat-option value=\"individual\">{{'anh_dung_rieng_cho_tung_thiet_bi' | translate}}</mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-form-field appearance=\"fill\">\r\n              <mat-label>{{'nguon_hinh_anh_hien_thi_len' | translate}}</mat-label>\r\n              <mat-select disableRipple [(ngModel)]=\"objectChoosing.setups.upload_image.source\" (ngModelChange)=\"updateSetups()\">\r\n                <mat-option value=\"device\">{{'tu_thiet_bi' | translate}}</mat-option>\r\n                <mat-option value=\"library\">{{'tu_thu_vien' | translate}}</mat-option>\r\n                <mat-option value=\"url\">{{'duong_dan_hinh_anh' | translate}}</mat-option>\r\n                <mat-option value=\"free_img\">{{'kho_anh_dung_chung' | translate}}</mat-option>\r\n              </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-form-field  *ngIf=\"objectChoosing.setups.upload_image.source == 'device'\" appearance=\"fill\" class=\"config-img\">\r\n              <mat-label>{{'nen_anh_tai_len' | translate}}</mat-label>\r\n              <mat-select disableRipple [(ngModel)]=\"objectChoosing.setups.upload_image.compress_type\" (ngModelChange)=\"updateSetups()\">\r\n                <mat-option [value]=\"'no-compress'\">{{'khong_nen_anh_sau_khi_tai_len' | translate}}</mat-option>\r\n                <mat-option [value]=\"'compress-screen'\">{{'nen_anh_theo_ti_le_man_hinh_hien_thi' | translate}}</mat-option>\r\n                <mat-option [value]=\"'compress-frame'\">{{'nen_anh_theo_ti_le_khung_hien_thi_anh' | translate}}</mat-option>\r\n                <mat-option [value]=\"'custom'\">{{'nen_anh_theo_kich_thuoc_tu_chon' | translate}}</mat-option>\r\n\r\n              </mat-select>\r\n            </mat-form-field>\r\n\r\n            <mat-form-field *ngIf=\"objectChoosing.setups.upload_image.source == 'device' &&  objectChoosing.setups.upload_image.compress_type == 'custom'\" class=\"mr-4\">\r\n              <mat-label>{{'chieu_rong' | translate}}</mat-label>\r\n              <input matInput placeholder=\"{{'chieu_rong' | translate}}\" [ngModel]=\"objectChoosing.setups.upload_image.compress_width\"\r\n              (ngModelChange)=\"objectChoosing.setups.upload_image.compress_width = $event\" (blur)=\"updateSetups()\">\r\n            </mat-form-field>\r\n\r\n            <mat-form-field *ngIf=\"objectChoosing.setups.upload_image.source == 'device' &&  objectChoosing.setups.upload_image.compress_type == 'custom'\">\r\n              <mat-label>{{'chieu_cao' | translate}}</mat-label>\r\n              <input matInput placeholder=\"{{'chieu_cao' | translate}}\" [ngModel]=\"objectChoosing.setups.upload_image.compress_height\"\r\n              (ngModelChange)=\"objectChoosing.setups.upload_image.compress_height = $event\" (blur)=\"updateSetups()\">\r\n            </mat-form-field>\r\n\r\n            <!-- Upload input -->\r\n            <input type=\"file\" accept=\"image/*\" (change)=\"onUpload($event)\" id=\"upload\" style=\"display: none\" />\r\n            <!-- Tr\u01B0\u1EDDng h\u1EE3p: K\u00E9o th\u1EA3 \u1EA3nh ho\u1EB7c t\u1EA3i \u1EA3nh t\u1EEB m\u00E1y -->\r\n            <div *ngIf=\"objectChoosing.setups.upload_image.source == 'device'\" class=\"drop-zone\" [class.dragging]=\"dragging\"\r\n            (drop)=\"onFileDropped_upload($event)\" (dragover)=\"onDragOver_upload($event)\" (dragleave)=\"onDragLeave_upload()\">\r\n              <label *ngIf=\"!previewUploadUrl\" for=\"upload\">\r\n                <mat-icon>image</mat-icon>\r\n                <p>{{ 'keo_hinh_anh_vao_day_hoac' | translate }} <span>{{ 'tai_tep_len' | translate }}</span></p>\r\n              </label>\r\n\r\n              <div *ngIf=\"previewUploadUrl\" class=\"preview\">\r\n                <img [src]=\"previewUploadUrl\" alt=\"Preview\" />\r\n              </div>\r\n\r\n              <div *ngIf=\"previewUploadUrl\" class=\"gr-btn button-list\">\r\n                <button (click)=\"openUpload()\">\r\n                  <mat-icon>vertical_align_top</mat-icon>\r\n                </button>\r\n                <button (click)=\"previewUploadUrl = ''\">\r\n                  <mat-icon>close</mat-icon>\r\n                </button>\r\n              </div>\r\n            </div>\r\n            <!-- Tr\u01B0\u1EDDng h\u1EE3p t\u1EA3i \u1EA3nh t\u1EEB th\u01B0 vi\u1EC7n -->\r\n            <button *ngIf=\"objectChoosing.setups.upload_image.source == 'library'\"\r\n              (click)=\"openLibrary()\" class=\"upload-background-image\">\r\n              <i class=\"bi bi-upload\"></i>{{'chon_tu_thu_vien' | translate}}\r\n            </button>\r\n            <!-- Tr\u01B0\u1EDDng h\u1EE3p ch\u1ECDn \u1EA3nh t\u1EEB 1 \u0111\u01B0\u1EDDng d\u1EABn b\u1EA5t k\u00EC -->\r\n            <div class=\"title\" *ngIf=\"objectChoosing.setups.upload_image.source == 'url' || objectChoosing.setups.upload_image.source == 'free_img'\">\r\n              <textarea\r\n                class=\"input custom-textarea w-100\"\r\n                name=\"background-image\"\r\n                id=\"background-image\"\r\n                placeholder=\"{{'nhap_duong_dan_anh' | translate}}\"\r\n                [(ngModel)]=\"staticdata.img[device + '_img']\"\r\n                (blur)=\"changeUrl()\"\r\n                [disabled]=\"objectChoosing.setups.upload_image.source == 'free_img'\"\r\n                >\r\n              </textarea>\r\n            </div>\r\n            <!-- Tr\u01B0\u1EDDng h\u1EE3p ch\u1ECDn \u1EA3nh mi\u1EC5n ph\u00ED -->\r\n            <div class=\"custom\" *ngIf=\"objectChoosing.setups.upload_image.source == 'free_img'\">\r\n              <label for=\"upload\" (click)=\"openImageFree()\" style=\"width: 100%\">\r\n                <button  class=\"upload-background-image\">\r\n                  <i class=\"bi bi-plus-circle\"></i> {{'kho_anh_dung_chung' | translate }}\r\n                </button>\r\n              </label>\r\n            </div>\r\n\r\n            <!-- N\u1EBFu \u1EA3nh ch\u1EE9a id_subproject th\u00EC \u0111\u00E3 l\u00E0 \u1EA3nh tr\u00EAn server r\u1ED3i n\u00EAn s\u1EBD \u1EA9n -->\r\n            <button *ngIf=\"!staticdata.img[device + '_img'].includes(id_subproject)\" style=\"width: 100%; margin-top: 5px;\" nz-button nzType=\"primary\" (click)=\"isShowConfirmPopup = true\">\r\n              {{'chuyen_anh_len_server'  | translate}}\r\n            </button>\r\n\r\n            <!-- C\u1EADp nh\u1EADt cho ph\u00F9 h\u1EE3p v\u1EDBi k\u00EDch th\u01B0\u1EDBc hi\u1EC3n th\u1ECB h\u00ECnh \u1EA3nh \u0111\u1EC3 t\u1ED1i \u01B0u ch\u1EC9 s\u1ED1 PageSpeed -->\r\n            <button *ngIf=\"isDesignImageSizeValid\" style=\"line-height: 1.4; padding: 8px\" nz-tooltip\r\n            class=\"upload-background-image mt-2\" (click)=\"updateDesignImageSize()\"\r\n            [nzTooltipTitle]=\"'chi_dung_cap_nhat_kich_thuoc_anh_cho_nhung_hinh_anh_dung_yen_khong_co_hieu_ung_truot' | translate\">\r\n              <i class=\"bi bi-pencil-square\"></i>\r\n              {{'cap_nhat_kich_thuoc_anh_theo_kich_thuoc_thiet_ke'  | translate}}\r\n            </button>\r\n          </div>\r\n      </li>\r\n\r\n      <!-- C\u1EA5u h\u00ECnh filter -->\r\n      <li nz-submenu nzTitle=\"{{'anh_sang_va_tuong_phan'| translate}}\" [(nzOpen)]=\"openMap.menu3\"\r\n        (nzOpenChange)=\"openHandler('menu3')\">\r\n        <app-brightness-contrast-config [elementChoosing]=\"objectChoosing\"  [device]=\"device\" [class]=\"class\" [config]=\"config\"\r\n          [filterConfig]=\"config['filter']\" [opacityClass]=\"class['image__boundary--img']\" [staticdata]=\"staticdata\"\r\n          [id_object]=\"objectChoosing._id\">\r\n        </app-brightness-contrast-config>\r\n      </li>\r\n      <!-- C\u1EA5u h\u00ECnh l\u1EADt \u1EA3nh -->\r\n      <li nz-submenu nzTitle=\"{{'lat_hinh'| translate}}\" [(nzOpen)]=\"openMap.menu4\" (nzOpenChange)=\"openHandler('menu4')\">\r\n        <div class=\"editor-field-body\">\r\n          <div class=\"mb-3\">\r\n            <div class=\"field-row-sub\">\r\n              <div style=\"display: flex; gap: 4px; width: 100%\">\r\n                <span nz-button nzType=\"primary\" nzSize=\"default\" (click)=\"handleSetTransform('y')\"\r\n                  class=\"btn_transform\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\">\r\n                    <path fill=\"currentColor\"\r\n                      d=\"M15.97 15.25h-2.72c-5.3 0-9.5-2.15-9.5-4.5s4.2-4.5 9.5-4.5c3.03 0 5.82.7 7.62 1.86a.75.75 0 1 0 .81-1.26c-2.06-1.33-5.13-2.1-8.43-2.1-6.02 0-11 2.55-11 6s4.98 6 11 6h2.8l-2.3 2.3a.75.75 0 1 0 1.07 1.05l2.83-2.82c.68-.69.68-1.8 0-2.48l-2.83-2.83a.75.75 0 0 0-1.06 1.06l2.21 2.22z\">\r\n                    </path>\r\n                  </svg>\r\n                  <p class=\"m-0\">{{ 'ngang' | translate }}</p>\r\n                </span>\r\n                <button nz-button nzType=\"primary\" nzSize=\"default\" (click)=\"handleSetTransform('x')\"\r\n                  class=\"btn_transform\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\">\r\n                    <path fill=\"currentColor\"\r\n                      d=\"M15.25 8.35v2.4c0 5.3-2.15 9.5-4.5 9.5s-4.5-4.2-4.5-9.5c0-3.03.7-5.82 1.86-7.62a.75.75 0 1 0-1.26-.81c-1.33 2.06-2.1 5.13-2.1 8.43 0 6.02 2.55 11 6 11s6-4.98 6-11V8.27l2.3 2.3A.75.75 0 1 0 20.1 9.5l-2.82-2.83a1.75 1.75 0 0 0-2.48 0L11.97 9.5a.75.75 0 1 0 1.06 1.06l2.22-2.22z\">\r\n                    </path>\r\n                  </svg>\r\n                  <p class=\"m-0\">{{ 'doc' | translate }}</p>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"field-row mb-3\">\r\n            <div class=\"field-row-sub\">\r\n              <div style=\"display: flex; gap: 4px; width: 100%\">\r\n                <button nz-button nzType=\"primary\" nzSize=\"default\" class=\"btn_transform\"\r\n                  (click)=\"handleSetTransform('-z')\">\r\n                  <span nz-icon nzType=\"rotate-left\" nzTheme=\"outline\"></span>\r\n                  <p class=\"m-0\">{{ 'trai' | translate }}</p>\r\n                </button>\r\n                <button nz-button nzType=\"primary\" nzSize=\"default\" class=\"btn_transform\"\r\n                  (click)=\"handleSetTransform('z')\">\r\n                  <span nz-icon nzType=\"rotate-right\" nzTheme=\"outline\"></span>\r\n                  <p class=\"m-0\">{{ 'phai' | translate }}</p>\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"view\">\r\n          <p class=\"discover_text\" (click)=\"openViewAll(style_fields[6])\"\r\n            style=\"cursor: pointer; text-align: left; margin: 0\">\r\n            {{ 'mo_rong' | translate }} &#8594;\r\n          </p>\r\n        </div>\r\n      </li>\r\n      <!-- C\u1EA5u h\u00ECnh object-fit -->\r\n      <li nz-submenu nzTitle=\"{{'do_bao_phu'| translate}}\" [(nzOpen)]=\"openMap.menu5\" (nzOpenChange)=\"openHandler('menu5')\">\r\n        <app-object-fit-config  [device]=\"device\" [class]=\"class\" [objectFitClass]=\"class['image__boundary--img']\"\r\n          [style_field]=\"style_fields[2]\" (isViewAll)=\"openViewAll($event)\" [objectChoosing]=\"objectChoosing\">\r\n        </app-object-fit-config>\r\n      </li>\r\n      <!-- C\u1EA5u h\u00ECnh h\u00ECnh d\u1EA1ng vi\u1EC1n -->\r\n      <li nz-submenu nzTitle=\"{{'kieu_vien'| translate}}\" [(nzOpen)]=\"openMap.menu6\" (nzOpenChange)=\"openHandler('menu6')\">\r\n        <app-borders-config  [elementChoosing]=\"objectChoosing\"  [device]=\"device\" [class]=\"class\" [borderClass]=\"class['image__boundary--img']\"\r\n          [id_object]=\"objectChoosing._id\">\r\n        </app-borders-config>\r\n        <!-- N\u00FAt m\u1EDF r\u1ED9ng -->\r\n\r\n        <div class=\"item-border my-3 cursor-pointer\" style=\"float: right\">\r\n          <p class=\"m-0 title-border\" (click)=\"openViewAll(style_fields[3])\">\r\n            {{ 'mo_rong' | translate }} &#8594;\r\n          </p>\r\n        </div>\r\n      </li>\r\n      <!-- T\u1EA1o b\u00F3ng -->\r\n      <li nz-submenu nzTitle=\"{{'do_bong'| translate}}\" [(nzOpen)]=\"openMap.menu7\" (nzOpenChange)=\"openHandler('menu7')\">\r\n        <!-- C\u1EA5u h\u00ECnh b\u00F3ng -->\r\n        <div class=\"editor-field-body\">\r\n          <div class=\"field-row\">\r\n            <div class=\"field-row-sub field-row__switch\">\r\n              <span> {{'ap_dung' | translate}} </span>\r\n              <nz-switch [(ngModel)]=\"config.check_shadow\" (ngModelChange)=\"handleSetShadow()\"></nz-switch>\r\n            </div>\r\n          </div>\r\n          <div class=\"field-row\">\r\n            <div class=\"item\">\r\n              <p class=\"m-0\">{{'ngang' | translate}}</p>\r\n              <nz-input-number [(ngModel)]=\"config['box-shadow'].box_shadow_x\" [nzMin]=\"0\" [nzStep]=\"1\"\r\n                [nzDisabled]=\"!config.check_shadow\" (ngModelChange)=\"handleSetShadow()\"></nz-input-number>\r\n            </div>\r\n            <nz-slider [(ngModel)]=\"config['box-shadow'].box_shadow_x\" (nzOnAfterChange)=\"handleSetShadow()\"\r\n              [nzMin]=\"-100\" [nzStep]=\"0.1\"></nz-slider>\r\n          </div>\r\n          <div class=\"field-row\">\r\n            <div class=\"item\">\r\n              <p class=\"m-0\">{{'doc' | translate}}</p>\r\n              <nz-input-number [nzStep]=\"1\" [(ngModel)]=\"config['box-shadow'].box_shadow_y\"\r\n                [nzDisabled]=\"!config.check_shadow\" (ngModelChange)=\"handleSetShadow()\"></nz-input-number>\r\n            </div>\r\n            <nz-slider [(ngModel)]=\"config['box-shadow'].box_shadow_y\" (nzOnAfterChange)=\"handleSetShadow()\"\r\n              [nzMin]=\"-100\" [nzStep]=\"0.1\"></nz-slider>\r\n          </div>\r\n          <div class=\"field-row\">\r\n            <div class=\"item\">\r\n              <p class=\"m-0 title\">{{'kich_thuoc_bong' | translate}}</p>\r\n              <nz-input-number [nzStep]=\"1\" [(ngModel)]=\"config['box-shadow'].box_shadow_width\"\r\n                [nzDisabled]=\"!config.check_shadow\" (ngModelChange)=\"handleSetShadow()\"></nz-input-number>\r\n            </div>\r\n            <nz-slider [(ngModel)]=\"config['box-shadow'].box_shadow_width\" (nzOnAfterChange)=\"handleSetShadow()\"\r\n              [nzMin]=\"-100\" [nzStep]=\"0.1\"></nz-slider>\r\n          </div>\r\n          <div class=\"field-row\">\r\n            <div class=\"item\">\r\n              <p class=\"m-0 title\">{{'do_nhoe' | translate}}</p>\r\n              <nz-input-number [nzStep]=\"1\" [(ngModel)]=\"config['box-shadow'].box_shadow_blur\"\r\n                [nzDisabled]=\"!config.check_shadow\" (ngModelChange)=\"handleSetShadow()\"></nz-input-number>\r\n            </div>\r\n            <nz-slider [(ngModel)]=\"config['box-shadow'].box_shadow_blur\" (nzOnAfterChange)=\"handleSetShadow()\"\r\n              [nzMin]=\"0\" [nzMax]=\"100\" [nzStep]=\"1\"></nz-slider>\r\n          </div>\r\n          <div class=\"field-row\">\r\n            <div class=\"item w-100\">\r\n              <p class=\"m-0 w-50\">{{'mau_sac' | translate}}</p>\r\n              <input class=\"input-color w-50\" type=\"button\" [cpOKButton]=\"true\" [(colorPicker)]=\"config['box-shadow'].box_shadow_color\"\r\n                [style.background]=\"config['box-shadow'].box_shadow_color\" (colorPickerClose)=\"handleSetShadow()\"\r\n                [cpWidth]=\"'230px'\" [disabled]=\"!config.check_shadow\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </li>\r\n\r\n      <!-- Xem to\u00E0n m\u00E0n h\u00ECnh -->\r\n      <li *ngIf=\"(!staticdata?.type_link || staticdata.type_link == 'none')\" nz-submenu nzTitle=\"{{'xem_toan_man_hinh'| translate}}\"\r\n      [(nzOpen)]=\"openMap.menu10\" (nzOpenChange)=\"openHandler('menu10')\">\r\n        <!-- B\u1EADt t\u1EAFt ch\u1EE9c n\u0103ng c\u1EA5u h\u00ECnh to\u00E0n m\u00E0n h\u00ECnh -->\r\n        <div class=\"field-row\" nz-tooltip [nzTooltipTitle]=\"'khi_click_hinh_anh_se_phong_to_ra_toan_man_hinh' | translate\">\r\n          <span class=\"mx-2 w-50\">{{'toan_man_hinh' | translate}}</span>\r\n          <nz-switch [ngModel]=\"config['image-fullscreen']?.['toggle_fullscreen']\"\r\n          (ngModelChange)=\"config['image-fullscreen']['toggle_fullscreen'] = $event;updateConfig()\"\r\n          class=\"mx-2\">\r\n          </nz-switch>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"config['image-fullscreen']?.['toggle_fullscreen']\">\r\n          <!-- B\u1EADt t\u1EAFt m\u1EDF preview to\u00E0n m\u00E0n h\u00ECnh \u1EDF design \u0111\u1EC3 c\u1EA5u h\u00ECnh -->\r\n          <div class=\"item-border my-3 cursor-pointer\" style=\"float: right\">\r\n            <p class=\"m-0 title-border\" (click)=\"handleOpenFullscreenPreview()\">\r\n              {{ 'xem_truoc' | translate }} &#8594;\r\n            </p>\r\n          </div>\r\n        </ng-container>\r\n      </li>\r\n\r\n      <!-- Hi\u1EC7u \u1EE9ng -->\r\n      <li nz-submenu nzTitle=\"{{'hieu_ung'| translate}}\" [(nzOpen)]=\"openMap.menu8\" (nzOpenChange)=\"openHandler('menu8')\">\r\n        <app-choose-animations-config  [elementChoosing]=\"objectChoosing\" (openAnimationDetail)=\"openAnimationDetail($event)\"\r\n          [id_object]=\"objectChoosing._id\" [device]=\"device\" [class]=\"class\" [config]=\"config\" [staticdata]=\"staticdata\"\r\n          [cursorClass]=\"class['image']\" [effect_hover]=\"effect_hover\" [customize]=\"customize\" \r\n          [effectFileUsing]=\"'image'\">\r\n        </app-choose-animations-config>\r\n      </li>\r\n      <!-- Th\u00EAm li\u00EAn k\u1EBFt -->\r\n      <li  nz-submenu nzTitle=\"{{'lien_ket'| translate}}\" [(nzOpen)]=\"openMap.menu9\"\r\n        (nzOpenChange)=\"openHandler('menu9')\">\r\n        <app-link-page-config\r\n          [objectChoosing]=\"objectChoosing\" \r\n          [staticdata]=\"staticdata\"\r\n          [id_object]=\"objectChoosing._id\"\r\n          [dynamic_data]=\"objectChoosing.dynamic_data\"\r\n          [hasContact]=\"true\"\r\n          [blocks_of_page]=\"blocks_of_page\"\r\n        >\r\n        </app-link-page-config>\r\n      </li>\r\n      <!-- V\u0102N B\u1EA2N G\u1EE2I \u00DD -->\r\n      <li nz-submenu nzTitle=\"{{'van_ban_goi_y' | translate}}\" [(nzOpen)]=\"openMap.menu12\" (nzOpenChange)=\"openHandler('menu12')\">\r\n        <div class=\"editor-field my-0\">\r\n          <div class=\"editor-field-body\">\r\n            <div class=\"field-row my-0\">\r\n              <!-- N\u1ED9i dung ch\u1EEF -->\r\n              <div class=\"config-font\" style=\"width:100%\">\r\n                <mat-form-field style=\"width:100%\">\r\n                  <mat-label>{{'noi_dung' | translate}}</mat-label>\r\n                  <textarea style=\"height:80px;background: #edf6fd;\r\n                    padding:10px 6px;font-size:13px;border-top-left-radius:5px;\r\n                    border-top-right-radius:5px\" matInput [(ngModel)]=\"config['tooltip']\"\r\n                    (blur)=\"updateConfig()\"></textarea>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </li>\r\n      <!-- M\u00D4 T\u1EA2 N\u1ED8I DUNG C\u1EE6A \u1EA2NH -->\r\n      <li nz-submenu nzTitle=\"{{'mo_ta_noi_dung_cua_anh' | translate}}\" [(nzOpen)]=\"openMap.menu14\" (nzOpenChange)=\"openHandler('menu14')\">\r\n        <div class=\"editor-field my-0\">\r\n          <div class=\"editor-field-body\">\r\n            <div class=\"field-row my-0\">\r\n              <!-- N\u1ED9i dung ch\u1EEF -->\r\n              <div class=\"config-font\" style=\"width:100%\">\r\n                <mat-form-field style=\"width: 100%\" class=\"aria-label-input\" [matTooltip]=\"'*_giai_thich_aria_label' | translate\">\r\n                  <mat-label>{{'mo_ta_noi_dung_cua_anh' | translate}}</mat-label>\r\n                  <textarea matInput\r\n                    [ngModel]=\"staticdata.accessibility?.['img_alt_' + functionService.selectedLanguageCode]\"\r\n                    (ngModelChange)=\"staticdata.accessibility['img_alt_' + functionService.selectedLanguageCode] = $event\"\r\n                    (blur)=\"updateStaticData();\"></textarea>\r\n                </mat-form-field>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </li>\r\n    </ul>\r\n\r\n    <!-- <div *ngIf=\"loading\" style=\"position: absolute; left:0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); display: flex; justify-content: center; align-items: center\">\r\n\r\n    </div> -->\r\n  </div>\r\n  <!-- M\u1EDF r\u1ED9ng -->\r\n  <div class=\"view-more\" *ngIf=\"isViewAll\">\r\n    <!-- C\u1EA5u h\u00ECnh chi ti\u1EBFt vi\u1EC1n -->\r\n    <div class=\"view_more-border\" *ngIf=\"currentViewAll.index == 4\">\r\n      <app-borders-radius-config [elementChoosing]=\"objectChoosing\" [device]=\"device\" [class]=\"class\" [borderRadiusClass]=\"class['image__boundary--img']\"\r\n        [id_object]=\"objectChoosing._id\">\r\n      </app-borders-radius-config>\r\n    </div>\r\n\r\n    <!-- C\u1EA5u h\u00ECnh chi ti\u1EBFt hi\u1EC7u \u1EE9ng -->\r\n    <div class=\"editor_effect-hover\" *ngIf=\"currentViewAll.index == 6\">\r\n      <app-animations-config [elementChoosing]=\"objectChoosing\"  [device]=\"device\" [staticdata]=\"staticdata\" [id_object]=\"objectChoosing._id\"\r\n        [customize]=\"customize\"></app-animations-config>\r\n    </div>\r\n    <!-- M\u1EDF r\u1ED9ng h\u00ECnh d\u1EA1ng \u1EA3nh-->\r\n    <div class=\"editor-field-body p-0 mt-2\" *ngIf=\"currentViewAll.index == 7\">\r\n      <div class=\"editor-field-body\">\r\n        <div class=\"field-row\">\r\n          <!-- <div class=\"d-flex justify-content-between mt-2 align-items-start\">\r\n            <p class=\"font-weight-bold\">Hi\u1EC3n th\u1ECB tr\u1EE5c \u0111\u1ED1i t\u01B0\u1EE3ng</p>\r\n            <nz-switch [(ngModel)]=\"config.image.show_axis\" (ngModelChange)=\"updateConfig()\"></nz-switch>\r\n          </div> -->\r\n          <p style=\"font-weight: 500; font-size: 16px\">{{'lat_hinh'| translate}}</p>\r\n          <div class=\"field-row-sub\">\r\n            <div style=\"display: flex; gap: 4px; width: 100%\">\r\n              <span nz-button nzType=\"primary\" nzSize=\"default\" (click)=\"handleSetTransform('y')\" class=\"btn_transform\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\">\r\n                  <path fill=\"currentColor\"\r\n                    d=\"M15.97 15.25h-2.72c-5.3 0-9.5-2.15-9.5-4.5s4.2-4.5 9.5-4.5c3.03 0 5.82.7 7.62 1.86a.75.75 0 1 0 .81-1.26c-2.06-1.33-5.13-2.1-8.43-2.1-6.02 0-11 2.55-11 6s4.98 6 11 6h2.8l-2.3 2.3a.75.75 0 1 0 1.07 1.05l2.83-2.82c.68-.69.68-1.8 0-2.48l-2.83-2.83a.75.75 0 0 0-1.06 1.06l2.21 2.22z\">\r\n                  </path>\r\n                </svg>\r\n                <p class=\"m-0\">{{'ngang'| translate}}</p>\r\n              </span>\r\n              <button nz-button nzType=\"primary\" nzSize=\"default\" (click)=\"handleSetTransform('x')\"\r\n                class=\"btn_transform\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\">\r\n                  <path fill=\"currentColor\"\r\n                    d=\"M15.25 8.35v2.4c0 5.3-2.15 9.5-4.5 9.5s-4.5-4.2-4.5-9.5c0-3.03.7-5.82 1.86-7.62a.75.75 0 1 0-1.26-.81c-1.33 2.06-2.1 5.13-2.1 8.43 0 6.02 2.55 11 6 11s6-4.98 6-11V8.27l2.3 2.3A.75.75 0 1 0 20.1 9.5l-2.82-2.83a1.75 1.75 0 0 0-2.48 0L11.97 9.5a.75.75 0 1 0 1.06 1.06l2.22-2.22z\">\r\n                  </path>\r\n                </svg>\r\n                <p class=\"m-0\">{{'doc'| translate}}</p>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"field-row\">\r\n          <div class=\"item mt-2\" style=\"min-height: 32px\">\r\n            <p class=\"m-0\">{{'ngang'| translate}}</p>\r\n            <nz-input-number\r\n              [nzMin]=\"-360\"\r\n              [nzMax]=\"360\"\r\n              [(ngModel)]=\"config['transform'].transform_rotateY\"\r\n              (ngModelChange)=\"SetTransform()\"\r\n              (nzBlur)=\"updateClassAndConfig()\"\r\n            >\r\n            </nz-input-number>\r\n          </div>\r\n          <nz-slider\r\n            [nzMin]=\"-360\"\r\n            [nzMax]=\"360\"\r\n            [(ngModel)]=\"config['transform'].transform_rotateY\"\r\n            (nzOnAfterChange)=\"updateClassAndConfig()\"\r\n            (ngModelChange)=\"SetTransform()\"\r\n          >\r\n          </nz-slider>\r\n        </div>\r\n        <div class=\"field-row\">\r\n          <div class=\"item\" style=\"min-height: 32px\">\r\n            <p class=\"m-0\">{{'doc'| translate}}</p>\r\n            <nz-input-number\r\n              [nzMin]=\"-360\"\r\n              [nzMax]=\"360\"\r\n              [(ngModel)]=\"config['transform'].transform_rotateX\"\r\n              (ngModelChange)=\"SetTransform()\"\r\n              (nzBlur)=\"updateClassAndConfig()\"\r\n            >\r\n            </nz-input-number>\r\n          </div>\r\n          <nz-slider\r\n            [nzMin]=\"-360\"\r\n            [nzMax]=\"360\"\r\n            [(ngModel)]=\"config['transform'].transform_rotateX\"\r\n            (nzOnAfterChange)=\"updateClassAndConfig()\"\r\n            (ngModelChange)=\"SetTransform()\"\r\n          >\r\n          </nz-slider>\r\n        </div>\r\n      </div>\r\n      <br />\r\n      <!-- Xoay h\u00ECnh \u1EA3nh -->\r\n      <div class=\"editor-field-body\">\r\n        <div class=\"field-row mb-3\">\r\n          <div style=\"justify-content: space-between; align-items: center\">\r\n            <p class=\"mt-1\" style=\"font-weight: 500; font-size: 16px\">\r\n              {{'xoay_hinh'| translate}}\r\n            </p>\r\n            <div style=\"display: flex; justify-content: space-between; gap: 4px\">\r\n              <button class=\"btn_transform\" nz-button nzType=\"primary\" nzSize=\"default\"\r\n                (click)=\"handleSetTransform('-z')\">\r\n                <span nz-icon nzType=\"rotate-left\" nzTheme=\"outline\"></span>\r\n                <p class=\"m-0\">{{'trai'| translate}}</p>\r\n              </button>\r\n              <button nz-button nzType=\"primary\" nzSize=\"default\" class=\"btn_transform\"\r\n                (click)=\"handleSetTransform('z')\">\r\n                <span nz-icon nzType=\"rotate-right\" nzTheme=\"outline\"></span>\r\n                <p class=\"m-0\">{{'phai'| translate}}</p>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"field-row\">\r\n          <div class=\"item\" styl=\"min-height: 32px\">\r\n            <p class=\"m-0\">{{'xoay'| translate}}</p>\r\n            <nz-input-number\r\n              [nzMin]=\"-360\"\r\n              [nzMax]=\"360\"\r\n              [(ngModel)]=\"config['transform'].transform_rotateZ\"\r\n              (ngModelChange)=\"SetTransform()\"\r\n              (nzBlur)=\"updateClassAndConfig()\"\r\n              >\r\n            </nz-input-number>\r\n          </div>\r\n          <nz-slider\r\n            [nzMin]=\"-360\"\r\n            [nzMax]=\"360\"\r\n            [(ngModel)]=\"config['transform'].transform_rotateZ\"\r\n            (nzOnAfterChange)=\"updateClassAndConfig()\"\r\n            (ngModelChange)=\"SetTransform()\">\r\n          </nz-slider>\r\n        </div>\r\n      </div>\r\n      <br />\r\n      <!-- C\u1EA5u h\u00ECnh \u0110\u1ED9 nghi\u00EAng -->\r\n      <div class=\"editor-field-body\">\r\n        <div class=\"field-row mb-3\">\r\n          <div class=\"item\">\r\n            <p class=\"m-0\" style=\"font-weight: 500; font-size: 16px\">\r\n              {{'do_nghieng'| translate}}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div class=\"field-row\">\r\n          <div class=\"item\" style=\"min-height: 32px\">\r\n            <p class=\"m-0\">{{'ngang'| translate}}</p>\r\n            <nz-input-number\r\n              [nzMin]=\"-360\"\r\n              [nzMax]=\"360\"\r\n              [(ngModel)]=\"config['transform'].transform_skewY\"\r\n              (ngModelChange)=\"SetTransform()\"\r\n              (nzBlur)=\"updateClassAndConfig()\"\r\n              >\r\n            </nz-input-number>\r\n          </div>\r\n          <nz-slider\r\n            [nzMin]=\"-360\"\r\n            [nzMax]=\"360\"\r\n            [(ngModel)]=\"config['transform'].transform_skewY\"\r\n            (nzOnAfterChange)=\"updateClassAndConfig()\"\r\n            (ngModelChange)=\"SetTransform()\"\r\n            >\r\n          </nz-slider>\r\n        </div>\r\n        <div class=\"field-row\">\r\n          <div class=\"item\" style=\"min-height: 32px\">\r\n            <p class=\"m-0\">{{'doc'| translate}}</p>\r\n            <nz-input-number\r\n              [nzMin]=\"-360\"\r\n              [nzMax]=\"360\"\r\n              [(ngModel)]=\"config['transform'].transform_skewX\"\r\n              (ngModelChange)=\"SetTransform()\"\r\n              (nzBlur)=\"updateClassAndConfig()\"\r\n            >\r\n            </nz-input-number>\r\n          </div>\r\n          <nz-slider\r\n            [nzMin]=\"-360\"\r\n            [nzMax]=\"360\"\r\n            [(ngModel)]=\"config['transform'].transform_skewX\"\r\n            (nzOnAfterChange)=\"updateClassAndConfig()\"\r\n            (ngModelChange)=\"SetTransform()\"\r\n          >\r\n          </nz-slider>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- M\u1EDF r\u1ED9ng c\u1EA5u h\u00ECnh \u0111\u1ED9 bao ph\u1EE7 -->\r\n    <div class=\"editor-field-body p-1\" *ngIf=\"currentViewAll.index == 3\">\r\n      <div class=\"field-row\">\r\n        <div class=\"field-row-sub\">\r\n          <p class=\"m-0\" style=\"font-weight: 500; font-size: 16px\">\r\n            {{'vi_tri_hinh_anh'| translate}}\r\n          </p>\r\n        </div>\r\n      </div>\r\n      <div class=\"field-row\">\r\n        <div class=\"d-flex justify-content-between py-1\">\r\n          <p class=\"m-0\">{{'ngang'| translate}}</p>\r\n          <nz-input-number [(ngModel)]=\"config.image.object_x\" [nzMin]=\"0\" [nzStep]=\"1\"\r\n            (ngModelChange)=\"handleSetPositionImage()\"></nz-input-number>\r\n        </div>\r\n      </div>\r\n      <div class=\"field-row\">\r\n        <div class=\"d-flex justify-content-between py-1\">\r\n          <p class=\"m-0\">{{'doc'| translate}}</p>\r\n          <nz-input-number [(ngModel)]=\"config.image.object_y\" [nzMin]=\"0\" [nzStep]=\"1\"\r\n            (ngModelChange)=\"handleSetPositionImage()\"></nz-input-number>\r\n        </div>\r\n      </div>\r\n      <div class=\"field-row mt-2\">\r\n        <div class=\"field-row-sub\">\r\n          <p class=\"m-0\" style=\"font-weight: 500; font-size: 16px\">\r\n            {{'phong_thu_hinh_anh'| translate}}\r\n          </p>\r\n        </div>\r\n      </div>\r\n      <div class=\"field-row\">\r\n        <div class=\"d-flex justify-content-between py-1\">\r\n          <p class=\"m-0\">{{'do_co_gian'| translate}}</p>\r\n        </div>\r\n        <nz-slider [(ngModel)]=\"class['image__boundary--img'].transfrom_scale\" (nzOnAfterChange)=\"scale()\"\r\n          (ngModelChange)=\"(class['image__boundary--img'].transfrom_scale)\" [nzMin]=\"0.1\" [nzMax]=\"2\"\r\n          [nzStep]=\"0.1\"></nz-slider>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <nz-modal nzTitle=\"{{ 'chuyen_anh_len_server' | translate}}\" [(nzVisible)]=\"isShowConfirmPopup\" [nzContent]=\"modalContent\"\r\n    (nzOnCancel)=\"handleCancelConfirm()\" (nzOnOk)=\"handleOkConfirm()\" [nzFooter]=\"modalFooter\">\r\n    <ng-template #modalContent>\r\n      <p>{{'nen_anh_tai_len' | translate}}</p>\r\n      <nz-select style=\"margin-bottom: 15px\" [(ngModel)]=\"objectChoosing.setups.upload_image.compress_type\"  (ngModelChange)=\"updateSetups()\"\r\n        nzPlaceHolder=\"{{'nen_anh_tai_len' | translate}}\" nzAllowClear>\r\n        <nz-option [nzValue]=\"'no-compress'\" nzLabel=\"{{'khong_nen_anh_sau_khi_tai_len' | translate}}\"></nz-option>\r\n        <nz-option [nzValue]=\"'compress-screen'\" nzLabel=\"{{'nen_anh_theo_ti_le_man_hinh_hien_thi' | translate}}\"></nz-option>\r\n        <nz-option [nzValue]=\"'compress-frame'\" nzLabel=\"{{'nen_anh_theo_ti_le_khung_hien_thi_anh' | translate}}\"></nz-option>\r\n        <nz-option [nzValue]=\"'custom'\" nzLabel=\"{{'nen_anh_theo_kich_thuoc_tu_chon' | translate}}\"></nz-option>\r\n      </nz-select>\r\n\r\n      <mat-form-field *ngIf=\"objectChoosing.setups.upload_image.compress_type == 'custom'\" class=\"mr-4\">\r\n        <mat-label>{{'chieu_rong' | translate}}</mat-label>\r\n        <input matInput placeholder=\"{{'chieu_rong' | translate}}\" [ngModel]=\"objectChoosing.setups.upload_image.compress_width\"\r\n        (ngModelChange)=\"objectChoosing.setups.upload_image.compress_width = $event\" (blur)=\"updateSetups()\">\r\n      </mat-form-field>\r\n\r\n      <mat-form-field *ngIf=\"objectChoosing.setups.upload_image.compress_type == 'custom'\">\r\n        <mat-label>{{'chieu_cao' | translate}}</mat-label>\r\n        <input matInput placeholder=\"{{'chieu_cao' | translate}}\" [ngModel]=\"objectChoosing.setups.upload_image.compress_height\"\r\n        (ngModelChange)=\"objectChoosing.setups.upload_image.compress_height = $event\" (blur)=\"updateSetups()\">\r\n      </mat-form-field>\r\n    </ng-template>\r\n    <ng-template #modalFooter>\r\n      <button nz-button nzType=\"default\" (click)=\"handleCancelConfirm()\">{{'khong' | translate}}</button>\r\n      <button nz-button nzType=\"primary\" (click)=\"handleOkConfirm()\" [nzLoading]=\"isConfirmLoading\">{{'dong_y' | translate}}</button>\r\n    </ng-template>\r\n  </nz-modal>\r\n</div>\r\n", styles: [".image-editor::ng-deep .ant-menu-submenu-title{padding:0!important}.image-editor::ng-deep .ant-menu.ant-menu-root.ant-menu-light.ant-menu-inline{padding:0!important}.image-editor::ng-deep .mat-form-field{width:100%}.image-editor::ng-deep .mat-form-field-underline{bottom:0;position:relative;margin-bottom:.5rem}.image-editor::ng-deep .mat-form-field-wrapper{padding-bottom:0}*{font-size:14px}.ant-radio-input{z-index:0}.title{line-height:1.5}.custom-device{display:flex;justify-content:space-between;align-items:center;padding:7px 0}.custom-textarea{min-height:150px!important}.upload-background-image{width:100%;text-align:center;padding:12px;background-color:var(--ion-color-primary);color:#fff;border-radius:12px}.btn_transform{display:flex;grid-gap:4px;gap:4px;align-items:center;min-width:48%;justify-content:center;background-color:#018848;color:#f5f5f5}.custom{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;padding:5px 0}.input-number{padding:5px!important;border:1px solid #ddd!important;outline:none!important;width:40%!important;border-radius:3px!important}nz-input-number{width:40%;max-height:30px}.view{padding:5px;display:flex;align-items:center;justify-content:flex-end;grid-gap:7px;gap:7px}.item{display:flex;align-items:center;justify-content:space-between}.main{padding:5px;margin-top:10px;line-height:1}.main .item{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.main .hidden-text{margin:0;font-size:14px}.main .title-font{font-size:14px}.main nz-select{width:100px!important}.main label{display:flex;align-items:center;margin-bottom:10px;margin-right:0}.main label span.ant-radio+*{padding-right:0!important}::ng-deep span.ant-radio+*{width:100%}.w-mat-input{width:120px;overflow:hidden}.upload-background-image{display:flex;justify-content:center;align-items:center;padding:16px 18px;grid-gap:5px;gap:5px;background-color:var(--ion-color-primary);color:#fff;margin-right:-8px;border-radius:12px}.disable{opacity:.5}.field-row__switch{display:flex;width:100%;justify-content:space-around;padding:10px 0}.image-editor{background-color:#fff;height:100%;overflow:auto;overflow-x:hidden}.image-editor::-webkit-scrollbar{width:0px}.image-editor::-webkit-scrollbar-track{background:white}.image-editor::-webkit-scrollbar-thumb{background:#888}.image-editor::-webkit-scrollbar-thumb:hover{background:#555;opacity:.5}.image-editor .editor-header{height:40px;border-bottom:1px solid #ddd;display:flex;align-items:center;padding:0 5px;text-transform:uppercase;grid-gap:7px;gap:7px}.image-editor .editor-header span{font-size:13px}.image-editor .editor-header i{font-size:16px}.image-editor .editor-header span,.image-editor .editor-header i{cursor:pointer}.image-editor .upload-image{margin-top:5px}.image-editor .upload-image .switch-image .title{line-height:14px;align-items:baseline}.image-editor .upload-image .upload-image-device{width:100%}.image-editor .upload-image .upload-image-device button{width:100%;padding:10px 0;border-radius:2px}.image-editor .upload-image .upload-image-device button:hover{background-color:#fff!important;color:var(--ion-color-vh-green);border:1px solid var(--ion-color-vh-green)}.image-editor .editor-content li .upload-image{padding:5px}.image-editor .editor-content .editor-field{padding:10px 5px}.image-editor .editor-content .editor-field .editor-field-header{display:flex;justify-content:space-between}.image-editor .editor-content .editor-field .editor-field-header p:nth-child(1){font-weight:500;font-size:16px}.image-editor .editor-content .box-shadow .list-box{width:100%}.image-editor .editor-content .box-shadow .list-box .box{flex-basis:calc(33.333% - 6px);min-width:calc(33.333% - 6px);max-width:calc(33.333% - 3px)}.image-editor .editor-content .field-row{margin-bottom:14px}.image-editor .editor-content .field-row .field-row-sub{display:flex;justify-content:space-between;align-items:center}.image-editor .editor-content .field-row .field-row-sub .title{line-height:16px}.image-editor .editor-content .field-row .field-row-sub nz-input-number{width:40%}.image-editor .editor-content .field-row .field-content{display:flex;flex-wrap:wrap;grid-gap:8px;gap:8px;margin-right:-8px}.image-editor .editor-content .field-row .field-content .image-fit,.image-editor .editor-content .field-row .field-content .image-hover{flex-basis:calc(33.333% - 8px);width:calc(33.333% - 8px);flex-shrink:1;border:1px solid #ddd;cursor:pointer;transition:.2s;overflow:hidden}.image-editor .editor-content .field-row .field-content .image-fit:hover,.image-editor .editor-content .field-row .field-content .image-hover:hover{box-shadow:#0000003d 0 3px 8px;transition:.2s}.image-editor .editor-content .field-row .field-content .image-fit p,.image-editor .editor-content .field-row .field-content .image-hover p{height:25%;display:flex;align-items:center;margin:0;justify-content:center}.image-editor .editor-content .field-row .field-content .image-fit img,.image-editor .editor-content .field-row .field-content .image-hover img{width:100%;height:75%}.image-editor .editor-content .field-row .field-content .image-hover{border:none;position:relative}.image-editor .editor-content .field-row .field-content .image-hover:hover{box-shadow:none;transition:.2s}.image-editor .field-content-slide{padding:10px 0}.image-editor .field-content-slide .field-content-inner{display:flex;flex-wrap:wrap;grid-gap:8px;gap:8px;width:auto;margin-right:-8px}.image-editor .field-content-slide .field-content-inner .image-item{flex-basis:calc(33.333% - 8px);min-width:calc(33.333% - 8px);padding:10px;border:1px solid #ddd;cursor:pointer;transition:.2s;border-radius:6px;overflow:hidden}.image-editor .field-content-slide .field-content-inner .image-item:hover{box-shadow:#0000003d 0 3px 8px;transition:.2s}.image-editor .field-content-slide .field-content-inner .image-item p{height:25%;display:flex;align-items:center;margin:0;justify-content:center}.image-editor .field-content-slide .field-content-inner .image-item img{width:100%;height:75%}.image-editor .field-content-slide .field-content-inner .image-hover-item{flex-basis:calc(50% - 8px);min-width:calc(50% - 8px);height:150px;border:1px solid #ddd;cursor:pointer;transition:.2s;border-radius:6px;overflow:hidden}.image-editor .field-content-slide .field-content-inner .image-hover-item p{height:25%;display:flex;align-items:center;margin:0;justify-content:center}.image-editor .field-content-slide .field-content-inner .image-hover-item img{width:40%;height:40%}.layer-index{display:flex;align-items:center;justify-content:space-between}.layer-index .title{margin:0}.hover-content .hover-effects{display:flex}.field-content .field-content-inner{display:flex;flex-wrap:wrap;grid-gap:8px;gap:8px;width:auto;margin-right:-8px}.field-content .field-content-inner .image-item{flex-basis:calc(50% - 8px);min-width:calc(50% - 8px);height:0;border:1px solid #ddd;cursor:pointer;transition:.2s;border-radius:6px;overflow:hidden}.field-content .field-content-inner .image-item p{height:25%;display:flex;align-items:center;margin:0;justify-content:center}.selected{border:2px solid var(--ion-color-vh-green)!important}.checkbox-border span{color:red!important}.disabled{pointer-events:none;opacity:.3!important}[nz-select]{margin:0 8px 10px 0}[nz-menu]{border:none!important}.btn-more:hover{color:var(--ion-color-vh-green)}.hover-zoom-in{transition:.3s}.hover-zoom-in:hover{transition:.3s}.hover-zoom-out{transition:.3s}.hover-zoom-out:hover{transform:scale(.8)!important;transition:.3s}.hover-drop-shadow{transition:.3s}.hover-drop-shadow:hover{box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px!important;transition:.3s}.hover-opacity{transition:.3s opacity!important}.hover-opacity:hover{opacity:.6;transition:.3s opacity!important}.hover-border{transition:.3s border!important}.hover-border:hover{border:2px solid #333!important;transition:.3s border!important}.square{position:relative;width:100%;overflow:hidden}.square .content{position:absolute;width:100%;height:100%;top:0;left:0}.square:after{content:\"\";display:block;padding-bottom:100%!important}.list-box{grid-gap:4px;gap:4px;flex-wrap:wrap;display:flex}.list-box .box{flex-basis:calc(50% - 6px);min-width:calc(50% - 6px);max-width:calc(50% - 3px);margin-bottom:40px;position:relative;width:100%;display:flex;background-color:#ffa64d}.list-box .box .content-icon{margin:auto 0;color:#fff}.list-box .box .btn-setting{margin:auto;color:#fff}.list-box .box .box-item{position:relative;border:2px solid white;display:flex;background-color:#ffa64d}.list-box .box .box-item img{width:100%;height:100%}.list-box .box .box-name{position:absolute;width:100%;height:30px;bottom:-30px;display:flex;align-items:center;justify-content:center}.ant-drawer-body:ng-deep{padding:0!important}.hideLink{visibility:hidden;opacity:0;transition:visibility 0s linear .3s,opacity .3s}.showLink{visibility:visible;opacity:1;transition:visibility 0s linear 0s,opacity .3s}.button-hover{animation:name duration timing-function delay iteration-count direction fill-mode;margin-bottom:32px;padding:10px 5px;display:flex;flex-wrap:wrap;grid-gap:10px;gap:10px}.button-hover .effect-button{position:relative;background-color:#e5e5e5;text-align:center;height:40px;border-radius:5px}.button-hover .effect-button button{overflow:hidden;width:100%;height:100%;background-color:#e5e5e5;border-radius:5px;text-align:center;display:flex;justify-content:center;align-items:center}.button-hover .active{border:2px solid #00a859;border-radius:5px;min-width:55px;min-height:60px}.button-hover .effect_zoom_button{width:100%;height:34px;border:2px solid #e5e5e5;border-radius:5px;transform:scale(1);transition:.24s all ease-in-out}.button-hover .effect_zoom_button:hover{border:2px solid #00a859;border-radius:5px;transform:scale(1.1)}.button-hover .effect_blur_button{width:100%;height:34px;border:2px solid #e5e5e5;border-radius:5px;transition:.24s all ease-in-out}.button-hover .effect_blur_button:hover{opacity:.6;border:2px solid #00a859}.button-hover .effect_change_color_button{width:100%;height:34px;border:2px solid #e5e5e5;border-radius:5px;transition:.24s all ease-in-out}.button-hover .effect_change_color_button:hover{background-color:#00a859;color:#fff}.button-hover .effect_shadow{width:100%;height:34px;border:2px solid #e5e5e5;border-radius:5px;transition:.24s all ease-in-out}.button-hover .effect_shadow:hover{filter:drop-shadow(0 0 .1rem #00a859)}.button-hover .effect_movotion{position:relative;width:100%;height:34px;border:2px solid #e5e5e5;border-radius:5px;z-index:0}.button-hover .effect_movotion:before{content:\"\";background:#00a859;z-index:-1;height:50%;width:0;position:absolute;top:0;left:0;transition:.3s cubic-bezier(.785,.135,.15,.86)}.button-hover .effect_movotion:after{content:\"\";background:#00a859;z-index:-1;height:50%;width:0;position:absolute;bottom:0;right:0;transition:.3s cubic-bezier(.785,.135,.15,.86)}.button-hover .effect_movotion:hover:before{width:100%}.button-hover .effect_movotion:hover:after{width:100%}.button-hover .effect_movotion:hover{color:#fff}.button-hover .selected{border:2px solid #00a859;border-radius:5px}.label-item{width:100%;cursor:pointer}.label-item input{width:30px}.item-border{padding:0 5px;display:flex;align-items:center;justify-content:space-between;margin-top:10px}.widget-button{padding:5px;background:none}.widget-button:hover{background:#c6c6c6}.widget-button.active{background:#c6c6c6}.item-border-size{padding:5px}.item-border-size .row-border{display:flex;align-items:center;justify-content:space-between;margin-top:10px}.color-pick{display:flex;justify-content:space-around;align-items:center}.input-color{border:1px solid #ccc;outline:none;cursor:pointer;width:80px;height:30px;border-radius:5px;caret-color:transparent;padding:12px 0}.item-border-radius{margin-top:10px;padding:5px}.item-border-radius-top-left,.item-border-radius-top-right,.item-border-radius-bottom-left,.item-border-radius-bottom-right{padding:5px}.slide-bar{display:flex;align-items:center;justify-content:space-between}.cursor-pointer{cursor:pointer}.config-name{display:flex;justify-content:space-between;align-items:center;grid-gap:5px;gap:5px;margin:15px 0}.config-name p{margin:0;line-height:1.5;flex:1}.config-name>nz-input-number,.config-name>input,.config-name>nz-select{width:40%}.drop-zone{border:4px dashed #212121;border-radius:8px;padding:10px;text-align:center;background-color:#414141cc;color:#ccc;transition:border-color .3s,background-color .3s;cursor:pointer;position:relative}.drop-zone.dragging{border-color:#66b29d;background-color:#2b4a46}.drop-zone label{cursor:pointer;display:inline-block;margin-bottom:0!important}.drop-zone label mat-icon{font-size:40px;width:40px;height:40px;margin-bottom:5px;color:#fff}.drop-zone label p{font-size:14px;margin:0}.drop-zone label span{color:#00bfff;text-decoration:underline}.drop-zone .preview img{max-width:100%;max-height:200px;border-radius:8px}.drop-zone .button-list{position:absolute;top:5px;right:5px;display:flex;grid-gap:3px;gap:3px}.drop-zone .button-list button{padding:4px;border-radius:100px;background:#00a859;color:#fff}.drop-zone .button-list button mat-icon{display:flex;justify-content:center;align-items:center}.img-info__text{line-height:1.4;margin-bottom:6px}.highlight{color:#00a859;font-weight:500;font-size:16px}.aria-label-input mat-label{display:flex;grid-gap:8px;gap:8px;font-size:16px}.aria-label-input mat-label mat-icon{font-size:16px}::ng-deep .mat-tooltip{font-size:14px!important;text-align:justify!important;white-space:pre-line!important;max-width:300px!important}\n"], components: [{ type: i10.NzSwitchComponent, selector: "nz-switch", inputs: ["nzLoading", "nzDisabled", "nzControl", "nzCheckedChildren", "nzUnCheckedChildren", "nzSize"], exportAs: ["nzSwitch"] }, { type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i6$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i12$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { type: i3$1.LinkPageComponent, selector: "app-link-page-config", inputs: ["objectChoosing", "staticdata", "linkStaticdata", "id_object", "blocks_of_page", "dynamic_data", "type_page", "type_contact", "hasContact"] }, { type: i5$5.NzSubMenuComponent, selector: "[nz-submenu]", inputs: ["nzMenuClassName", "nzPaddingLeft", "nzTitle", "nzIcon", "nzOpen", "nzDisabled"], outputs: ["nzOpenChange"], exportAs: ["nzSubmenu"] }, { type: i3$1.HideShowConfigComponent, selector: "app-hide-show-config", inputs: ["device", "isBlock", "elementChoosing"] }, { type: i3$1.BrightnessContrastConfigComponent, selector: "app-brightness-contrast-config", inputs: ["id_object", "device", "class", "config", "staticdata", "filterConfig", "opacityClass", "type", "elementChoosing"] }, { type: i3$1.ObjectFitConfigComponent, selector: "app-object-fit-config", inputs: ["class", "type", "objectFitClass", "style_field", "device", "objectChoosing"], outputs: ["isViewAll"] }, { type: i3$1.BordersConfigComponent, selector: "app-borders-config", inputs: ["elementChoosing", "class", "borderClass", "device", "isBlock", "id_object", "isPage"], outputs: ["isCloseConfig"] }, { type: i6$2.NzInputNumberComponent, selector: "nz-input-number", inputs: ["nzSize", "nzMin", "nzMax", "nzParser", "nzPrecisionMode", "nzPlaceHolder", "nzStep", "nzInputMode", "nzId", "nzDisabled", "nzAutoFocus", "nzFormatter", "nzPrecision"], outputs: ["nzBlur", "nzFocus"], exportAs: ["nzInputNumber"] }, { type: i8$1.NzSliderComponent, selector: "nz-slider", inputs: ["nzDisabled", "nzDots", "nzIncluded", "nzRange", "nzVertical", "nzReverse", "nzMarks", "nzMax", "nzMin", "nzStep", "nzTooltipVisible", "nzTooltipPlacement", "nzDefaultValue", "nzTipFormatter"], outputs: ["nzOnAfterChange"], exportAs: ["nzSlider"] }, { type: i3$1.ChooseAnimationsConfigComponent, selector: "app-choose-animations-config", inputs: ["elementChoosing", "type", "id_object", "device", "class", "config", "staticdata", "cursorClass", "cursorClass2", "titleCursor", "effect_hover", "customize", "isBlock", "isParent", "isShowDialogChooseAnimation", "effectFileUsing", "conditionShowSelectEffect"], outputs: ["openAnimationDetail", "openAnimationDetailChild"] }, { type: i3$1.BordersRadiusConfigComponent, selector: "app-borders-radius-config", inputs: ["elementChoosing", "class", "borderRadiusClass", "device", "id_object", "isBlock", "isPage"] }, { type: i3$1.AnimationsConfigComponent, selector: "app-animations-config", inputs: ["staticdata", "elementChoosing", "config", "device", "id_object", "customize", "type", "isPage", "isBlock", "isParent"] }, { type: i4$1.NzModalComponent, selector: "nz-modal", inputs: ["nzVisible", "nzClosable", "nzOkLoading", "nzOkDisabled", "nzCancelDisabled", "nzCancelLoading", "nzKeyboard", "nzNoAnimation", "nzCentered", "nzZIndex", "nzWidth", "nzCloseIcon", "nzOkType", "nzOkDanger", "nzIconType", "nzModalType", "nzAutofocus", "nzOnOk", "nzOnCancel", "nzTitle", "nzFooter", "nzMask", "nzMaskClosable", "nzCloseOnNavigation", "nzContent", "nzComponentParams", "nzWrapClassName", "nzClassName", "nzStyle", "nzMaskStyle", "nzBodyStyle", "nzOkText", "nzCancelText"], outputs: ["nzOnOk", "nzOnCancel", "nzAfterOpen", "nzAfterClose", "nzVisibleChange"], exportAs: ["nzModal"] }, { type: i6$1.NzSelectComponent, selector: "nz-select", inputs: ["nzId", "nzSize", "nzOptionHeightPx", "nzOptionOverflowSize", "nzDropdownClassName", "nzDropdownMatchSelectWidth", "nzDropdownStyle", "nzNotFoundContent", "nzPlaceHolder", "nzMaxTagCount", "nzDropdownRender", "nzCustomTemplate", "nzSuffixIcon", "nzClearIcon", "nzRemoveIcon", "nzMenuItemSelectedIcon", "nzTokenSeparators", "nzMaxTagPlaceholder", "nzMaxMultipleCount", "nzMode", "nzFilterOption", "compareWith", "nzAllowClear", "nzBorderless", "nzShowSearch", "nzLoading", "nzAutoFocus", "nzAutoClearSearchValue", "nzServerSearch", "nzDisabled", "nzOpen", "nzBackdrop", "nzOptions", "nzShowArrow"], outputs: ["nzOnSearch", "nzScrollToBottom", "nzOpenChange", "nzBlur", "nzFocus"], exportAs: ["nzSelect"] }, { type: i6$1.NzOptionComponent, selector: "nz-option", inputs: ["nzLabel", "nzValue", "nzDisabled", "nzHide", "nzCustomContent"], exportAs: ["nzOption"] }], directives: [{ type: i12$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i21.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitleContext", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipTitle", "nz-tooltip", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.MatLabel, selector: "mat-label" }, { type: i15.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i17.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { type: i14.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { type: i5$5.NzMenuDirective, selector: "[nz-menu]", inputs: ["nzInlineIndent", "nzTheme", "nzMode", "nzInlineCollapsed", "nzSelectable"], outputs: ["nzClick"], exportAs: ["nzMenu"] }, { type: i18.NzIconDirective, selector: "[nz-icon]", inputs: ["nzRotate", "nzSpin", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { type: i16$2.ColorPickerDirective, selector: "[colorPicker]", inputs: ["cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpPresetLabel", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "colorPicker", "cpPresetColors"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "translate": i12$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AtwImageAdminConfig, decorators: [{
             type: Component,
             args: [{
@@ -54957,7 +55460,7 @@ class AtwSelectAdmin {
     }
 }
 AtwSelectAdmin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AtwSelectAdmin, deps: [{ token: i1.VhQueryAutoWeb }], target: i0.ɵɵFactoryTarget.Component });
-AtwSelectAdmin.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AtwSelectAdmin, selector: "atw-select-admin", inputs: { data: "data", type: "type", staticdata: "staticdata" }, ngImport: i0, template: "<div>\r\n  <button *ngIf=\"type == 'page'\" class=\"btn-add mb-2\" (click)=\"addData()\">\r\n    <span>{{'them_du_lieu_moi' | translate}}</span>\r\n    <span class=\"ml-1\" nz-icon nzType=\"plus-circle\" nzTheme=\"outline\"></span>\r\n  </button>\r\n  <nz-table #editRowTable nzBordered [nzData]=\"staticdata.data_list\" [nzShowPagination]=\"false\"\r\n    [nzScroll]=\"{ x: '643px', y: '400px' }\">\r\n    <thead>\r\n      <tr>\r\n        <th nzWidth=\"40%\">{{'nhan' | translate}}</th>\r\n        <th nzWidth=\"40%\">{{'gia_tri' | translate}}</th>\r\n        <th nzWidth=\"20%\" nzRight>{{'thao_tac' | translate}}</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr *ngFor=\"let data of editRowTable.data\">\r\n        <td><input type=\"text\" nz-input [(ngModel)]=\"data.label\" (blur)=\"updateStaticData()\" /></td>\r\n        <td><input type=\"text\" nz-input [(ngModel)]=\"data.value\" (blur)=\"updateStaticData()\" /></td>\r\n        <td nzRight>\r\n          <span style=\"color: red\" nz-icon nzType=\"delete\" nzTheme=\"outline\" nz-popconfirm\r\n            [nzPopconfirmTitle]=\"'xac_nhan_xoa' | translate\" [nzOkText]=\"'dong_y' | translate\"\r\n            [nzCancelText]=\"'huy' | translate\" (nzOnConfirm)=\"deleteRow(data._id)\"></span>\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </nz-table>\r\n</div>", styles: [".btn-add{padding:.7rem 1rem;background-color:var(--ion-color-vh-pink);color:#fff;display:flex;justify-content:center;align-items:center;grid-gap:.5rem;gap:.5rem}\n"], components: [{ type: i7.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzPaginationPosition", "nzScroll", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange"], exportAs: ["nzTable"] }, { type: i7.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { type: i7.NzTbodyComponent, selector: "tbody" }], directives: [{ type: i12$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i18.NzIconDirective, selector: "[nz-icon]", inputs: ["nzRotate", "nzSpin", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { type: i14.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { type: i7.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { type: i7.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { type: i7.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { type: i7.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { type: i12$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "disabled"], exportAs: ["nzInput"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i22.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus", "nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nz-popconfirm", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDanger", "nzCancelText", "nzIcon"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }], pipes: { "translate": i12$2.TranslatePipe } });
+AtwSelectAdmin.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AtwSelectAdmin, selector: "atw-select-admin", inputs: { data: "data", type: "type", staticdata: "staticdata" }, ngImport: i0, template: "<div>\r\n  <button *ngIf=\"type == 'page'\" class=\"btn-add mb-2\" (click)=\"addData()\">\r\n    <span>{{'them_du_lieu_moi' | translate}}</span>\r\n    <span class=\"ml-1\" nz-icon nzType=\"plus-circle\" nzTheme=\"outline\"></span>\r\n  </button>\r\n  <nz-table #editRowTable nzBordered [nzData]=\"staticdata.data_list\" [nzShowPagination]=\"false\"\r\n    [nzScroll]=\"{ x: '643px', y: '400px' }\">\r\n    <thead>\r\n      <tr>\r\n        <th nzWidth=\"40%\">{{'nhan' | translate}}</th>\r\n        <th nzWidth=\"40%\">{{'gia_tri' | translate}}</th>\r\n        <th nzWidth=\"20%\" nzRight>{{'thao_tac' | translate}}</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr *ngFor=\"let data of editRowTable.data\">\r\n        <td><input type=\"text\" nz-input [(ngModel)]=\"data.label\" (blur)=\"updateStaticData()\" /></td>\r\n        <td><input type=\"text\" nz-input [(ngModel)]=\"data.value\" (blur)=\"updateStaticData()\" /></td>\r\n        <td nzRight>\r\n          <span style=\"color: red\" nz-icon nzType=\"delete\" nzTheme=\"outline\" nz-popconfirm\r\n            [nzPopconfirmTitle]=\"'xac_nhan_xoa' | translate\" [nzOkText]=\"'dong_y' | translate\"\r\n            [nzCancelText]=\"'huy' | translate\" (nzOnConfirm)=\"deleteRow(data._id)\"></span>\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </nz-table>\r\n</div>", styles: [".btn-add{padding:.7rem 1rem;background-color:var(--ion-color-vh-pink);color:#fff;display:flex;justify-content:center;align-items:center;grid-gap:.5rem;gap:.5rem}\n"], components: [{ type: i7.NzTableComponent, selector: "nz-table", inputs: ["nzTableLayout", "nzShowTotal", "nzItemRender", "nzTitle", "nzFooter", "nzNoResult", "nzPageSizeOptions", "nzVirtualItemSize", "nzVirtualMaxBufferPx", "nzVirtualMinBufferPx", "nzVirtualForTrackBy", "nzLoadingDelay", "nzPageIndex", "nzPageSize", "nzTotal", "nzWidthConfig", "nzData", "nzPaginationPosition", "nzScroll", "nzPaginationType", "nzFrontPagination", "nzTemplateMode", "nzShowPagination", "nzLoading", "nzOuterBordered", "nzLoadingIndicator", "nzBordered", "nzSize", "nzShowSizeChanger", "nzHideOnSinglePage", "nzShowQuickJumper", "nzSimple"], outputs: ["nzPageSizeChange", "nzPageIndexChange", "nzQueryParams", "nzCurrentPageDataChange"], exportAs: ["nzTable"] }, { type: i7.NzTheadComponent, selector: "thead:not(.ant-table-thead)", outputs: ["nzSortOrderChange"] }, { type: i7.NzTbodyComponent, selector: "tbody" }], directives: [{ type: i12$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i18.NzIconDirective, selector: "[nz-icon]", inputs: ["nzRotate", "nzSpin", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { type: i14.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { type: i7.NzTrDirective, selector: "tr:not([mat-row]):not([mat-header-row]):not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])" }, { type: i7.NzTableCellDirective, selector: "th:not(.nz-disable-th):not([mat-cell]), td:not(.nz-disable-td):not([mat-cell])" }, { type: i7.NzThMeasureDirective, selector: "th", inputs: ["nzWidth", "colspan", "colSpan", "rowspan", "rowSpan"] }, { type: i7.NzCellFixedDirective, selector: "td[nzRight],th[nzRight],td[nzLeft],th[nzLeft]", inputs: ["nzRight", "nzLeft", "colspan", "colSpan"] }, { type: i12$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "disabled"], exportAs: ["nzInput"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i24.NzPopconfirmDirective, selector: "[nz-popconfirm]", inputs: ["nzPopconfirmTrigger", "nzPopconfirmPlacement", "nzCondition", "nzPopconfirmShowArrow", "nzPopconfirmBackdrop", "nzAutofocus", "nzPopconfirmArrowPointAtCenter", "nzPopconfirmTitle", "nz-popconfirm", "nzPopconfirmOrigin", "nzPopconfirmMouseEnterDelay", "nzPopconfirmMouseLeaveDelay", "nzPopconfirmOverlayClassName", "nzPopconfirmOverlayStyle", "nzPopconfirmVisible", "nzOkText", "nzOkType", "nzOkDanger", "nzCancelText", "nzIcon"], outputs: ["nzPopconfirmVisibleChange", "nzOnCancel", "nzOnConfirm"], exportAs: ["nzPopconfirm"] }], pipes: { "translate": i12$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AtwSelectAdmin, decorators: [{
             type: Component,
             args: [{