/* ===== kit/kit-tokens.sample.css ===== */
/*
 * TOKEN MẪU cho kit.css: bộ trung tính của app-kit, chép đúng giá trị từ
 * android/designsystem/.../theme/XxTokens.kt (màu, khoảng cách, cỡ, bo góc, thời lượng),
 * XxType.kt (chữ) và XxTheme.kt (XxMotion: lò xo, easing).
 *
 * Đây là file DUY NHẤT trong design/ được có mã màu cố định (hex/rgba).
 * App không nạp file này: app tự khai các biến --k-* trong CSS token của mình (ánh xạ từ token riêng,
 * vd `--k-accent: var(--brand)`), rồi nạp kit.css. File này để xem catalog và làm bảng tra tên biến.
 *
 * Tên biến: --k- + kebab của tên Kotlin (glassFillStrong → --k-glass-fill-strong).
 * Màu ARGB Kotlin 0xAARRGGBB → hex (alpha FF) hoặc rgba() (alpha = AA / 255, làm tròn 3 số).
 * Giao diện tối: thêm class `dark` vào phần tử tổ tiên (vd khung điện thoại), không cần media query.
 * 1 px CSS = 1 dp Android (khung điện thoại 412 × 915 px = máy 412 × 915 dp).
 */

/* Font mẫu của kit (Figtree + Nunito, OFL 1.1, đường dẫn tính từ design/). App khai font của mình. */
/* build-web: bỏ @font-face không có tệp (fonts/figtree.ttf) */
/* build-web: bỏ @font-face không có tệp (fonts/nunito.ttf) */

:root {
  /* ---------------------------------------------------------------- màu, giao diện sáng (XxTokens.Light) */
  --k-background: #F4F1EB;                       /* 0xFFF4F1EB */
  --k-surface: #FFFFFF;                          /* 0xFFFFFFFF */
  --k-content: #1D1B24;                          /* 0xFF1D1B24 */
  --k-content-muted: #66626F;                    /* 0xFF66626F */
  --k-accent: #3B57D6;                           /* 0xFF3B57D6 */
  --k-accent-soft: rgba(59, 87, 214, 0.161);     /* 0x293B57D6 */
  --k-on-accent: #FFFFFF;                        /* 0xFFFFFFFF */
  --k-error: #C0392B;                            /* 0xFFC0392B */
  --k-line: rgba(29, 27, 36, 0.141);             /* 0x241D1B24 */
  --k-scrim: rgba(29, 27, 36, 0.451);            /* 0x731D1B24 */
  --k-glass-fill: rgba(255, 255, 255, 0.302);    /* 0x4DFFFFFF */
  --k-glass-fill-strong: rgba(255, 255, 255, 0.749); /* 0xBFFFFFFF */
  --k-glass-fill-opaque: rgba(255, 255, 255, 0.949); /* 0xF2FFFFFF */
  --k-glass-stroke: rgba(255, 255, 255, 0.651);  /* 0xA6FFFFFF */
  --k-glass-highlight: rgba(255, 255, 255, 0.949); /* 0xF2FFFFFF */
  --k-glass-shadow: rgba(0, 0, 0, 0.18);         /* 0x2E000000 */
  --k-chrome-fill: rgba(255, 255, 255, 0.2);     /* 0x33FFFFFF */
  --k-tab-selected-fill: rgba(59, 87, 214, 0.161); /* 0x293B57D6 */
  --k-tab-selected-content: #3B57D6;             /* 0xFF3B57D6 */
  --k-selected-fill: #1D1B24;                    /* 0xFF1D1B24 */
  --k-selected-content: #FFFFFF;                 /* 0xFFFFFFFF */
  --k-raised-fill: rgba(255, 255, 255, 0.969);   /* 0xF7FFFFFF */
  /* Máy điện thoại vẽ trên web (web/store.css .k-device, khung lớn của app): là đồ vật thật nên KHÔNG theo màu app.
     frame = viền kính đen quanh màn; edge = vành kim loại mảnh bao ngoài (titan tự nhiên). Chỉ có ở CSS. */
  --k-device-frame: #0B0B0C;
  --k-device-edge: #A9A9AE;
  /* Nút tải app (web/store.css): luôn tối như huy hiệu cửa hàng, cả ở giao diện tối. */
  --k-store-fill: #1D1B24;
  --k-store-content: #FFFFFF;
  --k-blob-a: rgba(59, 87, 214, 0.549);          /* 0x8C3B57D6 */
  --k-blob-b: rgba(255, 194, 77, 0.6);           /* 0x99FFC24D */
  --k-blob-c: rgba(255, 122, 107, 0.451);        /* 0x73FF7A6B */
  --k-blob-d: rgba(64, 194, 155, 0.349);         /* 0x5940C29B */

  /* ---------------------------------------------------------------- khoảng cách (XxTokens.Space, lưới 4 dp) */
  --k-space-xxs: 2px;
  --k-space-xs: 4px;
  --k-space-sm: 8px;
  --k-space-md: 12px;
  --k-space-lg: 16px;
  --k-space-xl: 24px;
  --k-space-xxl: 32px;

  /* ---------------------------------------------------------------- cỡ (XxTokens.Size) */
  --k-size-hairline: 1px;
  --k-size-icon: 24px;
  --k-size-icon-small: 20px;
  --k-size-touch: 48px;
  --k-size-tab-bar: 64px;
  --k-size-tab-item: 52px;
  --k-size-tab-item-min: 40px;  /* ô tab thu gọn nhỏ nhất (SelectedOnly, máy 360) */
  --k-size-tab-inset: 16px;
  --k-size-tab-bottom: 12px;
  --k-size-tab-badge: 8px;
  --k-size-segmented: 40px;
  --k-size-segmented-inset: 3px;
  --k-size-raised-shadow: 2px;
  --k-size-menu-width: 250px;
  --k-size-menu-item: 44px;
  --k-size-menu-divider: 9px;
  --k-size-menu-padding: 6px;
  --k-size-menu-gap: 8px;
  --k-size-menu-margin: 12px;
  --k-size-menu-shadow: 24px;
  --k-size-menu-item-slide: 6px;
  --k-size-field: 54px;
  --k-size-field-halo: 3px;
  --k-size-sheet-handle-width: 36px;
  --k-size-sheet-handle-height: 5px;
  --k-size-sheet-margin: 8px;
  --k-size-sheet-top-gap: 48px;
  --k-size-close-button: 40px;

  /* ---------------------------------------------------------------- bo góc (XxTokens.Radius) */
  --k-radius-sm: 12px;
  --k-radius-md: 16px;
  --k-radius-lg: 24px;
  --k-radius-sheet: 32px;
  --k-radius-menu: 22px;
  --k-radius-pill: 999px;

  /* ---------------------------------------------------------------- chuyển động (XxTokens.Duration, XxMotion) */
  --k-dur-quick: 160ms;
  --k-dur-base: 280ms;
  --k-dur-enter: 420ms;
  /* XxMotion.easeOut = CubicBezierEasing(0.2, 0.8, 0.2, 1): sheet đóng, nội dung đổi tab. */
  --k-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  /*
   * Lò xo: XẤP XỈ. CSS không có lò xo vật lý; các đường linear() dưới đây lấy mẫu 25 điểm từ nghiệm của lò xo
   * (khối lượng 1, cùng damping/stiffness với Compose) đi từ 0 tới 1, thời lượng = lúc lệch < 0,2%.
   * Khác Compose: không giữ vận tốc khi bị ngắt giữa chừng, không kéo dài theo vận tốc tay.
   */
  /* Nhấn kính: damping 0.5, stiffness 300 (vượt ~16%). */
  --k-spring-press: linear(0, 0.111, 0.359, 0.638, 0.878, 1.046, 1.137, 1.163, 1.145, 1.105, 1.06, 1.02, 0.993, 0.978, 0.973, 0.976, 0.983, 0.99, 0.997, 1.001, 1.004, 1.004, 1.004, 1.003, 1);
  --k-spring-press-dur: 720ms;
  /* Menu mở: damping 0.62, stiffness 360 (vượt ~8%). */
  --k-spring-menu: linear(0, 0.073, 0.241, 0.443, 0.639, 0.803, 0.928, 1.012, 1.06, 1.081, 1.082, 1.072, 1.056, 1.039, 1.024, 1.012, 1.003, 0.997, 0.994, 0.993, 0.993, 0.995, 0.996, 0.997, 1);
  --k-spring-menu-dur: 530ms;
  /* Lò xo không nảy (damping 1): cùng một dạng đường, khác thời lượng theo stiffness. */
  --k-spring-smooth: linear(0, 0.052, 0.165, 0.297, 0.426, 0.541, 0.639, 0.72, 0.786, 0.837, 0.877, 0.908, 0.931, 0.949, 0.962, 0.972, 0.98, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 1);
  --k-spring-drop-dur: 280ms;        /* giọt tab/segmented: stiffness 1000 */
  --k-spring-sheet-dur: 420ms;       /* sheet mở: stiffness 420 */
  --k-spring-menu-close-dur: 380ms;  /* menu đóng: stiffness 520 */

  /* ---------------------------------------------------------------- chữ (XxType.kt, XxTypography.default) */
  --k-font-body: "Figtree", system-ui, sans-serif;
  --k-font-display: "Nunito", "Figtree", system-ui, sans-serif;
  /* XxDisplayWeight: Nunito 800, Newsreader 500, Fraunces 600, Be Vietnam Pro 700. */
  --k-display-weight: 800;
  /* Mỗi kiểu chữ: shorthand `font` (độ đậm, cỡ/dòng, họ). Giãn chữ riêng ở --k-tracking-*. */
  --k-text-display: var(--k-display-weight) 34px/39px var(--k-font-display);
  --k-text-title: var(--k-display-weight) 26px/31px var(--k-font-display);
  --k-text-heading: 600 19px/24px var(--k-font-body);
  --k-text-body: 400 15px/21px var(--k-font-body);
  --k-text-body-strong: 600 15px/21px var(--k-font-body);
  --k-text-caption: 500 13px/18px var(--k-font-body);
  --k-text-label: 600 13px/17px var(--k-font-body);
  --k-text-button: 700 16px/20px var(--k-font-body);
  --k-text-tab: 600 11px/14px var(--k-font-body);
  --k-text-tab-selected: 700 14px/18px var(--k-font-body);
  --k-text-field: 500 17px/22px var(--k-font-body);
  --k-text-number: 600 15px/21px var(--k-font-body);
  --k-text-segmented: 500 13px/17px var(--k-font-body);
  --k-text-menu-item: 400 16px/21px var(--k-font-body);
  --k-tracking-display: -0.01em;     /* display, title */
  --k-tracking-label: 0.02em;        /* label */
}

/* ---------------------------------------------------------------- màu, giao diện tối (XxTokens.Dark) */
.dark {
  color-scheme: dark;
  --k-background: #121119;                       /* 0xFF121119 */
  --k-surface: #1C1B24;                          /* 0xFF1C1B24 */
  --k-content: #F2EFF8;                          /* 0xFFF2EFF8 */
  --k-content-muted: #A6A1B3;                    /* 0xFFA6A1B3 */
  --k-accent: #8EA2FF;                           /* 0xFF8EA2FF */
  --k-accent-soft: rgba(142, 162, 255, 0.2);     /* 0x338EA2FF */
  --k-on-accent: #121119;                        /* 0xFF121119 */
  --k-error: #FF8A7A;                            /* 0xFFFF8A7A */
  --k-line: rgba(242, 239, 248, 0.161);          /* 0x29F2EFF8 */
  --k-scrim: rgba(0, 0, 0, 0.6);                 /* 0x99000000 */
  --k-glass-fill: rgba(255, 255, 255, 0.122);    /* 0x1FFFFFFF */
  --k-glass-fill-strong: rgba(38, 37, 51, 0.322); /* 0x52262533 */
  --k-glass-fill-opaque: rgba(35, 34, 48, 0.949); /* 0xF2232230 */
  --k-glass-stroke: rgba(255, 255, 255, 0.278);  /* 0x47FFFFFF */
  --k-glass-highlight: rgba(255, 255, 255, 0.6); /* 0x99FFFFFF */
  --k-glass-shadow: rgba(0, 0, 0, 0.4);          /* 0x66000000 */
  --k-chrome-fill: rgba(18, 17, 25, 0.349);      /* 0x59121119 */
  --k-tab-selected-fill: rgba(242, 239, 248, 0.251); /* 0x40F2EFF8 */
  --k-tab-selected-content: #F2EFF8;             /* 0xFFF2EFF8 */
  --k-selected-fill: #F2EFF8;                    /* 0xFFF2EFF8 */
  --k-selected-content: #121119;                 /* 0xFF121119 */
  --k-raised-fill: rgba(255, 255, 255, 0.251);   /* 0x40FFFFFF */
  --k-device-frame: #000000;
  --k-device-edge: #55555A;
  --k-store-fill: #050409;
  --k-store-content: #F2EFF8;
  --k-blob-a: rgba(142, 162, 255, 0.451);        /* 0x738EA2FF */
  --k-blob-b: rgba(255, 194, 77, 0.4);           /* 0x66FFC24D */
  --k-blob-c: rgba(255, 122, 107, 0.349);        /* 0x59FF7A6B */
  --k-blob-d: rgba(64, 194, 155, 0.302);         /* 0x4D40C29B */
}

/* ===== labelcue.css ===== */
/* ==========================================================================
   LabelCue — design tokens + components (NGUỒN SỰ THẬT của giao diện)
   Mọi con số/màu ở đây ↔ token Android `LcTheme.*` (xem design/SPECS.md §1).
   Sửa giá trị ở ĐÂY trước, rồi mới sửa code.
   ========================================================================== */

:root{
  /* ---- Màu nền & chữ ---- */
  --canvas:#F6F3EA;            /* nền giấy ấm */
  --surface:#FFFFFF;
  --ink:#16302A;               /* chữ chính, khối "mực" */
  --ink-2:#0E211C;
  --muted:#5B6B65;             /* chữ phụ, đã kiểm ≥ 4.5:1 trên canvas */
  --hairline:rgba(22,48,42,.10);
  --loading-bg:rgba(22,48,42,.06);  /* nền khối giữ chỗ khi đang phân tích (S4) */
  --chip-solid:rgba(22,48,42,.07);  /* chip chưa chọn trên nền đặc (sheet, hộp thoại — 1.0.3): như rãnh segmented kiểu A */

  /* ---- Thương hiệu ---- */
  --brand:#1F6D5C;
  --brand-2:#17564A;           /* đáy gradient nút */
  --brand-soft:#DCEDE6;
  --accent:#D6EE6E;            /* tô sáng BẰNG CHỨNG + icon trên khối mực */
  --accent-hot:#C3DD52;      /* đáy gradient của vệt highlight */
  --accent-soft:#EEF7C4;
  --on-brand:#FFFFFF;          /* chữ trên nút brand (.glass-brand), sáng ở cả chế độ tối */

  /* ---- Trạng thái (luôn đi kèm icon + chữ) ---- */
  --attn:#8F5A00;   --attn-bg:#FFEFC2;  --attn-line:rgba(143,90,0,.28);
  --danger:#A83F3B; --danger-bg:#FBE3E0;
  --unknown:#48597A; --unknown-bg:#E3E8F1; --unknown-line:rgba(72,89,122,.28);
  --clear:#1F6D5C;  --clear-bg:#DCEDE6;   --clear-line:rgba(31,109,92,.28);

  /* ---- Đốm nền (để kính có thứ khúc xạ) ---- */
  --orb-mint:#BFE3D4; --orb-lime:#DDEE8E; --orb-peach:#F7D3A6; --orb-sky:#CFE4EE;

  /* ---- Khoảng cách (lưới 4) ---- */
  --sp-xs:4px; --sp-sm:8px; --sp-md:12px; --sp-lg:16px; --sp-xl:20px; --sp-xxl:24px; --sp-xxxl:32px;
  --gutter:20px;               /* lề ngang màn */
  --section-gap:24px;

  /* ---- Hình khối ---- */
  --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:28px; --r-xxl:34px; --r-pill:999px;
  --r-badge:18px;              /* ô icon trong hộp thoại */
  --r-card:22px;               /* thẻ bằng chứng, toast */
  --r-sheet:32px;
  --r-thumb:14px; --r-thumb-lg:18px;  /* ảnh sản phẩm .pk */
  --r-viewfinder:26px;         /* khung ngắm camera */
  --r-day:14px;                /* ô ngày trong lịch */

  /* ---- Kích thước ---- */
  --touch-min:48px; --btn-lg:56px; --btn-md:48px; --btn-sm:36px; --chip:36px;
  --dock-h:62px; --dock-fab:62px; --icon:22px; --topbar:52px;
  --app-icon:84px;             /* icon app trong Giới thiệu (SY7) */

  /* ---- Chữ (Be Vietnam Pro). line-height ≥ 1.25 để không cắt dấu tiếng Việt ---- */
  --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --t-display:700 28px/34px var(--font);   /* tiêu đề màn */
  --t-title:700 20px/26px var(--font);     /* tiêu đề thẻ/banner */
  --t-body-l:500 17px/26px var(--font);    /* chữ bằng chứng (nhân vật chính) */
  --t-body:400 15px/22px var(--font);
  --t-label:600 13px/18px var(--font);
  --t-caption:500 12px/16px var(--font);   /* sàn cỡ chữ: 12sp cho chú thích, còn lại ≥ 14 */
  --t-overline:700 11px/14px var(--font);  /* chỉ dùng cho tiêu đề nhóm viết hoa */

  /* ---- Chuyển động ---- */
  --dur-short:180ms; --dur-medium:280ms; --ease:cubic-bezier(.2,.8,.2,1);

  /* ---- Packshot sản phẩm (giữ chỗ cho ảnh thật) ---- */
  --pk-bis-a:#F3D9A0;
  --pk-bis-b:#D9A75B;
  --pk-oat-a:#CFE3B0;
  --pk-oat-b:#8FB36A;
  --pk-noo-a:#C6D3EA;
  --pk-noo-b:#8FA4CF;
  --pk-cho-a:#E8C9B5;
  --pk-cho-b:#B77F5E;
  --pk-yog-a:#F4D5E0;
  --pk-rice-a:#F4EBCB;
  --pk-rice-b:#D9C885;

  /* ---- Palette mở rộng: minh họa dị nguyên, packshot, camera, trạng thái nâng cao (gom từ component) ---- */
  --al-celery-bg:#D9EDD0;
  --al-celery-fg:#3D8040;
  --al-egg-bg:#FFF0BF;
  --al-egg-fg:#9A6B00;
  --al-fish-bg:#D5ECF2;
  --al-fish-fg:#2B7A93;
  --al-milk-bg:#DCEBF7;
  --al-milk-fg:#2F6A9A;
  --al-nut-bg:#F7DEC8;
  --al-nut-fg:#9A5A2B;
  --al-peanut-bg:#F0E0C4;
  --al-peanut-fg:#8A6330;
  --al-shrimp-bg:#FBDCD3;
  --al-shrimp-fg:#B5513A;
  --al-soy-bg:#DCEBCB;
  --al-soy-fg:#4F7A2B;
  --al-wheat-bg:#F3E6BE;
  --al-wheat-fg:#8C6D1F;
  --attn-grad-a:#FFF4D3;
  --attn-grad-b:#FFE6A3;
  --attn-ink:#553600;
  --attn-on-dark:#FFE2A8;
  --av-3:#6F8FD0;
  --barcode-ink:#1B1B1B;
  --barcode-light:#F4F4F4;
  --brand-hi:#2A8470;
  --brand-light:#58B59D;
  --brand-mid:#2F8E78;
  --cam-1:#4A5C55;
  --cam-2:#1B2B26;
  --cam-3:#0F1A17;
  --checker-a:#E9E9E9;
  --checker-b:#DDDDDD;
  --clear-grad-a:#E6F3EC;
  --clear-grad-b:#CFE8DD;
  --clear-ink:#0E3F34;
  --clear-on-dark:#C5F0E1;
  --clear-on-ink:#8FE0C6;
  --gallery-bg:#E7E3D6;
  --ink-mid:#24443C;
  --label-end:#E9F2EE;
  --label-fold:#CFE3DA;
  --on-ink:#F4FBF7;
  --pack-a:#F5EAD0;
  --pack-b:#E0CFA6;
  --pack-ink:#B9A77C;
  --paper:#F3EEDD;
  --paper-ink:#3A3A30;
  --paper-ink-2:#4A4538;
  --unknown-tint:rgba(72,89,122,.14);  /* nền vùng nhãn còn thiếu (R3) */
  --pk-yog-b:#D98CAB;
  --skeleton-line:#C9D8D2;
  --splash-dark-a:#1F5F50;
  --success-lite:#7DE3B8;
  --tab-muted:#3F4F49;
  --tab-muted-dark:#A9BBB4;
  --sheet-dark:#1A2823;        /* nền sheet/hộp thoại tối (.94) */
  --cam-scrim:#060E0C;         /* lớp tối quanh khung ngắm (.42) */
  --themed-fg:#9FD1C0;
  --unk-grad-a:#EAEEF5;
  --unk-grad-b:#D9E0EC;
  --unknown-ink:#28375A;
  --unknown-on-dark:#D8E2F7;
  --unknown-on-ink:#B9C9EA;
  --warn-bar:#E0A43A;
  --warn-lite:#FFCB6B;
  --dark-canvas:#0B1411;
  --device-frame:#101B18;
  --brand-band:#1D4D42;
  --chip-ink-top:#2A2521;
  --tile-fg-fallback:#333333;
  --pk-fallback-b:#CCCCCC;
  --on-ink-muted:#CCFFEE;
  --pack-mock-b:#E2D5B4;
  --pk-fallback-a:#EEEEEE;
  --pack-mock-a:#F0E7D0;
}

*{box-sizing:border-box;margin:0;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}

/* ==========================================================================
   KÍNH — 5 preset (tương ứng HnGlass presets: card/control/chrome/ink/brand/frost)
   ========================================================================== */
