/* Màn "Sức mạnh HUD" (#suc-manh-hud) — đi cùng resources/views/frontend/strength.blade.php + js/strength.js
   Mặc định (điện thoại, máy tính bảng, chưa chạy JS): các trạm xếp dọc trong ô cuộn.
   Máy tính ≥ 75rem: đường bay + cánh diều, mỗi lần một thẻ (strength.js gắn .is-stepping lên section). */

.sec-strength .strength-bgs { background: #f4f1ec; overflow: hidden; }
.sec-strength .strength-bg {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity .9s ease;
}
.sec-strength .strength-bg[data-step="0"]:not(.strength-bg-before) { opacity: 1; }
.sec-strength .strength-bg-before { filter: sepia(.35) saturate(.85) contrast(1.05); }
.sec-strength .strength-veil {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(250, 248, 244, .92) 0%, rgba(250, 248, 244, .55) 22%, rgba(250, 248, 244, .25) 60%, rgba(250, 248, 244, .6) 100%);
}

.sec-strength .section-content { display: flex; flex-direction: column; }
.sec-strength .strength-head { text-align: center; padding: calc(var(--space-8) + var(--space-2)) var(--space-4) var(--space-3); position: relative; z-index: 3; }
.sec-strength .strength-head .title { margin: 0; font-size: var(--fs-3xl); letter-spacing: .04em; text-transform: uppercase; }
.sec-strength .strength-sub { margin: var(--space-1) 0 0; font-size: var(--fs-xl); color: var(--color-black); }

