/* =========================================================
   Aurex Cargo AU — SERVICES (list) page styles (demo2)
   Depends on aurex-common.css (sections, buttons, tag, stats, cta-band).
   Alternating full-width rows: text panel + image panel.
   ========================================================= */

/* Banner background: header image uploaded in admin (Service Setting), per device.
   No upload -> no .has-custom-bg class -> keep the default background
   (.page-banner::before in aurex-common.css). */
.page-banner.has-custom-bg::before { background-image: var(--banner-pc); }
@media (max-width: 991px) {
    .page-banner.has-custom-bg::before { background-image: var(--banner-tb, var(--banner-pc)); }
}
@media (max-width: 640px) {
    .page-banner.has-custom-bg::before { background-image: var(--banner-mb, var(--banner-pc)); }
}

.svc-row { display: flex; flex-wrap: wrap; }
.svc-row > div { width: 50%; padding: 46px 8%; display: flex; flex-direction: column; justify-content: center; }

/* Breadcrumb ở banner căn thẳng chữ .svc-text ngay bên dưới — thứ duy nhất canh trái trên
   trang này (cta-band / stats band / empty-state đều là text canh giữa). Partial mặc định
   bọc .container, ở đây phải gỡ max-width để về đúng nhịp full-bleed của svc-row.
   Cùng 8% và cùng gốc quy chiếu (padding % luôn tính theo bề ngang khối chứa, ở đây cả hai
   đều là full viewport) nên khớp mọi cỡ màn. Sửa padding .svc-row > div thì sửa cả đây. */
.page-banner .breadcrumb .container { max-width: none; padding: 0 8%; }
@media (max-width: 991px) {
    .page-banner .breadcrumb .container { padding: 0 28px; }
}
.svc-row .svc-text.on-blue { background: var(--blue-deep); color: #fff; }
.svc-row .svc-text.on-light { background: #eaf1f4; }
.svc-row .svc-text h3 { font-size: 24px; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 14px; }
.svc-row .svc-text.on-blue h3 { color: #fff; }
.svc-row .svc-text.on-light h3 { color: var(--blue); }
.svc-row .svc-text.on-blue p { color: rgba(255,255,255,.78); }
.svc-row .svc-text.on-light p { color: #55606a; }
.svc-row .svc-text .tag { margin-bottom: 18px; }
.svc-row .svc-text.on-light .tag { color: var(--blue-deep); }
.svc-text.on-light .btn-outline-light { color: var(--blue); border-color: var(--blue); }
.svc-text.on-light .btn-outline-light:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* Image side — absolutely fills so it never drives row height */
.svc-row .svc-media { width: 50%; padding: 0; min-height: 240px; overflow: hidden; position: relative; }
.svc-row .svc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Empty placeholder (no image) */
.svc-row .svc-empty { background: #eef3f5; display: flex; align-items: center; justify-content: center; min-height: 260px; }
.svc-row .svc-empty i { font-size: 84px; color: #cfdce2; }

/* Category with no service yet: this block is the whole page body, so it fills
   the fold on its own (cta-band + stats band are not rendered). */
.svc-coming { display: flex; align-items: center; min-height: 68vh; }
@media (max-width: 991px) {
    .svc-coming { min-height: 56vh; }
}

/* Taller rows on desktop: ~1.5 services visible per screen */
@media (min-width: 992px) {
    .svc-row > div { min-height: 64vh; }
}
@media (max-width: 991px) {
    .svc-row > div { width: 100%; padding: 44px 28px; }
    .svc-row .svc-media { width: 100%; min-height: 220px; }
}

/* ===== V4: Category Contents (intro + benefits/solutions/GSSA services) ===== */
.cat-tagline { font-size: 1.05rem; opacity: .9; margin-top: 6px; }
.cat-contents-body { max-width: 960px; }
.cat-contents-body p { margin: 0 0 16px; line-height: 1.7; }
.cat-contents-body h3 { margin: 28px 0 12px; font-size: 1.35rem; }
.cat-contents-body h4 { margin: 0 0 10px; font-size: 1.05rem; }
.cat-contents-body ul { margin: 0 0 16px; padding-left: 20px; }
.cat-contents-body ul li { margin: 6px 0; line-height: 1.5; }
.svc-list-head { padding-bottom: 0; }

/* "Our GSSA Services" — 3 cụm cạnh nhau, mobile xếp dọc */
.cat-contents-body .svc-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin: 12px 0 8px;
}
@media (max-width: 900px) {
    .cat-contents-body .svc-cols { grid-template-columns: 1fr; gap: 8px; }
}

/* ===== V4.2: category cha — tab 2 sub-category ===== */
.cat-tabs-wrap { padding-top: 0; }
.cat-tabs-wrap > .container { max-width: none; margin: 0; padding: 0; }
/* Thẻ .container cha (.cat-tabs-wrap > .container) đã full-bleed sẵn nên KHÔNG hack
   width:100vw ở đây — 100vw gồm cả thanh cuộn còn 50% thì không, làm calc() ra số âm
   khiến cụm tab lệch trái + sinh thanh cuộn ngang. Mặc định: nút cỡ tự nhiên, canh giữa cụm. */
.cat-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: 2px solid rgba(4, 95, 128, .15);
    margin-bottom: 0;
}
.cat-tab {
    flex: 0 0 auto;
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 14px 22px;
    font-size: 16px;
    font-weight: 700;
    color: #6b7a83;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}

/* ĐÚNG 2 tab (category cha có 2 sub) trên desktop: chia khung 2 nửa 1fr, mỗi nút vẫn cỡ
   nhỏ (compact) nhưng nép sát vào vạch giữa với khe 16px cân đối -> khe giữa 2 nút rơi
   đúng 50%, trùng mạch giao panel xanh/ảnh của .svc-row bên dưới. Không kéo nút full nửa
   trang (tránh hiểu nhầm mỗi nửa là một service). Dưới 992px row xếp dọc nên không cần. */
@media (min-width: 992px) {
    .cat-tabs:has(> .cat-tab:first-child:nth-last-child(2)) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 0;
    }
    .cat-tabs:has(> .cat-tab:first-child:nth-last-child(2)) > .cat-tab:first-child { justify-self: end; }
    .cat-tabs:has(> .cat-tab:first-child:nth-last-child(2)) > .cat-tab:last-child  { justify-self: start; }
}
.cat-tab:hover { color: #045F80; }
.cat-tab.is-active { color: #045F80; border-bottom-color: #F5B61C; box-shadow: 0 2px 8px rgba(4, 95, 128, .15); }
.cat-tabpanel { display: none; }
.cat-tabpanel.is-active { display: block; }
@media (max-width: 640px) {
    .cat-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
    .cat-tab { flex: 0 0 auto; padding: 12px 16px; font-size: 15px; }
}