@charset "UTF-8";
/* ============================================================
   後台共用單元列表 - 新皮膚 (list skin)
   - 作用範圍限定 .cms-list-skin（只影響列表頁，不動 detail/edit）
   - 主色跟隨後台主題 CMS_TPL_SKIN_COLOR（由 header 注入 --cms-skin）
   - 只改視覺，不影響 Set 設定驅動的欄位/按鈕/邏輯
   ============================================================ */

/* 內容區畫布：淺灰底（白卡片才有對比、不會整片白） */
.main-content:has(.page-content.cms-list-skin),
.main-content:has(.page-content.cms-list-skin) .main-content-inner {
    background: #eef0f4 !important;
}

/* 全域主題色變數（供麵包屑等非列表元素使用） */
:root {
    --skin: var(--cms-skin, #8B3A3A);
    --skin-strong: color-mix(in srgb, var(--skin) 86%, black);
    --skin-050: color-mix(in srgb, var(--skin) 8%, transparent);
    --skin-120: color-mix(in srgb, var(--skin) 26%, transparent);
}

/* ============================================================
   後台頂部列 navbar — 專業風白底 chrome（主題色只當重點）
   ============================================================ */
#navbar,
#navbar.navbar,
#navbar.navbar-default,
#navbar.navbar-fixed-top,
#navbar .navbar-container,
#navbar .navbar-header,
#navbar .navbar-header.pull-left,
#navbar .navbar-header.pull-right,
#navbar .navbar-buttons,
#navbar .navbar-buttons.navbar-header {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}
#navbar.navbar-default,
#navbar .navbar-container {
    border: 0 !important;
    border-bottom: 1px solid #e7e9ee !important;
    box-shadow: 0 1px 2px rgba(20, 25, 40, .04) !important;
}
.email-recipient-table{overflow: hidden;overflow-x: auto;}
/* 品牌 */
#navbar .navbar-brand,
#navbar .navbar-brand small { color: #1c2230 !important; font-weight: 700; letter-spacing: .2px; text-shadow: none !important; }
#navbar .navbar-brand .fa-home { color: var(--skin) !important; }
/* 漢堡（手機側欄鈕） */
#navbar .menu-toggler .icon-bar { background: #59616f !important; }
/* 右側項目：深色文字、無分隔框、hover 淺灰 */
#navbar .ace-nav > li { border: 0 !important; background: transparent !important; }
#navbar .ace-nav > li > a,
#navbar .ace-nav > li.time-block,
#navbar .ace-nav > li .user-info,
#navbar .ace-nav > li .user-info small,
#navbar .ace-nav > li > a .ace-icon {
    color: #59616f !important;
    background: transparent !important;
    text-shadow: none !important;
    transition: background .14s, color .14s;
}
#navbar .ace-nav > li.time-block { color: #98a0ad !important; }
#navbar .ace-nav > li > a:hover,
#navbar .ace-nav > li.open > a { background: #f5f6f8 !important; color: #1c2230 !important; }
#navbar .ace-nav > li > a:hover .ace-icon,
#navbar .ace-nav > li.open > a .ace-icon { color: var(--skin) !important; }
#navbar .ace-nav .fa-caret-down { color: #98a0ad !important; }
/* ---------- 手機版頂部（navbar-header-phone）：白底 + 徽章設計 ---------- */
/* logo 靠左、首頁/姓名推到最右，兩邊分開不擠 */
@media (max-width: 991px) {
    #navbar .navbar-container { display: flex !important; align-items: center !important; }
    #navbar .navbar-header.pull-left {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        float: none !important;
    }
    #navbar .navbar-header.pull-left .navbar-brand { flex: none; white-space: nowrap; }
}
#navbar .navbar-header-phone {
    /* 預設隱藏；僅 ≤450 再顯示，避免桌機/平板與右側 ace-nav 重複 */
    display: none !important;
    align-items: center !important;
    gap: 10px;
    background: transparent !important;
    margin-left: auto !important;   /* 推到最右（手機顯示時） */
}
/* 桌機隱藏手機版那組（避免跟右側的桌機版重複出現） */
@media (min-width: 992px) {
    #navbar .navbar-header-phone { display: none !important; }
}
#navbar .navbar-header-phone .navbar-header-item {
    background: transparent !important;
    border: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}
#navbar .navbar-header-phone a,
#navbar .navbar-header-phone .ace-icon,
#navbar .navbar-header-phone p { color: #59616f !important; }

/* 手機版不顯示首頁按鈕 */
#navbar .navbar-header-phone .to-web-home { display: none !important; }

/* 首頁：icon-only 主題色正方形徽章（隱藏「首頁」文字） */
#navbar .navbar-header-phone .to-web-home a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
#navbar .navbar-header-phone .to-web-home a p { display: none !important; }
#navbar .navbar-header-phone .to-web-home a i {
    background: var(--skin) !important;
    color: #fff !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex: none !important;
    border-radius: 8px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* 手機版通知：同尺寸徽章，避免被擠成一點 */
#navbar .navbar-header-phone .notify,
#navbar .navbar-header-phone .navbar-header-item.notify {
    display: inline-flex !important;
    align-items: center !important;
    flex: none !important;
}
#navbar .navbar-header-phone .notify a,
#navbar .navbar-header-phone .navbar-header-item.notify a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 0 !important;
    position: relative !important;
}
#navbar .navbar-header-phone .notify a p,
#navbar .navbar-header-phone .navbar-header-item.notify a p { display: none !important; }
#navbar .navbar-header-phone .notify a i,
#navbar .navbar-header-phone .navbar-header-item.notify a i {
    background: #f5f6f8 !important;
    color: var(--skin) !important;
    border: 1px solid #e7e9ee !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    flex: none !important;
    border-radius: 8px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    line-height: 1 !important;
    margin: 0 !important;
}
#navbar .navbar-header-phone .notify .notify-num {
    top: -4px !important;
    right: -4px !important;
}

/* 使用者：主題色頭像徽章 + 名字（框線按鈕；高度與訊息鈕一致） */
#navbar .navbar-header-phone .admin-user > a.dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px;
    border: 1px solid #dfe2e8 !important;
    border-radius: 8px !important;
    background: #fff !important;
    height: 34px !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
    padding: 0 9px 0 4px !important;
}
#navbar .navbar-header-phone .admin-user > a.dropdown-toggle > .fa-user {
    background: var(--skin) !important;
    color: #fff !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    flex: none !important;
    border-radius: 6px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    line-height: 1 !important;
    margin: 0 !important;
}
#navbar .navbar-header-phone .admin-user .user-info,
#navbar .navbar-header-phone .admin-user p {
    color: #1c2230 !important;
    font-size: 12.5px !important;
    font-weight: 600;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}
#navbar .navbar-header-phone .admin-user .fa-caret-down { color: #98a0ad !important; margin-left: 4px; }
/* 使用者 / 通知下拉：乾淨白卡 */
#navbar .ace-nav .user-menu,
#navbar .ace-nav .notify-menu {
    border: 1px solid #e7e9ee;
    border-radius: 8px;
    box-shadow: 0 8px 28px -10px rgba(20, 25, 40, .22);
    padding: 6px;
    overflow: hidden;
    background: #fff;
}
#navbar .ace-nav .user-menu > li > a,
#navbar .ace-nav .notify-menu > li > a {
    border-radius: 6px;
    color: #59616f !important;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
}
#navbar .ace-nav .user-menu > li > a:hover,
#navbar .ace-nav .notify-menu > li > a:hover { background: var(--skin-050); color: var(--skin) !important; }
#navbar .ace-nav .user-menu > li.divider,
#navbar .ace-nav .notify-menu > li.divider { display: none; }

/* 更新公告 marquee 列 — 隱藏內容但「保留高度」
   （它是 navbar 與內容之間的間隔，直接 display:none 會讓麵包屑被 navbar 蓋住） */
.head-marquee { visibility: hidden !important; padding-bottom: 14px !important; }
.head-marquee * { visibility: hidden !important; }

/* 右上角 icon 一律轉柔和灰（去掉紅 icon 的突兀感） */
#navbar .ace-nav > li > a > i,
#navbar .ace-nav > li > a > .ace-icon,
#navbar .navbar-header-phone a > i { color: #98a0ad !important; }
#navbar .ace-nav > li.time-block > .ace-icon { color: #b7bdc7 !important; }

/* 頂欄右側動作鈕統一高度（蓋掉 Ace .ace-nav>li{height:45px}，訊息/首頁/姓名同一行同大） */
#navbar {
    --nav-action-h: 36px;
}
#navbar .ace-nav > li.admin-name,
#navbar .ace-nav > li.to-web-home,
#navbar .ace-nav > li.notify,
#navbar .ace-nav > li:has(> a.chat-msg-btn),
#navbar .ace-nav > li:has(svg.chat-msg-btn),
#navbar .ace-nav > li:has(> a.notify-dropdown),
#navbar .ace-nav > li:has(.notify-num) {
    height: auto !important;
    min-height: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

/* 使用者：做成有邊框的按鈕 + 主題色頭像方塊（高度與訊息徽章一致） */
#navbar .ace-nav > li.admin-name { display: flex !important; align-items: center; }
#navbar .ace-nav > li.admin-name > a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    height: var(--nav-action-h) !important;
    min-height: var(--nav-action-h) !important;
    max-height: var(--nav-action-h) !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    background: #fff !important;
    border: 1px solid #dfe2e8 !important;
    border-radius: 8px !important;
    margin: 0 6px !important;
    padding: 0 11px 0 5px !important;
}
#navbar .ace-nav > li.admin-name > a:hover { background: #f5f6f8 !important; }
#navbar .ace-nav > li.admin-name > a > .fa-user {
    background: var(--skin) !important;
    color: #fff !important;
    width: 26px; height: 26px;
    border-radius: 6px;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    font-size: 12px;
    margin: 0 !important;
}
#navbar .ace-nav > li.admin-name .user-info { color: #1c2230 !important; font-size: 12.5px; font-weight: 600; }
#navbar .ace-nav > li.admin-name .user-info small { color: #98a0ad !important; font-weight: 400; }
#navbar .ace-nav > li.admin-name .fa-caret-down { color: #98a0ad !important; margin-left: 2px; }

/* navbar 高度 58px；側欄 top 同步到 58；內容間隔靠更新公告 spacer 補償 */
#navbar.navbar-fixed-top,
#navbar.navbar-default,
#navbar .navbar-container { min-height: 58px !important; height: 58px !important; }
@media (min-width: 992px) { #sidebar.sidebar-fixed { top: 58px !important; } }
/* 側欄頂部留白（搜尋框不貼 navbar） */
#sidebar.sidebar { padding-top: 14px !important; }

/* navbar 右側加間距 + 使用者前的 | 分隔線（不改整體高度，避免壓到內容/側欄） */
#navbar .ace-nav { display: flex !important; align-items: center; height: 58px !important; }
#navbar .ace-nav > li { margin: 0 4px !important; display: flex !important; align-items: center; float: none !important; }
#navbar .ace-nav > li > a { line-height: 1.2 !important; padding: 6px 12px !important; border-radius: 6px; }
#navbar .ace-nav > li.time-block { padding: 0 4px; }

/* 去掉 Ace 窄屏給 .ace-nav 的灰色條（rgba(0,0,0,.15) / 邊框）+ Bootstrap #f8f8f8
   右側按鈕區與整條頂欄一律白底／透明，不再出現灰底塊 */
#navbar .ace-nav,
#navbar .navbar-buttons,
#navbar .navbar-buttons.navbar-header,
#navbar .navbar-buttons > .ace-nav,
#navbar.navbar:not(.navbar-collapse) .ace-nav,
#navbar.navbar:not(.navbar-collapse) .navbar-buttons,
#navbar.navbar-collapse .navbar-buttons,
#navbar.navbar-collapse .navbar-buttons > .ace-nav {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-width: 0 !important;
    box-shadow: none !important;
}
@media only screen and (max-width: 479px) {
    #navbar.navbar:not(.navbar-collapse) .ace-nav,
    #navbar.navbar:not(.navbar-collapse) .navbar-buttons,
    #navbar .ace-nav,
    #navbar .navbar-buttons {
        display: flex !important;
        float: none !important;
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        border-width: 0 !important;
        letter-spacing: normal !important;
        text-align: left !important;
    }
    #navbar.navbar:not(.navbar-collapse) .ace-nav > li,
    #navbar.navbar:not(.navbar-collapse) .ace-nav > li:first-child,
    #navbar.navbar:not(.navbar-collapse) .ace-nav > li:last-child {
        border: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        background: transparent !important;
    }
}
@media only screen and (max-width: 991px) {
    #navbar.navbar-collapse .navbar-buttons,
    #navbar .navbar-buttons,
    #navbar .ace-nav {
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
    }
}
/* 使用者前 | 分隔線 */
#navbar .ace-nav > li.admin-name::before {
    content: "";
    width: 1px; height: var(--nav-action-h);
    background: #e7e9ee;
    margin: 0 6px 0 2px;
    align-self: center;
}
/* navbar 內容上下置中（左 logo / 右功能區都垂直置中） */
@media (min-width: 992px) {
    #navbar .navbar-container { display: flex !important; align-items: center !important; }
    #navbar .navbar-header { float: none !important; }
    #navbar .navbar-buttons { float: none !important; margin-left: auto !important; }
}
#navbar .navbar-brand { height: auto !important; line-height: 1.2 !important; display: inline-flex !important; align-items: center; }
/* 拿掉「Welcome,」，只留名字 */
#navbar .user-info small { display: none !important; }

/* 頭部訊息（chat-msg-btn）：舊版深色頂欄用白 SVG，白底後幾乎看不見且僅 20×20
   → 做成與右側使用者鈕同高的主題色徽章（--nav-action-h）
   ※ 不要對 .navbar-header-phone 設 display:flex（會蓋掉桌機隱藏、造成訊息/姓名重複） */
#navbar .ace-nav > li:has(> a.chat-msg-btn),
#navbar .ace-nav > li:has(svg.chat-msg-btn) {
    display: flex !important;
    align-items: center !important;
    flex: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 0 !important;
}
#navbar .ace-nav > li > a.chat-msg-btn,
#navbar .ace-nav > li > a:has(> svg.chat-msg-btn),
#navbar .navbar-header-phone a.chat-msg-btn,
#navbar .navbar-header-phone a:has(> svg.chat-msg-btn),
#navbar a.chat-msg-btn,
#navbar a:has(> svg.chat-msg-btn) {
    display: inline-block !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 10px 0 0 !important;
    background: var(--skin) !important;
    border-radius: 7px !important;
    position: relative !important;
    line-height: 0 !important;
    font-size: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-align: center !important;
    vertical-align: middle !important;
}
#navbar .ace-nav > li > a.chat-msg-btn:hover,
#navbar .ace-nav > li > a:has(> svg.chat-msg-btn):hover,
#navbar .navbar-header-phone a.chat-msg-btn:hover,
#navbar .navbar-header-phone a:has(> svg.chat-msg-btn):hover,
#navbar a.chat-msg-btn:hover,
#navbar a:has(> svg.chat-msg-btn):hover {
    background: var(--skin-strong) !important;
}
#navbar .ace-nav a.chat-msg-btn svg,
#navbar .ace-nav a:has(> svg.chat-msg-btn) > svg,
#navbar .ace-nav svg.chat-msg-btn,
#navbar .navbar-header-phone a.chat-msg-btn svg,
#navbar .navbar-header-phone a:has(> svg.chat-msg-btn) > svg,
#navbar .navbar-header-phone svg.chat-msg-btn,
#navbar a.chat-msg-btn svg,
#navbar a:has(> svg.chat-msg-btn) > svg,
#navbar svg.chat-msg-btn {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    margin: auto !important;
    padding: 0 !important;
    transform: none !important;
    float: none !important;
    display: block !important;
    object-fit: contain !important;
    pointer-events: none !important;
}
#navbar .ace-nav a.chat-msg-btn svg path,
#navbar .ace-nav a:has(> svg.chat-msg-btn) > svg path,
#navbar .ace-nav svg.chat-msg-btn path,
#navbar a.chat-msg-btn svg path,
#navbar a:has(> svg.chat-msg-btn) > svg path,
#navbar svg.chat-msg-btn path {
    fill: #fff !important;
}

/* 再次強調：≥451 隱藏手機版頭部（含 :has 變形），只留右側桌機 ace-nav，避免訊息/姓名重複 */
@media (min-width: 451px) {
    #navbar .navbar-header-phone,
    #navbar .navbar-header-phone:has(a.chat-msg-btn),
    #navbar .navbar-header-phone:has(svg.chat-msg-btn),
    #navbar .navbar-header-phone:has(.admin-user) {
        display: none !important;
    }
}
@media (max-width: 450px) {
    #navbar .navbar-header-phone,
    #navbar .navbar-header-phone:has(a.chat-msg-btn),
    #navbar .navbar-header-phone:has(svg.chat-msg-btn) {
        display: inline-flex !important;
        align-items: center !important;
        margin-left: auto !important;
    }
    /* 手機端訊息鈕：縮小 + 圖示絕對置中 + 與右側姓名留距 */
    #navbar .navbar-header-phone .navbar-header-item:has(a.chat-msg-btn),
    #navbar .navbar-header-phone .navbar-header-item:has(svg.chat-msg-btn) {
        display: inline-flex !important;
        align-items: center !important;
        height: 28px !important;
        max-height: 28px !important;
        line-height: 0 !important;
        margin: 0 10px 0 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    #navbar .navbar-header-phone a.chat-msg-btn,
    #navbar .navbar-header-phone a:has(> svg.chat-msg-btn) {
        display: inline-block !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 0 !important;
        font-size: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        overflow: hidden !important;
        margin-right: 5px!important;
    }
    #navbar .navbar-header-phone a.chat-msg-btn svg,
    #navbar .navbar-header-phone a:has(> svg.chat-msg-btn) > svg,
    #navbar .navbar-header-phone svg.chat-msg-btn {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        max-width: 14px !important;
        max-height: 14px !important;
        margin: auto !important;
        padding: 0 !important;
        transform: none !important;
        display: block !important;
    }
}

/* 首頁 → 主題色 icon 徽章（與訊息/使用者同高、垂直置中）
   同時蓋掉 cms.css 的 .to-web-home{width:13%}，避免被 flex 擠扁 */
#navbar .ace-nav > li.to-web-home {
    display: flex !important;
    align-items: center !important;
    flex: none !important;
    width: auto !important;
    max-width: none !important;
}
#navbar .ace-nav > li.to-web-home > a {
    font-size: 0 !important;
    padding: 0 !important;
    height: var(--nav-action-h) !important;
    width: var(--nav-action-h) !important;
    min-height: var(--nav-action-h) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}
#navbar .ace-nav > li.to-web-home > a .ace-icon {
    background: var(--skin) !important;
    color: #fff !important;
    width: var(--nav-action-h) !important;
    height: var(--nav-action-h) !important;
    min-width: var(--nav-action-h) !important;
    flex: none !important;
    border-radius: 8px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    line-height: 1 !important;
    margin: 0 !important;
}
#navbar .ace-nav > li.to-web-home > a:hover .ace-icon { background: var(--skin-strong) !important; color: #fff !important; }

/* 通知 → 與首頁同尺寸徽章（先前只有 dropdown 樣式，按鈕本身被 cms.css
   .notify i{width:100%} + ace-nav flex 收縮擠成一點／…） */
#navbar .ace-nav > li.notify,
#navbar .ace-nav > li:has(> a.notify-dropdown),
#navbar .ace-nav > li:has(.notify-num) {
    display: flex !important;
    align-items: center !important;
    flex: none !important;
    width: auto !important;
    max-width: none !important;
}
#navbar .ace-nav > li.notify > a,
#navbar .ace-nav > li:has(> a.notify-dropdown) > a,
#navbar .ace-nav > li:has(.notify-num) > a {
    font-size: 0 !important;
    padding: 0 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}
#navbar .ace-nav > li.notify > a p,
#navbar .ace-nav > li:has(> a.notify-dropdown) > a p,
#navbar .ace-nav > li:has(.notify-num) > a p { display: none !important; }
#navbar .ace-nav > li.notify > a .ace-icon,
#navbar .ace-nav > li.notify > a > i,
#navbar .ace-nav > li:has(> a.notify-dropdown) > a .ace-icon,
#navbar .ace-nav > li:has(> a.notify-dropdown) > a > i,
#navbar .ace-nav > li:has(.notify-num) > a .ace-icon,
#navbar .ace-nav > li:has(.notify-num) > a > i {
    background: #f5f6f8 !important;
    color: var(--skin) !important;
    border: 1px solid #e7e9ee !important;
    width: var(--nav-action-h) !important;   /* 蓋掉 cms.css .notify i{width:100%} */
    height: var(--nav-action-h) !important;
    min-width: var(--nav-action-h) !important;
    max-width: var(--nav-action-h) !important;
    flex: none !important;
    border-radius: 8px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    line-height: 1 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
#navbar .ace-nav > li.notify > a:hover .ace-icon,
#navbar .ace-nav > li.notify > a:hover > i,
#navbar .ace-nav > li:has(> a.notify-dropdown) > a:hover .ace-icon,
#navbar .ace-nav > li:has(> a.notify-dropdown) > a:hover > i,
#navbar .ace-nav > li:has(.notify-num) > a:hover .ace-icon,
#navbar .ace-nav > li:has(.notify-num) > a:hover > i {
    background: var(--skin-050) !important;
    border-color: var(--skin-120) !important;
    color: var(--skin) !important;
}
#navbar .ace-nav > li.notify .notify-num,
#navbar .ace-nav > li.notify .notify-dropdown .notify-num,
#navbar .ace-nav > li:has(.notify-num) .notify-num {
    top: -4px !important;
    right: -4px !important;
    z-index: 2;
    font-size: 11px !important;
    line-height: 1.2 !important;
    min-width: 16px;
    text-align: center;
}

/* 時間：低調膠囊（時鐘 icon 主題色 + 等寬數字），單行不換行 */
#navbar .ace-nav > li.time-block {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
    background: #f5f6f8 !important;
    border: 1px solid #e7e9ee !important;
    border-radius: 8px !important;
    color: #59616f !important;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    line-height: var(--nav-action-h) !important;
    height: var(--nav-action-h);
}
#navbar .ace-nav > li.time-block > .ace-icon { color: var(--skin) !important; font-size: 13px; margin: 0 !important; }

/* 使用者按鈕內容上下置中（含 .open 展開狀態；高度與訊息鈕一致） */
#navbar .ace-nav > li.admin-name,
#navbar .ace-nav > li.admin-name.open { display: flex !important; align-items: center !important; }
#navbar .ace-nav > li.admin-name > a {
    display: inline-flex !important;
    align-items: center !important;
    height: var(--nav-action-h) !important;
    min-height: var(--nav-action-h) !important;
    max-height: var(--nav-action-h) !important;
    line-height: 1 !important;
}
#navbar .ace-nav > li.admin-name .dropdown-toggle .user-info,
#navbar .ace-nav > li.admin-name .user-info {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    line-height: 1 !important;
    height: auto !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;   /* 壓掉 Ace JS 塞的 inline margin-bottom:10px */
    padding: 0 !important;
    vertical-align: middle !important;
    transform: none !important;   /* 與固定高度按鈕一起垂直置中，不再上移 */
}
#navbar .ace-nav > li.admin-name > a > .fa-user,
#navbar .ace-nav > li.admin-name .fa-caret-down { align-self: center !important; }

/* ============================================================
   左側選單 sidebar — 專業風白底（目前頁主題色）
   ============================================================ */
#sidebar.sidebar { background: #ffffff !important; border-right: 1px solid #e7e9ee !important; box-shadow: none !important; }
#sidebar .nav-list { background: transparent !important; border: 0 !important; }
/* 搜尋框 */
#sidebar .search_box input {
    border: 1px solid #dfe2e8 !important;
    border-radius: 6px !important;
    background: #fafbfc !important;
    color: #1c2230 !important;
}
#sidebar .search_box i { color: #98a0ad !important; }

/* 頂層群組 */
#sidebar .nav-list > li { border: 0 !important; background: transparent !important; }
#sidebar .nav-list > li > a {
    color: #59616f !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 13.5px; font-weight: 500;
    border-radius: 6px;
    margin: 1px 8px;
    transition: background .12s, color .12s;
}
#sidebar .nav-list > li > a:hover { background: #f5f6f8 !important; color: #1c2230 !important; }
#sidebar .nav-list > li > a > i:first-child { color: #98a0ad !important; }
#sidebar .nav-list > li.active > a,
#sidebar .nav-list > li.open > a { background: #f5f6f8 !important; color: #1c2230 !important; }
#sidebar .nav-list > li.active > a > i:first-child,
#sidebar .nav-list > li.open > a > i:first-child { color: var(--skin) !important; }
/* 頂層 active 左側色條 → 主題色（若有） */
#sidebar .nav-list > li.active::before { background: var(--skin) !important; }

/* 子選單 */
#sidebar .nav-list .submenu { background: transparent !important; border: 0 !important; }
#sidebar .nav-list .submenu > li { background: transparent !important; border: 0 !important; }
#sidebar .nav-list .submenu > li > a {
    color: #59616f !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px;
    margin: 1px 8px 1px 16px;
    padding-left: 24px !important;
    transition: background .12s, color .12s;
}
#sidebar .nav-list .submenu > li > a:hover { background: #f5f6f8 !important; color: #1c2230 !important; }
/* 隱藏項目前的小箭頭（hover/active 時會壓到文字；目前頁已有主題色底當指示） */
#sidebar .nav-list .submenu > li > a > .menu-icon { display: none !important; }

/* 第 2 層整塊：縮排 + 左側導引線（樹狀層級感），與第 1 層明確區隔 */
#sidebar .nav-list .submenu {
    margin: 2px 8px 6px 24px !important;
    border-left: 1px solid #e3e6eb !important;
    padding: 2px 0 2px 0 !important;
}
/* 第 2 層項目：字級較小、顏色較淡（第 1 層維持 icon + 深色較粗） */
#sidebar .nav-list .submenu > li > a {
    position: relative;
    font-size: 12.8px !important;
    color: #6b7382 !important;
    margin: 1px 6px 1px 8px !important;
    padding: 7px 10px 7px 18px !important;
}
/* 子選單項目前的小圓點指示（灰色；hover/目前頁轉主題色） */
#sidebar .nav-list .submenu > li > a::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #cfd4dc;
    transform: translateY(-50%);
    transition: background .12s;
}
#sidebar .nav-list .submenu > li > a:hover::before,
#sidebar .nav-list .submenu > li.active > a::before { background: var(--skin); }

