/* ============================================================================
   NÚT CTA 2026 — MỘT NGUỒN DUY NHẤT CHO MỌI TRANG

   Kích thước lấy từ nút "Try For Free" trên menu (.sr-cta), đo trực tiếp:
     Golos Text 700 / 13px / line-height 1 / giãn chữ 0.08em / IN HOA
     đệm 15px 28px, viền 1px, bo 4px  ->  cao 45px

   Ba biến thể:
     chính        nền tím rgb(86,41,114), viền cùng màu, chữ trắng
     phụ          nền trong suốt, viền tím, chữ tím
     trên nền đậm nền trắng, viền trắng, chữ navy

   Hiệu ứng rê chuột (dùng chung, không nhấc không mờ):
     chính -> tím 500 | phụ -> tô đầy tím 700, chữ trắng | trắng -> tím 100

   NẠP CUỐI CÙNG. functions.php khai file này phụ thuộc vào file phủ của trang
   đang mở, vì vài bộ style cũ (blog/style.css, main.css) nạp sau ent-redesign
   và sẽ đè lên nếu đặt chung vào đó.

   Selector phải liệt kê theo từng trang vì markup cũ mỗi nơi một class. Tất
   cả đều có tiền tố body class hoặc .sr-export nên KHÔNG chạm tới trang nào
   chưa chuyển sang thiết kế 2026.

   Riêng nút trang chủ (.sr-btn) mang kích thước trong INLINE STYLE của bản
   export Figma (14px, đệm 20px 24px, cao 56px). Inline thắng mọi quy tắc
   thường nên mọi thuộc tính ghi đè ở đây phải có !important.
   ========================================================================== */

/* --- nền chung cho cả ba biến thể --------------------------------------- */
.sr-export .sr-btn,
.sr-paypal .pp-btn,
.sr-tools .generate-btn,
.sr-tools .try-free-btn,
.sr-tools .btn-primary,
.sr-tools .btn-outline,
.sr-tools #load-more,
.sr-blog .cta-black,
.sr-blog .bi-search__btn,
.sr-blog .bi-card__cta,
.sr-customers .btn-second,
.sr-pricing .btn-charge .ent-btn,
.sr-pricing .btn-charge .ent-btn2,
.sr-partners .ent-btn,
.sr-partners .ent-btn2,
.sr-partners .ent-btn3,
.sr-partners .wpcf7-submit,
.sr-contact .wpcf7-submit,
.sr-partners .paloadmore,
.sr-partners .lefttex_partner p a,
.sr-partners .left_text_pn p a,
.sr-partners .join_the_team p a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* Không ghim chiều cao: đệm + cỡ chữ + viền tự cho ra đúng 45px, giống
       hệt nút trên menu. Nhưng phải hạ chiều cao mà bản export/bộ style cũ
       ghim sẵn (56px ở trang chủ, 45px ở nút Submit). */
    height: auto !important;
    min-height: 0 !important;
    padding: 15px 28px !important;
    border: 1px solid var(--sr-purple-700) !important;
    border-radius: 4px !important;
    background: var(--sr-purple-700) !important;
    color: var(--sr-neutral-0) !important;
    font-family: var(--sr-font-menu) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none !important;
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Con trỏ tay chỉ cho nút bấm được thật. Nút chưa nhập link ở trang chủ được
   in ra <div> — vẫn đổi màu khi rê chuột cho đồng bộ, nhưng không giả vờ là
   thứ bấm được. */
a.sr-btn,
a.pp-btn,
.sr-tools .generate-btn,
.sr-tools .try-free-btn,
.sr-tools .btn-primary,
.sr-tools .btn-outline,
.sr-tools #load-more,
.sr-blog .cta-black,
.sr-blog .bi-search__btn,
.sr-blog .bi-card__cta,
.sr-customers .btn-second,
.sr-pricing .btn-charge .ent-btn,
.sr-partners .ent-btn,
.sr-partners .ent-btn2,
.sr-partners .ent-btn3,
.sr-partners .wpcf7-submit,
.sr-contact .wpcf7-submit,
.sr-partners .paloadmore {
    cursor: pointer;
}

.sr-export div.sr-btn,
.sr-paypal div.pp-btn {
    cursor: default;
}