.glass{ /* card, control */
  background:
    radial-gradient(120% 80% at 12% 0%,rgba(255,255,255,.78),rgba(255,255,255,0) 52%),
    linear-gradient(140deg,rgba(255,255,255,.58),rgba(255,255,255,.24));
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -10px 18px -10px rgba(255,255,255,.5),0 14px 34px -18px rgba(22,48,42,.30);
}
.glass-frost{ /* danh sách, chip chưa chọn — rẻ, không blur mạnh */
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 10px -6px rgba(22,48,42,.18);
}
.glass-ink{ /* chrome tối: điều khiển camera, coach */
  background:
    radial-gradient(120% 80% at 12% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 52%),
    linear-gradient(140deg,rgba(14,33,28,.72),rgba(14,33,28,.5));
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.32),0 14px 30px -14px rgba(0,0,0,.55);
  color:var(--on-ink);
}
.glass-brand{ /* CTA chính, FAB quét */
  background:radial-gradient(120% 90% at 15% 0%,rgba(255,255,255,.42),rgba(255,255,255,0) 50%),linear-gradient(140deg,var(--brand-hi),var(--brand-2));
  border:1px solid rgba(255,255,255,.42);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 14px 26px -12px rgba(23,86,74,.7);
  color:var(--on-brand);
}
.solid{background:var(--surface);border:1px solid var(--hairline);box-shadow:0 1px 2px rgba(22,48,42,.04)}
.orb{position:absolute;border-radius:50%;filter:blur(46px);pointer-events:none}
.page{position:absolute;inset:0;padding:calc(36px + var(--topbar) + 10px) var(--gutter) 0;overflow:hidden}
.sb-scrim{position:absolute;top:0;left:0;right:0;height:52px;background:linear-gradient(var(--canvas) 62%,transparent);z-index:25;pointer-events:none} /* tab cuộn: giờ/pin không đè lên nội dung (cao = inset thanh trạng thái + 16) */
.page.has-dock{padding-bottom:calc(var(--dock-h) + 44px)}
.page.has-cta{padding-bottom:96px}
.stack{display:flex;flex-direction:column;gap:var(--section-gap)}
.stack-sm{display:flex;flex-direction:column;gap:var(--sp-sm)}
.stack-md{display:flex;flex-direction:column;gap:var(--sp-md)}
.chiprow{display:flex;gap:var(--sp-sm);overflow-x:auto;scrollbar-width:none} /* hàng chip lọc cuộn ngang (T1) */
.stack-lg{display:flex;flex-direction:column;gap:var(--sp-lg)}
.row{display:flex;align-items:center;gap:var(--sp-md)}
.spread{justify-content:space-between}

/* ---- Icon: MỘT bộ, nét 1.75, bo tròn ---- */
.ic{width:var(--icon);height:var(--icon);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.sm{width:18px;height:18px}.ic.lg{width:28px;height:28px}

/* ---- Top bar ---- */
.topbar{position:absolute;top:36px;left:0;right:0;height:var(--topbar);padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;z-index:20}
.topbar h2{font:var(--t-label);letter-spacing:.01em}
.iconbtn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none}

/* ---- Chữ ---- */
.display{font:var(--t-display);letter-spacing:-.01em}
.display.lg{font-size:32px;line-height:38px} /* tiêu đề màn chào O1 */
.title{font:var(--t-title)}
.body{font:var(--t-body)}.body-l{font:var(--t-body-l)}
.label{font:var(--t-label)}.caption{font:var(--t-caption);color:var(--muted)}
.overline{font:var(--t-overline);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}

/* ---- Nút ---- */
.btn{height:var(--btn-lg);padding:0 24px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1 var(--font);white-space:nowrap}
.btn.md{height:var(--btn-md);font-size:15px;padding:0 20px}
.btn.sm{height:var(--btn-sm);font-size:13px;padding:0 14px}
.btn.block{width:100%}
.btn.ghost{color:var(--ink)}
.btn.danger-text{color:var(--danger)}
.btn.is-disabled{opacity:.45;box-shadow:none;pointer-events:none} /* tắt: giữ nền, mờ .45, không bóng, không nhấn; TalkBack đọc "đã tắt" */
.btn.is-loading{pointer-events:none} /* đang chạy: vòng quay thay icon, chữ đổi thành việc đang làm */
.btn .spinner{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;flex:none}
.btn.danger{background:var(--danger);color:var(--surface);box-shadow:inset 0 1px 1px rgba(255,255,255,.4),0 10px 18px -10px rgba(168,63,59,.7)} /* nút xác nhận xóa (SY5) */

/* ---- Chip ---- */
.chip{height:var(--chip);padding:0 14px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--font);white-space:nowrap}
.chip.on{background:linear-gradient(140deg,var(--chip-ink-top) 0%,var(--ink) 0%),var(--ink);background:var(--ink);color:var(--on-ink);box-shadow:inset 0 1px 1px rgba(255,255,255,.25),0 8px 16px -10px rgba(14,33,28,.7)}
.chip.on .ic{stroke:var(--accent)}
/* Chip chưa chọn trong sheet/hộp thoại nền đặc (1.0.3): frost trắng 55% mất hẳn trên nền trắng (thấy trên A52s 17/10/2026,
   "Giảm hiệu ứng kính" còn bỏ cả bóng) → nền mực nhạt phẳng, không viền, không bóng. Chip chọn (.on) giữ nguyên. */
.sheet .chip.glass-frost,.dialog .chip.glass-frost{background:var(--chip-solid);border-color:transparent;box-shadow:none}

/* ---- Pill trạng thái nhỏ (không phải kính) ---- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);font:700 12px/16px var(--font)}
.pill.attn{background:var(--attn-bg);color:var(--attn)}
.pill.unk{background:var(--unknown-bg);color:var(--unknown)}
.pill.clear{background:var(--clear-bg);color:var(--clear)}
.pill.danger{background:var(--danger-bg);color:var(--danger)}

/* ==========================================================================
   DOCK v3 — thanh điều hướng nổi kiểu "đảo" (theo hướng dẫn Liquid Glass của Apple:
   kính chỉ ở lớp điều hướng, thanh nổi cách mép, hành động chính tách thành đảo riêng).
   [ viên kính 4 tab ]  [ đảo Quét ]
   - Tab: icon trên, chữ dưới, luôn có nhãn. Tab đang chọn = "giọt kính" sáng bên trong viên
     (icon + chữ màu brand). Không nền cho tab chưa chọn.
   - Đảo Quét: hình tròn brand 64dp, tách riêng bên phải; là điểm nhấn số 1.
   - Thu gọn khi cuộn xuống (.mini): chỉ còn tab đang chọn (icon + chữ ngang) + đảo Quét. Cuộn lên thì bung lại.
   Ngoại lệ cỡ chữ: nhãn tab 11sp (chuẩn điều hướng dưới cùng).
   ========================================================================== */
.dockwrap{position:absolute;left:14px;right:14px;bottom:25px;display:flex;align-items:center;gap:8px;z-index:25} /* đáy = inset cử chỉ (khung 360 ≈ 17) + 8 — SPECS §5, 1.0.2 */
.dockwrap.static{position:relative;left:auto;right:auto;bottom:auto;margin:0 14px}
.dockbar{flex:1;height:62px;border-radius:31px;display:flex;align-items:center;justify-content:space-between;gap:2px;padding:0 7px}
/* Kính dock C+ (1.0.3, app-kit): phủ mỏng, viền sáng rõ, bóng 24 — web không loe được, chỉ xấp xỉ bằng viền + blur. */
.dockbar.glass{background:linear-gradient(140deg,rgba(255,255,255,.30),rgba(255,255,255,.14));border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),0 4px 24px rgba(22,48,42,.18);backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%)}
.dockbar a{flex:1 1 0;min-width:40px;height:48px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;border-radius:24px;color:var(--tab-muted);font:700 13px/1 var(--font);white-space:nowrap}
.dockbar a .ic{width:24px;height:24px}
.dockbar a .lbl{display:none}
.dockbar a.on{flex:none;padding:0 15px 0 12px;color:var(--brand);background:color-mix(in srgb,var(--brand) 16%,transparent)} /* viên nhạt (1.0.3, duyệt 16/10/2026 kit.html KIT1) */
.dockbar a.on .lbl{display:inline}
.dockbar a.on .ic{stroke-width:2}
.dockwrap .scan{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--surface);box-shadow:inset 0 1px 1px rgba(255,255,255,.65),0 16px 26px -10px rgba(23,86,74,.75)}
.dockwrap .scan .ic{width:28px;height:28px;stroke-width:2}
.dockwrap.mini .dockbar{flex:none;height:54px;border-radius:27px;padding:0 6px}
.dockwrap.mini .dockbar a{display:none}
.dockwrap.mini .dockbar a.on{display:flex;flex-direction:row;gap:7px;width:auto;padding:0 16px;height:42px;font-size:13px;line-height:1}
.dockwrap.mini{justify-content:space-between}
.dockwrap.mini .scan{width:54px;height:54px}

/* ==========================================================================
   CARD KẾT QUẢ — các thành phần "an toàn": KHÔNG kính, nền đặc
   ========================================================================== */
.banner{border-radius:var(--r-xl);padding:16px;display:flex;gap:14px;align-items:center;border:1px solid}
.banner .badge{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--surface);flex:none}
.banner .badge .ic{width:26px;height:26px;stroke-width:2.25}
.banner h1{font:700 18px/24px var(--font)}
.banner p{font:var(--t-caption);margin-top:2px}
.banner.attn{background:var(--attn-bg);border-color:var(--attn-line);color:var(--attn-ink)}.banner.attn .badge{background:var(--attn)}
.banner.clear{background:var(--clear-bg);border-color:var(--clear-line);color:var(--clear-ink)}.banner.clear .badge{background:var(--clear)}
.banner.unk{background:var(--unknown-bg);border-color:var(--unknown-line);color:var(--unknown-ink)}.banner.unk .badge{background:var(--unknown)}

.evidence{border-radius:var(--r-card);padding:14px 16px;display:flex;flex-direction:column;gap:8px;cursor:pointer;position:relative}
.evidence .top{display:flex;justify-content:space-between;align-items:center}
.evidence q{quotes:none;font:var(--t-body-l);color:var(--ink)}
.evidence .why{font:var(--t-caption);color:var(--muted)}
.evidence .go{display:flex;align-items:center;gap:4px;color:var(--brand);font:700 12px/16px var(--font)}
mark,.hit{background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 0/100% 100%;color:var(--ink);padding:1px 4px;border-radius:5px;font-weight:700;box-decoration-break:clone;-webkit-box-decoration-break:clone}

.meter{display:flex;align-items:center;gap:10px;font:var(--t-caption);color:var(--muted)}
.meter .bar{flex:1;height:6px;border-radius:3px;background:rgba(22,48,42,.10);overflow:hidden}
.meter .bar i{display:block;height:100%;border-radius:3px;background:var(--brand)}

.about-head{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:4px} /* SY7: icon app + wordmark + phiên bản */
.about-head .app-ic{width:var(--app-icon);height:var(--app-icon);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 20px 30px -16px rgba(23,86,74,.7)}
.about-head .app-ic img{width:100%;height:100%}
.feat{display:flex;gap:10px;align-items:flex-start} /* SY7 "Có gì mới": icon + câu */
/* Thẻ dị ứng (T2): khối đặc, chữ to đọc từ xa; đầu thẻ mực đậm có Pip. */
.acard{border-radius:var(--r-xl);overflow:hidden;box-shadow:0 20px 40px -22px rgba(22,48,42,.55)}
.acard .ac-head{background:linear-gradient(140deg,var(--ink-mid),var(--ink-2));color:var(--on-ink);padding:16px 20px;display:flex;align-items:center;gap:10px}
.acard .ac-head .pip{width:30px;height:30px}
.acard .ac-head .label{letter-spacing:.06em}
.acard .ac-body{padding:20px;display:flex;flex-direction:column;gap:14px}
.acard .ac-title{font:800 30px/36px var(--font);letter-spacing:-.02em}
.acard .ac-list{display:flex;flex-wrap:wrap;gap:var(--sp-sm)}
.acard mark{font-size:22px;line-height:30px;padding:4px 12px;border-radius:var(--r-sm)}
.cta-row{display:flex;gap:10px}.cta-row .btn{flex:1} /* hai nút ngang bằng nhau trong trang */
.seg.fit{align-self:flex-start} /* chọn ngôn ngữ thẻ: rộng theo nội dung */
.disclaimer{font:var(--t-caption);color:var(--muted);text-align:center;padding:0 8px}

/* ---- Nhóm dòng (Hồ sơ/Cài đặt): MỘT khối cho cả nhóm ---- */
.group{border-radius:var(--r-lg);overflow:hidden}
.group.bare{border-radius:0;overflow:visible} /* không nền, chỉ đường kẻ giữa các dòng (SY4) */
.li{min-height:56px;padding:10px 16px;display:flex;align-items:center;gap:12px;border-top:1px solid var(--hairline)}
.li:first-child{border-top:0}
.li .ic-wrap{width:36px;height:36px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:none}
.li .grow{flex:1;min-width:0}
.li .sub{font:var(--t-caption);color:var(--muted)}
.li.roomy{padding:12px 16px} /* dòng chọn ngôn ngữ (SY6) */
.li.option{min-height:0;padding:12px 4px} /* lựa chọn trong sheet, không nền nhóm (SY4): radio đứng trước chữ */
.li .nm{font:600 15px/18px var(--font)} /* tên sản phẩm trong dòng lịch sử (T1, LC2) — như .prod .nm */
.li .val{font:var(--t-label);color:var(--muted)}
.switch{width:46px;height:28px;border-radius:14px;background:rgba(22,48,42,.18);position:relative;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch.on{background:var(--brand)}.switch.on::after{left:21px}

/* ---- Lưới dị nguyên ---- */
.al-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.al-grid.compact{gap:var(--sp-sm)}.al-grid.compact .al{min-height:52px} /* T3: nhóm đang tránh, nhỏ gọn */
.al{min-height:60px;border-radius:20px;padding:10px 12px;display:flex;align-items:center;gap:10px;font:600 14px/18px var(--font);white-space:nowrap}
.al .emo{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--tb,var(--pk-fallback-a));color:var(--tc,var(--tile-fg-fallback))}
.al .emo .ic{width:20px;height:20px}
.t-milk{--tb:var(--al-milk-bg);--tc:var(--al-milk-fg)}.t-egg{--tb:var(--al-egg-bg);--tc:var(--al-egg-fg)}.t-nut{--tb:var(--al-nut-bg);--tc:var(--al-nut-fg)}.t-peanut{--tb:var(--al-peanut-bg);--tc:var(--al-peanut-fg)}.t-wheat{--tb:var(--al-wheat-bg);--tc:var(--al-wheat-fg)}.t-soy{--tb:var(--al-soy-bg);--tc:var(--al-soy-fg)}.t-fish{--tb:var(--al-fish-bg);--tc:var(--al-fish-fg)}.t-shrimp{--tb:var(--al-shrimp-bg);--tc:var(--al-shrimp-fg)}.t-celery{--tb:var(--al-celery-bg);--tc:var(--al-celery-fg)}.t-more{--tb:rgba(22,48,42,.07);--tc:var(--ink)}
.al .chk{margin-left:auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;visibility:hidden}
.al.on{background:linear-gradient(140deg,var(--ink-mid),var(--ink-2));color:var(--on-ink);border-color:transparent;box-shadow:inset 0 1px 1px rgba(255,255,255,.25),0 10px 20px -12px rgba(14,33,28,.7)}
.al.on .emo{background:rgba(255,255,255,.94)}
.al.on .chk{visibility:visible;background:var(--accent);color:var(--ink)}
.al .chk .ic{width:14px;height:14px;stroke-width:3}

/* ---- Bottom sheet ---- */
.scrim{position:absolute;inset:0;background:rgba(14,33,28,.38);z-index:50}
.sheet{position:absolute;left:8px;right:8px;bottom:8px;border-radius:var(--r-sheet);padding:10px 20px 24px;z-index:55} /* đáy 8 tính từ MÉP màn (thanh cử chỉ đè lên đệm đáy); đỉnh ≤ thanh trạng thái + 48 (SPECS §6, 1.0.3) */
/* Sheet + hộp thoại nền ĐẶC 100% (1.0.3, duyệt 16/10/2026 kit.html KIT2, app-kit): 90–94% vẫn lộ chữ phía sau. */
.sheet.glass{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 25%,transparent);margin:0 auto 14px} /* mực 25% theo chế độ (tối: sáng), như LcSheet */

/* ---- Skeleton ---- */
.sk{background:linear-gradient(90deg,rgba(22,48,42,.07),rgba(22,48,42,.13),rgba(22,48,42,.07));background-size:200% 100%;border-radius:12px;animation:sh 1.4s linear infinite}
/* ---- Đang phân tích (S4): khung giữ chỗ đúng cấu trúc kết quả + 3 bước ---- */
.banner.loading{background:var(--loading-bg);border-color:var(--hairline)}
.banner.loading .sk.dot{width:48px;height:48px;border-radius:50%;flex:none}
.banner.loading .lines{flex:1}
.sk.line-l{height:18px;width:80%}.sk.line-s{height:12px;width:55%}
.sk.card{height:96px;border-radius:var(--r-card)}.sk.card.dim{opacity:.7}
.steps{border-radius:var(--r-lg);padding:var(--sp-lg);display:flex;flex-direction:column;gap:var(--sp-md)}
.steps .st{display:flex;align-items:center;gap:var(--sp-md);font:var(--t-body)}
.steps .st .mk{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center}
.steps .st.done .mk{background:var(--clear-bg);color:var(--clear)}
.steps .st.now{font-weight:700}.steps .st.now .mk{border:2.5px solid var(--brand);border-right-color:transparent}
.steps .st.todo{color:var(--muted)}.steps .st.todo .mk{border:2px solid var(--hairline)}
@keyframes sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}

/* ==========================================================================
   CẢNH GIẢ LẬP CAMERA (chỉ để trình diễn)
   ========================================================================== */
.cam{background:radial-gradient(120% 70% at 30% 10%,var(--cam-1),var(--cam-2) 60%,var(--cam-3))}
.pack{position:absolute;left:40px;right:40px;top:230px;height:300px;border-radius:14px;background:linear-gradient(160deg,var(--pack-mock-a),var(--pack-mock-b));transform:rotate(-2.5deg);box-shadow:0 30px 50px -20px rgba(0,0,0,.6)}
.paper{position:absolute;left:34px;right:34px;top:210px;height:340px;border-radius:8px;background:var(--paper);transform:rotate(-1.5deg);padding:18px;font:500 12px/1.75 var(--font);color:var(--paper-ink);box-shadow:0 30px 50px -20px rgba(0,0,0,.6)}
.barcode{position:absolute;left:70px;right:70px;top:330px;height:96px;background:repeating-linear-gradient(90deg,var(--barcode-ink) 0 2px,transparent 2px 4px,var(--barcode-ink) 4px 5px,transparent 5px 8px,var(--barcode-ink) 8px 11px,transparent 11px 13px)}
.viewfinder{position:absolute;left:28px;right:28px;border-radius:var(--r-viewfinder);box-shadow:0 0 0 999px rgba(6,14,12,.42)}
.viewfinder i{position:absolute;width:34px;height:34px;border:3px solid var(--surface)}
.viewfinder i:nth-child(1){left:-2px;top:-2px;border-right:0;border-bottom:0;border-top-left-radius:var(--r-viewfinder)}
.viewfinder i:nth-child(2){right:-2px;top:-2px;border-left:0;border-bottom:0;border-top-right-radius:var(--r-viewfinder)}
.viewfinder i:nth-child(3){left:-2px;bottom:-2px;border-right:0;border-top:0;border-bottom-left-radius:var(--r-viewfinder)}
.viewfinder i:nth-child(4){right:-2px;bottom:-2px;border-left:0;border-top:0;border-bottom-right-radius:var(--r-viewfinder)}
.scanline{position:absolute;left:14px;right:14px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 14px var(--accent)}
.shutter{position:absolute;left:50%;transform:translateX(-50%);width:72px;height:72px;border-radius:50%;border:4px solid var(--surface);padding:5px}
.shutter i{display:block;width:100%;height:100%;border-radius:50%;background:var(--surface)}
.seg{display:inline-flex;padding:6px 4px;border-radius:var(--r-pill);gap:2px} /* cao 48 = vùng chạm tối thiểu */
.seg span{padding:0 14px;height:36px;display:inline-flex;align-items:center;border-radius:var(--r-pill);font:600 13px/1 var(--font);white-space:nowrap}
.seg .on{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:0 4px 12px -6px rgba(0,0,0,.5)}
.seg.glass-frost{background:rgba(22,48,42,.07);border:1px solid rgba(255,255,255,.7);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} /* rãnh tối hơn sheet trắng (kiểu A); tối: luật .dark .glass-frost */
.seg.glass-frost .on{background:var(--surface);color:var(--ink);box-shadow:0 2px 6px -2px rgba(22,48,42,.35)} /* kiểu A (1.0.3): viên sáng nổi trên rãnh — sheet Nhập tay, Ngôn ngữ */
.coach{border-radius:var(--r-lg);padding:12px 16px 12px 12px;display:flex;gap:12px;align-items:center;font:500 14px/20px var(--font)}
.coach.sm{padding:8px 14px 8px 8px;border-radius:var(--r-card);font-size:13px} /* coach trên khung (S2), không che nút chụp */
.coach.sm .pip{width:30px;height:30px}

/* ---- Pip: mascot tối giản (góc nhãn gấp + ống kính) ---- */
.pip{width:36px;height:36px;flex:none}

/* ---- Packshot sản phẩm (giữ chỗ cho ảnh thật; ảnh thật bo 14, nền gradient này làm fallback) ---- */
.pk{width:44px;height:44px;border-radius:var(--r-thumb);flex:none;position:relative;background:linear-gradient(150deg,var(--pa,var(--pk-fallback-a)),var(--pb,var(--pk-fallback-b)));box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 6px 12px -8px rgba(22,48,42,.5)}
.pk::before{content:"";position:absolute;left:22%;right:22%;top:20%;bottom:20%;border-radius:6px;background:rgba(255,255,255,.88)}
.pk::after{content:"";position:absolute;left:30%;right:30%;top:44%;height:16%;border-radius:3px;background:var(--pb,var(--pk-fallback-b));opacity:.75}
.pk.lg{width:56px;height:56px;border-radius:var(--r-thumb-lg)}

