/* =====================================================================
   PrintPoss About Us — CSS cho layout Flatsome (printposs-about-us-layout.txt)
   Dán vào: Flatsome > Advanced > Custom CSS (hoặc style.css của flatsome-child).
   Mọi selector đều bắt đầu bằng .pa-* nên không đụng tới trang chủ (.pp-*) hay trang khác.
   ===================================================================== */
.pa-sec {
    --ink: #10241a;
    --g: #2f9444;
    --gd: #0f4d2c;
    --mint: #e9f4ec;
    --line: #dbe6de;
    --amb: #f2a23a;
    --mute: #4c6157;
    --paper: #f6f8f4;
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding: 96px 0 !important
}

.pa-sec h1,
.pa-sec h2,
.pa-sec h3,
.pa-sec p {
    margin: 0
}

.pa-sec>.section-content>.row {
    max-width: 1180px
}

.pa-sec .text p:last-child {
    margin-bottom: 0
}

/* ---------- Common ---------- */
.pa-h2 h2 {
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 800;
    color: var(--ink)
}

.pa-lead p {
    color: var(--mute);
    font-size: 18px;
    max-width: 60ch;
    margin-top: 14px
}

.pa-in {
    opacity: 0;
    transform: translateY(18px);
    animation: pa-up .7s cubic-bezier(.2, .7, .2, 1) forwards
}

.pa-d1 { animation-delay: .05s }
.pa-d2 { animation-delay: .18s }
.pa-d5 { animation-delay: .6s }

@keyframes pa-up {
    to {
        opacity: 1;
        transform: none
    }
}

/* ---------- HERO ---------- */
.pa-hero {
    padding: 72px 0 130px !important;
    background: radial-gradient(900px 420px at 85% 0, var(--mint), transparent 70%), #fff !important
}

.pa-h1 h1 {
    font-size: 56px;
    line-height: 1.03;
    letter-spacing: -.035em;
    font-weight: 800;
    color: var(--gd)
}

.pa-h1 .pa-h1-sub {
    display: block;
    color: var(--ink)
}

.pa-lead-hero p {
    font-size: 20px;
    margin-top: 24px
}

.pa-hero-pic .img-inner {
    border-radius: 28px;
    overflow: hidden;
    aspect-ratio: 7 / 6;
    background: var(--mint);
    box-shadow: 0 30px 60px -30px rgba(15, 77, 44, .55)
}

.pa-hero-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 12% 50%
}

/* ---------- STATS ---------- */
.pa-stats {
    position: relative;
    z-index: 2;
    margin-top: -70px;
    padding: 0 !important;
    background: transparent !important
}

.pa-stats-grid {
    background: var(--gd);
    color: #fff;
    border-radius: 24px;
    padding: 36px 12px !important;
    box-shadow: 0 30px 50px -28px rgba(15, 77, 44, .9)
}

.pa-stat>.col-inner {
    padding: 4px 28px;
    border-left: 1px solid rgba(255, 255, 255, .18)
}

.pa-stat:first-child>.col-inner {
    border-left: 0
}

.pa-stat-txt .pa-v {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: #fff
}

.pa-stat-txt .pa-v small {
    font-size: 20px;
    font-weight: 700;
    margin-left: 4px
}

.pa-stat-price .pa-v {
    color: var(--amb)
}

.pa-stat-txt .pa-l {
    font-size: 14px;
    color: #fff;
    opacity: .85;
    margin-top: 6px
}

.pa-ship p {
    text-align: center;
    font-size: 14px;
    color: var(--mute);
    margin-top: 16px
}

/* ---------- SUMMARY ---------- */
.pa-sum {
    padding: 56px 0 0 !important
}

.pa-facts {
    margin-top: 32px !important
}

.pa-facts>.col {
    padding-bottom: 0
}

.pa-fact p {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--line)
}

.pa-fact strong {
    font-weight: 700;
    color: var(--gd)
}

.pa-fact .pa-dd {
    color: var(--mute)
}

.pa-fact a {
    text-decoration: none;
    color: inherit
}

.pa-fact a:hover {
    color: var(--g);
    text-decoration: underline
}