/* Chữ nút ở trang chủ nằm trong <span> con, cỡ và màu cũng do inline style
   đặt — phải nhắm riêng, nếu không span giữ nguyên 14px/0.17em. */
.sr-export .sr-btn span,
.sr-paypal .pp-btn span,
.sr-blog .bi-search__btn span,
.sr-blog .bi-card__cta span {
    font-family: var(--sr-font-menu) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    color: inherit !important;
}

/* --- biến thể: nút phụ, viền rỗng --------------------------------------- */
.sr-export .sr-btn--outline,
.sr-paypal .pp-btn--outline,
.sr-tools .btn-outline,
.sr-blog .bi-card__cta,
.sr-partners .ent-btn3,
.sr-partners .lefttex_partner p a + a,
.sr-partners .left_text_pn p a + a {
    background: transparent !important;
    color: var(--sr-purple-700) !important;
}

/* --- biến thể: nút trắng đặt trên dải màu đậm --------------------------- */
.sr-export .sr-btn--light,
.sr-paypal .pp-btn--light,
.sr-customers .omg-customer-bottom-banner .btn-second,
.sr-partners .join_the_team p a,
.sr-partners .join_the_team .ent-btn,
.sr-partners .join_the_team .ent-btn2 {
    border-color: var(--sr-neutral-0) !important;
    background: var(--sr-neutral-0) !important;
    color: var(--sr-navy-900) !important;
}

/* --- biến thể: nút viền trắng đặt trên dải màu đậm -----------------------
   Trang PayPal có nút phụ nằm trên nền tím/navy: nền trong suốt, viền trắng,
   chữ trắng; rê chuột thì tô trắng, chữ chuyển sang navy. */
.sr-paypal .pp-btn--ghost {
    border-color: var(--sr-neutral-0) !important;
    background: transparent !important;
    color: var(--sr-neutral-0) !important;
}

.sr-paypal .pp-btn--ghost:hover {
    background: var(--sr-neutral-0) !important;
    color: var(--sr-navy-900) !important;
}

/* --- rê chuột ------------------------------------------------------------ */
.sr-export .sr-btn--primary:hover,
.sr-paypal .pp-btn--primary:hover,
.sr-tools .generate-btn:hover,
.sr-tools .try-free-btn:hover,
.sr-tools .btn-primary:hover,
.sr-tools #load-more:hover,
.sr-blog .cta-black:hover,
.sr-blog .bi-search__btn:hover,
.sr-pricing .btn-charge .ent-btn:hover,
.sr-pricing .btn-charge .ent-btn2:hover,
.sr-partners .ent-btn:hover,
.sr-partners .ent-btn2:hover,
.sr-partners .wpcf7-submit:hover,
.sr-contact .wpcf7-submit:hover,
.sr-partners .paloadmore:hover,
.sr-partners .lefttex_partner p a:hover,
.sr-partners .left_text_pn p a:hover {
    border-color: var(--sr-purple-500) !important;
    background: var(--sr-purple-500) !important;
    color: var(--sr-neutral-0) !important;
}

.sr-export .sr-btn--outline:hover,
.sr-paypal .pp-btn--outline:hover,
.sr-tools .btn-outline:hover,
.sr-blog .bi-card__cta:hover,
.sr-partners .ent-btn3:hover,
.sr-partners .lefttex_partner p a + a:hover,
.sr-partners .left_text_pn p a + a:hover {
    background: var(--sr-purple-700) !important;
    color: var(--sr-neutral-0) !important;
}

.sr-export .sr-btn--light:hover,
.sr-paypal .pp-btn--light:hover,
.sr-customers .omg-customer-bottom-banner .btn-second:hover,
.sr-partners .join_the_team p a:hover,
.sr-partners .join_the_team .ent-btn:hover,
.sr-partners .join_the_team .ent-btn2:hover {
    border-color: var(--sr-purple-100) !important;
    background: var(--sr-purple-100) !important;
    color: var(--sr-navy-900) !important;
}

