/* Guide Steps — quy trình dạng stepper: chọn bước ở thanh trên,
   nội dung bước hiển thị trong panel bên dưới (chữ một bên, ảnh một bên). */

.guide-steps,
.guide-videos {
    /* --gradient-primary kết thúc ở #1B3A70 (navy rất tối) nên khi tô lên hình
       tròn 56px thì nửa dưới trông như bị bẩn. Dùng dải xanh sáng hơn. */
    --guide-accent: linear-gradient(135deg, #1ab0fb 0%, #0089d0 100%);
}

.guide-steps {
    padding: 80px 0;
}

/* Tiêu đề khai báo lại trong phạm vi block để không phụ thuộc việc trang có
   nạp organization.css hay không (.section-subtitle ở style.css là heading đậm) */
.guide-steps .section-title,
.guide-videos .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 0;
}

.guide-steps .section-title::after,
.guide-videos .section-title::after {
    display: none;
}

.guide-steps .section-subtitle,
.guide-videos .section-subtitle {
    display: block;
    position: relative;
    max-width: 700px;
    margin: 0 auto 40px;
    padding-bottom: 18px;
    font-size: 1.15rem;
    font-weight: 400;
    color: #64748b;
    text-align: center;
}

.guide-steps .section-subtitle::after,
.guide-videos .section-subtitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    border-radius: 2px;
    background: var(--guide-accent);
}

/* ===== THANH CHỌN BƯỚC ===== */

.guide-stepper-nav {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Đường nối giữa các mốc: tâm mốc đầu và mốc cuối nằm ở 1/(2n) và 1 - 1/(2n) */
.guide-stepper-nav::before,
.guide-stepper-nav::after {
    content: '';
    position: absolute;
    top: 26px;
    left: calc(50% / var(--guide-count, 4));
    right: calc(50% / var(--guide-count, 4));
    height: 4px;
    border-radius: 2px;
    background: #dbe6f1;
}

.guide-stepper-nav::after {
    right: auto;
    width: calc((100% - 100% / var(--guide-count, 4)) * var(--guide-progress, 0));
    background: var(--guide-accent);
    transition: width 0.35s ease;
}

.guide-stepper-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0 8px;
    background: none;
    border: 0;
    color: inherit;
    text-align: center;
    cursor: pointer;
}

