/* ============================================================================
   NHÓM TRANG "FREE TOOLS" — THIẾT KẾ 2026

   Sáu trang trong menu Free Tools chạy trên bốn template khác nhau, mỗi cái
   một bộ class riêng và một ngôn ngữ hình ảnh riêng (xanh dương gradient,
   thẻ xám, Tailwind utility…). File này là LỚP PHỦ kéo cả bốn về hệ thiết kế
   2026 mà không đụng vào template — xem [[styling-overlay-approach]].

       page-tools.php            .hero / .step-item / .agreement-card / .law-card
       page-fee.php              .security-banner / .content-section / .rates-table
       page-tool-đisclaimer.php  .hero-section / .feature-card / .type-card
       page-tool-currency.php    class tiện ích Tailwind

   MỤC LỤC
     1. Nền chung: cột nội dung, chữ, thẻ
     2. Hero
     3. Nút
     4. Riêng page-tools.php  (3 trang generator)
     5. Riêng page-fee.php
     6. Riêng disclaimer
     7. Riêng currency converter
     8. Mobile
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. NỀN CHUNG
   --------------------------------------------------------------------------- */
.sr-tools {
    font-family: var(--sr-font);
    color: var(--sr-neutral-700);
}

.sr-tools .container,
.sr-tools .ent-container,
.sr-tools .laws-container,
.sr-tools .main-content {
    width: 100%;
    max-width: var(--sr-container) !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sr-gutter);
    padding-right: var(--sr-gutter);
    box-sizing: border-box;
}

.sr-tools h1,
.sr-tools h2,
.sr-tools h3,
.sr-tools .hero-title,
.sr-tools .section-title {
    font-family: 'Phudu', var(--sr-font);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sr-navy-900);
}

.sr-tools h2,
.sr-tools .section-title {
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.1;
}

.sr-tools h3 {
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.2;
}

.sr-tools p,
.sr-tools li {
    font-family: var(--sr-font);
    line-height: 1.6;
    color: var(--sr-neutral-700);
}

/* Thẻ: nền trắng, viền 1px, bo 16, nhấc nhẹ khi rê chuột — cùng ngôn ngữ với
   thẻ ở trang chủ và các trang app. */
.sr-tools .agreement-card,
.sr-tools .law-card,
.sr-tools .feature-card,
.sr-tools .type-card,
.sr-tools .benefit-card,
.sr-tools .other-fees-card,
.sr-tools .step-content {
    background: var(--sr-neutral-0) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: inset 0 0 0 1px rgb(219, 221, 225) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    .sr-tools .agreement-card:hover,
    .sr-tools .law-card:hover,
    .sr-tools .feature-card:hover,
    .sr-tools .type-card:hover,
    .sr-tools .benefit-card:hover {
        transform: translateY(-6px);
        box-shadow: inset 0 0 0 1px rgb(219, 221, 225),
                    0 40px 40px -24px rgba(0, 0, 0, 0.12) !important;
    }
}

/* Icon tròn trong thẻ đổi sang tím thương hiệu. */
.sr-tools .card-icon,
.sr-tools .law-icon,
.sr-tools .feature-icon,
.sr-tools .type-icon,
.sr-tools .benefit-icon,
.sr-tools .tool-icon,
.sr-tools .step-icon,
.sr-tools .app-icon,
.sr-tools .step-number {
    background: var(--sr-purple-100) !important;
    color: var(--sr-purple-700) !important;
}

.sr-tools .step-number {
    background: var(--sr-purple-500) !important;
    color: var(--sr-neutral-0) !important;
}

/* Icon bên trong thường là <svg> mang màu riêng — ép theo màu của ô.
   .tool-icon / .step-icon / .app-icon ở trang disclaimer vốn là ô gradient
   xanh dương với icon trắng; đưa về cùng ô tím nhạt icon tím như các ô kia. */
.sr-tools .card-icon svg,
.sr-tools .law-icon svg,
.sr-tools .feature-icon svg,
.sr-tools .type-icon svg,
.sr-tools .benefit-icon svg,
.sr-tools .tool-icon svg,
.sr-tools .step-icon svg,
.sr-tools .app-icon svg {
    color: var(--sr-purple-700) !important;
    fill: currentColor;
}