/* 子選單分組標籤（hr_tag，如「學員」「教練」）：藍色色塊改為區段小標 */
#sidebar .nav-list .submenu > li > span {
    display: block !important;
    background: transparent !important;
    color: #98a0ad !important;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: .1em;
    border-radius: 0 !important;
    border-top: 1px solid #eef0f4;
    margin: 8px 10px 2px 8px !important;
    padding: 9px 0 2px 10px !important;
}
/* 目前頁（active）→ 主題色 + 淡底 */
#sidebar .nav-list .submenu > li.active > a {
    color: var(--skin) !important;
    background: var(--skin-050) !important;
    font-weight: 600;
}
#sidebar .nav-list .submenu > li.active > a > .menu-icon { color: var(--skin) !important; }
/* 清掉 Ace 子選單的連接線 / 箭頭 */
#sidebar .nav-list .submenu::before,
#sidebar .nav-list .submenu > li::before,
#sidebar .nav-list .submenu > li::after,
#sidebar .nav-list .submenu > li > .arrow { display: none !important; }

/* 收合鈕 */
#sidebar .sidebar-toggle { background: #fafbfc !important; border-top: 1px solid #e7e9ee !important; }
#sidebar .sidebar-toggle .ace-icon { color: #59616f !important; background: #fff !important; border-color: #dfe2e8 !important; }

/* ---------- 側欄補強：加寬 + hover 不被裁 + 搜尋框保留 ---------- */
/* 加寬（桌機、且非收合狀態；內容跟著位移） */
@media (min-width: 992px) {
    #sidebar.sidebar:not(.menu-min) { width: 218px !important; }
    #sidebar.sidebar:not(.menu-min) + .main-content { margin-left: 218px !important; }
}
/* 側欄本體「垂直可捲動」：內容超過螢幕高時捲得到最底部的項目
   （高亮已用內縮 margin 處理，不會被裁；搜尋框 sticky 也靠這個捲動容器生效）
   （注意：.submenu 不可設 visible — Ace 收合動畫靠 overflow:hidden 裁切） */
#sidebar.sidebar {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
@media (min-width: 992px) {
    /* 用 top+bottom 釘住取代 calc 高度：字級縮放(zoom)任何比例都自動貼合視窗 */
    #sidebar.sidebar-fixed {
        top: 58px !important;
        bottom: 0 !important;
        height: auto !important;
    }
}
#sidebar .nav-list { overflow: visible !important; }
/* 選單高度隨內容自動長高（Ace JS 會寫死高度 → 展開子選單後捲動範圍不含新增部分，
   造成「要先收合母選單才能捲到底」；height:auto !important 可蓋過 inline 高度） */
#sidebar .nav-list,
#sidebar .nav-wrap,
#sidebar .nav-wrap-up,
#sidebar .ace-scroll,
#sidebar .scroll-content { height: auto !important; max-height: none !important; min-height: 0 !important; }
/* 載入時自動展開的群組：Ace 會把某層包裹元素的高度用 inline style 寫死，
   造成捲動範圍不含展開內容 → 側欄內任何被寫死 inline 高度的元素一律改為隨內容
   （min-height 也要清，否則底部會多一大段空白捲動區） */
/* （原本這裡有 #sidebar [style*="height"] 屬性選擇器版本 —— 已移除：
     屬性選擇器會在 jQuery 動畫每一幀重新比對、造成整體卡頓；
     改由 header.php 的 JS 於載入時「一次性」清除側欄包裹元素的 inline 高度） */
/* 停用 Ace 自訂捲軸外觀（右側咖啡色直條），改用側欄原生捲動 */
#sidebar .scroll-track,
#sidebar .scroll-bar { display: none !important; }
/* 底部多餘空白：Ace 用偽元素在側欄內撐高度，一併關掉 */
#sidebar::before,
#sidebar::after,
#sidebar .nav-list::before,
#sidebar .nav-list::after { display: none !important; content: none !important; }
/* 項目內縮成乾淨圓角、不貼邊（hover/active 高亮才不會被切） */
#sidebar .nav-list > li > a { margin: 1px 10px !important; }
#sidebar .nav-list .submenu > li > a { margin: 1px 10px !important; padding: 8px 12px 8px 24px !important; }
/* 隱藏 Ace 右緣的 active 指示箭頭/線（那個會像被截斷的小三角） */
#sidebar .nav-list > li > .arrow,
#sidebar .nav-list .submenu > li > .arrow,
#sidebar .nav-list .submenu::before,
#sidebar .nav-list > li.active > a::after { display: none !important; }

/* 父層展開箭頭（有子層的指示）：靠右、灰色，展開時旋轉並轉主題色 */
#sidebar .nav-list > li > a { position: relative; }
#sidebar .nav-list > li > a > .arrow.fa-angle-down {
    display: inline-block !important;
    position: absolute !important;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a0ad !important;
    font-size: 12px !important;
    transition: transform .15s ease;
}
#sidebar .nav-list > li.open > a > .arrow.fa-angle-down,
#sidebar .nav-list > li.active > a > .arrow.fa-angle-down {
    transform: translateY(-50%) rotate(-180deg);
    color: var(--skin) !important;
}
/* 搜尋框：確保保留、樣式乾淨（功能是既有 JS，未更動）
   sticky 釘在側欄頂端 + 白底 + 高層級，往下捲時選單不會蓋到它 */
#sidebar .search_box {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #ffffff !important;
    padding: 12px 10px 10px !important;
    margin: -14px 0 8px !important;   /* 抵銷側欄 padding-top，貼齊頂端 */
    border-bottom: 1px solid #e7e9ee;
}
#sidebar .search_box input {
    width: 100% !important;
    height: 36px !important;
    border: 1px solid #dfe2e8 !important;
    border-radius: 6px !important;
    background: #fafbfc !important;
    color: #1c2230 !important;
    padding: 0 34px 0 12px !important;
}
/* 放大鏡塞進輸入框右側（原本跑到下面） */
#sidebar .search_box i {
    position: absolute !important;
    right: 22px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    color: #98a0ad !important;
}

/* ============================================================
   後台麵包屑（全站 cms 頁面）— 專業風：純文字、細、主題色 home、
   目前頁加粗、/ 分隔
   ============================================================ */
.breadcrumbs {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 14px 20px 8px !important;
    min-height: 0 !important;
}
/* 手機版：麵包屑與頂部列之間留白（原本靠時間列當間隔，移除後補回） */
@media (max-width: 991px) {
    .breadcrumbs { margin-top: 14px !important; padding: 10px 14px 8px !important; }
}
.breadcrumbs .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px;
    line-height: 1.4;
}
.breadcrumbs .breadcrumb > li { display: inline-flex; align-items: center; padding: 0 !important; }
.breadcrumbs .breadcrumb > li > a { color: #59616f; text-decoration: none; transition: color .12s; }
.breadcrumbs .breadcrumb > li > a:hover { color: var(--skin); }
.breadcrumbs .breadcrumb .home-icon { color: var(--skin) !important; margin-right: 6px; font-size: 13px; }
.breadcrumbs .breadcrumb > li.active > span,
.breadcrumbs .breadcrumb > li:last-child > span { color: #1c2230; font-weight: 600; }
/* 分隔：細的 / */
.breadcrumbs .breadcrumb > li + li::before {
    content: "/" !important;
    font-family: inherit !important;
    color: #d3d7de !important;
    padding: 0 9px !important;
    font-size: 13px;
}

.cms-list-skin {
    --skin: var(--cms-skin, #8B3A3A);
    --skin-strong: color-mix(in srgb, var(--skin) 86%, black);
    --skin-050: color-mix(in srgb, var(--skin) 8%, transparent);   /* accent-weak */
    --skin-080: color-mix(in srgb, var(--skin) 8%, transparent);
    --skin-120: color-mix(in srgb, var(--skin) 26%, transparent);  /* accent-line */

    /* 冷色石板中性（專業風） */
    --c-surface: #ffffff;
    --c-surface2: #fafbfc;
    --c-line: #e7e9ee;
    --c-line2: #dfe2e8;
    --c-ink: #1c2230;
    --c-ink2: #59616f;
    --c-ink3: #98a0ad;
    --c-ok: #12894b;
    --c-danger: #c9382b;

    --rad: 8px;
    --rad-sm: 6px;
}

/* ---------- 搜尋列 ---------- */
.cms-list-skin .page-header {
    background: var(--c-surface2);
    border: 1px solid var(--c-line);
    border-radius: var(--rad);
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(43, 36, 34, .04);
}
.cms-list-skin .page-header.header-button {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 4px 2px;
    margin-bottom: 10px;
}
.cms-list-skin .search-form-other .form-control,
.cms-list-skin .search-form-other input[type="text"],
.cms-list-skin .search-form-other select {
    border-radius: var(--rad-sm) !important;
    border: 1px solid var(--c-line2);
    box-shadow: none;
}
.cms-list-skin .search-form-other .form-control:focus,
.cms-list-skin .search-form-other input[type="text"]:focus,
.cms-list-skin .search-form-other select:focus {
    border-color: var(--skin);
    box-shadow: 0 0 0 3px var(--skin-120);
}

/* 搜尋列的 select2 / chosen（搜尋式下拉，如 courseTiming 的「教練」）
   手機版容器會被擠垮 → 強制滿寬；外觀對齊皮膚 */
.cms-list-skin .search-form-other .select2-container .select2-selection--single {
    height: 38px !important;
    border: 1px solid var(--c-line2) !important;
    border-radius: var(--rad-sm) !important;
    display: flex;
    align-items: center;
}
@media (max-width: 991px) {
    .cms-list-skin .search-form-other .select2-container,
    .cms-list-skin .search-form-other .chosen-container,
    .cms-list-skin .search-form-other .select2,
    .cms-list-skin .search-form-other select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ---------- 按鈕通用 ---------- */
.cms-list-skin .btn {
    border-radius: var(--rad-sm) !important;
    font-weight: 600;
    border: 1px solid transparent;
    box-shadow: none;
    transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
    text-shadow: none;
}
.cms-list-skin .btn.no-radius { border-radius: var(--rad-sm) !important; }

/* 主色系（搜尋/新增/修改/子分類/語系選中） */
.cms-list-skin .btn-purple,
.cms-list-skin .btn-primary,
.cms-list-skin .btn-info {
    background: var(--skin) !important;
    border-color: var(--skin) !important;
    color: #fff !important;
}
.cms-list-skin .btn-purple:hover,
.cms-list-skin .btn-primary:hover,
.cms-list-skin .btn-info:hover {
    background: var(--skin-strong) !important;
    border-color: var(--skin-strong) !important;
    color: #fff !important;
}

/* 成功（新增/匯出）保留綠 */
.cms-list-skin .btn-success {
    background: var(--c-ok) !important;
    border-color: var(--c-ok) !important;
    color: #fff !important;
}
.cms-list-skin .btn-success:hover { filter: brightness(.95); }

/* 危險（刪除）改描邊 */
.cms-list-skin .btn-danger {
    background: transparent !important;
    color: var(--c-danger) !important;
    border-color: color-mix(in srgb, var(--c-danger) 40%, transparent) !important;
}
.cms-list-skin .btn-danger:hover {
    background: color-mix(in srgb, var(--c-danger) 10%, transparent) !important;
    border-color: var(--c-danger) !important;
    color: var(--c-danger) !important;
}

/* 中性（上一頁/清除/更多） */
.cms-list-skin .btn-default,
.cms-list-skin .btn-secondary,
.cms-list-skin .btn-grey {
    background: transparent !important;
    color: var(--c-ink2) !important;
    border-color: var(--c-line2) !important;
}
.cms-list-skin .btn-default:hover,
.cms-list-skin .btn-secondary:hover,
.cms-list-skin .btn-grey:hover {
    background: var(--skin-050) !important;
    border-color: var(--skin) !important;
    color: var(--c-ink) !important;
}

/* 匯入保留 warning，只調圓角（不覆寫顏色） */

/* ---------- 表格卡片 ---------- */
.cms-list-skin #formTable {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--rad);
    box-shadow: 0 1px 2px rgba(43, 36, 34, .04), 0 10px 26px -16px rgba(43, 36, 34, .22);
    /* #formTable 是 Bootstrap .row（左右 -15px margin），歸零避免撐出水平捲軸 */
    margin-left: 0;
    margin-right: 0;
    /* 注意：不可用 overflow:hidden，否則拖曳排序的浮動列到邊界會被裁切消失 */
}
/* 內層欄位貼齊卡片（消除 .row>.col 的 15px padding） */
.cms-list-skin #formTable > form > .col-xs-12 { padding-left: 0; padding-right: 0; }
/* 圓角改由表頭左右上角達成（不靠 overflow 裁切，避免影響拖曳） */
.cms-list-skin table.table-item > thead > tr > th:first-child { border-top-left-radius: var(--rad); }
.cms-list-skin table.table-item > thead > tr > th:last-child { border-top-right-radius: var(--rad); }

/* 下拉選單已改由 header.php 的 fixed 定位 JS 跳出容器，
   外層恢復「橫向捲動」：欄位多的寬表格（coach/video/userReschedule…）
   在卡片內左右捲動，最右欄不再被裁掉 */
.cms-list-skin .row > .col-xs-12[style*="overflow"] { overflow-x: auto !important; }
.cms-list-skin #formTable,
.cms-list-skin #formTable > form,
.cms-list-skin #formTable > form > .col-xs-12 { overflow: visible !important; }
.cms-list-skin .dropdown-menu {
    z-index: 3000 !important;
    background: var(--c-surface, #fff) !important;
}
/* Ace 版型的 .main-content / .main-content-inner 會裁切下拉彈窗；
   用 :has() 只在「含列表」的頁面放行 overflow，不影響其他後台頁 */
.main-content:has(.cms-list-skin),
.main-content-inner:has(.cms-list-skin) { overflow: visible !important; }
.cms-list-skin table.table-item {
    border: 0 !important;
    margin: 0;
}
.cms-list-skin table.table-item > thead > tr > th {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--c-ink3);
    background: var(--c-surface2) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--c-line) !important;
    padding: 13px 14px;
    vertical-align: middle;
}
.cms-list-skin table.table-item > tbody > tr > td {
    border: 0 !important;
    border-bottom: 1px solid var(--c-line) !important;
    padding: 14px;
    vertical-align: middle;
    color: var(--c-ink);
}
.cms-list-skin table.table-item > tbody > tr:last-child > td { border-bottom: 0 !important; }
/* 表頭不換行（標題短，折行難看） */
.cms-list-skin table.table-item > thead > tr > th { white-space: nowrap; }
/* 手機版：卡片寬度固定在畫面內，表格改在「卡片內」橫向捲動（拉霸在卡片裡） */
@media (max-width: 991px) {
    .cms-list-skin #formTable { max-width: 100% !important; }
    .cms-list-skin #formTable > form {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}
/* 「儲存格不換行」只給手機版（避免逐字掉行，靠橫向捲動）；
   電腦版恢復正常換行 — 長網址自動折行，不會撐出整卡的橫向拉霸 */
@media (max-width: 991px) {
    .cms-list-skin table.table-item > tbody > tr > td { white-space: nowrap; }
}
.cms-list-skin table.table-striped > tbody > tr,
.cms-list-skin table.table-striped > tbody > tr:nth-child(2n+1) {
    background: var(--c-surface) !important;
    transition: background .12s;
}
.cms-list-skin table.table-hover > tbody > tr:hover {
    background: var(--skin-050) !important;
}
/* 標題等連結用主題色 */
.cms-list-skin table.table-item tbody a[href]:not(.btn) {
    color: var(--skin);
    font-weight: 600;
}
.cms-list-skin table.table-item tbody a[href]:not(.btn):hover { text-decoration: underline; }

/* ---------- 操作按鈕群：改 icon-only，同排不掉行 ---------- */
.cms-list-skin td .btn-group {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    font-size: 0;   /* 吃掉 HTML 裡的   空格，間距統一交給 gap（三顆等距） */
}
.cms-list-skin td .btn-group > .btn {
    margin: 0 !important;
    float: none !important;
    border-radius: var(--rad-sm) !important;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 0;                 /* 隱藏「修改/刪除/更多…」文字，只留 icon */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.cms-list-skin td .btn-group > .btn > i,
.cms-list-skin td .btn-group > .btn .ace-icon {
    font-size: 15px;
    margin: 0 !important;
}
.cms-list-skin td .btn-group > .btn .caret { display: none; }   /* 更多的三角改用 icon 呈現 */
.cms-list-skin td .btn-group > .btn-secondary::before {         /* 更多… 補上「⋯」icon */
    font-family: FontAwesome;
    content: "\f141";
    font-size: 16px;
}
/* 更多… 按鈕的下拉箭頭間距 */
.cms-list-skin .btn-secondary .caret { margin-left: 6px; }

/* 更多… 下拉選單（複製/公版編輯/前台預覽…）桌機+手機共用，文字/icon 用深色與主題色（不要白色） */
.cms-list-skin .dropdown-menu {
    border: 1px solid var(--c-line);
    border-radius: var(--rad-sm);
    box-shadow: 0 10px 28px -10px rgba(43, 36, 34, .30);
    padding: 6px;
    min-width: 150px;
    margin-top: 6px;
    background: var(--c-surface, #fff) !important;
    z-index: 3000 !important;
}

/* 操作選單展開：抬高該列/儲存格，避免下一列「留言時間」等文字疊在浮層上 */
.cms-list-skin table.table-item > tbody > tr:has(.btn-group.open),
.cms-list-skin table.table-item > tbody > tr:has(.dropdown.open),
.cms-list-skin table.table-item > tbody > tr:has(.open > .dropdown-menu),
.page-content table.table-item > tbody > tr:has(.btn-group.open),
.page-content table.table-item > tbody > tr:has(.dropdown.open) {
    position: relative !important;
    z-index: 40 !important;
}
.cms-list-skin table.table-item > tbody > tr > td:has(.btn-group.open),
.cms-list-skin table.table-item > tbody > tr > td:has(.dropdown.open),
.cms-list-skin table.table-item > tbody > tr > td:has(.open > .dropdown-menu),
.page-content table.table-item > tbody > tr > td:has(.btn-group.open),
.page-content table.table-item > tbody > tr > td:has(.dropdown.open) {
    position: relative !important;
    z-index: 40 !important;
    overflow: visible !important;
}
.cms-list-skin table.table-item td .btn-group.open,
.cms-list-skin table.table-item td .dropdown.open,
.page-content table.table-item td .btn-group.open,
.page-content table.table-item td .dropdown.open {
    position: relative !important;
    z-index: 40 !important;
}
.cms-list-skin table.table-item td .btn-group.open > .dropdown-menu,
.cms-list-skin table.table-item td .dropdown.open > .dropdown-menu,
.cms-list-skin table.table-item td .dropdown-menu,
.page-content table.table-item td .dropdown-menu {
    z-index: 3000 !important;
    background: var(--c-surface, #fff) !important;
}
.cms-list-skin .dropdown-menu > li > a {
    border-radius: 6px;
    padding: 9px 12px;
    color: var(--c-ink2) !important;   /* 文字保留、用深色（避免白字看不到） */
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .12s, color .12s;
}
.cms-list-skin .dropdown-menu > li > a:hover,
.cms-list-skin .dropdown-menu > li > a:focus {
    background: var(--skin-050);
    color: var(--skin) !important;
}
.cms-list-skin .dropdown-menu > li > a i,
.cms-list-skin .dropdown-menu > li > a span { color: var(--skin) !important; }

/* 手機版操作選單（dropdown-only-icon）：原本只有 icon，改成「icon + 文字」
   文字用每個項目的 title 自動帶出（修改/刪除/複製/公版編輯/前台預覽） */
.cms-list-skin .dropdown-only-icon { min-width: 160px; padding: 6px; }
.cms-list-skin .dropdown-only-icon > li {
    display: block !important;
    float: none !important;
    width: auto !important;
    text-align: left !important;
}
.cms-list-skin .dropdown-only-icon > li > a {
    display: flex !important;
    align-items: center;
    gap: 9px;
    width: auto !important;
    height: auto !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    text-align: left !important;
}
.cms-list-skin .dropdown-only-icon > li > a::after {
    content: attr(title);      /* 用 title 顯示文字 */
    color: var(--c-ink2) !important;
    font-size: 13px;
    font-weight: 500;
}
.cms-list-skin .dropdown-only-icon > li > a:hover { background: var(--skin-050); }
.cms-list-skin .dropdown-only-icon > li > a:hover::after { color: var(--skin) !important; }
.cms-list-skin .dropdown-only-icon > li > a > span,
.cms-list-skin .dropdown-only-icon > li > a > span i {
    color: var(--skin) !important;
    background: transparent !important;
    width: 18px;
    text-align: center;
    box-shadow: none !important;
}

/* ---------- 排序群組 ---------- */
.cms-list-skin .drag-box {
    background: var(--c-surface2);
    border: 1px solid var(--c-line2);
    border-radius: var(--rad-sm);
    padding: 3px 5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cms-list-skin .drag-box input {
    border: 0;
    background: transparent;
    text-align: center;
    width: 36px;
    font-variant-numeric: tabular-nums;
}
.cms-list-skin .drag-box input:focus { outline: none; }
.cms-list-skin .drag-handle { color: var(--c-ink3); cursor: grab; }
/* 儲存鈕：主題色底 + 白色 icon（原本紅底深 icon 看不到、且沒跟主題走） */
.cms-list-skin .drag-box .save-btn {
    background: var(--skin) !important;
    color: #fff !important;
    border: 0;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s;
}
.cms-list-skin .drag-box .save-btn:hover { background: var(--skin-strong) !important; }
.cms-list-skin .drag-box .save-btn i { color: #fff !important; }

/* ---------- 顯示狀態 switch：ON 態改綠 ---------- */
.cms-list-skin .ace-switch:checked + .lbl::before {
    background-color: var(--c-ok) !important;
    border-color: var(--c-ok) !important;
}

/* ---------- 分頁 ---------- */
.cms-list-skin .pagination > li > a,
.cms-list-skin .pagination > li > span {
    border-radius: var(--rad-sm) !important;
    border: 1px solid var(--c-line2);
    color: var(--c-ink2);
    margin: 0 3px;
    transition: all .12s;
}
.cms-list-skin .pagination > li > a:hover {
    border-color: var(--skin);
    color: var(--skin);
    background: var(--skin-050);
}
.cms-list-skin .pagination > .active > a,
.cms-list-skin .pagination > .active > span,
.cms-list-skin .pagination > .active > a:hover {
    background: var(--skin) !important;
    border-color: var(--skin) !important;
    color: #fff !important;
}

/* ---------- 統計數字 ---------- */
.cms-list-skin .dataTables_info { color: var(--c-ink2); }
.cms-list-skin .dataTables_info span { color: var(--c-ink); font-weight: 700; }

/* ---------- 頁尾：分頁「整列水平置中」，筆數資訊固定在左 ---------- */
.cms-list-skin .row:has(.dataTables_paginate) { position: relative; }
.cms-list-skin .row:has(.dataTables_paginate) > .col-sm-6 { width: 100% !important; float: none !important; }
.cms-list-skin .row:has(.dataTables_paginate) .dataTables_info {
    position: absolute !important;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
}
.cms-list-skin .dataTables_paginate {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    float: none !important;
}
/* 分頁區上下留白 */
.cms-list-skin .row:has(.dataTables_paginate) { margin-top: 18px; margin-bottom: 26px; }
.cms-list-skin .dataTables_paginate .pagination { margin: 0 !important; }
/* 手機版：筆數資訊回歸正常流（排在分頁上方置中，不再浮動疊到分頁）；分頁可換行置中 */
@media (max-width: 767px) {
    .cms-list-skin .row:has(.dataTables_paginate) .dataTables_info {
        position: static !important;
        transform: none !important;
        text-align: center;
        margin-bottom: 10px !important;
    }
    .cms-list-skin .dataTables_paginate .pagination {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 6px;
    }
}

/* ---------- 勾選框 ---------- */
.cms-list-skin input[type="checkbox"].ace { accent-color: var(--skin); }

/* ============================================================
   方案B：淺灰側欄（淺石板灰帶一點主題色調；內容維持白）
   目前頁 = 白色浮起 pill + 主題色字。放在檔尾覆蓋前面規則
   ============================================================ */
#sidebar.sidebar {
    --side-bg: color-mix(in srgb, var(--skin) 4%, #f1f2f5);
    background: var(--side-bg) !important;
    border-right: 1px solid #e3e5ea !important;
    scrollbar-width: thin;
}
/* 搜尋框（sticky 底色跟著淺灰；輸入框白底浮起） */
#sidebar .search_box { background: var(--side-bg) !important; border-bottom-color: #e3e5ea !important; }
#sidebar .search_box input {
    background: #ffffff !important;
    border-color: #e0e2e8 !important;
}
/* 第 1 層：hover/展開 = 白色浮起 */
#sidebar .nav-list > li > a:hover,
#sidebar .nav-list > li.open > a,
#sidebar .nav-list > li.active > a {
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(20, 25, 40, .06);
}
/* 第 2 層：hover 白底；目前頁 = 白色浮起 pill + 主題色字 */
#sidebar .nav-list .submenu { border-left-color: #dfe1e7 !important; }
#sidebar .nav-list .submenu > li > a:hover { background: #ffffff !important; }
#sidebar .nav-list .submenu > li.active > a {
    background: #ffffff !important;
    color: var(--skin) !important;
    box-shadow: 0 1px 2px rgba(20, 25, 40, .06);
}
/* 分組標籤分隔線配淺灰底 */
#sidebar .nav-list .submenu > li > span { border-top-color: #e3e5ea !important; }
/* 收合鈕 */
#sidebar .sidebar-toggle { background: var(--side-bg) !important; border-top: 1px solid #e3e5ea !important; }

/* ============================================================
   主控面板 panel（widget-box / infobox / alert 換皮）
   顏色全部走 var(--skin)（跟隨 cmsSite 主題色）
   ============================================================ */
/* 區塊 → 卡片 */
.cms-list-skin .widget-box.transparent {
    background: var(--c-surface) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--rad);
    box-shadow: 0 1px 2px rgba(20, 25, 40, .04);
    margin-bottom: 16px;
    overflow: hidden;
}
.cms-list-skin .widget-box.transparent > .widget-header {
    background: var(--c-surface2) !important;
    border-bottom: 1px solid var(--c-line) !important;
    padding: 6px 16px !important;   /* 標題與 icon 不貼邊 */
}
.cms-list-skin .widget-box .widget-title { color: var(--c-ink) !important; font-size: 14.5px; font-weight: 700; }
.cms-list-skin .widget-box .widget-title .ace-icon { color: var(--skin) !important; margin-right: 6px; }
.cms-list-skin .widget-box .widget-main { padding: 14px 16px; }

/* alert 色條：info 改主題色淡底（原藍色）、warning/success 柔化 */
.cms-list-skin .widget-box .alert {
    border-radius: var(--rad-sm);
    border: 1px solid;
    padding: 10px 14px;
    font-size: 13px;
}
.cms-list-skin .widget-box .alert-info {
    background: var(--skin-050) !important;
    border-color: var(--skin-120) !important;
    color: var(--c-ink) !important;
}
.cms-list-skin .widget-box .alert-info .ace-icon { color: var(--skin) !important; }
.cms-list-skin .widget-box .alert-warning {
    background: #fff8e8 !important;
    border-color: #f0e0b0 !important;
    color: #7c621a !important;
}
.cms-list-skin .widget-box .alert-success {
    background: color-mix(in srgb, var(--c-ok) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--c-ok) 28%, transparent) !important;
    color: var(--c-ink) !important;
}

/* 區間文字徽章（原 label-info 藍）→ 主題色膠囊 */
.cms-list-skin .range-text.label-info {
    background: var(--skin) !important;
    color: #fff !important;
    border-radius: 999px;
    padding: 0px 14px;
    font-size: 12.5px;
    line-height: 30px!important;
    height: 30px;
}

/* KPI 統計卡（infobox）→ 現代 stat tile：淡底圓角 + 主題色 icon 徽章 */
.cms-list-skin .infobox {
    display: flex !important;
    align-items: center;
    gap: 12px;
    background: var(--c-surface2) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--rad) !important;
    padding: 14px !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
.cms-list-skin .infobox .infobox-icon {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 10px;
    background: var(--skin-080) !important;
    border: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: static !important;
}
.cms-list-skin .infobox .infobox-icon .ace-icon,
.cms-list-skin .infobox .infobox-icon [class*="fa-"] {
    color: var(--skin) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    text-shadow: none !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
}
/* icon 字形本體（Ace 會在 ::before 另設白色）一併鎖主題色 */
.cms-list-skin .infobox .infobox-icon .ace-icon::before,
.cms-list-skin .infobox .infobox-icon [class*="fa-"]::before {
    color: var(--skin) !important;
    text-shadow: none !important;
}
.cms-list-skin .infobox .infobox-data { min-width: 0 !important; }
.cms-list-skin .infobox .infobox-data-number {
    font-size: 18px !important;
    font-weight: 800;
    color: var(--c-ink) !important;
    display: block;
    margin: 0 !important;
    font-variant-numeric: tabular-nums;
}
.cms-list-skin .infobox .infobox-data-number a { color: var(--skin) !important; }
.cms-list-skin .infobox .infobox-content { color: var(--c-ink3) !important; font-size: 12.5px; }

/* 面板內表格（教練加入趨勢 / 營運趨勢 / 未付款） */
.cms-list-skin .widget-box table.table { border: 0 !important; margin-bottom: 0; }
.cms-list-skin .widget-box table.table > thead > tr > th {
    background: var(--c-surface2) !important;
    color: var(--c-ink3) !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 11px;
    border: 0 !important;
    border-bottom: 1px solid var(--c-line) !important;
    padding: 9px 12px;
}
.cms-list-skin .widget-box table.table > tbody > tr > td {
    border: 0 !important;
    border-bottom: 1px solid var(--c-line) !important;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--c-ink);
}
.cms-list-skin .widget-box table.table-striped > tbody > tr,
.cms-list-skin .widget-box table.table-striped > tbody > tr:nth-child(2n+1) { background: var(--c-surface) !important; }
.cms-list-skin .widget-box table.table-hover > tbody > tr:hover { background: var(--skin-050) !important; }

/* ============================================================
   介面字級 小/中/大（右上角切換，localStorage 記憶）
   ============================================================ */
html[data-fs="s"] body { zoom: 0.9; }
html[data-fs="l"] body { zoom: 1.12; }

/* 切換鈕（分段控制） */
#navbar .font-scale-block { display: flex !important; align-items: center; }
#navbar .font-scale {
    display: inline-flex;
    border: 1px solid #dfe2e8;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
#navbar .font-scale button {
    border: 0;
    background: transparent;
    color: #59616f;
    cursor: pointer;
    padding: 0 11px;
    height: 32px;
    line-height: 1;
    border-right: 1px solid #eceef2;
    transition: background .12s, color .12s;
}
#navbar .font-scale button:last-child { border-right: 0; }
#navbar .font-scale button[data-fs="s"] { font-size: 11px; }
#navbar .font-scale button[data-fs="m"] { font-size: 12.5px; }
#navbar .font-scale button[data-fs="l"] { font-size: 14px; }
#navbar .font-scale button:hover { background: #f5f6f8; color: #1c2230; }
#navbar .font-scale button.on { background: var(--skin); color: #fff; }

/* ============================================================
   內頁 detail 編輯頁（cms-detail-skin）— 僅視覺
   Set/ElementClass 結構、表單 name/id、tab 機制全不動；
   特殊套件（編輯器/上傳/地圖/雙欄/日期）不覆寫
   ============================================================ */
/* detail 的 .page-header 是「標題」不是搜尋卡 → 還原透明 + 大標 */
.cms-detail-skin .page-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px 2px 10px !important;
    margin: 0 0 4px !important;
}
/* 單元標題：主題色豎條 + 粗體大標 */
.cms-detail-skin .page-header h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--c-ink);
    margin: 0;
    line-height: 1.3;
}
.cms-detail-skin .page-header h1::before {
    content: "";
    width: 4px;
    height: 20px;
    flex: none;
    border-radius: 999px;
    background: var(--skin);
}

