/* ═══════════════════════════════════════════════════════════════
   Guide videos — mockup trang ADMIN WEB (Inertia + Vue + Tailwind v4) trong khung trình duyệt
   DÙNG CHUNG cho mọi video admin — sửa ở đây là mọi video đổi theo. Video KHÔNG tự viết
   style riêng: thiếu class thì thêm vào đây, đặt trong khối của trang / component tương ứng.

   Khung: <x-guide-video.browser> (#browser, thay cho #phone) → #scr là trang 1440×900 px CSS,
   engine GV.Camera đặt transform (mặc định thu vừa khung nhìn: scale 1400/1440 → 1400×875 trên sân khấu).
   Trang: <x-guide-video.admin-layout> = resources/js/Layouts/Default.vue ở breakpoint lg
   (sidebar mở rộng w-64). Nội dung từng trang copy class Tailwind từ:
     .ad-*   Layouts/Default.vue (sidebar, header, footer, toast), StudyConfigTabs.vue,
             thẻ / bảng / chip / badge / modal dùng chung của các trang admin
     .tch-*  Pages/Study/Teachers.vue, Pages/Study/TeacherDetail.vue,
             Components/StudyTeacherActionModal.vue
     .tap-*  Pages/Study/TeacherApprovals.vue, Components/ImageLightbox.vue
     .cdt-*  Pages/Study/RecordReview.vue (chốt điểm thành tích)
     .gft-*  Pages/Study/GiftTags.vue (duyệt quà từ gian hàng), Pages/Study/Gifts.vue (kho quà)
     .gor-*  Pages/Study/GiftOrders.vue (đơn đổi quà)
     .wal-*  Pages/Study/Wallets.vue, Pages/Study/WalletDetail.vue (ví & cấp điểm tay)
     .cfg-*  Pages/Study/RewardRules.vue, Pages/Study/PointLimits.vue, Pages/Study/Badges.vue (cấu hình Hiếu Học)
     .psc-*  Pages/Study/PreschoolClasses.vue, PreschoolTemplates.vue, PreschoolReports.vue (mầm non)
     .ws-*   Pages/Subscribe/Start.vue, Order.vue, Success.vue (trang mua gói công khai /subscribe, không có layout admin)
     .set-*  Pages/Setting/Index.vue (Cài đặt: Tổng quan, Gói dịch vụ, gói mở rộng thành viên), Components/SettingsGroupTabs.vue (= .ad-tabs)
   Màu = bảng màu Tailwind v4 (oklch), line-height = tỉ lệ không đơn vị như Tailwind v4
   (text-xs calc(1/.75), text-sm calc(1.25/.875)...) để con kế thừa đúng như trang thật.
═══════════════════════════════════════════════════════════════ */
.v-browser{
  --s50:oklch(98.5% .001 106.423); --s100:oklch(97% .001 106.424); --s200:oklch(92.3% .003 48.717);
  --s300:oklch(86.9% .005 56.366); --s400:oklch(70.9% .01 56.259); --s500:oklch(55.3% .013 58.071);
  --s600:oklch(44.4% .011 73.639); --s700:oklch(37.4% .01 67.558); --s800:oklch(26.8% .007 34.298);
  --s900:oklch(21.6% .006 56.043);
  --a50:oklch(98.7% .022 95.277); --a100:oklch(96.2% .059 95.617); --a200:oklch(92.4% .12 95.746);
  --a300:oklch(87.9% .169 91.605); --a400:oklch(82.8% .189 84.429); --a500:oklch(76.9% .188 70.08);
  --a600:oklch(66.6% .179 58.318); --a700:oklch(55.5% .163 48.998); --a800:oklch(47.3% .137 46.201);
  --a900:oklch(41.4% .112 45.904); --a950:oklch(27.9% .077 45.635);
  --e50:oklch(97.9% .021 166.113); --e200:oklch(90.5% .093 164.15); --e500:oklch(69.6% .17 162.48);
  --e600:oklch(59.6% .145 163.225); --e700:oklch(50.8% .118 165.612); --e100:oklch(95% .052 163.051);
  --e800:oklch(43.2% .095 166.913);
  --g50:oklch(98.2% .018 155.826); --g200:oklch(92.5% .084 155.995); --g800:oklch(44.8% .119 151.328);
  --r50:oklch(97.1% .013 17.38); --r200:oklch(88.5% .062 18.334); --r300:oklch(80.8% .114 19.571);
  --r500:oklch(63.7% .237 25.331); --r600:oklch(57.7% .245 27.325); --r700:oklch(50.5% .213 27.518);
  --r800:oklch(44.4% .177 26.899);
  --i50:oklch(96.2% .018 272.314); --i600:oklch(51.1% .262 276.966);
  --sky50:oklch(97.7% .013 236.62); --sky600:oklch(58.8% .158 241.966);
  --sky100:oklch(95.1% .026 236.824); --sky200:oklch(90.1% .058 230.902); --sky500:oklch(68.5% .169 237.323);
  --sky700:oklch(50% .134 242.749);
  --v50:oklch(96.9% .016 293.756); --v200:oklch(89.4% .057 293.283); --v700:oklch(49.1% .27 292.581);
  --gn100:oklch(96.2% .044 156.743); --gn300:oklch(87.1% .15 154.449); --gn700:oklch(52.7% .154 150.069);
  --o50:oklch(98% .016 73.684); --o100:oklch(95.4% .038 75.164); --o200:oklch(90.1% .076 70.697);
  --o500:oklch(70.5% .213 47.604); --o600:oklch(64.6% .222 41.116); --o700:oklch(55.3% .195 38.402);
  --r100:oklch(93.6% .032 17.717);
  --p200:oklch(90.2% .063 306.703); --p500:oklch(62.7% .265 303.9); --p700:oklch(49.6% .265 301.924);
  --e300:oklch(84.5% .143 164.978); --e400:oklch(76.5% .177 163.223);
  --sky300:oklch(82.8% .111 230.318); --sky400:oklch(74.6% .16 232.661); --r400:oklch(70.4% .191 22.216);
  --sh-sm:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --sh-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  --lh-xs:calc(1 / .75); --lh-sm:calc(1.25 / .875); --lh-lg:calc(1.75 / 1.125); --lh-2xl:calc(2 / 1.5);
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
}

/* ── Khung trình duyệt trên sân khấu (thay chỗ điện thoại: trái, căn giữa dọc) ──
   Đổi bề ngang khung → sửa width ở .v-browser + .br-vp (cao = rộng × 900/1440) + scale mặc định của .br-scr
   + left của .v-panel-narrow. Camera tự tính tỉ lệ theo .br-vp. */
