@charset "UTF-8";
/* =============================================================================
   SLK EXPRESS 星鏈速運 — Space / Cross-border / Fortune-Gold Skin
   -----------------------------------------------------------------------------
   概念：太空(深邃星空) × 跨域(軌道航線) × 運送(貨櫃節點) × 使命必達(黃金亮點)
   本檔僅覆寫「外觀」，不更動任何版面結構與文字內容。
   載入順序：必須在 zapolo/css/style.css 之後。
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root,
[data-color="color_1"],
[data-color="color_2"],
[data-color="color_3"],
[data-color="color_4"] {
    /* 星空 / 深空底色 */
    --slk-void:        #04081a;
    --slk-space-900:   #070d24;
    --slk-space-800:   #0b1533;
    --slk-space-700:   #111f47;
    --slk-space-600:   #182c5f;
    --slk-space-500:   #223d7d;

    /* 發財金 / 使命必達的亮點 */
    --slk-gold-050:    #fffaf0;
    --slk-gold-100:    #fff3d6;
    --slk-gold-200:    #ffe4a8;
    --slk-gold-300:    #ffd275;
    --slk-gold-400:    #ffc24a;
    --slk-gold-500:    #f5b324;   /* 主色 */
    --slk-gold-600:    #dd9a0c;
    --slk-gold-700:    #b87c00;
    --slk-gold-800:    #8a5a00;   /* 淺底上的可讀金（AA 5.9:1） */
    --slk-gold-900:    #5f3d00;

    /* 文字 */
    --slk-ink:         #0b1533;
    --slk-ink-soft:    #3c4767;
    --slk-body:        #5a6480;
    --slk-muted:       #8a93aa;
    --slk-on-dark:     #ffffff;
    --slk-on-dark-2:   rgba(255, 255, 255, .78);
    --slk-on-dark-3:   rgba(255, 255, 255, .58);

    /* 介面 */
    --slk-surface:     #ffffff;
    --slk-surface-2:   #f7f9ff;
    --slk-surface-3:   #eef2fb;
    --slk-line:        rgba(11, 21, 51, .09);
    --slk-line-strong: rgba(11, 21, 51, .16);

    /* 漸層 */
    --slk-grad-gold:   linear-gradient(135deg, #f5b324 0%, #ffd275 52%, #f5b324 100%);
    --slk-grad-gold-2: linear-gradient(90deg, #dd9a0c 0%, #ffc24a 50%, #ffd275 100%);
    --slk-grad-space:  linear-gradient(135deg, #04081a 0%, #0b1533 42%, #182c5f 100%);
    --slk-grad-orbit:  linear-gradient(120deg, #070d24 0%, #111f47 48%, #223d7d 100%);

    /* 陰影與圓角 */
    --slk-shadow-sm:   0 6px 18px rgba(11, 21, 51, .06);
    --slk-shadow:      0 18px 40px rgba(11, 21, 51, .09);
    --slk-shadow-lg:   0 30px 70px rgba(4, 8, 26, .18);
    --slk-glow-gold:   0 14px 34px rgba(245, 179, 36, .32);
    --slk-radius:      16px;
    --slk-radius-lg:   26px;
    --slk-radius-pill: 999px;

    /* 星軌：由畫面下方發散的軌道弧線（用百分比半徑，才能隨寬度縮放） */
    --slk-orbits:
        radial-gradient(ellipse 150% 132% at 50% 124%, transparent 0 70.4%, rgba(245, 179, 36, .34) 70.4% 70.85%, transparent 71.1%),
        radial-gradient(ellipse 130% 116% at 50% 119%, transparent 0 73.0%, rgba(255, 255, 255, .18) 73.0% 73.35%, transparent 73.6%),
        radial-gradient(ellipse 178% 152% at 50% 128%, transparent 0 67.2%, rgba(245, 179, 36, .18) 67.2% 67.55%, transparent 67.8%),
        radial-gradient(ellipse 112% 100% at 50% 116%, transparent 0 76.5%, rgba(255, 210, 117, .12) 76.5% 76.8%, transparent 77.1%);

    /* 淺色底上的細星塵（極輕，不影響閱讀） */
    --slk-dust-light:
        radial-gradient(1px 1px at 18% 26%, rgba(245, 179, 36, .30) 50%, transparent 51%),
        radial-gradient(1px 1px at 72% 14%, rgba(34, 61, 125, .16) 50%, transparent 51%),
        radial-gradient(1px 1px at 44% 76%, rgba(245, 179, 36, .22) 50%, transparent 51%),
        radial-gradient(1px 1px at 88% 58%, rgba(34, 61, 125, .13) 50%, transparent 51%);

    /* 星塵層（可重複貼圖的星點） */
    --slk-stars-far:
        radial-gradient(1px 1px at 12% 22%,  rgba(255,255,255,.75) 50%, transparent 51%),
        radial-gradient(1px 1px at 68% 12%,  rgba(255,255,255,.55) 50%, transparent 51%),
        radial-gradient(1px 1px at 84% 62%,  rgba(255,255,255,.60) 50%, transparent 51%),
        radial-gradient(1px 1px at 32% 78%,  rgba(255,255,255,.45) 50%, transparent 51%),
        radial-gradient(1px 1px at 52% 44%,  rgba(255,255,255,.50) 50%, transparent 51%);
    --slk-stars-near:
        radial-gradient(1.6px 1.6px at 22% 58%, rgba(255, 224, 160, .95) 50%, transparent 51%),
        radial-gradient(1.6px 1.6px at 78% 30%, rgba(255,255,255,.90) 50%, transparent 51%),
        radial-gradient(2px 2px   at 46% 82%, rgba(255, 210, 117, .85) 50%, transparent 51%);

    /* 覆寫佈景主題原生變數（讓整站元件自動吃到新配色） */
    --gradient:        var(--slk-grad-gold);
    --gradient-sec:    var(--slk-grad-space);
    --primary:         #f5b324;
    --primary-hover:   #ffc94a;
    --primary-dark:    #b87c00;
    --secondary:       #0b1533;
    --title:           #0b1533;
    --rgba-primary-1:  rgba(245, 179, 36, .10);
    --rgba-primary-2:  rgba(245, 179, 36, .20);
    --rgba-primary-3:  rgba(245, 179, 36, .30);
    --rgba-primary-4:  rgba(245, 179, 36, .40);
    --rgba-primary-5:  rgba(245, 179, 36, .50);
    --rgba-primary-6:  rgba(245, 179, 36, .60);
    --rgba-primary-7:  rgba(245, 179, 36, .70);
    --rgba-primary-8:  rgba(245, 179, 36, .80);
    --rgba-primary-9:  rgba(245, 179, 36, .90);
    --bs-primary:      #f5b324;
    --bs-primary-rgb:  245, 179, 36;
    --bs-secondary:    #0b1533;
    --bs-link-color:   #8a5a00;
    --bs-link-hover-color: #b87c00;
}

/* -----------------------------------------------------------------------------
   2. 星空動態層
   -------------------------------------------------------------------------- */
@keyframes slkStarDrift {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 620px -360px, -420px 300px; }
}

@keyframes slkTwinkle {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

@keyframes slkOrbitSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes slkFloatY {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -10px, 0); }
}

/* 可重複使用的星空底 */
.slk-starfield,
.banner-two,
.banner-three,
.dz-bnr-inr,
.site-footer.style-2 {
    background-color: var(--slk-space-900);
}

/* -----------------------------------------------------------------------------
   3. Base / 排版
   -------------------------------------------------------------------------- */
body,
body#bg {
    background-color: var(--slk-surface);
    color: var(--slk-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 用 clip 而非 hidden：避免讓 body 變成捲動容器，破壞頁面內的 position:sticky */
    overflow-x: clip;
}

.page-wraper {
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--slk-ink);
    letter-spacing: -.015em;
}

p {
    color: var(--slk-body);
}

a {
    color: var(--slk-gold-800);
    transition: color .2s ease;
}

