/* Tập thở 1.43.0 — slide trang chủ (web .hero-sl + app web .hm-sl): nổi màu, bật lên mỗi lần hiện. Bê từ lab-taptho/taptho.css. */
@keyframes svKb{0%{transform:scale(1.02) translate(0,0)}100%{transform:scale(1.1) translate(-1.5%,-1%)}}
/* ===== slide trang chủ: hiệu ứng nổi màu + bật lên (dùng chung app web + web) ===== */
@keyframes tpBreath{0%{transform:scale(.58)}45%,52%{transform:scale(1)}96%,100%{transform:scale(.58)}}
@keyframes tpWordA{0%,44%{opacity:1}52%,100%{opacity:0}}
@keyframes tpWordB{0%,44%{opacity:0}52%,94%{opacity:1}100%{opacity:0}}
@keyframes tpPop{0%{opacity:0;transform:translateY(10px) scale(.6)}60%{opacity:1;transform:translateY(-2px) scale(1.08)}100%{opacity:1;transform:none}}
@keyframes tpPopR{0%{opacity:0;transform:scale(.3) rotate(-20deg)}65%{opacity:1;transform:scale(1.15) rotate(6deg)}100%{opacity:1;transform:none}}
@keyframes tpWash{0%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(45deg)}100%{filter:hue-rotate(0deg)}}
@keyframes tpShine{0%,55%{transform:translateX(-120%) skewX(-20deg)}75%,100%{transform:translateX(260%) skewX(-20deg)}}
@keyframes tpPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,210,77,.65)}50%{box-shadow:0 0 0 9px rgba(255,210,77,0)}}
@keyframes tpMark{from{background-size:0 42%}to{background-size:100% 42%}}
@keyframes tpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes tpTwk{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1)}}
@keyframes tpHalo{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
/* mảng màu loang: xanh Kinafit → xanh ngọc → san hô, đổi sắc chậm */
.tp-cw{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(120% 90% at 85% 40%,rgba(255,122,89,.85),rgba(255,122,89,0) 55%),radial-gradient(90% 80% at 15% 90%,rgba(94,225,193,.8),rgba(94,225,193,0) 60%),linear-gradient(120deg,rgba(6,128,205,.7),rgba(46,179,163,.5));animation:tpWash 10s ease-in-out infinite}
.tp-hl{font-style:normal;color:#FFD24D;background:linear-gradient(transparent 62%,rgba(255,210,77,.35) 62%) 0 100%/100% 42% no-repeat;padding:0 .08em}
.tp-chips2{display:flex;flex-wrap:wrap;gap:5px}
.tp-chips2 i{font-style:normal;font-weight:600;border-radius:999px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap}
.tp-chips2 i::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;vertical-align:1px;background:#5EE1C1}
.tp-chips2 i:nth-child(2)::before{background:#FF9E80}.tp-chips2 i:nth-child(3)::before{background:#FFD24D}
.tp-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;border-radius:999px;font-weight:700;color:#3a2600;background:linear-gradient(135deg,#FFE27A,#FFB347 55%,#FF8A5B);box-shadow:0 6px 16px -6px rgba(255,138,91,.8);animation:tpPulse 2.4s ease-out infinite}
.tp-cta::after{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:tpShine 3.2s ease-in-out infinite}
.tp-cta svg{width:12px;height:12px}
.tp-orbw{position:absolute;aspect-ratio:1/1}
/* 1.44.5 — Safari < 15: không có aspect-ratio thì quả cầu rộng 0 → chốt rộng = cao (app: 66% × khung (100vw−32)×0,49 tối đa 278px; web: 58% × .hs-img dự phòng 300px) */
@supports not (aspect-ratio:1){.tp-slide .tp-orbw{width:min(calc((100vw - 32px) * .3234),183px)}.tp-wimg .tp-orbw{width:174px}}
.tp-orb{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center}
.tp-orb .ha{position:absolute;top:-14%;right:-14%;bottom:-14%;left:-14%;border-radius:50%;background:radial-gradient(circle,rgba(255,210,77,.55),rgba(255,122,89,.25) 45%,rgba(255,122,89,0) 70%);animation:tpHalo 8s ease-in-out infinite,tpWash 10s ease-in-out infinite}
.tp-orb i{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,rgba(255,236,214,.92) 45%,rgba(255,179,120,.55) 75%,rgba(255,179,120,0) 100%);animation:tpBreath 8s ease-in-out infinite}
.tp-orb s{position:absolute;top:-6%;right:-6%;bottom:-6%;left:-6%;border-radius:50%;border:1.5px dashed rgba(255,255,255,.5)}
.tp-orb em{position:relative;width:100%;height:1.3em;font-style:normal;font-weight:700;color:#5a2f12}
.tp-orb em span{position:absolute;left:0;right:0;text-align:center;opacity:0}
.tp-orb em .a{animation:tpWordA 8s infinite}.tp-orb em .b{animation:tpWordB 8s infinite}
.tp-shp i{position:absolute;display:grid;place-items:center;border-radius:12px;background:#fff;color:#0680CD;box-shadow:0 6px 14px -4px rgba(0,0,0,.35);animation:tpFloat 3.6s ease-in-out infinite}
.tp-shp i:nth-child(2){color:#E8604C;animation-delay:-1.2s}.tp-shp i:nth-child(3){color:#1E9E86;animation-delay:-2.4s}
.tp-spk b{position:absolute;width:7px;height:7px;background:radial-gradient(circle,#fff 0,#FFE27A 35%,transparent 70%);border-radius:50%;animation:tpTwk 2.6s ease-in-out infinite}
.tp-spk b:nth-child(2){animation-delay:-.8s}.tp-spk b:nth-child(3){animation-delay:-1.5s}.tp-spk b:nth-child(4){animation-delay:-2s}
/* bật lên mỗi lần slide hiện ra (JS thêm .tp-ready rồi bật/tắt .tp-in) */
.tp-ready .pop{opacity:0}
.tp-ready.tp-in .pop{animation:tpPop .7s cubic-bezier(.2,1.5,.4,1) both}
.tp-ready.tp-in .popr{animation:tpPopR .8s cubic-bezier(.2,1.6,.4,1) both}
.tp-ready.tp-in .d1{animation-delay:.05s}.tp-ready.tp-in .d2{animation-delay:.2s}.tp-ready.tp-in .d3{animation-delay:.38s}.tp-ready.tp-in .d4{animation-delay:.5s}.tp-ready.tp-in .d5{animation-delay:.65s}.tp-ready.tp-in .d6{animation-delay:.8s}.tp-ready.tp-in .d7{animation-delay:.95s}
.tp-ready.tp-in .tp-hl{animation:tpMark .9s .55s ease-out both}
.tp-ready.tp-in .tp-cta.pop{animation:tpPop .7s .65s cubic-bezier(.2,1.5,.4,1) both,tpPulse 2.4s 1.4s ease-out infinite}

/* --- app web: khung (100vw−32)×0,49 --- */
.hm-sl .tr a.tp-slide{position:relative;display:block;overflow:hidden;color:#fff;background:#0b3a5c;text-decoration:none}
.hm-sl .tr a.tp-slide img.bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;animation:svKb 40s ease-in-out infinite alternate}
.tp-slide .sc{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(6,28,48,.72) 0%,rgba(6,28,48,.38) 55%,rgba(6,28,48,0) 100%)}
.tp-slide .tx{position:absolute;left:13px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;max-width:61%}
.tp-slide .k{font-size:9.5px;font-weight:800;letter-spacing:.08em;color:#3a2600;background:#FFD24D;border-radius:999px;padding:2px 8px}
.tp-slide b.t{font-family:var(--display);font-weight:400;font-size:clamp(17px,5.4vw,25px);line-height:1.08;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.tp-slide .tp-chips2 i{font-size:10px;padding:2px 7px}
.tp-slide .tp-cta{height:28px;padding:0 13px;font-size:12.5px;margin-top:1px}
.tp-slide .tp-orbw{right:6%;top:17%;height:66%}
.tp-slide .tp-orb em{font-size:11.5px}
.tp-slide .tp-shp i{width:24px;height:24px;border-radius:8px}.tp-slide .tp-shp i svg{width:15px;height:15px}
.tp-slide .tp-shp i:nth-child(1){right:3%;top:9%}.tp-slide .tp-shp i:nth-child(2){right:30%;top:7%}.tp-slide .tp-shp i:nth-child(3){right:4%;bottom:9%}
.tp-slide .tp-spk b:nth-child(1){right:36%;bottom:20%}.tp-slide .tp-spk b:nth-child(2){right:22%;top:28%}.tp-slide .tp-spk b:nth-child(3){right:12%;bottom:30%}.tp-slide .tp-spk b:nth-child(4){right:44%;top:40%}

/* --- web máy tính: slide lớn trong .hero-sl --- */
@keyframes tpBg{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-sl.tp-on{background:linear-gradient(120deg,#0b3a5c,#1B7DB8 35%,#1E9E86 65%,#1B7DB8);background-size:280% 280%;animation:tpBg 14s ease infinite}
.tp-wslide .hs-eye{display:inline-block;color:#3a2600;background:#FFD24D;border-radius:999px;padding:4px 12px;letter-spacing:.12em}
.tp-wslide .hs-title{font-size:40px}
.tp-wslide .hs-desc{margin:12px 0 14px}
.tp-wslide .tp-chips2{gap:8px;margin-bottom:22px}
.tp-wslide .tp-chips2 i{font-size:13.5px;padding:6px 12px}
.tp-wslide .tp-cta{height:50px;padding:0 26px;font-size:16px;text-decoration:none}
.tp-wslide .tp-cta svg{width:15px;height:15px}
.tp-wslide .note{display:block;text-align:left;margin-top:10px;font-size:12.5px;color:rgba(255,255,255,.75)}
.hs-img.tp-wimg{position:relative;color:#fff}
.hs-img.tp-wimg img{animation:svKb 40s ease-in-out infinite alternate}
.tp-wimg .tp-orbw{left:50%;top:50%;height:58%;transform:translate(-50%,-50%)}
.tp-wimg .tp-orb em{font-size:16px}
.tp-wimg .tp-shp i{width:44px;height:44px;border-radius:14px}.tp-wimg .tp-shp i svg{width:26px;height:26px}
.tp-wimg .tp-shp i:nth-child(1){left:13%;top:16%}.tp-wimg .tp-shp i:nth-child(2){right:13%;top:22%}.tp-wimg .tp-shp i:nth-child(3){right:8%;bottom:16%}
.tp-wimg .tp-tag{position:absolute;left:5%;bottom:8%;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.95);color:#123a55;border-radius:14px;padding:8px 12px;font-size:13px;font-weight:700;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.tp-wimg .tp-tag small{display:block;font-weight:500;color:#5b7486;font-size:11.5px}
.tp-wimg .tp-tag .ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#FFE27A,#FF8A5B);color:#3a2600}
.tp-wimg .tp-tag .ic svg{width:17px;height:17px}
.tp-wimg .tp-spk b{width:10px;height:10px}
.tp-wimg .tp-spk b:nth-child(1){left:30%;top:22%}.tp-wimg .tp-spk b:nth-child(2){right:30%;bottom:24%}.tp-wimg .tp-spk b:nth-child(3){left:24%;bottom:34%}.tp-wimg .tp-spk b:nth-child(4){right:26%;top:12%}

@media (prefers-reduced-motion:reduce){.tp-orb i,.tp-orb .ha,.tp-cw,.tp-cta,.tp-cta::after,.tp-shp i,.tp-spk b,.hero-sl.tp-on,.hm-sl .tr a.tp-slide img.bg,.hs-img.tp-wimg img,.tp-ready .pop,.tp-ready .popr{animation:none!important;opacity:1!important}}
/* màn rất hẹp (≤340px): bớt 1 chip để không chạm quả cầu */
@media (max-width:340px){.tp-slide .tp-chips2 i:nth-child(2){display:none}}