/* ---------- HOW IT WORKS ---------- */
.pa-pills {
    margin-top: 48px
}

.pa-pills p {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px
}

.pa-pill {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--gd);
    background: var(--mint);
    border-radius: 999px;
    padding: 9px 14px
}

.pa-pill-a {
    grid-column: 1 / 5
}

.pa-pill-b {
    grid-column: 5 / 6;
    background: #fff4e0;
    color: #7a4a05
}

/* thanh chạy (rail): JS thêm .in khi cuộn tới */
.pa-pills::after {
    content: "";
    display: block;
    height: 4px;
    margin-top: 18px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--g), var(--amb)) 0 0 / 0% 100% no-repeat, var(--line);
    transition: background-size 1.8s cubic-bezier(.3, .6, .2, 1)
}

.pa-pills.in::after {
    background-size: 100% 100%, auto
}

.pa-steps {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-top: 26px !important
}

.pa-steps>.pa-st {
    max-width: none !important;
    flex-basis: auto !important;
    width: auto;
    padding: 0 !important
}

.pa-st>.col-inner {
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s, border-color .25s
}

.pa-st>.col-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 36px -22px rgba(15, 77, 44, .55);
    border-color: var(--g)
}

.pa-st-im {
    margin: 0 !important
}

.pa-st-im .img-inner {
    background: #f7f6f2;
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center
}

.pa-st-im img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.pa-st-bd {
    padding: 18px 18px 22px
}

.pa-st-bd .pa-n {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--g);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 10px
}

.pa-st-bd h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink)
}

.pa-st-bd p:not(.pa-n) {
    font-size: 14.5px;
    color: var(--mute);
    margin-top: 6px;
    line-height: 1.5
}

/* ---------- FACTORY ---------- */
.pa-fh-img {
    display: inline-block;
    width: auto !important
}

/* nền section nằm ở lớp khác (.section-bg), nên tô mint ngay sau ảnh
   để multiply hoà được nền trắng của hình vào nền mint */
.pa-fh-img .img-inner {
    background: var(--mint)
}

.pa-fh-img img {
    height: 150px;
    width: auto;
    mix-blend-mode: multiply
}

.pa-mos {
    display: grid !important;
    grid-template-columns: 1.45fr 1fr 1fr;
    grid-template-rows: 260px 260px;
    gap: 18px;
    margin-top: 44px !important
}

.pa-mos>.pa-tile {
    max-width: none !important;
    flex-basis: auto !important;
    width: auto;
    padding: 0 !important
}

.pa-tile-big {
    grid-row: span 2
}

.pa-tile>.col-inner {
    position: relative;
    height: 100%;
    border-radius: 22px;
    overflow: hidden;
    background: #174f31;
    cursor: zoom-in
}

.pa-tile-img,
.pa-tile-img .img-inner,
.pa-tile-img a {
    height: 100%;
    margin: 0 !important
}

.pa-tile-img a {
    display: block
}

.pa-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s
}

.pa-tile>.col-inner:hover img {
    transform: scale(1.07)
}

.pa-cap {
    position: absolute;
    left: 14px;
    bottom: 14px;
    pointer-events: none
}

.pa-cap p {
    background: rgba(255, 255, 255, .96);
    border-radius: 12px;
    padding: 9px 16px;
    font-weight: 700;
    color: var(--gd);
    font-size: 15px
}

.pa-tile-big .pa-cap p {
    font-size: 20px;
    padding: 13px 20px
}

/* ---------- PROOF ---------- */
.pa-proof .pa-h2 h2 {
    color: #fff;
    max-width: 16ch
}

.pa-proof .pa-lead p {
    color: rgba(255, 255, 255, .8)
}

.pa-chips p {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px
}

.pa-chip {
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 700;
    font-size: 15px;
    color: #fff
}

.pa-num>.col-inner {
    height: 100%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
    padding: 28px 22px;
    transition: transform .25s, background .25s
}

.pa-num>.col-inner:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .14)
}

.pa-num-txt .pa-num-v {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: #fff
}

.pa-num-txt .pa-num-l {
    font-size: 14px;
    color: #fff;
    opacity: .85
}