/* ---------- xếp dọc (mặc định) ---------- */
.sec-strength .strength-stage {
    position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--space-2) var(--space-4) var(--space-8);
}
.sec-strength .strength-path,
.sec-strength .strength-kite,
.sec-strength .strength-tag,
.sec-strength .strength-count,
.sec-strength .strength-era { display: none; }
.sec-strength .strength-list {
    list-style: none; margin: 0 auto; padding: 0 0 0 var(--space-6); max-width: 46rem; position: relative;
    display: grid; gap: var(--space-5);
}
.sec-strength .strength-list::before {
    content: ""; position: absolute; left: calc(var(--space-3) - 1px); top: var(--space-4); bottom: var(--space-4);
    border-left: 2px dashed rgba(227, 6, 19, .5);
}
.sec-strength .strength-item { position: relative; }
.sec-strength .strength-dot {
    position: absolute; left: calc(-1 * var(--space-6) + var(--space-3) - 1.1rem); top: var(--space-4);
    width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--color-red); color: #fff; font-family: var(--heading-font); font-size: var(--fs-xs);
    box-shadow: 0 0 0 .3rem rgba(255, 255, 255, .85);
}
.sec-strength .strength-card {
    background: rgba(255, 255, 255, .94); border-left: 4px solid var(--color-red); border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-5) var(--space-5); box-shadow: 0 10px 30px rgba(34, 34, 34, .12); overflow: hidden;
}
.sec-strength .strength-card-img {
    display: block; width: calc(100% + var(--space-5) * 2); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
    margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-5)) var(--space-4);
}
.sec-strength .strength-kicker {
    display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2);
    font-family: var(--heading-font); text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-sm); color: var(--color-black);
}
.sec-strength .strength-no { color: var(--color-red); }
.sec-strength .strength-ico { width: 1.35em; height: 1.35em; color: var(--color-red); flex: none; }
.sec-strength .strength-num { margin: 0 0 var(--space-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.sec-strength .strength-num strong {
    font-size: clamp(2.4rem, 1.6rem + 3vw, 4.25rem); line-height: 1; color: var(--color-red); font-weight: 400;
    font-variant-numeric: tabular-nums;
}
.sec-strength .strength-num span { font-size: var(--fs-md); color: var(--gray-color); }
.sec-strength .strength-name { margin: 0 0 var(--space-2); font-family: var(--heading-font); font-size: var(--fs-lg); line-height: 1.3; color: var(--color-black); font-weight: 400; text-transform: uppercase; }
.sec-strength .strength-desc { margin: 0; font-size: var(--fs-md); line-height: 1.6; color: #333; text-align: justify; }
.sec-strength .strength-note { margin: var(--space-3) 0 0; font-size: var(--fs-xs); color: var(--gray-color); font-style: italic; }

/* ---------- máy tính: đường bay + cánh diều ---------- */
@media (min-width: 75rem) {
    .sec-strength.is-stepping .strength-stage { position: absolute; inset: 0; overflow: hidden; padding: 0; }
    .sec-strength.is-stepping .strength-path { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
    /* đường bay không vẽ trước (chỉ dùng để tính toạ độ); dây đỏ chỉ hiện tới chỗ diều đã bay qua */
    .sec-strength .strength-track { fill: none; stroke: none; }
    .sec-strength .strength-line { fill: none; stroke: var(--color-red); stroke-width: 4; stroke-linecap: round; }

    .sec-strength.is-stepping .strength-kite { display: block; position: absolute; left: 0; top: 0; width: 11rem; z-index: 4; pointer-events: none; will-change: transform; }
    .sec-strength.is-stepping .strength-kite img { display: block; width: 100%; height: auto; transform-origin: 80% 28%; }

    .sec-strength.is-stepping .strength-list { position: static; max-width: none; padding: 0; display: block; }
    .sec-strength.is-stepping .strength-list::before { display: none; }
    .sec-strength.is-stepping .strength-item { position: static; }
    /* chấm trạm chỉ hiện khi diều đã tới (không đánh dấu trước các trạm phía trước) */
    .sec-strength.is-stepping .strength-dot {
        left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%) scale(.4); z-index: 3; opacity: 0;
        background: var(--color-red); color: #fff; box-shadow: 0 0 0 .4rem rgba(255, 255, 255, .55);
        transition: transform .5s ease, opacity .4s ease;
    }
    .sec-strength.is-stepping .strength-item.is-passed .strength-dot { opacity: 1; transform: translate(-50%, -50%) scale(.8); }
    .sec-strength.is-stepping .strength-item.is-active .strength-dot { opacity: 1; transform: translate(-50%, -50%) scale(1.1); transition-delay: .9s; }

    .sec-strength.is-stepping .strength-tag {
        display: block; position: absolute; left: var(--x, 50%); top: calc(var(--y, 50%) + 1.9rem); transform: translateX(-50%); z-index: 3;
        font-family: var(--heading-font); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
        color: var(--color-black); background: rgba(255, 255, 255, .85); padding: .15rem .55rem; border-radius: 999px;
        opacity: 0; transition: opacity .5s ease;
    }
    .sec-strength.is-stepping .strength-item.is-passed .strength-tag { opacity: 1; }

    .sec-strength.is-stepping .strength-card {
        /* toạ độ left/top do strength.js đặt cạnh trạm đang dừng */
        position: absolute; left: 50%; top: 50%; width: min(32rem, 34vw); z-index: 5; padding: var(--space-5) var(--space-6) var(--space-6);
        opacity: 0; visibility: hidden; transform: translateY(1.5rem);
        transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
    }
    .sec-strength.is-stepping .strength-item.is-active .strength-card {
        opacity: 1; visibility: visible; transform: none;
        transition: opacity .6s ease .9s, transform .6s ease .9s, visibility 0s;
    }
    .sec-strength.is-stepping .strength-card-img { display: none; }

    .sec-strength.is-stepping .strength-era {
        display: block; position: absolute; left: 7vw; top: calc(var(--space-8) * 2); z-index: 3; opacity: 0; transition: opacity .6s ease;
        font-family: var(--heading-font); font-size: var(--fs-sm); letter-spacing: .05em; text-transform: uppercase;
        background: rgba(34, 34, 34, .72); color: #fff; padding: .35rem .8rem; border-radius: 999px;
    }
    .sec-strength.is-stepping .strength-item.is-active.era-before .strength-era-before,
    .sec-strength.is-stepping .strength-item.is-active.era-after .strength-era-after { opacity: 1; }

    .sec-strength.is-stepping .strength-count {
        display: block; position: absolute; right: 8rem; bottom: var(--space-6); margin: 0; z-index: 3;
        font-family: var(--heading-font); font-size: var(--fs-md); color: var(--color-black); letter-spacing: .08em;
    }
    .sec-strength.is-stepping .strength-count-cur { color: var(--color-red); font-size: var(--fs-2xl); }

    /* ảnh "nay" của trạm có ảnh xưa: quét từ trái sang khi diều tới */
    .sec-strength .strength-bg-after { clip-path: inset(0 100% 0 0); transition: opacity .9s ease, clip-path 1.6s cubic-bezier(.65, 0, .35, 1); }
    .sec-strength .strength-bg-after.is-revealed { clip-path: inset(0 0 0 0); }
}

/* màn máy tính thấp (laptop 768px): thẻ gọn lại để đủ chỗ đứng cạnh trạm */
@media (min-width: 75rem) and (max-height: 50rem) {
    .sec-strength.is-stepping .strength-card { padding: var(--space-4) var(--space-5) var(--space-4); }
    .sec-strength.is-stepping .strength-num strong { font-size: 3rem; }
    .sec-strength.is-stepping .strength-name { font-size: var(--fs-md); }
    .sec-strength.is-stepping .strength-desc { font-size: var(--fs-sm); line-height: 1.5; }
}

/* bỏ chuyển động khi người xem tắt hiệu ứng */
@media (prefers-reduced-motion: reduce) {
    .sec-strength .strength-bg, .sec-strength .strength-card, .sec-strength .strength-dot, .sec-strength .strength-bg-after { transition: none !important; }
}

/* ---------- bản in PDF (print.css gắn body.hudpr): một trang, đủ các trạm thành hàng ---------- */
body.hudpr .sec-strength .strength-stage { overflow: visible; display: flex; align-items: flex-end; padding: 0 3rem 3rem; }
body.hudpr .sec-strength .strength-list { max-width: none; width: 100%; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 1rem; }
body.hudpr .sec-strength .strength-list::before,
body.hudpr .sec-strength .strength-dot,
body.hudpr .sec-strength .strength-card-img,
body.hudpr .sec-strength .strength-bg-before { display: none; }
body.hudpr .sec-strength .strength-bg-after { clip-path: none; }
body.hudpr .sec-strength .strength-card { padding: 1rem 1.1rem 1.2rem; box-shadow: none; }
body.hudpr .sec-strength .strength-num strong { font-size: 2.4rem; }
body.hudpr .sec-strength .strength-name { font-size: 1rem; }
body.hudpr .sec-strength .strength-desc { font-size: .8rem; line-height: 1.45; text-align: left; }
body.hudpr .sec-strength .strength-item { display: flex; }
body.hudpr .sec-strength .strength-card { flex: 1; }