/* ============================================================================
 *  /form — APP mobile-first (SAIGON SMILE · Phân tích cơ thể & theo dõi)
 *  Phong cách theo ảnh mẫu img_app: nền xám nhạt, card trắng bo lớn, chữ đậm,
 *  icon nét mảnh đơn sắc, tab bar dạng viên thuốc + nút (+) đen. Cam thương hiệu
 *  chỉ dùng làm điểm nhấn (vòng calo, chuỗi ngày, cảnh báo).
 * ==========================================================================*/

:root, [data-theme="light"]{
  --bg:#f4f4f5; --panel:#ffffff; --panel-2:#f7f7f8; --track:#efeff1; --line:#e9e9ec;
  --ink:#111113; --ink-inv:#ffffff; --txt:#18181b; --muted:#71717a; --soft:#a1a1aa;
  --accent:#ec7700; --accent-soft:#fff2e5;
  --good:#16a34a; --warn:#d97706; --bad:#dc2626; --info:#2563eb;
  --p:#ef6c3b; --c:#e9a21f; --f:#6f8ff0;
  --shadow:0 1px 2px rgba(17,17,19,.04), 0 6px 24px rgba(17,17,19,.05);
  --scrim:rgba(17,17,19,.38);
  --r-lg:24px; --r-md:18px; --r-sm:14px;
  --glow:#fde6d6;
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0e0e10; --panel:#1a1a1d; --panel-2:#222226; --track:#2a2a2f; --line:#2c2c31;
  --ink:#fafafa; --ink-inv:#111113; --txt:#f4f4f5; --muted:#a1a1aa; --soft:#71717a;
  --accent:#ff9a3d; --accent-soft:#3a2413;
  --good:#4ade80; --warn:#fbbf24; --bad:#f87171; --info:#60a5fa;
  --shadow:none; --scrim:rgba(0,0,0,.6); --glow:#2a1a10;
  color-scheme:dark;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--txt);
  background:radial-gradient(90% 320px at 85% 0, var(--glow), transparent 70%) no-repeat, var(--bg);
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
[hidden]{display:none !important}
b,strong{font-weight:600}
.emo{display:inline-block; vertical-align:middle; flex:0 0 auto}
.ic{width:22px; height:22px; flex:0 0 auto; display:inline-block; vertical-align:middle}

.shell{max-width:480px; margin:0 auto; min-height:100vh; min-height:100dvh; position:relative}
.screen{min-height:100vh; min-height:100dvh; padding-top:env(safe-area-inset-top)}
.pad{padding:0 16px}
.muted{color:var(--muted)} .sm{font-size:.88rem} .center{text-align:center} .tight{margin:-4px 0 10px}
.between{display:flex; align-items:center; justify-content:space-between; gap:10px}

/* ── Typo ── */
.display{font-size:1.75rem; line-height:1.18; font-weight:600; letter-spacing:-.02em; margin:18px 0 8px}
.display.sm{font-size:1.45rem; margin:14px 0 4px}
.h2{font-size:1.3rem; font-weight:600; letter-spacing:-.01em; margin:30px 0 12px}
.label{font-weight:600; font-size:.95rem; margin:22px 0 10px; display:flex; align-items:center; gap:8px}
.opt-tag{font-size:.7rem; font-weight:600; color:var(--muted); background:var(--track); padding:2px 8px; border-radius:100px}

/* ── Top nav ── */
.topnav{display:flex; align-items:center; justify-content:space-between; gap:10px; height:60px; padding:0 16px;
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.topnav .brand{height:26px; width:auto}
.topnav-title{font-weight:600; font-size:1.02rem}
.logo-dark{display:none} [data-theme="dark"] .logo-dark{display:block} [data-theme="dark"] .logo-light{display:none}
.icon-btn{width:42px; height:42px; border-radius:50%; border:0; background:var(--panel); display:grid; place-items:center;
  cursor:pointer; box-shadow:var(--shadow)}
.icon-btn.ghost{background:transparent; box-shadow:none}
.step-count{font-size:.85rem; color:var(--muted); font-weight:600; min-width:42px; text-align:right}

/* ── Buttons ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer;
  border-radius:100px; font-weight:600; font-size:1rem; padding:15px 22px; text-decoration:none; transition:transform .12s, opacity .12s}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn-dark{background:var(--ink); color:var(--ink-inv)}
.btn-soft{background:var(--track); color:var(--txt)}
.btn-line{background:transparent; border:1.5px solid var(--line); color:var(--txt)}
.btn-danger{background:transparent; color:var(--bad)}
.btn-sm{padding:9px 16px; font-size:.88rem}
.btn-block{width:100%; margin-top:10px}

/* ── Cards / list ── */
.card{background:var(--panel); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:18px}
.card + .card{margin-top:12px}
.card.list{padding:4px 18px}
.card.list .row{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--line)}
.card.list .row:first-child{border-top:0}
.card.list .row b{display:block; font-size:.98rem}
.card.list .row small{display:block; color:var(--muted); font-size:.85rem}
.num{width:30px; height:30px; border-radius:50%; background:var(--track); display:grid; place-items:center; font-weight:600; font-size:.88rem; flex:0 0 auto}
.card-h{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.card-h h3{margin:0; font-size:1.08rem; font-weight:600}
.card-h .link{font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:2px; cursor:pointer; background:none; border:0; padding:0}
.card-h .link .ic{width:16px; height:16px}

/* ── Welcome ── */
.hero-card{position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/10; margin-top:4px}
.hero-card img{width:100%; height:100%; object-fit:cover}
.hero-tag{position:absolute; left:14px; bottom:14px; background:rgba(255,255,255,.92); color:#111; font-size:.8rem; font-weight:600;
  padding:6px 12px; border-radius:100px}
.ticks{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-wrap:wrap; gap:8px 16px; color:var(--muted); font-size:.86rem}
.ticks li{display:flex; align-items:center; gap:6px} .ticks .ic{width:16px; height:16px; color:var(--good)}
.hscroll{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; margin:12px -16px 0; padding:0 16px 4px; scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll img{flex:0 0 72%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-md); scroll-snap-align:start}
.foot{color:var(--soft); font-size:.8rem; text-align:center; padding:28px 0 36px; line-height:1.7}
.foot a{text-decoration:underline}

/* ── Wizard ── */
.pbar{height:4px; background:var(--track); margin:0 16px; border-radius:100px; overflow:hidden}
.pbar i{display:block; height:100%; width:0; background:var(--ink); border-radius:100px; transition:width .35s ease}
.wizard{padding-bottom:120px}
.step{display:none; animation:fade .3s ease}
.step.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.seg{display:flex; background:var(--track); border-radius:100px; padding:4px; gap:4px}
.seg-it{flex:1; position:relative; cursor:pointer}
.seg-it input{position:absolute; opacity:0; pointer-events:none}
.seg-it span{display:block; text-align:center; padding:11px 6px; border-radius:100px; font-weight:600; color:var(--muted); transition:.15s}
.seg-it input:checked + span{background:var(--panel); color:var(--txt); box-shadow:0 1px 3px rgba(0,0,0,.08)}
.seg.mini .seg-it span{padding:8px 2px; font-size:.86rem}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px}
.stat-in{background:var(--panel); border-radius:var(--r-md); padding:12px 14px 10px; box-shadow:var(--shadow); display:block; position:relative; cursor:text}
.stat-in .lb{display:block; font-size:.78rem; color:var(--muted); font-weight:600}
.stat-in input{width:100%; border:0; outline:0; background:transparent; color:var(--txt); font:inherit; font-size:1.55rem; font-weight:600;
  padding:2px 30px 0 0; -moz-appearance:textfield}
