/* ============================================================
   VLF 2026 · ZALO OA — màn hình hội thoại chính thức (chat)
   Khung iPhone thứ 2 đặt cạnh Mini App. Chrome chat = Zalo
   (xanh #0068FF · platform); NỘI DUNG thẻ ZNS = brand VLF (tím).
   ============================================================ */

/* ---------- bố cục SONG KHUNG (duo) ---------- */
.vlf-duo{ display:flex; align-items:flex-start; gap:48px; }
.vlf-duo-col{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.vlf-duo-cap{
  display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center;
  font-family:var(--font-sans); max-width:390px;
}
.vlf-duo-cap .k{
  font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.vlf-duo-cap .t{ font-size:15px; font-weight:700; color:rgba(255,255,255,.94); letter-spacing:-.2px; }
.vlf-duo-cap .s{ font-size:12px; font-weight:500; color:rgba(255,255,255,.5); line-height:1.45; }
.vlf-duo-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:2px;
  font-size:11px; font-weight:700; color:#7FC0FF; letter-spacing:.02em;
}
.vlf-duo-link svg{ width:13px; height:13px; }
/* mũi tên liên kết giữa 2 khung */
.vlf-duo-bridge{
  align-self:center; display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,.4); font-family:var(--font-sans); padding-top:300px;
}
.vlf-duo-bridge .lbl{ font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; writing-mode:vertical-rl; white-space:nowrap; }

/* ============================================================
   KHUNG OA — bên trong .za-screen
   ============================================================ */
.za-screen.oa-screen{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:#EDF0F5; font-family:var(--font-sans);
  --oa-blue:#0068FF; --oa-blue-2:#0098FF;
  --oa-ink:#141415; --oa-sub:#7A7A7A; --oa-line:#ECEEF1;
  --oa-brand:#522367;
}

