@edmicro/olkit 1.1.5 → 1.1.6

package/fesm2022/edmicro-olkit.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Service, input, signal, computed, effect, ChangeDetectionStrategy, Component, forwardRef, model, output, contentChildren, HostListener, DOCUMENT, Injectable, DestroyRef, viewChild, ElementRef, Renderer2, ApplicationRef, EnvironmentInjector, createComponent, Directive, contentChild, ViewContainerRef, ContentChild, ViewChildren, ViewChild } from '@angular/core';
+import { inject, Service, input, signal, computed, effect, ChangeDetectionStrategy, Component, forwardRef, model, output, contentChildren, HostListener, DOCUMENT, Injectable, DestroyRef, viewChild, ElementRef, Renderer2, ApplicationRef, EnvironmentInjector, createComponent, Directive, contentChild, ViewContainerRef, ContentChild, untracked, ViewChildren, ViewChild, afterNextRender } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, NgStyle } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -1226,14 +1226,40 @@ class OlFocusTrapService {
         this.previousActiveElement = document.activeElement;
         this.trapElement = element;
         this.updateFocusableElements();
-        if (autoFocus && this.focusableElements.length > 0) {
-            // Focus vào element đầu tiên
-            this.focusableElements[0].focus();
-        }
+        if (autoFocus)
+            this.initialFocusTarget()?.focus();
         // Add event listener cho tab key
         document.addEventListener('keydown', this.handleKeyDown);
         this.lockScroll();
     }
+    /**
+     * Chọn phần tử nhận focus khi overlay mở.
+     *
+     * Bản trước lấy phần tử focus được ĐẦU TIÊN theo thứ tự DOM. Header đứng
+     * trước nội dung nên mở modal/drawer nào tiêu điểm cũng rơi vào nút ✕ —
+     * người dùng phải Tab qua nút đóng mới tới ô nhập đầu tiên, và lỡ Enter là
+     * đóng mất hộp thoại vừa mở (báo 2026-09-28).
+     *
+     * Thứ tự ưu tiên:
+     * 1. phần tử nơi gọi đánh dấu `autofocus` / `data-autofocus` — trình duyệt
+     *    chỉ tôn trọng `autofocus` lúc tải trang, không phải lúc chèn hộp thoại,
+     *    nên service tự làm
+     * 2. phần tử đầu tiên KHÔNG phải nút đóng (`[data-ol-dismiss]`) — thường là ô
+     *    nhập đầu tiên trong nội dung; nội dung không có gì bấm được thì tới nút
+     *    đầu tiên ở footer
+     * 3. không còn gì khác mới về nút đóng, như cũ
+     */
+    initialFocusTarget() {
+        const root = this.trapElement;
+        if (!root)
+            return null;
+        const explicit = root.querySelector('[autofocus], [data-autofocus]');
+        if (explicit && this.focusableElements.includes(explicit))
+            return explicit;
+        return (this.focusableElements.find((el) => !el.closest('[data-ol-dismiss]')) ??
+            this.focusableElements[0] ??
+            null);
+    }
     /**
      * Release focus trap và restore focus về element trước đó
      */
@@ -1318,12 +1344,26 @@ class OlFocusTrapService {
         if (!this.trapElement)
             return;
         const elements = Array.from(this.trapElement.querySelectorAll(this.focusableSelector));
-        // Filter các elements thực sự visible và có thể interact
-        this.focusableElements = elements.filter((el) => {
-            return (el.offsetParent !== null &&
-                !el.hasAttribute('disabled') &&
-                el.getAttribute('tabindex') !== '-1');
-        });
+        this.focusableElements = elements.filter((el) => this.isVisible(el) && !el.hasAttribute('disabled') && el.getAttribute('tabindex') !== '-1');
+    }
+    /**
+     * Phần tử có đang hiện không.
+     *
+     * KHÔNG dùng `offsetParent !== null`: nó trả `null` cho chính phần tử
+     * `position: fixed` (nút nổi trong drawer/modal) dù phần tử hiện rõ, và luôn
+     * `null` trong jsdom — nên mọi phần tử bị lọc mất, service không focus được
+     * gì và spec không viết được.
+     */
+    isVisible(el) {
+        if (typeof el.checkVisibility === 'function') {
+            return el.checkVisibility({ visibilityProperty: true });
+        }
+        // jsdom và trình duyệt cũ không có `checkVisibility`.
+        for (let node = el; node; node = node.parentElement) {
+            if (getComputedStyle(node).display === 'none')
+                return false;
+        }
+        return getComputedStyle(el).visibility !== 'hidden';
     }
     /**
      * Handle keyboard navigation trong trap
@@ -1928,12 +1968,250 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 }]
         }], propDecorators: { scrollbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollbar", required: false }] }], axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: false }] }], smooth: [{ type: i0.Input, args: [{ isSignal: true, alias: "smooth", required: false }] }], innerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "innerClass", required: false }] }], viewportRef: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }] } });
 
+/**
+ * Mục lục tự đánh dấu phần đang xem.
+ *
+ * Chưa có node Figma — dựng theo design system, mục đang xem dùng
+ * `text-fg-brand` và một vạch `bg-brand` bên trái (dọc) hoặc dưới (ngang).
+ *
+ * ## Vì sao `IntersectionObserver` chứ không nghe sự kiện `scroll`
+ *
+ * Nghe `scroll` thì mỗi lần cuộn là một lần chạy tay tính `getBoundingClientRect()`
+ * cho MỌI phần — trang 63 mục như docs olkit là 63 phép đo mỗi khung hình.
+ * `IntersectionObserver` để trình duyệt tự báo, và chỉ báo phần nào đổi trạng
+ * thái.
+ *
+ * ## `rootMargin` quyết định "đang xem" nghĩa là gì
+ *
+ * Mặc định `-20% 0px -70% 0px` thu vùng quan sát thành một dải ngang mỏng ở
+ * khoảng 1/4 trên màn hình. Không thu thì phần nào chạm mép dưới màn hình cũng
+ * tính là đang xem, và cuộn một nhịp có thể sáng ba mục cùng lúc.
+ *
+ * Dải mỏng cũng xử lý được phần NGẮN hơn màn hình: nếu đợi phần chiếm trọn
+ * viewport mới tính, mục ngắn không bao giờ được đánh dấu.
+ *
+ * ## Phần cuối trang không bao giờ chạm dải
+ *
+ * Cuộn hết cỡ mà phần cuối vẫn nằm dưới dải quan sát thì nó không sáng. Nên
+ * khi chạm đáy trang, component đánh dấu thẳng mục cuối — `atBottom()`.
+ *
+ * ## Lưu ý khi viết test
+ *
+ * jsdom KHÔNG có `IntersectionObserver` (đo 2026-09-26: `typeof` trả
+ * `'undefined'`). Component tự bảo vệ bằng cách kiểm trước khi dùng, nên spec
+ * dựng được và khoá được phần hiển thị; còn việc đánh dấu theo cuộn phải
+ * nghiệm thu trên trình duyệt. Đừng giả lập `IntersectionObserver` rồi tưởng
+ * đã kiểm hành vi thật.
+ */
+class OlScrollspy {
+    elementRef = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Mục lục trang', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Vùng quan sát, theo cú pháp `rootMargin` của `IntersectionObserver`.
+     *
+     * Đổi giá trị này khi trang có thanh trên cố định: `-80px 0px -70% 0px` đẩy
+     * mép trên xuống dưới thanh đó.
+     */
+    rootMargin = input('-20% 0px -70% 0px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootMargin" }] : /* istanbul ignore next */ []));
+    /** Cuộn mượt khi bấm mục. Tắt nếu trang tự lo việc cuộn. */
+    smoothScroll = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "smoothScroll" }] : /* istanbul ignore next */ []));
+    /**
+     * Khung cuộn chứa nội dung. `null` (mặc định) nghĩa là cả trang.
+     *
+     * BẮT BUỘC truyền khi nội dung nằm trong một khung `overflow-y-auto` riêng:
+     * `IntersectionObserver` mặc định quan sát theo VIEWPORT, nên phần nào cũng
+     * "đang hiện" khi khung con nằm trong tầm mắt — đo được: cuộn khung con từ
+     * đầu tới đáy mà không mục nào sáng.
+     */
+    scrollRoot = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollRoot" }] : /* istanbul ignore next */ []));
+    currentId = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentId" }] : /* istanbul ignore next */ []));
+    /** `id` của phần đang xem. Rỗng khi chưa phần nào vào vùng quan sát. */
+    activeId = this.currentId.asReadonly();
+    activeChange = output();
+    observer = null;
+    constructor() {
+        effect(() => {
+            const list = this.items();
+            const margin = this.rootMargin();
+            const root = this.scrollRoot();
+            this.stopObserving();
+            if (!list.length || typeof IntersectionObserver === 'undefined')
+                return;
+            // `queueMicrotask` để phần tử đích đã có trong DOM: component này thường
+            // đứng cạnh nội dung nó theo dõi, và effect chạy trước khi anh em render.
+            queueMicrotask(() => this.startObserving(list, margin, root));
+        });
+        this.destroyRef.onDestroy(() => this.stopObserving());
+    }
+    startObserving(list, margin, root) {
+        const targets = list
+            .map((item) => document.getElementById(item.id))
+            .filter((el) => el !== null);
+        if (!targets.length)
+            return;
+        this.observer = new IntersectionObserver((entries) => {
+            // Cuộn hết cỡ thì phần CUỐI thường nằm dưới dải quan sát và không bao
+            // giờ sáng — đo được: cuộn xuống đáy mà mục áp chót vẫn sáng. Chạm đáy
+            // thì đánh dấu thẳng mục cuối, không đợi observer.
+            if (this.atBottom(root)) {
+                this.setActive(list[list.length - 1].id);
+                return;
+            }
+            for (const entry of entries) {
+                if (entry.isIntersecting)
+                    this.setActive(entry.target.id);
+            }
+        }, { root, rootMargin: margin, threshold: 0 });
+        for (const el of targets)
+            this.observer.observe(el);
+        // Đánh dấu ngay mục ĐẦU khi chưa cuộn: không có phép này thì lúc tải
+        // trang mục lục trống, hoặc sáng nhầm mục thứ hai nếu nó tình cờ chạm dải.
+        if (!this.currentId())
+            this.setActive(list[0].id);
+    }
+    /** Khung (hoặc trang) đã cuộn tới sát đáy chưa — sai số 4px cho tròn số lẻ. */
+    atBottom(root) {
+        const el = root ?? document.documentElement;
+        return el.scrollHeight - el.scrollTop - el.clientHeight < 4;
+    }
+    stopObserving() {
+        this.observer?.disconnect();
+        this.observer = null;
+    }
+    setActive(id) {
+        if (id === this.currentId())
+            return;
+        this.currentId.set(id);
+        this.activeChange.emit(id);
+    }
+    /**
+     * Bấm mục thì cuộn tới phần tương ứng và đánh dấu NGAY.
+     *
+     * Không đợi `IntersectionObserver` báo: cuộn mượt mất vài trăm mili giây, và
+     * trong quãng đó mục vừa bấm chưa sáng — người dùng tưởng bấm hụt.
+     */
+    onClick(event, item) {
+        const target = document.getElementById(item.id);
+        if (!target)
+            return;
+        event.preventDefault();
+        this.setActive(item.id);
+        // `scrollIntoView` cuộn MỌI tổ tiên cuộn được, kể cả cả trang — khi nội
+        // dung nằm trong khung riêng thì cả trang cũng nhảy theo. Có `scrollRoot`
+        // thì cuộn chính khung đó bằng `scrollTo`, trang đứng yên.
+        const root = this.scrollRoot();
+        const behavior = this.smoothScroll() ? 'smooth' : 'auto';
+        if (root) {
+            root.scrollTo({ top: target.offsetTop - root.offsetTop, behavior });
+            return;
+        }
+        target.scrollIntoView({ behavior, block: 'start' });
+    }
+    navClasses = computed(() => this.orientation() === 'vertical' ? 'block' : 'block w-full overflow-x-auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navClasses" }] : /* istanbul ignore next */ []));
+    listClasses = computed(() => this.orientation() === 'vertical'
+        ? 'flex flex-col gap-0.5 border-s border-default ps-0'
+        : 'flex items-center gap-1 border-b border-default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+    /**
+     * Class của một mục.
+     *
+     * Gom vào MỘT chuỗi qua ba-ngôi thay vì nhiều `[class.x]` rời: hai class
+     * cùng thuộc tính thì trình duyệt chọn theo thứ tự luật trong file CSS chứ
+     * không theo thứ tự viết, kết quả đổi theo bản build.
+     */
+    linkClasses(item) {
+        const active = item.id === this.activeId();
+        const isVertical = this.orientation() === 'vertical';
+        const base = 'block text-sm transition-colors cursor-pointer';
+        const space = isVertical
+            ? `-ms-px border-s-2 py-1.5 pe-2 ${item.level === 2 ? 'ps-6' : 'ps-3'}`
+            : `-mb-px border-b-2 px-3 py-2 whitespace-nowrap`;
+        const color = active
+            ? 'border-brand font-semibold text-fg-brand'
+            : 'border-transparent font-medium text-body-subtle hover:text-heading';
+        return `${base} ${space} ${color}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlScrollspy, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlScrollspy, isStandalone: true, selector: "ol-scrollspy", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, rootMargin: { classPropertyName: "rootMargin", publicName: "rootMargin", isSignal: true, isRequired: false, transformFunction: null }, smoothScroll: { classPropertyName: "smoothScroll", publicName: "smoothScroll", isSignal: true, isRequired: false, transformFunction: null }, scrollRoot: { classPropertyName: "scrollRoot", publicName: "scrollRoot", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange" }, ngImport: i0, template: `
+    <nav [class]="navClasses()" [attr.aria-label]="ariaLabel()">
+      <ul [class]="listClasses()">
+        @for (item of items(); track item.id) {
+          <li>
+            <a
+              [href]="'#' + item.id"
+              [class]="linkClasses(item)"
+              [attr.aria-current]="item.id === activeId() ? 'true' : null"
+              (click)="onClick($event, item)"
+            >
+              {{ item.label }}
+            </a>
+          </li>
+        }
+      </ul>
+    </nav>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlScrollspy, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-scrollspy',
+                    standalone: true,
+                    template: `
+    <nav [class]="navClasses()" [attr.aria-label]="ariaLabel()">
+      <ul [class]="listClasses()">
+        @for (item of items(); track item.id) {
+          <li>
+            <a
+              [href]="'#' + item.id"
+              [class]="linkClasses(item)"
+              [attr.aria-current]="item.id === activeId() ? 'true' : null"
+              (click)="onClick($event, item)"
+            >
+              {{ item.label }}
+            </a>
+          </li>
+        }
+      </ul>
+    </nav>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], rootMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootMargin", required: false }] }], smoothScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "smoothScroll", required: false }] }], scrollRoot: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollRoot", required: false }] }], activeChange: [{ type: i0.Output, args: ["activeChange"] }] } });
+
+/**
+ * Viền mũi tên chỉ ở HAI cạnh quay ra ngoài hộp.
+ *
+ * Mũi tên là ô vuông 8px xoay 45°, đặt lòi nửa ra ngoài mép hộp (-4px). Viền
+ * cả bốn cạnh thì nửa nằm TRONG hộp cũng có viền — hiện thành hình thoi nhỏ
+ * lấn vào tooltip (báo 2026-09-28, theme `light`). `data-side` là hướng thật
+ * sau khi tự lật, do `OlPositioningService.applyArrowPosition` ghi vào.
+ *
+ * Xoay 45° theo chiều kim đồng hồ: cạnh dưới + phải quay xuống, trên + trái
+ * quay lên, trên + phải quay sang phải, dưới + trái quay sang trái.
+ */
+const ARROW_OUTER_EDGES = [
+    'data-[side=top]:border-t-0 data-[side=top]:border-l-0',
+    'data-[side=bottom]:border-b-0 data-[side=bottom]:border-r-0',
+    'data-[side=left]:border-b-0 data-[side=left]:border-l-0',
+    'data-[side=right]:border-t-0 data-[side=right]:border-r-0',
+].join(' ');
 class OlTooltip {
     /** Tooltip content text */
     content = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
-    /** Theme variant */
-    theme = input('dark', /* @ts-ignore */
+    /** Theme variant — mặc định `subtle` (nền Primary 50). */
+    theme = input('subtle', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
     /** Tooltip ID for ARIA */
     tooltipId = input('', /* @ts-ignore */
@@ -1973,7 +2251,13 @@ class OlTooltip {
         //
         // `bg-neutral-primary` + `text-heading` đã tự đảo theo chế độ tối và theo
         // từng theme, nên bỏ hẳn nhánh `dark:` là đủ.
+        //
+        // `subtle` — nền Primary 50 (`bg-brand-softer` = brand-50, tối: brand-950),
+        // chữ `text-fg-brand-strong` (brand-900, tối: brand-300), viền
+        // `border-brand-subtle` (brand-200, tối: brand-800). Cả ba là token ngữ
+        // nghĩa đã có khối `.dark` — KHÔNG ghim `dark:`, cùng lý do với `light`.
         const themeClasses = {
+            subtle: 'bg-brand-softer text-fg-brand-strong border border-brand-subtle shadow-md',
             dark: 'bg-dark text-white shadow-lg',
             light: 'bg-neutral-primary text-heading border border-default shadow-md',
             brand: 'bg-brand text-white shadow-lg',
@@ -1987,10 +2271,11 @@ class OlTooltip {
     arrowClasses = computed(() => {
         const baseClasses = 'absolute w-2 h-2 rotate-45';
         const themeClasses = {
+            // Phải ĐỒNG BỘ với nền + viền hộp ở `tooltipClasses` — mũi tên là phần
+            // nối liền hộp, lệch màu là thấy ngay đường gãy.
+            subtle: `bg-brand-softer border border-brand-subtle ${ARROW_OUTER_EDGES}`,
             dark: 'bg-dark',
-            // Phải ĐỒNG BỘ với nền hộp ở `tooltipClasses` — mũi tên là phần nối
-            // liền hộp, lệch màu là thấy ngay đường gãy.
-            light: 'bg-neutral-primary border border-default',
+            light: `bg-neutral-primary border border-default ${ARROW_OUTER_EDGES}`,
             brand: 'bg-brand',
         };
         return `${baseClasses} ${themeClasses[this.theme()]}`;
@@ -2153,6 +2438,9 @@ class OlPositioningService {
             arrowElement.style.top = `${y}px`;
         }
         arrowElement.style.setProperty(staticSide, '-4px');
+        // Hướng THẬT sau flip — để mũi tên có viền chỉ vẽ hai cạnh quay ra ngoài
+        // (xem ARROW_OUTER_EDGES trong tooltip.component.ts).
+        arrowElement.dataset['side'] = placement.split('-')[0];
     }
     /**
      * Get opposite side của placement
@@ -2217,7 +2505,7 @@ class OlTooltipDirective {
     tooltipPosition = input('top', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
     /** Tooltip theme */
-    tooltipTheme = input('dark', /* @ts-ignore */
+    tooltipTheme = input('subtle', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tooltipTheme" }] : /* istanbul ignore next */ []));
     /** Delay before showing tooltip (ms) */
     tooltipDelay = input(150, /* @ts-ignore */
@@ -2940,6 +3228,7 @@ class OlModalHeader {
         <button
           type="button"
           (click)="closeClick.emit()"
+          data-ol-dismiss
           aria-label="Đóng hộp thoại"
           class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-body-subtle transition-colors hover:bg-neutral-tertiary hover:text-heading focus:outline-hidden focus:ring-2 focus:ring-brand-subtle cursor-pointer"
         >
@@ -2998,6 +3287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         <button
           type="button"
           (click)="closeClick.emit()"
+          data-ol-dismiss
           aria-label="Đóng hộp thoại"
           class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-body-subtle transition-colors hover:bg-neutral-tertiary hover:text-heading focus:outline-hidden focus:ring-2 focus:ring-brand-subtle cursor-pointer"
         >
@@ -7081,11 +7371,11 @@ class OlDrawer {
             this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlDrawer, isStandalone: true, selector: "ol-drawer", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, queries: [{ propertyName: "header", first: true, predicate: OlDrawerHeader, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isOpen()) {\n  @if (backdrop()) {\n    <div\n      (click)=\"onBackdropClick()\"\n      class=\"fixed inset-0 z-drawer-backdrop bg-overlay-backdrop\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n  <div\n    #panel\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"ariaLabel()\"\n    tabindex=\"-1\"\n    class=\"fixed z-drawer flex flex-col overflow-y-auto bg-neutral-primary border-default p-3 transition-transform duration-300 ease-out\"\n    [class]=\"panelClasses()\"\n  >\n    @if (hienNutDong()) {\n      <button\n        type=\"button\"\n        (click)=\"close()\"\n        aria-label=\"\u0110\u00F3ng\"\n        class=\"absolute top-2.5 end-2.5 inline-flex h-8 w-8 items-center justify-center rounded-md text-body-subtle transition-colors hover:bg-neutral-tertiary hover:text-heading focus:outline-hidden focus:ring-2 focus:ring-brand-subtle cursor-pointer\"\n      >\n        <ol-icon name=\"close\" size=\"xs\" />\n        <span class=\"sr-only\">\u0110\u00F3ng</span>\n      </button>\n    }\n    <ng-content />\n  </div>\n}\n", dependencies: [{ kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlDrawer, isStandalone: true, selector: "ol-drawer", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, queries: [{ propertyName: "header", first: true, predicate: OlDrawerHeader, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isOpen()) {\n  @if (backdrop()) {\n    <div\n      (click)=\"onBackdropClick()\"\n      class=\"fixed inset-0 z-drawer-backdrop bg-overlay-backdrop\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n  <div\n    #panel\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"ariaLabel()\"\n    tabindex=\"-1\"\n    class=\"fixed z-drawer flex flex-col overflow-y-auto bg-neutral-primary border-default p-3 transition-transform duration-300 ease-out\"\n    [class]=\"panelClasses()\"\n  >\n    @if (hienNutDong()) {\n      <button\n        type=\"button\"\n        (click)=\"close()\"\n        data-ol-dismiss\n        aria-label=\"\u0110\u00F3ng\"\n        class=\"absolute top-2.5 end-2.5 inline-flex h-8 w-8 items-center justify-center rounded-md text-body-subtle transition-colors hover:bg-neutral-tertiary hover:text-heading focus:outline-hidden focus:ring-2 focus:ring-brand-subtle cursor-pointer\"\n      >\n        <ol-icon name=\"close\" size=\"xs\" />\n        <span class=\"sr-only\">\u0110\u00F3ng</span>\n      </button>\n    }\n    <ng-content />\n  </div>\n}\n", dependencies: [{ kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlDrawer, decorators: [{
             type: Component,
-            args: [{ selector: 'ol-drawer', standalone: true, imports: [OlIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n  @if (backdrop()) {\n    <div\n      (click)=\"onBackdropClick()\"\n      class=\"fixed inset-0 z-drawer-backdrop bg-overlay-backdrop\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n  <div\n    #panel\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"ariaLabel()\"\n    tabindex=\"-1\"\n    class=\"fixed z-drawer flex flex-col overflow-y-auto bg-neutral-primary border-default p-3 transition-transform duration-300 ease-out\"\n    [class]=\"panelClasses()\"\n  >\n    @if (hienNutDong()) {\n      <button\n        type=\"button\"\n        (click)=\"close()\"\n        aria-label=\"\u0110\u00F3ng\"\n        class=\"absolute top-2.5 end-2.5 inline-flex h-8 w-8 items-center justify-center rounded-md text-body-subtle transition-colors hover:bg-neutral-tertiary hover:text-heading focus:outline-hidden focus:ring-2 focus:ring-brand-subtle cursor-pointer\"\n      >\n        <ol-icon name=\"close\" size=\"xs\" />\n        <span class=\"sr-only\">\u0110\u00F3ng</span>\n      </button>\n    }\n    <ng-content />\n  </div>\n}\n" }]
+            args: [{ selector: 'ol-drawer', standalone: true, imports: [OlIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen()) {\n  @if (backdrop()) {\n    <div\n      (click)=\"onBackdropClick()\"\n      class=\"fixed inset-0 z-drawer-backdrop bg-overlay-backdrop\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n  <div\n    #panel\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"ariaLabel()\"\n    tabindex=\"-1\"\n    class=\"fixed z-drawer flex flex-col overflow-y-auto bg-neutral-primary border-default p-3 transition-transform duration-300 ease-out\"\n    [class]=\"panelClasses()\"\n  >\n    @if (hienNutDong()) {\n      <button\n        type=\"button\"\n        (click)=\"close()\"\n        data-ol-dismiss\n        aria-label=\"\u0110\u00F3ng\"\n        class=\"absolute top-2.5 end-2.5 inline-flex h-8 w-8 items-center justify-center rounded-md text-body-subtle transition-colors hover:bg-neutral-tertiary hover:text-heading focus:outline-hidden focus:ring-2 focus:ring-brand-subtle cursor-pointer\"\n      >\n        <ol-icon name=\"close\" size=\"xs\" />\n        <span class=\"sr-only\">\u0110\u00F3ng</span>\n      </button>\n    }\n    <ng-content />\n  </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], header: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OlDrawerHeader), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**
@@ -7156,6 +7446,8 @@ class OlDropdown {
     detachMenu = null;
     /** Hàm gỡ khỏi ngăn xếp Escape. `null` khi đang đóng. */
     releaseEscape = null;
+    /** Hàm gỡ listener Tab trên panel. `null` khi đang đóng. */
+    releaseMenuKeydown = null;
     label = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     isOpen = model(false, /* @ts-ignore */
@@ -7205,19 +7497,34 @@ class OlDropdown {
                 // Rời ngăn xếp Escape khi đóng.
                 this.releaseEscape?.();
                 this.releaseEscape = null;
+                // Gỡ listener Tab. Phải ở ĐÂY chứ không trong `stopAutoUpdate()`: hàm
+                // đó chạy đầu MỖI lần effect, kể cả những lần chỉ đổi vị trí — gỡ ở đó
+                // thì listener bị tháo giữa chừng và không gắn lại kịp.
+                this.releaseMenuKeydown?.();
+                this.releaseMenuKeydown = null;
                 return;
             }
             // Vào ngăn xếp Escape — chỉ lớp trên cùng đóng, nên dropdown mở trong
             // modal không còn kéo modal đóng theo.
             this.releaseEscape ??= this.overlayContainer.register(() => {
                 this.hide();
-                this.triggerButtonRef()?.nativeElement.focus();
+                this.triggerElement()?.focus();
             });
             // Gắn ra body TRƯỚC khi định vị: floating-ui đo theo vị trí thật trong
             // DOM, đổi cha sau khi tính toạ độ là lệch chỗ.
             if (this.appendTo() === 'body' && !this.detachMenu) {
                 this.detachMenu = this.overlayContainer.attach(floating);
             }
+            // Nghe Tab bằng addEventListener chứ KHÔNG `(keydown)` trong template:
+            // ruột panel tới qua `<ng-content>`, mà nội dung chiếu giữ ngữ cảnh DOM
+            // của nơi KHAI BÁO nó, không phải của template này — nên sự kiện từ ruột
+            // không bao giờ chạm listener khai trong `dropdown.component.html`. Đo
+            // 2026-09-25: `defaultPrevented` vẫn false sau khi bong bóng xong.
+            if (!this.releaseMenuKeydown) {
+                const onKeydown = (event) => this.onMenuKeydown(event);
+                floating.addEventListener('keydown', onKeydown);
+                this.releaseMenuKeydown = () => floating.removeEventListener('keydown', onKeydown);
+            }
             const options = {
                 placement: this.placement(),
                 offset: 8,
@@ -7332,6 +7639,139 @@ class OlDropdown {
             }, HOVER_HIDE_DELAY_MS);
         }
     }
+    /**
+     * Danh sách phần tử nhận được tiêu điểm, theo thứ tự nhìn thấy.
+     *
+     * `tabindex="-1"` bị loại: đó là dấu hiệu tác giả cố ý đưa phần tử ra khỏi
+     * đường Tab. `:disabled` cũng loại — trình duyệt không cho nó nhận tiêu điểm.
+     *
+     * Lọc phần ẩn bằng `[hidden]`/`[aria-hidden]` chứ KHÔNG `offsetParent`:
+     * `offsetParent` là `null` với mọi phần tử trong `position: fixed`, và luôn
+     * `null` trong jsdom — dùng nó thì danh sách rỗng, hàm thoát sớm, và toàn bộ
+     * xử lý Tab lặng lẽ không chạy. Đã mắc: spec đỏ 3 ca trong khi trình duyệt
+     * thật vẫn đúng, vì hai môi trường cho `offsetParent` khác nhau.
+     */
+    focusableItems() {
+        const menu = this.menuRef()?.nativeElement;
+        if (!menu)
+            return [];
+        return [
+            ...menu.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'),
+        ].filter((el) => !el.closest('[hidden], [aria-hidden="true"]'));
+    }
+    /**
+     * Nút mở panel, kể cả khi nơi dùng tự khai qua slot `[trigger]`.
+     *
+     * `triggerButtonRef` CHỈ có giá trị với nút mặc định của component — hai
+     * nhánh `@if` trong template vẽ ra nó. Nơi dùng truyền nút riêng qua
+     * `<ng-content select="[trigger]">` thì cả hai nhánh đều không chạy và ref
+     * là `undefined`. Đo 2026-09-25: header onluyenv4 (streak, chuông) đều dùng
+     * nút slot, nên mọi xử lý bám vào ref đó lặng lẽ không chạy — gồm cả việc
+     * trả tiêu điểm về nút sau khi Escape, vốn có từ trước.
+     *
+     * Nên tìm nút thật trong cây DOM của host khi không có ref.
+     */
+    triggerElement() {
+        const fromRef = this.triggerButtonRef()?.nativeElement;
+        if (fromRef)
+            return fromRef;
+        const host = this.elementRef.nativeElement;
+        return host.querySelector('button:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])');
+    }
+    /**
+     * Phần tử nhận tiêu điểm đứng ngay sau `element` trong thứ tự Tab của trang.
+     *
+     * Quét từ `<body>` và loại chính panel ra: panel treo cuối `<body>` nên nếu
+     * tính cả nó thì "phần tử sau nút trigger" lại rơi vào panel vừa đóng.
+     */
+    nextFocusableAfter(element) {
+        const menu = this.menuRef()?.nativeElement;
+        const all = [
+            ...document.body.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'),
+        ].filter((el) => !menu?.contains(el) && !el.closest('[hidden], [aria-hidden="true"]'));
+        const index = all.indexOf(element);
+        return index === -1 ? null : (all[index + 1] ?? null);
+    }
+    /**
+     * Tab từ nút trigger khi panel đang mở → nhảy VÀO mục đầu panel.
+     *
+     * Vì sao cần: `appendTo="body"` treo panel ra cuối `<body>`, nên trong thứ
+     * tự DOM nó nằm SAU toàn bộ nội dung trang. Bàn phím đi theo thứ tự DOM chứ
+     * không theo vị trí nhìn thấy, nên Tab từ nút trigger nhảy sang phần tử kế
+     * tiếp trong header rồi xuống thân trang — panel mở ngay trước mắt mà không
+     * bao giờ tới được. Đo 2026-09-25: 8 lượt Tab, không lượt nào vào panel.
+     *
+     * KHÔNG cuốn tiêu điểm lúc mở: người dùng chuột không cần, và nhảy tiêu điểm
+     * khi họ chưa yêu cầu là cướp quyền điều khiển. Chỉ khi họ chủ động nhấn Tab
+     * mới dẫn vào — đúng lúc họ đang tìm đường đi tiếp.
+     *
+     * Shift+Tab bỏ qua: người dùng đang muốn lùi RA, giữ họ lại là bẫy.
+     */
+    onTriggerKeydown(event) {
+        if (event.key !== 'Tab' || event.shiftKey || !this.isOpen())
+            return;
+        const first = this.focusableItems()[0];
+        if (!first)
+            return;
+        event.preventDefault();
+        first.focus();
+    }
+    /**
+     * Tab BÊN TRONG panel — giữ đường đi liền mạch với chỗ panel đang hiện.
+     *
+     * Panel nằm cuối `<body>` nên nếu để trình duyệt tự xử, Tab ở mục cuối sẽ
+     * rơi xuống phần tử sau panel trong DOM (thường là hết trang), còn Shift+Tab
+     * ở mục đầu nhảy ngược lên thân trang — cả hai đều bỏ qua nút trigger, tức
+     * người dùng mất mốc quay về.
+     *
+     * KHÔNG bẫy vòng tròn như hộp thoại: chuẩn WAI-ARIA cho menu quy định Tab
+     * phải THOÁT được ra trang. Nên:
+     *
+     * - Tab ở mục CUỐI → đóng panel, trả tiêu điểm về nút trigger rồi để trình
+     *   duyệt đi tiếp bình thường (phần tử sau nút trong header)
+     * - Shift+Tab ở mục ĐẦU → về thẳng nút trigger, panel vẫn mở để người dùng
+     *   còn thấy mình vừa rời khỏi đâu
+     *
+     * Giữa các mục thì không can thiệp — panel là một khối liền trong DOM nên
+     * trình duyệt tự đi đúng.
+     */
+    onMenuKeydown(event) {
+        if (event.key !== 'Tab' || !this.isOpen())
+            return;
+        const items = this.focusableItems();
+        if (!items.length)
+            return;
+        const current = document.activeElement;
+        const index = current ? items.indexOf(current) : -1;
+        if (index === -1)
+            return;
+        const trigger = this.triggerElement();
+        if (!event.shiftKey && index === items.length - 1) {
+            // Rời khỏi mục cuối: đóng panel rồi đi tiếp NHƯ THỂ panel chưa từng mở,
+            // tức sang phần tử ngay sau nút trigger.
+            //
+            // Phải tự tìm và focus, không thể chỉ `trigger.focus()` rồi thả cho
+            // trình duyệt: sự kiện Tab đang phát từ phần tử TRONG PANEL, nên trình
+            // duyệt tính bước kế tiếp từ panel — mà panel nằm cuối `<body>` nên bước
+            // đó rơi xuống tận thân trang. Đo được: nhảy thẳng vào menu trái, bỏ qua
+            // hai nút còn lại trong header.
+            if (!trigger)
+                return;
+            event.preventDefault();
+            this.hide();
+            const next = this.nextFocusableAfter(trigger);
+            (next ?? trigger).focus();
+            return;
+        }
+        if (event.shiftKey && index === 0) {
+            // Lùi khỏi mục đầu: về nút trigger. Chặn ở đây vì nếu không, trình duyệt
+            // lùi tiếp vào thân trang — bỏ qua chính nút vừa mở panel.
+            if (!trigger)
+                return;
+            event.preventDefault();
+            trigger.focus();
+        }
+    }
     show() {
         if (this.disabled())
             return;
@@ -7363,13 +7803,13 @@ class OlDropdown {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlDropdown, isStandalone: true, selector: "ol-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, menuClass: { classPropertyName: "menuClass", publicName: "menuClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "relative inline-block text-left" }, viewQueries: [{ propertyName: "triggerButtonRef", first: true, predicate: ["triggerButton"], descendants: true, isSignal: true }, { propertyName: "menuRef", first: true, predicate: ["menu"], descendants: true, isSignal: true }, { propertyName: "cursorAnchorRef", first: true, predicate: ["cursorAnchor"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  <!-- Custom Slot Trigger or Default Button -->\n  <div (click)=\"onTriggerClick()\">\n    <ng-content select=\"[slot=trigger], [trigger]\" />\n    @if (label()) {\n      <button\n        #triggerButton\n        type=\"button\"\n        [id]=\"buttonId\"\n        [disabled]=\"disabled()\"\n        aria-haspopup=\"true\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"menuId\"\n        [class]=\"\n          triggerClass()\n            ? 'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium cursor-pointer ' +\n              triggerClass()\n            : 'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-body bg-neutral-primary border border-default rounded-md hover:bg-neutral-tertiary focus:outline-hidden focus:ring-2 focus:ring-brand-subtle cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'\n        \"\n      >\n        <ng-content select=\"[triggerIcon]\" />\n        <span>{{ label() }}</span>\n        <ol-icon\n          name=\"chevron-down\"\n          size=\"xs\"\n          class=\"transition-transform duration-200\"\n          [class.rotate-180]=\"isOpen()\"\n        ></ol-icon>\n      </button>\n    } @else if (!label() && triggerClass()) {\n      <button\n        #triggerButton\n        type=\"button\"\n        [id]=\"buttonId\"\n        [disabled]=\"disabled()\"\n        aria-haspopup=\"true\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"menuId\"\n        [class]=\"'inline-flex items-center justify-center p-2.5 cursor-pointer ' + triggerClass()\"\n      >\n        <ng-content select=\"[triggerIcon]\" />\n      </button>\n    }\n  </div>\n\n  @if (trigger() === 'context') {\n    <span\n      #cursorAnchor\n      aria-hidden=\"true\"\n      class=\"pointer-events-none fixed h-0 w-0\"\n      [style.left.px]=\"cursorX()\"\n      [style.top.px]=\"cursorY()\"\n    ></span>\n  }\n\n  <div\n    #menu\n    [id]=\"menuId\"\n    role=\"menu\"\n    [attr.aria-labelledby]=\"buttonId\"\n    [class]=\"\n      'z-dropdown absolute top-0 left-0 min-w-48 bg-neutral-primary rounded-md shadow-xl border border-default p-1.5 focus:outline-hidden transition-opacity duration-150 ' +\n      (menuClass() ? ' ' + menuClass() : '')\n    \"\n    [class.hidden]=\"!isOpen()\"\n  >\n    <ng-content />\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlDropdown, isStandalone: true, selector: "ol-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, menuClass: { classPropertyName: "menuClass", publicName: "menuClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "relative inline-block text-left" }, viewQueries: [{ propertyName: "triggerButtonRef", first: true, predicate: ["triggerButton"], descendants: true, isSignal: true }, { propertyName: "menuRef", first: true, predicate: ["menu"], descendants: true, isSignal: true }, { propertyName: "cursorAnchorRef", first: true, predicate: ["cursorAnchor"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  <!-- Custom Slot Trigger or Default Button -->\n  <div (click)=\"onTriggerClick()\" (keydown)=\"onTriggerKeydown($event)\">\n    <ng-content select=\"[slot=trigger], [trigger]\" />\n    @if (label()) {\n      <button\n        #triggerButton\n        type=\"button\"\n        [id]=\"buttonId\"\n        [disabled]=\"disabled()\"\n        aria-haspopup=\"true\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"menuId\"\n        [class]=\"\n          triggerClass()\n            ? 'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium cursor-pointer ' +\n              triggerClass()\n            : 'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-body bg-neutral-primary border border-default rounded-md hover:bg-neutral-tertiary focus:outline-hidden focus:ring-2 focus:ring-brand-subtle cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'\n        \"\n      >\n        <ng-content select=\"[triggerIcon]\" />\n        <span>{{ label() }}</span>\n        <ol-icon\n          name=\"chevron-down\"\n          size=\"xs\"\n          class=\"transition-transform duration-200\"\n          [class.rotate-180]=\"isOpen()\"\n        ></ol-icon>\n      </button>\n    } @else if (!label() && triggerClass()) {\n      <button\n        #triggerButton\n        type=\"button\"\n        [id]=\"buttonId\"\n        [disabled]=\"disabled()\"\n        aria-haspopup=\"true\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"menuId\"\n        [class]=\"'inline-flex items-center justify-center p-2.5 cursor-pointer ' + triggerClass()\"\n      >\n        <ng-content select=\"[triggerIcon]\" />\n      </button>\n    }\n  </div>\n\n  @if (trigger() === 'context') {\n    <span\n      #cursorAnchor\n      aria-hidden=\"true\"\n      class=\"pointer-events-none fixed h-0 w-0\"\n      [style.left.px]=\"cursorX()\"\n      [style.top.px]=\"cursorY()\"\n    ></span>\n  }\n\n  <div\n    #menu\n    [id]=\"menuId\"\n    role=\"menu\"\n    [attr.aria-labelledby]=\"buttonId\"\n    [class]=\"\n      'z-dropdown absolute top-0 left-0 min-w-48 bg-neutral-primary rounded-md shadow-lg border border-default p-2 space-y-1.5 focus:outline-hidden transition-opacity duration-150 ' +\n      (menuClass() ? ' ' + menuClass() : '')\n    \"\n    [class.hidden]=\"!isOpen()\"\n  >\n    <ng-content />\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlDropdown, decorators: [{
             type: Component,
             args: [{ selector: 'ol-dropdown', standalone: true, imports: [CommonModule, OlIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'relative inline-block text-left',
-                    }, template: "<div\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  <!-- Custom Slot Trigger or Default Button -->\n  <div (click)=\"onTriggerClick()\">\n    <ng-content select=\"[slot=trigger], [trigger]\" />\n    @if (label()) {\n      <button\n        #triggerButton\n        type=\"button\"\n        [id]=\"buttonId\"\n        [disabled]=\"disabled()\"\n        aria-haspopup=\"true\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"menuId\"\n        [class]=\"\n          triggerClass()\n            ? 'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium cursor-pointer ' +\n              triggerClass()\n            : 'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-body bg-neutral-primary border border-default rounded-md hover:bg-neutral-tertiary focus:outline-hidden focus:ring-2 focus:ring-brand-subtle cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'\n        \"\n      >\n        <ng-content select=\"[triggerIcon]\" />\n        <span>{{ label() }}</span>\n        <ol-icon\n          name=\"chevron-down\"\n          size=\"xs\"\n          class=\"transition-transform duration-200\"\n          [class.rotate-180]=\"isOpen()\"\n        ></ol-icon>\n      </button>\n    } @else if (!label() && triggerClass()) {\n      <button\n        #triggerButton\n        type=\"button\"\n        [id]=\"buttonId\"\n        [disabled]=\"disabled()\"\n        aria-haspopup=\"true\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"menuId\"\n        [class]=\"'inline-flex items-center justify-center p-2.5 cursor-pointer ' + triggerClass()\"\n      >\n        <ng-content select=\"[triggerIcon]\" />\n      </button>\n    }\n  </div>\n\n  @if (trigger() === 'context') {\n    <span\n      #cursorAnchor\n      aria-hidden=\"true\"\n      class=\"pointer-events-none fixed h-0 w-0\"\n      [style.left.px]=\"cursorX()\"\n      [style.top.px]=\"cursorY()\"\n    ></span>\n  }\n\n  <div\n    #menu\n    [id]=\"menuId\"\n    role=\"menu\"\n    [attr.aria-labelledby]=\"buttonId\"\n    [class]=\"\n      'z-dropdown absolute top-0 left-0 min-w-48 bg-neutral-primary rounded-md shadow-xl border border-default p-1.5 focus:outline-hidden transition-opacity duration-150 ' +\n      (menuClass() ? ' ' + menuClass() : '')\n    \"\n    [class.hidden]=\"!isOpen()\"\n  >\n    <ng-content />\n  </div>\n</div>\n" }]
+                    }, template: "<div\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  <!-- Custom Slot Trigger or Default Button -->\n  <div (click)=\"onTriggerClick()\" (keydown)=\"onTriggerKeydown($event)\">\n    <ng-content select=\"[slot=trigger], [trigger]\" />\n    @if (label()) {\n      <button\n        #triggerButton\n        type=\"button\"\n        [id]=\"buttonId\"\n        [disabled]=\"disabled()\"\n        aria-haspopup=\"true\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"menuId\"\n        [class]=\"\n          triggerClass()\n            ? 'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium cursor-pointer ' +\n              triggerClass()\n            : 'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-body bg-neutral-primary border border-default rounded-md hover:bg-neutral-tertiary focus:outline-hidden focus:ring-2 focus:ring-brand-subtle cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'\n        \"\n      >\n        <ng-content select=\"[triggerIcon]\" />\n        <span>{{ label() }}</span>\n        <ol-icon\n          name=\"chevron-down\"\n          size=\"xs\"\n          class=\"transition-transform duration-200\"\n          [class.rotate-180]=\"isOpen()\"\n        ></ol-icon>\n      </button>\n    } @else if (!label() && triggerClass()) {\n      <button\n        #triggerButton\n        type=\"button\"\n        [id]=\"buttonId\"\n        [disabled]=\"disabled()\"\n        aria-haspopup=\"true\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"menuId\"\n        [class]=\"'inline-flex items-center justify-center p-2.5 cursor-pointer ' + triggerClass()\"\n      >\n        <ng-content select=\"[triggerIcon]\" />\n      </button>\n    }\n  </div>\n\n  @if (trigger() === 'context') {\n    <span\n      #cursorAnchor\n      aria-hidden=\"true\"\n      class=\"pointer-events-none fixed h-0 w-0\"\n      [style.left.px]=\"cursorX()\"\n      [style.top.px]=\"cursorY()\"\n    ></span>\n  }\n\n  <div\n    #menu\n    [id]=\"menuId\"\n    role=\"menu\"\n    [attr.aria-labelledby]=\"buttonId\"\n    [class]=\"\n      'z-dropdown absolute top-0 left-0 min-w-48 bg-neutral-primary rounded-md shadow-lg border border-default p-2 space-y-1.5 focus:outline-hidden transition-opacity duration-150 ' +\n      (menuClass() ? ' ' + menuClass() : '')\n    \"\n    [class.hidden]=\"!isOpen()\"\n  >\n    <ng-content />\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { triggerButtonRef: [{ type: i0.ViewChild, args: ['triggerButton', { isSignal: true }] }], menuRef: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], cursorAnchorRef: [{ type: i0.ViewChild, args: ['cursorAnchor', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], menuClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuClass", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -7402,14 +7842,27 @@ class OlDropdownItem {
     parentDropdown = inject(forwardRef(() => OlDropdown), { optional: true });
     isItemActive = computed(() => this.selected() || this.active(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isItemActive" }] : /* istanbul ignore next */ []));
+    /**
+     * Hình học theo Figma `ol-dropdown-item` (node 1149:39652, đo 2026-09-28):
+     * lề 8px bốn cạnh (`px-2 py-2`, cao 36px), icon 16px cách chữ 6px, bo 8px
+     * (`rounded` = `--radius: 8px`), chữ 14px medium. Bản trước `px-3` (12px),
+     * icon cách chữ 10px, bo 6px.
+     *
+     * Độ đậm nằm TRONG từng nhánh, không gắn vô điều kiện — hai class cùng thuộc
+     * tính thì thắng thua theo thứ tự luật CSS, không theo thứ tự trong chuỗi.
+     *
+     * Trạng thái đang chọn: Figma KHÔNG vẽ (chỉ có Initial / Hover / Disabled).
+     * Bản trước tự đặt `bg-brand-softer` (#F5F8FF trên nền trắng — gần như không
+     * thấy, báo 2026-09-28). Nay `bg-brand-soft` (#E3EAFF) + chữ brand đậm.
+     */
     itemClasses = computed(() => {
         return [
-            'w-full flex items-center justify-between gap-3 px-3 py-2 text-sm font-medium rounded-sm transition-colors cursor-pointer text-left whitespace-nowrap shrink-0',
+            'w-full flex items-center justify-between gap-3 px-2 py-2 text-sm rounded transition-colors cursor-pointer text-left whitespace-nowrap shrink-0',
             this.danger()
-                ? 'text-fg-danger hover:bg-danger-soft'
+                ? 'font-medium text-fg-danger hover:bg-danger-soft'
                 : this.isItemActive()
-                    ? 'bg-brand-softer text-fg-brand-strong font-semibold'
-                    : 'text-body hover:text-heading hover:bg-neutral-tertiary-medium',
+                    ? 'font-semibold bg-brand-soft text-fg-brand-strong'
+                    : 'font-medium text-body hover:text-heading hover:bg-neutral-tertiary-medium',
             this.disabled() ? 'opacity-40 pointer-events-none cursor-not-allowed' : '',
         ]
             .filter(Boolean)
@@ -7426,13 +7879,13 @@ class OlDropdownItem {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlDropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlDropdownItem, isStandalone: true, selector: "ol-dropdown-item", inputs: { routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, secondaryText: { classPropertyName: "secondaryText", publicName: "secondaryText", isSignal: true, isRequired: false, transformFunction: null }, kbd: { classPropertyName: "kbd", publicName: "kbd", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { classAttribute: "block w-full" }, ngImport: i0, template: "<a\n  [routerLink]=\"routerLink() || undefined\"\n  [href]=\"href() || undefined\"\n  (click)=\"handleClick($event)\"\n  [class]=\"itemClasses()\"\n  role=\"menuitem\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n>\n  <div class=\"flex items-center gap-2.5 min-w-0 flex-1 whitespace-nowrap\">\n    @if (icon()) {\n      <ol-icon\n        [name]=\"icon()!\"\n        size=\"sm\"\n        class=\"shrink-0\"\n        [color]=\"danger() ? 'danger' : isItemActive() ? 'brand' : 'current'\"\n      ></ol-icon>\n    }\n    <span class=\"text-sm font-medium whitespace-nowrap\">\n      @if (label()) {\n        {{ label() }}\n      }\n      <ng-content />\n    </span>\n  </div>\n  @if (secondaryText()) {\n    <span class=\"text-xs text-fg-disabled font-normal\">\n      {{ secondaryText() }}\n    </span>\n  }\n  @if (kbd()) {\n    <kbd\n      class=\"text-2xs font-mono text-body bg-neutral-tertiary px-1.5 py-0.5 rounded border border-default shrink-0\"\n    >\n      {{ kbd() }}\n    </kbd>\n  }\n  @if (suffixIcon()) {\n    <ol-icon [name]=\"suffixIcon()!\" size=\"xs\" class=\"shrink-0 text-body-subtle\"></ol-icon>\n  }\n</a>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlDropdownItem, isStandalone: true, selector: "ol-dropdown-item", inputs: { routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, secondaryText: { classPropertyName: "secondaryText", publicName: "secondaryText", isSignal: true, isRequired: false, transformFunction: null }, kbd: { classPropertyName: "kbd", publicName: "kbd", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { classAttribute: "block w-full" }, ngImport: i0, template: "<a\n  [routerLink]=\"routerLink() || undefined\"\n  [href]=\"href() || undefined\"\n  (click)=\"handleClick($event)\"\n  [class]=\"itemClasses()\"\n  role=\"menuitem\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n>\n  <div class=\"flex items-center gap-1.5 min-w-0 flex-1 whitespace-nowrap\">\n    @if (icon()) {\n      <ol-icon\n        [name]=\"icon()!\"\n        size=\"sm\"\n        class=\"shrink-0\"\n        [color]=\"danger() ? 'danger' : isItemActive() ? 'brand' : 'current'\"\n      ></ol-icon>\n    }\n    <!--\n      KH\u00D4NG g\u1EAFn font-* \u1EDF \u0111\u00E2y: \u0111\u1ED9 \u0111\u1EADm quy\u1EBFt \u1EDF th\u1EBB ngo\u00E0i theo tr\u1EA1ng th\u00E1i. B\u1EA3n\n      tr\u01B0\u1EDBc ghi c\u1EE9ng `font-medium` n\u00EAn m\u1EE5c \u0111ang ch\u1ECDn kh\u00F4ng bao gi\u1EDD \u0111\u1EADm l\u00EAn d\u00F9\n      th\u1EBB ngo\u00E0i c\u00F3 `font-semibold`.\n    -->\n    <span class=\"text-sm whitespace-nowrap\">\n      @if (label()) {\n        {{ label() }}\n      }\n      <ng-content />\n    </span>\n  </div>\n  @if (secondaryText()) {\n    <span class=\"text-xs text-fg-disabled font-normal\">\n      {{ secondaryText() }}\n    </span>\n  }\n  @if (kbd()) {\n    <kbd\n      class=\"text-2xs font-mono text-body bg-neutral-tertiary px-1.5 py-0.5 rounded border border-default shrink-0\"\n    >\n      {{ kbd() }}\n    </kbd>\n  }\n  @if (suffixIcon()) {\n    <ol-icon [name]=\"suffixIcon()!\" size=\"xs\" class=\"shrink-0 text-body-subtle\"></ol-icon>\n  }\n</a>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlDropdownItem, decorators: [{
             type: Component,
             args: [{ selector: 'ol-dropdown-item', standalone: true, imports: [CommonModule, RouterModule, OlIcon], host: {
                         class: 'block w-full',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  [routerLink]=\"routerLink() || undefined\"\n  [href]=\"href() || undefined\"\n  (click)=\"handleClick($event)\"\n  [class]=\"itemClasses()\"\n  role=\"menuitem\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n>\n  <div class=\"flex items-center gap-2.5 min-w-0 flex-1 whitespace-nowrap\">\n    @if (icon()) {\n      <ol-icon\n        [name]=\"icon()!\"\n        size=\"sm\"\n        class=\"shrink-0\"\n        [color]=\"danger() ? 'danger' : isItemActive() ? 'brand' : 'current'\"\n      ></ol-icon>\n    }\n    <span class=\"text-sm font-medium whitespace-nowrap\">\n      @if (label()) {\n        {{ label() }}\n      }\n      <ng-content />\n    </span>\n  </div>\n  @if (secondaryText()) {\n    <span class=\"text-xs text-fg-disabled font-normal\">\n      {{ secondaryText() }}\n    </span>\n  }\n  @if (kbd()) {\n    <kbd\n      class=\"text-2xs font-mono text-body bg-neutral-tertiary px-1.5 py-0.5 rounded border border-default shrink-0\"\n    >\n      {{ kbd() }}\n    </kbd>\n  }\n  @if (suffixIcon()) {\n    <ol-icon [name]=\"suffixIcon()!\" size=\"xs\" class=\"shrink-0 text-body-subtle\"></ol-icon>\n  }\n</a>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  [routerLink]=\"routerLink() || undefined\"\n  [href]=\"href() || undefined\"\n  (click)=\"handleClick($event)\"\n  [class]=\"itemClasses()\"\n  role=\"menuitem\"\n  [attr.aria-disabled]=\"disabled()\"\n  [attr.tabindex]=\"disabled() ? -1 : 0\"\n>\n  <div class=\"flex items-center gap-1.5 min-w-0 flex-1 whitespace-nowrap\">\n    @if (icon()) {\n      <ol-icon\n        [name]=\"icon()!\"\n        size=\"sm\"\n        class=\"shrink-0\"\n        [color]=\"danger() ? 'danger' : isItemActive() ? 'brand' : 'current'\"\n      ></ol-icon>\n    }\n    <!--\n      KH\u00D4NG g\u1EAFn font-* \u1EDF \u0111\u00E2y: \u0111\u1ED9 \u0111\u1EADm quy\u1EBFt \u1EDF th\u1EBB ngo\u00E0i theo tr\u1EA1ng th\u00E1i. B\u1EA3n\n      tr\u01B0\u1EDBc ghi c\u1EE9ng `font-medium` n\u00EAn m\u1EE5c \u0111ang ch\u1ECDn kh\u00F4ng bao gi\u1EDD \u0111\u1EADm l\u00EAn d\u00F9\n      th\u1EBB ngo\u00E0i c\u00F3 `font-semibold`.\n    -->\n    <span class=\"text-sm whitespace-nowrap\">\n      @if (label()) {\n        {{ label() }}\n      }\n      <ng-content />\n    </span>\n  </div>\n  @if (secondaryText()) {\n    <span class=\"text-xs text-fg-disabled font-normal\">\n      {{ secondaryText() }}\n    </span>\n  }\n  @if (kbd()) {\n    <kbd\n      class=\"text-2xs font-mono text-body bg-neutral-tertiary px-1.5 py-0.5 rounded border border-default shrink-0\"\n    >\n      {{ kbd() }}\n    </kbd>\n  }\n  @if (suffixIcon()) {\n    <ol-icon [name]=\"suffixIcon()!\" size=\"xs\" class=\"shrink-0 text-body-subtle\"></ol-icon>\n  }\n</a>\n" }]
         }], propDecorators: { routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], secondaryText: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryText", required: false }] }], kbd: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbd", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], danger: [{ type: i0.Input, args: [{ isSignal: true, alias: "danger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
 /**
@@ -7499,6 +7952,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
             args: [{ selector: 'ol-footer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<footer class=\"bg-neutral-primary rounded-lg shadow-sm m-4\">\n  <!--\n    `container` quy\u1EBFt \u0111\u1ECBnh c\u00F3 gi\u1EDBi h\u1EA1n b\u1EC1 ngang hay kh\u00F4ng. B\u1EA3n tr\u01B0\u1EDBc khai input\n    n\u00E0y nh\u01B0ng template kh\u00F4ng d\u00F9ng \u2014 khung `max-w-screen-xl mx-auto` b\u1EADt v\u00F4 \u0111i\u1EC1u\n    ki\u1EC7n, n\u00EAn `container=false` kh\u00F4ng \u0111\u1ED5i g\u00EC, trong khi b\u1EA3ng API c\u1EE7a trang docs\n    v\u1EABn c\u00F4ng b\u1ED1 n\u00F3. Angular kh\u00F4ng ki\u1EC3m input c\u00F3 \u0111\u01B0\u1EE3c \u0111\u1ECDc hay kh\u00F4ng n\u00EAn build v\u1EABn\n    xanh.\n  -->\n  <div [class]=\"innerClasses()\">\n    <ng-content />\n  </div>\n</footer>\n" }]
         }], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }] } });
 
+/**
+ * Khung bọc nhiều mảng nội dung, khoảng cách đều nhau.
+ *
+ * Chưa có node Figma — dựng theo design system.
+ *
+ * ## Vì sao KHÔNG dùng `ol-card` cho việc này
+ *
+ * `ol-card` là MỘT thẻ nội dung: có ảnh bìa, có `href`, có trạng thái chọn.
+ * Còn đây là cái khung xếp NHIỀU mảng cạnh nhau với khoảng cách đều — như cột
+ * thiết lập, bảng điều khiển, hay danh sách nhóm. Lồng nhiều `ol-card` vào một
+ * `div` rồi tự đặt `space-y-*` cũng ra kết quả, nhưng mỗi nơi dùng lại chọn
+ * một khoảng cách khác và trang trông lộn xộn.
+ *
+ * ## `stacked` bỏ viền giữa, không phải bỏ viền hết
+ *
+ * Xếp chồng thì các mảng dính thành một khối liền, chỉ còn một viền ngoài và
+ * kẻ ngăn mảnh ở giữa — giống `ol-list-group`. Tách rời thì mỗi mảng là một
+ * thẻ riêng có viền đủ bốn cạnh.
+ *
+ * Làm bằng `divide-y` cộng `overflow-hidden` trên khung, KHÔNG bằng
+ * `[&>*:not(:last-child)]:border-b`: biến thể `:last-child` trong chuỗi class
+ * của component con sẽ khớp MỌI thể hiện của con đó, kể cả khi nó là con duy
+ * nhất ở nơi khác — lỗi đã gặp trong repo này.
+ *
+ * ## `ghost` bỏ nền và viền, giữ khoảng cách
+ *
+ * Dùng khi khung nằm trong một thẻ đã có viền rồi — hai lớp viền lồng nhau
+ * trông như lỗi hiển thị.
+ */
+class OlFrame {
+    spacing = input('base', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
+    rounded = input('lg', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Dính các mảng thành một khối liền, chỉ còn kẻ ngăn ở giữa. */
+    stacked = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []));
+    /** Xếp ngang thay vì dọc. Khoảng cách và kẻ ngăn đổi trục theo. */
+    horizontal = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "horizontal" }] : /* istanbul ignore next */ []));
+    frameClasses = computed(() => {
+        const isRow = this.horizontal();
+        const stacked = this.stacked();
+        const gap = {
+            xs: isRow ? 'gap-x-1' : 'gap-y-1',
+            sm: isRow ? 'gap-x-2' : 'gap-y-2',
+            base: isRow ? 'gap-x-4' : 'gap-y-4',
+            lg: isRow ? 'gap-x-6' : 'gap-y-6',
+        }[this.spacing()];
+        const radius = { sm: 'rounded-sm', md: 'rounded-md', lg: 'rounded-lg', xl: 'rounded-xl' }[this.rounded()];
+        const direction = isRow ? 'flex-row' : 'flex-col';
+        // Xếp chồng: bỏ khoảng cách, thay bằng kẻ ngăn. `overflow-hidden` để con
+        // ở hai đầu không đè ra ngoài góc bo của khung.
+        const body = stacked
+            ? `${isRow ? 'divide-x' : 'divide-y'} divide-default overflow-hidden`
+            : gap;
+        const shell = this.variant() === 'ghost'
+            ? ''
+            : stacked
+                ? `border border-default bg-neutral-primary ${radius}`
+                : '';
+        // Tách rời + không ghost: viền nằm ở TỪNG mảng, không ở khung — nên khung
+        // chỉ lo khoảng cách. Nơi dùng đặt `ol-card` hoặc thẻ có viền riêng vào.
+        return `flex ${direction} ${body} ${shell}`.replace(/\s+/g, ' ').trim();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFrame, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: OlFrame, isStandalone: true, selector: "ol-frame", inputs: { spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div [class]="frameClasses()">
+      <ng-content />
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFrame, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-frame',
+                    standalone: true,
+                    template: `
+    <div [class]="frameClasses()">
+      <ng-content />
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                }]
+        }], propDecorators: { spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }] } });
+
 /**
  * Nhãn cho ô nhập — khớp Figma `ol-label` (#1149:94727), trục
  * `Type=[Default | Required & icon | Two texts]`.
@@ -10035,109 +10578,1254 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
-let nextFileInputId = 0;
-class OlFileInput {
-    /** Id tự sinh khi nơi gọi không truyền id — để <label for> và
-     *  aria-describedby luôn nối được với ô nhập. */
-    uid = `ol-file-input-${nextFileInputId++}`;
-    inputId = computed(() => this.id() || this.uid, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
-    helperId = computed(() => `${this.inputId()}-helper`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "helperId" }] : /* istanbul ignore next */ []));
-    describedBy = computed(() => (this.helperText() ? this.helperId() : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
-    ariaInvalid = computed(() => null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
-    label = input('Tải lên tệp', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    helperText = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    dropzone = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dropzone" }] : /* istanbul ignore next */ []));
-    title = input('Nhấp để tải lên hoặc kéo và thả vào đây', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    description = input('Hỗ trợ SVG, PNG, JPG hoặc GIF (Tối đa 800x400px)', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+/**
+ * Chọn MỘT trong vài chế độ loại trừ nhau, đặt cạnh nhau trên một rãnh xám;
+ * mục đang chọn nổi lên nền trắng (segmented control).
+ *
+ * Khác `ol-tabs`: tabs chuyển PANEL nội dung, đây chọn GIÁ TRỊ (có CVA, dùng
+ * được trong form). Khác `ol-toggle`: công tắc chỉ có hai trạng thái bật/tắt.
+ *
+ * Trợ năng theo mẫu radio group của WAI-ARIA: `role="radiogroup"`, mỗi mục
+ * `role="radio"`, chỉ mục đang chọn nằm trong thứ tự Tab (roving tabindex),
+ * mũi tên trái/phải/lên/xuống chuyển VÀ chọn luôn, Home/End về đầu/cuối.
+ *
+ * Figma chưa có thiết kế (tra `lip4g3...` 2026-09-28: không có component nào
+ * tên segmented) — dựng theo token của hệ thống.
+ */
+class OlSegmented {
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     size = input('base', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    /** Cỡ đã quy bí danh: `'md'` -> `'base'`. Template so với cái này. */
-    resolvedSize = computed(() => (this.size() === 'md' ? 'base' : this.size()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
-    /**
-     * Padding theo size. Không dùng [class.p-1.5] trên template vì Angular
-     * cắt phần sau dấu chấm — nó render ra "p-1" (4px thay vì 6px).
-     */
-    paddingClass = computed(() => {
-        switch (this.resolvedSize()) {
-            case 'sm':
-                return 'p-1';
-            case 'lg':
-                return 'p-2';
-            default:
-                return 'p-1.5';
-        }
+    /** Giãn hết bề ngang khung, các mục chia đều. */
+    fullWidth = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    /** `model()` để `setDisabledState()` của Reactive Forms đặt được. */
+    disabled = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Tên nhóm cho bộ đọc màn hình — nên đặt, vì nhóm không có nhãn nhìn thấy. */
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    onChange = () => { };
+    onTouched = () => { };
+    hostClasses = computed(() => this.fullWidth() ? 'block w-full' : 'inline-block max-w-full', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    trackClasses = computed(() => {
+        const width = this.fullWidth() ? 'flex w-full' : 'inline-flex max-w-full';
+        const state = this.disabled() ? 'opacity-50' : '';
+        return `${width} items-center gap-1 p-1 rounded-md bg-neutral-tertiary overflow-x-auto ${state}`;
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "paddingClass" }] : /* istanbul ignore next */ []));
-    accept = input('*', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
-    multiple = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
-    id = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    selectedFiles = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedFiles" }] : /* istanbul ignore next */ []));
-    isDragging = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
-    filesChanged = output();
-    onFileSelected(event) {
-        const inputEl = event.target;
-        if (inputEl.files && inputEl.files.length > 0) {
-            const filesArray = Array.from(inputEl.files);
-            this.selectedFiles.set(filesArray);
-            this.filesChanged.emit(filesArray);
-        }
-    }
-    onDragOver(event) {
-        if (this.disabled())
+    ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
+    /** Mục đang Tab vào được: mục đang chọn, không có thì mục bật đầu tiên. */
+    focusIndex = computed(() => {
+        const opts = this.options();
+        const selected = opts.findIndex((o) => o.value === this.value() && !o.disabled);
+        return selected >= 0 ? selected : opts.findIndex((o) => !o.disabled);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusIndex" }] : /* istanbul ignore next */ []));
+    itemClasses(option) {
+        const size = this.size() === 'sm' ? 'h-7 px-3 text-xs' : 'h-8 px-4 text-sm';
+        const grow = this.fullWidth() ? 'flex-1 min-w-0' : 'shrink-0';
+        const base = `${size} ${grow} inline-flex items-center justify-center gap-1.5 rounded whitespace-nowrap transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-subtle`;
+        if (option.value === this.value()) {
+            return `${base} bg-neutral-primary text-heading font-semibold shadow-xs`;
+        }
+        const blocked = option.disabled || this.disabled();
+        return `${base} text-body font-medium ${blocked ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:text-heading'}`;
+    }
+    select(option) {
+        if (option.disabled || this.disabled() || option.value === this.value())
             return;
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragging.set(true);
+        this.value.set(option.value);
+        this.onChange(option.value);
+        this.onTouched();
     }
-    onDragLeave(event) {
-        if (this.disabled())
+    onKeydown(event, index) {
+        const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[event.key];
+        const opts = this.options();
+        let target = -1;
+        if (step)
+            target = this.nextEnabled(index, step);
+        else if (event.key === 'Home')
+            target = this.nextEnabled(-1, 1);
+        else if (event.key === 'End')
+            target = this.nextEnabled(opts.length, -1);
+        if (target < 0)
             return;
         event.preventDefault();
-        event.stopPropagation();
-        this.isDragging.set(false);
+        this.select(opts[target]);
+        this.host.nativeElement.querySelectorAll('[role=radio]')[target]?.focus();
     }
-    onDrop(event) {
-        if (this.disabled())
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragging.set(false);
-        if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
-            const filesArray = Array.from(event.dataTransfer.files);
-            this.selectedFiles.set(filesArray);
-            this.filesChanged.emit(filesArray);
+    /** Mục bật kế tiếp theo chiều `step`, vòng quanh. -1 khi không có. */
+    nextEnabled(from, step) {
+        const opts = this.options();
+        const n = opts.length;
+        for (let k = 1; k <= n; k++) {
+            const i = (((from + step * k) % n) + n) % n;
+            if (!opts[i].disabled)
+                return i;
         }
+        return -1;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlFileInput, isStandalone: true, selector: "ol-file-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dropzone: { classPropertyName: "dropzone", publicName: "dropzone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChanged: "filesChanged" }, host: { classAttribute: "block w-full" }, ngImport: i0, template: "<div class=\"w-full\">\n  @if (!dropzone()) {\n    <!-- Standard File Button Input -->\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"block mb-1.5 text-sm font-medium text-heading\">\n        {{ label() }}\n      </label>\n    }\n\n    <input\n      [id]=\"inputId()\"\n      [attr.aria-invalid]=\"ariaInvalid()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      type=\"file\"\n      [disabled]=\"disabled()\"\n      [accept]=\"accept()\"\n      [multiple]=\"multiple()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"block w-full text-sm text-heading border border-default rounded-md cursor-pointer bg-neutral-primary focus:outline-hidden focus:ring-2 focus:ring-brand-subtle dark:focus:ring-brand-950 file:me-4 file:py-2.5 file:px-4 file:rounded-s-md file:border-0 file:text-sm file:font-medium file:bg-neutral-tertiary file:text-heading hover:file:bg-neutral-tertiary-medium\"\n      [class]=\"paddingClass()\"\n    />\n\n    @if (helperText()) {\n      <p class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n    }\n  } @else {\n    <!-- Figma Dropzone Drag & Drop Area (Figma #1149:48981) -->\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"block mb-1.5 text-sm font-medium text-heading\">\n        {{ label() }}\n      </label>\n    }\n\n    <div\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n      class=\"relative flex flex-col items-center justify-center w-full min-h-40 border-2 border-dashed rounded-md cursor-pointer p-6 text-center\"\n      [class.border-brand-light]=\"isDragging()\"\n      [class.bg-brand-softer]=\"isDragging()\"\n      [class.dark:bg-brand-950/20]=\"isDragging()\"\n      [class.border-default-strong]=\"!isDragging() && !disabled()\"\n      [class.bg-neutral-secondary-medium]=\"!isDragging() && !disabled()\"\n      [class.hover:bg-neutral-tertiary]=\"!disabled()\"\n      [class.opacity-60]=\"disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n    >\n      <label\n        [for]=\"inputId()\"\n        class=\"flex flex-col items-center justify-center w-full h-full cursor-pointer\"\n      >\n        <!-- Cloud Upload Icon -->\n        <div\n          class=\"mb-3 p-3 rounded-full bg-brand-softer text-fg-brand dark:bg-brand-950/40 dark:text-fg-brand\"\n        >\n          <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\"\n            />\n          </svg>\n        </div>\n\n        <p class=\"mb-1 text-sm text-heading font-medium\">\n          <span class=\"text-fg-brand dark:text-fg-brand font-semibold hover:underline\">{{\n            title()\n          }}</span>\n        </p>\n        <p class=\"text-xs text-body-subtle\">{{ description() }}</p>\n\n        @if (selectedFiles().length > 0) {\n          <div class=\"mt-3 flex flex-wrap gap-2 justify-center\">\n            @for (file of selectedFiles(); track file.name) {\n              <span\n                class=\"inline-flex items-center gap-1 px-2.5 py-1 rounded-md text-xs font-medium bg-brand-soft text-fg-brand-medium dark:bg-brand-900/50 dark:text-fg-brand\"\n              >\n                <ol-icon name=\"document-text\" size=\"xs\" />\n                {{ file.name }} ({{ (file.size / 1024).toFixed(1) }} KB)\n              </span>\n            }\n          </div>\n        }\n\n        <input\n          [id]=\"inputId()\"\n          [attr.aria-invalid]=\"ariaInvalid()\"\n          [attr.aria-describedby]=\"describedBy()\"\n          type=\"file\"\n          [disabled]=\"disabled()\"\n          [accept]=\"accept()\"\n          [multiple]=\"multiple()\"\n          (change)=\"onFileSelected($event)\"\n          class=\"hidden\"\n        />\n      </label>\n    </div>\n\n    @if (helperText()) {\n      <p class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    writeValue(v) {
+        this.value.set(v ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlSegmented, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlSegmented, isStandalone: true, selector: "ol-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { properties: { "class": "hostClasses()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => OlSegmented), multi: true },
+        ], ngImport: i0, template: "<div\n  role=\"radiogroup\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [class]=\"trackClasses()\"\n>\n  @for (option of options(); track option.value; let i = $index) {\n    <button\n      type=\"button\"\n      role=\"radio\"\n      [attr.aria-checked]=\"option.value === value()\"\n      [disabled]=\"option.disabled || disabled()\"\n      [tabindex]=\"i === focusIndex() ? 0 : -1\"\n      [class]=\"itemClasses(option)\"\n      (click)=\"select(option)\"\n      (keydown)=\"onKeydown($event, i)\"\n    >\n      @if (option.icon) {\n        <ol-icon [name]=\"option.icon\" size=\"sm\" class=\"shrink-0\" />\n      }\n      <span class=\"truncate\">{{ option.label }}</span>\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFileInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlSegmented, decorators: [{
             type: Component,
-            args: [{ selector: 'ol-file-input', standalone: true, imports: [OlIcon], host: {
-                        // Họ form dùng chung một quy ước: host `block w-full`. Không khai thì thẻ
-                        // tuỳ biến mặc định `display: inline` và bề rộng chạy theo NỘI DUNG —
-                        // `ol-autocomplete` phình 240 -> 268px khi gõ chữ vì cụm icon phải chèn
+            args: [{ selector: 'ol-segmented', standalone: true, imports: [OlIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses()' }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => OlSegmented), multi: true },
+                    ], template: "<div\n  role=\"radiogroup\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [class]=\"trackClasses()\"\n>\n  @for (option of options(); track option.value; let i = $index) {\n    <button\n      type=\"button\"\n      role=\"radio\"\n      [attr.aria-checked]=\"option.value === value()\"\n      [disabled]=\"option.disabled || disabled()\"\n      [tabindex]=\"i === focusIndex() ? 0 : -1\"\n      [class]=\"itemClasses(option)\"\n      (click)=\"select(option)\"\n      (keydown)=\"onKeydown($event, i)\"\n    >\n      @if (option.icon) {\n        <ol-icon [name]=\"option.icon\" size=\"sm\" class=\"shrink-0\" />\n      }\n      <span class=\"truncate\">{{ option.label }}</span>\n    </button>\n  }\n</div>\n" }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+const FILE_KIND_META = {
+    image: { label: 'Hình ảnh', icon: 'lucide:file-image', color: 'green' },
+    pdf: { label: 'PDF', icon: 'lucide:file-text', color: 'red' },
+    word: { label: 'Tài liệu Word', icon: 'lucide:file-type', color: 'brand' },
+    excel: { label: 'Bảng tính Excel', icon: 'lucide:file-spreadsheet', color: 'green' },
+    powerpoint: { label: 'PowerPoint', icon: 'lucide:presentation', color: 'yellow' },
+    video: { label: 'Tệp video', icon: 'lucide:file-video-camera', color: 'brand' },
+    audio: { label: 'Âm thanh', icon: 'lucide:file-music', color: 'gray' },
+    archive: { label: 'Tệp nén', icon: 'lucide:file-archive', color: 'yellow' },
+    code: { label: 'Mã nguồn', icon: 'lucide:file-code', color: 'gray' },
+    text: { label: 'Văn bản', icon: 'lucide:file-text', color: 'gray' },
+    other: { label: 'Tệp khác', icon: 'lucide:file', color: 'gray' },
+};
+const EXTENSIONS = {
+    image: ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp', 'heic', 'avif'],
+    pdf: ['pdf'],
+    word: ['doc', 'docx', 'odt', 'rtf'],
+    excel: ['xls', 'xlsx', 'ods', 'csv'],
+    powerpoint: ['ppt', 'pptx', 'odp', 'key'],
+    video: ['mp4', 'mov', 'avi', 'mkv', 'webm', 'm4v'],
+    audio: ['mp3', 'wav', 'm4a', 'ogg', 'aac', 'flac'],
+    archive: ['zip', 'rar', '7z', 'tar', 'gz'],
+    code: ['js', 'ts', 'py', 'java', 'c', 'cpp', 'cs', 'html', 'css', 'json', 'xml', 'sql', 'pas'],
+    text: ['txt', 'md'],
+};
+/** Phần mở rộng, chữ thường, không dấu chấm. Không có → chuỗi rỗng. */
+function fileExtension(name) {
+    const dot = name.lastIndexOf('.');
+    return dot > 0 ? name.slice(dot + 1).toLowerCase() : '';
+}
+/**
+ * Nhận biết loại tệp — ưu tiên PHẦN MỞ RỘNG, lùi về MIME.
+ *
+ * Không tin MIME trước: trình duyệt đoán MIME theo đuôi và hệ điều hành, nên
+ * cùng một tệp `.docx` có máy báo `application/vnd.openxml…`, có máy báo rỗng
+ * (Windows thiếu Office), và `.csv` có máy báo `application/vnd.ms-excel`.
+ */
+function detectFileKind(name, mime = '') {
+    const ext = fileExtension(name);
+    for (const [kind, exts] of Object.entries(EXTENSIONS)) {
+        if (exts.includes(ext))
+            return kind;
+    }
+    if (mime.startsWith('image/'))
+        return 'image';
+    if (mime.startsWith('video/'))
+        return 'video';
+    if (mime.startsWith('audio/'))
+        return 'audio';
+    if (mime === 'application/pdf')
+        return 'pdf';
+    if (mime.startsWith('text/'))
+        return 'text';
+    return 'other';
+}
+/**
+ * Byte → chữ ngắn theo cách người Việt đọc: `850 B`, `12,4 KB`, `3,2 MB`.
+ * Dấu phẩy thập phân; số nguyên thì bỏ phần lẻ (`2 MB`, không `2,0 MB`).
+ */
+function formatFileSize(bytes) {
+    if (!Number.isFinite(bytes) || bytes < 0)
+        return '—';
+    if (bytes < 1024)
+        return `${bytes} B`;
+    const units = ['KB', 'MB', 'GB'];
+    let value = bytes / 1024;
+    let unit = 0;
+    while (value >= 1024 && unit < units.length - 1) {
+        value /= 1024;
+        unit++;
+    }
+    const rounded = Math.round(value * 10) / 10;
+    const text = Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1).replace('.', ',');
+    return `${text} ${units[unit]}`;
+}
+/**
+ * Tệp có khớp chuỗi `accept` của thẻ `<input type="file">` không.
+ *
+ * Hiểu đủ ba dạng của chuẩn HTML: đuôi (`.pdf`), MIME đầy đủ
+ * (`application/pdf`), MIME đại diện (`image/*`). `*` hoặc rỗng → nhận hết.
+ *
+ * Cần tự kiểm vì `accept` chỉ LỌC hộp thoại chọn tệp — kéo thả thì trình duyệt
+ * không lọc gì, và người dùng đổi bộ lọc hộp thoại sang "Tất cả tệp" là chọn
+ * được tệp bất kỳ.
+ */
+function matchesAccept(file, accept) {
+    const rules = accept
+        .split(',')
+        .map((r) => r.trim().toLowerCase())
+        .filter(Boolean);
+    if (!rules.length || rules.includes('*') || rules.includes('*/*'))
+        return true;
+    const ext = `.${fileExtension(file.name)}`;
+    const mime = (file.type || '').toLowerCase();
+    return rules.some((rule) => {
+        if (rule.startsWith('.'))
+            return rule === ext;
+        if (rule.endsWith('/*'))
+            return mime.startsWith(rule.slice(0, -1));
+        return rule === mime;
+    });
+}
+/**
+ * Chia tệp thành nhận / loại, kèm lý do từng tệp bị loại.
+ *
+ * Thứ tự kiểm: định dạng → dung lượng → số lượng. Tệp sai định dạng không
+ * chiếm chỗ trong hạn mức số lượng — chọn 3 tệp, 1 tệp `.exe`, giới hạn 2 thì
+ * nhận 2 tệp hợp lệ chứ không loại oan tệp thứ ba vì tệp `.exe` đứng trước.
+ */
+function validateFiles(files, rules = {}) {
+    const { accept = '*', maxSize = 0, maxFiles = 0, existingCount = 0 } = rules;
+    const accepted = [];
+    const rejected = [];
+    for (const file of files) {
+        if (!matchesAccept(file, accept)) {
+            rejected.push({
+                file,
+                reason: 'type',
+                message: `"${file.name}" không đúng định dạng cho phép.`,
+            });
+        }
+        else if (maxSize > 0 && file.size > maxSize) {
+            rejected.push({
+                file,
+                reason: 'size',
+                message: `"${file.name}" (${formatFileSize(file.size)}) vượt quá ${formatFileSize(maxSize)}.`,
+            });
+        }
+        else if (maxFiles > 0 && existingCount + accepted.length >= maxFiles) {
+            rejected.push({ file, reason: 'count', message: `Chỉ được tải tối đa ${maxFiles} tệp.` });
+        }
+        else {
+            accepted.push(file);
+        }
+    }
+    return { accepted, rejected };
+}
+let nextUploadId = 0;
+/** File → OlUploadFile, gán id duy nhất để `@for track` không lẫn hai tệp trùng tên. */
+function toUploadFile(file) {
+    return {
+        id: `ol-upload-${nextUploadId++}`,
+        name: file.name,
+        size: file.size,
+        file,
+        status: 'idle',
+    };
+}
+/**
+ * Tệp trong một lần dán (Ctrl+V / ⌘V).
+ *
+ * Đọc cả `clipboardData.files` lẫn `items` loại `file`: Chrome đặt ảnh chụp
+ * màn hình ở cả hai, Safari có lúc chỉ ở `items`. Gộp theo đối tượng để không
+ * nhận một ảnh hai lần.
+ *
+ * Ảnh chụp màn hình dán vào LUÔN tên `image.png` — dán ba lần là ba tệp trùng
+ * tên, không phân biệt được trong danh sách. Đổi thành "Ảnh dán 14-32-05.png".
+ */
+function filesFromClipboard(data, now = new Date()) {
+    if (!data)
+        return [];
+    const found = new Set(Array.from(data.files ?? []));
+    for (const item of Array.from(data.items ?? [])) {
+        if (item.kind !== 'file')
+            continue;
+        const f = item.getAsFile();
+        if (f && ![...found].some((x) => x.name === f.name && x.size === f.size))
+            found.add(f);
+    }
+    const stamp = [now.getHours(), now.getMinutes(), now.getSeconds()]
+        .map((n) => String(n).padStart(2, '0'))
+        .join('-');
+    return [...found].map((f, i) => {
+        if (!/^image\.\w+$/i.test(f.name))
+            return f;
+        const ext = fileExtension(f.name) || 'png';
+        const suffix = found.size > 1 ? ` (${i + 1})` : '';
+        return new File([f], `Ảnh dán ${stamp}${suffix}.${ext}`, {
+            type: f.type,
+            lastModified: f.lastModified,
+        });
+    });
+}
+/** Phím tắt dán theo hệ điều hành — để gợi ý đúng chữ người dùng thấy trên bàn phím. */
+function pasteShortcutLabel(platform = typeof navigator === 'undefined' ? '' : navigator.platform) {
+    return /mac|iphone|ipad/i.test(platform) ? '⌘V' : 'Ctrl+V';
+}
+/** Đang gõ trong ô nhập chữ — dán ở đó là dán CHỮ, không được cướp. */
+function isEditableTarget(target) {
+    const el = target;
+    if (!el || typeof el.closest !== 'function')
+        return false;
+    if (el.isContentEditable)
+        return true;
+    const field = el.closest('input, textarea, select');
+    return !!field && field.type !== 'file';
+}
+
+/**
+ * Vùng kéo–thả, theo Figma `ol-file-input-form` Type=Advanced (1149:48977):
+ * icon tải lên · "Nhấn để tải lên hoặc kéo thả" · "Dung lượng tối đa: …" ·
+ * (tuỳ chọn) nút "Chọn tệp".
+ *
+ * ## Cả vùng là MỘT `<button>`
+ *
+ * Bản cũ trong `ol-file-input` đặt `<input type="file" class="hidden">` —
+ * `display: none` nên Tab không tới được, bàn phím không mở được hộp chọn tệp.
+ * Ở đây vùng là nút thật: Tab tới, Enter/Space mở hộp chọn (qua `(pick)`, nơi
+ * gọi gọi `input.click()`), và trình đọc màn hình đọc nhãn của nút.
+ *
+ * Nút "Chọn tệp" bên trong chỉ là HÌNH (`<span>`), không lồng `<button>` trong
+ * `<button>` — HTML cấm, và hai nút lồng nhau làm một lần bấm bắn hai sự kiện.
+ */
+class OlFileDropzone {
+    title = input('Nhấn để tải lên hoặc kéo thả', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Dòng phụ, ví dụ "Dung lượng tối đa: 30MB". Rỗng → không vẽ. */
+    hint = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Nhãn nút "Chọn tệp" trong vùng (Figma Advanced). Rỗng → không vẽ nút. */
+    ctaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ctaLabel" }] : /* istanbul ignore next */ []));
+    icon = input('solar:upload-minimalistic-linear', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Trạng thái viền: lỗi / thành công (Figma State=Danger / Success). */
+    state = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /** Chiều cao tối thiểu — vùng trong khung có tiêu đề thấp hơn vùng đứng riêng. */
+    compact = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    describedBy = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    /** Dòng "hoặc dán ⌘V / Ctrl+V". Tắt khi nơi gọi không nhận tệp dán. */
+    pasteHint = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pasteHint" }] : /* istanbul ignore next */ []));
+    shortcut = pasteShortcutLabel();
+    /** Bấm vào vùng (chuột hoặc bàn phím) — nơi gọi mở hộp chọn tệp. */
+    pick = output();
+    /** Tệp thả hoặc DÁN vào vùng. CHƯA kiểm định dạng — việc của nơi gọi. */
+    filesDropped = output();
+    dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    zoneClass = computed(() => {
+        const border = this.dragging()
+            ? 'border-brand bg-brand-softer'
+            : this.state() === 'error'
+                ? 'border-danger bg-neutral-primary'
+                : this.state() === 'success'
+                    ? 'border-success bg-neutral-primary'
+                    : 'border-default-strong bg-neutral-primary hover:bg-neutral-secondary';
+        return [
+            'flex w-full flex-col items-center justify-center gap-1.5 rounded-md border border-dashed px-4 text-center transition-colors cursor-pointer',
+            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle',
+            'disabled:cursor-not-allowed disabled:opacity-60',
+            this.compact() ? 'min-h-28 py-4' : 'min-h-44 py-6',
+            border,
+        ].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoneClass" }] : /* istanbul ignore next */ []));
+    onDragOver(event) {
+        if (this.disabled())
+            return;
+        // Không preventDefault thì trình duyệt không cho thả và MỞ tệp ra tab mới.
+        event.preventDefault();
+        this.dragging.set(true);
+    }
+    onDragLeave(event) {
+        // Rời vào phần tử CON (icon, chữ) cũng bắn dragleave — chỉ tắt khi thật sự
+        // ra ngoài vùng, không thì viền nhấp nháy khi rê qua chữ.
+        const to = event.relatedTarget;
+        if (to && event.currentTarget.contains(to))
+            return;
+        this.dragging.set(false);
+    }
+    /**
+     * Dán khi tiêu điểm đang ở vùng. Có tệp thì nhận và `stopPropagation` — khung
+     * cha (`ol-file-upload`) cũng nghe `paste`, không chặn là nhận hai lần. Không
+     * có tệp (dán chữ) thì để yên cho trình duyệt.
+     */
+    onPaste(event) {
+        if (this.disabled())
+            return;
+        const files = filesFromClipboard(event.clipboardData);
+        if (!files.length)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.filesDropped.emit(files);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.dragging.set(false);
+        if (this.disabled())
+            return;
+        const files = Array.from(event.dataTransfer?.files ?? []);
+        if (files.length)
+            this.filesDropped.emit(files);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFileDropzone, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlFileDropzone, isStandalone: true, selector: "ol-file-dropzone", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, ctaLabel: { classPropertyName: "ctaLabel", publicName: "ctaLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, pasteHint: { classPropertyName: "pasteHint", publicName: "pasteHint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pick: "pick", filesDropped: "filesDropped" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <button
+      type="button"
+      [class]="zoneClass()"
+      [disabled]="disabled()"
+      [attr.aria-describedby]="describedBy() || null"
+      (click)="pick.emit()"
+      (dragenter)="onDragOver($event)"
+      (dragover)="onDragOver($event)"
+      (dragleave)="onDragLeave($event)"
+      (drop)="onDrop($event)"
+      (paste)="onPaste($event)"
+    >
+      <ol-icon [name]="icon()" [size]="24" class="text-fg-brand-strong" />
+      <span class="text-sm text-body">{{ title() }}</span>
+      @if (hint()) {
+        <span class="text-xs font-medium text-heading">{{ hint() }}</span>
+      }
+      @if (pasteHint()) {
+        <span class="text-xs text-body-subtle">
+          hoặc dán
+          <kbd
+            class="rounded-xs border border-default bg-neutral-secondary px-1 font-sans text-2xs text-heading"
+            >{{ shortcut }}</kbd
+          >
+        </span>
+      }
+      @if (ctaLabel()) {
+        <span
+          class="mt-1.5 inline-flex h-8 items-center gap-1.5 rounded-full bg-brand px-3.5 text-sm font-medium text-fg-white"
+          aria-hidden="true"
+        >
+          <ol-icon name="solar:upload-minimalistic-linear" [size]="16" />
+          {{ ctaLabel() }}
+        </span>
+      }
+    </button>
+  `, isInline: true, dependencies: [{ kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFileDropzone, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-file-dropzone',
+                    standalone: true,
+                    imports: [OlIcon],
+                    template: `
+    <button
+      type="button"
+      [class]="zoneClass()"
+      [disabled]="disabled()"
+      [attr.aria-describedby]="describedBy() || null"
+      (click)="pick.emit()"
+      (dragenter)="onDragOver($event)"
+      (dragover)="onDragOver($event)"
+      (dragleave)="onDragLeave($event)"
+      (drop)="onDrop($event)"
+      (paste)="onPaste($event)"
+    >
+      <ol-icon [name]="icon()" [size]="24" class="text-fg-brand-strong" />
+      <span class="text-sm text-body">{{ title() }}</span>
+      @if (hint()) {
+        <span class="text-xs font-medium text-heading">{{ hint() }}</span>
+      }
+      @if (pasteHint()) {
+        <span class="text-xs text-body-subtle">
+          hoặc dán
+          <kbd
+            class="rounded-xs border border-default bg-neutral-secondary px-1 font-sans text-2xs text-heading"
+            >{{ shortcut }}</kbd
+          >
+        </span>
+      }
+      @if (ctaLabel()) {
+        <span
+          class="mt-1.5 inline-flex h-8 items-center gap-1.5 rounded-full bg-brand px-3.5 text-sm font-medium text-fg-white"
+          aria-hidden="true"
+        >
+          <ol-icon name="solar:upload-minimalistic-linear" [size]="16" />
+          {{ ctaLabel() }}
+        </span>
+      }
+    </button>
+  `,
+                    host: { class: 'block' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], ctaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], pasteHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "pasteHint", required: false }] }], pick: [{ type: i0.Output, args: ["pick"] }], filesDropped: [{ type: i0.Output, args: ["filesDropped"] }] } });
+
+class OlFileItem {
+    file = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "file" }] : /* istanbul ignore next */ []));
+    variant = input('row', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    removable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
+    /** Hiện nút xem 👁 — nơi gọi tự mở tệp khi nhận `(preview)`. */
+    previewable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewable" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    remove = output();
+    preview = output();
+    retry = output();
+    kind = computed(() => detectFileKind(this.file().name, this.file().file?.type), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+    meta = computed(() => FILE_KIND_META[this.kind()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "meta" }] : /* istanbul ignore next */ []));
+    sizeText = computed(() => formatFileSize(this.file().size), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizeText" }] : /* istanbul ignore next */ []));
+    status = computed(() => this.file().status ?? 'idle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    progress = computed(() => Math.max(0, Math.min(100, this.file().progress ?? 0)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+    /** Dòng phụ dưới tên: dung lượng + trạng thái, đọc được cả khi không nhìn màu. */
+    metaText = computed(() => {
+        const size = this.sizeText();
+        switch (this.status()) {
+            case 'uploading':
+                return `${size} · Đang tải ${this.progress()}%`;
+            case 'success':
+                return `${size} · Đã tải lên`;
+            case 'error':
+                return this.file().error || 'Tải lên thất bại';
+            case 'idle':
+            default:
+                return `${size} · ${this.meta().label}`;
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "metaText" }] : /* istanbul ignore next */ []));
+    metaClass = computed(() => this.status() === 'error' ? 'text-xs text-fg-danger' : 'text-xs text-body-subtle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "metaClass" }] : /* istanbul ignore next */ []));
+    rowClass = computed(() => [
+        'flex items-center gap-3 rounded-md border bg-neutral-primary p-3',
+        this.status() === 'error' ? 'border-danger-subtle' : 'border-default',
+        this.disabled() ? 'opacity-60' : '',
+    ]
+        .filter(Boolean)
+        .join(' '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
+    /** Nút hành động nhỏ — cùng hình với nút đóng của drawer/modal. */
+    actionClass = 'inline-flex size-8 shrink-0 items-center justify-center rounded-md text-body-subtle transition-colors hover:bg-neutral-tertiary hover:text-heading focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle disabled:pointer-events-none disabled:opacity-50';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFileItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlFileItem, isStandalone: true, selector: "ol-file-item", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, previewable: { classPropertyName: "previewable", publicName: "previewable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove", preview: "preview", retry: "retry" }, host: { classAttribute: "block min-w-0" }, ngImport: i0, template: "@switch (variant()) {\n  @case ('chip') {\n    <span\n      class=\"inline-flex max-w-full items-center gap-1 rounded-md border border-default bg-neutral-primary py-0.5 ps-1 pe-1 text-sm text-heading\"\n    >\n      @if (previewable()) {\n        <button\n          type=\"button\"\n          class=\"inline-flex size-6 shrink-0 items-center justify-center rounded-sm text-fg-brand hover:bg-neutral-tertiary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n          [disabled]=\"disabled()\"\n          [attr.aria-label]=\"'Xem ' + file().name\"\n          (click)=\"preview.emit(file())\"\n        >\n          <ol-icon name=\"solar:eye-bold\" [size]=\"14\" />\n        </button>\n      } @else {\n        <ol-icon [name]=\"meta().icon\" [size]=\"14\" class=\"ms-1 shrink-0 text-body-subtle\" />\n      }\n      <span class=\"min-w-0 truncate\" [title]=\"file().name\">{{ file().name }}</span>\n      @if (removable()) {\n        <button\n          type=\"button\"\n          class=\"inline-flex size-6 shrink-0 items-center justify-center rounded-sm text-body-subtle hover:bg-neutral-tertiary hover:text-heading focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n          [disabled]=\"disabled()\"\n          [attr.aria-label]=\"'Xo\u00E1 ' + file().name\"\n          (click)=\"remove.emit(file())\"\n        >\n          <ol-icon name=\"close\" [size]=\"12\" />\n        </button>\n      }\n    </span>\n  }\n\n  @case ('card') {\n    <div\n      class=\"relative flex min-h-19 items-center justify-center gap-2 rounded-md border border-default bg-neutral-primary px-10 py-4\"\n    >\n      <ol-icon [name]=\"meta().icon\" [size]=\"20\" class=\"shrink-0 text-fg-brand-strong\" />\n      <span class=\"min-w-0 truncate text-sm font-medium text-fg-brand-strong\" [title]=\"file().name\">\n        {{ file().name }}\n      </span>\n      @if (removable()) {\n        <button\n          type=\"button\"\n          [class]=\"actionClass + ' absolute end-1.5 top-1.5'\"\n          [disabled]=\"disabled()\"\n          [attr.aria-label]=\"'Xo\u00E1 ' + file().name\"\n          (click)=\"remove.emit(file())\"\n        >\n          <ol-icon name=\"close\" size=\"xs\" />\n        </button>\n      }\n    </div>\n  }\n\n  @default {\n    <div [class]=\"rowClass()\">\n      <ol-icon-shape [icon]=\"meta().icon\" [color]=\"meta().color\" type=\"square\" size=\"sm\" />\n\n      <div class=\"min-w-0 flex-1\">\n        <div class=\"flex items-center gap-1.5\">\n          <span class=\"min-w-0 truncate text-sm font-medium text-heading\" [title]=\"file().name\">\n            {{ file().name }}\n          </span>\n          @if (status() === 'success') {\n            <ol-icon name=\"solar:check-circle-bold\" [size]=\"16\" class=\"shrink-0 text-fg-success\" />\n          } @else if (status() === 'error') {\n            <ol-icon name=\"solar:danger-circle-bold\" [size]=\"16\" class=\"shrink-0 text-fg-danger\" />\n          }\n        </div>\n        <!-- aria-live: tr\u00ECnh \u0111\u1ECDc m\u00E0n h\u00ECnh \u0111\u1ECDc \"\u0110\u00E3 t\u1EA3i l\u00EAn\" / l\u1ED7i khi tr\u1EA1ng th\u00E1i \u0111\u1ED5i. -->\n        <p [class]=\"metaClass()\" aria-live=\"polite\">{{ metaText() }}</p>\n        @if (status() === 'uploading') {\n          <ol-progress\n            class=\"mt-1.5 block\"\n            size=\"sm\"\n            [progress]=\"progress()\"\n            [attr.aria-label]=\"'Ti\u1EBFn tr\u00ECnh t\u1EA3i ' + file().name\"\n          />\n        }\n      </div>\n\n      <div class=\"flex shrink-0 items-center gap-0.5\">\n        @if (previewable() && status() !== 'uploading') {\n          <button\n            type=\"button\"\n            [class]=\"actionClass\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"'Xem ' + file().name\"\n            (click)=\"preview.emit(file())\"\n          >\n            <ol-icon name=\"solar:eye-bold\" size=\"sm\" />\n          </button>\n        }\n        @if (status() === 'error') {\n          <button\n            type=\"button\"\n            [class]=\"actionClass\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"'Th\u1EED t\u1EA3i l\u1EA1i ' + file().name\"\n            (click)=\"retry.emit(file())\"\n          >\n            <ol-icon name=\"solar:refresh-bold\" size=\"sm\" />\n          </button>\n        }\n        @if (removable()) {\n          <button\n            type=\"button\"\n            [class]=\"actionClass\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"(status() === 'uploading' ? 'Hu\u1EF7 t\u1EA3i ' : 'Xo\u00E1 ') + file().name\"\n            (click)=\"remove.emit(file())\"\n          >\n            <ol-icon\n              [name]=\"status() === 'uploading' ? 'close' : 'solar:trash-bin-trash-bold'\"\n              size=\"sm\"\n            />\n          </button>\n        }\n      </div>\n    </div>\n  }\n}\n", dependencies: [{ kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }, { kind: "component", type: OlIconShape, selector: "ol-icon-shape", inputs: ["icon", "size", "color", "type"] }, { kind: "component", type: OlProgress, selector: "ol-progress", inputs: ["progress", "color", "size", "labelPosition", "label", "showProgress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFileItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'ol-file-item', standalone: true, imports: [OlIcon, OlIconShape, OlProgress], host: { class: 'block min-w-0' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (variant()) {\n  @case ('chip') {\n    <span\n      class=\"inline-flex max-w-full items-center gap-1 rounded-md border border-default bg-neutral-primary py-0.5 ps-1 pe-1 text-sm text-heading\"\n    >\n      @if (previewable()) {\n        <button\n          type=\"button\"\n          class=\"inline-flex size-6 shrink-0 items-center justify-center rounded-sm text-fg-brand hover:bg-neutral-tertiary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n          [disabled]=\"disabled()\"\n          [attr.aria-label]=\"'Xem ' + file().name\"\n          (click)=\"preview.emit(file())\"\n        >\n          <ol-icon name=\"solar:eye-bold\" [size]=\"14\" />\n        </button>\n      } @else {\n        <ol-icon [name]=\"meta().icon\" [size]=\"14\" class=\"ms-1 shrink-0 text-body-subtle\" />\n      }\n      <span class=\"min-w-0 truncate\" [title]=\"file().name\">{{ file().name }}</span>\n      @if (removable()) {\n        <button\n          type=\"button\"\n          class=\"inline-flex size-6 shrink-0 items-center justify-center rounded-sm text-body-subtle hover:bg-neutral-tertiary hover:text-heading focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n          [disabled]=\"disabled()\"\n          [attr.aria-label]=\"'Xo\u00E1 ' + file().name\"\n          (click)=\"remove.emit(file())\"\n        >\n          <ol-icon name=\"close\" [size]=\"12\" />\n        </button>\n      }\n    </span>\n  }\n\n  @case ('card') {\n    <div\n      class=\"relative flex min-h-19 items-center justify-center gap-2 rounded-md border border-default bg-neutral-primary px-10 py-4\"\n    >\n      <ol-icon [name]=\"meta().icon\" [size]=\"20\" class=\"shrink-0 text-fg-brand-strong\" />\n      <span class=\"min-w-0 truncate text-sm font-medium text-fg-brand-strong\" [title]=\"file().name\">\n        {{ file().name }}\n      </span>\n      @if (removable()) {\n        <button\n          type=\"button\"\n          [class]=\"actionClass + ' absolute end-1.5 top-1.5'\"\n          [disabled]=\"disabled()\"\n          [attr.aria-label]=\"'Xo\u00E1 ' + file().name\"\n          (click)=\"remove.emit(file())\"\n        >\n          <ol-icon name=\"close\" size=\"xs\" />\n        </button>\n      }\n    </div>\n  }\n\n  @default {\n    <div [class]=\"rowClass()\">\n      <ol-icon-shape [icon]=\"meta().icon\" [color]=\"meta().color\" type=\"square\" size=\"sm\" />\n\n      <div class=\"min-w-0 flex-1\">\n        <div class=\"flex items-center gap-1.5\">\n          <span class=\"min-w-0 truncate text-sm font-medium text-heading\" [title]=\"file().name\">\n            {{ file().name }}\n          </span>\n          @if (status() === 'success') {\n            <ol-icon name=\"solar:check-circle-bold\" [size]=\"16\" class=\"shrink-0 text-fg-success\" />\n          } @else if (status() === 'error') {\n            <ol-icon name=\"solar:danger-circle-bold\" [size]=\"16\" class=\"shrink-0 text-fg-danger\" />\n          }\n        </div>\n        <!-- aria-live: tr\u00ECnh \u0111\u1ECDc m\u00E0n h\u00ECnh \u0111\u1ECDc \"\u0110\u00E3 t\u1EA3i l\u00EAn\" / l\u1ED7i khi tr\u1EA1ng th\u00E1i \u0111\u1ED5i. -->\n        <p [class]=\"metaClass()\" aria-live=\"polite\">{{ metaText() }}</p>\n        @if (status() === 'uploading') {\n          <ol-progress\n            class=\"mt-1.5 block\"\n            size=\"sm\"\n            [progress]=\"progress()\"\n            [attr.aria-label]=\"'Ti\u1EBFn tr\u00ECnh t\u1EA3i ' + file().name\"\n          />\n        }\n      </div>\n\n      <div class=\"flex shrink-0 items-center gap-0.5\">\n        @if (previewable() && status() !== 'uploading') {\n          <button\n            type=\"button\"\n            [class]=\"actionClass\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"'Xem ' + file().name\"\n            (click)=\"preview.emit(file())\"\n          >\n            <ol-icon name=\"solar:eye-bold\" size=\"sm\" />\n          </button>\n        }\n        @if (status() === 'error') {\n          <button\n            type=\"button\"\n            [class]=\"actionClass\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"'Th\u1EED t\u1EA3i l\u1EA1i ' + file().name\"\n            (click)=\"retry.emit(file())\"\n          >\n            <ol-icon name=\"solar:refresh-bold\" size=\"sm\" />\n          </button>\n        }\n        @if (removable()) {\n          <button\n            type=\"button\"\n            [class]=\"actionClass\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"(status() === 'uploading' ? 'Hu\u1EF7 t\u1EA3i ' : 'Xo\u00E1 ') + file().name\"\n            (click)=\"remove.emit(file())\"\n          >\n            <ol-icon\n              [name]=\"status() === 'uploading' ? 'close' : 'solar:trash-bin-trash-bold'\"\n              size=\"sm\"\n            />\n          </button>\n        }\n      </div>\n    </div>\n  }\n}\n" }]
+        }], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], previewable: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }], preview: [{ type: i0.Output, args: ["preview"] }], retry: [{ type: i0.Output, args: ["retry"] }] } });
+
+let nextFileInputId = 0;
+class OlFileInput {
+    /** Id tự sinh khi nơi gọi không truyền id — để <label for> và
+     *  aria-describedby luôn nối được với ô nhập. */
+    uid = `ol-file-input-${nextFileInputId++}`;
+    inputId = computed(() => this.id() || this.uid, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    helperId = computed(() => `${this.inputId()}-helper`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "helperId" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => (this.helperText() ? this.helperId() : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    ariaInvalid = computed(() => null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
+    label = input('Tải lên tệp', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    helperText = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    dropzone = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropzone" }] : /* istanbul ignore next */ []));
+    title = input('Nhấp để tải lên hoặc kéo và thả vào đây', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('Hỗ trợ SVG, PNG, JPG hoặc GIF (Tối đa 800x400px)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    size = input('base', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Cỡ đã quy bí danh: `'md'` -> `'base'`. Template so với cái này. */
+    resolvedSize = computed(() => (this.size() === 'md' ? 'base' : this.size()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    /**
+     * Padding theo size. Không dùng [class.p-1.5] trên template vì Angular
+     * cắt phần sau dấu chấm — nó render ra "p-1" (4px thay vì 6px).
+     */
+    paddingClass = computed(() => {
+        switch (this.resolvedSize()) {
+            case 'sm':
+                return 'p-1';
+            case 'lg':
+                return 'p-2';
+            default:
+                return 'p-1.5';
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paddingClass" }] : /* istanbul ignore next */ []));
+    accept = input('*', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    multiple = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    id = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Byte. 0 → không giới hạn. Có giá trị thì vùng kéo thả ghi "Dung lượng tối đa". */
+    maxSize = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    /** Nhãn nút trong vùng kéo thả (Figma Advanced). Rỗng → không vẽ nút. */
+    ctaLabel = input('Chọn tệp', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ctaLabel" }] : /* istanbul ignore next */ []));
+    /** Figma State: Danger / Success. Tệp bị loại tự chuyển sang `error`. */
+    state = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /** Tệp đã nhận (sau khi kiểm). */
+    selectedFiles = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedFiles" }] : /* istanbul ignore next */ []));
+    items = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    errors = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    filesChanged = output();
+    /** Tệp bị loại kèm lý do — component đã tự hiện câu lỗi. */
+    rejected = output();
+    dropInput = viewChild('dropInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropInput" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    zoneState = computed(() => (this.errors().length ? 'error' : this.state()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoneState" }] : /* istanbul ignore next */ []));
+    /**
+     * Dòng phụ trong vùng: "Dung lượng tối đa" nếu có `maxSize`, không thì
+     * `description` — giữ nguyên chữ của mã cũ đang truyền `description`.
+     */
+    zoneHint = computed(() => this.maxSize() > 0
+        ? `Dung lượng tối đa: ${formatFileSize(this.maxSize())}`
+        : this.description(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoneHint" }] : /* istanbul ignore next */ []));
+    onFileSelected(event) {
+        const inputEl = event.target;
+        this.receive(Array.from(inputEl.files ?? []));
+        // Cho chọn LẠI đúng tệp vừa xoá mà vẫn bắn `change`.
+        if (this.dropzone())
+            inputEl.value = '';
+    }
+    openPicker() {
+        if (!this.disabled())
+            this.dropInput()?.nativeElement.click();
+    }
+    /** Nhận tệp từ hộp chọn hoặc kéo thả: kiểm định dạng + dung lượng rồi phát. */
+    receive(incoming) {
+        if (this.disabled() || !incoming.length)
+            return;
+        const list = this.multiple() ? incoming : incoming.slice(0, 1);
+        const { accepted, rejected } = validateFiles(list, {
+            accept: this.accept(),
+            maxSize: this.maxSize(),
+        });
+        this.errors.set(rejected.map((r) => r.message));
+        if (rejected.length)
+            this.rejected.emit(rejected);
+        if (!accepted.length)
+            return;
+        const next = this.multiple() ? [...this.selectedFiles(), ...accepted] : accepted;
+        this.selectedFiles.set(next);
+        this.items.set(this.multiple()
+            ? [...this.items(), ...accepted.map(toUploadFile)]
+            : accepted.map(toUploadFile));
+        this.filesChanged.emit(next);
+    }
+    /** Dán tệp (Ctrl+V / ⌘V) khi tiêu điểm ở ô hoặc vùng kéo thả. */
+    onPaste(event) {
+        if (this.disabled())
+            return;
+        const files = filesFromClipboard(event.clipboardData);
+        if (!files.length)
+            return;
+        event.preventDefault();
+        this.receive(files);
+        this.syncNativeInput();
+    }
+    /**
+     * Ô thường (không dropzone) hiện tên tệp bằng CHÍNH `<input type="file">` —
+     * nhận tệp dán mà không gán vào nó thì ô vẫn ghi "Chưa chọn tệp" dù đã nhận.
+     * `DataTransfer` là cách duy nhất gán `files` cho ô tệp.
+     */
+    syncNativeInput() {
+        if (this.dropzone() || typeof DataTransfer === 'undefined')
+            return;
+        const el = this.host.nativeElement.querySelector('input[type=file]');
+        if (!el)
+            return;
+        const dt = new DataTransfer();
+        for (const f of this.selectedFiles())
+            dt.items.add(f);
+        el.files = dt.files;
+    }
+    removeItem(item) {
+        this.items.set(this.items().filter((i) => i.id !== item.id));
+        const next = this.selectedFiles().filter((f) => f !== item.file);
+        this.selectedFiles.set(next);
+        this.errors.set([]);
+        this.filesChanged.emit(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlFileInput, isStandalone: true, selector: "ol-file-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dropzone: { classPropertyName: "dropzone", publicName: "dropzone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, ctaLabel: { classPropertyName: "ctaLabel", publicName: "ctaLabel", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChanged: "filesChanged", rejected: "rejected" }, host: { listeners: { "paste": "onPaste($event)" }, classAttribute: "block w-full" }, viewQueries: [{ propertyName: "dropInput", first: true, predicate: ["dropInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"w-full\">\n  @if (!dropzone()) {\n    <!-- Standard File Button Input -->\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"block mb-1.5 text-sm font-medium text-heading\">\n        {{ label() }}\n      </label>\n    }\n\n    <input\n      [id]=\"inputId()\"\n      [attr.aria-invalid]=\"ariaInvalid()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      type=\"file\"\n      [disabled]=\"disabled()\"\n      [accept]=\"accept()\"\n      [multiple]=\"multiple()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"block w-full text-sm text-heading border border-default rounded-md cursor-pointer bg-neutral-primary focus:outline-hidden focus:ring-2 focus:ring-brand-subtle dark:focus:ring-brand-950 file:me-4 file:py-2.5 file:px-4 file:rounded-s-md file:border-0 file:text-sm file:font-medium file:bg-neutral-tertiary file:text-heading hover:file:bg-neutral-tertiary-medium\"\n      [class]=\"paddingClass()\"\n    />\n\n    @if (helperText()) {\n      <!-- id kh\u1EDBp aria-describedby c\u1EE7a \u00F4 \u2014 thi\u1EBFu id l\u00E0 tr\u00ECnh \u0111\u1ECDc m\u00E0n h\u00ECnh kh\u00F4ng \u0111\u1ECDc g\u1EE3i \u00FD. -->\n      <p [id]=\"helperId()\" class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n    }\n  } @else {\n    <!--\n      V\u00F9ng k\u00E9o th\u1EA3 theo Figma Type=Advanced (1149:48977), d\u00F9ng chung\n      `ol-file-dropzone`. B\u1EA3n c\u0169: `<input class=\"hidden\">` (display:none \u2014 b\u00E0n\n      ph\u00EDm kh\u00F4ng m\u1EDF \u0111\u01B0\u1EE3c), icon SVG v\u1EBD tay, kh\u00F4ng c\u00F3 n\u00FAt \"Ch\u1ECDn t\u1EC7p\" v\u00E0 d\u00F2ng\n      dung l\u01B0\u1EE3ng, nh\u00E1nh `dark:` ghim m\u00E0u.\n    -->\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"block mb-1.5 text-sm font-medium text-heading\">\n        {{ label() }}\n      </label>\n    }\n\n    <ol-file-dropzone\n      [title]=\"title()\"\n      [hint]=\"zoneHint()\"\n      [ctaLabel]=\"ctaLabel()\"\n      [state]=\"zoneState()\"\n      [disabled]=\"disabled()\"\n      [describedBy]=\"describedBy() ?? ''\"\n      (pick)=\"openPicker()\"\n      (filesDropped)=\"receive($event)\"\n    />\n\n    <!-- sr-only ch\u1EE9 kh\u00F4ng hidden: v\u1EABn n\u1EB1m trong c\u00E2y tr\u1EE3 n\u0103ng; Tab d\u1EEBng \u1EDF v\u00F9ng. -->\n    <input\n      #dropInput\n      [id]=\"inputId()\"\n      type=\"file\"\n      class=\"sr-only\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled()\"\n      [accept]=\"accept()\"\n      [multiple]=\"multiple()\"\n      (change)=\"onFileSelected($event)\"\n    />\n\n    @if (errors().length) {\n      <ul class=\"mt-1.5 space-y-0.5 text-xs text-fg-danger\" role=\"alert\">\n        @for (msg of errors(); track msg) {\n          <li>{{ msg }}</li>\n        }\n      </ul>\n    }\n\n    @if (items().length) {\n      <ul class=\"mt-2 flex flex-col gap-2\">\n        @for (item of items(); track item.id) {\n          <li>\n            <ol-file-item [file]=\"item\" [disabled]=\"disabled()\" (remove)=\"removeItem($event)\" />\n          </li>\n        }\n      </ul>\n    }\n\n    @if (helperText()) {\n      <p [id]=\"helperId()\" class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: OlFileDropzone, selector: "ol-file-dropzone", inputs: ["title", "hint", "ctaLabel", "icon", "disabled", "state", "compact", "describedBy", "pasteHint"], outputs: ["pick", "filesDropped"] }, { kind: "component", type: OlFileItem, selector: "ol-file-item", inputs: ["file", "variant", "removable", "previewable", "disabled"], outputs: ["remove", "preview", "retry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFileInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'ol-file-input', standalone: true, imports: [OlFileDropzone, OlFileItem], host: {
+                        // Họ form dùng chung một quy ước: host `block w-full`. Không khai thì thẻ
+                        // tuỳ biến mặc định `display: inline` và bề rộng chạy theo NỘI DUNG —
+                        // `ol-autocomplete` phình 240 -> 268px khi gõ chữ vì cụm icon phải chèn
                         // thêm nút xoá. Sửa từng cái là vá lẻ, nên chốt cho cả họ.
                         class: 'block w-full',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full\">\n  @if (!dropzone()) {\n    <!-- Standard File Button Input -->\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"block mb-1.5 text-sm font-medium text-heading\">\n        {{ label() }}\n      </label>\n    }\n\n    <input\n      [id]=\"inputId()\"\n      [attr.aria-invalid]=\"ariaInvalid()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      type=\"file\"\n      [disabled]=\"disabled()\"\n      [accept]=\"accept()\"\n      [multiple]=\"multiple()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"block w-full text-sm text-heading border border-default rounded-md cursor-pointer bg-neutral-primary focus:outline-hidden focus:ring-2 focus:ring-brand-subtle dark:focus:ring-brand-950 file:me-4 file:py-2.5 file:px-4 file:rounded-s-md file:border-0 file:text-sm file:font-medium file:bg-neutral-tertiary file:text-heading hover:file:bg-neutral-tertiary-medium\"\n      [class]=\"paddingClass()\"\n    />\n\n    @if (helperText()) {\n      <p class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n    }\n  } @else {\n    <!-- Figma Dropzone Drag & Drop Area (Figma #1149:48981) -->\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"block mb-1.5 text-sm font-medium text-heading\">\n        {{ label() }}\n      </label>\n    }\n\n    <div\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\"\n      class=\"relative flex flex-col items-center justify-center w-full min-h-40 border-2 border-dashed rounded-md cursor-pointer p-6 text-center\"\n      [class.border-brand-light]=\"isDragging()\"\n      [class.bg-brand-softer]=\"isDragging()\"\n      [class.dark:bg-brand-950/20]=\"isDragging()\"\n      [class.border-default-strong]=\"!isDragging() && !disabled()\"\n      [class.bg-neutral-secondary-medium]=\"!isDragging() && !disabled()\"\n      [class.hover:bg-neutral-tertiary]=\"!disabled()\"\n      [class.opacity-60]=\"disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n    >\n      <label\n        [for]=\"inputId()\"\n        class=\"flex flex-col items-center justify-center w-full h-full cursor-pointer\"\n      >\n        <!-- Cloud Upload Icon -->\n        <div\n          class=\"mb-3 p-3 rounded-full bg-brand-softer text-fg-brand dark:bg-brand-950/40 dark:text-fg-brand\"\n        >\n          <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\"\n            />\n          </svg>\n        </div>\n\n        <p class=\"mb-1 text-sm text-heading font-medium\">\n          <span class=\"text-fg-brand dark:text-fg-brand font-semibold hover:underline\">{{\n            title()\n          }}</span>\n        </p>\n        <p class=\"text-xs text-body-subtle\">{{ description() }}</p>\n\n        @if (selectedFiles().length > 0) {\n          <div class=\"mt-3 flex flex-wrap gap-2 justify-center\">\n            @for (file of selectedFiles(); track file.name) {\n              <span\n                class=\"inline-flex items-center gap-1 px-2.5 py-1 rounded-md text-xs font-medium bg-brand-soft text-fg-brand-medium dark:bg-brand-900/50 dark:text-fg-brand\"\n              >\n                <ol-icon name=\"document-text\" size=\"xs\" />\n                {{ file.name }} ({{ (file.size / 1024).toFixed(1) }} KB)\n              </span>\n            }\n          </div>\n        }\n\n        <input\n          [id]=\"inputId()\"\n          [attr.aria-invalid]=\"ariaInvalid()\"\n          [attr.aria-describedby]=\"describedBy()\"\n          type=\"file\"\n          [disabled]=\"disabled()\"\n          [accept]=\"accept()\"\n          [multiple]=\"multiple()\"\n          (change)=\"onFileSelected($event)\"\n          class=\"hidden\"\n        />\n      </label>\n    </div>\n\n    @if (helperText()) {\n      <p class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n    }\n  }\n</div>\n" }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dropzone: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropzone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], filesChanged: [{ type: i0.Output, args: ["filesChanged"] }] } });
+                        '(paste)': 'onPaste($event)',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full\">\n  @if (!dropzone()) {\n    <!-- Standard File Button Input -->\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"block mb-1.5 text-sm font-medium text-heading\">\n        {{ label() }}\n      </label>\n    }\n\n    <input\n      [id]=\"inputId()\"\n      [attr.aria-invalid]=\"ariaInvalid()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      type=\"file\"\n      [disabled]=\"disabled()\"\n      [accept]=\"accept()\"\n      [multiple]=\"multiple()\"\n      (change)=\"onFileSelected($event)\"\n      class=\"block w-full text-sm text-heading border border-default rounded-md cursor-pointer bg-neutral-primary focus:outline-hidden focus:ring-2 focus:ring-brand-subtle dark:focus:ring-brand-950 file:me-4 file:py-2.5 file:px-4 file:rounded-s-md file:border-0 file:text-sm file:font-medium file:bg-neutral-tertiary file:text-heading hover:file:bg-neutral-tertiary-medium\"\n      [class]=\"paddingClass()\"\n    />\n\n    @if (helperText()) {\n      <!-- id kh\u1EDBp aria-describedby c\u1EE7a \u00F4 \u2014 thi\u1EBFu id l\u00E0 tr\u00ECnh \u0111\u1ECDc m\u00E0n h\u00ECnh kh\u00F4ng \u0111\u1ECDc g\u1EE3i \u00FD. -->\n      <p [id]=\"helperId()\" class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n    }\n  } @else {\n    <!--\n      V\u00F9ng k\u00E9o th\u1EA3 theo Figma Type=Advanced (1149:48977), d\u00F9ng chung\n      `ol-file-dropzone`. B\u1EA3n c\u0169: `<input class=\"hidden\">` (display:none \u2014 b\u00E0n\n      ph\u00EDm kh\u00F4ng m\u1EDF \u0111\u01B0\u1EE3c), icon SVG v\u1EBD tay, kh\u00F4ng c\u00F3 n\u00FAt \"Ch\u1ECDn t\u1EC7p\" v\u00E0 d\u00F2ng\n      dung l\u01B0\u1EE3ng, nh\u00E1nh `dark:` ghim m\u00E0u.\n    -->\n    @if (label()) {\n      <label [for]=\"inputId()\" class=\"block mb-1.5 text-sm font-medium text-heading\">\n        {{ label() }}\n      </label>\n    }\n\n    <ol-file-dropzone\n      [title]=\"title()\"\n      [hint]=\"zoneHint()\"\n      [ctaLabel]=\"ctaLabel()\"\n      [state]=\"zoneState()\"\n      [disabled]=\"disabled()\"\n      [describedBy]=\"describedBy() ?? ''\"\n      (pick)=\"openPicker()\"\n      (filesDropped)=\"receive($event)\"\n    />\n\n    <!-- sr-only ch\u1EE9 kh\u00F4ng hidden: v\u1EABn n\u1EB1m trong c\u00E2y tr\u1EE3 n\u0103ng; Tab d\u1EEBng \u1EDF v\u00F9ng. -->\n    <input\n      #dropInput\n      [id]=\"inputId()\"\n      type=\"file\"\n      class=\"sr-only\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled()\"\n      [accept]=\"accept()\"\n      [multiple]=\"multiple()\"\n      (change)=\"onFileSelected($event)\"\n    />\n\n    @if (errors().length) {\n      <ul class=\"mt-1.5 space-y-0.5 text-xs text-fg-danger\" role=\"alert\">\n        @for (msg of errors(); track msg) {\n          <li>{{ msg }}</li>\n        }\n      </ul>\n    }\n\n    @if (items().length) {\n      <ul class=\"mt-2 flex flex-col gap-2\">\n        @for (item of items(); track item.id) {\n          <li>\n            <ol-file-item [file]=\"item\" [disabled]=\"disabled()\" (remove)=\"removeItem($event)\" />\n          </li>\n        }\n      </ul>\n    }\n\n    @if (helperText()) {\n      <p [id]=\"helperId()\" class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n    }\n  }\n</div>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dropzone: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropzone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], ctaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaLabel", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], filesChanged: [{ type: i0.Output, args: ["filesChanged"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], dropInput: [{ type: i0.ViewChild, args: ['dropInput', { isSignal: true }] }] } });
+
+const MIN_ZOOM = 1;
+const MAX_ZOOM = 4;
+const ZOOM_STEP = 1.5;
+const IDENTITY = { scale: 1, x: 0, y: 0 };
+const clampScale = (s) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, s));
+/**
+ * Giới hạn kéo: mép ảnh phóng to không được rời mép khung ảnh gốc — kéo quá là
+ * lộ nền trống. Ở `scale = 1` thì không kéo được.
+ */
+function clampOffset(state, width, height) {
+    const maxX = ((state.scale - 1) * width) / 2;
+    const maxY = ((state.scale - 1) * height) / 2;
+    const clamp = (v, m) => Math.min(m, Math.max(-m, v)) || 0;
+    return { scale: state.scale, x: clamp(state.x, maxX), y: clamp(state.y, maxY) };
+}
+/** Phóng tới `nextScale`, giữ điểm `(qx, qy)` (tính từ tâm khung) đứng yên. */
+function zoomAt(state, nextScale, qx, qy, width, height) {
+    const scale = clampScale(nextScale);
+    const px = (qx - state.x) / state.scale;
+    const py = (qy - state.y) / state.scale;
+    return clampOffset({ scale, x: qx - scale * px, y: qy - scale * py }, width, height);
+}
+/** Kéo thêm một đoạn `(dx, dy)`, trong giới hạn. */
+function panBy(state, dx, dy, width, height) {
+    return clampOffset({ ...state, x: state.x + dx, y: state.y + dy }, width, height);
+}
+
+/** Di chuyển quá chừng này px thì là KÉO, không phải bấm. */
+const DRAG_THRESHOLD = 5;
+/**
+ * Xem ảnh phóng to trên lớp phủ toàn màn (lightbox) — một ảnh hoặc lướt qua
+ * nhiều ảnh.
+ *
+ * - Nhiều ảnh: nút ‹ › hai bên, số thứ tự "2 / 5", phím ← → chuyển ảnh, vòng quanh.
+ * - Phóng to/thu nhỏ (1×–4×): bấm ảnh để phóng 2× đúng chỗ bấm, bấm lại để về;
+ *   nút − / + trên thanh, phím + − 0; cuộn chuột / chụm trackpad quanh con
+ *   trỏ; chụm hai ngón trên điện thoại. Đang phóng thì kéo để xem chỗ khác.
+ * - Escape, nút ✕ hoặc bấm ra nền tối để đóng. Tiêu điểm bị giữ trong lớp phủ
+ *   và trả về chỗ cũ khi đóng; nền trang khoá cuộn (`OlFocusTrapService`).
+ * - Escape đi qua ngăn xếp `OlOverlayContainer`: mở trình xem trong modal rồi
+ *   nhấn Escape chỉ đóng trình xem, modal còn nguyên.
+ *
+ * Dùng riêng được (`[(open)]` + `[images]` + `[(index)]`); `ol-file-upload`
+ * chế độ `image`/`images` dùng nó để xem ảnh vừa chọn.
+ */
+class OlImagePreview {
+    images = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "images" }] : /* istanbul ignore next */ []));
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Ảnh đang xem, tính từ 0. */
+    index = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    closed = output();
+    panel = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
+    thumbStrip = viewChild('thumbStrip', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thumbStrip" }] : /* istanbul ignore next */ []));
+    imageEl = viewChild('mainImage', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "imageEl" }] : /* istanbul ignore next */ []));
+    zoom = signal(IDENTITY, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+    dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    zoomPercent = computed(() => Math.round(this.zoom().scale * 100), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomPercent" }] : /* istanbul ignore next */ []));
+    canZoomIn = computed(() => this.zoom().scale < MAX_ZOOM, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canZoomIn" }] : /* istanbul ignore next */ []));
+    canZoomOut = computed(() => this.zoom().scale > MIN_ZOOM, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canZoomOut" }] : /* istanbul ignore next */ []));
+    imageStyle = computed(() => {
+        const { scale, x, y } = this.zoom();
+        return `transform: translate(${x}px, ${y}px) scale(${scale})`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "imageStyle" }] : /* istanbul ignore next */ []));
+    imageClasses = computed(() => {
+        const base = 'max-h-full max-w-full rounded-md object-contain shadow-xl select-none touch-none origin-center will-change-transform focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle';
+        // Đang kéo/chụm thì bỏ transition — ảnh phải bám ngón tay, không trễ.
+        const motion = this.dragging() ? '' : 'transition-transform duration-200 ease-out';
+        const cursor = this.zoom().scale > 1
+            ? this.dragging()
+                ? 'cursor-grabbing'
+                : 'cursor-grab'
+            : 'cursor-zoom-in';
+        return `${base} ${motion} ${cursor}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "imageClasses" }] : /* istanbul ignore next */ []));
+    /** Ngón tay / chuột đang ấn trên ảnh, theo pointerId. */
+    pointers = new Map();
+    pinchStart = null;
+    moved = 0;
+    /** Vừa kéo xong: cú `click` theo sau không được tính là bấm (phóng / đóng). */
+    suppressClick = false;
+    focusTrap = inject(OlFocusTrapService);
+    overlayContainer = inject(OlOverlayContainer);
+    releaseEscape = null;
+    count = computed(() => this.images().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    /** Kẹp chỉ số: danh sách ảnh có thể ngắn lại (vừa xoá ảnh) trong lúc đang mở. */
+    current = computed(() => {
+        const n = this.count();
+        return n ? Math.min(Math.max(this.index(), 0), n - 1) : 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    image = computed(() => this.images()[this.current()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const el = this.panel()?.nativeElement;
+            if (this.open() && el && this.count()) {
+                if (!this.releaseEscape) {
+                    this.focusTrap.trap(el);
+                    this.releaseEscape = this.overlayContainer.register(() => this.close());
+                }
+            }
+            else {
+                this.releaseTraps();
+            }
+        });
+        // Ảnh đang xem luôn nằm trong tầm nhìn của dải ảnh nhỏ (điện thoại chỉ
+        // thấy 4–5 ô; lướt → tới ảnh thứ 8 thì ô của nó phải trượt vào).
+        effect(() => {
+            const strip = this.thumbStrip()?.nativeElement;
+            const thumb = strip?.children[this.current()];
+            thumb?.scrollIntoView?.({ block: 'nearest', inline: 'center', behavior: 'smooth' });
+        });
+        // Đổi ảnh hoặc mở lại: về cỡ gốc — không mang mức phóng của ảnh trước.
+        effect(() => {
+            this.current();
+            this.open();
+            untracked(() => this.resetZoom());
+        });
+        inject(DestroyRef).onDestroy(() => this.releaseTraps());
+    }
+    /** Ô ảnh nhỏ: ảnh đang xem rõ + viền trắng; ảnh khác mờ, rê chuột thì rõ. */
+    thumbClasses(i) {
+        const base = 'size-14 shrink-0 overflow-hidden rounded-md transition focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle sm:size-16';
+        return i === this.current()
+            ? `${base} ring-2 ring-fg-white opacity-100`
+            : `${base} opacity-50 hover:opacity-100`;
+    }
+    close() {
+        if (!this.open())
+            return;
+        this.pointers.clear();
+        this.open.set(false);
+        this.closed.emit();
+    }
+    next() {
+        this.go(1);
+    }
+    prev() {
+        this.go(-1);
+    }
+    go(step) {
+        const n = this.count();
+        if (n < 2)
+            return;
+        this.index.set((((this.current() + step) % n) + n) % n);
+    }
+    onKeydown(event) {
+        if (event.key === 'ArrowRight')
+            this.next();
+        else if (event.key === 'ArrowLeft')
+            this.prev();
+        else if (event.key === '+' || event.key === '=')
+            this.zoomIn();
+        else if (event.key === '-')
+            this.zoomOut();
+        else if (event.key === '0')
+            this.resetZoom();
+        else
+            return;
+        event.preventDefault();
+    }
+    /** Bấm đúng nền tối (không phải ảnh hay nút) thì đóng. */
+    onBackdropClick(event) {
+        if (this.suppressClick) {
+            this.suppressClick = false;
+            return;
+        }
+        if (event.target === event.currentTarget)
+            this.close();
+    }
+    // ── Phóng / kéo ────────────────────────────────────────────────────
+    zoomIn() {
+        this.zoomAround(this.zoom().scale * ZOOM_STEP, 0, 0);
+    }
+    zoomOut() {
+        this.zoomAround(this.zoom().scale / ZOOM_STEP, 0, 0);
+    }
+    /** Bàn phím trên ảnh (Enter / Space): phóng 2× quanh tâm, hoặc về cỡ gốc. */
+    toggleZoom() {
+        if (this.zoom().scale > 1)
+            this.resetZoom();
+        else
+            this.zoomAround(2, 0, 0);
+    }
+    resetZoom() {
+        this.zoom.set(IDENTITY);
+    }
+    /** Kích thước ảnh khi CHƯA phóng (offsetWidth không tính transform). */
+    imageSize() {
+        const img = this.imageEl()?.nativeElement;
+        return { width: img?.offsetWidth ?? 0, height: img?.offsetHeight ?? 0 };
+    }
+    /**
+     * Điểm màn hình → toạ độ tính từ TÂM ảnh lúc chưa phóng. Hộp đã biến đổi có
+     * tâm = tâm gốc + (x, y) — phóng quanh tâm không dời tâm.
+     */
+    toCenter(clientX, clientY) {
+        const rect = this.imageEl().nativeElement.getBoundingClientRect();
+        const { x, y } = this.zoom();
+        return {
+            qx: clientX - (rect.left + rect.width / 2) + x,
+            qy: clientY - (rect.top + rect.height / 2) + y,
+        };
+    }
+    zoomAround(scale, qx, qy) {
+        const { width, height } = this.imageSize();
+        this.zoom.set(zoomAt(this.zoom(), scale, qx, qy, width, height));
+    }
+    /** Bấm ảnh: đang ở cỡ gốc thì phóng 2× đúng chỗ bấm, đang phóng thì về. */
+    onImageClick(event) {
+        event.stopPropagation();
+        if (this.suppressClick) {
+            this.suppressClick = false;
+            return;
+        }
+        if (this.zoom().scale > 1)
+            return this.resetZoom();
+        const { qx, qy } = this.toCenter(event.clientX, event.clientY);
+        this.zoomAround(2, qx, qy);
+    }
+    /** Cuộn chuột / chụm trackpad (trình duyệt gửi wheel + ctrlKey): phóng quanh con trỏ. */
+    onWheel(event) {
+        event.preventDefault();
+        const { qx, qy } = this.toCenter(event.clientX, event.clientY);
+        this.zoomAround(this.zoom().scale * Math.exp(-event.deltaY * 0.002), qx, qy);
+    }
+    onPointerDown(event) {
+        event.target.setPointerCapture?.(event.pointerId);
+        this.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+        this.moved = 0;
+        // Kéo bằng cảm ứng thì trình duyệt KHÔNG bắn click sau đó — cờ từ lần kéo
+        // trước sẽ treo và nuốt mất lần chạm kế tiếp (đo iPhone 2026-09-28).
+        this.suppressClick = false;
+        if (this.pointers.size === 2) {
+            this.pinchStart = { distance: this.pinchDistance(), scale: this.zoom().scale };
+        }
+        this.dragging.set(this.pointers.size === 2 || this.zoom().scale > 1);
+    }
+    onPointerMove(event) {
+        const last = this.pointers.get(event.pointerId);
+        if (!last)
+            return;
+        const dx = event.clientX - last.x;
+        const dy = event.clientY - last.y;
+        this.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+        this.moved += Math.abs(dx) + Math.abs(dy);
+        if (this.pointers.size === 2 && this.pinchStart) {
+            const [a, b] = [...this.pointers.values()];
+            const { qx, qy } = this.toCenter((a.x + b.x) / 2, (a.y + b.y) / 2);
+            const ratio = this.pinchDistance() / (this.pinchStart.distance || 1);
+            this.zoomAround(this.pinchStart.scale * ratio, qx, qy);
+        }
+        else if (this.pointers.size === 1 && this.zoom().scale > 1) {
+            const { width, height } = this.imageSize();
+            this.zoom.set(panBy(this.zoom(), dx, dy, width, height));
+        }
+    }
+    onPointerUp(event) {
+        this.pointers.delete(event.pointerId);
+        if (this.pointers.size < 2)
+            this.pinchStart = null;
+        if (this.pointers.size === 0) {
+            this.dragging.set(false);
+            if (this.moved > DRAG_THRESHOLD)
+                this.suppressClick = true;
+        }
+    }
+    pinchDistance() {
+        const [a, b] = [...this.pointers.values()];
+        return Math.hypot(a.x - b.x, a.y - b.y);
+    }
+    releaseTraps() {
+        if (!this.releaseEscape)
+            return;
+        this.focusTrap.release();
+        this.releaseEscape();
+        this.releaseEscape = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlImagePreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlImagePreview, isStandalone: true, selector: "ol-image-preview", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", index: "indexChange", closed: "closed" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "thumbStrip", first: true, predicate: ["thumbStrip"], descendants: true, isSignal: true }, { propertyName: "imageEl", first: true, predicate: ["mainImage"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open() && image(); as img) {\n  <div\n    #panel\n    role=\"dialog\"\n    aria-modal=\"true\"\n    tabindex=\"-1\"\n    [attr.aria-label]=\"'Xem \u1EA3nh ' + (current() + 1) + ' / ' + count()\"\n    class=\"fixed inset-0 z-modal flex flex-col bg-overlay-backdrop backdrop-blur-xs outline-hidden\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    <!-- Thanh tr\u00EAn: s\u1ED1 th\u1EE9 t\u1EF1 \u00B7 ph\u00F3ng/thu \u00B7 \u0111\u00F3ng. -->\n    <div class=\"flex items-center justify-between gap-3 px-4 py-3 text-fg-white\">\n      <span class=\"text-sm font-medium tabular-nums\" aria-live=\"polite\">\n        @if (count() > 1) {\n          {{ current() + 1 }} / {{ count() }}\n        }\n      </span>\n      <div\n        class=\"ms-auto flex items-center gap-1 rounded-full bg-neutral-primary p-1 text-heading shadow-lg\"\n      >\n        <button\n          type=\"button\"\n          aria-label=\"Thu nh\u1ECF\"\n          class=\"inline-flex size-8 items-center justify-center rounded-full transition-colors hover:bg-neutral-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle disabled:cursor-not-allowed disabled:opacity-40\"\n          [disabled]=\"!canZoomOut()\"\n          (click)=\"zoomOut()\"\n        >\n          <ol-icon name=\"lucide:zoom-out\" size=\"sm\" />\n        </button>\n        <button\n          type=\"button\"\n          aria-label=\"V\u1EC1 c\u1EE1 g\u1ED1c\"\n          class=\"min-w-12 rounded-full px-1 text-center text-xs font-semibold tabular-nums transition-colors hover:bg-neutral-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n          (click)=\"resetZoom()\"\n        >\n          {{ zoomPercent() }}%\n        </button>\n        <button\n          type=\"button\"\n          aria-label=\"Ph\u00F3ng to\"\n          class=\"inline-flex size-8 items-center justify-center rounded-full transition-colors hover:bg-neutral-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle disabled:cursor-not-allowed disabled:opacity-40\"\n          [disabled]=\"!canZoomIn()\"\n          (click)=\"zoomIn()\"\n        >\n          <ol-icon name=\"lucide:zoom-in\" size=\"sm\" />\n        </button>\n      </div>\n      <button\n        type=\"button\"\n        data-ol-dismiss\n        aria-label=\"\u0110\u00F3ng xem \u1EA3nh\"\n        class=\"inline-flex size-10 items-center justify-center rounded-full bg-neutral-primary text-heading shadow-lg transition-colors hover:bg-neutral-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n        (click)=\"close()\"\n      >\n        <ol-icon name=\"close\" size=\"base\" />\n      </button>\n    </div>\n\n    <!--\n      \u1EA2nh: v\u1EEBa khung, kh\u00F4ng c\u1EAFt (object-contain). B\u1EA5m n\u1EC1n t\u1ED1i quanh \u1EA3nh \u0111\u1EC3 \u0111\u00F3ng.\n      `overflow-hidden`: \u1EA3nh ph\u00F3ng to kh\u00F4ng \u0111\u01B0\u1EE3c tr\u00E0n \u0111\u00E8 l\u00EAn thanh tr\u00EAn v\u00E0 d\u1EA3i\n      \u1EA3nh nh\u1ECF \u2014 \u0111o 2026-09-28, \u1EA3nh 364% che n\u00FAt \"Ph\u00F3ng to\", kh\u00F4ng b\u1EA5m \u0111\u01B0\u1EE3c.\n      `tabindex=\"-1\"` \u1EDF khung ngo\u00E0i: b\u1EA5m v\u00E0o \u1EA3nh (kh\u00F4ng focus \u0111\u01B0\u1EE3c) th\u00EC ti\u00EAu\n      \u0111i\u1EC3m \u1EDF l\u1EA1i tr\u00ECnh xem, ph\u00EDm + \u2212 0 \u2190 \u2192 v\u1EABn ch\u1EA1y.\n    -->\n    <div\n      class=\"relative flex min-h-0 flex-1 items-center justify-center overflow-hidden px-4 pb-4\"\n      (click)=\"onBackdropClick($event)\"\n    >\n      <img\n        #mainImage\n        [src]=\"img.src\"\n        [alt]=\"img.alt || ''\"\n        [class]=\"imageClasses()\"\n        [style]=\"imageStyle()\"\n        draggable=\"false\"\n        tabindex=\"0\"\n        (click)=\"onImageClick($event)\"\n        (keydown.enter)=\"toggleZoom(); $event.preventDefault()\"\n        (keydown.space)=\"toggleZoom(); $event.preventDefault()\"\n        (wheel)=\"onWheel($event)\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerUp($event)\"\n      />\n\n      @if (count() > 1) {\n        <button\n          type=\"button\"\n          aria-label=\"\u1EA2nh tr\u01B0\u1EDBc\"\n          class=\"absolute start-3 top-1/2 inline-flex size-11 -translate-y-1/2 items-center justify-center rounded-full bg-neutral-primary text-heading shadow-lg transition-colors hover:bg-neutral-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n          (click)=\"prev()\"\n        >\n          <ol-icon name=\"chevron-left\" size=\"base\" />\n        </button>\n        <button\n          type=\"button\"\n          aria-label=\"\u1EA2nh sau\"\n          class=\"absolute end-3 top-1/2 inline-flex size-11 -translate-y-1/2 items-center justify-center rounded-full bg-neutral-primary text-heading shadow-lg transition-colors hover:bg-neutral-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n          (click)=\"next()\"\n        >\n          <ol-icon name=\"chevron-right\" size=\"base\" />\n        </button>\n      }\n    </div>\n\n    @if (img.alt) {\n      <p class=\"truncate px-4 pb-3 text-center text-sm text-fg-white\">{{ img.alt }}</p>\n    }\n\n    <!--\n      D\u1EA3i \u1EA3nh nh\u1ECF: th\u1EA5y c\u00E1c \u1EA3nh c\u00F2n l\u1EA1i, b\u1EA5m \u0111\u1EC3 nh\u1EA3y t\u1EDBi; \u1EA3nh \u0111ang xem c\u00F3 vi\u1EC1n\n      v\u00E0 t\u1EF1 cu\u1ED9n v\u00E0o t\u1EA7m nh\u00ECn. Cu\u1ED9n ngang khi d\u00E0i (\u0111i\u1EC7n tho\u1EA1i), c\u0103n gi\u1EEFa khi\n      ng\u1EAFn \u2014 b\u1EB1ng ms-auto/me-auto \u1EDF \u00F4 \u0111\u1EA7u/cu\u1ED1i, KH\u00D4NG justify-center: n\u00F3 c\u1EAFt\n      m\u1EA5t c\u00E1c \u00F4 \u0111\u1EA7u khi d\u1EA3i tr\u00E0n v\u00E0 kh\u00F4ng cu\u1ED9n t\u1EDBi \u0111\u01B0\u1EE3c. L\u1EC1 d\u01B0\u1EDBi max() v\u1EDBi\n      safe-area: ch\u1EEBa v\u1EA1ch Home c\u1EE7a iPhone.\n    -->\n    @if (count() > 1) {\n      <div\n        #thumbStrip\n        class=\"flex shrink-0 gap-2 overflow-x-auto px-4 pt-1 pb-[max(1rem,env(safe-area-inset-bottom))] [scrollbar-width:none] [&>:first-child]:ms-auto [&>:last-child]:me-auto\"\n        role=\"group\"\n        aria-label=\"Danh s\u00E1ch \u1EA3nh\"\n      >\n        @for (thumb of images(); track $index; let i = $index) {\n          <button\n            type=\"button\"\n            [attr.aria-label]=\"'Xem \u1EA3nh ' + (i + 1) + (thumb.alt ? ': ' + thumb.alt : '')\"\n            [attr.aria-current]=\"i === current() ? 'true' : null\"\n            [class]=\"thumbClasses(i)\"\n            (click)=\"index.set(i)\"\n          >\n            <img [src]=\"thumb.src\" alt=\"\" class=\"size-full object-cover\" loading=\"lazy\" />\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlImagePreview, decorators: [{
+            type: Component,
+            args: [{ selector: 'ol-image-preview', standalone: true, imports: [OlIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open() && image(); as img) {\n  <div\n    #panel\n    role=\"dialog\"\n    aria-modal=\"true\"\n    tabindex=\"-1\"\n    [attr.aria-label]=\"'Xem \u1EA3nh ' + (current() + 1) + ' / ' + count()\"\n    class=\"fixed inset-0 z-modal flex flex-col bg-overlay-backdrop backdrop-blur-xs outline-hidden\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    <!-- Thanh tr\u00EAn: s\u1ED1 th\u1EE9 t\u1EF1 \u00B7 ph\u00F3ng/thu \u00B7 \u0111\u00F3ng. -->\n    <div class=\"flex items-center justify-between gap-3 px-4 py-3 text-fg-white\">\n      <span class=\"text-sm font-medium tabular-nums\" aria-live=\"polite\">\n        @if (count() > 1) {\n          {{ current() + 1 }} / {{ count() }}\n        }\n      </span>\n      <div\n        class=\"ms-auto flex items-center gap-1 rounded-full bg-neutral-primary p-1 text-heading shadow-lg\"\n      >\n        <button\n          type=\"button\"\n          aria-label=\"Thu nh\u1ECF\"\n          class=\"inline-flex size-8 items-center justify-center rounded-full transition-colors hover:bg-neutral-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle disabled:cursor-not-allowed disabled:opacity-40\"\n          [disabled]=\"!canZoomOut()\"\n          (click)=\"zoomOut()\"\n        >\n          <ol-icon name=\"lucide:zoom-out\" size=\"sm\" />\n        </button>\n        <button\n          type=\"button\"\n          aria-label=\"V\u1EC1 c\u1EE1 g\u1ED1c\"\n          class=\"min-w-12 rounded-full px-1 text-center text-xs font-semibold tabular-nums transition-colors hover:bg-neutral-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n          (click)=\"resetZoom()\"\n        >\n          {{ zoomPercent() }}%\n        </button>\n        <button\n          type=\"button\"\n          aria-label=\"Ph\u00F3ng to\"\n          class=\"inline-flex size-8 items-center justify-center rounded-full transition-colors hover:bg-neutral-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle disabled:cursor-not-allowed disabled:opacity-40\"\n          [disabled]=\"!canZoomIn()\"\n          (click)=\"zoomIn()\"\n        >\n          <ol-icon name=\"lucide:zoom-in\" size=\"sm\" />\n        </button>\n      </div>\n      <button\n        type=\"button\"\n        data-ol-dismiss\n        aria-label=\"\u0110\u00F3ng xem \u1EA3nh\"\n        class=\"inline-flex size-10 items-center justify-center rounded-full bg-neutral-primary text-heading shadow-lg transition-colors hover:bg-neutral-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n        (click)=\"close()\"\n      >\n        <ol-icon name=\"close\" size=\"base\" />\n      </button>\n    </div>\n\n    <!--\n      \u1EA2nh: v\u1EEBa khung, kh\u00F4ng c\u1EAFt (object-contain). B\u1EA5m n\u1EC1n t\u1ED1i quanh \u1EA3nh \u0111\u1EC3 \u0111\u00F3ng.\n      `overflow-hidden`: \u1EA3nh ph\u00F3ng to kh\u00F4ng \u0111\u01B0\u1EE3c tr\u00E0n \u0111\u00E8 l\u00EAn thanh tr\u00EAn v\u00E0 d\u1EA3i\n      \u1EA3nh nh\u1ECF \u2014 \u0111o 2026-09-28, \u1EA3nh 364% che n\u00FAt \"Ph\u00F3ng to\", kh\u00F4ng b\u1EA5m \u0111\u01B0\u1EE3c.\n      `tabindex=\"-1\"` \u1EDF khung ngo\u00E0i: b\u1EA5m v\u00E0o \u1EA3nh (kh\u00F4ng focus \u0111\u01B0\u1EE3c) th\u00EC ti\u00EAu\n      \u0111i\u1EC3m \u1EDF l\u1EA1i tr\u00ECnh xem, ph\u00EDm + \u2212 0 \u2190 \u2192 v\u1EABn ch\u1EA1y.\n    -->\n    <div\n      class=\"relative flex min-h-0 flex-1 items-center justify-center overflow-hidden px-4 pb-4\"\n      (click)=\"onBackdropClick($event)\"\n    >\n      <img\n        #mainImage\n        [src]=\"img.src\"\n        [alt]=\"img.alt || ''\"\n        [class]=\"imageClasses()\"\n        [style]=\"imageStyle()\"\n        draggable=\"false\"\n        tabindex=\"0\"\n        (click)=\"onImageClick($event)\"\n        (keydown.enter)=\"toggleZoom(); $event.preventDefault()\"\n        (keydown.space)=\"toggleZoom(); $event.preventDefault()\"\n        (wheel)=\"onWheel($event)\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerUp($event)\"\n      />\n\n      @if (count() > 1) {\n        <button\n          type=\"button\"\n          aria-label=\"\u1EA2nh tr\u01B0\u1EDBc\"\n          class=\"absolute start-3 top-1/2 inline-flex size-11 -translate-y-1/2 items-center justify-center rounded-full bg-neutral-primary text-heading shadow-lg transition-colors hover:bg-neutral-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n          (click)=\"prev()\"\n        >\n          <ol-icon name=\"chevron-left\" size=\"base\" />\n        </button>\n        <button\n          type=\"button\"\n          aria-label=\"\u1EA2nh sau\"\n          class=\"absolute end-3 top-1/2 inline-flex size-11 -translate-y-1/2 items-center justify-center rounded-full bg-neutral-primary text-heading shadow-lg transition-colors hover:bg-neutral-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n          (click)=\"next()\"\n        >\n          <ol-icon name=\"chevron-right\" size=\"base\" />\n        </button>\n      }\n    </div>\n\n    @if (img.alt) {\n      <p class=\"truncate px-4 pb-3 text-center text-sm text-fg-white\">{{ img.alt }}</p>\n    }\n\n    <!--\n      D\u1EA3i \u1EA3nh nh\u1ECF: th\u1EA5y c\u00E1c \u1EA3nh c\u00F2n l\u1EA1i, b\u1EA5m \u0111\u1EC3 nh\u1EA3y t\u1EDBi; \u1EA3nh \u0111ang xem c\u00F3 vi\u1EC1n\n      v\u00E0 t\u1EF1 cu\u1ED9n v\u00E0o t\u1EA7m nh\u00ECn. Cu\u1ED9n ngang khi d\u00E0i (\u0111i\u1EC7n tho\u1EA1i), c\u0103n gi\u1EEFa khi\n      ng\u1EAFn \u2014 b\u1EB1ng ms-auto/me-auto \u1EDF \u00F4 \u0111\u1EA7u/cu\u1ED1i, KH\u00D4NG justify-center: n\u00F3 c\u1EAFt\n      m\u1EA5t c\u00E1c \u00F4 \u0111\u1EA7u khi d\u1EA3i tr\u00E0n v\u00E0 kh\u00F4ng cu\u1ED9n t\u1EDBi \u0111\u01B0\u1EE3c. L\u1EC1 d\u01B0\u1EDBi max() v\u1EDBi\n      safe-area: ch\u1EEBa v\u1EA1ch Home c\u1EE7a iPhone.\n    -->\n    @if (count() > 1) {\n      <div\n        #thumbStrip\n        class=\"flex shrink-0 gap-2 overflow-x-auto px-4 pt-1 pb-[max(1rem,env(safe-area-inset-bottom))] [scrollbar-width:none] [&>:first-child]:ms-auto [&>:last-child]:me-auto\"\n        role=\"group\"\n        aria-label=\"Danh s\u00E1ch \u1EA3nh\"\n      >\n        @for (thumb of images(); track $index; let i = $index) {\n          <button\n            type=\"button\"\n            [attr.aria-label]=\"'Xem \u1EA3nh ' + (i + 1) + (thumb.alt ? ': ' + thumb.alt : '')\"\n            [attr.aria-current]=\"i === current() ? 'true' : null\"\n            [class]=\"thumbClasses(i)\"\n            (click)=\"index.set(i)\"\n          >\n            <img [src]=\"thumb.src\" alt=\"\" class=\"size-full object-cover\" loading=\"lazy\" />\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { images: [{ type: i0.Input, args: [{ isSignal: true, alias: "images", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }, { type: i0.Output, args: ["indexChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], thumbStrip: [{ type: i0.ViewChild, args: ['thumbStrip', { isSignal: true }] }], imageEl: [{ type: i0.ViewChild, args: ['mainImage', { isSignal: true }] }] } });
+
+let nextId = 0;
+/**
+ * Khung tải tệp có tiêu đề — Figma `ol-file-input-form` "Button header + …"
+ * (3587:6834 · 3592:6990 · 3603:2606 · 3611:3494).
+ *
+ * ## Component KHÔNG tự tải lên máy chủ
+ *
+ * Nó nhận tệp, kiểm định dạng/dung lượng/số lượng, thêm vào `files` với
+ * `status: 'idle'` rồi phát `(filesAdded)`. Nơi gọi gửi HTTP và cập nhật
+ * `status`/`progress` của từng tệp qua `[(files)]`. Để component tự gọi HTTP
+ * thì nó phải biết URL, header xác thực, dạng phản hồi — ba thứ khác nhau ở
+ * mỗi màn.
+ */
+class OlFileUpload {
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    mode = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Chuỗi `accept` của `<input type="file">` — cũng dùng để KIỂM tệp kéo thả. */
+    accept = input('*', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    /** Byte. 0 → không giới hạn. */
+    maxSize = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    /** Chỉ cho `multiple`/`list`. 0 → không giới hạn. */
+    maxFiles = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxFiles" }] : /* istanbul ignore next */ []));
+    /** Nhãn nút ở đầu khung. Rỗng → tự chọn theo chế độ và trạng thái. */
+    buttonLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
+    /** Hiện nút 👁 trên từng tệp. */
+    previewable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewable" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Nhận tệp dán (Ctrl+V / ⌘V) ở BẤT KỲ ĐÂU trên trang, không chỉ khi tiêu
+     * điểm ở trong khung. Chỉ bật khi màn có MỘT khung tải — hai khung cùng bật
+     * thì một lần dán vào cả hai. Đang gõ trong ô nhập chữ thì bỏ qua.
+     */
+    pasteFromPage = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pasteFromPage" }] : /* istanbul ignore next */ []));
+    /** Dòng gợi ý dưới khung, ví dụ định dạng cho phép. */
+    helperText = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+    files = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    /** Tệp VỪA nhận, đã qua kiểm — nơi gọi bắt đầu tải lên từ đây. */
+    filesAdded = output();
+    fileRemove = output();
+    filePreview = output();
+    fileRetry = output();
+    /** Tệp bị loại kèm lý do — component đã tự hiện câu lỗi dưới khung. */
+    rejected = output();
+    fileInput = viewChild.required('fileInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    uid = `ol-file-upload-${nextId++}`;
+    errors = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    isMultiple = computed(() => this.mode() === 'multiple' || this.mode() === 'list' || this.mode() === 'images', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMultiple" }] : /* istanbul ignore next */ []));
+    isImageMode = computed(() => this.mode() === 'image' || this.mode() === 'images', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isImageMode" }] : /* istanbul ignore next */ []));
+    hasFiles = computed(() => this.files().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasFiles" }] : /* istanbul ignore next */ []));
+    limitReached = computed(() => this.isMultiple() && this.maxFiles() > 0 && this.files().length >= this.maxFiles(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "limitReached" }] : /* istanbul ignore next */ []));
+    resolvedButtonLabel = computed(() => {
+        if (this.buttonLabel())
+            return this.buttonLabel();
+        if (this.isMultiple())
+            return 'Tải lên';
+        return this.hasFiles() ? 'Thay đổi' : 'Chọn tệp';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedButtonLabel" }] : /* istanbul ignore next */ []));
+    hintText = computed(() => this.maxSize() > 0 ? `Dung lượng tối đa: ${formatFileSize(this.maxSize())}` : '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintText" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => [this.helperText() ? `${this.uid}-help` : '', this.errors().length ? `${this.uid}-err` : '']
+        .filter(Boolean)
+        .join(' '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Ảnh xem trước cho chế độ `image`/`images`, theo id tệp: `url` có sẵn (ảnh
+     * đã trên máy chủ) hoặc object URL tạo từ `File`.
+     *
+     * Object URL phải THU HỒI khi tệp bị xoá / component huỷ, không thì mỗi ảnh
+     * rò một khối bộ nhớ bằng cả ảnh. Giữ theo id để thêm một ảnh không tạo lại
+     * URL của các ảnh cũ (ảnh cũ sẽ nháy vì `src` đổi).
+     */
+    imageUrls = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "imageUrls" }] : /* istanbul ignore next */ []));
+    objectUrls = new Map();
+    /** Ảnh cho trình xem — chỉ tệp đã có URL. */
+    previewImages = computed(() => this.files()
+        .filter((f) => this.imageUrls()[f.id])
+        .map((f) => ({ src: this.imageUrls()[f.id], alt: f.name })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewImages" }] : /* istanbul ignore next */ []));
+    previewOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewOpen" }] : /* istanbul ignore next */ []));
+    previewIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewIndex" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect((onCleanup) => {
+            if (!this.pasteFromPage() || typeof document === 'undefined')
+                return;
+            const handler = (e) => {
+                // Dán TRONG khung thì host đã xử lý (sự kiện nổi lên document sau).
+                if (this.host.nativeElement.contains(e.target))
+                    return;
+                // Một khung/ô tải KHÁC trên trang đã nhận tệp này — không nhận lần hai.
+                if (e.defaultPrevented)
+                    return;
+                if (isEditableTarget(e.target))
+                    return;
+                this.onPaste(e);
+            };
+            document.addEventListener('paste', handler);
+            onCleanup(() => document.removeEventListener('paste', handler));
+        });
+        effect(() => this.syncImageUrls());
+        inject(DestroyRef).onDestroy(() => {
+            this.objectUrls.forEach((url) => URL.revokeObjectURL(url));
+            this.objectUrls.clear();
+        });
+    }
+    /** Tạo URL cho ảnh mới, thu hồi URL của ảnh đã bị xoá. */
+    syncImageUrls() {
+        const files = this.isImageMode() ? this.files() : [];
+        const alive = new Set(files.map((f) => f.id));
+        for (const [id, url] of this.objectUrls) {
+            if (!alive.has(id)) {
+                URL.revokeObjectURL(url);
+                this.objectUrls.delete(id);
+            }
+        }
+        const urls = {};
+        for (const f of files) {
+            if (f.url)
+                urls[f.id] = f.url;
+            else if (f.file && typeof URL.createObjectURL === 'function') {
+                if (!this.objectUrls.has(f.id))
+                    this.objectUrls.set(f.id, URL.createObjectURL(f.file));
+                urls[f.id] = this.objectUrls.get(f.id);
+            }
+        }
+        this.imageUrls.set(urls);
+    }
+    /** Mở trình xem tại ảnh của tệp này, và phát `(filePreview)`. */
+    openPreview(file) {
+        const index = this.previewImages().findIndex((img) => img.src === this.imageUrls()[file.id]);
+        if (index < 0)
+            return;
+        this.previewIndex.set(index);
+        this.previewOpen.set(true);
+        this.filePreview.emit(file);
+    }
+    openPicker() {
+        if (this.disabled())
+            return;
+        this.fileInput().nativeElement.click();
+    }
+    onInputChange(event) {
+        const el = event.target;
+        this.addFiles(Array.from(el.files ?? []));
+        // Xoá giá trị để chọn LẠI đúng tệp vừa xoá vẫn bắn `change`.
+        el.value = '';
+    }
+    /** Nhận tệp từ hộp chọn hoặc kéo thả: kiểm, thêm vào `files`, phát sự kiện. */
+    addFiles(incoming) {
+        if (this.disabled() || !incoming.length)
+            return;
+        const single = !this.isMultiple();
+        const { accepted, rejected } = validateFiles(single ? incoming.slice(0, 1) : incoming, {
+            accept: this.accept(),
+            maxSize: this.maxSize(),
+            maxFiles: single ? 0 : this.maxFiles(),
+            existingCount: single ? 0 : this.files().length,
+        });
+        this.errors.set(rejected.map((r) => r.message));
+        if (rejected.length)
+            this.rejected.emit(rejected);
+        if (!accepted.length)
+            return;
+        const added = accepted.map(toUploadFile);
+        // Một tệp: tệp mới THAY tệp cũ — đúng nghĩa nút "Thay đổi".
+        this.files.set(single ? added : [...this.files(), ...added]);
+        this.filesAdded.emit(accepted);
+    }
+    /** Dán tệp khi tiêu điểm trong khung (nút, chip, dòng tệp). */
+    onPaste(event) {
+        if (this.disabled())
+            return;
+        const files = filesFromClipboard(event.clipboardData);
+        if (!files.length)
+            return;
+        event.preventDefault();
+        this.addFiles(files);
+    }
+    /** Thả thêm tệp vào vùng chip đã có tệp. */
+    onListDrop(event) {
+        event.preventDefault();
+        this.addFiles(Array.from(event.dataTransfer?.files ?? []));
+    }
+    removeFile(file) {
+        this.files.set(this.files().filter((f) => f.id !== file.id));
+        this.errors.set([]);
+        this.fileRemove.emit(file);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlFileUpload, isStandalone: true, selector: "ol-file-upload", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, previewable: { classPropertyName: "previewable", publicName: "previewable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, pasteFromPage: { classPropertyName: "pasteFromPage", publicName: "pasteFromPage", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange", filesAdded: "filesAdded", fileRemove: "fileRemove", filePreview: "filePreview", fileRetry: "fileRetry", rejected: "rejected" }, host: { listeners: { "paste": "onPaste($event)" }, classAttribute: "block w-full" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"overflow-hidden rounded-md border bg-neutral-primary\"\n  [class]=\"errors().length ? 'border-danger' : 'border-default'\"\n  [attr.aria-disabled]=\"disabled() || null\"\n>\n  <!-- \u0110\u1EA7u khung: ti\u00EAu \u0111\u1EC1 + n\u00FAt (Figma \"Button header\"). Slot [actions] thay n\u00FAt. -->\n  <div class=\"flex items-center justify-between gap-3 border-b border-default px-3 py-2\">\n    <span class=\"min-w-0 truncate text-sm font-medium text-fg-brand-strong\" [id]=\"uid + '-title'\">\n      {{ title() }}\n      @if (required()) {\n        <span class=\"text-fg-danger\" aria-hidden=\"true\">*</span>\n      }\n    </span>\n    <div class=\"flex shrink-0 items-center gap-2\">\n      <ng-content select=\"[actions]\" />\n      <ol-button\n        size=\"sm\"\n        [pill]=\"true\"\n        [disabled]=\"disabled() || limitReached()\"\n        [ariaLabel]=\"resolvedButtonLabel() + (title() ? ' \u2014 ' + title() : '')\"\n        (btnClick)=\"openPicker()\"\n      >\n        <ol-icon name=\"solar:upload-minimalistic-linear\" [size]=\"16\" />\n        {{ resolvedButtonLabel() }}\n      </ol-button>\n    </div>\n  </div>\n\n  <div class=\"bg-neutral-secondary p-3\">\n    @if (!hasFiles()) {\n      <ol-file-dropzone\n        [compact]=\"true\"\n        [hint]=\"hintText()\"\n        [icon]=\"isImageMode() ? 'solar:gallery-add-linear' : 'solar:upload-minimalistic-linear'\"\n        [title]=\"isImageMode() ? 'Nh\u1EA5n \u0111\u1EC3 ch\u1ECDn \u1EA3nh ho\u1EB7c k\u00E9o th\u1EA3' : 'Nh\u1EA5n \u0111\u1EC3 t\u1EA3i l\u00EAn ho\u1EB7c k\u00E9o th\u1EA3'\"\n        [disabled]=\"disabled()\"\n        [state]=\"errors().length ? 'error' : 'default'\"\n        [describedBy]=\"describedBy()\"\n        (pick)=\"openPicker()\"\n        (filesDropped)=\"addFiles($event)\"\n      />\n    } @else {\n      @switch (mode()) {\n        @case ('image') {\n          <div class=\"relative overflow-hidden rounded-md bg-neutral-tertiary\">\n            @if (imageUrls()[files()[0].id]; as src) {\n              <!-- C\u1EA3 \u1EA3nh l\u00E0 n\u00FAt: b\u1EA5m \u0111\u1EC3 xem ph\u00F3ng to. -->\n              <button\n                type=\"button\"\n                class=\"group block w-full cursor-zoom-in focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle focus-visible:ring-inset\"\n                [attr.aria-label]=\"'Xem \u1EA3nh ' + files()[0].name\"\n                (click)=\"openPreview(files()[0])\"\n              >\n                <img [src]=\"src\" [alt]=\"files()[0].name\" class=\"block h-44 w-full object-cover\" />\n                <span\n                  class=\"absolute start-2 bottom-2 inline-flex items-center gap-1 rounded-full bg-neutral-primary px-2.5 py-1 text-xs font-medium text-heading shadow-sm\"\n                  aria-hidden=\"true\"\n                >\n                  <ol-icon name=\"lucide:zoom-in\" size=\"xs\" />\n                  Xem \u1EA3nh\n                </span>\n              </button>\n            } @else {\n              <div class=\"flex h-44 items-center justify-center text-sm text-body-subtle\">\n                {{ files()[0].name }}\n              </div>\n            }\n            <button\n              type=\"button\"\n              class=\"absolute end-2 top-2 inline-flex size-8 items-center justify-center rounded-full bg-neutral-primary text-heading shadow-sm hover:bg-neutral-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n              [disabled]=\"disabled()\"\n              [attr.aria-label]=\"'Xo\u00E1 \u1EA3nh ' + files()[0].name\"\n              (click)=\"removeFile(files()[0])\"\n            >\n              <ol-icon name=\"close\" size=\"xs\" />\n            </button>\n          </div>\n        }\n        @case ('images') {\n          <!--\n            L\u01B0\u1EDBi \u00F4 vu\u00F4ng. B\u1EA5m \u00F4 \u0111\u1EC3 xem, trong tr\u00ECnh xem l\u01B0\u1EDBt \u2039 \u203A qua m\u1ECDi \u1EA3nh.\n            \u00D4 cu\u1ED1i \"+\" th\u00EAm \u1EA3nh (\u1EA9n khi \u0111\u1EE7 maxFiles). Th\u1EA3 t\u1EC7p v\u00E0o l\u01B0\u1EDBi v\u1EABn nh\u1EADn.\n          -->\n          <ul\n            class=\"grid grid-cols-3 gap-2 sm:grid-cols-4\"\n            [attr.aria-labelledby]=\"uid + '-title'\"\n            (dragover)=\"$event.preventDefault()\"\n            (drop)=\"onListDrop($event)\"\n          >\n            @for (f of files(); track f.id) {\n              <li class=\"relative aspect-square overflow-hidden rounded-md bg-neutral-tertiary\">\n                @if (imageUrls()[f.id]; as src) {\n                  <button\n                    type=\"button\"\n                    class=\"block size-full cursor-zoom-in focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle focus-visible:ring-inset\"\n                    [attr.aria-label]=\"'Xem \u1EA3nh ' + f.name\"\n                    (click)=\"openPreview(f)\"\n                  >\n                    <img [src]=\"src\" [alt]=\"f.name\" class=\"size-full object-cover\" />\n                  </button>\n                } @else {\n                  <span\n                    class=\"flex size-full items-center justify-center p-2 text-center text-xs break-all text-body-subtle\"\n                  >\n                    {{ f.name }}\n                  </span>\n                }\n                <button\n                  type=\"button\"\n                  class=\"absolute end-1 top-1 inline-flex size-7 items-center justify-center rounded-full bg-neutral-primary text-heading shadow-sm hover:bg-neutral-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n                  [disabled]=\"disabled()\"\n                  [attr.aria-label]=\"'Xo\u00E1 \u1EA3nh ' + f.name\"\n                  (click)=\"removeFile(f)\"\n                >\n                  <ol-icon name=\"close\" size=\"xs\" />\n                </button>\n              </li>\n            }\n            @if (!limitReached()) {\n              <li class=\"aspect-square\">\n                <button\n                  type=\"button\"\n                  class=\"flex size-full flex-col items-center justify-center gap-1 rounded-md border border-dashed border-default text-xs font-medium text-body-subtle transition-colors hover:border-brand hover:text-fg-brand focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle disabled:cursor-not-allowed disabled:opacity-50\"\n                  [disabled]=\"disabled()\"\n                  (click)=\"openPicker()\"\n                >\n                  <ol-icon name=\"solar:gallery-add-linear\" size=\"base\" />\n                  Th\u00EAm \u1EA3nh\n                </button>\n              </li>\n            }\n          </ul>\n        }\n        @case ('single') {\n          <ol-file-item\n            variant=\"card\"\n            [file]=\"files()[0]\"\n            [disabled]=\"disabled()\"\n            (remove)=\"removeFile($event)\"\n          />\n        }\n        @case ('multiple') {\n          <!--\n            Th\u1EA3 th\u00EAm t\u1EC7p v\u00E0o v\u00F9ng chip v\u1EABn nh\u1EADn \u2014 k\u00E9o th\u1EA3 kh\u00F4ng b\u1EAFt bu\u1ED9c ph\u1EA3i\n            nh\u1EAFm \u0111\u00FAng \u00F4 tr\u1ED1ng. max-h + cu\u1ED9n d\u1ECDc: danh s\u00E1ch d\u00E0i kh\u00F4ng \u0111\u1EA9y form.\n          -->\n          <ul\n            class=\"flex max-h-36 flex-wrap gap-1.5 overflow-y-auto\"\n            [attr.aria-labelledby]=\"uid + '-title'\"\n            (dragover)=\"$event.preventDefault()\"\n            (drop)=\"onListDrop($event)\"\n          >\n            @for (f of files(); track f.id) {\n              <li class=\"min-w-0 max-w-full\">\n                <ol-file-item\n                  variant=\"chip\"\n                  [file]=\"f\"\n                  [previewable]=\"previewable()\"\n                  [disabled]=\"disabled()\"\n                  (remove)=\"removeFile($event)\"\n                  (preview)=\"filePreview.emit($event)\"\n                />\n              </li>\n            }\n          </ul>\n        }\n        @default {\n          <ul class=\"flex flex-col gap-2\" [attr.aria-labelledby]=\"uid + '-title'\">\n            @for (f of files(); track f.id) {\n              <li>\n                <ol-file-item\n                  [file]=\"f\"\n                  [previewable]=\"previewable()\"\n                  [disabled]=\"disabled()\"\n                  (remove)=\"removeFile($event)\"\n                  (preview)=\"filePreview.emit($event)\"\n                  (retry)=\"fileRetry.emit($event)\"\n                />\n              </li>\n            }\n          </ul>\n        }\n      }\n    }\n  </div>\n</div>\n\n<!--\n  `sr-only` ch\u1EE9 KH\u00D4NG `hidden`: `display: none` lo\u1EA1i \u00F4 kh\u1ECFi c\u00E2y tr\u1EE3 n\u0103ng. M\u1EDF\n  b\u1EB1ng n\u00FAt \u0111\u1EA7u khung ho\u1EB7c v\u00F9ng k\u00E9o th\u1EA3; tabindex -1 \u0111\u1EC3 Tab kh\u00F4ng d\u1EEBng hai l\u1EA7n.\n-->\n<input\n  #fileInput\n  type=\"file\"\n  class=\"sr-only\"\n  tabindex=\"-1\"\n  aria-hidden=\"true\"\n  [accept]=\"accept()\"\n  [multiple]=\"isMultiple()\"\n  [disabled]=\"disabled()\"\n  (change)=\"onInputChange($event)\"\n/>\n\n@if (errors().length) {\n  <ul [id]=\"uid + '-err'\" class=\"mt-1.5 space-y-0.5 text-xs text-fg-danger\" role=\"alert\">\n    @for (msg of errors(); track msg) {\n      <li>{{ msg }}</li>\n    }\n  </ul>\n}\n<ol-image-preview [images]=\"previewImages()\" [(open)]=\"previewOpen\" [(index)]=\"previewIndex\" />\n\n@if (helperText()) {\n  <p [id]=\"uid + '-help'\" class=\"mt-1.5 text-xs text-body-subtle\">{{ helperText() }}</p>\n}\n", dependencies: [{ kind: "component", type: OlButton, selector: "ol-button", inputs: ["color", "size", "pill", "outline", "iconOnly", "loading", "disabled", "type", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed"], outputs: ["btnClick"] }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }, { kind: "component", type: OlFileDropzone, selector: "ol-file-dropzone", inputs: ["title", "hint", "ctaLabel", "icon", "disabled", "state", "compact", "describedBy", "pasteHint"], outputs: ["pick", "filesDropped"] }, { kind: "component", type: OlFileItem, selector: "ol-file-item", inputs: ["file", "variant", "removable", "previewable", "disabled"], outputs: ["remove", "preview", "retry"] }, { kind: "component", type: OlImagePreview, selector: "ol-image-preview", inputs: ["images", "open", "index"], outputs: ["openChange", "indexChange", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFileUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'ol-file-upload', standalone: true, imports: [OlButton, OlIcon, OlFileDropzone, OlFileItem, OlImagePreview], host: { class: 'block w-full', '(paste)': 'onPaste($event)' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"overflow-hidden rounded-md border bg-neutral-primary\"\n  [class]=\"errors().length ? 'border-danger' : 'border-default'\"\n  [attr.aria-disabled]=\"disabled() || null\"\n>\n  <!-- \u0110\u1EA7u khung: ti\u00EAu \u0111\u1EC1 + n\u00FAt (Figma \"Button header\"). Slot [actions] thay n\u00FAt. -->\n  <div class=\"flex items-center justify-between gap-3 border-b border-default px-3 py-2\">\n    <span class=\"min-w-0 truncate text-sm font-medium text-fg-brand-strong\" [id]=\"uid + '-title'\">\n      {{ title() }}\n      @if (required()) {\n        <span class=\"text-fg-danger\" aria-hidden=\"true\">*</span>\n      }\n    </span>\n    <div class=\"flex shrink-0 items-center gap-2\">\n      <ng-content select=\"[actions]\" />\n      <ol-button\n        size=\"sm\"\n        [pill]=\"true\"\n        [disabled]=\"disabled() || limitReached()\"\n        [ariaLabel]=\"resolvedButtonLabel() + (title() ? ' \u2014 ' + title() : '')\"\n        (btnClick)=\"openPicker()\"\n      >\n        <ol-icon name=\"solar:upload-minimalistic-linear\" [size]=\"16\" />\n        {{ resolvedButtonLabel() }}\n      </ol-button>\n    </div>\n  </div>\n\n  <div class=\"bg-neutral-secondary p-3\">\n    @if (!hasFiles()) {\n      <ol-file-dropzone\n        [compact]=\"true\"\n        [hint]=\"hintText()\"\n        [icon]=\"isImageMode() ? 'solar:gallery-add-linear' : 'solar:upload-minimalistic-linear'\"\n        [title]=\"isImageMode() ? 'Nh\u1EA5n \u0111\u1EC3 ch\u1ECDn \u1EA3nh ho\u1EB7c k\u00E9o th\u1EA3' : 'Nh\u1EA5n \u0111\u1EC3 t\u1EA3i l\u00EAn ho\u1EB7c k\u00E9o th\u1EA3'\"\n        [disabled]=\"disabled()\"\n        [state]=\"errors().length ? 'error' : 'default'\"\n        [describedBy]=\"describedBy()\"\n        (pick)=\"openPicker()\"\n        (filesDropped)=\"addFiles($event)\"\n      />\n    } @else {\n      @switch (mode()) {\n        @case ('image') {\n          <div class=\"relative overflow-hidden rounded-md bg-neutral-tertiary\">\n            @if (imageUrls()[files()[0].id]; as src) {\n              <!-- C\u1EA3 \u1EA3nh l\u00E0 n\u00FAt: b\u1EA5m \u0111\u1EC3 xem ph\u00F3ng to. -->\n              <button\n                type=\"button\"\n                class=\"group block w-full cursor-zoom-in focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle focus-visible:ring-inset\"\n                [attr.aria-label]=\"'Xem \u1EA3nh ' + files()[0].name\"\n                (click)=\"openPreview(files()[0])\"\n              >\n                <img [src]=\"src\" [alt]=\"files()[0].name\" class=\"block h-44 w-full object-cover\" />\n                <span\n                  class=\"absolute start-2 bottom-2 inline-flex items-center gap-1 rounded-full bg-neutral-primary px-2.5 py-1 text-xs font-medium text-heading shadow-sm\"\n                  aria-hidden=\"true\"\n                >\n                  <ol-icon name=\"lucide:zoom-in\" size=\"xs\" />\n                  Xem \u1EA3nh\n                </span>\n              </button>\n            } @else {\n              <div class=\"flex h-44 items-center justify-center text-sm text-body-subtle\">\n                {{ files()[0].name }}\n              </div>\n            }\n            <button\n              type=\"button\"\n              class=\"absolute end-2 top-2 inline-flex size-8 items-center justify-center rounded-full bg-neutral-primary text-heading shadow-sm hover:bg-neutral-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n              [disabled]=\"disabled()\"\n              [attr.aria-label]=\"'Xo\u00E1 \u1EA3nh ' + files()[0].name\"\n              (click)=\"removeFile(files()[0])\"\n            >\n              <ol-icon name=\"close\" size=\"xs\" />\n            </button>\n          </div>\n        }\n        @case ('images') {\n          <!--\n            L\u01B0\u1EDBi \u00F4 vu\u00F4ng. B\u1EA5m \u00F4 \u0111\u1EC3 xem, trong tr\u00ECnh xem l\u01B0\u1EDBt \u2039 \u203A qua m\u1ECDi \u1EA3nh.\n            \u00D4 cu\u1ED1i \"+\" th\u00EAm \u1EA3nh (\u1EA9n khi \u0111\u1EE7 maxFiles). Th\u1EA3 t\u1EC7p v\u00E0o l\u01B0\u1EDBi v\u1EABn nh\u1EADn.\n          -->\n          <ul\n            class=\"grid grid-cols-3 gap-2 sm:grid-cols-4\"\n            [attr.aria-labelledby]=\"uid + '-title'\"\n            (dragover)=\"$event.preventDefault()\"\n            (drop)=\"onListDrop($event)\"\n          >\n            @for (f of files(); track f.id) {\n              <li class=\"relative aspect-square overflow-hidden rounded-md bg-neutral-tertiary\">\n                @if (imageUrls()[f.id]; as src) {\n                  <button\n                    type=\"button\"\n                    class=\"block size-full cursor-zoom-in focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle focus-visible:ring-inset\"\n                    [attr.aria-label]=\"'Xem \u1EA3nh ' + f.name\"\n                    (click)=\"openPreview(f)\"\n                  >\n                    <img [src]=\"src\" [alt]=\"f.name\" class=\"size-full object-cover\" />\n                  </button>\n                } @else {\n                  <span\n                    class=\"flex size-full items-center justify-center p-2 text-center text-xs break-all text-body-subtle\"\n                  >\n                    {{ f.name }}\n                  </span>\n                }\n                <button\n                  type=\"button\"\n                  class=\"absolute end-1 top-1 inline-flex size-7 items-center justify-center rounded-full bg-neutral-primary text-heading shadow-sm hover:bg-neutral-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n                  [disabled]=\"disabled()\"\n                  [attr.aria-label]=\"'Xo\u00E1 \u1EA3nh ' + f.name\"\n                  (click)=\"removeFile(f)\"\n                >\n                  <ol-icon name=\"close\" size=\"xs\" />\n                </button>\n              </li>\n            }\n            @if (!limitReached()) {\n              <li class=\"aspect-square\">\n                <button\n                  type=\"button\"\n                  class=\"flex size-full flex-col items-center justify-center gap-1 rounded-md border border-dashed border-default text-xs font-medium text-body-subtle transition-colors hover:border-brand hover:text-fg-brand focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle disabled:cursor-not-allowed disabled:opacity-50\"\n                  [disabled]=\"disabled()\"\n                  (click)=\"openPicker()\"\n                >\n                  <ol-icon name=\"solar:gallery-add-linear\" size=\"base\" />\n                  Th\u00EAm \u1EA3nh\n                </button>\n              </li>\n            }\n          </ul>\n        }\n        @case ('single') {\n          <ol-file-item\n            variant=\"card\"\n            [file]=\"files()[0]\"\n            [disabled]=\"disabled()\"\n            (remove)=\"removeFile($event)\"\n          />\n        }\n        @case ('multiple') {\n          <!--\n            Th\u1EA3 th\u00EAm t\u1EC7p v\u00E0o v\u00F9ng chip v\u1EABn nh\u1EADn \u2014 k\u00E9o th\u1EA3 kh\u00F4ng b\u1EAFt bu\u1ED9c ph\u1EA3i\n            nh\u1EAFm \u0111\u00FAng \u00F4 tr\u1ED1ng. max-h + cu\u1ED9n d\u1ECDc: danh s\u00E1ch d\u00E0i kh\u00F4ng \u0111\u1EA9y form.\n          -->\n          <ul\n            class=\"flex max-h-36 flex-wrap gap-1.5 overflow-y-auto\"\n            [attr.aria-labelledby]=\"uid + '-title'\"\n            (dragover)=\"$event.preventDefault()\"\n            (drop)=\"onListDrop($event)\"\n          >\n            @for (f of files(); track f.id) {\n              <li class=\"min-w-0 max-w-full\">\n                <ol-file-item\n                  variant=\"chip\"\n                  [file]=\"f\"\n                  [previewable]=\"previewable()\"\n                  [disabled]=\"disabled()\"\n                  (remove)=\"removeFile($event)\"\n                  (preview)=\"filePreview.emit($event)\"\n                />\n              </li>\n            }\n          </ul>\n        }\n        @default {\n          <ul class=\"flex flex-col gap-2\" [attr.aria-labelledby]=\"uid + '-title'\">\n            @for (f of files(); track f.id) {\n              <li>\n                <ol-file-item\n                  [file]=\"f\"\n                  [previewable]=\"previewable()\"\n                  [disabled]=\"disabled()\"\n                  (remove)=\"removeFile($event)\"\n                  (preview)=\"filePreview.emit($event)\"\n                  (retry)=\"fileRetry.emit($event)\"\n                />\n              </li>\n            }\n          </ul>\n        }\n      }\n    }\n  </div>\n</div>\n\n<!--\n  `sr-only` ch\u1EE9 KH\u00D4NG `hidden`: `display: none` lo\u1EA1i \u00F4 kh\u1ECFi c\u00E2y tr\u1EE3 n\u0103ng. M\u1EDF\n  b\u1EB1ng n\u00FAt \u0111\u1EA7u khung ho\u1EB7c v\u00F9ng k\u00E9o th\u1EA3; tabindex -1 \u0111\u1EC3 Tab kh\u00F4ng d\u1EEBng hai l\u1EA7n.\n-->\n<input\n  #fileInput\n  type=\"file\"\n  class=\"sr-only\"\n  tabindex=\"-1\"\n  aria-hidden=\"true\"\n  [accept]=\"accept()\"\n  [multiple]=\"isMultiple()\"\n  [disabled]=\"disabled()\"\n  (change)=\"onInputChange($event)\"\n/>\n\n@if (errors().length) {\n  <ul [id]=\"uid + '-err'\" class=\"mt-1.5 space-y-0.5 text-xs text-fg-danger\" role=\"alert\">\n    @for (msg of errors(); track msg) {\n      <li>{{ msg }}</li>\n    }\n  </ul>\n}\n<ol-image-preview [images]=\"previewImages()\" [(open)]=\"previewOpen\" [(index)]=\"previewIndex\" />\n\n@if (helperText()) {\n  <p [id]=\"uid + '-help'\" class=\"mt-1.5 text-xs text-body-subtle\">{{ helperText() }}</p>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], previewable: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], pasteFromPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "pasteFromPage", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], filesAdded: [{ type: i0.Output, args: ["filesAdded"] }], fileRemove: [{ type: i0.Output, args: ["fileRemove"] }], filePreview: [{ type: i0.Output, args: ["filePreview"] }], fileRetry: [{ type: i0.Output, args: ["fileRetry"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
 
 let uniqueRangeId = 0;
 class OlRange {
@@ -12256,6 +13944,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 }]
         }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }] } });
 
+/**
+ * Mục menu xếp dọc trong ☰. Nơi gọi hay bọc mục trong một
+ * `<div slot="navigation" class="flex items-center">` — wrapper đó cũng phải
+ * xếp dọc, không thì mục vẫn nằm ngang và panel dropdown của mục thứ hai tràn
+ * phải (đo /navbar ví dụ 6 trên màn 390px: panel 172→476px).
+ */
+/**
+ * Panel ☰ NỔI dưới thanh, đè lên nội dung (báo 2026-09-28: "menu mobile phải
+ * đè lên nội dung chứ không đẩy nội dung xuống"). Khi khối mục menu cũng đang
+ * xếp dọc nổi (không có mobile-links), panel hạ xuống dưới nó theo
+ * `--ol-nav-stack-h` — hai lớp nổi cùng neo `top-full` sẽ chồng lên nhau.
+ * Giới hạn cao theo màn và tự cuộn: menu dài trên điện thoại không bị cắt.
+ */
+const OVERLAY = 'absolute inset-x-0 top-[calc(100%+var(--ol-nav-stack-h,0px))] z-dropdown max-h-[calc(100dvh-5rem)] overflow-y-auto';
+const STACKED = [
+    // NỔI dưới thanh (absolute) — đè lên nội dung trang, không đẩy xuống.
+    'flex flex-col items-stretch gap-1 absolute inset-x-0 top-full z-dropdown bg-neutral-primary border-t border-default px-4 py-3 shadow-xl',
+    '@[78rem]:static @[78rem]:bg-transparent @[78rem]:shadow-none',
+    '[&>[slot=navigation]]:flex-col [&>[slot=navigation]]:items-stretch',
+    '@[78rem]:[&>[slot=navigation]]:flex-row @[78rem]:[&>[slot=navigation]]:items-center',
+].join(' ');
 class OlNavbar {
     brandLogo = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "brandLogo" }] : /* istanbul ignore next */ []));
@@ -12277,22 +13986,109 @@ class OlNavbar {
     onToggleMobileMenu = output();
     searchQuery = '';
     elementRef = inject(ElementRef);
+    mobilePanel = viewChild('mobilePanel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobilePanel" }] : /* istanbul ignore next */ []));
+    navWrap = viewChild('navWrap', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navWrap" }] : /* istanbul ignore next */ []));
+    destroyRef = inject(DestroyRef);
+    /** Nơi gọi có khai `slot="mobile-links"` (hoặc `slot="mobile"`) riêng. */
+    hasMobileLinks = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasMobileLinks" }] : /* istanbul ignore next */ []));
+    /** Panel ☰ có gì để hiện — không thì đừng vẽ một dải trống có padding. */
+    hasPanelContent = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasPanelContent" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            this.detectMobileSlots();
+            this.observeStackHeight();
+        });
+    }
+    /** Chiều cao khối mục xếp dọc (0 khi không xếp dọc) → `--ol-nav-stack-h`. */
+    observeStackHeight() {
+        const wrap = this.navWrap()?.nativeElement;
+        const root = this.elementRef.nativeElement;
+        if (!wrap || typeof ResizeObserver === 'undefined')
+            return;
+        const update = () => {
+            const h = getComputedStyle(wrap).position === 'absolute' ? wrap.offsetHeight : 0;
+            root.style.setProperty('--ol-nav-stack-h', `${h}px`);
+        };
+        const observer = new ResizeObserver(update);
+        observer.observe(wrap);
+        this.destroyRef.onDestroy(() => observer.disconnect());
+    }
+    isStacked() {
+        return !this.isCollapsed() && !this.hasMobileLinks();
+    }
+    /**
+     * Đo lại mỗi lần mở ☰, không chỉ lúc đầu: nội dung chiếu vào có thể nằm
+     * trong @if của nơi gọi và xuất hiện muộn.
+     */
+    detectMobileSlots() {
+        const panel = this.mobilePanel()?.nativeElement;
+        if (!panel)
+            return;
+        this.hasMobileLinks.set(!!panel.querySelector('[slot=mobile], [slot=mobile-links]'));
+        this.hasPanelContent.set(panel.childElementCount > 0);
+    }
+    /**
+     * Khối mục menu. Khung ≥ 78rem: nằm ngang cạnh logo.
+     *
+     * Khung hẹp mà ☰ đang mở và KHÔNG có menu di động riêng: xuống dòng
+     * (`col-span-full row-start-2`) và xếp dọc — chính các mục desktop thành menu
+     * di động. Bản trước chỉ ẩn chúng, nên 5/7 thanh trên /navbar và /blocks bấm
+     * ☰ ra bảng trống (đo iPhone 13 giả lập, 2026-09-28).
+     */
+    navWrapClasses = computed(() => {
+        const wide = '@[78rem]:flex @[78rem]:flex-row @[78rem]:items-center @[78rem]:p-0 @[78rem]:border-0 whitespace-nowrap min-w-0';
+        const stacked = this.isStacked();
+        return stacked ? `${wide} ${STACKED}` : `${wide} hidden gap-1`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navWrapClasses" }] : /* istanbul ignore next */ []));
+    mobilePanelClasses = computed(() => {
+        const show = !this.isCollapsed() && this.hasPanelContent();
+        return show
+            ? `@[78rem]:hidden ${OVERLAY} border-t border-default bg-neutral-primary px-4 pt-4 pb-6 space-y-4 animate-in fade-in slide-in-from-top-2 duration-150 shadow-xl`
+            : 'hidden';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobilePanelClasses" }] : /* istanbul ignore next */ []));
     navbarClasses = computed(() => {
-        const classes = ['w-full bg-neutral-primary transition-colors duration-200 z-sticky'];
+        /**
+         * `@container`: bố cục đổi theo bề rộng CHÍNH THANH, không theo màn hình.
+         *
+         * Thanh hay nằm trong khung hẹp hơn màn (cạnh sidebar, trong khung xem trước
+         * của docs). Bản trước dùng `xl:` theo MÀN HÌNH: đo /navbar 2026-09-28, màn
+         * 1440px khung chỉ 982px mà vẫn vẽ bố cục desktop — năm mục menu + năm học
+         * + ba nút cần ~1075px, chật và tràn.
+         *
+         * Ngưỡng giữ đúng số rem của breakpoint cũ (sm 40rem, md 48rem, lg 64rem),
+         * riêng xl là 78rem chứ không 80rem: thanh full màn ở 1280px trừ thanh cuộn
+         * còn ~1265px — đặt 80rem là màn 1280px mất bố cục desktop vốn đang có.
+         */
+        const classes = [
+            '@container w-full bg-neutral-primary transition-colors duration-200 z-sticky',
+        ];
         if (this.sticky()) {
             classes.push('sticky top-0');
         }
         if (this.bordered()) {
             classes.push('border-b border-default');
         }
+        // Neo cho menu ☰ nổi (absolute). `sticky` đã là phần tử định vị.
+        if (!this.sticky()) {
+            classes.push('relative');
+        }
         return classes.join(' ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "navbarClasses" }] : /* istanbul ignore next */ []));
     containerClasses = computed(() => {
-        return this.fluid() ? 'w-full px-4 sm:px-6' : 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8';
+        return this.fluid()
+            ? 'w-full px-4 @[40rem]:px-6'
+            : 'max-w-7xl mx-auto px-4 @[40rem]:px-6 @5xl:px-8';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
     toggleMobileMenu() {
+        this.detectMobileSlots();
         this.isCollapsed.update((v) => !v);
         this.onToggleMobileMenu.emit(!this.isCollapsed());
     }
@@ -12316,12 +14112,12 @@ class OlNavbar {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlNavbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlNavbar, isStandalone: true, selector: "ol-navbar", inputs: { brandLogo: { classPropertyName: "brandLogo", publicName: "brandLogo", isSignal: true, isRequired: false, transformFunction: null }, brandName: { classPropertyName: "brandName", publicName: "brandName", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange", onSearch: "onSearch", onToggleMobileMenu: "onToggleMobileMenu" }, host: { listeners: { "document:keydown": "handleGlobalKeydown($event)" } }, ngImport: i0, template: "<nav [class]=\"navbarClasses()\" role=\"navigation\" aria-label=\"Thanh \u0111i\u1EC1u h\u01B0\u1EDBng ch\u00EDnh\">\n  <div [class]=\"containerClasses()\">\n    <div class=\"flex items-center justify-between h-16 gap-3 sm:gap-4 min-w-0 w-full\">\n      <!-- Left: Brand / Logo & Desktop Links -->\n      <div class=\"flex items-center gap-3 xl:gap-6 min-w-0\">\n        <ng-content select=\"[slot=brand], [brand]\">\n          <!--\n            Logo v\u00E0 t\u00EAn l\u00E0 HAI th\u1EE9 \u0111\u1ED9c l\u1EADp: c\u00F3 th\u1EC3 ch\u1EC9 c\u00F3 t\u00EAn, ch\u1EC9 c\u00F3 logo, ho\u1EB7c\n            c\u1EA3 hai. B\u1EA3n tr\u01B0\u1EDBc l\u1ED3ng t\u00EAn v\u00E0o trong nh\u00E1nh @if (brandLogo()) n\u00EAn\n            truy\u1EC1n t\u00EAn m\u00E0 kh\u00F4ng truy\u1EC1n logo th\u00EC t\u00EAn bi\u1EBFn m\u1EA5t im l\u1EB7ng.\n          -->\n          @if (brandLogo() || brandName()) {\n            <a\n              href=\"/\"\n              class=\"flex items-center gap-2.5 shrink-0 focus:outline-none focus:ring-2 focus:ring-brand-subtle rounded-lg whitespace-nowrap\"\n            >\n              @if (brandLogo()) {\n                <img [src]=\"brandLogo()\" [alt]=\"brandName()\" class=\"h-9 w-auto\" />\n              }\n              @if (brandName()) {\n                <span class=\"font-bold text-heading text-lg whitespace-nowrap\">{{\n                  brandName()\n                }}</span>\n              }\n            </a>\n          }\n        </ng-content>\n\n        <!-- Desktop Navigation Items -->\n        <div class=\"hidden xl:flex items-center gap-1 min-w-0 whitespace-nowrap\">\n          <ng-content select=\"[slot=navigation], [navigation], ol-navbar-item, ol-nav-dropdown\" />\n        </div>\n      </div>\n\n      <!-- Center: Global Search Input -->\n      @if (showSearch()) {\n        <div class=\"hidden xl:flex flex-1 max-w-50 2xl:max-w-xs mx-2 lg:mx-4 min-w-0\">\n          <div class=\"relative w-full\">\n            <div\n              class=\"absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-body-subtle\"\n            >\n              <ol-icon name=\"search\" size=\"sm\"></ol-icon>\n            </div>\n            <input\n              type=\"text\"\n              [value]=\"searchQuery\"\n              (input)=\"handleSearchInput($event)\"\n              (keydown.enter)=\"handleSearchSubmit()\"\n              [placeholder]=\"searchPlaceholder()\"\n              class=\"w-full pl-9 pr-14 py-2 text-sm bg-neutral-tertiary text-heading rounded-md border border-default focus:outline-none focus:ring-2 focus:ring-brand-subtle/20 focus:border-brand transition\"\n            />\n            <div class=\"absolute inset-y-0 right-0 flex items-center pr-2.5 pointer-events-none\">\n              <kbd\n                class=\"px-1.5 py-0.5 text-2xs font-semibold text-heading bg-neutral-tertiary-medium rounded border border-default\"\n                >Ctrl K</kbd\n              >\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Right: Actions Slot & Mobile Hamburger Button -->\n      <div class=\"flex items-center gap-2 sm:gap-3 shrink-0 whitespace-nowrap\">\n        <ng-content select=\"[slot=actions], [actions]\" />\n\n        <!-- Mobile Menu Toggle Button (Visible below xl) -->\n        <button\n          type=\"button\"\n          (click)=\"toggleMobileMenu()\"\n          class=\"xl:hidden p-2 rounded-md text-body-subtle hover:text-heading hover:bg-neutral-secondary-medium focus:outline-none focus:ring-2 focus:ring-brand-subtle cursor-pointer\"\n          [attr.aria-expanded]=\"!isCollapsed()\"\n          aria-label=\"\u0110\u00F3ng/M\u1EDF menu\"\n        >\n          @if (isCollapsed()) {\n            <ol-icon name=\"menu\" size=\"base\"></ol-icon>\n          } @else {\n            <ol-icon name=\"close\" size=\"base\"></ol-icon>\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Mobile Drawer / Dropdown Panel matching Figma 3279:21067 / #1149:75488 -->\n  @if (!isCollapsed()) {\n    <div\n      class=\"xl:hidden border-t border-default bg-neutral-primary px-4 pt-4 pb-6 space-y-4 animate-in fade-in slide-in-from-top-2 duration-150 shadow-xl\"\n    >\n      <!-- Mobile User Profile Slot -->\n      <ng-content select=\"[slot=mobile-user]\" />\n\n      <!-- Mobile Search Input -->\n      @if (showSearch()) {\n        <div class=\"relative w-full md:hidden\">\n          <div\n            class=\"absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-body-subtle\"\n          >\n            <ol-icon name=\"search\" size=\"sm\"></ol-icon>\n          </div>\n          <input\n            type=\"text\"\n            [value]=\"searchQuery\"\n            (input)=\"handleSearchInput($event)\"\n            [placeholder]=\"searchPlaceholder()\"\n            class=\"w-full pl-9 pr-3 py-2.5 text-sm bg-neutral-tertiary text-heading rounded-md border border-default focus:outline-none focus:ring-2 focus:ring-brand-subtle\"\n          />\n        </div>\n      }\n\n      <!-- Mobile Links Slot -->\n      <ng-content select=\"[slot=mobile], [slot=mobile-links]\" />\n\n      <!-- Mobile Actions Slot -->\n      <ng-content select=\"[slot=mobile-actions]\" />\n\n      <!-- Mobile Footer Contact Info Slot -->\n      <ng-content select=\"[slot=mobile-footer]\" />\n    </div>\n  }\n</nav>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlNavbar, isStandalone: true, selector: "ol-navbar", inputs: { brandLogo: { classPropertyName: "brandLogo", publicName: "brandLogo", isSignal: true, isRequired: false, transformFunction: null }, brandName: { classPropertyName: "brandName", publicName: "brandName", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange", onSearch: "onSearch", onToggleMobileMenu: "onToggleMobileMenu" }, host: { listeners: { "document:keydown": "handleGlobalKeydown($event)" }, classAttribute: "block w-full min-w-0" }, viewQueries: [{ propertyName: "mobilePanel", first: true, predicate: ["mobilePanel"], descendants: true, isSignal: true }, { propertyName: "navWrap", first: true, predicate: ["navWrap"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav [class]=\"navbarClasses()\" role=\"navigation\" aria-label=\"Thanh \u0111i\u1EC1u h\u01B0\u1EDBng ch\u00EDnh\">\n  <div [class]=\"containerClasses()\">\n    <!--\n      Khung h\u1EB9p: l\u01B0\u1EDBi hai c\u1ED9t (logo | n\u00FAt), kh\u1ED1i m\u1EE5c menu khi \u2630 m\u1EDF chi\u1EBFm tr\u1ECDn\n      h\u00E0ng th\u1EE9 hai (xem STACKED). Kh\u00F4ng d\u00F9ng `flex-wrap`: n\u00F3 th\u1EA3 nh\u00F3m n\u00FAt\n      xu\u1ED1ng d\u00F2ng d\u01B0\u1EDBi logo khi hai th\u1EE9 c\u1ED9ng l\u1EA1i r\u1ED9ng h\u01A1n khung. Khung r\u1ED9ng: flex.\n    -->\n    <div\n      class=\"grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 @[40rem]:gap-x-4 min-h-16 min-w-0 w-full @[78rem]:flex\"\n    >\n      <!-- Left: Brand / Logo -->\n      <div class=\"flex h-16 items-center min-w-0\">\n        <ng-content select=\"[slot=brand], [brand]\">\n          <!--\n            Logo v\u00E0 t\u00EAn l\u00E0 HAI th\u1EE9 \u0111\u1ED9c l\u1EADp: c\u00F3 th\u1EC3 ch\u1EC9 c\u00F3 t\u00EAn, ch\u1EC9 c\u00F3 logo, ho\u1EB7c\n            c\u1EA3 hai. B\u1EA3n tr\u01B0\u1EDBc l\u1ED3ng t\u00EAn v\u00E0o trong nh\u00E1nh @if (brandLogo()) n\u00EAn\n            truy\u1EC1n t\u00EAn m\u00E0 kh\u00F4ng truy\u1EC1n logo th\u00EC t\u00EAn bi\u1EBFn m\u1EA5t im l\u1EB7ng.\n          -->\n          @if (brandLogo() || brandName()) {\n            <a\n              href=\"/\"\n              class=\"flex items-center gap-2.5 shrink-0 focus:outline-none focus:ring-2 focus:ring-brand-subtle rounded-lg whitespace-nowrap\"\n            >\n              @if (brandLogo()) {\n                <img [src]=\"brandLogo()\" [alt]=\"brandName()\" class=\"h-9 w-auto\" />\n              }\n              @if (brandName()) {\n                <span class=\"font-bold text-heading text-lg whitespace-nowrap\">{{\n                  brandName()\n                }}</span>\n              }\n            </a>\n          }\n        </ng-content>\n      </div>\n\n      <!--\n        M\u1EE5c menu \u2014 M\u1ED8T ch\u1ED7 chi\u1EBFu duy nh\u1EA5t, d\u00F9ng cho c\u1EA3 hai b\u1ED1 c\u1EE5c (Angular ch\u1EC9\n        chi\u1EBFu m\u1ED9t n\u1ED9i dung v\u00E0o m\u1ED9t ch\u1ED7). Khung r\u1ED9ng: n\u1EB1m ngang c\u1EA1nh logo. Khung\n        h\u1EB9p: \u1EA9n, tr\u1EEB khi \u2630 \u0111ang m\u1EDF V\u00C0 n\u01A1i g\u1ECDi kh\u00F4ng khai menu di \u0111\u1ED9ng ri\u00EAng \u2014\n        khi \u0111\u00F3 x\u1EBFp d\u1ECDc, N\u1ED4I d\u01B0\u1EDBi thanh (\u0111\u00E8 n\u1ED9i dung). Xem navWrapClasses().\n      -->\n      <div #navWrap [class]=\"navWrapClasses()\">\n        <ng-content select=\"[slot=navigation], [navigation], ol-navbar-item, ol-nav-dropdown\" />\n      </div>\n\n      <!-- Center: Global Search Input -->\n      @if (showSearch()) {\n        <div class=\"hidden @[78rem]:flex flex-1 max-w-50 @[96rem]:max-w-xs mx-2 @5xl:mx-4 min-w-0\">\n          <div class=\"relative w-full\">\n            <div\n              class=\"absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-body-subtle\"\n            >\n              <ol-icon name=\"search\" size=\"sm\"></ol-icon>\n            </div>\n            <input\n              type=\"text\"\n              [value]=\"searchQuery\"\n              (input)=\"handleSearchInput($event)\"\n              (keydown.enter)=\"handleSearchSubmit()\"\n              [placeholder]=\"searchPlaceholder()\"\n              class=\"w-full pl-9 pr-14 py-2 text-sm bg-neutral-tertiary text-heading rounded-md border border-default focus:outline-none focus:ring-2 focus:ring-brand-subtle/20 focus:border-brand transition\"\n            />\n            <div class=\"absolute inset-y-0 right-0 flex items-center pr-2.5 pointer-events-none\">\n              <kbd\n                class=\"px-1.5 py-0.5 text-2xs font-semibold text-heading bg-neutral-tertiary-medium rounded border border-default\"\n                >Ctrl K</kbd\n              >\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Right: Actions Slot & Mobile Hamburger Button \u2014 ml-auto thay justify-between. -->\n      <div class=\"ml-auto flex h-16 items-center gap-2 @[40rem]:gap-3 shrink-0 whitespace-nowrap\">\n        <ng-content select=\"[slot=actions], [actions]\" />\n\n        <!-- Mobile Menu Toggle Button (Visible below xl) -->\n        <button\n          type=\"button\"\n          (click)=\"toggleMobileMenu()\"\n          class=\"@[78rem]:hidden p-2 rounded-md text-body-subtle hover:text-heading hover:bg-neutral-secondary-medium focus:outline-none focus:ring-2 focus:ring-brand-subtle cursor-pointer\"\n          [attr.aria-expanded]=\"!isCollapsed()\"\n          aria-label=\"\u0110\u00F3ng/M\u1EDF menu\"\n        >\n          @if (isCollapsed()) {\n            <ol-icon name=\"menu\" size=\"base\"></ol-icon>\n          } @else {\n            <ol-icon name=\"close\" size=\"base\"></ol-icon>\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Mobile Drawer / Dropdown Panel matching Figma 3279:21067 / #1149:75488 -->\n  <!--\n    Lu\u00F4n D\u1EF0NG, \u1EA9n b\u1EB1ng `hidden` khi \u0111\u00F3ng \u2014 kh\u00F4ng b\u1ECDc trong @if. N\u1ED9i dung chi\u1EBFu\n    v\u00E0o nh\u00E1nh @if \u0111ang t\u1EAFt kh\u00F4ng n\u1EB1m trong DOM, n\u00EAn kh\u00F4ng ph\u00E1t hi\u1EC7n \u0111\u01B0\u1EE3c n\u01A1i g\u1ECDi\n    c\u00F3 khai `slot=\"mobile-links\"` hay kh\u00F4ng (xem detectMobileSlots()).\n  -->\n  <div #mobilePanel [class]=\"mobilePanelClasses()\">\n    <!-- Mobile User Profile Slot -->\n    <ng-content select=\"[slot=mobile-user]\" />\n\n    <!-- Mobile Search Input -->\n    @if (showSearch()) {\n      <div class=\"relative w-full @3xl:hidden\">\n        <div\n          class=\"absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-body-subtle\"\n        >\n          <ol-icon name=\"search\" size=\"sm\"></ol-icon>\n        </div>\n        <input\n          type=\"text\"\n          [value]=\"searchQuery\"\n          (input)=\"handleSearchInput($event)\"\n          [placeholder]=\"searchPlaceholder()\"\n          class=\"w-full pl-9 pr-3 py-2.5 text-sm bg-neutral-tertiary text-heading rounded-md border border-default focus:outline-none focus:ring-2 focus:ring-brand-subtle\"\n        />\n      </div>\n    }\n\n    <!-- Mobile Links Slot -->\n    <ng-content select=\"[slot=mobile], [slot=mobile-links]\" />\n\n    <!-- Mobile Actions Slot -->\n    <ng-content select=\"[slot=mobile-actions]\" />\n\n    <!-- Mobile Footer Contact Info Slot -->\n    <ng-content select=\"[slot=mobile-footer]\" />\n  </div>\n</nav>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlNavbar, decorators: [{
             type: Component,
-            args: [{ selector: 'ol-navbar', standalone: true, imports: [CommonModule, FormsModule, OlIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [class]=\"navbarClasses()\" role=\"navigation\" aria-label=\"Thanh \u0111i\u1EC1u h\u01B0\u1EDBng ch\u00EDnh\">\n  <div [class]=\"containerClasses()\">\n    <div class=\"flex items-center justify-between h-16 gap-3 sm:gap-4 min-w-0 w-full\">\n      <!-- Left: Brand / Logo & Desktop Links -->\n      <div class=\"flex items-center gap-3 xl:gap-6 min-w-0\">\n        <ng-content select=\"[slot=brand], [brand]\">\n          <!--\n            Logo v\u00E0 t\u00EAn l\u00E0 HAI th\u1EE9 \u0111\u1ED9c l\u1EADp: c\u00F3 th\u1EC3 ch\u1EC9 c\u00F3 t\u00EAn, ch\u1EC9 c\u00F3 logo, ho\u1EB7c\n            c\u1EA3 hai. B\u1EA3n tr\u01B0\u1EDBc l\u1ED3ng t\u00EAn v\u00E0o trong nh\u00E1nh @if (brandLogo()) n\u00EAn\n            truy\u1EC1n t\u00EAn m\u00E0 kh\u00F4ng truy\u1EC1n logo th\u00EC t\u00EAn bi\u1EBFn m\u1EA5t im l\u1EB7ng.\n          -->\n          @if (brandLogo() || brandName()) {\n            <a\n              href=\"/\"\n              class=\"flex items-center gap-2.5 shrink-0 focus:outline-none focus:ring-2 focus:ring-brand-subtle rounded-lg whitespace-nowrap\"\n            >\n              @if (brandLogo()) {\n                <img [src]=\"brandLogo()\" [alt]=\"brandName()\" class=\"h-9 w-auto\" />\n              }\n              @if (brandName()) {\n                <span class=\"font-bold text-heading text-lg whitespace-nowrap\">{{\n                  brandName()\n                }}</span>\n              }\n            </a>\n          }\n        </ng-content>\n\n        <!-- Desktop Navigation Items -->\n        <div class=\"hidden xl:flex items-center gap-1 min-w-0 whitespace-nowrap\">\n          <ng-content select=\"[slot=navigation], [navigation], ol-navbar-item, ol-nav-dropdown\" />\n        </div>\n      </div>\n\n      <!-- Center: Global Search Input -->\n      @if (showSearch()) {\n        <div class=\"hidden xl:flex flex-1 max-w-50 2xl:max-w-xs mx-2 lg:mx-4 min-w-0\">\n          <div class=\"relative w-full\">\n            <div\n              class=\"absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-body-subtle\"\n            >\n              <ol-icon name=\"search\" size=\"sm\"></ol-icon>\n            </div>\n            <input\n              type=\"text\"\n              [value]=\"searchQuery\"\n              (input)=\"handleSearchInput($event)\"\n              (keydown.enter)=\"handleSearchSubmit()\"\n              [placeholder]=\"searchPlaceholder()\"\n              class=\"w-full pl-9 pr-14 py-2 text-sm bg-neutral-tertiary text-heading rounded-md border border-default focus:outline-none focus:ring-2 focus:ring-brand-subtle/20 focus:border-brand transition\"\n            />\n            <div class=\"absolute inset-y-0 right-0 flex items-center pr-2.5 pointer-events-none\">\n              <kbd\n                class=\"px-1.5 py-0.5 text-2xs font-semibold text-heading bg-neutral-tertiary-medium rounded border border-default\"\n                >Ctrl K</kbd\n              >\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Right: Actions Slot & Mobile Hamburger Button -->\n      <div class=\"flex items-center gap-2 sm:gap-3 shrink-0 whitespace-nowrap\">\n        <ng-content select=\"[slot=actions], [actions]\" />\n\n        <!-- Mobile Menu Toggle Button (Visible below xl) -->\n        <button\n          type=\"button\"\n          (click)=\"toggleMobileMenu()\"\n          class=\"xl:hidden p-2 rounded-md text-body-subtle hover:text-heading hover:bg-neutral-secondary-medium focus:outline-none focus:ring-2 focus:ring-brand-subtle cursor-pointer\"\n          [attr.aria-expanded]=\"!isCollapsed()\"\n          aria-label=\"\u0110\u00F3ng/M\u1EDF menu\"\n        >\n          @if (isCollapsed()) {\n            <ol-icon name=\"menu\" size=\"base\"></ol-icon>\n          } @else {\n            <ol-icon name=\"close\" size=\"base\"></ol-icon>\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Mobile Drawer / Dropdown Panel matching Figma 3279:21067 / #1149:75488 -->\n  @if (!isCollapsed()) {\n    <div\n      class=\"xl:hidden border-t border-default bg-neutral-primary px-4 pt-4 pb-6 space-y-4 animate-in fade-in slide-in-from-top-2 duration-150 shadow-xl\"\n    >\n      <!-- Mobile User Profile Slot -->\n      <ng-content select=\"[slot=mobile-user]\" />\n\n      <!-- Mobile Search Input -->\n      @if (showSearch()) {\n        <div class=\"relative w-full md:hidden\">\n          <div\n            class=\"absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-body-subtle\"\n          >\n            <ol-icon name=\"search\" size=\"sm\"></ol-icon>\n          </div>\n          <input\n            type=\"text\"\n            [value]=\"searchQuery\"\n            (input)=\"handleSearchInput($event)\"\n            [placeholder]=\"searchPlaceholder()\"\n            class=\"w-full pl-9 pr-3 py-2.5 text-sm bg-neutral-tertiary text-heading rounded-md border border-default focus:outline-none focus:ring-2 focus:ring-brand-subtle\"\n          />\n        </div>\n      }\n\n      <!-- Mobile Links Slot -->\n      <ng-content select=\"[slot=mobile], [slot=mobile-links]\" />\n\n      <!-- Mobile Actions Slot -->\n      <ng-content select=\"[slot=mobile-actions]\" />\n\n      <!-- Mobile Footer Contact Info Slot -->\n      <ng-content select=\"[slot=mobile-footer]\" />\n    </div>\n  }\n</nav>\n" }]
-        }], propDecorators: { brandLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandLogo", required: false }] }], brandName: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandName", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onToggleMobileMenu: [{ type: i0.Output, args: ["onToggleMobileMenu"] }], handleGlobalKeydown: [{
+            args: [{ selector: 'ol-navbar', standalone: true, imports: [CommonModule, FormsModule, OlIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block w-full min-w-0' }, template: "<nav [class]=\"navbarClasses()\" role=\"navigation\" aria-label=\"Thanh \u0111i\u1EC1u h\u01B0\u1EDBng ch\u00EDnh\">\n  <div [class]=\"containerClasses()\">\n    <!--\n      Khung h\u1EB9p: l\u01B0\u1EDBi hai c\u1ED9t (logo | n\u00FAt), kh\u1ED1i m\u1EE5c menu khi \u2630 m\u1EDF chi\u1EBFm tr\u1ECDn\n      h\u00E0ng th\u1EE9 hai (xem STACKED). Kh\u00F4ng d\u00F9ng `flex-wrap`: n\u00F3 th\u1EA3 nh\u00F3m n\u00FAt\n      xu\u1ED1ng d\u00F2ng d\u01B0\u1EDBi logo khi hai th\u1EE9 c\u1ED9ng l\u1EA1i r\u1ED9ng h\u01A1n khung. Khung r\u1ED9ng: flex.\n    -->\n    <div\n      class=\"grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 @[40rem]:gap-x-4 min-h-16 min-w-0 w-full @[78rem]:flex\"\n    >\n      <!-- Left: Brand / Logo -->\n      <div class=\"flex h-16 items-center min-w-0\">\n        <ng-content select=\"[slot=brand], [brand]\">\n          <!--\n            Logo v\u00E0 t\u00EAn l\u00E0 HAI th\u1EE9 \u0111\u1ED9c l\u1EADp: c\u00F3 th\u1EC3 ch\u1EC9 c\u00F3 t\u00EAn, ch\u1EC9 c\u00F3 logo, ho\u1EB7c\n            c\u1EA3 hai. B\u1EA3n tr\u01B0\u1EDBc l\u1ED3ng t\u00EAn v\u00E0o trong nh\u00E1nh @if (brandLogo()) n\u00EAn\n            truy\u1EC1n t\u00EAn m\u00E0 kh\u00F4ng truy\u1EC1n logo th\u00EC t\u00EAn bi\u1EBFn m\u1EA5t im l\u1EB7ng.\n          -->\n          @if (brandLogo() || brandName()) {\n            <a\n              href=\"/\"\n              class=\"flex items-center gap-2.5 shrink-0 focus:outline-none focus:ring-2 focus:ring-brand-subtle rounded-lg whitespace-nowrap\"\n            >\n              @if (brandLogo()) {\n                <img [src]=\"brandLogo()\" [alt]=\"brandName()\" class=\"h-9 w-auto\" />\n              }\n              @if (brandName()) {\n                <span class=\"font-bold text-heading text-lg whitespace-nowrap\">{{\n                  brandName()\n                }}</span>\n              }\n            </a>\n          }\n        </ng-content>\n      </div>\n\n      <!--\n        M\u1EE5c menu \u2014 M\u1ED8T ch\u1ED7 chi\u1EBFu duy nh\u1EA5t, d\u00F9ng cho c\u1EA3 hai b\u1ED1 c\u1EE5c (Angular ch\u1EC9\n        chi\u1EBFu m\u1ED9t n\u1ED9i dung v\u00E0o m\u1ED9t ch\u1ED7). Khung r\u1ED9ng: n\u1EB1m ngang c\u1EA1nh logo. Khung\n        h\u1EB9p: \u1EA9n, tr\u1EEB khi \u2630 \u0111ang m\u1EDF V\u00C0 n\u01A1i g\u1ECDi kh\u00F4ng khai menu di \u0111\u1ED9ng ri\u00EAng \u2014\n        khi \u0111\u00F3 x\u1EBFp d\u1ECDc, N\u1ED4I d\u01B0\u1EDBi thanh (\u0111\u00E8 n\u1ED9i dung). Xem navWrapClasses().\n      -->\n      <div #navWrap [class]=\"navWrapClasses()\">\n        <ng-content select=\"[slot=navigation], [navigation], ol-navbar-item, ol-nav-dropdown\" />\n      </div>\n\n      <!-- Center: Global Search Input -->\n      @if (showSearch()) {\n        <div class=\"hidden @[78rem]:flex flex-1 max-w-50 @[96rem]:max-w-xs mx-2 @5xl:mx-4 min-w-0\">\n          <div class=\"relative w-full\">\n            <div\n              class=\"absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-body-subtle\"\n            >\n              <ol-icon name=\"search\" size=\"sm\"></ol-icon>\n            </div>\n            <input\n              type=\"text\"\n              [value]=\"searchQuery\"\n              (input)=\"handleSearchInput($event)\"\n              (keydown.enter)=\"handleSearchSubmit()\"\n              [placeholder]=\"searchPlaceholder()\"\n              class=\"w-full pl-9 pr-14 py-2 text-sm bg-neutral-tertiary text-heading rounded-md border border-default focus:outline-none focus:ring-2 focus:ring-brand-subtle/20 focus:border-brand transition\"\n            />\n            <div class=\"absolute inset-y-0 right-0 flex items-center pr-2.5 pointer-events-none\">\n              <kbd\n                class=\"px-1.5 py-0.5 text-2xs font-semibold text-heading bg-neutral-tertiary-medium rounded border border-default\"\n                >Ctrl K</kbd\n              >\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Right: Actions Slot & Mobile Hamburger Button \u2014 ml-auto thay justify-between. -->\n      <div class=\"ml-auto flex h-16 items-center gap-2 @[40rem]:gap-3 shrink-0 whitespace-nowrap\">\n        <ng-content select=\"[slot=actions], [actions]\" />\n\n        <!-- Mobile Menu Toggle Button (Visible below xl) -->\n        <button\n          type=\"button\"\n          (click)=\"toggleMobileMenu()\"\n          class=\"@[78rem]:hidden p-2 rounded-md text-body-subtle hover:text-heading hover:bg-neutral-secondary-medium focus:outline-none focus:ring-2 focus:ring-brand-subtle cursor-pointer\"\n          [attr.aria-expanded]=\"!isCollapsed()\"\n          aria-label=\"\u0110\u00F3ng/M\u1EDF menu\"\n        >\n          @if (isCollapsed()) {\n            <ol-icon name=\"menu\" size=\"base\"></ol-icon>\n          } @else {\n            <ol-icon name=\"close\" size=\"base\"></ol-icon>\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Mobile Drawer / Dropdown Panel matching Figma 3279:21067 / #1149:75488 -->\n  <!--\n    Lu\u00F4n D\u1EF0NG, \u1EA9n b\u1EB1ng `hidden` khi \u0111\u00F3ng \u2014 kh\u00F4ng b\u1ECDc trong @if. N\u1ED9i dung chi\u1EBFu\n    v\u00E0o nh\u00E1nh @if \u0111ang t\u1EAFt kh\u00F4ng n\u1EB1m trong DOM, n\u00EAn kh\u00F4ng ph\u00E1t hi\u1EC7n \u0111\u01B0\u1EE3c n\u01A1i g\u1ECDi\n    c\u00F3 khai `slot=\"mobile-links\"` hay kh\u00F4ng (xem detectMobileSlots()).\n  -->\n  <div #mobilePanel [class]=\"mobilePanelClasses()\">\n    <!-- Mobile User Profile Slot -->\n    <ng-content select=\"[slot=mobile-user]\" />\n\n    <!-- Mobile Search Input -->\n    @if (showSearch()) {\n      <div class=\"relative w-full @3xl:hidden\">\n        <div\n          class=\"absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-body-subtle\"\n        >\n          <ol-icon name=\"search\" size=\"sm\"></ol-icon>\n        </div>\n        <input\n          type=\"text\"\n          [value]=\"searchQuery\"\n          (input)=\"handleSearchInput($event)\"\n          [placeholder]=\"searchPlaceholder()\"\n          class=\"w-full pl-9 pr-3 py-2.5 text-sm bg-neutral-tertiary text-heading rounded-md border border-default focus:outline-none focus:ring-2 focus:ring-brand-subtle\"\n        />\n      </div>\n    }\n\n    <!-- Mobile Links Slot -->\n    <ng-content select=\"[slot=mobile], [slot=mobile-links]\" />\n\n    <!-- Mobile Actions Slot -->\n    <ng-content select=\"[slot=mobile-actions]\" />\n\n    <!-- Mobile Footer Contact Info Slot -->\n    <ng-content select=\"[slot=mobile-footer]\" />\n  </div>\n</nav>\n" }]
+        }], ctorParameters: () => [], propDecorators: { brandLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandLogo", required: false }] }], brandName: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandName", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onToggleMobileMenu: [{ type: i0.Output, args: ["onToggleMobileMenu"] }], mobilePanel: [{ type: i0.ViewChild, args: ['mobilePanel', { isSignal: true }] }], navWrap: [{ type: i0.ViewChild, args: ['navWrap', { isSignal: true }] }], handleGlobalKeydown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
             }] } });
@@ -12385,11 +14181,11 @@ class OlNavbarItem {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "itemClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlNavbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlNavbarItem, isStandalone: true, selector: "ol-navbar-item", inputs: { routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActive: { classPropertyName: "routerLinkActive", publicName: "routerLinkActive", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!--\n  BA NH\u00C1NH, `routerLinkActive` CH\u1EC8 \u1EDF nh\u00E1nh c\u00F3 `routerLink`.\n\n  B\u1EA3n c\u0169 d\u00F9ng M\u1ED8T `<a>` mang c\u1EA3 `[routerLink]`, `[routerLinkActive]` v\u00E0\n  `[class]=\"itemClasses()\"`. Hai th\u1EE9 sau c\u00F9ng ghi v\u00E0o thu\u1ED9c t\u00EDnh `class`, v\u00E0\n  `RouterLinkActive` ghi SAU n\u00EAn n\u00F3 th\u1EAFng: chu\u1ED7i `'active \u2026'` m\u00E0 `itemClasses()`\n  th\u00EAm khi `[active]=\"true\"` b\u1ECB nu\u1ED1t s\u1EA1ch.\n\n  T\u00E1ch nh\u00E1nh th\u00F4i KH\u00D4NG \u0111\u1EE7 \u2014 nh\u00E1nh `routerLink` v\u1EABn c\u00F3 c\u1EA3 hai directive tr\u00EAn\n  c\u00F9ng th\u1EBB. N\u00EAn `routerLinkActive` ch\u1EC9 g\u1EAFn khi `active()` T\u1EAET: \u0111\u00E3 \u00E9p active\n  b\u1EB1ng input th\u00EC kh\u00F4ng c\u00F2n g\u00EC \u0111\u1EC3 directive t\u00EDnh, hai b\u00EAn h\u1EBFt tranh nhau.\n\n  H\u1ECFng im l\u1EB7ng \u2014 n\u1EC1n v\u00E0 ch\u1EEF v\u1EABn \u0111\u00FAng (ch\u00FAng n\u1EB1m trong c\u00F9ng chu\u1ED7i), ch\u1EC9 ri\u00EAng\n  ch\u1EEF `active` m\u1EA5t. H\u1EADu qu\u1EA3 ch\u1EC9 l\u1ED9 ra khi r\u00EA chu\u1ED9t: \u0111o /navbar 2026-09-24, m\u1EE5c\n  \u0111ang m\u1EDF NH\u1EA0T \u0110I (#e3eaff -> #f5f8ff) v\u00EC `not-[.active]:hover:bg-brand-softer`\n  v\u1EABn \u00E1p d\u1EE5ng, c\u00F2n `[&.active]:hover:bg-brand-medium` th\u00EC kh\u00F4ng. Sidebar c\u00F9ng\n  b\u1ED9 class nh\u01B0ng \u0110\u1EACM L\u00CAN \u0111\u00FAng (#d2dcfa) v\u00EC n\u00F3 \u0111\u00E3 t\u00E1ch nh\u00E1nh t\u1EEB tr\u01B0\u1EDBc.\n\n  Unit test KH\u00D4NG b\u1EAFt \u0111\u01B0\u1EE3c: `provideRouter([])` kh\u00F4ng c\u00F3 route n\u00E0o kh\u1EDBp n\u00EAn\n  directive kh\u00F4ng ch\u1EA1m v\u00E0o `class`, test xanh trong khi tr\u00ECnh duy\u1EC7t h\u1ECFng.\n\n  N\u1ED9i dung g\u00F3i trong `ng-template` v\u00E0 chi\u1EBFu l\u1EA1i b\u1EB1ng `ngTemplateOutlet`: khai\n  nhi\u1EC1u `<ng-content>` kh\u00F4ng `select` \u2014 k\u1EC3 c\u1EA3 \u1EDF c\u00E1c nh\u00E1nh lo\u1EA1i tr\u1EEB nhau \u2014\n  th\u00EC Angular ch\u1EC9 chi\u1EBFu v\u00E0o M\u1ED8T ch\u1ED7 v\u00E0 th\u1EF1c t\u1EBF m\u1EA5t \u1EDF m\u1ECDi nh\u00E1nh.\n-->\n<ng-template #itemContent>\n  @if (icon()) {\n    <ol-icon [name]=\"icon()!\" size=\"sm\" class=\"shrink-0\"></ol-icon>\n  }\n  @if (label()) {\n    <span class=\"whitespace-nowrap\">{{ label() }}</span>\n  }\n  <ng-content />\n</ng-template>\n\n@if (routerLink()) {\n  <a\n    [routerLink]=\"routerLink()\"\n    [routerLinkActive]=\"active() ? '' : routerLinkActive()\"\n    [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n    [class]=\"itemClasses()\"\n    [attr.aria-disabled]=\"disabled()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"itemContent\" />\n  </a>\n} @else if (href()) {\n  <a [href]=\"href()\" [class]=\"itemClasses()\" [attr.aria-disabled]=\"disabled()\">\n    <ng-container [ngTemplateOutlet]=\"itemContent\" />\n  </a>\n} @else {\n  <a [class]=\"itemClasses()\" [attr.aria-disabled]=\"disabled()\">\n    <ng-container [ngTemplateOutlet]=\"itemContent\" />\n  </a>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlNavbarItem, isStandalone: true, selector: "ol-navbar-item", inputs: { routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActive: { classPropertyName: "routerLinkActive", publicName: "routerLinkActive", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!--\n  BA NH\u00C1NH, `routerLinkActive` CH\u1EC8 \u1EDF nh\u00E1nh c\u00F3 `routerLink`.\n\n  B\u1EA3n c\u0169 d\u00F9ng M\u1ED8T `<a>` mang c\u1EA3 `[routerLink]`, `[routerLinkActive]` v\u00E0\n  `[class]=\"itemClasses()\"`. Hai th\u1EE9 sau c\u00F9ng ghi v\u00E0o thu\u1ED9c t\u00EDnh `class`, v\u00E0\n  `RouterLinkActive` ghi SAU n\u00EAn n\u00F3 th\u1EAFng: chu\u1ED7i `'active \u2026'` m\u00E0 `itemClasses()`\n  th\u00EAm khi `[active]=\"true\"` b\u1ECB nu\u1ED1t s\u1EA1ch.\n\n  T\u00E1ch nh\u00E1nh th\u00F4i KH\u00D4NG \u0111\u1EE7 \u2014 nh\u00E1nh `routerLink` v\u1EABn c\u00F3 c\u1EA3 hai directive tr\u00EAn\n  c\u00F9ng th\u1EBB. N\u00EAn `routerLinkActive` ch\u1EC9 g\u1EAFn khi `active()` T\u1EAET: \u0111\u00E3 \u00E9p active\n  b\u1EB1ng input th\u00EC kh\u00F4ng c\u00F2n g\u00EC \u0111\u1EC3 directive t\u00EDnh, hai b\u00EAn h\u1EBFt tranh nhau.\n\n  H\u1ECFng im l\u1EB7ng \u2014 n\u1EC1n v\u00E0 ch\u1EEF v\u1EABn \u0111\u00FAng (ch\u00FAng n\u1EB1m trong c\u00F9ng chu\u1ED7i), ch\u1EC9 ri\u00EAng\n  ch\u1EEF `active` m\u1EA5t. H\u1EADu qu\u1EA3 ch\u1EC9 l\u1ED9 ra khi r\u00EA chu\u1ED9t: \u0111o /navbar 2026-09-24, m\u1EE5c\n  \u0111ang m\u1EDF NH\u1EA0T \u0110I (#e3eaff -> #f5f8ff) v\u00EC `not-[.active]:hover:bg-brand-softer`\n  v\u1EABn \u00E1p d\u1EE5ng, c\u00F2n `[&.active]:hover:bg-brand-medium` th\u00EC kh\u00F4ng. Sidebar c\u00F9ng\n  b\u1ED9 class nh\u01B0ng \u0110\u1EACM L\u00CAN \u0111\u00FAng (#d2dcfa) v\u00EC n\u00F3 \u0111\u00E3 t\u00E1ch nh\u00E1nh t\u1EEB tr\u01B0\u1EDBc.\n\n  Unit test KH\u00D4NG b\u1EAFt \u0111\u01B0\u1EE3c: `provideRouter([])` kh\u00F4ng c\u00F3 route n\u00E0o kh\u1EDBp n\u00EAn\n  directive kh\u00F4ng ch\u1EA1m v\u00E0o `class`, test xanh trong khi tr\u00ECnh duy\u1EC7t h\u1ECFng.\n\n  N\u1ED9i dung g\u00F3i trong `ng-template` v\u00E0 chi\u1EBFu l\u1EA1i b\u1EB1ng `ngTemplateOutlet`: khai\n  nhi\u1EC1u `<ng-content>` kh\u00F4ng `select` \u2014 k\u1EC3 c\u1EA3 \u1EDF c\u00E1c nh\u00E1nh lo\u1EA1i tr\u1EEB nhau \u2014\n  th\u00EC Angular ch\u1EC9 chi\u1EBFu v\u00E0o M\u1ED8T ch\u1ED7 v\u00E0 th\u1EF1c t\u1EBF m\u1EA5t \u1EDF m\u1ECDi nh\u00E1nh.\n-->\n<ng-template #itemContent>\n  @if (icon()) {\n    <ol-icon [name]=\"icon()!\" size=\"sm\" class=\"shrink-0\"></ol-icon>\n  }\n  @if (label()) {\n    <span class=\"whitespace-nowrap\">{{ label() }}</span>\n  }\n  <ng-content />\n</ng-template>\n\n@if (routerLink()) {\n  <a\n    [routerLink]=\"routerLink()\"\n    [routerLinkActive]=\"active() ? '' : routerLinkActive()\"\n    [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n    [class]=\"itemClasses()\"\n    [attr.aria-disabled]=\"disabled()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"itemContent\" />\n  </a>\n} @else if (href()) {\n  <a [href]=\"href()\" [class]=\"itemClasses()\" [attr.aria-disabled]=\"disabled()\">\n    <ng-container [ngTemplateOutlet]=\"itemContent\" />\n  </a>\n} @else {\n  <!--\n    Kh\u00F4ng li\u00EAn k\u1EBFt th\u00EC l\u00E0 N\u00DAT, kh\u00F4ng ph\u1EA3i `<a>` tr\u1EA7n. `<a>` kh\u00F4ng `href` kh\u00F4ng\n    nh\u1EADn Tab v\u00E0 Enter kh\u00F4ng k\u00EDch ho\u1EA1t \u0111\u01B0\u1EE3c: m\u1EE5c d\u00F9ng \u0111\u1EC3 \u0111\u1ED5i tab t\u1EA1i ch\u1ED7 (kh\u00F4ng\n    \u0111i\u1EC1u h\u01B0\u1EDBng) th\u00EC b\u00E0n ph\u00EDm kh\u00F4ng b\u1EA5m \u0111\u01B0\u1EE3c (\u0111o /navbar 2026-09-28).\n  -->\n  <button\n    type=\"button\"\n    [class]=\"itemClasses()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-current]=\"active() ? 'page' : null\"\n  >\n    <ng-container [ngTemplateOutlet]=\"itemContent\" />\n  </button>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlNavbarItem, decorators: [{
             type: Component,
-            args: [{ selector: 'ol-navbar-item', standalone: true, imports: [CommonModule, RouterModule, OlIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  BA NH\u00C1NH, `routerLinkActive` CH\u1EC8 \u1EDF nh\u00E1nh c\u00F3 `routerLink`.\n\n  B\u1EA3n c\u0169 d\u00F9ng M\u1ED8T `<a>` mang c\u1EA3 `[routerLink]`, `[routerLinkActive]` v\u00E0\n  `[class]=\"itemClasses()\"`. Hai th\u1EE9 sau c\u00F9ng ghi v\u00E0o thu\u1ED9c t\u00EDnh `class`, v\u00E0\n  `RouterLinkActive` ghi SAU n\u00EAn n\u00F3 th\u1EAFng: chu\u1ED7i `'active \u2026'` m\u00E0 `itemClasses()`\n  th\u00EAm khi `[active]=\"true\"` b\u1ECB nu\u1ED1t s\u1EA1ch.\n\n  T\u00E1ch nh\u00E1nh th\u00F4i KH\u00D4NG \u0111\u1EE7 \u2014 nh\u00E1nh `routerLink` v\u1EABn c\u00F3 c\u1EA3 hai directive tr\u00EAn\n  c\u00F9ng th\u1EBB. N\u00EAn `routerLinkActive` ch\u1EC9 g\u1EAFn khi `active()` T\u1EAET: \u0111\u00E3 \u00E9p active\n  b\u1EB1ng input th\u00EC kh\u00F4ng c\u00F2n g\u00EC \u0111\u1EC3 directive t\u00EDnh, hai b\u00EAn h\u1EBFt tranh nhau.\n\n  H\u1ECFng im l\u1EB7ng \u2014 n\u1EC1n v\u00E0 ch\u1EEF v\u1EABn \u0111\u00FAng (ch\u00FAng n\u1EB1m trong c\u00F9ng chu\u1ED7i), ch\u1EC9 ri\u00EAng\n  ch\u1EEF `active` m\u1EA5t. H\u1EADu qu\u1EA3 ch\u1EC9 l\u1ED9 ra khi r\u00EA chu\u1ED9t: \u0111o /navbar 2026-09-24, m\u1EE5c\n  \u0111ang m\u1EDF NH\u1EA0T \u0110I (#e3eaff -> #f5f8ff) v\u00EC `not-[.active]:hover:bg-brand-softer`\n  v\u1EABn \u00E1p d\u1EE5ng, c\u00F2n `[&.active]:hover:bg-brand-medium` th\u00EC kh\u00F4ng. Sidebar c\u00F9ng\n  b\u1ED9 class nh\u01B0ng \u0110\u1EACM L\u00CAN \u0111\u00FAng (#d2dcfa) v\u00EC n\u00F3 \u0111\u00E3 t\u00E1ch nh\u00E1nh t\u1EEB tr\u01B0\u1EDBc.\n\n  Unit test KH\u00D4NG b\u1EAFt \u0111\u01B0\u1EE3c: `provideRouter([])` kh\u00F4ng c\u00F3 route n\u00E0o kh\u1EDBp n\u00EAn\n  directive kh\u00F4ng ch\u1EA1m v\u00E0o `class`, test xanh trong khi tr\u00ECnh duy\u1EC7t h\u1ECFng.\n\n  N\u1ED9i dung g\u00F3i trong `ng-template` v\u00E0 chi\u1EBFu l\u1EA1i b\u1EB1ng `ngTemplateOutlet`: khai\n  nhi\u1EC1u `<ng-content>` kh\u00F4ng `select` \u2014 k\u1EC3 c\u1EA3 \u1EDF c\u00E1c nh\u00E1nh lo\u1EA1i tr\u1EEB nhau \u2014\n  th\u00EC Angular ch\u1EC9 chi\u1EBFu v\u00E0o M\u1ED8T ch\u1ED7 v\u00E0 th\u1EF1c t\u1EBF m\u1EA5t \u1EDF m\u1ECDi nh\u00E1nh.\n-->\n<ng-template #itemContent>\n  @if (icon()) {\n    <ol-icon [name]=\"icon()!\" size=\"sm\" class=\"shrink-0\"></ol-icon>\n  }\n  @if (label()) {\n    <span class=\"whitespace-nowrap\">{{ label() }}</span>\n  }\n  <ng-content />\n</ng-template>\n\n@if (routerLink()) {\n  <a\n    [routerLink]=\"routerLink()\"\n    [routerLinkActive]=\"active() ? '' : routerLinkActive()\"\n    [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n    [class]=\"itemClasses()\"\n    [attr.aria-disabled]=\"disabled()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"itemContent\" />\n  </a>\n} @else if (href()) {\n  <a [href]=\"href()\" [class]=\"itemClasses()\" [attr.aria-disabled]=\"disabled()\">\n    <ng-container [ngTemplateOutlet]=\"itemContent\" />\n  </a>\n} @else {\n  <a [class]=\"itemClasses()\" [attr.aria-disabled]=\"disabled()\">\n    <ng-container [ngTemplateOutlet]=\"itemContent\" />\n  </a>\n}\n" }]
+            args: [{ selector: 'ol-navbar-item', standalone: true, imports: [CommonModule, RouterModule, OlIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  BA NH\u00C1NH, `routerLinkActive` CH\u1EC8 \u1EDF nh\u00E1nh c\u00F3 `routerLink`.\n\n  B\u1EA3n c\u0169 d\u00F9ng M\u1ED8T `<a>` mang c\u1EA3 `[routerLink]`, `[routerLinkActive]` v\u00E0\n  `[class]=\"itemClasses()\"`. Hai th\u1EE9 sau c\u00F9ng ghi v\u00E0o thu\u1ED9c t\u00EDnh `class`, v\u00E0\n  `RouterLinkActive` ghi SAU n\u00EAn n\u00F3 th\u1EAFng: chu\u1ED7i `'active \u2026'` m\u00E0 `itemClasses()`\n  th\u00EAm khi `[active]=\"true\"` b\u1ECB nu\u1ED1t s\u1EA1ch.\n\n  T\u00E1ch nh\u00E1nh th\u00F4i KH\u00D4NG \u0111\u1EE7 \u2014 nh\u00E1nh `routerLink` v\u1EABn c\u00F3 c\u1EA3 hai directive tr\u00EAn\n  c\u00F9ng th\u1EBB. N\u00EAn `routerLinkActive` ch\u1EC9 g\u1EAFn khi `active()` T\u1EAET: \u0111\u00E3 \u00E9p active\n  b\u1EB1ng input th\u00EC kh\u00F4ng c\u00F2n g\u00EC \u0111\u1EC3 directive t\u00EDnh, hai b\u00EAn h\u1EBFt tranh nhau.\n\n  H\u1ECFng im l\u1EB7ng \u2014 n\u1EC1n v\u00E0 ch\u1EEF v\u1EABn \u0111\u00FAng (ch\u00FAng n\u1EB1m trong c\u00F9ng chu\u1ED7i), ch\u1EC9 ri\u00EAng\n  ch\u1EEF `active` m\u1EA5t. H\u1EADu qu\u1EA3 ch\u1EC9 l\u1ED9 ra khi r\u00EA chu\u1ED9t: \u0111o /navbar 2026-09-24, m\u1EE5c\n  \u0111ang m\u1EDF NH\u1EA0T \u0110I (#e3eaff -> #f5f8ff) v\u00EC `not-[.active]:hover:bg-brand-softer`\n  v\u1EABn \u00E1p d\u1EE5ng, c\u00F2n `[&.active]:hover:bg-brand-medium` th\u00EC kh\u00F4ng. Sidebar c\u00F9ng\n  b\u1ED9 class nh\u01B0ng \u0110\u1EACM L\u00CAN \u0111\u00FAng (#d2dcfa) v\u00EC n\u00F3 \u0111\u00E3 t\u00E1ch nh\u00E1nh t\u1EEB tr\u01B0\u1EDBc.\n\n  Unit test KH\u00D4NG b\u1EAFt \u0111\u01B0\u1EE3c: `provideRouter([])` kh\u00F4ng c\u00F3 route n\u00E0o kh\u1EDBp n\u00EAn\n  directive kh\u00F4ng ch\u1EA1m v\u00E0o `class`, test xanh trong khi tr\u00ECnh duy\u1EC7t h\u1ECFng.\n\n  N\u1ED9i dung g\u00F3i trong `ng-template` v\u00E0 chi\u1EBFu l\u1EA1i b\u1EB1ng `ngTemplateOutlet`: khai\n  nhi\u1EC1u `<ng-content>` kh\u00F4ng `select` \u2014 k\u1EC3 c\u1EA3 \u1EDF c\u00E1c nh\u00E1nh lo\u1EA1i tr\u1EEB nhau \u2014\n  th\u00EC Angular ch\u1EC9 chi\u1EBFu v\u00E0o M\u1ED8T ch\u1ED7 v\u00E0 th\u1EF1c t\u1EBF m\u1EA5t \u1EDF m\u1ECDi nh\u00E1nh.\n-->\n<ng-template #itemContent>\n  @if (icon()) {\n    <ol-icon [name]=\"icon()!\" size=\"sm\" class=\"shrink-0\"></ol-icon>\n  }\n  @if (label()) {\n    <span class=\"whitespace-nowrap\">{{ label() }}</span>\n  }\n  <ng-content />\n</ng-template>\n\n@if (routerLink()) {\n  <a\n    [routerLink]=\"routerLink()\"\n    [routerLinkActive]=\"active() ? '' : routerLinkActive()\"\n    [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n    [class]=\"itemClasses()\"\n    [attr.aria-disabled]=\"disabled()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"itemContent\" />\n  </a>\n} @else if (href()) {\n  <a [href]=\"href()\" [class]=\"itemClasses()\" [attr.aria-disabled]=\"disabled()\">\n    <ng-container [ngTemplateOutlet]=\"itemContent\" />\n  </a>\n} @else {\n  <!--\n    Kh\u00F4ng li\u00EAn k\u1EBFt th\u00EC l\u00E0 N\u00DAT, kh\u00F4ng ph\u1EA3i `<a>` tr\u1EA7n. `<a>` kh\u00F4ng `href` kh\u00F4ng\n    nh\u1EADn Tab v\u00E0 Enter kh\u00F4ng k\u00EDch ho\u1EA1t \u0111\u01B0\u1EE3c: m\u1EE5c d\u00F9ng \u0111\u1EC3 \u0111\u1ED5i tab t\u1EA1i ch\u1ED7 (kh\u00F4ng\n    \u0111i\u1EC1u h\u01B0\u1EDBng) th\u00EC b\u00E0n ph\u00EDm kh\u00F4ng b\u1EA5m \u0111\u01B0\u1EE3c (\u0111o /navbar 2026-09-28).\n  -->\n  <button\n    type=\"button\"\n    [class]=\"itemClasses()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-current]=\"active() ? 'page' : null\"\n  >\n    <ng-container [ngTemplateOutlet]=\"itemContent\" />\n  </button>\n}\n" }]
         }], propDecorators: { routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActive", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class OlNavDropdown {
@@ -12399,8 +14195,75 @@ class OlNavDropdown {
     ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     alignRight = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "alignRight" }] : /* istanbul ignore next */ []));
+    /**
+     * Đang ở một trang CON của menu này (ví dụ "Lớp học" khi đang xem 10A1).
+     * Cùng hình với `ol-navbar-item` active — nền brand nhạt, chữ brand đậm —
+     * để thanh điều hướng luôn chỉ ra người dùng đang ở phân hệ nào.
+     */
+    active = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    triggerClasses = computed(() => [
+        'inline-flex items-center gap-1.5 px-3 py-2 text-sm rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-subtle cursor-pointer whitespace-nowrap shrink-0',
+        this.active()
+            ? 'bg-brand-soft text-fg-brand font-semibold hover:bg-brand-medium'
+            : 'font-medium text-body hover:text-fg-brand hover:bg-brand-softer',
+    ].join(' '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    /**
+     * Số cột của panel. `1` (mặc định) là menu thường; từ `2` là mega-menu.
+     *
+     * Mega-menu dùng cho menu có nhiều nhóm mục — thay vì một cột dài phải cuộn,
+     * chia thành cột đứng cạnh nhau và người dùng quét mắt một lượt là thấy hết.
+     *
+     * Dưới `md` LUÔN về một cột bất kể giá trị: hai cột trên màn 390px là mỗi
+     * cột 150px, chữ vỡ dòng giữa từ. Ngưỡng theo breakpoint chứ không theo bề
+     * ngang panel vì panel treo tự do, không có container để đo.
+     */
+    columns = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /**
+     * Panel rộng bằng cả navbar thay vì bám mép nút.
+     *
+     * Mega-menu nhiều cột mà vẫn bám mép nút thì nửa panel tràn ra ngoài màn
+     * hình khi nút nằm bên phải. Trải hết chiều ngang thì luôn nằm trong khung.
+     */
+    fullWidth = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
     isOpen = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * Class của panel.
+     *
+     * Gom vào MỘT chuỗi thay vì nhiều `[class.x]` rời: hai class cùng thuộc tính
+     * thì trình duyệt chọn theo thứ tự luật trong file CSS chứ không theo thứ tự
+     * viết, kết quả đổi theo bản build.
+     */
+    panelClasses = computed(() => {
+        const cols = this.columns();
+        /**
+         * Vỏ theo Figma `ol-dropdown` Type=Default (node 1149:39908): lề 8px bốn
+         * cạnh, các dòng cách nhau 6px, bóng `shadow-lg`, bo 12px — CÙNG vỏ với
+         * `ol-dropdown`. Bản trước `py-2` không lề ngang (nền mục đang chọn chạm
+         * sát mép khung), các dòng dính nhau, `shadow-2xl` — lệch cả Figma lẫn
+         * `ol-dropdown` (báo 2026-09-28).
+         */
+        const base = 'absolute mt-2 bg-neutral-primary rounded-md shadow-lg border border-default p-2 z-dropdown focus:outline-none transition-all duration-150';
+        // Một cột: rộng tối thiểu 64, bám mép nút. `space-y` chứ không `flex gap`:
+        // dòng là khối `block`, và không đụng `display` của vỏ.
+        if (cols === 1) {
+            const anchor = this.fullWidth() ? 'inset-x-0' : this.alignRight() ? 'right-0' : 'left-0';
+            return `${base} space-y-1.5 min-w-64 ${anchor}`;
+        }
+        // Nhiều cột: lưới, nhưng dưới `md` về một cột. Hai cột trên màn 390px là
+        // mỗi cột 150px — chữ vỡ dòng giữa từ.
+        const grid = { 2: 'md:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-4' }[cols];
+        const anchor = this.fullWidth() ? 'inset-x-0' : this.alignRight() ? 'right-0' : 'left-0';
+        const width = this.fullWidth()
+            ? ''
+            : { 2: 'md:w-[32rem]', 3: 'md:w-[44rem]', 4: 'md:w-[56rem]' }[cols];
+        return `${base} grid grid-cols-1 gap-x-6 gap-y-1 px-3 ${grid} ${anchor} ${width} min-w-64`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
     elementRef = inject(ElementRef);
     overlayContainer = inject(OlOverlayContainer);
     constructor() {
@@ -12431,16 +14294,184 @@ class OlNavDropdown {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlNavDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlNavDropdown, isStandalone: true, selector: "ol-nav-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, alignRight: { classPropertyName: "alignRight", publicName: "alignRight", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "handleClickOutside($event)" } }, ngImport: i0, template: "<div class=\"relative inline-block text-left\">\n  <!-- Trigger -->\n  <div (click)=\"toggle()\">\n    <ng-content select=\"[slot=trigger], [trigger]\" />\n    @if (label() || icon()) {\n      <button\n        type=\"button\"\n        class=\"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-lg text-body hover:text-fg-brand hover:bg-neutral-secondary-medium transition-colors focus:outline-none cursor-pointer whitespace-nowrap shrink-0\"\n        [attr.aria-expanded]=\"isOpen()\"\n        aria-haspopup=\"true\"\n      >\n        @if (icon()) {\n          <ol-icon [name]=\"icon()!\" size=\"sm\" class=\"shrink-0\"></ol-icon>\n        }\n        <span class=\"whitespace-nowrap\">{{ label() }}</span>\n        <ol-icon\n          name=\"chevron-down\"\n          size=\"xs\"\n          class=\"transition-transform duration-200 shrink-0\"\n          [class.rotate-180]=\"isOpen()\"\n        ></ol-icon>\n      </button>\n    }\n  </div>\n\n  <!-- Dropdown Menu Content -->\n  <div\n    class=\"absolute mt-2 min-w-64 bg-neutral-primary rounded-md shadow-2xl border border-default py-2 z-dropdown focus:outline-none transition-all duration-150\"\n    [class.hidden]=\"!isOpen()\"\n    [class.right-0]=\"alignRight()\"\n    [class.left-0]=\"!alignRight()\"\n    role=\"menu\"\n  >\n    <ng-content />\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlNavDropdown, isStandalone: true, selector: "ol-nav-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, alignRight: { classPropertyName: "alignRight", publicName: "alignRight", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "handleClickOutside($event)" } }, ngImport: i0, template: "<div class=\"relative inline-block text-left\">\n  <!-- Trigger -->\n  <div (click)=\"toggle()\">\n    <ng-content select=\"[slot=trigger], [trigger]\" />\n    @if (label() || icon()) {\n      <button\n        type=\"button\"\n        [class]=\"triggerClasses()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-current]=\"active() ? 'page' : null\"\n        aria-haspopup=\"true\"\n      >\n        @if (icon()) {\n          <ol-icon [name]=\"icon()!\" size=\"sm\" class=\"shrink-0\"></ol-icon>\n        }\n        <span class=\"whitespace-nowrap\">{{ label() }}</span>\n        <ol-icon\n          name=\"chevron-down\"\n          size=\"xs\"\n          class=\"transition-transform duration-200 shrink-0\"\n          [class.rotate-180]=\"isOpen()\"\n        ></ol-icon>\n      </button>\n    }\n  </div>\n\n  <!--\n    Panel. Class gom trong `panelClasses()` v\u00EC `columns` \u0111\u1ED5i c\u1EA3 c\u00E1ch x\u1EBFp, b\u1EC1\n    ngang l\u1EABn c\u00E1ch neo \u2014 ba th\u1EE9 \u0111\u00F3 ph\u1EA3i quy\u1EBFt c\u00F9ng nhau, t\u00E1ch th\u00E0nh nhi\u1EC1u\n    `[class.x]` r\u1EDDi th\u00EC m\u1ED7i t\u1ED5 h\u1EE3p l\u00E0 m\u1ED9t lu\u1EADt CSS ch\u1ECDi nhau.\n  -->\n  <div [class]=\"panelClasses()\" [class.hidden]=\"!isOpen()\" role=\"menu\">\n    <ng-content />\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlNavDropdown, decorators: [{
             type: Component,
-            args: [{ selector: 'ol-nav-dropdown', standalone: true, imports: [CommonModule, OlIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative inline-block text-left\">\n  <!-- Trigger -->\n  <div (click)=\"toggle()\">\n    <ng-content select=\"[slot=trigger], [trigger]\" />\n    @if (label() || icon()) {\n      <button\n        type=\"button\"\n        class=\"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-lg text-body hover:text-fg-brand hover:bg-neutral-secondary-medium transition-colors focus:outline-none cursor-pointer whitespace-nowrap shrink-0\"\n        [attr.aria-expanded]=\"isOpen()\"\n        aria-haspopup=\"true\"\n      >\n        @if (icon()) {\n          <ol-icon [name]=\"icon()!\" size=\"sm\" class=\"shrink-0\"></ol-icon>\n        }\n        <span class=\"whitespace-nowrap\">{{ label() }}</span>\n        <ol-icon\n          name=\"chevron-down\"\n          size=\"xs\"\n          class=\"transition-transform duration-200 shrink-0\"\n          [class.rotate-180]=\"isOpen()\"\n        ></ol-icon>\n      </button>\n    }\n  </div>\n\n  <!-- Dropdown Menu Content -->\n  <div\n    class=\"absolute mt-2 min-w-64 bg-neutral-primary rounded-md shadow-2xl border border-default py-2 z-dropdown focus:outline-none transition-all duration-150\"\n    [class.hidden]=\"!isOpen()\"\n    [class.right-0]=\"alignRight()\"\n    [class.left-0]=\"!alignRight()\"\n    role=\"menu\"\n  >\n    <ng-content />\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], alignRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignRight", required: false }] }], handleClickOutside: [{
+            args: [{ selector: 'ol-nav-dropdown', standalone: true, imports: [CommonModule, OlIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative inline-block text-left\">\n  <!-- Trigger -->\n  <div (click)=\"toggle()\">\n    <ng-content select=\"[slot=trigger], [trigger]\" />\n    @if (label() || icon()) {\n      <button\n        type=\"button\"\n        [class]=\"triggerClasses()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-current]=\"active() ? 'page' : null\"\n        aria-haspopup=\"true\"\n      >\n        @if (icon()) {\n          <ol-icon [name]=\"icon()!\" size=\"sm\" class=\"shrink-0\"></ol-icon>\n        }\n        <span class=\"whitespace-nowrap\">{{ label() }}</span>\n        <ol-icon\n          name=\"chevron-down\"\n          size=\"xs\"\n          class=\"transition-transform duration-200 shrink-0\"\n          [class.rotate-180]=\"isOpen()\"\n        ></ol-icon>\n      </button>\n    }\n  </div>\n\n  <!--\n    Panel. Class gom trong `panelClasses()` v\u00EC `columns` \u0111\u1ED5i c\u1EA3 c\u00E1ch x\u1EBFp, b\u1EC1\n    ngang l\u1EABn c\u00E1ch neo \u2014 ba th\u1EE9 \u0111\u00F3 ph\u1EA3i quy\u1EBFt c\u00F9ng nhau, t\u00E1ch th\u00E0nh nhi\u1EC1u\n    `[class.x]` r\u1EDDi th\u00EC m\u1ED7i t\u1ED5 h\u1EE3p l\u00E0 m\u1ED9t lu\u1EADt CSS ch\u1ECDi nhau.\n  -->\n  <div [class]=\"panelClasses()\" [class.hidden]=\"!isOpen()\" role=\"menu\">\n    <ng-content />\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], alignRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignRight", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], handleClickOutside: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
 
+/**
+ * Thanh menu kiểu ứng dụng để bàn — Tệp · Sửa · Xem.
+ *
+ * Chưa có node Figma — dựng theo design system, dùng lại cách trình bày của
+ * `ol-dropdown-item`.
+ *
+ * ## Khác `ol-dropdown` ở ba điểm, và đó là lý do có component riêng
+ *
+ * 1. **Mở một menu rồi RÊ sang menu kế là mở luôn**, không phải bấm lại. Đây
+ *    là hành vi người dùng đã quen từ phần mềm để bàn; thiếu nó thì thanh menu
+ *    chỉ là mấy cái dropdown đặt cạnh nhau.
+ * 2. **Mũi tên trái/phải đi giữa các menu**, lên/xuống đi trong menu đang mở.
+ *    WAI-ARIA quy định `role="menubar"` phải làm vậy.
+ * 3. **Một menu mở thì menu khác đóng** — không bao giờ có hai panel cùng lúc.
+ *
+ * ## Vì sao KHÔNG treo panel ra `<body>`
+ *
+ * Thanh menu thường nằm ngay dưới tiêu đề cửa sổ, không bị `overflow: hidden`
+ * cắt như dropdown trong bảng. Giữ panel trong cây DOM thì Tab đi vào được tự
+ * nhiên, không phải xử lý riêng như `ol-dropdown` đã phải làm.
+ *
+ * ## Lưu ý khi viết test
+ *
+ * Rê chuột giữa các menu cần bố cục thật để tính vị trí. jsdom không có, nên
+ * spec khoá phần bàn phím và trạng thái mở/đóng; hành vi rê nghiệm thu trên
+ * trình duyệt.
+ */
+class OlMenubar {
+    elementRef = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    overlayContainer = inject(OlOverlayContainer);
+    menus = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Thanh menu ứng dụng', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** `id` của menu đang mở. Rỗng nghĩa là không menu nào mở. */
+    openId = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openId" }] : /* istanbul ignore next */ []));
+    openMenuId = this.openId.asReadonly();
+    itemSelect = output();
+    releaseEscape = null;
+    constructor() {
+        this.destroyRef.onDestroy(() => this.closeAll());
+    }
+    toggle(menu) {
+        if (menu.disabled)
+            return;
+        this.openId() === menu.id ? this.closeAll() : this.open(menu.id);
+    }
+    /**
+     * Rê sang menu khác khi ĐANG có menu mở thì mở luôn menu đó.
+     *
+     * Không mở khi chưa menu nào mở — nếu không, lướt chuột ngang thanh là bung
+     * ra một panel người dùng không định mở.
+     */
+    onMenuHover(menu) {
+        if (!this.openId() || menu.disabled)
+            return;
+        this.open(menu.id);
+    }
+    open(id) {
+        this.openId.set(id);
+        // Vào ngăn xếp Escape — chỉ lớp trên cùng đóng, nên menubar trong modal
+        // không kéo modal đóng theo.
+        // Truyền cả `contains` để ngăn xếp tự lo việc bấm ra ngoài — không tự gắn
+        // `document:click` nữa. Lớp nổi nào tự nghe thì một cú bấm nền đóng luôn
+        // mọi lớp; ngăn xếp biết cú bấm thuộc lớp nào nên chỉ đóng đúng cái cần.
+        this.releaseEscape ??= this.overlayContainer.register(() => this.closeAll(), (target) => this.elementRef.nativeElement.contains(target));
+    }
+    closeAll() {
+        this.openId.set('');
+        this.releaseEscape?.();
+        this.releaseEscape = null;
+    }
+    onItemClick(menu, item) {
+        if (item.disabled)
+            return;
+        this.itemSelect.emit({ menu, item });
+        this.closeAll();
+    }
+    /**
+     * Mũi tên trái/phải đi giữa các menu — WAI-ARIA quy định cho `role="menubar"`.
+     *
+     * Vòng lại đầu khi tới cuối: thanh menu là một dải kín, không phải danh sách
+     * có điểm dừng. Người dùng nhấn phải liên tục thì quay về menu đầu.
+     *
+     * Dùng `(keydown)` trần rồi tự lọc phím vì thẻ đã có `(click)` — hai listener
+     * khác kiểu sự kiện trên cùng thẻ thì Angular suy `$event` theo cái đầu.
+     */
+    onTriggerKeydown(event, index) {
+        const list = this.menus();
+        let next = null;
+        if (event.key === 'ArrowRight')
+            next = this.nextEnabled(index, 1);
+        else if (event.key === 'ArrowLeft')
+            next = this.nextEnabled(index, -1);
+        else if (event.key === 'Home')
+            next = this.nextEnabled(-1, 1);
+        else if (event.key === 'End')
+            next = this.nextEnabled(list.length, -1);
+        else if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.open(list[index].id);
+            return;
+        }
+        else
+            return;
+        if (next === null)
+            return;
+        event.preventDefault();
+        const host = this.elementRef.nativeElement;
+        const buttons = host.querySelectorAll('[role="menuitem"][aria-haspopup]');
+        buttons[next]?.focus();
+        // Đang mở menu nào thì chuyển menu luôn — giống rê chuột.
+        if (this.openId())
+            this.open(list[next].id);
+    }
+    /**
+     * Menu kế tiếp **còn dùng được** theo hướng `step`, vòng lại khi tới biên.
+     *
+     * Phải bỏ qua menu `disabled`: nút gốc có thuộc tính `disabled` nên
+     * `.focus()` trên nó KHÔNG có tác dụng nào — tiêu điểm đứng nguyên chỗ cũ và
+     * người dùng tưởng bàn phím hỏng. Spec bắt đúng lỗi này khi menu cuối bị vô
+     * hiệu: nhấn End là tiêu điểm rơi về `<body>`.
+     *
+     * Trả `null` khi KHÔNG có menu nào dùng được — lúc đó không `preventDefault`,
+     * để phím về lại hành vi mặc định của trình duyệt.
+     *
+     * Nhận `from` ngoài dải (-1 hoặc `length`) để Home/End dùng chung một phép:
+     * Home là "từ trước mục đầu, đi sang phải", End là "từ sau mục cuối, đi sang
+     * trái".
+     */
+    nextEnabled(from, step) {
+        const list = this.menus();
+        for (let k = 1; k <= list.length; k++) {
+            const i = (((from + step * k) % list.length) + list.length) % list.length;
+            if (!list[i].disabled)
+                return i;
+        }
+        return null;
+    }
+    triggerClasses(menu) {
+        const active = this.openId() === menu.id;
+        // Gom vào MỘT chuỗi: hai class nền cùng lúc thì trình duyệt chọn theo thứ
+        // tự luật trong file CSS chứ không theo thứ tự viết.
+        const state = menu.disabled
+            ? 'text-body-subtle opacity-50 cursor-not-allowed'
+            : active
+                ? 'bg-neutral-secondary text-heading'
+                : 'text-body hover:bg-neutral-secondary cursor-pointer';
+        return `rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle ${state}`;
+    }
+    itemClasses(item) {
+        const state = item.disabled
+            ? 'text-body-subtle opacity-50 cursor-not-allowed'
+            : 'text-body hover:bg-neutral-secondary cursor-pointer';
+        return `flex w-full items-center justify-between gap-6 rounded px-3 py-1.5 text-sm focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle ${state}`;
+    }
+    hasMenus = computed(() => this.menus().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasMenus" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlMenubar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlMenubar, isStandalone: true, selector: "ol-menubar", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { classAttribute: "block" }, ngImport: i0, template: "<!--\n  Panel n\u1EB1m TRONG c\u00E2y DOM c\u1EE7a t\u1EEBng menu (`relative` > `absolute`), kh\u00F4ng treo ra\n  `<body>`: thanh menu kh\u00F4ng b\u1ECB `overflow: hidden` c\u1EE7a khung cha c\u1EAFt, n\u00EAn Tab \u0111i\n  v\u00E0o panel t\u1EF1 nhi\u00EAn theo th\u1EE9 t\u1EF1 t\u00E0i li\u1EC7u.\n-->\n@if (hasMenus()) {\n  <div\n    [attr.aria-label]=\"ariaLabel()\"\n    class=\"flex items-center gap-0.5 rounded-lg border border-default bg-neutral-primary p-1\"\n    role=\"menubar\"\n  >\n    @for (menu of menus(); track menu.id; let i = $index) {\n      <div class=\"relative\">\n        <button\n          type=\"button\"\n          [attr.aria-disabled]=\"menu.disabled ? 'true' : null\"\n          [attr.aria-expanded]=\"openMenuId() === menu.id\"\n          [class]=\"triggerClasses(menu)\"\n          [disabled]=\"menu.disabled\"\n          aria-haspopup=\"menu\"\n          role=\"menuitem\"\n          (click)=\"toggle(menu)\"\n          (keydown)=\"onTriggerKeydown($event, i)\"\n          (mouseenter)=\"onMenuHover(menu)\"\n        >\n          {{ menu.label }}\n        </button>\n\n        @if (openMenuId() === menu.id) {\n          <div\n            [attr.aria-label]=\"menu.label\"\n            class=\"absolute left-0 top-full z-dropdown mt-1 min-w-52 rounded-lg border border-default bg-neutral-primary p-1 shadow-lg\"\n            role=\"menu\"\n          >\n            @for (item of menu.items; track item.id) {\n              <!--\n                K\u1EBB ng\u0103n l\u00E0 ph\u1EA7n t\u1EED RI\u00CANG, kh\u00F4ng ph\u1EA3i `border-top` c\u1EE7a m\u1EE5c.\n                `first:`/`last:` trong template component kh\u1EDBp m\u1ECDi th\u1EC3 hi\u1EC7n n\u00EAn\n                \u0111\u01B0\u1EDDng k\u1EBB theo bi\u1EBFn th\u1EC3 s\u1EBD hi\u1EC7n sai ch\u1ED7.\n              -->\n              @if (item.separatorBefore) {\n                <div class=\"my-1 h-px bg-default\" role=\"separator\"></div>\n              }\n              <button\n                type=\"button\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [class]=\"itemClasses(item)\"\n                [disabled]=\"item.disabled\"\n                role=\"menuitem\"\n                (click)=\"onItemClick(menu, item)\"\n              >\n                <span>{{ item.label }}</span>\n                @if (item.shortcut) {\n                  <span class=\"text-xs text-body-subtle\">{{ item.shortcut }}</span>\n                }\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlMenubar, decorators: [{
+            type: Component,
+            args: [{ selector: 'ol-menubar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block' }, template: "<!--\n  Panel n\u1EB1m TRONG c\u00E2y DOM c\u1EE7a t\u1EEBng menu (`relative` > `absolute`), kh\u00F4ng treo ra\n  `<body>`: thanh menu kh\u00F4ng b\u1ECB `overflow: hidden` c\u1EE7a khung cha c\u1EAFt, n\u00EAn Tab \u0111i\n  v\u00E0o panel t\u1EF1 nhi\u00EAn theo th\u1EE9 t\u1EF1 t\u00E0i li\u1EC7u.\n-->\n@if (hasMenus()) {\n  <div\n    [attr.aria-label]=\"ariaLabel()\"\n    class=\"flex items-center gap-0.5 rounded-lg border border-default bg-neutral-primary p-1\"\n    role=\"menubar\"\n  >\n    @for (menu of menus(); track menu.id; let i = $index) {\n      <div class=\"relative\">\n        <button\n          type=\"button\"\n          [attr.aria-disabled]=\"menu.disabled ? 'true' : null\"\n          [attr.aria-expanded]=\"openMenuId() === menu.id\"\n          [class]=\"triggerClasses(menu)\"\n          [disabled]=\"menu.disabled\"\n          aria-haspopup=\"menu\"\n          role=\"menuitem\"\n          (click)=\"toggle(menu)\"\n          (keydown)=\"onTriggerKeydown($event, i)\"\n          (mouseenter)=\"onMenuHover(menu)\"\n        >\n          {{ menu.label }}\n        </button>\n\n        @if (openMenuId() === menu.id) {\n          <div\n            [attr.aria-label]=\"menu.label\"\n            class=\"absolute left-0 top-full z-dropdown mt-1 min-w-52 rounded-lg border border-default bg-neutral-primary p-1 shadow-lg\"\n            role=\"menu\"\n          >\n            @for (item of menu.items; track item.id) {\n              <!--\n                K\u1EBB ng\u0103n l\u00E0 ph\u1EA7n t\u1EED RI\u00CANG, kh\u00F4ng ph\u1EA3i `border-top` c\u1EE7a m\u1EE5c.\n                `first:`/`last:` trong template component kh\u1EDBp m\u1ECDi th\u1EC3 hi\u1EC7n n\u00EAn\n                \u0111\u01B0\u1EDDng k\u1EBB theo bi\u1EBFn th\u1EC3 s\u1EBD hi\u1EC7n sai ch\u1ED7.\n              -->\n              @if (item.separatorBefore) {\n                <div class=\"my-1 h-px bg-default\" role=\"separator\"></div>\n              }\n              <button\n                type=\"button\"\n                [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n                [class]=\"itemClasses(item)\"\n                [disabled]=\"item.disabled\"\n                role=\"menuitem\"\n                (click)=\"onItemClick(menu, item)\"\n              >\n                <span>{{ item.label }}</span>\n                @if (item.shortcut) {\n                  <span class=\"text-xs text-body-subtle\">{{ item.shortcut }}</span>\n                }\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }] } });
+
 class OlPagination {
     type = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
@@ -12483,6 +14514,18 @@ class OlPagination {
     ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
     showInfo = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showInfo" }] : /* istanbul ignore next */ []));
+    /**
+     * Thêm ô chọn số dòng mỗi trang ("10 mỗi trang") vào BẤT KỲ type nào — cạnh
+     * dãy số, cạnh hai nút, cạnh ô nhập trang… Trước đây nó chỉ có ở một type
+     * riêng (`with-dropdown`), muốn nó cạnh `arrows` hay `two-buttons` là không
+     * được. Danh sách lấy từ `pageSizeOptions`, đổi thì phát `(pageChange)` về 1.
+     */
+    withDropdown = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "withDropdown" }] : /* istanbul ignore next */ []));
+    /**
+     * @deprecated Dùng `withDropdown`. Bí danh: bật là thêm ô chọn cỡ trang. Khi
+     * không đặt `type`, nó vẫn chọn bố cục `with-dropdown` như trước.
+     */
     showSizeChanger = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showSizeChanger" }] : /* istanbul ignore next */ []));
     showQuickJumper = input(false, /* @ts-ignore */
@@ -12525,6 +14568,15 @@ class OlPagination {
         return 'default';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
+    /** Bố cục vẽ ra: `with-dropdown` là bí danh nên quy về `text-buttons`. */
+    layoutType = computed(() => {
+        const t = this.effectiveType();
+        return t === 'with-dropdown' ? 'text-buttons' : t;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layoutType" }] : /* istanbul ignore next */ []));
+    /** Có vẽ ô chọn cỡ trang không — cờ riêng, độc lập với type. */
+    hasPageSizeDropdown = computed(() => this.withDropdown() || this.showSizeChanger() || this.effectiveType() === 'with-dropdown', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasPageSizeDropdown" }] : /* istanbul ignore next */ []));
     /**
      * Trang đang xem — gộp `pageIndex` và bí danh `currentPage`.
      *
@@ -12696,14 +14748,14 @@ class OlPagination {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlPagination, isStandalone: true, selector: "ol-pagination", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPagesInput: { classPropertyName: "totalPagesInput", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showText: { classPropertyName: "showText", publicName: "showText", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, showSizeChanger: { classPropertyName: "showSizeChanger", publicName: "showSizeChanger", isSignal: true, isRequired: false, transformFunction: null }, showQuickJumper: { classPropertyName: "showQuickJumper", publicName: "showQuickJumper", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", pageIndex: "pageIndexChange", currentPage: "currentPageChange", pageChange: "pageChange" }, host: { classAttribute: "block w-full" }, ngImport: i0, template: "<div class=\"flex items-center gap-4 flex-wrap max-w-full\">\n  <!-- 1. Type = Default (Figma #1149:81851) -->\n  @if (effectiveType() === 'default') {\n    <nav\n      class=\"inline-flex -space-x-px rounded-md shadow-xs isolate select-none\"\n      aria-label=\"Ph\u00E2n trang\"\n    >\n      <!-- Prev Button -->\n      <button\n        type=\"button\"\n        (click)=\"prev()\"\n        [disabled]=\"effectivePageIndex() <= 1\"\n        class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-l-md border border-default transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft shrink-0\"\n        aria-label=\"Trang tr\u01B0\u1EDBc\"\n      >\n        <ol-icon name=\"alt-arrow-left\" size=\"xs\"></ol-icon>\n      </button>\n\n      <!-- Pages Array -->\n      @for (page of visiblePages(); track trackPage($index, page)) {\n        @if (page === 'ellipsis') {\n          <span\n            class=\"relative inline-flex items-center justify-center px-3 h-9 text-sm text-fg-disabled bg-neutral-primary border border-default select-none whitespace-nowrap shrink-0\"\n            aria-hidden=\"true\"\n          >\n            ...\n          </span>\n        } @else {\n          <button\n            type=\"button\"\n            (click)=\"goToPage(page)\"\n            [attr.aria-current]=\"page === effectivePageIndex() ? 'page' : null\"\n            [attr.aria-label]=\"'Trang ' + page\"\n            [class]=\"\n              'relative inline-flex items-center justify-center min-w-9 h-9 px-3 text-sm transition-colors cursor-pointer whitespace-nowrap shrink-0 ' +\n              (page === effectivePageIndex()\n                ? 'z-10 font-semibold border border-brand bg-brand text-white'\n                : 'font-medium border border-default bg-neutral-primary-soft text-body hover:bg-neutral-secondary-soft')\n            \"\n          >\n            {{ page }}\n          </button>\n        }\n      }\n\n      <!-- Next Button -->\n      <button\n        type=\"button\"\n        (click)=\"next()\"\n        [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n        class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-r-md border border-default transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft shrink-0\"\n        aria-label=\"Trang sau\"\n      >\n        <ol-icon name=\"alt-arrow-right\" size=\"xs\"></ol-icon>\n      </button>\n    </nav>\n  }\n\n  <!-- 2. Type = Arrows (Figma #1149:81864) -->\n  @if (effectiveType() === 'arrows') {\n    <nav\n      class=\"inline-flex -space-x-px rounded-md shadow-xs isolate select-none\"\n      aria-label=\"Ph\u00E2n trang\"\n    >\n      <button\n        type=\"button\"\n        (click)=\"prev()\"\n        [disabled]=\"effectivePageIndex() <= 1\"\n        class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-l-md border border-default transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft shrink-0\"\n        aria-label=\"Trang tr\u01B0\u1EDBc\"\n      >\n        <ol-icon name=\"alt-arrow-left\" size=\"xs\"></ol-icon>\n      </button>\n\n      <span\n        class=\"relative inline-flex items-center justify-center px-4 h-9 text-sm font-medium text-body bg-neutral-primary border border-default select-none whitespace-nowrap shrink-0\"\n      >\n        {{ effectivePageIndex() }} tr\u00EAn {{ calculatedTotalPages() }}\n      </span>\n\n      <button\n        type=\"button\"\n        (click)=\"next()\"\n        [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n        class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-r-md border border-default transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft shrink-0\"\n        aria-label=\"Trang sau\"\n      >\n        <ol-icon name=\"alt-arrow-right\" size=\"xs\"></ol-icon>\n      </button>\n    </nav>\n  }\n\n  <!-- 3. Type = Dropdown & buttons (Figma #1149:81868) -->\n  @if (effectiveType() === 'dropdown-buttons') {\n    <div class=\"inline-flex items-center gap-3 select-none flex-wrap\">\n      <!-- Dropdown button -->\n      <div class=\"relative inline-flex items-center\">\n        <!--\n          `[ngModel]` ch\u1EE9 KH\u00D4NG ph\u1EA3i `[value]`: `[value]` tr\u00EAn <select> \u0111\u1EB7t\n          thu\u1ED9c t\u00EDnh DOM NGAY, l\u00FAc c\u00E1c <option> c\u1EE7a @for ch\u01B0a t\u1ED3n t\u1EA1i, n\u00EAn tr\u00ECnh\n          duy\u1EC7t ho\u00E0n nguy\u00EAn v\u1EC1 option \u0111\u1EA7u. \u0110o 2026-09-17: trang hi\u1EC7n t\u1EA1i l\u00E0 3 m\u00E0\n          \u00F4 ch\u1ECDn v\u1EABn hi\u1EC7n \"01\". Build xanh, kh\u00F4ng c\u1EA3nh b\u00E1o n\u00E0o.\n        -->\n        <select\n          [ngModel]=\"effectivePageIndex()\"\n          (ngModelChange)=\"goToPage(+$event)\"\n          aria-label=\"Ch\u1ECDn trang\"\n          class=\"appearance-none h-9 px-3.5 py-0 bg-neutral-tertiary border border-default rounded-md text-sm font-medium text-body pr-8 shadow-xs cursor-pointer focus:outline-hidden focus:ring-1 focus:ring-brand-subtle whitespace-nowrap\"\n        >\n          @for (p of pageList(); track p) {\n            <option [value]=\"p\">{{ p < 10 ? '0' + p : p }}</option>\n          }\n        </select>\n        <ol-icon\n          name=\"alt-arrow-down\"\n          size=\"xs\"\n          class=\"pointer-events-none absolute right-2.5 text-body\"\n        />\n      </div>\n\n      <!-- Helper info -->\n      <span\n        class=\"inline-flex items-center h-9 px-3.5 bg-neutral-tertiary/60 rounded-md text-sm font-medium text-fg-disabled select-none whitespace-nowrap\"\n      >\n        c\u1EE7a {{ calculatedTotalPages() }} trang\n      </span>\n\n      <!-- Buttons -->\n      <div class=\"inline-flex -space-x-px rounded-md shadow-xs isolate shrink-0\">\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"effectivePageIndex() <= 1\"\n          class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-l-md border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer shrink-0\"\n          aria-label=\"Trang tr\u01B0\u1EDBc\"\n        >\n          <ol-icon name=\"alt-arrow-left\" size=\"xs\"></ol-icon>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n          class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-r-md border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer shrink-0\"\n          aria-label=\"Trang sau\"\n        >\n          <ol-icon name=\"alt-arrow-right\" size=\"xs\"></ol-icon>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- 4. Type = Text buttons (Figma #1149:81874) -->\n  @if (effectiveType() === 'text-buttons') {\n    <nav\n      class=\"inline-flex -space-x-px rounded-md shadow-xs isolate select-none max-w-full overflow-x-auto\"\n      aria-label=\"Ph\u00E2n trang\"\n    >\n      <!-- Trang tr\u01B0\u1EDBc -->\n      <button\n        type=\"button\"\n        (click)=\"prev()\"\n        [disabled]=\"effectivePageIndex() <= 1\"\n        class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-l-md text-sm font-medium border border-default disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft whitespace-nowrap shrink-0\"\n      >\n        Trang tr\u01B0\u1EDBc\n      </button>\n\n      <!-- Pages -->\n      @for (page of visiblePages(); track trackPage($index, page)) {\n        @if (page === 'ellipsis') {\n          <span\n            class=\"relative inline-flex items-center justify-center px-3 h-9 text-sm text-fg-disabled bg-neutral-primary border border-default select-none whitespace-nowrap shrink-0\"\n            aria-hidden=\"true\"\n          >\n            ...\n          </span>\n        } @else {\n          <button\n            type=\"button\"\n            (click)=\"goToPage(page)\"\n            [attr.aria-current]=\"page === effectivePageIndex() ? 'page' : null\"\n            [attr.aria-label]=\"'Trang ' + page\"\n            [class]=\"\n              'relative inline-flex items-center justify-center min-w-9 h-9 px-3 text-sm transition-colors cursor-pointer whitespace-nowrap shrink-0 ' +\n              (page === effectivePageIndex()\n                ? 'z-10 font-semibold border border-brand bg-brand text-white'\n                : 'font-medium border border-default bg-neutral-primary-soft text-body hover:bg-neutral-secondary-soft')\n            \"\n          >\n            {{ page }}\n          </button>\n        }\n      }\n\n      <!-- Trang sau -->\n      <button\n        type=\"button\"\n        (click)=\"next()\"\n        [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n        class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-r-md text-sm font-medium border border-default disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft whitespace-nowrap shrink-0\"\n      >\n        Trang sau\n      </button>\n    </nav>\n  }\n\n  <!-- 5. Type = Two buttons (Figma #1149:81887) -->\n  @if (effectiveType() === 'two-buttons') {\n    <div class=\"inline-flex items-center gap-3 select-none flex-wrap\">\n      <button\n        type=\"button\"\n        (click)=\"prev()\"\n        [disabled]=\"effectivePageIndex() <= 1\"\n        class=\"inline-flex items-center gap-1.5 px-3.5 py-2 bg-neutral-primary rounded-md border border-default text-sm font-medium text-body shadow-2xs hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap\"\n      >\n        <ol-icon name=\"arrow-left\" size=\"xs\" />\n        <span>Trang tr\u01B0\u1EDBc</span>\n      </button>\n\n      <button\n        type=\"button\"\n        (click)=\"next()\"\n        [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n        class=\"inline-flex items-center gap-1.5 px-3.5 py-2 bg-neutral-primary rounded-md border border-default text-sm font-medium text-body shadow-2xs hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap\"\n      >\n        <span>Trang sau</span>\n        <ol-icon name=\"arrow-right\" size=\"xs\" />\n      </button>\n    </div>\n  }\n\n  <!-- 6. Type = Buttons & helper text (Figma #1149:80890) -->\n  @if (effectiveType() === 'buttons-helper') {\n    <div class=\"flex flex-col items-center gap-3 select-none\">\n      @if (showText()) {\n        <p class=\"text-sm font-medium text-body text-center whitespace-nowrap\">\n          Hi\u1EC3n th\u1ECB t\u1EEB <strong class=\"text-heading font-semibold\">{{ startRecord() }}</strong> \u0111\u1EBFn\n          <strong class=\"text-heading font-semibold\">{{ endRecord() }}</strong> trong\n          <strong class=\"text-heading font-semibold\">{{ total() }}</strong> d\u1EEF li\u1EC7u\n        </p>\n      }\n      <div class=\"inline-flex -space-x-px rounded-md shadow-xs isolate shrink-0\">\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"effectivePageIndex() <= 1\"\n          class=\"relative inline-flex items-center justify-center px-4 h-9 rounded-l-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap\"\n        >\n          Tr\u01B0\u1EDBc\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n          class=\"relative inline-flex items-center justify-center px-4 h-9 rounded-r-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap\"\n        >\n          Sau\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- 7. Type = With dropdown (Figma #1149:81895) -->\n  @if (effectiveType() === 'with-dropdown') {\n    <div class=\"inline-flex items-center gap-4 select-none flex-wrap\">\n      <nav\n        class=\"inline-flex -space-x-px rounded-md shadow-xs isolate max-w-full overflow-x-auto\"\n        aria-label=\"Ph\u00E2n trang\"\n      >\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"effectivePageIndex() <= 1\"\n          class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-l-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap shrink-0\"\n        >\n          Trang tr\u01B0\u1EDBc\n        </button>\n\n        @for (page of visiblePages(); track trackPage($index, page)) {\n          @if (page === 'ellipsis') {\n            <span\n              class=\"relative inline-flex items-center justify-center px-3 h-9 text-sm text-fg-disabled bg-neutral-primary border border-default select-none whitespace-nowrap shrink-0\"\n              aria-hidden=\"true\"\n            >\n              ...\n            </span>\n          } @else {\n            <button\n              type=\"button\"\n              (click)=\"goToPage(page)\"\n              [attr.aria-current]=\"page === effectivePageIndex() ? 'page' : null\"\n              [attr.aria-label]=\"'Trang ' + page\"\n              [attr.aria-label]=\"'Trang ' + page\"\n              [class]=\"\n                'relative inline-flex items-center justify-center min-w-9 h-9 px-3 text-sm transition-colors cursor-pointer whitespace-nowrap shrink-0 ' +\n                (page === effectivePageIndex()\n                  ? 'z-10 font-semibold border border-brand bg-brand text-white'\n                  : 'font-medium border border-default bg-neutral-primary-soft text-body hover:bg-neutral-secondary-soft')\n              \"\n            >\n              {{ page }}\n            </button>\n          }\n        }\n\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n          class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-r-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap shrink-0\"\n        >\n          Trang sau\n        </button>\n      </nav>\n\n      <!-- Dropdown select size -->\n      <div class=\"relative inline-flex items-center shrink-0\">\n        <!-- `[ngModel]` \u2014 xem l\u00FD do \u1EDF \u00F4 ch\u1ECDn trang c\u1EE7a Type `Dropdown & buttons`. -->\n        <select\n          [ngModel]=\"pageSize()\"\n          (ngModelChange)=\"onPageSizeChange(+$event)\"\n          aria-label=\"S\u1ED1 d\u00F2ng m\u1ED7i trang\"\n          class=\"appearance-none h-9 px-3.5 py-0 bg-neutral-tertiary border border-default rounded-md text-sm font-medium text-body pr-8 shadow-xs cursor-pointer focus:outline-hidden focus:ring-1 focus:ring-brand-subtle whitespace-nowrap\"\n        >\n          @for (opt of pageSizeOptions(); track opt) {\n            <option [value]=\"opt\">{{ opt }} m\u1ED7i trang</option>\n          }\n        </select>\n        <ol-icon\n          name=\"alt-arrow-down\"\n          size=\"xs\"\n          class=\"pointer-events-none absolute right-2.5 text-body\"\n        />\n      </div>\n    </div>\n  }\n\n  <!-- 8. Type = With input (Figma #1149:81910) -->\n  @if (effectiveType() === 'with-input') {\n    <div class=\"inline-flex items-center gap-4 select-none flex-wrap\">\n      <nav\n        class=\"inline-flex -space-x-px rounded-md shadow-xs isolate max-w-full overflow-x-auto\"\n        aria-label=\"Ph\u00E2n trang\"\n      >\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"effectivePageIndex() <= 1\"\n          class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-l-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap shrink-0\"\n        >\n          Trang tr\u01B0\u1EDBc\n        </button>\n\n        @for (page of visiblePages(); track trackPage($index, page)) {\n          @if (page === 'ellipsis') {\n            <span\n              class=\"relative inline-flex items-center justify-center px-3 h-9 text-sm text-fg-disabled bg-neutral-primary border border-default select-none whitespace-nowrap shrink-0\"\n              aria-hidden=\"true\"\n            >\n              ...\n            </span>\n          } @else {\n            <button\n              type=\"button\"\n              (click)=\"goToPage(page)\"\n              [attr.aria-current]=\"page === effectivePageIndex() ? 'page' : null\"\n              [attr.aria-label]=\"'Trang ' + page\"\n              [attr.aria-label]=\"'Trang ' + page\"\n              [class]=\"\n                'relative inline-flex items-center justify-center min-w-9 h-9 px-3 text-sm transition-colors cursor-pointer whitespace-nowrap shrink-0 ' +\n                (page === effectivePageIndex()\n                  ? 'z-10 font-semibold border border-brand bg-brand text-white'\n                  : 'font-medium border border-default bg-neutral-primary-soft text-body hover:bg-neutral-secondary-soft')\n              \"\n            >\n              {{ page }}\n            </button>\n          }\n        }\n\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n          class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-r-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap shrink-0\"\n        >\n          Trang sau\n        </button>\n      </nav>\n\n      <!-- Input Jump -->\n      <div class=\"flex items-center gap-2 text-sm text-body whitespace-nowrap shrink-0\">\n        <span>\u0110i t\u1EDBi</span>\n        <input\n          type=\"number\"\n          min=\"1\"\n          [max]=\"calculatedTotalPages()\"\n          [ngModel]=\"jumpPageValue()\"\n          (ngModelChange)=\"jumpPageValue.set($event)\"\n          (keydown.enter)=\"handleJump()\"\n          placeholder=\"199\"\n          class=\"w-16 px-2.5 py-1.5 text-center text-sm bg-neutral-tertiary border border-default rounded-md focus:outline-hidden focus:ring-1 focus:ring-brand-subtle text-heading shadow-xs\"\n        />\n        <span>trang</span>\n      </div>\n    </div>\n  }\n\n  <!-- 9. Type = Simple with input (Figma #1149:81928) -->\n  @if (effectiveType() === 'simple-input') {\n    <div class=\"inline-flex items-center gap-3 select-none flex-wrap\">\n      <span class=\"text-sm font-medium text-body whitespace-nowrap\">\u0110i t\u1EDBi trang</span>\n      <input\n        type=\"number\"\n        min=\"1\"\n        [max]=\"calculatedTotalPages()\"\n        [ngModel]=\"jumpPageValue()\"\n        (ngModelChange)=\"jumpPageValue.set($event)\"\n        (keydown.enter)=\"handleJump()\"\n        placeholder=\"20\"\n        class=\"w-16 px-2.5 py-1.5 text-center text-sm bg-neutral-tertiary border border-default rounded-md focus:outline-hidden focus:ring-1 focus:ring-brand-subtle text-heading shadow-xs\"\n      />\n      <button\n        type=\"button\"\n        (click)=\"handleJump()\"\n        class=\"px-4 py-1.5 bg-brand hover:bg-brand-strong text-white text-sm font-medium rounded-md shadow-xs cursor-pointer transition-colors whitespace-nowrap\"\n      >\n        \u0110i\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlPagination, isStandalone: true, selector: "ol-pagination", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalPagesInput: { classPropertyName: "totalPagesInput", publicName: "totalPages", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showText: { classPropertyName: "showText", publicName: "showText", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, withDropdown: { classPropertyName: "withDropdown", publicName: "withDropdown", isSignal: true, isRequired: false, transformFunction: null }, showSizeChanger: { classPropertyName: "showSizeChanger", publicName: "showSizeChanger", isSignal: true, isRequired: false, transformFunction: null }, showQuickJumper: { classPropertyName: "showQuickJumper", publicName: "showQuickJumper", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", pageIndex: "pageIndexChange", currentPage: "currentPageChange", pageChange: "pageChange" }, host: { classAttribute: "block w-full" }, ngImport: i0, template: "<div class=\"flex items-center gap-4 flex-wrap max-w-full\">\n  <!-- 1. Type = Default (Figma #1149:81851) -->\n  @if (layoutType() === 'default') {\n    <nav\n      class=\"inline-flex -space-x-px rounded-md shadow-xs isolate select-none\"\n      aria-label=\"Ph\u00E2n trang\"\n    >\n      <!-- Prev Button -->\n      <button\n        type=\"button\"\n        (click)=\"prev()\"\n        [disabled]=\"effectivePageIndex() <= 1\"\n        class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-l-md border border-default transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft shrink-0\"\n        aria-label=\"Trang tr\u01B0\u1EDBc\"\n      >\n        <ol-icon name=\"alt-arrow-left\" size=\"xs\"></ol-icon>\n      </button>\n\n      <!-- Pages Array -->\n      @for (page of visiblePages(); track trackPage($index, page)) {\n        @if (page === 'ellipsis') {\n          <span\n            class=\"relative inline-flex items-center justify-center px-3 h-9 text-sm text-fg-disabled bg-neutral-primary border border-default select-none whitespace-nowrap shrink-0\"\n            aria-hidden=\"true\"\n          >\n            ...\n          </span>\n        } @else {\n          <button\n            type=\"button\"\n            (click)=\"goToPage(page)\"\n            [attr.aria-current]=\"page === effectivePageIndex() ? 'page' : null\"\n            [attr.aria-label]=\"'Trang ' + page\"\n            [class]=\"\n              'relative inline-flex items-center justify-center min-w-9 h-9 px-3 text-sm transition-colors cursor-pointer whitespace-nowrap shrink-0 ' +\n              (page === effectivePageIndex()\n                ? 'z-10 font-semibold border border-brand bg-brand text-white'\n                : 'font-medium border border-default bg-neutral-primary-soft text-body hover:bg-neutral-secondary-soft')\n            \"\n          >\n            {{ page }}\n          </button>\n        }\n      }\n\n      <!-- Next Button -->\n      <button\n        type=\"button\"\n        (click)=\"next()\"\n        [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n        class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-r-md border border-default transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft shrink-0\"\n        aria-label=\"Trang sau\"\n      >\n        <ol-icon name=\"alt-arrow-right\" size=\"xs\"></ol-icon>\n      </button>\n    </nav>\n  }\n\n  <!-- 2. Type = Arrows (Figma #1149:81864) -->\n  @if (layoutType() === 'arrows') {\n    <nav\n      class=\"inline-flex -space-x-px rounded-md shadow-xs isolate select-none\"\n      aria-label=\"Ph\u00E2n trang\"\n    >\n      <button\n        type=\"button\"\n        (click)=\"prev()\"\n        [disabled]=\"effectivePageIndex() <= 1\"\n        class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-l-md border border-default transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft shrink-0\"\n        aria-label=\"Trang tr\u01B0\u1EDBc\"\n      >\n        <ol-icon name=\"alt-arrow-left\" size=\"xs\"></ol-icon>\n      </button>\n\n      <span\n        class=\"relative inline-flex items-center justify-center px-4 h-9 text-sm font-medium text-body bg-neutral-primary border border-default select-none whitespace-nowrap shrink-0\"\n      >\n        {{ effectivePageIndex() }} tr\u00EAn {{ calculatedTotalPages() }}\n      </span>\n\n      <button\n        type=\"button\"\n        (click)=\"next()\"\n        [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n        class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-r-md border border-default transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft shrink-0\"\n        aria-label=\"Trang sau\"\n      >\n        <ol-icon name=\"alt-arrow-right\" size=\"xs\"></ol-icon>\n      </button>\n    </nav>\n  }\n\n  <!-- 3. Type = Dropdown & buttons (Figma #1149:81868) -->\n  @if (layoutType() === 'dropdown-buttons') {\n    <div class=\"inline-flex items-center gap-3 select-none flex-wrap\">\n      <!-- Dropdown button -->\n      <div class=\"relative inline-flex items-center\">\n        <!--\n          `[ngModel]` ch\u1EE9 KH\u00D4NG ph\u1EA3i `[value]`: `[value]` tr\u00EAn <select> \u0111\u1EB7t\n          thu\u1ED9c t\u00EDnh DOM NGAY, l\u00FAc c\u00E1c <option> c\u1EE7a @for ch\u01B0a t\u1ED3n t\u1EA1i, n\u00EAn tr\u00ECnh\n          duy\u1EC7t ho\u00E0n nguy\u00EAn v\u1EC1 option \u0111\u1EA7u. \u0110o 2026-09-17: trang hi\u1EC7n t\u1EA1i l\u00E0 3 m\u00E0\n          \u00F4 ch\u1ECDn v\u1EABn hi\u1EC7n \"01\". Build xanh, kh\u00F4ng c\u1EA3nh b\u00E1o n\u00E0o.\n        -->\n        <select\n          [ngModel]=\"effectivePageIndex()\"\n          (ngModelChange)=\"goToPage(+$event)\"\n          aria-label=\"Ch\u1ECDn trang\"\n          class=\"appearance-none h-9 px-3.5 py-0 bg-neutral-tertiary border border-default rounded-md text-sm font-medium text-body pr-8 shadow-xs cursor-pointer focus:outline-hidden focus:ring-1 focus:ring-brand-subtle whitespace-nowrap\"\n        >\n          @for (p of pageList(); track p) {\n            <option [value]=\"p\">{{ p < 10 ? '0' + p : p }}</option>\n          }\n        </select>\n        <ol-icon\n          name=\"alt-arrow-down\"\n          size=\"xs\"\n          class=\"pointer-events-none absolute right-2.5 text-body\"\n        />\n      </div>\n\n      <!-- Helper info -->\n      <span\n        class=\"inline-flex items-center h-9 px-3.5 bg-neutral-tertiary/60 rounded-md text-sm font-medium text-fg-disabled select-none whitespace-nowrap\"\n      >\n        c\u1EE7a {{ calculatedTotalPages() }} trang\n      </span>\n\n      <!-- Buttons -->\n      <div class=\"inline-flex -space-x-px rounded-md shadow-xs isolate shrink-0\">\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"effectivePageIndex() <= 1\"\n          class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-l-md border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer shrink-0\"\n          aria-label=\"Trang tr\u01B0\u1EDBc\"\n        >\n          <ol-icon name=\"alt-arrow-left\" size=\"xs\"></ol-icon>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n          class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-r-md border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer shrink-0\"\n          aria-label=\"Trang sau\"\n        >\n          <ol-icon name=\"alt-arrow-right\" size=\"xs\"></ol-icon>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- 4. Type = Text buttons (Figma #1149:81874) -->\n  @if (layoutType() === 'text-buttons') {\n    <nav\n      class=\"inline-flex -space-x-px rounded-md shadow-xs isolate select-none max-w-full overflow-x-auto\"\n      aria-label=\"Ph\u00E2n trang\"\n    >\n      <!-- Trang tr\u01B0\u1EDBc -->\n      <button\n        type=\"button\"\n        (click)=\"prev()\"\n        [disabled]=\"effectivePageIndex() <= 1\"\n        class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-l-md text-sm font-medium border border-default disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft whitespace-nowrap shrink-0\"\n      >\n        Trang tr\u01B0\u1EDBc\n      </button>\n\n      <!-- Pages -->\n      @for (page of visiblePages(); track trackPage($index, page)) {\n        @if (page === 'ellipsis') {\n          <span\n            class=\"relative inline-flex items-center justify-center px-3 h-9 text-sm text-fg-disabled bg-neutral-primary border border-default select-none whitespace-nowrap shrink-0\"\n            aria-hidden=\"true\"\n          >\n            ...\n          </span>\n        } @else {\n          <button\n            type=\"button\"\n            (click)=\"goToPage(page)\"\n            [attr.aria-current]=\"page === effectivePageIndex() ? 'page' : null\"\n            [attr.aria-label]=\"'Trang ' + page\"\n            [class]=\"\n              'relative inline-flex items-center justify-center min-w-9 h-9 px-3 text-sm transition-colors cursor-pointer whitespace-nowrap shrink-0 ' +\n              (page === effectivePageIndex()\n                ? 'z-10 font-semibold border border-brand bg-brand text-white'\n                : 'font-medium border border-default bg-neutral-primary-soft text-body hover:bg-neutral-secondary-soft')\n            \"\n          >\n            {{ page }}\n          </button>\n        }\n      }\n\n      <!-- Trang sau -->\n      <button\n        type=\"button\"\n        (click)=\"next()\"\n        [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n        class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-r-md text-sm font-medium border border-default disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft whitespace-nowrap shrink-0\"\n      >\n        Trang sau\n      </button>\n    </nav>\n  }\n\n  <!-- 5. Type = Two buttons (Figma #1149:81887) -->\n  @if (layoutType() === 'two-buttons') {\n    <div class=\"inline-flex items-center gap-3 select-none flex-wrap\">\n      <button\n        type=\"button\"\n        (click)=\"prev()\"\n        [disabled]=\"effectivePageIndex() <= 1\"\n        class=\"inline-flex items-center gap-1.5 px-3.5 py-2 bg-neutral-primary rounded-md border border-default text-sm font-medium text-body shadow-2xs hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap\"\n      >\n        <ol-icon name=\"arrow-left\" size=\"xs\" />\n        <span>Trang tr\u01B0\u1EDBc</span>\n      </button>\n\n      <button\n        type=\"button\"\n        (click)=\"next()\"\n        [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n        class=\"inline-flex items-center gap-1.5 px-3.5 py-2 bg-neutral-primary rounded-md border border-default text-sm font-medium text-body shadow-2xs hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap\"\n      >\n        <span>Trang sau</span>\n        <ol-icon name=\"arrow-right\" size=\"xs\" />\n      </button>\n    </div>\n  }\n\n  <!-- 6. Type = Buttons & helper text (Figma #1149:80890) -->\n  @if (layoutType() === 'buttons-helper') {\n    <div class=\"flex flex-col items-center gap-3 select-none\">\n      @if (showText()) {\n        <p class=\"text-sm font-medium text-body text-center whitespace-nowrap\">\n          Hi\u1EC3n th\u1ECB t\u1EEB <strong class=\"text-heading font-semibold\">{{ startRecord() }}</strong> \u0111\u1EBFn\n          <strong class=\"text-heading font-semibold\">{{ endRecord() }}</strong> trong\n          <strong class=\"text-heading font-semibold\">{{ total() }}</strong> d\u1EEF li\u1EC7u\n        </p>\n      }\n      <div class=\"inline-flex -space-x-px rounded-md shadow-xs isolate shrink-0\">\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"effectivePageIndex() <= 1\"\n          class=\"relative inline-flex items-center justify-center px-4 h-9 rounded-l-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap\"\n        >\n          Tr\u01B0\u1EDBc\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n          class=\"relative inline-flex items-center justify-center px-4 h-9 rounded-r-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap\"\n        >\n          Sau\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- 8. Type = With input (Figma #1149:81910) -->\n  @if (layoutType() === 'with-input') {\n    <div class=\"inline-flex items-center gap-4 select-none flex-wrap\">\n      <nav\n        class=\"inline-flex -space-x-px rounded-md shadow-xs isolate max-w-full overflow-x-auto\"\n        aria-label=\"Ph\u00E2n trang\"\n      >\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"effectivePageIndex() <= 1\"\n          class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-l-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap shrink-0\"\n        >\n          Trang tr\u01B0\u1EDBc\n        </button>\n\n        @for (page of visiblePages(); track trackPage($index, page)) {\n          @if (page === 'ellipsis') {\n            <span\n              class=\"relative inline-flex items-center justify-center px-3 h-9 text-sm text-fg-disabled bg-neutral-primary border border-default select-none whitespace-nowrap shrink-0\"\n              aria-hidden=\"true\"\n            >\n              ...\n            </span>\n          } @else {\n            <button\n              type=\"button\"\n              (click)=\"goToPage(page)\"\n              [attr.aria-current]=\"page === effectivePageIndex() ? 'page' : null\"\n              [attr.aria-label]=\"'Trang ' + page\"\n              [class]=\"\n                'relative inline-flex items-center justify-center min-w-9 h-9 px-3 text-sm transition-colors cursor-pointer whitespace-nowrap shrink-0 ' +\n                (page === effectivePageIndex()\n                  ? 'z-10 font-semibold border border-brand bg-brand text-white'\n                  : 'font-medium border border-default bg-neutral-primary-soft text-body hover:bg-neutral-secondary-soft')\n              \"\n            >\n              {{ page }}\n            </button>\n          }\n        }\n\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n          class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-r-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap shrink-0\"\n        >\n          Trang sau\n        </button>\n      </nav>\n\n      <!-- Input Jump -->\n      <div class=\"flex items-center gap-2 text-sm text-body whitespace-nowrap shrink-0\">\n        <span>\u0110i t\u1EDBi</span>\n        <input\n          type=\"number\"\n          min=\"1\"\n          [max]=\"calculatedTotalPages()\"\n          [ngModel]=\"jumpPageValue()\"\n          (ngModelChange)=\"jumpPageValue.set($event)\"\n          (keydown.enter)=\"handleJump()\"\n          placeholder=\"199\"\n          class=\"w-16 px-2.5 py-1.5 text-center text-sm bg-neutral-tertiary border border-default rounded-md focus:outline-hidden focus:ring-1 focus:ring-brand-subtle text-heading shadow-xs\"\n        />\n        <span>trang</span>\n      </div>\n    </div>\n  }\n\n  <!-- 9. Type = Simple with input (Figma #1149:81928) -->\n  @if (layoutType() === 'simple-input') {\n    <div class=\"inline-flex items-center gap-3 select-none flex-wrap\">\n      <span class=\"text-sm font-medium text-body whitespace-nowrap\">\u0110i t\u1EDBi trang</span>\n      <input\n        type=\"number\"\n        min=\"1\"\n        [max]=\"calculatedTotalPages()\"\n        [ngModel]=\"jumpPageValue()\"\n        (ngModelChange)=\"jumpPageValue.set($event)\"\n        (keydown.enter)=\"handleJump()\"\n        placeholder=\"20\"\n        class=\"w-16 px-2.5 py-1.5 text-center text-sm bg-neutral-tertiary border border-default rounded-md focus:outline-hidden focus:ring-1 focus:ring-brand-subtle text-heading shadow-xs\"\n      />\n      <button\n        type=\"button\"\n        (click)=\"handleJump()\"\n        class=\"px-4 py-1.5 bg-brand hover:bg-brand-strong text-white text-sm font-medium rounded-md shadow-xs cursor-pointer transition-colors whitespace-nowrap\"\n      >\n        \u0110i\n      </button>\n    </div>\n  }\n  @if (hasPageSizeDropdown()) {\n    <!--\n      \u00D4 ch\u1ECDn c\u1EE1 trang \u2014 C\u1EDC RI\u00CANG `withDropdown`, g\u1EAFn \u0111\u01B0\u1EE3c v\u00E0o m\u1ECDi type (Figma\n      `With dropdown` #1149:81895 l\u00E0 n\u01A1i n\u00F3 xu\u1EA5t hi\u1EC7n \u0111\u1EA7u ti\u00EAn). Vi\u1EBFt M\u1ED8T ch\u1ED7 \u1EDF\n      \u0111\u00E2y thay v\u00EC ch\u00E9p v\u00E0o t\u1EEBng type.\n    -->\n    <div class=\"relative inline-flex items-center shrink-0\">\n      <!-- `[ngModel]` \u2014 xem l\u00FD do \u1EDF \u00F4 ch\u1ECDn trang c\u1EE7a Type `Dropdown & buttons`. -->\n      <select\n        [ngModel]=\"pageSize()\"\n        (ngModelChange)=\"onPageSizeChange(+$event)\"\n        aria-label=\"S\u1ED1 d\u00F2ng m\u1ED7i trang\"\n        class=\"appearance-none h-9 px-3.5 py-0 bg-neutral-tertiary border border-default rounded-md text-sm font-medium text-body pr-8 shadow-xs cursor-pointer focus:outline-hidden focus:ring-1 focus:ring-brand-subtle whitespace-nowrap\"\n      >\n        @for (opt of pageSizeOptions(); track opt) {\n          <option [value]=\"opt\">{{ opt }} m\u1ED7i trang</option>\n        }\n      </select>\n      <ol-icon\n        name=\"alt-arrow-down\"\n        size=\"xs\"\n        class=\"pointer-events-none absolute right-2.5 text-body\"\n      />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlPagination, decorators: [{
             type: Component,
             args: [{ selector: 'ol-pagination', standalone: true, imports: [CommonModule, FormsModule, OlIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'block w-full',
-                    }, template: "<div class=\"flex items-center gap-4 flex-wrap max-w-full\">\n  <!-- 1. Type = Default (Figma #1149:81851) -->\n  @if (effectiveType() === 'default') {\n    <nav\n      class=\"inline-flex -space-x-px rounded-md shadow-xs isolate select-none\"\n      aria-label=\"Ph\u00E2n trang\"\n    >\n      <!-- Prev Button -->\n      <button\n        type=\"button\"\n        (click)=\"prev()\"\n        [disabled]=\"effectivePageIndex() <= 1\"\n        class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-l-md border border-default transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft shrink-0\"\n        aria-label=\"Trang tr\u01B0\u1EDBc\"\n      >\n        <ol-icon name=\"alt-arrow-left\" size=\"xs\"></ol-icon>\n      </button>\n\n      <!-- Pages Array -->\n      @for (page of visiblePages(); track trackPage($index, page)) {\n        @if (page === 'ellipsis') {\n          <span\n            class=\"relative inline-flex items-center justify-center px-3 h-9 text-sm text-fg-disabled bg-neutral-primary border border-default select-none whitespace-nowrap shrink-0\"\n            aria-hidden=\"true\"\n          >\n            ...\n          </span>\n        } @else {\n          <button\n            type=\"button\"\n            (click)=\"goToPage(page)\"\n            [attr.aria-current]=\"page === effectivePageIndex() ? 'page' : null\"\n            [attr.aria-label]=\"'Trang ' + page\"\n            [class]=\"\n              'relative inline-flex items-center justify-center min-w-9 h-9 px-3 text-sm transition-colors cursor-pointer whitespace-nowrap shrink-0 ' +\n              (page === effectivePageIndex()\n                ? 'z-10 font-semibold border border-brand bg-brand text-white'\n                : 'font-medium border border-default bg-neutral-primary-soft text-body hover:bg-neutral-secondary-soft')\n            \"\n          >\n            {{ page }}\n          </button>\n        }\n      }\n\n      <!-- Next Button -->\n      <button\n        type=\"button\"\n        (click)=\"next()\"\n        [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n        class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-r-md border border-default transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft shrink-0\"\n        aria-label=\"Trang sau\"\n      >\n        <ol-icon name=\"alt-arrow-right\" size=\"xs\"></ol-icon>\n      </button>\n    </nav>\n  }\n\n  <!-- 2. Type = Arrows (Figma #1149:81864) -->\n  @if (effectiveType() === 'arrows') {\n    <nav\n      class=\"inline-flex -space-x-px rounded-md shadow-xs isolate select-none\"\n      aria-label=\"Ph\u00E2n trang\"\n    >\n      <button\n        type=\"button\"\n        (click)=\"prev()\"\n        [disabled]=\"effectivePageIndex() <= 1\"\n        class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-l-md border border-default transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft shrink-0\"\n        aria-label=\"Trang tr\u01B0\u1EDBc\"\n      >\n        <ol-icon name=\"alt-arrow-left\" size=\"xs\"></ol-icon>\n      </button>\n\n      <span\n        class=\"relative inline-flex items-center justify-center px-4 h-9 text-sm font-medium text-body bg-neutral-primary border border-default select-none whitespace-nowrap shrink-0\"\n      >\n        {{ effectivePageIndex() }} tr\u00EAn {{ calculatedTotalPages() }}\n      </span>\n\n      <button\n        type=\"button\"\n        (click)=\"next()\"\n        [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n        class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-r-md border border-default transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft shrink-0\"\n        aria-label=\"Trang sau\"\n      >\n        <ol-icon name=\"alt-arrow-right\" size=\"xs\"></ol-icon>\n      </button>\n    </nav>\n  }\n\n  <!-- 3. Type = Dropdown & buttons (Figma #1149:81868) -->\n  @if (effectiveType() === 'dropdown-buttons') {\n    <div class=\"inline-flex items-center gap-3 select-none flex-wrap\">\n      <!-- Dropdown button -->\n      <div class=\"relative inline-flex items-center\">\n        <!--\n          `[ngModel]` ch\u1EE9 KH\u00D4NG ph\u1EA3i `[value]`: `[value]` tr\u00EAn <select> \u0111\u1EB7t\n          thu\u1ED9c t\u00EDnh DOM NGAY, l\u00FAc c\u00E1c <option> c\u1EE7a @for ch\u01B0a t\u1ED3n t\u1EA1i, n\u00EAn tr\u00ECnh\n          duy\u1EC7t ho\u00E0n nguy\u00EAn v\u1EC1 option \u0111\u1EA7u. \u0110o 2026-09-17: trang hi\u1EC7n t\u1EA1i l\u00E0 3 m\u00E0\n          \u00F4 ch\u1ECDn v\u1EABn hi\u1EC7n \"01\". Build xanh, kh\u00F4ng c\u1EA3nh b\u00E1o n\u00E0o.\n        -->\n        <select\n          [ngModel]=\"effectivePageIndex()\"\n          (ngModelChange)=\"goToPage(+$event)\"\n          aria-label=\"Ch\u1ECDn trang\"\n          class=\"appearance-none h-9 px-3.5 py-0 bg-neutral-tertiary border border-default rounded-md text-sm font-medium text-body pr-8 shadow-xs cursor-pointer focus:outline-hidden focus:ring-1 focus:ring-brand-subtle whitespace-nowrap\"\n        >\n          @for (p of pageList(); track p) {\n            <option [value]=\"p\">{{ p < 10 ? '0' + p : p }}</option>\n          }\n        </select>\n        <ol-icon\n          name=\"alt-arrow-down\"\n          size=\"xs\"\n          class=\"pointer-events-none absolute right-2.5 text-body\"\n        />\n      </div>\n\n      <!-- Helper info -->\n      <span\n        class=\"inline-flex items-center h-9 px-3.5 bg-neutral-tertiary/60 rounded-md text-sm font-medium text-fg-disabled select-none whitespace-nowrap\"\n      >\n        c\u1EE7a {{ calculatedTotalPages() }} trang\n      </span>\n\n      <!-- Buttons -->\n      <div class=\"inline-flex -space-x-px rounded-md shadow-xs isolate shrink-0\">\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"effectivePageIndex() <= 1\"\n          class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-l-md border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer shrink-0\"\n          aria-label=\"Trang tr\u01B0\u1EDBc\"\n        >\n          <ol-icon name=\"alt-arrow-left\" size=\"xs\"></ol-icon>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n          class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-r-md border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer shrink-0\"\n          aria-label=\"Trang sau\"\n        >\n          <ol-icon name=\"alt-arrow-right\" size=\"xs\"></ol-icon>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- 4. Type = Text buttons (Figma #1149:81874) -->\n  @if (effectiveType() === 'text-buttons') {\n    <nav\n      class=\"inline-flex -space-x-px rounded-md shadow-xs isolate select-none max-w-full overflow-x-auto\"\n      aria-label=\"Ph\u00E2n trang\"\n    >\n      <!-- Trang tr\u01B0\u1EDBc -->\n      <button\n        type=\"button\"\n        (click)=\"prev()\"\n        [disabled]=\"effectivePageIndex() <= 1\"\n        class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-l-md text-sm font-medium border border-default disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft whitespace-nowrap shrink-0\"\n      >\n        Trang tr\u01B0\u1EDBc\n      </button>\n\n      <!-- Pages -->\n      @for (page of visiblePages(); track trackPage($index, page)) {\n        @if (page === 'ellipsis') {\n          <span\n            class=\"relative inline-flex items-center justify-center px-3 h-9 text-sm text-fg-disabled bg-neutral-primary border border-default select-none whitespace-nowrap shrink-0\"\n            aria-hidden=\"true\"\n          >\n            ...\n          </span>\n        } @else {\n          <button\n            type=\"button\"\n            (click)=\"goToPage(page)\"\n            [attr.aria-current]=\"page === effectivePageIndex() ? 'page' : null\"\n            [attr.aria-label]=\"'Trang ' + page\"\n            [class]=\"\n              'relative inline-flex items-center justify-center min-w-9 h-9 px-3 text-sm transition-colors cursor-pointer whitespace-nowrap shrink-0 ' +\n              (page === effectivePageIndex()\n                ? 'z-10 font-semibold border border-brand bg-brand text-white'\n                : 'font-medium border border-default bg-neutral-primary-soft text-body hover:bg-neutral-secondary-soft')\n            \"\n          >\n            {{ page }}\n          </button>\n        }\n      }\n\n      <!-- Trang sau -->\n      <button\n        type=\"button\"\n        (click)=\"next()\"\n        [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n        class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-r-md text-sm font-medium border border-default disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft whitespace-nowrap shrink-0\"\n      >\n        Trang sau\n      </button>\n    </nav>\n  }\n\n  <!-- 5. Type = Two buttons (Figma #1149:81887) -->\n  @if (effectiveType() === 'two-buttons') {\n    <div class=\"inline-flex items-center gap-3 select-none flex-wrap\">\n      <button\n        type=\"button\"\n        (click)=\"prev()\"\n        [disabled]=\"effectivePageIndex() <= 1\"\n        class=\"inline-flex items-center gap-1.5 px-3.5 py-2 bg-neutral-primary rounded-md border border-default text-sm font-medium text-body shadow-2xs hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap\"\n      >\n        <ol-icon name=\"arrow-left\" size=\"xs\" />\n        <span>Trang tr\u01B0\u1EDBc</span>\n      </button>\n\n      <button\n        type=\"button\"\n        (click)=\"next()\"\n        [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n        class=\"inline-flex items-center gap-1.5 px-3.5 py-2 bg-neutral-primary rounded-md border border-default text-sm font-medium text-body shadow-2xs hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap\"\n      >\n        <span>Trang sau</span>\n        <ol-icon name=\"arrow-right\" size=\"xs\" />\n      </button>\n    </div>\n  }\n\n  <!-- 6. Type = Buttons & helper text (Figma #1149:80890) -->\n  @if (effectiveType() === 'buttons-helper') {\n    <div class=\"flex flex-col items-center gap-3 select-none\">\n      @if (showText()) {\n        <p class=\"text-sm font-medium text-body text-center whitespace-nowrap\">\n          Hi\u1EC3n th\u1ECB t\u1EEB <strong class=\"text-heading font-semibold\">{{ startRecord() }}</strong> \u0111\u1EBFn\n          <strong class=\"text-heading font-semibold\">{{ endRecord() }}</strong> trong\n          <strong class=\"text-heading font-semibold\">{{ total() }}</strong> d\u1EEF li\u1EC7u\n        </p>\n      }\n      <div class=\"inline-flex -space-x-px rounded-md shadow-xs isolate shrink-0\">\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"effectivePageIndex() <= 1\"\n          class=\"relative inline-flex items-center justify-center px-4 h-9 rounded-l-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap\"\n        >\n          Tr\u01B0\u1EDBc\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n          class=\"relative inline-flex items-center justify-center px-4 h-9 rounded-r-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap\"\n        >\n          Sau\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- 7. Type = With dropdown (Figma #1149:81895) -->\n  @if (effectiveType() === 'with-dropdown') {\n    <div class=\"inline-flex items-center gap-4 select-none flex-wrap\">\n      <nav\n        class=\"inline-flex -space-x-px rounded-md shadow-xs isolate max-w-full overflow-x-auto\"\n        aria-label=\"Ph\u00E2n trang\"\n      >\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"effectivePageIndex() <= 1\"\n          class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-l-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap shrink-0\"\n        >\n          Trang tr\u01B0\u1EDBc\n        </button>\n\n        @for (page of visiblePages(); track trackPage($index, page)) {\n          @if (page === 'ellipsis') {\n            <span\n              class=\"relative inline-flex items-center justify-center px-3 h-9 text-sm text-fg-disabled bg-neutral-primary border border-default select-none whitespace-nowrap shrink-0\"\n              aria-hidden=\"true\"\n            >\n              ...\n            </span>\n          } @else {\n            <button\n              type=\"button\"\n              (click)=\"goToPage(page)\"\n              [attr.aria-current]=\"page === effectivePageIndex() ? 'page' : null\"\n              [attr.aria-label]=\"'Trang ' + page\"\n              [attr.aria-label]=\"'Trang ' + page\"\n              [class]=\"\n                'relative inline-flex items-center justify-center min-w-9 h-9 px-3 text-sm transition-colors cursor-pointer whitespace-nowrap shrink-0 ' +\n                (page === effectivePageIndex()\n                  ? 'z-10 font-semibold border border-brand bg-brand text-white'\n                  : 'font-medium border border-default bg-neutral-primary-soft text-body hover:bg-neutral-secondary-soft')\n              \"\n            >\n              {{ page }}\n            </button>\n          }\n        }\n\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n          class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-r-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap shrink-0\"\n        >\n          Trang sau\n        </button>\n      </nav>\n\n      <!-- Dropdown select size -->\n      <div class=\"relative inline-flex items-center shrink-0\">\n        <!-- `[ngModel]` \u2014 xem l\u00FD do \u1EDF \u00F4 ch\u1ECDn trang c\u1EE7a Type `Dropdown & buttons`. -->\n        <select\n          [ngModel]=\"pageSize()\"\n          (ngModelChange)=\"onPageSizeChange(+$event)\"\n          aria-label=\"S\u1ED1 d\u00F2ng m\u1ED7i trang\"\n          class=\"appearance-none h-9 px-3.5 py-0 bg-neutral-tertiary border border-default rounded-md text-sm font-medium text-body pr-8 shadow-xs cursor-pointer focus:outline-hidden focus:ring-1 focus:ring-brand-subtle whitespace-nowrap\"\n        >\n          @for (opt of pageSizeOptions(); track opt) {\n            <option [value]=\"opt\">{{ opt }} m\u1ED7i trang</option>\n          }\n        </select>\n        <ol-icon\n          name=\"alt-arrow-down\"\n          size=\"xs\"\n          class=\"pointer-events-none absolute right-2.5 text-body\"\n        />\n      </div>\n    </div>\n  }\n\n  <!-- 8. Type = With input (Figma #1149:81910) -->\n  @if (effectiveType() === 'with-input') {\n    <div class=\"inline-flex items-center gap-4 select-none flex-wrap\">\n      <nav\n        class=\"inline-flex -space-x-px rounded-md shadow-xs isolate max-w-full overflow-x-auto\"\n        aria-label=\"Ph\u00E2n trang\"\n      >\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"effectivePageIndex() <= 1\"\n          class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-l-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap shrink-0\"\n        >\n          Trang tr\u01B0\u1EDBc\n        </button>\n\n        @for (page of visiblePages(); track trackPage($index, page)) {\n          @if (page === 'ellipsis') {\n            <span\n              class=\"relative inline-flex items-center justify-center px-3 h-9 text-sm text-fg-disabled bg-neutral-primary border border-default select-none whitespace-nowrap shrink-0\"\n              aria-hidden=\"true\"\n            >\n              ...\n            </span>\n          } @else {\n            <button\n              type=\"button\"\n              (click)=\"goToPage(page)\"\n              [attr.aria-current]=\"page === effectivePageIndex() ? 'page' : null\"\n              [attr.aria-label]=\"'Trang ' + page\"\n              [attr.aria-label]=\"'Trang ' + page\"\n              [class]=\"\n                'relative inline-flex items-center justify-center min-w-9 h-9 px-3 text-sm transition-colors cursor-pointer whitespace-nowrap shrink-0 ' +\n                (page === effectivePageIndex()\n                  ? 'z-10 font-semibold border border-brand bg-brand text-white'\n                  : 'font-medium border border-default bg-neutral-primary-soft text-body hover:bg-neutral-secondary-soft')\n              \"\n            >\n              {{ page }}\n            </button>\n          }\n        }\n\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n          class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-r-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap shrink-0\"\n        >\n          Trang sau\n        </button>\n      </nav>\n\n      <!-- Input Jump -->\n      <div class=\"flex items-center gap-2 text-sm text-body whitespace-nowrap shrink-0\">\n        <span>\u0110i t\u1EDBi</span>\n        <input\n          type=\"number\"\n          min=\"1\"\n          [max]=\"calculatedTotalPages()\"\n          [ngModel]=\"jumpPageValue()\"\n          (ngModelChange)=\"jumpPageValue.set($event)\"\n          (keydown.enter)=\"handleJump()\"\n          placeholder=\"199\"\n          class=\"w-16 px-2.5 py-1.5 text-center text-sm bg-neutral-tertiary border border-default rounded-md focus:outline-hidden focus:ring-1 focus:ring-brand-subtle text-heading shadow-xs\"\n        />\n        <span>trang</span>\n      </div>\n    </div>\n  }\n\n  <!-- 9. Type = Simple with input (Figma #1149:81928) -->\n  @if (effectiveType() === 'simple-input') {\n    <div class=\"inline-flex items-center gap-3 select-none flex-wrap\">\n      <span class=\"text-sm font-medium text-body whitespace-nowrap\">\u0110i t\u1EDBi trang</span>\n      <input\n        type=\"number\"\n        min=\"1\"\n        [max]=\"calculatedTotalPages()\"\n        [ngModel]=\"jumpPageValue()\"\n        (ngModelChange)=\"jumpPageValue.set($event)\"\n        (keydown.enter)=\"handleJump()\"\n        placeholder=\"20\"\n        class=\"w-16 px-2.5 py-1.5 text-center text-sm bg-neutral-tertiary border border-default rounded-md focus:outline-hidden focus:ring-1 focus:ring-brand-subtle text-heading shadow-xs\"\n      />\n      <button\n        type=\"button\"\n        (click)=\"handleJump()\"\n        class=\"px-4 py-1.5 bg-brand hover:bg-brand-strong text-white text-sm font-medium rounded-md shadow-xs cursor-pointer transition-colors whitespace-nowrap\"\n      >\n        \u0110i\n      </button>\n    </div>\n  }\n</div>\n" }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], totalPagesInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showText", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], showInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInfo", required: false }] }], showSizeChanger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSizeChanger", required: false }] }], showQuickJumper: [{ type: i0.Input, args: [{ isSignal: true, alias: "showQuickJumper", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
+                    }, template: "<div class=\"flex items-center gap-4 flex-wrap max-w-full\">\n  <!-- 1. Type = Default (Figma #1149:81851) -->\n  @if (layoutType() === 'default') {\n    <nav\n      class=\"inline-flex -space-x-px rounded-md shadow-xs isolate select-none\"\n      aria-label=\"Ph\u00E2n trang\"\n    >\n      <!-- Prev Button -->\n      <button\n        type=\"button\"\n        (click)=\"prev()\"\n        [disabled]=\"effectivePageIndex() <= 1\"\n        class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-l-md border border-default transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft shrink-0\"\n        aria-label=\"Trang tr\u01B0\u1EDBc\"\n      >\n        <ol-icon name=\"alt-arrow-left\" size=\"xs\"></ol-icon>\n      </button>\n\n      <!-- Pages Array -->\n      @for (page of visiblePages(); track trackPage($index, page)) {\n        @if (page === 'ellipsis') {\n          <span\n            class=\"relative inline-flex items-center justify-center px-3 h-9 text-sm text-fg-disabled bg-neutral-primary border border-default select-none whitespace-nowrap shrink-0\"\n            aria-hidden=\"true\"\n          >\n            ...\n          </span>\n        } @else {\n          <button\n            type=\"button\"\n            (click)=\"goToPage(page)\"\n            [attr.aria-current]=\"page === effectivePageIndex() ? 'page' : null\"\n            [attr.aria-label]=\"'Trang ' + page\"\n            [class]=\"\n              'relative inline-flex items-center justify-center min-w-9 h-9 px-3 text-sm transition-colors cursor-pointer whitespace-nowrap shrink-0 ' +\n              (page === effectivePageIndex()\n                ? 'z-10 font-semibold border border-brand bg-brand text-white'\n                : 'font-medium border border-default bg-neutral-primary-soft text-body hover:bg-neutral-secondary-soft')\n            \"\n          >\n            {{ page }}\n          </button>\n        }\n      }\n\n      <!-- Next Button -->\n      <button\n        type=\"button\"\n        (click)=\"next()\"\n        [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n        class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-r-md border border-default transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft shrink-0\"\n        aria-label=\"Trang sau\"\n      >\n        <ol-icon name=\"alt-arrow-right\" size=\"xs\"></ol-icon>\n      </button>\n    </nav>\n  }\n\n  <!-- 2. Type = Arrows (Figma #1149:81864) -->\n  @if (layoutType() === 'arrows') {\n    <nav\n      class=\"inline-flex -space-x-px rounded-md shadow-xs isolate select-none\"\n      aria-label=\"Ph\u00E2n trang\"\n    >\n      <button\n        type=\"button\"\n        (click)=\"prev()\"\n        [disabled]=\"effectivePageIndex() <= 1\"\n        class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-l-md border border-default transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft shrink-0\"\n        aria-label=\"Trang tr\u01B0\u1EDBc\"\n      >\n        <ol-icon name=\"alt-arrow-left\" size=\"xs\"></ol-icon>\n      </button>\n\n      <span\n        class=\"relative inline-flex items-center justify-center px-4 h-9 text-sm font-medium text-body bg-neutral-primary border border-default select-none whitespace-nowrap shrink-0\"\n      >\n        {{ effectivePageIndex() }} tr\u00EAn {{ calculatedTotalPages() }}\n      </span>\n\n      <button\n        type=\"button\"\n        (click)=\"next()\"\n        [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n        class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-r-md border border-default transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft shrink-0\"\n        aria-label=\"Trang sau\"\n      >\n        <ol-icon name=\"alt-arrow-right\" size=\"xs\"></ol-icon>\n      </button>\n    </nav>\n  }\n\n  <!-- 3. Type = Dropdown & buttons (Figma #1149:81868) -->\n  @if (layoutType() === 'dropdown-buttons') {\n    <div class=\"inline-flex items-center gap-3 select-none flex-wrap\">\n      <!-- Dropdown button -->\n      <div class=\"relative inline-flex items-center\">\n        <!--\n          `[ngModel]` ch\u1EE9 KH\u00D4NG ph\u1EA3i `[value]`: `[value]` tr\u00EAn <select> \u0111\u1EB7t\n          thu\u1ED9c t\u00EDnh DOM NGAY, l\u00FAc c\u00E1c <option> c\u1EE7a @for ch\u01B0a t\u1ED3n t\u1EA1i, n\u00EAn tr\u00ECnh\n          duy\u1EC7t ho\u00E0n nguy\u00EAn v\u1EC1 option \u0111\u1EA7u. \u0110o 2026-09-17: trang hi\u1EC7n t\u1EA1i l\u00E0 3 m\u00E0\n          \u00F4 ch\u1ECDn v\u1EABn hi\u1EC7n \"01\". Build xanh, kh\u00F4ng c\u1EA3nh b\u00E1o n\u00E0o.\n        -->\n        <select\n          [ngModel]=\"effectivePageIndex()\"\n          (ngModelChange)=\"goToPage(+$event)\"\n          aria-label=\"Ch\u1ECDn trang\"\n          class=\"appearance-none h-9 px-3.5 py-0 bg-neutral-tertiary border border-default rounded-md text-sm font-medium text-body pr-8 shadow-xs cursor-pointer focus:outline-hidden focus:ring-1 focus:ring-brand-subtle whitespace-nowrap\"\n        >\n          @for (p of pageList(); track p) {\n            <option [value]=\"p\">{{ p < 10 ? '0' + p : p }}</option>\n          }\n        </select>\n        <ol-icon\n          name=\"alt-arrow-down\"\n          size=\"xs\"\n          class=\"pointer-events-none absolute right-2.5 text-body\"\n        />\n      </div>\n\n      <!-- Helper info -->\n      <span\n        class=\"inline-flex items-center h-9 px-3.5 bg-neutral-tertiary/60 rounded-md text-sm font-medium text-fg-disabled select-none whitespace-nowrap\"\n      >\n        c\u1EE7a {{ calculatedTotalPages() }} trang\n      </span>\n\n      <!-- Buttons -->\n      <div class=\"inline-flex -space-x-px rounded-md shadow-xs isolate shrink-0\">\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"effectivePageIndex() <= 1\"\n          class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-l-md border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer shrink-0\"\n          aria-label=\"Trang tr\u01B0\u1EDBc\"\n        >\n          <ol-icon name=\"alt-arrow-left\" size=\"xs\"></ol-icon>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n          class=\"relative inline-flex items-center justify-center w-9 h-9 rounded-r-md border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer shrink-0\"\n          aria-label=\"Trang sau\"\n        >\n          <ol-icon name=\"alt-arrow-right\" size=\"xs\"></ol-icon>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- 4. Type = Text buttons (Figma #1149:81874) -->\n  @if (layoutType() === 'text-buttons') {\n    <nav\n      class=\"inline-flex -space-x-px rounded-md shadow-xs isolate select-none max-w-full overflow-x-auto\"\n      aria-label=\"Ph\u00E2n trang\"\n    >\n      <!-- Trang tr\u01B0\u1EDBc -->\n      <button\n        type=\"button\"\n        (click)=\"prev()\"\n        [disabled]=\"effectivePageIndex() <= 1\"\n        class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-l-md text-sm font-medium border border-default disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft whitespace-nowrap shrink-0\"\n      >\n        Trang tr\u01B0\u1EDBc\n      </button>\n\n      <!-- Pages -->\n      @for (page of visiblePages(); track trackPage($index, page)) {\n        @if (page === 'ellipsis') {\n          <span\n            class=\"relative inline-flex items-center justify-center px-3 h-9 text-sm text-fg-disabled bg-neutral-primary border border-default select-none whitespace-nowrap shrink-0\"\n            aria-hidden=\"true\"\n          >\n            ...\n          </span>\n        } @else {\n          <button\n            type=\"button\"\n            (click)=\"goToPage(page)\"\n            [attr.aria-current]=\"page === effectivePageIndex() ? 'page' : null\"\n            [attr.aria-label]=\"'Trang ' + page\"\n            [class]=\"\n              'relative inline-flex items-center justify-center min-w-9 h-9 px-3 text-sm transition-colors cursor-pointer whitespace-nowrap shrink-0 ' +\n              (page === effectivePageIndex()\n                ? 'z-10 font-semibold border border-brand bg-brand text-white'\n                : 'font-medium border border-default bg-neutral-primary-soft text-body hover:bg-neutral-secondary-soft')\n            \"\n          >\n            {{ page }}\n          </button>\n        }\n      }\n\n      <!-- Trang sau -->\n      <button\n        type=\"button\"\n        (click)=\"next()\"\n        [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n        class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-r-md text-sm font-medium border border-default disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-disabled cursor-pointer bg-neutral-primary text-body hover:bg-neutral-secondary-soft whitespace-nowrap shrink-0\"\n      >\n        Trang sau\n      </button>\n    </nav>\n  }\n\n  <!-- 5. Type = Two buttons (Figma #1149:81887) -->\n  @if (layoutType() === 'two-buttons') {\n    <div class=\"inline-flex items-center gap-3 select-none flex-wrap\">\n      <button\n        type=\"button\"\n        (click)=\"prev()\"\n        [disabled]=\"effectivePageIndex() <= 1\"\n        class=\"inline-flex items-center gap-1.5 px-3.5 py-2 bg-neutral-primary rounded-md border border-default text-sm font-medium text-body shadow-2xs hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap\"\n      >\n        <ol-icon name=\"arrow-left\" size=\"xs\" />\n        <span>Trang tr\u01B0\u1EDBc</span>\n      </button>\n\n      <button\n        type=\"button\"\n        (click)=\"next()\"\n        [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n        class=\"inline-flex items-center gap-1.5 px-3.5 py-2 bg-neutral-primary rounded-md border border-default text-sm font-medium text-body shadow-2xs hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap\"\n      >\n        <span>Trang sau</span>\n        <ol-icon name=\"arrow-right\" size=\"xs\" />\n      </button>\n    </div>\n  }\n\n  <!-- 6. Type = Buttons & helper text (Figma #1149:80890) -->\n  @if (layoutType() === 'buttons-helper') {\n    <div class=\"flex flex-col items-center gap-3 select-none\">\n      @if (showText()) {\n        <p class=\"text-sm font-medium text-body text-center whitespace-nowrap\">\n          Hi\u1EC3n th\u1ECB t\u1EEB <strong class=\"text-heading font-semibold\">{{ startRecord() }}</strong> \u0111\u1EBFn\n          <strong class=\"text-heading font-semibold\">{{ endRecord() }}</strong> trong\n          <strong class=\"text-heading font-semibold\">{{ total() }}</strong> d\u1EEF li\u1EC7u\n        </p>\n      }\n      <div class=\"inline-flex -space-x-px rounded-md shadow-xs isolate shrink-0\">\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"effectivePageIndex() <= 1\"\n          class=\"relative inline-flex items-center justify-center px-4 h-9 rounded-l-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap\"\n        >\n          Tr\u01B0\u1EDBc\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n          class=\"relative inline-flex items-center justify-center px-4 h-9 rounded-r-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap\"\n        >\n          Sau\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- 8. Type = With input (Figma #1149:81910) -->\n  @if (layoutType() === 'with-input') {\n    <div class=\"inline-flex items-center gap-4 select-none flex-wrap\">\n      <nav\n        class=\"inline-flex -space-x-px rounded-md shadow-xs isolate max-w-full overflow-x-auto\"\n        aria-label=\"Ph\u00E2n trang\"\n      >\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"effectivePageIndex() <= 1\"\n          class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-l-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap shrink-0\"\n        >\n          Trang tr\u01B0\u1EDBc\n        </button>\n\n        @for (page of visiblePages(); track trackPage($index, page)) {\n          @if (page === 'ellipsis') {\n            <span\n              class=\"relative inline-flex items-center justify-center px-3 h-9 text-sm text-fg-disabled bg-neutral-primary border border-default select-none whitespace-nowrap shrink-0\"\n              aria-hidden=\"true\"\n            >\n              ...\n            </span>\n          } @else {\n            <button\n              type=\"button\"\n              (click)=\"goToPage(page)\"\n              [attr.aria-current]=\"page === effectivePageIndex() ? 'page' : null\"\n              [attr.aria-label]=\"'Trang ' + page\"\n              [class]=\"\n                'relative inline-flex items-center justify-center min-w-9 h-9 px-3 text-sm transition-colors cursor-pointer whitespace-nowrap shrink-0 ' +\n                (page === effectivePageIndex()\n                  ? 'z-10 font-semibold border border-brand bg-brand text-white'\n                  : 'font-medium border border-default bg-neutral-primary-soft text-body hover:bg-neutral-secondary-soft')\n              \"\n            >\n              {{ page }}\n            </button>\n          }\n        }\n\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"effectivePageIndex() >= calculatedTotalPages()\"\n          class=\"relative inline-flex items-center justify-center px-3.5 h-9 rounded-r-md text-sm font-medium border border-default bg-neutral-primary text-body hover:bg-neutral-secondary-soft disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap shrink-0\"\n        >\n          Trang sau\n        </button>\n      </nav>\n\n      <!-- Input Jump -->\n      <div class=\"flex items-center gap-2 text-sm text-body whitespace-nowrap shrink-0\">\n        <span>\u0110i t\u1EDBi</span>\n        <input\n          type=\"number\"\n          min=\"1\"\n          [max]=\"calculatedTotalPages()\"\n          [ngModel]=\"jumpPageValue()\"\n          (ngModelChange)=\"jumpPageValue.set($event)\"\n          (keydown.enter)=\"handleJump()\"\n          placeholder=\"199\"\n          class=\"w-16 px-2.5 py-1.5 text-center text-sm bg-neutral-tertiary border border-default rounded-md focus:outline-hidden focus:ring-1 focus:ring-brand-subtle text-heading shadow-xs\"\n        />\n        <span>trang</span>\n      </div>\n    </div>\n  }\n\n  <!-- 9. Type = Simple with input (Figma #1149:81928) -->\n  @if (layoutType() === 'simple-input') {\n    <div class=\"inline-flex items-center gap-3 select-none flex-wrap\">\n      <span class=\"text-sm font-medium text-body whitespace-nowrap\">\u0110i t\u1EDBi trang</span>\n      <input\n        type=\"number\"\n        min=\"1\"\n        [max]=\"calculatedTotalPages()\"\n        [ngModel]=\"jumpPageValue()\"\n        (ngModelChange)=\"jumpPageValue.set($event)\"\n        (keydown.enter)=\"handleJump()\"\n        placeholder=\"20\"\n        class=\"w-16 px-2.5 py-1.5 text-center text-sm bg-neutral-tertiary border border-default rounded-md focus:outline-hidden focus:ring-1 focus:ring-brand-subtle text-heading shadow-xs\"\n      />\n      <button\n        type=\"button\"\n        (click)=\"handleJump()\"\n        class=\"px-4 py-1.5 bg-brand hover:bg-brand-strong text-white text-sm font-medium rounded-md shadow-xs cursor-pointer transition-colors whitespace-nowrap\"\n      >\n        \u0110i\n      </button>\n    </div>\n  }\n  @if (hasPageSizeDropdown()) {\n    <!--\n      \u00D4 ch\u1ECDn c\u1EE1 trang \u2014 C\u1EDC RI\u00CANG `withDropdown`, g\u1EAFn \u0111\u01B0\u1EE3c v\u00E0o m\u1ECDi type (Figma\n      `With dropdown` #1149:81895 l\u00E0 n\u01A1i n\u00F3 xu\u1EA5t hi\u1EC7n \u0111\u1EA7u ti\u00EAn). Vi\u1EBFt M\u1ED8T ch\u1ED7 \u1EDF\n      \u0111\u00E2y thay v\u00EC ch\u00E9p v\u00E0o t\u1EEBng type.\n    -->\n    <div class=\"relative inline-flex items-center shrink-0\">\n      <!-- `[ngModel]` \u2014 xem l\u00FD do \u1EDF \u00F4 ch\u1ECDn trang c\u1EE7a Type `Dropdown & buttons`. -->\n      <select\n        [ngModel]=\"pageSize()\"\n        (ngModelChange)=\"onPageSizeChange(+$event)\"\n        aria-label=\"S\u1ED1 d\u00F2ng m\u1ED7i trang\"\n        class=\"appearance-none h-9 px-3.5 py-0 bg-neutral-tertiary border border-default rounded-md text-sm font-medium text-body pr-8 shadow-xs cursor-pointer focus:outline-hidden focus:ring-1 focus:ring-brand-subtle whitespace-nowrap\"\n      >\n        @for (opt of pageSizeOptions(); track opt) {\n          <option [value]=\"opt\">{{ opt }} m\u1ED7i trang</option>\n        }\n      </select>\n      <ol-icon\n        name=\"alt-arrow-down\"\n        size=\"xs\"\n        class=\"pointer-events-none absolute right-2.5 text-body\"\n      />\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], totalPagesInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPages", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showText", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], showInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInfo", required: false }] }], withDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "withDropdown", required: false }] }], showSizeChanger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSizeChanger", required: false }] }], showQuickJumper: [{ type: i0.Input, args: [{ isSignal: true, alias: "showQuickJumper", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
 class OlPopover {
     positioning = inject(OlPositioningService);
@@ -12769,6 +14821,35 @@ class OlPopover {
     cleanupAutoUpdate = null;
     /** Hàm trả panel về chỗ cũ khi đóng. */
     detachPanel = null;
+    /**
+     * Selector cho phần tử nhận được tiêu điểm.
+     *
+     * `tabindex="-1"` bị loại: đó là dấu hiệu tác giả cố ý đưa phần tử ra khỏi
+     * đường Tab. `:disabled` cũng loại — trình duyệt không cho nó nhận tiêu điểm.
+     */
+    static FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    /**
+     * Phần tử nhận tiêu điểm bên trong `root`, theo thứ tự nhìn thấy.
+     *
+     * Lọc phần ẩn bằng `[hidden]`/`[aria-hidden]` chứ KHÔNG `offsetParent`:
+     * `offsetParent` là `null` với mọi phần tử trong `position: fixed` — mà panel
+     * nổi hay dùng đúng kiểu định vị đó — nên danh sách sẽ rỗng và toàn bộ xử lý
+     * Tab lặng lẽ không chạy.
+     */
+    focusablesIn(root) {
+        return [...root.querySelectorAll(OlPopover.FOCUSABLE)].filter((el) => !el.closest('[hidden], [aria-hidden="true"]'));
+    }
+    /**
+     * Phần tử nhận tiêu điểm đứng ngay sau `element` trong thứ tự Tab của trang.
+     *
+     * Loại chính panel ra: nó treo cuối `<body>` nên nếu tính cả thì "phần tử sau
+     * nút trigger" lại rơi vào panel vừa đóng.
+     */
+    nextFocusableAfter(element, panel) {
+        const all = [...document.body.querySelectorAll(OlPopover.FOCUSABLE)].filter((el) => !panel.contains(el) && !el.closest('[hidden], [aria-hidden="true"]'));
+        const index = all.indexOf(element);
+        return index === -1 ? null : (all[index + 1] ?? null);
+    }
     constructor() {
         // Định vị thật bằng floating-ui: có flip + shift nên không bị cắt ở mép
         // viewport. Trước đây placement được khai nhưng KHÔNG dùng — panel luôn
@@ -12805,6 +14886,63 @@ class OlPopover {
             // Giữ đúng vị trí khi cuộn trang hoặc đổi kích thước cửa sổ.
             this.cleanupAutoUpdate = this.positioning.autoUpdate(reference, floating, (coordinates) => this.positioning.applyPosition(floating, coordinates), options);
         });
+        /**
+         * Cho Tab đi vào panel, và ra đúng chỗ khi hết.
+         *
+         * `appendTo="body"` treo panel ra cuối `<body>`, nên trong thứ tự DOM nó
+         * nằm SAU toàn bộ nội dung trang. Bàn phím đi theo thứ tự DOM chứ không
+         * theo vị trí nhìn thấy — không có xử lý riêng thì Tab từ nút trigger nhảy
+         * sang phần tử kế tiếp của trang và panel mở ngay trước mắt không bao giờ
+         * tới được. Cùng lỗi đã đo và sửa ở `ol-dropdown`.
+         *
+         * Popover thường chỉ chứa chữ, nên lỗi này chưa lộ ra ở trang tài liệu (đo
+         * 2026-09-25: cả 24 mẫu đều 0 phần tử nhận tiêu điểm). Nhưng hễ ai đặt một
+         * nút hay liên kết vào trong, nó hỏng ngay — và hỏng lặng lẽ.
+         */
+        effect((onCleanup) => {
+            const open = this.isOpen();
+            const panel = this.panelRef()?.nativeElement;
+            const trigger = this.triggerRef()?.nativeElement;
+            if (!open || !panel || !trigger)
+                return;
+            const onTriggerKeydown = (event) => {
+                if (event.key !== 'Tab' || event.shiftKey)
+                    return;
+                const first = this.focusablesIn(panel)[0];
+                if (!first)
+                    return;
+                event.preventDefault();
+                first.focus();
+            };
+            const onPanelKeydown = (event) => {
+                if (event.key !== 'Tab')
+                    return;
+                const items = this.focusablesIn(panel);
+                const index = items.indexOf(document.activeElement);
+                if (index === -1)
+                    return;
+                // Rời mục cuối: đóng rồi đi tiếp NHƯ THỂ panel chưa mở. Không vòng về
+                // đầu — bẫy vòng tròn chỉ đúng cho hộp thoại, không cho lớp nổi cạnh
+                // một nút mà người dùng còn muốn đi tiếp.
+                if (!event.shiftKey && index === items.length - 1) {
+                    event.preventDefault();
+                    this.close();
+                    (this.nextFocusableAfter(trigger, panel) ?? trigger).focus();
+                    return;
+                }
+                // Lùi khỏi mục đầu: về nút trigger, giữ panel mở.
+                if (event.shiftKey && index === 0) {
+                    event.preventDefault();
+                    trigger.focus();
+                }
+            };
+            trigger.addEventListener('keydown', onTriggerKeydown);
+            panel.addEventListener('keydown', onPanelKeydown);
+            onCleanup(() => {
+                trigger.removeEventListener('keydown', onTriggerKeydown);
+                panel.removeEventListener('keydown', onPanelKeydown);
+            });
+        });
         // Escape đóng popover
         /** Vào ngăn xếp Escape khi mở — chỉ lớp trên cùng đóng. */
         effect((onCleanup) => {
@@ -13404,6 +15542,191 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }], propDecorators: { rating: [{ type: i0.Input, args: [{ isSignal: true, alias: "rating", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], score: [{ type: i0.Input, args: [{ isSignal: true, alias: "score", required: false }] }], badgeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeText", required: false }] }], minLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLabel", required: false }] }], maxLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 let uniqueRatingId = 0;
 
+/**
+ * Hai khung chia nhau một vùng, kéo vạch giữa để đổi tỉ lệ.
+ *
+ * Chưa có node Figma — dựng theo design system: vạch kéo dùng `bg-default`,
+ * sáng lên `bg-brand` khi rê chuột hoặc đang kéo.
+ *
+ * ## Vì sao tỉ lệ phần trăm chứ không pixel
+ *
+ * Người dùng đổi cỡ cửa sổ thì hai khung phải giãn theo. Lưu pixel thì khung
+ * trái giữ nguyên còn khung phải nuốt toàn bộ phần thêm — tỉ lệ người dùng
+ * chọn biến mất.
+ *
+ * ## Bắt chuột trên `document`, không trên vạch
+ *
+ * Kéo nhanh thì con trỏ rời khỏi vạch trước khi trình duyệt kịp gửi sự kiện
+ * tiếp theo; nghe trên chính vạch thì kéo đứt đoạn. Nghe trên `document` lúc
+ * đang kéo và gỡ ngay khi thả.
+ *
+ * `setPointerCapture` giải quyết đúng việc này nhưng không có trong jsdom, nên
+ * spec sẽ không chạy được nhánh kéo — dùng `document` thì cả hai môi trường
+ * cùng một đường mã.
+ *
+ * ## Bàn phím
+ *
+ * Vạch là `role="separator"` có `tabindex`, mũi tên đổi 2% mỗi lần, Home/End
+ * về hai biên. Không có phần này thì người dùng bàn phím không đổi được tỉ lệ
+ * — và một khung chia đôi không kéo được thì chỉ là hai `<div>` cạnh nhau.
+ *
+ * ## Lưu ý khi viết test
+ *
+ * jsdom không tính bố cục: `getBoundingClientRect()` trả 0 cho mọi thứ, nên
+ * phép quy đổi toạ độ chuột sang phần trăm luôn ra `NaN` hoặc 0. Spec khoá
+ * phần bàn phím và ràng buộc min/max (tính thuần số); việc kéo chuột nghiệm
+ * thu trên trình duyệt.
+ */
+class OlResizable {
+    elementRef = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    direction = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** Tỉ lệ khung ĐẦU, tính bằng phần trăm. Hai chiều để nơi dùng lưu lại được. */
+    ratio = model(50, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []));
+    /** Chặn dưới và chặn trên, phần trăm. Khung nào cũng không nhỏ hơn `minRatio`. */
+    minRatio = input(15, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minRatio" }] : /* istanbul ignore next */ []));
+    maxRatio = input(85, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxRatio" }] : /* istanbul ignore next */ []));
+    /** Bước đổi mỗi lần nhấn mũi tên, phần trăm. */
+    keyboardStep = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyboardStep" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Kéo để đổi tỉ lệ hai khung', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Bắn khi thả chuột hoặc nhấn phím — KHÔNG bắn liên tục lúc đang kéo.
+     *
+     * Tên là `resizeEnd` chứ không `ratioChange`: `model()` đã tự sinh
+     * `ratioChange` cho binding hai chiều, khai thêm output trùng tên là lỗi
+     * biên dịch NG1054. Hai thứ cũng khác nghĩa — `ratioChange` bắn mỗi lần giá
+     * trị đổi (kể cả từng nhịp kéo), còn `resizeEnd` chỉ bắn khi người dùng đã
+     * thả tay, đúng lúc nên lưu tỉ lệ xuống máy chủ.
+     */
+    resizeEnd = output();
+    dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    releaseDrag = null;
+    constructor() {
+        this.destroyRef.onDestroy(() => this.stopDrag());
+    }
+    /** Ép tỉ lệ vào khoảng cho phép. Tách ra để spec khoá được mà không cần DOM. */
+    clamp(value) {
+        return Math.min(this.maxRatio(), Math.max(this.minRatio(), Math.round(value)));
+    }
+    onPointerDown(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this.dragging.set(true);
+        const move = (e) => this.applyFromPointer(e);
+        const up = () => {
+            this.stopDrag();
+            this.resizeEnd.emit(this.ratio());
+        };
+        document.addEventListener('pointermove', move);
+        document.addEventListener('pointerup', up);
+        this.releaseDrag = () => {
+            document.removeEventListener('pointermove', move);
+            document.removeEventListener('pointerup', up);
+        };
+    }
+    stopDrag() {
+        this.dragging.set(false);
+        this.releaseDrag?.();
+        this.releaseDrag = null;
+    }
+    applyFromPointer(event) {
+        const box = this.elementRef.nativeElement.getBoundingClientRect();
+        const horizontal = this.direction() === 'horizontal';
+        const size = horizontal ? box.width : box.height;
+        if (!size)
+            return;
+        const offset = horizontal ? event.clientX - box.left : event.clientY - box.top;
+        this.ratio.set(this.clamp((offset / size) * 100));
+    }
+    onKeydown(event) {
+        if (this.disabled())
+            return;
+        const horizontal = this.direction() === 'horizontal';
+        const step = this.keyboardStep();
+        // Mũi tên theo ĐÚNG chiều chia: khung ngang thì trái/phải, khung dọc thì
+        // lên/xuống. Nhận cả bốn phím là mời người dùng bấm nhầm chiều rồi tưởng
+        // vạch hỏng.
+        const map = horizontal
+            ? { ArrowLeft: -step, ArrowRight: step }
+            : { ArrowUp: -step, ArrowDown: step };
+        let next = null;
+        if (event.key in map)
+            next = this.ratio() + map[event.key];
+        else if (event.key === 'Home')
+            next = this.minRatio();
+        else if (event.key === 'End')
+            next = this.maxRatio();
+        if (next === null)
+            return;
+        event.preventDefault();
+        this.ratio.set(this.clamp(next));
+        this.resizeEnd.emit(this.ratio());
+    }
+    rootClasses = computed(() => this.direction() === 'horizontal' ? 'flex h-full w-full' : 'flex h-full w-full flex-col', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    /** Kích thước khung đầu — `flex-basis` phần trăm, khung sau lấp phần còn lại. */
+    firstStyle = computed(() => `${this.ratio()}%`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * Vạch chia.
+     *
+     * ## Vùng bấm rộng hơn vạch nhìn thấy
+     *
+     * Vạch chỉ dày 6px thì đúng thẩm mỹ nhưng vùng bấm 6px vi phạm WCAG 2.5.8
+     * (ngưỡng 24px) — đo trên trình duyệt ra `6×188px`. Nên vạch nhận
+     * `w-6`/`h-6` để vùng bấm đủ 24px, còn phần MÀU nằm ở `::before` chỉ
+     * 6px ở giữa. Người dùng thấy vạch mảnh, tay và con trỏ thì có 24px để bắt.
+     *
+     * `::before` khai trong `handleBarClasses()` và đặt qua một `<span>` con chứ
+     * không dùng biến thể `before:` của Tailwind: `before:` cần nhiều class cho
+     * cùng một hình và khó đọc hơn một phần tử thật.
+     */
+    handleClasses = computed(() => {
+        const horizontal = this.direction() === 'horizontal';
+        // 24px theo WCAG 2.5.8; phần màu mảnh hơn nằm trong con.
+        const axis = horizontal ? 'w-6 cursor-col-resize' : 'h-6 cursor-row-resize';
+        return [
+            'group flex shrink-0 items-center justify-center',
+            axis,
+            this.disabled() ? 'cursor-not-allowed' : '',
+            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "handleClasses" }] : /* istanbul ignore next */ []));
+    /** Phần MÀU của vạch — mảnh 6px, nằm giữa vùng bấm 24px. */
+    handleBarClasses = computed(() => {
+        const horizontal = this.direction() === 'horizontal';
+        const axis = horizontal ? 'h-full w-1.5' : 'h-1.5 w-full';
+        const state = this.disabled()
+            ? 'bg-default'
+            : this.dragging()
+                ? 'bg-brand'
+                : 'bg-default group-hover:bg-brand';
+        return ['rounded-full transition-colors', axis, state].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "handleBarClasses" }] : /* istanbul ignore next */ []));
+    ariaOrientation = computed(() => this.direction() === 'horizontal' ? 'vertical' : 'horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaOrientation" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlResizable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: OlResizable, isStandalone: true, selector: "ol-resizable", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, ratio: { classPropertyName: "ratio", publicName: "ratio", isSignal: true, isRequired: false, transformFunction: null }, minRatio: { classPropertyName: "minRatio", publicName: "minRatio", isSignal: true, isRequired: false, transformFunction: null }, maxRatio: { classPropertyName: "maxRatio", publicName: "maxRatio", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ratio: "ratioChange", resizeEnd: "resizeEnd" }, host: { classAttribute: "block" }, ngImport: i0, template: "<div [class]=\"rootClasses()\">\n  <!--\n    `flex-basis` ph\u1EA7n tr\u0103m + `min-w-0` \u0111\u1EC3 n\u1ED9i dung d\u00E0i kh\u00F4ng \u0111\u1EA9y khung r\u1ED9ng ra.\n    Thi\u1EBFu `min-w-0` th\u00EC m\u1ED9t b\u1EA3ng hay m\u1ED9t d\u00F2ng ch\u1EEF kh\u00F4ng ng\u1EAFt s\u1EBD \u00E9p khung gi\u1EEF\n    nguy\u00EAn b\u1EC1 r\u1ED9ng v\u00E0 v\u1EA1ch k\u00E9o \u0111\u1EE9ng im \u2014 l\u1ED7i tr\u00F4ng nh\u01B0 k\u00E9o h\u1ECFng.\n  -->\n  <div class=\"min-h-0 min-w-0 overflow-auto\" [style.flex-basis]=\"firstStyle()\">\n    <ng-content select=\"[first]\" />\n  </div>\n\n  <!--\n    `role=\"separator\"` v\u1EDBi `aria-valuenow` l\u00E0 c\u00E1ch chu\u1EA9n b\u00E1o cho tr\u00ECnh \u0111\u1ECDc m\u00E0n\n    h\u00ECnh bi\u1EBFt \u0111\u00E2y l\u00E0 v\u1EA1ch chia v\u00E0 \u0111ang \u1EDF \u0111\u00E2u. `aria-orientation` NG\u01AF\u1EE2C v\u1EDBi\n    h\u01B0\u1EDBng chia: khung chia ngang th\u00EC v\u1EA1ch \u0111\u1EE9ng d\u1ECDc.\n\n    Th\u1EBB ngo\u00E0i r\u1ED9ng 24px cho \u0111\u1EE7 ng\u01B0\u1EE1ng v\u00F9ng b\u1EA5m WCAG 2.5.8; `span` con m\u1EDBi l\u00E0\n    ph\u1EA7n m\u00E0u m\u1EA3nh 6px. Xem handleClasses() trong .ts.\n  -->\n  <div\n    [class]=\"handleClasses()\"\n    role=\"separator\"\n    [attr.tabindex]=\"disabled() ? null : 0\"\n    [attr.aria-orientation]=\"ariaOrientation()\"\n    [attr.aria-valuenow]=\"ratio()\"\n    [attr.aria-valuemin]=\"minRatio()\"\n    [attr.aria-valuemax]=\"maxRatio()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    (pointerdown)=\"onPointerDown($event)\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    <span [class]=\"handleBarClasses()\"></span>\n  </div>\n\n  <div class=\"min-h-0 min-w-0 flex-1 overflow-auto\">\n    <ng-content select=\"[second]\" />\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlResizable, decorators: [{
+            type: Component,
+            args: [{ selector: 'ol-resizable', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block' }, template: "<div [class]=\"rootClasses()\">\n  <!--\n    `flex-basis` ph\u1EA7n tr\u0103m + `min-w-0` \u0111\u1EC3 n\u1ED9i dung d\u00E0i kh\u00F4ng \u0111\u1EA9y khung r\u1ED9ng ra.\n    Thi\u1EBFu `min-w-0` th\u00EC m\u1ED9t b\u1EA3ng hay m\u1ED9t d\u00F2ng ch\u1EEF kh\u00F4ng ng\u1EAFt s\u1EBD \u00E9p khung gi\u1EEF\n    nguy\u00EAn b\u1EC1 r\u1ED9ng v\u00E0 v\u1EA1ch k\u00E9o \u0111\u1EE9ng im \u2014 l\u1ED7i tr\u00F4ng nh\u01B0 k\u00E9o h\u1ECFng.\n  -->\n  <div class=\"min-h-0 min-w-0 overflow-auto\" [style.flex-basis]=\"firstStyle()\">\n    <ng-content select=\"[first]\" />\n  </div>\n\n  <!--\n    `role=\"separator\"` v\u1EDBi `aria-valuenow` l\u00E0 c\u00E1ch chu\u1EA9n b\u00E1o cho tr\u00ECnh \u0111\u1ECDc m\u00E0n\n    h\u00ECnh bi\u1EBFt \u0111\u00E2y l\u00E0 v\u1EA1ch chia v\u00E0 \u0111ang \u1EDF \u0111\u00E2u. `aria-orientation` NG\u01AF\u1EE2C v\u1EDBi\n    h\u01B0\u1EDBng chia: khung chia ngang th\u00EC v\u1EA1ch \u0111\u1EE9ng d\u1ECDc.\n\n    Th\u1EBB ngo\u00E0i r\u1ED9ng 24px cho \u0111\u1EE7 ng\u01B0\u1EE1ng v\u00F9ng b\u1EA5m WCAG 2.5.8; `span` con m\u1EDBi l\u00E0\n    ph\u1EA7n m\u00E0u m\u1EA3nh 6px. Xem handleClasses() trong .ts.\n  -->\n  <div\n    [class]=\"handleClasses()\"\n    role=\"separator\"\n    [attr.tabindex]=\"disabled() ? null : 0\"\n    [attr.aria-orientation]=\"ariaOrientation()\"\n    [attr.aria-valuenow]=\"ratio()\"\n    [attr.aria-valuemin]=\"minRatio()\"\n    [attr.aria-valuemax]=\"maxRatio()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    (pointerdown)=\"onPointerDown($event)\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    <span [class]=\"handleBarClasses()\"></span>\n  </div>\n\n  <div class=\"min-h-0 min-w-0 flex-1 overflow-auto\">\n    <ng-content select=\"[second]\" />\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }, { type: i0.Output, args: ["ratioChange"] }], minRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRatio", required: false }] }], maxRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRatio", required: false }] }], keyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStep", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], resizeEnd: [{ type: i0.Output, args: ["resizeEnd"] }] } });
+
 /**
  * `ol-app-nav` — menu điều hướng dọc của Ôn Luyện.
  *
@@ -15106,6 +17429,228 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
   `, styles: [":host{pointer-events:none}:host>div{pointer-events:auto}\n"] }]
         }] });
 
+/**
+ * Chồng nhiều icon hoặc logo lên nhau, kèm số đếm "+N".
+ *
+ * Chưa có node Figma — dựng theo `ol-avatar-group`, component cùng cơ chế đã
+ * có trong thư viện. Khác ở chỗ: avatar là ảnh người nên luôn tròn, còn icon
+ * thường là biểu tượng dịch vụ hay môn học nên mặc định bo vừa (`rounded-lg`)
+ * và có nền để icon một màu vẫn tách khỏi icon bên dưới.
+ *
+ * ## Vòng viền là thứ làm nên hiệu ứng chồng
+ *
+ * Mỗi ô có `ring-2 ring-buffer` — vòng viền màu nền trang, không phải viền
+ * màu. Nhờ nó hai ô chồng nhau vẫn thấy rõ ranh giới. Bỏ vòng này thì các ô
+ * dính thành một khối nhoè.
+ *
+ * `ring-buffer` chứ không `ring-white`: ở chế độ tối nền không phải trắng, và
+ * viền trắng trên nền đen là đường kẻ sáng chói quanh mỗi icon.
+ *
+ * ## Thứ tự chồng
+ *
+ * Mặc định ô ĐẦU nằm trên — giống xếp bài. `reverse` lật lại cho ô cuối nằm
+ * trên, dùng khi ô cuối là thứ cần nhấn (icon "thêm", trạng thái mới nhất).
+ *
+ * Làm bằng `flex-row-reverse` cộng đảo thứ tự dữ liệu chứ không bằng
+ * `z-index`: `z-index` cần stacking context và sẽ hỏng khi nơi gọi đặt
+ * component vào một phần tử có `transform` hay `opacity`.
+ */
+class OlIconStack {
+    size = input('base', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Số đếm "+N" ở cuối. `null` thì không vẽ. */
+    counter = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "counter" }] : /* istanbul ignore next */ []));
+    counterAriaLabel = input('mục khác', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "counterAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Lật thứ tự chồng: ô CUỐI nằm trên thay vì ô đầu. */
+    reverse = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "reverse" }] : /* istanbul ignore next */ []));
+    /**
+     * Bo góc của từng ô. `full` cho logo tròn, `lg` cho biểu tượng vuông.
+     *
+     * Áp lên CON qua biến thể `*:` của Tailwind, nên nơi gọi chỉ việc đặt
+     * `<ol-icon>` hay `<img>` vào là xong.
+     */
+    rounded = input('lg', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => {
+        const gap = { sm: '-space-x-1.5', base: '-space-x-2', lg: '-space-x-2.5' }[this.size()];
+        const box = { sm: '*:size-6', base: '*:size-8', lg: '*:size-10' }[this.size()];
+        const radius = this.rounded() === 'full' ? '*:rounded-full' : '*:rounded-lg';
+        const dir = this.reverse() ? 'flex-row-reverse space-x-reverse' : '';
+        return [
+            'flex items-center',
+            gap,
+            dir,
+            // Vòng viền màu nền trang tạo ranh giới giữa hai ô chồng nhau.
+            `${box} ${radius} *:shrink-0 *:ring-2 *:ring-buffer *:bg-neutral-secondary`,
+            '*:flex *:items-center *:justify-center *:text-body-subtle',
+        ].join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    /**
+     * Ô đếm "+N".
+     *
+     * `text-heading` chứ KHÔNG `text-body`: tổ hợp `bg-neutral-quaternary` +
+     * `text-body` đo được 6.10 ở chế độ sáng nhưng chỉ 3.96 ở chế độ tối — dưới
+     * ngưỡng WCAG 4.5. Đây là kết luận đã đo ở `ol-avatar-group` (BUG-016 mục 5),
+     * theo tiền lệ sẵn có chứ không đoán lại.
+     *
+     * Chú thích để Ở ĐÂY chứ không trong template: template là một chuỗi
+     * template literal, nên dấu backtick trong chú thích HTML đóng chuỗi sớm và
+     * TS báo lỗi ở dòng chẳng liên quan (đã mắc khi viết file này).
+     */
+    counterClasses = computed(() => {
+        const font = { sm: 'text-2xs', base: 'text-xs', lg: 'text-sm' }[this.size()];
+        return `font-medium bg-neutral-quaternary text-heading select-none ${font}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "counterClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlIconStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlIconStack, isStandalone: true, selector: "ol-icon-stack", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, counter: { classPropertyName: "counter", publicName: "counter", isSignal: true, isRequired: false, transformFunction: null }, counterAriaLabel: { classPropertyName: "counterAriaLabel", publicName: "counterAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-block" }, ngImport: i0, template: `
+    <div [class]="rootClasses()">
+      <ng-content />
+
+      @if (counter()) {
+        <!-- Xem chú thích counterClasses() về lựa chọn màu chữ. -->
+        <span [class]="counterClasses()" [attr.aria-label]="counterAriaLabel()">
+          {{ counter() }}
+        </span>
+      }
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlIconStack, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-icon-stack',
+                    standalone: true,
+                    template: `
+    <div [class]="rootClasses()">
+      <ng-content />
+
+      @if (counter()) {
+        <!-- Xem chú thích counterClasses() về lựa chọn màu chữ. -->
+        <span [class]="counterClasses()" [attr.aria-label]="counterAriaLabel()">
+          {{ counter() }}
+        </span>
+      }
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'inline-block' },
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], counter: [{ type: i0.Input, args: [{ isSignal: true, alias: "counter", required: false }] }], counterAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "counterAriaLabel", required: false }] }], reverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverse", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
+
+/**
+ * Một dòng nội dung: phần dẫn đầu · tiêu đề + mô tả · phần hành động.
+ *
+ * Chưa có node Figma — dựng theo design system, lấy khoảng cách và cỡ chữ từ
+ * `ol-checkbox-radio-form` (component gần nhất đang có cấu trúc này).
+ *
+ * ## Vì sao KHÔNG mở rộng `ol-list-group-item`
+ *
+ * Cái đó là `<li>` và phải nằm trong `<ul>` của `ol-list-group` — HTML quy
+ * định vậy. Còn dòng nội dung thì hay đứng một mình trong thẻ, trong ngăn kéo,
+ * hay trong kết quả tìm kiếm. Nhồi cấu trúc vào `<li>` là buộc mọi nơi dùng
+ * phải bọc thêm `<ul>` không có ý nghĩa ngữ nghĩa nào.
+ *
+ * Hai component dùng chung cách xếp; `ol-item` lo phần bên trong, đặt ở đâu là
+ * việc của nơi gọi.
+ *
+ * ## Ba khe, KHÔNG phải ba input
+ *
+ * `[lead]` và `[actions]` là khe cắm chứ không phải input nhận tên icon: phần
+ * dẫn đầu có thể là icon, avatar, ảnh bìa hay số thứ tự; phần hành động có thể
+ * là nút, huy hiệu, hay một dòng chữ. Nhận tên icon thì mỗi lần cần thứ khác
+ * lại phải thêm một input.
+ *
+ * Riêng `icon` giữ lại làm lối tắt cho ca hay gặp nhất. Nó nằm TRONG cùng khe
+ * `[lead]`, sau nội dung chiếu — nơi gọi truyền cả hai thì có hai phần dẫn đầu
+ * cạnh nhau, nhưng đó là ca hiếm và không đáng thêm selector CSS để chặn.
+ */
+class OlItem {
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Lối tắt cho phần dẫn đầu dạng icon. Khe `[lead]` đè lên nó. */
+    icon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    size = input('base', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Căn phần dẫn đầu và hành động theo chiều dọc.
+     *
+     * `start` khi mô tả dài hai ba dòng — icon căn giữa một khối cao trông như
+     * trôi lơ lửng. `center` khi chỉ có tiêu đề.
+     */
+    align = input('center', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /** Bấm được: thêm hiệu ứng hover và con trỏ tay, phát `itemClick`. */
+    interactive = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Biến cả dòng thành liên kết. Bỏ qua khi `disabled`. */
+    href = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+    itemClick = output();
+    /**
+     * Enter và Space kích hoạt dòng `interactive`, như một `<button>` thật.
+     *
+     * Dùng `(keydown)` trần rồi tự lọc phím, KHÔNG `(keydown.enter)`: hai
+     * listener khác kiểu sự kiện trên cùng một thẻ thì Angular suy `$event` theo
+     * cái đầu — `(click)` đứng trước nên `$event` thành `MouseEvent` và TS báo
+     * lỗi ở dòng `keydown`.
+     *
+     * `preventDefault` cho Space, nếu không trang cuộn xuống một màn cùng lúc.
+     */
+    onKeyActivate(event) {
+        if (this.disabled() || !this.interactive())
+            return;
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        event.preventDefault();
+        this.itemClick.emit(new MouseEvent('click'));
+    }
+    onClick(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            return;
+        }
+        if (this.interactive() || this.href())
+            this.itemClick.emit(event);
+    }
+    rootClasses = computed(() => {
+        const pad = { sm: 'px-3 py-2 gap-2.5', base: 'px-4 py-3 gap-3', lg: 'px-5 py-4 gap-4' }[this.size()];
+        const align = this.align() === 'start' ? 'items-start' : 'items-center';
+        // Gom vào MỘT chuỗi qua ba-ngôi thay vì nhiều `[class.x]` rời: hai class
+        // cùng thuộc tính thì trình duyệt chọn theo thứ tự luật trong file CSS chứ
+        // không theo thứ tự viết.
+        const state = this.disabled()
+            ? 'opacity-50 cursor-not-allowed'
+            : this.interactive() || this.href()
+                ? 'cursor-pointer hover:bg-neutral-secondary transition-colors'
+                : '';
+        return `flex w-full ${align} ${pad} ${state}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    titleClasses = computed(() => `font-semibold text-heading ${{ sm: 'text-xs', base: 'text-sm', lg: 'text-base' }[this.size()]}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
+    descriptionClasses = computed(() => `text-body-subtle ${{ sm: 'text-2xs', base: 'text-xs', lg: 'text-sm' }[this.size()]}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "descriptionClasses" }] : /* istanbul ignore next */ []));
+    /** Cỡ icon lối tắt, theo cỡ dòng. */
+    iconSize = computed(() => ({ sm: 16, base: 20, lg: 24 })[this.size()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlItem, isStandalone: true, selector: "ol-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { classAttribute: "block" }, ngImport: i0, template: "<!--\n  `<a>` khi c\u00F3 `href`, `<div>` khi kh\u00F4ng.\n\n  \u0110\u1ED5i th\u1EBB ch\u1EE9 kh\u00F4ng ch\u1EC9 \u0111\u1ED5i m\u00E0u: \u0111\u1EC3 th\u1EBB `<a>` cho m\u1ED9t d\u00F2ng kh\u00F4ng d\u1EABn \u0111i \u0111\u00E2u th\u00EC\n  b\u00E0n ph\u00EDm v\u1EABn Tab v\u00E0o v\u00E0 tr\u00ECnh \u0111\u1ECDc m\u00E0n h\u00ECnh v\u1EABn \u0111\u1ECDc l\u00E0 \"li\u00EAn k\u1EBFt\".\n-->\n@if (href() && !disabled()) {\n  <a [href]=\"href()\" [class]=\"rootClasses()\" (click)=\"onClick($event)\">\n    <ng-container [ngTemplateOutlet]=\"ruot\" />\n  </a>\n} @else {\n  <div\n    [class]=\"rootClasses()\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    [attr.role]=\"interactive() && !disabled() ? 'button' : null\"\n    [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n    (click)=\"onClick($event)\"\n    (keydown)=\"onKeyActivate($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"ruot\" />\n  </div>\n}\n\n<ng-template #ruot>\n  <!--\n    Khe `[lead]` \u0111\u00E8 l\u00EAn l\u1ED1i t\u1EAFt `icon`: n\u01A1i g\u1ECDi truy\u1EC1n c\u1EA3 hai th\u00EC khe th\u1EAFng,\n    v\u00EC n\u00F3 c\u1EE5 th\u1EC3 h\u01A1n. Kh\u00F4ng d\u00F9ng `@if` tr\u00EAn `<ng-content>` \u2014 n\u1ED9i dung chi\u1EBFu\n    qua nhi\u1EC1u nh\u00E1nh lo\u1EA1i tr\u1EEB nhau v\u1EABn m\u1EA5t ru\u1ED9t (xem `ol-dropdown`).\n  -->\n  <span class=\"shrink-0 empty:hidden\">\n    <ng-content select=\"[lead]\" />\n\n    <!--\n      L\u1ED1i t\u1EAFt `icon` n\u1EB1m TRONG c\u00F9ng khe `[lead]`, sau n\u1ED9i dung chi\u1EBFu.\n\n      Kh\u00F4ng t\u00E1ch hai `<span>` r\u1ED3i \u1EA9n c\u00E1i sau b\u1EB1ng `:has()`: n\u01A1i g\u1ECDi truy\u1EC1n c\u1EA3\n      hai th\u00EC c\u00F3 hai ph\u1EA7n d\u1EABn \u0111\u1EA7u c\u1EA1nh nhau, m\u00E0 \u0111\u00E2y l\u00E0 ca hi\u1EBFm \u2014 ng\u01B0\u1EDDi vi\u1EBFt ch\u1EC9\n      d\u00F9ng m\u1ED9t trong hai. \u0110\u1EB7t chung m\u1ED9t khe th\u00EC th\u1EE9 t\u1EF1 t\u1EF1 nhi\u00EAn v\u00E0 kh\u00F4ng c\u1EA7n\n      selector CSS n\u00E0o.\n    -->\n    @if (icon()) {\n      <ol-icon [name]=\"icon()\" [size]=\"iconSize()\" class=\"text-body-subtle\" />\n    }\n  </span>\n\n  <span class=\"min-w-0 flex-1\">\n    @if (title()) {\n      <span class=\"block truncate\" [class]=\"titleClasses()\">{{ title() }}</span>\n    }\n    @if (description()) {\n      <span class=\"mt-0.5 block\" [class]=\"descriptionClasses()\">{{ description() }}</span>\n    }\n    <ng-content />\n  </span>\n\n  <span class=\"shrink-0 empty:hidden\">\n    <ng-content select=\"[actions]\" />\n  </span>\n</ng-template>\n", dependencies: [{ kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'ol-item', standalone: true, imports: [OlIcon, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'block' }, template: "<!--\n  `<a>` khi c\u00F3 `href`, `<div>` khi kh\u00F4ng.\n\n  \u0110\u1ED5i th\u1EBB ch\u1EE9 kh\u00F4ng ch\u1EC9 \u0111\u1ED5i m\u00E0u: \u0111\u1EC3 th\u1EBB `<a>` cho m\u1ED9t d\u00F2ng kh\u00F4ng d\u1EABn \u0111i \u0111\u00E2u th\u00EC\n  b\u00E0n ph\u00EDm v\u1EABn Tab v\u00E0o v\u00E0 tr\u00ECnh \u0111\u1ECDc m\u00E0n h\u00ECnh v\u1EABn \u0111\u1ECDc l\u00E0 \"li\u00EAn k\u1EBFt\".\n-->\n@if (href() && !disabled()) {\n  <a [href]=\"href()\" [class]=\"rootClasses()\" (click)=\"onClick($event)\">\n    <ng-container [ngTemplateOutlet]=\"ruot\" />\n  </a>\n} @else {\n  <div\n    [class]=\"rootClasses()\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    [attr.role]=\"interactive() && !disabled() ? 'button' : null\"\n    [attr.tabindex]=\"interactive() && !disabled() ? 0 : null\"\n    (click)=\"onClick($event)\"\n    (keydown)=\"onKeyActivate($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"ruot\" />\n  </div>\n}\n\n<ng-template #ruot>\n  <!--\n    Khe `[lead]` \u0111\u00E8 l\u00EAn l\u1ED1i t\u1EAFt `icon`: n\u01A1i g\u1ECDi truy\u1EC1n c\u1EA3 hai th\u00EC khe th\u1EAFng,\n    v\u00EC n\u00F3 c\u1EE5 th\u1EC3 h\u01A1n. Kh\u00F4ng d\u00F9ng `@if` tr\u00EAn `<ng-content>` \u2014 n\u1ED9i dung chi\u1EBFu\n    qua nhi\u1EC1u nh\u00E1nh lo\u1EA1i tr\u1EEB nhau v\u1EABn m\u1EA5t ru\u1ED9t (xem `ol-dropdown`).\n  -->\n  <span class=\"shrink-0 empty:hidden\">\n    <ng-content select=\"[lead]\" />\n\n    <!--\n      L\u1ED1i t\u1EAFt `icon` n\u1EB1m TRONG c\u00F9ng khe `[lead]`, sau n\u1ED9i dung chi\u1EBFu.\n\n      Kh\u00F4ng t\u00E1ch hai `<span>` r\u1ED3i \u1EA9n c\u00E1i sau b\u1EB1ng `:has()`: n\u01A1i g\u1ECDi truy\u1EC1n c\u1EA3\n      hai th\u00EC c\u00F3 hai ph\u1EA7n d\u1EABn \u0111\u1EA7u c\u1EA1nh nhau, m\u00E0 \u0111\u00E2y l\u00E0 ca hi\u1EBFm \u2014 ng\u01B0\u1EDDi vi\u1EBFt ch\u1EC9\n      d\u00F9ng m\u1ED9t trong hai. \u0110\u1EB7t chung m\u1ED9t khe th\u00EC th\u1EE9 t\u1EF1 t\u1EF1 nhi\u00EAn v\u00E0 kh\u00F4ng c\u1EA7n\n      selector CSS n\u00E0o.\n    -->\n    @if (icon()) {\n      <ol-icon [name]=\"icon()\" [size]=\"iconSize()\" class=\"text-body-subtle\" />\n    }\n  </span>\n\n  <span class=\"min-w-0 flex-1\">\n    @if (title()) {\n      <span class=\"block truncate\" [class]=\"titleClasses()\">{{ title() }}</span>\n    }\n    @if (description()) {\n      <span class=\"mt-0.5 block\" [class]=\"descriptionClasses()\">{{ description() }}</span>\n    }\n    <ng-content />\n  </span>\n\n  <span class=\"shrink-0 empty:hidden\">\n    <ng-content select=\"[actions]\" />\n  </span>\n</ng-template>\n" }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
 class OlBottomNav {
     bordered = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
@@ -15340,13 +17885,13 @@ class OlStepper {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlStepper, isStandalone: true, selector: "ol-stepper", inputs: { currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentStep: "currentStepChange", stepChange: "stepChange" }, host: { classAttribute: "block w-full" }, queries: [{ propertyName: "steps", predicate: OlStepItem, isSignal: true }], ngImport: i0, template: "<div [class]=\"isVertical() ? 'flex flex-col md:flex-row gap-8 w-full' : 'w-full'\">\n  <!-- Stepper Header / Navigation Area -->\n  <div [class]=\"isVertical() ? 'w-full md:w-80 shrink-0' : 'w-full mb-6'\">\n    @if (isMobile()) {\n      <!-- Mobile Layout -->\n      <div class=\"p-4 rounded-md bg-neutral-tertiary/80 border border-default\">\n        <div class=\"flex items-center justify-between mb-2\">\n          <span class=\"text-xs font-semibold text-fg-brand uppercase tracking-wider\">\n            B\u01B0\u1EDBc {{ currentStep() + 1 }} / {{ steps().length }}\n          </span>\n          @if (steps()[currentStep()]; as activeStep) {\n            <span class=\"text-xs text-body-subtle font-medium\">\n              {{ activeStep.title() }}\n            </span>\n          }\n        </div>\n        <!-- Progress Bar -->\n        <div\n          class=\"w-full bg-neutral-tertiary-medium h-2 rounded-full overflow-hidden flex gap-1 p-0.5\"\n        >\n          @for (step of steps(); track step.stepId(); let i = $index) {\n            <div\n              class=\"h-full flex-1 rounded-full transition-all duration-300\"\n              [class.bg-brand]=\"i <= currentStep()\"\n              [class.bg-neutral-tertiary-medium]=\"i > currentStep()\"\n            ></div>\n          }\n        </div>\n      </div>\n    } @else if (variant() === 'cards') {\n      <!-- Cards Variant (Vertical Stack) -->\n      <div class=\"flex flex-col gap-3\" role=\"tablist\" aria-label=\"Ti\u1EBFn tr\u00ECnh c\u00E1c b\u01B0\u1EDBc\">\n        @for (step of steps(); track step.stepId(); let i = $index) {\n          <!--\n            `<button role=\"tab\">` ch\u1EE9 KH\u00D4NG ph\u1EA3i `<div (click)>`. Khung ngo\u00E0i\n            khai `role=\"tablist\"` nh\u01B0ng \u0111o 2026-09-17 b\u00EAn trong c\u00F3 **0\n            `role=\"tab\"` v\u00E0 0 ph\u1EA7n t\u1EED tab t\u1EDBi \u0111\u01B0\u1EE3c** \u2014 `tablist` r\u1ED7ng vai tr\u00F2,\n            v\u00E0 b\u00E0n ph\u00EDm kh\u00F4ng ch\u1ECDn n\u1ED5i b\u01B0\u1EDBc n\u00E0o. Ba bi\u1EBFn th\u1EC3 stepper kh\u00E1c \u0111\u00E3\n            d\u00F9ng `<button>` s\u1EB5n; ch\u1EC9 ri\u00EAng `cards` l\u1EC7ch.\n\n            `w-full` v\u00EC button kh\u00F4ng t\u1EF1 gi\u00E3n nh\u01B0 div.\n          -->\n          <button\n            type=\"button\"\n            role=\"tab\"\n            [attr.aria-selected]=\"step.effectiveState() === 'active'\"\n            [disabled]=\"step.effectiveState() === 'disabled'\"\n            (click)=\"goToStep(i)\"\n            [class]=\"\n              'w-full flex items-center justify-between p-4 rounded-md border transition-all duration-200 text-left ' +\n              (step.effectiveState() === 'disabled'\n                ? 'opacity-50 cursor-not-allowed bg-neutral-secondary-soft border-default text-fg-disabled'\n                : step.effectiveState() === 'active'\n                  ? 'cursor-pointer hover:shadow-xs border-brand-subtle bg-brand-softer shadow-xs ring-2 ring-brand-subtle'\n                  : step.effectiveState() === 'completed'\n                    ? 'cursor-pointer hover:shadow-xs border-brand-subtle bg-brand-softer'\n                    : step.effectiveState() === 'error'\n                      ? 'cursor-pointer hover:shadow-xs border-danger-subtle bg-danger-soft'\n                      : 'cursor-pointer hover:shadow-xs border-default-medium bg-neutral-secondary-medium')\n            \"\n            [attr.aria-label]=\"stepAriaLabel(i)\"\n            [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n          >\n            <div class=\"flex items-center gap-3 min-w-0\">\n              <!-- Left Icon / Step Badge -->\n              <div\n                [class]=\"\n                  'w-9 h-9 rounded-lg flex items-center justify-center shrink-0 font-bold text-xs transition-colors ' +\n                  (step.effectiveState() === 'completed'\n                    ? 'bg-brand-softer text-fg-brand-strong'\n                    : step.effectiveState() === 'active'\n                      ? 'bg-brand-softer text-fg-brand-strong'\n                      : step.effectiveState() === 'error'\n                        ? 'bg-danger-soft text-fg-danger-strong'\n                        : 'bg-neutral-tertiary text-body')\n                \"\n              >\n                @if (step.effectiveState() === 'completed') {\n                  <ol-icon name=\"check\" size=\"xs\"></ol-icon>\n                } @else if (step.effectiveState() === 'error') {\n                  <ol-icon name=\"info-circle\" size=\"xs\"></ol-icon>\n                } @else if (step.icon()) {\n                  <ol-icon [name]=\"step.icon()!\" size=\"xs\"></ol-icon>\n                } @else {\n                  <span>{{ i + 1 }}</span>\n                }\n              </div>\n\n              <!-- Title & Subtitle -->\n              <div class=\"min-w-0\">\n                <div\n                  [class]=\"\n                    'text-sm truncate ' +\n                    (step.effectiveState() === 'active'\n                      ? 'font-bold text-fg-brand-strong '\n                      : step.effectiveState() === 'completed'\n                        ? 'font-semibold text-heading'\n                        : step.effectiveState() === 'error'\n                          ? 'font-semibold text-fg-danger'\n                          : 'font-medium text-body')\n                  \"\n                >\n                  {{ step.title() }}\n                </div>\n                @if (step.badge()) {\n                  <ol-badge size=\"sm\" color=\"brand\" class=\"shrink-0\">{{ step.badge() }}</ol-badge>\n                }\n                @if (step.effectiveSubtitle()) {\n                  <div class=\"text-xs text-fg-disabled truncate\">\n                    {{ step.effectiveSubtitle() }}\n                  </div>\n                }\n              </div>\n            </div>\n\n            <!-- Right Status Icon -->\n            <div class=\"shrink-0 ml-3\">\n              @if (step.effectiveState() === 'completed') {\n                <span class=\"inline-flex items-center gap-1 text-xs font-semibold text-fg-brand\">\n                  <ol-icon name=\"check-circle\" size=\"xs\" color=\"brand\"></ol-icon>\n                  <span class=\"hidden sm:inline\">Ho\u00E0n t\u1EA5t</span>\n                </span>\n              } @else if (step.effectiveState() === 'active') {\n                <span class=\"inline-flex items-center gap-1 text-xs font-semibold text-fg-brand\">\n                  <span class=\"w-2 h-2 rounded-full bg-brand animate-pulse\"></span>\n                  <span class=\"hidden sm:inline\">\u0110ang th\u1EF1c hi\u1EC7n</span>\n                </span>\n              } @else if (step.effectiveState() === 'error') {\n                <span class=\"inline-flex items-center gap-1 text-xs font-semibold text-fg-danger\">\n                  <ol-icon name=\"info-circle\" size=\"xs\" color=\"danger\"></ol-icon>\n                  <span class=\"hidden sm:inline\">L\u1ED7i</span>\n                </span>\n              } @else {\n                <ol-icon name=\"chevron-right\" size=\"xs\" class=\"text-fg-disabled\"></ol-icon>\n              }\n            </div>\n          </button>\n        }\n      </div>\n    } @else if (isVertical()) {\n      <!-- Vertical Variant -->\n      <div class=\"flex flex-col relative\" role=\"tablist\" aria-label=\"Ti\u1EBFn tr\u00ECnh c\u00E1c b\u01B0\u1EDBc\">\n        @for (step of steps(); track step.stepId(); let i = $index) {\n          <div class=\"flex items-start gap-4 relative pb-8 last:pb-0\">\n            <!-- Connecting Vertical Line -->\n            @if (i < steps().length - 1) {\n              <div\n                class=\"absolute left-4.25 top-9 bottom-0 w-0.5 transition-colors duration-200\"\n                [class.bg-brand]=\"i < currentStep()\"\n                [class.bg-neutral-tertiary-medium]=\"i >= currentStep()\"\n              ></div>\n            }\n\n            <!-- Step Circle / Icon Shape -->\n            <button\n              type=\"button\"\n              (click)=\"goToStep(i)\"\n              [disabled]=\"\n                step.effectiveState() === 'disabled' || (linear() && i > currentStep() + 1)\n              \"\n              [class]=\"\n                'w-9 h-9 rounded-full flex items-center justify-center font-bold text-xs transition-all duration-200 shrink-0 z-10 ' +\n                (step.effectiveState() === 'disabled'\n                  ? 'opacity-50 cursor-not-allowed bg-neutral-tertiary text-fg-disabled border border-default'\n                  : step.effectiveState() === 'completed'\n                    ? 'cursor-pointer bg-brand-softer text-fg-brand shadow-xs'\n                    : step.effectiveState() === 'active'\n                      ? 'cursor-pointer border-2 border-brand bg-brand-softer text-fg-brand ring-4 ring-brand-subtle'\n                      : step.effectiveState() === 'error'\n                        ? 'cursor-pointer bg-danger-soft border-2 border-danger text-fg-danger-strong'\n                        : 'cursor-pointer bg-neutral-primary text-body border border-default-strong')\n              \"\n              [attr.aria-label]=\"stepAriaLabel(i)\"\n              [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n            >\n              @if (step.effectiveState() === 'completed') {\n                <ol-icon name=\"check\" size=\"xs\"></ol-icon>\n              } @else if (step.effectiveState() === 'error') {\n                <ol-icon name=\"info-circle\" size=\"xs\" color=\"danger\"></ol-icon>\n              } @else if (step.icon()) {\n                <ol-icon [name]=\"step.icon()!\" size=\"xs\"></ol-icon>\n              } @else {\n                <span>{{ i + 1 }}</span>\n              }\n            </button>\n\n            <!-- Step Title & Subtitle -->\n            <div class=\"text-left pt-1 cursor-pointer\" (click)=\"goToStep(i)\">\n              <div\n                [class]=\"\n                  'text-sm transition-colors ' +\n                  (step.effectiveState() === 'active'\n                    ? 'font-bold text-fg-brand'\n                    : step.effectiveState() === 'completed'\n                      ? 'font-semibold text-heading'\n                      : step.effectiveState() === 'error'\n                        ? 'font-semibold text-fg-danger'\n                        : 'font-medium text-body-subtle')\n                \"\n              >\n                {{ step.title() }}\n              </div>\n              @if (step.badge()) {\n                <ol-badge size=\"sm\" color=\"brand\" class=\"shrink-0\">{{ step.badge() }}</ol-badge>\n              }\n              @if (step.effectiveSubtitle()) {\n                <div class=\"text-xs text-fg-disabled mt-0.5\">\n                  {{ step.effectiveSubtitle() }}\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    } @else {\n      <!-- Horizontal Variants: Default | Only Icons | Icons & Text | With Dots -->\n      <div\n        class=\"flex items-center justify-between w-full relative\"\n        role=\"tablist\"\n        aria-label=\"Ti\u1EBFn tr\u00ECnh c\u00E1c b\u01B0\u1EDBc\"\n      >\n        @for (step of steps(); track step.stepId(); let i = $index) {\n          <div class=\"flex items-center flex-1 last:flex-none relative\">\n            <div class=\"flex items-center gap-3\">\n              @if (variant() === 'with-dots') {\n                <!-- With Dots Variant -->\n                <button\n                  type=\"button\"\n                  (click)=\"goToStep(i)\"\n                  [disabled]=\"\n                    step.effectiveState() === 'disabled' || (linear() && i > currentStep() + 1)\n                  \"\n                  [class]=\"\n                    'flex items-center justify-center transition-all duration-200 shrink-0 cursor-pointer disabled:cursor-not-allowed ' +\n                    (step.effectiveState() === 'disabled'\n                      ? 'w-3.5 h-3.5 rounded-full opacity-50 bg-neutral-primary text-fg-disabled border-2 border-default-medium'\n                      : step.effectiveState() === 'completed'\n                        ? 'w-4 h-4 rounded-full bg-brand text-white'\n                        : step.effectiveState() === 'active'\n                          ? 'w-4 h-4 rounded-full bg-neutral-primary border-2 border-brand-light ring-4 ring-brand-subtle'\n                          : step.effectiveState() === 'error'\n                            ? 'w-4 h-4 rounded-full bg-danger-surface ring-4 ring-danger-subtle'\n                            : 'w-3.5 h-3.5 rounded-full bg-neutral-primary border-2 border-default-medium')\n                  \"\n                  [attr.aria-label]=\"stepAriaLabel(i)\"\n                  [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n                >\n                  @if (step.effectiveState() === 'completed') {\n                    <ol-icon name=\"check\" size=\"xs\" color=\"white\" class=\"scale-75\"></ol-icon>\n                  }\n                </button>\n              } @else if (variant() === 'only-icons' || variant() === 'icons-text') {\n                <!-- Icon Shape Variant -->\n                <button\n                  type=\"button\"\n                  (click)=\"goToStep(i)\"\n                  [disabled]=\"\n                    step.effectiveState() === 'disabled' || (linear() && i > currentStep() + 1)\n                  \"\n                  [class]=\"\n                    'w-10 h-10 rounded-full flex items-center justify-center font-semibold text-sm transition-all duration-200 shrink-0 cursor-pointer disabled:cursor-not-allowed ' +\n                    (step.effectiveState() === 'disabled'\n                      ? 'opacity-50 bg-neutral-tertiary text-fg-disabled'\n                      : step.effectiveState() === 'completed'\n                        ? 'bg-brand-softer text-fg-brand shadow-xs'\n                        : step.effectiveState() === 'active'\n                          ? 'border-2 border-brand bg-brand-softer text-fg-brand ring-4 ring-brand-subtle'\n                          : step.effectiveState() === 'error'\n                            ? 'bg-danger-soft border-2 border-danger text-fg-danger-strong'\n                            : 'bg-neutral-tertiary text-body border border-default')\n                  \"\n                  [attr.aria-label]=\"stepAriaLabel(i)\"\n                  [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n                >\n                  @if (step.effectiveState() === 'completed') {\n                    <ol-icon name=\"check\" size=\"sm\"></ol-icon>\n                  } @else if (step.effectiveState() === 'error') {\n                    <ol-icon name=\"info-circle\" size=\"sm\" color=\"danger\"></ol-icon>\n                  } @else if (step.icon()) {\n                    <ol-icon [name]=\"step.icon()!\" size=\"sm\"></ol-icon>\n                  } @else {\n                    <span>{{ i + 1 }}</span>\n                  }\n                </button>\n              } @else {\n                <!-- Default Variant (Numbered Circle) -->\n                <button\n                  type=\"button\"\n                  (click)=\"goToStep(i)\"\n                  [disabled]=\"\n                    step.effectiveState() === 'disabled' || (linear() && i > currentStep() + 1)\n                  \"\n                  [class]=\"\n                    'w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs transition-all duration-200 shrink-0 cursor-pointer disabled:cursor-not-allowed ' +\n                    (step.effectiveState() === 'disabled'\n                      ? 'opacity-50 bg-neutral-primary text-fg-disabled border border-default'\n                      : step.effectiveState() === 'completed'\n                        ? 'border-2 border-brand bg-brand-softer text-fg-brand shadow-xs'\n                        : step.effectiveState() === 'active'\n                          ? 'border-2 border-brand bg-brand-softer text-fg-brand shadow-xs'\n                          : step.effectiveState() === 'error'\n                            ? 'bg-danger-soft border-2 border-danger text-fg-danger-strong'\n                            : 'bg-neutral-primary text-body border border-default-strong')\n                  \"\n                  [attr.aria-label]=\"stepAriaLabel(i)\"\n                  [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n                >\n                  @if (step.effectiveState() === 'completed') {\n                    <ol-icon name=\"check\" size=\"xs\"></ol-icon>\n                  } @else if (step.effectiveState() === 'error') {\n                    <ol-icon name=\"info-circle\" size=\"xs\" color=\"danger\"></ol-icon>\n                  } @else {\n                    <span>{{ i + 1 }}</span>\n                  }\n                </button>\n              }\n\n              <!-- Text Title & Subtitle (unless only-icons) -->\n              @if (variant() !== 'only-icons') {\n                <div class=\"text-left cursor-pointer\" (click)=\"goToStep(i)\">\n                  <div\n                    [class]=\"\n                      'text-sm transition-colors ' +\n                      (step.effectiveState() === 'active'\n                        ? 'font-bold text-fg-brand'\n                        : step.effectiveState() === 'completed'\n                          ? 'font-semibold text-heading'\n                          : step.effectiveState() === 'error'\n                            ? 'font-semibold text-fg-danger'\n                            : 'font-medium text-body-subtle')\n                    \"\n                  >\n                    {{ step.title() }}\n                  </div>\n                  @if (step.badge()) {\n                    <ol-badge size=\"sm\" color=\"brand\" class=\"shrink-0\">{{ step.badge() }}</ol-badge>\n                  }\n                  @if (step.effectiveSubtitle()) {\n                    <div class=\"text-xs text-fg-disabled hidden md:block\">\n                      {{ step.effectiveSubtitle() }}\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n\n            <!-- Connecting Line (Horizontal) -->\n            @if (i < steps().length - 1) {\n              <div class=\"flex-1 mx-4 h-0.5 bg-neutral-tertiary-medium relative overflow-hidden\">\n                <div\n                  class=\"h-full bg-brand transition-all duration-300\"\n                  [class.w-full]=\"i < currentStep()\"\n                  [class.w-0]=\"i >= currentStep()\"\n                ></div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Stepper Body Content Area -->\n  <div [class]=\"isVertical() ? 'flex-1 min-w-0' : 'w-full'\">\n    <ng-content />\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }, { kind: "component", type: OlBadge, selector: "ol-badge", inputs: ["color", "bordered", "theme", "size", "shape", "rounded", "type", "dot", "leftIcon", "rightIcon", "avatar", "avatarText", "secondaryText", "loading", "removable", "href"], outputs: ["dismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlStepper, isStandalone: true, selector: "ol-stepper", inputs: { currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentStep: "currentStepChange", stepChange: "stepChange" }, host: { classAttribute: "block w-full" }, queries: [{ propertyName: "steps", predicate: OlStepItem, isSignal: true }], ngImport: i0, template: "<div [class]=\"isVertical() ? 'flex flex-col md:flex-row gap-8 w-full' : 'w-full'\">\n  <!-- Stepper Header / Navigation Area -->\n  <div [class]=\"isVertical() ? 'w-full md:w-80 shrink-0' : 'w-full mb-6'\">\n    @if (isMobile()) {\n      <!-- Mobile Layout -->\n      <div class=\"p-4 rounded-md bg-neutral-tertiary/80 border border-default\">\n        <div class=\"flex items-center justify-between mb-2\">\n          <span class=\"text-xs font-semibold text-fg-brand uppercase tracking-wider\">\n            B\u01B0\u1EDBc {{ currentStep() + 1 }} / {{ steps().length }}\n          </span>\n          @if (steps()[currentStep()]; as activeStep) {\n            <span class=\"text-xs text-body-subtle font-medium\">\n              {{ activeStep.title() }}\n            </span>\n          }\n        </div>\n        <!-- Progress Bar -->\n        <div\n          class=\"w-full bg-neutral-tertiary-medium h-2 rounded-full overflow-hidden flex gap-1 p-0.5\"\n        >\n          @for (step of steps(); track step.stepId(); let i = $index) {\n            <div\n              class=\"h-full flex-1 rounded-full transition-all duration-300\"\n              [class.bg-brand]=\"i <= currentStep()\"\n              [class.bg-neutral-tertiary-medium]=\"i > currentStep()\"\n            ></div>\n          }\n        </div>\n      </div>\n    } @else if (variant() === 'cards') {\n      <!-- Cards Variant (Vertical Stack) -->\n      <div class=\"flex flex-col gap-3\" role=\"tablist\" aria-label=\"Ti\u1EBFn tr\u00ECnh c\u00E1c b\u01B0\u1EDBc\">\n        @for (step of steps(); track step.stepId(); let i = $index) {\n          <!--\n            `<button role=\"tab\">` ch\u1EE9 KH\u00D4NG ph\u1EA3i `<div (click)>`. Khung ngo\u00E0i\n            khai `role=\"tablist\"` nh\u01B0ng \u0111o 2026-09-17 b\u00EAn trong c\u00F3 **0\n            `role=\"tab\"` v\u00E0 0 ph\u1EA7n t\u1EED tab t\u1EDBi \u0111\u01B0\u1EE3c** \u2014 `tablist` r\u1ED7ng vai tr\u00F2,\n            v\u00E0 b\u00E0n ph\u00EDm kh\u00F4ng ch\u1ECDn n\u1ED5i b\u01B0\u1EDBc n\u00E0o. Ba bi\u1EBFn th\u1EC3 stepper kh\u00E1c \u0111\u00E3\n            d\u00F9ng `<button>` s\u1EB5n; ch\u1EC9 ri\u00EAng `cards` l\u1EC7ch.\n\n            `w-full` v\u00EC button kh\u00F4ng t\u1EF1 gi\u00E3n nh\u01B0 div.\n          -->\n          <button\n            type=\"button\"\n            role=\"tab\"\n            [attr.aria-selected]=\"step.effectiveState() === 'active'\"\n            [disabled]=\"step.effectiveState() === 'disabled'\"\n            (click)=\"goToStep(i)\"\n            [class]=\"\n              'w-full flex items-center justify-between p-4 rounded-md border transition-all duration-200 text-left ' +\n              (step.effectiveState() === 'disabled'\n                ? 'opacity-50 cursor-not-allowed bg-neutral-secondary-soft border-default text-fg-disabled'\n                : step.effectiveState() === 'active'\n                  ? 'cursor-pointer hover:shadow-xs border-brand-subtle bg-brand-softer shadow-xs ring-2 ring-brand-subtle'\n                  : step.effectiveState() === 'completed'\n                    ? 'cursor-pointer hover:shadow-xs border-brand-subtle bg-brand-softer'\n                    : step.effectiveState() === 'error'\n                      ? 'cursor-pointer hover:shadow-xs border-danger-subtle bg-danger-soft'\n                      : 'cursor-pointer hover:shadow-xs border-default-medium bg-neutral-secondary-medium')\n            \"\n            [attr.aria-label]=\"stepAriaLabel(i)\"\n            [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n          >\n            <div class=\"flex items-center gap-3 min-w-0\">\n              <!-- Left Icon / Step Badge -->\n              <div\n                [class]=\"\n                  'w-9 h-9 rounded-lg flex items-center justify-center shrink-0 font-bold text-xs transition-colors ' +\n                  (step.effectiveState() === 'completed'\n                    ? 'bg-brand-softer text-fg-brand-strong'\n                    : step.effectiveState() === 'active'\n                      ? 'bg-brand-softer text-fg-brand-strong'\n                      : step.effectiveState() === 'error'\n                        ? 'bg-danger-soft text-fg-danger-strong'\n                        : 'bg-neutral-tertiary text-body')\n                \"\n              >\n                @if (step.effectiveState() === 'completed') {\n                  <ol-icon name=\"check\" size=\"xs\"></ol-icon>\n                } @else if (step.effectiveState() === 'error') {\n                  <ol-icon name=\"info-circle\" size=\"xs\"></ol-icon>\n                } @else if (step.icon()) {\n                  <ol-icon [name]=\"step.icon()!\" size=\"xs\"></ol-icon>\n                } @else {\n                  <span>{{ i + 1 }}</span>\n                }\n              </div>\n\n              <!-- Title & Subtitle -->\n              <div class=\"min-w-0\">\n                <div\n                  [class]=\"\n                    'text-sm truncate ' +\n                    (step.effectiveState() === 'active'\n                      ? 'font-bold text-fg-brand-strong '\n                      : step.effectiveState() === 'completed'\n                        ? 'font-semibold text-heading'\n                        : step.effectiveState() === 'error'\n                          ? 'font-semibold text-fg-danger'\n                          : 'font-medium text-body')\n                  \"\n                >\n                  {{ step.title() }}\n                </div>\n                @if (step.badge()) {\n                  <ol-badge size=\"sm\" color=\"brand\" class=\"shrink-0\">{{ step.badge() }}</ol-badge>\n                }\n                @if (step.effectiveSubtitle()) {\n                  <div class=\"text-xs text-fg-disabled truncate\">\n                    {{ step.effectiveSubtitle() }}\n                  </div>\n                }\n              </div>\n            </div>\n\n            <!-- Right Status Icon -->\n            <div class=\"shrink-0 ml-3\">\n              @if (step.effectiveState() === 'completed') {\n                <span class=\"inline-flex items-center gap-1 text-xs font-semibold text-fg-brand\">\n                  <ol-icon name=\"check-circle\" size=\"xs\" color=\"brand\"></ol-icon>\n                  <span class=\"hidden sm:inline\">Ho\u00E0n t\u1EA5t</span>\n                </span>\n              } @else if (step.effectiveState() === 'active') {\n                <span class=\"inline-flex items-center gap-1 text-xs font-semibold text-fg-brand\">\n                  <span class=\"w-2 h-2 rounded-full bg-brand animate-pulse\"></span>\n                  <span class=\"hidden sm:inline\">\u0110ang th\u1EF1c hi\u1EC7n</span>\n                </span>\n              } @else if (step.effectiveState() === 'error') {\n                <span class=\"inline-flex items-center gap-1 text-xs font-semibold text-fg-danger\">\n                  <ol-icon name=\"info-circle\" size=\"xs\" color=\"danger\"></ol-icon>\n                  <span class=\"hidden sm:inline\">L\u1ED7i</span>\n                </span>\n              } @else {\n                <ol-icon name=\"chevron-right\" size=\"xs\" class=\"text-fg-disabled\"></ol-icon>\n              }\n            </div>\n          </button>\n        }\n      </div>\n    } @else if (isVertical()) {\n      <!-- Vertical Variant -->\n      <div class=\"flex flex-col relative\" role=\"tablist\" aria-label=\"Ti\u1EBFn tr\u00ECnh c\u00E1c b\u01B0\u1EDBc\">\n        @for (step of steps(); track step.stepId(); let i = $index) {\n          <div class=\"flex items-start gap-4 relative pb-8 last:pb-0\">\n            <!-- Connecting Vertical Line -->\n            @if (i < steps().length - 1) {\n              <div\n                class=\"absolute left-4.25 top-9 bottom-0 w-0.5 transition-colors duration-200\"\n                [class.bg-brand]=\"i < currentStep()\"\n                [class.bg-neutral-tertiary-medium]=\"i >= currentStep()\"\n              ></div>\n            }\n\n            <!-- Step Circle / Icon Shape -->\n            <button\n              type=\"button\"\n              (click)=\"goToStep(i)\"\n              [disabled]=\"\n                step.effectiveState() === 'disabled' || (linear() && i > currentStep() + 1)\n              \"\n              [class]=\"\n                'w-9 h-9 rounded-full flex items-center justify-center font-bold text-xs transition-all duration-200 shrink-0 z-10 ' +\n                (step.effectiveState() === 'disabled'\n                  ? 'opacity-50 cursor-not-allowed bg-neutral-tertiary text-fg-disabled border border-default'\n                  : step.effectiveState() === 'completed'\n                    ? 'cursor-pointer bg-brand-softer text-fg-brand shadow-xs'\n                    : step.effectiveState() === 'active'\n                      ? 'cursor-pointer border-2 border-brand bg-brand-softer text-fg-brand ring-4 ring-brand-subtle'\n                      : step.effectiveState() === 'error'\n                        ? 'cursor-pointer bg-danger-soft border-2 border-danger text-fg-danger-strong'\n                        : 'cursor-pointer bg-neutral-primary text-body border border-default-strong')\n              \"\n              [attr.aria-label]=\"stepAriaLabel(i)\"\n              [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n            >\n              @if (step.effectiveState() === 'completed') {\n                <ol-icon name=\"check\" size=\"xs\"></ol-icon>\n              } @else if (step.effectiveState() === 'error') {\n                <ol-icon name=\"info-circle\" size=\"xs\" color=\"danger\"></ol-icon>\n              } @else if (step.icon()) {\n                <ol-icon [name]=\"step.icon()!\" size=\"xs\"></ol-icon>\n              } @else {\n                <span>{{ i + 1 }}</span>\n              }\n            </button>\n\n            <!-- Step Title & Subtitle -->\n            <div class=\"text-left pt-1 cursor-pointer\" (click)=\"goToStep(i)\">\n              <div\n                [class]=\"\n                  'text-sm transition-colors ' +\n                  (step.effectiveState() === 'active'\n                    ? 'font-bold text-fg-brand'\n                    : step.effectiveState() === 'completed'\n                      ? 'font-semibold text-heading'\n                      : step.effectiveState() === 'error'\n                        ? 'font-semibold text-fg-danger'\n                        : 'font-medium text-body-subtle')\n                \"\n              >\n                {{ step.title() }}\n              </div>\n              @if (step.badge()) {\n                <ol-badge size=\"sm\" color=\"brand\" class=\"shrink-0\">{{ step.badge() }}</ol-badge>\n              }\n              @if (step.effectiveSubtitle()) {\n                <div class=\"text-xs text-fg-disabled mt-0.5\">\n                  {{ step.effectiveSubtitle() }}\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    } @else {\n      <!--\n        Horizontal Variants: Default | Only Icons | Icons & Text | With Dots\n\n        `overflow-x-auto` tr\u00EAn khung ngo\u00E0i: `breakpoint` l\u00E0 input TH\u1EE6 C\u00D4NG m\u1EB7c\n        \u0111\u1ECBnh `desktop`, kh\u00F4ng t\u1EF1 theo b\u1EC1 r\u1ED9ng m\u00E0n. N\u01A1i g\u1ECDi \u0111\u1EC3 nguy\u00EAn m\u1EB7c \u0111\u1ECBnh m\u00E0\n        ng\u01B0\u1EDDi d\u00F9ng m\u1EDF tr\u00EAn \u0111i\u1EC7n tho\u1EA1i th\u00EC b\u1ED1 c\u1EE5c ngang b\u1ED1n b\u01B0\u1EDBc \u0111o \u0111\u01B0\u1EE3c\n        **x=402 tr\u00EAn viewport 375** \u2014 b\u01B0\u1EDBc cu\u1ED1i n\u1EB1m h\u1EB3n ngo\u00E0i m\u00E9p ph\u1EA3i v\u00E0\n        `<main>` c\u1EE7a trang (`overflow-x: hidden`) C\u1EAET M\u1EA4T n\u00F3, kh\u00F4ng cu\u1ED9n t\u1EDBi\n        \u0111\u01B0\u1EE3c.\n\n        Cho d\u1EA3i n\u00E0y t\u1EF1 cu\u1ED9n ngang th\u00EC b\u01B0\u1EDBc cu\u1ED1i v\u1EABn t\u1EDBi \u0111\u01B0\u1EE3c b\u1EB1ng c\u00E1ch k\u00E9o, v\u00E0\n        tr\u00EAn desktop `justify-between` v\u1EABn d\u00E0n \u0111\u1EC1u nh\u01B0 c\u0169 v\u00EC n\u1ED9i dung v\u1EEBa khung.\n        K\u00E8m `pb-1` \u0111\u1EC3 thanh cu\u1ED9n kh\u00F4ng che \u0111\u01B0\u1EDDng k\u1EBB n\u1ED1i gi\u1EEFa c\u00E1c b\u01B0\u1EDBc.\n      -->\n      <div\n        class=\"flex items-center justify-between w-full relative overflow-x-auto pb-1\"\n        role=\"tablist\"\n        aria-label=\"Ti\u1EBFn tr\u00ECnh c\u00E1c b\u01B0\u1EDBc\"\n      >\n        @for (step of steps(); track step.stepId(); let i = $index) {\n          <div class=\"flex items-center flex-1 last:flex-none relative\">\n            <div class=\"flex items-center gap-3\">\n              @if (variant() === 'with-dots') {\n                <!-- With Dots Variant -->\n                <button\n                  type=\"button\"\n                  (click)=\"goToStep(i)\"\n                  [disabled]=\"\n                    step.effectiveState() === 'disabled' || (linear() && i > currentStep() + 1)\n                  \"\n                  [class]=\"\n                    'flex items-center justify-center transition-all duration-200 shrink-0 cursor-pointer disabled:cursor-not-allowed ' +\n                    (step.effectiveState() === 'disabled'\n                      ? 'w-3.5 h-3.5 rounded-full opacity-50 bg-neutral-primary text-fg-disabled border-2 border-default-medium'\n                      : step.effectiveState() === 'completed'\n                        ? 'w-4 h-4 rounded-full bg-brand text-white'\n                        : step.effectiveState() === 'active'\n                          ? 'w-4 h-4 rounded-full bg-neutral-primary border-2 border-brand-light ring-4 ring-brand-subtle'\n                          : step.effectiveState() === 'error'\n                            ? 'w-4 h-4 rounded-full bg-danger-surface ring-4 ring-danger-subtle'\n                            : 'w-3.5 h-3.5 rounded-full bg-neutral-primary border-2 border-default-medium')\n                  \"\n                  [attr.aria-label]=\"stepAriaLabel(i)\"\n                  [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n                >\n                  @if (step.effectiveState() === 'completed') {\n                    <ol-icon name=\"check\" size=\"xs\" color=\"white\" class=\"scale-75\"></ol-icon>\n                  }\n                </button>\n              } @else if (variant() === 'only-icons' || variant() === 'icons-text') {\n                <!-- Icon Shape Variant -->\n                <button\n                  type=\"button\"\n                  (click)=\"goToStep(i)\"\n                  [disabled]=\"\n                    step.effectiveState() === 'disabled' || (linear() && i > currentStep() + 1)\n                  \"\n                  [class]=\"\n                    'w-10 h-10 rounded-full flex items-center justify-center font-semibold text-sm transition-all duration-200 shrink-0 cursor-pointer disabled:cursor-not-allowed ' +\n                    (step.effectiveState() === 'disabled'\n                      ? 'opacity-50 bg-neutral-tertiary text-fg-disabled'\n                      : step.effectiveState() === 'completed'\n                        ? 'bg-brand-softer text-fg-brand shadow-xs'\n                        : step.effectiveState() === 'active'\n                          ? 'border-2 border-brand bg-brand-softer text-fg-brand ring-4 ring-brand-subtle'\n                          : step.effectiveState() === 'error'\n                            ? 'bg-danger-soft border-2 border-danger text-fg-danger-strong'\n                            : 'bg-neutral-tertiary text-body border border-default')\n                  \"\n                  [attr.aria-label]=\"stepAriaLabel(i)\"\n                  [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n                >\n                  @if (step.effectiveState() === 'completed') {\n                    <ol-icon name=\"check\" size=\"sm\"></ol-icon>\n                  } @else if (step.effectiveState() === 'error') {\n                    <ol-icon name=\"info-circle\" size=\"sm\" color=\"danger\"></ol-icon>\n                  } @else if (step.icon()) {\n                    <ol-icon [name]=\"step.icon()!\" size=\"sm\"></ol-icon>\n                  } @else {\n                    <span>{{ i + 1 }}</span>\n                  }\n                </button>\n              } @else {\n                <!-- Default Variant (Numbered Circle) -->\n                <button\n                  type=\"button\"\n                  (click)=\"goToStep(i)\"\n                  [disabled]=\"\n                    step.effectiveState() === 'disabled' || (linear() && i > currentStep() + 1)\n                  \"\n                  [class]=\"\n                    'w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs transition-all duration-200 shrink-0 cursor-pointer disabled:cursor-not-allowed ' +\n                    (step.effectiveState() === 'disabled'\n                      ? 'opacity-50 bg-neutral-primary text-fg-disabled border border-default'\n                      : step.effectiveState() === 'completed'\n                        ? 'border-2 border-brand bg-brand-softer text-fg-brand shadow-xs'\n                        : step.effectiveState() === 'active'\n                          ? 'border-2 border-brand bg-brand-softer text-fg-brand shadow-xs'\n                          : step.effectiveState() === 'error'\n                            ? 'bg-danger-soft border-2 border-danger text-fg-danger-strong'\n                            : 'bg-neutral-primary text-body border border-default-strong')\n                  \"\n                  [attr.aria-label]=\"stepAriaLabel(i)\"\n                  [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n                >\n                  @if (step.effectiveState() === 'completed') {\n                    <ol-icon name=\"check\" size=\"xs\"></ol-icon>\n                  } @else if (step.effectiveState() === 'error') {\n                    <ol-icon name=\"info-circle\" size=\"xs\" color=\"danger\"></ol-icon>\n                  } @else {\n                    <span>{{ i + 1 }}</span>\n                  }\n                </button>\n              }\n\n              <!-- Text Title & Subtitle (unless only-icons) -->\n              @if (variant() !== 'only-icons') {\n                <div class=\"text-left cursor-pointer\" (click)=\"goToStep(i)\">\n                  <div\n                    [class]=\"\n                      'text-sm transition-colors ' +\n                      (step.effectiveState() === 'active'\n                        ? 'font-bold text-fg-brand'\n                        : step.effectiveState() === 'completed'\n                          ? 'font-semibold text-heading'\n                          : step.effectiveState() === 'error'\n                            ? 'font-semibold text-fg-danger'\n                            : 'font-medium text-body-subtle')\n                    \"\n                  >\n                    {{ step.title() }}\n                  </div>\n                  @if (step.badge()) {\n                    <ol-badge size=\"sm\" color=\"brand\" class=\"shrink-0\">{{ step.badge() }}</ol-badge>\n                  }\n                  @if (step.effectiveSubtitle()) {\n                    <div class=\"text-xs text-fg-disabled hidden md:block\">\n                      {{ step.effectiveSubtitle() }}\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n\n            <!-- Connecting Line (Horizontal) -->\n            @if (i < steps().length - 1) {\n              <div class=\"flex-1 mx-4 h-0.5 bg-neutral-tertiary-medium relative overflow-hidden\">\n                <div\n                  class=\"h-full bg-brand transition-all duration-300\"\n                  [class.w-full]=\"i < currentStep()\"\n                  [class.w-0]=\"i >= currentStep()\"\n                ></div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Stepper Body Content Area -->\n  <div [class]=\"isVertical() ? 'flex-1 min-w-0' : 'w-full'\">\n    <ng-content />\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }, { kind: "component", type: OlBadge, selector: "ol-badge", inputs: ["color", "bordered", "theme", "size", "shape", "rounded", "type", "dot", "leftIcon", "rightIcon", "avatar", "avatarText", "secondaryText", "loading", "removable", "href"], outputs: ["dismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlStepper, decorators: [{
             type: Component,
             args: [{ selector: 'ol-stepper', standalone: true, imports: [CommonModule, OlIcon, OlBadge], host: {
                         class: 'block w-full',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"isVertical() ? 'flex flex-col md:flex-row gap-8 w-full' : 'w-full'\">\n  <!-- Stepper Header / Navigation Area -->\n  <div [class]=\"isVertical() ? 'w-full md:w-80 shrink-0' : 'w-full mb-6'\">\n    @if (isMobile()) {\n      <!-- Mobile Layout -->\n      <div class=\"p-4 rounded-md bg-neutral-tertiary/80 border border-default\">\n        <div class=\"flex items-center justify-between mb-2\">\n          <span class=\"text-xs font-semibold text-fg-brand uppercase tracking-wider\">\n            B\u01B0\u1EDBc {{ currentStep() + 1 }} / {{ steps().length }}\n          </span>\n          @if (steps()[currentStep()]; as activeStep) {\n            <span class=\"text-xs text-body-subtle font-medium\">\n              {{ activeStep.title() }}\n            </span>\n          }\n        </div>\n        <!-- Progress Bar -->\n        <div\n          class=\"w-full bg-neutral-tertiary-medium h-2 rounded-full overflow-hidden flex gap-1 p-0.5\"\n        >\n          @for (step of steps(); track step.stepId(); let i = $index) {\n            <div\n              class=\"h-full flex-1 rounded-full transition-all duration-300\"\n              [class.bg-brand]=\"i <= currentStep()\"\n              [class.bg-neutral-tertiary-medium]=\"i > currentStep()\"\n            ></div>\n          }\n        </div>\n      </div>\n    } @else if (variant() === 'cards') {\n      <!-- Cards Variant (Vertical Stack) -->\n      <div class=\"flex flex-col gap-3\" role=\"tablist\" aria-label=\"Ti\u1EBFn tr\u00ECnh c\u00E1c b\u01B0\u1EDBc\">\n        @for (step of steps(); track step.stepId(); let i = $index) {\n          <!--\n            `<button role=\"tab\">` ch\u1EE9 KH\u00D4NG ph\u1EA3i `<div (click)>`. Khung ngo\u00E0i\n            khai `role=\"tablist\"` nh\u01B0ng \u0111o 2026-09-17 b\u00EAn trong c\u00F3 **0\n            `role=\"tab\"` v\u00E0 0 ph\u1EA7n t\u1EED tab t\u1EDBi \u0111\u01B0\u1EE3c** \u2014 `tablist` r\u1ED7ng vai tr\u00F2,\n            v\u00E0 b\u00E0n ph\u00EDm kh\u00F4ng ch\u1ECDn n\u1ED5i b\u01B0\u1EDBc n\u00E0o. Ba bi\u1EBFn th\u1EC3 stepper kh\u00E1c \u0111\u00E3\n            d\u00F9ng `<button>` s\u1EB5n; ch\u1EC9 ri\u00EAng `cards` l\u1EC7ch.\n\n            `w-full` v\u00EC button kh\u00F4ng t\u1EF1 gi\u00E3n nh\u01B0 div.\n          -->\n          <button\n            type=\"button\"\n            role=\"tab\"\n            [attr.aria-selected]=\"step.effectiveState() === 'active'\"\n            [disabled]=\"step.effectiveState() === 'disabled'\"\n            (click)=\"goToStep(i)\"\n            [class]=\"\n              'w-full flex items-center justify-between p-4 rounded-md border transition-all duration-200 text-left ' +\n              (step.effectiveState() === 'disabled'\n                ? 'opacity-50 cursor-not-allowed bg-neutral-secondary-soft border-default text-fg-disabled'\n                : step.effectiveState() === 'active'\n                  ? 'cursor-pointer hover:shadow-xs border-brand-subtle bg-brand-softer shadow-xs ring-2 ring-brand-subtle'\n                  : step.effectiveState() === 'completed'\n                    ? 'cursor-pointer hover:shadow-xs border-brand-subtle bg-brand-softer'\n                    : step.effectiveState() === 'error'\n                      ? 'cursor-pointer hover:shadow-xs border-danger-subtle bg-danger-soft'\n                      : 'cursor-pointer hover:shadow-xs border-default-medium bg-neutral-secondary-medium')\n            \"\n            [attr.aria-label]=\"stepAriaLabel(i)\"\n            [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n          >\n            <div class=\"flex items-center gap-3 min-w-0\">\n              <!-- Left Icon / Step Badge -->\n              <div\n                [class]=\"\n                  'w-9 h-9 rounded-lg flex items-center justify-center shrink-0 font-bold text-xs transition-colors ' +\n                  (step.effectiveState() === 'completed'\n                    ? 'bg-brand-softer text-fg-brand-strong'\n                    : step.effectiveState() === 'active'\n                      ? 'bg-brand-softer text-fg-brand-strong'\n                      : step.effectiveState() === 'error'\n                        ? 'bg-danger-soft text-fg-danger-strong'\n                        : 'bg-neutral-tertiary text-body')\n                \"\n              >\n                @if (step.effectiveState() === 'completed') {\n                  <ol-icon name=\"check\" size=\"xs\"></ol-icon>\n                } @else if (step.effectiveState() === 'error') {\n                  <ol-icon name=\"info-circle\" size=\"xs\"></ol-icon>\n                } @else if (step.icon()) {\n                  <ol-icon [name]=\"step.icon()!\" size=\"xs\"></ol-icon>\n                } @else {\n                  <span>{{ i + 1 }}</span>\n                }\n              </div>\n\n              <!-- Title & Subtitle -->\n              <div class=\"min-w-0\">\n                <div\n                  [class]=\"\n                    'text-sm truncate ' +\n                    (step.effectiveState() === 'active'\n                      ? 'font-bold text-fg-brand-strong '\n                      : step.effectiveState() === 'completed'\n                        ? 'font-semibold text-heading'\n                        : step.effectiveState() === 'error'\n                          ? 'font-semibold text-fg-danger'\n                          : 'font-medium text-body')\n                  \"\n                >\n                  {{ step.title() }}\n                </div>\n                @if (step.badge()) {\n                  <ol-badge size=\"sm\" color=\"brand\" class=\"shrink-0\">{{ step.badge() }}</ol-badge>\n                }\n                @if (step.effectiveSubtitle()) {\n                  <div class=\"text-xs text-fg-disabled truncate\">\n                    {{ step.effectiveSubtitle() }}\n                  </div>\n                }\n              </div>\n            </div>\n\n            <!-- Right Status Icon -->\n            <div class=\"shrink-0 ml-3\">\n              @if (step.effectiveState() === 'completed') {\n                <span class=\"inline-flex items-center gap-1 text-xs font-semibold text-fg-brand\">\n                  <ol-icon name=\"check-circle\" size=\"xs\" color=\"brand\"></ol-icon>\n                  <span class=\"hidden sm:inline\">Ho\u00E0n t\u1EA5t</span>\n                </span>\n              } @else if (step.effectiveState() === 'active') {\n                <span class=\"inline-flex items-center gap-1 text-xs font-semibold text-fg-brand\">\n                  <span class=\"w-2 h-2 rounded-full bg-brand animate-pulse\"></span>\n                  <span class=\"hidden sm:inline\">\u0110ang th\u1EF1c hi\u1EC7n</span>\n                </span>\n              } @else if (step.effectiveState() === 'error') {\n                <span class=\"inline-flex items-center gap-1 text-xs font-semibold text-fg-danger\">\n                  <ol-icon name=\"info-circle\" size=\"xs\" color=\"danger\"></ol-icon>\n                  <span class=\"hidden sm:inline\">L\u1ED7i</span>\n                </span>\n              } @else {\n                <ol-icon name=\"chevron-right\" size=\"xs\" class=\"text-fg-disabled\"></ol-icon>\n              }\n            </div>\n          </button>\n        }\n      </div>\n    } @else if (isVertical()) {\n      <!-- Vertical Variant -->\n      <div class=\"flex flex-col relative\" role=\"tablist\" aria-label=\"Ti\u1EBFn tr\u00ECnh c\u00E1c b\u01B0\u1EDBc\">\n        @for (step of steps(); track step.stepId(); let i = $index) {\n          <div class=\"flex items-start gap-4 relative pb-8 last:pb-0\">\n            <!-- Connecting Vertical Line -->\n            @if (i < steps().length - 1) {\n              <div\n                class=\"absolute left-4.25 top-9 bottom-0 w-0.5 transition-colors duration-200\"\n                [class.bg-brand]=\"i < currentStep()\"\n                [class.bg-neutral-tertiary-medium]=\"i >= currentStep()\"\n              ></div>\n            }\n\n            <!-- Step Circle / Icon Shape -->\n            <button\n              type=\"button\"\n              (click)=\"goToStep(i)\"\n              [disabled]=\"\n                step.effectiveState() === 'disabled' || (linear() && i > currentStep() + 1)\n              \"\n              [class]=\"\n                'w-9 h-9 rounded-full flex items-center justify-center font-bold text-xs transition-all duration-200 shrink-0 z-10 ' +\n                (step.effectiveState() === 'disabled'\n                  ? 'opacity-50 cursor-not-allowed bg-neutral-tertiary text-fg-disabled border border-default'\n                  : step.effectiveState() === 'completed'\n                    ? 'cursor-pointer bg-brand-softer text-fg-brand shadow-xs'\n                    : step.effectiveState() === 'active'\n                      ? 'cursor-pointer border-2 border-brand bg-brand-softer text-fg-brand ring-4 ring-brand-subtle'\n                      : step.effectiveState() === 'error'\n                        ? 'cursor-pointer bg-danger-soft border-2 border-danger text-fg-danger-strong'\n                        : 'cursor-pointer bg-neutral-primary text-body border border-default-strong')\n              \"\n              [attr.aria-label]=\"stepAriaLabel(i)\"\n              [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n            >\n              @if (step.effectiveState() === 'completed') {\n                <ol-icon name=\"check\" size=\"xs\"></ol-icon>\n              } @else if (step.effectiveState() === 'error') {\n                <ol-icon name=\"info-circle\" size=\"xs\" color=\"danger\"></ol-icon>\n              } @else if (step.icon()) {\n                <ol-icon [name]=\"step.icon()!\" size=\"xs\"></ol-icon>\n              } @else {\n                <span>{{ i + 1 }}</span>\n              }\n            </button>\n\n            <!-- Step Title & Subtitle -->\n            <div class=\"text-left pt-1 cursor-pointer\" (click)=\"goToStep(i)\">\n              <div\n                [class]=\"\n                  'text-sm transition-colors ' +\n                  (step.effectiveState() === 'active'\n                    ? 'font-bold text-fg-brand'\n                    : step.effectiveState() === 'completed'\n                      ? 'font-semibold text-heading'\n                      : step.effectiveState() === 'error'\n                        ? 'font-semibold text-fg-danger'\n                        : 'font-medium text-body-subtle')\n                \"\n              >\n                {{ step.title() }}\n              </div>\n              @if (step.badge()) {\n                <ol-badge size=\"sm\" color=\"brand\" class=\"shrink-0\">{{ step.badge() }}</ol-badge>\n              }\n              @if (step.effectiveSubtitle()) {\n                <div class=\"text-xs text-fg-disabled mt-0.5\">\n                  {{ step.effectiveSubtitle() }}\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    } @else {\n      <!-- Horizontal Variants: Default | Only Icons | Icons & Text | With Dots -->\n      <div\n        class=\"flex items-center justify-between w-full relative\"\n        role=\"tablist\"\n        aria-label=\"Ti\u1EBFn tr\u00ECnh c\u00E1c b\u01B0\u1EDBc\"\n      >\n        @for (step of steps(); track step.stepId(); let i = $index) {\n          <div class=\"flex items-center flex-1 last:flex-none relative\">\n            <div class=\"flex items-center gap-3\">\n              @if (variant() === 'with-dots') {\n                <!-- With Dots Variant -->\n                <button\n                  type=\"button\"\n                  (click)=\"goToStep(i)\"\n                  [disabled]=\"\n                    step.effectiveState() === 'disabled' || (linear() && i > currentStep() + 1)\n                  \"\n                  [class]=\"\n                    'flex items-center justify-center transition-all duration-200 shrink-0 cursor-pointer disabled:cursor-not-allowed ' +\n                    (step.effectiveState() === 'disabled'\n                      ? 'w-3.5 h-3.5 rounded-full opacity-50 bg-neutral-primary text-fg-disabled border-2 border-default-medium'\n                      : step.effectiveState() === 'completed'\n                        ? 'w-4 h-4 rounded-full bg-brand text-white'\n                        : step.effectiveState() === 'active'\n                          ? 'w-4 h-4 rounded-full bg-neutral-primary border-2 border-brand-light ring-4 ring-brand-subtle'\n                          : step.effectiveState() === 'error'\n                            ? 'w-4 h-4 rounded-full bg-danger-surface ring-4 ring-danger-subtle'\n                            : 'w-3.5 h-3.5 rounded-full bg-neutral-primary border-2 border-default-medium')\n                  \"\n                  [attr.aria-label]=\"stepAriaLabel(i)\"\n                  [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n                >\n                  @if (step.effectiveState() === 'completed') {\n                    <ol-icon name=\"check\" size=\"xs\" color=\"white\" class=\"scale-75\"></ol-icon>\n                  }\n                </button>\n              } @else if (variant() === 'only-icons' || variant() === 'icons-text') {\n                <!-- Icon Shape Variant -->\n                <button\n                  type=\"button\"\n                  (click)=\"goToStep(i)\"\n                  [disabled]=\"\n                    step.effectiveState() === 'disabled' || (linear() && i > currentStep() + 1)\n                  \"\n                  [class]=\"\n                    'w-10 h-10 rounded-full flex items-center justify-center font-semibold text-sm transition-all duration-200 shrink-0 cursor-pointer disabled:cursor-not-allowed ' +\n                    (step.effectiveState() === 'disabled'\n                      ? 'opacity-50 bg-neutral-tertiary text-fg-disabled'\n                      : step.effectiveState() === 'completed'\n                        ? 'bg-brand-softer text-fg-brand shadow-xs'\n                        : step.effectiveState() === 'active'\n                          ? 'border-2 border-brand bg-brand-softer text-fg-brand ring-4 ring-brand-subtle'\n                          : step.effectiveState() === 'error'\n                            ? 'bg-danger-soft border-2 border-danger text-fg-danger-strong'\n                            : 'bg-neutral-tertiary text-body border border-default')\n                  \"\n                  [attr.aria-label]=\"stepAriaLabel(i)\"\n                  [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n                >\n                  @if (step.effectiveState() === 'completed') {\n                    <ol-icon name=\"check\" size=\"sm\"></ol-icon>\n                  } @else if (step.effectiveState() === 'error') {\n                    <ol-icon name=\"info-circle\" size=\"sm\" color=\"danger\"></ol-icon>\n                  } @else if (step.icon()) {\n                    <ol-icon [name]=\"step.icon()!\" size=\"sm\"></ol-icon>\n                  } @else {\n                    <span>{{ i + 1 }}</span>\n                  }\n                </button>\n              } @else {\n                <!-- Default Variant (Numbered Circle) -->\n                <button\n                  type=\"button\"\n                  (click)=\"goToStep(i)\"\n                  [disabled]=\"\n                    step.effectiveState() === 'disabled' || (linear() && i > currentStep() + 1)\n                  \"\n                  [class]=\"\n                    'w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs transition-all duration-200 shrink-0 cursor-pointer disabled:cursor-not-allowed ' +\n                    (step.effectiveState() === 'disabled'\n                      ? 'opacity-50 bg-neutral-primary text-fg-disabled border border-default'\n                      : step.effectiveState() === 'completed'\n                        ? 'border-2 border-brand bg-brand-softer text-fg-brand shadow-xs'\n                        : step.effectiveState() === 'active'\n                          ? 'border-2 border-brand bg-brand-softer text-fg-brand shadow-xs'\n                          : step.effectiveState() === 'error'\n                            ? 'bg-danger-soft border-2 border-danger text-fg-danger-strong'\n                            : 'bg-neutral-primary text-body border border-default-strong')\n                  \"\n                  [attr.aria-label]=\"stepAriaLabel(i)\"\n                  [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n                >\n                  @if (step.effectiveState() === 'completed') {\n                    <ol-icon name=\"check\" size=\"xs\"></ol-icon>\n                  } @else if (step.effectiveState() === 'error') {\n                    <ol-icon name=\"info-circle\" size=\"xs\" color=\"danger\"></ol-icon>\n                  } @else {\n                    <span>{{ i + 1 }}</span>\n                  }\n                </button>\n              }\n\n              <!-- Text Title & Subtitle (unless only-icons) -->\n              @if (variant() !== 'only-icons') {\n                <div class=\"text-left cursor-pointer\" (click)=\"goToStep(i)\">\n                  <div\n                    [class]=\"\n                      'text-sm transition-colors ' +\n                      (step.effectiveState() === 'active'\n                        ? 'font-bold text-fg-brand'\n                        : step.effectiveState() === 'completed'\n                          ? 'font-semibold text-heading'\n                          : step.effectiveState() === 'error'\n                            ? 'font-semibold text-fg-danger'\n                            : 'font-medium text-body-subtle')\n                    \"\n                  >\n                    {{ step.title() }}\n                  </div>\n                  @if (step.badge()) {\n                    <ol-badge size=\"sm\" color=\"brand\" class=\"shrink-0\">{{ step.badge() }}</ol-badge>\n                  }\n                  @if (step.effectiveSubtitle()) {\n                    <div class=\"text-xs text-fg-disabled hidden md:block\">\n                      {{ step.effectiveSubtitle() }}\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n\n            <!-- Connecting Line (Horizontal) -->\n            @if (i < steps().length - 1) {\n              <div class=\"flex-1 mx-4 h-0.5 bg-neutral-tertiary-medium relative overflow-hidden\">\n                <div\n                  class=\"h-full bg-brand transition-all duration-300\"\n                  [class.w-full]=\"i < currentStep()\"\n                  [class.w-0]=\"i >= currentStep()\"\n                ></div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Stepper Body Content Area -->\n  <div [class]=\"isVertical() ? 'flex-1 min-w-0' : 'w-full'\">\n    <ng-content />\n  </div>\n</div>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"isVertical() ? 'flex flex-col md:flex-row gap-8 w-full' : 'w-full'\">\n  <!-- Stepper Header / Navigation Area -->\n  <div [class]=\"isVertical() ? 'w-full md:w-80 shrink-0' : 'w-full mb-6'\">\n    @if (isMobile()) {\n      <!-- Mobile Layout -->\n      <div class=\"p-4 rounded-md bg-neutral-tertiary/80 border border-default\">\n        <div class=\"flex items-center justify-between mb-2\">\n          <span class=\"text-xs font-semibold text-fg-brand uppercase tracking-wider\">\n            B\u01B0\u1EDBc {{ currentStep() + 1 }} / {{ steps().length }}\n          </span>\n          @if (steps()[currentStep()]; as activeStep) {\n            <span class=\"text-xs text-body-subtle font-medium\">\n              {{ activeStep.title() }}\n            </span>\n          }\n        </div>\n        <!-- Progress Bar -->\n        <div\n          class=\"w-full bg-neutral-tertiary-medium h-2 rounded-full overflow-hidden flex gap-1 p-0.5\"\n        >\n          @for (step of steps(); track step.stepId(); let i = $index) {\n            <div\n              class=\"h-full flex-1 rounded-full transition-all duration-300\"\n              [class.bg-brand]=\"i <= currentStep()\"\n              [class.bg-neutral-tertiary-medium]=\"i > currentStep()\"\n            ></div>\n          }\n        </div>\n      </div>\n    } @else if (variant() === 'cards') {\n      <!-- Cards Variant (Vertical Stack) -->\n      <div class=\"flex flex-col gap-3\" role=\"tablist\" aria-label=\"Ti\u1EBFn tr\u00ECnh c\u00E1c b\u01B0\u1EDBc\">\n        @for (step of steps(); track step.stepId(); let i = $index) {\n          <!--\n            `<button role=\"tab\">` ch\u1EE9 KH\u00D4NG ph\u1EA3i `<div (click)>`. Khung ngo\u00E0i\n            khai `role=\"tablist\"` nh\u01B0ng \u0111o 2026-09-17 b\u00EAn trong c\u00F3 **0\n            `role=\"tab\"` v\u00E0 0 ph\u1EA7n t\u1EED tab t\u1EDBi \u0111\u01B0\u1EE3c** \u2014 `tablist` r\u1ED7ng vai tr\u00F2,\n            v\u00E0 b\u00E0n ph\u00EDm kh\u00F4ng ch\u1ECDn n\u1ED5i b\u01B0\u1EDBc n\u00E0o. Ba bi\u1EBFn th\u1EC3 stepper kh\u00E1c \u0111\u00E3\n            d\u00F9ng `<button>` s\u1EB5n; ch\u1EC9 ri\u00EAng `cards` l\u1EC7ch.\n\n            `w-full` v\u00EC button kh\u00F4ng t\u1EF1 gi\u00E3n nh\u01B0 div.\n          -->\n          <button\n            type=\"button\"\n            role=\"tab\"\n            [attr.aria-selected]=\"step.effectiveState() === 'active'\"\n            [disabled]=\"step.effectiveState() === 'disabled'\"\n            (click)=\"goToStep(i)\"\n            [class]=\"\n              'w-full flex items-center justify-between p-4 rounded-md border transition-all duration-200 text-left ' +\n              (step.effectiveState() === 'disabled'\n                ? 'opacity-50 cursor-not-allowed bg-neutral-secondary-soft border-default text-fg-disabled'\n                : step.effectiveState() === 'active'\n                  ? 'cursor-pointer hover:shadow-xs border-brand-subtle bg-brand-softer shadow-xs ring-2 ring-brand-subtle'\n                  : step.effectiveState() === 'completed'\n                    ? 'cursor-pointer hover:shadow-xs border-brand-subtle bg-brand-softer'\n                    : step.effectiveState() === 'error'\n                      ? 'cursor-pointer hover:shadow-xs border-danger-subtle bg-danger-soft'\n                      : 'cursor-pointer hover:shadow-xs border-default-medium bg-neutral-secondary-medium')\n            \"\n            [attr.aria-label]=\"stepAriaLabel(i)\"\n            [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n          >\n            <div class=\"flex items-center gap-3 min-w-0\">\n              <!-- Left Icon / Step Badge -->\n              <div\n                [class]=\"\n                  'w-9 h-9 rounded-lg flex items-center justify-center shrink-0 font-bold text-xs transition-colors ' +\n                  (step.effectiveState() === 'completed'\n                    ? 'bg-brand-softer text-fg-brand-strong'\n                    : step.effectiveState() === 'active'\n                      ? 'bg-brand-softer text-fg-brand-strong'\n                      : step.effectiveState() === 'error'\n                        ? 'bg-danger-soft text-fg-danger-strong'\n                        : 'bg-neutral-tertiary text-body')\n                \"\n              >\n                @if (step.effectiveState() === 'completed') {\n                  <ol-icon name=\"check\" size=\"xs\"></ol-icon>\n                } @else if (step.effectiveState() === 'error') {\n                  <ol-icon name=\"info-circle\" size=\"xs\"></ol-icon>\n                } @else if (step.icon()) {\n                  <ol-icon [name]=\"step.icon()!\" size=\"xs\"></ol-icon>\n                } @else {\n                  <span>{{ i + 1 }}</span>\n                }\n              </div>\n\n              <!-- Title & Subtitle -->\n              <div class=\"min-w-0\">\n                <div\n                  [class]=\"\n                    'text-sm truncate ' +\n                    (step.effectiveState() === 'active'\n                      ? 'font-bold text-fg-brand-strong '\n                      : step.effectiveState() === 'completed'\n                        ? 'font-semibold text-heading'\n                        : step.effectiveState() === 'error'\n                          ? 'font-semibold text-fg-danger'\n                          : 'font-medium text-body')\n                  \"\n                >\n                  {{ step.title() }}\n                </div>\n                @if (step.badge()) {\n                  <ol-badge size=\"sm\" color=\"brand\" class=\"shrink-0\">{{ step.badge() }}</ol-badge>\n                }\n                @if (step.effectiveSubtitle()) {\n                  <div class=\"text-xs text-fg-disabled truncate\">\n                    {{ step.effectiveSubtitle() }}\n                  </div>\n                }\n              </div>\n            </div>\n\n            <!-- Right Status Icon -->\n            <div class=\"shrink-0 ml-3\">\n              @if (step.effectiveState() === 'completed') {\n                <span class=\"inline-flex items-center gap-1 text-xs font-semibold text-fg-brand\">\n                  <ol-icon name=\"check-circle\" size=\"xs\" color=\"brand\"></ol-icon>\n                  <span class=\"hidden sm:inline\">Ho\u00E0n t\u1EA5t</span>\n                </span>\n              } @else if (step.effectiveState() === 'active') {\n                <span class=\"inline-flex items-center gap-1 text-xs font-semibold text-fg-brand\">\n                  <span class=\"w-2 h-2 rounded-full bg-brand animate-pulse\"></span>\n                  <span class=\"hidden sm:inline\">\u0110ang th\u1EF1c hi\u1EC7n</span>\n                </span>\n              } @else if (step.effectiveState() === 'error') {\n                <span class=\"inline-flex items-center gap-1 text-xs font-semibold text-fg-danger\">\n                  <ol-icon name=\"info-circle\" size=\"xs\" color=\"danger\"></ol-icon>\n                  <span class=\"hidden sm:inline\">L\u1ED7i</span>\n                </span>\n              } @else {\n                <ol-icon name=\"chevron-right\" size=\"xs\" class=\"text-fg-disabled\"></ol-icon>\n              }\n            </div>\n          </button>\n        }\n      </div>\n    } @else if (isVertical()) {\n      <!-- Vertical Variant -->\n      <div class=\"flex flex-col relative\" role=\"tablist\" aria-label=\"Ti\u1EBFn tr\u00ECnh c\u00E1c b\u01B0\u1EDBc\">\n        @for (step of steps(); track step.stepId(); let i = $index) {\n          <div class=\"flex items-start gap-4 relative pb-8 last:pb-0\">\n            <!-- Connecting Vertical Line -->\n            @if (i < steps().length - 1) {\n              <div\n                class=\"absolute left-4.25 top-9 bottom-0 w-0.5 transition-colors duration-200\"\n                [class.bg-brand]=\"i < currentStep()\"\n                [class.bg-neutral-tertiary-medium]=\"i >= currentStep()\"\n              ></div>\n            }\n\n            <!-- Step Circle / Icon Shape -->\n            <button\n              type=\"button\"\n              (click)=\"goToStep(i)\"\n              [disabled]=\"\n                step.effectiveState() === 'disabled' || (linear() && i > currentStep() + 1)\n              \"\n              [class]=\"\n                'w-9 h-9 rounded-full flex items-center justify-center font-bold text-xs transition-all duration-200 shrink-0 z-10 ' +\n                (step.effectiveState() === 'disabled'\n                  ? 'opacity-50 cursor-not-allowed bg-neutral-tertiary text-fg-disabled border border-default'\n                  : step.effectiveState() === 'completed'\n                    ? 'cursor-pointer bg-brand-softer text-fg-brand shadow-xs'\n                    : step.effectiveState() === 'active'\n                      ? 'cursor-pointer border-2 border-brand bg-brand-softer text-fg-brand ring-4 ring-brand-subtle'\n                      : step.effectiveState() === 'error'\n                        ? 'cursor-pointer bg-danger-soft border-2 border-danger text-fg-danger-strong'\n                        : 'cursor-pointer bg-neutral-primary text-body border border-default-strong')\n              \"\n              [attr.aria-label]=\"stepAriaLabel(i)\"\n              [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n            >\n              @if (step.effectiveState() === 'completed') {\n                <ol-icon name=\"check\" size=\"xs\"></ol-icon>\n              } @else if (step.effectiveState() === 'error') {\n                <ol-icon name=\"info-circle\" size=\"xs\" color=\"danger\"></ol-icon>\n              } @else if (step.icon()) {\n                <ol-icon [name]=\"step.icon()!\" size=\"xs\"></ol-icon>\n              } @else {\n                <span>{{ i + 1 }}</span>\n              }\n            </button>\n\n            <!-- Step Title & Subtitle -->\n            <div class=\"text-left pt-1 cursor-pointer\" (click)=\"goToStep(i)\">\n              <div\n                [class]=\"\n                  'text-sm transition-colors ' +\n                  (step.effectiveState() === 'active'\n                    ? 'font-bold text-fg-brand'\n                    : step.effectiveState() === 'completed'\n                      ? 'font-semibold text-heading'\n                      : step.effectiveState() === 'error'\n                        ? 'font-semibold text-fg-danger'\n                        : 'font-medium text-body-subtle')\n                \"\n              >\n                {{ step.title() }}\n              </div>\n              @if (step.badge()) {\n                <ol-badge size=\"sm\" color=\"brand\" class=\"shrink-0\">{{ step.badge() }}</ol-badge>\n              }\n              @if (step.effectiveSubtitle()) {\n                <div class=\"text-xs text-fg-disabled mt-0.5\">\n                  {{ step.effectiveSubtitle() }}\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    } @else {\n      <!--\n        Horizontal Variants: Default | Only Icons | Icons & Text | With Dots\n\n        `overflow-x-auto` tr\u00EAn khung ngo\u00E0i: `breakpoint` l\u00E0 input TH\u1EE6 C\u00D4NG m\u1EB7c\n        \u0111\u1ECBnh `desktop`, kh\u00F4ng t\u1EF1 theo b\u1EC1 r\u1ED9ng m\u00E0n. N\u01A1i g\u1ECDi \u0111\u1EC3 nguy\u00EAn m\u1EB7c \u0111\u1ECBnh m\u00E0\n        ng\u01B0\u1EDDi d\u00F9ng m\u1EDF tr\u00EAn \u0111i\u1EC7n tho\u1EA1i th\u00EC b\u1ED1 c\u1EE5c ngang b\u1ED1n b\u01B0\u1EDBc \u0111o \u0111\u01B0\u1EE3c\n        **x=402 tr\u00EAn viewport 375** \u2014 b\u01B0\u1EDBc cu\u1ED1i n\u1EB1m h\u1EB3n ngo\u00E0i m\u00E9p ph\u1EA3i v\u00E0\n        `<main>` c\u1EE7a trang (`overflow-x: hidden`) C\u1EAET M\u1EA4T n\u00F3, kh\u00F4ng cu\u1ED9n t\u1EDBi\n        \u0111\u01B0\u1EE3c.\n\n        Cho d\u1EA3i n\u00E0y t\u1EF1 cu\u1ED9n ngang th\u00EC b\u01B0\u1EDBc cu\u1ED1i v\u1EABn t\u1EDBi \u0111\u01B0\u1EE3c b\u1EB1ng c\u00E1ch k\u00E9o, v\u00E0\n        tr\u00EAn desktop `justify-between` v\u1EABn d\u00E0n \u0111\u1EC1u nh\u01B0 c\u0169 v\u00EC n\u1ED9i dung v\u1EEBa khung.\n        K\u00E8m `pb-1` \u0111\u1EC3 thanh cu\u1ED9n kh\u00F4ng che \u0111\u01B0\u1EDDng k\u1EBB n\u1ED1i gi\u1EEFa c\u00E1c b\u01B0\u1EDBc.\n      -->\n      <div\n        class=\"flex items-center justify-between w-full relative overflow-x-auto pb-1\"\n        role=\"tablist\"\n        aria-label=\"Ti\u1EBFn tr\u00ECnh c\u00E1c b\u01B0\u1EDBc\"\n      >\n        @for (step of steps(); track step.stepId(); let i = $index) {\n          <div class=\"flex items-center flex-1 last:flex-none relative\">\n            <div class=\"flex items-center gap-3\">\n              @if (variant() === 'with-dots') {\n                <!-- With Dots Variant -->\n                <button\n                  type=\"button\"\n                  (click)=\"goToStep(i)\"\n                  [disabled]=\"\n                    step.effectiveState() === 'disabled' || (linear() && i > currentStep() + 1)\n                  \"\n                  [class]=\"\n                    'flex items-center justify-center transition-all duration-200 shrink-0 cursor-pointer disabled:cursor-not-allowed ' +\n                    (step.effectiveState() === 'disabled'\n                      ? 'w-3.5 h-3.5 rounded-full opacity-50 bg-neutral-primary text-fg-disabled border-2 border-default-medium'\n                      : step.effectiveState() === 'completed'\n                        ? 'w-4 h-4 rounded-full bg-brand text-white'\n                        : step.effectiveState() === 'active'\n                          ? 'w-4 h-4 rounded-full bg-neutral-primary border-2 border-brand-light ring-4 ring-brand-subtle'\n                          : step.effectiveState() === 'error'\n                            ? 'w-4 h-4 rounded-full bg-danger-surface ring-4 ring-danger-subtle'\n                            : 'w-3.5 h-3.5 rounded-full bg-neutral-primary border-2 border-default-medium')\n                  \"\n                  [attr.aria-label]=\"stepAriaLabel(i)\"\n                  [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n                >\n                  @if (step.effectiveState() === 'completed') {\n                    <ol-icon name=\"check\" size=\"xs\" color=\"white\" class=\"scale-75\"></ol-icon>\n                  }\n                </button>\n              } @else if (variant() === 'only-icons' || variant() === 'icons-text') {\n                <!-- Icon Shape Variant -->\n                <button\n                  type=\"button\"\n                  (click)=\"goToStep(i)\"\n                  [disabled]=\"\n                    step.effectiveState() === 'disabled' || (linear() && i > currentStep() + 1)\n                  \"\n                  [class]=\"\n                    'w-10 h-10 rounded-full flex items-center justify-center font-semibold text-sm transition-all duration-200 shrink-0 cursor-pointer disabled:cursor-not-allowed ' +\n                    (step.effectiveState() === 'disabled'\n                      ? 'opacity-50 bg-neutral-tertiary text-fg-disabled'\n                      : step.effectiveState() === 'completed'\n                        ? 'bg-brand-softer text-fg-brand shadow-xs'\n                        : step.effectiveState() === 'active'\n                          ? 'border-2 border-brand bg-brand-softer text-fg-brand ring-4 ring-brand-subtle'\n                          : step.effectiveState() === 'error'\n                            ? 'bg-danger-soft border-2 border-danger text-fg-danger-strong'\n                            : 'bg-neutral-tertiary text-body border border-default')\n                  \"\n                  [attr.aria-label]=\"stepAriaLabel(i)\"\n                  [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n                >\n                  @if (step.effectiveState() === 'completed') {\n                    <ol-icon name=\"check\" size=\"sm\"></ol-icon>\n                  } @else if (step.effectiveState() === 'error') {\n                    <ol-icon name=\"info-circle\" size=\"sm\" color=\"danger\"></ol-icon>\n                  } @else if (step.icon()) {\n                    <ol-icon [name]=\"step.icon()!\" size=\"sm\"></ol-icon>\n                  } @else {\n                    <span>{{ i + 1 }}</span>\n                  }\n                </button>\n              } @else {\n                <!-- Default Variant (Numbered Circle) -->\n                <button\n                  type=\"button\"\n                  (click)=\"goToStep(i)\"\n                  [disabled]=\"\n                    step.effectiveState() === 'disabled' || (linear() && i > currentStep() + 1)\n                  \"\n                  [class]=\"\n                    'w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs transition-all duration-200 shrink-0 cursor-pointer disabled:cursor-not-allowed ' +\n                    (step.effectiveState() === 'disabled'\n                      ? 'opacity-50 bg-neutral-primary text-fg-disabled border border-default'\n                      : step.effectiveState() === 'completed'\n                        ? 'border-2 border-brand bg-brand-softer text-fg-brand shadow-xs'\n                        : step.effectiveState() === 'active'\n                          ? 'border-2 border-brand bg-brand-softer text-fg-brand shadow-xs'\n                          : step.effectiveState() === 'error'\n                            ? 'bg-danger-soft border-2 border-danger text-fg-danger-strong'\n                            : 'bg-neutral-primary text-body border border-default-strong')\n                  \"\n                  [attr.aria-label]=\"stepAriaLabel(i)\"\n                  [attr.aria-current]=\"step.effectiveState() === 'active' ? 'step' : null\"\n                >\n                  @if (step.effectiveState() === 'completed') {\n                    <ol-icon name=\"check\" size=\"xs\"></ol-icon>\n                  } @else if (step.effectiveState() === 'error') {\n                    <ol-icon name=\"info-circle\" size=\"xs\" color=\"danger\"></ol-icon>\n                  } @else {\n                    <span>{{ i + 1 }}</span>\n                  }\n                </button>\n              }\n\n              <!-- Text Title & Subtitle (unless only-icons) -->\n              @if (variant() !== 'only-icons') {\n                <div class=\"text-left cursor-pointer\" (click)=\"goToStep(i)\">\n                  <div\n                    [class]=\"\n                      'text-sm transition-colors ' +\n                      (step.effectiveState() === 'active'\n                        ? 'font-bold text-fg-brand'\n                        : step.effectiveState() === 'completed'\n                          ? 'font-semibold text-heading'\n                          : step.effectiveState() === 'error'\n                            ? 'font-semibold text-fg-danger'\n                            : 'font-medium text-body-subtle')\n                    \"\n                  >\n                    {{ step.title() }}\n                  </div>\n                  @if (step.badge()) {\n                    <ol-badge size=\"sm\" color=\"brand\" class=\"shrink-0\">{{ step.badge() }}</ol-badge>\n                  }\n                  @if (step.effectiveSubtitle()) {\n                    <div class=\"text-xs text-fg-disabled hidden md:block\">\n                      {{ step.effectiveSubtitle() }}\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n\n            <!-- Connecting Line (Horizontal) -->\n            @if (i < steps().length - 1) {\n              <div class=\"flex-1 mx-4 h-0.5 bg-neutral-tertiary-medium relative overflow-hidden\">\n                <div\n                  class=\"h-full bg-brand transition-all duration-300\"\n                  [class.w-full]=\"i < currentStep()\"\n                  [class.w-0]=\"i >= currentStep()\"\n                ></div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Stepper Body Content Area -->\n  <div [class]=\"isVertical() ? 'flex-1 min-w-0' : 'w-full'\">\n    <ng-content />\n  </div>\n</div>\n" }]
         }], propDecorators: { currentStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStep", required: false }] }, { type: i0.Output, args: ["currentStepChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OlStepItem), { isSignal: true }] }] } });
 
 class OlTreeNodeItem {
@@ -16747,5 +19292,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CHAT_BUBBLE_STATUS, FIELD_ASTERISK, FIELD_DISABLED, FIELD_HEIGHT, FIELD_HELPER, FIELD_HELPER_GAP, FIELD_LABEL, FIELD_LABEL_GAP, FIELD_MIN_HEIGHT, FIELD_PADDING_X, FIELD_RADIUS, FIELD_STATE, FIELD_TEXT, MONTHS_FULL_EN, MONTHS_FULL_VI, MONTHS_SHORT_VI, OlAccordion, OlAccordionItem, OlAlert, OlAlertDialog, OlAppNav, OlAspectRatio, OlAutocomplete, OlAvatar, OlAvatarGroup, OlBackdrop, OlBadge, OlBanner, OlBottomNav, OlBottomNavItem, OlBreadcrumb, OlBreadcrumbItem, OlButton, OlButtonGroup, OlCard, OlCarousel, OlCarouselSlide, OlChart, OlChatBubble, OlChatContainer, OlCheckbox, OlCheckboxRadioForm, OlCheckboxRadioGroup, OlClipboard, OlCollapse, OlCommand, OlDateRangePicker, OlDatepicker, OlDatepickerDirective, OlDatepickerFooter, OlDatepickerHeader, OlDatepickerPopup, OlDatepickerStateService, OlDayView, OlDeviceMockup, OlDownloadAppButton, OlDrawer, OlDrawerFooter, OlDrawerHeader, OlDropdown, OlDropdownHeader, OlDropdownItem, OlEmpty, OlFileInput, OlFloatingLabel, OlFocusTrapService, OlFooter, OlGallery, OlGalleryItem, OlHelper, OlIcon, OlIconService, OlIconShape, OlInput, OlInputCounter, OlJumbotron, OlKbd, OlLabel, OlListGroup, OlListGroupItem, OlLoadingOverlay, OlModal, OlModalFooter, OlModalHeader, OlMonthView, OlNavDropdown, OlNavbar, OlNavbarItem, OlOtpInput, OlOverlayContainer, OlPagination, OlPopover, OlPopoverContent, OlPositioningService, OlProgress, OlProgressBarService, OlProgressBarTop, OlRadio, OlRange, OlRating, OlRichTextEditor, OlScrollArea, OlSelect, OlSeparator, OlSidebar, OlSidebarGroup, OlSidebarItem, OlSidebarSubmenu, OlSkeleton, OlSpeedDial, OlSpeedDialItem, OlSpinner, OlStepItem, OlStepper, OlTabItem, OlTable, OlTableLoading, OlTableRow, OlTabs, OlTagInput, OlTextarea, OlTimeline, OlTimelineItem, OlTimepicker, OlToast, OlToastContainer, OlToastService, OlToggle, OlToggleGroup, OlToggleInput, OlTooltip, OlTooltipDirective, OlTree, OlTreeNodeItem, OlYearView, WEEKDAYS_SHORT_EN, WEEKDAYS_SHORT_VI, boDau, cloneDate, endOfDay, fieldSizeClasses, formatDate, generateMonthMatrix, generateMonthsMatrix, generateYearsMatrix, isBetween, isDateDisabled, isSameDay, isSameMonth, isSameYear, isToday, parseDate, startOfDay, stripDiacritics };
+export { CHAT_BUBBLE_STATUS, FIELD_ASTERISK, FIELD_DISABLED, FIELD_HEIGHT, FIELD_HELPER, FIELD_HELPER_GAP, FIELD_LABEL, FIELD_LABEL_GAP, FIELD_MIN_HEIGHT, FIELD_PADDING_X, FIELD_RADIUS, FIELD_STATE, FIELD_TEXT, FILE_KIND_META, MONTHS_FULL_EN, MONTHS_FULL_VI, MONTHS_SHORT_VI, OlAccordion, OlAccordionItem, OlAlert, OlAlertDialog, OlAppNav, OlAspectRatio, OlAutocomplete, OlAvatar, OlAvatarGroup, OlBackdrop, OlBadge, OlBanner, OlBottomNav, OlBottomNavItem, OlBreadcrumb, OlBreadcrumbItem, OlButton, OlButtonGroup, OlCard, OlCarousel, OlCarouselSlide, OlChart, OlChatBubble, OlChatContainer, OlCheckbox, OlCheckboxRadioForm, OlCheckboxRadioGroup, OlClipboard, OlCollapse, OlCommand, OlDateRangePicker, OlDatepicker, OlDatepickerDirective, OlDatepickerFooter, OlDatepickerHeader, OlDatepickerPopup, OlDatepickerStateService, OlDayView, OlDeviceMockup, OlDownloadAppButton, OlDrawer, OlDrawerFooter, OlDrawerHeader, OlDropdown, OlDropdownHeader, OlDropdownItem, OlEmpty, OlFileDropzone, OlFileInput, OlFileItem, OlFileUpload, OlFloatingLabel, OlFocusTrapService, OlFooter, OlFrame, OlGallery, OlGalleryItem, OlHelper, OlIcon, OlIconService, OlIconShape, OlIconStack, OlImagePreview, OlInput, OlInputCounter, OlItem, OlJumbotron, OlKbd, OlLabel, OlListGroup, OlListGroupItem, OlLoadingOverlay, OlMenubar, OlModal, OlModalFooter, OlModalHeader, OlMonthView, OlNavDropdown, OlNavbar, OlNavbarItem, OlOtpInput, OlOverlayContainer, OlPagination, OlPopover, OlPopoverContent, OlPositioningService, OlProgress, OlProgressBarService, OlProgressBarTop, OlRadio, OlRange, OlRating, OlResizable, OlRichTextEditor, OlScrollArea, OlScrollspy, OlSegmented, OlSelect, OlSeparator, OlSidebar, OlSidebarGroup, OlSidebarItem, OlSidebarSubmenu, OlSkeleton, OlSpeedDial, OlSpeedDialItem, OlSpinner, OlStepItem, OlStepper, OlTabItem, OlTable, OlTableLoading, OlTableRow, OlTabs, OlTagInput, OlTextarea, OlTimeline, OlTimelineItem, OlTimepicker, OlToast, OlToastContainer, OlToastService, OlToggle, OlToggleGroup, OlToggleInput, OlTooltip, OlTooltipDirective, OlTree, OlTreeNodeItem, OlYearView, WEEKDAYS_SHORT_EN, WEEKDAYS_SHORT_VI, boDau, cloneDate, detectFileKind, endOfDay, fieldSizeClasses, fileExtension, filesFromClipboard, formatDate, formatFileSize, generateMonthMatrix, generateMonthsMatrix, generateYearsMatrix, isBetween, isDateDisabled, isEditableTarget, isSameDay, isSameMonth, isSameYear, isToday, matchesAccept, parseDate, pasteShortcutLabel, startOfDay, stripDiacritics, toUploadFile, validateFiles };
 //# sourceMappingURL=edmicro-olkit.mjs.map