.stat-in input::-webkit-outer-spin-button,.stat-in input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.stat-in input::placeholder{color:var(--soft); font-weight:600}
.stat-in .un{position:absolute; right:12px; bottom:14px; font-size:.8rem; color:var(--soft); font-weight:600}
.stat-in:focus-within{box-shadow:0 0 0 2px var(--ink)}
.stat-in .seg{margin-top:6px}

.bmi-live{margin-top:12px}
.bmi-cls{font-size:.9rem}
.bmi-val{font-size:2.2rem; font-weight:600; line-height:1.1; margin:4px 0 12px}
.bmi-bar{height:8px; border-radius:100px; position:relative;
  background:linear-gradient(90deg,#60a5fa 0 14%,#22c55e 14% 32%,#eab308 32% 40%,#f97316 40% 60%,#ef4444 60% 100%)}
.bmi-bar .pin{position:absolute; top:-5px; width:18px; height:18px; border-radius:50%; background:var(--panel);
  border:3px solid var(--ink); transform:translateX(-50%); transition:left .3s ease; left:0}
.bmi-scale{display:flex; justify-content:space-between; font-size:.68rem; color:var(--soft); margin-top:8px}

.opts{padding:2px 16px}
.opt{display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid var(--line); cursor:pointer}
.opt:first-child{border-top:0}
.opt input{position:absolute; opacity:0; pointer-events:none}
.opt .t{flex:1; font-weight:500}
.opt .radio{width:22px; height:22px; border-radius:50%; border:2px solid var(--line); flex:0 0 auto; transition:.15s}
.opt.sel .radio{border:7px solid var(--ink)}
.opt.sel .t{font-weight:600}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative; cursor:pointer}
.chip input{position:absolute; opacity:0; pointer-events:none}
.chip span{display:block; padding:9px 14px; border-radius:100px; background:var(--panel); box-shadow:var(--shadow);
  font-size:.88rem; font-weight:500; transition:.15s}
.chip.sel span{background:var(--ink); color:var(--ink-inv)}

.goal-live{margin-top:10px; padding:12px 14px; border-radius:var(--r-sm); font-size:.9rem; background:var(--panel); box-shadow:var(--shadow);
  border-left:4px solid var(--muted)}
.goal-live.is-lose{border-left-color:var(--accent)} .goal-live.is-gain{border-left-color:var(--good)} .goal-live.is-keep{border-left-color:var(--info)}

.drop{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding:26px 16px; margin-top:14px;
  border:1.5px dashed var(--soft); border-radius:var(--r-lg); cursor:pointer; background:var(--panel)}
.drop-ic{width:56px; height:56px; border-radius:50%; background:var(--track); display:grid; place-items:center; margin-bottom:8px}
.drop-ic .ic{width:26px; height:26px}
.drop small{color:var(--muted); font-size:.82rem}
.photo-preview{position:relative; display:inline-block; margin-top:12px}
.photo-preview img{max-height:240px; border-radius:var(--r-md)}
.photo-preview .rm{position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:50%; border:0;
  background:rgba(0,0,0,.6); color:#fff; display:grid; place-items:center; cursor:pointer}
.photo-preview .rm .ic{width:16px; height:16px}
.pose-status{margin-top:10px; font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:6px}
.pose-status .ic{width:16px; height:16px}

.field{display:block; margin-top:12px}
.field .lb{display:block; font-size:.82rem; color:var(--muted); font-weight:600; margin:0 0 6px 4px}
.input{width:100%; padding:14px 16px; font:inherit; font-size:1rem; color:var(--txt); background:var(--panel); border:0; border-radius:var(--r-sm);
  outline:0; box-shadow:var(--shadow)}
.input:focus{box-shadow:0 0 0 2px var(--ink)}
.who-box{display:flex; align-items:center; gap:12px; margin-top:24px}
.who-box small{display:block; color:var(--muted); font-size:.82rem}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color:var(--muted); margin-top:16px}
.consent input{margin-top:3px; accent-color:var(--ink)}
.consent a{text-decoration:underline}
.err{color:var(--bad); font-size:.86rem; margin-top:12px; min-height:1.2em}

.dock{position:fixed; left:0; right:0; bottom:0; z-index:25; padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--bg) 70%, transparent); max-width:480px; margin:0 auto}
.dock .btn-block{margin-top:0}

.analyzing{text-align:center; padding:70px 24px}
.analyzing h2{font-size:1.3rem; margin:6px 0}
.pulse-ring{width:96px; height:96px; margin:0 auto 26px; border-radius:50%; background:var(--panel); position:relative; box-shadow:var(--shadow)}
.pulse-ring::before,.pulse-ring::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--accent); animation:ripple 1.8s ease-out infinite}
.pulse-ring::after{animation-delay:.9s}
@keyframes ripple{from{transform:scale(.6); opacity:.9} to{transform:scale(1.8); opacity:0}}
.pulse-mark{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; object-fit:contain}