/* ---- Trang chủ (H1–H2) ---- */
.hero{border-radius:var(--r-sheet);padding:var(--sp-xl);display:flex;flex-direction:column;gap:var(--sp-lg)} /* thẻ Quét kính + .shine */
.hero .head{display:flex;align-items:center;gap:14px}
.hero .hero-ic{width:64px;height:64px;border-radius:var(--r-card);display:grid;place-items:center;flex:none}
.hero .acts{display:flex;gap:var(--sp-sm)}
.hero .acts .btn{flex:1}
.btn.md.tight{font-size:14px;padding:0 10px} /* hai nút ngang trong thẻ hẹp */
/* Nút phụ trên thẻ kính sáng (1.0.2, duyệt 16/10/2026): kính mờ trắng trên kính trắng mất ranh giới → nền brand nhạt + chữ/icon brand + viền mảnh. Tối: token tối tự đổi. */
.btn.soft{background:var(--brand-soft);color:var(--brand);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 18%,transparent)}
.btn.soft .ic{stroke:var(--brand)}
.recent{display:flex;gap:10px;overflow:hidden;margin-right:calc(var(--gutter)*-1)} /* tràn mép phải, cuộn ngang */
.rcard{min-width:150px;border-radius:var(--r-card);padding:var(--sp-md);display:flex;flex-direction:column;gap:6px}
.rcard .pill{align-self:flex-start}
.rcard .nm{font:600 14px/18px var(--font)}
.empty{border-radius:var(--r-xl);padding:28px var(--sp-xl);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.empty .pip{width:64px;height:64px}
/* ---- Vòng độ phủ ---- */
.ring{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;position:relative;color:var(--brand);background:conic-gradient(var(--brand) calc(var(--p)*1%),rgba(22,48,42,.1) 0)}
.ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
.ring .ic{position:relative;stroke-width:2.5}
.cov{gap:12px;padding:0 4px}
.cov .label{font-size:14px}
.meter b{color:var(--ink)}
/* ---- Kết quả (R1–R3) + Evidence Lens (L1) ---- */
.prod{display:flex;align-items:center;gap:12px;padding:0 4px}       /* sản phẩm: ảnh + tên + hãng · mã */
.prod .nm{font:600 15px/18px var(--font)}
.readtext{border-radius:var(--r-card);padding:var(--sp-lg);display:flex;flex-direction:column;gap:var(--sp-sm)} /* "Đã đọc trên nhãn" (R2) */
.readtext.tight{gap:6px} /* SY2 "Sau đó" */
.note{border-radius:var(--r-md);padding:12px 14px;display:flex;gap:10px;border:1px solid}   /* khối nhắc nổi bật, không phải chú thích mờ */
.note.attn{background:var(--attn-bg);border-color:var(--attn-line)}.note.attn p{color:var(--attn-ink)}
.labelshot{height:210px;border-radius:var(--r-viewfinder);position:relative;background:var(--paper);padding:16px;font:500 12px/1.8 var(--font);color:var(--paper-ink);overflow:hidden;box-shadow:0 12px 24px -14px rgba(22,48,42,.4)} /* ảnh nhãn đã chụp (R3) */
.labelshot .missing{position:absolute;left:10px;right:10px;bottom:10px;height:74px;border-radius:var(--r-md);border:2px dashed var(--unknown);background:var(--unknown-tint);display:grid;place-items:center;color:var(--unknown);font:700 13px/1 var(--font)}
.labeltext{border-radius:var(--r-viewfinder);background:var(--paper);padding:var(--sp-xl);font:500 15px/2 var(--font);color:var(--paper-ink);box-shadow:0 14px 28px -14px rgba(22,48,42,.45)} /* chữ nhãn lớn (L1) */
.labeltext mark{box-shadow:0 0 0 4px var(--accent-soft);font-size:16px}
.ocrhead{display:flex;gap:var(--sp-md);align-items:flex-start} /* S3: ảnh nhãn nhỏ + tiêu đề */
.ocrthumb{width:88px;height:88px;border-radius:var(--r-md);background:var(--paper);flex:none;padding:8px;font:500 6px/1.5 var(--font);color:var(--paper-ink);overflow:hidden;box-shadow:0 8px 16px -8px rgba(22,48,42,.35)}
.readtext.ocr{gap:10px}.readtext.ocr p{line-height:30px} /* S3: văn bản đã đọc, dòng thưa cho gạch chân */
.doubt{border-bottom:2px dashed var(--attn);background:var(--attn-bg);padding:0 3px;border-radius:4px;cursor:pointer} /* chỗ OCR chưa chắc */
.doubt.on{box-shadow:0 0 0 2px var(--attn-line)} /* chỗ đang chọn: chip gợi ý bên dưới thuộc chỗ này */
.ocrsug{display:flex;gap:var(--sp-sm);flex-wrap:wrap} /* chip gợi ý bấm-để-thay */
.cta{position:absolute;left:var(--gutter);right:var(--gutter);bottom:34px}  /* hàng nút cuối màn; đáy = inset cử chỉ (khung 360 ≈ 17) + 17 → máy: inset + 16 (SPECS §6, 1.0.3) */
.btn.f-s{flex:.8}.btn.f-l{flex:1.3}   /* hàng 2 nút: phụ hẹp, chính rộng */
/* ---- Vạch màu thẻ bằng chứng ---- */
.evidence{overflow:hidden;padding-left:20px}
.evidence::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.evidence.c::before{background:var(--attn)}.evidence.m::before{background:var(--unknown)}
.banner.attn{background:linear-gradient(135deg,var(--attn-grad-a),var(--attn-grad-b))}
.banner.clear{background:linear-gradient(135deg,var(--clear-grad-a),var(--clear-grad-b))}
.banner.unk{background:linear-gradient(135deg,var(--unk-grad-a),var(--unk-grad-b))}

@property --p{syntax:"<number>";inherits:true;initial-value:0}

/* ==========================================================================
   BỔ SUNG v1.0.0 — nền ambient, thanh trạng thái, lịch, biểu đồ, hộp thoại, nhập liệu,
   so sánh, dark mode, nhãn bản phát hành, ANIMATION
   ========================================================================== */
.amb{position:absolute;inset:0;pointer-events:none}
.amb.a{background:radial-gradient(260px 260px at 100% 2%,rgba(191,227,212,.95),transparent 70%),radial-gradient(240px 240px at 0% 46%,rgba(221,238,142,.8),transparent 70%),radial-gradient(260px 260px at 100% 88%,rgba(247,211,166,.7),transparent 70%)}
.amb.b{background:radial-gradient(260px 260px at 0% 0%,rgba(207,228,238,.95),transparent 70%),radial-gradient(240px 240px at 100% 52%,rgba(221,238,142,.75),transparent 70%)}
.amb.c{background:radial-gradient(260px 260px at 100% 0%,rgba(247,211,166,.75),transparent 70%),radial-gradient(240px 240px at 0% 70%,rgba(191,227,212,.8),transparent 70%)}
.amb.d{background:radial-gradient(300px 300px at 100% 0%,rgba(47,142,120,.45),transparent 70%),radial-gradient(260px 260px at 0% 75%,rgba(214,238,110,.12),transparent 70%)}

.seg.light{background:rgba(22,48,42,.07);border:1px solid rgba(255,255,255,.7)}
.seg.light span{color:var(--muted)}
.seg.light .on{background:var(--surface);color:var(--ink);box-shadow:0 4px 12px -6px rgba(22,48,42,.4)}
.seg.eq{display:flex}.seg.eq span{flex:1;justify-content:center}

/* ---- Lịch ---- */
.cal-head{display:flex;align-items:center;justify-content:space-between}
.cal-head .t{font:700 18px/24px var(--font)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:6px;text-align:center} /* ô 42 + 6 = vùng chạm 48 */
.cal-wd{font:700 11px/14px var(--font);color:var(--muted);padding-bottom:2px}
.day{height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:var(--r-day);font:600 14px/16px var(--font)}
.day .dots{display:flex;gap:2px;height:5px}.day .dots i{width:5px;height:5px;border-radius:50%}
.day .dots .a{background:var(--attn)}.day .dots .c{background:var(--clear)}.day .dots .u{background:var(--unknown)}
.day.dim{color:rgba(22,48,42,.28)}
.day.h1{background:rgba(31,109,92,.07)}.day.h2{background:rgba(31,109,92,.14)}.day.h3{background:rgba(31,109,92,.22)}
.day.today{box-shadow:inset 0 0 0 1.5px var(--brand)}
.day.sel{background:linear-gradient(140deg,var(--ink-mid),var(--ink-2));color:var(--on-ink);box-shadow:inset 0 1px 1px rgba(255,255,255,.25),0 8px 14px -8px rgba(14,33,28,.7)}
.day.sel .dots .a{background:var(--warn-lite)}.day.sel .dots .c{background:var(--clear-on-ink)}.day.sel .dots .u{background:var(--unknown-on-ink)}
.stackbar{display:flex;height:8px;border-radius:4px;overflow:hidden;gap:2px}
.stackbar i{display:block;height:100%}
.legend{display:flex;gap:12px;font:var(--t-caption);color:var(--muted);flex-wrap:wrap}
.legend span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;background:var(--c)}
.legend.rows{flex-direction:column;gap:8px;flex-wrap:nowrap} /* chú giải cạnh donut: chấm 10 + nhãn + số */
.legend.rows span{display:flex;align-items:center}
.legend.rows span::before{width:10px;height:10px;margin-right:8px}
.legend.rows b{margin-left:auto;color:var(--ink)}

/* ---- Biểu đồ (SVG/CSS thuần, màu từ token) ---- */
.chart{border-radius:var(--r-lg);padding:16px}
.chart h3{font:var(--t-label);margin-bottom:2px}.chart .sub{font:var(--t-caption);color:var(--muted)}
.donut{width:128px;height:128px;flex:none;position:relative}
.donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:14;stroke-linecap:round}
.donut .bgc{stroke:rgba(22,48,42,.08)}
.donut .ctr{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font:800 28px/1 var(--font)}
.donut .ctr small{display:block;font:600 11px/14px var(--font);color:var(--muted);margin-top:2px}
.bars{display:flex;align-items:flex-end;gap:10px;height:120px;padding-top:6px}
.bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.bars .col{width:100%;max-width:26px;display:flex;flex-direction:column-reverse;gap:2px;border-radius:10px;overflow:hidden;transform-origin:bottom}
.bars .col i{display:block;width:100%}
.bars .col i.none{height:4px;background:rgba(22,48,42,.1)} /* ngày không quét */
.bars .d{font:600 11px/14px var(--font);color:var(--muted)}
.bars .b.now .d{color:var(--ink);font-weight:800}
.hbar{display:flex;align-items:center;gap:10px;min-height:34px}
.hbar .n{width:84px;font:var(--t-label);display:flex;align-items:center;gap:6px}
.hbar .tr{flex:1;height:10px;border-radius:5px;background:rgba(22,48,42,.08);overflow:hidden}
.hbar .tr i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--brand),var(--brand-light));transform-origin:left}
.hbar .v{width:26px;text-align:right;font:700 13px/16px var(--font)}
.spark{width:100%;height:64px;display:block}
.trendpill{display:inline-flex;align-items:center;gap:4px;font:700 12px/16px var(--font);padding:3px 9px;border-radius:99px;background:var(--clear-bg);color:var(--clear)}

/* ---- Nhập liệu ---- */
.field{min-height:52px;border-radius:var(--r-md);padding:0 16px;display:flex;align-items:center;gap:10px;font:var(--t-body)}
.field.area{align-items:flex-start;padding:14px 16px;min-height:88px;color:var(--muted)}
.field .ic{color:var(--muted)}
.field.search{min-height:48px;border-radius:var(--r-pill);color:var(--muted)} /* ô tìm trong Lịch sử (T1), nền frost */
.field.focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,109,92,.15)} /* focus = viền brand + quầng 3dp */
.field.code{min-height:56px;font:var(--t-body-l);letter-spacing:.08em} /* mã vạch nhập tay */
.field.error{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)} /* lỗi = viền danger + quầng; luôn kèm dòng chữ, không chỉ màu */
.field-msg{font:var(--t-caption);color:var(--muted);margin:6px 4px 0;display:flex;gap:6px;align-items:flex-start}
.field-msg.error{color:var(--danger)}
.field-msg .ic{flex:none;margin-top:1px}
.field .caret{width:2px;height:22px;background:var(--brand)}
.field .clear{margin:0 -15px 0 auto;width:48px;height:48px;display:grid;place-items:center;color:var(--muted);flex:none} /* nút xóa chữ (app-kit UI_KIT §5.3): chỉ khi focus + có chữ, không có ở .area; vùng chạm 48, icon 18 cách mép phải 16 như icon đầu ô */
.radio{width:22px;height:22px;border-radius:50%;border:2px solid rgba(22,48,42,.3);flex:none;display:grid;place-items:center}
.radio.on{border-color:var(--brand)}.radio.on::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--brand)}
.check{width:22px;height:22px;border-radius:7px;border:2px solid rgba(22,48,42,.3);flex:none;display:grid;place-items:center}
.check.on{background:var(--brand);border-color:var(--brand);color:var(--surface)}.check .ic{width:14px;height:14px;stroke-width:3}

/* ---- Hộp thoại ---- */
.dialog{position:absolute;left:28px;right:28px;top:50%;transform:translateY(-50%);border-radius:var(--r-sheet);padding:24px 22px 18px;z-index:55;display:flex;flex-direction:column;gap:12px;background:var(--surface)}
.dialog .btns{display:flex;gap:10px;margin-top:6px}
.dialog .dlg-ic{width:52px;height:52px;border-radius:var(--r-badge);display:grid;place-items:center;background:var(--danger-bg);color:var(--danger)}
.topnote{display:flex;gap:10px;align-items:center;border-radius:20px;padding:12px 14px;font:var(--t-caption);color:var(--ink)}
.permcard{border-radius:var(--r-sheet);padding:28px 22px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center} /* SY3: quyền camera bị tắt, trên nền camera (glass-ink) */
.permcard .pc-ic{width:72px;height:72px;border-radius:var(--r-lg);background:rgba(255,255,255,.12);display:grid;place-items:center;color:var(--accent)}
.permcard .title{color:var(--on-ink)}
.permcard .body{color:rgba(244,251,247,.78)}
.cam-center{position:absolute;left:28px;right:28px;top:210px} /* khối giữa màn camera */

/* ---- Avatar ---- */
.av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 16px/1 var(--font);color:var(--surface);flex:none;background:var(--c,var(--brand));box-shadow:inset 0 1px 1px rgba(255,255,255,.5)}
.av.sm{width:32px;height:32px;font-size:13px}

/* ---- So sánh ---- */
.cmp{display:grid;grid-template-columns:92px 1fr 1fr;border-radius:var(--r-lg);overflow:hidden}
.cmp>div{padding:11px 10px;border-top:1px solid var(--hairline);display:flex;align-items:center;gap:6px;font:var(--t-caption);min-height:48px}
.cmp>div:nth-child(-n+3){border-top:0}
.cmp .h{flex-direction:column;align-items:flex-start;padding:12px 10px;gap:6px;justify-content:flex-start}
.cmp .lab{color:var(--muted);font-weight:600}
.cmp .hi{background:rgba(214,238,110,.22)}

.del{background:var(--danger-bg);color:var(--danger);text-decoration:line-through;padding:0 4px;border-radius:4px}
.add{background:var(--accent);color:var(--ink);padding:0 4px;border-radius:4px;font-weight:700}

.bubble{max-width:86%;padding:12px 14px;border-radius:20px;font:var(--t-body)}
.bubble.me{align-self:flex-end;background:linear-gradient(140deg,var(--ink-mid),var(--ink-2));color:var(--on-ink);border-bottom-right-radius:6px}
.bubble.ai{align-self:flex-start;background:var(--surface);border:1px solid var(--hairline);border-bottom-left-radius:6px}
.cite{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:8px 10px;border-radius:12px;background:var(--accent-soft);font:var(--t-caption);color:var(--ink)}

.nut{display:flex;align-items:center;gap:10px;min-height:44px}
.nut .n{width:92px;font:var(--t-label)}.nut .v{width:64px;text-align:right;font:700 14px/18px var(--font)}
.nut .bar{flex:1;height:8px;border-radius:4px;background:rgba(22,48,42,.08);overflow:hidden}.nut .bar i{display:block;height:100%;border-radius:4px;background:var(--brand);transform-origin:left}
.nut .bar i.w{background:var(--warn-bar)}

.composer{position:absolute;left:14px;right:14px;bottom:20px;height:56px;border-radius:28px;display:flex;align-items:center;gap:10px;padding:0 8px 0 18px;z-index:25;color:var(--muted)}
.composer .send{width:42px;height:42px;border-radius:50%;margin-left:auto;display:grid;place-items:center;flex:none}

/* toast */
.toast{position:absolute;left:24px;right:24px;bottom:108px;border-radius:var(--r-card);padding:12px 16px;display:flex;gap:10px;align-items:center;font:600 14px/20px var(--font);z-index:45}

/* ==========================================================================
   DARK MODE — áp class .dark lên .phone (hoặc gốc app khi hệ thống tối)
   ========================================================================== */
.dark{--canvas:#0B1411;--surface:#15221D;--ink:#EAF3EF;--ink-2:#0A120F;--muted:#9DB0A8;--hairline:rgba(255,255,255,.10);--loading-bg:rgba(255,255,255,.06);--chip-solid:rgba(255,255,255,.08);
  --brand:#5CC2A6;--brand-soft:rgba(92,194,166,.16);--accent-soft:rgba(214,238,110,.14);
  --attn:#FFCB6B;--attn-bg:rgba(255,203,107,.13);--attn-line:rgba(255,203,107,.3);
  --unknown:#A9BCE3;--unknown-bg:rgba(169,188,227,.13);--unknown-line:rgba(169,188,227,.3);
  --clear:#6FD1B4;--clear-bg:rgba(111,209,180,.13);--clear-line:rgba(111,209,180,.3);
  --danger:#FF8A84;--danger-bg:rgba(255,138,132,.14);color:var(--ink)}
.dark .glass,.dark .glass-frost{background:linear-gradient(140deg,rgba(255,255,255,.12),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 14px 34px -16px rgba(0,0,0,.6);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%)}
.dark .solid{background:var(--surface);border-color:var(--hairline);box-shadow:none}
.dark .sheet,.dark .sheet.glass,.dark .dialog{background:var(--sheet-dark)}
.dark .dockbar a{color:var(--tab-muted-dark)}
.dark .dockbar a.on{color:var(--ink);background:color-mix(in srgb,var(--ink) 25%,transparent)}
.dark .dockbar.glass{background:color-mix(in srgb,var(--canvas) 35%,transparent);border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 4px 24px rgba(0,0,0,.4)}
.dark .banner.attn{background:linear-gradient(135deg,rgba(255,203,107,.2),rgba(255,203,107,.1));color:var(--attn-on-dark)}
.dark .banner.clear{background:linear-gradient(135deg,rgba(111,209,180,.2),rgba(111,209,180,.1));color:var(--clear-on-dark)}
.dark .banner.unk{background:linear-gradient(135deg,rgba(169,188,227,.2),rgba(169,188,227,.1));color:var(--unknown-on-dark)}
.dark .banner .badge{color:var(--dark-canvas)}
.dark mark,.dark .hit{color:var(--ink-2)} /* chữ mực đậm trên accent: --ink trong tối là màu sáng */
.dark .chip.on{background:var(--accent);color:var(--ink-2);box-shadow:none}.dark .chip.on .ic{stroke:var(--ink-2)}
.dark .seg.glass-frost .on{background:color-mix(in srgb,var(--ink) 25%,transparent);color:var(--ink);box-shadow:none}
/* .acard (thẻ dị ứng) luôn bản sáng: ảnh chia sẻ/in, không áp .dark. */
.dark .day.dim{color:rgba(255,255,255,.25)}
.dark .day.sel{background:var(--accent);color:var(--ink-2)} /* mực đậm trên accent (--ink trong tối là màu sáng) */
.dark .day.sel .dots i{background:var(--ink-2)!important}
.dark .ring::before{background:var(--surface)}
.dark .donut .bgc,.dark .hbar .tr,.dark .nut .bar{stroke:rgba(255,255,255,.1);background:rgba(255,255,255,.1)}
.dark .bubble.ai{background:var(--surface)}

/* ==========================================================================
   ANIMATION — quy tắc số 0: trạng thái đứng yên = khung thiết kế cuối.
   Animation chỉ chạy khi .phone có class .in (JS thêm khi cuộn tới / bấm để phát lại),
   và CHỈ khi người dùng không bật "Giảm chuyển động".
   Android: dùng Motion tokens (spring), cùng thời lượng/độ trễ bên dưới.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  /* vào màn: nội dung trượt lên lần lượt (60ms/phần tử) */
  .in .rise{animation:rise var(--dur-medium) var(--ease) both;animation-delay:calc(var(--i,0)*60ms)}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .in .pop{animation:pop .42s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i,0)*60ms + 80ms)}
  @keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
  .in .fade{animation:fade .5s ease both;animation-delay:calc(var(--i,0)*60ms)}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  /* dock vào từ dưới; đảo Quét nảy lên */
  .in .dockwrap{animation:dockin .5s var(--ease) both .15s}
  @keyframes dockin{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
  .in .dockwrap .scan{animation:scanpop .7s cubic-bezier(.3,1.6,.5,1) both .45s}
  @keyframes scanpop{from{transform:scale(.4) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
  /* đảo Quét "thở" (chỉ vòng sáng, không đổi kích thước): MỘT nhịp sau mỗi lần chạm (1.0.3, duyệt 17/10/2026), không lặp —
     vòng lặp vẽ lại cả màn 15 khung/giây suốt 10 s (docs/PERFORMANCE.md 17/10). Mở trang = một lần chạm. */
  .dockwrap .scan{position:relative}
  .dockwrap .scan::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(214,238,110,.0);animation:breath 3.2s ease-in-out 1 1.2s}
  @keyframes breath{0%,100%{border-color:rgba(214,238,110,0);transform:scale(1)}50%{border-color:rgba(214,238,110,.75);transform:scale(1.08)}}
  /* viên tab đang chọn: giọt kính bung ra */
  .in .dockbar a.on{animation:drop .6s cubic-bezier(.3,1.4,.5,1) both .35s}
  @keyframes drop{from{transform:scale(.7);opacity:.2}to{transform:none;opacity:1}}
  /* banner trạng thái: huy hiệu nảy + xuất hiện */
  .in .banner{animation:rise .42s var(--ease) both}
  .in .banner .badge{animation:badge .7s cubic-bezier(.3,1.6,.5,1) both .2s}
  @keyframes badge{from{transform:scale(.3) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
  /* bằng chứng: thẻ vào lần lượt, đoạn chữ khớp được "quét" sáng */
  .in .evidence{animation:rise .45s var(--ease) both;animation-delay:calc(.35s + var(--i,0)*120ms)}
    .in .evidence mark{animation:sweep .7s ease-out both;animation-delay:calc(.75s + var(--i,0)*120ms)}
  @keyframes sweep{from{background-size:0% 100%}}
  .in .evidence.c::before,.in .evidence.m::before{animation:stripe .5s var(--ease) both;animation-delay:calc(.4s + var(--i,0)*120ms);transform-origin:top}
  @keyframes stripe{from{transform:scaleY(0)}to{transform:none}}
  /* vòng độ phủ & donut: vẽ dần */
  .in .ring{animation:ringfill 1.1s var(--ease) both .3s}
  @keyframes ringfill{from{--p:0}}
  .in .donut circle.seg{animation:dash 1.1s var(--ease) both .3s}
  @keyframes dash{from{stroke-dasharray:0 999}}
  .in .bars .col{animation:grow .7s var(--ease) both;animation-delay:calc(.25s + var(--i,0)*70ms)}
  @keyframes grow{from{transform:scaleY(0)}to{transform:none}}
  .in .hbar .tr i,.in .nut .bar i,.in .stackbar i{animation:growx .8s var(--ease) both;animation-delay:calc(.3s + var(--i,0)*90ms)}
  @keyframes growx{from{transform:scaleX(0)}to{transform:none}}
  .in .spark .line{stroke-dasharray:400;animation:draw 1.3s ease-out both .4s}
  @keyframes draw{from{stroke-dashoffset:400}to{stroke-dashoffset:0}}
  .in .spark .area{animation:fade .8s ease both 1s}
  /* lịch: chấm nảy lần lượt, ngày chọn phồng */
  .in .day .dots i{animation:pop .4s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.3s + var(--i,0)*18ms)}
  .in .day.sel{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both .5s}
  /* camera: đường quét chạy lên xuống, khung ngắm "thở", góc sáng nhấp */
  .scanline{animation:scan 2.2s ease-in-out infinite alternate}
  @keyframes scan{from{top:10%}to{top:88%}}
  .viewfinder i{animation:corner 2.4s ease-in-out infinite}
  @keyframes corner{0%,100%{opacity:1}50%{opacity:.55}}
  .shutter i{transition:transform .15s}.shutter:active i{transform:scale(.84)}
  /* kết quả skeleton → shimmer (có sẵn); bước tiến trình quay */
  .spin{animation:spin 1s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  /* sheet trượt lên, scrim mờ dần, hộp thoại bật */
  .in .sheet{animation:sheetup .5s var(--ease) both .1s}
  @keyframes sheetup{from{transform:translateY(60%);opacity:0}to{transform:none;opacity:1}}
  .in .scrim{animation:fade .35s ease both}
  .in .dialog{animation:dlg .45s cubic-bezier(.3,1.4,.5,1) both .1s}
  @keyframes dlg{from{opacity:0;transform:translateY(-46%) scale(.9)}to{opacity:1;transform:translateY(-50%)}}
  .in .toast{animation:toast .5s cubic-bezier(.3,1.4,.5,1) both .6s}
  @keyframes toast{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
  /* chat: bong bóng vào; 3 chấm đang gõ */
  .in .bubble{animation:rise .4s var(--ease) both;animation-delay:calc(var(--i,0)*350ms)}
  .typing i{animation:blink 1.2s infinite both}.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
  @keyframes blink{0%,80%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-3px)}}
  /* chip/ô dị nguyên: nảy khi vào */
  .in .al{animation:pop .4s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i,0)*40ms + 100ms)}
  .in .al.on .chk{animation:badge .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i,0)*40ms + 400ms)}
  /* nhấn: phồng 4dp (mô phỏng InteractiveHighlight) */
  .btn,.chip,.iconbtn,.dockbar a,.dockwrap .scan,.al,.day,.evidence{transition:transform .18s var(--ease),filter .18s}
  .btn:active,.chip:active,.iconbtn:active,.dockwrap .scan:active,.al:active,.evidence:active{transform:scale(.96)}
  .dockbar a:active{transform:scale(1.08)}
  /* Pip: chớp mắt nhẹ, chỉ khi đồng hồ chung còn thức (10 s sau lần chạm cuối, 1.0.3) → 2 lần rồi đứng yên = khung cuối */
  .pip-blink{animation:pipb 4s 2}
  @keyframes pipb{0%,92%,100%{transform:none}95%{transform:scaleY(.92)}}
  /* thẻ hero Trang chủ: ánh kính chạy chéo 1 lần */
  .in .shine::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:shine 1.3s ease .5s both;pointer-events:none}
  @keyframes shine{to{transform:translateX(120%)}}
}
.shine{position:relative;overflow:hidden}
.typing{display:flex;gap:4px;padding:2px 0}.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted)}