.guide-stepper-dot {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #dbe6f1;
    color: #94a3b8;
    font-size: 1.35rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.guide-stepper-label {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
    color: #64748b;
    max-width: 210px;
    transition: color 0.3s ease;
}

.guide-stepper-item:hover .guide-stepper-dot {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.guide-stepper-item.is-done .guide-stepper-dot {
    background: #fff;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.guide-stepper-item.is-active .guide-stepper-dot {
    background: var(--guide-accent);
    border: none;
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(0, 137, 208, 0.35);
}

.guide-stepper-item.is-active .guide-stepper-label {
    color: var(--primary-dark);
}

.guide-stepper-item:focus-visible {
    outline: none;
}

.guide-stepper-item:focus-visible .guide-stepper-dot {
    box-shadow: 0 0 0 4px rgba(0, 137, 208, 0.3);
}

/* ===== PANEL NỘI DUNG BƯỚC ===== */

.guide-panels {
    margin-top: 45px;
    /* Vuốt ngang là cử chỉ đổi bước, nhường lại cho JS thay vì để trình duyệt
       hiểu thành thao tác quay lại trang trước */
    touch-action: pan-y;
}

/* Khi đã nhận ra là vuốt ngang thì khoá bôi đen để chữ không bị kéo lem theo con trỏ */
.guide-panels.is-swiping,
.guide-panels.is-swiping * {
    user-select: none;
}

.guide-panel {
    background: #fff;
    border-radius: 20px;
    padding: 45px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Trước khi JS chạy thì hiện toàn bộ các bước */
.guide-panel + .guide-panel {
    margin-top: 30px;
}

.guide-stepper.is-enhanced .guide-panel {
    display: none;
}

.guide-stepper.is-enhanced .guide-panel.is-active {
    display: block;
    animation: guide-panel-in 0.35s ease;
}

@keyframes guide-panel-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.guide-panel-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px 40px;
    align-items: center;
    min-width: 0;
}

.guide-panel-text {
    max-width: 38rem;
    width: 100%;
}

.guide-panel-step {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(0, 137, 208, 0.1);
    color: var(--primary-color);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.guide-panel-title {
    font-size: 1.7rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.35;
    margin-bottom: 16px;
}

.guide-panel-desc {
    font-size: 1.02rem;
    line-height: 1.8;
    color: #555;
}

.guide-panel-desc p {
    margin-bottom: 18px;
}

.guide-panel-desc ul,
.guide-panel-desc ol {
    margin: 18px 0;
    padding-left: 22px;
}

.guide-panel-desc li {
    margin-bottom: 10px;
}

.guide-panel-desc > :last-child {
    margin-bottom: 0;
}

/* ===== KHUNG ĐIỆN THOẠI ===== */

.guide-panel-shots {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 12px;
}

.phone-frame {
    position: relative;
    flex: 0 1 auto;
    width: min(100%, 236px);
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 14px 9px 11px;
    border-radius: 28px;
    background: linear-gradient(160deg, #33455c 0%, #131c28 100%);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.28);
    box-sizing: border-box;
}

.guide-panel-body.has-multi-shots .phone-frame {
    flex: 1 1 0;
    width: auto;
    max-width: 196px;
}
/* Loa thoại phía trên khung */
.phone-frame::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 58px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.3);
}

.phone-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    background: #fff;
}

/* ===== ĐIỀU HƯỚNG BƯỚC ===== */

/* Chỉ có ý nghĩa khi JS đã bật chế độ từng bước */
.guide-stepper-controls {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 28px;
}

.guide-stepper.is-enhanced .guide-stepper-controls {
    display: flex;
}

.guide-stepper-counter {
    font-weight: 600;
    color: #64748b;
}

.guide-stepper-controls .btn:disabled {
    opacity: 0.45;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 991.98px) {
    .guide-steps {
        padding: 60px 0;
    }

    .guide-panel {
        padding: 32px 24px;
        overflow-x: hidden;
    }

    .guide-panel-body {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .guide-panel-text {
        max-width: 42rem;
        margin-inline: auto;
    }

    .guide-panel-shots {
        justify-self: center;
    }

    .guide-stepper-label {
        font-size: 0.85rem;
        max-width: 150px;
    }

    .guide-stepper-dot {
        width: 48px;
        height: 48px;
        font-size: 1.15rem;
    }

    .guide-stepper-nav::before,
    .guide-stepper-nav::after {
        top: 22px;
    }
}

@media (max-width: 575.98px) {
    /* Nhãn dài không đủ chỗ cho 4 mốc: chỉ giữ số, tiêu đề đã có trong panel */
    .guide-stepper-label {
        display: none;
    }

    .guide-stepper-dot {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }

    .guide-stepper-nav::before,
    .guide-stepper-nav::after {
        top: 19px;
    }

    .guide-steps .section-title {
        font-size: 1.75rem;
    }

    .guide-steps .section-subtitle {
        font-size: 1rem;
    }

    .guide-panels {
        margin-top: 30px;
    }

    .guide-panel {
        padding: 26px 16px;
        overflow-x: hidden;
    }

    .guide-panel-shots {
        gap: 8px;
    }

    .guide-panel-body.has-multi-shots .phone-frame {
        max-width: none;
        padding: 10px 6px 8px;
        border-radius: 22px;
    }

    .guide-panel-body.has-multi-shots .phone-frame img {
        border-radius: 14px;
    }

    .guide-panel-title {
        font-size: 1.4rem;
    }

    .guide-stepper-controls {
        flex-wrap: wrap;
        justify-content: center;
    }

    .guide-stepper-counter {
        order: -1;
        width: 100%;
        text-align: center;
    }
}

/* ===== SECTION VIDEO HƯỚNG DẪN ===== */

/* Xen kẽ nền: intro xám → video trắng → quy trình xám → kết luận xanh */
.intro-section:has(+ .guide-videos),
.intro-section:has(+ .guide-steps) {
    background: #f5f8fc;
}

.guide-videos {
    padding: 64px 0 72px;
    background: #fff;
}

section.guide-steps {
    background: #f5f8fc;
}

/* ===== LƯU Ý (nằm trong section quy trình) ===== */

.guide-notes {
    margin-top: 48px;
}

.guide-notes-title {
    margin: 0 0 22px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
    text-align: center;
}

.guide-notes-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-notes-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.guide-notes-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(0, 137, 208, 0.1);
    color: var(--primary-color);
    font-size: 0.95rem;
}

.guide-notes-text {
    font-size: 0.97rem;
    line-height: 1.65;
    color: #475569;
}

.guide-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 32px;
    align-items: end;
}

.guide-video-card {
    background: transparent;
}

/* Toàn bộ thẻ là nút: mockup trên nền trắng, tiêu đề ngay dưới thiết bị */
.guide-video-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    padding: 8px 12px 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.guide-video-thumb:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 6px;
    border-radius: 16px;
}

/* ===== MOCKUP THIẾT BỊ =====
   Kích thước tính theo chiều cao màn hình để hai thẻ điện thoại và máy tính
   cân nhau khi đứng cạnh nhau trong lưới. */

