body, html {
        /* 使用 Laravel 語法確保路徑絕對正確 */
        background: url('../images/html_bg.jpg') center top no-repeat fixed;
        background-size: cover;
        min-height: 100vh; /* 確保高度撐開 */
        margin: 0;
        padding: 0;
    }

    /* 如果有其他層擋住了背景，可以嘗試把背景設在最外層容器 */
    #showcase-row {
        background: transparent !important; /* 確保橫幅區塊不遮擋底圖 */
    }

/* 由於原代碼包含舊版 Bootstrap 類別，為確保它們在現代瀏覽器中不影響基本排版，可以添加少量調整 */

        .wrapper-inner {
            **padding: 20px;
            /* 添加一些內邊距，讓內容不貼邊 */
			margin:0 80px;
		    background:#fff;
			
        }

        /* 這裡使用 Bootstrap 5 的格線系統類別（d-flex, col-md-9, col-md-3）來取代 span9/span3，以保持現代化和響應式 */
        .content-layout {
            display: flex;
            flex-wrap: wrap;
            /* 確保在小螢幕上可以換行 */
        }

        #component {
            /* 舊版 span9 寬度 */
            flex: 0 0 75%;
            max-width: 75%;
        }

        #aside-right {
            /* 舊版 span3 寬度 */
            flex: 0 0 25%;
            max-width: 25%;
        }

        @media (max-width: 768px) {

            #component,
            #aside-right {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }

        .pull-right {
            float: right !important;
        }

        /* 修正 Bootstrap 5 ul 預設樣式可能對 ul.breadcrumb 的影響 */
        ul.breadcrumb {
            padding: 0;
            margin-bottom: 1rem;
            list-style: none;
            background-color: transparent;
        }

        /* 讓麵包屑分隔符號更明顯 */
        .breadcrumb .divider {
            padding: 0 0.5rem;
            color: #6c757d;
        }

        .breadcrumb li.active {
            color: #6c757d;
        }