.cmp .pill{white-space:nowrap;padding:3px 8px;font-size:11px}

/* vào màn: mọi khối con của .stack trượt lên lần lượt (mặc định cho các màn trong index.html) */
@media (prefers-reduced-motion:no-preference){
  .in .page .stack>*:not(.rise):not(.banner){animation:rise var(--dur-medium) var(--ease) both}
  .in .page .stack>*:nth-child(1){animation-delay:60ms}
  .in .page .stack>*:nth-child(2){animation-delay:120ms}
  .in .page .stack>*:nth-child(3){animation-delay:180ms}
  .in .page .stack>*:nth-child(4){animation-delay:240ms}
  .in .page .stack>*:nth-child(5){animation-delay:300ms}
  .in .page .stack>*:nth-child(6){animation-delay:360ms}
  .in .page .stack>*:nth-child(7){animation-delay:420ms}
  .in .page .stack>*:nth-child(8){animation-delay:480ms}
  .in .page .stack>*:nth-child(9){animation-delay:540ms}
  .in .page .stack>.banner{animation-delay:0ms}
  .in .al-grid .al{animation-delay:calc(var(--n,0)*40ms + 100ms)}
}

/* ==========================================================================
   ONBOARDING — minh họa nhãn + kính lúp (cùng ngôn ngữ với icon app)
   ========================================================================== */
.ob-stage{position:relative;height:340px;margin:0 -20px}
.ob-card{position:absolute;left:46px;top:30px;width:232px;height:290px;border-radius:28px;background:linear-gradient(180deg,var(--surface),var(--label-end));transform:rotate(-5deg);box-shadow:0 40px 60px -28px rgba(22,48,42,.55),inset 0 1px 1px var(--surface);padding:30px 26px;overflow:hidden}
.ob-card::before{content:"";position:absolute;right:0;top:0;width:58px;height:58px;background:linear-gradient(225deg,transparent 50%,var(--label-fold) 50%);border-bottom-left-radius:14px}
.ob-card .ln{height:10px;border-radius:5px;background:var(--skeleton-line);margin-bottom:16px}
.ob-card .hl{height:30px;border-radius:15px;background:var(--accent);display:flex;align-items:center;padding:0 14px;margin:0 -6px 16px;transform-origin:left}
.ob-card .hl i{display:block;height:9px;width:74%;border-radius:5px;background:rgba(22,48,42,.78)}
.ob-lens{position:absolute;right:20px;bottom:30px;width:128px;height:128px;border-radius:50%;border:9px solid var(--ink);background:rgba(255,255,255,.28);backdrop-filter:blur(1px) saturate(1.5);-webkit-backdrop-filter:blur(1px) saturate(1.5);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 24px 30px -14px rgba(14,33,28,.6);display:grid;place-items:center;overflow:visible}
.ob-lens::after{content:"";position:absolute;left:94px;top:86px;width:64px;height:16px;border-radius:8px;background:linear-gradient(180deg,var(--ink-mid),var(--ink-2));transform:rotate(45deg);transform-origin:0 50%;box-shadow:0 8px 12px -6px rgba(14,33,28,.5)}
.ob-lens::before{content:"";position:absolute;left:14px;top:12px;width:34px;height:16px;border-radius:50%;background:rgba(255,255,255,.55);transform:rotate(-30deg);filter:blur(1px)}
.ob-lens span{font:800 17px/1 var(--font);color:var(--ink);background:var(--accent);padding:6px 8px;border-radius:9px;transform:rotate(-5deg)}
.ob-chip{position:absolute;z-index:4;border-radius:20px;padding:10px 12px;font:700 12px/16px var(--font);display:flex;gap:6px;align-items:center}
.ob-chip.a{right:6px;top:34px}.ob-chip.b{left:4px;bottom:34px}
.dots{display:flex;gap:6px;justify-content:center}
.dots i{width:7px;height:7px;border-radius:4px;background:rgba(22,48,42,.2);transition:width .3s var(--ease)}
.dots i.on{width:22px;background:var(--brand)}
.prog{display:flex;gap:6px;flex:1;margin:0 14px}
.prog i{flex:1;height:5px;border-radius:3px;background:rgba(22,48,42,.12)}.prog i.on{background:var(--brand)}
.ob-view{position:relative;height:250px;border-radius:32px;overflow:hidden;background:radial-gradient(120% 70% at 30% 10%,var(--cam-1),var(--cam-2) 60%,var(--cam-3));box-shadow:0 30px 50px -28px rgba(14,33,28,.7)}
.ob-view .paper2{position:absolute;left:30px;right:30px;top:42px;bottom:40px;border-radius:10px;background:var(--paper);transform:rotate(-2deg);padding:16px;font:500 12px/1.8 var(--font);color:var(--paper-ink)}
.ob-view .vf{position:absolute;inset:26px;border-radius:22px;box-shadow:0 0 0 999px rgba(6,14,12,.38)}
.ob-view .vf i{position:absolute;width:30px;height:30px;border:3px solid var(--surface)}
.ob-view .vf i:nth-child(1){left:-2px;top:-2px;border-right:0;border-bottom:0;border-top-left-radius:22px}.ob-view .vf i:nth-child(2){right:-2px;top:-2px;border-left:0;border-bottom:0;border-top-right-radius:22px}.ob-view .vf i:nth-child(3){left:-2px;bottom:-2px;border-right:0;border-top:0;border-bottom-left-radius:22px}.ob-view .vf i:nth-child(4){right:-2px;bottom:-2px;border-left:0;border-top:0;border-bottom-right-radius:22px}
.ob-view .sl{position:absolute;left:34px;right:34px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 14px var(--accent);top:50%}
.reassure{display:flex;gap:12px;align-items:center;font:var(--t-label)}
.reassure .ic-wrap{width:36px;height:36px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:none}

@media (prefers-reduced-motion:no-preference){
  .in .ob-card{animation:obcard .8s var(--ease) both .1s}
  @keyframes obcard{from{opacity:0;transform:translateY(60px) rotate(-12deg)}to{opacity:1;transform:rotate(-5deg)}}
  .in .ob-card .hl{animation:growx .7s var(--ease) both .9s}
  .in .ob-lens{animation:oblens 1s cubic-bezier(.3,1.3,.5,1) both .6s}
  @keyframes oblens{from{opacity:0;transform:translate(-120px,-30px) scale(.7)}to{opacity:1;transform:none}}
  .in .ob-chip{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
  .in .ob-chip.a{animation-delay:1.1s}.in .ob-chip.b{animation-delay:1.3s}
  .ob-chip{animation-name:none}
  .in .ob-chip.a,.in .ob-chip.b{animation-name:pop}
  .ob-card,.ob-lens{will-change:transform}
  .in .ob-view .sl{animation:scan2 2.2s ease-in-out infinite alternate}
  @keyframes scan2{from{top:22%}to{top:78%}}
}
.wm{font:800 48px/1 var(--font);letter-spacing:-.035em;color:var(--ink);white-space:nowrap;display:inline-flex;align-items:center}
/* "Cue" = vệt bút dạ quang phẳng ở nửa dưới chữ (cùng ngôn ngữ với vệt lime trên icon). Không bóng, không nghiêng. */
.wm b{font-weight:800;color:var(--ink);background:linear-gradient(transparent 52%,var(--accent) 52%,var(--accent) 92%,transparent 92%);padding:0 .05em;margin-left:.01em}
.wm.lg{font-size:60px}
/* nền tối: bỏ vệt (nửa trên chữ mực sẽ chìm), "Cue" thành chữ accent */
.wm.inv{color:var(--on-ink)}.wm.inv b,.dark .wm b{color:var(--accent);background:none}

/* ===== SPLASH ===== */
.spl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.spl-mark{width:132px;height:132px;border-radius:34px;overflow:hidden;position:relative;box-shadow:0 30px 50px -24px rgba(23,86,74,.8),inset 0 0 0 1px rgba(255,255,255,.2)}
.spl-mark>img.bg,.spl-mark>svg{position:absolute;inset:0;width:100%;height:100%}
.spl-word{font:800 34px/1 var(--font);letter-spacing:-.03em}
.spl-tag{font:500 14px/20px var(--font);color:var(--muted)}
.spl-foot{position:absolute;bottom:44px;left:0;right:0;text-align:center;font:var(--t-caption);color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .anim .m-ring{animation:ring 4.4s var(--ease) infinite both}
  .anim .m-hl{animation:hl 4.4s var(--ease) infinite both;transform-box:fill-box;transform-origin:left center}
  .anim .spl-word{animation:up 4.4s var(--ease) infinite both}
  .anim .spl-tag{animation:up2 4.4s var(--ease) infinite both}
  .anim .spl-mark{animation:splpop 4.4s var(--ease) infinite both}
  @keyframes splpop{0%{transform:scale(.86);opacity:0}9%{transform:scale(1);opacity:1}92%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
  @keyframes ring{0%,4%{stroke-dashoffset:100}18%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
  @keyframes hl{0%,16%{transform:scaleX(0)}30%{transform:scaleX(1)}100%{transform:scaleX(1)}}
  @keyframes up{0%,30%{transform:translateY(10px);opacity:0}42%{transform:none;opacity:1}92%{opacity:1}100%{opacity:0}}
  @keyframes up2{0%,40%{transform:translateY(8px);opacity:0}52%{transform:none;opacity:1}92%{opacity:1}100%{opacity:0}}
}

/* ==========================================================================
   QUÉT Ở XA — auto-zoom, khóa mục tiêu, chụp, quét chữ (khung chạy thử 8s)
   Trạng thái đứng yên (không animation) = khung CUỐI: đã nhận mã / đã đọc xong.
   ========================================================================== */
.fl{background:radial-gradient(120% 70% at 30% 10%,var(--cam-1),var(--cam-2) 60%,var(--cam-3))}
.fl .zoomer{position:absolute;inset:0;transform-origin:227px 378px;transform:translate(-25px,0) scale(2.6)}
.fl.tx .zoomer{transform-origin:215px 390px;transform:translate(-20px,-6px) scale(2.3)}
.fl .shelf{position:absolute;left:-40px;right:-40px;top:250px;height:260px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 60%),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 38px,transparent 38px 70px);filter:blur(3px)}
.fl .farpack{position:absolute;left:190px;top:330px;width:74px;height:96px;border-radius:8px;background:linear-gradient(160deg,var(--pack-a),var(--pack-b));box-shadow:0 14px 20px -8px rgba(0,0,0,.6)}
.fl .farpack .t{position:absolute;left:8px;right:8px;top:10px;height:6px;border-radius:3px;background:var(--pack-ink)}
.fl .farpack .t2{top:22px;right:30px;height:4px;opacity:.7}
.fl .farpack .bar{position:absolute;left:10px;right:10px;top:54px;height:28px;background:repeating-linear-gradient(90deg,var(--barcode-ink) 0 1.4px,transparent 1.4px 2.8px,var(--barcode-ink) 2.8px 3.6px,transparent 3.6px 5.4px,var(--barcode-ink) 5.4px 7.6px,transparent 7.6px 9px)}
.fl.tx .farpack{left:150px;top:300px;width:128px;height:176px}
.fl.tx .farpack .tb{position:absolute;left:10px;right:10px;top:58px;font:600 6.4px/8.8px var(--font);color:var(--paper-ink-2)}
.fl .vig{position:absolute;inset:0;box-shadow:inset 0 0 120px rgba(0,0,0,.55);pointer-events:none}
.fl .det{position:absolute;left:122px;top:382px;width:160px;height:96px}
.fl.tx .det{left:56px;top:298px;width:272px;height:126px}
.fl .det i{position:absolute;width:24px;height:24px;border:3.5px solid var(--success-lite)}
.fl .det i:nth-child(1){left:-3px;top:-3px;border-right:0;border-bottom:0;border-top-left-radius:10px}
.fl .det i:nth-child(2){right:-3px;top:-3px;border-left:0;border-bottom:0;border-top-right-radius:10px}
.fl .det i:nth-child(3){left:-3px;bottom:-3px;border-right:0;border-top:0;border-bottom-left-radius:10px}
.fl .det i:nth-child(4){right:-3px;bottom:-3px;border-left:0;border-top:0;border-bottom-right-radius:10px}
.fl .det::after{content:"";position:absolute;inset:0;border-radius:12px;background:rgba(125,227,184,.14)}
.fl .beam{position:absolute;left:122px;width:160px;height:3px;top:382px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 18px var(--accent);opacity:0}
.fl.tx .beam{left:56px;width:272px;top:298px}
.fl .flash{position:absolute;inset:0;background:var(--surface);opacity:0;z-index:30;pointer-events:none}
.fl .hud{position:absolute;left:24px;right:24px;top:118px;height:44px;z-index:12}
.fl .hud span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:22px;font:700 14px/20px var(--font);opacity:0;background:rgba(14,33,28,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.24);color:var(--on-ink)}
.fl .hud span.s5{opacity:1;background:rgba(31,109,92,.8);border-color:rgba(125,227,184,.6)}
.fl .zr{position:absolute;left:50%;bottom:132px;transform:translateX(-50%);z-index:12;display:flex;gap:4px;padding:4px;border-radius:99px}
.fl .zr span{height:34px;min-width:44px;padding:0 10px;display:grid;place-items:center;border-radius:99px;font:700 13px/1 var(--font);color:rgba(244,251,247,.8)}
.fl .zr span.on{background:var(--surface);color:var(--ink)}
.fl .zr .z1{display:none}
.fl .ocr{position:absolute;left:68px;top:310px;width:248px;height:101px;padding:0;display:flex;flex-direction:column;gap:8px;z-index:8}
.fl .ocr i{mix-blend-mode:multiply;display:block;height:12px;border-radius:6px;background:var(--accent);opacity:.62}
.fl .ocr i:nth-child(1){width:92%}.fl .ocr i:nth-child(2){width:100%}.fl .ocr i:nth-child(3){width:78%}.fl .ocr i:nth-child(4){width:96%}.fl .ocr i:nth-child(5){width:60%}
.fl:not(.tx) .ocr{display:none}
.fl .shut{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:72px;height:72px;border-radius:50%;border:4px solid var(--surface);padding:5px;z-index:14}
.fl .shut i{display:block;width:100%;height:100%;border-radius:50%;background:var(--surface)}
@media (prefers-reduced-motion:no-preference){
  .fl .zoomer{animation:fl-zbc 8s var(--ease) infinite both}
  .fl.tx .zoomer{animation:fl-ztx 8s var(--ease) infinite both}
  @keyframes fl-zbc{0%,14%{transform:translate(0,0) scale(1);filter:blur(2.4px)}44%{transform:translate(-25px,0) scale(2.6);filter:blur(1.4px)}50%,92%{transform:translate(-25px,0) scale(2.6);filter:blur(0)}100%{transform:translate(0,0) scale(1);filter:blur(2.4px)}}
  @keyframes fl-ztx{0%,14%{transform:translate(0,0) scale(1);filter:blur(2.4px)}44%{transform:translate(-20px,-6px) scale(2.3);filter:blur(1.4px)}50%,92%{transform:translate(-20px,-6px) scale(2.3);filter:blur(0)}100%{transform:translate(0,0) scale(1);filter:blur(2.4px)}}
  .fl .det{animation:fl-detbc 8s var(--ease) infinite both}
  .fl.tx .det{animation:fl-dettx 8s var(--ease) infinite both}
  @keyframes fl-detbc{0%,12%{opacity:0;left:194px;top:378px;width:66px;height:40px}16%{opacity:1;left:194px;top:378px;width:66px;height:40px}46%{opacity:1;left:122px;top:382px;width:160px;height:96px;transform:none}50%{transform:scale(1.07)}54%,92%{opacity:1;left:122px;top:382px;width:160px;height:96px;transform:none}98%,100%{opacity:0;left:122px;top:382px;width:160px;height:96px}}
  @keyframes fl-dettx{0%,12%{opacity:0;left:154px;top:350px;width:122px;height:58px}16%{opacity:1;left:154px;top:350px;width:122px;height:58px}46%{opacity:1;left:56px;top:298px;width:272px;height:126px;transform:none}50%{transform:scale(1.04)}54%,92%{opacity:1;left:56px;top:298px;width:272px;height:126px;transform:none}98%,100%{opacity:0;left:56px;top:298px;width:272px;height:126px}}
  .fl .det i{animation:fl-corner 8s infinite both}
  @keyframes fl-corner{0%,15%{border-color:var(--accent)}16%,49%{border-color:var(--surface)}50%{border-color:var(--accent)}51%,66%{border-color:var(--surface)}67%,100%{border-color:var(--success-lite)}}
  .fl .det::after{animation:fl-fill 8s infinite both}
  @keyframes fl-fill{0%,60%{background:rgba(255,255,255,0)}68%,92%{background:rgba(125,227,184,.14)}100%{background:rgba(255,255,255,0)}}
  .fl .beam{animation:fl-beambc 8s linear infinite both}
  @keyframes fl-beambc{0%,58%{opacity:0;top:382px}59%{opacity:1;top:382px}65%{opacity:1;top:476px}66%,100%{opacity:0;top:476px}}
  .fl.tx .beam{animation:fl-beamtx 8s linear infinite both}
  @keyframes fl-beamtx{0%,56%{opacity:0;top:298px}57%{opacity:1;top:298px}64%{opacity:1;top:420px}65%,100%{opacity:0;top:420px}}
  .fl .flash{animation:fl-flash 8s infinite both}
  @keyframes fl-flash{0%,66%{opacity:0}67.5%{opacity:.45}71%,100%{opacity:0}} /* .45: .92 chói trên máy thật (01/10) */
  .fl .shut i{animation:fl-shut 8s infinite both}
  @keyframes fl-shut{0%,65.5%{transform:none}67%{transform:scale(.8)}70%,100%{transform:none}}
  .fl .hud .s1{animation:fl-h1 8s infinite both}
  @keyframes fl-h1{0%{opacity:1}11%{opacity:1}12%,100%{opacity:0}}
  .fl .hud .s2{animation:fl-h2 8s infinite both}
  @keyframes fl-h2{0%,11%{opacity:0}12%{opacity:1}21%{opacity:1}22%,100%{opacity:0}}
  .fl .hud .s3{animation:fl-h3 8s infinite both}
  @keyframes fl-h3{0%,21%{opacity:0}22%{opacity:1}49%{opacity:1}50%,100%{opacity:0}}
  .fl .hud .s4{animation:fl-h4 8s infinite both}
  @keyframes fl-h4{0%,49%{opacity:0}50%{opacity:1}65%{opacity:1}66%,100%{opacity:0}}
  .fl .hud .s5{animation:fl-h5 8s infinite both}
  @keyframes fl-h5{0%,67%{opacity:0}68%{opacity:1}95%{opacity:1}96%,100%{opacity:0}}
  .fl .zr .z1{display:grid;animation:fl-z1 8s infinite both}
  .fl .zr .z2{animation:fl-z2 8s infinite both}
  @keyframes fl-z1{0%,20%{opacity:1}24%,100%{opacity:0;min-width:0;width:0;padding:0;overflow:hidden}}
  @keyframes fl-z2{0%,20%{opacity:0;min-width:0;width:0;padding:0;overflow:hidden}24%,94%{opacity:1;min-width:44px}100%{opacity:0;min-width:0;width:0;padding:0;overflow:hidden}}
  .fl .ocr i:nth-child(1){animation:fl-ocr1 8s infinite both;transform-origin:left}
  @keyframes fl-ocr1{0%,71.2%{transform:scaleX(0)}74.2%,92%{transform:scaleX(1);opacity:.62}98%,100%{transform:scaleX(0);opacity:0}}
  .fl .ocr i:nth-child(2){animation:fl-ocr2 8s infinite both;transform-origin:left}
  @keyframes fl-ocr2{0%,74.4%{transform:scaleX(0)}77.4%,92%{transform:scaleX(1);opacity:.62}98%,100%{transform:scaleX(0);opacity:0}}
  .fl .ocr i:nth-child(3){animation:fl-ocr3 8s infinite both;transform-origin:left}
  @keyframes fl-ocr3{0%,77.6%{transform:scaleX(0)}80.6%,92%{transform:scaleX(1);opacity:.62}98%,100%{transform:scaleX(0);opacity:0}}
  .fl .ocr i:nth-child(4){animation:fl-ocr4 8s infinite both;transform-origin:left}
  @keyframes fl-ocr4{0%,80.8%{transform:scaleX(0)}83.8%,92%{transform:scaleX(1);opacity:.62}98%,100%{transform:scaleX(0);opacity:0}}
  .fl .ocr i:nth-child(5){animation:fl-ocr5 8s infinite both;transform-origin:left}
  @keyframes fl-ocr5{0%,84.0%{transform:scaleX(0)}87.0%,92%{transform:scaleX(1);opacity:.62}98%,100%{transform:scaleX(0);opacity:0}}
}