/* ---------- FAQ (Accordion của Flatsome) ---------- */
.pa-acc .accordion-item {
    border-bottom: 1px solid var(--line)
}

.pa-acc .accordion-item:first-child {
    border-top: 1px solid var(--line)
}

.pa-acc .accordion-title {
    position: relative;
    display: block;
    padding: 20px 40px 20px 0;
    border: 0;
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
    background: none !important
}

.pa-acc .accordion-title .toggle {
    display: none
}

.pa-acc .accordion-title::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -14px;
    font-size: 26px;
    line-height: 1;
    font-weight: 400;
    color: var(--g);
    transition: transform .25s
}

.pa-acc .accordion-title.active::after {
    transform: rotate(45deg)
}

.pa-acc .accordion-inner {
    padding: 0 0 20px
}

.pa-acc .accordion-inner p {
    color: var(--mute);
    max-width: 62ch
}

/* ---------- SAMPLE CTA ---------- */
.pa-cta2 {
    padding: 0 0 96px !important
}

.pa-box {
    background: linear-gradient(120deg, var(--g), var(--gd));
    border-radius: 32px;
    padding: 56px 49px !important;
    overflow: hidden
}

.pa-box .pa-h2 h2 {
    color: #fff
}

.pa-box .pa-lead p {
    color: rgba(255, 255, 255, .88)
}

.pa-box-img {
    max-width: 300px;
    margin: 0 auto !important
}

.pa-box-img .img-inner {
    border-radius: 24px;
    transform: rotate(3deg);
    transition: transform .4s;
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .5)
}

.pa-box:hover .pa-box-img .img-inner {
    transform: rotate(0)
}

/* ---------- CONTACT ---------- */
.pa-contact .pa-h2 {
    margin-bottom: 32px
}

.pa-ci {
    margin-bottom: 20px
}

.pa-ci p {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
    align-items: start
}

.pa-ci p::before {
    content: "";
    grid-row: span 2;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--mint) var(--ic) center / 22px no-repeat
}

.pa-ci small {
    display: block;
    color: var(--mute);
    font-size: 13px
}

.pa-ci a {
    text-decoration: none;
    font-weight: 600;
    color: var(--ink)
}

.pa-ci a:hover {
    color: var(--g)
}

