/* ============================================================================
   TRANG AFFILIATE PROGRAM — THIẾT KẾ 2026

   Template: page-affiliate-program.php. Không phủ lên bộ style cũ nào — trang
   này dựng mới hoàn toàn, viết tay từ ảnh thiết kế chứ không từ bản export
   Figma. Nhờ vậy markup sạch, mọi kích thước nằm ở đây chứ không nằm trong
   inline style như bốn trang app.

   Màu lấy bằng cách đo pixel trên ảnh thiết kế:
     hero      rgb(130,72,166) -> rgb(123,70,164)
     dải xám   rgb(246,246,246)
     dải bạc hà rgb(177,250,242) -> rgb(246,254,253)
     navy      rgb(26,55,89)   = --sr-navy-900
     dải CTA   rgb(98,56,124)  -> rgb(86,41,114) = --sr-purple-700

   MỤC LỤC
     1. Khung chung
     2. Hero + thẻ minh hoạ
     3. Dải số liệu
     4. Tiêu đề và thẻ dùng chung
     5. Bốn ứng dụng
     6. Vì sao chọn (navy)
     7. Ba bước
     8. Dải kêu gọi
     9. FAQ
    10. Mobile
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. KHUNG CHUNG
   --------------------------------------------------------------------------- */
.af-page {
    /* clip chứ không hidden: hidden ép overflow-y thành auto và <main> mọc
       thanh cuộn riêng — lỗi hai thanh cuộn đã gặp ở trang chủ. */
    overflow-x: clip;
    font-family: var(--sr-font);
    color: var(--sr-neutral-700);
    background: var(--sr-neutral-0);
}

.af-wrap {
    width: 100%;
    max-width: var(--sr-container);
    margin: 0 auto;
    padding: 0 var(--sr-gutter);
    box-sizing: border-box;
}

.af-sec {
    padding: clamp(56px, 7vw, 96px) 0;
}

.af-sec--white { background: var(--sr-neutral-0); }
.af-sec--grey  { background: rgb(246, 246, 246); }
.af-sec--navy  { background: var(--sr-navy-900); }

.af-sec--mint {
    background: linear-gradient(180deg, rgb(177, 250, 242) 0%, rgb(246, 254, 253) 100%);
}

/* ---------------------------------------------------------------------------
   2. HERO
   --------------------------------------------------------------------------- */
.af-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(110deg, rgb(130, 72, 166) 0%, rgb(118, 66, 160) 100%);
    padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 104px);
}

/* Vệt sáng tròn góc phải, đúng chỗ bản thiết kế đặt. Dùng % + translate nên
   tự theo màn hình, không ghim toạ độ 1440 như bản export. */
.af-hero__glow {
    position: absolute;
    top: -28%;
    right: -6%;
    width: 760px;
    height: 760px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 68%);
    pointer-events: none;
}

.af-hero__inner {
    position: relative;
    z-index: 1;
    text-align: left;
    display: grid;
    /* Thẻ hẹp hơn bản thiết kế một chút: khung nội dung của site rộng 1120px
       trong khi thiết kế vẽ trên 1280px, nên phải nhường bề ngang cho cột chữ
       — không thì tiêu đề vỡ 4 dòng thay vì 3. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: clamp(28px, 3.5vw, 48px);
    align-items: center;
}

.af-badge {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    font-family: var(--sr-font-menu);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sr-neutral-0);
}

/* main.css có luật trần `h1 { text-align: center }` — nó không thua class nào
   vì thắng theo thứ tự nạp, nên phải ghi rõ ở đây chứ không dựa vào thừa kế từ
   .af-hero__inner. Thiếu dòng này tiêu đề dồn giữa và vỡ 4 dòng. */
.af-hero__title {
    text-align: left;
    margin: 24px 0 0;
    font-family: 'Phudu', var(--sr-font);
    font-size: clamp(32px, 4.1vw, 50px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--sr-neutral-0);
}

.af-hero__desc {
    margin: 20px 0 0;
    max-width: 56ch;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

.af-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 32px;
}

.af-hero__link {
    font-family: var(--sr-font-menu);
    font-size: 15px;
    font-weight: 600;
    color: var(--sr-neutral-0);
    text-decoration: none;
}

.af-hero__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- thẻ bảng điều khiển minh hoạ --------------------------------------- */
.af-card {
    background: var(--sr-neutral-0);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.3);
}

