/* tool-promo.css — khối "Bàn trang điểm ảo" trên trang chủ (inc/tool-promo.php). Chu kỳ hiệu ứng 12s = 4 màu × 3s. */
.tp { position: relative; overflow: hidden; contain: paint; padding: 56px 0; background: linear-gradient(135deg, var(--mint-50) 0%, var(--ivory) 55%, var(--blush) 100%); border-top: 1px solid var(--mint-200); }
.tp-blob { position: absolute; left: -12%; bottom: -40%; width: 46%; height: 120%; border-radius: 50%; background: var(--mint-200); opacity: .35; filter: blur(48px); pointer-events: none; }
.tp-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 420px); gap: 56px; align-items: center; }

.tp-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--ink-900); color: var(--ivory); font: 700 11px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; }
.tp-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(201,169,97,.7); animation: tp-ping 1.8s ease-out infinite; }
@keyframes tp-ping { 0% { box-shadow: 0 0 0 0 rgba(201,169,97,.7); } 100% { box-shadow: 0 0 0 10px rgba(201,169,97,0); } }
.tp-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -.015em; color: var(--ink-900); margin: 18px 0 14px; }
.tp-title .it { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--mint-700); }
.tp-sub { font-size: 16px; line-height: 1.6; color: var(--ink-700); margin: 0 0 20px; max-width: 520px; }

.tp-swatches { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; }
/* Nhịp chung 12s, mỗi màu 3s. Delay ÂM (3i − 12s) để mọi animation "đang chạy" ngay lúc tải: ảnh 0 hiện tức thì,
   không có khoảng trống; ảnh/chấm/nhãn cùng --i luôn đồng bộ. */
.tp-swatches i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ink-200); animation: tp-swatch 12s ease-in-out infinite; animation-delay: calc(var(--i) * 3s - 12s); }
@keyframes tp-swatch { 0%, 22% { transform: scale(1.35); box-shadow: 0 0 0 3px var(--ink-900); } 28%, 94% { transform: scale(1); box-shadow: 0 0 0 1px var(--ink-200); } 100% { transform: scale(1.35); box-shadow: 0 0 0 3px var(--ink-900); } }
.tp-swatches span { font-size: 13px; color: var(--ink-500); margin-left: 4px; }

.tp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.tp-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 600 15px var(--font-sans); text-decoration: none; transition: transform .15s, background .15s; }
.tp-btn:hover { transform: translateY(-1px); }
.tp-btn-dark { background: var(--ink-900); color: var(--ivory) !important; }
.tp-btn-dark::after { content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%); transform: skewX(-20deg); animation: tp-shine 3.2s ease-in-out infinite; }
@keyframes tp-shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.tp-btn-ghost { background: transparent; color: var(--ink-900) !important; border: 1.5px solid var(--ink-300); }
.tp-btn-ghost:hover { border-color: var(--ink-900); }
.tp-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-500); }

/* Gương */
.tp-mirror { position: relative; display: block; aspect-ratio: 440 / 536; border-radius: 30px; overflow: hidden; text-decoration: none; background: var(--sand); box-shadow: 0 0 0 6px var(--ivory), 0 0 0 7px var(--ink-200), 0 30px 60px -24px rgba(31,74,63,.45); animation: tp-float 6s ease-in-out infinite; will-change: transform; }
@keyframes tp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.tp-ring { position: absolute; inset: 0; border-radius: 30px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); z-index: 3; pointer-events: none; }
.tp-imgs { position: absolute; inset: 0; }
.tp-imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: tp-fade 12s ease-in-out infinite; animation-delay: calc(var(--i) * 3s - 12s); }
.tp-imgs img[style*="--i:0"] { opacity: 1; }
@keyframes tp-fade { 0%, 22% { opacity: 1; } 28%, 94% { opacity: 0; } 100% { opacity: 1; } }
.tp-tag { position: absolute; top: 14px; left: 14px; z-index: 4; background: rgba(20,20,20,.55); color: #fff; font: 600 11px var(--font-sans); padding: 6px 11px; border-radius: 999px; backdrop-filter: blur(6px); }
.tp-labels { position: absolute; left: 14px; bottom: 14px; z-index: 4; height: 34px; width: calc(100% - 28px); }
.tp-labels b { position: absolute; left: 0; bottom: 0; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.9); color: #1A1F1C; font: 600 13px var(--font-sans); opacity: 0; animation: tp-label 12s ease-in-out infinite; animation-delay: calc(var(--i) * 3s - 12s); }
.tp-labels b i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); }
@keyframes tp-label { 0%, 22% { opacity: 1; transform: translateY(0); } 28%, 94% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }
.tp-play { position: absolute; right: 14px; bottom: 14px; z-index: 4; background: var(--ink-900); color: var(--ivory); font: 700 13px var(--font-sans); padding: 9px 14px; border-radius: 999px; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); transition: transform .15s; }
.tp-mirror:hover .tp-play { transform: scale(1.06); }

/* Mobile */
@media (max-width: 1023px) {
  .tp { padding: 40px 0; }
  .tp-grid { grid-template-columns: 1fr; gap: 26px; }
  .tp-mirror { order: -1; max-width: 320px; margin: 0 auto; width: 100%; }
  .tp-text { text-align: center; }
  .tp-sub { margin-left: auto; margin-right: auto; }
  .tp-swatches, .tp-cta, .tp-trust { justify-content: center; }
  .tp-cta .tp-btn { flex: 1 1 100%; }
}
@media (max-width: 480px) { .tp-swatches span { display: none; } .tp-mirror { max-width: 280px; } }

/* Tôn trọng người dùng tắt chuyển động: giữ ảnh đầu, tắt mọi animation */
@media (prefers-reduced-motion: reduce) {
  .tp-eyebrow i, .tp-swatches i, .tp-btn-dark::after, .tp-mirror, .tp-imgs img, .tp-labels b { animation: none !important; }
  .tp-imgs img { opacity: 0; } .tp-imgs img[style*="--i:0"] { opacity: 1; }
  .tp-labels b { opacity: 0; } .tp-labels b[style*="--i:0"] { opacity: 1; transform: none; }
}