@import url(../../cckm-box.css);
@import url(../../cckm-grid.css);
@import url(../../shop/shop.css);
@import url(../../shop/checkout.css);
@import url(../../sec/func/subscribe.css);

@import url(../../shop/course/classroom.css); /* 章節 */

/** 背景 **/
.single-service:before {
	background-image:url(https://d1r4509tniam8v.cloudfront.net/img/shop-course-bg.png);
    background-size: cover; background-position: center 60%; background-repeat: no-repeat; opacity: 0.15;
	position: absolute; height: 200px; width: 100%; top: 0; border-bottom-left-radius: 50% 30%; border-bottom-right-radius: 50% 30%;
}
@media (max-width:767px) {
	.single-service:before { height: 230px; background-position: 60%;  border-bottom-left-radius: 50% 20%; border-bottom-right-radius: 50% 20%; }
}

.single-service { padding-bottom: 0; }
.single-service img { width: 100%; height: 100%; }
.single-service .sub-result img { height: auto; }
.single-service .context h3 {  margin-top: 0 }
.single-service .lecturer { border-left: 5px solid rgb(var(--gold-color)); padding-left: 8px; font-size: 110%; }

.single-service .service-content .top-side .action-bar { position: absolute; bottom: 30px; left: 50px; }
@media (max-width:991px) {
	.single-service .service-content .top-side .action-bar { position: relative; bottom: 0; left: 0; background: rgb(var(--gray-eee-color)); width: 100%; border-top: 1px solid rgb(var(--gray-ccc-color)); padding: 15px 20px; z-index: 1000; }
}
.single-service .service-content p, 
.single-service .service-content ul li { line-height: 30px; margin-bottom: 15px; }

.single-service .no-info img { background: none}

@media (max-width:767px) {
	.single-service { padding-left: 5px; padding-right: 5px; }
	.single-service .service-sub .sub-item { padding-left: 15px; padding-right: 15px; }
}

.single-service .service-sub .thumbnail { height:auto; }
.single-service .service-sub .thumbnail .caption .series { margin-top: 10px; }

.single-service .service-item .func-info .qr-code a > span { border-bottom: 1px solid rgb(var(--gold-color)) }
.single-service .service-item .func-info .qr-code a:hover > span { border-bottom-width: 3px}

/* 讓卡片本身成為一個垂直的 Flex 容器 */
.price-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
}

/* Header 保持在頂部 (預設行為) */
.card-header { margin-bottom: 20px; }
.card-header span {
	font-size: smaller;
	border-bottom: 1px solid rgb(var(--gold-color));
	padding-bottom: 3px;
}

/* 關鍵：讓 Body 自動撐開剩餘空間，並使其內容居中 */
.card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;    /* 垂直居中 */
	justify-content: center; /* 水平居中 */
}
.card-body .price-value {
	font-size: x-large;
	color: #8a6d3b;
}
.card-body .price-value small {
	font-size: small;
}
/* 列表樣式調整：避免爆掉 */
.plan-features {
    margin-top: 10px; padding-left: 0;
    text-align: left; /* 列表文字靠左比較好讀 */
    width: auto;
    max-width: 90%;
}

.plan-features li {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
    position: relative;
    padding-left: 15px;
}