/* =========================================================================
   TapEasy — GÓI GIAO DIỆN (theme-packs.css) · đi kèm theme-packs.js, đăng ký trong themes.js
   Gói = màu + chất liệu kính + font + bo góc + nền + chuyển động. 5 gói (học phong cách, KHÔNG dùng tài sản của mẫu):
     aurora    — đen tuyệt đối, thẻ xám #1A1A1A, chữ trắng, Inter 300–700, nút trắng chữ đen
     espresso  — nâu ấm #180A06, chữ kem, nền nhiều quầng cam nâu, nút "kính lỏng" (khúc xạ SVG ở theme-packs.js)
     alpine    — SÁNG: thẻ kính kem, mực #2E2D2A, hổ phách/cam/tím, tiêu đề Inter Tight 300, nhãn mono "::"
     wellness  — xanh xám sương, kính viền gradient (::before + mask exclude), thẻ chọn bo lớn, quầng vàng
     sanctuary — nâu cà phê/kem, Manrope mảnh, tiêu đề editorial cực lớn, sheet trắng kem ở đáy
   Nạp SAU themes.css + mọi CSS module, TRƯỚC brand.css / themes-modules.css (2 file này luôn cuối — tests/00-boot).
   Mọi luật ở đây có tiền tố :root[data-theme=…] / html[data-theme=…] / html.tp-pack → độ ưu tiên cao hơn luật cùng
   đối tượng trong brand.css (:root) và themes-modules.css (:where() = độ ưu tiên gốc) nên vẫn thắng dù nạp trước.
   Cấu trúc:  1. token từng gói (:root[data-theme=…])   2. lớp dùng chung html.tp-pack (đọc --tp-*)
              3–7. chi tiết từng gói   8. máy yếu / giảm chuyển động
   Token riêng của gói (--tp-*): --tp-r-card · --tp-r-tile · --tp-r-btn · --tp-r-input · --tp-r-dock · --tp-btn-h
     --tp-head-w · --tp-head-track · --tp-ease · --tp-stagger · --tp-rise · --tp-rise-dur · --tp-gauge-a/-b (ui-signature)
   ========================================================================= */

