/* ============================================================
   VLF 2026 · APP STYLES — mọi màn (prefix .v-)
   Brand tím/vàng · Playfair (số/heading) + Be Vietnam Pro (body)
   ============================================================ */

/* ---------- nền & reset trong app ---------- */
.za-content{ background:var(--vlf-bg); color:var(--vlf-ink-900); font-family:var(--font-sans); }
/* khử khe trắng ở góc bo: nền khung/màn để tối, khít với viền đen iPhone */
.za-frame .za-phone, .za-frame .za-screen{ background:#1B0822; }
.v-num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.v-serif{ font-family:var(--font-serif); }

/* ---------- generic ---------- */
.v-screen{ min-height:100%; }
@keyframes vRise{ from{ transform:translateY(12px); } to{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .v-hero, .v-onboard .inner{ animation:none !important; } }
/* tactile press states */
.v-qa .it{ transition:transform .14s var(--water); }
.v-qa .it:active{ transform:scale(.95); }
.v-chip{ transition:transform .14s var(--water); }
.v-chip:active{ transform:scale(.96); }
.v-row{ transition:background .16s ease; }
.v-row:active{ background:var(--vlf-purple-50); }
.v-prow:active, .v-lb-row:active, .v-msg:active{ background:var(--vlf-purple-50); }
.v-pad{ padding:14px 16px; }
.v-sect{ display:flex; align-items:center; justify-content:space-between; margin:22px 2px 12px; }
.v-sect h3{ margin:0; font-family:var(--font-serif); font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--vlf-ink-900); }
.v-sect a{ font-size:12.5px; font-weight:600; color:var(--vlf-purple-600); text-decoration:none; }
.v-card{ background:#fff; border:1px solid var(--vlf-line); border-radius:16px; box-shadow:var(--shadow-sm); }
.v-muted{ color:var(--vlf-ink-500); }
.v-mono{ font-family:var(--font-mono); }

/* ---------- buttons ---------- */
.v-btn{ width:100%; height:52px; border:none; border-radius:999px; font-family:var(--font-sans);
  font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
.v-btn-primary{ background:var(--vlf-purple-700); color:#fff; box-shadow:var(--shadow-btn); }
.v-btn-gold{ background:var(--vlf-gold-500); color:var(--vlf-purple-900); box-shadow:0 6px 18px rgba(201,162,75,.35); }
.v-btn-ghost{ background:var(--vlf-purple-50); color:var(--vlf-purple-700); border:1px solid var(--vlf-purple-100); }
.v-btn:active{ transform:translateY(1px); }
.v-btn[disabled]{ opacity:.45; box-shadow:none; }

/* sticky CTA bar (L3 task) */
.v-cta{ position:sticky; bottom:0; margin-top:auto; padding:14px 16px calc(14px + var(--zalo-safe-bottom));
  background:var(--vlf-bg); border-top:1px solid var(--vlf-line); box-shadow:0 -8px 24px rgba(42,14,51,.10); z-index:50; }

/* ---------- pills / chips / tags ---------- */
.v-pill{ display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:4px 11px; white-space:nowrap; flex:0 0 auto;
  font-size:11px; font-weight:700; letter-spacing:.02em; }
.v-pill-gold{ background:rgba(201,162,75,.16); color:var(--vlf-gold-700); }
.v-pill-purple{ background:var(--vlf-purple-100); color:var(--vlf-purple-700); }
.v-tag{ font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px;
  border-radius:5px; background:var(--vlf-sunk); color:var(--vlf-ink-500); }

/* segmented control */
.v-seg{ display:flex; background:var(--vlf-sunk); border-radius:12px; padding:3px; gap:3px; }
.v-seg button{ flex:1; border:none; background:none; font-family:inherit; font-size:13px; font-weight:600;
  color:var(--vlf-ink-500); padding:9px 6px; border-radius:9px; cursor:pointer; transition:.15s; white-space:nowrap; }
.v-seg button.on{ background:#fff; color:var(--vlf-purple-700); box-shadow:0 1px 4px rgba(42,14,51,.12); }

/* division filter — scroll ngang */
.v-chips{ display:flex; gap:8px; overflow-x:auto; padding:2px 16px 4px; margin:0 -16px; scrollbar-width:none; }
.v-chips::-webkit-scrollbar{ display:none; }
.v-chip{ flex:0 0 auto; border:1px solid var(--vlf-line); background:#fff; border-radius:999px; padding:8px 14px;
  font-size:12.5px; font-weight:600; color:var(--vlf-ink-700); cursor:pointer; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.v-chip .dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.v-chip.on{ background:var(--vlf-purple-700); color:#fff; border-color:var(--vlf-purple-700); }
.v-chip.on .dot{ box-shadow:0 0 0 2px rgba(255,255,255,.4); }

/* country dot + code */
.v-cc{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--vlf-ink-500); letter-spacing:.03em; }
.v-cc i{ width:7px; height:7px; border-radius:50%; background:var(--vlf-purple-300); display:block; }

/* avatar initials */
.v-ava{ width:42px; height:42px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-weight:700; font-size:16px; color:#fff;
  background:linear-gradient(150deg,var(--vlf-purple-500),var(--vlf-purple-800)); }

/* ============================================================
   HEADER HERO (home)
   ============================================================ */
.v-hero{ position:relative; border-radius:0 0 28px 28px; overflow:hidden; padding:8px 18px 26px;
  background:
    radial-gradient(130% 90% at 88% -12%, rgba(201,162,75,.22), transparent 56%),
    linear-gradient(162deg,#522367 0%, #31153D 62%, #1F0D26 100%); color:#fff;
  animation:vRise .55s cubic-bezier(.22,1,.36,1) both; }
.v-hero::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(118deg,rgba(255,255,255,.028) 0 1px,transparent 1px 30px); }
.v-hero-top{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; margin-bottom:18px; }
.v-hero-greet{ font-size:12.5px; color:rgba(255,255,255,.72); }
.v-hero-greet b{ color:#fff; font-weight:700; }
.v-hero-badge{ width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; color:var(--vlf-gold-300); }
.v-hero h1{ position:relative; z-index:1; margin:2px 0 0; font-family:var(--font-display); font-weight:800;
  font-size:30px; line-height:1.08; letter-spacing:-.6px; max-width:12ch; }
.v-hero-rule{ position:relative; z-index:1; width:34px; height:2px; border-radius:2px; margin:13px 0 12px;
  background:linear-gradient(90deg, var(--vlf-gold-500), rgba(201,162,75,0)); }
.v-hero h1 em{ font-style:italic; color:var(--vlf-gold-300); }
.v-hero .v-hero-sub{ position:relative; z-index:1; margin-top:0; font-size:12.5px; color:rgba(255,255,255,.74); display:flex; align-items:center; gap:7px; flex-wrap:wrap; letter-spacing:.01em; }
.v-hero button.v-hero-loc{ border:none; background:rgba(255,255,255,.08); cursor:pointer; text-align:left;
  padding:6px 8px 6px 10px; margin-left:-10px; border-radius:10px; flex-wrap:nowrap; transition:background .14s ease; }
.v-hero button.v-hero-loc:active{ background:rgba(255,255,255,.16); }
.v-hero button.v-hero-loc > svg:first-child{ color:var(--vlf-gold-300); flex:0 0 auto; }
.v-hero-loc-chev{ margin-left:2px; opacity:.6; flex:0 0 auto; }

/* countdown */
.v-count{ position:relative; z-index:1; margin-top:18px; display:flex; gap:8px; }
.v-count .u{ flex:1; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); border-radius:13px;
  padding:11px 6px; text-align:center; }
.v-count .u b{ font-family:var(--font-display); font-weight:700; font-size:26px; line-height:1; display:block; }
.v-count .u > span{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.66); margin-top:5px; display:block; }

/* live ticker badge */
.v-live{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; }
.v-live i{ width:8px; height:8px; border-radius:50%; background:#ff5a5a; box-shadow:0 0 0 0 rgba(255,90,90,.7); animation:vPulse 1.6s infinite; }
@keyframes vPulse{ 0%{box-shadow:0 0 0 0 rgba(255,90,90,.6);} 70%{box-shadow:0 0 0 7px rgba(255,90,90,0);} 100%{box-shadow:0 0 0 0 rgba(255,90,90,0);} }

/* ============================================================
   STAT STRIP (5 con số)
   ============================================================ */
.v-stats{ display:flex; gap:9px; overflow-x:auto; padding:0 16px; margin:0 -16px; scrollbar-width:none; }
.v-stats::-webkit-scrollbar{ display:none; }
.v-stat{ flex:0 0 132px; background:#fff; border:1px solid var(--vlf-line); border-radius:15px; padding:13px 13px 12px; box-shadow:var(--shadow-sm); }
.v-stat b{ font-family:var(--font-display); font-weight:700; font-size:27px; line-height:1; color:var(--vlf-purple-700); }
.v-stat .k{ font-size:11.5px; font-weight:700; color:var(--vlf-ink-900); margin-top:7px; line-height:1.2; }
.v-stat .s{ font-size:10px; color:var(--vlf-ink-500); margin-top:3px; line-height:1.3; }

/* ============================================================
   QUICK ACTIONS (lối tắt)
   ============================================================ */
.v-qa{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.v-qa .it{ display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; }
.v-qa .ic{ width:56px; height:56px; border-radius:17px; background:var(--vlf-purple-50); border:1px solid var(--vlf-purple-100);
  display:flex; align-items:center; justify-content:center; color:var(--vlf-purple-700); }
.v-qa .nm{ font-size:11px; font-weight:600; color:var(--vlf-ink-700); text-align:center; line-height:1.2; }

/* generic list row */
.v-row{ display:flex; align-items:center; gap:13px; padding:13px 14px; cursor:pointer; }
.v-row + .v-row{ border-top:1px solid var(--vlf-line); }
.v-row .t{ font-size:14.5px; font-weight:600; letter-spacing:-.1px; }
.v-row .s{ font-size:12px; color:var(--vlf-ink-500); margin-top:2px; line-height:1.35; }
.v-row .chev{ color:var(--vlf-ink-500); flex:0 0 auto; }

/* card with feature image placeholder (news/experience) */
.v-feat{ position:relative; border-radius:18px; overflow:hidden; height:150px; box-shadow:var(--shadow-md);
  background:linear-gradient(150deg,#6B3486,#31153D); }
.v-feat::before{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(125deg,rgba(255,255,255,.05) 0 2px,transparent 2px 22px); }
.v-feat .ov{ position:absolute; inset:0; background:linear-gradient(to top,rgba(22,9,28,.85),transparent 65%); }
.v-feat .tx{ position:absolute; left:16px; right:16px; bottom:14px; color:#fff; }
.v-feat .tx h4{ margin:0; font-family:var(--font-serif); font-size:19px; font-weight:700; line-height:1.15; }
.v-feat .tx p{ margin:4px 0 0; font-size:12px; opacity:.82; }

/* ---------- news: meta · list rows · read-next ---------- */
.v-chip-n{ margin-left:2px; font-size:10.5px; font-weight:700; opacity:.55; font-variant-numeric:tabular-nums; }
.v-chip.on .v-chip-n{ opacity:.8; }
.v-meta{ display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--vlf-ink-500); flex-wrap:wrap; }
.v-meta .d{ opacity:.5; }
.v-nrow{ display:flex; align-items:center; gap:12px; padding:13px 14px; cursor:pointer; transition:background .16s ease; }
.v-nrow + .v-nrow{ border-top:1px solid var(--vlf-line); }
.v-nrow:active{ background:var(--vlf-purple-50); }
.v-nthumb{ width:54px; height:54px; border-radius:14px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(150deg, color-mix(in oklab, var(--acc) 85%, #fff), color-mix(in oklab, var(--acc) 58%, #1B0822)); box-shadow:var(--shadow-sm); }
.v-nrow .v-ntag{ font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.v-nrow .chev{ color:var(--vlf-ink-500); flex:0 0 auto; }
.v-nrow .v-meta{ flex-wrap:nowrap; white-space:nowrap; }
.v-readnext{ background:#fff; border:1px solid var(--vlf-line); border-radius:16px; overflow:hidden; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:transform .14s var(--water); }
.v-readnext:active{ transform:scale(.99); }
.v-readnext .rn-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px;
  font-size:11.5px; font-weight:600; color:var(--vlf-ink-500); }
.v-readnext .rn-foot .v-num{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v-readnext .rn-foot .go{ display:flex; align-items:center; gap:5px; flex:0 0 auto; color:var(--vlf-purple-700); font-weight:700; }

/* ============================================================
   PERSONA PICKER (Bạn là ai?) — onboarding
   ============================================================ */
.v-onboard{ position:absolute; inset:0; display:flex; flex-direction:column; color:#fff; overflow:hidden;
  background:radial-gradient(120% 70% at 80% -5%, rgba(201,162,75,.28), transparent 55%),
    linear-gradient(165deg,#522367,#1F0D26 70%); }
.v-onboard::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(118deg,rgba(255,255,255,.035) 0 1px,transparent 1px 28px); }
.v-onboard .inner{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column;
  padding:calc(var(--zalo-safe-top) + 20px) 24px calc(var(--zalo-safe-bottom) + 24px); overflow-y:auto;
  animation:vRise .5s cubic-bezier(.22,1,.36,1) both; }
.v-onboard .crest{ width:62px; height:62px; border-radius:16px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; color:var(--vlf-gold-300); margin-bottom:22px; }
.v-onboard .kk{ font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--vlf-gold-300); }
.v-onboard h1{ font-family:var(--font-display); font-weight:800; font-size:32px; line-height:1.05; letter-spacing:-.5px; margin:10px 0 8px; }
.v-onboard h1 em{ font-style:italic; color:var(--vlf-gold-300); }
.v-onboard .lede{ font-size:14px; line-height:1.5; color:rgba(255,255,255,.76); margin:0 0 26px; max-width:34ch; }
.v-persona{ display:flex; flex-direction:column; gap:11px; }
.v-pcard{ display:flex; align-items:center; gap:14px; padding:16px; border-radius:18px; cursor:pointer;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); transition:.16s; }
.v-pcard:active{ transform:scale(.99); }
.v-pcard.on{ background:rgba(255,255,255,.96); border-color:#fff; color:var(--vlf-ink-900); }
.v-pcard .pic{ width:48px; height:48px; border-radius:14px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:rgba(201,162,75,.18); color:var(--vlf-gold-300); }
.v-pcard.on .pic{ background:var(--vlf-purple-700); color:var(--vlf-gold-300); }
.v-pcard .pt{ font-family:var(--font-serif); font-size:18px; font-weight:700; }
.v-pcard .ps{ font-size:12px; opacity:.74; margin-top:2px; }
.v-pcard.on .ps{ opacity:.6; }
.v-onboard .foot{ margin-top:auto; padding-top:22px; }

/* scan QR */
.v-scan-box{ aspect-ratio:1; max-width:230px; margin:8px auto 0; border-radius:24px; position:relative;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; }
.v-scan-corner{ position:absolute; width:34px; height:34px; border:3px solid var(--vlf-gold-300); }
.v-scan-line{ position:absolute; left:18px; right:18px; height:2px; background:var(--vlf-gold-300); box-shadow:0 0 12px var(--vlf-gold-300); animation:vScan 2.4s ease-in-out infinite; }
@keyframes vScan{ 0%,100%{top:24px;} 50%{top:calc(100% - 24px);} }

/* ============================================================
   LEADERBOARD
   ============================================================ */
.v-lb-head{ display:grid; grid-template-columns:34px 1fr 56px 52px; gap:8px; padding:8px 14px;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--vlf-ink-500); }
.v-lb-row{ display:grid; grid-template-columns:34px 1fr 56px 52px; gap:8px; align-items:center; padding:12px 14px; cursor:pointer; }
.v-lb-row + .v-lb-row{ border-top:1px solid var(--vlf-line); }
.v-lb-row.lead{ background:linear-gradient(90deg,rgba(201,162,75,.12),transparent 70%); }
.v-lb-pos{ font-family:var(--font-serif); font-weight:700; font-size:17px; color:var(--vlf-ink-900); text-align:center; }
.v-lb-row.lead .v-lb-pos{ color:var(--vlf-gold-700); }
.v-lb-name{ min-width:0; }
.v-lb-name .nm{ font-size:14px; font-weight:600; letter-spacing:-.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-lb-col{ text-align:right; font-weight:700; font-size:15px; }
.v-lb-sub{ text-align:right; font-size:13px; font-weight:600; color:var(--vlf-ink-500); }
.v-score-under{ color:var(--vlf-under); }
.v-score-over{ color:var(--vlf-over); }
.v-score-even{ color:var(--vlf-even); }
.v-lb-foot{ padding:11px 14px; font-size:11.5px; color:var(--vlf-ink-500); text-align:center; }

/* ============================================================
   TEE TIME
   ============================================================ */
.v-tee-day{ display:flex; gap:8px; overflow-x:auto; padding:2px 16px 4px; margin:0 -16px; scrollbar-width:none; }
.v-tee-day::-webkit-scrollbar{ display:none; }
.v-dchip{ flex:0 0 auto; min-width:62px; border:1px solid var(--vlf-line); background:#fff; border-radius:14px; padding:9px 12px;
  text-align:center; cursor:pointer; }
.v-dchip.on, .v-dchip-on{ background:var(--vlf-purple-700); color:#fff; border-color:var(--vlf-purple-700); }
.v-dchip .dw{ font-size:11px; font-weight:700; }
.v-dchip .dd{ font-family:var(--font-serif); font-size:16px; font-weight:700; margin-top:1px; }
.v-tee-grp{ padding:13px 14px; }
.v-tee-grp + .v-tee-grp{ border-top:1px solid var(--vlf-line); }
.v-tee-grp .top{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.v-tee-time{ font-family:var(--font-serif); font-weight:700; font-size:19px; color:var(--vlf-purple-700); }
.v-tee-hole{ font-size:11px; font-weight:700; color:var(--vlf-ink-500); background:var(--vlf-sunk); padding:3px 8px; border-radius:7px; white-space:nowrap; }
.v-tee-hole-btn{ display:inline-flex; align-items:center; gap:4px; border:1px solid var(--vlf-line); cursor:pointer; transition:background .14s ease, color .14s ease; }
.v-tee-hole-btn > svg{ color:var(--vlf-purple-500); }
.v-tee-hole-btn:active{ background:var(--vlf-purple-50); color:var(--vlf-purple-700); }
.v-tee-g{ display:flex; align-items:center; gap:9px; padding:5px 0; }
.v-tee-g .nm{ font-size:13.5px; font-weight:500; }

/* ============================================================
   PLAYERS
   ============================================================ */
.v-search{ display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--vlf-line); border-radius:13px;
  padding:11px 14px; color:var(--vlf-ink-500); font-size:14px; }
.v-prow{ display:flex; align-items:center; gap:13px; padding:12px 14px; cursor:pointer; }
.v-prow + .v-prow{ border-top:1px solid var(--vlf-line); }
.v-prow .nm{ font-size:14.5px; font-weight:600; letter-spacing:-.1px; }
.v-prow .meta{ display:flex; align-items:center; gap:8px; margin-top:3px; }
.v-star{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--vlf-ink-500); background:var(--vlf-sunk); }
.v-star.on{ color:var(--vlf-gold-600); background:rgba(201,162,75,.16); }

/* golfer detail */
.v-gd-hero{ background:linear-gradient(160deg,#522367,#1F0D26); color:#fff; padding:24px 18px 22px; border-radius:0 0 24px 24px; }
.v-gd-hero .v-ava{ width:64px; height:64px; border-radius:18px; font-size:24px; background:rgba(255,255,255,.12); }
.v-gd-hero h2{ font-family:var(--font-serif); font-size:26px; font-weight:800; margin:14px 0 4px; }
.v-gd-stat{ display:flex; gap:10px; margin-top:16px; }
.v-gd-stat .b{ flex:1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:13px; padding:11px; text-align:center; }
.v-gd-stat .b b{ font-family:var(--font-serif); font-size:22px; font-weight:700; display:block; }
.v-gd-stat .b span{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.66); }

/* ============================================================
   VÉ — QR / Wallet / mua / combo
   ============================================================ */
.v-qr-card{ background:#fff; border-radius:20px; box-shadow:var(--shadow-md); overflow:hidden; }
.v-qr-head{ background:linear-gradient(150deg,#522367,#31153D); color:#fff; padding:16px 18px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.v-qr-head .t{ line-height:1.2; }
.v-qr-head .t{ font-family:var(--font-serif); font-size:18px; font-weight:700; }
.v-qr-head .s{ font-size:12px; opacity:.8; margin-top:2px; }
.v-qr-body{ padding:22px 18px; text-align:center; }
.v-qr-img{ width:188px; height:188px; margin:0 auto; }
.v-qr-perf{ border-top:2px dashed var(--vlf-line); position:relative; margin:4px 0; }
.v-qr-perf::before,.v-qr-perf::after{ content:""; position:absolute; top:-9px; width:18px; height:18px; border-radius:50%; background:var(--vlf-bg); }
.v-qr-perf::before{ left:-9px; } .v-qr-perf::after{ right:-9px; }
.v-qr-meta{ display:flex; justify-content:space-between; padding:14px 18px; }
.v-qr-meta .l{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--vlf-ink-500); }
.v-qr-meta .vv{ font-size:14px; font-weight:700; margin-top:2px; }
.v-wallet{ display:flex; gap:10px; margin-top:14px; }
.v-wallet button{ flex:1; height:46px; border-radius:12px; border:1px solid var(--vlf-ink-900); background:var(--vlf-ink-900); color:#fff;
  font-family:inherit; font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; }

.v-tk{ overflow:hidden; }
.v-tk-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:15px 16px 12px; }
.v-tk-name{ font-family:var(--font-serif); font-size:17px; font-weight:700; line-height:1.25; }
.v-tk-zone{ font-size:12px; color:var(--vlf-ink-500); margin-top:4px; line-height:1.4; }
.v-tk-price{ text-align:right; flex:0 0 auto; min-width:96px; }
.v-tk-price b{ font-family:var(--font-serif); font-size:19px; font-weight:800; color:var(--vlf-purple-700); display:block; white-space:nowrap; }
.v-tk-price s{ font-size:11px; color:var(--vlf-ink-500); }
.v-tk-perks{ padding:0 16px 14px; }
.v-perk{ display:flex; gap:9px; font-size:12.5px; color:var(--vlf-ink-700); padding:4px 0; line-height:1.4; }
.v-perk svg{ color:var(--vlf-gold-600); flex:0 0 auto; margin-top:1px; }
.v-tk-foot{ border-top:1px solid var(--vlf-line); display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }

/* ----- promo / includes / highlight (vé thi đấu + combo) ----- */
.v-promo-row{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 16px 14px; }
.v-promo-chip{ font-size:11px; font-weight:600; padding:4px 9px; border-radius:999px; border:1px dashed var(--vlf-line); color:var(--vlf-ink-500); }
.v-promo-chip.on{ border-style:solid; border-color:var(--vlf-under); color:var(--vlf-under); background:rgba(192,57,43,.07); }
.v-promo-tag{ display:inline-block; margin-left:7px; font-size:10.5px; font-weight:700; color:var(--vlf-under); background:rgba(192,57,43,.1); padding:1px 7px; border-radius:999px; vertical-align:middle; }
.v-tk-highlight{ display:flex; gap:9px; align-items:flex-start; margin:2px 16px 14px; padding:11px 13px; border-radius:13px; line-height:1.4;
  background:linear-gradient(120deg, rgba(201,162,75,.16), rgba(82,35,103,.14)); color:var(--vlf-purple-800); font-size:12.5px; font-weight:600; }
.v-tk-highlight svg{ color:var(--vlf-gold-600); flex:0 0 auto; margin-top:1px; }
.v-tk-save{ margin:2px 16px 14px; font-size:12px; font-weight:700; color:#2E6E60; }

/* ----- gói tập golf (training) ----- */
.v-train-venues{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.v-train-venues::-webkit-scrollbar{ display:none; }
.v-venue{ flex:0 0 auto; text-align:left; border:1.5px solid var(--vlf-line); background:#fff; border-radius:13px; padding:9px 13px; cursor:pointer; min-width:140px; }
.v-venue b{ display:block; font-size:13px; font-weight:700; color:var(--vlf-ink-900); }
.v-venue span{ display:block; font-size:11px; color:var(--vlf-ink-500); margin-top:2px; }
.v-venue.on{ border-color:var(--vlf-purple-600); background:var(--vlf-purple-50); }
.v-pkg .v-radio{ width:22px; height:22px; flex:0 0 auto; border-radius:50%; border:2px solid var(--vlf-line); display:flex; align-items:center; justify-content:center; color:#fff; }
.v-pkg .v-radio.on{ background:var(--vlf-purple-600); border-color:var(--vlf-purple-600); }

/* ----- chính sách ra vào ----- */
.v-access-row{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.45; color:var(--vlf-ink-700); padding:5px 0; }
.v-access-row svg{ color:var(--vlf-gold-600); flex:0 0 auto; margin-top:2px; }

/* HCO activate */
.v-code{ display:flex; gap:9px; justify-content:center; margin:20px 0; }
.v-code input{ width:46px; height:56px; border:2px solid var(--vlf-line); border-radius:13px; background:#fff;
  text-align:center; font-family:var(--font-serif); font-size:26px; font-weight:700; color:var(--vlf-purple-700); text-transform:uppercase; }
.v-code input:focus{ border-color:var(--vlf-purple-600); outline:none; }
.v-field{ margin-bottom:14px; }
.v-field label{ font-size:12px; font-weight:600; color:var(--vlf-ink-500); display:block; margin-bottom:6px; }
.v-field input{ width:100%; height:50px; border:1px solid var(--vlf-line); border-radius:13px; background:#fff; padding:0 14px;
  font-family:inherit; font-size:15px; color:var(--vlf-ink-900); }
.v-field input:focus{ border-color:var(--vlf-purple-600); outline:none; }
.v-hint{ font-size:12px; color:var(--vlf-ink-500); line-height:1.5; background:var(--vlf-purple-50); border-radius:12px; padding:11px 13px; }
.v-success-ic{ width:84px; height:84px; border-radius:50%; margin:18px auto 0; background:rgba(62,142,126,.14);
  display:flex; align-items:center; justify-content:center; color:#3E8E7E; }
/* activation code feedback */
@keyframes vShake{ 0%,100%{ transform:translateX(0); } 18%,54%{ transform:translateX(-7px); } 36%,72%{ transform:translateX(7px); } }
.v-code.shake{ animation:vShake .46s cubic-bezier(.36,.07,.19,.97); }
.v-code.err input{ border-color:var(--vlf-under); color:var(--vlf-under); }
.v-code-msg{ text-align:center; font-size:12.5px; font-weight:600; margin-top:4px; }
.v-code-msg.bad{ color:var(--vlf-under); }

/* ============================================================
   SCHEDULE — timeline 7 ngày
   ============================================================ */
.v-leg{ display:flex; gap:14px; padding:0 2px 4px; flex-wrap:wrap; }
.v-leg .it{ display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--vlf-ink-700); }
.v-leg .it i{ width:10px; height:10px; border-radius:3px; }
.v-day{ display:flex; gap:14px; padding:14px 0; }
.v-day + .v-day{ border-top:1px solid var(--vlf-line); }
.v-day .when{ flex:0 0 52px; text-align:center; }
.v-day .when .dd{ font-family:var(--font-serif); font-size:20px; font-weight:700; color:var(--vlf-purple-700); }
.v-day .when .dw{ font-size:11px; font-weight:700; color:var(--vlf-ink-500); }
.v-day .body{ flex:1; min-width:0; }
.v-day .theme{ font-size:14px; font-weight:700; margin-bottom:8px; }
.v-evt{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--vlf-ink-700); padding:3px 0; }
.v-evt i{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }

/* ============================================================
   MESSAGES — inbox + detail
   ============================================================ */
.v-msg{ display:flex; gap:13px; padding:14px; cursor:pointer; }
.v-msg + .v-msg{ border-top:1px solid var(--vlf-line); }
.v-msg .ic{ width:42px; height:42px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; }
.v-msg .row1{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.v-msg .ti{ font-size:13.5px; font-weight:700; letter-spacing:-.1px; line-height:1.3; }
.v-msg .bd{ font-size:12.5px; color:var(--vlf-ink-500); margin-top:3px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.v-msg .ch{ display:flex; gap:5px; margin-top:7px; }
.v-chn{ font-size:9.5px; font-weight:700; letter-spacing:.02em; padding:2px 7px; border-radius:6px; background:var(--vlf-sunk); color:var(--vlf-ink-700); }
.v-msg-detail{ padding:16px; }
.v-msg-detail .ti{ font-family:var(--font-serif); font-size:21px; font-weight:700; line-height:1.2; }
.v-msg-detail .when{ font-size:12px; color:var(--vlf-ink-500); margin:8px 0 16px; }
.v-msg-detail .bd{ font-size:15px; line-height:1.6; color:var(--vlf-ink-700); }
.v-urgent{ background:rgba(192,57,43,.08); border:1px solid rgba(192,57,43,.25); }
.v-urgent .ti{ color:var(--vlf-under); }

/* ============================================================
   MAP — Leaflet trên ảnh vệ tinh thật (Montgomerie Links)
   ============================================================ */
.v-map{ position:absolute; inset:0; overflow:hidden; background:#0c2018; }
.vm-leaf{ position:absolute; inset:0; z-index:1; background:#0c2018; }
.vm-leaf.leaflet-container{ font-family:var(--font-sans); }
.vm-leaf .leaflet-control-attribution{ font-size:9px; background:rgba(20,8,26,.55); color:rgba(255,255,255,.7); padding:1px 6px; border-radius:8px 0 0 0; }
.vm-leaf .leaflet-control-attribution a{ color:rgba(255,255,255,.85); }

/* markers — điểm sự kiện */
.vm-mk-wrap,.vm-hole-wrap,.vm-me-wrap{ background:none!important; border:none!important; }
.vm-mk{ width:100%; height:100%; border-radius:50%; background:var(--c); border:2.5px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,.5); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:transform .14s ease, box-shadow .14s ease; }
.vm-mk svg{ width:60%; height:60%; }
.vm-mk.lg{ border-width:3px; box-shadow:0 5px 16px rgba(0,0,0,.55); }
.vm-mk.lg svg{ width:56%; height:56%; }
.vm-mk.on{ transform:scale(1.12); box-shadow:0 0 0 4px rgba(255,255,255,.55),0 5px 16px rgba(0,0,0,.55); }

/* hố / tee */
.vm-hole{ width:100%; height:100%; border-radius:50%; background:var(--c); border:2px solid rgba(255,255,255,.92);
  color:#fff; font-family:var(--font-mono); font-weight:700; font-size:11.5px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.55); transition:transform .14s ease, opacity .14s ease; }
.vm-hole.hl{ border-color:var(--vlf-gold-500); box-shadow:0 0 0 3px rgba(201,162,75,.55),0 2px 7px rgba(0,0,0,.55); }
.vm-hole.dim{ opacity:.34; }
.vm-hole.on{ transform:scale(1.2); box-shadow:0 0 0 4px rgba(255,255,255,.55),0 2px 8px rgba(0,0,0,.6); }

/* vị trí của khách */
.vm-me{ position:relative; width:22px; height:22px; }
.vm-me .dot{ position:absolute; inset:6px; border-radius:50%; background:#2E78F0; border:2.5px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.5); }
.vm-me .ring{ position:absolute; inset:0; border-radius:50%; background:rgba(46,120,240,.35); animation:vmPulse 2s ease-out infinite; }
@keyframes vmPulse{ 0%{ transform:scale(.5); opacity:.85; } 100%{ transform:scale(2.1); opacity:0; } }

/* top bar */
.vm-back{ position:absolute; top:calc(var(--zalo-status-h) + 8px); left:12px; width:38px; height:38px; border-radius:12px; border:none;
  background:rgba(255,255,255,.96); color:var(--vlf-purple-800); display:flex; align-items:center; justify-content:center; z-index:30; box-shadow:0 4px 14px rgba(0,0,0,.34); cursor:pointer; }
.vm-title{ position:absolute; top:calc(var(--zalo-status-h) + 8px); left:58px; max-width:185px; height:38px; padding:0 13px;
  background:rgba(255,255,255,.96); border-radius:12px; z-index:30; box-shadow:0 4px 14px rgba(0,0,0,.34); display:flex; flex-direction:column; justify-content:center; }
.vm-title .nm{ font-family:var(--font-serif); font-weight:700; font-size:13.5px; line-height:1.1; color:var(--vlf-purple-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vm-title .sub{ font-size:9.5px; color:var(--vlf-ink-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }

/* chips lọc lớp */
.vm-chips{ position:absolute; top:calc(var(--zalo-status-h) + 54px); left:0; right:0; z-index:28;
  display:flex; gap:7px; padding:0 12px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.vm-chips::-webkit-scrollbar{ display:none; }
.vm-chip{ flex:0 0 auto; display:flex; align-items:center; gap:5px; height:32px; padding:0 12px 0 10px; border-radius:999px;
  border:1.5px solid rgba(255,255,255,.45); background:rgba(20,8,26,.5); backdrop-filter:blur(6px); color:#fff;
  font-size:12px; font-weight:600; cursor:pointer; transition:all .14s ease; }
.vm-chip .dot{ width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:0 0 0 1.5px rgba(255,255,255,.35); }
.vm-chip svg{ opacity:.85; }
.vm-chip.on{ background:#fff; color:var(--vlf-purple-900); border-color:#fff; }
.vm-chip:not(.on){ opacity:.78; }

/* điều khiển phải */
.vm-ctrls{ position:absolute; right:12px; top:calc(var(--zalo-status-h) + 100px); z-index:28; display:flex; flex-direction:column; gap:9px; align-items:flex-end; }
.vm-ctrl,.vm-zoom button{ width:40px; height:40px; border:none; background:rgba(255,255,255,.96); color:var(--vlf-purple-800);
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.3); }
.vm-ctrl{ border-radius:12px; }
.vm-ctrl.busy svg{ animation:vmSpin 1s linear infinite; }
@keyframes vmSpin{ to{ transform:rotate(360deg); } }
.vm-zoom{ border-radius:12px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.3); display:flex; flex-direction:column; }
.vm-zoom button{ box-shadow:none; border-radius:0; }
.vm-zoom span{ height:1px; background:var(--vlf-line); }

/* banner đang lọc bảng */
.vm-filterbar{ position:absolute; top:calc(var(--zalo-status-h) + 100px); left:50%; transform:translateX(-50%); z-index:27;
  display:flex; align-items:center; gap:8px; height:34px; padding:0 8px 0 12px; border-radius:999px;
  background:rgba(20,8,26,.82); backdrop-filter:blur(6px); color:#fff; font-size:12px; box-shadow:0 4px 14px rgba(0,0,0,.4); white-space:nowrap; }
.vm-filterbar .dot{ width:10px; height:10px; border-radius:50%; background:var(--c); }
.vm-filterbar b{ font-weight:700; }
.vm-filterbar button{ border:none; background:rgba(255,255,255,.16); color:#fff; height:24px; padding:0 10px; border-radius:999px; font-size:11px; font-weight:600; cursor:pointer; }

/* vị trí nội bộ (pill) */
.vm-meloc{ position:absolute; left:12px; bottom:calc(var(--zalo-safe-bottom) + 14px); z-index:26; white-space:nowrap;
  display:flex; align-items:center; gap:7px; height:34px; padding:0 13px; border-radius:999px;
  background:rgba(20,8,26,.78); backdrop-filter:blur(6px); color:#fff; font-size:12px; font-weight:600; box-shadow:0 4px 14px rgba(0,0,0,.4); }
.vm-meloc .d{ width:9px; height:9px; border-radius:50%; background:#2E78F0; box-shadow:0 0 0 3px rgba(46,120,240,.3); }
.vm-meloc em{ font-style:normal; font-weight:500; font-size:10px; opacity:.6; margin-left:3px; padding-left:7px; border-left:1px solid rgba(255,255,255,.22); }

/* FAB tìm nhóm */
.vm-find-fab{ position:absolute; right:12px; bottom:calc(var(--zalo-safe-bottom) + 14px); z-index:26;
  display:flex; align-items:center; gap:7px; height:44px; padding:0 17px; border-radius:999px; border:none; cursor:pointer;
  background:var(--vlf-gold-500); color:var(--vlf-purple-900); font-family:var(--font-display,var(--font-serif)); font-weight:700; font-size:13.5px;
  box-shadow:0 6px 18px rgba(201,162,75,.4); }

/* card chi tiết */
.v-map-card{ position:absolute; left:12px; right:12px; bottom:calc(var(--zalo-safe-bottom) + 14px);
  background:#fff; border-radius:20px; box-shadow:0 16px 46px rgba(0,0,0,.45); padding:16px; z-index:40; }
.vm-card{ animation:vmCardIn .22s cubic-bezier(.2,.8,.3,1); }
@keyframes vmCardIn{ from{ transform:translateY(12px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.v-map-card .t{ font-family:var(--font-serif); font-size:18px; font-weight:700; line-height:1.15; }
.v-map-card .s{ font-size:12.5px; color:var(--vlf-ink-500); margin-top:9px; line-height:1.45; }
.vm-card-x{ position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:50%; border:none; background:var(--vlf-purple-50); color:var(--vlf-purple-700); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.vm-card-ic{ width:46px; height:46px; border-radius:13px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--c) 14%, #fff); color:var(--c); }
.vm-card-tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin-bottom:2px; }
.vm-card-acts{ display:flex; gap:9px; margin-top:13px; }
.vm-card-2nd{ width:46px; height:46px; flex:0 0 auto; border-radius:13px; border:1.5px solid var(--vlf-line); background:#fff; color:var(--vlf-purple-700); display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* tee-time liên quan trong card hố */
.vm-tee-list{ margin-top:13px; border-top:1px solid var(--vlf-line); padding-top:11px; }
.vm-tee-list-h{ display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--vlf-ink-500); margin-bottom:7px; }
.vm-tee-row{ display:flex; align-items:center; gap:10px; width:100%; height:40px; padding:0 6px 0 2px; border:none; background:none; cursor:pointer; border-radius:9px; text-align:left; }
.vm-tee-row:active{ background:var(--vlf-purple-50); }
.vm-tee-row .tm{ font-size:15px; font-weight:800; color:var(--vlf-purple-800); flex:0 0 auto; min-width:48px; }
.vm-tee-row .dy{ font-size:12px; color:var(--vlf-ink-500); flex:1; }
.vm-tee-row .dv{ font-size:11.5px; font-weight:700; flex:0 0 auto; }
.vm-tee-row > svg{ color:var(--vlf-ink-400,#9a93a0); flex:0 0 auto; }
.vm-tee-allbtn{ width:100%; margin-top:3px; padding:8px; border:none; background:var(--vlf-purple-50); color:var(--vlf-purple-700); border-radius:10px; font-size:12px; font-weight:600; cursor:pointer; }
.vm-tee-empty{ margin-top:12px; border-top:1px solid var(--vlf-line); padding-top:11px; font-size:12px; color:var(--vlf-ink-500); line-height:1.45; }

/* sheet tìm nhóm */
.vm-scrim{ position:absolute; inset:0; z-index:55; background:rgba(12,4,16,.5); animation:vmFade .2s ease; }
@keyframes vmFade{ from{ opacity:0; } to{ opacity:1; } }
.vm-sheet{ position:absolute; left:0; right:0; bottom:0; z-index:60; background:#fff; border-radius:22px 22px 0 0;
  padding:8px 16px calc(var(--zalo-safe-bottom) + 16px); box-shadow:0 -12px 44px rgba(0,0,0,.4); max-height:74%; overflow-y:auto;
  animation:vmSheetIn .26s cubic-bezier(.2,.8,.3,1); }
@keyframes vmSheetIn{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.vm-sheet-grab{ width:40px; height:4px; border-radius:99px; background:var(--vlf-line); margin:4px auto 12px; }
.vm-sheet-h{ display:flex; align-items:flex-start; gap:10px; }
.vm-sheet-h .tt{ font-family:var(--font-serif); font-size:18px; font-weight:700; }
.vm-sheet-h .ss{ font-size:12px; color:var(--vlf-ink-500); line-height:1.4; margin-top:3px; }
.vm-sheet-x{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:none; background:var(--vlf-purple-50); color:var(--vlf-purple-700); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.vm-bibrow{ display:flex; gap:8px; margin:14px 0 6px; }
.vm-bibrow input{ flex:1; height:46px; border:1.5px solid var(--vlf-line); border-radius:13px; padding:0 14px; font-size:14px; font-family:var(--font-sans); background:var(--vlf-purple-50); }
.vm-bibrow input:focus{ outline:none; border-color:var(--vlf-purple-500); background:#fff; }
.vm-bibrow button{ width:52px; flex:0 0 auto; border:none; border-radius:13px; background:var(--vlf-purple-700); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.vm-divlist{ margin-top:6px; }
.vm-divrow{ display:flex; align-items:center; gap:12px; width:100%; padding:12px 4px; border:none; background:none; border-top:1px solid var(--vlf-line); cursor:pointer; text-align:left; }
.vm-divrow:first-child{ border-top:none; }
.vm-divrow .cdot{ width:14px; height:14px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 0%, #0000); }
.vm-divrow .tx{ flex:1; min-width:0; }
.vm-divrow .tx b{ display:block; font-size:14.5px; font-weight:700; color:var(--vlf-ink-900); }
.vm-divrow .tx span{ display:block; font-size:11.5px; color:var(--vlf-ink-500); margin-top:2px; }
.vm-divrow > svg{ color:var(--vlf-ink-500); flex:0 0 auto; }

/* ============================================================
   ACCOUNT / MY TOUR
   ============================================================ */
.v-me-hero{ background:linear-gradient(160deg,#522367,#1F0D26); color:#fff; padding:22px 18px 20px; }
.v-me-hero .row{ display:flex; align-items:center; gap:14px; }
.v-me-hero h2{ font-family:var(--font-serif); font-size:22px; font-weight:700; margin:0; }
.v-me-hero .sub{ font-size:12.5px; opacity:.78; margin-top:3px; }
.v-me-group{ margin:18px 0; }
.v-me-group .lbl{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--vlf-ink-500); margin:0 2px 9px; }

/* lang switch */
.v-lang{ display:flex; background:var(--vlf-sunk); border-radius:11px; padding:3px; }
.v-lang button{ flex:1; border:none; background:none; font-family:inherit; font-size:13px; font-weight:600; color:var(--vlf-ink-500);
  padding:8px; border-radius:8px; cursor:pointer; }
.v-lang button.on{ background:#fff; color:var(--vlf-purple-700); box-shadow:0 1px 4px rgba(42,14,51,.12); }

/* ----- cài đặt bản demo (trong Tài khoản) ----- */
.v-dfield{ margin-bottom:15px; }
.v-dfield .dlbl{ font-size:11.5px; font-weight:600; color:var(--vlf-ink-500); margin-bottom:7px; }
.v-dseg{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.v-dseg button{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:52px;
  border:1.5px solid var(--vlf-line); background:#fff; border-radius:12px; padding:8px 5px; cursor:pointer; font-family:inherit; transition:.14s; }
.v-dseg button b{ font-size:12px; font-weight:700; color:var(--vlf-ink-900); line-height:1.12; text-align:center; }
.v-dseg button small{ font-size:9.5px; color:var(--vlf-ink-500); line-height:1.1; text-align:center; }
.v-dseg button.on{ border-color:var(--vlf-purple-600); background:var(--vlf-purple-50); }
.v-dseg button.on b{ color:var(--vlf-purple-700); }
.v-dsel-wrap{ position:relative; }
.v-dsel{ width:100%; height:48px; border:1.5px solid var(--vlf-line); border-radius:12px; padding:0 38px 0 14px;
  font-size:14px; font-weight:600; font-family:inherit; background:#fff; color:var(--vlf-ink-900);
  -webkit-appearance:none; appearance:none; cursor:pointer; }
.v-dsel:focus{ outline:none; border-color:var(--vlf-purple-500); }
.v-dsel-chev{ position:absolute; right:13px; top:50%; transform:translateY(-50%) rotate(90deg); color:var(--vlf-ink-500); pointer-events:none; }

/* ============================================================
   APP TABBAR (L1 · footer rule)
   ============================================================ */
.v-tabbar{ position:absolute; left:0; right:0; bottom:0; height:calc(60px + var(--zalo-safe-bottom));
  padding-bottom:var(--zalo-safe-bottom); background:var(--glass); backdrop-filter:blur(18px);
  border-top:1px solid var(--vlf-line); display:flex; z-index:60; }
.v-tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--vlf-ink-500); font-size:10px; font-weight:600; cursor:pointer; }
.v-tab.on{ color:var(--vlf-purple-700); }
.v-tab .ic{ position:relative; }
.v-tab .badge{ position:absolute; top:-3px; right:-6px; min-width:15px; height:15px; border-radius:8px; background:var(--vlf-under);
  color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 3px; }

/* phase banner (mỏng, dưới header) */
.v-phase-note{ display:flex; align-items:center; gap:8px; padding:9px 16px; font-size:11.5px; font-weight:600;
  background:var(--vlf-purple-50); color:var(--vlf-purple-700); border-bottom:1px solid var(--vlf-purple-100); }
.v-phase-note i{ width:7px; height:7px; border-radius:50%; background:var(--vlf-gold-500); flex:0 0 auto; }

/* ============================================================
   EXTRA: live · highlights · prep · vip timeline · rsvp · nps
   ============================================================ */
.v-video{ position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-md);
  background:radial-gradient(120% 120% at 30% 0%, #6B3486, #1F0D26 75%); display:flex; align-items:center; justify-content:center; }
.v-video::before{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(120deg,rgba(255,255,255,.05) 0 2px,transparent 2px 24px); }
.v-video .badge{ position:absolute; top:11px; left:11px; background:rgba(192,57,43,.92); border-radius:8px; padding:4px 9px; z-index:2; }
.v-video .views{ position:absolute; top:13px; right:13px; color:rgba(255,255,255,.85); font-size:11px; font-weight:600; z-index:2; }
.v-video .play{ width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--vlf-purple-800);
  display:flex; align-items:center; justify-content:center; z-index:2; box-shadow:0 6px 22px rgba(0,0,0,.35); }
.v-video .cap{ position:absolute; left:13px; right:13px; bottom:11px; color:#fff; font-size:12px; font-weight:500; z-index:2; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.v-hl-thumb{ position:relative; width:78px; height:52px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  color:#fff; background:linear-gradient(150deg,#6B3486,#1F0D26); }
.v-hl-thumb .dur{ position:absolute; right:4px; bottom:4px; font-size:9px; font-weight:700; background:rgba(0,0,0,.6); color:#fff; padding:1px 5px; border-radius:5px; }

.v-prep-ic{ width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--vlf-sunk); color:var(--vlf-ink-500); }
.v-prep-ic.done{ background:rgba(62,142,126,.14); color:#3E8E7E; }
.v-vip-ic{ width:42px; height:42px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:var(--vlf-purple-50); color:var(--vlf-purple-700); }

/* vip timeline */
.v-tl{ display:flex; gap:12px; padding:2px 0; }
.v-tl-time{ flex:0 0 44px; text-align:right; font-weight:700; font-size:13px; color:var(--vlf-purple-700); padding-top:11px; }
.v-tl-line{ flex:0 0 12px; position:relative; display:flex; justify-content:center; }
.v-tl-line::before{ content:""; position:absolute; top:0; bottom:0; width:2px; background:var(--vlf-line); }
.v-tl:first-child .v-tl-line::before{ top:14px; }
.v-tl:last-child .v-tl-line::before{ bottom:calc(100% - 14px); }
.v-tl-line span{ position:relative; width:11px; height:11px; border-radius:50%; margin-top:11px; border:2px solid #fff; box-shadow:0 0 0 1px var(--vlf-line); }
.v-tl-body{ flex:1; padding:9px 0 13px; }
.v-tl-body .t{ font-size:14px; font-weight:600; }
.v-tl-body .s{ font-size:12px; color:var(--vlf-ink-500); margin-top:2px; }

/* stepper */
.v-step{ display:flex; align-items:center; gap:14px; }
.v-step button{ width:34px; height:34px; border-radius:10px; border:1px solid var(--vlf-line); background:#fff; color:var(--vlf-purple-700); font-size:20px; font-weight:700; cursor:pointer; line-height:1; }
.v-step b{ font-size:18px; min-width:20px; text-align:center; }

/* nps — thang chuẩn NPS: Detractors 0–6 (đỏ) · Passives 7–8 (hổ phách) · Promoters 9–10 (xanh).
   Màu phân nhóm là quy ước biểu đồ NPS (không phải brand) — chỉ dùng trong khảo sát. */
.v-nps2{ margin-top:18px; }
.v-nps2-row{ display:grid; grid-template-columns:repeat(11,1fr); gap:4px; }
.v-nps2-n{ height:44px; border-radius:10px; border:1px solid var(--vlf-line); background:#fff; font-size:14.5px; font-weight:700; color:var(--vlf-ink-700); cursor:pointer; padding:0; transition:transform .08s ease; }
.v-nps2-n:active{ transform:scale(.93); }
.v-nps2-n.seg-det{ border-color:#E6B9B9; color:#B23B3B; background:#FCEFEF; }
.v-nps2-n.seg-pas{ border-color:#EAD39A; color:#9C7620; background:#FBF4E3; }
.v-nps2-n.seg-pro{ border-color:#ACD9BC; color:#237A47; background:#EAF5EE; }
.v-nps2-n.on.seg-det{ background:#CC4A4A; color:#fff; border-color:#CC4A4A; box-shadow:0 4px 12px rgba(204,74,74,.34); }
.v-nps2-n.on.seg-pas{ background:#D79E32; color:#fff; border-color:#D79E32; box-shadow:0 4px 12px rgba(215,158,50,.34); }
.v-nps2-n.on.seg-pro{ background:#2E9E5B; color:#fff; border-color:#2E9E5B; box-shadow:0 4px 12px rgba(46,158,91,.32); }
.v-nps2-track{ display:flex; gap:4px; margin-top:8px; }
.v-nps2-track span{ height:5px; border-radius:3px; }
.v-nps2-track .seg-det{ background:#CC4A4A; }
.v-nps2-track .seg-pas{ background:#D79E32; }
.v-nps2-track .seg-pro{ background:#2E9E5B; }
.v-nps2-bands{ display:flex; gap:4px; margin-top:7px; }
.v-nps2-bands span{ font-size:11px; font-weight:700; display:flex; flex-direction:column; }
.v-nps2-bands .seg-det{ color:#B23B3B; align-items:flex-start; }
.v-nps2-bands .seg-pas{ color:#9C7620; align-items:center; text-align:center; }
.v-nps2-bands .seg-pro{ color:#237A47; align-items:flex-end; }
.v-nps2-tag{ margin-top:14px; display:inline-flex; padding:7px 14px; border-radius:999px; font-size:13px; font-weight:700; }
.v-nps2-tag.seg-det{ background:#FCEFEF; color:#B23B3B; }
.v-nps2-tag.seg-pas{ background:#FBF4E3; color:#9C7620; }
.v-nps2-tag.seg-pro{ background:#EAF5EE; color:#237A47; }

/* ============================================================
   PAYMENT (checkout stepper)
   ============================================================ */
.v-pay-steps{ display:flex; align-items:center; gap:10px; margin:8px 2px 16px; font-size:12px; font-weight:700; }
.v-pay-steps span{ color:var(--vlf-ink-500); letter-spacing:.01em; white-space:nowrap; }
.v-pay-steps span.on{ color:var(--vlf-purple-700); }
.v-pay-steps .div{ flex:1; height:2px; background:var(--vlf-line); border-radius:2px; min-width:18px; }
.v-opt{ display:flex; align-items:center; gap:13px; padding:15px 16px; border:1.5px solid var(--vlf-line); border-radius:15px; background:#fff; cursor:pointer; transition:.16s; }
.v-opt + .v-opt{ margin-top:11px; }
.v-opt.on{ border-color:var(--vlf-purple-600); background:var(--vlf-purple-50); }
.v-opt .ic{ width:44px; height:44px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--vlf-purple-50); color:var(--vlf-purple-700); }
.v-opt.on .ic{ background:#fff; }
.v-opt .t{ font-size:14.5px; font-weight:600; letter-spacing:-.1px; }
.v-opt .s{ font-size:12px; color:var(--vlf-ink-500); margin-top:2px; }
.v-opt .rad{ width:22px; height:22px; border-radius:50%; border:2px solid var(--vlf-line); flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; }
.v-opt.on .rad{ border-color:var(--vlf-purple-600); background:var(--vlf-purple-600); }
.v-pay-qr{ text-align:center; padding:20px 18px; margin-top:8px; }
.v-pay-amount{ font-size:30px; line-height:1; color:var(--vlf-purple-700); }
.v-pay-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--vlf-line); font-size:13px; }
.v-pay-row span{ color:var(--vlf-ink-500); }
.v-pay-row b{ font-weight:700; letter-spacing:.01em; }
.v-pay-wait{ display:flex; align-items:center; justify-content:center; gap:9px; margin:16px 0 8px; font-size:12.5px; font-weight:600; color:var(--vlf-purple-700); }
.v-spin{ width:15px; height:15px; border-radius:50%; border:2px solid var(--vlf-purple-100); border-top-color:var(--vlf-purple-600); animation:vSpin .8s linear infinite; }
@keyframes vSpin{ to{ transform:rotate(360deg); } }
.v-pay-brands{ display:flex; gap:8px; margin:8px 0 16px; }
.v-pay-brands span{ font-size:10.5px; font-weight:800; letter-spacing:.04em; color:var(--vlf-ink-700); background:var(--vlf-sunk); border:1px solid var(--vlf-line); border-radius:7px; padding:5px 9px; }
.v-2col{ display:flex; gap:12px; } .v-2col > *{ flex:1; }
.v-substep-back{ display:inline-flex; align-items:center; gap:5px; border:none; background:none; color:var(--vlf-purple-700); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:0; margin:2px 0 14px; }

/* organisers logo strip */
.v-orgs{ display:flex; flex-wrap:wrap; gap:7px; }
.v-org{ display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; background:var(--vlf-purple-50); border:1px solid var(--vlf-purple-100); font-size:11.5px; font-weight:700; color:var(--vlf-purple-700); }
.v-org i{ width:6px; height:6px; border-radius:50%; background:var(--vlf-gold-500); flex:0 0 auto; }
.v-onboard .v-org{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#fff; }
.v-onboard .v-org i{ background:var(--vlf-gold-300); }
/* ô chừa logo (reserved logo slots) */
/* shop */
.v-shop-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.v-prod{ background:#fff; border:1px solid var(--vlf-line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); }
.v-prod-img{ position:relative; aspect-ratio:1.1; }
.v-prod-img::before{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(125deg,rgba(255,255,255,.06) 0 2px,transparent 2px 20px); }
.v-prod-cat{ position:absolute; left:9px; top:9px; font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.28); padding:3px 8px; border-radius:6px; white-space:nowrap; }
.v-prod-bd{ padding:10px 11px 11px; }
.v-prod-nm{ font-size:12.5px; font-weight:600; line-height:1.3; min-height:2.6em; }
.v-prod-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:7px; }
.v-prod-price{ font-weight:800; font-size:13.5px; color:var(--vlf-purple-700); }
.v-prod-add{ width:30px; height:30px; border-radius:9px; border:none; background:var(--vlf-purple-700); color:#fff; font-size:20px; font-weight:700; line-height:1; cursor:pointer; }
.v-prod-qty{ display:flex; align-items:center; gap:9px; }
.v-prod-qty button{ width:26px; height:26px; border-radius:8px; border:1px solid var(--vlf-line); background:#fff; color:var(--vlf-purple-700); font-size:16px; font-weight:700; line-height:1; cursor:pointer; }
.v-prod-qty b{ font-size:14px; min-width:14px; text-align:center; }
.v-cart-badge{ min-width:22px; height:22px; border-radius:11px; background:rgba(255,255,255,.22); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 6px; }
/* village zone cards */
.v-vz{ display:flex; gap:13px; padding:13px 14px; align-items:flex-start; }
.v-vz + .v-vz{ border-top:1px solid var(--vlf-line); }
.v-vz .ic{ width:46px; height:46px; border-radius:13px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--vlf-purple-50); }
.v-vz .nm{ font-size:14.5px; font-weight:700; }
.v-vz .ds{ font-size:12px; color:var(--vlf-ink-500); margin-top:2px; line-height:1.4; }
.v-vz .hr{ font-size:11px; font-weight:600; color:var(--vlf-gold-700); margin-top:5px; }
/* scorecard 18 hố */
.v-sc{ overflow-x:auto; padding:12px 6px; }
.v-sc::-webkit-scrollbar{ display:none; }
.v-sc-row{ display:flex; width:max-content; }
.v-sc-h{ flex:0 0 32px; text-align:center; border-left:1px solid var(--vlf-line); padding:0 2px; }
.v-sc-h:first-child{ border-left:none; }
.v-sc-h .hn{ font-size:9.5px; color:var(--vlf-ink-500); font-weight:700; }
.v-sc-h .pr{ font-size:9px; color:var(--vlf-ink-500); margin:1px 0 3px; }
.v-sc-h .st{ font-size:13px; font-weight:800; }
.v-sc-tot{ border-left:2px solid var(--vlf-line); }
.v-sc-sum{ display:flex; gap:16px; justify-content:flex-end; padding:10px 12px 2px; font-size:12px; font-weight:600; color:var(--vlf-ink-500); }
.v-cartbtn{ display:flex; align-items:center; justify-content:space-between; padding:0 18px; }
.v-cartbtn .l{ display:flex; align-items:center; gap:9px; }
.v-prod-hero{ position:relative; height:190px; display:flex; align-items:flex-end; padding:14px; }
.v-prod-hero::before{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(125deg,rgba(255,255,255,.06) 0 2px,transparent 2px 22px); }
.v-prod-hero .v-prod-cat{ position:relative; }
.v-size{ min-width:52px; height:46px; border-radius:12px; border:1.5px solid var(--vlf-line); background:#fff; font-family:inherit; font-size:15px; font-weight:700; color:var(--vlf-ink-700); cursor:pointer; }
.v-size.on{ border-color:var(--vlf-purple-600); background:var(--vlf-purple-50); color:var(--vlf-purple-700); }
.v-pickup-row{ display:flex; gap:11px; align-items:flex-start; padding:7px 0; }
.v-pickup-row + .v-pickup-row{ border-top:1px solid var(--vlf-line); margin-top:3px; padding-top:11px; }
.v-pickup-row .s{ font-size:11.5px; color:var(--vlf-ink-500); margin-top:2px; line-height:1.4; }
.v-3p{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:#3E8E7E; background:rgba(62,142,126,.1); border-radius:11px; padding:11px 13px; margin:6px 0 14px; }
.v-branch{ display:flex; align-items:center; gap:13px; padding:16px; border:1.5px solid var(--vlf-line); border-radius:16px; background:#fff; cursor:pointer; margin-bottom:11px; }
.v-branch:active{ transform:scale(.99); }
.v-branch .ic{ width:48px; height:48px; border-radius:14px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--vlf-purple-50); color:var(--vlf-purple-700); }
.v-branch .t{ font-family:var(--font-display); font-size:18px; font-weight:700; }
.v-branch .s{ font-size:12px; color:var(--vlf-ink-500); margin-top:2px; }
.v-tk-on{ box-shadow:0 0 0 1px var(--vlf-purple-600); }
.v-check{ display:flex; align-items:center; gap:11px; padding:13px 0; cursor:pointer; position:relative; }
.v-check + .v-check{ border-top:1px solid var(--vlf-line); }
.v-check input{ position:absolute; opacity:0; pointer-events:none; }
.v-check .v-box{ width:22px; height:22px; border-radius:7px; border:2px solid var(--vlf-line); flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; }
.v-check input:checked + .v-box{ background:var(--vlf-purple-600); border-color:var(--vlf-purple-600); }
/* ===== NOTIF BELL (top bar) + HELP FAB ===== */
.v-bell{ position:absolute; top:calc(var(--zalo-status-h) + 9px); right:100px; z-index:120; width:38px; height:38px; border-radius:11px; border:none; background:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.v-bell:active{ opacity:.6; }
.v-bell-badge{ position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; border-radius:9px; background:#ff5a5a; color:#fff; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 4px; border:1.5px solid var(--vlf-purple-800); }
.v-helpbtn{ position:absolute; top:calc(var(--zalo-status-h) + 9px); right:146px; z-index:120; width:38px; height:38px; border-radius:11px; border:none; background:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.v-helpbtn:active{ opacity:.6; }
/* noti rows */
.v-noti{ display:flex; gap:13px; padding:14px; cursor:pointer; }
.v-noti + .v-noti{ border-top:1px solid var(--vlf-line); }
.v-noti .ic{ width:42px; height:42px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; }
.v-noti-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.v-noti-top .ti{ font-size:13.5px; font-weight:700; letter-spacing:-.1px; display:flex; align-items:center; gap:6px; }
.v-noti-top .ti .dot{ width:7px; height:7px; border-radius:50%; background:#ff5a5a; flex:0 0 auto; }
.v-noti-top .wh{ font-size:10.5px; color:var(--vlf-ink-500); white-space:nowrap; flex:0 0 auto; }
.v-noti .bd{ font-size:12.5px; color:var(--vlf-ink-700); margin-top:3px; line-height:1.4; }
.v-noti-cta{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:var(--vlf-purple-700); margin-top:7px; white-space:nowrap; }
/* help */
.v-help-hero{ background:linear-gradient(160deg,#522367,#1F0D26); color:#fff; padding:22px 18px 20px; }
.v-help-crest{ width:48px; height:48px; border-radius:14px; background:rgba(201,162,75,.18); color:var(--vlf-gold-300); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.v-help-hero h2{ font-family:var(--font-display); font-size:22px; font-weight:800; margin:0; }
.v-help-hero p{ font-size:12.5px; opacity:.8; margin:5px 0 0; line-height:1.45; }
.v-help-search{ display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); border-radius:13px; padding:11px 13px; margin-top:14px; color:#fff; }
.v-help-search input{ flex:1; border:none; background:none; outline:none; font-family:inherit; font-size:14px; color:#fff; }
.v-help-search input::placeholder{ color:rgba(255,255,255,.6); }
.v-help-chip{ flex:0 0 auto; font-size:11.5px; font-weight:700; color:#fff; background:rgba(255,255,255,.18); border-radius:999px; padding:6px 12px; }
.v-help-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; }
.v-help-3 .it{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding:13px 6px; border-radius:14px; border:1px solid var(--vlf-line); background:#fff; color:var(--vlf-purple-700); cursor:pointer; text-decoration:none; }
.v-help-3 .it b{ font-size:12px; font-weight:700; color:var(--vlf-ink-900); margin-top:2px; }
.v-help-3 .it span{ font-size:10px; color:var(--vlf-ink-500); }
.v-help-tile .dd{ font-size:11px; color:var(--vlf-ink-500); line-height:1.4; margin-top:5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.v-help-tile-cta{ display:inline-block; font-size:11px; font-weight:700; color:var(--vlf-purple-700); margin-top:8px; }
.v-faq{ padding:2px 0; }
.v-faq + .v-faq{ border-top:1px solid var(--vlf-line); }
.v-faq .q{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px; font-size:13.5px; font-weight:600; cursor:pointer; }
.v-faq .a{ padding:0 14px 14px; font-size:13px; line-height:1.55; color:var(--vlf-ink-700); }
.v-steps{ display:flex; flex-direction:column; gap:12px; }
.v-step-it{ display:flex; gap:12px; align-items:flex-start; }
.v-step-it .n{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--vlf-purple-700); color:#fff; font-size:12.5px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.v-step-it .tx{ flex:1; font-size:14px; line-height:1.5; color:var(--vlf-ink-700); padding-top:1px; }
.v-help-chat{ display:flex; align-items:center; gap:13px; padding:15px; margin-top:6px; border-radius:16px; cursor:pointer; background:linear-gradient(150deg,#522367,#31153D); color:#fff; box-shadow:var(--shadow-md); }
.v-help-chat .ic{ width:44px; height:44px; border-radius:13px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:rgba(201,162,75,.22); color:var(--vlf-gold-300); }
.v-help-chat .t{ font-size:15px; font-weight:700; }
.v-help-chat .s{ font-size:11.5px; opacity:.85; margin-top:2px; line-height:1.35; }
.v-help-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.v-help-tile{ background:#fff; border:1px solid var(--vlf-line); border-radius:15px; padding:14px; cursor:pointer; box-shadow:var(--shadow-sm); }
.v-help-tile:active{ transform:scale(.98); }
.v-help-tile .ic{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--vlf-purple-50); color:var(--vlf-purple-700); margin-bottom:10px; }
.v-help-tile .tt{ font-size:13.5px; font-weight:700; line-height:1.25; }
/* handbook (sổ tay theo vai trò) */
.v-hb-head{ display:flex; align-items:center; gap:13px; padding:15px; border-radius:16px; background:linear-gradient(150deg,#3E1A4D,#26102F); color:#fff; box-shadow:var(--shadow-sm); }
.v-hb-head .ic{ width:46px; height:46px; border-radius:13px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:rgba(201,162,75,.2); color:var(--vlf-gold-300); }
.v-hb-head .t{ font-family:var(--font-display); font-size:16.5px; font-weight:800; line-height:1.15; }
.v-hb-head .s{ font-size:11.5px; opacity:.78; margin-top:3px; }
.v-hb-badge{ flex:0 0 auto; align-self:flex-start; white-space:nowrap; font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--vlf-purple-900); background:var(--vlf-gold-300); border-radius:999px; padding:4px 8px; }
.v-hb-list{ margin:0; padding:2px 0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.v-hb-list li{ position:relative; padding-left:18px; font-size:13px; line-height:1.5; color:var(--vlf-ink-700); text-wrap:pretty; }
.v-hb-list li::before{ content:''; position:absolute; left:3px; top:7px; width:6px; height:6px; border-radius:50%; background:var(--vlf-gold-500); }
/* ===== OPS APP ===== */
.v-ops-btn{ background:var(--vlf-gold-500); color:var(--vlf-purple-900); box-shadow:0 6px 18px rgba(201,162,75,.35); width:100%; height:52px; border:none; border-radius:999px; font-family:var(--font-sans); font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
.v-ops-btn:active{ transform:translateY(1px); }
.v-tabbar--ops .v-tab.on{ color:var(--vlf-purple-700); }
.v-ops-onboard{ background:radial-gradient(120% 70% at 80% -5%, rgba(201,162,75,.28), transparent 55%), linear-gradient(165deg,#522367,#1F0D26 72%); }
.v-ops-crest{ width:58px; height:58px; border-radius:16px; background:rgba(201,162,75,.14); border:1px solid rgba(201,162,75,.28); display:flex; align-items:center; justify-content:center; color:var(--vlf-gold-300); margin-bottom:18px; }
.v-ops-rolelbl{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.5); margin:0 2px 10px; }
.v-ops-roles{ display:flex; flex-direction:column; gap:8px; }
.v-ops-roles .g{ font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--vlf-gold-300); margin:8px 2px 2px; }
.v-ops-role{ display:flex; align-items:center; gap:12px; padding:12px 13px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); cursor:pointer; text-align:left; color:#fff; font-family:inherit; }
.v-ops-role:active{ transform:scale(.99); }
.v-ops-role .ic{ width:36px; height:36px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--vlf-purple-100); color:var(--vlf-purple-700); }
.v-ops-role .tx{ flex:1; min-width:0; } .v-ops-role .tx b{ display:block; font-size:13.5px; font-weight:700; } .v-ops-role .tx span{ font-size:11.5px; opacity:.7; }
.v-ops-role > svg{ color:rgba(255,255,255,.4); flex:0 0 auto; }
/* login Zalo (trượt lên) → vai trò đã mapping */
.v-ops-zalo{ background:var(--vlf-gold-500); color:var(--vlf-purple-900); box-shadow:0 8px 20px rgba(201,162,75,.34); width:100%; height:52px; border:none; border-radius:999px; font-family:var(--font-sans); font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; transition:transform .14s var(--water); }
.v-ops-zalo:active{ transform:translateY(1px); }
.v-ops-zalo .zg{ display:flex; align-items:center; justify-content:center; }
.v-ops-maprow{ display:flex; align-items:center; gap:13px; padding:13px 14px; border-radius:16px; border:1px solid rgba(201,162,75,.24); background:rgba(201,162,75,.09); }
.v-ops-maprow .ic{ width:40px; height:40px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.1); color:var(--vlf-gold-300); }
.v-ops-maprow .tx{ flex:1; min-width:0; }
.v-ops-maprow .tx .lbl{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--vlf-gold-300); }
.v-ops-maprow .tx b{ display:block; font-size:15px; font-weight:700; color:#fff; margin-top:3px; }
.v-ops-maprow .tx span{ display:block; font-size:11.5px; color:rgba(255,255,255,.62); margin-top:1px; }
.v-ops-demo{ margin-top:16px; }
.v-ops-demo label{ display:block; font-size:11px; font-weight:600; color:rgba(255,255,255,.5); margin:0 2px 7px; }
.v-ops-demo select{ width:100%; height:40px; border-radius:11px; background:rgba(255,255,255,.07); color:#eaf3ee; border:1px solid rgba(255,255,255,.16); font-family:inherit; font-size:12.5px; padding:0 11px; }
.v-ops-demo select optgroup,.v-ops-demo select option{ color:#1a1a17; }
.v-ops-spin{ width:46px; height:46px; border-radius:50%; border:3px solid rgba(201,162,75,.22); border-top-color:var(--vlf-gold-300); animation:vSpin .8s linear infinite; }
@keyframes vSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .v-ops-spin{ animation-duration:1.6s; } }

/* ===== OPS · hệ thống vận hành (hub · tasks · coord · book) ===== */
.ops-sect{ align-items:flex-end; }
.ops-sect-sub{ display:block; font-size:11px; color:var(--vlf-ink-500); margin-top:2px; }
/* avatar */
.ops-ava{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-weight:700; flex:0 0 auto; letter-spacing:.2px; }
.ops-ava-more{ background:var(--vlf-purple-100); color:var(--vlf-purple-700); }
.ops-avastack{ display:inline-flex; align-items:center; }
/* chips */
.ops-teamchip{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 7px; border-radius:999px; font-weight:700; background:color-mix(in srgb, var(--tc) 12%, transparent); color:var(--tc); white-space:nowrap; }
.ops-teamchip i{ width:6px; height:6px; border-radius:50%; flex:0 0 auto; }
.ops-prio{ font-size:10px; font-weight:800; letter-spacing:.04em; padding:2px 6px; border-radius:5px; }
/* role card */
.ops-rolecard{ display:flex; align-items:center; gap:13px; padding:14px; margin-top:4px; }
.ops-rc-name{ font-weight:700; font-size:16px; }
.ops-rc-sub{ font-size:12.5px; color:var(--vlf-ink-500); margin-top:2px; }
.ops-rc-team{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--vlf-ink-700); margin-top:6px; white-space:nowrap; flex-wrap:nowrap; }
.ops-rc-team i{ width:7px; height:7px; border-radius:50%; }
/* KPI grid */
.ops-kpis{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; align-items:stretch; }
.ops-kpi{ padding:15px 14px; position:relative; min-height:88px; display:flex; flex-direction:column; justify-content:space-between; gap:8px; }
.ops-kpi b{ font-family:var(--font-display); font-size:25px; font-weight:800; line-height:1; }
.ops-kpi div{ font-size:11.5px; font-weight:600; color:var(--vlf-ink-700); line-height:1.3; }
.ops-kpi-dot{ position:absolute; top:12px; right:12px; width:8px; height:8px; border-radius:50%; background:#C0392B; box-shadow:0 0 0 4px rgba(192,57,43,.14); }
/* run of show */
.ops-ros{ padding:6px 14px; }
.ops-ros-row{ display:flex; align-items:center; gap:11px; padding:10px 0; border-top:1px solid var(--vlf-line); position:relative; }
.ops-ros-row:first-child{ border-top:none; }
.ops-ros-row.now{ margin:0 -14px; padding:10px 14px; background:linear-gradient(90deg, rgba(201,162,75,.12), transparent); border-radius:10px; border-top:none; }
.ops-ros-time{ width:44px; flex:0 0 auto; font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--vlf-ink-700); }
.ops-ros-live{ display:block; font-size:8.5px; color:var(--vlf-gold-700); font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-top:1px; }
.ops-ros-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.ops-ros-body{ flex:1; min-width:0; } .ops-ros-body .t{ font-size:13.5px; font-weight:600; } .ops-ros-body .s{ font-size:11.5px; color:var(--vlf-ink-500); margin-top:1px; }
/* incident / generic icon bubbles */
.ops-inc-ic,.ops-reqic{ width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.ops-reqic{ background:var(--vlf-purple-50); color:var(--vlf-purple-700); }
.ops-sla{ font-size:10px; font-weight:800; color:#C0392B; letter-spacing:.02em; white-space:nowrap; }
/* hướng dẫn dùng app (accordion) */
.ops-guide-it + .ops-guide-it{ border-top:1px solid var(--vlf-line); }
.ops-guide-head{ display:flex; align-items:center; gap:12px; padding:14px; cursor:pointer; }
.ops-guide-ic{ width:40px; height:40px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--vlf-purple-50); color:var(--vlf-purple-700); }
.ops-guide-head .t{ font-size:14px; font-weight:700; letter-spacing:-.1px; }
.ops-guide-head .s{ font-size:12px; color:var(--vlf-ink-500); margin-top:2px; line-height:1.4; }
.ops-guide-chev{ flex:0 0 auto; color:var(--vlf-ink-500); transition:transform .2s; }
.ops-guide-it.open .ops-guide-chev{ transform:rotate(180deg); }
.ops-guide-body{ padding:2px 14px 16px 14px; }
/* team progress */
.ops-teamprog{ padding:6px 14px; }
.ops-tp-row{ display:flex; align-items:center; gap:9px; padding:9px 0; border-top:1px solid var(--vlf-line); cursor:pointer; }
.ops-tp-row:first-child{ border-top:none; }
.ops-tp-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.ops-tp-name{ flex:0 0 auto; width:96px; font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ops-tp-n{ flex:0 0 auto; font-size:11.5px; font-weight:700; color:var(--vlf-ink-500); width:30px; text-align:right; }
.ops-prog{ flex:1; height:6px; border-radius:99px; background:var(--vlf-sunk); overflow:hidden; display:block; }
.ops-prog i{ display:block; height:100%; border-radius:99px; transition:width .3s; }
/* shift card (TNV) */
.ops-shift{ display:flex; align-items:center; gap:14px; padding:15px; }
.ops-shift-time{ text-align:center; flex:0 0 auto; }
.ops-shift-time b{ display:block; font-family:var(--font-display); font-weight:800; font-size:21px; color:var(--vlf-purple-700); line-height:1; }
.ops-shift-time span{ font-size:10.5px; color:var(--vlf-ink-500); }
.ops-shift-mid{ flex:1; min-width:0; border-left:1px solid var(--vlf-line); padding-left:14px; }
.ops-shift-mid .t{ font-weight:700; font-size:14px; }
.ops-shift-mid .s{ font-size:11.5px; color:var(--vlf-ink-500); margin-top:2px; }
.ops-onduty{ display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; align-self:flex-start; font-size:10.5px; font-weight:700; color:#1F8A5B; }
.ops-onduty i{ width:7px; height:7px; border-radius:50%; background:#1F8A5B; box-shadow:0 0 0 3px rgba(31,138,91,.18); animation:opsPulse 1.8s infinite; }
@keyframes opsPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
.ops-briefcard{ display:flex; align-items:center; gap:12px; padding:13px 14px; cursor:pointer; }
.ops-brief-ic{ width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:rgba(201,162,75,.16); color:var(--vlf-gold-700); }
.ops-briefcard .t{ font-weight:700; font-size:13.5px; } .ops-briefcard .s{ font-size:11.5px; color:var(--vlf-ink-500); margin-top:2px; }
/* task row */
.ops-taskrow{ align-items:flex-start; }
.ops-tr-top{ display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.ops-tr-win{ font-family:var(--font-mono); font-size:10.5px; color:var(--vlf-ink-500); font-weight:600; }
.ops-tr-collab{ font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--vlf-gold-700); background:rgba(201,162,75,.16); padding:2px 6px; border-radius:5px; white-space:nowrap; flex:0 0 auto; }
.ops-tr-meta{ display:flex; align-items:center; gap:12px; margin-top:8px; }
.ops-tr-steps{ font-size:11px; color:var(--vlf-ink-500); font-weight:600; }
.ops-tr-coll{ display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--vlf-ink-500); font-weight:600; }
/* quick actions (TNV) */
.ops-quick{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; margin-top:16px; }
.ops-quick-b{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:14px 6px; border-radius:15px; background:var(--vlf-paper); border:1px solid var(--vlf-line); color:var(--vlf-purple-700); font-family:inherit; font-size:11.5px; font-weight:600; cursor:pointer; box-shadow:var(--shadow-sm); text-align:center; }
.ops-quick-b:active{ transform:scale(.97); }
.ops-quick-b span{ color:var(--vlf-ink-900); line-height:1.2; }

/* ---- board ---- */
.ops-scopebar{ display:flex; gap:7px; margin:2px 0 4px; }
.ops-scope{ flex:1; height:36px; border-radius:10px; border:1px solid var(--vlf-line); background:var(--vlf-paper); font-family:inherit; font-size:12.5px; font-weight:600; color:var(--vlf-ink-700); cursor:pointer; }
.ops-scope.on{ background:var(--vlf-purple-700); color:#fff; border-color:var(--vlf-purple-700); }
.ops-teampick{ display:flex; gap:7px; overflow-x:auto; padding:6px 0 2px; scrollbar-width:none; }
.ops-teampick::-webkit-scrollbar{ display:none; }
.ops-teampick-b{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; height:32px; padding:0 12px; border-radius:99px; border:1px solid var(--vlf-line); background:var(--vlf-paper); font-family:inherit; font-size:12px; font-weight:600; color:var(--vlf-ink-700); cursor:pointer; }
.ops-teampick-b i{ width:7px; height:7px; border-radius:50%; }
.ops-statfilter{ display:flex; gap:7px; margin-top:10px; }
.ops-sf{ flex:1; height:34px; border-radius:10px; border:1px solid var(--vlf-line); background:var(--vlf-paper); font-family:inherit; font-size:11.5px; font-weight:600; color:var(--vlf-ink-500); cursor:pointer; }
.ops-sf b{ color:var(--vlf-ink-900); }
.ops-sf.on{ background:var(--vlf-purple-50); color:var(--vlf-purple-700); border-color:var(--vlf-purple-100); }
.ops-sf.on b{ color:var(--vlf-purple-700); }

/* ---- detail (task · incident · sop · brief · emg) ---- */
.ops-detail{ padding-top:4px; }
.ops-td-head{ padding:2px 2px 4px; }
.ops-td-top{ display:flex; align-items:center; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
.ops-detail h2{ font-family:var(--font-display); font-weight:800; font-size:22px; line-height:1.15; letter-spacing:-.3px; margin:0; }
.ops-td-facts{ display:flex; flex-wrap:wrap; gap:13px; margin-top:11px; }
.ops-td-facts span{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--vlf-ink-500); font-weight:600; }
.ops-td-desc{ font-size:14px; line-height:1.55; color:var(--vlf-ink-700); margin:13px 0 0; }
.ops-td-status{ display:flex; gap:7px; margin:14px 0 4px; }
.ops-stbtn{ flex:1; height:40px; border-radius:11px; border:1px solid var(--vlf-line); background:var(--vlf-paper); font-family:inherit; font-size:13px; font-weight:700; color:var(--vlf-ink-500); cursor:pointer; }
.ops-stbtn.on{ background:var(--vlf-purple-700); color:#fff; border-color:var(--vlf-purple-700); }
.ops-blocked{ display:flex; align-items:center; gap:8px; margin-top:12px; padding:11px 13px; border-radius:12px; background:rgba(192,57,43,.08); color:var(--vlf-under); font-size:12.5px; font-weight:600; }
.ops-people-row{ display:flex; gap:12px; padding:9px 0; border-top:1px solid var(--vlf-line); align-items:flex-start; }
.ops-people-row:first-child{ border-top:none; padding-top:0; }
.ops-people-lbl{ width:74px; flex:0 0 auto; font-size:11.5px; font-weight:700; color:var(--vlf-ink-500); padding-top:3px; }
.ops-people-v{ flex:1; min-width:0; font-size:13px; font-weight:600; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ops-people-avas{ flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:9px 14px; }
.ops-person{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; }
.ops-collabwrap{ gap:6px; }
.ops-step{ align-items:center; }
.ops-step-by{ display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; font-size:11px; color:var(--vlf-ink-500); font-weight:600; }
/* thread / chat */
.ops-thread{ display:flex; flex-direction:column; gap:13px; }
.ops-msg{ display:flex; gap:9px; align-items:flex-start; }
.ops-msg.mine{ flex-direction:row-reverse; }
.ops-msg-b{ max-width:78%; }
.ops-msg.mine .ops-msg-b{ text-align:right; }
.ops-msg-head{ display:flex; gap:7px; align-items:baseline; margin-bottom:3px; }
.ops-msg.mine .ops-msg-head{ flex-direction:row-reverse; }
.ops-msg-head b{ font-size:12px; font-weight:700; } .ops-msg-head span{ font-size:10.5px; color:var(--vlf-ink-500); }
.ops-msg-tx{ display:inline-block; font-size:13px; line-height:1.45; padding:9px 12px; border-radius:13px; background:var(--vlf-sunk); border-top-left-radius:4px; text-align:left; }
.ops-msg.mine .ops-msg-tx{ background:var(--vlf-purple-700); color:#fff; border-top-left-radius:13px; border-top-right-radius:4px; }
.ops-quickmsg{ display:flex; gap:7px; flex-wrap:wrap; margin-top:11px; }
.ops-quickmsg button{ flex:0 0 auto; height:34px; padding:0 13px; border-radius:99px; border:1px solid var(--vlf-purple-100); background:var(--vlf-purple-50); color:var(--vlf-purple-700); font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.ops-quickmsg button:active{ transform:scale(.97); }
.ops-callrow{ display:flex; gap:10px; margin-top:16px; align-items:stretch; }
.ops-callrow .v-btn{ flex:1; min-height:50px; height:auto; padding:9px 12px; font-size:12.5px; text-transform:none; letter-spacing:0; line-height:1.25; border-radius:14px; text-align:center; }
/* nhật ký xử lý sự cố (action log — kiểu log sạch, không bong bóng) */
.ops-log{ display:flex; flex-direction:column; padding:2px 14px; }
.ops-logitem{ display:flex; gap:11px; padding:11px 0; }
.ops-logitem + .ops-logitem{ border-top:1px solid var(--vlf-line); }
.ops-log-b{ flex:1; min-width:0; }
.ops-log-head{ display:flex; align-items:center; gap:7px; }
.ops-log-head b{ font-size:13px; font-weight:700; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ops-log-head .at{ font-size:10.5px; color:var(--vlf-ink-500); font-family:var(--font-mono); margin-left:auto; flex:0 0 auto; }
.ops-log-you{ font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--vlf-gold-700); background:rgba(201,162,75,.16); padding:1px 6px; border-radius:5px; }
.ops-log-tx{ font-size:13px; line-height:1.5; color:var(--vlf-ink-900); margin-top:3px; }

/* ---- coord ---- */
.ops-report-btn{ background:#C0392B; color:#fff; box-shadow:0 6px 18px rgba(192,57,43,.3); width:100%; height:50px; border:none; border-radius:999px; font-family:var(--font-sans); font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; margin-top:4px; }
.ops-report-btn:active{ transform:translateY(1px); }
.ops-incrow{ align-items:flex-start; }
.ops-hov{ padding:11px 0; border-top:1px solid var(--vlf-line); }
.ops-hov:first-child{ border-top:none; padding-top:2px; }
.ops-hov-head{ display:flex; justify-content:space-between; align-items:baseline; }
.ops-hov-head b{ font-size:12.5px; font-weight:700; } .ops-hov-head span{ font-size:11px; color:var(--vlf-ink-500); }
.ops-hov-note{ font-size:12.5px; line-height:1.5; color:var(--vlf-ink-700); margin-top:4px; }
.ops-hov-next{ display:flex; align-items:center; gap:8px; color:var(--vlf-purple-700); font-size:12.5px; font-weight:600; }
/* report sheet fields */
.ops-field-lbl{ font-size:11.5px; font-weight:700; color:var(--vlf-ink-500); margin:14px 2px 8px; }
.ops-field-lbl:first-child{ margin-top:4px; }
.ops-sevseg{ display:flex; gap:8px; }
.ops-sevb{ flex:1; height:42px; border-radius:11px; border:1px solid var(--vlf-line); background:var(--vlf-paper); font-family:inherit; font-size:13px; font-weight:700; color:var(--vlf-ink-500); cursor:pointer; }
.ops-canned{ display:flex; flex-wrap:wrap; gap:8px; }
.ops-cannedb{ flex:0 0 auto; height:36px; padding:0 13px; border-radius:99px; border:1px solid var(--vlf-line); background:var(--vlf-paper); font-family:inherit; font-size:12.5px; font-weight:600; color:var(--vlf-ink-700); cursor:pointer; }
.ops-cannedb.on{ background:var(--vlf-purple-50); border-color:var(--vlf-purple-100); color:var(--vlf-purple-700); }
.ops-input{ width:100%; height:44px; border-radius:12px; border:1px solid var(--vlf-line); background:var(--vlf-paper); font-family:inherit; font-size:14px; padding:0 13px; color:var(--vlf-ink-900); }
.ops-sent-ic{ width:60px; height:60px; border-radius:50%; margin:0 auto; display:flex; align-items:center; justify-content:center; background:rgba(31,138,91,.14); color:#1F8A5B; }

/* ---- book / sop / onboard / emergency ---- */
.ops-onb-banner{ display:flex; align-items:center; gap:14px; padding:16px; border-radius:18px; margin-top:4px; cursor:pointer; background:linear-gradient(135deg, var(--vlf-purple-700), var(--vlf-purple-900)); color:#fff; box-shadow:0 10px 26px rgba(42,14,51,.28); }
.ops-onb-ring{ width:54px; height:54px; flex:0 0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; background:conic-gradient(var(--vlf-gold-400, #E8CE8B) var(--p), rgba(255,255,255,.18) 0); }
.ops-onb-ring span{ width:42px; height:42px; border-radius:50%; background:var(--vlf-purple-800); display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; color:var(--vlf-gold-300); }
.ops-onb-kk{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; color:var(--vlf-gold-300); }
.ops-onb-t{ font-weight:800; font-size:16px; margin-top:3px; }
.ops-onb-s{ font-size:11.5px; opacity:.78; margin-top:3px; line-height:1.4; }
.ops-mysop{ display:flex; align-items:center; gap:13px; padding:14px; cursor:pointer; }
.ops-mysop-ic{ width:44px; height:44px; border-radius:13px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.ops-mysop .t{ font-weight:700; font-size:14px; } .ops-mysop .s{ font-size:11.5px; color:var(--vlf-ink-500); margin-top:2px; }
.ops-catbar{ display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none; }
.ops-catbar::-webkit-scrollbar{ display:none; }
.ops-cat{ flex:0 0 auto; height:32px; padding:0 13px; border-radius:99px; border:1px solid var(--vlf-line); background:var(--vlf-paper); font-family:inherit; font-size:12px; font-weight:600; color:var(--vlf-ink-700); cursor:pointer; }
.ops-cat.on{ background:var(--vlf-purple-700); color:#fff; border-color:var(--vlf-purple-700); }
.ops-sop-min{ font-size:11px; font-weight:700; color:var(--vlf-ink-500); flex:0 0 auto; font-family:var(--font-mono); }
.ops-reftiles{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.ops-reftile{ display:flex; flex-direction:column; gap:10px; padding:15px; border-radius:16px; background:var(--vlf-paper); border:1px solid var(--vlf-line); box-shadow:var(--shadow-sm); font-family:inherit; font-size:13px; font-weight:700; color:var(--vlf-ink-900); cursor:pointer; text-align:left; }
.ops-reftile:active{ transform:scale(.98); }
.ops-reftile .ic{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
/* onboard flow */
.ops-onb-progrow{ display:flex; align-items:center; gap:11px; margin-top:13px; } .ops-onb-progrow span{ font-size:12px; font-weight:700; color:var(--vlf-ink-500); }
.ops-onb-steps{ padding:4px 14px; }
.ops-onbstep{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--vlf-line); cursor:pointer; }
.ops-onbstep:first-child{ border-top:none; }
.ops-onbstep-ck{ width:26px; height:26px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border:2px solid var(--vlf-line); color:var(--vlf-ink-500); font-size:12px; font-weight:800; }
.ops-onbstep-ck.done{ background:#1F8A5B; border-color:#1F8A5B; color:#fff; }
.ops-onbstep-ic{ width:36px; height:36px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--vlf-purple-50); color:var(--vlf-purple-700); }
.ops-onbstep .t{ font-size:13.5px; font-weight:600; } .ops-onbstep .s{ font-size:11.5px; color:var(--vlf-ink-500); margin-top:2px; }
.ops-onb-mini{ display:flex; align-items:center; gap:12px; padding:13px 14px; margin-top:10px; cursor:pointer; }
.ops-onb-mini-ic{ width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:rgba(201,162,75,.16); color:var(--vlf-gold-700); }
.ops-onb-mini .t{ font-weight:700; font-size:13.5px; } .ops-onb-mini .s{ font-size:11.5px; color:var(--vlf-ink-500); margin-top:2px; }
/* sop detail */
.ops-sopcat{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--vlf-purple-700); background:var(--vlf-purple-50); padding:3px 8px; border-radius:6px; white-space:nowrap; }
.ops-sopsec{ margin-top:18px; }
.ops-sopsec h4{ font-size:14px; font-weight:800; margin:0 0 9px; color:var(--vlf-ink-900); }
.ops-sopsec ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.ops-sopsec li{ position:relative; padding-left:18px; font-size:13.5px; line-height:1.5; color:var(--vlf-ink-700); }
.ops-sopsec li::before{ content:""; position:absolute; left:2px; top:8px; width:6px; height:6px; border-radius:50%; background:var(--vlf-gold-500); }
.ops-dodont{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.ops-do,.ops-dont{ border-radius:14px; padding:13px; }
.ops-do{ background:rgba(31,138,91,.08); } .ops-dont{ background:rgba(192,57,43,.07); }
.ops-do .hd,.ops-dont .hd{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; margin-bottom:9px; }
.ops-do .hd{ color:#1F8A5B; } .ops-dont .hd{ color:#C0392B; }
.ops-do ul,.ops-dont ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
.ops-do li,.ops-dont li{ font-size:12.5px; line-height:1.4; color:var(--vlf-ink-700); }
/* briefing */
.ops-agnum{ width:22px; height:22px; flex:0 0 auto; border-radius:50%; background:var(--vlf-purple-50); color:var(--vlf-purple-700); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:1px; }
/* emergency */
.ops-emgrule{ display:flex; gap:9px; align-items:flex-start; padding:12px 13px; border-radius:13px; background:rgba(192,57,43,.07); color:var(--vlf-ink-900); font-size:12.5px; font-weight:600; line-height:1.45; margin-bottom:9px; }
.ops-emgrule svg{ color:#C0392B; flex:0 0 auto; margin-top:1px; }
.ops-callnum{ font-family:var(--font-mono); font-size:14px; font-weight:800; color:#C0392B; flex:0 0 auto; text-decoration:none; }
.ops-esclv{ width:30px; height:30px; flex:0 0 auto; border-radius:9px; background:var(--vlf-purple-700); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.ops-radiogrid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:14px; }
.ops-radio{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:11px; background:var(--vlf-sunk); }
.ops-radio b{ font-family:var(--font-mono); font-size:13px; font-weight:800; color:var(--vlf-purple-700); }
.ops-radio span{ font-size:11px; color:var(--vlf-ink-700); }

/* ===== FIELD GUIDE · sổ tay nâng cấp (book home) ===== */
.ops-fg-intro{ font-size:12.5px; line-height:1.5; color:var(--vlf-ink-500); margin:2px 2px 0; }
/* — cover sổ tay vị trí — */
.ops-fg-cover{ position:relative; overflow:hidden; border-radius:18px; cursor:pointer; background:var(--vlf-paper); border:1px solid var(--vlf-line); box-shadow:var(--shadow-md); transition:transform .12s ease; }
.ops-fg-cover:active{ transform:scale(.99); }
.ops-fg-top{ position:relative; padding:17px 17px 16px 21px; color:#fff; background:linear-gradient(140deg,#3a1a49,#1F0D26 78%); }
.ops-fg-top::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--fgc,var(--vlf-gold-500)); }
.ops-fg-top::after{ content:""; position:absolute; right:-30px; top:-30px; width:130px; height:130px; border-radius:50%; background:radial-gradient(circle, rgba(201,162,75,.22), transparent 70%); }
.ops-fg-cap{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--vlf-gold-300); position:relative; }
.ops-fg-hd{ display:flex; gap:13px; align-items:flex-start; margin-top:9px; position:relative; }
.ops-fg-crest{ width:46px; height:46px; border-radius:13px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.07); border:1px solid var(--fgc,rgba(201,162,75,.4)); color:#fff; box-shadow:inset 0 0 0 3px rgba(255,255,255,.04); }
.ops-fg-htxt h3{ font-size:18.5px; font-weight:800; line-height:1.18; letter-spacing:-.3px; margin:0; }
.ops-fg-htxt .sub{ font-size:11.5px; color:rgba(255,255,255,.66); margin-top:4px; font-weight:500; }
.ops-fg-stats{ display:flex; align-items:stretch; }
.ops-fg-stat{ flex:1; padding:11px 8px; text-align:center; }
.ops-fg-stat + .ops-fg-stat{ border-left:1px solid var(--vlf-line); }
.ops-fg-stat b{ display:block; font-size:18px; font-weight:800; color:var(--vlf-purple-700); line-height:1; font-variant-numeric:tabular-nums; }
.ops-fg-stat span{ display:block; font-size:10px; font-weight:600; color:var(--vlf-ink-500); margin-top:5px; letter-spacing:.02em; }
.ops-fg-cta{ display:flex; align-items:center; justify-content:center; gap:7px; padding:12px; border-top:1px solid var(--vlf-line); font-size:13px; font-weight:800; color:var(--vlf-purple-700); }
.ops-fg-cta svg{ transition:transform .15s ease; }
.ops-fg-cover:active .ops-fg-cta svg{ transform:translateX(3px); }
/* — thẻ trực (field essentials) — */
.ops-fg-ess{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ops-fg-tile{ display:flex; gap:11px; align-items:center; padding:12px 13px; border-radius:14px; background:var(--vlf-paper); border:1px solid var(--vlf-line); box-shadow:var(--shadow-sm); text-align:left; font-family:inherit; }
button.ops-fg-tile{ cursor:pointer; } button.ops-fg-tile:active{ transform:scale(.98); }
.ops-fg-tile .ic{ width:36px; height:36px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.ops-fg-tile .txt{ flex:1; min-width:0; }
.ops-fg-tile .l{ font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--vlf-ink-500); white-space:nowrap; }
.ops-fg-tile .v{ font-size:13.5px; font-weight:700; color:var(--vlf-ink-900); margin-top:2px; line-height:1.2; }
.ops-fg-tile .v.mono{ font-family:var(--font-mono); }
/* — thư viện SOP (cards) — */
.ops-soplib{ display:flex; flex-direction:column; gap:9px; }
.ops-sopcard{ display:flex; gap:13px; align-items:flex-start; padding:14px; border-radius:15px; background:var(--vlf-paper); border:1px solid var(--vlf-line); box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.ops-sopcard:active{ transform:scale(.99); }
.ops-sopcard-ic{ width:46px; height:46px; border-radius:13px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; position:relative; }
.ops-sopcard-ic::after{ content:""; position:absolute; left:7px; right:7px; bottom:-5px; height:3px; border-radius:3px; background:var(--sc,var(--vlf-gold-500)); opacity:.5; }
.ops-sopcard-bd{ flex:1; min-width:0; }
.ops-sopcard .t{ font-size:14px; font-weight:700; line-height:1.25; color:var(--vlf-ink-900); }
.ops-sopcard .s{ font-size:11.5px; color:var(--vlf-ink-500); margin-top:3px; line-height:1.42; }
.ops-sopcard-tags{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
.ops-sopcard-tag{ font-size:10px; font-weight:700; color:var(--vlf-ink-700); background:var(--vlf-sunk); border-radius:7px; padding:2.5px 8px; display:inline-flex; gap:4px; align-items:center; white-space:nowrap; }
.ops-sopcard-tag svg{ opacity:.8; }
.ops-mine-flag{ font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--vlf-gold-700); background:rgba(201,162,75,.16); border-radius:6px; padding:2px 7px; }

/* ===== PLAYBOOK · trang đọc SOP nâng cấp ===== */
.ops-pb-cover{ position:relative; overflow:hidden; border-radius:18px; color:#fff; padding:19px 18px 17px 22px; background:linear-gradient(145deg,#3a1a49,#1F0D26 80%); box-shadow:var(--shadow-md); }
.ops-pb-cover::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--pbc,var(--vlf-gold-500)); }
.ops-pb-cover::after{ content:""; position:absolute; right:-36px; top:-36px; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle, rgba(201,162,75,.2), transparent 70%); }
.ops-pb-badges{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-bottom:12px; position:relative; }
.ops-pb-catpill{ font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:3.5px 10px; border-radius:99px; color:#fff; background:var(--pbc,var(--vlf-gold-600)); white-space:nowrap; }
.ops-pb-min{ font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--vlf-gold-300); display:inline-flex; align-items:center; gap:4px; }
.ops-pb-cover h2{ font-family:var(--font-display); font-size:23px; font-weight:800; line-height:1.16; letter-spacing:-.4px; margin:0; position:relative; }
.ops-pb-lede{ font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.78); margin:11px 0 0; position:relative; }
.ops-pb-applies{ display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; position:relative; }
.ops-pb-applies .lbl{ font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.5); width:100%; margin-bottom:1px; }
.ops-pb-team{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:#fff; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); border-radius:99px; padding:4px 11px 4px 9px; }
.ops-pb-team i{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
/* TOC index */
.ops-pb-toc{ margin-top:16px; border-radius:15px; background:var(--vlf-paper); border:1px solid var(--vlf-line); box-shadow:var(--shadow-sm); overflow:hidden; }
.ops-pb-toc-hd{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--vlf-ink-500); padding:12px 15px 9px; }
.ops-pb-toc-item{ display:flex; align-items:center; gap:11px; padding:11px 15px; border-top:1px solid var(--vlf-line); }
.ops-pb-toc-num{ width:22px; height:22px; flex:0 0 auto; border-radius:7px; background:var(--vlf-purple-50); color:var(--vlf-purple-700); font-size:11px; font-weight:800; font-family:var(--font-mono); display:flex; align-items:center; justify-content:center; }
.ops-pb-toc-item span{ font-size:13px; font-weight:600; color:var(--vlf-ink-900); }
/* numbered sections */
.ops-pb-sec{ margin-top:20px; }
.ops-pb-sec-hd{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.ops-pb-sec-num{ width:26px; height:26px; flex:0 0 auto; border-radius:8px; background:var(--pbc,var(--vlf-purple-700)); color:#fff; font-size:12px; font-weight:800; font-family:var(--font-mono); display:flex; align-items:center; justify-content:center; }
.ops-pb-sec-hd h4{ font-size:15px; font-weight:800; margin:0; color:var(--vlf-ink-900); letter-spacing:-.2px; }
.ops-pb-sec ul{ margin:0; padding:0 0 0 36px; list-style:none; display:flex; flex-direction:column; gap:11px; }
.ops-pb-sec li{ position:relative; padding-left:18px; font-size:13.5px; line-height:1.5; color:var(--vlf-ink-700); }
.ops-pb-sec li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--pbc,var(--vlf-gold-500)); }
.ops-pb-divider{ height:1px; background:var(--vlf-line); margin:20px 0 0; }
/* escalation footer (an toàn) */
.ops-pb-esc{ display:flex; gap:11px; align-items:flex-start; margin-top:18px; padding:13px 14px; border-radius:14px; background:var(--vlf-purple-50); border:1px solid var(--vlf-purple-100); }
.ops-pb-esc.danger{ background:rgba(192,57,43,.07); border-color:rgba(192,57,43,.18); }
.ops-pb-esc .ic{ width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--vlf-purple-700); color:#fff; }
.ops-pb-esc.danger .ic{ background:#C0392B; }
.ops-pb-esc .l{ font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--vlf-ink-500); }
.ops-pb-esc .v{ font-size:12.5px; font-weight:600; line-height:1.45; color:var(--vlf-ink-900); margin-top:3px; }
.ops-pb-esc .radio{ font-family:var(--font-mono); font-weight:800; color:var(--vlf-purple-700); }
.ops-pb-esc.danger .radio{ color:#C0392B; }
/* acknowledge + related */
.ops-pb-ack{ display:flex; align-items:center; gap:12px; margin-top:18px; padding:15px; border-radius:15px; background:linear-gradient(135deg,var(--vlf-purple-700),var(--vlf-purple-900)); color:#fff; cursor:pointer; box-shadow:0 8px 22px rgba(42,14,51,.26); }
.ops-pb-ack.done{ background:rgba(31,138,91,.1); color:#1F8A5B; box-shadow:none; border:1px solid rgba(31,138,91,.25); cursor:default; }
.ops-pb-ack-ck{ width:30px; height:30px; flex:0 0 auto; border-radius:50%; border:2px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; }
.ops-pb-ack.done .ops-pb-ack-ck{ border-color:#1F8A5B; background:#1F8A5B; color:#fff; }
.ops-pb-ack .t{ font-size:14px; font-weight:800; } .ops-pb-ack .s{ font-size:11px; opacity:.78; margin-top:2px; }
.ops-pb-ack.done .s{ opacity:1; color:var(--vlf-ink-500); }
.ops-pb-related{ margin-top:8px; }
.ops-pb-relrow{ display:flex; align-items:center; gap:11px; padding:12px 4px; cursor:pointer; }
.ops-pb-relrow + .ops-pb-relrow{ border-top:1px solid var(--vlf-line); }
.ops-pb-relic{ width:34px; height:34px; flex:0 0 auto; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.ops-pb-relrow .t{ font-size:13px; font-weight:700; color:var(--vlf-ink-900); }
.ops-pb-relrow .s{ font-size:11px; color:var(--vlf-ink-500); margin-top:1px; }

/* ===== DEMO PANEL extras (ops) ===== */
.vlf-panel-hint{ font-size:10.5px; line-height:1.5; color:#a98fb6; margin-top:9px; }
.vlf-panel-sel{ width:100%; height:38px; border-radius:9px; background:rgba(255,255,255,.07); color:#efe6f2; border:1px solid rgba(255,255,255,.14); font-family:inherit; font-size:12.5px; padding:0 10px; }
.vlf-panel-sel option{ color:#1a1a17; }

/* ===== SHIFT CHECK-IN · vòng đời nhân sự ===== */
/* tiến trình 3 bước */
.ops-ci-track{ display:flex; align-items:center; margin:14px 2px 6px; }
.ops-ci-node{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; }
.ops-ci-node .dot{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--vlf-line); background:var(--vlf-paper); color:var(--vlf-ink-500); }
.ops-ci-node span{ font-size:10.5px; font-weight:700; color:var(--vlf-ink-500); }
.ops-ci-node.now .dot{ border-color:var(--vlf-purple-600); color:var(--vlf-purple-700); box-shadow:0 0 0 4px var(--vlf-purple-50); }
.ops-ci-node.now span{ color:var(--vlf-purple-700); }
.ops-ci-node.done .dot{ background:#1F8A5B; border-color:#1F8A5B; color:#fff; }
.ops-ci-node.done span{ color:var(--vlf-ink-900); }
.ops-ci-line{ flex:1; height:2px; background:var(--vlf-line); margin:0 6px 22px; border-radius:2px; }
.ops-ci-line.on{ background:#1F8A5B; }
/* kit */
.ops-ci-kithint{ display:flex; gap:8px; align-items:flex-start; font-size:11.5px; line-height:1.45; color:var(--vlf-ink-700); background:var(--vlf-purple-50); border:1px solid var(--vlf-purple-100); border-radius:11px; padding:10px 12px; margin-bottom:10px; }
.ops-ci-kithint svg{ color:var(--vlf-purple-700); flex:0 0 auto; margin-top:1px; }
.ops-ci-kit{ padding:4px 14px; }
.ops-ci-kitrow{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--vlf-line); cursor:pointer; }
.ops-ci-kitrow:first-child{ border-top:none; }
.ops-ci-ck{ width:26px; height:26px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border:2px solid var(--vlf-line); color:#fff; }
.ops-ci-ck.done{ background:#1F8A5B; border-color:#1F8A5B; }
.ops-ci-kitic{ width:36px; height:36px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:rgba(201,162,75,.16); color:var(--vlf-gold-700); }
.ops-ci-kitrow .t{ font-size:13.5px; font-weight:600; } .ops-ci-kitrow .s{ font-size:11.5px; color:var(--vlf-ink-500); margin-top:2px; }
.ops-ci-ok{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:#1F8A5B; background:rgba(31,138,91,.1); border-radius:12px; padding:11px 13px; margin-top:10px; }
/* hành động vào ca */
.ops-ci-action{ border-radius:16px; background:var(--vlf-paper); border:1px solid var(--vlf-line); box-shadow:var(--shadow-sm); padding:15px; }
.ops-ci-action-hd{ display:flex; gap:13px; align-items:flex-start; margin-bottom:13px; }
.ops-ci-action-hd .ic{ width:46px; height:46px; border-radius:13px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--vlf-purple-50); color:var(--vlf-purple-700); }
.ops-ci-action-hd .t{ font-size:15px; font-weight:800; } .ops-ci-action-hd .s{ font-size:11.5px; color:var(--vlf-ink-500); margin-top:3px; line-height:1.45; }
.ops-ci-on{ padding:15px; }
.ops-ci-on-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.ops-ci-since{ font-family:var(--font-mono); font-size:11.5px; font-weight:700; color:var(--vlf-ink-500); }
.ops-ci-on-meta{ display:flex; align-items:center; gap:11px; padding:12px 0; border-top:1px solid var(--vlf-line); border-bottom:1px solid var(--vlf-line); margin-bottom:13px; }
.ops-ci-on-meta b{ font-size:13.5px; font-weight:700; display:block; } .ops-ci-on-meta span{ font-size:11.5px; color:var(--vlf-ink-500); }
.ops-ci-done{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#1F8A5B; }
/* banner trạng thái ca trên Hub */
.ops-ci-banner{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:15px; margin-top:10px; cursor:pointer; border:1px solid var(--vlf-line); box-shadow:var(--shadow-sm); background:var(--vlf-paper); }
.ops-ci-banner:active{ transform:scale(.99); }
.ops-ci-banner-ic{ width:40px; height:40px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.ops-ci-banner .t{ font-size:14px; font-weight:700; color:var(--vlf-ink-900); }
.ops-ci-banner .s{ font-size:11.5px; color:var(--vlf-ink-500); margin-top:2px; line-height:1.35; }
.ops-ci-banner-cta{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:700; color:var(--vlf-purple-700); flex:0 0 auto; }
.ops-ci-banner.kit{ background:rgba(201,162,75,.09); border-color:rgba(201,162,75,.3); }
.ops-ci-banner.kit .ops-ci-banner-ic{ background:rgba(201,162,75,.18); color:var(--vlf-gold-700); }
.ops-ci-banner.in{ background:var(--vlf-purple-50); border-color:var(--vlf-purple-100); }
.ops-ci-banner.in .ops-ci-banner-ic{ background:var(--vlf-purple-700); color:#fff; }
.ops-ci-banner.on .ops-ci-banner-ic{ background:rgba(31,138,91,.14); color:#1F8A5B; }
.ops-ci-banner.off{ background:rgba(31,138,91,.07); border-color:rgba(31,138,91,.2); }
.ops-ci-banner.off .ops-ci-banner-ic{ background:rgba(31,138,91,.14); color:#1F8A5B; }

/* roster (account) */
.ops-roster{ display:flex; flex-direction:column; gap:11px; }
.ops-roster-p{ display:flex; align-items:center; gap:10px; }
.ops-roster-p .nm{ font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ops-leadbadge{ font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--vlf-gold-700); background:rgba(201,162,75,.16); padding:2px 7px; border-radius:5px; font-style:normal; white-space:nowrap; flex:0 0 auto; }
/* sheet title */
.ops-sheet-title{ font-family:var(--font-display); font-size:18px; font-weight:800; margin-bottom:14px; }

/* toggle switch */
.v-switch{ width:44px; height:26px; border-radius:99px; background:var(--vlf-line); flex:0 0 auto; position:relative; transition:.18s; }
.v-switch.on{ background:var(--vlf-purple-600); }
.v-switch .knob{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:.18s; }
.v-switch.on .knob{ transform:translateX(18px); }
/* add-on row + detail sheet */
.v-addrow{ display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; }
.v-addrow + .v-addrow{ border-top:1px solid var(--vlf-line); }
.v-addrow .ic{ width:40px; height:40px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.v-addrow .t{ display:flex; align-items:center; gap:7px; }
.v-addrow .s{ font-size:11.5px; color:var(--vlf-ink-500); margin-top:2px; }
.v-qbadge{ font-size:10px; font-weight:800; color:var(--vlf-purple-700); background:var(--vlf-purple-100); border-radius:6px; padding:1px 6px; }
.v-add-btn{ flex:0 0 auto; height:34px; padding:0 16px; border-radius:10px; border:1.5px solid var(--vlf-purple-600); background:#fff; color:var(--vlf-purple-700); font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.v-add-btn:active{ background:var(--vlf-purple-50); }
.v-sheet-wrap{ position:absolute; inset:0; z-index:80; background:rgba(22,9,28,.5); display:flex; align-items:flex-end; animation:vFade .2s ease; }
@keyframes vFade{ from{ opacity:0; } }
.v-sheet{ width:100%; background:#fff; border-radius:22px 22px 0 0; padding:10px 18px calc(20px + var(--zalo-safe-bottom)); box-shadow:0 -10px 40px rgba(0,0,0,.3); animation:vUp .26s cubic-bezier(.2,.8,.2,1); }
@keyframes vUp{ from{ transform:translateY(100%); } }
.v-sheet-grip{ width:40px; height:4px; border-radius:99px; background:var(--vlf-line); margin:0 auto 16px; }
/* sale phases */
.v-phases{ display:flex; gap:8px; }
.v-phase{ flex:1; text-align:center; }
.v-phase .dot{ width:26px; height:26px; border-radius:50%; margin:0 auto 6px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; background:var(--vlf-sunk); color:var(--vlf-ink-500); }
.v-phase.on .dot{ background:var(--vlf-gold-500); color:var(--vlf-purple-900); box-shadow:0 0 0 3px rgba(201,162,75,.25); }
.v-phase.done .dot{ background:#3E8E7E; color:#fff; }
.v-phase .nm{ font-size:11.5px; font-weight:700; }
.v-phase.on .nm{ color:var(--vlf-purple-700); }
.v-phase .sb{ font-size:9.5px; color:var(--vlf-ink-500); margin-top:2px; line-height:1.3; }
/* capacity bar */
.v-cap-bar{ height:6px; border-radius:99px; background:var(--vlf-sunk); overflow:hidden; }
.v-cap-bar span{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--vlf-purple-600),var(--vlf-gold-500)); }
.v-logos{ display:flex; gap:8px; }
/* VIP parking pass */
.v-vippass{ overflow:hidden; }
.v-vippass-top{ display:flex; align-items:flex-start; justify-content:space-between; padding:15px 16px; background:linear-gradient(150deg,#522367,#31153D); color:#fff; }
.v-vippass-top .lab{ font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--vlf-gold-300); }
.v-vippass-top .zone{ font-size:14px; font-weight:700; margin-top:3px; }
.v-vippass-bd{ display:flex; align-items:center; gap:16px; padding:16px; }
.v-vippass-meta{ flex:1; display:flex; flex-direction:column; gap:11px; }
.v-vippass-meta .l{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--vlf-ink-500); }
.v-vippass-meta .v{ font-size:14px; font-weight:700; margin-top:1px; }
.v-vippass-foot{ border-top:1px solid var(--vlf-line); padding:11px 16px; font-size:11.5px; color:var(--vlf-ink-500); line-height:1.45; }
.v-tiers{ display:flex; flex-direction:column; gap:8px; }
/* sponsor marquee */
.v-spon{ margin:6px 0 4px; }
.v-spon-lbl{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--vlf-ink-500); margin:0 2px 8px; }
.v-spon-mask{ overflow:hidden; margin:0 -16px; padding:0 16px; }
.v-spon-track{ display:flex; gap:9px; width:max-content; animation:vMarquee 24s linear infinite; }
@keyframes vMarquee{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 4.5px)); } }
.v-spon-item{ flex:0 0 auto; height:46px; padding:0 16px; border-radius:12px; border:1px solid var(--vlf-line); background:#fff; box-shadow:var(--shadow-sm); font-family:inherit; font-size:12.5px; font-weight:700; color:var(--vlf-purple-700); cursor:pointer; white-space:nowrap; }
.v-spon-item:active{ transform:scale(.97); }
@media (prefers-reduced-motion: reduce){ .v-spon-track{ animation:none; } }
.v-logo{ flex:1; min-width:0; min-height:46px; border-radius:11px; border:1px solid var(--vlf-line); background:#fff; display:flex; align-items:center; justify-content:center; text-align:center; padding:6px 7px; }
.v-logo span{ font-size:10px; font-weight:700; color:var(--vlf-ink-700); line-height:1.18; letter-spacing:-.1px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.v-logo.empty{ border-style:dashed; background:var(--vlf-sunk); }
.v-logo.empty span{ color:var(--vlf-ink-500); font-weight:600; }
.v-onboard .v-logo{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
.v-onboard .v-logo span{ color:#fff; }
.v-onboard .v-logo.empty{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.22); }
.v-onboard .v-logo.empty span{ color:rgba(255,255,255,.6); }
.v-spon-kk{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--vlf-gold-300); text-align:center; margin-bottom:9px; }
.v-spon-chip{ flex:0 0 auto; height:38px; padding:0 14px; display:flex; align-items:center; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); font-size:11.5px; font-weight:700; color:#fff; white-space:nowrap; }
/* sponsor strip trên tabbar */
.v-spon-strip{ position:absolute; left:0; right:0; bottom:calc(60px + var(--zalo-safe-bottom)); height:30px; overflow:hidden; z-index:59; background:var(--glass); backdrop-filter:blur(18px); border-top:1px solid var(--vlf-line); display:flex; align-items:center; }
.v-spon-strip-track{ display:flex; gap:22px; width:max-content; padding:0 16px; animation:vMarquee 22s linear infinite; }
.v-spon-strip-item{ font-size:10.5px; font-weight:700; letter-spacing:.02em; color:var(--vlf-ink-500); white-space:nowrap; cursor:pointer; }
@media (prefers-reduced-motion: reduce){ .v-spon-strip-track{ animation:none; } }
/* chừa chỗ cho dải sponsor + tabbar trên màn L1 */
.za-frame[data-variant="home"] .za-content > .v-screen{ padding-bottom:calc(94px + var(--zalo-safe-bottom)) !important; }

/* empty state */
.v-empty{ text-align:center; padding:40px 24px; color:var(--vlf-ink-500); }
.v-empty .ic{ width:60px; height:60px; border-radius:18px; margin:0 auto 14px; background:var(--vlf-sunk);
  display:flex; align-items:center; justify-content:center; color:var(--vlf-ink-500); }

/* urgent home banner */
.v-alert{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:14px; cursor:pointer; margin-bottom:4px;
  background:rgba(192,57,43,.08); border:1px solid rgba(192,57,43,.28); }
.v-alert .ic{ width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--vlf-under); color:#fff; }
.v-alert .t{ font-size:13px; font-weight:700; color:var(--vlf-under); }
.v-alert .s{ font-size:11.5px; color:var(--vlf-ink-700); margin-top:1px; }
.v-alert button{ width:28px; height:28px; border-radius:8px; border:none; background:transparent; color:var(--vlf-under); flex:0 0 auto; display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* search input */
.v-search input{ flex:1; border:none; background:none; outline:none; font-family:inherit; font-size:14px; color:var(--vlf-ink-900); }
.v-search input::placeholder{ color:var(--vlf-ink-500); }
.v-empty .t{ font-size:15px; font-weight:600; color:var(--vlf-ink-900); }
.v-empty .s{ font-size:12.5px; margin-top:5px; line-height:1.5; }

/* ============================================================
   DEMO PANEL (trái) — điều khiển stakeholder demo
   ============================================================ */
#vlf-stage{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; gap:50px; padding:24px; }
.vlf-panel{ width:312px; flex:0 0 auto; color:#efe6f2; align-self:center; max-height:94vh; overflow-y:auto; padding-right:4px; }
.vlf-panel::-webkit-scrollbar{ width:0; }
.vlf-panel .kk{ font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--vlf-gold-300); margin-bottom:8px; }
.vlf-panel h1{ font-family:var(--font-display); font-size:27px; font-weight:800; line-height:1.1; letter-spacing:-.4px; margin:0 0 11px; }
.vlf-panel h1 em{ font-style:italic; color:var(--vlf-gold-300); }
.vlf-panel p.lede{ font-size:13px; line-height:1.55; color:#c8b8d0; margin:0 0 22px; }
.vlf-panel p.lede b{ color:#fff; font-weight:600; }
.vlf-grp{ margin-bottom:20px; }
.vlf-grp > .lbl{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#b89dc4; margin-bottom:9px; }
.vlf-seg{ display:flex; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:11px; padding:3px; gap:3px; }
.vlf-seg button{ flex:1; border:none; background:none; color:#d7c6df; font-family:inherit; font-size:12px; font-weight:600; padding:9px 4px; border-radius:8px; cursor:pointer; transition:.15s; }
.vlf-seg button.on{ background:#fff; color:var(--vlf-purple-800); box-shadow:0 1px 4px rgba(0,0,0,.25); }
.vlf-seg button small{ display:block; font-size:9.5px; font-weight:500; opacity:.7; margin-top:1px; }
.vlf-note{ font-size:11px; line-height:1.55; color:#b6a0c2; background:rgba(0,0,0,.22); border-radius:11px; padding:12px 13px; }
.vlf-note b{ color:#e3d2ec; }
.vlf-note code{ font-family:var(--font-mono); font-size:10px; color:#e8cd8b; background:rgba(255,255,255,.06); padding:1px 4px; border-radius:4px; }
.vlf-scaler{ transform-origin:center center; flex:0 0 auto; }

@media (max-width:920px){ .vlf-panel{ display:none; } #vlf-stage{ gap:0; padding:0; } }

/* ============================================================
   OPS · GANTT / LỊCH ĐIỀU PHỐI · COMMENT · FEED · ĐƠN TỪ
   ============================================================ */
/* view toggle + person filter trong tab Nhiệm vụ */
.ops-viewseg{ display:flex; gap:4px; background:var(--vlf-sunk); border-radius:11px; padding:3px; margin-bottom:10px; }
.ops-viewseg button{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; border:none; background:none; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--vlf-ink-500); padding:9px 4px; border-radius:8px; cursor:pointer; transition:.15s; }
.ops-viewseg button.on{ background:#fff; color:var(--vlf-purple-700); box-shadow:var(--shadow-sm); }
.ops-personfilter{ display:flex; gap:7px; overflow-x:auto; padding:2px 0 4px; margin-bottom:4px; -ms-overflow-style:none; scrollbar-width:none; }
.ops-personfilter::-webkit-scrollbar{ display:none; }
.ops-pf{ flex:0 0 auto; height:32px; padding:0 12px; border-radius:99px; border:1px solid var(--vlf-line); background:#fff; font-family:inherit; font-size:12px; font-weight:600; color:var(--vlf-ink-700); cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.ops-pf.on{ border-color:var(--vlf-purple-600); color:var(--vlf-purple-700); background:var(--vlf-purple-50); }
.ops-pf-person{ padding-left:5px; }

/* gantt */
.ops-gantt-wrap{ margin-top:4px; }
.ops-gantt-hint{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--vlf-ink-500); margin-bottom:8px; }
.ops-gantt-hint svg{ color:var(--vlf-gold-700); flex:0 0 auto; }
.ops-gantt-scroll{ overflow-x:auto; overflow-y:hidden; border-radius:16px; border:1px solid var(--vlf-line); background:#fff; box-shadow:var(--shadow-sm); -ms-overflow-style:none; scrollbar-width:thin; }
.ops-gantt-scroll::-webkit-scrollbar{ height:7px; }
.ops-gantt-scroll::-webkit-scrollbar-thumb{ background:var(--vlf-line); border-radius:99px; }
.ops-gantt-track{ position:relative; padding:0; }
.ops-gantt-scale{ position:relative; height:26px; border-bottom:1px solid var(--vlf-line); }
.ops-gantt-tick{ position:absolute; top:7px; transform:translateX(-2px); font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--vlf-ink-500); }
.ops-gantt-grid{ position:absolute; top:26px; bottom:0; left:0; right:0; pointer-events:none; }
.ops-gantt-grid span{ position:absolute; top:0; bottom:0; width:1px; background:var(--vlf-line); opacity:.5; }
.ops-gantt-now{ position:absolute; top:18px; bottom:0; width:2px; background:var(--vlf-gold-500); z-index:5; pointer-events:none; }
.ops-gantt-now span{ position:absolute; top:-15px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:9px; font-weight:800; color:var(--vlf-purple-900); background:var(--vlf-gold-500); padding:1px 5px; border-radius:5px; white-space:nowrap; }
.ops-gantt-rows{ position:relative; padding:8px 0; }
.ops-gantt-row{ position:relative; height:46px; }
.ops-gbar{ position:absolute; top:7px; height:32px; border-radius:9px; display:flex; align-items:center; gap:5px; padding:0 9px; cursor:pointer; overflow:hidden; box-sizing:border-box; }
.ops-gbar .ops-gbar-tx{ font-size:11.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ops-gbar .ops-gbar-meta{ font-family:var(--font-mono); font-size:9px; font-weight:600; opacity:.8; flex:0 0 auto; white-space:nowrap; }
.ops-gbar.st-doing{ background:var(--tc); color:#fff; box-shadow:0 0 0 2px rgba(201,162,75,.4); }
.ops-gbar.st-todo{ background:color-mix(in srgb, var(--tc) 14%, #fff); color:var(--tc); border:1.4px solid color-mix(in srgb, var(--tc) 45%, #fff); }
.ops-gbar.st-done{ background:color-mix(in srgb, var(--tc) 38%, #fff); color:#fff; opacity:.85; }
.ops-gbar.st-done .ops-gbar-tx{ text-decoration:line-through; opacity:.92; }
.ops-gbar svg{ flex:0 0 auto; }
.ops-gantt-legend{ display:flex; gap:16px; justify-content:center; margin-top:11px; font-size:11px; color:var(--vlf-ink-500); }
.ops-gantt-legend span{ display:flex; align-items:center; gap:6px; }
.ops-gantt-legend .lg{ width:16px; height:11px; border-radius:4px; }
.ops-gantt-legend .lg.solid{ background:var(--vlf-purple-600); box-shadow:0 0 0 2px rgba(201,162,75,.4); }
.ops-gantt-legend .lg.todo{ background:var(--vlf-purple-50); border:1.4px solid var(--vlf-purple-300, #c9b3d6); }
.ops-gantt-legend .lg.done{ background:color-mix(in srgb, var(--vlf-purple-600) 38%, #fff); }

/* comments theo task */
.ops-cmts{ padding:6px 14px; }
.ops-cmt-thread + .ops-cmt-thread{ border-top:1px solid var(--vlf-line); padding-top:11px; margin-top:11px; }
.ops-cmt{ display:flex; gap:10px; padding:7px 0; }
.ops-cmt.reply{ margin-left:30px; }
.ops-cmt-b{ flex:1; min-width:0; }
.ops-cmt-head{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ops-cmt-head b{ font-size:13px; font-weight:700; }
.ops-cmt-head .at{ font-size:10.5px; color:var(--vlf-ink-500); font-family:var(--font-mono); }
.ops-cmt-tx{ font-size:13px; line-height:1.5; color:var(--vlf-ink-900); margin-top:3px; }
.ops-cmt-reply{ border:none; background:none; padding:4px 0 0; font-family:inherit; font-size:11.5px; font-weight:700; color:var(--vlf-purple-700); cursor:pointer; }
.ops-mentions{ display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
.ops-mention{ font-size:10.5px; font-weight:700; color:var(--vlf-purple-700); background:var(--vlf-purple-50); padding:1px 7px; border-radius:6px; }
/* compose */
.ops-cmt-compose{ margin-top:10px; background:#fff; border:1px solid var(--vlf-line); border-radius:14px; padding:11px 12px; box-shadow:var(--shadow-sm); }
.ops-cmt-replybar{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--vlf-ink-700); background:var(--vlf-sunk); border-radius:8px; padding:5px 9px; margin-bottom:8px; }
.ops-cmt-replybar button{ margin-left:auto; border:none; background:none; color:var(--vlf-ink-500); font-size:13px; cursor:pointer; }
.ops-cmt-mrow{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:9px; }
.ops-cmt-mrow .lbl{ font-size:11px; font-weight:700; color:var(--vlf-ink-500); }
.ops-mchip{ height:27px; padding:0 9px; border-radius:99px; border:1px solid var(--vlf-line); background:#fff; font-family:inherit; font-size:11px; font-weight:600; color:var(--vlf-ink-700); cursor:pointer; }
.ops-mchip.on{ border-color:var(--vlf-purple-600); color:var(--vlf-purple-700); background:var(--vlf-purple-50); }
.ops-cmt-inrow{ display:flex; gap:8px; align-items:center; }
.ops-cmt-inrow .ops-input{ flex:1; margin:0; }
.ops-cmt-send{ width:40px; height:40px; flex:0 0 auto; border-radius:11px; border:none; background:var(--vlf-purple-700); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ops-cmt-send:active{ opacity:.8; }

/* feed trao đổi & nhắc tên */
.ops-feed-row{ align-items:flex-start; }
.ops-feed-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ops-feed-top b{ font-size:13px; font-weight:700; }
.ops-feed-reply{ font-size:10.5px; color:var(--vlf-ink-500); }
.ops-feed-at{ font-size:10.5px; color:var(--vlf-ink-500); font-family:var(--font-mono); margin-left:auto; }
.ops-feed-tx{ font-size:13px; line-height:1.5; color:var(--vlf-ink-900); margin-top:3px; }
.ops-feed-task{ display:flex; align-items:center; gap:7px; margin-top:7px; }
.ops-feed-task span{ font-size:11.5px; color:var(--vlf-ink-500); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ops-feed-entry{ display:flex; align-items:center; gap:13px; padding:14px; cursor:pointer; }
.ops-feed-entry .t{ font-size:14px; font-weight:700; }
.ops-feed-entry .s{ font-size:12px; color:var(--vlf-ink-500); margin-top:2px; }

/* đơn từ */
.ops-newreq-btn{ height:46px; }
.ops-req + .ops-req{ border-top:1px solid var(--vlf-line); }
.ops-req{ padding:14px; }
.ops-req-main{ display:flex; gap:12px; }
.ops-req-ic{ width:40px; height:40px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--vlf-purple-50); color:var(--vlf-purple-700); }
.ops-req-top{ display:flex; align-items:center; gap:8px; justify-content:space-between; }
.ops-req-top b{ font-size:14px; font-weight:700; }
.ops-req-who{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--vlf-ink-700); margin-top:5px; flex-wrap:wrap; }
.ops-req-when{ font-size:12px; font-weight:600; color:var(--vlf-ink-900); margin-top:4px; }
.ops-req-reason{ font-size:12.5px; color:var(--vlf-ink-700); line-height:1.45; margin-top:3px; }
.ops-req-cover{ font-size:11.5px; color:var(--vlf-ink-500); margin-top:5px; }
.ops-req-cover b{ color:var(--vlf-ink-900); }
.ops-req-act{ display:flex; gap:9px; margin-top:12px; }
.ops-req-act .v-btn{ height:40px; font-size:13px; }
.ops-req-by{ font-size:11px; color:var(--vlf-ink-500); margin-top:9px; }
.ops-reqtypes{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ops-reqtype{ display:flex; align-items:center; gap:8px; padding:12px; border-radius:13px; border:1.4px solid var(--vlf-line); background:#fff; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--vlf-ink-700); cursor:pointer; text-align:left; }
.ops-reqtype svg{ flex:0 0 auto; color:var(--vlf-ink-500); }
.ops-reqtype.on{ border-color:var(--vlf-purple-600); color:var(--vlf-purple-700); background:var(--vlf-purple-50); }
.ops-reqtype.on svg{ color:var(--vlf-purple-700); }
.ops-sop-note{ display:flex; gap:9px; align-items:flex-start; padding:12px 13px; border-radius:13px; background:rgba(201,162,75,.1); font-size:12px; line-height:1.5; color:var(--vlf-ink-700); margin:14px 0; }
.ops-sop-note svg{ color:var(--vlf-gold-700); flex:0 0 auto; margin-top:1px; }
.ops-sop-note b{ color:var(--vlf-ink-900); }
.ops-textarea{ min-height:74px; padding-top:11px; resize:none; line-height:1.5; }

/* ============ DEADLINE · FOCUS · REPORT (cập nhật + ảnh) ============ */
/* chip hạn chót */
.ops-dl{ display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:99px; font-size:11px; font-weight:700; }
.ops-dl.big{ font-size:12.5px; padding:6px 12px; }
.ops-dl b{ font-family:var(--font-mono); font-weight:700; }
.ops-dl-left{ font-weight:600; opacity:.85; }
.ops-dl.pulse{ animation:ops-dlpulse 1.6s ease-in-out infinite; }
@keyframes ops-dlpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(192,57,43,.32); } 50%{ box-shadow:0 0 0 4px rgba(192,57,43,0); } }
.ops-td-dlrow{ margin-top:12px; }

/* badge TRỄ / sắp tới hạn trong list */
.ops-tr-late{ display:inline-flex; align-items:center; gap:3px; font-size:9.5px; font-weight:800; letter-spacing:.05em; color:#fff; background:var(--vlf-under); padding:2px 6px 2px 5px; border-radius:5px; }
.ops-tr-soon{ font-size:10px; font-weight:700; color:var(--vlf-gold-700); background:rgba(201,162,75,.16); padding:2px 7px; border-radius:5px; }
.ops-taskrow--late{ position:relative; }
.ops-taskrow--late::before{ content:''; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--vlf-under); }
.ops-sf-late.on{ background:rgba(192,57,43,.1); color:var(--vlf-under); border-color:rgba(192,57,43,.25); }
.ops-sf-late b{ color:var(--vlf-under); }

/* focus banner */
.ops-focus{ display:flex; align-items:center; gap:11px; padding:12px 13px; border-radius:14px; margin:13px 0 2px; border:1px solid var(--vlf-line); background:var(--vlf-paper); box-shadow:var(--shadow-sm); }
.ops-focus.overdue{ background:rgba(192,57,43,.06); border-color:rgba(192,57,43,.2); }
.ops-focus.done{ background:rgba(31,138,91,.07); border-color:rgba(31,138,91,.2); }
.ops-focus-ic{ width:36px; height:36px; flex:0 0 auto; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--vlf-purple-50); color:var(--vlf-purple-700); }
.ops-focus.done .ops-focus-ic{ background:rgba(31,138,91,.14); color:#1F8A5B; }
.ops-focus-b{ flex:1; min-width:0; }
.ops-focus-b .lbl{ font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--vlf-ink-500); display:flex; flex-wrap:wrap; gap:5px; align-items:baseline; }
.ops-focus-dl{ font-weight:700; letter-spacing:0; text-transform:none; }
.ops-focus-b .now{ font-size:13.5px; font-weight:700; color:var(--vlf-ink-900); margin-top:3px; line-height:1.35; }
.ops-focus-go{ flex:0 0 auto; height:36px; padding:0 14px; border-radius:99px; border:none; background:var(--vlf-purple-700); color:#fff; font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.ops-focus.overdue .ops-focus-go{ background:var(--vlf-under); }
.ops-focus-go:active{ opacity:.85; }

/* mốc hoàn thành */
.ops-doneStamp{ display:flex; align-items:center; gap:8px; margin:9px 0 2px; padding:9px 12px; border-radius:11px; background:rgba(31,138,91,.1); color:#1F8A5B; font-size:12.5px; font-weight:600; }
.ops-doneStamp b{ font-family:var(--font-mono); font-weight:700; }

/* compose báo cáo */
.ops-report-compose{ padding:12px; }
.ops-report-note{ height:auto; min-height:58px; padding:11px 13px; resize:none; line-height:1.5; }
.ops-report-thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ops-report-thumb{ position:relative; width:62px; height:62px; border-radius:11px; overflow:hidden; }
.ops-report-thumb img{ width:100%; height:100%; object-fit:cover; cursor:pointer; display:block; }
.ops-report-thumb .rm{ position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; border:none; background:rgba(14,10,17,.66); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.ops-report-actions{ display:flex; gap:9px; margin-top:11px; }
.ops-report-attach{ flex:1; height:42px; border-radius:12px; border:1.4px dashed var(--vlf-borderStrong,var(--vlf-line)); background:var(--vlf-sunk); font-family:inherit; font-size:12.5px; font-weight:700; color:var(--vlf-ink-700); display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; }
.ops-report-attach:active{ opacity:.8; }
.ops-report-send{ flex:0 0 auto; height:42px; padding:0 16px; border-radius:12px; border:none; background:var(--vlf-purple-700); color:#fff; font-family:inherit; font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:6px; cursor:pointer; }
.ops-report-send.off{ background:var(--vlf-line); color:var(--vlf-ink-500); }
.ops-report-send:active{ opacity:.85; }

/* lịch sử báo cáo */
.ops-report-log{ margin-top:10px; }
.ops-report-item{ display:flex; gap:11px; padding:13px 0; }
.ops-report-item + .ops-report-item{ border-top:1px solid var(--vlf-line); }
.ops-report-body{ flex:1; min-width:0; }
.ops-report-head{ display:flex; align-items:center; gap:8px; }
.ops-report-head b{ font-size:13px; font-weight:700; }
.ops-report-head .at{ font-size:10.5px; color:var(--vlf-ink-500); font-family:var(--font-mono); margin-left:auto; }
.ops-report-tx{ font-size:13px; line-height:1.5; color:var(--vlf-ink-900); margin-top:4px; }
.ops-report-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:9px; }
.ops-report-cell{ aspect-ratio:1; border-radius:10px; overflow:hidden; border:none; padding:0; cursor:pointer; background:var(--vlf-sunk); }
.ops-report-cell img{ width:100%; height:100%; object-fit:cover; display:block; }

/* lightbox xem ảnh */
.ops-lightbox{ position:absolute; inset:0; z-index:60; background:rgba(14,10,17,.92); display:flex; align-items:center; justify-content:center; padding:24px; animation:ops-fadein .18s ease; }
.ops-lightbox img{ max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 16px 50px rgba(0,0,0,.5); }
.ops-lightbox-x{ position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
@keyframes ops-fadein{ from{ opacity:0; } to{ opacity:1; } }

/* ============ LỊCH TUẦN · CHỌN NGÀY · 3-VIEW ============ */
.ops-viewseg-3 button{ font-size:12px; gap:5px; padding:0 2px; }
.ops-viewseg-3 button svg{ flex:0 0 auto; }

/* dải chọn ngày */
.ops-daystrip{ display:flex; gap:6px; overflow-x:auto; padding:2px 0 4px; margin:2px 0 4px; -ms-overflow-style:none; scrollbar-width:none; }
.ops-daystrip::-webkit-scrollbar{ display:none; }
.ops-daychip{ flex:0 0 auto; min-width:46px; padding:5px 11px; border-radius:11px; border:1px solid var(--vlf-line); background:var(--vlf-paper); font-family:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:1px; line-height:1.1; color:var(--vlf-ink-700); }
.ops-daychip .dw{ font-size:9.5px; font-weight:700; color:var(--vlf-ink-500); letter-spacing:.03em; }
.ops-daychip b{ font-size:15px; font-weight:800; font-family:var(--font-display); }
.ops-daychip.today{ border-color:var(--vlf-gold-500); }
.ops-daychip.today .dw{ color:var(--vlf-gold-700); }
.ops-daychip.on{ background:var(--vlf-purple-700); border-color:var(--vlf-purple-700); color:#fff; }
.ops-daychip.on .dw{ color:rgba(255,255,255,.8); }

/* tuần */
.ops-week{ margin-top:4px; }
.ops-wkday{ border:1px solid var(--vlf-line); border-radius:16px; background:var(--vlf-paper); padding:13px; margin-bottom:11px; box-shadow:var(--shadow-sm); }
.ops-wkday.past{ opacity:.78; }
.ops-wkday.today{ border-color:var(--vlf-purple-300); box-shadow:0 0 0 1.5px var(--vlf-purple-300), var(--shadow-sm); }
.ops-wkday-head{ display:flex; align-items:center; gap:12px; }
.ops-wkday-date{ width:46px; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6px 0; border-radius:12px; background:var(--vlf-sunk); line-height:1; }
.ops-wkday.today .ops-wkday-date{ background:var(--vlf-purple-700); color:#fff; }
.ops-wkday-date .dow{ font-size:10px; font-weight:700; color:var(--vlf-ink-500); }
.ops-wkday.today .ops-wkday-date .dow{ color:rgba(255,255,255,.82); }
.ops-wkday-date .dd{ font-size:22px; font-weight:800; font-family:var(--font-display); margin-top:1px; }
.ops-wkday-meta{ flex:1; min-width:0; }
.ops-wkday-meta .th{ font-size:14px; font-weight:700; color:var(--vlf-ink-900); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ops-wkday-now{ font-size:9px; font-weight:800; letter-spacing:.06em; color:#fff; background:var(--vlf-gold-600); padding:2px 6px; border-radius:5px; }
.ops-wkday-meta .sub{ font-size:11.5px; color:var(--vlf-ink-500); margin-top:3px; font-weight:600; }
.ops-wkday-gantt{ flex:0 0 auto; align-self:flex-start; display:inline-flex; align-items:center; gap:4px; height:28px; padding:0 10px; border-radius:99px; border:1px solid var(--vlf-line); background:var(--vlf-paper); font-family:inherit; font-size:11px; font-weight:700; color:var(--vlf-purple-700); cursor:pointer; }
.ops-wkday-gantt:active{ opacity:.8; }
.ops-wkday-list{ margin-top:11px; display:flex; flex-direction:column; }
.ops-wktask{ display:flex; align-items:center; gap:9px; padding:8px 0; cursor:pointer; }
.ops-wktask + .ops-wktask{ border-top:1px solid var(--vlf-line); }
.ops-wktask-tm{ flex:0 0 auto; width:52px; font-family:var(--font-mono); font-size:10.5px; font-weight:600; color:var(--vlf-ink-500); text-align:left; }
.ops-wktask-bar{ flex:0 0 auto; width:3px; align-self:stretch; min-height:18px; border-radius:3px; }
.ops-wktask-tx{ flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--vlf-ink-900); display:flex; align-items:center; gap:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ops-wktask-dot{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; }


/* ============================================================
   SAU GIẢI (phase 'post') — Results · Gallery · Photos · Cert
   ============================================================ */

/* two-button row */
.v-2btn{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.v-2btn .v-btn{ height:48px; font-size:12.5px; letter-spacing:.04em; }

/* podium top-3 */
.v-podium{ display:grid; grid-template-columns:1fr 1.2fr 1fr; align-items:end; gap:8px; margin:18px 0 6px; }
.v-pod{ display:flex; flex-direction:column; align-items:center; text-align:center; cursor:pointer; }
.v-pod .rk{ font-size:13px; font-weight:800; color:#fff; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:8px 0 2px; background:var(--vlf-purple-500); }
.v-pod-1 .rk{ background:var(--vlf-gold-500); color:var(--vlf-purple-900); }
.v-pod .nm{ font-size:12px; font-weight:700; color:var(--vlf-ink-900); line-height:1.2; margin-top:2px; max-width:11ch; }
.v-pod .bar{ width:100%; border-radius:10px 10px 0 0; margin-top:8px; background:linear-gradient(180deg,var(--vlf-purple-100),var(--vlf-sunk)); }
.v-pod-1 .bar{ height:46px; background:linear-gradient(180deg,rgba(201,162,75,.45),rgba(201,162,75,.12)); }
.v-pod-2 .bar{ height:34px; }
.v-pod-3 .bar{ height:24px; }

/* charity card */
.v-charity{ overflow:hidden; padding:0; }
.v-charity .v-qr-head{ padding:14px 16px; }
.v-charity .v-qr-head .t{ color:var(--vlf-purple-900); font-weight:800; font-size:13px; }
.v-charity .v-qr-head .s{ color:rgba(31,13,38,.7); font-size:11px; margin-top:2px; max-width:22ch; }

/* find-my-photos feature row */
.v-find{ display:flex; align-items:center; gap:13px; padding:15px 16px; border-radius:18px; cursor:pointer;
  background:linear-gradient(135deg,var(--vlf-purple-600),var(--vlf-purple-800)); color:#fff; box-shadow:var(--shadow-md); }
.v-find .ic{ width:44px; height:44px; border-radius:13px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.14); }
.v-find .t{ font-weight:700; font-size:14.5px; }
.v-find .s{ font-size:11.5px; color:rgba(255,255,255,.78); margin-top:2px; }
.v-find:active{ transform:translateY(1px); }

/* album grid */
.v-album-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.v-album{ cursor:pointer; }
.v-album .cover{ position:relative; aspect-ratio:4 / 3; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); }
.v-album .cover::before{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(125deg,rgba(255,255,255,.05) 0 2px,transparent 2px 20px); }
.v-album .cover .cnt{ position:absolute; right:8px; bottom:7px; font-size:11px; font-weight:700; color:#fff; background:rgba(0,0,0,.34); border-radius:8px; padding:2px 8px; backdrop-filter:blur(2px); }
.v-album:active .cover{ transform:scale(.98); transition:transform .14s var(--water); }
.v-album .nm{ font-size:13px; font-weight:700; color:var(--vlf-ink-900); margin-top:8px; line-height:1.25; }
.v-album .dt{ font-size:11px; color:var(--vlf-ink-500); margin-top:1px; }

/* photo grid + tiles */
.v-photo-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; }
.v-photo{ position:relative; border-radius:11px; overflow:hidden; display:flex; align-items:flex-end; }
.v-photo::before{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(125deg,rgba(255,255,255,.06) 0 2px,transparent 2px 16px); }
.v-photo-ic{ position:absolute; top:8px; left:8px; color:rgba(255,255,255,.45); }
.v-photo-cap{ position:relative; z-index:1; font-size:9.5px; font-weight:600; color:rgba(255,255,255,.82); padding:7px 8px; font-family:var(--font-mono); }
.v-photo-wrap{ position:relative; }
.v-photo-dl{ position:absolute; right:6px; bottom:6px; width:28px; height:28px; border-radius:9px; border:none; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--vlf-purple-700); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.v-photo-dl:active{ transform:scale(.92); }

/* face scan */
.v-scan{ position:relative; width:150px; height:150px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--vlf-purple-400,#8A5CA5); background:var(--vlf-purple-50); border:2px dashed var(--vlf-purple-200,#C9A9D6); overflow:hidden; }
.v-scan.on{ color:var(--vlf-purple-700); border-style:solid; border-color:var(--vlf-purple-500); }
.v-scan-line{ position:absolute; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,var(--vlf-gold-500),transparent); box-shadow:0 0 12px 2px rgba(201,162,75,.6); animation:vScan 1.5s ease-in-out infinite; }
@keyframes vScan{ 0%{ top:8%; } 50%{ top:90%; } 100%{ top:8%; } }
.v-chip-row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

/* found header */
.v-found{ display:flex; align-items:center; gap:14px; padding:15px; border-radius:16px; background:#fff; border:1px solid var(--vlf-line); box-shadow:var(--shadow-sm); }
.v-found .big{ font-size:34px; font-weight:800; color:var(--vlf-purple-700); line-height:1; flex:0 0 auto; }
.v-found .t{ font-size:14px; font-weight:700; color:var(--vlf-ink-900); }
.v-found .s{ font-size:12px; color:var(--vlf-ink-500); margin-top:2px; }

/* play button on feature/replay */
.v-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--vlf-purple-800); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.3); }
.v-play.sm{ position:static; transform:none; width:34px; height:34px; box-shadow:none; }

/* highlight clips */
.v-clips{ display:flex; flex-direction:column; gap:12px; }
.v-clip{ display:flex; gap:12px; align-items:center; }
.v-clip .thumb{ position:relative; width:104px; aspect-ratio:16 / 10; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:var(--shadow-sm); }
.v-clip .thumb::before{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(125deg,rgba(255,255,255,.05) 0 2px,transparent 2px 18px); }
.v-clip .thumb .dur{ position:absolute; right:6px; bottom:5px; font-size:10px; font-weight:700; color:#fff; background:rgba(0,0,0,.4); border-radius:6px; padding:1px 6px; }
.v-clip .t{ font-size:13.5px; font-weight:600; color:var(--vlf-ink-900); line-height:1.3; }
.v-clip .s{ font-size:11.5px; font-weight:700; margin-top:3px; letter-spacing:.02em; }

/* certificate */
.v-cert{ position:relative; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-md); background:linear-gradient(160deg,#34163F,#1F0D26); padding:5px; }
.v-cert-edge{ position:absolute; inset:9px; border:1.5px solid rgba(201,162,75,.5); border-radius:13px; pointer-events:none; }
.v-cert-in{ position:relative; text-align:center; padding:26px 22px 24px; color:#fff; }
.v-cert-in svg{ width:34px; height:34px; margin:0 auto; }
.v-cert-in .ev{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--vlf-gold-300); margin-top:12px; }
.v-cert-in .badge{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.66); margin-top:14px; }
.v-cert-in .nm{ font-size:25px; font-weight:800; margin-top:5px; }
.v-cert-in .line{ font-size:12.5px; color:rgba(255,255,255,.8); margin-top:8px; line-height:1.5; max-width:30ch; margin-left:auto; margin-right:auto; }
.v-cert-in .meta{ font-size:10.5px; color:rgba(255,255,255,.55); margin-top:12px; letter-spacing:.02em; }
.v-cert-score{ display:flex; justify-content:center; gap:26px; margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); }
.v-cert-score > div{ display:flex; flex-direction:column; }
.v-cert-score b{ font-size:19px; font-weight:800; color:var(--vlf-gold-300); }
.v-cert-score span{ font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:3px; }
.v-cert-in .seal{ width:46px; height:46px; border-radius:50%; border:1.5px solid rgba(201,162,75,.6); color:var(--vlf-gold-300); display:flex; align-items:center; justify-content:center; margin:18px auto 0; }

/* scorecard mini */
.v-scrow{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1.1fr; align-items:center; padding:11px 12px; }
.v-scrow + .v-scrow{ border-top:1px solid var(--vlf-line); }
.v-scrow.head{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--vlf-ink-500); }
.v-scrow span{ text-align:center; font-size:14px; }
.v-scrow span:first-child{ text-align:left; font-size:12.5px; font-weight:600; color:var(--vlf-ink-700); }
.v-scrow.head span:first-child{ color:var(--vlf-ink-500); }

/* survey star rating rows */
.v-rate{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; }
.v-rate + .v-rate{ border-top:1px solid var(--vlf-line); }
.v-rate .lbl{ font-size:13.5px; font-weight:600; color:var(--vlf-ink-900); line-height:1.3; }
.v-rate .stars{ display:flex; gap:3px; flex:0 0 auto; }
.v-rate .st{ border:none; background:none; padding:1px; cursor:pointer; color:var(--vlf-line); line-height:0; }
.v-rate .st.on{ color:var(--vlf-gold-500); }
.v-rate .st:active{ transform:scale(.85); }

/* register-interest 2027 banner */
.v-next{ border-radius:18px; padding:18px; cursor:pointer; color:#fff; box-shadow:var(--shadow-md);
  background:radial-gradient(120% 100% at 88% 0%, rgba(201,162,75,.28), transparent 58%), linear-gradient(150deg,var(--vlf-purple-700),var(--vlf-purple-900)); }
.v-next .h{ font-size:19px; font-weight:800; line-height:1.15; }
.v-next .s{ font-size:12.5px; color:rgba(255,255,255,.78); margin-top:6px; line-height:1.5; max-width:34ch; }
.v-next:active{ transform:translateY(1px); }

/* ---- consistent intro band for post utility screens ---- */
.v-post-intro{ display:flex; align-items:flex-start; gap:12px; margin:4px 0 16px; }
.v-post-intro .ic{ width:42px; height:42px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--vlf-purple-50); color:var(--vlf-purple-700); }
.v-post-intro .t{ font-family:var(--font-serif); font-size:19px; font-weight:800; letter-spacing:.01em; color:var(--vlf-ink-900); line-height:1.15; }
.v-post-intro .s{ font-size:12px; color:var(--vlf-ink-500); margin-top:4px; line-height:1.5; max-width:36ch; }

/* ---- survey: per-category rating + dynamic reasons + comment ---- */
.v-survey-prog{ font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--vlf-purple-600); margin:0 2px 12px; }
.v-rate-card{ background:#fff; border:1px solid var(--vlf-line); border-radius:16px; box-shadow:var(--shadow-sm); padding:14px 15px; margin-bottom:12px; transition:border-color .18s ease; }
.v-rate-card.rated{ border-color:var(--vlf-purple-200,#D8C2E2); }
.v-rate-card .top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.v-rate-card .lbl{ font-size:14px; font-weight:700; color:var(--vlf-ink-900); line-height:1.3; }
.v-rate-card .stars{ display:flex; gap:3px; flex:0 0 auto; }
.v-rate-card .stars .st{ border:none; background:none; padding:1px; cursor:pointer; color:var(--vlf-line); line-height:0; transition:transform .1s ease; }
.v-rate-card .stars .st.on{ color:var(--vlf-gold-500); }
.v-rate-card .stars .st:active{ transform:scale(.84); }
.v-rate-card .reasons{ margin-top:13px; padding-top:13px; border-top:1px solid var(--vlf-line); animation:vReason .26s cubic-bezier(.22,1,.36,1) both; }
@keyframes vReason{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.v-rate-card .rh{ display:flex; align-items:center; justify-content:space-between; font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; margin-bottom:10px; }
.v-rate-card .rh.good{ color:#1F8A5B; }
.v-rate-card .rh.bad{ color:var(--vlf-gold-700); }
.v-rate-card .rh.mixed{ color:var(--vlf-purple-600); }
.v-rate-card .rh span{ font-size:9.5px; font-weight:600; letter-spacing:.02em; text-transform:none; color:var(--vlf-ink-500); }
.v-rate-card .chips{ display:flex; flex-wrap:wrap; gap:7px; }
.rchip{ display:inline-flex; align-items:center; gap:5px; border:1px solid var(--vlf-line); background:var(--vlf-paper); border-radius:999px; padding:7px 12px;
  font-family:inherit; font-size:12px; font-weight:600; color:var(--vlf-ink-700); cursor:pointer; transition:.14s; line-height:1; }
.rchip:active{ transform:scale(.95); }
.rchip.good.on{ background:rgba(31,138,91,.12); border-color:rgba(31,138,91,.5); color:#157A4F; }
.rchip.bad.on{ background:rgba(201,162,75,.16); border-color:rgba(201,162,75,.55); color:var(--vlf-gold-700); }
.v-comment{ width:100%; border:1px solid var(--vlf-line); border-radius:14px; background:#fff; padding:13px 14px; font-family:inherit; font-size:13.5px; color:var(--vlf-ink-900); line-height:1.5; resize:none; box-shadow:var(--shadow-sm); }
.v-comment:focus{ outline:none; border-color:var(--vlf-purple-500); }
.v-comment::placeholder{ color:var(--vlf-ink-500); }
.v-stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; overflow:visible; margin:0; padding:0; }
.v-stats-grid .v-stat{ flex:none; }

/* ============================================================
   UI/UX POLISH — bám sát Restyle tokens
   spacing 8pt (s8·m16·l24) · radius s6/m10/l16/full · pill button
   Mục tiêu: nhịp dọc đều cho thanh điều khiển Bảng nhiệm vụ,
   chip dạng pill, card bo l(16) padding m(16), bớt rối thị giác.
   ============================================================ */
/* — thanh điều khiển: nhịp dọc 8px đồng nhất — */
.ops-viewseg{ margin-bottom:8px; border-radius:12px; }
.ops-scopebar{ gap:8px; margin:0 0 8px; }
.ops-teampick{ padding:0; margin:0 0 8px; gap:8px; }
.ops-daystrip{ gap:8px; margin:0 0 8px; padding:0; }
.ops-statfilter{ gap:8px; margin:0 0 8px; }
.ops-personfilter{ gap:8px; margin:0 0 8px; padding:0; }

/* — filter chip → pill (radius full), thấp & nhẹ hơn (cấp thứ cấp) — */
.ops-scopebar{ overflow-x:auto; scrollbar-width:none; }
.ops-scopebar::-webkit-scrollbar{ display:none; }
.ops-scope{ flex:0 0 auto; height:32px; padding:0 16px; border-radius:9999px; font-size:12px; }
.ops-scope.on{ box-shadow:var(--shadow-btn); }
.ops-statfilter{ overflow-x:auto; scrollbar-width:none; }
.ops-statfilter::-webkit-scrollbar{ display:none; }
.ops-sf{ flex:0 0 auto; height:32px; padding:0 14px; border-radius:9999px; font-size:11.5px; white-space:nowrap; }
.ops-daychip{ border-radius:10px; padding:6px 12px; }

/* — card & banner → radius l(16), padding m(16) — */
.ops-wkday{ padding:16px; border-radius:16px; margin-bottom:12px; }
.ops-focus{ border-radius:16px; padding:14px 16px; }
.ops-focus-ic{ border-radius:12px; }
.ops-doneStamp{ border-radius:10px; padding:10px 12px; }
.ops-report-compose{ padding:16px; }
.ops-stbtn{ border-radius:10px; }

/* — action chính → pill (đặc trưng Legends Tour) — */
.ops-report-send{ border-radius:9999px; }
.ops-report-attach{ border-radius:12px; }

/* ============================================================
   AUDIT v2 — Weather · Headcount · Suspend play · SLA strip
   ============================================================ */
/* 4 trạng thái sự cố — cho chữ vừa khung */
.ops-td-status .ops-stbtn{ font-size:11.5px; padding:0 4px; white-space:nowrap; }
.ops-sla-strip{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin:2px 0 4px; padding:10px 13px; border-radius:12px;
  background:rgba(192,57,43,.06); border:1px solid rgba(192,57,43,.16); }
.ops-sla-strip span{ font-size:11.5px; color:var(--vlf-ink-700); font-weight:600; }
.ops-sla-strip b{ color:#C0392B; font-weight:800; }
.ops-sla-strip .note{ flex:1 1 100%; font-size:11px; color:var(--vlf-ink-500); font-weight:600; }

/* WeatherStrip */
.ops-weather{ padding:13px 15px; border:1.5px solid var(--vlf-line); }
.ops-wx-main{ display:flex; align-items:center; gap:13px; }
.ops-wx-temp{ font-size:26px; font-weight:800; letter-spacing:-.01em; color:var(--vlf-ink-900); flex:0 0 auto; }
.ops-wx-mid{ flex:1; min-width:0; }
.ops-wx-state{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:2px 9px; border-radius:99px; }
.ops-wx-note{ font-size:12px; color:var(--vlf-ink-500); margin-top:4px; line-height:1.35; }
.ops-wx-heat{ text-align:right; flex:0 0 auto; }
.ops-wx-heat b{ font-size:17px; font-weight:800; color:var(--vlf-gold-700); }
.ops-wx-heat span{ display:block; font-size:9.5px; color:var(--vlf-ink-500); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.ops-wx-foot{ display:flex; align-items:center; gap:6px; margin-top:11px; padding-top:10px; border-top:1px solid var(--vlf-line);
  font-size:11.5px; color:var(--vlf-ink-500); font-weight:600; }

/* Headcount */
.ops-headcount{ padding:6px 14px; }
.ops-hc-row{ display:flex; align-items:center; gap:9px; padding:9px 0; border-top:1px solid var(--vlf-line); cursor:pointer; }
.ops-hc-row:first-child{ border-top:none; }
.ops-hc-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.ops-hc-name{ flex:0 0 auto; width:104px; font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ops-hc-row .ops-prog{ flex:1; }
.ops-hc-n{ flex:0 0 auto; font-size:12px; font-weight:800; color:var(--vlf-ink-700); min-width:38px; text-align:right; }
.ops-hc-call{ flex:0 0 auto; height:28px; padding:0 10px; border-radius:99px; border:1px solid rgba(192,57,43,.3); background:rgba(192,57,43,.08);
  color:#C0392B; font-family:inherit; font-size:11px; font-weight:800; cursor:pointer; }
.ops-hc-call:active{ transform:scale(.96); }

/* Suspend / resume play */
.ops-suspend{ padding:15px; border:1.5px solid rgba(192,57,43,.28); }
.ops-suspend-hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:11px; }
.ops-suspend-kk{ font-size:11.5px; font-weight:800; letter-spacing:.04em; color:var(--vlf-under); }
.ops-suspend-sigs{ display:flex; flex-direction:column; gap:7px; }
.ops-sig{ display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:11px; background:var(--vlf-sunk); }
.ops-sig-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.ops-sig b{ font-size:12.5px; font-weight:800; color:var(--vlf-ink-900); flex:0 0 auto; }
.ops-sig span{ font-size:11.5px; color:var(--vlf-ink-500); line-height:1.3; }
.ops-suspend-act{ margin-top:13px; }
.ops-suspend-s1{ display:flex; align-items:center; gap:6px; font-size:12px; color:#1F8A5B; font-weight:700; margin-bottom:9px; }
.ops-suspend-live{ margin-top:13px; }
.ops-suspend-banner{ display:flex; align-items:center; gap:8px; padding:10px 13px; border-radius:12px; background:rgba(192,57,43,.1);
  color:var(--vlf-under); font-size:13px; font-weight:800; letter-spacing:.02em; }
.ops-suspend-seq{ margin:12px 0; padding-left:20px; display:flex; flex-direction:column; gap:7px; }
.ops-suspend-seq li{ font-size:12.5px; color:var(--vlf-ink-700); line-height:1.4; }
.ops-suspend-note{ font-size:11.5px; color:var(--vlf-ink-500); line-height:1.45; padding:10px 12px; border-radius:11px; background:var(--vlf-sunk); }
.ops-suspend-foot{ display:flex; align-items:center; gap:7px; margin-top:13px; padding-top:11px; border-top:1px solid var(--vlf-line);
  font-size:11.5px; font-weight:600; color:var(--vlf-purple-700); cursor:pointer; }
.ops-suspend-foot .chev{ margin-left:auto; color:var(--vlf-ink-500); }

/* role/note trên RoleCard + roster đội */
.ops-rc-note{ display:flex; align-items:center; gap:5px; margin-top:4px; font-size:11px; color:var(--vlf-ink-500); font-weight:600; line-height:1.3; }
.ops-team-meta{ margin-top:11px; padding-top:11px; border-top:1px solid var(--vlf-line); display:flex; flex-direction:column; gap:7px; }
.ops-team-meta .r{ font-size:12px; color:var(--vlf-ink-700); font-weight:600; }
.ops-team-meta .r .k{ display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--vlf-purple-700);
  background:var(--vlf-purple-50); padding:2px 7px; border-radius:99px; margin-right:7px; }
.ops-team-meta .n{ display:flex; align-items:flex-start; gap:6px; font-size:11.5px; color:var(--vlf-ink-500); font-weight:600; line-height:1.4; }
.ops-team-meta .n svg{ flex:0 0 auto; margin-top:2px; }

/* — Vé của tôi: nút "Mua thêm vé" cho mọi đối tượng (VIP/khách/golfer cũng mua cho người khác) — */
.v-mt-buy{ display:flex; align-items:center; gap:13px; margin-top:6px; padding:14px 15px; border-radius:16px; cursor:pointer;
  background:var(--vlf-purple-50); border:1px solid var(--vlf-purple-100); transition:background .15s; }
.v-mt-buy:active{ background:var(--vlf-purple-100); }
.v-mt-buy .ic{ width:42px; height:42px; flex:0 0 auto; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--vlf-purple-700); color:#fff; }
.v-mt-buy .tx{ flex:1; min-width:0; }
.v-mt-buy .tx .t{ font-size:14.5px; font-weight:700; color:var(--vlf-ink-900); }
.v-mt-buy .tx .s{ font-size:12px; color:var(--vlf-ink-500); margin-top:2px; line-height:1.35; }
.v-mt-buy .chev{ color:var(--vlf-purple-300); flex:0 0 auto; }

/* — Vé: entry Cửa hàng lưu niệm (preview sản phẩm) — */
.v-store-entry{ border-radius:16px; overflow:hidden; border:1px solid var(--vlf-purple-100); background:var(--vlf-purple-50); cursor:pointer; margin-top:6px; }
.v-store-entry:active{ background:var(--vlf-purple-100); }
.v-store-row{ display:flex; align-items:center; gap:13px; padding:14px 15px; }
.v-store-row .ic{ width:42px; height:42px; flex:0 0 auto; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--vlf-gold-500); color:var(--vlf-purple-900); }
.v-store-row .tx{ flex:1; min-width:0; }
.v-store-row .tx .t{ font-size:14.5px; font-weight:700; color:var(--vlf-ink-900); }
.v-store-row .tx .s{ font-size:12px; color:var(--vlf-ink-500); margin-top:2px; line-height:1.35; }
.v-store-row .chev{ color:var(--vlf-purple-300); flex:0 0 auto; }
.v-store-prev{ display:flex; }
.v-store-prev .cell{ flex:1; height:70px; }

/* — Cơ cấu giải thưởng + Kết quả người thắng theo ngày (Hệ thống thi đấu) — */
.v-awgrid{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.v-awchip{ font-size:11px; font-weight:600; color:var(--vlf-ink-700); background:var(--vlf-sunk,#F4F1F7); border:1px solid var(--vlf-line); border-radius:8px; padding:4px 9px; }
.v-res .v-res-row{ display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--vlf-line); }
.v-res .v-res-row:first-of-type{ border-top:none; }
.v-res .v-res-row b{ flex:0 0 22px; text-align:center; font-size:12.5px; font-weight:800; color:var(--vlf-ink-500); }
.v-res .v-res-row b.win{ color:var(--vlf-gold-700); }
.v-res .v-res-row .nm{ flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--vlf-ink-900); }
.v-res .v-res-row .nm .cc{ font-size:10px; font-weight:700; color:var(--vlf-ink-500); font-style:normal; }
.v-res .v-res-row .sc{ flex:0 0 auto; font-size:12.5px; font-weight:800; color:var(--vlf-purple-700); }
.v-res-qt{ margin-top:10px; font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--vlf-ink-500); }
.v-res-qual{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.v-res-qual .q{ font-size:11.5px; font-weight:600; color:var(--vlf-ink-700); background:rgba(62,142,126,.1); border-radius:8px; padding:4px 9px; }
.v-res-qual .q b{ color:#3E8E7E; font-weight:800; }
.v-res-sk{ margin-top:9px; display:flex; flex-direction:column; gap:5px; }
.v-res-sk .skrow{ display:flex; justify-content:space-between; gap:10px; font-size:12px; }
.v-res-sk .skrow span{ color:var(--vlf-ink-500); font-weight:600; }
.v-res-sk .skrow b{ color:var(--vlf-ink-900); font-weight:700; flex:0 0 auto; }