.pa-ci-addr { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f4d2c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") }
.pa-ci-mail { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f4d2c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") }
.pa-ci-tel { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f4d2c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") }
.pa-ci-time { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f4d2c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") }

.pa-map>.col-inner {
    height: 100%;
    min-height: 400px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #e4ece6;
    display: grid;
    place-items: center
}

/* JS chèn iframe Google Maps; khi đã có map thì ẩn nút dự phòng */
.pa-map iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: 0;
    display: block
}

.pa-map-js>.col-inner {
    display: block
}

.pa-map-js .pa-map-btn {
    display: none
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {
    .pa-sec *,
    .pa-sec *::before,
    .pa-sec *::after {
        animation: none !important;
        transition: none !important
    }

    .pa-in {
        opacity: 1;
        transform: none
    }

    .pa-pills::after {
        background-size: 100% 100%, auto
    }
}

/* ---------- Mobile (≤849px — breakpoint của Flatsome) ---------- */
@media (max-width:849px) {
    .pa-sec {
        padding: 60px 0 !important
    }

    /* lề 2 bên 20px như bản HTML (Flatsome mặc định chỉ 15px từ padding cột) */
    .pa-sec>.section-content>.row {
        padding-left: 5px;
        padding-right: 5px
    }

    .pa-h2 h2 {
        font-size: 30px
    }

    .pa-lead p {
        font-size: 16px
    }

    .pa-hero {
        padding: 36px 0 96px !important
    }

    .pa-h1 h1 {
        font-size: 36px
    }

    .pa-lead-hero p {
        font-size: 17px;
        margin-top: 18px
    }

    .pa-hero-pic .img-inner {
        aspect-ratio: 4 / 3;
        border-radius: 22px
    }

    .pa-stats {
        margin-top: -56px;
        padding: 0 !important
    }

    .pa-stats-grid {
        width: auto !important;
        margin: 0 20px !important;
        padding: 22px 6px !important;
        border-radius: 20px;
        row-gap: 22px
    }

    .pa-stat>.col-inner {
        padding: 2px 18px
    }

    .pa-stat:nth-child(odd)>.col-inner {
        border-left: 0
    }

    .pa-stat-txt .pa-v {
        font-size: 28px;
        white-space: nowrap
    }

    .pa-stat-txt .pa-v small {
        font-size: 15px
    }

    .pa-stat-txt .pa-l {
        font-size: 13px
    }

    .pa-sum {
        padding: 40px 0 0 !important
    }

    .pa-fact p {
        grid-template-columns: 112px 1fr;
        gap: 12px;
        padding: 12px 0
    }

    .pa-pills {
        margin-top: 32px
    }

    .pa-pills p {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .pa-pill-a,
    .pa-pill-b {
        grid-column: auto
    }

    .pa-pills::after {
        display: none
    }

    /* các bước: vuốt ngang */
    .pa-steps {
        display: flex !important;
        flex-wrap: nowrap !important;   /* row Flatsome mặc định wrap → thẻ rơi xuống dòng */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 14px;
        margin: 20px 0 0 !important;
        padding: 6px 20px 18px !important;
        scroll-padding: 0 20px;
        scrollbar-width: none
    }

    .pa-steps::-webkit-scrollbar {
        display: none
    }

    .pa-steps>.pa-st {
        flex: 0 0 74% !important;
        scroll-snap-align: center
    }

    .pa-st>.col-inner:hover {
        transform: none
    }

    .pa-fh-pic {
        display: none
    }

    .pa-mos {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        grid-auto-rows: 150px;
        gap: 12px;
        margin-top: 30px !important;
        padding: 0 20px !important
    }

    .pa-tile>.col-inner {
        border-radius: 16px
    }

    .pa-tile-big {
        grid-column: 1 / -1;
        grid-row: span 2
    }

    .pa-cap {
        left: 10px;
        bottom: 10px
    }

    .pa-cap p {
        font-size: 13px;
        padding: 7px 11px
    }

    .pa-tile-big .pa-cap p {
        font-size: 16px;
        padding: 10px 14px
    }

    .pa-proof .pa-h2 h2 {
        max-width: none
    }

    .pa-num>.col-inner {
        padding: 18px 12px;
        border-radius: 16px
    }

    .pa-num-txt .pa-num-v {
        font-size: 30px
    }

    .pa-num-txt .pa-num-l {
        font-size: 12px
    }

    .pa-chip {
        padding: 7px 14px;
        font-size: 14px
    }

    .pa-acc .accordion-title {
        font-size: 16px;
        min-height: 48px
    }

    .pa-cta2 {
        padding: 0 0 60px !important
    }

    .pa-box {
        width: auto !important;
        margin: 0 20px !important;
        padding: 34px 9px !important;
        border-radius: 24px
    }

    .pa-box-pic {
        order: -1
    }

    .pa-box-img {
        max-width: 220px;
        margin: 0 !important
    }

    .pa-map>.col-inner,
    .pa-map iframe {
        min-height: 300px
    }
}

@media (max-width:380px) {
    .pa-h1 h1 {
        font-size: 32px
    }

    .pa-steps>.pa-st {
        flex-basis: 82% !important
    }
}


/* =====================================================================
   PrintPoss Integrations — CSS cho layout Flatsome (printposs-integrations-layout.txt)
   Dùng chung file với About Us. Mọi selector bắt đầu bằng .pi-* nên không đụng .pa-* / .pp-*.
   Trang nên dùng template "Page - Full Width" (page-blank.php) như About Us.
   ===================================================================== */
.pi-sec {
    --brand: #0B7A3D;
    --brand-hover: #096834;
    --brand-deep: #07532A;
    --brand-soft: #E7F4EC;
    --brand-line: #97D0AF;
    --brand-ring: #C5E5D2;
    --ink: #14241B;
    --ink-2: #4A554E;
    --muted: #66726B;
    --line: #D2D9D4;
    --sep: #E6EAE7;
    --bg-warm: #FBFCF3;
    --shadow: 0 1px 3px rgba(20, 36, 27, .08), 0 1px 2px rgba(20, 36, 27, .04);
    --shadow-hover: 0 12px 28px rgba(20, 36, 27, .12), 0 4px 8px rgba(20, 36, 27, .05);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding: 72px 0 !important
}

.pi-sec h1,
.pi-sec h2,
.pi-sec h3,
.pi-sec p {
    margin: 0
}

.pi-sec>.section-content>.row {
    max-width: 1170px
}

.pi-sec .text p:last-child {
    margin-bottom: 0
}

.pi-center {
    text-align: center
}

.pi-h1 h1 {
    font-size: clamp(30px, 4.4vw, 48px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink)
}

.pi-h2 h2 {
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--ink)
}

.pi-sec h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink)
}

.pi-sub p {
    font-size: 17px;
    color: var(--ink-2);
    margin-top: 12px
}

.pi-sec .button.pi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 13px 26px;
    margin: 0;
    border-radius: 999px !important;
    border: 2px solid var(--brand) !important;
    background: var(--brand) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    transition: .2s
}

.pi-sec .button.pi-btn:hover {
    transform: translateY(-2px);
    background: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important
}

/* ---------- HERO ---------- */
.pi-hero {
    padding: 64px 0 72px !important;
    background: linear-gradient(180deg, var(--bg-warm), #fff 70%) !important
}

.pi-crumb p {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 14px
}

.pi-crumb a {
    color: var(--brand);
    font-weight: 600
}

.pi-crumb .pi-sep {
    margin: 0 6px;
    color: var(--line)
}

.pi-intro p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto
}

.pi-intro strong {
    color: var(--ink);
    font-weight: 600
}

.pi-updated p {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 10px
}

.pi-methods {
    margin-top: 44px !important
}

.pi-mcard>.col-inner {
    position: relative;
    height: 100%;
    min-height: 230px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 20px;
    padding: 28px 26px 24px;
    box-shadow: var(--shadow);
    transition: .2s
}

.pi-mcard>.col-inner:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px)
}