/* 頁籤：分段膠囊式（灰色軌道，作用中 = 白色浮起 + 主題色字） */
.cms-detail-skin .nav-tabs {
    display: inline-flex !important;
    background: #e6e8ee !important;
    border: 1px solid var(--c-line) !important;
    border-radius: 10px !important;
    padding: 3px !important;
    margin: 0 0 12px !important;
    gap: 2px;
}
.cms-detail-skin .nav-tabs > li { margin: 0 !important; float: none !important; }
.cms-detail-skin .nav-tabs > li > a {
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: var(--c-ink2) !important;
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 20px !important;
    margin: 0 !important;
    transition: background .12s, color .12s;
}
.cms-detail-skin .nav-tabs > li > a:hover { color: var(--c-ink) !important; }
.cms-detail-skin .nav-tabs > li.active > a,
.cms-detail-skin .nav-tabs > li.active > a:focus,
.cms-detail-skin .nav-tabs > li.active > a:hover {
    background: #ffffff !important;
    color: var(--skin) !important;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(20, 25, 40, .12) !important;
}

/* 手機／平板：頁籤改橫向捲動，文字不折行 */
@media (max-width: 991px) {
    .cms-detail-skin .nav-tabs {
        display: flex !important;
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .cms-detail-skin .nav-tabs > li { flex: 0 0 auto; }
    .cms-detail-skin .nav-tabs > li > a {
        white-space: nowrap;
        padding: 8px 14px !important;
    }
}

/* 手機／平板：聊天室管控紀錄表格改橫向捲動（避免撐寬整頁） */
@media (max-width: 991px) {
    .cms-detail-skin .chat-history {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .cms-detail-skin .chat-history > table { min-width: 660px; }
    .cms-detail-skin .chat-history th { white-space: nowrap; }
}

/* 內容區：獨立白卡片（頁籤已改膠囊式，卡片四角全圓） */
.cms-detail-skin .tab-content {
    background: var(--c-surface);
    border: 1px solid var(--c-line) !important;
    border-radius: var(--rad) !important;
    box-shadow: 0 1px 2px rgba(20, 25, 40, .04);
    padding: 8px 22px 14px !important;
}

/* 欄位列分隔線：每個欄位一列、細線分隔（只作用第一層，避免巢狀元素重複畫線）
   + hover 淡底（長表單掃視感） */
.cms-detail-skin .tab-pane > .form-group {
    margin: 0 !important;
    padding: 15px 10px !important;
    border-bottom: 1px solid #f0f2f5;
    border-radius: 8px 8px 0 0;
    transition: background .12s;
}
.cms-detail-skin .tab-pane > .form-group:last-child { border-bottom: 0; }
/* 欄位 hover 淡底取消（使用者反映偏灰看了不適，區塊內維持純白） */

/* 區塊背景跟隨表面色變數（護眼色調統一由變數控制） */
.cms-detail-skin .tab-content,
.cms-list-skin #formTable,
.cms-list-skin .widget-box.transparent { background: var(--c-surface) !important; }

/* ============================================================
   護眼低對比「暖紙感」色調（大面積純白造成視覺疲勞 → 暖近白）
   放檔尾覆蓋變數；只調表面/線條色溫，主題色照舊
   ============================================================ */
.cms-list-skin {
    --c-surface: #fdfcfa;   /* 卡片：暖近白（幾乎看不出偏色，但不刺眼） */
    --c-surface2: #f7f5f1;  /* 次表面：表頭/工具列 */
    --c-line: #eae7e1;      /* 細線變暖 */
    --c-line2: #dcd8cf;     /* 邊框變暖 */
}
/* 畫布：暖淺灰 */
.main-content:has(.page-content.cms-list-skin),
.main-content:has(.page-content.cms-list-skin) .main-content-inner {
    background: #f1efeb !important;
}

/* ============================================================
   元件全面圓角（統一圓角語言）
   ============================================================ */
/* 文字輸入 / 數字 / 密碼 / 信箱 / 日期文字框 / textarea */
.cms-detail-skin .tab-content input[type="text"],
.cms-detail-skin .tab-content input[type="number"],
.cms-detail-skin .tab-content input[type="password"],
.cms-detail-skin .tab-content input[type="email"],
.cms-detail-skin .tab-content input[type="url"],
.cms-detail-skin .tab-content input[type="tel"] {
    border-radius: var(--rad-sm) !important;
}
.cms-detail-skin .tab-content textarea {
    border-radius: 8px !important;
}
/* 群組輸入（addon+input）：外側角圓、內側接縫直角
   必須蓋過上方 .tab-content input[type=…] 的全圓角（其 specificity 較高） */
.cms-detail-skin .tab-content .input-group > input,
.cms-detail-skin .tab-content .input-group > .form-control,
.cms-detail-skin .input-group > input,
.cms-detail-skin .input-group > .form-control,
.cms-detail-skin .input-group > :first-child {
    border-radius: var(--rad-sm) 0 0 var(--rad-sm) !important;
}
.cms-detail-skin .tab-content .input-group > .input-group-addon:last-child,
.cms-detail-skin .tab-content .input-group > .input-group-btn:last-child,
.cms-detail-skin .input-group > .input-group-addon:last-child,
.cms-detail-skin .input-group > .input-group-btn:last-child,
.cms-detail-skin .input-group > :last-child {
    border-radius: 0 var(--rad-sm) var(--rad-sm) 0 !important;
}
.cms-detail-skin .input-group > .input-group-addon:first-child,
.cms-detail-skin .input-group > .input-group-btn:first-child {
    border-radius: var(--rad-sm) 0 0 var(--rad-sm) !important;
}
.cms-detail-skin .tab-content .input-group > input:not(:first-child),
.cms-detail-skin .tab-content .input-group > .form-control:not(:first-child),
.cms-detail-skin .input-group > input:not(:first-child),
.cms-detail-skin .input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.cms-detail-skin .input-group > :not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}
/* 提示區塊 / well / panel */
.cms-list-skin .alert,
.cms-list-skin .well,
.cms-list-skin .panel {
    border-radius: var(--rad-sm) !important;
}
/* 標籤徽章一律膠囊 */
.cms-list-skin .label,
.cms-list-skin .badge {
    border-radius: 999px !important;
}
/* 上傳圖片預覽圓角（只針對 uploads 圖檔，不影響 icon） */
.cms-detail-skin img[src*="uploads"] {
    border-radius: 8px;
}
/* 特殊套件外框圓角（不動內部）：檔案上傳、雙欄、日期群組 */
.cms-detail-skin .file-input,
.cms-detail-skin .file-preview,
.cms-detail-skin .bootstrap-duallistbox-container select {
    border-radius: var(--rad-sm) !important;
}

/* 原生 file：Chrome「選擇檔案」與「未選擇任何檔案」垂直不齊
   （Bootstrap #16272：display:flex 可修；webkit / 標準偽元素必須拆開寫，否則整條被丟棄） */
.cms-detail-skin input[type="file"],
.cms-detail-skin .form-group input[type="file"],
.cms-detail-skin .form-group input.form-control[type="file"],
.cms-detail-skin .form-control[type="file"],
.cms-list-skin input[type="file"],
.page-content input[type="file"],
.page-content input.form-control[type="file"] {
    display: flex !important;
    align-items: center !important;
    -webkit-box-align: center !important;
    vertical-align: middle !important;
    width: auto !important;
    max-width: 100% !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--c-ink3) !important;
    font-size: 13px !important;
    line-height: normal !important;
    box-sizing: border-box !important;
}
/* WebKit / Blink */
.cms-detail-skin input[type="file"]::-webkit-file-upload-button,
.cms-list-skin input[type="file"]::-webkit-file-upload-button,
.page-content input[type="file"]::-webkit-file-upload-button {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block !important;
    vertical-align: middle !important;
    height: 36px !important;
    margin: 0 10px 0 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--c-line2) !important;
    border-radius: var(--rad-sm) !important;
    background: var(--c-surface2) !important;
    color: var(--c-ink2) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 34px !important;
    box-sizing: border-box !important;
    cursor: pointer;
}
.cms-detail-skin input[type="file"]::-webkit-file-upload-button:hover,
.cms-list-skin input[type="file"]::-webkit-file-upload-button:hover,
.page-content input[type="file"]::-webkit-file-upload-button:hover {
    border-color: var(--skin) !important;
    background: var(--skin-050) !important;
    color: var(--skin) !important;
}
/* 標準 */
.cms-detail-skin input[type="file"]::file-selector-button,
.cms-list-skin input[type="file"]::file-selector-button,
.page-content input[type="file"]::file-selector-button {
    appearance: none;
    display: inline-block !important;
    vertical-align: middle !important;
    height: 36px !important;
    margin: 0 10px 0 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--c-line2) !important;
    border-radius: var(--rad-sm) !important;
    background: var(--c-surface2) !important;
    color: var(--c-ink2) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 34px !important;
    box-sizing: border-box !important;
    cursor: pointer;
}
.cms-detail-skin input[type="file"]::file-selector-button:hover,
.cms-list-skin input[type="file"]::file-selector-button:hover,
.page-content input[type="file"]::file-selector-button:hover {
    border-color: var(--skin) !important;
    background: var(--skin-050) !important;
    color: var(--skin) !important;
}

/* Ace 自訂檔案鈕（若有）：label / 檔名同一行置中 */
.cms-detail-skin .ace-file-input,
.cms-detail-skin .ace-file-input .file-label,
.page-content .ace-file-input,
.page-content .ace-file-input .file-label {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px;
    max-width: 100%;
}
.cms-detail-skin .ace-file-input .file-name,
.cms-detail-skin .ace-file-input .file-label .file-name,
.page-content .ace-file-input .file-name,
.page-content .ace-file-input .file-label .file-name {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    vertical-align: middle;
}

/* 一般下拉選單：統一輸入框語言（特殊套件 chosen/select2 的原生 select 是隱藏的，不受影響） */
.cms-detail-skin .tab-content select.form-control,
.cms-detail-skin .tab-content select:not([multiple]) {
    height: 36px;
    min-width: 160px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--c-line2);
    border-radius: var(--rad-sm);
    background-color: #fff;
    color: var(--c-ink);
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #98a0ad 50%), linear-gradient(135deg, #98a0ad 50%, transparent 50%);
    background-position: calc(100% - 16px) 15px, calc(100% - 11px) 15px;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    transition: border-color .15s, box-shadow .15s;
}
.cms-detail-skin .tab-content select:focus {
    outline: none;
    border-color: var(--skin);
    box-shadow: 0 0 0 3px var(--skin-120);
}

/* 地址：縣市 + 鄉鎮市區 + 郵遞區號 桌機同一行
   （一般 select 有 min-width:160，雙欄操作卡下 <1600 易把郵遞區號擠換行；
     ≤767 手機斷點另有 wrap 規則覆蓋） */
.cms-detail-skin .twzipcode,
.cms-detail-skin .address-item .twzipcode,
.cms-detail-skin #data_twzipcode.twzipcode {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.cms-detail-skin .form-group > [class*="col-"]:has(> select ~ select ~ input),
.cms-detail-skin .form-group > [class*="col-"]:has(> select ~ select ~ .form-control),
.cms-detail-skin .form-group > [class*="col-"]:has(> .bootstrap-select ~ .bootstrap-select ~ input),
.cms-detail-skin .form-group > [class*="col-"]:has(> .bootstrap-select ~ .bootstrap-select ~ .form-control),
.cms-detail-skin .form-group > [class*="col-"]:has(> .zipcode_select ~ .zipcode_select),
.cms-detail-skin .form-group:has(.zipcode_select) > [class*="col-"]:not(.control-label),
.cms-detail-skin .form-group:has(input.zipcode) > [class*="col-"]:not(.control-label) {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    max-width: 100%;
    box-sizing: border-box;
}
.cms-detail-skin .twzipcode select.county,
.cms-detail-skin .twzipcode select.district,
.cms-detail-skin .address-item .twzipcode select.county,
.cms-detail-skin .address-item .twzipcode select.district,
.cms-detail-skin #data_twzipcode select.county,
.cms-detail-skin #data_twzipcode select.district,
.cms-detail-skin .twzipcode > select:nth-of-type(1),
.cms-detail-skin .twzipcode > select:nth-of-type(2),
.cms-detail-skin .twzipcode > .bootstrap-select,
.cms-detail-skin .twzipcode > .select2-container,
.cms-detail-skin .twzipcode > .chosen-container,
.cms-detail-skin .form-group > [class*="col-"]:has(> select ~ select ~ input) > select,
.cms-detail-skin .form-group > [class*="col-"]:has(> select ~ select ~ .form-control) > select,
.cms-detail-skin .form-group > [class*="col-"]:has(> .bootstrap-select ~ .bootstrap-select ~ input) > .bootstrap-select,
.cms-detail-skin .form-group > [class*="col-"]:has(> .bootstrap-select ~ .bootstrap-select ~ .form-control) > .bootstrap-select,
.cms-detail-skin .form-group:has(.zipcode_select) select,
.cms-detail-skin .form-group:has(.zipcode_select) .zipcode_select,
.cms-detail-skin .form-group:has(.zipcode_select) .bootstrap-select,
.cms-detail-skin .form-group:has(input.zipcode) > [class*="col-"] > select,
.cms-detail-skin .form-group:has(input.zipcode) > [class*="col-"] > .bootstrap-select {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important; /* 蓋掉一般 select 的 160px，允許收縮 */
    max-width: none !important;
    margin: 0 !important;
}
.cms-detail-skin .twzipcode input.zipcode,
.cms-detail-skin .address-item .twzipcode input.zipcode,
.cms-detail-skin #data_twzipcode input.zipcode,
.cms-detail-skin .twzipcode > input[type="text"],
.cms-detail-skin .twzipcode > input.form-control,
.cms-detail-skin .form-group input.zipcode,
.cms-detail-skin .form-group > [class*="col-"]:has(> select ~ select ~ input) > input,
.cms-detail-skin .form-group > [class*="col-"]:has(> select ~ select ~ .form-control) > input,
.cms-detail-skin .form-group > [class*="col-"]:has(> .bootstrap-select ~ .bootstrap-select ~ input) > input,
.cms-detail-skin .form-group > [class*="col-"]:has(> .bootstrap-select ~ .bootstrap-select ~ .form-control) > input {
    flex: 0 0 110px !important;
    width: 110px !important;
    min-width: 96px !important;
    max-width: 140px !important;
    margin: 0 !important;
}
.cms-detail-skin .twzipcode > .bootstrap-select > .dropdown-toggle,
.cms-detail-skin .twzipcode > .bootstrap-select > .btn,
.cms-detail-skin .form-group > [class*="col-"]:has(> .bootstrap-select ~ .bootstrap-select ~ input) > .bootstrap-select > .btn,
.cms-detail-skin .form-group > [class*="col-"]:has(> .bootstrap-select ~ .bootstrap-select ~ .form-control) > .bootstrap-select > .btn,
.cms-detail-skin .form-group:has(.zipcode_select) .bootstrap-select > .btn {
    width: 100% !important;
    max-width: 100% !important;
}

/* 表單基礎（僅 label 與一般輸入框；特殊套件不動） */
.cms-detail-skin .form-horizontal .control-label {
    color: var(--c-ink2);
    font-size: 13px;
    font-weight: 600;
}
.cms-detail-skin .form-control {
    border: 1px solid var(--c-line2);
    border-radius: var(--rad-sm);
    box-shadow: none;
    color: var(--c-ink);
    transition: border-color .15s, box-shadow .15s;
}
/* 單行輸入與旁側 addon（含起迄「>」）統一 36px，避免中間塊偏高 */
.cms-detail-skin .form-control:not(textarea):not([multiple]),
.cms-detail-skin input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.cms-detail-skin .tab-content input[type="text"],
.cms-detail-skin .tab-content input[type="number"],
.cms-detail-skin .tab-content input[type="password"],
.cms-detail-skin .tab-content input[type="email"],
.cms-detail-skin .tab-content input[type="url"],
.cms-detail-skin .tab-content input[type="tel"],
.cms-detail-skin .tab-content input[type="datetime"],
.cms-detail-skin .tab-content input[type="datetime-local"],
.cms-detail-skin .tab-content input.date-picker,
.cms-detail-skin .tab-content input.datetime-picker {
    height: 36px !important;
    box-sizing: border-box !important;
}
.cms-detail-skin .form-control:focus {
    border-color: var(--skin);
    box-shadow: 0 0 0 3px var(--skin-120);
}
.cms-detail-skin .input-group {
    display: table;
    border-collapse: separate;
    vertical-align: middle;
}
.cms-detail-skin .input-group-addon {
    background: var(--c-surface2);
    border: 1px solid var(--c-line2);
    border-color: var(--c-line2);
    color: var(--c-ink3);
    vertical-align: middle;
    height: 36px !important;
    max-height: 36px !important;
    min-height: 0 !important;
    padding: 0 10px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.cms-detail-skin .input-group > .input-group-addon {
    display: table-cell !important; /* table 布局下改回 cell，垂直仍靠 vertical-align */
    width: 1%;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle !important;
    line-height: 34px !important;
    padding: 0 10px !important;
}
/* 起迄中間「>」：input 旁鬆散 addon / span，高度鎖死與輸入同高 */
.cms-detail-skin .form-group > [class*="col-"] > .input-group-addon,
.cms-detail-skin .form-group > [class*="col-"]:has(> input ~ input) > span:not(.help-block),
.cms-detail-skin .form-group > [class*="col-"]:has(> .form-control ~ .form-control) > span:not(.help-block),
.cms-detail-skin .form-group > [class*="col-"]:has(> input ~ .input-group-addon ~ input) > .input-group-addon {
    height: 36px !important;
    max-height: 36px !important;
    min-height: 0 !important;
    padding: 0 10px !important;
    margin: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    align-self: center !important;
}
.cms-detail-skin .input-group-btn {
    vertical-align: middle;
}
.cms-detail-skin .input-group-btn > .btn {
    margin-top: 0;
    margin-bottom: 0;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 按鈕式單選（選項類型/性別限制那種方塊）→ 現代 chip 膠囊
   （label 帶 inline 灰底樣式，用 !important 覆蓋；選中 = 主題色實心） */
.cms-detail-skin .md-radio-inline.btn-group {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
}
.cms-detail-skin .md-radio-inline.btn-group > label {
    padding: 7px 15px !important;
    margin: 0 !important;
    border: 1px solid var(--c-line2) !important;
    background: var(--c-surface) !important;
    color: var(--c-ink2) !important;
    border-radius: 999px !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    transition: background .12s, border-color .12s, color .12s;
}
.cms-detail-skin .md-radio-inline.btn-group > label:hover {
    border-color: var(--skin) !important;
    background: var(--skin-050) !important;
    color: var(--skin) !important;
}
.cms-detail-skin .md-radio-inline.btn-group > label:has(input:checked),
.cms-detail-skin .md-radio-inline.btn-group > label.active {
    background: var(--skin) !important;
    border-color: var(--skin) !important;
    color: #fff !important;
}

/* 圓點單選（radio-inline，如「順序」）→ chip 化，與「選項類型」統一 */
.cms-detail-skin .radio-inline { padding: 0 !important; margin: 0 6px 4px 0 !important; }
.cms-detail-skin .radio-inline label { padding: 0 !important; margin: 0 !important; }
.cms-detail-skin .radio-inline input[type="radio"].ace { display: none !important; }
.cms-detail-skin .radio-inline input[type="radio"].ace + .lbl::before { display: none !important; }
.cms-detail-skin .radio-inline input[type="radio"].ace + .lbl {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px !important;
    border: 1px solid var(--c-line2);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-ink2);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    margin: 0 !important;
    transition: background .12s, border-color .12s, color .12s;
}
.cms-detail-skin .radio-inline input[type="radio"].ace + .lbl:hover {
    border-color: var(--skin);
    background: var(--skin-050);
    color: var(--skin);
}
.cms-detail-skin .radio-inline input[type="radio"].ace:checked + .lbl {
    background: var(--skin) !important;
    border-color: var(--skin) !important;
    color: #fff !important;
}
/* 「自訂」旁的小數字框 */
.cms-detail-skin input.radio_type4 {
    width: 64px;
    height: 33px;
    border: 1px solid var(--c-line2);
    border-radius: var(--rad-sm);
    padding: 0 10px;
    margin-left: 6px;
}

/* 章節分隔線（hr-with-text，如「題目設定」）→ 區段標題：主題色豎條 + 粗體 + 底部細線 */
.cms-detail-skin .hr-with-text {
    display: flex !important;
    align-items: center;
    gap: 9px;
    margin: 24px 0 4px !important;
    padding: 0 0 9px !important;
    height: auto !important;
    background: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--c-line) !important;
    text-align: left !important;
}
.cms-detail-skin .hr-with-text::before {
    content: "" !important;
    position: static !important;
    display: inline-block !important;
    width: 4px !important;
    height: 15px !important;
    min-width: 0 !important;
    max-width: 4px !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: var(--skin) !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}
.cms-detail-skin .hr-with-text::after {
    content: attr(data-content);
    position: static !important;
    font-size: 14px;
    font-weight: 800;
    color: var(--c-ink);
    letter-spacing: .02em;
    background: none !important;
    border: 0 !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
}

/* ---------- 自有內頁通用補強（fct 課堂／成果統計／分潤等） ---------- */
/* 區段小標 h4.header（系統紀錄/打卡紀錄/報表標題等） */
.cms-list-skin h4.header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--c-ink) !important;
    font-size: 15px;
    font-weight: 700;
    border-bottom: 1px solid var(--c-line) !important;
    padding: 0 0 8px !important;
    margin: 20px 0 12px !important;
}
.cms-list-skin h4.header::before {
    content: "";
    width: 4px;
    height: 14px;
    flex: none;
    border-radius: 999px;
    background: var(--skin);
}
.cms-list-skin h4.header .fa { color: var(--skin) !important; }