/* chip zoom + nhắc ở các màn quét tĩnh */
.zoomrow{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:4px;border-radius:99px;z-index:12}
.zoomrow span{height:34px;min-width:44px;padding:0 10px;display:grid;place-items:center;border-radius:99px;font:700 13px/1 var(--font);color:rgba(244,251,247,.8)}
.zoomrow span.on{background:var(--surface);color:var(--ink)}
/* ---- Packshot theo loại sản phẩm (nền gradient giữ chỗ cho ảnh thật) ---- */
.pk.bis{--pa:var(--pk-bis-a);--pb:var(--pk-bis-b)}
.pk.oat{--pa:var(--pk-oat-a);--pb:var(--pk-oat-b)}
.pk.noo{--pa:var(--pk-noo-a);--pb:var(--pk-noo-b)}
.pk.cho{--pa:var(--pk-cho-a);--pb:var(--pk-cho-b)}
.pk.yog{--pa:var(--pk-yog-a);--pb:var(--pk-yog-b)}
.pk.rice{--pa:var(--pk-rice-a);--pb:var(--pk-rice-b)}

/* ===== PW: LabelCue Plus & thanh toán ===== */
.perk{display:flex;gap:12px;align-items:flex-start}
.perk .ic-wrap{width:36px;height:36px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:none}
.perk .nm{font:600 15px/20px var(--font)}
.plan{position:relative;display:flex;align-items:center;gap:12px;min-height:68px;padding:14px 16px;border-radius:var(--r-card);border:1.5px solid var(--hairline);background:var(--surface)} /* gói đăng ký: radio + tên + giá */
.plan.on{border-color:var(--brand);background:var(--brand-soft)}
.plan .grow{flex:1;min-width:0}
.plan .price{font:700 16px/20px var(--font);text-align:right;white-space:nowrap}
.plan .price small{display:block;font:var(--t-caption);color:var(--muted);font-weight:500}
.plan .pill{position:absolute;top:-11px;right:14px}
.plan.sk-plan{border-style:dashed}
.pill.brand{background:var(--brand);color:var(--surface)} /* nhãn thương mại (Tiết kiệm…), không mang nghĩa trạng thái an toàn */
.dialog .dlg-ic.ok{background:var(--brand-soft);color:var(--brand)} /* hộp thoại xác nhận thành công */
.paywall-fine{font:var(--t-caption);color:var(--muted);text-align:center;padding:0 8px}
.paywall-fine .link{color:var(--ink);text-decoration:underline;text-underline-offset:2px;font-weight:600}

/* ===== kit-map.css ===== */
/* ==========================================================================
   Ánh xạ token LabelCue → biến --k-* của app-kit (design/kit/kit.css).
   Thứ tự nạp: labelcue.css → kit/kit-tokens.sample.css (giá trị mặc định của kit: cỡ, bo góc, lò xo)
               → kit-map.css (file này: màu, chữ của LabelCue) → kit/kit.css.
   Không có mã màu ở đây: chỉ var() token của labelcue.css và color-mix(). Thư mục kit/ do
   `py -3 ../app-kit/sync_kit.py --apply` ghi, không sửa tay.
   Khai trên cả :root và .dark vì var() được tính tại phần tử khai báo: khai một lần ở :root thì
   khung .dark vẫn nhận màu sáng.
   ========================================================================== */
:root, .dark {
  --k-background: var(--canvas);
  --k-surface: var(--surface);
  --k-content: var(--ink);
  --k-content-muted: var(--muted);
  --k-accent: var(--brand);
  --k-accent-soft: var(--brand-soft);
  --k-on-accent: var(--on-brand);
  --k-error: var(--danger);
  --k-line: var(--hairline);
  --k-scrim: color-mix(in srgb, var(--ink-2) 45%, transparent);
  --k-glass-fill: color-mix(in srgb, var(--surface) 30%, transparent);
  --k-glass-fill-strong: color-mix(in srgb, var(--surface) 75%, transparent);
  --k-glass-fill-opaque: color-mix(in srgb, var(--surface) 95%, transparent);
  --k-glass-stroke: color-mix(in srgb, var(--surface) 65%, transparent);
  --k-glass-highlight: color-mix(in srgb, var(--surface) 95%, transparent);
  --k-glass-shadow: color-mix(in srgb, var(--ink-2) 18%, transparent);
  --k-chrome-fill: color-mix(in srgb, var(--surface) 20%, transparent);
  --k-tab-selected-fill: color-mix(in srgb, var(--brand) 16%, transparent);
  --k-tab-selected-content: var(--brand);
  --k-selected-fill: var(--ink);
  --k-selected-content: var(--on-ink);
  --k-raised-fill: color-mix(in srgb, var(--surface) 97%, transparent);
  /* Web (kit/store.css): nút tải luôn tối. Màu máy (--k-device-*) giữ của kit: đồ vật thật, không theo màu app. */
  --k-store-fill: var(--ink-2);
  --k-store-content: var(--on-ink);
  /* Đốm nền: cùng họ màu với nền đốm của LabelCue (bạc hà, chanh, xanh lá). */
  --k-blob-a: color-mix(in srgb, var(--brand-light) 55%, transparent);
  --k-blob-b: color-mix(in srgb, var(--accent) 60%, transparent);
  --k-blob-c: color-mix(in srgb, var(--orb-mint) 70%, transparent);
  --k-blob-d: color-mix(in srgb, var(--accent-soft) 70%, transparent);

  /* Số đo dock LabelCue (SPECS §5) cho thanh tab của kit: 4 tab + nút Quét vừa máy 360 dp không cắt chữ. */
  --k-size-tab-inset: 14px;
  --k-size-tab-bar: var(--dock-h);
  --k-text-tab-selected: 700 13px/1 var(--font);

  --k-font-body: var(--font);
  --k-font-display: var(--font);
  --k-display-weight: 700;
  --k-text-display: var(--t-display);
  --k-text-title: var(--t-title);
  --k-text-body: var(--t-body);
  --k-text-label: var(--t-label);
  --k-text-caption: var(--t-caption);
}

/* Tối: bản tối của kit (viên sáng mờ, chữ sáng; kính phủ màu nền tối). */
.dark {
  --k-scrim: color-mix(in srgb, var(--ink-2) 60%, transparent);
  --k-glass-fill: color-mix(in srgb, var(--ink) 12%, transparent);
  --k-glass-fill-strong: color-mix(in srgb, var(--surface) 32%, transparent);
  --k-glass-stroke: color-mix(in srgb, var(--ink) 28%, transparent);
  --k-glass-highlight: color-mix(in srgb, var(--ink) 60%, transparent);
  --k-glass-shadow: color-mix(in srgb, var(--ink-2) 40%, transparent);
  --k-chrome-fill: color-mix(in srgb, var(--canvas) 35%, transparent);
  --k-tab-selected-fill: color-mix(in srgb, var(--ink) 25%, transparent);
  --k-tab-selected-content: var(--ink);
  --k-selected-fill: var(--ink);
  --k-selected-content: var(--ink-2);
  --k-raised-fill: color-mix(in srgb, var(--ink) 25%, transparent);
  --k-blob-a: color-mix(in srgb, var(--brand) 45%, transparent);
  --k-blob-b: color-mix(in srgb, var(--accent) 35%, transparent);
  --k-blob-c: color-mix(in srgb, var(--brand-mid) 40%, transparent);
  --k-blob-d: color-mix(in srgb, var(--brand-band) 50%, transparent);
}

/* ===== web-kit/tokens.css ===== */
/* Token riêng của web LabelCue (số đo, chuyển động). Màu: labelcue.css → kit-map.css. */
:root {
  --lw-fs-hero: clamp(40px, 6.2vw, 76px);
  --lw-fs-h2: clamp(30px, 4vw, 46px);
  --lw-fs-h3: 20px;
  --lw-fs-lead: 19px;
  --lw-fs-body: 17px;
  --lw-fs-small: 14px;
  --lw-fs-label: 12px;
  --lw-space-1: 4px;
  --lw-space-2: 8px;
  --lw-space-3: 12px;
  --lw-space-4: 16px;
  --lw-space-5: 20px;
  --lw-space-6: 24px;
  --lw-space-8: 32px;
  --lw-space-10: 40px;
  --lw-space-14: 56px;
  --lw-space-20: 80px;
  --lw-space-30: 120px;
  --lw-maxw: 1160px;
  --lw-radius-card: 28px;
  --lw-radius-tile: 20px;
  --lw-radius-icon: 14px;
  --lw-radius-phone: 46px;
  --lw-blur-glass: 24px;
  --lw-blur-frost: 14px;
  --lw-blur-blob: 80px;
  --lw-dur-quick: 160ms;
  --lw-dur-base: 280ms;
  --lw-dur-enter: 700ms;
  --lw-tour-interval: 5s; /* kit-site.js đọc biến này để biết bao lâu chuyển ảnh */
  --lw-ease-out: cubic-bezier(.2, .8, .2, 1);
  --lw-surface-solid: var(--surface);
}

/* ===== kit/kit.css ===== */
/*
 * kit.css: bản CSS của các component trong app-kit (android/designsystem/.../component, glass), để artboard HTML
 * của mọi app vẽ cùng một kiểu với Android kit.
 *
 * CÁCH DÙNG
 * - Nạp SAU file token của app:  <link rel="stylesheet" href="labelcue.css"> rồi <link rel="stylesheet" href="kit/kit.css">
 *   (horoscope/fyri: gen.py chèn nội dung file này vào CSS của trang).
 * - App tự khai mọi biến --k-* (ánh xạ từ token riêng), vd `--k-accent: var(--brand); --k-surface: var(--card);`.
 *   Danh sách biến và giá trị mẫu: kit-tokens.sample.css. Thiếu biến nào thì thuộc tính đó mất tác dụng.
 * - Giao diện tối: class `dark` ở phần tử tổ tiên, app khai lại biến màu trong `.dark { … }`.
 * - Mọi class có tiền tố `k-` (trạng thái: `is-selected`, `is-focused`, `is-error`, `is-highlighted`, `is-disabled`).
 *   Biến nội bộ của component có tiền tố `--kx-` (không phải token, app không khai).
 * - "Giảm hiệu ứng" của app (kính thành Frost): class `k-reduce-effects` ở tổ tiên. Kiểu Rich (kính có bóng): `k-rich`.
 *
 * LUẬT: file này không có mã màu cố định (chỉ var(--k-*), transparent, currentColor, color-mix() trên biến).
 * Sửa component thì sửa cả Kotlin và file này trong cùng commit; kiểm bằng `py -3 scripts/check_kit_css.py`.
 *
 * GIỚI HẠN SO VỚI ANDROID (xấp xỉ, xem design/README.md):
 * - Loe (lens), tách màu ở mép: CSS không bẻ cong được nền → vẽ vành sáng trong (inset glow) giả độ dày kính.
 * - Kính Android mặc định chỉ khúc xạ NỀN; backdrop-filter lấy mẫu MỌI thứ phía sau → luôn blur như khi
 *   app bật overlaySamplesContent (chrome 8, card 6, control 2 dp; quy ra độ lệch chuẩn × 0,58) để chữ phía sau nhòe như ảnh C+.
 * - Góc liên tục (glassPill, glassLg) → border-radius thường. Lò xo → đường linear() lấy mẫu (token --k-spring-*).
 * - Giọt nước, kéo ngang, co giãn theo vận tốc: không có; artboard vẽ trạng thái đứng yên.
 */

/* ================================================================ nền chung */

:is(
  .k-bg, .k-card, .k-tabbar, .k-tabbar__bar, .k-tabbar__item, .k-tabbar-action, .k-seg, .k-seg__opt,
  .k-menu, .k-menu__item, .k-menu__divider, .k-menu-button, .k-round-button, .k-round-button__face,
  .k-sheet, .k-scrim, .k-field, .k-field__box, .k-field__input, .k-field__clear, .k-field__btn
) {
  box-sizing: border-box;
}

/* Nút của kit: bỏ kiểu mặc định của trình duyệt. */
:is(.k-tabbar__item, .k-tabbar-action, .k-seg__opt, .k-menu__item, .k-menu-button, .k-round-button, .k-field__clear, .k-field__btn) {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ================================================================ chữ và icon (XxBasics.kt: XxText, XxIcon) */

.k-text-display { font: var(--k-text-display); letter-spacing: var(--k-tracking-display); }
.k-text-title { font: var(--k-text-title); letter-spacing: var(--k-tracking-display); }
.k-text-heading { font: var(--k-text-heading); }
.k-text-body { font: var(--k-text-body); }
.k-text-body-strong { font: var(--k-text-body-strong); }
.k-text-caption { font: var(--k-text-caption); }
.k-text-label { font: var(--k-text-label); letter-spacing: var(--k-tracking-label); }
.k-text-button { font: var(--k-text-button); }
.k-text-number { font: var(--k-text-number); font-variant-numeric: tabular-nums; }
.k-muted { color: var(--k-content-muted); }

/* Icon nét 1.8 trên khung 24 (XxKitIcons), màu theo chữ của khối chứa. */
.k-icon {
  display: block;
  flex: none;
  width: var(--k-size-icon);
  height: var(--k-size-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.k-icon--small { width: var(--k-size-icon-small); height: var(--k-size-icon-small); }

/* ================================================================ kính (GlassStyle.kt, UI_KIT §1.3b) */

/*
 * Kính thật (Liquid): chrome, card, control. Mỗi preset khai biến --kx-*; một luật chung vẽ.
 * --kx-fill      lớp phủ lên kính (surface)
 * --kx-fallback  nền khi không có kính thật (fallbackSurface): trình duyệt không có backdrop-filter, giảm trong suốt
 * --kx-sheen     cường độ dải sáng giả kính khi rơi về Frost (fallbackSheen)
 * --kx-blur      blur nền. Android đổi bán kính blur ra độ lệch chuẩn = 0,577 × bán kính (hwui), CSS blur() nhận thẳng
 *                độ lệch chuẩn → bán kính Kotlin × 0,58.
 * --kx-hl độ dày vành sáng (highlightWidth); --kx-lens độ dày vành loe giả
 */
.k-glass-chrome, .k-tabbar__bar, .k-tabbar-action {
  --kx-fill: var(--k-chrome-fill);
  --kx-fallback: var(--k-glass-fill-opaque);
  --kx-sheen: 100%;
  --kx-blur: calc(8px * 0.58);
  --kx-hl: 1px;
  --kx-lens: 14px;
  --kx-shadow: 0 4px 24px var(--k-glass-shadow);
  color: var(--k-content);
}
.k-glass-card {
  --kx-fill: var(--k-glass-fill);
  --kx-fallback: var(--k-glass-fill-strong);
  --kx-sheen: 100%;
  --kx-blur: calc(6px * 0.58);
  --kx-hl: 0.5px;
  --kx-lens: 8px;
  --kx-shadow: 0 0 0 transparent;
  color: var(--k-content);
}
.k-glass-control, .k-menu-button, .k-round-button__face {
  --kx-fill: var(--k-glass-fill);
  --kx-fallback: var(--k-glass-fill-strong);
  --kx-sheen: 100%;
  --kx-blur: calc(2px * 0.58);
  --kx-hl: 0.5px;
  --kx-lens: 8px;
  --kx-shadow: 0 0 0 transparent;
  color: var(--k-content);
}
/* Kiểu Rich (XxGlassLook.Rich): thẻ và nút kính có bóng. */
.k-rich .k-glass-card { --kx-shadow: 0 4px 24px var(--k-glass-shadow); }
.k-rich :is(.k-glass-control, .k-menu-button, .k-round-button__face) { --kx-shadow: 0 3px 16px var(--k-glass-shadow); }
/* Menu: kính chrome không tách màu, phủ glassFillOpaque × 0.82 để đọc được chữ trên nội dung rối (XxMenu.kt). */
.k-menu {
  --kx-fill: color-mix(in srgb, var(--k-glass-fill-opaque) 82%, transparent);
  --kx-fallback: var(--k-glass-fill-opaque);
  --kx-sheen: 100%;
  --kx-blur: calc(8px * 0.58);
  --kx-hl: 1px;
  --kx-lens: 12px;
  --kx-shadow: 0 4px var(--k-size-menu-shadow) var(--k-glass-shadow);
  color: var(--k-content);
}

:is(.k-glass-chrome, .k-glass-card, .k-glass-control, .k-tabbar__bar, .k-tabbar-action, .k-menu, .k-menu-button, .k-round-button__face) {
  background: var(--kx-fill);
  -webkit-backdrop-filter: blur(var(--kx-blur)) saturate(1.5);
  backdrop-filter: blur(var(--kx-blur)) saturate(1.5);
  /* Vành: viền mảnh + ánh sáng chéo 45° (sáng ở mép trên-trái và dưới-phải như Highlight của Kyant) + vành loe giả. */
  box-shadow:
    var(--kx-shadow),
    inset 0 0 0 var(--kx-hl) var(--k-glass-stroke),
    inset var(--kx-hl) calc(var(--kx-hl) * 1.5) 0 0 color-mix(in srgb, var(--k-glass-highlight) 80%, transparent),
    inset calc(var(--kx-hl) * -1) calc(var(--kx-hl) * -1.5) 0 0 color-mix(in srgb, var(--k-glass-highlight) 55%, transparent),
    inset 0 0 var(--kx-lens) color-mix(in srgb, var(--k-glass-highlight) 30%, transparent);
}

/* Kính giả (Frost): accent, frost, sheet và các component dùng frost. Không lấy mẫu nền (rẻ như Android). */
.k-frost, .k-field__box {
  --kx-fallback: var(--k-glass-fill-strong);
  --kx-sheen: 40%;
  --kx-shadow: 0 0 0 transparent;
  color: var(--k-content);
}
/* Rãnh segmented trong hơn frost: nền glassFill, dải sáng 0.25 (XxSegmentedTabs.kt). */
.k-seg {
  --kx-fallback: var(--k-glass-fill);
  --kx-sheen: 25%;
  --kx-shadow: 0 0 0 transparent;
  color: var(--k-content);
}
/* Nút chính màu nhấn: đặc có dải sáng nhẹ (look Optimized), bóng màu nhấn 40%. */
.k-accent {
  --kx-fallback: var(--k-accent);
  --kx-sheen: 22%;
  --kx-shadow: 0 4px 20px color-mix(in srgb, var(--k-accent) 40%, transparent);
  color: var(--k-on-accent);
}
/* Sheet, hộp thoại: nền ĐẶC 100% (UI_KIT §1.3b, §4.3). */
.k-sheet-surface, .k-sheet {
  --kx-fallback: var(--k-surface);
  --kx-sheen: 30%;
  --kx-shadow: 0 0 0 transparent;
  color: var(--k-content);
}

/* Vẽ Frost: nền + dải sáng chéo góc trên-trái (frostSheen) + viền mảnh glassStroke. */
:is(.k-frost, .k-accent, .k-sheet-surface, .k-sheet, .k-seg, .k-field__box) {
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--k-glass-highlight) var(--kx-sheen), transparent), transparent 70%),
    var(--kx-fallback);
  box-shadow: var(--kx-shadow), inset 0 0 0 var(--k-size-hairline) var(--k-glass-stroke);
}

