/* =========================================================
   Phu Tung (KhoiAuto) - shortcodes.css
   CSS cho lớp tương thích shortcode UX Builder (section/row/col/...)
   ========================================================= */

/* ---- section ---- */
.ux-section {
	position: relative;
	background-color: var(--bg-color, transparent);
	background-image: var(--bg-image, none);
	background-size: var(--bg-size, cover);
	background-position: var(--bg-pos, center center);
	background-repeat: no-repeat;
	padding: var(--pad, 0);
	box-sizing: border-box;
}
@media (max-width: 549px) {
	.ux-section { padding: var(--pad-sm, var(--pad, 0)); }
}
.ux-section-overlay { position: absolute; inset: 0; pointer-events: none; }
.ux-section-inner { position: relative; z-index: 1; max-width: 1250px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
.ux-section-full .ux-section-inner { max-width: none; padding: 0; }

/* Khối nền tối (dark="true") - chữ mặc định màu trắng để đủ tương phản, trừ khi
   ux_text tự set text_color riêng (--color đã set trực tiếp trên .ux-text). */
.ux-section-dark { color: #ffffff; }
.ux-section-dark .ux-text:not([style*="--color"]) { color: #ffffff; }
.ux-section-dark h1, .ux-section-dark h2, .ux-section-dark h3,
.ux-section-dark h4, .ux-section-dark h5, .ux-section-dark h6 { color: #ffffff; }
.ux-section-dark .ux-featured-box { color: #ffffff; }
.ux-section-dark .ux-divider span { background: var(--dc, #ffffff); }

/* ---- row ---- */
.ux-row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.ux-row-inner { margin: 0 -8px; }
.row-style-small { margin: 0 -8px; }
.row-style-collapse { margin: 0; }
.row-valign-middle { align-items: center; }
.row-valign-top { align-items: flex-start; }
.row-valign-bottom { align-items: flex-end; }
.row-halign-center { justify-content: center; }
.row-halign-right { justify-content: flex-end; }
.row-full { width: 100%; margin: 0; }

/* ---- col ---- */
.ux-col {
	flex: 0 0 calc(var(--span, 12) / 12 * 100%);
	max-width: calc(var(--span, 12) / 12 * 100%);
	padding: var(--pad, 0 15px);
	box-sizing: border-box;
}
.ux-row-inner > .ux-col, .row-style-small > .ux-col, .row-style-collapse > .ux-col {
	padding: var(--pad, 0 8px);
}
.row-style-collapse > .ux-col { padding: var(--pad, 0); }
@media (max-width: 849px) {
	.ux-col { flex: 0 0 calc(var(--span-md, var(--span, 12)) / 12 * 100%); max-width: calc(var(--span-md, var(--span, 12)) / 12 * 100%); }
}
@media (max-width: 549px) {
	.ux-col {
		flex: 0 0 calc(var(--span-sm, var(--span, 12)) / 12 * 100%);
		max-width: calc(var(--span-sm, var(--span, 12)) / 12 * 100%);
		padding: var(--pad-sm, var(--pad, 0 15px));
	}
}
.col-align-center { text-align: center; }
.col-align-right { text-align: right; }

/* ---- gap ---- */
.ux-gap { height: var(--h, 30px); width: 100%; }

/* ---- text ---- */
.ux-text { color: var(--color, inherit); }
.ux-text p:last-child { margin-bottom: 0; }

/* ---- button ---- */
.ux-btn {
	display: inline-block;
	padding: 12px 26px;
	border-radius: var(--radius, 4px);
	font-weight: 700;
	text-decoration: none;
	background: var(--primary-color, #7d0101);
	color: #fff;
	border: 2px solid transparent;
	transition: opacity .2s ease;
}
.ux-btn:hover { opacity: .85; color: #fff; }
.ux-btn-outline { background: transparent; border-color: #fff; color: #fff; }
.ux-btn-small { padding: 7px 18px; font-size: 13px; }

/* ---- text_box (overlay trong ux_banner) ---- */
.ux-textbox { position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%); text-align: center; z-index: 2; }

/* ---- banner (thẻ dòng xe) ---- */
.ux-banner {
	display: block;
	position: relative;
	height: var(--h, 300px);
	background-image: var(--bg-image, none);
	background-size: var(--bg-size, cover);
	background-position: var(--bg-pos, center center);
	background-repeat: no-repeat;
	border-radius: 8px;
	overflow: hidden;
}
@media (max-width: 849px) {
	.ux-banner { height: var(--h-md, var(--h, 300px)); }
}
@media (max-width: 549px) {
	.ux-banner { height: var(--h-sm, var(--h-md, var(--h, 300px))); }
}

/* ---- image ---- */
.ux-image { max-width: 100%; height: auto; display: inline-block; }

/* ---- product / blog / category grids ---- */
.ux-cat-grid, .ux-product-grid, .ux-blog-grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), 1fr);
	gap: 16px;
}
@media (max-width: 849px) {
	.ux-cat-grid, .ux-product-grid, .ux-blog-grid { grid-template-columns: repeat(var(--cols-md, var(--cols, 3)), 1fr); }
}
@media (max-width: 549px) {
	.ux-cat-grid, .ux-product-grid, .ux-blog-grid { grid-template-columns: repeat(var(--cols-sm, 2), 1fr); }
}

.ux-cat-item, .ux-product-item, .ux-blog-item {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--text-color, #1d1515);
	text-align: center;
}
.ux-cat-thumb {
	display: block;
	width: 100%;
	padding-top: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 6px;
	background-color: #f7f7f7;
}
.ux-cat-name { margin-top: 8px; font-weight: 700; font-size: 13px; }

.ux-product-thumb img { width: 100%; height: auto; border-radius: 6px; }
.ux-product-name { margin-top: 8px; font-weight: 700; font-size: 14px; }
.ux-product-price { display: block; color: var(--primary-color, #7d0101); font-weight: 700; margin-top: 4px; }

.ux-blog-thumb img { width: 100%; height: auto; border-radius: 6px; aspect-ratio: 16/9; object-fit: cover; }
.ux-blog-title { margin-top: 10px; font-weight: 700; font-size: 15px; }
.ux-blog-date { display: block; color: #888; font-size: 12px; margin-top: 4px; }
.ux-blog-excerpt { display: block; color: #666; font-size: 13px; margin-top: 6px; }

/* ---- divider (trang Giới thiệu) ---- */
.ux-divider { display: flex; width: 100%; }
.ux-divider span {
	display: block;
	width: var(--dw, 100px);
	height: var(--dh, 4px);
	background: var(--dc, #7d0101);
	border-radius: 999px;
}
.ux-divider-center { justify-content: center; }
.ux-divider-left { justify-content: flex-start; }
.ux-divider-right { justify-content: flex-end; }

/* ---- featured_box (thẻ icon/ảnh + văn bản: "liên hệ", địa chỉ, hotline...) ---- */
.ux-featured-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	padding: 20px 15px;
}
.ux-featured-box-media {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--img-w, 80px);
	height: var(--img-w, 80px);
}
.ux-featured-box-media img { max-width: 100%; max-height: 100%; height: auto; }
.ux-featured-box-icon { font-size: calc(var(--img-w, 80px) * 0.5); color: var(--primary-color, #7d0101); }
.ux-featured-box-title { display: block; font-weight: 700; font-size: 16px; }
.ux-featured-box-text { display: block; color: inherit; }
.ux-featured-box-text p:last-child { margin-bottom: 0; }