a:hover,
a:focus {
    color: var(--slk-gold-700);
}

/* 深色區塊裡的連結／文字回到亮金 */
.banner-two a:not(.btn),
.banner-three a:not(.btn),
.dz-bnr-inr a:not(.btn),
.site-footer a:not(.btn) {
    color: var(--slk-gold-300);
}

.banner-two a:not(.btn):hover,
.banner-three a:not(.btn):hover,
.dz-bnr-inr a:not(.btn):hover,
.site-footer a:not(.btn):hover {
    color: var(--slk-gold-200);
}

/* .text-primary 在淺色底上必須夠深才看得清楚 */
.text-primary,
.blog-content .text-primary,
.widget .text-primary,
i.text-primary,
span.text-primary {
    color: var(--slk-gold-800) !important;
}

/* 深色底上的 .text-primary 則使用亮金 */
.banner-two .text-primary,
.banner-three .text-primary,
.dz-bnr-inr .text-primary,
.site-footer .text-primary,
.tracking-modal .text-primary {
    color: var(--slk-gold-400) !important;
}

.bg-primary,
.badge-primary,
.bg-primary * {
    background-color: var(--slk-gold-500) !important;
}

.bg-primary,
.badge-primary {
    color: var(--slk-ink) !important;
}

.bg-secondary {
    background-color: var(--slk-space-800) !important;
    color: var(--slk-on-dark) !important;
}

/* 選取顏色 */
::selection        { background: var(--slk-gold-300); color: var(--slk-ink); }
::-moz-selection   { background: var(--slk-gold-300); color: var(--slk-ink); }

/* 鍵盤操作可見的聚焦環（無障礙） */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--slk-gold-400);
    outline-offset: 2px;
    border-radius: 6px;
}

/* 捲軸 */
@media (min-width: 992px) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--slk-gold-500) var(--slk-surface-3);
    }
    ::-webkit-scrollbar        { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track  { background: var(--slk-surface-3); }
    ::-webkit-scrollbar-thumb  { background: var(--slk-gold-600); border-radius: 999px; border: 2px solid var(--slk-surface-3); }
    ::-webkit-scrollbar-thumb:hover { background: var(--slk-gold-500); }
}

/* -----------------------------------------------------------------------------
   4. Preloader — 星際啟動
   -------------------------------------------------------------------------- */
#loading-area.loading-page-1 {
    background: var(--slk-grad-space);
}

#loading-area.loading-page-1::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--slk-stars-far);
    background-size: 260px 260px, 380px 380px, 300px 300px, 440px 440px, 520px 520px;
    opacity: .8;
    pointer-events: none;
}

/* 深空底上必須用金色描邊，主題預設的 --secondary 會整個看不見 */
#loading-area.loading-page-1 .spinner {
    position: relative;
    z-index: 1;
}

#loading-area.loading-page-1 .spinner svg circle {
    stroke: var(--slk-gold-400);
}

/* -----------------------------------------------------------------------------
   5. Header — 深空玻璃 + 金色航線
   -------------------------------------------------------------------------- */
.site-header.style-2 .main-bar {
    background-color: transparent;
    transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}

.site-header.style-2 .is-fixed .main-bar {
    background: linear-gradient(135deg, rgba(4, 8, 26, .94) 0%, rgba(11, 21, 51, .94) 45%, rgba(24, 44, 95, .94) 100%);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    box-shadow: 0 14px 40px rgba(4, 8, 26, .35);
    border-bottom: 1px solid rgba(245, 179, 36, .28);
}

/* 頂部細金線：象徵星鏈航道 */
.site-header.style-2 .is-fixed .main-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--slk-gold-500) 22%, var(--slk-gold-200) 50%, var(--slk-gold-500) 78%, transparent 100%);
    opacity: .85;
    pointer-events: none;
}

/* 新版 LOGO 本身就是深色底專用（白字 + 金標），只補一點金色微光即可 */
.site-header.style-2 .logo-header.mostion img,
.site-header.style-2 .main-bar > .container > .logo-header img {
    filter: drop-shadow(0 3px 12px rgba(245, 179, 36, .28));
}

/* 手機側滑選單是白底，使用深色字版本的 LOGO（logo_bl_*），不加任何濾鏡 */
.site-header.style-2 .header-nav .logo-header.logo-dark img {
    filter: none;
}

.site-header.style-2 .logo-header img {
    transition: filter .3s ease, transform .3s ease;
}

.site-header.style-2 .logo-header a:hover img {
    transform: translateY(-1px);
}

/* 桌機主選單 */
@media only screen and (min-width: 992px) {
    .site-header.header.style-2 .header-nav .nav.navbar-nav > li > a {
        color: var(--slk-on-dark);
        font-weight: 600;
        letter-spacing: .01em;
        border-radius: 10px;
        position: relative;
    }

    .site-header.header.style-2 .header-nav .nav.navbar-nav > li > a::after {
        content: "";
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 5px;
        height: 2px;
        border-radius: 2px;
        background: var(--slk-grad-gold-2);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .28s cubic-bezier(.2, .8, .2, 1);
    }

    .site-header.header.style-2 .header-nav .nav.navbar-nav > li:hover > a::after,
    .site-header.header.style-2 .header-nav .nav.navbar-nav > li.active > a::after {
        transform: scaleX(1);
    }

    .site-header.header.style-2 .header-nav .nav.navbar-nav > li:hover > a,
    .site-header.header.style-2 .header-nav .nav.navbar-nav > li.active > a {
        color: var(--slk-gold-300);
    }

    /* 幣別 / 語言 / 客服：做成膠囊工具鍵，和主選單分層 */
    .site-header.header.style-2 .header-nav .nav.navbar-nav > li.aw-top-tool > a {
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: var(--slk-radius-pill);
        background: rgba(255, 255, 255, .07);
        margin-left: 6px;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .site-header.header.style-2 .header-nav .nav.navbar-nav > li.aw-top-tool > a::after {
        content: none;
    }

    .site-header.header.style-2 .header-nav .nav.navbar-nav > li.aw-top-tool:hover > a {
        background: rgba(245, 179, 36, .18);
        border-color: rgba(245, 179, 36, .55);
        color: var(--slk-gold-200);
    }
}

/* 下拉選單 — 淺色卡片 + 金色軌跡 */
@media only screen and (min-width: 992px) {
    .header-nav .nav > li .sub-menu,
    .header-nav .nav > li .mega-menu {
        border-radius: var(--slk-radius);
        border: 1px solid var(--slk-line);
        box-shadow: 0 24px 60px rgba(4, 8, 26, .18);
        padding: 8px 0;
        overflow: hidden;
    }

    .header-nav .nav > li .sub-menu::before,
    .header-nav .nav > li .mega-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 3px;
        background: var(--slk-grad-gold-2);
    }
}

.header-nav .nav > li .sub-menu li a,
.header-nav .nav > li .mega-menu li a {
    color: var(--slk-ink-soft);
    font-weight: 600;
    border-radius: 8px;
}

.header-nav .nav > li .sub-menu li a:hover,
.header-nav .nav > li .mega-menu li ul li a:hover {
    color: var(--slk-gold-800);
    background: var(--slk-gold-100);
}

/* 修正：白色圖示落在白色下拉選單上會看不見 */
.header-nav .nav .sub-menu li a .text-white,
.header-nav .nav .sub-menu li a i.text-white,
.header-nav .nav .mega-menu li a .text-white,
.header-nav .nav .mega-menu li a i.text-white {
    color: var(--slk-gold-800) !important;
}

.header-nav .nav > li.has-mega-menu .mega-menu > li > a {
    color: var(--slk-ink);
    font-weight: 800;
}

/* 漢堡鈕 — 金色方塊 + 深空線條（避免白線在金底上看不清） */
.navicon {
    background: var(--slk-grad-gold);
    box-shadow: var(--slk-glow-gold);
    border-radius: 14px;
}