/* Không có kính thật → kính thật rơi về Frost với fallbackSurface của nó (như GlassQuality.Off trên Android ≤ 11). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(.k-glass-chrome, .k-glass-card, .k-glass-control, .k-tabbar__bar, .k-tabbar-action, .k-menu, .k-menu-button, .k-round-button__face) {
    background:
      radial-gradient(circle at 12% 0, color-mix(in srgb, var(--k-glass-highlight) var(--kx-sheen), transparent), transparent 70%),
      var(--kx-fallback);
    box-shadow: var(--kx-shadow), inset 0 0 0 var(--k-size-hairline) var(--k-glass-stroke);
  }
}
@media (prefers-reduced-transparency: reduce) {
  :is(.k-glass-chrome, .k-glass-card, .k-glass-control, .k-tabbar__bar, .k-tabbar-action, .k-menu, .k-menu-button, .k-round-button__face) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background:
      radial-gradient(circle at 12% 0, color-mix(in srgb, var(--k-glass-highlight) var(--kx-sheen), transparent), transparent 70%),
      var(--kx-fallback);
    box-shadow: var(--kx-shadow), inset 0 0 0 var(--k-size-hairline) var(--k-glass-stroke);
  }
}
.k-reduce-effects :is(.k-glass-chrome, .k-glass-card, .k-glass-control, .k-tabbar__bar, .k-tabbar-action, .k-menu, .k-menu-button, .k-round-button__face) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--k-glass-highlight) var(--kx-sheen), transparent), transparent 70%),
    var(--kx-fallback);
  box-shadow: var(--kx-shadow), inset 0 0 0 var(--k-size-hairline) var(--k-glass-stroke);
}

/* Nhấn kính bấm được: phồng nhẹ bằng lò xo 0.5/300 (GlassInteraction: +4 dp theo chiều cao). */
:is(.k-tabbar-action, .k-menu-button, .k-round-button, a.k-card, button.k-card) {
  transition: transform var(--k-spring-press-dur) var(--k-spring-press);
}
:is(.k-tabbar-action, .k-menu-button, .k-round-button, a.k-card, button.k-card):active {
  transform: scale(1.06);
}

/* ================================================================ khối kính cơ bản (XxGlassSurface, XxGlassCard) */

/* Bo lg, đệm lg. Ghép với một preset: <div class="k-card k-glass-card">. */
.k-card {
  display: block;
  border-radius: var(--k-radius-lg);
  padding: var(--k-space-lg);
}

/* Nút tròn kính chỉ có icon (XxRoundButton): mặt 40, vùng chạm 48, icon 20. */
.k-round-button {
  display: grid;
  place-items: center;
  width: var(--k-size-touch);
  height: var(--k-size-touch);
  flex: none;
}
.k-round-button__face {
  display: grid;
  place-items: center;
  width: var(--k-size-close-button);
  height: var(--k-size-close-button);
  border-radius: 50%;
}
.k-round-button__face .k-icon { width: var(--k-size-icon-small); height: var(--k-size-icon-small); }

/* ================================================================ nền đốm (XxBackground.kt) */

/*
 * Lớp nền phủ kín khung (position: absolute; inset: 0): màu nền + 4 đốm (xxDefaultBlobs).
 * Tâm đốm theo % bề rộng/chiều cao, bán kính theo % BỀ RỘNG (cqw); mỗi đốm: lõi đậm, 60% ở 55% bán kính, tan ở mép.
 */
.k-bg {
  position: absolute;
  inset: 0;
  container-type: size;
  overflow: hidden;
  background: var(--k-background);
  pointer-events: none;
}
.k-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 45cqw at 10% 85%, var(--k-blob-d), color-mix(in srgb, var(--k-blob-d) 60%, transparent) 55%, transparent),
    radial-gradient(circle 50cqw at 90% 70%, var(--k-blob-c), color-mix(in srgb, var(--k-blob-c) 60%, transparent) 55%, transparent),
    radial-gradient(circle 60cqw at 5% 35%, var(--k-blob-b), color-mix(in srgb, var(--k-blob-b) 60%, transparent) 55%, transparent),
    radial-gradient(circle 55cqw at 85% 12%, var(--k-blob-a), color-mix(in srgb, var(--k-blob-a) 60%, transparent) 55%, transparent);
}

/* ================================================================ thanh tab C+ (XxTabBar.kt, UI_KIT §2) */

/*
 * <div class="k-tabbar k-tabbar--stacked">                       (hoặc k-tabbar--selected-only; thêm k-tabbar--soft: viên nhạt)
 *   <nav class="k-tabbar__bar" role="tablist">
 *     <button class="k-tabbar__item is-selected" role="tab" aria-selected="true">
 *       <span class="k-tabbar__drop"></span>                     (giọt: chỉ trong tab đang chọn)
 *       <span class="k-tabbar__icon"><svg class="k-icon">…</svg><span class="k-tabbar__badge"></span></span>
 *       <span class="k-tabbar__label">Today</span>
 *     </button> …
 *   </nav>
 *   <button class="k-tabbar-action" aria-label="Add"><svg class="k-icon">…</svg></button>   (tùy chọn)
 * </div>
 * Hàng tự đệm 16 hai bên, 12 dưới; app đặt hàng ở đáy khung, trên thanh điều hướng.
 */
.k-tabbar {
  display: flex;
  align-items: center;
  gap: var(--k-space-md);
  width: 100%;
  padding: 0 var(--k-size-tab-inset) var(--k-size-tab-bottom);
}
.k-tabbar__bar {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--k-size-tab-bar);
  border-radius: var(--k-radius-pill);
}
.k-tabbar__item {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  height: var(--k-size-tab-item);
  min-width: 0;
  color: var(--k-content-muted);
  transition: color var(--k-dur-quick) var(--k-ease-out);
}
/* Giọt: viên nằm sau icon của tab đang chọn (đứng yên = viên màu; kính loe chỉ khi chạm, CSS không vẽ). */
.k-tabbar__drop {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--k-radius-pill);
  background: var(--k-tab-selected-fill);
}
.k-tabbar__icon {
  position: relative;
  display: block;
  flex: none;
  width: var(--k-size-icon);
  height: var(--k-size-icon);
}
/* Chấm báo: 8, màu lỗi, góc trên-phải icon. */
.k-tabbar__badge {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--k-size-tab-badge);
  height: var(--k-size-tab-badge);
  border-radius: 50%;
  background: var(--k-error);
}
.k-tabbar__label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Stacked (kiểu Glowmo): mọi tab icon trên chữ dưới, giọt màu nhấn nhạt rộng bằng ô. */
/* Giọt/viên cách mép thanh đều bốn phía (như iOS 26): lề ngang = (cao thanh − cao ô) / 2. */
.k-tabbar--stacked .k-tabbar__bar { padding: 0 calc((var(--k-size-tab-bar) - var(--k-size-tab-item)) / 2); }
.k-tabbar--stacked .k-tabbar__item {
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  gap: var(--k-space-xxs);
}
.k-tabbar--stacked .k-tabbar__label { font: var(--k-text-tab); }
.k-tabbar--stacked .k-tabbar__item:is(.is-selected, [aria-selected="true"]) { color: var(--k-tab-selected-content); }

/* SelectedOnly (kiểu Hỏi Nhỏ): tab chọn nở thành viên đậm icon + chữ, tab khác chỉ icon. */
.k-tabbar--selected-only .k-tabbar__bar {
  justify-content: space-between;
  padding: 0 calc((var(--k-size-tab-bar) - var(--k-size-tab-item)) / 2);
}
/* Máy hẹp: ô icon co dần tới --k-size-tab-item-min (icon luôn giữa ô) để viên chọn đủ chỗ cho chữ; hết chỗ mới cắt chữ "…".
   Khớp XxTabBar.PillTabs. */
.k-tabbar--selected-only .k-tabbar__item {
  flex: 0 1 var(--k-size-tab-item);
  min-width: var(--k-size-tab-item-min);
  overflow: hidden;
  justify-content: center;
}
.k-tabbar--selected-only .k-tabbar__label { display: none; }
.k-tabbar--selected-only .k-tabbar__item:is(.is-selected, [aria-selected="true"]) {
  flex: 0 .0001 auto; /* gần như không co: ô icon co tới tab-item-min trước, hết chỗ mới tới viên chọn (cắt chữ "…") */
  min-width: var(--k-size-tab-item);
  justify-content: flex-start;
  padding: 0 var(--k-space-md) 0 calc((var(--k-size-tab-item) - var(--k-size-icon)) / 2);
  color: var(--k-selected-content);
}
.k-tabbar--selected-only .k-tabbar__item:is(.is-selected, [aria-selected="true"]) .k-tabbar__label {
  display: block;
  min-width: 0;
  margin-left: calc(var(--k-space-xs) + var(--k-space-xxs)); /* 6: như dock LabelCue, đủ chỗ cho chữ ở máy 360 */
  font: var(--k-text-tab-selected);
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-tabbar--selected-only .k-tabbar__drop { background: var(--k-selected-fill); }
/* Viên nhạt (--soft, kiểu dock LabelCue): viên chọn màu nhấn nhạt, icon + chữ màu nhấn; dùng được với SelectedOnly hoặc Stacked.
   Tối: viên sáng mờ + chữ sáng (tabSelectedFill/Content). */
.k-tabbar--soft .k-tabbar__drop { background: var(--k-tab-selected-fill); }
.k-tabbar--soft.k-tabbar--selected-only .k-tabbar__item:is(.is-selected, [aria-selected="true"]) { color: var(--k-tab-selected-content); }

/* Nút tròn kính cạnh thanh (XxTabBarAction): cao bằng thanh, icon màu nhấn. */
.k-tabbar-action {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--k-size-tab-bar);
  height: var(--k-size-tab-bar);
  border-radius: 50%;
  color: var(--k-accent);
}

/* ================================================================ segmented kiểu A (XxSegmentedTabs.kt, UI_KIT §3) */

/*
 * <div class="k-seg" role="tablist">
 *   <button class="k-seg__opt is-selected" role="tab" aria-selected="true">Day</button> …
 * </div>
 * Rãnh frost trong, viên chọn kính sáng raisedFill (bóng 2 dp khi viên đặc), chữ ô chọn SemiBold.
 * Viên màu nhấn: thêm k-seg--accent.
 */
.k-seg {
  display: flex;
  width: 100%;
  height: var(--k-size-segmented);
  padding: var(--k-size-segmented-inset);
  border-radius: var(--k-radius-pill);
}
.k-seg__opt {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--k-radius-pill);
  font: var(--k-text-segmented);
  color: var(--k-content-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    background-color var(--k-spring-drop-dur) var(--k-spring-smooth),
    color var(--k-dur-quick) var(--k-ease-out);
}
.k-seg__opt:is(.is-selected, [aria-selected="true"]) {
  background: var(--k-raised-fill);
  color: var(--k-content);
  font-weight: 600;
  box-shadow: 0 1px calc(var(--k-size-raised-shadow) * 1.5) var(--k-glass-shadow);
}
/* Viên trong suốt ở giao diện tối: không bóng (thấy bóng xuyên qua). */
.dark .k-seg:not(.k-seg--accent) .k-seg__opt:is(.is-selected, [aria-selected="true"]) { box-shadow: none; }
.k-seg--accent .k-seg__opt:is(.is-selected, [aria-selected="true"]) {
  background: var(--k-accent);
  color: var(--k-on-accent);
}

/* ================================================================ menu giọt nước (XxMenu.kt, UI_KIT §3b) */

/*
 * Nút mở: <button class="k-menu-button" aria-label="More"><svg class="k-icon">…</svg></button>
 * Menu (trạng thái mở, app tự đặt vị trí: dưới nút cách 8, căn mép phía nút, cách mép màn ≥ 12):
 * <div class="k-menu" role="menu">
 *   <button class="k-menu__item" role="menuitem"><svg class="k-icon">…</svg><span>Rename</span></button>
 *   <div class="k-menu__divider" role="separator"></div>
 *   <button class="k-menu__item k-menu__item--destructive" role="menuitem">…</button>
 * </div>
 */
.k-menu-button {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--k-size-touch);
  height: var(--k-size-touch);
  border-radius: var(--k-radius-pill);
}
.k-menu {
  display: flex;
  flex-direction: column;
  width: var(--k-size-menu-width);
  max-width: calc(100% - var(--k-size-menu-margin) * 2);
  padding: var(--k-size-menu-padding) 0;
  border-radius: var(--k-radius-menu);
  overflow: hidden;
  transform-origin: top right;
}
.k-menu__item {
  display: flex;
  align-items: center;
  gap: var(--k-space-md);
  width: 100%;
  height: var(--k-size-menu-item);
  padding: 0 var(--k-space-lg);
  font: var(--k-text-menu-item);
  color: var(--k-content);
  white-space: nowrap;
}
.k-menu__item > :not(.k-icon) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.k-menu__item .k-icon { width: var(--k-size-icon-small); height: var(--k-size-icon-small); }
/* Mục dưới ngón tay khi kéo chọn (và hover chuột trên artboard). */
.k-menu__item:is(.is-highlighted, :hover) { background: color-mix(in srgb, var(--k-content) 8%, transparent); }
.k-menu__item--destructive { color: var(--k-error); }
.k-menu__item:is(.is-disabled, :disabled) {
  color: color-mix(in srgb, var(--k-content-muted) 50%, transparent);
  background: none;
  cursor: default;
}
.k-menu__divider {
  flex: none;
  height: var(--k-size-menu-divider);
  padding: calc((var(--k-size-menu-divider) - var(--k-size-hairline)) / 2) 0;
  background: color-mix(in srgb, var(--k-content) 12%, transparent) content-box;
}

/* ================================================================ sheet (XxSheet.kt, UI_KIT §4) */

/*
 * Đặt trong khung có position (khung điện thoại). KHÔNG có nút X: đóng bằng kéo xuống, chạm lớp tối, Back.
 * <div class="k-scrim"></div>
 * <section class="k-sheet" role="dialog" aria-label="Add note">
 *   <div class="k-sheet__handle" role="button" aria-label="Close"></div>
 *   … nội dung …
 * </section>
 * Bàn phím mở: đặt sheet trong một khối chứa có đáy = mép trên bàn phím.
 */
.k-scrim {
  position: absolute;
  inset: 0;
  background: var(--k-scrim);
}
.k-sheet {
  position: absolute;
  left: var(--k-size-sheet-margin);
  right: var(--k-size-sheet-margin);
  bottom: var(--k-size-sheet-margin);
  max-height: calc(100% - var(--k-size-sheet-top-gap) - var(--k-size-sheet-margin));
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: var(--k-space-xl) var(--k-space-xl) var(--k-space-lg);
  border-radius: var(--k-radius-sheet);
}
/* Thanh nắm 36 × 5 trong vùng chạm 48 × 24, màu chữ 28%. */
.k-sheet__handle {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  place-items: center;
  width: var(--k-size-touch);
  height: var(--k-space-xl);
  transform: translateX(-50%);
  cursor: grab;
}
.k-sheet__handle::before {
  content: "";
  width: var(--k-size-sheet-handle-width);
  height: var(--k-size-sheet-handle-height);
  border-radius: var(--k-radius-pill);
  background: color-mix(in srgb, var(--k-content) 28%, transparent);
}

/* ================================================================ ô nhập (XxTextField.kt, UI_KIT §5) */

/*
 * <div class="k-field is-focused">                    (is-error, is-disabled; :focus-within cũng tính là focus)
 *   <label class="k-field__label" for="name">Name</label>
 *   <div class="k-field__box">
 *     <input class="k-field__input" id="name" placeholder="Your name">
 *     <button class="k-field__clear" aria-label="Clear text"><svg class="k-icon k-icon--small">…</svg></button>
 *   </div>
 *   <div class="k-field__support"><span class="k-field__help">…</span><span class="k-field__count">0/140</span></div>
 * </div>
 */
.k-field {
  --kx-border: var(--k-line);
  --kx-halo: 0%;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.k-field:is(.is-focused, :focus-within) { --kx-border: var(--k-accent); --kx-halo: 18%; }
.k-field.is-error { --kx-border: var(--k-error); --kx-halo: 18%; }
.k-field.is-disabled { opacity: 0.5; pointer-events: none; }

.k-field__label {
  padding: 0 0 var(--k-space-xs) var(--k-space-xs);
  font: var(--k-text-label);
  letter-spacing: var(--k-tracking-label);
  color: var(--k-content-muted);
  transition: color var(--k-dur-quick) var(--k-ease-out);
}
.k-field:is(.is-focused, :focus-within) .k-field__label { color: var(--k-accent); }
.k-field.is-error .k-field__label { color: var(--k-error); }

/* Khung: frost, bo md, viền 1 (line / accent / error) + quầng 3 ngoài khung, 18% màu viền. */
.k-field__box {
  display: flex;
  align-items: center;
  gap: var(--k-space-sm);
  min-height: var(--k-size-field);
  padding: 0 var(--k-space-lg);
  border-radius: var(--k-radius-md);
  cursor: text;
  box-shadow:
    0 0 0 var(--k-size-field-halo) color-mix(in srgb, var(--kx-border) var(--kx-halo), transparent),
    inset 0 0 0 var(--k-size-hairline) var(--kx-border);
  transition: box-shadow var(--k-dur-quick) var(--k-ease-out);
}
.k-field__input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: var(--k-space-md) 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: var(--k-text-field);
  color: var(--k-content);
  caret-color: var(--k-accent);
  resize: none;
}
.k-field__input::placeholder { color: var(--k-content-muted); font-weight: 400; opacity: 1; }

/* Nút trong ô (xóa chữ, hiện/ẩn mật khẩu): vùng chạm 48, icon 20. */
.k-field__clear, .k-field__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--k-size-touch);
  height: var(--k-size-touch);
  color: var(--k-content-muted);
}
.k-field__clear .k-icon, .k-field__btn .k-icon { width: var(--k-size-icon-small); height: var(--k-size-icon-small); }
/* Nút xóa chữ và bộ đếm chỉ hiện khi đang focus. */
.k-field:not(.is-focused):not(:focus-within) :is(.k-field__clear, .k-field__count) { display: none; }

.k-field__support {
  display: flex;
  gap: var(--k-space-sm);
  padding: var(--k-space-xs) var(--k-space-xs) 0;
  font: var(--k-text-caption);
  color: var(--k-content-muted);
}
.k-field__help { flex: 1 1 auto; min-width: 0; }
.k-field.is-error .k-field__help { color: var(--k-error); }
.k-field__count { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; }

/* ================================================================ hiệu ứng vào (tùy chọn: thêm class k-enter) */

/* Artboard tĩnh không cần; trang thử tương tác thêm k-enter để thấy sheet/menu mọc ra. */
.k-scrim.k-enter { animation: k-fade-in var(--k-dur-base) var(--k-ease-out) both; }
.k-sheet.k-enter { animation: k-sheet-in var(--k-spring-sheet-dur) var(--k-spring-smooth) both; }
.k-menu.k-enter { animation: k-menu-in var(--k-spring-menu-dur) var(--k-spring-menu) both; }
.k-menu.k-enter > * {
  /* Mục hiện lần lượt: bắt đầu ở 20% tiến độ, cách nhau 6%, mỗi mục 45%. */
  animation: k-menu-item-in calc(var(--k-spring-menu-dur) * 0.45) var(--k-ease-out) both;
  animation-delay: calc(var(--k-spring-menu-dur) * (0.2 + 0.06 * var(--kx-i, 0)));
}
.k-menu.k-enter > :nth-child(2) { --kx-i: 1; }
.k-menu.k-enter > :nth-child(3) { --kx-i: 2; }
.k-menu.k-enter > :nth-child(4) { --kx-i: 3; }
.k-menu.k-enter > :nth-child(5) { --kx-i: 4; }
.k-menu.k-enter > :nth-child(6) { --kx-i: 5; }
.k-menu.k-enter > :nth-child(7) { --kx-i: 6; }
.k-menu.k-enter > :nth-child(8) { --kx-i: 7; }

@keyframes k-fade-in { from { opacity: 0; } }
@keyframes k-sheet-in { from { transform: translateY(calc(100% + var(--k-size-sheet-margin))); } }
/* Khung mọc từ nút (≈ cỡ nút 48 so với menu 250): kính hiện rõ trong 1/4 đầu. */
@keyframes k-menu-in {
  from { transform: scale(0.19, 0.25); opacity: 0; }
  25% { opacity: 1; }
  to { transform: none; opacity: 1; }
}
@keyframes k-menu-item-in { from { opacity: 0; transform: translateY(calc(var(--k-size-menu-item-slide) * -1)); } }

/* ================================================================ giảm chuyển động */

/* Tắt animation hệ thống: mọi thứ nhảy thẳng tới trạng thái cuối (UI_KIT §7, quy tắc số 0). */
@media (prefers-reduced-motion: reduce) {
  [class*="k-"], [class*="k-"]::before, [class*="k-"]::after {
    animation: none !important;
    transition: none !important;
  }
  :is(.k-tabbar-action, .k-menu-button, .k-round-button, a.k-card, button.k-card):active { transform: none; }
}

/* ===== kit/store.css ===== */
/* ==========================================================================
   app-kit · web/store.css — phần web DÙNG CHUNG (kit 1.2.0): nút tải app có icon cửa hàng + khối "iPhone và Android".
   Mọi phần khác của web là thiết kế riêng của từng app.
   Lấy từ horoscope (trang-chu.css .lp-play, .lp-pf*) và fyri (#platforms), chủ dự án chốt 16/10/2026.

   Nạp sau token của app và design/kit.css (thẻ dùng kính chung k-glass-card):
     <link rel="stylesheet" href="kit/kit-tokens.sample.css">   giá trị mặc định
     <link rel="stylesheet" href="<token của app → --k-*>">
     <link rel="stylesheet" href="kit/kit.css">
     <link rel="stylesheet" href="kit/store.css">
     <script src="kit/store.js" defer></script>
   Trạng thái cửa hàng: <html data-play="soon|live" data-appstore="soon|live"> (WEB_KIT §4).

   Màu: chỉ var(--k-*). Ngoại lệ duy nhất: hình icon cửa hàng/hệ điều hành trong url("data:image/svg+xml…")
   giữ màu thương hiệu của chúng (không theo theme), kiểm bằng scripts/check_kit_css.py.
   ========================================================================== */

