/* Điện thoại mẫu trên trang chủ: MỘT khung iPhone dùng chung cho mọi sản phẩm (scripts/phones/lib.mjs)
   + giao diện từng app, dựng lại từ code thật của app (màu, cỡ chữ, khoảng cách lấy đúng số trong code).
   Mọi số đo bên trong máy là điểm (pt) thật của iPhone 390×844; cả máy được thu nhỏ bằng --k.
   Không có style nội tuyến (CSP style-src 'self'); màu riêng từng dòng do phone.js đặt qua CSSOM. */

/* ═════════════ Khung máy ═════════════ */
@font-face { font-family: 'io'; src: url('/m/io.woff') format('woff'); font-display: block; }
@font-face { font-family: 'fe'; src: url('/m/fe.woff') format('woff'); font-display: block; }
@font-face { font-family: 'mi'; src: url('/m/mi.woff') format('woff'); font-display: block; }
@font-face { font-family: 'mc'; src: url('/m/mc.woff') format('woff'); font-display: block; }

.phf { --k: 0.72; position: relative; flex: none; width: calc(422px * var(--k)); height: calc(876px * var(--k)); -webkit-tap-highlight-color: transparent; }
.phf.land { --k: 0.62; width: calc(876px * var(--k)); height: calc(422px * var(--k)); }
.ph-dev {
  position: absolute; left: 0; top: 0; width: 422px; height: 876px; padding: 16px; border-radius: 70px;
  transform: scale(var(--k)); transform-origin: 0 0;
  background: linear-gradient(150deg, #3a3a3f 0%, #1c1c1f 22%, #121214 60%, #2a2a2e 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 0 0 6px #0b0b0c, 0 60px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.ph-dev::before, .ph-dev::after { content: ''; position: absolute; width: 4px; border-radius: 2px; background: #2a2a2e; }
.ph-dev::before { left: -3px; top: 190px; height: 64px; box-shadow: 0 84px 0 #2a2a2e; }
.ph-dev::after { right: -3px; top: 240px; height: 100px; }
.phf.land .ph-dev { width: 876px; height: 422px; }
.phf.land .ph-dev::before { left: 190px; top: -3px; width: 64px; height: 4px; box-shadow: 84px 0 0 #2a2a2e; }
.phf.land .ph-dev::after { left: 240px; right: auto; top: auto; bottom: -3px; width: 100px; height: 4px; }

.ph-scr { position: relative; width: 390px; height: 844px; border-radius: 54px; overflow: hidden; isolation: isolate; background: var(--bg, #000); color: var(--tx, #fff); font: 400 16px/1.3 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; text-align: left; }
.phf.land .ph-scr { width: 844px; height: 390px; }
.ph-scr * { box-sizing: border-box; }
:where(.ph-scr) :is(p, h4, ul, figure) { margin: 0; padding: 0; }
:where(.ph-scr) ul { list-style: none; }
:where(.ph-scr) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; }
:where(.ph-scr) input { font: inherit; color: inherit; background: none; border: 0; outline: 0; padding: 0; min-width: 0; }
.ph-scr button:focus-visible, .ph-scr input:focus-visible { outline: 3px solid var(--focus, #3b82f6); outline-offset: 2px; }
.ph-scr [hidden] { display: none !important; }
.ph-scr .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ph-scr .i { font-style: normal; font-weight: normal; line-height: 1; display: inline-block; flex: none; speak: never; -webkit-font-smoothing: antialiased; }
.i.io { font-family: 'io'; } .i.fe { font-family: 'fe'; } .i.mi { font-family: 'mi'; } .i.mc { font-family: 'mc'; }

.scr { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.scr::-webkit-scrollbar { display: none; }
.ph-nav { position: absolute; inset: auto 0 0; z-index: 30; pointer-events: none; }
.ph-nav > * { pointer-events: auto; }
.ph-scr.nonav .ph-nav { display: none; }

/* Thanh trạng thái + Dynamic Island + thanh Home */
.ph-island { position: absolute; z-index: 60; top: 11px; left: 50%; width: 126px; height: 37px; margin-left: -63px; border-radius: 20px; background: #000; pointer-events: none; }
.phf.land .ph-island { top: 50%; left: 11px; width: 37px; height: 126px; margin: -63px 0 0; }
.sb { position: absolute; z-index: 55; top: 0; left: 0; right: 0; height: 54px; padding: 0 30px 0 0; display: flex; align-items: center; justify-content: space-between; color: #000; pointer-events: none; transition: color 0.2s; }
.ph-scr[data-sbm='light'] .sb { color: #fff; }
.sb-t { width: 140px; padding-top: 5px; text-align: center; font: 600 17px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; letter-spacing: -0.2px; }
.sb-r { display: flex; align-items: center; gap: 6px; padding-top: 5px; }
.sb-sig { width: 18px; height: 12px; background: linear-gradient(to right, currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px, transparent 8px 10px, currentColor 10px 13px, transparent 13px 15px, currentColor 15px 18px); clip-path: polygon(0 75%, 17% 75%, 17% 50%, 44% 50%, 44% 25%, 72% 25%, 72% 0, 100% 0, 100% 100%, 0 100%); }
.sb-wifi { width: 17px; height: 12px; background: currentColor; clip-path: path('M8.5 12 5.6 8.9a4.2 4.2 0 0 1 5.8 0zM3.5 6.8a7.2 7.2 0 0 1 10 0l-1.5 1.5a5.1 5.1 0 0 0-7 0zM1.4 4.6a10.2 10.2 0 0 1 14.2 0l1.4-1.5a12.3 12.3 0 0 0-17 0z'); }
.sb-bat { position: relative; width: 27px; height: 13px; border: 1.3px solid currentColor; border-radius: 4px; opacity: 0.95; }
.sb-bat::before { content: ''; position: absolute; inset: 1.5px 4px 1.5px 1.5px; border-radius: 1.5px; background: currentColor; }
.sb-bat::after { content: ''; position: absolute; right: -4px; top: 3.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; opacity: 0.6; }
.ph-home { position: absolute; z-index: 55; bottom: 8px; left: 50%; width: 139px; height: 5px; margin-left: -70px; border-radius: 3px; background: #000; pointer-events: none; }
.ph-scr[data-sbm='light'] .ph-home { background: #fff; }
.phf.land .ph-home { width: 200px; margin-left: -100px; background: rgba(255, 255, 255, 0.8); }

.ph-toast { position: absolute; z-index: 70; left: 50%; bottom: 130px; width: max-content; max-width: 300px; padding: 11px 18px; border-radius: 999px; background: rgba(20, 20, 22, 0.92); color: #fff; font: 500 15px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; text-align: center; opacity: 0; transform: translate(-50%, 10px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
.ph-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Vào màn */
@media (prefers-reduced-motion: no-preference) {
  .scr.enter { animation: ph-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .scr.enter.back { animation-name: ph-back; }
  .pop { animation: ph-pop 0.34s cubic-bezier(0.2, 0.8, 0.2, 1.2) both; }
  @keyframes ph-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
  @keyframes ph-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
  @keyframes ph-pop { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: none; } }
}

/* Cỡ máy theo màn hình trang */
@media (max-width: 1100px) { .phf.land { --k: 0.56; } }
@media (max-width: 820px) { .phf.land { --k: 0.5; } }
@media (max-width: 600px) { .phf { --k: 0.78; } .phf.land { --k: 0.38; } }
@media (max-width: 370px) { .phf { --k: 0.7; } .phf.land { --k: 0.34; } }
@media (max-width: 330px) { .phf { --k: 0.62; } .phf.land { --k: 0.3; } }

/* ═════════════ Nhà Mình — theme sáng thật (src/helpers/theme.ts) ═════════════ */
.app-nhaminh { --bg: #fff8f0; --surface: #fff; --soft: #ffe5d4; --tx: #3a2a23; --sub: #6e5a4f; --line: #f0e2d4; --accent: #ff6b6b; --active: #ff8c42; --inactive: rgba(58, 42, 35, 0.4); --activebg: #ffd166; --ok: #6bcb77; --err: #dc2626; --focus: #ff8c42; }
.nm-pac { font-family: 'Pacifico', cursive; font-weight: 400; }
.nm-av { display: inline-grid; place-items: center; flex: none; width: 100%; height: 100%; border-radius: 50%; color: #fff; font-weight: 700; font-size: 15px; letter-spacing: -0.3px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.nm-av-a { background: linear-gradient(140deg, #ffb37a, #ff7a59); } .nm-av-b { background: linear-gradient(140deg, #f7a1c4, #d9668f); }
.nm-av-c { background: linear-gradient(140deg, #8ec5ff, #4c7fd6); } .nm-av-d { background: linear-gradient(140deg, #c3a6ff, #8a6ae0); }
.nm-av-e { background: linear-gradient(140deg, #8fe0b0, #3fa36f); } .nm-av-f { background: linear-gradient(140deg, #c9b39a, #8b6f55); }
.nm-av-g { background: linear-gradient(140deg, #f3c78b, #c98f45); } .nm-av-h { background: linear-gradient(140deg, #9ad7df, #3c9aa8); }
.nm-av40 { width: 40px; height: 40px; } .nm-av46 { width: 46px; height: 46px; font-size: 16px; } .nm-av56 { width: 56px; height: 56px; font-size: 18px; } .nm-av96 { width: 96px; height: 96px; font-size: 30px; }

/* Thanh dưới: kính nổi, 4 icon SF Symbol, viên sáng trượt dưới mục đang mở (LiquidGlassNavBar) */
.nm-bar { position: absolute; left: 20px; right: 20px; bottom: 24px; height: 56px; padding: 0 6px; border-radius: 28px; display: flex; align-items: center; background: linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5) 55%, rgba(255, 255, 255, 0.66)); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(15, 23, 42, 0.1), 0 10px 26px -8px rgba(58, 42, 35, 0.28); }
.nm-pill { position: absolute; top: 6px; left: 6px; width: calc((100% - 12px) / 4); height: 44px; border-radius: 22px; background: linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.6)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 3px 10px -3px rgba(58, 42, 35, 0.25); transition: transform 0.38s cubic-bezier(0.3, 1.3, 0.5, 1); }
.ph-scr[data-nav='cal'] .nm-pill { transform: translateX(100%); }
.ph-scr[data-nav='tree'] .nm-pill { transform: translateX(200%); }
.ph-scr[data-nav='me'] .nm-pill { transform: translateX(300%); }
.nm-tab { position: relative; flex: 1; height: 100%; display: grid; place-items: center; color: var(--inactive); transition: color 0.2s, transform 0.25s; }
.nm-tab.on { color: var(--active); transform: scale(1.08); }
.nm-sf { width: 24px; height: 24px; }

/* Bảng tin */
.nm-feed { padding-bottom: 110px; }
.nm-cover { position: relative; height: 220px; overflow: hidden; background: var(--soft); }
.nm-banner { position: absolute; inset: 0; background: radial-gradient(60px 60px at 74% 34%, #fff3c4 0 40%, rgba(255, 243, 196, 0) 70%), radial-gradient(260px 90px at 20% 108%, #7a9a5a 0 60%, transparent 61%), radial-gradient(300px 110px at 85% 118%, #5f8048 0 60%, transparent 61%), linear-gradient(180deg, #ffb26b 0%, #ff8c69 45%, #d66f86 100%); }
.nm-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0.72)); }
.nm-cover-id { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; color: #fff; }
.nm-fav { width: 72px; height: 72px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 36px; color: #fff; background: linear-gradient(140deg, #ffd166, #ff8c42 60%, #ff6b6b); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); }
.nm-cover-id b { display: block; font-size: 24px; line-height: 1.5; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.nm-cover-id small { display: block; margin-top: -2px; font-size: 13px; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.nm-top { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: 102px; padding: 54px 10px 0; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.nm-top > * { pointer-events: auto; }
.nm-sp { flex: 1; pointer-events: none; }
.nm-circ { position: relative; width: 36px; height: 36px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.62); color: var(--tx); font-size: 22px; }
.nm-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 9px; background: var(--err); color: #fff; font: 700 10px/16px -apple-system, sans-serif; text-align: center; }
.nm-stories { display: flex; margin: 12px 0 15px; padding: 0 0 0 0; overflow: hidden; }
.nm-story { flex: none; width: 88px; display: grid; justify-items: center; margin: 8px 0; }
.nm-story small { max-width: 70px; margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--tx); }
.nm-new { width: 68px; height: 68px; margin: 2px; border-radius: 34px; border: 2px dashed var(--line); background: var(--soft); display: grid; place-items: center; font-size: 32px; color: var(--tx); }
.nm-ring { width: 72px; height: 72px; padding: 3px; border-radius: 36px; background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.nm-ring.seen { background: linear-gradient(135deg, #c0c0c0, #a8a8a8); }
.nm-ring-in { display: block; width: 100%; height: 100%; padding: 2px; border-radius: 33px; background: #fff; }
.nm-ring .nm-av { font-size: 18px; }
.nm-post { margin: 0 12px 10px; border-radius: 16px; overflow: hidden; background: var(--surface); }
.nm-post-h { display: flex; align-items: center; padding: 12px 14px; gap: 12px; }
.nm-post-n { flex: 1; min-width: 0; }
.nm-post-n b { display: block; font-size: 16px; font-weight: 600; }
.nm-post-n small { display: block; margin-top: 1px; font-size: 14px; color: var(--sub); }
.nm-post-m { font-size: 20px; color: var(--sub); }
.nm-post-t { padding: 0 14px 10px; font-size: 16px; line-height: 22px; }
.nm-photo { height: 293px; }
.nm-photo-a { background: radial-gradient(70px 70px at 18% 22%, rgba(255, 214, 140, 0.9), rgba(255, 214, 140, 0) 70%), radial-gradient(46px 46px at 40% 14%, rgba(255, 190, 120, 0.75), rgba(255, 190, 120, 0) 70%), radial-gradient(90px 90px at 80% 20%, rgba(255, 226, 170, 0.85), rgba(255, 226, 170, 0) 70%), radial-gradient(40px 40px at 62% 30%, rgba(255, 160, 100, 0.7), rgba(255, 160, 100, 0) 70%), radial-gradient(300px 120px at 50% 105%, #8a4e2c 0 55%, transparent 70%), linear-gradient(180deg, #3d2418, #6b3b22 60%, #a9643a); }
.nm-photo-x { background: radial-gradient(54px 40px at 30% 46%, #fff 0 60%, rgba(255, 255, 255, 0) 62%), radial-gradient(34px 26px at 30% 45%, #e8a24f 0 60%, transparent 62%), radial-gradient(50px 38px at 68% 40%, #fff 0 60%, transparent 62%), radial-gradient(30px 22px at 68% 40%, #7cb35a 0 60%, transparent 62%), radial-gradient(46px 34px at 52% 72%, #fff 0 60%, transparent 62%), radial-gradient(28px 20px at 52% 72%, #d9534f 0 60%, transparent 62%), radial-gradient(150px 120px at 50% 58%, #b8763f 0 70%, transparent 72%), linear-gradient(160deg, #6b4632, #3e2a20); }
.nm-photo-b { background: radial-gradient(40px 40px at 78% 30%, #fff6d8 0 45%, rgba(255, 246, 216, 0) 75%), radial-gradient(320px 120px at 15% 112%, #6d8f4e 0 60%, transparent 61%), radial-gradient(360px 140px at 90% 120%, #4f7040 0 60%, transparent 61%), radial-gradient(240px 80px at 50% 95%, #8daa5f 0 60%, transparent 61%), linear-gradient(180deg, #9cc8e8 0%, #f6d7a7 70%, #f0b98a 100%); }
.nm-acts { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
.nm-acts-l { display: flex; gap: 4px; }
.nm-act { display: flex; align-items: center; gap: 5px; padding: 8px; font-size: 28px; color: var(--tx); }
.nm-act b { font-size: 14px; font-weight: 600; }
.nm-act .onl, .nm-act.on .off { display: none; }
.nm-act.on .onl { display: inline-block; }
.nm-like.on .onl { color: #ff3040; }
.nm-act:last-child { margin-right: -8px; }

/* Lịch sự kiện */
.nm-cal { padding: 66px 0 130px; }
.nm-ch1, .nm-ch2 { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.nm-brand { font-size: 22px; line-height: 1.4; color: var(--accent); }
.nm-ch1r { display: flex; align-items: center; gap: 12px; }
.nm-acc { font-size: 20px; color: var(--accent); }
.nm-sync { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; color: var(--ok); }
.nm-sync i { width: 8px; height: 8px; border-radius: 4px; background: var(--ok); }
.nm-ch2 { margin-top: 10px; }
.nm-ch2 b { font-size: 26px; font-weight: 800; }
.nm-ch2 small { margin-left: 8px; font-size: 17px; color: var(--sub); }
.nm-navb { display: flex; gap: 6px; }
.nm-nb { width: 38px; height: 38px; border-radius: 19px; display: grid; place-items: center; background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); font-size: 18px; }
.nm-seg { display: flex; gap: 4px; margin: 10px 20px 0; padding: 4px; border-radius: 999px; background: var(--soft); }
.nm-seg button { flex: 1; padding: 8px 2px; border-radius: 999px; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--sub); white-space: nowrap; }
.nm-seg button.on { background: var(--surface); color: var(--accent); box-shadow: 0 2px 6px rgba(255, 107, 107, 0.15); }
.nm-chips { display: flex; gap: 9px; margin-top: 10px; padding: 4px 16px 8px; overflow-x: auto; scrollbar-width: none; }
.nm-chips::-webkit-scrollbar { display: none; }
.nm-chip { flex: none; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--sub); }
.nm-chip .i { font-size: 17px; }
.nm-chip.on { color: #fff; }
.nm-chip.on .i { color: #fff !important; }
.nm-month { margin: 10px 16px 0; padding: 4px 6px 10px; border-radius: 28px; border: 1px solid var(--line); background: var(--surface); }
.nm-mh { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 8px; }
.nm-mh b { font-size: 16px; font-weight: 800; }
.nm-mh .i { font-size: 22px; color: var(--accent); }
.nm-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; text-align: center; }
.nm-grid small { padding: 4px 0 6px; font-size: 13px; font-weight: 700; color: var(--sub); }
.nm-d { position: relative; justify-self: center; width: 34px; height: 34px; border-radius: 17px; display: grid; place-items: center; font-size: 16px; font-weight: 600; color: var(--tx); }
.nm-d.x { color: rgba(58, 42, 35, 0.4); }
.nm-d.today { color: var(--accent); }
.nm-d.has::after { content: ''; position: absolute; bottom: 2px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 2px; background: var(--accent); }
.nm-d.on { background: var(--accent); color: #fff; }
.nm-d.on::after { background: #fff; }
.nm-agenda { margin-top: 8px; padding: 18px 18px 20px; border-radius: 26px 26px 0 0; }
.nm-ag-h { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.nm-ag-h b { display: block; font-size: 17px; font-weight: 800; }
.nm-ag-h small { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--sub); }
.nm-ag-h > small { font-weight: 800; margin: 0; }
.nm-ag-l { display: grid; gap: 10px; }
.nm-ag-e { padding: 18px 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--sub); }
.nm-ev { display: flex; align-items: stretch; gap: 10px; width: 100%; padding: 12px; border-radius: 22px; background: var(--surface); box-shadow: 0 4px 8px rgba(255, 107, 107, 0.1); }
.nm-ev-t { width: 52px; display: flex; flex-direction: column; justify-content: center; }
.nm-ev-t b { font-size: 13px; font-weight: 700; }
.nm-ev-t small { font-size: 12px; font-weight: 700; color: var(--sub); }
.nm-ev-bar { width: 4px; border-radius: 3px; }
.nm-ev-ic { align-self: center; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; color: #fff; }
.nm-ev-m { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.nm-ev-m > b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; font-weight: 800; }
.nm-ev-chips { display: flex; gap: 6px; }
.nm-ev-cat, .nm-ev-rep { display: flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 100px; font-size: 12px; font-weight: 700; }
.nm-ev-cat i { width: 7px; height: 7px; border-radius: 4px; background: currentColor; }
.nm-ev-rep { background: #ffe5d4; color: var(--active); }
.nm-ev-rep .i { font-size: 12px; }
.nm-fab { position: absolute; z-index: 25; right: 20px; bottom: 96px; width: 62px; height: 62px; border-radius: 31px; display: grid; place-items: center; color: #fff; font-size: 30px; background: linear-gradient(135deg, #ffd166, #ff8c42, #ff6b6b); box-shadow: 0 8px 16px rgba(255, 107, 107, 0.4); }
.scr:not(.on) .nm-fab { display: none; }

/* Cây gia phả */
.scr[data-s='tree'] { overflow: hidden; }
.nm-tree { position: absolute; inset: 0; overflow: hidden; background: var(--soft); touch-action: pan-y; cursor: grab; }
.nm-tree.drag { cursor: grabbing; }
.nm-canvas { position: absolute; left: 0; top: 0; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.nm-tree.drag .nm-canvas { transition: none; }
.nm-canvas svg { position: absolute; left: 0; top: 0; fill: none; stroke: rgba(216, 203, 180, 0.85); stroke-width: 1.8; stroke-linecap: round; }
.nm-node { position: absolute; width: 164px; height: 88px; padding: 8px 6px 8px 10px; border-radius: 14px; display: flex; align-items: center; gap: 8px; background: #a85a2e; color: #fff; transition: transform 0.2s, box-shadow 0.2s; }
.nm-node.self { border: 2px solid rgba(255, 255, 255, 0.72); }
.nm-node.on { transform: translateY(-4px); box-shadow: 0 10px 18px -6px rgba(0, 0, 0, 0.4); }
.nm-node-i { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nm-node-i b { font-size: 12px; font-weight: 700; line-height: 14px; }
.nm-node-c, .nm-node-a { align-self: flex-start; padding: 2px 6px; border-radius: 99px; font-size: 9px; font-weight: 600; color: rgba(255, 255, 255, 0.72); background: rgba(255, 255, 255, 0.45); }
.nm-node-a { padding: 2px 5px; background: rgba(255, 255, 255, 0.12); }
.nm-node-av { position: relative; width: 60px; height: 60px; flex: none; border-radius: 30px; border: 2.5px solid rgba(255, 255, 255, 0.45); }
.nm-node-av .nm-av { font-size: 17px; }
.nm-node-me { position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; border-radius: 7px; background: #22d3ee; border: 2px solid #fff; }
.nm-node-add { position: absolute; top: -8px; left: -8px; width: 22px; height: 22px; border-radius: 11px; display: none; place-items: center; font-size: 12px; color: var(--sub); background: var(--surface); border: 1px solid var(--line); }
.nm-node.on .nm-node-add { display: grid; }
.nm-qbar { position: absolute; z-index: 22; top: 70px; right: 6px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nm-qa { display: grid; justify-items: center; gap: 4px; }
.nm-qa button { width: 44px; height: 38px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); font-size: 20px; color: var(--tx); }
.nm-qa small { font-size: 10px; font-weight: 500; color: var(--sub); white-space: nowrap; }
.nm-qa-c { font-size: 18px; }
.nm-qa-dot { width: 10px; height: 10px; border-radius: 5px; background: var(--accent); }
.nm-sheet { position: absolute; inset: 0; z-index: 50; }
.nm-scrim { position: absolute; inset: 0; width: 100%; background: rgba(0, 0, 0, 0.32); }
.nm-sheet-b { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 20px 40px; border-radius: 24px 24px 0 0; background: var(--bg); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.15); }
@media (prefers-reduced-motion: no-preference) {
  .nm-sheet:not([hidden]) .nm-sheet-b { animation: nm-up 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .nm-sheet:not([hidden]) .nm-scrim { animation: ph-fade 0.25s both; }
  @keyframes nm-up { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes ph-fade { from { opacity: 0; } to { opacity: 1; } }
}
.nm-grab { display: block; width: 40px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: var(--line); }
.nm-sheet-hd { position: relative; height: 120px; margin: 0 -20px; }
.nm-sheet-ban { position: absolute; inset: 0 0 30px; background: linear-gradient(135deg, #c77a4a, #a85a2e); }
.nm-sheet-hd > span:last-child { position: absolute; left: 20px; bottom: 0; width: 76px; height: 76px; border-radius: 38px; border: 4px solid var(--bg); }
.nm-sheet-hd .nm-av { font-size: 22px; }
.nm-sheet-n { display: block; margin-top: 10px; font-size: 22px; font-weight: 800; }
.nm-sheet-rows { margin-top: 12px; border-radius: 16px; background: var(--surface); }
.nm-sheet-rows div { display: flex; justify-content: space-between; padding: 13px 16px; border-top: 1px solid var(--line); font-size: 15px; }
.nm-sheet-rows div:first-child { border-top: 0; }
.nm-sheet-rows small { font-size: 15px; color: var(--sub); }
.nm-sheet-btns { display: flex; gap: 10px; margin-top: 16px; }
.nm-pbtn, .nm-gbtn { flex: 1; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 700; }
.nm-pbtn { background: var(--accent); color: #fff; }
.nm-pbtn .i { font-size: 18px; }
.nm-gbtn { background: var(--soft); color: var(--accent); }

/* Của tôi */
.nm-me { padding-bottom: 110px; }
.nm-me-ban { height: 200px; background: radial-gradient(70px 70px at 20% 40%, rgba(255, 255, 255, 0.5), transparent 70%), linear-gradient(120deg, #ffd166, #ff8c42 55%, #ff6b6b); }
.nm-me-av { width: 96px; height: 96px; margin: -48px 0 0 16px; border-radius: 48px; border: 4px solid var(--bg); background: var(--soft); }
.nm-me-av .nm-av { font-size: 30px; }
.nm-me-info { padding: 10px 16px 0; }
.nm-me-info > b { display: block; font-size: 22px; font-weight: 800; }
.nm-me-info > small { display: block; margin-top: 2px; color: var(--sub); font-size: 16px; }
.nm-me-info p { margin-top: 10px; font-size: 14px; line-height: 20px; }
.nm-me-st { display: flex; gap: 4px; margin-top: 14px; align-items: baseline; }
.nm-me-st b { font-weight: 700; }
.nm-me-st small { font-size: 13px; color: var(--sub); }
.nm-ptabs { display: flex; margin: 14px 0 12px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.nm-ptabs::-webkit-scrollbar { display: none; }
.nm-ptabs button { flex: none; padding: 12px 16px; font-size: 15px; font-weight: 600; color: var(--sub); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.nm-ptabs button.on { color: var(--accent); border-color: var(--accent); }

/* Danh sách tin nhắn */
.nm-chats { padding: 54px 0 40px; }
.nm-chd { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px; }
.nm-chd b { flex: 1; font-size: 27px; line-height: 1.4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nm-ib { width: 36px; height: 36px; flex: none; display: grid; place-items: center; font-size: 24px; color: var(--tx); }
.nm-search { display: flex; align-items: center; gap: 10px; margin: 12px 12px 0; padding: 12px 16px; border-radius: 999px; background: var(--soft); color: var(--sub); font-size: 19px; }
.nm-search .i { font-size: 22px; }
.nm-ctabs { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; }
.nm-ctabs { overflow-x: auto; scrollbar-width: none; }
.nm-ctabs::-webkit-scrollbar { display: none; }
.nm-ctabs > * { flex: none; white-space: nowrap; }
.nm-ctabs button { padding: 7px 16px; border-radius: 999px; background: var(--soft); color: var(--sub); font-size: 16px; font-weight: 500; }
.nm-ctabs button.on { background: var(--accent); color: #fff; font-weight: 700; }
.nm-ctab-i { padding: 7px 12px; border-radius: 999px; background: var(--soft); color: var(--sub); font-size: 16px; display: grid; place-items: center; }
.nm-clist > * { min-width: 0; }
.nm-clist { display: grid; gap: 12px; padding: 12px 8px; }
.nm-crow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 2px 8px; border-radius: 20px; }
.nm-crow-av { position: relative; flex: none; width: 56px; height: 56px; }
.nm-on { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border-radius: 7px; background: #22c55e; border: 2px solid var(--bg); }
.nm-bd { width: 56px; height: 56px; flex: none; border-radius: 28px; display: grid; place-items: center; background: #7c3aed; color: #fff; font-size: 19px; font-weight: 700; }
.nm-crow-m { flex: 1; min-width: 0; }
.nm-crow-1 { display: flex; align-items: center; gap: 6px; }
.nm-crow-1 .i { font-size: 16px; color: var(--sub); }
.nm-crow-1 b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; font-weight: 700; }
.nm-crow-1.nm-big b { font-size: 19px; }
.nm-crow-1 small { font-size: 12px; color: var(--sub); }
.nm-crow.unread .nm-crow-1 b { font-weight: 800; }
.nm-crow.unread .nm-crow-1 small { color: var(--accent); font-weight: 700; }
.nm-crow-u { display: block; margin-top: 1px; font-size: 12px; color: var(--sub); }
.nm-crow-2 { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.nm-crow-2 > span, .nm-crow-2 em { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 19px; color: var(--sub); }
.nm-crow-2 em { color: var(--accent); }
.nm-crow.unread .nm-crow-2 > span { color: var(--tx); font-weight: 700; }
.nm-cnt { min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }

/* Hộp thoại */
.scr[data-s='thread'] { overflow: hidden; }
.nm-thread { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 54px; }
.nm-thd { display: flex; align-items: center; gap: 16px; padding: 6px 20px 14px; }
.nm-thd .nm-ib { width: 36px; font-size: 26px; }
.nm-thd-n { min-width: 0; display: flex; flex-direction: column; }
.nm-thd-n b { font-size: 19px; font-weight: 700; max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nm-thd-n small { font-size: 14px; color: var(--sub); }
.nm-onl { display: flex; align-items: center; gap: 4px; color: #22c55e !important; }
.nm-onl i { width: 8px; height: 8px; border-radius: 4px; background: #22c55e; }
.nm-thd-c { flex: 1; display: flex; justify-content: flex-end; gap: 24px; font-size: 28px; }
.nm-thd-c button { font-size: 28px; }
.nm-msgs { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 8px 12px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.nm-msgs::-webkit-scrollbar { display: none; }
.nm-sep { text-align: center; font-size: 12.5px; color: var(--sub); padding: 6px 0 10px; }
.nm-time { align-self: center; font-size: 11px; color: var(--sub); margin: 3px 0 8px; }
.nm-msg { display: flex; }
.nm-msg.out { justify-content: flex-end; }
.nm-bub { max-width: 76%; padding: 10px 14px; font-size: 17px; line-height: 23px; border-radius: 18px; }
.nm-msg.in .nm-bub { background: var(--soft); color: var(--tx); }
.nm-msg.out .nm-bub { background: var(--accent); color: #fff; }
.nm-msg.out.solo .nm-bub, .nm-msg.out.first .nm-bub { border-bottom-right-radius: 4px; }
.nm-msg.out.last .nm-bub { border-top-right-radius: 4px; }
.nm-msg.in.solo .nm-bub, .nm-msg.in.first .nm-bub { border-bottom-left-radius: 4px; }
.nm-msg.in.last .nm-bub { border-top-left-radius: 4px; }
.nm-input { display: flex; align-items: center; gap: 8px; padding: 10px 12px 34px; border-top: 1px solid var(--line); background: var(--surface); }
.nm-in-ic { display: flex; gap: 6px; color: var(--accent); font-size: 28px; }
.nm-in-f { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 14px; border-radius: 20px; background: var(--soft); }
.nm-in-f input { flex: 1; font-size: 16px; color: var(--tx); }
.nm-in-f input::placeholder { color: var(--sub); }
.nm-in-f .i { font-size: 26px; color: var(--sub); }
.nm-send { font-size: 28px; color: var(--accent); }
.nm-call { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: #000; color: #fff; }
.nm-call-in { display: grid; justify-items: center; gap: 10px; }
.nm-call-in b { margin-top: 10px; font-size: 24px; font-weight: 700; }
.nm-call-in small { font-size: 15px; color: rgba(255, 255, 255, 0.72); }
.nm-end { margin-top: 120px; width: 68px; height: 68px; border-radius: 34px; display: grid; place-items: center; background: #ef4444; color: #fff; font-size: 32px; }
/* Màu riêng từng dòng (data-c → --c, đặt bằng phone.js) */
.nm-ev-bar { background: var(--c); }
.nm-ev-ic { background: var(--c); box-shadow: 0 2px 4px color-mix(in srgb, var(--c) 30%, transparent); }
.nm-ev-cat { color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.nm-chip .i { color: var(--c); }
.nm-chip.on { background: var(--c); border-color: var(--c); }
.nm-in-f input:focus-visible { outline: 0; }
.nm-in-f:focus-within { box-shadow: 0 0 0 2px var(--active); }

/* ═════════════ DBR: khung cửa sổ + sơ đồ đội agent (bản sao trang Agent trên dash) ═════════════ */
.prods-more { margin-top: 0; }
.prods-more + .cards { border-top: 0; }
.ag-win { margin: 0; width: 100%; background: var(--ink); border: 1px solid var(--graphite); }
.ag-bar { background: var(--carbon); font-family: var(--mono); }
.ag-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--graphite) transparent; padding: 10px; }
.ag-map { display: block; width: 100%; height: auto; }
@media (max-width: 700px) { .ag-map { min-width: 720px; } }
.prod.prod-dbr.prod-wide { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr); }
.prod.prod-dbr.prod-wide:nth-child(even) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr); }
@media (max-width: 1000px) { .prod.prod-dbr.prod-wide, .prod.prod-dbr.prod-wide:nth-child(even) { grid-template-columns: minmax(0, 1fr); } .prod-dbr .prod-stage { order: 0 !important; } }
.ag-help { padding: 10px 14px 12px; border-top: 1px solid var(--graphite); }
.ag-e .ag-line { fill: none; stroke: var(--graphite); stroke-width: 1.5; transition: stroke 0.2s, stroke-width 0.2s; }
.ag-e.hot .ag-line { stroke: var(--steel); }
.ag-badge rect { fill: var(--carbon); stroke: var(--graphite); transition: fill 0.15s, stroke 0.15s; }
.ag-badge text { fill: var(--mist); font-family: var(--mono); font-size: 11px; text-anchor: middle; transition: fill 0.15s; }
.ag-e.hot .ag-badge rect { stroke: var(--steel); }
.ag-e.hot .ag-badge text { fill: var(--paper); }
.ag-badge.tick rect { stroke: #ff7a1a; }
.ag-n rect { fill: var(--carbon); stroke: var(--graphite); transition: stroke 0.2s, fill 0.2s; }
.ag-n.me rect { fill: var(--graphite); }
.ag-n .nm { fill: var(--paper); font-family: var(--text); font-size: 14px; font-weight: 500; text-anchor: middle; }
.ag-n .tt { fill: var(--steel); font-family: var(--mono); font-size: 9.5px; text-anchor: middle; }
.ag-n.busy rect { stroke: var(--paper); }
.ag-dot { fill: #ff7a1a; filter: drop-shadow(0 0 3px rgba(255, 122, 26, 0.6)); }
/* Rê vào một người / một đường: nó và các kết nối của nó sáng lên, phần còn lại mờ đi. */
.ag-map .ag-n, .ag-map .ag-e { transition: opacity 0.2s; }
.ag-map.focus .ag-n:not(.lit), .ag-map.focus .ag-e:not(.lit) { opacity: 0.28; }
.ag-map .ag-e.lit .ag-line { stroke: var(--paper); stroke-width: 2; }
.ag-map .ag-e.lit .ag-badge rect { fill: var(--paper); stroke: var(--paper); }
.ag-map .ag-e.lit .ag-badge text { fill: var(--ink); font-weight: 700; }
.ag-map .ag-n.lit rect { stroke: var(--mist); }
.ag-map .ag-n.lit.src rect { stroke: var(--paper); }
.ag-map .ag-e { pointer-events: stroke; }
.ag-map .ag-n { cursor: default; }
/* Agent phụ: ô nhỏ, viền đứt, nét nối đứt; ô "+ nhiều agent phụ khác" không nối */
.ag-e.sub .ag-line { stroke-dasharray: 4 3; }
.ag-n.sub rect { fill: var(--ink); stroke-dasharray: 3 2; }
.ag-n.sub .nm { font-family: var(--mono); font-size: 12.5px; font-weight: 400; fill: var(--mist); }
.ag-map .ag-n.sub.lit .nm { fill: var(--paper); }
.ag-more rect { fill: none; stroke: var(--steel); stroke-dasharray: 3 3; }
.ag-more text { fill: var(--mist); font-family: var(--mono); font-size: 12px; text-anchor: middle; }
.ag-map.focus .ag-more { opacity: 0.28; }

/* ═════════════ Timee — bản sáng (lib/theme.ts), Fraunces + JetBrains Mono + Lora ═════════════ */
.app-timee { --bg: #f4efe6; --bg2: #ebe3d4; --ink: #1a1714; --soft: #4a423a; --mute: #8a8278; --paper: #faf6ed; --ls: #c8bfae; --a1: #d4541f; --a2: #2d5a3d; --a3: #c89b3c; --a4: #8b3a62; --tx: #1a1714; --focus: #d4541f; }
.app-timee .scr { padding-top: 54px; }
.tm-f, .app-timee { font-family: 'Fraunces', Georgia, serif; }
.app-timee .tm-mono, .tm-seg button, .tm-dc small, .tm-tags button, .tm-save, .tm-dn small, .tm-chips button, .tm-sec, .tm-meta small, .tm-tag, .tm-ch small, .tm-pills button, .tm-mn b, .tm-grid small, .tm-cl small, .tm-st, .tm-dr small, .tm-ptr small, .tm-search, .tm-fchips button, .tm-pi small, .tm-pr small, .tm-tb, .tm-msub, .tm-m small, .tm-stats b, .tm-quick span:last-child, .tm-ea { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.tm-h, .tm-greet { font-family: 'Fraunces', Georgia, serif; font-style: italic; }
.tm-seg { display: flex; gap: 4px; margin: 2px 20px 0; padding: 4px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--bg2); }
.tm-seg button { flex: 1; padding: 8px 0; border-radius: 6px; text-align: center; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }
.tm-seg button.on { background: var(--ink); color: var(--paper); }
.tm-date { display: flex; align-items: center; margin-top: 14px; padding: 16px 20px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.tm-arr { width: 36px; height: 36px; display: grid; place-items: center; font-size: 20px; color: var(--mute); }
.tm-arr.off { color: var(--ls); }
.tm-dc { flex: 1; display: grid; justify-items: center; }
.tm-dc b { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 30px; line-height: 34px; }
.tm-dc small { margin-top: 4px; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--mute); }
.tm-dots { display: flex; justify-content: center; gap: 6px; padding: 8px 0; }
.tm-dots i { width: 5px; height: 5px; border-radius: 3px; background: var(--ls); }
.tm-dots i.on { width: 16px; background: var(--ink); }
.tm-moods { display: flex; justify-content: space-around; margin: 12px 20px 20px; }
.tm-moods button { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--ink); background: var(--bg2); display: grid; place-items: center; font-size: 20px; }
.tm-moods button.on { background: var(--a1); border-width: 2px; }
.tm-text { margin: 0 20px; font-family: 'Lora', Georgia, serif; font-size: 17px; line-height: 28px; }
.tm-text em { font-style: normal; color: var(--a1); }
.tm-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 20px 102px; border-top: 1px solid var(--ls); background: var(--bg); }
.tm-imgs { display: flex; gap: 8px; margin-bottom: 10px; }
.tm-img { position: relative; width: 80px; height: 80px; border-radius: 8px; background: radial-gradient(30px 30px at 70% 30%, #fff6d8, transparent 70%), linear-gradient(160deg, #8fb3c9 0 45%, #c9a46a 46%, #8a6a44); }
.tm-img i { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 10px; }
.tm-add { width: 80px; height: 80px; border-radius: 8px; border: 1.5px dashed var(--ink); background: var(--bg2); display: grid; place-items: center; font-size: 20px; color: var(--mute); }
.tm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tm-tags button { padding: 3px 8px; border: 1px solid var(--ink); border-radius: 99px; background: var(--paper); font-size: 9px; letter-spacing: 0.5px; }
.tm-tags button.on { background: var(--ink); color: var(--paper); }
.tm-save { display: block; min-width: 220px; margin: 0 auto 12px; padding: 14px 36px; border: 2px solid #000; border-radius: 99px; background: var(--a1); color: var(--paper); font-size: 12px; font-weight: 500; letter-spacing: 2px; box-shadow: 2px 2px 0 #000; transform: translate(-2px, -2px); }
.tm-save:active { box-shadow: none; transform: none; }
.tm-hd { padding: 8px 20px 0; }
.tm-greet { display: block; font-size: 22px; font-weight: 500; color: var(--a1); margin-bottom: -2px; }
.tm-title { font-size: 24px; line-height: 30px; }
.tm-title em { color: var(--a1); }
.tm-dn { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.tm-dn span { width: 22px; display: grid; place-items: center; font-size: 16px; color: var(--mute); }
.tm-dn small { flex: 1; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--mute); }
.tm-dn small b { font-weight: 400; }
.tm-chips { display: flex; align-items: center; gap: 6px; padding: 24px 20px 10px; overflow-x: auto; scrollbar-width: none; }
.tm-chips::-webkit-scrollbar, .tm-fchips::-webkit-scrollbar { display: none; }
.tm-chips button { flex: none; padding: 6px 12px; border: 1.5px solid var(--ls); border-radius: 99px; background: var(--paper); font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--soft); }
.tm-chips button.on { border-color: var(--ink); background: var(--c, var(--ink)); color: var(--paper); }
.tm-plus { flex: none; width: 28px; height: 28px; display: grid; place-items: center; font-size: 14px; color: var(--soft); }
.tm-sec { margin: 4px 20px 8px; font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--soft); }
.tm-card { margin: 0 20px 14px; border: 1.5px solid var(--ink); border-radius: 14px; overflow: hidden; background: var(--paper); box-shadow: 2px 2px 0 var(--ink); transform: translate(-2px, -2px); }
.tm-td { padding-bottom: 190px; }
.tm-task { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px dashed var(--ls); }
.tm-task:last-child { border-bottom: 0; }
.tm-chk { width: 20px; height: 20px; margin-top: 2px; flex: none; border: 1.5px solid var(--ink); border-radius: 5px; display: grid; place-items: center; font-size: 13px; color: transparent; }
.tm-chk.on { background: var(--a2); color: var(--paper); }
.tm-tt { flex: 1; min-width: 0; }
.tm-tt b { display: block; font-weight: 400; font-size: 14px; transition: opacity 0.2s; }
.tm-task.done .tm-tt b { text-decoration: line-through; opacity: 0.55; }
.tm-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.tm-meta small { font-size: 9px; letter-spacing: 1px; color: var(--mute); }
.tm-mi { font-size: 10px; color: var(--mute); }
.tm-tag { display: flex; align-items: center; gap: 4px; font-size: 9px; letter-spacing: 1px; color: var(--mute); }
.tm-tag i { width: 5px; height: 5px; border-radius: 3px; background: var(--c); }
.tm-quick { position: absolute; right: 88px; bottom: 120px; left: 20px; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 26px; background: var(--paper); box-shadow: 2px 2px 0 var(--ink); color: var(--mute); font-size: 13px; }
.tm-qb { width: 22px; height: 22px; border: 1.5px dashed var(--ls); border-radius: 6px; display: grid; place-items: center; font-size: 13px; }
.tm-fab { position: absolute; right: 20px; bottom: 120px; width: 56px; height: 56px; border-radius: 28px; display: grid; place-items: center; background: var(--a1); border: 2px solid var(--ink); color: var(--paper); font-size: 24px; box-shadow: 2px 2px 0 var(--ink); }
.tm-fab2 { position: absolute; right: 20px; bottom: 112px; width: 52px; height: 52px; border-radius: 26px; display: grid; place-items: center; background: var(--a1); border: 2px solid var(--ink); color: var(--paper); font-size: 22px; }
.scr:not(.on) :is(.tm-fab, .tm-fab2, .tm-quick) { display: none; }
.tm-cal { padding: 8px 20px 130px; }
.tm-ch { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.tm-h { display: block; font-size: 26px; font-weight: 400; }
.tm-ch small, .tm-ptr small, .tm-msub { display: block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--mute); }
.tm-pills { display: flex; gap: 6px; margin-top: 4px; }
.tm-pills button { padding: 5px 12px; border: 1.5px solid var(--ink); border-radius: 99px; background: var(--paper); font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; }
.tm-pills button.on { background: var(--ink); color: var(--paper); }
.tm-mn { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tm-mn b { font-size: 11px; font-weight: 500; letter-spacing: 2px; }
.tm-nb { width: 30px; height: 30px; border: 1.5px solid var(--ink); border-radius: 15px; background: var(--paper); display: grid; place-items: center; font-size: 16px; }
.tm-grid { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.tm-grid small { padding: 4px 0; text-align: center; font-size: 9px; letter-spacing: 1px; color: var(--mute); }
.tm-c { position: relative; aspect-ratio: 1; margin: 2px 0; border: 1px solid var(--ls); border-radius: 8px; background: var(--paper); display: grid; place-items: center; font-size: 13px; }
.tm-c.x { border-color: transparent; background: transparent; color: var(--mute); }
.tm-c.on { border: 2px solid var(--a1); }
.tm-c.today { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tm-mk { position: absolute; left: 0; right: 0; bottom: 3px; display: flex; justify-content: center; gap: 2px; font-size: 8px; }
.m-s { color: var(--a2); } .m-t { color: var(--a4); } .m-e { color: var(--a1); } .m-d { color: var(--a3); }
.tm-c.today .tm-mk .i { color: var(--paper); }
.tm-cal .tm-sec { margin: 16px 0 10px; }
.tm-dcard { margin-bottom: 10px; padding: 14px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 2px 2px 0 var(--ink); transform: translate(-2px, -2px); }
.tm-dcard.ink { background: var(--ink); color: var(--paper); }
.tm-cl { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.tm-cl small { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--soft); }
.tm-dcard.ink .tm-cl small { color: var(--mute); }
.tm-sl { display: flex; align-items: baseline; gap: 12px; }
.tm-sl i { font-family: 'Fraunces', serif; font-weight: 500; font-size: 30px; }
.tm-sl .q { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #6ea585; }
.tm-st { display: block; margin-top: 4px; font-size: 10px; letter-spacing: 1px; color: var(--mute); }
.tm-dr { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.tm-dr span { flex: 1; }
.tm-dr span.done { text-decoration: line-through; color: var(--mute); }
.tm-dr small { font-size: 9px; color: var(--mute); }
.tm-dc2 { width: 16px; height: 16px; border: 1.5px solid var(--ink); border-radius: 4px; display: grid; place-items: center; font-size: 10px; color: transparent; font-style: normal; }
.tm-dc2.on { background: var(--a2); border-color: var(--a2); color: var(--paper); }
.tm-dq { font-style: italic; font-size: 15px; line-height: 22px; color: var(--soft); }
.tm-empty { display: grid; justify-items: center; gap: 4px; padding: 24px; }
.tm-empty i { font-size: 18px; }
.tm-empty small { font-size: 13px; font-style: italic; color: var(--mute); }
.tm-ea { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 16px; border: 1.5px solid var(--ink); border-radius: 99px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.tm-pp, .tm-more { padding: 8px 20px 120px; }
.tm-ptr { display: flex; align-items: flex-start; }
.tm-ptr > span:first-child { flex: 1; }
.tm-ptr .tm-h { font-size: 28px; }
.tm-ptr small { margin-bottom: 16px; }
.tm-trash { width: 34px; height: 34px; margin-top: 4px; border: 1.5px solid var(--ls); border-radius: 17px; display: grid; place-items: center; font-size: 15px; color: var(--soft); }
.tm-search { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 99px; background: var(--paper); box-shadow: 2px 2px 0 var(--ink); font-size: 12px; color: var(--mute); }
.tm-fchips { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.tm-fchips > * { flex: none; display: flex; align-items: center; gap: 5px; padding: 5px 12px; border: 1.5px solid var(--ink); border-radius: 99px; background: var(--paper); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.tm-fchips button.on { background: var(--ink); color: var(--paper); }
.tm-fchips i { width: 6px; height: 6px; border-radius: 3px; background: var(--c); }
.tm-p { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 10px; padding: 14px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 2px 2px 0 var(--ink); transform: translate(-2px, -2px); }
.tm-av { position: relative; flex: none; width: 46px; height: 46px; border: 1.5px solid var(--ink); border-radius: 23px; display: grid; place-items: center; background: var(--c); color: var(--paper); font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 16px; }
.tm-av i { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 6px; border: 1.5px solid var(--paper); background: var(--c); }
.tm-pi { flex: 1; min-width: 0; }
.tm-pi b { display: block; font-weight: 500; font-size: 15px; }
.tm-pi small { display: block; margin-top: 2px; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }
.tm-pi em { display: block; margin-top: 2px; font-size: 14px; color: var(--a1); }
.tm-pr { display: grid; justify-items: end; gap: 6px; }
.tm-pr small { font-size: 8px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--mute); }
.tm-tb { padding: 2px 6px; border: 1px solid var(--c); border-radius: 99px; background: color-mix(in srgb, var(--c) 13%, transparent); font-size: 8px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--c); }
.tm-more .tm-h { font-size: 28px; }
.tm-msub { margin-bottom: 20px; }
.tm-mg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tm-m { display: grid; justify-items: start; padding: 18px; border: 1.5px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 2px 2px 0 var(--ink); transform: translate(-2px, -2px); }
.tm-mi2 { width: 44px; height: 44px; margin-bottom: 12px; border: 1.5px solid var(--ink); border-radius: 12px; display: grid; place-items: center; background: var(--c); color: var(--paper); font-size: 20px; }
.tm-m b { font-weight: 500; font-size: 15px; margin-bottom: 2px; }
.tm-m small { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--mute); }
.tm-sec2 { margin: 24px 0 10px; }
.tm-stats { border: 1.5px solid var(--ink); border-radius: 14px; overflow: hidden; background: var(--paper); box-shadow: 2px 2px 0 var(--ink); }
.tm-stats div { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--ls); font-size: 13px; }
.tm-stats div:last-child { border-bottom: 0; }
.tm-stats i { width: 8px; height: 8px; border-radius: 4px; background: var(--c); }
.tm-stats span { flex: 1; }
.tm-stats b { font-size: 11px; font-weight: 500; color: var(--soft); }
.tm-bar { position: absolute; left: 32px; right: 32px; bottom: 24px; padding: 10px; display: flex; justify-content: space-around; align-items: center; border: 2px solid var(--ink); border-radius: 26px; background: var(--paper); box-shadow: 2px 2px 0 var(--ink); transform: translate(-2px, -2px); }
.tm-tab { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; color: var(--mute); }
.tm-tab.on { background: var(--a1); border: 2px solid var(--ink); color: var(--paper); font-size: 21px; }

/* ═════════════ Q-Smoke — nền tối (lib/theme.ts), tiêu đề Georgia ═════════════ */
.app-qsmoke { --bg: #0a0a0f; --card: #13131a; --bd: #222230; --tx: #e8e4dc; --mu: #6b6860; --dim: #4a4a5a; --ib: #0f0f18; --ibd: #2a2a3a; --good: #4ade80; --ok: #facc15; --over: #f87171; --focus: #e8e4dc; }
.qs-g { font-family: Georgia, 'Times New Roman', serif; font-weight: 900; }
.qs-pad { padding: 78px 20px 120px; }
.qs-hd, .qs-ph { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.qs-ph { margin-bottom: 4px; }
.qs-title { display: block; font-size: 26px; letter-spacing: 0.5px; }
.qs-hd small, .qs-ph small { display: block; margin-top: 2px; font-size: 10px; letter-spacing: 2px; color: var(--mu); }
.qs-ph small { margin-bottom: 20px; }
.qs-dn { display: flex; align-items: center; gap: 6px; }
.qs-nb, .qs-nb2 { width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--bd); font-size: 16px; }
.qs-nb.off, .qs-nb2.off { opacity: 0.3; }
.qs-dp { display: flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 50px; background: var(--card); border: 1px solid var(--bd); font-size: 12px; font-weight: 500; }
.qs-dp .i { font-size: 13px; }
.qs-chat { width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--bd); font-size: 20px; }
.qs-card { position: relative; margin-bottom: 14px; padding: 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--bd); overflow: hidden; }
.qs-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, 0.06); }
.qs-lbl { display: block; margin-bottom: 16px; font-size: 10px; letter-spacing: 2px; color: var(--dim); }
.qs-big { display: block; font-size: 96px; line-height: 96px; text-align: center; color: var(--st, var(--ok)); }
.qs-badge { display: table; margin: 8px auto 0; padding: 6px 14px; border-radius: 50px; font-size: 13px; font-weight: 500; color: var(--st, var(--ok)); background: color-mix(in srgb, var(--st, var(--ok)) 13%, transparent); }
.qs-bar { height: 6px; margin: 20px 0 8px; border-radius: 3px; background: #1e1e2e; overflow: hidden; }
.qs-bar i { display: block; width: 40%; height: 100%; border-radius: 3px; background: var(--st, var(--ok)); transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.qs-bl { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); }
.qs-btns { display: flex; gap: 10px; margin-top: 20px; }
.qs-bs { width: 48px; height: 48px; flex: none; border-radius: 24px; border: 1px solid var(--ibd); display: grid; place-items: center; font-size: 16px; color: var(--mu); }
.qs-bq { flex: 1; padding: 14px; border-radius: 50px; background: var(--tx); color: var(--bg); font-size: 15px; font-weight: 600; text-align: center; }
.qs-bq:active { transform: scale(0.98); }
.qs-sh { display: flex; align-items: center; width: 100%; }
.qs-sh > span:first-child { flex: 1; }
.qs-sh b { display: block; font-size: 15px; font-weight: 600; }
.qs-sh small { display: block; margin-top: 2px; font-size: 12px; color: var(--dim); }
.qs-sa { display: flex; align-items: center; gap: 16px; font-size: 16px; color: var(--dim); }
.qs-sa .red, .qs-ra .red { color: var(--over); }
.qs-sh .up, .qs-sh.on .dn { display: none; }
.qs-sh.on .up { display: inline-block; }
.qs-list { display: none; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--bd); }
.qs-sh.on + .qs-list { display: block; }
.qs-thd, .qs-tr { display: grid; grid-template-columns: 44px 1fr 44px 52px; gap: 8px; align-items: center; }
.qs-thd { padding-bottom: 8px; border-bottom: 1px solid var(--bd); margin-bottom: 2px; font-size: 9px; font-weight: 600; letter-spacing: 1.5px; color: var(--dim); }
.qs-tr { padding: 10px 0; border-bottom: 1px solid var(--bd); font-size: 13px; }
.qs-th { position: relative; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: var(--ib); color: var(--dim); font-size: 14px; }
.qs-th.ph { background: radial-gradient(10px 10px at 62% 34%, #f3e7d3, transparent 70%), radial-gradient(18px 18px at 45% 60%, #6b5844 0 60%, transparent 62%), linear-gradient(160deg, #3b3128, #1d1915); }
.qs-th.ph i { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border-radius: 7px; display: grid; place-items: center; background: rgba(0, 0, 0, 0.6); color: var(--tx); font-size: 9px; font-style: normal; }
.qs-ra { display: flex; justify-content: flex-end; gap: 10px; font-size: 15px; color: var(--dim); }
.qs-addc { display: flex; justify-content: center; align-items: center; gap: 6px; width: 100%; padding-top: 12px; font-size: 13px; color: var(--dim); }
.qs-foot { margin-top: 8px; text-align: center; font-size: 12px; color: var(--dim); }
.qs-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.qs-tabs button { flex: 1; padding: 10px; border-radius: 50px; border: 1px solid var(--ibd); text-align: center; font-size: 13px; font-weight: 500; color: var(--mu); }
.qs-tabs button.on { background: var(--tx); border-color: var(--tx); color: var(--bg); font-weight: 700; }
.qs-wn { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 10px 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--bd); }
.qs-wn .qs-nb2 { background: var(--ib); }
.qs-wn > span:nth-child(2) { display: grid; justify-items: center; gap: 4px; }
.qs-wn b { font-size: 13px; font-weight: 600; }
.qs-wn small { font-size: 10px; letter-spacing: 1px; color: var(--dim); }
.qs-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.qs-stats span { width: calc(50% - 5px); padding: 14px; border-radius: 14px; background: var(--ib); border: 1px solid var(--ibd); display: grid; justify-items: center; }
.qs-stats b { font-size: 28px; font-weight: 700; }
.qs-stats b.good { color: var(--good); }
.qs-stats small { margin-top: 4px; font-size: 10px; line-height: 14px; text-align: center; color: var(--dim); }
.qs-chart { display: flex; align-items: flex-end; gap: 4px; height: 116px; }
.qs-col { width: 36px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.qs-col small:first-child { height: 13px; font-size: 10px; color: var(--mu); }
.qs-col small:last-child { font-size: 9px; color: var(--dim); }
.qs-col.today small { color: var(--tx); font-weight: 700; }
.qs-col i { width: 100%; min-height: 4px; border-radius: 3px; background: #2a2a3a; }
.qs-col i.good { background: var(--good); } .qs-col i.over { background: var(--over); } .qs-col i.fut { background: #1a1a2a; opacity: 0.3; }
.qs-col.today i { box-shadow: inset 0 0 0 1px rgba(232, 228, 220, 0.35); }
.qs-leg { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11px; color: var(--dim); }
.qs-leg i { width: 10px; height: 10px; border-radius: 2px; }
.qs-leg i.good { background: var(--good); } .qs-leg i.over { background: var(--over); margin-left: 12px; }
.qs-goal { display: flex; justify-content: space-between; align-items: center; }
.qs-goal b { font-size: 30px; font-weight: 700; }
.qs-goal b small { font-family: -apple-system, sans-serif; font-size: 14px; font-weight: 300; color: var(--dim); }
.qs-goal > span > small { display: block; margin-top: 4px; font-size: 12px; color: var(--dim); }
.qs-edit { padding: 8px 14px; border-radius: 50px; border: 1px solid var(--ibd); font-size: 12px; color: var(--mu); }
.qs-money { display: block; font-size: 36px; font-weight: 700; color: var(--good); }
.qs-ms { display: block; margin-top: 4px; font-size: 12px; color: var(--dim); }
.qs-price { margin-top: 16px; font-size: 13px; color: var(--mu); }
.qs-price b { color: var(--tx); font-weight: 600; }
.qs-avw { display: grid; justify-items: center; margin-bottom: 32px; }
.qs-av { width: 80px; height: 80px; margin-bottom: 12px; border-radius: 40px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--bd); font-size: 32px; }
.qs-avw b { font-size: 16px; font-weight: 600; }
.qs-avw small { margin-top: 4px; font-size: 12px; color: var(--mu); }
.qs-ir { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--bd); font-size: 14px; }
.qs-ir.last { border-bottom: 0; }
.qs-ir span { color: var(--mu); }
.qs-ir b { font-weight: 500; }
.qs-ar { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 4px 0; font-size: 14px; }
.qs-ar i { font-style: normal; font-size: 22px; color: var(--dim); }
.qs-out { display: block; width: 100%; margin-top: 8px; padding: 14px; border-radius: 50px; border: 1px solid var(--over); text-align: center; font-size: 15px; font-weight: 500; color: var(--over); }
.qs-del { display: block; width: 100%; margin-top: 4px; padding: 16px; text-align: center; font-size: 13px; color: var(--dim); text-decoration: underline; }
.qs-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; padding: 8px 0 20px; display: flex; background: var(--card); border-top: 1px solid var(--bd); }
.qs-tab { flex: 1; display: grid; place-items: center; font-size: 24px; color: var(--dim); }
.qs-tab .onl, .qs-tab.on .off { display: none; }
.qs-tab.on { color: var(--tx); }
.qs-tab.on .onl { display: inline-block; }
.qs-modal { position: absolute; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.5); }
.qs-sheet { position: absolute; left: 0; right: 0; top: 60px; bottom: 0; display: flex; flex-direction: column; border-radius: 12px 12px 0 0; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { .qs-modal:not([hidden]) .qs-sheet { animation: nm-up 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; } }
.qs-chd { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--bd); }
.qs-chd b { display: block; font-size: 18px; }
.qs-chd small { display: block; margin-top: 2px; font-size: 10px; letter-spacing: 2px; color: var(--mu); }
.qs-x { width: 36px; height: 36px; border-radius: 18px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--bd); font-size: 20px; color: var(--mu); }
.qs-msgs { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.qs-b { max-width: 80%; padding: 12px; border-radius: 16px; font-size: 14px; line-height: 22px; }
.qs-b.ai { align-self: flex-start; background: var(--card); border: 1px solid var(--bd); border-bottom-left-radius: 4px; }
.qs-b.me { align-self: flex-end; background: var(--tx); color: var(--bg); border-bottom-right-radius: 4px; }
.qs-in { display: flex; align-items: flex-end; gap: 10px; padding: 12px 12px 34px; border-top: 1px solid var(--bd); }
.qs-inf { flex: 1; padding: 10px 16px; border-radius: 20px; background: var(--ib); border: 1px solid var(--ibd); }
.qs-inf input { width: 100%; font-size: 14px; }
.qs-inf input::placeholder { color: var(--dim); }
.qs-inf input:focus-visible { outline: 0; }
.qs-inf:focus-within { border-color: var(--tx); }
.qs-send { width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; background: var(--tx); color: var(--bg); font-size: 18px; }
.qs-dp, .qs-hd small { white-space: nowrap; }
.qs-hd { gap: 8px; }
.qs-hd > span:first-child { min-width: 0; }

/* ═════════════ Never Late — Noir (lib/theme.ts), Space Grotesk + Playfair Display ═════════════ */
.app-neverlate { --bg: #000; --sf: #0e0e0e; --sf2: #121212; --sf3: #161616; --line: #1c1c1c; --b2: #262626; --b3: #2a2a2a; --mu: #2e2e2e; --fg: #f2f2f2; --fg2: #9a9a9a; --fg3: #5c5c5c; --acc: #c8ff3d; --red: #ff5c5c; --warn: #ffb547; --tx: #f2f2f2; --focus: #c8ff3d; font-family: 'Space Grotesk', -apple-system, sans-serif; }
.nl-pad { padding: 64px 26px 120px; }
.nl-eb { display: block; font-weight: 600; font-size: 11px; letter-spacing: 1.54px; text-transform: uppercase; color: var(--fg3); }
.nl-eb.mt { margin-top: 24px; }
.nl-top { display: flex; justify-content: space-between; align-items: flex-start; }
.nl-notif { display: flex; align-items: center; gap: 6px; }
.nl-notif .nl-eb { color: var(--fg); }
.nl-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--acc); display: inline-block; }
.nl-title { margin-top: 18px; font-family: 'Playfair Display', Georgia, serif; font-size: 34px; line-height: 38px; letter-spacing: -0.34px; }
.nl-title em, .nl-h em { font-style: italic; }
.nl-clock { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.nl-clock b { font-weight: 500; font-size: 96px; line-height: 106px; letter-spacing: -5.8px; font-variant-numeric: tabular-nums; }
.nl-clock small { font-weight: 500; font-size: 22px; color: var(--fg3); font-variant-numeric: tabular-nums; }
.nl-nudge { margin-top: 14px; font-weight: 500; font-size: 15px; line-height: 22px; letter-spacing: 0.1px; color: var(--acc); }
.nl-nudge.n2 { color: var(--fg2); }
.nl-rows { margin-top: 28px; }
.nl-rows.mt { margin-top: 26px; }
.nl-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 16px 0; border-bottom: 1px solid var(--line); }
.nl-rows .nl-row:first-child { border-top: 1px solid var(--line); }
.nl-row span { font-size: 13.5px; color: var(--fg2); white-space: nowrap; }
.nl-row b { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; text-align: right; }
.nl-link b { color: var(--fg3); font-size: 15px; }
.nl-link span { color: var(--fg); font-weight: 600; font-size: 14.5px; }
.nl-stats, .nl-srow { display: flex; margin-top: 26px; }
.nl-stats > span, .nl-srow > span { flex: 1; }
.nl-stats b { display: block; margin-top: 6px; font-weight: 500; font-size: 21px; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; }
.nl-stats b.acc { color: var(--acc); }
.nl-slide { position: relative; height: 68px; margin-top: 30px; border-radius: 999px; background: var(--sf2); touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: 3px; }
.nl-slide.s-out { background: var(--sf); }
.nl-trail { position: absolute; left: 6px; top: 6px; height: 56px; width: 56px; border-radius: 28px; background: var(--acc); opacity: 0.18; }
.nl-lbl { position: absolute; left: 92px; top: 0; line-height: 68px; font-weight: 600; font-size: 15px; }
.nl-run { position: absolute; right: 22px; top: 50%; display: flex; gap: 6px; transform: translateY(-50%); }
.nl-run i { width: 10px; height: 3px; border-radius: 2px; background: var(--acc); opacity: 0.15; }
@media (prefers-reduced-motion: no-preference) {
  .nl-run i { animation: nl-run 1.5s infinite; }
  .nl-run i:nth-child(2) { animation-delay: 0.12s; } .nl-run i:nth-child(3) { animation-delay: 0.24s; } .nl-run i:nth-child(4) { animation-delay: 0.36s; }
  .nl-run i:nth-child(5) { animation-delay: 0.48s; } .nl-run i:nth-child(6) { animation-delay: 0.6s; } .nl-run i:nth-child(7) { animation-delay: 0.72s; } .nl-run i:nth-child(8) { animation-delay: 0.84s; }
  .idle .nl-run i { animation-play-state: paused; }
  @keyframes nl-run { 0%, 55%, 100% { opacity: 0.15; } 20% { opacity: 1; } }
}
.nl-knob { position: absolute; left: 6px; top: 6px; width: 56px; height: 56px; border-radius: 28px; display: grid; place-items: center; background: var(--acc); color: #000; font-size: 24px; cursor: grab; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.nl-slide.drag .nl-knob, .nl-slide.drag .nl-trail { transition: none; }
.nl-slide.s-out .nl-knob, .nl-slide.s-out .nl-trail { background: var(--fg); }
.nl-trail { transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.nl-stamps { margin-top: 30px; }
.nl-st { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 12px 0; }
.nl-sf { width: 44px; height: 44px; flex: none; border-radius: 22px; border: 1px solid var(--b3); background: radial-gradient(9px 10px at 50% 40%, #c9a58a 0 70%, transparent 72%), radial-gradient(16px 12px at 50% 92%, #4b5f7a 0 70%, transparent 72%), linear-gradient(#2a2a2a, #141414); }
.nl-st > span:nth-child(2) { flex: 1; }
.nl-st b { display: block; font-weight: 600; font-size: 13.5px; }
.nl-st small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--fg2); }
.nl-st em { font-style: normal; font-weight: 600; font-size: 17px; color: var(--fg2); }
.nl-h { margin-top: 8px; font-family: 'Playfair Display', Georgia, serif; font-size: 34px; line-height: 38px; letter-spacing: -0.34px; }
.nl-seg { display: flex; gap: 22px; margin-top: 22px; border-bottom: 1px solid var(--line); }
.nl-seg button { padding-bottom: 10px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-weight: 600; font-size: 13px; color: var(--fg3); }
.nl-seg button.on { color: var(--fg); border-color: var(--acc); }
.nl-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding: 4px 0; font-size: 18px; }
.nl-nav b { font-weight: 600; font-size: 14px; }
.nl-nav .off { opacity: 0.25; }
.nl-wh, .nl-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.nl-wh { margin-top: 14px; }
.nl-wh small { text-align: center; font-weight: 600; font-size: 10.5px; letter-spacing: 0.6px; color: var(--fg3); }
.nl-grid { margin-top: 6px; }
.nl-c { display: grid; place-items: center; padding: 4px 0; }
.nl-day { position: relative; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; border: 1px solid transparent; background: var(--sf3); font-style: normal; font-weight: 600; font-size: 13px; color: var(--fg3); font-variant-numeric: tabular-nums; }
.nl-day.full { background: rgba(200, 255, 61, 0.18); border-color: var(--acc); color: var(--acc); }
.nl-day.half { background: rgba(255, 181, 71, 0.18); border-color: var(--warn); color: var(--warn); }
.nl-day.today { background: var(--fg); border-color: var(--fg); color: #000; }
.nl-ed { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 3px; background: var(--warn); }
.nl-leg { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.nl-leg span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg2); }
.nl-lg { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--b3); background: var(--sf3); }
.nl-lg.full { background: rgba(200, 255, 61, 0.18); border-color: var(--acc); } .nl-lg.half { background: rgba(255, 181, 71, 0.18); border-color: var(--warn); }
.nl-lg.off { background: var(--mu); border-color: var(--fg3); } .nl-lg.ed { width: 7px; height: 7px; border: 0; background: var(--warn); }
.nl-total { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; }
.nl-total span { color: var(--fg2); }
.nl-total b { font-weight: 600; color: var(--acc); }
.nl-big { margin-top: 20px; font-weight: 500; font-size: 120px; line-height: 132px; letter-spacing: -8.4px; color: var(--fg); }
.nl-big em { font-family: 'Playfair Display', serif; font-style: italic; font-size: 46px; letter-spacing: 0; }
.nl-q { margin-top: -6px; font-family: 'Playfair Display', serif; font-style: italic; font-size: 18px; line-height: 25px; color: var(--fg2); }
.nl-srow { margin-top: 22px; padding: 16px 0; border-top: 1px solid var(--line); }
.nl-srow.nb { margin-top: 0; padding-top: 0; border-top: 0; }
.nl-srow b { display: block; margin-top: 6px; font-weight: 500; font-size: 26px; letter-spacing: -0.8px; }
.nl-srow b.acc { color: var(--acc); } .nl-srow b.red { color: var(--red); }
.nl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.nl-chips button { padding: 7px 13px; border: 1px solid var(--b3); border-radius: 999px; font-weight: 600; font-size: 12.5px; letter-spacing: 0.25px; color: var(--fg2); }
.nl-chips button.on { background: var(--fg); border-color: var(--fg); color: #000; }
.nl-dr { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.nl-dc { width: 42px; height: 42px; border-radius: 12px; border: 1px solid; display: grid; place-items: center; align-content: center; }
.nl-dc.full { background: rgba(200, 255, 61, 0.18); border-color: var(--acc); color: var(--acc); } .nl-dc.half { background: rgba(255, 181, 71, 0.18); border-color: var(--warn); color: var(--warn); }
.nl-dc b { font-weight: 600; font-size: 15px; line-height: 1; }
.nl-dc small { font-weight: 600; font-size: 8.5px; letter-spacing: 0.8px; color: var(--fg3); }
.nl-dr > span:last-child b { display: block; font-weight: 600; font-size: 14px; }
.nl-dr > span:last-child small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--fg2); }
.nl-pill { display: block; width: 100%; margin-top: 22px; padding: 16px; border-radius: 999px; background: var(--fg); color: #000; text-align: center; font-weight: 600; font-size: 15px; }
.nl-rq { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.nl-rd { width: 36px; display: grid; justify-items: center; }
.nl-rd b { font-weight: 500; font-size: 22px; line-height: 24px; }
.nl-rd small { margin-top: 1px; font-weight: 600; font-size: 10px; letter-spacing: 1px; color: var(--fg3); }
.nl-rm { flex: 1; min-width: 0; }
.nl-rm b { display: block; font-weight: 600; font-size: 14.5px; }
.nl-rm small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--fg2); }
.nl-rm em { display: block; margin-top: 6px; font-family: 'Playfair Display', serif; font-size: 16px; color: #d8d8d8; }
.nl-rs { font-weight: 600; font-size: 12px; }
.nl-rs.warn { color: var(--warn); } .nl-rs.ok { color: var(--acc); }
.nl-ph { display: flex; align-items: flex-start; gap: 12px; }
.nl-ph > span:first-child { flex: 1; }
.nl-av { width: 56px; height: 56px; border-radius: 28px; display: grid; place-items: center; border: 1px solid var(--b3); background: var(--sf); font-family: 'Playfair Display', serif; font-size: 24px; }
.nl-bar { position: absolute; left: 22px; right: 22px; bottom: 26px; height: 60px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--b2); display: flex; align-items: center; justify-content: space-around; background: rgba(20, 20, 20, 0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nl-tab { height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 12.5px; letter-spacing: 0.25px; color: var(--fg2); }
.nl-tab.on { background: var(--fg); color: #000; }

/* ═════════════ DailyCalo — bản sao điện thoại demo của dailycalo.vn (web/style.css + demo.js), Be Vietnam Pro + Playfair Display ═════════════ */
/* Font tự host (SIL OFL 1.1, xem /f/dc/LICENSE.txt): chỉ hai bộ chữ latin + vietnamese, chỉ tải khi máy DailyCalo hiện chữ. */
@font-face { font-family: 'DC Sans'; font-weight: 400; font-display: swap; src: url('/f/dc/bvp-400-vi.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'DC Sans'; font-weight: 400; font-display: swap; src: url('/f/dc/bvp-400-la.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DC Sans'; font-weight: 500; font-display: swap; src: url('/f/dc/bvp-500-vi.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'DC Sans'; font-weight: 500; font-display: swap; src: url('/f/dc/bvp-500-la.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DC Sans'; font-weight: 600; font-display: swap; src: url('/f/dc/bvp-600-vi.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'DC Sans'; font-weight: 600; font-display: swap; src: url('/f/dc/bvp-600-la.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DC Sans'; font-weight: 700; font-display: swap; src: url('/f/dc/bvp-700-vi.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'DC Sans'; font-weight: 700; font-display: swap; src: url('/f/dc/bvp-700-la.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DC Serif'; font-weight: 400; font-display: swap; src: url('/f/dc/pfd-400-vi.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'DC Serif'; font-weight: 400; font-display: swap; src: url('/f/dc/pfd-400-la.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Token màu của dailycalo.vn (bản sáng; bấm Tôi → Tối để đổi). */
.app-dailycalo {
  --bg: #f5f6f8; --ink: #0b0d12; --sub: rgba(11, 13, 18, 0.55); --faint: rgba(11, 13, 18, 0.34); --accent: #0b0d12; --on-accent: #fff;
  --track: rgba(11, 13, 18, 0.07); --bar-out: rgba(11, 13, 18, 0.22); --raised: #fff; --hairline: rgba(11, 13, 18, 0.12); --line: rgba(255, 255, 255, 0.88);
  --blob: rgba(11, 13, 18, 0.05); --data: #85c300; --data-faint: #5c8e00;
  --shadow-small: inset 0 1px 0 #fff, 0 10px 24px -14px rgba(30, 40, 80, 0.24);
  --lg-from: rgba(255, 255, 255, 0.34); --lg-to: rgba(255, 255, 255, 0.06); --lg-sheen: rgba(255, 255, 255, 0.7);
  --lg-rim-hi: #fff; --lg-rim-lo: rgba(255, 255, 255, 0.25); --lg-glow: rgba(255, 255, 255, 0.75);
  --lg-drop: 0 10px 24px -14px rgba(30, 40, 80, 0.26);
  --dc-sans: 'DC Sans', 'Be Vietnam Pro', system-ui, -apple-system, sans-serif; --dc-serif: 'DC Serif', 'Playfair Display', Georgia, serif;
  --ease-enter: cubic-bezier(0.2, 0.9, 0.3, 1); --ease-pop: cubic-bezier(0.3, 1.6, 0.5, 1);
  --tx: var(--ink); --focus: var(--ink);
}
.app-dailycalo.dc-dark {
  --bg: #0a0b10; --ink: #f3f5f8; --sub: rgba(243, 245, 248, 0.56); --faint: rgba(243, 245, 248, 0.34); --accent: #f3f5f8; --on-accent: #0b0d12;
  --track: rgba(255, 255, 255, 0.1); --bar-out: rgba(255, 255, 255, 0.3); --raised: #1c1e25; --hairline: rgba(255, 255, 255, 0.16); --line: rgba(255, 255, 255, 0.13);
  --blob: rgba(243, 245, 248, 0.07); --data: #b4fc25; --data-faint: #517700;
  --shadow-small: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px -14px rgba(0, 0, 0, 0.6);
  --lg-from: rgba(255, 255, 255, 0.07); --lg-to: rgba(255, 255, 255, 0.01); --lg-sheen: rgba(255, 255, 255, 0.1);
  --lg-rim-hi: rgba(255, 255, 255, 0.42); --lg-rim-lo: rgba(255, 255, 255, 0.05); --lg-glow: rgba(255, 255, 255, 0.1);
  --lg-drop: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
}
/* Nền xám rất nhạt + hai vệt sáng tĩnh (.ambient-in của mô hình trên dailycalo.vn), toạ độ đã đổi sang màn 390. */
.ph-scr.app-dailycalo {
  background: radial-gradient(circle at 34px 218px, var(--blob), transparent 170px), radial-gradient(circle at 367px 534px, var(--blob), transparent 170px), var(--bg);
  color: var(--ink); font: 500 12px/1.55 var(--dc-sans); transition: background-color 0.3s, color 0.3s;
}
/* Mô hình trên dailycalo.vn có màn rộng 340 px: phóng lên 390 / 340 cho vừa màn của khung chung. */
.app-dailycalo .scr, .app-dailycalo .ph-nav { zoom: 1.147059; }
.app-dailycalo svg, .app-dailycalo img { display: block; max-width: 100%; }
.app-dailycalo .dc-pg.dc-flow { min-height: 100%; padding: 50px 16px 88px; }
.app-dailycalo .dc-pg.dc-fix { position: absolute; top: 50px; left: 16px; right: 16px; bottom: 84px; display: flex; flex-direction: column; }
.app-dailycalo .scr.enter { animation-name: dc-scr-in; animation-duration: 0.4s; }
@keyframes dc-scr-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } }

/* Kính Liquid Glass (khối nhỏ .small: kính thường, mép bắt sáng chuyển sắc). */
.app-dailycalo .dc-glass {
  position: relative; isolation: isolate; border: 1px solid transparent;
  background: radial-gradient(120% 90% at 18% 0%, var(--lg-sheen), transparent 55%), linear-gradient(150deg, var(--lg-from), var(--lg-to));
  -webkit-backdrop-filter: blur(6px) saturate(190%) brightness(1.05); backdrop-filter: blur(6px) saturate(190%) brightness(1.05);
  box-shadow: inset 0 1px 1px var(--lg-glow), inset 0 -6px 12px -10px var(--lg-glow), var(--lg-drop);
}
.app-dailycalo .dc-glass::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.25px; pointer-events: none;
  background: linear-gradient(135deg, var(--lg-rim-hi) 0%, var(--lg-rim-lo) 28%, transparent 50%, var(--lg-rim-lo) 72%, var(--lg-rim-hi) 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 exclude, linear-gradient(#000 0 0);
}
.app-dailycalo .dc-label { font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sub); }
/* Trên dailycalo.vn mọi nhãn trong điện thoại còn ăn luật `.hero .label` (inline-flex, cách dưới 22 px): chính khoảng thở này làm nên dáng của bản demo. */
.app-dailycalo .dc-label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; }

/* Đầu màn: nhãn nhỏ + tiêu đề Playfair (bộ chữ có đủ dấu tiếng Việt). */
.app-dailycalo .dc-head { position: relative; display: flex; justify-content: space-between; align-items: flex-end; margin: 8px 2px 14px; }
.app-dailycalo .dc-head .dc-label { font-size: 8.5px; }
.app-dailycalo .dc-head h4 { margin: 2px 0 0; font: 400 26px/1.1 var(--dc-serif); letter-spacing: 0; }
.app-dailycalo .dc-date { font-size: 10px; color: var(--sub); padding-bottom: 4px; }
.app-dailycalo .dc-card { position: relative; display: block; border-radius: 22px; padding: 14px; margin-bottom: 10px; }
.app-dailycalo button.dc-card { width: 100%; text-align: left; }

/* Vòng kcal + macro */
.app-dailycalo .dc-kcal { display: flex; align-items: center; gap: 16px; }
.app-dailycalo .dc-ring { position: relative; flex: none; width: 104px; height: 104px; }
.app-dailycalo .dc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.app-dailycalo .dc-track { stroke: var(--track); }
.app-dailycalo .dc-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.app-dailycalo .dc-center b { font-size: 22px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.app-dailycalo .dc-center small { font-size: 7.5px; letter-spacing: 0.12em; color: var(--sub); margin-top: 3px; }
.app-dailycalo .dc-arc { stroke: var(--data); stroke-dasharray: var(--len, 189) 400; transition: stroke-dasharray 1.6s var(--ease-enter); }
.app-dailycalo.dc-arm:not(.in) .dc-arc { stroke-dasharray: 0 400; }
.app-dailycalo .dc-macros { flex: 1; min-width: 0; display: grid; gap: 9px; }
.app-dailycalo .dc-macro .dc-row { display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; font-size: 10px; margin-bottom: 4px; }
.app-dailycalo .dc-macro .dc-row b { font-weight: 700; }
.app-dailycalo .dc-macro .dc-row span { color: var(--sub); }
.app-dailycalo .dc-bar { height: 6px; border-radius: 6px; background: var(--track); overflow: hidden; }
.app-dailycalo .dc-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--data); transition: width 1.4s var(--ease-enter) 0.2s; }
.app-dailycalo [data-k='b-p'] { --w: 47%; } .app-dailycalo [data-k='b-c'] { --w: 64%; } .app-dailycalo [data-k='b-f'] { --w: 57%; }
.app-dailycalo.dc-arm:not(.in) .dc-bar i { width: 0; }

/* Bữa hôm nay */
.app-dailycalo .dc-l85 { font-size: 8.5px; }
.app-dailycalo .dc-meal { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.app-dailycalo .dc-meal + .dc-meal { border-top: 1px solid var(--track); }
.app-dailycalo .dc-thumb { flex: none; width: 38px; height: 38px; border-radius: 12px; overflow: hidden; background: var(--track); display: grid; place-items: center; color: var(--sub); }
.app-dailycalo .dc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.app-dailycalo .dc-thumb svg { width: 20px; height: 20px; }
.app-dailycalo .dc-name { flex: 1; min-width: 0; }
.app-dailycalo .dc-name b { display: block; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-dailycalo .dc-name span { display: block; font-size: 9.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-dailycalo .dc-k { font-size: 12px; font-weight: 600; }
.app-dailycalo .dc-new { animation: dc-rise 0.5s var(--ease-enter) both; }
.app-dailycalo .dc-new .dc-k { color: var(--data-faint); }
@keyframes dc-rise { from { opacity: 0; transform: translateY(8px); } }

/* Nút mở màn Chụp món */
.app-dailycalo .dc-snap { display: flex; align-items: center; gap: 12px; padding: 12px 14px; transition: transform 0.35s var(--ease-pop); }
.app-dailycalo .dc-snap:active { transform: scale(0.97); }
.app-dailycalo .dc-snapi { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent); color: var(--on-accent); }
.app-dailycalo .dc-snapi svg { width: 20px; height: 20px; }
.app-dailycalo .dc-snapt { flex: 1; min-width: 0; }
.app-dailycalo .dc-snapt b { display: block; font-size: 11.5px; font-weight: 600; }
.app-dailycalo .dc-snapt span { display: block; font-size: 9.5px; color: var(--sub); line-height: 1.4; }
.app-dailycalo .dc-snap > svg { flex: none; width: 16px; height: 16px; color: var(--faint); }

/* Màn Chụp món: khung quét #quet của dailycalo.vn, thu về cỡ màn điện thoại. */
.app-dailycalo .dc-x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ink); transition: transform 0.35s var(--ease-pop); }
.app-dailycalo .dc-x svg { width: 16px; height: 16px; }
.app-dailycalo .dc-x:active { transform: scale(0.9); }
.app-dailycalo .dc-scanner { border-radius: 24px; padding: 10px; }
.app-dailycalo .dc-photo { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--track); }
.app-dailycalo .dc-dish { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s, transform 0.5s var(--ease-enter), filter 0.3s; }
.app-dailycalo .dc-scanning .dc-dish { opacity: 0.7; transform: scale(1.03); filter: saturate(0.6); }
.app-dailycalo .dc-line { display: none; position: absolute; left: 0; right: 0; height: 2px; background: var(--data); box-shadow: 0 0 14px 3px color-mix(in srgb, var(--data) 60%, transparent); }
.app-dailycalo .dc-scanning .dc-line { display: block; animation: dc-scan 2.2s cubic-bezier(0.45, 0, 0.55, 1) 1 both; }
@keyframes dc-scan { 0% { top: 96%; } 50% { top: 4%; } 100% { top: 96%; } }
.app-dailycalo .dc-tag { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 999px; font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; }
.app-dailycalo .dc-items { margin-top: 8px; display: grid; gap: 1px; }
.app-dailycalo .dc-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 5px; border-radius: 12px; text-align: left; transition: opacity 0.25s, background 0.2s; animation: dc-rise 0.45s var(--ease-enter) both; }
.app-dailycalo .dc-item:nth-child(2) { animation-delay: 60ms; } .app-dailycalo .dc-item:nth-child(3) { animation-delay: 120ms; } .app-dailycalo .dc-item:nth-child(4) { animation-delay: 180ms; }
.app-dailycalo .dc-item + .dc-item { border-top: 1px solid var(--track); }
.app-dailycalo .dc-check { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--on-accent); transition: transform 0.35s var(--ease-pop), background 0.2s; }
.app-dailycalo .dc-check svg { width: 11px; height: 11px; }
.app-dailycalo .dc-iname { display: block; flex: 1; min-width: 0; font-size: 11px; font-weight: 600; line-height: 1.35; }
.app-dailycalo .dc-iname span { display: block; font-size: 9px; font-weight: 500; color: var(--sub); }
.app-dailycalo .dc-item .dc-k { font-size: 11.5px; }
.app-dailycalo .dc-off { opacity: 0.45; }
.app-dailycalo .dc-off .dc-check { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); transform: scale(0.88); }
.app-dailycalo .dc-off .dc-check svg { opacity: 0; }
.app-dailycalo .dc-off .dc-k { text-decoration: line-through; }
.app-dailycalo .dc-skel { pointer-events: none; }
.app-dailycalo .dc-skel .dc-check { background: var(--track); }
.app-dailycalo .dc-skel .dc-iname, .app-dailycalo .dc-skel .dc-k { height: 10px; border-radius: 5px; background: var(--track); animation: dc-skel 1.1s ease-in-out infinite alternate; }
.app-dailycalo .dc-skel .dc-iname { max-width: 55%; }
.app-dailycalo .dc-skel .dc-k { flex: none; width: 28px; }
@keyframes dc-skel { to { opacity: 0.45; } }
.app-dailycalo .dc-scan-actions { display: flex; gap: 6px; margin-top: 8px; }
.app-dailycalo .dc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 6px 12px; border-radius: 14px; font: 600 10.5px/1.25 var(--dc-sans); white-space: normal; text-align: center; transition: transform 0.35s var(--ease-pop), opacity 0.2s; }
.app-dailycalo .dc-btn svg { width: 15px; height: 15px; flex: none; }
.app-dailycalo .dc-btn:active { transform: scale(0.95); }
.app-dailycalo .dc-btn:disabled { cursor: default; opacity: 0.45; }
.app-dailycalo .dc-ghost { flex: none; color: var(--ink); border: 1px solid var(--hairline); background: linear-gradient(150deg, var(--lg-from), var(--lg-to)); }
.app-dailycalo .dc-primary { flex: 1; min-width: 0; gap: 0; background: var(--accent); color: var(--on-accent); }
.app-dailycalo .dc-primary.dc-done { opacity: 1; background: linear-gradient(135deg, #4cc25a, #34a443); color: #fff; box-shadow: 0 10px 22px -12px rgba(52, 164, 67, 0.75); }
.app-dailycalo .dc-long { display: none; }
.app-dailycalo .dc-try { display: flex; align-items: center; gap: 8px; margin: 12px 2px 0; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--hairline); font-size: 9.5px; line-height: 1.35; color: var(--sub); }
.app-dailycalo .dc-try i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--data); color: var(--data); animation: dc-pulse 1.8s ease-in-out infinite; }
@keyframes dc-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px currentColor; } }

/* Biểu đồ */
.app-dailycalo .dc-ml { font-size: 8.5px; }
.app-dailycalo .dc-big { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.04em; margin: 2px 0 10px; white-space: nowrap; }
.app-dailycalo .dc-big small { font-size: 11px; color: var(--sub); letter-spacing: 0; }
.app-dailycalo .dc-sub { display: block; font-size: 9.5px; color: var(--sub); }
.app-dailycalo .dc-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; height: 92px; align-items: end; }
.app-dailycalo .dc-bars span { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; padding-bottom: 14px; }
.app-dailycalo .dc-bars i { width: 6px; height: var(--a, 0); border-radius: 4px; background: var(--data); transition: height 1.2s var(--ease-enter); }
.app-dailycalo .dc-bars i + i { background: var(--bar-out); }
.app-dailycalo .dc-bars small { position: absolute; bottom: 0; font-size: 8px; color: var(--sub); }
.app-dailycalo .dc-weight { display: grid; grid-template-columns: 1fr 110px; align-items: center; gap: 10px; }
.app-dailycalo .dc-weight .dc-big { margin-bottom: 2px; }
.app-dailycalo .dc-weight svg { width: 100%; height: 40px; }
.app-dailycalo .dc-wline { stroke: var(--data); }
.app-dailycalo .dc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.app-dailycalo .dc-stats .dc-card { padding: 10px; margin: 0; }
.app-dailycalo .dc-stats b { display: block; font-size: 15px; letter-spacing: -0.03em; margin-top: 2px; }

/* David */
.app-dailycalo .dc-orbrow { display: flex; align-items: center; gap: 10px; margin: 2px 2px 12px; }
.app-dailycalo .dc-orb { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(from 0deg, var(--ink), var(--data), var(--faint), var(--ink)); animation: dc-spin 6s linear infinite; }
.app-dailycalo .dc-orb::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: var(--raised); filter: blur(2px); opacity: 0.85; }
.app-dailycalo .dc-orb.dc-thinking { animation-duration: 1.2s; }
@keyframes dc-spin { to { transform: rotate(360deg); } }
.app-dailycalo .dc-chat { flex: 1; min-height: 0; display: grid; gap: 7px; align-content: start; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.app-dailycalo .dc-chat::-webkit-scrollbar { display: none; }
.app-dailycalo .dc-chat > * { animation: dc-rise 0.4s var(--ease-enter) both; }
.app-dailycalo .dc-msg { max-width: 84%; padding: 8px 11px; font-size: 10.5px; line-height: 1.45; }
.app-dailycalo .dc-msg.dc-me { justify-self: end; background: var(--accent); color: var(--on-accent); border-radius: 14px 14px 4px 14px; }
.app-dailycalo .dc-msg.dc-ai { justify-self: start; border-radius: 14px 14px 14px 4px; border: 1px solid var(--hairline); box-shadow: 0 4px 10px -8px rgba(11, 13, 18, 0.35); }
.app-dailycalo .dc-msg.dc-ai::before { display: none; }
.app-dailycalo .dc-typing { display: inline-flex; gap: 4px; width: max-content; padding: 9px 11px; }
.app-dailycalo .dc-typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--sub); animation: dc-blink 1s ease-in-out infinite; }
.app-dailycalo .dc-typing i:nth-child(2) { animation-delay: 0.15s; } .app-dailycalo .dc-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dc-blink { 50% { opacity: 0.25; transform: translateY(-2px); } }
.app-dailycalo .dc-receipts { margin-top: -3px; }
.app-dailycalo .dc-receipt { display: inline-block; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--hairline); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sub); }
.app-dailycalo .dc-suggest { flex: none; display: flex; gap: 5px; margin-top: 8px; padding: 3px 1px 4px; overflow-x: auto; scrollbar-width: none; }
.app-dailycalo .dc-suggest::-webkit-scrollbar { display: none; }
.app-dailycalo .dc-suggest button { flex: none; padding: 6px 10px; border: 1px solid var(--hairline); border-radius: 999px; font: 500 9.5px/1 var(--dc-sans); color: var(--ink); transition: transform 0.35s var(--ease-pop), background 0.2s; }
.app-dailycalo .dc-suggest button:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .app-dailycalo .dc-suggest button:hover { background: var(--track); transform: translateY(-1px); } }
.app-dailycalo .dc-input { display: flex; align-items: center; justify-content: space-between; height: 36px; margin-top: 12px; padding: 0 4px 0 12px; border-radius: 14px; font-size: 10.5px; color: var(--faint); box-shadow: inset 0 2px 7px -2px rgba(11, 13, 18, 0.16), inset 0 -2px 6px -2px rgba(11, 13, 18, 0.1), inset 0 0 0 1px rgba(11, 13, 18, 0.05); }
.app-dailycalo.dc-dark .dc-input { box-shadow: inset 0 2px 7px -2px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.app-dailycalo .dc-ask { flex: none; margin-top: 4px; overflow: hidden; }
/* Chữ 16px cho iPhone khỏi tự phóng to khi bấm, rồi thu hình lại cho vừa máy mẫu. */
.app-dailycalo .dc-ask input { flex: 1; min-width: 0; width: 150%; margin-right: -50%; font: 500 16px var(--dc-sans); color: var(--ink); transform: scale(0.66); transform-origin: left center; }
.app-dailycalo .dc-ask input::placeholder { color: var(--faint); }
.app-dailycalo .dc-ask button { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); transition: transform 0.35s var(--ease-pop); }
.app-dailycalo .dc-ask button:active { transform: scale(0.9); }
.app-dailycalo .dc-ask svg { width: 13px; height: 13px; }

/* Kho, Beta: tiêu đề + chip đứng yên, danh sách cuộn trong máy, mép dưới mờ dần. */
.app-dailycalo .dc-search { flex: none; margin: 0 0 10px; }
.app-dailycalo .dc-chips { flex: none; display: flex; gap: 5px; margin-bottom: 10px; overflow: hidden; }
.app-dailycalo .dc-chips button, .app-dailycalo .dc-seg button { flex: none; padding: 5px 10px; border: 1px solid var(--hairline); border-radius: 999px; font: 500 9.5px/1 var(--dc-sans); color: var(--sub); transition: transform 0.35s var(--ease-pop); }
.app-dailycalo .dc-chips button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.app-dailycalo .dc-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 2px 1px 18px; margin: 0 -1px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
.app-dailycalo .dc-scroll::-webkit-scrollbar { display: none; }
.app-dailycalo .dc-lib { padding: 9px 12px; margin-bottom: 6px; }
.app-dailycalo .dc-lib b { font-size: 11.5px; font-weight: 600; }
.app-dailycalo .dc-lib p { max-height: 0; overflow: hidden; margin: 0; font-size: 10px; color: var(--sub); transition: max-height 0.4s var(--ease-enter), margin 0.3s; }
.app-dailycalo .dc-lib.dc-open p { max-height: 80px; margin-top: 6px; }
.app-dailycalo .dc-pro, .app-dailycalo .dc-profile { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-bottom: 6px; }
.app-dailycalo .dc-pro > div, .app-dailycalo .dc-profile > div { flex: 1; min-width: 0; }
.app-dailycalo .dc-pro b, .app-dailycalo .dc-profile b { font-size: 11.5px; font-weight: 600; }
.app-dailycalo .dc-av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--track); font-size: 10px; font-weight: 600; }
.app-dailycalo .dc-connect { flex: none; padding: 6px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 600 9.5px/1 var(--dc-sans); transition: transform 0.35s var(--ease-pop), background 0.2s; }
.app-dailycalo .dc-connect.dc-sent { background: var(--track); color: var(--sub); }
.app-dailycalo .dc-connect:active, .app-dailycalo .dc-chips button:active, .app-dailycalo .dc-mrow:active { transform: scale(0.94); }
.app-dailycalo .dc-in { animation: dc-rise 0.35s var(--ease-enter) both; }

/* Tôi */
.app-dailycalo .dc-profile { margin-bottom: 10px; }
.app-dailycalo .dc-profile .dc-receipt { margin: 0; }
.app-dailycalo .dc-sec { margin: 12px 2px 22px; }
.app-dailycalo .dc-seg { display: flex; padding: 3px; border-radius: 999px; background: var(--track); }
.app-dailycalo .dc-seg button { flex: 1; border: 0; padding: 7px 0; text-align: center; }
.app-dailycalo .dc-seg button.on { background: var(--raised); color: var(--ink); box-shadow: var(--shadow-small); }
.app-dailycalo .dc-list { padding: 4px 12px; }
.app-dailycalo .dc-mrow { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 0; font: 500 11px var(--dc-sans); color: var(--ink); transition: transform 0.35s var(--ease-pop); }
.app-dailycalo .dc-mrow + .dc-mrow { border-top: 1px solid var(--track); }
.app-dailycalo .dc-sw { position: relative; width: 30px; height: 18px; border-radius: 9px; background: var(--track); transition: background 0.25s; }
.app-dailycalo .dc-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--raised); box-shadow: 0 1px 3px rgba(11, 13, 18, 0.25); transition: transform 0.35s var(--ease-pop); }
.app-dailycalo .dc-sw.on { background: var(--data); }
.app-dailycalo .dc-sw.on::after { transform: translateX(12px); }

/* Thanh tab (kính, 6 mục) */
.app-dailycalo .dc-tabbar { position: absolute; left: 10px; right: 10px; bottom: 18px; height: 56px; border-radius: 22px; display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; }
.app-dailycalo .dc-tabbar button { display: grid; justify-items: center; gap: 2px; font-size: 8px; font-weight: 600; line-height: 1.4; color: var(--ink); opacity: 0.5; text-align: center; transition: opacity 0.2s, transform 0.35s var(--ease-pop); }
.app-dailycalo .dc-tabbar button.on { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .app-dailycalo .dc-tabbar button:hover { opacity: 1; } }
.app-dailycalo .dc-tabbar button:active { transform: scale(0.92); }
.app-dailycalo .dc-tabbar svg { width: 19px; height: 19px; }

@media (prefers-reduced-motion: reduce) {
  .app-dailycalo *, .app-dailycalo *::before, .app-dailycalo *::after { animation: none !important; transition: none !important; }
}

/* ═════════════ manseru — wabi-sabi, nổi/lõm mềm (src/lib/theme.ts), Noto Serif + Be Vietnam Pro ═════════════ */
.app-manseru { --bg: #ece6dc; --paper: #f4efe7; --sunk: #e2dbcf; --ink: #2b2621; --t2: #574f46; --mu: #887e71; --fa: #b0a594; --line: rgba(60, 48, 36, 0.09); --matcha: #5e7f72; --kaki: #c2643a; --tx: #2b2621; --focus: #c2643a; --raise: 5px 6px 12px rgba(120, 100, 78, 0.22), -4px -4px 10px rgba(255, 255, 255, 0.8), inset 1px 1px 0 rgba(255, 255, 255, 0.65); --raiseS: 2px 3px 6px rgba(120, 100, 78, 0.22), -2px -2px 6px rgba(255, 255, 255, 0.85); --insetS: inset 1px 2px 4px rgba(120, 100, 78, 0.22), inset -1px -1px 3px rgba(255, 255, 255, 0.7); font-family: 'Be Vietnam Pro', -apple-system, sans-serif; }
.ms-pad { padding: 60px 0 120px; }
.ms-pad2 { padding: 54px 0 120px; }
.ms-lbl { display: block; font-weight: 500; font-size: 10.5px; line-height: 14px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mu); }
.ms-lbl.kaki { color: var(--kaki); }
.ms-h1 { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; }
.ms-ht { flex: 1; min-width: 0; }
.ms-ht b { display: block; font-family: 'Noto Serif', Georgia, serif; font-weight: 400; font-size: 26px; line-height: 35px; }
.ms-ib { min-width: 44px; height: 44px; padding: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--paper); box-shadow: var(--raiseS); font-size: 18px; color: var(--ink); }
.ms-ib.kaki { color: var(--kaki); }
.ms-ib.w { padding: 0 12px; }
.ms-ib b { font-weight: 500; font-size: 13px; }
.ms-slab { height: 44px; padding: 0 14px; border-radius: 14px; display: grid; place-items: center; background: var(--paper); box-shadow: var(--raiseS); font-weight: 500; font-size: 14px; letter-spacing: 0.2px; }
.ms-h2 { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; }
.ms-seg { flex: 1; display: flex; padding: 3px; border-radius: 13px; background: var(--sunk); box-shadow: var(--insetS); }
.ms-seg button { flex: 1; min-height: 40px; padding: 0 6px; border-radius: 10px; font-size: 12.5px; color: var(--mu); white-space: nowrap; text-align: center; }
.ms-seg button.on { background: var(--paper); box-shadow: var(--raiseS); color: var(--ink); font-weight: 500; }
.ms-seg2 { margin: 12px 16px 0; flex: none; }
.ms-seg3 { margin: 6px 16px 0; flex: none; }
.ms-dh { display: flex; padding: 14px 8px 6px 52px; }
.ms-dh span { flex: 1; display: grid; justify-items: center; gap: 3px; }
.ms-dh small { font-size: 10.5px; letter-spacing: 0.4px; color: var(--mu); }
.ms-dh b { width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; font-family: 'Noto Serif', serif; font-weight: 400; font-size: 15px; }
.ms-dh .today small { color: var(--kaki); }
.ms-dh .today b { background: var(--kaki); color: #fff8f0; }
.ms-grid { position: relative; display: flex; height: 624px; padding-right: 8px; }
.ms-gut { position: relative; width: 44px; flex: none; }
.ms-gut small { position: absolute; right: 8px; margin-top: -7px; font-size: 10px; color: var(--mu); }
.ms-gut small:first-child { margin-top: 0; }
.ms-cols { position: relative; flex: 1; display: flex; }
.ms-lines i { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.ms-col { position: relative; flex: 1; border-left: 1px solid var(--line); }
.ms-col:first-of-type { border-left: 0; }
.ms-col.today { background: rgba(194, 100, 58, 0.025); }
.ms-blk { position: absolute; left: 0; right: 0; padding: 2px 8px 0 7px; background: color-mix(in srgb, var(--c) 5.6%, transparent); }
.ms-blk i { position: absolute; left: 0; top: 1px; bottom: 1px; width: 3px; border-radius: 2px; background: var(--c); opacity: 0.55; }
.ms-blk small { font-weight: 500; font-size: 9px; letter-spacing: 0.8px; text-transform: uppercase; color: color-mix(in srgb, var(--c) 40%, var(--ink)); }
.ms-ev { position: absolute; left: 3px; right: 3px; overflow: hidden; padding: 3px 5px 3px 8px; border-radius: 9px; background: color-mix(in srgb, var(--c) 14%, var(--paper)); text-align: left; display: flex; flex-direction: column; }
.ms-ev i { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); opacity: 0.9; }
.ms-ev b { font-weight: 500; font-size: 11.5px; line-height: 14px; }
.ms-ev small { font-size: 10px; color: var(--t2); }
.ms-now { position: absolute; left: -4px; right: 0; height: 8px; margin-top: -4px; display: flex; align-items: center; }
.ms-now::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: var(--kaki); box-shadow: 0 0 6px rgba(194, 100, 58, 0.6); }
.ms-now i { flex: 1; height: 1.5px; border-radius: 1px; background: var(--kaki); }
.ms-gantt { display: flex; margin: 14px 0 0; height: 300px; }
.ms-gls { position: relative; z-index: 2; width: 142px; flex: none; border-radius: 0 16px 16px 0; background: var(--paper); box-shadow: var(--raiseS); }
.ms-ghd { height: 44px; }
.ms-gsec { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 8px 0 10px; font-weight: 500; font-size: 10.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--mu); }
.ms-gsec i { width: 8px; height: 8px; border-radius: 4px; background: var(--c); }
.ms-gl { height: 34px; display: flex; align-items: center; padding: 0 6px 0 26px; font-size: 11.5px; line-height: 14px; }
.ms-gl.b { font-weight: 500; }
.ms-gtr { position: relative; flex: 1; margin-left: -12px; padding-left: 12px; background: var(--sunk); box-shadow: var(--insetS); overflow: hidden; }
.ms-gtr .ms-ghd { position: relative; border-bottom: 1px solid var(--line); }
.ms-gtr .ms-ghd b { position: absolute; left: 18px; top: 7px; font-family: 'Noto Serif', serif; font-weight: 400; font-size: 13px; }
.ms-gtr .ms-ghd span { position: absolute; left: 12px; top: 28px; display: flex; }
.ms-gtr .ms-ghd small { width: 36px; padding-left: 4px; font-size: 10px; color: var(--mu); }
.ms-gtr .ms-ghd small.today { color: var(--kaki); font-weight: 500; }
.ms-gtoday { position: absolute; top: 0; bottom: 0; width: 1.5px; margin-left: 12px; background: var(--kaki); opacity: 0.7; }
.ms-gb { position: absolute; height: 18px; margin-left: 12px; border-radius: 6px; background: color-mix(in srgb, var(--c) 30%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.ms-gb.done { background: color-mix(in srgb, var(--c) 55%, var(--paper)); }
.ms-hdr { display: flex; align-items: flex-end; gap: 8px; padding: 16px 20px 12px; }
.ms-hdr > b { flex: 1; font-family: 'Noto Serif', Georgia, serif; font-weight: 400; font-size: 24px; line-height: 33px; }
.ms-add { display: flex; align-items: center; gap: 12px; margin: 0 16px; padding: 12px 14px; border-radius: 18px; background: var(--sunk); box-shadow: var(--insetS); color: var(--fa); font-size: 15px; }
.ms-add .i { font-size: 16px; color: var(--ink); }
.ms-sec { margin: 16px 24px 8px; }
.ms-slab2 { margin: 0 16px; padding: 4px 14px; border-radius: 16px; background: var(--paper); box-shadow: var(--raiseS); }
.ms-tr { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.ms-tr:first-child { border-top: 0; }
.ms-chk { font-size: 19px; color: var(--fa); }
.ms-chk .onl, .ms-chk.on .off { display: none; }
.ms-chk.on { color: var(--matcha); }
.ms-chk.on .onl { display: inline-block; }
.ms-cb { width: 3px; align-self: stretch; border-radius: 2px; background: var(--c); opacity: 0.85; }
.ms-tt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ms-tt b { font-weight: 400; font-size: 15px; }
.ms-tt small { font-size: 12px; color: var(--mu); }
.ms-tr.done .ms-tt b { color: var(--mu); text-decoration: line-through; }
.ms-pr { font-size: 12px; letter-spacing: 1px; color: var(--fa); }
.ms-pr.hi { color: var(--kaki); }
.scr[data-s='kaito'] { overflow: hidden; }
.ms-kai { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 54px 0 112px; }
.ms-msgs { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 8px 20px; display: flex; flex-direction: column; gap: 14px; }
.ms-msgs::-webkit-scrollbar { display: none; }
.ms-hello { padding-top: 30px; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 28px; }
.ms-sugs { display: grid; gap: 12px; margin-top: 8px; }
.ms-sugs button { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 16px; background: var(--paper); box-shadow: var(--raiseS); font-size: 14px; color: var(--t2); text-align: left; }
.ms-sugs .i { font-size: 14px; color: var(--kaki); }
.ms-me { align-self: flex-end; max-width: 86%; padding: 10px 14px; border-radius: 16px 16px 5px 16px; background: var(--paper); box-shadow: var(--raiseS); font-size: 15px; line-height: 21px; }
.ms-ai { display: grid; gap: 10px; }
.ms-ai > p { font-size: 15px; line-height: 23px; }
.ms-card { display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: var(--paper); box-shadow: var(--raiseS); }
.ms-card.faded { box-shadow: var(--insetS); }
.ms-card.faded b { text-decoration: line-through; }
.ms-cs { display: flex; align-items: center; gap: 10px; }
.ms-cs .i { font-size: 15px; color: var(--matcha); }
.ms-cs b { font-weight: 500; font-size: 14px; }
.ms-card small { padding-left: 25px; font-size: 12px; line-height: 17px; color: var(--t2); }
.ms-ca { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.ms-ca small { font-size: 12px; color: var(--mu); }
.ms-tb { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 14px; font-size: 13px; color: var(--mu); }
.ms-tb.raised { background: var(--paper); box-shadow: var(--raiseS); color: var(--matcha); font-weight: 500; }
.ms-comp { display: flex; align-items: center; gap: 8px; margin: 0 16px; padding: 6px 6px 6px 16px; border-radius: 18px; background: var(--sunk); box-shadow: var(--insetS); }
.ms-comp label { flex: 1; }
.ms-comp input { width: 100%; padding: 8px 0; font-size: 15px; }
.ms-comp input::placeholder { color: var(--fa); }
.ms-comp input:focus-visible { outline: 0; }
.ms-send { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--paper); box-shadow: var(--raiseS); font-size: 17px; }
.ms-rows { margin-top: 20px; }
.ms-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; }
.ms-row:first-child { border-top: 0; }
.ms-row .i { font-size: 17px; color: var(--t2); }
.ms-row span { flex: 1; text-align: left; }
.ms-row small { font-size: 13px; color: var(--mu); }
.ms-row .ms-chev { font-size: 16px; color: var(--fa); }
.ms-navw { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 14px 28px; background: var(--paper); }
.ms-nav { position: relative; display: flex; border-radius: 24px; background: var(--paper); box-shadow: var(--raise); }
.ms-tab { flex: 1; min-height: 56px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 9px 0; color: var(--fa); }
.ms-tab .i { font-size: 20px; }
.ms-tab span { font-size: 10px; letter-spacing: 0.2px; }
.ms-tab.on { color: var(--ink); }
.ms-tab.on span { font-weight: 500; }
.ms-mark { position: absolute; bottom: 5px; left: 10%; width: 18px; height: 2px; margin-left: -9px; border-radius: 1px; background: var(--kaki); transition: left 0.4s cubic-bezier(0.3, 1.3, 0.5, 1); }
.ph-scr[data-nav='gantt'] .ms-mark { left: 30%; } .ph-scr[data-nav='tasks'] .ms-mark { left: 50%; } .ph-scr[data-nav='kaito'] .ms-mark { left: 70%; } .ph-scr[data-nav='settings'] .ms-mark { left: 90%; }
.ms-h1.c { gap: 6px; }
.ms-ht b.c { font-size: 20px; line-height: 28px; }
.ms-slab.c { padding: 0 11px; font-size: 13px; }

/* ═════════════ Midarex — HUD tối (src/lib/theme.tsx), Inter Tight + IBM Plex Mono ═════════════ */
.app-midarex { --bg: #07080a; --sf: #0d0f12; --sf2: #14171b; --bd: #1d2228; --bds: #2c333b; --tx: #e8ecef; --t2: #99a3ad; --t3: #5c6670; --acc: #3fd8ff; --accs: rgba(63, 216, 255, 0.1); --ok: #3dd39a; --warn: #ffb224; --warns: rgba(255, 178, 36, 0.1); --red: #ff4f5e; --reds: rgba(255, 79, 94, 0.11); --focus: #3fd8ff; font-family: 'Inter Tight', -apple-system, sans-serif; }
.mx-grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(150, 170, 190, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 170, 190, 0.045) 1px, transparent 1px), linear-gradient(rgba(150, 170, 190, 0.06) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(150, 170, 190, 0.06) 1.5px, transparent 1.5px); background-size: 24px 24px, 24px 24px, 96px 96px, 96px 96px; }
.mx-pad { position: relative; padding: 62px 16px 110px; display: grid; gap: 12px; align-content: start; }
.mx-lbl { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: 10.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--t2); white-space: nowrap; }
.mx-lbl.t3 { color: var(--t3); } .mx-lbl.acc { color: var(--acc); } .mx-lbl.danger { color: var(--red); }
.mx-lbl.mono { text-transform: none; font-weight: 400; font-size: 11px; letter-spacing: 0.2px; }
.mx-mono { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--t3); }
.mx-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mx-sp { flex: 1; }
.mx-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding-bottom: 4px; }
.mx-hdt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.mx-hdt b { font-weight: 700; font-size: 24px; line-height: 29px; letter-spacing: -0.6px; }
.mx-hdt small { font-size: 13px; line-height: 18px; color: var(--t2); }
.mx-live { width: 6px; height: 6px; border-radius: 3px; background: var(--acc); box-shadow: 0 0 6px var(--acc); flex: none; }
.mx-live.red { width: 5px; height: 5px; background: var(--red); box-shadow: 0 0 6px var(--red); }
@media (prefers-reduced-motion: no-preference) { .mx-live { animation: mx-pulse 1.6s ease-in-out infinite; } .idle .mx-live { animation-play-state: paused; } @keyframes mx-pulse { 50% { opacity: 0.35; } } }
.mx-ib { width: 40px; height: 40px; flex: none; border-radius: 3px; display: grid; place-items: center; border: 0.5px solid var(--bd); background: var(--sf); font-size: 18px; color: var(--t2); }
.mx-ib.s { width: 28px; height: 28px; border: 0; background: none; font-size: 15px; }
.mx-kpis { display: flex; gap: 8px; }
.mx-kpi { flex: 1; display: grid; gap: 4px; padding: 11px; border-radius: 3px; border: 0.5px solid var(--bd); background: var(--sf); text-align: left; }
.mx-kpi .mx-lbl { font-size: 9.5px; }
.mx-kpi b { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 30px; line-height: 38px; letter-spacing: -1.4px; }
.mx-kpi small { font-size: 12px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-kpi .mx-ar { font-size: 12px; color: var(--t3); }
.mx-kpi.danger { background: var(--reds); border-color: rgba(255, 79, 94, 0.45); }
.mx-kpi.danger b { color: var(--red); }
.mx-ticker { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 0.5px solid var(--bd); border-bottom: 0.5px solid var(--bd); overflow: hidden; white-space: nowrap; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--t2); }
.mx-card { border-radius: 3px; border: 0.5px solid var(--bd); background: var(--sf); overflow: hidden; }
.mx-ph { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-bottom: 0.5px solid var(--bd); }
.mx-tk { display: flex; gap: 12px; width: 100%; padding-right: 14px; border-top: 0.5px solid var(--bd); text-align: left; }
.mx-ph + .mx-tk { border-top: 0; }
.mx-tkb { width: 3px; flex: none; background: var(--bds); }
.mx-tkb.red { background: var(--red); } .mx-tkb.amber { background: var(--warn); }
.mx-tki { flex: 1; min-width: 0; display: grid; gap: 5px; padding: 10px 0; }
.mx-tki b { font-weight: 500; font-size: 15px; line-height: 21px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mx-cap { font-size: 12px; color: var(--t3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mx-bd { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 1px 6px; border-radius: 2px; border: 0.5px solid; font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 11px; letter-spacing: 0.3px; white-space: nowrap; }
.mx-bd .i { font-size: 10px; }
.mx-bd.danger { color: var(--red); background: var(--reds); border-color: rgba(255, 79, 94, 0.4); }
.mx-bd.warn { color: var(--warn); background: var(--warns); border-color: rgba(255, 178, 36, 0.4); }
.mx-bd.neutral { color: var(--t2); background: var(--sf2); border-color: rgba(153, 163, 173, 0.4); }
.mx-bd.acc { color: var(--acc); background: var(--accs); border-color: rgba(63, 216, 255, 0.4); }
.mx-task { display: grid; gap: 4px; padding: 10px 14px; border-top: 0.5px solid var(--bd); }
.mx-ph + .mx-task { border-top: 0; }
.mx-task b { font-weight: 500; font-size: 13px; line-height: 18px; }
.mx-ch { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-top: 0.5px solid var(--bd); text-align: left; }
.mx-ph + .mx-ch { border-top: 0; }
.mx-hash { width: 32px; height: 32px; flex: none; border-radius: 3px; display: grid; place-items: center; background: var(--sf2); border: 0.5px solid var(--bd); font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: var(--acc); }
.mx-chi { flex: 1; min-width: 0; display: grid; gap: 3px; }
.mx-chi b { flex: 1; font-weight: 600; font-size: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mx-chi > small { font-size: 12px; color: var(--t2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mx-un { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 2px; background: var(--acc); color: #07080a; font-style: normal; font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 11px; line-height: 18px; text-align: center; }
.mx-av { width: 32px; height: 32px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--sf2); border: 0.5px solid var(--bds); font-weight: 600; font-size: 13px; color: var(--t2); }
.scr[data-s='thread'], .scr[data-s='alex'] { overflow: hidden; }
.mx-th, .mx-alex { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 58px 0 0; }
.mx-alex { padding-bottom: 92px; }
.mx-pad0 { padding: 4px 16px 8px; }
.mx-thd { display: flex; align-items: center; gap: 10px; padding: 4px 16px 10px; border-bottom: 0.5px solid var(--bd); }
.mx-thd b { flex: 1; font-weight: 600; font-size: 15px; }
.mx-msgs { position: relative; flex: 1; overflow-y: auto; scrollbar-width: none; padding: 12px 16px; display: flex; flex-direction: column; gap: 14px; }
.mx-msgs::-webkit-scrollbar { display: none; }
.mx-m { display: flex; gap: 10px; }
.mx-m > span:not(.mx-av) { flex: 1; min-width: 0; display: grid; gap: 3px; }
.mx-m b { font-weight: 600; font-size: 13px; }
.mx-m p { font-size: 15px; line-height: 21px; color: var(--tx); }
.mx-m.me { justify-content: flex-end; }
.mx-m.me > span { flex: none; max-width: 80%; padding: 8px 12px; border-radius: 3px; background: var(--accs); border: 0.5px solid rgba(63, 216, 255, 0.38); }
.mx-m.mx-plain { align-self: flex-end; max-width: 82%; padding: 8px 12px; border-radius: 3px; background: var(--accs); border: 0.5px solid rgba(63, 216, 255, 0.38); font-size: 15px; line-height: 21px; }
.mx-ai { display: grid; gap: 8px; padding: 12px; border-radius: 3px; border: 0.5px solid var(--bd); background: var(--sf); }
.mx-ai p { font-size: 15px; line-height: 21px; }
.mx-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mx-sugs { position: relative; display: flex; padding: 0 16px 10px; }
.mx-sugs button { padding: 8px 12px; border-radius: 3px; border: 0.5px dashed var(--bds); font-size: 13px; color: var(--t2); text-align: left; }
.mx-in { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 16px 0; padding: 6px 6px 6px 12px; border-radius: 3px; border: 0.5px solid var(--bds); background: var(--sf); }
.mx-th .mx-in { margin-bottom: 34px; }
.mx-in label { flex: 1; }
.mx-in input { width: 100%; padding: 8px 0; font-size: 15px; }
.mx-in input::placeholder { color: var(--t3); }
.mx-in input:focus-visible { outline: 0; }
.mx-in:focus-within { border-color: var(--acc); }
.mx-send { width: 36px; height: 36px; border-radius: 3px; display: grid; place-items: center; background: var(--acc); color: #07080a; font-size: 16px; }
.mx-btn { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 3px; background: var(--acc); color: #07080a; font-weight: 600; font-size: 13px; white-space: nowrap; }
.mx-seg { display: flex; border: 0.5px solid var(--bd); border-radius: 3px; background: var(--sf); }
.mx-seg button { flex: 1; padding: 9px 0; font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--t3); text-align: center; border-bottom: 2px solid transparent; }
.mx-seg button.on { color: var(--tx); border-color: var(--acc); background: var(--sf2); }
.mx-mg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mx-mi { display: grid; gap: 10px; padding: 14px; border-radius: 3px; border: 0.5px solid var(--bd); background: var(--sf); text-align: left; }
.mx-mi .i { font-size: 20px; color: var(--acc); }
.mx-mi b { font-weight: 600; font-size: 15px; }
.mx-sec { margin-top: 4px; }
.mx-scope { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 6px; }
.mx-tls { display: block; padding: 0 14px 12px; }
.mx-nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; padding-bottom: 26px; border-top: 0.5px solid var(--bd); background: var(--sf); }
.mx-tab { position: relative; flex: 1; display: grid; justify-items: center; gap: 4px; padding: 9px 0 4px; color: var(--t3); }
.mx-tl { position: absolute; top: -0.5px; width: 28px; height: 2px; background: transparent; }
.mx-tab .i { font-size: 20px; }
.mx-tab span { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase; }
.mx-tab.on { color: var(--tx); }
.mx-tab.on .i { color: var(--acc); }
.mx-tab.on .mx-tl { background: var(--acc); }


/* KAIGAN: máy tính xách tay (khung kiểu MacBook, CSS) + iPhone nằm ngang (khung chung) đè góc dưới phải */
.prod-kaigan .prod-stage { flex-direction: column; align-items: stretch; gap: 12px; }
.prod-kaigan .prod-stage > .mono-s { text-align: center; }
.kg-duo { --kp: 0.3; position: relative; width: 100%; max-width: 560px; margin: 0 auto; padding-bottom: calc(422px * var(--kp) * 0.42); }
.lap { width: 90%; }
.lap-lid { position: relative; width: 88%; margin: 0 auto; padding: 2.4% 2.4% 2.8%; border-radius: 14px 14px 4px 4px; background: #0b0b0c;
  box-shadow: inset 0 0 0 1px #3a3a3f, inset 0 0 0 2px #0b0b0c, 0 0 0 1px rgba(0, 0, 0, 0.6); }
.lap-cam { position: absolute; top: 0.9%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #1f1f23; box-shadow: inset 0 0 0 1px #2a2a2e; }
.lap-scr { container-type: inline-size; position: relative; aspect-ratio: 16 / 10; display: flex; flex-direction: column; overflow: hidden; border-radius: 3px; background: #000; }
.lap-bar { flex: none; height: 8.6cqw; display: flex; align-items: center; gap: 1.1cqw; padding: 0 2.4cqw; background: var(--carbon); border-bottom: 1px solid var(--graphite); }
.lap-bar i { width: 1.3cqw; height: 1.3cqw; background: var(--graphite); }
.lap-url { margin: 0 auto; min-width: 0; width: 46%; padding: 0.9cqw 0; border: 1px solid var(--graphite); background: var(--ink); color: var(--mist); font-family: var(--mono); font-size: 2.3cqw; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kg-lap { flex: 1; min-height: 0; width: 100%; height: auto; object-fit: cover; object-position: top; }
/* đế nhôm: mép trước sáng, khe mở nắp ở giữa, gờ bàn phím mờ */
.lap-base { position: relative; height: 0; padding-bottom: 3.4%; border-radius: 2px 2px 14px 14px / 2px 2px 60% 60%;
  background: linear-gradient(180deg, #4a4a50 0%, #2c2c31 38%, #18181b 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 30px 50px -24px rgba(0, 0, 0, 0.9); }
.lap-base::before { content: ''; position: absolute; top: 0; left: 50%; width: 15%; height: 42%; margin-left: -7.5%; border-radius: 0 0 8px 8px; background: #141416; }
.lap-base::after { content: ''; position: absolute; top: 0; left: 6%; right: 6%; height: 1px; background: rgba(0, 0, 0, 0.5); }
.kg-duo .phf.land { --k: var(--kp); position: absolute; right: 0; bottom: 0; z-index: 2; }
.kg-duo .ph-dev { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 0 0 6px #0b0b0c, 0 40px 70px -20px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.6); }
.app-kaigan { --bg: #000; }
.app-kaigan .scr { overflow: hidden; }
.kg-mob { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1120px) { .kg-duo { --kp: 0.25; } }
@media (max-width: 960px) { .kg-duo { --kp: 0.22; } }
@media (max-width: 820px) { .kg-duo { --kp: 0.3; } }
@media (max-width: 600px) { .kg-duo { --kp: 0.22; } }
@media (max-width: 420px) { .kg-duo { --kp: 0.2; } }
@media (max-width: 340px) { .kg-duo { --kp: 0.17; } }