/* ═══════════════════════════════════════════════════════════════
   Guide videos — mockup điện thoại (theme tối của app)
   DÙNG CHUNG cho mọi video — sửa ở đây là mọi video đổi theo. Video KHÔNG tự viết
   style riêng (không <style>, không @push('styles'), hạn chế style="" inline):
   thiếu class thì thêm vào đây, đặt trong khối của màn / component app tương ứng.

   Phần gốc (.ph / .m-*) copy từ resources/views/guides/hieu-hoc.blade.php để khớp
   trang /guides/study — giữ nguyên, muốn khác thì ghi đè ở phần "Bổ sung cho video".

   Quy đổi RN → mockup (màn 274px ≈ iPhone 390pt, tỉ lệ 0.70):
     calc(<pt> * var(--pt))        kích thước, padding, radius, icon size (số lấy thẳng từ StyleSheet)
     calc(<size> * var(--fs))      cỡ chữ fs(size) / FontSize.* (fs nhân thêm 390/375 → 0.73)
     FontSize: xs 10 · sm 12 · md 14 · lg 17 · xl 24 (theme/typography.ts)
═══════════════════════════════════════════════════════════════ */
*{ box-sizing:border-box; margin:0; padding:0; }
.ph{
  --a:#F5A623; --ad:rgba(245,166,35,.13); --on:#110803;
  --bg:#140b04; --card:#2A231C; --cb:#3D352D; --bd:#5a4617;
  --t2:#8B949E; --t3:#6E7681;
  --gr:#3FB950; --rd:#F85149; --pu:#A78BFA; --bl:#3B82F6; --hold:#D4891A;
  width:292px; max-width:100%; flex:0 0 auto;
  border-radius:40px; padding:9px;
  background:linear-gradient(150deg,#3a322a,#0c0805 60%);
  box-shadow:0 34px 60px -26px rgba(42,32,20,.55), inset 0 0 0 1px rgba(255,255,255,.07);
}
.ph-scr{
  position:relative; height:600px; overflow:hidden; border-radius:32px;
  display:flex; flex-direction:column;
  background:var(--bg); color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:11px; line-height:1.4;
}
.ph-scr.short{ height:auto; min-height:380px; }
.ph-sb{
  flex:0 0 auto; height:28px; position:relative;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 22px; font-size:10px; font-weight:600;
}
.ph-sb::after{
  content:''; position:absolute; left:50%; top:6px; transform:translateX(-50%);
  width:74px; height:18px; border-radius:12px; background:#000;
}
.ph-hd{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; min-height:44px;
  padding:4px 10px; background:var(--card); border-bottom:1px solid var(--cb);
}
.ph-hd .bk{
  width:28px; height:28px; flex:0 0 auto; border-radius:8px;
  background:rgba(255,255,255,.06); display:grid; place-items:center; font-size:15px; color:#fff;
}
.ph-hd .tt{ flex:1; text-align:center; font-weight:700; font-size:13px; line-height:1.25; }
.ph-hd .tt small{ display:block; font-weight:400; font-size:9px; color:var(--t2); }
.ph-hd .rt{ width:28px; flex:0 0 auto; text-align:center; font-size:14px; }
.ph-bd{ flex:1; min-height:0; overflow:hidden; padding:10px; position:relative; }
.ph-bd.fade::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:44px; pointer-events:none;
  background:linear-gradient(transparent, var(--bg));
}
.ph-bot{ flex:0 0 auto; padding:9px 10px 16px; background:var(--card); border-top:1px solid var(--cb); }
.ph-tabs{
  flex:0 0 auto; display:flex; justify-content:space-around;
  padding:7px 4px 14px; border-top:1px solid var(--cb); background:#1b130b;
  font-size:8.5px; color:var(--t3); text-align:center;
}
.ph-tabs span{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.ph-tabs span i{ font-style:normal; font-size:15px; filter:grayscale(1); opacity:.7; }
.ph-tabs .on{ color:var(--a); }
.ph-tabs .on i{ filter:none; opacity:1; }

/* Phần tử bên trong mockup */
.m-card{ background:var(--card); border:1px solid var(--cb); border-radius:14px; padding:10px; margin-bottom:8px; }
.m-card.am{ border-color:var(--bd); background:linear-gradient(160deg,#3a2a12,#2A231C 70%); }
.m-card.pu{ border-color:rgba(167,139,250,.35); background:linear-gradient(160deg,rgba(167,139,250,.18),#2A231C 75%); }
.m-card.rd{ border-color:rgba(248,81,73,.5); background:rgba(248,81,73,.08); }
.m-card.hold{ border-color:rgba(212,137,26,.5); background:rgba(212,137,26,.1); }
.m-lbl{ font-size:8.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--t2); margin:10px 0 5px; }
.m-lbl:first-child{ margin-top:0; }
.m-h{ font-size:12px; font-weight:700; margin:10px 0 6px; display:flex; justify-content:space-between; align-items:center; }
.m-h a,.m-link{ color:var(--a); font-weight:600; font-size:10px; text-decoration:none; }
.m-mut{ color:var(--t2); }
.m-mut3{ color:var(--t3); }
.m-am{ color:var(--a); }
.m-gr{ color:var(--gr); }
.m-rd{ color:var(--rd); }
.m-pu{ color:var(--pu); }
.m-bl{ color:var(--bl); }
.m-big{ font-size:24px; font-weight:800; letter-spacing:-.5px; line-height:1.1; }
.m-mid{ font-size:15px; font-weight:800; }
.m-sm{ font-size:9.5px; }
.m-xs{ font-size:8.5px; }
.m-b{ font-weight:700; }
.m-row{ display:flex; align-items:center; gap:8px; }
.m-row.sb{ justify-content:space-between; }
.m-row.top{ align-items:flex-start; }
.m-col{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.m-f1{ flex:1; min-width:0; }
.m-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.m-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.m-grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.m-gap{ height:8px; }
.m-in{
  background:#1d150d; border:1px solid var(--cb); border-radius:9px;
  padding:7px 9px; color:var(--t3); font-size:10.5px; margin-bottom:2px;
}
.m-in.v{ color:#fff; }
.m-in.ta{ min-height:44px; }
.m-in.sel{ display:flex; justify-content:space-between; align-items:center; }
.m-in.sel::after{ content:'▾'; color:var(--t2); }
.m-btn{
  display:flex; justify-content:center; align-items:center; gap:5px;
  background:var(--a); color:var(--on); font-weight:800; font-size:11px;
  border-radius:11px; padding:9px 10px; text-align:center;
}
.m-btn.o{ background:transparent; color:var(--a); border:1px solid var(--a); }
.m-btn.g{ background:rgba(255,255,255,.07); color:#fff; }
.m-btn.red{ background:var(--rd); color:#fff; }
.m-btn.ored{ background:transparent; color:var(--rd); border:1px solid rgba(248,81,73,.6); }
.m-btn.grn{ background:var(--gr); color:#06210d; }
.m-btn.dis{ opacity:.45; }
.m-btn.sm{ padding:6px 9px; font-size:10px; border-radius:9px; }
.m-chips{ display:flex; gap:5px; flex-wrap:nowrap; overflow:hidden; }
.m-chips.wrap{ flex-wrap:wrap; }
.m-chip{
  flex:0 0 auto; white-space:nowrap; border:1px solid var(--cb); background:var(--card);
  border-radius:999px; padding:4px 9px; font-size:9.5px; color:var(--t2);
}
.m-chip.on{ background:var(--ad); border-color:var(--a); color:var(--a); font-weight:700; }
.m-chip .c{ display:inline-block; min-width:14px; padding:0 4px; margin-left:3px; border-radius:999px; background:rgba(255,255,255,.1); font-size:8px; text-align:center; }
.m-chip.on .c{ background:var(--a); color:var(--on); }
.m-bdg{
  display:inline-flex; align-items:center; gap:3px; white-space:nowrap;
  border-radius:999px; padding:2px 7px; font-size:8.5px; font-weight:700;
  background:rgba(255,255,255,.08); color:var(--t2);
}
.m-bdg.am{ background:var(--ad); color:var(--a); }
.m-bdg.gr{ background:rgba(63,185,80,.15); color:var(--gr); }
.m-bdg.rd{ background:rgba(248,81,73,.15); color:var(--rd); }
.m-bdg.bl{ background:rgba(59,130,246,.17); color:#7fb0ff; }
.m-bdg.pu{ background:rgba(167,139,250,.17); color:var(--pu); }
.m-bdg.hold{ background:rgba(212,137,26,.18); color:var(--hold); }
.m-av{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font-weight:700; font-size:11px;
  background:linear-gradient(135deg,#6b4d22,#3b2a14); color:#ffd892;
}
.m-av.lg{ width:52px; height:52px; font-size:17px; }
.m-av.xl{ width:64px; height:64px; font-size:21px; }
.m-img{
  border-radius:10px; background:linear-gradient(135deg,#4a3a28,#2A1B10); display:grid; place-items:center;
  color:rgba(255,255,255,.5); font-size:18px; aspect-ratio:1/1;
}
.m-prog{ height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.m-prog > i{ display:block; height:100%; border-radius:999px; background:var(--a); }
.m-sw{ width:30px; height:17px; border-radius:999px; background:#3a3a3a; position:relative; flex:0 0 auto; }
.m-sw::after{ content:''; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:#ddd; }
.m-sw.on{ background:var(--gr); }
.m-sw.on::after{ left:15px; background:#fff; }
.m-ck{ width:15px; height:15px; border-radius:4px; border:1.5px solid var(--t3); flex:0 0 auto; display:grid; place-items:center; font-size:9px; }
.m-ck.on{ background:var(--a); border-color:var(--a); color:var(--on); font-weight:900; }
.m-ck.dis{ opacity:.35; }
.m-fab{
  position:absolute; right:14px; bottom:14px; width:44px; height:44px; border-radius:50%;
  background:var(--a); color:var(--on); font-size:24px; font-weight:400;
  display:grid; place-items:center; box-shadow:0 8px 20px rgba(0,0,0,.5); z-index:3;
}
.m-fab.left{ right:auto; left:14px; font-size:18px; }
.m-li{ display:flex; gap:9px; align-items:center; padding:8px 0; border-bottom:1px solid var(--cb); }
.m-li:last-child{ border-bottom:0; }
.m-ico{ width:30px; height:30px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center; font-size:15px; background:rgba(255,255,255,.06); }
.m-tile{
  background:var(--card); border:1px solid var(--cb); border-radius:12px; padding:9px 4px;
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; font-size:9px; font-weight:600;
}
.m-tile i{ font-style:normal; font-size:19px; }
.m-stat{ background:var(--card); border:1px solid var(--cb); border-radius:11px; padding:7px 4px; text-align:center; }
.m-stat b{ display:block; font-size:14px; font-weight:800; }
.m-stat span{ font-size:8px; color:var(--t2); }
.m-modal{
  position:absolute; inset:0; z-index:10; background:rgba(0,0,0,.6);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.m-modal.center{ justify-content:center; padding:14px; }
.m-sheet{ background:var(--card); border-radius:20px 20px 0 0; padding:12px 12px 20px; border-top:1px solid var(--cb); }
.m-sheet .grab{ width:34px; height:4px; border-radius:4px; background:rgba(255,255,255,.2); margin:0 auto 10px; }
.m-dlg{ background:var(--card); border:1px solid var(--cb); border-radius:20px; padding:14px; }
.m-dlg h5{ font-size:13px; font-weight:800; margin-bottom:5px; }
.m-dim{ opacity:.35; filter:saturate(.4); }
.m-strike{ text-decoration:line-through; color:var(--t3); }
.m-timeline{ display:flex; flex-direction:column; gap:0; }
.m-tl{ display:flex; gap:9px; position:relative; padding-bottom:10px; }
.m-tl:not(:last-child)::before{ content:''; position:absolute; left:6px; top:14px; bottom:0; width:2px; background:var(--cb); }
.m-tl.done:not(:last-child)::before{ background:var(--gr); }
.m-tl .dot{ width:14px; height:14px; border-radius:50%; flex:0 0 auto; border:2px solid var(--cb); background:var(--bg); margin-top:1px; position:relative; z-index:1; }
.m-tl.done .dot{ background:var(--gr); border-color:var(--gr); }
.m-tl.cur .dot{ border-color:var(--a); background:var(--a); box-shadow:0 0 0 3px var(--ad); }
.m-tl.todo{ color:var(--t3); }
.m-qr{ display:block; width:96px; height:96px; margin:0 auto; border-radius:8px; }
.m-qr.dim{ opacity:.3; }
.m-skel{ background:rgba(255,255,255,.05); border-radius:12px; }
.m-tile .ib{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:18px; background:#3D352D; }
.m-dash{ border:1px dashed var(--bd); border-radius:12px; padding:10px; text-align:center; color:var(--t2); }
.m-ph-add{ border:1px dashed var(--cb); border-radius:10px; aspect-ratio:1/1; display:grid; place-items:center; color:var(--t2); font-size:16px; }
.m-star{ color:var(--a); letter-spacing:1px; }
.m-hero-mn{ border-radius:16px; padding:14px 12px; text-align:center; }

/* ═══════════════════════════════════════════════════════════════
   Bổ sung cho video
═══════════════════════════════════════════════════════════════ */
/* Đơn vị quy đổi (xem đầu file) + chiều cao status bar (safe area top) */
.ph{ --pt:.7px; --fs:.73px; --sb:28px; }
/* Token phụ của app (theme/colors.ts): borderLight · cardDivider · amberDim · green */
.ph{ --bdl:#3D2E0B; --dv:#8a6c20; --adim:#F5A62320; --gn:#2EA043; }

/* Ionicons thật của app — dùng qua <x-guide-video.icon name="..." /> */
@font-face{ font-family:'Ionicons'; src:url('app/Ionicons.ttf') format('truetype'); font-display:block; }
.ion{ font-family:'Ionicons'; font-style:normal; font-weight:normal; line-height:1; display:inline-block; vertical-align:middle; -webkit-font-smoothing:antialiased; }

/* Status bar đè lên màn (như safe area thật): màn .scr tự chừa var(--sb) ở trên,
   header nào kéo nền lên sau status bar thì margin-top âm (xem .app-hd) */
.ph-scr > .ph-sb{ position:absolute; left:0; right:0; top:0; z-index:5; height:var(--sb); }
.ph-sb .ic{ display:inline-flex; align-items:center; gap:4px; }
.ph-sb svg{ display:block; fill:#fff; }
.ph-home{ position:absolute; z-index:55; left:50%; bottom:calc(8 * var(--pt)); width:calc(134 * var(--pt)); height:calc(5 * var(--pt)); margin-left:calc(-67 * var(--pt)); border-radius:999px; background:#fff; pointer-events:none; }
.ph-hd .bk{ border:1px solid var(--cb); }

/* ── AppHeader (design-system — app/components/ui/index.tsx) — <x-guide-video.app-header> ── */
.app-hd{ position:relative; z-index:3; flex:0 0 auto; display:flex; align-items:center; margin-top:calc(-1 * var(--sb)); padding:calc(var(--sb) + 8 * var(--pt)) calc(16 * var(--pt)) calc(12 * var(--pt)); background:var(--card); box-shadow:0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(61,53,45,.5); }
.app-hd::before, .app-tabs::before{ content:''; position:absolute; inset:0; background:url('app/bg-horizontal.jpg') center/cover; opacity:.6; }   /* ImageBackground bg-horizontal, opacity .6 */
.app-hd > *{ position:relative; }
.app-hd .bk, .app-hd .bk-none{ flex:0 0 auto; width:calc(36 * var(--pt)); height:calc(36 * var(--pt)); }
.app-hd .bk{ display:grid; place-items:center; border-radius:calc(8 * var(--pt)); background:var(--card); border:1px solid var(--cb); color:#fff; }
.app-hd .tt{ flex:1; min-width:0; text-align:center; padding:0 calc(8 * var(--pt)); font-size:calc(17 * var(--fs)); font-weight:700; line-height:1.25; }
.app-hd .tt small{ display:block; margin-top:calc(1 * var(--pt)); font-size:calc(12 * var(--fs)); font-weight:500; color:var(--t3); }
.app-hd .rt{ min-width:calc(36 * var(--pt)); display:flex; justify-content:flex-end; align-items:center; color:#fff; }

/* ── Tab bar (CustomTabBar — app/(tabs)/_layout.tsx) — <x-guide-video.tab-bar> ── */
.app-tabs{ position:relative; z-index:2; flex:0 0 auto; display:flex; padding:calc(8 * var(--pt)) 0 calc(34 * var(--pt)); background:var(--card); box-shadow:0 calc(-2 * var(--pt)) calc(4 * var(--pt)) rgba(61,53,45,.5); }
.app-tabs .tab{ position:relative; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:calc(2 * var(--pt)); padding:calc(4 * var(--pt)) 0; }
.app-tabs .ic{ position:relative; width:calc(36 * var(--pt)); height:calc(36 * var(--pt)); }
.app-tabs .ic img{ position:relative; display:block; width:100%; height:100%; object-fit:contain; }
.app-tabs .on .ic::before{ content:''; position:absolute; left:50%; top:50%; width:calc(44 * var(--pt)); height:calc(44 * var(--pt)); transform:translate(-50%,-50%); border-radius:50%; background:rgba(245,166,35,.145); }
.app-tabs b{ font-size:calc(11 * var(--fs)); font-weight:500; line-height:1.2; color:var(--t2); white-space:nowrap; }
.app-tabs .on b{ font-weight:700; color:var(--a); }
.app-tabs .ind{ position:absolute; z-index:1; top:calc(4 * var(--pt)); left:calc((var(--i) + .5) * 20% - 20 * var(--pt)); width:calc(40 * var(--pt)); height:calc(3 * var(--pt)); border-radius:2px; background:var(--a); box-shadow:0 0 calc(4 * var(--pt)) rgba(245,166,35,.6); }
.app-tabs .bdg{ position:absolute; top:calc(-2 * var(--pt)); right:calc(-8 * var(--pt)); min-width:calc(18 * var(--pt)); height:calc(18 * var(--pt)); padding:0 calc(4 * var(--pt)); display:grid; place-items:center; border-radius:999px; background:var(--rd); border:calc(1.5 * var(--pt)) solid var(--card); font-style:normal; font-size:calc(10 * var(--pt)); font-weight:800; line-height:1; color:#fff; }
.m-btn.pill{ border-radius:999px; padding:11px 10px; font-size:12px; }
.m-btn .spin{ display:none; }
.m-btn.busy .lbl{ display:none; }
.m-btn.busy .spin{ display:inline-block; }

/* Màn chồng lớp — engine Nav() đặt transform/visibility theo thời gian */
.scr-wrap{ position:relative; flex:1; min-height:0; }
.scr{ position:absolute; inset:0; padding-top:var(--sb); display:flex; flex-direction:column; background:var(--bg); overflow:hidden; visibility:hidden; }
.scr-shade{ position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; z-index:20; }
.vp{ position:relative; flex:1; min-height:0; overflow:hidden; }   /* khung nhìn của vùng cuộn */
.vp > .scroll{ position:absolute; left:0; right:0; top:0; }          /* translateY = cuộn */

/* Spinner (engine xoay theo t) + caret nhấp nháy theo t */
.spin{ width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; display:inline-block; }
.caret{ display:inline-block; width:1.5px; height:12px; margin-left:1px; background:var(--a); vertical-align:-2px; }
.blink-off .caret.idle{ opacity:0; }

/* ── Tab Tôi (app/(tabs)/profile) ── */
.pf-hero{ position:relative; text-align:center; padding:17px 14px 14px; }
.pf-set{ position:absolute; top:12px; right:14px; width:28px; height:28px; border-radius:8px; background:var(--card); border:1px solid var(--cb); display:grid; place-items:center; font-size:12px; }
.pf-av{ margin:0 auto; width:62px; height:62px; font-size:22px; box-shadow:0 0 0 2px var(--a); }
.pf-name{ font-size:17px; font-weight:800; letter-spacing:-.3px; margin-top:8px; }
.pf-name span{ color:var(--t3); font-weight:400; margin-left:2px; }
.pf-stats{ display:flex; align-items:center; margin-top:14px; background:var(--card); border:1px solid var(--cb); border-radius:14px; padding:10px 4px; }
.pf-stats > div{ flex:1; text-align:center; }
.pf-stats b{ display:block; font-size:16px; font-weight:800; line-height:1.25; }
.pf-stats span{ display:block; font-size:8px; color:var(--t3); line-height:1.3; margin-top:1px; }
.pf-stats > i{ width:1px; height:32px; background:var(--bd); }
.pf-body{ padding:0 14px; }
.pf-sec{ font-size:8.5px; font-weight:700; color:var(--t3); letter-spacing:.6px; margin:0 0 8px; }
.pf-list{ background:var(--card); border:1px solid var(--cb); border-radius:14px; overflow:hidden; margin-bottom:14px; }
.pf-row{ display:flex; align-items:center; gap:9px; min-height:45px; padding:7px 9px; }
.pf-row + .pf-row{ border-top:.5px solid #8a6c20; }
.pf-row .ic{ width:31px; height:31px; border-radius:9px; display:grid; place-items:center; font-size:16px; flex:0 0 auto; }
.pf-row .tx{ flex:1; min-width:0; }
.pf-row .tx b{ display:block; font-size:11px; font-weight:600; }
.pf-row .tx small{ display:block; font-size:8.5px; color:var(--t3); }
.pf-row > i{ font-style:normal; color:var(--t3); font-size:15px; }
/* <x-guide-video.profile-tab> — dòng chi · đời · dòng họ, labelBadge (vd "Hết hạn" ở Gói dịch vụ: màu + "33", viền màu), khối mờ TỪ KEYTECH */
.pf-meta{ margin-top:2px; }
.pf-bdg{ flex:0 0 auto; padding:calc(3 * var(--pt)) calc(8 * var(--pt)); border-radius:999px; border:1px solid var(--rd); background:rgba(248,81,73,.2); font-style:normal; font-size:calc(12 * var(--fs)); font-weight:800; letter-spacing:calc(.4 * var(--pt)); color:var(--rd); line-height:1.2; }
.pf-skel-keytech{ height:calc(130 * var(--pt)); margin-bottom:14px; }

/* ── Gói dịch vụ (app/profile/subscription.tsx) — StatusBanner, PlanCard, các link, thẻ Thành viên / Mã dòng họ / Tạo sớ ── */
.sub-body{ padding:calc(20 * var(--pt)) calc(20 * var(--pt)) 0; }
.sub-ld{ display:grid; place-items:center; padding:calc(24 * var(--pt)) 0; color:var(--a); }        /* plansLoading: ActivityIndicator nhỏ */
.sub-ld .spin{ width:calc(20 * var(--pt)); height:calc(20 * var(--pt)); }
.sub-st{ margin-bottom:calc(20 * var(--pt)); border-color:rgba(245,166,35,.2); background:rgba(245,166,35,.067); }   /* statusPremium / statusTrial: amber + "33" / "11" */
.sub-st.rd{ border-color:rgba(248,81,73,.2); background:rgba(248,81,73,.067); }                          /* statusExpired */
.sub-rw{ display:flex; align-items:center; gap:calc(12 * var(--pt)); }                                    /* statusRow · planHeader · activateLink */
.sub-ic{ flex:0 0 auto; width:calc(48 * var(--pt)); height:calc(48 * var(--pt)); border-radius:calc(12 * var(--pt)); background:rgba(245,166,35,.133); display:grid; place-items:center; font-size:calc(24 * var(--fs)); line-height:1; }
.sub-st.rd .sub-ic{ background:rgba(248,81,73,.133); }
.sub-tx{ flex:1; min-width:0; }
.sub-tx > *{ display:block; }
.sub-st .sub-tx > .ty-cap{ margin-top:calc(2 * var(--pt)); }
.sub-days{ flex:0 0 auto; padding:calc(3 * var(--pt)) calc(8 * var(--pt)); border-radius:999px; border:1px solid rgba(46,160,67,.267); background:rgba(46,160,67,.133); font-size:calc(12 * var(--fs)); font-weight:700; color:var(--gn); line-height:1.2; }
.sub-plan{ margin-bottom:calc(16 * var(--pt)); }
.sub-pn{ display:block; font-size:calc(17 * var(--fs)); font-weight:800; line-height:1.2; }
.sub-pr{ display:flex; flex-wrap:wrap; align-items:baseline; gap:calc(4 * var(--pt)); margin-top:calc(12 * var(--pt)); }
.sub-pr > b{ font-size:calc(24 * var(--fs)); font-weight:900; color:var(--a); line-height:1.2; }
.sub-pr > span{ font-size:calc(14 * var(--fs)); font-weight:600; color:var(--t3); line-height:1.2; }
.sub-meta{ display:flex; flex-wrap:wrap; gap:calc(4 * var(--pt)); margin-top:calc(8 * var(--pt)); }
.sub-meta > span{ padding:calc(3 * var(--pt)) calc(8 * var(--pt)); border-radius:999px; border:1px solid var(--cb); background:var(--card); font-size:calc(12 * var(--fs)); font-weight:600; color:var(--t2); line-height:1.2; }
.sub-meta > span.gn{ border-color:rgba(46,160,67,.267); background:rgba(46,160,67,.094); color:var(--gn); }   /* chip 🎁 Tặng thêm: green + "18" / "44" */
.sub-plan > .ds-dv{ margin:calc(12 * var(--pt)) 0; }
.sub-ft{ display:flex; flex-direction:column; gap:calc(8 * var(--pt)); }
.sub-ft > div{ display:flex; align-items:flex-start; gap:calc(8 * var(--pt)); }
.sub-ft i{ flex:0 0 auto; margin-top:calc(1 * var(--pt)); font-style:normal; font-size:calc(14 * var(--fs)); font-weight:700; color:var(--a); line-height:calc(19 * var(--pt)); }
.sub-ft span{ flex:1; font-size:calc(14 * var(--fs)); color:var(--t2); line-height:calc(19 * var(--pt)); }
.sub-act{ margin-top:calc(24 * var(--pt)); }
.sub-cur{ margin-bottom:calc(8 * var(--pt)); padding:calc(8 * var(--pt)) 0; border-radius:calc(12 * var(--pt)); border:1px solid rgba(245,166,35,.267); background:rgba(245,166,35,.133); text-align:center; font-size:calc(14 * var(--fs)); font-weight:700; color:var(--a); line-height:1.2; }   /* activeBadge "Gói hiện tại" */
.sub-act > .ty-cap{ display:block; margin-top:calc(4 * var(--pt)); text-align:center; }
/* activateLink (Gia hạn gói · Mở rộng thành viên · Mời khách) + warnLink (vượt giới hạn) + billingLink */
.sub-lk{ display:flex; align-items:center; gap:calc(12 * var(--pt)); margin-bottom:calc(16 * var(--pt)); padding:calc(12 * var(--pt)); border-radius:calc(16 * var(--pt)); border:1px solid var(--cb); background:var(--card); }
.sub-lk > em{ flex:0 0 auto; font-style:normal; font-size:calc(24 * var(--fs)); line-height:1.2; }
.sub-lk .sub-tx > .ty-cap{ margin-top:calc(1 * var(--pt)); }
.sub-lk > i{ flex:0 0 auto; font-style:normal; font-size:calc(17 * var(--fs)); color:var(--t3); line-height:1.2; }
.sub-lk.warn{ border-color:rgba(245,166,35,.4); background:rgba(245,166,35,.067); }
.sub-lk.warn .ty-lbl{ color:var(--a); }
.sub-lk.bill{ margin:calc(8 * var(--pt)) 0 0; }
.sub-lk.bill > em{ font-size:calc(17 * var(--fs)); }
.sub-lk.bill > .ty-lbl{ flex:1; }
.sub-card{ margin-bottom:calc(16 * var(--pt)); }                                                          /* membersCard · inviteCodeCard · quotaCard */
.sub-card > .ty-lbl:first-child{ display:block; }
.sub-mst{ display:flex; align-items:center; margin:calc(12 * var(--pt)) 0; }
.sub-mst > div{ flex:1; display:flex; flex-direction:column; align-items:center; }
.sub-mst b{ font-size:calc(24 * var(--fs)); font-weight:800; color:var(--a); line-height:1.2; }
.sub-mst > i{ width:1px; height:calc(28 * var(--pt)); background:var(--bd); }
.sub-pb{ height:calc(6 * var(--pt)); border-radius:calc(3 * var(--pt)); background:var(--card); overflow:hidden; }   /* progressBarBg = cardBg (trùng nền Card → không thấy rãnh) */
.sub-pb > i{ display:block; height:100%; border-radius:calc(3 * var(--pt)); background:var(--a); }
.sub-pb > i.gn{ background:var(--gn); }
.sub-pb > i.rd{ background:var(--rd); }
.sub-card > .ty-cap{ display:block; margin-top:calc(4 * var(--pt)); }
.sub-slots{ margin-top:calc(8 * var(--pt)); }
.sub-slots > .ty-cap{ display:block; margin-top:calc(2 * var(--pt)); }
.sub-code{ display:block; margin-top:calc(4 * var(--pt)); font-size:calc(24 * var(--fs)); font-weight:900; letter-spacing:calc(2 * var(--pt)); color:var(--a); line-height:1.2; }
.sub-qr{ display:flex; justify-content:space-between; margin-bottom:calc(8 * var(--pt)); }
.sub-foot{ margin:calc(20 * var(--pt)) 0 calc(32 * var(--pt)); text-align:center; font-size:calc(12 * var(--fs)); color:var(--t3); line-height:calc(17 * var(--pt)); }

/* ── Mua / gia hạn gói (app/profile/purchase.tsx ReviewView + _components/PurchaseStates.tsx) ── */
.pu-body{ padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc(32 * var(--pt)); }                       /* content: Spacing.xl / xl / xxxl */
.pu-ld{ display:flex; flex-direction:column; align-items:center; padding-top:calc(60 * var(--pt)); color:var(--a); }   /* LoadingState: s.center + ActivityIndicator large */
.pu-ld .spin{ width:calc(34 * var(--pt)); height:calc(34 * var(--pt)); border-width:calc(3.5 * var(--pt)); }
.pu-ld > .ty-bsm{ margin-top:calc(16 * var(--pt)); text-align:center; }
.pu-card{ margin-bottom:calc(16 * var(--pt)); }                                                            /* amountCard */
.pu-card > .ty-cap{ display:block; }
.pu-pn{ display:block; margin-top:calc(4 * var(--pt)); font-size:calc(17 * var(--fs)); font-weight:800; color:var(--a); line-height:1.2; }   /* planNameText */
.pu-card > .ds-dv{ margin:calc(12 * var(--pt)) 0; }
.pu-rb{ display:flex; justify-content:space-between; align-items:center; }                                 /* rowBetween */
.pu-rb + .pu-rb{ margin-top:calc(4 * var(--pt)); }
.pu-amt{ margin-top:calc(4 * var(--pt)); font-size:calc(24 * var(--fs)); font-weight:900; color:var(--a); line-height:1.2; }   /* amountText */
.pu-note{ border-color:rgba(46,160,67,.267); background:rgba(46,160,67,.067); }                           /* noticeGreen: green + "44" / "11" */
.pu-note > .ty-cap{ display:block; line-height:calc(18 * var(--pt)); }
.pu-btn{ margin-top:calc(12 * var(--pt)); }
.pu-safe{ display:block; margin-top:calc(12 * var(--pt)); text-align:center; line-height:calc(18 * var(--pt)); }
.pu-ok{ display:flex; flex-direction:column; align-items:center; padding-top:calc(60 * var(--pt)); }      /* SuccessState */
.pu-ok > i{ width:calc(80 * var(--pt)); height:calc(80 * var(--pt)); border-radius:50%; background:rgba(46,160,67,.133); display:grid; place-items:center; font-style:normal; font-size:calc(48 * var(--fs)); line-height:1; }   /* successIcon */
.pu-ok > .ty-h4{ margin-top:calc(16 * var(--pt)); text-align:center; }                                    /* Typography.h3 (17/700 = h4) */
.pu-ok > .ty-bsm{ margin-top:calc(8 * var(--pt)); text-align:center; }
.pu-ok > .ds-pbtn{ align-self:stretch; margin-top:calc(24 * var(--pt)); }

/* Bảng thanh toán App Store — UI hệ thống iOS (không có trong source app), MÔ PHỎNG giản lược: không chép chữ của Apple,
   chỉ giữ tên gói + giá + Face ID để người xem nhận ra bước xác nhận. Engine đặt nền mờ + trượt lên theo t. */
.aps-dim{ position:absolute; inset:0; z-index:30; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; }
.aps{ position:absolute; left:6px; right:6px; bottom:6px; z-index:31; visibility:hidden; padding:13px 13px 15px; border-radius:24px; background:#1C1C1E; color:#fff; }
.aps-hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.aps-hd b{ font-size:12.5px; font-weight:700; }
.aps-hd i{ width:19px; height:19px; border-radius:50%; background:#3A3A3C; display:grid; place-items:center; font-style:normal; font-size:9px; font-weight:700; color:#AEAEB2; }
.aps-pr{ display:flex; align-items:center; gap:9px; padding:9px; border-radius:12px; background:#2C2C2E; }
.aps-pr img{ flex:0 0 auto; width:34px; height:34px; border-radius:8px; }
.aps-pr div{ flex:1; min-width:0; }
.aps-pr b{ display:block; font-size:10.5px; font-weight:600; line-height:1.25; }
.aps-pr small{ display:block; font-size:8.5px; color:#8E8E93; line-height:1.3; }
.aps-pr em{ flex:0 0 auto; font-style:normal; font-size:11px; font-weight:700; }
.aps-sk{ height:8px; margin:11px 4px 0; border-radius:4px; background:#2C2C2E; }
.aps-sk.s{ width:55%; margin-top:6px; }
.aps-fid{ display:flex; flex-direction:column; align-items:center; gap:5px; margin-top:14px; font-size:8.5px; color:#8E8E93; }
.aps-fid .ion{ font-size:30px; color:#0A84FF; }
.aps-fid .ok{ display:none; }
.aps.done .aps-fid .ok{ display:inline-block; }
.aps.done .aps-fid .scan{ display:none; }

/* Thẻ tua thời gian — phủ kín màn điện thoại lúc chuyển sang một mốc ngày khác của kịch bản */
.ph-skip{ position:absolute; inset:0; z-index:40; display:grid; place-content:center; justify-items:center; gap:6px; padding:0 24px; background:rgba(15,9,3,.94); text-align:center; opacity:0; visibility:hidden; }
.ph-skip > em{ font-style:normal; font-size:34px; line-height:1.1; }
.ph-skip > b{ font-size:15px; font-weight:800; color:var(--a); }
.ph-skip > span{ font-size:10px; color:var(--t2); line-height:1.45; }

/* ── Mở rộng thành viên (app/profile/expand-slots.tsx) — PackagesView (bước 1) + TiersView (bước 2).
   Khung nội dung / loading / success dùng lại .pu-body · .pu-ld · .pu-ok · .pu-rb; bảng App Store dùng .aps-* ── */
.xs-info{ margin-bottom:calc(16 * var(--pt)); }                                                            /* infoCard */
.xs-info > .ds-dv{ margin:calc(12 * var(--pt)) 0; }
.xs-pb{ height:calc(6 * var(--pt)); margin-top:calc(8 * var(--pt)); border-radius:calc(3 * var(--pt)); background:var(--bg); overflow:hidden; }   /* progressBarBg: nền Colors.bg */
.xs-pb > i{ display:block; height:100%; border-radius:calc(3 * var(--pt)); background:var(--a); }
.xs-step{ display:block; margin-bottom:calc(8 * var(--pt)); }                                               /* "Bước 1 — …" Typography.label */
.xs-pkg{ margin-bottom:calc(12 * var(--pt)); }                                                             /* pkgCard */
.xs-row{ display:flex; align-items:center; gap:calc(12 * var(--pt)); }                                     /* pkgRow · tierRow */
.xs-ic{ flex:0 0 auto; width:calc(48 * var(--pt)); height:calc(48 * var(--pt)); border-radius:calc(12 * var(--pt)); background:rgba(245,166,35,.133); display:grid; place-items:center; font-size:calc(24 * var(--fs)); line-height:1; }   /* pkgIcon: amber + "22" */
.xs-tx{ flex:1; min-width:0; }
.xs-tx > *{ display:block; }
.xs-tx > .ty-cap{ margin-top:calc(1 * var(--pt)); }
.xs-tx > .ty-cap.am{ margin-top:calc(4 * var(--pt)); color:var(--a); }                                    /* "Từ … · N mức thời hạn" */
.xs-pn{ font-size:calc(17 * var(--fs)); font-weight:800; line-height:1.2; }                                 /* pkgName */
.xs-row > i{ flex:0 0 auto; font-style:normal; font-size:calc(17 * var(--fs)); color:var(--t3); line-height:1.2; }
.xs-tier{ margin-bottom:calc(8 * var(--pt)); }                                                             /* tierCard (viền cardBorder) */
.xs-tier.on{ border-color:var(--a); background:var(--adim); }                                              /* chọn: viền amber + nền amberDim */
.xs-rd{ flex:0 0 auto; width:calc(22 * var(--pt)); height:calc(22 * var(--pt)); border-radius:50%; border:calc(2 * var(--pt)) solid var(--t3); display:grid; place-items:center; }   /* radio */
.xs-tier.on .xs-rd{ border-color:var(--a); }
.xs-tier.on .xs-rd::after{ content:''; width:calc(10 * var(--pt)); height:calc(10 * var(--pt)); border-radius:50%; background:var(--a); }   /* radioDot */
.xs-tl{ font-size:calc(14 * var(--fs)); font-weight:700; line-height:1.2; }                                /* tierLabel */
.xs-pr{ flex:0 0 auto; font-size:calc(17 * var(--fs)); font-weight:900; line-height:1.2; }                  /* tierPrice */
.xs-tier.on .xs-pr{ color:var(--a); }
.xs-btn{ margin-top:calc(12 * var(--pt)); }
.xs-foot{ display:block; margin-top:calc(16 * var(--pt)); text-align:center; font-size:calc(12 * var(--fs)); color:var(--t3); line-height:calc(17 * var(--pt)); }   /* footer */

/* ── Gỡ thành viên (app/profile/remove-members.tsx) — headerInfo cố định · FlatList cuộn (.vp > .scroll.rm-list) · bottomBar tĩnh ── */
.rm-hd{ flex:0 0 auto; padding:calc(20 * var(--pt)) calc(20 * var(--pt)) 0; margin-bottom:calc(12 * var(--pt)); }   /* headerInfo */
.rm-info{ margin-bottom:calc(8 * var(--pt)); }                                                             /* infoCard */
.rm-ir{ display:flex; justify-content:space-between; align-items:center; }                                 /* infoRow */
.rm-ir + .rm-ir{ margin-top:calc(8 * var(--pt)); }
.rm-ir > .rd{ color:var(--rd); }                                                                           /* "Còn N người" Colors.red */
.rm-ir > .gn{ color:var(--gn); }                                                                           /* "Đủ điều kiện" Colors.green */
.rm-dis{ display:block; text-align:center; font-size:calc(12 * var(--fs)); color:var(--t3); line-height:calc(17 * var(--pt)); }   /* disclaimer */
.rm-ld{ place-items:start center; padding-top:calc(40 * var(--pt)); }                                      /* + .ld-center: s.center + flex 1 */
.rm-list{ padding:0 calc(20 * var(--pt)) calc(100 * var(--pt)); }                                         /* contentContainerStyle */
.rm-row{ display:flex; align-items:center; gap:calc(12 * var(--pt)); padding:calc(12 * var(--pt)); border-radius:calc(14 * var(--pt)); margin-bottom:calc(4 * var(--pt)); }   /* memberRow */
.rm-row.on{ background:rgba(248,81,73,.067); }                                                            /* memberRowSelected: red + "11" */
.rm-row > .ui-av{ --s:40; }
.rm-cb{ flex:0 0 auto; width:calc(24 * var(--pt)); height:calc(24 * var(--pt)); border-radius:calc(6 * var(--pt)); border:calc(2 * var(--pt)) solid var(--t3); display:grid; place-items:center; font-style:normal; font-size:calc(12 * var(--fs)); font-weight:800; color:#fff; line-height:1; }   /* checkbox */
.rm-cb::after{ content:'\2713'; visibility:hidden; }                                                      /* checkmark — chỉ khi chọn */
.rm-row.on .rm-cb{ background:var(--rd); border-color:var(--rd); }
.rm-row.on .rm-cb::after{ visibility:visible; }
.rm-tx{ flex:1; min-width:0; }
.rm-tx > *{ display:block; }
.rm-bar{ flex:0 0 auto; display:flex; align-items:center; padding:calc(12 * var(--pt)) calc(20 * var(--pt)) calc(34 * var(--pt)); border-top:1px solid var(--cb); background:var(--card); }   /* bottomBar: paddingBottom max(insets.bottom 34, md) */
.rm-bar > .ds-pbtn{ flex:1; margin-left:calc(12 * var(--pt)); }

/* ── Lịch sử thanh toán (app/profile/billing.tsx) — ScrollView paddingHorizontal xl · nhóm theo tháng · BillingCard · Tổng quan ── */
.bl-body{ padding:0 calc(20 * var(--pt)); }
.bl-ld{ display:flex; flex-direction:column; align-items:center; padding-top:calc(60 * var(--pt)); }     /* isLoading: 🧾 fs(32) + "Đang tải lịch sử..." */
.bl-ld > i{ font-style:normal; font-size:calc(32 * var(--fs)); line-height:1.2; }
.bl-ld > .ty-bsm{ margin-top:calc(12 * var(--pt)); }
.bl-mon{ display:block; margin:calc(16 * var(--pt)) 0 calc(12 * var(--pt)); font-size:calc(12 * var(--fs)); font-weight:700; letter-spacing:calc(.8 * var(--pt)); color:var(--t3); line-height:1.2; }   /* monthLabel */
.bl-card{ margin-bottom:calc(12 * var(--pt)); }                                                            /* billingCard */
.bl-hd{ display:flex; align-items:center; }                                                                /* cardHeader */
.bl-hd > div{ flex:1; min-width:0; }
.bl-hd > div > *{ display:block; }
.bl-hd .ty-cap{ margin-top:calc(2 * var(--pt)); }
.bl-pn{ font-size:calc(14 * var(--fs)); font-weight:700; line-height:1.2; }                                 /* planName */
.bl-st{ flex:0 0 auto; padding:calc(3 * var(--pt)) calc(8 * var(--pt)); border-radius:999px; font-size:calc(12 * var(--fs)); font-weight:700; line-height:1.2; }   /* statusBadge + statusText */
.bl-st.on{ color:var(--gn); background:rgba(46,160,67,.133); }                                             /* active: green + "22" */
.bl-st.off{ color:var(--t3); background:rgba(110,118,129,.133); }                                          /* expired: textMuted + "22" */
.bl-card > .ds-dv{ margin:calc(12 * var(--pt)) 0; }
.bl-rows{ display:flex; flex-direction:column; gap:calc(8 * var(--pt)); }                                  /* detailRows */
.bl-rw{ display:flex; justify-content:space-between; align-items:center; font-size:calc(14 * var(--fs)); line-height:1.2; }   /* detailRow */
.bl-rw > span{ color:var(--t3); }                                                                          /* detailLabel */
.bl-rw > b{ flex-shrink:1; font-weight:600; text-align:right; }                                            /* detailValue */
.bl-rw > b.gn{ color:var(--gn); }                                                                          /* "Còn lại" Colors.green */
.bl-rw > b.sm{ font-size:calc(12 * var(--fs)); }                                                           /* mã giao dịch FontSize.sm */
.bl-rw > b.am{ font-weight:800; color:var(--a); }                                                          /* Tổng đã thanh toán */
.bl-sum{ margin-top:calc(20 * var(--pt)); border-color:rgba(245,166,35,.2); background:rgba(245,166,35,.067); }   /* summaryCard: amber + "33" / "11" */
.bl-sum > b{ display:block; font-size:calc(14 * var(--fs)); font-weight:700; line-height:1.2; }             /* summaryTitle */
.bl-sum > .ds-dv{ margin:calc(8 * var(--pt)) 0; }
.bl-foot{ display:block; margin:calc(20 * var(--pt)) 0 calc(32 * var(--pt)); text-align:center; font-size:calc(12 * var(--fs)); color:var(--t3); line-height:1.2; }   /* footer */

/* ── Trang Giáo viên (app/teacher/index.tsx) ── */
.gv-intro{ text-align:center; padding:17px 14px; }
.gv-emo{ font-size:40px; line-height:1.1; }
.gv-title{ font-size:15px; font-weight:800; margin-top:10px; }
.gv-desc{ font-size:9.5px; color:var(--t2); line-height:1.5; margin:5px 2px 14px; }
.gv-row{ display:flex; gap:9px; align-items:center; text-align:left; background:var(--card); border:1px solid var(--cb); border-radius:14px; padding:8px 11px; margin-bottom:6px; }
.gv-row > span:first-child{ font-size:15px; }
.gv-row > span:last-child{ flex:1; font-size:9.5px; line-height:1.4; }
.gv-note{ font-size:7.5px; color:var(--t3); margin:9px 0 14px; }
.gv-state{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; padding:14px; text-align:center; }
.gv-state .gv-emo{ font-size:36px; }
.gv-state .gv-title{ font-size:16px; margin:0; }
.gv-state .gv-desc{ margin:0; max-width:230px; }
.gv-state .m-btn{ align-self:stretch; }
.d-body{ padding:14px; }   /* màn đã kích hoạt — <x-guide-video.teacher-dash> */
.d-card{ background:var(--card); border:1px solid var(--cb); border-radius:14px; padding:11px; margin-bottom:8px; }
.d-name{ font-size:12px; font-weight:800; }
.d-wallet{ text-align:center; padding:14px 8px; }
.d-wallet .lb{ font-size:7.5px; font-weight:800; color:var(--t3); letter-spacing:.7px; }
.d-wallet .bal{ font-size:26px; font-weight:900; color:var(--a); margin:4px 0; line-height:1.2; }
.d-wallet .cols{ display:flex; margin-top:4px; }
.d-wallet .cols > div{ flex:1; }
.d-wallet .cols b{ display:block; font-size:10.5px; font-weight:800; }
.d-wallet .cols span{ font-size:7.5px; color:var(--t3); }
.d-stats{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:8px; }
.d-stats > div{ background:var(--card); border:1px solid var(--cb); border-radius:14px; padding:10px 4px; text-align:center; }
.d-stats b{ display:block; font-size:17px; font-weight:900; line-height:1.2; }
.d-stats span{ font-size:7.5px; color:var(--t3); }
.d-sec{ display:flex; justify-content:space-between; align-items:center; margin:12px 0 7px; }
.d-sec b{ font-size:12px; font-weight:800; }
.d-sec a{ font-size:8.5px; font-weight:700; color:var(--a); }
.d-empty{ font-size:8.5px; color:var(--t3); line-height:1.5; }
.d-fab{ position:absolute; z-index:4; left:calc(20 * var(--pt)); bottom:calc(24 * var(--pt)); width:calc(56 * var(--pt)); height:calc(56 * var(--pt)); display:grid; place-items:center; border-radius:50%; background:var(--card); border:calc(1.5 * var(--pt)) solid var(--a); color:var(--a); box-shadow:0 calc(4 * var(--pt)) calc(8 * var(--pt)) rgba(0,0,0,.35); }   /* TeacherManageNav / MarketplaceManageNav fab ☰ (left Spacing.xl) */
.d-row{ display:flex; align-items:center; gap:calc(12 * var(--pt)); margin-bottom:calc(8 * var(--pt)); }   /* Card s.rowCard — thẻ lớp ở mục "Lớp học" (teacher-dash :classes) */
.d-row > div{ flex:1; min-width:0; }
.d-row b{ display:block; font-size:calc(14 * var(--fs)); font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* rowTitle */
.d-row small{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }   /* rowSub */
.d-row > em{ flex:0 0 auto; font-style:normal; font-size:calc(24 * var(--fs)); color:var(--t3); line-height:1.2; }   /* rowArrow › */
.d-rec > .ds-badge{ flex:0 0 auto; align-self:center; }   /* teacher/index.tsx — hàng "Thành tích gần đây": Badge status sm nằm bên phải (teacher-dash :records) */
.d-pend{ margin-bottom:calc(12 * var(--pt)); font-size:calc(12 * var(--fs)); color:var(--pu); line-height:calc(20 * var(--pt)); }   /* teacher/index.tsx s.pendingNote — "⏳ … thành tích đang chờ duyệt…" (teacher-dash :pending) */
.d-mn{ margin-bottom:calc(12 * var(--pt)); }   /* teacher/index.tsx s.mnCard — Card "🌈 Phiếu bé ngoan mầm non" (teacher-dash :mn), gap md như .d-row */
.d-mn > i{ flex:0 0 auto; font-style:normal; font-size:calc(28 * var(--pt)); line-height:1.2; }   /* mnEmoji fontSize 28 */

/* ── BottomMenu (design-system — app/components/ui/index.tsx) — <x-guide-video.bottom-menu> ──
   Modal animationType="none": nền bgOverlay mờ dần, sheet trượt từ dưới lên (engine đặt theo t) */
.bm-dim{ position:absolute; inset:0; z-index:30; background:rgba(0,0,0,.6); opacity:0; visibility:hidden; }
.bm-sheet{ position:absolute; left:0; right:0; bottom:0; z-index:31; max-height:85%; display:flex; flex-direction:column; background:var(--card); border-radius:calc(20 * var(--pt)) calc(20 * var(--pt)) 0 0; padding:calc(8 * var(--pt)) calc(16 * var(--pt)) calc(32 * var(--pt)); visibility:hidden; }
.bm-sheet .grab{ flex:0 0 auto; align-self:center; width:calc(36 * var(--pt)); height:calc(4 * var(--pt)); margin-bottom:calc(12 * var(--pt)); border-radius:2px; background:var(--bd); }
.bm-sheet h6{ padding:0 calc(8 * var(--pt)); margin-bottom:calc(4 * var(--pt)); font-size:calc(12 * var(--fs)); font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:calc(.5 * var(--pt)); line-height:1.2; }
.bm-sheet .sub{ padding:0 calc(8 * var(--pt)); margin-bottom:calc(8 * var(--pt)); font-size:calc(12 * var(--fs)); color:var(--t3); line-height:1.2; }   /* subtitle */
.bm-opt{ display:flex; align-items:center; gap:calc(12 * var(--pt)); padding:calc(12 * var(--pt)) calc(8 * var(--pt)); border-bottom:1px solid var(--bdl); }
.bm-opt > span{ flex:0 0 auto; font-size:calc(24 * var(--fs)); line-height:1.2; }    /* icon emoji — fontSize FontSize.xl */
.bm-opt > .ion{ flex:0 0 auto; font-size:calc(24 * var(--fs)); }                      /* iconName — Ionicons size FontSize.xl */
.bm-opt > div{ flex:1; min-width:0; }
.bm-opt b{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:calc(17 * var(--fs)); font-weight:600; line-height:1.2; }
.bm-opt small{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(12 * var(--fs)); color:var(--t3); line-height:1.2; }
.bm-opt.on b, .bm-opt.on > .ion{ color:var(--a); }        /* active */
.bm-opt.rd b, .bm-opt.rd > .ion{ color:var(--rd); }       /* destructive */
.bm-opt > em{ flex:0 0 auto; font-style:normal; font-size:calc(17 * var(--fs)); font-weight:700; color:var(--a); line-height:1.2; }   /* checkMark ✓ */
.bm-opt > .bdg{ flex:0 0 auto; min-width:calc(22 * var(--pt)); height:calc(22 * var(--pt)); padding:0 calc(7 * var(--pt)); border-radius:calc(11 * var(--pt)); display:grid; place-items:center; background:var(--a); font-style:normal; font-size:calc(12 * var(--fs)); font-weight:800; color:var(--on); line-height:1; }   /* bmStyles.badge / badgeTxt (option.badge > 0 → ẩn ✓) */
.bm-cc{ flex:0 0 auto; margin-top:calc(12 * var(--pt)); padding:calc(12 * var(--pt)) 0; border-radius:calc(14 * var(--pt)); background:var(--card); text-align:center; font-size:calc(17 * var(--fs)); font-weight:600; color:var(--t3); line-height:1.2; }   /* nút Huỷ */

/* ── TabFilter variant pills (app/components/ui/TabFilter.tsx) — FlatList ngang, KHÔNG tự cuộn tới tab đang chọn ── */
.tf{ flex:0 0 auto; overflow:hidden; border-bottom:1px solid var(--bd); }
.tf-bar{ display:flex; width:max-content; gap:calc(8 * var(--pt)); padding:calc(12 * var(--pt)) calc(16 * var(--pt)); }
.tf-bar.xl{ padding-left:calc(20 * var(--pt)); padding-right:calc(20 * var(--pt)); }   /* edgeInset={Spacing.xl} */
.tf-tab{ flex:0 0 auto; display:flex; align-items:center; gap:calc(6 * var(--pt)); padding:calc(8 * var(--pt)) calc(12 * var(--pt)); border-radius:999px; background:var(--card); border:1px solid var(--bd); font-size:calc(12 * var(--fs)); font-weight:700; color:var(--t2); line-height:1.2; white-space:nowrap; }
.tf-tab.on{ background:var(--a); border-color:var(--a); color:var(--on); }

/* ── Form (TeacherProfileFormFields) ── */
.f-form{ display:flex; flex-direction:column; }   /* khung chứa form: RN không gộp margin (field marginBottom 16 + section marginTop 16 = 32) → flex cho margin khỏi collapse */
.f-lead{ font-size:8.5px; color:var(--t2); line-height:1.6; margin-bottom:6px; }
.f-sec{ font-size:8.5px; font-weight:800; color:var(--a); letter-spacing:.7px; margin:11px 0 8px; }
.f-field{ display:flex; flex-direction:column; gap:5px; margin-bottom:11px; }
.f-row{ display:flex; gap:8px; }
.f-row > .f-field{ flex:1; min-width:0; }
.f-lbl{ font-size:8.5px; font-weight:700; color:var(--t3); letter-spacing:.55px; text-transform:uppercase; }
.f-in{ display:flex; align-items:center; min-height:31px; padding:7px 11px; border-radius:11px; background:var(--card); border:1px solid var(--cb); font-size:10.5px; color:#fff; white-space:nowrap; overflow:hidden; }
.f-in .plh{ color:var(--t3); overflow:hidden; text-overflow:ellipsis; }
.f-in.has .plh{ display:none; }
.f-in:not(.focus) .caret{ display:none; }
.f-in.focus{ border-color:var(--a); box-shadow:0 0 0 2.5px rgba(245,166,35,.14); }
.f-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.f-chip{ padding:5px 9px; border-radius:999px; background:var(--card); border:1px solid var(--bd); font-size:8.5px; font-weight:700; color:var(--t2); }
.f-chip.on{ background:var(--a); border-color:var(--a); color:var(--on); }
.f-hint{ font-size:7.5px; color:var(--t3); line-height:1.5; }
.f-add{ padding:9px 11px; border-radius:11px; border:1px dashed var(--cb); font-size:10px; font-weight:600; color:var(--t3); text-align:center; }
.f-thumb{ width:63px; height:63px; border-radius:11px; overflow:hidden; position:relative; background:linear-gradient(160deg,#c9d7e8,#7d93b0); display:grid; place-items:center; font-size:34px; }
.f-thumb .ov{ position:absolute; inset:0; background:rgba(0,0,0,.45); display:grid; place-items:center; color:#fff; }
.f-thumb .x{ position:absolute; top:3px; right:3px; width:15px; height:15px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:7px; display:grid; place-items:center; }
.bot-bar{ flex:0 0 auto; display:flex; flex-direction:column; gap:5px; padding:8px 14px 20px; background:var(--bg); border-top:1px solid var(--bd); }
.bot-bar .blk{ font-size:7.5px; color:var(--t3); text-align:center; }

/* ── Hồ sơ giáo viên (app/teacher/profile.tsx) + form đăng ký (register.tsx) — cùng s.scroll / s.field / spacer, form ở giữa là TeacherProfileFormFields ── */
.tp-scroll{ padding:calc(16 * var(--pt)) calc(20 * var(--pt)) 0; }                                                     /* s.scroll */
.tp-status{ display:flex; align-items:center; gap:calc(12 * var(--pt)); margin-bottom:calc(12 * var(--pt)); }            /* s.statusRow: Badge md + "Kích hoạt …" */
.tp-meta{ font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }                                            /* s.statusMeta */
.tp-photo{ display:flex; flex-direction:column; gap:calc(8 * var(--pt)); margin-top:calc(16 * var(--pt)); }             /* s.field bọc khối ảnh chân dung (ảnh hiện tại + ImagePickerSection) */
.tp-selfie{ width:calc(96 * var(--pt)); height:calc(96 * var(--pt)); border-radius:calc(16 * var(--pt)); border:1px solid var(--cb); overflow:hidden; display:grid; place-items:center; background:linear-gradient(160deg,#c9d7e8,#7d93b0); font-size:calc(52 * var(--pt)); line-height:1; }   /* s.selfie — cùng ảnh mẫu với .f-thumb lúc đăng ký */
.tp-gap{ height:calc(20 * var(--pt)); }                                                                                  /* spacer Spacing.xl cuối ScrollView */
/* Nút ☰ (TeacherManageNav, left 20 · rộng 56) nằm cùng hàng với nút Lưu → bottom bar chừa lề trái 20 + 56 + 12 cho khỏi đè.
   App hiện chưa chừa (FAB đè góc trái nút) — video vẽ né theo ý user, chờ sửa app. */
.bot-bar.fab-l{ padding-left:calc(88 * var(--pt)); }

/* ── Giới thiệu đồng nghiệp (app/teacher/referral.tsx) — lead + Card mã + 2 nút + 2 ô thống kê + ghi chú ── */
.rf-scroll{ padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc(110 * var(--pt)); }                                    /* s.scroll */
.rf-lead{ margin-bottom:calc(16 * var(--pt)); font-size:calc(14 * var(--fs)); color:var(--t2); line-height:calc(21 * var(--pt)); }   /* s.lead */
.rf-card{ display:flex; flex-direction:column; align-items:center; gap:calc(12 * var(--pt)); padding-top:calc(24 * var(--pt)); padding-bottom:calc(24 * var(--pt)); }   /* Card + s.codeCard */
.rf-lb{ font-size:calc(10 * var(--fs)); font-weight:800; color:var(--t3); letter-spacing:calc(1 * var(--pt)); line-height:1.2; }   /* s.codeLabel */
.rf-code{ font-size:calc(40 * var(--pt)); font-weight:900; color:var(--a); letter-spacing:calc(4 * var(--pt)); line-height:1.2; }   /* s.code (fontSize 40 không qua fs) */
.rf-btns{ display:flex; gap:calc(12 * var(--pt)); margin-top:calc(8 * var(--pt)); }                                      /* s.btnRow */
.rf-btns > span{ padding:calc(12 * var(--pt)) calc(20 * var(--pt)); border-radius:999px; font-size:calc(14 * var(--fs)); font-weight:800; line-height:1.2; white-space:nowrap; }
.rf-copy{ background:var(--a); color:var(--on); }                                                                        /* s.copyBtn */
.rf-share{ border:calc(1.5 * var(--pt)) solid var(--a); color:var(--a); }                                                /* s.shareBtn */
.rf-stats{ display:flex; gap:calc(8 * var(--pt)); margin-top:calc(16 * var(--pt)); }                                     /* s.statRow */
.rf-stats > div{ flex:1; display:flex; flex-direction:column; align-items:center; padding:calc(16 * var(--pt)) calc(12 * var(--pt)); border-radius:calc(16 * var(--pt)); background:var(--card); border:1px solid var(--cb); }   /* s.statBox */
.rf-stats b{ font-size:calc(24 * var(--fs)); font-weight:900; line-height:1.2; }                                         /* s.statVal */
.rf-stats span{ margin-top:calc(4 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); text-align:center; line-height:1.2; }   /* s.statLabel */
.rf-note{ margin-top:calc(16 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:calc(18 * var(--pt)); text-align:center; }   /* s.note */

/* ── Design-system (app/components/ui/index.tsx + theme/typography.ts) — dùng lại ở mọi màn ── */
.ty-cap{ font-size:calc(12 * var(--fs)); font-weight:500; color:var(--t3); line-height:1.2; }                   /* Typography.caption */
.ty-h4{ font-size:calc(17 * var(--fs)); font-weight:700; line-height:1.2; }                                    /* Typography.h4 */
.ty-bsm{ font-size:calc(12 * var(--fs)); color:var(--t2); line-height:calc(18 * var(--fs)); }                  /* Typography.bodySm */
.ty-lbl{ font-size:calc(12 * var(--fs)); font-weight:600; line-height:1.2; }                                    /* Typography.label */
.ds-dv{ height:1px; background:var(--bd); }                                                                     /* Divider */
.ds-card{ background:var(--card); border:1px solid var(--cb); border-radius:calc(16 * var(--pt)); padding:calc(16 * var(--pt)); }   /* Card */
.ds-card.pu{ border-color:#A78BFA55; }                                                                          /* Card accentColor=purpleLight (màu + "55") */
.ds-card.am{ border-color:#F5A62355; }                                                                          /* Card accentColor=amber */
.ds-sec{ display:flex; align-items:center; justify-content:space-between; margin-bottom:calc(12 * var(--pt)); }   /* SectionHeader */
.ds-sec > b{ flex:1; min-width:0; margin-right:calc(8 * var(--pt)); font-size:calc(17 * var(--fs)); font-weight:700; line-height:1.2; }
.ds-sec > a{ font-size:calc(12 * var(--fs)); font-weight:600; color:var(--a); line-height:1.2; }                  /* Typography.link */
.ds-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:calc(32 * var(--pt)) calc(20 * var(--pt)); }   /* EmptyState */
.ds-empty > i{ font-style:normal; font-size:calc(48 * var(--fs)); line-height:1.2; margin-bottom:calc(12 * var(--pt)); }
.ds-empty > b{ font-size:calc(17 * var(--fs)); font-weight:700; line-height:1.2; margin-bottom:calc(8 * var(--pt)); }
.ds-empty > p{ font-size:calc(12 * var(--fs)); color:var(--t2); line-height:calc(18 * var(--fs)); }
/* Badge: nền = màu + "22"; md (mặc định) fontSize 11 · px10 py4, sm fontSize 10 · px7 py2 */
.ds-badge{ display:inline-block; align-self:flex-start; border-radius:999px; padding:calc(4 * var(--pt)) calc(10 * var(--pt)); font-size:calc(11 * var(--pt)); font-weight:700; line-height:1.2; white-space:nowrap; }
.ds-badge.sm{ padding:calc(2 * var(--pt)) calc(7 * var(--pt)); font-size:calc(10 * var(--pt)); }
.ds-badge.am{ color:var(--a); background:rgba(245,166,35,.133); }
.ds-badge.gr{ color:var(--gr); background:rgba(63,185,80,.133); }
.ds-badge.pu{ color:var(--pu); background:rgba(167,139,250,.133); }
.ds-badge.bl{ color:var(--bl); background:rgba(59,130,246,.133); }
.ds-badge.rd{ color:var(--rd); background:rgba(248,81,73,.133); }
/* MemberAvatar gender=unknown, không ảnh: chữ cái đầu của từ cuối. Cỡ = --s (pt), mặc định 52 */
.ds-av{ --s:52; flex:0 0 auto; width:calc(var(--s) * var(--pt)); height:calc(var(--s) * var(--pt)); border-radius:50%; border:calc(2.5 * var(--pt)) solid var(--bd); background:var(--card); display:grid; place-items:center; font-size:calc(var(--s) * .4 * var(--pt)); font-weight:800; color:var(--t2); line-height:1; }
/* ActivityIndicator size="large" color=amber ở giữa màn (loading full-screen) */
.ld-center{ flex:1; min-height:0; display:grid; place-items:center; color:var(--a); }
.ld-center .spin{ width:calc(34 * var(--pt)); height:calc(34 * var(--pt)); border-width:calc(3.5 * var(--pt)); }

/* ── Trang chủ — <x-guide-video.home> ──
   header: app/(tabs)/index.tsx · ClanSwitcher compact: components/ClanSwitcher.tsx · Lối tắt: components/HomeShortcuts.tsx */
.hm-hd{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:calc(8 * var(--pt)) calc(20 * var(--pt)) calc(12 * var(--pt)); }
.hm-hi{ flex:1; min-width:0; }
.hm-hi > small{ display:block; margin-bottom:calc(2 * var(--pt)); }
.hm-hi > b{ display:block; font-size:calc(24 * var(--fs)); font-weight:700; letter-spacing:calc(-.3 * var(--pt)); line-height:1.2; }   /* Typography.h2 */
.hm-clan{ display:inline-flex; align-items:center; gap:calc(8 * var(--pt)); max-width:calc(220 * var(--pt)); margin-top:calc(4 * var(--pt)); padding:calc(4 * var(--pt)) calc(8 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--card); border:1px solid var(--a); }
.hm-clan > i{ font-style:normal; font-size:calc(18 * var(--pt)); line-height:1.2; }
.hm-clan > span{ flex-shrink:1; min-width:0; display:flex; flex-direction:column; }
.hm-clan small{ font-size:calc(10 * var(--pt)); font-weight:700; letter-spacing:calc(.5 * var(--pt)); text-transform:uppercase; color:var(--a); line-height:1.2; }
.hm-clan b{ font-size:calc(13 * var(--pt)); font-weight:600; line-height:1.2; }
.hm-clan > em{ flex:0 0 auto; width:calc(26 * var(--pt)); height:calc(26 * var(--pt)); border-radius:50%; background:var(--a); display:grid; place-items:center; font-style:normal; font-size:calc(16 * var(--pt)); font-weight:700; line-height:calc(18 * var(--pt)); color:#fff; }
.hm-bell{ flex:0 0 auto; width:calc(44 * var(--pt)); height:calc(44 * var(--pt)); border-radius:50%; background:var(--card); display:grid; place-items:center; color:#fff; }
.hm-bd{ position:relative; flex:1; min-height:0; overflow:hidden; }
.hm-bd::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:44px; pointer-events:none; background:linear-gradient(transparent, var(--bg)); }
.hm-blk{ margin:0 calc(20 * var(--pt)) calc(16 * var(--pt)); border-radius:calc(14 * var(--pt)); }   /* khối mờ thay widget không liên quan */
.hm-banner{ aspect-ratio:2; }                                                                        /* HomeBanner ASPECT = 2 */
.hm-more{ height:calc(160 * var(--pt)); }                                                            /* widget bên dưới Lối tắt */
.hm-sc-hd{ display:flex; align-items:center; justify-content:space-between; padding:0 calc(20 * var(--pt)); margin-bottom:calc(12 * var(--pt)); }
.hm-sc-hd > b{ font-size:calc(17 * var(--fs)); font-weight:800; letter-spacing:calc(-.2 * var(--pt)); line-height:1.2; }
.hm-sc-hd > a{ font-size:calc(12 * var(--fs)); font-weight:700; color:var(--a); line-height:1.2; }
.hm-sc{ display:grid; grid-template-columns:repeat(3,1fr); gap:calc(12 * var(--pt)); padding:0 calc(20 * var(--pt)); margin-bottom:calc(16 * var(--pt)); }
.hm-sc > div{ display:flex; flex-direction:column; align-items:center; gap:calc(8 * var(--pt)); min-height:calc(108 * var(--pt)); padding:calc(12 * var(--pt)) calc(8 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--card); border:1px solid var(--cb); }
.hm-sc .ib{ width:calc(40 * var(--pt)); height:calc(40 * var(--pt)); border-radius:calc(12 * var(--pt)); display:grid; place-items:center; font-size:calc(24 * var(--fs)); line-height:1; }
.hm-sc .tt{ align-self:stretch; min-height:calc(32 * var(--pt)); display:flex; align-items:center; justify-content:center; text-align:center; font-size:calc(12 * var(--fs)); font-weight:600; line-height:calc(16 * var(--pt)); }

/* ── Hiếu Học — trang chính (app/hieu-hoc/index.tsx) ── */
.hh-body{ padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc(40 * var(--pt)); }
.hh-grow{ overflow:hidden; }                                          /* khối xuất hiện dần: engine đặt height theo t */
.hh-hero{ display:flex; flex-direction:column; align-items:center; margin-bottom:calc(20 * var(--pt)); }
.hh-hero > .hh-grow{ align-self:stretch; display:flex; flex-direction:column; align-items:center; }
.hh-pts{ font-size:calc(40 * var(--pt)); font-weight:800; color:var(--a); line-height:calc(46 * var(--pt)); }
.hh-unit{ margin-top:calc(-2 * var(--pt)); font-size:calc(12 * var(--fs)); color:var(--t2); line-height:1.2; }
.hh-hero .hh-bp{ margin-top:calc(8 * var(--pt)); align-self:center; }
.hh-pend{ margin-top:calc(8 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--bl); text-align:center; line-height:1.2; }
.hh-acts{ display:flex; gap:calc(12 * var(--pt)); margin-top:calc(16 * var(--pt)); }
.hh-acts > span{ display:flex; align-items:center; padding:calc(12 * var(--pt)) calc(16 * var(--pt)); border-radius:999px; background:var(--a); font-size:calc(14 * var(--fs)); font-weight:700; color:var(--on); line-height:1.2; }
.hh-acts > span.gh{ background:transparent; border:1px solid var(--a); color:var(--a); }
.hh-mn{ display:flex; align-items:center; gap:calc(12 * var(--pt)); margin-bottom:calc(16 * var(--pt)); }   /* card Bé ngoan mầm non */
.hh-mn > i{ font-style:normal; font-size:calc(34 * var(--pt)); line-height:1.2; }
.hh-mn > span{ flex:1; min-width:0; }
.hh-mn b{ display:block; font-size:calc(14 * var(--fs)); font-weight:800; line-height:1.2; }
.hh-mn small{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(12 * var(--fs)); color:var(--t2); line-height:1.2; }
.hh-mn > em{ font-style:normal; font-size:calc(24 * var(--fs)); color:var(--t3); line-height:1.2; }
.hh-sc{ display:flex; flex-wrap:wrap; gap:calc(12 * var(--pt)); margin-bottom:calc(16 * var(--pt)); }
.hh-sc > div{ width:30%; display:flex; flex-direction:column; align-items:center; }
.hh-sc .ib{ width:calc(52 * var(--pt)); height:calc(52 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--card); border:1px solid var(--cb); display:grid; place-items:center; font-size:calc(24 * var(--pt)); line-height:1; }
.hh-sc .lb{ margin-top:calc(8 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t2); text-align:center; line-height:1.2; }
/* BadgePill (app/hieu-hoc/_components/BadgePill.tsx): nền = màu bậc .16, viền .45 */
.hh-bp{ display:inline-flex; align-items:center; align-self:flex-start; gap:calc(4 * var(--pt)); padding:calc(3 * var(--pt)) calc(8 * var(--pt)); border-radius:999px; border:.5px solid; line-height:1.2; white-space:nowrap; }
.hh-bp > i{ font-style:normal; font-size:calc(12 * var(--fs)); }
.hh-bp > b{ font-size:calc(10 * var(--fs)); font-weight:700; }
.hh-bp.md{ gap:calc(6 * var(--pt)); padding:calc(6 * var(--pt)) calc(12 * var(--pt)); }
.hh-bp.md > i{ font-size:calc(17 * var(--fs)); }
.hh-bp.md > b{ font-size:calc(12 * var(--fs)); }
/* Bậc huy hiệu — màu theo database/seeders/StudyBadgeTierSeeder.php */
.hh-bp.mam-xanh{ color:#3FB950; background:rgba(63,185,80,.16); border-color:rgba(63,185,80,.45); }
.hh-bp.dong{ color:#CD7F32; background:rgba(205,127,50,.16); border-color:rgba(205,127,50,.45); }
.hh-bp.bac{ color:#A8A9AD; background:rgba(168,169,173,.16); border-color:rgba(168,169,173,.45); }
.hh-bp.vang{ color:#F5A623; background:rgba(245,166,35,.16); border-color:rgba(245,166,35,.45); }
.hh-bp.bach-kim{ color:#7FDBFF; background:rgba(127,219,255,.16); border-color:rgba(127,219,255,.45); }
.hh-bp.kim-cuong{ color:#A78BFA; background:rgba(167,139,250,.16); border-color:rgba(167,139,250,.45); }
/* WalletCard (app/hieu-hoc/_components/WalletCard.tsx) */
.hh-wal{ margin-bottom:calc(12 * var(--pt)); }
.hh-wal > .rw{ display:flex; align-items:center; gap:calc(12 * var(--pt)); }
.hh-wal .ds-av{ --s:44; }
.hh-wal .nc{ flex:1; min-width:0; display:flex; flex-direction:column; gap:calc(2 * var(--pt)); }
.hh-wal .nr{ display:flex; align-items:center; flex-wrap:wrap; gap:calc(4 * var(--pt)); }
.hh-wal .nr > b{ flex-shrink:1; min-width:0; font-size:calc(17 * var(--fs)); font-weight:700; line-height:calc(20 * var(--pt)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hh-wal .nc > .ty-cap{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hh-wal .bc{ display:flex; flex-direction:column; align-items:flex-end; }
.hh-wal .bal{ font-size:calc(24 * var(--fs)); font-weight:800; color:var(--a); line-height:1.2; }
.hh-wal .bk{ display:flex; flex-wrap:wrap; gap:calc(12 * var(--pt)); margin-top:calc(12 * var(--pt)); padding-top:calc(12 * var(--pt)); border-top:.5px solid var(--cb); }
.hh-wal .bk > span{ display:flex; align-items:center; gap:calc(6 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t2); line-height:1.2; white-space:nowrap; }
.hh-wal .bk > span > i{ width:calc(7 * var(--pt)); height:calc(7 * var(--pt)); border-radius:50%; background:var(--a); }   /* pointStatusColor: pending_verify amber */
.hh-wal .bk > span > i.pu{ background:var(--pu); }
.hh-wal .bk > span > i.bl{ background:var(--bl); }
/* RecordCard (app/hieu-hoc/_components/RecordCard.tsx) */
.hh-rec{ margin-bottom:calc(12 * var(--pt)); }
.hh-rec > .rw{ display:flex; align-items:flex-start; gap:calc(12 * var(--pt)); }
.hh-rec .ib{ flex:0 0 auto; width:calc(52 * var(--pt)); height:calc(52 * var(--pt)); border-radius:calc(14 * var(--pt)); background:#F5A62320; border:1px solid #F5A62355; display:grid; place-items:center; font-size:calc(26 * var(--pt)); line-height:1; }
.hh-rec .bd{ flex:1; min-width:0; }
.hh-rec .bd > b{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:calc(17 * var(--fs)); font-weight:700; line-height:calc(20 * var(--pt)); }
.hh-rec .mt{ display:flex; flex-wrap:wrap; align-items:center; gap:calc(8 * var(--pt)); margin-top:calc(2 * var(--pt)); }
.hh-rec .bg{ display:flex; flex-wrap:wrap; align-items:center; gap:calc(8 * var(--pt)); margin-top:calc(8 * var(--pt)); }
.hh-rec .hint{ margin-top:calc(12 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:calc(16 * var(--pt)); }
.hh-rec .cv{ --s:52; position:relative; flex:0 0 auto; width:calc(52 * var(--pt)); height:calc(52 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--card); overflow:hidden; }   /* ảnh minh chứng đầu tiên làm cover */
.hh-rec .rej{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin-top:calc(8 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--rd); line-height:calc(16 * var(--pt)); }

/* Ảnh minh chứng giả (vẽ bằng gradient, không dùng ảnh thật) — cỡ theo --s (pt) của khung chứa */
.pic{ position:absolute; inset:0; overflow:hidden; }
.pic.paper{ background:
  linear-gradient(rgba(40,44,70,.55),rgba(40,44,70,.55)) 60% 58%/56% calc(var(--s) * .035 * var(--pt)) no-repeat,
  linear-gradient(rgba(40,44,70,.55),rgba(40,44,70,.55)) 50% 72%/64% calc(var(--s) * .035 * var(--pt)) no-repeat,
  linear-gradient(rgba(40,44,70,.55),rgba(40,44,70,.55)) 40% 86%/44% calc(var(--s) * .035 * var(--pt)) no-repeat,
  repeating-linear-gradient(transparent 0 calc(var(--s) * .14 * var(--pt) - 1px), #c3cfe6 0 calc(var(--s) * .14 * var(--pt))),
  #f6f3ea; }   /* giấy kẻ dòng + vài dòng chữ */
.pic.paper::before{ content:''; position:absolute; top:0; bottom:0; left:18%; width:1px; background:#e08a8a; }   /* lề đỏ */
.pic.paper::after{ content:'10'; position:absolute; right:10%; top:8%; width:40%; aspect-ratio:1; display:grid; place-items:center; border:calc(var(--s) * .025 * var(--pt)) solid #d32f2f; border-radius:50%; font:italic 800 calc(var(--s) * .2 * var(--pt))/1 Georgia,serif; color:#d32f2f; transform:rotate(-12deg); }   /* điểm 10 khoanh đỏ */
.pic.cert{ background:
  radial-gradient(circle at 72% 78%, #c62828 0 calc(var(--s) * .09 * var(--pt)), transparent calc(var(--s) * .09 * var(--pt) + .5px)),
  linear-gradient(#9c7c45,#9c7c45) 50% 50%/56% calc(var(--s) * .03 * var(--pt)) no-repeat,
  linear-gradient(#9c7c45,#9c7c45) 50% 60%/40% calc(var(--s) * .03 * var(--pt)) no-repeat,
  #fbf3dc; box-shadow:inset 0 0 0 calc(var(--s) * .04 * var(--pt)) #c9a24a, inset 0 0 0 calc(var(--s) * .06 * var(--pt)) #fbf3dc, inset 0 0 0 calc(var(--s) * .07 * var(--pt)) #c9a24a; }   /* giấy khen: viền vàng + con dấu */
.pic.cert::before{ content:'GIẤY KHEN'; position:absolute; left:0; right:0; top:24%; text-align:center; font-size:calc(var(--s) * .12 * var(--pt)); font-weight:800; line-height:1; color:#c62828; white-space:nowrap; }
.pic.cert::after{ content:''; position:absolute; left:50%; top:10%; width:calc(var(--s) * .1 * var(--pt)); height:calc(var(--s) * .1 * var(--pt)); margin-left:calc(var(--s) * -.05 * var(--pt)); border-radius:50%; background:#d4a017; }
.pic.folio{ background:#8e1b1b; box-shadow:inset 0 0 0 calc(var(--s) * .05 * var(--pt)) #8e1b1b, inset 0 0 0 calc(var(--s) * .065 * var(--pt)) #d4a017; }   /* bìa giấy khen: nền đỏ đậm, viền + chữ vàng, quốc huy */
.pic.folio::before{ content:'GIẤY KHEN'; position:absolute; left:0; right:0; top:60%; text-align:center; font-size:calc(var(--s) * .12 * var(--pt)); font-weight:800; line-height:1; color:#e8c15a; white-space:nowrap; }
.pic.folio::after{ content:''; position:absolute; left:50%; top:20%; width:calc(var(--s) * .26 * var(--pt)); height:calc(var(--s) * .26 * var(--pt)); margin-left:calc(var(--s) * -.13 * var(--pt)); border-radius:50%; background:radial-gradient(circle, #f2d27a 0 32%, #d4a017 33%); }
.pic.blur{ filter:blur(calc(var(--s) * .03 * var(--pt))); transform:scale(1.08); }   /* ảnh chụp mờ */

/* ── Đăng / sửa thành tích — app/hieu-hoc/records/create.tsx, records/[id]/edit.tsx,
      _components/RecordFormFields.tsx, components/ui/DatePickerField.tsx ── */
.rec-scroll{ padding:calc(16 * var(--pt)) calc(20 * var(--pt)) 0; }
.rec-f{ display:flex; flex-direction:column; gap:calc(8 * var(--pt)); margin-bottom:calc(16 * var(--pt)); }
.rec-row{ display:flex; gap:calc(12 * var(--pt)); }
.rec-row > .rec-f{ flex:1; min-width:0; }
.rec-row > .rec-f.x2{ flex:2; }
.rec-lbl{ font-size:calc(12 * var(--fs)); font-weight:700; color:var(--t3); letter-spacing:calc(.8 * var(--pt)); text-transform:uppercase; line-height:1.2; }
.rec-hint{ font-size:calc(10 * var(--fs)); color:var(--t3); line-height:calc(16 * var(--pt)); }
.rec-hint.pu{ color:var(--pu); }
.rec-err{ font-size:calc(12 * var(--fs)); font-weight:500; color:var(--rd); line-height:1.2; }
.rec-dv{ height:1px; margin-bottom:calc(16 * var(--pt)); background:var(--bd); }
.rec-in{ display:flex; align-items:center; padding:calc(12 * var(--pt)) calc(16 * var(--pt)); border-radius:calc(16 * var(--pt)); background:var(--card); border:1px solid var(--cb); font-size:calc(14 * var(--fs)); line-height:1.25; color:#fff; white-space:nowrap; overflow:hidden; }
.rec-in.tt{ padding:calc(16 * var(--pt)); border-width:calc(1.5 * var(--pt)); font-size:calc(17 * var(--fs)); font-weight:700; }
.rec-in.ta{ align-items:flex-start; min-height:calc(100 * var(--pt)); white-space:normal; }
.rec-in .plh{ color:var(--t3); font-weight:400; overflow:hidden; text-overflow:ellipsis; }
.rec-in.has .plh{ display:none; }
.rec-in:not(.focus) .caret{ display:none; }
.rec-pk{ display:flex; align-items:center; gap:calc(12 * var(--pt)); padding:calc(12 * var(--pt)) calc(16 * var(--pt)); border-radius:calc(16 * var(--pt)); background:var(--card); border:1px solid var(--cb); }   /* picker loại / người */
.rec-pk > i{ font-style:normal; font-size:calc(20 * var(--pt)); line-height:1.2; }
.rec-pk > span{ flex:1; min-width:0; }
.rec-pk b{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:calc(14 * var(--fs)); font-weight:600; line-height:calc(20 * var(--pt)); }
.rec-pk b.one{ flex:1; min-width:0; -webkit-line-clamp:1; }
.rec-pk b.plh{ font-weight:400; color:var(--t3); }
.rec-pk small{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); font-weight:800; color:var(--a); line-height:1.2; }
.rec-pk > .plh{ flex:1; font-size:calc(14 * var(--fs)); color:var(--t3); line-height:1.2; }
.rec-pk > em{ font-style:normal; margin-top:calc(-2 * var(--pt)); font-size:calc(24 * var(--fs)); color:var(--t3); line-height:1.2; }
.rec-date{ display:flex; align-items:center; gap:calc(8 * var(--pt)); min-height:calc(52 * var(--pt)); padding:calc(12 * var(--pt)) calc(16 * var(--pt)); border-radius:calc(16 * var(--pt)); background:var(--card); border:1px solid var(--cb); }   /* DatePickerField */
.rec-date > i{ font-style:normal; font-size:calc(14 * var(--fs)); }
.rec-date > b{ flex:1; font-size:calc(14 * var(--fs)); font-weight:600; }
.rec-date > b.plh{ font-weight:400; color:var(--t3); }
.rec-date > em{ font-style:normal; font-size:calc(17 * var(--fs)); color:var(--t3); }
.rec-chips{ display:flex; flex-wrap:wrap; gap:calc(8 * var(--pt)); }
.rec-chip{ padding:calc(8 * var(--pt)) calc(16 * var(--pt)); border-radius:999px; background:var(--card); border:1px solid var(--cb); font-size:calc(12 * var(--fs)); font-weight:600; color:var(--t2); line-height:1.2; }
.rec-chip.on{ background:var(--adim); border-color:var(--a); color:var(--a); }
.rec-sw{ display:flex; align-items:center; gap:calc(12 * var(--pt)); margin-bottom:calc(16 * var(--pt)); }
.rec-sw > span{ flex:1; min-width:0; }
.rec-sw b{ display:block; font-size:calc(14 * var(--fs)); font-weight:600; line-height:1.2; }
.rec-sw > i{ flex:0 0 auto; position:relative; width:calc(51 * var(--pt)); height:calc(31 * var(--pt)); border-radius:999px; background:var(--card); }   /* Switch tắt */
.rec-sw > i::after{ content:''; position:absolute; top:calc(2 * var(--pt)); left:calc(2 * var(--pt)); width:calc(27 * var(--pt)); height:calc(27 * var(--pt)); border-radius:50%; background:var(--t3); box-shadow:0 1px 3px rgba(0,0,0,.3); }
/* Switch bật theo --k (0 tắt → 1 bật, engine tăng dần khi chạm): trackColor true amber + '66' · thumbColor amber · thumb trượt 51 − 2·2 − 27 = 20pt */
.rec-sw > i{ background:color-mix(in srgb, rgba(245,166,35,.4) calc(var(--k, 0) * 100%), var(--card)); }
.rec-sw > i::after{ background:color-mix(in srgb, var(--a) calc(var(--k, 0) * 100%), var(--t3)); transform:translateX(calc(var(--k, 0) * 20 * var(--pt))); }
.rec-bar{ flex:0 0 auto; display:flex; flex-direction:column; gap:calc(8 * var(--pt)); padding:calc(12 * var(--pt)) calc(20 * var(--pt)) calc(32 * var(--pt)); background:var(--bg); border-top:1px solid var(--bd); }
.rec-bar .blk{ font-size:calc(10 * var(--fs)); color:var(--t3); text-align:center; line-height:1.2; }
.rec-sub{ display:flex; justify-content:center; align-items:center; padding:calc(18 * var(--pt)) 0; border-radius:999px; background:var(--a); color:var(--on); font-size:calc(17 * var(--fs)); font-weight:800; line-height:1.2; }
.rec-sub.dis{ opacity:.45; }
.rec-sub .spin{ display:none; }
.rec-sub.busy .lbl{ display:none; }
.rec-sub.busy .spin{ display:inline-block; }
.rec-lock{ display:flex; flex-direction:column; gap:calc(12 * var(--pt)); margin-bottom:calc(16 * var(--pt)); }   /* edit.tsx: loại + người đạt đã khoá */
.rec-lock .rw{ display:flex; align-items:center; gap:calc(12 * var(--pt)); }
.rec-lock .rw > i{ font-style:normal; font-size:calc(26 * var(--pt)); line-height:1.2; }
.rec-lock .rw > span{ flex:1; min-width:0; }
.rec-lock b{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:calc(14 * var(--fs)); font-weight:700; line-height:calc(20 * var(--pt)); }
.rec-lock small{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(12 * var(--fs)); color:var(--t2); line-height:1.2; }
/* Danh sách thành tích (app/hieu-hoc/records/index.tsx): s.content + FAB đăng mới */
.rec-list{ padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc(96 * var(--pt)); }
.rec-fab{ position:absolute; z-index:4; right:calc(20 * var(--pt)); bottom:calc(24 * var(--pt)); width:calc(56 * var(--pt)); height:calc(56 * var(--pt)); display:grid; place-items:center; border-radius:50%; background:var(--a); box-shadow:0 calc(4 * var(--pt)) calc(8 * var(--pt)) rgba(245,166,35,.4); font-size:calc(30 * var(--pt)); font-weight:600; line-height:calc(34 * var(--pt)); color:var(--on); }
/* Đăng thành tích của giáo viên (app/teacher/records/create.tsx) — picker học sinh: dòng phụ "lớp · dòng họ" (s.pickerSub) */
.rec-pk small.sub{ font-weight:400; color:var(--t3); }
/* Sheet chọn học sinh (create.tsx — Modal slide trong .sh-lay): s.sheet / sheetTitle / sheetSearch / sheetRow. paddingBottom insets.bottom + Spacing.lg */
.tsp{ display:flex; flex-direction:column; min-height:45%; max-height:78%; padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc((34 + 16) * var(--pt)); border-radius:calc(20 * var(--pt)) calc(20 * var(--pt)) 0 0; background:var(--bg); }
.tsp > b{ margin-bottom:calc(12 * var(--pt)); font-size:calc(17 * var(--fs)); font-weight:800; line-height:1.2; }
.tsp-search{ margin-bottom:calc(12 * var(--pt)); padding:calc(12 * var(--pt)) calc(16 * var(--pt)); border-radius:calc(16 * var(--pt)); background:var(--card); border:1px solid var(--cb); font-size:calc(14 * var(--fs)); color:var(--t3); line-height:1.25; }
.tsp-row{ display:flex; align-items:center; gap:calc(12 * var(--pt)); padding:calc(12 * var(--pt)) 0; border-bottom:1px solid var(--cb); }
.tsp-row > span{ flex:1; min-width:0; }
.tsp-row b{ display:block; font-size:calc(14 * var(--fs)); font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* sheetRowName */
.tsp-row small{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* sheetRowSub */
.tsp-row.on b{ color:var(--a); }
.tsp-row > em{ display:none; font-style:normal; font-size:calc(17 * var(--fs)); font-weight:800; color:var(--a); line-height:1.2; }   /* sheetCheck ✓ — học sinh đang chọn */
.tsp-row.on > em{ display:block; }
/* ImagePickerSection (app/pagoda/_components/ImagePickerSection.tsx) */
.ip{ display:flex; flex-direction:column; gap:calc(8 * var(--pt)); }
.ip-row{ display:flex; gap:calc(8 * var(--pt)); }
.ip-th{ --s:90; position:relative; flex:0 0 auto; width:calc(90 * var(--pt)); height:calc(90 * var(--pt)); border-radius:calc(16 * var(--pt)); overflow:hidden; background:var(--card); }
.ip-th .ov{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.45); color:#fff; }
.ip-th .x{ position:absolute; top:calc(4 * var(--pt)); right:calc(4 * var(--pt)); width:calc(22 * var(--pt)); height:calc(22 * var(--pt)); border-radius:50%; background:rgba(0,0,0,.6); display:grid; place-items:center; font-size:calc(12 * var(--pt)); font-weight:700; line-height:1; color:#fff; }
.ip-add{ padding:calc(12 * var(--pt)) calc(16 * var(--pt)); border-radius:calc(16 * var(--pt)); border:1px dashed var(--cb); background:var(--card); text-align:center; font-size:calc(14 * var(--fs)); font-weight:600; color:var(--t3); line-height:1.2; }

/* Modal animationType="slide" transparent: cả nền mờ .55 lẫn sheet cùng trượt lên (engine đặt translateY theo t).
   Đặt trong <x-guide-video.phone>, ngoài .scr-wrap */
.sh-lay{ position:absolute; inset:0; z-index:30; display:flex; flex-direction:column; justify-content:flex-end; background:rgba(0,0,0,.55); visibility:hidden; }
.sh-load{ padding:calc(24 * var(--pt)); display:grid; place-items:center; color:var(--a); }   /* ActivityIndicator amber (size small) */
/* RulePickerModal (app/hieu-hoc/_components/RulePickerModal.tsx) */
.rp{ height:80%; display:flex; flex-direction:column; background:var(--bg); border-radius:calc(20 * var(--pt)) calc(20 * var(--pt)) 0 0; overflow:hidden; }
.rp > .hdl{ flex:0 0 auto; align-self:center; width:calc(40 * var(--pt)); height:calc(4 * var(--pt)); margin-top:calc(12 * var(--pt)); border-radius:999px; background:var(--cb); }
.rp-hd{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:calc(16 * var(--pt)) calc(20 * var(--pt)); }
.rp-hd > b{ font-size:calc(17 * var(--fs)); font-weight:700; line-height:1.2; }
.rp-hd > i{ font-style:normal; font-size:calc(17 * var(--fs)); color:var(--t2); line-height:1.2; }
.rp-search{ flex:0 0 auto; padding:0 calc(20 * var(--pt)) calc(12 * var(--pt)); }
.rp-search > span{ display:block; padding:calc(12 * var(--pt)); border-radius:calc(12 * var(--pt)); background:var(--card); border:1px solid var(--cb); font-size:calc(14 * var(--fs)); color:var(--t3); line-height:1.25; }
.rp .vp > .scroll{ padding-bottom:calc(24 * var(--pt)); }
.rp-grp{ padding:calc(16 * var(--pt)) calc(20 * var(--pt)) calc(8 * var(--pt)); font-size:calc(10 * var(--fs)); font-weight:800; color:var(--t3); letter-spacing:calc(.6 * var(--pt)); line-height:1.2; }
.rp-row{ display:flex; align-items:flex-start; gap:calc(12 * var(--pt)); padding:calc(12 * var(--pt)) calc(20 * var(--pt)); }
.rp-row.on{ background:var(--adim); }
.rp-row > i{ font-style:normal; margin-top:calc(2 * var(--pt)); font-size:calc(20 * var(--pt)); line-height:1.2; }
.rp-row > span{ flex:1; min-width:0; }
.rp-row .lb{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:calc(14 * var(--fs)); font-weight:600; line-height:calc(20 * var(--pt)); }
.rp-row.on .lb{ color:var(--a); }
.rp-row .nt{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t2); line-height:calc(16 * var(--pt)); }
.rp-row .tg{ display:flex; flex-wrap:wrap; align-items:center; gap:calc(8 * var(--pt)); margin-top:calc(6 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }
.rp-row .tg > b{ font-weight:800; color:var(--a); }
.rp-row > em{ font-style:normal; margin-top:calc(2 * var(--pt)); font-size:calc(17 * var(--fs)); color:var(--a); line-height:1.2; }
/* PersonPickerModal (app/components/PersonPickerModal.tsx) */
.pp{ height:75%; display:flex; flex-direction:column; background:var(--bg); border-radius:calc(20 * var(--pt)) calc(20 * var(--pt)) 0 0; overflow:hidden; }
.pp > .hdl{ flex:0 0 auto; align-self:center; width:calc(40 * var(--pt)); height:calc(4 * var(--pt)); margin-top:calc(8 * var(--pt)); border-radius:2px; background:var(--bdl); }
.pp-hd{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:calc(12 * var(--pt)) calc(20 * var(--pt)); border-bottom:.5px solid var(--dv); }
.pp-hd > b{ flex:1; min-width:0; font-size:calc(17 * var(--fs)); font-weight:800; line-height:1.2; }
.pp-hd > i{ font-style:normal; font-size:calc(24 * var(--fs)); color:var(--t3); line-height:1.2; }
.pp-search{ flex:0 0 auto; padding:calc(8 * var(--pt)) calc(20 * var(--pt)); }
.pp-search > span{ display:block; padding:calc(8 * var(--pt)) calc(12 * var(--pt)); border-radius:calc(12 * var(--pt)); background:var(--card); border:1px solid var(--cb); font-size:calc(14 * var(--fs)); color:var(--t3); line-height:1.25; }
.pp-row{ display:flex; align-items:center; gap:calc(12 * var(--pt)); padding:calc(12 * var(--pt)) calc(20 * var(--pt)); border-bottom:.5px solid var(--dv); }
.pp-row.on{ background:#F5A62311; }
.pp-row > .av{ flex:0 0 auto; width:calc(44 * var(--pt)); height:calc(44 * var(--pt)); border-radius:50%; background:var(--card); display:grid; place-items:center; font-style:normal; font-size:calc(17 * var(--fs)); line-height:1; }
.pp-row > span{ flex:1; min-width:0; }
.pp-row b{ display:block; font-size:calc(14 * var(--fs)); font-weight:700; line-height:1.2; }
.pp-row small{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(12 * var(--fs)); color:var(--t3); line-height:1.2; }
.pp-row > em{ font-style:normal; font-size:calc(17 * var(--fs)); color:var(--a); line-height:1.2; }

/* ── Chi tiết thành tích (app/hieu-hoc/records/[id]/index.tsx) ── */
.rd-body{ padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc(40 * var(--pt)); }
.rd-hero{ display:flex; flex-direction:column; align-items:center; gap:calc(8 * var(--pt)); margin-bottom:calc(16 * var(--pt)); }
.rd-hero > i{ font-style:normal; font-size:calc(44 * var(--pt)); line-height:1.2; }
.rd-hero > b{ font-size:calc(17 * var(--fs)); font-weight:800; text-align:center; line-height:calc(24 * var(--pt)); }
.rd-hero .bgs{ display:flex; flex-wrap:wrap; justify-content:center; gap:calc(8 * var(--pt)); margin-top:calc(4 * var(--pt)); }
.rd-hero .bgs > .ds-badge{ align-self:center; }
.rd-hero .pts{ margin-top:calc(4 * var(--pt)); font-size:calc(24 * var(--fs)); font-weight:800; color:var(--a); line-height:1.2; }
.rd-hero .hint{ font-size:calc(10 * var(--fs)); color:var(--t3); text-align:center; line-height:calc(16 * var(--pt)); }
.rd-rej{ display:flex; flex-direction:column; gap:calc(4 * var(--pt)); margin-bottom:calc(16 * var(--pt)); border-color:#F8514955; }
.rd-rej > b{ font-size:calc(10 * var(--fs)); font-weight:800; color:var(--rd); letter-spacing:calc(.6 * var(--pt)); line-height:1.2; }
.rd-rej > p{ font-size:calc(12 * var(--fs)); line-height:calc(19 * var(--pt)); }
.rd-proofs{ display:flex; gap:calc(12 * var(--pt)); padding-bottom:calc(12 * var(--pt)); }
.rd-proof{ --s:120; position:relative; flex:0 0 auto; width:calc(120 * var(--pt)); height:calc(120 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--card); overflow:hidden; }
.rd-desc{ font-size:calc(14 * var(--fs)); color:var(--t2); line-height:calc(21 * var(--pt)); }
.rd-info{ padding-top:calc(4 * var(--pt)); padding-bottom:calc(4 * var(--pt)); }
/* InfoRow (design-system) */
.ds-info{ display:flex; padding:calc(12 * var(--pt)) 0; }
.ds-info:not(:last-child){ border-bottom:1px solid var(--bdl); }
.ds-info > span{ flex:0 0 auto; width:calc(96 * var(--pt)); padding-right:calc(8 * var(--pt)); font-size:calc(14 * var(--fs)); color:var(--t3); line-height:1.2; }
.ds-info > b{ flex:1; min-width:0; font-size:calc(14 * var(--fs)); font-weight:600; line-height:calc(20 * var(--pt)); }

/* ── Ví điểm (app/hieu-hoc/wallet.tsx) — FlatList: header (chip, WalletCard .hh-wal, huy hiệu, số liệu, nút, hạn mức) + sổ điểm ── */
.wl-body{ padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc(32 * var(--pt)); }
/* WalletChips (app/hieu-hoc/_components/WalletChips.tsx) — edgeInset=0, ví của mình đứng đầu */
.wl-chips{ display:flex; gap:calc(8 * var(--pt)); padding:calc(12 * var(--pt)) 0; overflow:hidden; }
.wl-chip{ flex:0 0 auto; display:flex; align-items:center; gap:calc(6 * var(--pt)); max-width:calc(180 * var(--pt)); height:calc(36 * var(--pt)); padding:0 calc(16 * var(--pt)); border-radius:999px; background:var(--card); border:1px solid var(--cb); line-height:1.2; }
.wl-chip > i{ font-style:normal; font-size:calc(12 * var(--fs)); }
.wl-chip > b{ font-size:calc(12 * var(--fs)); font-weight:700; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wl-chip.on{ background:var(--a); border-color:var(--a); }
.wl-chip.on > b{ color:var(--on); }
/* ProgressBar (design-system): nền Colors.cardBg — nằm trong Card cùng màu nên gần như không thấy rãnh */
.wl-pb{ height:calc(6 * var(--pt)); border-radius:999px; background:var(--card); overflow:hidden; }
.wl-pb > i{ display:block; height:100%; border-radius:999px; background:var(--gr); }
/* Thẻ huy hiệu (s.badgeCard) — BadgePill md + badgeProgressLabel + ProgressBar màu bậc */
.wl-badge{ display:flex; flex-direction:column; gap:calc(8 * var(--pt)); margin-bottom:calc(16 * var(--pt)); }
.wl-badge > .rw{ display:flex; align-items:center; gap:calc(8 * var(--pt)); }
.wl-badge > .rw > span:last-child{ flex:1; min-width:0; font-size:calc(10 * var(--fs)); color:var(--t2); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wl-badge > .wl-pb{ margin-top:calc(2 * var(--pt)); }
/* Số liệu (s.countsCard + StatCell) — 3 ô StatCell sát nhau, không gap */
.wl-counts{ display:flex; margin-bottom:calc(16 * var(--pt)); }
.wl-stat{ flex:1; display:flex; flex-direction:column; align-items:center; padding:calc(12 * var(--pt)) 0; border-radius:calc(12 * var(--pt)); background:var(--card); border:1px solid var(--cb); }
.wl-stat > b{ font-size:calc(24 * var(--fs)); font-weight:800; letter-spacing:calc(-.5 * var(--pt)); color:var(--a); line-height:1.2; }   /* Typography.statNumber */
.wl-stat > span{ margin-top:calc(2 * var(--pt)); text-align:center; }
.wl-stat.gr > b{ color:var(--gr); }
/* Nút Xem thành tích / Đổi quà (s.actions) */
.wl-acts{ display:flex; gap:calc(12 * var(--pt)); margin-bottom:calc(8 * var(--pt)); }
.wl-acts > span{ flex:1; display:flex; justify-content:center; padding:calc(12 * var(--pt)) 0; border-radius:999px; background:var(--a); border:1px solid var(--a); font-size:calc(14 * var(--fs)); font-weight:700; color:var(--on); line-height:1.2; }
.wl-acts > span.gh{ background:transparent; color:var(--a); }
/* Hạn mức (s.limitCard + LimitRow) — màu: xanh < 80%, cam ≥ 80%, đỏ ≥ 100% (limitColor) */
.wl-lim{ display:flex; flex-direction:column; gap:calc(16 * var(--pt)); }
.wl-lr{ display:flex; flex-direction:column; gap:calc(6 * var(--pt)); }
.wl-lr > .tp{ display:flex; align-items:center; gap:calc(12 * var(--pt)); }
.wl-lr > .tp > span{ flex:1; min-width:0; font-size:calc(12 * var(--fs)); font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wl-lr > .tp > b{ font-size:calc(12 * var(--fs)); font-weight:700; color:var(--gr); line-height:1.2; }
.wl-lr > small{ font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }
.wl-lim > p{ font-size:calc(10 * var(--fs)); color:var(--t3); line-height:calc(16 * var(--pt)); }
/* "Hiện cả điểm uy tín" (s.repToggle + s.checkbox) */
.wl-rep{ display:flex; align-items:center; gap:calc(8 * var(--pt)); margin-bottom:calc(12 * var(--pt)); }
.wl-rep > i{ flex:0 0 auto; width:calc(20 * var(--pt)); height:calc(20 * var(--pt)); border-radius:calc(6 * var(--pt)); border:1px solid var(--bd); }
.wl-rep > span{ flex:1; min-width:0; font-size:calc(10 * var(--fs)); color:var(--t2); line-height:1.2; }
/* TransactionRow — ItemSeparator hairline cardBorder giữa các dòng */
.wl-tx{ display:flex; align-items:flex-start; gap:calc(12 * var(--pt)); padding:calc(12 * var(--pt)) 0; }
.wl-tx + .wl-tx{ border-top:.5px solid var(--cb); }
.wl-tx > .lf{ flex:1; min-width:0; display:flex; flex-direction:column; }
.wl-tx > .lf > b{ font-size:calc(14 * var(--fs)); font-weight:600; line-height:calc(19 * var(--pt)); }
.wl-tx > .lf > span{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t2); line-height:calc(16 * var(--pt)); }
.wl-tx > .lf > small{ margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }
.wl-tx > .rt{ display:flex; flex-direction:column; align-items:flex-end; }
.wl-tx > .rt > b{ font-size:calc(14 * var(--fs)); font-weight:800; color:var(--t3); line-height:1.2; white-space:nowrap; }   /* transactionColor: 0 → textMuted */
.wl-tx > .rt > b.gr{ color:var(--gr); }
.wl-tx > .rt > b.rd{ color:var(--rd); }
.wl-tx > .rt > small{ margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; white-space:nowrap; }

/* ── Bộ huy hiệu (app/hieu-hoc/badges.tsx) — FlatList: header (Huy hiệu các ví + WalletBadgeCard) + TierCard + footer ──
   Card accentColor (viền = màu bậc + "55") truyền bằng style="border-color:…" vì lấy từ dữ liệu bậc */
.bdg-body{ padding:calc(20 * var(--pt)); }
.bdg-wals{ margin-bottom:calc(12 * var(--pt)); }   /* s.walletsSection */
/* WalletBadgeCard — MemberAvatar 44 + tên (bạn) + "Tích luỹ …" + BadgePill md; dưới: ProgressBar màu bậc + badgeProgressLabel */
.bdg-wal{ margin-bottom:calc(12 * var(--pt)); }
.bdg-wal > .rw{ display:flex; align-items:center; gap:calc(12 * var(--pt)); }
.bdg-wal .ds-av{ --s:44; }
.bdg-wal .nc{ flex:1; min-width:0; }
.bdg-wal .nc > b{ display:block; font-size:calc(14 * var(--fs)); font-weight:700; line-height:calc(20 * var(--pt)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bdg-wal .nc > span{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bdg-wal .pw{ display:flex; flex-direction:column; gap:calc(4 * var(--pt)); margin-top:calc(12 * var(--pt)); padding-top:calc(12 * var(--pt)); border-top:.5px solid var(--cb); }
.bdg-wal .pw > span{ font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }
/* TierCard — ✓ + màu tên khi ví của mình đã đạt (lifetime ≥ min_points); chưa đạt: icon mờ .35, tên textMuted */
.bdg-tier{ margin-bottom:calc(12 * var(--pt)); }
.bdg-tier > .rw{ display:flex; align-items:center; gap:calc(12 * var(--pt)); }
.bdg-tier .ic{ flex:0 0 auto; font-style:normal; font-size:calc(36 * var(--pt)); line-height:1.2; }
.bdg-tier .ic.dim{ opacity:.35; }
.bdg-tier .nc{ flex:1; min-width:0; }
.bdg-tier .nc > b{ display:block; font-size:calc(14 * var(--fs)); font-weight:800; color:var(--t3); line-height:calc(20 * var(--pt)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bdg-tier .nc > span{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }
.bdg-tier .nc > p{ margin-top:calc(4 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t2); line-height:calc(16 * var(--pt)); }
.bdg-tier .ok{ flex:0 0 auto; font-style:normal; font-size:calc(17 * var(--fs)); font-weight:800; color:var(--gr); line-height:1.2; }
.bdg-foot{ margin-top:calc(8 * var(--pt)); padding:0 calc(12 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); text-align:center; line-height:calc(17 * var(--pt)); }

/* ── Sổ Khuyến Học (app/hieu-hoc/leaderboard.tsx) — header phải "🏅 Bộ huy hiệu" + thẻ tổng + LeaderRow ── */
.app-hd .rt > .lnk{ font-size:calc(10 * var(--fs)); font-weight:700; color:var(--a); line-height:1.2; white-space:nowrap; }   /* s.headerLink */
.lb-body{ padding:calc(20 * var(--pt)); }
.lb-sum{ display:flex; flex-direction:column; gap:calc(4 * var(--pt)); margin-bottom:calc(16 * var(--pt)); }
.lb-sum > b{ font-size:calc(14 * var(--fs)); font-weight:800; line-height:calc(21 * var(--pt)); }
.lb-sum > span{ font-size:calc(10 * var(--fs)); color:var(--t3); line-height:calc(17 * var(--pt)); }
.lb-sum > em{ margin-top:calc(4 * var(--pt)); font-style:normal; font-size:calc(12 * var(--fs)); font-weight:700; color:var(--a); line-height:1.2; }
/* LeaderRow — Card hàng ngang; dòng của mình viền amber; hạng 1–3 vòng tròn nền amber */
.lb-row{ display:flex; align-items:center; gap:calc(12 * var(--pt)); margin-bottom:calc(12 * var(--pt)); }
.lb-row.me{ border-color:var(--a); }
.lb-row .rk{ flex:0 0 auto; width:calc(26 * var(--pt)); height:calc(26 * var(--pt)); border-radius:50%; background:var(--card); border:1px solid var(--cb); display:grid; place-items:center; font-style:normal; font-size:calc(10 * var(--fs)); font-weight:800; color:var(--t2); line-height:1; }
.lb-row .rk.top{ background:var(--a); border-color:var(--a); color:var(--on); }
.lb-row .ds-av{ --s:40; }
.lb-row .nc{ flex:1; min-width:0; }
.lb-row .nr{ display:flex; align-items:center; gap:calc(6 * var(--pt)); }
.lb-row .nr > b{ flex-shrink:1; min-width:0; font-size:calc(14 * var(--fs)); font-weight:700; line-height:calc(20 * var(--pt)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-row .nc > span, .lb-row .nc > small{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-row .nc > small{ font-weight:600; }   /* "Tích luỹ …" — màu bậc (badgeColor) truyền bằng style="color:…" */
.lb-row .pc{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; }
.lb-row .pc > b{ font-size:calc(17 * var(--fs)); font-weight:800; color:var(--a); line-height:1.2; }
.lb-row .pc > span{ font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }

/* ── Bổ sung design-system: Badge color=textSecondary · InfoRow valueColor amber · TabFilter emoji · RatingStars ── */
.ds-badge.t2{ color:var(--t2); background:rgba(139,148,158,.133); }
.ds-info > b.am{ color:var(--a); }
.tf-tab > i{ font-style:normal; font-size:calc(14 * var(--fs)); line-height:1.2; }   /* s.emoji — FontSize.md */
.rt-stars{ display:inline-flex; gap:calc(2 * var(--pt)); color:var(--a); }        /* RatingStars (components/marketplace/meta.tsx): Ionicons star / star-outline amber */
.wl-chips.xl{ flex:0 0 auto; padding-left:calc(20 * var(--pt)); padding-right:calc(20 * var(--pt)); }   /* WalletChips edgeInset mặc định Spacing.xl */

/* ── Kho quà (app/hieu-hoc/gifts/index.tsx) — WalletChips · walletBar · toolRow · TabFilter · grid GiftCard 2 cột ── */
.gs-wal{ flex:0 0 auto; display:flex; align-items:center; gap:calc(12 * var(--pt)); margin:calc(12 * var(--pt)) calc(20 * var(--pt)) 0; padding:calc(12 * var(--pt)) calc(16 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--card); border:1px solid var(--cb); }
.gs-wal > div{ flex:1; min-width:0; }
.gs-wal small{ display:block; font-size:calc(10 * var(--fs)); color:var(--t2); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-wal b{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(17 * var(--fs)); font-weight:800; color:var(--a); line-height:1.2; }
.gs-wal > a{ flex:0 0 auto; font-size:calc(12 * var(--fs)); font-weight:700; color:var(--a); line-height:1.2; }
.gs-tool{ flex:0 0 auto; display:flex; align-items:center; gap:calc(8 * var(--pt)); margin:calc(12 * var(--pt)) calc(20 * var(--pt)) 0; }
.gs-search{ flex:1; min-width:0; display:flex; align-items:center; gap:calc(8 * var(--pt)); height:calc(44 * var(--pt)); padding:0 calc(12 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--card); border:1px solid var(--cb); font-size:calc(14 * var(--fs)); color:var(--t3); line-height:1.2; }
.gs-afford{ flex:0 0 auto; display:flex; align-items:center; height:calc(44 * var(--pt)); padding:0 calc(16 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--card); border:1px solid var(--cb); font-size:calc(12 * var(--fs)); font-weight:700; color:var(--t2); line-height:1.2; }
.gs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:calc(12 * var(--pt)); padding:calc(20 * var(--pt)); }   /* s.content + columnWrapperStyle gap Spacing.md, card cùng hàng giãn bằng nhau */
/* GiftCard (app/hieu-hoc/_components/GiftCard.tsx) — Card padding 0; tên / giá / meta chốt height (lineHeight = fontSize × 1.45) */
.gs-card{ padding:0; overflow:hidden; }
.gs-card .im{ position:relative; aspect-ratio:4/3; display:grid; place-items:center; background:#2A1B10; font-size:calc(40 * var(--pt)); line-height:1; }   /* bgHover + 🎁 fontSize 40 khi chưa có ảnh */
.gs-card .ft{ position:absolute; top:calc(8 * var(--pt)); left:calc(8 * var(--pt)); padding:calc(2 * var(--pt)) calc(8 * var(--pt)); border-radius:999px; background:var(--a); font-size:calc(10 * var(--fs)); font-weight:800; color:var(--on); line-height:1.2; }   /* Nổi bật */
.gs-card .bd{ display:flex; flex-direction:column; gap:calc(4 * var(--pt)); padding:calc(12 * var(--pt)); }
.gs-card .nm{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; height:calc(44 * var(--pt)); font-size:calc(14 * var(--fs)); font-weight:700; line-height:calc(22 * var(--pt)); }
.gs-card .pr{ height:calc(22 * var(--pt)); font-size:calc(14 * var(--fs)); font-weight:800; color:var(--a); line-height:calc(22 * var(--pt)); white-space:nowrap; }
.gs-card .rt{ display:flex; align-items:center; gap:calc(4 * var(--pt)); }
.gs-card .rt > small{ font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }
.gs-card .mt{ height:calc(17 * var(--pt)); font-size:calc(12 * var(--fs)); color:var(--t3); line-height:calc(17 * var(--pt)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-card .mt.ok{ color:var(--gr); }   /* Đủ điểm đổi — greenLight */

/* ── Chi tiết quà (app/hieu-hoc/gifts/[id].tsx) — ScrollView + bottomBar tĩnh trong KeyboardAvoidingView ── */
.gd-body{ padding:calc(16 * var(--pt)) calc(20 * var(--pt)) 0; }
.gd-noimg{ height:calc(140 * var(--pt)); margin-bottom:calc(16 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--card); border:1px solid var(--cb); display:grid; place-items:center; font-size:calc(44 * var(--pt)); line-height:1; }
.gd-head{ display:flex; flex-direction:column; gap:calc(8 * var(--pt)); }
.gd-head > b{ font-size:calc(24 * var(--fs)); font-weight:800; line-height:calc(26 * var(--pt)); }
.gd-head .bgs{ display:flex; flex-wrap:wrap; gap:calc(8 * var(--pt)); }
.gd-head .pr{ font-size:calc(26 * var(--pt)); font-weight:800; color:var(--a); line-height:1.2; }
.gd-head > p{ font-size:calc(12 * var(--fs)); color:var(--t2); line-height:calc(20 * var(--pt)); }
.gd-mb{ margin-bottom:calc(16 * var(--pt)); }   /* headCard / infoCard / Card đánh giá: marginBottom Spacing.lg */
.gd-rh{ display:flex; align-items:center; gap:calc(8 * var(--pt)); }   /* ratingHead */
.gd-rh > b{ font-size:calc(14 * var(--fs)); font-weight:700; line-height:1.2; }
.gd-nrv{ font-size:calc(14 * var(--fs)); color:var(--t3); line-height:1.2; }   /* Chưa có đánh giá */
.gd-rv{ display:flex; flex-direction:column; gap:calc(4 * var(--pt)); padding-top:calc(12 * var(--pt)); }
.gd-rv + .gd-rv{ margin-top:calc(12 * var(--pt)); border-top:1px solid var(--cb); }
.gd-rv > .hd{ display:flex; align-items:center; justify-content:space-between; gap:calc(8 * var(--pt)); }
.gd-rv > .hd > b{ flex:1; min-width:0; font-size:calc(14 * var(--fs)); font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gd-rv > p{ font-size:calc(14 * var(--fs)); color:var(--t2); line-height:calc(20 * var(--pt)); }
.gd-rv > small{ font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }
.gd-f{ display:flex; flex-direction:column; gap:calc(8 * var(--pt)); margin-bottom:calc(16 * var(--pt)); }
.gd-lbl{ font-size:calc(10 * var(--fs)); font-weight:700; color:var(--t3); letter-spacing:calc(.5 * var(--pt)); line-height:1.2; }
.gd-in{ padding:calc(12 * var(--pt)) calc(16 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--card); border:1px solid var(--cb); font-size:calc(14 * var(--fs)); color:#fff; line-height:1.3; }
.gd-in.ta{ min-height:calc(80 * var(--pt)); }   /* multiline minHeight 80 */
.gd-in .plh{ color:var(--t3); }
.gd-qty{ display:flex; align-items:center; gap:calc(12 * var(--pt)); }
.gd-qty > .bt{ flex:0 0 auto; width:calc(40 * var(--pt)); height:calc(40 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--card); border:1px solid var(--cb); display:grid; place-items:center; font-size:calc(17 * var(--fs)); font-weight:800; line-height:1; }
.gd-qty > .bt.off{ opacity:.4; }
.gd-qty > b{ min-width:calc(28 * var(--pt)); text-align:center; font-size:calc(17 * var(--fs)); font-weight:800; line-height:1.2; }
.gd-qty > .tt{ margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; }
.gd-qty > .tt > b{ font-size:calc(14 * var(--fs)); font-weight:800; color:var(--a); line-height:1.2; }
.gd-qty > .tt > small{ margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }
.gd-hint{ font-size:calc(10 * var(--fs)); color:var(--t3); line-height:calc(17 * var(--pt)); }
.gd-bar{ flex:0 0 auto; display:flex; flex-direction:column; gap:calc(8 * var(--pt)); padding:calc(12 * var(--pt)) calc(20 * var(--pt)) calc(50 * var(--pt)); background:var(--bg); border-top:1px solid var(--bd); }   /* paddingBottom Spacing.lg + insets.bottom 34; nút = .rec-sub */
/* Card gian hàng — chỉ có khi quà gắn tem từ shop (gift.shop): shopRow gap sm · storefront-outline 20 amber · SecondaryButton md marginTop sm · caption xs textMuted lineHeight 16 */
.gd-shop .rw{ display:flex; align-items:center; gap:calc(8 * var(--pt)); color:var(--a); }
.gd-shop .rw > b{ flex:1; min-width:0; font-size:calc(14 * var(--fs)); font-weight:700; color:#fff; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gd-shop > .ds-sbtn{ margin-top:calc(8 * var(--pt)); }
.gd-shop > small{ display:block; margin-top:calc(8 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:calc(16 * var(--pt)); }

/* ── Đơn đổi quà (app/hieu-hoc/orders/[id].tsx) — headCard · Tiến trình · Người nhận · Huỷ đơn ── */
.od-body{ padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc(52 * var(--pt)); }   /* s.scroll padding Spacing.xl + spacer Spacing.xxxl */
.od-head{ display:flex; flex-direction:column; gap:calc(12 * var(--pt)); }
.od-head > .rw{ display:flex; gap:calc(12 * var(--pt)); }
.od-th{ flex:0 0 auto; width:calc(76 * var(--pt)); height:calc(76 * var(--pt)); border-radius:calc(14 * var(--pt)); background:#2A1B10; display:grid; place-items:center; font-size:calc(32 * var(--pt)); line-height:1; }   /* thumbPlaceholder bgHover + 🎁 */
.od-head .nc{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:calc(4 * var(--pt)); }
.od-head .nc > b{ font-size:calc(17 * var(--fs)); font-weight:800; line-height:calc(22 * var(--pt)); }
.od-pts, .od-link{ font-size:calc(12 * var(--fs)); font-weight:700; color:var(--a); line-height:1.2; }
.od-tl{ display:flex; flex-direction:column; gap:calc(16 * var(--pt)); }
.od-st{ display:flex; align-items:flex-start; gap:calc(12 * var(--pt)); }
.od-st > i{ flex:0 0 auto; width:calc(10 * var(--pt)); height:calc(10 * var(--pt)); margin-top:calc(5 * var(--pt)); border-radius:50%; background:var(--dv); }   /* dotOff cardDivider */
.od-st.on > i{ background:var(--sc, var(--a)); }   /* done: giftOrderStatusColor(status) — đặt .sc-* lên .od-tl, mặc định pending = amber */
.od-st > span{ flex:1; min-width:0; }
.od-st b{ display:block; font-size:calc(12 * var(--fs)); font-weight:400; color:var(--t3); line-height:1.2; }
.od-st.on b{ font-weight:700; color:#fff; }
.od-st small{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }
.od-cancel{ margin-top:calc(8 * var(--pt)); padding:calc(16 * var(--pt)) 0; border-radius:999px; border:1px solid var(--rd); text-align:center; font-size:calc(14 * var(--fs)); font-weight:800; color:var(--rd); line-height:1.2; }
.od-hint{ margin-top:calc(8 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:calc(17 * var(--pt)); }
/* Màu trạng thái giftOrderStatusColor (app/hieu-hoc/_components/studyUi.ts) → --sc: chấm tiến trình đã qua, viền + nhãn thẻ ghi chú */
.sc-am{ --sc:var(--a); } .sc-pu{ --sc:var(--pu); } .sc-gr{ --sc:var(--gr); } .sc-gn{ --sc:#2EA043; } .sc-t3{ --sc:var(--t3); }
.ds-badge.t3{ color:var(--t3); background:rgba(110,118,129,.133); }   /* Badge color=textMuted (Đã huỷ) */
.ds-badge.gn{ color:#2EA043; background:rgba(46,160,67,.133); }       /* Badge color=green (Hoàn tất) */
.od-refund{ font-size:calc(12 * var(--fs)); font-weight:600; color:var(--gr); line-height:1.2; }   /* s.refunded — "✓ Đã hoàn … điểm về ví." */
.od-note{ display:flex; flex-direction:column; gap:calc(4 * var(--pt)); border-color:var(--sc); }   /* s.noteCard (admin_note) — borderColor statusColor */
.od-note > small{ font-size:calc(10 * var(--fs)); font-weight:800; letter-spacing:calc(.4 * var(--pt)); color:var(--sc); line-height:1.2; }
.od-note > p{ font-size:calc(14 * var(--fs)); color:var(--t2); line-height:calc(21 * var(--pt)); }
.od-body > .ds-pbtn{ margin-top:calc(8 * var(--pt)); }   /* reviewBtn / confirmBtn: marginTop Spacing.sm */

/* ── Mã nhận quà (app/hieu-hoc/_components/RedeemCodeCard.tsx) — Card căn giữa: QR · mã + copy · người nhận · meta · Cách dùng mã · hint.
      .used = state delivered (QR mờ, mã gạch, ẩn copy / hướng dẫn / hint) ── */
.rc{ display:flex; flex-direction:column; align-items:center; gap:calc(8 * var(--pt)); }
.rc-qr{ padding:calc(12 * var(--pt)); background:#fff; border-radius:calc(14 * var(--pt)); line-height:0; }   /* qrWrap — QRCode size 180, nền trắng mực đen */
.rc-qr > svg{ display:block; width:calc(180 * var(--pt)); height:calc(180 * var(--pt)); }
.rc-code{ display:flex; align-items:center; gap:calc(8 * var(--pt)); margin-top:calc(4 * var(--pt)); }
.rc-code > b{ font-size:calc(24 * var(--fs)); font-weight:800; letter-spacing:calc(3 * var(--pt)); color:var(--a); line-height:1.2; }
.rc-code > span{ display:grid; padding:calc(4 * var(--pt)); color:var(--a); }   /* copyBtn — Ionicons copy-outline 18 amber */
.rc-holder{ font-size:calc(12 * var(--fs)); color:var(--t2); line-height:1.2; }
.rc-holder > b{ font-weight:800; color:#fff; }
.rc-meta{ font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }
.rc-ins{ align-self:stretch; display:flex; flex-direction:column; gap:calc(4 * var(--pt)); padding:calc(12 * var(--pt)); border-radius:calc(12 * var(--pt)); background:#2A1B10; }   /* instructionBox — bgHover, Radius.md */
.rc-ins > small{ font-size:calc(10 * var(--fs)); font-weight:800; letter-spacing:calc(.4 * var(--pt)); color:var(--a); line-height:1.2; }
.rc-ins > p{ font-size:calc(12 * var(--fs)); color:var(--t2); line-height:calc(20 * var(--pt)); }
.rc-hint{ font-size:calc(10 * var(--fs)); color:var(--t2); text-align:center; line-height:calc(16 * var(--pt)); }
.rc.used .rc-qr{ opacity:.35; }
.rc.used .rc-code > b{ color:var(--t3); text-decoration:line-through; }
.rc.used .rc-code > span, .rc.used .rc-ins, .rc.used .rc-hint{ display:none; }

/* ── Đánh giá quà (app/hieu-hoc/orders/review.tsx) — ScrollView padding xl · gap sm · paddingBottom xxxl ── */
.rv-body{ display:flex; flex-direction:column; gap:calc(8 * var(--pt)); padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc(32 * var(--pt)); }
.rv-lbl{ margin-top:calc(8 * var(--pt)); font-size:calc(12 * var(--fs)); font-weight:700; color:var(--t3); letter-spacing:calc(.5 * var(--pt)); line-height:1.2; }
.rv-stars{ display:flex; justify-content:center; gap:calc(8 * var(--pt)); padding:calc(12 * var(--pt)) 0; color:var(--a); }   /* Ionicons star / star-outline 40 amber */
.rv-in{ min-height:calc(120 * var(--pt)); padding:calc(12 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--card); border:1px solid var(--cb); font-size:calc(14 * var(--fs)); color:#fff; line-height:1.3; }
.rv-in .plh{ color:var(--t3); }
.rv-in.has .plh{ display:none; }
.rv-in:not(.focus) .caret{ display:none; }
.rv-body > .ds-pbtn{ margin-top:calc(16 * var(--pt)); }   /* PrimaryButton marginTop Spacing.lg (cộng gap sm) */
.ds-pbtn.dis{ opacity:.5; }   /* PrimaryButton disabled */

/* PrimaryButton (design-system): minHeight lg 52 / md 44 · fontSize 16 / 14 (số thô, không fs()) · Radius.lg · paddingHorizontal xl */
.ds-pbtn{ display:flex; align-items:center; justify-content:center; min-height:calc(52 * var(--pt)); padding:0 calc(20 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--a); font-size:calc(16 * var(--pt)); font-weight:700; color:var(--on); line-height:1.2; }
.ds-pbtn.md{ min-height:calc(44 * var(--pt)); font-size:calc(14 * var(--pt)); }
.ds-empty > .ds-pbtn{ margin-top:calc(20 * var(--pt)); }   /* EmptyState action: marginTop Spacing.xl */
/* SecondaryButton (design-system): minHeight md 44 · fontSize 14 (số thô) · Radius.lg · nền cardBg viền border · chữ textSecondary 600 · iconName: Ionicons size fontSize+2 đứng trước label, gap 6 */
.ds-sbtn{ display:flex; align-items:center; justify-content:center; gap:calc(6 * var(--pt)); min-height:calc(44 * var(--pt)); padding:0 calc(20 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--card); border:1px solid var(--bd); font-size:calc(14 * var(--pt)); font-weight:600; color:var(--t2); line-height:1.2; }

/* ── Trưởng họ: Chờ xác nhận / xác nhận · từ chối · thu hồi thành tích ── */
/* Lối tắt "Chờ xác nhận" (app/hieu-hoc/index.tsx s.shortcutBadge): chấm đỏ góc trên phải ô icon, chỉ hiện khi badge > 0 */
.hh-sc .ib{ position:relative; }
.hh-sc .ib > em{ position:absolute; top:calc(-4 * var(--pt)); right:calc(-4 * var(--pt)); min-width:calc(18 * var(--pt)); height:calc(18 * var(--pt)); padding:0 calc(4 * var(--pt)); display:grid; place-items:center; border-radius:999px; background:var(--rd); font-style:normal; font-size:calc(10 * var(--fs)); font-weight:800; color:#fff; line-height:1; }
/* RecordCard footer (app/hieu-hoc/records/pending.tsx s.actions): [Xác nhận | Từ chối] chia đôi; đang gửi → ActivityIndicator amber */
.hh-rec .ft{ display:flex; gap:calc(12 * var(--pt)); margin-top:calc(12 * var(--pt)); padding-top:calc(12 * var(--pt)); border-top:1px solid var(--dv); }
.hh-rec .ft > span{ flex:1; min-width:0; }
.hh-rec .ft > .spin{ display:none; flex:0 0 auto; width:calc(20 * var(--pt)); height:calc(20 * var(--pt)); margin:calc(12 * var(--pt)) auto; color:var(--a); }
.hh-rec .ft.busy > .spin{ display:block; }
.hh-rec .ft.busy > :not(.spin){ display:none; }
/* Dòng tóm tắt đầu hàng chờ (pending.tsx s.summary): FontSize.xs · textMuted · lineHeight 17 · marginBottom Spacing.lg */
.pd-sum{ margin-bottom:calc(16 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:calc(17 * var(--pt)); }
/* Chi tiết thành tích: điểm màu pointStatusColor (official xanh · revoked đỏ) */
.rd-hero .pts.gr{ color:var(--gr); }
.rd-hero .pts.rd{ color:var(--rd); }
/* actionBar (app/hieu-hoc/records/[id]/index.tsx) — chỉ khi trưởng họ xem bài đang chờ: [Từ chối flex 1 | Xác nhận flex 2] */
.rd-bar{ flex:0 0 auto; display:flex; gap:calc(12 * var(--pt)); padding:calc(12 * var(--pt)) calc(20 * var(--pt)) calc(32 * var(--pt)); background:var(--bg); border-top:1px solid var(--bd); }
.rd-bar > span{ flex:1; display:flex; align-items:center; justify-content:center; padding:calc(16 * var(--pt)) 0; border-radius:999px; border:1px solid var(--rd); font-size:calc(14 * var(--fs)); font-weight:800; color:var(--rd); line-height:1.2; }
.rd-bar > span.ok{ flex:2; border-color:var(--a); background:var(--a); color:var(--on); }
.rd-bar > span .spin{ display:none; }
.rd-bar.busy > span{ opacity:.5; }
.rd-bar.busy > span.ok .lbl{ display:none; }
.rd-bar.busy > span.ok .spin{ display:inline-block; }
/* ReasonModal (app/hieu-hoc/_components/ReasonModal.tsx) — Modal fade, backdrop .55, card giữa màn. Đặt trong <x-guide-video.phone>, ngoài .scr-wrap */
.rsn{ position:absolute; inset:0; z-index:30; display:flex; flex-direction:column; justify-content:center; padding:calc(20 * var(--pt)); background:rgba(0,0,0,.55); opacity:0; visibility:hidden; }
.rsn-card{ display:flex; flex-direction:column; gap:calc(12 * var(--pt)); padding:calc(20 * var(--pt)); border-radius:calc(20 * var(--pt)); background:var(--card); border:1px solid var(--cb); }
.rsn-card > b{ font-size:calc(17 * var(--fs)); font-weight:800; line-height:1.2; }
.rsn-card > p{ font-size:calc(12 * var(--fs)); color:var(--t2); line-height:calc(18 * var(--pt)); }
.rsn-in{ min-height:calc(90 * var(--pt)); padding:calc(12 * var(--pt)) calc(16 * var(--pt)); border-radius:calc(16 * var(--pt)); background:var(--bg); border:1px solid var(--cb); font-size:calc(14 * var(--fs)); color:#fff; line-height:1.3; }
.rsn-in .plh{ color:var(--t3); }
.rsn-in.has .plh{ display:none; }
.rsn-in:not(.has) .caret{ margin:0 -1.5px 0 0; }   /* iOS: con trỏ đè lên đầu placeholder, không đẩy chữ */
.rsn-acts{ display:flex; gap:calc(12 * var(--pt)); margin-top:calc(4 * var(--pt)); }
.rsn-acts > span{ flex:1; display:flex; align-items:center; justify-content:center; padding:calc(16 * var(--pt)) 0; border-radius:999px; font-size:calc(14 * var(--fs)); line-height:1.2; }
.rsn-acts > .cc{ border:1px solid var(--cb); font-weight:700; color:var(--t2); }
.rsn-acts > .ok{ background:var(--rd); font-weight:800; color:#fff; }   /* destructive: nền red, chữ textPrimary */
.rsn-acts > .ok.dis{ opacity:.45; }                                     /* !canSubmit: chưa gõ lý do hoặc đang gửi */
.rsn-acts > .ok .spin{ display:none; }
.rsn-acts > .ok.busy .lbl{ display:none; }
.rsn-acts > .ok.busy .spin{ display:inline-block; }

/* ── Mall Keytech (app/marketplace/mall/index.tsx) — icon giỏ ở header · headerBlock (WalletChips + WalletCard compact) · TabFilter · grid GiftCard ── */
.ml-cart{ position:relative; display:grid; place-items:center; padding:calc(4 * var(--pt)); color:#fff; }   /* s.cartBtn — Ionicons cart-outline 22 textPrimary */
.ml-cart > em{ position:absolute; top:calc(-2 * var(--pt)); right:calc(-4 * var(--pt)); min-width:calc(18 * var(--pt)); height:calc(18 * var(--pt)); padding:0 calc(3 * var(--pt)); display:grid; place-items:center; border-radius:calc(9 * var(--pt)); background:var(--rd); font-style:normal; font-size:calc(10 * var(--pt)); font-weight:800; line-height:1; color:#fff; }   /* s.cartBadge — tổng số lượng trong giỏ, chỉ hiện khi > 0 */
.ml-hb{ flex:0 0 auto; margin-top:calc(12 * var(--pt)); }                       /* s.headerBlock */
.ml-wc{ margin:calc(8 * var(--pt)) calc(20 * var(--pt)) 0; }                   /* s.walletCardWrap — bên trong là WalletCard .hh-wal */
/* GiftCard có onAddToCart: priceRow (giá + nút "+ Giỏ") */
.gs-card .prw{ display:flex; align-items:center; justify-content:space-between; gap:calc(8 * var(--pt)); }
.gs-card .prw > .pr{ flex-shrink:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.gs-card .pr.lg{ font-size:calc(12 * var(--fs)); }   /* s.priceLong — có nút "+ Giỏ": giá > 10 ký tự; không nút: > 13 ký tự */
.gs-card .add{ flex:0 0 auto; padding:calc(3 * var(--pt)) calc(8 * var(--pt)); border-radius:999px; background:var(--a); font-size:calc(10 * var(--fs)); font-weight:800; color:var(--on); line-height:1.2; white-space:nowrap; }

/* ── Giỏ quà (app/marketplace/mall/cart.tsx) — ScrollView (chip ví · Quà trong giỏ · tổng · Thông tin nhận quà) + footer tĩnh .gd-bar ── */
.ct-body{ padding:calc(16 * var(--pt)) calc(20 * var(--pt)) calc(20 * var(--pt)); }   /* s.scroll */
.ct-items{ display:flex; flex-direction:column; gap:calc(12 * var(--pt)); margin-bottom:calc(16 * var(--pt)); }
.ct-row{ display:flex; gap:calc(12 * var(--pt)); padding:calc(12 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--card); border:1px solid var(--cb); }   /* s.itemRow */
.ct-th{ flex:0 0 auto; width:calc(64 * var(--pt)); height:calc(64 * var(--pt)); border-radius:calc(12 * var(--pt)); background:#2A1B10; display:grid; place-items:center; font-size:calc(28 * var(--pt)); line-height:1; }   /* thumbPlaceholder bgHover + 🎁 28 */
.ct-row > .bd{ flex:1; min-width:0; display:flex; flex-direction:column; gap:calc(4 * var(--pt)); }
.ct-row .nm{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:calc(14 * var(--fs)); font-weight:700; line-height:calc(20 * var(--pt)); }
.ct-row .pr{ font-size:calc(12 * var(--fs)); font-weight:800; color:var(--a); line-height:1.2; }
.ct-qty{ display:flex; align-items:center; gap:calc(8 * var(--pt)); margin-top:calc(2 * var(--pt)); }
.ct-qty > .bt{ flex:0 0 auto; width:calc(32 * var(--pt)); height:calc(32 * var(--pt)); border-radius:calc(12 * var(--pt)); background:var(--bg); border:1px solid var(--cb); display:grid; place-items:center; font-size:calc(14 * var(--fs)); font-weight:800; line-height:1; }
.ct-qty > .bt.off{ opacity:.4; }   /* − khi số lượng ≤ 1 · + khi chạm trần maxQtyFor: min(20, lượt còn lại, tồn kho) */
.ct-qty > b{ min-width:calc(22 * var(--pt)); text-align:center; font-size:calc(14 * var(--fs)); font-weight:800; line-height:1.2; }
.ct-qty > .rm{ margin-left:auto; padding:calc(4 * var(--pt)) calc(8 * var(--pt)); font-size:calc(12 * var(--fs)); font-weight:700; color:var(--rd); line-height:1.2; }   /* spacer flex:1 + removeBtn "Xoá" */
.ct-tot{ display:flex; flex-direction:column; gap:calc(4 * var(--pt)); margin-bottom:calc(16 * var(--pt)); padding:calc(16 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--card); border:1px solid var(--cb); }   /* s.totalCard */
.ct-tot > small{ font-size:calc(10 * var(--fs)); color:var(--t2); line-height:1.2; }
.ct-tot > .rw{ display:flex; align-items:center; justify-content:space-between; }
.ct-tot > .rw > b{ font-size:calc(17 * var(--fs)); font-weight:800; color:var(--a); line-height:1.2; }
.ct-tot > .rw > span{ font-size:calc(12 * var(--fs)); font-weight:700; color:var(--t2); line-height:1.2; }
.ct-tot > .rw > span.rd{ color:var(--rd); }   /* số dư < tổng điểm */
.ct-tot > em{ font-style:normal; font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }   /* "Còn lại … sau khi đổi" — chỉ hiện khi ≥ 0 */
.ct-body > .gd-hint{ margin-bottom:calc(12 * var(--pt)); }
.ct-blk{ font-size:calc(10 * var(--fs)); color:var(--t3); text-align:center; line-height:1.2; }   /* s.blocker — dòng lý do nút bị khoá */

/* ── Đơn của tôi (app/hieu-hoc/orders/index.tsx) — TabFilter trạng thái + FlatList GiftOrderCard ── */
.oc-list{ display:flex; flex-direction:column; gap:calc(12 * var(--pt)); padding:calc(20 * var(--pt)); }
/* GiftOrderCard (app/hieu-hoc/_components/GiftOrderCard.tsx) — Card padding md */
.oc{ display:flex; gap:calc(12 * var(--pt)); padding:calc(12 * var(--pt)); }
.oc-th{ flex:0 0 auto; width:calc(64 * var(--pt)); height:calc(64 * var(--pt)); border-radius:calc(14 * var(--pt)); background:#2A1B10; display:grid; place-items:center; font-size:calc(28 * var(--pt)); line-height:1; }
.oc > .bd{ flex:1; min-width:0; display:flex; flex-direction:column; gap:calc(4 * var(--pt)); }
.oc .hd{ display:flex; align-items:flex-start; gap:calc(8 * var(--pt)); }
.oc .hd > b{ flex:1; min-width:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:calc(14 * var(--fs)); font-weight:700; line-height:calc(20 * var(--pt)); }
.oc .hd > .ds-badge{ flex:0 0 auto; }
.oc > .bd > small{ font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oc .ft{ display:flex; align-items:baseline; gap:calc(8 * var(--pt)); margin-top:calc(2 * var(--pt)); }
.oc .ft > b{ flex:1; min-width:0; font-size:calc(12 * var(--fs)); font-weight:800; color:var(--a); line-height:1.2; }
.oc .ft > span{ font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }

/* ── Quản lý gian hàng (app/marketplace/my-shop/index.tsx) — ScrollView padding xl · gap md · paddingBottom 96 (chừa FAB ☰) ── */
.sh-body{ display:flex; flex-direction:column; gap:calc(12 * var(--pt)); padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc(96 * var(--pt)); }
.sh-head{ display:flex; flex-direction:column; gap:calc(12 * var(--pt)); }   /* Card headCard gap md */
.sh-head > .rw{ display:flex; align-items:center; gap:calc(12 * var(--pt)); }
.sh-av{ flex:0 0 auto; width:calc(56 * var(--pt)); height:calc(56 * var(--pt)); border-radius:calc(12 * var(--pt)); background:#2A1B10; display:grid; place-items:center; color:var(--a); }   /* chưa có ảnh: bgHover + Ionicons storefront 24 amber */
.sh-head .nc{ flex:1; min-width:0; }
.sh-head .nc > b{ display:block; margin-bottom:calc(4 * var(--pt)); font-size:calc(17 * var(--fs)); font-weight:800; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sh-ch{ display:flex; align-items:center; gap:calc(8 * var(--pt)); padding-top:calc(12 * var(--pt)); border-top:1px solid var(--bdl); }   /* channelRow */
.sh-ch > span:first-child{ font-size:calc(14 * var(--fs)); color:var(--t3); line-height:1.2; }
/* MarketplaceStatusBadge (components/marketplace/meta.tsx): approved nền green #2EA043 + "22", chữ greenLight 11/700 */
.sh-st{ padding:calc(4 * var(--pt)) calc(10 * var(--pt)); border-radius:999px; background:rgba(46,160,67,.133); font-size:calc(11 * var(--pt)); font-weight:700; color:var(--gr); line-height:1.2; }
.sh-stats{ display:flex; gap:calc(12 * var(--pt)); }   /* statRow — 3 StatCell (.wl-stat) */

/* ── Sản phẩm & dịch vụ (app/marketplace/my-shop/product/index.tsx) — FlatList padding xl · gap md + FAB "+" phải + FAB ☰ trái ── */
.mp-list{ display:flex; flex-direction:column; gap:calc(12 * var(--pt)); padding:calc(20 * var(--pt)); }
.mp-card{ display:flex; gap:calc(12 * var(--pt)); padding:calc(12 * var(--pt)); }   /* Card padding md · row gap md */
.mp-card.prs{ opacity:.7; }                                                         /* TouchableOpacity activeOpacity 0.7 lúc đang giữ */
.mp-th{ flex:0 0 auto; width:calc(64 * var(--pt)); height:calc(64 * var(--pt)); border-radius:calc(12 * var(--pt)); background:#2A1B10; display:grid; place-items:center; color:var(--t3); }   /* thumbEmpty: cube-outline 22 textMuted */
.mp-card > .bd{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:calc(4 * var(--pt)); }
.mp-card .nm{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:calc(14 * var(--fs)); font-weight:600; line-height:1.3; }
.mp-card .bgs{ display:flex; gap:calc(4 * var(--pt)); overflow:hidden; }          /* badges: row gap xs, không wrap */
.mp-card .pr{ font-size:calc(14 * var(--fs)); font-weight:700; color:var(--a); line-height:1.2; }
.mp-card .sk{ font-size:calc(12 * var(--fs)); color:var(--t2); line-height:1.2; }
.mp-fab{ position:absolute; z-index:4; right:calc(20 * var(--pt)); bottom:calc(24 * var(--pt)); width:calc(56 * var(--pt)); height:calc(56 * var(--pt)); display:grid; place-items:center; border-radius:50%; background:var(--a); box-shadow:0 calc(4 * var(--pt)) calc(8 * var(--pt)) rgba(245,166,35,.4); font-size:calc(20 * var(--fs)); font-weight:600; color:var(--on); line-height:calc(24 * var(--pt)); }
/* GiftTagModal — Modal fade: backdrop rgba(0,0,0,.55) căn giữa padding xl; card nền bg · Radius.xxl · padding xl · gap sm */
.gt-dim{ position:absolute; inset:0; z-index:30; display:flex; flex-direction:column; justify-content:center; padding:calc(20 * var(--pt)); background:rgba(0,0,0,.55); opacity:0; visibility:hidden; }
.gt-card{ display:flex; flex-direction:column; gap:calc(8 * var(--pt)); padding:calc(20 * var(--pt)); border-radius:calc(20 * var(--pt)); background:var(--bg); border:1px solid var(--cb); }
.gt-card > b{ font-size:calc(17 * var(--fs)); font-weight:800; line-height:1.2; }
.gt-card > small{ font-size:calc(12 * var(--fs)); color:var(--t3); line-height:1.2; }
.gt-in{ display:flex; align-items:center; margin-top:calc(4 * var(--pt)); padding:calc(12 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--card); border:1px solid var(--cb); font-size:calc(14 * var(--fs)); color:#fff; line-height:1.3; white-space:nowrap; overflow:hidden; }   /* TextInput không có style focus riêng */
.gt-in.ta{ align-items:flex-start; min-height:calc(80 * var(--pt)); white-space:normal; }   /* multiline minHeight 80 */
.gt-in .plh{ color:var(--t3); }
.gt-in.has .plh{ display:none; }
.gt-in:not(.focus) .caret{ display:none; }
.gt-acts{ display:flex; align-items:center; gap:calc(12 * var(--pt)); margin-top:calc(12 * var(--pt)); }
.gt-acts > span:first-child{ padding:calc(12 * var(--pt)) calc(16 * var(--pt)); font-size:calc(14 * var(--fs)); font-weight:700; color:var(--t2); line-height:1.2; }   /* nút Huỷ */
.gt-acts > .ds-pbtn{ flex:1; }

/* ── Avatar (design-system — app/components/ui/index.tsx): tròn nền amber, chữ textOnAmber · fontSize size×0.4 · 800.
      KHÁC .ds-av (MemberAvatar viền + nền card). Cỡ = --s (pt), mặc định 44 ── */
.ui-av{ --s:44; flex:0 0 auto; width:calc(var(--s) * var(--pt)); height:calc(var(--s) * var(--pt)); border-radius:50%; background:var(--a); display:grid; place-items:center; font-size:calc(var(--s) * .4 * var(--pt)); font-weight:800; color:var(--on); line-height:1; }
.wl-stat.pu > b{ color:var(--pu); }   /* StatCell color=purpleLight */

/* ── Bé ngoan mầm non — Thành tích của bé (app/hieu-hoc/preschool/child/[personId].tsx) — ScrollView padding xl · paddingBottom 40 ──
      Màu từng phiếu = template.theme_color → đặt inline style="--c:#…" trên thẻ (AwardTile) */
.mn-body{ padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc(40 * var(--pt)); }
.mn-hero{ display:flex; flex-direction:column; align-items:center; margin-bottom:calc(16 * var(--pt)); }   /* Card s.hero */
.mn-hero > .ui-av{ --s:72; margin-bottom:calc(8 * var(--pt)); }
.mn-hero > b{ font-size:calc(17 * var(--fs)); font-weight:800; line-height:1.2; }
.mn-pts{ margin-top:calc(8 * var(--pt)); font-size:calc(36 * var(--pt)); font-weight:800; color:var(--a); line-height:calc(42 * var(--pt)); }
.mn-unit{ margin-top:calc(-2 * var(--pt)); font-size:calc(12 * var(--fs)); color:var(--t2); line-height:1.2; }
.mn-stats{ align-self:stretch; display:flex; justify-content:space-around; margin-top:calc(16 * var(--pt)); padding-top:calc(16 * var(--pt)); border-top:1px solid var(--cb); }   /* statRow — 3 StatCell (.wl-stat) sát nhau */
.ds-sec.mn-sp{ margin-top:calc(12 * var(--pt)); }   /* SectionHeader style sectionSpacing */
.mn-grid{ display:flex; flex-wrap:wrap; gap:calc(12 * var(--pt)); justify-content:space-between; }   /* monthGrid */
/* AwardTile (app/hieu-hoc/preschool/_components/AwardTile.tsx) — month: Card accentColor (viền màu + "55") rộng 47% */
.mn-mon{ width:47%; display:flex; flex-direction:column; align-items:center; gap:calc(4 * var(--pt)); border-color:color-mix(in srgb, var(--c) 33.3%, transparent); }
.mn-mon > i{ width:calc(56 * var(--pt)); height:calc(56 * var(--pt)); margin-bottom:calc(4 * var(--pt)); border-radius:50%; background:color-mix(in srgb, var(--c) 20%, transparent); display:grid; place-items:center; font-style:normal; font-size:calc(28 * var(--pt)); line-height:1; }
.mn-mon > b{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:calc(12 * var(--fs)); font-weight:700; text-align:center; line-height:1.2; }
.mn-mon > small{ font-size:calc(10 * var(--fs)); color:var(--t3); text-align:center; line-height:1.2; white-space:nowrap; }
.mn-mon > em{ margin-top:calc(2 * var(--pt)); font-style:normal; font-size:calc(12 * var(--fs)); font-weight:800; color:var(--c); line-height:1.2; }
/* AwardTile week: dòng timeline — vạch màu 4pt bên trái · icon tròn 40 nền màu + "33" · tên + kỳ · điểm */
.mn-wk{ position:relative; display:flex; align-items:center; gap:calc(12 * var(--pt)); margin-bottom:calc(8 * var(--pt)); padding:calc(12 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--card); border:1px solid var(--cb); overflow:hidden; }
.mn-wk::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:calc(4 * var(--pt)); background:var(--c); }
.mn-wk > i{ flex:0 0 auto; width:calc(40 * var(--pt)); height:calc(40 * var(--pt)); border-radius:50%; background:color-mix(in srgb, var(--c) 20%, transparent); display:grid; place-items:center; font-style:normal; font-size:calc(20 * var(--pt)); line-height:1; }
.mn-wk > span{ flex:1; min-width:0; display:flex; flex-direction:column; }
.mn-wk b{ font-size:calc(14 * var(--fs)); font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mn-wk small{ margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mn-wk > em{ font-style:normal; font-size:calc(12 * var(--fs)); font-weight:800; color:var(--c); line-height:1.2; }

/* ── Phiếu bé ngoan (app/hieu-hoc/preschool/award/[id].tsx) — ScrollView padding xl · paddingBottom 24 + inputArea tĩnh trong KAV ── */
.mn-pr{ width:calc(36 * var(--pt)); height:calc(36 * var(--pt)); display:grid; place-items:center; color:#fff; }   /* printBtn: Ionicons print-outline 22 / ActivityIndicator small khi isPrinting */
.mn-pr .spin{ display:none; }
.mn-pr.busy .ion{ display:none; }
.mn-pr.busy .spin{ display:inline-block; }
.mn-aw{ padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc(24 * var(--pt)); }
.mn-card{ margin-bottom:calc(16 * var(--pt)); border-radius:calc(20 * var(--pt)); border:calc(2 * var(--pt)) solid var(--c); background:var(--card); overflow:hidden; }   /* heroCard */
.mn-card > .tp{ display:flex; flex-direction:column; align-items:center; padding:calc(24 * var(--pt)) calc(20 * var(--pt)); background:color-mix(in srgb, var(--c) 13.3%, transparent); text-align:center; }   /* heroTop: màu + "22" */
.mn-card > .tp > i{ font-style:normal; font-size:calc(64 * var(--pt)); line-height:1.2; }
.mn-card > .tp > b{ margin-top:calc(8 * var(--pt)); font-size:calc(17 * var(--fs)); font-weight:800; line-height:1.2; }
.mn-card > .tp > p{ margin-top:calc(4 * var(--pt)); font-size:calc(12 * var(--fs)); color:var(--t2); line-height:calc(18 * var(--pt)); }
.mn-card > .bt{ padding:calc(20 * var(--pt)); }
.mn-card > .bt > b{ display:block; text-align:center; font-size:calc(17 * var(--fs)); font-weight:800; line-height:1.2; }
.mn-card > .bt > p{ margin:calc(4 * var(--pt)) 0 calc(12 * var(--pt)); text-align:center; font-size:calc(12 * var(--fs)); color:var(--t3); line-height:1.2; }
.mn-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:calc(12 * var(--pt)); border-top:1px solid var(--cb); }   /* heroFooterRow */
.mn-foot > span{ flex:1; min-width:0; font-size:calc(12 * var(--fs)); color:var(--t2); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mn-foot > b{ font-size:calc(14 * var(--fs)); font-weight:800; color:var(--c); line-height:1.2; }
.mn-cmt{ font-size:calc(14 * var(--fs)); line-height:calc(21 * var(--pt)); }   /* commentText trong Card */
.mn-react{ display:flex; align-items:center; justify-content:space-between; margin:calc(16 * var(--pt)) 0 calc(8 * var(--pt)); }   /* reactionRow */
.mn-react > small{ font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }   /* awardedAt */
.mn-heart{ display:flex; align-items:center; gap:calc(6 * var(--pt)); padding:calc(8 * var(--pt)) calc(12 * var(--pt)); border-radius:999px; background:var(--card); border:1px solid var(--cb); color:var(--t2); }   /* reactionBtn */
.mn-heart > b{ font-size:calc(12 * var(--fs)); font-weight:700; line-height:1.2; }
.mn-heart .ion.f, .mn-heart.on .ion.o{ display:none; }
.mn-heart.on .ion.f{ display:inline-block; }
.mn-heart.on{ border-color:#F8514955; background:#F8514920; color:var(--rd); }   /* reactionBtnActive: red + "55" · redDim — icon heart + số đỏ */
.mn-none{ padding:calc(16 * var(--pt)) 0; font-size:calc(12 * var(--fs)); font-style:italic; color:var(--t3); text-align:center; line-height:1.2; }   /* emptyComment */
.mn-cm{ display:flex; gap:calc(8 * var(--pt)); margin-bottom:calc(12 * var(--pt)); }   /* commentRow: Avatar 32 + tên · nội dung · giờ */
.mn-cm > .ui-av{ --s:32; }
.mn-cm > div{ flex:1; min-width:0; }
.mn-cm b{ display:block; font-size:calc(12 * var(--fs)); font-weight:700; line-height:1.2; }
.mn-cm p{ margin-top:calc(2 * var(--pt)); font-size:calc(14 * var(--fs)); color:var(--t2); line-height:calc(19 * var(--pt)); }
.mn-cm small{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }
/* inputArea — paddingBottom max(insets.bottom 34, sm) · viền trên hairline cardDivider · TextInput multiline + nút Gửi */
.mn-bar{ flex:0 0 auto; padding:calc(8 * var(--pt)) calc(20 * var(--pt)) calc(34 * var(--pt)); border-top:.5px solid var(--dv); background:var(--bg); }
.mn-bar > .rw{ display:flex; align-items:flex-end; gap:calc(8 * var(--pt)); }
.mn-in{ flex:1; min-width:0; min-height:calc(40 * var(--pt)); padding:calc(8 * var(--pt)) calc(12 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--card); border:1px solid var(--cb); font-size:calc(14 * var(--fs)); color:#fff; line-height:1.3; }
.mn-in .plh{ color:var(--t3); }
.mn-in.has .plh{ display:none; }
.mn-in:not(.focus) .caret{ display:none; }
.mn-in:not(.has) .caret{ margin:0 -1.5px 0 0; }   /* iOS: con trỏ đè lên đầu placeholder */
.mn-send{ flex:0 0 auto; min-height:calc(40 * var(--pt)); padding:0 calc(16 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--a); display:grid; place-items:center; font-size:calc(14 * var(--fs)); font-weight:800; color:var(--on); line-height:1.2; }
.mn-send.dis{ background:#F5A62355; }   /* sendBtnDisabled: chưa gõ hoặc đang gửi */
.mn-send .spin{ display:none; }
.mn-send.busy .lbl{ display:none; }
.mn-send.busy .spin{ display:inline-block; }
/* Bản in (HTML trong handlePrint → expo-print) — trang A4 595×842 thu nhỏ theo --pp; số trong calc = px của HTML in */
.mn-paper{ --pp:calc(.5 * var(--pt)); flex:0 0 auto; width:calc(595 * var(--pp)); height:calc(842 * var(--pp)); padding:calc(40 * var(--pp)) calc(24 * var(--pp)); background:#fff; color:#111; box-shadow:0 calc(2 * var(--pt)) calc(10 * var(--pt)) rgba(0,0,0,.5); }
.mn-paper > div{ max-width:calc(480 * var(--pp)); margin:0 auto; border-radius:calc(24 * var(--pp)); border:calc(6 * var(--pp)) solid var(--c); overflow:hidden; }
.mn-paper .tp{ padding:calc(36 * var(--pp)) calc(24 * var(--pp)); background:color-mix(in srgb, var(--c) 13.3%, #fff); text-align:center; }
.mn-paper .tp > i{ display:block; font-style:normal; font-size:calc(64 * var(--pp)); line-height:1.2; }
.mn-paper .tp > b{ display:block; margin-top:calc(8 * var(--pp)); font-size:calc(22 * var(--pp)); font-weight:800; line-height:1.2; }
.mn-paper .tp > p{ margin-top:calc(6 * var(--pp)); font-size:calc(15 * var(--pp)); color:#555; line-height:1.25; }
.mn-paper .bt{ padding:calc(28 * var(--pp)) calc(32 * var(--pp)); }
.mn-paper .bt > b{ display:block; text-align:center; font-size:calc(20 * var(--pp)); font-weight:800; line-height:1.2; }
.mn-paper .bt > small{ display:block; margin-top:calc(4 * var(--pp)); text-align:center; font-size:calc(14 * var(--pp)); color:#777; line-height:1.25; }
.mn-paper .bt > p{ margin-top:calc(20 * var(--pp)); padding:calc(16 * var(--pp)); border-radius:calc(12 * var(--pp)); background:#f7f7f7; font-size:calc(14 * var(--pp)); line-height:1.6; }
.mn-paper .ft{ display:flex; align-items:center; justify-content:space-between; margin-top:calc(24 * var(--pp)); font-size:calc(13 * var(--pp)); color:#888; line-height:1.2; }
.mn-paper .ft > b{ font-size:calc(16 * var(--pp)); font-weight:800; color:var(--c); }

/* ── Lớp học giáo viên — app/teacher/classes/index.tsx · classes/[id].tsx · classes/form.tsx · students/form.tsx
   Form tạo lớp / thêm học sinh dùng chung .rec-f / .rec-in / .rec-sw / .rec-bar / .rec-sub (cùng s.field / s.input / bottomBar) ── */
.cls-card{ display:flex; align-items:center; gap:calc(12 * var(--pt)); margin-bottom:calc(8 * var(--pt)); padding:calc(12 * var(--pt)) calc(16 * var(--pt)); border-radius:calc(16 * var(--pt)); background:var(--card); border:1px solid var(--cb); }   /* s.card (index) · s.row ([id]) */
.cls-card > i{ flex:0 0 auto; width:calc(42 * var(--pt)); height:calc(42 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--bg); display:grid; place-items:center; font-style:normal; font-size:calc(20 * var(--pt)); line-height:1; }   /* cardEmojiBox + cardEmoji */
.cls-card > .no{ flex:0 0 auto; width:calc(34 * var(--pt)); height:calc(34 * var(--pt)); border-radius:50%; background:var(--bg); display:grid; place-items:center; font-size:calc(12 * var(--fs)); font-weight:700; color:var(--t3); line-height:1; }   /* rowNoBox + rowNoTxt */
.cls-card > span{ flex:1; min-width:0; }
.cls-card b{ display:block; font-size:calc(14 * var(--fs)); font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* cardTitle / rowName */
.cls-card small{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t2); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* cardSub */
.cls-card small.mu{ color:var(--t3); }                                                                                      /* cardSchool / rowSub */
.cls-card .bgs{ display:flex; flex-wrap:wrap; gap:calc(6 * var(--pt)); margin-top:calc(6 * var(--pt)); }                    /* rowBadges */
.cls-card > em{ flex:0 0 auto; font-style:normal; font-size:calc(24 * var(--fs)); color:var(--t3); line-height:1.2; }      /* cardArrow › / rowMore ⋯ */
.cls-info{ display:flex; flex-direction:column; gap:calc(12 * var(--pt)); margin-bottom:calc(12 * var(--pt)); padding:calc(16 * var(--pt)); border-radius:calc(16 * var(--pt)); background:var(--card); border:1px solid var(--cb); }   /* [id] s.infoCard */
.cls-info b{ display:block; font-size:calc(17 * var(--fs)); font-weight:800; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cls-info small{ display:block; width:fit-content; max-width:100%; margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t2); line-height:1.2; }
.cls-info .btns{ display:flex; gap:calc(8 * var(--pt)); }
.cls-info .btns > span{ flex:1; text-align:center; padding:calc(8 * var(--pt)) 0; border-radius:999px; border:1px solid var(--cb); font-size:calc(12 * var(--fs)); font-weight:600; line-height:1.2; }
.cls-mb{ margin-bottom:calc(12 * var(--pt)); }                                                                              /* ô tìm (s.search / s.sheetSearch) · View bọc TabFilter — marginBottom Spacing.md */
.tf-tab .bdg{ min-width:calc(20 * var(--pt)); min-height:calc(20 * var(--pt)); padding:0 calc(6 * var(--pt)); border-radius:calc(10 * var(--pt)); display:grid; place-items:center; background:rgba(255,180,0,.18); font-style:normal; font-size:calc(11 * var(--fs)); font-weight:800; color:var(--a); line-height:1; }   /* TabFilter s.badge (badge > 0) */
.tf-tab.on .bdg{ background:rgba(0,0,0,.18); color:var(--on); }
.cls-lead{ margin-bottom:calc(16 * var(--pt)); font-size:calc(12 * var(--fs)); color:var(--t2); line-height:calc(20 * var(--pt)); }   /* students/form s.lead */
.rec-in.ta.h80{ min-height:calc(80 * var(--pt)); }                                                                          /* GHI CHÚ — minHeight 80 */
.rec-pk.cls > em{ margin-top:0; }                                                                                          /* personArrow */
.rec-pk.cls small{ font-weight:400; color:var(--t3); }                                                                      /* personSub */
.rec-pk > .cls-x{ flex:0 0 auto; width:calc(26 * var(--pt)); height:calc(26 * var(--pt)); border-radius:50%; background:var(--bg); display:grid; place-items:center; font-size:calc(12 * var(--fs)); font-weight:700; color:var(--t3); line-height:1; }   /* personClear ✕ */
/* PersonPickerSheet (students/form.tsx) — Modal slide trong .sh-lay */
.cls-sh{ display:flex; flex-direction:column; min-height:55%; max-height:80%; padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc((34 + 16) * var(--pt)); border-radius:calc(20 * var(--pt)) calc(20 * var(--pt)) 0 0; background:var(--bg); }   /* paddingBottom insets.bottom + Spacing.lg */
.cls-sh > b{ font-size:calc(17 * var(--fs)); font-weight:800; line-height:1.2; }
.cls-sh > p{ margin:calc(4 * var(--pt)) 0 calc(12 * var(--pt)); font-size:calc(12 * var(--fs)); color:var(--t2); line-height:calc(20 * var(--pt)); }
.cls-sh .ld{ margin:calc(20 * var(--pt)) 0; display:grid; place-items:center; color:var(--a); }                              /* ActivityIndicator amber · marginVertical xl */
.cls-sh .ld .spin{ width:calc(20 * var(--pt)); height:calc(20 * var(--pt)); }
.cls-cand{ display:flex; align-items:center; gap:calc(12 * var(--pt)); padding:calc(12 * var(--pt)) 0; border-bottom:1px solid var(--cb); }   /* CandidateRow */
.cls-cand > span{ flex:1; min-width:0; }
.cls-cand b{ display:block; font-size:calc(14 * var(--fs)); font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cls-cand small{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cls-cand > em{ flex:0 0 auto; font-style:normal; font-size:calc(12 * var(--fs)); font-weight:800; color:var(--a); line-height:1.2; }

/* ── Phiếu bé ngoan mầm non — danh sách lớp của cô (app/teacher/preschool/index.tsx) — ScrollView padding xl · paddingBottom 48, không FAB ──
      Chỉ hiện lớp Đại Việt Phả đã kích hoạt; chưa có → EmptyState 🌈 (.ds-empty) */
.mnl-body{ padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc(48 * var(--pt)); }
.mnl-card{ display:flex; flex-direction:column; gap:calc(8 * var(--pt)); margin-bottom:calc(16 * var(--pt)); padding:calc(16 * var(--pt)); border-radius:calc(16 * var(--pt)); background:var(--card); border:1px solid var(--cb); }   /* s.card */
.mnl-top{ display:flex; align-items:center; gap:calc(12 * var(--pt)); }   /* cardTop */
.mnl-top > i{ flex:0 0 auto; width:calc(42 * var(--pt)); height:calc(42 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--bg); display:grid; place-items:center; font-style:normal; font-size:calc(20 * var(--pt)); line-height:1; }   /* cardEmojiBox + cardEmoji 🌈 */
.mnl-top > span{ flex:1; min-width:0; }
.mnl-top b{ display:block; font-size:calc(14 * var(--fs)); font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* cardTitle */
.mnl-top small{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t2); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* cardSub "{trường} · {năm học}" */
.mnl-stats{ display:flex; gap:calc(8 * var(--pt)); margin-top:calc(4 * var(--pt)); }   /* statsRow */
.mnl-stats > div{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:calc(2 * var(--pt)); padding:calc(8 * var(--pt)) 0; border-radius:calc(12 * var(--pt)); background:var(--bg); }   /* statBox */
.mnl-stats b{ font-size:calc(14 * var(--fs)); font-weight:800; color:var(--a); line-height:1.2; }   /* statValue */
.mnl-stats span{ font-size:calc(10 * var(--pt)); color:var(--t3); text-align:center; line-height:1.2; }   /* statLabel fontSize 10 */
.mnl-meta{ font-size:calc(10 * var(--fs)); color:var(--t2); line-height:1.2; }   /* metaTxt 👩‍🏫 / 💰 */
.mnl-acts{ display:flex; gap:calc(8 * var(--pt)); margin-top:calc(4 * var(--pt)); }   /* actionsRow */
.mnl-acts > span{ flex:1; display:grid; place-items:center; padding:calc(8 * var(--pt)) 0; border-radius:999px; border:1px solid var(--bd); font-size:calc(12 * var(--fs)); font-weight:700; color:var(--t2); line-height:1.2; }   /* secondaryBtn "Lịch sử" */
.mnl-acts > span.pr{ border-color:var(--a); background:var(--a); font-weight:800; color:var(--on); }   /* primaryBtn "Trao phiếu" — RN không viền nhưng stretch cao bằng nút kia */

/* ── Trao phiếu bé ngoan (app/teacher/preschool/award.tsx + _components/StudentAwardRow.tsx, TemplateCard.tsx, TemplateIcon.tsx) ──
      Khung form dùng chung .rec-scroll / .rec-f / .rec-lbl / .rec-hint / .rec-bar / .rec-sub; ảnh riêng của bé = .ip + .ip-add */
.aw-chips{ display:flex; flex-wrap:wrap; gap:calc(8 * var(--pt)); }   /* s.chipRow */
.aw-chip{ padding:calc(8 * var(--pt)) calc(16 * var(--pt)); border-radius:999px; background:var(--card); border:1px solid var(--bd); font-size:calc(12 * var(--fs)); font-weight:700; color:var(--t2); line-height:1.2; }   /* s.chip / chipTxt */
.aw-chip.on{ background:var(--a); border-color:var(--a); color:var(--on); }   /* chipActive / chipTxtActive */
.aw-tpls{ display:flex; flex-wrap:wrap; gap:calc(8 * var(--pt)); }   /* s.templateGrid */
.aw-tpl{ position:relative; width:31%; aspect-ratio:.95; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(6 * var(--pt)); padding:calc(8 * var(--pt)); border-radius:calc(16 * var(--pt)); background:var(--card); border:1px solid var(--cb); }   /* TemplateCard st.card — style="--c:<theme_color>" */
.aw-tpl.on{ border:2px solid var(--c); }   /* selected: borderColor theme_color · borderWidth 2 */
.aw-tpl > i{ flex:0 0 auto; width:calc(40 * var(--pt)); height:calc(40 * var(--pt)); border-radius:calc(40 / 3 * var(--pt)); display:grid; place-items:center; background:color-mix(in srgb, var(--c) 13.3%, transparent); border:1px solid var(--c); font-style:normal; font-size:calc(20 * var(--pt)); line-height:1; }   /* TemplateIcon size 40: bg `${color}22`, emoji size * .5 */
.aw-tpl > b{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:calc(10 * var(--fs)); font-weight:700; text-align:center; line-height:1.2; }   /* st.name numberOfLines 2 */
.aw-tpl > em{ display:none; position:absolute; top:calc(6 * var(--pt)); right:calc(8 * var(--pt)); font-style:normal; font-size:calc(14 * var(--fs)); font-weight:800; color:var(--a); line-height:1.2; }   /* st.check ✓ */
.aw-tpl.on > em{ display:block; }
.aw-sth{ display:flex; align-items:center; justify-content:space-between; }   /* s.studentsHeader */
.aw-sth > a{ font-size:calc(10 * var(--fs)); font-weight:700; color:var(--a); line-height:1.2; }   /* selectAllTxt "Chọn tất cả (n)" / "Bỏ chọn tất cả" */
.aw-ld{ margin:calc(16 * var(--pt)) 0; display:grid; place-items:center; color:var(--a); }   /* ActivityIndicator amber · marginVertical lg */
.aw-ld .spin{ width:calc(20 * var(--pt)); height:calc(20 * var(--pt)); }
.aw-st{ margin-bottom:calc(8 * var(--pt)); }   /* StudentAwardRow st.wrap */
.aw-st .rw{ display:flex; align-items:center; gap:calc(12 * var(--pt)); padding:calc(8 * var(--pt)) calc(12 * var(--pt)); border-radius:calc(16 * var(--pt)); background:var(--card); border:1px solid var(--cb); }   /* st.row */
.aw-st.off .rw{ opacity:.45; }   /* rowDisabled: chưa đủ điều kiện / đã nhận trong kỳ */
.aw-st .cb{ flex:0 0 auto; width:calc(22 * var(--pt)); height:calc(22 * var(--pt)); border-radius:calc(6 * var(--pt)); border:calc(1.5 * var(--pt)) solid var(--bd); display:grid; place-items:center; font-size:calc(12 * var(--fs)); font-weight:800; color:var(--on); line-height:1; }   /* st.checkbox */
.aw-st.on .cb{ background:var(--a); border-color:var(--a); }   /* checkboxActive */
.aw-st.on .cb::after{ content:'✓'; }   /* checkMark */
.aw-st .av{ flex:0 0 auto; width:calc(36 * var(--pt)); height:calc(36 * var(--pt)); border-radius:50%; background:#2A1B10; display:grid; place-items:center; font-style:normal; font-size:calc(16 * var(--pt)); line-height:1; }   /* avatarFallback (Colors.bgHover) + 🧒 fontSize 16 */
.aw-st .nm{ flex:1; min-width:0; }
.aw-st .nm b{ display:block; font-size:calc(14 * var(--fs)); font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* st.name */
.aw-st .nm small{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* st.reason (noteText) */
.aw-st .nm small:empty{ display:none; }
.aw-st .ex{ display:none; flex:0 0 auto; padding:calc(4 * var(--pt)); font-style:normal; font-size:calc(14 * var(--fs)); color:var(--t3); line-height:1.2; }   /* expandBtn — chỉ khi bé đang được chọn */
.aw-st.on .ex{ display:block; }
.aw-st .ex::after{ content:'▾'; }
.aw-st.open .ex::after{ content:'▴'; }
.aw-st .xb{ display:none; flex-direction:column; gap:calc(8 * var(--pt)); margin:calc(8 * var(--pt)) 0 0 calc(34 * var(--pt)); padding:calc(12 * var(--pt)); border-radius:calc(14 * var(--pt)); background:#2A1B10; }   /* st.expandBox (Colors.bgHover) */
.aw-st.open .xb{ display:flex; }
.aw-in{ min-height:calc(40 * var(--pt)); padding:calc(8 * var(--pt)) calc(12 * var(--pt)); border-radius:calc(12 * var(--pt)); background:var(--card); border:1px solid var(--cb); font-size:calc(12 * var(--fs)); color:#fff; line-height:1.35; }   /* StudentAwardRow st.input (multiline) */
.aw-in.cm{ min-height:calc(60 * var(--pt)); padding:calc(12 * var(--pt)) calc(16 * var(--pt)); border-radius:calc(16 * var(--pt)); }   /* award.tsx s.commonInput — NHẬN XÉT CHUNG */
.aw-in .plh{ color:var(--t3); }
.aw-in.has .plh{ display:none; }
.aw-in:not(.focus) .caret{ display:none; }
.aw-in:not(.has) .caret{ margin:0 -1.5px 0 0; }   /* iOS: con trỏ đè lên đầu placeholder */
.aw-dim{ position:absolute; inset:0; z-index:30; display:flex; flex-direction:column; justify-content:center; padding:0 calc(20 * var(--pt)); background:rgba(0,0,0,.55); opacity:0; visibility:hidden; }   /* Modal fade · s.modalBackdrop */
.aw-pv{ display:flex; flex-direction:column; gap:calc(12 * var(--pt)); max-height:82%; padding:calc(20 * var(--pt)); border-radius:calc(24 * var(--pt)); background:var(--card); }   /* s.modalCard */
.aw-pv h6{ font-size:calc(17 * var(--fs)); font-weight:800; line-height:1.2; }   /* modalTitle "Xem trước trao phiếu" */
.aw-pv p{ font-size:calc(12 * var(--fs)); color:var(--t2); line-height:1.25; }   /* modalDesc "{n} bé sẽ nhận" */
.aw-sum{ display:flex; flex-direction:column; gap:calc(6 * var(--pt)); margin-top:calc(8 * var(--pt)); padding:calc(12 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--bg); }   /* s.summaryBox */
.aw-sum > div{ display:flex; justify-content:space-between; gap:calc(12 * var(--pt)); }   /* SummaryRow */
.aw-sum span{ min-width:0; font-size:calc(10 * var(--fs)); color:var(--t2); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* summaryLabel numberOfLines 1 */
.aw-sum b{ flex:0 0 auto; font-size:calc(10 * var(--fs)); font-weight:800; line-height:1.25; }   /* summaryValue */
.aw-sum b.gr{ color:var(--gr); }   /* "Còn lại sau khi trao" không vượt quỹ → greenLight */
.aw-btns{ display:flex; gap:calc(8 * var(--pt)); }   /* s.modalBtnRow */
.aw-btns > span{ flex:1; display:flex; justify-content:center; align-items:center; padding:calc(12 * var(--pt)) 0; border-radius:999px; border:1px solid var(--bd); font-size:calc(14 * var(--fs)); font-weight:700; color:var(--t2); line-height:1.2; }   /* modalSecondaryBtn "Đóng" */
.aw-btns > span.pr{ border-color:var(--a); background:var(--a); font-weight:800; color:var(--on); }   /* modalPrimaryBtn "Xác nhận trao" — RN không viền nhưng stretch cao bằng nút kia */
.aw-btns > span.dg{ border-color:var(--rd); background:var(--rd); font-weight:800; color:#fff; }   /* history.tsx modalDangerBtn "Xác nhận thu hồi" */
.aw-btns > span.dis{ opacity:.45; }   /* submitBtnDisabled — đang gửi (isCommitting) */
.aw-btns .spin{ display:none; }
.aw-btns .busy .lbl{ display:none; }
.aw-btns .busy .spin{ display:inline-block; }

/* ── Lịch sử trao phiếu mầm non (app/teacher/preschool/history.tsx + _components/TemplateIcon.tsx) ──
      TabFilter edgeInset xl = .tf / .tf-bar.xl · EmptyState = .ds-empty · modal backdrop = .aw-dim · hàng nút = .aw-btns */
.mnh-body{ padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc(48 * var(--pt)); }   /* s.content */
.mnh-card{ display:flex; align-items:center; gap:calc(12 * var(--pt)); margin-bottom:calc(8 * var(--pt)); padding:calc(12 * var(--pt)) calc(16 * var(--pt)); border-radius:calc(16 * var(--pt)); background:var(--card); border:1px solid var(--cb); }   /* s.card */
.mnh-card.pr{ opacity:.75; }   /* activeOpacity .75 lúc ấn giữ (chỉ khi còn quyền sửa / thu hồi) */
.mnh-ic{ --s:44; flex:0 0 auto; width:calc(var(--s) * var(--pt)); height:calc(var(--s) * var(--pt)); border-radius:calc(var(--s) / 3 * var(--pt)); display:grid; place-items:center; background:color-mix(in srgb, var(--c) 13.3%, transparent); border:1px solid var(--c); font-style:normal; font-size:calc(var(--s) * .5 * var(--pt)); line-height:1; }   /* TemplateIcon: bg `${color}22`, emoji size * .5 — style="--c:<theme_color>" */
.mnh-c{ flex:1; min-width:0; }
.mnh-tr{ display:flex; align-items:center; gap:calc(8 * var(--pt)); }   /* s.cardTopRow */
.mnh-tr > b{ flex:0 1 auto; min-width:0; font-size:calc(12 * var(--fs)); font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* s.cardTitle "{award_label} · {period_label}" numberOfLines 1 */
.mnh-x{ display:none; flex:0 0 auto; padding:calc(2 * var(--pt)) calc(8 * var(--pt)); border-radius:999px; background:rgba(248,81,73,.125); font-style:normal; font-size:calc(10 * var(--pt)); font-weight:800; color:var(--rd); line-height:1.2; }   /* cancelledBadge (Colors.redDim) "Đã huỷ" — cancelledTxt fontSize 10 */
.mnh-c > strong{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(14 * var(--fs)); font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* s.cardChild */
.mnh-c > p{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t2); line-height:1.25; }   /* s.cardComment numberOfLines 2 */
.mnh-c > p:empty{ display:none; }
.mnh-c > p.rs{ display:none; color:var(--rd); font-style:italic; }   /* cancelReasonTxt "Lý do huỷ: …" — chỉ phiếu đã huỷ */
.mnh-c > small{ display:block; margin-top:calc(4 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* s.cardMeta "{cô trao} · dd/mm/yyyy HH:MM" */
.mnh-pt{ flex:0 0 auto; font-style:normal; font-size:calc(14 * var(--fs)); font-weight:800; color:var(--a); line-height:1.2; }   /* s.cardPoints "+2.000" */
.mnh-card.x .mnh-x{ display:block; }
.mnh-card.x .mnh-c > p.rs{ display:-webkit-box; }
.mnh-card.x .mnh-pt{ color:var(--t3); text-decoration:line-through; }   /* cardPointsCancelled */
.mnh-md{ display:flex; flex-direction:column; gap:calc(12 * var(--pt)); padding:calc(20 * var(--pt)); border-radius:calc(20 * var(--pt)); background:var(--card); }   /* s.modalCard (Radius.xxl) */
.mnh-md h6{ font-size:calc(17 * var(--fs)); font-weight:800; line-height:1.2; }   /* modalTitle */
.mnh-md p{ font-size:calc(12 * var(--fs)); color:var(--t2); line-height:calc(19 * var(--pt)); }   /* modalDesc lineHeight 19 */
.mnh-in{ min-height:calc(80 * var(--pt)); padding:calc(8 * var(--pt)) calc(12 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--bg); border:1px solid var(--cb); font-size:calc(14 * var(--fs)); color:#fff; line-height:1.3; }   /* s.modalInput (multiline) */
.mnh-in .plh{ color:var(--t3); }
.mnh-in.has .plh{ display:none; }
.mnh-in:not(.focus) .caret{ display:none; }
.mnh-in:not(.has) .caret{ margin:0 -1.5px 0 0; }   /* iOS: con trỏ đè lên đầu placeholder */
.mnh-lbl{ margin-top:calc(-4 * var(--pt)); font-size:calc(12 * var(--fs)); font-weight:700; line-height:1.2; }   /* modalLabel "Đổi mẫu" */
.mnh-ld{ align-self:flex-start; display:grid; place-items:center; color:var(--a); }   /* ActivityIndicator amber · alignSelf flex-start */
.mnh-ld .spin{ width:calc(20 * var(--pt)); height:calc(20 * var(--pt)); }
.mnh-tpls{ display:flex; overflow:hidden; }   /* ScrollView horizontal s.templateRow */
.mnh-chip{ position:relative; flex:0 0 auto; width:calc(76 * var(--pt)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(4 * var(--pt)); margin-right:calc(8 * var(--pt)); padding:calc(8 * var(--pt)) 0; border-radius:calc(14 * var(--pt)); background:var(--bg); border:1px solid var(--cb); }   /* s.templateChip — style="--c:<theme_color>" */
.mnh-chip.on{ border:2px solid var(--c); }   /* selected: borderColor theme_color · borderWidth 2 */
.mnh-chip .mnh-ic{ --s:36; }
.mnh-chip > b{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:calc(10 * var(--pt)); font-weight:700; text-align:center; line-height:1.2; }   /* templateChipName fontSize 10 · numberOfLines 2 */
.mnh-chip > em{ display:none; position:absolute; top:calc(4 * var(--pt)); right:calc(6 * var(--pt)); font-style:normal; font-size:calc(12 * var(--fs)); font-weight:800; color:var(--a); line-height:1.2; }   /* templateCheck ✓ */
.mnh-chip.on > em{ display:block; }

/* ── Nhập từ file (app/teacher/import.tsx) — ScrollView padding xl · paddingBottom 96 (chừa FAB ☰). Card con đều Radius.xl + cardBorder ── */
.imp-scroll{ padding:calc(20 * var(--pt)) calc(20 * var(--pt)) calc(96 * var(--pt)); }
.imp-step{ margin:calc(20 * var(--pt)) 0 calc(8 * var(--pt)); font-size:calc(10 * var(--fs)); font-weight:800; color:var(--t3); letter-spacing:calc(1 * var(--pt)); line-height:1.2; }   /* s.stepLabel */
.imp-chips{ display:flex; flex-wrap:wrap; gap:calc(8 * var(--pt)); margin-bottom:calc(12 * var(--pt)); }
.imp-chips > span{ padding:calc(8 * var(--pt)) calc(16 * var(--pt)); border-radius:999px; border:1px solid var(--cb); background:var(--card); font-size:calc(12 * var(--fs)); font-weight:600; color:var(--t2); line-height:1.2; }   /* s.chip */
.imp-chips > span.on{ background:var(--a); border-color:var(--a); font-weight:800; color:var(--on); }   /* chipActive */
.imp-pk, .imp-in, .imp-guide, .imp-sum > div, .imp-row, .imp-hist{ border-radius:calc(16 * var(--pt)); background:var(--card); border:1px solid var(--cb); }
.imp-pk{ display:flex; align-items:center; gap:calc(12 * var(--pt)); margin-bottom:calc(12 * var(--pt)); padding:calc(12 * var(--pt)) calc(16 * var(--pt)); }   /* s.picker */
.imp-pk > i{ flex:0 0 auto; font-style:normal; font-size:calc(20 * var(--pt)); line-height:1.2; }   /* pickerEmoji 🏫 */
.imp-pk > b{ flex:1; min-width:0; font-size:calc(14 * var(--fs)); font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* pickerValue */
.imp-pk > b.plh{ font-weight:400; color:var(--t3); }   /* pickerPlaceholder */
.imp-pk > em{ flex:0 0 auto; font-style:normal; font-size:calc(24 * var(--fs)); color:var(--t3); line-height:1.2; }   /* pickerArrow › */
.imp-in{ padding:calc(12 * var(--pt)) calc(16 * var(--pt)); font-size:calc(14 * var(--fs)); color:var(--t3); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* s.input — đang trống, chỉ có placeholder */
.imp-guide{ display:flex; flex-direction:column; gap:calc(6 * var(--pt)); margin-top:calc(12 * var(--pt)); padding:calc(16 * var(--pt)); }   /* s.guideCard */
.imp-guide > b{ font-size:calc(12 * var(--fs)); font-weight:700; line-height:1.2; }   /* guideTitle */
.imp-guide > .cols{ font-size:calc(10 * var(--fs)); font-weight:600; color:var(--a); line-height:calc(18 * var(--pt)); white-space:pre-wrap; }   /* guideCols — nối bằng "  ·  " */
.imp-note{ margin-top:calc(4 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:calc(16 * var(--pt)); }   /* s.guideNote */
.imp-tpl{ align-self:flex-start; margin-top:calc(8 * var(--pt)); padding:calc(8 * var(--pt)) calc(16 * var(--pt)); border-radius:999px; border:1px solid var(--a); font-size:calc(12 * var(--fs)); font-weight:700; color:var(--a); line-height:1.2; }   /* s.templateBtn */
.imp-file{ display:flex; justify-content:center; align-items:center; min-height:calc((16 * 2 + 20) * var(--pt)); padding:0 calc(8 * var(--pt)); border-radius:calc(16 * var(--pt)); border:calc(1.5 * var(--pt)) dashed var(--a); background:var(--card); text-align:center; font-size:calc(14 * var(--fs)); font-weight:700; color:var(--a); line-height:1.2; }   /* s.fileBtn — paddingVertical lg */
.imp-file.dis{ opacity:.55; }   /* isUploading / configBlocker */
.imp-file .spin, .imp-commit .spin{ width:calc(20 * var(--pt)); height:calc(20 * var(--pt)); }   /* ActivityIndicator small */
.imp-blk{ margin-top:calc(6 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); text-align:center; line-height:1.2; }   /* s.blockerTxt */
.imp-sum{ display:flex; gap:calc(8 * var(--pt)); margin-top:calc(12 * var(--pt)); }   /* s.summaryRow */
.imp-sum > div{ flex:1; display:flex; flex-direction:column; align-items:center; padding:calc(12 * var(--pt)) 0; }   /* SummaryBox */
.imp-sum b{ font-size:calc(17 * var(--fs)); font-weight:900; line-height:1.2; }
.imp-sum span{ margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }
.imp-row{ display:flex; align-items:center; gap:calc(12 * var(--pt)); margin-top:calc(8 * var(--pt)); padding:calc(8 * var(--pt)) calc(16 * var(--pt)); }   /* s.previewRow */
.imp-row.off{ opacity:.45; }   /* dòng hợp lệ đã chạm để bỏ khỏi lần ghi */
.imp-row > i{ flex:0 0 auto; width:calc(20 * var(--pt)); text-align:center; font-style:normal; font-size:calc(17 * var(--fs)); font-weight:800; line-height:1.2; }   /* previewMark ✓ ✕ − ○ */
.imp-row > div, .imp-hist .top > div{ flex:1; min-width:0; }
.imp-row b, .imp-hist b{ display:block; font-size:calc(12 * var(--fs)); font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* previewName */
.imp-row small, .imp-hist small{ display:block; margin-top:calc(1 * var(--pt)); font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* previewDetail */
.imp-row p{ margin-top:calc(2 * var(--pt)); font-size:calc(10 * var(--fs)); line-height:calc(15 * var(--pt)); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }   /* previewMsg (màu theo trạng thái) */
.imp-row > em{ flex:0 0 auto; font-style:normal; font-size:calc(10 * var(--fs)); color:var(--t3); line-height:1.2; }   /* previewLine #n */
.imp-commit{ display:flex; justify-content:center; align-items:center; min-height:calc((16 * 2 + 20) * var(--pt)); border-radius:999px; background:var(--a); font-size:calc(14 * var(--fs)); font-weight:800; color:var(--on); line-height:1.2; }   /* s.commitBtn — paddingVertical 16 */
.imp-commit.dis{ opacity:.45; }
.imp-hist{ margin-bottom:calc(8 * var(--pt)); padding:calc(12 * var(--pt)) calc(16 * var(--pt)); }   /* s.historyRow */
.imp-hist .top{ display:flex; align-items:center; gap:calc(12 * var(--pt)); }
.imp-hist .st{ flex:0 0 auto; font-size:calc(12 * var(--fs)); font-weight:700; line-height:1.2; white-space:pre; }   /* historyStats "1✓  2−  1✕" */
.imp-hist .errs{ display:flex; flex-direction:column; gap:calc(2 * var(--pt)); margin-top:calc(8 * var(--pt)); }
.imp-err{ font-size:calc(10 * var(--fs)); color:var(--rd); line-height:calc(15 * var(--pt)); }   /* s.commitErrorLine */

/* ── DatePickerField — modal "Chọn ngày" (app/components/ui/DatePickerField.tsx) — Modal fade, card giữa màn.
   Bánh xe iOS (DateTimePicker spinner, locale vi) vẽ tĩnh: 5 dòng, dòng giữa là giá trị đang chọn ── */
.dp-dim{ position:absolute; inset:0; z-index:30; display:flex; flex-direction:column; justify-content:center; padding:0 calc(16 * var(--pt)); background:rgba(0,0,0,.6); opacity:0; visibility:hidden; }   /* s.backdrop */
.dp-card{ display:flex; flex-direction:column; gap:calc(16 * var(--pt)); padding:calc(20 * var(--pt)); border-radius:calc(24 * var(--pt)); background:var(--card); }
.dp-hd{ display:flex; align-items:center; justify-content:space-between; }
.dp-hd > b{ font-size:calc(17 * var(--fs)); font-weight:800; line-height:1.2; }
.dp-hd > span{ width:calc(40 * var(--pt)); height:calc(40 * var(--pt)); border-radius:calc(20 * var(--pt)); background:var(--bg); display:grid; place-items:center; color:var(--t3); }   /* closeBtn + Ionicons close 26 */
.dp-seg{ display:flex; padding:calc(4 * var(--pt)); border-radius:999px; background:var(--bg); }
.dp-seg > span{ flex:1; padding:calc(10 * var(--pt)) 0; border-radius:999px; text-align:center; font-size:calc(14 * var(--fs)); font-weight:600; color:var(--t3); line-height:1.2; }
.dp-seg > span.on{ background:var(--a); font-weight:700; color:var(--on); }
.dp-row{ display:flex; align-items:center; justify-content:center; padding:calc(8 * var(--pt)) 0; }
.dp-row > div{ display:flex; flex-direction:column; align-items:center; margin:0 calc(3 * var(--pt)); }   /* dateCell */
.dp-in{ width:calc(68 * var(--pt)); display:flex; align-items:center; justify-content:center; padding:calc(14 * var(--pt)) calc(4 * var(--pt)); border-radius:calc(14 * var(--pt)); background:var(--bg); border:1px solid var(--cb); font-size:calc(22 * var(--pt)); font-weight:700; letter-spacing:calc(1 * var(--pt)); line-height:1.2; white-space:nowrap; }   /* dateInput */
.dp-in.y{ width:calc(100 * var(--pt)); }
.dp-in .plh{ color:var(--t3); }
.dp-in.has .plh{ display:none; }
.dp-in .caret{ height:calc(26 * var(--pt)); vertical-align:middle; }
.dp-in:not(.focus) .caret{ display:none; }
.dp-row small{ margin-top:calc(4 * var(--pt)); font-size:calc(11 * var(--pt)); font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:calc(.5 * var(--pt)); line-height:1.2; }   /* dateCellLabel */
.dp-row > i{ margin:0 calc(2 * var(--pt)) calc(16 * var(--pt)); font-style:normal; font-size:calc(22 * var(--pt)); font-weight:300; color:var(--t3); line-height:1.2; }   /* dateSep "/" */
.dp-or{ display:flex; align-items:center; gap:calc(8 * var(--pt)); margin:calc(2 * var(--pt)) 0; }
.dp-or::before, .dp-or::after{ content:''; flex:1; height:.5px; background:var(--cb); }
.dp-or > span{ font-size:calc(12 * var(--pt)); font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:calc(1 * var(--pt)); line-height:1.2; }
.dp-wheel{ position:relative; display:flex; justify-content:center; align-items:center; height:calc(216 * var(--pt)); padding:calc(4 * var(--pt)) 0; }   /* spinnerWrap + UIDatePicker cao 216pt */
.dp-wheel::before{ content:''; position:absolute; left:calc(8 * var(--pt)); right:calc(8 * var(--pt)); top:50%; height:calc(36 * var(--pt)); margin-top:calc(-18 * var(--pt)); border-radius:calc(8 * var(--pt)); background:rgba(118,118,128,.24); }   /* dải chọn */
.dp-wheel > div{ position:relative; display:flex; flex-direction:column; }
.dp-wheel > .d{ width:calc(64 * var(--pt)); align-items:flex-end; }
.dp-wheel > .m{ width:calc(130 * var(--pt)); align-items:center; }
.dp-wheel > .y{ width:calc(74 * var(--pt)); align-items:flex-start; }
.dp-wheel span{ height:calc(36 * var(--pt)); display:flex; align-items:center; font-size:calc(21 * var(--pt)); color:#fff; line-height:1; white-space:nowrap; }
.dp-wheel span:nth-child(1), .dp-wheel span:nth-child(5){ opacity:.22; transform:scale(.86); }
.dp-wheel span:nth-child(2), .dp-wheel span:nth-child(4){ opacity:.5; transform:scale(.94); }
.dp-wheel span.off{ color:rgba(235,235,245,.3); }                                                                          /* sau maximumDate → mờ */
.dp-info{ display:flex; flex-direction:column; gap:calc(6 * var(--pt)); padding:calc(10 * var(--pt)) calc(12 * var(--pt)); border-radius:calc(12 * var(--pt)); background:var(--bg); }   /* infoCard */
.dp-info > div{ display:flex; align-items:center; gap:calc(6 * var(--pt)); }
.dp-info small{ font-size:calc(12 * var(--pt)); font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:calc(.5 * var(--pt)); line-height:1.2; }
.dp-info b{ flex:1; font-size:calc(12 * var(--fs)); font-weight:600; line-height:1.2; }
.dp-ok{ display:flex; margin-top:calc(4 * var(--pt)); }
.dp-ok > span{ flex:1; padding:calc(13 * var(--pt)) 0; border-radius:999px; background:var(--a); text-align:center; font-size:calc(14 * var(--fs)); font-weight:800; color:var(--on); line-height:1.2; }
.dp-ok > span.dis{ opacity:.35; }
.dp-ok > span > b{ font-weight:inherit; }
.dp-ok > span.dis > b{ opacity:.8; }                                                                                       /* btnPrimaryTxtDisabled */

/* ── Lớp phủ hệ thống ── */
.ios-dim{ position:absolute; inset:0; z-index:30; display:grid; place-items:center; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; }
.ios-alert{ width:190px; border-radius:13px; background:rgba(50,50,52,.98); text-align:center; overflow:hidden; }
.ios-alert .bd{ padding:13px 13px 11px; }
.ios-alert h6{ font-size:11.5px; font-weight:700; margin-bottom:3px; }
.ios-alert p{ font-size:9px; line-height:1.4; color:#e5e5ea; }
.ios-alert .btn{ border-top:.5px solid rgba(255,255,255,.2); padding:8px; font-size:11.5px; font-weight:600; color:#0A84FF; }
.ios-alert .btns{ display:flex; border-top:.5px solid rgba(255,255,255,.2); }   /* 2 nút nằm ngang: [cancel đậm | destructive đỏ] */
.ios-alert .btns > .btn{ flex:1; border-top:0; }
.ios-alert .btns > .btn + .btn{ border-left:.5px solid rgba(255,255,255,.2); }
.ios-alert .btn.rd{ font-weight:400; color:#FF453A; }
.ios-alert .btn.rg{ font-weight:400; }   /* nút style mặc định cạnh nút cancel (cancel đậm, nút còn lại chữ thường) */
/* ActionSheetIOS (app dark) — nền mờ .ios-asd + sheet .ios-as (engine trượt lên theo t). Đặt trong <x-guide-video.phone> */
.ios-asd{ position:absolute; inset:0; z-index:30; background:rgba(0,0,0,.4); opacity:0; visibility:hidden; }
.ios-as{ position:absolute; left:calc(8 * var(--pt)); right:calc(8 * var(--pt)); bottom:calc(34 * var(--pt)); z-index:31; display:flex; flex-direction:column; gap:calc(8 * var(--pt)); visibility:hidden; }
.ios-as .grp{ border-radius:calc(13 * var(--pt)); background:rgba(44,44,46,.97); overflow:hidden; text-align:center; }
.ios-as h6{ padding:calc(14 * var(--pt)) calc(16 * var(--pt)); font-size:calc(13 * var(--pt)); font-weight:600; color:#8e8e93; line-height:1.3; }
.ios-as .opt{ padding:calc(17 * var(--pt)) calc(16 * var(--pt)); border-top:.5px solid rgba(255,255,255,.15); font-size:calc(20 * var(--pt)); color:#0A84FF; line-height:calc(23 * var(--pt)); }
.ios-as .grp > .opt:first-child{ border-top:0; }
.ios-as .opt.rd{ color:#FF453A; }
.ios-as .opt.b{ font-weight:600; }   /* cancelButtonIndex — nhóm riêng, chữ đậm */
/* Hộp thoại in iOS (UIPrintInteractionController, mở bởi expo-print Print.printAsync — app dark) — nền mờ .ios-prd + sheet .ios-pr
   (engine trượt lên theo t). Thanh trên [Hủy | tiêu đề | In], nhóm Máy in / số bản, khu xem trước .pv. Chuỗi là UI hệ thống, không có trong source */
.ios-prd, .ios-fpd, .ios-shd{ position:absolute; inset:0; z-index:30; background:rgba(0,0,0,.4); opacity:0; visibility:hidden; }
.ios-pr{ position:absolute; left:0; right:0; bottom:0; top:calc(52 * var(--pt)); z-index:31; display:flex; flex-direction:column; border-radius:calc(10 * var(--pt)) calc(10 * var(--pt)) 0 0; background:#1C1C1E; overflow:hidden; visibility:hidden; }
.ios-pr .nb{ display:flex; align-items:center; justify-content:space-between; padding:calc(14 * var(--pt)) calc(16 * var(--pt)); font-size:calc(17 * var(--pt)); line-height:1.2; }
.ios-pr .nb > a{ color:#0A84FF; padding:calc(6 * var(--pt)) calc(8 * var(--pt)); margin:calc(-6 * var(--pt)) calc(-8 * var(--pt)); border-radius:calc(8 * var(--pt)); }   /* vùng chạm rộng hơn chữ, không đổi layout */
.ios-pr .nb > b{ font-weight:600; }
.ios-pr .nb > a.off{ font-weight:600; color:rgba(235,235,245,.3); }   /* nút In mờ khi chưa chọn máy in */
.ios-pr .grp{ margin:calc(8 * var(--pt)) calc(16 * var(--pt)); border-radius:calc(10 * var(--pt)); background:#2C2C2E; overflow:hidden; }
.ios-pr .row{ display:flex; align-items:center; justify-content:space-between; min-height:calc(44 * var(--pt)); padding:0 calc(16 * var(--pt)); font-size:calc(17 * var(--pt)); line-height:1.2; }
.ios-pr .row + .row{ border-top:.5px solid rgba(84,84,88,.65); }
.ios-pr .row > small{ font-size:calc(17 * var(--pt)); color:#8E8E93; }
.ios-pr .stp{ display:flex; border-radius:calc(8 * var(--pt)); background:#3A3A3C; }
.ios-pr .stp > i{ width:calc(46 * var(--pt)); height:calc(32 * var(--pt)); display:grid; place-items:center; font-style:normal; font-size:calc(20 * var(--pt)); }
.ios-pr .stp > i + i{ border-left:.5px solid rgba(235,235,245,.2); }
.ios-pr .pv{ flex:1; display:flex; justify-content:center; padding-top:calc(24 * var(--pt)); }
/* Trình chọn tệp iOS (UIDocumentPickerViewController, mở bởi expo-document-picker DocumentPicker.getDocumentAsync — app dark) — nền mờ .ios-fpd
   + sheet .ios-fp (engine trượt lên theo t). Tab "Gần đây" dạng danh sách, chạm 1 tệp là chọn luôn (multiple: false). Chuỗi là UI hệ thống, không có trong source */
.ios-fp{ position:absolute; left:0; right:0; bottom:0; top:calc(52 * var(--pt)); z-index:31; display:flex; flex-direction:column; border-radius:calc(10 * var(--pt)) calc(10 * var(--pt)) 0 0; background:#1C1C1E; overflow:hidden; visibility:hidden; }
.ios-fp .nb{ display:flex; justify-content:flex-end; padding:calc(14 * var(--pt)) calc(16 * var(--pt)) calc(2 * var(--pt)); font-size:calc(17 * var(--pt)); color:#0A84FF; line-height:1.2; }
.ios-fp h5{ padding:0 calc(16 * var(--pt)); font-size:calc(34 * var(--pt)); font-weight:700; line-height:1.2; }   /* large title */
.ios-fp .sr{ display:flex; align-items:center; gap:calc(6 * var(--pt)); margin:calc(8 * var(--pt)) calc(16 * var(--pt)) calc(10 * var(--pt)); padding:calc(7 * var(--pt)) calc(8 * var(--pt)); border-radius:calc(10 * var(--pt)); background:rgba(118,118,128,.24); font-size:calc(17 * var(--pt)); color:rgba(235,235,245,.6); line-height:1.2; }
.ios-fp .ls{ margin-left:calc(16 * var(--pt)); }
.ios-fp .row{ display:flex; align-items:center; gap:calc(12 * var(--pt)); padding:calc(10 * var(--pt)) calc(16 * var(--pt)) calc(10 * var(--pt)) 0; border-bottom:.5px solid rgba(84,84,88,.65); }
.ios-fp .row > span{ flex:1; min-width:0; }
.ios-fp .row b{ display:block; font-size:calc(16 * var(--pt)); font-weight:400; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ios-fp .row small{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(13 * var(--pt)); color:#8E8E93; line-height:1.25; white-space:nowrap; }
.ios-fp .doc{ position:relative; flex:0 0 auto; width:calc(34 * var(--pt)); height:calc(44 * var(--pt)); border-radius:calc(4 * var(--pt)); background:#F2F2F7; }   /* biểu tượng tệp bảng tính */
.ios-fp .doc::before{ content:''; position:absolute; left:calc(6 * var(--pt)); right:calc(6 * var(--pt)); top:calc(8 * var(--pt)); height:calc(14 * var(--pt)); background:repeating-linear-gradient(#c7c7cc 0 calc(1 * var(--pt)), transparent calc(1 * var(--pt)) calc(4.5 * var(--pt))); }
.ios-fp .doc > i{ position:absolute; left:calc(-4 * var(--pt)); bottom:calc(5 * var(--pt)); width:calc(20 * var(--pt)); height:calc(16 * var(--pt)); display:grid; place-items:center; border-radius:calc(3 * var(--pt)); background:#1D6F42; font-style:normal; font-size:calc(10 * var(--pt)); font-weight:800; color:#fff; line-height:1; }
.ios-fp .tb{ margin-top:auto; display:flex; padding:calc(6 * var(--pt)) 0 calc(30 * var(--pt)); border-top:.5px solid rgba(84,84,88,.65); background:#1C1C1E; }
.ios-fp .tb > span{ flex:1; display:flex; flex-direction:column; align-items:center; gap:calc(2 * var(--pt)); font-size:calc(10 * var(--pt)); font-weight:500; color:#8E8E93; line-height:1.2; }
.ios-fp .tb > span.on{ color:#0A84FF; }
/* Bảng chia sẻ iOS (UIActivityViewController, mở bởi Share.share({ message }) — app dark) — nền mờ .ios-shd + sheet .ios-sh
   (engine trượt lên theo t). Đầu sheet xem trước message của Share.share; hàng ứng dụng + nhóm tác vụ là UI hệ thống, không có trong source */
.ios-sh{ position:absolute; left:0; right:0; bottom:0; z-index:31; padding-bottom:calc(34 * var(--pt)); border-radius:calc(12 * var(--pt)) calc(12 * var(--pt)) 0 0; background:#1C1C1E; visibility:hidden; }
.ios-sh .hd{ display:flex; align-items:flex-start; gap:calc(10 * var(--pt)); padding:calc(16 * var(--pt)) calc(16 * var(--pt)) calc(14 * var(--pt)); border-bottom:.5px solid rgba(84,84,88,.65); }
.ios-sh .hd .doc{ flex:0 0 auto; width:calc(40 * var(--pt)); height:calc(40 * var(--pt)); border-radius:calc(8 * var(--pt)); background:#2C2C2E; display:grid; place-items:center; color:#8E8E93; }
.ios-sh .hd .tx{ flex:1; min-width:0; }
.ios-sh .hd .tx p{ font-size:calc(13 * var(--pt)); line-height:1.3; color:#fff; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ios-sh .hd .tx small{ display:block; margin-top:calc(2 * var(--pt)); font-size:calc(12 * var(--pt)); color:#8E8E93; line-height:1.2; }
.ios-sh .hd .x{ flex:0 0 auto; width:calc(30 * var(--pt)); height:calc(30 * var(--pt)); border-radius:50%; background:#3A3A3C; display:grid; place-items:center; color:#AEAEB2; }
.ios-sh .apps{ display:flex; justify-content:space-between; padding:calc(16 * var(--pt)) calc(16 * var(--pt)) calc(14 * var(--pt)); }
.ios-sh .apps > span{ width:calc(72 * var(--pt)); display:flex; flex-direction:column; align-items:center; gap:calc(6 * var(--pt)); font-size:calc(11 * var(--pt)); color:#fff; line-height:1.2; white-space:nowrap; }
.ios-sh .apps i{ width:calc(60 * var(--pt)); height:calc(60 * var(--pt)); border-radius:calc(14 * var(--pt)); display:grid; place-items:center; font-style:normal; color:#fff; }
.ios-sh .apps .msg{ background:linear-gradient(#5BF675,#0CBD2A); }
.ios-sh .apps .mail{ background:linear-gradient(#1E9BFF,#0A6CFF); }
.ios-sh .apps .zl{ background:#0068FF; font-size:calc(15 * var(--pt)); font-weight:800; letter-spacing:calc(-.3 * var(--pt)); }
.ios-sh .apps .ms{ background:linear-gradient(135deg,#00B2FF,#6A5CFF 55%,#FF5C87); }
.ios-sh .grp{ margin:0 calc(16 * var(--pt)) calc(10 * var(--pt)); border-radius:calc(10 * var(--pt)); background:#2C2C2E; overflow:hidden; }
.ios-sh .row{ display:flex; align-items:center; justify-content:space-between; min-height:calc(46 * var(--pt)); padding:0 calc(16 * var(--pt)); font-size:calc(17 * var(--pt)); color:#fff; line-height:1.2; }
.ios-sh .row + .row{ border-top:.5px solid rgba(84,84,88,.65); }
.ios-sh .row > .ion{ color:#fff; }
.push{ position:absolute; left:7px; right:7px; top:6px; z-index:40; display:flex; gap:8px; padding:8px 10px; border-radius:15px; background:rgba(62,56,50,.97); box-shadow:0 10px 24px rgba(0,0,0,.45); visibility:hidden; }
.push img{ width:26px; height:26px; border-radius:7px; flex:0 0 auto; background:#fff; object-fit:cover; }
.push .ap{ display:flex; justify-content:space-between; font-size:7.5px; color:rgba(255,255,255,.6); letter-spacing:.3px; text-transform:uppercase; }
.push b{ display:block; font-size:10px; margin:1px 0; }
.push p{ font-size:9px; line-height:1.35; color:rgba(255,255,255,.85); }
.skip{ position:absolute; inset:0; z-index:35; display:grid; place-items:center; background:rgba(10,6,2,.78); opacity:0; visibility:hidden; }
.skip span{ display:inline-flex; gap:6px; align-items:center; padding:9px 15px; border-radius:999px; background:var(--card); border:1px solid var(--bd); color:var(--a); font-weight:800; font-size:11.5px; }

/* ── Ngón tay ảo (engine Pointer) ── */
.fx{ position:absolute; inset:0; z-index:60; pointer-events:none; overflow:hidden; border-radius:32px; }
.fx .finger,.fx .ripple{ position:absolute; left:0; top:0; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; opacity:0; }
.fx .finger{ background:rgba(255,255,255,.5); border:2px solid rgba(255,255,255,.95); box-shadow:0 2px 10px rgba(0,0,0,.5); }
.fx .ripple{ border:2px solid #fff; }
.fx .ring{ position:absolute; left:0; top:0; border:2px solid #FF4F9A; box-shadow:0 0 0 4px rgba(255,79,154,.22), 0 0 18px rgba(255,79,154,.45); opacity:0; }