/* ==========================================================================
   銷售通路網絡 (Network.aspx) 專用樣式表
   ========================================================================== */

/* 1. 通用自定義組件 */
.hr-custom {
    border: none;
    border-top: 3px solid #333;
    /* margin: 4rem 0;  增加間距讓頁面更有呼吸感 */
}

.boius {
    border-radius: 3rem;
}

/* 2. 銷售通路區塊佈局 (Top Section) */
.channel-section {
    padding: 60px 0;
    font-family: "Microsoft JhengHei", sans-serif;
    background-color: #ffffff;
    /* 保持潔白感 */
}

.sub-text {
    font-size: 1.5rem;
    /* 調大一點以呼應您的要求 */
    color: #444;
    margin-bottom: 50px;
    font-weight: bold;
}

/* 3. 地區圖片區塊 (Region Items) */
.region-item {
    margin-bottom: 30px;
    transition: transform 0.3s ease;
}

.region-item:hover {
    transform: translateY(-8px);
    /* 懸停位移稍微明顯一點 */
}

.region-item img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.channel-pill {
    border: 1px solid #ddd;
    border-radius: 5rem;
    padding: 20px 15px;
    margin-bottom: 25px;
    text-align: center;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 110px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.channel-pill:hover {
    background-color: #E60012;
    /* 滑過時紅底 */
    border-color: #E60012;
    box-shadow: 0 5px 15px rgba(230, 0, 18, 0.1);
    transform: scale(1.02);
}

.channel-pill:hover h4,
.channel-pill:hover span {
    color: #fff;
    /* 滑過時白字 */
}

.channel-pill h4 {
    font-size: 1.6rem;
    font-weight: 900;
    margin: 0;
    color: #333;
}

.channel-pill span {
    font-size: 0.95rem;
    color: #888;
    text-transform: uppercase;
    margin-top: 5px;
    transition: color 0.3s ease;
}

/* 5. 營業據點詳細資訊 (Bottom Section) */
.location-container {
    max-width: 1440px;
    /* 寬版設計 */
    margin: 0 auto;
    padding: 0 15px;
}

.location-group {
    padding: 0 3.5rem;
    /* 增加左右留白 */
    margin-bottom: 3rem;
    transition: all 0.3s ease;
}

/* 地區標題底線互動 */
.location-group h3 {
    color: #000;
    font-family: "Noto Sans TC";
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 39.2px */
    display: block;
    padding-bottom: 15px;
    margin-bottom: 40px;
    border-bottom: 3px solid #EEEEEE;
    /* 預設淡灰色 */
    transition: border-color 0.4s ease, color 0.3s ease;
}

/* 重要：指到區塊上方時底線變紅 */
.location-group:hover h3 {
    border-bottom: 3px solid #E60012;
    /* 南聯企業紅 */
}

.location-item {
    margin-bottom: 3.5rem;
}

.location-name {
    color: #000;
    font-family: "Noto Sans TC";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 28.987px */
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.location-info {
    color: #000;
    font-family: "Noto Sans TC";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    margin-bottom: 8px;
}

/* 6. 台灣地圖區塊CSS */
.taiwan-map-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.taiwan-map {
    display: block;
    max-height: 1000px;
    width: auto;
    max-width: 100%;
}

/* 底圖 */
.base-map {
    position: relative;
    z-index: 1;
}

/* 北中南亮燈圖疊在底圖上 */
.mask-map {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

/* 預設隱藏 */
.map-mask {
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    /* 不擋住滑鼠事件 */
}

/* 顯示中的亮燈圖 */
.map-mask.active {
    opacity: 1;
}

/* hover 感應區 */
.map-hotspot {
    position: absolute;
    z-index: 4;
    cursor: pointer;
    background: rgba(255, 0, 0, 0);
    /* 測試時可改成 0.2 看區域 */
}

/* 這三區位置你要依照實際地圖微調 */
.hotspot-north {
    top: 3%;
    left: 42%;
    width: 33%;
    height: 22%;
}

.hotspot-central {
    top: 26%;
    left: 18%;
    width: 35%;
    height: 26%;
}

.hotspot-south {
    top: 51%;
    left: 8%;
    width: 48%;
    height: 36%;
}

/* 7建築物共用樣式 */
.map-building {
    position: absolute;
    z-index: 2;
    cursor: pointer;
    /* transition: transform 0.3s ease, filter 0.3s ease;*/
}


/* 滑鼠移上去，建築物往上彈 */
/*.map-building:hover {
        transform: translateY(-12px);
        /*filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.18));  往上浮的時候的陰影
    }*/

/* 台北總公司位置：先放在台灣北部，之後再微調 */
.taipei-building {
    top: -5%;
    left: 66%;
}

.taipei-building img {
    display: block;
    width: 70px;
    /* 可自行調整大小 */
    height: auto;
}

/* 北區行政中心位置*/
.north-building {
    top: 0%;
    left: 53%;
}

.north-building img {
    display: block;
    width: 70px;
    /* 可自行調整大小 */
    height: auto;
}

/* 桃園總倉位置*/
.warehouse-building {
    top: 12%;
    left: 40%;
}

.warehouse-building img {
    display: block;
    width: 120px;
    /* 可自行調整大小 */
    height: auto;
}

/* 中區行政中心位置*/
.middle-building {
    top: 23%;
    left: 28%;
}

.middle-building img {
    display: block;
    width: 80px;
    /* 可自行調整大小 */
    height: auto;
}

/* 南區行政中心位置*/
.south-building {
    top: 50%;
    left: 16%;
}

.south-building img {
    display: block;
    width: 80px;
    /* 可自行調整大小 */
    height: auto;
}

/* 高屏行政中心位置*/
.kaohsiung-building {
    top: 63%;
    left: 16%;
}

.kaohsiung-building img {
    display: block;
    width: 80px;
    /* 可自行調整大小 */
    height: auto;
}

/* 路竹倉位置*/
.southwarehouse-building {
    top: 60%;
    left: 32%;
}

.southwarehouse-building img {
    display: block;
    width: 120px;
    /* 可自行調整大小 */
    height: auto;
}

/* 花東通路位置*/
.east-building {
    top: 35%;
    left: 65%;
}

.east-building img {
    display: block;
    width: 80px;
    /* 可自行調整大小 */
    height: auto;
}

/*地圖Label絕對位置*/
.map-label {
    position: absolute;
    z-index: 2;
    cursor: pointer;
    display: inline-block;
}

/* hover 時出現紅色底線 */
.map-label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    /* 底線與圖片距離，可自行調整 */
    width: 0;
    height: 3px;
    /* 底線粗細 */
    background: #E60012;
    transition: width 0.2s ease;
}

.map-label:hover::after {
    width: 100%;
}

.taipei-label {
    top: -5%;
    left: 83%;
}

.taipei-label img {
    display: block;
    width: 210px;
    /* 可自行調整大小 */
    height: auto;
}

.north-label {
    top: 2%;
    left: 22%;
}

.north-label img {
    display: block;
    width: 105px;
    /* 可自行調整大小 */
    height: auto;
}

.warehouse-label {
    top: 13%;
    left: 25%;
}

.warehouse-label img {
    display: block;
    width: 70px;
    /* 可自行調整大小 */
    height: auto;
}

.middle-label {
    top: 28%;
    left: 0%;
}

.middle-label img {
    display: block;
    width: 105px;
    /* 可自行調整大小 */
    height: auto;
}

.south-label {
    top: 55%;
    left: -25%;
}

.south-label img {
    display: block;
    width: 105px;
    /* 可自行調整大小 */
    height: auto;
}

.kaohsiung-label {
    top: 68%;
    left: -25%;
}

.kaohsiung-label img {
    display: block;
    width: 105px;
    /* 可自行調整大小 */
    height: auto;
}

.southwarehouse-label {
    top: 62%;
    left: 58%;
}

.southwarehouse-label img {
    display: block;
    width: 70px;
    /* 可自行調整大小 */
    height: auto;
}

.east-label {
    position: absolute;
    z-index: 2;
    cursor: pointer;
    display: inline-block;
    top: 40%;
    left: 86%;
}

.east-label img {
    display: block;
    width: 80px;
    /* 可自行調整大小 */
    height: auto;
}

.arrow-col {
    display: flex;
    justify-content: center;
    /* 水平置中 */
}

.arrow-img {
    display: block;
    width: 80px;
    /* 自行調整大小 */
    height: auto;
}

.mission-networktitle {
    color: #231815;
    font-family: "Noto Sans TC";
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1px;
}

.mission-subtitle {
    color: #000;
    text-align: center;
    font-family: "Noto Sans TC";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    /* 41.6px */
    letter-spacing: 3.2px;
}

/* ==========================================================================
   1. 結構與 2x2 佈局網格間距控制
   ========================================================================== */
/* 手機版與基礎 RWD 設定 */
.carousel-inner .row-cols-md-2>.col {
    padding: 0 1.5rem !important;
}

/* 桌機版 2x2 方塊與標題間距精準控制 */
@media (min-width: 768px) {
    .carousel-inner .row-cols-md-2>.col {
        /* 💡 縮寫：上下留0，左右拉開中間距離 */
        padding: 0 2.5rem !important;
    }

    /* 第一排兩個方塊（第 1、2 個 .col）：縮短與上方標題的距離 */
    .carousel-inner .row-cols-md-2>.col:nth-child(1),
    .carousel-inner .row-cols-md-2>.col:nth-child(2) {
        margin-top: 2.5rem !important;
    }

    /* 第二排兩個方塊（第 3、4 個 .col）：維持大間距防標籤互撞 */
    .carousel-inner .row-cols-md-2>.col:nth-child(3),
    .carousel-inner .row-cols-md-2>.col:nth-child(4) {
        margin-top: 5rem !important;
    }
}

.carousel-grid-wrapper {
    min-height: 1000px;
    background-color: #EAEAEA;
}

/* ==========================================================================
   2. 主標題樣式 (main-grid-title)
   ========================================================================== */
.main-grid-title.custom-red-shadow {
    background-color: #ffffff;
    /* 白色底 */
    color: #212529;
    /* 黑色字 */
    box-shadow: 6px 6px 0px #E60012;
    /* 核心：右偏移6px, 下偏移6px, 純紅粗陰影 */

    /* 💡 強制設定為一般粗細 */
    font-weight: 400 !important;
}

.chart-top-space {
    margin-top: 3.5rem;
}

/* ==========================================================================
   3. 卡片基礎與內部元件樣式
   ========================================================================== */
.custom-data-card {
    border: 1.5px solid #ffffff;
    border-radius: 0px;
}

.card-text {
    font-size: 1.4rem;
    min-height: 4rem;
    /* 鎖定最小高度，防止因字數不同導致卡片高度不一 */
    margin-bottom: 1rem !important;

    text-align: justify;
    /* 讓文字左右兩端對齊，使切齊線更明顯 */
}

.card-top-tag {
    position: absolute;
    top: -37px;
    left: -2px;
    border-radius: 12px 24px 0px 0px;
    padding: 0.1rem 1.8rem;
    font-size: 1.4rem;
    letter-spacing: 1px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.card-top-right-text {
    position: absolute;
    top: -52px;
    right: 5px;
    font-size: 1.5rem;
    line-height: 1;
    z-index: 10;
}

.card-body-content {
    margin-top: 0px;
    padding-bottom: 0.5rem;
    font-size: 1.3rem;
}

/* ==========================================================================
   4. 長條圖與數據列設定
   ========================================================================== */
.custom-data-card .progress {
    background-color: transparent;
    border-radius: 2px;
    box-shadow: none;
    /* 移除預設陰影 */

    /* 💡 設定長條圖的高度 */
    height: 20px !important;
}

.data-row-inline {
    width: 100%;
}

.shop-name {
    width: 85px;
    /* 寬度拉寬，確保「家樂福超市」不折行 */
    white-space: nowrap;
}

.shop-count {
    width: 60px;
    white-space: nowrap;
    text-align: right !important;
}

/* ==========================================================================
   5. 四大通路主題色系控制
   ========================================================================== */
/* --- 第一區：連鎖超商（鮮紅色系） --- */
.card-type-1 .card-top-tag {
    background-color: #E60012;
    color: #ffffff;
}

.card-type-1 .card-top-right-text,
.card-type-1 .card-top-right-text span {
    color: #E60012;
}

.card-type-1 .progress-bar {
    background-color: #E60012;
}

/* --- 第二區：連鎖超市（深咖色系） --- */
.card-type-2 .card-top-tag {
    background-color: #784600;
    color: #ffffff;
}

.card-type-2 .card-top-right-text,
.card-type-2 .card-top-right-text span {
    color: #784600;
}

.card-type-2 .progress-bar {
    background-color: #784600;
}

/* --- 第三區：量販店（亮藍色系） --- */
.card-type-3 .card-top-tag {
    background-color: #2592FF;
    color: #ffffff;
}

.card-type-3 .card-top-right-text,
.card-type-3 .card-top-right-text span {
    color: #2592FF;
}

.card-type-3 .progress-bar {
    background-color: #2592FF;
}

/* --- 第四區：藥妝通路（亮黃/橘黃色系） --- */
.card-type-4 .card-top-tag {
    background-color: #FAB300;
    color: #ffffff;
}

.card-type-4 .card-top-right-text,
.card-type-4 .card-top-right-text span {
    color: #FAB300;
}

.card-type-4 .progress-bar {
    background-color: #FAB300;
}

/* ==========================================================================
   6. 輪播圖指示點（正圓點版）
   ========================================================================== */
.carousel-indicators [data-bs-target] {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    /* 強制切成完美正圓形 */
    background-color: #ffffff !important;
    margin: 0 6px;
    opacity: 0.5;
    transition: all 0.3s ease;

    /* 💡 徹底拔除 Bootstrap 預設的隱形上下邊框，防止圓形被擠壓變形 */
    border-top: 0 !important;
    border-bottom: 0 !important;
    border: none !important;
}

/* 第一頁（連鎖KeyAccount）選中時的點點 */
.carousel-indicators button[data-bs-slide-to="0"].active {
    background-color: #E60012 !important;
    opacity: 1 !important;
    transform: scale(1.2);
}

/* 第二頁（傳統及其他通路）選中時的點點 */
.carousel-indicators button[data-bs-slide-to="1"].active {
    background-color: #E60012 !important;
    opacity: 1 !important;
    transform: scale(1.2);
}

/* 第三頁（經銷分佈據點）選中時的點點 */
.carousel-indicators button[data-bs-slide-to="2"].active {
    background-color: #E60012 !important;
    opacity: 1 !important;
    transform: scale(1.2);
}

@media (max-width: 1600px) {
    .mission-networktitle {
        font-size: 26px;
    }

    .mission-subtitle {
        font-size: 18px;
    }

    .region-row {
        width: 90% !important;
        /* 強制寬度 */
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
        /* 防止被舊版 CSS 浮動影響 */
        display: flex !important;
        /* 確保它仍是 Flex 容器 */
        justify-content: center;
        /* 讓內部的 col 居中 */
    }

    .taiwan-map-wrap {
        /* 縮小為 0.75 倍 */
        transform: scale(0.75);

        /* 確保縮放的中心點在上方中間，避免兩邊留白過大 */
        transform-origin: top center;

        /* 縮放後容器佔用的實際空間會縮小，需要處理可能產生的空白 */
        margin-bottom: -150px;
        /* 視情況調整，抵銷縮放後的底部留白 */
    }

    .region-row-info {
        width: 85% !important;
        /* 強制寬度 */
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
        /* 防止被舊版 CSS 浮動影響 */
        display: flex !important;
        /* 確保它仍是 Flex 容器 */
        justify-content: center;
        /* 讓內部的 col 居中 */
    }

    .arrow-img {
        width: 60px;
    }

    .channel-pill {
        min-height: 70px;
    }

    .channel-pill h4 {
        font-size: 20px;
    }


    .channel-pill span {
        font-size: 12px;
    }

    .location-group h3 {
        font-size: 20px;
    }

    .location-group p {
        font-size: 14px;
    }

    .card-text {
        font-size: 18px;
    }

    .card-top-tag {
        font-size: 18px;
        padding: 0.25rem 1.8rem;
    }

    .data-row-inline {
        font-size: 18px;
    }

    .main-grid-title {
        font-size: 26px;
    }
}