/* ---- status bar (trắng trên nền xanh) ---- */
.oa-status{
  height:54px; flex:0 0 auto; position:relative; z-index:6;
  background:linear-gradient(120deg,var(--oa-blue),var(--oa-blue-2));
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:13px 26px 0; color:#fff;
}
.oa-status .l{ font-size:15.5px; font-weight:700; letter-spacing:.2px; font-variant-numeric:tabular-nums; }
.oa-status .r{ display:flex; align-items:center; gap:6px; }
.oa-battery{ width:24px; height:12px; border:1.4px solid rgba(255,255,255,.9); border-radius:3.2px; position:relative; display:flex; align-items:center; padding:1.3px; }
.oa-battery i{ display:block; height:100%; width:78%; background:#fff; border-radius:1.4px; }
.oa-battery::after{ content:""; position:absolute; right:-3.2px; top:50%; transform:translateY(-50%); width:1.8px; height:4.5px; background:rgba(255,255,255,.9); border-radius:0 1.5px 1.5px 0; }

/* ---- header chat (xanh) ---- */
.oa-head{
  flex:0 0 auto; position:relative; z-index:5;
  background:linear-gradient(120deg,var(--oa-blue),var(--oa-blue-2));
  display:flex; align-items:center; gap:11px; padding:4px 12px 12px 8px; color:#fff;
  box-shadow:0 2px 10px rgba(0,71,179,.22);
}
.oa-back{ width:34px; height:38px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.oa-ava{ width:40px; height:40px; border-radius:50%; position:relative; flex:0 0 auto; overflow:visible; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.18); }
.oa-ava svg{ width:100%; height:100%; border-radius:50%; display:block; }
.oa-ava .tick{
  position:absolute; right:-2px; bottom:-2px; width:16px; height:16px; border-radius:50%;
  background:#1877F2; border:2px solid #fff; display:flex; align-items:center; justify-content:center; color:#fff;
}
.oa-ava .tick svg{ width:9px; height:9px; }
.oa-id{ flex:1; min-width:0; line-height:1.18; }
.oa-id .nm{ display:flex; align-items:center; gap:5px; font-size:16px; font-weight:700; letter-spacing:-.2px; }
.oa-id .nm .vrf{ width:14px; height:14px; flex:0 0 auto; color:#FFD24A; }
.oa-id .sub{ font-size:11.5px; font-weight:500; color:rgba(255,255,255,.82); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oa-id .sub b{ font-weight:600; }
.oa-actions{ display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.oa-actions .ic{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; }

/* ---- vùng hội thoại (cuộn) ---- */
.oa-conv{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:14px 14px 18px; }
.oa-conv::-webkit-scrollbar{ width:0; }
.oa-day{ display:flex; justify-content:center; margin:8px 0 14px; }
.oa-day span{ background:rgba(20,28,40,.07); color:#6a7180; font-size:11px; font-weight:700; padding:4px 12px; border-radius:999px; letter-spacing:.02em; }

.oa-row{ display:flex; margin-bottom:12px; animation:oaIn .32s cubic-bezier(.22,1,.36,1) both; }
@keyframes oaIn{ from{ transform:translateY(7px); } to{ transform:none; } }
@media (prefers-reduced-motion:reduce){ .oa-row{ animation:none; } }
.oa-row.me{ justify-content:flex-end; }
.oa-msgava{ width:28px; height:28px; border-radius:50%; flex:0 0 auto; margin-right:8px; align-self:flex-end; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.14); overflow:hidden; }
.oa-msgava svg{ width:100%; height:100%; }
.oa-row.me .oa-msgava{ display:none; }
.oa-stack{ display:flex; flex-direction:column; min-width:0; max-width:84%; }
.oa-row.me .oa-stack{ align-items:flex-end; }

/* bong bóng text */
.oa-bubble{
  background:#fff; color:var(--oa-ink); font-size:14.5px; line-height:1.5;
  padding:10px 13px; border-radius:16px 16px 16px 4px; box-shadow:0 1px 2px rgba(20,30,55,.08);
  word-break:break-word; max-width:100%;
}
.oa-row.me .oa-bubble{ background:#CFE9FF; border-radius:16px 16px 4px 16px; }
.oa-time{ font-size:10.5px; color:#9aa0ab; margin:4px 4px 0; display:flex; align-items:center; gap:4px; }
.oa-row.me .oa-time .seen{ color:#3a8bff; display:inline-flex; }
.oa-time .seen svg{ width:13px; height:11px; }

/* chips trả lời nhanh */
.oa-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:2px 0 4px; max-width:84%; }
.oa-chip{
  background:#fff; color:var(--oa-blue); border:1px solid #CFE0FA; border-radius:999px;
  font-size:12.5px; font-weight:600; padding:7px 13px; box-shadow:0 1px 2px rgba(20,30,55,.05);
}

/* ============================================================
   THẺ ZNS — brand VLF (tím)
   ============================================================ */
.zns{
  width:298px; max-width:100%; background:#fff; border-radius:13px; overflow:hidden;
  box-shadow:0 4px 18px rgba(20,25,50,.13); border:1px solid #EEF0F3;
}
.zns-logobar{ display:flex; align-items:center; gap:9px; padding:11px 13px; border-bottom:1px solid var(--oa-line); }
.zns-logobar .lg{ width:26px; height:26px; border-radius:7px; overflow:hidden; flex:0 0 auto; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.zns-logobar .lg svg{ width:100%; height:100%; display:block; }
.zns-logobar .nm{ font-size:12.5px; font-weight:700; color:var(--oa-ink); letter-spacing:-.1px; display:flex; align-items:center; gap:4px; min-width:0; }
.zns-logobar .nm .v{ width:13px; height:13px; color:#1877F2; flex:0 0 auto; }
.zns-logobar .nm span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* banner placeholder kẻ sọc + nhãn mono */
.zns-banner{
  height:142px; position:relative; display:flex; align-items:center; justify-content:center;
  background-image:repeating-linear-gradient(135deg, var(--bnA,#EFE7F4) 0 11px, var(--bnB,#E6DBEE) 11px 22px);
}
.zns-banner .cap{
  font-family:var(--font-mono,ui-monospace,monospace); font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--bnFg,rgba(82,35,103,.62)); background:rgba(255,255,255,.7);
  padding:4px 10px; border-radius:999px;
}
.zns-banner .badge{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%); white-space:nowrap;
  background:rgba(20,20,22,.74); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.04em;
  padding:4px 11px; border-radius:999px;
}
.zns-banner .ring{ width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; }

.zns-body{ padding:13px; }
.zns-title{ font-size:16px; font-weight:800; color:var(--oa-ink); letter-spacing:-.3px; line-height:1.25; }
.zns-content{ font-size:13px; line-height:1.55; color:#55565b; margin-top:6px; }

/* bảng key–value */
.zns-table{ margin-top:12px; border-top:1px solid var(--oa-line); }
.zns-trow{ display:flex; align-items:baseline; gap:12px; padding:8px 0; border-bottom:1px solid var(--oa-line); }
.zns-trow .k{ font-size:12px; color:var(--oa-sub); flex:0 0 39%; }
.zns-trow .v{ font-size:12.5px; font-weight:600; color:var(--oa-ink); flex:1; text-align:right; word-break:break-word; }
.zns-trow .v.hl{ color:var(--oa-brand); font-weight:800; font-size:14px; }
.zns-trow .v .dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; vertical-align:middle; }

/* khối MÃ (vé mời / may mắn) */
.zns-code{
  margin-top:13px; border:1.6px dashed var(--cdBd,#C7AED6); background:var(--cdBg,#F3ECF7);
  border-radius:11px; padding:13px 12px; text-align:center;
}
.zns-code .lbl{ font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--oa-sub); }
.zns-code .val{ margin-top:7px; font-size:27px; font-weight:800; letter-spacing:.22em; color:var(--cdFg,#522367); font-variant-numeric:tabular-nums; }
.zns-code .hint{ margin-top:7px; font-size:11px; color:var(--oa-sub); display:flex; align-items:center; justify-content:center; gap:5px; }

/* dòng nhắc mã rút gọn */
.zns-coderow{ margin-top:11px; background:#EEF4FF; border-radius:9px; padding:9px 12px; display:flex; align-items:center; justify-content:space-between; }
.zns-coderow .k{ font-size:11.5px; color:var(--oa-sub); }
.zns-coderow .v{ font-size:15px; font-weight:800; letter-spacing:.16em; color:var(--oa-brand); }

/* thanh cảnh báo */
.zns-warn{
  margin-top:12px; background:#FFF1E6; color:#C26A12; border-radius:9px; padding:9px 12px;
  font-size:11.5px; font-weight:700; line-height:1.4; display:flex; gap:7px; align-items:flex-start;
}
.zns-warn svg{ width:15px; height:15px; flex:0 0 auto; margin-top:1px; }

/* QR */
.zns-qr{ margin-top:13px; display:flex; flex-direction:column; align-items:center; gap:8px; padding:13px 0 4px; border-top:1px solid var(--oa-line); }
.zns-qr .frame{ padding:9px; background:#fff; border:1px solid var(--oa-line); border-radius:12px; }
.zns-qr .cap{ font-size:11px; color:var(--oa-sub); display:flex; align-items:center; gap:5px; }

/* feature list (mini app invite) */
.zns-feats{ margin-top:12px; display:flex; flex-direction:column; gap:9px; }
.zns-feat{ display:flex; align-items:center; gap:10px; }
.zns-feat .ic{ width:30px; height:30px; border-radius:9px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--oa-brand); color:#fff; }
.zns-feat .ic svg{ width:16px; height:16px; }
.zns-feat .tx{ font-size:12.5px; font-weight:600; color:var(--oa-ink); line-height:1.35; }

/* khối nổi bật (tee time / score) */
.zns-spot{ margin-top:12px; border-radius:11px; padding:13px; color:#fff; background:linear-gradient(135deg,#522367,#2A0F36); }
.zns-spot .top{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.zns-spot .big{ font-size:21px; font-weight:800; letter-spacing:-.4px; margin-top:4px; }
.zns-spot .meta{ font-size:12px; color:rgba(255,255,255,.82); margin-top:5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.zns-spot .meta .sep{ opacity:.5; }

/* leaderboard mini (result) */
.zns-lb{ margin-top:12px; }
.zns-lbrow{ display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--oa-line); }
.zns-lbrow .ps{ width:20px; font-size:12px; font-weight:800; color:var(--oa-brand); text-align:center; flex:0 0 auto; }
.zns-lbrow .nm{ flex:1; font-size:12.5px; font-weight:600; color:var(--oa-ink); }
.zns-lbrow .sc{ font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.zns-lbrow .sc.neg{ color:#1F8A5B; }

/* news list */
.zns-news{ margin-top:10px; }
.zns-newsrow{ display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--oa-line); align-items:center; }
.zns-newsrow:last-child{ border-bottom:none; }
.zns-newsthumb{ width:50px; height:50px; border-radius:8px; flex:0 0 auto; background-image:repeating-linear-gradient(135deg,#E7E2EE 0 7px,#DDD5E7 7px 14px); }
.zns-newsrow .tt{ font-size:12.5px; font-weight:600; color:var(--oa-ink); line-height:1.35; }
.zns-newsrow .mt{ font-size:11px; color:var(--oa-sub); margin-top:3px; }

/* nút CTA */
.zns-btns{ margin-top:13px; display:flex; flex-direction:column; gap:8px; }
.zns-btn{ height:42px; border-radius:999px; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:7px; letter-spacing:.01em; }
.zns-btn svg{ width:15px; height:15px; }
.zns-btn.primary{ background:var(--oa-brand); color:#fff; box-shadow:0 4px 12px rgba(82,35,103,.26); }
.zns-btn.ghost{ background:#fff; color:var(--oa-brand); border:1.5px solid var(--oa-brand); }

.zns-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 13px; border-top:1px solid var(--oa-line); background:#FAFAFB; }
.zns-foot .by{ font-size:10.5px; color:var(--oa-sub); display:flex; align-items:center; gap:4px; }
.zns-foot .by .v{ width:11px; height:11px; color:#1877F2; }
.zns-foot .tag{ font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--tgFg,#7a4f93); background:var(--tgBg,#F1EAF5); padding:3px 8px; border-radius:999px; }

/* ---- dock đáy: rich menu + input ---- */
.oa-dock{ flex:0 0 auto; background:#fff; border-top:1px solid #E5E8ED; position:relative; z-index:5; }
.oa-richmenu{ display:flex; border-bottom:1px solid #EEF0F3; }
.oa-richmenu .item{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px; color:#41454d; }
.oa-richmenu .item + .item{ border-left:1px solid #EEF0F3; }
.oa-richmenu .item svg{ width:19px; height:19px; color:var(--oa-blue); }
.oa-richmenu .item span{ font-size:11px; font-weight:600; }
.oa-input{ display:flex; align-items:center; gap:10px; padding:9px 14px; }
.oa-input .ic{ width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--oa-blue); flex:0 0 auto; }
.oa-input .box{ flex:1; height:38px; background:#F1F3F6; border-radius:999px; display:flex; align-items:center; padding:0 15px; color:#9aa0ab; font-size:14px; }
.oa-input .ic.mic{ color:#8a8f98; }
.oa-home{ height:24px; display:flex; align-items:center; justify-content:center; }
.oa-home::after{ content:""; width:134px; height:5px; border-radius:3px; background:rgba(20,20,18,.32); }