/* --- BỐ CỤC CHUNG --- */
.mtk-section-info, .mtk-section-description { margin-bottom: 40px; }
.mtk-info-box .product-title { margin-bottom: 15px; }
.mtk-swatch-title { margin-top: 25px; margin-bottom: 10px; font-weight: 600; font-size: 1.1em; }

/* --- BỘ CHỌN MÀU (SWATCH) - CHỐNG CACHE --- */
.mtk-colors-repeater {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 25px;
}

.mtk-color-dot-wrapper {
	position: relative !important;
	width: 25px !important;
	height: 25px !important;
	border: 1px solid #ccc !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	transition: transform 0.2s;
}
.mtk-color-dot-wrapper:hover {
	transform: scale(1.1);
}
.mtk-color-dot {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

.mtk-check-icon {
	position: absolute !important;
	font-weight: bold !important;
	font-size: 16px !important;
	display: none !important; /* Mặc định ẩn */
}

/* Khi có class selected */
.mtk-color-dot-wrapper.selected .mtk-check-icon {
	display: block !important; 
}

/* Đổi màu tick dựa trên màu nền */
.mtk-color-light .mtk-check-icon { color: #000 !important; }
.mtk-color-dark .mtk-check-icon { color: #fff !important; }

/* --- CÁC BUTTON ACTION --- */
.mtk-action-buttons { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}
a.button.btn-quote-register { 
	display: flex;
    padding: 8px 0;
    flex-direction: column;
    background-color: #f7a33e; 
    color: #fff; 
    text-transform: uppercase; 
    font-weight: bold; 
    width: 100%; 
	margin: 0 !important;
}
a.button.btn-quote-register .top{
	text-transform: uppercase;
    font-weight: bold;
}
a.button.btn-quote-register .sub{
	display: block;
    font-size: 0.9em;
    font-weight: normal;
    letter-spacing: 0.5px;
}
/* Style cho nút có 2 dòng text */
.mtk-support-buttons{
	display: flex; 
	gap: 15px;
}
.mtk-support-buttons a.button{
	width: 100%;
	margin: 0;
	display: flex;
    padding: 8px 0;
}
.btn-support { 
    background-color: #1a1a1a !important; /* Đè màu của Flatsome */
    color: #fff !important; 
    display: flex;
    flex-direction: column; /* Xếp 2 span dọc xuống */
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    line-height: 1.2;
    border-radius: 3px;
    margin-bottom: 0;
}
.btn-support:hover {
    background-color: #333 !important;
}
.btn-support .top {
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: bold;
}
.btn-support .sub {
	display: block;
    font-size: 0.9em;
    font-weight: normal;
    letter-spacing: 0.5px;
}

/* --- SECTION 2: MÔ TẢ --- */
.mtk-summary-table-section { background-color: #f6f6f6; border: 1px solid #eee; padding: 25px; border-radius: 5px; }
.mtk-summary-table { width: 100%; border-collapse: collapse; margin-bottom: 0; }
.mtk-summary-table th, .mtk-summary-table td { 
	padding: 7px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #eee;
}
.mtk-summary-table th { width: 35%; font-weight: 600; color: #333; }
.mtk-summary-table tr:last-child th, .mtk-summary-table tr:last-child td { border-bottom: none; }
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.mtk-section-info .row .large-6{
		padding-bottom: 0;
	}
	.mtk-swatch-title {
		margin-top: 0;
		margin-bottom: 5px;
	}
}