.v-browser{
  position:absolute; left:40px; top:74px; width:1400px; border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 46px 70px -30px rgba(42,32,20,.6), 0 0 0 1px rgba(42,32,20,.14);
}
.br-bar{ position:relative; height:52px; display:flex; align-items:center; gap:18px; padding:0 18px; background:#EEE9E1; border-bottom:1px solid #DDD5C8; font-family:'DM Sans',system-ui,sans-serif; }
.br-dots{ display:flex; gap:8px; }
.br-dots i{ width:12px; height:12px; border-radius:50%; background:#ff5f57; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12); }
.br-dots i:nth-child(2){ background:#febc2e; }
.br-dots i:nth-child(3){ background:#28c840; }
.br-nav{ display:flex; gap:10px; color:#8A8174; }
.br-nav svg{ display:block; }
.br-nav .off{ color:#C4BCAF; }
.br-url{
  flex:1; height:32px; display:flex; align-items:center; gap:8px; padding:0 14px; border-radius:999px;
  background:#fff; box-shadow:inset 0 0 0 1px #DDD5C8; font-size:14px; color:#4A4238; white-space:nowrap; overflow:hidden;
}
.br-url svg{ flex:none; display:block; color:#8A8174; }
.br-vp{ position:relative; width:1400px; height:875px; overflow:hidden; background:var(--s50); }

/* Trang web bên trong: 1440×900 px CSS — GV.Camera đặt transform (CSS chỉ là giá trị mặc định trước khi đo) */
.br-scr{
  position:absolute; left:0; top:0; width:1440px; height:900px; overflow:hidden; transform-origin:0 0; transform:scale(.9722);
  background:var(--s50); color:#000; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  font-family:'Instrument Sans',ui-sans-serif,system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
}
.br-scr svg{ display:block; }
.br-scr .scr{ padding-top:0; display:block; background:var(--s50); }
.br-scr .fx{ border-radius:0; }

/* Panel chữ hẹp — khung trình duyệt chiếm gần hết sân khấu nên panel thành cột hẹp bên phải, chữ nhỏ lại */
.v-panel.v-panel-narrow{ left:1488px; width:392px; }
.v-panel-narrow .v-brand{ top:80px; gap:10px; }
.v-panel-narrow .v-brand img{ width:40px; height:40px; }
.v-panel-narrow .v-brand span{ font-size:24px; }
.v-panel-narrow .v-brand i{ height:22px; }
.v-panel-narrow .v-brand em{ font-size:11px; letter-spacing:1.5px; }
.v-panel-narrow .v-steps{ top:212px; width:392px; height:720px; }
.v-panel-narrow .v-kick{ gap:10px; font-size:15px; letter-spacing:2.5px; }
.v-panel-narrow .v-kick::before{ width:32px; }
.v-panel-narrow .v-step h2{ font-size:46px; margin:14px 0 18px; }
.v-panel-narrow .v-step p{ font-size:20px; max-width:392px; }
.v-panel-narrow .v-step .k{ padding:0 8px; border-radius:8px; }
.v-panel-narrow .v-note{ margin-top:20px; max-width:392px; gap:10px; padding:12px 16px; border-radius:14px; font-size:16px; }
.v-panel-narrow .v-dots{ top:988px; gap:10px; }
.v-panel-narrow .v-dots span{ width:10px; height:10px; }
.v-panel-narrow .v-dots span.on{ width:34px; }
.v-panel-narrow .v-url{ right:0; top:980px; font-size:16px; }

/* ── Con trỏ chuột (GV.Pointer mode 'mouse'): mũi tên SVG, mũi nhọn đúng toạ độ (x, y) ── */
.fx.mouse .finger{
  width:26px; height:34px; margin:0; border:0; border-radius:0; background:none; box-shadow:none;
  transform-origin:1.5px 1.5px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.fx.mouse .finger svg{ display:block; width:100%; height:100%; overflow:visible; }
.fx.mouse .ripple{ width:30px; height:30px; margin:-15px 0 0 -15px; border:2.5px solid #FF4F9A; }
.fx.mouse .ring{ border-width:3px; }

/* ═══ Layouts/Default.vue ═══ */
.ad{ background:var(--s50); }

/* Sidebar: fixed top-0 left-0 h-full z-40 flex flex-col w-64 bg-linear-to-b from-amber-950 to-stone-900 */
.ad-side{
  position:absolute; left:0; top:0; z-index:40; width:256px; height:900px; display:flex; flex-direction:column;
  background:linear-gradient(to bottom in oklab, var(--a950), var(--s900));
}
.ad-logo{ flex:none; height:64px; display:flex; align-items:center; padding:0 16px; border-bottom:1px solid color-mix(in oklab, var(--a800) 40%, transparent); }
.ad-logo-in{ flex:1; display:flex; align-items:center; gap:12px; overflow:hidden; }
.ad-logo-ic{ flex:none; width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--a500); box-shadow:var(--sh-lg); color:var(--a950); }
.ad-logo-ic svg{ width:20px; height:20px; }
.ad-logo-t{ overflow:hidden; }
.ad-logo-t b{ display:block; font-size:14px; font-weight:700; line-height:1.25; white-space:nowrap; color:var(--a100); }
.ad-logo-t small{ display:block; font-size:12px; line-height:var(--lh-xs); white-space:nowrap; color:color-mix(in oklab, var(--a400) 70%, transparent); }
/* nav: flex-1 overflow-y-auto py-4 space-y-1 px-2 — cuộn = translateY của .ad-nav-in (video đặt theo t) */
.ad-nav{ position:relative; flex:1; min-height:0; overflow:hidden; }
.ad-nav-in{ padding:16px 8px; }
.ad-nav-in > :not(:last-child){ margin-bottom:4px; }
.ad-grp{ padding:16px 8px 4px; }
.ad-grp:first-child{ padding-top:0; }
.ad-grp span{ font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:color-mix(in oklab, var(--a600) 60%, transparent); }
.ad-it{ position:relative; display:flex; align-items:center; gap:12px; padding:8px; border-radius:8px; color:var(--s400); }
.ad-it.hov{ color:var(--a200); background:color-mix(in oklab, #fff 5%, transparent); }
.ad-it.on{ color:var(--a300); background:color-mix(in oklab, var(--a500) 20%, transparent); }
.ad-it.on::before{ content:''; position:absolute; left:0; top:50%; width:2px; height:20px; transform:translateY(-50%); border-radius:0 999px 999px 0; background:var(--a400); }
.ad-it-ic{ position:relative; flex:none; width:20px; height:20px; }
.ad-it-ic svg{ width:20px; height:20px; }
.ad-it-l{ flex:1; min-width:0; display:flex; align-items:flex-start; gap:4px; }
.ad-it-l > span{ font-size:14px; line-height:var(--lh-sm); font-weight:500; white-space:nowrap; }
/* Badge NEW — trang thật có animate-pulse, video để tĩnh */
.ad-it-l > em{
  flex:none; margin-top:-4px; padding:2px 4px; border-radius:6px; background:var(--r500); color:#fff;
  font-style:normal; font-size:8px; font-weight:800; line-height:1; text-transform:uppercase;
  box-shadow:0 0 0 1px color-mix(in oklab, var(--r300) 60%, transparent), 0 0 8px 2px rgba(239,68,68,.9);
}
.ad-side-ft{ flex:none; padding:12px; border-top:1px solid color-mix(in oklab, var(--a800) 40%, transparent); }
.ad-side-ft div{ display:flex; width:100%; align-items:center; justify-content:center; gap:8px; padding:6px 0; border-radius:8px; color:var(--s500); }
.ad-side-ft svg{ width:16px; height:16px; }
.ad-side-ft span{ font-size:12px; line-height:var(--lh-xs); }

/* Vùng chính lg:ml-64. Header sticky → đứng yên, .ad-body cuộn = translateY (video đặt theo t) */
.ad-main{ position:absolute; left:256px; top:0; width:1184px; height:900px; overflow:hidden; }
.ad-hd{
  position:absolute; left:0; right:0; top:0; z-index:20; height:64px; display:flex; align-items:center; gap:16px; padding:0 24px;
  background:color-mix(in oklab, #fff 80%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--s200); box-shadow:var(--sh-sm);
}
.ad-crumbs{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; font-size:14px; line-height:var(--lh-sm); }
.ad-crumbs .home{ flex:none; color:var(--s400); }
.ad-crumbs .home svg{ width:16px; height:16px; }
.ad-crumbs .chev{ flex:none; width:12px; height:12px; color:var(--s300); }
.ad-crumbs .c{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--s400); }
.ad-crumbs .c.cur{ color:var(--s700); font-weight:500; }
.ad-hd-r{ flex:none; display:flex; align-items:center; gap:12px; }
.ad-bell{ position:relative; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:8px; color:var(--s500); }
.ad-bell svg{ width:20px; height:20px; }
.ad-bell i{ position:absolute; top:4px; right:4px; width:8px; height:8px; border-radius:50%; background:var(--a500); border:2px solid #fff; }
.ad-user{ display:flex; align-items:center; gap:8px; padding-left:12px; border-left:1px solid var(--s200); }
.ad-ava{
  flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(to bottom right in oklab, var(--a400), var(--a600)); box-shadow:var(--sh-sm);
  color:#fff; font-size:14px; line-height:var(--lh-sm); font-weight:600;
}
.ad-user-t{ min-width:0; }
.ad-user-t b{ display:block; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; line-height:1.25; font-weight:500; color:var(--s700); }
.ad-user-t span{ display:inline-block; font-size:12px; line-height:var(--lh-xs); color:var(--s400); }

.ad-body{ position:absolute; left:0; right:0; top:0; min-height:900px; padding-top:64px; display:flex; flex-direction:column; }
.ad-content{ flex:1; padding:24px; }
.ad-title{ margin-bottom:24px; }
.ad-title h1{ font-size:24px; line-height:var(--lh-2xl); font-weight:700; letter-spacing:-.025em; color:var(--s800); }
.ad-ft{ padding:16px 24px; border-top:1px solid var(--s200); background:#fff; }
.ad-ft-in{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
.ad-ft-l{ display:flex; align-items:center; gap:6px; }
.ad-ft-l i{ width:16px; height:16px; border-radius:4px; display:flex; align-items:center; justify-content:center; background:var(--a500); color:#fff; }
.ad-ft-l i svg{ width:10px; height:10px; }
.ad-ft-l strong{ font-weight:700; color:var(--s500); }
.ad-ft-r{ display:flex; align-items:center; gap:16px; }
.ad-ft-r .sep{ color:var(--s300); }

/* Toast flash (Default.vue): fixed top-5 right-5 z-100 max-w-sm px-4 py-3 rounded-lg shadow-lg border flex items-start gap-3.
   Lớp phủ cấp #scr (anh em các .scr) — video đổi chữ + show() theo t (thật: transition opacity + translateX 20px) */
.ad-toast{
  position:absolute; top:20px; right:20px; z-index:55; max-width:384px; display:flex; align-items:flex-start; gap:12px;
  padding:12px 16px; border-radius:8px; border:1px solid var(--g200); background:var(--g50); color:var(--g800); box-shadow:var(--sh-lg);
  visibility:hidden; opacity:0;
}
.ad-toast > svg{ flex:none; width:20px; height:20px; margin-top:2px; }
.ad-toast p{ flex:1; font-size:14px; line-height:1.375; font-weight:500; }
.ad-toast .x{ flex:none; color:var(--s400); }
.ad-toast .x svg{ width:16px; height:16px; }

/* ═══ Components/StudyConfigTabs.vue: flex items-center gap-1 mb-5 border-b border-stone-200 ═══ */
/* StudyConfigTabs.vue: lớp ngoài cuộn ngang (overflow-x-auto), lớp trong w-max min-w-full giữ border-b; tab nowrap */
.ad-tabs{ position:relative; margin-bottom:20px; overflow:hidden; }
.ad-tabs-in{ display:flex; align-items:center; gap:4px; width:max-content; min-width:100%; border-bottom:1px solid var(--s200); }
.ad-tab{ padding:8px 16px; margin-bottom:-1px; border-bottom:2px solid transparent; font-size:14px; line-height:var(--lh-sm); font-weight:600; color:var(--s500); white-space:nowrap; }
.ad-tab.on{ border-color:var(--a500); color:var(--a700); }
.ad-tab.hov:not(.on){ color:var(--s700); }   /* hover:text-stone-700 */

/* ═══ Khối dùng chung của các trang admin ═══ */
/* Hộp nhắc vàng: bg-amber-50 border border-amber-200 rounded-xl px-5 py-3.5 mb-5 text-sm text-amber-800 leading-relaxed */
.ad-hint{ margin-bottom:20px; padding:14px 20px; border-radius:12px; border:1px solid var(--a200); background:var(--a50); color:var(--a800); font-size:14px; line-height:1.625; }
.ad-hint code{ padding:2px 6px; border-radius:4px; background:color-mix(in oklab, #fff 70%, transparent); font-family:var(--mono); font-size:1em; }
/* Chip lọc trạng thái: px-3 py-1.5 rounded-full text-xs font-semibold border */
.ad-filter{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
.ad-chip{ padding:6px 12px; border-radius:999px; border:1px solid var(--s200); background:#fff; color:var(--s600); font-size:12px; line-height:var(--lh-xs); font-weight:600; }
.ad-chip.on{ border-color:var(--a500); background:var(--a500); color:#fff; }
.ad-chip .n{ margin-left:4px; padding:0 6px; border-radius:999px; background:var(--s100); color:var(--s500); font-size:10px; }
.ad-chip.on .n{ background:color-mix(in oklab, #fff 25%, transparent); color:inherit; }
.ad-chip.hov:not(.on){ border-color:var(--a300); }
/* Ô tìm: ml-auto sm:w-72 px-3.5 py-2 text-sm rounded-lg border border-stone-300 bg-white */
.ad-search{ margin-left:auto; width:288px; padding:8px 14px; border-radius:8px; border:1px solid var(--s300); background:#fff; font-size:14px; line-height:var(--lh-sm); color:var(--s400); white-space:nowrap; overflow:hidden; }
/* Thẻ trắng: bg-white rounded-xl border border-stone-200 (overflow-hidden) */
.ad-card{ border-radius:12px; border:1px solid var(--s200); background:#fff; overflow:hidden; }
/* Bảng: w-full text-sm, thead bg-stone-50 text-stone-500 text-xs uppercase tracking-wide, th font-semibold px-5 py-3,
   tbody divide-y divide-stone-100. border-collapse:separate + viền trên td: hàng trượt (GV.Reorder) không bỏ lại viền */
.ad-tbl{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; line-height:var(--lh-sm); }
.ad-tbl thead{ background:var(--s50); color:var(--s500); font-size:12px; line-height:var(--lh-xs); text-transform:uppercase; letter-spacing:.025em; }
.ad-tbl th{ padding:12px 20px; font-weight:600; text-align:left; }
.ad-tbl td{ padding:14px 20px; vertical-align:top; background:#fff; }
.ad-tbl tbody tr:not(:last-child) > td{ border-bottom:1px solid var(--s100); }
.ad-tbl .tc{ text-align:center; }
.ad-tbl .tr{ text-align:right; }
.ad-tbl tbody tr{ position:relative; }
/* .hov = rê chuột (video bật theo t): hàng hover:bg-stone-50/70 */
.ad-tbl tbody tr.hov > td{ background:color-mix(in oklab, var(--s50) 70%, #fff); }
/* Badge trạng thái: text-[11px] px-2 py-0.5 rounded-full border font-medium + tone */
.ad-badge{ display:inline; padding:2px 8px; border-radius:999px; border:1px solid var(--s200); background:var(--s100); color:var(--s500); font-size:11px; font-weight:500; }
.ad-badge.pending{ border-color:var(--a200); background:var(--a50); color:var(--a700); }
.ad-badge.active{ border-color:var(--e200); background:var(--e50); color:var(--e700); }
.ad-badge.rejected{ border-color:var(--r200); background:var(--r50); color:var(--r700); }
.ad-badge.suspended{ border-color:var(--s200); background:var(--s100); color:var(--s500); }
/* Link thao tác trong bảng: text-xs font-semibold */
.ad-act{ display:inline-block; font-size:12px; line-height:var(--lh-xs); font-weight:600; color:var(--s400); }
.ad-act + .ad-act{ margin-left:12px; }
.ad-act.ok{ color:var(--e600); }
.ad-act.go{ color:var(--a600); }
.ad-act.hov{ color:var(--r600); }
.ad-act.ok.hov{ color:var(--e700); }
.ad-act.go.hov{ color:var(--a700); }

/* Modal (StudyTeacherActionModal.vue): fixed inset-0 z-50 flex items-center justify-center px-4, nền rgba(0,0,0,.55);
   card bg-white rounded-2xl w-full max-w-md p-6. Lớp phủ cấp #scr, video đổi chữ theo t */
.ad-modal{ position:absolute; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:0 16px; background:rgba(0,0,0,.55); visibility:hidden; opacity:0; }
.ad-modal-card{ width:100%; max-width:448px; padding:24px; border-radius:16px; background:#fff; }
.ad-modal-card h3{ font-size:16px; line-height:1.5; font-weight:600; color:var(--s800); }
.ad-modal-card .who{ margin-top:4px; font-size:14px; line-height:var(--lh-sm); color:var(--s500); }
.ad-modal-card .desc{ margin-top:8px; font-size:14px; line-height:1.625; color:var(--s500); }
.ad-modal-card .fld{ margin-top:16px; }
.ad-modal-card label{ display:block; margin-bottom:4px; font-size:12px; line-height:var(--lh-xs); color:var(--s500); }
.ad-modal-card label .req{ color:var(--r500); }
/* textarea rows=3 (py-2 + 3 dòng × 20 + viền = 78px): w-full px-3 py-2 text-sm rounded-lg border border-stone-300 bg-white, focus:border-amber-400 focus:ring-2 focus:ring-amber-100 */
.ad-ta{ width:100%; height:78px; padding:8px 12px; border-radius:8px; border:1px solid var(--s300); background:#fff; font-size:14px; line-height:var(--lh-sm); color:#000; overflow:hidden; white-space:pre-wrap; word-wrap:break-word; }
.ad-ta .plh{ color:var(--s400); }
.ad-ta.focus{ border-color:var(--a400); box-shadow:0 0 0 2px var(--a100); }
.ad-ta .caret{ width:1px; height:17px; margin-left:0; vertical-align:-3px; background:#000; }
.ad-ta:not(.focus) .caret{ display:none; }
.ad-ta:not(.has) .caret{ margin-right:-1px; }   /* ô trống: con trỏ đè lên đầu placeholder, không đẩy chữ */
.ad-modal-card .btns{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:20px; }
.ad-modal-card .btns span{ padding:8px 16px; border-radius:8px; font-size:14px; line-height:var(--lh-sm); font-weight:600; color:var(--s500); }
.ad-modal-card .btns .main{ padding:8px 20px; color:#fff; background:var(--e500); }
.ad-modal-card .btns .main.red{ background:var(--r500); }
.ad-modal-card .btns .main.hov{ background:var(--e600); }
.ad-modal-card .btns .main.red.hov{ background:var(--r600); }
.ad-modal-card .btns .main.busy{ opacity:.5; }

/* Dashboard — video chỉ đi ngang qua, vẽ khung mờ (không liên quan thao tác) */
.ad-skel-row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-bottom:20px; }
.ad-skel{ height:112px; border-radius:12px; border:1px solid var(--s200); background:#fff; padding:18px 20px; }
.ad-skel i{ display:block; height:10px; border-radius:6px; background:var(--s100); }
.ad-skel i + i{ margin-top:14px; height:22px; width:55%; background:var(--s200); }
.ad-skel.tall{ height:360px; }
.ad-skel-2{ display:grid; grid-template-columns:2fr 1fr; gap:20px; }

/* ═══ Pages/Study/Teachers.vue ═══ */
.tch-tbl{ min-width:1120px; }
.tch-tbl .nm{ font-weight:600; color:var(--s800); }
.tch-tbl .nm.hov{ color:var(--a600); }
.tch-tbl .sub{ margin-top:2px; font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
.tch-tbl .sub.tel{ margin-top:0; }
.tch-tbl .reg{ margin-top:4px; font-size:11px; color:var(--s300); }
.tch-tbl .v{ color:var(--s700); }
.tch-tbl .by{ margin-top:6px; font-size:11px; color:var(--s400); }
.tch-tbl .why{ max-width:220px; margin-top:4px; font-size:12px; line-height:1.625; color:var(--r600); }
.tch-tbl td.acts{ text-align:right; white-space:nowrap; }

/* ═══ Pages/Study/TeacherDetail.vue ═══ */
.tch-top{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:20px; }
.tch-back{ display:inline; font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
.tch-back.hov{ color:var(--s600); }
.tch-name{ display:flex; align-items:center; gap:8px; margin-top:4px; }
.tch-name h2{ font-size:18px; line-height:var(--lh-lg); font-weight:600; color:var(--s800); }
.tch-school{ margin-top:2px; font-size:14px; line-height:var(--lh-sm); color:var(--s500); }
.tch-btns{ display:flex; align-items:center; gap:8px; }
.tch-btn{ padding:10px 16px; border-radius:8px; font-size:14px; line-height:var(--lh-sm); font-weight:600; border:1px solid transparent; }
.tch-btn.ok{ border:0; background:var(--e500); color:#fff; }
.tch-btn.ok.hov{ background:var(--e600); }
.tch-btn.no{ border-color:var(--s300); color:var(--s600); }
.tch-btn.lock{ border-color:var(--r200); color:var(--r600); }
.tch-why{ margin-bottom:20px; padding:14px 20px; border-radius:12px; border:1px solid var(--r200); background:var(--r50); }
.tch-why b{ display:block; font-size:12px; line-height:var(--lh-xs); font-weight:600; letter-spacing:.025em; text-transform:uppercase; color:var(--r700); }
.tch-why p{ margin-top:4px; font-size:14px; line-height:1.625; color:var(--r800); }
.tch-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
.tch-prof{ grid-column:span 2 / span 2; }
.tch-hd{ display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--s100); }
.tch-hd p, .tch-cls-hd p{ font-size:14px; line-height:var(--lh-sm); font-weight:600; color:var(--s800); }
/* Ảnh chân dung (w-10 h-10 rounded-lg object-cover border border-stone-200) — video thay ảnh bằng ô emoji */
.tch-face{ flex:none; width:40px; height:40px; border-radius:8px; border:1px solid var(--s200); background:var(--a50); display:grid; place-items:center; font-size:22px; line-height:1; }
.tch-dl > div{ display:flex; align-items:flex-start; gap:16px; padding:10px 20px; }
.tch-dl > div:not(:last-child){ border-bottom:1px solid var(--s50); }
.tch-dl dt{ flex:none; width:160px; padding-top:2px; font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
.tch-dl dd{ font-size:14px; line-height:1.625; color:var(--s700); }
.tch-note{ padding:14px 20px; border-top:1px solid var(--s100); background:color-mix(in oklab, var(--s50) 60%, transparent); }
.tch-note small{ display:block; font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
.tch-note p{ margin-top:4px; font-size:14px; line-height:1.625; color:var(--s600); }
.tch-by{ padding:12px 20px; border-top:1px solid var(--s100); font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
.tch-side > :not(:last-child){ margin-bottom:12px; }
.tch-box{ padding:14px 20px; border-radius:12px; border:1px solid var(--s200); background:#fff; }
.tch-box .lb{ font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
.tch-box .num{ margin-top:4px; font-size:24px; line-height:var(--lh-2xl); font-weight:600; color:var(--s800); }
.tch-box .num.gr{ color:var(--e600); }
.tch-box .code{ margin-top:4px; font-family:var(--mono); font-weight:600; color:var(--a700); }
.tch-box .cnt{ margin-top:8px; }
.tch-box .cnt strong{ font-weight:700; color:var(--s600); }
.tch-box .ref{ margin-top:10px; padding-top:10px; border-top:1px solid var(--s100); }
.tch-box .ref p{ margin-top:2px; font-size:14px; line-height:var(--lh-sm); color:var(--s700); }
.tch-box .ref p span{ font-family:var(--mono); font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
.tch-box .row{ display:flex; align-items:center; justify-content:space-between; }
.tch-box .edit{ font-size:12px; line-height:var(--lh-xs); font-weight:600; color:var(--a600); }
.tch-box .bank{ margin-top:4px; font-size:14px; line-height:var(--lh-sm); color:var(--s400); }
.tch-cls{ margin-top:20px; }
.tch-cls-hd{ padding:14px 20px; border-bottom:1px solid var(--s100); }
.tch-empty{ padding:56px 0; text-align:center; color:var(--s400); }
.tch-empty b{ display:block; margin-bottom:8px; font-size:30px; line-height:calc(2.25 / 1.875); font-weight:400; }
.tch-empty p{ font-size:14px; line-height:var(--lh-sm); }

/* ═══ Pages/Study/TeacherApprovals.vue ═══ */
/* Tab thành tích / học sinh: flex flex-wrap items-center gap-2 mb-4; nút px-4 py-2 text-sm font-semibold rounded-full border */
.tap-tabs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:16px; }
.tap-tab{ padding:8px 16px; border-radius:999px; border:1px solid var(--s200); background:#fff; color:var(--s600); font-size:14px; line-height:var(--lh-sm); font-weight:600; white-space:nowrap; }
.tap-tab.hov:not(.on){ background:var(--s50); }
.tap-tab.on{ border-color:var(--a500); background:var(--a500); color:#fff; }
/* số đếm: ml-1.5 text-xs px-1.5 py-0.5 rounded-full (bg-white/25 khi đang chọn) */
.tap-tab .n{ margin-left:6px; padding:2px 6px; border-radius:999px; background:var(--s100); color:var(--s500); font-size:12px; line-height:var(--lh-xs); }
.tap-tab.on .n{ background:color-mix(in oklab, #fff 25%, transparent); color:inherit; }
/* Ô tìm: ml-auto w-64 px-3 py-2 text-sm border border-stone-200 rounded-lg bg-white placeholder-stone-400 */
.tap-search{ margin-left:auto; width:256px; padding:8px 12px; border-radius:8px; border:1px solid var(--s200); background:#fff; font-size:14px; line-height:var(--lh-sm); color:var(--s400); white-space:nowrap; overflow:hidden; }
/* Thanh chọn nhiều: mb-4 flex flex-wrap items-center gap-3 bg-white border border-stone-200 rounded-xl px-4 py-3 */
.tap-bulk{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:16px; padding:12px 16px; border-radius:12px; border:1px solid var(--s200); background:#fff; font-size:14px; line-height:var(--lh-sm); }
.tap-all{ display:flex; align-items:center; gap:8px; color:var(--s600); }
.tap-bulk .cnt{ font-weight:600; color:var(--s800); }
.tap-bulk .hint{ color:var(--s400); }
.tap-bulk .b{ padding:6px 16px; border-radius:8px; font-weight:600; }
.tap-bulk .b.ok{ background:var(--e500); color:#fff; }
.tap-bulk .b.ok.hov{ background:var(--e600); }
.tap-bulk .b.no{ border:1px solid var(--r200); background:#fff; color:var(--r600); }
/* Checkbox: trang không cài @tailwindcss/forms → ô tick MẶC ĐỊNH của Chrome (w-4 h-4), không phải màu amber */
.tap-cb{ position:relative; flex:none; width:16px; height:16px; border-radius:2px; border:1px solid #767676; background:#fff; }
.tap-cb.hov{ border-color:#4f4f4f; }
.tap-cb.on{ border-color:#0075ff; background:#0075ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.3l2.6 2.6L11 4.4' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/100% no-repeat; }
.tap-cb.on.hov{ border-color:#005cc8; background-color:#005cc8; }
/* Danh sách space-y-3; mỗi dòng bg-white rounded-xl border overflow-hidden (đang chọn: border-amber-400 ring-1 ring-amber-200) */
.tap-list > :not(:last-child){ margin-bottom:12px; }
.tap-row{ position:relative; border-radius:12px; border:1px solid var(--s200); background:#fff; overflow:hidden; }
.tap-row.sel{ border-color:var(--a400); box-shadow:0 0 0 1px var(--a200); }
.tap-row > .in{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; }
.tap-row .tap-cb{ margin-top:4px; }
.tap-row .bd{ flex:1; min-width:0; }
.tap-hd{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px 12px; }
.tap-hd p{ font-weight:600; line-height:1.375; color:var(--s800); }
/* tag nguồn / mã HS: text-[11px] px-1.5 py-0.5 rounded bg-stone-100 text-stone-500 font-medium */
.tap-tag{ padding:2px 6px; border-radius:4px; background:var(--s100); color:var(--s500); font-size:11px; font-weight:500; }
.tap-desc{ margin-top:4px; font-size:14px; line-height:1.625; color:var(--s600); }
/* grid grid-cols-2 md:grid-cols-4 gap-x-4 gap-y-2 mt-2.5 text-xs — nhãn text-stone-400, giá trị text-stone-700 font-medium */
.tap-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px 16px; margin-top:10px; font-size:12px; line-height:var(--lh-xs); }
.tap-grid .l{ color:var(--s400); }
.tap-grid .v{ color:var(--s700); font-weight:500; }
.tap-grid .v span{ color:var(--s400); font-weight:400; }
/* Minh chứng: block w-16 h-16 rounded-lg border border-stone-200 overflow-hidden hover:border-amber-400, img object-cover.
   Ảnh = .pic của phone.css (vẽ bằng CSS), khung 4:3 cắt 2 bên như object-cover; --s = cạnh ngắn (px) */
.tap-pfs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tap-pf{ --s:62; --pt:1px; position:relative; flex:none; width:64px; height:64px; border-radius:8px; border:1px solid var(--s200); overflow:hidden; }
.tap-pf.hov{ border-color:var(--a400); }
.tap-pf .pic{ inset:0 -10.33px; }
/* Dòng học sinh: liên kết phả hệ mt-2.5 text-xs; nhãn cách khớp inline-block px-1.5 py-0.5 rounded bg-amber-100 text-amber-800 */
.tap-link{ margin-top:10px; font-size:12px; line-height:var(--lh-xs); color:var(--s600); }
.tap-link b{ font-weight:500; color:var(--s800); }
.tap-link .c{ color:var(--s400); }
.tap-link .mt{ display:inline-block; margin-left:6px; padding:2px 6px; border-radius:4px; background:var(--a100); color:var(--a800); font-weight:500; vertical-align:middle; }
.tap-link.no{ color:var(--s400); }
.tap-note{ margin-top:8px; font-size:12px; line-height:var(--lh-xs); color:var(--s500); }
/* Nút từng dòng: flex flex-col gap-1.5; text-xs font-semibold px-3.5 py-1.5 rounded-lg */
.tap-acts{ flex:none; display:flex; flex-direction:column; gap:6px; }
.tap-acts span{ padding:6px 14px; border-radius:8px; font-size:12px; line-height:var(--lh-xs); font-weight:600; text-align:center; }
.tap-acts .ok{ background:var(--e500); color:#fff; }
.tap-acts .ok.hov{ background:var(--e600); }
.tap-acts .no{ border:1px solid var(--s200); background:#fff; color:var(--s600); }
.tap-acts .no.hov{ background:var(--s100); }
.tap-bulk .busy, .tap-acts .busy{ opacity:.5; }   /* disabled:opacity-50 lúc approveForm.processing */
/* Trống: bg-white rounded-xl border border-stone-200 py-20 text-center text-stone-400; ✅ text-3xl mb-3 */
.tap-empty{ padding:80px 0; border-radius:12px; border:1px solid var(--s200); background:#fff; text-align:center; color:var(--s400); }
.tap-empty .ic{ margin-bottom:12px; font-size:30px; line-height:calc(2.25 / 1.875); }
.tap-empty p{ font-size:14px; line-height:var(--lh-sm); }
/* Modal từ chối: dùng .ad-modal-card; khác StudyTeacherActionModal: mô tả mt-1, textarea border-stone-200 + focus:ring-2 ring-amber-400 (viền giữ nguyên) */
.ad-modal-card.tap-m .desc{ margin-top:4px; }
.tap-m .ad-ta{ border-color:var(--s200); }
.tap-m .ad-ta.focus{ border-color:var(--s200); box-shadow:0 0 0 2px var(--a400); }

/* ═══ Components/ImageLightbox.vue: fixed inset-0 z-[100] flex items-center justify-center bg-black/85 ═══ */
.tap-lb{ position:absolute; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.85); visibility:hidden; opacity:0; }
/* nút đóng: absolute top-4 right-4 w-9 h-9 rounded-full bg-white/10 text-white text-lg */
.tap-lb .x{ position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:color-mix(in oklab, #fff 10%, transparent); color:#fff; font-size:18px; line-height:var(--lh-lg); }
.tap-lb .x.hov{ background:color-mix(in oklab, #fff 20%, transparent); }
/* ảnh: max-w-[92vw] max-h-[85vh] object-contain rounded — ảnh chụp 4:3 → cao 85vh = 765px */
.tap-lb .img{ --s:765; --pt:1px; position:relative; width:1020px; height:765px; border-radius:4px; overflow:hidden; }

/* ═══ Pages/Study/RecordReview.vue ═══ */
/* Hộp nhắc: mb-5 flex items-start gap-3 bg-amber-50 border border-amber-200 rounded-xl px-5 py-3.5; ⚖️ text-lg leading-none;
   chữ text-sm text-amber-800 space-y-1, dòng 2 text-amber-700/90 */
.cdt-ban{ display:flex; align-items:flex-start; gap:12px; margin-bottom:20px; padding:14px 20px; border-radius:12px; border:1px solid var(--a200); background:var(--a50); }
.cdt-ban .ic{ flex:none; font-size:18px; line-height:1; }
.cdt-ban .t{ font-size:14px; line-height:var(--lh-sm); color:var(--a800); }
.cdt-ban .t > p + p{ margin-top:4px; }
.cdt-ban .t strong{ font-weight:700; }
.cdt-ban .t .s{ color:color-mix(in oklab, var(--a700) 90%, transparent); }
/* Danh sách space-y-4; thẻ bg-white rounded-xl border border-stone-200 overflow-hidden */
.cdt-list > :not(:last-child){ margin-bottom:16px; }
.cdt-card{ position:relative; border-radius:12px; border:1px solid var(--s200); background:#fff; overflow:hidden; }
.cdt-top{ padding:16px 20px; }
/* flex flex-wrap items-start gap-x-3 gap-y-2; tên font-semibold leading-snug; chip nhóm = .tap-tag; chip xét riêng bg-indigo-50 text-indigo-600 */
.cdt-hd{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 12px; }
.cdt-hd p{ font-weight:600; line-height:1.375; color:var(--s800); }
.cdt-unb{ padding:2px 6px; border-radius:4px; background:var(--i50); color:var(--i600); font-size:11px; font-weight:500; }
.cdt-desc{ margin-top:6px; font-size:14px; line-height:1.625; color:var(--s600); }
/* grid grid-cols-2 md:grid-cols-4 gap-x-4 gap-y-2 mt-3 text-xs */
.cdt-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px 16px; margin-top:12px; font-size:12px; line-height:var(--lh-xs); }
.cdt-grid .l{ color:var(--s400); }
.cdt-grid .v{ color:var(--s700); font-weight:500; }
.cdt-grid .v span{ color:var(--s400); font-weight:400; }
/* Vì sao chờ chốt: mt-3 flex items-start gap-2 bg-stone-50 border border-stone-200 rounded-lg px-3 py-2; ℹ️ text-sm leading-none mt-0.5 */
.cdt-why{ display:flex; align-items:flex-start; gap:8px; margin-top:12px; padding:8px 12px; border-radius:8px; border:1px solid var(--s200); background:var(--s50); }
.cdt-why span{ flex:none; margin-top:2px; font-size:14px; line-height:1; }
.cdt-why p{ font-size:12px; line-height:var(--lh-xs); color:var(--s600); }
/* Minh chứng: nhãn text-xs text-stone-400 mb-1.5; ảnh block w-20 h-20 rounded-lg border hover:border-amber-400 (link mở tab mới, không lightbox) */
.cdt-pfs{ margin-top:12px; }
.cdt-pfs .l{ margin-bottom:6px; font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
.cdt-pfs .row{ display:flex; flex-wrap:wrap; gap:8px; }
.cdt-pf{ --s:78; --pt:1px; position:relative; flex:none; width:80px; height:80px; border-radius:8px; border:1px solid var(--s200); overflow:hidden; }
.cdt-pf.hov{ border-color:var(--a400); }
.cdt-pf .pic{ inset:0 -13px; }
/* Khối chốt: px-5 py-4 bg-stone-50/70 border-t border-stone-100; hàng flex flex-wrap items-end gap-3 */
.cdt-ft{ padding:16px 20px; border-top:1px solid var(--s100); background:color-mix(in oklab, var(--s50) 70%, transparent); }
.cdt-row{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.cdt-row label{ display:block; margin-bottom:4px; font-size:12px; line-height:var(--lh-xs); color:var(--s500); }
.cdt-pts{ min-width:160px; }
.cdt-hint{ margin-top:4px; font-size:11px; line-height:1.5; color:var(--s400); }
/* Ô nhập: px-3 py-2 text-sm border rounded-lg, focus:ring-2 ring-amber-400 (viền giữ nguyên); lỗi / ngoài khoảng border-red-300 bg-red-50.
   Ô điểm type=number w-[160px] text-right; ô ghi chú w-full placeholder-stone-400. .v = giá trị, .sel = đang bôi chọn (nhấp đúp) */
.cdt-in{ position:relative; display:flex; align-items:center; height:38px; padding:8px 12px; border-radius:8px; border:1px solid var(--s200); background:#fff; font-size:14px; line-height:var(--lh-sm); color:#000; white-space:nowrap; overflow:hidden; }
.cdt-in.num{ width:160px; justify-content:flex-end; }
.cdt-in.focus{ box-shadow:0 0 0 2px var(--a400); }
.cdt-in.err{ border-color:var(--r300); background:var(--r50); }
.cdt-in .v.sel{ background:#b3d7ff; }
.cdt-in .plh{ color:var(--s400); }
.cdt-in .caret{ flex:none; width:1px; height:17px; margin-left:0; background:#000; }
.cdt-in:not(.focus) .caret, .cdt-in .caret.off{ display:none; }
.cdt-in:not(.has) .caret{ margin-right:-1px; }
.cdt-note{ flex:1; min-width:220px; }
/* Điểm GV chờ duyệt (chỉ hiển thị): px-3 py-2 text-sm text-right font-semibold text-stone-700 bg-white border rounded-lg w-[160px] */
.cdt-tbox{ width:160px; padding:8px 12px; border-radius:8px; border:1px solid var(--s200); background:#fff; font-size:14px; line-height:var(--lh-sm); font-weight:600; text-align:right; color:var(--s700); }
/* Nút: text-sm font-semibold rounded-lg; Chốt điểm bg-amber-500 px-5 py-2 (disabled:opacity-50, hover giữ amber-500); Thu hồi bg-white border px-4 py-2 */
.cdt-btns{ display:flex; align-items:center; gap:8px; }
.cdt-btns span{ padding:8px 20px; border-radius:8px; font-size:14px; line-height:var(--lh-sm); font-weight:600; white-space:nowrap; }
.cdt-btns .ok{ background:var(--a500); color:#fff; }
.cdt-btns .ok.hov{ background:var(--a600); }
.cdt-btns .ok.busy{ opacity:.5; background:var(--a500); }
.cdt-btns .no{ padding:8px 16px; border:1px solid var(--s200); background:#fff; color:var(--s600); }
.cdt-btns .no.hov{ background:var(--s100); }
.cdt-err{ display:none; margin-top:8px; font-size:12px; line-height:var(--lh-xs); color:var(--r600); }
.cdt-err.on{ display:block; }
/* Modal thu hồi: dùng .ad-modal-card.tap-m (mô tả mt-1, textarea border-stone-200 + ring amber-400); tên chủ thể <strong text-stone-700> */
.cdt-m .desc strong{ font-weight:700; color:var(--s700); }

/* ═══ Pages/Study/GiftTags.vue + Pages/Study/Gifts.vue ═══ */
/* Bảng chung 2 trang: chữ phụ trong ô */
.gft-tbl .v{ color:var(--s700); }
.gft-tbl .s6{ color:var(--s600); }
.gft-tbl .b{ font-weight:600; }
.gft-tbl .nw{ white-space:nowrap; }
.gft-tbl .ad-badge{ display:inline-block; }
/* GiftTags: min-w-[1000px], th/td px-4 (khác .ad-tbl px-5) */
.ad-tbl.gft-tag{ min-width:1000px; }
.ad-tbl.gft-tag th{ padding:12px 16px; }
.ad-tbl.gft-tag td{ padding:14px 16px; }
.gft-tag td.pd{ max-width:260px; }
/* Ô sản phẩm: flex items-center gap-2; ảnh / ô 🎁 w-10 h-10 rounded-lg bg-stone-100 text-stone-300 */
.gft-pd{ display:flex; align-items:center; gap:8px; }
.gft-pd .ic{ flex:none; width:40px; height:40px; border-radius:8px; background:var(--s100); color:var(--s300); display:flex; align-items:center; justify-content:center; }
.gft-pd .nm{ line-height:1.375; color:var(--s700); }
.gft-pd .nm.hov{ color:var(--a600); text-decoration:underline; }
/* Ghi chú của gian hàng: text-[11px] text-stone-400 mt-0.5 leading-snug */
.gft-pd .note{ margin-top:2px; font-size:11px; line-height:1.375; color:var(--s400); }
/* Thời gian: text-xs text-stone-500 whitespace-nowrap */
.gft-tag .tm{ font-size:12px; line-height:var(--lh-xs); color:var(--s500); white-space:nowrap; }
/* Trống: như .tap-empty nhưng 🏷️ text-4xl mb-3 */
.tap-empty.gft-empty .ic{ font-size:36px; line-height:calc(2.5 / 2.25); }

/* Modal duyệt: p-4 nền rgba(0,0,0,.55); card relative bg-white rounded-2xl shadow-xl max-w-lg p-6 (dựa trên .ad-modal-card) */
.ad-modal-card.gft-m{ max-width:512px; box-shadow:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; }
.gft-m h3{ margin-bottom:4px; }
.gft-m .pn{ margin-bottom:16px; font-size:14px; line-height:var(--lh-sm); color:var(--s500); }
.gft-m .pn.has-note{ margin-bottom:12px; }
/* Ghi chú của gian hàng: bg-stone-50 border border-stone-200 rounded-lg px-3 py-2 mb-4 text-sm text-stone-600 leading-snug; nhãn text-xs font-semibold text-stone-500 */
.gft-m .note{ margin-bottom:16px; padding:8px 12px; border-radius:8px; border:1px solid var(--s200); background:var(--s50); font-size:14px; line-height:1.375; color:var(--s600); }
.gft-m .note b{ font-size:12px; line-height:var(--lh-xs); font-weight:600; color:var(--s500); }
/* space-y-4; nhãn block text-sm font-medium text-stone-700 mb-1, dấu * text-red-500 */
.gft-fs > * + *{ margin-top:16px; }
.gft-fs .lb{ display:block; margin-bottom:4px; font-size:14px; line-height:var(--lh-sm); font-weight:500; color:var(--s700); }
.gft-fs .lb .req{ color:var(--r500); }
.gft-g2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
/* Ô số type=number: dùng .cdt-in (px-3 py-2 text-sm border-stone-200 rounded-lg, focus:ring-2 ring-amber-400), căn phải */
.gft-fs .cdt-in.r{ justify-content:flex-end; }
/* Tồn kho: flex items-center gap-2 mb-1.5; checkbox mặc định của Chrome (.tap-cb), nhãn text-xs text-stone-500 */
.gft-ck{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12px; line-height:var(--lh-xs); color:var(--s500); }
/* stockMissing: ô tồn kho thêm .err (border-red-300 bg-red-50), dòng nhắc text-xs text-red-600 mt-1 */
.gft-err{ margin-top:4px; font-size:12px; line-height:var(--lh-xs); color:var(--r600); }
/* flex flex-wrap items-center gap-x-6 gap-y-2 bg-stone-50 border border-stone-200 rounded-lg px-4 py-3; nhãn flex items-center gap-2 text-sm text-stone-700 */
.gft-opts{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; padding:12px 16px; border-radius:8px; border:1px solid var(--s200); background:var(--s50); }
.gft-opts .o{ display:flex; align-items:center; gap:8px; font-size:14px; line-height:var(--lh-sm); color:var(--s700); }
/* Nút: flex justify-end gap-2 mt-6; px-3.5 py-2 rounded-xl text-sm font-medium.
   Huỷ border-stone-200 text-stone-600; chính bg-amber-600 hover:bg-amber-700 disabled:opacity-50 */
.gft-btns{ display:flex; justify-content:flex-end; gap:8px; margin-top:24px; }
/* flex mặc định stretch: nút chính (không viền) cao bằng nút Huỷ (có viền) */
.gft-btns span{ display:flex; align-items:center; padding:8px 14px; border-radius:12px; font-size:14px; line-height:var(--lh-sm); font-weight:500; }
.gft-btns .no{ border:1px solid var(--s200); color:var(--s600); }
.gft-btns .ok{ background:var(--a600); color:#fff; }
.gft-btns .ok.hov{ background:var(--a700); }
.gft-btns .ok.busy{ opacity:.5; }   /* disabled: đang lưu hoặc !canApprove */

/* <select> (preflight Tailwind v4 không bỏ appearance → Chrome vẽ mũi tên ⌄ bên phải): px-3 py-2 text-sm border rounded-lg */
.gft-sel{ position:relative; display:flex; align-items:center; height:38px; padding:8px 12px; border-radius:8px; border:1px solid var(--s200); background:#fff; font-size:14px; line-height:var(--lh-sm); color:#000; white-space:nowrap; }
.gft-sel::after{
  content:''; flex:none; width:10px; height:10px; margin-left:auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.2 5 6.7l3.5-3.5' fill='none' stroke='%23333' stroke-width='1.4'/%3E%3C/svg%3E") center/100% no-repeat;
}
.gft-sel.focus{ box-shadow:0 0 0 2px var(--a400); }
/* Danh sách xổ xuống của <select> — popup của trình duyệt (video vẽ đơn giản: hộp ngay dưới ô, dấu ✓ ở mục đang chọn) */
.gft-dd{ position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:5; padding:5px; border-radius:8px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 10px 28px rgba(0,0,0,.22); font-size:14px; line-height:20px; color:#000; visibility:hidden; opacity:0; }
.gft-dd span{ position:relative; display:block; padding:3px 10px 3px 26px; border-radius:5px; }
.gft-dd span.ck::before{ content:'✓'; position:absolute; left:9px; top:3px; }
.gft-dd span.hov{ background:#0a63e0; color:#fff; }

/* ── Gifts.vue — toolbar flex flex-wrap items-center gap-2 mb-3 (dùng .ad-filter) ── */
.gft-sum{ padding:0 8px; font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
/* select lọc: px-3 py-2 text-sm rounded-lg border border-stone-300 bg-white.
   <select> rộng theo option dài nhất → .sz xếp chồng chữ đang chọn + chữ dài nhất (ẩn) để giữ đúng bề ngang */
.gft-sel.f{ gap:12px; border-color:var(--s300); }
.gft-sel .sz{ display:grid; }
.gft-sel .sz > *{ grid-area:1 / 1; }
.gft-sel .sz > :last-child{ visibility:hidden; }
/* ô tìm type=search: sm:w-64 px-3.5 py-2 text-sm rounded-lg border border-stone-300 bg-white placeholder:text-stone-400 */
.gft-q{ width:256px; padding:8px 14px; border-radius:8px; border:1px solid var(--s300); background:#fff; font-size:14px; line-height:var(--lh-sm); color:var(--s400); white-space:nowrap; overflow:hidden; }
/* ml-auto flex items-center gap-2; Quản lý danh mục text-sm font-semibold text-stone-600 border px-3.5 py-2 rounded-lg hover:bg-stone-50;
   + Thêm quà bg-amber-500 text-white px-4 py-2 hover:bg-amber-600 (không viền) */
.gft-r{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.gft-b{ padding:8px 14px; border-radius:8px; border:1px solid var(--s200); font-size:14px; line-height:var(--lh-sm); font-weight:600; color:var(--s600); white-space:nowrap; }
.gft-b.hov{ background:var(--s50); }
.gft-b.add{ padding:8px 16px; border:0; background:var(--a500); color:#fff; }
.gft-b.add.hov{ background:var(--a600); }
/* Bảng quà: min-w-[1100px], px-5 (= .ad-tbl) */
.ad-tbl.gft-gift{ min-width:1100px; }
.gft-gift td.nmc{ max-width:280px; }
/* Ảnh: ô 🎁 w-14 h-14 rounded-lg bg-stone-100 text-stone-300 text-xl */
.gft-img{ width:56px; height:56px; border-radius:8px; background:var(--s100); color:var(--s300); display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1.4; }
.gft-nm{ font-weight:600; line-height:1.375; color:var(--s800); }
.gft-slug{ margin-top:2px; font-size:11px; font-family:var(--mono); color:var(--s400); }
.gft-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; }
.gft-chips .tap-tag.sky{ background:var(--sky50); color:var(--sky600); }
/* Tồn kho: text-xs text-stone-600; Không giới hạn text-emerald-600 font-medium; số font-semibold text-stone-700; dòng phụ text-stone-400 mt-0.5 */
.gft-gift td.stk{ font-size:12px; line-height:var(--lh-xs); color:var(--s600); }
.gft-gift .unl{ color:var(--e600); font-weight:500; }
.gft-gift .stk b{ font-weight:600; color:var(--s700); }
.gft-gift .stk .sub{ margin-top:2px; color:var(--s400); }
/* Nút trạng thái: block text-[11px] px-2 py-0.5 rounded-full border font-medium; nút thứ 2 mt-1.5 */
.gft-tg{ display:block; width:max-content; padding:2px 8px; border-radius:999px; border:1px solid var(--s200); font-size:11px; font-weight:500; }
.gft-tg + .gft-tg{ margin-top:6px; }
.gft-tg.on{ border-color:var(--e200); background:var(--e50); color:var(--e700); }
.gft-tg.on.hov{ background:var(--e100); }
.gft-tg.off{ background:var(--s100); color:var(--s500); }
.gft-tg.off.hov{ background:var(--s200); }
.gft-tg.ft{ border-color:var(--a200); background:var(--a50); color:var(--a700); }
.gft-tg.ft.hov{ background:var(--a100); }
.gft-tg.pin{ background:#fff; color:var(--s400); }
.gft-tg.pin.hov{ background:var(--s50); }

/* ═══ Pages/Study/GiftOrders.vue ═══ */
/* Ô tìm: ml-auto sm:w-80 (rộng hơn .ad-search sm:w-72) */
.ad-search.gor-q{ width:320px; }
/* Bảng: overflow-x-auto bọc table w-full min-w-[1320px], th/td px-4. Vùng nội dung ~1134px → bảng tràn ngang:
   video cuộn ngang = scrollLeft của .gor-x (đặt theo t; overflow hidden để không vẽ thanh cuộn, sticky vẫn chạy) */
.gor-x{ overflow:hidden; }
.ad-tbl.gor-tbl{ min-width:1320px; }
.ad-tbl.gor-tbl th{ padding:12px 16px; }
.ad-tbl.gor-tbl td{ padding:14px 16px; }
.ad-tbl.gor-tbl td.mw{ max-width:220px; }                                    /* ô Quà, Người nhận: max-w-[220px] */
/* Cột Thao tác ghim phải: sticky right-0 bg-white group-hover:bg-stone-50 shadow-[-6px_0_6px_-6px_rgba(0,0,0,0.12)] (th bg-stone-50) */
.gor-tbl .pin{ position:sticky; right:0; z-index:1; box-shadow:-6px 0 6px -6px rgba(0,0,0,.12); }
.gor-tbl th.pin{ background:var(--s50); }
.gor-tbl tbody tr.hov > td.pin{ background:var(--s50); }
/* Quà: flex items-center gap-2; ô 🎁 w-10 h-10 rounded-lg bg-stone-100 text-stone-300 shrink-0; tên text-stone-700 leading-snug */
.gor-gf{ display:flex; align-items:center; gap:8px; }
.gor-gf .ic{ flex:none; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:var(--s100); color:var(--s300); }
.gor-gf .nm{ color:var(--s700); line-height:1.375; }
/* Chữ trong ô */
.gor-tbl .v{ color:var(--s700); }
.gor-tbl .b{ font-weight:600; }
.gor-tbl .nw{ white-space:nowrap; }
.gor-tbl .mono{ font-family:var(--mono); }
.gor-code{ font-family:var(--mono); font-weight:600; color:var(--s800); }                 /* font-mono font-semibold text-stone-800 */
.gor-tbl .sub{ font-size:12px; line-height:var(--lh-xs); color:var(--s400); }              /* text-xs text-stone-400 */
.gor-tbl .sub.snug{ line-height:1.375; }                                                    /* + leading-snug (địa chỉ) */
.gor-tbl .tiny{ font-size:11px; color:var(--s400); }                                        /* text-[11px] text-stone-400 */
.gor-tbl .tiny.mt{ margin-top:2px; }                                                        /* + mt-0.5 */
.gor-tbl .how{ margin-top:4px; font-size:11px; line-height:1.375; color:var(--s500); }    /* hướng dẫn dùng mã: text-[11px] text-stone-500 mt-1 leading-snug */
.gor-tbl .ship{ margin-top:4px; font-size:11px; line-height:1.375; color:var(--sky600); } /* vận chuyển: text-[11px] text-sky-600 mt-1 leading-snug */
.gor-tbl .note{ max-width:200px; margin-top:4px; font-size:11px; line-height:1.375; color:var(--s400); }
/* Mốc thời gian: text-xs text-stone-500 whitespace-nowrap; dòng "bởi" text-stone-400 */
.gor-tbl td.tm{ font-size:12px; line-height:var(--lh-xs); color:var(--s500); white-space:nowrap; }
.gor-tbl td.tm .by{ color:var(--s400); }
/* Badge trạng thái (STATUS_TONE): text-[11px] px-2 py-0.5 rounded-full border font-medium inline-block */
.gor-tbl .ad-badge{ display:inline-block; }
.gor-tbl .ad-badge.approved{ border-color:var(--v200); background:var(--v50); color:var(--v700); }
.gor-tbl .ad-badge.shipping{ border-color:var(--sky200); background:var(--sky50); color:var(--sky700); }
.gor-tbl .ad-badge.delivered{ border-color:var(--e200); background:var(--e50); color:var(--e700); }
.gor-tbl .ad-badge.received{ border-color:var(--g200); background:var(--g50); color:var(--gn700); }
.gor-tbl .ad-badge.completed{ border-color:var(--gn300); background:var(--gn100); color:var(--g800); }
.gor-tbl .ad-badge.on_hold{ border-color:var(--o200); background:var(--o50); color:var(--o700); }
.gor-tbl .ad-badge.cancelled{ border-color:var(--s200); background:var(--s100); color:var(--s500); }
/* Nút từng dòng: flex flex-wrap gap-1.5 justify-end max-w-[180px] ml-auto; text-xs font-semibold px-2.5 py-1 rounded-lg.
   Bước tiến bg-amber-50 text-amber-700 · Tạm giữ orange-50/700 · Mở lại sky-50/700 · Từ chối red-50 text-red-600 (hover: nền -100) */
.gor-acts{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; max-width:180px; margin-left:auto; }
.gor-acts span{ padding:4px 10px; border-radius:8px; font-size:12px; line-height:var(--lh-xs); font-weight:600; background:var(--a50); color:var(--a700); }
.gor-acts span.hov{ background:var(--a100); }
.gor-acts .hold{ background:var(--o50); color:var(--o700); }
.gor-acts .hold.hov{ background:var(--o100); }
.gor-acts .resume{ background:var(--sky50); color:var(--sky700); }
.gor-acts .resume.hov{ background:var(--sky100); }
.gor-acts .rej{ background:var(--r50); color:var(--r600); }
.gor-acts .rej.hov{ background:var(--r100); }
/* Modal hành động (dựa trên .ad-modal-card: max-w-md p-6 rounded-2xl; tiêu đề font-semibold, dòng phụ text-sm mt-1 = .who).
   Ghi chú: text-xs text-stone-600 mt-3 leading-relaxed bg-stone-50 border border-stone-200 rounded-lg px-3 py-2 */
.gor-m .box{ margin-top:12px; padding:8px 12px; border-radius:8px; border:1px solid var(--s200); background:var(--s50); font-size:12px; line-height:1.625; color:var(--s600); }
/* Đơn vị vận chuyển + mã vận đơn: mt-4 grid grid-cols-2 gap-3 */
.gor-g2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-top:16px; }
/* input: w-full px-3 py-2 text-sm rounded-lg border border-stone-300 bg-white focus:border-amber-400 focus:ring-2 focus:ring-amber-100 */
.gor-in{ display:flex; align-items:center; height:38px; padding:8px 12px; border-radius:8px; border:1px solid var(--s300); background:#fff; font-size:14px; line-height:var(--lh-sm); color:#000; white-space:nowrap; overflow:hidden; }
.gor-in.focus{ border-color:var(--a400); box-shadow:0 0 0 2px var(--a100); }
.gor-in .plh{ color:var(--s400); }
.gor-in .caret{ flex:none; width:1px; height:17px; margin-left:0; background:#000; }
.gor-in:not(.focus) .caret{ display:none; }
.gor-in:not(.has) .caret{ margin-right:-1px; }
/* Nút chính theo hành động: advance bg-amber-500 hover:bg-amber-600 (reject dùng .main.red) */
.gor-m .btns .main{ background:var(--a500); }
.gor-m .btns .main.hov{ background:var(--a600); }

/* ── Chú thích tua thời gian giữa 2 cảnh (lớp phủ cấp #scr, cỡ chữ theo trang 1440px) ── */
.ad-skip{ position:absolute; inset:0; z-index:60; display:grid; place-items:center; background:rgba(10,6,2,.72); visibility:hidden; opacity:0; }
.ad-skip span{ display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:999px; background:#2A231C; border:1px solid #5a4617; color:#F5A623; font-family:'DM Sans',system-ui,sans-serif; font-size:24px; font-weight:800; }

/* ═══ Pages/Study/Wallets.vue + Pages/Study/WalletDetail.vue (Ví & cấp điểm tay) ═══ */
/* Toolbar: flex flex-wrap items-center gap-2 mb-3. Ô tìm type=search: sm:w-96 px-3.5 py-2 text-sm rounded-lg border-stone-300 bg-white
   placeholder:text-stone-400, focus:border-amber-400 focus:ring-2 focus:ring-amber-100 (.tx chữ gõ, .caret con trỏ, .plh placeholder) */
.wal-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
.wal-q{ display:flex; align-items:center; width:384px; height:38px; padding:8px 14px; border-radius:8px; border:1px solid var(--s300); background:#fff; font-size:14px; line-height:var(--lh-sm); color:#000; white-space:nowrap; overflow:hidden; }
.wal-q.focus{ border-color:var(--a400); box-shadow:0 0 0 2px var(--a100); }
.wal-q .plh{ color:var(--s400); }
.wal-q .caret{ flex:none; width:1px; height:17px; background:#000; }
.wal-q:not(.focus) .caret, .wal-q .caret.off{ display:none; }
.wal-q:not(.has) .caret{ margin-right:-1px; }
/* Bảng: overflow-x-auto; min-w-[1100px]; th px-4 py-3; td px-4 py-3.5 align-top (khác .ad-tbl px-5) */
.wal-x{ overflow-x:auto; }
.ad-tbl.wal-tbl{ min-width:1100px; }
.ad-tbl.wal-tbl th{ padding:12px 16px; }
.ad-tbl.wal-tbl td{ padding:14px 16px; }
.wal-tbl .nm{ font-weight:600; color:var(--s800); }                                        /* tên ví: font-semibold text-stone-800 */
.wal-tbl .id{ font-family:var(--mono); font-size:11px; color:var(--s400); }                 /* #id: text-[11px] text-stone-400 font-mono */
.wal-tbl .v{ color:var(--s700); }                                                           /* tên chủ ví / người giữ: text-stone-700 */
.wal-tbl .sub{ font-size:12px; line-height:var(--lh-xs); color:var(--s400); }               /* SĐT: text-xs text-stone-400 */
.wal-tbl .same{ font-size:12px; line-height:var(--lh-xs); color:var(--s300); }              /* "— trùng chủ ví —": text-xs text-stone-300 */
.wal-tbl td.bal{ font-weight:600; color:var(--s700); white-space:nowrap; }                  /* Số dư: font-semibold text-stone-700 (âm: text-red-600) */
.wal-tbl td.bal.neg{ color:var(--r600); }
.wal-tbl td.pend{ font-size:12px; line-height:var(--lh-xs); color:var(--s500); white-space:nowrap; }   /* Chờ xử lý: text-xs text-stone-500 */
.wal-tbl td.pend .none{ color:var(--s300); }
.wal-tbl td.earn{ color:var(--s600); white-space:nowrap; }                                  /* Đã tích luỹ: text-stone-600 */
.wal-tbl .nw{ white-space:nowrap; }
/* Cờ: block text-[11px] px-1.5 py-0.5 rounded font-medium; Mồ côi bg-stone-100 text-stone-500; Ví âm bg-red-50 text-red-600 mb-1 */
.wal-flag{ display:block; padding:2px 6px; border-radius:4px; font-size:11px; font-weight:500; background:var(--s100); color:var(--s500); }
.wal-flag.neg{ margin-bottom:4px; background:var(--r50); color:var(--r600); }

/* WalletDetail.vue — link quay lại: inline-flex items-center gap-1 text-sm text-stone-500 hover:text-amber-600 mb-4 */
.wal-back{ display:inline-flex; align-items:center; gap:4px; margin-bottom:16px; font-size:14px; line-height:var(--lh-sm); color:var(--s500); }
.wal-back.hov{ color:var(--a600); }
/* grid lg:grid-cols-3 gap-5 mb-5; thẻ thông tin lg:col-span-2 p-5; thẻ form p-5 */
.wal-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; margin-bottom:20px; }
.wal-info{ grid-column:span 2 / span 2; padding:20px; }
/* Đầu thẻ: flex items-start justify-between mb-4; h3 text-base font-semibold text-stone-800; #id text-xs text-stone-400 font-mono */
.wal-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
.wal-head h3{ font-size:16px; line-height:1.5; font-weight:600; color:var(--s800); }
.wal-head .id{ font-family:var(--mono); font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
/* Chủ ví / Người giữ ví: grid sm:grid-cols-2 gap-4 mb-5; nhãn text-xs text-stone-400 mb-1; tên text-sm text-stone-700; SĐT/email text-xs text-stone-400 */
.wal-who{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-bottom:20px; }
.wal-who .lb{ margin-bottom:4px; font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
.wal-who .nm{ font-size:14px; line-height:var(--lh-sm); color:var(--s700); }
.wal-who .sub{ font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
.wal-who .same{ font-size:14px; line-height:var(--lh-sm); color:var(--s300); }
/* 7 ô số liệu: grid sm:grid-cols-4 gap-3; ô bg-stone-50 rounded-lg px-3 py-2.5; nhãn text-[11px] text-stone-400; số text-base font-semibold text-stone-800 */
.wal-stats{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.wal-st{ padding:10px 12px; border-radius:8px; background:var(--s50); }
.wal-st .lb{ font-size:11px; color:var(--s400); }
.wal-st .v{ font-size:16px; line-height:1.5; font-weight:600; color:var(--s800); }
/* Thẻ form: h3 text-sm font-semibold text-stone-800 mb-3 */
.wal-form{ padding:20px; }
.wal-form h3{ margin-bottom:12px; font-size:14px; line-height:var(--lh-sm); font-weight:600; color:var(--s800); }
/* Chọn hướng: flex rounded-lg border border-stone-200 overflow-hidden mb-3; nút flex-1 text-sm font-semibold py-2;
   đang chọn: Cấp bg-emerald-500 / Trừ bg-red-500 text-white; còn lại bg-white text-stone-500 hover:bg-stone-50 */
.wal-tgl{ display:flex; margin-bottom:12px; border-radius:8px; border:1px solid var(--s200); overflow:hidden; }
.wal-tgl span{ flex:1; padding:8px 0; text-align:center; font-size:14px; line-height:var(--lh-sm); font-weight:600; background:#fff; color:var(--s500); }
.wal-tgl span.hov{ background:var(--s50); }
.wal-tgl .add.on{ background:var(--e500); color:#fff; }
.wal-tgl .sub.on{ background:var(--r500); color:#fff; }
/* space-y-3; nhãn block text-xs text-stone-500 mb-1, dấu * text-red-500.
   Ô số: dùng .cdt-in (border-stone-200, focus:ring-2 ring-amber-400, lỗi .err) nhưng w-full text-right; dòng lỗi .cdt-err mt-1.
   <select>: .gft-sel (border-stone-200, focus ring amber-400). Textarea rows=3: .ad-ta nhưng border-stone-200 + focus ring amber-400 */
.wal-fs > * + *{ margin-top:12px; }
.wal-fs label{ display:block; margin-bottom:4px; font-size:12px; line-height:var(--lh-xs); color:var(--s500); }
.wal-fs label .req{ color:var(--r500); }
.wal-fs .cdt-in{ width:100%; justify-content:flex-end; }
.wal-fs .cdt-err{ margin-top:4px; }
.wal-fs .ad-ta{ border-color:var(--s200); }
.wal-fs .ad-ta.focus{ border-color:var(--s200); box-shadow:0 0 0 2px var(--a400); }
.wal-fs .ad-ta .caret.off{ display:none; }
/* Nút gửi: w-full text-sm font-semibold text-white py-2.5 rounded-lg; Cấp bg-emerald-500 hover:600 / Trừ bg-red-500 hover:600; disabled:opacity-50 */
.wal-btn{ display:block; width:100%; padding:10px 0; border-radius:8px; text-align:center; font-size:14px; line-height:var(--lh-sm); font-weight:600; color:#fff; background:var(--e500); }
.wal-btn.hov{ background:var(--e600); }
.wal-btn.red{ background:var(--r500); }
.wal-btn.red.hov{ background:var(--r600); }
.wal-btn.busy{ opacity:.5; }
/* Sổ cái: đầu thẻ px-5 py-3 border-b border-stone-100, h3 text-sm font-semibold; bảng min-w-[900px], th/td px-4 py-2.5 */
.wal-ldg-hd{ padding:12px 20px; border-bottom:1px solid var(--s100); }
.wal-ldg-hd h3{ font-size:14px; line-height:var(--lh-sm); font-weight:600; color:var(--s800); }
.ad-tbl.wal-ldg{ min-width:900px; }
.ad-tbl.wal-ldg th{ padding:10px 16px; }
.ad-tbl.wal-ldg td{ padding:10px 16px; }
.wal-ldg td.tm{ font-size:12px; line-height:var(--lh-xs); color:var(--s500); white-space:nowrap; }   /* Thời gian: text-xs text-stone-500 nowrap */
.wal-ldg .ty{ font-size:12px; line-height:var(--lh-xs); color:var(--s700); }                          /* Loại: text-xs text-stone-700 */
.wal-ldg .rl{ font-size:11px; color:var(--s400); }                                                     /* rule_label: text-[11px] text-stone-400 */
.wal-ldg td.bk{ font-size:12px; line-height:var(--lh-xs); color:var(--s500); white-space:nowrap; }   /* Bucket: text-xs text-stone-500 */
.wal-ldg td.amt{ font-weight:600; color:var(--e600); white-space:nowrap; }                            /* Số điểm: font-semibold emerald-600 (âm red-600) */
.wal-ldg td.amt.neg{ color:var(--r600); }
.wal-ldg td.after{ color:var(--s600); white-space:nowrap; }                                           /* Số dư sau: text-stone-600 */
.wal-ldg td.nt{ max-width:240px; font-size:12px; line-height:1.375; color:var(--s500); }              /* Ghi chú: text-xs text-stone-500 max-w-[240px] leading-snug */
.wal-ldg td.by{ font-size:12px; line-height:var(--lh-xs); color:var(--s500); white-space:nowrap; }   /* Thực hiện bởi: text-xs text-stone-500 nowrap */
/* Modal xác nhận (dựa trên .ad-modal-card max-w-md p-6 rounded-2xl): tiêu đề font-semibold text-stone-800;
   mô tả text-sm text-stone-600 mt-2 leading-relaxed, số điểm + tên ví font-semibold; nút Huỷ / Xác nhận = .btns mặc định */
.wal-m .desc{ color:var(--s600); }
.wal-m .desc b{ font-weight:600; }

/* ═══ Pages/Study/RewardRules.vue, PointLimits.vue, Badges.vue (cấu hình Hiếu Học) ═══
   Hint 💡 / 🛡️ = .cdt-ban, hint 🏅 = .ad-hint. Ô số (type=number, KHÔNG có bg → preflight nền trong suốt, dòng đã sửa
   thấy nền amber xuyên qua) dùng .cdt-in + .cfg-in. Checkbox = .tap-cb (ô mặc định của Chrome). */
/* Chip nhóm (RewardRules): flex flex-wrap items-center gap-2 mb-5; chip inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full
   text-sm font-semibold border; đang chọn bg/border-amber-500 text-white, còn lại bg-white border-stone-200 text-stone-600
   hover:border-amber-300 hover:text-amber-700. Số: text-[11px] px-1.5 py-0.5 rounded-full font-semibold */
.cfg-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:20px; }
.cfg-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; border:1px solid var(--s200); background:#fff; color:var(--s600); font-size:14px; line-height:var(--lh-sm); font-weight:600; white-space:nowrap; }
.cfg-chip.hov:not(.on){ border-color:var(--a300); color:var(--a700); }
.cfg-chip.on{ border-color:var(--a500); background:var(--a500); color:#fff; }
.cfg-chip .n{ padding:2px 6px; border-radius:999px; background:var(--s100); color:var(--s500); font-size:11px; font-weight:600; }
.cfg-chip.on .n{ background:color-mix(in oklab, #fff 25%, transparent); color:#fff; }
/* Bảng: overflow-x-auto (video: cắt phải như trang thật khi bảng rộng hơn khung) */
.cfg-x{ overflow:hidden; }
/* RewardRules / PointLimits: thead tr border-b border-stone-100 bg-stone-50/70; th mặc định căn giữa (.tl = text-left);
   tbody divide-y divide-stone-50; dòng hover:bg-stone-50/60, dòng đã sửa bg-amber-50/60 */
.ad-tbl.cfg-tbl thead{ background:color-mix(in oklab, var(--s50) 70%, #fff); }
.ad-tbl.cfg-tbl th{ border-bottom:1px solid var(--s100); text-align:center; }
.ad-tbl.cfg-tbl th.tl{ text-align:left; }
.cfg-tbl th .sub{ text-transform:none; font-weight:400; color:var(--s400); }
.ad-tbl.cfg-tbl tbody tr:not(:last-child) > td{ border-bottom-color:var(--s50); }
.ad-tbl.cfg-tbl tbody tr.hov > td{ background:color-mix(in oklab, var(--s50) 60%, #fff); }
.ad-tbl.cfg-tbl tbody tr.dirty > td{ background:color-mix(in oklab, var(--a50) 60%, #fff); }
/* RewardRules: min-w-[1080px]; th/td px-3 py-3, cột đầu px-5 py-3 max-w-[420px] */
.ad-tbl.cfg-rr{ min-width:1080px; }
.ad-tbl.cfg-rr th, .ad-tbl.cfg-rr td{ padding:12px; }
.ad-tbl.cfg-rr th:first-child, .ad-tbl.cfg-rr td:first-child{ padding:12px 20px; }
.cfg-rr td:first-child{ max-width:420px; }
/* PointLimits: min-w-[980px]; th px-4 py-3, td px-4 py-3.5, cột đầu px-5 max-w-[420px] */
.ad-tbl.cfg-pl{ min-width:980px; }
.ad-tbl.cfg-pl th{ padding:12px 16px; }
.ad-tbl.cfg-pl td{ padding:14px 16px; }
.ad-tbl.cfg-pl th:first-child{ padding:12px 20px; }
.ad-tbl.cfg-pl td:first-child{ padding:14px 20px; max-width:420px; }
/* Cột đầu: tên font-semibold text-stone-800 leading-snug + "• đã sửa" ml-1.5 text-[11px] font-semibold text-amber-600;
   điều kiện text-xs text-stone-500 mt-0.5 leading-snug; tag flex flex-wrap gap-1.5 mt-1.5 (= .tap-tag, Mốc tích luỹ indigo, Đ10 / basis sky);
   mã text-[11px] text-stone-400 mt-1 font-mono */
.cfg-nm{ font-weight:600; line-height:1.375; color:var(--s800); }
.cfg-nm .ed{ margin-left:6px; font-size:11px; font-weight:600; color:var(--a600); }
.cfg-cn{ margin-top:2px; font-size:12px; line-height:1.375; color:var(--s500); }
.cfg-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; }
.cfg-tags .tap-tag.ind{ background:var(--i50); color:var(--i600); }
.cfg-tags .tap-tag.sky{ background:var(--sky50); color:var(--sky600); }
.cfg-code{ margin-top:4px; font-size:11px; font-family:var(--mono); color:var(--s400); }
/* Cặp ô tối thiểu – tối đa: flex items-center justify-center gap-1.5, gạch text-stone-400 */
.cfg-pts{ display:flex; align-items:center; justify-content:center; gap:6px; }
.cfg-pts .dash{ color:var(--s400); }
/* Ô số trong bảng: px-2 py-1.5 text-sm text-right border border-stone-200 rounded-lg (cao 34), w-[104px] / [92px] / [84px] / [140px] */
.cdt-in.cfg-in{ display:inline-flex; height:34px; padding:6px 8px; justify-content:flex-end; vertical-align:top; background:transparent; }
.cfg-in.w104{ width:104px; }
.cfg-in.w92{ width:92px; }
.cfg-in.w84{ width:84px; }
.cfg-in.w140{ width:140px; }
/* "Mức khoảng → phát mức tối thiểu": text-[11px] text-amber-600 text-center mt-1; "N điểm" (PointLimits): text-[11px] text-stone-400 mt-1 */
.cfg-rg{ margin-top:4px; text-align:center; font-size:11px; color:var(--a600); }
.cfg-sub{ margin-top:4px; font-size:11px; color:var(--s400); }
/* Khi vượt: <select> text-sm bg-white border border-stone-200 rounded-lg px-3 py-1.5 (rộng theo option dài nhất → .sz) */
.gft-sel.cfg-sel{ display:inline-flex; height:34px; padding:6px 12px; gap:12px; vertical-align:top; }
/* Ghi chú: w-full min-w-[220px] px-3 py-1.5 text-sm border border-stone-200 rounded-lg placeholder-stone-400 */
.cdt-in.cfg-note{ width:100%; min-width:220px; height:34px; padding:6px 12px; justify-content:flex-start; background:transparent; }
.cfg-tbl .tap-cb{ display:inline-block; vertical-align:baseline; }
/* Thanh lưu: sticky bottom-0 mt-5 bg-white/95 backdrop-blur border border-stone-200 rounded-xl px-5 py-3.5
   flex flex-wrap items-center gap-3 shadow-sm (.ad-main là khung cuộn → thanh dính đáy khi trang dài hơn 900px).
   Hoàn tác text-stone-500 px-4 py-2 hover:bg-stone-100; Lưu bg-amber-500 px-5 py-2 hover:bg-amber-600 disabled:opacity-50 */
.cfg-bar{ position:sticky; bottom:0; z-index:5; margin-top:20px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:14px 20px; border-radius:12px; border:1px solid var(--s200); background:color-mix(in oklab, #fff 95%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:var(--sh-sm); font-size:14px; line-height:var(--lh-sm); }
.cfg-bar .n{ color:var(--s500); }
.cfg-bar .n b{ font-weight:600; color:var(--s700); }
.cfg-bar .dirty{ font-weight:600; color:var(--a600); }
.cfg-bar .ok{ font-weight:600; color:var(--e600); }
.cfg-bar .r{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.cfg-bar .undo{ padding:8px 16px; border-radius:8px; font-weight:600; color:var(--s500); }
.cfg-bar .undo.hov{ background:var(--s100); }
.cfg-bar .save{ padding:8px 20px; border-radius:8px; font-weight:600; color:#fff; background:var(--a500); }
.cfg-bar .save.hov{ background:var(--a600); }
.cfg-bar .save.busy{ opacity:.5; background:var(--a500); }
/* Badges: nút "+ Thêm bậc" trong flex items-center justify-end mb-3 (= .gft-b.add); bảng min-w-[820px], còn lại = .ad-tbl */
.cfg-add{ display:flex; align-items:center; justify-content:flex-end; margin-bottom:12px; }
.ad-tbl.cfg-bg{ min-width:820px; }
.cfg-bg .tier{ display:flex; align-items:center; gap:8px; }
.cfg-bg .tier .ic{ font-size:24px; line-height:1; }
.cfg-bg .tier b{ font-weight:600; color:var(--s800); }
.cfg-bg td.code{ font-size:11px; font-family:var(--mono); color:var(--s400); }
.cfg-bg td.min{ font-weight:600; color:var(--s700); white-space:nowrap; }
.cfg-bg .clr{ display:flex; align-items:center; gap:8px; }
.cfg-bg .dot{ flex:none; width:20px; height:20px; border-radius:999px; border:1px solid var(--s200); }
.cfg-bg .clr .hex{ font-size:11px; font-family:var(--mono); color:var(--s400); }
.cfg-bg td.desc{ max-width:240px; font-size:12px; line-height:var(--lh-xs); color:var(--s500); }
.cfg-bg td.act{ white-space:nowrap; }
/* Modal thêm / sửa bậc (dựa trên .ad-modal-card.gft-m: max-w-lg p-6 rounded-2xl shadow-xl): h3 mb-4; form space-y-4 (= .gft-fs);
   hàng 2 = grid-cols-3 gap-3; ô w-full px-3 py-2 text-sm border-stone-200 rounded-lg (= .cdt-in), Mã / Màu font-mono, Icon text-center */
.gft-m.cfg-m h3{ margin-bottom:16px; }
.cfg-g3{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.cfg-m .cdt-in{ background:transparent; }
.cfg-m .cdt-in.mono{ font-family:var(--mono); }
.cfg-m .cdt-in.c{ justify-content:center; }
.cfg-clr{ display:flex; align-items:center; gap:8px; }
.cfg-clr .cdt-in{ flex:1; min-width:0; }
/* input type=color w-10 h-9 border border-stone-200 rounded-lg p-0.5: Chrome vẽ ô màu trong swatch-wrapper (padding 4px 2px), viền 1px #777 */
.cfg-clr .sw{ flex:none; display:flex; width:40px; height:36px; padding:6px 4px; border-radius:8px; border:1px solid var(--s200); }
.cfg-clr .sw i{ flex:1; border:1px solid #777; }
/* Mô tả: textarea rows=2 (2 × 20 + py-2 + viền = 58) */
.cdt-in.cfg-ta{ height:58px; align-items:flex-start; white-space:normal; }
/* Thứ tự: w-20 px-2 py-1.5 text-sm text-right border border-stone-200 rounded-lg */
.cdt-in.cfg-ord{ width:80px; height:34px; padding:6px 8px; justify-content:flex-end; }

/* ═══ Pages/Study/PreschoolClasses.vue, PreschoolTemplates.vue, PreschoolReports.vue (mầm non) ═══
   Hint 🏫 / 🌼 = .ad-hint. Ô tìm = .wal-q, select lọc = .gft-sel.f, nút "+ Thêm mẫu" / "⬇ Xuất Excel" = .gft-b.add,
   nhãn Đã bật / Chưa bật / Đang bật / Đã xác nhận = .gft-tg, nút Quản lý / Sửa / Xoá / Gỡ / Huỷ phiếu = .ad-act,
   nút modal px-3.5 py-2 rounded-xl text-sm font-medium = .gft-btns span. Tab trong modal / thẻ gộp = .ad-tab. */
/* Lớp mầm non: ô tìm sm:w-80; bảng min-w-[1000px] px-4 (Báo cáo: min-w-[1200px]) */
.wal-q.psc-q{ width:320px; }
.ad-tbl.psc-tbl{ min-width:1000px; }
.ad-tbl.psc-tbl.w12{ min-width:1200px; }
.ad-tbl.psc-tbl th{ padding:12px 16px; }
.ad-tbl.psc-tbl td{ padding:14px 16px; }
.psc-tbl .nm{ font-weight:600; color:var(--s800); }                                         /* tên lớp: font-semibold text-stone-800 */
.psc-tbl .v{ color:var(--s700); }                                                           /* Báo cáo: tên lớp / loại / cô: text-stone-700 */
.psc-tbl .sub{ font-size:12px; line-height:var(--lh-xs); color:var(--s400); }               /* trường · năm học: text-xs text-stone-400 */
.psc-tbl td.s6{ color:var(--s600); }
.psc-tbl td.s7{ color:var(--s700); }
.psc-tbl .none{ color:var(--s300); }
.psc-tbl .tch{ font-size:12px; line-height:var(--lh-xs); color:var(--s600); }               /* cô phụ trách: text-xs text-stone-600 */
.psc-tbl .tch .cn{ font-weight:500; color:var(--a600); }                                    /* (CN): text-amber-600 font-medium */
.psc-tbl .tch .eq{ color:var(--s400); }                                                     /* · chia đều */
.psc-tbl td.fund{ font-size:12px; line-height:var(--lh-xs); color:var(--s500); }            /* Quỹ: text-xs text-stone-500 */
.psc-tbl td.nw{ white-space:nowrap; }
.psc-tbl td.dt{ white-space:nowrap; font-size:12px; line-height:var(--lh-xs); color:var(--s600); }   /* Ngày trao: text-xs text-stone-600 */
.psc-tbl td.pt{ font-weight:600; color:var(--a600); white-space:nowrap; }                   /* Điểm bé / Điểm cô */
.psc-tbl .why{ margin-top:4px; max-width:160px; font-size:11px; color:var(--s400); }        /* Lý do: text-[11px] text-stone-400 mt-1 max-w-[160px] */
.psc-tbl .nil{ font-size:12px; line-height:var(--lh-xs); color:var(--s300); }               /* phiếu đã huỷ: — */
.gft-tg.rv{ border-color:var(--r200); background:var(--r50); color:var(--r600); }          /* Đã thu hồi: bg-red-50 text-red-600 border-red-200 */
/* Modal quản lý lớp: max-w-2xl p-6 max-h-[90vh] overflow-y-auto → thẻ cắt 810px, ruột .psc-m-in mang p-6 và cuộn (translateY) */
.ad-modal-card.gft-m.psc-m{ max-width:672px; max-height:810px; overflow:hidden; padding:0; }
.psc-m-in{ padding:24px; }
.psc-m .cdt-in{ background:transparent; }
.psc-sub{ margin-bottom:16px; font-size:12px; line-height:var(--lh-xs); color:var(--s400); }   /* text-xs text-stone-400 mb-4 */
/* Tab: flex items-center gap-1 mb-5 border-b border-stone-200 (thẻ gộp của Báo cáo: mb-4) */
.psc-tabs{ display:flex; align-items:center; gap:4px; margin-bottom:20px; border-bottom:1px solid var(--s200); }
.psc-tabs.m4{ margin-bottom:16px; }
.psc-m .hn{ margin-top:4px; font-size:11px; line-height:1.5; color:var(--s400); }          /* Hiện tại áp dụng: text-[11px] mt-1 */
.psc-m .at{ font-size:12px; line-height:var(--lh-xs); color:var(--s400); }                 /* Kích hoạt lúc …: text-xs text-stone-400 */
/* Hàng nút tab Quỹ: flex justify-between items-center pt-2 (trong space-y-4); Tắt kích hoạt MN border-red-200 text-red-600 */
.gft-btns.psc-fr{ justify-content:space-between; align-items:center; margin-top:16px; padding-top:8px; }
.gft-btns .del{ border:1px solid var(--r200); color:var(--r600); }
/* Tab Cô phụ trách: space-y-5; nhãn text-sm font-medium text-stone-700 mb-2 */
.psc-tp > * + *{ margin-top:20px; }
.psc-lb{ margin-bottom:8px; font-size:14px; line-height:var(--lh-sm); font-weight:500; color:var(--s700); }
/* Cô đang phụ trách: flex justify-between gap-2 px-3 py-2 rounded-lg border border-stone-200 mb-1.5; Chủ nhiệm text-[11px] amber-600 semibold ml-1 */
.psc-tr{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; padding:8px 12px; border-radius:8px; border:1px solid var(--s200); }
.psc-tr .n{ font-size:14px; line-height:var(--lh-sm); color:var(--s700); }
.psc-tr .cn{ margin-left:4px; font-size:11px; font-weight:600; color:var(--a600); }
/* Thêm cô: ô tìm mb-2; danh bạ max-h-40 overflow-y-auto border border-stone-100 rounded-lg divide-y divide-stone-100
   (JS gắn .lst cho dòng hiện cuối cùng = :last-child của danh sách Vue) */
.cdt-in.psc-tq{ margin-bottom:8px; }
.psc-dir{ max-height:160px; overflow:hidden; border-radius:8px; border:1px solid var(--s100); }
.psc-dir > *{ border-bottom:1px solid var(--s100); }
.psc-dir > .lst{ border-bottom:0; }
.psc-dir .r{ display:block; padding:8px 12px; font-size:14px; line-height:var(--lh-sm); }   /* w-full text-left px-3 py-2 text-sm hover:bg-amber-50 */
.psc-dir .r .n{ font-weight:500; color:var(--s700); }
.psc-dir .r .c{ margin-left:8px; font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
.psc-dir .r.hov{ background:var(--a50); }
.psc-dir .r.busy{ opacity:.5; }
.psc-dir .emp{ padding:8px 12px; font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
/* Chia % (hiện khi ≥ 2 cô): pt-2 border-t border-stone-100; dòng flex items-center gap-2 mb-1.5; ô w-24 px-2 py-1.5 text-right */
.psc-split{ padding-top:8px; border-top:1px solid var(--s100); }
.psc-split .d{ margin-bottom:8px; font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
.psc-sr{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.psc-sr .n{ flex:1; font-size:14px; line-height:var(--lh-sm); color:var(--s600); }
.psc-sr .u{ width:16px; font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
.cdt-in.psc-pct{ width:96px; height:34px; padding:6px 8px; justify-content:flex-end; }
.psc-sv{ display:inline-block; margin-top:8px; padding:8px 14px; border-radius:12px; background:var(--a600); color:#fff; font-size:14px; line-height:var(--lh-sm); font-weight:500; }
/* Xem trước minh hoạ: mt-4 bg-stone-50 border border-stone-200 rounded-lg p-3; ô w-24 px-2 py-1 text-xs (nền trong suốt);
   chip text-[11px] px-2 py-1 rounded-full bg-white border border-stone-200 text-stone-600 */
.psc-pv{ margin-top:16px; padding:12px; border-radius:8px; border:1px solid var(--s200); background:var(--s50); }
.psc-pv .hd{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12px; line-height:var(--lh-xs); }
.psc-pv .hd .l{ color:var(--s500); }
.psc-pv .hd .u{ color:var(--s400); }
.psc-pv .hd .in{ flex:none; width:96px; padding:4px 8px; border-radius:8px; border:1px solid var(--s200); text-align:right; color:#000; }
.psc-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.psc-chips span{ padding:4px 8px; border-radius:999px; border:1px solid var(--s200); background:#fff; color:var(--s600); font-size:11px; line-height:1.5; }

/* Mẫu phiếu MN: nhóm mb-8; đầu nhóm flex justify-between mb-3, h3 text-sm font-bold text-stone-700 uppercase tracking-wide */
.psc-grp{ margin-bottom:32px; }
.psc-gh{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.psc-h{ font-size:14px; line-height:var(--lh-sm); font-weight:700; color:var(--s700); text-transform:uppercase; letter-spacing:.025em; }
/* Lưới lg:grid-cols-3 gap-3; thẻ bg-white rounded-xl border border-stone-200 p-4 flex gap-3 (viền trên 3px màu theme_color: style="") */
.psc-tg{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.psc-tc{ display:flex; gap:12px; padding:16px; border-radius:12px; border:1px solid var(--s200); background:#fff; font-size:16px; line-height:1.5; }
.psc-tc .em{ flex:none; display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:8px; border:1px solid var(--s200); background:var(--s50); font-size:24px; line-height:var(--lh-2xl); }
.psc-tc .bd{ flex:1; min-width:0; }
.psc-tc .t{ display:flex; align-items:center; gap:8px; }
.psc-tc .t .e{ font-size:16px; line-height:1; }
.psc-tc .t b{ font-weight:600; color:var(--s800); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.psc-tc .p{ margin-top:4px; font-size:12px; line-height:var(--lh-xs); color:var(--s500); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.psc-tc .a{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.psc-tc .a .ad-act + .ad-act{ margin-left:0; }
/* Modal thêm mẫu (= .gft-m.cfg-m): ô hex px-2 py-2 text-xs font-mono; Chọn ảnh text-xs font-semibold px-3 py-1.5 rounded-lg border */
.cdt-in.mono.psc-hx{ height:34px; padding:8px; font-size:12px; line-height:var(--lh-xs); }
.psc-img{ display:inline-block; padding:6px 12px; border-radius:8px; border:1px solid var(--s200); color:var(--s600); font-size:12px; line-height:var(--lh-xs); font-weight:600; }

/* Báo cáo MN — thẻ thống kê lg:grid-cols-6 gap-3 mb-5; thẻ p-3.5; nhãn text-[11px] uppercase mb-1; số text-lg font-bold */
.psc-st{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:12px; margin-bottom:20px; }
.psc-st > div{ padding:14px; border-radius:12px; border:1px solid var(--s200); background:#fff; }
.psc-st .lb{ margin-bottom:4px; font-size:11px; line-height:1.5; color:var(--s400); text-transform:uppercase; letter-spacing:.025em; }
.psc-st .v{ font-size:18px; line-height:var(--lh-lg); font-weight:700; color:var(--s800); }
.psc-st .v.a{ color:var(--a600); }
.psc-st .v.s7{ color:var(--s700); }
.psc-st .v.r{ color:var(--r500); }
.psc-st .sub{ font-size:11px; line-height:1.5; color:var(--s400); }
/* Thẻ trắng p-4 mb-5 (bộ lọc, bảng gộp, dự toán) — KHÔNG overflow-hidden: popup <select> dự toán tràn ra ngoài thẻ */
.psc-box{ margin-bottom:20px; padding:16px; border-radius:12px; border:1px solid var(--s200); background:#fff; }
/* Bộ lọc: grid lg:grid-cols-4 gap-2.5; ô / select px-3 py-2 text-sm rounded-lg border-stone-300; date = ô của Chrome (dd/mm/yyyy + lịch) */
.psc-fg{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.psc-s3{ border-color:var(--s300); }
.cdt-in.psc-dt{ justify-content:space-between; }
.cdt-in.psc-dt svg{ flex:none; width:14px; height:14px; }
.psc-ex{ display:flex; justify-content:flex-end; margin-top:12px; }
/* Bảng gộp: min-w-[600px] text-sm; thead text-xs uppercase (không nền); th px-3 py-2 căn phải (cột đầu căn trái);
   tbody divide-y divide-stone-100; td px-3 py-2.5 text-right text-stone-600, cột đầu font-medium text-stone-700, điểm amber-600 semibold */
.psc-gt{ width:100%; min-width:600px; border-collapse:collapse; font-size:14px; line-height:var(--lh-sm); }
.psc-gt thead{ color:var(--s500); font-size:12px; line-height:var(--lh-xs); text-transform:uppercase; letter-spacing:.025em; }
.psc-gt th{ padding:8px 12px; font-weight:600; text-align:right; }
.psc-gt td{ padding:10px 12px; text-align:right; color:var(--s600); }
.psc-gt th:first-child, .psc-gt td:first-child{ text-align:left; }
.psc-gt td:first-child{ font-weight:500; color:var(--s700); }
.psc-gt td.pt{ font-weight:600; color:var(--a600); }
.psc-gt tbody tr:not(:last-child) > td{ border-bottom:1px solid var(--s100); }
/* Dự toán: h3 (= .psc-h) mb-3; công thức text-xs leading-relaxed mb-4; hàng flex flex-wrap items-end gap-3;
   nhãn text-xs font-medium text-stone-700 mb-1; Số trẻ w-28 text-right border-stone-300; tổng ml-auto text-right, số text-xl font-bold */
.psc-bc .psc-h{ margin-bottom:12px; }
.psc-bf{ margin-bottom:16px; font-size:12px; line-height:1.625; color:var(--s500); }
.psc-bf b{ font-weight:700; color:var(--a600); }
.psc-br{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.psc-br .l{ display:block; margin-bottom:4px; font-size:12px; line-height:var(--lh-xs); font-weight:500; color:var(--s700); }
.cdt-in.psc-n{ width:112px; justify-content:flex-end; border-color:var(--s300); }
.psc-tot{ margin-left:auto; text-align:right; }
.psc-tot .l{ font-size:11px; line-height:1.5; color:var(--s400); text-transform:uppercase; letter-spacing:.025em; }
.psc-tot .v{ font-size:20px; line-height:calc(1.75 / 1.25); font-weight:700; color:var(--a600); }
/* Modal huỷ phiếu: max-w-md; textarea rows=3 border-stone-200 focus:ring-2 ring-amber-400 (= .ad-ta 78px); nút mt-5, Xác nhận huỷ bg-red-600 */
.ad-modal-card.gft-m.psc-cm{ max-width:448px; }
.psc-cm .ad-ta{ border-color:var(--s200); }
.psc-cm .ad-ta.focus{ border-color:var(--s200); box-shadow:0 0 0 2px var(--a400); }
.psc-cm .ad-ta .caret.off{ display:none; }
.psc-cm .gft-btns{ margin-top:20px; }
.gft-btns .ok.red{ background:var(--r600); }
.gft-btns .ok.red.hov{ background:var(--r700); }

/* ═══ Pages/Subscribe/Start.vue, Order.vue, Success.vue — trang mua gói công khai /subscribe ═══
   Trang khách (không có Layouts/Default.vue): min-h-screen py-6 px-4, cột max-w-md mx-auto (448px giữa trang 1440).
   .ws-page = khối cuộn (video đặt translateY theo t); thanh dưới fixed bottom-0 (.ws-bar) nằm ngoài khối cuộn. */
.br-scr .scr.ws{ background:var(--s100); }
.ws-page{ min-height:900px; padding:24px 16px 112px; background:linear-gradient(to bottom in oklab, var(--a50), var(--s50), var(--s100)); }   /* Start: pb-28; Order: py-6 */
.ws-page.po{ padding-bottom:24px; }
.ws-page.ok{ display:flex; align-items:center; padding-bottom:24px; background:linear-gradient(to bottom in oklab, var(--e50), var(--s50), var(--s100)); }   /* Success: flex items-center */
.ws-col{ width:448px; margin:0 auto; }

/* Header: text-center mb-5; pill inline-flex gap-2.5 px-4 py-2 bg-amber-100 rounded-2xl mb-3; logo w-9 h-9 rounded-lg;
   chữ text-base font-semibold text-amber-800 tracking-wide; h1 text-xl font-semibold; p mt-1 text-sm text-stone-500 */
.ws-hd{ margin-bottom:20px; text-align:center; }
.ws-brand{ display:inline-flex; align-items:center; gap:10px; margin-bottom:12px; padding:8px 16px; border-radius:16px; background:var(--a100); }
.ws-brand img{ display:block; width:36px; height:36px; border-radius:8px; object-fit:cover; }
.ws-brand span{ font-size:16px; line-height:1.5; font-weight:600; letter-spacing:.025em; color:var(--a800); }
.ws-hd h1{ font-size:20px; line-height:calc(1.75 / 1.25); font-weight:600; color:var(--s800); }
.ws-hd p{ margin-top:4px; font-size:14px; line-height:var(--lh-sm); color:var(--s500); }

/* Banner giới thiệu (chùa): mb-4 px-4 py-3 rounded-xl border bg-amber-50 border-amber-200 flex items-start gap-3;
   icon w-9 h-9 rounded-full bg-amber-100; "Bạn được giới thiệu bởi" text-xs amber-700; tên text-sm semibold; nhãn text-[11px] amber-600;
   nút X -mr-1 -mt-1 p-1 text-stone-400, svg w-4 */
.ws-ref{ display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; padding:12px 16px; border-radius:12px; border:1px solid var(--a200); background:var(--a50); }
.ws-ref .ic{ flex:none; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--a100); color:var(--a700); }
.ws-ref .bd{ flex:1; min-width:0; }
.ws-ref .lb{ font-size:12px; line-height:var(--lh-xs); color:var(--a700); }
.ws-ref .nm{ font-size:14px; line-height:var(--lh-sm); font-weight:600; color:var(--s800); }
.ws-ref .sb{ font-size:11px; line-height:1.5; color:var(--a600); }
.ws-ref .x{ flex:none; margin:-4px -4px 0 0; padding:4px; color:var(--s400); }
.ws-ref .x svg{ width:16px; height:16px; }

/* Tiến trình: mb-4; hàng mb-1.5 text-[11px]; "Bước N/5" font-semibold amber-700 uppercase tracking-wide;
   thanh h-1.5 bg-stone-200/70 rounded-full, phần đầy bg-linear-to-r from-amber-400 to-amber-500 (width do video đặt) */
.ws-pr{ margin-bottom:16px; }
.ws-pr .row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; font-size:11px; line-height:1.5; }
.ws-pr .st{ font-weight:600; text-transform:uppercase; letter-spacing:.025em; color:var(--a700); }
.ws-pr .lb{ color:var(--s500); }
.ws-pr .bar{ height:6px; border-radius:999px; overflow:hidden; background:color-mix(in oklab, var(--s200) 70%, transparent); }
.ws-pr .bar i{ display:block; height:100%; background:linear-gradient(to right in oklab, var(--a400), var(--a500)); }

/* Thẻ bước: bg-white rounded-2xl shadow-sm border border-stone-200 p-5 mb-4; h2 text-base font-semibold mb-1 (Xác nhận đơn mb-3);
   mô tả text-xs text-stone-500 mb-4 */
.ws-card{ margin-bottom:16px; padding:20px; border-radius:16px; border:1px solid var(--s200); background:#fff; box-shadow:var(--sh-sm); }
.ws-card h2{ margin-bottom:4px; font-size:16px; line-height:1.5; font-weight:600; color:var(--s800); }
.ws-card h2.mb3{ margin-bottom:12px; }
.ws-card .ds{ margin-bottom:16px; font-size:12px; line-height:var(--lh-xs); color:var(--s500); }

/* Ô nhập: flex-1 px-3.5 py-2.5 text-sm rounded-lg border-stone-300, focus:border-amber-400 ring-2 ring-amber-100,
   placeholder stone-400; mã chùa thêm uppercase tracking-wider (placeholder normal-case), disabled:bg-stone-50.
   .tx chữ gõ, .caret con trỏ (màu chữ stone-800), .plh placeholder */
.ws-row{ display:flex; gap:8px; }
.ws-inp{ flex:1; display:flex; align-items:center; min-width:0; height:42px; padding:10px 14px; border-radius:8px; border:1px solid var(--s300); background:#fff; font-size:14px; line-height:var(--lh-sm); color:var(--s800); white-space:nowrap; overflow:hidden; }
.ws-inp.focus{ border-color:var(--a400); box-shadow:0 0 0 2px var(--a100); }
.ws-inp .plh{ color:var(--s400); }
.ws-inp .caret{ flex:none; width:1px; height:17px; margin-left:0; vertical-align:0; background:var(--s800); }
.ws-inp:not(.focus) .caret{ display:none; }
.ws-inp:not(.has) .caret{ margin-right:-1px; }
.ws-inp.up .tx{ text-transform:uppercase; letter-spacing:.05em; }
.ws-inp.dis{ background:var(--s50); }
/* Nút: px-4 py-2.5 bg-amber-500 hover:bg-amber-600 disabled:bg-amber-200 text-white text-sm font-medium rounded-lg;
   Bỏ (mã chùa): bg-stone-100 hover:bg-stone-200 text-stone-700 */
.ws-btn{ display:flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:8px; background:var(--a500); color:#fff; font-size:14px; line-height:var(--lh-sm); font-weight:500; white-space:nowrap; }
.ws-btn.hov{ background:var(--a600); }
.ws-btn.dis{ background:var(--a200); }
.ws-btn.gray{ background:var(--s100); color:var(--s700); }
.ws-btn.gray.hov{ background:var(--s200); }

/* Khối tải app (chỉ khi chưa tìm thấy tài khoản): mt-4 p-3.5 rounded-xl bg-amber-50/70 border-amber-200;
   chữ text-xs text-stone-600 mb-3; QR w-24 h-24 rounded-lg border-amber-200; nhắc text-[11px] mb-1.5;
   nút w-full px-3 py-2.5 gap-1.5 text-sm font-semibold rounded-lg + icon w-4 */
.ws-dl{ margin-top:16px; padding:14px; border-radius:12px; border:1px solid var(--a200); background:color-mix(in oklab, var(--a50) 70%, transparent); }
.ws-dl > p{ margin-bottom:12px; font-size:12px; line-height:var(--lh-xs); color:var(--s600); }
.ws-dl > p b{ font-weight:500; color:var(--a700); }
.ws-dl .r{ display:flex; align-items:center; gap:12px; }
.ws-dl .qr{ flex:none; width:96px; height:96px; padding:6px; border-radius:8px; border:1px solid var(--a200); background:#fff; }
.ws-dl .bd{ flex:1; min-width:0; }
.ws-dl .hint{ margin-bottom:6px; font-size:11px; line-height:1.5; color:var(--s500); }
.ws-dl .ws-btn{ gap:6px; padding:10px 12px; font-weight:600; }
.ws-dl .ws-btn svg{ width:16px; height:16px; }
.ws-qrs{ display:block; width:100%; height:100%; }   /* mã QR vẽ giả (SVG) — không quét được */

/* Thẻ lựa chọn (label + radio): space-y-2.5; flex items-start gap-3 p-3.5 rounded-xl border;
   chọn: border-amber-400 bg-amber-50/60 ring-2 ring-amber-100; không chọn: border-stone-200 hover:border-stone-300;
   không cho chọn: bg-stone-50/70 opacity-60. Radio = ô mặc định của Chrome mt-1 w-4 h-4 accent-amber-500 */
.ws-opts{ display:flex; flex-direction:column; gap:10px; }
.ws-opt{ display:flex; align-items:flex-start; gap:12px; padding:14px; border-radius:12px; border:1px solid var(--s200); }
.ws-opt.hov{ border-color:var(--s300); }
.ws-opt.on{ border-color:var(--a400); background:color-mix(in oklab, var(--a50) 60%, transparent); box-shadow:0 0 0 2px var(--a100); }
.ws-opt.off{ background:color-mix(in oklab, var(--s50) 70%, transparent); opacity:.6; }
.ws-rd{ flex:none; width:16px; height:16px; margin-top:4px; border-radius:50%; border:1px solid #767676; background:#fff; }
.ws-rd.on{ border:2px solid var(--a500); background:radial-gradient(circle, var(--a500) 0 3.6px, #fff 4.1px); }
.ws-opt.off .ws-rd{ border-color:rgba(118,118,118,.3); background:rgba(239,239,239,.3); }
.ws-opt .bd{ flex:1; min-width:0; }
.ws-opt .tr{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ws-opt .t{ font-size:14px; line-height:var(--lh-sm); font-weight:600; color:var(--s800); }
.ws-opt .pr{ font-size:14px; line-height:var(--lh-sm); font-weight:600; color:var(--a700); white-space:nowrap; }
.ws-opt .d{ margin-top:2px; font-size:12px; line-height:var(--lh-xs); color:var(--s500); }
.ws-opt .m{ margin-top:6px; font-size:11px; line-height:1.5; color:var(--s500); }
.ws-opt .m b{ font-weight:500; color:var(--s700); }
/* Badge vai trò: px-2 py-0.5 rounded-full text-[10px] font-medium border text-amber-700 bg-amber-50 border-amber-200 */
.ws-role{ padding:2px 8px; border-radius:999px; border:1px solid var(--a200); background:var(--a50); color:var(--a700); font-size:10px; line-height:1.5; font-weight:500; white-space:nowrap; }
/* Ghi chú "Chỉ mua được khi…": mt-1.5 text-[11px] text-amber-700 bg-amber-50 border-amber-200 rounded px-2 py-1 inline-block */
.ws-warn{ display:inline-block; margin-top:6px; padding:4px 8px; border-radius:4px; border:1px solid var(--a200); background:var(--a50); color:var(--a700); font-size:11px; line-height:1.5; }

/* Mã chùa đối tác: mt-5 pt-4 border-t border-stone-100; tiêu đề text-sm semibold + "(không bắt buộc)" text-xs stone-400 (gap-1.5 mb-1);
   gợi ý text-xs stone-500 mb-3 (% = font-medium emerald-600); hộp xanh mt-3 p-3 rounded-lg bg-emerald-50 border-emerald-200,
   check w-5 emerald-600 mt-0.5, chữ text-xs emerald-800 */
.ws-pc{ margin-top:20px; padding-top:16px; border-top:1px solid var(--s100); }
.ws-pc .h{ display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.ws-pc .h b{ font-size:14px; line-height:var(--lh-sm); font-weight:600; color:var(--s800); }
.ws-pc .h span{ font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
.ws-pc > p{ margin-bottom:12px; font-size:12px; line-height:var(--lh-xs); color:var(--s500); }
.ws-pc > p em{ font-style:normal; font-weight:500; color:var(--e600); }
.ws-ok{ display:flex; align-items:flex-start; gap:8px; margin-top:12px; padding:12px; border-radius:8px; border:1px solid var(--e200); background:var(--e50); font-size:12px; line-height:var(--lh-xs); color:var(--e800); }
.ws-ok svg{ flex:none; width:20px; height:20px; margin-top:2px; color:var(--e600); }
.ws-ok b{ font-weight:600; }

/* Xác nhận đơn: space-y-3 text-sm; hàng flex items-center justify-between; nhãn stone-500; giá trị font-medium stone-800 (dòng phụ text-[11px] stone-500);
   tiền: mt-4 pt-4 border-t; "Số tiền thanh toán" text-sm stone-600 + text-2xl font-bold amber-700 (items-baseline mb-1);
   kênh text-xs stone-500; niêm yết mt-2 text-xs stone-400 line-through text-right */
.ws-rv{ display:flex; flex-direction:column; gap:12px; font-size:14px; line-height:var(--lh-sm); }
.ws-rv > div{ display:flex; align-items:center; justify-content:space-between; }
.ws-rv .l{ color:var(--s500); }
.ws-rv .v{ font-weight:500; color:var(--s800); text-align:right; }
.ws-rv .v small{ font-size:11px; color:var(--s500); }
.ws-rv .v small.n{ font-weight:400; }
.ws-rv .v.am{ color:var(--a700); }
.ws-tot{ margin-top:16px; padding-top:16px; border-top:1px solid var(--s100); }
.ws-tot .r1{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px; }
.ws-tot .r1 span{ font-size:14px; line-height:var(--lh-sm); color:var(--s600); }
.ws-tot .r1 b{ font-size:24px; line-height:var(--lh-2xl); font-weight:700; color:var(--a700); }
.ws-tot .r2{ display:flex; justify-content:space-between; font-size:12px; line-height:var(--lh-xs); color:var(--s500); }
.ws-tot .lst{ margin-top:8px; font-size:12px; line-height:var(--lh-xs); color:var(--s400); text-decoration:line-through; text-align:right; }
/* Tạo đơn: mt-4 w-full py-3 px-4 bg-amber-500 hover:bg-amber-600 disabled:bg-amber-300 text-sm font-semibold rounded-xl;
   đang gửi: inline-flex gap-2 + spinner w-4 (animate-spin — video xoay theo t); ghi chú mt-2 text-[11px] text-center stone-400 */
.ws-sub{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:16px; padding:12px 16px; border-radius:12px; background:var(--a500); color:#fff; font-size:14px; line-height:var(--lh-sm); font-weight:600; }
.ws-sub.hov{ background:var(--a600); }
.ws-sub.busy{ background:var(--a300); }
.ws-spin{ flex:none; width:16px; height:16px; }
.ws-spin .o25{ opacity:.25; }
.ws-spin .o75{ opacity:.75; }
.ws-sn{ margin-top:8px; font-size:11px; line-height:1.5; text-align:center; color:var(--s400); }
.ws-ft{ margin-top:16px; font-size:11px; line-height:1.5; text-align:center; color:var(--s400); }   /* footer mt-4; Order/Success mt-6 = .lg */
.ws-ft.lg{ margin-top:24px; }
.ws-ft .mono{ font-family:var(--mono); }

/* Thanh dưới: fixed bottom-0 bg-white/95 backdrop-blur border-t border-stone-200 px-4 py-3, max-w-md mx-auto flex gap-2;
   Quay lại px-4 py-2.5 text-sm font-medium rounded-lg border-stone-200 text-stone-600 disabled:opacity-40;
   Tiếp tục flex-1 bg-amber-500 font-semibold disabled:bg-amber-200; bước Xác nhận: "← Quay lại chỉnh sửa" w-full py-2 text-xs stone-500 */
.ws-bar{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:12px 16px; border-top:1px solid var(--s200); background:color-mix(in oklab, #fff 95%, transparent); backdrop-filter:blur(8px); }
.ws-bar .in{ display:flex; align-items:center; gap:8px; width:448px; margin:0 auto; }
.ws-back{ padding:10px 16px; border-radius:8px; border:1px solid var(--s200); color:var(--s600); font-size:14px; line-height:var(--lh-sm); font-weight:500; white-space:nowrap; }
.ws-back.dis{ opacity:.4; }
.ws-back.hov{ background:var(--s50); }
.ws-bar .ws-btn{ flex:1; font-weight:600; }
.ws-bar .rv{ width:100%; padding:8px 16px; text-align:center; font-size:12px; line-height:var(--lh-xs); font-weight:500; color:var(--s500); }

/* ── Order.vue ── header mb-4 flex justify-between: "Quay lại" text-sm stone-500 gap-1 + chevron w-4;
   badge px-3 py-1 rounded-full text-xs font-medium border: chờ = amber-100/700/200 + chấm w-1.5 amber-500 animate-pulse,
   đã trả = emerald-100/700/200 + check w-3.5 */
.ws-oh{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ws-oh .bk{ display:inline-flex; align-items:center; gap:4px; font-size:14px; line-height:var(--lh-sm); color:var(--s500); }
.ws-oh .bk svg{ width:16px; height:16px; }
.ws-st{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; border:1px solid var(--a200); background:var(--a100); color:var(--a700); font-size:12px; line-height:var(--lh-xs); font-weight:500; }
.ws-st i{ width:6px; height:6px; border-radius:50%; background:var(--a500); }
.ws-st svg{ width:14px; height:14px; }
.ws-st.paid{ border-color:var(--e200); background:var(--e100); color:var(--e700); }
/* Thẻ khách: p-4 rounded-2xl mb-4; avatar w-10 h-10 bg-stone-200 (chữ cái đầu text-sm semibold stone-500);
   lưới mt-3 pt-3 border-t grid-cols-2 gap-3 text-xs: nhãn stone-500, giá trị font-medium mt-0.5 */
.ws-cu{ margin-bottom:16px; padding:16px; border-radius:16px; border:1px solid var(--s200); background:#fff; box-shadow:var(--sh-sm); }
.ws-who{ display:flex; align-items:center; gap:12px; }
.ws-av{ flex:none; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--s200); color:var(--s500); font-size:14px; line-height:var(--lh-sm); font-weight:600; }
.ws-av.lg{ width:48px; height:48px; font-size:16px; line-height:1.5; }
.ws-who .bd{ flex:1; min-width:0; }
.ws-who .n{ font-size:14px; line-height:var(--lh-sm); font-weight:600; color:var(--s800); }
.ws-who .p{ font-size:12px; line-height:var(--lh-xs); color:var(--s500); }
.ws-who .chg{ font-size:12px; line-height:var(--lh-xs); font-weight:500; color:var(--a600); }
.ws-who .chg.hov{ color:var(--a700); }
.ws-cu .g{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid var(--s100); font-size:12px; line-height:var(--lh-xs); }
.ws-cu .g .l{ color:var(--s500); }
.ws-cu .g .v{ margin-top:2px; font-weight:500; color:var(--s800); }
/* Thẻ QR: overflow-hidden mb-4; vùng trên bg-gradient-to-b from-white to-stone-50 px-4 pt-5 pb-4 text-center border-b relative;
   ảnh VietQR w-64 h-64 rounded-lg border (video vẽ giả); số tiền mt-3 text-2xl font-bold amber-700;
   "Hết hạn sau" mt-1 text-xs stone-500 gap-1.5 + đồng hồ w-3.5, m:ss font-mono semibold stone-700 */
.ws-qr{ margin-bottom:16px; border-radius:16px; border:1px solid var(--s200); background:#fff; box-shadow:var(--sh-sm); overflow:hidden; }
.ws-qr .top{ position:relative; padding:20px 16px 16px; border-bottom:1px solid var(--s100); text-align:center; background:linear-gradient(to bottom in oklab, #fff, var(--s50)); }
.ws-qr .top > p{ margin-bottom:8px; font-size:12px; line-height:var(--lh-xs); color:var(--s500); }
.ws-qr .img{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:256px; height:256px; margin:0 auto; border-radius:8px; border:1px solid var(--s200); background:#fff; }
.ws-qr .img .ws-qrs{ width:196px; height:196px; }
.ws-qr .img small{ font-size:10px; line-height:1.2; font-weight:700; letter-spacing:.04em; color:var(--s500); }
.ws-qr .amt{ margin-top:12px; font-size:24px; line-height:var(--lh-2xl); font-weight:700; color:var(--a700); }
.ws-qr .exp{ display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-size:12px; line-height:var(--lh-xs); color:var(--s500); }
.ws-qr .exp svg{ width:14px; height:14px; }
.ws-qr .exp b{ font-family:var(--mono); font-weight:600; color:var(--s700); }
/* Đã nhận tiền: absolute inset-0 bg-white/85 backdrop-blur-sm z-10; vòng w-16 h-16 bg-emerald-100 mb-3, check w-8 emerald-600;
   "Đã nhận thanh toán" text-sm semibold emerald-700; "Đang chuyển…" text-xs stone-500 mt-1 */
.ws-paid{ position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; text-align:center; background:color-mix(in oklab, #fff 85%, transparent); backdrop-filter:blur(4px); }
.ws-paid .c{ display:flex; align-items:center; justify-content:center; width:64px; height:64px; margin:0 auto 12px; border-radius:50%; background:var(--e100); color:var(--e600); }
.ws-paid .c svg{ width:32px; height:32px; }
.ws-paid b{ display:block; font-size:14px; line-height:var(--lh-sm); font-weight:600; color:var(--e700); }
.ws-paid small{ display:block; margin-top:4px; font-size:12px; line-height:var(--lh-xs); color:var(--s500); }
/* Chuyển khoản tay: px-4 py-4 space-y-3; h3 text-xs uppercase tracking-wide stone-400 semibold;
   2 cột nhãn text-[11px] stone-500 / giá trị text-sm font-medium mt-0.5; ô copy py-2 px-3 bg-stone-50 rounded-lg + Copy text-xs font-medium amber-600;
   ô nội dung CK bg-amber-50 border-amber-200, nhãn amber-700, mã font-mono font-bold amber-900, Copy amber-700 */
.ws-bk{ display:flex; flex-direction:column; gap:12px; padding:16px; }
.ws-bk h3{ font-size:12px; line-height:var(--lh-xs); font-weight:600; text-transform:uppercase; letter-spacing:.025em; color:var(--s400); }
.ws-bk .two{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ws-bk .two > div{ flex:1; min-width:0; }
.ws-bk .l{ font-size:11px; line-height:1.5; color:var(--s500); }
.ws-bk .v{ margin-top:2px; font-size:14px; line-height:var(--lh-sm); font-weight:500; color:var(--s800); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-bx{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; border-radius:8px; background:var(--s50); }
.ws-bx .bd{ flex:1; min-width:0; }
.ws-bx .v.mono{ font-family:var(--mono); font-weight:600; }
.ws-bx .v.b{ font-weight:600; }
.ws-bx .cp{ flex:none; font-size:12px; line-height:var(--lh-xs); font-weight:500; color:var(--a600); }
.ws-bx .cp.hov{ color:var(--a700); }
.ws-bx.ct{ border:1px solid var(--a200); background:var(--a50); }
.ws-bx.ct .l, .ws-bx.ct .cp{ color:var(--a700); }
.ws-bx.ct .cp.hov{ color:var(--a800); }
.ws-bx.ct .v{ font-family:var(--mono); font-weight:700; color:var(--a900); }
/* Đang chờ tiền: text-center mb-4 > inline-flex gap-2 px-3 py-1.5 bg-white border rounded-full text-xs stone-600 shadow-sm + spinner w-3.5 amber-500 */
.ws-poll{ margin-bottom:16px; text-align:center; }
.ws-poll > span{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; border:1px solid var(--s200); background:#fff; box-shadow:var(--sh-sm); font-size:12px; line-height:var(--lh-xs); color:var(--s600); }
.ws-poll .ws-spin{ width:14px; height:14px; color:var(--a500); }
/* <details> Cách thanh toán: bg-white border rounded-2xl text-sm; summary px-4 py-3 stone-700 font-medium flex justify-between + chevron w-4 stone-400 */
.ws-help{ border-radius:16px; border:1px solid var(--s200); background:#fff; font-size:14px; line-height:var(--lh-sm); overflow:hidden; }
.ws-help .s{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; font-weight:500; color:var(--s700); }
.ws-help .s svg{ width:16px; height:16px; color:var(--s400); }

/* ── Success.vue ── hero text-center mb-6: vòng w-20 h-20 bg-emerald-100 mb-4, check w-10 emerald-600; h1 text-xl font-bold; p mt-1 text-sm stone-500 */
.ws-hero{ margin-bottom:24px; text-align:center; }
.ws-hero .c{ display:flex; align-items:center; justify-content:center; width:80px; height:80px; margin:0 auto 16px; border-radius:50%; background:var(--e100); color:var(--e600); }
.ws-hero .c svg{ width:40px; height:40px; }
.ws-hero h1{ font-size:20px; line-height:calc(1.75 / 1.25); font-weight:700; color:var(--s800); }
.ws-hero p{ margin-top:4px; font-size:14px; line-height:var(--lh-sm); color:var(--s500); }
/* Thẻ đơn: overflow-hidden mb-4; đầu px-5 py-4 bg-linear-to-r from-emerald-50 to-amber-50 border-b ("Mã đơn" text-[11px] uppercase tracking-wide semibold, mã text-base font-mono bold mt-0.5);
   thân px-5 py-4 space-y-3 text-sm; các hàng border-t pt-3 space-y-2 flex justify-between */
.ws-sum{ margin-bottom:16px; border-radius:16px; border:1px solid var(--s200); background:#fff; box-shadow:var(--sh-sm); overflow:hidden; }
.ws-sum .hd{ padding:16px 20px; border-bottom:1px solid var(--s100); background:linear-gradient(to right in oklab, var(--e50), var(--a50)); }
.ws-sum .hd small{ display:block; font-size:11px; line-height:1.5; font-weight:600; text-transform:uppercase; letter-spacing:.025em; color:var(--s500); }
.ws-sum .hd b{ display:block; margin-top:2px; font-family:var(--mono); font-size:16px; line-height:1.5; font-weight:700; color:var(--s800); }
.ws-sum > .bdy{ display:flex; flex-direction:column; gap:12px; padding:16px 20px; font-size:14px; line-height:var(--lh-sm); }
.ws-sum .rows{ display:flex; flex-direction:column; gap:8px; padding-top:12px; border-top:1px solid var(--s100); }
.ws-sum .rows > div{ display:flex; justify-content:space-between; }
.ws-sum .l{ color:var(--s500); }
.ws-sum .v{ font-weight:500; color:var(--s800); }
.ws-sum .v.g{ font-weight:600; color:var(--e700); }
/* Bước tiếp theo: p-5 mb-4; h2 text-sm font-semibold stone-700 mb-3; ol space-y-2.5 text-sm stone-600; li flex gap-3;
   số w-6 h-6 rounded-full bg-amber-100 amber-700 text-xs semibold */
.ws-nx{ margin-bottom:16px; padding:20px; border-radius:16px; border:1px solid var(--s200); background:#fff; box-shadow:var(--sh-sm); }
.ws-nx h2{ margin-bottom:12px; font-size:14px; line-height:var(--lh-sm); font-weight:600; color:var(--s700); }
.ws-nx ol{ display:flex; flex-direction:column; gap:10px; list-style:none; font-size:14px; line-height:var(--lh-sm); color:var(--s600); }
.ws-nx li{ display:flex; gap:12px; }
.ws-nx li i{ flex:none; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--a100); color:var(--a700); font-size:12px; line-height:var(--lh-xs); font-weight:600; font-style:normal; }
.ws-nx li b{ font-weight:600; color:var(--s800); }
/* "Đăng ký cho người khác": w-full py-3 px-4 bg-stone-100 hover:bg-stone-200 text-stone-700 text-sm font-medium rounded-xl */
.ws-again{ display:block; width:100%; padding:12px 16px; border-radius:12px; background:var(--s100); color:var(--s700); text-align:center; font-size:14px; line-height:var(--lh-sm); font-weight:500; }

/* ═══ Pages/Setting/Index.vue (Cài đặt) — dải tab SettingsGroupTabs.vue dùng .ad-tabs / .ad-tab ═══
   Khung: flex gap-6; trái w-52 shrink-0 > nav bg-white rounded-xl border p-2 sticky top-22 (video bù sticky bằng transform);
   phải flex-1 min-w-0 space-y-5. Ô nhập px-3 py-2 text-sm border-stone-200 rounded-lg = .cdt-in (focus ring-2 amber-400;
   khung .set-e = ring emerald-400 của form "Thêm gói mới"). */
.set-wrap{ display:flex; gap:24px; }
.set-side{ flex:none; width:208px; }
.set-nav{ padding:8px; border-radius:12px; border:1px solid var(--s200); background:#fff; }
/* Mục: w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium; chọn = bg-amber-50 amber-700 border amber-200;
   thường stone-600 hover:bg-stone-50 hover:stone-800; icon <span class="text-base"> (emoji) */
.set-nav .it{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border-radius:8px; font-size:14px; line-height:var(--lh-sm); font-weight:500; color:var(--s600); white-space:nowrap; }
.set-nav .it.on{ border:1px solid var(--a200); background:var(--a50); color:var(--a700); }
.set-nav .it.hov:not(.on){ background:var(--s50); color:var(--s800); }
.set-nav .it .ic{ font-size:16px; line-height:1.5; }
.set-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:20px; }
/* Thẻ: bg-white rounded-xl border p-6. Gói basic border-amber-200, plus border-purple-200, gói ẩn opacity-60;
   "Thêm gói mới" border-dashed emerald-300; gói mở rộng border-sky-200, "Thêm gói mở rộng" dashed sky-300 */
.set-card{ padding:24px; border-radius:12px; border:1px solid var(--s200); background:#fff; }
.set-card.amber{ border-color:var(--a200); }
.set-card.purple{ border-color:var(--p200); }
.set-card.sky{ border-color:var(--sky200); }
.set-card.dash-e{ border-style:dashed; border-color:var(--e300); }
.set-card.dash-sky{ border-style:dashed; border-color:var(--sky300); }
.set-card.off{ opacity:.6; }
.set-card .mt4{ margin-top:16px; }
.set-card .mt5{ margin-top:20px; }
/* h2 font-bold stone-800 text-base (mb-5 / mb-4) */
.set-h2{ font-size:16px; line-height:1.5; font-weight:700; color:var(--s800); }
.set-h2.m5{ margin-bottom:20px; }
.set-h2.m4{ margin-bottom:16px; }
/* Ô: label block text-xs font-semibold stone-600 mb-1.5 (chú thích span stone-400 font-normal) */
.set-f > label{ display:block; margin-bottom:6px; font-size:12px; line-height:var(--lh-xs); font-weight:600; color:var(--s600); }
.set-f > label small{ font-size:inherit; font-weight:400; color:var(--s400); }
.set-card .cdt-in.mono{ font-family:var(--mono); }
.set-card .cdt-in.w32{ width:128px; }
.set-g2, .set-g3{ display:grid; gap:16px; }
.set-g2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.set-g3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
/* Textarea Quyền lợi: px-3 py-2 text-sm border-stone-200 rounded-lg font-mono, rows=8 (178px) / rows=5 (.r5, 118px) */
.set-ta{ height:178px; padding:8px 12px; border-radius:8px; border:1px solid var(--s200); background:#fff; font-family:var(--mono); font-size:14px; line-height:var(--lh-sm); color:#000; white-space:pre-wrap; word-wrap:break-word; overflow:hidden; }
.set-ta.r5{ height:118px; }
.set-ta .plh{ color:var(--s400); }
.set-ta .caret{ display:inline-block; width:1px; height:17px; vertical-align:-3px; background:#000; }
.set-ta:not(.has) .caret{ margin-right:-1px; }
.set-ta:not(.focus) .caret, .set-ta .caret.off{ display:none; }
.set-ta.focus{ box-shadow:0 0 0 2px var(--a400); }
.set-e .cdt-in.focus, .set-e .set-ta.focus{ box-shadow:0 0 0 2px var(--e400); }
/* Gợi ý dưới ô Product ID: col-span-2 text-[11px] stone-400 -mt-2 */
.set-hint{ grid-column:span 2; margin-top:-8px; font-size:11px; line-height:1.5; color:var(--s400); }
.set-hint b{ font-weight:700; }

/* ── Tổng quan: Chính sách dòng họ (space-y-3; hàng flex justify-between gap-4 py-2 border-b border-stone-50, hàng cuối không viền) ── */
.set-pol{ display:flex; flex-direction:column; gap:12px; }
.set-pol > div{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid var(--s50); }
.set-pol > div:last-child{ border-bottom:0; }
.set-pol .t{ font-size:14px; line-height:var(--lh-sm); font-weight:500; color:var(--s700); }
.set-pol .d{ margin-top:2px; font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
/* Toggle lớn: relative w-11 h-6 rounded-full amber-500 / stone-200; núm absolute top-1 w-4 h-4 bg-white shadow left-6 / left-1 */
.set-tgl{ position:relative; flex:none; width:44px; height:24px; border-radius:999px; background:var(--s200); }
.set-tgl i{ position:absolute; top:4px; left:4px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:var(--sh-sm); }
.set-tgl.on{ background:var(--a500); }
.set-tgl.on i{ left:24px; }

/* ── Gói dịch vụ: thẻ gói ── header flex items-center gap-2 mb-1: icon text-xl, tên font-bold text-base,
   badge "Đã ẩn" text-[10px] bold bg-stone-200 stone-600 px-2 py-0.5 rounded-full uppercase, giá ml-auto text-xs bold amber-700 / purple-700 */
.set-ph{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.set-ph .ic{ font-size:20px; line-height:1.4; }
.set-ph .nm{ font-size:16px; line-height:1.5; font-weight:700; color:var(--s800); }
.set-ph .bdg{ padding:2px 8px; border-radius:999px; background:var(--s200); color:var(--s600); font-size:10px; line-height:1.5; font-weight:700; text-transform:uppercase; }
.set-ph .pr{ margin-left:auto; font-size:12px; line-height:var(--lh-xs); font-weight:700; color:var(--a700); }
.set-card.purple .set-ph .pr{ color:var(--p700); }
.set-card.sky .set-ph .pr{ color:var(--sky700); }
/* Toggle nhỏ: inline-flex h-5 w-9 items-center rounded-full, bật amber-500 / purple-500 / sky-500, tắt stone-300, disabled:opacity-50;
   núm h-4 w-4 rounded-full bg-white shadow translate-x-4 / translate-x-0.5 (video đặt transform theo t) */
.set-tg{ flex:none; display:inline-flex; align-items:center; width:36px; height:20px; border-radius:999px; background:var(--s300); }
.set-tg i{ display:block; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:var(--sh-sm); transform:translateX(2px); }
.set-tg.on i{ transform:translateX(16px); }
.set-tg.on{ background:var(--a500); }
.set-card.purple .set-tg.on{ background:var(--p500); }
.set-card.sky .set-tg.on{ background:var(--sky500); }
.set-tg.busy{ opacity:.5; }
/* Dòng dưới tên: p text-xs stone-500 mb-4 (gói đang bật → p rỗng, cao 0); gói ẩn → span stone-400 "(đang ẩn — …)" */
.set-pd{ margin-bottom:16px; font-size:12px; line-height:var(--lh-xs); color:var(--s500); }
.set-pd span{ color:var(--s400); }
/* Hộp lỗi trong thẻ: mb-4 bg-red-50 border-red-200 red-700 text-sm rounded-xl px-4 py-3 */
.set-err{ margin-bottom:16px; padding:12px 16px; border-radius:12px; border:1px solid var(--r200); background:var(--r50); color:var(--r700); font-size:14px; line-height:var(--lh-sm); }
/* Chip điều kiện khoá: flex flex-wrap gap-2 mb-4; chip text-xs semibold bg-stone-100 stone-700 px-3 py-1.5 rounded-full;
   dòng 🔒 text-[10px] stone-400 px-1 self-center */
.set-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.set-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:var(--s100); color:var(--s700); font-size:12px; line-height:var(--lh-xs); font-weight:600; white-space:nowrap; }
.set-lock{ display:inline-flex; align-items:center; align-self:center; padding:0 4px; font-size:10px; line-height:1.5; color:var(--s400); }
/* Nút: flex justify-end mt-4; flex items-center gap-2 text-white text-sm semibold px-5 py-2 rounded-lg shadow-sm disabled:opacity-60.
   Màu amber-500 (basic) / purple-500 (plus) / emerald-500 (Tạo gói) / sky-500 (gói mở rộng), hover -600 */
.set-btns{ display:flex; justify-content:flex-end; margin-top:16px; }
.set-btn{ display:flex; align-items:center; gap:8px; padding:8px 20px; border-radius:8px; background:var(--a500); color:#fff; font-size:14px; line-height:var(--lh-sm); font-weight:600; box-shadow:var(--sh-sm); white-space:nowrap; }
.set-btn.purple{ background:var(--p500); }
.set-btn.e{ background:var(--e500); }
.set-btn.sky{ background:var(--sky500); }
.set-btn.hov{ background:var(--a600); }
.set-btn.e.hov{ background:var(--e600); }
.set-btn.sky.hov{ background:var(--sky600); }
.set-btn.busy{ opacity:.6; }
.set-btn .ws-spin{ width:16px; height:16px; }
/* Nút "＋ Thêm gói mới" (hộp đóng): w-full flex justify-center gap-2 emerald-600 hover:emerald-700 text-sm semibold py-2; ＋ text-lg leading-none.
   Hộp gói mở rộng: sky-600 / sky-700 */
.set-add{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:8px 0; color:var(--e600); font-size:14px; line-height:var(--lh-sm); font-weight:600; }
.set-add span{ font-size:18px; line-height:1; }
.set-add.hov{ color:var(--e700); }
.set-card.dash-sky .set-add{ color:var(--sky600); }
.set-card.dash-sky .set-add.hov{ color:var(--sky700); }
/* Form mở: header flex justify-between mb-1 (h2 + "Đóng" text-xs stone-400); cảnh báo p text-xs stone-500 mb-5;
   dòng tổng thời hạn p text-xs stone-500 mt-2 */
.set-fh{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.set-fh .x{ font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
.set-warn{ margin-bottom:20px; font-size:12px; line-height:var(--lh-xs); color:var(--s500); }
.set-warn b, .set-tot b, .set-intro b{ font-weight:700; }
.set-tot{ margin-top:8px; font-size:12px; line-height:var(--lh-xs); color:var(--s500); }
/* Thẻ giới thiệu gói mở rộng: h2 flex items-center gap-2; p text-xs stone-500 mt-1.5 leading-relaxed */
.set-h2.ic{ display:flex; align-items:center; gap:8px; }
.set-intro{ margin-top:6px; font-size:12px; line-height:1.625; color:var(--s500); }
/* Dùng thử: p text-xs stone-400 mt-2 */
.set-note{ margin-top:8px; font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
/* Nút cuối trang "Lưu cài đặt": flex justify-end; bg-amber-500 px-6 py-2.5 text-sm semibold rounded-lg shadow-sm + icon w-4 h-4 */
.set-save-row{ display:flex; justify-content:flex-end; }
.set-save{ display:flex; align-items:center; gap:8px; padding:10px 24px; border-radius:8px; background:var(--a500); color:#fff; font-size:14px; line-height:var(--lh-sm); font-weight:600; box-shadow:var(--sh-sm); }
.set-save svg{ width:16px; height:16px; }
/* Mỗi mục (activeSection) là 1 <template v-if> nằm thẳng trong khung space-y-5 → video bọc .set-sec để bật / tắt cả mục, giữ gap 20 */
.set-sec{ display:flex; flex-direction:column; gap:20px; }

/* ── Gói mở rộng thành viên: thẻ gói đã lưu + form "Thêm gói mở rộng thành viên" (Index.vue, focus:ring-sky-400) ── */
.set-sky .cdt-in.focus{ box-shadow:0 0 0 2px var(--sky400); }
.set-g3 .col2{ grid-column:span 2; }
/* Ô "Số thành viên thêm" của gói đã lưu: input disabled bg-stone-50 text-stone-500 */
.set-card .cdt-in.dis{ background:var(--s50); color:var(--s500); }
/* Hàng tiêu đề bậc: flex items-center justify-between mb-2; label text-xs semibold stone-600; 2 nút text-[11px] semibold, gap-3:
   "Điền nhanh theo quý" sky-600 (hover sky-700), "＋ Thêm bậc" stone-500 (hover stone-700) */
.set-trh{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.set-trh > label{ font-size:12px; line-height:var(--lh-xs); font-weight:600; color:var(--s600); }
.set-trh > div{ display:flex; align-items:center; gap:12px; }
.set-trh .lk{ font-size:11px; line-height:1.5; font-weight:600; color:var(--s500); white-space:nowrap; }
.set-trh .lk.q{ color:var(--sky600); }
.set-trh .lk.q.hov{ color:var(--sky700); }
/* Bảng bậc: table w-full text-sm; th text-[11px] uppercase stone-400 semibold text-left pb-2 pr-3 (cột 1 w-24, cột 2 w-36);
   td pr-3 pb-2 align-top, cột cuối không pr. Ô px-2 py-2 text-sm; ô tháng w-14 + "tháng" text-xs stone-400 (flex gap-1)
   table-layout:fixed: mockup dùng div thay <input>, chữ gõ vào sẽ làm cột co giãn — <input> thật không đổi bề rộng theo giá trị */
.set-tier{ width:100%; table-layout:fixed; border-collapse:collapse; font-size:14px; line-height:var(--lh-sm); }
.set-tier th{ padding:0 12px 8px 0; text-align:left; font-size:11px; line-height:1.5; font-weight:600; text-transform:uppercase; color:var(--s400); white-space:nowrap; }
/* Cột 1 w-24 (96) nhưng table auto giãn theo min-content: ô w-14 + gap-1 + "tháng" (~32) + pr-3 ≈ 104 → fixed layout phải đặt sẵn 104 */
.set-tier th:nth-child(1){ width:104px; }
.set-tier th:nth-child(2){ width:144px; }
.set-tier td{ padding:0 12px 8px 0; vertical-align:top; }
.set-tier th:last-child, .set-tier td:last-child{ padding-right:0; }
.set-tier .cdt-in{ padding:8px; }
.set-tier .mo{ display:flex; align-items:center; gap:4px; }
.set-tier .mo .cdt-in{ flex:none; width:56px; }
.set-tier .mo > span{ font-size:12px; line-height:var(--lh-xs); color:var(--s400); }
/* Ghi chú dưới bảng: text-[11px] stone-400 mt-2 leading-relaxed */
.set-th{ margin-top:8px; font-size:11px; line-height:1.625; color:var(--s400); }
.set-th b{ font-weight:700; }