.sr-export .sr-btn:focus-visible,
.sr-paypal .pp-btn:focus-visible,
.sr-blog .cta-black:focus-visible,
.sr-customers .btn-second:focus-visible,
.sr-pricing .btn-charge .ent-btn:focus-visible,
.sr-partners .ent-btn:focus-visible,
.sr-partners .ent-btn2:focus-visible,
.sr-partners .ent-btn3:focus-visible,
.sr-contact .wpcf7-submit:focus-visible {
    outline: 3px solid var(--sr-purple-500);
    outline-offset: 3px;
}

/* --- khác biệt riêng của từng trang ------------------------------------- */

/* Pricing: nút chiếm trọn bề ngang gói cho dễ bấm */
.sr-pricing .btn-charge .ent-btn,
.sr-pricing .btn-charge .ent-btn2 {
    width: 100%;
}

/* ============================================================================
   LINK CTA DẠNG CHỮ — kiểu "Learn more →" của trang chủ

   Mốc là .sr-more ở trang chủ (đo trực tiếp):
     Golos Text 700 / 14px / line-height 24px / giãn chữ 0.17em / IN HOA
     màu tím rgb(86,41,114), đệm dưới 2px
     rê chuột: mũi tên trượt 5px, gạch chân mọc từ 0 đến 100%, chữ sang tím 500

   Gạch chân vẽ bằng background-image chứ KHÔNG phải border-bottom: border sẽ
   đẩy dòng chữ nhích lên xuống mỗi lần rê chuột vào ra.

   Markup mỗi trang một kiểu và KHÔNG chỗ nào có sẵn mũi tên như bản export,
   nên thêm bằng ::after. Ở blog và partners, chữ nằm trong <div>/<span> bọc
   bởi thẻ <a> của cả tấm thẻ — hover phải bắt ở thẻ cha.
   ========================================================================== */

.sr-blog .readarticle,
.sr-blog .readarticle2,
.sr-partners .itemsyncpart .readm,
.sr-customers a.body-sm,
.sr-paypal .pp-more,
.sr-country .searchx-single-full a span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 2px;
    border: 0;
    font-family: var(--sr-font-menu);
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--sr-purple-700);
    text-decoration: none;
    white-space: nowrap;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: color 0.18s ease, background-size 0.24s ease;
}

/* Thẻ quốc gia đã có sẵn mũi tên <i class="fa-arrow-right"> trong markup nên
   không thêm ::after như bốn chỗ kia — sẽ thành hai mũi tên. */
.sr-country .searchx-single-full a span i {
    margin-left: 0;
    transition: transform 0.18s ease;
}

.sr-country .searchx-single-full a:hover span {
    color: var(--sr-purple-500);
    background-size: 100% 1px;
}

.sr-country .searchx-single-full a:hover span i {
    transform: translateX(5px);
}

/* "Read more" ở thẻ đối tác nằm cuối thẻ, đẩy xuống đáy cho các thẻ bằng nhau */
.sr-partners .itemsyncpart .readm {
    margin-top: auto;
    padding-top: 4px;
}

.sr-blog .readarticle::after,
.sr-blog .readarticle2::after,
.sr-partners .itemsyncpart .readm::after,
.sr-customers a.body-sm::after,
.sr-paypal .pp-more::after {
    content: '→';
    display: inline-block;
    transition: transform 0.18s ease;
}

.sr-blog a:hover .readarticle,
.sr-blog a:hover .readarticle2,
.sr-partners .itemsyncpart:hover .readm,
.sr-customers a.body-sm:hover,
.sr-paypal a.pp-more:hover {
    color: var(--sr-purple-500);
    background-size: 100% 1px;
}

.sr-blog a:hover .readarticle::after,
.sr-blog a:hover .readarticle2::after,
.sr-partners .itemsyncpart:hover .readm::after,
.sr-customers a.body-sm:hover::after,
.sr-paypal a.pp-more:hover::after {
    transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
    .sr-blog a:hover .readarticle,
    .sr-blog a:hover .readarticle2,
    .sr-partners .itemsyncpart:hover .readm,
    .sr-customers a.body-sm:hover,
    .sr-country .searchx-single-full a:hover span {
        background-size: 0% 1px;
    }

    .sr-blog a:hover .readarticle::after,
    .sr-blog a:hover .readarticle2::after,
    .sr-partners .itemsyncpart:hover .readm::after,
    .sr-customers a.body-sm:hover::after,
    .sr-country .searchx-single-full a:hover span i {
        transform: none;
    }
}