/* =========================================================
   Phu Tung (KhoiAuto) - legacy-grid.css
   =========================================================
   BUG phát hiện 04/09/2026: các trang danh mục sản phẩm theo HÃNG (Phụ tùng
   Lexus, Phụ tùng Toyota...) là các trang WP Page dùng shortcode
   [ka_product_category_layout] (định nghĩa trong file CŨ
   phutungdoxe/inc/ka-product-category-layout.php - xem inc/legacy-compat.php).
   Shortcode này (viết từ thời Flatsome, giữ nguyên không sửa) tự in ra HTML
   dùng đúng bộ class LƯỚI GỐC của Flatsome: .row / .row-small / .row-collapse /
   .col / .col-inner / .large-N / .medium-N / .small-N (N = 1..12) - đây LÀ bộ
   class lưới CỐT LÕI của theme cha Flatsome cũ (nằm trong flatsome.css của
   theme "Flatsome", không phải trong "phutungdoxe" hay "ka-category.css"),
   HOÀN TOÀN KHÁC với bộ class ".ux-row/.ux-col" mà theme "phutung" mới tự định
   nghĩa cho các shortcode UX Builder (section/row/col) trong shortcodes.css.

   Vì theme cha bây giờ là Astra (không phải Flatsome) nên bộ class lưới gốc
   này không hề có CSS - khiến sidebar (.ka-cat-sidebar) và nội dung chính
   (.ka-cat-content) bị xếp CHỒNG DỌC full-width thay vì 2 cột 3/9, và lưới sản
   phẩm bên trong cũng mất khả năng chia cột. Toàn bộ HTML/dữ liệu vẫn render
   đúng (đã kiểm tra: đủ 15 sản phẩm, model strip, phân trang... trong DOM),
   chỉ thiếu CSS lưới.

   File này cấp lại đúng hành vi lưới flexbox 12 cột của Flatsome (không copy
   nguyên file gốc vì flatsome.css là file rất lớn của theme cha, đã ngưng
   active - viết lại tối giản đúng phần lưới cần dùng), dùng chung breakpoint
   849px (medium) / 549px (small) như .ux-col trong shortcodes.css để nhất
   quán trong toàn theme.
   ========================================================= */

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -15px;
	margin-right: -15px;
	box-sizing: border-box;
}
.row.row-small {
	margin-left: -8px;
	margin-right: -8px;
}
.row.row-collapse {
	margin-left: 0;
	margin-right: 0;
}
.row.row-full {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

.col {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	flex: 1 1 0;
	padding-left: 15px;
	padding-right: 15px;
	max-width: 100%;
}
.row.row-small > .col {
	padding-left: 8px;
	padding-right: 8px;
}
.row.row-collapse > .col {
	padding-left: 0;
	padding-right: 0;
}

.col-inner {
	position: relative;
	height: 100%;
}

/* Lưới 12 cột - áp dụng cho .large-N (desktop, mặc định), .medium-N (<=849px),
   .small-N (<=549px). Class không match breakpoint hiện tại thì bỏ qua (giữ
   nguyên flex mặc định của .col ở trên). */
.large-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.large-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.large-3  { flex: 0 0 25%;      max-width: 25%; }
.large-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.large-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.large-6  { flex: 0 0 50%;      max-width: 50%; }
.large-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.large-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.large-9  { flex: 0 0 75%;      max-width: 75%; }
.large-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.large-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.large-12 { flex: 0 0 100%;     max-width: 100%; }

@media (max-width: 849px) {
	.medium-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
	.medium-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
	.medium-3  { flex: 0 0 25%;      max-width: 25%; }
	.medium-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.medium-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
	.medium-6  { flex: 0 0 50%;      max-width: 50%; }
	.medium-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
	.medium-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
	.medium-9  { flex: 0 0 75%;      max-width: 75%; }
	.medium-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
	.medium-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
	.medium-12 { flex: 0 0 100%;     max-width: 100%; }
}

@media (max-width: 549px) {
	.small-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
	.small-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
	.small-3  { flex: 0 0 25%;      max-width: 25%; }
	.small-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.small-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
	.small-6  { flex: 0 0 50%;      max-width: 50%; }
	.small-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
	.small-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
	.small-9  { flex: 0 0 75%;      max-width: 75%; }
	.small-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
	.small-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
	.small-12 { flex: 0 0 100%;     max-width: 100%; }
}

/* .row-collapse giới hạn max-width đã có sẵn trong main.css (không lặp lại ở
   đây) - chỉ bổ sung phần lưới flex/col còn thiếu. */