/* Quy trinh dat in - 6 buoc, doc lap, khong tab/carousel/JS. Mobile-first,
   4 tier dung chuan Bootstrap: <576 (1 cot) / >=576 (2 cot) / >=768 (3 cot) /
   >=1200 (6 cot).

   Connector doc (giua 2 hang) dung ky thuat "hang rieng cho connector" —
   grid-template-rows xen ke: hang noi dung (auto) - hang connector (40px) -
   hang noi dung ... Nho vay connector doc CHI nam trong khoang trong giua 2
   hang (ngay duoi chu cua hang tren, ngay tren icon cua hang duoi), khong
   bao gio de/xuyen qua tieu de hay mo ta. Connector ngang (cung 1 hang) dat
   o do cao tam icon (phia tren tieu de/mo ta) nen khong can ky thuat nay.
   Moi breakpoint khai bao day du huong cua ca 5 connector (khong dua vao ke
   thua tu breakpoint truoc) de de kiem tra dung/sai tung tier doc lap. */

:root {
    --pp-brand: #1d52d7;
    --pp-line: #c7d9f7;
    --pp-icon-size: 84px;
    --pp-gap-row: 40px;
}
.pp-header {
    max-width: 720px;
    margin: 0 auto 32px;
    text-align: center;
}
.pp-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.029em;
}
.pp-section {padding: 60px 0}
.pp-subtitle {
    margin: 0;
    font-size: 1rem; color: #4a4f63;
}

.pp-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 12px;
    row-gap: 0;
    max-width: 1280px;
    margin: 0 auto;
}

.pp-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 8px;
}
.pp-step__icon-wrap {
    position: relative;
    width: var(--pp-icon-size);
    height: var(--pp-icon-size);
    margin-bottom: 16px;
}
.pp-step__icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #dbe6fa;
    color: var(--pp-brand);
    font-size: 1.75rem;
    box-shadow: 0 0 0 6px #fff;
}
.pp-step__badge {
    position: absolute;
    z-index: 3;
    top: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--pp-brand);
    color: #fff;
    font-size: 0.75rem;
    font-weight:600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px #fff;
}
.pp-step__title {
    margin: 0 0 6px;
    font-weight: 600;
}
.pp-step__desc {
    margin: 0;
    font-size: 0.875rem;
    color: #4a4f63;
}

/* Connector: element rieng, nam duoi step trong DOM (mac dinh da o duoi) +
   z-index thap hon icon de dam bao khong bao gio de len icon. */
.pp-connector {
    position: relative;
    z-index: 0;
}
.pp-connector::before {
    content: '';
    position: absolute;
}

/* ===================== < 576px: 1 cot x 6 hang — ca 5 connector deu doc,
   moi connector nam gon trong 1 hang rieng (var(--pp-gap-row)) nen chi can
   lap day 100% chieu cao hang do, khong the cham vao chu cua hang nao. ===================== */
.pp-grid {
    grid-template-rows:
        auto var(--pp-gap-row)
        auto var(--pp-gap-row)
        auto var(--pp-gap-row)
        auto var(--pp-gap-row)
        auto var(--pp-gap-row)
        auto;
}
.pp-step-1 { grid-column: 1; grid-row: 1; }
.pp-step-2 { grid-column: 1; grid-row: 3; }
.pp-step-3 { grid-column: 1; grid-row: 5; }
.pp-step-4 { grid-column: 1; grid-row: 7; }
.pp-step-5 { grid-column: 1; grid-row: 9; }
.pp-step-6 { grid-column: 1; grid-row: 11; }

.pp-connector-1-2 { grid-column: 1; grid-row: 2; }
.pp-connector-2-3 { grid-column: 1; grid-row: 4; }
.pp-connector-3-4 { grid-column: 1; grid-row: 6; }
.pp-connector-4-5 { grid-column: 1; grid-row: 8; }
.pp-connector-5-6 { grid-column: 1; grid-row: 10; }

.pp-connector-1-2::before,
.pp-connector-2-3::before,
.pp-connector-3-4::before,
.pp-connector-4-5::before,
.pp-connector-5-6::before {
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background-image: repeating-linear-gradient(to bottom, var(--pp-line) 0 6px, transparent 6px 12px);
}