/* detail 頁的一般表格（系統紀錄/報表等，非 info-card 也統一樣式） */
.cms-detail-skin table.table:not(.table-item) > thead > tr > th {
    background: var(--c-surface2) !important;
    color: var(--c-ink2) !important;
    font-size: 12px;
    border: 0 !important;
    border-bottom: 1px solid var(--c-line) !important;
    border-right: 1px solid var(--c-line) !important;
    padding: 9px 10px;
    vertical-align: middle;
}
.cms-detail-skin table.table:not(.table-item) > thead > tr > th:last-child { border-right: 0 !important; }
.cms-detail-skin table.table:not(.table-item) > tbody > tr > td {
    border: 0 !important;
    border-bottom: 1px solid var(--c-line) !important;
    border-right: 1px solid #f2f0eb !important;
    padding: 9px 10px;
    vertical-align: middle;
    font-size: 13px;
}
.cms-detail-skin table.table:not(.table-item) > tbody > tr > td:last-child { border-right: 0 !important; }
.cms-detail-skin table.table-striped:not(.table-item) > tbody > tr,
.cms-detail-skin table.table-striped:not(.table-item) > tbody > tr:nth-child(2n+1) { background: var(--c-surface) !important; }
.cms-detail-skin table.table:not(.table-item) > tbody > tr:hover { background: var(--skin-050) !important; }

/* well 區塊柔化（成果統計的查詢列等） */
.cms-list-skin .well {
    background: var(--c-surface2) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--rad-sm) !important;
    box-shadow: none !important;
    padding: 12px 14px !important;
}

/* widget-box 無 .transparent 的也卡片化（分潤設定 rate 頁用） */
.cms-list-skin .widget-box {
    background: var(--c-surface) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--rad);
    box-shadow: 0 1px 2px rgba(20, 25, 40, .04);
    margin-bottom: 16px;
    overflow: hidden;
}
.cms-list-skin .widget-box > .widget-header {
    background: var(--c-surface2) !important;
    border-bottom: 1px solid var(--c-line) !important;
    padding: 6px 16px !important;
}

/* fct 課堂摘要列：inline 灰塊 chips → 暖底細框（icon 主題色） */
.cms-detail-skin .course-summary-bar > div[style] {
    background: var(--c-surface2) !important;
    border: 1px solid var(--c-line);
    border-radius: var(--rad-sm) !important;
    font-size: 13px;
    color: var(--c-ink2);
}
.cms-detail-skin .course-summary-bar .fa { color: var(--skin); margin-right: 4px; }
.cms-detail-skin .course-summary-bar strong { color: var(--c-ink); }

/* 備註 textarea（fct） */
.cms-detail-skin .note-textarea {
    border: 1px solid var(--c-line2) !important;
    border-radius: 8px !important;
}

/* 提醒框（review-warning-box，教練審查等頁）：藍色框 → 主題色淡底資訊條 */
.cms-detail-skin .review-warning-box {
    background: var(--skin-050) !important;
    border: 1px solid var(--skin-120) !important;
    color: var(--c-ink) !important;
    border-radius: var(--rad-sm) !important;
    padding: 10px 14px !important;
    font-size: 12.5px;
    line-height: 1.8;
    margin: 0 0 12px !important;
}
.cms-detail-skin .review-warning-box .fa { color: var(--skin) !important; }
.cms-detail-skin .review-warning-box strong { color: var(--skin); }

/* 訂單明細列的「系統紀錄／金流紀錄」小按鈕：色塊 → outline 膠囊（不折行） */
.cms-detail-skin .action-btn {
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap !important;
    background: var(--c-surface) !important;
    border: 1px solid var(--skin-120) !important;
    color: var(--skin) !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1.2 !important;
    padding: 4px 11px !important;
    margin: 1px 0;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.cms-detail-skin .action-btn:hover {
    background: var(--skin-050) !important;
    border-color: var(--skin) !important;
}
.cms-detail-skin .action-btn.pay {
    color: var(--c-ok) !important;
    border-color: color-mix(in srgb, var(--c-ok) 38%, transparent) !important;
}
.cms-detail-skin .action-btn.pay:hover {
    background: color-mix(in srgb, var(--c-ok) 8%, transparent) !important;
    border-color: var(--c-ok) !important;
}
/* 序號 + 按鈕的排列：同列不擠、序號不折行、按鈕靠右整齊 */
.cms-detail-skin .order-cell {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap !important;
}
.cms-detail-skin .order-left {
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums;
}
.cms-detail-skin .order-right {
    display: inline-flex !important;
    gap: 5px;
    align-items: center;
    flex-wrap: nowrap;
}

/* ---------- 訂單內頁資訊卡（info-card-a1b2 系列）換皮：資訊不動、只調視覺 ---------- */
.cms-detail-skin .info-card-a1b2 {
    background: var(--c-surface) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--rad) !important;
    box-shadow: 0 1px 2px rgba(20, 25, 40, .04);
    overflow: hidden;
    margin-bottom: 14px;
}
/* 標題列：藍色 bar → 淡底 + 主題色 icon */
.cms-detail-skin .info-card-title-a1b2 {
    background: var(--c-surface2) !important;
    color: var(--c-ink) !important;
    border-bottom: 1px solid var(--c-line) !important;
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 14px !important;
    text-shadow: none !important;
}
.cms-detail-skin .info-card-title-a1b2 i { color: var(--skin) !important; margin-right: 6px; }
/* 內文表格：對齊面板表格語言（保留直線分欄，欄位多看得清楚） */
.cms-detail-skin .info-card-a1b2 table.table { border: 0 !important; margin: 0 !important; }
.cms-detail-skin .info-card-a1b2 table.table > thead > tr > th {
    background: var(--c-surface2) !important;
    color: var(--c-ink2) !important;
    font-size: 12px;
    border: 0 !important;
    border-bottom: 1px solid var(--c-line) !important;
    border-right: 1px solid var(--c-line) !important;
    padding: 9px 10px;
    vertical-align: middle;
}
.cms-detail-skin .info-card-a1b2 table.table > thead > tr > th:last-child { border-right: 0 !important; }
.cms-detail-skin .info-card-a1b2 table.table > tbody > tr > td,
.cms-detail-skin .info-card-a1b2 table.table > tfoot > tr > td {
    border: 0 !important;
    border-bottom: 1px solid var(--c-line) !important;
    border-right: 1px solid #f2f0eb !important;
    padding: 10px;
    vertical-align: middle;
    font-size: 13px;
}
.cms-detail-skin .info-card-a1b2 table.table > tbody > tr > td:last-child,
.cms-detail-skin .info-card-a1b2 table.table > tfoot > tr > td:last-child { border-right: 0 !important; }
/* 斑馬紋改單色 + hover 主題色淡底 */
.cms-detail-skin .info-card-a1b2 table.table-striped > tbody > tr,
.cms-detail-skin .info-card-a1b2 table.table-striped > tbody > tr:nth-child(2n+1) { background: var(--c-surface) !important; }
.cms-detail-skin .info-card-a1b2 table.table > tbody > tr:hover { background: var(--skin-050) !important; }

/* 「* 為必填選項」：紅字改為淡色說明列（星號保留紅色點綴） */
.cms-detail-skin .required-items {
    display: inline-flex;
    align-items: center;
    background: var(--c-surface2);
    border: 1px solid var(--c-line);
    border-radius: 6px;
    color: var(--c-ink3) !important;
    font-size: 12px;
    line-height: 1.5;
    padding: 6px 12px;
    margin: 6px 0 4px;
}
.cms-detail-skin .required-items::first-letter {
    color: #d0492f;
    font-weight: 800;
}

/* NOTE! 提示：迷你 chip（小巧精緻），說明文字灰階 */
/* 注意:這裡不可用 flex。help-block 的內容是 noteRender 直接輸出的原始文字，
   若含 <b>/<span> 等 inline 標籤，flex 會把每個標籤與文字節點各自變成一欄，
   長句子會被拆成好幾條直排。改用 block + inline-block 的 NOTE! 標籤。 */
.cms-detail-skin .help-block {
    display: block;
    color: var(--c-ink3);
    font-size: 12px;
    margin: 6px 0 0;
    line-height: 1.7;
}
.cms-detail-skin .help-block > .badge:first-child {
    margin-right: 7px;
}
.cms-detail-skin .help-block .badge,
.cms-detail-skin .help-block .label {
    background: var(--skin-080) !important;
    color: var(--skin) !important;
    border: 1px solid var(--skin-120);
    border-radius: 4px !important;   /* 小方 tag 比膠囊更精緻 */
    font-weight: 700;
    font-size: 10px !important;
    letter-spacing: .05em;
    text-shadow: none;
    padding: 2px 6px !important;
    flex: none;
}

/* 圓點單選（md-radio）與一般 ace radio/checkbox：選中主題色 */
.cms-detail-skin input[type="radio"].ace:checked + .lbl::before,
.cms-detail-skin input[type="checkbox"].ace:checked:not(.ace-switch) + .lbl::before {
    border-color: var(--skin);
    color: var(--skin);
}

/* ---------- 內頁雙欄版型：左內容 + 右側固定「操作」卡（≥1200px） ----------
   純 CSS grid 重排，按鈕 DOM/事件完全不動；窄螢幕維持原直排 */