/* ---------------------------------------------------------------- nút tải */
/*
 * <a class="k-store" data-store="android" href="https://play.google.com/store/apps/details?id=…">
 *   <span class="k-store__icon k-store__icon--play"></span>
 *   <span class="k-store__text"><small><span class="k-store__live">Tải trên</span><span class="k-store__soon">Sắp có trên</span></small><b>Google Play</b></span>
 * </a>
 * <a class="k-store" data-store="ios" href="https://apps.apple.com/app/id…">
 *   <span class="k-store__icon k-store__icon--appstore"></span>
 *   <span class="k-store__text"><small><span class="k-store__live">Tải trên</span><span class="k-store__soon">Sắp có trên</span></small><b>App Store</b></span>
 * </a>
 */
.k-store-row { display: flex; flex-wrap: wrap; gap: var(--k-space-md); }
.k-store {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-md);
  height: 60px;
  padding: 0 var(--k-space-xl) 0 18px;
  border-radius: 18px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--k-store-content);
  background: color-mix(in srgb, var(--k-store-fill) 92%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--k-store-content) 22%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--k-store-content) 14%, transparent), 0 14px 30px -16px var(--k-glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  transition: transform var(--k-dur-quick) var(--k-ease-out);
}
.k-store[href]:hover { transform: translateY(-2px); }
.k-store[href]:focus-visible { outline: 3px solid var(--k-accent); outline-offset: 3px; }
.k-store[aria-disabled="true"] { cursor: default; }
.k-store__text { display: flex; flex-direction: column; }
.k-store small { display: block; font: 600 11px/1 var(--k-font-body); letter-spacing: .5px; text-transform: uppercase; opacity: .75; }
.k-store b { display: block; margin-top: 2px; font: var(--k-display-weight) 19px/1.15 var(--k-font-display); }
/* Chữ nhỏ theo trạng thái cửa hàng: mặc định "Sắp có trên"; tổ tiên có data-play / data-appstore="live" thì "Tải trên". */
.k-store__live { display: none; }
[data-play="live"] .k-store[data-store="android"] .k-store__live,
[data-appstore="live"] .k-store[data-store="ios"] .k-store__live { display: inline; }
[data-play="live"] .k-store[data-store="android"] .k-store__soon,
[data-appstore="live"] .k-store[data-store="ios"] .k-store__soon { display: none; }

/* ---------------------------------------------------------------- icon (màu thương hiệu, không theo theme) */
.k-store__icon, .k-os { flex: none; display: inline-block; background: center / contain no-repeat; }
.k-store__icon { width: 28px; height: 28px; }
.k-store__icon--play {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 28'><path d='M4 2.2 16.4 14 4 25.8c-.6-.3-1-1-1-1.8V4c0-.8.4-1.5 1-1.8z' fill='%232FA8F5'/><path d='M4 2.2c.6-.3 1.3-.3 2 .1l14.3 8.1-3.9 3.6z' fill='%2334D07B'/><path d='M4 25.8l12.4-11.8 3.9 3.6L6 25.7c-.7.4-1.4.4-2 .1z' fill='%23F0503F'/><path d='m20.3 10.4 3.4 1.9c1.3.8 1.3 2.6 0 3.4l-3.4 1.9-3.9-3.6z' fill='%23F7C948'/></svg>");
}
.k-store__icon--appstore {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%231FC2FB'/><stop offset='1' stop-color='%231E6CF2'/></linearGradient></defs><rect width='28' height='28' rx='7' fill='url(%23g)'/><g transform='translate(3 3) scale(.9167)' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round'><path d='M9.3 16.4 13.6 8.9M14.7 16.4 12.6 12.8M6.6 14.2h7.1M15.6 14.2h1.8M6.9 17.6l.7-1.2'/></g></svg>");
}
/* Icon hệ điều hành: Android (xanh thương hiệu), Apple (theo màu chữ, vẽ bằng mask). */
.k-os { width: 16px; height: 16px; }
.k-os--android {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%233DDC84' d='M2.5 18.5a9.5 9.5 0 0 1 19 0z'/><path d='M7.2 10.6 5 6.8M16.8 10.6 19 6.8' stroke='%233DDC84' stroke-width='1.6' stroke-linecap='round'/><circle cx='8.2' cy='14.6' r='1.25' fill='%23fff'/><circle cx='15.8' cy='14.6' r='1.25' fill='%23fff'/></svg>");
}
.k-os--apple {
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701'/></svg>") center / contain no-repeat;
}

/* ---------------------------------------------------------------- khối "iPhone và Android" */
/*
 * Máy mini luôn dáng iPhone (Dynamic Island, bo như máy thật) cho cả hai thẻ: chủ dự án chốt 16/10/2026 ("lấy iPhone tất cả",
 * máy Android trong ảnh nhìn xấu). Hệ điều hành nhận ra qua icon cạnh tiêu đề.
 * <div class="k-platforms">
 *   <article class="k-platform k-glass-card">
 *     <div class="k-device" aria-hidden="true"><div class="k-device__screen"><img class="k-device__shot" src="screens/home.webp" alt=""></div></div>
 *     <div class="k-platform__body">
 *       <h3 class="k-platform__title"><span class="k-os k-os--android"></span>Android <span class="k-when">Tháng 12/2026</span></h3>
 *       <ul class="k-checks"><li>…</li></ul>
 *       <a class="k-store" data-store="android" …>…</a>
 *     </div>
 *   </article>
 *   … (iPhone: k-os--apple, data-store="ios")
 * </div>
 * <p class="k-platforms__note">Ngày ra mắt là kế hoạch, chưa phải lời hứa…</p>
 * Trong máy: ảnh màn hình (k-device__shot, phủ kín, căn đỉnh) hoặc icon/linh vật (k-device__art, giữa màn, bo như icon app).
 */
.k-platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.k-platform {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  padding: 26px;
  border-radius: var(--k-radius-sheet);
  color: var(--k-content);
}
/* iPhone 17 Pro thu nhỏ: viền đen 2,6 % bề rộng, vành kim loại 1,5 px; màn bo 13,7 % bề rộng như máy thật,
   góc ngoài = góc màn + viền (15,6 % / 7,3 %) để hai đường cong song song. Dynamic Island 31 % × 4,2 %. */
.k-device {
  position: relative;
  --kx-device-w: 116px;
  width: var(--kx-device-w);
  aspect-ratio: 600 / 1324;
  padding: calc(var(--kx-device-w) * .026); /* % của padding tính theo khối cha, nên tính từ bề rộng máy */
  box-sizing: content-box;
  border-radius: 15.6% / 7.3%;
  background: var(--k-device-frame);
  box-shadow: 0 0 0 1.5px var(--k-device-edge), 0 24px 40px -24px var(--k-glass-shadow);
}
.k-device__screen {
  position: relative;
  height: 100%;
  border-radius: 13.7% / 6.2%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(170deg, var(--k-surface), color-mix(in srgb, var(--k-accent) 22%, var(--k-surface)));
}
.k-device__screen::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 1.3%;
  left: 50%;
  width: 31.3%;
  height: 4.2%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--k-device-frame);
}
.k-platform__body { min-width: 0; }
.k-device__shot { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.k-device__art { width: 50%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 22.5%; box-shadow: 0 8px 18px -8px var(--k-glass-shadow); }
/* Cách cũ (icon hệ điều hành trên màn máy mini): vẫn chạy, nên chuyển icon lên tiêu đề. */
.k-device__os { position: absolute; z-index: 2; top: 9%; left: 50%; transform: translateX(-50%); color: var(--k-content); }
.k-platform__title .k-os { width: 22px; height: 22px; }
.k-platform__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 2px 0 0;
  font: var(--k-display-weight) 28px/1.2 var(--k-font-display);
}
.k-when {
  height: 28px;
  padding: 0 12px;
  border-radius: var(--k-radius-pill);
  display: inline-flex;
  align-items: center;
  font: 700 13px/1 var(--k-font-body);
  color: var(--k-accent);
  background: var(--k-accent-soft);
}
.k-checks { list-style: none; margin: 14px 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.k-checks li { display: flex; gap: 10px; align-items: flex-start; font: 400 15px/1.45 var(--k-font-body); }
.k-checks li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: var(--k-accent);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-10'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-10'/></svg>") center / contain no-repeat;
}
.k-platforms__note { margin: 18px 0 0; text-align: center; font: 400 13.5px/1.5 var(--k-font-body); color: var(--k-content-muted); }

@media (max-width: 860px) {
  .k-platforms { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .k-platform { grid-template-columns: 88px minmax(0, 1fr); gap: 18px; padding: 20px; }
  .k-device { --kx-device-w: 88px; }
  .k-platform__title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .k-store { transition: none; }
  .k-store[href]:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .k-store { background: var(--k-store-fill); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ===== web-kit/site.css ===== */
/* Web LabelCue (đề xuất, chờ duyệt): giao diện riêng của LabelCue, khởi đầu từ bản gộp horoscope + fyri ngày 16/10/2026.
   Không phải file của app-kit: sửa thoải mái ở đây. Màu: biến theme --k-* (kit-map.css) và --lw-* (tokens.css), không mã màu.
   Nút tải + khối iPhone và Android: component chung k-store / k-platforms trong kit/store.css (app-kit). */
/* ============ nền tảng ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--lw-space-20); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font: 400 var(--lw-fs-body)/1.55 var(--k-font-body);
  color: var(--k-content);
  background: var(--k-background);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg { max-width: 100%; }
img { display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--k-font-display); font-weight: var(--k-display-weight); letter-spacing: -.015em; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--k-accent); outline-offset: 3px; border-radius: var(--lw-space-2); }

.lw-skip {
  position: absolute; left: var(--lw-space-4); top: -100px; z-index: 50;
  padding: var(--lw-space-3) var(--lw-space-5); border-radius: var(--k-radius-pill);
  background: var(--k-content); color: var(--k-background); font-weight: 700; text-decoration: none;
}
.lw-skip:focus { top: var(--lw-space-3); }
.lw-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Nền đốm: phần tử fixed, blur vẽ một lần thành lớp riêng (không blur nội dung đang cuộn, không chạy hoạt ảnh). */
.lw-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--k-background); transform: translateZ(0); }
.lw-bg i { position: absolute; border-radius: 50%; filter: blur(var(--lw-blur-blob)); }
.lw-bg i:nth-child(1) { width: clamp(380px, 58vw, 860px); aspect-ratio: 1; right: -14%; top: -300px; background: var(--k-blob-a); }
.lw-bg i:nth-child(2) { width: clamp(360px, 52vw, 760px); aspect-ratio: 1; left: -24%; top: 26vh; background: var(--k-blob-b); }
.lw-bg i:nth-child(3) { width: clamp(320px, 44vw, 660px); aspect-ratio: 1; right: -18%; top: 64vh; background: var(--k-blob-c); }
.lw-bg i:nth-child(4) { width: clamp(300px, 40vw, 580px); aspect-ratio: 1; left: 16%; bottom: -320px; background: var(--k-blob-d); }

.lw-wrap { width: min(100% - 2 * var(--lw-space-5), var(--lw-maxw)); margin-inline: auto; }

/* ============ chữ ============ */
.lw-h1 { font-size: var(--lw-fs-hero); line-height: 1.02; letter-spacing: -.025em; }
.lw-h1 em, .lw-h2 em { font-style: normal; color: var(--k-accent); }
.lw-h2 { font-size: var(--lw-fs-h2); line-height: 1.08; margin-top: var(--lw-space-3); }
.lw-h3 { font-size: var(--lw-fs-h3); line-height: 1.25; }
.lw-label { display: inline-block; font: 700 var(--lw-fs-label)/1.2 var(--k-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--k-accent); }
.lw-lead { max-width: 620px; margin-top: var(--lw-space-4); font-size: var(--lw-fs-lead); line-height: 1.5; color: var(--k-content-muted); }
.lw-muted { color: var(--k-content-muted); }
.lw-note { margin-top: var(--lw-space-6); font-size: var(--lw-fs-small); color: var(--k-content-muted); text-align: center; }

/* ============ kính ============
   .lw-glass: lớp điều khiển, thẻ nổi. .lw-frost: thẻ trong danh sách, nhẹ GPU hơn. Thông tin dài dùng nền đặc (.lw-solid). */
.lw-glass {
  position: relative;
  border-radius: var(--lw-radius-card);
  background:
    radial-gradient(120% 80% at 12% 0%, color-mix(in srgb, var(--k-glass-highlight) 35%, transparent), transparent 52%),
    linear-gradient(140deg, var(--k-glass-fill-strong), var(--k-glass-fill));
  border: 1px solid var(--k-glass-stroke);
  -webkit-backdrop-filter: blur(var(--lw-blur-glass)) saturate(170%);
          backdrop-filter: blur(var(--lw-blur-glass)) saturate(170%);
  box-shadow: inset 0 1px 1px var(--k-glass-highlight), 0 18px 44px -18px var(--k-glass-shadow);
}
.lw-glass-accent {
  border-radius: var(--lw-radius-card);
  color: var(--k-on-accent);
  background:
    radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--k-glass-highlight) 40%, transparent), transparent 50%),
    linear-gradient(140deg, var(--k-accent), color-mix(in srgb, var(--k-accent) 78%, var(--k-content)));
  border: 1px solid color-mix(in srgb, var(--k-glass-stroke) 70%, transparent);
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--k-glass-highlight) 70%, transparent), 0 16px 32px -14px color-mix(in srgb, var(--k-accent) 60%, transparent);
}
.lw-frost {
  border-radius: var(--lw-radius-card);
  background: linear-gradient(160deg, var(--k-glass-fill-strong), var(--k-glass-fill));
  border: 1px solid var(--k-glass-stroke);
  -webkit-backdrop-filter: blur(var(--lw-blur-frost));
          backdrop-filter: blur(var(--lw-blur-frost));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--k-glass-highlight) 70%, transparent);
}
.lw-solid { border-radius: var(--lw-radius-card); background: var(--lw-surface-solid); border: 1px solid var(--k-line); }

/* ============ nút ============ */
.lw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--lw-space-2);
  min-height: 48px; padding: 0 var(--lw-space-6); border-radius: var(--k-radius-pill); border: 1px solid transparent;
  font: 700 16px/1 var(--k-font-body); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--lw-dur-quick) ease-out, background var(--lw-dur-base) ease, box-shadow var(--lw-dur-base) ease;
}
.lw-btn:active { transform: scale(.97); }
.lw-btn-accent { color: var(--k-on-accent); background: var(--k-accent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--k-glass-highlight) 45%, transparent), 0 10px 26px -10px color-mix(in srgb, var(--k-accent) 70%, transparent); }
.lw-btn-accent:hover { background: color-mix(in srgb, var(--k-accent) 88%, var(--k-content)); }
.lw-btn-ghost { color: var(--k-content); background: var(--k-glass-fill-strong); border-color: var(--k-line); }
.lw-btn-ghost:hover { background: var(--k-surface); }
.k-store-row { display: flex; flex-wrap: wrap; gap: var(--lw-space-3); margin-top: var(--lw-space-8); }

/* ============ thanh menu: viên thuốc trong suốt ở đầu trang, đậm dần khi cuộn (fyri) ============ */
.lw-nav { position: sticky; top: 0; z-index: 20; padding: var(--lw-space-3) 0; }
.lw-nav-bar {
  position: relative; display: flex; align-items: center; gap: var(--lw-space-2);
  height: 60px; padding: 0 var(--lw-space-2) 0 var(--lw-space-4); border-radius: var(--k-radius-pill);
  background: var(--k-chrome-fill);
  border: 1px solid color-mix(in srgb, var(--k-glass-stroke) 60%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
  transition: background var(--lw-dur-base) ease, box-shadow var(--lw-dur-base) ease, border-color var(--lw-dur-base) ease;
}
.lw-nav.is-scrolled .lw-nav-bar {
  background: color-mix(in srgb, var(--lw-surface-solid) 78%, transparent);
  border-color: var(--k-glass-stroke);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--k-glass-highlight) 60%, transparent), 0 12px 34px -12px var(--k-glass-shadow);
}
.lw-brand { display: flex; align-items: center; gap: var(--lw-space-2); min-width: 0; overflow: hidden; white-space: nowrap; font: var(--k-display-weight) 19px var(--k-font-display); text-decoration: none; }
.lw-brand img { flex: none; }
.lw-brand img { width: 34px; height: 34px; border-radius: 10px; }
.lw-nav-links { display: none; }
.lw-nav-links a { padding: var(--lw-space-3) var(--lw-space-4); border-radius: var(--k-radius-pill); text-decoration: none; font-weight: 600; font-size: 15px; color: var(--k-content-muted); transition: background var(--lw-dur-base) ease, color var(--lw-dur-base) ease; }
.lw-nav-links a:hover { background: var(--k-glass-fill); color: var(--k-content); }
.lw-nav-bar > .lw-btn { margin-left: auto; min-height: 44px; padding: 0 var(--lw-space-4); font-size: 14px; flex: none; }
.lw-menu-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--k-radius-pill);
  border: 1px solid var(--k-line); background: var(--k-glass-fill); color: var(--k-content); cursor: pointer;
}
.lw-menu-btn path { transition: transform var(--lw-dur-base) var(--lw-ease-out); transform-origin: 12px 12px; }
.lw-nav.is-open .lw-menu-btn .lw-l1 { transform: translateY(4px) rotate(45deg); }
.lw-nav.is-open .lw-menu-btn .lw-l2 { transform: translateY(-4px) rotate(-45deg); }
/* Menu mobile: xổ xuống dưới viên thuốc, nền gần đặc để chữ luôn đọc được. */
.lw-nav.is-open .lw-nav-links {
  display: flex; flex-direction: column; gap: var(--lw-space-1);
  position: absolute; left: 0; right: 0; top: calc(100% + var(--lw-space-2));
  padding: var(--lw-space-2); border-radius: var(--lw-radius-card);
  background: color-mix(in srgb, var(--lw-surface-solid) 94%, transparent); border: 1px solid var(--k-glass-stroke);
  -webkit-backdrop-filter: blur(var(--lw-blur-glass)); backdrop-filter: blur(var(--lw-blur-glass));
  box-shadow: 0 20px 50px -16px var(--k-glass-shadow);
  animation: lw-menu-in var(--lw-dur-base) var(--lw-ease-out);
}
.lw-nav.is-open .lw-nav-links a { font-size: 17px; color: var(--k-content); }
@keyframes lw-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ============ hero: chữ + khung điện thoại và thẻ kính nổi (horoscope) ============ */
.lw-hero { display: grid; gap: var(--lw-space-8); align-items: center; padding: var(--lw-space-10) 0 var(--lw-space-14); text-align: center; }
.lw-hero .lw-lead { margin-inline: auto; }
.lw-hero .k-store-row, .lw-trust { justify-content: center; }
.lw-eyebrow { display: inline-flex; align-items: center; gap: var(--lw-space-2); min-height: 34px; padding: var(--lw-space-1) var(--lw-space-4); border-radius: var(--k-radius-pill); font-size: 13px; font-weight: 700; margin-bottom: var(--lw-space-5); }
.lw-eyebrow svg { color: var(--k-accent); flex: none; }
.lw-trust { display: flex; flex-wrap: wrap; gap: var(--lw-space-2) var(--lw-space-5); margin: var(--lw-space-6) 0 0; padding: 0; list-style: none; font-size: var(--lw-fs-small); font-weight: 600; color: var(--k-content-muted); }
.lw-trust li, .lw-checks li { position: relative; padding-left: 22px; }
.lw-trust li::before, .lw-checks li::before {
  content: ""; position: absolute; left: 4px; top: .28em; width: 6px; height: 11px;
  border: solid var(--k-accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

.lw-stage { position: relative; height: 590px; max-width: 520px; width: 100%; margin: 0 auto; }
.lw-stage .lw-phone { position: absolute; left: 50%; top: var(--lw-space-2); --lw-phone-w: 252px; margin-left: calc(var(--lw-phone-w) / -2); rotate: 3deg; }
/* Khung iPhone 17 Pro (mọi khung máy trên web là iPhone, chốt 16/10/2026). Ảnh trong khung đã có thanh trạng thái 9:41,
   Dynamic Island và vạch home (scripts/make-web-screens.py). Như mockup của Apple: viền kính đen mỏng 2,2 % bề rộng,
   vành kim loại 1,5 px, màn bo 13,7 % bề rộng, góc ngoài = góc màn + viền (15,3 % / 7,1 %). Màu máy: --k-device-* (đồ vật
   thật, không theo màu app). Bề rộng đặt qua --lw-phone-w (padding % tính theo khối cha nên phải tính từ bề rộng máy). */
.lw-phone {
  --lw-phone-w: 270px;
  position: relative; box-sizing: border-box; width: var(--lw-phone-w); max-width: 100%;
  padding: calc(var(--lw-phone-w) * .022); border-radius: 15.3% / 7.1%;
  background: var(--k-device-frame);
  box-shadow: 0 0 0 1.5px var(--k-device-edge), 0 40px 70px -30px var(--k-glass-shadow);
}
/* Nút bên bằng kim loại: nguồn (phải), âm lượng (trái), sát vành. */
.lw-phone::before, .lw-phone::after { content: ""; position: absolute; width: 2px; background: var(--k-device-edge); }
.lw-phone::before { right: -3px; top: 25%; height: 10%; border-radius: 0 2px 2px 0; }
.lw-phone::after { left: -3px; top: 19%; height: 13%; border-radius: 2px 0 0 2px; }
.lw-phone-screen { position: relative; overflow: hidden; aspect-ratio: 600 / 1324; border-radius: 13.7% / 6.2%; background: var(--k-background); }
.lw-phone-screen img { width: 100%; height: 100%; object-fit: cover; }
/* Thẻ kính nổi cạnh điện thoại: nói một con số/câu ngắn lấy từ app. Trang trí: aria-hidden. */
.lw-float { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 2px; width: 172px; padding: var(--lw-space-3) var(--lw-space-4); border-radius: var(--lw-radius-tile); text-align: left; animation: lw-bob 5s ease-in-out infinite; }
.lw-float-1 { left: 0; top: 56px; rotate: -5deg; }
.lw-float-2 { right: 0; top: 300px; rotate: 4deg; width: 190px; animation-delay: 1.4s; }
.lw-float-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .78; }
.lw-float-value { font: var(--k-display-weight) 38px/1.05 var(--k-font-display); }
.lw-float-value small { margin-left: var(--lw-space-1); font: 700 13px var(--k-font-body); color: var(--k-accent); }
.lw-glass-accent .lw-float-value small { color: inherit; opacity: .8; } /* trên nền màu nhấn */
.lw-float-text { font-size: 13px; line-height: 1.35; }
@keyframes lw-bob { 50% { translate: 0 -8px; } }

/* ============ khối nội dung ============ */
.lw-section { padding-top: var(--lw-space-20); scroll-margin-top: var(--lw-space-20); }
.lw-head { text-align: center; }
.lw-head .lw-lead { margin-inline: auto; }
.lw-grid { display: grid; gap: var(--lw-space-4); margin-top: var(--lw-space-10); }
.lw-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: var(--lw-radius-icon);
  background: var(--k-accent-soft); color: var(--k-accent);
}
/* Màn hẹp: icon bên trái, chữ bên phải cho thẻ thấp gọn; từ 600px icon nằm trên. */
.lw-feature { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--lw-space-4); padding: var(--lw-space-5); }
.lw-feature .lw-icon { grid-row: span 2; }
.lw-feature p { margin-top: var(--lw-space-2); font-size: 16px; color: var(--k-content-muted); }

