/* ============================================================================
   TRANG /couriers/ — THIẾT KẾ 2026

   Template: archive-couriers.php. Bộ style gốc là styles/ent-couriers.css
   (dùng chung với trang chi tiết từng hãng vận chuyển). File này là LỚP PHỦ,
   không đụng vào template — xem [[styling-overlay-approach]].
   Body class .sr-couriers (functions.php).

   MỤC LỤC
     1. Dải mở đầu (trang danh sách)
     2. Cột nội dung
     3. Ô tìm kiếm và bộ lọc quốc gia
     4. Lưới thẻ hãng vận chuyển
     5. Phân trang
     6. Trang chi tiết một hãng (single-couriers.php)
     7. Mobile
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. DẢI MỞ ĐẦU

   Template không có khối hero: tiêu đề và mô tả nằm thẳng trong .couriers-intro,
   ngay trên .ent-container chứa danh sách. Nên đắp gradient lên CẢ section rồi
   trả nền trắng lại cho .ent-container — làm ngược lại (đắp nền lên riêng hai
   thẻ chữ) thì mỗi thẻ một hộp nền, không nối liền được.
   --------------------------------------------------------------------------- */
.sr-couriers .couriers-intro {
    padding-top: clamp(48px, 6vw, 88px) !important;
    padding-bottom: 0 !important;
    background: linear-gradient(135deg, var(--sr-navy-900) 0%, var(--sr-purple-700) 100%);
}

.sr-couriers .couriers-intro > .main-title {
    margin: 0 auto 16px;
    max-width: var(--sr-container);
    padding: 0 var(--sr-gutter);
    font-family: 'Phudu', var(--sr-font);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--sr-neutral-0);
}

.sr-couriers .couriers-intro > .couriers-intro-desc {
    margin: 0 auto clamp(48px, 6vw, 88px);
    max-width: 720px;
    padding: 0 var(--sr-gutter);
    font-family: var(--sr-font);
    font-size: 18px;
    line-height: 1.6;
    text-align: center;
    color: rgba(255, 255, 255, 0.88);
}

/* ---------------------------------------------------------------------------
   2. CỘT NỘI DUNG — 1120px như mọi trang 2026
   --------------------------------------------------------------------------- */
.sr-couriers .couriers-intro > .ent-container {
    /* Kéo hết bề ngang để nền trắng cắt ngang dải gradient ở trên, rồi trả lề
       lại bằng đệm nên cột nội dung vẫn đúng 1120px. */
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(40px, 5vw, 64px) max(var(--sr-gutter), calc((100vw - var(--sr-container)) / 2)) clamp(56px, 7vw, 104px);
    background: var(--sr-neutral-0);
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   3. Ô TÌM KIẾM VÀ BỘ LỌC QUỐC GIA
   --------------------------------------------------------------------------- */
.sr-couriers .omg-courier-search {
    gap: 16px;
    margin-bottom: 32px;
}

.sr-couriers .omg-courier-search input.form-control,
.sr-couriers .omg-courier-search select.jsslco {
    height: 52px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--sr-radius);
    background: var(--sr-neutral-0);
    box-shadow: inset 0 0 0 1px rgb(219, 221, 225);
    font-family: var(--sr-font);
    font-size: 16px;
    color: var(--sr-navy-900);
    box-sizing: border-box;
}

.sr-couriers .omg-courier-search input.form-control::placeholder {
    color: var(--sr-neutral-500);
}

.sr-couriers .omg-courier-search input.form-control:focus,
.sr-couriers .omg-courier-search select.jsslco:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--sr-purple-500), 0 0 0 3px var(--sr-purple-100);
}

/* ---------------------------------------------------------------------------
   4. LƯỚI THẺ HÃNG VẬN CHUYỂN
   --------------------------------------------------------------------------- */
.sr-couriers .omg-courier-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.sr-couriers .omg-courier-list > .gutters-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 0;
    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;
}

@media (hover: hover) {
    .sr-couriers .omg-courier-list > .gutters-item:hover {
        transform: translateY(-4px);
        box-shadow: inset 0 0 0 1px rgb(219, 221, 225),
                    0 24px 32px -20px rgba(0, 0, 0, 0.16);
    }

    .sr-couriers .omg-courier-list > .gutters-item:hover .omg-courier-list-item--name {
        color: var(--sr-purple-700);
    }
}