.pi-mcard-txt {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left
}

.pi-mcard-txt .pi-num {
    position: absolute;
    top: 22px;
    right: 24px;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-ring)
}

.pi-ico {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--brand-soft);
    border: 1.5px solid var(--brand-line);
    display: grid;
    place-items: center;
    font-size: 24px;
    line-height: 1
}

.pi-mtitle {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink)
}

.pi-live {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    background: var(--brand);
    color: #fff;
    padding: 3px 9px;
    border-radius: 999px
}

.pi-mdesc {
    flex: 1;
    color: var(--ink-2);
    font-size: 15px
}

.pi-go {
    border-top: 1px solid var(--sep);
    padding-top: 14px
}

.pi-go a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--brand)
}

/* cả thẻ bấm được: link "See how" phủ toàn bộ thẻ */
.pi-go a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px
}

.pi-arr {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-soft);
    display: grid;
    place-items: center;
    transition: .2s
}

.pi-mcard>.col-inner:hover .pi-arr {
    background: var(--brand);
    color: #fff
}

/* ---------- CHI TIẾT ---------- */
.pi-detail .pi-h2 {
    margin-bottom: 36px
}

.pi-bnum {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand);
    color: var(--brand-hover);
    font-weight: 800;
    font-size: 22px;
    line-height: 1;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 6px var(--brand-soft)
}

/* Direct API: 2 row_inner ghép thành 1 thẻ */
.pi-api-head,
.pi-api-body {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important
}

.pi-api-head {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 28px 32px !important;
    background: #fff;
    border: 1.5px solid var(--line);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: var(--shadow)
}

.pi-api-head>.col {
    max-width: none !important;
    flex-basis: auto !important;
    width: auto;
    padding: 0 !important
}

.pi-api-title h3 {
    margin-bottom: 4px
}

.pi-api-title p {
    color: var(--ink-2);
    font-size: 15px
}

.pi-api-body {
    background: var(--bg-warm);
    border: 1.5px solid var(--line);
    border-top: 1px solid var(--sep);
    border-radius: 0 0 20px 20px;
    overflow: hidden;
    margin-bottom: 20px !important;
    box-shadow: var(--shadow)
}