/* ===================== >= 576px: 2 cot x 3 hang (zigzag) =====================
   Snake: hang 1 trai->phai (1,2) — xuong o cot phai (2→3) — hang 2 phai->trai
   (3 o cot phai, 4 o cot trai) — xuong o cot trai (4→5) — hang 3 trai->phai (5,6).
   Ngang: 1-2, 3-4, 5-6. Doc: 2-3, 4-5. */
@media (min-width: 576px) {
    .pp-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto var(--pp-gap-row) auto var(--pp-gap-row) auto;
        padding-top: 5px;
    }

    .pp-step-1 { grid-column: 1; grid-row: 1; }
    .pp-step-2 { grid-column: 2; grid-row: 1; }
    .pp-step-3 { grid-column: 2; grid-row: 3; }
    .pp-step-4 { grid-column: 1; grid-row: 3; }
    .pp-step-5 { grid-column: 1; grid-row: 5; }
    .pp-step-6 { grid-column: 2; grid-row: 5; }

    .pp-connector-1-2 { grid-column: 1 / 3; grid-row: 1; }
    .pp-connector-2-3 { grid-column: 2; grid-row: 2; }
    .pp-connector-3-4 { grid-column: 1 / 3; grid-row: 3; }
    .pp-connector-4-5 { grid-column: 1; grid-row: 4; }
    .pp-connector-5-6 { grid-column: 1 / 3; grid-row: 5; }

    .pp-connector-1-2::before,
    .pp-connector-3-4::before,
    .pp-connector-5-6::before {
        top: calc(var(--pp-icon-size) / 2 - 1px);
        left: 25%;
        right: 25%;
        bottom: auto;
        height: 2px;
        width: auto;
        transform: none;
        background-image: repeating-linear-gradient(to right, var(--pp-line) 0 6px, transparent 6px 12px);
    }
    .pp-connector-2-3::before,
    .pp-connector-4-5::before {
        top: 0;
        bottom: 0;
        left: 50%;
        right: auto;
        height: auto;
        width: 2px;
        transform: translateX(-50%);
        background-image: repeating-linear-gradient(to bottom, var(--pp-line) 0 6px, transparent 6px 12px);
    }
}

/* ===================== >= 768px: 3 cot x 2 hang =====================
   Snake: hang 1 trai->phai (1,2,3), doi huong xuong o cot 3 (3→4), hang 2
   phai->trai (4,5,6). Ngang: 1-2, 2-3, 4-5, 5-6. Doc: 3-4. */
@media (min-width: 768px) {
    .pp-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto var(--pp-gap-row) auto;
    }

    .pp-step-1 { grid-column: 1; grid-row: 1; }
    .pp-step-2 { grid-column: 2; grid-row: 1; }
    .pp-step-3 { grid-column: 3; grid-row: 1; }
    .pp-step-4 { grid-column: 3; grid-row: 3; }
    .pp-step-5 { grid-column: 2; grid-row: 3; }
    .pp-step-6 { grid-column: 1; grid-row: 3; }

    .pp-connector-1-2 { grid-column: 1 / 3; grid-row: 1; }
    .pp-connector-2-3 { grid-column: 2 / 4; grid-row: 1; }
    .pp-connector-3-4 { grid-column: 3; grid-row: 2; }
    .pp-connector-4-5 { grid-column: 2 / 4; grid-row: 3; }
    .pp-connector-5-6 { grid-column: 1 / 3; grid-row: 3; }

    .pp-connector-1-2::before,
    .pp-connector-2-3::before,
    .pp-connector-4-5::before,
    .pp-connector-5-6::before {
        top: calc(var(--pp-icon-size) / 2 - 1px);
        left: 25%;
        right: 25%;
        bottom: auto;
        height: 2px;
        width: auto;
        transform: none;
        background-image: repeating-linear-gradient(to right, var(--pp-line) 0 6px, transparent 6px 12px);
    }
    .pp-connector-3-4::before {
        top: 0;
        bottom: 0;
        left: 50%;
        right: auto;
        height: auto;
        width: 2px;
        transform: translateX(-50%);
        background-image: repeating-linear-gradient(to bottom, var(--pp-line) 0 6px, transparent 6px 12px);
    }
}

/* ===================== >= 1200px: 6 cot x 1 hang — chi 1 hang nen 5
   connector deu ngang, khong con connector doc nao. ===================== */
