/* ==========================================================================
   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) */

  /* ---- 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;
  /* ---- Màu nhận diện cửa hàng: CHỈ web (nút App Store / Google Play ở design/web.html), app không dùng ---- */
  --store-apple-hi:#1FC2FB;
  --store-apple-lo:#1E6CF2;
  --store-play-blue:#00C3FF;
  --store-play-green:#00E676;
  --store-play-red:#FF3D57;
  --store-play-yellow:#FFC400;
}

*{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)}

/* ---- 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:20px;display:flex;align-items:center;gap:8px;z-index:25}
.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}
.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:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.66));box-shadow:inset 0 1px 1px var(--surface),inset 0 -6px 10px -6px rgba(31,109,92,.18),0 8px 16px -8px rgba(22,48,42,.45);border:1px solid rgba(255,255,255,.9)}
.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}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:rgba(22,48,42,.25);margin:0 auto 14px}

/* ---- 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 .on{background:var(--ink);color:var(--on-ink)} /* trên nền sáng (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 */
.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 */
.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)}
.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:rgba(255,255,255,.92)}
.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);
  --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 .dialog{background:rgba(26,40,35,.94)}
.dark .dockbar a{color:var(--tab-muted-dark)}
.dark .dockbar a.on{color:var(--accent);background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));border-color:rgba(255,255,255,.18);box-shadow:inset 0 1px 1px rgba(255,255,255,.3)}
.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:var(--accent);color:var(--ink-2)}
/* .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ở" nhẹ khi đứng yên (chỉ vòng sáng, không đổi kích thước) */
  .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 infinite 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ẹ */
  .pip-blink{animation:pipb 4s infinite}
  @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}