.navicon span {
    background: var(--slk-ink);
    height: 2.5px;
    border-radius: 2px;
}

/* 手機版選單面板 */
@media only screen and (max-width: 991.98px) {
    .site-header .header-nav {
        border-right: 1px solid var(--slk-line);
        box-shadow: 24px 0 60px rgba(4, 8, 26, .18);
    }

    .header-nav .nav > li > a {
        color: var(--slk-ink) !important;
        font-weight: 700;
        border-bottom: 1px solid var(--slk-line);
    }

    .header-nav .nav > li > a i {
        background-color: var(--slk-gold-500) !important;
        color: var(--slk-ink) !important;
        border-radius: 8px;
    }

    .header-nav .nav > li .sub-menu {
        border-top: 1px solid var(--slk-line);
        background: var(--slk-surface-2);
        border-radius: 12px;
        margin: 6px 0 10px !important;
    }

    .header-nav .nav > li .sub-menu li a {
        color: var(--slk-ink-soft) !important;
        padding: 10px 16px;
    }

    /* 手機下拉裡的白色圖示同樣改為金色，確保可讀 */
    .header-nav .nav .sub-menu li a i.text-white,
    .header-nav .nav .sub-menu li a .text-white {
        color: var(--slk-gold-800) !important;
        background: transparent !important;
    }

    /* 展開箭頭：金底必須配深色箭頭，白色會看不見 */
    .header-nav .nav > li.has-mega-menu > a:after {
        background-color: var(--slk-gold-500) !important;
        color: var(--slk-ink) !important;
        border-radius: 8px;
    }

    /* 次選單裡的小圖示：淺金底要搭深金字才夠對比 */
    .header-nav .nav > li .sub-menu > li > a i {
        color: var(--slk-gold-800) !important;
        background: var(--slk-gold-100) !important;
        border-radius: 8px;
    }

    .aw-line-mobile-inmenu .line-btn {
        border-color: var(--slk-line-strong);
        box-shadow: var(--slk-shadow-sm);
    }
}

/* -----------------------------------------------------------------------------
   5b. JS 星空圖層（slk-starfield.js 自動插入的 <canvas>）
   星座依網址決定，所以每一頁的星圖都不同；另有隨機流星與流星雨。
   -------------------------------------------------------------------------- */
.slk-sky {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: block;
    pointer-events: none;
    opacity: 0;
    animation: slkSkyIn 1.2s ease .15s forwards;
}

@keyframes slkSkyIn {
    to { opacity: 1; }
}

/* canvas 生效後，關掉 CSS 版的靜態星點（那是沒有 JS 時的後備方案），避免疊兩層 */
.slk-sky-on.banner-two:after,
.slk-sky-on.banner-three:after,
.slk-sky-on.dz-bnr-inr:after,
.slk-sky-on.site-footer.style-2:after {
    background-image: none;
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .slk-sky {
        opacity: 1;
        animation: none;
    }
}

/* -----------------------------------------------------------------------------
   6. Hero — 深空啟航
   -------------------------------------------------------------------------- */
.banner-two,
.banner-three {
    background-image:
        radial-gradient(1100px 620px at 82% -8%,  rgba(245, 179, 36, .20), transparent 62%),
        radial-gradient(900px 520px  at 8% 14%,   rgba(34, 61, 125, .55),  transparent 65%),
        radial-gradient(700px 700px  at 50% 118%, rgba(245, 179, 36, .12), transparent 60%),
        var(--slk-grad-space);
    background-repeat: no-repeat;
    background-size: cover;
}

/* 星塵 + 緩慢漂移，營造「跨域航行」的感覺 */
.banner-two:after,
.banner-three:after {
    background-image: var(--slk-stars-far), var(--slk-stars-near);
    background-size: 320px 320px, 520px 520px;
    background-repeat: repeat, repeat;
    background-position: 0 0, 0 0;
    opacity: .9;
    animation: slkStarDrift 160s linear infinite;
}