.sr-couriers .omg-courier-list-image {
    flex-shrink: 0;
}

.sr-couriers .omg-courier-list-item--logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: contain;
}

.sr-couriers .right-omg-courier {
    min-width: 0;
}

.sr-couriers .omg-courier-list-item--name {
    display: block;
    font-family: 'Phudu', var(--sr-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--sr-navy-900);
    transition: color 0.2s ease;
}

.sr-couriers .cat_name {
    display: block;
    font-family: var(--sr-font);
    font-size: 13px;
    line-height: 1.4;
    color: var(--sr-neutral-500);
}

/* ---------------------------------------------------------------------------
   5. PHÂN TRANG — chấm xanh dương của bộ style cũ
   --------------------------------------------------------------------------- */
.sr-couriers .quatrang {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 40px;
}

.sr-couriers .quatrang .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--sr-radius);
    background: var(--sr-neutral-0);
    box-shadow: inset 0 0 0 1px rgb(219, 221, 225);
    font-family: var(--sr-font-menu);
    font-size: 14px;
    font-weight: 700;
    color: var(--sr-navy-900);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sr-couriers .quatrang .page-numbers:hover {
    background: var(--sr-purple-100);
    color: var(--sr-purple-700);
}

.sr-couriers .quatrang .page-numbers.current {
    background: var(--sr-purple-700);
    box-shadow: none;
    color: var(--sr-neutral-0);
}

.sr-couriers .quatrang .page-numbers.dots {
    box-shadow: none;
    background: none;
}

/* ===========================================================================
   6. TRANG CHI TIẾT MỘT HÃNG  (/couriers/<slug>/ — single-couriers.php)

   Template không có khối hero: logo, tên hãng, số điện thoại, website và ô
   nhập mã vận đơn nằm thẳng trong .couriers-azx. Đắp dải màu lên chính khối đó
   rồi trả nền trắng cho phần bài viết bên dưới — cùng cách đã làm với dải mở
   đầu của trang danh sách.
   =========================================================================== */
.sr-couriers .couriers-azx {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(40px, 5vw, 72px) max(var(--sr-gutter), calc((100vw - var(--sr-container)) / 2)) clamp(40px, 5vw, 64px);
    background: linear-gradient(135deg, var(--sr-navy-900) 0%, var(--sr-purple-700) 100%);
    text-align: center;
    color: var(--sr-neutral-0);
}

.sr-couriers .couriers-azx h1 {
    margin: 0 0 16px;
    font-family: 'Phudu', var(--sr-font);
    font-size: clamp(30px, 3.6vw, 46px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--sr-neutral-0);
}

/* Logo hãng đặt trên nền trắng bo tròn cho nổi khỏi dải màu. */
.sr-couriers .logo-couriers img {
    padding: 10px;
    border-radius: 16px;
    background: var(--sr-neutral-0);
    object-fit: contain;
}

.sr-couriers .courier-details-contact p,
.sr-couriers .courier-details-contact a {
    font-family: var(--sr-font);
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88) !important;
}

.sr-couriers .courier-details-contact a:hover {
    color: var(--sr-neutral-0) !important;
}

/* Icon điện thoại/quả cầu vốn là SVG màu tối, trên nền đậm thì chìm. */
.sr-couriers .courier-details-contact img {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

/* --- ô nhập mã vận đơn --- */
.sr-couriers .courier-details-tracking {
    margin-top: 8px;
}

/* Ô nhập và nút nằm trong hai thẻ bọc .leftip / .righttip. Phải cho .leftip co
   giãn: đặt bề rộng thẳng lên <input> thì ô nhập phình to hơn thẻ bọc (420px
   trong khung 333px) và thò ra NẰM DƯỚI nút — chỗ thò ra chính là vệt trắng
   thấy giữa ô nhập và nút. */
.sr-couriers .courier-details-tracking form {
    max-width: 560px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.sr-couriers .courier-details-tracking .leftip {
    flex: 1 1 auto;
    min-width: 0;
}

.sr-couriers .courier-details-tracking .righttip {
    flex: 0 0 auto;
}

.sr-couriers .omg-courier-header-form-tracking--input {
    width: 100%;
    min-width: 0;
    height: 52px;
    margin-bottom: 0 !important;
    padding: 0 18px;
    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);
    box-sizing: border-box;
}

.sr-couriers .omg-courier-header-form-tracking--input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--sr-purple-300);
}