/* ---------------------------------------------------------------------------
   2. HERO — cả bốn template đều mở đầu bằng một dải màu; đổi sang gradient
      navy → tím của hệ 2026 thay cho xanh dương cũ.
   --------------------------------------------------------------------------- */
.sr-tools .hero,
.sr-tools .hero-section,
.sr-tools .page-header {
    background: linear-gradient(135deg, var(--sr-navy-900) 0%, var(--sr-purple-700) 100%) !important;
    color: var(--sr-neutral-0);

    /* Template cũ đặt hero bên trong .ent-container nên dải màu chỉ rộng bằng
       cột nội dung. Kéo ra hết bề ngang như hero của các trang 2026 khác, rồi
       trả lề lại bằng đệm để chữ vẫn thẳng cột nội dung. */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: none !important;
    width: auto !important;
    padding-left: max(var(--sr-gutter), calc((100vw - var(--sr-container)) / 2)) !important;
    padding-right: max(var(--sr-gutter), calc((100vw - var(--sr-container)) / 2)) !important;
    padding-top: clamp(48px, 6vw, 88px) !important;
    padding-bottom: clamp(48px, 6vw, 88px) !important;
}

/* .page-header (trang tính phí PayPal) vốn đã chạy hết bề ngang — bỏ phần
   kéo lề âm để nó không thừa ra hai bên. */
.sr-tools .page-header {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Hero của disclaimer có .container riêng bên trong — bỏ đệm kép. */
.sr-tools .hero-section > .container {
    padding-left: 0;
    padding-right: 0;
    max-width: none !important;
}

.sr-tools .hero h1,
.sr-tools .hero-section .hero-title,
.sr-tools .hero-section h1,
.sr-tools .page-header h1,
.sr-tools .page-header h2 {
    font-family: 'Phudu', var(--sr-font);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.1;
    color: var(--sr-neutral-0) !important;
}

.sr-tools .hero p,
.sr-tools .hero li,
.sr-tools .hero-section .hero-description,
.sr-tools .hero-section p,
.sr-tools .page-header p,
.sr-tools .page-header li {
    color: rgba(255, 255, 255, 0.88) !important;
}

.sr-tools .hero-badge,
.sr-tools .hero-badge span {
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: var(--sr-neutral-0) !important;
    -webkit-text-fill-color: var(--sr-neutral-0);
}

.sr-tools .hero-badge span {
    background: none !important;
}

/* Cụm chữ được tô màu trong tiêu đề hero. */
.sr-tools .gradient-text {
    background: none !important;
    -webkit-text-fill-color: var(--sr-purple-200) !important;
    color: var(--sr-purple-200) !important;
}

/* ---------------------------------------------------------------------------
   3. NÚT — kích thước và hiệu ứng do styles/ent-buttons.css lo, ở đây chỉ gỡ
      nền cũ của template.
   --------------------------------------------------------------------------- */
.sr-tools .generate-btn,
.sr-tools .try-free-btn,
.sr-tools .btn-primary,
.sr-tools .btn-outline {
    /* Kích thước và hiệu ứng rê chuột do styles/ent-buttons.css lo; ở đây chỉ
       gỡ nền gradient cũ của template. */
    background-image: none !important;
    text-decoration: none;
}

/* Icon trong nút cao 20px sẽ tự quyết định chiều cao nút (52px thay vì 45px
   như nút chuẩn). Hạ xuống bằng cỡ chữ. */
.sr-tools .btn svg,
.sr-tools .generate-btn svg,
.sr-tools .try-free-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Nút chính trong hero của ba trang generator: nền tím đậm chìm vào dải
   gradient navy → tím. Đổi sang nút trắng như hero các trang 2026 khác. */
.sr-tools .hero .generate-btn {
    border-color: var(--sr-neutral-0) !important;
    background: var(--sr-neutral-0) !important;
    color: var(--sr-navy-900) !important;
}

.sr-tools .hero .generate-btn:hover {
    border-color: var(--sr-purple-100) !important;
    background: var(--sr-purple-100) !important;
    color: var(--sr-navy-900) !important;
}

/* Nút phụ nằm trên nền hero đậm: viền trắng, chữ trắng. */
.sr-tools .hero-section .btn-outline {
    border-color: var(--sr-neutral-0) !important;
    background: transparent !important;
    color: var(--sr-neutral-0) !important;
}

.sr-tools .hero-section .btn-outline:hover {
    background: var(--sr-neutral-0) !important;
    color: var(--sr-navy-900) !important;
}

/* ---------------------------------------------------------------------------
   4. RIÊNG page-tools.php — ba trang generator
   --------------------------------------------------------------------------- */
/* Khung generator đặt overflow-x: hidden để tấm mockup nghiêng 3D trong hero
   khỏi đẩy ra thanh cuộn ngang. Nhưng nó cắt luôn phần hero kéo hết bề ngang
   ở mục 2, làm dải màu chỉ rộng bằng cột nội dung. Trả khung về visible và
   chuyển việc cắt xuống chính hero — hero đã rộng đúng bằng màn hình. */
#tnc-generator-section-wrapper,
#srp-generator-section-wrapper {
    overflow: visible !important;
    font-family: var(--sr-font) !important;
}