.pi-api-col>.col-inner {
    padding: 24px 32px
}

.pi-api-col+.pi-api-col>.col-inner {
    border-left: 1px solid var(--sep)
}

.pi-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px !important
}

.pi-api-steps {
    list-style: none;
    display: grid;
    gap: 10px;
    margin: 0 0 20px !important;
    padding: 0
}

.pi-api-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap
}

.pi-api-steps .pi-n {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: grid;
    place-items: center
}

/* 3 dòng Base URL / Auth / Token ghép thành 1 khung */
.pi-info {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 0
}

.pi-api-steps+.pi-info {
    border-top: 1px solid var(--line);
    border-radius: 12px 12px 0 0
}

.pi-info:last-child {
    border-radius: 0 0 12px 12px
}

.pi-dt {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted)
}

.pi-info code,
.pi-info .pi-dd {
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.pi-info code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--brand-deep);
    background: none;
    border: 0;   /* bỏ khung mặc định của thẻ code trong theme */
    padding: 0
}

.pi-ep {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    font-size: 13.5px
}

.pi-ep td {
    padding: 9px 14px;
    border: 0;
    border-bottom: 1px solid var(--sep);
    white-space: nowrap;
    color: var(--ink-2)
}

.pi-ep tr:last-child td {
    border-bottom: 0
}

.pi-ep td:first-child {
    font-weight: 700;
    color: var(--ink);
    width: 96px
}

.pi-ep td:nth-child(2) {
    width: 88px
}

.pi-verb {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 2px 6px;
    border-radius: 5px
}

.pi-post { color: #9a5b00; background: #FFF4DE }
.pi-patch { color: #5b3fa8; background: #EFEAFB }
.pi-del { color: #b4232c; background: #FDECEC }

.pi-note {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 10px !important
}

/* thẻ TikTok / CSV / Manual */
.pi-block {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 28px;
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 20px;
    padding: 30px 32px;
    margin-bottom: 20px;
    box-shadow: var(--shadow)
}

.pi-block .pi-bnum {
    grid-row: 1 / span 3
}

.pi-block h3 {
    margin-bottom: 6px
}

.pi-bdesc {
    color: var(--ink-2);
    font-size: 15px
}

.pi-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px !important
}

.pi-step {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-deep);
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    padding: 5px 12px;
    border-radius: 999px
}

.pi-step b {
    color: var(--brand);
    margin-right: 4px
}

/* ---------- SUPPORT ---------- */
.pi-sup-grid {
    margin-top: 40px !important
}

.pi-pillar>.col-inner {
    height: 100%;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow)
}

.pi-pillar-txt .pi-ic {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--brand-soft);
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 1
}

.pi-pb {
    font-weight: 700;
    color: var(--ink);
    margin: 12px 0 4px !important
}

.pi-ps {
    font-size: 14px;
    color: var(--ink-2)
}

.pi-timeline {
    position: relative;
    background: #F4FBF7;
    border: 1.5px solid #B9E6CC;
    border-radius: 20px;
    padding: 28px 28px 28px 60px
}

.pi-timeline h3 {
    font-size: 19px;
    margin: 0 0 20px -32px
}

/* đường nét đứt nối các mốc */
.pi-timeline::before {
    content: "";
    position: absolute;
    left: 37px;
    top: 86px;
    bottom: 36px;
    border-left: 2px dashed #9ad0a8
}

.pi-tl {
    position: relative;
    margin-bottom: 20px !important
}

.pi-tl:last-child {
    margin-bottom: 0 !important
}

.pi-tl::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-ring)
}

.pi-tl strong {
    display: block;
    color: var(--ink)
}

.pi-tl span {
    font-size: 14px;
    color: var(--ink-2)
}

/* ---------- FAQ (Accordion của Flatsome) ---------- */
.pi-acc {
    max-width: 820px;
    margin: 36px auto 0;
    display: grid;
    gap: 10px
}

.pi-acc .accordion-item {
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden
}

