/* Nâng cấp trang chủ 19/10/2026 — học bố cục mona.media: dải chữ chạy, CTA từng hạng mục,
   chọn nhu cầu trong form, cụm liên hệ nổi. Chỉ dùng transform (không gây reflow). */

/* Dải chữ chạy */
.chay{overflow:hidden;background:var(--chu,#1a1a1a);color:#fff;padding:14px 0;border-block:1px solid rgba(255,255,255,.08)}
.chay-in{display:flex;width:max-content;animation:chay 38s linear infinite}
.chay span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;padding:0 22px}
.chay span::after{content:"◆";color:var(--vang2,#f5891f);margin-left:44px;font-size:10px;vertical-align:2px}
.chay:hover .chay-in{animation-play-state:paused}
@keyframes chay{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.chay-in{animation:none}}

/* CTA cuối mỗi hạng mục */
.he-cta{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:600;font-size:14px;color:var(--vang,#c05208);text-decoration:none}
.he-cta::after{content:"→";transition:transform .2s}
.he-cta:hover::after{transform:translateX(4px)}

/* Chọn nhu cầu trong form */
.nhu-cau{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.nhu-cau label{margin:0;cursor:pointer}
.nhu-cau input{position:absolute;opacity:0;pointer-events:none}
.nhu-cau span{display:inline-block;padding:7px 12px;border:1px solid var(--vien,#ddd);border-radius:999px;font-size:13px;background:var(--nen2,#f7f4ee);transition:background .15s,border-color .15s}
.nhu-cau input:checked+span{background:var(--vangnhat,#fbf3dc);border-color:var(--vang2,#f5891f);font-weight:600}
.nhu-cau input:checked+span::before{content:"✓ "}
.nhu-cau input:focus-visible+span{outline:2px solid var(--vang2,#f5891f);outline-offset:2px}

/* Cụm liên hệ nổi (máy tính; điện thoại đã có thanh dưới) */
.noi{position:fixed;left:18px;bottom:22px;z-index:55;display:flex;flex-direction:column;gap:10px}
.noi a{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;text-decoration:none;
  background:#fff;border:1px solid var(--vien,#ddd);box-shadow:0 6px 18px rgba(0,0,0,.12);transition:transform .2s;position:relative}
.noi a:hover{transform:translateY(-2px)}
.noi a.z{background:#0068ff;color:#fff;border-color:#0068ff;font:700 12px/1 system-ui,sans-serif}
.noi a b{position:absolute;left:56px;white-space:nowrap;background:var(--chu,#1a1a1a);color:#fff;font:500 12px system-ui,sans-serif;padding:6px 9px;border-radius:6px;opacity:0;transform:translateX(-4px);transition:.2s;pointer-events:none}
.noi a:hover b{opacity:1;transform:none}
@media(max-width:860px){.noi{display:none}}

/* Linh vật Mrbo (23/10/2026). Ảnh gốc 200×200 — hiển thị tối đa ~170px cho nét */
.lv{display:block;height:auto;pointer-events:none;user-select:none}
.lv-hero{position:absolute;right:0;top:18px;width:170px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.14));animation:lv-bay 5s ease-in-out infinite}
.lv-muc{width:104px;margin:0 auto 6px}
.lv-form{width:110px;margin:0 0 4px}
@keyframes lv-bay{50%{transform:translateY(-8px)}}
@media (max-width:900px){.lv-hero{position:static;width:116px;margin:0 0 6px auto;float:right}}
@media (max-width:560px){.lv-hero{width:78px;margin-bottom:-6px}.lv-muc{width:84px}}
@media (prefers-reduced-motion:reduce){.lv-hero{animation:none}}