/* 星軌 — 取代主題原本壓在深空底上的白色雲朵 (shape-11.png) */
.banner-two:before {
    background-image:
        var(--slk-orbits),
        radial-gradient(ellipse 120% 55% at 50% 122%, rgba(245, 179, 36, .20), transparent 62%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.banner-two .banner-content h1,
.banner-two .banner-content .h1 {
    color: var(--slk-on-dark);
    font-weight: 800;
    text-shadow: 0 18px 44px rgba(4, 8, 26, .55);
    /* 主題原本是 70px，16 個中文字約 1120px，會超出容器把最後兩字擠到第二行 */
    font-size: clamp(34px, 4.3vw, 58px);
    /* 萬一真的換行，讓兩行字數平均，而不是孤零零掉一兩個字 */
    text-wrap: balance;
}

/* 標題中的關鍵字若被包在 span，自動吃金色漸層 */
.banner-two .banner-content h1 span {
    background: var(--slk-grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.banner-two .banner-media {
    animation: slkFloatY 6s ease-in-out infinite;
}

.banner-two .banner-media img {
    filter: drop-shadow(0 40px 70px rgba(4, 8, 26, .55));
}

/* -----------------------------------------------------------------------------
   7. 內頁主視覺（麵包屑橫幅）
   -------------------------------------------------------------------------- */
.dz-bnr-inr {
    background-image:
        radial-gradient(900px 520px at 88% -10%, rgba(245, 179, 36, .22), transparent 60%),
        radial-gradient(760px 460px at 6% 10%,   rgba(34, 61, 125, .60),  transparent 66%),
        var(--slk-grad-space);
    background-repeat: no-repeat;
    background-size: cover;
}

/* 星點層（緩慢漂移） */
.dz-bnr-inr:after {
    background-image: var(--slk-stars-far), var(--slk-stars-near);
    background-size: 300px 300px, 480px 480px;
    background-position: 0 0, 0 0;
    background-repeat: repeat, repeat;
    animation: slkStarDrift 200s linear infinite;
}

/* 星軌層 — 取代主題原本的白色雲朵 (shape-11.png)，並收出一條金色地平線 */
.dz-bnr-inr:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        var(--slk-orbits),
        linear-gradient(to top, rgba(245, 179, 36, .16) 0, transparent 120px);
    background-repeat: no-repeat;
    background-position: center, bottom;
    background-size: 100% 100%, 100% 100%;
}

.dz-bnr-inr {
    border-bottom: 1px solid rgba(245, 179, 36, .38);
}

.dz-bnr-inr h1,
.dz-bnr-inr .h1 {
    color: var(--slk-on-dark);
    font-weight: 800;
    text-shadow: 0 14px 36px rgba(4, 8, 26, .5);
}

/* 麵包屑膠囊：原本金底白字對比不足，改為深空玻璃 + 金邊 */
.breadcrumb-row ul {
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(245, 179, 36, .45);
    box-shadow: 0 12px 30px rgba(4, 8, 26, .32);
    padding: 9px 24px;
}

.breadcrumb-row ul li,
.breadcrumb-row ul li a {
    color: var(--slk-on-dark);
    font-weight: 600;
}

.breadcrumb-row ul li a:hover {
    color: var(--slk-gold-300);
}

.breadcrumb-row ul li.active {
    color: var(--slk-gold-300);
    font-weight: 700;
}

.breadcrumb-row ul .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .55);
}

/* -----------------------------------------------------------------------------
   7b. 主視覺下方的淺色內容區 — 承接星空的大氣光暈與細星塵
   -------------------------------------------------------------------------- */
.aw-wrap,
.content-inner,
.content-inner-1,
.content-inner-2 {
    background-color: #ffffff;
    background-image:
        radial-gradient(1000px 420px at 50% -4%, rgba(245, 179, 36, .11), transparent 64%),
        radial-gradient(760px 360px at 4% 8%,   rgba(34, 61, 125, .06), transparent 62%),
        var(--slk-dust-light);
    background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat;
    background-size: 100% 460px, 100% 420px, 260px 260px, 320px 320px, 300px 300px, 380px 380px;
    background-position: top center, top left, 0 0, 0 0, 0 0, 0 0;
}

/* 頁面內嵌樣式把 .aw-wrap 設成純白，需要提高優先權才蓋得過 */
.page-content .aw-wrap {
    background-color: #ffffff !important;
    background-image:
        radial-gradient(1000px 420px at 50% -4%, rgba(245, 179, 36, .11), transparent 64%),
        radial-gradient(760px 360px at 4% 8%,   rgba(34, 61, 125, .06), transparent 62%),
        var(--slk-dust-light) !important;
    background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat !important;
    background-size: 100% 460px, 100% 420px, 260px 260px, 320px 320px, 300px 300px, 380px 380px !important;
    background-position: top center, top left, 0 0, 0 0, 0 0, 0 0 !important;
}

/* -----------------------------------------------------------------------------
   8. 按鈕系統
   -------------------------------------------------------------------------- */
.btn {
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

.btn-primary,
.wp-block-button__link,
.btn.btn-primary {
    background: var(--slk-grad-gold);
    background-size: 180% 100%;
    border-color: transparent;
    color: var(--slk-ink) !important;
    box-shadow: var(--slk-glow-gold);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
    background: var(--slk-grad-gold);
    background-position: 100% 0;
    border-color: transparent;
    color: var(--slk-ink) !important;
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(245, 179, 36, .42);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background: var(--slk-gold-200);
    color: var(--slk-gold-900) !important;
    box-shadow: none;
}

.btn-secondary {
    background: var(--slk-grad-orbit);
    border-color: transparent;
    color: var(--slk-on-dark) !important;
    box-shadow: 0 14px 32px rgba(11, 21, 51, .28);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background: var(--slk-grad-orbit);
    border-color: var(--slk-gold-500);
    color: var(--slk-gold-300) !important;
    transform: translateY(-2px);
}

.btn-white {
    background: #fff;
    border-color: transparent;
    color: var(--slk-ink) !important;
    box-shadow: 0 14px 32px rgba(4, 8, 26, .22);
}

.btn-white:hover,
.btn-white:focus {
    background: var(--slk-gold-100);
    color: var(--slk-gold-900) !important;
    transform: translateY(-2px);
}

.btn-outline-primary,
.is-style-outline .wp-block-button__link {
    color: var(--slk-gold-800);
    border-color: var(--slk-gold-500);
    background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.is-style-outline .wp-block-button__link:hover {
    background: var(--slk-gold-500);
    border-color: var(--slk-gold-500);
    color: var(--slk-ink) !important;
}

.btn-outline-light {
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

.btn-link {
    color: var(--slk-gold-800);
}

.btn-link:hover {
    color: var(--slk-gold-700);
}

.btn-link-lg {
    color: var(--slk-gold-800);
}

/* 深色底上的「幽靈」按鈕 */
.banner-two .btn-white,
.dz-bnr-inr .btn-white,
.site-footer .btn-white {
    box-shadow: 0 16px 36px rgba(4, 8, 26, .38);
}

.shadow-secondary {
    box-shadow: 0 16px 40px rgba(4, 8, 26, .35) !important;
}

/* 回到頂端 — 深空球體 + 金色箭頭 */
.scroltop {
    background: var(--slk-grad-orbit) !important;
    border: 1px solid rgba(245, 179, 36, .55) !important;
    color: var(--slk-gold-400) !important;
    border-radius: 50% !important;
    box-shadow: 0 16px 34px rgba(4, 8, 26, .38) !important;
}

.scroltop:hover {
    background: var(--slk-grad-gold) !important;
    color: var(--slk-ink) !important;
    border-color: transparent !important;
}

/* -----------------------------------------------------------------------------
   9. 表單元件
   -------------------------------------------------------------------------- */
.form-control,
.form-select,
select.form-control,
textarea.form-control,
.input-group > .form-control {
    border-radius: 12px;
    border: 1px solid var(--slk-line-strong);
    background-color: #fff;
    color: var(--slk-ink);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--slk-muted);
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: var(--slk-gold-500);
    box-shadow: 0 0 0 .22rem rgba(245, 179, 36, .22);
    background-color: #fff;
    color: var(--slk-ink);
}

.form-label,
label {
    color: var(--slk-ink-soft);
    font-weight: 600;
}

.input-group-text {
    background: var(--slk-surface-3);
    border: 1px solid var(--slk-line-strong);
    color: var(--slk-ink-soft);
    border-radius: 12px;
}

.form-check-input:checked {
    background-color: var(--slk-gold-500);
    border-color: var(--slk-gold-600);
}

.form-check-input:focus {
    border-color: var(--slk-gold-500);
    box-shadow: 0 0 0 .22rem rgba(245, 179, 36, .22);
}

/* 深色 modal 裡的輸入框（追蹤查詢） */
.tracking-modal .tracking-modal-content {
    background: linear-gradient(140deg, rgba(7, 13, 36, .96) 0%, rgba(17, 31, 71, .96) 100%);
    border: 1px solid rgba(245, 179, 36, .28);
}

.tracking-modal .tracking-modal-content:before {
    background:
        radial-gradient(650px circle at 15% 10%, rgba(245, 179, 36, .22), transparent 45%),
        radial-gradient(650px circle at 90% 85%, rgba(34, 61, 125, .40), transparent 45%);
}

.tracking-modal .tracking-modal-icon {
    background: var(--slk-grad-gold);
    border-color: transparent;
    color: var(--slk-ink);
}

.tracking-modal .tracking-input:focus {
    border-color: rgba(245, 179, 36, .55);
    box-shadow: 0 0 0 .2rem rgba(245, 179, 36, .18);
}

.tracking-modal .tracking-btn-primary {
    box-shadow: 0 14px 36px rgba(245, 179, 36, .26);
}

/* -----------------------------------------------------------------------------
   10. 卡片 / 區塊 / 手風琴 / 表格
   -------------------------------------------------------------------------- */
.card,
.dz-card,
.widget,
.aw-card {
    border-radius: var(--slk-radius);
    border-color: var(--slk-line);
}

.card {
    box-shadow: var(--slk-shadow-sm);
}

/* 區段標題的小標籤（kicker）統一成金色膠囊 */
.section-head .sub-title,
.sub-title,
.title-ext {
    color: var(--slk-gold-800);
    letter-spacing: .08em;
}

/* 手風琴（FAQ） */
.accordion-item {
    border-radius: 14px !important;
    border: 1px solid var(--slk-line) !important;
    overflow: hidden;
    background: #fff;
}

.accordion-button {
    color: var(--slk-ink);
    font-weight: 700;
    background: #fff;
}

.accordion-button:not(.collapsed) {
    color: var(--slk-gold-900);
    background: var(--slk-gold-100);
    box-shadow: inset 0 -1px 0 rgba(245, 179, 36, .35);
}

.accordion-button:focus {
    border-color: var(--slk-gold-400);
    box-shadow: 0 0 0 .2rem rgba(245, 179, 36, .2);
}

.accordion-button::after {
    filter: saturate(0) brightness(.4);
}

.accordion-button:not(.collapsed)::after {
    filter: none;
}

/* 表格 */
.table > :not(caption) > * > * {
    border-bottom-color: var(--slk-line);
}

.table thead th,
.table > thead > tr > th {
    background: var(--slk-space-800);
    color: var(--slk-on-dark);
    font-weight: 700;
    border-bottom: none;
    vertical-align: middle;
}

.table thead th a {
    color: var(--slk-gold-300);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--slk-surface-2);
    background-color: var(--slk-surface-2);
    color: var(--slk-ink-soft);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--slk-gold-100);
    background-color: var(--slk-gold-100);
    color: var(--slk-ink);
}

/* 分頁 */
.pagination .page-link,
.pagination .page-item .page-link {
    color: var(--slk-ink-soft);
    border-color: var(--slk-line);
    border-radius: 10px;
    margin: 0 3px;
    font-weight: 600;
}

.pagination .page-item.active .page-link,
.pagination .page-link:hover {
    background: var(--slk-grad-gold);
    border-color: transparent;
    color: var(--slk-ink);
    box-shadow: 0 8px 20px rgba(245, 179, 36, .3);
}

/* 標籤 */
.badge {
    border-radius: var(--slk-radius-pill);
    font-weight: 700;
    letter-spacing: .02em;
}

.badge.bg-primary,
.badge-primary {
    background: var(--slk-grad-gold) !important;
    color: var(--slk-ink) !important;
}

/* Modal */
.modal-content {
    border-radius: 18px;
    border: 1px solid var(--slk-line);
    box-shadow: var(--slk-shadow-lg);
}

.modal-header {
    border-bottom-color: var(--slk-line);
}

.modal-footer {
    border-top-color: var(--slk-line);
}

.aw-wechat-copy-btn.copied {
    background: var(--slk-gold-600);
    color: var(--slk-ink);
}

/* Nav pills / tabs */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--slk-grad-gold);
    color: var(--slk-ink);
    box-shadow: 0 8px 20px rgba(245, 179, 36, .28);
}