@media (min-width: 1200px) {
    .page-content.cms-detail-skin {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 232px;
        column-gap: 18px;
        align-items: start;
    }
    /* 所有直接子元素預設排左欄（提醒框/備註等自訂區塊都不會掉進右欄被操作卡蓋住） */
    .page-content.cms-detail-skin > * { grid-column: 1; }
    /* 標題橫跨整列 */
    .cms-detail-skin > .page-header:not(.header-button) { grid-column: 1 / -1; }
    /* 外層不得裁切，sticky 才有效 */
    .main-content:has(.cms-detail-skin),
    .main-content-inner:has(.cms-detail-skin),
    .page-content.cms-detail-skin { overflow: visible !important; }
    /* 第一個按鈕列 → 右欄固定操作卡
       （sticky 被 Ace 版型層層 overflow 擋住，改用 fixed 保證浮動；
         grid 第 2 欄軌道仍保留 232px 空間，卡片釘在該位置） */
    .cms-detail-skin > .page-header.header-button {
        grid-column: 2;
        position: fixed !important;
        top: 196px !important;   /* 與內容卡片頂端齊平（麵包屑+標題+頁籤高度） */
        right: 22px;
        width: 232px;
        z-index: 5;
        background: var(--c-surface) !important;
        border: 1px solid var(--c-line) !important;
        border-radius: var(--rad) !important;
        box-shadow: 0 1px 2px rgba(20, 25, 40, .04) !important;
        padding: 14px !important;
        margin: 0 !important;
    }
    .cms-detail-skin > .page-header.header-button::before {
        content: "操作";
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .1em;
        color: var(--c-ink3);
        margin-bottom: 10px;
    }
    .cms-detail-skin > .page-header.header-button .table_left {
        display: flex;
        flex-direction: column;
        gap: 8px;
        float: none !important;
    }
    .cms-detail-skin > .page-header.header-button .table_left > a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        margin: 0 !important;
    }
    /* 語系切換鈕（多語系時）併入操作卡 */
    .cms-detail-skin > .page-header.header-button .table_right {
        float: none !important;
        width: auto !important;
        margin-top: 10px;
        justify-content: flex-start !important;
    }
    /* 底部那條重複的按鈕列：桌機隱藏（右欄操作卡已固定跟隨） */
    .cms-detail-skin > .page-header.header-button ~ .page-header.header-button { display: none; }
}
@media (max-width: 767px) {

  /* 僅處理含 infobox 的卡片區塊，不影響表格等其他區塊 */

  .page-content .widget-box:has(.infobox) .widget-main,

  .page-content .widget-box:has(.infobox) .widget-body {

    padding: 8px 4px !important;

  }



  .page-content .widget-box .widget-main > .row:has(.infobox),

  .page-content .widget-body > .row:has(.infobox) {

    display: flex !important;

    flex-wrap: wrap !important;

    align-items: stretch !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    overflow: visible !important;

  }



  .page-content .widget-box .widget-main > .row:has(.infobox) > [class*="col-"],

  .page-content .widget-body > .row:has(.infobox) > [class*="col-"] {

    display: flex !important;

    flex-direction: column !important;

    float: none !important;

    align-items: stretch !important;

    padding-left: 4px !important;

    padding-right: 4px !important;

    margin-bottom: 6px !important;

    box-sizing: border-box !important;

  }



  .page-content .widget-box .widget-main > .row .infobox,

  .page-content .widget-body > .row .infobox {

    display: flex !important;

    flex: 1 1 auto !important;

    align-items: center !important;

    width: 100% !important;

    height: 100% !important;

    min-height: 76px !important;

    padding: 6px 4px 6px 6px !important;

    box-sizing: border-box !important;

  }



  /* 左側圖示區縮小，右側資料區加寬 */

  .page-content .infobox .infobox-icon {

    flex: 0 0 32px !important;

    width: 32px !important;

    min-width: 32px !important;

    max-width: 32px !important;

    margin-right: 4px !important;

  }



  .page-content .infobox .infobox-icon > .ace-icon,

  .page-content .infobox .infobox-icon > [class*="fa-"] {

    width: 30px !important;

    height: 30px !important;

    line-height: 30px !important;

    font-size: 16px !important;

    padding: 0 !important;

    margin: 0 !important;

  }



  .page-content .infobox .infobox-data {

    flex: 1 1 0 !important;

    min-width: 0 !important;

    max-width: none !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    padding-left: 2px !important;

    padding-right: 2px !important;

  }



  .page-content .infobox .infobox-data-number {

    line-height: 1.15 !important;

  }



  .page-content .infobox .infobox-data-text {

    white-space: normal !important;

    line-height: 1.3 !important;

    word-break: break-word !important;

  }



  /* easy-pie 圓形統計卡（若有）一併等高 + 間距收緊 */

  .page-content .widget-box .widget-main > .row:has(.easy-pie-chart) > [class*="col-"],

  .page-content .widget-body > .row:has(.easy-pie-chart) > [class*="col-"] {

    display: flex !important;

    flex-direction: column !important;

    padding-left: 4px !important;

    padding-right: 4px !important;

    margin-bottom: 6px !important;

  }



  .page-content .widget-box .widget-main > .row .easy-pie-chart,

  .page-content .widget-body > .row .easy-pie-chart {

    flex: 1 1 auto !important;

    height: 100% !important;

    min-height: 76px !important;

    padding: 6px 4px !important;

  }

}
@media (max-width: 767px) {
  /* ---------- 頁面級：避免整頁/區塊被 row overflow 撐出橫向捲軸 ---------- */
  .page-content.cms-detail-skin {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .page-content.cms-detail-skin .row,
  .page-content.cms-detail-skin .tab-content .row,
  .page-content.cms-detail-skin .tab-pane .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .page-content.cms-detail-skin [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }

  /* ---------- 標題列 ---------- */
  .cms-detail-skin > .page-header:not(.header-button) {
    padding: 2px 4px 8px !important;
    margin-bottom: 6px !important;
  }

  .cms-detail-skin > .page-header:not(.header-button) h1 {
    font-size: 17px !important;
    gap: 8px !important;
  }

  /* ---------- 操作按鈕列（儲存/返回等）---------- */
  .cms-detail-skin > .page-header.header-button {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px !important;
    margin: 0 0 10px !important;
    background: var(--c-surface, #fdfcfa) !important;
    border: 1px solid var(--c-line, #eae7e1) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(20, 25, 40, .04) !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin > .page-header.header-button::before {
    margin-bottom: 8px !important;
  }

  .cms-detail-skin > .page-header.header-button .table_left,
  .cms-detail-skin > .page-header.header-button .table_right {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .cms-detail-skin > .page-header.header-button .table_left > a,
  .cms-detail-skin > .page-header.header-button .table_left > .btn,
  .cms-detail-skin > .page-header.header-button .table_right > a,
  .cms-detail-skin > .page-header.header-button .table_right > .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* 底部重複按鈕列：手機保留（方便滑到底也能操作） */
  .cms-detail-skin > .page-header.header-button ~ .page-header.header-button {
    display: block !important;
    margin-top: 12px !important;
  }

  /* ---------- 頁籤 + 內容卡片 ---------- */
  .cms-detail-skin .nav-tabs {
    display: flex !important;
    max-width: 100% !important;
    margin-bottom: 8px !important;
  }

  .cms-detail-skin .nav-tabs > li > a {
    padding: 7px 12px !important;
    font-size: 13px !important;
  }

  .cms-detail-skin .tab-content {
    padding: 6px 10px 12px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .tab-pane > .form-group {
    padding: 10px 4px !important;
  }

  /* ---------- form-horizontal：標籤在上、輸入在下 ---------- */
  .cms-detail-skin .form-horizontal .form-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .cms-detail-skin .form-horizontal .control-label {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    padding: 0 0 6px !important;
    margin: 0 !important;
  }

  .cms-detail-skin .form-horizontal .form-group > [class*="col-"],
  .cms-detail-skin .form-group > .col-xs-6,
  .cms-detail-skin .form-group > .col-xs-4,
  .cms-detail-skin .form-group > .col-xs-3,
  .cms-detail-skin .form-group > .col-sm-6,
  .cms-detail-skin .form-group > .col-sm-4,
  .cms-detail-skin .form-group > .col-sm-3,
  .cms-detail-skin .form-group > .col-sm-5,
  .cms-detail-skin .form-group > .col-sm-7 {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 含 pill 單選的半寬欄位改滿寬，避免換行 */
  .cms-detail-skin .form-group > [class*="col-"]:has(.md-radio-inline),
  .cms-detail-skin .form-group > [class*="col-"]:has(.radio-inline) {
    width: 100% !important;
    max-width: 100% !important;
  }

  .cms-detail-skin .md-radio-inline.btn-group,
  .cms-detail-skin .radio-inline {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .cms-detail-skin .md-radio-inline.btn-group > label,
  .cms-detail-skin .radio-inline input[type="radio"].ace + .lbl {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: center !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* ---------- 輸入框 / 下拉 / 群組 ---------- */
  .cms-detail-skin .tab-content select.form-control,
  .cms-detail-skin .tab-content select:not([multiple]),
  .cms-detail-skin .form-control,
  .cms-detail-skin textarea.form-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* 日期等群組：維持 table 橫排，避免 flex+width:100% 把日曆圖示擠歪 */
  .cms-detail-skin .input-group {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: separate !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
  }

  .cms-detail-skin .input-group .form-control,
  .cms-detail-skin .input-group > .form-control,
  .cms-detail-skin .input-group > input {
    display: table-cell !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  .cms-detail-skin .input-group-addon,
  .cms-detail-skin .input-group-btn,
  .cms-detail-skin .input-group > .input-group-addon,
  .cms-detail-skin .input-group > .input-group-btn {
    display: table-cell !important;
    width: 1% !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    float: none !important;
    flex: none !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .input-group-btn > .btn {
    margin: 0 !important;
    height: 36px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 生日：input-group + 年齡文案（或鬆散 addon）同一行垂直置中 */
  .cms-detail-skin .form-group > [class*="col-"]:has(> .input-group ~ span:not(.help-block):not(.input-group-addon)),
  .cms-detail-skin .form-group > [class*="col-"]:has(> .form-control ~ .input-group-addon),
  .cms-detail-skin .form-group > [class*="col-"]:has(> input.form-control ~ .input-group-addon),
  .cms-detail-skin .form-group > [class*="col-"]:has(> .input-group.date),
  .cms-detail-skin .form-group > [class*="col-"]:has(> .date-picker) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .cms-detail-skin .form-group > [class*="col-"]:has(> .input-group ~ span:not(.help-block):not(.input-group-addon)) > .input-group {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: calc(100% - 4.5em) !important;
  }

  .cms-detail-skin .form-group > [class*="col-"]:has(> .form-control ~ .input-group-addon) > .form-control,
  .cms-detail-skin .form-group > [class*="col-"]:has(> input.form-control ~ .input-group-addon) > input.form-control {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    /* 鬆散 input + addon：接縫側改直角，避免兩塊各自全圓角疊在一起 */
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .cms-detail-skin .form-group > [class*="col-"]:has(> .form-control ~ .input-group-addon) > .input-group-addon,
  .cms-detail-skin .form-group > [class*="col-"]:has(> input.form-control ~ .input-group-addon) > .input-group-addon {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    margin: 0 0 0 -1px !important;
    float: none !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--rad-sm) !important;
    border-bottom-right-radius: var(--rad-sm) !important;
  }

  .cms-detail-skin .form-group > [class*="col-"]:has(> .input-group ~ span:not(.help-block):not(.input-group-addon)) > span:not(.help-block):not(.input-group-addon),
  .cms-detail-skin .form-group > [class*="col-"]:has(> .form-control ~ .input-group-addon) > span:not(.input-group-addon):not(.help-block) {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
    line-height: 36px !important;
  }

  /* input-group 內日曆 addon：高度與輸入對齊 */
  .cms-detail-skin .input-group > .input-group-addon {
    height: 32px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 32px !important;
  }

  .cms-detail-skin .select2-container,
  .cms-detail-skin .chosen-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* ---------- 虛線分組區（站點模組設定等）---------- */
  .cms-detail-skin .dashed-border-ggg {
    padding: 10px !important;
    margin-bottom: 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .dashed-border-ggg .form-group {
    margin-bottom: 8px !important;
  }

  /* ---------- 雙欄選擇器 / 上傳 / 色票 ---------- */
  .cms-detail-skin .bootstrap-duallistbox-container,
  .cms-detail-skin .bootstrap-duallistbox-container .box1,
  .cms-detail-skin .bootstrap-duallistbox-container .box2,
  .cms-detail-skin .file-input,
  .cms-detail-skin .file-preview,
  .cms-detail-skin .minicolors,
  .cms-detail-skin .minicolors-theme-bootstrap .minicolors-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .bootstrap-duallistbox-container .col-xs-6,
  .cms-detail-skin .bootstrap-duallistbox-container .col-sm-5,
  .cms-detail-skin .bootstrap-duallistbox-container .col-sm-2 {
    width: 100% !important;
    float: none !important;
    margin-bottom: 8px !important;
  }

  /* ---------- 表格（站點紀錄/模組 log 等）---------- */
  .cms-detail-skin .mod-log-table-container,
  .cms-detail-skin .chat-history {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .cms-detail-skin .mod-log-table-container .mod-log-table {
    min-width: 560px;
  }

  /* ---------- 提示列 ---------- */
  .cms-detail-skin .required-items,
  .cms-detail-skin .help-block {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
}
@media (max-width: 767px) {
  /* ---------- 「順序」radio-inline：父容器負責換行 ---------- */
  .cms-detail-skin .form-group > [class*="col-"]:has(> label.radio-inline),
  .cms-detail-skin .form-group > [class*="col-"]:has(> .radio-inline) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    gap: 6px !important;
  }

  .cms-detail-skin label.radio-inline,
  .cms-detail-skin .radio-inline {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .cms-detail-skin .radio-inline input[type="radio"].ace + .lbl {
    flex: 0 0 auto !important;
    min-width: 2.75em !important;
    justify-content: center !important;
    padding: 6px 10px !important;
    text-align: center !important;
  }

  /* ---------- 若順序用 checkbox-btn 元件 ---------- */
  .cms-detail-skin .checkbox-btn-group-20251126 {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .cms-detail-skin .checkbox-btn-group-20251126 .checkbox-btn-20251126 {
    width: auto !important;
    min-width: 0 !important;
  }

  .cms-detail-skin .checkbox-btn-group-20251126 .checkbox-btn-20251126 span {
    width: 100% !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
  }
}
@media (max-width: 767px) {
  /* ---------- twzipcode：縣市 + 區 同一行 ---------- */
  .cms-detail-skin .twzipcode,
  .cms-detail-skin .address-item .twzipcode,
  .cms-detail-skin #data_twzipcode.twzipcode {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .cms-detail-skin .twzipcode .twzipcodeBox,
  .cms-detail-skin .address-item .twzipcode .twzipcodeBox,
  .cms-detail-skin .address-item select.twzipcodeBox,
  .cms-detail-skin .address-item input.twzipcodeBox {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    height: 36px !important;
    box-sizing: border-box !important;
    vertical-align: middle;
  }

  /* 前兩個下拉：縣市、區 */
  .cms-detail-skin .twzipcode select.county,
  .cms-detail-skin .twzipcode select.district,
  .cms-detail-skin .address-item .twzipcode select.county,
  .cms-detail-skin .address-item .twzipcode select.district,
  .cms-detail-skin #data_twzipcode select.county,
  .cms-detail-skin #data_twzipcode select.district,
  .cms-detail-skin .twzipcode > select:nth-of-type(1),
  .cms-detail-skin .twzipcode > select:nth-of-type(2) {
    flex: 1 1 calc(50% - 3px) !important;
    width: calc(50% - 3px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 3px) !important;
    padding-left: 8px !important;
    padding-right: 22px !important;
    font-size: 14px !important;
  }

  /* 郵遞區號：下一行滿寬（或窄欄） */
  .cms-detail-skin .twzipcode input.zipcode,
  .cms-detail-skin .address-item .twzipcode input.zipcode,
  .cms-detail-skin #data_twzipcode input.zipcode,
  .cms-detail-skin .twzipcode > input[type="text"]:first-of-type,
  .cms-detail-skin .twzipcode > input.zipcode {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    font-size: 14px !important;
  }

  /* select2 / chosen 包裝（若有） */
  .cms-detail-skin .twzipcode > .select2-container:nth-of-type(1),
  .cms-detail-skin .twzipcode > .select2-container:nth-of-type(2),
  .cms-detail-skin .twzipcode > .chosen-container:nth-of-type(1),
  .cms-detail-skin .twzipcode > .chosen-container:nth-of-type(2) {
    flex: 1 1 calc(50% - 3px) !important;
    width: calc(50% - 3px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 3px) !important;
  }

  /* ---------- zipcode_select：兩欄並排 ---------- */
  .cms-detail-skin .form-group:has(.zipcode_select) > [class*="col-"],
  .cms-detail-skin .form-group:has(select.zipcode_select) > [class*="col-"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .cms-detail-skin .form-group:has(.zipcode_select) .zipcode_select:nth-of-type(1),
  .cms-detail-skin .form-group:has(.zipcode_select) .zipcode_select:nth-of-type(2),
  .cms-detail-skin .form-group:has(.zipcode_select) select:nth-of-type(1),
  .cms-detail-skin .form-group:has(.zipcode_select) select:nth-of-type(2) {
    flex: 1 1 calc(50% - 3px) !important;
    width: calc(50% - 3px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 3px) !important;
  }

  /* 地址 form-group 內若拆成兩個 col-xs-6 */
  .cms-detail-skin .form-group:has(.twzipcode) > [class*="col-"],
  .cms-detail-skin .form-group:has(.zipcode_select) > [class*="col-"] {
    float: none !important;
  }

  .cms-detail-skin .form-group:has(.twzipcode) > .col-xs-6:first-child,
  .cms-detail-skin .form-group:has(.twzipcode) > .col-sm-6:first-child,
  .cms-detail-skin .form-group:has(.zipcode_select) > .col-xs-6:nth-child(1),
  .cms-detail-skin .form-group:has(.zipcode_select) > .col-xs-6:nth-child(2),
  .cms-detail-skin .form-group:has(.zipcode_select) > .col-sm-6:nth-child(1),
  .cms-detail-skin .form-group:has(.zipcode_select) > .col-sm-6:nth-child(2) {
    flex: 1 1 calc(50% - 3px) !important;
    width: calc(50% - 3px) !important;
    max-width: calc(50% - 3px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 詳細地址輸入框維持滿寬 */
  .cms-detail-skin .form-group:has(.twzipcode) input.form-control:not(.zipcode),
  .cms-detail-skin .form-group:has(.zipcode_select) input.form-control[type="text"]:not(.zipcode) {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 360px) {
  .cms-detail-skin .twzipcode,
  .cms-detail-skin .address-item .twzipcode,
  .cms-detail-skin #data_twzipcode.twzipcode {
    gap: 4px !important;
  }

  .cms-detail-skin .twzipcode select.county,
  .cms-detail-skin .twzipcode select.district,
  .cms-detail-skin .address-item .twzipcode select.county,
  .cms-detail-skin .address-item .twzipcode select.district,
  .cms-detail-skin #data_twzipcode select.county,
  .cms-detail-skin #data_twzipcode select.district {
    padding-left: 4px !important;
    padding-right: 18px !important;
    font-size: 13px !important;
  }
}
@media (max-width: 991px) {
  /* 展開態：側欄成為獨立捲動容器 */
  #sidebar.sidebar.responsive.display,
  #sidebar.sidebar.responsive.sidebar-fixed.display {
    position: fixed !important;
    top: 38px !important;          /* 與 cms-list-skin navbar 高度一致 */
    bottom: 0 !important;
    left: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 覆蓋 ace04：展開態不再用 visible + 假 max-height */
  .sidebar.responsive.display {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: none !important;
  }

  /* 覆蓋 ace04：nav-wrap 不再裁切子選單高度 */
  .menu-toggler + .responsive.sidebar-scroll .nav-wrap,
  #sidebar .nav-wrap,
  #sidebar .nav-wrap-up,
  #sidebar .ace-scroll,
  #sidebar .scroll-content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  /* 子選單展開動畫仍靠 overflow:hidden 裁切，僅在收合中的 li 保留 */
  #sidebar .nav-list > li:not(.open) > .submenu {
    overflow: hidden !important;
  }

  /* 搜尋框：捲動時釘在側欄頂端 */
  #sidebar .search_box {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #ffffff !important;
  }
}
@media (max-width: 767px) {
  .cms-list-skin .page-header:has(.search-form-other) {
    padding: 10px 12px !important;
  }

  .cms-list-skin .search-form-other .search-items {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    float: none !important;
    margin: 0 0 6px !important;
    clear: both !important;
  }

  .cms-list-skin .search-form-other .search-phone-name {
    flex: 0 0 102px !important;
    width: 102px !important;
    float: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 6px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .cms-list-skin .search-form-other .search-phone-rights {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    display: block !important;
  }

  .cms-list-skin .search-form-other .search-items input,
  .cms-list-skin .search-form-other .search-items select,
  .cms-list-skin .search-form-other .search-phone-rights input,
  .cms-list-skin .search-form-other .search-phone-rights select,
  .cms-list-skin .search-form-other .search-phone-rights .form-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    line-height: 1.2 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    box-sizing: border-box !important;
  }

  .cms-list-skin .search-form-other .search-phone-rights .select2-container .select2-selection--single {
    height: 32px !important;
    min-height: 32px !important;
  }

  .cms-list-skin .search-form-other .search-button-block {
    margin-top: 4px !important;
  }
}

@media (max-width: 360px) {
  .cms-list-skin .search-form-other .search-phone-name {
    flex: 0 0 92px !important;
    width: 92px !important;
    font-size: 11px !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }
}
@media (max-width: 767px) {
  .cms-list-skin .checkbox-btn-group-20251126 {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .cms-list-skin .checkbox-btn-group-20251126 .checkbox-btn-20251126 {
    width: 100% !important;
    display: flex !important;
  }

  .cms-list-skin .checkbox-btn-group-20251126 .checkbox-btn-20251126 span {
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 767px) {
  #past_work_box,
  .cms-detail-skin #past_work_box {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .coachExp-wrapper_x80 {
    padding: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden;
  }

  /* 表頭與輸入分離的根因：隱藏表頭，改由欄位 ::before 顯示標籤 */
  .cms-detail-skin .coachExp-header_x80 {
    display: none !important;
  }

  .cms-detail-skin #coachExpBody_x80 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .cms-detail-skin .coachExp-row_x80 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px 8px;
    padding: 10px !important;
    margin-bottom: 10px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden;
  }

  .cms-detail-skin .coachExp-cell_x80,
  .cms-detail-skin .coachExp-row_x80 > .coachExp-cell_x80 {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box !important;
    overflow: hidden;
  }

  .cms-detail-skin .coachExp-cell_x80::before {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #59616f;
    margin-bottom: 4px;
    line-height: 1.3;
  }

  /* 服務單位、職稱：各佔整行 */
  .cms-detail-skin .coachExp-row_x80 > .coachExp-cell_x80:nth-child(1),
  .cms-detail-skin .coachExp-row_x80 > .coachExp-cell_x80:nth-child(2) {
    grid-column: 1 / -1;
  }

  .cms-detail-skin .coachExp-row_x80 > .coachExp-cell_x80:nth-child(1)::before { content: "服務單位"; }
  .cms-detail-skin .coachExp-row_x80 > .coachExp-cell_x80:nth-child(2)::before { content: "職稱"; }
  .cms-detail-skin .coachExp-row_x80 > .coachExp-cell_x80:nth-child(3)::before { content: "開始年份"; }
  .cms-detail-skin .coachExp-row_x80 > .coachExp-cell_x80:nth-child(4)::before { content: "結束年份"; }
  .cms-detail-skin .coachExp-row_x80 > .coachExp-cell_x80:nth-child(5)::before,
  .cms-detail-skin .coachExp-row_x80 > .coachExp-cell_x80:nth-child(6)::before {
    content: none;
  }

  /* 開始 / 結束年份並排 */
  .cms-detail-skin .coachExp-row_x80 > .coachExp-cell_x80:nth-child(3),
  .cms-detail-skin .coachExp-row_x80 > .coachExp-cell_x80:nth-child(4) {
    grid-column: auto;
  }

  /* 至今 + 刪除 並排 */
  .cms-detail-skin .coachExp-row_x80 > .coachExp-cell_x80:nth-child(5),
  .cms-detail-skin .coachExp-row_x80 > .coachExp-cell_x80:nth-child(6) {
    grid-column: auto;
    align-self: center;
  }

  .cms-detail-skin .coachExp-row_x80 > .coachExp-cell_x80:nth-child(5) {
    flex-direction: row;
    align-items: center;
    min-height: 34px;
  }

  .cms-detail-skin .coachExp-untilNowBox_x80 {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    gap: 6px;
    max-width: 100%;
  }

  .cms-detail-skin .coachExp-untilNowBox_x80 label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: normal;
    font-size: 13px;
    white-space: nowrap;
  }

  .cms-detail-skin .coachExp-row_x80 > .coachExp-cell_x80:nth-child(6) {
    align-items: stretch;
  }

  .cms-detail-skin .coachExp-row_x80 .form-control,
  .cms-detail-skin .coachExp-row_x80 .form-select,
  .cms-detail-skin .coachExp-row_x80 select,
  .cms-detail-skin .coachExp-row_x80 input[type="text"],
  .cms-detail-skin .coachExp-row_x80 input.form-control,
  .cms-detail-skin .coachExp-company_x80,
  .cms-detail-skin .coachExp-position_x80,
  .cms-detail-skin .coachExp-start_x80,
  .cms-detail-skin .coachExp-end_x80 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 36px;
    font-size: 14px;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .coachExp-row_x80 .coachExp-del_x80 {
    width: 100% !important;
    max-width: 100% !important;
    height: 34px;
    padding: 4px 8px;
    box-sizing: border-box;
  }

  .cms-detail-skin #coachExpAddBtn_x80 {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 4px !important;
    box-sizing: border-box;
  }
}
@media (max-width: 767px) {
  .page-content.cms-detail-skin:has(.email-block),
  .page-content.cms-detail-skin:has(.del-btn-block) {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .tab-content:has(.email-block),
  .cms-detail-skin .tab-pane:has(.email-block),
  .cms-detail-skin .form-group:has(.email-block),
  .cms-detail-skin .widget-main:has(.email-block),
  .cms-detail-skin .tab-content .row:has(.email-block),
  .cms-detail-skin .tab-pane .row:has(.email-block) {
    overflow: visible !important;
    overflow-x: visible !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .tab-content .row:has(.email-block) > [class*="col-"],
  .cms-detail-skin .tab-pane .row:has(.email-block) > [class*="col-"] {
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .form-group:has(.email-block) > h4.header,
  .cms-detail-skin .tab-pane > h4.header:has(+ table .email-block) {
    max-width: 100% !important;
    margin-bottom: 8px !important;
  }

  /* ---------- 表格改卡片（隱藏表頭，每列一張卡）---------- */
  .cms-detail-skin table.table:has(.email-block),
  .cms-detail-skin table.table:has(.del-btn-block) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    border: 0 !important;
    margin-bottom: 0 !important;
  }

  .cms-detail-skin table.table:has(.email-block) thead,
  .cms-detail-skin table.table:has(.del-btn-block) thead {
    display: none !important;
  }

  .cms-detail-skin table.table:has(.email-block) tbody,
  .cms-detail-skin table.table:has(.del-btn-block) tbody {
    display: block !important;
    width: 100% !important;
  }

  .cms-detail-skin table.table:has(.email-block) tbody tr,
  .cms-detail-skin table.table:has(.del-btn-block) tbody tr {
    display: block !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
    border: 1px solid #e7e9ee !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin table.table:has(.email-block) tbody td,
  .cms-detail-skin table.table:has(.del-btn-block) tbody td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin table.table:has(.email-block) tbody td::before,
  .cms-detail-skin table.table:has(.del-btn-block) tbody td::before {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #59616f;
    margin-bottom: 4px;
    line-height: 1.3;
  }

  .cms-detail-skin table.table:has(.email-block) tbody td:nth-child(1)::before,
  .cms-detail-skin table.table:has(.del-btn-block) tbody td:nth-child(1)::before {
    content: "功能名稱";
  }

  .cms-detail-skin table.table:has(.email-block) tbody td:nth-child(2)::before,
  .cms-detail-skin table.table:has(.del-btn-block) tbody td:nth-child(2)::before {
    content: "收件人列表";
  }

  .cms-detail-skin table.table:has(.email-block) tbody td:nth-child(3)::before,
  .cms-detail-skin table.table:has(.del-btn-block) tbody td:nth-child(3)::before {
    content: "操作";
  }

  /* ---------- 收件人 email 區塊 ---------- */
  .cms-detail-skin .email-block {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 6px !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .email-block input,
  .cms-detail-skin .email-block input[type="text"] {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .del-btn-block {
    float: none !important;
    display: inline-block !important;
    margin: 4px 0 0 !important;
  }

  .cms-detail-skin table.table:has(.email-block) .btn,
  .cms-detail-skin table.table:has(.email-block) .btn-group-others a,
  .cms-detail-skin table.table:has(.del-btn-block) .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }
}

.cms-list-skin .cms-source-tag {
    display: block;
    width: fit-content;
    margin-top: 4px;
    padding: 1px 7px;
    border: 1px solid #bcd7f5;
    border-radius: 10px;
    background: #eaf3fe;
    color: #2f6fb0;
    font-size: 11px;
    line-height: 17px;
    white-space: nowrap;
    cursor: help;
}
@media (min-width: 451px) and (max-width: 991px) {
  #navbar .navbar-header-phone {
    display: none !important;
  }
}

/* ---------- ≤991px：頂部與內容區防跑版 ---------- */
@media (max-width: 991px) {
  /* cms.css 的 width:29% 會把 phone 鈕鎖在左側；統一改回自動寬 */
  #navbar .navbar-header,
  #navbar .navbar-header.pull-left,
  #navbar .navbar-header-pc {
    width: auto !important;
    max-width: none !important;
  }

  #navbar .navbar-container {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #navbar .navbar-header.pull-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
  }

  #navbar .navbar-buttons,
  #navbar .navbar-buttons.navbar-header.pull-right {
    flex: 0 0 auto !important;
    float: none !important;
    margin-left: auto !important;
    width: auto !important;
  }

  /* 平板時右側時間膠囊偏佔寬，收起來避免頂部擠爆 */
  #navbar .ace-nav > li.time-block {
    display: none !important;
  }

  /* 側欄收合態：主內容必須貼齊，不可殘留桌機 margin */
  #sidebar.sidebar + .main-content,
  #sidebar.sidebar.responsive + .main-content,
  #sidebar.sidebar:not(.menu-min) + .main-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .main-container,
  .main-content,
  .main-content-inner,
  .page-content {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 避免寬表格/元件把整頁撐出橫向捲動（表格本身仍可在卡片內捲） */
  body,
  .main-container {
    overflow-x: hidden !important;
  }
}

/* ---------- ≤450px：只用手機版使用者鈕，並靠右對齊 ---------- */
@media (max-width: 450px) {
  #navbar .navbar-header-phone {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: auto !important;
    float: none !important;
  }

  /* 右側桌機版使用者/首頁/時間/訊息與手機版重複 → 隱藏 */
  #navbar .ace-nav > li.admin-name,
  #navbar .ace-nav > li.to-web-home,
  #navbar .ace-nav > li.time-block,
  #navbar .ace-nav > li:has(> a.chat-msg-btn),
  #navbar .ace-nav > li:has(svg.chat-msg-btn),
  #navbar .ace-nav > li.notify,
  #navbar .ace-nav > li:has(> a.notify-dropdown),
  #navbar .ace-nav > li:has(.notify-num) {
    display: none !important;
  }

  /* cms.css 的 time-block-phone 會 margin-top:45px 把內容往下頂，關掉避免「跑掉」 */
  .time-block-phone {
    display: none !important;
    margin-top: 0 !important;
  }
}
@media (max-width: 991px) {
  .cms-list-skin .page-header:has(.search-form-other) {
    padding: 10px 12px !important;
  }

  .cms-list-skin .search-form-other {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  .cms-list-skin .search-form-other .search-items {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    float: none !important;
    margin: 0 0 8px !important;
    clear: both !important;
    box-sizing: border-box !important;
  }

  .cms-list-skin .search-form-other .search-phone-name {
    flex: 0 0 88px !important;
    width: 88px !important;
    max-width: 88px !important;
    float: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 8px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .cms-list-skin .search-form-other .search-phone-rights {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    display: block !important;
    width: auto !important;
  }

  .cms-list-skin .search-form-other .search-items input,
  .cms-list-skin .search-form-other .search-items select,
  .cms-list-skin .search-form-other .search-phone-rights input,
  .cms-list-skin .search-form-other .search-phone-rights select,
  .cms-list-skin .search-form-other .search-phone-rights .form-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    line-height: 1.2 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    box-sizing: border-box !important;
  }

  .cms-list-skin .search-form-other .search-phone-rights .select2-container,
  .cms-list-skin .search-form-other .search-phone-rights .chosen-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .cms-list-skin .search-form-other .search-phone-rights .select2-container .select2-selection--single {
    height: 34px !important;
    min-height: 34px !important;
  }

  .cms-list-skin .search-form-other .search-button-block {
    float: none !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .cms-list-skin .search-form-other .search-button-block .btn {
    margin: 0 !important;
  }
}

@media (max-width: 360px) {
  .cms-list-skin .search-form-other .search-phone-name {
    flex: 0 0 78px !important;
    width: 78px !important;
    max-width: 78px !important;
    font-size: 12px !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }
}
@media (max-width: 991px) {
  .cms-list-skin .row:has(.dataTables_paginate) {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin-top: 14px !important;
    margin-bottom: 18px !important;
    padding: 0 12px !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .cms-list-skin .row:has(.dataTables_paginate) > .col-sm-6,
  .cms-list-skin .row:has(.dataTables_paginate) > [class*="col-"] {
    width: 100% !important;
    float: none !important;
    position: static !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  .cms-list-skin .row:has(.dataTables_paginate) .dataTables_info,
  .cms-list-skin .dataTables_info {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 10px !important;
    line-height: 1.4 !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .cms-list-skin .dataTables_paginate {
    display: flex !important;
    justify-content: center !important;
    float: none !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .cms-list-skin .dataTables_paginate .pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 6px !important;
    margin: 0 !important;
  }
}

/* ---------- 表格橫向捲動：不要裁切 form／頁尾 ---------- */
@media (max-width: 991px) {
  .cms-list-skin #formTable,
  .cms-list-skin #formTable > form {
    overflow: visible !important;
    max-width: 100% !important;
  }

  .cms-list-skin #formTable > form > .col-xs-12 {
    overflow: visible !important;
    max-width: 100% !important;
  }

  .cms-list-skin #formTable .table-responsive,
  .cms-list-skin #formTable div:has(> table.table-item),
  .cms-list-skin #formTable > form > .col-xs-12 > div:has(> table.table-item) {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }

  .cms-list-skin #formTable table.table-item {
    max-width: none !important;
  }
}

/* ---------- 列表工具列／操作鈕：平板可換行 ---------- */
@media (max-width: 991px) {
  .cms-list-skin .page-header.header-button,
  .cms-list-skin .operate-button-block {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cms-list-skin .page-header.header-button .table_left,
  .cms-list-skin .page-header.header-button .table_right,
  .cms-list-skin .page-header.header-button .table_perv,
  .cms-list-skin .operate-button-block .table_left,
  .cms-list-skin .operate-button-block .table_right,
  .cms-list-skin .operate-button-block .table_perv {
    float: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  .cms-list-skin .page-header.header-button .btn,
  .cms-list-skin .operate-button-block .btn {
    margin: 0 !important;
  }
}

/* ---------- 列表篩選勾選列（courseTiming 等） ---------- */
@media (min-width: 768px) and (max-width: 991px) {
  .cms-list-skin .checkbox-btn-group-20251126 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .cms-list-skin .checkbox-btn-group-20251126 .checkbox-btn-20251126 {
    flex: 1 1 200px !important;
    max-width: 100% !important;
  }

  .cms-list-skin .checkbox-btn-group-20251126 .checkbox-btn-20251126 span {
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 12px !important;
  }
}

/* ---------- 詳情頁：平板表單欄位避免半寬擠壓 ---------- */
@media (min-width: 768px) and (max-width: 991px) {
  .cms-detail-skin .form-group .col-sm-1,
  .cms-detail-skin .form-group .col-sm-2,
  .cms-detail-skin .form-group .col-sm-3,
  .cms-detail-skin .form-group .col-sm-4,
  .cms-detail-skin .form-horizontal .col-sm-1,
  .cms-detail-skin .form-horizontal .col-sm-2,
  .cms-detail-skin .form-horizontal .col-sm-3,
  .cms-detail-skin .form-horizontal .col-sm-4,
  .cms-detail-skin .form-group .col-sm-8,
  .cms-detail-skin .form-group .col-sm-9,
  .cms-detail-skin .form-group .col-sm-10,
  .cms-detail-skin .form-horizontal .col-sm-8,
  .cms-detail-skin .form-horizontal .col-sm-9,
  .cms-detail-skin .form-horizontal .col-sm-10 {
    width: 100% !important;
    float: none !important;
    max-width: 100% !important;
  }
}

/* ---------- 首頁 panel 統計卡：平板兩欄對齊 ---------- */
@media (min-width: 768px) and (max-width: 991px) {
  .page-content .widget-box:has(.infobox) .widget-main > .row:has(.infobox),
  .page-content .widget-box:has(.infobox) .widget-body > .row:has(.infobox) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .page-content .widget-box .widget-main > .row:has(.infobox) > [class*="col-"],
  .page-content .widget-body > .row:has(.infobox) > [class*="col-"] {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    width: 50% !important;
    max-width: 50% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
  }

  .page-content .widget-box .widget-main > .row .infobox,
  .page-content .widget-body > .row .infobox {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 76px !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 999px) {
  /* ---------- 橫向捲動容器 ---------- */
  .cms-list-skin #formTable > form > .col-xs-12:has(table),
  .cms-list-skin #formTable .table-responsive,
  .cms-list-skin #formTable div:has(> table.table-item),
  .cms-detail-skin .table-responsive,
  .cms-detail-skin .chat-history,
  .cms-detail-skin div:has(> table.table),
  .page-content .table-responsive,
  .page-content .widget-box .table-responsive,
  .page-content div:has(> table.table-item) {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }

  /* form 本身不橫滑，避免裁切頁尾分頁 */
  .cms-list-skin #formTable > form {
    overflow: visible !important;
  }

  /* sticky 需要 separate */
  .cms-list-skin table.table-item,
  .cms-detail-skin table.table,
  .cms-detail-skin .chat-history > table,
  .page-content table.table-item,
  .page-content .widget-box table.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  /* ---------- 通用：前兩欄固定 ---------- */
  .cms-list-skin table.table-item > thead > tr > th:nth-child(1),
  .cms-list-skin table.table-item > tbody > tr > td:nth-child(1),
  .cms-detail-skin table.table > thead > tr > th:nth-child(1),
  .cms-detail-skin table.table > tbody > tr > td:nth-child(1),
  .cms-detail-skin .chat-history > table > thead > tr > th:nth-child(1),
  .cms-detail-skin .chat-history > table > tbody > tr > td:nth-child(1),
  .page-content table.table-item > thead > tr > th:nth-child(1),
  .page-content table.table-item > tbody > tr > td:nth-child(1),
  .page-content .widget-box table.table > thead > tr > th:nth-child(1),
  .page-content .widget-box table.table > tbody > tr > td:nth-child(1) {
    position: sticky !important;
    left: 0 !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
  }

  .cms-list-skin table.table-item > thead > tr > th:nth-child(2),
  .cms-list-skin table.table-item > tbody > tr > td:nth-child(2),
  .cms-detail-skin table.table > thead > tr > th:nth-child(2),
  .cms-detail-skin table.table > tbody > tr > td:nth-child(2),
  .cms-detail-skin .chat-history > table > thead > tr > th:nth-child(2),
  .cms-detail-skin .chat-history > table > tbody > tr > td:nth-child(2),
  .page-content table.table-item > thead > tr > th:nth-child(2),
  .page-content table.table-item > tbody > tr > td:nth-child(2),
  .page-content .widget-box table.table > thead > tr > th:nth-child(2),
  .page-content .widget-box table.table > tbody > tr > td:nth-child(2) {
    position: sticky !important;
    left: var(--cms-sticky-col1, 52px) !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
    box-shadow: 6px 0 8px -6px rgba(20, 25, 40, 0.28) !important;
  }

  /* 表頭固定欄層級更高，滑過表體時仍蓋住 */
  .cms-list-skin table.table-item > thead > tr > th:nth-child(1),
  .cms-list-skin table.table-item > thead > tr > th:nth-child(2),
  .cms-detail-skin table.table > thead > tr > th:nth-child(1),
  .cms-detail-skin table.table > thead > tr > th:nth-child(2),
  .cms-detail-skin .chat-history > table > thead > tr > th:nth-child(1),
  .cms-detail-skin .chat-history > table > thead > tr > th:nth-child(2),
  .page-content table.table-item > thead > tr > th:nth-child(1),
  .page-content table.table-item > thead > tr > th:nth-child(2),
  .page-content .widget-box table.table > thead > tr > th:nth-child(1),
  .page-content .widget-box table.table > thead > tr > th:nth-child(2) {
    z-index: 5 !important;
    background: var(--c-surface2, #f7f5f1) !important;
  }

  /* 表體固定欄實心底（避免橫滑透出） */
  .cms-list-skin table.table-item > tbody > tr > td:nth-child(1),
  .cms-list-skin table.table-item > tbody > tr > td:nth-child(2),
  .cms-detail-skin table.table > tbody > tr > td:nth-child(1),
  .cms-detail-skin table.table > tbody > tr > td:nth-child(2),
  .cms-detail-skin .chat-history > table > tbody > tr > td:nth-child(1),
  .cms-detail-skin .chat-history > table > tbody > tr > td:nth-child(2),
  .page-content table.table-item > tbody > tr > td:nth-child(1),
  .page-content table.table-item > tbody > tr > td:nth-child(2),
  .page-content .widget-box table.table > tbody > tr > td:nth-child(1),
  .page-content .widget-box table.table > tbody > tr > td:nth-child(2) {
    background: var(--c-surface, #fdfcfa) !important;
  }

  .cms-list-skin table.table-item.table-hover > tbody > tr:hover > td:nth-child(1),
  .cms-list-skin table.table-item.table-hover > tbody > tr:hover > td:nth-child(2),
  .cms-list-skin table.table-hover > tbody > tr:hover > td:nth-child(1),
  .cms-list-skin table.table-hover > tbody > tr:hover > td:nth-child(2),
  .page-content table.table-hover > tbody > tr:hover > td:nth-child(1),
  .page-content table.table-hover > tbody > tr:hover > td:nth-child(2) {
    background: var(--skin-050, #f5eeee) !important;
  }

  /* ---------- 首欄是 checkbox：鎖寬，第二欄 left 才準 ---------- */
  .cms-list-skin table.table-item:has(td:first-child input[type="checkbox"]),
  .cms-list-skin table.table-item:has(th:first-child input[type="checkbox"]),
  .page-content table.table-item:has(td:first-child input[type="checkbox"]),
  .page-content table.table-item:has(th:first-child input[type="checkbox"]) {
    --cms-sticky-col1: 52px;
  }

  .cms-list-skin table.table-item:has(td:first-child input[type="checkbox"]) > thead > tr > th:nth-child(1),
  .cms-list-skin table.table-item:has(td:first-child input[type="checkbox"]) > tbody > tr > td:nth-child(1),
  .cms-list-skin table.table-item:has(th:first-child input[type="checkbox"]) > thead > tr > th:nth-child(1),
  .cms-list-skin table.table-item:has(th:first-child input[type="checkbox"]) > tbody > tr > td:nth-child(1),
  .page-content table.table-item:has(td:first-child input[type="checkbox"]) > thead > tr > th:nth-child(1),
  .page-content table.table-item:has(td:first-child input[type="checkbox"]) > tbody > tr > td:nth-child(1),
  .page-content table.table-item:has(th:first-child input[type="checkbox"]) > thead > tr > th:nth-child(1),
  .page-content table.table-item:has(th:first-child input[type="checkbox"]) > tbody > tr > td:nth-child(1) {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    text-align: center !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* 第二欄（標題／編號）：最大 120px，內容短時不強制撐滿；允許自然換行 */
  .cms-list-skin table.table-item:has(td:first-child input[type="checkbox"]) > thead > tr > th:nth-child(2),
  .cms-list-skin table.table-item:has(td:first-child input[type="checkbox"]) > tbody > tr > td:nth-child(2),
  .cms-list-skin table.table-item:has(th:first-child input[type="checkbox"]) > thead > tr > th:nth-child(2),
  .cms-list-skin table.table-item:has(th:first-child input[type="checkbox"]) > tbody > tr > td:nth-child(2),
  .page-content table.table-item:has(td:first-child input[type="checkbox"]) > thead > tr > th:nth-child(2),
  .page-content table.table-item:has(td:first-child input[type="checkbox"]) > tbody > tr > td:nth-child(2),
  .page-content table.table-item:has(th:first-child input[type="checkbox"]) > thead > tr > th:nth-child(2),
  .page-content table.table-item:has(th:first-child input[type="checkbox"]) > tbody > tr > td:nth-child(2) {
    width: auto !important;
    min-width: 0 !important;
    max-width: 120px !important;
    white-space: normal !important;   /* 覆蓋手機 td nowrap */
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.4 !important;
    text-align: left !important;
    vertical-align: middle !important;
  }

  /* 第二欄內連結也跟著換行，避免 a 把欄撐開 */
  .cms-list-skin table.table-item:has(td:first-child input[type="checkbox"]) > tbody > tr > td:nth-child(2) a,
  .cms-list-skin table.table-item:has(th:first-child input[type="checkbox"]) > tbody > tr > td:nth-child(2) a,
  .page-content table.table-item:has(td:first-child input[type="checkbox"]) > tbody > tr > td:nth-child(2) a,
  .page-content table.table-item:has(th:first-child input[type="checkbox"]) > tbody > tr > td:nth-child(2) a {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* 無 checkbox 的表：第二欄預設偏移（序號／較短欄） */
  .cms-list-skin table.table-item:not(:has(td:first-child input[type="checkbox"])):not(:has(th:first-child input[type="checkbox"])),
  .cms-detail-skin table.table:not(:has(td:first-child input[type="checkbox"])),
  .cms-detail-skin .chat-history > table,
  .page-content .widget-box table.table:not(:has(td:first-child input[type="checkbox"])) {
    --cms-sticky-col1: 72px;
  }

  .cms-list-skin table.table-item:not(:has(td:first-child input[type="checkbox"])):not(:has(th:first-child input[type="checkbox"])) > thead > tr > th:nth-child(1),
  .cms-list-skin table.table-item:not(:has(td:first-child input[type="checkbox"])):not(:has(th:first-child input[type="checkbox"])) > tbody > tr > td:nth-child(1),
  .cms-detail-skin table.table:not(:has(td:first-child input[type="checkbox"])) > thead > tr > th:nth-child(1),
  .cms-detail-skin table.table:not(:has(td:first-child input[type="checkbox"])) > tbody > tr > td:nth-child(1),
  .cms-detail-skin .chat-history > table > thead > tr > th:nth-child(1),
  .cms-detail-skin .chat-history > table > tbody > tr > td:nth-child(1),
  .page-content .widget-box table.table:not(:has(td:first-child input[type="checkbox"])) > thead > tr > th:nth-child(1),
  .page-content .widget-box table.table:not(:has(td:first-child input[type="checkbox"])) > tbody > tr > td:nth-child(1) {
    min-width: 72px !important;
  }
}
@media (max-width: 991px) {
  .cms-detail-skin > .page-header.header-button {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px !important;
    margin: 0 0 10px !important;
    background: var(--c-surface, #fdfcfa) !important;
    border: 1px solid var(--c-line, #eae7e1) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(20, 25, 40, .04) !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin > .page-header.header-button::before {
    display: none !important;
  }

  .cms-detail-skin > .page-header.header-button .table_left,
  .cms-detail-skin > .page-header.header-button .table_right,
  .cms-detail-skin > .page-header.header-button .table_perv {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .cms-detail-skin > .page-header.header-button .table_left > a,
  .cms-detail-skin > .page-header.header-button .table_left > .btn,
  .cms-detail-skin > .page-header.header-button .table_left > button,
  .cms-detail-skin > .page-header.header-button .table_right > a,
  .cms-detail-skin > .page-header.header-button .table_right > .btn,
  .cms-detail-skin > .page-header.header-button .table_right > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  /* 底部重複操作列：窄屏保留，同樣橫排 */
  .cms-detail-skin > .page-header.header-button ~ .page-header.header-button {
    display: block !important;
    margin-top: 12px !important;
  }
}
@media (min-width: 768px) and (max-width: 999px) {
  .cms-detail-skin .form-horizontal .form-group,
  .cms-detail-skin .tab-pane > .form-group {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ---------- 標題：單獨一行、居左 ---------- */
  .cms-detail-skin .form-horizontal .control-label,
  .cms-detail-skin .form-group > label.control-label,
  .cms-detail-skin .form-group > .control-label,
  .cms-detail-skin .form-horizontal .form-group > [class*="col-"].control-label {
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    text-align: left !important;
    padding: 0 0 2px !important;
    margin: 0 !important;
    order: -1 !important;
  }

  /* 控件欄：預設直向堆疊，子項可自行滿寬 */
  .cms-detail-skin .form-group > [class*="col-"],
  .cms-detail-skin .form-horizontal .form-group > [class*="col-"],
  .cms-detail-skin .form-group .col-sm-1,
  .cms-detail-skin .form-group .col-sm-2,
  .cms-detail-skin .form-group .col-sm-3,
  .cms-detail-skin .form-group .col-sm-4,
  .cms-detail-skin .form-group .col-sm-5,
  .cms-detail-skin .form-group .col-sm-6,
  .cms-detail-skin .form-group .col-sm-7,
  .cms-detail-skin .form-group .col-sm-8,
  .cms-detail-skin .form-group .col-sm-9,
  .cms-detail-skin .form-group .col-sm-10,
  .cms-detail-skin .form-group .col-sm-11,
  .cms-detail-skin .form-group .col-sm-12,
  .cms-detail-skin .form-horizontal .col-sm-1,
  .cms-detail-skin .form-horizontal .col-sm-2,
  .cms-detail-skin .form-horizontal .col-sm-3,
  .cms-detail-skin .form-horizontal .col-sm-4,
  .cms-detail-skin .form-horizontal .col-sm-5,
  .cms-detail-skin .form-horizontal .col-sm-6,
  .cms-detail-skin .form-horizontal .col-sm-7,
  .cms-detail-skin .form-horizontal .col-sm-8,
  .cms-detail-skin .form-horizontal .col-sm-9,
  .cms-detail-skin .form-horizontal .col-sm-10,
  .cms-detail-skin .form-horizontal .col-sm-11,
  .cms-detail-skin .form-horizontal .col-sm-12 {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .form-horizontal .form-group > [class*="col-"]:not(.control-label),
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label) {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  /* ---------- 一行一個：強制滿寬，提示／內容才顯示得全 ---------- */
  .cms-detail-skin .form-group input.form-control,
  .cms-detail-skin .form-group input[type="text"],
  .cms-detail-skin .form-group input[type="number"],
  .cms-detail-skin .form-group input[type="email"],
  .cms-detail-skin .form-group input[type="password"],
  .cms-detail-skin .form-group input[type="url"],
  .cms-detail-skin .form-group input[type="tel"],
  .cms-detail-skin .form-group textarea,
  .cms-detail-skin .form-group textarea.form-control,
  .cms-detail-skin .form-group select,
  .cms-detail-skin .form-group select.form-control,
  .cms-detail-skin .form-group .form-control:not([type="file"]),
  .cms-detail-skin .form-group .bootstrap-select,
  .cms-detail-skin .form-group .bootstrap-select > .dropdown-toggle,
  .cms-detail-skin .form-group .bootstrap-select > .btn,
  .cms-detail-skin .form-group .select2-container,
  .cms-detail-skin .form-group .chosen-container,
  .cms-detail-skin .form-group .chosen-container .chosen-single {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }

  /* file 不可被上行 display:block 蓋掉，否則按鈕/檔名又上下不齊 */
  .cms-detail-skin .form-group input[type="file"],
  .cms-detail-skin .form-group input.form-control[type="file"],
  .cms-detail-skin .form-group .form-control[type="file"] {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    height: 36px !important;
    line-height: normal !important;
  }
.radio_type4{margin-top: 10px!important;}
  .cms-detail-skin .tab-content select.form-control,
  .cms-detail-skin .tab-content select:not([multiple]) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* ---------- 開關 + NOTE：改橫排（僅 switch，勿匹配一般 checkbox） ---------- */
  .cms-detail-skin .form-group > [class*="col-"]:has(input.ace-switch),
  .cms-detail-skin .form-group > [class*="col-"]:has(.ace-switch) {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  .cms-detail-skin .form-group label:has(> input.ace-switch),
  .cms-detail-skin .form-group .ace-switch {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    display: inline-flex !important;
    margin: 0 !important;
    float: none !important;
  }

  .cms-detail-skin .form-group .help-block,
  .cms-detail-skin .form-group .help-inline,
  .cms-detail-skin .form-group .help-block.help-inline {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    float: none !important;
    white-space: normal !important;
  }

  /* ---------- 訓練專長等 checkbox 群組：橫向換行；「其他」勿被擠成直排 ---------- */
  .cms-detail-skin .form-group > [class*="col-"]:has(input.ace[type="checkbox"]:not(.ace-switch)),
  .cms-detail-skin .form-group > [class*="col-"]:has(> label input[type="checkbox"]),
  .cms-detail-skin .dashed-border-ggg:has(input[type="checkbox"]),
  .cms-detail-skin .dashed-border-ggg .form-group > [class*="col-"]:has(input[type="checkbox"]) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: flex-start !important;
    gap: 8px 12px !important;
  }

  .cms-detail-skin .form-group label:has(> input.ace[type="checkbox"]:not(.ace-switch)),
  .cms-detail-skin .form-group label:has(> input[type="checkbox"]:not(.ace-switch)),
  .cms-detail-skin .dashed-border-ggg label:has(> input[type="checkbox"]) {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: max-content !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    float: none !important;
    white-space: nowrap !important;
  }

  .cms-detail-skin .form-group label:has(> input[type="checkbox"]) > .lbl,
  .cms-detail-skin .dashed-border-ggg label:has(> input[type="checkbox"]) > .lbl {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  /* checkbox 與補充說明之間的文案節點（非 label 包住時） */
  .cms-detail-skin .form-group > [class*="col-"]:has(input[type="checkbox"]) > span:not(.input-group-addon):not(.help-block),
  .cms-detail-skin .dashed-border-ggg > span:not(.input-group-addon):not(.help-block) {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  /* 「其他…」：checkbox + 文案 + 補充 input 同一行（input 在 label 內） */
  .cms-detail-skin .form-group label:has(> input[type="checkbox"]):has(> input[type="text"]),
  .cms-detail-skin .form-group label:has(> input[type="checkbox"]):has(> input.form-control),
  .cms-detail-skin .dashed-border-ggg label:has(> input[type="checkbox"]):has(> input[type="text"]),
  .cms-detail-skin .dashed-border-ggg label:has(> input[type="checkbox"]):has(> input.form-control) {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .cms-detail-skin .form-group label:has(> input[type="checkbox"]) > input[type="text"],
  .cms-detail-skin .form-group label:has(> input[type="checkbox"]) > input.form-control,
  .cms-detail-skin .dashed-border-ggg label:has(> input[type="checkbox"]) > input[type="text"],
  .cms-detail-skin .dashed-border-ggg label:has(> input[type="checkbox"]) > input.form-control {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 120px !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* 「其他…」：補充 input 與 checkbox label 為兄弟時 */
  .cms-detail-skin .form-group > [class*="col-"]:has(input.ace[type="checkbox"]:not(.ace-switch)) > input[type="text"],
  .cms-detail-skin .form-group > [class*="col-"]:has(input.ace[type="checkbox"]:not(.ace-switch)) > input.form-control:not([type="checkbox"]):not([type="radio"]),
  .cms-detail-skin .form-group > [class*="col-"]:has(> label input[type="checkbox"]) > input[type="text"],
  .cms-detail-skin .form-group > [class*="col-"]:has(> label input[type="checkbox"]) > input.form-control:not([type="checkbox"]):not([type="radio"]),
  .cms-detail-skin .dashed-border-ggg > input[type="text"],
  .cms-detail-skin .dashed-border-ggg > input.form-control {
    flex: 1 1 200px !important;
    width: auto !important;
    min-width: 140px !important;
    max-width: 100% !important;
  }

  /* 普通操作按鈕：依內容寬；不要誤傷 bootstrap-select 的 .btn */
  .cms-detail-skin .form-group > [class*="col-"] > .btn,
  .cms-detail-skin .form-group > [class*="col-"] > a.btn,
  .cms-detail-skin .form-group > [class*="col-"] > button.btn,
  .cms-detail-skin .form-group > [class*="col-"] > .btn-group:not(.bootstrap-select),
  .cms-detail-skin .form-group > [class*="col-"] > .btn-group-others {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    display: inline-flex !important;
    margin: 0 !important;
    float: none !important;
    white-space: nowrap !important;
  }

  /* ---------- 「順序」等 radio chip：橫排一行 ---------- */
  .cms-detail-skin .form-group > [class*="col-"]:has(> label.radio-inline),
  .cms-detail-skin .form-group > [class*="col-"]:has(> .radio-inline),
  .cms-detail-skin .form-group > [class*="col-"]:has(.md-radio-inline),
  .cms-detail-skin .form-group > [class*="col-"]:has(.checkbox-btn-group-20251126) {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: flex-start !important;
    gap: 6px !important;
  }

  .cms-detail-skin .form-group .md-radio-inline.btn-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
  }

  .cms-detail-skin .form-group .md-radio-inline.btn-group > label {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  .cms-detail-skin label.radio-inline,
  .cms-detail-skin .form-group .radio-inline,
  .cms-detail-skin .radio-inline {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  .cms-detail-skin .radio-inline input[type="radio"].ace + .lbl {
    flex: 0 0 auto !important;
    min-width: 2.75em !important;
    width: auto !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .cms-detail-skin .checkbox-btn-group-20251126 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .cms-detail-skin .checkbox-btn-group-20251126 .checkbox-btn-20251126 {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* ---------- 鄉鎮區號：縣市 + 區 + 郵遞區號 同一行 ---------- */
  .cms-detail-skin .twzipcode,
  .cms-detail-skin .address-item .twzipcode,
  .cms-detail-skin #data_twzipcode.twzipcode {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .cms-detail-skin .form-group:has(.zipcode_select) > [class*="col-"]:not(.control-label),
  .cms-detail-skin .form-group:has(select.zipcode_select) > [class*="col-"]:not(.control-label),
  .cms-detail-skin .form-group:has(.twzipcode) > [class*="col-"]:not(.control-label),
  .cms-detail-skin .form-group:has(input.zipcode) > [class*="col-"]:not(.control-label),
  .cms-detail-skin .form-group > [class*="col-"]:has(> select ~ select ~ input),
  .cms-detail-skin .form-group > [class*="col-"]:has(> select ~ select ~ .form-control),
  .cms-detail-skin .form-group > [class*="col-"]:has(> .bootstrap-select ~ .bootstrap-select ~ input),
  .cms-detail-skin .form-group > [class*="col-"]:has(> .bootstrap-select ~ .bootstrap-select ~ .form-control) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .cms-detail-skin .twzipcode .twzipcodeBox,
  .cms-detail-skin .address-item select.twzipcodeBox,
  .cms-detail-skin .twzipcode select.county,
  .cms-detail-skin .twzipcode select.district,
  .cms-detail-skin .address-item .twzipcode select.county,
  .cms-detail-skin .address-item .twzipcode select.district,
  .cms-detail-skin #data_twzipcode select.county,
  .cms-detail-skin #data_twzipcode select.district,
  .cms-detail-skin .twzipcode > select:nth-of-type(1),
  .cms-detail-skin .twzipcode > select:nth-of-type(2),
  .cms-detail-skin .twzipcode > .bootstrap-select,
  .cms-detail-skin .form-group:has(.zipcode_select) select,
  .cms-detail-skin .form-group:has(.zipcode_select) .zipcode_select,
  .cms-detail-skin .form-group:has(.zipcode_select) .bootstrap-select,
  .cms-detail-skin .form-group:has(input.zipcode) > [class*="col-"] > select,
  .cms-detail-skin .form-group:has(input.zipcode) > [class*="col-"] > .bootstrap-select,
  .cms-detail-skin .form-group > [class*="col-"]:has(> select ~ select ~ input) > select,
  .cms-detail-skin .form-group > [class*="col-"]:has(> select ~ select ~ .form-control) > select,
  .cms-detail-skin .form-group > [class*="col-"]:has(> .bootstrap-select ~ .bootstrap-select ~ input) > .bootstrap-select,
  .cms-detail-skin .form-group > [class*="col-"]:has(> .bootstrap-select ~ .bootstrap-select ~ .form-control) > .bootstrap-select {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    display: block !important;
  }

  .cms-detail-skin .twzipcode > .bootstrap-select > .dropdown-toggle,
  .cms-detail-skin .twzipcode > .bootstrap-select > .btn,
  .cms-detail-skin .form-group > [class*="col-"]:has(> .bootstrap-select ~ .bootstrap-select ~ input) > .bootstrap-select > .btn,
  .cms-detail-skin .form-group > [class*="col-"]:has(> .bootstrap-select ~ .bootstrap-select ~ .form-control) > .bootstrap-select > .btn,
  .cms-detail-skin .form-group:has(.zipcode_select) .bootstrap-select > .btn {
    width: 100% !important;
    max-width: 100% !important;
  }

  .cms-detail-skin .twzipcode input.zipcode,
  .cms-detail-skin .address-item .twzipcode input.zipcode,
  .cms-detail-skin #data_twzipcode input.zipcode,
  .cms-detail-skin .form-group input.zipcode,
  .cms-detail-skin .form-group:has(.zipcode_select) input.zipcode,
  .cms-detail-skin .form-group:has(input.zipcode) input.zipcode,
  .cms-detail-skin .twzipcode > input[type="text"],
  .cms-detail-skin .twzipcode > input.form-control,
  .cms-detail-skin .form-group > [class*="col-"]:has(> select ~ select ~ input) > input,
  .cms-detail-skin .form-group > [class*="col-"]:has(> select ~ select ~ .form-control) > input,
  .cms-detail-skin .form-group > [class*="col-"]:has(> .bootstrap-select ~ .bootstrap-select ~ input) > input,
  .cms-detail-skin .form-group > [class*="col-"]:has(> .bootstrap-select ~ .bootstrap-select ~ .form-control) > input {
    flex: 0 0 96px !important;
    width: 96px !important;
    min-width: 80px !important;
    max-width: 120px !important;
    margin: 0 !important;
  }

  .cms-detail-skin .twzipcode > .select2-container,
  .cms-detail-skin .twzipcode > .chosen-container,
  .cms-detail-skin .form-group:has(.zipcode_select) > [class*="col-"] > .select2-container,
  .cms-detail-skin .form-group:has(.zipcode_select) > [class*="col-"] > .chosen-container,
  .cms-detail-skin .form-group:has(input.zipcode) > [class*="col-"] > .select2-container,
  .cms-detail-skin .form-group:has(input.zipcode) > [class*="col-"] > .chosen-container {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* 詳細地址（非郵遞區號）維持滿寬 */
  .cms-detail-skin .form-group:has(.twzipcode) input.form-control:not(.zipcode),
  .cms-detail-skin .form-group:has(.zipcode_select) input.form-control[type="text"]:not(.zipcode) {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---------- 活動時間(起迄)：起 + 箭頭/分隔 + 迄 同一行 ---------- */
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> input ~ input),
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .form-control ~ .form-control),
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> input ~ .input-group-addon ~ input),
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .form-control ~ span ~ .form-control),
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .input-group ~ .input-group) {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> input ~ input) > input,
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .form-control ~ .form-control) > .form-control,
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> input ~ .input-group-addon ~ input) > input,
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .form-control ~ span ~ .form-control) > .form-control,
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .input-group ~ .input-group) > .input-group {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> input ~ input) > span:not(.help-block),
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> input ~ input) > i,
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> input ~ input) > .input-group-addon,
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .form-control ~ .form-control) > span:not(.help-block),
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .form-control ~ .form-control) > i,
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .form-control ~ .form-control) > .input-group-addon,
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .form-control ~ span ~ .form-control) > span:not(.help-block) {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    float: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    align-self: center !important;
  }

  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> input ~ input) > .help-block,
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .form-control ~ .form-control) > .help-block,
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .input-group ~ .input-group) > .help-block {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .cms-detail-skin .form-group .input-group {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: separate !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
  }

  .cms-detail-skin .form-group .input-group > .form-control,
  .cms-detail-skin .form-group .input-group > input {
    display: table-cell !important;
    width: 100% !important;
    float: none !important;
  }

  .cms-detail-skin .form-group .input-group > .input-group-addon,
  .cms-detail-skin .form-group .input-group > .input-group-btn {
    display: table-cell !important;
    width: 1% !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    float: none !important;
  }

  .cms-detail-skin .form-group .input-group-btn > .btn {
    margin: 0 !important;
    height: 36px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 生日：日期群組 + 日曆圖示 + 年齡文案同一行、垂直置中 */
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .input-group ~ span:not(.help-block):not(.input-group-addon)),
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .form-control ~ .input-group-addon),
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> input.form-control ~ .input-group-addon),
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .input-group.date),
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .date-picker) {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .input-group ~ span:not(.help-block):not(.input-group-addon)) > .input-group {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: calc(100% - 4.5em) !important;
  }

  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .form-control ~ .input-group-addon) > .form-control,
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> input.form-control ~ .input-group-addon) > input.form-control {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .form-control ~ .input-group-addon) > .input-group-addon,
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> input.form-control ~ .input-group-addon) > .input-group-addon {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    margin: 0 0 0 -1px !important;
    float: none !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--rad-sm) !important;
    border-bottom-right-radius: var(--rad-sm) !important;
  }

  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .input-group ~ span:not(.help-block):not(.input-group-addon)) > span:not(.help-block):not(.input-group-addon),
  .cms-detail-skin .form-group > [class*="col-"]:not(.control-label):has(> .form-control ~ .input-group-addon) > span:not(.input-group-addon):not(.help-block) {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
    line-height: 36px !important;
  }

  /* 起 / 分隔 / 迄 各占一個 col-*：三個內容欄改橫排 */
  .cms-detail-skin .form-horizontal .form-group:has(> [class*="col-"]:not(.control-label) + [class*="col-"]:not(.control-label) + [class*="col-"]:not(.control-label)):has(input.form-control):not(:has(textarea)):not(:has(.twzipcode)):not(:has(.zipcode_select)):not(:has(input.zipcode)) {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .cms-detail-skin .form-horizontal .form-group:has(> [class*="col-"]:not(.control-label) + [class*="col-"]:not(.control-label) + [class*="col-"]:not(.control-label)):has(input.form-control):not(:has(textarea)):not(:has(.twzipcode)):not(:has(.zipcode_select)):not(:has(input.zipcode)) > .control-label,
  .cms-detail-skin .form-horizontal .form-group:has(> [class*="col-"]:not(.control-label) + [class*="col-"]:not(.control-label) + [class*="col-"]:not(.control-label)):has(input.form-control):not(:has(textarea)):not(:has(.twzipcode)):not(:has(.zipcode_select)):not(:has(input.zipcode)) > [class*="col-"].control-label {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  .cms-detail-skin .form-horizontal .form-group:has(> [class*="col-"]:not(.control-label) + [class*="col-"]:not(.control-label) + [class*="col-"]:not(.control-label)):has(input.form-control):not(:has(textarea)):not(:has(.twzipcode)):not(:has(.zipcode_select)):not(:has(input.zipcode)) > [class*="col-"]:not(.control-label) {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .cms-detail-skin .form-horizontal .form-group:has(> [class*="col-"]:not(.control-label) + [class*="col-"]:not(.control-label) + [class*="col-"]:not(.control-label)):has(input.form-control):not(:has(textarea)) > .col-sm-1,
  .cms-detail-skin .form-horizontal .form-group:has(> [class*="col-"]:not(.control-label) + [class*="col-"]:not(.control-label) + [class*="col-"]:not(.control-label)):has(input.form-control):not(:has(textarea)) > .col-xs-1,
  .cms-detail-skin .form-horizontal .form-group:has(> [class*="col-"]:not(.control-label) + [class*="col-"]:not(.control-label) + [class*="col-"]:not(.control-label)):has(input.form-control):not(:has(textarea)) > [class*="col-"]:not(.control-label):not(:has(input)):not(:has(.form-control)) {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }
}
@media (max-width: 999px) {
  /* ---------- 專業經歷：自 + 年份下拉 + 開始… + checkbox（勿被 select 滿寬拆成三行） ---------- */
  .cms-detail-skin #experience_box {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .form-group > [class*="col-"]:has(.coach-experience-row),
  .cms-detail-skin .form-group > [class*="col-"]:has(.recruit-select.experience) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 8px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .coach-experience-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.65;
  }

  .cms-detail-skin .coach-experience-row .recruit-select.experience,
  .cms-detail-skin .form-group .recruit-select.experience,
  .cms-detail-skin .coach-experience-row > select,
  .cms-detail-skin .form-group > [class*="col-"]:has(.recruit-select.experience) > select.recruit-select,
  .cms-detail-skin .form-group > [class*="col-"]:has(.recruit-select.experience) > select.experience {
    float: none !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: 5.5em !important;
    min-width: 5.2em !important;
    max-width: 6.5em !important;
    margin: 0 2px !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .coach-experience-row .coach-years-text,
  .cms-detail-skin .coach-experience-row > span:not(.coach-want-comma) {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    color: #6b7280;
    font-size: 13px;
  }

  .cms-detail-skin .coach-experience-row .coach-want-inline,
  .cms-detail-skin .form-group > [class*="col-"]:has(.recruit-select.experience) label:has(> input[type="checkbox"]) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: max-content !important;
    margin: 0 !important;
    font-weight: normal !important;
    white-space: nowrap !important;
  }

  .cms-detail-skin .coach-experience-row .coach-want-inline input[type="checkbox"] {
    margin: 0 !important;
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
}
@media (max-width: 767px) {
  /* 手機：自 + 年份 + 開始 第一行；年資說明與「我想當教練」各佔一行 */
  .cms-detail-skin #experience_box {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }

  .cms-detail-skin .coach-experience-row {
    gap: 6px 4px !important;
    font-size: 14px;
  }

  .cms-detail-skin .coach-experience-row .recruit-select.experience,
  .cms-detail-skin .form-group .recruit-select.experience {
    width: 5.2em !important;
    min-width: 5.2em !important;
    max-width: 5.8em !important;
    height: 32px;
    padding: 2px 6px;
  }

  .cms-detail-skin .coach-experience-row .coach-years-text {
    flex: 1 0 100% !important;
    width: 100% !important;
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.4;
    font-size: 12.5px;
  }

  .cms-detail-skin .coach-experience-row .coach-want-inline {
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-top: 8px !important;
    border-top: 1px dashed #e8eaee;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .coach-experience-row .coach-want-comma {
    display: none !important;
  }
}
@media (max-width: 999px) {
  /* ---------- 第 3 欄起壓到固定欄下面 ---------- */
  .cms-list-skin table.table-item > thead > tr > th:nth-child(n+3),
  .cms-list-skin table.table-item > tbody > tr > td:nth-child(n+3),
  .cms-detail-skin table.table > thead > tr > th:nth-child(n+3),
  .cms-detail-skin table.table > tbody > tr > td:nth-child(n+3),
  .cms-detail-skin .chat-history > table > thead > tr > th:nth-child(n+3),
  .cms-detail-skin .chat-history > table > tbody > tr > td:nth-child(n+3),
  .page-content table.table-item > thead > tr > th:nth-child(n+3),
  .page-content table.table-item > tbody > tr > td:nth-child(n+3),
  .page-content .widget-box table.table > thead > tr > th:nth-child(n+3),
  .page-content .widget-box table.table > tbody > tr > td:nth-child(n+3) {
    position: relative !important;
    z-index: 0 !important;
  }

  /* 操作鈕壓回固定欄下方；展開中的選單列除外（否則留言時間會蓋住修改/刪除） */
  .cms-list-skin table.table-item > tbody > tr > td:nth-child(n+3) .btn,
  .cms-list-skin table.table-item > tbody > tr > td:nth-child(n+3) .btn-group:not(.open),
  .cms-list-skin table.table-item > tbody > tr > td:nth-child(n+3) a,
  .page-content table.table-item > tbody > tr > td:nth-child(n+3) .btn,
  .page-content table.table-item > tbody > tr > td:nth-child(n+3) .btn-group:not(.open),
  .page-content table.table-item > tbody > tr > td:nth-child(n+3) a {
    z-index: 0 !important;
  }

  .cms-list-skin table.table-item > tbody > tr:has(.btn-group.open) > td:nth-child(n+3),
  .cms-list-skin table.table-item > tbody > tr:has(.dropdown.open) > td:nth-child(n+3),
  .page-content table.table-item > tbody > tr:has(.btn-group.open) > td:nth-child(n+3),
  .page-content table.table-item > tbody > tr:has(.dropdown.open) > td:nth-child(n+3),
  .cms-list-skin table.table-item > tbody > tr > td:nth-child(n+3):has(.btn-group.open),
  .cms-list-skin table.table-item > tbody > tr > td:nth-child(n+3):has(.dropdown.open),
  .page-content table.table-item > tbody > tr > td:nth-child(n+3):has(.btn-group.open),
  .page-content table.table-item > tbody > tr > td:nth-child(n+3):has(.dropdown.open) {
    z-index: 40 !important;
    overflow: visible !important;
  }

  .cms-list-skin table.table-item > tbody > tr > td:nth-child(n+3) .btn-group.open,
  .cms-list-skin table.table-item > tbody > tr > td:nth-child(n+3) .dropdown.open,
  .page-content table.table-item > tbody > tr > td:nth-child(n+3) .btn-group.open,
  .page-content table.table-item > tbody > tr > td:nth-child(n+3) .dropdown.open {
    z-index: 40 !important;
    position: relative !important;
  }

  .cms-list-skin table.table-item > tbody > tr > td:nth-child(n+3) .dropdown-menu,
  .page-content table.table-item > tbody > tr > td:nth-child(n+3) .dropdown-menu {
    z-index: 3000 !important;
    background: var(--c-surface, #fff) !important;
  }

  /* ---------- 固定欄：實心底 + 合成層 + 更高 z-index ---------- */
  .cms-list-skin table.table-item > thead > tr > th:nth-child(1),
  .cms-list-skin table.table-item > tbody > tr > td:nth-child(1),
  .cms-detail-skin table.table > thead > tr > th:nth-child(1),
  .cms-detail-skin table.table > tbody > tr > td:nth-child(1),
  .cms-detail-skin .chat-history > table > thead > tr > th:nth-child(1),
  .cms-detail-skin .chat-history > table > tbody > tr > td:nth-child(1),
  .page-content table.table-item > thead > tr > th:nth-child(1),
  .page-content table.table-item > tbody > tr > td:nth-child(1),
  .page-content .widget-box table.table > thead > tr > th:nth-child(1),
  .page-content .widget-box table.table > tbody > tr > td:nth-child(1) {
    z-index: 6 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    background-clip: padding-box !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: translate3d(0, 0, 0) !important;
    isolation: isolate !important;
    /* 向右多蓋一截，堵住與第 2 欄之間的縫 */
    box-shadow: 6px 0 0 0 #ffffff !important;
  }

  .cms-list-skin table.table-item > thead > tr > th:nth-child(2),
  .cms-list-skin table.table-item > tbody > tr > td:nth-child(2),
  .cms-detail-skin table.table > thead > tr > th:nth-child(2),
  .cms-detail-skin table.table > tbody > tr > td:nth-child(2),
  .cms-detail-skin .chat-history > table > thead > tr > th:nth-child(2),
  .cms-detail-skin .chat-history > table > tbody > tr > td:nth-child(2),
  .page-content table.table-item > thead > tr > th:nth-child(2),
  .page-content table.table-item > tbody > tr > td:nth-child(2),
  .page-content .widget-box table.table > thead > tr > th:nth-child(2),
  .page-content .widget-box table.table > tbody > tr > td:nth-child(2) {
    z-index: 5 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    background-clip: padding-box !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: translate3d(0, 0, 0) !important;
    isolation: isolate !important;
    /* 左側補縫 + 右側提示還可橫滑 */
    box-shadow:
      -6px 0 0 0 #ffffff,
      8px 0 10px -6px rgba(20, 25, 40, 0.3) !important;
  }

  /* 表頭固定欄用次表面色（與列表皮一致） */
  .cms-list-skin table.table-item > thead > tr > th:nth-child(1),
  .cms-list-skin table.table-item > thead > tr > th:nth-child(2),
  .cms-detail-skin table.table > thead > tr > th:nth-child(1),
  .cms-detail-skin table.table > thead > tr > th:nth-child(2),
  .cms-detail-skin .chat-history > table > thead > tr > th:nth-child(1),
  .cms-detail-skin .chat-history > table > thead > tr > th:nth-child(2),
  .page-content table.table-item > thead > tr > th:nth-child(1),
  .page-content table.table-item > thead > tr > th:nth-child(2),
  .page-content .widget-box table.table > thead > tr > th:nth-child(1),
  .page-content .widget-box table.table > thead > tr > th:nth-child(2) {
    z-index: 8 !important;
    background: #f7f5f1 !important;
    background-color: #f7f5f1 !important;
  }

  .cms-list-skin table.table-item > thead > tr > th:nth-child(1),
  .cms-detail-skin table.table > thead > tr > th:nth-child(1),
  .cms-detail-skin .chat-history > table > thead > tr > th:nth-child(1),
  .page-content table.table-item > thead > tr > th:nth-child(1),
  .page-content .widget-box table.table > thead > tr > th:nth-child(1) {
    box-shadow: 6px 0 0 0 #f7f5f1 !important;
  }

  .cms-list-skin table.table-item > thead > tr > th:nth-child(2),
  .cms-detail-skin table.table > thead > tr > th:nth-child(2),
  .cms-detail-skin .chat-history > table > thead > tr > th:nth-child(2),
  .page-content table.table-item > thead > tr > th:nth-child(2),
  .page-content .widget-box table.table > thead > tr > th:nth-child(2) {
    box-shadow:
      -6px 0 0 0 #f7f5f1,
      8px 0 10px -6px rgba(20, 25, 40, 0.3) !important;
  }

  /* hover 列：固定欄同步底色，避免滑過露出底字 */
  .cms-list-skin table.table-item.table-hover > tbody > tr:hover > td:nth-child(1),
  .cms-list-skin table.table-item.table-hover > tbody > tr:hover > td:nth-child(2),
  .cms-list-skin table.table-hover > tbody > tr:hover > td:nth-child(1),
  .cms-list-skin table.table-hover > tbody > tr:hover > td:nth-child(2),
  .page-content table.table-hover > tbody > tr:hover > td:nth-child(1),
  .page-content table.table-hover > tbody > tr:hover > td:nth-child(2) {
    background: #f5eeee !important;
    background-color: #f5eeee !important;
  }

  .cms-list-skin table.table-item.table-hover > tbody > tr:hover > td:nth-child(1),
  .cms-list-skin table.table-hover > tbody > tr:hover > td:nth-child(1),
  .page-content table.table-hover > tbody > tr:hover > td:nth-child(1) {
    box-shadow: 6px 0 0 0 #f5eeee !important;
  }

  .cms-list-skin table.table-item.table-hover > tbody > tr:hover > td:nth-child(2),
  .cms-list-skin table.table-hover > tbody > tr:hover > td:nth-child(2),
  .page-content table.table-hover > tbody > tr:hover > td:nth-child(2) {
    box-shadow:
      -6px 0 0 0 #f5eeee,
      8px 0 10px -6px rgba(20, 25, 40, 0.3) !important;
  }

  /* ---------- 偽元素實心遮罩（捲動合成時仍擋住後欄文字） ---------- */
  .cms-list-skin table.table-item > thead > tr > th:nth-child(1)::before,
  .cms-list-skin table.table-item > thead > tr > th:nth-child(2)::before,
  .cms-list-skin table.table-item > tbody > tr > td:nth-child(1)::before,
  .cms-list-skin table.table-item > tbody > tr > td:nth-child(2)::before,
  .cms-detail-skin table.table > thead > tr > th:nth-child(1)::before,
  .cms-detail-skin table.table > thead > tr > th:nth-child(2)::before,
  .cms-detail-skin table.table > tbody > tr > td:nth-child(1)::before,
  .cms-detail-skin table.table > tbody > tr > td:nth-child(2)::before,
  .cms-detail-skin .chat-history > table > thead > tr > th:nth-child(1)::before,
  .cms-detail-skin .chat-history > table > thead > tr > th:nth-child(2)::before,
  .cms-detail-skin .chat-history > table > tbody > tr > td:nth-child(1)::before,
  .cms-detail-skin .chat-history > table > tbody > tr > td:nth-child(2)::before,
  .page-content table.table-item > thead > tr > th:nth-child(1)::before,
  .page-content table.table-item > thead > tr > th:nth-child(2)::before,
  .page-content table.table-item > tbody > tr > td:nth-child(1)::before,
  .page-content table.table-item > tbody > tr > td:nth-child(2)::before,
  .page-content .widget-box table.table > thead > tr > th:nth-child(1)::before,
  .page-content .widget-box table.table > thead > tr > th:nth-child(2)::before,
  .page-content .widget-box table.table > tbody > tr > td:nth-child(1)::before,
  .page-content .widget-box table.table > tbody > tr > td:nth-child(2)::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background-color: inherit !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }

  /* checkbox 首欄：略加大第 2 欄 left，減少兩欄之間露縫（寧可微疊也不留縫） */
  .cms-list-skin table.table-item:has(td:first-child input[type="checkbox"]),
  .cms-list-skin table.table-item:has(th:first-child input[type="checkbox"]),
  .page-content table.table-item:has(td:first-child input[type="checkbox"]),
  .page-content table.table-item:has(th:first-child input[type="checkbox"]) {
    --cms-sticky-col1: 48px;
  }
}
#navbar .ace-nav > li.admin-name > a.dropdown-toggle,
#navbar .navbar-header-phone .admin-user > a.dropdown-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

#navbar .ace-nav > li.admin-name .user-info,
#navbar .ace-nav > li.admin-name .dropdown-toggle .user-info,
#navbar .navbar-header-phone .admin-user .user-info,
#navbar .navbar-header-phone .admin-user p {
  position: static !important;
  top: 0 !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  height: auto !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  vertical-align: middle !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 9em !important;
}

#navbar .ace-nav > li.admin-name > a > .fa-user,
#navbar .navbar-header-phone .admin-user > a > .fa-user {
  align-self: center !important;
  flex: none !important;
  line-height: 1 !important;
  margin: 0 !important;
  position: static !important;
  top: 0 !important;
}

#navbar .ace-nav > li.admin-name .fa-caret-down,
#navbar .ace-nav > li.admin-name > a > .fa-caret-down,
#navbar .ace-nav > li.admin-name > a > .ace-icon.fa-caret-down,
#navbar .navbar-header-phone .admin-user .fa-caret-down,
#navbar .navbar-header-phone .admin-user > a > .fa-caret-down,
#navbar .navbar-header-phone .admin-user > a > .ace-icon.fa-caret-down {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  flex: none !important;
  position: static !important;
  top: 0 !important;
  bottom: auto !important;
  margin: 0 0 0 4px !important;
  padding: 0 !important;
  width: 12px !important;
  height: 12px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  transform: none !important;
  float: none !important;
}

/* ---------- 451–540 / ≤360：關掉 Ace 把名字絕對定位的「窄屏特殊布局」 ---------- */
@media (min-width: 451px) and (max-width: 540px), (max-width: 360px) {
  #navbar.navbar:not(.navbar-collapse) .navbar-buttons .user-menu,
  #navbar .navbar-buttons .user-menu,
  #navbar .ace-nav > li.admin-name .user-menu {
    padding-top: 6px !important;
  }

  #navbar.navbar:not(.navbar-collapse) .navbar-buttons .user-info,
  #navbar .navbar-buttons .user-info,
  #navbar .ace-nav > li.admin-name .user-info,
  #navbar .ace-nav > li.admin-name.open .user-info,
  #navbar .ace-nav > li.open .user-info,
  #navbar li.open .user-info {
    position: static !important;
    display: inline-flex !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    right: auto !important;
    left: auto !important;
    top: 0 !important;
    z-index: auto !important;
    width: auto !important;
    max-width: 7.5em !important;
    height: auto !important;
    line-height: 1 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    text-align: left !important;
    vertical-align: middle !important;
    color: #1c2230 !important;
    font-size: 12.5px !important;
    cursor: pointer !important;
    transform: none !important;
  }

  /* 此區間仍用右側桌機版使用者鈕；手機版 phone 鈕保持隱藏（與 451–991 一致） */
  #navbar .navbar-header-phone {
    display: none !important;
  }

  #navbar .ace-nav > li.admin-name {
    display: flex !important;
    align-items: center !important;
  }

  #navbar .ace-nav > li.admin-name > a.dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
  }

  /* 窄屏時右側「首頁」徽章可收，避免與姓名搶寬把頭部擠換行 */
  #navbar .ace-nav > li.to-web-home {
    display: none !important;
  }

  #navbar .ace-nav {
    flex-wrap: nowrap !important;
  }

  #navbar .navbar-container {
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }
}