.guide-video-mock {
    position: relative;
    display: block;
    background: linear-gradient(160deg, #33455c 0%, #131c28 100%);
    /* drop-shadow bám theo hình dáng thật của thiết bị (kể cả cổ và chân đế
       màn hình), box-shadow thì chỉ đổ theo hình chữ nhật nên trông giả */
    filter: drop-shadow(0 14px 16px rgba(15, 23, 42, 0.28));
    transition: transform 0.35s ease;
}

.guide-video-card:hover .guide-video-mock {
    transform: translateY(-4px);
}

.guide-video-screen {
    position: relative;
    display: block;
    overflow: hidden;
    background: linear-gradient(135deg, #1e3a5c 0%, #0f1722 100%);
}

.guide-video-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.guide-video-card:hover .guide-video-screen img {
    transform: scale(1.06);
}

/* Lớp phủ tối để nút play luôn đọc được trên mọi ảnh bìa */
.guide-video-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 34, 0.3);
    transition: background 0.3s ease;
}

.guide-video-card:hover .guide-video-screen::after {
    background: rgba(15, 23, 34, 0.15);
}

/* Điện thoại: viền dày đều, bo góc lớn, có thanh loa phía trên */
.guide-video-mock--phone {
    padding: 14px 9px 16px;
    border-radius: 30px;
}

.guide-video-mock--phone::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.3);
}

.guide-video-mock--phone .guide-video-screen {
    width: 150px;
    height: 266px;
    border-radius: 20px;
}

/* Máy tính: viền mỏng quanh màn hình, thêm cổ và chân đế bên dưới */
.guide-video-mock--desktop {
    padding: 10px 10px 12px;
    /* chừa chỗ cho cổ và chân đế vẽ bằng ::before/::after nằm dưới khung */
    margin-bottom: 26px;
    border-radius: 12px;
}

.guide-video-mock--desktop .guide-video-screen {
    width: 330px;
    height: 206px;
    border-radius: 5px;
}

.guide-video-mock--desktop::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 58px;
    height: 18px;
    background: linear-gradient(180deg, #2b3a4d 0%, #1b2735 100%);
}

.guide-video-mock--desktop::after {
    content: '';
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(180deg, #33455c 0%, #131c28 100%);
}

.guide-video-play {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--primary-color);
    font-size: 1.2rem;
    padding-left: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.guide-video-card:hover .guide-video-play {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--primary-color);
    color: #fff;
}

.guide-video-title {
    display: block;
    margin: 22px 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
    text-align: center;
}

/* ===== POPUP VIDEO ===== */

.guide-video-modal[hidden] {
    display: none;
}

.guide-video-modal {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
}

.guide-video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 15, 26, 0.85);
    animation: guide-fade-in 0.25s ease;
}

.guide-video-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 900px;
    animation: guide-panel-in 0.3s ease;
}

.guide-video-modal-close {
    position: absolute;
    top: -48px;
    right: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.25s ease;
}

.guide-video-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Nền trong suốt để video khổ dọc không nằm giữa một khối đen rộng 900px */
.guide-video-modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Video quay màn hình điện thoại là khổ dọc: để video tự co theo tỉ lệ gốc
   thay vì nhồi vào khung 16/9 rồi hở hai bên rất nhiều */
.guide-video-modal-body video {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 80vh;
    border-radius: 14px;
    background: #000;
}

/* Nhúng YouTube/Vimeo thì buộc phải có khung tỉ lệ cố định */
.guide-video-modal-body iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 14px;
    background: #000;
}

@keyframes guide-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

body.guide-modal-open {
    overflow: hidden;
}

@media (max-width: 991.98px) {
    .guide-videos {
        padding: 60px 0;
    }

    .guide-video-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .guide-notes-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 575.98px) {
    .guide-videos .section-title {
        font-size: 1.75rem;
    }

    .guide-videos .section-subtitle {
        font-size: 1rem;
    }

    .guide-video-title {
        font-size: 0.98rem;
        margin-top: 16px;
    }

    .guide-notes {
        margin-top: 36px;
    }

    /* Màn hình máy tính rộng 330px sẽ tràn khỏi thẻ trên điện thoại */
    .guide-video-mock--desktop .guide-video-screen {
        width: 250px;
        height: 156px;
    }

    .guide-video-mock--phone .guide-video-screen {
        width: 140px;
        height: 248px;
    }

    .guide-video-play {
        width: 48px;
        height: 48px;
        font-size: 1.05rem;
    }

    /* Không đủ chỗ phía trên dialog cho nút đóng nên đưa vào trong góc */
    .guide-video-modal {
        padding: 20px 14px;
    }

    .guide-video-modal-close {
        top: 8px;
        right: 8px;
        background: rgba(8, 15, 26, 0.6);
    }
}