/* ══ APP ═══════════════════════════════════════════════════════════════════ */
.tab{padding:0 16px calc(120px + env(safe-area-inset-bottom))}
.hello{display:flex; align-items:center; gap:12px; padding:14px 0 6px}
.hello .who{flex:1; min-width:0}
.hello small{display:block; color:var(--muted); font-size:.9rem}
.hello b{display:block; font-size:1.12rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.avatar{width:48px; height:48px; border-radius:50%; background:#5b5fc7; color:#fff; display:grid; place-items:center; font-weight:600; font-size:1.15rem; flex:0 0 auto}
.avatar.sm{width:40px; height:40px; font-size:1rem}
.avatar.lg{width:76px; height:76px; font-size:1.8rem}
.pill-btn{height:42px; min-width:42px; padding:0 12px; border-radius:100px; border:0; background:var(--panel); box-shadow:var(--shadow);
  display:inline-flex; align-items:center; gap:4px; font-weight:600; cursor:pointer}
.pill-btn .ic{color:var(--accent)}
.tab-title{font-size:1.6rem; font-weight:600; letter-spacing:-.02em; margin:16px 0 14px}

/* Dải tuần */
.month-lbl{font-weight:600; font-size:1.05rem; margin:14px 0 8px}
.week{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.wd{border:0; background:transparent; padding:8px 0 10px; border-radius:18px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer}
.wd small{font-size:.78rem; color:var(--muted)}
.wd span{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:.92rem;
  border:1.5px dashed var(--soft)}
.wd.logged span{border:2px solid var(--accent)}
.wd.future{opacity:.4; pointer-events:none} .wd.future span{border-style:solid; border-color:var(--line)}
.wd.sel{background:var(--panel); box-shadow:var(--shadow)} .wd.sel small{color:var(--txt); font-weight:600}

/* CTA chụp bữa */
.cta{display:flex; gap:14px; align-items:center; margin-top:12px}
.cta-art{width:92px; height:92px; border-radius:var(--r-md); background:var(--panel-2); color:var(--muted); display:grid; place-items:center; flex:0 0 auto}
.cta-art .ic{width:46px; height:46px; stroke-width:1.4}
.cta h4{margin:0 0 2px; font-size:1.05rem; line-height:1.3}
.cta p{margin:0 0 10px; color:var(--muted); font-size:.85rem}

/* Vòng calo */
.kc{display:flex; align-items:center; gap:18px}
.ring{position:relative; flex:0 0 auto}
.ring svg{display:block; transform:rotate(-90deg)}
.ring .mid{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.ring .mid b{font-size:2rem; font-weight:600; line-height:1}
.ring .mid small{font-size:.78rem; color:var(--muted); margin-top:4px}
.kc-side{display:flex; flex-direction:column; gap:12px}
.kc-side small{display:block; color:var(--muted); font-size:.82rem}
.kc-side b{font-size:1.15rem}

.macro3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px}
.mcard{background:var(--panel); border-radius:var(--r-md); padding:12px; box-shadow:var(--shadow)}
.mcard .mh{display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--muted)}
.mcard .mh i{width:8px; height:8px; border-radius:50%; display:inline-block}
.mcard b{display:block; font-size:.98rem; margin:8px 0 6px}
.mcard small{display:block; font-size:.75rem; color:var(--muted); margin-top:6px}
.bar{height:6px; background:var(--track); border-radius:100px; overflow:hidden}
.bar > i{display:block; height:100%; border-radius:100px; background:var(--ink)}

.score{display:flex; align-items:baseline; gap:2px}
.score b{font-size:2rem; font-weight:600} .score small{color:var(--soft); font-size:1rem}
.seg3{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:12px 0 10px}
.seg3 i{height:5px; border-radius:100px; background:var(--track)}
.seg3 i.on{background:var(--ink)}
.note{font-size:.85rem; color:var(--muted); margin:0}

.wt{display:flex; align-items:flex-end; justify-content:space-between; gap:12px}
.wt .big{font-size:2rem; font-weight:600; line-height:1}
.wt .big small{font-size:.9rem; color:var(--soft); font-weight:600}
.delta{font-size:.82rem; font-weight:600; padding:3px 9px; border-radius:100px; background:var(--track)}
.delta.good{color:var(--good)} .delta.bad{color:var(--bad)}

.rep{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:6px 0 12px}
.rep div{background:var(--panel-2); border-radius:var(--r-sm); padding:10px}
.rep small{display:block; font-size:.72rem; color:var(--muted)}
.rep b{font-size:1.05rem}
.btn-row{display:flex; gap:8px} .btn-row .btn{flex:1; margin:0}

/* Danh sách bữa */
.sec{display:flex; align-items:center; justify-content:space-between; margin:28px 0 10px}
.sec h3{margin:0; font-size:1.25rem; font-weight:600}
.meal-row{display:flex; gap:12px; align-items:center; padding:10px; background:var(--panel); border-radius:var(--r-md); box-shadow:var(--shadow); cursor:pointer}
.meal-row + .meal-row{margin-top:10px}
.meal-row .ph{display:grid; place-items:center; color:var(--soft)}
.meal-row img,.meal-row .ph{width:64px; height:64px; border-radius:var(--r-sm); object-fit:cover; flex:0 0 auto; background:var(--track)}
.meal-row .mi{flex:1; min-width:0}
.meal-row b{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.meal-row small{display:block; color:var(--muted); font-size:.8rem}
.meal-row .kc2{font-weight:600; white-space:nowrap}
.empty{text-align:center; padding:26px 10px; color:var(--muted)}
.empty b{display:block; color:var(--txt); font-size:1rem; margin-top:4px}

/* Tab bar + FAB */
.tabbar{position:fixed; z-index:30; bottom:calc(12px + env(safe-area-inset-bottom));
  left:max(16px, calc(50vw - 224px)); right:calc(max(16px, calc(50vw - 224px)) + 76px);
  display:flex; background:color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:100px; padding:6px; box-shadow:0 8px 30px rgba(0,0,0,.10)}
.tabbar button{flex:1; border:0; background:transparent; border-radius:100px; padding:8px 4px 6px; display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--muted); font-size:.74rem; font-weight:600; cursor:pointer}
.tabbar button.on{background:var(--track); color:var(--txt)}
.fab{position:fixed; z-index:31; bottom:calc(12px + env(safe-area-inset-bottom)); right:max(16px, calc(50vw - 224px));
  width:64px; height:64px; border-radius:50%; border:0; background:var(--ink); color:var(--ink-inv); display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(0,0,0,.22); cursor:pointer; transition:transform .2s}
.fab .ic{width:28px; height:28px}
.fab.open{transform:rotate(45deg); z-index:61}

/* Menu (+) */
.quick{position:fixed; z-index:60; left:max(16px, calc(50vw - 224px)); right:max(16px, calc(50vw - 224px));
  bottom:calc(92px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr 1fr; gap:12px; animation:up .2s ease}
.quick button{border:0; background:var(--panel); border-radius:var(--r-md); padding:22px 12px; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-weight:600; font-size:1.02rem; cursor:pointer; box-shadow:var(--shadow)}
@keyframes up{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

/* Scrim + sheets */
.scrim{position:fixed; inset:0; z-index:50; background:var(--scrim); opacity:0; transition:opacity .22s}
.scrim.on{opacity:1}
.sheet{position:fixed; z-index:70; left:0; right:0; bottom:0; max-width:480px; margin:0 auto; background:var(--panel);
  border-radius:28px 28px 0 0; padding:10px 18px calc(20px + env(safe-area-inset-bottom)); transform:translateY(105%);
  transition:transform .28s cubic-bezier(.2,.8,.2,1); max-height:92vh; max-height:92dvh; display:flex; flex-direction:column}
.sheet.open{transform:none}
.sheet.tall{height:88vh; height:88dvh}
.sheet-body{overflow-y:auto; flex:1; margin:0 -18px; padding:0 18px; -webkit-overflow-scrolling:touch}
.grab{width:40px; height:5px; border-radius:100px; background:var(--line); margin:0 auto 10px}
.sheet-title{text-align:center; font-size:1.12rem; font-weight:600; margin:6px 0 12px}
.sheet-head{display:flex; align-items:center; justify-content:space-between; gap:8px; position:sticky; top:0; background:var(--panel); padding:4px 0 10px; z-index:2}
.sheet-head h3{margin:0; font-size:1.1rem}

/* Wheel picker cân nặng */
.wheel{position:relative; display:flex; align-items:center; justify-content:center; gap:4px; height:230px; margin:6px 0 10px; user-select:none}
.wheel-hl{position:absolute; left:0; right:0; top:50%; height:50px; transform:translateY(-50%); background:var(--panel-2); border-radius:var(--r-md); z-index:0}
.wcol{position:relative; z-index:1; height:230px; width:96px; overflow-y:scroll; scroll-snap-type:y mandatory; scrollbar-width:none; text-align:center;
  -webkit-mask-image:linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image:linear-gradient(transparent, #000 30%, #000 70%, transparent)}
.wcol::-webkit-scrollbar{display:none}
.wcol.narrow{width:60px}
.wcol .wi{height:50px; line-height:50px; scroll-snap-align:center; font-size:1.6rem; font-weight:600; color:var(--soft); transition:color .1s, font-size .1s}
.wcol .wi.on{color:var(--txt); font-size:2.3rem; font-weight:600}
.wcol .sp{height:90px}
.wdot{position:relative; z-index:1; font-size:2rem; font-weight:600}
.wunit{position:relative; z-index:1; font-weight:600; margin-left:14px}

/* Kết quả bữa ăn */
.meal-hero{border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3; background:var(--track); position:relative}
.meal-hero img{width:100%; height:100%; object-fit:cover}
.scan{position:absolute; inset:0; background:linear-gradient(transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); background-size:100% 220%;
  animation:scan 1.6s linear infinite}
@keyframes scan{from{background-position:0 100%} to{background-position:0 -100%}}
.meal-title{font-size:1.3rem; font-weight:600; margin:14px 0 2px; line-height:1.25}
.meal-kcal{display:flex; align-items:baseline; gap:6px; margin:6px 0 12px}
.meal-kcal b{font-size:2.4rem; font-weight:600; line-height:1}
.fit{display:inline-block; font-size:.78rem; font-weight:600; padding:4px 10px; border-radius:100px; background:var(--track)}
.fit.tot{color:var(--good)} .fit.vua{color:var(--warn)} .fit.nhieu{color:var(--bad)}
.dots5{display:flex; gap:4px} .dots5 i{width:18px; height:6px; border-radius:100px; background:var(--track)} .dots5 i.on{background:var(--good)}
.items{list-style:none; padding:0; margin:12px 0 0}
.items li{display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:.92rem}
.items li span{color:var(--muted)}
.tip{background:var(--panel-2); border-radius:var(--r-sm); padding:12px 14px; font-size:.9rem; margin-top:12px; display:flex; gap:10px}
.tip .ic{width:18px; height:18px; color:var(--accent); margin-top:2px}

/* Tiến độ */
.segtab{display:flex; background:var(--track); border-radius:100px; padding:4px; margin-bottom:14px}
.segtab button{flex:1; border:0; background:transparent; padding:10px; border-radius:100px; font-weight:600; color:var(--muted); cursor:pointer}
.segtab button.on{background:var(--panel); color:var(--txt); box-shadow:0 1px 3px rgba(0,0,0,.08)}
.chart{width:100%; height:auto; display:block; overflow:visible}
.chart text{font-family:inherit; font-size:10px; fill:var(--soft)}
.chart .bar-hit{cursor:pointer}
.stats4{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px}
.stats4 div{background:var(--panel-2); border-radius:var(--r-sm); padding:10px 12px}
.stats4 small{display:block; font-size:.74rem; color:var(--muted)}
.stats4 b{font-size:1.1rem}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:.76rem; color:var(--muted); margin-top:10px}
.legend i{width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:5px; vertical-align:middle}

.cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.cal-nav b{font-size:1.1rem}
.cal-nav .icon-btn{width:38px; height:38px; background:var(--panel-2); box-shadow:none}
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:4px 2px; text-align:center}
.cal .dh{font-size:.75rem; color:var(--muted); padding:4px 0 8px}
.cal button{border:0; background:transparent; aspect-ratio:1; border-radius:50%; font-weight:600; font-size:.95rem; color:var(--muted); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; position:relative; padding:0}
.cal button i{width:5px; height:5px; border-radius:50%; display:block}
.cal button.act{color:var(--txt); background:var(--panel-2)}
.cal button.today{box-shadow:inset 0 0 0 1.5px var(--ink)}
.cal button.future{opacity:.35; pointer-events:none}
.st-under{background:var(--info)} .st-ok{background:var(--good)} .st-over{background:var(--bad)} .st-w{background:var(--accent)}

.ai-card .headline{font-weight:600; font-size:1.02rem; margin:0 0 6px}
.ai-card ul{margin:6px 0 0; padding-left:18px} .ai-card li{margin:4px 0; font-size:.9rem}
.ai-card h5{margin:14px 0 2px; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.trend{font-size:.78rem; font-weight:600; padding:3px 10px; border-radius:100px; background:var(--track)}

.rep-row{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); text-decoration:none}
.rep-row:first-child{border-top:0}
.rep-row .rd{flex:1} .rep-row small{display:block; color:var(--muted); font-size:.8rem}
.rep-row .ic{color:var(--soft)}

/* Hồ sơ */
.prof{display:flex; flex-direction:column; align-items:center; text-align:center; padding:12px 0 4px}
.prof h2{margin:12px 0 2px; font-size:1.35rem}
.prof small{color:var(--muted)}
.kv{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px}
.kv div{background:var(--panel-2); border-radius:var(--r-sm); padding:10px}
.kv small{display:block; font-size:.72rem; color:var(--muted)} .kv b{font-size:1rem}
.menu{padding:2px 18px}
.menu .mrow{display:flex; align-items:center; gap:14px; padding:15px 0; border-top:1px solid var(--line); width:100%; background:none; border-left:0; border-right:0; border-bottom:0;
  text-align:left; cursor:pointer; text-decoration:none; font-size:.98rem}
.menu .mrow:first-child{border-top:0}
.menu .mrow span{flex:1}
.menu .mrow .ic:last-child{color:var(--soft); width:18px; height:18px}
.menu .mrow.danger{color:var(--bad)}
.switch{width:46px; height:28px; border-radius:100px; background:var(--track); position:relative; transition:.2s; flex:0 0 auto}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.2s}
.switch.on{background:var(--ink)} .switch.on::after{left:21px; background:var(--ink-inv)}
.fine{font-size:.78rem; color:var(--soft); text-align:center; margin:16px 8px 0}

/* Toast + skeleton */
.toast{position:fixed; z-index:90; left:50%; transform:translateX(-50%); bottom:calc(100px + env(safe-area-inset-bottom)); background:var(--ink); color:var(--ink-inv);
  padding:11px 18px; border-radius:100px; font-size:.9rem; font-weight:600; max-width:90vw; box-shadow:0 8px 24px rgba(0,0,0,.2); animation:up .2s ease}
.sk{background:linear-gradient(90deg,var(--track),var(--panel-2),var(--track)); background-size:200% 100%; animation:sk 1.2s linear infinite; border-radius:var(--r-lg)}
@keyframes sk{from{background-position:200% 0} to{background-position:-200% 0}}
.spin{width:22px; height:22px; border-radius:50%; border:2.5px solid var(--track); border-top-color:var(--ink); animation:spin .8s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

@media (min-width:520px){
  body{background:var(--bg)}
  .hscroll img{flex-basis:60%}
}
@media (max-width:360px){
  .grid3{grid-template-columns:1fr 1fr}
  .macro3{gap:6px} .mcard{padding:10px}
  .display{font-size:1.55rem}
}

/* ── 30/09: vận động + nước uống, emoji ── */
.hello .pill-btn + .pill-btn{margin-left:-4px}
.pill-btn.round{padding:0; width:42px; justify-content:center}
.mcard .mh{gap:5px}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.act-card{border:0; text-align:left; cursor:pointer; display:flex; flex-direction:column; padding:14px; font:inherit; color:inherit; margin:0}
.card + .act-card{margin-top:0}
.act-card .card-h{margin-bottom:6px}
.act-card .card-h .t,.water .card-h .t{font-size:.92rem; color:var(--muted); display:flex; align-items:center; gap:6px}
.act-card .card-h .ic{width:16px; height:16px; color:var(--soft)}
.big-n{font-size:1.7rem; font-weight:600; line-height:1.1}
.big-n small{font-size:.95rem; color:var(--soft); font-weight:500}
.ring.sm{margin:12px auto 0}
.burn-row{display:flex; align-items:center; gap:10px; margin-top:14px}
.burn-row b{display:block; font-size:.9rem; font-weight:500} .burn-row small{display:block; font-size:.78rem; color:var(--muted)}
.water{margin-top:12px}
.wbtns{display:flex; gap:8px}
.round-btn{width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); background:var(--panel); font-size:1.15rem; line-height:1; cursor:pointer; color:var(--txt)}
.round-btn.dark{background:var(--track); border-color:var(--track)}
.cups{display:grid; grid-template-columns:repeat(8,1fr); gap:10px 8px; margin:14px 0 8px}
.cup{height:40px; border:0; padding:0; cursor:pointer; background:#eaf1fe; color:var(--muted);
  clip-path:polygon(4% 0,96% 0,84% 100%,16% 100%); border-radius:3px; display:grid; place-items:center; transition:background .15s}
.cup .ic{width:16px; height:16px}
.cup.on{background:linear-gradient(180deg,#a5c8fb,#5b9bf5)}
[data-theme="dark"] .cup{background:#1f2a3d}
.steps-in{display:flex; align-items:center; justify-content:center; gap:12px; margin:8px 0 14px}
.steps-in input{width:170px; border:0; outline:0; background:var(--panel-2); border-radius:var(--r-md); padding:12px 14px; font:inherit; font-size:2rem; font-weight:600; text-align:center; color:var(--txt)}
.steps-in span{color:var(--muted)}
.center-chips{justify-content:center}
.chip-btn{border:0; background:var(--track); border-radius:100px; padding:9px 14px; font:inherit; font-size:.88rem; cursor:pointer; color:var(--txt)}

/* Mảnh hơn nữa (user 30/09) */
b,strong{font-weight:500}
.hello b,.kc-side b,.mcard b,.rep b,.stats4 b,.kv b,.burn-row b,.meal-row b,.items b,.rep-row b{font-weight:500}
.btn{font-weight:500}
.card-h h3,.sec h3,.tab-title,.display,.h2,.meal-title,.sheet-title,.prof h2{font-weight:600}
.big-n,.ring .mid b,.score b,.wt .big,.meal-kcal b,.bmi-val,.stat-in input{font-weight:600}
.label,.opt.sel .t,.month-lbl{font-weight:500}
.tabbar button,.quick button,.seg-it span,.chip span,.wd span{font-weight:400}

/* Ô chụp bữa ăn: icon máy ảnh, bấm được */
button.cta-art{border:0; padding:0; cursor:pointer; background:var(--accent-soft); transition:transform .12s}
button.cta-art:active{transform:scale(.96)}

/* ── Ô số liệu NỔI LÊN (nền trắng + viền mảnh + bóng) thay vì nền xám chìm (user 30/09) ── */
.raise,.rep div,.kv div,.stats4 div{background:var(--panel); border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(17,17,19,.04), 0 6px 18px rgba(17,17,19,.07)}
[data-theme="dark"] .raise,[data-theme="dark"] .rep div,[data-theme="dark"] .kv div,[data-theme="dark"] .stats4 div{background:#232327; border-color:#2e2e33; box-shadow:0 6px 16px rgba(0,0,0,.35)}
.macro3 .mcard.raise{padding:12px}

/* ── Bảng món trong kết quả chụp bữa: 3 cột thẳng hàng, vuốt xoá ── */
.items-h{display:grid; grid-template-columns:minmax(0,1fr) 124px 48px; gap:8px; font-size:.72rem; color:var(--soft); margin:16px 4px 4px; text-transform:uppercase; letter-spacing:.04em}
.items-h span:last-child{text-align:right}
.items2{list-style:none; padding:0; margin:0; border-radius:var(--r-md); overflow:hidden; background:var(--panel); border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(17,17,19,.04), 0 6px 18px rgba(17,17,19,.07)}
.it{position:relative; border-top:1px solid var(--line); overflow:hidden}
.it:first-child{border-top:0}
.it-del{position:absolute; top:0; right:0; bottom:0; width:88px; border:0; background:var(--bad); color:#fff; font:inherit; font-size:.85rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer}
.it-del .ic{width:18px; height:18px}
.it-row{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 124px 48px; gap:8px; align-items:center; padding:12px 14px;
  background:var(--panel); cursor:pointer; transition:transform .22s ease}
.it.open .it-row{transform:translateX(-88px)}
.it-row .n{font-size:.92rem}
.it-row .q{font-size:.84rem; color:var(--muted); line-height:1.3}
.it-row .q small{display:block; color:var(--txt); font-size:.8rem}
.it-row b{text-align:right; font-weight:500}
[data-theme="dark"] .items2,[data-theme="dark"] .it-row{background:#232327}
.gram-row{display:flex; align-items:center; gap:10px}
.gram-row .input{text-align:center; font-size:1.3rem; font-weight:600}
.gram-row .round-btn{width:44px; height:44px; flex:0 0 auto}

/* ── Nút 3D đầu trang (đích + lửa), cốc 500 ml, sửa bữa ── */
.glass-btn{height:48px; min-width:48px; padding:0 8px; border-radius:100px; border:1px solid rgba(255,255,255,.8); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:4px; color:var(--txt);
  background:linear-gradient(145deg,#ffffff 0%,#fff1e4 100%);
  box-shadow:0 6px 16px rgba(236,119,0,.18), inset 0 1px 0 #fff, inset 0 -2px 4px rgba(236,119,0,.08); transition:transform .15s}
.glass-btn.wide{padding:0 14px 0 9px}
.glass-btn b{font-size:1.05rem; font-weight:600}
.glass-btn:active{transform:scale(.95)}
.glass-btn .e3d{filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}
[data-theme="dark"] .glass-btn{background:linear-gradient(145deg,#2a2a2f,#1f1a16); border-color:#333; box-shadow:0 6px 16px rgba(0,0,0,.4)}
.hello .glass-btn + .glass-btn{margin-left:4px}
.cups{grid-template-columns:repeat(6,1fr); gap:12px 10px}
.cup-w{border:0; background:none; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; font:inherit}
.cup-w .cup{width:100%; height:46px}
.cup-w small{font-size:.68rem; color:var(--soft)}
.cup-w.on .cup{background:linear-gradient(180deg,#a5c8fb,#5b9bf5)}
.cup-w.on small{color:var(--info)}
.meal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; width:100%; border:0; background:none; padding:0;
  text-align:left; font:inherit; color:inherit; cursor:pointer; margin-top:14px}
.meal-head .meal-title{display:block; margin:0 0 2px}
.edit-chip{flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; font-size:.8rem; padding:6px 11px; border-radius:100px; background:var(--track); color:var(--txt)}
.edit-chip .ic{width:14px; height:14px}
/* icon phẳng: không đổ bóng */

/* ── Khung lời chào + avatar đổi ảnh ── */
.hello.card{padding:12px 14px; margin-top:12px}
button.avatar{border:0; padding:0; cursor:pointer; position:relative; font:inherit; color:#fff}
.avatar.has-img{background:var(--track) !important; overflow:visible}
.avatar img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block}
.av-cam{position:absolute; right:-2px; bottom:-2px; width:20px; height:20px; border-radius:50%; background:var(--ink); color:var(--ink-inv);
  display:grid; place-items:center; box-shadow:0 0 0 2px var(--panel)}
.av-cam .ic{width:12px; height:12px}
.avatar.lg .av-cam{width:28px; height:28px} .avatar.lg .av-cam .ic{width:16px; height:16px}
/* ── Khung tuần: ngày hoàn thành nổi bật ── */
.week-card{margin-top:12px; padding:14px 10px 10px}
.week-card .month-lbl{margin:0 0 6px 6px}
.week-done{font-size:.78rem; color:var(--accent); background:var(--accent-soft); padding:4px 10px; border-radius:100px; margin:0 4px 6px 0; display:inline-flex; align-items:center; gap:4px}
.wd span{position:relative}
.wd.logged span{border:0; color:#fff; font-weight:600; background:linear-gradient(145deg,#ffab52,#ec7700);
  box-shadow:0 4px 10px rgba(236,119,0,.35), inset 0 1px 0 rgba(255,255,255,.35)}
.wd.logged small{color:var(--accent)}
.wd-ok{position:absolute; right:-4px; bottom:-4px; width:16px; height:16px; border-radius:50%; background:var(--good); color:#fff;
  display:grid; place-items:center; box-shadow:0 0 0 2px var(--panel)}
.wd-ok .ic{width:10px; height:10px; stroke-width:3}
.wd.sel{background:var(--panel-2); box-shadow:none}
.wd.sel.logged span{box-shadow:0 0 0 3px var(--panel), 0 0 0 5px #ec7700}

/* ── Chế độ bước chân: bấm icon đổi thong thả / nhanh / chạy ── */
div.act-card{cursor:default}
.act-hit{border:0; background:none; padding:0; text-align:left; font:inherit; color:inherit; cursor:pointer; width:100%}
.mode-btn{width:64px; height:64px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; position:relative;
  background:radial-gradient(circle at 35% 30%, #ffffff, #eef7f0); box-shadow:0 4px 12px rgba(0,0,0,.08); transition:transform .15s}
.mode-btn:active{transform:scale(.92)}

.mode-btn.fast::after{content:"»"; position:absolute; right:4px; bottom:6px; font-size:.8rem; font-weight:700; color:var(--good)}
[data-theme="dark"] .mode-btn{background:radial-gradient(circle at 35% 30%, #2f2f35, #232327)}
.mode-lbl{text-align:center; font-size:.78rem; margin-top:8px}
.mode-lbl small{display:block; color:var(--soft); font-size:.7rem}

/* ── Chi tiết bữa: tên bữa bấm để chọn, món dạng thanh, vuốt phải xoá, sửa khối lượng tại chỗ ── */
.meal-head{display:block}
.meal-head .meal-title{display:inline-flex; align-items:center; gap:4px}
.meal-head .chev{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--track); font-style:normal}
.meal-head .chev .ic{width:14px; height:14px; transform:rotate(90deg)}
.meal-head small{display:block}
.slot-list{display:flex; flex-direction:column; gap:8px}
.slot-list button{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--panel);
  font:inherit; color:inherit; cursor:pointer; text-align:left; box-shadow:0 1px 2px rgba(17,17,19,.04)}
.slot-list button span{flex:1; font-size:1rem}
.slot-list button small{color:var(--muted)}
.slot-list button.on{border-color:var(--accent); background:var(--accent-soft)}
.bars-h{display:grid; grid-template-columns:minmax(0,1fr) 92px 48px; gap:8px; font-size:.72rem; color:var(--soft); margin:16px 14px 6px; text-transform:uppercase; letter-spacing:.04em}
.bars-h span:nth-child(2){text-align:center} .bars-h span:last-child{text-align:right}
.bars{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.bar-it{position:relative; border-radius:var(--r-md); overflow:hidden}
.bar-del{position:absolute; top:50%; right:12px; width:48px; height:48px; margin-top:-24px; border:0; border-radius:50%; background:var(--bad); color:#fff;
  display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 14px rgba(220,38,38,.35); opacity:0; transform:scale(.6); transition:opacity .15s, transform .2s}
.bar-it.open .bar-del,.bar-it.sw .bar-del{opacity:1; transform:scale(1)}
.bar-del .ic{width:20px; height:20px}
.bar-row{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 92px 48px; gap:8px; align-items:center; padding:12px 14px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); transition:transform .22s ease;
  box-shadow:0 1px 2px rgba(17,17,19,.04), 0 6px 16px rgba(17,17,19,.06)}
.bar-it.open .bar-row{transform:translateX(-72px)}
.bar-row .n{font-size:.92rem; line-height:1.3}
.bar-row b{text-align:right; font-weight:500}
.q-btn{justify-self:center; border:0; cursor:pointer; font:inherit; font-size:.86rem; padding:6px 10px; border-radius:100px; background:var(--track); color:var(--txt); min-width:70px}
.q-btn.empty{color:var(--accent); background:var(--accent-soft)}
.q-edit{justify-self:center; display:flex; align-items:center; gap:4px; background:var(--panel-2); border:1.5px solid var(--ink); border-radius:100px; padding:2px 4px 2px 10px}
.q-edit input{width:48px; border:0; outline:0; background:transparent; font:inherit; font-size:.9rem; color:var(--txt); -moz-appearance:textfield}
.q-edit input::-webkit-outer-spin-button,.q-edit input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.q-unit{border:0; background:var(--ink); color:var(--ink-inv); border-radius:100px; font:inherit; font-size:.75rem; padding:3px 8px; cursor:pointer}
[data-theme="dark"] .bar-row{background:#232327; border-color:#2e2e33}

/* ── 01/10: chất xơ (4 ô macro), buổi tập, báo cáo, chọn ảnh, logo ── */
.macro4{grid-template-columns:repeat(4,1fr); gap:8px}
.macro4 .mcard{padding:10px 10px}
.macro4 .mcard .mh{font-size:.76rem; gap:4px; white-space:nowrap}
.macro4 .mcard b{font-size:.9rem; margin:6px 0 5px}
.macro4 .mcard small{font-size:.7rem}
@media (max-width:370px){ .macro4{grid-template-columns:repeat(2,1fr)} }
.hello .who{border:0; background:none; padding:0; text-align:left; font:inherit; color:inherit; cursor:pointer}
.who-chev{display:inline-block; vertical-align:middle; color:var(--soft)} .who-chev .ic{width:14px; height:14px}
.cta-btns{margin-top:2px; gap:6px} .cta-btns .btn{padding:8px 12px; font-size:.84rem; gap:5px} .cta-btns .ic{width:16px; height:16px}
.wo-card{margin-top:12px}
.wo-card .card-h .t{font-size:.92rem; color:var(--muted); display:flex; align-items:center; gap:6px}
.wo-row{display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line)}
.wo-row:first-of-type{border-top:0}
.wo-row .wi{flex:1} .wo-row .wi b{display:block; font-weight:500} .wo-row .wi small{color:var(--muted); font-size:.8rem}
.wo-row .wk{font-weight:500}
.wo-x{width:30px; height:30px; border-radius:50%; border:0; background:var(--track); color:var(--muted); display:grid; place-items:center; cursor:pointer}
.wo-x .ic{width:14px; height:14px}
.wo-types{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.wo-types button,.scan-opts button{display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 8px; border-radius:var(--r-md);
  border:1.5px solid var(--line); background:var(--panel); font:inherit; color:inherit; cursor:pointer}
.wo-types button small,.scan-opts button small{color:var(--muted); font-size:.75rem}
.wo-types button.on{border-color:var(--accent); background:var(--accent-soft)}
.scan-opts{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:6px}
.scan-opts button{padding:22px 10px}
.tab-top{display:flex; align-items:center; gap:10px; margin:12px 0 4px}
.tab-top .tab-title{flex:1; margin:4px 0 10px}
.rep-link{display:flex; align-items:center; gap:12px; width:100%; border:0; font:inherit; color:inherit; cursor:pointer; text-align:left; margin-top:12px}
.rep-link span{flex:1}
a.rep-card2{display:block; text-decoration:none; color:inherit}
.rep-card2 + .rep-card2{margin-top:10px}
.rep-card2 .between b{font-size:1.02rem} .rep-card2 .between small{display:block; color:var(--muted); font-size:.8rem}
.rep-card2 .between > .ic{color:var(--soft)}
.rep-card2 .rep{margin:12px 0 0}
.rep-card2 .rep small.up{color:var(--good)} .rep-card2 .rep small.down{color:var(--bad)}
.new-tag{display:inline-block; font-size:.7rem; color:#fff; background:var(--accent); padding:1px 8px; border-radius:100px; margin-right:6px}
.hero-card img.hero-logo-badge{position:absolute; top:12px; right:12px; width:68px; height:68px; object-fit:contain; border-radius:50%; background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.18)}

/* Trang chủ: 4 chỉ số dinh dưỡng xếp lưới 2×2 cho thoáng */
.macro22{grid-template-columns:1fr 1fr; gap:10px}
.macro22 .mcard{display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:8px; padding:12px 14px}
.macro22 .mcard .mh{grid-column:1/3}
.macro22 .mcard b{margin:6px 0 6px}
.macro22 .mcard .bar{grid-column:1/3}
.macro22 .mcard small{grid-column:1/3}

/* ── Gợi ý bữa ăn ── */
.u-link{border:0; background:none; padding:0; font:inherit; color:var(--accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-weight:500}
.u-link.sm{font-size:.84rem}
.sug-sum{display:flex; align-items:center; gap:8px; background:var(--accent-soft); border-radius:var(--r-sm); padding:10px 12px; font-size:.86rem; margin-bottom:12px}
.sug-meal{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:14px; margin-bottom:10px;
  box-shadow:0 1px 2px rgba(17,17,19,.04), 0 6px 16px rgba(17,17,19,.06)}
.sug-meal.now{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft), 0 6px 16px rgba(236,119,0,.12)}
.sug-meal .m2-h{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.sug-meal .m2-t{flex:1} .sug-meal .m2-t b{display:block; font-weight:600} .sug-meal .m2-t small{color:var(--muted); font-size:.76rem}
.sug-meal .now-tag{color:var(--accent) !important; font-weight:500}
.sug-meal .m2-kc{font-size:.8rem; color:var(--accent); background:var(--accent-soft); padding:4px 10px; border-radius:100px; white-space:nowrap}
.sug-meal .m2-list{list-style:none; margin:0; padding:0}
.sug-meal .m2-list li{display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--line); font-size:.9rem}
.sug-meal .m2-list li:first-child{border-top:0}
.sug-meal .m2-e{width:30px; display:grid; place-items:center; flex:0 0 auto}
.sug-meal .m2-n{flex:1; min-width:0}
.sug-meal .m2-q{flex:0 0 auto; max-width:44%; text-align:right; font-size:.76rem; color:var(--muted); background:var(--track); padding:3px 9px; border-radius:100px}
.sug-actions{position:sticky; bottom:0; background:var(--panel); padding:10px 0 4px; margin-top:6px}
[data-theme="dark"] .sug-meal{background:#232327; border-color:#2e2e33}
.cta-btns{flex-wrap:wrap}
.cta-btns .btn{flex:0 0 auto; white-space:nowrap; padding:8px 12px}
/* Card ghi bữa: hàng nút riêng, 2 nút bằng nhau, full chiều ngang card */
.card.cta{flex-wrap:wrap}
.card.cta > div:not(.cta-btns){flex:1 1 0; min-width:0}
.cta-btns{display:grid !important; grid-template-columns:1fr 1fr; gap:10px; width:100%; margin-top:2px}
.cta-btns .btn{width:100%; margin:0; white-space:nowrap; padding:11px 10px; font-size:.9rem; gap:6px}
.cta-btns .ic{width:17px; height:17px}
.cta p{margin-bottom:0}

/* Card calo: vận động cộng thêm vào ngân sách */
.kc-move{color:var(--good)}
.kc-eq{margin:12px 0 0; padding-top:10px; border-top:1px dashed var(--line); font-size:.8rem}

/* Món của bạn trong Gợi ý bữa ăn */
.sug-meal li.mine .m2-n{font-weight:500}
.mine-tag{display:block; font-size:.7rem; color:var(--accent); font-weight:500}
.sug-sum small{color:var(--muted)}

/* Điểm sức khoẻ 3 phần */
.hs3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0 10px}
.hs-bar{height:6px; border-radius:100px; background:var(--track); overflow:hidden}
.hs-bar i{display:block; height:100%; border-radius:100px}
.hs3 small{display:block; font-size:.72rem; color:var(--muted); margin-top:6px}
.hs3 small b{color:var(--txt); font-weight:600}

/* Lịch tháng: 2 chấm (ăn uống + tập luyện) */
.cal button .dots{display:flex; gap:2px; height:5px}
.st-wo{background:#8b5cf6}
.sec .link{font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:2px; cursor:pointer; background:none; border:0; padding:0; font-family:inherit}
.sec .link .ic{width:16px; height:16px}

/* ══ Công tắc thương hiệu TẮT (html.nobrand) ══ */
.nobrand .brand-only{display:none !important}
.hero-logo-only{position:relative; background:#fff; border-radius:var(--r-lg); display:grid; place-items:center; padding:18px 0 14px; box-shadow:var(--shadow); margin-top:4px}
.hero-logo-only img{width:min(78%, 300px); height:auto}
.hero-logo-only .hero-tag{position:absolute; left:14px; bottom:14px; background:var(--track); color:#111; font-size:.8rem; font-weight:600; padding:6px 12px; border-radius:100px}
.nobrand .topnav .brand{height:46px}