/* =========================================================================
   TapEasy — Stylesheet
   Ngôn ngữ thiết kế: "Obsidian Kinetic" (theo Stitch reference)
   - Nền tối tuyệt đối, accent cam-đỏ rực (#FF7A45), điểm nhấn cam đào (#FFB08A)
   - Headline: Oswald (condensed, in hoa, mạnh mẽ) — Body/Label: Hanken Grotesk
   - Icon: Material Symbols Rounded (filled)
   ========================================================================= */

:root{
  --bg: #061A24;
  --surface: #161616;
  --surface-2: #1e1e1e;
  --surface-3: #262626;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --primary: #FF7A45;
  --primary-dark: #E0582A;
  --primary-soft: #FFB08A;
  --text: #ffffff;
  --text-muted: #a8a4a4;
  --text-dim: #6f6b6b;
  --success: #5EE6C7;
  --warn: #FFB08A;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-card: 0 8px 24px rgba(0,0,0,0.45);
  --nav-h: 76px;
  --topbar-h: 56px;
}

*{ box-sizing: border-box; margin:0; padding:0; }

html,body{
  height:100%;
  background: #050505;
  color: var(--text);
  font-family:var(--font-ui,'Inter',sans-serif);
  -webkit-font-smoothing: antialiased;
}

body{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  min-height:100vh;
}

h1,h2,h3,h4, .headline{
  font-family:var(--font-head,'Inter Tight','Inter',sans-serif);
  text-transform: uppercase;
  font-weight:700;
  letter-spacing: 0.3px;
  line-height:1.08;
}

.material-symbols-rounded{
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; }

/* ---------------- App shell ---------------- */
#app-shell{
  width:100%;
  max-width:460px;
  height:100vh;
  height:100dvh;
  background: var(--bg);
  position:relative;
  box-shadow: 0 0 60px rgba(0,0,0,0.6);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

#app-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  position:relative;
  display:flex;
  flex-direction:column;
}

@media (min-width:520px){
  html,body{ background:#000; }
  #app-shell{ height: 94vh; margin: 3vh 0; border-radius: 36px; border: 8px solid #101010; }
}

.screen{
  display:none;
  flex-direction:column;
  flex:1;
  animation: fadeIn .25s ease;
}
.screen.active{ display:flex; }

@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

/* ---------------- Top bar ---------------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  height:var(--topbar-h);
  padding: 0 16px;
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar .logo{
  font-family:var(--font-head,'Inter Tight','Inter',sans-serif);
  font-weight:700;
  font-size:20px;
  color: var(--primary);
  letter-spacing:1px;
}
.topbar button.icon-btn{ color:var(--text); }
.topbar.transparent{
  position:absolute; left:0; right:0; background:transparent; border:none;
}

.icon-btn{
  background:none; border:none; color:var(--text);
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.icon-btn:active{ background: rgba(255,255,255,0.08); }

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  min-height:300px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 20px 20px 24px;
  background-size:cover; background-position:center;
  color:#fff;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,6,6,0.15) 0%, rgba(6,6,6,0.55) 55%, rgba(6,6,6,0.96) 100%);
}
.hero-content{ position:relative; z-index:1; }
.hero-eyebrow{
  color: var(--primary-soft);
  font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  margin-bottom:6px;
}
.hero-title{ font-size:30px; }
.hero-title .accent{ color: var(--primary); }
.hero.small{ min-height:170px; }

/* ---------------- Content container ---------------- */
.content{ padding: 16px 16px 8px; display:flex; flex-direction:column; gap:14px; flex:1; }

/* ---------------- Card ---------------- */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding:16px;
  box-shadow: var(--shadow-card);
}
.card-title{
  font-family:var(--font-head,'Inter Tight','Inter',sans-serif); text-transform:uppercase; font-weight:700;
  font-size:13px; letter-spacing:1px; color:var(--text-muted);
  display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.card-title .material-symbols-rounded{ font-size:18px; color:var(--primary); }

/* ---------------- Buttons ---------------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius: 14px;
  padding: 15px 20px;
  font-family:var(--font-head,'Inter Tight','Inter',sans-serif); font-weight:700; text-transform:uppercase;
  letter-spacing:0.8px; font-size:14px;
  transition: transform .12s ease, filter .12s ease;
}
.btn:active{ transform: scale(0.97); }
.btn-block{ width:100%; }
.btn-primary{
  background: linear-gradient(135deg, var(--primary) 0%, #FF9466 100%);
  color:#fff;
  box-shadow: 0 8px 20px rgba(255,122,69,0.35);
}
.btn-outline{
  background: transparent; color:#fff; border:1px solid var(--border-strong);
}
.btn-soft{
  background: var(--primary-soft); color:#061A24;
}
.btn-sm{ padding:9px 14px; font-size:12px; border-radius:10px; }
.btn-ghost{ background:none; color:var(--text-muted); }
.btn-fab{
  position:absolute; right:16px; bottom:16px;
  width:56px; height:56px; border-radius:50%;
  background: var(--primary-soft); color:#061A24;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 22px rgba(255,176,138,0.35);
  border:none; font-size:26px;
}

/* ---------------- Pills / badges ---------------- */
.pill{
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 12px; border-radius:20px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
  background: var(--surface-3); color:var(--text-muted);
  border:1px solid var(--border);
}
.pill.active, .pill.hot{ background: rgba(255,122,69,0.16); color: var(--primary-soft); border-color: rgba(255,122,69,0.4); }
.badge-pro{
  background: linear-gradient(135deg, var(--primary), #FF9466);
  color:#fff; font-weight:700; font-size:12px; letter-spacing:1px;
  padding:5px 14px; border-radius:20px; text-transform:uppercase;
  display:inline-block;
}

/* ---------------- Day tabs ---------------- */
.day-tabs{
  display:flex; gap:22px; overflow-x:auto; padding: 4px 16px 12px;
  border-bottom:1px solid var(--border);
  scrollbar-width:none;
}
.day-tabs::-webkit-scrollbar{ display:none; }
.day-tab{
  background:none; border:none; color: var(--text-dim);
  font-family:var(--font-head,'Inter Tight','Inter',sans-serif); font-weight:600; font-size:13px; letter-spacing:0.5px;
  padding-bottom:10px; white-space:nowrap; position:relative; text-transform:uppercase;
}
.day-tab.active{ color:#fff; }
.day-tab.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--primary);
}
.day-tab.rest{ color: var(--text-dim); }

/* ---------------- Progress ---------------- */
.progress-track{
  width:100%; height:8px; border-radius:6px; background:var(--surface-3); overflow:hidden;
}
.progress-fill{
  height:100%; border-radius:6px;
  background: linear-gradient(90deg, var(--primary), var(--primary-soft));
  transition: width .4s ease;
}
.progress-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.progress-row .label{ font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); font-weight:700; }
.progress-row .value{ font-size:12px; color:var(--text-muted); font-weight:600; }

.ring-wrap{ position:relative; width:132px; height:132px; margin:0 auto; }
.ring-wrap svg{ transform:rotate(-90deg); }
.ring-bg{ stroke: var(--surface-3); fill:none; }
.ring-fill{ stroke: var(--primary); fill:none; stroke-linecap:round; transition: stroke-dashoffset .5s ease; }
.ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-center .num{ font-family:var(--font-head,'Inter Tight','Inter',sans-serif); font-size:26px; font-weight:700; }
.ring-center .cap{ font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; }

/* ---------------- Stat grid ---------------- */
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.stat-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.stat-box{
  background:var(--surface-2); border:1px solid var(--border); border-radius:14px;
  padding:12px 10px; text-align:center;
}
.stat-box .num{ font-family:var(--font-head,'Inter Tight','Inter',sans-serif); font-size:20px; font-weight:700; }
.stat-box .cap{ font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.6px; margin-top:2px; }

/* ---------------- List items ---------------- */
.list-item{
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:10px; position:relative;
}
.list-item .thumb{
  width:56px; height:56px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--surface-3);
}
.list-item .info{ flex:1; min-width:0; }
.list-item .info .name{ font-weight:700; font-size:14px; margin-bottom:2px; }
.list-item .info .meta{ font-size:12px; color:var(--text-muted); }
.list-item .trailing{ display:flex; align-items:center; gap:6px; color:var(--text-muted); }
.list-item.done{ opacity:0.55; }
.list-item.done .name{ text-decoration: line-through; }
.list-item .check{
  width:26px; height:26px; border-radius:50%; border:2px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:transparent;
}
.list-item .check.checked{ background:var(--success); border-color:var(--success); color:#04210f; }

/* ---------------- Forms ---------------- */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; text-transform:uppercase; letter-spacing:0.8px; color:var(--text-muted); font-weight:700; }
.field input, .field select, .field textarea{
  background: var(--surface-2); border:1px solid var(--border-strong); border-radius:12px;
  padding:13px 14px; color:#fff; font-size:16px; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--primary); }
.field-row{ display:flex; gap:10px; }
.field-row .field{ flex:1; }

.choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice-card{
  background:var(--surface-2); border:1.5px solid var(--border-strong); border-radius:14px;
  padding:14px; text-align:center; font-weight:700; font-size:13px;
}
.choice-card small{ display:block; font-weight:500; color:var(--text-muted); font-size:12px; margin-top:3px; text-transform:none; letter-spacing:0; }
.choice-card.selected{ border-color:var(--primary); background: rgba(255,122,69,0.12); color:var(--primary-soft); }

.toggle{
  width:46px; height:26px; border-radius:20px; background:var(--surface-3);
  position:relative; border:1px solid var(--border-strong); flex-shrink:0;
}
.toggle::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; transition: all .2s ease;
}
.toggle.on{ background: var(--primary); border-color:var(--primary); }
.toggle.on::after{ left:22px; }

/* ---------------- Bottom nav ---------------- */
.bottom-nav{
  flex-shrink:0; z-index:30;
  height:var(--nav-h);
  background: rgba(12,12,12,0.9);
  backdrop-filter: blur(14px);
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-around;
  padding-bottom:8px;
}
.nav-item{
  background:none; border:none; color:var(--text-dim);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;
  flex:1; padding:6px 2px;
}
.nav-item .material-symbols-rounded{ font-size:22px; }
.nav-item.active{ color:var(--primary-soft); }
.nav-item.active .material-symbols-rounded{
  color:var(--primary);
  background: rgba(255,122,69,0.14);
  border-radius:12px; padding:3px 14px;
}
.bottom-nav.hidden{ display:none; }

.clip-thumb .cat-badge{
  position:absolute; left:4px; top:4px; font-size:12px; font-weight:700; text-transform:uppercase;
  background:rgba(0,0,0,0.6); color:var(--primary-soft); padding:2px 6px; border-radius:6px; letter-spacing:0.4px;
}
.thumb-wrap{ position:relative; width:56px; height:56px; flex-shrink:0; }
.thumb-wrap video, .thumb-wrap img{ width:100%; height:100%; border-radius:10px; object-fit:cover; background:var(--surface-3); }
.thumb-wrap .cam-badge{
  position:absolute; bottom:-3px; right:-3px; width:20px; height:20px; border-radius:50%;
  background:var(--primary); display:flex; align-items:center; justify-content:center; border:2px solid var(--surface);
}
.thumb-wrap .cam-badge .material-symbols-rounded{ font-size:12px; color:#fff; }

.plan-card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px;
}
.plan-card.active{ border-color:var(--primary); background:rgba(255,122,69,0.08); }

/* ---------------- Modal / Sheet ---------------- */
.sheet-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,0.6); z-index:40;
  display:none; align-items:flex-end; justify-content:center;
}
.sheet-backdrop.open{ display:flex; }
.sheet{
  width:100%; max-height:88%; overflow-y:auto;
  background:var(--surface); border-radius:24px 24px 0 0;
  padding:20px; animation: slideUp .25s ease;
  border-top:1px solid var(--border-strong);
}
@keyframes slideUp{ from{ transform:translateY(30px); opacity:0;} to{ transform:translateY(0); opacity:1;} }
@keyframes spin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
.sheet-handle{ width:40px; height:4px; background:var(--surface-3); border-radius:4px; margin:0 auto 14px; }
.sheet-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }

.search-box{
  display:flex; align-items:center; gap:8px;
  background:var(--surface-2); border:1px solid var(--border-strong); border-radius:12px; padding:10px 14px;
}
.search-box input{ background:none; border:none; color:#fff; flex:1; font-size:16px; }
.search-box input:focus{ outline:none; }

.food-result{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 4px; border-bottom:1px solid var(--border);
}
.food-result .name{ font-weight:600; font-size:14px; }
.food-result .kcal{ font-size:12px; color:var(--text-muted); }

/* ---------------- Video / upload ---------------- */
.video-drop{
  border:1.5px dashed var(--border-strong); border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:26px 16px; color:var(--text-muted); text-align:center;
  position:relative; background: var(--surface-2);
}
.video-drop .material-symbols-rounded{ font-size:34px; color:var(--primary); }
.video-drop input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.clip-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.clip-thumb{
  position:relative; aspect-ratio:9/14; border-radius:12px; overflow:hidden; background:var(--surface-3);
}
.clip-thumb video{ width:100%; height:100%; object-fit:cover; }
.clip-thumb .play-badge{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.25); color:#fff; font-size:26px;
}
.clip-thumb .del-btn{
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,0.6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; border:none;
}

/* ---------------- Onboarding ---------------- */
#onboarding{
  position:absolute; inset:0; z-index:100; background: var(--bg);
  display:none; flex-direction:column;
}
#onboarding.open{ display:flex; }
.onboard-wrap{ max-width:460px; margin:0 auto; width:100%; height:100%; display:flex; flex-direction:column; }
.onboard-step{ display:none; flex-direction:column; gap:16px; padding:24px 20px; flex:1; overflow-y:auto; }
.onboard-step.active{ display:flex; }
.onboard-progress{ display:flex; gap:6px; padding:20px 20px 0; }
.onboard-progress div{ flex:1; height:4px; border-radius:4px; background:var(--surface-3); }
.onboard-progress div.done{ background:var(--primary); }
.onboard-footer{ padding:16px 20px 24px; display:flex; gap:10px; }
.onboard-hero{ font-size:26px; margin-bottom:4px; }
.onboard-sub{ color:var(--text-muted); font-size:13px; margin-bottom:8px; }

/* ---------------- Toast ---------------- */
#toast{
  position:absolute; left:50%; bottom:calc(var(--nav-h) + 16px); transform:translate(-50%,10px);
  background:#fff; color:#111; padding:12px 18px; border-radius:12px; font-size:13px; font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,0.4); z-index:80; opacity:0; pointer-events:none; transition: all .25s ease;
  display:flex; align-items:center; gap:8px; max-width:88%;
}
#toast.show{ opacity:1; transform:translate(-50%,0); }
#toast .material-symbols-rounded{ color:var(--success); font-size:18px; }

/* ---------------- Avatar ---------------- */
.avatar-ring{
  width:96px; height:96px; border-radius:50%; padding:3px;
  background: conic-gradient(var(--primary), var(--primary-soft), var(--primary));
  margin:0 auto 12px;
}
.avatar-ring img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid var(--bg); }

/* ---------------- Section title ---------------- */
.section-title{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.section-title h3{ font-size:16px; }
.section-title a{ font-size:12px; color:var(--primary-soft); text-transform:uppercase; font-weight:700; letter-spacing:0.5px; }

.empty-hint{ text-align:center; color:var(--text-dim); font-size:12px; padding:18px 0; }

.divider{ height:1px; background:var(--border); margin:4px 0; }

.small-note{ font-size:12px; color:var(--text-dim); line-height:1.5; }

.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }

.link-row{
  display:flex; align-items:center; justify-content:space-between; padding:14px 4px; border-bottom:1px solid var(--border);
}
.link-row:last-child{ border-bottom:none; }
.link-row .left{ display:flex; align-items:center; gap:12px; }
.link-row .left .material-symbols-rounded{ color:var(--primary); }
.link-row .name{ font-weight:600; font-size:14px; }
.link-row .sub{ font-size:12px; color:var(--text-muted); }

/* =========================================================================
   TapEasy v2 — Đăng nhập, Trang chủ, PT ↔ Học viên
   ========================================================================= */