/* ---------- 1a. AURORA — đen tuyệt đối ---------- */
:root[data-theme="aurora"]{
  --bg:#000000;
  --navy:#000000; --navy-2:#0D0D0D; --navy-3:#1A1A1A; --navy-4:#2A2A2A;
  --mint:#C8F25A; --mint-2:#E2F9A8; --mint-3:#A3D12E;                 /* "cực quang" chanh: dữ liệu, tiến độ */
  --coral:#FFFFFF; --coral-2:#EDEDED; --coral-3:#D9D9D9; --coral-4:#F5F5F5; --coral-hot:#FF5C5C;   /* CTA trắng */
  --navy-rgb:0,0,0; --mint-rgb:200,242,90; --coral-rgb:255,255,255; --coral-2-rgb:237,237,237;
  --on-mint:#0A0A0A; --on-coral:#000000;                                /* 15,4:1 · 21:1 */
  --text-muted:rgba(255,255,255,.78); --text-dim:rgba(255,255,255,.62); /* 7,3:1 trên #1A1A1A */
  --fk-line-k:.6;
  --fk-veil-rgb:0,0,0; --fk-scrim-rgb:0,0,0;
  --fk-sheet-1-rgb:26,26,26; --fk-sheet-2-rgb:12,12,12;
  --fk-toast-rgb:255,255,255; --fk-toast-ink:#000; --fk-toast-accent:#4D7C0F;
  --fk-dock-bg:rgba(16,16,16,.94); --fk-chip-bg:#1A1A1A;
  --glass:linear-gradient(#1A1A1A, #1A1A1A); --glass-blur:none; --glass-solid:#1A1A1A;
  --fk-shell-bg:radial-gradient(120% 38% at 50% -8%, rgba(255,255,255,.07), transparent 62%), #000;
  --fk-shell-blend:normal; --fk-theme-color:#000000;
  --font-ui:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --tp-r-card:20px; --tp-r-tile:16px; --tp-r-btn:14px; --tp-r-input:12px; --tp-r-dock:20px; --tp-btn-h:56px;
  --tp-head-w:600; --tp-head-track:-.03em;
  --tp-ease:cubic-bezier(.22,1,.36,1); --tp-stagger:.15s; --tp-rise:10px; --tp-rise-dur:.6s;
  --tp-gauge-a:#E2F9A8; --tp-gauge-b:#C8F25A;
  --sig-step-on-bg:#FFFFFF; --sig-step-on-ink:#000000; --sig-step-off-bg:#1A1A1A;
  --tp-hero-grad:linear-gradient(160deg, #262626, #0A0A0A);
}

/* ---------- 1b. ESPRESSO — nâu ấm, chữ kem, kính lỏng ---------- */
:root[data-theme="espresso"]{
  --bg:#180A06;
  --navy:#180A06; --navy-2:#24120B; --navy-3:#3A1F14; --navy-4:#5A3322;
  --mint:#F2BC85; --mint-2:#F8D9B6; --mint-3:#D99A5B;                 /* caramel: dữ liệu */
  --coral:#FF9A5C; --coral-2:#FFC6A3; --coral-3:#E46A2E; --coral-4:#FFA572; --coral-hot:#FF6B5A;  /* than hồng: CTA */
  --navy-rgb:24,10,6; --mint-rgb:242,188,133; --coral-rgb:255,154,92; --coral-2-rgb:255,198,163;
  --on-mint:#180A06; --on-coral:#1A0A04;                                /* 11,3:1 · 8,4:1 */
  --fk-ink:#EDE4D8; --fk-ink-rgb:237,228,216; --text:#EDE4D8;
  --text-muted:rgba(237,228,216,.86); --text-dim:rgba(235,220,205,.85); /* muted .55 của mẫu → .85 để đạt AA cả ở vùng quầng cam + thẻ */
  --fk-ov-rgb:255,236,220; --fk-text-boost:.12;                          /* chữ trắng-mờ cứng trong CSS cũ (.6–.72) đậm thêm 12 % */
  --fk-veil-rgb:24,10,6; --fk-scrim-rgb:24,10,6;
  --fk-sheet-1-rgb:52,28,18; --fk-sheet-2-rgb:26,12,7;
  --fk-toast-rgb:237,228,216; --fk-toast-ink:#180A06; --fk-toast-accent:#B4531F;
  --fk-dock-bg:linear-gradient(180deg, rgba(255,236,220,.10), rgba(255,236,220,.06)); --fk-chip-bg:rgba(255,255,255,.03);
  --glass:linear-gradient(180deg, rgba(255,236,220,.08), rgba(255,236,220,.05)); --glass-blur:blur(18px) saturate(130%);
  --glass-solid:linear-gradient(180deg, #301B12, #28160F);
  --fk-shell-bg:
    radial-gradient(80% 42% at 8% -4%, rgba(214,120,60,.42), transparent 62%),
    radial-gradient(70% 38% at 108% 26%, rgba(176,82,36,.32), transparent 66%),
    radial-gradient(60% 30% at -10% 62%, rgba(150,66,28,.22), transparent 70%),
    radial-gradient(90% 46% at 45% 108%, rgba(130,58,26,.42), transparent 70%),
    linear-gradient(180deg, #1F0E08, #180A06);
  --fk-shell-blend:normal; --fk-theme-color:#180A06;
  --tp-r-card:24px; --tp-r-tile:20px; --tp-r-btn:999px; --tp-r-input:16px; --tp-r-dock:28px; --tp-btn-h:52px;
  --tp-head-w:500; --tp-head-track:-.035em;
  --tp-ease:cubic-bezier(.16,1,.3,1); --tp-stagger:.09s; --tp-rise:18px; --tp-rise-dur:.9s;
  --tp-gauge-a:#FFC6A3; --tp-gauge-b:#FF8C4E;
  --tp-hero-grad:radial-gradient(90% 80% at 100% 0%, rgba(255,154,92,.45), transparent 60%), linear-gradient(150deg, #6A3218, #2A140C);
}

/* ---------- 1c. THU ALPINE — sáng, kem + hổ phách, nhãn mono ---------- */
:root[data-theme="alpine"]{
  --bg:#EAE6DE;
  --navy:#2E2D2A; --navy-2:#3A3935; --navy-3:#4A4843; --navy-4:#6B675F;
  --mint:#5A49CF; --mint-2:#4636B8; --mint-3:#7C6CF2;                 /* tím: dữ liệu/liên kết (5,6:1 trên kem) */
  --coral:#A9520A; --coral-2:#8F4508; --coral-3:#7C3A06; --coral-4:#F59E0B; --coral-hot:#B42318;   /* hổ phách đậm: chữ năng lượng (4,7:1) */
  --navy-rgb:46,45,42; --mint-rgb:90,73,207; --coral-rgb:169,82,10; --coral-2-rgb:143,69,8;
  --on-mint:#FFFFFF; --on-coral:#FFFFFF;
  --fk-ink:#2E2D2A; --fk-ink-rgb:46,45,42;
  --fk-ov-rgb:46,45,42; --fk-ov-k:.5; --fk-line-k:.7; --fk-text-boost:.25;
  --fk-veil-rgb:234,230,222; --fk-scrim-rgb:36,34,30;
  --fk-sheet-1-rgb:246,243,237; --fk-sheet-2-rgb:238,234,226;
  --fk-toast-rgb:46,45,42; --fk-toast-ink:#F4F0E9; --fk-toast-accent:#FBD06A;
  --fk-dock-bg:rgba(244,240,233,.94); --fk-chip-bg:rgba(244,240,233,.94);
  --text:#2E2D2A; --text-muted:rgba(46,45,42,.78); --text-dim:rgba(46,45,42,.70);   /* 6,2:1 · 4,9:1 trên thẻ kem */
  --surface:rgba(46,45,42,.04); --surface-2:rgba(46,45,42,.06); --surface-3:rgba(46,45,42,.09);
  --border:rgba(46,45,42,.12); --border-strong:rgba(46,45,42,.2);
  --glass:linear-gradient(rgba(244,240,233,.94), rgba(244,240,233,.94)); --glass-blur:blur(14px);
  --glass-solid:#F4F0E9; --shadow-card:none;
  --fk-shell-bg:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'><path d='M0 96 L34 78 L58 88 L96 52 L122 66 L152 34 L180 58 L214 44 L238 64 L276 22 L306 52 L338 42 L366 60 L400 50 L400 120 L0 120Z' fill='%23E3DED4'/><path d='M0 96 L34 78 L58 88 L96 52 L122 66 L152 34 L180 58 L214 44 L238 64 L276 22 L306 52 L338 42 L366 60 L400 50' fill='none' stroke='%232E2D2A' stroke-opacity='.16' stroke-width='1.2' vector-effect='non-scaling-stroke'/></svg>") center 64px / 100% 150px no-repeat,
    radial-gradient(70% 34% at 104% -4%, rgba(251,208,106,.55), transparent 62%),
    radial-gradient(60% 30% at -8% 100%, rgba(124,108,242,.12), transparent 64%),
    linear-gradient(180deg, #EFEBE4 0%, #EAE6DE 40%, #E6E1D8 100%);
  --fk-shell-blend:normal; --fk-theme-color:#EAE6DE;
  --font-head:'Inter Tight', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --tp-amber:#F6B733; --tp-amber-2:#FBD06A; --tp-orange:#F59E0B; --tp-violet:#7C6CF2; --tp-peach:#F8DCC6; --tp-panel:#EAE6DE;
  --tp-r-card:22px; --tp-r-tile:16px; --tp-r-btn:14px; --tp-r-input:12px; --tp-r-dock:22px; --tp-btn-h:52px;
  --tp-head-w:300; --tp-head-track:-.045em;
  --tp-ease:cubic-bezier(.16,1,.3,1); --tp-stagger:.12s; --tp-rise:14px; --tp-rise-dur:.9s;
  --tp-gauge-a:#FBD06A; --tp-gauge-b:#F59E0B;
  --sig-gauge-dur:2.4s;
  --tp-hero-grad:radial-gradient(90% 80% at 100% 0%, rgba(251,208,106,.35), transparent 60%), linear-gradient(150deg, #4A4843, #24221E);
}

/* ---------- 1d. SƯƠNG WELLNESS — xanh xám sương, kính viền gradient ---------- */
:root[data-theme="wellness"]{
  --bg:#34414D;
  --navy:#2F3B47; --navy-2:#394654; --navy-3:#4A5866; --navy-4:#66788A;
  --mint:#F6D873; --mint-2:#FBE8AE; --mint-3:#E5C04A;                 /* vàng nắng: dữ liệu + quầng sáng */
  --coral:#F6F3EC; --coral-2:#FFE1C7; --coral-3:#E3DED3; --coral-4:#FFFFFF; --coral-hot:#FFB4A6;  /* CTA trắng ấm */
  --navy-rgb:47,59,71; --mint-rgb:246,216,115; --coral-rgb:246,243,236; --coral-2-rgb:255,225,199;
  --on-mint:#26313C; --on-coral:#26313C;
  --text-muted:rgba(255,255,255,.90); --text-dim:rgba(255,255,255,.86);   /* nền sương sáng hơn → chữ mờ đậm hơn để đạt AA (cả vùng quầng + thẻ) */
  --fk-text-boost:.45;                                                    /* chữ trắng-mờ cứng (.6–.72) → .78–.85 */
  --fk-veil-rgb:52,64,77; --fk-scrim-rgb:38,49,60;
  --fk-sheet-1-rgb:78,92,106; --fk-sheet-2-rgb:52,64,77;
  --fk-toast-rgb:246,243,236; --fk-toast-ink:#26313C; --fk-toast-accent:#8A6A00;
  --fk-dock-bg:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07)); --fk-chip-bg:rgba(255,255,255,.10);
  --glass:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.045)); --glass-blur:blur(20px) saturate(120%);
  --glass-solid:linear-gradient(180deg, #4A5764, #43505C);
  --fk-shell-bg:
    radial-gradient(120% 55% at 50% 118%, rgba(26,34,44,.55), transparent 70%),
    radial-gradient(70% 22% at 12% 36%, rgba(226,233,240,.06), transparent 70%),
    radial-gradient(60% 20% at 92% 20%, rgba(240,236,220,.06), transparent 70%),
    radial-gradient(80% 26% at 60% 62%, rgba(214,224,234,.07), transparent 70%),
    linear-gradient(180deg, #384656 0%, #34414D 38%, #2C353F 100%);   /* #8A9AAA của mẫu + phủ tối → chữ trắng (kể cả trên chip/nút kính .2) đạt AA */
  --fk-shell-blend:normal; --fk-theme-color:#34414D;
  --tp-r-card:28px; --tp-r-tile:22px; --tp-r-btn:999px; --tp-r-input:18px; --tp-r-dock:30px; --tp-btn-h:54px;
  --tp-head-w:400; --tp-head-track:-.03em;
  --tp-ease:cubic-bezier(.22,1,.36,1); --tp-stagger:.08s; --tp-rise:16px; --tp-rise-dur:.85s;
  --tp-gauge-a:#FBE8AE; --tp-gauge-b:#F6D873;
  --sig-choice-r:32px; --sig-choice-h:100px;
  --tp-hero-grad:radial-gradient(90% 80% at 0% 0%, rgba(255,255,255,.16), transparent 60%), linear-gradient(160deg, #56677A, #343F4B);
}

/* ---------- 1e. SANCTUARY — nâu cà phê · kem · Manrope mảnh ---------- */
:root[data-theme="sanctuary"]{
  --bg:#2A2322;
  --navy:#1D191A; --navy-2:#2A2324; --navy-3:#3D3330; --navy-4:#5A4C41;
  --mint:#F1E5C6; --mint-2:#F8F0DC; --mint-3:#D9C79B;                 /* kem vàng: dữ liệu */
  --coral:#F4BC9C; --coral-2:#F6CDB4; --coral-3:#D98F68; --coral-4:#F4C2A4; --coral-hot:#FF9A86;  /* đất nung nhạt: năng lượng */
  --navy-rgb:29,25,26; --mint-rgb:241,229,198; --coral-rgb:244,188,156; --coral-2-rgb:246,205,180;
  --on-mint:#1D191A; --on-coral:#1D191A;
  --fk-ink:#F5F0E8; --fk-ink-rgb:245,240,232; --text:#F5F0E8;
  --text-muted:rgba(245,240,232,.88); --text-dim:rgba(245,240,232,.86);   /* AA ở đỉnh nền (quầng kem + thẻ) */
  --fk-ov-rgb:245,240,232; --fk-text-boost:.35;                          /* chữ kem-mờ cứng (.6–.72) → .74–.82 (AA) */
  --fk-veil-rgb:42,35,33; --fk-scrim-rgb:29,25,26;
  --fk-sheet-1-rgb:245,240,232; --fk-sheet-2-rgb:239,232,221;          /* sheet = "thẻ trắng ở đáy" (xem mục 7) */
  --fk-toast-rgb:245,240,232; --fk-toast-ink:#1D191A; --fk-toast-accent:#7A5B1F;
  --fk-dock-bg:linear-gradient(180deg, rgba(245,240,232,.12), rgba(245,240,232,.07)); --fk-chip-bg:rgba(245,240,232,.10);
  --glass:linear-gradient(180deg, rgba(245,240,232,.08), rgba(245,240,232,.05)); --glass-blur:blur(16px) saturate(110%);
  --glass-solid:linear-gradient(180deg, #3A302C, #332A27);
  --fk-shell-bg:
    radial-gradient(110% 34% at 50% -6%, rgba(241,229,198,.09), transparent 70%),
    linear-gradient(180deg, #3E342D 0%, #352C27 26%, #2A2322 56%, #1D191A 100%);
  --fk-shell-blend:normal; --fk-theme-color:#2A2322;
  --font-ui:'Manrope', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head:'Manrope', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tp-r-card:24px; --tp-r-tile:18px; --tp-r-btn:999px; --tp-r-input:14px; --tp-r-dock:26px; --tp-btn-h:54px;
  --tp-head-w:300; --tp-head-track:-.048em;
  --tp-ease:cubic-bezier(.22,1,.36,1); --tp-stagger:.1s; --tp-rise:12px; --tp-rise-dur:.9s;
  --tp-gauge-a:#F8F0DC; --tp-gauge-b:#D9C79B;
  --tp-hero-grad:radial-gradient(90% 70% at 100% 0%, rgba(241,229,198,.18), transparent 60%), linear-gradient(160deg, #5A4C41, #2A2322);
}

/* =========================================================================
   2. LỚP DÙNG CHUNG CHO MỌI GÓI (html.tp-pack) — chỉ đọc token --tp-*
   ========================================================================= */
html.tp-pack :is(.card, .nu-gauge-card, .nu-meal, .nu-water, .home-hero, .sig-gauge-card){ border-radius:var(--tp-r-card); }
html.tp-pack :is(.stat-box, .list-item, .metric, .entry-tile, .plan-card, .role-card, .tpl-card, .nu-recipe, .quick-row button, .wd){ border-radius:var(--tp-r-tile); }
html.tp-pack .btn{ border-radius:var(--tp-r-btn); }
html.tp-pack .btn-block.btn-primary{ min-height:var(--tp-btn-h, 48px); }
html.tp-pack :is(.field input, .field select, .field textarea, .search-box, .fb-input){ border-radius:var(--tp-r-input); min-height:44px; }
html.tp-pack .bottom-nav{ border-radius:var(--tp-r-dock, 24px); }
html.tp-pack :is(h1, h2, .headline, .hero-title, .onboard-hero){ font-weight:var(--tp-head-w); letter-spacing:var(--tp-head-track); }
html.tp-pack :is(h3, .section-title h3, .sheet-header h3){ letter-spacing:-.02em; }
html.tp-pack .home-greet h2{ line-height:1.04; }
html.tp-pack :is(.wd small, .streak-chip small){ font-size:12px; letter-spacing:0; }   /* style.css đặt 9,5 px — gói nâng lên sàn 12 px */
html.tp-pack .topbar .icon-btn{ width:44px; height:44px; min-width:44px; }                /* style.css 38 px → vùng chạm 44 px */
/* Nút nhỏ của style.css → vùng chạm 44 px (đo bằng Playwright: ngày 36×26, nút +/– món 34×34, nút chỉnh mục tiêu 30×30) */
html.tp-pack .day-tabs{ gap:4px; }
html.tp-pack .day-tab{ min-width:44px; min-height:44px; padding:10px 4px; }
html.tp-pack .nu-mini{ box-sizing:content-box; width:34px; height:34px; padding:5px; margin-top:-5px; margin-bottom:-5px; background-clip:content-box; }   /* hình tròn 34 như cũ, vùng chạm 44 */
html.tp-pack .card-title .icon-btn{ width:44px !important; height:44px !important; min-width:44px; margin:-7px -7px -7px auto; }

@keyframes tpRise{ from{ opacity:0; transform:translate3d(0, var(--tp-rise, 14px), 0); } to{ opacity:1; transform:none; } }
@keyframes tpHeroReveal{ from{ opacity:0; transform:scale(.965); filter:blur(8px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes tpDropIn{ from{ opacity:0; transform:translate3d(0, -16px, 0); } to{ opacity:1; transform:none; } }
@keyframes tpFade{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: no-preference){
  html.tp-pack .screen.enter .content > *{ animation:tpRise var(--tp-rise-dur, .8s) var(--tp-ease, var(--e-out)) both; }
  html.tp-pack .screen.enter .content > *:nth-child(1){ animation-delay:.04s; }
  html.tp-pack .screen.enter .content > *:nth-child(2){ animation-delay:calc(.04s + var(--tp-stagger) * 1); }
  html.tp-pack .screen.enter .content > *:nth-child(3){ animation-delay:calc(.04s + var(--tp-stagger) * 2); }
  html.tp-pack .screen.enter .content > *:nth-child(4){ animation-delay:calc(.04s + var(--tp-stagger) * 3); }
  html.tp-pack .screen.enter .content > *:nth-child(5){ animation-delay:calc(.04s + var(--tp-stagger) * 4); }
  html.tp-pack .screen.enter .content > *:nth-child(6){ animation-delay:calc(.04s + var(--tp-stagger) * 5); }
  html.tp-pack .screen.enter .content > *:nth-child(7){ animation-delay:calc(.04s + var(--tp-stagger) * 6); }
  html.tp-pack .screen.enter .content > *:nth-child(8){ animation-delay:calc(.04s + var(--tp-stagger) * 7); }
  html.tp-pack .screen.enter .content > *:nth-child(n+9){ animation-delay:calc(.04s + var(--tp-stagger) * 8); }
  html.tp-pack .screen.enter .topbar .logo{ animation:tpDropIn .7s var(--tp-ease, var(--e-out)) .05s both; }
}

/* =========================================================================
   3. AURORA
   ========================================================================= */
html[data-theme="aurora"] .topbar{ background:linear-gradient(180deg, #000 34%, rgba(0,0,0,0)) !important; }
html[data-theme="aurora"] #app-shell::before{ opacity:0; }
html[data-theme="aurora"] :is(.card, .stat-box, .list-item, .metric, .entry-tile, .quick-row button, .wd, .nu-gauge-card, .nu-meal,
  .nu-water, .nu-recipe, .plan-card, .role-card, .streak-chip, .date-chip, .choice-card, .pb-opt){
  -webkit-backdrop-filter:none; backdrop-filter:none; }
html[data-theme="aurora"] .card::after{ display:none; }   /* không vệt sáng — phẳng, tối giản */
html[data-theme="aurora"] .home-hero{ background-color:#111 !important; }
html[data-theme="aurora"] :is(.pill.active, .pill.hot, .choice-card.selected, .pb-opt.on, .fk-seg button[aria-checked="true"]){
  background:#fff !important; color:#000 !important; border-color:#fff !important; }
html[data-theme="aurora"] :is(.choice-card.selected, .pb-opt.on) :is(small, .material-symbols-rounded){ color:#000 !important; }
html[data-theme="aurora"] .nav-item.active .material-symbols-rounded{ background:#fff; color:#000; }
html[data-theme="aurora"] .nav-item.active{ color:#fff; }
html[data-theme="aurora"] .btn-primary{ background:#fff !important; color:#000 !important; font-weight:600; }
html[data-theme="aurora"] .btn-primary .material-symbols-rounded{ color:#000; }
html[data-theme="aurora"] .btn-outline{ background:#1A1A1A !important; border-color:rgba(255,255,255,.14) !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
html[data-theme="aurora"] :is(.field input, .field select, .field textarea, .search-box, .fb-input){
  background:#1A1A1A !important; border:1px solid rgba(255,255,255,.10) !important; }
html[data-theme="aurora"] :is(.field input, .field select, .field textarea, .fb-input):focus{ border-color:#fff !important; background:#1F1F1F !important; }
html[data-theme="aurora"] .sheet{ background:#0E0E0E !important; -webkit-backdrop-filter:none; backdrop-filter:none; border-top:1px solid rgba(255,255,255,.10); }
html[data-theme="aurora"] .sheet-backdrop{ background:rgba(0,0,0,.66); }
html[data-theme="aurora"] .wd.today{ background:#fff !important; border-color:#fff !important; }
html[data-theme="aurora"] .wd.today :is(small, b){ color:#000 !important; }

/* =========================================================================
   4. ESPRESSO — kính lỏng: nền .03, viền sáng trong, blur(2px) saturate(1.3) (+ khúc xạ SVG khi html.tp-refract)
   ========================================================================= */
html[data-theme="espresso"] :is(.btn-outline, .btn-soft, .topbar .icon-btn, .pill:not(.active):not(.hot), .streak-chip, .tp-lg){
  background:rgba(255,255,255,.03) !important;
  border:1px solid rgba(255,236,220,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,244,232,.30), inset 0 -1px 0 rgba(255,244,232,.06),
             inset 0 0 14px rgba(255,190,140,.07), 0 8px 24px rgba(10,4,2,.30) !important;
  -webkit-backdrop-filter:blur(2px) saturate(1.3); backdrop-filter:blur(2px) saturate(1.3);
}
html.tp-refract[data-theme="espresso"] :is(.btn-outline, .btn-soft, .topbar .icon-btn, .pill:not(.active):not(.hot), .streak-chip, .tp-lg){
  -webkit-backdrop-filter:blur(2px) saturate(1.3); backdrop-filter:url(#tp-lg-refract) blur(1px) saturate(1.3);
}
html[data-theme="espresso"] .btn-primary{
  background:linear-gradient(180deg, #FFA36C 0%, #F27A3B 100%) !important; color:#1A0A04 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 6px rgba(120,40,10,.25), 0 10px 28px rgba(240,122,58,.28) !important; }
html[data-theme="espresso"] .btn-primary .material-symbols-rounded{ color:#1A0A04; }
html[data-theme="espresso"] .home-hero::before{ background:radial-gradient(90% 90% at 100% 0%, rgba(255,140,78,.30), transparent 60%),
  linear-gradient(90deg, rgba(24,10,6,.92) 22%, rgba(24,10,6,.45) 70%, rgba(24,10,6,.2)) !important; }
html[data-theme="espresso"] .nav-item.active .material-symbols-rounded{ background:rgba(255,236,220,.14);
  box-shadow:inset 0 1px 0 rgba(255,244,232,.30); color:#FFE4CC; }
html[data-theme="espresso"] .sheet{ border-top:1px solid rgba(255,236,220,.18); }
@media (prefers-reduced-motion: no-preference){
  html[data-theme="espresso"] .screen.enter .content > *:first-child{ animation-name:tpHeroReveal; animation-duration:1.1s; }
  html.lowfx[data-theme="espresso"] .screen.enter .content > *:first-child{ animation-name:tpRise; }
}

/* =========================================================================
   5. THU ALPINE (sáng)
   ========================================================================= */
/* Không đổ bóng thẻ (ghi đè bóng mềm của theme Sáng — themes.css §4) */
html.fk-light[data-theme="alpine"] :is(.card, .nu-gauge-card, .nu-meal, .nu-water, .home-hero, .nu-plan, .plan-card, .role-card,
  .metric, .entry-tile, .stat-box, .list-item, .wd, .quick-row button, .streak-chip, .nu-recipe, .tpl-card, .atp-day, .icon-btn, .bottom-nav){
  box-shadow:none !important; }
html[data-theme="alpine"] .bottom-nav{ border:1px solid rgba(46,45,42,.10) !important; }
/* Panel trong thẻ: #EAE6DE */
html[data-theme="alpine"] .card :is(.stat-box, .list-item, .metric, .link-row){ background:var(--tp-panel) !important; border-color:transparent !important; }
html[data-theme="alpine"] .card .link-row{ border-radius:14px; padding-left:10px; padding-right:10px; }
/* Tiêu đề Inter Tight 300 rất lớn */
html[data-theme="alpine"] :is(h1, h2, .headline, .hero-title, .onboard-hero){ font-family:var(--font-head); font-weight:300; letter-spacing:-.045em; }
html[data-theme="alpine"] #home-content .home-greet h2{ font-size:38px !important; }
html[data-theme="alpine"] .home-greet h2 span{ color:var(--text-dim) !important; }
html[data-theme="alpine"] #screen-profile #profile-name{ font-size:30px !important; font-weight:300; text-transform:none; }
html[data-theme="alpine"] :is(.stat-box .num, .ring-center .num, .metric b){ font-family:var(--font-head); font-weight:400; letter-spacing:-.03em; }
/* Nhãn mono JetBrains Mono 500 in hoa, tiền tố "::" */
html[data-theme="alpine"] :is(.hero-eyebrow, .home-greet .small-note, .metric small, .field label, .card-title, .sig-mono, .te-eyebrow){
  font-family:var(--font-mono); font-weight:500; text-transform:uppercase; letter-spacing:.04em; font-size:12px; }
html[data-theme="alpine"] .card-title{ font-size:12px; color:var(--text); }
html[data-theme="alpine"] :is(.hero-eyebrow, .home-greet .small-note, .te-eyebrow)::before{ content:":: "; opacity:.55; }
/* Chip đào · chip đang chọn mực đậm */
html[data-theme="alpine"] .pill:not(.active):not(.hot){ background:var(--tp-peach) !important; color:#5A3A1E !important; border-color:transparent !important; }
html[data-theme="alpine"] :is(.pill.active, .pill.hot, .fk-seg button[aria-checked="true"]){ background:#2E2D2A !important; color:#F4F0E9 !important; border-color:#2E2D2A !important; }
/* CTA hổ phách, chữ mực */
html[data-theme="alpine"] .btn-primary{ background:linear-gradient(180deg, #FBD06A, #F6B733) !important; color:#2E2D2A !important; }
html[data-theme="alpine"] .btn-primary .material-symbols-rounded{ color:#2E2D2A; }
html[data-theme="alpine"] .nav-item.active .material-symbols-rounded{ background:#FBD06A; color:#2E2D2A; }
html[data-theme="alpine"] .wd.today{ background:#2E2D2A !important; border-color:#2E2D2A !important; }
html[data-theme="alpine"] .wd.today :is(small, b){ color:#F4F0E9 !important; }
html[data-theme="alpine"] .streak-chip .material-symbols-rounded{ color:var(--tp-orange); }
/* "Đảo tối" (ảnh/video) của theme sáng → bảng hổ phách thay vì teal/coral */
html.fk-light[data-theme="alpine"] :is(.hero, #screen-workout > .topbar.transparent, .mg-card, .wl, #auth.wl-mode, .auth-hero,
  #screen-ptprofile, .vplayer, .clip-thumb, .vthumb, .vp-item, .ld-media, .fk-dark-island){
  --mint:#FBD06A; --mint-2:#FDE3A0; --mint-3:#F6B733; --mint-rgb:251,208,106; --success:#FBD06A; --gold:#FBD06A;
  --coral:#F6B733; --coral-rgb:246,183,51; --coral-2:#FBD06A; --coral-2-rgb:251,208,106; --coral-4:#FBD06A;
  --primary:#F6B733; --primary-soft:#FBD06A; --warn:#FBD06A;
  --on-mint:#2E2D2A; --on-coral:#2E2D2A; --fk-veil-rgb:36,34,30; --fk-scrim-rgb:36,34,30;
}
html.fk-light[data-theme="alpine"] .hero{ background-color:#3A3935; }
html.fk-light[data-theme="alpine"] #screen-ptprofile, html.fk-light[data-theme="alpine"] #auth.wl-mode{ background:#24221E; }

/* =========================================================================
   6. SƯƠNG WELLNESS — viền gradient bằng ::before + mask-composite exclude (alpha .45 → 0 → .45)
   ========================================================================= */
html[data-theme="wellness"] :is(.metric, .stat-box, .choice-card, .pb-opt){ position:relative; }
html[data-theme="wellness"] :is(.card, .nu-gauge-card, .nu-meal, .nu-water, .metric, .stat-box, .choice-card, .pb-opt, .sig-gauge-card, .sig-stat){
  border-color:transparent !important; }
html[data-theme="wellness"] :is(.card, .nu-gauge-card, .nu-meal, .nu-water, .metric, .stat-box, .choice-card, .pb-opt, .sig-gauge-card, .sig-stat, .bottom-nav, .tp-lg)::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:2;
  background:linear-gradient(135deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,.45) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
}
html[data-theme="wellness"] .bottom-nav{ border-color:transparent !important; }
/* Thẻ chọn đã chọn: sáng hẳn lên (trắng ấm, chữ đậm) */
html[data-theme="wellness"] :is(.choice-card.selected, .pb-opt.on){ background:#F6F3EC !important; color:#26313C !important; }
html[data-theme="wellness"] :is(.choice-card.selected, .pb-opt.on) :is(small, .material-symbols-rounded){ color:rgba(38,49,60,.8) !important; }
html[data-theme="wellness"] :is(.choice-card.selected, .pb-opt.on)::before{ background:linear-gradient(135deg, rgba(246,216,115,.9), rgba(246,216,115,.15) 50%, rgba(246,216,115,.9)); }
html[data-theme="wellness"] :is(.pill.active, .pill.hot){ background:#F6F3EC !important; color:#26313C !important; border-color:#F6F3EC !important; }
html[data-theme="wellness"] .btn-primary{ background:#F6F3EC !important; color:#26313C !important; }
html[data-theme="wellness"] .btn-primary .material-symbols-rounded{ color:#26313C; }
/* Nút tròn có quầng vàng (giống nút giọng nói của mẫu): FAB, nút "Bắt đầu tập" trên hero, .tp-halo */
html[data-theme="wellness"] :is(.btn-fab, .tp-halo, #home-content .home-hero .btn-primary){
  box-shadow:0 0 0 4px rgba(246,216,115,.20), 0 0 26px 4px rgba(246,216,115,.42) !important; }
@media (prefers-reduced-motion: no-preference){
  html[data-theme="wellness"]:not(.lowfx) :is(.btn-fab, .tp-halo){ animation:tpHalo 3.2s ease-in-out infinite; }
  @keyframes tpHalo{ 0%,100%{ box-shadow:0 0 0 4px rgba(246,216,115,.20), 0 0 22px 2px rgba(246,216,115,.36); }
                     50%{ box-shadow:0 0 0 8px rgba(246,216,115,.10), 0 0 34px 8px rgba(246,216,115,.50); } }
}
html[data-theme="wellness"] .nav-item.active .material-symbols-rounded{ background:rgba(255,255,255,.20); color:#fff; box-shadow:0 0 18px rgba(246,216,115,.30); }
html[data-theme="wellness"] .wd.today{ background:rgba(246,243,236,.92) !important; border-color:transparent !important; }
html[data-theme="wellness"] .wd.today :is(small, b){ color:#26313C !important; }
html[data-theme="wellness"] .sheet{ border-top:1px solid rgba(255,255,255,.34); }
html[data-theme="wellness"] .ach-rank{ color:#fff; background:rgba(246,216,115,.12); }

/* =========================================================================
   7. SANCTUARY — Manrope mảnh, tiêu đề editorial, sheet trắng kem ở đáy
   ========================================================================= */
html[data-theme="sanctuary"] :is(h1, h2, .headline, .hero-title, .onboard-hero){ font-family:var(--font-head); font-weight:300; letter-spacing:-.048em; }
html[data-theme="sanctuary"] #home-content .home-greet h2{ font-size:40px !important; line-height:1; }
html[data-theme="sanctuary"] #screen-profile #profile-name{ font-size:32px !important; font-weight:300; text-transform:none; letter-spacing:-.04em; }
html[data-theme="sanctuary"] :is(.section-title h3, .sheet-header h3, .card-title){ font-weight:500; }
html[data-theme="sanctuary"] :is(.stat-box .num, .ring-center .num, .metric b){ font-weight:300; letter-spacing:-.04em; }
html[data-theme="sanctuary"] .btn-primary{ background:#F1E5C6 !important; color:#1D191A !important; font-weight:600; }
html[data-theme="sanctuary"] .btn-primary .material-symbols-rounded{ color:#1D191A; }
html[data-theme="sanctuary"] :is(.pill.active, .pill.hot){ background:#F1E5C6 !important; color:#1D191A !important; border-color:#F1E5C6 !important; }
html[data-theme="sanctuary"] .nav-item.active .material-symbols-rounded{ background:#F5F0E8; color:#1D191A; }
html[data-theme="sanctuary"] .wd.today{ background:#F5F0E8 !important; border-color:#F5F0E8 !important; }
html[data-theme="sanctuary"] .wd.today :is(small, b){ color:#1D191A !important; }
/* Sheet = thẻ trắng kem ở đáy: đổi token chữ/bề mặt bên trong sheet sang "nền sáng" */
html[data-theme="sanctuary"] .sheet{
  --fk-ink:#1D191A; --fk-ink-rgb:29,25,26; --fk-ov-rgb:29,25,26; --fk-ov-k:.5; --fk-line-k:.75; --fk-text-boost:.25;
  --fk-veil-rgb:245,240,232; --fk-chip-bg:rgba(29,25,26,.06);
  --text:#1D191A; --text-muted:rgba(29,25,26,.78); --text-dim:rgba(29,25,26,.70);
  --surface:rgba(29,25,26,.04); --surface-2:rgba(29,25,26,.06); --surface-3:rgba(29,25,26,.09);
  --border:rgba(29,25,26,.12); --border-strong:rgba(29,25,26,.2);
  --glass:linear-gradient(180deg, #FFFFFF, #FBF8F2); --glass-solid:#FFFFFF; --glass-blur:none;
  --mint:#7A5B1F; --mint-2:#6A4E18; --mint-3:#9C7A35; --mint-rgb:122,91,31;
  --coral:#A4512B; --coral-2:#8E4423; --coral-3:#7E3B1E; --coral-4:#C46A3F; --coral-hot:#B42318;
  --coral-rgb:164,81,43; --coral-2-rgb:142,68,35;
  --primary:#A4512B; --primary-dark:#7E3B1E; --primary-soft:#8E4423; --success:#7A5B1F; --warn:#8E4423; --gold:#7A5B1F;
  --on-mint:#FFFFFF; --on-coral:#FFFFFF;
  color:var(--text); border-top:none; box-shadow:0 -18px 40px rgba(0,0,0,.35);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
html[data-theme="sanctuary"] .sheet ::placeholder{ color:rgba(29,25,26,.55); }
html[data-theme="sanctuary"] .sheet [style*="color:rgba(255,255,255" i]{ color:var(--text-muted) !important; }
html[data-theme="sanctuary"] .sheet :is(input, textarea, select)[style*="color:#fff" i]{ color:var(--fk-ink) !important; }
html[data-theme="sanctuary"] .sheet .btn-primary{ background:#1D191A !important; color:#F5F0E8 !important; }
html[data-theme="sanctuary"] .sheet .btn-primary .material-symbols-rounded{ color:#F5F0E8; }
html[data-theme="sanctuary"] .sheet .btn-outline{ background:#fff; border-color:rgba(29,25,26,.18) !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
html[data-theme="sanctuary"] .sheet .icon-btn{ background:rgba(29,25,26,.07); color:#1D191A; }
html[data-theme="sanctuary"] .sheet .tp-logo.brand-swap img.brand-wm.on-dark{ display:none; }
html[data-theme="sanctuary"] .sheet .tp-logo.brand-swap img.brand-wm.on-light{ display:block; }
html[data-theme="sanctuary"] .sheet .brand-swap .brand-text{ color:var(--ink, #242D33); }
html[data-theme="sanctuary"] .sheet-backdrop{ background:rgba(20,16,15,.55); }
/* khối nằm trên ảnh/video trong sheet vẫn tối */
html[data-theme="sanctuary"] .sheet :is(.hero, .mg-card, .vplayer, .clip-thumb, .vthumb, .vp-item, .ld-media, .fk-dark-island){
  --fk-ink:#fff; --fk-ink-rgb:255,255,255; --fk-ov-rgb:255,255,255; --fk-ov-k:1; --fk-line-k:1; --fk-text-boost:0;
  --fk-veil-rgb:29,25,26; --text:#fff; --text-muted:rgba(255,255,255,.82); --text-dim:rgba(255,255,255,.68);
  --surface:rgba(255,255,255,.10); --surface-2:rgba(255,255,255,.14); --surface-3:rgba(255,255,255,.18);
  --border:rgba(255,255,255,.16); --border-strong:rgba(255,255,255,.26);
  --mint:#F1E5C6; --mint-2:#F8F0DC; --mint-rgb:241,229,198; --coral:#F0B08C; --coral-rgb:240,176,140; --coral-2:#F6CDB4;
  --primary:#F0B08C; --primary-soft:#F6CDB4; --on-mint:#1D191A; --on-coral:#1D191A;
  color:var(--text);
}
/* Menu: chữ lớn mảnh như menu phủ toàn màn của mẫu */
html[data-theme="sanctuary"] [data-te-menu] .link-row .name{ font-family:var(--font-head); font-size:22px; font-weight:300; letter-spacing:-.03em; }
html[data-theme="sanctuary"] [data-te-menu] .link-row{ min-height:52px; border-bottom:1px solid rgba(29,25,26,.08); border-radius:0; background:none !important; }
/* Sự kiện: thẻ ngày 68×90, chữ dọc xoay −90° bên hero */
html[data-theme="sanctuary"] .te-ev-cover{ height:118px; }
html[data-theme="sanctuary"] .te-ev-date{ width:68px; height:90px; padding:0; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#F5F0E8 !important; border:none !important; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 8px 20px rgba(0,0,0,.25); }
html[data-theme="sanctuary"] .te-ev-date b{ font-family:var(--font-head); font-weight:300; font-size:36px; letter-spacing:-.05em; color:#1D191A; }
html[data-theme="sanctuary"] .te-ev-date small{ color:rgba(29,25,26,.72); letter-spacing:.14em; margin-top:6px; }
html[data-theme="sanctuary"] .te-hero{ padding-right:44px; }
html[data-theme="sanctuary"] .te-hero::after{ content:"CỘNG ĐỒNG · TAPEASY"; position:absolute; right:14px; bottom:18px; writing-mode:vertical-rl; transform:rotate(180deg);
  font:500 12px/1 var(--font-ui); letter-spacing:.32em; color:var(--text-dim); pointer-events:none; }
html[data-theme="sanctuary"] :is(.te-h, .kb-hero h2){ font-family:var(--font-head); font-weight:300; font-size:34px; line-height:1.04; letter-spacing:-.05em; }

/* =========================================================================
   8. MÁY YẾU / GIẢM TRONG SUỐT / GIẢM CHUYỂN ĐỘNG
   ========================================================================= */
html.lowfx[data-theme="espresso"] :is(.btn-outline, .btn-soft, .topbar .icon-btn, .pill:not(.active):not(.hot), .streak-chip, .tp-lg){
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(255,236,220,.08) !important; }
html.lowfx[data-theme="wellness"] :is(.card, .metric, .stat-box)::before{ display:none; }
html.lowfx[data-theme="wellness"] :is(.card, .metric, .stat-box){ border-color:rgba(255,255,255,.22) !important; }
@media (prefers-reduced-transparency: reduce){
  html[data-theme="espresso"] :is(.btn-outline, .btn-soft, .topbar .icon-btn, .pill:not(.active):not(.hot), .streak-chip, .tp-lg){
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(255,236,220,.08) !important; }
}
@media (prefers-reduced-motion: reduce){
  html.tp-pack .screen.enter *, html.tp-pack .screen.enter *::after{ animation:none !important; }
  html[data-theme="wellness"] :is(.btn-fab, .tp-halo){ animation:none !important; }
}

/* Hero có nền thương hiệu teal cứng (Kho kiến thức) → nền theo gói */
html.tp-pack .kb-hero{ background:var(--tp-hero-grad); }

/* Lớp phủ "Sức khoẻ & an toàn" (health-safety.css đặt cứng ảnh nền bão) → nền của gói */
html.tp-pack #hs-overlay{ background:var(--fk-shell-bg); }

/* #########################################################################
   GÓI MỚI (vòng accent, 12/11) — học PHONG CÁCH từ 4 ảnh mẫu chủ app gửi; không dùng ảnh/logo/tên/font trả phí của mẫu.
     ember  — "Cam năng lượng": nền trắng/xám rất nhạt, cam #FF6A2B → #FF8A3D, thẻ trắng bo 26, CTA viên thuốc cam đổ bóng cam
     volt   — "Volt": nền #0B0B0C, thẻ #1A1A1C, chanh #D4FF3A (chữ trên chanh màu đen), tiêu đề IN HOA đậm 2 dòng (dòng 2 chanh),
              CTA viên dài có nút tròn mũi tên
     violet — "Tím Đêm Pro": nền #15161C, thẻ #1F2029, tím #6C4CF5/#7C5CFF, chỉ số nhiều màu (tím/vàng/xanh)
     lime   — "Chanh sáng": nền trắng, chip/CTA chanh #DFFF4F chữ đen, thẻ ảnh bo lớn có nút mũi tên tròn
   Token accent (--accent, --cta-*, --link, --logo-*) của 4 gói nằm ở theme-accent.css §1.
   ######################################################################### */

/* ---------- 1f. CAM NĂNG LƯỢNG (sáng) ---------- */
:root[data-theme="ember"]{
  --bg:#F4F4F2;
  --navy:#1B1B1F; --navy-2:#2A2A30; --navy-3:#3A3A42; --navy-4:#5A5A64;
  --mint:#C2410C; --mint-2:#9A3412; --mint-3:#FF6A2B;                 /* cam đậm cho CHỮ dữ liệu (5,2:1 trắng · 4,7:1 nền) */
  --coral:#FF6A2B; --coral-2:#B23A0A; --coral-3:#E8501A; --coral-4:#FF8A3D; --coral-hot:#D92D20;   /* cam tươi: mảng CTA */
  --navy-rgb:27,27,31; --mint-rgb:194,65,12; --coral-rgb:255,106,43; --coral-2-rgb:178,58,10;
  --on-mint:#FFFFFF; --on-coral:#1B0F0A;                               /* 5,2:1 · 6,6:1 */
  --fk-ink:#1B1B1F; --fk-ink-rgb:27,27,31;
  --fk-ov-rgb:27,27,31; --fk-ov-k:.5; --fk-line-k:.7; --fk-text-boost:.25;
  --fk-veil-rgb:244,244,242; --fk-scrim-rgb:27,20,16;
  --fk-sheet-1-rgb:255,255,255; --fk-sheet-2-rgb:248,248,246;
  --fk-toast-rgb:27,27,31; --fk-toast-ink:#FFFFFF; --fk-toast-accent:#FF8A3D;
  --fk-dock-bg:rgba(255,255,255,.96); --fk-chip-bg:#FFFFFF;
  --text:#1B1B1F; --text-muted:rgba(27,27,31,.74); --text-dim:rgba(27,27,31,.66);   /* 6,6:1 · 5,3:1 trên nền */
  --surface:rgba(27,27,31,.04); --surface-2:rgba(27,27,31,.06); --surface-3:rgba(27,27,31,.09);
  --border:rgba(27,27,31,.10); --border-strong:rgba(27,27,31,.18);
  --glass:linear-gradient(#FFFFFF, #FFFFFF); --glass-blur:none; --glass-solid:#FFFFFF;
  --shadow-card:0 1px 2px rgba(27,27,31,.04), 0 10px 30px rgba(27,27,31,.06);
  --fk-shell-bg:radial-gradient(80% 26% at 104% -4%, rgba(255,138,61,.20), transparent 64%), linear-gradient(180deg, #F8F8F6 0%, #F2F2F0 100%);
  --fk-shell-blend:normal; --fk-theme-color:#F4F4F2;
  --font-ui:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head:'Inter Tight', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tp-r-card:26px; --tp-r-tile:20px; --tp-r-btn:999px; --tp-r-input:16px; --tp-r-dock:28px; --tp-btn-h:54px;
  --tp-head-w:700; --tp-head-track:-.03em;
  --tp-ease:cubic-bezier(.22,1,.36,1); --tp-stagger:.08s; --tp-rise:14px; --tp-rise-dur:.7s;
  --tp-gauge-a:#FFB07A; --tp-gauge-b:#FF6A2B;
  --sig-step-on-bg:#FF6A2B; --sig-step-on-ink:#1B0F0A; --sig-step-off-bg:#EDEDEA;
  --tp-hero-grad:radial-gradient(90% 80% at 100% 0%, rgba(255,138,61,.55), transparent 60%), linear-gradient(150deg, #3A2418, #1B1410);
}

/* ---------- 1g. VOLT (tối) ---------- */
:root[data-theme="volt"]{
  --bg:#0B0B0C;
  --navy:#0B0B0C; --navy-2:#141416; --navy-3:#1A1A1C; --navy-4:#2A2A2E;
  --mint:#D4FF3A; --mint-2:#E6FF8A; --mint-3:#B8E61A;
  --coral:#D4FF3A; --coral-2:#E6FF8A; --coral-3:#B8E61A; --coral-4:#E0FF66; --coral-hot:#FF5A4E;
  --navy-rgb:11,11,12; --mint-rgb:212,255,58; --coral-rgb:212,255,58; --coral-2-rgb:230,255,138;
  --on-mint:#0B0B0C; --on-coral:#0B0B0C;                               /* 17:1 */
  --text-muted:rgba(255,255,255,.76); --text-dim:rgba(255,255,255,.62);
  --fk-line-k:.6;
  --fk-veil-rgb:11,11,12; --fk-scrim-rgb:0,0,0;
  --fk-sheet-1-rgb:26,26,28; --fk-sheet-2-rgb:14,14,16;
  --fk-toast-rgb:255,255,255; --fk-toast-ink:#0B0B0C; --fk-toast-accent:#4D6600;
  --fk-dock-bg:rgba(20,20,22,.94); --fk-chip-bg:#1A1A1C;
  --glass:linear-gradient(#1A1A1C, #1A1A1C); --glass-blur:none; --glass-solid:#1A1A1C;
  --fk-shell-bg:radial-gradient(90% 30% at 104% -6%, rgba(212,255,58,.10), transparent 62%), #0B0B0C;
  --fk-shell-blend:normal; --fk-theme-color:#0B0B0C;
  --font-ui:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head:'Inter Tight', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tp-r-card:24px; --tp-r-tile:18px; --tp-r-btn:999px; --tp-r-input:14px; --tp-r-dock:28px; --tp-btn-h:56px;
  --tp-head-w:800; --tp-head-track:-.01em;
  --tp-ease:cubic-bezier(.2,.9,.25,1); --tp-stagger:.07s; --tp-rise:12px; --tp-rise-dur:.6s;
  --tp-gauge-a:#E6FF8A; --tp-gauge-b:#D4FF3A;
  --sig-step-on-bg:#D4FF3A; --sig-step-on-ink:#0B0B0C; --sig-step-off-bg:#1A1A1C;
  --tp-hero-grad:radial-gradient(90% 80% at 100% 0%, rgba(212,255,58,.16), transparent 60%), linear-gradient(160deg, #1E1E21, #0B0B0C);
}

/* ---------- 1h. TÍM ĐÊM PRO (tối) ---------- */
:root[data-theme="violet"]{
  --bg:#15161C;
  --navy:#15161C; --navy-2:#1B1C24; --navy-3:#1F2029; --navy-4:#2E3040;
  --mint:#A893FF; --mint-2:#C9BCFF; --mint-3:#7C5CFF;                 /* tím sáng cho chữ dữ liệu (7,1:1) */
  --coral:#6C4CF5; --coral-2:#C9BCFF; --coral-3:#5A3BE0; --coral-4:#7C5CFF; --coral-hot:#FF5C7A;
  --navy-rgb:21,22,28; --mint-rgb:168,147,255; --coral-rgb:108,76,245; --coral-2-rgb:201,188,255;
  --on-mint:#15161C; --on-coral:#FFFFFF;                               /* 7,1:1 · 5,3:1 */
  --text-muted:rgba(255,255,255,.78); --text-dim:rgba(255,255,255,.64);
  --fk-line-k:.7;
  --fk-veil-rgb:21,22,28; --fk-scrim-rgb:10,10,14;
  --fk-sheet-1-rgb:31,32,41; --fk-sheet-2-rgb:21,22,28;
  --fk-toast-rgb:255,255,255; --fk-toast-ink:#15161C; --fk-toast-accent:#5A3BE0;
  --fk-dock-bg:rgba(31,32,41,.94); --fk-chip-bg:#1F2029;
  --glass:linear-gradient(#1F2029, #1F2029); --glass-blur:none; --glass-solid:#1F2029;
  --fk-shell-bg:radial-gradient(70% 28% at 104% -6%, rgba(124,92,255,.24), transparent 62%),
                radial-gradient(60% 24% at -10% 72%, rgba(61,214,245,.06), transparent 66%), #15161C;
  --fk-shell-blend:normal; --fk-theme-color:#15161C;
  --font-ui:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --tp-r-card:22px; --tp-r-tile:16px; --tp-r-btn:16px; --tp-r-input:14px; --tp-r-dock:24px; --tp-btn-h:54px;
  --tp-head-w:600; --tp-head-track:-.025em;
  --tp-ease:cubic-bezier(.22,1,.36,1); --tp-stagger:.09s; --tp-rise:12px; --tp-rise-dur:.7s;
  --tp-gauge-a:#A893FF; --tp-gauge-b:#7C5CFF;
  --sig-step-on-bg:#6C4CF5; --sig-step-on-ink:#FFFFFF; --sig-step-off-bg:#1F2029;
  --tp-hero-grad:radial-gradient(90% 80% at 100% 0%, rgba(124,92,255,.40), transparent 60%), linear-gradient(160deg, #262842, #15161C);
}

/* ---------- 1i. CHANH SÁNG (sáng) ---------- */
:root[data-theme="lime"]{
  --bg:#FFFFFF;
  --navy:#0B0B0C; --navy-2:#1C1C1F; --navy-3:#2C2C31; --navy-4:#4A4A52;
  --mint:#4D6600; --mint-2:#3D5200; --mint-3:#8DB000;                 /* ô-liu cho CHỮ dữ liệu (6,5:1 trắng) */
  --coral:#DFFF4F; --coral-2:#4D6600; --coral-3:#C8EB2A; --coral-4:#ECFF94; --coral-hot:#D92D20;   /* chanh: mảng CTA/chip (chữ đen) */
  --navy-rgb:11,11,12; --mint-rgb:77,102,0; --coral-rgb:223,255,79; --coral-2-rgb:77,102,0;
  --on-mint:#FFFFFF; --on-coral:#0B0B0C;                               /* 6,5:1 · 17:1 */
  --fk-ink:#0B0B0C; --fk-ink-rgb:11,11,12;
  --fk-ov-rgb:11,11,12; --fk-ov-k:.5; --fk-line-k:.7; --fk-text-boost:.25;
  --fk-veil-rgb:255,255,255; --fk-scrim-rgb:11,11,12;
  --fk-sheet-1-rgb:255,255,255; --fk-sheet-2-rgb:245,246,242;
  --fk-toast-rgb:11,11,12; --fk-toast-ink:#FFFFFF; --fk-toast-accent:#DFFF4F;
  --fk-dock-bg:rgba(11,11,12,.94); --fk-chip-bg:#F3F4EF;
  --text:#0B0B0C; --text-muted:rgba(11,11,12,.72); --text-dim:rgba(11,11,12,.64);   /* 7,3:1 · 5,6:1 trên thẻ #F3F4EF */
  --surface:rgba(11,11,12,.04); --surface-2:rgba(11,11,12,.06); --surface-3:rgba(11,11,12,.09);
  --border:rgba(11,11,12,.10); --border-strong:rgba(11,11,12,.18);
  --glass:linear-gradient(#F3F4EF, #F3F4EF); --glass-blur:none; --glass-solid:#F3F4EF; --shadow-card:none;
  --fk-shell-bg:radial-gradient(70% 22% at 104% -4%, rgba(223,255,79,.40), transparent 62%), #FFFFFF;
  --fk-shell-blend:normal; --fk-theme-color:#FFFFFF;
  --font-ui:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head:'Inter Tight', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tp-r-card:28px; --tp-r-tile:22px; --tp-r-btn:999px; --tp-r-input:16px; --tp-r-dock:30px; --tp-btn-h:56px;
  --tp-head-w:700; --tp-head-track:-.035em;
  --tp-ease:cubic-bezier(.22,1,.36,1); --tp-stagger:.08s; --tp-rise:14px; --tp-rise-dur:.7s;
  --tp-gauge-a:#ECFF94; --tp-gauge-b:#B8E000;
  --sig-step-on-bg:#DFFF4F; --sig-step-on-ink:#0B0B0C; --sig-step-off-bg:#F3F4EF;
  --tp-hero-grad:radial-gradient(90% 80% at 100% 0%, rgba(223,255,79,.30), transparent 60%), linear-gradient(160deg, #2C2C31, #0B0B0C);
}

/* "Đảo tối" (ảnh/video, màn chào) của 2 gói sáng mới → bảng màu của gói thay vì teal/coral mặc định (themes.css §4) */
html.fk-light[data-theme="ember"] :is(.hero, #screen-workout > .topbar.transparent, .mg-card, .wl, #auth.wl-mode, .auth-hero,
  #screen-ptprofile, .vplayer, .clip-thumb, .vthumb, .vp-item, .ld-media, .fk-dark-island){
  --mint:#FF8A3D; --mint-2:#FFB38A; --mint-3:#FF6A2B; --mint-rgb:255,138,61; --success:#FF8A3D; --gold:#FF8A3D;
  --coral:#FF6A2B; --coral-rgb:255,106,43; --coral-2:#FFB38A; --coral-2-rgb:255,179,138; --coral-4:#FF8A3D;
  --primary:#FF6A2B; --primary-soft:#FFB38A; --warn:#FFB38A;
  --on-mint:#1B0F0A; --on-coral:#1B0F0A; --fk-veil-rgb:27,20,16; --fk-scrim-rgb:27,20,16;
}
html.fk-light[data-theme="lime"] :is(.hero, #screen-workout > .topbar.transparent, .mg-card, .wl, #auth.wl-mode, .auth-hero,
  #screen-ptprofile, .vplayer, .clip-thumb, .vthumb, .vp-item, .ld-media, .fk-dark-island){
  --mint:#DFFF4F; --mint-2:#ECFF94; --mint-3:#C8EB2A; --mint-rgb:223,255,79; --success:#DFFF4F; --gold:#DFFF4F;
  --coral:#DFFF4F; --coral-rgb:223,255,79; --coral-2:#ECFF94; --coral-2-rgb:236,255,148; --coral-4:#ECFF94;
  --primary:#DFFF4F; --primary-soft:#ECFF94; --warn:#ECFF94;
  --on-mint:#0B0B0C; --on-coral:#0B0B0C; --fk-veil-rgb:11,11,12; --fk-scrim-rgb:11,11,12;
}
html.fk-light[data-theme="ember"] .hero{ background-color:#2A1D16; }
html.fk-light[data-theme="lime"] .hero{ background-color:#1C1C1F; }
html.fk-light[data-theme="ember"] :is(#screen-ptprofile, #auth.wl-mode){ background:#1B1410; }
html.fk-light[data-theme="lime"] :is(#screen-ptprofile, #auth.wl-mode){ background:#0B0B0C; }

/* =========================================================================
   9. CAM NĂNG LƯỢNG — thẻ trắng bo lớn, CTA viên thuốc cam đổ bóng cam mềm, số liệu lớn đậm có phần nhấn cam
   ========================================================================= */
html[data-theme="ember"] #app-shell::before{ opacity:0; }
html[data-theme="ember"] :is(.card, .stat-box, .list-item, .metric, .entry-tile, .quick-row button, .nu-gauge-card, .nu-meal, .nu-water,
  .nu-recipe, .plan-card, .role-card, .choice-card, .pb-opt, .sig-gauge-card){
  -webkit-backdrop-filter:none; backdrop-filter:none; border-color:transparent !important; }
html.fk-light[data-theme="ember"] :is(.card, .nu-gauge-card, .nu-meal, .nu-water, .home-hero, .nu-plan, .plan-card, .role-card, .sig-gauge-card){ box-shadow:var(--shadow-card) !important; }
html[data-theme="ember"] .card::after{ display:none; }
html[data-theme="ember"] .card :is(.stat-box, .metric, .list-item, .link-row){ background:#F6F6F4 !important; }
html[data-theme="ember"] .bottom-nav{ border:1px solid rgba(27,27,31,.06) !important; box-shadow:0 10px 30px rgba(27,27,31,.10); }
html[data-theme="ember"] .btn-block.btn-primary{ font-weight:700; letter-spacing:-.005em; }
html[data-theme="ember"] :is(.stat-box .num, .ring-center .num, .metric b, .sig-gauge-c b, .sig-mac b){ font-family:var(--font-head); font-weight:800; letter-spacing:-.035em; }
html[data-theme="ember"] :is(.stat-box .num, .metric b, .sig-mac b) :is(small, span){ color:var(--mint) !important; font-weight:700; }   /* đơn vị = phần nhấn cam */
html[data-theme="ember"] .home-greet h2 span{ color:var(--mint) !important; font-weight:800; }
html[data-theme="ember"] .pill:not(.active):not(.hot){ background:#FFFFFF !important; border-color:rgba(27,27,31,.08) !important; color:var(--text) !important; }
html[data-theme="ember"] .wd.today{ background:linear-gradient(135deg, #FF6A2B, #FF8A3D) !important; border-color:transparent !important; box-shadow:0 8px 18px rgba(255,106,43,.28) !important; }
html[data-theme="ember"] .wd.today :is(small, b){ color:#1B0F0A !important; }
html[data-theme="ember"] .streak-chip{ background:#FFF1E8 !important; border-color:rgba(255,106,43,.25) !important; }
html[data-theme="ember"] .streak-chip .material-symbols-rounded{ color:#E8501A; }

/* =========================================================================
   10. VOLT — thẻ #1A1A1C phẳng, tiêu đề IN HOA đậm 2 dòng (dòng 2 chanh), CTA viên dài có nút tròn mũi tên
   ========================================================================= */
html[data-theme="volt"] #app-shell::before{ opacity:0; }
html[data-theme="volt"] .topbar{ background:linear-gradient(180deg, #0B0B0C 34%, rgba(11,11,12,0)) !important; }
html[data-theme="volt"] :is(.card, .stat-box, .list-item, .metric, .entry-tile, .quick-row button, .wd, .nu-gauge-card, .nu-meal,
  .nu-water, .nu-recipe, .plan-card, .role-card, .streak-chip, .date-chip, .choice-card, .pb-opt, .sig-gauge-card){
  -webkit-backdrop-filter:none; backdrop-filter:none; }
html[data-theme="volt"] .card::after{ display:none; }
html[data-theme="volt"] :is(.card, .nu-gauge-card, .nu-meal, .nu-water, .sig-gauge-card){ background:#1A1A1C !important; border-color:rgba(255,255,255,.06) !important; }
html[data-theme="volt"] .home-hero{ background-color:#141416 !important; }
/* Tiêu đề in hoa đậm (tiếng Việt: line-height ≥ 1,08 để dấu chồng không chạm dòng trên) */
html[data-theme="volt"] :is(h1, h2, .headline, .hero-title){ font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:1.08; }
html[data-theme="volt"] #home-content .home-greet h2{ font-size:30px !important; }
html[data-theme="volt"] .home-greet h2 span{ color:#D4FF3A !important; }                       /* dòng 2 màu chanh */
html[data-theme="volt"] .hero-title :is(span, em, b):last-child{ color:#D4FF3A; }
html[data-theme="volt"] .pill:not(.active):not(.hot){ background:#1A1A1C !important; border-color:rgba(255,255,255,.10) !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
html[data-theme="volt"] .btn-outline{ background:#1A1A1C !important; border-color:rgba(255,255,255,.14) !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
html[data-theme="volt"] :is(.field input, .field select, .field textarea, .search-box, .fb-input){ background:#1A1A1C !important; border:1px solid rgba(255,255,255,.10) !important; }
html[data-theme="volt"] .sheet{ background:#111113 !important; -webkit-backdrop-filter:none; backdrop-filter:none; border-top:1px solid rgba(255,255,255,.08); }
html[data-theme="volt"] .wd.today{ background:#D4FF3A !important; border-color:#D4FF3A !important; }
html[data-theme="volt"] .wd.today :is(small, b){ color:#0B0B0C !important; }

/* CTA viên dài + nút tròn mũi tên (Volt, Chanh sáng): nút khối chính có ô tròn tối 44 px bên phải */
html:is([data-theme="volt"], [data-theme="lime"]) .btn-block.btn-primary{ position:relative; padding-right:62px; justify-content:flex-start; padding-left:24px; min-height:56px; }
html:is([data-theme="volt"], [data-theme="lime"]) .btn-block.btn-primary::after{
  content:""; position:absolute; right:6px; top:50%; width:44px; height:44px; margin-top:-22px; border-radius:50%; pointer-events:none;
  background:#0B0B0C url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17L17 7M9 7h8v8' fill='none' stroke='%23DFFF4F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 20px no-repeat;
  transition:transform .35s var(--tp-ease, ease); }
html[data-theme="volt"] .btn-block.btn-primary::after{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17L17 7M9 7h8v8' fill='none' stroke='%23D4FF3A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
html:is([data-theme="volt"], [data-theme="lime"]) .btn-block.btn-primary:is(:hover, :focus-visible)::after{ transform:rotate(45deg); }

/* =========================================================================
   11. TÍM ĐÊM PRO — thẻ #1F2029 phẳng, nút tím, vòng/thanh chỉ số nhiều màu (tím · vàng · xanh)
   ========================================================================= */
html[data-theme="violet"] #app-shell::before{ opacity:0; }
html[data-theme="violet"] :is(.card, .stat-box, .list-item, .metric, .entry-tile, .quick-row button, .wd, .nu-gauge-card, .nu-meal,
  .nu-water, .nu-recipe, .plan-card, .role-card, .streak-chip, .choice-card, .pb-opt, .sig-gauge-card){
  -webkit-backdrop-filter:none; backdrop-filter:none; }
html[data-theme="violet"] .card::after{ display:none; }
html[data-theme="violet"] :is(.card, .nu-gauge-card, .nu-meal, .nu-water, .sig-gauge-card){ background:#1F2029 !important; border-color:rgba(255,255,255,.06) !important; }
html[data-theme="violet"] .card :is(.stat-box, .metric, .list-item){ background:#262735 !important; border-color:transparent !important; }
html[data-theme="violet"] .home-hero{ background-color:#1F2029 !important; }
html[data-theme="violet"] .pill:not(.active):not(.hot){ background:#1F2029 !important; border-color:rgba(255,255,255,.08) !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
html[data-theme="violet"] .sheet{ background:#1B1C24 !important; -webkit-backdrop-filter:none; backdrop-filter:none; border-top:1px solid rgba(255,255,255,.08); }
html[data-theme="violet"] .wd.today{ background:#6C4CF5 !important; border-color:#6C4CF5 !important; }
html[data-theme="violet"] .wd.today :is(small, b){ color:#FFFFFF !important; }
/* 3 màu chỉ số: thanh macro / thẻ chỉ số / vòng trong Dinh dưỡng */
html[data-theme="violet"] .metric:nth-of-type(3n+1) b{ color:#A893FF; }
html[data-theme="violet"] .metric:nth-of-type(3n+2) b{ color:#FFC83D; }
html[data-theme="violet"] .metric:nth-of-type(3n) b{ color:#3DD6F5; }
html[data-theme="violet"] .nu-bar i:nth-child(1){ background:#7C5CFF !important; }
html[data-theme="violet"] .nu-bar i:nth-child(2){ background:#FFC83D !important; }
html[data-theme="violet"] .nu-bar i:nth-child(3){ background:#3DD6F5 !important; }
html[data-theme="violet"] .sig-gauge-card{ background:radial-gradient(80% 60% at 100% 0%, rgba(124,92,255,.18), transparent 60%), #1F2029 !important; }

/* =========================================================================
   12. CHANH SÁNG — nền trắng, thẻ xám rất nhạt bo 28, chip/CTA chanh chữ đen, thẻ ảnh bo lớn có nút mũi tên tròn, dock đen
   ========================================================================= */
html[data-theme="lime"] #app-shell::before{ opacity:0; }
html[data-theme="lime"] :is(.card, .stat-box, .list-item, .metric, .entry-tile, .quick-row button, .nu-gauge-card, .nu-meal, .nu-water,
  .nu-recipe, .plan-card, .role-card, .choice-card, .pb-opt, .sig-gauge-card){
  -webkit-backdrop-filter:none; backdrop-filter:none; border-color:transparent !important; }
html.fk-light[data-theme="lime"] :is(.card, .nu-gauge-card, .nu-meal, .nu-water, .home-hero, .nu-plan, .plan-card, .role-card,
  .metric, .entry-tile, .stat-box, .list-item, .wd, .quick-row button, .streak-chip, .nu-recipe, .tpl-card, .atp-day, .icon-btn){ box-shadow:none !important; }
html[data-theme="lime"] .card::after{ display:none; }
html[data-theme="lime"] .card :is(.stat-box, .metric, .list-item, .link-row){ background:#FFFFFF !important; }
/* dock đen chữ trắng, tab đang chọn = chấm chanh chữ đen */
html[data-theme="lime"] .bottom-nav{ border:none !important; box-shadow:0 12px 30px rgba(11,11,12,.22); }
html[data-theme="lime"] .bottom-nav .nav-item{ color:rgba(255,255,255,.74); }
html[data-theme="lime"] .bottom-nav .nav-item.active{ color:#FFFFFF; }
/* thẻ ảnh bo lớn + nút mũi tên tròn */
html[data-theme="lime"] :is(.home-hero, .hero, .mg-card, .tpl-card){ border-radius:28px; }
html[data-theme="lime"] .home-hero{ position:relative; }
html[data-theme="lime"] .home-hero::after{
  content:""; position:absolute; right:14px; top:14px; left:auto; bottom:auto; width:44px; height:44px; border-radius:50%; pointer-events:none; z-index:2;
  animation:none !important; transform:none; opacity:1;   /* thay vệt sáng (sheen) của style.css bằng nút mũi tên tròn */
  background:#DFFF4F url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17L17 7M9 7h8v8' fill='none' stroke='%230B0B0C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 20px no-repeat; }
html[data-theme="lime"] .home-hero .home-hero-ring{ margin-top:52px; }
html[data-theme="lime"] .pill:not(.active):not(.hot){ background:#F3F4EF !important; border-color:transparent !important; color:#0B0B0C !important; }
html[data-theme="lime"] .wd.today{ background:#0B0B0C !important; border-color:#0B0B0C !important; }
html[data-theme="lime"] .wd.today :is(small, b){ color:#FFFFFF !important; }
html[data-theme="lime"] .wd.done i{ background:#0B0B0C !important; color:#DFFF4F !important; }
html[data-theme="lime"] .streak-chip{ background:#DFFF4F !important; border-color:transparent !important; color:#0B0B0C !important; }
html[data-theme="lime"] .streak-chip :is(.material-symbols-rounded, b, small){ color:#0B0B0C !important; }
html[data-theme="lime"] .btn-outline{ background:#FFFFFF !important; border-color:rgba(11,11,12,.16) !important; }

/* =========================================================================
   13. 4 GÓI MỚI — máy yếu / giảm chuyển động
   ========================================================================= */
html.lowfx:is([data-theme="ember"], [data-theme="volt"], [data-theme="violet"], [data-theme="lime"]) :is(.card, .nu-gauge-card, .sig-gauge-card, .home-hero, .bottom-nav){
  box-shadow:none !important; }
html.lowfx[data-theme="ember"] .wd.today{ box-shadow:none !important; }
html.lowfx[data-theme="violet"] .sig-gauge-card{ background:#1F2029 !important; }
@media (prefers-reduced-motion: reduce){
  html:is([data-theme="volt"], [data-theme="lime"]) .btn-block.btn-primary::after{ transition:none; }
  html:is([data-theme="volt"], [data-theme="lime"]) .btn-block.btn-primary:is(:hover, :focus-visible)::after{ transform:none; }
}