/* Hình động minh họa cho mục "Dự án thực tế" + dải ảnh "Từ Tiệm nhà mình". Chỉ dùng CSS/SVG nên rất nhẹ; tự dừng khi cuộn chưa tới hoặc khi máy bật "giảm chuyển động". */
.du{padding:0;overflow:hidden}
.du .nd{padding:18px 22px 22px}
.du .nd h3{margin-bottom:8px}
.va{position:relative}
.va-box{position:relative;aspect-ratio:16/9;background:linear-gradient(160deg,#EEF0E1,#E3E8D2);overflow:hidden;display:flex;align-items:center;justify-content:center}
.va-cap{position:absolute;right:8px;bottom:6px;font-size:.68rem;color:#5D6655;background:rgba(255,253,247,.85);padding:1px 8px;border-radius:999px;z-index:3}
.va svg{width:100%;height:100%;display:block}
.va:not(.on) *{animation-play-state:paused!important}

/* điện thoại lướt web shop (ảnh thật) */
.va-phone .ph{width:112px;height:92%;border:4px solid #26331F;border-radius:18px;background:#26331F;overflow:hidden;box-shadow:0 8px 20px rgba(31,53,24,.28);position:relative}
.va-phone .scr{width:100%;height:100%;overflow:hidden;border-radius:12px;background:#fff}
.va-phone .scr img{display:block;width:100%;height:auto;animation:cuon 20s ease-in-out infinite alternate}
@keyframes cuon{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(calc(-100% + 100cqh))}}
.va-phone .scr{container-type:size}

/* khung chat */
.chat{width:min(88%,330px);display:flex;flex-direction:column;gap:7px;font-size:.78rem;line-height:1.35}
.chat .b{padding:7px 11px;border-radius:12px;max-width:92%;background:#fff;color:#26331F;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.chat .b.me{align-self:flex-end;background:#2F4F24;color:#F8F3E7}
.chat .b small{display:block;color:#8A6526;font-weight:600;margin-bottom:2px;font-size:.7rem}

/* bảng tính */
.bang{width:min(92%,380px);background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.12);font-size:.74rem;overflow:hidden}
.bang .r{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;padding:6px 10px;border-bottom:1px solid #EEE9DA}
.bang .r.h{background:#2F4F24;color:#F8F3E7;font-weight:600}
.bang .r.t{background:#F6EFD9;font-weight:700;color:#2F4F24}
.bang .r span:not(:first-child){text-align:right}

/* trình chiếu nhận diện */
.slides{position:absolute;inset:0}
.sl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;flex-direction:column;text-align:center;padding:10px}
.sl img.logo{width:92px;height:92px}
.sl img.post{height:94%;width:auto;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.sl .sw{display:flex;gap:8px}
.sl .sw i{display:block;width:62px;height:62px;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.sl .sw-l{display:flex;gap:8px;font-size:.66rem;color:#26331F}
.sl .sw-l span{width:62px}
.sl .tag{font-family:'Roboto Slab',serif;font-weight:700;color:#2F4F24;font-size:.95rem;line-height:1.3}
.sl .luc{font-style:italic;color:#5D6655;font-size:.74rem;line-height:1.4}

/* biểu đồ cột */
.cot{transform-box:fill-box;transform-origin:50% 100%;animation:moc 7s ease-in-out infinite}
@keyframes moc{0%{transform:scaleY(.04)}22%,86%{transform:scaleY(1)}96%,100%{transform:scaleY(.04)}}

/* dải ảnh sản phẩm "Từ Tiệm nhà mình" */
.tiem .noidung{max-width:640px}
.tiem .noidung p{color:var(--phu);margin:6px 0 16px}
.nhom{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:26px}
.nhom .nh{position:relative;display:block;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#F3EBD8;box-shadow:0 2px 8px rgba(47,79,36,.08);transition:transform .25s,box-shadow .25s}
.nhom .nh:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(47,79,36,.16)}
.nhom .nh img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.nhom .nh:hover img{transform:scale(1.04)}
.nhom .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 10px;background:linear-gradient(to top,rgba(31,53,24,.88),rgba(31,53,24,0));color:#F8F3E7;display:flex;flex-direction:column;gap:1px}
.nhom .cap b{font-family:'Roboto Slab',serif;font-size:.95rem;line-height:1.25}
.nhom .cap small{font-size:.74rem;color:#E6D9B5}
@media(min-width:720px){.nhom{grid-template-columns:repeat(3,1fr);gap:14px}.nhom .cap b{font-size:1.05rem}.nhom .cap small{font-size:.8rem}}

/* dịch vụ: giá + nút hẹn lịch */
.dv-gia{display:block;margin-top:14px;font-weight:700;color:var(--reu);font-size:1.15rem}
.dv-gia small{display:block;font-weight:400;color:var(--phu);font-size:.82rem;margin-top:2px}
.the .nut.hen{margin-top:14px;background:var(--reu);color:var(--kem);padding:11px 22px}
.dv-cta{margin-top:22px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;color:var(--phu)}

@media (prefers-reduced-motion:reduce){.va *{animation:none!important}.va-phone .scr img{transform:none}}