@media (min-width: 1200px) {
    .pp-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
    }

    .pp-step-1 { grid-column: 1; grid-row: 1; }
    .pp-step-2 { grid-column: 2; grid-row: 1; }
    .pp-step-3 { grid-column: 3; grid-row: 1; }
    .pp-step-4 { grid-column: 4; grid-row: 1; }
    .pp-step-5 { grid-column: 5; grid-row: 1; }
    .pp-step-6 { grid-column: 6; grid-row: 1; }

    .pp-connector-1-2 { grid-column: 1 / 3; grid-row: 1; }
    .pp-connector-2-3 { grid-column: 2 / 4; grid-row: 1; }
    .pp-connector-3-4 { grid-column: 3 / 5; grid-row: 1; }
    .pp-connector-4-5 { grid-column: 4 / 6; grid-row: 1; }
    .pp-connector-5-6 { grid-column: 5 / 7; grid-row: 1; }

    .pp-connector-1-2::before,
    .pp-connector-2-3::before,
    .pp-connector-3-4::before,
    .pp-connector-4-5::before,
    .pp-connector-5-6::before {
        top: calc(var(--pp-icon-size) / 2 - 1px);
        left: 25%;
        right: 25%;
        bottom: auto;
        height: 2px;
        width: auto;
        transform: none;
        background-image: repeating-linear-gradient(to right, var(--pp-line) 0 6px, transparent 6px 12px);
    }
}

@media (max-width: 767px) {
    .pp-title { font-size: 1.5rem; }
    .pp-subtitle {font-size: 0.875rem}
}
@media (max-width: 991px) {
    .pp-section {padding: 24px 0}
}
@media (max-width: 575px) {
    .pp-step {padding: 0}
}

/* ===================== .pp-section--compact ([process_compact]) =====================
   Dung khi nhung trong noi dung HEP (vd mo ta san pham, .col-lg-8) thay vi
   full-width nhu trang chu - cac tier <576/576/768px GIU NGUYEN (da hop ly
   voi do rong hep), CHI gioi han rieng tier >=1200px: thay vi mo rong len 6
   cot (tinh theo VIEWPORT, se bop qua chat khi do rong THAT cua .col-lg-8
   nho hon nhieu so voi viewport), giu nguyen bo cuc 3 cot x 2 hang y het
   tier 768px (dung lai chinh xac cung gia tri, khong tinh lai). */
@media (min-width: 1200px) {
    .pp-section--compact .pp-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto var(--pp-gap-row) auto;
    }
    .pp-section--compact .pp-step-1 { grid-column: 1; grid-row: 1; }
    .pp-section--compact .pp-step-2 { grid-column: 2; grid-row: 1; }
    .pp-section--compact .pp-step-3 { grid-column: 3; grid-row: 1; }
    .pp-section--compact .pp-step-4 { grid-column: 3; grid-row: 3; }
    .pp-section--compact .pp-step-5 { grid-column: 2; grid-row: 3; }
    .pp-section--compact .pp-step-6 { grid-column: 1; grid-row: 3; }

    .pp-section--compact .pp-connector-1-2 { grid-column: 1 / 3; grid-row: 1; }
    .pp-section--compact .pp-connector-2-3 { grid-column: 2 / 4; grid-row: 1; }
    .pp-section--compact .pp-connector-3-4 { grid-column: 3; grid-row: 2; }
    .pp-section--compact .pp-connector-4-5 { grid-column: 2 / 4; grid-row: 3; }
    .pp-section--compact .pp-connector-5-6 { grid-column: 1 / 3; grid-row: 3; }

    .pp-section--compact .pp-connector-1-2::before,
    .pp-section--compact .pp-connector-2-3::before,
    .pp-section--compact .pp-connector-4-5::before,
    .pp-section--compact .pp-connector-5-6::before {
        top: calc(var(--pp-icon-size) / 2 - 1px);
        left: 25%;
        right: 25%;
        bottom: auto;
        height: 2px;
        width: auto;
        transform: none;
        background-image: repeating-linear-gradient(to right, var(--pp-line) 0 6px, transparent 6px 12px);
    }
    .pp-section--compact .pp-connector-3-4::before {
        top: 0;
        bottom: 0;
        left: 50%;
        right: auto;
        height: auto;
        width: 2px;
        transform: translateX(-50%);
        background-image: repeating-linear-gradient(to bottom, var(--pp-line) 0 6px, transparent 6px 12px);
    }
}
/* Khong co .pp-header khi compact (an theo PHP, khong echo ra) nen khong can
   rule CSS an no o day - giu nguyen khoang cach tren cua .pp-grid vi .pp-section
   da co padding san (dong 31). */