.pi-acc .accordion-title {
    position: relative;
    display: block;
    padding: 16px 52px 16px 20px;
    border: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    background: none !important
}

.pi-acc .accordion-title .toggle {
    display: none
}

.pi-acc .accordion-title::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    line-height: 1;
    font-weight: 400;
    color: var(--brand)
}

.pi-acc .accordion-title.active::after {
    content: "–"
}

.pi-acc .accordion-item:has(.accordion-title.active) {
    border-color: var(--brand-line);
    background: #F4FBF7
}

.pi-acc .accordion-inner {
    padding: 0 20px 16px
}

.pi-acc .accordion-inner p {
    color: var(--ink-2);
    font-size: 15px
}

.pi-acc .accordion-inner a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: underline
}

/* ---------- Tablet / mobile ---------- */
@media (max-width:849px) {
    /* lề 2 bên 20px như trang About */
    .pi-sec>.section-content>.row {
        padding-left: 5px;
        padding-right: 5px
    }

    .pi-api-head {
        grid-template-columns: auto 1fr;
        padding: 24px !important
    }

    .pi-api-btn {
        grid-column: 1 / -1
    }

    .pi-api-btn .button.pi-btn {
        width: 100%
    }

    .pi-api-col+.pi-api-col>.col-inner {
        border-left: 0;
        border-top: 1px solid var(--sep)
    }

    .pi-api-col>.col-inner {
        padding: 20px 24px
    }

    .pi-api-steps li {
        white-space: normal
    }

    .pi-ep td {
        white-space: normal;
        padding: 9px 10px
    }

    .pi-ep td:first-child {
        width: 78px
    }

    .pi-ep td:nth-child(2) {
        width: 62px;
        white-space: nowrap
    }

    .pi-ep td:nth-child(2) .pi-verb {
        display: inline-block;
        margin: 1px 0
    }

    .pi-info {
        grid-template-columns: 64px 1fr
    }

    .pi-info code,
    .pi-info .pi-dd {
        white-space: normal;
        overflow: visible;
        word-break: break-word
    }

    .pi-block {
        grid-template-columns: 1fr;
        row-gap: 16px;
        padding: 24px
    }

    .pi-block .pi-bnum {
        grid-row: auto
    }

    .pi-mcard>.col-inner {
        min-height: 0
    }
}