.af-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sr-neutral-100);
}

.af-card__avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--sr-purple-100);
}

.af-card__who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: auto;
    min-width: 0;
}

.af-card__who b { font-size: 15px; font-weight: 700; color: var(--sr-navy-900); }
.af-card__who i { font-size: 13px; font-style: normal; color: var(--sr-neutral-500); }

.af-card__badge {
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgb(240, 240, 243);
    font-size: 12px;
    font-weight: 600;
    color: var(--sr-neutral-700);
}

.af-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

.af-card__stat {
    padding: 14px 16px;
    border-radius: 10px;
    background: rgb(246, 246, 248);
}

.af-card__stat span { display: block; font-size: 13px; color: var(--sr-neutral-500); }
.af-card__stat b { display: block; margin-top: 6px; font-size: 24px; font-weight: 700; color: var(--sr-navy-900); }
.af-card__stat b.is-blue { color: rgb(29, 120, 180); }

.af-card__chart-label {
    margin: 20px 0 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sr-neutral-500);
}

/* Biểu đồ cột: chiều cao từng cột đặt bằng inline style ở template để sau này
   chỉnh một chỗ, còn màu và khoảng cách nằm đây. */
.af-card__chart {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 110px;
    margin-top: 12px;
}

.af-card__chart i {
    flex: 1 1 0;
    border-radius: 6px;
    background: var(--sr-purple-100);
}

.af-card__chart i.is-dark   { background: var(--sr-purple-700); }
.af-card__chart i.is-bright { background: rgb(150, 70, 230); }

/* ---------------------------------------------------------------------------
   3. DẢI SỐ LIỆU
   --------------------------------------------------------------------------- */
.af-bar {
    background: rgb(246, 246, 246);
    border-bottom: 1px solid var(--sr-neutral-100);
    padding: 20px 0;
}

.af-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
}

.af-bar__label {
    font-family: var(--sr-font-menu);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sr-neutral-500);
}

.af-bar__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.af-bar__list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--sr-navy-900);
}

.af-bar__emoji { font-size: 16px; line-height: 1; }

/* ---------------------------------------------------------------------------
   4. TIÊU ĐỀ VÀ THẺ DÙNG CHUNG
   --------------------------------------------------------------------------- */
.af-h2 {
    margin: 0;
    font-family: 'Phudu', var(--sr-font);
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-align: center;
    text-transform: uppercase;
    color: var(--sr-navy-900);
}

.af-h2--light { color: var(--sr-neutral-0); }
.af-h2--teal  { color: rgb(20, 90, 100); }

.af-lead {
    max-width: 62ch;
    margin: 16px auto 0;
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    color: var(--sr-neutral-700);
}

.af-lead--light { color: rgba(255, 255, 255, 0.82); }

.af-grid {
    display: grid;
    gap: 24px;
    margin-top: clamp(36px, 5vw, 56px);
}

.af-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.af-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Dải quyền lợi có 5 thẻ trên lưới 3 cột: hai thẻ cuối dồn vào giữa thay vì
   dạt trái, đúng như bản thiết kế.
   Làm bằng lưới 6 cột, mỗi thẻ chiếm 2 — KHÔNG dùng margin-left: 50% vì margin
   ăn vào bề ngang ô lưới, hai thẻ cuối sẽ hẹp còn nửa so với ba thẻ trên.
   :nth-last-child đếm ngược nên quy tắc không phụ thuộc số thẻ admin nhập. */
.af-grid--center {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.af-grid--center > * { grid-column: span 2; }
.af-grid--center > :nth-child(3n + 1):nth-last-child(2) { grid-column: 2 / span 2; }

.af-tile {
    padding: 28px 24px;
    border-radius: 12px;
    background: var(--sr-neutral-0);
    box-shadow: inset 0 0 0 1px var(--sr-neutral-100);
}

.af-tile--flat { background: transparent; }

.af-tile h3 {
    margin: 16px 0 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sr-navy-900);
}