.sr-tools .hero {
    overflow: hidden !important;
}

/* page-tools.php gói toàn bộ style gốc sau #tnc-generator-section-wrapper /
   #srp-generator-section-wrapper — độ ưu tiên 110, cao hơn .sr-tools .x (20),
   nên phần lớn mục 1 và 2 ở trên thua. Nhắc lại kèm !important ở đây, và CHỈ
   trong hai khung đó: .sr-tools là class trên <body> nên nếu đặt !important
   thẳng vào .sr-tools p / .sr-tools li thì dính cả menu và chân trang.

   Tiêu đề và chữ chạy: cỡ, độ đậm, màu theo hệ 2026. */
#tnc-generator-section-wrapper .section-header h2,
#srp-generator-section-wrapper .section-header h2 {
    font-size: clamp(28px, 3.4vw, 44px) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    color: var(--sr-navy-900) !important;
}

#tnc-generator-section-wrapper h3,
#srp-generator-section-wrapper h3 {
    font-size: clamp(18px, 1.6vw, 22px) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: var(--sr-navy-900) !important;
}

#tnc-generator-section-wrapper .hero-text h1,
#srp-generator-section-wrapper .hero-text h1 {
    font-size: clamp(32px, 4vw, 52px) !important;
    line-height: 1.1 !important;
}

#tnc-generator-section-wrapper .section-header p,
#tnc-generator-section-wrapper .card-text p,
#tnc-generator-section-wrapper .law-text p,
#tnc-generator-section-wrapper .step-content p,
#srp-generator-section-wrapper .section-header p,
#srp-generator-section-wrapper .card-text p,
#srp-generator-section-wrapper .law-text p,
#srp-generator-section-wrapper .step-content p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--sr-neutral-700) !important;
}

.sr-tools .steps-section,
.sr-tools .agreements-section,
.sr-tools .global-laws-section,
.sr-tools .faq-section {
    background: var(--sr-neutral-0) !important;

    /* Bốn dải này nằm trong .ent-container nên nền màu chỉ rộng bằng cột nội
       dung, nhìn như bị hụt hai bên. Kéo hết bề ngang rồi trả lề bằng đệm,
       cùng cách với hero ở mục 2. */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: none !important;
    width: auto !important;
    padding-left: max(var(--sr-gutter), calc((100vw - var(--sr-container)) / 2)) !important;
    padding-right: max(var(--sr-gutter), calc((100vw - var(--sr-container)) / 2)) !important;
    padding-top: clamp(56px, 7vw, 104px) !important;
    padding-bottom: clamp(56px, 7vw, 104px) !important;
}

/* Khung con bên trong đã tự canh giữa; bỏ đệm 20px của bản gốc để chữ thẳng
   cột với hero và với các trang 2026 khác. */
.sr-tools .hero .hero-content,
.sr-tools .steps-section > .container,
.sr-tools .agreements-section > .container,
.sr-tools .global-laws-section > .container,
.sr-tools .faq-section > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Xen kẽ trắng / tím nhạt cho bốn dải nối nhau: steps – agreements –
   global-laws – faq. Bản gốc dùng #f8f9fa xám và để hai dải xám dính liền
   nhau ở cuối trang nên mất ranh giới. */
.sr-tools .steps-section,
.sr-tools .global-laws-section {
    background: rgb(248, 244, 255) !important;
}