/* ============ "Trong app có gì": một máy lớn + bộ chọn, tự chuyển mỗi 5 giây (horoscope) ============
   Dừng tạm khi rê chuột/focus, dừng hẳn khi người xem bấm hoặc vuốt; giảm chuyển động thì không tự chuyển.
   Màn rộng: danh sách mục bên phải. Màn hẹp: mô tả của mục đang chọn ở trên, chấm chọn ở dưới máy. */
.lw-tour { display: grid; justify-items: center; gap: var(--lw-space-4); margin-top: var(--lw-space-10); }
.lw-tour-tabs { display: none; }
.lw-tour-tab {
  all: unset; box-sizing: border-box; position: relative; cursor: pointer; overflow: hidden;
  display: flex; gap: var(--lw-space-4); align-items: flex-start;
  padding: var(--lw-space-5) var(--lw-space-6); border-radius: var(--lw-radius-card); border: 1px solid transparent;
  transition: background var(--lw-dur-base), border-color var(--lw-dur-base), box-shadow var(--lw-dur-base);
}
.lw-tour-tab:focus-visible { outline: 3px solid var(--k-accent); outline-offset: 2px; }
.lw-tour-tab .lw-icon { transition: opacity var(--lw-dur-base), filter var(--lw-dur-base); }
.lw-tour-tab b { display: block; font: var(--k-display-weight) 22px/1.2 var(--k-font-display); }
.lw-tour-tab span span { display: block; margin-top: var(--lw-space-1); font-size: 15.5px; line-height: 1.5; color: var(--k-content-muted); }
.lw-tour-tab:not([aria-selected=true]) .lw-icon { filter: grayscale(1); opacity: .55; }
.lw-tour-tab:not([aria-selected=true]) b,
.lw-tour-tab:not([aria-selected=true]) span span { opacity: .62; }
.lw-tour-tab:not([aria-selected=true]):hover { background: var(--k-glass-fill); }
.lw-tour-tab[aria-selected=true] {
  background:
    radial-gradient(120% 80% at 12% 0%, color-mix(in srgb, var(--k-glass-highlight) 35%, transparent), transparent 52%),
    linear-gradient(140deg, var(--k-glass-fill-strong), var(--k-glass-fill));
  border-color: var(--k-glass-stroke);
  box-shadow: inset 0 1px 1px var(--k-glass-highlight), 0 14px 34px -16px var(--k-glass-shadow);
}
.lw-tour-bar { position: absolute; left: var(--lw-space-6); right: var(--lw-space-6); bottom: var(--lw-space-2); height: 3px; border-radius: 2px; background: var(--k-accent-soft); opacity: 0; }
.lw-tour-bar::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--k-accent); transform-origin: left; transform: scaleX(0); }
.lw-tour.is-auto [aria-selected=true] .lw-tour-bar { opacity: 1; }
.lw-tour.is-auto [aria-selected=true] .lw-tour-bar::after { animation: lw-tour-bar var(--lw-tour-interval) linear forwards; }
@keyframes lw-tour-bar { to { transform: scaleX(1); } }
.lw-tour-caps { display: grid; width: 100%; max-width: 520px; text-align: center; }
.lw-tour-cap { grid-area: 1 / 1; opacity: 0; transition: opacity var(--lw-dur-base); }
.lw-tour-cap.is-on { opacity: 1; }
.lw-tour-cap b { display: none; } /* màn hẹp: tên màn đã có trên nút ngay dưới */
.lw-tour-cap span { display: block; margin-top: var(--lw-space-1); color: var(--k-content-muted); }
.lw-tour-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--lw-space-5); width: 100%; }
.lw-tour-stage::before {
  content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; top: 45%; left: 50%; translate: -50% -50%;
  border-radius: 50%; background: radial-gradient(closest-side, var(--k-accent-soft), transparent); pointer-events: none;
}
.lw-tour-stage .lw-phone { --lw-phone-w: 270px; }
.lw-tour-slide { position: absolute; inset: 0; opacity: 0; transform: scale(.98); transition: opacity .4s, transform .4s; }
.lw-tour-slide.is-on { opacity: 1; transform: none; }
/* Màn hẹp: hàng nút có chữ thay chấm (chủ dự án 16/10/2026: chấm không cho người xem biết là bấm được). Nằm trên máy,
   cuộn ngang khi chật; nút đang xem có vạch tiến độ chạy theo nhịp tự chuyển, dừng thì vạch đầy. */
.lw-tour-dots {
  position: relative; /* offsetLeft của nút tính theo hàng */
  display: flex; gap: var(--lw-space-2); max-width: 100%; padding: 2px var(--lw-space-1) var(--lw-space-1);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.lw-tour-dots::-webkit-scrollbar { display: none; }
.lw-tour-dot {
  all: unset; box-sizing: border-box; position: relative; overflow: hidden; flex: none; scroll-snap-align: center;
  display: inline-flex; align-items: center; height: 44px; padding: 0 var(--lw-space-4); border-radius: var(--k-radius-pill);
  font: 600 14px/1 var(--k-font-body); color: var(--k-content); cursor: pointer; white-space: nowrap;
  background: var(--k-glass-fill-strong); box-shadow: inset 0 0 0 1px var(--k-glass-stroke), 0 6px 16px -10px var(--k-glass-shadow);
  transition: background var(--lw-dur-base), color var(--lw-dur-base);
}
.lw-tour-dot[aria-current=true] { background: var(--k-accent); color: var(--k-on-accent); box-shadow: 0 8px 18px -10px var(--k-accent); }
/* Vạch tiến độ ở đáy nút đang xem. */
.lw-tour-dot[aria-current=true]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 7px; height: 2px; border-radius: 1px;
  background: currentColor; opacity: .55; transform-origin: left; transform: scaleX(1);
}
.lw-tour.is-auto .lw-tour-dot[aria-current=true]::after { transform: scaleX(0); animation: lw-tour-bar var(--lw-tour-interval) linear forwards; }
.lw-tour:not(.is-auto) .lw-tour-dot[aria-current=true]::after { opacity: 0; }
.lw-tour-dot:focus-visible { outline: 3px solid var(--k-accent); outline-offset: 2px; }
.lw-when { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--lw-space-3); border-radius: var(--k-radius-pill); font: 700 13px var(--k-font-body); letter-spacing: 0; background: var(--k-accent-soft); color: var(--k-accent); }
.lw-checks { display: grid; gap: var(--lw-space-3); margin: var(--lw-space-4) 0 0; padding: 0; list-style: none; font-size: 15.5px; line-height: 1.45; }

/* ============ bảng giá (fyri) ============ */
.lw-pricing { display: grid; gap: var(--lw-space-4); margin-top: var(--lw-space-10); align-items: start; }
.lw-plan { position: relative; padding: var(--lw-space-8) var(--lw-space-6); }
.lw-plan.is-best {
  border-color: color-mix(in srgb, var(--k-accent) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--k-accent) 35%, transparent), 0 24px 60px -24px color-mix(in srgb, var(--k-accent) 45%, transparent), inset 0 1px 0 var(--k-glass-highlight);
}
.lw-ribbon { position: absolute; top: -14px; left: 50%; translate: -50% 0; display: flex; align-items: center; height: 28px; padding: 0 var(--lw-space-3); border-radius: var(--k-radius-pill); white-space: nowrap; font: 700 12px var(--k-font-body); color: var(--k-on-accent); background: var(--k-accent); }
.lw-plan-name { font-weight: 700; font-size: 15px; color: var(--k-content-muted); }
.lw-price { margin-top: var(--lw-space-2); font: var(--k-display-weight) 44px/1.1 var(--k-font-display); }
.lw-price small { font: 600 16px var(--k-font-body); color: var(--k-content-muted); }
.lw-plan-per { font-size: var(--lw-fs-small); color: var(--k-content-muted); }
.lw-plan .lw-checks { margin-top: var(--lw-space-6); }

/* ============ câu hỏi thường gặp (fyri) ============ */
.lw-faq { max-width: 820px; margin: var(--lw-space-10) auto 0; padding: var(--lw-space-2) var(--lw-space-5); }
.lw-faq details { border-top: 1px solid var(--k-line); }
.lw-faq details:first-child { border-top: 0; }
.lw-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--lw-space-4); min-height: 64px; padding: var(--lw-space-3) 0; font: 700 17px/1.35 var(--k-font-body); }
.lw-faq summary::-webkit-details-marker { display: none; }
.lw-faq summary::after { content: "+"; flex: none; font: 700 26px/1 var(--k-font-display); color: var(--k-accent); transition: transform var(--lw-dur-base) var(--lw-ease-out); }
.lw-faq details[open] summary::after { transform: rotate(45deg); }
.lw-faq details p { margin: 0 0 var(--lw-space-5); color: var(--k-content-muted); font-size: 16px; }

/* ============ khối kêu gọi cuối trang ============ */
.lw-cta { margin-top: var(--lw-space-20); padding: var(--lw-space-10) var(--lw-space-5); text-align: center; overflow: hidden; }
.lw-cta-icon { width: 96px; height: 96px; margin: 0 auto var(--lw-space-5); border-radius: 26px; box-shadow: 0 18px 36px -16px var(--k-glass-shadow); }
.lw-cta .lw-lead { margin-inline: auto; }
.lw-cta .k-store-row { justify-content: center; }

/* ============ chân trang ============ */
.lw-footer { padding: var(--lw-space-14) 0 var(--lw-space-10); color: var(--k-content-muted); font-size: var(--lw-fs-small); }
.lw-footer .lw-wrap { display: flex; flex-wrap: wrap; gap: var(--lw-space-4) var(--lw-space-6); justify-content: space-between; align-items: center; }
.lw-footer .lw-brand { color: var(--k-content); font-size: 18px; }
.lw-footer .lw-brand img { width: 30px; height: 30px; border-radius: 9px; }
.lw-footer nav { display: flex; flex-wrap: wrap; gap: var(--lw-space-2) var(--lw-space-5); }
.lw-footer a { text-decoration: none; font-weight: 600; }
.lw-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.lw-footer a:hover, .lw-footer a[aria-current=page] { color: var(--k-content); }

/* ============ trang pháp lý: privacy, terms, support, imprint, 404 (horoscope phap-ly + fyri doc) ============
   Chữ dài nằm trên nền (không kính). Kính chỉ ở khối "Nói ngắn" và khối liên hệ. */
.lw-legal { padding-bottom: var(--lw-space-10); }
.lw-legal-head { max-width: 760px; padding: var(--lw-space-8) 0 var(--lw-space-6); }
.lw-legal-title { margin-top: var(--lw-space-3); font-size: clamp(36px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -.02em; }
.lw-legal-head .lw-lead { max-width: 680px; }
.lw-legal-meta { display: flex; flex-wrap: wrap; gap: var(--lw-space-2); margin: var(--lw-space-5) 0 0; padding: 0; list-style: none; }
.lw-legal-meta li { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--lw-space-4); border-radius: var(--k-radius-pill); background: var(--k-accent-soft); font-size: 13px; font-weight: 600; color: var(--k-content); }
.lw-legal-summary { padding: var(--lw-space-6); }
.lw-legal-points { display: grid; gap: var(--lw-space-5); margin: var(--lw-space-4) 0 0; padding: 0; list-style: none; }
.lw-legal-points li { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--lw-space-4); row-gap: 2px; }
.lw-legal-points .lw-icon { grid-row: span 2; width: 44px; height: 44px; }
.lw-legal-points strong { font-size: 16px; line-height: 1.3; }
.lw-legal-points span { font-size: var(--lw-fs-small); line-height: 1.45; color: var(--k-content-muted); }
.lw-legal-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: var(--lw-space-8) 0 0; }
.lw-legal-toc { display: none; }
.lw-legal-toc b, .lw-legal-tocm summary { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--k-content-muted); }
.lw-legal-toc a, .lw-legal-tocm a { display: flex; gap: var(--lw-space-3); padding: 9px var(--lw-space-4); border-radius: var(--lw-space-4); border: 1px solid transparent; font-size: var(--lw-fs-small); font-weight: 600; line-height: 1.3; color: var(--k-content-muted); text-decoration: none; }
.lw-legal-toc a em, .lw-legal-tocm a em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--k-accent); padding-top: 1px; }
.lw-legal-toc a:hover, .lw-legal-toc a.is-active { color: var(--k-content); }
.lw-legal-toc a.is-active { background: var(--k-glass-fill-strong); border-color: var(--k-glass-stroke); box-shadow: inset 0 1px 1px var(--k-glass-highlight); }
.lw-legal-tocm { margin: 0 0 var(--lw-space-6); border-radius: var(--lw-radius-tile); }
.lw-legal-tocm summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 var(--lw-space-5); cursor: pointer; }
.lw-legal-tocm summary::-webkit-details-marker { display: none; }
.lw-legal-tocm summary::after { content: "+"; font: 700 22px/1 var(--k-font-display); color: var(--k-accent); transition: transform var(--lw-dur-base) var(--lw-ease-out); }
.lw-legal-tocm[open] summary::after { transform: rotate(45deg); }
.lw-legal-tocm nav { display: flex; flex-direction: column; padding: 0 var(--lw-space-2) var(--lw-space-3); }
.lw-legal-tocm a { color: var(--k-content); font-size: 15px; }
.lw-legal-sec { padding: var(--lw-space-6) 0; border-top: 1px solid var(--k-line); scroll-margin-top: var(--lw-space-20); }
.lw-legal-sec:first-of-type { border-top: 0; padding-top: 0; }
.lw-legal-num { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--k-accent); }
.lw-legal-sec h2 { margin: var(--lw-space-1) 0 var(--lw-space-3); font-size: 26px; line-height: 1.15; }
.lw-legal-sec h3 { margin: var(--lw-space-5) 0 var(--lw-space-2); font-size: 18px; }
.lw-legal-sec p, .lw-legal-sec li { font-size: 16px; line-height: 1.65; }
.lw-legal-sec p { margin: 0 0 var(--lw-space-3); }
.lw-legal-sec ul { display: flex; flex-direction: column; gap: var(--lw-space-2); margin: 0 0 var(--lw-space-3); padding: 0; list-style: none; }
.lw-legal-sec ul li { position: relative; padding-left: 22px; }
.lw-legal-sec ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--k-accent); }
.lw-legal-sec a { color: var(--k-accent); text-underline-offset: 3px; }
.lw-legal-note { display: flex; gap: var(--lw-space-3); align-items: flex-start; margin: var(--lw-space-1) 0 var(--lw-space-3); padding: var(--lw-space-4); border-radius: var(--lw-radius-tile); background: var(--k-accent-soft); font-size: 15px; line-height: 1.5; }
.lw-legal-note svg { flex: none; margin-top: 2px; color: var(--k-accent); }
.lw-legal-table { overflow-x: auto; margin: var(--lw-space-2) 0 var(--lw-space-4); border-radius: var(--lw-radius-tile); }
.lw-legal-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.lw-legal-table th, .lw-legal-table td { text-align: left; vertical-align: top; padding: var(--lw-space-3) var(--lw-space-4); border-top: 1px solid var(--k-line); }
.lw-legal-table th { border-top: 0; font-size: 13px; letter-spacing: .04em; color: var(--k-content-muted); }
.lw-legal-placeholder { padding: 0 var(--lw-space-1); border-radius: 6px; background: var(--k-accent-soft); font-weight: 700; }
.lw-legal-contact { display: grid; gap: var(--lw-space-4); align-items: center; margin-top: var(--lw-space-6); padding: var(--lw-space-6); }
.lw-legal-contact h2 { font-size: 24px; }
.lw-legal-contact p { margin-top: var(--lw-space-1); color: var(--k-content-muted); }
/* 404: cùng đầu trang và chân trang, một khối ở giữa và nút về trang chủ. */
.lw-notfound { max-width: 560px; margin: 0 auto; padding: var(--lw-space-20) 0 var(--lw-space-10); text-align: center; }
.lw-notfound-code { font: var(--k-display-weight) clamp(88px, 18vw, 160px)/1 var(--k-font-display); letter-spacing: -.04em; color: var(--k-accent); }
.lw-notfound .lw-lead { margin-inline: auto; }
.lw-notfound .lw-btn { margin-top: var(--lw-space-8); }

/* ============ hiện dần khi cuộn: đứng yên = thiết kế cuối. Không có JS thì hiện đủ. ============ */
.js .lw-reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--lw-dur-enter) var(--lw-ease-out), transform var(--lw-dur-enter) var(--lw-ease-out); }
.js .lw-reveal.is-in { opacity: 1; transform: none; }
.js .lw-reveal.lw-d1 { transition-delay: 80ms; }
.js .lw-reveal.lw-d2 { transition-delay: 160ms; }
.js .lw-reveal.lw-d3 { transition-delay: 240ms; }

/* ============ máy hẹp (< 420px, vd 360): logo + "Tải ứng dụng" + menu vừa một hàng, chữ LabelCue không bị cắt ============ */
@media (max-width: 419px) {
  .lw-nav-bar { gap: var(--lw-space-1); }
  .lw-nav .lw-brand { font-size: 17px; gap: 6px; }
  .lw-nav .lw-brand img { width: 30px; height: 30px; border-radius: 9px; }
  .lw-nav-bar > .lw-btn { padding: 0 var(--lw-space-3); font-size: 13px; }
}

/* ============ màn vừa (≥ 600px) ============ */
@media (min-width: 600px) {
  .lw-wrap { width: min(100% - 2 * var(--lw-space-8), var(--lw-maxw)); }
  .lw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lw-feature { display: block; padding: var(--lw-space-6); }
  .lw-feature .lw-h3 { margin-top: var(--lw-space-5); }
  .lw-stage { height: 670px; }
  .lw-stage .lw-phone { --lw-phone-w: 290px; }
  .lw-float { width: 190px; }
  .lw-float-2 { width: 210px; top: 330px; }
  .lw-faq { padding: var(--lw-space-2) var(--lw-space-8); }
  .lw-cta { padding: var(--lw-space-14) var(--lw-space-8); }
  .lw-legal-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lw-legal-contact { grid-template-columns: minmax(0, 1fr) auto; padding: var(--lw-space-6) var(--lw-space-8); }
}

/* ============ màn rộng (≥ 900px): 2 cột ============ */
@media (min-width: 900px) {
  .lw-section { padding-top: var(--lw-space-30); }
  .lw-menu-btn { display: none; }
  .lw-nav-links { display: flex; gap: var(--lw-space-1); margin: 0 auto; }
  .lw-nav-bar { gap: var(--lw-space-4); padding-left: var(--lw-space-5); }
  .lw-nav-bar > .lw-btn { margin-left: 0; font-size: 15px; }
  .lw-brand { flex: none; font-size: 20px; }
  .lw-hero { grid-template-columns: 1.05fr .95fr; gap: var(--lw-space-10); padding: var(--lw-space-14) 0 var(--lw-space-10); text-align: left; }
  .lw-hero .lw-lead { margin-inline: 0; }
  .lw-hero .k-store-row, .lw-hero .lw-trust { justify-content: flex-start; }
  .lw-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lw-tour { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-areas: "stage tabs"; column-gap: clamp(32px, 6vw, 80px); align-items: center; justify-items: stretch; }
  .lw-tour-tabs { grid-area: tabs; display: flex; flex-direction: column; gap: var(--lw-space-2); }
  .lw-tour-caps, .lw-tour-dots { display: none; }
  .lw-tour-stage { grid-area: stage; }
  .lw-tour-stage .lw-phone { --lw-phone-w: 320px; }
  .lw-pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lw-space-5); }
  .lw-legal-points { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lw-legal-points li { grid-template-columns: 1fr; row-gap: var(--lw-space-2); }
  .lw-legal-points .lw-icon { grid-row: auto; }
  .lw-legal-body { grid-template-columns: 240px minmax(0, 700px); gap: clamp(40px, 6vw, 72px); padding-top: var(--lw-space-14); }
  .lw-legal-toc { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
  .lw-legal-toc b { margin: 0 0 var(--lw-space-2) var(--lw-space-4); }
  .lw-legal-tocm { display: none; }
  .lw-legal-sec { padding: var(--lw-space-8) 0; }
  .lw-legal-sec h2 { font-size: 28px; }
  .lw-legal-sec p, .lw-legal-sec li { font-size: 16.5px; }
}

/* ============ hạ cấp ============ */
/* Không có backdrop-filter: nền đặc để chữ luôn đọc được. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lw-glass, .lw-frost, .lw-nav-bar, .lw-nav.is-scrolled .lw-nav-bar, .lw-nav.is-open .lw-nav-links, .lw-tour-tab[aria-selected=true] { background: var(--lw-surface-solid); }
}
/* Người xem muốn giảm trong suốt: nền đặc, tắt blur (kể cả đốm nền). */
@media (prefers-reduced-transparency: reduce) {
  .lw-glass, .lw-frost, .lw-nav-bar, .lw-nav.is-scrolled .lw-nav-bar, .lw-nav.is-open .lw-nav-links, .lw-tour-tab[aria-selected=true] {
    background: var(--lw-surface-solid); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .lw-bg i { opacity: .5; }
}
/* Giảm chuyển động: mọi thứ đứng yên ở trạng thái cuối, không tự chuyển ảnh (kit-site.js cũng kiểm). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .lw-reveal { opacity: 1; transform: none; }
}