.vcx-widget-header-image {
	position: relative;
	max-width: 765px;
	margin-left: auto;
	margin-right: auto;
	container-type: inline-size;
}

.vcx-widget-header-image > .ux-layout {
	font-size: clamp(16px, 3cqw, 18px);
}

.vcx-widget-header-image.ux-style-hero {
	max-width: 940px;
}

.vcx-widget-header-image .ux-protection,
.vcx-widget-header-image .ux-overlay {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: none;
}

.vcx-widget-header-image .lazy {
	opacity: 0;
}

.vcx-widget-header-image.ux-edit .ux-overlay {
	display: block;
}

.vcx-widget-header-image .ux-protection {
	background-color: #fff;
	display: block;
	border: 1px solid #eee;
	background: url(../../css/images/ux-protection-th.png) no-repeat center center #fff;
}

.vcx-widget-header-image.en .ux-protection {
	background: url(../../css/images/ux-protection-en.png) no-repeat center center #fff;
}

.vcx-widget-header-image .ux-outer-container {
	position: relative;
	display: block;
	text-align: center;
}

.vcx-widget-header-image .ux-introduction {
	position: relative;
	opacity: 0;
	font-family: var(--primary-title-font-family-en), var(--primary-title-font-family-th), tahoma, sans-serif, FontAwesome;
}

.vcx-widget-header-image.with-icon .xhtml.ux-introduction::before {
	display: none;
}

.vcx-widget-header-image.with-icon .ux-introduction > img {
	float: left;
	margin-right: 0.5em;
	position: relative;
	top: 0.5em;
	width: clamp(48px,3vw,58px);
}

.vcx-widget-header-image .wx-table {
	max-width: min(765px,87vw);
	margin: 30px auto 0;
	position: relative;
	opacity: 0;
}

.vcx-widget-header-image .wx-table > div {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid var(--divider-color);
	font-size: 0.9em;
	padding: 0.4em 0;
}

.vcx-widget-header-image .wx-table > div:last-of-type {
	border-bottom: 0;
}

.vcx-widget-header-image .wx-price {
	max-width: min(765px,87vw);
	margin: 30px auto 0;
	position: relative;
	opacity: 0;
	display: flex;
	font-size: 16px;
	line-height: 1.6em;
}

.vcx-widget-header-image .wx-price .col-a {
	flex: 1;
}

.vcx-widget-header-image .wx-price:not(.ux-show-price) .col-a {
	display: flex;
	gap: 8px;
}

.vcx-widget-header-image .wx-price .col-a .ux-row-2 {
	font-size: 0.85em;
}

.vcx-widget-header-image .wx-price .col-a .ux-selling-price {
	font-size: 2em;
	font-family: oswald;
}

.vcx-widget-header-image .wx-price .col-b {
	width: 220px;
	text-align: right;
}

.vcx-widget-header-image .wx-price .ux-phone-icon {
	-webkit-mask-image: url(../../css/images/icon-phone.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100%;
	mask-image: url(../../css/images/icon-phone.svg);
	mask-repeat: no-repeat;
	mask-size: 100%;
}

.vcx-widget-header-image .wx-price .ux-phone-icon a {
	display: block;
	background-color: var(--icon-phone-color);
	width: 54px;
	height: 54px;
}

.vcx-widget-header-image .wx-price .ux-contact-no a {
	font-family: oswald;
	font-size: 1.4em;
	color: var(--title-color);
	text-decoration: none;
}

.vcx-widget-header-image a.edit {
	position: absolute;
	top: 10px !important;
	right: 10px !important;
	width: 21px;
	height: 21px;
	background: url(../../css/images/graphite_btn_edit.png);
	background-size: cover;
}

.vcx-widget-header-image .ux-introduction > a.edit {
	top: 41px !important;
	right: 34px !important;
}

.vcx-widget-header-image svg {
	overflow: visible !important;
}

.vcx-widget-header-image svg image.draggable {
	cursor: grab;
}

.vcx-widget-header-image .wx-price:hover .command-button,
.vcx-widget-header-image .ux-svg-container:hover .command-button,
.vcx-widget-header-image .ux-introduction:hover .command-button {
	opacity: 1;
	transform: scale(1);
}

.vcx-widget-header-image .wx-price .api[data-action="edit"] {
	top: 10px !important;
	width: 15px !important;
	height: 15px !important;
	right: -26px !important;
}

.vcx-widget-header-image .wx-table .api[data-action="edit"] {
	top: 10px !important;
	width: 15px !important;
	height: 15px !important;
	right: -26px !important;
}

.vcx-widget-header-image .ux-introduction .api[data-action="edit"] {
	top: 45px !important;
	width: 15px !important;
	height: 15px !important;
	right: -26px !important;
}

.vcx-widget-header-image .command-button.settings {
	top: 58px !important;
	right: 9px !important;
}

.vcx-widget-header-image .ux-introduction .command-button.for-introduction {
	top: 63px !important;
	width: 15px !important;
	height: 15px !important;
	right: -26px !important;
}

.vcx-widget-header-image .wx-price .command-button.for-price {
	top: 31px !important;
	width: 15px !important;
	height: 15px !important;
	right: -26px !important;
}

.graphite-app.edit .vcx-widget-header-image .wx-price .ux-wing,
.graphite-app.edit .vcx-widget-header-image .ux-introduction .ux-wing {
	content: '';
	display: block;
	position: absolute;
	right: -28px;
	top: 0;
	width: 28px;
	height: 100%;
}

.vcx-widget-header-image .ux-badge {
	display: inline-block;
	background-color: red;
	color: #fff;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 16px;
	font-family: oswald, anuphan-bold, tahoma, sans-serif;
}

.vcx-widget-header-image a.api[data-action="edit"].sticker {
	top: 38px !important;
	width: 15px !important;
	height: 15px !important;
	background: url(../../css/images/icon-sticker-24x24.png) !important;
	background-size: contain !important;
	right: 10px !important;
}

@media screen and (max-width: 520px) {
	.vcx-widget-header-image .wx-price {
		flex-direction: column;
		align-items: center;
		gap: 30px;
	}

	.vcx-widget-header-image .wx-price .col-b {
		text-align: center;
	}
}