/* Cụm chữ được nhấn trong tiêu đề FAQ vẫn là navy cũ #1e2c5e. */
.sr-tools .section-header h2 span {
    color: var(--sr-purple-700) !important;
}

/* .card-icon trong thẻ "Establish clear rules" chỉ là cái <svg> 48px trần —
   nền tím ở mục 1 đắp vào thành mảng vuông. Nắn thành huy hiệu tròn cho
   giống .law-icon ở dải bên dưới. */
.sr-tools .agreement-card .card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.sr-tools .agreement-card .card-icon svg {
    width: 30px !important;
    height: 30px !important;
}

/* Icon nhỏ đứng trước tiêu đề từng bước vẫn là navy cũ #1e2c5e. */
.sr-tools .step-content .icon {
    color: var(--sr-purple-700) !important;
}

/* --- accordion FAQ ------------------------------------------------------
   Bản gốc: gạch ngang #e0e0e0, câu hỏi Poppins 16/600 màu #212529, câu trả
   lời #6c757d. Kéo về chữ và màu của hệ 2026. */
.sr-tools .faq-item,
.sr-tools .faq-item:first-child {
    border-color: rgb(219, 221, 225) !important;
}

.sr-tools .faq-question {
    gap: 16px;
    font-family: var(--sr-font) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: var(--sr-navy-900) !important;
}

.sr-tools .faq-question:hover {
    color: var(--sr-purple-700) !important;
}

.sr-tools .faq-question:focus-visible {
    outline: 3px solid var(--sr-purple-500);
    outline-offset: 3px;
}

.sr-tools .faq-question .arrow {
    flex-shrink: 0;
    color: var(--sr-purple-700) !important;
}

.sr-tools .faq-answer {
    font-family: var(--sr-font) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--sr-neutral-700) !important;
}

.sr-tools .section-header h2 {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.sr-tools .steps-timeline::before,
.sr-tools .step-item::before {
    background: var(--sr-purple-200) !important;
}

/* ---------------------------------------------------------------------------
   5. RIÊNG page-fee.php
   --------------------------------------------------------------------------- */
.sr-tools .security-banner {
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--sr-navy-900) 0%, var(--sr-purple-700) 100%) !important;
    color: var(--sr-neutral-0);
}

.sr-tools .security-banner h3,
.sr-tools .security-banner p {
    color: var(--sr-neutral-0) !important;
}

/* Ba vòng tròn "How it works" và mũi tên bên trong vẫn là xanh dương cũ. */
.sr-tools .how-to-use-icon {
    background-color: var(--sr-purple-100) !important;
}

.sr-tools .how-to-use-icon svg {
    stroke: var(--sr-purple-700) !important;
    color: var(--sr-purple-700) !important;
}

/* Hai nút riêng của trang này không nằm trong bộ nút chung: nút "Calculate"
   nền navy #2b3a67 bo 8, nút CTA trên hero bo 16 chữ thường. */
.sr-tools .calculate-button,
.sr-tools .paypal-fee-cta-button {
    padding: 15px 28px !important;
    border: 1px solid var(--sr-purple-700) !important;
    border-radius: var(--sr-radius) !important;
    background-color: 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;
    box-shadow: none !important;
}

.sr-tools .calculate-button:hover {
    border-color: var(--sr-purple-500) !important;
    background-color: var(--sr-purple-500) !important;
}

/* Nút CTA nằm trên dải hero đậm nên đảo thành nút trắng. */
.sr-tools .page-header .paypal-fee-cta-button {
    border-color: var(--sr-neutral-0) !important;
    background-color: var(--sr-neutral-0) !important;
    color: var(--sr-navy-900) !important;
}

.sr-tools .page-header .paypal-fee-cta-button:hover {
    border-color: var(--sr-purple-100) !important;
    background-color: var(--sr-purple-100) !important;
}

/* Liên kết trong phần chữ vẫn là navy cũ. */
.sr-tools .domestic-rates-text a {
    color: var(--sr-purple-700) !important;
}

.sr-tools .rates-table {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgb(219, 221, 225);
    border-collapse: separate;
    border-spacing: 0;
}

.sr-tools .rates-table th {
    background: rgb(248, 244, 255) !important;
    font-family: var(--sr-font-menu);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sr-purple-700) !important;
}