@media (max-width:600px) {
    .pi-sec {
        padding: 48px 0 !important
    }

    .pi-h1 h1 {
        font-size: 28px
    }

    .pi-h2 h2 {
        font-size: 23px
    }

    .pi-sec h3 {
        font-size: 18px
    }

    .pi-sub p {
        font-size: 15px;
        margin-top: 8px
    }

    .pi-crumb p {
        font-size: 12px;
        margin-bottom: 10px
    }

    .pi-intro p {
        font-size: 14px
    }

    /* Hero: 4 thẻ dạng hàng ngang gọn */
    .pi-hero {
        padding: 36px 0 44px !important
    }

    .pi-methods {
        margin-top: 24px !important
    }

    .pi-methods>.pi-mcard {
        padding-bottom: 10px
    }

    .pi-mcard>.col-inner {
        padding: 14px;
        border-radius: 14px
    }

    .pi-mcard>.col-inner:hover {
        transform: none
    }

    .pi-mcard-txt {
        display: grid;
        grid-template-columns: 44px 1fr 28px;
        grid-template-areas: "ico title go" "ico desc go";
        column-gap: 14px;
        row-gap: 2px;
        align-items: center
    }

    .pi-ico {
        grid-area: ico;
        width: 44px;
        height: 44px;
        font-size: 20px;
        border-radius: 10px;
        align-self: start
    }

    .pi-mtitle {
        grid-area: title;
        font-size: 16px
    }

    .pi-mdesc {
        grid-area: desc;
        font-size: 13px;
        line-height: 1.45
    }

    .pi-go {
        grid-area: go;
        border: 0;
        padding: 0
    }

    .pi-go a {
        font-size: 0
    }

    .pi-arr {
        width: 28px;
        height: 28px;
        font-size: 14px
    }

    .pi-go a::after {
        border-radius: 14px
    }

    .pi-mcard-txt .pi-num {
        top: 8px;
        left: 8px;
        right: auto;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--brand);
        color: #fff;
        font-size: 10.5px;
        display: grid;
        place-items: center
    }

    .pi-live {
        font-size: 9.5px;
        padding: 2px 7px;
        margin-left: 6px
    }

    /* chi tiết: số + tiêu đề cùng hàng, các bước xếp dọc */
    .pi-detail .pi-h2 {
        margin-bottom: 24px
    }

    .pi-bnum {
        width: 34px;
        height: 34px;
        font-size: 15px;
        box-shadow: 0 0 0 4px var(--brand-soft)
    }

    .pi-block {
        grid-template-columns: 34px 1fr;
        column-gap: 12px;
        row-gap: 0;
        padding: 18px 16px;
        border-radius: 14px;
        align-items: start;
        margin-bottom: 12px
    }

    .pi-block .pi-bnum {
        grid-row: 1 / span 3
    }

    .pi-block h3 {
        margin: 4px 0
    }

    .pi-bdesc {
        font-size: 14px
    }

    .pi-steps {
        flex-direction: column;
        gap: 6px;
        margin-top: 12px !important
    }

    .pi-step {
        background: none;
        border: 0;
        padding: 0;
        font-size: 13.5px;
        font-weight: 500;
        color: var(--ink)
    }

    .pi-step b {
        display: inline-grid;
        place-items: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--brand-soft);
        font-size: 11px;
        margin-right: 8px
    }

    .pi-api-head {
        grid-template-columns: 34px 1fr;
        gap: 12px;
        padding: 18px 16px !important;
        border-radius: 14px 14px 0 0;
        align-items: start
    }

    .pi-api-body {
        border-radius: 0 0 14px 14px;
        margin-bottom: 12px !important
    }

    .pi-api-title h3 {
        margin-top: 4px
    }

    .pi-api-title p {
        font-size: 14px
    }

    .pi-api-col>.col-inner {
        padding: 16px
    }

    .pi-api-steps li {
        font-size: 13.5px;
        gap: 10px
    }

    .pi-api-steps .pi-n {
        width: 22px;
        height: 22px;
        font-size: 11.5px
    }

    .pi-info code,
    .pi-info .pi-dd {
        font-size: 12.5px
    }

    .pi-ep {
        font-size: 12.5px
    }

    /* support: dạng danh sách icon trái */
    .pi-sup-grid {
        margin-top: 24px !important
    }

    .pi-pillars>.pi-pillar {
        padding-bottom: 10px
    }

    .pi-pillar>.col-inner {
        padding: 14px;
        border-radius: 14px
    }

    .pi-pillar-txt {
        display: grid;
        grid-template-columns: 38px 1fr;
        column-gap: 12px
    }

    .pi-pillar-txt .pi-ic {
        grid-row: span 2;
        width: 38px;
        height: 38px;
        font-size: 16px
    }

    .pi-pb {
        margin: 0 !important;
        font-size: 14.5px
    }

    .pi-ps {
        font-size: 13px
    }

    .pi-timeline {
        padding: 18px 16px 18px 44px;
        border-radius: 14px
    }

    .pi-timeline h3 {
        font-size: 16px;
        margin: 0 0 14px -28px
    }

    .pi-timeline::before {
        left: 25px;
        top: 62px;
        bottom: 26px
    }

    .pi-tl {
        margin-bottom: 14px !important
    }

    .pi-tl::before {
        left: -24px
    }

    .pi-tl span {
        font-size: 13px
    }

    .pi-acc {
        margin-top: 24px;
        gap: 8px
    }

    .pi-acc .accordion-title {
        padding: 14px 44px 14px 16px;
        font-size: 14.5px
    }

    .pi-acc .accordion-title::after {
        right: 16px
    }

    .pi-acc .accordion-inner {
        padding: 0 16px 14px
    }

    .pi-acc .accordion-inner p {
        font-size: 13.5px
    }
}

@media (prefers-reduced-motion:reduce) {
    .pi-sec *,
    .pi-sec *::before,
    .pi-sec *::after {
        transition: none !important
    }
}