@charset "utf-8";

/* ==========================================
   全站統一字型系統 (Viking Uniform Typography)
   ========================================== */

/* 1. 引入 Google Fonts 頂級繁體中文/英文標準字型 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@400;600;700&display=swap');

/* 2. 全站預設內文字型 (清晰、平滑、無襯線體) */
body {
    font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft JhengHei", sans-serif !important;
    color: #333333;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* 文字平滑化 */
    -moz-osx-font-smoothing: grayscale;
}

/* 3. 全站統一標題字型 (氣派、古典典雅、襯線體) */
h1, h2, h3, h4, h5, h6, 
.noto-serif-jp-500, 
.section-title, 
.cat-main-title {
    font-family: 'Noto Serif TC', "Times New Roman", PMingLiU, serif !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* 4. 英文/數字專用質感加強 (選用) */
.text-gold, .sub-title-gold, .en-title {
    font-family: 'Noto Serif TC', 'Georgia', serif;
}

/* 字型結束 */

/* CSS Document */

.container {
}
.chiron-sung-hk-500 {
  font-family: "Chiron Sung HK", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.noto-serif-jp-500 {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}



.logo {
    color: #ffffff!important;
    font-family: Microsoft JhengHei;
    font-size: 1.7rem;
    font-weight: 900;
}

.ilogo {
	width: 110px;
	height: auto;
	clear: both;
}
.mlogo {
	width: 60%;
	clear: both;
	margin: 0 auto;
}
.mwlogo {
	width: 15%;
	clear: both;
}
.container-fluid{
	margin: 0;
	padding: 0;
}

img{
	width: 100%;
}
body{
    font-family: BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft JhengHei", 微軟正黑體, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}	
body, h1, h2, h3, h4, h5, h6{
	line-height: 1.5em;
}
h1, h2, h3, h4, h5{
	color: #000;
}
p{
	font-size: .9em;
}
dl, ol, ol ol, ol ul, ul, ul ol, ul ul {
    margin-left: 0;
    padding-left: 0;
}
ul {
/*	margin-left: 30px; */
	padding-left: 0;
	margin: 0;
}
ul li {
	list-style: none;
    font-size: 1.1em;
    line-height: 1.6em;
}

a {
	text-decoration: none;
}
table { 
	border:1px solid #666; 
	text-align:center;
	border-collapse:collapse;
	font-size: .9em;
} 
th { 
	background-color: #eee;
	color:#000;
} 
th, td { 
	border:1px solid #666;
	padding:15px;
}
mark {
	color:#d82a43;
	background-color: transparent;
}
.bg-g50 {
	padding: 1.2em;
}
.y-mk {
	color:#fdbb11;
	font-size: 1.2em;
}
.t-white {
	color: #fff;
}
.i-icon {
	width: 30%;
	height: auto;
	clear: both;
	background-color: #fdbb11;
	border-radius: 50%;
	margin: .5rem auto 1rem auto;
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("../images/bars-solid.svg");
}

.fw-700 {
	font-weight: 700;
}

.ct-tit::after {
    content: "　───";
}
.ct-tit::before {
    content: "───　";
}
.nav-link {
	font-size: 1.2rem;
	color: #fff;
}
.txt-red {
	color:#ff081b!important;
}
.txt-orange {
	color:#ff6600!important;
}
.txt-yellow {
	color:#f7ef15!important;
}
.pb-15 {
    padding-bottom: 15px;
}
.pt-15 {
    padding-top: 15px;
}
.pt-20 {
    padding-top: 20px;
}
.pl-0 {
	padding-left: 0;
}
.pr-0 {
	padding-right: 0;
}
.mt-30 {
	margin-top: 30px;
}
.mb-10{
	margin-bottom: 10px !important;
}
.mlr-50 {
	margin: 0 50px;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,1);
    font-size: 1.1rem;
    font-weight: 600;
}

.navbar-dark .navbar-toggler {
    border-color: #fff;
}

.caption {
    width: 70%;
    position: absolute;
    /* left: 15%; */
    /* top: 30%; */
    color: #fff;
    margin: 18vh 15% 0 15%;
}
.tit-li {
    font-size: 1rem;
	font-weight: 700;
    margin-left: -16px;
}
.style-li {
	list-style: none;
    font-size: 1.03em;
    line-height: 1.5em;
	color: #494441;
}
.style-li::before {
    content: "\25AA";
	color: #c69c6a;
    font-size: 1.1rem;
    padding-right: 10px;
}
.style-li span {
    font-size: 0.8em;
}
.os-li {
    font-size: 1rem;
    margin-left: 16px;
}
.os-li::before {
    content: "\25E6";
    color: #d82a43;
    font-size: 1.1rem;
    padding-right: 10px;
    margin-left: -16px;
}
.bg-nav {
	background-color: #0D1C34;
	padding-top: .2rem;
    padding-bottom: .2rem;}
.bg-nav2 {
    background-color: #5c1f1f;
	line-height: 3rem;
}
.nav {
    background-color: #0f2d4a;
}
.nav a:hover {
	color: #d4b36a;
}
.swiper-button-next, .swiper-button-prev {
	color: #fff !important;
}
.swiper {
    max-width: 800px;
}

.ai-flex {
	display: flex;
	align-items: center;
}
.ci-h {
	height: 88vh;
	background-repeat: no-repeat;
	background-position: center;
}
.ci-bg1 {
	background: url("../images/hue-01.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	border-bottom: 8px #d4b36a solid;
}
.ci-txt h2, .ci-txt h3, .ci-txt h4, .ci-txt h5 {
	color: #fff;
	text-shadow: 0px 0px 10px #000;
}
.ci-txt h2 {
	font-size: 3rem;
	font-weight: 700;
	margin-bottom: 0;
	/* line-height: 3.2rem; */
}
.ci-txt h3 {
	font-size: 2rem;
	font-weight: 500;
}
.ci-txt h4 {
	font-size: 1.5rem;
	font-weight: 200;
}
.ci-txt h5 {
	font-size: 1.25rem;
}
.on-txt h5 {
	font-size: 2rem;
	font-weight: 700;
}
.on-txt p {
	font-size: 1.2rem;
	font-weight: 200;
	margin: 0;
}
.bg-light {
    background-color: #f8f8f8!important;
}
.bg-pink {
    background-color: #ffefee!important;
}
.bg-blue {
    background-color: #0c214d!important;
	background: linear-gradient(180deg, #7ecaff 10%, #0c214d 40%);
}
.bg-main {
	background-color: #f2e8df!important;
}
.bg-ship {
	background-image: url("../images/hue-04.png");
	border-bottom: solid 10px #e6c286;
	color: #fff!important;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom right;
}
.indlink {
	height: 16em;
	background-repeat: no-repeat;
	background-position: center center;	
	border: none;
	border-radius: 0;
	margin-top: 70px;
	color: #000;
	text-decoration: none;
	background-size: 100%;
}
.indtit {
	width: 25%;
	margin: 5em auto;
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	justify-content: center;
	display: flex;
	align-items: center;
}
.il-bg1 {
	background-image: url("../images/indlink-01.jpg");
}
.il-bg2 {
	background-image: url("../images/indlink-02.jpg");
}
.il-bg3 {
	background-image: url("../images/indlink-03.jpg");
}
.indp {
	text-align: center;
	line-height: 1.4em;
}
.about-box{
	margin: 10px 0 0 0px;
	padding-top: 10px;
}

.about-icon {
    font-size: 2.5rem;
    margin: 0px auto;
    color: #d82a43;
    width: 2.5rem;
}
.fw-bold {
    font-weight: 600 !important;
}
.ps-flex {
	display: flex;
}
.ps-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-bottom: 15px;
}
.sp-img {
	bottom:0;
}
.model {
    padding: 20px;
    background: #fff3f3;
    border: 0.3px #d82a43 solid;
    margin-bottom: 30px;
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.8rem;
}
.ps {
	font-size: .8rem;
}
.med-a {
	border-radius: 0;
	border:none;
	box-shadow:0 0 20px 1px #cccccc;
}
.med-a img {
	border-radius: 0;
}
.med-a h5{
	font-weight: 700!important;
	margin: 0;
}
.med-a h6{
    font-size: 1em;
}
.med-a p {
	line-height: 1.8em;
    font-size: 0.9em;
}
.med-a a{
	color: #d82a43;
    border: 1px solid #d82a43;
	padding: .4em 1.8em;
	background: none;
	border-radius: 20px;
	float: none;
	margin: 0 auto;
	display: block;
	width: 50%;
}
.med-a a:hover{
	background-color: #d82a43;
	color: #fff;
    border: 1px solid #d82a43;
}
.conceptCo {
    background: #fff;
    border-top: #d82a43 7px solid;
    box-shadow: #eee 10px 10px 30px;
}
.co-box {
	margin: 40px 40px;
}
.sa-bg {
	height: 40vh;
	background-image: url("../images/sale-bg-01.jpg");
	background-repeat: no-repeat;	
	background-size: cover;
	background-position: center center;	
	display: flex;
    justify-content: center;
    align-items: center;
}
.mc-bg {
	height: 40vh;
	background-image: url("../images/mice-bg-01.jpg");
	background-repeat: no-repeat;	
	background-size: cover;
	background-position: center center;	
	display: flex;
    justify-content: center;
    align-items: center;
}
.sale-txt {
	text-align: center;
	color: #fff;
	font-size: 1.1em;
}
.sale-txt h5, .sale-txt h6 {
	text-shadow: 0px 0px 10px #000;
}
.sale-txt h5 {
	font-size: 1.8em!important;
}
.sale-txt h6 {
	font-size: 1.2em!important;
}
.sale {
	width: 90%;
	margin: 0 auto;
	padding-bottom: 3em;
}
.sale-box {
	padding: 1.5em;
}
.tour-box {
	width: 100%;
	margin: 30px auto;
	padding: 25px;
	text-align: center;
	border-left: solid 1px #e6c286;
}
.tour-box a{
	width: 100%;
	margin-top: 15px;
}

.vi-h {
	height: 40vh;
	background-repeat: no-repeat;
	background-position: center center;
	padding-top: 150px;
	color: #fff;
	text-shadow:0px 0px 5px #000;
	font-weight: 500;
}
.vi-bg1 {
	background-image: url("../images/vi-bg01.jpg");
}

.sidenav-li {
    padding: 15px 0;
    border-bottom: #9e9f9f 0.8px dotted;
}

/* 單元標題 */
.titA {
/*	font-family: 'cwTeXFangSong', sans-serif; */
	padding: 40px 0;
}
.t-icon-box {
	width: 62px;
	margin: 0 auto;
}
.t-icon-box img {
	
}
/* 讓 .titA 容器居中所有內容 */
.titA {
    text-align: center;
    position: relative; 
}

/* 讓 h2 成為定位容器，並設定文字相關樣式 */
.titA h2 {
    color: #af7f4f;
    font-size: 2.2rem;
    position: relative;      /* 關鍵：設定相對定位 */
    display: inline-block;   /* 關鍵：讓 h2 只佔據文字寬度 */
    padding: 0 25px;         /* 調整文字與線條之間的間隔 */
    z-index: 2;              /* 確保文字在裝飾線上方 */
}

/* ------------------- 共同裝飾線樣式 ------------------- */
.titAa h2::before,
.titAa h2::after {
    content: ''; 
    background-image: url('../images/titA-bg.png'); /* 您的裝飾線圖片 */
    background-repeat: no-repeat;
    
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 1; 
    
    /* 設定偽元素的尺寸 */
    width: 250px; /* 裝飾線的長度，請根據需求調整 */
    height: 18px; /* 修正：設定圖片的實際高度，避免擠壓 */
}

/* ------------------- 左側裝飾線 (::before) ------------------- */
.titA h2::before {
    right: 100%; /* 放在 h2 的左側 */
    margin-right: -15px; 
    
    /* 修正：使用 contain 保持圖片比例 */
    background-size: contain; 
    background-position: left center; /* 確保星星在最左邊 */
}

/* ------------------- 右側裝飾線 (::after) ------------------- */
.titA h2::after {
    left: 100%; /* 放在 h2 的右側 */
    margin-left: -15px; 

    /* 修正：使用 contain 保持圖片比例 */
    background-size: contain; 
    background-position: right center; /* 確保星星在最右邊 */
}


.titA h4 {
	color: #616b70;
	font-size: 1.2rem;
	/* border: solid 1px #e6c286; */
	padding: 2px 25px;
}

.about-box h5 {
	color: #c69c6d;
}
	
.about-box h6 {
	text-align: center;
	color: #11597f;
	padding-top: 20px;
}

/* 內容資料標題 */
.tm-A {
    color: #af7f4f;
    font-size: 1.4rem;
    position: relative;      /* 關鍵：設定相對定位 */
	font-weight: 600!important;
}

.tm-AA::before {
    content: ''; 
    background-image: url('../images/tm-icon-01.png'); /* 您的裝飾線圖片 */
    background-repeat: no-repeat;
    right: 100%; /* 放在左側 */
    margin-right: 2px; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 1; 
    
    /* 設定偽元素的尺寸 */
    width: 26px; /* 裝飾線的長度，請根據需求調整 */
    height: 26px; /* 修正：設定圖片的實際高度，避免擠壓 */
    /* 修正：使用 contain 保持圖片比例 */
    background-size: contain; 
    background-position: left center; /* 確保星星在最左邊 */
}




.laurel-box {
	display: block;
	width: 40%;
	/* background: url("../images/bg-01.png") center center / 75%; */
	text-align: center;
    color: #a57739;
    font-size: 1.5rem;
	font-weight: 200!important;
	margin: 0 auto;
	background-color: #f2e8df;
	border-radius: 50%;
}
.laurel-box img {
    color: #a57739;
	width: 80%;
	margin: 10%;
}
.laurel-box-2 {
	display: block;
	width: 60%;
	text-align: center;
    color: #a57739;
    font-size: 1.5rem;
	font-weight: 200!important;
	margin: 0 auto;
}
.laurel-txt {
	font-family: "Noto Serif JP", serif;
    font-size: 1.1rem;
	text-align: center;
	color: #a57739;
	padding: 10px 0PX;
}
.laurel-main {
	text-align: center;
	font-size: .9em;
}


/* 圖片圓角 */
.br-l {
	border-radius: 250px 0 0 250px; 
}


/* 河流 */
.re-box {
	text-align: center;
	line-height: 1.6rem;
}

.card-pic-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
}
.card-bg {
	background-color: rgba(0, 0, 0, .4);
}
.card-bg h5 {
	font-size: .95rem;
	margin-bottom: 0;
}

/* 行程卡片 */
.card-body h5{
	margin-bottom: .8rem;
}
.card-body h5 a{
	color: #000;
	width: 100%;
	padding: 0;
	border: none;
}
.card-body h5 a:hover{
	background-color: #d82a43;
	border: none;
	border-radius: 0;
	color: #fff;
}
.card-body span.tag {
	font-size: .8rem;
	color: #0096f2;
	border: 1px solid #0096f2;
	padding: .3rem .8rem;
	border-radius: 20px;
	margin-right: 10px;
}
.tag-box {
	margin-bottom: .8rem;
}
.date-box {
	font-size: .8rem;
}
.date-box span.date-txt {
	padding: .4em;
	float: left;
}
a.more {
	border: none;
	display: block;
	float: left;
	color: #d82a43;
	padding: .4em .1em;
	background: none;
	margin: 0 auto;
	width: auto;
}
a.more:hover{
	background-color: #d82a43;
	border: none;
	border-radius: 0;
	color: #fff;
}
.date-txt {
	float: left;
}
.price {
		
}
.price a.pb {
	float: right;
	font-size: 1.4rem;
	border: none;
	clear: both;
	font-weight: 900;
	text-align: right;
	width: auto;
	padding: .2rem;
}
.price a.pb:hover {
	background-color: #d82a43;
	border: none;
	border-radius: 0;
	color: #fff;
}
.price a.pb::before{
    content:"$";
    color:#000;
	font-weight: 400;
	font-size: .8rem;

}
.price a.pb::after{
    content:"元起";
    color:#000;
	font-weight: 400;
	font-size: .8rem;
}
.w-100 {
    width: 100%!important;
}
/* 崁入影片 */
.video-box {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* 行程內容 */
.topic::after {
    content: "";
    width: 50px;
    height: 4.5px;
    background: #d82a43;
    display: block;
    margin-top: 6px;
}
.datebox {
    background: #fff;
    padding: 20px 20px;
    box-shadow: #eee 10px 10px 30px;
    border: none;
    border-left: 8px #d82a43 solid;
    margin: 15px 0;
}

/* 統一所有卡片標題樣式（適用於 中餐廳、15日探源... 等子標題） */
.card-item-title {
  font-family: 'Noto Serif JP', serif !important;
  font-weight: 400 !important; /* 不用重粗體，維持雅致感 */
  font-size: 1.6rem;
  color: #1a2b49; /* 深藍色，與主色調一致 */
  margin-bottom: 0.5rem;
}



/* ==========================================
   航程報價區塊 (Itinerary Pricing Section)
   ========================================== */

.itinerary-pricing-section {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
  box-sizing: border-box;
  font-family: "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: #333333;
}

/* 區塊標題（配合既有網頁風格） */
.section-title-group {
  text-align: center;
  margin-bottom: 30px;
}

.section-subtitle {
  font-size: 13px;
  letter-spacing: 2px;
  color: #b58d4a;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.section-title {
  font-size: 28px;
  color: #1a2b49;
  font-weight: bold;
  margin: 0 0 8px 0;
}

.title-diamond {
  color: #c49a45;
  font-size: 12px;
}

/* 航線季節與主題標頭 */
.itinerary-header {
  text-align: center;
  margin-bottom: 40px;
}

.main-season-title {
  font-size: 32px;
  color: #11284b;
  font-weight: bold;
  margin: 0 0 8px 0;
}

.sub-season-title {
  font-size: 15px;
  color: #666666;
  margin: 0 0 20px 0;
}

.theme-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.theme-divider .line {
  display: inline-block;
  width: 60px;
  height: 1px;
  background-color: #333333;
}

.theme-text {
  font-size: 22px;
  color: #222222;
  letter-spacing: 1px;
}

/* 航程卡片列表 */
.itinerary-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
padding-bottom: 40px;	
}

/* 航程卡片 */
.itinerary-card {
  display: flex;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.itinerary-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* 左側圖片區塊 */
.card-image-wrap {
  position: relative;
  width: 42%;
  flex-shrink: 0;
}

.card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 紅色「新航線」標籤 */
.badge-new {
  position: absolute;
  top: 0;
  left: 20px;
  background-color: #c8102e;
  color: #ffffff;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* 右側內容區塊 */
.card-content {
  width: 58%;
  padding: 35px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.route-title {
  font-size: 24px;
  color: #1a2b49;
  font-weight: bold;
  margin: 0 0 12px 0;
}

.route-subtitle {
  font-size: 18px;
  color: #4a5568;
  font-weight: bold;
  margin-bottom: 25px;
}

.route-subtitle span {
  color: #cbd5e0;
  margin: 0 8px;
}

/* 行程亮點 */
/* 新的 CSS - 替換上面的舊程式碼 */
.highlight-list {
  padding-left: 0;
  margin-bottom: 0;
}

.highlight-list li {
  position: relative;
  padding-left: 1.25rem; /* 讓換行後的第二行自動對齊文字，不對齊方點 */
  line-height: 1.8;
  color: #4a4a4a;
  margin-bottom: 0.5rem;
}

.highlight-list li:last-child {
  margin-bottom: 0;
}

/* CSS 產生的紅色小方點 */
.highlight-list li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.65em;
  width: 5px;
  height: 5px;
  background-color: #dc3545; /* 價格紅 */
  border-radius: 0;
}

.route-highlights ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.route-highlights li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  color: #4a4a4a;
  line-height: 1.8;
}

.route-highlights li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #4a4a4a;
}

/* 卡片底部價格與按鈕 */
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 30px;
}

.price-box {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.price-current {
  font-size: 28px;
  color: #d9232e;
  font-weight: bold;
}

.price-current small {
  font-size: 16px;
  font-weight: normal;
}

.price-original {
  font-size: 14px;
  color: #999999;
  text-decoration: line-through;
}

.btn-more {
  display: inline-block;
  background-color: #1a2b49;
  color: #ffffff;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

.btn-more:hover {
  background-color: #0f1c33;
}

/* 1. 促銷卡片降級：改為乾淨的淺色背景，不再佔據最大視覺量 */
.promo-card {
  background-color: #f8f9fa !important;
  border: 1px solid #e2e8f0 !important;
}

.promo-card .promo-main-title {
  color: #1a2b49 !important;
  font-size: 1.35rem;
}

.promo-card .promo-text {
  color: #4a4a4a !important;
}

.promo-card .promo-item {
  border-top: 1px solid #e2e8f0 !important;
}

/* 2. 主按鈕（CTA）升級：改用品牌金/高對比色，突顯絕對焦點 */
.btn-primary-cta {
  background-color: #c49a45 !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 1.1rem;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(196, 154, 69, 0.3);
  transition: all 0.2s ease;
}

.btn-primary-cta:hover {
  background-color: #b0883b !important;
  box-shadow: 0 6px 16px rgba(196, 154, 69, 0.4);
  transform: translateY(-1px);
}

/* 促銷卡片（淺色底版本） */
.promo-card {
  background-color: #f8f9fa !important;
  border: 1px solid #e2e8f0 !important;
}

/* 主標題：深藍色 */
.promo-card .promo-main-title {
  color: #1a2b49 !important;
  font-size: 1.35rem;
}

/* 一般說明文字：灰色 */
.promo-card .promo-text {
  color: #4a4a4a !important;
}

/* 關鍵字 <strong>（全面7折、免費...等）：深藍色加粗，不再是白色 */
.promo-card .promo-text strong {
  color: #1a2b49 !important;
  font-weight: 700;
}

/* 分隔線顏色改為淺灰 */
.promo-card .promo-item {
  border-top: 1px solid #e2e8f0 !important;
}

/* RWD 響應式適應（手機端） */
@media (max-width: 768px) {
  .itinerary-card {
    flex-direction: column;
  }
  
  .card-image-wrap,
  .card-content {
    width: 100%;
  }

  .card-image-wrap {
    height: 220px;
  }

  .card-content {
    padding: 25px 20px;
  }

  .card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .btn-more {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}
/* 遊輪線上報名 */
.bg-blue-light {
	background-color: #ecfbff!important;
}
.checkout-head {
    padding: 8px 20px 6px 20px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}
.checkout-body {
    padding: 30px 35px;
}
.h-center {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
}
.checkoutBox label {
    color: #333;
	font-size: .9rem;
}
sup {
    color: #d82a43;
    font-size: .8rem;
}

input, select, textarea {
    border: 1px solid #aaa;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    outline: 0;
    color: #4b515e;
    background: 0 0;
    font-weight: 400;
    font-size: .9rem;
    width: 100%;
    margin: 5px 0 10px 0;
    padding: 14px 15px 8px 15px;
    letter-spacing: 1.1px;
    line-height: 18px;
    cursor: pointer;
}

label.checkbox-container input, label.radio-container input {
    width: 0;
}

.form-disabled:disabled{background-color:#e9ecef;opacity:1}
.radio-container{display:block;position:relative;padding-left:29px;margin:20px 0;cursor:pointer;font-size:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.radio-container input{position:absolute;opacity:0;cursor:pointer}
.checkmark{position:absolute;top:0;left:0;height:18px;width:18px;border:1px solid #ddd;border-radius:50%;margin-top:2px}
.radio-container:hover input~.checkmark{background-color:#fff;border:1px #d82a43 solid}
.radio-container input:checked~.checkmark{background-color:#fff;border:#d82a43 1px solid}
.checkmark:after{content:"";position:absolute;display:none}
.radio-container input:checked~.checkmark:after{display:block}
.radio-container .checkmark:after{top:3px;left:3px;width:10px;height:10px;border-radius:50%;background:#d82a43}
.checkbox-container{display:block;position:relative;padding-left:35px;margin-bottom:12px;cursor:pointer;font-size:14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.checkbox-container input{position:absolute;opacity:0;cursor:pointer}
.box-checkmark{position:absolute;top:0;left:0;height:18px;width:18px;border:1px solid #ddd}
.checkbox-container:hover input~.box-checkmark{background-color:#fff;border:1px #d82a43 solid}
.checkbox-container input:checked~.box-checkmark{background-color:#d82a43;border:1px #d82a43 solid}
.box-checkmark:after{content:"";position:absolute;display:none}
.checkbox-container input:checked~.box-checkmark:after{display:block}
.checkbox-container .box-checkmark:after{left:4.5px;top:.65px;width:7px;height:12px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
label.label-control{font-size:.8rem;color:#d82a43;background-color:#fff;position:absolute;top:-6px;left:15px;width:auto;padding:1px 4px;margin:0 12px}
@media screen and (max-width:768px){
label.label-control{font-size:.73rem}
}
.form-group{margin-bottom:12px}
.input__arrowdown{width:100%;background-image:url(../../images/icons/arrows_down.svg);background-repeat:no-repeat;background-size:21px 21px;background-position:95% center}
.scrollMenu{background-color:#f8f8f8;overflow:auto;white-space:nowrap;display:flex;justify-content:space-between}
.scrollMenu a{display:inline-flex;color:#333;font-size:1rem;letter-spacing:.8px;text-align:center;padding:12px 0;text-decoration:none;transition:all .3s}
.scrollMenu a{position:relative}
.scrollMenu a:after{position:absolute;bottom:0;left:0;right:0;width:0%;height:4px;content:".";margin:auto;padding:0;font-size:0;color:transparent;background:#d82a43;transition:all .3s}
.scrollMenu a:hover{opacity:.85;transition:all .3s}
.scrollMenu a:hover:after{width:100%}
.carousel-indicators li{width:10px;height:10px;border-radius:50%;background-color:#fff;margin:0 10px}
.carousel-indicators .active{background-color:#d82a43}


label.label-control {
    font-size: .8rem;
    color: #d82a43;
    position: absolute;
    top: -6px;
    left: 15px;
    width: auto;
    padding: 1px 4px;
    margin: 0 12px;
    background-color: #fafafa;
}




.inlineb-item {
    margin-right: 25px!important;
}



.button.medium {
    font-size: .83rem;
    padding: 10px;
    display: inline-block;
}
.button.primary {
    background-color: #d82a43;
    color: #fff;
    border: 1px #d82a43 solid;
}

/* ==========================================
   頂部 Hero Banner 完整樣式 (vh 高度 + 完整樣式)
   ========================================== */

/* 1. 主容器 (vh 高度與右側郵輪對齊) */
.hero-banner-section {
    position: relative;
    width: 100%;
    height: 85vh;          /* 桌機版滿版質感：占視窗高度 85% */
    min-height: 520px;     /* 安全下限高度 */
    
    background-image: url('../images/viking-ship-bg.jpg');
    background-repeat: no-repeat;
    background-position: right center; /* 強制圖片焦點靠右，確保郵輪完好 */
    background-size: cover;
    
    display: flex;
    align-items: center;
    padding: 60px 0;
    overflow: hidden;
}

/* 2. 左側漸層暗色遮罩 (確保左側文字與 Logo 100% 清晰) */
.hero-banner-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(15, 34, 50, 0.75) 0%, rgba(15, 34, 50, 0.25) 35%, rgba(15, 34, 50, 0) 55%);
    z-index: 1;
}

/* 3. 文字內容總外盒 */
.hero-content-box {
    position: relative;
    z-index: 2;
    color: #ffffff !important;
}

/* 4. Logo 尺寸固定 */
.hero-logo img {
    max-width: 180px !important;
    height: auto !important;
    display: block;
    margin-bottom: 16px;
}

/* 5. 主標題 (維京遊輪) */
.hero-title {
    font-size: 44px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 3px;
    margin-bottom: 8px !important;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* 6. 副標題 (探索歐洲 ‧ 從海上開始) */
.hero-subtitle {
    font-size: 20px !important;
    font-weight: 300 !important;
    color: #ffffff !important;
    letter-spacing: 2px;
    margin-bottom: 24px !important;
    opacity: 0.95;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* 7. 圓角標籤容器 */
.hero-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* 8. 磨砂玻璃質感標籤 */
.hero-tag-item {
  /*  background: rgba(255, 255, 255, 0.2) !important; */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  /*  border: 1px solid rgba(255, 255, 255, 0.5) !important; */
    color: #ffffff !important;
  /*  padding: 6px 18px; */
    border-radius: 50px;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================
   📱 手機版 RWD 自動縮放適應 (螢幕 < 768px)
   ========================================== */
@media (max-width: 767.98px) {
    .hero-banner-section {
        height: auto;
        min-height: 420px;
        padding: 50px 0;
        background-position: 75% center; /* 手機版微調圖片位置 */
    }

    /* 手機版加強遮罩，確保文字更好看 */
    .hero-banner-section::before {
        background: rgba(15, 34, 50, 0.65);
    }
    
    .hero-logo img {
        max-width: 140px !important;
    }
    
    .hero-title {
        font-size: 30px !important;
    }
    
    .hero-subtitle {
        font-size: 16px !important;
        margin-bottom: 18px !important;
    }
    
    .hero-tag-item {
        font-size: 12px;
        padding: 4px 12px;
    }
}

/* ==========================================
   錨點導覽列 (Sticky Navbar) 視覺切割樣式
   ========================================== */

.sticky-anchor-nav {
    position: sticky;
    top: 3rem; /* 👈 關鍵：設定主導覽列的高度(例如 60px)，讓它吸附在主導覽列下方 */
    z-index: 19;
    
    /* 切割視覺 1：換成質感淺米白/白色底 */
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px); /* 磨砂玻璃效果，高級感倍增 */
    -webkit-backdrop-filter: blur(8px);
    
    /* 切割視覺 2：細金色底邊框 + 浮動陰影 */
    border-bottom: 1px solid #E2DACD;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
    
    transition: all 0.3s ease;
}

/* 列表容器 (平分居中) */
.anchor-nav-list {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto; /* 手機版如果太寬可左右滑動 */
    white-space: nowrap;
}

/* 單個連結項目 */
.anchor-link {
    display: inline-block;
    padding: 0.875rem 1.25rem; /* 上下 14px, 左右 20px */
    color: #444444 !important;  /* 換成深灰文字，與主選單的白字做強烈對比 */
    font-size: 0.9375rem;       /* 15px */
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

/* Hover 與 滑動到的點擊狀態 (Active) */
.anchor-link:hover,
.anchor-link.active {
    color: #C5A059 !important; /* 變金色 */
    font-weight: 700;
}

/* 當前章節的底部金色標記線 */
.anchor-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 60%;
    height: 0.1875rem; /* 3px */
    background-color: #C5A059;
    border-radius: 2px 2px 0 0;
}

/* 平滑捲動效果 (請確保加在 CSS 最頂部的 html 標籤) */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 7.5rem; /* 👈 關鍵：避免點擊錨點後，章節標題被雙層導覽列擋住！ */
}


/* ==========================================
   船上體驗 7 大特權 - 一列 7 個一字排開
   ========================================== */

.privilege-row {
    display: grid;
    gap: 1.25rem 0.9375rem; /* 上下間距 20px, 左右間距 15px */
    width: 100%;
    margin: 0 auto;
}

/* 1. 📱 平板與手機版（螢幕 < 992px）：強制一排 2 個 (2/2/2/1) */
@media (max-width: 991.98px) {
    .privilege-row {
        grid-template-columns: repeat(2, 1fr); /* 強制鎖定 2 欄，絕不可能變 1 列！ */
        max-width: 31.25rem; /* 約 500px，限制手機版最大寬，避免按鈕被拉太寬 */
    }

    /* 讓第 7 個項目（最後一個）跨滿 2 欄並置中 */
    .privilege-col:nth-child(7) {
        grid-column: span 2;
        justify-self: center;
        width: 50%; /* 寬度跟其他六個保持一致 */
    }
}

/* 2. 🖥️ 桌機版（螢幕 ≥ 992px）：恢復一字排開 7 個 */
@media (min-width: 992px) {
    .privilege-row {
        grid-template-columns: repeat(7, 1fr); /* 強制 7 欄 */
        max-width: 75rem; /* 1200px */
    }

    /* 取消第 7 個項目的跨欄設定 */
    .privilege-col:nth-child(7) {
        grid-column: auto;
        width: 100%;
    }
}

/* 單一卡片內部樣式 */
.privilege-card {
    background-color: transparent;
    padding: 10px 5px;
    text-align: center;
    height: 100%;
    transition: transform 0.3s ease;
}

.privilege-card:hover {
    transform: translateY(-4px); /* 滑鼠微懸浮提升 */
}

/* 1. 圓形底座 (88px ➔ 5.5rem) */
.privilege-icon-box {
    width: 5.5rem !important;       
    height: 5.5rem !important;
    background-color: #F3ECE1;    
    border: 0.0625rem solid #E2D4C0; /* 細邊框可用 1px 或 0.0625rem */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;       /* 16px ➔ 1rem */
    transition: all 0.3s ease;
    box-shadow: 0 0.1875rem 0.625rem rgba(0, 0, 0, 0.04); 
}

/* 2. 內部 Icon 圖案 (48px ➔ 3rem) */
.privilege-icon-box img {
    width: 3rem !important;       
    height: 3rem !important;
    object-fit: contain;
    filter: brightness(0.85);
}

/* 3. 滑鼠懸浮效果 */
.privilege-card:hover .privilege-icon-box {
    background-color: #0F2232;    
    border-color: #0F2232;
    transform: translateY(-0.25rem); /* -4px ➔ -0.25rem */
    box-shadow: 0 0.375rem 0.9375rem rgba(15, 34, 50, 0.15);
}

.privilege-card:hover .privilege-icon-box img {
    filter: brightness(0) invert(1); 
}

/* 4. 標題文字 (15px ➔ 0.9375rem) */
.privilege-title {
    font-size: 0.9375rem;          
    color: #222222;
    font-weight: 600;             
    line-height: 1.4;
}


/* 📱 平板/手機版 RWD 自適應 */
@media (max-width: 991.98px) {
    .privilege-col {
        flex: 0 0 calc(25% - 12px); /* 平板版：一排 4 個 */
    }
}

@media (max-width: 575.98px) {
    .privilege-col {
        flex: 0 0 calc(50% - 12px); /* 手機版：一排 2 個 */
    }
}



/* ==========================================
   「流暢體驗 品質保證」完整微調 CSS (直角/全齊高/rem)
   ========================================== */

/* 1. 外層欄位容器：強制 Flex 佈局以實現卡片齊高 */
.scroll-item {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 1.5rem !important; /* RWD 換行時的下間距 */
    border-radius: 0 !important;       /* 直角化 */
}

/* 2. 圖片外盒：固定 16:10 黃金比例 + 直角 */
.img-wrapper {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
    background-color: #f0f0f0 !important;
    border-radius: 0 !important;       /* 直角化 */
}

/* 圖片本人：滿版裁切不變形 */
.img-wrapper img,
.img-wrapper .custom-fit-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

/* 微 Hover 效果：滑鼠移入圖片微微放大 */
.scroll-item:hover .img-wrapper img {
    transform: scale(1.04) !important;
}

/* 3. 下方文字區塊 (.about-box)：直角 + 填滿剩餘高度 */
.about-box {
    background: #ffffff !important;
    padding: 1.25rem 1.125rem 1.25rem 1.125rem !important;
    border: 0.0625rem solid #e9e9e9 !important; /* 1px 微淡邊框 */
    border-top: none !important;                 /* 無縫銜接上方圖片 */
    border-radius: 0 !important;                /* 直角化 */
    
    /* 核心齊高設定：讓文字區自動延伸填滿，4 欄底部絕對水平對齊 */
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.03) !important;
    transition: box-shadow 0.3s ease !important;
}

.scroll-item:hover .about-box {
    box-shadow: 0 0.5rem 1.25rem rgba(15, 34, 50, 0.08) !important;
}

/* 4. 標題與 Icon 排版優化 */
.about-box h5.tm-A {
    font-size: 1.0625rem !important; /* 17px */
    color: #0F2232 !important;       /* 品牌深藍 */
    margin-bottom: 0.875rem !important;/* 14px */
    line-height: 1.4 !important;
    
    /* Icon 與文字彈性水平對齊 + 拉開間距 */
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;        /* Icon 與文字間距 10px */
}

/* 獎牌 Icon 質感優化 */
.about-box h5.tm-A i {
    color: #C5A059 !important;       /* 質感金 */
    font-size: 1rem !important;      /* 16px */
    flex-shrink: 0 !important;       /* 防止圖示擠壓 */
}

/* 5. 內文結構間距修正 */
.about-box ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 !important;              /* 讓內文填滿剩餘高度 */
}

.about-box ul p {
    font-size: 0.875rem !important;  /* 14px */
    color: #555555 !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    text-align: justify !important;  /* 兩端對齊 */
}



/* ==========================================
   「優雅船舶 / 房型展示區」深藍區塊修復版
   ========================================== */

/* 1. 全局色系 */
.text-gold { color: #C5A059 !important; }
.text-navy { color: #0F2232 !important; }

/* 2. 大圖區域 (16:10 比例 + 全直角) */
.main-img-box {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
    background-color: #f4f4f4 !important;
    border-radius: 0 !important;
    border: none !important;
}

.main-img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 左右切換箭頭 (懸浮半透明) */
.main-img-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(15, 34, 50, 0.4) !important;
    color: #ffffff !important;
    border: none !important;
    width: 2.25rem !important;  /* 36px */
    height: 3rem !important;    /* 48px */
    font-size: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: background 0.3s ease !important;
    border-radius: 0 !important;
}

.main-img-nav:hover {
    background: rgba(197, 160, 89, 0.9) !important;
}

.btn-prev { left: 0 !important; }
.btn-next { right: 0 !important; }

/* 3. 縮圖列表 (直角 + 金色外框) */
.thumb-carousel-row {
    padding-bottom: 0.25rem !important;
}

.thumb-item {
    width: 4.5rem !important;
    height: 3rem !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
    opacity: 0.6 !important;
    transition: all 0.3s ease !important;
    border-radius: 0 !important;
}

.thumb-item:hover {
    opacity: 0.9 !important;
}

/* 選中的縮圖：金色邊框 */
.thumb-item.active {
    opacity: 1 !important;
    border-color: #C5A059 !important;
}

/* 4. 右側資訊白盒 (修正邊框與內距) */
.cabin-info-card {
    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.04) !important;
    border-radius: 0 !important;
    padding: 1.5rem !important;
    height: 100% !important;
}

/* 5. 🔥 強制清除「深藍色塊」，還原極簡底線 Tab */
.custom-tabs,
ul.custom-tabs,
#cabinTab {
    background-color: transparent !important; /* 強制去除深藍底色 */
    background: transparent !important;
    border-bottom: 1px solid #E5E5E5 !important; /* 灰底細線 */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    gap: 1.5rem !important;
}

.custom-tabs .nav-item {
    background: transparent !important;
    margin: 0 !important;
}

/* Tab 按鈕本體 */
.custom-tabs .nav-link {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #666666 !important; /* 預設灰字 */
    font-size: 0.9375rem !important; /* 15px */
    font-weight: 500 !important;
    padding: 0 0 0.625rem 0 !important; /* 只留底部內距 */
    position: relative !important;
    border-radius: 0 !important;
}

.custom-tabs .nav-link:hover {
    color: #0F2232 !important;
}

/* 選中的 Tab (Active) */
.custom-tabs .nav-link.active {
    color: #C5A059 !important; /* 金色字 */
    font-weight: 700 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* 選中的 Tab 底部金色線條 */
.custom-tabs .nav-link.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #C5A059 !important;
}

/* 6. 內文與條列美化 */
.custom-bullet {
    padding-left: 0 !important;
    margin: 0 !important;
}

.custom-bullet li {
    list-style: none !important;
    position: relative !important;
    padding-left: 1.25rem !important; /* 20px */
    margin-bottom: 0.75rem !important;
    line-height: 1.6 !important;
    color: #444444 !important;
    font-size: 0.875rem !important;
}

/* 金色小菱形圖示 */
.custom-bullet li::before {
    content: '◆' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.15rem !important;
    font-size: 0.5rem !important;
    color: #C5A059 !important;
}

.custom-bullet li.fw-bold {
    color: #0F2232 !important;
    font-weight: 700 !important;
}

/* ==========================================
   艙房展示區：左右等高與獨立內文捲動軸
   ========================================== */

/* 1. 確保父層 Row 的子元素高度一致 */
.cabin-container .row {
    align-items: stretch !important;
}

/* 2. 右側資訊卡片：強制高與左欄相同，且設為 Flex 佈局 */
.cabin-info-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    overflow: hidden !important; /* 防止卡片本身爆開 */
}

/* 3. 頁籤 Tab 保持固定在頂部 */
.custom-tabs {
    flex-shrink: 0 !important; /* 確保 Tab 標籤不會被擠壓 */
}

/* 4. Tab 內容容器：自動填滿剩餘高度 + 獨立隱藏式捲動軸 */
.cabin-info-card .tab-content {
    flex-grow: 1 !important;
    height: 0 !important;        /* 關鍵：強制吃滿 flex 剩餘高度 */
    overflow-y: auto !important; /* 內容過長時出現縱向捲動軸 */
    padding-right: 0.5rem !important; /* 避免文字貼近捲動軸 */
}

/* 5. 美化 Tab 內文捲動軸 (細緻極簡質感) */
.cabin-info-card .tab-content::-webkit-scrollbar {
    width: 4px; /* 超細質感捲動條 */
}

.cabin-info-card .tab-content::-webkit-scrollbar-track {
    background: #FAF8F5; /* 與背景同色系的軌道 */
}

.cabin-info-card .tab-content::-webkit-scrollbar-thumb {
    background: #C5A059; /* 品牌金色滑塊 */
    border-radius: 0px;
}

.cabin-info-card .tab-content::-webkit-scrollbar-thumb:hover {
    background: #0F2232; /* Hover 時轉深藍 */
}

/* Firefox 捲動軸相容設定 */
.cabin-info-card .tab-content {
    scrollbar-width: thin;
    scrollbar-color: #C5A059 #FAF8F5;
}

/* ==========================================
   艙房區塊 RWD 修復：手機版內容不空白，電腦版保持等高
   ========================================== */

/* 預設 (手機版 / 平板版)：恢復自然高度，絕不變空白 */
.cabin-info-card {
    height: auto !important;
}

.cabin-info-card .tab-content {
    height: auto !important;
    overflow-y: visible !important;
}

/* 電腦版 (螢幕寬度 >= 992px)：才開啟「左右等高 + 獨立捲動軸」 */
@media (min-width: 992px) {
    .cabin-container .row {
        align-items: stretch !important;
    }

    .cabin-info-card {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .cabin-info-card .tab-content {
        flex-grow: 1 !important;
        height: 0 !important;        /* 電腦版吃滿剩餘高度 */
        overflow-y: auto !important; /* 電腦版出現質感捲動軸 */
        padding-right: 0.5rem !important;
    }
}

/* ==========================================
   直立式特色卡片 (Feature Cards) 樣式
   ========================================== */

.feature-card {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4; /* 直立黃金比例 3:4 */
    overflow: hidden;
    cursor: pointer;
}

/* 背景圖片與滑鼠懸浮放大效果 */
.feature-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.feature-card:hover .feature-card-img {
    transform: scale(1.08); /* 滑鼠移入時放大 8% */
}

/* 底部黑色漸層遮罩 (確保白字清楚) */
.feature-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 70%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 30px 15px;
    text-align: center;
    color: #ffffff;
    z-index: 2;
}

/* 卡片標題 */
.feature-card-title {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

/* 「了解詳情」按鈕與下劃線 */
.feature-card-link {
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    position: relative;
    padding-bottom: 4px;
    letter-spacing: 1px;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

/* 底部的白色橫線 */
.feature-card-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background-color: #ffffff;
    transition: width 0.3s ease;
}

.feature-card:hover .feature-card-link {
    opacity: 1;
}


/* ==========================================
   餐飲區塊獨立視覺風格 (沙色質感 + 高級金線)
   ========================================== */

/* 1. 整個餐飲區背影：改用溫潤的米沙色，跟前後純白單元區隔 */
.dining-section {
    background-color: #FAF8F5 !important;
    border-top: 1px solid #EFECE6;
    border-bottom: 1px solid #EFECE6;
}

/* 2. 主標題下方的精緻金色小分界線 */
.title-gold-line {
    width: 40px;
    height: 2px;
    background-color: #C5A059;
    margin: 0 auto;
}

/* 3. 分類標題樣式 (簡潔英文字 + 中文襯線大字 + 金線) */
.dining-cat-header .sub-title-gold {
    color: #C5A059;
    font-size: 0.75rem;
    letter-spacing: 2px;
    font-weight: 600;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.25rem;
}

.dining-cat-header .cat-main-title {
    color: #0F2232;
    font-size: 1.75rem;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
}

.dining-cat-header .cat-line {
    width: 60px;
    height: 1px;
    background-color: #C5A059;
    margin: 0 auto;
}

/* 4. 餐廳卡片獨立質感 (純白底色 + 精緻浮雕陰影) */
.restaurant-card {
    background-color: #ffffff !important;
    border: 1px solid #EAE6DF !important;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(15, 34, 50, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 滑鼠移上去時微微浮起，增加層次感 */
.restaurant-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(15, 34, 50, 0.07);
}

/* 圖片與內文調整 */
.rest-img-box img {
    min-height: 280px;
}

.text-gold {
    color: #C5A059 !important;
}

.tag-item {
    display: inline-block;
    font-size: 0.8125rem;
    padding: 0.25rem 0.6rem;
    background-color: #F5F3EF;
    color: #555555;
    margin-right: 0.4rem;
    margin-bottom: 0.4rem;
}

/* 標籤樣式 */
.badge {
	border-radius: 0rem;
}

.badge-gold-outline {
    border: 1px solid #C5A059;
    color: #C5A059;
    background-color: #FAF3E8;
    font-weight: 500;
    padding: 0.35em 0.65em;
}

.badge-dark {
    background-color: #0F2232;
    color: #ffffff;
    font-weight: 400;
    padding: 0.35em 0.65em;
}
/* 黑色典雅邊框標籤 (用於收費項目) */
.badge-dark-outline {
    border: 1px solid #0F2232;
    color: #0F2232;
    background-color: transparent;
    font-weight: 500;
    padding: 0.35em 0.65em;
}
/* RWD 手機版優化 */
@media (max-width: 991.98px) {
    .rest-img-box img {
        height: 220px !important;
    }
    
    .rest-info-box {
        padding: 1.5rem !important;
    }
}
/* ==========================================
   餐廳卡片圖片不變形修正 (Fix Image Stretch)
   ========================================== */

/* 1. 電腦版：讓圖片保持比例自動裁切，絕對不變形 */
.rest-img-box {
    position: relative;
    overflow: hidden;
}

.rest-img-box img {
    width: 100%;
    height: 100%;
    /* 核心屬性：保持圖片原始比例填滿，多餘部分自動裁切 */
    object-fit: cover !important; 
    object-position: center center; /* 裁切時聚焦在圖片正中央 */
}

/* 2. 手機版與平板 (螢幕寬度 991px 以下)：固定圖片高度 */
@media (max-width: 991.98px) {
    .rest-img-box {
        height: 240px !important; /* 固定手機版圖片高度 */
        width: 100%;
    }
    
    .rest-img-box img {
        height: 100% !important;
        object-fit: cover !important;
    }
}
/* ==========================================
   臻享酒水套餐 Pop-up 按鈕與 Modal 樣式
   ========================================== */

/* 1. 分類下的觸發按鈕 */
.btn-beverage-package {
    background-color: #FAF3E8;
    color: #8C6D31;
    border: 1px solid #C5A059;
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-beverage-package:hover {
    background-color: #C5A059;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(197, 160, 89, 0.3);
}

/* 2. Modal 金色輔助元素 */
.bg-gold-light {
    background-color: #FAF5EC;
}

.border-gold {
    border-color: #C5A059 !important;
}

/* 3. Modal 內容字體與調性對齊 */
#beveragePackageModal .modal-header {
    background-color: #0F2232 !important;
}

#beveragePackageModal .table-dark {
    background-color: #0F2232;
    color: #FAF5EC;
}

#beveragePackageModal .table-dark th {
    border-color: #2A3F50;
    font-weight: 500;
}
/* ==========================================
   「常見問題 FAQ」全直角優雅手風琴 CSS
   ========================================== */

/* 1. FAQ 網格外盒容器 */
.faq-accordion {
    max-width: 56.25rem; /* 900px，適中的閱讀寬度 */
    margin: 0 auto;
    border-radius: 0 !important;
}

/* 2. 手風琴單一項目 (Accordion Item) */
.faq-accordion .accordion-item {
    background-color: #ffffff !important;
    border: 1px solid #E5E5E5 !important; /* 淺灰邊框 */
    border-radius: 0 !important;          /* 100% 直角 */
    margin-bottom: 0.75rem !important;    /* 項目間距 12px */
    overflow: hidden !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover 與展開時的輕微邊框提亮 */
.faq-accordion .accordion-item:hover {
    border-color: #C5A059 !important;
}

/* 3. 手風琴標題按鈕 (.accordion-button) */
.faq-accordion .accordion-button {
    font-size: 1.0625rem !important; /* 17px */
    font-weight: 500 !important;
    color: #0F2232 !important;       /* 品牌深藍 */
    background-color: #ffffff !important;
    padding: 1.125rem 1.25rem !important;
    border-radius: 0 !important;
    box-shadow: none !important;     /* 移除 Bootstrap 點擊藍色外框 */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 懸浮時標題文字變金色 */
.faq-accordion .accordion-button:hover {
    color: #C5A059 !important;
    background-color: #FAF9F6 !important;
}

/* 點開時 (Not Collapsed) 的狀態 */
.faq-accordion .accordion-button:not(.collapsed) {
    color: #C5A059 !important;       /* 金色文字 */
    background-color: #FAF8F5 !important; /* 淡米灰背景 */
    font-weight: 700 !important;
    border-bottom: 1px solid #EFECE6 !important;
}

/* 4. Q. 與 A. 標籤細節美化 */
.faq-q-tag {
    color: #C5A059 !important;       /* Q. 為品牌金 */
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    margin-right: 0.625rem !important; /* 與文字間距 10px */
    display: inline-block;
}

.faq-a-tag {
    color: #0F2232 !important;       /* A. 為深藍 */
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    margin-right: 0.5rem !important;
}

/* 5. 手風琴展開後的回答內容區 (.accordion-body) */
.faq-accordion .accordion-body {
    padding: 1.25rem 1.5rem 1.5rem 1.5rem !important;
    background-color: #FAF8F5 !important; /* 展開後維持舒服的淺米色背景 */
    color: #444444 !important;
    font-size: 0.9375rem !important;     /* 15px */
    line-height: 1.75 !important;       /* 舒適行高 */
    text-align: justify !important;      /* 兩端對齊 */
}
/* ==========================================
   FAQ 答案區塊：文字與標籤全轉深藍色
   ========================================== */

/* 1. 答案整體內容 (強行蓋過預設灰字) */
#vikingFaqAccordion .accordion-body,
.faq-accordion .accordion-body,
.faq-accordion .accordion-body * {
    color: #0F2232 !important; /* 品牌深藍 */
}

/* 2. 答案 A. 標籤 (若有顯示) */
.faq-accordion .faq-a-tag {
    color: #0F2232 !important;
    font-weight: 700 !important;
}

/* 6. 改造右側切換箭頭 (Icon) */
.faq-accordion .accordion-button::after {
    filter: grayscale(100%) opacity(0.6); /* 強制降噪 */
    transition: transform 0.3s ease, filter 0.3s ease !important;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
    filter: sepia(100%) hue-rotate(10deg) saturate(300%) !important; /* 展開時轉為金色箭頭 */
    transform: rotate(-180deg) !important;
}

/* 表尾宣告 */
footer {
	font-size: .9rem;
	line-height: 1.6em;
}
footer span {
	clear: both;
	display: block;
	padding-top: .6rem;
	margin-bottom: 1.6rem;
	font-weight: 900;
}
.footer-ul{
	margin: 0;
}
.bg-primary {
    background-color: #d82a43!important;
}
.copyright {
    font-size: 13px;
	text-align: center;
	color: white;
}
#back-top {
    position: fixed;
    bottom: 80px;
    right: 18px;
    padding: 0;
    margin: 0;
    z-index: 20;
}
#back-top a {
    text-decoration: none;
    display: block;
    color: #fff;
    font-size: 26px;
    z-index: 999;
    padding: 5px;
    height: 42px;
    width: 42px;
    background: #d82a43;
    border-radius: 50%;
}
#back-top a i{
	position:relative;
	left:8px;
	top:-4px;
	bottom:7px;
}

/* ==========================================
   右側浮動「前往訂購」按鈕
   ========================================== */
.side-order-btn {
    position: fixed;
    top: 60%;
    right: 0;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background-color: #C5A059;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 3px;
    padding: 1.75rem 0.75rem;
    border-radius: 8px 0 0 8px;
    text-decoration: none;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
    z-index: 1030;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
}

.side-order-btn.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.side-order-btn:hover {
    background-color: #8C6D31;
    color: #ffffff;
    padding-right: 1rem;
}

@media (max-width: 767.98px) {
    .side-order-btn {
        right: 0;
        font-size: 1rem;
        padding: 1.375rem 0.6rem;
    }
}

/* ==========================================
   Header 內「前往訂購」按鈕
   ========================================== */
.nav-link-order-btn.nav-link {
    background-color: #C5A059 !important;
    color: #ffffff !important;
    border-radius: 50px;
    padding: 0.25rem 1.25rem !important;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.nav-link-order-btn.nav-link:hover {
    background-color: #8C6D31 !important;
    color: #ffffff !important;
}


/* ==========================================
   維京遊輪產品獨立頁專用樣式 (main.css)
   ========================================== */

/* 1. 基本字型與顏色 */
body {
  font-family: 'Noto Sans TC', sans-serif;
  background-color: #fcfcfc;
  color: #333333;
}

.noto-serif-jp-500 {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
}

.border-navy {
  border-color: #1a2b49 !important;
}

.text-navy {
  color: #1a2b49 !important;
}

.bg-gold {
  background-color: #c49a45 !important;
}

.border-light-gray {
  border: 1px solid #e2e8f0;
}

/* 2. 標題與 Icon 風格 */
.titA.indp {
  text-align: center;
}

.titA.indp .t-icon-box {
  margin-bottom: 10px;
}

.titA.indp .t-icon-box img {
  width: 40px;
  height: auto;
}

.titA.indp h2 {
  color: #1a2b49;
  font-size: 2rem;
  margin-bottom: 8px;
}

.titA.indp h4 {
  color: #c49a45;
  font-size: 1.1rem;
  font-weight: normal;
}

/* 3. 本頁指定元件：直角設定 */
.product-detail-page .card,
.product-detail-page .btn,
.product-detail-page .badge,
.product-detail-page .pd-hero-img,
.product-detail-page .route-map-box,
.product-detail-page .p-3 {
  border-radius: 0;
}

/* 4. 圖片與區塊 */
.pd-hero-img {
  max-height: 420px;
  width: 100%;
  object-fit: cover;
}

.section-title {
  color: #1a2b49;
  font-size: 1.4rem;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.highlight-list {
  line-height: 2;
  color: #4a4a4a;
}

/* 5. 行程簡表時間軸 */
.timeline-city {
  color: #1a2b49;
  font-size: 1.05rem;
}

.time-tag {
  font-size: 0.85rem;
  color: #888888;
}

/* 6. 航程地圖區塊 */
.route-map-box {
  width: 100%;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  text-align: center;
}

.route-map-box img {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
}

/* 7. 右側側欄與價格卡片 (對齊附圖) */
.booking-sidebar {
  top: 20px;
}

.price-symbol {
  font-size: 1.6rem;
}

.price-amount {
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1;
}

/* 8. 深藍色優惠方案卡片 */
.promo-card {
  background-color: #11233b;
}

.promo-main-title {
  color: #ffffff;
  font-size: 1.75rem;
  line-height: 1.3;
  letter-spacing: 0.5px;
}

.promo-item {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.promo-item:first-of-type {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.promo-text {
  line-height: 1.6;
}

.promo-text strong {
  font-weight: 700;
  color: #ffffff;
}

/* 按鈕風格 */
.btn-navy {
  background-color: #1a2b49;
  color: #ffffff;
  border: none;
  transition: background-color 0.2s;
}

.btn-navy:hover {
  background-color: #0f1c33;
  color: #ffffff;
}

/* RWD 響應式：手機版 */
@media (max-width: 768px) {
  .pd-main-layout {
    flex-direction: column;
  }
  .pd-sidebar-right {
    width: 100%;
  }
  .pd-banner {
    height: 220px;
  }
  .pd-fee-grid {
    flex-direction: column;
  }
}

/* RWD 平板與手機適應 */
@media (max-width: 991px) {
  .sticky-booking-card {
    position: static;
  }
}





@media (max-width: 1279px){
	.caption {
    margin: 10vh 15% 0 15%;
	}
.tour-box {
	border-top: solid 1px #e6c286;
	border-left: none;
}

}
@media (max-width: 992px) {
	.bg-g50 {
		background-color: rgba(0, 0, 0, .5);
	}
	.mwlogo {
	width: 30%;
	}
	.caption {
	width: 80%;
    margin: 10vh 10% 0 10%;
	}
	.ci-txt p {
	font-size: 1.5rem;
	}
	.laurel-box {
	width: 55%;
	}

}

@media (max-width: 768px) {
	.ci-bg1 {
        background-size: auto 100%;
    }
	.indtit {
		width: 60%;
	}
	.sale {
		width: 98%;
	}
	.caption {
	width: 80%;
    margin: 5vh 10% 0 10%;
	display: block;	
	}
	.ci-txt h2 {
		font-size: 2rem;
		font-weight: 700;
	}
	.ci-txt h3 {
		font-size: 1.2rem;
		font-weight: 500;
	}
	.ci-txt h4 {
		font-size: .8rem;
		font-weight: 100;
	}
	/* 單元標題 */
.titA {
	padding: 30px 0;
}
.titA h2 {
	color: #af7f4f;
	font-size: 1.6rem;
}
.titA h4 {
	font-size: 1.2rem;
	/* border: solid 1px #e6c286; */
	padding: 10px 25px;
}

}

@media (max-width: 576px) {
	footer {
		text-align: center;
	}
	.mwlogo {
	width: 28%;
	}

	.indtit {
		width: 35%;
	}
	.sale-txt h5 {
		font-size: 1.2em!important;
	}
	.sale-txt h6 {
		font-size: .9em!important;
	}
	.caption {
    	margin: 5vh 10% 0 10%;
		display: block;	
		text-align: center;
	}
}
@media (max-width: 375px) {
	.ci-txt h6 {
		font-size: 1.8rem;
		margin-bottom: 0;
	}
	.ci-txt h5 {
		margin-bottom: 0;
	}
}	


/* ==========================================
   維京遊輪產品價格表
   ========================================== */



/* 表格本體 */
.price-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    outline: 1px solid #e2e8f0;
}

.price-table th,
.price-table td {
    padding: 14px 12px;
    border: 1px solid #e2e8f0;
    text-align: center !important;
    vertical-align: middle;
}

.price-table th {
    background-color: #1f2a44;
    color: #ffffff;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.price-table tbody td.product-name {
    text-align: left !important;
    font-weight: 500;
    color: #1f2a44;
}

.price {
    color: #d9383a;
    font-weight: 600;
    white-space: nowrap;
}

.empty-cell {
    color: #a0aec0;
}

/* 精確控制單雙數產品背景色 */
.price-table tbody tr.row-odd,
.price-table tbody tr.row-odd td {
    background-color: #ffffff;
}

.price-table tbody tr.row-even,
.price-table tbody tr.row-even td {
    background-color: #f8fafc;
}

/* Hover 高亮 */
.price-table tbody tr:hover td {
    background-color: #f1f5f9;
}

@media (max-width: 768px) {
    .container {
        padding: 15px;
        overflow-x: auto;
    }
}

/* ==========================================
   維京遊輪 優惠 Banner 樣式 (適用列表頁與側邊欄)
   ========================================== */
.viking-promo {
  max-width: 1120px;
  margin: 32px auto;
  background-color: #f8f6f1;
  border-color: #c9a454 !important;
}

.promo-kicker,
.promo-label {
  color: #b08b43 !important;
}

.promo-title,
.promo-more {
  color: #142844 !important;
  white-space: normal !important;
  word-break: break-word;
}

.promo-more {
  text-decoration: underline;
}

.promo-notice li {
  white-space: normal !important;
  word-break: break-word;
  line-height: 1.6;
}

/* 手機版主選單：展開清單與上方 header 拉開間距 */
@media (max-width: 991.98px) {
  .navbar .navbar-collapse {
    margin-top: 1rem;
  }
}