/* ≤450 仍走手機版使用者鈕；確保 caret 也置中 */
@media (max-width: 450px) {
  #navbar .navbar-header-phone .admin-user > a.dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
  }

  #navbar .navbar-header-phone .admin-user .fa-caret-down {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    line-height: 1 !important;
    height: 12px !important;
    width: 12px !important;
    margin: 0 0 0 4px !important;
    top: 0 !important;
    transform: none !important;
  }
}
@media (max-width: 991px) {
  .cms-list-skin .search-form-other .search-button-block {
    float: none !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  /* 若每個按鈕外包一層 div/p，攤平到同一 flex 行 */
  .cms-list-skin .search-form-other .search-button-block > div,
  .cms-list-skin .search-form-other .search-button-block > p,
  .cms-list-skin .search-form-other .search-button-block > span:not(.btn) {
    display: contents !important;
  }

  .cms-list-skin .search-form-other .search-button-block > .btn,
  .cms-list-skin .search-form-other .search-button-block > button,
  .cms-list-skin .search-form-other .search-button-block > a,
  .cms-list-skin .search-form-other .search-button-block .btn,
  .cms-list-skin .search-form-other .search-button-block button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  .cms-list-skin .search-form-other .search-button-block > br,
  .cms-list-skin .search-form-other .search-button-block .clearfix {
    display: none !important;
  }

  /* 少數頁把按鈕各自塞進 .search-items（width:100%）→ 合併成橫排 */
  .cms-list-skin .search-form-other .search-items:has(> .btn):not(:has(input)):not(:has(select)),
  .cms-list-skin .search-form-other .search-items:has(> button.btn):not(:has(input)):not(:has(select)) {
    width: auto !important;
    flex: 0 0 auto !important;
    margin-right: 8px !important;
    clear: none !important;
  }
}

/* ============================================================
   檔尾覆蓋：原生 file 按鈕/檔名垂直置中（避免被前面 form-control display:block 蓋掉）
   ============================================================ */
.page-content input[type="file"],
.page-content input.form-control[type="file"],
.cms-detail-skin input[type="file"],
.cms-detail-skin .form-group input[type="file"],
.cms-detail-skin .form-group input.form-control[type="file"] {
    display: flex !important;
    align-items: center !important;
    height: 36px !important;
    width: auto !important;
    max-width: 100% !important;
    line-height: normal !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.page-content input[type="file"]::-webkit-file-upload-button,
.cms-detail-skin input[type="file"]::-webkit-file-upload-button {
    -webkit-appearance: none !important;
    height: 36px !important;
    margin: 0 10px 0 0 !important;
    padding: 0 14px !important;
    line-height: 34px !important;
    vertical-align: middle !important;
    border: 1px solid var(--c-line2) !important;
    border-radius: var(--rad-sm) !important;
    background: var(--c-surface2) !important;
    color: var(--c-ink2) !important;
    font-size: 13px !important;
    cursor: pointer;
}
.page-content input[type="file"]::file-selector-button,
.cms-detail-skin input[type="file"]::file-selector-button {
    appearance: none !important;
    height: 36px !important;
    margin: 0 10px 0 0 !important;
    padding: 0 14px !important;
    line-height: 34px !important;
    vertical-align: middle !important;
    border: 1px solid var(--c-line2) !important;
    border-radius: var(--rad-sm) !important;
    background: var(--c-surface2) !important;
    color: var(--c-ink2) !important;
    font-size: 13px !important;
    cursor: pointer;
}
.fileinput-filename{vertical-align: -1px!important;margin-left: 5px;}

/* ============================================================
   詳情頁「項目」內嵌子表手機優化（排序 / 序號 / 細項）
   根因：
     1) 頁面 overflow-x:hidden，表又比螢幕寬 → 裁切且滑不動
     2) 先前誤關捲動容器，又只匹配 table.table → 佈局沒變、更糟
   作法（≤767）：
     - 不依賴 .table class
     - 添加 / 搜尋直排滿寬
     - 表格改卡片，細項 input 滿寬（不再橫向溢出）
   ============================================================ */
@media (max-width: 767px) {
  /* 作用範圍：含「添加+搜尋+表」的表單列（避免動到 chat-history 等） */
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)):not(:has(.chat-history)):not(:has(.mod-log-table)),
  .cms-detail-skin .tab-pane > .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) {
    max-width: 100% !important;
    overflow-x: hidden !important; /* 卡片已收斂寬度，禁止再撐出頁面 */
    box-sizing: border-box !important;
  }

  /* 控件欄 / 灰框容器：直向堆疊 */
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) > [class*="col-"],
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) > div:not(.control-label) {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 內層灰框（包住 添加+搜尋+表） */
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) > [class*="col-"] > div:has(table),
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) > div > div:has(table) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* 添加鈕滿寬 */
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) > [class*="col-"] > .btn,
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) > [class*="col-"] > a.btn,
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) > [class*="col-"] > button.btn,
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) > [class*="col-"] > div:has(table) > .btn,
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) > [class*="col-"] > div:has(table) > a.btn,
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) > [class*="col-"] > div:has(table) > button.btn,
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) .btn-success {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* 搜尋框滿寬（含 placeholder 含「搜」） */
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) > [class*="col-"] > input[type="text"],
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) > [class*="col-"] > input[type="search"],
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) > [class*="col-"] > .form-control:not(textarea):not(select),
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) > [class*="col-"] > div:has(table) > input[type="text"],
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) > [class*="col-"] > div:has(table) > input[type="search"],
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) > [class*="col-"] > div:has(table) > .form-control:not(textarea):not(select),
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) input[placeholder*="搜"],
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) input[placeholder*="Search"] {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    height: 36px !important;
    box-sizing: border-box !important;
  }

  /* 搜尋旁清除鈕若包在 input-group */
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) .input-group:has(input[placeholder*="搜"]),
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) > [class*="col-"] > .input-group,
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) > [class*="col-"] > div:has(table) > .input-group {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* ---------- 表格 → 卡片（不要求 .table class）---------- */
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: visible !important;
    table-layout: auto !important;
  }

  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table thead {
    display: none !important;
  }

  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody {
    display: block !important;
    width: 100% !important;
  }

  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    padding: 12px !important;
    border: 1px solid var(--c-line, #eae7e1) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody tr:last-child {
    margin-bottom: 0 !important;
  }

  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    background: transparent !important;
    position: static !important;
    left: auto !important;
    box-shadow: none !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* 欄位小標：對應 排序 / 序號 / 細項（多欄時操作在最後） */
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody td::before {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-ink2, #59616f);
    margin-bottom: 4px;
    line-height: 1.3;
  }

  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody td:nth-child(1)::before { content: "排序"; }
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody td:nth-child(2)::before { content: "序號"; }
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody td:nth-child(3)::before { content: "細項"; }
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody td:nth-child(4)::before { content: "操作"; }
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody td:nth-child(n+5)::before { content: "欄位"; }

  /* 排序 + 序號同一行，節省高度 */
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px !important;
  }

  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody td:nth-child(1),
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody td:nth-child(2) {
    grid-column: auto;
  }

  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody td:nth-child(n+3) {
    grid-column: 1 / -1;
  }

  /* 細項 / 其他 input 滿寬，不再撐出螢幕 */
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody td input,
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody td select,
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody td textarea,
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody td .form-control {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody td .btn,
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody td a.btn,
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody td button.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table tbody td img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 取消此區 sticky，避免再把欄位壓扁 */
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table th,
  .cms-detail-skin .form-group:has(table):not(:has(.email-block)):not(:has(.del-btn-block)) table td {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
  }

  /* ---------- 兜底：不依賴 form-group，靠「添加+搜尋+表」灰框命中 ---------- */
  .cms-detail-skin div:has(> .btn-success):has(> input):has(> table),
  .cms-detail-skin div:has(> a.btn-success):has(> input):has(> table),
  .cms-detail-skin div:has(> .btn-success):has(> .input-group):has(> table),
  .cms-detail-skin div:has(> a.btn-success):has(> .input-group):has(> table),
  .page-content.cms-detail-skin div:has(> .btn-success):has(input[placeholder*="搜"]):has(table) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .cms-detail-skin div:has(> .btn-success):has(> input):has(> table) > .btn-success,
  .cms-detail-skin div:has(> a.btn-success):has(> input):has(> table) > a.btn-success,
  .cms-detail-skin div:has(> .btn-success):has(> .input-group):has(> table) > .btn-success,
  .cms-detail-skin div:has(> a.btn-success):has(> .input-group):has(> table) > a.btn-success,
  .page-content.cms-detail-skin div:has(> .btn-success):has(input[placeholder*="搜"]):has(table) > .btn-success,
  .page-content.cms-detail-skin div:has(> a.btn-success):has(input[placeholder*="搜"]):has(table) > a.btn-success {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin div:has(> .btn-success):has(> input):has(> table) > input,
  .cms-detail-skin div:has(> a.btn-success):has(> input):has(> table) > input,
  .cms-detail-skin div:has(> .btn-success):has(> .input-group):has(> table) > .input-group,
  .cms-detail-skin div:has(> a.btn-success):has(> .input-group):has(> table) > .input-group,
  .page-content.cms-detail-skin div:has(input[placeholder*="搜"]):has(table) > input[placeholder*="搜"],
  .page-content.cms-detail-skin div:has(input[placeholder*="搜"]):has(table) > .input-group:has(input[placeholder*="搜"]) {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin div:has(> .btn-success):has(> input):has(> table) > table,
  .cms-detail-skin div:has(> a.btn-success):has(> input):has(> table) > table,
  .cms-detail-skin div:has(> .btn-success):has(> .input-group):has(> table) > table,
  .cms-detail-skin div:has(> a.btn-success):has(> .input-group):has(> table) > table,
  .page-content.cms-detail-skin div:has(> .btn-success):has(input[placeholder*="搜"]):has(> table) > table,
  .page-content.cms-detail-skin div:has(> a.btn-success):has(input[placeholder*="搜"]):has(> table) > table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    margin: 0 !important;
  }

  .cms-detail-skin div:has(> .btn-success):has(> input):has(> table) > table thead,
  .cms-detail-skin div:has(> a.btn-success):has(> input):has(> table) > table thead,
  .cms-detail-skin div:has(> .btn-success):has(> .input-group):has(> table) > table thead,
  .cms-detail-skin div:has(> a.btn-success):has(> .input-group):has(> table) > table thead,
  .page-content.cms-detail-skin div:has(> .btn-success):has(input[placeholder*="搜"]):has(> table) > table thead,
  .page-content.cms-detail-skin div:has(> a.btn-success):has(input[placeholder*="搜"]):has(> table) > table thead {
    display: none !important;
  }

  .cms-detail-skin div:has(> .btn-success):has(> input):has(> table) > table tbody,
  .cms-detail-skin div:has(> a.btn-success):has(> input):has(> table) > table tbody,
  .cms-detail-skin div:has(> .btn-success):has(> .input-group):has(> table) > table tbody,
  .cms-detail-skin div:has(> a.btn-success):has(> .input-group):has(> table) > table tbody,
  .page-content.cms-detail-skin div:has(> .btn-success):has(input[placeholder*="搜"]):has(> table) > table tbody,
  .page-content.cms-detail-skin div:has(> a.btn-success):has(input[placeholder*="搜"]):has(> table) > table tbody {
    display: block !important;
    width: 100% !important;
  }

  .cms-detail-skin div:has(> .btn-success):has(> input):has(> table) > table tbody tr,
  .cms-detail-skin div:has(> a.btn-success):has(> input):has(> table) > table tbody tr,
  .cms-detail-skin div:has(> .btn-success):has(> .input-group):has(> table) > table tbody tr,
  .cms-detail-skin div:has(> a.btn-success):has(> .input-group):has(> table) > table tbody tr,
  .page-content.cms-detail-skin div:has(> .btn-success):has(input[placeholder*="搜"]):has(> table) > table tbody tr,
  .page-content.cms-detail-skin div:has(> a.btn-success):has(input[placeholder*="搜"]):has(> table) > table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    padding: 12px !important;
    border: 1px solid var(--c-line, #eae7e1) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin div:has(> .btn-success):has(> input):has(> table) > table tbody td,
  .cms-detail-skin div:has(> a.btn-success):has(> input):has(> table) > table tbody td,
  .cms-detail-skin div:has(> .btn-success):has(> .input-group):has(> table) > table tbody td,
  .cms-detail-skin div:has(> a.btn-success):has(> .input-group):has(> table) > table tbody td,
  .page-content.cms-detail-skin div:has(> .btn-success):has(input[placeholder*="搜"]):has(> table) > table tbody td,
  .page-content.cms-detail-skin div:has(> a.btn-success):has(input[placeholder*="搜"]):has(> table) > table tbody td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
    background: transparent !important;
    position: static !important;
    left: auto !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin div:has(> .btn-success):has(> input):has(> table) > table tbody td:nth-child(n+3),
  .cms-detail-skin div:has(> a.btn-success):has(> input):has(> table) > table tbody td:nth-child(n+3),
  .cms-detail-skin div:has(> .btn-success):has(> .input-group):has(> table) > table tbody td:nth-child(n+3),
  .cms-detail-skin div:has(> a.btn-success):has(> .input-group):has(> table) > table tbody td:nth-child(n+3),
  .page-content.cms-detail-skin div:has(> .btn-success):has(input[placeholder*="搜"]):has(> table) > table tbody td:nth-child(n+3),
  .page-content.cms-detail-skin div:has(> a.btn-success):has(input[placeholder*="搜"]):has(> table) > table tbody td:nth-child(n+3) {
    grid-column: 1 / -1;
  }

  .cms-detail-skin div:has(> .btn-success):has(> input):has(> table) > table tbody td::before,
  .cms-detail-skin div:has(> a.btn-success):has(> input):has(> table) > table tbody td::before,
  .cms-detail-skin div:has(> .btn-success):has(> .input-group):has(> table) > table tbody td::before,
  .cms-detail-skin div:has(> a.btn-success):has(> .input-group):has(> table) > table tbody td::before,
  .page-content.cms-detail-skin div:has(> .btn-success):has(input[placeholder*="搜"]):has(> table) > table tbody td::before,
  .page-content.cms-detail-skin div:has(> a.btn-success):has(input[placeholder*="搜"]):has(> table) > table tbody td::before {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-ink2, #59616f);
    margin-bottom: 4px;
  }

  .cms-detail-skin div:has(> .btn-success):has(table) > table tbody td:nth-child(1)::before,
  .cms-detail-skin div:has(> a.btn-success):has(table) > table tbody td:nth-child(1)::before,
  .page-content.cms-detail-skin div:has(input[placeholder*="搜"]):has(> table) > table tbody td:nth-child(1)::before { content: "排序"; }

  .cms-detail-skin div:has(> .btn-success):has(table) > table tbody td:nth-child(2)::before,
  .cms-detail-skin div:has(> a.btn-success):has(table) > table tbody td:nth-child(2)::before,
  .page-content.cms-detail-skin div:has(input[placeholder*="搜"]):has(> table) > table tbody td:nth-child(2)::before { content: "序號"; }

  .cms-detail-skin div:has(> .btn-success):has(table) > table tbody td:nth-child(3)::before,
  .cms-detail-skin div:has(> a.btn-success):has(table) > table tbody td:nth-child(3)::before,
  .page-content.cms-detail-skin div:has(input[placeholder*="搜"]):has(> table) > table tbody td:nth-child(3)::before { content: "細項"; }

  .cms-detail-skin div:has(> .btn-success):has(table) > table tbody td input,
  .cms-detail-skin div:has(> a.btn-success):has(table) > table tbody td input,
  .cms-detail-skin div:has(> .btn-success):has(table) > table tbody td .form-control,
  .cms-detail-skin div:has(> a.btn-success):has(table) > table tbody td .form-control,
  .page-content.cms-detail-skin div:has(input[placeholder*="搜"]):has(> table) > table tbody td input,
  .page-content.cms-detail-skin div:has(input[placeholder*="搜"]):has(> table) > table tbody td .form-control {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* 工具列包在 clearfix / 內層 div 時（btn、搜尋不是 table 的直接兄弟） */
  .cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]),
  .page-content.cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > div:not(:has(table)):has(.btn-success),
  .cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > .clearfix,
  .page-content.cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > div:not(:has(table)):has(.btn-success),
  .page-content.cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > .clearfix {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  .cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) .btn-success,
  .page-content.cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) .btn-success {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) input[placeholder*="搜"],
  .cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) .input-group:has(input[placeholder*="搜"]),
  .page-content.cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) input[placeholder*="搜"],
  .page-content.cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) .input-group:has(input[placeholder*="搜"]) {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table,
  .page-content.cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    margin: 0 !important;
  }

  .cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table thead,
  .page-content.cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table thead {
    display: none !important;
  }

  .cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody,
  .page-content.cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody {
    display: block !important;
    width: 100% !important;
  }

  .cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody tr,
  .page-content.cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    padding: 12px !important;
    border: 1px solid var(--c-line, #eae7e1) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody td,
  .page-content.cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
    background: transparent !important;
    position: static !important;
    left: auto !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  .cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody td:nth-child(n+3),
  .page-content.cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody td:nth-child(n+3) {
    grid-column: 1 / -1;
  }

  .cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody td::before,
  .page-content.cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody td::before {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-ink2, #59616f);
    margin-bottom: 4px;
  }

  .cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody td:nth-child(1)::before,
  .page-content.cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody td:nth-child(1)::before { content: "排序"; }

  .cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody td:nth-child(2)::before,
  .page-content.cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody td:nth-child(2)::before { content: "序號"; }

  .cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody td:nth-child(3)::before,
  .page-content.cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody td:nth-child(3)::before { content: "細項"; }

  .cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody td input,
  .cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody td .form-control,
  .page-content.cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody td input,
  .page-content.cms-detail-skin div:has(> table):has(.btn-success):has(input[placeholder*="搜"]) > table tbody td .form-control {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}
/* ============================================================
   列表頁手機卡片（≤767）— 已移除
   改回 pt2 的作法：手機維持表格＋橫向捲動，前兩欄（勾選／序號）
   用 position:sticky 釘住，見上方 --cms-sticky-col1 相關規則。
   ============================================================ */
.btn-info .fa-envelope{margin-right: 5px;}

/* ============================================================
   授課地點（adminTeachArea）手機端佈局（≤767）
   根因：area-header 橫排時標題被擠成直書、操作鈕與標題互壓；
         course-summary-bar 地址 chip 把「新增/綁定」拆斷；
         外層 .row 負邊距 + 地標 min-width 造成橫向捲軸。
   作法：標題獨佔一行恢復橫排；操作鈕 2×2 換行；地點卡分層；
         摘要列兩鈕並肩；消除橫向溢出。
   ============================================================ */
@media (max-width: 767px) {
  /* ---------- 0. 消除橫向捲軸 ---------- */
  .page-content:has(.coach-teach-area-ght68),
  .page-content:has(.coach-teach-area-ght68) .main-content-inner,
  .cms-list-skin:has(.coach-teach-area-ght68),
  .cms-detail-skin:has(.coach-teach-area-ght68) {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .page-content:has(.coach-teach-area-ght68) .page-header {
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .page-content:has(.coach-teach-area-ght68) .row,
  .cms-list-skin:has(.coach-teach-area-ght68) .row,
  .cms-detail-skin:has(.coach-teach-area-ght68) .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .page-content:has(.coach-teach-area-ght68) .row > [class*="col-"],
  .cms-list-skin:has(.coach-teach-area-ght68) .row > [class*="col-"],
  .cms-detail-skin:has(.coach-teach-area-ght68) .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-content:has(.coach-teach-area-ght68) .review-warning-box,
  .cms-detail-skin:has(.coach-teach-area-ght68) .review-warning-box {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    word-break: break-word;
  }

  .page-content:has(.coach-teach-area-ght68) .review-warning-box div[style*="min-width"],
  .cms-detail-skin:has(.coach-teach-area-ght68) .review-warning-box div[style*="min-width"] {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-content:has(.coach-teach-area-ght68) .review-warning-box div[style*="display:flex"],
  .cms-detail-skin:has(.coach-teach-area-ght68) .review-warning-box div[style*="display:flex"] {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-content:has(.coach-teach-area-ght68) .review-warning-box input.landmark-input,
  .page-content:has(.coach-teach-area-ght68) .review-warning-box .landmark-input,
  .cms-detail-skin:has(.coach-teach-area-ght68) .review-warning-box input.landmark-input,
  .cms-detail-skin:has(.coach-teach-area-ght68) .review-warning-box .landmark-input {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .page-content:has(.coach-teach-area-ght68) .review-warning-box strong[style*="width:80px"],
  .cms-detail-skin:has(.coach-teach-area-ght68) .review-warning-box strong[style*="width:80px"] {
    flex: 0 0 auto !important;
    width: 4.8em !important;
  }

  .page-content:has(.coach-teach-area-ght68) .review-warning-box div[style*="margin-left:80px"],
  .cms-detail-skin:has(.coach-teach-area-ght68) .review-warning-box div[style*="margin-left:80px"] {
    margin-left: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
  }

  .page-content:has(.coach-teach-area-ght68) .review-warning-box code,
  .cms-detail-skin:has(.coach-teach-area-ght68) .review-warning-box code {
    white-space: normal !important;
    word-break: break-all !important;
    font-size: 12px !important;
  }

  /* ---------- 1. 摘要列：教練 / 暱稱 / 地址 + 兩操作鈕 ---------- */
  .page-content:has(.coach-teach-area-ght68) .course-summary-bar,
  .cms-detail-skin:has(.coach-teach-area-ght68) .course-summary-bar,
  .cms-list-skin:has(.coach-teach-area-ght68) .course-summary-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-content:has(.coach-teach-area-ght68) .course-summary-bar > div,
  .cms-detail-skin:has(.coach-teach-area-ght68) .course-summary-bar > div,
  .cms-list-skin:has(.coach-teach-area-ght68) .course-summary-bar > div {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .page-content:has(.coach-teach-area-ght68) .course-summary-bar > div:last-of-type,
  .cms-detail-skin:has(.coach-teach-area-ght68) .course-summary-bar > div:last-of-type,
  .cms-list-skin:has(.coach-teach-area-ght68) .course-summary-bar > div:last-of-type {
    flex: 1 1 100% !important;
  }

  .page-content:has(.coach-teach-area-ght68) .course-summary-bar > #edit_area_btn,
  .page-content:has(.coach-teach-area-ght68) .course-summary-bar > #blind_class_btn,
  .cms-detail-skin:has(.coach-teach-area-ght68) .course-summary-bar > #edit_area_btn,
  .cms-detail-skin:has(.coach-teach-area-ght68) .course-summary-bar > #blind_class_btn,
  .cms-list-skin:has(.coach-teach-area-ght68) .course-summary-bar > #edit_area_btn,
  .cms-list-skin:has(.coach-teach-area-ght68) .course-summary-bar > #blind_class_btn {
    flex: 1 1 calc(50% - 8px) !important;
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    line-height: 34px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    font-size: 13px !important;
  }

  /* ---------- 2. 區域標題恢復橫排；操作鈕 2×2 ---------- */
  .coach-teach-area-ght68 {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .coach-teach-area-ght68 .area-item {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .coach-teach-area-ght68 .area-header {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 32px 12px 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .coach-teach-area-ght68 .area-title {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  .coach-teach-area-ght68 .area-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .coach-teach-area-ght68 .area-actions .btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  .coach-teach-area-ght68 .area-actions .toggle-icon {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    margin: 0 !important;
    flex: none !important;
  }

  /* ---------- 2b. 地點卡片：名稱/地址完整；ON + 地圖靠右 ---------- */
  .coach-teach-area-ght68 .area-body {
    padding: 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .coach-teach-area-ght68 .location-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .coach-teach-area-ght68 .location-info {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .coach-teach-area-ght68 .location-name {
    font-size: 14px !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
  }

  .coach-teach-area-ght68 .location-address {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    word-break: break-word !important;
  }

  .coach-teach-area-ght68 .location-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 100% !important;
    white-space: nowrap !important;
  }

  .coach-teach-area-ght68 .location-actions .btn {
    margin-left: 0 !important;
  }
}

/* ============================================================
   地區聯動彈窗 thr-linkage：操作列強制一行
   「您已選擇… / 全選 / 全部取消 / 確定」不再因 float:right 與窄寬換行
   ============================================================ */
@media (max-width: 767px) {
  .thr-linkage .thr-areas > h4.mtb5,
  .thr-linkage .thr-areas > h4 {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px 5px !important;
    margin: 0 0 8px !important;
    padding: 0 2px !important;
    line-height: 1.3 !important;
    font-size: 12px !important;
    font-weight: 600;
    white-space: nowrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .thr-linkage .thr-areas h4 button,
  .thr-linkage .thr-areas h4 .btn,
  .thr-linkage .thr-areas h4 .thr-select-all,
  .thr-linkage .thr-areas h4 .thr-select-clear,
  .thr-linkage .thr-areas h4 .thr-confirm {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 4px 7px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    border-radius: 4px !important;
    vertical-align: middle !important;
  }

  /* 確定靠右，其餘保持順序 */
  .thr-linkage .thr-areas h4 .fr,
  .thr-linkage .thr-areas h4 .thr-confirm {
    float: none !important;
    margin-left: auto !important;
  }
}

#boxClose{color: #333!important;}

/* ============================================================
   開課月曆 FullCalendar（fitnessClassTimesCalendar）手機端
   嚴禁改 height / overflow / position（會讓事件絕對定位堆疊錯位）。
   僅縮小字級與內距，讓窄格裡時間與「顯示更多」更易讀。
   ============================================================ */
@media (max-width: 991px) {
  .cms-list-skin .fc,
  .page-content .fc {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cms-list-skin .fc-widget-header,
  .page-content .fc-widget-header {
    font-size: 11px !important;
  }

  .cms-list-skin .fc-day-number,
  .page-content .fc-day-number {
    font-size: 11px !important;
  }

  .cms-list-skin .fc-day-grid-event,
  .cms-list-skin .fc-event,
  .page-content .fc-day-grid-event,
  .page-content .fc-event {
    font-size: 10px !important;
    line-height: 1.2 !important;
    padding: 1px 2px !important;
  }

  .cms-list-skin .fc-more,
  .cms-list-skin a.fc-more,
  .page-content .fc-more,
  .page-content a.fc-more {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 420px) {
  .cms-list-skin .fc-widget-header,
  .page-content .fc-widget-header {
    font-size: 10px !important;
  }

  .cms-list-skin .fc-day-grid-event,
  .cms-list-skin .fc-event,
  .page-content .fc-day-grid-event,
  .page-content .fc-event {
    font-size: 9px !important;
    padding: 0 2px !important;
  }

  .cms-list-skin .fc-more,
  .cms-list-skin a.fc-more,
  .page-content .fc-more,
  .page-content a.fc-more {
    font-size: 9px !important;
  }
}

/* ==========================================================================
   頂欄窄螢幕防重疊（≤991，尤其 ~320/375 手機）
   問題：品牌字「XXX教練後台」設了 flex:none + nowrap，寬度不足時不收縮，
         會壓到右側的訊息鈕／使用者鈕。
   作法：品牌改成可收縮（flex:0 1 auto + min-width:0）並以省略號截斷，
         右側動作區維持 flex:none 固定寬，兩邊不再互相覆蓋。
   ========================================================================== */
@media (max-width: 991px) {
    #navbar .navbar-container {
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }
    #navbar .navbar-header.pull-left {
        min-width: 0 !important;      /* flex 子項預設 min-width:auto，會撐破容器 */
        overflow: hidden !important;
    }
    #navbar .navbar-header.pull-left .navbar-brand {
        flex: 0 1 auto !important;    /* 蓋掉上方的 flex:none，允許收縮 */
        min-width: 0 !important;
        overflow: hidden !important;
        padding-left: 8px !important;
        padding-right: 6px !important;
    }
    #navbar .navbar-header.pull-left .navbar-brand small {
        display: inline-block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }
    /* 右側手機動作區固定寬，不被品牌字擠掉 */
    #navbar .navbar-header-phone {
        flex: none !important;
        white-space: nowrap !important;
    }
    /* 漢堡鈕不參與收縮 */
    #navbar .navbar-toggle.menu-toggler { flex: none !important; }
}

/* 極窄（≤380）再縮字級與間距，讓品牌至少看得到前幾個字 */
@media (max-width: 380px) {
    #navbar .navbar-brand,
    #navbar .navbar-brand small { font-size: 13px !important; }
    #navbar .navbar-brand { padding-left: 6px !important; padding-right: 4px !important; }
    #navbar .navbar-header-phone { gap: 6px !important; }
    #navbar .navbar-header-phone .admin-user > a.dropdown-toggle {
        max-width: 108px !important;
        overflow: hidden !important;
    }
    #navbar .navbar-header-phone .admin-user .user-info,
    #navbar .navbar-header-phone .admin-user p {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   ≤360：對齊 pt2 — 只留右側桌機版使用者鈕，手機版那組整個收起
   原因：上面「451–540 / ≤360」區塊已把 .navbar-header-phone 設為 none，
        但 ≤450 區塊用了 :has() 選擇器（特異性較高）又把它顯示回來，
        導致 340 寬時「蕭智文」（手機版）與「蕭智文教練」（桌機版）同時出現。
   ========================================================================== */
@media (max-width: 360px) {
    #navbar .navbar-header-phone,
    #navbar .navbar-header-phone:has(a.chat-msg-btn),
    #navbar .navbar-header-phone:has(svg.chat-msg-btn),
    #navbar .navbar-header-phone:has(.admin-user) {
        display: none !important;
    }

    /* 此寬度已放不下，訊息鈕一併收起（可從使用者選單進入） */
    #navbar .ace-nav > li.to-web-home:has(a.chat-msg-btn),
    #navbar .ace-nav > li.to-web-home:has(svg.chat-msg-btn),
    #navbar .ace-nav > li:has(> a.chat-msg-btn),
    #navbar .ace-nav > li:has(svg.chat-msg-btn),
    #navbar a.chat-msg-btn {
        display: none !important;
    }
}

/* ==========================================================================
   只有標題的 page-header（例：授課地點設定）垂直置中
   這類頁面套的是 .cms-list-skin，會吃到「搜尋卡」的 padding 14px 16px，
   但框裡只有一個 h1，又帶著 Ace 的 padding-top:7px / padding-bottom:16px，
   上下不對稱 → 看起來文字偏上。改成 flex 置中並讓上下內距一致。
   有搜尋表單或按鈕列的 page-header 不受影響。
   ========================================================================== */
.cms-list-skin .page-header:not(.header-button):not(:has(form)):not(:has(.search-form-other)):not(:has(.btn)) {
    display: flex !important;
    align-items: center !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

.cms-list-skin .page-header:not(.header-button):not(:has(form)):not(:has(.search-form-other)):not(:has(.btn)) > h1 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* ===== 教練通知鈴鐺（頁首，toolbar.php）===== */
.coach-bell-menu { width: 320px; max-height: 420px; overflow-y: auto; padding: 0 !important; }
.coach-bell-menu > li > a.coach-bell-item { display: block; white-space: normal; padding: 10px 14px !important; border-bottom: 1px solid #f0f0f0; color: #666 !important; line-height: 1.5; }
.coach-bell-item .t { display: block; font-size: 14px; }
.coach-bell-item .d { display: block; font-size: 12px; color: #999; }
.coach-bell-item .c {
    font-size: 12px; color: #777; margin-top: 2px;
    /* 最多 2 行，超過用「…」，滑鼠移上去看完整內容（title） */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.coach-bell-menu > li > a.coach-bell-item.unread { background: #fff6f6 !important; }
.coach-bell-item.unread .t { font-weight: 700; color: #222; }
.coach-bell-empty { padding: 14px; text-align: center; color: #999; font-size: 13px; list-style: none; }
.coach-bell-foot > a { display: block; text-align: center; padding: 8px !important; font-size: 13px; color: var(--skin) !important; }
/* 手機版頁首 */
.coach-bell-phone { position: relative; display: inline-block; margin-right: 6px; vertical-align: middle; }
.coach-bell-phone > a { color: #fff; font-size: 18px; padding: 0 6px; display: inline-block; position: relative; }
.coach-bell-phone .notify-num { position: absolute; top: -6px; right: -6px; background: #e22424; color: #fff; border-radius: 2rem; padding: 0 5px; font-size: 11px; line-height: 1.4; }
@media (max-width: 480px) { .coach-bell-menu { width: 280px; } }
/* 鈴鐺未讀數字：跟「審查資料送出」同一個紅、白字、正圓（兩位數變膠囊） */
#navbar .ace-nav > li.coach-bell .notify-num,
.coach-bell .coach-bell-num {
    background: #d9534f !important;
    color: #fff !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 14px !important; /* 扣掉上下 2px 白框，數字才會置中 */
    padding: 0 4px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    border: 2px solid #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

/* 授課地點頁「綁定課程」按鈕：藍色實心（原本 btn-error 不是 Bootstrap 顏色，變成灰色像停用） */
.btn-bind-class,
.cms-list-skin .btn-bind-class {
    background: #2f6fb3 !important;
    border-color: #2f6fb3 !important;
    color: #fff !important;
}
.btn-bind-class:hover,
.btn-bind-class:focus,
.cms-list-skin .btn-bind-class:hover,
.cms-list-skin .btn-bind-class:focus {
    background: #255a92 !important;
    border-color: #255a92 !important;
    color: #fff !important;
}

/* ============================================================
   多圖上傳列表（MultiphotoController 的 table.mp-panel-table）手機版
   維持表格、外層可以左右滑（不要被上面「詳情頁內嵌子表」通用規則改成卡片：
   那段用第幾欄寫死標籤，套到多圖列表會標籤錯亂、排版走位）
   選擇器刻意加重（html body + 重複 class），才能蓋過通用規則的 !important
   ============================================================ */
@media (max-width: 767px) {
  /* 外層：左右滑 */
  html body .cms-detail-skin .form-group .table-responsive:has(> table.mp-panel-table) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #eee !important;
    border-radius: 6px !important;
  }

  /* 表格維持表格 */
  html body .cms-detail-skin .form-group table.mp-panel-table.mp-panel-table {
    display: table !important;
    width: auto !important;
    min-width: 760px !important;   /* 欄位多，給足寬度，用滑的看 */
    max-width: none !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
  }
  html body .cms-detail-skin .form-group table.mp-panel-table.mp-panel-table thead { display: table-header-group !important; }
  html body .cms-detail-skin .form-group table.mp-panel-table.mp-panel-table tbody { display: table-row-group !important; width: auto !important; }
  html body .cms-detail-skin .form-group table.mp-panel-table.mp-panel-table tr {
    display: table-row !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  html body .cms-detail-skin .form-group table.mp-panel-table.mp-panel-table th,
  html body .cms-detail-skin .form-group table.mp-panel-table.mp-panel-table td {
    display: table-cell !important;
    width: auto !important;
    padding: 8px !important;
    border-top: 1px solid #eee !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
  }
  /* 不要通用規則加的「細項／操作／欄位」小標 */
  html body .cms-detail-skin .form-group table.mp-panel-table.mp-panel-table td::before {
    content: none !important;
    display: none !important;
  }
  /* 凍結第 1 欄（勾選）、第 2 欄（預覽）：左右滑時固定在左邊，滑到右邊也知道是哪張圖 */
  html body .cms-detail-skin .form-group table.mp-panel-table.mp-panel-table th:nth-child(1),
  html body .cms-detail-skin .form-group table.mp-panel-table.mp-panel-table td.mp-td-check {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    background: #ffffff !important;
    box-sizing: border-box !important; /* 寬度含 padding，第 2 欄的 left 才對得上 */
  }
  html body .cms-detail-skin .form-group table.mp-panel-table.mp-panel-table th:nth-child(2),
  html body .cms-detail-skin .form-group table.mp-panel-table.mp-panel-table td.mp-td-pic {
    position: sticky !important;
    left: 36px !important;          /* = 第 1 欄寬度 */
    z-index: 2 !important;
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    background: #ffffff !important;
    box-sizing: border-box !important; /* 寬度含 padding，第 2 欄的 left 才對得上 */
    box-shadow: 4px 0 6px -4px rgba(0, 0, 0, .18) !important; /* 右側淡陰影，看得出這兩欄是固定的 */
  }
  html body .cms-detail-skin .form-group table.mp-panel-table.mp-panel-table thead th:nth-child(1),
  html body .cms-detail-skin .form-group table.mp-panel-table.mp-panel-table thead th:nth-child(2) {
    z-index: 3 !important;
    background: #f7f7f7 !important;
  }

  /* 輸入框給固定寬，表格才不會擠 */
  html body .cms-detail-skin .form-group table.mp-panel-table.mp-panel-table td.mp-td-title input,
  html body .cms-detail-skin .form-group table.mp-panel-table.mp-panel-table td.mp-td-other input { width: 180px !important; }
  html body .cms-detail-skin .form-group table.mp-panel-table.mp-panel-table td.mp-td-sort input { width: 60px !important; }
  html body .cms-detail-skin .form-group table.mp-panel-table.mp-panel-table td.mp-td-action .v2_for_btns {
    display: flex !important;
    gap: 6px !important;
  }
  html body .cms-detail-skin .form-group table.mp-panel-table.mp-panel-table td.mp-td-action .btn {
    width: auto !important;
    display: inline-flex !important;
  }
}

/* ============================================================
   希望服務方式（複選）：框架的按鈕式複選改成跟「訓練專長」一樣的勾選框＋文字
   只鎖定這個欄位（:has 找 coach_current_service_type[]），其他按鈕式複選不受影響
   選中與否由框架 JS 寫在 inline style → 這裡用 !important 蓋過，狀態改看 input:checked
   ============================================================ */
.form-group:has(input[name="coach_current_service_type[]"]) .button-checkbox {
    display: inline-block;
    margin: 0 18px 6px 0;
}
.form-group:has(input[name="coach_current_service_type[]"]) .button-checkbox > button {
    background: transparent !important;
    border: 0 !important;
    color: #333333 !important;
    padding: 4px 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}
/* 勾選框 */
.form-group:has(input[name="coach_current_service_type[]"]) .button-checkbox > button::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 6px;
    vertical-align: -2px;
    border: 1px solid #9aa0a6;
    border-radius: 3px;
    background: #ffffff;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
    box-sizing: border-box;
}
.form-group:has(input[name="coach_current_service_type[]"]) .button-checkbox > button:hover::before {
    border-color: var(--skin, #1f2a44);
}
/* 選中：勾選框變實心打勾 */
.form-group:has(input[name="coach_current_service_type[]"]) .button-checkbox:has(input:checked) > button::before {
    content: "✓";
    background: var(--skin, #1f2a44);
    border-color: var(--skin, #1f2a44);
}