/* ---- Lớp phủ đăng nhập ---- */
#auth{ position:absolute; inset:0; z-index:110; background:var(--bg); display:none; flex-direction:column; overflow-y:auto; }
#auth.open{ display:flex; }
.auth-wrap{ display:flex; flex-direction:column; min-height:100%; width:100%; }
.splash{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; min-height:100vh; min-height:100dvh; }
.logo-big{ font-family:var(--font-head,'Inter Tight','Inter',sans-serif); font-weight:700; font-size:40px; letter-spacing:2px; color:var(--primary); }
.spinner{ width:30px; height:30px; border-radius:50%; border:3px solid var(--surface-3); border-top-color:var(--primary); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.auth-hero{ flex:1; min-height:52vh; background-size:cover; background-position:center; position:relative; display:flex; align-items:flex-end; }
.auth-hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,10,.15) 0%,rgba(10,10,10,.6) 55%,var(--bg) 100%); }
.auth-hero-text{ position:relative; padding:24px 22px 8px; }
.auth-hero-text .logo-big{ font-size:22px; margin-bottom:10px; }
.auth-actions{ padding:16px 22px 28px; display:flex; flex-direction:column; gap:10px; }
.auth-form{ padding:24px 22px 32px; display:flex; flex-direction:column; gap:12px; }
.auth-err{ color:#FFB08A; font-size:12.5px; min-height:16px; }
.auth-check{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--text-muted); }
.auth-check input{ margin-top:2px; accent-color:var(--primary); width:16px; height:16px; flex-shrink:0; }
.auth-check a{ color:var(--primary-soft); text-decoration:underline; cursor:pointer; }
.auth-demo{ display:flex; align-items:center; gap:6px; justify-content:center; color:var(--warn); }
.role-card{ display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px; cursor:pointer; transition:border-color .15s; }
.role-card:active{ border-color:var(--primary); }
.role-card > .material-symbols-rounded{ font-size:28px; color:var(--primary); background:rgba(255,122,69,.12); border-radius:12px; padding:8px; }
.role-card .name{ font-weight:800; font-size:15px; }
.role-card .sub{ font-size:12.5px; color:var(--text-muted); margin-top:3px; }
.role-card.soon{ opacity:.55; }
.soon-badge{ display:inline-block; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--warn); background:rgba(255,176,138,.12); border-radius:6px; padding:2px 6px; vertical-align:middle; }

/* ---- Trang chủ ---- */
.home-greet{ padding:4px 2px 2px; }
.home-today{ background-size:cover; background-position:center right; border:1px solid var(--border-strong); }
.date-chip{ width:54px; flex-shrink:0; text-align:center; background:var(--surface-3); border-radius:12px; padding:7px 4px; display:flex; flex-direction:column; }
.date-chip b{ font-family:var(--font-head,'Inter Tight','Inter',sans-serif); font-size:15px; color:var(--primary-soft); }
.date-chip small{ font-size:12px; color:var(--text-muted); text-transform:uppercase; }
.entry-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.entry-tile{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 10px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; cursor:pointer; min-height:108px; }
.entry-tile:active{ border-color:var(--primary); }
.entry-tile > .material-symbols-rounded{ color:var(--primary); font-size:26px; }
.entry-tile b{ font-size:13px; line-height:1.2; }
.entry-tile small{ font-size:12px; color:var(--text-muted); }
.entry-tile.mini{ min-height:0; flex-direction:row; align-items:center; padding:12px 10px; }
.entry-tile.mini > .material-symbols-rounded{ font-size:20px; }
.entry-tile.mini b{ font-size:12px; }

