/* Trang Ứng dụng (/ung-dung) và trang giới thiệu từng ứng dụng */
.ap-cat{margin-top:clamp(36px,5vw,56px)}
.ap-cat>h2{font-size:clamp(1.25rem,2.2vw,1.6rem);margin:0 0 6px}.ap-cat>p{margin:0 0 20px;color:var(--muted)}
.ap-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:22px}
.ap-card{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center;padding:18px;border-radius:24px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);transition:transform .25s,box-shadow .25s,border-color .25s}
.ap-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--pri) 40%,var(--line));box-shadow:var(--sh-lg)}
.ap-card .ap-shot{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:linear-gradient(140deg,#1d2a6b,#3f66f0 55%,#8b5cf6)}
.ap-card .ap-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.ap-card h3{margin:0 0 6px;font-size:1.3rem}.ap-card h3 a{color:var(--ink)}
.ap-card p{margin:0 0 12px;color:var(--muted);font-size:.95rem;line-height:1.6}
.ap-tag{display:inline-block;margin-bottom:10px;padding:5px 11px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.02em;background:color-mix(in srgb,var(--pri) 12%,transparent);color:var(--pri)}
.ap-card .b-btns{gap:8px}
@media(max-width:560px){.ap-card{grid-template-columns:1fr}.ap-card .ap-shot{aspect-ratio:16/10}}

/* khung điện thoại chứa ảnh video xem trước */
.ap-phone{position:relative;width:min(300px,78%);margin:0 auto;padding:12px;border-radius:42px;background:#0b1020;box-shadow:0 40px 80px -30px rgba(15,23,60,.55),inset 0 0 0 2px rgba(255,255,255,.08)}
.ap-phone img{display:block;width:100%;border-radius:30px}
.ap-phone::before{content:"";position:absolute;left:50%;top:20px;width:80px;height:20px;border-radius:12px;background:#0b1020;transform:translateX(-50%);z-index:1}
.ap-hero-art{position:relative}
.ap-hero-art .ap-badge{position:absolute;padding:10px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-lg);font-size:.86rem;font-weight:700;color:var(--ink);white-space:nowrap}
.ap-hero-art .ap-badge small{display:block;font-weight:500;color:var(--muted);font-size:.78rem}
.ap-hero-art .ap-badge.b1{left:0;top:18%}.ap-hero-art .ap-badge.b2{right:0;bottom:16%}
@media(max-width:560px){.ap-hero-art .ap-badge{display:none}}

/* bảng thông số ngắn */
.ap-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.ap-specs li{padding:18px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.ap-specs b{display:block;font-size:1.5rem;font-family:var(--f-head);color:var(--ink);line-height:1.1;margin-bottom:6px}
.ap-specs span{color:var(--muted);font-size:.9rem;line-height:1.5}

/* minh họa hộp thư Vizy (giao diện mẫu, không phải ảnh chụp) */
.ap-inbox{border-radius:24px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-lg);overflow:hidden;max-width:520px;margin:0 auto}
.ap-inbox-h{display:flex;gap:8px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700;color:var(--ink)}
.ap-inbox-h i{font-style:normal;margin-left:auto;font-size:.75rem;font-weight:600;color:var(--muted)}
.ap-chips{display:flex;gap:6px;padding:12px 16px 0;flex-wrap:wrap}
.ap-chips span{padding:5px 10px;border-radius:999px;font-size:.78rem;font-weight:700;background:var(--bg-2);color:var(--muted)}
.ap-chips span.on{background:color-mix(in srgb,var(--pri) 14%,transparent);color:var(--pri)}
.ap-msgs{display:grid;gap:10px;padding:16px}
.ap-msg{max-width:84%;padding:11px 14px;border-radius:16px;font-size:.92rem;line-height:1.5}
.ap-msg small{display:block;font-size:.72rem;font-weight:700;opacity:.7;margin-bottom:3px}
.ap-msg.in{background:var(--bg-2);color:var(--text);border-bottom-left-radius:6px}
.ap-msg.out{justify-self:end;background:linear-gradient(120deg,#4f7cff,#7c5cff);color:#fff;border-bottom-right-radius:6px}
.ap-flow{display:grid;gap:8px;padding:0 16px 16px}
.ap-flow div{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:var(--bg-2);font-size:.86rem;color:var(--text)}
.ap-flow b{color:#16a34a;font-size:.78rem}html[data-theme="dark"] .ap-flow b{color:#4ade80}
.ap-note{padding:0 16px 14px;font-size:.75rem;color:var(--muted)}