.nav-tabs .nav-link.active {
    color: var(--slk-gold-900);
    border-color: var(--slk-line) var(--slk-line) #fff;
}

.nav-tabs .nav-link {
    color: var(--slk-body);
    font-weight: 600;
}

/* 提示區塊 */
.alert-primary {
    background: var(--slk-gold-100);
    border-color: rgba(245, 179, 36, .4);
    color: var(--slk-gold-900);
}

/* 分隔線 */
hr {
    border-color: var(--slk-line);
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   11. Footer — 深空母港
   -------------------------------------------------------------------------- */
.site-footer.style-2 {
    background-image:
        radial-gradient(1000px 560px at 12% -10%, rgba(34, 61, 125, .60), transparent 62%),
        radial-gradient(900px 520px  at 92% 8%,   rgba(245, 179, 36, .16), transparent 60%),
        var(--slk-grad-space);
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--slk-on-dark-2);
}

/* 星軌層 — 取代主題原本的白色雲朵 (shape-10.png) */
.site-footer.style-2:before {
    background-image:
        var(--slk-orbits),
        linear-gradient(to bottom, rgba(245, 179, 36, .14) 0, transparent 160px);
    background-repeat: no-repeat;
    background-position: center, top;
    background-size: 100% 100%, 100% 100%;
    transform: rotate(180deg);
}

.site-footer.style-2:after {
    background-image: var(--slk-stars-far), var(--slk-stars-near);
    background-size: 340px 340px, 560px 560px;
    background-repeat: repeat, repeat;
    background-position: 0 0, 0 0;
    opacity: .75;
    animation: slkStarDrift 240s linear infinite;
}

/* CTA 區塊 */
.site-footer.style-2 .footer-box .title {
    color: var(--slk-on-dark);
    font-weight: 800;
    text-shadow: 0 12px 32px rgba(4, 8, 26, .45);
}

.site-footer.style-2 .footer-box img {
    background: var(--slk-grad-gold);
    opacity: .92;
}

.site-footer .footer-title,
.site-footer .widget h4,
.site-footer .widget h5,
.site-footer .widget .widget-title {
    color: var(--slk-on-dark);
    font-weight: 700;
}

.site-footer.style-2 .footer-title:after {
    background: var(--slk-grad-gold-2);
    height: 2px;
    border-radius: 2px;
}

.site-footer p,
.site-footer li,
.site-footer span {
    color: var(--slk-on-dark-2);
}

.site-footer.style-2 .widget_services ul li a {
    color: var(--slk-on-dark-2);
}

.site-footer.style-2 .widget_services ul li a:hover {
    color: var(--slk-gold-300);
}

/* ---- 「我們的服務」清單太長，在寬螢幕分成兩欄 ---- */
@media only screen and (min-width: 992px) {
    .site-footer .footer-top .row > div:nth-child(3) .widget_services > ul {
        column-count: 2;
        column-gap: 26px;
    }

    /* 每個集運群組（標題 + 底下航線）不可被切到兩欄 */
    .site-footer .footer-top .row > div:nth-child(3) .widget_services > ul > li {
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* 分欄後第一項頂端會多一段空白，補平 */
    .site-footer .footer-top .row > div:nth-child(3) .widget_services > ul > li:first-child {
        margin-top: 0;
    }
}

.site-footer .widget_services .footer-service-title {
    color: var(--slk-gold-300) !important;
    font-weight: 700;
    letter-spacing: .01em;
}

.site-footer .widget_getintuch ul li i,
.site-footer .widget_getintuch i {
    color: var(--slk-gold-400);
}

/* 頁尾 LOGO 是 2 倍解析度圖檔，需指定顯示高度才不會撐滿整欄 */
.site-footer .widget_about .footer-logo img {
    height: 58px;
    width: auto;
    max-width: 100%;
}

.site-footer .footer-bottom {
    background-color: rgba(4, 8, 26, .72) !important;
    border-top: 1px solid rgba(245, 179, 36, .22);
}

.site-footer .footer-bottom .copyright-text {
    color: var(--slk-on-dark-3);
}

/* ---- 頁尾底部橫條：左邊版權與右邊連結對齊 ----
   <p> 和 <ul> 各自帶著瀏覽器預設的 margin / padding-left，
   讓兩欄的文字基線對不齊、右側連結也無法與上方內容切齊。 */
.site-footer .footer-bottom .container > .row {
    row-gap: 10px;
}

.site-footer .footer-bottom .copyright-text {
    margin: 0;
    line-height: 1.7;
}

.site-footer .footer-bottom .footer-link {
    margin: 0;
    padding-left: 0;
    line-height: 1.7;
    vertical-align: middle;
}

/* 最後一項不留右內距，右緣才會與上方欄位切齊 */
.site-footer .footer-bottom .footer-link li:last-child {
    padding-right: 0;
}

@media only screen and (max-width: 991.98px) {
    /* 手機版兩欄堆疊置中，第一顆項目符號的左內距會讓整組看起來偏右 */
    .site-footer .footer-bottom .footer-link li:first-child {
        padding-left: 20px;
    }

    .site-footer .footer-bottom .footer-link li {
        padding-right: 18px;
    }
}

.site-footer .footer-bottom .copyright-text a {
    color: var(--slk-gold-300);
}

.site-footer .dz-social-icon ul li a {
    color: var(--slk-on-dark-2);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    transition: all .25s ease;
}

.site-footer .dz-social-icon ul li a:hover {
    background: var(--slk-grad-gold);
    color: var(--slk-ink);
    border-color: transparent;
}

/* 防禦：後台頁面內容若夾帶未限定範圍的 CSS（例如 Qt 匯出的 p, li { white-space: pre-wrap }），
   不應該波及頁尾排版 */
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer a,
.site-footer h4 {
    white-space: normal;
}

/* -----------------------------------------------------------------------------
   12. 手機底部工具列
   -------------------------------------------------------------------------- */
.mobile-toolbar {
    background: linear-gradient(180deg, rgba(11, 21, 51, .97) 0%, rgba(4, 8, 26, .99) 100%) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(245, 179, 36, .32);
    box-shadow: 0 -12px 30px rgba(4, 8, 26, .35);
}

.mobile-toolbar .mobile-toolbar-item,
.mobile-toolbar .mobile-toolbar-item .mobile-toolbar-label,
.mobile-toolbar .header-icon {
    color: var(--slk-on-dark) !important;
    background: transparent;
}

.mobile-toolbar .mobile-toolbar-item:hover .mobile-toolbar-label,
.mobile-toolbar .mobile-toolbar-item:active .mobile-toolbar-label {
    color: var(--slk-gold-300) !important;
}

.mobile-toolbar .dropdown-menu {
    border-radius: 14px;
    box-shadow: var(--slk-shadow-lg);
    padding: 10px;
}

.mobile-toolbar .search-form input {
    border: 1px solid var(--slk-line-strong);
    border-radius: 10px;
    padding: 8px 12px;
    color: var(--slk-ink);
}

.mobile-toolbar .submit-icon-btn-secondary {
    background: var(--slk-grad-gold);
    color: var(--slk-ink);
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    margin-left: 6px;
}

/* -----------------------------------------------------------------------------
   13. 首頁 — 服務區塊（覆寫頁面內嵌的橘色系）
   -------------------------------------------------------------------------- */
.aw-home-services {
    background:
        radial-gradient(900px 480px at 88% 4%,  rgba(245, 179, 36, .10), transparent 62%),
        radial-gradient(760px 420px at 4% 92%,  rgba(34, 61, 125, .07), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fdfaf3 60%, #ffffff 100%) !important;
}

.aw-home-services::before {
    background: #ffffff !important;
}

.aw-home-services-kicker {
    background: var(--slk-gold-100) !important;
    color: var(--slk-gold-800) !important;
    box-shadow: inset 0 0 0 1px rgba(245, 179, 36, .35);
}

.aw-home-services-head h2,
.aw-service-content h3 {
    color: var(--slk-ink) !important;
}

/* 標題區最寬 760px，原本 54px × 15 字約 810px，最後一字會被擠到第二行 */
.aw-home-services-head h2 {
    font-size: clamp(22px, 3.4vw, 44px) !important;
    text-wrap: balance;
}

.aw-service-content p {
    color: var(--slk-body) !important;
}

.aw-service-item {
    border-color: var(--slk-line) !important;
    box-shadow: var(--slk-shadow-sm) !important;
}

.aw-service-item:hover {
    border-color: rgba(245, 179, 36, .45) !important;
    box-shadow: 0 24px 48px rgba(245, 179, 36, .16) !important;
}

.aw-service-icon {
    background: var(--slk-grad-orbit) !important;
    box-shadow: 0 14px 28px rgba(11, 21, 51, .22), inset 0 0 0 1px rgba(245, 179, 36, .45) !important;
    position: relative;
    overflow: hidden;
}

/* 圖示底加一顆金色星點，呼應「星鏈」 */
.aw-service-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 72% 22%, rgba(245, 179, 36, .55), transparent 55%);
    pointer-events: none;
}