.sr-tools .rates-table td,
.sr-tools .rates-table th {
    border-color: rgb(230, 232, 236) !important;
}

/* ---------------------------------------------------------------------------
   6. RIÊNG disclaimer
   --------------------------------------------------------------------------- */
.sr-tools .section-muted {
    background: rgb(248, 244, 255) !important;
}

/* Vài dải không bọc h2 trong .section-header nên tiêu đề dạt trái, số còn
   lại canh giữa. Canh giữa hết cho đều. */
.sr-tools .section-title {
    text-align: center;
}

/* Huy hiệu "100% Free" nằm đè lên ảnh hero, nền trắng — nhưng nó vẫn ở trong
   .hero-section nên dính luật chữ trắng ở mục 2 và biến mất. */
.sr-tools .hero-section .floating-badge .badge-title {
    color: var(--sr-navy-900) !important;
}

.sr-tools .hero-section .floating-badge .badge-subtitle {
    color: var(--sr-neutral-500) !important;
}

.sr-tools .hero-section .floating-badge .badge-icon {
    background-color: var(--sr-purple-100) !important;
    color: var(--sr-purple-700) !important;
}

.sr-tools .section-subtitle {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    color: var(--sr-neutral-700) !important;
}

.sr-tools .star {
    color: rgb(255, 193, 35) !important;
}

/* ---------------------------------------------------------------------------
   7. RIÊNG currency converter — template dùng class tiện ích Tailwind nên
      chỉ đổi được ở mức token màu và bo góc.
   --------------------------------------------------------------------------- */
/* Hero của trang này là <section class="bg-white"> — trắng trơn, khác hẳn dải
   navy → tím mở đầu của mọi trang 2026 khác. Template không có class riêng nên
   phải nhắm bằng vị trí: section đầu tiên trong <main>. page-fee.php cũng có
   <main> nhưng các section của nó không mang .bg-white. */
.sr-tools main > section.bg-white:first-child {
    background: linear-gradient(135deg, var(--sr-navy-900) 0%, var(--sr-purple-700) 100%) !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: none !important;
    width: auto !important;
    padding-left: max(var(--sr-gutter), calc((100vw - var(--sr-container)) / 2)) !important;
    padding-right: max(var(--sr-gutter), calc((100vw - var(--sr-container)) / 2)) !important;
    padding-top: clamp(48px, 6vw, 88px) !important;
    padding-bottom: clamp(48px, 6vw, 88px) !important;
}

.sr-tools main > section.bg-white:first-child > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
}

.sr-tools main > section.bg-white:first-child h1,
.sr-tools main > section.bg-white:first-child .text-navy {
    color: var(--sr-neutral-0) !important;
}

.sr-tools main > section.bg-white:first-child p {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Nút "Start Calculating": nền tím đậm chìm vào dải gradient. Đổi sang nút
   trắng, và về đúng hình dáng bộ nút 2026 (chữ hoa 13px, bo 4). */
.sr-tools main > section.bg-white:first-child .gradient-primary {
    padding: 15px 28px !important;
    border-radius: var(--sr-radius) !important;
    background: var(--sr-neutral-0) !important;
    color: var(--sr-navy-900) !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;
    box-shadow: none !important;
}

.sr-tools main > section.bg-white:first-child .gradient-primary:hover {
    background: var(--sr-purple-100) !important;
    opacity: 1 !important;
}

.sr-tools main > section.bg-white:first-child .gradient-primary svg {
    width: 14px !important;
    height: 14px !important;
}

.sr-tools .gradient-primary {
    background: var(--sr-purple-700) !important;
    color: var(--sr-neutral-0) !important;
}

.sr-tools .gradient-accent {
    background: var(--sr-purple-300) !important;
}

.sr-tools .text-navy {
    color: var(--sr-navy-900) !important;
}

.sr-tools .group-hover\:text-sky-blue,
.sr-tools .hover\:text-sky-blue:hover {
    color: var(--sr-purple-500) !important;
}

.sr-tools .rounded-xl,
.sr-tools .rounded-2xl {
    border-radius: 16px !important;
}

.sr-tools .shadow-sm,
.sr-tools .shadow-lg {
    box-shadow: inset 0 0 0 1px rgb(219, 221, 225) !important;
}

/* ---------------------------------------------------------------------------
   8. MOBILE
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .sr-tools .steps-section,
    .sr-tools .agreements-section,
    .sr-tools .global-laws-section {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .sr-tools .hero-content,
    .sr-tools .hero-grid,
    .sr-tools .domestic-rates-layout {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
    }

    /* Bảng phí rộng hơn màn hình thì cho cuộn ngang trong khung riêng. */
    .sr-tools .domestic-rates-table-wrapper,
    .sr-tools .rates-table-wrapper {
        overflow-x: auto;
    }
}

