/* Ao nhà Bống — trang thử nghiệm /ao-bong (20/09/2026). Nạp sau site.css. Chỉ màu trong :root của site.css (BRAND_KIT), không gradient, không inline style. */

/* Luật chung nhân vật (.bm2, [data-bong]) nằm ở site.css (21/09, gộp). */

/* ---- Nav rút gọn ---- */
.ao-page .top-acts .btn-ghost { min-height: 40px; }

/* ---- Hero: cảnh ao ---- */
.ao-grid { display: grid; gap: 36px; align-items: center; }
.ao-art { width: 100%; max-width: 640px; }
.ao-scene { position: relative; border-radius: 22px; overflow: hidden; background: var(--navy-800); box-shadow: 0 30px 70px -36px rgba(0,0,0,.8); }
.ao-svg { display: block; width: 100%; height: auto; }
.ao-svg text { font-family: var(--font-sans); }
.ao-l1, .ao-l2, .ao-l3, .ao-l4 { will-change: transform; }
.ao-sky { fill: var(--navy-800); }
.ao-sun { fill: var(--teal-300); }
.ao-hill { fill: var(--navy-900); }
.ao-house rect, .ao-house path { fill: var(--navy-950); }
.ao-house .ao-window { fill: var(--teal-300); }
.ao-water { fill: var(--navy-700); }
.ao-wave { fill: none; stroke: var(--navy-400); stroke-width: 1.5; stroke-linecap: round; opacity: .55; }
.ao-leaf circle { fill: var(--teal-800); }
.ao-leaf .ao-leaf-cut { fill: var(--navy-700); }
.ao-leaf text { font-size: 11px; font-weight: 700; fill: var(--teal-200); text-anchor: middle; }
.ao-water-front { fill: var(--navy-600); opacity: .55; }
.ao-ripples ellipse { fill: none; stroke: var(--teal-300); stroke-width: 1.5; }
.ao-ground { fill: var(--navy-950); }
.ao-person circle, .ao-person path, .ao-person rect { fill: var(--navy-950); stroke: var(--teal-500); stroke-width: 1.2; }
.ao-person .ao-arm { fill: none; stroke: var(--navy-950); stroke-width: 9; stroke-linecap: round; }
.ao-card rect { fill: #fff; }
.ao-card .ao-card-bar { fill: var(--teal-500); }
.ao-card text { font-size: 11.5px; font-weight: 700; fill: var(--navy-900); }
.ao-cards .ao-card { opacity: 0; }
.ao-phone-body { fill: var(--navy-950); }
.ao-phone-screen { fill: #fff; }
.ao-phone-head { fill: var(--navy-50); }
.ao-phone-dot { fill: var(--navy-800); }
.ao-phone-title { font-size: 9px; font-weight: 700; fill: var(--navy-900); }
.ao-tw { font-size: 10.2px; font-weight: 400; fill: var(--gray-900); }
.ao-tw tspan:first-child { font-weight: 700; }
.ao-reed { fill: none; stroke: var(--navy-950); stroke-width: 3; stroke-linecap: round; }
.ao-leaf-front { fill: var(--teal-900); }
.ao-say { left: auto; right: 16px; top: 16px; border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.ao-steps { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; }
.ao-steps li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(255,255,255,.62); transition: color .2s; }
.ao-steps li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--font-mono); background: rgba(255,255,255,.1); color: #fff; transition: background .2s, color .2s; }
.ao-steps li.on { color: #fff; }
.ao-steps li.on span { background: var(--teal-500); color: var(--navy-950); }
@media (min-width: 900px) { .ao-grid { grid-template-columns: .85fr 1.15fr; } }
@media (max-width: 767px) { .ao-person, .ao-cards, .ao-house, .ao-reed { display: none; } .ao-hero { padding-top: 32px; } }

/* ---- Cho Bống ăn ---- */
.feed2-sect { background: var(--navy-900); color: #fff; }
.feed2-sect .eyebrow { color: var(--teal-300); }
.feed2-sect h2 { color: #fff; }
.feed2-sect .lead { color: rgba(255,255,255,.75); }
.feed2 { display: grid; gap: 24px; align-items: start; }
.feed2-pond { position: relative; border-radius: 24px; overflow: hidden; background: var(--navy-700); border: 2px dashed rgba(255,255,255,.22); min-height: 300px; display: grid; grid-template-rows: 64px 1fr; transition: border-color .2s, background .2s; }
.feed2-pond.over { border-color: var(--teal-400); background: var(--navy-600); }
.feed2-bank { background: var(--navy-950); display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 16px 8px; }
.feed2-bank-k { font: 600 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.feed2-water { position: relative; display: grid; place-items: center; align-content: center; gap: 12px; padding: 20px 16px 24px; }
.feed2-bong { width: min(60%, 190px); }
.feed2-hint { font: 600 12.5px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin: 0; }
.feed2-pond.done .feed2-hint { opacity: 0; }
.feed2-side { display: grid; gap: 14px; }
.feed2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.feed2-phone { width: min(100%, 360px); }
.feed2-phone .phone-body { min-height: 180px; color: var(--fg); }
.feed2-lines { list-style: none; padding: 0; margin: 4px 0 0; }
.feed2-lines li { margin-top: 2px; }
.feed2-empty { color: var(--gray-500); font-size: 13.5px; margin: 0; }
.feed2-done { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 16px 18px; }
.feed2-done .cta { margin-top: 12px; }
.feed2-done .btn-line { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
@media (min-width: 820px) { .feed2 { grid-template-columns: 320px 1fr; } }

/* ---- Ba cấp ---- */
.levels { display: grid; gap: 14px; }
.level { background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 22px 20px 20px; display: grid; justify-items: start; align-content: start; gap: 6px; }
.level-fig { height: 132px; width: 100%; display: grid; place-items: end start; margin-bottom: 10px; }
.level-fig .bm2 { width: auto; }
.lv1 .level-fig .bm2 { height: 76px; }
.lv2 .level-fig .bm2 { height: 100px; }
.lv3 .level-fig .bm2 { height: 128px; }
.level-k { font: 700 12.5px/1 var(--font-mono); letter-spacing: .12em; color: var(--teal-700); text-transform: uppercase; }
.level h3 { font-size: 20px; }
.level p:last-child { color: var(--gray-700); font-size: 15px; }
.ao-note { margin-top: 16px; }
@media (min-width: 820px) { .levels { grid-template-columns: repeat(3, 1fr); align-items: end; } }

/* ---- So sánh cũ / mới ---- */
.cmp-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.cmp { border-radius: 18px; padding: 22px 16px 14px; display: grid; place-items: center; gap: 14px; min-height: 200px; }
.cmp-light { background: #fff; border: 1.5px solid var(--line); }
.cmp-navy { background: var(--navy-800); color: #fff; }
.cmp-old { width: min(100%, 176px); height: auto; filter: none; cursor: default; }
.cmp-light .bong-body { fill: var(--navy-900); }
.cmp-light .bong-mouth { stroke: #fff; }
.cmp-new { width: min(100%, 176px); }
.cmp-k { font: 600 12px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gray-600); text-align: center; }
.cmp-navy .cmp-k { color: var(--teal-200); }
.cmp-small { margin-top: 18px; background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 18px 16px; display: grid; gap: 14px; justify-items: center; }
.cmp-small-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; }
.cmp-s { display: inline-grid; place-items: center; border-radius: 12px; padding: 8px; }
.cmp-s-navy { background: var(--navy-800); }
.cmp-s-96 .bm2 { width: 96px; }
.cmp-s-40 .bm2 { width: 40px; }
.cmp-s-24 .bm2 { width: 24px; }
@media (min-width: 720px) { .cmp-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- Bống nói ---- */
.ao-talk-grid { display: grid; gap: 28px; align-items: center; }
.ao-talk-fig { width: min(100%, 300px); justify-self: center; padding-top: 24px; }
.ao-talk-fig .bm2 { filter: drop-shadow(0 18px 24px rgba(0,0,0,.35)); }
.ao-talk-fig .bong-say { left: 60%; top: -8px; }
@media (min-width: 800px) { .ao-talk-grid { grid-template-columns: 320px 1fr; gap: 48px; } }

/* ---- Góp ý ---- */
.ao-ask { margin: 14px 0 0; padding-left: 22px; color: var(--gray-700); display: grid; gap: 6px; max-width: 36em; }

/* ---- Nút nổi với Bống mini V2 ---- */

/* ---- Reduced motion: cảnh dừng ở khung cuối (js/ao-bong.js đặt trạng thái), nhân vật tĩnh ---- */
@media (prefers-reduced-motion: reduce) {
  .ao-l1, .ao-l2, .ao-l3, .ao-l4 { will-change: auto; }
  .ao-steps li { color: #fff; }
  .ao-steps li span { background: var(--teal-500); color: var(--navy-950); }
}