@edmicro/olkit 1.1.6 → 1.1.7

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, untracked, ViewChildren, ViewChild, afterNextRender } 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, afterRenderEffect, ViewEncapsulation, 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';
@@ -1683,14 +1683,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  *
  * Phải xử lý `đ`/`Đ` riêng: chúng KHÔNG phải `d` cộng dấu phụ nên `NFD` không
  * tách ra được, `đăng nhập` sẽ không khớp `dang nhap` nếu bỏ bước này.
+ *
+ * Dùng chung cho mọi ô có tìm kiếm (`ol-command`, `ol-select`); `ol-command`
+ * export lại để giữ API công khai từ 1.1.1.
  */
 function stripDiacritics(text) {
-    return text
-        .toLowerCase()
-        .normalize('NFD')
-        .replace(/[\u0300-\u036f]/g, '')
-        .replace(/đ/g, 'd');
+    return text.toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '').replace(/đ/g, 'd');
 }
+
 /**
  * @deprecated Dùng `stripDiacritics`. Giữ lại vì hàm này ĐÃ publish trong
  * `@edmicro/olkit@1.1.1` (kiểm bằng `npm pack` rồi đọc `types/*.d.ts` — có
@@ -5022,6 +5022,74 @@ const FIELD_PADDING_X = {
     lg: 'px-3.5',
     xl: 'px-4',
 };
+/**
+ * `FIELD_PADDING_X` tách hai đầu — cho ô có icon: phần tử ĐẦU TIÊN trong khung
+ * (icon hoặc ô gõ) nhận lề đầu, phần tử CUỐI nhận lề cuối, ở giữa chỉ còn
+ * `FIELD_ICON_GAP`.
+ */
+const FIELD_PADDING_START = {
+    sm: 'ps-2.5',
+    base: 'ps-3',
+    lg: 'ps-3.5',
+    xl: 'ps-4',
+};
+const FIELD_PADDING_END = {
+    sm: 'pe-2.5',
+    base: 'pe-3',
+    lg: 'pe-3.5',
+    xl: 'pe-4',
+};
+/**
+ * Icon ↔ chữ trong khung: 8px, mọi cỡ — Figma `ol-input` (1149:46826) và
+ * `ol-timepicker` (1149:52243) đều `itemSpacing: 8`.
+ *
+ * Chỉ một nguồn tạo khoảng này. Bản cũ của `ol-input` có cả `gap-2` ở khung
+ * lẫn `ps-2.5`/`pe-2.5` ở ô gõ → icon cách chữ 18px (đo 2026-09-29).
+ */
+const FIELD_ICON_GAP = 'gap-2';
+/**
+ * Đệm dọc của khung CHỌN NHIỀU (chip cao 24px). Nhãn nổi Bordered nằm vắt
+ * qua viền trên, nửa dưới lấn vào khung ~10px — đệm 4px thường lệ để chip
+ * nằm dưới chữ nhãn (đo 2026-09-29: đè 3px, 32/96 ô). Chừa 10px thì một
+ * dòng chip vẫn cao đúng 40px: 1 + 10 + 24 + 4 + 1.
+ */
+function multiValuePadY(floatingOutlined) {
+    return floatingOutlined ? 'pt-2.5 pb-1' : 'py-1';
+}
+/**
+ * Chỗ dành cho icon 16px nằm `absolute` ở đầu/cuối khung: lề cỡ + 16px +
+ * `FIELD_ICON_GAP` 8px. Dùng khi icon ra khỏi luồng (select, autocomplete
+ * chọn nhiều) nên khung phải tự chừa chỗ.
+ */
+const FIELD_ICON_RESERVE_START = {
+    sm: 'ps-8.5',
+    base: 'ps-9',
+    lg: 'ps-9.5',
+    xl: 'ps-10',
+};
+const FIELD_ICON_RESERVE_END = {
+    sm: 'pe-8.5',
+    base: 'pe-9',
+    lg: 'pe-9.5',
+    xl: 'pe-10',
+};
+/** Chỗ cho nút xoá 14px (`close` cỡ xs) nằm `absolute` cuối ô: lề cỡ + 14 + 8. */
+const FIELD_CLEAR_RESERVE_END = {
+    sm: 'pe-8',
+    base: 'pe-8.5',
+    lg: 'pe-9',
+    xl: 'pe-9.5',
+};
+/**
+ * Như `FIELD_ICON_RESERVE_START` nhưng cho icon lịch của datepicker, vốn to
+ * theo cỡ ô (14 / 16 / 20 / 20px): lề cỡ + icon + 8px = 32 / 36 / 42 / 44.
+ */
+const PICKER_ICON_RESERVE_START = {
+    sm: 'ps-8',
+    base: 'ps-9',
+    lg: 'ps-10.5',
+    xl: 'ps-11',
+};
 /**
  * Cỡ chữ theo cỡ ô.
  *
@@ -5067,6 +5135,24 @@ const FIELD_RADIUS = 'rounded-md';
 const FIELD_LABEL = 'inline-flex items-center gap-1 text-sm font-medium text-heading';
 /** Khoảng cách nhãn → ô. */
 const FIELD_LABEL_GAP = 'mb-1.5';
+/**
+ * Khung ngoài của host khi nhãn `left`: lưới 2 cột. Cột 1 = nhãn, rộng theo
+ * `--ol-label-w` (input `labelWidth`, mặc định 8rem). Cột 2 = mọi thứ còn lại
+ * — khung nhập, dòng gợi ý/lỗi — nên chữ lỗi thẳng mép ô, không chui xuống
+ * dưới nhãn. `[&>ol-field-label]` cụ thể hơn `[&>*]` nên nhãn thắng cột.
+ */
+const FIELD_LABEL_BESIDE = 'grid grid-cols-[var(--ol-label-w,8rem)_minmax(0,1fr)] items-start gap-x-3 [&>*]:col-start-2 [&>ol-field-label]:col-start-1 [&>ol-field-label]:row-start-1';
+/** Lớp khung ngoài theo vị trí nhãn — rỗng khi nhãn trên hoặc nhãn nổi. */
+function fieldLabelLayout(position, floating) {
+    if (floating)
+        return '';
+    switch (position) {
+        case 'left':
+            return FIELD_LABEL_BESIDE;
+        case 'top':
+            return '';
+    }
+}
 /** Dấu sao bắt buộc. */
 const FIELD_ASTERISK = 'text-fg-danger font-bold';
 /**
@@ -5091,6 +5177,422 @@ const FIELD_HELPER_GAP = 'mt-1.5';
 function fieldSizeClasses(size) {
     return [FIELD_HEIGHT[size], FIELD_PADDING_X[size], FIELD_TEXT[size], FIELD_RADIUS].join(' ');
 }
+/**
+ * Vị trí ngang của nhãn KHI NỔI (px) = đệm ngang của ô (`FIELD_PADDING_X`) —
+ * Figma đặt nhãn nổi thẳng mép chữ, kể cả khi có icon đầu (nhãn nổi lên trên
+ * cột icon). Phải là SỐ vì nhãn đặt bằng `style.left`, cùng hệ với vị trí nằm
+ * yên (đo lúc chạy).
+ */
+const FLOAT_LABEL_START = { sm: 10, base: 12, lg: 14, xl: 16 };
+
+/** `px-1` của nhãn, px. */
+const LABEL_PAD_X = 4;
+/**
+ * Khung nhãn nổi DÙNG CHUNG cho mọi ô nhập — bọc quanh khung nhập của host.
+ *
+ * Host chỉ phải: (1) gắn class `ol-field-box` cho khung nhập, (2) báo
+ * `hasValue`/`open`. Khung tự lo phần còn lại:
+ *
+ * - **Focus**: nghe `focusin`/`focusout` trên chính nó — kể cả combobox là `div`.
+ * - **Vị trí nhãn nằm yên**: ĐO vị trí thật của ô chữ bên trong
+ *   (`input`/`textarea`/`[data-ol-field-text]`) thay vì mỗi host tự khai toạ độ.
+ *   Icon đầu, addon, chip, textarea nhiều dòng đều tự đúng.
+ * - **Kiểu khung**: đè class của `.ol-field-box` theo kiểu (viền/gạch chân/nền).
+ * - **Placeholder**: ẩn tới khi nhãn nổi — hai chữ cùng chỗ là chồng nhau.
+ *
+ * Tắt (`enabled = false`) thì khung trong suốt: chỉ chiếu nội dung, không nhãn,
+ * không đè class — host giữ nguyên giao diện cũ.
+ *
+ * Số đo theo Figma `ol-floating-label` #1149:50454: nhãn luôn 14px/20px ở mọi
+ * cỡ; Bordered nổi ở `top: -10px` (tâm nhãn trên viền); hai kiểu kia nổi thành
+ * hàng 20px phía trên khung.
+ *
+ * LỆCH FIGMA CÓ CHỦ Ý: Figma cho `filled`/`standard` cao thêm 20px KHI focus
+ * (khung Initial 40px, Focus 60px) — form nhảy xuống mỗi lần bấm vào ô. Ở đây
+ * hàng nhãn luôn giữ sẵn (`pt-5`), khung không đổi cao.
+ */
+class OlFieldFrame {
+    /** Bật nhãn nổi. Tắt thì khung trong suốt. */
+    enabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Id của ô nhập — `<label for>`; combobox `div` thì bấm nhãn tự focus. */
+    forId = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "forId" }] : /* istanbul ignore next */ []));
+    /** Id của nhãn — cho host nối `aria-labelledby` (combobox không nhận `for`). */
+    labelId = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    variant = input('outlined', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('base', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    state = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Ô có giá trị — nhãn nổi. **`0` là có giá trị**, host tự xét. */
+    hasValue = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /** Bảng chọn đang mở (select, picker) — nhãn nổi dù chưa chọn gì. */
+    open = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /**
+     * Vị trí ngang của nhãn KHI NỔI (px), ghi đè bảng theo cỡ. Cho host có đệm
+     * riêng ngoài thang `FIELD_PADDING_X` — `ol-textarea` không có cỡ, đệm 14px.
+     */
+    floatStart = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatStart" }] : /* istanbul ignore next */ []));
+    focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    /** Trình duyệt vừa tự điền ô — xem chú thích `styles`. Người dùng gõ là tắt. */
+    autofilled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autofilled" }] : /* istanbul ignore next */ []));
+    floated = computed(() => this.focused() || this.hasValue() || this.open() || this.autofilled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floated" }] : /* istanbul ignore next */ []));
+    /** Vị trí nhãn nằm yên, đo từ ô chữ bên trong (px, so với khung). */
+    restX = signal(12, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "restX" }] : /* istanbul ignore next */ []));
+    restY = signal(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "restY" }] : /* istanbul ignore next */ []));
+    /**
+     * Đã đo xong lần đầu. `transition` chỉ bật SAU đó: bật từ đầu thì mỗi lần
+     * ô hiện ra (tải trang, mở modal, đổi tab) nhãn TRƯỢT từ vị trí mặc định tới
+     * chỗ thật — e2e bắt được lệch 9–14px ngay sau khi vẽ.
+     */
+    ready = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    constructor() {
+        afterRenderEffect(() => {
+            // Đo lại mỗi khi bật/tắt hoặc đổi nổi/yên: icon, chip đổi chỗ ô chữ.
+            this.enabled();
+            this.floated();
+            this.size();
+            this.variant();
+            this.measure();
+        });
+        if (typeof ResizeObserver !== 'undefined') {
+            const observer = new ResizeObserver(() => this.measure());
+            observer.observe(this.host.nativeElement);
+            inject(DestroyRef).onDestroy(() => observer.disconnect());
+        }
+    }
+    shellClasses = computed(() => {
+        if (!this.enabled())
+            return '';
+        const variant = this.variant();
+        // Đè class của khung host. `!` vì host đặt nền/viền bằng class thường và
+        // hai bên cùng @layer utilities — thứ tự trong file CSS không đoán được.
+        const box = '[&_.ol-field-box]:ring-0! [&_.ol-field-box]:shadow-none!';
+        const placeholder = this.floated()
+            ? ''
+            : ' [&_input]:placeholder:text-transparent [&_textarea]:placeholder:text-transparent [&_[data-ol-field-placeholder]]:invisible';
+        const underline = '[&_.ol-field-box]:border-0! [&_.ol-field-box]:border-b-2! [&_.ol-field-box]:rounded-none!';
+        switch (variant) {
+            case 'outlined': {
+                // Figma Bordered: nền trắng MỌI trạng thái, trạng thái chỉ đổi màu viền.
+                const bg = this.disabled() ? '' : ' [&_.ol-field-box]:bg-neutral-primary!';
+                return `relative ${box}${bg}${placeholder}`;
+            }
+            case 'filled': {
+                // Nền phủ cả hàng nhãn KHI nổi; nằm yên thì chỉ phủ khung nhập — đúng
+                // Figma Initial (một khối xám cao bằng ô) mà không đổi chiều cao.
+                const fill = FILL_BG[this.state()];
+                const where = this.floated()
+                    ? ` ${fill.shell} rounded-t-lg [&_.ol-field-box]:bg-transparent!`
+                    : ` ${fill.box} [&_.ol-field-box]:rounded-t-lg!`;
+                return `relative pt-5 transition-colors ${box} ${underline}${where}${placeholder}`;
+            }
+            case 'standard':
+                // Chỉ gạch chân, không nền.
+                return `relative pt-5 ${box} ${underline} [&_.ol-field-box]:bg-transparent!${placeholder}`;
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []));
+    labelClasses = computed(() => {
+        const motion = this.ready() ? ' transition-[top,left,color] duration-150 ease-out' : '';
+        const base = `absolute z-10 px-1 max-w-[calc(100%-1.5rem)] truncate whitespace-nowrap text-sm leading-5 font-normal cursor-text select-none${motion}`;
+        const color = this.disabled()
+            ? 'text-fg-disabled'
+            : this.state() === 'error'
+                ? 'text-fg-danger'
+                : this.state() === 'success'
+                    ? 'text-fg-success'
+                    : this.floated() && this.focused()
+                        ? 'text-fg-brand'
+                        : 'text-body-subtle';
+        return `${base} ${color}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
+    /**
+     * Nền cắt viền của nhãn nổi Bordered. Nhãn nằm VẮT NGANG viền: nửa trên trên
+     * nền trang, nửa dưới trên nền khung nhập — một màu duy nhất sai ở một nửa
+     * khi hai nền khác nhau (ô khoá nền xám, ô đặt trên nền màu). Gradient cắt
+     * đôi đúng giữa: trên = `--ol-field-surface` (nơi gọi báo), dưới = nền khung.
+     */
+    cutout = computed(() => {
+        if (this.variant() !== 'outlined' || !this.floated())
+            return null;
+        const page = 'var(--ol-field-surface, var(--color-neutral-primary))';
+        // Khung khoá mang `opacity-60` → màu THẤY ĐƯỢC là xám khoá pha 60% với nền
+        // trang, không phải `--color-disabled` nguyên màu (đo: lộ mảng xám đậm hơn).
+        const box = this.disabled()
+            ? `color-mix(in srgb, var(--color-disabled) 60%, ${page})`
+            : 'var(--color-neutral-primary)';
+        return `linear-gradient(to bottom, ${page} 50%, ${box} 50%)`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cutout" }] : /* istanbul ignore next */ []));
+    /**
+     * Nhãn có `px-1` để nền cắt viền (Bordered) chừa 4px hai bên chữ — không có
+     * thì đường viền chạm sát chữ. Lùi `left` đúng 4px để CHỮ vẫn thẳng mép chữ
+     * trong ô. Đệm có ở mọi trạng thái (không bật/tắt theo `floated`) để chữ
+     * không giật 4px lúc nhãn trượt lên.
+     */
+    labelLeft = computed(() => (this.floated() ? this.floatX() : this.restX()) - LABEL_PAD_X, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelLeft" }] : /* istanbul ignore next */ []));
+    /**
+     * Vị trí nổi = đệm ô, tính từ mép TRONG viền. Bordered có viền trái 1px nên
+     * cộng 1 — thiếu thì chữ nhãn lệch trái 1px so với chữ trong ô (đo
+     * 2026-09-29: 20/20 ô). Filled/Standard không có viền hai bên.
+     */
+    floatX = computed(() => (this.floatStart() ?? FLOAT_LABEL_START[this.size()]) +
+        (this.variant() === 'outlined' ? 1 : 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatX" }] : /* istanbul ignore next */ []));
+    labelTop = computed(() => {
+        if (!this.floated())
+            return this.restY();
+        return this.variant() === 'outlined' ? -10 : 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelTop" }] : /* istanbul ignore next */ []));
+    onAnimationStart(event) {
+        if (event.animationName === 'ol-field-autofill')
+            this.autofilled.set(true);
+    }
+    onFocusOut(event) {
+        // Focus chuyển giữa hai phần tử TRONG khung (ô → nút xoá) thì vẫn là focus.
+        const next = event.relatedTarget;
+        if (next && this.host.nativeElement.contains(next))
+            return;
+        this.focused.set(false);
+    }
+    /** Combobox là `div` — `<label for>` không focus được nó, tự làm. */
+    focusControl() {
+        const id = this.forId();
+        const target = id ? document.getElementById(id) : null;
+        if (target && target !== document.activeElement)
+            target.focus();
+    }
+    /**
+     * Nhãn nằm yên đặt đúng chỗ chữ sẽ hiện: mép trái = mép chữ của ô (tính cả
+     * đệm trái), giữa theo chiều dọc = giữa DÒNG ĐẦU. Textarea: dòng đầu nằm
+     * sau đệm trên, không phải giữa khung.
+     */
+    measure() {
+        if (!this.enabled())
+            return;
+        const root = this.host.nativeElement;
+        const text = root.querySelector('[data-ol-field-text], input:not([type=hidden]):not([type=file]), textarea');
+        if (!text)
+            return;
+        const frame = root.getBoundingClientRect();
+        const r = text.getBoundingClientRect();
+        if (!r.width && !r.height)
+            return;
+        const cs = getComputedStyle(text);
+        const padLeft = parseFloat(cs.paddingLeft) || 0;
+        const x = r.left - frame.left + padLeft;
+        const lineMid = text.tagName === 'TEXTAREA'
+            ? r.top -
+                frame.top +
+                (parseFloat(cs.paddingTop) || 0) +
+                (parseFloat(cs.lineHeight) || 20) / 2
+            : r.top - frame.top + r.height / 2;
+        const y = lineMid - 10; // nhãn cao 20px
+        if (Math.abs(x - this.restX()) > 0.5)
+            this.restX.set(Math.round(x));
+        if (Math.abs(y - this.restY()) > 0.5)
+            this.restY.set(Math.round(y));
+        // Bật chuyển động ở khung hình SAU — để vị trí đo được áp ngay, không trượt.
+        if (!this.ready())
+            requestAnimationFrame(() => this.ready.set(true));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFieldFrame, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlFieldFrame, isStandalone: true, selector: "ol-field-frame", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, forId: { classPropertyName: "forId", publicName: "forId", isSignal: true, isRequired: false, transformFunction: null }, labelId: { classPropertyName: "labelId", publicName: "labelId", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hasValue: { classPropertyName: "hasValue", publicName: "hasValue", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, floatStart: { classPropertyName: "floatStart", publicName: "floatStart", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block w-full" }, ngImport: i0, template: `
+    <div
+      [class]="shellClasses()"
+      [attr.data-floated]="enabled() && floated() ? '' : null"
+      (focusin)="focused.set(true)"
+      (focusout)="onFocusOut($event)"
+      (animationstart)="onAnimationStart($event)"
+      (input)="autofilled.set(false)"
+    >
+      <ng-content />
+      @if (enabled() && label()) {
+        <label
+          [attr.for]="forId() || null"
+          [attr.id]="labelId() || null"
+          [class]="labelClasses()"
+          [style.left.px]="labelLeft()"
+          [style.top.px]="labelTop()"
+          [style.background]="cutout()"
+          (click)="focusControl()"
+        >
+          {{ label() }}
+          @if (required()) {
+            <span class="text-fg-danger" aria-hidden="true">*</span>
+          }
+        </label>
+      }
+    </div>
+  `, isInline: true, styles: ["ol-field-frame input:-webkit-autofill,ol-field-frame input:autofill{animation:ol-field-autofill 1ms}@keyframes ol-field-autofill{0%{opacity:1}to{opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFieldFrame, decorators: [{
+            type: Component,
+            args: [{ selector: 'ol-field-frame', standalone: true, template: `
+    <div
+      [class]="shellClasses()"
+      [attr.data-floated]="enabled() && floated() ? '' : null"
+      (focusin)="focused.set(true)"
+      (focusout)="onFocusOut($event)"
+      (animationstart)="onAnimationStart($event)"
+      (input)="autofilled.set(false)"
+    >
+      <ng-content />
+      @if (enabled() && label()) {
+        <label
+          [attr.for]="forId() || null"
+          [attr.id]="labelId() || null"
+          [class]="labelClasses()"
+          [style.left.px]="labelLeft()"
+          [style.top.px]="labelTop()"
+          [style.background]="cutout()"
+          (click)="focusControl()"
+        >
+          {{ label() }}
+          @if (required()) {
+            <span class="text-fg-danger" aria-hidden="true">*</span>
+          }
+        </label>
+      }
+    </div>
+  `, encapsulation: ViewEncapsulation.None, host: { class: 'block w-full' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["ol-field-frame input:-webkit-autofill,ol-field-frame input:autofill{animation:ol-field-autofill 1ms}@keyframes ol-field-autofill{0%{opacity:1}to{opacity:1}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "enabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], forId: [{ type: i0.Input, args: [{ isSignal: true, alias: "forId", required: false }] }], labelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelId", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hasValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasValue", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], floatStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatStart", required: false }] }] } });
+/**
+ * Nền kiểu `filled` theo trạng thái — Figma With background: lỗi nền hồng,
+ * thành công nền xanh. Chuỗi viết nguyên văn để Tailwind sinh CSS.
+ */
+const FILL_BG = {
+    default: {
+        shell: 'bg-neutral-secondary-medium',
+        box: '[&_.ol-field-box]:bg-neutral-secondary-medium!',
+    },
+    error: { shell: 'bg-danger-soft', box: '[&_.ol-field-box]:bg-danger-soft!' },
+    success: { shell: 'bg-success-soft', box: '[&_.ol-field-box]:bg-success-soft!' },
+};
+
+/**
+ * Nhãn PHÍA TRÊN ô nhập — dùng chung cho mọi ô của họ form.
+ *
+ * Trước đây tám component tự chép tay cùng một đoạn markup (khối `div` +
+ * `<label>` + dấu `*` + icon trợ giúp), và nó trôi thành ba phiên bản:
+ * `inline-flex … mb-1.5` (input, textarea, select, autocomplete, timepicker),
+ * `block mb-1.5` (tag-input), `flex` trong khung `gap-1.5` (datepicker, khoảng
+ * ngày). Class lấy từ `FIELD_LABEL` / `FIELD_LABEL_GAP` / `FIELD_ASTERISK` —
+ * ba token sinh ra để dùng chung nhưng chưa ô nào dùng.
+ *
+ * Nhãn NỔI (trong khung) là việc của `OlFieldFrame`; hai thứ loại trừ nhau.
+ *
+ * `beside`: nhãn đứng BÊN TRÁI ô (host đặt `labelPosition="left"`, khung
+ * ngoài là lưới `FIELD_LABEL_BESIDE`). Hàng nhãn cao bằng ô theo cỡ để chữ
+ * căn giữa dọc với ô một dòng; chữ dài xuống dòng trong cột nhãn.
+ */
+class OlFieldLabel {
+    text = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Id ô nhập — `<label for>`. */
+    forId = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "forId" }] : /* istanbul ignore next */ []));
+    /** Id của nhãn — cho combobox `div` nối `aria-labelledby` (không nhận `for`). */
+    labelId = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Icon `?` cạnh nhãn, kèm `helpTooltip` khi rê chuột. */
+    helpIcon = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "helpIcon" }] : /* istanbul ignore next */ []));
+    helpTooltip = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "helpTooltip" }] : /* istanbul ignore next */ []));
+    /**
+     * Bỏ lề dưới — cho host đặt nhãn trong khung `flex-col gap-1.5` (datepicker,
+     * khoảng ngày): khung đã tạo khoảng cách, thêm `mb-1.5` là thành 12px.
+     */
+    flush = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flush" }] : /* istanbul ignore next */ []));
+    /** Nhãn bên trái ô, cùng hàng. */
+    beside = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "beside" }] : /* istanbul ignore next */ []));
+    /** Cỡ ô — chỉ dùng khi `beside`, để hàng nhãn cao bằng ô. */
+    size = input('base', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    labelClasses = FIELD_LABEL;
+    asteriskClasses = FIELD_ASTERISK;
+    rowClasses = computed(() => {
+        if (this.beside())
+            return `flex items-center ${FIELD_MIN_HEIGHT[this.size()]}`;
+        return `flex items-center justify-between${this.flush() ? '' : ` ${FIELD_LABEL_GAP}`}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFieldLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlFieldLabel, isStandalone: true, selector: "ol-field-label", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, forId: { classPropertyName: "forId", publicName: "forId", isSignal: true, isRequired: false, transformFunction: null }, labelId: { classPropertyName: "labelId", publicName: "labelId", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, helpIcon: { classPropertyName: "helpIcon", publicName: "helpIcon", isSignal: true, isRequired: false, transformFunction: null }, helpTooltip: { classPropertyName: "helpTooltip", publicName: "helpTooltip", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, beside: { classPropertyName: "beside", publicName: "beside", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div [class]="rowClasses()">
+      <label [attr.for]="forId() || null" [attr.id]="labelId() || null" [class]="labelClasses">
+        <span>{{ text() }}</span>
+        @if (required()) {
+          <span [class]="asteriskClasses">*</span>
+        }
+        @if (helpIcon()) {
+          <span
+            class="inline-flex cursor-help items-center text-body-subtle hover:text-heading"
+            [title]="helpTooltip() || 'Trợ giúp'"
+          >
+            <ol-icon name="question-circle" size="xs" />
+          </span>
+        }
+      </label>
+    </div>
+  `, 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: OlFieldLabel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-field-label',
+                    standalone: true,
+                    imports: [OlIcon],
+                    template: `
+    <div [class]="rowClasses()">
+      <label [attr.for]="forId() || null" [attr.id]="labelId() || null" [class]="labelClasses">
+        <span>{{ text() }}</span>
+        @if (required()) {
+          <span [class]="asteriskClasses">*</span>
+        }
+        @if (helpIcon()) {
+          <span
+            class="inline-flex cursor-help items-center text-body-subtle hover:text-heading"
+            [title]="helpTooltip() || 'Trợ giúp'"
+          >
+            <ol-icon name="question-circle" size="xs" />
+          </span>
+        }
+      </label>
+    </div>
+  `,
+                    host: { class: 'block' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], forId: [{ type: i0.Input, args: [{ isSignal: true, alias: "forId", required: false }] }], labelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelId", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], helpIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpIcon", required: false }] }], helpTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpTooltip", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], beside: [{ type: i0.Input, args: [{ isSignal: true, alias: "beside", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /**
  * Giao diện datepicker dùng bản **_VI** theo Figma #1149:51169 (`CN`·`T2`…`T7`,
@@ -6122,7 +6624,11 @@ function trackPopupMaxHeight(anchorEl, panelEl) {
 
 let uniqueDatepickerId = 0;
 class OlDatepicker {
-    state = inject(OlDatepickerStateService);
+    /**
+     * Trạng thái lịch (ngày đang xem, khoảng đã chọn…). Tên cũ `state` nhường
+     * cho input `state` (lỗi / thành công) — cùng tên với mọi ô nhập khác.
+     */
+    pickerState = inject(OlDatepickerStateService);
     hostEl = inject(ElementRef);
     /** Id do nơi gọi truyền; trống thì dùng id tự sinh bên dưới. */
     id = input('', /* @ts-ignore */
@@ -6142,6 +6648,41 @@ class OlDatepicker {
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Trạng thái hiển thị — lỗi / thành công, cùng thang `FIELD_STATE` với mọi ô
+     * nhập khác. Trước đây datepicker không có (tên `state` bị service chiếm).
+     */
+    state = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /**
+     * Nhãn nổi: `label` nằm TRONG khung (sau icon lịch), nổi lên khi focus, mở
+     * lịch hoặc đã có ngày (kể cả chữ đang gõ dở).
+     */
+    floatingLabel = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Nhãn `top` (trên ô, mặc định) hay `left` (cùng hàng, bên trái). Nhãn nổi
+     * (`floatingLabel`) thắng — bật nó thì bỏ qua input này.
+     */
+    labelPosition = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * Độ rộng cột nhãn khi `labelPosition="left"` — độ dài CSS bất kỳ: `140px`,
+     * `10rem`, `30%`. Bỏ trống = 8rem. Các ô trong cùng form đặt cùng một số thì
+     * mép ô thẳng hàng.
+     */
+    labelWidth = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelWidth" }] : /* istanbul ignore next */ []));
+    labelLayout = computed(() => fieldLabelLayout(this.labelPosition(), this.floatingLabel()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelLayout" }] : /* istanbul ignore next */ []));
+    labelBeside = computed(() => this.labelLayout() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelBeside" }] : /* istanbul ignore next */ []));
+    /** Khung nhãn + ô: cột dọc (nhãn trên) hoặc lưới 2 cột (nhãn trái). */
+    stackClasses = computed(() => this.labelBeside() ? `${this.labelLayout()} gap-y-1.5 w-full` : 'flex flex-col gap-1.5 w-full', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stackClasses" }] : /* istanbul ignore next */ []));
+    /** Kiểu nhãn nổi — Figma Bordered / With background / Default. */
+    floatingVariant = input('outlined', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingVariant" }] : /* istanbul ignore next */ []));
     helperText = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
     required = input(false, /* @ts-ignore */
@@ -6271,16 +6812,16 @@ class OlDatepicker {
         });
         // Sync external constraints into state
         effect(() => {
-            this.state.minDate.set(this.minDate());
-            this.state.maxDate.set(this.maxDate());
-            this.state.daysDisabled.set(this.daysDisabled());
-            this.state.datesDisabled.set(this.datesDisabled());
-            this.state.datesEnabled.set(this.datesEnabled());
+            this.pickerState.minDate.set(this.minDate());
+            this.pickerState.maxDate.set(this.maxDate());
+            this.pickerState.daysDisabled.set(this.daysDisabled());
+            this.pickerState.datesDisabled.set(this.datesDisabled());
+            this.pickerState.datesEnabled.set(this.datesEnabled());
         });
         // Sync value changes to state and input string
         effect(() => {
             const val = this.value();
-            this.state.initSingle(val);
+            this.pickerState.initSingle(val);
             this.inputValue.set(val ? formatDate(val, this.format()) : '');
         });
     }
@@ -6306,27 +6847,30 @@ class OlDatepicker {
      * Bỏ `py-*`: chiều cao đã cố định thì đệm dọc chỉ ép chữ, giữ `px-*` cho đệm
      * ngang và `ps-*` cho chỗ icon lịch.
      */
-    inputSizeClasses = computed(() => {
-        switch (this.size()) {
-            case 'sm':
-                // Đệm và cỡ chữ lấy từ bảng chuẩn (`forms/shared/field-tokens.ts`).
-                // Đo trước khi chuẩn hoá: datepicker dùng `px-3/3.5/4` và `text-xs`
-                // trong khi `ol-input` dùng `px-2.5/3/3.5` và `text-sm` — lệch 2px cả
-                // đệm lẫn cỡ chữ, đặt cạnh nhau trong một hàng là thấy ngay.
-                //
-                // `ps-*` thay `px-*` ở phía trái để chừa chỗ cho icon lịch; phần bên
-                // phải vẫn theo bảng chuẩn.
-                return `${FIELD_HEIGHT.sm} ${FIELD_PADDING_X.sm} ps-9 ${FIELD_TEXT.sm} ${FIELD_RADIUS}`;
-            case 'lg':
-                return `${FIELD_HEIGHT.lg} ${FIELD_PADDING_X.lg} ps-11 ${FIELD_TEXT.lg} ${FIELD_RADIUS}`;
-            case 'xl':
-                return `${FIELD_HEIGHT.xl} ${FIELD_PADDING_X.xl} ps-11 ${FIELD_TEXT.xl} ${FIELD_RADIUS}`;
-            case 'base':
-            default:
-                return `${FIELD_HEIGHT.base} ${FIELD_PADDING_X.base} ps-10 ${FIELD_TEXT.base} ${FIELD_RADIUS}`;
-        }
-    }, /* @ts-ignore */
+    inputSizeClasses = computed(() => `${this.sizeClasses()} ${FIELD_STATE[this.state()]}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputSizeClasses" }] : /* istanbul ignore next */ []));
+    sizeClasses = computed(() => {
+        const size = this.size();
+        // Icon lịch ở lề theo cỡ, chữ cách icon 8px (`PICKER_ICON_RESERVE_START`).
+        // Có nút xoá thì lề phải chừa chỗ cho nó — nút nằm `absolute`, không chừa
+        // là chữ dài chạy xuống dưới nút.
+        const end = this.showClear() ? FIELD_CLEAR_RESERVE_END[size] : FIELD_PADDING_END[size];
+        return `${FIELD_HEIGHT[size]} ${PICKER_ICON_RESERVE_START[size]} ${end} ${FIELD_TEXT[size]} ${FIELD_RADIUS}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizeClasses" }] : /* istanbul ignore next */ []));
+    showClear = computed(() => this.clearable() && this.hasContent() && !this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    /**
+     * `ms-px`/`me-px`: div bọc icon tính từ mép NGOÀI viền 1px của ô, còn đệm
+     * ô tính từ mép trong. Nhãn nổi `filled`/`standard` không có viền hai bên
+     * (chỉ gạch dưới) thì không bù.
+     */
+    sideBorder = computed(() => !this.floatingLabel() || this.floatingVariant() === 'outlined', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideBorder" }] : /* istanbul ignore next */ []));
+    leadPadClass = computed(() => `${this.sideBorder() ? 'ms-px ' : ''}${FIELD_PADDING_START[this.size()]}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leadPadClass" }] : /* istanbul ignore next */ []));
+    trailPadClass = computed(() => `${this.sideBorder() ? 'me-px ' : ''}${FIELD_PADDING_END[this.size()]}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trailPadClass" }] : /* istanbul ignore next */ []));
     /**
      * Cỡ icon lịch theo `size` của ô nhập.
      *
@@ -6379,7 +6923,7 @@ class OlDatepicker {
             return;
         this.isOpen.update((v) => !v);
         if (this.isOpen()) {
-            this.state.initSingle(this.value());
+            this.pickerState.initSingle(this.value());
         }
         else {
             this.onTouched();
@@ -6417,13 +6961,13 @@ class OlDatepicker {
             this.value.set(parsed);
             this.onChange(parsed);
             this.emitAllChanges(parsed);
-            this.state.initSingle(parsed);
+            this.pickerState.initSingle(parsed);
         }
         else if (!val.trim()) {
             this.value.set(null);
             this.onChange(null);
             this.emitAllChanges(null);
-            this.state.initSingle(null);
+            this.pickerState.initSingle(null);
         }
     }
     clearInput(event) {
@@ -6432,7 +6976,7 @@ class OlDatepicker {
         this.inputValue.set('');
         this.onChange(null);
         this.emitAllChanges(null);
-        this.state.clear();
+        this.pickerState.clear();
     }
     /** Ngắt theo dõi vị trí và trả panel về chỗ cũ. Gọi được nhiều lần. */
     detachPanelNow() {
@@ -6501,18 +7045,18 @@ class OlDatepicker {
         this.detachPanelNow();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlDatepicker, isStandalone: true, selector: "ol-datepicker", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, daysDisabled: { classPropertyName: "daysDisabled", publicName: "daysDisabled", isSignal: true, isRequired: false, transformFunction: null }, datesDisabled: { classPropertyName: "datesDisabled", publicName: "datesDisabled", isSignal: true, isRequired: false, transformFunction: null }, datesEnabled: { classPropertyName: "datesEnabled", publicName: "datesEnabled", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", dateChange: "dateChange", timestampChange: "timestampChange", isoChange: "isoChange", formattedChange: "formattedChange" }, host: { properties: { "class.block": "!inline()", "class.w-full": "!inline()", "class.inline-block": "inline()", "class.z-dropdown": "isOpen()" }, classAttribute: "relative" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlDatepicker, isStandalone: true, selector: "ol-datepicker", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, floatingVariant: { classPropertyName: "floatingVariant", publicName: "floatingVariant", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, daysDisabled: { classPropertyName: "daysDisabled", publicName: "daysDisabled", isSignal: true, isRequired: false, transformFunction: null }, datesDisabled: { classPropertyName: "datesDisabled", publicName: "datesDisabled", isSignal: true, isRequired: false, transformFunction: null }, datesEnabled: { classPropertyName: "datesEnabled", publicName: "datesEnabled", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", dateChange: "dateChange", timestampChange: "timestampChange", isoChange: "isoChange", formattedChange: "formattedChange" }, host: { properties: { "class.block": "!inline()", "class.w-full": "!inline()", "class.inline-block": "inline()", "class.z-dropdown": "isOpen()" }, classAttribute: "relative" }, providers: [
             OlDatepickerStateService,
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => OlDatepicker),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  KH\u00D4NG ghim `max-w-sm`: `ol-input`, `ol-select`, `ol-textarea` \u0111\u1EC1u \u0111\u1EC3 n\u01A1i g\u1ECDi\n  quy\u1EBFt \u0111\u1ECBnh b\u1EC1 r\u1ED9ng, ch\u1EC9 `ol-datepicker` t\u1EF1 gi\u1EDBi h\u1EA1n 384px. \u0110\u1EB7t b\u1ED1n \u00F4 c\u1EA1nh\n  nhau trong m\u1ED9t modal th\u00EC \u00F4 ng\u00E0y h\u1EB9p h\u01A1n h\u1EB3n \u2014 \u0111o /modal: ba \u00F4 kia 646px, \u00F4\n  ng\u00E0y 345px. Mu\u1ED1n h\u1EB9p th\u00EC b\u1ECDc ngo\u00E0i, nh\u01B0 m\u1ECDi \u00F4 nh\u1EADp kh\u00E1c trong h\u1ECD.\n-->\n<div class=\"relative inline-block\" [class.w-full]=\"!inline()\" [class.z-dropdown]=\"isOpen()\">\n  @if (inline()) {\n    <!-- Inline Calendar Mode -->\n    <ol-datepicker-popup\n      [inline]=\"true\"\n      [showFooter]=\"showFooter()\"\n      (valueChange)=\"onValueSelected($event)\"\n      (clearClick)=\"onPopupClear()\"\n    />\n  } @else {\n    <!-- Input Trigger & Dropdown Mode -->\n    <div class=\"flex flex-col gap-1.5 w-full\">\n      <!-- Label -->\n      @if (label()) {\n        <label [for]=\"inputId()\" class=\"flex items-center gap-1 text-sm font-medium text-heading\">\n          <span>{{ label() }}</span>\n          @if (required()) {\n            <span class=\"text-fg-danger font-bold\">*</span>\n          }\n        </label>\n      }\n\n      <!-- Input Trigger Field -->\n      <div class=\"relative w-full\">\n        <!-- Calendar Icon Prefix -->\n        <div class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none ps-3.5\">\n          <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n        </div>\n\n        <input\n          [id]=\"inputId()\"\n          type=\"text\"\n          [value]=\"inputValue()\"\n          (input)=\"onInputChange($any($event.target).value)\"\n          (click)=\"togglePopup($event)\"\n          [placeholder]=\"placeholder()\"\n          [disabled]=\"disabled()\"\n          [class]=\"inputSizeClasses()\"\n          class=\"block w-full bg-neutral-secondary-medium border border-default-medium text-heading placeholder:text-body-subtle focus:outline-hidden focus:ring-2 focus:ring-brand-subtle focus:border-brand dark:focus:ring-brand-950 shadow-xs transition-colors cursor-pointer\"\n        />\n\n        <!-- Clear Button or Arrow Dropdown -->\n        <div class=\"absolute inset-y-0 inset-e-0 flex items-center pe-3 gap-1\">\n          @if (clearable() && hasContent() && !disabled()) {\n            <button\n              type=\"button\"\n              (click)=\"clearInput($event)\"\n              class=\"text-body-subtle hover:text-heading p-0.5 rounded-full hover:bg-neutral-tertiary-medium transition-colors cursor-pointer\"\n              aria-label=\"Xo\u00E1 ng\u00E0y \u0111\u00E3 ch\u1ECDn\"\n            >\n              <ol-icon name=\"close\" size=\"xs\" />\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Helper Text -->\n      @if (helperText()) {\n        <p class=\"text-xs text-body-subtle\">\n          {{ helperText() }}\n        </p>\n      }\n\n      <!-- Dropdown Popup -->\n      @if (isOpen()) {\n        <!--\n          `rounded-base` PH\u1EA2I kh\u1EDBp bo g\u00F3c c\u1EE7a `ol-datepicker-popup` b\u00EAn trong.\n\n          Khung n\u00E0y mang `shadow-2xl` nh\u01B0ng tr\u01B0\u1EDBc \u0111\u00E2y kh\u00F4ng c\u00F3 `rounded` n\u00E0o,\n          n\u00EAn b\u00F3ng \u0111\u1ED5 v\u1EBD theo h\u00ECnh CH\u1EEE NH\u1EACT VU\u00D4NG trong khi popup b\u00EAn trong bo\n          12px \u2014 hai g\u00F3c d\u01B0\u1EDBi l\u1ED9 ra hai v\u1EC7t vu\u00F4ng x\u00E1m. \u0110o ng\u00E0y 2026-09-24: hai\n          khung c\u00F9ng 294\u00D7374, khung ngo\u00E0i `radius: 0px`, khung trong\n          `radius: 12px`.\n        -->\n        <div\n          #panel\n          class=\"absolute z-dropdown animate-in fade-in zoom-in-95 duration-100 rounded-base shadow-2xl\"\n        >\n          <ol-datepicker-popup\n            [showFooter]=\"showFooter()\"\n            (valueChange)=\"onValueSelected($event)\"\n            (clearClick)=\"onPopupClear()\"\n          />\n        </div>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: OlDatepickerPopup, selector: "ol-datepicker-popup", inputs: ["showFooter", "dualMonth", "presets", "inline"], outputs: ["valueChange", "clearClick", "applyClick", "cancelClick"] }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  KH\u00D4NG ghim `max-w-sm`: `ol-input`, `ol-select`, `ol-textarea` \u0111\u1EC1u \u0111\u1EC3 n\u01A1i g\u1ECDi\n  quy\u1EBFt \u0111\u1ECBnh b\u1EC1 r\u1ED9ng, ch\u1EC9 `ol-datepicker` t\u1EF1 gi\u1EDBi h\u1EA1n 384px. \u0110\u1EB7t b\u1ED1n \u00F4 c\u1EA1nh\n  nhau trong m\u1ED9t modal th\u00EC \u00F4 ng\u00E0y h\u1EB9p h\u01A1n h\u1EB3n \u2014 \u0111o /modal: ba \u00F4 kia 646px, \u00F4\n  ng\u00E0y 345px. Mu\u1ED1n h\u1EB9p th\u00EC b\u1ECDc ngo\u00E0i, nh\u01B0 m\u1ECDi \u00F4 nh\u1EADp kh\u00E1c trong h\u1ECD.\n-->\n<div class=\"relative inline-block\" [class.w-full]=\"!inline()\" [class.z-dropdown]=\"isOpen()\">\n  @if (inline()) {\n    <!-- Inline Calendar Mode -->\n    <ol-datepicker-popup\n      [inline]=\"true\"\n      [showFooter]=\"showFooter()\"\n      (valueChange)=\"onValueSelected($event)\"\n      (clearClick)=\"onPopupClear()\"\n    />\n  } @else {\n    <!-- Input Trigger & Dropdown Mode -->\n    <div [class]=\"stackClasses()\" [style.--ol-label-w]=\"labelWidth() || null\">\n      <!-- Label -->\n      @if (label() && !floatingLabel()) {\n        <ol-field-label\n          [beside]=\"labelBeside()\"\n          [size]=\"size()\"\n          [text]=\"label()\"\n          [forId]=\"inputId()\"\n          [required]=\"required()\"\n          [flush]=\"true\"\n        />\n      }\n\n      <!-- Input Trigger Field -->\n      <ol-field-frame\n        [enabled]=\"floatingLabel()\"\n        [label]=\"label()\"\n        [forId]=\"inputId()\"\n        [variant]=\"floatingVariant()\"\n        [size]=\"size()\"\n        [state]=\"state()\"\n        [disabled]=\"disabled()\"\n        [required]=\"required()\"\n        [hasValue]=\"hasContent()\"\n        [open]=\"isOpen()\"\n      >\n        <div class=\"relative w-full\">\n          <!-- Calendar Icon Prefix -->\n          <div\n            class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none\"\n            [class]=\"leadPadClass()\"\n          >\n            <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n          </div>\n\n          <input\n            [id]=\"inputId()\"\n            type=\"text\"\n            [value]=\"inputValue()\"\n            (input)=\"onInputChange($any($event.target).value)\"\n            (click)=\"togglePopup($event)\"\n            [placeholder]=\"placeholder()\"\n            [disabled]=\"disabled()\"\n            [class]=\"inputSizeClasses()\"\n            class=\"ol-field-box block w-full border text-heading placeholder:text-body-subtle focus:outline-hidden shadow-xs transition-colors cursor-pointer\"\n          />\n\n          <!-- Clear Button or Arrow Dropdown -->\n          <div class=\"absolute inset-y-0 inset-e-0 flex items-center\" [class]=\"trailPadClass()\">\n            @if (showClear()) {\n              <button\n                type=\"button\"\n                (click)=\"clearInput($event)\"\n                class=\"-me-0.5 text-body-subtle hover:text-heading p-0.5 rounded-full hover:bg-neutral-tertiary-medium transition-colors cursor-pointer\"\n                aria-label=\"Xo\u00E1 ng\u00E0y \u0111\u00E3 ch\u1ECDn\"\n              >\n                <ol-icon name=\"close\" size=\"xs\" />\n              </button>\n            }\n          </div>\n        </div>\n      </ol-field-frame>\n\n      <!-- Helper Text -->\n      @if (helperText()) {\n        <p class=\"text-xs text-body-subtle\">\n          {{ helperText() }}\n        </p>\n      }\n\n      <!-- Dropdown Popup -->\n      @if (isOpen()) {\n        <!--\n          `rounded-base` PH\u1EA2I kh\u1EDBp bo g\u00F3c c\u1EE7a `ol-datepicker-popup` b\u00EAn trong.\n\n          Khung n\u00E0y mang `shadow-2xl` nh\u01B0ng tr\u01B0\u1EDBc \u0111\u00E2y kh\u00F4ng c\u00F3 `rounded` n\u00E0o,\n          n\u00EAn b\u00F3ng \u0111\u1ED5 v\u1EBD theo h\u00ECnh CH\u1EEE NH\u1EACT VU\u00D4NG trong khi popup b\u00EAn trong bo\n          12px \u2014 hai g\u00F3c d\u01B0\u1EDBi l\u1ED9 ra hai v\u1EC7t vu\u00F4ng x\u00E1m. \u0110o ng\u00E0y 2026-09-24: hai\n          khung c\u00F9ng 294\u00D7374, khung ngo\u00E0i `radius: 0px`, khung trong\n          `radius: 12px`.\n        -->\n        <div\n          #panel\n          class=\"absolute z-dropdown animate-in fade-in zoom-in-95 duration-100 rounded-base shadow-2xl\"\n        >\n          <ol-datepicker-popup\n            [showFooter]=\"showFooter()\"\n            (valueChange)=\"onValueSelected($event)\"\n            (clearClick)=\"onPopupClear()\"\n          />\n        </div>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: OlDatepickerPopup, selector: "ol-datepicker-popup", inputs: ["showFooter", "dualMonth", "presets", "inline"], outputs: ["valueChange", "clearClick", "applyClick", "cancelClick"] }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }, { kind: "component", type: OlFieldFrame, selector: "ol-field-frame", inputs: ["enabled", "label", "forId", "labelId", "variant", "size", "state", "disabled", "required", "hasValue", "open", "floatStart"] }, { kind: "component", type: OlFieldLabel, selector: "ol-field-label", inputs: ["text", "forId", "labelId", "required", "helpIcon", "helpTooltip", "flush", "beside", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlDatepicker, decorators: [{
             type: Component,
-            args: [{ selector: 'ol-datepicker', standalone: true, imports: [CommonModule, FormsModule, OlDatepickerPopup, OlIcon], providers: [
+            args: [{ selector: 'ol-datepicker', standalone: true, imports: [CommonModule, FormsModule, OlDatepickerPopup, OlIcon, OlFieldFrame, OlFieldLabel], providers: [
                         OlDatepickerStateService,
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -6548,11 +7092,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[class.w-full]': '!inline()',
                         '[class.inline-block]': 'inline()',
                         '[class.z-dropdown]': 'isOpen()',
-                    }, template: "<!--\n  KH\u00D4NG ghim `max-w-sm`: `ol-input`, `ol-select`, `ol-textarea` \u0111\u1EC1u \u0111\u1EC3 n\u01A1i g\u1ECDi\n  quy\u1EBFt \u0111\u1ECBnh b\u1EC1 r\u1ED9ng, ch\u1EC9 `ol-datepicker` t\u1EF1 gi\u1EDBi h\u1EA1n 384px. \u0110\u1EB7t b\u1ED1n \u00F4 c\u1EA1nh\n  nhau trong m\u1ED9t modal th\u00EC \u00F4 ng\u00E0y h\u1EB9p h\u01A1n h\u1EB3n \u2014 \u0111o /modal: ba \u00F4 kia 646px, \u00F4\n  ng\u00E0y 345px. Mu\u1ED1n h\u1EB9p th\u00EC b\u1ECDc ngo\u00E0i, nh\u01B0 m\u1ECDi \u00F4 nh\u1EADp kh\u00E1c trong h\u1ECD.\n-->\n<div class=\"relative inline-block\" [class.w-full]=\"!inline()\" [class.z-dropdown]=\"isOpen()\">\n  @if (inline()) {\n    <!-- Inline Calendar Mode -->\n    <ol-datepicker-popup\n      [inline]=\"true\"\n      [showFooter]=\"showFooter()\"\n      (valueChange)=\"onValueSelected($event)\"\n      (clearClick)=\"onPopupClear()\"\n    />\n  } @else {\n    <!-- Input Trigger & Dropdown Mode -->\n    <div class=\"flex flex-col gap-1.5 w-full\">\n      <!-- Label -->\n      @if (label()) {\n        <label [for]=\"inputId()\" class=\"flex items-center gap-1 text-sm font-medium text-heading\">\n          <span>{{ label() }}</span>\n          @if (required()) {\n            <span class=\"text-fg-danger font-bold\">*</span>\n          }\n        </label>\n      }\n\n      <!-- Input Trigger Field -->\n      <div class=\"relative w-full\">\n        <!-- Calendar Icon Prefix -->\n        <div class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none ps-3.5\">\n          <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n        </div>\n\n        <input\n          [id]=\"inputId()\"\n          type=\"text\"\n          [value]=\"inputValue()\"\n          (input)=\"onInputChange($any($event.target).value)\"\n          (click)=\"togglePopup($event)\"\n          [placeholder]=\"placeholder()\"\n          [disabled]=\"disabled()\"\n          [class]=\"inputSizeClasses()\"\n          class=\"block w-full bg-neutral-secondary-medium border border-default-medium text-heading placeholder:text-body-subtle focus:outline-hidden focus:ring-2 focus:ring-brand-subtle focus:border-brand dark:focus:ring-brand-950 shadow-xs transition-colors cursor-pointer\"\n        />\n\n        <!-- Clear Button or Arrow Dropdown -->\n        <div class=\"absolute inset-y-0 inset-e-0 flex items-center pe-3 gap-1\">\n          @if (clearable() && hasContent() && !disabled()) {\n            <button\n              type=\"button\"\n              (click)=\"clearInput($event)\"\n              class=\"text-body-subtle hover:text-heading p-0.5 rounded-full hover:bg-neutral-tertiary-medium transition-colors cursor-pointer\"\n              aria-label=\"Xo\u00E1 ng\u00E0y \u0111\u00E3 ch\u1ECDn\"\n            >\n              <ol-icon name=\"close\" size=\"xs\" />\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Helper Text -->\n      @if (helperText()) {\n        <p class=\"text-xs text-body-subtle\">\n          {{ helperText() }}\n        </p>\n      }\n\n      <!-- Dropdown Popup -->\n      @if (isOpen()) {\n        <!--\n          `rounded-base` PH\u1EA2I kh\u1EDBp bo g\u00F3c c\u1EE7a `ol-datepicker-popup` b\u00EAn trong.\n\n          Khung n\u00E0y mang `shadow-2xl` nh\u01B0ng tr\u01B0\u1EDBc \u0111\u00E2y kh\u00F4ng c\u00F3 `rounded` n\u00E0o,\n          n\u00EAn b\u00F3ng \u0111\u1ED5 v\u1EBD theo h\u00ECnh CH\u1EEE NH\u1EACT VU\u00D4NG trong khi popup b\u00EAn trong bo\n          12px \u2014 hai g\u00F3c d\u01B0\u1EDBi l\u1ED9 ra hai v\u1EC7t vu\u00F4ng x\u00E1m. \u0110o ng\u00E0y 2026-09-24: hai\n          khung c\u00F9ng 294\u00D7374, khung ngo\u00E0i `radius: 0px`, khung trong\n          `radius: 12px`.\n        -->\n        <div\n          #panel\n          class=\"absolute z-dropdown animate-in fade-in zoom-in-95 duration-100 rounded-base shadow-2xl\"\n        >\n          <ol-datepicker-popup\n            [showFooter]=\"showFooter()\"\n            (valueChange)=\"onValueSelected($event)\"\n            (clearClick)=\"onPopupClear()\"\n          />\n        </div>\n      }\n    </div>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], daysDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "daysDisabled", required: false }] }], datesDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "datesDisabled", required: false }] }], datesEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "datesEnabled", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], timestampChange: [{ type: i0.Output, args: ["timestampChange"] }], isoChange: [{ type: i0.Output, args: ["isoChange"] }], formattedChange: [{ type: i0.Output, args: ["formattedChange"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+                    }, template: "<!--\n  KH\u00D4NG ghim `max-w-sm`: `ol-input`, `ol-select`, `ol-textarea` \u0111\u1EC1u \u0111\u1EC3 n\u01A1i g\u1ECDi\n  quy\u1EBFt \u0111\u1ECBnh b\u1EC1 r\u1ED9ng, ch\u1EC9 `ol-datepicker` t\u1EF1 gi\u1EDBi h\u1EA1n 384px. \u0110\u1EB7t b\u1ED1n \u00F4 c\u1EA1nh\n  nhau trong m\u1ED9t modal th\u00EC \u00F4 ng\u00E0y h\u1EB9p h\u01A1n h\u1EB3n \u2014 \u0111o /modal: ba \u00F4 kia 646px, \u00F4\n  ng\u00E0y 345px. Mu\u1ED1n h\u1EB9p th\u00EC b\u1ECDc ngo\u00E0i, nh\u01B0 m\u1ECDi \u00F4 nh\u1EADp kh\u00E1c trong h\u1ECD.\n-->\n<div class=\"relative inline-block\" [class.w-full]=\"!inline()\" [class.z-dropdown]=\"isOpen()\">\n  @if (inline()) {\n    <!-- Inline Calendar Mode -->\n    <ol-datepicker-popup\n      [inline]=\"true\"\n      [showFooter]=\"showFooter()\"\n      (valueChange)=\"onValueSelected($event)\"\n      (clearClick)=\"onPopupClear()\"\n    />\n  } @else {\n    <!-- Input Trigger & Dropdown Mode -->\n    <div [class]=\"stackClasses()\" [style.--ol-label-w]=\"labelWidth() || null\">\n      <!-- Label -->\n      @if (label() && !floatingLabel()) {\n        <ol-field-label\n          [beside]=\"labelBeside()\"\n          [size]=\"size()\"\n          [text]=\"label()\"\n          [forId]=\"inputId()\"\n          [required]=\"required()\"\n          [flush]=\"true\"\n        />\n      }\n\n      <!-- Input Trigger Field -->\n      <ol-field-frame\n        [enabled]=\"floatingLabel()\"\n        [label]=\"label()\"\n        [forId]=\"inputId()\"\n        [variant]=\"floatingVariant()\"\n        [size]=\"size()\"\n        [state]=\"state()\"\n        [disabled]=\"disabled()\"\n        [required]=\"required()\"\n        [hasValue]=\"hasContent()\"\n        [open]=\"isOpen()\"\n      >\n        <div class=\"relative w-full\">\n          <!-- Calendar Icon Prefix -->\n          <div\n            class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none\"\n            [class]=\"leadPadClass()\"\n          >\n            <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n          </div>\n\n          <input\n            [id]=\"inputId()\"\n            type=\"text\"\n            [value]=\"inputValue()\"\n            (input)=\"onInputChange($any($event.target).value)\"\n            (click)=\"togglePopup($event)\"\n            [placeholder]=\"placeholder()\"\n            [disabled]=\"disabled()\"\n            [class]=\"inputSizeClasses()\"\n            class=\"ol-field-box block w-full border text-heading placeholder:text-body-subtle focus:outline-hidden shadow-xs transition-colors cursor-pointer\"\n          />\n\n          <!-- Clear Button or Arrow Dropdown -->\n          <div class=\"absolute inset-y-0 inset-e-0 flex items-center\" [class]=\"trailPadClass()\">\n            @if (showClear()) {\n              <button\n                type=\"button\"\n                (click)=\"clearInput($event)\"\n                class=\"-me-0.5 text-body-subtle hover:text-heading p-0.5 rounded-full hover:bg-neutral-tertiary-medium transition-colors cursor-pointer\"\n                aria-label=\"Xo\u00E1 ng\u00E0y \u0111\u00E3 ch\u1ECDn\"\n              >\n                <ol-icon name=\"close\" size=\"xs\" />\n              </button>\n            }\n          </div>\n        </div>\n      </ol-field-frame>\n\n      <!-- Helper Text -->\n      @if (helperText()) {\n        <p class=\"text-xs text-body-subtle\">\n          {{ helperText() }}\n        </p>\n      }\n\n      <!-- Dropdown Popup -->\n      @if (isOpen()) {\n        <!--\n          `rounded-base` PH\u1EA2I kh\u1EDBp bo g\u00F3c c\u1EE7a `ol-datepicker-popup` b\u00EAn trong.\n\n          Khung n\u00E0y mang `shadow-2xl` nh\u01B0ng tr\u01B0\u1EDBc \u0111\u00E2y kh\u00F4ng c\u00F3 `rounded` n\u00E0o,\n          n\u00EAn b\u00F3ng \u0111\u1ED5 v\u1EBD theo h\u00ECnh CH\u1EEE NH\u1EACT VU\u00D4NG trong khi popup b\u00EAn trong bo\n          12px \u2014 hai g\u00F3c d\u01B0\u1EDBi l\u1ED9 ra hai v\u1EC7t vu\u00F4ng x\u00E1m. \u0110o ng\u00E0y 2026-09-24: hai\n          khung c\u00F9ng 294\u00D7374, khung ngo\u00E0i `radius: 0px`, khung trong\n          `radius: 12px`.\n        -->\n        <div\n          #panel\n          class=\"absolute z-dropdown animate-in fade-in zoom-in-95 duration-100 rounded-base shadow-2xl\"\n        >\n          <ol-datepicker-popup\n            [showFooter]=\"showFooter()\"\n            (valueChange)=\"onValueSelected($event)\"\n            (clearClick)=\"onPopupClear()\"\n          />\n        </div>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], floatingVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingVariant", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], daysDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "daysDisabled", required: false }] }], datesDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "datesDisabled", required: false }] }], datesEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "datesEnabled", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], timestampChange: [{ type: i0.Output, args: ["timestampChange"] }], isoChange: [{ type: i0.Output, args: ["isoChange"] }], formattedChange: [{ type: i0.Output, args: ["formattedChange"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
+let nextRangeId = 0;
+/** `joined`: lề cỡ − 4px `p-1` của khung (icon) và + icon + 8px (chữ). */
+const JOINED_ICON_PAD = {
+    sm: 'ps-1.5',
+    base: 'ps-2',
+    lg: 'ps-2.5',
+    xl: 'ps-3',
+};
+const JOINED_TEXT_PAD = {
+    sm: 'ps-7',
+    base: 'ps-8',
+    lg: 'ps-9.5',
+    xl: 'ps-10',
+};
 class OlDateRangePicker {
-    state = inject(OlDatepickerStateService);
+    /**
+     * Trạng thái lịch (ngày đang xem, khoảng đã chọn…). Tên cũ `state` nhường
+     * cho input `state` (lỗi / thành công) — cùng tên với mọi ô nhập khác.
+     */
+    pickerState = inject(OlDatepickerStateService);
     hostEl = inject(ElementRef);
     // Inputs & Models
     value = model(null, /* @ts-ignore */
@@ -6563,6 +7125,53 @@ class OlDateRangePicker {
     ...(ngDevMode ? [{ debugName: "endPlaceholder" }] : /* istanbul ignore next */ []));
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Lỗi / thành công — cùng thang `FIELD_STATE` với mọi ô nhập khác. */
+    state = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /**
+     * Nhãn nổi. `joined`: một nhãn (`label`) cho cả khung. `dual-inputs`: mỗi ô
+     * một nhãn (`fromLabel` / `toLabel`), nổi riêng theo ô đó có ngày hay không.
+     */
+    floatingLabel = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Nhãn `top` (trên ô, mặc định) hay `left` (cùng hàng, bên trái). Nhãn nổi
+     * (`floatingLabel`) thắng — bật nó thì bỏ qua input này.
+     */
+    labelPosition = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * Độ rộng cột nhãn khi `labelPosition="left"` — độ dài CSS bất kỳ: `140px`,
+     * `10rem`, `30%`. Bỏ trống = 8rem. Các ô trong cùng form đặt cùng một số thì
+     * mép ô thẳng hàng.
+     */
+    labelWidth = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelWidth" }] : /* istanbul ignore next */ []));
+    labelLayout = computed(() => fieldLabelLayout(this.labelPosition(), this.floatingLabel()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelLayout" }] : /* istanbul ignore next */ []));
+    labelBeside = computed(() => this.labelLayout() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelBeside" }] : /* istanbul ignore next */ []));
+    /**
+     * `joined`: một nhãn cho cả khung → khung ngoài thành lưới. `dual-inputs`:
+     * mỗi ô một nhãn ("Từ" / "Đến") → khung ngoài giữ cột dọc, từng CỘT thành lưới.
+     */
+    stackClasses = computed(() => this.labelBeside() && this.variant() !== 'dual-inputs'
+        ? `${this.labelLayout()} gap-y-1.5 w-full`
+        : 'flex flex-col gap-1.5 w-full', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stackClasses" }] : /* istanbul ignore next */ []));
+    columnClasses = computed(() => this.labelBeside() ? `${this.labelLayout()} gap-y-1.5` : 'flex flex-col gap-1.5', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnClasses" }] : /* istanbul ignore next */ []));
+    /** Kiểu nhãn nổi — Figma Bordered / With background / Default. */
+    floatingVariant = input('outlined', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingVariant" }] : /* istanbul ignore next */ []));
+    /**
+     * Id hai ô `dual-inputs` — để `<label for>` nối được. Bản cũ hai nhãn
+     * "Từ"/"Đến" KHÔNG có `for`, ô không có id: bấm nhãn không focus, trình đọc
+     * màn hình đọc hai ô không tên.
+     */
+    uid = `ol-date-range-${nextRangeId++}`;
+    startInputId = `${this.uid}-start`;
+    endInputId = `${this.uid}-end`;
     fromLabel = input('Từ', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fromLabel" }] : /* istanbul ignore next */ []));
     toLabel = input('Đến', /* @ts-ignore */
@@ -6690,16 +7299,16 @@ class OlDateRangePicker {
         });
         // Sync external constraints into state
         effect(() => {
-            this.state.minDate.set(this.minDate());
-            this.state.maxDate.set(this.maxDate());
-            this.state.daysDisabled.set(this.daysDisabled());
-            this.state.datesDisabled.set(this.datesDisabled());
-            this.state.datesEnabled.set(this.datesEnabled());
+            this.pickerState.minDate.set(this.minDate());
+            this.pickerState.maxDate.set(this.maxDate());
+            this.pickerState.daysDisabled.set(this.daysDisabled());
+            this.pickerState.datesDisabled.set(this.datesDisabled());
+            this.pickerState.datesEnabled.set(this.datesEnabled());
         });
         // Sync value changes to state and inputs
         effect(() => {
             const val = this.value();
-            this.state.initRange(val);
+            this.pickerState.initRange(val);
             const start = val && val[0] ? formatDate(val[0], this.format()) : '';
             const end = val && val[1] ? formatDate(val[1], this.format()) : '';
             this.startInputValue.set(start);
@@ -6732,23 +7341,38 @@ class OlDateRangePicker {
      * dùng y hệt `py-2 / py-2.5 / py-3.5` nên lệch cùng một kiểu; sửa một nửa là
      * để lại đúng lỗi đó ở chỗ khác.
      */
-    inputSizeClasses = computed(() => {
-        switch (this.size()) {
-            case 'sm':
-                // Lấy từ bảng chuẩn (`forms/shared/field-tokens.ts`) — xem chú thích
-                // ở `ol-datepicker`. Bản cũ dùng `px-3` và `text-xs`, lệch 2px cả đệm
-                // lẫn cỡ chữ so với `ol-input`.
-                return `${FIELD_HEIGHT.sm} ${FIELD_PADDING_X.sm} ${FIELD_TEXT.sm} ${FIELD_RADIUS}`;
-            case 'lg':
-                return `${FIELD_HEIGHT.lg} ${FIELD_PADDING_X.lg} ${FIELD_TEXT.lg} ${FIELD_RADIUS}`;
-            case 'xl':
-                return `${FIELD_HEIGHT.xl} ${FIELD_PADDING_X.xl} ${FIELD_TEXT.xl} ${FIELD_RADIUS}`;
-            case 'base':
-            default:
-                return `${FIELD_HEIGHT.base} ${FIELD_PADDING_X.base} ${FIELD_TEXT.base} ${FIELD_RADIUS}`;
-        }
-    }, /* @ts-ignore */
+    /**
+     * Hai ô của dạng `dual-inputs`: icon lịch ở lề theo cỡ, chữ cách icon 8px.
+     * Ô "Đến" mang nút xoá `absolute` nên lề phải chừa chỗ cho nó.
+     */
+    inputSizeClasses = computed(() => this.inputClasses(false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputSizeClasses" }] : /* istanbul ignore next */ []));
+    endInputClasses = computed(() => this.inputClasses(this.showClear()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endInputClasses" }] : /* istanbul ignore next */ []));
+    inputClasses(withClear) {
+        const size = this.size();
+        const end = withClear ? FIELD_CLEAR_RESERVE_END[size] : FIELD_PADDING_END[size];
+        return `${FIELD_HEIGHT[size]} ${PICKER_ICON_RESERVE_START[size]} ${end} ${FIELD_TEXT[size]} ${FIELD_RADIUS} ${FIELD_STATE[this.state()]}`;
+    }
+    showClear = computed(() => this.clearable() && this.hasContent() && !this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    /**
+     * `ms-px`/`me-px`: div bọc icon tính từ mép NGOÀI viền 1px của ô, còn đệm
+     * ô tính từ mép trong. Nhãn nổi `filled`/`standard` không có viền hai bên
+     * (chỉ gạch dưới) thì không bù.
+     */
+    sideBorder = computed(() => !this.floatingLabel() || this.floatingVariant() === 'outlined', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideBorder" }] : /* istanbul ignore next */ []));
+    leadPadClass = computed(() => `${this.sideBorder() ? 'ms-px ' : ''}${FIELD_PADDING_START[this.size()]}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leadPadClass" }] : /* istanbul ignore next */ []));
+    trailPadClass = computed(() => `${this.sideBorder() ? 'me-px ' : ''}${FIELD_PADDING_END[this.size()]}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trailPadClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Dạng `joined`: khung có `p-1` (4px), nên icon lùi thêm lề cỡ − 4px để
+     * mép icon cách viền đúng lề cỡ như mọi ô; chữ cách icon 8px.
+     */
+    joinedIconPadClass = computed(() => JOINED_ICON_PAD[this.size()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "joinedIconPadClass" }] : /* istanbul ignore next */ []));
     /**
      * Cỡ cho biến thể `joined` — khung bọc mang viền, hai input bên trong trong
      * suốt. Phải tách khỏi `inputSizeClasses()`: ở đây chiều cao thuộc về KHUNG,
@@ -6763,7 +7387,9 @@ class OlDateRangePicker {
      * Khung có `p-1` = 4px mỗi cạnh, nên input con lùi 8px để TỔNG chiều cao
      * khớp thang: h-9 → h-7, h-10 → h-8, h-12 → h-10, h-13 → h-11.
      */
-    joinedWrapperClasses = computed(() => {
+    joinedWrapperClasses = computed(() => `${this.joinedHeight()} ${FIELD_STATE[this.state()]}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "joinedWrapperClasses" }] : /* istanbul ignore next */ []));
+    joinedHeight = computed(() => {
         switch (this.size()) {
             case 'sm':
                 return 'h-9';
@@ -6776,19 +7402,20 @@ class OlDateRangePicker {
                 return 'h-10';
         }
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "joinedWrapperClasses" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "joinedHeight" }] : /* istanbul ignore next */ []));
     /** Input bên trong khung `joined` — trừ đi `p-1` của khung. */
     joinedInputClasses = computed(() => {
+        const pad = JOINED_TEXT_PAD[this.size()];
         switch (this.size()) {
             case 'sm':
-                return 'h-7 text-xs';
+                return `h-7 text-xs ${pad}`;
             case 'lg':
-                return 'h-10 text-base';
+                return `h-10 text-base ${pad}`;
             case 'xl':
-                return 'h-11 text-base';
+                return `h-11 text-base ${pad}`;
             case 'base':
             default:
-                return 'h-8 text-sm';
+                return `h-8 text-sm ${pad}`;
         }
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "joinedInputClasses" }] : /* istanbul ignore next */ []));
@@ -6817,7 +7444,7 @@ class OlDateRangePicker {
             return;
         this.isOpen.update((v) => !v);
         if (this.isOpen()) {
-            this.state.initRange(this.value());
+            this.pickerState.initRange(this.value());
         }
         else {
             this.onTouched();
@@ -6850,8 +7477,8 @@ class OlDateRangePicker {
         }
     }
     onPopupApply() {
-        const start = this.state.rangeStart();
-        const end = this.state.rangeEnd();
+        const start = this.pickerState.rangeStart();
+        const end = this.pickerState.rangeEnd();
         if (start && end) {
             const newRange = [start, end];
             this.value.set(newRange);
@@ -6867,7 +7494,7 @@ class OlDateRangePicker {
     onPopupCancel() {
         if (!this.inline()) {
             // Khôi phục lại state về giá trị cũ đã lưu trước đó
-            this.state.initRange(this.value());
+            this.pickerState.initRange(this.value());
             const val = this.value();
             this.startInputValue.set(val && val[0] ? formatDate(val[0], this.format()) : '');
             this.endInputValue.set(val && val[1] ? formatDate(val[1], this.format()) : '');
@@ -6880,7 +7507,7 @@ class OlDateRangePicker {
         this.endInputValue.set('');
         this.onChange(null);
         this.rangeChange.emit(null);
-        this.state.clear();
+        this.pickerState.clear();
     }
     onStartInputChange(val) {
         this.startInputValue.set(val);
@@ -6891,7 +7518,7 @@ class OlDateRangePicker {
             this.value.set(range);
             this.onChange(range);
             this.rangeChange.emit(range);
-            this.state.initRange(range);
+            this.pickerState.initRange(range);
         }
     }
     onEndInputChange(val) {
@@ -6903,7 +7530,7 @@ class OlDateRangePicker {
             this.value.set(range);
             this.onChange(range);
             this.rangeChange.emit(range);
-            this.state.initRange(range);
+            this.pickerState.initRange(range);
         }
     }
     clearRange(event) {
@@ -6913,7 +7540,7 @@ class OlDateRangePicker {
         this.endInputValue.set('');
         this.onChange(null);
         this.rangeChange.emit(null);
-        this.state.clear();
+        this.pickerState.clear();
     }
     /** Ngắt theo dõi vị trí và trả panel về chỗ cũ. Gọi được nhiều lần. */
     detachPanelNow() {
@@ -6973,18 +7600,18 @@ class OlDateRangePicker {
         this.detachPanelNow();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlDateRangePicker, isStandalone: true, selector: "ol-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, startPlaceholder: { classPropertyName: "startPlaceholder", publicName: "startPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, endPlaceholder: { classPropertyName: "endPlaceholder", publicName: "endPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fromLabel: { classPropertyName: "fromLabel", publicName: "fromLabel", isSignal: true, isRequired: false, transformFunction: null }, toLabel: { classPropertyName: "toLabel", publicName: "toLabel", isSignal: true, isRequired: false, transformFunction: null }, showInfoIcon: { classPropertyName: "showInfoIcon", publicName: "showInfoIcon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dualMonth: { classPropertyName: "dualMonth", publicName: "dualMonth", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, daysDisabled: { classPropertyName: "daysDisabled", publicName: "daysDisabled", isSignal: true, isRequired: false, transformFunction: null }, datesDisabled: { classPropertyName: "datesDisabled", publicName: "datesDisabled", isSignal: true, isRequired: false, transformFunction: null }, datesEnabled: { classPropertyName: "datesEnabled", publicName: "datesEnabled", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", rangeChange: "rangeChange" }, host: { properties: { "class.z-dropdown": "isOpen()" }, classAttribute: "relative inline-block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlDateRangePicker, isStandalone: true, selector: "ol-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, startPlaceholder: { classPropertyName: "startPlaceholder", publicName: "startPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, endPlaceholder: { classPropertyName: "endPlaceholder", publicName: "endPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, floatingVariant: { classPropertyName: "floatingVariant", publicName: "floatingVariant", isSignal: true, isRequired: false, transformFunction: null }, fromLabel: { classPropertyName: "fromLabel", publicName: "fromLabel", isSignal: true, isRequired: false, transformFunction: null }, toLabel: { classPropertyName: "toLabel", publicName: "toLabel", isSignal: true, isRequired: false, transformFunction: null }, showInfoIcon: { classPropertyName: "showInfoIcon", publicName: "showInfoIcon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dualMonth: { classPropertyName: "dualMonth", publicName: "dualMonth", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, daysDisabled: { classPropertyName: "daysDisabled", publicName: "daysDisabled", isSignal: true, isRequired: false, transformFunction: null }, datesDisabled: { classPropertyName: "datesDisabled", publicName: "datesDisabled", isSignal: true, isRequired: false, transformFunction: null }, datesEnabled: { classPropertyName: "datesEnabled", publicName: "datesEnabled", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", rangeChange: "rangeChange" }, host: { properties: { "class.z-dropdown": "isOpen()" }, classAttribute: "relative inline-block" }, providers: [
             OlDatepickerStateService,
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => OlDateRangePicker),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"relative inline-block\"\n  [class.w-full]=\"!inline()\"\n  [class.max-w-xl]=\"!inline()\"\n  [class.z-dropdown]=\"isOpen()\"\n>\n  @if (inline()) {\n    <!-- Inline Calendar Mode -->\n    <ol-datepicker-popup\n      [inline]=\"true\"\n      [showFooter]=\"showFooter()\"\n      [dualMonth]=\"dualMonth()\"\n      [presets]=\"presets()\"\n      (valueChange)=\"onValueSelected($event)\"\n      (clearClick)=\"onPopupClear()\"\n      (applyClick)=\"onPopupApply()\"\n      (cancelClick)=\"onPopupCancel()\"\n    />\n  } @else {\n    <!-- Input Trigger & Dropdown Mode -->\n    <div class=\"flex flex-col gap-1.5 w-full\">\n      @if (variant() === 'dual-inputs') {\n        <!-- Figma Variant: 2 Separate Inputs (From & To) -->\n        <div\n          class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 w-full\"\n          (click)=\"togglePopup($event)\"\n        >\n          <!-- From Input -->\n          <div class=\"flex flex-col gap-1.5\">\n            <label class=\"flex items-center gap-1 text-sm font-medium text-heading select-none\">\n              <span>{{ fromLabel() }}</span>\n              @if (required()) {\n                <span class=\"text-fg-danger font-bold\">*</span>\n              }\n              @if (showInfoIcon()) {\n                <ol-icon name=\"question-circle\" size=\"xs\" />\n              }\n            </label>\n\n            <div class=\"relative w-full\">\n              <div\n                class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none ps-3.5\"\n              >\n                <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n              </div>\n              <input\n                type=\"text\"\n                [value]=\"startInputValue()\"\n                (input)=\"onStartInputChange($any($event.target).value)\"\n                [placeholder]=\"startPlaceholder()\"\n                [disabled]=\"disabled()\"\n                class=\"block w-full bg-neutral-secondary-medium border border-default-medium text-heading placeholder:text-body-subtle focus:outline-hidden focus:ring-2 focus:ring-brand-subtle focus:border-brand dark:focus:border-brand-subtle shadow-xs cursor-pointer transition-colors ps-10 pe-3\"\n                [class]=\"inputSizeClasses()\"\n              />\n            </div>\n          </div>\n\n          <!-- To Input -->\n          <div class=\"flex flex-col gap-1.5\">\n            <label class=\"flex items-center gap-1 text-sm font-medium text-heading select-none\">\n              <span>{{ toLabel() }}</span>\n              @if (required()) {\n                <span class=\"text-fg-danger font-bold\">*</span>\n              }\n              @if (showInfoIcon()) {\n                <ol-icon name=\"question-circle\" size=\"xs\" />\n              }\n            </label>\n\n            <div class=\"relative w-full\">\n              <div\n                class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none ps-3.5\"\n              >\n                <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n              </div>\n              <input\n                type=\"text\"\n                [value]=\"endInputValue()\"\n                (input)=\"onEndInputChange($any($event.target).value)\"\n                [placeholder]=\"endPlaceholder()\"\n                [disabled]=\"disabled()\"\n                class=\"block w-full bg-neutral-secondary-medium border border-default-medium text-heading placeholder:text-body-subtle focus:outline-hidden focus:ring-2 focus:ring-brand-subtle focus:border-brand dark:focus:border-brand-subtle shadow-xs cursor-pointer transition-colors ps-10 pe-8\"\n                [class]=\"inputSizeClasses()\"\n              />\n\n              <!-- Clear button on the right input -->\n              @if (clearable() && hasContent() && !disabled()) {\n                <button\n                  type=\"button\"\n                  (click)=\"clearRange($event)\"\n                  class=\"absolute inset-y-0 inset-e-0 flex items-center pe-2.5 text-body-subtle hover:text-heading transition-colors cursor-pointer\"\n                  aria-label=\"Xo\u00E1 kho\u1EA3ng ng\u00E0y\"\n                >\n                  <ol-icon name=\"close\" size=\"xs\" />\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      } @else {\n        <!-- Joined Single Container Variant -->\n        @if (label()) {\n          <label class=\"flex items-center gap-1 text-sm font-medium text-heading\">\n            <span>{{ label() }}</span>\n            @if (required()) {\n              <span class=\"text-fg-danger font-bold\">*</span>\n            }\n          </label>\n        }\n\n        <div\n          class=\"flex items-center gap-2 bg-neutral-secondary-medium border border-default-medium rounded-md p-1 shadow-xs focus-within:ring-2 focus-within:ring-brand-subtle focus-within:border-brand dark:focus-within:border-brand-subtle transition-all cursor-pointer\"\n          [class]=\"joinedWrapperClasses()\"\n          (click)=\"togglePopup($event)\"\n        >\n          <!-- Start Date Input -->\n          <div class=\"relative flex-1 flex items-center\">\n            <div class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none ps-3\">\n              <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n            </div>\n            <input\n              type=\"text\"\n              [value]=\"startInputValue()\"\n              (input)=\"onStartInputChange($any($event.target).value)\"\n              [placeholder]=\"startPlaceholder()\"\n              [disabled]=\"disabled()\"\n              class=\"block w-full bg-transparent text-heading placeholder:text-body-subtle ps-9 pe-2 focus:outline-hidden cursor-pointer\"\n              [class]=\"joinedInputClasses()\"\n            />\n          </div>\n\n          <!-- Separator Arrow -->\n          <span class=\"text-fg-disabled text-xs font-medium px-1 select-none\"> \u0111\u1EBFn </span>\n\n          <!-- End Date Input -->\n          <div class=\"relative flex-1 flex items-center\">\n            <div class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none ps-3\">\n              <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n            </div>\n            <input\n              type=\"text\"\n              [value]=\"endInputValue()\"\n              (input)=\"onEndInputChange($any($event.target).value)\"\n              [placeholder]=\"endPlaceholder()\"\n              [disabled]=\"disabled()\"\n              class=\"block w-full bg-transparent text-heading placeholder:text-body-subtle ps-9 pe-2 focus:outline-hidden cursor-pointer\"\n              [class]=\"joinedInputClasses()\"\n            />\n          </div>\n\n          <!-- Clear Button -->\n          @if (clearable() && hasContent() && !disabled()) {\n            <button\n              type=\"button\"\n              (click)=\"clearRange($event)\"\n              class=\"text-body-subtle hover:text-heading p-1 mr-1 rounded-full hover:bg-neutral-tertiary-medium transition-colors cursor-pointer\"\n              aria-label=\"Xo\u00E1 kho\u1EA3ng ng\u00E0y \u0111\u00E3 ch\u1ECDn\"\n            >\n              <ol-icon name=\"close\" size=\"xs\" />\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Helper Text -->\n      @if (helperText()) {\n        <p class=\"text-xs text-body-subtle\">\n          {{ helperText() }}\n        </p>\n      }\n\n      <!-- Dropdown Popup -->\n      @if (isOpen()) {\n        <div\n          #panel\n          class=\"absolute z-dropdown animate-in fade-in zoom-in-95 duration-100 rounded-base shadow-2xl w-max max-w-[calc(100vw-2rem)]\"\n        >\n          <ol-datepicker-popup\n            [showFooter]=\"showFooter()\"\n            [dualMonth]=\"dualMonth()\"\n            [presets]=\"presets()\"\n            (valueChange)=\"onValueSelected($event)\"\n            (clearClick)=\"onPopupClear()\"\n            (applyClick)=\"onPopupApply()\"\n            (cancelClick)=\"onPopupCancel()\"\n          />\n        </div>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: OlDatepickerPopup, selector: "ol-datepicker-popup", inputs: ["showFooter", "dualMonth", "presets", "inline"], outputs: ["valueChange", "clearClick", "applyClick", "cancelClick"] }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"relative inline-block\"\n  [class.w-full]=\"!inline()\"\n  [class.max-w-xl]=\"!inline()\"\n  [class.z-dropdown]=\"isOpen()\"\n>\n  @if (inline()) {\n    <!-- Inline Calendar Mode -->\n    <ol-datepicker-popup\n      [inline]=\"true\"\n      [showFooter]=\"showFooter()\"\n      [dualMonth]=\"dualMonth()\"\n      [presets]=\"presets()\"\n      (valueChange)=\"onValueSelected($event)\"\n      (clearClick)=\"onPopupClear()\"\n      (applyClick)=\"onPopupApply()\"\n      (cancelClick)=\"onPopupCancel()\"\n    />\n  } @else {\n    <!-- Input Trigger & Dropdown Mode -->\n    <div [class]=\"stackClasses()\" [style.--ol-label-w]=\"labelWidth() || null\">\n      @if (variant() === 'dual-inputs') {\n        <!-- Figma Variant: 2 Separate Inputs (From & To) -->\n        <div\n          class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 w-full\"\n          (click)=\"togglePopup($event)\"\n        >\n          <!-- From Input -->\n          <div [class]=\"columnClasses()\">\n            @if (!floatingLabel()) {\n              <ol-field-label\n                [beside]=\"labelBeside()\"\n                [size]=\"size()\"\n                [text]=\"fromLabel()\"\n                [forId]=\"startInputId\"\n                [required]=\"required()\"\n                [helpIcon]=\"showInfoIcon()\"\n                [flush]=\"true\"\n              />\n            }\n            <ol-field-frame\n              [enabled]=\"floatingLabel()\"\n              [label]=\"fromLabel()\"\n              [forId]=\"startInputId\"\n              [variant]=\"floatingVariant()\"\n              [size]=\"size()\"\n              [state]=\"state()\"\n              [disabled]=\"disabled()\"\n              [required]=\"required()\"\n              [hasValue]=\"!!startInputValue()\"\n              [open]=\"isOpen()\"\n            >\n              <div class=\"relative w-full\">\n                <div\n                  class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none\"\n                  [class]=\"leadPadClass()\"\n                >\n                  <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n                </div>\n                <input\n                  [id]=\"startInputId\"\n                  type=\"text\"\n                  [value]=\"startInputValue()\"\n                  (input)=\"onStartInputChange($any($event.target).value)\"\n                  [placeholder]=\"startPlaceholder()\"\n                  [disabled]=\"disabled()\"\n                  class=\"ol-field-box block w-full border text-heading placeholder:text-body-subtle focus:outline-hidden shadow-xs cursor-pointer transition-colors\"\n                  [class]=\"inputSizeClasses()\"\n                />\n              </div>\n            </ol-field-frame>\n          </div>\n\n          <!-- To Input -->\n          <div [class]=\"columnClasses()\">\n            @if (!floatingLabel()) {\n              <ol-field-label\n                [beside]=\"labelBeside()\"\n                [size]=\"size()\"\n                [text]=\"toLabel()\"\n                [forId]=\"endInputId\"\n                [required]=\"required()\"\n                [helpIcon]=\"showInfoIcon()\"\n                [flush]=\"true\"\n              />\n            }\n            <ol-field-frame\n              [enabled]=\"floatingLabel()\"\n              [label]=\"toLabel()\"\n              [forId]=\"endInputId\"\n              [variant]=\"floatingVariant()\"\n              [size]=\"size()\"\n              [state]=\"state()\"\n              [disabled]=\"disabled()\"\n              [required]=\"required()\"\n              [hasValue]=\"!!endInputValue()\"\n              [open]=\"isOpen()\"\n            >\n              <div class=\"relative w-full\">\n                <div\n                  class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none\"\n                  [class]=\"leadPadClass()\"\n                >\n                  <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n                </div>\n                <input\n                  [id]=\"endInputId\"\n                  type=\"text\"\n                  [value]=\"endInputValue()\"\n                  (input)=\"onEndInputChange($any($event.target).value)\"\n                  [placeholder]=\"endPlaceholder()\"\n                  [disabled]=\"disabled()\"\n                  class=\"ol-field-box block w-full border text-heading placeholder:text-body-subtle focus:outline-hidden shadow-xs cursor-pointer transition-colors\"\n                  [class]=\"endInputClasses()\"\n                />\n\n                <!-- Clear button on the right input -->\n                @if (showClear()) {\n                  <button\n                    type=\"button\"\n                    (click)=\"clearRange($event)\"\n                    class=\"absolute inset-y-0 inset-e-0 flex items-center text-body-subtle hover:text-heading transition-colors cursor-pointer\"\n                    [class]=\"trailPadClass()\"\n                    aria-label=\"Xo\u00E1 kho\u1EA3ng ng\u00E0y\"\n                  >\n                    <ol-icon name=\"close\" size=\"xs\" />\n                  </button>\n                }\n              </div>\n            </ol-field-frame>\n          </div>\n        </div>\n      } @else {\n        <!-- Joined Single Container Variant -->\n        @if (label() && !floatingLabel()) {\n          <ol-field-label\n            [beside]=\"labelBeside()\"\n            [size]=\"size()\"\n            [text]=\"label()\"\n            [forId]=\"startInputId\"\n            [required]=\"required()\"\n            [flush]=\"true\"\n          />\n        }\n\n        <ol-field-frame\n          [enabled]=\"floatingLabel()\"\n          [label]=\"label()\"\n          [forId]=\"startInputId\"\n          [variant]=\"floatingVariant()\"\n          [size]=\"size()\"\n          [state]=\"state()\"\n          [disabled]=\"disabled()\"\n          [required]=\"required()\"\n          [hasValue]=\"hasContent()\"\n          [open]=\"isOpen()\"\n        >\n          <div\n            class=\"ol-field-box flex items-center gap-2 border rounded-md p-1 shadow-xs transition-all cursor-pointer\"\n            [class]=\"joinedWrapperClasses()\"\n            (click)=\"togglePopup($event)\"\n          >\n            <!-- Start Date Input -->\n            <div class=\"relative flex-1 flex items-center\">\n              <div\n                class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none\"\n                [class]=\"joinedIconPadClass()\"\n              >\n                <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n              </div>\n              <input\n                [id]=\"startInputId\"\n                type=\"text\"\n                [value]=\"startInputValue()\"\n                (input)=\"onStartInputChange($any($event.target).value)\"\n                [placeholder]=\"startPlaceholder()\"\n                [disabled]=\"disabled()\"\n                class=\"block w-full bg-transparent text-heading placeholder:text-body-subtle pe-2 focus:outline-hidden cursor-pointer\"\n                [class]=\"joinedInputClasses()\"\n              />\n            </div>\n\n            <!-- Separator Arrow -->\n            <span class=\"text-fg-disabled text-xs font-medium px-1 select-none\"> \u0111\u1EBFn </span>\n\n            <!-- End Date Input -->\n            <div class=\"relative flex-1 flex items-center\">\n              <div\n                class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none\"\n                [class]=\"joinedIconPadClass()\"\n              >\n                <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n              </div>\n              <input\n                [id]=\"endInputId\"\n                type=\"text\"\n                [value]=\"endInputValue()\"\n                (input)=\"onEndInputChange($any($event.target).value)\"\n                [placeholder]=\"endPlaceholder()\"\n                [disabled]=\"disabled()\"\n                class=\"block w-full bg-transparent text-heading placeholder:text-body-subtle pe-2 focus:outline-hidden cursor-pointer\"\n                [class]=\"joinedInputClasses()\"\n              />\n            </div>\n\n            <!-- Clear Button -->\n            @if (clearable() && hasContent() && !disabled()) {\n              <button\n                type=\"button\"\n                (click)=\"clearRange($event)\"\n                class=\"text-body-subtle hover:text-heading p-1 mr-1 rounded-full hover:bg-neutral-tertiary-medium transition-colors cursor-pointer\"\n                aria-label=\"Xo\u00E1 kho\u1EA3ng ng\u00E0y \u0111\u00E3 ch\u1ECDn\"\n              >\n                <ol-icon name=\"close\" size=\"xs\" />\n              </button>\n            }\n          </div>\n        </ol-field-frame>\n      }\n\n      <!-- Helper Text -->\n      @if (helperText()) {\n        <p class=\"text-xs text-body-subtle\">\n          {{ helperText() }}\n        </p>\n      }\n\n      <!-- Dropdown Popup -->\n      @if (isOpen()) {\n        <div\n          #panel\n          class=\"absolute z-dropdown animate-in fade-in zoom-in-95 duration-100 rounded-base shadow-2xl w-max max-w-[calc(100vw-2rem)]\"\n        >\n          <ol-datepicker-popup\n            [showFooter]=\"showFooter()\"\n            [dualMonth]=\"dualMonth()\"\n            [presets]=\"presets()\"\n            (valueChange)=\"onValueSelected($event)\"\n            (clearClick)=\"onPopupClear()\"\n            (applyClick)=\"onPopupApply()\"\n            (cancelClick)=\"onPopupCancel()\"\n          />\n        </div>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: OlDatepickerPopup, selector: "ol-datepicker-popup", inputs: ["showFooter", "dualMonth", "presets", "inline"], outputs: ["valueChange", "clearClick", "applyClick", "cancelClick"] }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }, { kind: "component", type: OlFieldFrame, selector: "ol-field-frame", inputs: ["enabled", "label", "forId", "labelId", "variant", "size", "state", "disabled", "required", "hasValue", "open", "floatStart"] }, { kind: "component", type: OlFieldLabel, selector: "ol-field-label", inputs: ["text", "forId", "labelId", "required", "helpIcon", "helpTooltip", "flush", "beside", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlDateRangePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'ol-date-range-picker', standalone: true, imports: [CommonModule, FormsModule, OlDatepickerPopup, OlIcon], providers: [
+            args: [{ selector: 'ol-date-range-picker', standalone: true, imports: [CommonModule, FormsModule, OlDatepickerPopup, OlIcon, OlFieldFrame, OlFieldLabel], providers: [
                         OlDatepickerStateService,
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -7004,8 +7631,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                          */
                         class: 'relative inline-block',
                         '[class.z-dropdown]': 'isOpen()',
-                    }, template: "<div\n  class=\"relative inline-block\"\n  [class.w-full]=\"!inline()\"\n  [class.max-w-xl]=\"!inline()\"\n  [class.z-dropdown]=\"isOpen()\"\n>\n  @if (inline()) {\n    <!-- Inline Calendar Mode -->\n    <ol-datepicker-popup\n      [inline]=\"true\"\n      [showFooter]=\"showFooter()\"\n      [dualMonth]=\"dualMonth()\"\n      [presets]=\"presets()\"\n      (valueChange)=\"onValueSelected($event)\"\n      (clearClick)=\"onPopupClear()\"\n      (applyClick)=\"onPopupApply()\"\n      (cancelClick)=\"onPopupCancel()\"\n    />\n  } @else {\n    <!-- Input Trigger & Dropdown Mode -->\n    <div class=\"flex flex-col gap-1.5 w-full\">\n      @if (variant() === 'dual-inputs') {\n        <!-- Figma Variant: 2 Separate Inputs (From & To) -->\n        <div\n          class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 w-full\"\n          (click)=\"togglePopup($event)\"\n        >\n          <!-- From Input -->\n          <div class=\"flex flex-col gap-1.5\">\n            <label class=\"flex items-center gap-1 text-sm font-medium text-heading select-none\">\n              <span>{{ fromLabel() }}</span>\n              @if (required()) {\n                <span class=\"text-fg-danger font-bold\">*</span>\n              }\n              @if (showInfoIcon()) {\n                <ol-icon name=\"question-circle\" size=\"xs\" />\n              }\n            </label>\n\n            <div class=\"relative w-full\">\n              <div\n                class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none ps-3.5\"\n              >\n                <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n              </div>\n              <input\n                type=\"text\"\n                [value]=\"startInputValue()\"\n                (input)=\"onStartInputChange($any($event.target).value)\"\n                [placeholder]=\"startPlaceholder()\"\n                [disabled]=\"disabled()\"\n                class=\"block w-full bg-neutral-secondary-medium border border-default-medium text-heading placeholder:text-body-subtle focus:outline-hidden focus:ring-2 focus:ring-brand-subtle focus:border-brand dark:focus:border-brand-subtle shadow-xs cursor-pointer transition-colors ps-10 pe-3\"\n                [class]=\"inputSizeClasses()\"\n              />\n            </div>\n          </div>\n\n          <!-- To Input -->\n          <div class=\"flex flex-col gap-1.5\">\n            <label class=\"flex items-center gap-1 text-sm font-medium text-heading select-none\">\n              <span>{{ toLabel() }}</span>\n              @if (required()) {\n                <span class=\"text-fg-danger font-bold\">*</span>\n              }\n              @if (showInfoIcon()) {\n                <ol-icon name=\"question-circle\" size=\"xs\" />\n              }\n            </label>\n\n            <div class=\"relative w-full\">\n              <div\n                class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none ps-3.5\"\n              >\n                <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n              </div>\n              <input\n                type=\"text\"\n                [value]=\"endInputValue()\"\n                (input)=\"onEndInputChange($any($event.target).value)\"\n                [placeholder]=\"endPlaceholder()\"\n                [disabled]=\"disabled()\"\n                class=\"block w-full bg-neutral-secondary-medium border border-default-medium text-heading placeholder:text-body-subtle focus:outline-hidden focus:ring-2 focus:ring-brand-subtle focus:border-brand dark:focus:border-brand-subtle shadow-xs cursor-pointer transition-colors ps-10 pe-8\"\n                [class]=\"inputSizeClasses()\"\n              />\n\n              <!-- Clear button on the right input -->\n              @if (clearable() && hasContent() && !disabled()) {\n                <button\n                  type=\"button\"\n                  (click)=\"clearRange($event)\"\n                  class=\"absolute inset-y-0 inset-e-0 flex items-center pe-2.5 text-body-subtle hover:text-heading transition-colors cursor-pointer\"\n                  aria-label=\"Xo\u00E1 kho\u1EA3ng ng\u00E0y\"\n                >\n                  <ol-icon name=\"close\" size=\"xs\" />\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      } @else {\n        <!-- Joined Single Container Variant -->\n        @if (label()) {\n          <label class=\"flex items-center gap-1 text-sm font-medium text-heading\">\n            <span>{{ label() }}</span>\n            @if (required()) {\n              <span class=\"text-fg-danger font-bold\">*</span>\n            }\n          </label>\n        }\n\n        <div\n          class=\"flex items-center gap-2 bg-neutral-secondary-medium border border-default-medium rounded-md p-1 shadow-xs focus-within:ring-2 focus-within:ring-brand-subtle focus-within:border-brand dark:focus-within:border-brand-subtle transition-all cursor-pointer\"\n          [class]=\"joinedWrapperClasses()\"\n          (click)=\"togglePopup($event)\"\n        >\n          <!-- Start Date Input -->\n          <div class=\"relative flex-1 flex items-center\">\n            <div class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none ps-3\">\n              <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n            </div>\n            <input\n              type=\"text\"\n              [value]=\"startInputValue()\"\n              (input)=\"onStartInputChange($any($event.target).value)\"\n              [placeholder]=\"startPlaceholder()\"\n              [disabled]=\"disabled()\"\n              class=\"block w-full bg-transparent text-heading placeholder:text-body-subtle ps-9 pe-2 focus:outline-hidden cursor-pointer\"\n              [class]=\"joinedInputClasses()\"\n            />\n          </div>\n\n          <!-- Separator Arrow -->\n          <span class=\"text-fg-disabled text-xs font-medium px-1 select-none\"> \u0111\u1EBFn </span>\n\n          <!-- End Date Input -->\n          <div class=\"relative flex-1 flex items-center\">\n            <div class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none ps-3\">\n              <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n            </div>\n            <input\n              type=\"text\"\n              [value]=\"endInputValue()\"\n              (input)=\"onEndInputChange($any($event.target).value)\"\n              [placeholder]=\"endPlaceholder()\"\n              [disabled]=\"disabled()\"\n              class=\"block w-full bg-transparent text-heading placeholder:text-body-subtle ps-9 pe-2 focus:outline-hidden cursor-pointer\"\n              [class]=\"joinedInputClasses()\"\n            />\n          </div>\n\n          <!-- Clear Button -->\n          @if (clearable() && hasContent() && !disabled()) {\n            <button\n              type=\"button\"\n              (click)=\"clearRange($event)\"\n              class=\"text-body-subtle hover:text-heading p-1 mr-1 rounded-full hover:bg-neutral-tertiary-medium transition-colors cursor-pointer\"\n              aria-label=\"Xo\u00E1 kho\u1EA3ng ng\u00E0y \u0111\u00E3 ch\u1ECDn\"\n            >\n              <ol-icon name=\"close\" size=\"xs\" />\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Helper Text -->\n      @if (helperText()) {\n        <p class=\"text-xs text-body-subtle\">\n          {{ helperText() }}\n        </p>\n      }\n\n      <!-- Dropdown Popup -->\n      @if (isOpen()) {\n        <div\n          #panel\n          class=\"absolute z-dropdown animate-in fade-in zoom-in-95 duration-100 rounded-base shadow-2xl w-max max-w-[calc(100vw-2rem)]\"\n        >\n          <ol-datepicker-popup\n            [showFooter]=\"showFooter()\"\n            [dualMonth]=\"dualMonth()\"\n            [presets]=\"presets()\"\n            (valueChange)=\"onValueSelected($event)\"\n            (clearClick)=\"onPopupClear()\"\n            (applyClick)=\"onPopupApply()\"\n            (cancelClick)=\"onPopupCancel()\"\n          />\n        </div>\n      }\n    </div>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], startPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPlaceholder", required: false }] }], endPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPlaceholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fromLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromLabel", required: false }] }], toLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toLabel", required: false }] }], showInfoIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInfoIcon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dualMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dualMonth", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], daysDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "daysDisabled", required: false }] }], datesDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "datesDisabled", required: false }] }], datesEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "datesEnabled", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+                    }, template: "<div\n  class=\"relative inline-block\"\n  [class.w-full]=\"!inline()\"\n  [class.max-w-xl]=\"!inline()\"\n  [class.z-dropdown]=\"isOpen()\"\n>\n  @if (inline()) {\n    <!-- Inline Calendar Mode -->\n    <ol-datepicker-popup\n      [inline]=\"true\"\n      [showFooter]=\"showFooter()\"\n      [dualMonth]=\"dualMonth()\"\n      [presets]=\"presets()\"\n      (valueChange)=\"onValueSelected($event)\"\n      (clearClick)=\"onPopupClear()\"\n      (applyClick)=\"onPopupApply()\"\n      (cancelClick)=\"onPopupCancel()\"\n    />\n  } @else {\n    <!-- Input Trigger & Dropdown Mode -->\n    <div [class]=\"stackClasses()\" [style.--ol-label-w]=\"labelWidth() || null\">\n      @if (variant() === 'dual-inputs') {\n        <!-- Figma Variant: 2 Separate Inputs (From & To) -->\n        <div\n          class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 w-full\"\n          (click)=\"togglePopup($event)\"\n        >\n          <!-- From Input -->\n          <div [class]=\"columnClasses()\">\n            @if (!floatingLabel()) {\n              <ol-field-label\n                [beside]=\"labelBeside()\"\n                [size]=\"size()\"\n                [text]=\"fromLabel()\"\n                [forId]=\"startInputId\"\n                [required]=\"required()\"\n                [helpIcon]=\"showInfoIcon()\"\n                [flush]=\"true\"\n              />\n            }\n            <ol-field-frame\n              [enabled]=\"floatingLabel()\"\n              [label]=\"fromLabel()\"\n              [forId]=\"startInputId\"\n              [variant]=\"floatingVariant()\"\n              [size]=\"size()\"\n              [state]=\"state()\"\n              [disabled]=\"disabled()\"\n              [required]=\"required()\"\n              [hasValue]=\"!!startInputValue()\"\n              [open]=\"isOpen()\"\n            >\n              <div class=\"relative w-full\">\n                <div\n                  class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none\"\n                  [class]=\"leadPadClass()\"\n                >\n                  <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n                </div>\n                <input\n                  [id]=\"startInputId\"\n                  type=\"text\"\n                  [value]=\"startInputValue()\"\n                  (input)=\"onStartInputChange($any($event.target).value)\"\n                  [placeholder]=\"startPlaceholder()\"\n                  [disabled]=\"disabled()\"\n                  class=\"ol-field-box block w-full border text-heading placeholder:text-body-subtle focus:outline-hidden shadow-xs cursor-pointer transition-colors\"\n                  [class]=\"inputSizeClasses()\"\n                />\n              </div>\n            </ol-field-frame>\n          </div>\n\n          <!-- To Input -->\n          <div [class]=\"columnClasses()\">\n            @if (!floatingLabel()) {\n              <ol-field-label\n                [beside]=\"labelBeside()\"\n                [size]=\"size()\"\n                [text]=\"toLabel()\"\n                [forId]=\"endInputId\"\n                [required]=\"required()\"\n                [helpIcon]=\"showInfoIcon()\"\n                [flush]=\"true\"\n              />\n            }\n            <ol-field-frame\n              [enabled]=\"floatingLabel()\"\n              [label]=\"toLabel()\"\n              [forId]=\"endInputId\"\n              [variant]=\"floatingVariant()\"\n              [size]=\"size()\"\n              [state]=\"state()\"\n              [disabled]=\"disabled()\"\n              [required]=\"required()\"\n              [hasValue]=\"!!endInputValue()\"\n              [open]=\"isOpen()\"\n            >\n              <div class=\"relative w-full\">\n                <div\n                  class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none\"\n                  [class]=\"leadPadClass()\"\n                >\n                  <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n                </div>\n                <input\n                  [id]=\"endInputId\"\n                  type=\"text\"\n                  [value]=\"endInputValue()\"\n                  (input)=\"onEndInputChange($any($event.target).value)\"\n                  [placeholder]=\"endPlaceholder()\"\n                  [disabled]=\"disabled()\"\n                  class=\"ol-field-box block w-full border text-heading placeholder:text-body-subtle focus:outline-hidden shadow-xs cursor-pointer transition-colors\"\n                  [class]=\"endInputClasses()\"\n                />\n\n                <!-- Clear button on the right input -->\n                @if (showClear()) {\n                  <button\n                    type=\"button\"\n                    (click)=\"clearRange($event)\"\n                    class=\"absolute inset-y-0 inset-e-0 flex items-center text-body-subtle hover:text-heading transition-colors cursor-pointer\"\n                    [class]=\"trailPadClass()\"\n                    aria-label=\"Xo\u00E1 kho\u1EA3ng ng\u00E0y\"\n                  >\n                    <ol-icon name=\"close\" size=\"xs\" />\n                  </button>\n                }\n              </div>\n            </ol-field-frame>\n          </div>\n        </div>\n      } @else {\n        <!-- Joined Single Container Variant -->\n        @if (label() && !floatingLabel()) {\n          <ol-field-label\n            [beside]=\"labelBeside()\"\n            [size]=\"size()\"\n            [text]=\"label()\"\n            [forId]=\"startInputId\"\n            [required]=\"required()\"\n            [flush]=\"true\"\n          />\n        }\n\n        <ol-field-frame\n          [enabled]=\"floatingLabel()\"\n          [label]=\"label()\"\n          [forId]=\"startInputId\"\n          [variant]=\"floatingVariant()\"\n          [size]=\"size()\"\n          [state]=\"state()\"\n          [disabled]=\"disabled()\"\n          [required]=\"required()\"\n          [hasValue]=\"hasContent()\"\n          [open]=\"isOpen()\"\n        >\n          <div\n            class=\"ol-field-box flex items-center gap-2 border rounded-md p-1 shadow-xs transition-all cursor-pointer\"\n            [class]=\"joinedWrapperClasses()\"\n            (click)=\"togglePopup($event)\"\n          >\n            <!-- Start Date Input -->\n            <div class=\"relative flex-1 flex items-center\">\n              <div\n                class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none\"\n                [class]=\"joinedIconPadClass()\"\n              >\n                <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n              </div>\n              <input\n                [id]=\"startInputId\"\n                type=\"text\"\n                [value]=\"startInputValue()\"\n                (input)=\"onStartInputChange($any($event.target).value)\"\n                [placeholder]=\"startPlaceholder()\"\n                [disabled]=\"disabled()\"\n                class=\"block w-full bg-transparent text-heading placeholder:text-body-subtle pe-2 focus:outline-hidden cursor-pointer\"\n                [class]=\"joinedInputClasses()\"\n              />\n            </div>\n\n            <!-- Separator Arrow -->\n            <span class=\"text-fg-disabled text-xs font-medium px-1 select-none\"> \u0111\u1EBFn </span>\n\n            <!-- End Date Input -->\n            <div class=\"relative flex-1 flex items-center\">\n              <div\n                class=\"absolute inset-y-0 inset-s-0 flex items-center pointer-events-none\"\n                [class]=\"joinedIconPadClass()\"\n              >\n                <ol-icon name=\"calendar\" [size]=\"iconSize()\" />\n              </div>\n              <input\n                [id]=\"endInputId\"\n                type=\"text\"\n                [value]=\"endInputValue()\"\n                (input)=\"onEndInputChange($any($event.target).value)\"\n                [placeholder]=\"endPlaceholder()\"\n                [disabled]=\"disabled()\"\n                class=\"block w-full bg-transparent text-heading placeholder:text-body-subtle pe-2 focus:outline-hidden cursor-pointer\"\n                [class]=\"joinedInputClasses()\"\n              />\n            </div>\n\n            <!-- Clear Button -->\n            @if (clearable() && hasContent() && !disabled()) {\n              <button\n                type=\"button\"\n                (click)=\"clearRange($event)\"\n                class=\"text-body-subtle hover:text-heading p-1 mr-1 rounded-full hover:bg-neutral-tertiary-medium transition-colors cursor-pointer\"\n                aria-label=\"Xo\u00E1 kho\u1EA3ng ng\u00E0y \u0111\u00E3 ch\u1ECDn\"\n              >\n                <ol-icon name=\"close\" size=\"xs\" />\n              </button>\n            }\n          </div>\n        </ol-field-frame>\n      }\n\n      <!-- Helper Text -->\n      @if (helperText()) {\n        <p class=\"text-xs text-body-subtle\">\n          {{ helperText() }}\n        </p>\n      }\n\n      <!-- Dropdown Popup -->\n      @if (isOpen()) {\n        <div\n          #panel\n          class=\"absolute z-dropdown animate-in fade-in zoom-in-95 duration-100 rounded-base shadow-2xl w-max max-w-[calc(100vw-2rem)]\"\n        >\n          <ol-datepicker-popup\n            [showFooter]=\"showFooter()\"\n            [dualMonth]=\"dualMonth()\"\n            [presets]=\"presets()\"\n            (valueChange)=\"onValueSelected($event)\"\n            (clearClick)=\"onPopupClear()\"\n            (applyClick)=\"onPopupApply()\"\n            (cancelClick)=\"onPopupCancel()\"\n          />\n        </div>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], startPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPlaceholder", required: false }] }], endPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPlaceholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], floatingVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingVariant", required: false }] }], fromLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromLabel", required: false }] }], toLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toLabel", required: false }] }], showInfoIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInfoIcon", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dualMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dualMonth", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], daysDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "daysDisabled", required: false }] }], datesDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "datesDisabled", required: false }] }], datesEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "datesEnabled", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
 class OlDatepickerDirective {
     el = inject((ElementRef));
@@ -7934,48 +8561,485 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 }]
         }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }] } });
 
-class OlFooter {
+let nextInputId = 0;
+class OlInput {
+    /** Id tự sinh, dùng 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-input-${nextInputId++}`;
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    type = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    helperText = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
     /**
-     * Giới hạn nội dung trong khung rộng tối đa và căn giữa. Tắt đi thì chân
-     * trang trải hết bề ngang — dùng khi trang đã có khung bao ngoài.
+     * `model()` chứ không `input()`: Reactive Forms gọi `setDisabledState()` khi
+     * form khoá/mở control, mà `input()` chỉ đọc nên không ghi được. Cách dùng
+     * từ ngoài KHÔNG đổi — `[disabled]="true"` và `disabled()` vẫn như cũ.
      */
-    container = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
-    innerClasses = computed(() => 'w-full p-4 md:flex md:items-center md:justify-between' +
-        (this.container() ? ' mx-auto max-w-screen-xl' : ''), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: OlFooter, isStandalone: true, selector: "ol-footer", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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", changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFooter, decorators: [{
-            type: Component,
-            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.
- *
+    disabled = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    size = input('base', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    state = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    showAsterisk = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showAsterisk" }] : /* istanbul ignore next */ []));
+    labelIcon = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []));
+    labelTooltip = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelTooltip" }] : /* istanbul ignore next */ []));
+    /**
+     * Tên trợ năng khi ô nhập KHÔNG có nhãn nhìn thấy được.
+     *
+     * `<label for>` chỉ render khi `label()` có chữ (`@if (label())` ở đầu
+     * template), nên bố cục đặt chữ BÊN NGOÀI component — bảng lọc, thanh công
+     * cụ, trang cài đặt — để lại một `<input>` hoàn toàn không tên. Có `label()`
+     * thì không cần truyền cái này; hai thứ cùng lúc thì `aria-label` thắng và
+     * người dùng bàn phím nghe một đằng, nhìn một nẻo.
+     */
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    prefixText = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefixText" }] : /* istanbul ignore next */ []));
+    suffixText = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suffixText" }] : /* istanbul ignore next */ []));
+    addOnIcon = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "addOnIcon" }] : /* istanbul ignore next */ []));
+    leftIcon = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leftIcon" }] : /* istanbul ignore next */ []));
+    rightIcon = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rightIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Hiện nút xoá khi ô có chữ.
+     *
+     * Mặc định **TẮT**, khác `ol-select` và `ol-datepicker` (mặc định bật).
+     * Lý do: hai cái kia chọn từ danh sách nên xoá là thao tác thường gặp, còn
+     * ô nhập chữ thì người dùng vẫn chọn-hết-rồi-gõ-đè như mọi ô nhập khác.
+     * Bật sẵn cho MỌI `ol-input` đang chạy là thêm một nút vào giao diện của
+     * người khác mà họ không yêu cầu.
+     */
+    clearable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    /** Tên trợ năng của nút xoá. Đổi được khi ô có nghĩa cụ thể. */
+    clearAriaLabel = input('Xoá nội dung', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Phát khi người dùng bấm nút xoá — nơi dùng biết để tải lại danh sách. */
+    cleared = output();
+    rightHelperText = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rightHelperText" }] : /* istanbul ignore next */ []));
+    id = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /**
+     * Nhãn nổi: `label` nằm TRONG khung, nổi lên khi focus hoặc có chữ — thay
+     * cho nhãn phía trên ô. Xem `OlFieldFrame`.
+     */
+    floatingLabel = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Nhãn `top` (trên ô, mặc định) hay `left` (cùng hàng, bên trái). Nhãn nổi
+     * (`floatingLabel`) thắng — bật nó thì bỏ qua input này.
+     */
+    labelPosition = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * Độ rộng cột nhãn khi `labelPosition="left"` — độ dài CSS bất kỳ: `140px`,
+     * `10rem`, `30%`. Bỏ trống = 8rem. Các ô trong cùng form đặt cùng một số thì
+     * mép ô thẳng hàng.
+     */
+    labelWidth = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelWidth" }] : /* istanbul ignore next */ []));
+    labelLayout = computed(() => fieldLabelLayout(this.labelPosition(), this.floatingLabel()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelLayout" }] : /* istanbul ignore next */ []));
+    labelBeside = computed(() => this.labelLayout() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelBeside" }] : /* istanbul ignore next */ []));
+    /** Kiểu nhãn nổi — Figma Bordered / With background / Default. */
+    floatingVariant = input('outlined', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingVariant" }] : /* istanbul ignore next */ []));
+    /** Có chữ → nhãn nổi. `0` (input number) là CÓ giá trị. */
+    hasValue = computed(() => {
+        const v = this.value();
+        return v !== '' && v !== null && v !== undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /** Id thực dùng: ưu tiên id do nơi gọi truyền, không thì dùng id tự sinh. */
+    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 */ []));
+    /** Nối ô nhập với dòng gợi ý/lỗi cho trình đọc màn hình. */
+    describedBy = computed(() => (this.helperText() ? this.helperId() : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    /** Báo trạng thái lỗi cho công nghệ trợ giúp. */
+    ariaInvalid = computed(() => (this.state() === 'error' ? 'true' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
+    /**
+     * Padding ngang của ô nhập, theo Figma ol-input:
+     * sm 10px · base 12px · lg 14px · xl 16px.
+     *
+     * Phải gom vào một chuỗi thay vì dùng [class.px-2.5] trên template —
+     * Angular cắt phần sau dấu chấm nên [class.px-2.5] render ra "px-2",
+     * lệch 2px so với thiết kế.
+     */
+    paddingClasses = computed(() => {
+        const start = this.hasLeadingIcon() ? 'ps-0' : FIELD_PADDING_START[this.size()];
+        const end = this.hasTrailingIcon() || this.showClear() ? 'pe-0' : FIELD_PADDING_END[this.size()];
+        return `${start} ${end}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paddingClasses" }] : /* istanbul ignore next */ []));
+    /**
+     * Khoảng icon ↔ chữ đúng 8px (`FIELD_ICON_GAP`): icon mang lề đầu/cuối của
+     * khung, ô gõ bỏ lề phía có icon. Khung KHÔNG có `gap` — add-on chữ/icon
+     * phải sát ô gõ (Figma Type=Add-on: gap 0).
+     */
+    hasLeadingIcon = computed(() => this.leftIcon() && !this.addOnIcon(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasLeadingIcon" }] : /* istanbul ignore next */ []));
+    hasTrailingIcon = computed(() => this.rightIcon() || this.state() === 'error' || this.state() === 'success', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasTrailingIcon" }] : /* istanbul ignore next */ []));
+    showClear = computed(() => this.clearable() && !!this.value() && !this.disabled() && !this.readonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    leadIconClasses = computed(() => `flex shrink-0 items-center pe-2 ${FIELD_PADDING_START[this.size()]} text-body-subtle pointer-events-none`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leadIconClasses" }] : /* istanbul ignore next */ []));
+    /** Nút xoá đứng trước icon trạng thái thì để `ps-2` của icon tạo khoảng. */
+    clearClasses = computed(() => `flex shrink-0 cursor-pointer items-center py-0.5 ps-2 text-body-subtle transition-colors hover:text-heading${this.hasTrailingIcon() ? '' : ` ${FIELD_PADDING_END[this.size()]}`}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearClasses" }] : /* istanbul ignore next */ []));
+    trailIconClasses = computed(() => `flex shrink-0 items-center ps-2 ${FIELD_PADDING_END[this.size()]}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trailIconClasses" }] : /* istanbul ignore next */ []));
+    // ── ControlValueAccessor ─────────────────────────────────────────
+    /**
+     * Bốn phương thức này là thứ Angular Forms gọi tới. Thiếu chúng thì
+     * `formControlName` / `[formControl]` KHÔNG gắn được — dùng component trong
+     * Reactive Forms là lỗi runtime "No value accessor for form control".
+     */
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(val) {
+        this.value.set(val ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    /** Gọi từ template mỗi khi giá trị đổi, để form biết. */
+    emitChange(val) {
+        this.value.set(val);
+        this.onChange(val);
+    }
+    /**
+     * Xoá nội dung ô.
+     *
+     * `stopPropagation` vì nút nằm TRONG thẻ bọc: thiếu nó thì cú bấm lan ra
+     * thẻ bọc, và ở component có hành vi bấm-để-mở (select, datepicker) sẽ mở
+     * panel ngay sau khi xoá.
+     */
+    clearValue(event) {
+        event.stopPropagation();
+        this.value.set('');
+        this.onChange('');
+        this.cleared.emit();
+    }
+    /** Gọi khi rời ô nhập — form dùng để đánh dấu `touched`. */
+    markTouched() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlInput, isStandalone: true, selector: "ol-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showAsterisk: { classPropertyName: "showAsterisk", publicName: "showAsterisk", isSignal: true, isRequired: false, transformFunction: null }, labelIcon: { classPropertyName: "labelIcon", publicName: "labelIcon", isSignal: true, isRequired: false, transformFunction: null }, labelTooltip: { classPropertyName: "labelTooltip", publicName: "labelTooltip", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, suffixText: { classPropertyName: "suffixText", publicName: "suffixText", isSignal: true, isRequired: false, transformFunction: null }, addOnIcon: { classPropertyName: "addOnIcon", publicName: "addOnIcon", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, rightHelperText: { classPropertyName: "rightHelperText", publicName: "rightHelperText", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, floatingVariant: { classPropertyName: "floatingVariant", publicName: "floatingVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", cleared: "cleared" }, host: { classAttribute: "block w-full" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => OlInput),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"w-full\" [class]=\"labelLayout()\" [style.--ol-label-w]=\"labelWidth() || null\">\n  @if (label() && !floatingLabel()) {\n    <ol-field-label\n      [beside]=\"labelBeside()\"\n      [size]=\"size()\"\n      [text]=\"label()\"\n      [forId]=\"inputId()\"\n      [required]=\"required() || showAsterisk()\"\n      [helpIcon]=\"labelIcon()\"\n      [helpTooltip]=\"labelTooltip()\"\n    />\n  }\n\n  <!--\n    Icon \u0111\u1EA7u chi\u1EBFu M\u1ED8T l\u1EA7n v\u00E0o ng-template, r\u1ED3i d\u1EF1ng l\u1EA1i \u1EDF nh\u00E1nh c\u1EA7n hi\u1EC7n.\n    B\u1EA3n c\u0169 khai hai <ng-content select=\"[leftIcon]\"> (m\u1ED9t trong nh\u00E1nh addOn):\n    Angular chi\u1EBFu n\u1ED9i dung v\u00E0o slot \u0110\u1EA6U TI\u00CAN kh\u1EDBp theo th\u1EE9 t\u1EF1 template \u2014 t\u1EE9c\n    slot n\u1EB1m trong @if (addOnIcon()) \u0111ang t\u1EAFt \u2014 n\u00EAn icon [leftIcon] kh\u00F4ng bao\n    gi\u1EDD hi\u1EC7n (\u0111o /floating-label 2026-09-28: 0/28 \u00F4 c\u00F3 icon).\n  -->\n  <ng-template #leadIcon><ng-content select=\"[addOnIcon], [leftIcon]\" /></ng-template>\n\n  <!--\n    Khung nh\u00E3n n\u1ED5i d\u00F9ng chung: t\u1EAFt (floatingLabel = false) th\u00EC trong su\u1ED1t, gi\u1EEF\n    nguy\u00EAn giao di\u1EC7n c\u0169. B\u1EADt th\u00EC nh\u00E3n n\u1EB1m trong khung, n\u1ED5i khi focus/c\u00F3 ch\u1EEF.\n  -->\n  <ol-field-frame\n    [enabled]=\"floatingLabel()\"\n    [label]=\"label()\"\n    [forId]=\"inputId()\"\n    [variant]=\"floatingVariant()\"\n    [size]=\"size()\"\n    [state]=\"state()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required() || showAsterisk()\"\n    [hasValue]=\"hasValue()\"\n  >\n    <!-- Main Unified Input Container (S\u1EED d\u1EE5ng Semantic Token Classes 100%) -->\n    <div\n      class=\"ol-field-box relative flex items-center w-full border shadow-xs overflow-hidden rounded-md\"\n      [class.border-default-medium]=\"state() === 'default' || disabled()\"\n      [class.h-9]=\"size() === 'sm'\"\n      [class.h-10]=\"size() === 'base'\"\n      [class.h-12]=\"size() === 'lg'\"\n      [class.h-13]=\"size() === 'xl'\"\n      [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled() && !readonly()\"\n      [class.focus-within:border-brand]=\"state() === 'default' && !disabled() && !readonly()\"\n      [class.focus-within:ring-2]=\"\n        (!disabled() && !readonly()) ||\n        (state() === 'success' && !disabled()) ||\n        (state() === 'error' && !disabled())\n      \"\n      [class.focus-within:ring-brand-subtle]=\"state() === 'default' && !disabled() && !readonly()\"\n      [class.dark:focus-within:ring-brand-950]=\"state() === 'default' && !disabled() && !readonly()\"\n      [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n      [class.border-success]=\"state() === 'success' && !disabled()\"\n      [class.focus-within:border-success]=\"state() === 'success' && !disabled()\"\n      [class.focus-within:ring-success-medium]=\"state() === 'success' && !disabled()\"\n      [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n      [class.border-danger]=\"state() === 'error' && !disabled()\"\n      [class.focus-within:border-danger]=\"state() === 'error' && !disabled()\"\n      [class.focus-within:ring-danger-medium]=\"state() === 'error' && !disabled()\"\n      [class.bg-disabled]=\"readonly() || disabled()\"\n      [class.cursor-default]=\"readonly()\"\n      [class.opacity-60]=\"disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n    >\n      <!-- Add-on Icon Box -->\n      @if (addOnIcon()) {\n        <span\n          class=\"inline-flex items-center justify-center px-3.5 h-full text-body bg-neutral-tertiary border-e border-default-medium select-none shrink-0\"\n        >\n          <ng-container [ngTemplateOutlet]=\"leadIcon\" />\n        </span>\n      }\n\n      <!-- Prefix Add-on Text -->\n      @if (prefixText()) {\n        <span\n          class=\"inline-flex items-center px-3.5 h-full text-sm font-normal text-body bg-neutral-tertiary border-e border-default-medium select-none shrink-0\"\n        >\n          {{ prefixText() }}\n        </span>\n      }\n\n      <!-- Left Icon (Inside Input) -->\n      @if (hasLeadingIcon()) {\n        <div [class]=\"leadIconClasses()\">\n          <ng-container [ngTemplateOutlet]=\"leadIcon\" />\n        </div>\n      }\n\n      <!-- Real HTML Input -->\n      <input\n        [id]=\"inputId()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [attr.aria-required]=\"required() ? 'true' : null\"\n        [type]=\"type()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [placeholder]=\"placeholder()\"\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"emitChange($event)\"\n        (blur)=\"markTouched()\"\n        class=\"block w-full h-full bg-transparent border-0 outline-none placeholder:text-body-subtle font-normal\"\n        [class]=\"paddingClasses()\"\n        [class.text-sm]=\"size() === 'sm' || size() === 'base'\"\n        [class.text-base]=\"size() === 'lg' || size() === 'xl'\"\n        [class.text-heading]=\"(state() === 'default' && !disabled() && !readonly()) || readonly()\"\n        [class.text-fg-success-strong]=\"state() === 'success' && !disabled()\"\n        [class.text-fg-danger-strong]=\"state() === 'error' && !disabled()\"\n        [class.cursor-default]=\"readonly()\"\n        [class.text-fg-disabled]=\"disabled()\"\n        [class.cursor-not-allowed]=\"disabled()\"\n      />\n\n      <!--\n      N\u00DAT XO\u00C1 \u2014 \u0111\u1EB7t TR\u01AF\u1EDAC icon tr\u1EA1ng th\u00E1i.\n\n      Icon l\u1ED7i/th\u00E0nh c\u00F4ng ch\u1EC9 \u0111\u1EC3 \u0111\u1ECDc, n\u00FAt xo\u00E1 th\u00EC b\u1EA5m \u0111\u01B0\u1EE3c; \u0111\u1EB7t n\u00FAt sau th\u00EC \u1EDF\n      tr\u1EA1ng th\u00E1i l\u1ED7i n\u00F3 bi\u1EBFn m\u1EA5t, \u0111\u00FAng l\u00FAc ng\u01B0\u1EDDi d\u00F9ng mu\u1ED1n xo\u00E1 \u0111i g\u00F5 l\u1EA1i.\n\n      \u1EA8n khi `readonly` ho\u1EB7c `disabled`: \u00F4 kh\u00F4ng s\u1EEDa \u0111\u01B0\u1EE3c th\u00EC n\u00FAt xo\u00E1 l\u00E0 m\u1EDDi\n      b\u1EA5m v\u00E0o ch\u1ED7 kh\u00F4ng l\u00E0m g\u00EC.\n    -->\n      @if (showClear()) {\n        <button\n          type=\"button\"\n          [class]=\"clearClasses()\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (click)=\"clearValue($event)\"\n        >\n          <ol-icon name=\"close\" size=\"xs\" />\n        </button>\n      }\n\n      <!-- Right Icon / Status Icon -->\n      @if (state() === 'error') {\n        <div class=\"text-fg-danger\" [class]=\"trailIconClasses()\">\n          <ol-icon name=\"info-circle\" size=\"sm\" />\n        </div>\n      } @else if (state() === 'success') {\n        <div class=\"text-fg-success\" [class]=\"trailIconClasses()\">\n          <ol-icon name=\"check-circle\" size=\"sm\" />\n        </div>\n      } @else if (rightIcon()) {\n        <div class=\"text-body-subtle\" [class]=\"trailIconClasses()\">\n          <ng-content select=\"[rightIcon]\" />\n        </div>\n      }\n\n      <!-- Suffix Add-on Text -->\n      @if (suffixText()) {\n        <span\n          class=\"inline-flex items-center px-3.5 h-full text-sm font-normal text-body bg-neutral-tertiary border-s border-default-medium select-none shrink-0\"\n        >\n          {{ suffixText() }}\n        </span>\n      }\n    </div>\n  </ol-field-frame>\n\n  <!-- Helper Text & Right Helper Action -->\n  @if (helperText() || rightHelperText()) {\n    <div class=\"flex items-center justify-between mt-1.5 text-xs\">\n      @if (helperText()) {\n        <p\n          [id]=\"helperId()\"\n          [attr.role]=\"state() === 'error' ? 'alert' : null\"\n          [class.text-body]=\"state() === 'default'\"\n          [class.text-fg-danger]=\"state() === 'error'\"\n          [class.text-fg-success]=\"state() === 'success'\"\n        >\n          {{ helperText() }}\n        </p>\n      }\n      @if (rightHelperText()) {\n        <span class=\"text-xs text-fg-brand hover:underline cursor-pointer ms-auto font-medium\">\n          {{ rightHelperText() }}\n        </span>\n      }\n      <ng-content select=\"[rightHelperAction]\" />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }, { kind: "component", type: OlFieldFrame, selector: "ol-field-frame", inputs: ["enabled", "label", "forId", "labelId", "variant", "size", "state", "disabled", "required", "hasValue", "open", "floatStart"] }, { kind: "component", type: OlFieldLabel, selector: "ol-field-label", inputs: ["text", "forId", "labelId", "required", "helpIcon", "helpTooltip", "flush", "beside", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'ol-input', standalone: true, imports: [FormsModule, NgTemplateOutlet, OlIcon, OlFieldFrame, OlFieldLabel], 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, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => OlInput),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"w-full\" [class]=\"labelLayout()\" [style.--ol-label-w]=\"labelWidth() || null\">\n  @if (label() && !floatingLabel()) {\n    <ol-field-label\n      [beside]=\"labelBeside()\"\n      [size]=\"size()\"\n      [text]=\"label()\"\n      [forId]=\"inputId()\"\n      [required]=\"required() || showAsterisk()\"\n      [helpIcon]=\"labelIcon()\"\n      [helpTooltip]=\"labelTooltip()\"\n    />\n  }\n\n  <!--\n    Icon \u0111\u1EA7u chi\u1EBFu M\u1ED8T l\u1EA7n v\u00E0o ng-template, r\u1ED3i d\u1EF1ng l\u1EA1i \u1EDF nh\u00E1nh c\u1EA7n hi\u1EC7n.\n    B\u1EA3n c\u0169 khai hai <ng-content select=\"[leftIcon]\"> (m\u1ED9t trong nh\u00E1nh addOn):\n    Angular chi\u1EBFu n\u1ED9i dung v\u00E0o slot \u0110\u1EA6U TI\u00CAN kh\u1EDBp theo th\u1EE9 t\u1EF1 template \u2014 t\u1EE9c\n    slot n\u1EB1m trong @if (addOnIcon()) \u0111ang t\u1EAFt \u2014 n\u00EAn icon [leftIcon] kh\u00F4ng bao\n    gi\u1EDD hi\u1EC7n (\u0111o /floating-label 2026-09-28: 0/28 \u00F4 c\u00F3 icon).\n  -->\n  <ng-template #leadIcon><ng-content select=\"[addOnIcon], [leftIcon]\" /></ng-template>\n\n  <!--\n    Khung nh\u00E3n n\u1ED5i d\u00F9ng chung: t\u1EAFt (floatingLabel = false) th\u00EC trong su\u1ED1t, gi\u1EEF\n    nguy\u00EAn giao di\u1EC7n c\u0169. B\u1EADt th\u00EC nh\u00E3n n\u1EB1m trong khung, n\u1ED5i khi focus/c\u00F3 ch\u1EEF.\n  -->\n  <ol-field-frame\n    [enabled]=\"floatingLabel()\"\n    [label]=\"label()\"\n    [forId]=\"inputId()\"\n    [variant]=\"floatingVariant()\"\n    [size]=\"size()\"\n    [state]=\"state()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required() || showAsterisk()\"\n    [hasValue]=\"hasValue()\"\n  >\n    <!-- Main Unified Input Container (S\u1EED d\u1EE5ng Semantic Token Classes 100%) -->\n    <div\n      class=\"ol-field-box relative flex items-center w-full border shadow-xs overflow-hidden rounded-md\"\n      [class.border-default-medium]=\"state() === 'default' || disabled()\"\n      [class.h-9]=\"size() === 'sm'\"\n      [class.h-10]=\"size() === 'base'\"\n      [class.h-12]=\"size() === 'lg'\"\n      [class.h-13]=\"size() === 'xl'\"\n      [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled() && !readonly()\"\n      [class.focus-within:border-brand]=\"state() === 'default' && !disabled() && !readonly()\"\n      [class.focus-within:ring-2]=\"\n        (!disabled() && !readonly()) ||\n        (state() === 'success' && !disabled()) ||\n        (state() === 'error' && !disabled())\n      \"\n      [class.focus-within:ring-brand-subtle]=\"state() === 'default' && !disabled() && !readonly()\"\n      [class.dark:focus-within:ring-brand-950]=\"state() === 'default' && !disabled() && !readonly()\"\n      [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n      [class.border-success]=\"state() === 'success' && !disabled()\"\n      [class.focus-within:border-success]=\"state() === 'success' && !disabled()\"\n      [class.focus-within:ring-success-medium]=\"state() === 'success' && !disabled()\"\n      [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n      [class.border-danger]=\"state() === 'error' && !disabled()\"\n      [class.focus-within:border-danger]=\"state() === 'error' && !disabled()\"\n      [class.focus-within:ring-danger-medium]=\"state() === 'error' && !disabled()\"\n      [class.bg-disabled]=\"readonly() || disabled()\"\n      [class.cursor-default]=\"readonly()\"\n      [class.opacity-60]=\"disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n    >\n      <!-- Add-on Icon Box -->\n      @if (addOnIcon()) {\n        <span\n          class=\"inline-flex items-center justify-center px-3.5 h-full text-body bg-neutral-tertiary border-e border-default-medium select-none shrink-0\"\n        >\n          <ng-container [ngTemplateOutlet]=\"leadIcon\" />\n        </span>\n      }\n\n      <!-- Prefix Add-on Text -->\n      @if (prefixText()) {\n        <span\n          class=\"inline-flex items-center px-3.5 h-full text-sm font-normal text-body bg-neutral-tertiary border-e border-default-medium select-none shrink-0\"\n        >\n          {{ prefixText() }}\n        </span>\n      }\n\n      <!-- Left Icon (Inside Input) -->\n      @if (hasLeadingIcon()) {\n        <div [class]=\"leadIconClasses()\">\n          <ng-container [ngTemplateOutlet]=\"leadIcon\" />\n        </div>\n      }\n\n      <!-- Real HTML Input -->\n      <input\n        [id]=\"inputId()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [attr.aria-required]=\"required() ? 'true' : null\"\n        [type]=\"type()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [placeholder]=\"placeholder()\"\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"emitChange($event)\"\n        (blur)=\"markTouched()\"\n        class=\"block w-full h-full bg-transparent border-0 outline-none placeholder:text-body-subtle font-normal\"\n        [class]=\"paddingClasses()\"\n        [class.text-sm]=\"size() === 'sm' || size() === 'base'\"\n        [class.text-base]=\"size() === 'lg' || size() === 'xl'\"\n        [class.text-heading]=\"(state() === 'default' && !disabled() && !readonly()) || readonly()\"\n        [class.text-fg-success-strong]=\"state() === 'success' && !disabled()\"\n        [class.text-fg-danger-strong]=\"state() === 'error' && !disabled()\"\n        [class.cursor-default]=\"readonly()\"\n        [class.text-fg-disabled]=\"disabled()\"\n        [class.cursor-not-allowed]=\"disabled()\"\n      />\n\n      <!--\n      N\u00DAT XO\u00C1 \u2014 \u0111\u1EB7t TR\u01AF\u1EDAC icon tr\u1EA1ng th\u00E1i.\n\n      Icon l\u1ED7i/th\u00E0nh c\u00F4ng ch\u1EC9 \u0111\u1EC3 \u0111\u1ECDc, n\u00FAt xo\u00E1 th\u00EC b\u1EA5m \u0111\u01B0\u1EE3c; \u0111\u1EB7t n\u00FAt sau th\u00EC \u1EDF\n      tr\u1EA1ng th\u00E1i l\u1ED7i n\u00F3 bi\u1EBFn m\u1EA5t, \u0111\u00FAng l\u00FAc ng\u01B0\u1EDDi d\u00F9ng mu\u1ED1n xo\u00E1 \u0111i g\u00F5 l\u1EA1i.\n\n      \u1EA8n khi `readonly` ho\u1EB7c `disabled`: \u00F4 kh\u00F4ng s\u1EEDa \u0111\u01B0\u1EE3c th\u00EC n\u00FAt xo\u00E1 l\u00E0 m\u1EDDi\n      b\u1EA5m v\u00E0o ch\u1ED7 kh\u00F4ng l\u00E0m g\u00EC.\n    -->\n      @if (showClear()) {\n        <button\n          type=\"button\"\n          [class]=\"clearClasses()\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (click)=\"clearValue($event)\"\n        >\n          <ol-icon name=\"close\" size=\"xs\" />\n        </button>\n      }\n\n      <!-- Right Icon / Status Icon -->\n      @if (state() === 'error') {\n        <div class=\"text-fg-danger\" [class]=\"trailIconClasses()\">\n          <ol-icon name=\"info-circle\" size=\"sm\" />\n        </div>\n      } @else if (state() === 'success') {\n        <div class=\"text-fg-success\" [class]=\"trailIconClasses()\">\n          <ol-icon name=\"check-circle\" size=\"sm\" />\n        </div>\n      } @else if (rightIcon()) {\n        <div class=\"text-body-subtle\" [class]=\"trailIconClasses()\">\n          <ng-content select=\"[rightIcon]\" />\n        </div>\n      }\n\n      <!-- Suffix Add-on Text -->\n      @if (suffixText()) {\n        <span\n          class=\"inline-flex items-center px-3.5 h-full text-sm font-normal text-body bg-neutral-tertiary border-s border-default-medium select-none shrink-0\"\n        >\n          {{ suffixText() }}\n        </span>\n      }\n    </div>\n  </ol-field-frame>\n\n  <!-- Helper Text & Right Helper Action -->\n  @if (helperText() || rightHelperText()) {\n    <div class=\"flex items-center justify-between mt-1.5 text-xs\">\n      @if (helperText()) {\n        <p\n          [id]=\"helperId()\"\n          [attr.role]=\"state() === 'error' ? 'alert' : null\"\n          [class.text-body]=\"state() === 'default'\"\n          [class.text-fg-danger]=\"state() === 'error'\"\n          [class.text-fg-success]=\"state() === 'success'\"\n        >\n          {{ helperText() }}\n        </p>\n      }\n      @if (rightHelperText()) {\n        <span class=\"text-xs text-fg-brand hover:underline cursor-pointer ms-auto font-medium\">\n          {{ rightHelperText() }}\n        </span>\n      }\n      <ng-content select=\"[rightHelperAction]\" />\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAsterisk", required: false }] }], labelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelIcon", required: false }] }], labelTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelTooltip", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], suffixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixText", required: false }] }], addOnIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnIcon", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }], rightHelperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightHelperText", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], floatingVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingVariant", required: false }] }] } });
+
+/**
+ * Ô tìm ở đầu menu — Figma `ol-dropdown-header` Type=Form (1149:39893): một
+ * `ol-input` cỡ sm có icon tìm, đặt trên danh sách (`ol-dropdown` Type=Users,
+ * Type=With scroll).
+ *
+ * Component KHÔNG tự lọc: mục trong menu do nơi dùng chiếu vào, có thể lấy từ
+ * máy chủ, nên nơi dùng lọc theo `query` rồi hiện `ol-dropdown-state` khi rỗng
+ * hoặc đang tải.
+ *
+ * Bàn phím: ↓ xuống mục đầu, Enter chọn mục đầu còn bấm được. Esc do
+ * `ol-dropdown` lo (đóng + trả tiêu điểm về nút mở).
+ *
+ * `sticky`: menu dài có `menuClass="max-h-… overflow-y-auto"` thì ô tìm đứng
+ * yên trên đỉnh khi cuộn danh sách. `-top-2 -mt-2 pt-2` phủ luôn đệm 8px của
+ * menu, để mục cuộn qua không lộ ra phía trên ô tìm.
+ */
+class OlDropdownSearch {
+    query = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    placeholder = input('Tìm kiếm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Mở menu thì đưa tiêu điểm vào ô tìm — người mở menu có ô tìm là để gõ. */
+    autofocus = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autofocus" }] : /* istanbul ignore next */ []));
+    /** Đóng menu thì xoá từ khoá, lần mở sau thấy lại đủ danh sách. */
+    clearOnClose = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearOnClose" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    dropdown = inject(forwardRef(() => OlDropdown), { optional: true });
+    constructor() {
+        effect(() => {
+            const open = this.dropdown?.isOpen();
+            if (open === undefined)
+                return;
+            if (open && this.autofocus()) {
+                // Menu vừa bỏ `hidden` trong cùng lượt vẽ — chờ một nhịp mới focus được.
+                setTimeout(() => this.field()?.focus());
+            }
+            else if (!open && this.clearOnClose()) {
+                this.query.set('');
+            }
+        });
+    }
+    onKeydown(event) {
+        if (event.key !== 'ArrowDown' && event.key !== 'Enter')
+            return;
+        const first = this.firstItem();
+        if (!first)
+            return;
+        event.preventDefault();
+        if (event.key === 'ArrowDown')
+            first.focus();
+        else
+            first.click();
+    }
+    field() {
+        return this.host.nativeElement.querySelector('input');
+    }
+    /**
+     * Mục đầu còn bấm được trong CÙNG menu — bỏ qua mục khoá. Tính cả
+     * `menuitemcheckbox`/`menuitemradio` (menu chọn nhiều, chọn một).
+     */
+    firstItem() {
+        const menu = this.host.nativeElement.closest('[role="menu"]');
+        return (menu?.querySelector(':is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]):not([aria-disabled="true"])') ?? null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlDropdownSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: OlDropdownSearch, isStandalone: true, selector: "ol-dropdown-search", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, clearOnClose: { classPropertyName: "clearOnClose", publicName: "clearOnClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { query: "queryChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div class="sticky -top-2 z-10 -mt-2 bg-neutral-primary pt-2" (keydown)="onKeydown($event)">
+      <ol-input
+        size="sm"
+        [leftIcon]="true"
+        [clearable]="true"
+        [placeholder]="placeholder()"
+        [ariaLabel]="ariaLabel() || placeholder()"
+        [(value)]="query"
+      >
+        <ol-icon leftIcon name="magnifer" size="sm" />
+      </ol-input>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: OlInput, selector: "ol-input", inputs: ["value", "type", "label", "placeholder", "helperText", "disabled", "readonly", "size", "state", "required", "showAsterisk", "labelIcon", "labelTooltip", "ariaLabel", "prefixText", "suffixText", "addOnIcon", "leftIcon", "rightIcon", "clearable", "clearAriaLabel", "rightHelperText", "id", "floatingLabel", "labelPosition", "labelWidth", "floatingVariant"], outputs: ["valueChange", "disabledChange", "cleared"] }, { 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: OlDropdownSearch, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-dropdown-search',
+                    standalone: true,
+                    imports: [OlInput, OlIcon],
+                    template: `
+    <div class="sticky -top-2 z-10 -mt-2 bg-neutral-primary pt-2" (keydown)="onKeydown($event)">
+      <ol-input
+        size="sm"
+        [leftIcon]="true"
+        [clearable]="true"
+        [placeholder]="placeholder()"
+        [ariaLabel]="ariaLabel() || placeholder()"
+        [(value)]="query"
+      >
+        <ol-icon leftIcon name="magnifer" size="sm" />
+      </ol-input>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                }]
+        }], ctorParameters: () => [], propDecorators: { query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], clearOnClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearOnClose", required: false }] }] } });
+
+/**
+ * Trạng thái của menu khi KHÔNG có mục nào để hiện — Figma `ol-dropdown`
+ * Type=Đang tải (5266:29107) · Rỗng (5266:29111) · Không có kết quả (5266:29114).
+ *
+ * Figma ghi: "Menu lấy dữ liệu từ máy chủ phải có đủ bốn trạng thái. Thiếu
+ * Đang tải / Rỗng / Không có kết quả là lỗi hay gặp nhất ở ô tìm kiếm gợi ý."
+ *
+ * Đệm 24/16px, căn giữa. Đang tải: ba thanh xương cao 10px (thanh cuối ngắn
+ * ~70%), cách 10px. Hai trạng thái chữ: tiêu đề 14px đậm vừa `text-heading`,
+ * dòng phụ 12px `text-body-subtle`, cách 8px.
+ *
+ * `role="status"`: trình đọc màn hình báo khi danh sách vừa lọc ra rỗng —
+ * người dùng gõ tìm không nhìn thấy menu thì vẫn biết không có kết quả.
+ */
+class OlDropdownState {
+    type = input('empty', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Tiêu đề — bỏ trống thì dùng câu mặc định theo `type`. */
+    heading = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    /** Dòng phụ — bỏ trống thì dùng câu mặc định theo `type`. */
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Từ khoá vừa tìm — chèn vào câu mặc định của `no-results`. */
+    query = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    boxClasses = computed(() => this.type() === 'loading'
+        ? 'flex flex-col items-center gap-2.5 px-4 py-6'
+        : 'flex flex-col items-center gap-2 px-4 py-6 text-center', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boxClasses" }] : /* istanbul ignore next */ []));
+    resolvedHeading = computed(() => {
+        if (this.heading())
+            return this.heading();
+        switch (this.type()) {
+            case 'loading':
+                return 'Đang tải…';
+            case 'empty':
+                return 'Chưa có mục nào';
+            case 'no-results':
+                return this.query() ? `Không tìm thấy “${this.query()}”` : 'Không tìm thấy kết quả';
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedHeading" }] : /* istanbul ignore next */ []));
+    resolvedDescription = computed(() => {
+        if (this.description())
+            return this.description();
+        switch (this.type()) {
+            case 'loading':
+                return '';
+            case 'empty':
+                return 'Danh sách sẽ hiện khi có dữ liệu.';
+            case 'no-results':
+                return 'Thử từ khoá khác hoặc bỏ bớt bộ lọc.';
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDescription" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlDropdownState, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlDropdownState, isStandalone: true, selector: "ol-dropdown-state", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div role="status" aria-live="polite" [class]="boxClasses()">
+      @switch (type()) {
+        @case ('loading') {
+          <span class="sr-only">{{ resolvedHeading() }}</span>
+          <span class="block h-2.5 w-full animate-pulse rounded-sm bg-neutral-quaternary"></span>
+          <span class="block h-2.5 w-full animate-pulse rounded-sm bg-neutral-quaternary"></span>
+          <span class="block h-2.5 w-2/3 animate-pulse rounded-sm bg-neutral-quaternary"></span>
+        }
+        @case ('empty') {
+          <p class="text-sm font-medium text-heading">{{ resolvedHeading() }}</p>
+          <p class="text-xs text-body-subtle">{{ resolvedDescription() }}</p>
+        }
+        @case ('no-results') {
+          <p class="text-sm font-medium text-heading">{{ resolvedHeading() }}</p>
+          <p class="text-xs text-body-subtle">{{ resolvedDescription() }}</p>
+        }
+      }
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlDropdownState, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-dropdown-state',
+                    standalone: true,
+                    template: `
+    <div role="status" aria-live="polite" [class]="boxClasses()">
+      @switch (type()) {
+        @case ('loading') {
+          <span class="sr-only">{{ resolvedHeading() }}</span>
+          <span class="block h-2.5 w-full animate-pulse rounded-sm bg-neutral-quaternary"></span>
+          <span class="block h-2.5 w-full animate-pulse rounded-sm bg-neutral-quaternary"></span>
+          <span class="block h-2.5 w-2/3 animate-pulse rounded-sm bg-neutral-quaternary"></span>
+        }
+        @case ('empty') {
+          <p class="text-sm font-medium text-heading">{{ resolvedHeading() }}</p>
+          <p class="text-xs text-body-subtle">{{ resolvedDescription() }}</p>
+        }
+        @case ('no-results') {
+          <p class="text-sm font-medium text-heading">{{ resolvedHeading() }}</p>
+          <p class="text-xs text-body-subtle">{{ resolvedDescription() }}</p>
+        }
+      }
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }] } });
+
+class OlFooter {
+    /**
+     * Giới hạn nội dung trong khung rộng tối đa và căn giữa. Tắt đi thì chân
+     * trang trải hết bề ngang — dùng khi trang đã có khung bao ngoài.
+     */
+    container = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
+    innerClasses = computed(() => 'w-full p-4 md:flex md:items-center md:justify-between' +
+        (this.container() ? ' mx-auto max-w-screen-xl' : ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: OlFooter, isStandalone: true, selector: "ol-footer", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlFooter, decorators: [{
+            type: Component,
+            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
@@ -8414,289 +9478,98 @@ class OlCheckboxRadioForm {
     writeValue(val) {
         this.checked.set(val ?? false);
     }
-    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: OlCheckboxRadioForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlCheckboxRadioForm, isStandalone: true, selector: "ol-checkbox-radio-form", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, controlPosition: { classPropertyName: "controlPosition", publicName: "controlPosition", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, number: { classPropertyName: "number", publicName: "number", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconBoxed: { classPropertyName: "iconBoxed", publicName: "iconBoxed", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputIdInput: { classPropertyName: "inputIdInput", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", changed: "changed" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => OlCheckboxRadioForm),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<!--\n  G\u1ED1c l\u00E0 `div` ch\u1EE9 kh\u00F4ng ph\u1EA3i `label`: `ol-label` b\u00EAn trong \u0111\u00E3 render m\u1ED9t th\u1EBB\n  `<label>`, l\u1ED3ng hai label l\u00E0 HTML h\u1ECFng. \u00D4 nh\u1EADp th\u1EADt v\u1EABn c\u00F3, ch\u1EC9 \u1EA9n \u0111i, n\u00EAn\n  bi\u1EC3u m\u1EABu v\u00E0 b\u1ED9 \u0111\u1ECDc m\u00E0n h\u00ECnh v\u1EABn th\u1EA5y \u0111\u1EE7.\n-->\n<div [class]=\"cardClasses()\" (click)=\"toggle()\">\n  <input\n    class=\"peer sr-only\"\n    [type]=\"control() === 'radio' ? 'radio' : 'checkbox'\"\n    [attr.id]=\"inputId()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.name]=\"name() || null\"\n    [attr.value]=\"value() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"toggle()\"\n    (click)=\"$event.stopPropagation()\"\n  />\n\n  @if (control() !== 'none' && controlPosition() === 'start') {\n    <span [class]=\"boxClasses()\" aria-hidden=\"true\">\n      <ng-container [ngTemplateOutlet]=\"mark\" />\n    </span>\n  }\n\n  <div [class]=\"bodyClasses()\">\n    @if (icon()) {\n      @if (iconBoxed()) {\n        <ol-icon-shape [icon]=\"icon()\" size=\"base\" type=\"square\" />\n      } @else {\n        <ol-icon [name]=\"icon()\" size=\"lg\" class=\"shrink-0 text-fg-brand\" />\n      }\n    }\n\n    <ng-content select=\"[lead]\" />\n\n    @if (label() || helper() || number() !== null) {\n      <div class=\"flex min-w-0 flex-col gap-1\">\n        <ol-label [label]=\"label()\" [for]=\"inputId()\" [number]=\"number()\" />\n        @if (helper()) {\n          <ol-helper [text]=\"helper()\" size=\"base\" />\n        }\n      </div>\n    }\n\n    <ng-content />\n  </div>\n\n  @if (control() !== 'none' && controlPosition() === 'end') {\n    <span [class]=\"boxClasses()\" aria-hidden=\"true\">\n      <ng-container [ngTemplateOutlet]=\"mark\" />\n    </span>\n  }\n</div>\n\n<!-- D\u1EA5u t\u00EDch d\u00F9ng chung cho c\u1EA3 hai v\u1ECB tr\u00ED \u00F4. -->\n<ng-template #mark>\n  @if (checked()) {\n    @if (control() === 'radio') {\n      <span class=\"size-2 rounded-full bg-white\"></span>\n    } @else {\n      <!-- N\u1EC1n \u00F4 l\u00E0 `bg-brand` \u0111\u1EB7c; kh\u00F4ng khai color th\u00EC icon k\u1EBF th\u1EEBa text-body v\u00E0 t\u00E0ng h\u00ECnh. -->\n      <ol-icon name=\"check\" size=\"sm\" color=\"white\" />\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: OlLabel, selector: "ol-label", inputs: ["label", "for", "required", "showAsterisk", "labelIcon", "labelIconName", "labelTooltip", "hint", "number"] }, { kind: "component", type: OlHelper, selector: "ol-helper", inputs: ["type", "text", "state", "size", "helperId", "actionText", "actionIcon", "progress", "heading", "rules", "features"], outputs: ["action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlCheckboxRadioForm, decorators: [{
-            type: Component,
-            args: [{ selector: 'ol-checkbox-radio-form', standalone: true, imports: [NgTemplateOutlet, OlIcon, OlIconShape, OlLabel, OlHelper], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => OlCheckboxRadioForm),
-                            multi: true,
-                        },
-                    ], template: "<!--\n  G\u1ED1c l\u00E0 `div` ch\u1EE9 kh\u00F4ng ph\u1EA3i `label`: `ol-label` b\u00EAn trong \u0111\u00E3 render m\u1ED9t th\u1EBB\n  `<label>`, l\u1ED3ng hai label l\u00E0 HTML h\u1ECFng. \u00D4 nh\u1EADp th\u1EADt v\u1EABn c\u00F3, ch\u1EC9 \u1EA9n \u0111i, n\u00EAn\n  bi\u1EC3u m\u1EABu v\u00E0 b\u1ED9 \u0111\u1ECDc m\u00E0n h\u00ECnh v\u1EABn th\u1EA5y \u0111\u1EE7.\n-->\n<div [class]=\"cardClasses()\" (click)=\"toggle()\">\n  <input\n    class=\"peer sr-only\"\n    [type]=\"control() === 'radio' ? 'radio' : 'checkbox'\"\n    [attr.id]=\"inputId()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.name]=\"name() || null\"\n    [attr.value]=\"value() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"toggle()\"\n    (click)=\"$event.stopPropagation()\"\n  />\n\n  @if (control() !== 'none' && controlPosition() === 'start') {\n    <span [class]=\"boxClasses()\" aria-hidden=\"true\">\n      <ng-container [ngTemplateOutlet]=\"mark\" />\n    </span>\n  }\n\n  <div [class]=\"bodyClasses()\">\n    @if (icon()) {\n      @if (iconBoxed()) {\n        <ol-icon-shape [icon]=\"icon()\" size=\"base\" type=\"square\" />\n      } @else {\n        <ol-icon [name]=\"icon()\" size=\"lg\" class=\"shrink-0 text-fg-brand\" />\n      }\n    }\n\n    <ng-content select=\"[lead]\" />\n\n    @if (label() || helper() || number() !== null) {\n      <div class=\"flex min-w-0 flex-col gap-1\">\n        <ol-label [label]=\"label()\" [for]=\"inputId()\" [number]=\"number()\" />\n        @if (helper()) {\n          <ol-helper [text]=\"helper()\" size=\"base\" />\n        }\n      </div>\n    }\n\n    <ng-content />\n  </div>\n\n  @if (control() !== 'none' && controlPosition() === 'end') {\n    <span [class]=\"boxClasses()\" aria-hidden=\"true\">\n      <ng-container [ngTemplateOutlet]=\"mark\" />\n    </span>\n  }\n</div>\n\n<!-- D\u1EA5u t\u00EDch d\u00F9ng chung cho c\u1EA3 hai v\u1ECB tr\u00ED \u00F4. -->\n<ng-template #mark>\n  @if (checked()) {\n    @if (control() === 'radio') {\n      <span class=\"size-2 rounded-full bg-white\"></span>\n    } @else {\n      <!-- N\u1EC1n \u00F4 l\u00E0 `bg-brand` \u0111\u1EB7c; kh\u00F4ng khai color th\u00EC icon k\u1EBF th\u1EEBa text-body v\u00E0 t\u00E0ng h\u00ECnh. -->\n      <ol-icon name=\"check\" size=\"sm\" color=\"white\" />\n    }\n  }\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], controlPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlPosition", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helper: [{ type: i0.Input, args: [{ isSignal: true, alias: "helper", required: false }] }], number: [{ type: i0.Input, args: [{ isSignal: true, alias: "number", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconBoxed: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconBoxed", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], inputIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
-
-class OlCheckboxRadioGroup {
-    /** Tiêu đề nhóm. Rỗng thì không render, nhưng nhóm vẫn giữ vai trò. */
-    label = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    layout = input('stack', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
-    /** Số cột khi `layout='grid'`. Figma `Big cards grid` để 2 cột. */
-    columns = input(2, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
-    /** `radiogroup` khi các thẻ bên trong chỉ chọn được một. */
-    role = input('group', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
-    /**
-     * Tên class phải viết NGUYÊN VĂN trong mã. Tailwind v4 quét mã nguồn dạng
-     * chữ để sinh CSS, nên `grid-cols-${n}` ghép lúc chạy sẽ không có luật nào
-     * được sinh ra — class có trong DOM mà không có CSS, trông y như đúng.
-     */
-    static COLUMN_CLASSES = {
-        1: 'grid-cols-1',
-        2: 'grid-cols-2',
-        3: 'grid-cols-3',
-        4: 'grid-cols-4',
-        5: 'grid-cols-5',
-        6: 'grid-cols-6',
-    };
-    listClasses = computed(() => {
-        if (this.layout() === 'row')
-            return 'flex flex-wrap gap-4';
-        if (this.layout() === 'grid') {
-            const cols = OlCheckboxRadioGroup.COLUMN_CLASSES[this.columns()] ?? 'grid-cols-2';
-            return `grid gap-4 ${cols}`;
-        }
-        return 'flex flex-col gap-4';
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlCheckboxRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlCheckboxRadioGroup, isStandalone: true, selector: "ol-checkbox-radio-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @if (label()) {
-      <p class="mb-2 text-sm font-medium text-heading">{{ label() }}</p>
-    }
-
-    <div [attr.role]="role()" [attr.aria-label]="label() || null" [class]="listClasses()">
-      <ng-content />
-    </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlCheckboxRadioGroup, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ol-checkbox-radio-group',
-                    standalone: true,
-                    template: `
-    @if (label()) {
-      <p class="mb-2 text-sm font-medium text-heading">{{ label() }}</p>
-    }
-
-    <div [attr.role]="role()" [attr.aria-label]="label() || null" [class]="listClasses()">
-      <ng-content />
-    </div>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }] } });
-
-let nextInputId = 0;
-class OlInput {
-    /** Id tự sinh, dùng 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-input-${nextInputId++}`;
-    value = model('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    type = input('text', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    label = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    helperText = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
-    /**
-     * `model()` chứ không `input()`: Reactive Forms gọi `setDisabledState()` khi
-     * form khoá/mở control, mà `input()` chỉ đọc nên không ghi được. Cách dùng
-     * từ ngoài KHÔNG đổi — `[disabled]="true"` và `disabled()` vẫn như cũ.
-     */
-    disabled = model(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    readonly = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    size = input('base', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    state = input('default', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-    required = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-    showAsterisk = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showAsterisk" }] : /* istanbul ignore next */ []));
-    labelIcon = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "labelIcon" }] : /* istanbul ignore next */ []));
-    labelTooltip = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "labelTooltip" }] : /* istanbul ignore next */ []));
-    /**
-     * Tên trợ năng khi ô nhập KHÔNG có nhãn nhìn thấy được.
-     *
-     * `<label for>` chỉ render khi `label()` có chữ (`@if (label())` ở đầu
-     * template), nên bố cục đặt chữ BÊN NGOÀI component — bảng lọc, thanh công
-     * cụ, trang cài đặt — để lại một `<input>` hoàn toàn không tên. Có `label()`
-     * thì không cần truyền cái này; hai thứ cùng lúc thì `aria-label` thắng và
-     * người dùng bàn phím nghe một đằng, nhìn một nẻo.
-     */
-    ariaLabel = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    prefixText = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "prefixText" }] : /* istanbul ignore next */ []));
-    suffixText = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "suffixText" }] : /* istanbul ignore next */ []));
-    addOnIcon = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "addOnIcon" }] : /* istanbul ignore next */ []));
-    leftIcon = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "leftIcon" }] : /* istanbul ignore next */ []));
-    rightIcon = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rightIcon" }] : /* istanbul ignore next */ []));
-    /**
-     * Hiện nút xoá khi ô có chữ.
-     *
-     * Mặc định **TẮT**, khác `ol-select` và `ol-datepicker` (mặc định bật).
-     * Lý do: hai cái kia chọn từ danh sách nên xoá là thao tác thường gặp, còn
-     * ô nhập chữ thì người dùng vẫn chọn-hết-rồi-gõ-đè như mọi ô nhập khác.
-     * Bật sẵn cho MỌI `ol-input` đang chạy là thêm một nút vào giao diện của
-     * người khác mà họ không yêu cầu.
-     */
-    clearable = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
-    /** Tên trợ năng của nút xoá. Đổi được khi ô có nghĩa cụ thể. */
-    clearAriaLabel = input('Xoá nội dung', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
-    /** Phát khi người dùng bấm nút xoá — nơi dùng biết để tải lại danh sách. */
-    cleared = output();
-    rightHelperText = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rightHelperText" }] : /* istanbul ignore next */ []));
-    id = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    /** Id thực dùng: ưu tiên id do nơi gọi truyền, không thì dùng id tự sinh. */
-    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 */ []));
-    /** Nối ô nhập với dòng gợi ý/lỗi cho trình đọc màn hình. */
-    describedBy = computed(() => (this.helperText() ? this.helperId() : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
-    /** Báo trạng thái lỗi cho công nghệ trợ giúp. */
-    ariaInvalid = computed(() => (this.state() === 'error' ? 'true' : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
-    /**
-     * Padding ngang của ô nhập, theo Figma ol-input:
-     * sm 10px · base 12px · lg 14px · xl 16px.
-     *
-     * Phải gom vào một chuỗi thay vì dùng [class.px-2.5] trên template —
-     * Angular cắt phần sau dấu chấm nên [class.px-2.5] render ra "px-2",
-     * lệch 2px so với thiết kế.
-     */
-    paddingClasses = computed(() => {
-        const hasLeadingIcon = this.leftIcon() && !this.addOnIcon();
-        const hasTrailingIcon = this.rightIcon() || this.state() === 'error' || this.state() === 'success';
-        const classes = [];
-        if (!hasLeadingIcon) {
-            switch (this.size()) {
-                case 'sm':
-                    classes.push('px-2.5');
-                    break;
-                case 'lg':
-                    classes.push('px-3.5');
-                    break;
-                case 'xl':
-                    classes.push('px-4');
-                    break;
-                default:
-                    classes.push('px-3');
-            }
-        }
-        else {
-            classes.push('ps-2.5');
-        }
-        if (hasTrailingIcon)
-            classes.push('pe-2.5');
-        return classes.join(' ');
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "paddingClasses" }] : /* istanbul ignore next */ []));
-    // ── ControlValueAccessor ─────────────────────────────────────────
-    /**
-     * Bốn phương thức này là thứ Angular Forms gọi tới. Thiếu chúng thì
-     * `formControlName` / `[formControl]` KHÔNG gắn được — dùng component trong
-     * Reactive Forms là lỗi runtime "No value accessor for form control".
-     */
-    onChange = () => { };
-    onTouched = () => { };
-    writeValue(val) {
-        this.value.set(val ?? '');
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled.set(isDisabled);
-    }
-    /** Gọi từ template mỗi khi giá trị đổi, để form biết. */
-    emitChange(val) {
-        this.value.set(val);
-        this.onChange(val);
-    }
-    /**
-     * Xoá nội dung ô.
-     *
-     * `stopPropagation` vì nút nằm TRONG thẻ bọc: thiếu nó thì cú bấm lan ra
-     * thẻ bọc, và ở component có hành vi bấm-để-mở (select, datepicker) sẽ mở
-     * panel ngay sau khi xoá.
-     */
-    clearValue(event) {
-        event.stopPropagation();
-        this.value.set('');
-        this.onChange('');
-        this.cleared.emit();
+    registerOnChange(fn) {
+        this.onChange = fn;
     }
-    /** Gọi khi rời ô nhập — form dùng để đánh dấu `touched`. */
-    markTouched() {
-        this.onTouched();
+    registerOnTouched(fn) {
+        this.onTouched = fn;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlInput, isStandalone: true, selector: "ol-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showAsterisk: { classPropertyName: "showAsterisk", publicName: "showAsterisk", isSignal: true, isRequired: false, transformFunction: null }, labelIcon: { classPropertyName: "labelIcon", publicName: "labelIcon", isSignal: true, isRequired: false, transformFunction: null }, labelTooltip: { classPropertyName: "labelTooltip", publicName: "labelTooltip", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, suffixText: { classPropertyName: "suffixText", publicName: "suffixText", isSignal: true, isRequired: false, transformFunction: null }, addOnIcon: { classPropertyName: "addOnIcon", publicName: "addOnIcon", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, rightHelperText: { classPropertyName: "rightHelperText", publicName: "rightHelperText", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", cleared: "cleared" }, host: { classAttribute: "block w-full" }, providers: [
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlCheckboxRadioForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlCheckboxRadioForm, isStandalone: true, selector: "ol-checkbox-radio-form", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, controlPosition: { classPropertyName: "controlPosition", publicName: "controlPosition", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, number: { classPropertyName: "number", publicName: "number", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconBoxed: { classPropertyName: "iconBoxed", publicName: "iconBoxed", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputIdInput: { classPropertyName: "inputIdInput", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => OlInput),
+                useExisting: forwardRef(() => OlCheckboxRadioForm),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"w-full\">\n  @if (label()) {\n    <div class=\"flex items-center justify-between mb-1.5\">\n      <label\n        [for]=\"inputId()\"\n        class=\"inline-flex items-center gap-1 text-sm font-medium text-heading\"\n      >\n        <span>{{ label() }}</span>\n        @if (required() || showAsterisk()) {\n          <span class=\"text-fg-danger font-bold\">*</span>\n        }\n        @if (labelIcon()) {\n          <span\n            class=\"text-body-subtle hover:text-heading cursor-help inline-flex items-center\"\n            [title]=\"labelTooltip() || 'Tr\u1EE3 gi\u00FAp'\"\n          >\n            <ol-icon name=\"question-circle\" size=\"xs\" />\n          </span>\n        }\n      </label>\n    </div>\n  }\n\n  <!-- Main Unified Input Container (S\u1EED d\u1EE5ng Semantic Token Classes 100%) -->\n  <div\n    class=\"relative flex items-center w-full gap-2 border shadow-xs overflow-hidden rounded-md\"\n    [class.border-default-medium]=\"state() === 'default' || disabled()\"\n    [class.h-9]=\"size() === 'sm'\"\n    [class.h-10]=\"size() === 'base'\"\n    [class.h-12]=\"size() === 'lg'\"\n    [class.h-13]=\"size() === 'xl'\"\n    [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled() && !readonly()\"\n    [class.focus-within:border-brand]=\"state() === 'default' && !disabled() && !readonly()\"\n    [class.focus-within:ring-2]=\"\n      (!disabled() && !readonly()) ||\n      (state() === 'success' && !disabled()) ||\n      (state() === 'error' && !disabled())\n    \"\n    [class.focus-within:ring-brand-subtle]=\"state() === 'default' && !disabled() && !readonly()\"\n    [class.dark:focus-within:ring-brand-950]=\"state() === 'default' && !disabled() && !readonly()\"\n    [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n    [class.border-success]=\"state() === 'success' && !disabled()\"\n    [class.focus-within:border-success]=\"state() === 'success' && !disabled()\"\n    [class.focus-within:ring-success-medium]=\"state() === 'success' && !disabled()\"\n    [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n    [class.border-danger]=\"state() === 'error' && !disabled()\"\n    [class.focus-within:border-danger]=\"state() === 'error' && !disabled()\"\n    [class.focus-within:ring-danger-medium]=\"state() === 'error' && !disabled()\"\n    [class.bg-disabled]=\"readonly() || disabled()\"\n    [class.cursor-default]=\"readonly()\"\n    [class.opacity-60]=\"disabled()\"\n    [class.cursor-not-allowed]=\"disabled()\"\n  >\n    <!-- Add-on Icon Box -->\n    @if (addOnIcon()) {\n      <span\n        class=\"inline-flex items-center justify-center px-3.5 h-full text-body bg-neutral-tertiary border-e border-default-medium select-none shrink-0\"\n      >\n        <ng-content select=\"[addOnIcon], [leftIcon]\" />\n      </span>\n    }\n\n    <!-- Prefix Add-on Text -->\n    @if (prefixText()) {\n      <span\n        class=\"inline-flex items-center px-3.5 h-full text-sm font-normal text-body bg-neutral-tertiary border-e border-default-medium select-none shrink-0\"\n      >\n        {{ prefixText() }}\n      </span>\n    }\n\n    <!-- Left Icon (Inside Input) -->\n    @if (leftIcon() && !addOnIcon()) {\n      <div class=\"flex items-center ps-3.5 text-body-subtle pointer-events-none shrink-0\">\n        <ng-content select=\"[leftIcon]\" />\n      </div>\n    }\n\n    <!-- Real HTML Input -->\n    <input\n      [id]=\"inputId()\"\n      [attr.aria-invalid]=\"ariaInvalid()\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [type]=\"type()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [placeholder]=\"placeholder()\"\n      [ngModel]=\"value()\"\n      (ngModelChange)=\"emitChange($event)\"\n      (blur)=\"markTouched()\"\n      class=\"block w-full h-full bg-transparent border-0 outline-none placeholder:text-body-subtle font-normal\"\n      [class]=\"paddingClasses()\"\n      [class.text-sm]=\"size() === 'sm' || size() === 'base'\"\n      [class.text-base]=\"size() === 'lg' || size() === 'xl'\"\n      [class.text-heading]=\"(state() === 'default' && !disabled() && !readonly()) || readonly()\"\n      [class.text-fg-success-strong]=\"state() === 'success' && !disabled()\"\n      [class.text-fg-danger-strong]=\"state() === 'error' && !disabled()\"\n      [class.cursor-default]=\"readonly()\"\n      [class.text-fg-disabled]=\"disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n    />\n\n    <!--\n      N\u00DAT XO\u00C1 \u2014 \u0111\u1EB7t TR\u01AF\u1EDAC icon tr\u1EA1ng th\u00E1i.\n\n      Icon l\u1ED7i/th\u00E0nh c\u00F4ng ch\u1EC9 \u0111\u1EC3 \u0111\u1ECDc, n\u00FAt xo\u00E1 th\u00EC b\u1EA5m \u0111\u01B0\u1EE3c; \u0111\u1EB7t n\u00FAt sau th\u00EC \u1EDF\n      tr\u1EA1ng th\u00E1i l\u1ED7i n\u00F3 bi\u1EBFn m\u1EA5t, \u0111\u00FAng l\u00FAc ng\u01B0\u1EDDi d\u00F9ng mu\u1ED1n xo\u00E1 \u0111i g\u00F5 l\u1EA1i.\n\n      \u1EA8n khi `readonly` ho\u1EB7c `disabled`: \u00F4 kh\u00F4ng s\u1EEDa \u0111\u01B0\u1EE3c th\u00EC n\u00FAt xo\u00E1 l\u00E0 m\u1EDDi\n      b\u1EA5m v\u00E0o ch\u1ED7 kh\u00F4ng l\u00E0m g\u00EC.\n    -->\n    @if (clearable() && value() && !disabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"flex shrink-0 cursor-pointer items-center rounded-full p-0.5 pe-3 text-body-subtle transition-colors hover:text-heading\"\n        [attr.aria-label]=\"clearAriaLabel()\"\n        (click)=\"clearValue($event)\"\n      >\n        <ol-icon name=\"close\" size=\"xs\" />\n      </button>\n    }\n\n    <!-- Right Icon / Status Icon -->\n    @if (state() === 'error') {\n      <div class=\"flex items-center pe-3 shrink-0 text-fg-danger\">\n        <ol-icon name=\"info-circle\" size=\"sm\" />\n      </div>\n    } @else if (state() === 'success') {\n      <div class=\"flex items-center pe-3 shrink-0 text-fg-success\">\n        <ol-icon name=\"check-circle\" size=\"sm\" />\n      </div>\n    } @else if (rightIcon()) {\n      <div class=\"flex items-center pe-3 text-body-subtle shrink-0\">\n        <ng-content select=\"[rightIcon]\" />\n      </div>\n    }\n\n    <!-- Suffix Add-on Text -->\n    @if (suffixText()) {\n      <span\n        class=\"inline-flex items-center px-3.5 h-full text-sm font-normal text-body bg-neutral-tertiary border-s border-default-medium select-none shrink-0\"\n      >\n        {{ suffixText() }}\n      </span>\n    }\n  </div>\n\n  <!-- Helper Text & Right Helper Action -->\n  @if (helperText() || rightHelperText()) {\n    <div class=\"flex items-center justify-between mt-1.5 text-xs\">\n      @if (helperText()) {\n        <p\n          [id]=\"helperId()\"\n          [attr.role]=\"state() === 'error' ? 'alert' : null\"\n          [class.text-body]=\"state() === 'default'\"\n          [class.text-fg-danger]=\"state() === 'error'\"\n          [class.text-fg-success]=\"state() === 'success'\"\n        >\n          {{ helperText() }}\n        </p>\n      }\n      @if (rightHelperText()) {\n        <span class=\"text-xs text-fg-brand hover:underline cursor-pointer ms-auto font-medium\">\n          {{ rightHelperText() }}\n        </span>\n      }\n      <ng-content select=\"[rightHelperAction]\" />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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 });
+        ], ngImport: i0, template: "<!--\n  G\u1ED1c l\u00E0 `div` ch\u1EE9 kh\u00F4ng ph\u1EA3i `label`: `ol-label` b\u00EAn trong \u0111\u00E3 render m\u1ED9t th\u1EBB\n  `<label>`, l\u1ED3ng hai label l\u00E0 HTML h\u1ECFng. \u00D4 nh\u1EADp th\u1EADt v\u1EABn c\u00F3, ch\u1EC9 \u1EA9n \u0111i, n\u00EAn\n  bi\u1EC3u m\u1EABu v\u00E0 b\u1ED9 \u0111\u1ECDc m\u00E0n h\u00ECnh v\u1EABn th\u1EA5y \u0111\u1EE7.\n-->\n<div [class]=\"cardClasses()\" (click)=\"toggle()\">\n  <input\n    class=\"peer sr-only\"\n    [type]=\"control() === 'radio' ? 'radio' : 'checkbox'\"\n    [attr.id]=\"inputId()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.name]=\"name() || null\"\n    [attr.value]=\"value() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"toggle()\"\n    (click)=\"$event.stopPropagation()\"\n  />\n\n  @if (control() !== 'none' && controlPosition() === 'start') {\n    <span [class]=\"boxClasses()\" aria-hidden=\"true\">\n      <ng-container [ngTemplateOutlet]=\"mark\" />\n    </span>\n  }\n\n  <div [class]=\"bodyClasses()\">\n    @if (icon()) {\n      @if (iconBoxed()) {\n        <ol-icon-shape [icon]=\"icon()\" size=\"base\" type=\"square\" />\n      } @else {\n        <ol-icon [name]=\"icon()\" size=\"lg\" class=\"shrink-0 text-fg-brand\" />\n      }\n    }\n\n    <ng-content select=\"[lead]\" />\n\n    @if (label() || helper() || number() !== null) {\n      <div class=\"flex min-w-0 flex-col gap-1\">\n        <ol-label [label]=\"label()\" [for]=\"inputId()\" [number]=\"number()\" />\n        @if (helper()) {\n          <ol-helper [text]=\"helper()\" size=\"base\" />\n        }\n      </div>\n    }\n\n    <ng-content />\n  </div>\n\n  @if (control() !== 'none' && controlPosition() === 'end') {\n    <span [class]=\"boxClasses()\" aria-hidden=\"true\">\n      <ng-container [ngTemplateOutlet]=\"mark\" />\n    </span>\n  }\n</div>\n\n<!-- D\u1EA5u t\u00EDch d\u00F9ng chung cho c\u1EA3 hai v\u1ECB tr\u00ED \u00F4. -->\n<ng-template #mark>\n  @if (checked()) {\n    @if (control() === 'radio') {\n      <span class=\"size-2 rounded-full bg-white\"></span>\n    } @else {\n      <!-- N\u1EC1n \u00F4 l\u00E0 `bg-brand` \u0111\u1EB7c; kh\u00F4ng khai color th\u00EC icon k\u1EBF th\u1EEBa text-body v\u00E0 t\u00E0ng h\u00ECnh. -->\n      <ol-icon name=\"check\" size=\"sm\" color=\"white\" />\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: OlLabel, selector: "ol-label", inputs: ["label", "for", "required", "showAsterisk", "labelIcon", "labelIconName", "labelTooltip", "hint", "number"] }, { kind: "component", type: OlHelper, selector: "ol-helper", inputs: ["type", "text", "state", "size", "helperId", "actionText", "actionIcon", "progress", "heading", "rules", "features"], outputs: ["action"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlCheckboxRadioForm, decorators: [{
             type: Component,
-            args: [{ selector: 'ol-input', standalone: true, imports: [FormsModule, 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
-                        // 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, providers: [
+            args: [{ selector: 'ol-checkbox-radio-form', standalone: true, imports: [NgTemplateOutlet, OlIcon, OlIconShape, OlLabel, OlHelper], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => OlInput),
+                            useExisting: forwardRef(() => OlCheckboxRadioForm),
                             multi: true,
                         },
-                    ], template: "<div class=\"w-full\">\n  @if (label()) {\n    <div class=\"flex items-center justify-between mb-1.5\">\n      <label\n        [for]=\"inputId()\"\n        class=\"inline-flex items-center gap-1 text-sm font-medium text-heading\"\n      >\n        <span>{{ label() }}</span>\n        @if (required() || showAsterisk()) {\n          <span class=\"text-fg-danger font-bold\">*</span>\n        }\n        @if (labelIcon()) {\n          <span\n            class=\"text-body-subtle hover:text-heading cursor-help inline-flex items-center\"\n            [title]=\"labelTooltip() || 'Tr\u1EE3 gi\u00FAp'\"\n          >\n            <ol-icon name=\"question-circle\" size=\"xs\" />\n          </span>\n        }\n      </label>\n    </div>\n  }\n\n  <!-- Main Unified Input Container (S\u1EED d\u1EE5ng Semantic Token Classes 100%) -->\n  <div\n    class=\"relative flex items-center w-full gap-2 border shadow-xs overflow-hidden rounded-md\"\n    [class.border-default-medium]=\"state() === 'default' || disabled()\"\n    [class.h-9]=\"size() === 'sm'\"\n    [class.h-10]=\"size() === 'base'\"\n    [class.h-12]=\"size() === 'lg'\"\n    [class.h-13]=\"size() === 'xl'\"\n    [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled() && !readonly()\"\n    [class.focus-within:border-brand]=\"state() === 'default' && !disabled() && !readonly()\"\n    [class.focus-within:ring-2]=\"\n      (!disabled() && !readonly()) ||\n      (state() === 'success' && !disabled()) ||\n      (state() === 'error' && !disabled())\n    \"\n    [class.focus-within:ring-brand-subtle]=\"state() === 'default' && !disabled() && !readonly()\"\n    [class.dark:focus-within:ring-brand-950]=\"state() === 'default' && !disabled() && !readonly()\"\n    [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n    [class.border-success]=\"state() === 'success' && !disabled()\"\n    [class.focus-within:border-success]=\"state() === 'success' && !disabled()\"\n    [class.focus-within:ring-success-medium]=\"state() === 'success' && !disabled()\"\n    [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n    [class.border-danger]=\"state() === 'error' && !disabled()\"\n    [class.focus-within:border-danger]=\"state() === 'error' && !disabled()\"\n    [class.focus-within:ring-danger-medium]=\"state() === 'error' && !disabled()\"\n    [class.bg-disabled]=\"readonly() || disabled()\"\n    [class.cursor-default]=\"readonly()\"\n    [class.opacity-60]=\"disabled()\"\n    [class.cursor-not-allowed]=\"disabled()\"\n  >\n    <!-- Add-on Icon Box -->\n    @if (addOnIcon()) {\n      <span\n        class=\"inline-flex items-center justify-center px-3.5 h-full text-body bg-neutral-tertiary border-e border-default-medium select-none shrink-0\"\n      >\n        <ng-content select=\"[addOnIcon], [leftIcon]\" />\n      </span>\n    }\n\n    <!-- Prefix Add-on Text -->\n    @if (prefixText()) {\n      <span\n        class=\"inline-flex items-center px-3.5 h-full text-sm font-normal text-body bg-neutral-tertiary border-e border-default-medium select-none shrink-0\"\n      >\n        {{ prefixText() }}\n      </span>\n    }\n\n    <!-- Left Icon (Inside Input) -->\n    @if (leftIcon() && !addOnIcon()) {\n      <div class=\"flex items-center ps-3.5 text-body-subtle pointer-events-none shrink-0\">\n        <ng-content select=\"[leftIcon]\" />\n      </div>\n    }\n\n    <!-- Real HTML Input -->\n    <input\n      [id]=\"inputId()\"\n      [attr.aria-invalid]=\"ariaInvalid()\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [type]=\"type()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [placeholder]=\"placeholder()\"\n      [ngModel]=\"value()\"\n      (ngModelChange)=\"emitChange($event)\"\n      (blur)=\"markTouched()\"\n      class=\"block w-full h-full bg-transparent border-0 outline-none placeholder:text-body-subtle font-normal\"\n      [class]=\"paddingClasses()\"\n      [class.text-sm]=\"size() === 'sm' || size() === 'base'\"\n      [class.text-base]=\"size() === 'lg' || size() === 'xl'\"\n      [class.text-heading]=\"(state() === 'default' && !disabled() && !readonly()) || readonly()\"\n      [class.text-fg-success-strong]=\"state() === 'success' && !disabled()\"\n      [class.text-fg-danger-strong]=\"state() === 'error' && !disabled()\"\n      [class.cursor-default]=\"readonly()\"\n      [class.text-fg-disabled]=\"disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n    />\n\n    <!--\n      N\u00DAT XO\u00C1 \u2014 \u0111\u1EB7t TR\u01AF\u1EDAC icon tr\u1EA1ng th\u00E1i.\n\n      Icon l\u1ED7i/th\u00E0nh c\u00F4ng ch\u1EC9 \u0111\u1EC3 \u0111\u1ECDc, n\u00FAt xo\u00E1 th\u00EC b\u1EA5m \u0111\u01B0\u1EE3c; \u0111\u1EB7t n\u00FAt sau th\u00EC \u1EDF\n      tr\u1EA1ng th\u00E1i l\u1ED7i n\u00F3 bi\u1EBFn m\u1EA5t, \u0111\u00FAng l\u00FAc ng\u01B0\u1EDDi d\u00F9ng mu\u1ED1n xo\u00E1 \u0111i g\u00F5 l\u1EA1i.\n\n      \u1EA8n khi `readonly` ho\u1EB7c `disabled`: \u00F4 kh\u00F4ng s\u1EEDa \u0111\u01B0\u1EE3c th\u00EC n\u00FAt xo\u00E1 l\u00E0 m\u1EDDi\n      b\u1EA5m v\u00E0o ch\u1ED7 kh\u00F4ng l\u00E0m g\u00EC.\n    -->\n    @if (clearable() && value() && !disabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"flex shrink-0 cursor-pointer items-center rounded-full p-0.5 pe-3 text-body-subtle transition-colors hover:text-heading\"\n        [attr.aria-label]=\"clearAriaLabel()\"\n        (click)=\"clearValue($event)\"\n      >\n        <ol-icon name=\"close\" size=\"xs\" />\n      </button>\n    }\n\n    <!-- Right Icon / Status Icon -->\n    @if (state() === 'error') {\n      <div class=\"flex items-center pe-3 shrink-0 text-fg-danger\">\n        <ol-icon name=\"info-circle\" size=\"sm\" />\n      </div>\n    } @else if (state() === 'success') {\n      <div class=\"flex items-center pe-3 shrink-0 text-fg-success\">\n        <ol-icon name=\"check-circle\" size=\"sm\" />\n      </div>\n    } @else if (rightIcon()) {\n      <div class=\"flex items-center pe-3 text-body-subtle shrink-0\">\n        <ng-content select=\"[rightIcon]\" />\n      </div>\n    }\n\n    <!-- Suffix Add-on Text -->\n    @if (suffixText()) {\n      <span\n        class=\"inline-flex items-center px-3.5 h-full text-sm font-normal text-body bg-neutral-tertiary border-s border-default-medium select-none shrink-0\"\n      >\n        {{ suffixText() }}\n      </span>\n    }\n  </div>\n\n  <!-- Helper Text & Right Helper Action -->\n  @if (helperText() || rightHelperText()) {\n    <div class=\"flex items-center justify-between mt-1.5 text-xs\">\n      @if (helperText()) {\n        <p\n          [id]=\"helperId()\"\n          [attr.role]=\"state() === 'error' ? 'alert' : null\"\n          [class.text-body]=\"state() === 'default'\"\n          [class.text-fg-danger]=\"state() === 'error'\"\n          [class.text-fg-success]=\"state() === 'success'\"\n        >\n          {{ helperText() }}\n        </p>\n      }\n      @if (rightHelperText()) {\n        <span class=\"text-xs text-fg-brand hover:underline cursor-pointer ms-auto font-medium\">\n          {{ rightHelperText() }}\n        </span>\n      }\n      <ng-content select=\"[rightHelperAction]\" />\n    </div>\n  }\n</div>\n" }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAsterisk", required: false }] }], labelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelIcon", required: false }] }], labelTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelTooltip", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], suffixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixText", required: false }] }], addOnIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnIcon", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }], rightHelperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightHelperText", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+                    ], template: "<!--\n  G\u1ED1c l\u00E0 `div` ch\u1EE9 kh\u00F4ng ph\u1EA3i `label`: `ol-label` b\u00EAn trong \u0111\u00E3 render m\u1ED9t th\u1EBB\n  `<label>`, l\u1ED3ng hai label l\u00E0 HTML h\u1ECFng. \u00D4 nh\u1EADp th\u1EADt v\u1EABn c\u00F3, ch\u1EC9 \u1EA9n \u0111i, n\u00EAn\n  bi\u1EC3u m\u1EABu v\u00E0 b\u1ED9 \u0111\u1ECDc m\u00E0n h\u00ECnh v\u1EABn th\u1EA5y \u0111\u1EE7.\n-->\n<div [class]=\"cardClasses()\" (click)=\"toggle()\">\n  <input\n    class=\"peer sr-only\"\n    [type]=\"control() === 'radio' ? 'radio' : 'checkbox'\"\n    [attr.id]=\"inputId()\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.name]=\"name() || null\"\n    [attr.value]=\"value() || null\"\n    [checked]=\"checked()\"\n    [disabled]=\"disabled()\"\n    (change)=\"toggle()\"\n    (click)=\"$event.stopPropagation()\"\n  />\n\n  @if (control() !== 'none' && controlPosition() === 'start') {\n    <span [class]=\"boxClasses()\" aria-hidden=\"true\">\n      <ng-container [ngTemplateOutlet]=\"mark\" />\n    </span>\n  }\n\n  <div [class]=\"bodyClasses()\">\n    @if (icon()) {\n      @if (iconBoxed()) {\n        <ol-icon-shape [icon]=\"icon()\" size=\"base\" type=\"square\" />\n      } @else {\n        <ol-icon [name]=\"icon()\" size=\"lg\" class=\"shrink-0 text-fg-brand\" />\n      }\n    }\n\n    <ng-content select=\"[lead]\" />\n\n    @if (label() || helper() || number() !== null) {\n      <div class=\"flex min-w-0 flex-col gap-1\">\n        <ol-label [label]=\"label()\" [for]=\"inputId()\" [number]=\"number()\" />\n        @if (helper()) {\n          <ol-helper [text]=\"helper()\" size=\"base\" />\n        }\n      </div>\n    }\n\n    <ng-content />\n  </div>\n\n  @if (control() !== 'none' && controlPosition() === 'end') {\n    <span [class]=\"boxClasses()\" aria-hidden=\"true\">\n      <ng-container [ngTemplateOutlet]=\"mark\" />\n    </span>\n  }\n</div>\n\n<!-- D\u1EA5u t\u00EDch d\u00F9ng chung cho c\u1EA3 hai v\u1ECB tr\u00ED \u00F4. -->\n<ng-template #mark>\n  @if (checked()) {\n    @if (control() === 'radio') {\n      <span class=\"size-2 rounded-full bg-white\"></span>\n    } @else {\n      <!-- N\u1EC1n \u00F4 l\u00E0 `bg-brand` \u0111\u1EB7c; kh\u00F4ng khai color th\u00EC icon k\u1EBF th\u1EEBa text-body v\u00E0 t\u00E0ng h\u00ECnh. -->\n      <ol-icon name=\"check\" size=\"sm\" color=\"white\" />\n    }\n  }\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], controlPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlPosition", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helper: [{ type: i0.Input, args: [{ isSignal: true, alias: "helper", required: false }] }], number: [{ type: i0.Input, args: [{ isSignal: true, alias: "number", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconBoxed: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconBoxed", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], inputIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+class OlCheckboxRadioGroup {
+    /** Tiêu đề nhóm. Rỗng thì không render, nhưng nhóm vẫn giữ vai trò. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    layout = input('stack', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** Số cột khi `layout='grid'`. Figma `Big cards grid` để 2 cột. */
+    columns = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** `radiogroup` khi các thẻ bên trong chỉ chọn được một. */
+    role = input('group', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    /**
+     * Tên class phải viết NGUYÊN VĂN trong mã. Tailwind v4 quét mã nguồn dạng
+     * chữ để sinh CSS, nên `grid-cols-${n}` ghép lúc chạy sẽ không có luật nào
+     * được sinh ra — class có trong DOM mà không có CSS, trông y như đúng.
+     */
+    static COLUMN_CLASSES = {
+        1: 'grid-cols-1',
+        2: 'grid-cols-2',
+        3: 'grid-cols-3',
+        4: 'grid-cols-4',
+        5: 'grid-cols-5',
+        6: 'grid-cols-6',
+    };
+    listClasses = computed(() => {
+        if (this.layout() === 'row')
+            return 'flex flex-wrap gap-4';
+        if (this.layout() === 'grid') {
+            const cols = OlCheckboxRadioGroup.COLUMN_CLASSES[this.columns()] ?? 'grid-cols-2';
+            return `grid gap-4 ${cols}`;
+        }
+        return 'flex flex-col gap-4';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlCheckboxRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlCheckboxRadioGroup, isStandalone: true, selector: "ol-checkbox-radio-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (label()) {
+      <p class="mb-2 text-sm font-medium text-heading">{{ label() }}</p>
+    }
+
+    <div [attr.role]="role()" [attr.aria-label]="label() || null" [class]="listClasses()">
+      <ng-content />
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlCheckboxRadioGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-checkbox-radio-group',
+                    standalone: true,
+                    template: `
+    @if (label()) {
+      <p class="mb-2 text-sm font-medium text-heading">{{ label() }}</p>
+    }
+
+    <div [attr.role]="role()" [attr.aria-label]="label() || null" [class]="listClasses()">
+      <ng-content />
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }] } });
 
 let nextTextareaId = 0;
 class OlTextarea {
@@ -8749,6 +9622,32 @@ class OlTextarea {
     ...(ngDevMode ? [{ debugName: "commentBox" }] : /* istanbul ignore next */ []));
     id = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /**
+     * Nhãn nổi: `label` nằm TRONG khung ở dòng đầu, nổi lên khi focus hoặc có
+     * chữ. Không áp cho `commentBox` (thẻ bình luận có bố cục riêng).
+     */
+    floatingLabel = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Nhãn `top` (trên ô, mặc định) hay `left` (cùng hàng, bên trái). Nhãn nổi
+     * (`floatingLabel`) thắng — bật nó thì bỏ qua input này.
+     */
+    labelPosition = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * Độ rộng cột nhãn khi `labelPosition="left"` — độ dài CSS bất kỳ: `140px`,
+     * `10rem`, `30%`. Bỏ trống = 8rem. Các ô trong cùng form đặt cùng một số thì
+     * mép ô thẳng hàng.
+     */
+    labelWidth = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelWidth" }] : /* istanbul ignore next */ []));
+    labelLayout = computed(() => fieldLabelLayout(this.labelPosition(), this.floatingLabel() && !this.commentBox()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelLayout" }] : /* istanbul ignore next */ []));
+    labelBeside = computed(() => this.labelLayout() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelBeside" }] : /* istanbul ignore next */ []));
+    /** Kiểu nhãn nổi — Figma Bordered / With background / Default. */
+    floatingVariant = input('outlined', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingVariant" }] : /* istanbul ignore next */ []));
     submitComment = output();
     onSubmit() {
         // `?.` chứ không phải `.`: bind `[value]="undefined"` đè mất giá trị mặc
@@ -8788,17 +9687,17 @@ class OlTextarea {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlTextarea, isStandalone: true, selector: "ol-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showCharCount: { classPropertyName: "showCharCount", publicName: "showCharCount", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showAsterisk: { classPropertyName: "showAsterisk", publicName: "showAsterisk", isSignal: true, isRequired: false, transformFunction: null }, commentBox: { classPropertyName: "commentBox", publicName: "commentBox", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", submitComment: "submitComment" }, host: { classAttribute: "block w-full" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlTextarea, isStandalone: true, selector: "ol-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showCharCount: { classPropertyName: "showCharCount", publicName: "showCharCount", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showAsterisk: { classPropertyName: "showAsterisk", publicName: "showAsterisk", isSignal: true, isRequired: false, transformFunction: null }, commentBox: { classPropertyName: "commentBox", publicName: "commentBox", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, floatingVariant: { classPropertyName: "floatingVariant", publicName: "floatingVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", submitComment: "submitComment" }, host: { classAttribute: "block w-full" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => OlTextarea),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"w-full\">\n  @if (label()) {\n    <div class=\"flex items-center justify-between mb-1.5\">\n      <label\n        [for]=\"inputId()\"\n        class=\"inline-flex items-center gap-1 text-sm font-medium text-heading\"\n      >\n        <span>{{ label() }}</span>\n        @if (required() || showAsterisk()) {\n          <span class=\"text-fg-danger font-bold\">*</span>\n        }\n      </label>\n    </div>\n  }\n  @if (!commentBox()) {\n    <!-- Standard Textarea Input -->\n    <div class=\"relative w-full\">\n      <textarea\n        [id]=\"inputId()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [rows]=\"rows()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"placeholder()\"\n        [maxLength]=\"maxLength() ?? 5000\"\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"emitChange($event)\"\n        (blur)=\"markTouched()\"\n        class=\"block w-full p-3.5 text-sm rounded-base outline-none border font-normal shadow-xs\"\n        [class.border-default-medium]=\"state() === 'default' || disabled()\"\n        [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled()\"\n        [class.text-body]=\"state() === 'default' && !disabled()\"\n        [class.focus:border-brand]=\"state() === 'default' && !disabled()\"\n        [class.focus:ring-2]=\"!disabled()\"\n        [class.focus:ring-brand-subtle]=\"state() === 'default' && !disabled()\"\n        [class.dark:focus:ring-brand-950]=\"state() === 'default' && !disabled()\"\n        [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n        [class.border-danger]=\"state() === 'error' && !disabled()\"\n        [class.text-fg-danger-strong]=\"state() === 'error' && !disabled()\"\n        [class.focus:border-danger]=\"state() === 'error' && !disabled()\"\n        [class.focus:ring-danger-medium]=\"state() === 'error' && !disabled()\"\n        [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n        [class.border-success]=\"state() === 'success' && !disabled()\"\n        [class.text-fg-success-strong]=\"state() === 'success' && !disabled()\"\n        [class.focus:border-success]=\"state() === 'success' && !disabled()\"\n        [class.focus:ring-success-medium]=\"state() === 'success' && !disabled()\"\n        [class.bg-disabled]=\"disabled()\"\n        [class.text-fg-disabled]=\"disabled()\"\n        [class.cursor-not-allowed]=\"disabled()\"\n      ></textarea>\n    </div>\n  } @else {\n    <!--\n      Figma Ready-to-use Comment / Reply Textarea Card (`Type=Chatroom`).\n\n      `rounded-md` (12px) ch\u1EE9 kh\u00F4ng `rounded-lg` (16px): \u0111\u1ECDc Figma\n      `ol-textarea` bi\u1EBFn th\u1EC3 `Type=Chatroom, State=Initial` ra **radius 12** \u2014\n      c\u00F9ng b\u1EADc v\u1EDBi `ol-input` v\u00E0 m\u1ECDi \u00F4 nh\u1EADp kh\u00E1c trong h\u1ECD. \u0110o trang /forms\n      2026-09-17: `ol-textarea` l\u00E0 component DUY NH\u1EA4T trong h\u1ECD c\u00F3 hai gi\u00E1 tr\u1ECB\n      bo g\u00F3c (12px v\u00E0 16px), l\u1EC7ch v\u1EDBi 9 component c\u00F2n l\u1EA1i.\n    -->\n    <div\n      class=\"border border-default-medium rounded-md bg-neutral-primary overflow-hidden shadow-xs focus-within:ring-2 focus-within:ring-brand-subtle dark:focus-within:ring-brand-950 focus-within:border-brand\"\n    >\n      <textarea\n        [id]=\"inputId()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [rows]=\"rows()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"placeholder() || 'Vi\u1EBFt b\u00ECnh lu\u1EADn ho\u1EB7c ph\u1EA3n h\u1ED3i...'\"\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"emitChange($event)\"\n        (blur)=\"markTouched()\"\n        class=\"block w-full p-3.5 text-sm text-body bg-transparent border-0 outline-none resize-none placeholder:text-body-subtle\"\n      ></textarea>\n      <!-- Bottom Action Bar -->\n      <div\n        class=\"flex items-center justify-between px-3 py-2 border-t border-default-medium bg-neutral-secondary-medium\"\n      >\n        <div class=\"flex items-center gap-1 text-body-subtle\">\n          <button\n            type=\"button\"\n            class=\"p-1.5 hover:bg-neutral-secondary-medium rounded-lg text-body-subtle hover:text-body\"\n            title=\"\u0110\u00EDnh k\u00E8m t\u1EC7p\"\n          >\n            <ol-icon name=\"link\" size=\"sm\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"p-1.5 hover:bg-neutral-secondary-medium rounded-lg text-body-subtle hover:text-body\"\n            title=\"Ch\u00E8n v\u1ECB tr\u00ED/h\u00ECnh \u1EA3nh\"\n          >\n            <ol-icon name=\"photo\" size=\"sm\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"p-1.5 hover:bg-neutral-secondary-medium rounded-lg text-body-subtle hover:text-body\"\n            title=\"Bi\u1EC3u t\u01B0\u1EE3ng c\u1EA3m x\u00FAc\"\n          >\n            <ol-icon name=\"mynaui:smile\" size=\"sm\" />\n          </button>\n        </div>\n        <button\n          type=\"button\"\n          (click)=\"onSubmit()\"\n          [disabled]=\"disabled() || !value().trim()\"\n          class=\"inline-flex items-center gap-1.5 px-3.5 py-1.5 text-xs font-medium text-white bg-brand hover:bg-brand-strong disabled:opacity-50 disabled:cursor-not-allowed rounded-lg shadow-xs\"\n        >\n          <span>G\u1EEDi</span>\n          <ol-icon name=\"arrow-right\" size=\"xs\" />\n        </button>\n      </div>\n    </div>\n  }\n  @if (helperText() || showCharCount()) {\n    <div class=\"flex items-center justify-between mt-1.5 text-xs\">\n      @if (helperText()) {\n        <p\n          [class.text-body]=\"state() === 'default'\"\n          [class.text-fg-danger-strong]=\"state() === 'error'\"\n          [class.text-fg-success-strong]=\"state() === 'success'\"\n        >\n          {{ helperText() }}\n        </p>\n      }\n      @if (showCharCount()) {\n        <span class=\"text-body-subtle ms-auto\">\n          {{ value().length }}{{ maxLength() ? '/' + maxLength() : '' }} k\u00FD t\u1EF1\n        </span>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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 });
+        ], ngImport: i0, template: "<div class=\"w-full\" [class]=\"labelLayout()\" [style.--ol-label-w]=\"labelWidth() || null\">\n  @if (label() && (!floatingLabel() || commentBox())) {\n    <ol-field-label\n      [beside]=\"labelBeside()\"\n      [text]=\"label()\"\n      [forId]=\"inputId()\"\n      [required]=\"required() || showAsterisk()\"\n    />\n  }\n  @if (!commentBox()) {\n    <!-- Standard Textarea Input -->\n    <ol-field-frame\n      [enabled]=\"floatingLabel()\"\n      [label]=\"label()\"\n      [forId]=\"inputId()\"\n      [variant]=\"floatingVariant()\"\n      [state]=\"state()\"\n      [disabled]=\"disabled()\"\n      [required]=\"required() || showAsterisk()\"\n      [hasValue]=\"!!value()\"\n      [floatStart]=\"14\"\n    >\n      <div class=\"relative w-full\">\n        <textarea\n          [id]=\"inputId()\"\n          [attr.aria-invalid]=\"ariaInvalid()\"\n          [attr.aria-label]=\"ariaLabel() || null\"\n          [attr.aria-describedby]=\"describedBy()\"\n          [rows]=\"rows()\"\n          [disabled]=\"disabled()\"\n          [placeholder]=\"placeholder()\"\n          [maxLength]=\"maxLength() ?? 5000\"\n          [ngModel]=\"value()\"\n          (ngModelChange)=\"emitChange($event)\"\n          (blur)=\"markTouched()\"\n          class=\"ol-field-box block w-full p-3.5 text-sm rounded-base outline-none border font-normal shadow-xs\"\n          [class.border-default-medium]=\"state() === 'default' || disabled()\"\n          [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled()\"\n          [class.text-body]=\"state() === 'default' && !disabled()\"\n          [class.focus:border-brand]=\"state() === 'default' && !disabled()\"\n          [class.focus:ring-2]=\"!disabled()\"\n          [class.focus:ring-brand-subtle]=\"state() === 'default' && !disabled()\"\n          [class.dark:focus:ring-brand-950]=\"state() === 'default' && !disabled()\"\n          [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n          [class.border-danger]=\"state() === 'error' && !disabled()\"\n          [class.text-fg-danger-strong]=\"state() === 'error' && !disabled()\"\n          [class.focus:border-danger]=\"state() === 'error' && !disabled()\"\n          [class.focus:ring-danger-medium]=\"state() === 'error' && !disabled()\"\n          [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n          [class.border-success]=\"state() === 'success' && !disabled()\"\n          [class.text-fg-success-strong]=\"state() === 'success' && !disabled()\"\n          [class.focus:border-success]=\"state() === 'success' && !disabled()\"\n          [class.focus:ring-success-medium]=\"state() === 'success' && !disabled()\"\n          [class.bg-disabled]=\"disabled()\"\n          [class.text-fg-disabled]=\"disabled()\"\n          [class.cursor-not-allowed]=\"disabled()\"\n        ></textarea>\n      </div>\n    </ol-field-frame>\n  } @else {\n    <!--\n      Figma Ready-to-use Comment / Reply Textarea Card (`Type=Chatroom`).\n\n      `rounded-md` (12px) ch\u1EE9 kh\u00F4ng `rounded-lg` (16px): \u0111\u1ECDc Figma\n      `ol-textarea` bi\u1EBFn th\u1EC3 `Type=Chatroom, State=Initial` ra **radius 12** \u2014\n      c\u00F9ng b\u1EADc v\u1EDBi `ol-input` v\u00E0 m\u1ECDi \u00F4 nh\u1EADp kh\u00E1c trong h\u1ECD. \u0110o trang /forms\n      2026-09-17: `ol-textarea` l\u00E0 component DUY NH\u1EA4T trong h\u1ECD c\u00F3 hai gi\u00E1 tr\u1ECB\n      bo g\u00F3c (12px v\u00E0 16px), l\u1EC7ch v\u1EDBi 9 component c\u00F2n l\u1EA1i.\n    -->\n    <div\n      class=\"border border-default-medium rounded-md bg-neutral-primary overflow-hidden shadow-xs focus-within:ring-2 focus-within:ring-brand-subtle dark:focus-within:ring-brand-950 focus-within:border-brand\"\n    >\n      <textarea\n        [id]=\"inputId()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [rows]=\"rows()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"placeholder() || 'Vi\u1EBFt b\u00ECnh lu\u1EADn ho\u1EB7c ph\u1EA3n h\u1ED3i...'\"\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"emitChange($event)\"\n        (blur)=\"markTouched()\"\n        class=\"block w-full p-3.5 text-sm text-body bg-transparent border-0 outline-none resize-none placeholder:text-body-subtle\"\n      ></textarea>\n      <!-- Bottom Action Bar -->\n      <div\n        class=\"flex items-center justify-between px-3 py-2 border-t border-default-medium bg-neutral-secondary-medium\"\n      >\n        <div class=\"flex items-center gap-1 text-body-subtle\">\n          <button\n            type=\"button\"\n            class=\"p-1.5 hover:bg-neutral-secondary-medium rounded-lg text-body-subtle hover:text-body\"\n            title=\"\u0110\u00EDnh k\u00E8m t\u1EC7p\"\n          >\n            <ol-icon name=\"link\" size=\"sm\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"p-1.5 hover:bg-neutral-secondary-medium rounded-lg text-body-subtle hover:text-body\"\n            title=\"Ch\u00E8n v\u1ECB tr\u00ED/h\u00ECnh \u1EA3nh\"\n          >\n            <ol-icon name=\"photo\" size=\"sm\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"p-1.5 hover:bg-neutral-secondary-medium rounded-lg text-body-subtle hover:text-body\"\n            title=\"Bi\u1EC3u t\u01B0\u1EE3ng c\u1EA3m x\u00FAc\"\n          >\n            <ol-icon name=\"mynaui:smile\" size=\"sm\" />\n          </button>\n        </div>\n        <button\n          type=\"button\"\n          (click)=\"onSubmit()\"\n          [disabled]=\"disabled() || !value().trim()\"\n          class=\"inline-flex items-center gap-1.5 px-3.5 py-1.5 text-xs font-medium text-white bg-brand hover:bg-brand-strong disabled:opacity-50 disabled:cursor-not-allowed rounded-lg shadow-xs\"\n        >\n          <span>G\u1EEDi</span>\n          <ol-icon name=\"arrow-right\" size=\"xs\" />\n        </button>\n      </div>\n    </div>\n  }\n  @if (helperText() || showCharCount()) {\n    <div class=\"flex items-center justify-between mt-1.5 text-xs\">\n      @if (helperText()) {\n        <p\n          [class.text-body]=\"state() === 'default'\"\n          [class.text-fg-danger-strong]=\"state() === 'error'\"\n          [class.text-fg-success-strong]=\"state() === 'success'\"\n        >\n          {{ helperText() }}\n        </p>\n      }\n      @if (showCharCount()) {\n        <span class=\"text-body-subtle ms-auto\">\n          {{ value().length }}{{ maxLength() ? '/' + maxLength() : '' }} k\u00FD t\u1EF1\n        </span>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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"] }, { kind: "component", type: OlFieldFrame, selector: "ol-field-frame", inputs: ["enabled", "label", "forId", "labelId", "variant", "size", "state", "disabled", "required", "hasValue", "open", "floatStart"] }, { kind: "component", type: OlFieldLabel, selector: "ol-field-label", inputs: ["text", "forId", "labelId", "required", "helpIcon", "helpTooltip", "flush", "beside", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlTextarea, decorators: [{
             type: Component,
-            args: [{ selector: 'ol-textarea', standalone: true, imports: [FormsModule, OlIcon], host: {
+            args: [{ selector: 'ol-textarea', standalone: true, imports: [FormsModule, OlIcon, OlFieldFrame, OlFieldLabel], 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
@@ -8810,8 +9709,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                             useExisting: forwardRef(() => OlTextarea),
                             multi: true,
                         },
-                    ], template: "<div class=\"w-full\">\n  @if (label()) {\n    <div class=\"flex items-center justify-between mb-1.5\">\n      <label\n        [for]=\"inputId()\"\n        class=\"inline-flex items-center gap-1 text-sm font-medium text-heading\"\n      >\n        <span>{{ label() }}</span>\n        @if (required() || showAsterisk()) {\n          <span class=\"text-fg-danger font-bold\">*</span>\n        }\n      </label>\n    </div>\n  }\n  @if (!commentBox()) {\n    <!-- Standard Textarea Input -->\n    <div class=\"relative w-full\">\n      <textarea\n        [id]=\"inputId()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [rows]=\"rows()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"placeholder()\"\n        [maxLength]=\"maxLength() ?? 5000\"\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"emitChange($event)\"\n        (blur)=\"markTouched()\"\n        class=\"block w-full p-3.5 text-sm rounded-base outline-none border font-normal shadow-xs\"\n        [class.border-default-medium]=\"state() === 'default' || disabled()\"\n        [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled()\"\n        [class.text-body]=\"state() === 'default' && !disabled()\"\n        [class.focus:border-brand]=\"state() === 'default' && !disabled()\"\n        [class.focus:ring-2]=\"!disabled()\"\n        [class.focus:ring-brand-subtle]=\"state() === 'default' && !disabled()\"\n        [class.dark:focus:ring-brand-950]=\"state() === 'default' && !disabled()\"\n        [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n        [class.border-danger]=\"state() === 'error' && !disabled()\"\n        [class.text-fg-danger-strong]=\"state() === 'error' && !disabled()\"\n        [class.focus:border-danger]=\"state() === 'error' && !disabled()\"\n        [class.focus:ring-danger-medium]=\"state() === 'error' && !disabled()\"\n        [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n        [class.border-success]=\"state() === 'success' && !disabled()\"\n        [class.text-fg-success-strong]=\"state() === 'success' && !disabled()\"\n        [class.focus:border-success]=\"state() === 'success' && !disabled()\"\n        [class.focus:ring-success-medium]=\"state() === 'success' && !disabled()\"\n        [class.bg-disabled]=\"disabled()\"\n        [class.text-fg-disabled]=\"disabled()\"\n        [class.cursor-not-allowed]=\"disabled()\"\n      ></textarea>\n    </div>\n  } @else {\n    <!--\n      Figma Ready-to-use Comment / Reply Textarea Card (`Type=Chatroom`).\n\n      `rounded-md` (12px) ch\u1EE9 kh\u00F4ng `rounded-lg` (16px): \u0111\u1ECDc Figma\n      `ol-textarea` bi\u1EBFn th\u1EC3 `Type=Chatroom, State=Initial` ra **radius 12** \u2014\n      c\u00F9ng b\u1EADc v\u1EDBi `ol-input` v\u00E0 m\u1ECDi \u00F4 nh\u1EADp kh\u00E1c trong h\u1ECD. \u0110o trang /forms\n      2026-09-17: `ol-textarea` l\u00E0 component DUY NH\u1EA4T trong h\u1ECD c\u00F3 hai gi\u00E1 tr\u1ECB\n      bo g\u00F3c (12px v\u00E0 16px), l\u1EC7ch v\u1EDBi 9 component c\u00F2n l\u1EA1i.\n    -->\n    <div\n      class=\"border border-default-medium rounded-md bg-neutral-primary overflow-hidden shadow-xs focus-within:ring-2 focus-within:ring-brand-subtle dark:focus-within:ring-brand-950 focus-within:border-brand\"\n    >\n      <textarea\n        [id]=\"inputId()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [rows]=\"rows()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"placeholder() || 'Vi\u1EBFt b\u00ECnh lu\u1EADn ho\u1EB7c ph\u1EA3n h\u1ED3i...'\"\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"emitChange($event)\"\n        (blur)=\"markTouched()\"\n        class=\"block w-full p-3.5 text-sm text-body bg-transparent border-0 outline-none resize-none placeholder:text-body-subtle\"\n      ></textarea>\n      <!-- Bottom Action Bar -->\n      <div\n        class=\"flex items-center justify-between px-3 py-2 border-t border-default-medium bg-neutral-secondary-medium\"\n      >\n        <div class=\"flex items-center gap-1 text-body-subtle\">\n          <button\n            type=\"button\"\n            class=\"p-1.5 hover:bg-neutral-secondary-medium rounded-lg text-body-subtle hover:text-body\"\n            title=\"\u0110\u00EDnh k\u00E8m t\u1EC7p\"\n          >\n            <ol-icon name=\"link\" size=\"sm\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"p-1.5 hover:bg-neutral-secondary-medium rounded-lg text-body-subtle hover:text-body\"\n            title=\"Ch\u00E8n v\u1ECB tr\u00ED/h\u00ECnh \u1EA3nh\"\n          >\n            <ol-icon name=\"photo\" size=\"sm\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"p-1.5 hover:bg-neutral-secondary-medium rounded-lg text-body-subtle hover:text-body\"\n            title=\"Bi\u1EC3u t\u01B0\u1EE3ng c\u1EA3m x\u00FAc\"\n          >\n            <ol-icon name=\"mynaui:smile\" size=\"sm\" />\n          </button>\n        </div>\n        <button\n          type=\"button\"\n          (click)=\"onSubmit()\"\n          [disabled]=\"disabled() || !value().trim()\"\n          class=\"inline-flex items-center gap-1.5 px-3.5 py-1.5 text-xs font-medium text-white bg-brand hover:bg-brand-strong disabled:opacity-50 disabled:cursor-not-allowed rounded-lg shadow-xs\"\n        >\n          <span>G\u1EEDi</span>\n          <ol-icon name=\"arrow-right\" size=\"xs\" />\n        </button>\n      </div>\n    </div>\n  }\n  @if (helperText() || showCharCount()) {\n    <div class=\"flex items-center justify-between mt-1.5 text-xs\">\n      @if (helperText()) {\n        <p\n          [class.text-body]=\"state() === 'default'\"\n          [class.text-fg-danger-strong]=\"state() === 'error'\"\n          [class.text-fg-success-strong]=\"state() === 'success'\"\n        >\n          {{ helperText() }}\n        </p>\n      }\n      @if (showCharCount()) {\n        <span class=\"text-body-subtle ms-auto\">\n          {{ value().length }}{{ maxLength() ? '/' + maxLength() : '' }} k\u00FD t\u1EF1\n        </span>\n      }\n    </div>\n  }\n</div>\n" }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCharCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCharCount", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAsterisk", required: false }] }], commentBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "commentBox", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], submitComment: [{ type: i0.Output, args: ["submitComment"] }] } });
+                    ], template: "<div class=\"w-full\" [class]=\"labelLayout()\" [style.--ol-label-w]=\"labelWidth() || null\">\n  @if (label() && (!floatingLabel() || commentBox())) {\n    <ol-field-label\n      [beside]=\"labelBeside()\"\n      [text]=\"label()\"\n      [forId]=\"inputId()\"\n      [required]=\"required() || showAsterisk()\"\n    />\n  }\n  @if (!commentBox()) {\n    <!-- Standard Textarea Input -->\n    <ol-field-frame\n      [enabled]=\"floatingLabel()\"\n      [label]=\"label()\"\n      [forId]=\"inputId()\"\n      [variant]=\"floatingVariant()\"\n      [state]=\"state()\"\n      [disabled]=\"disabled()\"\n      [required]=\"required() || showAsterisk()\"\n      [hasValue]=\"!!value()\"\n      [floatStart]=\"14\"\n    >\n      <div class=\"relative w-full\">\n        <textarea\n          [id]=\"inputId()\"\n          [attr.aria-invalid]=\"ariaInvalid()\"\n          [attr.aria-label]=\"ariaLabel() || null\"\n          [attr.aria-describedby]=\"describedBy()\"\n          [rows]=\"rows()\"\n          [disabled]=\"disabled()\"\n          [placeholder]=\"placeholder()\"\n          [maxLength]=\"maxLength() ?? 5000\"\n          [ngModel]=\"value()\"\n          (ngModelChange)=\"emitChange($event)\"\n          (blur)=\"markTouched()\"\n          class=\"ol-field-box block w-full p-3.5 text-sm rounded-base outline-none border font-normal shadow-xs\"\n          [class.border-default-medium]=\"state() === 'default' || disabled()\"\n          [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled()\"\n          [class.text-body]=\"state() === 'default' && !disabled()\"\n          [class.focus:border-brand]=\"state() === 'default' && !disabled()\"\n          [class.focus:ring-2]=\"!disabled()\"\n          [class.focus:ring-brand-subtle]=\"state() === 'default' && !disabled()\"\n          [class.dark:focus:ring-brand-950]=\"state() === 'default' && !disabled()\"\n          [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n          [class.border-danger]=\"state() === 'error' && !disabled()\"\n          [class.text-fg-danger-strong]=\"state() === 'error' && !disabled()\"\n          [class.focus:border-danger]=\"state() === 'error' && !disabled()\"\n          [class.focus:ring-danger-medium]=\"state() === 'error' && !disabled()\"\n          [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n          [class.border-success]=\"state() === 'success' && !disabled()\"\n          [class.text-fg-success-strong]=\"state() === 'success' && !disabled()\"\n          [class.focus:border-success]=\"state() === 'success' && !disabled()\"\n          [class.focus:ring-success-medium]=\"state() === 'success' && !disabled()\"\n          [class.bg-disabled]=\"disabled()\"\n          [class.text-fg-disabled]=\"disabled()\"\n          [class.cursor-not-allowed]=\"disabled()\"\n        ></textarea>\n      </div>\n    </ol-field-frame>\n  } @else {\n    <!--\n      Figma Ready-to-use Comment / Reply Textarea Card (`Type=Chatroom`).\n\n      `rounded-md` (12px) ch\u1EE9 kh\u00F4ng `rounded-lg` (16px): \u0111\u1ECDc Figma\n      `ol-textarea` bi\u1EBFn th\u1EC3 `Type=Chatroom, State=Initial` ra **radius 12** \u2014\n      c\u00F9ng b\u1EADc v\u1EDBi `ol-input` v\u00E0 m\u1ECDi \u00F4 nh\u1EADp kh\u00E1c trong h\u1ECD. \u0110o trang /forms\n      2026-09-17: `ol-textarea` l\u00E0 component DUY NH\u1EA4T trong h\u1ECD c\u00F3 hai gi\u00E1 tr\u1ECB\n      bo g\u00F3c (12px v\u00E0 16px), l\u1EC7ch v\u1EDBi 9 component c\u00F2n l\u1EA1i.\n    -->\n    <div\n      class=\"border border-default-medium rounded-md bg-neutral-primary overflow-hidden shadow-xs focus-within:ring-2 focus-within:ring-brand-subtle dark:focus-within:ring-brand-950 focus-within:border-brand\"\n    >\n      <textarea\n        [id]=\"inputId()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [rows]=\"rows()\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"placeholder() || 'Vi\u1EBFt b\u00ECnh lu\u1EADn ho\u1EB7c ph\u1EA3n h\u1ED3i...'\"\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"emitChange($event)\"\n        (blur)=\"markTouched()\"\n        class=\"block w-full p-3.5 text-sm text-body bg-transparent border-0 outline-none resize-none placeholder:text-body-subtle\"\n      ></textarea>\n      <!-- Bottom Action Bar -->\n      <div\n        class=\"flex items-center justify-between px-3 py-2 border-t border-default-medium bg-neutral-secondary-medium\"\n      >\n        <div class=\"flex items-center gap-1 text-body-subtle\">\n          <button\n            type=\"button\"\n            class=\"p-1.5 hover:bg-neutral-secondary-medium rounded-lg text-body-subtle hover:text-body\"\n            title=\"\u0110\u00EDnh k\u00E8m t\u1EC7p\"\n          >\n            <ol-icon name=\"link\" size=\"sm\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"p-1.5 hover:bg-neutral-secondary-medium rounded-lg text-body-subtle hover:text-body\"\n            title=\"Ch\u00E8n v\u1ECB tr\u00ED/h\u00ECnh \u1EA3nh\"\n          >\n            <ol-icon name=\"photo\" size=\"sm\" />\n          </button>\n          <button\n            type=\"button\"\n            class=\"p-1.5 hover:bg-neutral-secondary-medium rounded-lg text-body-subtle hover:text-body\"\n            title=\"Bi\u1EC3u t\u01B0\u1EE3ng c\u1EA3m x\u00FAc\"\n          >\n            <ol-icon name=\"mynaui:smile\" size=\"sm\" />\n          </button>\n        </div>\n        <button\n          type=\"button\"\n          (click)=\"onSubmit()\"\n          [disabled]=\"disabled() || !value().trim()\"\n          class=\"inline-flex items-center gap-1.5 px-3.5 py-1.5 text-xs font-medium text-white bg-brand hover:bg-brand-strong disabled:opacity-50 disabled:cursor-not-allowed rounded-lg shadow-xs\"\n        >\n          <span>G\u1EEDi</span>\n          <ol-icon name=\"arrow-right\" size=\"xs\" />\n        </button>\n      </div>\n    </div>\n  }\n  @if (helperText() || showCharCount()) {\n    <div class=\"flex items-center justify-between mt-1.5 text-xs\">\n      @if (helperText()) {\n        <p\n          [class.text-body]=\"state() === 'default'\"\n          [class.text-fg-danger-strong]=\"state() === 'error'\"\n          [class.text-fg-success-strong]=\"state() === 'success'\"\n        >\n          {{ helperText() }}\n        </p>\n      }\n      @if (showCharCount()) {\n        <span class=\"text-body-subtle ms-auto\">\n          {{ value().length }}{{ maxLength() ? '/' + maxLength() : '' }} k\u00FD t\u1EF1\n        </span>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCharCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCharCount", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAsterisk", required: false }] }], commentBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "commentBox", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], floatingVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingVariant", required: false }] }], submitComment: [{ type: i0.Output, args: ["submitComment"] }] } });
 
 class OlSpinner {
     /**
@@ -9159,6 +10058,32 @@ class OlSelect {
     disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     // ── API mới ──────────────────────────────────────────────────────
+    /**
+     * Nhãn nổi: `label` nằm TRONG khung, nổi lên khi focus, mở danh sách hoặc có
+     * lựa chọn. Đa chọn: nhãn nằm yên ở dòng đầu, nổi lên không đẩy thẻ.
+     */
+    floatingLabel = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Nhãn `top` (trên ô, mặc định) hay `left` (cùng hàng, bên trái). Nhãn nổi
+     * (`floatingLabel`) thắng — bật nó thì bỏ qua input này.
+     */
+    labelPosition = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * Độ rộng cột nhãn khi `labelPosition="left"` — độ dài CSS bất kỳ: `140px`,
+     * `10rem`, `30%`. Bỏ trống = 8rem. Các ô trong cùng form đặt cùng một số thì
+     * mép ô thẳng hàng.
+     */
+    labelWidth = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelWidth" }] : /* istanbul ignore next */ []));
+    labelLayout = computed(() => fieldLabelLayout(this.labelPosition(), this.floatingLabel()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelLayout" }] : /* istanbul ignore next */ []));
+    labelBeside = computed(() => this.labelLayout() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelBeside" }] : /* istanbul ignore next */ []));
+    /** Kiểu nhãn nổi — Figma Bordered / With background / Default. */
+    floatingVariant = input('outlined', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingVariant" }] : /* istanbul ignore next */ []));
     placeholder = input('Chọn...', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     multiple = input(false, /* @ts-ignore */
@@ -9177,7 +10102,11 @@ class OlSelect {
     ...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
     groupBy = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []));
-    emptyText = input('Không tìm thấy kết quả phù hợp', /* @ts-ignore */
+    /**
+     * Tiêu đề khi danh sách rỗng. Bỏ trống thì theo Figma: có từ khoá →
+     * "Không tìm thấy “…”", chưa có mục nào → "Chưa có mục nào".
+     */
+    emptyText = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
     searchPlaceholder = input('Tìm kiếm...', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
@@ -9347,6 +10276,8 @@ class OlSelect {
     /** Ô tìm ở đầu panel, để chuyển focus vào khi mở. */
     oTimPanel = viewChild('oTimPanel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "oTimPanel" }] : /* istanbul ignore next */ []));
+    inlineSearch = viewChild('inlineSearch', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inlineSearch" }] : /* istanbul ignore next */ []));
     // ── Trạng thái ───────────────────────────────────────────────────
     isOpen = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
@@ -9413,10 +10344,24 @@ class OlSelect {
      * 10/12/14/16px. Đặt `ol-select size="sm"` cạnh `ol-input size="sm"` là
      * lệch 4px, và ở `xl` lệch 2px theo chiều ngược lại.
      *
-     * Có icon trái thì `ps-10` cố định — chỗ đó dành cho icon, không phải đệm.
+     * Icon trái và cụm nút phải đều `absolute`, nên khung tự chừa chỗ cho
+     * chúng bằng `FIELD_ICON_RESERVE_*`: icon ↔ chữ đúng 8px. Bản cũ `ps-10` /
+     * `pe-10` cố định cho mọi cỡ ra 10px ở cỡ base, 14px ở sm (đo 2026-09-29).
      */
-    paddingStartClass = computed(() => this.leftIcon() ? 'ps-10' : FIELD_PADDING_X[this.resolvedSize()].replace('px-', 'ps-'), /* @ts-ignore */
+    paddingStartClass = computed(() => {
+        const size = this.resolvedSize();
+        const start = this.leftIcon() ? FIELD_ICON_RESERVE_START[size] : FIELD_PADDING_START[size];
+        const padY = this.multiple() ? ` ${multiValuePadY(this.floatingOutlined())}` : '';
+        return `${start} ${FIELD_ICON_RESERVE_END[size]}${padY}`;
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "paddingStartClass" }] : /* istanbul ignore next */ []));
+    floatingOutlined = computed(() => this.floatingLabel() && this.floatingVariant() === 'outlined', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingOutlined" }] : /* istanbul ignore next */ []));
+    /** Icon trái và cụm nút phải nằm ở lề theo cỡ, như `ol-input`. */
+    leftIconPadClass = computed(() => FIELD_PADDING_START[this.resolvedSize()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leftIconPadClass" }] : /* istanbul ignore next */ []));
+    controlPadClass = computed(() => FIELD_PADDING_END[this.resolvedSize()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlPadClass" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
     destroyRef = inject(DestroyRef);
@@ -9722,12 +10667,14 @@ class OlSelect {
         if (this.remoteSearch()) {
             return this.waitingForTerm() ? [] : list;
         }
-        const q = (this.searchQuery() ?? '').trim().toLowerCase();
+        // Bỏ dấu cả hai phía: gõ "ha" ra "Hà", "dang" ra "Đặng" — người dùng
+        // hay gõ không dấu khi tìm nhanh. Bản cũ chỉ `toLowerCase()`.
+        const q = stripDiacritics((this.searchQuery() ?? '').trim());
         if (!q)
             return list;
         return list.filter((o) => {
-            const label = this.getItemLabel(o).toLowerCase();
-            const subLabel = `${o?.['subLabel'] ?? ''}`.toLowerCase();
+            const label = stripDiacritics(this.getItemLabel(o));
+            const subLabel = stripDiacritics(`${o?.['subLabel'] ?? ''}`);
             return label.includes(q) || subLabel.includes(q);
         });
     }, /* @ts-ignore */
@@ -9863,14 +10810,19 @@ class OlSelect {
         //
         // Đa chọn thì nhảy tới mục chọn ĐẦU TIÊN; chưa chọn gì thì về mục đầu.
         this.activeIndex.set(this.selectedOptionIndex());
-        // `searchPosition="panel"`: ô tìm nằm trong panel nên phải CHỦ ĐỘNG đưa
-        // focus vào, không thì người dùng gõ mà chữ không vào đâu cả. Lối
-        // `'inline'` không cần: ô nhập thay chỗ nhãn ngay trên phần tử đang focus.
+        // Đưa focus vào ô tìm ở CẢ HAI lối, không thì người dùng gõ mà chữ không
+        // vào đâu cả. Chú thích cũ ghi lối `'inline'` "không cần vì ô nhập thay
+        // chỗ nhãn ngay trên phần tử đang focus" — sai: ô nhập là phần tử RIÊNG
+        // bên trong combobox, focus ở lại `div`. Đo 2026-09-29 trên /select: bấm
+        // mở rồi gõ "van", danh sách vẫn đủ 12 mục. Phím ↑↓/Enter/Esc từ ô tìm
+        // nổi bọt lên `(keydown)` của combobox nên vẫn chạy.
         //
         // `setTimeout` vì `@if (isOpen())` chưa dựng xong DOM ở thời điểm này —
         // `viewChild` còn trả `undefined`.
-        if (this.searchable() && this.searchPosition() === 'panel') {
-            setTimeout(() => this.oTimPanel()?.nativeElement?.focus());
+        if (this.searchable()) {
+            setTimeout(() => (this.searchPosition() === 'panel'
+                ? this.oTimPanel()
+                : this.inlineSearch())?.nativeElement?.focus());
         }
         // Kéo mục đang chọn vào TẦM NHÌN. Đánh dấu thôi chưa đủ: danh sách dài
         // thì mục đó nằm ngoài khung, người dùng vẫn thấy đầu danh sách.
@@ -10139,17 +11091,25 @@ class OlSelect {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlSelect, isStandalone: true, selector: "ol-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showAsterisk: { classPropertyName: "showAsterisk", publicName: "showAsterisk", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, menuClass: { classPropertyName: "menuClass", publicName: "menuClass", isSignal: true, isRequired: false, transformFunction: null }, matchTriggerWidth: { classPropertyName: "matchTriggerWidth", publicName: "matchTriggerWidth", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, hideSelected: { classPropertyName: "hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", isSignal: true, isRequired: false, transformFunction: null }, createText: { classPropertyName: "createText", publicName: "createText", isSignal: true, isRequired: false, transformFunction: null }, groupSeparator: { classPropertyName: "groupSeparator", publicName: "groupSeparator", isSignal: true, isRequired: false, transformFunction: null }, searchPosition: { classPropertyName: "searchPosition", publicName: "searchPosition", isSignal: true, isRequired: false, transformFunction: null }, searchIcon: { classPropertyName: "searchIcon", publicName: "searchIcon", isSignal: true, isRequired: false, transformFunction: null }, searchPrefix: { classPropertyName: "searchPrefix", publicName: "searchPrefix", isSignal: true, isRequired: false, transformFunction: null }, triggerIcon: { classPropertyName: "triggerIcon", publicName: "triggerIcon", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, remoteSearch: { classPropertyName: "remoteSearch", publicName: "remoteSearch", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, typeToSearchText: { classPropertyName: "typeToSearchText", publicName: "typeToSearchText", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, bufferAmount: { classPropertyName: "bufferAmount", publicName: "bufferAmount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", search: "search", opened: "opened", closed: "closed", cleared: "cleared", added: "added", removed: "removed", selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block w-full" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlSelect, isStandalone: true, selector: "ol-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showAsterisk: { classPropertyName: "showAsterisk", publicName: "showAsterisk", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, floatingVariant: { classPropertyName: "floatingVariant", publicName: "floatingVariant", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, menuClass: { classPropertyName: "menuClass", publicName: "menuClass", isSignal: true, isRequired: false, transformFunction: null }, matchTriggerWidth: { classPropertyName: "matchTriggerWidth", publicName: "matchTriggerWidth", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, hideSelected: { classPropertyName: "hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", isSignal: true, isRequired: false, transformFunction: null }, createText: { classPropertyName: "createText", publicName: "createText", isSignal: true, isRequired: false, transformFunction: null }, groupSeparator: { classPropertyName: "groupSeparator", publicName: "groupSeparator", isSignal: true, isRequired: false, transformFunction: null }, searchPosition: { classPropertyName: "searchPosition", publicName: "searchPosition", isSignal: true, isRequired: false, transformFunction: null }, searchIcon: { classPropertyName: "searchIcon", publicName: "searchIcon", isSignal: true, isRequired: false, transformFunction: null }, searchPrefix: { classPropertyName: "searchPrefix", publicName: "searchPrefix", isSignal: true, isRequired: false, transformFunction: null }, triggerIcon: { classPropertyName: "triggerIcon", publicName: "triggerIcon", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, remoteSearch: { classPropertyName: "remoteSearch", publicName: "remoteSearch", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, typeToSearchText: { classPropertyName: "typeToSearchText", publicName: "typeToSearchText", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, bufferAmount: { classPropertyName: "bufferAmount", publicName: "bufferAmount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", search: "search", opened: "opened", closed: "closed", cleared: "cleared", added: "added", removed: "removed", selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block w-full" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => OlSelect),
                 multi: true,
             },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "labelTemplate", first: true, predicate: ["labelTemplate"], descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "listboxRef", first: true, predicate: ["listboxRef"], descendants: true, isSignal: true }, { propertyName: "oTimPanel", first: true, predicate: ["oTimPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"w-full\">\n  @if (label()) {\n    <div class=\"flex items-center justify-between mb-1.5\">\n      <label\n        [id]=\"labelId()\"\n        [for]=\"inputId()\"\n        class=\"inline-flex items-center gap-1 text-sm font-medium text-heading\"\n      >\n        <span>{{ label() }}</span>\n        @if (required() || showAsterisk()) {\n          <span class=\"text-fg-danger font-bold\">*</span>\n        }\n      </label>\n    </div>\n  }\n\n  <div class=\"relative w-full\">\n    @if (leftIcon()) {\n      <div\n        class=\"absolute inset-y-0 inset-s-0 z-10 flex items-center ps-3.5 pointer-events-none text-body-subtle\"\n      >\n        <ng-content select=\"[leftIcon]\" />\n      </div>\n    }\n\n    <!--\n      \u00D4 \u0110I\u1EC0U KHI\u1EC2N \u2014 gi\u1EEF NGUY\u00CAN b\u1EA3ng class c\u1EE7a b\u1EA3n `<select>` c\u0169 \u0111\u1EC3 giao di\u1EC7n\n      Figma kh\u00F4ng \u0111\u1ED5i m\u1ED9t pixel: c\u00F9ng vi\u1EC1n, n\u1EC1n, bo g\u00F3c, thang c\u1EE1 (h-9/h-10/h-12)\n      v\u00E0 c\u00F9ng b\u1EA3ng m\u00E0u theo `state`.\n\n      `dark:focus:ring-brand-950` GI\u1EEE b\u1EADc s\u1ED1: `brand` l\u00E0 b\u1EA3ng Figma C\u00D3 n\u00EAn b\u1EADc\n      s\u1ED1 h\u1EE3p l\u1EC7, c\u00F2n `ring-brand-softer` (token duy nh\u1EA5t tr\u1ECF brand-950 \u1EDF ch\u1EBF \u0111\u1ED9\n      t\u1ED1i) ch\u01B0a n\u01A1i n\u00E0o d\u00F9ng n\u00EAn Tailwind kh\u00F4ng sinh CSS \u2014 thay v\u00E0o l\u00E0 class\n      CH\u1EBET m\u00E0 build v\u1EABn xanh (\u0111o 2026-09-15).\n\n      Kh\u00E1c b\u1EA3n c\u0169 \u1EDF ch\u1ED7 \u0111\u00E2y l\u00E0 `<div role=\"combobox\">` ch\u1EE9 kh\u00F4ng ph\u1EA3i `<select>`\n      g\u1ED1c: th\u1EBB g\u1ED1c kh\u00F4ng cho t\u00ECm ki\u1EBFm, \u0111a ch\u1ECDn hay t\u1EF1 v\u1EBD t\u1EEBng d\u00F2ng.\n    -->\n    <div\n      [id]=\"inputId()\"\n      role=\"combobox\"\n      tabindex=\"0\"\n      [attr.aria-labelledby]=\"label() ? labelId() : triggerLabel() ? triggerLabelId() : null\"\n      [attr.aria-label]=\"label() || triggerLabel() ? null : ariaLabel() || null\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-activedescendant]=\"activeOptionId()\"\n      [attr.aria-invalid]=\"ariaInvalid()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n      aria-haspopup=\"listbox\"\n      (click)=\"toggle()\"\n      (keydown)=\"onKeyDown($event)\"\n      class=\"relative flex w-full items-center gap-1.5 border shadow-xs outline-none pe-10 font-normal\"\n      [class.border-default-medium]=\"state() === 'default' || disabled()\"\n      [class.rounded-base]=\"true\"\n      [class]=\"paddingStartClass()\"\n      [class.flex-wrap]=\"multiple()\"\n      [class.content-center]=\"multiple()\"\n      [class.py-1]=\"multiple()\"\n      [class.min-h-9]=\"resolvedSize() === 'sm'\"\n      [class.min-h-10]=\"resolvedSize() === 'base'\"\n      [class.min-h-12]=\"resolvedSize() === 'lg'\"\n      [class.min-h-13]=\"resolvedSize() === 'xl'\"\n      [class.text-sm]=\"resolvedSize() === 'sm' || resolvedSize() === 'base'\"\n      [class.text-base]=\"resolvedSize() === 'lg' || resolvedSize() === 'xl'\"\n      [class.cursor-pointer]=\"!disabled() && !readonly()\"\n      [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled()\"\n      [class.text-heading]=\"state() === 'default' && !disabled()\"\n      [class.focus:border-brand]=\"state() === 'default' && !disabled()\"\n      [class.focus:ring-2]=\"!disabled()\"\n      [class.focus:ring-brand-subtle]=\"state() === 'default' && !disabled()\"\n      [class.dark:focus:ring-brand-950]=\"state() === 'default' && !disabled()\"\n      [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n      [class.border-danger]=\"state() === 'error' && !disabled()\"\n      [class.text-fg-danger-strong]=\"state() === 'error' && !disabled()\"\n      [class.focus:border-danger]=\"state() === 'error' && !disabled()\"\n      [class.focus:ring-danger-medium]=\"state() === 'error' && !disabled()\"\n      [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n      [class.border-success]=\"state() === 'success' && !disabled()\"\n      [class.text-fg-success-strong]=\"state() === 'success' && !disabled()\"\n      [class.focus:border-success]=\"state() === 'success' && !disabled()\"\n      [class.focus:ring-success-medium]=\"state() === 'success' && !disabled()\"\n      [class.bg-disabled]=\"disabled()\"\n      [class.text-fg-disabled]=\"disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n    >\n      <!-- Th\u1EBB c\u1EE7a c\u00E1c gi\u00E1 tr\u1ECB \u0111\u00E3 ch\u1ECDn (\u0111a ch\u1ECDn) -->\n      @if (multiple()) {\n        @for (val of selectedValues(); track val) {\n          <!-- `h-6` c\u1ED1 \u0111\u1ECBnh: \u0111\u1EC3 th\u1EBB co theo ch\u1EEF th\u00EC m\u1ED7i th\u1EBB cao m\u1ED9t ki\u1EC3u v\u00E0 \u00F4\n               b\u1ECB \u0111\u1EA9y theo th\u1EBB cao nh\u1EA5t. C\u00F9ng c\u00E1ch \u0111\u00E3 ch\u1ED1t \u1EDF `ol-autocomplete`. -->\n          <!-- Chip kho\u00E1 d\u00F9ng b\u1EA3ng m\u00E0u TRUNG T\u00CDNH: m\u1EA5t n\u00FAt \u00D7 l\u00E0 d\u1EA5u hi\u1EC7u qu\u00E1\n               nh\u1EB9, ng\u01B0\u1EDDi d\u00F9ng t\u01B0\u1EDFng n\u00FAt ch\u01B0a hi\u1EC7n. \u0110\u1ED5i m\u00E0u cho th\u1EA5y ngay \u0111\u00E2y\n               l\u00E0 lo\u1EA1i chip kh\u00E1c. -->\n          <span\n            class=\"inline-flex h-6 shrink-0 items-center gap-1 rounded-md border px-2 text-xs font-medium\"\n            [class.border-brand-subtle]=\"!isLocked(val)\"\n            [class.bg-brand-softer]=\"!isLocked(val)\"\n            [class.text-fg-brand-strong]=\"!isLocked(val)\"\n            [class.border-default]=\"isLocked(val)\"\n            [class.bg-neutral-tertiary]=\"isLocked(val)\"\n            [class.text-body]=\"isLocked(val)\"\n          >\n            @if (isLocked(val)) {\n              <ol-icon name=\"lucide:lock\" size=\"xs\" class=\"shrink-0 opacity-70\" />\n            } @else if (optionOf(val)?.icon) {\n              <ol-icon [name]=\"$any(optionOf(val)).icon\" size=\"xs\" class=\"shrink-0\" />\n            } @else if (optionOf(val)?.prefix) {\n              <span class=\"shrink-0 text-2xs font-semibold tabular-nums\">{{\n                optionOf(val)?.prefix\n              }}</span>\n            }\n            <span>{{ getDisplayLabel(val) }}</span>\n            @if (!disabled() && !readonly() && !isLocked(val)) {\n              <button\n                type=\"button\"\n                (click)=\"removeValue(val, $event)\"\n                [attr.aria-label]=\"'G\u1EE1 ' + getDisplayLabel(val)\"\n                class=\"inline-flex size-4 shrink-0 items-center justify-center rounded-full text-fg-brand hover:text-fg-brand-strong focus:outline-hidden\"\n              >\n                <ol-icon name=\"close\" size=\"xs\" />\n              </button>\n            }\n          </span>\n        }\n      }\n\n      <!--\n        PH\u1EA6N C\u1ED0 \u0110\u1ECANH c\u1EE7a \u00F4 \u0111\u00F3ng \u2014 icon v\u00E0 nh\u00E3n LU\u00D4N hi\u1EC7n, d\u00F9 \u0111\u00E3 ch\u1ECDn hay ch\u01B0a,\n        d\u00F9 danh s\u00E1ch \u0111ang m\u1EDF hay \u0111\u00F3ng. Ch\u1EC9 ph\u1EA7n GI\u00C1 TR\u1ECA b\u00EAn ph\u1EA3i m\u1EDBi \u0111\u1ED5i.\n\n        \u0110\u1EB7t NGO\u00C0I c\u1EA3 ba nh\u00E1nh d\u01B0\u1EDBi (\u00F4 t\u00ECm / nh\u00E3n \u0111\u00E3 ch\u1ECDn / placeholder) ch\u00EDnh\n        l\u00E0 \u0111i\u1EC1u l\u00E0m n\u00F3 c\u1ED1 \u0111\u1ECBnh \u2014 n\u1EB1m trong nh\u00E1nh n\u00E0o th\u00EC n\u00F3 bi\u1EBFn m\u1EA5t \u1EDF hai\n        nh\u00E1nh kia.\n\n        Kh\u00E1c `icon` c\u1EE7a M\u1EE4C: c\u00E1i \u0111\u00F3 \u0111\u1ED5i theo m\u1EE5c \u0111ang ch\u1ECDn. Khai c\u1EA3 hai th\u00EC\n        `triggerIcon` th\u1EAFng, v\u00EC nh\u00E3n c\u1ED1 \u0111\u1ECBnh m\u00E0 nh\u1EA3y theo m\u1EE5c th\u00EC h\u1EBFt c\u1ED1 \u0111\u1ECBnh.\n      -->\n      @if (triggerIcon()) {\n        <ol-icon [name]=\"triggerIcon()\" size=\"sm\" class=\"shrink-0 text-body-subtle\" />\n      }\n      @if (triggerLabel()) {\n        <span [id]=\"triggerLabelId()\" class=\"shrink-0 text-sm font-medium text-body\">{{\n          triggerLabel()\n        }}</span>\n      }\n\n      <!--\n        \u00D4 G\u00D5 T\u00CCM ch\u1EC9 hi\u1EC7n khi danh s\u00E1ch \u0110ANG M\u1EDE. \u0110\u00F3ng l\u1EA1i th\u00EC hi\u1EC7n nh\u00E3n t\u0129nh \u2014\n        n\u1EBFu \u0111\u1EC3 \u00F4 nh\u1EADp lu\u00F4n \u0111\u00F3, ng\u01B0\u1EDDi d\u00F9ng t\u01B0\u1EDFng g\u00F5 th\u1EB3ng v\u00E0o \u0111\u01B0\u1EE3c, m\u00E0 gi\u00E1 tr\u1ECB\n        l\u1EA1i kh\u00F4ng \u0111\u1ED5i theo ch\u1EEF h\u1ECD g\u00F5.\n      -->\n      @if (searchable() && isOpen() && searchPosition() === 'inline') {\n        <input\n          type=\"text\"\n          [ngModel]=\"searchQuery()\"\n          (ngModelChange)=\"onSearchInput($event)\"\n          (click)=\"$event.stopPropagation()\"\n          [placeholder]=\"searchPlaceholder()\"\n          [attr.aria-label]=\"searchPlaceholder()\"\n          autocomplete=\"off\"\n          class=\"min-w-0 flex-1 border-none bg-transparent p-0 text-inherit outline-none placeholder:text-body-subtle\"\n        />\n      } @else if (!multiple() && hasValue()) {\n        @if (labelTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"labelTemplate; context: { $implicit: selectedValues()[0] }\"\n          />\n        } @else {\n          <!-- \u00D4 \u0111\u00F3ng hi\u1EC7n C\u1EA2 ph\u1EA7n \u0111\u1EA7u c\u1EE7a m\u1EE5c \u0111ang ch\u1ECDn, kh\u00F4ng ch\u1EC9 ch\u1EEF \u2014 \u0111\u00E2y\n               l\u00E0 \u0111i\u1EC3m kh\u00E1c c\u1EE7a combobox reui so v\u1EDBi \u00F4 ch\u1ECDn th\u01B0\u1EDDng. -->\n          @if (selectedItem()?.icon && !triggerIcon()) {\n            <ol-icon\n              [name]=\"$any(selectedItem()).icon\"\n              size=\"sm\"\n              class=\"shrink-0\"\n              [class]=\"selectedItem()?.prefixClass || ''\"\n            />\n          } @else if (selectedItem()?.prefix && !triggerIcon()) {\n            <span\n              class=\"shrink-0 text-2xs font-semibold tabular-nums\"\n              [class]=\"selectedItem()?.prefixClass || 'text-body-subtle'\"\n              >{{ selectedItem()?.prefix }}</span\n            >\n          }\n          <span class=\"truncate\">{{ singleLabel() }}</span>\n        }\n      } @else if (!hasValue()) {\n        <!--\n          \u1EDE tr\u1EA1ng th\u00E1i L\u1ED6I, n\u1EC1n \u0111\u1ED5i sang `bg-danger-soft` (#fef0f2) v\u00E0\n          `text-body-subtle` ch\u1EC9 c\u00F2n **4,36** \u2014 d\u01B0\u1EDBi chu\u1EA9n 4,5. N\u1EC1n `success`\n          (#ecfdf5) cho 4,59, v\u1EEBa \u0111\u1EE7, n\u00EAn ch\u1EC9 nh\u00E1nh l\u1ED7i c\u1EA7n \u0111\u1EADm h\u01A1n.\n          `text-body` tr\u00EAn n\u1EC1n \u0111\u00F3 ra 6,82 (s\u00E1ng) v\u00E0 10,66 (t\u1ED1i).\n        -->\n        <span\n          class=\"truncate\"\n          [class.text-body-subtle]=\"state() !== 'error'\"\n          [class.text-body]=\"state() === 'error'\"\n          >{{ placeholder() }}</span\n        >\n      }\n\n      <!--\n        M\u1ED8T \u00F4 \u0111i\u1EC1u khi\u1EC3n, \u0110\u1ED4I VAI theo tr\u1EA1ng th\u00E1i \u2014 kh\u00F4ng x\u1EBFp c\u1EA1nh nhau.\n        B\u1EA3n \u0111\u1EA7u c\u1EE7a t\u00F4i \u0111\u1EC3 n\u00FAt xo\u00E1 v\u00E0 `chevron-down` C\u00D9NG hi\u1EC7n: \u0111o 2026-09-17\n        tr\u00EAn `/forms` \u0111\u1EBFm **2 icon b\u00EAn ph\u1EA3i \u1EDF M\u1ECCI tr\u1EA1ng th\u00E1i**, k\u1EC3 c\u1EA3 khi danh\n        s\u00E1ch \u0111ang m\u1EDF. C\u1EE5m b\u00EAn ph\u1EA3i ch\u1EADt, hai icon 16px chen nhau tr\u00F4ng r\u1ED1i.\n\n        `ol-autocomplete` \u0111\u00E3 ch\u1ED1t l\u1ED1i n\u00E0y t\u1EEB tr\u01B0\u1EDBc (\u00F4 `w-7` \u0111\u1ED5i vai\n        spinner / xo\u00E1 / chevron); `ol-select` ph\u1EA3i theo cho nh\u1EA5t qu\u00E1n.\n\n        \u00D4 r\u1ED9ng C\u1ED0 \u0110\u1ECANH \u0111\u1EC3 khung kh\u00F4ng nh\u1EA3y m\u1ED7i l\u1EA7n icon \u0111\u1ED5i vai.\n\n        \u0110\u1EC6M PH\u1EA2I l\u00E0 B\u1EAET BU\u1ED8C, kh\u00F4ng ph\u1EA3i trang tr\u00ED: c\u1EE5m n\u00E0y `absolute` n\u00EAn BUNG\n        KH\u1ECEI LU\u1ED2NG, kh\u00F4ng h\u01B0\u1EDFng `px-3.5` c\u1EE7a khung nh\u01B0 `ol-autocomplete` (c\u00E1i\n        \u0111\u00F3 d\u00F9ng `ms-auto`, v\u1EABn n\u1EB1m trong lu\u1ED3ng). B\u1EA3n \u0111\u1EA7u ch\u1EC9 c\u00F3 `w-7` \u2014 \u0111o\n        2026-09-17 ra icon c\u00E1ch m\u00E9p ph\u1EA3i **3px**, d\u00EDnh s\u00E1t l\u1EC1.\n\n        Figma `ol-select` Type=Default: icon `angle-down` c\u00E1ch m\u00E9p ph\u1EA3i **12px**.\n        Con s\u1ED1 `pe-2` (8px) tr\u00F4ng c\u00F3 v\u1EBB h\u1EE5t, nh\u01B0ng n\u00FAt xo\u00E1 l\u00E0 `size-6` (24px)\n        b\u1ECDc icon 16px n\u00EAn d\u01B0 4px m\u1ED7i b\u00EAn \u2014 8 + 4 = 12px t\u1EDBi SVG th\u1EADt. \u0110o b\u1EB1ng\n        m\u00E9p SVG ch\u1EE9 kh\u00F4ng m\u00E9p n\u00FAt, v\u00EC m\u1EAFt ng\u01B0\u1EDDi nh\u00ECn th\u1EA5y SVG.\n\n        `justify-end` ch\u1EE9 kh\u00F4ng `justify-center`: c\u0103n gi\u1EEFa th\u00EC icon tr\u00F4i theo\n        b\u1EC1 r\u1ED9ng \u00F4, \u0111\u1ED5i `w-*` l\u00E0 l\u1EC7ch l\u1EA1i.\n      -->\n      <div class=\"absolute inset-y-0 inset-e-0 flex w-10 items-center justify-end pe-3.5\">\n        @if (loading()) {\n          <ol-spinner size=\"xs\" color=\"brand\" />\n        } @else if (clearable() && hasContent() && !disabled() && !readonly()) {\n          <button\n            type=\"button\"\n            (click)=\"clear($event)\"\n            aria-label=\"Xo\u00E1 l\u1EF1a ch\u1ECDn\"\n            class=\"inline-flex size-4 shrink-0 items-center justify-center rounded-full text-body-subtle transition-colors hover:text-heading\"\n          >\n            <ol-icon name=\"close\" size=\"sm\" />\n          </button>\n        } @else {\n          <ol-icon\n            name=\"chevron-down\"\n            size=\"sm\"\n            class=\"pointer-events-none shrink-0 text-body-subtle transition-transform\"\n            [class.rotate-180]=\"isOpen()\"\n          />\n        }\n      </div>\n    </div>\n\n    <!--\n      DANH S\u00C1CH. Token \u0111\u1ECDc th\u1EB3ng t\u1EEB Figma `ol-autocomplete-menu` (#1149:53147),\n      bi\u1EBFn th\u1EC3 `Type=Default` \u2014 \u0111\u00F3 l\u00E0 dropdown chu\u1EA9n c\u1EE7a design system:\n\n        bo g\u00F3c  12px            -> rounded-md\n        \u0111\u1EC7m      8px            -> p-2         (tr\u01B0\u1EDBc l\u00E0 p-1.5 = 6px)\n        n\u1EC1n     bg-neutral-primary-medium      (tr\u01B0\u1EDBc l\u00E0 bg-neutral-primary)\n        vi\u1EC1n    border-default-medium          (tr\u01B0\u1EDBc l\u00E0 border-default)\n\n      Hai token n\u1EC1n/vi\u1EC1n TR\u00D9NG NHAU \u1EDF ch\u1EBF \u0111\u1ED9 s\u00E1ng (#ffffff / #e5e7eb) n\u00EAn \u0111\u1ED5i\n      hay kh\u00F4ng nh\u00ECn c\u0169ng th\u1EBF \u2014 nh\u01B0ng CH\u1EBE \u0110\u1ED8 T\u1ED0I th\u00EC kh\u00E1c h\u1EB3n:\n\n        bg-primary        gray-950  \u2190 \u0111ang d\u00F9ng, g\u1EA7n \u0111en, panel CH\u00CCM v\u00E0o n\u1EC1n\n        bg-primary-medium gray-800  \u2190 Figma, panel n\u1ED5i l\u00EAn\n        border-default        gray-800\n        border-default-medium gray-700\n\n      \u0110\u00E2y \u0111\u00FAng lo\u1EA1i l\u1ED7i ch\u1EC9 l\u1ED9 \u1EDF ch\u1EBF \u0111\u1ED9 t\u1ED1i m\u00E0 ch\u1EBF \u0111\u1ED9 s\u00E1ng kh\u00F4ng bao gi\u1EDD th\u1EA5y.\n    -->\n    @if (isOpen()) {\n      <!--\n        \u00D4 T\u00CCM \u1EDE \u0110\u1EA6U PANEL (`searchPosition=\"panel\"`).\n        \u0110\u1EB7t NGO\u00C0I th\u1EBB `role=\"listbox\"`: m\u1ED9t `<input>` n\u1EB1m trong listbox l\u00E0 sai\n        ARIA \u2014 m\u1ECDi con c\u1EE7a listbox ph\u1EA3i l\u00E0 `option` ho\u1EB7c `group`. \u0110\u00E2y l\u00E0 l\u1ED1i\n        `ol-command` v\u00E0 combobox c\u1EE7a reui d\u00F9ng.\n      -->\n      <!--\n        H\u1ED8P B\u1ECCC mang `#panel` v\u00E0 `position: absolute`.\n\n        `#panel` ph\u1EA3i \u1EDF \u0110\u00C2Y ch\u1EE9 kh\u00F4ng \u1EDF th\u1EBB `role=\"listbox\"`: `appendTo=\"body\"`\n        \u0111\u1EA9y ch\u00EDnh ph\u1EA7n t\u1EED `#panel` ra `<body>`. \u0110\u1EC3 n\u00F3 \u1EDF listbox th\u00EC \u00F4 t\u00ECm \u1EDF l\u1EA1i\n        trong c\u00E2y DOM c\u0169 c\u00F2n danh s\u00E1ch bay \u0111i \u2014 h\u1ED9p tho\u1EA1i v\u1EE1 l\u00E0m \u0111\u00F4i.\n      -->\n      <div\n        #panel\n        class=\"absolute z-dropdown overflow-hidden rounded-md border border-default-medium bg-neutral-primary-medium shadow-lg flex flex-col max-h-[var(--ol-overlay-max-height,24rem)]\"\n        [class.w-full]=\"matchTriggerWidth()\"\n        [class]=\"menuClass()\"\n      >\n        @if (searchable() && searchPosition() === 'panel') {\n          <div class=\"border-b border-default-subtle p-2\">\n            <!-- Icon/ch\u1EEF \u0111\u1EE9ng \u0111\u1EA7u \u00F4 T\u00CCM \u2014 c\u1EE7a vi\u1EC7c T\u00CCM, kh\u00F4ng ph\u1EA3i c\u1EE7a m\u1EE5c\n                 \u0111ang ch\u1ECDn. B\u1ECDc trong khung c\u00F3 vi\u1EC1n \u0111\u1EC3 icon n\u1EB1m TRONG \u00F4, kh\u00F4ng\n                 \u0111\u1EE9ng r\u1EDDi b\u00EAn ngo\u00E0i nh\u01B0 m\u1ED9t nh\u00E3n. -->\n            <div\n              class=\"flex items-center gap-2 rounded border border-default bg-neutral-primary px-2.5 py-1.5 focus-within:border-brand\"\n            >\n              @if (searchIcon()) {\n                <ol-icon [name]=\"searchIcon()\" size=\"sm\" class=\"shrink-0 text-body-subtle\" />\n              } @else if (searchPrefix()) {\n                <span class=\"shrink-0 text-xs font-medium text-body-subtle\">{{\n                  searchPrefix()\n                }}</span>\n              }\n              <input\n                #oTimPanel\n                type=\"text\"\n                [ngModel]=\"searchQuery()\"\n                (ngModelChange)=\"onSearchInput($event)\"\n                (click)=\"$event.stopPropagation()\"\n                (keydown)=\"onKeyDown($event)\"\n                [placeholder]=\"searchPlaceholder()\"\n                [attr.aria-label]=\"searchPlaceholder()\"\n                [attr.aria-controls]=\"listboxId()\"\n                autocomplete=\"off\"\n                class=\"w-full min-w-0 border-none bg-transparent p-0 text-sm outline-none placeholder:text-body-subtle\"\n              />\n            </div>\n          </div>\n        }\n        <!--\n          `overflow-x-hidden` KHAI R\u00D5: khai `overflow-y-auto` m\u1ED9t m\u00ECnh th\u00EC tr\u00ECnh\n          duy\u1EC7t t\u1EF1 t\u00EDnh `overflow-x` th\u00E0nh `auto` (spec CSS: m\u1ED9t tr\u1EE5c `visible`\n          c\u00F2n tr\u1EE5c kia kh\u00E1c `visible` l\u00E0 kh\u00F4ng h\u1EE3p l\u1EC7). \u0110o \u0111\u01B0\u1EE3c `scrollWidth\n          765 > 620` khi option c\u00F3 `white-space: nowrap`.\n\n          Ch\u1EC9 ch\u1EB7n \u1EDF PANEL CH\u1ECCN c\u00F3 b\u1EC1 r\u1ED9ng c\u1ED1 \u0111\u1ECBnh \u2014 n\u1ED9i dung ph\u1EA3i v\u1EEBa b\u1EC1 ngang.\n          KH\u00D4NG ch\u1EB7n \u1EDF khung ch\u1EE9a n\u1ED9i dung t\u1EF1 do (`device-mockup`,\n          `chat-container`, `drawer`): \u1EDF \u0111\u00F3 ng\u01B0\u1EDDi d\u00F9ng chi\u1EBFu n\u1ED9i dung b\u1EA5t k\u1EF3\n          v\u00E0o, ch\u1EB7n l\u00E0 c\u1EAFt m\u1EA5t ph\u1EA7n r\u1ED9ng c\u1EE7a h\u1ECD.\n        -->\n        <div\n          #listboxRef\n          role=\"listbox\"\n          [id]=\"listboxId()\"\n          [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n          (scroll)=\"onPanelScroll($event)\"\n          class=\"flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-2\"\n        >\n          @if (waitingForTerm()) {\n            <!-- Ch\u01B0a g\u00F5 \u0111\u1EE7 `minTermLength`: \"kh\u00F4ng t\u00ECm th\u1EA5y\" l\u00E0 sai s\u1EF1 th\u1EADt, v\u00EC\n               ch\u01B0a t\u00ECm g\u00EC c\u1EA3. C\u00F9ng l\u1ED1i `typeToSearchText` c\u1EE7a ng-select. -->\n            <div class=\"p-3 text-center text-sm text-body-subtle\">{{ typeToSearchText() }}</div>\n          } @else if (rows().length === 0) {\n            <div class=\"p-3 text-center text-sm text-body-subtle\">\n              <p>{{ emptyText() }}</p>\n              @if (canCreate()) {\n                <button\n                  type=\"button\"\n                  (click)=\"createOption()\"\n                  class=\"mt-2 inline-flex items-center gap-1.5 rounded-lg bg-brand-softer px-3 py-1.5 text-xs font-medium text-fg-brand transition-colors hover:bg-brand-subtle\"\n                >\n                  <ol-icon name=\"plus\" size=\"xs\" />\n                  <span>{{ createLabel() }}</span>\n                </button>\n              }\n            </div>\n          } @else {\n            <!-- \u0110\u1EC7m tr\u00EAn: gi\u1EEF thanh cu\u1ED9n d\u00E0i \u0111\u00FAng nh\u01B0 khi v\u1EBD h\u1EBFt danh s\u00E1ch. -->\n            @if (viewport().padTop > 0) {\n              <div [style.height.px]=\"viewport().padTop\" aria-hidden=\"true\"></div>\n            }\n\n            @for (row of viewport().rows; track row.kind + '-' + row.index + '-' + row.label) {\n              @if (row.kind === 'group') {\n                <!-- `dauTien` t\u00EDnh khi d\u1EF1ng danh s\u00E1ch, KH\u00D4NG d\u00F9ng `$first` c\u1EE7a\n                   `@for`: khi `virtualScroll` b\u1EADt, `$first` l\u00E0 d\u00F2ng \u0111\u1EA7u c\u1EE7a\n                   khung nh\u00ECn n\u00EAn cu\u1ED9n xu\u1ED1ng l\u00E0 m\u1EA5t \u0111\u01B0\u1EDDng ng\u0103n. -->\n                @if (groupSeparator() && !row.isFirstGroup) {\n                  <div role=\"presentation\" class=\"my-1 border-t border-default-subtle\"></div>\n                }\n                <div\n                  role=\"presentation\"\n                  class=\"px-2.5 pt-2 pb-0 text-2xs font-semibold uppercase tracking-wide text-body-subtle\"\n                >\n                  {{ row.label }}\n                </div>\n              } @else {\n                <!--\n                `rounded-sm` (6px) ch\u1EE9 kh\u00F4ng `rounded-md` (12px): Figma v\u1EBD\n                `ol-autocomplete-item` bo **8px**, m\u00E0 thang token c\u1EE7a lib kh\u00F4ng\n                c\u00F3 b\u1EADc 8 (xs 4 \u00B7 sm 6 \u00B7 md/base 12 \u00B7 lg 16). L\u1EA5y b\u1EADc G\u1EA6N NH\u1EA4T\n                thay v\u00EC vi\u1EBFt `rounded-[8px]` \u2014 gi\u00E1 tr\u1ECB th\u00F4 n\u1EB1m ngo\u00E0i h\u1EC7 token\n                th\u00EC \u0111\u1ED5i theme kh\u00F4ng theo \u0111\u01B0\u1EE3c.\n\n                `ol-dropdown-item` c\u0169ng \u0111\u00E3 ch\u1ED1t `rounded-sm` cho m\u1EE5c menu, n\u00EAn\n                \u0111\u00E2y c\u00F2n l\u00E0 gi\u1EEF nh\u1EA5t qu\u00E1n trong lib.\n              -->\n                <!--\n                  `min-w-0` cho ph\u00E9p h\u00E0ng CO l\u1EA1i, \u0111i\u1EC1u ki\u1EC7n c\u1EA7n \u0111\u1EC3 `truncate`\n                  c\u1EE7a ng\u01B0\u1EDDi d\u00F9ng ch\u1EA1y. Nh\u01B0ng n\u00F3 KH\u00D4NG t\u1EF1 ch\u1EB7n tr\u00E0n: \u0111o b\u1EB1ng c\u00E1ch\n                  ti\u00EAm `white-space: nowrap` v\u00E0o h\u00E0ng \u2014 panel v\u1EABn `scrollWidth\n                  1763 > 831`. Ch\u1EC9 `overflow: hidden` \u0111\u1EB7t tr\u00EAn CH\u00CDNH ph\u1EA7n t\u1EED n\u1ED9i\n                  dung m\u1EDBi ch\u1EB7n \u0111\u01B0\u1EE3c, m\u00E0 ph\u1EA7n t\u1EED \u0111\u00F3 do ng\u01B0\u1EDDi d\u00F9ng chi\u1EBFu v\u00E0o qua\n                  `optionTemplate` n\u00EAn lib kh\u00F4ng v\u1EDBi t\u1EDBi. `overflow-x-hidden` \u1EDF\n                  panel l\u00E0 l\u1EDBp ch\u1EB7n cu\u1ED1i.\n                -->\n                <div\n                  role=\"option\"\n                  [id]=\"optionId(row.index)\"\n                  [attr.data-option-index]=\"row.index\"\n                  [attr.aria-selected]=\"isSelected(row.item)\"\n                  [attr.aria-disabled]=\"row.item?.disabled ? 'true' : null\"\n                  (click)=\"selectItem(row.item); $event.stopPropagation()\"\n                  [style.height.px]=\"virtualScroll() ? itemHeight() : null\"\n                  class=\"flex min-w-0 items-center gap-2 rounded-sm px-3 py-2 text-sm transition-colors\"\n                  [class.cursor-pointer]=\"!row.item?.disabled\"\n                  [class.cursor-not-allowed]=\"row.item?.disabled\"\n                  [class.bg-neutral-tertiary-medium]=\"\n                    activeIndex() === row.index && !row.item?.disabled\n                  \"\n                  [class.hover:bg-neutral-tertiary-medium]=\"\n                    !row.item?.disabled && activeIndex() !== row.index\n                  \"\n                  [class.text-heading]=\"isSelected(row.item) || activeIndex() === row.index\"\n                  [class.hover:text-heading]=\"!row.item?.disabled\"\n                  [class.font-medium]=\"isSelected(row.item)\"\n                  [class.text-body]=\"!isSelected(row.item) && activeIndex() !== row.index\"\n                  [class.text-fg-disabled]=\"row.item?.disabled\"\n                >\n                  @if (optionTemplate) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplate; context: { $implicit: row.item }\"\n                    />\n                  } @else {\n                    <!-- Ph\u1EA7n \u0111\u1EA7u: `icon` \u01B0u ti\u00EAn, kh\u00F4ng c\u00F3 th\u00EC `prefix` (ch\u1EEF).\n                       `prefixClass` nh\u1EADn CLASS ch\u1EE9 kh\u00F4ng nh\u1EADn m\u00E3 m\u00E0u \u2014 m\u00E3 m\u00E0u\n                       c\u1EE9ng kh\u00F4ng \u0111\u1ED5i theo theme v\u00E0 theo ch\u1EBF \u0111\u1ED9 t\u1ED1i. -->\n                    @if (row.item?.icon) {\n                      <ol-icon\n                        [name]=\"row.item.icon\"\n                        size=\"sm\"\n                        class=\"shrink-0\"\n                        [class]=\"row.item.prefixClass || ''\"\n                      />\n                    } @else if (row.item?.prefix) {\n                      <span\n                        class=\"shrink-0 text-2xs font-semibold tabular-nums\"\n                        [class]=\"row.item.prefixClass || 'text-body-subtle'\"\n                        >{{ row.item.prefix }}</span\n                      >\n                    }\n                    <span class=\"min-w-0 flex-1 truncate\">{{ row.label }}</span>\n                  }\n                  @if (isSelected(row.item)) {\n                    <ol-icon name=\"check\" size=\"sm\" class=\"shrink-0 text-fg-brand\" />\n                  }\n                </div>\n              }\n            }\n\n            <!-- \u0110\u1EC7m d\u01B0\u1EDBi \u2014 xem l\u00FD do \u1EDF \u0111\u1EC7m tr\u00EAn. -->\n            @if (viewport().padBottom > 0) {\n              <div [style.height.px]=\"viewport().padBottom\" aria-hidden=\"true\"></div>\n            }\n\n            <!-- Danh s\u00E1ch C\u00D2N m\u1EE5c nh\u01B0ng ch\u1EEF \u0111ang g\u00F5 ch\u01B0a tr\u00F9ng nh\u00E3n n\u00E0o: v\u1EABn ph\u1EA3i\n               cho t\u1EA1o. V\u00ED d\u1EE5 \u0111\u00E3 c\u00F3 \"To\u00E1n 10\" m\u00E0 ng\u01B0\u1EDDi d\u00F9ng g\u00F5 \"To\u00E1n 11\" \u2014\n               nh\u00E1nh r\u1ED7ng \u1EDF tr\u00EAn kh\u00F4ng ch\u1EA1y v\u00EC b\u1ED9 l\u1ECDc v\u1EABn ra m\u1ED9t m\u1EE5c. -->\n            @if (canCreate()) {\n              <div class=\"mt-1 border-t border-default-subtle p-2\">\n                <button\n                  type=\"button\"\n                  (click)=\"createOption()\"\n                  class=\"inline-flex w-full items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium text-fg-brand transition-colors hover:bg-brand-softer\"\n                >\n                  <ol-icon name=\"plus\" size=\"xs\" class=\"shrink-0\" />\n                  <span class=\"truncate\">{{ createLabel() }}</span>\n                </button>\n              </div>\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (helperText()) {\n    <p\n      class=\"mt-1.5 text-xs\"\n      [class.text-body]=\"state() === 'default'\"\n      [class.text-fg-danger-strong]=\"state() === 'error'\"\n      [class.text-fg-success-strong]=\"state() === 'success'\"\n    >\n      {{ helperText() }}\n    </p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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"] }, { kind: "component", type: OlSpinner, selector: "ol-spinner", inputs: ["variant", "size", "color", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "labelTemplate", first: true, predicate: ["labelTemplate"], descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "listboxRef", first: true, predicate: ["listboxRef"], descendants: true, isSignal: true }, { propertyName: "oTimPanel", first: true, predicate: ["oTimPanel"], descendants: true, isSignal: true }, { propertyName: "inlineSearch", first: true, predicate: ["inlineSearch"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"w-full\" [class]=\"labelLayout()\" [style.--ol-label-w]=\"labelWidth() || null\">\n  @if (label() && !floatingLabel()) {\n    <ol-field-label\n      [beside]=\"labelBeside()\"\n      [size]=\"resolvedSize()\"\n      [text]=\"label()\"\n      [forId]=\"inputId()\"\n      [labelId]=\"labelId()\"\n      [required]=\"required() || showAsterisk()\"\n    />\n  }\n\n  <div class=\"relative w-full\">\n    <ol-field-frame\n      [enabled]=\"floatingLabel()\"\n      [label]=\"label()\"\n      [forId]=\"inputId()\"\n      [labelId]=\"labelId()\"\n      [variant]=\"floatingVariant()\"\n      [size]=\"resolvedSize()\"\n      [state]=\"state()\"\n      [disabled]=\"disabled()\"\n      [required]=\"required() || showAsterisk()\"\n      [hasValue]=\"hasValue()\"\n      [open]=\"isOpen()\"\n    >\n      <!-- Icon tr\u00E1i neo theo KHUNG NH\u1EACP, kh\u00F4ng theo khung n\u1ED5i (c\u00F3 h\u00E0ng nh\u00E3n 20px). -->\n      <div class=\"relative\">\n        @if (leftIcon()) {\n          <div\n            class=\"absolute inset-y-0 inset-s-0 z-10 flex items-center pointer-events-none text-body-subtle\"\n            [class]=\"leftIconPadClass()\"\n          >\n            <ng-content select=\"[leftIcon]\" />\n          </div>\n        }\n\n        <!--\n      \u00D4 \u0110I\u1EC0U KHI\u1EC2N \u2014 gi\u1EEF NGUY\u00CAN b\u1EA3ng class c\u1EE7a b\u1EA3n `<select>` c\u0169 \u0111\u1EC3 giao di\u1EC7n\n      Figma kh\u00F4ng \u0111\u1ED5i m\u1ED9t pixel: c\u00F9ng vi\u1EC1n, n\u1EC1n, bo g\u00F3c, thang c\u1EE1 (h-9/h-10/h-12)\n      v\u00E0 c\u00F9ng b\u1EA3ng m\u00E0u theo `state`.\n\n      `dark:focus:ring-brand-950` GI\u1EEE b\u1EADc s\u1ED1: `brand` l\u00E0 b\u1EA3ng Figma C\u00D3 n\u00EAn b\u1EADc\n      s\u1ED1 h\u1EE3p l\u1EC7, c\u00F2n `ring-brand-softer` (token duy nh\u1EA5t tr\u1ECF brand-950 \u1EDF ch\u1EBF \u0111\u1ED9\n      t\u1ED1i) ch\u01B0a n\u01A1i n\u00E0o d\u00F9ng n\u00EAn Tailwind kh\u00F4ng sinh CSS \u2014 thay v\u00E0o l\u00E0 class\n      CH\u1EBET m\u00E0 build v\u1EABn xanh (\u0111o 2026-09-15).\n\n      Kh\u00E1c b\u1EA3n c\u0169 \u1EDF ch\u1ED7 \u0111\u00E2y l\u00E0 `<div role=\"combobox\">` ch\u1EE9 kh\u00F4ng ph\u1EA3i `<select>`\n      g\u1ED1c: th\u1EBB g\u1ED1c kh\u00F4ng cho t\u00ECm ki\u1EBFm, \u0111a ch\u1ECDn hay t\u1EF1 v\u1EBD t\u1EEBng d\u00F2ng.\n    -->\n        <div\n          [id]=\"inputId()\"\n          role=\"combobox\"\n          tabindex=\"0\"\n          [attr.aria-labelledby]=\"label() ? labelId() : triggerLabel() ? triggerLabelId() : null\"\n          [attr.aria-label]=\"label() || triggerLabel() ? null : ariaLabel() || null\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-controls]=\"listboxId()\"\n          [attr.aria-activedescendant]=\"activeOptionId()\"\n          [attr.aria-invalid]=\"ariaInvalid()\"\n          [attr.aria-describedby]=\"describedBy()\"\n          [attr.aria-required]=\"required() ? 'true' : null\"\n          [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n          aria-haspopup=\"listbox\"\n          (click)=\"toggle()\"\n          (keydown)=\"onKeyDown($event)\"\n          class=\"ol-field-box relative flex w-full items-center gap-1.5 border shadow-xs outline-none font-normal\"\n          [class.border-default-medium]=\"state() === 'default' || disabled()\"\n          [class.rounded-base]=\"true\"\n          [class]=\"paddingStartClass()\"\n          [class.flex-wrap]=\"multiple()\"\n          [class.content-center]=\"multiple()\"\n          [class.min-h-9]=\"resolvedSize() === 'sm'\"\n          [class.min-h-10]=\"resolvedSize() === 'base'\"\n          [class.min-h-12]=\"resolvedSize() === 'lg'\"\n          [class.min-h-13]=\"resolvedSize() === 'xl'\"\n          [class.text-sm]=\"resolvedSize() === 'sm' || resolvedSize() === 'base'\"\n          [class.text-base]=\"resolvedSize() === 'lg' || resolvedSize() === 'xl'\"\n          [class.cursor-pointer]=\"!disabled() && !readonly()\"\n          [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled()\"\n          [class.text-heading]=\"state() === 'default' && !disabled()\"\n          [class.focus:border-brand]=\"state() === 'default' && !disabled()\"\n          [class.focus:ring-2]=\"!disabled()\"\n          [class.focus:ring-brand-subtle]=\"state() === 'default' && !disabled()\"\n          [class.dark:focus:ring-brand-950]=\"state() === 'default' && !disabled()\"\n          [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n          [class.border-danger]=\"state() === 'error' && !disabled()\"\n          [class.text-fg-danger-strong]=\"state() === 'error' && !disabled()\"\n          [class.focus:border-danger]=\"state() === 'error' && !disabled()\"\n          [class.focus:ring-danger-medium]=\"state() === 'error' && !disabled()\"\n          [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n          [class.border-success]=\"state() === 'success' && !disabled()\"\n          [class.text-fg-success-strong]=\"state() === 'success' && !disabled()\"\n          [class.focus:border-success]=\"state() === 'success' && !disabled()\"\n          [class.focus:ring-success-medium]=\"state() === 'success' && !disabled()\"\n          [class.bg-disabled]=\"disabled()\"\n          [class.text-fg-disabled]=\"disabled()\"\n          [class.cursor-not-allowed]=\"disabled()\"\n        >\n          <!-- Th\u1EBB c\u1EE7a c\u00E1c gi\u00E1 tr\u1ECB \u0111\u00E3 ch\u1ECDn (\u0111a ch\u1ECDn) -->\n          @if (multiple()) {\n            @for (val of selectedValues(); track val) {\n              <!-- `h-6` c\u1ED1 \u0111\u1ECBnh: \u0111\u1EC3 th\u1EBB co theo ch\u1EEF th\u00EC m\u1ED7i th\u1EBB cao m\u1ED9t ki\u1EC3u v\u00E0 \u00F4\n               b\u1ECB \u0111\u1EA9y theo th\u1EBB cao nh\u1EA5t. C\u00F9ng c\u00E1ch \u0111\u00E3 ch\u1ED1t \u1EDF `ol-autocomplete`. -->\n              <!-- Chip kho\u00E1 d\u00F9ng b\u1EA3ng m\u00E0u TRUNG T\u00CDNH: m\u1EA5t n\u00FAt \u00D7 l\u00E0 d\u1EA5u hi\u1EC7u qu\u00E1\n               nh\u1EB9, ng\u01B0\u1EDDi d\u00F9ng t\u01B0\u1EDFng n\u00FAt ch\u01B0a hi\u1EC7n. \u0110\u1ED5i m\u00E0u cho th\u1EA5y ngay \u0111\u00E2y\n               l\u00E0 lo\u1EA1i chip kh\u00E1c. -->\n              <span\n                class=\"inline-flex h-6 shrink-0 items-center gap-1 rounded-md border px-2 text-xs font-medium\"\n                [class.border-brand-subtle]=\"!isLocked(val)\"\n                [class.bg-brand-softer]=\"!isLocked(val)\"\n                [class.text-fg-brand-strong]=\"!isLocked(val)\"\n                [class.border-default]=\"isLocked(val)\"\n                [class.bg-neutral-tertiary]=\"isLocked(val)\"\n                [class.text-body]=\"isLocked(val)\"\n              >\n                @if (isLocked(val)) {\n                  <ol-icon name=\"lucide:lock\" size=\"xs\" class=\"shrink-0 opacity-70\" />\n                } @else if (optionOf(val)?.icon) {\n                  <ol-icon [name]=\"$any(optionOf(val)).icon\" size=\"xs\" class=\"shrink-0\" />\n                } @else if (optionOf(val)?.prefix) {\n                  <span class=\"shrink-0 text-2xs font-semibold tabular-nums\">{{\n                    optionOf(val)?.prefix\n                  }}</span>\n                }\n                <span>{{ getDisplayLabel(val) }}</span>\n                @if (!disabled() && !readonly() && !isLocked(val)) {\n                  <button\n                    type=\"button\"\n                    (click)=\"removeValue(val, $event)\"\n                    [attr.aria-label]=\"'G\u1EE1 ' + getDisplayLabel(val)\"\n                    class=\"inline-flex size-4 shrink-0 items-center justify-center rounded-full text-fg-brand hover:text-fg-brand-strong focus:outline-hidden\"\n                  >\n                    <ol-icon name=\"close\" size=\"xs\" />\n                  </button>\n                }\n              </span>\n            }\n          }\n\n          <!--\n        PH\u1EA6N C\u1ED0 \u0110\u1ECANH c\u1EE7a \u00F4 \u0111\u00F3ng \u2014 icon v\u00E0 nh\u00E3n LU\u00D4N hi\u1EC7n, d\u00F9 \u0111\u00E3 ch\u1ECDn hay ch\u01B0a,\n        d\u00F9 danh s\u00E1ch \u0111ang m\u1EDF hay \u0111\u00F3ng. Ch\u1EC9 ph\u1EA7n GI\u00C1 TR\u1ECA b\u00EAn ph\u1EA3i m\u1EDBi \u0111\u1ED5i.\n\n        \u0110\u1EB7t NGO\u00C0I c\u1EA3 ba nh\u00E1nh d\u01B0\u1EDBi (\u00F4 t\u00ECm / nh\u00E3n \u0111\u00E3 ch\u1ECDn / placeholder) ch\u00EDnh\n        l\u00E0 \u0111i\u1EC1u l\u00E0m n\u00F3 c\u1ED1 \u0111\u1ECBnh \u2014 n\u1EB1m trong nh\u00E1nh n\u00E0o th\u00EC n\u00F3 bi\u1EBFn m\u1EA5t \u1EDF hai\n        nh\u00E1nh kia.\n\n        Kh\u00E1c `icon` c\u1EE7a M\u1EE4C: c\u00E1i \u0111\u00F3 \u0111\u1ED5i theo m\u1EE5c \u0111ang ch\u1ECDn. Khai c\u1EA3 hai th\u00EC\n        `triggerIcon` th\u1EAFng, v\u00EC nh\u00E3n c\u1ED1 \u0111\u1ECBnh m\u00E0 nh\u1EA3y theo m\u1EE5c th\u00EC h\u1EBFt c\u1ED1 \u0111\u1ECBnh.\n      -->\n          @if (triggerIcon()) {\n            <ol-icon [name]=\"triggerIcon()\" size=\"sm\" class=\"shrink-0 me-0.5 text-body-subtle\" />\n          }\n          @if (triggerLabel()) {\n            <span [id]=\"triggerLabelId()\" class=\"shrink-0 text-sm font-medium text-body\">{{\n              triggerLabel()\n            }}</span>\n          }\n\n          <!--\n        \u00D4 G\u00D5 T\u00CCM ch\u1EC9 hi\u1EC7n khi danh s\u00E1ch \u0110ANG M\u1EDE. \u0110\u00F3ng l\u1EA1i th\u00EC hi\u1EC7n nh\u00E3n t\u0129nh \u2014\n        n\u1EBFu \u0111\u1EC3 \u00F4 nh\u1EADp lu\u00F4n \u0111\u00F3, ng\u01B0\u1EDDi d\u00F9ng t\u01B0\u1EDFng g\u00F5 th\u1EB3ng v\u00E0o \u0111\u01B0\u1EE3c, m\u00E0 gi\u00E1 tr\u1ECB\n        l\u1EA1i kh\u00F4ng \u0111\u1ED5i theo ch\u1EEF h\u1ECD g\u00F5.\n      -->\n          @if (searchable() && isOpen() && searchPosition() === 'inline') {\n            <input\n              #inlineSearch\n              type=\"text\"\n              [attr.aria-controls]=\"listboxId()\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              [ngModel]=\"searchQuery()\"\n              (ngModelChange)=\"onSearchInput($event)\"\n              (click)=\"$event.stopPropagation()\"\n              [placeholder]=\"searchPlaceholder()\"\n              [attr.aria-label]=\"searchPlaceholder()\"\n              autocomplete=\"off\"\n              class=\"min-w-0 flex-1 border-none bg-transparent p-0 text-inherit outline-none placeholder:text-body-subtle\"\n            />\n          } @else if (!multiple() && hasValue()) {\n            @if (labelTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"labelTemplate; context: { $implicit: selectedValues()[0] }\"\n              />\n            } @else {\n              <!-- \u00D4 \u0111\u00F3ng hi\u1EC7n C\u1EA2 ph\u1EA7n \u0111\u1EA7u c\u1EE7a m\u1EE5c \u0111ang ch\u1ECDn, kh\u00F4ng ch\u1EC9 ch\u1EEF \u2014 \u0111\u00E2y\n               l\u00E0 \u0111i\u1EC3m kh\u00E1c c\u1EE7a combobox reui so v\u1EDBi \u00F4 ch\u1ECDn th\u01B0\u1EDDng. -->\n              @if (selectedItem()?.icon && !triggerIcon()) {\n                <ol-icon\n                  [name]=\"$any(selectedItem()).icon\"\n                  size=\"sm\"\n                  class=\"shrink-0 me-0.5\"\n                  [class]=\"selectedItem()?.prefixClass || ''\"\n                />\n              } @else if (selectedItem()?.prefix && !triggerIcon()) {\n                <span\n                  class=\"shrink-0 text-2xs font-semibold tabular-nums\"\n                  [class]=\"selectedItem()?.prefixClass || 'text-body-subtle'\"\n                  >{{ selectedItem()?.prefix }}</span\n                >\n              }\n              <span class=\"truncate\">{{ singleLabel() }}</span>\n            }\n          } @else if (!hasValue()) {\n            <!--\n          \u1EDE tr\u1EA1ng th\u00E1i L\u1ED6I, n\u1EC1n \u0111\u1ED5i sang `bg-danger-soft` (#fef0f2) v\u00E0\n          `text-body-subtle` ch\u1EC9 c\u00F2n **4,36** \u2014 d\u01B0\u1EDBi chu\u1EA9n 4,5. N\u1EC1n `success`\n          (#ecfdf5) cho 4,59, v\u1EEBa \u0111\u1EE7, n\u00EAn ch\u1EC9 nh\u00E1nh l\u1ED7i c\u1EA7n \u0111\u1EADm h\u01A1n.\n          `text-body` tr\u00EAn n\u1EC1n \u0111\u00F3 ra 6,82 (s\u00E1ng) v\u00E0 10,66 (t\u1ED1i).\n        -->\n            <span\n              class=\"truncate\"\n              data-ol-field-text\n              data-ol-field-placeholder\n              [class.text-body-subtle]=\"state() !== 'error'\"\n              [class.text-body]=\"state() === 'error'\"\n              >{{ placeholder() }}</span\n            >\n          }\n\n          <!--\n        M\u1ED8T \u00F4 \u0111i\u1EC1u khi\u1EC3n, \u0110\u1ED4I VAI theo tr\u1EA1ng th\u00E1i \u2014 kh\u00F4ng x\u1EBFp c\u1EA1nh nhau.\n        B\u1EA3n \u0111\u1EA7u c\u1EE7a t\u00F4i \u0111\u1EC3 n\u00FAt xo\u00E1 v\u00E0 `chevron-down` C\u00D9NG hi\u1EC7n: \u0111o 2026-09-17\n        tr\u00EAn `/forms` \u0111\u1EBFm **2 icon b\u00EAn ph\u1EA3i \u1EDF M\u1ECCI tr\u1EA1ng th\u00E1i**, k\u1EC3 c\u1EA3 khi danh\n        s\u00E1ch \u0111ang m\u1EDF. C\u1EE5m b\u00EAn ph\u1EA3i ch\u1EADt, hai icon 16px chen nhau tr\u00F4ng r\u1ED1i.\n\n        `ol-autocomplete` \u0111\u00E3 ch\u1ED1t l\u1ED1i n\u00E0y t\u1EEB tr\u01B0\u1EDBc (\u00F4 `w-7` \u0111\u1ED5i vai\n        spinner / xo\u00E1 / chevron); `ol-select` ph\u1EA3i theo cho nh\u1EA5t qu\u00E1n.\n\n        C\u1EE5m n\u00E0y `absolute` n\u00EAn BUNG KH\u1ECEI LU\u1ED2NG: l\u1EC1 ph\u1EA3i l\u1EA5y theo c\u1EE1\n        (`controlPadClass`), c\u00F2n khung ch\u1EEBa ch\u1ED7 b\u1EB1ng `FIELD_ICON_RESERVE_END`\n        \u0111\u1EC3 ch\u1EEF d\u00E0i d\u1EEBng c\u00E1ch icon \u0111\u00FAng 8px. N\u00FAt xo\u00E1 b\u1ECDc `size-4` b\u1EB1ng icon, \u0111o\n        theo m\u00E9p SVG \u2014 th\u1EE9 m\u1EAFt ng\u01B0\u1EDDi nh\u00ECn th\u1EA5y.\n      -->\n          <div\n            class=\"absolute inset-y-0 inset-e-0 flex items-center justify-end\"\n            [class]=\"controlPadClass()\"\n          >\n            @if (loading()) {\n              <ol-spinner size=\"xs\" color=\"brand\" />\n            } @else if (clearable() && hasContent() && !disabled() && !readonly()) {\n              <button\n                type=\"button\"\n                (click)=\"clear($event)\"\n                aria-label=\"Xo\u00E1 l\u1EF1a ch\u1ECDn\"\n                class=\"inline-flex size-4 shrink-0 items-center justify-center rounded-full text-body-subtle transition-colors hover:text-heading\"\n              >\n                <ol-icon name=\"close\" size=\"sm\" />\n              </button>\n            } @else {\n              <ol-icon\n                name=\"chevron-down\"\n                size=\"sm\"\n                class=\"pointer-events-none shrink-0 text-body-subtle transition-transform\"\n                [class.rotate-180]=\"isOpen()\"\n              />\n            }\n          </div>\n        </div>\n      </div>\n    </ol-field-frame>\n\n    <!--\n      DANH S\u00C1CH. Token \u0111\u1ECDc th\u1EB3ng t\u1EEB Figma `ol-autocomplete-menu` (#1149:53147),\n      bi\u1EBFn th\u1EC3 `Type=Default` \u2014 \u0111\u00F3 l\u00E0 dropdown chu\u1EA9n c\u1EE7a design system:\n\n        bo g\u00F3c  12px            -> rounded-md\n        \u0111\u1EC7m      8px            -> p-2         (tr\u01B0\u1EDBc l\u00E0 p-1.5 = 6px)\n        n\u1EC1n     bg-neutral-primary-medium      (tr\u01B0\u1EDBc l\u00E0 bg-neutral-primary)\n        vi\u1EC1n    border-default-medium          (tr\u01B0\u1EDBc l\u00E0 border-default)\n\n      Hai token n\u1EC1n/vi\u1EC1n TR\u00D9NG NHAU \u1EDF ch\u1EBF \u0111\u1ED9 s\u00E1ng (#ffffff / #e5e7eb) n\u00EAn \u0111\u1ED5i\n      hay kh\u00F4ng nh\u00ECn c\u0169ng th\u1EBF \u2014 nh\u01B0ng CH\u1EBE \u0110\u1ED8 T\u1ED0I th\u00EC kh\u00E1c h\u1EB3n:\n\n        bg-primary        gray-950  \u2190 \u0111ang d\u00F9ng, g\u1EA7n \u0111en, panel CH\u00CCM v\u00E0o n\u1EC1n\n        bg-primary-medium gray-800  \u2190 Figma, panel n\u1ED5i l\u00EAn\n        border-default        gray-800\n        border-default-medium gray-700\n\n      \u0110\u00E2y \u0111\u00FAng lo\u1EA1i l\u1ED7i ch\u1EC9 l\u1ED9 \u1EDF ch\u1EBF \u0111\u1ED9 t\u1ED1i m\u00E0 ch\u1EBF \u0111\u1ED9 s\u00E1ng kh\u00F4ng bao gi\u1EDD th\u1EA5y.\n    -->\n    @if (isOpen()) {\n      <!--\n        \u00D4 T\u00CCM \u1EDE \u0110\u1EA6U PANEL (`searchPosition=\"panel\"`).\n        \u0110\u1EB7t NGO\u00C0I th\u1EBB `role=\"listbox\"`: m\u1ED9t `<input>` n\u1EB1m trong listbox l\u00E0 sai\n        ARIA \u2014 m\u1ECDi con c\u1EE7a listbox ph\u1EA3i l\u00E0 `option` ho\u1EB7c `group`. \u0110\u00E2y l\u00E0 l\u1ED1i\n        `ol-command` v\u00E0 combobox c\u1EE7a reui d\u00F9ng.\n      -->\n      <!--\n        H\u1ED8P B\u1ECCC mang `#panel` v\u00E0 `position: absolute`.\n\n        `#panel` ph\u1EA3i \u1EDF \u0110\u00C2Y ch\u1EE9 kh\u00F4ng \u1EDF th\u1EBB `role=\"listbox\"`: `appendTo=\"body\"`\n        \u0111\u1EA9y ch\u00EDnh ph\u1EA7n t\u1EED `#panel` ra `<body>`. \u0110\u1EC3 n\u00F3 \u1EDF listbox th\u00EC \u00F4 t\u00ECm \u1EDF l\u1EA1i\n        trong c\u00E2y DOM c\u0169 c\u00F2n danh s\u00E1ch bay \u0111i \u2014 h\u1ED9p tho\u1EA1i v\u1EE1 l\u00E0m \u0111\u00F4i.\n      -->\n      <div\n        #panel\n        class=\"absolute z-dropdown overflow-hidden rounded-md border border-default-medium bg-neutral-primary-medium shadow-lg flex flex-col max-h-[var(--ol-overlay-max-height,24rem)]\"\n        [class.w-full]=\"matchTriggerWidth()\"\n        [class]=\"menuClass()\"\n      >\n        @if (searchable() && searchPosition() === 'panel') {\n          <div class=\"border-b border-default-subtle p-2\">\n            <!-- Icon/ch\u1EEF \u0111\u1EE9ng \u0111\u1EA7u \u00F4 T\u00CCM \u2014 c\u1EE7a vi\u1EC7c T\u00CCM, kh\u00F4ng ph\u1EA3i c\u1EE7a m\u1EE5c\n                 \u0111ang ch\u1ECDn. B\u1ECDc trong khung c\u00F3 vi\u1EC1n \u0111\u1EC3 icon n\u1EB1m TRONG \u00F4, kh\u00F4ng\n                 \u0111\u1EE9ng r\u1EDDi b\u00EAn ngo\u00E0i nh\u01B0 m\u1ED9t nh\u00E3n. -->\n            <div\n              class=\"flex items-center gap-2 rounded border border-default bg-neutral-primary px-2.5 py-1.5 focus-within:border-brand\"\n            >\n              @if (searchIcon()) {\n                <ol-icon [name]=\"searchIcon()\" size=\"sm\" class=\"shrink-0 text-body-subtle\" />\n              } @else if (searchPrefix()) {\n                <span class=\"shrink-0 text-xs font-medium text-body-subtle\">{{\n                  searchPrefix()\n                }}</span>\n              }\n              <input\n                #oTimPanel\n                type=\"text\"\n                [ngModel]=\"searchQuery()\"\n                (ngModelChange)=\"onSearchInput($event)\"\n                (click)=\"$event.stopPropagation()\"\n                (keydown)=\"onKeyDown($event)\"\n                [placeholder]=\"searchPlaceholder()\"\n                [attr.aria-label]=\"searchPlaceholder()\"\n                [attr.aria-controls]=\"listboxId()\"\n                autocomplete=\"off\"\n                class=\"w-full min-w-0 border-none bg-transparent p-0 text-sm outline-none placeholder:text-body-subtle\"\n              />\n            </div>\n          </div>\n        }\n        <!--\n          `overflow-x-hidden` KHAI R\u00D5: khai `overflow-y-auto` m\u1ED9t m\u00ECnh th\u00EC tr\u00ECnh\n          duy\u1EC7t t\u1EF1 t\u00EDnh `overflow-x` th\u00E0nh `auto` (spec CSS: m\u1ED9t tr\u1EE5c `visible`\n          c\u00F2n tr\u1EE5c kia kh\u00E1c `visible` l\u00E0 kh\u00F4ng h\u1EE3p l\u1EC7). \u0110o \u0111\u01B0\u1EE3c `scrollWidth\n          765 > 620` khi option c\u00F3 `white-space: nowrap`.\n\n          Ch\u1EC9 ch\u1EB7n \u1EDF PANEL CH\u1ECCN c\u00F3 b\u1EC1 r\u1ED9ng c\u1ED1 \u0111\u1ECBnh \u2014 n\u1ED9i dung ph\u1EA3i v\u1EEBa b\u1EC1 ngang.\n          KH\u00D4NG ch\u1EB7n \u1EDF khung ch\u1EE9a n\u1ED9i dung t\u1EF1 do (`device-mockup`,\n          `chat-container`, `drawer`): \u1EDF \u0111\u00F3 ng\u01B0\u1EDDi d\u00F9ng chi\u1EBFu n\u1ED9i dung b\u1EA5t k\u1EF3\n          v\u00E0o, ch\u1EB7n l\u00E0 c\u1EAFt m\u1EA5t ph\u1EA7n r\u1ED9ng c\u1EE7a h\u1ECD.\n        -->\n        <div\n          #listboxRef\n          role=\"listbox\"\n          [id]=\"listboxId()\"\n          [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n          (scroll)=\"onPanelScroll($event)\"\n          class=\"flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-2\"\n        >\n          <!--\n            B\u1ED1n tr\u1EA1ng th\u00E1i c\u1EE7a danh s\u00E1ch l\u1EA5y t\u1EEB m\u00E1y ch\u1EE7 (Figma `ol-dropdown`\n            5266:29107): \u0110ang t\u1EA3i \u00B7 Ch\u01B0a g\u00F5 \u0111\u1EE7 \u00B7 R\u1ED7ng/Kh\u00F4ng c\u00F3 k\u1EBFt qu\u1EA3 \u00B7 c\u00F3 m\u1EE5c.\n            \u0110ang t\u1EA3i \u0111\u1EE9ng TR\u01AF\u1EDAC r\u1ED7ng: b\u1EA3n c\u0169 b\u00E1o \"kh\u00F4ng t\u00ECm th\u1EA5y\" trong l\u00FAc\n            c\u00E2u tr\u1EA3 l\u1EDDi c\u00F2n ch\u01B0a v\u1EC1 \u2014 sai s\u1EF1 th\u1EADt.\n          -->\n          @if (loading()) {\n            <ol-dropdown-state type=\"loading\" />\n          } @else if (waitingForTerm()) {\n            <!-- Ch\u01B0a g\u00F5 \u0111\u1EE7 `minTermLength`: \"kh\u00F4ng t\u00ECm th\u1EA5y\" l\u00E0 sai s\u1EF1 th\u1EADt, v\u00EC\n               ch\u01B0a t\u00ECm g\u00EC c\u1EA3. C\u00F9ng l\u1ED1i `typeToSearchText` c\u1EE7a ng-select. -->\n            <div class=\"p-3 text-center text-sm text-body-subtle\">{{ typeToSearchText() }}</div>\n          } @else if (rows().length === 0) {\n            <div class=\"text-center\">\n              <ol-dropdown-state\n                [type]=\"searchQuery().trim() ? 'no-results' : 'empty'\"\n                [query]=\"searchQuery().trim()\"\n                [heading]=\"emptyText()\"\n              />\n              @if (canCreate()) {\n                <button\n                  type=\"button\"\n                  (click)=\"createOption()\"\n                  class=\"-mt-2 mb-4 inline-flex items-center gap-1.5 rounded-lg bg-brand-softer px-3 py-1.5 text-xs font-medium text-fg-brand transition-colors hover:bg-brand-subtle\"\n                >\n                  <ol-icon name=\"plus\" size=\"xs\" />\n                  <span>{{ createLabel() }}</span>\n                </button>\n              }\n            </div>\n          } @else {\n            <!-- \u0110\u1EC7m tr\u00EAn: gi\u1EEF thanh cu\u1ED9n d\u00E0i \u0111\u00FAng nh\u01B0 khi v\u1EBD h\u1EBFt danh s\u00E1ch. -->\n            @if (viewport().padTop > 0) {\n              <div [style.height.px]=\"viewport().padTop\" aria-hidden=\"true\"></div>\n            }\n\n            @for (row of viewport().rows; track row.kind + '-' + row.index + '-' + row.label) {\n              @if (row.kind === 'group') {\n                <!-- `dauTien` t\u00EDnh khi d\u1EF1ng danh s\u00E1ch, KH\u00D4NG d\u00F9ng `$first` c\u1EE7a\n                   `@for`: khi `virtualScroll` b\u1EADt, `$first` l\u00E0 d\u00F2ng \u0111\u1EA7u c\u1EE7a\n                   khung nh\u00ECn n\u00EAn cu\u1ED9n xu\u1ED1ng l\u00E0 m\u1EA5t \u0111\u01B0\u1EDDng ng\u0103n. -->\n                @if (groupSeparator() && !row.isFirstGroup) {\n                  <div role=\"presentation\" class=\"my-1 border-t border-default-subtle\"></div>\n                }\n                <div\n                  role=\"presentation\"\n                  class=\"px-2.5 pt-2 pb-0 text-2xs font-semibold uppercase tracking-wide text-body-subtle\"\n                >\n                  {{ row.label }}\n                </div>\n              } @else {\n                <!--\n                `rounded-sm` (6px) ch\u1EE9 kh\u00F4ng `rounded-md` (12px): Figma v\u1EBD\n                `ol-autocomplete-item` bo **8px**, m\u00E0 thang token c\u1EE7a lib kh\u00F4ng\n                c\u00F3 b\u1EADc 8 (xs 4 \u00B7 sm 6 \u00B7 md/base 12 \u00B7 lg 16). L\u1EA5y b\u1EADc G\u1EA6N NH\u1EA4T\n                thay v\u00EC vi\u1EBFt `rounded-[8px]` \u2014 gi\u00E1 tr\u1ECB th\u00F4 n\u1EB1m ngo\u00E0i h\u1EC7 token\n                th\u00EC \u0111\u1ED5i theme kh\u00F4ng theo \u0111\u01B0\u1EE3c.\n\n                `ol-dropdown-item` c\u0169ng \u0111\u00E3 ch\u1ED1t `rounded-sm` cho m\u1EE5c menu, n\u00EAn\n                \u0111\u00E2y c\u00F2n l\u00E0 gi\u1EEF nh\u1EA5t qu\u00E1n trong lib.\n              -->\n                <!--\n                  `min-w-0` cho ph\u00E9p h\u00E0ng CO l\u1EA1i, \u0111i\u1EC1u ki\u1EC7n c\u1EA7n \u0111\u1EC3 `truncate`\n                  c\u1EE7a ng\u01B0\u1EDDi d\u00F9ng ch\u1EA1y. Nh\u01B0ng n\u00F3 KH\u00D4NG t\u1EF1 ch\u1EB7n tr\u00E0n: \u0111o b\u1EB1ng c\u00E1ch\n                  ti\u00EAm `white-space: nowrap` v\u00E0o h\u00E0ng \u2014 panel v\u1EABn `scrollWidth\n                  1763 > 831`. Ch\u1EC9 `overflow: hidden` \u0111\u1EB7t tr\u00EAn CH\u00CDNH ph\u1EA7n t\u1EED n\u1ED9i\n                  dung m\u1EDBi ch\u1EB7n \u0111\u01B0\u1EE3c, m\u00E0 ph\u1EA7n t\u1EED \u0111\u00F3 do ng\u01B0\u1EDDi d\u00F9ng chi\u1EBFu v\u00E0o qua\n                  `optionTemplate` n\u00EAn lib kh\u00F4ng v\u1EDBi t\u1EDBi. `overflow-x-hidden` \u1EDF\n                  panel l\u00E0 l\u1EDBp ch\u1EB7n cu\u1ED1i.\n                -->\n                <div\n                  role=\"option\"\n                  [id]=\"optionId(row.index)\"\n                  [attr.data-option-index]=\"row.index\"\n                  [attr.aria-selected]=\"isSelected(row.item)\"\n                  [attr.aria-disabled]=\"row.item?.disabled ? 'true' : null\"\n                  (click)=\"selectItem(row.item); $event.stopPropagation()\"\n                  [style.height.px]=\"virtualScroll() ? itemHeight() : null\"\n                  class=\"flex min-w-0 items-center gap-2 rounded-sm px-3 py-2 text-sm transition-colors\"\n                  [class.cursor-pointer]=\"!row.item?.disabled\"\n                  [class.cursor-not-allowed]=\"row.item?.disabled\"\n                  [class.bg-neutral-tertiary-medium]=\"\n                    activeIndex() === row.index && !row.item?.disabled\n                  \"\n                  [class.hover:bg-neutral-tertiary-medium]=\"\n                    !row.item?.disabled && activeIndex() !== row.index\n                  \"\n                  [class.text-heading]=\"isSelected(row.item) || activeIndex() === row.index\"\n                  [class.hover:text-heading]=\"!row.item?.disabled\"\n                  [class.font-medium]=\"isSelected(row.item)\"\n                  [class.text-body]=\"!isSelected(row.item) && activeIndex() !== row.index\"\n                  [class.text-fg-disabled]=\"row.item?.disabled\"\n                >\n                  @if (optionTemplate) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplate; context: { $implicit: row.item }\"\n                    />\n                  } @else {\n                    <!-- Ph\u1EA7n \u0111\u1EA7u: `icon` \u01B0u ti\u00EAn, kh\u00F4ng c\u00F3 th\u00EC `prefix` (ch\u1EEF).\n                       `prefixClass` nh\u1EADn CLASS ch\u1EE9 kh\u00F4ng nh\u1EADn m\u00E3 m\u00E0u \u2014 m\u00E3 m\u00E0u\n                       c\u1EE9ng kh\u00F4ng \u0111\u1ED5i theo theme v\u00E0 theo ch\u1EBF \u0111\u1ED9 t\u1ED1i. -->\n                    @if (row.item?.icon) {\n                      <ol-icon\n                        [name]=\"row.item.icon\"\n                        size=\"sm\"\n                        class=\"shrink-0\"\n                        [class]=\"row.item.prefixClass || ''\"\n                      />\n                    } @else if (row.item?.prefix) {\n                      <span\n                        class=\"shrink-0 text-2xs font-semibold tabular-nums\"\n                        [class]=\"row.item.prefixClass || 'text-body-subtle'\"\n                        >{{ row.item.prefix }}</span\n                      >\n                    }\n                    <span class=\"min-w-0 flex-1 truncate\">{{ row.label }}</span>\n                  }\n                  @if (isSelected(row.item)) {\n                    <ol-icon name=\"check\" size=\"sm\" class=\"shrink-0 text-fg-brand\" />\n                  }\n                </div>\n              }\n            }\n\n            <!-- \u0110\u1EC7m d\u01B0\u1EDBi \u2014 xem l\u00FD do \u1EDF \u0111\u1EC7m tr\u00EAn. -->\n            @if (viewport().padBottom > 0) {\n              <div [style.height.px]=\"viewport().padBottom\" aria-hidden=\"true\"></div>\n            }\n\n            <!-- Danh s\u00E1ch C\u00D2N m\u1EE5c nh\u01B0ng ch\u1EEF \u0111ang g\u00F5 ch\u01B0a tr\u00F9ng nh\u00E3n n\u00E0o: v\u1EABn ph\u1EA3i\n               cho t\u1EA1o. V\u00ED d\u1EE5 \u0111\u00E3 c\u00F3 \"To\u00E1n 10\" m\u00E0 ng\u01B0\u1EDDi d\u00F9ng g\u00F5 \"To\u00E1n 11\" \u2014\n               nh\u00E1nh r\u1ED7ng \u1EDF tr\u00EAn kh\u00F4ng ch\u1EA1y v\u00EC b\u1ED9 l\u1ECDc v\u1EABn ra m\u1ED9t m\u1EE5c. -->\n            @if (canCreate()) {\n              <div class=\"mt-1 border-t border-default-subtle p-2\">\n                <button\n                  type=\"button\"\n                  (click)=\"createOption()\"\n                  class=\"inline-flex w-full items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium text-fg-brand transition-colors hover:bg-brand-softer\"\n                >\n                  <ol-icon name=\"plus\" size=\"xs\" class=\"shrink-0\" />\n                  <span class=\"truncate\">{{ createLabel() }}</span>\n                </button>\n              </div>\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (helperText()) {\n    <p\n      class=\"mt-1.5 text-xs\"\n      [class.text-body]=\"state() === 'default'\"\n      [class.text-fg-danger-strong]=\"state() === 'error'\"\n      [class.text-fg-success-strong]=\"state() === 'success'\"\n    >\n      {{ helperText() }}\n    </p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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"] }, { kind: "component", type: OlSpinner, selector: "ol-spinner", inputs: ["variant", "size", "color", "ariaLabel"] }, { kind: "component", type: OlFieldFrame, selector: "ol-field-frame", inputs: ["enabled", "label", "forId", "labelId", "variant", "size", "state", "disabled", "required", "hasValue", "open", "floatStart"] }, { kind: "component", type: OlFieldLabel, selector: "ol-field-label", inputs: ["text", "forId", "labelId", "required", "helpIcon", "helpTooltip", "flush", "beside", "size"] }, { kind: "component", type: OlDropdownState, selector: "ol-dropdown-state", inputs: ["type", "heading", "description", "query"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'ol-select', standalone: true, imports: [CommonModule, FormsModule, OlIcon, OlSpinner], host: {
+            args: [{ selector: 'ol-select', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        OlIcon,
+                        OlSpinner,
+                        OlFieldFrame,
+                        OlFieldLabel,
+                        OlDropdownState,
+                    ], 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.
                         class: 'block w-full',
@@ -10159,14 +11119,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                             useExisting: forwardRef(() => OlSelect),
                             multi: true,
                         },
-                    ], template: "<div class=\"w-full\">\n  @if (label()) {\n    <div class=\"flex items-center justify-between mb-1.5\">\n      <label\n        [id]=\"labelId()\"\n        [for]=\"inputId()\"\n        class=\"inline-flex items-center gap-1 text-sm font-medium text-heading\"\n      >\n        <span>{{ label() }}</span>\n        @if (required() || showAsterisk()) {\n          <span class=\"text-fg-danger font-bold\">*</span>\n        }\n      </label>\n    </div>\n  }\n\n  <div class=\"relative w-full\">\n    @if (leftIcon()) {\n      <div\n        class=\"absolute inset-y-0 inset-s-0 z-10 flex items-center ps-3.5 pointer-events-none text-body-subtle\"\n      >\n        <ng-content select=\"[leftIcon]\" />\n      </div>\n    }\n\n    <!--\n      \u00D4 \u0110I\u1EC0U KHI\u1EC2N \u2014 gi\u1EEF NGUY\u00CAN b\u1EA3ng class c\u1EE7a b\u1EA3n `<select>` c\u0169 \u0111\u1EC3 giao di\u1EC7n\n      Figma kh\u00F4ng \u0111\u1ED5i m\u1ED9t pixel: c\u00F9ng vi\u1EC1n, n\u1EC1n, bo g\u00F3c, thang c\u1EE1 (h-9/h-10/h-12)\n      v\u00E0 c\u00F9ng b\u1EA3ng m\u00E0u theo `state`.\n\n      `dark:focus:ring-brand-950` GI\u1EEE b\u1EADc s\u1ED1: `brand` l\u00E0 b\u1EA3ng Figma C\u00D3 n\u00EAn b\u1EADc\n      s\u1ED1 h\u1EE3p l\u1EC7, c\u00F2n `ring-brand-softer` (token duy nh\u1EA5t tr\u1ECF brand-950 \u1EDF ch\u1EBF \u0111\u1ED9\n      t\u1ED1i) ch\u01B0a n\u01A1i n\u00E0o d\u00F9ng n\u00EAn Tailwind kh\u00F4ng sinh CSS \u2014 thay v\u00E0o l\u00E0 class\n      CH\u1EBET m\u00E0 build v\u1EABn xanh (\u0111o 2026-09-15).\n\n      Kh\u00E1c b\u1EA3n c\u0169 \u1EDF ch\u1ED7 \u0111\u00E2y l\u00E0 `<div role=\"combobox\">` ch\u1EE9 kh\u00F4ng ph\u1EA3i `<select>`\n      g\u1ED1c: th\u1EBB g\u1ED1c kh\u00F4ng cho t\u00ECm ki\u1EBFm, \u0111a ch\u1ECDn hay t\u1EF1 v\u1EBD t\u1EEBng d\u00F2ng.\n    -->\n    <div\n      [id]=\"inputId()\"\n      role=\"combobox\"\n      tabindex=\"0\"\n      [attr.aria-labelledby]=\"label() ? labelId() : triggerLabel() ? triggerLabelId() : null\"\n      [attr.aria-label]=\"label() || triggerLabel() ? null : ariaLabel() || null\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-activedescendant]=\"activeOptionId()\"\n      [attr.aria-invalid]=\"ariaInvalid()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n      aria-haspopup=\"listbox\"\n      (click)=\"toggle()\"\n      (keydown)=\"onKeyDown($event)\"\n      class=\"relative flex w-full items-center gap-1.5 border shadow-xs outline-none pe-10 font-normal\"\n      [class.border-default-medium]=\"state() === 'default' || disabled()\"\n      [class.rounded-base]=\"true\"\n      [class]=\"paddingStartClass()\"\n      [class.flex-wrap]=\"multiple()\"\n      [class.content-center]=\"multiple()\"\n      [class.py-1]=\"multiple()\"\n      [class.min-h-9]=\"resolvedSize() === 'sm'\"\n      [class.min-h-10]=\"resolvedSize() === 'base'\"\n      [class.min-h-12]=\"resolvedSize() === 'lg'\"\n      [class.min-h-13]=\"resolvedSize() === 'xl'\"\n      [class.text-sm]=\"resolvedSize() === 'sm' || resolvedSize() === 'base'\"\n      [class.text-base]=\"resolvedSize() === 'lg' || resolvedSize() === 'xl'\"\n      [class.cursor-pointer]=\"!disabled() && !readonly()\"\n      [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled()\"\n      [class.text-heading]=\"state() === 'default' && !disabled()\"\n      [class.focus:border-brand]=\"state() === 'default' && !disabled()\"\n      [class.focus:ring-2]=\"!disabled()\"\n      [class.focus:ring-brand-subtle]=\"state() === 'default' && !disabled()\"\n      [class.dark:focus:ring-brand-950]=\"state() === 'default' && !disabled()\"\n      [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n      [class.border-danger]=\"state() === 'error' && !disabled()\"\n      [class.text-fg-danger-strong]=\"state() === 'error' && !disabled()\"\n      [class.focus:border-danger]=\"state() === 'error' && !disabled()\"\n      [class.focus:ring-danger-medium]=\"state() === 'error' && !disabled()\"\n      [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n      [class.border-success]=\"state() === 'success' && !disabled()\"\n      [class.text-fg-success-strong]=\"state() === 'success' && !disabled()\"\n      [class.focus:border-success]=\"state() === 'success' && !disabled()\"\n      [class.focus:ring-success-medium]=\"state() === 'success' && !disabled()\"\n      [class.bg-disabled]=\"disabled()\"\n      [class.text-fg-disabled]=\"disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n    >\n      <!-- Th\u1EBB c\u1EE7a c\u00E1c gi\u00E1 tr\u1ECB \u0111\u00E3 ch\u1ECDn (\u0111a ch\u1ECDn) -->\n      @if (multiple()) {\n        @for (val of selectedValues(); track val) {\n          <!-- `h-6` c\u1ED1 \u0111\u1ECBnh: \u0111\u1EC3 th\u1EBB co theo ch\u1EEF th\u00EC m\u1ED7i th\u1EBB cao m\u1ED9t ki\u1EC3u v\u00E0 \u00F4\n               b\u1ECB \u0111\u1EA9y theo th\u1EBB cao nh\u1EA5t. C\u00F9ng c\u00E1ch \u0111\u00E3 ch\u1ED1t \u1EDF `ol-autocomplete`. -->\n          <!-- Chip kho\u00E1 d\u00F9ng b\u1EA3ng m\u00E0u TRUNG T\u00CDNH: m\u1EA5t n\u00FAt \u00D7 l\u00E0 d\u1EA5u hi\u1EC7u qu\u00E1\n               nh\u1EB9, ng\u01B0\u1EDDi d\u00F9ng t\u01B0\u1EDFng n\u00FAt ch\u01B0a hi\u1EC7n. \u0110\u1ED5i m\u00E0u cho th\u1EA5y ngay \u0111\u00E2y\n               l\u00E0 lo\u1EA1i chip kh\u00E1c. -->\n          <span\n            class=\"inline-flex h-6 shrink-0 items-center gap-1 rounded-md border px-2 text-xs font-medium\"\n            [class.border-brand-subtle]=\"!isLocked(val)\"\n            [class.bg-brand-softer]=\"!isLocked(val)\"\n            [class.text-fg-brand-strong]=\"!isLocked(val)\"\n            [class.border-default]=\"isLocked(val)\"\n            [class.bg-neutral-tertiary]=\"isLocked(val)\"\n            [class.text-body]=\"isLocked(val)\"\n          >\n            @if (isLocked(val)) {\n              <ol-icon name=\"lucide:lock\" size=\"xs\" class=\"shrink-0 opacity-70\" />\n            } @else if (optionOf(val)?.icon) {\n              <ol-icon [name]=\"$any(optionOf(val)).icon\" size=\"xs\" class=\"shrink-0\" />\n            } @else if (optionOf(val)?.prefix) {\n              <span class=\"shrink-0 text-2xs font-semibold tabular-nums\">{{\n                optionOf(val)?.prefix\n              }}</span>\n            }\n            <span>{{ getDisplayLabel(val) }}</span>\n            @if (!disabled() && !readonly() && !isLocked(val)) {\n              <button\n                type=\"button\"\n                (click)=\"removeValue(val, $event)\"\n                [attr.aria-label]=\"'G\u1EE1 ' + getDisplayLabel(val)\"\n                class=\"inline-flex size-4 shrink-0 items-center justify-center rounded-full text-fg-brand hover:text-fg-brand-strong focus:outline-hidden\"\n              >\n                <ol-icon name=\"close\" size=\"xs\" />\n              </button>\n            }\n          </span>\n        }\n      }\n\n      <!--\n        PH\u1EA6N C\u1ED0 \u0110\u1ECANH c\u1EE7a \u00F4 \u0111\u00F3ng \u2014 icon v\u00E0 nh\u00E3n LU\u00D4N hi\u1EC7n, d\u00F9 \u0111\u00E3 ch\u1ECDn hay ch\u01B0a,\n        d\u00F9 danh s\u00E1ch \u0111ang m\u1EDF hay \u0111\u00F3ng. Ch\u1EC9 ph\u1EA7n GI\u00C1 TR\u1ECA b\u00EAn ph\u1EA3i m\u1EDBi \u0111\u1ED5i.\n\n        \u0110\u1EB7t NGO\u00C0I c\u1EA3 ba nh\u00E1nh d\u01B0\u1EDBi (\u00F4 t\u00ECm / nh\u00E3n \u0111\u00E3 ch\u1ECDn / placeholder) ch\u00EDnh\n        l\u00E0 \u0111i\u1EC1u l\u00E0m n\u00F3 c\u1ED1 \u0111\u1ECBnh \u2014 n\u1EB1m trong nh\u00E1nh n\u00E0o th\u00EC n\u00F3 bi\u1EBFn m\u1EA5t \u1EDF hai\n        nh\u00E1nh kia.\n\n        Kh\u00E1c `icon` c\u1EE7a M\u1EE4C: c\u00E1i \u0111\u00F3 \u0111\u1ED5i theo m\u1EE5c \u0111ang ch\u1ECDn. Khai c\u1EA3 hai th\u00EC\n        `triggerIcon` th\u1EAFng, v\u00EC nh\u00E3n c\u1ED1 \u0111\u1ECBnh m\u00E0 nh\u1EA3y theo m\u1EE5c th\u00EC h\u1EBFt c\u1ED1 \u0111\u1ECBnh.\n      -->\n      @if (triggerIcon()) {\n        <ol-icon [name]=\"triggerIcon()\" size=\"sm\" class=\"shrink-0 text-body-subtle\" />\n      }\n      @if (triggerLabel()) {\n        <span [id]=\"triggerLabelId()\" class=\"shrink-0 text-sm font-medium text-body\">{{\n          triggerLabel()\n        }}</span>\n      }\n\n      <!--\n        \u00D4 G\u00D5 T\u00CCM ch\u1EC9 hi\u1EC7n khi danh s\u00E1ch \u0110ANG M\u1EDE. \u0110\u00F3ng l\u1EA1i th\u00EC hi\u1EC7n nh\u00E3n t\u0129nh \u2014\n        n\u1EBFu \u0111\u1EC3 \u00F4 nh\u1EADp lu\u00F4n \u0111\u00F3, ng\u01B0\u1EDDi d\u00F9ng t\u01B0\u1EDFng g\u00F5 th\u1EB3ng v\u00E0o \u0111\u01B0\u1EE3c, m\u00E0 gi\u00E1 tr\u1ECB\n        l\u1EA1i kh\u00F4ng \u0111\u1ED5i theo ch\u1EEF h\u1ECD g\u00F5.\n      -->\n      @if (searchable() && isOpen() && searchPosition() === 'inline') {\n        <input\n          type=\"text\"\n          [ngModel]=\"searchQuery()\"\n          (ngModelChange)=\"onSearchInput($event)\"\n          (click)=\"$event.stopPropagation()\"\n          [placeholder]=\"searchPlaceholder()\"\n          [attr.aria-label]=\"searchPlaceholder()\"\n          autocomplete=\"off\"\n          class=\"min-w-0 flex-1 border-none bg-transparent p-0 text-inherit outline-none placeholder:text-body-subtle\"\n        />\n      } @else if (!multiple() && hasValue()) {\n        @if (labelTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"labelTemplate; context: { $implicit: selectedValues()[0] }\"\n          />\n        } @else {\n          <!-- \u00D4 \u0111\u00F3ng hi\u1EC7n C\u1EA2 ph\u1EA7n \u0111\u1EA7u c\u1EE7a m\u1EE5c \u0111ang ch\u1ECDn, kh\u00F4ng ch\u1EC9 ch\u1EEF \u2014 \u0111\u00E2y\n               l\u00E0 \u0111i\u1EC3m kh\u00E1c c\u1EE7a combobox reui so v\u1EDBi \u00F4 ch\u1ECDn th\u01B0\u1EDDng. -->\n          @if (selectedItem()?.icon && !triggerIcon()) {\n            <ol-icon\n              [name]=\"$any(selectedItem()).icon\"\n              size=\"sm\"\n              class=\"shrink-0\"\n              [class]=\"selectedItem()?.prefixClass || ''\"\n            />\n          } @else if (selectedItem()?.prefix && !triggerIcon()) {\n            <span\n              class=\"shrink-0 text-2xs font-semibold tabular-nums\"\n              [class]=\"selectedItem()?.prefixClass || 'text-body-subtle'\"\n              >{{ selectedItem()?.prefix }}</span\n            >\n          }\n          <span class=\"truncate\">{{ singleLabel() }}</span>\n        }\n      } @else if (!hasValue()) {\n        <!--\n          \u1EDE tr\u1EA1ng th\u00E1i L\u1ED6I, n\u1EC1n \u0111\u1ED5i sang `bg-danger-soft` (#fef0f2) v\u00E0\n          `text-body-subtle` ch\u1EC9 c\u00F2n **4,36** \u2014 d\u01B0\u1EDBi chu\u1EA9n 4,5. N\u1EC1n `success`\n          (#ecfdf5) cho 4,59, v\u1EEBa \u0111\u1EE7, n\u00EAn ch\u1EC9 nh\u00E1nh l\u1ED7i c\u1EA7n \u0111\u1EADm h\u01A1n.\n          `text-body` tr\u00EAn n\u1EC1n \u0111\u00F3 ra 6,82 (s\u00E1ng) v\u00E0 10,66 (t\u1ED1i).\n        -->\n        <span\n          class=\"truncate\"\n          [class.text-body-subtle]=\"state() !== 'error'\"\n          [class.text-body]=\"state() === 'error'\"\n          >{{ placeholder() }}</span\n        >\n      }\n\n      <!--\n        M\u1ED8T \u00F4 \u0111i\u1EC1u khi\u1EC3n, \u0110\u1ED4I VAI theo tr\u1EA1ng th\u00E1i \u2014 kh\u00F4ng x\u1EBFp c\u1EA1nh nhau.\n        B\u1EA3n \u0111\u1EA7u c\u1EE7a t\u00F4i \u0111\u1EC3 n\u00FAt xo\u00E1 v\u00E0 `chevron-down` C\u00D9NG hi\u1EC7n: \u0111o 2026-09-17\n        tr\u00EAn `/forms` \u0111\u1EBFm **2 icon b\u00EAn ph\u1EA3i \u1EDF M\u1ECCI tr\u1EA1ng th\u00E1i**, k\u1EC3 c\u1EA3 khi danh\n        s\u00E1ch \u0111ang m\u1EDF. C\u1EE5m b\u00EAn ph\u1EA3i ch\u1EADt, hai icon 16px chen nhau tr\u00F4ng r\u1ED1i.\n\n        `ol-autocomplete` \u0111\u00E3 ch\u1ED1t l\u1ED1i n\u00E0y t\u1EEB tr\u01B0\u1EDBc (\u00F4 `w-7` \u0111\u1ED5i vai\n        spinner / xo\u00E1 / chevron); `ol-select` ph\u1EA3i theo cho nh\u1EA5t qu\u00E1n.\n\n        \u00D4 r\u1ED9ng C\u1ED0 \u0110\u1ECANH \u0111\u1EC3 khung kh\u00F4ng nh\u1EA3y m\u1ED7i l\u1EA7n icon \u0111\u1ED5i vai.\n\n        \u0110\u1EC6M PH\u1EA2I l\u00E0 B\u1EAET BU\u1ED8C, kh\u00F4ng ph\u1EA3i trang tr\u00ED: c\u1EE5m n\u00E0y `absolute` n\u00EAn BUNG\n        KH\u1ECEI LU\u1ED2NG, kh\u00F4ng h\u01B0\u1EDFng `px-3.5` c\u1EE7a khung nh\u01B0 `ol-autocomplete` (c\u00E1i\n        \u0111\u00F3 d\u00F9ng `ms-auto`, v\u1EABn n\u1EB1m trong lu\u1ED3ng). B\u1EA3n \u0111\u1EA7u ch\u1EC9 c\u00F3 `w-7` \u2014 \u0111o\n        2026-09-17 ra icon c\u00E1ch m\u00E9p ph\u1EA3i **3px**, d\u00EDnh s\u00E1t l\u1EC1.\n\n        Figma `ol-select` Type=Default: icon `angle-down` c\u00E1ch m\u00E9p ph\u1EA3i **12px**.\n        Con s\u1ED1 `pe-2` (8px) tr\u00F4ng c\u00F3 v\u1EBB h\u1EE5t, nh\u01B0ng n\u00FAt xo\u00E1 l\u00E0 `size-6` (24px)\n        b\u1ECDc icon 16px n\u00EAn d\u01B0 4px m\u1ED7i b\u00EAn \u2014 8 + 4 = 12px t\u1EDBi SVG th\u1EADt. \u0110o b\u1EB1ng\n        m\u00E9p SVG ch\u1EE9 kh\u00F4ng m\u00E9p n\u00FAt, v\u00EC m\u1EAFt ng\u01B0\u1EDDi nh\u00ECn th\u1EA5y SVG.\n\n        `justify-end` ch\u1EE9 kh\u00F4ng `justify-center`: c\u0103n gi\u1EEFa th\u00EC icon tr\u00F4i theo\n        b\u1EC1 r\u1ED9ng \u00F4, \u0111\u1ED5i `w-*` l\u00E0 l\u1EC7ch l\u1EA1i.\n      -->\n      <div class=\"absolute inset-y-0 inset-e-0 flex w-10 items-center justify-end pe-3.5\">\n        @if (loading()) {\n          <ol-spinner size=\"xs\" color=\"brand\" />\n        } @else if (clearable() && hasContent() && !disabled() && !readonly()) {\n          <button\n            type=\"button\"\n            (click)=\"clear($event)\"\n            aria-label=\"Xo\u00E1 l\u1EF1a ch\u1ECDn\"\n            class=\"inline-flex size-4 shrink-0 items-center justify-center rounded-full text-body-subtle transition-colors hover:text-heading\"\n          >\n            <ol-icon name=\"close\" size=\"sm\" />\n          </button>\n        } @else {\n          <ol-icon\n            name=\"chevron-down\"\n            size=\"sm\"\n            class=\"pointer-events-none shrink-0 text-body-subtle transition-transform\"\n            [class.rotate-180]=\"isOpen()\"\n          />\n        }\n      </div>\n    </div>\n\n    <!--\n      DANH S\u00C1CH. Token \u0111\u1ECDc th\u1EB3ng t\u1EEB Figma `ol-autocomplete-menu` (#1149:53147),\n      bi\u1EBFn th\u1EC3 `Type=Default` \u2014 \u0111\u00F3 l\u00E0 dropdown chu\u1EA9n c\u1EE7a design system:\n\n        bo g\u00F3c  12px            -> rounded-md\n        \u0111\u1EC7m      8px            -> p-2         (tr\u01B0\u1EDBc l\u00E0 p-1.5 = 6px)\n        n\u1EC1n     bg-neutral-primary-medium      (tr\u01B0\u1EDBc l\u00E0 bg-neutral-primary)\n        vi\u1EC1n    border-default-medium          (tr\u01B0\u1EDBc l\u00E0 border-default)\n\n      Hai token n\u1EC1n/vi\u1EC1n TR\u00D9NG NHAU \u1EDF ch\u1EBF \u0111\u1ED9 s\u00E1ng (#ffffff / #e5e7eb) n\u00EAn \u0111\u1ED5i\n      hay kh\u00F4ng nh\u00ECn c\u0169ng th\u1EBF \u2014 nh\u01B0ng CH\u1EBE \u0110\u1ED8 T\u1ED0I th\u00EC kh\u00E1c h\u1EB3n:\n\n        bg-primary        gray-950  \u2190 \u0111ang d\u00F9ng, g\u1EA7n \u0111en, panel CH\u00CCM v\u00E0o n\u1EC1n\n        bg-primary-medium gray-800  \u2190 Figma, panel n\u1ED5i l\u00EAn\n        border-default        gray-800\n        border-default-medium gray-700\n\n      \u0110\u00E2y \u0111\u00FAng lo\u1EA1i l\u1ED7i ch\u1EC9 l\u1ED9 \u1EDF ch\u1EBF \u0111\u1ED9 t\u1ED1i m\u00E0 ch\u1EBF \u0111\u1ED9 s\u00E1ng kh\u00F4ng bao gi\u1EDD th\u1EA5y.\n    -->\n    @if (isOpen()) {\n      <!--\n        \u00D4 T\u00CCM \u1EDE \u0110\u1EA6U PANEL (`searchPosition=\"panel\"`).\n        \u0110\u1EB7t NGO\u00C0I th\u1EBB `role=\"listbox\"`: m\u1ED9t `<input>` n\u1EB1m trong listbox l\u00E0 sai\n        ARIA \u2014 m\u1ECDi con c\u1EE7a listbox ph\u1EA3i l\u00E0 `option` ho\u1EB7c `group`. \u0110\u00E2y l\u00E0 l\u1ED1i\n        `ol-command` v\u00E0 combobox c\u1EE7a reui d\u00F9ng.\n      -->\n      <!--\n        H\u1ED8P B\u1ECCC mang `#panel` v\u00E0 `position: absolute`.\n\n        `#panel` ph\u1EA3i \u1EDF \u0110\u00C2Y ch\u1EE9 kh\u00F4ng \u1EDF th\u1EBB `role=\"listbox\"`: `appendTo=\"body\"`\n        \u0111\u1EA9y ch\u00EDnh ph\u1EA7n t\u1EED `#panel` ra `<body>`. \u0110\u1EC3 n\u00F3 \u1EDF listbox th\u00EC \u00F4 t\u00ECm \u1EDF l\u1EA1i\n        trong c\u00E2y DOM c\u0169 c\u00F2n danh s\u00E1ch bay \u0111i \u2014 h\u1ED9p tho\u1EA1i v\u1EE1 l\u00E0m \u0111\u00F4i.\n      -->\n      <div\n        #panel\n        class=\"absolute z-dropdown overflow-hidden rounded-md border border-default-medium bg-neutral-primary-medium shadow-lg flex flex-col max-h-[var(--ol-overlay-max-height,24rem)]\"\n        [class.w-full]=\"matchTriggerWidth()\"\n        [class]=\"menuClass()\"\n      >\n        @if (searchable() && searchPosition() === 'panel') {\n          <div class=\"border-b border-default-subtle p-2\">\n            <!-- Icon/ch\u1EEF \u0111\u1EE9ng \u0111\u1EA7u \u00F4 T\u00CCM \u2014 c\u1EE7a vi\u1EC7c T\u00CCM, kh\u00F4ng ph\u1EA3i c\u1EE7a m\u1EE5c\n                 \u0111ang ch\u1ECDn. B\u1ECDc trong khung c\u00F3 vi\u1EC1n \u0111\u1EC3 icon n\u1EB1m TRONG \u00F4, kh\u00F4ng\n                 \u0111\u1EE9ng r\u1EDDi b\u00EAn ngo\u00E0i nh\u01B0 m\u1ED9t nh\u00E3n. -->\n            <div\n              class=\"flex items-center gap-2 rounded border border-default bg-neutral-primary px-2.5 py-1.5 focus-within:border-brand\"\n            >\n              @if (searchIcon()) {\n                <ol-icon [name]=\"searchIcon()\" size=\"sm\" class=\"shrink-0 text-body-subtle\" />\n              } @else if (searchPrefix()) {\n                <span class=\"shrink-0 text-xs font-medium text-body-subtle\">{{\n                  searchPrefix()\n                }}</span>\n              }\n              <input\n                #oTimPanel\n                type=\"text\"\n                [ngModel]=\"searchQuery()\"\n                (ngModelChange)=\"onSearchInput($event)\"\n                (click)=\"$event.stopPropagation()\"\n                (keydown)=\"onKeyDown($event)\"\n                [placeholder]=\"searchPlaceholder()\"\n                [attr.aria-label]=\"searchPlaceholder()\"\n                [attr.aria-controls]=\"listboxId()\"\n                autocomplete=\"off\"\n                class=\"w-full min-w-0 border-none bg-transparent p-0 text-sm outline-none placeholder:text-body-subtle\"\n              />\n            </div>\n          </div>\n        }\n        <!--\n          `overflow-x-hidden` KHAI R\u00D5: khai `overflow-y-auto` m\u1ED9t m\u00ECnh th\u00EC tr\u00ECnh\n          duy\u1EC7t t\u1EF1 t\u00EDnh `overflow-x` th\u00E0nh `auto` (spec CSS: m\u1ED9t tr\u1EE5c `visible`\n          c\u00F2n tr\u1EE5c kia kh\u00E1c `visible` l\u00E0 kh\u00F4ng h\u1EE3p l\u1EC7). \u0110o \u0111\u01B0\u1EE3c `scrollWidth\n          765 > 620` khi option c\u00F3 `white-space: nowrap`.\n\n          Ch\u1EC9 ch\u1EB7n \u1EDF PANEL CH\u1ECCN c\u00F3 b\u1EC1 r\u1ED9ng c\u1ED1 \u0111\u1ECBnh \u2014 n\u1ED9i dung ph\u1EA3i v\u1EEBa b\u1EC1 ngang.\n          KH\u00D4NG ch\u1EB7n \u1EDF khung ch\u1EE9a n\u1ED9i dung t\u1EF1 do (`device-mockup`,\n          `chat-container`, `drawer`): \u1EDF \u0111\u00F3 ng\u01B0\u1EDDi d\u00F9ng chi\u1EBFu n\u1ED9i dung b\u1EA5t k\u1EF3\n          v\u00E0o, ch\u1EB7n l\u00E0 c\u1EAFt m\u1EA5t ph\u1EA7n r\u1ED9ng c\u1EE7a h\u1ECD.\n        -->\n        <div\n          #listboxRef\n          role=\"listbox\"\n          [id]=\"listboxId()\"\n          [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n          (scroll)=\"onPanelScroll($event)\"\n          class=\"flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-2\"\n        >\n          @if (waitingForTerm()) {\n            <!-- Ch\u01B0a g\u00F5 \u0111\u1EE7 `minTermLength`: \"kh\u00F4ng t\u00ECm th\u1EA5y\" l\u00E0 sai s\u1EF1 th\u1EADt, v\u00EC\n               ch\u01B0a t\u00ECm g\u00EC c\u1EA3. C\u00F9ng l\u1ED1i `typeToSearchText` c\u1EE7a ng-select. -->\n            <div class=\"p-3 text-center text-sm text-body-subtle\">{{ typeToSearchText() }}</div>\n          } @else if (rows().length === 0) {\n            <div class=\"p-3 text-center text-sm text-body-subtle\">\n              <p>{{ emptyText() }}</p>\n              @if (canCreate()) {\n                <button\n                  type=\"button\"\n                  (click)=\"createOption()\"\n                  class=\"mt-2 inline-flex items-center gap-1.5 rounded-lg bg-brand-softer px-3 py-1.5 text-xs font-medium text-fg-brand transition-colors hover:bg-brand-subtle\"\n                >\n                  <ol-icon name=\"plus\" size=\"xs\" />\n                  <span>{{ createLabel() }}</span>\n                </button>\n              }\n            </div>\n          } @else {\n            <!-- \u0110\u1EC7m tr\u00EAn: gi\u1EEF thanh cu\u1ED9n d\u00E0i \u0111\u00FAng nh\u01B0 khi v\u1EBD h\u1EBFt danh s\u00E1ch. -->\n            @if (viewport().padTop > 0) {\n              <div [style.height.px]=\"viewport().padTop\" aria-hidden=\"true\"></div>\n            }\n\n            @for (row of viewport().rows; track row.kind + '-' + row.index + '-' + row.label) {\n              @if (row.kind === 'group') {\n                <!-- `dauTien` t\u00EDnh khi d\u1EF1ng danh s\u00E1ch, KH\u00D4NG d\u00F9ng `$first` c\u1EE7a\n                   `@for`: khi `virtualScroll` b\u1EADt, `$first` l\u00E0 d\u00F2ng \u0111\u1EA7u c\u1EE7a\n                   khung nh\u00ECn n\u00EAn cu\u1ED9n xu\u1ED1ng l\u00E0 m\u1EA5t \u0111\u01B0\u1EDDng ng\u0103n. -->\n                @if (groupSeparator() && !row.isFirstGroup) {\n                  <div role=\"presentation\" class=\"my-1 border-t border-default-subtle\"></div>\n                }\n                <div\n                  role=\"presentation\"\n                  class=\"px-2.5 pt-2 pb-0 text-2xs font-semibold uppercase tracking-wide text-body-subtle\"\n                >\n                  {{ row.label }}\n                </div>\n              } @else {\n                <!--\n                `rounded-sm` (6px) ch\u1EE9 kh\u00F4ng `rounded-md` (12px): Figma v\u1EBD\n                `ol-autocomplete-item` bo **8px**, m\u00E0 thang token c\u1EE7a lib kh\u00F4ng\n                c\u00F3 b\u1EADc 8 (xs 4 \u00B7 sm 6 \u00B7 md/base 12 \u00B7 lg 16). L\u1EA5y b\u1EADc G\u1EA6N NH\u1EA4T\n                thay v\u00EC vi\u1EBFt `rounded-[8px]` \u2014 gi\u00E1 tr\u1ECB th\u00F4 n\u1EB1m ngo\u00E0i h\u1EC7 token\n                th\u00EC \u0111\u1ED5i theme kh\u00F4ng theo \u0111\u01B0\u1EE3c.\n\n                `ol-dropdown-item` c\u0169ng \u0111\u00E3 ch\u1ED1t `rounded-sm` cho m\u1EE5c menu, n\u00EAn\n                \u0111\u00E2y c\u00F2n l\u00E0 gi\u1EEF nh\u1EA5t qu\u00E1n trong lib.\n              -->\n                <!--\n                  `min-w-0` cho ph\u00E9p h\u00E0ng CO l\u1EA1i, \u0111i\u1EC1u ki\u1EC7n c\u1EA7n \u0111\u1EC3 `truncate`\n                  c\u1EE7a ng\u01B0\u1EDDi d\u00F9ng ch\u1EA1y. Nh\u01B0ng n\u00F3 KH\u00D4NG t\u1EF1 ch\u1EB7n tr\u00E0n: \u0111o b\u1EB1ng c\u00E1ch\n                  ti\u00EAm `white-space: nowrap` v\u00E0o h\u00E0ng \u2014 panel v\u1EABn `scrollWidth\n                  1763 > 831`. Ch\u1EC9 `overflow: hidden` \u0111\u1EB7t tr\u00EAn CH\u00CDNH ph\u1EA7n t\u1EED n\u1ED9i\n                  dung m\u1EDBi ch\u1EB7n \u0111\u01B0\u1EE3c, m\u00E0 ph\u1EA7n t\u1EED \u0111\u00F3 do ng\u01B0\u1EDDi d\u00F9ng chi\u1EBFu v\u00E0o qua\n                  `optionTemplate` n\u00EAn lib kh\u00F4ng v\u1EDBi t\u1EDBi. `overflow-x-hidden` \u1EDF\n                  panel l\u00E0 l\u1EDBp ch\u1EB7n cu\u1ED1i.\n                -->\n                <div\n                  role=\"option\"\n                  [id]=\"optionId(row.index)\"\n                  [attr.data-option-index]=\"row.index\"\n                  [attr.aria-selected]=\"isSelected(row.item)\"\n                  [attr.aria-disabled]=\"row.item?.disabled ? 'true' : null\"\n                  (click)=\"selectItem(row.item); $event.stopPropagation()\"\n                  [style.height.px]=\"virtualScroll() ? itemHeight() : null\"\n                  class=\"flex min-w-0 items-center gap-2 rounded-sm px-3 py-2 text-sm transition-colors\"\n                  [class.cursor-pointer]=\"!row.item?.disabled\"\n                  [class.cursor-not-allowed]=\"row.item?.disabled\"\n                  [class.bg-neutral-tertiary-medium]=\"\n                    activeIndex() === row.index && !row.item?.disabled\n                  \"\n                  [class.hover:bg-neutral-tertiary-medium]=\"\n                    !row.item?.disabled && activeIndex() !== row.index\n                  \"\n                  [class.text-heading]=\"isSelected(row.item) || activeIndex() === row.index\"\n                  [class.hover:text-heading]=\"!row.item?.disabled\"\n                  [class.font-medium]=\"isSelected(row.item)\"\n                  [class.text-body]=\"!isSelected(row.item) && activeIndex() !== row.index\"\n                  [class.text-fg-disabled]=\"row.item?.disabled\"\n                >\n                  @if (optionTemplate) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplate; context: { $implicit: row.item }\"\n                    />\n                  } @else {\n                    <!-- Ph\u1EA7n \u0111\u1EA7u: `icon` \u01B0u ti\u00EAn, kh\u00F4ng c\u00F3 th\u00EC `prefix` (ch\u1EEF).\n                       `prefixClass` nh\u1EADn CLASS ch\u1EE9 kh\u00F4ng nh\u1EADn m\u00E3 m\u00E0u \u2014 m\u00E3 m\u00E0u\n                       c\u1EE9ng kh\u00F4ng \u0111\u1ED5i theo theme v\u00E0 theo ch\u1EBF \u0111\u1ED9 t\u1ED1i. -->\n                    @if (row.item?.icon) {\n                      <ol-icon\n                        [name]=\"row.item.icon\"\n                        size=\"sm\"\n                        class=\"shrink-0\"\n                        [class]=\"row.item.prefixClass || ''\"\n                      />\n                    } @else if (row.item?.prefix) {\n                      <span\n                        class=\"shrink-0 text-2xs font-semibold tabular-nums\"\n                        [class]=\"row.item.prefixClass || 'text-body-subtle'\"\n                        >{{ row.item.prefix }}</span\n                      >\n                    }\n                    <span class=\"min-w-0 flex-1 truncate\">{{ row.label }}</span>\n                  }\n                  @if (isSelected(row.item)) {\n                    <ol-icon name=\"check\" size=\"sm\" class=\"shrink-0 text-fg-brand\" />\n                  }\n                </div>\n              }\n            }\n\n            <!-- \u0110\u1EC7m d\u01B0\u1EDBi \u2014 xem l\u00FD do \u1EDF \u0111\u1EC7m tr\u00EAn. -->\n            @if (viewport().padBottom > 0) {\n              <div [style.height.px]=\"viewport().padBottom\" aria-hidden=\"true\"></div>\n            }\n\n            <!-- Danh s\u00E1ch C\u00D2N m\u1EE5c nh\u01B0ng ch\u1EEF \u0111ang g\u00F5 ch\u01B0a tr\u00F9ng nh\u00E3n n\u00E0o: v\u1EABn ph\u1EA3i\n               cho t\u1EA1o. V\u00ED d\u1EE5 \u0111\u00E3 c\u00F3 \"To\u00E1n 10\" m\u00E0 ng\u01B0\u1EDDi d\u00F9ng g\u00F5 \"To\u00E1n 11\" \u2014\n               nh\u00E1nh r\u1ED7ng \u1EDF tr\u00EAn kh\u00F4ng ch\u1EA1y v\u00EC b\u1ED9 l\u1ECDc v\u1EABn ra m\u1ED9t m\u1EE5c. -->\n            @if (canCreate()) {\n              <div class=\"mt-1 border-t border-default-subtle p-2\">\n                <button\n                  type=\"button\"\n                  (click)=\"createOption()\"\n                  class=\"inline-flex w-full items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium text-fg-brand transition-colors hover:bg-brand-softer\"\n                >\n                  <ol-icon name=\"plus\" size=\"xs\" class=\"shrink-0\" />\n                  <span class=\"truncate\">{{ createLabel() }}</span>\n                </button>\n              </div>\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (helperText()) {\n    <p\n      class=\"mt-1.5 text-xs\"\n      [class.text-body]=\"state() === 'default'\"\n      [class.text-fg-danger-strong]=\"state() === 'error'\"\n      [class.text-fg-success-strong]=\"state() === 'success'\"\n    >\n      {{ helperText() }}\n    </p>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAsterisk", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], menuClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuClass", required: false }] }], matchTriggerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchTriggerWidth", required: false }] }], maxSelectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedItems", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], hideSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSelected", required: false }] }], allowCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCreate", required: false }] }], createText: [{ type: i0.Input, args: [{ isSignal: true, alias: "createText", required: false }] }], groupSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSeparator", required: false }] }], searchPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPosition", required: false }] }], searchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchIcon", required: false }] }], searchPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPrefix", required: false }] }], triggerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerIcon", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], remoteSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "remoteSearch", required: false }] }], minTermLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTermLength", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], typeToSearchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeToSearchText", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], bufferAmount: [{ type: i0.Input, args: [{ isSignal: true, alias: "bufferAmount", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], added: [{ type: i0.Output, args: ["added"] }], removed: [{ type: i0.Output, args: ["removed"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], optionTemplate: [{
+                    ], template: "<div class=\"w-full\" [class]=\"labelLayout()\" [style.--ol-label-w]=\"labelWidth() || null\">\n  @if (label() && !floatingLabel()) {\n    <ol-field-label\n      [beside]=\"labelBeside()\"\n      [size]=\"resolvedSize()\"\n      [text]=\"label()\"\n      [forId]=\"inputId()\"\n      [labelId]=\"labelId()\"\n      [required]=\"required() || showAsterisk()\"\n    />\n  }\n\n  <div class=\"relative w-full\">\n    <ol-field-frame\n      [enabled]=\"floatingLabel()\"\n      [label]=\"label()\"\n      [forId]=\"inputId()\"\n      [labelId]=\"labelId()\"\n      [variant]=\"floatingVariant()\"\n      [size]=\"resolvedSize()\"\n      [state]=\"state()\"\n      [disabled]=\"disabled()\"\n      [required]=\"required() || showAsterisk()\"\n      [hasValue]=\"hasValue()\"\n      [open]=\"isOpen()\"\n    >\n      <!-- Icon tr\u00E1i neo theo KHUNG NH\u1EACP, kh\u00F4ng theo khung n\u1ED5i (c\u00F3 h\u00E0ng nh\u00E3n 20px). -->\n      <div class=\"relative\">\n        @if (leftIcon()) {\n          <div\n            class=\"absolute inset-y-0 inset-s-0 z-10 flex items-center pointer-events-none text-body-subtle\"\n            [class]=\"leftIconPadClass()\"\n          >\n            <ng-content select=\"[leftIcon]\" />\n          </div>\n        }\n\n        <!--\n      \u00D4 \u0110I\u1EC0U KHI\u1EC2N \u2014 gi\u1EEF NGUY\u00CAN b\u1EA3ng class c\u1EE7a b\u1EA3n `<select>` c\u0169 \u0111\u1EC3 giao di\u1EC7n\n      Figma kh\u00F4ng \u0111\u1ED5i m\u1ED9t pixel: c\u00F9ng vi\u1EC1n, n\u1EC1n, bo g\u00F3c, thang c\u1EE1 (h-9/h-10/h-12)\n      v\u00E0 c\u00F9ng b\u1EA3ng m\u00E0u theo `state`.\n\n      `dark:focus:ring-brand-950` GI\u1EEE b\u1EADc s\u1ED1: `brand` l\u00E0 b\u1EA3ng Figma C\u00D3 n\u00EAn b\u1EADc\n      s\u1ED1 h\u1EE3p l\u1EC7, c\u00F2n `ring-brand-softer` (token duy nh\u1EA5t tr\u1ECF brand-950 \u1EDF ch\u1EBF \u0111\u1ED9\n      t\u1ED1i) ch\u01B0a n\u01A1i n\u00E0o d\u00F9ng n\u00EAn Tailwind kh\u00F4ng sinh CSS \u2014 thay v\u00E0o l\u00E0 class\n      CH\u1EBET m\u00E0 build v\u1EABn xanh (\u0111o 2026-09-15).\n\n      Kh\u00E1c b\u1EA3n c\u0169 \u1EDF ch\u1ED7 \u0111\u00E2y l\u00E0 `<div role=\"combobox\">` ch\u1EE9 kh\u00F4ng ph\u1EA3i `<select>`\n      g\u1ED1c: th\u1EBB g\u1ED1c kh\u00F4ng cho t\u00ECm ki\u1EBFm, \u0111a ch\u1ECDn hay t\u1EF1 v\u1EBD t\u1EEBng d\u00F2ng.\n    -->\n        <div\n          [id]=\"inputId()\"\n          role=\"combobox\"\n          tabindex=\"0\"\n          [attr.aria-labelledby]=\"label() ? labelId() : triggerLabel() ? triggerLabelId() : null\"\n          [attr.aria-label]=\"label() || triggerLabel() ? null : ariaLabel() || null\"\n          [attr.aria-expanded]=\"isOpen()\"\n          [attr.aria-controls]=\"listboxId()\"\n          [attr.aria-activedescendant]=\"activeOptionId()\"\n          [attr.aria-invalid]=\"ariaInvalid()\"\n          [attr.aria-describedby]=\"describedBy()\"\n          [attr.aria-required]=\"required() ? 'true' : null\"\n          [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n          aria-haspopup=\"listbox\"\n          (click)=\"toggle()\"\n          (keydown)=\"onKeyDown($event)\"\n          class=\"ol-field-box relative flex w-full items-center gap-1.5 border shadow-xs outline-none font-normal\"\n          [class.border-default-medium]=\"state() === 'default' || disabled()\"\n          [class.rounded-base]=\"true\"\n          [class]=\"paddingStartClass()\"\n          [class.flex-wrap]=\"multiple()\"\n          [class.content-center]=\"multiple()\"\n          [class.min-h-9]=\"resolvedSize() === 'sm'\"\n          [class.min-h-10]=\"resolvedSize() === 'base'\"\n          [class.min-h-12]=\"resolvedSize() === 'lg'\"\n          [class.min-h-13]=\"resolvedSize() === 'xl'\"\n          [class.text-sm]=\"resolvedSize() === 'sm' || resolvedSize() === 'base'\"\n          [class.text-base]=\"resolvedSize() === 'lg' || resolvedSize() === 'xl'\"\n          [class.cursor-pointer]=\"!disabled() && !readonly()\"\n          [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled()\"\n          [class.text-heading]=\"state() === 'default' && !disabled()\"\n          [class.focus:border-brand]=\"state() === 'default' && !disabled()\"\n          [class.focus:ring-2]=\"!disabled()\"\n          [class.focus:ring-brand-subtle]=\"state() === 'default' && !disabled()\"\n          [class.dark:focus:ring-brand-950]=\"state() === 'default' && !disabled()\"\n          [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n          [class.border-danger]=\"state() === 'error' && !disabled()\"\n          [class.text-fg-danger-strong]=\"state() === 'error' && !disabled()\"\n          [class.focus:border-danger]=\"state() === 'error' && !disabled()\"\n          [class.focus:ring-danger-medium]=\"state() === 'error' && !disabled()\"\n          [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n          [class.border-success]=\"state() === 'success' && !disabled()\"\n          [class.text-fg-success-strong]=\"state() === 'success' && !disabled()\"\n          [class.focus:border-success]=\"state() === 'success' && !disabled()\"\n          [class.focus:ring-success-medium]=\"state() === 'success' && !disabled()\"\n          [class.bg-disabled]=\"disabled()\"\n          [class.text-fg-disabled]=\"disabled()\"\n          [class.cursor-not-allowed]=\"disabled()\"\n        >\n          <!-- Th\u1EBB c\u1EE7a c\u00E1c gi\u00E1 tr\u1ECB \u0111\u00E3 ch\u1ECDn (\u0111a ch\u1ECDn) -->\n          @if (multiple()) {\n            @for (val of selectedValues(); track val) {\n              <!-- `h-6` c\u1ED1 \u0111\u1ECBnh: \u0111\u1EC3 th\u1EBB co theo ch\u1EEF th\u00EC m\u1ED7i th\u1EBB cao m\u1ED9t ki\u1EC3u v\u00E0 \u00F4\n               b\u1ECB \u0111\u1EA9y theo th\u1EBB cao nh\u1EA5t. C\u00F9ng c\u00E1ch \u0111\u00E3 ch\u1ED1t \u1EDF `ol-autocomplete`. -->\n              <!-- Chip kho\u00E1 d\u00F9ng b\u1EA3ng m\u00E0u TRUNG T\u00CDNH: m\u1EA5t n\u00FAt \u00D7 l\u00E0 d\u1EA5u hi\u1EC7u qu\u00E1\n               nh\u1EB9, ng\u01B0\u1EDDi d\u00F9ng t\u01B0\u1EDFng n\u00FAt ch\u01B0a hi\u1EC7n. \u0110\u1ED5i m\u00E0u cho th\u1EA5y ngay \u0111\u00E2y\n               l\u00E0 lo\u1EA1i chip kh\u00E1c. -->\n              <span\n                class=\"inline-flex h-6 shrink-0 items-center gap-1 rounded-md border px-2 text-xs font-medium\"\n                [class.border-brand-subtle]=\"!isLocked(val)\"\n                [class.bg-brand-softer]=\"!isLocked(val)\"\n                [class.text-fg-brand-strong]=\"!isLocked(val)\"\n                [class.border-default]=\"isLocked(val)\"\n                [class.bg-neutral-tertiary]=\"isLocked(val)\"\n                [class.text-body]=\"isLocked(val)\"\n              >\n                @if (isLocked(val)) {\n                  <ol-icon name=\"lucide:lock\" size=\"xs\" class=\"shrink-0 opacity-70\" />\n                } @else if (optionOf(val)?.icon) {\n                  <ol-icon [name]=\"$any(optionOf(val)).icon\" size=\"xs\" class=\"shrink-0\" />\n                } @else if (optionOf(val)?.prefix) {\n                  <span class=\"shrink-0 text-2xs font-semibold tabular-nums\">{{\n                    optionOf(val)?.prefix\n                  }}</span>\n                }\n                <span>{{ getDisplayLabel(val) }}</span>\n                @if (!disabled() && !readonly() && !isLocked(val)) {\n                  <button\n                    type=\"button\"\n                    (click)=\"removeValue(val, $event)\"\n                    [attr.aria-label]=\"'G\u1EE1 ' + getDisplayLabel(val)\"\n                    class=\"inline-flex size-4 shrink-0 items-center justify-center rounded-full text-fg-brand hover:text-fg-brand-strong focus:outline-hidden\"\n                  >\n                    <ol-icon name=\"close\" size=\"xs\" />\n                  </button>\n                }\n              </span>\n            }\n          }\n\n          <!--\n        PH\u1EA6N C\u1ED0 \u0110\u1ECANH c\u1EE7a \u00F4 \u0111\u00F3ng \u2014 icon v\u00E0 nh\u00E3n LU\u00D4N hi\u1EC7n, d\u00F9 \u0111\u00E3 ch\u1ECDn hay ch\u01B0a,\n        d\u00F9 danh s\u00E1ch \u0111ang m\u1EDF hay \u0111\u00F3ng. Ch\u1EC9 ph\u1EA7n GI\u00C1 TR\u1ECA b\u00EAn ph\u1EA3i m\u1EDBi \u0111\u1ED5i.\n\n        \u0110\u1EB7t NGO\u00C0I c\u1EA3 ba nh\u00E1nh d\u01B0\u1EDBi (\u00F4 t\u00ECm / nh\u00E3n \u0111\u00E3 ch\u1ECDn / placeholder) ch\u00EDnh\n        l\u00E0 \u0111i\u1EC1u l\u00E0m n\u00F3 c\u1ED1 \u0111\u1ECBnh \u2014 n\u1EB1m trong nh\u00E1nh n\u00E0o th\u00EC n\u00F3 bi\u1EBFn m\u1EA5t \u1EDF hai\n        nh\u00E1nh kia.\n\n        Kh\u00E1c `icon` c\u1EE7a M\u1EE4C: c\u00E1i \u0111\u00F3 \u0111\u1ED5i theo m\u1EE5c \u0111ang ch\u1ECDn. Khai c\u1EA3 hai th\u00EC\n        `triggerIcon` th\u1EAFng, v\u00EC nh\u00E3n c\u1ED1 \u0111\u1ECBnh m\u00E0 nh\u1EA3y theo m\u1EE5c th\u00EC h\u1EBFt c\u1ED1 \u0111\u1ECBnh.\n      -->\n          @if (triggerIcon()) {\n            <ol-icon [name]=\"triggerIcon()\" size=\"sm\" class=\"shrink-0 me-0.5 text-body-subtle\" />\n          }\n          @if (triggerLabel()) {\n            <span [id]=\"triggerLabelId()\" class=\"shrink-0 text-sm font-medium text-body\">{{\n              triggerLabel()\n            }}</span>\n          }\n\n          <!--\n        \u00D4 G\u00D5 T\u00CCM ch\u1EC9 hi\u1EC7n khi danh s\u00E1ch \u0110ANG M\u1EDE. \u0110\u00F3ng l\u1EA1i th\u00EC hi\u1EC7n nh\u00E3n t\u0129nh \u2014\n        n\u1EBFu \u0111\u1EC3 \u00F4 nh\u1EADp lu\u00F4n \u0111\u00F3, ng\u01B0\u1EDDi d\u00F9ng t\u01B0\u1EDFng g\u00F5 th\u1EB3ng v\u00E0o \u0111\u01B0\u1EE3c, m\u00E0 gi\u00E1 tr\u1ECB\n        l\u1EA1i kh\u00F4ng \u0111\u1ED5i theo ch\u1EEF h\u1ECD g\u00F5.\n      -->\n          @if (searchable() && isOpen() && searchPosition() === 'inline') {\n            <input\n              #inlineSearch\n              type=\"text\"\n              [attr.aria-controls]=\"listboxId()\"\n              [attr.aria-activedescendant]=\"activeOptionId()\"\n              [ngModel]=\"searchQuery()\"\n              (ngModelChange)=\"onSearchInput($event)\"\n              (click)=\"$event.stopPropagation()\"\n              [placeholder]=\"searchPlaceholder()\"\n              [attr.aria-label]=\"searchPlaceholder()\"\n              autocomplete=\"off\"\n              class=\"min-w-0 flex-1 border-none bg-transparent p-0 text-inherit outline-none placeholder:text-body-subtle\"\n            />\n          } @else if (!multiple() && hasValue()) {\n            @if (labelTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"labelTemplate; context: { $implicit: selectedValues()[0] }\"\n              />\n            } @else {\n              <!-- \u00D4 \u0111\u00F3ng hi\u1EC7n C\u1EA2 ph\u1EA7n \u0111\u1EA7u c\u1EE7a m\u1EE5c \u0111ang ch\u1ECDn, kh\u00F4ng ch\u1EC9 ch\u1EEF \u2014 \u0111\u00E2y\n               l\u00E0 \u0111i\u1EC3m kh\u00E1c c\u1EE7a combobox reui so v\u1EDBi \u00F4 ch\u1ECDn th\u01B0\u1EDDng. -->\n              @if (selectedItem()?.icon && !triggerIcon()) {\n                <ol-icon\n                  [name]=\"$any(selectedItem()).icon\"\n                  size=\"sm\"\n                  class=\"shrink-0 me-0.5\"\n                  [class]=\"selectedItem()?.prefixClass || ''\"\n                />\n              } @else if (selectedItem()?.prefix && !triggerIcon()) {\n                <span\n                  class=\"shrink-0 text-2xs font-semibold tabular-nums\"\n                  [class]=\"selectedItem()?.prefixClass || 'text-body-subtle'\"\n                  >{{ selectedItem()?.prefix }}</span\n                >\n              }\n              <span class=\"truncate\">{{ singleLabel() }}</span>\n            }\n          } @else if (!hasValue()) {\n            <!--\n          \u1EDE tr\u1EA1ng th\u00E1i L\u1ED6I, n\u1EC1n \u0111\u1ED5i sang `bg-danger-soft` (#fef0f2) v\u00E0\n          `text-body-subtle` ch\u1EC9 c\u00F2n **4,36** \u2014 d\u01B0\u1EDBi chu\u1EA9n 4,5. N\u1EC1n `success`\n          (#ecfdf5) cho 4,59, v\u1EEBa \u0111\u1EE7, n\u00EAn ch\u1EC9 nh\u00E1nh l\u1ED7i c\u1EA7n \u0111\u1EADm h\u01A1n.\n          `text-body` tr\u00EAn n\u1EC1n \u0111\u00F3 ra 6,82 (s\u00E1ng) v\u00E0 10,66 (t\u1ED1i).\n        -->\n            <span\n              class=\"truncate\"\n              data-ol-field-text\n              data-ol-field-placeholder\n              [class.text-body-subtle]=\"state() !== 'error'\"\n              [class.text-body]=\"state() === 'error'\"\n              >{{ placeholder() }}</span\n            >\n          }\n\n          <!--\n        M\u1ED8T \u00F4 \u0111i\u1EC1u khi\u1EC3n, \u0110\u1ED4I VAI theo tr\u1EA1ng th\u00E1i \u2014 kh\u00F4ng x\u1EBFp c\u1EA1nh nhau.\n        B\u1EA3n \u0111\u1EA7u c\u1EE7a t\u00F4i \u0111\u1EC3 n\u00FAt xo\u00E1 v\u00E0 `chevron-down` C\u00D9NG hi\u1EC7n: \u0111o 2026-09-17\n        tr\u00EAn `/forms` \u0111\u1EBFm **2 icon b\u00EAn ph\u1EA3i \u1EDF M\u1ECCI tr\u1EA1ng th\u00E1i**, k\u1EC3 c\u1EA3 khi danh\n        s\u00E1ch \u0111ang m\u1EDF. C\u1EE5m b\u00EAn ph\u1EA3i ch\u1EADt, hai icon 16px chen nhau tr\u00F4ng r\u1ED1i.\n\n        `ol-autocomplete` \u0111\u00E3 ch\u1ED1t l\u1ED1i n\u00E0y t\u1EEB tr\u01B0\u1EDBc (\u00F4 `w-7` \u0111\u1ED5i vai\n        spinner / xo\u00E1 / chevron); `ol-select` ph\u1EA3i theo cho nh\u1EA5t qu\u00E1n.\n\n        C\u1EE5m n\u00E0y `absolute` n\u00EAn BUNG KH\u1ECEI LU\u1ED2NG: l\u1EC1 ph\u1EA3i l\u1EA5y theo c\u1EE1\n        (`controlPadClass`), c\u00F2n khung ch\u1EEBa ch\u1ED7 b\u1EB1ng `FIELD_ICON_RESERVE_END`\n        \u0111\u1EC3 ch\u1EEF d\u00E0i d\u1EEBng c\u00E1ch icon \u0111\u00FAng 8px. N\u00FAt xo\u00E1 b\u1ECDc `size-4` b\u1EB1ng icon, \u0111o\n        theo m\u00E9p SVG \u2014 th\u1EE9 m\u1EAFt ng\u01B0\u1EDDi nh\u00ECn th\u1EA5y.\n      -->\n          <div\n            class=\"absolute inset-y-0 inset-e-0 flex items-center justify-end\"\n            [class]=\"controlPadClass()\"\n          >\n            @if (loading()) {\n              <ol-spinner size=\"xs\" color=\"brand\" />\n            } @else if (clearable() && hasContent() && !disabled() && !readonly()) {\n              <button\n                type=\"button\"\n                (click)=\"clear($event)\"\n                aria-label=\"Xo\u00E1 l\u1EF1a ch\u1ECDn\"\n                class=\"inline-flex size-4 shrink-0 items-center justify-center rounded-full text-body-subtle transition-colors hover:text-heading\"\n              >\n                <ol-icon name=\"close\" size=\"sm\" />\n              </button>\n            } @else {\n              <ol-icon\n                name=\"chevron-down\"\n                size=\"sm\"\n                class=\"pointer-events-none shrink-0 text-body-subtle transition-transform\"\n                [class.rotate-180]=\"isOpen()\"\n              />\n            }\n          </div>\n        </div>\n      </div>\n    </ol-field-frame>\n\n    <!--\n      DANH S\u00C1CH. Token \u0111\u1ECDc th\u1EB3ng t\u1EEB Figma `ol-autocomplete-menu` (#1149:53147),\n      bi\u1EBFn th\u1EC3 `Type=Default` \u2014 \u0111\u00F3 l\u00E0 dropdown chu\u1EA9n c\u1EE7a design system:\n\n        bo g\u00F3c  12px            -> rounded-md\n        \u0111\u1EC7m      8px            -> p-2         (tr\u01B0\u1EDBc l\u00E0 p-1.5 = 6px)\n        n\u1EC1n     bg-neutral-primary-medium      (tr\u01B0\u1EDBc l\u00E0 bg-neutral-primary)\n        vi\u1EC1n    border-default-medium          (tr\u01B0\u1EDBc l\u00E0 border-default)\n\n      Hai token n\u1EC1n/vi\u1EC1n TR\u00D9NG NHAU \u1EDF ch\u1EBF \u0111\u1ED9 s\u00E1ng (#ffffff / #e5e7eb) n\u00EAn \u0111\u1ED5i\n      hay kh\u00F4ng nh\u00ECn c\u0169ng th\u1EBF \u2014 nh\u01B0ng CH\u1EBE \u0110\u1ED8 T\u1ED0I th\u00EC kh\u00E1c h\u1EB3n:\n\n        bg-primary        gray-950  \u2190 \u0111ang d\u00F9ng, g\u1EA7n \u0111en, panel CH\u00CCM v\u00E0o n\u1EC1n\n        bg-primary-medium gray-800  \u2190 Figma, panel n\u1ED5i l\u00EAn\n        border-default        gray-800\n        border-default-medium gray-700\n\n      \u0110\u00E2y \u0111\u00FAng lo\u1EA1i l\u1ED7i ch\u1EC9 l\u1ED9 \u1EDF ch\u1EBF \u0111\u1ED9 t\u1ED1i m\u00E0 ch\u1EBF \u0111\u1ED9 s\u00E1ng kh\u00F4ng bao gi\u1EDD th\u1EA5y.\n    -->\n    @if (isOpen()) {\n      <!--\n        \u00D4 T\u00CCM \u1EDE \u0110\u1EA6U PANEL (`searchPosition=\"panel\"`).\n        \u0110\u1EB7t NGO\u00C0I th\u1EBB `role=\"listbox\"`: m\u1ED9t `<input>` n\u1EB1m trong listbox l\u00E0 sai\n        ARIA \u2014 m\u1ECDi con c\u1EE7a listbox ph\u1EA3i l\u00E0 `option` ho\u1EB7c `group`. \u0110\u00E2y l\u00E0 l\u1ED1i\n        `ol-command` v\u00E0 combobox c\u1EE7a reui d\u00F9ng.\n      -->\n      <!--\n        H\u1ED8P B\u1ECCC mang `#panel` v\u00E0 `position: absolute`.\n\n        `#panel` ph\u1EA3i \u1EDF \u0110\u00C2Y ch\u1EE9 kh\u00F4ng \u1EDF th\u1EBB `role=\"listbox\"`: `appendTo=\"body\"`\n        \u0111\u1EA9y ch\u00EDnh ph\u1EA7n t\u1EED `#panel` ra `<body>`. \u0110\u1EC3 n\u00F3 \u1EDF listbox th\u00EC \u00F4 t\u00ECm \u1EDF l\u1EA1i\n        trong c\u00E2y DOM c\u0169 c\u00F2n danh s\u00E1ch bay \u0111i \u2014 h\u1ED9p tho\u1EA1i v\u1EE1 l\u00E0m \u0111\u00F4i.\n      -->\n      <div\n        #panel\n        class=\"absolute z-dropdown overflow-hidden rounded-md border border-default-medium bg-neutral-primary-medium shadow-lg flex flex-col max-h-[var(--ol-overlay-max-height,24rem)]\"\n        [class.w-full]=\"matchTriggerWidth()\"\n        [class]=\"menuClass()\"\n      >\n        @if (searchable() && searchPosition() === 'panel') {\n          <div class=\"border-b border-default-subtle p-2\">\n            <!-- Icon/ch\u1EEF \u0111\u1EE9ng \u0111\u1EA7u \u00F4 T\u00CCM \u2014 c\u1EE7a vi\u1EC7c T\u00CCM, kh\u00F4ng ph\u1EA3i c\u1EE7a m\u1EE5c\n                 \u0111ang ch\u1ECDn. B\u1ECDc trong khung c\u00F3 vi\u1EC1n \u0111\u1EC3 icon n\u1EB1m TRONG \u00F4, kh\u00F4ng\n                 \u0111\u1EE9ng r\u1EDDi b\u00EAn ngo\u00E0i nh\u01B0 m\u1ED9t nh\u00E3n. -->\n            <div\n              class=\"flex items-center gap-2 rounded border border-default bg-neutral-primary px-2.5 py-1.5 focus-within:border-brand\"\n            >\n              @if (searchIcon()) {\n                <ol-icon [name]=\"searchIcon()\" size=\"sm\" class=\"shrink-0 text-body-subtle\" />\n              } @else if (searchPrefix()) {\n                <span class=\"shrink-0 text-xs font-medium text-body-subtle\">{{\n                  searchPrefix()\n                }}</span>\n              }\n              <input\n                #oTimPanel\n                type=\"text\"\n                [ngModel]=\"searchQuery()\"\n                (ngModelChange)=\"onSearchInput($event)\"\n                (click)=\"$event.stopPropagation()\"\n                (keydown)=\"onKeyDown($event)\"\n                [placeholder]=\"searchPlaceholder()\"\n                [attr.aria-label]=\"searchPlaceholder()\"\n                [attr.aria-controls]=\"listboxId()\"\n                autocomplete=\"off\"\n                class=\"w-full min-w-0 border-none bg-transparent p-0 text-sm outline-none placeholder:text-body-subtle\"\n              />\n            </div>\n          </div>\n        }\n        <!--\n          `overflow-x-hidden` KHAI R\u00D5: khai `overflow-y-auto` m\u1ED9t m\u00ECnh th\u00EC tr\u00ECnh\n          duy\u1EC7t t\u1EF1 t\u00EDnh `overflow-x` th\u00E0nh `auto` (spec CSS: m\u1ED9t tr\u1EE5c `visible`\n          c\u00F2n tr\u1EE5c kia kh\u00E1c `visible` l\u00E0 kh\u00F4ng h\u1EE3p l\u1EC7). \u0110o \u0111\u01B0\u1EE3c `scrollWidth\n          765 > 620` khi option c\u00F3 `white-space: nowrap`.\n\n          Ch\u1EC9 ch\u1EB7n \u1EDF PANEL CH\u1ECCN c\u00F3 b\u1EC1 r\u1ED9ng c\u1ED1 \u0111\u1ECBnh \u2014 n\u1ED9i dung ph\u1EA3i v\u1EEBa b\u1EC1 ngang.\n          KH\u00D4NG ch\u1EB7n \u1EDF khung ch\u1EE9a n\u1ED9i dung t\u1EF1 do (`device-mockup`,\n          `chat-container`, `drawer`): \u1EDF \u0111\u00F3 ng\u01B0\u1EDDi d\u00F9ng chi\u1EBFu n\u1ED9i dung b\u1EA5t k\u1EF3\n          v\u00E0o, ch\u1EB7n l\u00E0 c\u1EAFt m\u1EA5t ph\u1EA7n r\u1ED9ng c\u1EE7a h\u1ECD.\n        -->\n        <div\n          #listboxRef\n          role=\"listbox\"\n          [id]=\"listboxId()\"\n          [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n          (scroll)=\"onPanelScroll($event)\"\n          class=\"flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-2\"\n        >\n          <!--\n            B\u1ED1n tr\u1EA1ng th\u00E1i c\u1EE7a danh s\u00E1ch l\u1EA5y t\u1EEB m\u00E1y ch\u1EE7 (Figma `ol-dropdown`\n            5266:29107): \u0110ang t\u1EA3i \u00B7 Ch\u01B0a g\u00F5 \u0111\u1EE7 \u00B7 R\u1ED7ng/Kh\u00F4ng c\u00F3 k\u1EBFt qu\u1EA3 \u00B7 c\u00F3 m\u1EE5c.\n            \u0110ang t\u1EA3i \u0111\u1EE9ng TR\u01AF\u1EDAC r\u1ED7ng: b\u1EA3n c\u0169 b\u00E1o \"kh\u00F4ng t\u00ECm th\u1EA5y\" trong l\u00FAc\n            c\u00E2u tr\u1EA3 l\u1EDDi c\u00F2n ch\u01B0a v\u1EC1 \u2014 sai s\u1EF1 th\u1EADt.\n          -->\n          @if (loading()) {\n            <ol-dropdown-state type=\"loading\" />\n          } @else if (waitingForTerm()) {\n            <!-- Ch\u01B0a g\u00F5 \u0111\u1EE7 `minTermLength`: \"kh\u00F4ng t\u00ECm th\u1EA5y\" l\u00E0 sai s\u1EF1 th\u1EADt, v\u00EC\n               ch\u01B0a t\u00ECm g\u00EC c\u1EA3. C\u00F9ng l\u1ED1i `typeToSearchText` c\u1EE7a ng-select. -->\n            <div class=\"p-3 text-center text-sm text-body-subtle\">{{ typeToSearchText() }}</div>\n          } @else if (rows().length === 0) {\n            <div class=\"text-center\">\n              <ol-dropdown-state\n                [type]=\"searchQuery().trim() ? 'no-results' : 'empty'\"\n                [query]=\"searchQuery().trim()\"\n                [heading]=\"emptyText()\"\n              />\n              @if (canCreate()) {\n                <button\n                  type=\"button\"\n                  (click)=\"createOption()\"\n                  class=\"-mt-2 mb-4 inline-flex items-center gap-1.5 rounded-lg bg-brand-softer px-3 py-1.5 text-xs font-medium text-fg-brand transition-colors hover:bg-brand-subtle\"\n                >\n                  <ol-icon name=\"plus\" size=\"xs\" />\n                  <span>{{ createLabel() }}</span>\n                </button>\n              }\n            </div>\n          } @else {\n            <!-- \u0110\u1EC7m tr\u00EAn: gi\u1EEF thanh cu\u1ED9n d\u00E0i \u0111\u00FAng nh\u01B0 khi v\u1EBD h\u1EBFt danh s\u00E1ch. -->\n            @if (viewport().padTop > 0) {\n              <div [style.height.px]=\"viewport().padTop\" aria-hidden=\"true\"></div>\n            }\n\n            @for (row of viewport().rows; track row.kind + '-' + row.index + '-' + row.label) {\n              @if (row.kind === 'group') {\n                <!-- `dauTien` t\u00EDnh khi d\u1EF1ng danh s\u00E1ch, KH\u00D4NG d\u00F9ng `$first` c\u1EE7a\n                   `@for`: khi `virtualScroll` b\u1EADt, `$first` l\u00E0 d\u00F2ng \u0111\u1EA7u c\u1EE7a\n                   khung nh\u00ECn n\u00EAn cu\u1ED9n xu\u1ED1ng l\u00E0 m\u1EA5t \u0111\u01B0\u1EDDng ng\u0103n. -->\n                @if (groupSeparator() && !row.isFirstGroup) {\n                  <div role=\"presentation\" class=\"my-1 border-t border-default-subtle\"></div>\n                }\n                <div\n                  role=\"presentation\"\n                  class=\"px-2.5 pt-2 pb-0 text-2xs font-semibold uppercase tracking-wide text-body-subtle\"\n                >\n                  {{ row.label }}\n                </div>\n              } @else {\n                <!--\n                `rounded-sm` (6px) ch\u1EE9 kh\u00F4ng `rounded-md` (12px): Figma v\u1EBD\n                `ol-autocomplete-item` bo **8px**, m\u00E0 thang token c\u1EE7a lib kh\u00F4ng\n                c\u00F3 b\u1EADc 8 (xs 4 \u00B7 sm 6 \u00B7 md/base 12 \u00B7 lg 16). L\u1EA5y b\u1EADc G\u1EA6N NH\u1EA4T\n                thay v\u00EC vi\u1EBFt `rounded-[8px]` \u2014 gi\u00E1 tr\u1ECB th\u00F4 n\u1EB1m ngo\u00E0i h\u1EC7 token\n                th\u00EC \u0111\u1ED5i theme kh\u00F4ng theo \u0111\u01B0\u1EE3c.\n\n                `ol-dropdown-item` c\u0169ng \u0111\u00E3 ch\u1ED1t `rounded-sm` cho m\u1EE5c menu, n\u00EAn\n                \u0111\u00E2y c\u00F2n l\u00E0 gi\u1EEF nh\u1EA5t qu\u00E1n trong lib.\n              -->\n                <!--\n                  `min-w-0` cho ph\u00E9p h\u00E0ng CO l\u1EA1i, \u0111i\u1EC1u ki\u1EC7n c\u1EA7n \u0111\u1EC3 `truncate`\n                  c\u1EE7a ng\u01B0\u1EDDi d\u00F9ng ch\u1EA1y. Nh\u01B0ng n\u00F3 KH\u00D4NG t\u1EF1 ch\u1EB7n tr\u00E0n: \u0111o b\u1EB1ng c\u00E1ch\n                  ti\u00EAm `white-space: nowrap` v\u00E0o h\u00E0ng \u2014 panel v\u1EABn `scrollWidth\n                  1763 > 831`. Ch\u1EC9 `overflow: hidden` \u0111\u1EB7t tr\u00EAn CH\u00CDNH ph\u1EA7n t\u1EED n\u1ED9i\n                  dung m\u1EDBi ch\u1EB7n \u0111\u01B0\u1EE3c, m\u00E0 ph\u1EA7n t\u1EED \u0111\u00F3 do ng\u01B0\u1EDDi d\u00F9ng chi\u1EBFu v\u00E0o qua\n                  `optionTemplate` n\u00EAn lib kh\u00F4ng v\u1EDBi t\u1EDBi. `overflow-x-hidden` \u1EDF\n                  panel l\u00E0 l\u1EDBp ch\u1EB7n cu\u1ED1i.\n                -->\n                <div\n                  role=\"option\"\n                  [id]=\"optionId(row.index)\"\n                  [attr.data-option-index]=\"row.index\"\n                  [attr.aria-selected]=\"isSelected(row.item)\"\n                  [attr.aria-disabled]=\"row.item?.disabled ? 'true' : null\"\n                  (click)=\"selectItem(row.item); $event.stopPropagation()\"\n                  [style.height.px]=\"virtualScroll() ? itemHeight() : null\"\n                  class=\"flex min-w-0 items-center gap-2 rounded-sm px-3 py-2 text-sm transition-colors\"\n                  [class.cursor-pointer]=\"!row.item?.disabled\"\n                  [class.cursor-not-allowed]=\"row.item?.disabled\"\n                  [class.bg-neutral-tertiary-medium]=\"\n                    activeIndex() === row.index && !row.item?.disabled\n                  \"\n                  [class.hover:bg-neutral-tertiary-medium]=\"\n                    !row.item?.disabled && activeIndex() !== row.index\n                  \"\n                  [class.text-heading]=\"isSelected(row.item) || activeIndex() === row.index\"\n                  [class.hover:text-heading]=\"!row.item?.disabled\"\n                  [class.font-medium]=\"isSelected(row.item)\"\n                  [class.text-body]=\"!isSelected(row.item) && activeIndex() !== row.index\"\n                  [class.text-fg-disabled]=\"row.item?.disabled\"\n                >\n                  @if (optionTemplate) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTemplate; context: { $implicit: row.item }\"\n                    />\n                  } @else {\n                    <!-- Ph\u1EA7n \u0111\u1EA7u: `icon` \u01B0u ti\u00EAn, kh\u00F4ng c\u00F3 th\u00EC `prefix` (ch\u1EEF).\n                       `prefixClass` nh\u1EADn CLASS ch\u1EE9 kh\u00F4ng nh\u1EADn m\u00E3 m\u00E0u \u2014 m\u00E3 m\u00E0u\n                       c\u1EE9ng kh\u00F4ng \u0111\u1ED5i theo theme v\u00E0 theo ch\u1EBF \u0111\u1ED9 t\u1ED1i. -->\n                    @if (row.item?.icon) {\n                      <ol-icon\n                        [name]=\"row.item.icon\"\n                        size=\"sm\"\n                        class=\"shrink-0\"\n                        [class]=\"row.item.prefixClass || ''\"\n                      />\n                    } @else if (row.item?.prefix) {\n                      <span\n                        class=\"shrink-0 text-2xs font-semibold tabular-nums\"\n                        [class]=\"row.item.prefixClass || 'text-body-subtle'\"\n                        >{{ row.item.prefix }}</span\n                      >\n                    }\n                    <span class=\"min-w-0 flex-1 truncate\">{{ row.label }}</span>\n                  }\n                  @if (isSelected(row.item)) {\n                    <ol-icon name=\"check\" size=\"sm\" class=\"shrink-0 text-fg-brand\" />\n                  }\n                </div>\n              }\n            }\n\n            <!-- \u0110\u1EC7m d\u01B0\u1EDBi \u2014 xem l\u00FD do \u1EDF \u0111\u1EC7m tr\u00EAn. -->\n            @if (viewport().padBottom > 0) {\n              <div [style.height.px]=\"viewport().padBottom\" aria-hidden=\"true\"></div>\n            }\n\n            <!-- Danh s\u00E1ch C\u00D2N m\u1EE5c nh\u01B0ng ch\u1EEF \u0111ang g\u00F5 ch\u01B0a tr\u00F9ng nh\u00E3n n\u00E0o: v\u1EABn ph\u1EA3i\n               cho t\u1EA1o. V\u00ED d\u1EE5 \u0111\u00E3 c\u00F3 \"To\u00E1n 10\" m\u00E0 ng\u01B0\u1EDDi d\u00F9ng g\u00F5 \"To\u00E1n 11\" \u2014\n               nh\u00E1nh r\u1ED7ng \u1EDF tr\u00EAn kh\u00F4ng ch\u1EA1y v\u00EC b\u1ED9 l\u1ECDc v\u1EABn ra m\u1ED9t m\u1EE5c. -->\n            @if (canCreate()) {\n              <div class=\"mt-1 border-t border-default-subtle p-2\">\n                <button\n                  type=\"button\"\n                  (click)=\"createOption()\"\n                  class=\"inline-flex w-full items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium text-fg-brand transition-colors hover:bg-brand-softer\"\n                >\n                  <ol-icon name=\"plus\" size=\"xs\" class=\"shrink-0\" />\n                  <span class=\"truncate\">{{ createLabel() }}</span>\n                </button>\n              </div>\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (helperText()) {\n    <p\n      class=\"mt-1.5 text-xs\"\n      [class.text-body]=\"state() === 'default'\"\n      [class.text-fg-danger-strong]=\"state() === 'error'\"\n      [class.text-fg-success-strong]=\"state() === 'success'\"\n    >\n      {{ helperText() }}\n    </p>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAsterisk", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], floatingVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingVariant", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], menuClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuClass", required: false }] }], matchTriggerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchTriggerWidth", required: false }] }], maxSelectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedItems", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], hideSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSelected", required: false }] }], allowCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCreate", required: false }] }], createText: [{ type: i0.Input, args: [{ isSignal: true, alias: "createText", required: false }] }], groupSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSeparator", required: false }] }], searchPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPosition", required: false }] }], searchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchIcon", required: false }] }], searchPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPrefix", required: false }] }], triggerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerIcon", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], remoteSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "remoteSearch", required: false }] }], minTermLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTermLength", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], typeToSearchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeToSearchText", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], bufferAmount: [{ type: i0.Input, args: [{ isSignal: true, alias: "bufferAmount", required: false }] }], search: [{ type: i0.Output, args: ["search"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], added: [{ type: i0.Output, args: ["added"] }], removed: [{ type: i0.Output, args: ["removed"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], optionTemplate: [{
                 type: ContentChild,
                 args: ['optionTemplate']
             }], labelTemplate: [{
                 type: ContentChild,
                 args: ['labelTemplate']
-            }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], listboxRef: [{ type: i0.ViewChild, args: ['listboxRef', { isSignal: true }] }], oTimPanel: [{ type: i0.ViewChild, args: ['oTimPanel', { isSignal: true }] }], onDocumentClick: [{
+            }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], listboxRef: [{ type: i0.ViewChild, args: ['listboxRef', { isSignal: true }] }], oTimPanel: [{ type: i0.ViewChild, args: ['oTimPanel', { isSignal: true }] }], inlineSearch: [{ type: i0.ViewChild, args: ['inlineSearch', { isSignal: true }] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
@@ -10578,6 +11538,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
+/**
+ * Mục đang chọn theo màu. Nền `-soft` (mức 50) gần trùng rãnh xám `#f3f4f6`,
+ * nên kèm viền trong cùng tông `ring-*-subtle` mới tách được. Toàn token ngữ
+ * nghĩa có khối `.dark` — không ghim `dark:`.
+ */
+const SELECTED_COLOR = {
+    neutral: 'bg-neutral-primary text-heading shadow-xs',
+    brand: 'bg-brand-soft text-fg-brand-strong shadow-xs ring-1 ring-inset ring-brand-subtle',
+    success: 'bg-success-soft text-fg-success-strong shadow-xs ring-1 ring-inset ring-success-subtle',
+    warning: 'bg-warning-soft text-fg-warning-strong shadow-xs ring-1 ring-inset ring-warning-subtle',
+    danger: 'bg-danger-soft text-fg-danger-strong shadow-xs ring-1 ring-inset ring-danger-subtle',
+};
 /**
  * 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).
@@ -10631,7 +11603,7 @@ class OlSegmented {
         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`;
+            return `${base} font-semibold ${SELECTED_COLOR[option.color ?? 'neutral']}`;
         }
         const blocked = option.disabled || this.disabled();
         return `${base} text-body font-medium ${blocked ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:text-heading'}`;
@@ -11998,122 +12970,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     ], template: "<!-- N\u00FAm k\u00E9o theo Figma `ol-range-thumb` (#1149:54373):\n     n\u1EC1n `bg-neutral-primary-medium`, KH\u00D4NG ph\u1EA3i `bg-neutral-primary` \u2014 `bg-neutral-primary` gi\u1EEF\n     nguy\u00EAn #FFFFFF \u1EDF ch\u1EBF \u0111\u1ED9 t\u1ED1i n\u00EAn n\u00FAm ch\u00F3i tr\u00EAn r\u00E3nh t\u1ED1i, c\u00F2n\n     `--bg-primary-medium` \u0111\u1ED5i sang gray-800. Vi\u1EC1n theo tr\u1EE5c State:\n     Initial `border-default-medium`, Active `border-brand`; code tr\u01B0\u1EDBc \u0111\u00E2y\n     d\u00F9ng border-brand cho c\u1EA3 hai. -->\n<div class=\"w-full\">\n  @if (label() || showValue()) {\n    <div class=\"flex items-center justify-between mb-2 text-sm font-medium\">\n      @if (label()) {\n        <label [for]=\"dualRange() ? minThumbId() : inputId()\" class=\"text-heading\">{{\n          label()\n        }}</label>\n      }\n      @if (showValue()) {\n        <span class=\"text-fg-brand font-semibold ms-auto\">\n          @if (dualRange()) {\n            {{ minValue() }}{{ unit() }} - {{ maxValue() }}{{ unit() }}\n          } @else {\n            {{ value() }}{{ unit() }}\n          }\n        </span>\n      }\n    </div>\n  }\n\n  <!--\n    Range Slider Container.\n\n    Hai l\u00FD do `ol-range` KH\u00D4NG k\u00E9o \u0111\u01B0\u1EE3c tr\u00EAn di \u0111\u1ED9ng, \u0111o 2026-09-17 \u1EDF viewport\n    390\u00D7844 (mobile + touch):\n\n    1. `touch-action: auto` \u2014 m\u1EB7c \u0111\u1ECBnh c\u1EE7a tr\u00ECnh duy\u1EC7t. Ng\u00F3n tay vu\u1ED1t tr\u00EAn thanh\n       tr\u01B0\u1EE3t b\u1ECB Chrome hi\u1EC3u l\u00E0 c\u1EED ch\u1EC9 cu\u1ED9n/pan trang, n\u00F3 thu l\u1EA5y thao t\u00E1c v\u00E0\n       input kh\u00F4ng nh\u1EADn \u0111\u01B0\u1EE3c g\u00EC. `touch-none` tr\u1EA3 quy\u1EC1n x\u1EED l\u00FD v\u1EC1 cho input.\n\n    2. Ch\u00EDnh th\u1EBB `<input type=range>` cao `h-2` (8px) \u2014 d\u01B0\u1EDBi xa m\u1EE9c 24px t\u1ED1i\n       thi\u1EC3u cho ng\u00F3n tay. N\u00E2ng l\u00EAn `h-6` (24px); r\u00E3nh NH\u00CCN TH\u1EA4Y v\u1EABn 8px v\u00EC n\u00F3\n       l\u00E0 `<div>` ri\u00EAng v\u1EBD ph\u00EDa sau, ch\u1EC9 v\u00F9ng CH\u1EA0M r\u1ED9ng ra.\n\n    K\u00E8m `::-moz-range-thumb` song song v\u1EDBi `::-webkit-slider-thumb`: b\u1EA3n c\u0169 ch\u1EC9\n    c\u00F3 webkit n\u00EAn Firefox m\u1EA5t ho\u00E0n to\u00E0n ki\u1EC3u n\u00FAm k\u00E9o.\n  -->\n  <div class=\"relative flex items-center gap-3 w-full my-2\">\n    <!-- Prefix Icon Slot -->\n    <ng-content select=\"[slot=prefix]\" />\n\n    <div class=\"relative flex-1 flex items-center h-6\">\n      <!-- Background Track -->\n      <div class=\"absolute w-full h-2 bg-neutral-tertiary-medium rounded-full\"></div>\n\n      @if (dualRange()) {\n        <!-- Dual Range Active Bar -->\n        <div\n          class=\"absolute h-2 bg-brand rounded-full\"\n          [style.left.%]=\"dualMinPercentage()\"\n          [style.width.%]=\"dualMaxPercentage() - dualMinPercentage()\"\n        ></div>\n\n        <!-- Min Input Thumb -->\n        <input\n          [id]=\"minThumbId()\"\n          [attr.aria-label]=\"minThumbLabel()\"\n          [attr.aria-describedby]=\"describedBy()\"\n          type=\"range\"\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [step]=\"step()\"\n          [ngModel]=\"minValue()\"\n          (ngModelChange)=\"onMinChange($event)\"\n          [disabled]=\"disabled()\"\n          class=\"absolute w-full h-6 touch-none bg-transparent appearance-none disabled:cursor-not-allowed disabled:opacity-50 pointer-events-none cursor-pointer [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-neutral-primary-medium [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-default-medium [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:bg-neutral-primary-medium [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-default-medium [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:cursor-pointer [&:hover::-webkit-slider-thumb]:border-brand [&:focus::-webkit-slider-thumb]:border-brand [&:active::-webkit-slider-thumb]:border-brand [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-110\"\n        />\n\n        <!-- Max Input Thumb -->\n        <input\n          [id]=\"maxThumbId()\"\n          [attr.aria-label]=\"maxThumbLabel()\"\n          [attr.aria-describedby]=\"describedBy()\"\n          type=\"range\"\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [step]=\"step()\"\n          [ngModel]=\"maxValue()\"\n          (ngModelChange)=\"onMaxChange($event)\"\n          [disabled]=\"disabled()\"\n          class=\"absolute w-full h-6 touch-none bg-transparent appearance-none disabled:cursor-not-allowed disabled:opacity-50 pointer-events-none cursor-pointer [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-neutral-primary-medium [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-default-medium [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:bg-neutral-primary-medium [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-default-medium [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:cursor-pointer [&:hover::-webkit-slider-thumb]:border-brand [&:focus::-webkit-slider-thumb]:border-brand [&:active::-webkit-slider-thumb]:border-brand [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-110\"\n        />\n      } @else {\n        <!-- Single Active Fill Bar -->\n        <div class=\"absolute h-2 bg-brand rounded-full\" [style.width.%]=\"singlePercentage()\"></div>\n\n        <!-- Single Input Thumb -->\n        <input\n          [id]=\"inputId()\"\n          [attr.aria-invalid]=\"ariaInvalid()\"\n          [attr.aria-describedby]=\"describedBy()\"\n          type=\"range\"\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [step]=\"step()\"\n          [ngModel]=\"value()\"\n          (ngModelChange)=\"onSingleChange($event)\"\n          [disabled]=\"disabled()\"\n          class=\"absolute w-full h-6 touch-none bg-transparent appearance-none disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-neutral-primary-medium [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-default-medium [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:bg-neutral-primary-medium [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-default-medium [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:cursor-pointer [&:hover::-webkit-slider-thumb]:border-brand [&:focus::-webkit-slider-thumb]:border-brand [&:active::-webkit-slider-thumb]:border-brand [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-110\"\n        />\n\n        @if (showTooltip()) {\n          <!-- Floating Value Tooltip -->\n          <div\n            class=\"absolute -top-7 transform -translate-x-1/2 px-2 py-0.5 bg-dark text-white text-xs font-semibold rounded-md shadow-md pointer-events-none transition-all\"\n            [style.left.%]=\"singlePercentage()\"\n          >\n            {{ value() }}{{ unit() }}\n            <div\n              class=\"absolute left-1/2 -bottom-1 transform -translate-x-1/2 border-4 border-transparent border-t-gray-900\"\n            ></div>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Suffix Icon Slot -->\n    <ng-content select=\"[slot=suffix]\" />\n  </div>\n\n  @if (showMinMaxLabels()) {\n    <div class=\"flex items-center justify-between text-xs text-body-subtle font-medium mt-1\">\n      <span>{{ min() }}{{ unit() }}</span>\n      <span>{{ max() }}{{ unit() }}</span>\n    </div>\n  }\n\n  @if (helperText()) {\n    <!-- [id] B\u1EAET BU\u1ED8C: `aria-describedby` c\u1EE7a \u00F4 nh\u1EADp tr\u1ECF v\u00E0o `helperId()`,\n         thi\u1EBFu id th\u00EC n\u00F3 tr\u1ECF v\u00E0o h\u01B0 kh\u00F4ng v\u00E0 ph\u1EA7n m\u00F4 t\u1EA3 kh\u00F4ng bao gi\u1EDD \u0111\u01B0\u1EE3c\n         \u0111\u1ECDc. `ol-input` \u0111\u00E3 g\u1EAFn t\u1EEB \u0111\u1EA7u, `ol-range` qu\u00EAn. -->\n    <p [id]=\"helperId()\" class=\"mt-1 text-xs text-body-subtle\">{{ helperText() }}</p>\n  }\n</div>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }, { type: i0.Output, args: ["minValueChange"] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }, { type: i0.Output, args: ["maxValueChange"] }], dualRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "dualRange", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }], showMinMaxLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMinMaxLabels", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
-let uniqueFloatingId = 0;
-class OlFloatingLabel {
-    value = model('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    label = input('Nhãn nổi', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    type = input('text', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    variant = input('outlined', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    size = input('base', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    state = input('default', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-    /**
-     * Khai bằng `model()` thay vì `input()` để Reactive Forms khoá được component:
-     * `setDisabledState()` cần `set()` giá trị, mà `input()` chỉ đọc. Cách dùng từ
-     * ngoài không đổi — `[disabled]="true"` và `disabled()` trong template vẫn như cũ.
-     */
-    disabled = model(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    readonly = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    helperText = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
-    errorText = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
-    id = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    autocomplete = input('off', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
-    labelBg = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "labelBg" }] : /* istanbul ignore next */ []));
-    // Icon inputs
-    prefixIcon = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "prefixIcon" }] : /* istanbul ignore next */ []));
-    suffixIcon = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "suffixIcon" }] : /* istanbul ignore next */ []));
-    prefixVariant = input('linear', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "prefixVariant" }] : /* istanbul ignore next */ []));
-    suffixVariant = input('linear', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "suffixVariant" }] : /* istanbul ignore next */ []));
-    hasPrefix = computed(() => !!this.prefixIcon(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
-    hasSuffix = computed(() => !!this.suffixIcon(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasSuffix" }] : /* istanbul ignore next */ []));
-    isFocused = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
-    isFloated = computed(() => {
-        const val = this.value();
-        return this.isFocused() || (val !== '' && val !== null && val !== undefined);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isFloated" }] : /* istanbul ignore next */ []));
-    generatedId = `ol-floating-${uniqueFloatingId++}`;
-    inputId = computed(() => this.id() || this.generatedId, /* @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(() => (this.state() === 'error' ? 'true' : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
-    onChange = () => { };
-    onTouched = () => { };
-    onFocus() {
-        if (this.disabled() || this.readonly())
-            return;
-        this.isFocused.set(true);
-    }
-    onBlur() {
-        this.isFocused.set(false);
-        this.onTouched();
-    }
-    onModelChange(val) {
-        this.value.set(val);
-        this.onChange(val);
-    }
-    // CVA Implementation
-    writeValue(val) {
-        this.value.set(val || '');
-    }
-    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: OlFloatingLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlFloatingLabel, isStandalone: true, selector: "ol-floating-label", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, labelBg: { classPropertyName: "labelBg", publicName: "labelBg", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, prefixVariant: { classPropertyName: "prefixVariant", publicName: "prefixVariant", isSignal: true, isRequired: false, transformFunction: null }, suffixVariant: { classPropertyName: "suffixVariant", publicName: "suffixVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { classAttribute: "block w-full" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => OlFloatingLabel),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<div class=\"relative w-full\">\n  @if (variant() === 'outlined') {\n    <!-- 1. Outlined Floating Label -->\n    <div class=\"relative w-full\">\n      @if (prefixIcon()) {\n        <div\n          class=\"absolute inset-s-3.5 top-1/2 -translate-y-1/2 flex items-center pointer-events-none text-body-subtle z-10\"\n        >\n          <ol-icon\n            [name]=\"prefixIcon()\"\n            [variant]=\"prefixVariant()\"\n            [size]=\"size() === 'sm' ? 16 : 20\"\n          />\n        </div>\n      }\n\n      <input\n        [id]=\"inputId()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [type]=\"type()\"\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [autocomplete]=\"autocomplete()\"\n        class=\"block w-full text-heading bg-transparent border rounded-md appearance-none focus:outline-hidden focus:border-brand disabled:bg-neutral-tertiary disabled:text-fg-disabled disabled:cursor-not-allowed transition-colors\"\n        [class.h-9]=\"size() === 'sm'\"\n        [class.px-4]=\"size() === 'sm' && !hasPrefix() && !hasSuffix()\"\n        [class.ps-10]=\"size() === 'sm' && hasPrefix()\"\n        [class.pe-10]=\"size() === 'sm' && hasSuffix()\"\n        [class.text-sm]=\"size() === 'sm' || size() === 'base'\"\n        [class.h-10]=\"size() === 'base'\"\n        [class.px-5]=\"size() === 'base' && !hasPrefix() && !hasSuffix()\"\n        [class.ps-11]=\"size() === 'base' && hasPrefix()\"\n        [class.pe-11]=\"size() === 'base' && hasSuffix()\"\n        [class.h-12]=\"size() === 'lg'\"\n        [class.h-13]=\"size() === 'xl'\"\n        [class.px-6]=\"(size() === 'lg' || size() === 'xl') && !hasPrefix() && !hasSuffix()\"\n        [class.ps-12]=\"(size() === 'lg' || size() === 'xl') && hasPrefix()\"\n        [class.pe-12]=\"(size() === 'lg' || size() === 'xl') && hasSuffix()\"\n        [class.text-base]=\"size() === 'lg' || size() === 'xl'\"\n        [class.border-default]=\"state() === 'default' && !disabled()\"\n        [class.border-brand]=\"isFocused() && state() === 'default' && !disabled()\"\n        [class.border-danger]=\"state() === 'error' && !disabled()\"\n        [class.border-success]=\"state() === 'success' && !disabled()\"\n      />\n\n      <label\n        [for]=\"inputId()\"\n        class=\"absolute pointer-events-none transition-all duration-200 transform origin-left z-10 select-none px-1.5\"\n        [class.rounded-md]=\"isFloated()\"\n        [class.inset-s-4]=\"size() === 'sm' && (isFloated() || !hasPrefix())\"\n        [class.inset-s-5]=\"size() === 'base' && (isFloated() || !hasPrefix())\"\n        [class.inset-s-6]=\"(size() === 'lg' || size() === 'xl') && (isFloated() || !hasPrefix())\"\n        [class.inset-s-10]=\"!isFloated() && hasPrefix() && size() === 'sm'\"\n        [class.inset-s-11]=\"!isFloated() && hasPrefix() && size() === 'base'\"\n        [class.inset-s-12]=\"!isFloated() && hasPrefix() && size() === 'lg'\"\n        [class.text-sm]=\"size() === 'sm' || size() === 'base' || size() === 'lg'\"\n        [class.top-2]=\"isFloated()\"\n        [class.-translate-y-4]=\"isFloated()\"\n        [class.scale-75]=\"isFloated()\"\n        [class.bg-neutral-primary-soft]=\"isFloated() && !disabled() && !labelBg()\"\n        [class.bg-neutral-tertiary]=\"isFloated() && disabled() && !labelBg()\"\n        [class.text-fg-brand]=\"isFloated() && isFocused() && state() === 'default' && !disabled()\"\n        [class.text-body-subtle]=\"\n          (isFloated() && !isFocused() && state() === 'default' && !disabled()) || !isFloated()\n        \"\n        [class.text-fg-danger]=\"isFloated() && state() === 'error' && !disabled()\"\n        [class.text-fg-success]=\"isFloated() && state() === 'success' && !disabled()\"\n        [class.text-fg-disabled]=\"isFloated() && disabled()\"\n        [class.top-1/2]=\"!isFloated()\"\n        [class.-translate-y-1/2]=\"!isFloated()\"\n        [class.scale-100]=\"!isFloated()\"\n        [class.bg-transparent]=\"!isFloated()\"\n        [ngClass]=\"isFloated() && labelBg() ? labelBg() : ''\"\n      >\n        {{ label() }}\n      </label>\n\n      @if (suffixIcon()) {\n        <div\n          class=\"absolute inset-e-3.5 top-1/2 -translate-y-1/2 flex items-center pointer-events-none text-body-subtle z-10\"\n        >\n          <ol-icon\n            [name]=\"suffixIcon()\"\n            [variant]=\"suffixVariant()\"\n            [size]=\"size() === 'sm' ? 16 : 20\"\n          />\n        </div>\n      }\n    </div>\n  } @else if (variant() === 'filled') {\n    <!-- 2. Filled Floating Label -->\n    <div class=\"relative w-full\">\n      @if (prefixIcon()) {\n        <div\n          class=\"absolute inset-s-3.5 top-1/2 -translate-y-1/2 flex items-center pointer-events-none text-body-subtle z-10\"\n        >\n          <ol-icon\n            [name]=\"prefixIcon()\"\n            [variant]=\"prefixVariant()\"\n            [size]=\"size() === 'sm' ? 16 : 20\"\n          />\n        </div>\n      }\n\n      <input\n        [id]=\"inputId()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [type]=\"type()\"\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [autocomplete]=\"autocomplete()\"\n        class=\"block w-full text-heading bg-neutral-tertiary/80 border-0 border-b-2 appearance-none focus:outline-hidden focus:border-brand rounded-t-md transition-colors disabled:opacity-60 disabled:cursor-not-allowed\"\n        [class.pt-4]=\"size() === 'sm'\"\n        [class.pb-1]=\"size() === 'sm'\"\n        [class.px-4]=\"size() === 'sm' && !hasPrefix() && !hasSuffix()\"\n        [class.ps-10]=\"size() === 'sm' && hasPrefix()\"\n        [class.pe-10]=\"size() === 'sm' && hasSuffix()\"\n        [class.text-sm]=\"size() === 'sm' || size() === 'base'\"\n        [class.pt-5]=\"size() === 'base'\"\n        [class.px-5]=\"size() === 'base' && !hasPrefix() && !hasSuffix()\"\n        [class.ps-11]=\"size() === 'base' && hasPrefix()\"\n        [class.pe-11]=\"size() === 'base' && hasSuffix()\"\n        [class.pt-6]=\"size() === 'lg' || size() === 'xl'\"\n        [class.pb-2]=\"size() === 'lg' || size() === 'xl'\"\n        [class.px-6]=\"(size() === 'lg' || size() === 'xl') && !hasPrefix() && !hasSuffix()\"\n        [class.ps-12]=\"(size() === 'lg' || size() === 'xl') && hasPrefix()\"\n        [class.pe-12]=\"(size() === 'lg' || size() === 'xl') && hasSuffix()\"\n        [class.text-base]=\"size() === 'lg' || size() === 'xl'\"\n        [class.border-default]=\"state() === 'default' && !disabled()\"\n        [class.border-brand]=\"isFocused() && state() === 'default' && !disabled()\"\n        [class.border-danger]=\"state() === 'error' && !disabled()\"\n        [class.border-success]=\"state() === 'success' && !disabled()\"\n        [ngClass]=\"{ 'pb-1.5': size() === 'base' }\"\n      />\n\n      <label\n        [for]=\"inputId()\"\n        class=\"absolute pointer-events-none transition-all duration-200 transform origin-left z-10 select-none\"\n        [class.inset-s-4]=\"size() === 'sm' && (isFloated() || !hasPrefix())\"\n        [class.inset-s-5]=\"size() === 'base' && (isFloated() || !hasPrefix())\"\n        [class.inset-s-6]=\"(size() === 'lg' || size() === 'xl') && (isFloated() || !hasPrefix())\"\n        [class.inset-s-10]=\"!isFloated() && hasPrefix() && size() === 'sm'\"\n        [class.inset-s-11]=\"!isFloated() && hasPrefix() && size() === 'base'\"\n        [class.inset-s-12]=\"!isFloated() && hasPrefix() && size() === 'lg'\"\n        [class.text-sm]=\"size() === 'sm' || size() === 'base' || size() === 'lg'\"\n        [class.top-3]=\"isFloated()\"\n        [class.-translate-y-3]=\"isFloated()\"\n        [class.scale-75]=\"isFloated()\"\n        [class.text-fg-brand]=\"isFloated() && isFocused() && state() === 'default' && !disabled()\"\n        [class.text-body-subtle]=\"\n          (isFloated() && !isFocused() && state() === 'default' && !disabled()) || !isFloated()\n        \"\n        [class.text-fg-danger]=\"isFloated() && state() === 'error' && !disabled()\"\n        [class.text-fg-success]=\"isFloated() && state() === 'success' && !disabled()\"\n        [class.text-fg-disabled]=\"isFloated() && disabled()\"\n        [class.top-1/2]=\"!isFloated()\"\n        [class.-translate-y-1/2]=\"!isFloated()\"\n        [class.scale-100]=\"!isFloated()\"\n      >\n        {{ label() }}\n      </label>\n\n      @if (suffixIcon()) {\n        <div\n          class=\"absolute inset-e-3.5 top-1/2 -translate-y-1/2 flex items-center pointer-events-none text-body-subtle z-10\"\n        >\n          <ol-icon\n            [name]=\"suffixIcon()\"\n            [variant]=\"suffixVariant()\"\n            [size]=\"size() === 'sm' ? 16 : 20\"\n          />\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- 3. Standard / Underline Floating Label -->\n    <div class=\"relative w-full\">\n      @if (prefixIcon()) {\n        <div\n          class=\"absolute inset-s-0 top-1/2 -translate-y-1/2 flex items-center pointer-events-none text-body-subtle z-10\"\n        >\n          <ol-icon\n            [name]=\"prefixIcon()\"\n            [variant]=\"prefixVariant()\"\n            [size]=\"size() === 'sm' ? 16 : 20\"\n          />\n        </div>\n      }\n\n      <input\n        [id]=\"inputId()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [type]=\"type()\"\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [autocomplete]=\"autocomplete()\"\n        class=\"block w-full text-heading bg-transparent border-0 border-b-2 appearance-none focus:outline-hidden focus:border-brand transition-colors disabled:opacity-60 disabled:cursor-not-allowed\"\n        [class.pt-3]=\"size() === 'sm'\"\n        [class.pb-1]=\"size() === 'sm'\"\n        [class.ps-6]=\"hasPrefix()\"\n        [class.pe-6]=\"hasSuffix()\"\n        [class.text-sm]=\"size() === 'sm' || size() === 'base'\"\n        [class.pt-4]=\"size() === 'base'\"\n        [class.pt-5]=\"size() === 'lg' || size() === 'xl'\"\n        [class.pb-2]=\"size() === 'lg' || size() === 'xl'\"\n        [class.text-base]=\"size() === 'lg' || size() === 'xl'\"\n        [class.border-default]=\"state() === 'default' && !disabled()\"\n        [class.border-brand]=\"isFocused() && state() === 'default' && !disabled()\"\n        [class.border-danger]=\"state() === 'error' && !disabled()\"\n        [class.border-success]=\"state() === 'success' && !disabled()\"\n        [ngClass]=\"{ 'pb-1.5': size() === 'base' }\"\n      />\n\n      <label\n        [for]=\"inputId()\"\n        class=\"absolute pointer-events-none transition-all duration-200 transform origin-left z-10 select-none\"\n        [class.inset-s-0]=\"!hasPrefix() || isFloated()\"\n        [class.inset-s-6]=\"!isFloated() && hasPrefix()\"\n        [class.text-sm]=\"size() === 'sm' || size() === 'base' || size() === 'lg'\"\n        [class.top-2]=\"isFloated()\"\n        [class.-translate-y-5]=\"isFloated()\"\n        [class.scale-75]=\"isFloated()\"\n        [class.text-fg-brand]=\"isFloated() && isFocused() && state() === 'default' && !disabled()\"\n        [class.text-body-subtle]=\"\n          (isFloated() && !isFocused() && state() === 'default' && !disabled()) || !isFloated()\n        \"\n        [class.text-fg-danger]=\"isFloated() && state() === 'error' && !disabled()\"\n        [class.text-fg-success]=\"isFloated() && state() === 'success' && !disabled()\"\n        [class.text-fg-disabled]=\"isFloated() && disabled()\"\n        [class.top-1/2]=\"!isFloated()\"\n        [class.-translate-y-1/2]=\"!isFloated()\"\n        [class.scale-100]=\"!isFloated()\"\n      >\n        {{ label() }}\n      </label>\n\n      @if (suffixIcon()) {\n        <div\n          class=\"absolute inset-e-0 top-1/2 -translate-y-1/2 flex items-center pointer-events-none text-body-subtle z-10\"\n        >\n          <ol-icon\n            [name]=\"suffixIcon()\"\n            [variant]=\"suffixVariant()\"\n            [size]=\"size() === 'sm' ? 16 : 20\"\n          />\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Helper Text & Error Text -->\n  @if (state() === 'error' && errorText()) {\n    <p class=\"mt-1.5 text-xs text-fg-danger font-medium\">{{ errorText() }}</p>\n  } @else if (helperText()) {\n    <p class=\"mt-1.5 text-xs text-body-subtle\">{{ helperText() }}</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: OlFloatingLabel, decorators: [{
-            type: Component,
-            args: [{ selector: 'ol-floating-label', standalone: true, imports: [CommonModule, FormsModule, 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
-                        // 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, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => OlFloatingLabel),
-                            multi: true,
-                        },
-                    ], template: "<div class=\"relative w-full\">\n  @if (variant() === 'outlined') {\n    <!-- 1. Outlined Floating Label -->\n    <div class=\"relative w-full\">\n      @if (prefixIcon()) {\n        <div\n          class=\"absolute inset-s-3.5 top-1/2 -translate-y-1/2 flex items-center pointer-events-none text-body-subtle z-10\"\n        >\n          <ol-icon\n            [name]=\"prefixIcon()\"\n            [variant]=\"prefixVariant()\"\n            [size]=\"size() === 'sm' ? 16 : 20\"\n          />\n        </div>\n      }\n\n      <input\n        [id]=\"inputId()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [type]=\"type()\"\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [autocomplete]=\"autocomplete()\"\n        class=\"block w-full text-heading bg-transparent border rounded-md appearance-none focus:outline-hidden focus:border-brand disabled:bg-neutral-tertiary disabled:text-fg-disabled disabled:cursor-not-allowed transition-colors\"\n        [class.h-9]=\"size() === 'sm'\"\n        [class.px-4]=\"size() === 'sm' && !hasPrefix() && !hasSuffix()\"\n        [class.ps-10]=\"size() === 'sm' && hasPrefix()\"\n        [class.pe-10]=\"size() === 'sm' && hasSuffix()\"\n        [class.text-sm]=\"size() === 'sm' || size() === 'base'\"\n        [class.h-10]=\"size() === 'base'\"\n        [class.px-5]=\"size() === 'base' && !hasPrefix() && !hasSuffix()\"\n        [class.ps-11]=\"size() === 'base' && hasPrefix()\"\n        [class.pe-11]=\"size() === 'base' && hasSuffix()\"\n        [class.h-12]=\"size() === 'lg'\"\n        [class.h-13]=\"size() === 'xl'\"\n        [class.px-6]=\"(size() === 'lg' || size() === 'xl') && !hasPrefix() && !hasSuffix()\"\n        [class.ps-12]=\"(size() === 'lg' || size() === 'xl') && hasPrefix()\"\n        [class.pe-12]=\"(size() === 'lg' || size() === 'xl') && hasSuffix()\"\n        [class.text-base]=\"size() === 'lg' || size() === 'xl'\"\n        [class.border-default]=\"state() === 'default' && !disabled()\"\n        [class.border-brand]=\"isFocused() && state() === 'default' && !disabled()\"\n        [class.border-danger]=\"state() === 'error' && !disabled()\"\n        [class.border-success]=\"state() === 'success' && !disabled()\"\n      />\n\n      <label\n        [for]=\"inputId()\"\n        class=\"absolute pointer-events-none transition-all duration-200 transform origin-left z-10 select-none px-1.5\"\n        [class.rounded-md]=\"isFloated()\"\n        [class.inset-s-4]=\"size() === 'sm' && (isFloated() || !hasPrefix())\"\n        [class.inset-s-5]=\"size() === 'base' && (isFloated() || !hasPrefix())\"\n        [class.inset-s-6]=\"(size() === 'lg' || size() === 'xl') && (isFloated() || !hasPrefix())\"\n        [class.inset-s-10]=\"!isFloated() && hasPrefix() && size() === 'sm'\"\n        [class.inset-s-11]=\"!isFloated() && hasPrefix() && size() === 'base'\"\n        [class.inset-s-12]=\"!isFloated() && hasPrefix() && size() === 'lg'\"\n        [class.text-sm]=\"size() === 'sm' || size() === 'base' || size() === 'lg'\"\n        [class.top-2]=\"isFloated()\"\n        [class.-translate-y-4]=\"isFloated()\"\n        [class.scale-75]=\"isFloated()\"\n        [class.bg-neutral-primary-soft]=\"isFloated() && !disabled() && !labelBg()\"\n        [class.bg-neutral-tertiary]=\"isFloated() && disabled() && !labelBg()\"\n        [class.text-fg-brand]=\"isFloated() && isFocused() && state() === 'default' && !disabled()\"\n        [class.text-body-subtle]=\"\n          (isFloated() && !isFocused() && state() === 'default' && !disabled()) || !isFloated()\n        \"\n        [class.text-fg-danger]=\"isFloated() && state() === 'error' && !disabled()\"\n        [class.text-fg-success]=\"isFloated() && state() === 'success' && !disabled()\"\n        [class.text-fg-disabled]=\"isFloated() && disabled()\"\n        [class.top-1/2]=\"!isFloated()\"\n        [class.-translate-y-1/2]=\"!isFloated()\"\n        [class.scale-100]=\"!isFloated()\"\n        [class.bg-transparent]=\"!isFloated()\"\n        [ngClass]=\"isFloated() && labelBg() ? labelBg() : ''\"\n      >\n        {{ label() }}\n      </label>\n\n      @if (suffixIcon()) {\n        <div\n          class=\"absolute inset-e-3.5 top-1/2 -translate-y-1/2 flex items-center pointer-events-none text-body-subtle z-10\"\n        >\n          <ol-icon\n            [name]=\"suffixIcon()\"\n            [variant]=\"suffixVariant()\"\n            [size]=\"size() === 'sm' ? 16 : 20\"\n          />\n        </div>\n      }\n    </div>\n  } @else if (variant() === 'filled') {\n    <!-- 2. Filled Floating Label -->\n    <div class=\"relative w-full\">\n      @if (prefixIcon()) {\n        <div\n          class=\"absolute inset-s-3.5 top-1/2 -translate-y-1/2 flex items-center pointer-events-none text-body-subtle z-10\"\n        >\n          <ol-icon\n            [name]=\"prefixIcon()\"\n            [variant]=\"prefixVariant()\"\n            [size]=\"size() === 'sm' ? 16 : 20\"\n          />\n        </div>\n      }\n\n      <input\n        [id]=\"inputId()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [type]=\"type()\"\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [autocomplete]=\"autocomplete()\"\n        class=\"block w-full text-heading bg-neutral-tertiary/80 border-0 border-b-2 appearance-none focus:outline-hidden focus:border-brand rounded-t-md transition-colors disabled:opacity-60 disabled:cursor-not-allowed\"\n        [class.pt-4]=\"size() === 'sm'\"\n        [class.pb-1]=\"size() === 'sm'\"\n        [class.px-4]=\"size() === 'sm' && !hasPrefix() && !hasSuffix()\"\n        [class.ps-10]=\"size() === 'sm' && hasPrefix()\"\n        [class.pe-10]=\"size() === 'sm' && hasSuffix()\"\n        [class.text-sm]=\"size() === 'sm' || size() === 'base'\"\n        [class.pt-5]=\"size() === 'base'\"\n        [class.px-5]=\"size() === 'base' && !hasPrefix() && !hasSuffix()\"\n        [class.ps-11]=\"size() === 'base' && hasPrefix()\"\n        [class.pe-11]=\"size() === 'base' && hasSuffix()\"\n        [class.pt-6]=\"size() === 'lg' || size() === 'xl'\"\n        [class.pb-2]=\"size() === 'lg' || size() === 'xl'\"\n        [class.px-6]=\"(size() === 'lg' || size() === 'xl') && !hasPrefix() && !hasSuffix()\"\n        [class.ps-12]=\"(size() === 'lg' || size() === 'xl') && hasPrefix()\"\n        [class.pe-12]=\"(size() === 'lg' || size() === 'xl') && hasSuffix()\"\n        [class.text-base]=\"size() === 'lg' || size() === 'xl'\"\n        [class.border-default]=\"state() === 'default' && !disabled()\"\n        [class.border-brand]=\"isFocused() && state() === 'default' && !disabled()\"\n        [class.border-danger]=\"state() === 'error' && !disabled()\"\n        [class.border-success]=\"state() === 'success' && !disabled()\"\n        [ngClass]=\"{ 'pb-1.5': size() === 'base' }\"\n      />\n\n      <label\n        [for]=\"inputId()\"\n        class=\"absolute pointer-events-none transition-all duration-200 transform origin-left z-10 select-none\"\n        [class.inset-s-4]=\"size() === 'sm' && (isFloated() || !hasPrefix())\"\n        [class.inset-s-5]=\"size() === 'base' && (isFloated() || !hasPrefix())\"\n        [class.inset-s-6]=\"(size() === 'lg' || size() === 'xl') && (isFloated() || !hasPrefix())\"\n        [class.inset-s-10]=\"!isFloated() && hasPrefix() && size() === 'sm'\"\n        [class.inset-s-11]=\"!isFloated() && hasPrefix() && size() === 'base'\"\n        [class.inset-s-12]=\"!isFloated() && hasPrefix() && size() === 'lg'\"\n        [class.text-sm]=\"size() === 'sm' || size() === 'base' || size() === 'lg'\"\n        [class.top-3]=\"isFloated()\"\n        [class.-translate-y-3]=\"isFloated()\"\n        [class.scale-75]=\"isFloated()\"\n        [class.text-fg-brand]=\"isFloated() && isFocused() && state() === 'default' && !disabled()\"\n        [class.text-body-subtle]=\"\n          (isFloated() && !isFocused() && state() === 'default' && !disabled()) || !isFloated()\n        \"\n        [class.text-fg-danger]=\"isFloated() && state() === 'error' && !disabled()\"\n        [class.text-fg-success]=\"isFloated() && state() === 'success' && !disabled()\"\n        [class.text-fg-disabled]=\"isFloated() && disabled()\"\n        [class.top-1/2]=\"!isFloated()\"\n        [class.-translate-y-1/2]=\"!isFloated()\"\n        [class.scale-100]=\"!isFloated()\"\n      >\n        {{ label() }}\n      </label>\n\n      @if (suffixIcon()) {\n        <div\n          class=\"absolute inset-e-3.5 top-1/2 -translate-y-1/2 flex items-center pointer-events-none text-body-subtle z-10\"\n        >\n          <ol-icon\n            [name]=\"suffixIcon()\"\n            [variant]=\"suffixVariant()\"\n            [size]=\"size() === 'sm' ? 16 : 20\"\n          />\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- 3. Standard / Underline Floating Label -->\n    <div class=\"relative w-full\">\n      @if (prefixIcon()) {\n        <div\n          class=\"absolute inset-s-0 top-1/2 -translate-y-1/2 flex items-center pointer-events-none text-body-subtle z-10\"\n        >\n          <ol-icon\n            [name]=\"prefixIcon()\"\n            [variant]=\"prefixVariant()\"\n            [size]=\"size() === 'sm' ? 16 : 20\"\n          />\n        </div>\n      }\n\n      <input\n        [id]=\"inputId()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [type]=\"type()\"\n        [ngModel]=\"value()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [autocomplete]=\"autocomplete()\"\n        class=\"block w-full text-heading bg-transparent border-0 border-b-2 appearance-none focus:outline-hidden focus:border-brand transition-colors disabled:opacity-60 disabled:cursor-not-allowed\"\n        [class.pt-3]=\"size() === 'sm'\"\n        [class.pb-1]=\"size() === 'sm'\"\n        [class.ps-6]=\"hasPrefix()\"\n        [class.pe-6]=\"hasSuffix()\"\n        [class.text-sm]=\"size() === 'sm' || size() === 'base'\"\n        [class.pt-4]=\"size() === 'base'\"\n        [class.pt-5]=\"size() === 'lg' || size() === 'xl'\"\n        [class.pb-2]=\"size() === 'lg' || size() === 'xl'\"\n        [class.text-base]=\"size() === 'lg' || size() === 'xl'\"\n        [class.border-default]=\"state() === 'default' && !disabled()\"\n        [class.border-brand]=\"isFocused() && state() === 'default' && !disabled()\"\n        [class.border-danger]=\"state() === 'error' && !disabled()\"\n        [class.border-success]=\"state() === 'success' && !disabled()\"\n        [ngClass]=\"{ 'pb-1.5': size() === 'base' }\"\n      />\n\n      <label\n        [for]=\"inputId()\"\n        class=\"absolute pointer-events-none transition-all duration-200 transform origin-left z-10 select-none\"\n        [class.inset-s-0]=\"!hasPrefix() || isFloated()\"\n        [class.inset-s-6]=\"!isFloated() && hasPrefix()\"\n        [class.text-sm]=\"size() === 'sm' || size() === 'base' || size() === 'lg'\"\n        [class.top-2]=\"isFloated()\"\n        [class.-translate-y-5]=\"isFloated()\"\n        [class.scale-75]=\"isFloated()\"\n        [class.text-fg-brand]=\"isFloated() && isFocused() && state() === 'default' && !disabled()\"\n        [class.text-body-subtle]=\"\n          (isFloated() && !isFocused() && state() === 'default' && !disabled()) || !isFloated()\n        \"\n        [class.text-fg-danger]=\"isFloated() && state() === 'error' && !disabled()\"\n        [class.text-fg-success]=\"isFloated() && state() === 'success' && !disabled()\"\n        [class.text-fg-disabled]=\"isFloated() && disabled()\"\n        [class.top-1/2]=\"!isFloated()\"\n        [class.-translate-y-1/2]=\"!isFloated()\"\n        [class.scale-100]=\"!isFloated()\"\n      >\n        {{ label() }}\n      </label>\n\n      @if (suffixIcon()) {\n        <div\n          class=\"absolute inset-e-0 top-1/2 -translate-y-1/2 flex items-center pointer-events-none text-body-subtle z-10\"\n        >\n          <ol-icon\n            [name]=\"suffixIcon()\"\n            [variant]=\"suffixVariant()\"\n            [size]=\"size() === 'sm' ? 16 : 20\"\n          />\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Helper Text & Error Text -->\n  @if (state() === 'error' && errorText()) {\n    <p class=\"mt-1.5 text-xs text-fg-danger font-medium\">{{ errorText() }}</p>\n  } @else if (helperText()) {\n    <p class=\"mt-1.5 text-xs text-body-subtle\">{{ helperText() }}</p>\n  }\n</div>\n" }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], labelBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelBg", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], prefixVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixVariant", required: false }] }], suffixVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixVariant", required: false }] }] } });
-
 let nextInputCounterId = 0;
 class OlInputCounter {
     /** Id tự sinh khi nơi gọi không truyền id — để <label for> và
@@ -12513,6 +13369,32 @@ class OlTagInput {
     ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     size = input('base', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Nhãn nổi: `label` nằm TRONG khung ở dòng đầu, nổi lên khi focus, đang gõ
+     * hoặc đã có thẻ. Khung giãn nhiều dòng — nhãn nổi không đẩy thẻ.
+     */
+    floatingLabel = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Nhãn `top` (trên ô, mặc định) hay `left` (cùng hàng, bên trái). Nhãn nổi
+     * (`floatingLabel`) thắng — bật nó thì bỏ qua input này.
+     */
+    labelPosition = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * Độ rộng cột nhãn khi `labelPosition="left"` — độ dài CSS bất kỳ: `140px`,
+     * `10rem`, `30%`. Bỏ trống = 8rem. Các ô trong cùng form đặt cùng một số thì
+     * mép ô thẳng hàng.
+     */
+    labelWidth = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelWidth" }] : /* istanbul ignore next */ []));
+    labelLayout = computed(() => fieldLabelLayout(this.labelPosition(), this.floatingLabel()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelLayout" }] : /* istanbul ignore next */ []));
+    labelBeside = computed(() => this.labelLayout() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelBeside" }] : /* istanbul ignore next */ []));
+    /** Kiểu nhãn nổi — Figma Bordered / With background / Default. */
+    floatingVariant = input('outlined', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingVariant" }] : /* istanbul ignore next */ []));
     /**
      * Gom chiều cao + padding vào MỘT chuỗi thay vì nhiều `[class.X]`: hai class
      * cùng thuộc tính đều nằm trên thẻ thì trình duyệt chọn theo thứ tự luật CSS
@@ -12627,17 +13509,17 @@ class OlTagInput {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlTagInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlTagInput, isStandalone: true, selector: "ol-tag-input", inputs: { tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, maxTags: { classPropertyName: "maxTags", publicName: "maxTags", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tags: "tagsChange", disabled: "disabledChange" }, host: { classAttribute: "block w-full" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlTagInput, isStandalone: true, selector: "ol-tag-input", inputs: { tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, maxTags: { classPropertyName: "maxTags", publicName: "maxTags", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, floatingVariant: { classPropertyName: "floatingVariant", publicName: "floatingVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tags: "tagsChange", disabled: "disabledChange" }, host: { classAttribute: "block w-full" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => OlTagInput),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "tagInputEl", first: true, predicate: ["tagInputField"], descendants: true }], ngImport: i0, template: "<!--\n  B\u1EADc s\u1ED1 `brand-*` \u1EDF \u0111\u00E2y GI\u1EEE c\u00F3 ch\u1EE7 \u0111\u00EDch \u2014 `brand` l\u00E0 b\u1EA3ng Figma C\u00D3:\n    dark:focus-within:ring-brand-950   token ring-brand-softer kh\u00F4ng sinh CSS\n    dark:bg-brand-950/50               token kh\u00F4ng mang \u0111\u01B0\u1EE3c opacity /50\n    dark:border-brand-800/60           c\u00F9ng l\u00FD do\n-->\n<div class=\"w-full\">\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  <!-- C\u00F9ng n\u1EC1n v\u1EDBi ol-input (#F9FAFB) \u2014 xem l\u00FD do \u1EDF ol-otp-input. -->\n  <div\n    (click)=\"focusInput()\"\n    class=\"flex flex-wrap items-center gap-1.5 border border-default-medium rounded-md shadow-xs focus-within:ring-2 focus-within:ring-brand-subtle dark:focus-within:ring-brand-950 focus-within:border-brand cursor-text\"\n    [class]=\"boxSizeClass()\"\n    [class.bg-neutral-secondary-medium]=\"!disabled()\"\n    [class.bg-neutral-tertiary]=\"disabled()\"\n    [class.dark:bg-dark]=\"disabled()\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    [class.opacity-60]=\"disabled()\"\n  >\n    @for (tag of tags(); track tag; let i = $index) {\n      <span\n        class=\"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium bg-brand-softer text-fg-brand-medium dark:bg-brand-950/50 dark:text-fg-brand border border-brand-subtle dark:border-brand-800/60\"\n      >\n        <span>{{ tag }}</span>\n        @if (!disabled()) {\n          <button\n            type=\"button\"\n            (click)=\"removeTag(i); $event.stopPropagation()\"\n            [attr.aria-label]=\"'G\u1EE1 ' + tag\"\n            class=\"text-fg-brand hover:text-fg-brand-medium dark:text-fg-brand dark:hover:text-fg-brand-subtle p-0.5 rounded-md hover:bg-brand-soft dark:hover:bg-brand-900/60\"\n          >\n            <ol-icon name=\"close\" size=\"xs\" />\n          </button>\n        }\n      </span>\n    }\n\n    <input\n      #tagInputField\n      [id]=\"inputId()\"\n      [attr.aria-invalid]=\"ariaInvalid()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      type=\"text\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"tags().length === 0 ? placeholder() : ''\"\n      [ngModel]=\"inputValue()\"\n      (ngModelChange)=\"inputValue.set($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"markTouched()\"\n      class=\"flex-1 min-w-30 bg-transparent border-0 text-heading outline-hidden py-1 px-1 placeholder:text-body-subtle\"\n      [class]=\"fieldTextClass()\"\n    />\n  </div>\n\n  @if (helperText()) {\n    <p class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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 });
+        ], viewQueries: [{ propertyName: "tagInputEl", first: true, predicate: ["tagInputField"], descendants: true }], ngImport: i0, template: "<!--\n  B\u1EADc s\u1ED1 `brand-*` \u1EDF \u0111\u00E2y GI\u1EEE c\u00F3 ch\u1EE7 \u0111\u00EDch \u2014 `brand` l\u00E0 b\u1EA3ng Figma C\u00D3:\n    dark:focus-within:ring-brand-950   token ring-brand-softer kh\u00F4ng sinh CSS\n    dark:bg-brand-950/50               token kh\u00F4ng mang \u0111\u01B0\u1EE3c opacity /50\n    dark:border-brand-800/60           c\u00F9ng l\u00FD do\n-->\n<div class=\"w-full\" [class]=\"labelLayout()\" [style.--ol-label-w]=\"labelWidth() || null\">\n  @if (label() && !floatingLabel()) {\n    <ol-field-label [beside]=\"labelBeside()\" [size]=\"size()\" [text]=\"label()\" [forId]=\"inputId()\" />\n  }\n\n  <ol-field-frame\n    [enabled]=\"floatingLabel()\"\n    [label]=\"label()\"\n    [forId]=\"inputId()\"\n    [variant]=\"floatingVariant()\"\n    [size]=\"size()\"\n    [disabled]=\"disabled()\"\n    [hasValue]=\"tags().length > 0 || inputValue() !== ''\"\n  >\n    <!-- C\u00F9ng n\u1EC1n v\u1EDBi ol-input (#F9FAFB) \u2014 xem l\u00FD do \u1EDF ol-otp-input. -->\n    <div\n      (click)=\"focusInput()\"\n      class=\"ol-field-box flex flex-wrap items-center gap-1.5 border border-default-medium rounded-md shadow-xs focus-within:ring-2 focus-within:ring-brand-subtle dark:focus-within:ring-brand-950 focus-within:border-brand cursor-text\"\n      [class]=\"boxSizeClass()\"\n      [class.bg-neutral-secondary-medium]=\"!disabled()\"\n      [class.bg-neutral-tertiary]=\"disabled()\"\n      [class.dark:bg-dark]=\"disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n      [class.opacity-60]=\"disabled()\"\n    >\n      @for (tag of tags(); track tag; let i = $index) {\n        <span\n          class=\"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium bg-brand-softer text-fg-brand-medium dark:bg-brand-950/50 dark:text-fg-brand border border-brand-subtle dark:border-brand-800/60\"\n        >\n          <span>{{ tag }}</span>\n          @if (!disabled()) {\n            <button\n              type=\"button\"\n              (click)=\"removeTag(i); $event.stopPropagation()\"\n              [attr.aria-label]=\"'G\u1EE1 ' + tag\"\n              class=\"text-fg-brand hover:text-fg-brand-medium dark:text-fg-brand dark:hover:text-fg-brand-subtle p-0.5 rounded-md hover:bg-brand-soft dark:hover:bg-brand-900/60\"\n            >\n              <ol-icon name=\"close\" size=\"xs\" />\n            </button>\n          }\n        </span>\n      }\n\n      <input\n        #tagInputField\n        [id]=\"inputId()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-describedby]=\"describedBy()\"\n        type=\"text\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"tags().length === 0 ? placeholder() : ''\"\n        [ngModel]=\"inputValue()\"\n        (ngModelChange)=\"inputValue.set($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        (blur)=\"markTouched()\"\n        class=\"flex-1 min-w-30 bg-transparent border-0 text-heading outline-hidden py-1 px-1 placeholder:text-body-subtle\"\n        [class]=\"fieldTextClass()\"\n      />\n    </div>\n  </ol-field-frame>\n\n  @if (helperText()) {\n    <p class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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"] }, { kind: "component", type: OlFieldFrame, selector: "ol-field-frame", inputs: ["enabled", "label", "forId", "labelId", "variant", "size", "state", "disabled", "required", "hasValue", "open", "floatStart"] }, { kind: "component", type: OlFieldLabel, selector: "ol-field-label", inputs: ["text", "forId", "labelId", "required", "helpIcon", "helpTooltip", "flush", "beside", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlTagInput, decorators: [{
             type: Component,
-            args: [{ selector: 'ol-tag-input', standalone: true, imports: [CommonModule, FormsModule, OlIcon], host: {
+            args: [{ selector: 'ol-tag-input', standalone: true, imports: [CommonModule, FormsModule, OlIcon, OlFieldFrame, OlFieldLabel], 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
@@ -12649,8 +13531,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                             useExisting: forwardRef(() => OlTagInput),
                             multi: true,
                         },
-                    ], template: "<!--\n  B\u1EADc s\u1ED1 `brand-*` \u1EDF \u0111\u00E2y GI\u1EEE c\u00F3 ch\u1EE7 \u0111\u00EDch \u2014 `brand` l\u00E0 b\u1EA3ng Figma C\u00D3:\n    dark:focus-within:ring-brand-950   token ring-brand-softer kh\u00F4ng sinh CSS\n    dark:bg-brand-950/50               token kh\u00F4ng mang \u0111\u01B0\u1EE3c opacity /50\n    dark:border-brand-800/60           c\u00F9ng l\u00FD do\n-->\n<div class=\"w-full\">\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  <!-- C\u00F9ng n\u1EC1n v\u1EDBi ol-input (#F9FAFB) \u2014 xem l\u00FD do \u1EDF ol-otp-input. -->\n  <div\n    (click)=\"focusInput()\"\n    class=\"flex flex-wrap items-center gap-1.5 border border-default-medium rounded-md shadow-xs focus-within:ring-2 focus-within:ring-brand-subtle dark:focus-within:ring-brand-950 focus-within:border-brand cursor-text\"\n    [class]=\"boxSizeClass()\"\n    [class.bg-neutral-secondary-medium]=\"!disabled()\"\n    [class.bg-neutral-tertiary]=\"disabled()\"\n    [class.dark:bg-dark]=\"disabled()\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    [class.opacity-60]=\"disabled()\"\n  >\n    @for (tag of tags(); track tag; let i = $index) {\n      <span\n        class=\"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium bg-brand-softer text-fg-brand-medium dark:bg-brand-950/50 dark:text-fg-brand border border-brand-subtle dark:border-brand-800/60\"\n      >\n        <span>{{ tag }}</span>\n        @if (!disabled()) {\n          <button\n            type=\"button\"\n            (click)=\"removeTag(i); $event.stopPropagation()\"\n            [attr.aria-label]=\"'G\u1EE1 ' + tag\"\n            class=\"text-fg-brand hover:text-fg-brand-medium dark:text-fg-brand dark:hover:text-fg-brand-subtle p-0.5 rounded-md hover:bg-brand-soft dark:hover:bg-brand-900/60\"\n          >\n            <ol-icon name=\"close\" size=\"xs\" />\n          </button>\n        }\n      </span>\n    }\n\n    <input\n      #tagInputField\n      [id]=\"inputId()\"\n      [attr.aria-invalid]=\"ariaInvalid()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      type=\"text\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"tags().length === 0 ? placeholder() : ''\"\n      [ngModel]=\"inputValue()\"\n      (ngModelChange)=\"inputValue.set($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"markTouched()\"\n      class=\"flex-1 min-w-30 bg-transparent border-0 text-heading outline-hidden py-1 px-1 placeholder:text-body-subtle\"\n      [class]=\"fieldTextClass()\"\n    />\n  </div>\n\n  @if (helperText()) {\n    <p class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }, { type: i0.Output, args: ["tagsChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], maxTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTags", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tagInputEl: [{
+                    ], template: "<!--\n  B\u1EADc s\u1ED1 `brand-*` \u1EDF \u0111\u00E2y GI\u1EEE c\u00F3 ch\u1EE7 \u0111\u00EDch \u2014 `brand` l\u00E0 b\u1EA3ng Figma C\u00D3:\n    dark:focus-within:ring-brand-950   token ring-brand-softer kh\u00F4ng sinh CSS\n    dark:bg-brand-950/50               token kh\u00F4ng mang \u0111\u01B0\u1EE3c opacity /50\n    dark:border-brand-800/60           c\u00F9ng l\u00FD do\n-->\n<div class=\"w-full\" [class]=\"labelLayout()\" [style.--ol-label-w]=\"labelWidth() || null\">\n  @if (label() && !floatingLabel()) {\n    <ol-field-label [beside]=\"labelBeside()\" [size]=\"size()\" [text]=\"label()\" [forId]=\"inputId()\" />\n  }\n\n  <ol-field-frame\n    [enabled]=\"floatingLabel()\"\n    [label]=\"label()\"\n    [forId]=\"inputId()\"\n    [variant]=\"floatingVariant()\"\n    [size]=\"size()\"\n    [disabled]=\"disabled()\"\n    [hasValue]=\"tags().length > 0 || inputValue() !== ''\"\n  >\n    <!-- C\u00F9ng n\u1EC1n v\u1EDBi ol-input (#F9FAFB) \u2014 xem l\u00FD do \u1EDF ol-otp-input. -->\n    <div\n      (click)=\"focusInput()\"\n      class=\"ol-field-box flex flex-wrap items-center gap-1.5 border border-default-medium rounded-md shadow-xs focus-within:ring-2 focus-within:ring-brand-subtle dark:focus-within:ring-brand-950 focus-within:border-brand cursor-text\"\n      [class]=\"boxSizeClass()\"\n      [class.bg-neutral-secondary-medium]=\"!disabled()\"\n      [class.bg-neutral-tertiary]=\"disabled()\"\n      [class.dark:bg-dark]=\"disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n      [class.opacity-60]=\"disabled()\"\n    >\n      @for (tag of tags(); track tag; let i = $index) {\n        <span\n          class=\"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium bg-brand-softer text-fg-brand-medium dark:bg-brand-950/50 dark:text-fg-brand border border-brand-subtle dark:border-brand-800/60\"\n        >\n          <span>{{ tag }}</span>\n          @if (!disabled()) {\n            <button\n              type=\"button\"\n              (click)=\"removeTag(i); $event.stopPropagation()\"\n              [attr.aria-label]=\"'G\u1EE1 ' + tag\"\n              class=\"text-fg-brand hover:text-fg-brand-medium dark:text-fg-brand dark:hover:text-fg-brand-subtle p-0.5 rounded-md hover:bg-brand-soft dark:hover:bg-brand-900/60\"\n            >\n              <ol-icon name=\"close\" size=\"xs\" />\n            </button>\n          }\n        </span>\n      }\n\n      <input\n        #tagInputField\n        [id]=\"inputId()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-describedby]=\"describedBy()\"\n        type=\"text\"\n        [disabled]=\"disabled()\"\n        [placeholder]=\"tags().length === 0 ? placeholder() : ''\"\n        [ngModel]=\"inputValue()\"\n        (ngModelChange)=\"inputValue.set($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        (blur)=\"markTouched()\"\n        class=\"flex-1 min-w-30 bg-transparent border-0 text-heading outline-hidden py-1 px-1 placeholder:text-body-subtle\"\n        [class]=\"fieldTextClass()\"\n      />\n    </div>\n  </ol-field-frame>\n\n  @if (helperText()) {\n    <p class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }, { type: i0.Output, args: ["tagsChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], maxTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTags", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], floatingVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingVariant", required: false }] }], tagInputEl: [{
                 type: ViewChild,
                 args: ['tagInputField']
             }] } });
@@ -12798,6 +13680,32 @@ class OlTimepicker {
      */
     ariaLabel = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Nhãn nổi: `label` nằm TRONG khung (sau icon đồng hồ), nổi lên khi focus,
+     * mở bảng chọn hoặc đã có giờ. Có addon thì nhãn nằm trong ô, không trùm addon.
+     */
+    floatingLabel = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Nhãn `top` (trên ô, mặc định) hay `left` (cùng hàng, bên trái). Nhãn nổi
+     * (`floatingLabel`) thắng — bật nó thì bỏ qua input này.
+     */
+    labelPosition = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * Độ rộng cột nhãn khi `labelPosition="left"` — độ dài CSS bất kỳ: `140px`,
+     * `10rem`, `30%`. Bỏ trống = 8rem. Các ô trong cùng form đặt cùng một số thì
+     * mép ô thẳng hàng.
+     */
+    labelWidth = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelWidth" }] : /* istanbul ignore next */ []));
+    labelLayout = computed(() => fieldLabelLayout(this.labelPosition(), this.floatingLabel()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelLayout" }] : /* istanbul ignore next */ []));
+    labelBeside = computed(() => this.labelLayout() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelBeside" }] : /* istanbul ignore next */ []));
+    /** Kiểu nhãn nổi — Figma Bordered / With background / Default. */
+    floatingVariant = input('outlined', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingVariant" }] : /* istanbul ignore next */ []));
     placeholder = input('00:00', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     format = input('24h', /* @ts-ignore */
@@ -13164,17 +14072,17 @@ class OlTimepicker {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlTimepicker, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlTimepicker, isStandalone: true, selector: "ol-timepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showAsterisk: { classPropertyName: "showAsterisk", publicName: "showAsterisk", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, showPresets: { classPropertyName: "showPresets", publicName: "showPresets", isSignal: true, isRequired: false, transformFunction: null }, addonType: { classPropertyName: "addonType", publicName: "addonType", isSignal: true, isRequired: false, transformFunction: null }, addonText: { classPropertyName: "addonText", publicName: "addonText", isSignal: true, isRequired: false, transformFunction: null }, addonIcon: { classPropertyName: "addonIcon", publicName: "addonIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", timeChange: "timeChange", timestampChange: "timestampChange", isoChange: "isoChange", timeObjectChange: "timeObjectChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block w-full" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlTimepicker, isStandalone: true, selector: "ol-timepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, floatingVariant: { classPropertyName: "floatingVariant", publicName: "floatingVariant", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showAsterisk: { classPropertyName: "showAsterisk", publicName: "showAsterisk", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, showPresets: { classPropertyName: "showPresets", publicName: "showPresets", isSignal: true, isRequired: false, transformFunction: null }, addonType: { classPropertyName: "addonType", publicName: "addonType", isSignal: true, isRequired: false, transformFunction: null }, addonText: { classPropertyName: "addonText", publicName: "addonText", isSignal: true, isRequired: false, transformFunction: null }, addonIcon: { classPropertyName: "addonIcon", publicName: "addonIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", timeChange: "timeChange", timestampChange: "timestampChange", isoChange: "isoChange", timeObjectChange: "timeObjectChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block w-full" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => OlTimepicker),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "hourAreaRef", first: true, predicate: ["hourArea"], descendants: true, isSignal: true }, { propertyName: "minuteAreaRef", first: true, predicate: ["minuteArea"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Bo g\u00F3c: Figma `ol-timepicker` (#1149:52243) d\u00F9ng 12px cho C\u1EA2 B\u1ED0N size\n     (rounded-md). Code tr\u01B0\u1EDBc \u0111\u00E2y d\u00F9ng rounded-lg 16px cho sm/base v\u00E0\n     rounded-md 24px cho lg \u2014 c\u00F9ng l\u1ED7i \u0111\u00E3 s\u1EEDa \u1EDF `ol-input`. -->\n<div class=\"relative w-full\">\n  @if (label()) {\n    <div class=\"flex items-center justify-between mb-1.5\">\n      <label\n        [id]=\"labelId()\"\n        [for]=\"inputId()\"\n        class=\"inline-flex items-center gap-1 text-sm font-medium text-heading\"\n      >\n        <span>{{ label() }}</span>\n        @if (required() || showAsterisk()) {\n          <span class=\"text-fg-danger font-bold\">*</span>\n        }\n      </label>\n    </div>\n  }\n\n  <!-- Trigger Box Container with Add-on Support -->\n  <div class=\"flex items-stretch w-full shadow-xs\">\n    @if (addonType() === 'left') {\n      <div\n        class=\"flex items-center justify-center px-3 bg-neutral-tertiary border border-default border-e-0 text-body shrink-0 rounded-s-md\"\n        [class.h-9]=\"size() === 'sm'\"\n        [class.h-10]=\"size() === 'base'\"\n        [class.h-12]=\"size() === 'lg'\"\n        [class.h-13]=\"size() === 'xl'\"\n      >\n        @if (addonText()) {\n          <span class=\"text-xs font-medium\">{{ addonText() }}</span>\n        } @else {\n          <ol-icon [name]=\"addonIcon() || 'clock-circle'\" size=\"sm\" />\n        }\n      </div>\n    }\n\n    <div\n      [id]=\"inputId()\"\n      role=\"combobox\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n      [attr.aria-expanded]=\"isOpen()\"\n      aria-haspopup=\"listbox\"\n      [attr.aria-invalid]=\"ariaInvalid()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.tabindex]=\"disabled() ? -1 : 0\"\n      (click)=\"toggleDropdown()\"\n      (keydown.enter)=\"toggleDropdown()\"\n      (keydown.space)=\"toggleDropdown(); $event.preventDefault()\"\n      class=\"relative flex items-center justify-between flex-1 w-full border cursor-pointer select-none focus:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n      [ngClass]=\"fieldTextClasses()\"\n      [class.border-default-medium]=\"!isOpen() && state() === 'default'\"\n      [class.rounded-md]=\"addonType() === 'none'\"\n      [class.rounded-e-md]=\"addonType() === 'left'\"\n      [class.rounded-s-md]=\"addonType() === 'right'\"\n      [class.h-9]=\"size() === 'sm'\"\n      [class.h-10]=\"size() === 'base'\"\n      [class.h-12]=\"size() === 'lg'\"\n      [class.h-13]=\"size() === 'xl'\"\n      [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled() && !readonly()\"\n      [class.border-brand]=\"isOpen() && state() === 'default'\"\n      [class.ring-2]=\"isOpen()\"\n      [class.ring-brand-subtle]=\"isOpen()\"\n      [class.border-danger-subtle]=\"state() === 'error' && !disabled()\"\n      [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n      [class.text-fg-danger-strong]=\"state() === 'error' && !disabled()\"\n      [class.border-success-subtle]=\"state() === 'success' && !disabled()\"\n      [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n      [class.text-fg-success-strong]=\"state() === 'success' && !disabled()\"\n      [class.bg-disabled]=\"disabled() || readonly()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n      [class.opacity-60]=\"disabled()\"\n    >\n      <div class=\"flex items-center gap-2.5 overflow-hidden min-w-0\">\n        @if (addonType() === 'none') {\n          <!-- Icon trong \u00F4 khi kh\u00F4ng c\u00F3 addon; `addonIcon` \u0111\u1ED5i \u0111\u01B0\u1EE3c. -->\n          <ol-icon [name]=\"addonIcon() || 'clock-circle'\" size=\"sm\" />\n        }\n        <span\n          class=\"truncate font-normal\"\n          [class.text-sm]=\"size() === 'sm' || size() === 'base'\"\n          [class.text-base]=\"size() === 'lg' || size() === 'xl'\"\n          [class.text-body-subtle]=\"!value() && state() !== 'error'\"\n          [class.text-body]=\"!value() && state() === 'error'\"\n          [class.text-heading]=\"!!value()\"\n        >\n          {{ value() || placeholder() }}\n        </span>\n      </div>\n\n      <div class=\"flex items-center gap-1.5 shrink-0 ms-1\">\n        @if (value() && !disabled() && !readonly()) {\n          <button\n            type=\"button\"\n            (click)=\"clear($event)\"\n            aria-label=\"Xo\u00E1 gi\u1EDD \u0111\u00E3 ch\u1ECDn\"\n            class=\"p-0.5 text-body-subtle hover:text-heading rounded-full hover:bg-neutral-tertiary-medium transition-colors cursor-pointer flex items-center justify-center\"\n          >\n            <ol-icon name=\"close\" size=\"xs\" />\n          </button>\n        }\n        <ol-icon name=\"chevron-down\" size=\"sm\" />\n      </div>\n    </div>\n\n    @if (addonType() === 'right') {\n      <div\n        class=\"flex items-center justify-center px-3 bg-neutral-tertiary border border-default border-s-0 text-body shrink-0 rounded-e-md\"\n        [class.h-9]=\"size() === 'sm'\"\n        [class.h-10]=\"size() === 'base'\"\n        [class.h-12]=\"size() === 'lg'\"\n        [class.h-13]=\"size() === 'xl'\"\n      >\n        @if (addonText()) {\n          <span class=\"text-xs font-medium\">{{ addonText() }}</span>\n        } @else {\n          <ol-icon [name]=\"addonIcon() || 'clock-circle'\" size=\"sm\" />\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Popover Panel -->\n  @if (isOpen()) {\n    <div\n      #panel\n      class=\"absolute z-dropdown bg-neutral-primary border border-default rounded-md shadow-lg p-3 min-w-70 select-none overflow-y-auto overflow-x-hidden max-h-[var(--ol-overlay-max-height,28rem)] animate-in fade-in zoom-in-95 duration-150\"\n    >\n      @if (showPresets()) {\n        <!-- Preset quick times -->\n        <div class=\"mb-3 pb-2 border-b border-default\">\n          <span class=\"text-xs font-semibold text-body-subtle block mb-1.5\">M\u1ED1c gi\u1EDD nhanh</span>\n          <div class=\"grid grid-cols-4 gap-1 max-h-24 overflow-y-auto overflow-x-hidden pr-1\">\n            @for (preset of presetTimes; track preset) {\n              <button\n                type=\"button\"\n                (click)=\"selectPreset(preset)\"\n                class=\"px-2 py-1 text-xs rounded-md text-center transition-colors font-medium\"\n                [class.hover:bg-neutral-tertiary]=\"value() !== preset\"\n                [class.bg-brand-softer]=\"value() === preset\"\n                [class.text-fg-brand]=\"value() === preset\"\n                [class.text-body]=\"value() !== preset\"\n              >\n                {{ preset }}\n              </button>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Columns Time Picker -->\n      <div class=\"flex items-center justify-center gap-2 py-2\">\n        <!-- Hour Column -->\n        <div class=\"flex flex-col items-center\">\n          <span class=\"text-xs font-semibold text-body-subtle mb-1\">Gi\u1EDD</span>\n          <div\n            class=\"relative group/col w-16 h-44 rounded-lg overflow-hidden border border-default\"\n          >\n            <!-- Top Fade Gradient -->\n            <div\n              class=\"pointer-events-none absolute inset-x-0 top-0 h-6 bg-gradient-to-b from-neutral-primary to-transparent z-10\"\n            ></div>\n\n            <ol-scroll-area\n              #hourArea\n              scrollbar=\"hidden\"\n              [smooth]=\"true\"\n              innerClass=\"p-1 py-4 space-y-1\"\n            >\n              @if (format() === '12h') {\n                @for (h of hours12; track h) {\n                  <button\n                    type=\"button\"\n                    (click)=\"selectHour(h)\"\n                    class=\"w-full py-1 text-center text-sm rounded-md transition-all font-medium\"\n                    [class.bg-brand]=\"selectedHour() === h\"\n                    [class.text-white]=\"selectedHour() === h\"\n                    [class.font-semibold]=\"selectedHour() === h\"\n                    [class.scale-105]=\"selectedHour() === h\"\n                    [class.shadow-xs]=\"selectedHour() === h\"\n                    [class.hover:bg-neutral-tertiary]=\"selectedHour() !== h\"\n                    [class.text-heading]=\"selectedHour() !== h\"\n                  >\n                    {{ pad(h) }}\n                  </button>\n                }\n              } @else {\n                @for (h of hours24; track h) {\n                  <button\n                    type=\"button\"\n                    (click)=\"selectHour(h)\"\n                    class=\"w-full py-1 text-center text-sm rounded-md transition-all font-medium\"\n                    [class.bg-brand]=\"selectedHour() === h\"\n                    [class.text-white]=\"selectedHour() === h\"\n                    [class.font-semibold]=\"selectedHour() === h\"\n                    [class.scale-105]=\"selectedHour() === h\"\n                    [class.shadow-xs]=\"selectedHour() === h\"\n                    [class.hover:bg-neutral-tertiary]=\"selectedHour() !== h\"\n                    [class.text-heading]=\"selectedHour() !== h\"\n                  >\n                    {{ pad(h) }}\n                  </button>\n                }\n              }\n            </ol-scroll-area>\n\n            <!-- Bottom Fade Gradient -->\n            <div\n              class=\"pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-neutral-primary to-transparent z-10\"\n            ></div>\n          </div>\n        </div>\n\n        <span class=\"text-lg font-bold text-heading mt-4\">:</span>\n\n        <!-- Minute Column -->\n        <div class=\"flex flex-col items-center\">\n          <span class=\"text-xs font-semibold text-body-subtle mb-1\">Ph\u00FAt</span>\n          <div\n            class=\"relative group/col w-16 h-44 rounded-lg overflow-hidden border border-default\"\n          >\n            <!-- Top Fade Gradient -->\n            <div\n              class=\"pointer-events-none absolute inset-x-0 top-0 h-6 bg-gradient-to-b from-neutral-primary to-transparent z-10\"\n            ></div>\n\n            <ol-scroll-area\n              #minuteArea\n              scrollbar=\"hidden\"\n              [smooth]=\"true\"\n              innerClass=\"p-1 py-4 space-y-1\"\n            >\n              @for (m of minutes; track m) {\n                @if (m % minuteStep() === 0) {\n                  <button\n                    type=\"button\"\n                    (click)=\"selectMinute(m)\"\n                    class=\"w-full py-1 text-center text-sm rounded-md transition-all font-medium\"\n                    [class.bg-brand]=\"selectedMinute() === m\"\n                    [class.text-white]=\"selectedMinute() === m\"\n                    [class.font-semibold]=\"selectedMinute() === m\"\n                    [class.scale-105]=\"selectedMinute() === m\"\n                    [class.shadow-xs]=\"selectedMinute() === m\"\n                    [class.hover:bg-neutral-tertiary]=\"selectedMinute() !== m\"\n                    [class.text-heading]=\"selectedMinute() !== m\"\n                  >\n                    {{ pad(m) }}\n                  </button>\n                }\n              }\n            </ol-scroll-area>\n\n            <!-- Bottom Fade Gradient -->\n            <div\n              class=\"pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-neutral-primary to-transparent z-10\"\n            ></div>\n          </div>\n        </div>\n\n        @if (format() === '12h') {\n          <!-- AM/PM Column -->\n          <div class=\"flex flex-col items-center\">\n            <span class=\"text-xs font-semibold text-body-subtle mb-1\">Bu\u1ED5i</span>\n            <div\n              class=\"h-44 w-16 flex flex-col justify-center gap-2 border border-default rounded-lg p-1\"\n            >\n              <button\n                type=\"button\"\n                (click)=\"selectPeriod('AM')\"\n                class=\"w-full py-2 text-center text-xs rounded-md transition-colors font-semibold\"\n                [class.bg-brand]=\"selectedPeriod() === 'AM'\"\n                [class.text-white]=\"selectedPeriod() === 'AM'\"\n                [class.hover:bg-neutral-tertiary]=\"selectedPeriod() !== 'AM'\"\n                [class.text-heading]=\"selectedPeriod() !== 'AM'\"\n              >\n                AM\n              </button>\n              <button\n                type=\"button\"\n                (click)=\"selectPeriod('PM')\"\n                class=\"w-full py-2 text-center text-xs rounded-md transition-colors font-semibold\"\n                [class.bg-brand]=\"selectedPeriod() === 'PM'\"\n                [class.text-white]=\"selectedPeriod() === 'PM'\"\n                [class.hover:bg-neutral-tertiary]=\"selectedPeriod() !== 'PM'\"\n                [class.text-heading]=\"selectedPeriod() !== 'PM'\"\n              >\n                PM\n              </button>\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- Action Footer -->\n      <div class=\"flex items-center justify-between pt-3 mt-2 border-t border-default\">\n        <button\n          type=\"button\"\n          (click)=\"cancel()\"\n          class=\"px-3 py-1.5 text-xs font-medium text-body hover:text-heading hover:bg-neutral-tertiary rounded-lg transition-colors\"\n        >\n          H\u1EE7y\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"apply()\"\n          class=\"px-3 py-1.5 text-xs font-medium text-white bg-brand hover:bg-brand-strong rounded-lg shadow-xs transition-colors\"\n        >\n          \u00C1p d\u1EE5ng\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Helper Text & Error Text -->\n  @if (state() === 'error' && errorText()) {\n    <p class=\"mt-1.5 text-xs text-fg-danger\">{{ errorText() }}</p>\n  } @else if (helperText()) {\n    <p class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: OlScrollArea, selector: "ol-scroll-area", inputs: ["scrollbar", "axis", "smooth", "innerClass"] }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "hourAreaRef", first: true, predicate: ["hourArea"], descendants: true, isSignal: true }, { propertyName: "minuteAreaRef", first: true, predicate: ["minuteArea"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Bo g\u00F3c: Figma `ol-timepicker` (#1149:52243) d\u00F9ng 12px cho C\u1EA2 B\u1ED0N size\n     (rounded-md). Code tr\u01B0\u1EDBc \u0111\u00E2y d\u00F9ng rounded-lg 16px cho sm/base v\u00E0\n     rounded-md 24px cho lg \u2014 c\u00F9ng l\u1ED7i \u0111\u00E3 s\u1EEDa \u1EDF `ol-input`. -->\n<div class=\"relative w-full\" [class]=\"labelLayout()\" [style.--ol-label-w]=\"labelWidth() || null\">\n  @if (label() && !floatingLabel()) {\n    <ol-field-label\n      [beside]=\"labelBeside()\"\n      [size]=\"size()\"\n      [text]=\"label()\"\n      [forId]=\"inputId()\"\n      [labelId]=\"labelId()\"\n      [required]=\"required() || showAsterisk()\"\n    />\n  }\n\n  <!-- Trigger Box Container with Add-on Support -->\n  <!-- Nh\u00E3n n\u1ED5i ki\u1EC3u filled/standard th\u00EAm h\u00E0ng 20px ph\u00EDa tr\u00EAn khung: addon\n       ph\u1EA3i b\u00E1m \u0110\u00C1Y cho th\u1EB3ng h\u00E0ng v\u1EDBi khung nh\u1EADp, kh\u00F4ng b\u00E1m h\u00E0ng nh\u00E3n. -->\n  <div\n    class=\"flex w-full shadow-xs\"\n    [class.items-stretch]=\"!floatingLabel()\"\n    [class.items-end]=\"floatingLabel()\"\n  >\n    @if (addonType() === 'left') {\n      <div\n        class=\"flex items-center justify-center px-3 bg-neutral-tertiary border border-default border-e-0 text-body shrink-0 rounded-s-md\"\n        [class.h-9]=\"size() === 'sm'\"\n        [class.h-10]=\"size() === 'base'\"\n        [class.h-12]=\"size() === 'lg'\"\n        [class.h-13]=\"size() === 'xl'\"\n      >\n        @if (addonText()) {\n          <span class=\"text-xs font-medium\">{{ addonText() }}</span>\n        } @else {\n          <ol-icon [name]=\"addonIcon() || 'clock-circle'\" size=\"sm\" />\n        }\n      </div>\n    }\n\n    <ol-field-frame\n      class=\"min-w-0 flex-1\"\n      [enabled]=\"floatingLabel()\"\n      [label]=\"label()\"\n      [forId]=\"inputId()\"\n      [labelId]=\"labelId()\"\n      [variant]=\"floatingVariant()\"\n      [size]=\"size()\"\n      [state]=\"state()\"\n      [disabled]=\"disabled()\"\n      [required]=\"required() || showAsterisk()\"\n      [hasValue]=\"!!value()\"\n      [open]=\"isOpen()\"\n    >\n      <div\n        [id]=\"inputId()\"\n        role=\"combobox\"\n        [attr.aria-labelledby]=\"label() ? labelId() : null\"\n        [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n        [attr.aria-expanded]=\"isOpen()\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [attr.tabindex]=\"disabled() ? -1 : 0\"\n        (click)=\"toggleDropdown()\"\n        (keydown.enter)=\"toggleDropdown()\"\n        (keydown.space)=\"toggleDropdown(); $event.preventDefault()\"\n        class=\"ol-field-box relative flex items-center justify-between flex-1 w-full border cursor-pointer select-none focus:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n        [ngClass]=\"fieldTextClasses()\"\n        [class.border-default-medium]=\"!isOpen() && state() === 'default'\"\n        [class.rounded-md]=\"addonType() === 'none'\"\n        [class.rounded-e-md]=\"addonType() === 'left'\"\n        [class.rounded-s-md]=\"addonType() === 'right'\"\n        [class.h-9]=\"size() === 'sm'\"\n        [class.h-10]=\"size() === 'base'\"\n        [class.h-12]=\"size() === 'lg'\"\n        [class.h-13]=\"size() === 'xl'\"\n        [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled() && !readonly()\"\n        [class.border-brand]=\"isOpen() && state() === 'default'\"\n        [class.ring-2]=\"isOpen()\"\n        [class.ring-brand-subtle]=\"isOpen()\"\n        [class.border-danger-subtle]=\"state() === 'error' && !disabled()\"\n        [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n        [class.text-fg-danger-strong]=\"state() === 'error' && !disabled()\"\n        [class.border-success-subtle]=\"state() === 'success' && !disabled()\"\n        [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n        [class.text-fg-success-strong]=\"state() === 'success' && !disabled()\"\n        [class.bg-disabled]=\"disabled() || readonly()\"\n        [class.cursor-not-allowed]=\"disabled()\"\n        [class.opacity-60]=\"disabled()\"\n      >\n        <div class=\"flex items-center gap-2 overflow-hidden min-w-0\">\n          @if (addonType() === 'none') {\n            <!-- Icon trong \u00F4 khi kh\u00F4ng c\u00F3 addon; `addonIcon` \u0111\u1ED5i \u0111\u01B0\u1EE3c. -->\n            <ol-icon [name]=\"addonIcon() || 'clock-circle'\" size=\"sm\" />\n          }\n          <span\n            class=\"truncate font-normal\"\n            data-ol-field-text\n            [attr.data-ol-field-placeholder]=\"value() ? null : ''\"\n            [class.text-sm]=\"size() === 'sm' || size() === 'base'\"\n            [class.text-base]=\"size() === 'lg' || size() === 'xl'\"\n            [class.text-body-subtle]=\"!value() && state() !== 'error'\"\n            [class.text-body]=\"!value() && state() === 'error'\"\n            [class.text-heading]=\"!!value()\"\n          >\n            {{ value() || placeholder() }}\n          </span>\n        </div>\n\n        <div class=\"flex items-center gap-1.5 shrink-0 ms-1\">\n          @if (value() && !disabled() && !readonly()) {\n            <button\n              type=\"button\"\n              (click)=\"clear($event)\"\n              aria-label=\"Xo\u00E1 gi\u1EDD \u0111\u00E3 ch\u1ECDn\"\n              class=\"p-0.5 text-body-subtle hover:text-heading rounded-full hover:bg-neutral-tertiary-medium transition-colors cursor-pointer flex items-center justify-center\"\n            >\n              <ol-icon name=\"close\" size=\"xs\" />\n            </button>\n          }\n          <ol-icon name=\"chevron-down\" size=\"sm\" />\n        </div>\n      </div>\n    </ol-field-frame>\n\n    @if (addonType() === 'right') {\n      <div\n        class=\"flex items-center justify-center px-3 bg-neutral-tertiary border border-default border-s-0 text-body shrink-0 rounded-e-md\"\n        [class.h-9]=\"size() === 'sm'\"\n        [class.h-10]=\"size() === 'base'\"\n        [class.h-12]=\"size() === 'lg'\"\n        [class.h-13]=\"size() === 'xl'\"\n      >\n        @if (addonText()) {\n          <span class=\"text-xs font-medium\">{{ addonText() }}</span>\n        } @else {\n          <ol-icon [name]=\"addonIcon() || 'clock-circle'\" size=\"sm\" />\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Popover Panel -->\n  @if (isOpen()) {\n    <div\n      #panel\n      class=\"absolute z-dropdown bg-neutral-primary border border-default rounded-md shadow-lg p-3 min-w-70 select-none overflow-y-auto overflow-x-hidden max-h-[var(--ol-overlay-max-height,28rem)] animate-in fade-in zoom-in-95 duration-150\"\n    >\n      @if (showPresets()) {\n        <!-- Preset quick times -->\n        <div class=\"mb-3 pb-2 border-b border-default\">\n          <span class=\"text-xs font-semibold text-body-subtle block mb-1.5\">M\u1ED1c gi\u1EDD nhanh</span>\n          <div class=\"grid grid-cols-4 gap-1 max-h-24 overflow-y-auto overflow-x-hidden pr-1\">\n            @for (preset of presetTimes; track preset) {\n              <button\n                type=\"button\"\n                (click)=\"selectPreset(preset)\"\n                class=\"px-2 py-1 text-xs rounded-md text-center transition-colors font-medium\"\n                [class.hover:bg-neutral-tertiary]=\"value() !== preset\"\n                [class.bg-brand-softer]=\"value() === preset\"\n                [class.text-fg-brand]=\"value() === preset\"\n                [class.text-body]=\"value() !== preset\"\n              >\n                {{ preset }}\n              </button>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Columns Time Picker -->\n      <div class=\"flex items-center justify-center gap-2 py-2\">\n        <!-- Hour Column -->\n        <div class=\"flex flex-col items-center\">\n          <span class=\"text-xs font-semibold text-body-subtle mb-1\">Gi\u1EDD</span>\n          <div\n            class=\"relative group/col w-16 h-44 rounded-lg overflow-hidden border border-default\"\n          >\n            <!-- Top Fade Gradient -->\n            <div\n              class=\"pointer-events-none absolute inset-x-0 top-0 h-6 bg-gradient-to-b from-neutral-primary to-transparent z-10\"\n            ></div>\n\n            <ol-scroll-area\n              #hourArea\n              scrollbar=\"hidden\"\n              [smooth]=\"true\"\n              innerClass=\"p-1 py-4 space-y-1\"\n            >\n              @if (format() === '12h') {\n                @for (h of hours12; track h) {\n                  <button\n                    type=\"button\"\n                    (click)=\"selectHour(h)\"\n                    class=\"w-full py-1 text-center text-sm rounded-md transition-all font-medium\"\n                    [class.bg-brand]=\"selectedHour() === h\"\n                    [class.text-white]=\"selectedHour() === h\"\n                    [class.font-semibold]=\"selectedHour() === h\"\n                    [class.scale-105]=\"selectedHour() === h\"\n                    [class.shadow-xs]=\"selectedHour() === h\"\n                    [class.hover:bg-neutral-tertiary]=\"selectedHour() !== h\"\n                    [class.text-heading]=\"selectedHour() !== h\"\n                  >\n                    {{ pad(h) }}\n                  </button>\n                }\n              } @else {\n                @for (h of hours24; track h) {\n                  <button\n                    type=\"button\"\n                    (click)=\"selectHour(h)\"\n                    class=\"w-full py-1 text-center text-sm rounded-md transition-all font-medium\"\n                    [class.bg-brand]=\"selectedHour() === h\"\n                    [class.text-white]=\"selectedHour() === h\"\n                    [class.font-semibold]=\"selectedHour() === h\"\n                    [class.scale-105]=\"selectedHour() === h\"\n                    [class.shadow-xs]=\"selectedHour() === h\"\n                    [class.hover:bg-neutral-tertiary]=\"selectedHour() !== h\"\n                    [class.text-heading]=\"selectedHour() !== h\"\n                  >\n                    {{ pad(h) }}\n                  </button>\n                }\n              }\n            </ol-scroll-area>\n\n            <!-- Bottom Fade Gradient -->\n            <div\n              class=\"pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-neutral-primary to-transparent z-10\"\n            ></div>\n          </div>\n        </div>\n\n        <span class=\"text-lg font-bold text-heading mt-4\">:</span>\n\n        <!-- Minute Column -->\n        <div class=\"flex flex-col items-center\">\n          <span class=\"text-xs font-semibold text-body-subtle mb-1\">Ph\u00FAt</span>\n          <div\n            class=\"relative group/col w-16 h-44 rounded-lg overflow-hidden border border-default\"\n          >\n            <!-- Top Fade Gradient -->\n            <div\n              class=\"pointer-events-none absolute inset-x-0 top-0 h-6 bg-gradient-to-b from-neutral-primary to-transparent z-10\"\n            ></div>\n\n            <ol-scroll-area\n              #minuteArea\n              scrollbar=\"hidden\"\n              [smooth]=\"true\"\n              innerClass=\"p-1 py-4 space-y-1\"\n            >\n              @for (m of minutes; track m) {\n                @if (m % minuteStep() === 0) {\n                  <button\n                    type=\"button\"\n                    (click)=\"selectMinute(m)\"\n                    class=\"w-full py-1 text-center text-sm rounded-md transition-all font-medium\"\n                    [class.bg-brand]=\"selectedMinute() === m\"\n                    [class.text-white]=\"selectedMinute() === m\"\n                    [class.font-semibold]=\"selectedMinute() === m\"\n                    [class.scale-105]=\"selectedMinute() === m\"\n                    [class.shadow-xs]=\"selectedMinute() === m\"\n                    [class.hover:bg-neutral-tertiary]=\"selectedMinute() !== m\"\n                    [class.text-heading]=\"selectedMinute() !== m\"\n                  >\n                    {{ pad(m) }}\n                  </button>\n                }\n              }\n            </ol-scroll-area>\n\n            <!-- Bottom Fade Gradient -->\n            <div\n              class=\"pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-neutral-primary to-transparent z-10\"\n            ></div>\n          </div>\n        </div>\n\n        @if (format() === '12h') {\n          <!-- AM/PM Column -->\n          <div class=\"flex flex-col items-center\">\n            <span class=\"text-xs font-semibold text-body-subtle mb-1\">Bu\u1ED5i</span>\n            <div\n              class=\"h-44 w-16 flex flex-col justify-center gap-2 border border-default rounded-lg p-1\"\n            >\n              <button\n                type=\"button\"\n                (click)=\"selectPeriod('AM')\"\n                class=\"w-full py-2 text-center text-xs rounded-md transition-colors font-semibold\"\n                [class.bg-brand]=\"selectedPeriod() === 'AM'\"\n                [class.text-white]=\"selectedPeriod() === 'AM'\"\n                [class.hover:bg-neutral-tertiary]=\"selectedPeriod() !== 'AM'\"\n                [class.text-heading]=\"selectedPeriod() !== 'AM'\"\n              >\n                AM\n              </button>\n              <button\n                type=\"button\"\n                (click)=\"selectPeriod('PM')\"\n                class=\"w-full py-2 text-center text-xs rounded-md transition-colors font-semibold\"\n                [class.bg-brand]=\"selectedPeriod() === 'PM'\"\n                [class.text-white]=\"selectedPeriod() === 'PM'\"\n                [class.hover:bg-neutral-tertiary]=\"selectedPeriod() !== 'PM'\"\n                [class.text-heading]=\"selectedPeriod() !== 'PM'\"\n              >\n                PM\n              </button>\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- Action Footer -->\n      <div class=\"flex items-center justify-between pt-3 mt-2 border-t border-default\">\n        <button\n          type=\"button\"\n          (click)=\"cancel()\"\n          class=\"px-3 py-1.5 text-xs font-medium text-body hover:text-heading hover:bg-neutral-tertiary rounded-lg transition-colors\"\n        >\n          H\u1EE7y\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"apply()\"\n          class=\"px-3 py-1.5 text-xs font-medium text-white bg-brand hover:bg-brand-strong rounded-lg shadow-xs transition-colors\"\n        >\n          \u00C1p d\u1EE5ng\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Helper Text & Error Text -->\n  @if (state() === 'error' && errorText()) {\n    <p class=\"mt-1.5 text-xs text-fg-danger\">{{ errorText() }}</p>\n  } @else if (helperText()) {\n    <p class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: OlScrollArea, selector: "ol-scroll-area", inputs: ["scrollbar", "axis", "smooth", "innerClass"] }, { kind: "component", type: OlIcon, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }, { kind: "component", type: OlFieldFrame, selector: "ol-field-frame", inputs: ["enabled", "label", "forId", "labelId", "variant", "size", "state", "disabled", "required", "hasValue", "open", "floatStart"] }, { kind: "component", type: OlFieldLabel, selector: "ol-field-label", inputs: ["text", "forId", "labelId", "required", "helpIcon", "helpTooltip", "flush", "beside", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlTimepicker, decorators: [{
             type: Component,
-            args: [{ selector: 'ol-timepicker', standalone: true, imports: [CommonModule, FormsModule, OlScrollArea, OlIcon], host: {
+            args: [{ selector: 'ol-timepicker', standalone: true, imports: [CommonModule, FormsModule, OlScrollArea, OlIcon, OlFieldFrame, OlFieldLabel], 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
@@ -13186,8 +14094,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                             useExisting: forwardRef(() => OlTimepicker),
                             multi: true,
                         },
-                    ], template: "<!-- Bo g\u00F3c: Figma `ol-timepicker` (#1149:52243) d\u00F9ng 12px cho C\u1EA2 B\u1ED0N size\n     (rounded-md). Code tr\u01B0\u1EDBc \u0111\u00E2y d\u00F9ng rounded-lg 16px cho sm/base v\u00E0\n     rounded-md 24px cho lg \u2014 c\u00F9ng l\u1ED7i \u0111\u00E3 s\u1EEDa \u1EDF `ol-input`. -->\n<div class=\"relative w-full\">\n  @if (label()) {\n    <div class=\"flex items-center justify-between mb-1.5\">\n      <label\n        [id]=\"labelId()\"\n        [for]=\"inputId()\"\n        class=\"inline-flex items-center gap-1 text-sm font-medium text-heading\"\n      >\n        <span>{{ label() }}</span>\n        @if (required() || showAsterisk()) {\n          <span class=\"text-fg-danger font-bold\">*</span>\n        }\n      </label>\n    </div>\n  }\n\n  <!-- Trigger Box Container with Add-on Support -->\n  <div class=\"flex items-stretch w-full shadow-xs\">\n    @if (addonType() === 'left') {\n      <div\n        class=\"flex items-center justify-center px-3 bg-neutral-tertiary border border-default border-e-0 text-body shrink-0 rounded-s-md\"\n        [class.h-9]=\"size() === 'sm'\"\n        [class.h-10]=\"size() === 'base'\"\n        [class.h-12]=\"size() === 'lg'\"\n        [class.h-13]=\"size() === 'xl'\"\n      >\n        @if (addonText()) {\n          <span class=\"text-xs font-medium\">{{ addonText() }}</span>\n        } @else {\n          <ol-icon [name]=\"addonIcon() || 'clock-circle'\" size=\"sm\" />\n        }\n      </div>\n    }\n\n    <div\n      [id]=\"inputId()\"\n      role=\"combobox\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n      [attr.aria-expanded]=\"isOpen()\"\n      aria-haspopup=\"listbox\"\n      [attr.aria-invalid]=\"ariaInvalid()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.tabindex]=\"disabled() ? -1 : 0\"\n      (click)=\"toggleDropdown()\"\n      (keydown.enter)=\"toggleDropdown()\"\n      (keydown.space)=\"toggleDropdown(); $event.preventDefault()\"\n      class=\"relative flex items-center justify-between flex-1 w-full border cursor-pointer select-none focus:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n      [ngClass]=\"fieldTextClasses()\"\n      [class.border-default-medium]=\"!isOpen() && state() === 'default'\"\n      [class.rounded-md]=\"addonType() === 'none'\"\n      [class.rounded-e-md]=\"addonType() === 'left'\"\n      [class.rounded-s-md]=\"addonType() === 'right'\"\n      [class.h-9]=\"size() === 'sm'\"\n      [class.h-10]=\"size() === 'base'\"\n      [class.h-12]=\"size() === 'lg'\"\n      [class.h-13]=\"size() === 'xl'\"\n      [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled() && !readonly()\"\n      [class.border-brand]=\"isOpen() && state() === 'default'\"\n      [class.ring-2]=\"isOpen()\"\n      [class.ring-brand-subtle]=\"isOpen()\"\n      [class.border-danger-subtle]=\"state() === 'error' && !disabled()\"\n      [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n      [class.text-fg-danger-strong]=\"state() === 'error' && !disabled()\"\n      [class.border-success-subtle]=\"state() === 'success' && !disabled()\"\n      [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n      [class.text-fg-success-strong]=\"state() === 'success' && !disabled()\"\n      [class.bg-disabled]=\"disabled() || readonly()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n      [class.opacity-60]=\"disabled()\"\n    >\n      <div class=\"flex items-center gap-2.5 overflow-hidden min-w-0\">\n        @if (addonType() === 'none') {\n          <!-- Icon trong \u00F4 khi kh\u00F4ng c\u00F3 addon; `addonIcon` \u0111\u1ED5i \u0111\u01B0\u1EE3c. -->\n          <ol-icon [name]=\"addonIcon() || 'clock-circle'\" size=\"sm\" />\n        }\n        <span\n          class=\"truncate font-normal\"\n          [class.text-sm]=\"size() === 'sm' || size() === 'base'\"\n          [class.text-base]=\"size() === 'lg' || size() === 'xl'\"\n          [class.text-body-subtle]=\"!value() && state() !== 'error'\"\n          [class.text-body]=\"!value() && state() === 'error'\"\n          [class.text-heading]=\"!!value()\"\n        >\n          {{ value() || placeholder() }}\n        </span>\n      </div>\n\n      <div class=\"flex items-center gap-1.5 shrink-0 ms-1\">\n        @if (value() && !disabled() && !readonly()) {\n          <button\n            type=\"button\"\n            (click)=\"clear($event)\"\n            aria-label=\"Xo\u00E1 gi\u1EDD \u0111\u00E3 ch\u1ECDn\"\n            class=\"p-0.5 text-body-subtle hover:text-heading rounded-full hover:bg-neutral-tertiary-medium transition-colors cursor-pointer flex items-center justify-center\"\n          >\n            <ol-icon name=\"close\" size=\"xs\" />\n          </button>\n        }\n        <ol-icon name=\"chevron-down\" size=\"sm\" />\n      </div>\n    </div>\n\n    @if (addonType() === 'right') {\n      <div\n        class=\"flex items-center justify-center px-3 bg-neutral-tertiary border border-default border-s-0 text-body shrink-0 rounded-e-md\"\n        [class.h-9]=\"size() === 'sm'\"\n        [class.h-10]=\"size() === 'base'\"\n        [class.h-12]=\"size() === 'lg'\"\n        [class.h-13]=\"size() === 'xl'\"\n      >\n        @if (addonText()) {\n          <span class=\"text-xs font-medium\">{{ addonText() }}</span>\n        } @else {\n          <ol-icon [name]=\"addonIcon() || 'clock-circle'\" size=\"sm\" />\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Popover Panel -->\n  @if (isOpen()) {\n    <div\n      #panel\n      class=\"absolute z-dropdown bg-neutral-primary border border-default rounded-md shadow-lg p-3 min-w-70 select-none overflow-y-auto overflow-x-hidden max-h-[var(--ol-overlay-max-height,28rem)] animate-in fade-in zoom-in-95 duration-150\"\n    >\n      @if (showPresets()) {\n        <!-- Preset quick times -->\n        <div class=\"mb-3 pb-2 border-b border-default\">\n          <span class=\"text-xs font-semibold text-body-subtle block mb-1.5\">M\u1ED1c gi\u1EDD nhanh</span>\n          <div class=\"grid grid-cols-4 gap-1 max-h-24 overflow-y-auto overflow-x-hidden pr-1\">\n            @for (preset of presetTimes; track preset) {\n              <button\n                type=\"button\"\n                (click)=\"selectPreset(preset)\"\n                class=\"px-2 py-1 text-xs rounded-md text-center transition-colors font-medium\"\n                [class.hover:bg-neutral-tertiary]=\"value() !== preset\"\n                [class.bg-brand-softer]=\"value() === preset\"\n                [class.text-fg-brand]=\"value() === preset\"\n                [class.text-body]=\"value() !== preset\"\n              >\n                {{ preset }}\n              </button>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Columns Time Picker -->\n      <div class=\"flex items-center justify-center gap-2 py-2\">\n        <!-- Hour Column -->\n        <div class=\"flex flex-col items-center\">\n          <span class=\"text-xs font-semibold text-body-subtle mb-1\">Gi\u1EDD</span>\n          <div\n            class=\"relative group/col w-16 h-44 rounded-lg overflow-hidden border border-default\"\n          >\n            <!-- Top Fade Gradient -->\n            <div\n              class=\"pointer-events-none absolute inset-x-0 top-0 h-6 bg-gradient-to-b from-neutral-primary to-transparent z-10\"\n            ></div>\n\n            <ol-scroll-area\n              #hourArea\n              scrollbar=\"hidden\"\n              [smooth]=\"true\"\n              innerClass=\"p-1 py-4 space-y-1\"\n            >\n              @if (format() === '12h') {\n                @for (h of hours12; track h) {\n                  <button\n                    type=\"button\"\n                    (click)=\"selectHour(h)\"\n                    class=\"w-full py-1 text-center text-sm rounded-md transition-all font-medium\"\n                    [class.bg-brand]=\"selectedHour() === h\"\n                    [class.text-white]=\"selectedHour() === h\"\n                    [class.font-semibold]=\"selectedHour() === h\"\n                    [class.scale-105]=\"selectedHour() === h\"\n                    [class.shadow-xs]=\"selectedHour() === h\"\n                    [class.hover:bg-neutral-tertiary]=\"selectedHour() !== h\"\n                    [class.text-heading]=\"selectedHour() !== h\"\n                  >\n                    {{ pad(h) }}\n                  </button>\n                }\n              } @else {\n                @for (h of hours24; track h) {\n                  <button\n                    type=\"button\"\n                    (click)=\"selectHour(h)\"\n                    class=\"w-full py-1 text-center text-sm rounded-md transition-all font-medium\"\n                    [class.bg-brand]=\"selectedHour() === h\"\n                    [class.text-white]=\"selectedHour() === h\"\n                    [class.font-semibold]=\"selectedHour() === h\"\n                    [class.scale-105]=\"selectedHour() === h\"\n                    [class.shadow-xs]=\"selectedHour() === h\"\n                    [class.hover:bg-neutral-tertiary]=\"selectedHour() !== h\"\n                    [class.text-heading]=\"selectedHour() !== h\"\n                  >\n                    {{ pad(h) }}\n                  </button>\n                }\n              }\n            </ol-scroll-area>\n\n            <!-- Bottom Fade Gradient -->\n            <div\n              class=\"pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-neutral-primary to-transparent z-10\"\n            ></div>\n          </div>\n        </div>\n\n        <span class=\"text-lg font-bold text-heading mt-4\">:</span>\n\n        <!-- Minute Column -->\n        <div class=\"flex flex-col items-center\">\n          <span class=\"text-xs font-semibold text-body-subtle mb-1\">Ph\u00FAt</span>\n          <div\n            class=\"relative group/col w-16 h-44 rounded-lg overflow-hidden border border-default\"\n          >\n            <!-- Top Fade Gradient -->\n            <div\n              class=\"pointer-events-none absolute inset-x-0 top-0 h-6 bg-gradient-to-b from-neutral-primary to-transparent z-10\"\n            ></div>\n\n            <ol-scroll-area\n              #minuteArea\n              scrollbar=\"hidden\"\n              [smooth]=\"true\"\n              innerClass=\"p-1 py-4 space-y-1\"\n            >\n              @for (m of minutes; track m) {\n                @if (m % minuteStep() === 0) {\n                  <button\n                    type=\"button\"\n                    (click)=\"selectMinute(m)\"\n                    class=\"w-full py-1 text-center text-sm rounded-md transition-all font-medium\"\n                    [class.bg-brand]=\"selectedMinute() === m\"\n                    [class.text-white]=\"selectedMinute() === m\"\n                    [class.font-semibold]=\"selectedMinute() === m\"\n                    [class.scale-105]=\"selectedMinute() === m\"\n                    [class.shadow-xs]=\"selectedMinute() === m\"\n                    [class.hover:bg-neutral-tertiary]=\"selectedMinute() !== m\"\n                    [class.text-heading]=\"selectedMinute() !== m\"\n                  >\n                    {{ pad(m) }}\n                  </button>\n                }\n              }\n            </ol-scroll-area>\n\n            <!-- Bottom Fade Gradient -->\n            <div\n              class=\"pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-neutral-primary to-transparent z-10\"\n            ></div>\n          </div>\n        </div>\n\n        @if (format() === '12h') {\n          <!-- AM/PM Column -->\n          <div class=\"flex flex-col items-center\">\n            <span class=\"text-xs font-semibold text-body-subtle mb-1\">Bu\u1ED5i</span>\n            <div\n              class=\"h-44 w-16 flex flex-col justify-center gap-2 border border-default rounded-lg p-1\"\n            >\n              <button\n                type=\"button\"\n                (click)=\"selectPeriod('AM')\"\n                class=\"w-full py-2 text-center text-xs rounded-md transition-colors font-semibold\"\n                [class.bg-brand]=\"selectedPeriod() === 'AM'\"\n                [class.text-white]=\"selectedPeriod() === 'AM'\"\n                [class.hover:bg-neutral-tertiary]=\"selectedPeriod() !== 'AM'\"\n                [class.text-heading]=\"selectedPeriod() !== 'AM'\"\n              >\n                AM\n              </button>\n              <button\n                type=\"button\"\n                (click)=\"selectPeriod('PM')\"\n                class=\"w-full py-2 text-center text-xs rounded-md transition-colors font-semibold\"\n                [class.bg-brand]=\"selectedPeriod() === 'PM'\"\n                [class.text-white]=\"selectedPeriod() === 'PM'\"\n                [class.hover:bg-neutral-tertiary]=\"selectedPeriod() !== 'PM'\"\n                [class.text-heading]=\"selectedPeriod() !== 'PM'\"\n              >\n                PM\n              </button>\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- Action Footer -->\n      <div class=\"flex items-center justify-between pt-3 mt-2 border-t border-default\">\n        <button\n          type=\"button\"\n          (click)=\"cancel()\"\n          class=\"px-3 py-1.5 text-xs font-medium text-body hover:text-heading hover:bg-neutral-tertiary rounded-lg transition-colors\"\n        >\n          H\u1EE7y\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"apply()\"\n          class=\"px-3 py-1.5 text-xs font-medium text-white bg-brand hover:bg-brand-strong rounded-lg shadow-xs transition-colors\"\n        >\n          \u00C1p d\u1EE5ng\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Helper Text & Error Text -->\n  @if (state() === 'error' && errorText()) {\n    <p class=\"mt-1.5 text-xs text-fg-danger\">{{ errorText() }}</p>\n  } @else if (helperText()) {\n    <p class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAsterisk", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], showPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPresets", required: false }] }], addonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "addonType", required: false }] }], addonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "addonText", required: false }] }], addonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "addonIcon", required: false }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], hourAreaRef: [{ type: i0.ViewChild, args: ['hourArea', { isSignal: true }] }], minuteAreaRef: [{ type: i0.ViewChild, args: ['minuteArea', { isSignal: true }] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }], timestampChange: [{ type: i0.Output, args: ["timestampChange"] }], isoChange: [{ type: i0.Output, args: ["isoChange"] }], timeObjectChange: [{ type: i0.Output, args: ["timeObjectChange"] }], onDocumentClick: [{
+                    ], template: "<!-- Bo g\u00F3c: Figma `ol-timepicker` (#1149:52243) d\u00F9ng 12px cho C\u1EA2 B\u1ED0N size\n     (rounded-md). Code tr\u01B0\u1EDBc \u0111\u00E2y d\u00F9ng rounded-lg 16px cho sm/base v\u00E0\n     rounded-md 24px cho lg \u2014 c\u00F9ng l\u1ED7i \u0111\u00E3 s\u1EEDa \u1EDF `ol-input`. -->\n<div class=\"relative w-full\" [class]=\"labelLayout()\" [style.--ol-label-w]=\"labelWidth() || null\">\n  @if (label() && !floatingLabel()) {\n    <ol-field-label\n      [beside]=\"labelBeside()\"\n      [size]=\"size()\"\n      [text]=\"label()\"\n      [forId]=\"inputId()\"\n      [labelId]=\"labelId()\"\n      [required]=\"required() || showAsterisk()\"\n    />\n  }\n\n  <!-- Trigger Box Container with Add-on Support -->\n  <!-- Nh\u00E3n n\u1ED5i ki\u1EC3u filled/standard th\u00EAm h\u00E0ng 20px ph\u00EDa tr\u00EAn khung: addon\n       ph\u1EA3i b\u00E1m \u0110\u00C1Y cho th\u1EB3ng h\u00E0ng v\u1EDBi khung nh\u1EADp, kh\u00F4ng b\u00E1m h\u00E0ng nh\u00E3n. -->\n  <div\n    class=\"flex w-full shadow-xs\"\n    [class.items-stretch]=\"!floatingLabel()\"\n    [class.items-end]=\"floatingLabel()\"\n  >\n    @if (addonType() === 'left') {\n      <div\n        class=\"flex items-center justify-center px-3 bg-neutral-tertiary border border-default border-e-0 text-body shrink-0 rounded-s-md\"\n        [class.h-9]=\"size() === 'sm'\"\n        [class.h-10]=\"size() === 'base'\"\n        [class.h-12]=\"size() === 'lg'\"\n        [class.h-13]=\"size() === 'xl'\"\n      >\n        @if (addonText()) {\n          <span class=\"text-xs font-medium\">{{ addonText() }}</span>\n        } @else {\n          <ol-icon [name]=\"addonIcon() || 'clock-circle'\" size=\"sm\" />\n        }\n      </div>\n    }\n\n    <ol-field-frame\n      class=\"min-w-0 flex-1\"\n      [enabled]=\"floatingLabel()\"\n      [label]=\"label()\"\n      [forId]=\"inputId()\"\n      [labelId]=\"labelId()\"\n      [variant]=\"floatingVariant()\"\n      [size]=\"size()\"\n      [state]=\"state()\"\n      [disabled]=\"disabled()\"\n      [required]=\"required() || showAsterisk()\"\n      [hasValue]=\"!!value()\"\n      [open]=\"isOpen()\"\n    >\n      <div\n        [id]=\"inputId()\"\n        role=\"combobox\"\n        [attr.aria-labelledby]=\"label() ? labelId() : null\"\n        [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n        [attr.aria-expanded]=\"isOpen()\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [attr.tabindex]=\"disabled() ? -1 : 0\"\n        (click)=\"toggleDropdown()\"\n        (keydown.enter)=\"toggleDropdown()\"\n        (keydown.space)=\"toggleDropdown(); $event.preventDefault()\"\n        class=\"ol-field-box relative flex items-center justify-between flex-1 w-full border cursor-pointer select-none focus:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-subtle\"\n        [ngClass]=\"fieldTextClasses()\"\n        [class.border-default-medium]=\"!isOpen() && state() === 'default'\"\n        [class.rounded-md]=\"addonType() === 'none'\"\n        [class.rounded-e-md]=\"addonType() === 'left'\"\n        [class.rounded-s-md]=\"addonType() === 'right'\"\n        [class.h-9]=\"size() === 'sm'\"\n        [class.h-10]=\"size() === 'base'\"\n        [class.h-12]=\"size() === 'lg'\"\n        [class.h-13]=\"size() === 'xl'\"\n        [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled() && !readonly()\"\n        [class.border-brand]=\"isOpen() && state() === 'default'\"\n        [class.ring-2]=\"isOpen()\"\n        [class.ring-brand-subtle]=\"isOpen()\"\n        [class.border-danger-subtle]=\"state() === 'error' && !disabled()\"\n        [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n        [class.text-fg-danger-strong]=\"state() === 'error' && !disabled()\"\n        [class.border-success-subtle]=\"state() === 'success' && !disabled()\"\n        [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n        [class.text-fg-success-strong]=\"state() === 'success' && !disabled()\"\n        [class.bg-disabled]=\"disabled() || readonly()\"\n        [class.cursor-not-allowed]=\"disabled()\"\n        [class.opacity-60]=\"disabled()\"\n      >\n        <div class=\"flex items-center gap-2 overflow-hidden min-w-0\">\n          @if (addonType() === 'none') {\n            <!-- Icon trong \u00F4 khi kh\u00F4ng c\u00F3 addon; `addonIcon` \u0111\u1ED5i \u0111\u01B0\u1EE3c. -->\n            <ol-icon [name]=\"addonIcon() || 'clock-circle'\" size=\"sm\" />\n          }\n          <span\n            class=\"truncate font-normal\"\n            data-ol-field-text\n            [attr.data-ol-field-placeholder]=\"value() ? null : ''\"\n            [class.text-sm]=\"size() === 'sm' || size() === 'base'\"\n            [class.text-base]=\"size() === 'lg' || size() === 'xl'\"\n            [class.text-body-subtle]=\"!value() && state() !== 'error'\"\n            [class.text-body]=\"!value() && state() === 'error'\"\n            [class.text-heading]=\"!!value()\"\n          >\n            {{ value() || placeholder() }}\n          </span>\n        </div>\n\n        <div class=\"flex items-center gap-1.5 shrink-0 ms-1\">\n          @if (value() && !disabled() && !readonly()) {\n            <button\n              type=\"button\"\n              (click)=\"clear($event)\"\n              aria-label=\"Xo\u00E1 gi\u1EDD \u0111\u00E3 ch\u1ECDn\"\n              class=\"p-0.5 text-body-subtle hover:text-heading rounded-full hover:bg-neutral-tertiary-medium transition-colors cursor-pointer flex items-center justify-center\"\n            >\n              <ol-icon name=\"close\" size=\"xs\" />\n            </button>\n          }\n          <ol-icon name=\"chevron-down\" size=\"sm\" />\n        </div>\n      </div>\n    </ol-field-frame>\n\n    @if (addonType() === 'right') {\n      <div\n        class=\"flex items-center justify-center px-3 bg-neutral-tertiary border border-default border-s-0 text-body shrink-0 rounded-e-md\"\n        [class.h-9]=\"size() === 'sm'\"\n        [class.h-10]=\"size() === 'base'\"\n        [class.h-12]=\"size() === 'lg'\"\n        [class.h-13]=\"size() === 'xl'\"\n      >\n        @if (addonText()) {\n          <span class=\"text-xs font-medium\">{{ addonText() }}</span>\n        } @else {\n          <ol-icon [name]=\"addonIcon() || 'clock-circle'\" size=\"sm\" />\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Popover Panel -->\n  @if (isOpen()) {\n    <div\n      #panel\n      class=\"absolute z-dropdown bg-neutral-primary border border-default rounded-md shadow-lg p-3 min-w-70 select-none overflow-y-auto overflow-x-hidden max-h-[var(--ol-overlay-max-height,28rem)] animate-in fade-in zoom-in-95 duration-150\"\n    >\n      @if (showPresets()) {\n        <!-- Preset quick times -->\n        <div class=\"mb-3 pb-2 border-b border-default\">\n          <span class=\"text-xs font-semibold text-body-subtle block mb-1.5\">M\u1ED1c gi\u1EDD nhanh</span>\n          <div class=\"grid grid-cols-4 gap-1 max-h-24 overflow-y-auto overflow-x-hidden pr-1\">\n            @for (preset of presetTimes; track preset) {\n              <button\n                type=\"button\"\n                (click)=\"selectPreset(preset)\"\n                class=\"px-2 py-1 text-xs rounded-md text-center transition-colors font-medium\"\n                [class.hover:bg-neutral-tertiary]=\"value() !== preset\"\n                [class.bg-brand-softer]=\"value() === preset\"\n                [class.text-fg-brand]=\"value() === preset\"\n                [class.text-body]=\"value() !== preset\"\n              >\n                {{ preset }}\n              </button>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Columns Time Picker -->\n      <div class=\"flex items-center justify-center gap-2 py-2\">\n        <!-- Hour Column -->\n        <div class=\"flex flex-col items-center\">\n          <span class=\"text-xs font-semibold text-body-subtle mb-1\">Gi\u1EDD</span>\n          <div\n            class=\"relative group/col w-16 h-44 rounded-lg overflow-hidden border border-default\"\n          >\n            <!-- Top Fade Gradient -->\n            <div\n              class=\"pointer-events-none absolute inset-x-0 top-0 h-6 bg-gradient-to-b from-neutral-primary to-transparent z-10\"\n            ></div>\n\n            <ol-scroll-area\n              #hourArea\n              scrollbar=\"hidden\"\n              [smooth]=\"true\"\n              innerClass=\"p-1 py-4 space-y-1\"\n            >\n              @if (format() === '12h') {\n                @for (h of hours12; track h) {\n                  <button\n                    type=\"button\"\n                    (click)=\"selectHour(h)\"\n                    class=\"w-full py-1 text-center text-sm rounded-md transition-all font-medium\"\n                    [class.bg-brand]=\"selectedHour() === h\"\n                    [class.text-white]=\"selectedHour() === h\"\n                    [class.font-semibold]=\"selectedHour() === h\"\n                    [class.scale-105]=\"selectedHour() === h\"\n                    [class.shadow-xs]=\"selectedHour() === h\"\n                    [class.hover:bg-neutral-tertiary]=\"selectedHour() !== h\"\n                    [class.text-heading]=\"selectedHour() !== h\"\n                  >\n                    {{ pad(h) }}\n                  </button>\n                }\n              } @else {\n                @for (h of hours24; track h) {\n                  <button\n                    type=\"button\"\n                    (click)=\"selectHour(h)\"\n                    class=\"w-full py-1 text-center text-sm rounded-md transition-all font-medium\"\n                    [class.bg-brand]=\"selectedHour() === h\"\n                    [class.text-white]=\"selectedHour() === h\"\n                    [class.font-semibold]=\"selectedHour() === h\"\n                    [class.scale-105]=\"selectedHour() === h\"\n                    [class.shadow-xs]=\"selectedHour() === h\"\n                    [class.hover:bg-neutral-tertiary]=\"selectedHour() !== h\"\n                    [class.text-heading]=\"selectedHour() !== h\"\n                  >\n                    {{ pad(h) }}\n                  </button>\n                }\n              }\n            </ol-scroll-area>\n\n            <!-- Bottom Fade Gradient -->\n            <div\n              class=\"pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-neutral-primary to-transparent z-10\"\n            ></div>\n          </div>\n        </div>\n\n        <span class=\"text-lg font-bold text-heading mt-4\">:</span>\n\n        <!-- Minute Column -->\n        <div class=\"flex flex-col items-center\">\n          <span class=\"text-xs font-semibold text-body-subtle mb-1\">Ph\u00FAt</span>\n          <div\n            class=\"relative group/col w-16 h-44 rounded-lg overflow-hidden border border-default\"\n          >\n            <!-- Top Fade Gradient -->\n            <div\n              class=\"pointer-events-none absolute inset-x-0 top-0 h-6 bg-gradient-to-b from-neutral-primary to-transparent z-10\"\n            ></div>\n\n            <ol-scroll-area\n              #minuteArea\n              scrollbar=\"hidden\"\n              [smooth]=\"true\"\n              innerClass=\"p-1 py-4 space-y-1\"\n            >\n              @for (m of minutes; track m) {\n                @if (m % minuteStep() === 0) {\n                  <button\n                    type=\"button\"\n                    (click)=\"selectMinute(m)\"\n                    class=\"w-full py-1 text-center text-sm rounded-md transition-all font-medium\"\n                    [class.bg-brand]=\"selectedMinute() === m\"\n                    [class.text-white]=\"selectedMinute() === m\"\n                    [class.font-semibold]=\"selectedMinute() === m\"\n                    [class.scale-105]=\"selectedMinute() === m\"\n                    [class.shadow-xs]=\"selectedMinute() === m\"\n                    [class.hover:bg-neutral-tertiary]=\"selectedMinute() !== m\"\n                    [class.text-heading]=\"selectedMinute() !== m\"\n                  >\n                    {{ pad(m) }}\n                  </button>\n                }\n              }\n            </ol-scroll-area>\n\n            <!-- Bottom Fade Gradient -->\n            <div\n              class=\"pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-neutral-primary to-transparent z-10\"\n            ></div>\n          </div>\n        </div>\n\n        @if (format() === '12h') {\n          <!-- AM/PM Column -->\n          <div class=\"flex flex-col items-center\">\n            <span class=\"text-xs font-semibold text-body-subtle mb-1\">Bu\u1ED5i</span>\n            <div\n              class=\"h-44 w-16 flex flex-col justify-center gap-2 border border-default rounded-lg p-1\"\n            >\n              <button\n                type=\"button\"\n                (click)=\"selectPeriod('AM')\"\n                class=\"w-full py-2 text-center text-xs rounded-md transition-colors font-semibold\"\n                [class.bg-brand]=\"selectedPeriod() === 'AM'\"\n                [class.text-white]=\"selectedPeriod() === 'AM'\"\n                [class.hover:bg-neutral-tertiary]=\"selectedPeriod() !== 'AM'\"\n                [class.text-heading]=\"selectedPeriod() !== 'AM'\"\n              >\n                AM\n              </button>\n              <button\n                type=\"button\"\n                (click)=\"selectPeriod('PM')\"\n                class=\"w-full py-2 text-center text-xs rounded-md transition-colors font-semibold\"\n                [class.bg-brand]=\"selectedPeriod() === 'PM'\"\n                [class.text-white]=\"selectedPeriod() === 'PM'\"\n                [class.hover:bg-neutral-tertiary]=\"selectedPeriod() !== 'PM'\"\n                [class.text-heading]=\"selectedPeriod() !== 'PM'\"\n              >\n                PM\n              </button>\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- Action Footer -->\n      <div class=\"flex items-center justify-between pt-3 mt-2 border-t border-default\">\n        <button\n          type=\"button\"\n          (click)=\"cancel()\"\n          class=\"px-3 py-1.5 text-xs font-medium text-body hover:text-heading hover:bg-neutral-tertiary rounded-lg transition-colors\"\n        >\n          H\u1EE7y\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"apply()\"\n          class=\"px-3 py-1.5 text-xs font-medium text-white bg-brand hover:bg-brand-strong rounded-lg shadow-xs transition-colors\"\n        >\n          \u00C1p d\u1EE5ng\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Helper Text & Error Text -->\n  @if (state() === 'error' && errorText()) {\n    <p class=\"mt-1.5 text-xs text-fg-danger\">{{ errorText() }}</p>\n  } @else if (helperText()) {\n    <p class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], floatingVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingVariant", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAsterisk", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], showPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPresets", required: false }] }], addonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "addonType", required: false }] }], addonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "addonText", required: false }] }], addonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "addonIcon", required: false }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], hourAreaRef: [{ type: i0.ViewChild, args: ['hourArea', { isSignal: true }] }], minuteAreaRef: [{ type: i0.ViewChild, args: ['minuteArea', { isSignal: true }] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }], timestampChange: [{ type: i0.Output, args: ["timestampChange"] }], isoChange: [{ type: i0.Output, args: ["isoChange"] }], timeObjectChange: [{ type: i0.Output, args: ["timeObjectChange"] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
@@ -13201,6 +14109,39 @@ class OlAutocomplete {
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Nhãn nổi: `label` nằm TRONG khung (sau icon kính lúp), nổi lên khi focus,
+     * đang gõ, mở danh sách hoặc đã chọn. Đa chọn: nổi lên không đẩy thẻ.
+     */
+    floatingLabel = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Nhãn `top` (trên ô, mặc định) hay `left` (cùng hàng, bên trái). Nhãn nổi
+     * (`floatingLabel`) thắng — bật nó thì bỏ qua input này.
+     */
+    labelPosition = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * Độ rộng cột nhãn khi `labelPosition="left"` — độ dài CSS bất kỳ: `140px`,
+     * `10rem`, `30%`. Bỏ trống = 8rem. Các ô trong cùng form đặt cùng một số thì
+     * mép ô thẳng hàng.
+     */
+    labelWidth = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelWidth" }] : /* istanbul ignore next */ []));
+    labelLayout = computed(() => fieldLabelLayout(this.labelPosition(), this.floatingLabel()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelLayout" }] : /* istanbul ignore next */ []));
+    labelBeside = computed(() => this.labelLayout() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelBeside" }] : /* istanbul ignore next */ []));
+    /** Kiểu nhãn nổi — Figma Bordered / With background / Default. */
+    floatingVariant = input('outlined', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "floatingVariant" }] : /* istanbul ignore next */ []));
+    /** Có giá trị để nhãn nổi: đã chọn (một hay nhiều) hoặc đang có chữ gõ. */
+    hasFloatValue = computed(() => {
+        const v = this.value();
+        const chosen = Array.isArray(v) ? v.length > 0 : v !== null && v !== undefined && v !== '';
+        return chosen || !!this.searchQuery();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasFloatValue" }] : /* istanbul ignore next */ []));
     placeholder = input('Tìm kiếm hoặc chọn...', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     labelKey = input('label', /* @ts-ignore */
@@ -13232,7 +14173,7 @@ class OlAutocomplete {
     ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
     /**
      * Đệm ngang theo BẢNG CHUẨN họ form. Chỉ dùng khi KHÔNG `multiple` —
-     * chế độ nhiều thẻ có đệm riêng (`px-1.5 py-1`) vì các thẻ tự mang đệm.
+     * chế độ nhiều thẻ dùng `boxPaddingClass`.
      *
      * Ba lỗi cũ gộp làm một chỗ này (đo /autocomplete 2026-09-24):
      *   sm    `[class.px-2.5]` -> Angular CẮT ở dấu chấm, render `px-2` = 8px
@@ -13242,6 +14183,39 @@ class OlAutocomplete {
      */
     fieldPaddingClass = computed(() => FIELD_PADDING_X[this.resolvedSize()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fieldPaddingClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Đệm khung. Chọn nhiều: icon kính lúp vẫn là phần tử đầu nên lề đầu theo
+     * cỡ như ô đơn (bản cũ `ps-1.5` để icon cách mép 6px, ô đơn 12px — hai ô
+     * cạnh nhau lệch nhau rõ). Lề cuối chừa chỗ cụm nút absolute: lề cỡ + icon
+     * 16px + `FIELD_ICON_GAP` 8px.
+     */
+    boxPaddingClass = computed(() => {
+        const size = this.resolvedSize();
+        return this.multiple()
+            ? `${FIELD_PADDING_START[size]} ${FIELD_ICON_RESERVE_END[size]} ${multiValuePadY(this.floatingLabel() && this.floatingVariant() === 'outlined')}`
+            : FIELD_PADDING_X[size];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boxPaddingClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Cụm nút cuối (xoá / chevron / spinner). Rộng icon 16px + `ps-0.5` để chữ
+     * ↔ icon đúng 8px (`gap-1.5` của khung + 2px) — bản cũ `w-7` ra 18px.
+     * `justify-end`: spinner 12px vẫn neo mép phải như icon.
+     */
+    controlClass = computed(() => this.multiple()
+        ? `absolute inset-y-0 inset-e-0 flex items-center ${FIELD_PADDING_END[this.resolvedSize()]}`
+        : 'ms-auto flex w-4.5 shrink-0 items-center justify-end ps-0.5', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Đã có thẻ (chọn nhiều): khi KHÔNG gõ, ô gõ co về 0 (`min-w-0`, vẫn
+     * `flex-1`) nên luôn ở cùng dòng chip cuối — không đẻ ra một dòng trống.
+     * Focus để gõ thì mới cần chỗ (`focus:min-w-16`), lúc đó xuống dòng là đúng.
+     * Đo 2026-09-29: dòng chip cuối còn 43px, `min-w-12` (48px) vẫn rớt.
+     */
+    hasChips = computed(() => {
+        const v = this.value();
+        return this.multiple() && Array.isArray(v) && v.length > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasChips" }] : /* istanbul ignore next */ []));
     /**
      * Cỡ chữ theo BẢNG CHUẨN. Trước đây `[class.text-base]` chỉ khai cho `lg`,
      * `xl` không có nhánh nào nên rơi về 16px MẶC ĐỊNH của trình duyệt — trùng
@@ -13764,17 +14738,17 @@ class OlAutocomplete {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlAutocomplete, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlAutocomplete, isStandalone: true, selector: "ol-autocomplete", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showAsterisk: { classPropertyName: "showAsterisk", publicName: "showAsterisk", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, menuClass: { classPropertyName: "menuClass", publicName: "menuClass", isSignal: true, isRequired: false, transformFunction: null }, matchTriggerWidth: { classPropertyName: "matchTriggerWidth", publicName: "matchTriggerWidth", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, remoteSearch: { classPropertyName: "remoteSearch", publicName: "remoteSearch", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, typeToSearchText: { classPropertyName: "typeToSearchText", publicName: "typeToSearchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", createOption: "createOption", search: "search", opened: "opened", closed: "closed", cleared: "cleared", added: "added", removed: "removed", selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block w-full" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlAutocomplete, isStandalone: true, selector: "ol-autocomplete", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, floatingVariant: { classPropertyName: "floatingVariant", publicName: "floatingVariant", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showAsterisk: { classPropertyName: "showAsterisk", publicName: "showAsterisk", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, allowCreate: { classPropertyName: "allowCreate", publicName: "allowCreate", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, menuClass: { classPropertyName: "menuClass", publicName: "menuClass", isSignal: true, isRequired: false, transformFunction: null }, matchTriggerWidth: { classPropertyName: "matchTriggerWidth", publicName: "matchTriggerWidth", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, remoteSearch: { classPropertyName: "remoteSearch", publicName: "remoteSearch", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, typeToSearchText: { classPropertyName: "typeToSearchText", publicName: "typeToSearchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", createOption: "createOption", search: "search", opened: "opened", closed: "closed", cleared: "cleared", added: "added", removed: "removed", selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block w-full" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => OlAutocomplete),
                 multi: true,
             },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative w-full\">\n  @if (label()) {\n    <div class=\"flex items-center justify-between mb-1.5\">\n      <label\n        [for]=\"inputId()\"\n        class=\"inline-flex items-center gap-1 text-sm font-medium text-heading\"\n      >\n        <span>{{ label() }}</span>\n        @if (required() || showAsterisk()) {\n          <span class=\"text-fg-danger font-bold\">*</span>\n        }\n      </label>\n    </div>\n  }\n\n  <!--\n    Main Input Box Container.\n\n    `py-1` ch\u1EE9 KH\u00D4NG ph\u1EA3i `p-1.5` cho ch\u1EBF \u0111\u1ED9 multiple: `p-1.5` \u0111\u1EC7m M\u1ECCI PH\u00CDA 6px,\n    c\u1ED9ng v\u00E0o n\u1ED9i dung 34px th\u00E0nh 46px \u2014 v\u01B0\u1EE3t `min-h-10` (40px). \u0110o 2026-09-17:\n    \u00F4 \u0111a ch\u1ECDn cao **46px** trong khi \u00F4 \u0111\u01A1n ch\u1ECDn ngay c\u1EA1nh cao **40px**, hai \u00F4\n    c\u00F9ng m\u1ED9t h\u00E0ng l\u01B0\u1EDBi n\u00EAn l\u1EC7ch th\u1EA5y r\u00F5. \u0110\u1EC7m d\u1ECDc 4px v\u1EEBa \u0111\u1EE7 cho th\u1EBB cao 24px\n    (4 + 24 + 4 = 32 < 40) m\u00E0 v\u1EABn c\u00F2n ch\u1ED7 khi th\u1EBB xu\u1ED1ng d\u00F2ng th\u1EE9 hai.\n\n    `content-center` \u0111i k\u00E8m `items-center`: v\u1EDBi `flex-wrap`, `items-center` ch\u1EC9\n    c\u0103n gi\u1EEFa TRONG T\u1EEANG D\u00D2NG, c\u1EA3 kh\u1ED1i nhi\u1EC1u d\u00F2ng v\u1EABn d\u00EDnh m\u00E9p tr\u00EAn.\n  -->\n  <div\n    class=\"relative flex items-center content-center flex-wrap gap-1.5 w-full border shadow-xs\"\n    [class.border-default-medium]=\"!isOpen() && state() === 'default'\"\n    [class.rounded-md]=\"true\"\n    [class.min-h-9]=\"resolvedSize() === 'sm'\"\n    [class.min-h-10]=\"resolvedSize() === 'base'\"\n    [class.min-h-12]=\"resolvedSize() === 'lg'\"\n    [class.min-h-13]=\"resolvedSize() === 'xl'\"\n    [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled() && !readonly()\"\n    [class.border-brand]=\"isOpen() && state() === 'default'\"\n    [class.ring-2]=\"isOpen()\"\n    [class.ring-brand-subtle]=\"isOpen()\"\n    [class.border-danger]=\"state() === 'error' && !disabled()\"\n    [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n    [class.border-success]=\"state() === 'success' && !disabled()\"\n    [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n    [class.bg-disabled]=\"disabled() || readonly()\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    [class.opacity-60]=\"disabled()\"\n    [ngClass]=\"multiple() ? 'px-1.5 py-1' : fieldPaddingClass()\"\n  >\n    <!--\n      Icon k\u00EDnh l\u00FAp LU\u00D4N hi\u1EC7n. B\u1EA3n c\u0169 \u1EA9n n\u00F3 khi `multiple` \u0111\u00E3 c\u00F3 gi\u00E1 tr\u1ECB\n      (`@if (!multiple() || !value() || value()?.length === 0)`) \u2014 ch\u1ECDn m\u1ED9t th\u1EBB\n      l\u00E0 icon bi\u1EBFn m\u1EA5t, xo\u00E1 h\u1EBFt th\u1EBB th\u00EC n\u00F3 quay l\u1EA1i. \u0110o 2026-09-17 tr\u00EAn\n      `/autocomplete`: \u00F4 \u0111\u01A1n ch\u1ECDn 1 icon `magnifer`, \u00F4 \u0111a ch\u1ECDn **0 icon** khi\n      c\u00F3 2 th\u1EBB.\n\n      Figma kh\u00F4ng c\u00F3 c\u01A1 s\u1EDF cho vi\u1EC7c \u1EA9n: \u0111\u1ECDc `ol-autocomplete-examples`\n      (#1149:53126) th\u00EC **6/6 Type \u0111\u1EC1u c\u00F3 `search` trong `ol-input`**, kh\u00F4ng\n      Type n\u00E0o b\u1ECF. Figma c\u0169ng kh\u00F4ng v\u1EBD bi\u1EBFn th\u1EC3 \u0111a ch\u1ECDn c\u00F3 th\u1EBB, n\u00EAn \u0111\u00E2y l\u00E0 l\u1EF1a\n      ch\u1ECDn c\u1EE7a code ch\u1EE9 kh\u00F4ng ph\u1EA3i thi\u1EBFt k\u1EBF.\n\n      `shrink-0` \u0111\u1EC3 icon kh\u00F4ng b\u1ECB c\u00E1c th\u1EBB \u00E9p b\u1EB9p khi \u00F4 ch\u1EADt.\n    -->\n    <ol-icon name=\"magnifer\" size=\"sm\" class=\"shrink-0\" />\n\n    <!-- Multiple Selected Tags / Chips -->\n    @if (multiple() && value() && value()?.length > 0) {\n      @for (itemVal of value(); track itemVal) {\n        <!--\n          `h-6` c\u1ED1 \u0111\u1ECBnh (24px): \u0111\u1EC3 th\u1EBB t\u1EF1 co theo n\u1ED9i dung th\u00EC m\u1ED7i th\u1EBB cao m\u1ED9t\n          ki\u1EC3u v\u00E0 \u00F4 nh\u1EADp b\u1ECB \u0111\u1EA9y theo th\u1EBB cao nh\u1EA5t. 24px + \u0111\u1EC7m d\u1ECDc 4\u00D72 = 32px,\n          v\u1EABn n\u1EB1m trong `min-h-10` (40px) n\u00EAn \u00F4 \u0111a ch\u1ECDn cao \u0111\u00FAng b\u1EB1ng \u00F4 \u0111\u01A1n ch\u1ECDn.\n        -->\n        <span\n          class=\"inline-flex h-6 items-center gap-1 px-2 text-xs font-medium bg-brand-softer text-fg-brand-strong rounded-md border border-brand-subtle shrink-0\"\n        >\n          <span>{{ getDisplayLabelForValue(itemVal) }}</span>\n          @if (!disabled() && !readonly()) {\n            <!-- Vu\u00F4ng nh\u01B0 n\u00FAt xo\u00E1 chung \u2014 xem l\u00FD do \u1EDF \u0111\u00F3. -->\n            <button\n              type=\"button\"\n              (click)=\"removeTag(itemVal, $event)\"\n              [attr.aria-label]=\"'G\u1EE1 ' + getDisplayLabelForValue(itemVal)\"\n              class=\"inline-flex size-4 shrink-0 items-center justify-center rounded-full text-fg-brand hover:text-fg-brand-strong focus:outline-hidden\"\n            >\n              <ol-icon name=\"close\" size=\"xs\" />\n            </button>\n          }\n        </span>\n      }\n    }\n\n    <!-- Input text field -->\n    <input\n      [id]=\"inputId()\"\n      [attr.aria-invalid]=\"ariaInvalid()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-activedescendant]=\"activeOptionId()\"\n      type=\"text\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [placeholder]=\"multiple() && value()?.length > 0 ? '' : placeholder()\"\n      [ngModel]=\"searchQuery()\"\n      (ngModelChange)=\"onSearchChange($event)\"\n      (focus)=\"onInputFocus()\"\n      (keydown)=\"onKeyDown($event)\"\n      class=\"flex-1 min-w-20 bg-transparent border-0 outline-none placeholder:text-body-subtle font-normal text-heading\"\n      [ngClass]=\"fieldTextClass()\"\n    />\n\n    <!-- M\u1ED8T \u00F4 \u0111i\u1EC1u khi\u1EC3n, \u0111\u1ED5i vai theo tr\u1EA1ng th\u00E1i \u2014 kh\u00F4ng x\u1EBFp c\u1EA1nh nhau.\n         Tr\u01B0\u1EDBc \u0111\u00E2y n\u00FAt xo\u00E1 v\u00E0 `chevron-down` C\u00D9NG hi\u1EC7n: \u0111o /autocomplete ng\u00E0y\n         2026-09-16 \u0111\u1EBFm 3 ph\u1EA7n t\u1EED chen trong c\u1EE5m 44px, c\u1ED9ng spinner khi `loading`\n         l\u00E0 b\u1ED1n. \u00D4 r\u1ED9ng c\u1ED1 \u0111\u1ECBnh `w-7` \u0111\u1EC3 khung kh\u00F4ng nh\u1EA3y khi icon \u0111\u1ED5i vai.\n\n         `justify-end` ch\u1EE9 KH\u00D4NG `justify-center`: \u00F4 r\u1ED9ng 28px m\u00E0 icon ch\u1EC9 16px\n         n\u00EAn c\u0103n gi\u1EEFa \u0111\u1EC3 d\u01B0 6px m\u1ED7i b\u00EAn, \u0111\u1EA9y icon v\u00E0o trong. \u0110o 2026-09-17 tr\u00EAn\n         13 \u00F4 c\u1EE7a /autocomplete: l\u1EC1 tr\u00E1i 15px, l\u1EC1 ph\u1EA3i **21px** \u2014 l\u1EC7ch \u0111\u00FAng 6px\n         \u1EDF M\u1ECCI \u00F4, c\u1EA3 \u0111\u01A1n ch\u1ECDn l\u1EABn \u0111a ch\u1ECDn. Con s\u1ED1 kh\u00F4ng \u0111\u1ED5i theo n\u1ED9i dung n\u00EAn\n         \u0111\u00E2y l\u00E0 l\u1ED7i c\u1EA5u tr\u00FAc, kh\u00F4ng ph\u1EA3i do ch\u1EEF d\u00E0i ng\u1EAFn.\n\n         `ol-select` \u0111\u00E3 ch\u1ED1t `justify-end` t\u1EEB l\u01B0\u1EE3t tr\u01B0\u1EDBc; \u0111\u00E2y l\u00E0 l\u1EA7n s\u1EEDa cho\n         hai component kh\u1EDBp nhau. -->\n    <div class=\"ms-auto flex w-7 shrink-0 items-center justify-end\">\n      @if (loading()) {\n        <ol-spinner size=\"xs\" color=\"brand\" />\n      } @else if (\n        (searchQuery() || (multiple() && value()?.length > 0) || (!multiple() && value())) &&\n        !disabled() &&\n        !readonly()\n      ) {\n        <!--\n          N\u00FAt b\u1ECDc `size-4` \u0110\u00DANG B\u1EB0NG icon, kh\u00F4ng `size-6`.\n\n          `size-6` (24px) b\u1ECDc SVG 16px th\u00EC d\u01B0 4px m\u1ED7i b\u00EAn, \u0111\u1EA9y icon v\u00E0o trong:\n          \u0111o 2026-09-17 th\u1EA5y \u00F4 \u0111ang hi\u1EC7n n\u00FAt xo\u00E1 c\u00F3 l\u1EC1 ph\u1EA3i **19px** trong khi\n          \u00F4 hi\u1EC7n chevron tr\u1EA7n ch\u1EC9 15px \u2014 c\u00F9ng m\u1ED9t component m\u00E0 hai tr\u1EA1ng th\u00E1i\n          l\u1EC7ch nhau 4px, \u0111\u00FAng ch\u1ED7 anh ch\u1EC9 trong \u1EA3nh.\n\n          V\u00F9ng b\u1EA5m v\u1EABn \u0111\u1EE7 l\u1EDBn nh\u1EDD `p-1` \u1EDF NGO\u00C0I khung \u0111o: `size-4` + \u0111\u1EC7m\n          kh\u00F4ng c\u1ED9ng v\u00E0o b\u1EC1 r\u1ED9ng chi\u1EBFm ch\u1ED7 v\u00EC n\u00FAt n\u1EB1m trong \u00F4 `w-7` c\u1ED1 \u0111\u1ECBnh.\n        -->\n        <button\n          type=\"button\"\n          (click)=\"clearAll($event)\"\n          aria-label=\"Xo\u00E1 to\u00E0n b\u1ED9 l\u1EF1a ch\u1ECDn\"\n          class=\"inline-flex size-4 shrink-0 items-center justify-center rounded-full text-body-subtle transition-colors hover:text-heading\"\n        >\n          <ol-icon name=\"close\" size=\"sm\" />\n        </button>\n      } @else {\n        <ol-icon\n          name=\"chevron-down\"\n          size=\"sm\"\n          class=\"transition-transform\"\n          [class.rotate-180]=\"isOpen()\"\n        />\n      }\n    </div>\n  </div>\n\n  <!--\n    Dropdown Suggestions Menu.\n\n    Token \u0111\u1ECDc t\u1EEB Figma `ol-autocomplete-menu` (#1149:53147, Type=Default):\n    bo g\u00F3c 12px \u00B7 \u0111\u1EC7m 8px \u00B7 n\u1EC1n `bg-neutral-primary-medium` \u00B7 vi\u1EC1n\n    `border-default-medium`.\n\n    Hai token n\u1EC1n/vi\u1EC1n TR\u00D9NG NHAU \u1EDF ch\u1EBF \u0111\u1ED9 s\u00E1ng n\u00EAn \u0111\u1ED5i hay kh\u00F4ng nh\u00ECn c\u0169ng\n    th\u1EBF \u2014 nh\u01B0ng CH\u1EBE \u0110\u1ED8 T\u1ED0I kh\u00E1c h\u1EB3n: `bg-primary` l\u00E0 gray-950 (g\u1EA7n \u0111en, panel\n    ch\u00ECm v\u00E0o n\u1EC1n) c\u00F2n `bg-primary-medium` l\u00E0 gray-800 (panel n\u1ED5i l\u00EAn).\n    `ol-select` c\u00F9ng l\u1EC7ch n\u00E0y, s\u1EEDa chung m\u1ED9t l\u01B0\u1EE3t.\n  -->\n  @if (isOpen()) {\n    <div\n      #panel\n      [id]=\"listboxId()\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || 'G\u1EE3i \u00FD'\"\n      class=\"absolute z-dropdown bg-neutral-primary-medium border border-default-medium rounded-md shadow-lg max-h-[var(--ol-overlay-max-height,15rem)] overflow-y-auto overflow-x-hidden p-2 animate-in fade-in zoom-in-95 duration-150\"\n      [class.w-full]=\"matchTriggerWidth()\"\n      [class]=\"menuClass()\"\n    >\n      @if (filteredOptions().length > 0) {\n        @for (item of filteredOptions(); track getItemValue(item); let idx = $index) {\n          <!-- Ti\u00EAu \u0111\u1EC1 nh\u00F3m ch\u00E8n gi\u1EEFa v\u00F2ng l\u1EB7p ph\u1EB3ng, xem `groupNameAt`. -->\n          @if (groupNameAt(idx); as groupName) {\n            <div\n              role=\"presentation\"\n              class=\"px-3 pt-2 pb-1 text-xs font-semibold uppercase tracking-wide text-body-subtle\"\n            >\n              {{ groupName }}\n            </div>\n          }\n          <div\n            [id]=\"optionId(idx)\"\n            role=\"option\"\n            [attr.aria-selected]=\"isSelected(item)\"\n            [attr.aria-disabled]=\"item?.disabled ? 'true' : null\"\n            (click)=\"selectOption(item)\"\n            class=\"flex items-center justify-between px-3 py-2 text-sm rounded-lg cursor-pointer transition-colors\"\n            [class.bg-brand-softer]=\"isSelected(item) || activeIndex() === idx\"\n            [class.hover:bg-neutral-tertiary-medium]=\"!isSelected(item) && activeIndex() !== idx\"\n            [class.opacity-50]=\"item?.disabled\"\n            [class.cursor-not-allowed]=\"item?.disabled\"\n          >\n            @if (optionTemplate) {\n              <!-- Custom Option Template -->\n              <ng-container\n                *ngTemplateOutlet=\"\n                  optionTemplate;\n                  context: { $implicit: item, selected: isSelected(item) }\n                \"\n              />\n            } @else {\n              <!-- Default Option Display -->\n              <div class=\"flex items-center gap-2.5 overflow-hidden\">\n                @if (item?.avatar) {\n                  <img\n                    [src]=\"item.avatar\"\n                    alt=\"\u1EA2nh \u0111\u1EA1i di\u1EC7n\"\n                    class=\"w-7 h-7 rounded-full object-cover shrink-0\"\n                  />\n                }\n                <div class=\"truncate\">\n                  <span class=\"font-medium text-heading block truncate\">{{\n                    getItemLabel(item)\n                  }}</span>\n                  @if (item?.subLabel) {\n                    <span class=\"text-xs text-body-subtle block truncate\">{{ item.subLabel }}</span>\n                  }\n                </div>\n              </div>\n\n              <div class=\"flex items-center gap-2 shrink-0 ms-2\">\n                @if (item?.badge) {\n                  <span\n                    class=\"px-1.5 py-0.5 text-2xs font-medium rounded bg-neutral-tertiary-medium text-body\"\n                  >\n                    {{ item.badge }}\n                  </span>\n                }\n                @if (isSelected(item)) {\n                  <ol-icon name=\"check\" size=\"sm\" />\n                }\n              </div>\n            }\n          </div>\n        }\n      } @else if (waitingForTerm()) {\n        <!--\n          Ch\u1EBF \u0111\u1ED9 L\u1ECCC T\u1EEA XA, ch\u01B0a g\u00F5 \u0111\u1EE7 `minTermLength`. Ph\u1EA3i l\u00E0 th\u00F4ng b\u00E1o RI\u00CANG\n          ch\u1EE9 kh\u00F4ng d\u00F9ng `emptyText`: \"Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3\" l\u00E0 sai s\u1EF1 th\u1EADt \u2014\n          ch\u01B0a t\u00ECm g\u00EC c\u1EA3. C\u00F9ng l\u1ED1i v\u1EDBi `typeToSearchText` c\u1EE7a ng-select.\n        -->\n        <div class=\"p-3 text-center text-sm text-body-subtle\">\n          <p>{{ typeToSearchText() }}</p>\n        </div>\n      } @else {\n        <!-- Empty State & Allow Create Option -->\n        <div class=\"p-3 text-center text-sm text-body-subtle\">\n          <p>{{ emptyText() }}</p>\n          @if (allowCreate() && searchQuery().trim()) {\n            <button\n              type=\"button\"\n              (click)=\"onCreateNew()\"\n              class=\"mt-2 inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-fg-brand bg-brand-softer hover:bg-brand-subtle rounded-lg transition-colors\"\n            >\n              <ol-icon name=\"plus\" size=\"xs\" />\n              <span>Th\u00EAm m\u1EDBi: \"{{ searchQuery().trim() }}\"</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Helper Text & Error Text -->\n  @if (state() === 'error' && errorText()) {\n    <p class=\"mt-1.5 text-xs text-fg-danger\">{{ errorText() }}</p>\n  } @else if (helperText()) {\n    <p class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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"] }, { kind: "component", type: OlSpinner, selector: "ol-spinner", inputs: ["variant", "size", "color", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative w-full\" [class]=\"labelLayout()\" [style.--ol-label-w]=\"labelWidth() || null\">\n  @if (label() && !floatingLabel()) {\n    <ol-field-label\n      [beside]=\"labelBeside()\"\n      [size]=\"resolvedSize()\"\n      [text]=\"label()\"\n      [forId]=\"inputId()\"\n      [required]=\"required() || showAsterisk()\"\n    />\n  }\n\n  <ol-field-frame\n    [enabled]=\"floatingLabel()\"\n    [label]=\"label()\"\n    [forId]=\"inputId()\"\n    [variant]=\"floatingVariant()\"\n    [size]=\"resolvedSize()\"\n    [state]=\"state()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required() || showAsterisk()\"\n    [hasValue]=\"hasFloatValue()\"\n    [open]=\"isOpen()\"\n  >\n    <!--\n    Main Input Box Container.\n\n    `py-1` ch\u1EE9 KH\u00D4NG ph\u1EA3i `p-1.5` cho ch\u1EBF \u0111\u1ED9 multiple: `p-1.5` \u0111\u1EC7m M\u1ECCI PH\u00CDA 6px,\n    c\u1ED9ng v\u00E0o n\u1ED9i dung 34px th\u00E0nh 46px \u2014 v\u01B0\u1EE3t `min-h-10` (40px). \u0110o 2026-09-17:\n    \u00F4 \u0111a ch\u1ECDn cao **46px** trong khi \u00F4 \u0111\u01A1n ch\u1ECDn ngay c\u1EA1nh cao **40px**, hai \u00F4\n    c\u00F9ng m\u1ED9t h\u00E0ng l\u01B0\u1EDBi n\u00EAn l\u1EC7ch th\u1EA5y r\u00F5. \u0110\u1EC7m d\u1ECDc 4px v\u1EEBa \u0111\u1EE7 cho th\u1EBB cao 24px\n    (4 + 24 + 4 = 32 < 40) m\u00E0 v\u1EABn c\u00F2n ch\u1ED7 khi th\u1EBB xu\u1ED1ng d\u00F2ng th\u1EE9 hai.\n\n    `content-center` \u0111i k\u00E8m `items-center`: v\u1EDBi `flex-wrap`, `items-center` ch\u1EC9\n    c\u0103n gi\u1EEFa TRONG T\u1EEANG D\u00D2NG, c\u1EA3 kh\u1ED1i nhi\u1EC1u d\u00F2ng v\u1EABn d\u00EDnh m\u00E9p tr\u00EAn.\n  -->\n    <div\n      class=\"ol-field-box relative flex items-center content-center flex-wrap gap-1.5 w-full border shadow-xs\"\n      [class.border-default-medium]=\"!isOpen() && state() === 'default'\"\n      [class.rounded-md]=\"true\"\n      [class.min-h-9]=\"resolvedSize() === 'sm'\"\n      [class.min-h-10]=\"resolvedSize() === 'base'\"\n      [class.min-h-12]=\"resolvedSize() === 'lg'\"\n      [class.min-h-13]=\"resolvedSize() === 'xl'\"\n      [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled() && !readonly()\"\n      [class.border-brand]=\"isOpen() && state() === 'default'\"\n      [class.ring-2]=\"isOpen()\"\n      [class.ring-brand-subtle]=\"isOpen()\"\n      [class.border-danger]=\"state() === 'error' && !disabled()\"\n      [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n      [class.border-success]=\"state() === 'success' && !disabled()\"\n      [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n      [class.bg-disabled]=\"disabled() || readonly()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n      [class.opacity-60]=\"disabled()\"\n      [ngClass]=\"boxPaddingClass()\"\n    >\n      <!--\n      Icon k\u00EDnh l\u00FAp LU\u00D4N hi\u1EC7n. B\u1EA3n c\u0169 \u1EA9n n\u00F3 khi `multiple` \u0111\u00E3 c\u00F3 gi\u00E1 tr\u1ECB\n      (`@if (!multiple() || !value() || value()?.length === 0)`) \u2014 ch\u1ECDn m\u1ED9t th\u1EBB\n      l\u00E0 icon bi\u1EBFn m\u1EA5t, xo\u00E1 h\u1EBFt th\u1EBB th\u00EC n\u00F3 quay l\u1EA1i. \u0110o 2026-09-17 tr\u00EAn\n      `/autocomplete`: \u00F4 \u0111\u01A1n ch\u1ECDn 1 icon `magnifer`, \u00F4 \u0111a ch\u1ECDn **0 icon** khi\n      c\u00F3 2 th\u1EBB.\n\n      Figma kh\u00F4ng c\u00F3 c\u01A1 s\u1EDF cho vi\u1EC7c \u1EA9n: \u0111\u1ECDc `ol-autocomplete-examples`\n      (#1149:53126) th\u00EC **6/6 Type \u0111\u1EC1u c\u00F3 `search` trong `ol-input`**, kh\u00F4ng\n      Type n\u00E0o b\u1ECF. Figma c\u0169ng kh\u00F4ng v\u1EBD bi\u1EBFn th\u1EC3 \u0111a ch\u1ECDn c\u00F3 th\u1EBB, n\u00EAn \u0111\u00E2y l\u00E0 l\u1EF1a\n      ch\u1ECDn c\u1EE7a code ch\u1EE9 kh\u00F4ng ph\u1EA3i thi\u1EBFt k\u1EBF.\n\n      `shrink-0` \u0111\u1EC3 icon kh\u00F4ng b\u1ECB c\u00E1c th\u1EBB \u00E9p b\u1EB9p khi \u00F4 ch\u1EADt.\n    -->\n      <ol-icon name=\"magnifer\" size=\"sm\" class=\"shrink-0 me-0.5\" />\n\n      <!-- Multiple Selected Tags / Chips -->\n      @if (multiple() && value() && value()?.length > 0) {\n        @for (itemVal of value(); track itemVal) {\n          <!--\n          `h-6` c\u1ED1 \u0111\u1ECBnh (24px): \u0111\u1EC3 th\u1EBB t\u1EF1 co theo n\u1ED9i dung th\u00EC m\u1ED7i th\u1EBB cao m\u1ED9t\n          ki\u1EC3u v\u00E0 \u00F4 nh\u1EADp b\u1ECB \u0111\u1EA9y theo th\u1EBB cao nh\u1EA5t. 24px + \u0111\u1EC7m d\u1ECDc 4\u00D72 = 32px,\n          v\u1EABn n\u1EB1m trong `min-h-10` (40px) n\u00EAn \u00F4 \u0111a ch\u1ECDn cao \u0111\u00FAng b\u1EB1ng \u00F4 \u0111\u01A1n ch\u1ECDn.\n        -->\n          <span\n            class=\"inline-flex h-6 items-center gap-1 px-2 text-xs font-medium bg-brand-softer text-fg-brand-strong rounded-md border border-brand-subtle shrink-0\"\n          >\n            <span>{{ getDisplayLabelForValue(itemVal) }}</span>\n            @if (!disabled() && !readonly()) {\n              <!-- Vu\u00F4ng nh\u01B0 n\u00FAt xo\u00E1 chung \u2014 xem l\u00FD do \u1EDF \u0111\u00F3. -->\n              <button\n                type=\"button\"\n                (click)=\"removeTag(itemVal, $event)\"\n                [attr.aria-label]=\"'G\u1EE1 ' + getDisplayLabelForValue(itemVal)\"\n                class=\"inline-flex size-4 shrink-0 items-center justify-center rounded-full text-fg-brand hover:text-fg-brand-strong focus:outline-hidden\"\n              >\n                <ol-icon name=\"close\" size=\"xs\" />\n              </button>\n            }\n          </span>\n        }\n      }\n\n      <!-- Input text field -->\n      <input\n        [id]=\"inputId()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-describedby]=\"describedBy()\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"listboxId()\"\n        [attr.aria-activedescendant]=\"activeOptionId()\"\n        type=\"text\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [placeholder]=\"multiple() && value()?.length > 0 ? '' : placeholder()\"\n        [ngModel]=\"searchQuery()\"\n        (ngModelChange)=\"onSearchChange($event)\"\n        (focus)=\"onInputFocus()\"\n        (keydown)=\"onKeyDown($event)\"\n        class=\"flex-1 bg-transparent border-0 outline-none placeholder:text-body-subtle font-normal text-heading\"\n        [ngClass]=\"fieldTextClass() + ' ' + (hasChips() ? 'min-w-0 focus:min-w-16' : 'min-w-20')\"\n      />\n\n      <!--\n        M\u1ED8T \u00F4 \u0111i\u1EC1u khi\u1EC3n, \u0111\u1ED5i vai theo tr\u1EA1ng th\u00E1i \u2014 n\u00FAt xo\u00E1, chevron ho\u1EB7c\n        spinner, kh\u00F4ng x\u1EBFp c\u1EA1nh nhau (b\u1EA3n c\u0169 hi\u1EC7n c\u00F9ng l\u00FAc 3\u20134 ph\u1EA7n t\u1EED). \u00D4 r\u1ED9ng\n        \u0111\u00FAng b\u1EB1ng icon (`controlClass`): ch\u1EEF \u2194 icon 8px nh\u01B0 Figma.\n      -->\n      <!--\n        Ch\u1ECDn nhi\u1EC1u: c\u1EE5m n\u00FAt ra kh\u1ECFi lu\u1ED3ng (absolute, nh\u01B0 ol-select) v\u00E0 khung\n        ch\u1EEBa pe-9. \u0110\u1EC3 trong lu\u1ED3ng th\u00EC c\u1EE5m n\u00FAt + \u00F4 g\u00F5 kh\u00F4ng v\u1EEBa ph\u1EA7n c\u00F2n l\u1EA1i c\u1EE7a\n        d\u00F2ng chip cu\u1ED1i, c\u00F9ng r\u1EDBt xu\u1ED1ng m\u1ED9t d\u00F2ng m\u1EDBi ch\u1EC9 ch\u1EE9a kho\u1EA3ng tr\u1ED1ng \u2014 \u0111o\n        2026-09-29: d\u01B0 31\u201336px \u1EDF m\u1ECDi ki\u1EC3u v\u00E0 c\u1EE1.\n      -->\n      <div [class]=\"controlClass()\">\n        @if (loading()) {\n          <ol-spinner size=\"xs\" color=\"brand\" />\n        } @else if (\n          (searchQuery() || (multiple() && value()?.length > 0) || (!multiple() && value())) &&\n          !disabled() &&\n          !readonly()\n        ) {\n          <!--\n          N\u00FAt b\u1ECDc `size-4` \u0110\u00DANG B\u1EB0NG icon, kh\u00F4ng `size-6`.\n\n          `size-6` (24px) b\u1ECDc SVG 16px th\u00EC d\u01B0 4px m\u1ED7i b\u00EAn, \u0111\u1EA9y icon v\u00E0o trong:\n          \u0111o 2026-09-17 th\u1EA5y \u00F4 \u0111ang hi\u1EC7n n\u00FAt xo\u00E1 c\u00F3 l\u1EC1 ph\u1EA3i **19px** trong khi\n          \u00F4 hi\u1EC7n chevron tr\u1EA7n ch\u1EC9 15px \u2014 c\u00F9ng m\u1ED9t component m\u00E0 hai tr\u1EA1ng th\u00E1i\n          l\u1EC7ch nhau 4px, \u0111\u00FAng ch\u1ED7 anh ch\u1EC9 trong \u1EA3nh.\n\n          V\u00F9ng b\u1EA5m v\u1EABn \u0111\u1EE7 l\u1EDBn nh\u1EDD `p-1` \u1EDF NGO\u00C0I khung \u0111o: `size-4` + \u0111\u1EC7m\n          kh\u00F4ng c\u1ED9ng v\u00E0o b\u1EC1 r\u1ED9ng chi\u1EBFm ch\u1ED7 v\u00EC n\u00FAt n\u1EB1m trong \u00F4 `w-7` c\u1ED1 \u0111\u1ECBnh.\n        -->\n          <button\n            type=\"button\"\n            (click)=\"clearAll($event)\"\n            aria-label=\"Xo\u00E1 to\u00E0n b\u1ED9 l\u1EF1a ch\u1ECDn\"\n            class=\"inline-flex size-4 shrink-0 items-center justify-center rounded-full text-body-subtle transition-colors hover:text-heading\"\n          >\n            <ol-icon name=\"close\" size=\"sm\" />\n          </button>\n        } @else {\n          <ol-icon\n            name=\"chevron-down\"\n            size=\"sm\"\n            class=\"transition-transform\"\n            [class.rotate-180]=\"isOpen()\"\n          />\n        }\n      </div>\n    </div>\n  </ol-field-frame>\n\n  <!--\n    Dropdown Suggestions Menu.\n\n    Token \u0111\u1ECDc t\u1EEB Figma `ol-autocomplete-menu` (#1149:53147, Type=Default):\n    bo g\u00F3c 12px \u00B7 \u0111\u1EC7m 8px \u00B7 n\u1EC1n `bg-neutral-primary-medium` \u00B7 vi\u1EC1n\n    `border-default-medium`.\n\n    Hai token n\u1EC1n/vi\u1EC1n TR\u00D9NG NHAU \u1EDF ch\u1EBF \u0111\u1ED9 s\u00E1ng n\u00EAn \u0111\u1ED5i hay kh\u00F4ng nh\u00ECn c\u0169ng\n    th\u1EBF \u2014 nh\u01B0ng CH\u1EBE \u0110\u1ED8 T\u1ED0I kh\u00E1c h\u1EB3n: `bg-primary` l\u00E0 gray-950 (g\u1EA7n \u0111en, panel\n    ch\u00ECm v\u00E0o n\u1EC1n) c\u00F2n `bg-primary-medium` l\u00E0 gray-800 (panel n\u1ED5i l\u00EAn).\n    `ol-select` c\u00F9ng l\u1EC7ch n\u00E0y, s\u1EEDa chung m\u1ED9t l\u01B0\u1EE3t.\n  -->\n  @if (isOpen()) {\n    <div\n      #panel\n      [id]=\"listboxId()\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || 'G\u1EE3i \u00FD'\"\n      class=\"absolute z-dropdown bg-neutral-primary-medium border border-default-medium rounded-md shadow-lg max-h-[var(--ol-overlay-max-height,15rem)] overflow-y-auto overflow-x-hidden p-2 animate-in fade-in zoom-in-95 duration-150\"\n      [class.w-full]=\"matchTriggerWidth()\"\n      [class]=\"menuClass()\"\n    >\n      @if (filteredOptions().length > 0) {\n        @for (item of filteredOptions(); track getItemValue(item); let idx = $index) {\n          <!-- Ti\u00EAu \u0111\u1EC1 nh\u00F3m ch\u00E8n gi\u1EEFa v\u00F2ng l\u1EB7p ph\u1EB3ng, xem `groupNameAt`. -->\n          @if (groupNameAt(idx); as groupName) {\n            <div\n              role=\"presentation\"\n              class=\"px-3 pt-2 pb-1 text-xs font-semibold uppercase tracking-wide text-body-subtle\"\n            >\n              {{ groupName }}\n            </div>\n          }\n          <div\n            [id]=\"optionId(idx)\"\n            role=\"option\"\n            [attr.aria-selected]=\"isSelected(item)\"\n            [attr.aria-disabled]=\"item?.disabled ? 'true' : null\"\n            (click)=\"selectOption(item)\"\n            class=\"flex items-center justify-between px-3 py-2 text-sm rounded-lg cursor-pointer transition-colors\"\n            [class.bg-brand-softer]=\"isSelected(item) || activeIndex() === idx\"\n            [class.hover:bg-neutral-tertiary-medium]=\"!isSelected(item) && activeIndex() !== idx\"\n            [class.opacity-50]=\"item?.disabled\"\n            [class.cursor-not-allowed]=\"item?.disabled\"\n          >\n            @if (optionTemplate) {\n              <!-- Custom Option Template -->\n              <ng-container\n                *ngTemplateOutlet=\"\n                  optionTemplate;\n                  context: { $implicit: item, selected: isSelected(item) }\n                \"\n              />\n            } @else {\n              <!-- Default Option Display -->\n              <div class=\"flex items-center gap-2.5 overflow-hidden\">\n                @if (item?.avatar) {\n                  <img\n                    [src]=\"item.avatar\"\n                    alt=\"\u1EA2nh \u0111\u1EA1i di\u1EC7n\"\n                    class=\"w-7 h-7 rounded-full object-cover shrink-0\"\n                  />\n                }\n                <div class=\"truncate\">\n                  <span class=\"font-medium text-heading block truncate\">{{\n                    getItemLabel(item)\n                  }}</span>\n                  @if (item?.subLabel) {\n                    <span class=\"text-xs text-body-subtle block truncate\">{{ item.subLabel }}</span>\n                  }\n                </div>\n              </div>\n\n              <div class=\"flex items-center gap-2 shrink-0 ms-2\">\n                @if (item?.badge) {\n                  <span\n                    class=\"px-1.5 py-0.5 text-2xs font-medium rounded bg-neutral-tertiary-medium text-body\"\n                  >\n                    {{ item.badge }}\n                  </span>\n                }\n                @if (isSelected(item)) {\n                  <ol-icon name=\"check\" size=\"sm\" />\n                }\n              </div>\n            }\n          </div>\n        }\n      } @else if (waitingForTerm()) {\n        <!--\n          Ch\u1EBF \u0111\u1ED9 L\u1ECCC T\u1EEA XA, ch\u01B0a g\u00F5 \u0111\u1EE7 `minTermLength`. Ph\u1EA3i l\u00E0 th\u00F4ng b\u00E1o RI\u00CANG\n          ch\u1EE9 kh\u00F4ng d\u00F9ng `emptyText`: \"Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3\" l\u00E0 sai s\u1EF1 th\u1EADt \u2014\n          ch\u01B0a t\u00ECm g\u00EC c\u1EA3. C\u00F9ng l\u1ED1i v\u1EDBi `typeToSearchText` c\u1EE7a ng-select.\n        -->\n        <div class=\"p-3 text-center text-sm text-body-subtle\">\n          <p>{{ typeToSearchText() }}</p>\n        </div>\n      } @else {\n        <!-- Empty State & Allow Create Option -->\n        <div class=\"p-3 text-center text-sm text-body-subtle\">\n          <p>{{ emptyText() }}</p>\n          @if (allowCreate() && searchQuery().trim()) {\n            <button\n              type=\"button\"\n              (click)=\"onCreateNew()\"\n              class=\"mt-2 inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-fg-brand bg-brand-softer hover:bg-brand-subtle rounded-lg transition-colors\"\n            >\n              <ol-icon name=\"plus\" size=\"xs\" />\n              <span>Th\u00EAm m\u1EDBi: \"{{ searchQuery().trim() }}\"</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Helper Text & Error Text -->\n  @if (state() === 'error' && errorText()) {\n    <p class=\"mt-1.5 text-xs text-fg-danger\">{{ errorText() }}</p>\n  } @else if (helperText()) {\n    <p class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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"] }, { kind: "component", type: OlSpinner, selector: "ol-spinner", inputs: ["variant", "size", "color", "ariaLabel"] }, { kind: "component", type: OlFieldFrame, selector: "ol-field-frame", inputs: ["enabled", "label", "forId", "labelId", "variant", "size", "state", "disabled", "required", "hasValue", "open", "floatStart"] }, { kind: "component", type: OlFieldLabel, selector: "ol-field-label", inputs: ["text", "forId", "labelId", "required", "helpIcon", "helpTooltip", "flush", "beside", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlAutocomplete, decorators: [{
             type: Component,
-            args: [{ selector: 'ol-autocomplete', standalone: true, imports: [CommonModule, FormsModule, OlIcon, OlSpinner], host: {
+            args: [{ selector: 'ol-autocomplete', standalone: true, imports: [CommonModule, FormsModule, OlIcon, OlSpinner, OlFieldFrame, OlFieldLabel], 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
@@ -13786,8 +14760,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                             useExisting: forwardRef(() => OlAutocomplete),
                             multi: true,
                         },
-                    ], template: "<div class=\"relative w-full\">\n  @if (label()) {\n    <div class=\"flex items-center justify-between mb-1.5\">\n      <label\n        [for]=\"inputId()\"\n        class=\"inline-flex items-center gap-1 text-sm font-medium text-heading\"\n      >\n        <span>{{ label() }}</span>\n        @if (required() || showAsterisk()) {\n          <span class=\"text-fg-danger font-bold\">*</span>\n        }\n      </label>\n    </div>\n  }\n\n  <!--\n    Main Input Box Container.\n\n    `py-1` ch\u1EE9 KH\u00D4NG ph\u1EA3i `p-1.5` cho ch\u1EBF \u0111\u1ED9 multiple: `p-1.5` \u0111\u1EC7m M\u1ECCI PH\u00CDA 6px,\n    c\u1ED9ng v\u00E0o n\u1ED9i dung 34px th\u00E0nh 46px \u2014 v\u01B0\u1EE3t `min-h-10` (40px). \u0110o 2026-09-17:\n    \u00F4 \u0111a ch\u1ECDn cao **46px** trong khi \u00F4 \u0111\u01A1n ch\u1ECDn ngay c\u1EA1nh cao **40px**, hai \u00F4\n    c\u00F9ng m\u1ED9t h\u00E0ng l\u01B0\u1EDBi n\u00EAn l\u1EC7ch th\u1EA5y r\u00F5. \u0110\u1EC7m d\u1ECDc 4px v\u1EEBa \u0111\u1EE7 cho th\u1EBB cao 24px\n    (4 + 24 + 4 = 32 < 40) m\u00E0 v\u1EABn c\u00F2n ch\u1ED7 khi th\u1EBB xu\u1ED1ng d\u00F2ng th\u1EE9 hai.\n\n    `content-center` \u0111i k\u00E8m `items-center`: v\u1EDBi `flex-wrap`, `items-center` ch\u1EC9\n    c\u0103n gi\u1EEFa TRONG T\u1EEANG D\u00D2NG, c\u1EA3 kh\u1ED1i nhi\u1EC1u d\u00F2ng v\u1EABn d\u00EDnh m\u00E9p tr\u00EAn.\n  -->\n  <div\n    class=\"relative flex items-center content-center flex-wrap gap-1.5 w-full border shadow-xs\"\n    [class.border-default-medium]=\"!isOpen() && state() === 'default'\"\n    [class.rounded-md]=\"true\"\n    [class.min-h-9]=\"resolvedSize() === 'sm'\"\n    [class.min-h-10]=\"resolvedSize() === 'base'\"\n    [class.min-h-12]=\"resolvedSize() === 'lg'\"\n    [class.min-h-13]=\"resolvedSize() === 'xl'\"\n    [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled() && !readonly()\"\n    [class.border-brand]=\"isOpen() && state() === 'default'\"\n    [class.ring-2]=\"isOpen()\"\n    [class.ring-brand-subtle]=\"isOpen()\"\n    [class.border-danger]=\"state() === 'error' && !disabled()\"\n    [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n    [class.border-success]=\"state() === 'success' && !disabled()\"\n    [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n    [class.bg-disabled]=\"disabled() || readonly()\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    [class.opacity-60]=\"disabled()\"\n    [ngClass]=\"multiple() ? 'px-1.5 py-1' : fieldPaddingClass()\"\n  >\n    <!--\n      Icon k\u00EDnh l\u00FAp LU\u00D4N hi\u1EC7n. B\u1EA3n c\u0169 \u1EA9n n\u00F3 khi `multiple` \u0111\u00E3 c\u00F3 gi\u00E1 tr\u1ECB\n      (`@if (!multiple() || !value() || value()?.length === 0)`) \u2014 ch\u1ECDn m\u1ED9t th\u1EBB\n      l\u00E0 icon bi\u1EBFn m\u1EA5t, xo\u00E1 h\u1EBFt th\u1EBB th\u00EC n\u00F3 quay l\u1EA1i. \u0110o 2026-09-17 tr\u00EAn\n      `/autocomplete`: \u00F4 \u0111\u01A1n ch\u1ECDn 1 icon `magnifer`, \u00F4 \u0111a ch\u1ECDn **0 icon** khi\n      c\u00F3 2 th\u1EBB.\n\n      Figma kh\u00F4ng c\u00F3 c\u01A1 s\u1EDF cho vi\u1EC7c \u1EA9n: \u0111\u1ECDc `ol-autocomplete-examples`\n      (#1149:53126) th\u00EC **6/6 Type \u0111\u1EC1u c\u00F3 `search` trong `ol-input`**, kh\u00F4ng\n      Type n\u00E0o b\u1ECF. Figma c\u0169ng kh\u00F4ng v\u1EBD bi\u1EBFn th\u1EC3 \u0111a ch\u1ECDn c\u00F3 th\u1EBB, n\u00EAn \u0111\u00E2y l\u00E0 l\u1EF1a\n      ch\u1ECDn c\u1EE7a code ch\u1EE9 kh\u00F4ng ph\u1EA3i thi\u1EBFt k\u1EBF.\n\n      `shrink-0` \u0111\u1EC3 icon kh\u00F4ng b\u1ECB c\u00E1c th\u1EBB \u00E9p b\u1EB9p khi \u00F4 ch\u1EADt.\n    -->\n    <ol-icon name=\"magnifer\" size=\"sm\" class=\"shrink-0\" />\n\n    <!-- Multiple Selected Tags / Chips -->\n    @if (multiple() && value() && value()?.length > 0) {\n      @for (itemVal of value(); track itemVal) {\n        <!--\n          `h-6` c\u1ED1 \u0111\u1ECBnh (24px): \u0111\u1EC3 th\u1EBB t\u1EF1 co theo n\u1ED9i dung th\u00EC m\u1ED7i th\u1EBB cao m\u1ED9t\n          ki\u1EC3u v\u00E0 \u00F4 nh\u1EADp b\u1ECB \u0111\u1EA9y theo th\u1EBB cao nh\u1EA5t. 24px + \u0111\u1EC7m d\u1ECDc 4\u00D72 = 32px,\n          v\u1EABn n\u1EB1m trong `min-h-10` (40px) n\u00EAn \u00F4 \u0111a ch\u1ECDn cao \u0111\u00FAng b\u1EB1ng \u00F4 \u0111\u01A1n ch\u1ECDn.\n        -->\n        <span\n          class=\"inline-flex h-6 items-center gap-1 px-2 text-xs font-medium bg-brand-softer text-fg-brand-strong rounded-md border border-brand-subtle shrink-0\"\n        >\n          <span>{{ getDisplayLabelForValue(itemVal) }}</span>\n          @if (!disabled() && !readonly()) {\n            <!-- Vu\u00F4ng nh\u01B0 n\u00FAt xo\u00E1 chung \u2014 xem l\u00FD do \u1EDF \u0111\u00F3. -->\n            <button\n              type=\"button\"\n              (click)=\"removeTag(itemVal, $event)\"\n              [attr.aria-label]=\"'G\u1EE1 ' + getDisplayLabelForValue(itemVal)\"\n              class=\"inline-flex size-4 shrink-0 items-center justify-center rounded-full text-fg-brand hover:text-fg-brand-strong focus:outline-hidden\"\n            >\n              <ol-icon name=\"close\" size=\"xs\" />\n            </button>\n          }\n        </span>\n      }\n    }\n\n    <!-- Input text field -->\n    <input\n      [id]=\"inputId()\"\n      [attr.aria-invalid]=\"ariaInvalid()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"listboxId()\"\n      [attr.aria-activedescendant]=\"activeOptionId()\"\n      type=\"text\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [placeholder]=\"multiple() && value()?.length > 0 ? '' : placeholder()\"\n      [ngModel]=\"searchQuery()\"\n      (ngModelChange)=\"onSearchChange($event)\"\n      (focus)=\"onInputFocus()\"\n      (keydown)=\"onKeyDown($event)\"\n      class=\"flex-1 min-w-20 bg-transparent border-0 outline-none placeholder:text-body-subtle font-normal text-heading\"\n      [ngClass]=\"fieldTextClass()\"\n    />\n\n    <!-- M\u1ED8T \u00F4 \u0111i\u1EC1u khi\u1EC3n, \u0111\u1ED5i vai theo tr\u1EA1ng th\u00E1i \u2014 kh\u00F4ng x\u1EBFp c\u1EA1nh nhau.\n         Tr\u01B0\u1EDBc \u0111\u00E2y n\u00FAt xo\u00E1 v\u00E0 `chevron-down` C\u00D9NG hi\u1EC7n: \u0111o /autocomplete ng\u00E0y\n         2026-09-16 \u0111\u1EBFm 3 ph\u1EA7n t\u1EED chen trong c\u1EE5m 44px, c\u1ED9ng spinner khi `loading`\n         l\u00E0 b\u1ED1n. \u00D4 r\u1ED9ng c\u1ED1 \u0111\u1ECBnh `w-7` \u0111\u1EC3 khung kh\u00F4ng nh\u1EA3y khi icon \u0111\u1ED5i vai.\n\n         `justify-end` ch\u1EE9 KH\u00D4NG `justify-center`: \u00F4 r\u1ED9ng 28px m\u00E0 icon ch\u1EC9 16px\n         n\u00EAn c\u0103n gi\u1EEFa \u0111\u1EC3 d\u01B0 6px m\u1ED7i b\u00EAn, \u0111\u1EA9y icon v\u00E0o trong. \u0110o 2026-09-17 tr\u00EAn\n         13 \u00F4 c\u1EE7a /autocomplete: l\u1EC1 tr\u00E1i 15px, l\u1EC1 ph\u1EA3i **21px** \u2014 l\u1EC7ch \u0111\u00FAng 6px\n         \u1EDF M\u1ECCI \u00F4, c\u1EA3 \u0111\u01A1n ch\u1ECDn l\u1EABn \u0111a ch\u1ECDn. Con s\u1ED1 kh\u00F4ng \u0111\u1ED5i theo n\u1ED9i dung n\u00EAn\n         \u0111\u00E2y l\u00E0 l\u1ED7i c\u1EA5u tr\u00FAc, kh\u00F4ng ph\u1EA3i do ch\u1EEF d\u00E0i ng\u1EAFn.\n\n         `ol-select` \u0111\u00E3 ch\u1ED1t `justify-end` t\u1EEB l\u01B0\u1EE3t tr\u01B0\u1EDBc; \u0111\u00E2y l\u00E0 l\u1EA7n s\u1EEDa cho\n         hai component kh\u1EDBp nhau. -->\n    <div class=\"ms-auto flex w-7 shrink-0 items-center justify-end\">\n      @if (loading()) {\n        <ol-spinner size=\"xs\" color=\"brand\" />\n      } @else if (\n        (searchQuery() || (multiple() && value()?.length > 0) || (!multiple() && value())) &&\n        !disabled() &&\n        !readonly()\n      ) {\n        <!--\n          N\u00FAt b\u1ECDc `size-4` \u0110\u00DANG B\u1EB0NG icon, kh\u00F4ng `size-6`.\n\n          `size-6` (24px) b\u1ECDc SVG 16px th\u00EC d\u01B0 4px m\u1ED7i b\u00EAn, \u0111\u1EA9y icon v\u00E0o trong:\n          \u0111o 2026-09-17 th\u1EA5y \u00F4 \u0111ang hi\u1EC7n n\u00FAt xo\u00E1 c\u00F3 l\u1EC1 ph\u1EA3i **19px** trong khi\n          \u00F4 hi\u1EC7n chevron tr\u1EA7n ch\u1EC9 15px \u2014 c\u00F9ng m\u1ED9t component m\u00E0 hai tr\u1EA1ng th\u00E1i\n          l\u1EC7ch nhau 4px, \u0111\u00FAng ch\u1ED7 anh ch\u1EC9 trong \u1EA3nh.\n\n          V\u00F9ng b\u1EA5m v\u1EABn \u0111\u1EE7 l\u1EDBn nh\u1EDD `p-1` \u1EDF NGO\u00C0I khung \u0111o: `size-4` + \u0111\u1EC7m\n          kh\u00F4ng c\u1ED9ng v\u00E0o b\u1EC1 r\u1ED9ng chi\u1EBFm ch\u1ED7 v\u00EC n\u00FAt n\u1EB1m trong \u00F4 `w-7` c\u1ED1 \u0111\u1ECBnh.\n        -->\n        <button\n          type=\"button\"\n          (click)=\"clearAll($event)\"\n          aria-label=\"Xo\u00E1 to\u00E0n b\u1ED9 l\u1EF1a ch\u1ECDn\"\n          class=\"inline-flex size-4 shrink-0 items-center justify-center rounded-full text-body-subtle transition-colors hover:text-heading\"\n        >\n          <ol-icon name=\"close\" size=\"sm\" />\n        </button>\n      } @else {\n        <ol-icon\n          name=\"chevron-down\"\n          size=\"sm\"\n          class=\"transition-transform\"\n          [class.rotate-180]=\"isOpen()\"\n        />\n      }\n    </div>\n  </div>\n\n  <!--\n    Dropdown Suggestions Menu.\n\n    Token \u0111\u1ECDc t\u1EEB Figma `ol-autocomplete-menu` (#1149:53147, Type=Default):\n    bo g\u00F3c 12px \u00B7 \u0111\u1EC7m 8px \u00B7 n\u1EC1n `bg-neutral-primary-medium` \u00B7 vi\u1EC1n\n    `border-default-medium`.\n\n    Hai token n\u1EC1n/vi\u1EC1n TR\u00D9NG NHAU \u1EDF ch\u1EBF \u0111\u1ED9 s\u00E1ng n\u00EAn \u0111\u1ED5i hay kh\u00F4ng nh\u00ECn c\u0169ng\n    th\u1EBF \u2014 nh\u01B0ng CH\u1EBE \u0110\u1ED8 T\u1ED0I kh\u00E1c h\u1EB3n: `bg-primary` l\u00E0 gray-950 (g\u1EA7n \u0111en, panel\n    ch\u00ECm v\u00E0o n\u1EC1n) c\u00F2n `bg-primary-medium` l\u00E0 gray-800 (panel n\u1ED5i l\u00EAn).\n    `ol-select` c\u00F9ng l\u1EC7ch n\u00E0y, s\u1EEDa chung m\u1ED9t l\u01B0\u1EE3t.\n  -->\n  @if (isOpen()) {\n    <div\n      #panel\n      [id]=\"listboxId()\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || 'G\u1EE3i \u00FD'\"\n      class=\"absolute z-dropdown bg-neutral-primary-medium border border-default-medium rounded-md shadow-lg max-h-[var(--ol-overlay-max-height,15rem)] overflow-y-auto overflow-x-hidden p-2 animate-in fade-in zoom-in-95 duration-150\"\n      [class.w-full]=\"matchTriggerWidth()\"\n      [class]=\"menuClass()\"\n    >\n      @if (filteredOptions().length > 0) {\n        @for (item of filteredOptions(); track getItemValue(item); let idx = $index) {\n          <!-- Ti\u00EAu \u0111\u1EC1 nh\u00F3m ch\u00E8n gi\u1EEFa v\u00F2ng l\u1EB7p ph\u1EB3ng, xem `groupNameAt`. -->\n          @if (groupNameAt(idx); as groupName) {\n            <div\n              role=\"presentation\"\n              class=\"px-3 pt-2 pb-1 text-xs font-semibold uppercase tracking-wide text-body-subtle\"\n            >\n              {{ groupName }}\n            </div>\n          }\n          <div\n            [id]=\"optionId(idx)\"\n            role=\"option\"\n            [attr.aria-selected]=\"isSelected(item)\"\n            [attr.aria-disabled]=\"item?.disabled ? 'true' : null\"\n            (click)=\"selectOption(item)\"\n            class=\"flex items-center justify-between px-3 py-2 text-sm rounded-lg cursor-pointer transition-colors\"\n            [class.bg-brand-softer]=\"isSelected(item) || activeIndex() === idx\"\n            [class.hover:bg-neutral-tertiary-medium]=\"!isSelected(item) && activeIndex() !== idx\"\n            [class.opacity-50]=\"item?.disabled\"\n            [class.cursor-not-allowed]=\"item?.disabled\"\n          >\n            @if (optionTemplate) {\n              <!-- Custom Option Template -->\n              <ng-container\n                *ngTemplateOutlet=\"\n                  optionTemplate;\n                  context: { $implicit: item, selected: isSelected(item) }\n                \"\n              />\n            } @else {\n              <!-- Default Option Display -->\n              <div class=\"flex items-center gap-2.5 overflow-hidden\">\n                @if (item?.avatar) {\n                  <img\n                    [src]=\"item.avatar\"\n                    alt=\"\u1EA2nh \u0111\u1EA1i di\u1EC7n\"\n                    class=\"w-7 h-7 rounded-full object-cover shrink-0\"\n                  />\n                }\n                <div class=\"truncate\">\n                  <span class=\"font-medium text-heading block truncate\">{{\n                    getItemLabel(item)\n                  }}</span>\n                  @if (item?.subLabel) {\n                    <span class=\"text-xs text-body-subtle block truncate\">{{ item.subLabel }}</span>\n                  }\n                </div>\n              </div>\n\n              <div class=\"flex items-center gap-2 shrink-0 ms-2\">\n                @if (item?.badge) {\n                  <span\n                    class=\"px-1.5 py-0.5 text-2xs font-medium rounded bg-neutral-tertiary-medium text-body\"\n                  >\n                    {{ item.badge }}\n                  </span>\n                }\n                @if (isSelected(item)) {\n                  <ol-icon name=\"check\" size=\"sm\" />\n                }\n              </div>\n            }\n          </div>\n        }\n      } @else if (waitingForTerm()) {\n        <!--\n          Ch\u1EBF \u0111\u1ED9 L\u1ECCC T\u1EEA XA, ch\u01B0a g\u00F5 \u0111\u1EE7 `minTermLength`. Ph\u1EA3i l\u00E0 th\u00F4ng b\u00E1o RI\u00CANG\n          ch\u1EE9 kh\u00F4ng d\u00F9ng `emptyText`: \"Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3\" l\u00E0 sai s\u1EF1 th\u1EADt \u2014\n          ch\u01B0a t\u00ECm g\u00EC c\u1EA3. C\u00F9ng l\u1ED1i v\u1EDBi `typeToSearchText` c\u1EE7a ng-select.\n        -->\n        <div class=\"p-3 text-center text-sm text-body-subtle\">\n          <p>{{ typeToSearchText() }}</p>\n        </div>\n      } @else {\n        <!-- Empty State & Allow Create Option -->\n        <div class=\"p-3 text-center text-sm text-body-subtle\">\n          <p>{{ emptyText() }}</p>\n          @if (allowCreate() && searchQuery().trim()) {\n            <button\n              type=\"button\"\n              (click)=\"onCreateNew()\"\n              class=\"mt-2 inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-fg-brand bg-brand-softer hover:bg-brand-subtle rounded-lg transition-colors\"\n            >\n              <ol-icon name=\"plus\" size=\"xs\" />\n              <span>Th\u00EAm m\u1EDBi: \"{{ searchQuery().trim() }}\"</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Helper Text & Error Text -->\n  @if (state() === 'error' && errorText()) {\n    <p class=\"mt-1.5 text-xs text-fg-danger\">{{ errorText() }}</p>\n  } @else if (helperText()) {\n    <p class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAsterisk", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], allowCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCreate", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], menuClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuClass", required: false }] }], matchTriggerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchTriggerWidth", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], remoteSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "remoteSearch", required: false }] }], minTermLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTermLength", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], typeToSearchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeToSearchText", required: false }] }], createOption: [{ type: i0.Output, args: ["createOption"] }], search: [{ type: i0.Output, args: ["search"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], added: [{ type: i0.Output, args: ["added"] }], removed: [{ type: i0.Output, args: ["removed"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], optionTemplate: [{
+                    ], template: "<div class=\"relative w-full\" [class]=\"labelLayout()\" [style.--ol-label-w]=\"labelWidth() || null\">\n  @if (label() && !floatingLabel()) {\n    <ol-field-label\n      [beside]=\"labelBeside()\"\n      [size]=\"resolvedSize()\"\n      [text]=\"label()\"\n      [forId]=\"inputId()\"\n      [required]=\"required() || showAsterisk()\"\n    />\n  }\n\n  <ol-field-frame\n    [enabled]=\"floatingLabel()\"\n    [label]=\"label()\"\n    [forId]=\"inputId()\"\n    [variant]=\"floatingVariant()\"\n    [size]=\"resolvedSize()\"\n    [state]=\"state()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required() || showAsterisk()\"\n    [hasValue]=\"hasFloatValue()\"\n    [open]=\"isOpen()\"\n  >\n    <!--\n    Main Input Box Container.\n\n    `py-1` ch\u1EE9 KH\u00D4NG ph\u1EA3i `p-1.5` cho ch\u1EBF \u0111\u1ED9 multiple: `p-1.5` \u0111\u1EC7m M\u1ECCI PH\u00CDA 6px,\n    c\u1ED9ng v\u00E0o n\u1ED9i dung 34px th\u00E0nh 46px \u2014 v\u01B0\u1EE3t `min-h-10` (40px). \u0110o 2026-09-17:\n    \u00F4 \u0111a ch\u1ECDn cao **46px** trong khi \u00F4 \u0111\u01A1n ch\u1ECDn ngay c\u1EA1nh cao **40px**, hai \u00F4\n    c\u00F9ng m\u1ED9t h\u00E0ng l\u01B0\u1EDBi n\u00EAn l\u1EC7ch th\u1EA5y r\u00F5. \u0110\u1EC7m d\u1ECDc 4px v\u1EEBa \u0111\u1EE7 cho th\u1EBB cao 24px\n    (4 + 24 + 4 = 32 < 40) m\u00E0 v\u1EABn c\u00F2n ch\u1ED7 khi th\u1EBB xu\u1ED1ng d\u00F2ng th\u1EE9 hai.\n\n    `content-center` \u0111i k\u00E8m `items-center`: v\u1EDBi `flex-wrap`, `items-center` ch\u1EC9\n    c\u0103n gi\u1EEFa TRONG T\u1EEANG D\u00D2NG, c\u1EA3 kh\u1ED1i nhi\u1EC1u d\u00F2ng v\u1EABn d\u00EDnh m\u00E9p tr\u00EAn.\n  -->\n    <div\n      class=\"ol-field-box relative flex items-center content-center flex-wrap gap-1.5 w-full border shadow-xs\"\n      [class.border-default-medium]=\"!isOpen() && state() === 'default'\"\n      [class.rounded-md]=\"true\"\n      [class.min-h-9]=\"resolvedSize() === 'sm'\"\n      [class.min-h-10]=\"resolvedSize() === 'base'\"\n      [class.min-h-12]=\"resolvedSize() === 'lg'\"\n      [class.min-h-13]=\"resolvedSize() === 'xl'\"\n      [class.bg-neutral-secondary-medium]=\"state() === 'default' && !disabled() && !readonly()\"\n      [class.border-brand]=\"isOpen() && state() === 'default'\"\n      [class.ring-2]=\"isOpen()\"\n      [class.ring-brand-subtle]=\"isOpen()\"\n      [class.border-danger]=\"state() === 'error' && !disabled()\"\n      [class.bg-danger-soft]=\"state() === 'error' && !disabled()\"\n      [class.border-success]=\"state() === 'success' && !disabled()\"\n      [class.bg-success-soft]=\"state() === 'success' && !disabled()\"\n      [class.bg-disabled]=\"disabled() || readonly()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n      [class.opacity-60]=\"disabled()\"\n      [ngClass]=\"boxPaddingClass()\"\n    >\n      <!--\n      Icon k\u00EDnh l\u00FAp LU\u00D4N hi\u1EC7n. B\u1EA3n c\u0169 \u1EA9n n\u00F3 khi `multiple` \u0111\u00E3 c\u00F3 gi\u00E1 tr\u1ECB\n      (`@if (!multiple() || !value() || value()?.length === 0)`) \u2014 ch\u1ECDn m\u1ED9t th\u1EBB\n      l\u00E0 icon bi\u1EBFn m\u1EA5t, xo\u00E1 h\u1EBFt th\u1EBB th\u00EC n\u00F3 quay l\u1EA1i. \u0110o 2026-09-17 tr\u00EAn\n      `/autocomplete`: \u00F4 \u0111\u01A1n ch\u1ECDn 1 icon `magnifer`, \u00F4 \u0111a ch\u1ECDn **0 icon** khi\n      c\u00F3 2 th\u1EBB.\n\n      Figma kh\u00F4ng c\u00F3 c\u01A1 s\u1EDF cho vi\u1EC7c \u1EA9n: \u0111\u1ECDc `ol-autocomplete-examples`\n      (#1149:53126) th\u00EC **6/6 Type \u0111\u1EC1u c\u00F3 `search` trong `ol-input`**, kh\u00F4ng\n      Type n\u00E0o b\u1ECF. Figma c\u0169ng kh\u00F4ng v\u1EBD bi\u1EBFn th\u1EC3 \u0111a ch\u1ECDn c\u00F3 th\u1EBB, n\u00EAn \u0111\u00E2y l\u00E0 l\u1EF1a\n      ch\u1ECDn c\u1EE7a code ch\u1EE9 kh\u00F4ng ph\u1EA3i thi\u1EBFt k\u1EBF.\n\n      `shrink-0` \u0111\u1EC3 icon kh\u00F4ng b\u1ECB c\u00E1c th\u1EBB \u00E9p b\u1EB9p khi \u00F4 ch\u1EADt.\n    -->\n      <ol-icon name=\"magnifer\" size=\"sm\" class=\"shrink-0 me-0.5\" />\n\n      <!-- Multiple Selected Tags / Chips -->\n      @if (multiple() && value() && value()?.length > 0) {\n        @for (itemVal of value(); track itemVal) {\n          <!--\n          `h-6` c\u1ED1 \u0111\u1ECBnh (24px): \u0111\u1EC3 th\u1EBB t\u1EF1 co theo n\u1ED9i dung th\u00EC m\u1ED7i th\u1EBB cao m\u1ED9t\n          ki\u1EC3u v\u00E0 \u00F4 nh\u1EADp b\u1ECB \u0111\u1EA9y theo th\u1EBB cao nh\u1EA5t. 24px + \u0111\u1EC7m d\u1ECDc 4\u00D72 = 32px,\n          v\u1EABn n\u1EB1m trong `min-h-10` (40px) n\u00EAn \u00F4 \u0111a ch\u1ECDn cao \u0111\u00FAng b\u1EB1ng \u00F4 \u0111\u01A1n ch\u1ECDn.\n        -->\n          <span\n            class=\"inline-flex h-6 items-center gap-1 px-2 text-xs font-medium bg-brand-softer text-fg-brand-strong rounded-md border border-brand-subtle shrink-0\"\n          >\n            <span>{{ getDisplayLabelForValue(itemVal) }}</span>\n            @if (!disabled() && !readonly()) {\n              <!-- Vu\u00F4ng nh\u01B0 n\u00FAt xo\u00E1 chung \u2014 xem l\u00FD do \u1EDF \u0111\u00F3. -->\n              <button\n                type=\"button\"\n                (click)=\"removeTag(itemVal, $event)\"\n                [attr.aria-label]=\"'G\u1EE1 ' + getDisplayLabelForValue(itemVal)\"\n                class=\"inline-flex size-4 shrink-0 items-center justify-center rounded-full text-fg-brand hover:text-fg-brand-strong focus:outline-hidden\"\n              >\n                <ol-icon name=\"close\" size=\"xs\" />\n              </button>\n            }\n          </span>\n        }\n      }\n\n      <!-- Input text field -->\n      <input\n        [id]=\"inputId()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        [attr.aria-describedby]=\"describedBy()\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-controls]=\"listboxId()\"\n        [attr.aria-activedescendant]=\"activeOptionId()\"\n        type=\"text\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [placeholder]=\"multiple() && value()?.length > 0 ? '' : placeholder()\"\n        [ngModel]=\"searchQuery()\"\n        (ngModelChange)=\"onSearchChange($event)\"\n        (focus)=\"onInputFocus()\"\n        (keydown)=\"onKeyDown($event)\"\n        class=\"flex-1 bg-transparent border-0 outline-none placeholder:text-body-subtle font-normal text-heading\"\n        [ngClass]=\"fieldTextClass() + ' ' + (hasChips() ? 'min-w-0 focus:min-w-16' : 'min-w-20')\"\n      />\n\n      <!--\n        M\u1ED8T \u00F4 \u0111i\u1EC1u khi\u1EC3n, \u0111\u1ED5i vai theo tr\u1EA1ng th\u00E1i \u2014 n\u00FAt xo\u00E1, chevron ho\u1EB7c\n        spinner, kh\u00F4ng x\u1EBFp c\u1EA1nh nhau (b\u1EA3n c\u0169 hi\u1EC7n c\u00F9ng l\u00FAc 3\u20134 ph\u1EA7n t\u1EED). \u00D4 r\u1ED9ng\n        \u0111\u00FAng b\u1EB1ng icon (`controlClass`): ch\u1EEF \u2194 icon 8px nh\u01B0 Figma.\n      -->\n      <!--\n        Ch\u1ECDn nhi\u1EC1u: c\u1EE5m n\u00FAt ra kh\u1ECFi lu\u1ED3ng (absolute, nh\u01B0 ol-select) v\u00E0 khung\n        ch\u1EEBa pe-9. \u0110\u1EC3 trong lu\u1ED3ng th\u00EC c\u1EE5m n\u00FAt + \u00F4 g\u00F5 kh\u00F4ng v\u1EEBa ph\u1EA7n c\u00F2n l\u1EA1i c\u1EE7a\n        d\u00F2ng chip cu\u1ED1i, c\u00F9ng r\u1EDBt xu\u1ED1ng m\u1ED9t d\u00F2ng m\u1EDBi ch\u1EC9 ch\u1EE9a kho\u1EA3ng tr\u1ED1ng \u2014 \u0111o\n        2026-09-29: d\u01B0 31\u201336px \u1EDF m\u1ECDi ki\u1EC3u v\u00E0 c\u1EE1.\n      -->\n      <div [class]=\"controlClass()\">\n        @if (loading()) {\n          <ol-spinner size=\"xs\" color=\"brand\" />\n        } @else if (\n          (searchQuery() || (multiple() && value()?.length > 0) || (!multiple() && value())) &&\n          !disabled() &&\n          !readonly()\n        ) {\n          <!--\n          N\u00FAt b\u1ECDc `size-4` \u0110\u00DANG B\u1EB0NG icon, kh\u00F4ng `size-6`.\n\n          `size-6` (24px) b\u1ECDc SVG 16px th\u00EC d\u01B0 4px m\u1ED7i b\u00EAn, \u0111\u1EA9y icon v\u00E0o trong:\n          \u0111o 2026-09-17 th\u1EA5y \u00F4 \u0111ang hi\u1EC7n n\u00FAt xo\u00E1 c\u00F3 l\u1EC1 ph\u1EA3i **19px** trong khi\n          \u00F4 hi\u1EC7n chevron tr\u1EA7n ch\u1EC9 15px \u2014 c\u00F9ng m\u1ED9t component m\u00E0 hai tr\u1EA1ng th\u00E1i\n          l\u1EC7ch nhau 4px, \u0111\u00FAng ch\u1ED7 anh ch\u1EC9 trong \u1EA3nh.\n\n          V\u00F9ng b\u1EA5m v\u1EABn \u0111\u1EE7 l\u1EDBn nh\u1EDD `p-1` \u1EDF NGO\u00C0I khung \u0111o: `size-4` + \u0111\u1EC7m\n          kh\u00F4ng c\u1ED9ng v\u00E0o b\u1EC1 r\u1ED9ng chi\u1EBFm ch\u1ED7 v\u00EC n\u00FAt n\u1EB1m trong \u00F4 `w-7` c\u1ED1 \u0111\u1ECBnh.\n        -->\n          <button\n            type=\"button\"\n            (click)=\"clearAll($event)\"\n            aria-label=\"Xo\u00E1 to\u00E0n b\u1ED9 l\u1EF1a ch\u1ECDn\"\n            class=\"inline-flex size-4 shrink-0 items-center justify-center rounded-full text-body-subtle transition-colors hover:text-heading\"\n          >\n            <ol-icon name=\"close\" size=\"sm\" />\n          </button>\n        } @else {\n          <ol-icon\n            name=\"chevron-down\"\n            size=\"sm\"\n            class=\"transition-transform\"\n            [class.rotate-180]=\"isOpen()\"\n          />\n        }\n      </div>\n    </div>\n  </ol-field-frame>\n\n  <!--\n    Dropdown Suggestions Menu.\n\n    Token \u0111\u1ECDc t\u1EEB Figma `ol-autocomplete-menu` (#1149:53147, Type=Default):\n    bo g\u00F3c 12px \u00B7 \u0111\u1EC7m 8px \u00B7 n\u1EC1n `bg-neutral-primary-medium` \u00B7 vi\u1EC1n\n    `border-default-medium`.\n\n    Hai token n\u1EC1n/vi\u1EC1n TR\u00D9NG NHAU \u1EDF ch\u1EBF \u0111\u1ED9 s\u00E1ng n\u00EAn \u0111\u1ED5i hay kh\u00F4ng nh\u00ECn c\u0169ng\n    th\u1EBF \u2014 nh\u01B0ng CH\u1EBE \u0110\u1ED8 T\u1ED0I kh\u00E1c h\u1EB3n: `bg-primary` l\u00E0 gray-950 (g\u1EA7n \u0111en, panel\n    ch\u00ECm v\u00E0o n\u1EC1n) c\u00F2n `bg-primary-medium` l\u00E0 gray-800 (panel n\u1ED5i l\u00EAn).\n    `ol-select` c\u00F9ng l\u1EC7ch n\u00E0y, s\u1EEDa chung m\u1ED9t l\u01B0\u1EE3t.\n  -->\n  @if (isOpen()) {\n    <div\n      #panel\n      [id]=\"listboxId()\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || 'G\u1EE3i \u00FD'\"\n      class=\"absolute z-dropdown bg-neutral-primary-medium border border-default-medium rounded-md shadow-lg max-h-[var(--ol-overlay-max-height,15rem)] overflow-y-auto overflow-x-hidden p-2 animate-in fade-in zoom-in-95 duration-150\"\n      [class.w-full]=\"matchTriggerWidth()\"\n      [class]=\"menuClass()\"\n    >\n      @if (filteredOptions().length > 0) {\n        @for (item of filteredOptions(); track getItemValue(item); let idx = $index) {\n          <!-- Ti\u00EAu \u0111\u1EC1 nh\u00F3m ch\u00E8n gi\u1EEFa v\u00F2ng l\u1EB7p ph\u1EB3ng, xem `groupNameAt`. -->\n          @if (groupNameAt(idx); as groupName) {\n            <div\n              role=\"presentation\"\n              class=\"px-3 pt-2 pb-1 text-xs font-semibold uppercase tracking-wide text-body-subtle\"\n            >\n              {{ groupName }}\n            </div>\n          }\n          <div\n            [id]=\"optionId(idx)\"\n            role=\"option\"\n            [attr.aria-selected]=\"isSelected(item)\"\n            [attr.aria-disabled]=\"item?.disabled ? 'true' : null\"\n            (click)=\"selectOption(item)\"\n            class=\"flex items-center justify-between px-3 py-2 text-sm rounded-lg cursor-pointer transition-colors\"\n            [class.bg-brand-softer]=\"isSelected(item) || activeIndex() === idx\"\n            [class.hover:bg-neutral-tertiary-medium]=\"!isSelected(item) && activeIndex() !== idx\"\n            [class.opacity-50]=\"item?.disabled\"\n            [class.cursor-not-allowed]=\"item?.disabled\"\n          >\n            @if (optionTemplate) {\n              <!-- Custom Option Template -->\n              <ng-container\n                *ngTemplateOutlet=\"\n                  optionTemplate;\n                  context: { $implicit: item, selected: isSelected(item) }\n                \"\n              />\n            } @else {\n              <!-- Default Option Display -->\n              <div class=\"flex items-center gap-2.5 overflow-hidden\">\n                @if (item?.avatar) {\n                  <img\n                    [src]=\"item.avatar\"\n                    alt=\"\u1EA2nh \u0111\u1EA1i di\u1EC7n\"\n                    class=\"w-7 h-7 rounded-full object-cover shrink-0\"\n                  />\n                }\n                <div class=\"truncate\">\n                  <span class=\"font-medium text-heading block truncate\">{{\n                    getItemLabel(item)\n                  }}</span>\n                  @if (item?.subLabel) {\n                    <span class=\"text-xs text-body-subtle block truncate\">{{ item.subLabel }}</span>\n                  }\n                </div>\n              </div>\n\n              <div class=\"flex items-center gap-2 shrink-0 ms-2\">\n                @if (item?.badge) {\n                  <span\n                    class=\"px-1.5 py-0.5 text-2xs font-medium rounded bg-neutral-tertiary-medium text-body\"\n                  >\n                    {{ item.badge }}\n                  </span>\n                }\n                @if (isSelected(item)) {\n                  <ol-icon name=\"check\" size=\"sm\" />\n                }\n              </div>\n            }\n          </div>\n        }\n      } @else if (waitingForTerm()) {\n        <!--\n          Ch\u1EBF \u0111\u1ED9 L\u1ECCC T\u1EEA XA, ch\u01B0a g\u00F5 \u0111\u1EE7 `minTermLength`. Ph\u1EA3i l\u00E0 th\u00F4ng b\u00E1o RI\u00CANG\n          ch\u1EE9 kh\u00F4ng d\u00F9ng `emptyText`: \"Kh\u00F4ng t\u00ECm th\u1EA5y k\u1EBFt qu\u1EA3\" l\u00E0 sai s\u1EF1 th\u1EADt \u2014\n          ch\u01B0a t\u00ECm g\u00EC c\u1EA3. C\u00F9ng l\u1ED1i v\u1EDBi `typeToSearchText` c\u1EE7a ng-select.\n        -->\n        <div class=\"p-3 text-center text-sm text-body-subtle\">\n          <p>{{ typeToSearchText() }}</p>\n        </div>\n      } @else {\n        <!-- Empty State & Allow Create Option -->\n        <div class=\"p-3 text-center text-sm text-body-subtle\">\n          <p>{{ emptyText() }}</p>\n          @if (allowCreate() && searchQuery().trim()) {\n            <button\n              type=\"button\"\n              (click)=\"onCreateNew()\"\n              class=\"mt-2 inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-fg-brand bg-brand-softer hover:bg-brand-subtle rounded-lg transition-colors\"\n            >\n              <ol-icon name=\"plus\" size=\"xs\" />\n              <span>Th\u00EAm m\u1EDBi: \"{{ searchQuery().trim() }}\"</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Helper Text & Error Text -->\n  @if (state() === 'error' && errorText()) {\n    <p class=\"mt-1.5 text-xs text-fg-danger\">{{ errorText() }}</p>\n  } @else if (helperText()) {\n    <p class=\"mt-1.5 text-xs text-body\">{{ helperText() }}</p>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], floatingVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingVariant", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAsterisk", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], allowCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCreate", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], menuClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuClass", required: false }] }], matchTriggerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchTriggerWidth", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], remoteSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "remoteSearch", required: false }] }], minTermLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTermLength", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], typeToSearchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeToSearchText", required: false }] }], createOption: [{ type: i0.Output, args: ["createOption"] }], search: [{ type: i0.Output, args: ["search"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], added: [{ type: i0.Output, args: ["added"] }], removed: [{ type: i0.Output, args: ["removed"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], optionTemplate: [{
                 type: ContentChild,
                 args: ['optionTemplate']
             }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], onDocumentClick: [{
@@ -13944,12 +14918,6 @@ 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
@@ -13958,13 +14926,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * 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(' ');
+/**
+ * Mục menu xếp dọc trong ☰, NỔI dưới thanh (absolute). Nơi gọi hay bọc mục
+ * trong `<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).
+ */
+const STACKED = '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 [&>[slot=navigation]]:flex-col [&>[slot=navigation]]:items-stretch';
+/**
+ * Class theo từng mốc — VIẾT SẴN nguyên văn: Tailwind chỉ sinh CSS cho chuỗi
+ * xuất hiện trong mã, ghép `${bp}:flex` lúc chạy là ra class không có luật nào.
+ */
+const BREAKPOINT_CLASSES = {
+    md: {
+        row: '@3xl:flex',
+        wide: '@3xl:flex @3xl:flex-row @3xl:items-center @3xl:p-0 @3xl:border-0',
+        stackReset: '@3xl:static @3xl:bg-transparent @3xl:shadow-none @3xl:[&>[slot=navigation]]:flex-row @3xl:[&>[slot=navigation]]:items-center',
+        hide: '@3xl:hidden',
+    },
+    lg: {
+        row: '@5xl:flex',
+        wide: '@5xl:flex @5xl:flex-row @5xl:items-center @5xl:p-0 @5xl:border-0',
+        stackReset: '@5xl:static @5xl:bg-transparent @5xl:shadow-none @5xl:[&>[slot=navigation]]:flex-row @5xl:[&>[slot=navigation]]:items-center',
+        hide: '@5xl:hidden',
+    },
+    xl: {
+        row: '@[78rem]:flex',
+        wide: '@[78rem]:flex @[78rem]:flex-row @[78rem]:items-center @[78rem]:p-0 @[78rem]:border-0',
+        stackReset: '@[78rem]:static @[78rem]:bg-transparent @[78rem]:shadow-none @[78rem]:[&>[slot=navigation]]:flex-row @[78rem]:[&>[slot=navigation]]:items-center',
+        hide: '@[78rem]:hidden',
+    },
+};
+const DENSITIES = ['full', 'medium', 'text', 'compact'];
+/**
+ * `ol-nav-icon` / `ol-nav-label` do `ol-navbar-item`, `ol-nav-dropdown` gắn.
+ * Nhãn chỉ mang `ol-nav-label` khi mục có icon — mục chỉ có chữ không bao giờ
+ * mất chữ. Icon chỉ bị ẩn khi NGAY SAU nó có nhãn không rỗng (`:has(~ …)`) —
+ * mục chỉ có icon không bao giờ mất icon, và chữ viết bằng nội dung chiếu vào
+ * (không qua input `label`) cũng được tính.
+ *
+ * `hidden!` (important) cho icon: `ol-icon` khai `:host { display: inline-flex }`
+ * trong CSS component — CSS ngoài layer luôn thắng `@layer utilities` bất kể độ
+ * ưu tiên selector, nên `hidden` thường im lặng không có tác dụng (đo
+ * 2026-09-28: luật có sinh, selector khớp, icon vẫn `display: flex`).
+ */
+const COMPACT_LABELS = 'group-data-[density=text]/navbar:[&_.ol-nav-icon:has(~.ol-nav-label:not(:empty))]:hidden! group-data-[density=compact]/navbar:[&_.ol-nav-label]:sr-only';
 class OlNavbar {
     brandLogo = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "brandLogo" }] : /* istanbul ignore next */ []));
@@ -13980,6 +14986,15 @@ class OlNavbar {
     ...(ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []));
     searchPlaceholder = input('Tìm kiếm toàn cục (Ctrl + K)...', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    /** Thanh hẹp hơn mốc này thì mục menu gập vào ☰. Xem `NavbarCollapseAt`. */
+    collapseAt = input('xl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseAt" }] : /* istanbul ignore next */ []));
+    /**
+     * Tự co theo chỗ trống thật (`full` → `medium` → `compact`, xem
+     * `NavbarDensity`) thay vì gập menu. Thường đi kèm `collapseAt="md"`/`"lg"`.
+     */
+    compactItems = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compactItems" }] : /* istanbul ignore next */ []));
     isCollapsed = model(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
     onSearch = output();
@@ -14001,6 +15016,7 @@ class OlNavbar {
         afterNextRender(() => {
             this.detectMobileSlots();
             this.observeStackHeight();
+            this.observeDensity();
         });
     }
     /** Chiều cao khối mục xếp dọc (0 khi không xếp dọc) → `--ol-nav-stack-h`. */
@@ -14017,6 +15033,53 @@ class OlNavbar {
         observer.observe(wrap);
         this.destroyRef.onDestroy(() => observer.disconnect());
     }
+    observeDensity() {
+        const root = this.elementRef.nativeElement;
+        const row = this.navWrap()?.nativeElement.parentElement;
+        if (!row || typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(() => this.updateDensity());
+        // Quan sát cả từng khối trong hàng: đổi năm học, đổi mục đang chọn (chữ
+        // đậm hơn) làm nội dung rộng ra mà khung không đổi.
+        observer.observe(root);
+        for (const child of Array.from(row.children))
+            observer.observe(child);
+        this.destroyRef.onDestroy(() => observer.disconnect());
+        this.updateDensity();
+    }
+    /**
+     * Thử từ nấc đầy đủ nhất xuống, dừng ở nấc đầu tiên vừa hàng. Đặt thuộc tính
+     * rồi đọc kích thước NGAY (ép trình duyệt tính lại) nên không nháy khung nào
+     * — trạng thái cuối được gán trước khi vẽ.
+     *
+     * Đo bằng `scrollWidth`: logo có `min-w-0 truncate`, bị ép co thì
+     * `offsetWidth` nhỏ đi và phép đo báo "vừa" sai.
+     */
+    updateDensity() {
+        const nav = this.elementRef.nativeElement.querySelector('nav');
+        const wrap = this.navWrap()?.nativeElement;
+        const row = wrap?.parentElement;
+        if (!nav || !wrap || !row)
+            return;
+        const inline = getComputedStyle(wrap).display !== 'none' && !this.isStacked();
+        const apply = (density) => {
+            nav.dataset['density'] = density;
+            nav.toggleAttribute('data-condensed', density !== 'full');
+        };
+        if (!this.compactItems() || !inline)
+            return apply('full');
+        const gap = parseFloat(getComputedStyle(row).columnGap) || 0;
+        const fits = () => {
+            const kids = Array.from(row.children).filter((el) => getComputedStyle(el).display !== 'none');
+            const need = kids.reduce((sum, el) => sum + Math.max(el.offsetWidth, el.scrollWidth), 0);
+            return need + gap * (kids.length - 1) <= row.clientWidth + 0.5;
+        };
+        for (const density of DENSITIES) {
+            apply(density);
+            if (fits())
+                return;
+        }
+    }
     isStacked() {
         return !this.isCollapsed() && !this.hasMobileLinks();
     }
@@ -14039,16 +15102,27 @@ class OlNavbar {
      * 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).
      */
+    bp = computed(() => BREAKPOINT_CLASSES[this.collapseAt()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bp" }] : /* istanbul ignore next */ []));
+    /** Hàng trên: lưới ở khung hẹp (logo | nút), flex từ mốc gập trở lên. */
+    rowClasses = computed(() => `grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 @[40rem]:gap-x-4 min-h-16 min-w-0 w-full ${this.bp().row}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowClasses" }] : /* istanbul ignore next */ []));
+    toggleClasses = computed(() => `${this.bp().hide} 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`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleClasses" }] : /* istanbul ignore next */ []));
     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`;
+        const { wide, stackReset } = this.bp();
+        const base = `${wide} whitespace-nowrap min-w-0`;
+        // Xếp dọc trong ☰ thì luôn hiện chữ — không áp COMPACT_LABELS.
+        if (this.isStacked())
+            return `${base} ${STACKED} ${stackReset}`;
+        const compact = this.compactItems() ? ` ${COMPACT_LABELS}` : '';
+        return `${base} hidden gap-1${compact}`;
     }, /* @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`
+            ? `${this.bp().hide} ${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 */ []));
@@ -14066,7 +15140,9 @@ class OlNavbar {
          * 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',
+            // `group/navbar`: nội dung slot đọc `data-density` bằng
+            // `group-data-[density=…]/navbar:…` để ẩn phần phụ khi chật.
+            '@container group/navbar w-full bg-neutral-primary transition-colors duration-200 z-sticky',
         ];
         if (this.sticky()) {
             classes.push('sticky top-0');
@@ -14091,6 +15167,8 @@ class OlNavbar {
         this.detectMobileSlots();
         this.isCollapsed.update((v) => !v);
         this.onToggleMobileMenu.emit(!this.isCollapsed());
+        // Xếp dọc / thôi xếp dọc đổi cách đo — chờ Angular vẽ xong rồi đo lại.
+        requestAnimationFrame(() => this.updateDensity());
     }
     handleSearchSubmit() {
         if (this.searchQuery.trim()) {
@@ -14112,12 +15190,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)" }, 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 });
+    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 }, collapseAt: { classPropertyName: "collapseAt", publicName: "collapseAt", isSignal: true, isRequired: false, transformFunction: null }, compactItems: { classPropertyName: "compactItems", publicName: "compactItems", 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 [class]=\"rowClasses()\">\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]=\"toggleClasses()\"\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, 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: [{
+            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 [class]=\"rowClasses()\">\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]=\"toggleClasses()\"\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 }] }], collapseAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseAt", required: false }] }], compactItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactItems", 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']]
             }] } });
@@ -14181,11 +15259,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  <!--\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 });
+    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-nav-icon\"></ol-icon>\n  }\n  @if (label()) {\n    <!--\n      `ol-nav-label` (ch\u1EC9 khi c\u00F3 icon): `ol-navbar [compactItems]` \u1EA9n n\u00F3 \u1EDF khung\n      v\u1EEBa (sr-only \u2014 b\u1ED9 \u0111\u1ECDc m\u00E0n h\u00ECnh v\u1EABn \u0111\u1ECDc t\u00EAn). Kh\u00F4ng icon th\u00EC kh\u00F4ng g\u1EAFn:\n      \u1EA9n ch\u1EEF c\u1EE7a m\u1EE5c ch\u1EC9 c\u00F3 ch\u1EEF l\u00E0 ra m\u1ED9t n\u00FAt r\u1ED7ng.\n    -->\n    <span class=\"whitespace-nowrap\" [class.ol-nav-label]=\"!!icon()\">{{ label() }}</span>\n  }\n  <!--\n    Ch\u1EEF vi\u1EBFt b\u1EB1ng n\u1ED9i dung chi\u1EBFu v\u00E0o (<ol-navbar-item>Trang ch\u1EE7</ol-navbar-item>)\n    \u2014 c\u00E1ch vi\u1EBFt ph\u1ED5 bi\u1EBFn nh\u1EA5t \u2014 c\u0169ng ph\u1EA3i thu g\u1ECDn \u0111\u01B0\u1EE3c, n\u00EAn b\u1ECDc c\u00F9ng class.\n    B\u1EA3n \u0111\u1EA7u ch\u1EC9 g\u1EAFn cho input label: compactItems im l\u1EB7ng kh\u00F4ng c\u00F3 t\u00E1c d\u1EE5ng.\n  -->\n  <span class=\"whitespace-nowrap empty:hidden\" [class.ol-nav-label]=\"!!icon()\"><ng-content /></span>\n</ng-template>\n\n@if (routerLink()) {\n  <a\n    [routerLink]=\"routerLink()\"\n    [routerLinkActive]=\"active() ? '' : routerLinkActive()\"\n    [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n    [class]=\"itemClasses()\"\n    [attr.title]=\"icon() ? label() : null\"\n    [attr.aria-disabled]=\"disabled()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"itemContent\" />\n  </a>\n} @else if (href()) {\n  <a\n    [href]=\"href()\"\n    [class]=\"itemClasses()\"\n    [attr.title]=\"icon() ? label() : null\"\n    [attr.aria-disabled]=\"disabled()\"\n  >\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    [attr.title]=\"icon() ? label() : null\"\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  <!--\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" }]
+            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-nav-icon\"></ol-icon>\n  }\n  @if (label()) {\n    <!--\n      `ol-nav-label` (ch\u1EC9 khi c\u00F3 icon): `ol-navbar [compactItems]` \u1EA9n n\u00F3 \u1EDF khung\n      v\u1EEBa (sr-only \u2014 b\u1ED9 \u0111\u1ECDc m\u00E0n h\u00ECnh v\u1EABn \u0111\u1ECDc t\u00EAn). Kh\u00F4ng icon th\u00EC kh\u00F4ng g\u1EAFn:\n      \u1EA9n ch\u1EEF c\u1EE7a m\u1EE5c ch\u1EC9 c\u00F3 ch\u1EEF l\u00E0 ra m\u1ED9t n\u00FAt r\u1ED7ng.\n    -->\n    <span class=\"whitespace-nowrap\" [class.ol-nav-label]=\"!!icon()\">{{ label() }}</span>\n  }\n  <!--\n    Ch\u1EEF vi\u1EBFt b\u1EB1ng n\u1ED9i dung chi\u1EBFu v\u00E0o (<ol-navbar-item>Trang ch\u1EE7</ol-navbar-item>)\n    \u2014 c\u00E1ch vi\u1EBFt ph\u1ED5 bi\u1EBFn nh\u1EA5t \u2014 c\u0169ng ph\u1EA3i thu g\u1ECDn \u0111\u01B0\u1EE3c, n\u00EAn b\u1ECDc c\u00F9ng class.\n    B\u1EA3n \u0111\u1EA7u ch\u1EC9 g\u1EAFn cho input label: compactItems im l\u1EB7ng kh\u00F4ng c\u00F3 t\u00E1c d\u1EE5ng.\n  -->\n  <span class=\"whitespace-nowrap empty:hidden\" [class.ol-nav-label]=\"!!icon()\"><ng-content /></span>\n</ng-template>\n\n@if (routerLink()) {\n  <a\n    [routerLink]=\"routerLink()\"\n    [routerLinkActive]=\"active() ? '' : routerLinkActive()\"\n    [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n    [class]=\"itemClasses()\"\n    [attr.title]=\"icon() ? label() : null\"\n    [attr.aria-disabled]=\"disabled()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"itemContent\" />\n  </a>\n} @else if (href()) {\n  <a\n    [href]=\"href()\"\n    [class]=\"itemClasses()\"\n    [attr.title]=\"icon() ? label() : null\"\n    [attr.aria-disabled]=\"disabled()\"\n  >\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    [attr.title]=\"icon() ? label() : null\"\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 {
@@ -14294,11 +15372,11 @@ 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 }, 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 });
+    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        [attr.title]=\"icon() ? label() : null\"\n        aria-haspopup=\"true\"\n      >\n        @if (icon()) {\n          <ol-icon\n            [name]=\"icon()!\"\n            size=\"sm\"\n            class=\"shrink-0\"\n            [class.ol-nav-icon]=\"!!label()\"\n          ></ol-icon>\n        }\n        <span class=\"whitespace-nowrap\" [class.ol-nav-label]=\"!!icon()\">{{ 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]=\"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" }]
+            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        [attr.title]=\"icon() ? label() : null\"\n        aria-haspopup=\"true\"\n      >\n        @if (icon()) {\n          <ol-icon\n            [name]=\"icon()!\"\n            size=\"sm\"\n            class=\"shrink-0\"\n            [class.ol-nav-icon]=\"!!label()\"\n          ></ol-icon>\n        }\n        <span class=\"whitespace-nowrap\" [class.ol-nav-label]=\"!!icon()\">{{ 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']]
@@ -19292,5 +20370,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, 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 };
+export { CHAT_BUBBLE_STATUS, FIELD_ASTERISK, FIELD_CLEAR_RESERVE_END, FIELD_DISABLED, FIELD_HEIGHT, FIELD_HELPER, FIELD_HELPER_GAP, FIELD_ICON_GAP, FIELD_ICON_RESERVE_END, FIELD_ICON_RESERVE_START, FIELD_LABEL, FIELD_LABEL_BESIDE, FIELD_LABEL_GAP, FIELD_MIN_HEIGHT, FIELD_PADDING_END, FIELD_PADDING_START, FIELD_PADDING_X, FIELD_RADIUS, FIELD_STATE, FIELD_TEXT, FILE_KIND_META, FLOAT_LABEL_START, 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, OlDropdownSearch, OlDropdownState, OlEmpty, OlFileDropzone, OlFileInput, OlFileItem, OlFileUpload, 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, PICKER_ICON_RESERVE_START, WEEKDAYS_SHORT_EN, WEEKDAYS_SHORT_VI, boDau, cloneDate, detectFileKind, endOfDay, fieldLabelLayout, fieldSizeClasses, fileExtension, filesFromClipboard, formatDate, formatFileSize, generateMonthMatrix, generateMonthsMatrix, generateYearsMatrix, isBetween, isDateDisabled, isEditableTarget, isSameDay, isSameMonth, isSameYear, isToday, matchesAccept, multiValuePadY, parseDate, pasteShortcutLabel, startOfDay, stripDiacritics, toUploadFile, validateFiles };
 //# sourceMappingURL=edmicro-olkit.mjs.map