/* ---- Nav badge ---- */
.nav-badge-wrap{ position:relative; }
.nav-dot{ display:none; position:absolute; top:-26px; right:-12px; width:9px; height:9px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 2px #0c0c0c; }

/* ---- Màn hình PT ---- */
.seg{ display:flex; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:4px; gap:4px; }
.seg button{ flex:1; background:none; border:none; color:var(--text-muted); font-weight:700; font-size:13px; padding:10px 6px; border-radius:10px; min-height:44px; }   /* vòng 2 (ux · FIX-pt QP-20): vùng chạm ≥ 44 px ở gốc */
.seg button.active{ background:var(--primary); color:#fff; }
i.cnt{ font-style:normal; display:inline-block; min-width:18px; padding:1px 6px; border-radius:10px; background:var(--primary); color:#fff; font-size:12px; font-weight:800; text-align:center; line-height:16px; vertical-align:middle; }
.seg button.active i.cnt{ background:#fff; color:var(--primary); }
.avatar-ini{ width:44px; height:44px; flex-shrink:0; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-head,'Inter Tight','Inter',sans-serif); font-size:19px; font-weight:700; }
.avatar-ini.big{ width:54px; height:54px; font-size:24px; }
.coach-intro{ text-align:center; }
.join-code{ font-family:var(--font-head,'Inter Tight','Inter',sans-serif); font-size:40px; letter-spacing:10px; text-align:center; color:var(--primary-soft); background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:var(--radius-md); padding:14px 0 14px 10px; margin:12px 0; user-select:all; }
.join-input{ width:100%; font-family:var(--font-head,'Inter Tight','Inter',sans-serif); font-size:34px; letter-spacing:10px; text-align:center; text-transform:uppercase; background:var(--surface-2); border:1px solid var(--border-strong); color:var(--text); border-radius:var(--radius-md); padding:14px 0 14px 10px; margin:14px 0 4px; outline:none; }
.join-input:focus{ border-color:var(--primary); }
.st{ flex-shrink:0; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; border-radius:8px; padding:4px 8px; white-space:nowrap; }
.st-up{ background:rgba(94,230,199,.15); color:#9AF1DD; }
.st-done{ background:rgba(94,230,199,.15); color:var(--success); }
.st-cancel{ background:rgba(255,255,255,.08); color:var(--text-muted); }
.st-late{ background:rgba(255,176,138,.15); color:var(--warn); }
.sched-day{ text-transform:uppercase; letter-spacing:.6px; font-weight:700; margin:8px 2px 2px; }
.ex-edit{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px; }
.ex-edit .field label{ font-size:12px; }
.ex-edit .field input{ padding:8px 10px; font-size:13px; }
.icon-btn.sm{ width:28px; height:28px; }
.icon-btn.sm .material-symbols-rounded{ font-size:16px; }
.icon-btn:disabled{ opacity:.3; }
.ex-num{ display:flex; align-items:center; justify-content:center; font-family:var(--font-head,'Inter Tight','Inter',sans-serif); font-size:20px; color:var(--primary-soft); background:var(--surface-3); }
.fb-input{ width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm); padding:10px 12px; font-size:14px; resize:vertical; outline:none; }
.fb-input:focus{ border-color:var(--primary); }
.btn:disabled{ opacity:.6; }

/* ---- Ghi chú dạng chat ---- */
.chat{ display:flex; flex-direction:column; gap:8px; padding-bottom:70px; }
.bubble{ max-width:84%; align-self:flex-start; background:var(--surface-2); border:1px solid var(--border); border-radius:16px 16px 16px 4px; padding:9px 12px; }
.bubble.me{ align-self:flex-end; background:rgba(255,122,69,.14); border-color:rgba(255,122,69,.3); border-radius:16px 16px 4px 16px; }
.bubble.k-reminder{ border-color:var(--warn); }
.bubble.k-feedback{ border-color:#9AF1DD; }
.bubble .who{ font-size:12px; font-weight:700; color:var(--text-muted); margin-bottom:3px; display:flex; align-items:center; gap:2px; }
.bubble .txt{ font-size:14px; white-space:pre-wrap; word-break:break-word; }
.bubble .ts{ font-size:12px; color:var(--text-dim); margin-top:4px; text-align:right; }
.chat-input{ position:sticky; bottom:0; display:flex; gap:8px; align-items:flex-end; background:var(--bg); padding:10px 0 4px; }
.chat-input textarea{ flex:1; background:var(--surface-2); border:1px solid var(--border-strong); color:var(--text); border-radius:20px; padding:11px 14px; font-size:14px; resize:none; outline:none; max-height:120px; }
.chat-input .btn{ width:46px; height:46px; padding:0; border-radius:50%; flex-shrink:0; }

/* ---- Tiến độ ---- */
.wk-bars{ display:flex; align-items:flex-end; gap:6px; height:120px; padding-top:14px; }
.wk{ flex:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; }
.wk .bar{ width:100%; min-height:3px; background:linear-gradient(180deg,var(--primary),var(--primary-dark)); border-radius:6px 6px 2px 2px; position:relative; }
.wk .bar span{ position:absolute; top:-15px; left:0; right:0; text-align:center; font-size:12px; color:var(--text-muted); }
.wk small{ font-size:12px; color:var(--text-dim); }
.policy-text{ display:flex; flex-direction:column; gap:10px; font-size:13.5px; color:var(--text-muted); line-height:1.5; }
.policy-text b{ color:var(--text); }

/* ---- Vùng an toàn tai thỏ / thanh home (iPhone, Android) ---- */
#app-shell{ padding-top: env(safe-area-inset-top); }
.bottom-nav{ padding-bottom: max(8px, env(safe-area-inset-bottom)); height: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
#app-scroll{ overflow-x:hidden; }

/* ---- Icon SVG nhúng (icons.js) ---- */
.material-symbols-rounded{ display:inline-flex; align-items:center; justify-content:center; line-height:1; font-size:24px; vertical-align:middle; }
.material-symbols-rounded svg{ width:1em; height:1em; fill:currentColor; flex-shrink:0; display:block; }

/* ---- Trang chủ v2.1 ---- */
.hero{ background-color:#0B2A33; }
.hero::before{ background: radial-gradient(120% 80% at 90% 0%, rgba(255,122,69,.28), transparent 60%), linear-gradient(180deg, rgba(6,6,6,0.15) 0%, rgba(6,6,6,0.55) 55%, rgba(6,6,6,0.96) 100%); }
.home-greet{ display:flex; justify-content:space-between; align-items:flex-end; gap:10px; padding:4px 2px 0; }
.streak-chip{ display:flex; flex-direction:column; align-items:center; background:linear-gradient(160deg,rgba(255,122,69,.22),rgba(255,122,69,.05)); border:1px solid rgba(255,122,69,.35); border-radius:16px; padding:8px 12px; cursor:pointer; }
.streak-chip .material-symbols-rounded{ color:var(--primary); font-size:20px; }
.streak-chip b{ font-family:var(--font-head,'Inter Tight','Inter',sans-serif); font-size:22px; line-height:1; margin-top:2px; }
.streak-chip small{ font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; }
.week-strip{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.wd{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:8px 0 7px; display:flex; flex-direction:column; align-items:center; gap:3px; }
.wd small{ font-size:12px; color:var(--text-dim); font-weight:700; }
.wd b{ font-size:15px; }
.wd i{ width:16px; height:16px; border-radius:50%; background:var(--surface-3); display:flex; align-items:center; justify-content:center; }
.wd i .material-symbols-rounded{ font-size:12px; color:#fff; }
.wd.rest{ opacity:.55; } .wd.rest i{ background:transparent; border:1px dashed var(--border-strong); }
.wd.done i{ background:var(--success); }
.wd.miss i{ background:rgba(255,176,138,.35); }
.wd.today{ border-color:var(--primary); background:linear-gradient(180deg,rgba(255,122,69,.18),rgba(255,122,69,.04)); }
.wd.today small{ color:var(--primary-soft); }
.home-hero{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:200px; background-color:#0B2A33; background-size:cover; background-position:center; border:1px solid var(--border-strong); display:flex; align-items:flex-end; }
.home-hero::before{ content:""; position:absolute; inset:0; background: radial-gradient(90% 90% at 100% 0%, rgba(255,122,69,.35), transparent 60%), linear-gradient(90deg, rgba(8,8,8,.97) 30%, rgba(8,8,8,.55) 70%, rgba(8,8,8,.25)); }
.home-hero-body{ position:relative; padding:18px; flex:1; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; font-size:12px; color:var(--text-muted); }
.hero-meta > span{ display:flex; align-items:center; gap:4px; }
.hero-meta .material-symbols-rounded{ font-size:13px; color:var(--primary-soft); }
.home-hero-ring{ position:absolute; top:16px; right:16px; width:78px; height:78px; }
.home-hero-ring > div{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.home-hero-ring b{ font-size:17px; } .home-hero-ring small{ font-size:12px; color:var(--text-muted); }
.metric-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.metric{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 6px 10px; display:flex; flex-direction:column; align-items:center; text-align:center; cursor:pointer; }
.metric-ring{ position:relative; width:52px; height:52px; margin-bottom:6px; }
.metric-ring > .material-symbols-rounded{ position:absolute; inset:0; margin:auto; font-size:18px; color:var(--primary); width:18px; height:18px; }
.metric b{ font-size:16px; } .metric small{ font-size:12px; color:var(--text-muted); }
.entry-tile .ic{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--c) 18%, transparent); color:var(--c); margin-bottom:2px; }
.entry-tile .ic .material-symbols-rounded{ font-size:20px; color:inherit; }
.quick-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.quick-row button{ background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:14px; padding:10px 4px; display:flex; flex-direction:column; align-items:center; gap:5px; font-size:12px; font-weight:700; }
.quick-row .material-symbols-rounded{ font-size:18px; color:var(--primary-soft); }
.list-item .material-symbols-rounded{ flex-shrink:0; }

/* =========================================================================
   HỒ SƠ PT — phong cách hero thể thao
   ========================================================================= */
#app-scroll.snap{ scroll-snap-type:y mandatory; }
#screen-ptprofile{ --pp-h:100vh; --gold:#5EE6C7; position:relative; font-family:var(--font-ui,'Inter',system-ui,sans-serif); background:#061A24; }
#pp-content{ position:relative; }
.pp-loading{ min-height:var(--pp-h); display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; padding:24px; text-align:center; }
.pp-bg{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 40% at 85% 8%, rgba(255,122,69,.30), transparent 70%),
    radial-gradient(60% 35% at 0% 45%, rgba(94,230,199,.10), transparent 70%),
    radial-gradient(80% 40% at 50% 100%, rgba(255,122,69,.18), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 22px),
    #061A24; }
.pp-nav{ position:sticky; top:0; z-index:30; height:0; }
.pp-nav > *{ position:absolute; top:16px; }
.pp-btn{ width:48px; height:48px; border:none; display:flex; align-items:center; justify-content:center; }
.pp-light{ left:16px; background:#fff; color:#111; }
.pp-light .material-symbols-rounded{ font-size:20px; }
.pp-glass{ right:16px; background:rgba(6,26,36,.42); border:1px solid rgba(255,255,255,.22); flex-direction:column; align-items:flex-end; gap:5px; padding-right:13px; }   /* vòng 2 (ux · FIX-pt QP-23): thanh .pp-nav dính → không blur (vẽ lại mỗi khung khi cuộn) */
.pp-glass i{ display:block; height:2px; width:21px; background:#fff; border-radius:2px; }
.pp-glass i + i{ width:10px; }
.pp-logo{ left:50%; transform:translateX(-50%); top:28px !important; font-weight:800; font-size:17px; letter-spacing:-.04em; color:#fff; font-style:italic; }
.pp-logo b{ color:var(--primary); margin-left:2px; }

.pp-sec{ position:relative; z-index:1; min-height:var(--pp-h); height:var(--pp-h); scroll-snap-align:start; overflow:hidden; padding:92px 20px 20px; display:flex; flex-direction:column; color:#fff; }
.pp-label{ display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.6); font-size:15px; font-weight:400; }
.pp-label .material-symbols-rounded{ font-size:16px; color:var(--gold); }
.pp-title{ font-weight:400; font-size:46px; line-height:.95; letter-spacing:-.05em; margin-top:6px; }
.pp-title.sm{ font-size:34px; }

/* 1. Hero */
.pp-hero{ padding-bottom:0; }
.pp-hero .pp-loc{ position:relative; z-index:10; }
.pp-photo{ position:absolute; inset:0; z-index:5; display:flex; align-items:flex-end; justify-content:center; }
.pp-photo img{ width:100%; height:82%; object-fit:cover; object-position:center top; transform-origin:bottom center;
  -webkit-mask:linear-gradient(to bottom, transparent 0%, #000 22%); mask:linear-gradient(to bottom, transparent 0%, #000 22%); }
.pp-mono{ width:100%; height:78%; display:flex; align-items:center; justify-content:center; transform-origin:bottom center; }
.pp-mono span{ font-size:min(62vw,260px); font-weight:800; letter-spacing:-.08em; line-height:1;
  background:linear-gradient(180deg, rgba(255,122,69,.95) 0%, rgba(255,122,69,.35) 55%, transparent 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pp-photo-blur{ position:absolute; left:0; right:0; bottom:0; height:50%; pointer-events:none;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  -webkit-mask:linear-gradient(to bottom, transparent 0%, #000 50%); mask:linear-gradient(to bottom, transparent 0%, #000 50%);
  background:linear-gradient(to bottom, transparent 30%, rgba(6,26,36,.75)); }
.pp-hero-bottom{ position:absolute; left:0; right:0; bottom:0; z-index:10; padding:0 20px 28px; }
.pp-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.pp-chips span{ font-size:12px; font-weight:600; padding:6px 10px; background:rgba(6,26,36,.55); border:1px solid rgba(255,255,255,.18); }   /* vòng 2 (ux · QP-23): bỏ blur ở phần tử lặp */
.pp-name{ font-weight:600; font-size:clamp(46px,15vw,64px); line-height:.86; letter-spacing:-.05em; }
.pp-scroll-hint{ position:absolute; z-index:11; right:20px; bottom:34px; width:34px; height:34px; border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; }
.pp-scroll-hint .material-symbols-rounded{ transform:rotate(90deg); font-size:14px; animation:ppBob 1.6s ease-in-out infinite; }
@keyframes ppBob{ 50%{ transform:rotate(90deg) translateX(4px); } }

/* 2. Thành tích */
.pp-ring{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; position:relative; margin:0 -20px; }
.pp-ring > svg{ width:min(72%,300px); height:auto; fill:none; stroke:rgba(255,255,255,.14); stroke-width:1.2; }
.pp-ring > svg path{ stroke:var(--primary); stroke-width:4; stroke-linecap:round; filter:drop-shadow(0 0 8px rgba(255,122,69,.8)); transform-origin:100px 100px; animation:ppSpin 6s linear infinite; }
@keyframes ppSpin{ to{ transform:rotate(360deg); } }
.pp-ring > .material-symbols-rounded{ position:absolute; font-size:42px; color:var(--gold); }
.pp-numbers{ margin-top:auto; }
.pp-num-row{ display:flex; align-items:flex-end; gap:10px; margin-top:6px; }
.pp-num{ font-weight:600; font-size:clamp(72px,24vw,104px); line-height:.76; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.pp-num.grad{ background:linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.4) 50%, transparent 92%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pp-num.gold{ color:var(--gold); }
.pp-num-row small{ font-size:13px; color:rgba(255,255,255,.6); padding-bottom:6px; }

/* 3. Thương hiệu */
.pp-spec{ margin-top:26px; }
.pp-spec-big{ color:var(--gold); font-weight:600; font-size:clamp(40px,13vw,60px); line-height:.86; letter-spacing:-.06em; margin-top:8px; }
.pp-bio{ margin-top:14px; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.7); max-height:7.5em; overflow:hidden; }
.pp-cards{ display:flex; gap:8px; margin:auto -20px 0; padding:0 8px; }
.pp-card{ flex:1; min-height:170px; padding:14px 12px; border-radius:16px 16px 0 0; cursor:pointer;
  background:rgba(20,20,30,.8); border:1px solid rgba(255,255,255,.1); border-bottom:none; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  display:flex; flex-direction:column; }
.pp-card .pp-label{ font-size:13px; }
.pp-card-sub{ font-size:12px; color:rgba(255,255,255,.5); margin-top:4px; }
.pp-card-big{ margin-top:auto; font-weight:600; font-size:clamp(48px,15vw,72px); line-height:.8; letter-spacing:-.07em; }
.pp-card-big.gold{ color:var(--gold); }
.pp-cta{ display:flex; flex-direction:column; gap:8px; margin:0 -20px -20px; padding:12px 20px 20px; background:rgba(14,18,28,.94); }   /* vòng 2 (ux · QP-23): khối CTA dính → nền đặc, không blur */
.pp-cta:empty{ display:none; }

/* Hiệu ứng — chỉ chạy khi phần đó vào màn hình (.in) */
.pp-sec .anim{ opacity:0; }
.pp-sec.in .anim{ animation-duration:.9s; animation-timing-function:cubic-bezier(.16,1,.3,1); animation-fill-mode:both; }
.pp-sec.in .anim.up{ animation-name:ppUp; }
.pp-sec.in .anim.scale{ animation-name:ppScale; animation-duration:1s; }
.pp-sec.in .anim.fade{ animation-name:ppFade; animation-timing-function:ease-out; }
.pp-sec.in .anim.speed{ animation-name:ppSpeed; animation-duration:.8s; }
.pp-sec.in .d3{ animation-delay:.3s } .pp-sec.in .d4{ animation-delay:.4s } .pp-sec.in .d5{ animation-delay:.5s } .pp-sec.in .d6{ animation-delay:.6s }
.pp-sec.in .d7{ animation-delay:.7s } .pp-sec.in .d8{ animation-delay:.8s } .pp-sec.in .d9{ animation-delay:.9s } .pp-sec.in .d10{ animation-delay:1s } .pp-sec.in .d12{ animation-delay:1.2s }
@keyframes ppUp{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }
@keyframes ppScale{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:none; } }
@keyframes ppFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ppSpeed{
  0%{ opacity:0; transform:translateX(-100%) skewX(-8deg); filter:blur(8px); }
  60%{ opacity:1; transform:translateX(4%) skewX(-2deg); filter:blur(0); }
  100%{ opacity:1; transform:none; filter:blur(0); } }
@media (prefers-reduced-motion: reduce){ .pp-sec .anim{ opacity:1; animation:none !important; } .pp-ring > svg path{ animation:none; } }

/* Ô ảnh trong sheet hồ sơ PT */
.br-photo{ width:132px; height:170px; margin:0 auto; border:1px dashed var(--border-strong); background:var(--surface-2); display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; border-radius:14px; }
.br-photo img{ width:100%; height:100%; object-fit:cover; }
.br-photo .material-symbols-rounded{ font-size:28px; color:var(--primary); }
.br-photo small{ font-size:12px; color:var(--text-muted); }
.pp-sec.done .anim{ animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; }

/* =========================================================================
   MÀN MỞ APP (Welcome) — landing 3 phần
   ========================================================================= */
#auth.wl-mode{ background:#061A24; scrollbar-width:none; }
#auth.wl-mode::-webkit-scrollbar{ display:none; }
.wl{ position:relative; --y:#5EE6C7; --cond:'Barlow Condensed','Inter Tight','Roboto Condensed','Segoe UI',Arial,sans-serif; /* mọi font trong chuỗi đều có đủ glyph tiếng Việt (bỏ 'Arial Narrow' — thiếu dấu chồng trên nhiều máy) */ --ease:cubic-bezier(.16,1,.3,1); font-family:Helvetica,Arial,sans-serif; color:#fff; width:100%; }
.wl-hero{ position:relative; height:100vh; height:100dvh; min-height:560px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; }
@media (min-width:520px){ .wl-hero{ height:94vh; } }
.wl-hero-bg{ position:absolute; inset:-4%; background:#0B2A33 center/cover no-repeat; animation:wlKen 18s ease-in-out infinite alternate; }
@keyframes wlKen{ from{ transform:scale(1.04) translate(0,0); } to{ transform:scale(1.16) translate(-2%,-3%); } }
.wl-hero-shade{ position:absolute; inset:0; background:
  radial-gradient(90% 60% at 100% 0%, rgba(255,122,69,.35), transparent 60%),
  linear-gradient(180deg, rgba(6,26,36,.25) 0%, rgba(6,26,36,.15) 35%, rgba(6,26,36,.85) 75%, #061A24 100%); }
.wl-speed{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.wl-speed i{ position:absolute; height:2px; width:38%; left:-40%; background:linear-gradient(90deg, transparent, rgba(94,230,199,.8)); transform:skewX(-20deg); animation:wlStreak 2.8s linear infinite; }
.wl-speed i:nth-child(1){ top:22%; animation-delay:.2s; } .wl-speed i:nth-child(2){ top:38%; animation-delay:1.1s; width:24%; }
.wl-speed i:nth-child(3){ top:51%; animation-delay:1.9s; } .wl-speed i:nth-child(4){ top:63%; animation-delay:.7s; width:18%; background:linear-gradient(90deg,transparent,rgba(255,122,69,.9)); }
.wl-speed i:nth-child(5){ top:30%; animation-delay:2.4s; width:14%; }
@keyframes wlStreak{ to{ left:120%; } }
.wl-nav{ position:absolute; top:0; left:0; right:0; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:calc(18px + env(safe-area-inset-top)) 20px 0; }
.wl-brand{ font-family:var(--cond); font-weight:800; font-synthesis:none; text-transform:uppercase; font-size:clamp(24px,6vw,32px); letter-spacing:.5px; }
.wl-brand b{ color:var(--y); }
.wl-burger{ width:44px; height:44px; background:none; border:none; display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:6px; }
.wl-burger i{ display:block; width:28px; height:2.5px; background:#fff; border-radius:2px; } .wl-burger i:nth-child(2){ width:20px; }
.wl-hero-body{ position:relative; z-index:3; padding:0 20px 34px; }
/* Slogan IN HOA tiếng Việt có dấu chồng (Ậ Ế Ộ Ự): line-height .82 làm dấu dưới dòng trên chạm dấu mũ+sắc dòng dưới → 1.06 + đệm trên .12em;
   chỉ nạp 1 độ đậm (800) → tắt font-synthesis để trình duyệt không tự làm đậm/nghiêng giả làm vỡ dấu */
.wl-head{ font-family:var(--cond); font-weight:800; font-synthesis:none; text-transform:uppercase; font-size:clamp(52px,15.5vw,80px); line-height:1.12; padding-top:.16em; letter-spacing:.005em; display:flex; flex-direction:column; }
/* 12/11 v2: dòng vẫn sát → 1.12 + đệm trên từng dòng (.05em) + khe .06em giữa các dòng: dấu dưới (Ậ Ự) không chạm dấu mũ+sắc (Ế Ộ) dòng kế */
.wl-head span{ display:block; padding-top:.05em; }
.wl-head span + span{ margin-top:.06em; }
.wl-head .l2{ color:var(--y); text-align:right; }
.wl-sub{ margin-top:16px; font-size:15px; line-height:1.45; color:rgba(255,255,255,.75); max-width:330px; }
.wl-cta{ position:relative; margin-top:22px; width:264px; height:64px; padding:0; border:none; background:none; display:block; transition:transform .35s var(--ease); }
.wl-cta svg{ position:absolute; inset:0; width:100%; height:100%; }
.wl-cta span{ position:absolute; left:0; top:0; bottom:0; width:200px; display:flex; align-items:center; justify-content:center; font-size:19px; color:#061A24; font-weight:700; }
.wl-arrow{ transform:rotate(-45deg); transform-box:view-box; transition:transform .45s var(--ease); }
.wl-cta:hover, .wl-cta:focus-visible{ transform:scale(1.06) translateY(-2px); }
.wl-cta:hover .wl-arrow{ transform:rotate(0deg); }
.wl-cta:active{ transform:scale(.97); }
.wl-ready .wl-arrow{ animation:wlArrow 2.4s var(--ease) 1.6s infinite; }
@keyframes wlArrow{ 0%,60%,100%{ transform:rotate(-45deg); } 75%{ transform:rotate(0deg); } }
.wl-link{ margin-top:14px; background:none; border:none; color:rgba(255,255,255,.7); font-size:14px; padding:6px 0; }
.wl-link b{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.wl-scroll-cue{ position:absolute; z-index:3; right:22px; bottom:40px; width:22px; height:36px; border:2px solid rgba(255,255,255,.5); border-radius:12px; }
.wl-scroll-cue span{ position:absolute; left:50%; top:6px; width:4px; height:8px; margin-left:-2px; background:#fff; border-radius:2px; animation:wlCue 1.6s ease-in-out infinite; }
@keyframes wlCue{ 0%{ opacity:0; transform:translateY(0); } 40%{ opacity:1; } 100%{ opacity:0; transform:translateY(12px); } }

/* vào màn: trượt chữ trái/phải */
.wl .wl-in-left, .wl .wl-in-right, .wl-head span, .wl-sub, .wl-cta, .wl-link{ opacity:0; }
.wl.ready .wl-in-left{ animation:wlL .6s var(--ease) both; }
.wl.ready .wl-in-right{ animation:wlR .6s var(--ease) both; }
.wl.ready .wl-head .l1{ animation:wlFarL .85s var(--ease) .15s both; }
.wl.ready .wl-head .l2{ animation:wlFarR .85s var(--ease) .28s both; }
.wl.ready .wl-head .l3{ animation:wlFarL .85s var(--ease) .41s both; }
.wl.ready .wl-sub{ animation:wlUp .8s var(--ease) .7s both; }
.wl.ready .wl-cta{ animation:wlUp .8s var(--ease) .85s both; }
.wl.ready .wl-link{ animation:wlUp .8s var(--ease) 1s both; }
@keyframes wlL{ from{ opacity:0; transform:translateX(-40px); } to{ opacity:1; transform:none; } }
@keyframes wlR{ from{ opacity:0; transform:translateX(40px); } to{ opacity:1; transform:none; } }
@keyframes wlFarL{ from{ opacity:0; transform:translateX(-110%); } to{ opacity:1; transform:none; } }
@keyframes wlFarR{ from{ opacity:0; transform:translateX(110%); } to{ opacity:1; transform:none; } }
@keyframes wlUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }

/* 2. Giới thiệu */
.wl-info{ position:relative; overflow:hidden; padding:clamp(60px,12vh,110px) 20px; background:linear-gradient(180deg,#0B2A33 0%,#114650 50%,#1B6A68 100%); }
.wl-tag{ font-family:var(--cond); font-weight:800; font-synthesis:none; text-transform:uppercase; font-size:clamp(46px,13vw,64px); line-height:1.08; letter-spacing:.005em; color:#fff; }
.wl-tag-sub{ font-size:clamp(19px,5vw,26px); line-height:1.15; color:#D6ECEA; margin-top:4px; }
.wl-map{ position:relative; margin:28px -20px 10px; aspect-ratio:300/170; }
.wl-routes{ position:absolute; inset:0 4%; width:92%; height:100%; overflow:visible; }
/* pathLength="1" (pt.js) → dasharray 1 luôn phủ trọn đường dù dài bao nhiêu (trước: 400 cố định); vẽ xong trong ~1,5 s */
.wl-route{ fill:none; stroke:#5EE6C7; stroke-width:2.6; stroke-linecap:round; stroke-dasharray:1 1; stroke-dashoffset:1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.wl-map.in .wl-route{ animation:wlDraw .62s cubic-bezier(.45,0,.25,1) calc(.1s + var(--i)*.24s) forwards; }
.wl-map.done .wl-route{ stroke-dashoffset:0; }
@keyframes wlDraw{ to{ stroke-dashoffset:0; } }
.wl-runner{ fill:#061A24; }
.wl-stop{ transform-box:fill-box; transform-origin:center; transform:scale(0); }
.wl-map.in .wl-stop{ animation:wlPop .45s var(--ease) calc(.15s + var(--i)*.24s) forwards; }
.wl-map.done .wl-stop{ transform:none; }
.wl-stop text{ font:700 9px Helvetica,Arial,sans-serif; fill:#061A24; }
@keyframes wlPop{ to{ transform:scale(1); } }
.wl-bubble{ position:absolute; width:15%; aspect-ratio:1; border-radius:50%; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; transform:scale(0); }
.wl-bubble .material-symbols-rounded{ font-size:clamp(18px,5.5vw,26px); color:#1B6A68; }
.wl-map.in .wl-bubble{ animation:wlPop .6s var(--ease) .9s forwards, wlFloat var(--d) ease-in-out 1.5s infinite; }
.wl-map.done .wl-bubble{ transform:scale(1); }
@keyframes wlFloat{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-8px) scale(1); } }
.wl-stats{ display:flex; flex-direction:column; gap:22px; margin-top:24px; }
.wl-stat{ display:flex; align-items:center; gap:14px; }
.wl-stat b{ font-family:var(--cond); font-weight:800; font-synthesis:none; font-size:clamp(56px,15vw,76px); line-height:.85; color:#fff; }
.wl-stat span{ font-size:clamp(14px,3.8vw,17px); line-height:1.2; color:#D6ECEA; }

/* 3. Bắt đầu */
.wl-start{ background:#061A24; padding:clamp(48px,10vh,90px) 20px calc(28px + env(safe-area-inset-bottom)); }
.wl-muted{ color:#b0b8bc; font-size:clamp(14px,3.8vw,17px); line-height:1.45; margin-top:10px; }
.wl-actions{ display:flex; flex-direction:column; gap:10px; margin-top:26px; }
.wl-pill{ border-radius:40px; padding:17px 22px; font-size:clamp(15px,4vw,18px); font-weight:700; border:none; transition:transform .3s var(--ease), background .3s; }
.wl-pill.gold{ background:#5EE6C7; color:#061A24; }
.wl-pill.gold:hover{ background:#9AF1DD; transform:translateY(-2px) scale(1.02); }
.wl-pill.ghost{ background:rgba(255,255,255,.08); color:#fff; font-weight:500; }
.wl-pill.ghost:hover{ background:rgba(255,255,255,.14); }
.wl-pill:active{ transform:scale(.97); }
.wl-start .auth-demo{ margin-top:14px; }
.wl-foot{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:34px; }
.wl-foot > div{ display:flex; flex-direction:column; gap:8px; }
.wl-foot-link{ color:#b0b8bc; font-size:14px; cursor:pointer; transition:all .25s; }
.wl-foot-link:hover{ color:#fff; transform:translateX(4px); }
.wl-round{ width:44px; height:44px; border-radius:50%; background:#fff; border:none; display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease); }
.wl-round svg{ width:20px; height:20px; } .wl-round:hover{ transform:scale(1.12) translateY(-3px); }
.wl-copy{ color:#6b7a80; font-size:13px; margin-top:18px; }

/* hiện khi cuộn tới */
.wl-rev{ opacity:0; }
.wl-rev.in{ animation:wlUp .8s var(--ease) var(--d,0s) both; }
.wl-rev.wl-from-left.in{ animation-name:wlL2; } .wl-rev.wl-from-right.in{ animation-name:wlR2; }
@keyframes wlL2{ from{ opacity:0; transform:translateX(-60px); } to{ opacity:1; transform:none; } }
@keyframes wlR2{ from{ opacity:0; transform:translateX(60px); } to{ opacity:1; transform:none; } }
.wl-map.wl-rev.in{ animation:wlFade .6s ease both; }
@keyframes wlFade{ from{ opacity:0; } to{ opacity:1; } }
.wl-rev.done{ opacity:1; animation:none; transform:none; }
.wl-map.wl-rev.done .wl-bubble{ animation:wlFloat var(--d) ease-in-out infinite; }

/* menu */
.wl-menu{ position:absolute; top:0; left:0; right:0; height:100dvh; z-index:99; background:#0B2A33; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; opacity:0; pointer-events:none; transform:scale(1.04); transition:opacity .35s, transform .45s var(--ease); }
.wl-menu.open{ opacity:1; pointer-events:auto; transform:none; }
.wl-menu > button:not(.wl-menu-close){ background:none; border:none; color:#fff; font-size:24px; opacity:0; transform:translateY(16px); transition:all .5s var(--ease); transition-delay:calc(.08s + var(--i)*.07s); }
.wl-menu.open > button{ opacity:1; transform:none; }
.wl-menu-close{ position:absolute; top:calc(18px + env(safe-area-inset-top)); right:18px; background:none; border:none; color:#fff; }
.wl-menu-close .material-symbols-rounded{ font-size:30px; }
@media (min-width:520px){ .wl-menu{ height:94vh; } }
@media (prefers-reduced-motion: reduce){ .wl *{ animation:none !important; opacity:1 !important; transform:none !important; } .wl-route{ stroke-dashoffset:0; } }
/* bản đồ đã xong (.done / wlMapFinish()): mọi phần hiện đủ, không phụ thuộc animation còn chạy */
.wl-map.done .wl-route{ animation:none !important; stroke-dashoffset:0; }
.wl-map.done .wl-stop{ animation:none !important; transform:none; }

/* =========================================================================
   DINH DƯỠNG v2
   ========================================================================= */
.nu{ --nu:#FF7A45; --nu2:#FFB08A; --card:#0B2A33; gap:12px; }
.nu-date{ font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.8px; padding:0 2px; }
.nu-gauge-card{ background:radial-gradient(120% 70% at 50% 0%, rgba(255,122,69,.16), transparent 60%), var(--card); border:1px solid var(--border); border-radius:26px; padding:18px 16px 16px; }
.nu-gauge{ position:relative; width:100%; max-width:320px; margin:0 auto; }
.nu-gauge-svg{ width:100%; height:auto; display:block; }
.nu-gauge-svg .seg{ fill:rgba(255,255,255,.08); transition:fill .3s; }
.nu-gauge-svg .seg.on{ fill:var(--nu); animation:nuSeg .45s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i)*55ms); transform-origin:150px 150px; }
.nu-gauge-svg .seg.on.over{ fill:#FF5A2E; }
@keyframes nuSeg{ from{ fill:rgba(255,255,255,.08); opacity:.3; } to{ opacity:1; } }
.nu-gauge-center{ position:absolute; left:0; right:0; bottom:2px; text-align:center; }
.nu-gauge-center .material-symbols-rounded{ color:var(--nu); font-size:18px; }
.nu-kcal{ font-size:15px; color:var(--text-muted); }
.nu-kcal b{ font-size:36px; color:#fff; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.nu-goal{ font-size:12px; color:var(--nu); font-weight:600; }
.nu-left{ text-align:center; margin-top:10px; font-size:13px; color:var(--text-muted); }
.nu-left b{ color:#fff; } .nu-left.over b{ color:#FF5A2E; }
.nu-macros{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.nu-macro-top{ display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--text-muted); }
.nu-macro-top b{ font-size:16px; color:#fff; } .nu-macro-top small{ color:var(--text-dim); font-weight:500; font-size:12px; }
.nu-bar{ height:6px; border-radius:6px; background:rgba(255,255,255,.08); margin-top:6px; overflow:hidden; }
.nu-bar i{ display:block; height:100%; border-radius:6px; transition:width .8s cubic-bezier(.16,1,.3,1); }
.nu-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:16px; padding-top:14px; border-top:1px dashed var(--border-strong); }
.nu-day{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.nu-day .col{ position:relative; width:100%; max-width:22px; height:46px; border-radius:6px; background:rgba(255,255,255,.05); display:flex; align-items:flex-end; overflow:hidden; }
.nu-day .col i{ width:100%; border-radius:6px; background:linear-gradient(180deg,var(--nu2),var(--nu)); }
.nu-day .col i.over{ background:linear-gradient(180deg,#FF9466,#FF5A2E); }
.nu-day .col em{ position:absolute; left:0; right:0; height:1px; background:rgba(255,255,255,.35); }
.nu-day small{ font-size:12px; color:var(--text-dim); font-weight:700; }
.nu-day.today small{ color:var(--nu); }
.nu-add{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:15px; border-radius:20px; border:1px dashed rgba(255,122,69,.5); background:rgba(255,122,69,.08); color:#fff; font-weight:700; font-size:14px; transition:transform .2s; }
.nu-add .material-symbols-rounded{ width:30px; height:30px; border-radius:50%; background:var(--nu); color:#061A24; font-size:18px; }
.nu-add:active{ transform:scale(.98); }
.nu-meal{ background:linear-gradient(180deg, color-mix(in srgb, var(--tint) 10%, var(--card)) 0%, var(--card) 70%); border:1px solid var(--border); border-radius:22px; padding:14px; }
.nu-meal-head{ display:flex; align-items:center; gap:12px; cursor:pointer; }
.nu-thumb{ position:relative; width:52px; height:52px; flex-shrink:0; }
.nu-thumb span{ position:absolute; width:40px; height:40px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 4px 12px rgba(0,0,0,.35); left:calc(var(--k)*7px); top:calc(var(--k)*6px); z-index:calc(5 - var(--k)); }
.nu-thumb span.solo{ position:static; width:52px; height:52px; font-size:26px; background:color-mix(in srgb, var(--tint) 22%, #222); box-shadow:none; }
.nu-meal-name{ flex:1; min-width:0; display:flex; flex-direction:column; }
.nu-meal-name b{ font-size:15px; } .nu-meal-name small{ font-size:12px; color:var(--text-muted); text-decoration:underline dotted; text-underline-offset:3px; width:max-content; }
.nu-meal-kcal{ text-align:right; display:flex; flex-direction:column; }
.nu-meal-kcal b{ font-size:20px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; }
.nu-meal-kcal small{ font-size:12px; color:var(--tint); font-weight:600; }
.nu-meal-macros{ display:flex; align-items:center; gap:14px; margin-top:12px; }
.nu-meal-macros > div{ display:flex; flex-direction:column; }
.nu-meal-macros small{ font-size:12px; color:var(--text-dim); } .nu-meal-macros b{ font-size:13px; }
.nu-mini{ margin-left:auto; width:34px; height:34px; border-radius:50%; border:none; background:var(--tint); color:#061A24; display:flex; align-items:center; justify-content:center; }
.nu-mini + .nu-mini{ margin-left:0; }
.nu-mini.ghost{ background:rgba(255,255,255,.08); color:#fff; }
.nu-mini .material-symbols-rounded{ font-size:16px; transition:transform .25s; }
.nu-items{ margin-top:10px; border-top:1px solid var(--border); padding-top:6px; }
.nu-item{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.nu-item:last-child{ border-bottom:none; }
.nu-item .e{ width:34px; height:34px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.nu-item .t{ flex:1; min-width:0; display:flex; flex-direction:column; } .nu-item .t b{ font-size:13px; font-weight:600; } .nu-item .t small{ font-size:12px; color:var(--text-dim); }
.nu-item .k{ font-size:14px; } .nu-item .k::after{ content:" kcal"; font-size:12px; color:var(--text-dim); font-weight:500; }
.nu-del{ width:26px; height:26px; border-radius:50%; border:none; background:rgba(255,255,255,.06); color:var(--text-dim); display:flex; align-items:center; justify-content:center; }
.nu-del .material-symbols-rounded{ font-size:13px; }
.nu-empty{ font-size:12px; color:var(--text-dim); margin-top:10px; }
.nu-water{ background:linear-gradient(160deg, rgba(94,230,199,.14), var(--card) 60%); border:1px solid var(--border); border-radius:22px; padding:14px; }
.nu-water-head{ display:flex; justify-content:space-between; align-items:center; }
.nu-water-head b{ display:block; font-size:15px; } .nu-water-head small{ font-size:12px; color:#9AF1DD; }
.nu-cups{ display:grid; grid-template-columns:repeat(8,1fr); gap:6px; margin:12px 0; }
.nu-cups .cup{ aspect-ratio:3/4; border-radius:8px 8px 12px 12px; border:1.5px solid rgba(94,230,199,.35); background:transparent; display:flex; align-items:center; justify-content:center; color:rgba(94,230,199,.4); transition:all .25s; }
.nu-cups .cup.on{ background:linear-gradient(180deg, #9AF1DD, #2FB99A); border-color:transparent; color:#fff; }
.nu-cups .cup .material-symbols-rounded{ font-size:14px; }
.nu-water-btns{ display:flex; gap:8px; }
.nu-water-btns button{ flex:1; padding:9px 0; border-radius:12px; border:1px solid var(--border-strong); background:none; color:#fff; font-size:12px; font-weight:700; }
.nu-tags{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.nu-tags::-webkit-scrollbar{ display:none; }
.nu-tag{ flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:5px; background:none; border:none; color:var(--text-muted); }
.nu-tag span{ width:56px; height:56px; border-radius:18px; background:var(--card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:26px; transition:all .25s; }
.nu-tag small{ font-size:12px; font-weight:600; }
.nu-tag.on span{ background:rgba(255,122,69,.18); border-color:var(--nu); transform:translateY(-2px); }
.nu-tag.on small{ color:#fff; }
.nu-recipes{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:4px 16px 8px; scrollbar-width:none; }
.nu-recipes::-webkit-scrollbar{ display:none; }
.nu-recipe{ flex:0 0 62%; scroll-snap-align:start; background:linear-gradient(180deg,#0E3038,#0B2A33); border:1px solid var(--border); border-radius:26px; padding:12px 14px 14px; cursor:pointer; animation:nuCard .6s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i)*70ms); }
@keyframes nuCard{ from{ opacity:0; transform:translateX(30px); } to{ opacity:1; transform:none; } }
.nu-recipe-top{ display:flex; justify-content:space-between; }
.nu-recipe-top .time{ display:flex; align-items:center; gap:4px; font-size:12px; color:var(--text-muted); }
.nu-recipe-top .time .material-symbols-rounded{ font-size:12px; color:var(--nu); }
.nu-bowl{ width:72%; aspect-ratio:1; margin:8px auto 10px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #1C4A52, #061A24 70%); box-shadow:inset 0 -6px 18px rgba(0,0,0,.6), 0 14px 28px rgba(0,0,0,.45), 0 0 0 6px rgba(255,122,69,.08); display:flex; align-items:center; justify-content:center; }
.nu-bowl span{ font-size:clamp(44px,13vw,64px); filter:drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
.nu-recipe:hover .nu-bowl span{ transform:rotate(-8deg) scale(1.05); transition:transform .4s; }
.nu-recipe-name{ font-size:14px; font-weight:700; line-height:1.25; min-height:2.5em; }
.nu-recipe-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.nu-recipe-foot .lvl{ display:flex; align-items:center; gap:3px; font-size:12px; color:var(--text-muted); }
.nu-recipe-foot .lvl i{ width:5px; height:12px; border-radius:2px; background:rgba(255,255,255,.12); }
.nu-recipe-foot .lvl i:first-of-type{ margin-left:4px; }
.nu-recipe-foot .lvl i.on{ background:var(--nu); }
.nu-recipe-foot b{ font-size:17px; font-weight:800; }
.nu-recipe-hero{ display:flex; align-items:center; gap:16px; }
.nu-bowl.big{ width:120px; margin:0; flex-shrink:0; }
.nu-recipe-kcal b{ display:block; font-size:44px; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--nu); }
.nu-recipe-kcal small{ color:var(--text-muted); }
.nu-pick{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.nu-pick button{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px; border-radius:18px; border:1px solid var(--border); background:color-mix(in srgb, var(--tint) 10%, var(--surface)); color:#fff; text-align:left; }
.nu-pick button span{ font-size:26px; } .nu-pick button small{ color:var(--text-muted); font-size:12px; }
.nu-pick button.on{ border-color:var(--tint); }

/* =========================================================================
   LÕI GIAO DIỆN "LIQUID GLASS" (v2.2)
   Font Inter / Inter Tight · icon nét mảnh · kính mờ trên nền bão · hiệu ứng vào màn
   ========================================================================= */
:root{
  --bg:#061A24;
  --surface: rgba(255,255,255,.10);
  --surface-2: rgba(255,255,255,.14);
  --surface-3: rgba(255,255,255,.18);
  --border: rgba(255,255,255,.16);
  --border-strong: rgba(255,255,255,.26);
  --text-muted: rgba(255,255,255,.78);
  --text-dim: rgba(255,255,255,.55);
  --glass: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.20) 24%, rgba(255,255,255,.17) 78%, rgba(255,255,255,.15) 100%);
  --glass-blur: blur(22px) saturate(118%);
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-soft: cubic-bezier(.22,.61,.36,1);
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-head: 'Inter Tight', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}
html,body{ background:#061A24; font-family:var(--font-ui); font-feature-settings:"kern" 1; }
#app-shell{
  background:#061A24 url("assets/bg-storm.jpg") center 20% / cover no-repeat;
}
#app-shell::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(105deg, rgba(6,26,36,.34) 0%, rgba(6,26,36,.20) 40%, rgba(6,26,36,.06) 78%, transparent 100%),
    linear-gradient(180deg, rgba(6,26,36,.20) 0%, transparent 22%),
    linear-gradient(0deg, rgba(6,26,36,.18), rgba(6,26,36,.18)); }
#app-scroll, .bottom-nav{ position:relative; z-index:1; }
.screen{ background:transparent; }
#screen-ptprofile{ background:#061A24; }

/* Chữ */
h1,h2,h3,h4,.headline,.hero-title,.onboard-hero{ font-family:var(--font-head); text-transform:none; font-weight:500; letter-spacing:-.02em; }
.topbar .logo{ font-family:var(--font-head); font-weight:600; letter-spacing:-.01em; text-transform:none; color:#fff; font-size:18px; }
.section-title h3{ font-size:17px; font-weight:600; }
.card-title{ font-family:var(--font-ui); text-transform:none; letter-spacing:0; font-size:14px; font-weight:600; color:#fff; }
.hero-eyebrow{ letter-spacing:.6px; color:rgba(255,255,255,.85); }
.btn{ font-family:var(--font-ui); text-transform:none; letter-spacing:0; font-weight:600; }
.nav-item{ text-transform:none; letter-spacing:0; font-size:12px; font-weight:500; font-family:var(--font-ui); }
.stat-box .cap, .metric small{ text-transform:none; letter-spacing:0; }
.stat-box .num, .ring-center .num{ font-family:var(--font-head); font-weight:500; }

/* Icon nét mảnh */
.material-symbols-rounded svg.ln{ fill:none !important; stroke:currentColor; }

/* Kính mờ cho thẻ */
.card, .stat-box, .list-item, .metric, .entry-tile, .quick-row button, .wd, .nu-gauge-card, .nu-meal, .nu-water, .nu-recipe, .nu-tag span,
.plan-card, .food-result, .ex-edit, .seg, .role-card, .streak-chip, .date-chip, .home-hero, .pp-card{
  background: var(--glass) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:none !important;
}
.card, .nu-gauge-card, .nu-meal, .nu-water, .home-hero{ position:relative; overflow:hidden; border-radius:24px; }
.home-hero::before{ background: linear-gradient(90deg, rgba(6,26,36,.55) 20%, rgba(6,26,36,.10)) !important; }
.home-hero{ background-blend-mode:normal; }
.wd.today{ background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.18)) !important; border-color:rgba(255,255,255,.5) !important; }
.wd.today small{ color:#fff; }
.date-chip b{ color:#fff; }

/* Vệt sáng lướt qua thẻ (1 lần khi vào màn) */
.card::after, .nu-gauge-card::after, .home-hero::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:38%; pointer-events:none;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.17) 50%, transparent 100%);
  transform:translate3d(-150%,0,0) skewX(-18deg); }
.screen.enter .card::after, .screen.enter .nu-gauge-card::after, .screen.enter .home-hero::after{ animation:fkSheen 1.15s var(--e-soft) 1.1s 1 both; }
@keyframes fkSheen{ from{ transform:translate3d(-150%,0,0) skewX(-18deg); } to{ transform:translate3d(320%,0,0) skewX(-18deg); } }

/* Thanh trên & dock dưới */
.topbar{ background:linear-gradient(180deg, rgba(6,26,36,.55), rgba(6,26,36,0)) !important; border-bottom:none !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
.topbar .icon-btn, .icon-btn{ background:rgba(255,255,255,.15); -webkit-backdrop-filter:blur(16px) saturate(115%); backdrop-filter:blur(16px) saturate(115%); border:none; color:#fff; border-radius:50%; transition:background .2s; }
.icon-btn:hover{ background:rgba(255,255,255,.24); }
.bottom-nav{ margin:0 12px 10px; height:64px; border-radius:24px; padding-bottom:0;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.09)) !important;
  -webkit-backdrop-filter:blur(20px) saturate(118%); backdrop-filter:blur(20px) saturate(118%); border:1px solid rgba(255,255,255,.16); }
@supports (padding:max(0px)){ .bottom-nav{ margin-bottom:max(10px, env(safe-area-inset-bottom)); } }
.nav-item{ color:rgba(255,255,255,.62); }
.nav-item.active{ color:#fff; }
.nav-item.active .material-symbols-rounded{ background:rgba(255,255,255,.22); color:#fff; border-radius:14px; }
.nav-item .material-symbols-rounded{ font-size:21px; }

/* Nút, ô nhập, chip */
.btn-primary{ background:#fff !important; color:#061A24 !important; box-shadow:none !important; }
.btn-primary .material-symbols-rounded{ color:#061A24; }
.btn-outline{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.btn-soft{ background:rgba(255,255,255,.18) !important; color:#fff !important; }
.btn-ghost{ color:rgba(255,255,255,.85); }
.pill{ background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.16); color:#fff; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); text-transform:none; letter-spacing:0; }
.pill.active, .pill.hot{ background:#fff; color:#061A24; border-color:#fff; }
.field input, .field select, .field textarea, .fb-input, .search-box, .join-input, .chat-input textarea{
  background:rgba(255,255,255,.10) !important; border:1px solid rgba(255,255,255,.18) !important; color:#fff; }
.field input:focus, .field select:focus, .field textarea:focus, .fb-input:focus{ background:rgba(255,255,255,.16) !important; border-color:rgba(255,255,255,.5) !important; }
.field label{ text-transform:none; letter-spacing:0; color:rgba(255,255,255,.8); font-weight:500; }
.day-tab{ text-transform:none; letter-spacing:0; font-weight:500; font-family:var(--font-ui); }
.day-tab.active{ color:#fff; } .day-tab.active::after{ background:#fff; }
.progress-track, .nu-bar{ background:rgba(255,255,255,.14); }
.progress-fill{ background:linear-gradient(90deg, rgba(255,255,255,.75), #fff); }

/* Sheet (bảng trượt) dạng kính */
.sheet-backdrop{ background:rgba(2,10,16,.45); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.sheet{ background:linear-gradient(180deg, rgba(34,52,62,.86), rgba(14,28,36,.92)) !important; -webkit-backdrop-filter:blur(26px) saturate(118%); backdrop-filter:blur(26px) saturate(118%); border-top:1px solid rgba(255,255,255,.2); }
.sheet-header h3{ font-size:19px; }
#toast{ background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
#onboarding, #auth:not(.wl-mode){ background:#061A24 url("assets/bg-storm.jpg") center 20% / cover no-repeat; }
.choice-card{ background:var(--glass); border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
.choice-card.selected{ background:#fff; color:#061A24; border-color:#fff; }

/* Hero cũ của các màn (tập luyện, giấc ngủ): mờ ảnh vào nền bão */
.hero{ background-color:transparent; }
.hero::before{ background:linear-gradient(180deg, rgba(6,26,36,.10) 0%, rgba(6,26,36,.35) 55%, rgba(6,26,36,.75) 100%); }

/* Màn Dinh dưỡng trên nền kính: giữ màu cam đào làm điểm nhấn */
.nu{ --card:transparent; }
.nu-meal{ background: var(--glass) !important; }
.nu-gauge-svg .seg{ fill:rgba(255,255,255,.16); }
.nu-add{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }

/* =========================================================================
   HIỆU ỨNG VÀO MÀN (choreography)
   ========================================================================= */
@keyframes fkRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes fkSlideL{ from{ opacity:0; transform:translateX(-26px); } to{ opacity:1; transform:none; } }
@keyframes fkPop{ from{ opacity:0; transform:scale(.7); } to{ opacity:1; transform:none; } }
@keyframes fkLineUp{ from{ transform:translateY(115%); } to{ transform:none; } }
.screen.enter .topbar .logo{ animation:fkRise .7s var(--e-out) .1s both; }
.screen.enter .topbar .icon-btn{ animation:fkPop .58s var(--e-out) both; }
.screen.enter .topbar .icon-btn:last-child{ animation-delay:.12s; }
.screen.enter .content > *{ animation:fkRise .8s var(--e-out) both; }
.screen.enter .content > *:nth-child(1){ animation-delay:.08s } .screen.enter .content > *:nth-child(2){ animation-delay:.16s }
.screen.enter .content > *:nth-child(3){ animation-delay:.24s } .screen.enter .content > *:nth-child(4){ animation-delay:.32s }
.screen.enter .content > *:nth-child(5){ animation-delay:.40s } .screen.enter .content > *:nth-child(6){ animation-delay:.48s }
.screen.enter .content > *:nth-child(7){ animation-delay:.56s } .screen.enter .content > *:nth-child(8){ animation-delay:.62s }
.screen.enter .content > *:nth-child(n+9){ animation-delay:.68s }
.screen.enter .home-greet h2, .screen.enter .hero-title{ animation:fkSlideL .9s var(--e-out) .12s both; }
.bottom-nav .nav-item{ transition:transform .25s var(--e-out); }
.bottom-nav .nav-item:active{ transform:scale(.92); }
:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .screen.enter *, .screen.enter *::after{ animation:none !important; }
}
.section-title a{ color:rgba(255,255,255,.82) !important; text-transform:none; letter-spacing:0; font-weight:500; font-size:13px; }
.small-note{ color:rgba(255,255,255,.7); }
.streak-chip .material-symbols-rounded{ color:#FF7A45; }
.badge-pro{ background:rgba(255,255,255,.2); color:#fff; }
.seg button.active{ background:#fff; color:#061A24; }
.seg button.active i.cnt{ background:#061A24; color:#fff; }
.avatar-ini{ background:linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,.14)); border:1px solid rgba(255,255,255,.3); }
.card-title .material-symbols-rounded{ color:#fff; }

/* =========================================================================
   BẢNG MÀU 3 TONE (v2.3) — dùng thống nhất toàn app
   1. NAVY BÃO  #061A24  — nền, bề mặt, chữ trên nền sáng
   2. MINT      #5EE6C7  — dữ liệu, tiến độ, trạng thái tốt, lựa chọn đang chọn, liên kết
   3. CORAL     #FF7A45  — hành động chính, năng lượng (calo, chuỗi ngày), cảnh báo
   Trắng (độ trong suốt khác nhau) chỉ là màu trung tính cho chữ & kính.
   ========================================================================= */
:root{
  --navy:#061A24; --navy-2:#0B2A33; --navy-3:#114650;
  --mint:#5EE6C7; --mint-2:#9AF1DD; --mint-3:#2FB99A;
  --coral:#FF7A45; --coral-2:#FFB08A; --coral-3:#E0582A;
  --primary:var(--coral); --primary-dark:var(--coral-3); --primary-soft:var(--coral-2);
  --success:var(--mint); --warn:var(--coral-2); --gold:var(--mint);
  --bg:var(--navy);
}
html,body{ background:var(--navy); }

/* Hành động chính = CORAL */
.btn-primary{ background:var(--coral) !important; color:var(--on-coral, #061A24) !important; }   /* QU-28: chữ navy trên coral 6,9:1 (trắng chỉ 2,6:1) */
.btn-primary .material-symbols-rounded{ color:var(--on-coral, #061A24); }
.btn-soft{ background:rgba(255,122,69,.18) !important; color:var(--coral-2) !important; }
.nu-mini{ background:var(--coral); color:var(--on-coral, #061A24); }
.nu-add .material-symbols-rounded{ background:var(--coral); color:var(--on-coral, #061A24); }
.nav-item.active{ color:#fff; }
.nav-item.active .material-symbols-rounded{ background:rgba(255,122,69,.28); color:var(--coral-2); }
.nav-dot{ background:var(--coral); }
i.cnt{ background:var(--coral); color:var(--on-coral, #061A24); }
.streak-chip{ background:linear-gradient(160deg, rgba(255,122,69,.30), rgba(255,122,69,.08)) !important; border-color:rgba(255,122,69,.45) !important; }
.streak-chip .material-symbols-rounded{ color:var(--coral-2); }
.auth-err{ color:var(--coral-2); }

/* Dữ liệu / tiến độ / đang chọn = MINT */
.progress-fill{ background:linear-gradient(90deg, var(--mint-3), var(--mint)); }
.pill.active, .pill.hot{ background:var(--mint); color:var(--navy); border-color:var(--mint); }
.seg button.active{ background:var(--mint); color:var(--navy); }
.seg button.active i.cnt{ background:var(--navy); color:#fff; }
.choice-card.selected{ background:var(--mint); color:var(--navy); border-color:var(--mint); }
.day-tab.active::after{ background:var(--mint); }
.section-title a{ color:var(--mint-2) !important; }
.wd.done i{ background:var(--mint); }
.wd.miss i{ background:rgba(255,122,69,.55); }
.wd.today{ border-color:var(--mint) !important; }
.list-item .check.checked{ background:var(--mint); border-color:var(--mint); color:var(--navy); }
.toggle.on{ background:var(--mint); border-color:var(--mint); }
.st-up{ background:rgba(94,230,199,.16); color:var(--mint-2); }
.st-done{ background:var(--mint); color:var(--navy); }
.st-late{ background:rgba(255,122,69,.2); color:var(--coral-2); }
.st-cancel{ background:rgba(255,255,255,.1); color:rgba(255,255,255,.7); }
.soon-badge{ color:var(--coral-2); background:rgba(255,122,69,.16); }
.join-code{ color:var(--mint); }
.bubble.me{ background:rgba(94,230,199,.16); border-color:rgba(94,230,199,.35); }
.bubble.k-reminder{ border-color:var(--coral); }
.bubble.k-feedback{ border-color:var(--mint); }
.card-title .material-symbols-rounded, .link-row .left .material-symbols-rounded{ color:var(--mint); }
.hero-eyebrow{ color:var(--mint-2); }
.wk .bar{ background:linear-gradient(180deg, var(--mint), var(--mint-3)); }
.avatar-ini{ background:linear-gradient(135deg, var(--mint-3), var(--navy-3)); border-color:rgba(94,230,199,.4); }
.date-chip b{ color:var(--mint-2); }

/* Dinh dưỡng: calo = coral, nước = mint */
.nu{ --nu:var(--coral); --nu2:var(--coral-2); }
.nu-goal, .nu-gauge-center .material-symbols-rounded{ color:var(--coral-2); }
.nu-water-head small{ color:var(--mint-2); }
.nu-cups .cup{ border-color:rgba(94,230,199,.35); color:rgba(94,230,199,.45); }
.nu-cups .cup.on{ background:linear-gradient(180deg, var(--mint), var(--mint-3)); color:var(--navy); }
.nu-water{ background:linear-gradient(160deg, rgba(94,230,199,.16), rgba(255,255,255,.08) 60%) !important; }
.nu-tag.on span{ background:rgba(94,230,199,.18); border-color:var(--mint); }
.nu-recipe-foot .lvl i.on{ background:var(--coral); }
.nu-recipe-top .time .material-symbols-rounded{ color:var(--mint); }
.nu-bowl{ background:radial-gradient(circle at 35% 30%, #1C4A52, var(--navy) 70%); box-shadow:inset 0 -6px 18px rgba(0,0,0,.5), 0 14px 28px rgba(0,0,0,.4), 0 0 0 6px rgba(94,230,199,.10); }
.nu-recipe-kcal b{ color:var(--coral); }

/* Trang hồ sơ PT & màn mở app theo cùng bảng màu */
#screen-ptprofile{ background:var(--navy); --gold:var(--mint); }
.pp-bg{ background:
    radial-gradient(70% 40% at 85% 8%, rgba(255,122,69,.28), transparent 70%),
    radial-gradient(60% 35% at 0% 45%, rgba(94,230,199,.14), transparent 70%),
    radial-gradient(80% 40% at 50% 100%, rgba(94,230,199,.12), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 22px), var(--navy) !important; }
.pp-logo b{ color:var(--coral); }
.pp-ring > svg path{ stroke:var(--coral); filter:drop-shadow(0 0 8px rgba(255,122,69,.8)); }
.pp-mono span{ background:linear-gradient(180deg, rgba(255,122,69,.95) 0%, rgba(255,122,69,.35) 55%, transparent 90%); -webkit-background-clip:text; background-clip:text; }
.wl{ --y:var(--mint); }
#auth.wl-mode{ background:var(--navy); }
.wl-hero-bg{ background-color:var(--navy-2); }
.wl-hero-shade{ background: radial-gradient(90% 60% at 100% 0%, rgba(255,122,69,.30), transparent 60%), linear-gradient(180deg, rgba(6,26,36,.25) 0%, rgba(6,26,36,.15) 35%, rgba(6,26,36,.85) 75%, var(--navy) 100%); }
.wl-speed i{ background:linear-gradient(90deg, transparent, rgba(94,230,199,.8)); }
.wl-speed i:nth-child(4){ background:linear-gradient(90deg, transparent, rgba(255,122,69,.9)); }
.wl-info{ background:linear-gradient(180deg, var(--navy-2) 0%, var(--navy-3) 55%, #1B6A68 100%); }
.wl-tag-sub, .wl-stat span{ color:rgba(255,255,255,.82); }
.wl-route{ stroke:var(--mint); }
.wl-runner{ fill:var(--coral); }
.wl-stop text{ fill:#fff; }
.wl-stop circle:last-child{ fill:var(--navy); }
.wl-bubble .material-symbols-rounded{ color:var(--coral); }
.wl-pill.gold{ background:var(--coral); color:var(--on-coral, #061A24); }
.wl-pill.gold:hover{ background:var(--coral-2); }
.wl-menu{ background:linear-gradient(160deg, var(--navy-2), var(--navy-3)); }
.wl-cta span{ color:var(--on-coral, #061A24); }

/* ---- Video minh hoạ (Pexels / Pixabay) ---- */
.stock-wrap{ position:relative; }
.stock-video{ width:100%; display:block; border-radius:16px; background:#000; object-fit:cover; aspect-ratio:16/10; }
.stock-credit{ font-size:12px; color:rgba(255,255,255,.6); margin-top:5px; }
.stock-credit a{ color:var(--mint-2); text-decoration:underline; text-underline-offset:2px; }
.vp-loading{ display:flex; justify-content:center; padding:40px 0; }
.vp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; max-height:52vh; overflow-y:auto; }
.vp-item{ position:relative; padding:0; border:1px solid rgba(255,255,255,.14); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.06); aspect-ratio:16/11; }
.vp-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--e-out); }
.vp-item:hover img{ transform:scale(1.05); }
.vp-dur, .vp-src{ position:absolute; bottom:6px; font-size:12px; font-weight:700; padding:2px 6px; border-radius:6px; background:rgba(6,26,36,.75); color:#fff; }
.vp-dur{ right:6px; } .vp-src{ left:6px; color:var(--mint-2); }
.ex-video-row{ display:flex; align-items:center; gap:6px; margin-top:6px; }
.ex-video-row img{ width:44px; height:32px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.ex-video-row .btn{ flex-shrink:0; padding:8px 10px; }
.ex-edit .stock-credit{ margin-top:4px; }
.wl-hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease; }
.wl-hero-video.on{ opacity:1; }
.wl-credit{ position:absolute; z-index:4; left:20px; top:calc(64px + env(safe-area-inset-top)); }
.wl-credit .stock-credit{ margin:0; font-size:12px; }

/* =========================================================================
   THƯ VIỆN BÀI TẬP THEO NHÓM CƠ
   ========================================================================= */
.exlib-hero{ padding:4px 2px 2px; }
.exlib-chips{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.exlib-chips::-webkit-scrollbar{ display:none; }
.exlib-chips .pill{ flex-shrink:0; }
.mg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mg-card{ position:relative; overflow:hidden; aspect-ratio:1.15; border-radius:22px; border:1px solid rgba(255,255,255,.16); padding:0; text-align:left; color:#fff;
  background:radial-gradient(120% 90% at 100% 0%, rgba(94,230,199,.22), transparent 60%), linear-gradient(160deg, var(--navy-3), var(--navy-2));
  animation:fkRise .7s var(--e-out) both; animation-delay:calc(var(--i)*40ms); }
.mg-card img{ position:absolute; right:-6%; bottom:-4%; width:78%; height:78%; object-fit:cover; border-radius:18px; opacity:.9; mix-blend-mode:luminosity; filter:contrast(1.05); transition:transform .5s var(--e-out); }
.mg-card:hover img{ transform:scale(1.05); }
.mg-shade{ position:absolute; inset:0; background:linear-gradient(115deg, rgba(6,26,36,.92) 25%, rgba(6,26,36,.35) 70%, rgba(6,26,36,.1)); }
.mg-ic{ position:absolute; left:12px; top:12px; width:34px; height:34px; border-radius:11px; background:rgba(255,122,69,.22); color:var(--coral-2); display:flex; align-items:center; justify-content:center; }
.mg-ic .material-symbols-rounded{ font-size:18px; }
.mg-name{ position:absolute; left:12px; bottom:30px; right:8px; font-family:var(--font-head); font-size:18px; font-weight:600; letter-spacing:-.02em; line-height:1.1; }
.mg-count{ position:absolute; left:12px; bottom:11px; font-size:12px; color:var(--mint-2); font-weight:600; }
.exlib-list{ display:flex; flex-direction:column; gap:8px; }
.exlib-row{ cursor:pointer; }
.exlib-row .thumb{ background:#fff; object-fit:cover; }
.exlib-row .ex-num .material-symbols-rounded{ font-size:20px; color:var(--mint); }
.exlib-tags{ display:flex; gap:4px; margin-top:4px; }
.exlib-tags .tg{ font-size:12px; font-weight:700; padding:2px 6px; border-radius:6px; background:rgba(255,255,255,.12); color:rgba(255,255,255,.75); }
.exlib-tags .tg.fk{ background:rgba(255,122,69,.2); color:var(--coral-2); }
.exlib-row .nu-mini{ margin-left:0; flex-shrink:0; }
.ld-img{ width:100%; max-height:34vh; object-fit:cover; border-radius:16px; display:block; }
.ld-img.white{ object-fit:contain; background:#fff; }
.ld-steps{ padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-muted); }
.atp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.atp-day{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px; border-radius:16px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); color:#fff; text-align:left; }
.atp-day small{ font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.atp-day i{ font-style:normal; font-size:12px; color:var(--mint-2); font-weight:700; }
.atp-day.today{ border-color:var(--mint); background:rgba(94,230,199,.12); }

/* ---- Khối video phát ngay ---- */
.vblock{ margin-bottom:12px; }
.vplayer{ position:relative; width:100%; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#000; border:1px solid rgba(255,255,255,.14); }
.vplayer.skeleton{ display:flex; align-items:center; justify-content:center; background:linear-gradient(110deg, rgba(255,255,255,.06) 30%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.06) 70%); background-size:200% 100%; animation:vbShimmer 1.2s linear infinite; }
@keyframes vbShimmer{ to{ background-position:-200% 0; } }
.vplayer video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.vplayer[data-state="playing"] video{ object-fit:contain; }
.vp-play{ position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; border:none; background:rgba(255,122,69,.92); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 28px rgba(0,0,0,.45), 0 0 0 8px rgba(255,255,255,.14); transition:transform .25s var(--e-out); }
.vp-play:hover{ transform:scale(1.08); }
.vp-play .material-symbols-rounded{ font-size:34px; margin-left:3px; }
.vplayer[data-state="playing"] .vp-play, .vplayer[data-state="playing"] .vp-time, .vplayer[data-state="playing"] .vp-saved{ display:none; }
.vplayer::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 55%, rgba(6,26,36,.6)); }
.vplayer[data-state="playing"]::after{ display:none; }
.vp-time{ position:absolute; right:10px; bottom:10px; z-index:2; font-size:12px; font-weight:700; padding:3px 8px; border-radius:8px; background:rgba(6,26,36,.8); color:#fff; }
.vp-saved{ position:absolute; left:10px; top:10px; z-index:2; font-size:12px; font-weight:700; padding:3px 8px; border-radius:8px; background:var(--mint); color:var(--navy); }
.vp-err{ position:absolute; inset:auto 0 0 0; z-index:3; padding:10px; font-size:12px; background:rgba(6,26,36,.92); color:#fff; }
.vp-err a{ color:var(--mint-2); text-decoration:underline; }
.vb-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; }
.vb-foot .stock-credit{ margin:0; }
.vb-save{ flex-shrink:0; display:flex; align-items:center; gap:4px; border:none; border-radius:10px; padding:6px 10px; font-size:12px; font-weight:700; background:var(--mint); color:var(--navy); }
.vb-save .material-symbols-rounded{ font-size:14px; }
.vthumbs{ display:flex; gap:8px; overflow-x:auto; margin-top:10px; padding-bottom:2px; scrollbar-width:none; }
.vthumbs::-webkit-scrollbar{ display:none; }
.vthumb{ position:relative; flex:0 0 96px; aspect-ratio:16/10; border-radius:12px; overflow:hidden; padding:0; border:2px solid transparent; background:rgba(255,255,255,.08); }
.vthumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.vthumb .material-symbols-rounded{ position:absolute; inset:0; margin:auto; width:26px; height:26px; border-radius:50%; background:rgba(6,26,36,.7); color:#fff; font-size:16px; }
.vthumb i{ position:absolute; right:4px; bottom:3px; font-style:normal; font-size:12px; font-weight:700; color:#fff; text-shadow:0 1px 3px #000; }
.vthumb.on{ border-color:var(--coral); }
.vb-msg{ display:flex; align-items:center; gap:8px; padding:12px; border-radius:14px; background:rgba(255,255,255,.08); font-size:12.5px; color:var(--text-muted); }
.vb-msg .material-symbols-rounded{ color:var(--mint); }
.ld-media{ position:relative; margin-top:4px; }
.ld-media span{ position:absolute; left:8px; bottom:8px; font-size:12px; font-weight:700; padding:2px 7px; border-radius:6px; background:rgba(6,26,36,.75); color:#fff; }
.ld-media .ld-img{ max-height:22vh; }
.exdb-anim-small{ max-height:20vh !important; margin-top:6px; }
.vp-saved.guide{ background:var(--mint); color:var(--navy); }
.vp-saved.ref{ background:rgba(6,26,36,.8); color:rgba(255,255,255,.85); }
.vplayer video[src*="ymove.app"]{ object-fit:contain; background:#fff; }

/* ---- Giáo án mẫu ---- */
.tpl-banner{ width:100%; display:flex; align-items:center; gap:12px; text-align:left; padding:14px; border-radius:20px; border:1px solid rgba(94,230,199,.35); color:#fff;
  background:linear-gradient(120deg, rgba(94,230,199,.18), rgba(255,122,69,.12)); }
.tpl-banner > .material-symbols-rounded:first-child{ width:40px; height:40px; border-radius:12px; background:rgba(94,230,199,.2); color:var(--mint); font-size:22px; }
.tpl-banner div{ flex:1; display:flex; flex-direction:column; } .tpl-banner small{ font-size:12px; color:var(--text-muted); margin-top:2px; }
.tpl-list{ display:flex; flex-direction:column; gap:10px; max-height:58vh; overflow-y:auto; }
.tpl-card{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:#fff; }
.tpl-card b{ font-size:15px; font-family:var(--font-head); font-weight:600; }
.tpl-card small{ font-size:12px; color:var(--text-muted); }
.tpl-card em{ font-style:normal; font-size:12px; color:var(--mint-2); }
.tpl-top{ display:flex; flex-wrap:wrap; gap:5px; }
.tpl-g, .tpl-lv{ font-size:12px; font-weight:700; padding:3px 8px; border-radius:7px; background:rgba(255,255,255,.12); color:rgba(255,255,255,.85); }
.tpl-g.g-nam{ background:rgba(94,230,199,.2); color:var(--mint-2); } .tpl-g.g-nu{ background:rgba(255,122,69,.22); color:var(--coral-2); }
.tpl-lv.lv-beginner{ background:rgba(94,230,199,.12); } .tpl-lv.lv-advanced{ background:rgba(255,122,69,.18); }
.tpl-week{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.tpl-day{ padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); }
.tpl-day.rest{ opacity:.55; }
.tpl-day-h{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.tpl-day-h b{ font-size:12px; color:var(--mint-2); min-width:58px; } .tpl-day-h span{ font-size:13px; font-weight:600; flex:1; } .tpl-day-h i{ font-style:normal; font-size:12px; color:var(--text-dim); }
.tpl-day ol{ margin:6px 0 0 18px; display:flex; flex-direction:column; gap:3px; }
.tpl-day li{ font-size:12px; color:var(--text-muted); } .tpl-day li span{ margin-right:6px; } .tpl-day li b{ color:#fff; font-weight:600; }

/* Giáo án: nút thêm nhanh */
.tpl-card{ cursor:pointer; width:100%; }
.tpl-actions{ display:flex; gap:8px; margin-top:8px; width:100%; }
.tpl-add{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 12px; border-radius:999px; border:0; background:var(--coral); color:var(--on-coral, #061A24); font-weight:600; font-size:13px; font-family:inherit; }
.tpl-add:disabled{ opacity:.7; }
.tpl-add .material-symbols-rounded, .tpl-add svg{ width:16px; height:16px; font-size:16px; }
.tpl-view{ padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; font-size:13px; font-family:inherit; }
.thumb-wrap .cam-badge.play{ background:var(--mint); }
.thumb-wrap .cam-badge.play .material-symbols-rounded, .thumb-wrap .cam-badge.play svg{ color:var(--navy); }

/* Đăng nhập Google / Facebook */
.auth-social{ display:flex; flex-direction:column; gap:10px; margin:14px 0 4px; }
.btn-social{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:13px 16px; border-radius:999px; font:600 15px/1 var(--font-body, Inter, sans-serif); cursor:pointer; border:1px solid rgba(255,255,255,.18); }
.btn-social.google{ background:#fff; color:#1f1f1f; border-color:#dadce0; }
.btn-social.facebook{ background:#1877F2; color:#fff; border-color:#1877F2; }
.btn-social:active{ transform:scale(.98); }
.btn-social svg{ flex:none; }
.auth-or{ display:flex; align-items:center; gap:10px; margin:6px 0 2px; color:var(--text-muted); font-size:12px; }
.auth-or::before, .auth-or::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.15); }

/* ===== Dinh dưỡng v3: ảnh thật tách nền, thực đơn theo thể trạng ===== */
.fp{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.fp.emo{ display:flex; align-items:center; justify-content:center; font-size:inherit; filter:none; }
.nu-thumb img.fp, .nu-thumb .fp{ width:40px; height:40px; }
.nu-item .e{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; flex:none; }
.nu-item .e .fp{ width:40px; height:40px; }
.nu-bowl .fp{ width:84%; height:84%; }
.nu-bowl.big .fp{ width:92%; height:92%; }
.nu-recipe-top .cz{ margin-left:auto; font-size:12px; padding:2px 7px; border-radius:999px; background:rgba(255,255,255,.12); }
.nu-method{ font-size:12px; color:var(--mint-2, #9AF1DD); text-align:center; margin-top:-2px; }
.nu-steps{ margin:6px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:13.5px; line-height:1.5; color:var(--text, #fff); }
.nu-steps li::marker{ color:var(--coral, #FF7A45); font-weight:700; }
.nu-tip{ display:flex; gap:8px; align-items:flex-start; margin-top:12px; padding:10px 12px; border-radius:14px; background:rgba(94,230,199,.12); color:var(--mint-2,#9AF1DD); font-size:12.5px; line-height:1.45; }
.nu-tip .material-symbols-rounded, .nu-tip svg{ font-size:18px; width:18px; height:18px; flex:none; }
.nu-plan{ margin:14px 0 6px; padding:16px; border-radius:22px; background:linear-gradient(160deg, rgba(94,230,199,.16), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.nu-plan-head{ display:flex; gap:12px; align-items:center; }
.nu-bmi{ width:64px; height:64px; border-radius:50%; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; border:3px solid var(--c); box-shadow:0 0 18px color-mix(in srgb, var(--c) 40%, transparent); }
.nu-bmi b{ font:700 19px/1 var(--font-head, "Inter Tight", sans-serif); }
.nu-bmi small{ font-size:12px; opacity:.75; }
.nu-plan-txt b{ display:block; font-size:15px; margin-bottom:3px; }
.nu-plan-txt small{ display:block; font-size:12px; line-height:1.45; color:var(--text-muted); }
.nu-plan-switch{ display:flex; align-items:center; gap:8px; width:100%; margin-top:12px; padding:10px 12px; border-radius:14px; border:1px dashed var(--coral,#FF7A45); background:rgba(255,122,69,.12); color:#fff; font:500 12.5px/1.35 inherit; text-align:left; cursor:pointer; }
.nu-plan-goal{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; margin-top:12px; font-size:12.5px; color:var(--text-muted); }
.nu-plan-goal b{ color:#fff; }
.nu-plan-days{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; }
.nu-plan-days button{ flex:1; min-width:40px; padding:8px 0; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff; font-family:inherit; font-weight:600; font-size:12px; line-height:1; }
.nu-plan-days button.on{ background:var(--mint,#5EE6C7); color:var(--navy,#061A24); border-color:transparent; }
.nu-plan-meals{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.nu-plan-meal{ display:flex; align-items:center; gap:12px; padding:8px 12px 8px 8px; border-radius:16px; background:rgba(6,26,36,.45); cursor:pointer; }
.nu-plan-meal .ph{ width:56px; height:56px; flex:none; border-radius:14px; background:radial-gradient(circle at 50% 60%, rgba(255,255,255,.18), rgba(255,255,255,.04)); display:flex; align-items:center; justify-content:center; font-size:28px; }
.nu-plan-meal .ph .fp{ width:52px; height:52px; }
.nu-plan-meal .t{ flex:1; min-width:0; }
.nu-plan-meal .t small{ display:block; font-size:12px; color:var(--mint-2,#9AF1DD); }
.nu-plan-meal .t b{ display:block; font-size:13.5px; line-height:1.3; }
.nu-plan-meal .k{ text-align:right; }
.nu-plan-meal .k b{ display:block; font:700 16px/1 var(--font-head, "Inter Tight", sans-serif); }
.nu-plan-meal .k small{ font-size:12px; color:var(--text-muted); }
.nu-plan-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; font-size:12.5px; color:var(--text-muted); }
.nu-plan-foot b{ color:#fff; }
.food-result.fr-pic{ display:flex; align-items:center; gap:12px; cursor:pointer; }
.fr-img{ width:46px; height:46px; flex:none; border-radius:12px; background:rgba(255,255,255,.92); padding:3px; object-fit:contain; }
.fr-img.emo{ display:flex; align-items:center; justify-content:center; font-size:24px; }
.fr-t{ flex:1; min-width:0; }
.nu-bowl .fp.emo{ font-size:46px; } .nu-bowl.big .fp.emo{ font-size:64px; } .nu-thumb .fp.emo{ font-size:22px; } .nu-item .e .fp.emo{ font-size:22px; }

/* Khả năng truy cập: không tự phóng to ô nhập trên iOS, viền focus, giảm chuyển động */
input, select, textarea{ font-size:16px; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, input:focus-visible{ outline:2px solid var(--mint,#5EE6C7); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

/* Buổi tập: bảng hiệp */
.set-last{ margin:2px 0 8px; }
.set-up{ display:flex; gap:8px; align-items:center; padding:9px 12px; border-radius:14px; background:rgba(94,230,199,.14); color:var(--mint-2,#9AF1DD); font-size:12.5px; margin-bottom:10px; }
.set-up .material-symbols-rounded, .set-up svg{ width:18px; height:18px; flex:none; }
.set-table{ display:flex; flex-direction:column; gap:6px; }
.set-head, .set-row{ display:flex; align-items:center; gap:8px; }
.set-head{ font-size:12px; color:var(--text-muted); padding:0 4px; }
.set-head span{ flex:1; text-align:center; } .set-head span:first-child{ flex:0 0 34px; } .set-head span:last-child{ flex:0 0 48px; }
.set-row{ padding:6px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); transition:background .2s; }
.set-row b{ flex:0 0 34px; text-align:center; font-size:15px; }
.set-row input{ flex:1; min-width:0; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:rgba(6,26,36,.5); color:#fff; text-align:center; font-family:inherit; font-weight:600; font-size:16px; line-height:1; }
.set-check{ flex:0 0 48px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.2); background:transparent; color:#fff; display:flex; align-items:center; justify-content:center; }
.set-row.done{ background:rgba(94,230,199,.16); border-color:rgba(94,230,199,.4); }
.set-row.done .set-check{ background:var(--mint,#5EE6C7); color:var(--navy,#061A24); border-color:transparent; }
.set-rest{ display:flex; align-items:center; gap:10px; margin-top:10px; padding:10px 14px; border-radius:16px; background:rgba(255,122,69,.16); border:1px solid rgba(255,122,69,.4); }
.set-rest[hidden]{ display:none; }
.set-rest b{ font:700 28px/1 var(--font-head,"Inter Tight",sans-serif); color:var(--coral,#FF7A45); min-width:44px; }
.set-rest small{ flex:1; color:var(--text-muted); }
.set-rest button{ height:36px; padding:0 12px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; font-family:inherit; font-weight:600; font-size:12px; line-height:1; }
.set-guide{ margin-top:10px; font-size:13px; color:var(--text-muted); }
.set-guide summary{ cursor:pointer; color:#fff; font-weight:600; padding:6px 0; }
.nu-plan-opts{ display:flex; gap:6px; margin:-2px 0 8px; }
.nu-plan-opts button{ padding:7px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; font-family:inherit; font-weight:600; font-size:12px; line-height:1; min-height:34px; }
.nu-plan-opts button.on{ background:var(--mint,#5EE6C7); color:var(--navy,#061A24); border-color:transparent; }
.btn-social.apple{ background:#000; color:#fff; border-color:#000; }

/* Đợt 1: tiến trình tự động, khởi động, đĩa tạ, kỷ lục */
.set-up.down{ background:rgba(255,122,69,.14); color:#FFB08A; }
.set-tools{ display:flex; gap:6px; margin:0 0 8px; }
.set-tools button{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; height:40px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; font-family:inherit; font-weight:600; font-size:12.5px; line-height:1; }
.set-tools svg, .set-tools .material-symbols-rounded{ width:16px; height:16px; }
.set-toolbox{ margin:0 0 10px; padding:12px; border-radius:14px; background:rgba(6,26,36,.55); border:1px solid rgba(255,255,255,.12); }
.set-toolbox[hidden]{ display:none; }
.tb-title{ font-weight:600; font-size:13.5px; margin-bottom:6px; }
.tb-row{ display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid rgba(255,255,255,.08); font-size:13px; cursor:default; }
.tb-row span{ flex:1; min-width:0; color:var(--text-muted); } .tb-row b{ font-weight:600; } .tb-row small{ color:var(--text-muted); min-width:52px; text-align:right; }
.pr-card .tb-row{ cursor:pointer; }
.plate-viz{ display:flex; align-items:center; gap:3px; height:80px; margin:6px 0; }
.plate-viz .bar{ width:60px; height:8px; border-radius:4px; background:#9AA4AE; }
.plate-viz .pl{ width:12px; height:var(--h); border-radius:3px; background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); }
.set-row select.rpe{ flex:0 0 58px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:rgba(6,26,36,.5); color:#fff; font-family:inherit; font-weight:600; font-size:14px; line-height:1; text-align:center; }
.set-head .rpe-h{ flex:0 0 58px; }
.spark{ width:100%; height:auto; } .spark .line{ fill:none; stroke:var(--mint,#5EE6C7); stroke-width:2.5; } .spark .area{ fill:rgba(94,230,199,.12); } .spark circle{ fill:var(--coral,#FF7A45); }
.pr-list{ margin-top:12px; display:flex; flex-direction:column; gap:6px; font-size:13.5px; }

/* Vòng 2: vùng chạm ≥44px, căn bảng hiệp, chữ tối thiểu */
.nu-plan-days button, .nu-plan-opts button, .set-rest button, .set-tools button, .tpl-add, .tpl-view{ min-height:44px; }
.set-head{ padding:0 7px; font-size:12px; }
.set-row{ gap:6px; } .set-row input{ padding:0 2px; } .set-row select.rpe{ flex-basis:54px; font-size:16px; }
.nu-bmi small, .nu-plan-meal .k small, .nu-recipe-top .cz{ font-size:12px; } .nu-method, .nu-plan-meal .t small{ font-size:12px; }
.btn-social.apple{ border-color:rgba(255,255,255,.35); }
:root{ --text-dim: rgba(255,255,255,.58); }

/* =====================================================================
   THƯƠNG HIỆU TapEasy — logo ảnh (assets/brand/…, do brand.css/agent thương hiệu cung cấp)
   Ảnh lỗi/chưa có → onerror thay bằng chữ "Tap<b>Easy</b>" (.brand-text)
   ===================================================================== */
.tp-logo{ display:flex; align-items:center; justify-content:center; gap:6px; line-height:1; min-height:28px; }   /* khung chứa logo (KHÔNG dùng .brand-logo — lớp đó của brand.css) */
.brand-wm{ display:block; height:28px; width:auto; max-width:160px; }
html .tp-logo img.brand-wm.on-light{ display:none; }
html.fk-light .tp-logo.brand-swap img.brand-wm.on-dark{ display:none; }
html.fk-light .tp-logo.brand-swap img.brand-wm.on-light{ display:block; }
.brand-text{ font-family:var(--brand-font-display, var(--font-head, 'Inter Tight', Inter, sans-serif)); font-weight:700; font-size:20px; letter-spacing:-.01em; color:var(--brand-logo-tap, #fff); text-transform:none; }
.brand-text b{ color:var(--brand-teal, var(--mint, #5EE6C7)); font-weight:700; }
html.fk-light .brand-swap .brand-text{ color:var(--ink, #242D33); }
.brand-onboard{ display:flex; justify-content:center; }
.brand-onboard .brand-wm{ height:40px; max-width:220px; }
.brand-onboard .brand-text{ font-size:28px; }
.wl-brand-img{ display:block; height:clamp(28px,7vw,36px); width:auto; }
.wl-brand-text{ font-size:clamp(24px,6vw,32px); }
.wl-tag-mark{ height:.75em; width:auto; vertical-align:-.04em; margin-right:.22em; }
.auth-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.auth-logo{ height:28px; width:auto; max-width:140px; }
.splash-logo{ width:min(220px, 60vw); height:auto; }
/* Splash: lockup bản nền tối (chữ "Tap" ngà) — theme Sáng đổi sang bản nền sáng (docs/BRAND.md §7.5) */
.splash-brand{ display:flex; justify-content:center; }
.splash-brand img.on-light{ display:none; }
html.fk-light .splash-brand img.on-dark{ display:none; }
html.fk-light .splash-brand img.on-light{ display:block; }
.logo-big b{ color:var(--brand-teal, var(--mint, #5EE6C7)); }
.sheet-header .tp-logo{ justify-content:flex-start; margin:0; }

/* =====================================================================
   TRANG CHỦ — hàng cuộn ngang "Khám phá" (pt.js · teHomeExplore) + thẻ đã gộp
   Ô ≥ 44 px chạm, chữ ≥ 12 px; màu theo token theme (--glass, --border, --text*).
   ===================================================================== */
#home-content > .te-merged{ display:none !important; }   /* thẻ module đã có ô Khám phá thay thế */
.te-explore{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.te-explore-head{ display:flex; align-items:baseline; justify-content:space-between; padding:0 2px; }
.te-explore-head h3{ font-size:17px; font-weight:600; }
.te-explore-head small{ font-size:12px; color:var(--text-dim); }
.te-explore-row{ display:flex; gap:10px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  margin:0 -16px; padding:2px 16px 6px; scroll-padding:0 16px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.te-explore-row::-webkit-scrollbar{ display:none; }
.te-xp{ --c:var(--mint); position:relative; flex:0 0 auto; width:124px; min-height:118px; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:12px 12px 10px; border-radius:20px; text-align:left;
  color:var(--text); font-family:inherit; cursor:pointer; background:var(--glass); border:1px solid var(--border);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); transition:transform .15s ease, border-color .15s ease; }
.te-xp:active{ transform:scale(.97); border-color:var(--c); }
.te-xp:focus-visible{ outline:2px solid var(--c); outline-offset:2px; }
.te-xp-ic{ width:40px; height:40px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:4px;
  color:var(--c); background:color-mix(in srgb, var(--c) 18%, transparent); }
.te-xp-ic .material-symbols-rounded{ font-size:21px; color:inherit; }
.te-xp b{ font-size:13.5px; font-weight:600; line-height:1.2; }
.te-xp small{ font-size:12px; line-height:1.25; color:var(--text-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.te-xp-badge{ position:absolute; top:10px; right:10px; min-width:20px; height:20px; padding:0 6px; border-radius:10px; font-style:normal;
  font-size:12px; font-weight:700; line-height:20px; text-align:center; background:var(--coral); color:var(--on-coral, #fff); }
html.lowfx .te-xp{ background:var(--glass-solid) !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
html.fk-light .te-xp-ic{ background:color-mix(in srgb, var(--c) 14%, #fff); filter:saturate(1.1) brightness(.8); }
.home-pt{ display:flex; flex-direction:column; }
@media (prefers-reduced-motion: reduce){ .te-xp{ transition:none; } .te-xp:active{ transform:none; } }

/* =========================================================================
   Vòng tích hợp 3 — Menu ☰ nhóm theo khu vực (app.js teMenuOrganize)
   ========================================================================= */
.te-menu-list .te-mgroup{ display:flex; flex-direction:column; gap:4px; }
.te-menu-list .te-mgroup + .te-mgroup{ margin-top:10px; }
.te-mgroup-h{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted);
  padding:8px 6px 2px; line-height:1.3; }
.te-mgroup[data-g="admin"] .te-mgroup-h{ color:var(--coral, #FF7A45); }

/* =========================================================================
   Vòng sửa QA UX (11/11/2026 — docs/qa/FIX-ux.md). Lớp cuối style.css, chỉ sửa kích thước/chuyển động.
   ========================================================================= */
/* QU-32: vùng chạm ≥ 44 px, giữ nguyên hình nhìn thấy (padding + background-clip) */
.topbar .icon-btn{ box-sizing:border-box; width:44px; height:44px; min-width:44px; padding:3px; margin:-3px;
  background-clip:content-box !important; }
.icon-btn.fk-tap-sm, .card-title .icon-btn{ box-sizing:border-box; width:44px !important; height:44px !important; min-width:44px;
  padding:7px; margin:-7px -7px -7px auto; background-clip:content-box !important; }
.day-tabs{ gap:4px; }
.day-tab{ min-width:44px; min-height:44px; padding:10px 4px; }
.nu-mini{ box-sizing:content-box; width:34px; height:34px; padding:5px; margin-top:-5px; margin-bottom:-5px; background-clip:content-box; }
.nav-item{ min-height:44px; }
#onboard-back{ min-width:44px; min-height:44px; }

/* QU-31: sàn chữ 12 px cho nhãn ngày + chip chuỗi (style.css cũ 9,5 px) */
.wd small, .streak-chip small{ font-size:12px; letter-spacing:0; }

/* QU-04: màn chào — bớt hoạt ảnh vô hạn (chạy vài lượt rồi dừng), vệt tốc độ chạy bằng transform (không layout mỗi khung) */
@keyframes wlStreak{ from{ transform:translateX(0) skewX(-20deg); } to{ transform:translateX(421%) skewX(-20deg); } }
.wl-speed i{ will-change:transform; animation-iteration-count:4; }
.wl-hero-bg{ animation-iteration-count:2; }
.wl-ready .wl-arrow{ animation-iteration-count:4; }
.wl-scroll-cue span{ animation-iteration-count:6; }
.wl-map.in .wl-bubble{ animation-iteration-count:1, 4; }
.wl-map.wl-rev.done .wl-bubble{ animation-iteration-count:4; }
html.lowfx :is(.wl-hero-bg, .wl-speed i, .wl-scroll-cue span){ animation:none !important; }
html.lowfx .wl-speed{ display:none; }

/* QU-36: bản rộng (≥ 1024 px) — xem thêm ui-kit.css */

/* QU-12: đổi theme — tính lại style toàn trang (≈ 7 000 luật). Thẻ Hồ sơ ngoài khung nhìn bỏ qua style/layout/paint
   (content-visibility) nên lần đổi theme chỉ tính phần đang thấy; thẻ hiện lại khi cuộn tới. */
#screen-profile .content > .card{ content-visibility:auto; contain-intrinsic-size:auto 240px; }
#screen-profile .content > .card.fk-theme-card{ contain-intrinsic-size:auto 520px; }

/* =========================================================================
   FIT MÀN HÌNH ĐIỆN THOẠI (13/11/2026) — vùng an toàn tai thỏ / dynamic island / thanh home.
   Một nguồn: --sat/--sab/--sal/--sar = env(safe-area-inset-*) (+ fallback 0px); meta viewport có viewport-fit=cover.
   Mọi lớp cố định (topbar trong #app-shell, sheet + header + nút đóng, bottom nav, toast, onboarding, sàng lọc,
   màn chào, đăng nhập) chừa đúng vùng này; chữ cách mép ngang ≥ 16 px. Kiểm: tests/suites/73-safe-area.test.js,
   scripts/intro-video (director.js giả lập iPhone 59 px trên / 34 px dưới + QA SAFE).
   ========================================================================= */
:root{
  --fk-safe: 1;                                   /* dấu hiệu "app đã fit vùng an toàn" (director.js đọc) */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --fk-gutter: 16px;                              /* lề chữ tối thiểu tới mép màn */
}
#app-shell{ padding-top:var(--sat); padding-left:var(--sal); padding-right:var(--sar); box-sizing:border-box; }
.topbar{ padding-left:max(var(--fk-gutter), 16px); padding-right:max(var(--fk-gutter), 16px); }
/* nội dung cuộn: khi ẩn dock, chừa thanh home; khi có dock, dock nằm trong luồng nên nội dung không bị che */
#app-scroll{ scroll-padding-top:var(--topbar-h); scroll-padding-bottom:16px; }
#app-shell:has(> .bottom-nav.hidden) #app-scroll{ padding-bottom:var(--sab); }
.bottom-nav{ margin-left:max(12px, calc(var(--sal) + 8px)); margin-right:max(12px, calc(var(--sar) + 8px)); margin-bottom:max(10px, var(--sab)); }

/* sheet đáy: không bao giờ chui dưới dynamic island, header luôn thấy khi cuộn, đáy chừa thanh home */
.sheet-backdrop{ padding-left:var(--sal); padding-right:var(--sar); box-sizing:border-box; }
.sheet{
  box-sizing:border-box;
  max-height:min(88%, calc(100% - var(--sat) - 12px));
  max-height:min(88%, calc(100% - var(--sat) - 12px), calc(100dvh - var(--sat) - 12px));
  padding:20px max(20px, var(--fk-gutter)) calc(20px + var(--sab));
  overscroll-behavior:contain;
  scroll-padding-top:64px;
}
.sheet > .sheet-header{
  position:sticky; top:0; z-index:5;
  margin:-10px calc(-1 * max(20px, var(--fk-gutter))) 6px;
  padding:10px max(20px, var(--fk-gutter));
  background:inherit; background-attachment:scroll;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  min-height:44px;
}
.sheet > .sheet-header h3{ min-width:0; overflow-wrap:anywhere; padding-right:8px; }
.sheet .sheet-header .icon-btn{ flex-shrink:0; min-width:44px; min-height:44px; }

/* toast: trên dock + thanh home */
#toast{ bottom:calc(var(--nav-h) + 16px + var(--sab)); max-width:calc(100% - 2 * var(--fk-gutter) - var(--sal) - var(--sar)); }

/* onboarding + đăng nhập (không phải màn chào) — lớp phủ toàn màn tự chừa vùng an toàn */
#onboarding{ padding:var(--sat) var(--sar) var(--sab) var(--sal); box-sizing:border-box; }
#onboarding .onboard-progress{ padding:16px 20px 0; }
#onboarding .onboard-footer{ padding:16px 20px max(16px, calc(24px - var(--sab))); }
#auth:not(.wl-mode){ padding:var(--sat) var(--sar) var(--sab) var(--sal); box-sizing:border-box; }
#auth.wl-mode{ padding-left:var(--sal); padding-right:var(--sar); box-sizing:border-box; }
.splash{ min-height:calc(100dvh - var(--sat) - var(--sab)); }

/* =========================================================================
   ONBOARDING HOÀN CHỈNH · THỐNG KÊ CÓ ĐỒNG Ý · GÓP Ý / NPS / CÓ GÌ MỚI (13/11/2026)
   app.js (showPlanReady, bộ đếm bước, lỗi từng ô) · analytics.js (#fk-consent) · feedback.js (.fk-fb-*, .fk-nps, .fk-wn) · admin.js (.adm-nps-*)
   Chỉ dùng token sẵn có (--accent/--mint/--glass/--text-muted…) → theo mọi gói giao diện; lớp cố định chừa vùng an toàn (--sat/--sab).
   ========================================================================= */
.onboard-count{ margin:8px 20px 0; font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--text-muted); }
.ob-opt{ font-weight:400; color:var(--text-muted); }
.ob-err{ min-height:0; margin:0; font-size:13px; font-weight:600; color:var(--warn, #FFB08A); }
.ob-err:empty{ display:none; }
#onboarding input[aria-invalid="true"]{ border-color:var(--warn, #FFB08A); box-shadow:0 0 0 2px rgba(255,176,138,.35); }
.ob-sub-h{ margin:6px 0 0; font-weight:700; color:var(--text); font-size:14px; }
.ob-days{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; }
.ob-days .choice-card.ob-day{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:56px; padding:8px 4px; text-align:center; }
.ob-days .choice-card.ob-day span{ font-size:20px; font-weight:700; line-height:1; }
.ob-days .choice-card.ob-day small{ margin-top:2px; }

/* Màn "Kế hoạch đã sẵn sàng" — lớp phủ toàn màn như onboarding (cùng nền ảnh / kính) */
.ob-ready{ position:absolute; inset:0; z-index:105; display:none; flex-direction:column; background:#061A24 url("assets/bg-storm.jpg") center 20% / cover no-repeat;
  padding:var(--sat) var(--sar) var(--sab) var(--sal); box-sizing:border-box; }
.ob-ready.open{ display:flex; }
.ob-ready-wrap{ max-width:460px; width:100%; height:100%; margin:0 auto; display:flex; flex-direction:column; min-height:0; }
.ob-ready-body{ flex:1; min-height:0; overflow-y:auto; padding:20px max(20px, var(--fk-gutter)) 8px; display:flex; flex-direction:column; gap:12px; overscroll-behavior:contain; }
.ob-ready-top{ text-align:center; padding-top:8px; }
.ob-ready-badge{ display:inline-flex; width:56px; height:56px; border-radius:50%; align-items:center; justify-content:center;
  background:var(--accent, var(--mint)); color:var(--on-accent, #061A24); box-shadow:0 0 0 8px rgba(var(--accent-rgb, 94,230,199), .18); }
.ob-ready-badge .material-symbols-rounded{ font-size:30px; color:inherit; }
.ob-ready-eyebrow{ margin:10px 0 2px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-2, var(--mint-2, #9AF1DD)); }
.ob-ready-top .onboard-hero{ outline:none; }
.ob-ready-card{ margin:0; }
.ob-ready-card .stat-box.ob-hl{ background:rgba(var(--accent-rgb, 94,230,199), .16); border-color:rgba(var(--accent-rgb, 94,230,199), .45); }
.ob-macros{ display:grid; grid-template-columns:repeat(auto-fit, minmax(64px, 1fr)); gap:8px; margin-top:10px; }
.ob-mac{ display:flex; flex-direction:column; align-items:flex-start; padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.06); border-left:3px solid var(--accent, var(--mint)); }
.ob-mac b{ font-size:15px; } .ob-mac small{ color:var(--text-muted); font-size:11px; }
.ob-mac.c{ border-left-color:var(--coral, #FF7A45); } .ob-mac.f{ border-left-color:#FFC46B; } .ob-mac.w{ border-left-color:#4CC9F0; }
.ob-week{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:4px; }
.ob-wd{ display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; color:var(--text-muted); font-size:13px; }
.ob-wd.on{ background:rgba(255,255,255,.07); color:var(--text); }
.ob-wd.first{ outline:2px solid var(--accent, var(--mint)); outline-offset:-2px; }
.ob-wd-k{ font-weight:700; } .ob-wd-t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ob-wd-m{ font-size:12px; color:var(--text-muted); white-space:nowrap; }
.ob-wd-m em{ font-style:normal; margin-left:6px; padding:2px 6px; border-radius:8px; background:var(--accent, var(--mint)); color:var(--on-accent, #061A24); font-weight:700; font-size:11px; }
.ob-answers{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.ob-ans{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; min-height:44px; border-radius:14px; text-align:left; cursor:pointer;
  background:var(--glass, rgba(255,255,255,.08)); border:1px solid rgba(255,255,255,.16); color:var(--text); font:inherit; position:relative; }
.ob-ans small{ color:var(--text-muted); font-size:11px; } .ob-ans b{ font-size:13px; font-weight:600; padding-right:30px; }
.ob-ans-e{ position:absolute; right:10px; top:10px; font-size:11px; font-weight:700; color:var(--accent-2, var(--mint-2, #9AF1DD)); }
.ob-ans:focus-visible{ outline:2px solid var(--accent, var(--mint)); outline-offset:2px; }
.ob-ready-med{ text-align:center; padding:0 6px; }
.ob-ready-foot{ padding:12px max(20px, var(--fk-gutter)) max(16px, calc(20px - var(--sab))); display:flex; flex-direction:column; gap:6px; }
.ob-ready-go{ min-height:56px; font-size:16px; font-weight:700; }
.ob-ready-sub{ text-align:center; color:var(--text-muted); font-size:12px; }

/* Thẻ hỏi đồng ý thống kê (không chặn thao tác) — trên dock, dưới sheet */
.fk-consent{ position:absolute; z-index:38; left:calc(var(--sal) + 12px); right:calc(var(--sar) + 12px); bottom:calc(var(--nav-h, 76px) + 12px + var(--sab));
  max-width:460px; margin:0 auto; padding:16px; border-radius:20px; box-sizing:border-box; color:var(--text);
  background:rgba(6,26,36,.92); border:1px solid rgba(255,255,255,.18); box-shadow:0 18px 40px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); display:none; }
.fk-consent.open{ display:block; }
.fk-consent-h{ font-size:17px; margin:0 0 6px; }
.fk-consent-p{ font-size:13px; line-height:1.5; color:var(--text-muted); margin:0 0 8px; }
.fk-consent-dim{ font-size:12px; }
.fk-consent-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; margin:4px 0 8px; border-radius:14px; background:rgba(255,255,255,.06); cursor:pointer; min-height:44px; }
.fk-consent-row span{ display:flex; flex-direction:column; font-size:14px; } .fk-consent-row small{ color:var(--text-muted); font-size:12px; }
.fk-consent-row input{ width:22px; height:22px; accent-color:var(--accent, var(--mint)); flex-shrink:0; }
.fk-consent-acts{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.fk-consent-acts .btn{ min-height:44px; }

/* Góp ý */
.fk-fb-cats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.fk-fb-cat{ min-height:44px; display:inline-flex; align-items:center; gap:6px; }
.fk-fb-cat .material-symbols-rounded{ font-size:16px; }
.fk-fb-cat.on{ background:var(--accent, var(--mint)); color:var(--on-accent, #061A24); border-color:transparent; }
.fk-fb-hint{ display:block; margin-top:4px; color:var(--text-muted); font-size:12px; }
.fk-fb-shot{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px; }
.fk-fb-check{ display:flex; align-items:center; gap:10px; margin-top:12px; min-height:44px; font-size:14px; cursor:pointer; }
.fk-fb-check input{ width:22px; height:22px; accent-color:var(--accent, var(--mint)); flex-shrink:0; }
.fk-fb-dim{ margin-top:8px; font-size:12px; }
.fk-fb-card .link-row{ width:100%; background:none; border:0; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.fk-fb-fab{ position:absolute; z-index:36; right:calc(var(--sar) + 14px); bottom:calc(var(--nav-h, 76px) + 16px + var(--sab)); display:none; align-items:center; gap:4px;
  padding:4px; border-radius:999px; background:rgba(6,26,36,.9); border:1px solid rgba(255,255,255,.2); box-shadow:0 12px 30px rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.fk-fb-fab.open{ display:flex; animation:fkFabIn .35s cubic-bezier(.22,1,.36,1) both; }
.fk-fb-fab button{ border:0; background:none; color:var(--text); font:inherit; cursor:pointer; min-height:44px; display:inline-flex; align-items:center; gap:6px; }
.fk-fb-fab-go{ padding:0 14px; border-radius:999px; background:var(--accent, var(--mint)) !important; color:var(--on-accent, #061A24) !important; font-weight:700; font-size:13px; }
.fk-fb-fab-x{ width:44px; justify-content:center; border-radius:50%; }
@keyframes fkFabIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .fk-fb-fab.open{ animation:none; } }

/* NPS 0–10 */
.fk-nps{ display:grid; grid-template-columns:repeat(11, minmax(0,1fr)); gap:4px; margin-top:12px; }
.fk-nps-b{ min-height:44px; padding:0; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--text); font:inherit; font-weight:700; cursor:pointer; }
.fk-nps-b.on{ background:var(--accent, var(--mint)); color:var(--on-accent, #061A24); border-color:transparent; }
.fk-nps-b:focus-visible{ outline:2px solid var(--accent, var(--mint)); outline-offset:2px; }
.fk-nps-ends{ display:flex; justify-content:space-between; margin-top:4px; font-size:11px; color:var(--text-muted); }
@media (max-width:360px){ .fk-nps{ grid-template-columns:repeat(6, minmax(0,1fr)); } }

/* Có gì mới */
.fk-wn{ margin-top:10px; }
.fk-wn-h{ font-size:15px; margin:0 0 6px; display:flex; flex-direction:column; } .fk-wn-h small{ font-weight:400; color:var(--text-muted); font-size:12px; }
.fk-wn-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.fk-wn-i{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start; font-size:13px; line-height:1.5; }
.fk-wn-tag{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:8px; background:var(--accent, var(--mint)); color:var(--on-accent, #061A24); white-space:nowrap; }
.fk-wn-i.fix .fk-wn-tag{ background:rgba(255,255,255,.14); color:var(--text); }
.fk-wn-fb{ font-style:normal; font-size:11px; font-weight:700; color:var(--accent-2, var(--mint-2, #9AF1DD)); }
.fk-wn-thanks{ display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:12px; background:rgba(var(--accent-rgb, 94,230,199), .12); }
.fk-an-log{ display:flex; flex-direction:column; gap:6px; max-height:50vh; overflow-y:auto; }
.fk-an-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.05); font-size:12px; }
.fk-an-row code{ grid-column:1 / -1; font-size:11px; color:var(--text-muted); overflow-wrap:anywhere; }

/* Bảng quản trị — Góp ý & NPS (admin.js §6.9b); đặt ở style.css (không phải admin.css) để không phải sinh lại themes-modules.css */
.adm-nps-bars{ display:grid; grid-template-columns:repeat(11, minmax(0,1fr)); gap:6px; align-items:end; height:140px; padding-top:8px; }
.adm-nps-col{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:2px; font-size:11px; }
.adm-nps-col i{ display:block; width:100%; min-height:2px; border-radius:6px 6px 2px 2px; background:var(--a-line); }
.adm-nps-col.pro i{ background:rgba(var(--a-mint-rgb), .85); } .adm-nps-col.pas i{ background:rgba(255,196,107,.8); } .adm-nps-col.det i{ background:rgba(255,122,69,.8); }
.adm-nps-col small{ opacity:.7; }
.adm-fb-shot{ display:block; margin:8px 0; max-width:220px; } .adm-fb-shot img{ width:100%; border-radius:10px; border:1px solid var(--a-line); }
/* theo gói giao diện (kể cả theme sáng): lớp phủ kế hoạch dùng nền vỏ app; thẻ hỏi / nút nổi dùng màu sheet của theme */
html.fk-themed .ob-ready{ background:var(--fk-shell-bg); background-blend-mode:var(--fk-shell-blend); }
html.fk-themed :is(.fk-consent, .fk-fb-fab){ background:linear-gradient(180deg, rgba(var(--fk-sheet-1-rgb),.94), rgba(var(--fk-sheet-2-rgb),.97)); border-color:rgba(var(--fk-ov-rgb), .18); }
html.fk-themed :is(.fk-consent-row, .ob-mac, .fk-an-row){ background:rgba(var(--fk-ov-rgb), .07); }