/* ---------------------------------------------------------------------------
   9. DANH SÁCH QUỐC GIA (/countries/ và trang chuyên mục)

   Template: archive-countries.php. Hero vốn là một tấm ảnh bầu trời cao
   1050px với chữ dồn xuống đáy; danh sách quốc gia do JS đổ vào #coutrylist
   dưới dạng <a><img><h3> trần, không có class riêng.
   --------------------------------------------------------------------------- */
.sr-tools .cutrxfull {
    /* Bỏ ảnh nền chung chung, dùng gradient của hệ 2026 và hạ chiều cao
       xuống mức của hero các trang khác. */
    background: linear-gradient(135deg, var(--sr-navy-900) 0%, var(--sr-purple-700) 100%) !important;
    min-height: 0 !important;
    height: auto !important;
    padding: clamp(56px, 7vw, 104px) max(var(--sr-gutter), calc((100% - var(--sr-container)) / 2)) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hero cũ gồm một tấm ảnh bầu trời <img> cao calc(100vh - 150px), một lớp
   phủ xanh :before, và cụm chữ đặt absolute đè lên. Bỏ cả ảnh lẫn lớp phủ,
   đưa cụm chữ về luồng — nền đã là gradient của hệ 2026 ở trên. */
.sr-tools .cutrxfull > img {
    display: none !important;
}

.sr-tools .cutrxfull::before,
.sr-tools .cutrxfull::after {
    display: none !important;
}

.sr-tools .cutrxfull .text-cont {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 !important;
    text-align: center;
}

.sr-tools .cutrxfull h1,
.sr-tools .cutrxfull h2 {
    font-family: 'Phudu', var(--sr-font);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.1;
    color: var(--sr-neutral-0) !important;
}

.sr-tools .cutrxfull p {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Ô tìm kiếm */
.sr-tools .searchx input[type="text"],
.sr-tools .searchx input[type="search"] {
    width: 100%;
    height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--sr-radius);
    background: var(--sr-neutral-0);
    font-family: var(--sr-font);
    font-size: 16px;
    color: var(--sr-navy-900);
}

.sr-tools .searchx input:focus-visible {
    outline: 3px solid var(--sr-purple-300);
    outline-offset: 2px;
}

/* Ba huy hiệu dưới ô tìm kiếm */
.sr-tools .searchxf_txt > * {
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: var(--sr-neutral-0) !important;
}

/* --- lưới quốc gia --- */
.sr-tools .cutrx {
    padding: clamp(56px, 7vw, 104px) 0;
}

.sr-tools .BrowseCountries {
    margin-bottom: clamp(32px, 4vw, 56px);
    text-align: center;
}

.sr-tools #coutrylist {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.sr-tools #coutrylist > a {
    display: block;
    overflow: hidden;
    border-radius: 16px;
    background: var(--sr-neutral-0);
    box-shadow: inset 0 0 0 1px rgb(219, 221, 225);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sr-tools #coutrylist > a img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.sr-tools #coutrylist > a h3 {
    margin: 0;
    padding: 16px 20px 20px;
    font-family: 'Phudu', var(--sr-font);
    font-size: 18px;
    line-height: 1.2;
    color: var(--sr-navy-900);
}

@media (hover: hover) {
    .sr-tools #coutrylist > a:hover {
        transform: translateY(-6px);
        box-shadow: inset 0 0 0 1px rgb(219, 221, 225),
                    0 40px 40px -24px rgba(0, 0, 0, 0.12);
    }

    .sr-tools #coutrylist > a:hover h3 {
        color: var(--sr-purple-700);
    }
}

@media (max-width: 1100px) {
    .sr-tools #coutrylist {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .sr-tools #coutrylist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .sr-tools #coutrylist {
        grid-template-columns: 1fr;
    }
}