.aw-service-center::before {
    background: linear-gradient(135deg, rgba(245, 179, 36, .16), rgba(34, 61, 125, .10)) !important;
}

.aw-service-center-box {
    border-color: var(--slk-line) !important;
    box-shadow: 0 26px 60px rgba(11, 21, 51, .12) !important;
}

.aw-service-center-badge {
    background: var(--slk-grad-gold) !important;
    color: var(--slk-ink) !important;
    box-shadow: var(--slk-glow-gold) !important;
}

/* ---- 六大服務的佈局：從左右對稱的方塊，改成環繞中央樞紐的節奏 ---- */

/* 中央改為深空面板，與新的星鏈網絡圖連成一體（原本是白框包深色圖） */
.aw-home-services-grid .aw-service-center-box {
    background: linear-gradient(140deg, #070d24 0%, #111f47 55%, #182c5f 100%) !important;
    border: 1px solid rgba(245, 179, 36, .30) !important;
    box-shadow: 0 30px 66px rgba(4, 8, 26, .30) !important;
    padding: 14px !important;
}

.aw-home-services-grid .aw-service-center-box img {
    background: transparent !important;
    border-radius: 20px !important;
}

@media only screen and (min-width: 992px) {
    .aw-home-services-grid {
        align-items: center;
    }

    /* 右欄整體下移，左右不再是鏡像 */
    .aw-home-services-grid > div:nth-child(3) .aw-service-col {
        margin-top: 58px;
    }

    /* 上下兩張向外收、中間那張朝中央突出，六張卡片圍出一道弧線 */
    .aw-home-services-grid > div:nth-child(1) .aw-service-item:nth-child(1),
    .aw-home-services-grid > div:nth-child(1) .aw-service-item:nth-child(3) {
        margin-right: 28px;
    }

    .aw-home-services-grid > div:nth-child(3) .aw-service-item:nth-child(1),
    .aw-home-services-grid > div:nth-child(3) .aw-service-item:nth-child(3) {
        margin-left: 28px;
    }

    /* 朝向中央那一側的金色節點，像掛在星鏈上 */
    .aw-service-item::before {
        content: "";
        position: absolute;
        top: 50%;
        width: 3px;
        height: 0;
        border-radius: 3px;
        background: var(--slk-grad-gold-2);
        transform: translateY(-50%);
        transition: height .3s cubic-bezier(.2, .8, .2, 1);
        z-index: 2;
    }

    .aw-service-item-left::before  { right: 0; }
    .aw-service-item-right::before { left: 0; }

    .aw-service-item:hover::before { height: 56%; }

    /* 中央面板緩緩浮動，呼應主視覺 */
    .aw-home-services-grid .aw-service-center {
        animation: slkFloatY 7s ease-in-out infinite;
    }
}

/* 對角線上的兩張改為深空強調卡，打散「六張一模一樣」的單調感 */
.aw-home-services-grid > div:nth-child(1) .aw-service-item:nth-child(1),
.aw-home-services-grid > div:nth-child(3) .aw-service-item:nth-child(3) {
    background: linear-gradient(140deg, #070d24 0%, #14264f 100%) !important;
    border-color: rgba(245, 179, 36, .32) !important;
    box-shadow: 0 22px 46px rgba(4, 8, 26, .26) !important;
}

.aw-home-services-grid > div:nth-child(1) .aw-service-item:nth-child(1) .aw-service-content h3,
.aw-home-services-grid > div:nth-child(3) .aw-service-item:nth-child(3) .aw-service-content h3 {
    color: #ffffff !important;
}

.aw-home-services-grid > div:nth-child(1) .aw-service-item:nth-child(1) .aw-service-content p,
.aw-home-services-grid > div:nth-child(3) .aw-service-item:nth-child(3) .aw-service-content p {
    color: rgba(255, 255, 255, .76) !important;
}

/* 深空卡上的圖示改成金底，白色圖示在金色上看不清楚，改為深色 */
.aw-home-services-grid > div:nth-child(1) .aw-service-item:nth-child(1) .aw-service-icon,
.aw-home-services-grid > div:nth-child(3) .aw-service-item:nth-child(3) .aw-service-icon {
    background: var(--slk-grad-gold) !important;
    box-shadow: 0 14px 28px rgba(245, 179, 36, .28) !important;
}

.aw-home-services-grid > div:nth-child(1) .aw-service-item:nth-child(1) .aw-service-icon img,
.aw-home-services-grid > div:nth-child(3) .aw-service-item:nth-child(3) .aw-service-icon img {
    filter: brightness(0) !important;
}

.aw-home-services-grid > div:nth-child(1) .aw-service-item:nth-child(1):hover,
.aw-home-services-grid > div:nth-child(3) .aw-service-item:nth-child(3):hover {
    border-color: rgba(245, 179, 36, .58) !important;
    box-shadow: 0 28px 56px rgba(4, 8, 26, .34) !important;
}

/* -----------------------------------------------------------------------------
   14. 首頁 — 各國倉庫卡片
   -------------------------------------------------------------------------- */
.aw-home-warehouse {
    background:
        radial-gradient(circle at top left,     rgba(245, 179, 36, .09), transparent 26%),
        radial-gradient(circle at bottom right, rgba(34, 61, 125, .08),  transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 55%, #ffffff 100%) !important;
}

.aw-home-warehouse-head h4 {
    background: var(--slk-gold-100) !important;
    color: var(--slk-gold-800) !important;
    box-shadow: inset 0 0 0 1px rgba(245, 179, 36, .35);
}

.aw-home-warehouse-head h1,
.aw-home-warehouse-country {
    color: var(--slk-ink) !important;
}

.aw-home-warehouse-card {
    border-color: var(--slk-line) !important;
    box-shadow: var(--slk-shadow-sm) !important;
}

.aw-home-warehouse-card::before {
    background: var(--slk-grad-gold-2) !important;
}

.aw-home-warehouse-card:hover {
    border-color: rgba(245, 179, 36, .45) !important;
    box-shadow: 0 26px 52px rgba(245, 179, 36, .18) !important;
}

.aw-home-warehouse-flag {
    background: var(--slk-gold-050) !important;
    box-shadow: inset 0 0 0 1px rgba(245, 179, 36, .22) !important;
}

.aw-home-warehouse-list li {
    color: var(--slk-body) !important;
}

.aw-home-warehouse-list li::before {
    background: var(--slk-grad-gold) !important;
}

.aw-home-warehouse-cta {
    color: var(--slk-gold-800) !important;
}

.aw-home-warehouse-card:hover .aw-home-warehouse-cta {
    color: var(--slk-gold-900) !important;
}

/* -----------------------------------------------------------------------------
   15. 首頁 — 最新消息 / 部落格（原本沒有樣式，補上卡片視覺）
   -------------------------------------------------------------------------- */
.container-fluid.blog {
    background:
        radial-gradient(900px 460px at 10% 0%, rgba(245, 179, 36, .08), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
}

.container-fluid.blog .display-4 {
    color: var(--slk-ink);
    font-weight: 800;
    font-size: clamp(28px, 4vw, 48px);
    letter-spacing: -.03em;
}

.container-fluid.blog .blog-item {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--slk-line);
    border-radius: var(--slk-radius-lg);
    overflow: hidden;
    box-shadow: var(--slk-shadow-sm);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.container-fluid.blog .blog-item:hover {
    transform: translateY(-6px);
    border-color: rgba(245, 179, 36, .45);
    box-shadow: 0 26px 52px rgba(245, 179, 36, .16);
}

.container-fluid.blog .blog-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--slk-surface-3);
}

.container-fluid.blog .blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.container-fluid.blog .blog-item:hover .blog-img img {
    transform: scale(1.06);
}

.container-fluid.blog .blog-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.container-fluid.blog .blog-comment .small {
    color: var(--slk-muted);
    font-weight: 600;
}

.container-fluid.blog .blog-content a.h4 {
    color: var(--slk-ink);
    font-weight: 800;
    line-height: 1.4;
    font-size: 20px;
    text-decoration: none;
}

.container-fluid.blog .blog-content a.h4:hover {
    color: var(--slk-gold-800);
}

.container-fluid.blog .blog-content p {
    color: var(--slk-body);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.container-fluid.blog .blog-content .btn.p-0 {
    margin-top: auto;
    align-self: flex-start;
    color: var(--slk-gold-800);
    font-weight: 800;
    box-shadow: none;
    background: transparent;
}

.container-fluid.blog .blog-content .btn.p-0 i {
    transition: transform .25s ease;
}

.container-fluid.blog .blog-content .btn.p-0:hover {
    color: var(--slk-gold-900);
}

.container-fluid.blog .blog-content .btn.p-0:hover i {
    transform: translateX(4px);
}

/* -----------------------------------------------------------------------------
   16. 首頁 — 線上試算（覆寫頁面內嵌的藍色系）
   -------------------------------------------------------------------------- */
.aw-home-price-wrap {
    background:
        linear-gradient(180deg, #ffffff 0%, #fdfaf3 100%) !important;
}

.aw-home-price-shell {
    background:
        radial-gradient(circle at top left,  rgba(245, 179, 36, .12), transparent 26%),
        radial-gradient(circle at top right, rgba(34, 61, 125, .10), transparent 24%),
        #ffffff !important;
    border-color: var(--slk-line) !important;
    box-shadow: 0 24px 56px rgba(11, 21, 51, .09) !important;
}

.aw-home-price-kicker {
    background: var(--slk-gold-100) !important;
    color: var(--slk-gold-800) !important;
    box-shadow: inset 0 0 0 1px rgba(245, 179, 36, .35);
}

.aw-home-price-head h2 {
    color: var(--slk-ink) !important;
}

.aw-home-price-head p,
.aw-help {
    color: var(--slk-body) !important;
}

.aw-card {
    border: 1px solid var(--slk-line) !important;
    box-shadow: var(--slk-shadow) !important;
}

.aw-card .aw-card-title,
.label-input-field label {
    color: var(--slk-ink) !important;
}

.aw-wrap input.form-control-sm:focus {
    border-color: rgba(245, 179, 36, .55) !important;
    box-shadow: 0 0 0 4px rgba(245, 179, 36, .16) !important;
}

/* 「航段標題列」做成深空底 + 金字，強化跨域運送的意象 */
.aw-titlebar {
    background: var(--slk-grad-orbit) !important;
    color: var(--slk-gold-300) !important;
    box-shadow: 0 18px 34px rgba(11, 21, 51, .22) !important;
    border: 1px solid rgba(245, 179, 36, .32);
    position: relative;
    overflow: hidden;
}

.aw-titlebar::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--slk-stars-far);
    background-size: 180px 180px;
    opacity: .55;
    pointer-events: none;
}

.aw-submit-btn,
.aw-search-btn.btn-primary {
    background: var(--slk-grad-gold) !important;
    border-color: transparent !important;
    color: var(--slk-ink) !important;
    box-shadow: var(--slk-glow-gold) !important;
}

.aw-submit-btn:hover,
.aw-search-btn.btn-primary:hover {
    box-shadow: 0 18px 42px rgba(245, 179, 36, .42) !important;
}

#countryList li:hover,
#countryFromList li:hover,
#stateList li:hover,
#citiesList li:hover {
    background: var(--slk-grad-gold) !important;
    color: var(--slk-ink) !important;
    box-shadow: 0 16px 26px rgba(245, 179, 36, .28) !important;
    border-color: transparent !important;
}

.close-btn {
    background: var(--slk-grad-orbit) !important;
    color: var(--slk-on-dark) !important;
    box-shadow: 0 12px 22px rgba(11, 21, 51, .2) !important;
}

.close-btn:hover {
    color: var(--slk-gold-300) !important;
}

/* -----------------------------------------------------------------------------
   17. 會員中心 / 一般內頁的共用元件
   -------------------------------------------------------------------------- */
.aw-mini-stat,
.aw-offer-card,
.aw-price-box,
.aw-profile-card,
.aw-route-card,
.aw-warehouse-card,
.aw-news-card,
.aw-contact-line-card {
    border-radius: var(--slk-radius-lg);
    border: 1px solid var(--slk-line);
    box-shadow: var(--slk-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.aw-mini-stat:hover,
.aw-offer-card:hover,
.aw-route-card:hover,
.aw-warehouse-card:hover,
.aw-news-card:hover {
    transform: translateY(-4px);
    border-color: rgba(245, 179, 36, .4);
    box-shadow: 0 22px 46px rgba(245, 179, 36, .14);
}

.aw-main-btn,
.aw-line-cta-btn,
.aw-arrived-action-btn {
    border-radius: 12px;
    font-weight: 700;
}

.aw-customer-shortcut-icon {
    background: var(--slk-grad-orbit);
    color: var(--slk-gold-300);
}

/* 客戶側欄 */
.aw-only-sidebar-link:hover,
.aw-only-sidebar-link.active {
    background: var(--slk-gold-100);
    color: var(--slk-gold-900);
    border-radius: 10px;
}

/* 關於我們左側兩張圖改為 2 倍解析度檔，需指定顯示寬度才不會撐大版面
   （手機 575px 以下沿用主題原本的縮小尺寸） */
@media only screen and (min-width: 576px) {
    .about-bx1 .dz-media .app-1 { width: 320px; }
    .about-bx1 .dz-media .app-2 { width: 250px; }
}

/* -----------------------------------------------------------------------------
   18. 圖片與媒體
   -------------------------------------------------------------------------- */
.dz-media,
.dz-media img,
.blog-img img,
.commongoodsImg {
    border-radius: 14px;
}

.commongoodsImg {
    box-shadow: var(--slk-shadow-sm);
}

/* -----------------------------------------------------------------------------
   19. 動態進場（保留主題的 wow 效果，但補上降級）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .banner-two:after,
    .banner-three:after,
    .dz-bnr-inr:after,
    .site-footer.style-2:after,
    .banner-two .banner-media {
        animation: none !important;
    }
}

/* =============================================================================
   20. RWD — 響應式細節
   ============================================================================= */

/* 避免任何區塊造成整頁橫向捲動 */
img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

table {
    max-width: 100%;
}

/* 寬表格改為在自己的容器內橫向捲動，而不是撐破版面 */
.table-responsive,
.aw-parcel-table,
.aw-warehouse-recipient-table,
.aw-dashboard-orders-table,
.aw-checkout-history-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--slk-gold-500);
    border-radius: 999px;
}

/* ---- ≥ 1400px：大螢幕留白更舒服 ---- */
@media only screen and (min-width: 1400px) {
    .banner-two .banner-content {
        padding: 70px 60px;
    }
}

/* ---- ≤ 1199.98px ---- */
@media only screen and (max-width: 1199.98px) {
    .site-header.style-2 .is-fixed .main-bar {
        border-bottom-width: 1px;
    }

    .container-fluid.blog .blog-content a.h4 {
        font-size: 19px;
    }
}

/* ---- ≤ 991.98px：平板 / 手機 ---- */
@media only screen and (max-width: 991.98px) {
    /* 主視覺文字比例 */
    .banner-two .banner-content h1,
    .banner-two .banner-content .h1 {
        font-size: clamp(26px, 6.2vw, 42px);
        line-height: 1.25;
    }

    .banner-two .banner-content .btn {
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .dz-bnr-inr h1,
    .dz-bnr-inr .h1 {
        font-size: clamp(24px, 5.4vw, 38px);
    }

    .breadcrumb-row ul {
        padding: 7px 18px;
    }

    .breadcrumb-row ul li {
        font-size: 14px;
    }

    /* 手機主選單面板：滾動順暢、觸控目標夠大 */
    .header-nav .nav > li > a {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .header-nav .nav > li .sub-menu li a,
    .header-nav .nav > li .mega-menu li a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* 星塵在小螢幕上放慢、減量，降低耗電 */
    .banner-two:after,
    .dz-bnr-inr:after,
    .site-footer.style-2:after {
        animation-duration: 300s;
        opacity: .6;
    }

    /* 頁尾 CTA 內距在窄螢幕過大，收斂一點 */
    .site-footer.style-2 .footer-box {
        padding-left: 24px;
        padding-right: 24px;
    }

    .site-footer .widget_about .footer-logo img {
        max-height: 56px;
        width: auto;
    }
}

/* ---- ≤ 767.98px：手機 ---- */
@media only screen and (max-width: 767.98px) {
    .container,
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .container-fluid.blog {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .container-fluid.blog .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .container-fluid.blog .blog-content a.h4 {
        font-size: 18px;
    }

    /* 按鈕在手機上滿版更好按 */
    .banner-two .banner-content .btn,
    .site-footer.style-2 .footer-box .btn {
        min-width: 160px;
    }

    /* 回到頂端不要擋住內容 */
    .scroltop {
        height: 44px !important;
        width: 44px !important;
        line-height: 44px !important;
        right: 12px !important;
        bottom: 12px !important;
    }

    /* 表格字級縮小，避免過度橫向捲動 */
    .table,
    .table td,
    .table th {
        font-size: 14px;
    }

    /* Modal 在手機貼齊安全邊界 */
    .modal-dialog {
        margin: 12px;
    }

    .aw-wechat-qr-img {
        width: 170px;
        height: 170px;
    }
}

/* ---- ≤ 575.98px：小手機 ---- */
@media only screen and (max-width: 575.98px) {
    .banner-two .banner-content h1,
    .banner-two .banner-content .h1 {
        font-size: clamp(22px, 7vw, 30px);
    }

    .banner-two .banner-content .btn,
    .site-footer.style-2 .footer-box .btn {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .breadcrumb-row ul {
        padding: 6px 14px;
        border-radius: 22px;
    }

    .breadcrumb-row ul li {
        font-size: 13px;
    }

    .container-fluid.blog .display-4 {
        font-size: 26px;
    }

    .site-footer.style-2 .footer-box .title {
        font-size: 20px;
        line-height: 1.5;
    }
}

/* ---- 橫向手機：避免主視覺過高 ---- */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    .dz-bnr-inr.dz-bnr-inr-lg,
    .dz-bnr-inr.dz-bnr-inr-lg .dz-bnr-inr-entry {
        height: 260px;
    }
}

/* ---- 深色模式使用者：維持既有淺色排版，只調整表單自動填色 ---- */
@media (prefers-color-scheme: dark) {
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--slk-ink);
        -webkit-box-shadow: 0 0 0 1000px #fff inset;
    }
}

/* ---- 列印 ---- */
@media print {
    .site-header,
    .site-footer,
    .scroltop,
    #loading-area,
    .mobile-toolbar {
        display: none !important;
    }

    body,
    .page-content {
        background: #fff !important;
        color: #000 !important;
    }
}

/* -----------------------------------------------------------------------------
   21. 對比保險：主題中「主色底 + 白字」的元件
   金色比原本的橘色更亮，白字會讀不清楚，統一改為深空色文字。
   -------------------------------------------------------------------------- */
.file-upload-wrapper:before,
.ui-datepicker-calendar tbody td a:hover,
.ui-datepicker-calendar tbody td a.ui-state-active,
.form-select .dropdown-menu ul li.selected a,
.btn-light:hover,
.owl-btn-primary .owl-nav button.owl-prev, .owl-btn-primary .owl-nav button.owl-next,
.owl-btn-white .owl-prev:hover, .owl-btn-white .owl-next:hover,
.dz-accordion .accordion-header .accordion-button,
.pagination li .page-numbers.current, .pagination li .page-numbers.active, .pagination li .page-numbers:hover, .pagination li .page-link.current, .pagination li .page-link.active, .pagination li .page-link:hover,
.list-square-check li:hover:before,
.video-bx.style-2 .video-btn .popup-youtube,
.btn-next:hover, .btn-prev:hover,
.dz-box.style-2 .sub-title,
.quote-left:before, .quote-right:before,
.testimonial-2 .testimonial-pic:after,
.icon-bx-wraper.style-1.active,
.icon-bx-wraper.style-3 .dz-num,
.dz-team.style-1 .team-social li a,
.dz-card.style-1 .dz-media .dz-badge,
.blog-single > .dz-media.post-link img + .post-link-in:hover,
.post-link-in:hover,
.modal.status-modal .modal-content .status-wrapper .status-swiper .swiper-slide .status-top-box .status-btn .btn.btn-sm, .modal.status-modal .modal-content .status-wrapper .status-swiper .swiper-slide .status-top-box .status-btn .btn-group-sm > .btn, .modal.status-modal .modal-content .status-wrapper .status-swiper .swiper-slide .status-top-box .status-btn .btn-group-sm > .wp-block-button__link, .modal.status-modal .modal-content .status-wrapper .status-swiper .swiper-slide .status-top-box .status-btn .btn-sm.wp-block-button__link,
.dz-card.style-2 .dz-media .dz-badge,
.dz-card.style-3 .dz-media .dz-badge,
.list-check-1 li:before,
.list-check-1.light li:hover:before,
.nav-tabs.style-1 .nav-link.active,
.wp-block-search .wp-block-search__button,
.wp-block-tag-cloud a,
.comments-area .comment-list > .comment .comment-body .reply .comment-reply-link,
.dz-share-post .post-tags a:hover,
.post-swiper .prev-post-swiper-btn:hover, .post-swiper .next-post-swiper-btn:hover {
    color: var(--slk-ink) !important;
}