.af-tile p {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sr-neutral-700);
}

.af-icon {
    display: block;
    width: 26px;
    height: 26px;
    color: var(--sr-purple-500);
}

/* ---------------------------------------------------------------------------
   5. BỐN ỨNG DỤNG
   --------------------------------------------------------------------------- */
.af-app {
    padding: 28px;
    border-radius: 14px;
    background: var(--sr-neutral-0);
    box-shadow: 0 18px 34px -26px rgba(0, 0, 0, 0.3);
}

.af-app__logo {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: contain;
}

.af-app h3 {
    margin: 18px 0 0;
    font-size: 20px;
    font-weight: 700;
    color: rgb(20, 90, 100);
}

.af-app p {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sr-neutral-700);
}

.af-app__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-family: var(--sr-font-menu);
    font-size: 15px;
    font-weight: 600;
    color: var(--sr-navy-900);
    text-decoration: none;
}

.af-app__link svg { width: 18px; height: 18px; color: var(--sr-purple-700); transition: transform 0.15s ease; }
.af-app__link:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------------------------
   6. VÌ SAO CHỌN
   --------------------------------------------------------------------------- */
.af-stat b {
    display: block;
    font-family: 'Phudu', var(--sr-font);
    font-size: clamp(38px, 4.4vw, 54px);
    font-weight: 700;
    line-height: 1;
    color: rgb(125, 196, 240);
}

.af-stat h3 {
    margin: 14px 0 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--sr-neutral-0);
}

.af-stat p {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

/* ---------------------------------------------------------------------------
   7. BA BƯỚC
   --------------------------------------------------------------------------- */
.af-steps {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    counter-reset: none;
}

.af-steps__no {
    display: block;
    font-family: 'Phudu', var(--sr-font);
    font-size: 20px;
    font-weight: 700;
    color: var(--sr-purple-500);
}

/* ---------------------------------------------------------------------------
   8. DẢI KÊU GỌI
   --------------------------------------------------------------------------- */
.af-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 8vw, 104px) 0;
    background: linear-gradient(90deg, rgb(98, 56, 124) 0%, var(--sr-purple-700) 55%);
    text-align: center;
}

.af-cta__glow {
    position: absolute;
    left: -180px;
    top: 50%;
    transform: translateY(-50%);
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.af-cta__inner { position: relative; z-index: 1; }
.af-cta__inner .af-btn { margin-top: 32px; }

/* ---------------------------------------------------------------------------
   9. FAQ
   --------------------------------------------------------------------------- */
.af-faq {
    max-width: 860px;
    margin: clamp(36px, 5vw, 56px) auto 0;
}

.af-faq__item {
    border-bottom: 1px solid rgb(226, 226, 229);
}

.af-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0;
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
    color: var(--sr-navy-900);
    list-style: none;
}

/* Safari vẽ tam giác riêng, không theo list-style. */
.af-faq__item summary::-webkit-details-marker { display: none; }

.af-faq__item summary svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--sr-navy-900);
    transition: transform 0.2s ease;
}

.af-faq__item[open] summary svg { transform: rotate(90deg); }

.af-faq__item p {
    margin: 0 0 22px;
    padding-right: 46px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--sr-neutral-700);
}

/* ---------------------------------------------------------------------------
   10. MOBILE
   --------------------------------------------------------------------------- */
@media (max-width: 980px) {
    .af-hero__inner { grid-template-columns: minmax(0, 1fr); }
    .af-grid--2,
    .af-grid--3 { grid-template-columns: minmax(0, 1fr); }

    /* Bỏ phần dồn giữa của dải quyền lợi: một cột thì không còn chỗ mà dồn. */
    .af-grid--center { grid-template-columns: minmax(0, 1fr); }
    .af-grid--center > *,
    .af-grid--center > :nth-child(3n + 1):nth-last-child(2) { grid-column: auto; }
}

@media (max-width: 600px) {
    .af-bar__inner { flex-direction: column; align-items: flex-start; }
    .af-card__stats { grid-template-columns: 1fr; }
    .af-hero__actions { flex-direction: column; align-items: stretch; }
    .af-hero__link { text-align: center; }
    .af-faq__item p { padding-right: 0; }
}