/* Nút Track màu sáng: tím nhạt + chữ tím đậm. Không dùng trắng — nó nằm cạnh ô
   nhập cũng nền trắng, hai khối cùng màu thì trông như một hộp. Tím nhạt vừa
   sáng vừa tách được khỏi cả ô nhập lẫn dải nền đậm. */
.sr-couriers .btn-track {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 28px;
    border: 0 !important;
    border-radius: var(--sr-radius) !important;
    background: var(--sr-purple-100) !important;
    font-family: var(--sr-font-menu);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--sr-purple-700) !important;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sr-couriers .btn-track:hover {
    background: var(--sr-neutral-0) !important;
}

/* Dòng miễn trừ dưới ô nhập. */
.sr-couriers .courier-details-tracking > div:last-child {
    max-width: 640px;
    margin: 12px auto 0;
    font-family: var(--sr-font);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}

/* --- ba thẻ giới thiệu sản phẩm --- */
.sr-couriers .tm-product-box {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: clamp(40px, 5vw, 64px) 0;
}

.sr-couriers .tm-product-item {
    height: auto;
    border-radius: 16px;
    background: rgb(248, 244, 255) !important;
    box-shadow: inset 0 0 0 1px rgb(219, 221, 225);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    .sr-couriers .tm-product-item: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-couriers .tm-product-item-title {
    font-family: 'Phudu', var(--sr-font);
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--sr-navy-900) !important;
}

.sr-couriers .tm-product-item-subtitle {
    font-family: var(--sr-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--sr-neutral-700) !important;
}

.sr-couriers .tm-product-item-link {
    font-family: var(--sr-font-menu);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sr-purple-700) !important;
}

.sr-couriers .tm-product-item-link:hover {
    color: var(--sr-purple-500) !important;
}

/* --- phần bài viết ---
   Chữ trải hết 1440px thì mỗi dòng gần 200 ký tự, đọc rất mệt. */
.sr-couriers .content-nh-fux {
    max-width: 820px;
    margin: 0 auto;
    padding-bottom: clamp(48px, 6vw, 80px);
    font-family: var(--sr-font);
    font-size: 17px;
    line-height: 1.75;
    color: var(--sr-neutral-700);
}

.sr-couriers .content-nh-fux h2,
.sr-couriers .content-nh-fux h3,
.sr-couriers .content-nh-fux h4 {
    margin: 40px 0 14px;
    font-family: 'Phudu', var(--sr-font);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--sr-navy-900);
}

.sr-couriers .content-nh-fux h2 {
    font-size: clamp(24px, 2.4vw, 32px);
}

.sr-couriers .content-nh-fux h3,
.sr-couriers .content-nh-fux h4 {
    font-size: clamp(19px, 1.8vw, 22px);
}

.sr-couriers .content-nh-fux p {
    margin: 0 0 18px;
}

.sr-couriers .content-nh-fux li {
    margin-bottom: 8px;
    line-height: 1.75;
}

.sr-couriers .content-nh-fux li::marker {
    color: var(--sr-purple-500);
}

.sr-couriers .content-nh-fux a {
    color: var(--sr-purple-700);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sr-couriers .content-nh-fux a:hover {
    color: var(--sr-purple-500);
}

/* Breadcrumb xanh dương của bộ cũ. */
.sr-couriers .brecrum,
.sr-couriers .brecrum a {
    font-family: var(--sr-font);
    font-size: 14px;
    color: var(--sr-neutral-500);
}

.sr-couriers .brecrum a {
    color: var(--sr-purple-700);
    text-decoration: none;
}

.sr-couriers .brecrum a:hover {
    text-decoration: underline;
}

/* Dải "Tracking 2000+ Couriers Worldwide" ở cuối trang chi tiết. */
.sr-couriers .main-title {
    font-family: 'Phudu', var(--sr-font);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--sr-navy-900);
}

/* ---------------------------------------------------------------------------
   7. MOBILE
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .sr-couriers .omg-courier-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .sr-couriers .omg-courier-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sr-couriers .omg-courier-search {
        flex-direction: column;
    }

    .sr-couriers .omg-courier-search input.form-control,
    .sr-couriers .omg-courier-search .txxld,
    .sr-couriers .omg-courier-search select.jsslco {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .sr-couriers .omg-courier-list {
        grid-template-columns: 1fr;
    }
}