/* DYT-Blocks Frontend Styles */
/* =============================================================
 * 區塊三：標題色塊 Title Card (dyt-tc-*)
 * 只控制一個主色 (--tc-primary)，其餘變數由 JS 依 HSL 公式自動算出：
 * --tc-primary-dark / --tc-primary-darker / --tc-primary-light /
 * --tc-accent / --tc-accent-light / --tc-text-on-primary
 * ============================================================= */
.dyt-tc-card {
	position: relative;
	margin: 1.5em auto;
	max-width: 420px;
	font-family: inherit;
}

/* 用 .dyt-tc-card 疊加提高選擇器優先度，避免主題的 h2/h3/h4 全域樣式
   （通常較晚載入、同樣是 class 選擇器）蓋掉這裡設定的顏色。 */
.dyt-tc-card .dyt-tc-title-text {
	margin: 0;
	font-size: 22px;
	font-weight: 900;
	letter-spacing: 2px;
	color: var( --tc-title-color-override, var( --tc-primary, #113285 ) );
}
.dyt-tc-card .dyt-tc-title-text.dyt-tc-text-on-primary {
	color: var( --tc-title-color-override, var( --tc-text-on-primary, #ffffff ) );
}

/* ===== banner-1：階梯箭頭橫幅 ===== */
.dyt-tc-style-banner-1 {
	--tc-arrow-size: 42.5px;
	display: flex;
	width: 100%;
	height: 60px;
	background-color: #ffffff;
	box-shadow: 0 6px 16px rgba( var( --tc-primary-rgb ), 0.28 );
	border-radius: 2px;
	overflow: hidden;
}
.dyt-tc-style-banner-1 .dyt-tc-step-num {
	position: relative;
	width: 80px;
	background: var( --tc-accent-gradient );
	color: var( --tc-label-color, #ffffff );
	font-size: 28px;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-right: 8px;
	z-index: 3;
}
.dyt-tc-style-banner-1 .dyt-tc-step-num::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: var( --tc-arrow-size );
	height: var( --tc-arrow-size );
	background-color: var( --tc-accent-dark );
	box-sizing: border-box;
	border-top: 4px solid #ffffff;
	border-right: 4px solid #ffffff;
	box-shadow: 2px -2px 4px rgba( 0, 0, 0, 0.15 );
	transform: translateY( -50% ) translateX( 50% ) rotate( 45deg );
}
.dyt-tc-style-banner-1 .dyt-tc-step-num span {
	position: relative;
	z-index: 2;
}
.dyt-tc-style-banner-1 .dyt-tc-step-title {
	position: relative;
	flex-grow: 1;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 15px;
	z-index: 2;
}
.dyt-tc-style-banner-1 .dyt-tc-step-title::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: var( --tc-arrow-size );
	height: var( --tc-arrow-size );
	background-color: #ffffff;
	transform: translateY( -50% ) translateX( 50% ) rotate( 45deg );
	z-index: 1;
}
.dyt-tc-style-banner-1 .dyt-tc-title-text {
	position: relative;
	z-index: 2;
}
.dyt-tc-style-banner-1 .dyt-tc-step-end {
	width: 50px;
	background: var( --tc-accent-gradient );
	position: relative;
	z-index: 1;
}

/* ===== banner-2：雙斜線嵌入標籤 ===== */
.dyt-tc-style-banner-2.dyt-tc-card {
	max-width: 440px;
}
.dyt-tc-style-banner-2 {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var( --tc-primary );
	box-shadow: 0 0 0 1.5px var( --tc-primary ), 0 8px 16px rgba( var( --tc-primary-rgb ), 0.3 );
	border: 2px solid #ffffff;
	padding: 18px 30px;
}
.dyt-tc-style-banner-2 .dyt-tc-title-text {
	letter-spacing: 4px;
	position: relative;
	z-index: 2;
}
.dyt-tc-style-banner-2::before,
.dyt-tc-style-banner-2::after {
	content: '';
	position: absolute;
	width: 48px;
	height: 8px;
	border-top: 1.5px solid var( --tc-primary );
	border-bottom: 1.5px solid var( --tc-primary );
	background-color: var( --tc-primary-light );
	z-index: 1;
}
.dyt-tc-style-banner-2::before {
	top: -6px;
	left: -18px;
	transform: rotate( -45deg );
}
.dyt-tc-style-banner-2::after {
	bottom: -6px;
	right: -18px;
	transform: rotate( -45deg );
}
.dyt-tc-style-banner-2.dyt-tc-mirror::before {
	left: auto;
	right: -18px;
	transform: rotate( 45deg );
}
.dyt-tc-style-banner-2.dyt-tc-mirror::after {
	right: auto;
	left: -18px;
	transform: rotate( 45deg );
}

/* ===== banner-3：多層次傾斜＋POINT標籤群 ===== */
.dyt-tc-style-banner-3 {
	position: relative;
	width: 100%;
	background-color: #ffffff;
	transform: skewX( -20deg );
	box-shadow: 2px 4px 14px rgba( var( --tc-primary-rgb ), 0.22 );
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 18px 40px 18px 20px;
}
.dyt-tc-style-banner-3 .dyt-tc-title-text {
	transform: skewX( 20deg );
	display: inline-block;
	position: relative;
	z-index: 4;
}
.dyt-tc-style-banner-3 .dyt-tc-stripe3 {
	position: absolute;
	top: 8%;
	bottom: -8%;
	width: 14px;
	transform: skewX( -20deg );
	z-index: 1;
}
.dyt-tc-style-banner-3 .dyt-tc-stripe3-1 {
	right: 46px;
	background: var( --tc-accent );
}
.dyt-tc-style-banner-3 .dyt-tc-stripe3-2 {
	right: 18px;
	top: -8%;
	bottom: 8%;
	width: 22px;
	background: var( --tc-primary-gradient );
	z-index: 2;
}
.dyt-tc-style-banner-3 .dyt-tc-stripe3-3 {
	right: -6px;
	background: var( --tc-accent );
}
.dyt-tc-style-banner-3 .dyt-tc-tag-group3 {
	position: absolute;
	top: -26px;
	left: 20px;
	z-index: 5;
	display: flex;
	align-items: center;
	transform: skewX( 20deg );
}
.dyt-tc-style-banner-3 .dyt-tc-tag-line3 {
	width: 16px;
	height: 6px;
	background: var( --tc-accent );
	margin-right: 8px;
}
.dyt-tc-style-banner-3 .dyt-tc-tag-box3 {
	background: var( --tc-primary );
	padding: 2px 12px;
}
.dyt-tc-style-banner-3 .dyt-tc-tag-box3 span {
	color: var( --tc-label-color, var( --tc-text-on-primary ) );
	font-size: 12px;
	font-weight: bold;
	font-style: italic;
	letter-spacing: 1px;
}
.dyt-tc-style-banner-3.dyt-tc-mirror {
	transform: skewX( 20deg );
	padding: 18px 20px 18px 40px;
}
.dyt-tc-style-banner-3.dyt-tc-mirror .dyt-tc-title-text {
	transform: skewX( -20deg );
}
.dyt-tc-style-banner-3.dyt-tc-mirror .dyt-tc-stripe3 {
	right: auto;
	transform: skewX( 20deg );
}
.dyt-tc-style-banner-3.dyt-tc-mirror .dyt-tc-stripe3-1 { left: 46px; }
.dyt-tc-style-banner-3.dyt-tc-mirror .dyt-tc-stripe3-2 { left: 18px; }
.dyt-tc-style-banner-3.dyt-tc-mirror .dyt-tc-stripe3-3 { left: -6px; }
.dyt-tc-style-banner-3.dyt-tc-mirror .dyt-tc-tag-group3 {
	left: auto;
	right: 20px;
	transform: skewX( -20deg );
	flex-direction: row-reverse;
}
.dyt-tc-style-banner-3.dyt-tc-mirror .dyt-tc-tag-line3 {
	margin-right: 0;
	margin-left: 8px;
}

/* ===== banner-4：POINT 標籤＋上下雙銳角色塊 ===== */
.dyt-tc-style-banner-4 {
	position: relative;
	width: 100%;
	background-color: #ffffff;
	transform: skewX( -20deg );
	box-shadow: 2px 4px 14px rgba( var( --tc-primary-rgb ), 0.22 );
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 30px 16px 40px;
}
.dyt-tc-style-banner-4 .dyt-tc-title-text {
	transform: skewX( 20deg );
	position: relative;
	z-index: 4;
}
.dyt-tc-style-banner-4 .dyt-tc-left-stripe4,
.dyt-tc-style-banner-4 .dyt-tc-right-stripe4-1,
.dyt-tc-style-banner-4 .dyt-tc-right-stripe4-2 {
	position: absolute;
	background: var( --tc-primary );
	transform: skewX( -20deg );
	z-index: 2;
}
/* 上下雙銳角：色塊本體之外，左上角與右下角各凸出一個尖角 */
.dyt-tc-style-banner-4 .dyt-tc-left-stripe4::before,
.dyt-tc-style-banner-4 .dyt-tc-right-stripe4-1::before,
.dyt-tc-style-banner-4 .dyt-tc-right-stripe4-2::before {
	content: '';
	position: absolute;
	top: 0;
	left: -6px;
	width: 6px;
	height: 8px;
	background-color: var( --tc-primary );
	clip-path: polygon( 0 0, 100% 0, 100% 100% );
}
.dyt-tc-style-banner-4 .dyt-tc-left-stripe4::after,
.dyt-tc-style-banner-4 .dyt-tc-right-stripe4-1::after,
.dyt-tc-style-banner-4 .dyt-tc-right-stripe4-2::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: -6px;
	width: 6px;
	height: 8px;
	background-color: var( --tc-primary );
	clip-path: polygon( 0 0, 100% 100%, 0 100% );
}
.dyt-tc-style-banner-4 .dyt-tc-left-stripe4 {
	left: -6px;
	top: 8%;
	bottom: 8%;
	width: 22px;
}
.dyt-tc-style-banner-4 .dyt-tc-right-stripe4-1,
.dyt-tc-style-banner-4 .dyt-tc-right-stripe4-2 {
	top: 4%;
	bottom: 4%;
	width: 16px;
}
.dyt-tc-style-banner-4 .dyt-tc-right-stripe4-1 { right: 34px; }
.dyt-tc-style-banner-4 .dyt-tc-right-stripe4-2 { right: 10px; }
.dyt-tc-style-banner-4 .dyt-tc-point-group4 {
	position: absolute;
	top: -28px;
	left: 44px;
	z-index: 5;
	transform: skewX( 20deg );
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.dyt-tc-style-banner-4 .dyt-tc-point-text4 {
	color: var( --tc-label-color, var( --tc-primary ) );
	font-size: 13px;
	font-weight: bold;
	font-style: italic;
	letter-spacing: 1px;
	margin-bottom: 2px;
}
.dyt-tc-style-banner-4 .dyt-tc-point-lines4 {
	display: flex;
	align-items: center;
}
.dyt-tc-style-banner-4 .dyt-tc-solid-line4 {
	width: 46px;
	height: 2px;
	background: var( --tc-primary );
}
.dyt-tc-style-banner-4 .dyt-tc-dashed-line4 {
	width: 16px;
	height: 2px;
	margin-left: 4px;
	background-image: repeating-linear-gradient( to right, var( --tc-primary ) 0, var( --tc-primary ) 4px, transparent 4px, transparent 8px );
}
.dyt-tc-style-banner-4.dyt-tc-mirror {
	transform: skewX( 20deg );
	padding: 20px 40px 16px 30px;
}
.dyt-tc-style-banner-4.dyt-tc-mirror .dyt-tc-title-text {
	transform: skewX( -20deg );
}
.dyt-tc-style-banner-4.dyt-tc-mirror .dyt-tc-left-stripe4 {
	left: auto;
	right: -6px;
	transform: skewX( 20deg );
}
.dyt-tc-style-banner-4.dyt-tc-mirror .dyt-tc-right-stripe4-1,
.dyt-tc-style-banner-4.dyt-tc-mirror .dyt-tc-right-stripe4-2 {
	transform: skewX( 20deg );
}
.dyt-tc-style-banner-4.dyt-tc-mirror .dyt-tc-right-stripe4-1 { right: auto; left: 34px; }
.dyt-tc-style-banner-4.dyt-tc-mirror .dyt-tc-right-stripe4-2 { right: auto; left: 10px; }
.dyt-tc-style-banner-4.dyt-tc-mirror .dyt-tc-left-stripe4::before,
.dyt-tc-style-banner-4.dyt-tc-mirror .dyt-tc-right-stripe4-1::before,
.dyt-tc-style-banner-4.dyt-tc-mirror .dyt-tc-right-stripe4-2::before {
	left: auto;
	right: -6px;
	clip-path: polygon( 100% 0, 0 0, 0 100% );
}
.dyt-tc-style-banner-4.dyt-tc-mirror .dyt-tc-left-stripe4::after,
.dyt-tc-style-banner-4.dyt-tc-mirror .dyt-tc-right-stripe4-1::after,
.dyt-tc-style-banner-4.dyt-tc-mirror .dyt-tc-right-stripe4-2::after {
	right: auto;
	left: -6px;
	clip-path: polygon( 100% 0, 100% 100%, 0 100% );
}
.dyt-tc-style-banner-4.dyt-tc-mirror .dyt-tc-point-group4 {
	left: auto;
	right: 44px;
	transform: skewX( -20deg );
	align-items: flex-end;
}

/* ===== banner-5：圓角膠囊＋錯位漸層＋點狀裝飾 ===== */
.dyt-tc-style-banner-5.dyt-tc-card {
	max-width: 400px;
}
.dyt-tc-style-banner-5 {
	position: relative;
	height: 74px;
}
.dyt-tc-style-banner-5 .dyt-tc-wrapper5 {
	position: relative;
	width: 100%;
	height: 100%;
}
.dyt-tc-style-banner-5 .dyt-tc-shadow5 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var( --tc-accent-gradient );
	border-radius: 999px;
}
.dyt-tc-style-banner-5 .dyt-tc-body5 {
	position: absolute;
	top: 6px;
	left: 6px;
	width: calc( 100% - 12px );
	height: calc( 100% - 12px );
	background: var( --tc-primary-gradient );
	border-radius: 999px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	box-shadow: inset 0 2px 5px rgba( 255, 255, 255, 0.2 );
}
.dyt-tc-style-banner-5 .dyt-tc-inner-border5 {
	position: absolute;
	inset: 3px;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 999px;
	pointer-events: none;
}
.dyt-tc-style-banner-5 .dyt-tc-dots5 {
	position: absolute;
	width: 46px;
	height: 4px;
	background-image: radial-gradient( circle, rgba( 255, 255, 255, 0.9 ) 1.2px, transparent 1.2px );
	background-size: 7px 4px;
	background-repeat: repeat-x;
}
.dyt-tc-style-banner-5 .dyt-tc-dots5-tl { top: 8px; left: 30px; }
.dyt-tc-style-banner-5 .dyt-tc-dots5-br { bottom: 8px; right: 30px; }
.dyt-tc-style-banner-5.dyt-tc-mirror .dyt-tc-body5 { left: auto; right: 6px; }
.dyt-tc-style-banner-5.dyt-tc-mirror .dyt-tc-dots5-tl { left: auto; right: 30px; }
.dyt-tc-style-banner-5.dyt-tc-mirror .dyt-tc-dots5-br { right: auto; left: 30px; }

/* ===== banner-6：雙三角形嵌入白底 ===== */
.dyt-tc-style-banner-6.dyt-tc-card {
	max-width: 480px;
}
.dyt-tc-style-banner-6 {
	position: relative;
	width: 100%;
	background-color: #ffffff;
	border: 2px solid var( --tc-primary );
	padding: 16px 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
	box-shadow: 3px 4px 5px rgba( var( --tc-primary-rgb ), 0.15 );
}
.dyt-tc-style-banner-6::before {
	content: '';
	position: absolute;
	top: -8px;
	left: -10px;
	width: 45%;
	height: 60%;
	background: var( --tc-primary );
	clip-path: polygon( 0 0, 100% 0, 0 100% );
	z-index: -1;
}
.dyt-tc-style-banner-6::after {
	content: '';
	position: absolute;
	bottom: -8px;
	right: -10px;
	width: 55%;
	height: 65%;
	background: var( --tc-accent );
	clip-path: polygon( 100% 100%, 0 100%, 100% 0 );
	z-index: -1;
}
.dyt-tc-style-banner-6 .dyt-tc-deco-group6 {
	position: absolute;
	bottom: 10px;
	right: 16px;
	display: flex;
	align-items: center;
}
.dyt-tc-style-banner-6 .dyt-tc-deco-line6 {
	width: 90px;
	height: 1.5px;
	background: linear-gradient( to right, transparent, var( --tc-primary ) );
	margin-right: 4px;
}
.dyt-tc-style-banner-6 .dyt-tc-deco-arrows6 {
	display: flex;
	gap: 3px;
}
.dyt-tc-style-banner-6 .dyt-tc-deco-arrows6 span {
	display: block;
	width: 0;
	height: 0;
	border-left: 5px solid var( --tc-primary );
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
}
.dyt-tc-style-banner-6.dyt-tc-mirror::before {
	left: auto;
	right: -10px;
	clip-path: polygon( 100% 0, 0 0, 100% 100% );
}
.dyt-tc-style-banner-6.dyt-tc-mirror::after {
	right: auto;
	left: -10px;
	clip-path: polygon( 0 100%, 100% 100%, 0 0 );
}
.dyt-tc-style-banner-6.dyt-tc-mirror .dyt-tc-deco-group6 {
	right: auto;
	left: 16px;
	flex-direction: row-reverse;
}
.dyt-tc-style-banner-6.dyt-tc-mirror .dyt-tc-deco-line6 {
	background: linear-gradient( to left, transparent, var( --tc-primary ) );
	margin-right: 0;
	margin-left: 4px;
}
.dyt-tc-style-banner-6.dyt-tc-mirror .dyt-tc-deco-arrows6 span {
	border-left: none;
	border-right: 5px solid var( --tc-primary );
}

/* ===== banner-7：左右斜角點狀嵌入 ===== */
.dyt-tc-style-banner-7.dyt-tc-card {
	max-width: 420px;
}
.dyt-tc-style-banner-7 {
	position: relative;
	width: 100%;
	height: 60px;
	transform: skewX( -20deg );
	box-shadow: 2px 4px 14px rgba( var( --tc-primary-rgb ), 0.3 );
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: radial-gradient( rgba( 255, 255, 255, 0.3 ) 1px, transparent 1px ), var( --tc-primary-gradient );
	background-size: 6px 6px, 100% 100%;
	overflow: hidden;
}
.dyt-tc-style-banner-7 .dyt-tc-inner7 {
	position: absolute;
	top: 0;
	left: 40px;
	width: calc( 100% - 80px );
	height: 100%;
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.dyt-tc-style-banner-7 .dyt-tc-title-text {
	transform: skewX( 20deg );
}
.dyt-tc-style-banner-7.dyt-tc-mirror {
	transform: skewX( 20deg );
}
.dyt-tc-style-banner-7.dyt-tc-mirror .dyt-tc-inner7 {
	left: auto;
	right: 40px;
}
.dyt-tc-style-banner-7.dyt-tc-mirror .dyt-tc-title-text {
	transform: skewX( -20deg );
}

/* ===== banner-8：三層錯位＋凹槽數字塊 ===== */
.dyt-tc-style-banner-8 {
	position: relative;
	width: 100%;
	background: var( --tc-primary-gradient );
	transform: skewX( -20deg );
	box-shadow: 2px 4px 12px rgba( var( --tc-primary-rgb ), 0.32 );
	display: flex;
	align-items: center;
	padding: 15px 0;
}
.dyt-tc-style-banner-8 .dyt-tc-title-text {
	transform: skewX( 20deg );
	margin-left: 20px;
}
.dyt-tc-style-banner-8 .dyt-tc-num-block {
	position: relative;
	background: linear-gradient( 135deg, var( --tc-primary-dark ) 0%, var( --tc-primary-darker ) 100% );
	padding: 5px 15px;
	margin-left: 10px;
	color: var( --tc-label-color, var( --tc-text-on-primary ) );
	font-size: 24px;
	font-weight: 900;
	font-style: italic;
	transform: skewX( 20deg );
	box-shadow: inset 3px 3px 5px rgba( 0, 0, 0, 0.35 );
}
.dyt-tc-style-banner-8 .dyt-tc-num-block::before {
	content: '';
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background: linear-gradient( 135deg, var( --tc-primary-dark ) 0%, var( --tc-primary-darker ) 100% );
	transform: skewX( -20deg );
	z-index: -1;
}
.dyt-tc-style-banner-8::before {
	content: '';
	position: absolute;
	top: 0;
	right: -20px;
	width: 14px;
	height: 100%;
	background-color: var( --tc-accent-light );
	z-index: -2;
}
.dyt-tc-style-banner-8::after {
	content: '';
	position: absolute;
	top: 0;
	right: -10px;
	width: 20px;
	height: 100%;
	background-color: var( --tc-accent );
	z-index: -1;
}
.dyt-tc-style-banner-8.dyt-tc-mirror {
	transform: skewX( 20deg );
	flex-direction: row-reverse;
}
.dyt-tc-style-banner-8.dyt-tc-mirror .dyt-tc-title-text {
	transform: skewX( -20deg );
	margin-left: 0;
	margin-right: 20px;
}
.dyt-tc-style-banner-8.dyt-tc-mirror .dyt-tc-num-block {
	transform: skewX( -20deg );
	margin-left: 0;
	margin-right: 10px;
}
.dyt-tc-style-banner-8.dyt-tc-mirror .dyt-tc-num-block::before {
	transform: skewX( 20deg );
}
.dyt-tc-style-banner-8.dyt-tc-mirror::before { right: auto; left: -20px; }
.dyt-tc-style-banner-8.dyt-tc-mirror::after { right: auto; left: -10px; }

/* ===== banner-9：雙色標籤懸浮膠囊 ===== */
.dyt-tc-style-banner-9.dyt-tc-card {
	max-width: 420px;
}
.dyt-tc-style-banner-9 {
	position: relative;
	width: 100%;
	background-color: #ffffff;
	border: 1.5px solid rgba( var( --tc-primary-rgb ), 0.15 );
	border-radius: 50px;
	box-shadow: 0 6px 16px rgba( var( --tc-primary-rgb ), 0.18 );
	display: flex;
	align-items: center;
	padding: 16px 24px 16px 100px;
	margin-top: 12px;
}
.dyt-tc-style-banner-9 .dyt-tc-title-text {
	color: var( --tc-primary );
}
.dyt-tc-style-banner-9 .dyt-tc-badge9 {
	position: absolute;
	top: -10px;
	left: 24px;
	width: 64px;
	height: 88px;
	background: linear-gradient( to right, var( --tc-primary-bright ) 0%, var( --tc-primary-bright ) 50%, var( --tc-primary-dark ) 50%, var( --tc-primary-dark ) 100% );
	border-radius: 0 0 32px 32px;
	box-shadow: 2px 3px 6px rgba( var( --tc-primary-rgb ), 0.35 );
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 3;
}
.dyt-tc-style-banner-9 .dyt-tc-badge9::after {
	content: '';
	position: absolute;
	top: 0;
	right: -8px;
	border-bottom: 8px solid var( --tc-primary-darker );
	border-right: 8px solid transparent;
}
.dyt-tc-style-banner-9 .dyt-tc-badge-top {
	font-size: 10px;
	font-weight: bold;
	margin-top: 6px;
	letter-spacing: 1px;
	color: var( --tc-label-color, rgba( 255, 255, 255, 0.85 ) );
}
.dyt-tc-style-banner-9 .dyt-tc-badge-circle-outer9 {
	margin-top: 6px;
	width: 42px;
	height: 42px;
	border: 1px solid rgba( 255, 255, 255, 0.5 );
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.dyt-tc-style-banner-9 .dyt-tc-badge-circle-inner9 {
	width: 34px;
	height: 34px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.dyt-tc-style-banner-9 .dyt-tc-badge-circle-inner9 span {
	color: #ffffff;
	font-size: 16px;
	font-weight: 900;
}
.dyt-tc-style-banner-9.dyt-tc-mirror {
	padding: 16px 100px 16px 24px;
}
.dyt-tc-style-banner-9.dyt-tc-mirror .dyt-tc-badge9 {
	left: auto;
	right: 24px;
	background: linear-gradient( to left, var( --tc-primary-bright ) 0%, var( --tc-primary-bright ) 50%, var( --tc-primary-dark ) 50%, var( --tc-primary-dark ) 100% );
}
.dyt-tc-style-banner-9.dyt-tc-mirror .dyt-tc-badge9::after {
	right: auto;
	left: -8px;
	border-right: none;
	border-left: 8px solid var( --tc-primary-darker );
}

/* ===== banner-10：突破框架的膠囊＋雙層圓圈 ===== */
.dyt-tc-style-banner-10.dyt-tc-card {
	max-width: 420px;
}
.dyt-tc-style-banner-10 {
	position: relative;
	width: 100%;
	background-color: #ffffff;
	border: 2px solid var( --tc-primary-darker );
	border-radius: 50px;
	box-shadow: 3px 4px 0px rgba( var( --tc-primary-rgb ), 0.25 );
	display: flex;
	align-items: center;
	padding: 16px 24px 16px 56px;
	margin-top: 18px;
	margin-left: 24px;
}
.dyt-tc-style-banner-10 .dyt-tc-title-text {
	color: var( --tc-primary );
}
.dyt-tc-style-banner-10 .dyt-tc-circle {
	position: relative;
	margin-left: -48px;
	margin-right: 16px;
	width: 60px;
	height: 60px;
	background: var( --tc-accent-gradient );
	border: 2px solid var( --tc-primary-darker );
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var( --tc-label-color, var( --tc-text-on-primary ) );
	font-size: 26px;
	font-weight: 900;
	z-index: 2;
}
.dyt-tc-style-banner-10 .dyt-tc-circle::before {
	content: '';
	position: absolute;
	top: 4px;
	left: -8px;
	width: 100%;
	height: 100%;
	border: 1.5px solid var( --tc-primary-darker );
	border-radius: 50%;
	z-index: -1;
}
.dyt-tc-style-banner-10 .dyt-tc-point-line {
	position: absolute;
	top: -6px;
	left: 4px;
	transform: rotate( -25deg );
	font-size: 13px;
	font-weight: 900;
	color: var( --tc-label-color, var( --tc-primary ) );
	font-style: italic;
	z-index: 4;
}
.dyt-tc-style-banner-10 .dyt-tc-point-line::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: -6px;
	width: 56px;
	height: 1px;
	background-color: var( --tc-primary-darker );
}
.dyt-tc-style-banner-10.dyt-tc-mirror {
	padding: 16px 56px 16px 24px;
	margin-left: 0;
	margin-right: 24px;
	flex-direction: row-reverse;
}
.dyt-tc-style-banner-10.dyt-tc-mirror .dyt-tc-circle {
	margin-left: 16px;
	margin-right: -48px;
}
.dyt-tc-style-banner-10.dyt-tc-mirror .dyt-tc-circle::before {
	left: auto;
	right: -8px;
}
.dyt-tc-style-banner-10.dyt-tc-mirror .dyt-tc-point-line {
	left: auto;
	right: 4px;
	transform: rotate( 25deg );
}
.dyt-tc-style-banner-10.dyt-tc-mirror .dyt-tc-point-line::after {
	left: auto;
	right: -6px;
}

/* =============================================================
/* =============================================================
 * ?�塊�?：�??�徽章卡??(dyt-cbc-*)
 * ============================================================= */
/* ===== ?��??��? ===== */
.dyt-cbc-card {
	position: relative;
	margin: 1.5em 0;
	padding: 40px 44px;
	border: 1px solid #ddd0ab;
	border-radius: 12px;
	font-family: inherit;
}

/* 讓卡?�內第�??��?題�?要�??��??��???*/
.dyt-cbc-card > *:first-child {
	margin-top: 0;
}
.dyt-cbc-card > *:last-child {
	margin-bottom: 0;
}

/* 徽�??��??��? */
.dyt-cbc-badge {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	white-space: nowrap;
	color: var( --dyt-cbc-badge-color, #ffffff );
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	z-index: 2;
}

/* ?�示?�援 */
.dyt-cbc-badge-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}
.dyt-cbc-badge-icon svg {
	width: 1.2em;
	height: 1.2em;
	fill: currentColor;
	display: block;
}
.dyt-cbc-badge-text:empty {
	display: none;
}

/* ?�慧?��??�漸�?(?��??��?) */
/* =============================================================
 * ?�用：智?��??�色漸層 (dyt-grad-*) ???��??�唯一漸層來�?
 * ?��?：�?素�? .dyt-grad-<type>，並?��?素�?祖�?�? * --dyt-grad-from / --dyt-grad-to ?�個端點色（由 PHP
 * dyt_blocks_gradient_stops() ??editor.js dytGradientStops()
 * �?HSL 從�??��??��?亮端?�亮＋色??-12°?�深端�?深�??�相 +18°�? * ?�色彩�??��??��??��?變�?）。方?�在?�裡?�色?�在 stops ?��?�? * ?�只?��??��??��?次全外�??��??? * ============================================================= */
.dyt-grad-linear-45 {
	background-image: linear-gradient( 45deg, var( --dyt-grad-from, #aaaaaa ) 0%, var( --dyt-grad-to, #555555 ) 100% ) !important;
}
.dyt-grad-linear-90 {
	background-image: linear-gradient( 90deg, var( --dyt-grad-from, #aaaaaa ) 0%, var( --dyt-grad-to, #555555 ) 100% ) !important;
}
.dyt-grad-linear-135 {
	background-image: linear-gradient( 135deg, var( --dyt-grad-from, #aaaaaa ) 0%, var( --dyt-grad-to, #555555 ) 100% ) !important;
}
.dyt-grad-linear-180 {
	background-image: linear-gradient( 180deg, var( --dyt-grad-from, #aaaaaa ) 0%, var( --dyt-grad-to, #555555 ) 100% ) !important;
}
.dyt-grad-radial {
	background-image: radial-gradient( circle at 30% 30%, var( --dyt-grad-from, #aaaaaa ) 0%, var( --dyt-grad-to, #555555 ) 100% ) !important;
}
/* 端�??�帶?��?度�?0.82�?.92）�?必�?清�?底�??�實?��?�?   ?��??��??��??�透到?�面?�景 */
.dyt-grad-linear-45,
.dyt-grad-linear-90,
.dyt-grad-linear-135,
.dyt-grad-linear-180,
.dyt-grad-radial {
	background-color: transparent !important;
}

/* ===== 1. ?�形標籤 tag ??跨�??�卡?��?�??如「身世�???===== */
.dyt-cbc-style-tag {
	overflow: visible;
}
.dyt-cbc-style-tag .dyt-cbc-badge {
	top: -16px;
	right: 28px;
	background: var( --dyt-cbc-badge-bg, #9c3b2e );
	padding: 8px 20px;
	border-radius: 6px;
	font-size: 15px;
	box-shadow: 0 3px 8px rgba( 0, 0, 0, 0.18 );
}

/* ===== 2. ?�形?��? stamp ???��??�環，�??��?案�?===== */
.dyt-cbc-style-stamp {
	overflow: visible;
}
.dyt-cbc-style-stamp .dyt-cbc-badge {
	top: -20px;
	right: 30px;
	width: 78px;
	height: 78px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: transparent;
	color: var( --dyt-cbc-badge-bg, #9c3b2e );
	border: 2px dashed var( --dyt-cbc-badge-bg, #9c3b2e );
	border-radius: 50%;
	transform: rotate( -10deg );
	font-size: 15px;
	padding: 6px;
	white-space: normal;
}

/* ===== 3. ?��?緞帶 ribbon ???�跨?��?�?===== */
.dyt-cbc-style-ribbon {
	overflow: hidden;
}
.dyt-cbc-style-ribbon .dyt-cbc-badge {
	top: 20px;
	right: -38px;
	width: 160px;
	padding: 6px 0;
	text-align: center;
	background: var( --dyt-cbc-badge-bg, #9c3b2e );
	transform: rotate( 45deg );
	font-size: 13px;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.2 );
}

/* ===== 4. 浮�??��? pill ???�懸?��?�????===== */
.dyt-cbc-style-pill {
	overflow: visible;
}
.dyt-cbc-style-pill .dyt-cbc-badge {
	top: -17px;
	right: 32px;
	background: var( --dyt-cbc-badge-bg, #9c3b2e );
	padding: 7px 22px;
	border-radius: 999px;
	font-size: 14px;
	box-shadow: 0 3px 8px rgba( 0, 0, 0, 0.18 );
}

/* ===== 5. ?�緣標籤 tab ??貼�?上緣往上長?��?如�??�夾標籤 ===== */
.dyt-cbc-style-tab {
	overflow: visible;
}
.dyt-cbc-style-tab .dyt-cbc-badge {
	top: 0;
	right: 26px;
	transform: translateY( -100% );
	background: var( --dyt-cbc-badge-bg, #9c3b2e );
	padding: 7px 18px 12px;
	border-radius: 8px 8px 0 0;
	font-size: 14px;
}

/* ===== 6. ?��? fold ???��?角�?角形?��? ===== */
.dyt-cbc-style-fold {
	overflow: hidden;
}
.dyt-cbc-style-fold::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 var(--dyt-cbc-fold-size, 64px) var(--dyt-cbc-fold-size, 64px) 0;
	border-color: transparent var( --dyt-cbc-badge-bg, #9c3b2e ) transparent transparent;
	z-index: 1;
}
.dyt-cbc-style-fold .dyt-cbc-badge {
	top: calc(var(--dyt-cbc-fold-size, 64px) * 0.15625);
	right: calc(var(--dyt-cbc-fold-size, 64px) * 0.03125);
	transform: rotate( 45deg );
	background: transparent;
	color: var( --dyt-cbc-badge-color, #ffffff );
	font-size: 12px;
}

/* ===== 7. ?��?帶樣�?(Ribbon 1 ~ Ribbon 6) ===== */
.dyt-cbc-style-ribbon1, .dyt-cbc-style-ribbon2, .dyt-cbc-style-ribbon3, .dyt-cbc-style-ribbon4, .dyt-cbc-style-ribbon5 {
	overflow: visible;
}

/* Ribbon 1 */
.dyt-cbc-style-ribbon1 .dyt-cbc-badge {
	top: -6px;
	right: 10px;
	text-align: center;
	background: var(--dyt-cbc-badge-bg, #F8463F);
	color: var(--dyt-cbc-badge-color, white);
	padding: 12px 8px 10px;
	border-radius: 8px 0 0 0;
	min-width: 90px;
	/* 覆�? inline-flex ?��?影響?��?素�?對�?�?*/
	display: block; 
}
/* 下方三�?形尾�?*/
.dyt-cbc-style-ribbon1 .dyt-cbc-badge::after {
	position: absolute;
	content: "";
	top: 100%;
	left: 0;
	width: 100%;
	height: 12px;
	background: inherit;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* ?��?角�??��?�?*/
.dyt-cbc-style-ribbon1 .dyt-cbc-badge::before {
	position: absolute;
	content: "";
	height: 6px;
	width: 8px;
	right: -8px;
	top: 0;
	background: var(--dyt-cbc-badge-bg, #F8463F);
	border-radius: 0 8px 0 0;
	filter: brightness(0.65);
	z-index: -1;
}

/* Ribbon 2 */
.dyt-cbc-style-ribbon2 .dyt-cbc-badge {
	min-width: 60px;
	padding: 10px 0;
	top: -6px;
	right: 25px;
	text-align: center;
	border-radius: 3px 0 0 0;
	background: var(--dyt-cbc-badge-bg, #F47530);
	color: var(--dyt-cbc-badge-color, white);
	display: block;
}
/* ?��?角�?角�?�?*/
.dyt-cbc-style-ribbon2 .dyt-cbc-badge::before {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	right: -5.5px;
	top: 0.1px;
	border-bottom: 6px solid var(--dyt-cbc-badge-bg, #F47530);
	border-right: 6px solid transparent;
	filter: brightness(0.65);
}
/* 下方?��?尾巴 */
.dyt-cbc-style-ribbon2 .dyt-cbc-badge::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 15px;
	background: inherit;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 0px, 0 100%);
}

/* Ribbon 3 */
.dyt-cbc-style-ribbon3 .dyt-cbc-badge {
	min-width: 150px;
	min-height: 50px;
	padding-right: 15px;
	top: 20px;
	right: -8px;
	background: var(--dyt-cbc-badge-bg, #59324C);
	color: var(--dyt-cbc-badge-color, white);
	display: flex;
	align-items: center;
}
/* ?��??��?三�? */
.dyt-cbc-style-ribbon3 .dyt-cbc-badge::before {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	top: -8.5px;
	right: 0.1px;
	border-bottom: 9px solid var(--dyt-cbc-badge-bg, #59324C);
	border-right: 9px solid transparent;
	filter: brightness(0.6);
}
/* 左側三�??�槽 */
.dyt-cbc-style-ribbon3 .dyt-cbc-badge::after {
	content: "";
	position: absolute;
	left: -15px;
	top: 0;
	width: 15px;
	height: 100%;
	background: inherit;
	clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

/* Ribbon 4 */
.dyt-cbc-style-ribbon4 .dyt-cbc-badge {
	top: 15px;
	right: -8px;
	padding: 8px 10px;
	background: var(--dyt-cbc-badge-bg, #00B3ED);
	color: var(--dyt-cbc-badge-color, white);
	box-shadow: 1px 2px 3px rgba(0,0,0,.3);
}
/* 延伸?�景�?(繼承?�景?�即?? */
.dyt-cbc-style-ribbon4 .dyt-cbc-badge::before {
	content: "";
	position: absolute;
	width: 7px;
	height: 100%;
	top: 0;
	right: -6.5px;
	padding: 0 0 7px;
	background: inherit;
	border-radius: 0 5px 5px 0;
}
/* ?��??��??��? */
.dyt-cbc-style-ribbon4 .dyt-cbc-badge::after {
	content: "";
	position: absolute;
	width: 5px;
	height: 5px;
	bottom: -5px;
	right: -4.5px;
	background: var(--dyt-cbc-badge-bg, #00B3ED);
	border-radius: 0 5px 5px 0;
	filter: brightness(0.7);
}

/* Ribbon 5 */
.dyt-cbc-style-ribbon5 .dyt-cbc-badge {
	width: calc(100% + 20px);
	min-height: 50px;
	margin-left: -10px;
	margin-right: -10px;
	background: var(--dyt-cbc-badge-bg, #EDBA19);
	color: var(--dyt-cbc-badge-color, white);
	top: 20px;
	left: 0;
	right: auto;
}
/* 左�??��?三�? */
.dyt-cbc-style-ribbon5 .dyt-cbc-badge::before {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	bottom: -10px;
	left: 0;
	border-top: 10px solid var(--dyt-cbc-badge-bg, #EDBA19);
	border-left: 10px solid transparent;
	filter: brightness(0.65);
}
/* ?��??��?三�? */
.dyt-cbc-style-ribbon5 .dyt-cbc-badge::after {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	right: 0;
	bottom: -10px;
	border-top: 10px solid var(--dyt-cbc-badge-bg, #EDBA19);
	border-right: 10px solid transparent;
	filter: brightness(0.65);
}

/* Ribbon 6 */
.dyt-cbc-style-ribbon6 { overflow: hidden; }
.dyt-cbc-style-ribbon6 .dyt-cbc-badge {
	width: 200px;
	min-height: 40px;
	top: 30px;
	right: -50px;
	z-index: 2;
	transform: rotate(45deg);
	border: 1px dashed;
	box-shadow: 0 0 0 3px var(--dyt-cbc-badge-bg, #57DD43), 0px 21px 5px -18px rgba(0,0,0,0.6);
	background: var(--dyt-cbc-badge-bg, #57DD43);
	color: var(--dyt-cbc-badge-color, white);
	text-align: center;
}

/* ===== 徽�?位置：�?左�?覆寫?�設?��??�座標�??��?角度�?===== */
.dyt-cbc-style-tag.dyt-cbc-pos-left .dyt-cbc-badge {
	right: auto;
	left: 28px;
}
.dyt-cbc-style-stamp.dyt-cbc-pos-left .dyt-cbc-badge {
	right: auto;
	left: 30px;
	transform: rotate( 10deg );
}
.dyt-cbc-style-ribbon.dyt-cbc-pos-left .dyt-cbc-badge {
	right: auto;
	left: -38px;
	transform: rotate( -45deg );
}
.dyt-cbc-style-pill.dyt-cbc-pos-left .dyt-cbc-badge {
	right: auto;
	left: 32px;
}
.dyt-cbc-style-tab.dyt-cbc-pos-left .dyt-cbc-badge {
	right: auto;
	left: 26px;
}
.dyt-cbc-style-fold.dyt-cbc-pos-left::before {
	right: auto;
	left: 0;
	border-width: 0 0 var(--dyt-cbc-fold-size, 64px) var(--dyt-cbc-fold-size, 64px);
	border-color: transparent transparent transparent var( --dyt-cbc-badge-bg, #9c3b2e );
}
.dyt-cbc-style-fold.dyt-cbc-pos-left .dyt-cbc-badge {
	right: auto;
	left: calc(var(--dyt-cbc-fold-size, 64px) * 0.03125);
	transform: rotate( -45deg );
}

/* ===== ?��?帶�?置�??�左 ===== */
.dyt-cbc-style-ribbon1.dyt-cbc-pos-left .dyt-cbc-badge {
	right: auto; left: 10px; border-radius: 0 8px 0 0;
}
.dyt-cbc-style-ribbon1.dyt-cbc-pos-left .dyt-cbc-badge::before {
	right: auto; left: -8px; border-radius: 8px 0 0 0;
}

.dyt-cbc-style-ribbon2.dyt-cbc-pos-left .dyt-cbc-badge {
	right: auto; left: 25px; border-radius: 0 3px 0 0;
}
.dyt-cbc-style-ribbon2.dyt-cbc-pos-left .dyt-cbc-badge::before {
	right: auto; left: -5.5px; border-right: none; border-left: 6px solid transparent;
}

.dyt-cbc-style-ribbon3.dyt-cbc-pos-left .dyt-cbc-badge {
	right: auto; left: -8px; padding-right: 0; padding-left: 15px;
}
.dyt-cbc-style-ribbon3.dyt-cbc-pos-left .dyt-cbc-badge::before {
	right: auto; left: 0.1px; border-right: none; border-left: 9px solid transparent;
}
.dyt-cbc-style-ribbon3.dyt-cbc-pos-left .dyt-cbc-badge::after {
	left: auto; right: -14.5px; width: 15px; height: 100%; background: inherit; clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.dyt-cbc-style-ribbon4.dyt-cbc-pos-left .dyt-cbc-badge {
	right: auto; left: -8px; box-shadow: -1px 2px 3px rgba(0,0,0,.3);
}
.dyt-cbc-style-ribbon4.dyt-cbc-pos-left .dyt-cbc-badge::before {
	right: auto; left: -6.5px; border-radius: 5px 0 0 5px;
}
.dyt-cbc-style-ribbon4.dyt-cbc-pos-left .dyt-cbc-badge::after {
	right: auto; left: -4.5px; border-radius: 5px 0 0 5px;
}

.dyt-cbc-style-ribbon6.dyt-cbc-pos-left .dyt-cbc-badge {
	right: auto; left: -50px; transform: rotate(-45deg);
}

/* ===== 8. ?��??��? inset ??縮在?��??�側，�??��?保�?距離 ===== */
.dyt-cbc-style-inset {
	overflow: visible;
}
.dyt-cbc-style-inset .dyt-cbc-badge {
	top: 20px;
	right: 20px;
	background: var( --dyt-cbc-badge-bg, #9c3b2e );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1;
	font-size: 13px;
}
.dyt-cbc-style-inset .dyt-cbc-badge.dyt-cbc-badge--pill {
	padding: 6px 16px;
	border-radius: 999px;
}
.dyt-cbc-style-inset .dyt-cbc-badge.dyt-cbc-badge--circle {
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
}
.dyt-cbc-style-inset.dyt-cbc-pos-left .dyt-cbc-badge {
	right: auto;
	left: 20px;
}

/* ===== 9. 角落弧形 sweep ??貼�??�緣，大?��? ===== */
.dyt-cbc-style-sweep {
	overflow: hidden;
}
.dyt-cbc-style-sweep .dyt-cbc-badge {
	top: -1px;
	right: -1px;
	background: var( --dyt-cbc-badge-bg, #9c3b2e );
	
	/* 寬�??��?，形?�正?��??��?之�? */
	width: var(--dyt-cbc-sweep-radius, 120px);
	height: var(--dyt-cbc-sweep-radius, 120px);
	border-radius: 0 0 0 100%;
	padding: 0;
	
	/* ?�用 translate 來�??�「移?��?心」�??��? */
	transform: translate( 
		calc(var(--dyt-cbc-sweep-x, 100%) - 100%), 
		var(--dyt-cbc-sweep-y, 0%) 
	);
	
	font-size: 24px;
	align-items: flex-start;
	justify-content: flex-end;
}
.dyt-cbc-style-sweep.dyt-cbc-pos-left .dyt-cbc-badge {
	right: auto;
	left: -1px;
	border-radius: 0 0 100% 0; /* ?��?角�?�?*/
	
	/* ?�左?��? X 軸平移�?�?*/
	transform: translate( 
		var(--dyt-cbc-sweep-x, 0%), 
		var(--dyt-cbc-sweep-y, 0%) 
	);
	justify-content: flex-start;
}

/* ?�容位置微調：推?��?�?*/
.dyt-cbc-style-sweep .dyt-cbc-badge-icon,
.dyt-cbc-style-sweep .dyt-cbc-badge-text {
	margin-top: calc(var(--dyt-cbc-sweep-radius, 120px) * 0.2);
	margin-right: calc(var(--dyt-cbc-sweep-radius, 120px) * 0.2);
}
.dyt-cbc-style-sweep.dyt-cbc-pos-left .dyt-cbc-badge-icon,
.dyt-cbc-style-sweep.dyt-cbc-pos-left .dyt-cbc-badge-text {
	margin-right: 0;
	margin-left: calc(var(--dyt-cbc-sweep-radius, 120px) * 0.2);
}

/* =============================================================
 * ?�塊�?：�??�錯位色�?(dyt-icb-*)
 * ============================================================= */
.dyt-cbc-style-ribbon7 .dyt-cbc-badge {
	position: relative;
	display: grid;
	max-width: 100%;
	color: var(--dyt-cbc-badge-color, white);
	border-radius: 6px 0 0 6px;
	box-shadow: -2px 3px 5px rgba(0,0,0,0.1);
	z-index: 2;
}
.dyt-cbc-style-ribbon7 .dyt-cbc-badge::before {
	content: '';
	position: absolute;
	width: 10px;
	height: 100%;
	top: 0;
	right: -10px;
	background: inherit;
	border-radius: 0 6px 6px 0;
	z-index: -1;
}
.dyt-cbc-style-ribbon7 .dyt-cbc-badge::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 8px;
	bottom: -8px;
	right: -10px;
	background: var(--dyt-cbc-badge-bg, #FA6900);
	filter: brightness(0.6);
	border-radius: 0 0 8px 0;
}
/* ?�左?�本 */
.dyt-cbc-style-ribbon7.dyt-cbc-pos-left .dyt-cbc-badge {
	right: auto; left: -10px; border-radius: 0 6px 6px 0; box-shadow: 2px 3px 5px rgba(0,0,0,0.1);
}
.dyt-cbc-style-ribbon7.dyt-cbc-pos-left .dyt-cbc-badge::before {
	right: auto; left: -10px; border-radius: 6px 0 0 6px;
}
.dyt-cbc-style-ribbon7.dyt-cbc-pos-left .dyt-cbc-badge::after {
	right: auto; left: -10px; border-radius: 0 0 0 8px;
}

/* ===== 8. ?�部?��?緞帶 (Ribbon 8 - ?�書) ===== */
.dyt-cbc-style-ribbon8 { overflow: visible; }
.dyt-cbc-style-ribbon8 .dyt-cbc-badge {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	letter-spacing: 0.1em;
	top: -10px;
	right: 25px;
	padding: 14px 8px;
	background: var(--dyt-cbc-badge-bg, #FA6900);
	color: var(--dyt-cbc-badge-color, white);
	border-radius: 0 0 6px 6px;
	box-shadow: 2px 3px 5px rgba(0,0,0,0.1);
	z-index: 2;
}
.dyt-cbc-style-ribbon8 .dyt-cbc-badge::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 10px;
	top: -10px;
	left: 0;
	background: inherit;
	border-radius: 6px 6px 0 0;
	z-index: -1;
}
.dyt-cbc-style-ribbon8 .dyt-cbc-badge::after {
	content: '';
	position: absolute;
	width: 8px;
	height: 10px;
	top: -10px;
	right: -8px;
	background: var(--dyt-cbc-badge-bg, #FA6900);
	filter: brightness(0.6);
	border-radius: 0 8px 0 0;
}
/* ?�左?�本 */
.dyt-cbc-style-ribbon8.dyt-cbc-pos-left .dyt-cbc-badge {
	right: auto; left: 25px; box-shadow: -2px 3px 5px rgba(0,0,0,0.1);
}
.dyt-cbc-style-ribbon8.dyt-cbc-pos-left .dyt-cbc-badge::after {
	right: auto; left: -8px; border-radius: 8px 0 0 0;
}

/* ===== 9. ?��?標籤 (Side Tab) ===== */
.dyt-cbc-style-side-tab { overflow: visible; }
.dyt-cbc-style-side-tab .dyt-cbc-badge {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	letter-spacing: 0.1em;
	top: 20px;
	right: 0;
	transform: translateX(100%);
	background: var(--dyt-cbc-badge-bg, #9c3b2e);
	color: var(--dyt-cbc-badge-color, white);
	padding: 18px 7px 12px;
	border-radius: 0 8px 8px 0;
	font-size: 14px;
	box-shadow: 3px 0 8px rgba(0,0,0,0.18);
}
.dyt-cbc-style-side-tab.dyt-cbc-pos-left .dyt-cbc-badge {
	right: auto;
	left: 0;
	transform: translateX(-100%);
	border-radius: 8px 0 0 8px;
	box-shadow: -3px 0 8px rgba(0,0,0,0.18);
}

/* =============================================================
/* =============================================================
 * ?�塊�?：�?層次?��??��?(??Image Offset Color Block) dyt-icb-*
 * ============================================================= */
.dyt-icb-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 200px;
}

/* ?�層?�用�?? */
.dyt-icb-layer {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* ?�裡?�援�?dytUI ??BorderControl ??ShadowControl ?��?寫入 inline style */
}

/* 主�?�?(?�常??Layer 1) ?�別?�出來�?讓�?不�?被�?對�?位�??�抽?��?件�? */
.dyt-icb-layer-main {
    position: relative; 
    z-index: 1;
}

/* ?�種類�??�層?�設�?? */
.dyt-icb-layer-image {
    background: transparent;
}
.dyt-icb-layer-block {
    background-color: var(--dyt-icb-bg, #f3dfe0);
}
.dyt-icb-svg-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dyt-icb-svg-wrap svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* 漸層?��??��? */
.dyt-icb-layer-block.has-dyt-gradient-none { background-image: none !important; }

/* ===== ?��??��??��?裝飾?�層，只?�主?�層 (Option A) ===== */
@media ( max-width: 600px ) {
    .dyt-icb-layer:not(.dyt-icb-layer-main) {
        display: none !important;
    }
    .dyt-icb-layer-main {
        transform: none !important; /* 移除?�能?��?移�?讓主?�置中填�?*/
        width: 100% !important;
    }
    .dyt-icb-wrap {
        margin: 0 !important;
    }
}

/* =============================================================
 * Block 4: Product Tab Card (dyt-ptc-*)
 * ============================================================= */

/* Block 4: Product Tab Card (dyt-ptc-*) */
.dyt-ptc-card {
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    background-color: #fff;
    margin-bottom: 24px;
}

.dyt-ptc-image-wrap {
    position: relative;
    width: 100%;
    overflow: visible; /* Allow tab to overflow if needed */
}

.dyt-ptc-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.dyt-ptc-tab {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%); /* Center the tab precisely at the X/Y coordinates */
}

.dyt-ptc-tab--circle {
    border-radius: 50%;
}

.dyt-ptc-tab--square {
    border-radius: 8px;
}

.dyt-ptc-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    height: 60%;
    color: #fff;
}
.dyt-ptc-tab-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.dyt-ptc-body {
    padding: 24px;
}

.dyt-ptc-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.dyt-ptc-desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #666;
}


/* ==========================================================================
   Block 5: Profile Bio Card (dyt-bio-*)
   ========================================================================== */
.dyt-bio-card {
    position: relative;
    border-radius: var(--dyt-bio-card-radius, 16px);
    background-color: #ffffff;
    padding: 32px;
    margin-bottom: 32px;
    box-sizing: border-box;
    overflow: hidden; /* For effects */
}

/* --- Layout Modes --- */

/* 1. Wrap (Float) Layouts */
.dyt-bio-layout-wrap-left .dyt-bio-avatar-wrapper {
    float: left;
    margin-right: 24px;
    margin-bottom: 12px;
}
.dyt-bio-layout-wrap-right .dyt-bio-avatar-wrapper {
    float: right;
    margin-left: 24px;
    margin-bottom: 12px;
}

/* 2. Stacked Layout */
.dyt-bio-layout-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.dyt-bio-layout-stacked .dyt-bio-avatar-wrapper {
    margin: 0 auto 24px auto;
}
.dyt-bio-layout-stacked .dyt-bio-content {
    width: 100%;
}
.dyt-bio-layout-stacked .wp-block-paragraph,
.dyt-bio-layout-stacked .wp-block-heading {
    text-align: center;
}

/* 3. Split (Columns) Layouts */
.dyt-bio-layout-split-left {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
}
.dyt-bio-layout-split-right {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 32px;
}
.dyt-bio-layout-split-left .dyt-bio-avatar-wrapper,
.dyt-bio-layout-split-right .dyt-bio-avatar-wrapper {
    flex-shrink: 0;
}
.dyt-bio-layout-split-left .dyt-bio-content,
.dyt-bio-layout-split-right .dyt-bio-content {
    flex-grow: 1;
}

/* --- Avatar & Offset --- */
.dyt-bio-avatar-wrapper {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: var(--dyt-bio-avatar-size, 120px);
    height: var(--dyt-bio-avatar-size, 120px);
    flex-shrink: 0;
}

.dyt-bio-avatar-image-layer {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #f9f9f9; /* Fallback */
    border-radius: inherit;
}

.dyt-bio-avatar-image-layer img.dyt-bio-avatar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dyt-bio-avatar-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--dyt-bio-offset-w, 100%);
    height: var(--dyt-bio-offset-h, 100%);
    transform: translate(var(--dyt-bio-offset-x, 12px), var(--dyt-bio-offset-y, 12px));
    background-color: var(--dyt-bio-avatar-bg-color, #f3dfe0);
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

.dyt-shape-circle .dyt-bio-avatar-image-layer,
.dyt-shape-circle .dyt-bio-avatar-bg {
    border-radius: 50% !important;
}

/* --- Content Area --- */
.dyt-bio-content {
    position: relative;
    z-index: 2;
}

.dyt-bio-content > *:first-child {
    margin-top: 0;
}
.dyt-bio-content > *:last-child {
    margin-bottom: 0;
}

/* --- Corner Effects (reusable: any block can render a .dyt-effect-layer with
   these CSS custom properties set inline; no per-block/per-position CSS needed) --- */
.dyt-effect-layer,
.dyt-bio-effect-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.dyt-effect-glow {
    background: radial-gradient(
        circle at var(--dyt-effect-origin, 100% 100%),
        var(--dyt-effect-color, rgba(17,50,133,0.1)) 0%,
        var(--dyt-effect-color, rgba(17,50,133,0.1)) var(--dyt-effect-fade, 20%),
        transparent var(--dyt-effect-size, 60%)
    );
}

.dyt-effect-mesh {
    background-image: radial-gradient(circle, var(--dyt-effect-color, rgba(17,50,133,0.1)) 40%, transparent 42%);
    background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(circle at var(--dyt-effect-origin, 100% 100%), black 0%, black var(--dyt-effect-fade, 20%), transparent var(--dyt-effect-size, 60%));
    mask-image: radial-gradient(circle at var(--dyt-effect-origin, 100% 100%), black 0%, black var(--dyt-effect-fade, 20%), transparent var(--dyt-effect-size, 60%));
}

.dyt-effect-grid {
    background-image: repeating-conic-gradient(var(--dyt-effect-color, rgba(17,50,133,0.1)) 0% 25%, transparent 0% 50%);
    background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(circle at var(--dyt-effect-origin, 100% 100%), black 0%, black var(--dyt-effect-fade, 20%), transparent var(--dyt-effect-size, 60%));
    mask-image: radial-gradient(circle at var(--dyt-effect-origin, 100% 100%), black 0%, black var(--dyt-effect-fade, 20%), transparent var(--dyt-effect-size, 60%));
}

.dyt-effect-stripes {
    background-image: repeating-linear-gradient(45deg, var(--dyt-effect-color, rgba(17,50,133,0.1)) 0 3px, transparent 3px 12px);
    -webkit-mask-image: radial-gradient(circle at var(--dyt-effect-origin, 100% 100%), black 0%, black var(--dyt-effect-fade, 20%), transparent var(--dyt-effect-size, 60%));
    mask-image: radial-gradient(circle at var(--dyt-effect-origin, 100% 100%), black 0%, black var(--dyt-effect-fade, 20%), transparent var(--dyt-effect-size, 60%));
}

/* --- Mobile Responsive (Standardize to Stacked on Mobile) --- */
@media (max-width: 767px) {
    .dyt-bio-layout-wrap-left,
    .dyt-bio-layout-wrap-right,
    .dyt-bio-layout-split-left,
    .dyt-bio-layout-split-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .dyt-bio-layout-wrap-left .dyt-bio-avatar-wrapper,
    .dyt-bio-layout-wrap-right .dyt-bio-avatar-wrapper,
    .dyt-bio-layout-split-left .dyt-bio-avatar-wrapper,
    .dyt-bio-layout-split-right .dyt-bio-avatar-wrapper {
        float: none;
        margin: 0 auto 24px auto;
    }
    .dyt-bio-layout-split-left .dyt-bio-content,
    .dyt-bio-layout-split-right .dyt-bio-content {
        width: 100%;
    }
}

\n


/* ==========================================================================
   Block 6: Sticky Scroll (dyt-ss)
   ========================================================================== */

.dyt-ss {
    margin: 2rem 0;
    --dyt-ss-top: 120px;
    --dyt-ss-top-m: 80px;
    --dyt-ss-vh: 500px;
    --dyt-ss-vh-m: 300px;
    --dyt-ss-fit: cover;
    --dyt-ss-radius: 12px;
}

.dyt-ss-layout {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

/* Mirror Mode */
.dyt-ss-mirror .dyt-ss-layout {
    flex-direction: row-reverse;
}

/* 1. Left/Right Layout (Desktop) */
.dyt-ss-content-list {
    flex: 1 1 50%;
    position: relative;
    padding-bottom: 20vh; /* space to scroll past the last item */
}

.dyt-ss-visual {
    flex: 1 1 50%;
    position: sticky;
    top: var(--dyt-ss-top);
    height: var(--dyt-ss-vh);
    overflow: hidden;
}

/* Panels */
.dyt-ss-panel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tc-bg, #f5f5f5);
}

.dyt-ss-panel.is-active {
    opacity: 1;
    z-index: 2;
}

.dyt-ss-panel img {
    width: var(--dyt-ss-scale, 100%);
    height: var(--dyt-ss-scale, 100%);
    object-fit: var(--dyt-ss-fit, cover);
}

/* Frame Styles */
.dyt-ss-frame-thin .dyt-ss-visual {
    border: 1px solid var(--tc-primary);
    border-radius: var(--dyt-ss-radius);
}

.dyt-ss-frame-bezel .dyt-ss-visual {
    border: 8px solid rgba(255,255,255,0.2);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1), 0 10px 30px rgba(0,0,0,0.1);
    border-radius: calc(var(--dyt-ss-radius) + 8px);
    background: #000;
}
.dyt-ss-frame-bezel .dyt-ss-panel {
    border-radius: var(--dyt-ss-radius);
    overflow: hidden;
}

/* Effects */
.dyt-ss-fx-fade-up .dyt-ss-panel {
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.dyt-ss-fx-fade-up .dyt-ss-panel.is-active {
    transform: translateY(0);
}
.dyt-ss-fx-zoom .dyt-ss-panel img {
    transform: scale(1.05);
    transition: transform 1s ease;
}
.dyt-ss-fx-zoom .dyt-ss-panel.is-active img {
    transform: scale(1);
}

/* Content Blocks */
.dyt-ss-block {
    margin-bottom: 40vh;
    padding: 2rem;
    transition: opacity 0.3s;
    opacity: 0.3;
}
.dyt-ss-block.is-active {
    opacity: 1;
}

.dyt-ss-title {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--tc-primary);
}
/* IMPORTANT: ensure bold formatting inside title doesn't break design */
.dyt-ss-title strong, .dyt-ss-title b {
    font-weight: inherit;
}

.dyt-ss-num {
    display: inline-block;
    font-size: 0.9em;
    font-weight: 900;
    opacity: 0.5;
    margin-right: 12px;
}

.dyt-ss-text {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #444;
}

/* Mobile & no-mobile-sticky behavior */
.dyt-ss-inline-img {
    display: none;
    margin-bottom: 1.5rem;
    border-radius: var(--dyt-ss-radius);
    overflow: hidden;
}
.dyt-ss-inline-img img {
    width: var(--dyt-ss-scale, 100%);
    margin: 0 auto;
    display: block;
    height: auto;
    max-height: var(--dyt-ss-vh-m);
    object-fit: var(--dyt-ss-fit, cover);
}

@media (max-width: 768px) {
    /* If mobileSticky is true (default), we just adjust heights */
    .dyt-ss-layout {
        flex-direction: column-reverse;
        gap: 20px;
    }
    .dyt-ss-visual {
        top: var(--dyt-ss-top-m);
        height: var(--dyt-ss-vh-m);
        flex: none;
        width: 100%;
        margin-bottom: 2rem;
    }
    .dyt-ss-content-list {
        flex: none;
        width: 100%;
        padding-bottom: 0;
    }
    .dyt-ss-block {
        margin-bottom: 20vh;
        padding: 0;
    }
    /* If mobileSticky is false, we unstick everything and show inline images */
    .dyt-ss-no-mobile-sticky .dyt-ss-visual {
        display: none;
    }
    .dyt-ss-no-mobile-sticky .dyt-ss-block {
        opacity: 1;
        margin-bottom: 3rem;
    }
    .dyt-ss-no-mobile-sticky .dyt-ss-inline-img {
        display: block;
    }
}

/* ==========================================================================
   Block 7: Gallery Showcase (dyt-gs)
   ========================================================================== */

.dyt-gs {
    margin: 2rem 0;
    --dyt-gs-stage-bg: #0D1117;
    --dyt-gs-fit: cover;
    --dyt-gs-ratio: auto;
    --dyt-gs-radius: 12px;
}

.dyt-gs-inner {
    display: flex;
    background: var(--tc-bg, #f5f5f5);
    border-radius: var(--dyt-gs-radius);
    overflow: hidden;
    min-height: 200px;
}

/* Mirror Mode */
.dyt-gs-mirror .dyt-gs-inner {
    flex-direction: row-reverse;
}

/* Frame Styles (default is bezel) */
.dyt-gs-frame-thin .dyt-gs-inner {
    border: 1px solid var(--tc-primary);
}
.dyt-gs-frame-bezel {
    border-radius: calc(var(--dyt-gs-radius) + 10px);
    background: #000;
    padding: 10px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 20px 40px rgba(0,0,0,0.2);
}

.dyt-gs-stage {
    flex: 2 1 60%;
    position: relative;
    background: var(--dyt-gs-stage-bg);
    aspect-ratio: var(--dyt-gs-ratio, auto);
    /* Safety fallback if auto is used and list is empty/short */
    min-height: 420px;
}

.dyt-gs-view {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dyt-gs-view.is-active {
    opacity: 1;
    z-index: 2;
}
.dyt-gs-view img {
    width: 100%;
    height: 100%;
    object-fit: var(--dyt-gs-fit, cover);
}

/* Effects */
.dyt-gs-fx-fade-up .dyt-gs-view { transform: translateY(15px); transition: all 0.4s ease; }
.dyt-gs-fx-fade-up .dyt-gs-view.is-active { transform: translateY(0); }
.dyt-gs-fx-zoom .dyt-gs-view { transform: scale(0.95); transition: all 0.4s ease; }
.dyt-gs-fx-zoom .dyt-gs-view.is-active { transform: scale(1); }

.dyt-gs-list {
    flex: 1 1 40%;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 0.5rem;
}

.dyt-gs-card {
    display: flex;
    align-items: center;
    text-align: left;
    width: 100%;
    background: none;
    border: none;
    padding: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    color: inherit;
    font-family: inherit;
}
.dyt-gs-card:hover {
    background: rgba(0,0,0,0.05);
}
.dyt-gs-card.is-active {
    background: var(--tc-primary);
    color: #fff;
    transform: translateX(-5px);
}
.dyt-gs-mirror .dyt-gs-card.is-active {
    transform: translateX(5px);
}

.dyt-gs-num {
    font-size: 1.5rem;
    font-weight: 900;
    margin-right: 1rem;
    opacity: 0.3;
}
.dyt-gs-card.is-active .dyt-gs-num {
    opacity: 0.7;
}

.dyt-gs-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dyt-gs-h {
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1.3;
}
.dyt-gs-sub {
    font-size: 0.875rem;
    opacity: 0.8;
    margin-top: 4px;
}

/* IMPORTANT: ensure bold formatting inside title doesn't break design */
.dyt-gs-h strong, .dyt-gs-h b, .dyt-gs-sub strong, .dyt-gs-sub b {
    font-weight: inherit;
}

.dyt-gs-arrow {
    width: 24px;
    height: 24px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s;
}
.dyt-gs-card.is-active .dyt-gs-arrow {
    opacity: 1;
    transform: translateX(0);
}
.dyt-gs-mirror .dyt-gs-arrow {
    transform: scaleX(-1) translateX(-10px);
}
.dyt-gs-mirror .dyt-gs-card.is-active .dyt-gs-arrow {
    transform: scaleX(-1) translateX(0);
}

@media (max-width: 768px) {
    .dyt-gs-inner {
        flex-direction: column;
    }
    .dyt-gs-mirror .dyt-gs-inner {
        flex-direction: column;
    }
    .dyt-gs-stage {
        flex: none;
        aspect-ratio: auto;
        min-height: 280px;
    }
    .dyt-gs-list {
        flex: none;
        padding: 1rem;
    }
    .dyt-gs-card.is-active {
        transform: translateX(0);
    }
    .dyt-gs-mirror .dyt-gs-card.is-active {
        transform: translateX(0);
    }
}


/* InnerBlocks Styling Fixes */
.dyt-ss-text > * {
    margin-top: 0;
    margin-bottom: 1rem;
}
.dyt-ss-text > *:last-child {
    margin-bottom: 0;
}
.dyt-ss-item-editor {
    border: 1px dashed #ccc;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    background: #fff;
}
.dyt-gs-item-editor {
    border: 1px dashed #ccc;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    background: #fff;
}