/* =========================================================
   khoiauto-single-product.css (theme "phutung")
   =========================================================
   BUG phát hiện 04/09/2026 (đối chiếu với bản Flatsome cũ chạy tại
   localhost/khoiauto do Andy cung cấp): plugin "KHOIAUTO Single Product
   Layout" (wp-content/plugins/khoiauto-single-product/khoiauto-single-product.php)
   tự enqueue CSS bằng đường dẫn:

       get_stylesheet_directory() . '/assets/khoiauto-single-product.css'

   tức là nó tìm file này NGAY TRONG THEME ĐANG ACTIVE (child theme), với
   giả định child theme nào cũng có sẵn 1 bản copy file CSS này (đúng như
   theme cũ "doxechuyennghiep" có). Theme "phutung" (Astra child) KHÔNG có
   file này => file_exists() trả về false => KHÔNG enqueue được bất kỳ CSS
   nào cho phần lớn trang sản phẩm đơn (hàm ka_render_single_product_top()
   trong plugin in ra rất nhiều class như .ka-single-top-section,
   .ka-mini-benefit-row, .ka-compatible-tags, .ka-buy-row, .ka-zalo-check-btn,
   .ka-single-service-row... nhưng KHÔNG hề có CSS nào định nghĩa các class
   này ở bất kỳ đâu trên site - đã kiểm tra cả file
   phutungdoxe/assets/khoiauto-single-product.css cũ, cũng không có).

   ĐÃ XÁC NHẬN qua javascript_tool: toàn bộ nội dung (badge tồn kho, tiêu đề,
   giá, 4 ô lợi ích, tag tương thích, nút mua ngay/thêm giỏ, nút Zalo, hàng 4
   thẻ dịch vụ) ĐỀU ĐÃ CÓ SẴN trong HTML/DOM - chỉ là hiển thị thô do thiếu
   CSS, giống hệt các bug lưới danh mục/trang tin tức đã fix trước đó.

   Giải pháp: tạo đúng file này tại đúng đường dẫn plugin đang tìm
   (wp-content/themes/phutung/assets/khoiauto-single-product.css - LƯU Ý:
   nằm thẳng trong assets/, KHÔNG nằm trong assets/css/) - plugin sẽ tự
   enqueue đúng (kèm cache-busting tự động qua filemtime()), không cần sửa
   gì trong functions.php. Toàn bộ màu sắc/kích thước/spacing lấy nguyên từ
   wp-content/plugins/khoiauto-product-builder/assets/product-builder.css
   (file CSS THẬT đang chạy đúng cho khối [ka_product_top_layout] tương
   đương ở phiên bản Flatsome cũ - class .ka-pb-benefits/.ka-pb-compatible/
   .ka-pb-zalo-btn/.ka-pb-service-row...) rồi map sang đúng tên class hiện
   tại (.ka-mini-benefit-row/.ka-compatible-tags/.ka-zalo-check-btn/
   .ka-single-service-row...) mà hàm ka_render_single_product_top() /
   ka_render_single_product_content() của plugin "KHOIAUTO Single Product
   Layout" đang thực sự in ra, để bảo đảm khớp 100% với giao diện gốc.
   ========================================================= */

/* ---------- Section wrapper ---------- */
.single-product .ka-single-top-section {
	max-width: 1250px;
	margin: 0 auto 16px;
	padding: 20px 15px 0;
}

/* ---------- Breadcrumb (.ka-product-breadcrumb) ----------
   BUG phát hiện 05/09/2026, Andy báo "đường dẫn ở trên coi sắp xếp lại cho đẹp":
   plugin in ra <div class="ka-product-breadcrumb"><nav><a>...</a><span>/</span>...
   Tên trang hiện tại (không có thẻ bao)</nav></div> nhưng TRƯỚC GIỜ CHƯA CÓ CSS -
   toàn bộ chữ dính liền nhau không khoảng cách, không phân biệt được link và trang
   hiện tại, dài tràn dòng xấu (nhất là với tên sản phẩm dài). Đã thêm: khoảng cách
   giữa các mục, link màu xám nhạt/hover đỏ, dấu "/" nhạt màu, tự xuống dòng
   (flex-wrap) thay vì tràn ngang, chữ trang hiện tại (text thường, không bọc thẻ)
   thừa hưởng màu đậm hơn từ nav để phân biệt với link. */
.single-product .ka-product-breadcrumb {
	max-width: 1250px;
	margin: 0 auto;
	padding: 14px 15px 0;
}
.single-product .ka-product-breadcrumb nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	color: #333;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.6;
}
.single-product .ka-product-breadcrumb a {
	color: #888;
	font-weight: 600;
	text-decoration: none;
	transition: color .2s ease;
}
.single-product .ka-product-breadcrumb a:hover {
	color: #e00000;
}
.single-product .ka-product-breadcrumb span {
	margin: 0 7px;
	color: #ccc;
	font-weight: 400;
}
@media (max-width: 549px) {
	.single-product .ka-product-breadcrumb nav {
		font-size: 11.5px;
	}
	.single-product .ka-product-breadcrumb span {
		margin: 0 5px;
	}
}

/* ---------- Ribbon nhãn "HÀNG OEM CHÍNH HÃNG" đè trên góc trái ảnh ---------- */
.single-product .ka-single-gallery-wrap {
	position: relative;
}
.single-product .ka-product-label.ka-label-oem {
	position: absolute;
	left: 16px;
	top: 16px;
	z-index: 50;
	display: inline-flex;
	height: 30px;
	padding: 0 13px;
	align-items: center;
	background: #d60000;
	color: #fff;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------- Trạng thái tồn kho + SKU ---------- */
.single-product .ka-product-status-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 13px;
}
.single-product .ka-stock-badge {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 11px;
	background: #e9fff1;
	color: #059b43;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
}
.single-product .ka-sku-badge {
	color: #888;
	font-size: 12px;
	font-weight: 600;
}

/* ---------- Tiêu đề / mô tả ngắn / giá ---------- */
.single-product .ka-single-title {
	font-size: 26px;
	line-height: 1.3;
	font-weight: 800;
	margin: 0 0 10px;
	color: var(--text-color);
}
.single-product .ka-single-short-name {
	color: #666;
	font-size: 13px;
	line-height: 1.4;
	margin-bottom: 10px;
}
.single-product .ka-single-price {
	margin-bottom: 12px;
}
.single-product .ka-single-price .price {
	font-size: 24px;
	font-weight: 800;
	color: var(--alert-color);
}
.single-product .ka-single-price .price ins {
	text-decoration: none;
}
.single-product .ka-single-price .price del {
	color: #999;
	font-size: 16px;
	font-weight: 500;
	margin-right: 8px;
}

/* ---------- Lưới 4 ô lợi ích (Hàng chuẩn OEM / Giao hàng toàn quốc / ...) ---------- */
.single-product .ka-mini-benefit-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	padding: 12px 0;
	margin: 12px 0;
	border-top: 1px solid #f1f1f1;
	border-bottom: 1px solid #f1f1f1;
}
.single-product .ka-mini-benefit {
	display: flex;
	align-items: flex-start;
	gap: 7px;
}
.single-product .ka-mini-benefit span {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	border: 1px solid #e00000;
	border-radius: 50%;
	color: #e00000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 900;
}
.single-product .ka-mini-benefit strong {
	display: block;
	color: #111;
	font-size: 11px;
	line-height: 1.15;
	font-weight: 900;
}
.single-product .ka-mini-benefit small {
	display: block;
	color: #777;
	font-size: 10px;
	line-height: 1.25;
	margin-top: 2px;
}

/* ---------- Checklist (✓ ...) ---------- */
.single-product .ka-product-check-list p {
	margin: 0 0 6px !important;
	color: #333;
	font-size: 13px;
	line-height: 1.35;
}
.single-product .ka-product-check-list p span {
	color: #059b43;
	font-weight: 900;
	margin-right: 4px;
}

/* ---------- Khối "CHÍNH SÁCH / BẢO HÀNH" (chèn bằng JS - xem main.js) ----------
   Khung .ka-detail-box đã có style riêng (border/padding/h2) từ CSS cũ enqueue theo
   class chung, chỉ cần style riêng cho .ka-policy-list (giống .ka-product-check-list). */
.single-product .ka-policy-list p {
	margin: 0 0 8px !important;
	color: #333;
	font-size: 13px;
	line-height: 1.4;
}
.single-product .ka-policy-list p span {
	color: #059b43;
	font-weight: 900;
	margin-right: 4px;
}

/* ---------- Cỡ chữ khối "MÔ TẢ SẢN PHẨM"/"THÔNG SỐ KỸ THUẬT" (.ka-detail-box, class
   dùng chung cho cả #ka-desc và #ka-spec) quá to (07/09/2026, Andy báo "chữ nó quá lớn"
   khi kiểm tra .ka-detail-box/.ka-desc-content). Đã xác minh bằng getComputedStyle:
   .ka-detail-box HIỆN KHÔNG hề có border/padding/background nào (dòng comment cũ phía
   trên nói "đã có style riêng từ CSS cũ" là không còn đúng - có thể style đó đã bị gỡ ở
   1 phiên trước, không tìm thấy trong bất kỳ file CSS nào đang nạp) và cũng KHÔNG có
   font-size riêng -> toàn bộ chữ (kể cả bảng thông số .ka-spec-table) kế thừa thẳng
   font-size của <body>. Gốc rễ: rule "html, body { font-size: 115%; }" trong chính
   main.css (dòng ~32-37, port nguyên từ Additional CSS Flatsome cũ) bị lặp lại 2 lần vì
   viết chung 1 selector - <html> = 16px*1.15 = 18.4px, rồi <body> (phần tử CON của
   <html>) lại tính tiếp 115% CỦA 18.4px (không phải của 16px gốc) = 21.16px, gộp lại
   thành +32% thay vì +15% như chủ đích ban đầu. Đây là lỗi TOÀN SITE (ảnh hưởng bất kỳ
   phần tử nào chưa có font-size riêng của chính nó), nhưng phạm vi sửa lần này CHỈ giới
   hạn đúng khối Andy phản ánh để an toàn (không đụng rule global "html,body" vì rủi ro
   ảnh hưởng những chỗ khác chưa kiểm tra hết) - đặt font-size cố định bằng px cho khối
   này, không phụ thuộc <body> nữa. */
.single-product .ka-detail-box {
	font-size: 15px;
	line-height: 1.7;
}
.single-product .ka-detail-box h2 {
	font-size: 20px;
	line-height: 1.3;
}
.single-product .ka-detail-box .ka-desc-content p,
.single-product .ka-detail-box .ka-desc-content li {
	font-size: 15px;
	line-height: 1.7;
}
.single-product .ka-spec-table,
.single-product .ka-spec-table td,
.single-product .ka-spec-table th {
	font-size: 14px;
}
.single-product .ka-feature-icon-row {
	font-size: 13px;
}

/* ---------- Tag "Tương thích: ..." ---------- */
.single-product .ka-compatible-tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 18px;
	color: #555;
	font-size: 12px;
}
.single-product .ka-compatible-tags span {
	font-weight: 700;
}
.single-product .ka-compatible-tags em {
	font-style: normal;
	min-height: 25px;
	padding: 0 10px;
	background: #f5f5f5;
	border: 1px solid #ededed;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	color: #333;
	font-size: 11px;
	font-weight: 800;
}

/* ---------- Hàng số lượng + nút mua ---------- */
.single-product .ka-buy-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}
.single-product .ka-qty-box {
	display: flex;
	align-items: center;
	gap: 8px;
}
.single-product .ka-qty-box span {
	font-size: 13px;
	font-weight: 700;
	color: #333;
	white-space: nowrap;
}
.single-product .ka-qty-box .quantity {
	display: inline-flex;
}
.single-product .ka-qty-box .quantity .qty {
	width: 60px;
	height: 40px;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-align: center;
	font-size: 14px;
}
.single-product .ka-buy-now-btn,
.single-product .ka-add-cart-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 6px 20px;
	border-radius: 5px;
	font-size: 13px;
	font-weight: 900;
	text-transform: uppercase;
	text-decoration: none !important;
	line-height: 1.3;
	text-align: center;
}
.single-product .ka-buy-now-btn {
	background: linear-gradient(90deg, #c90000, #f02323);
	color: #fff !important;
}
.single-product .ka-buy-now-btn small {
	color: rgba(255, 255, 255, 0.85);
	font-size: 10px;
	font-weight: 600;
	text-transform: none;
}
.single-product .ka-add-cart-btn {
	background: #fff;
	border: 1px solid var(--alert-color);
	color: var(--alert-color) !important;
}

/* ---------- Nút Zalo "KIỂM TRA ĐÚNG MÃ QUA ZALO" ---------- */
.single-product .ka-zalo-check-btn {
	min-height: 52px;
	border: 1px solid #0b67ff;
	border-radius: 5px;
	display: grid;
	grid-template-columns: 42px 1fr;
	grid-template-rows: auto auto;
	column-gap: 9px;
	align-items: center;
	padding: 8px 12px;
	text-decoration: none !important;
	background: #fff;
	margin-bottom: 16px;
}
.single-product .ka-zalo-check-btn span {
	grid-row: 1 / span 2;
	width: 34px;
	height: 34px;
	border: 1px solid #0b67ff;
	border-radius: 50%;
	color: #0b67ff;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 900;
}
.single-product .ka-zalo-check-btn small {
	grid-column: 2;
	color: #666;
	font-size: 9.5px;
	line-height: 1.1;
}
.single-product .ka-zalo-check-btn {
	color: #0b67ff;
	font-size: 11.5px;
	font-weight: 900;
	line-height: 1.1;
}

/* ---------- Hàng 4 thẻ dịch vụ dưới gallery/summary ---------- */
.single-product .ka-single-service-row {
	max-width: 1220px;
	margin: 16px auto 16px;
}
.single-product .ka-single-service-row.row > .col {
	display: flex;
}
.single-product .ka-single-service-card {
	width: 100%;
	min-height: 74px;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 15px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.035);
}
.single-product .ka-single-service-card span {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	border: 1px solid #e00000;
	border-radius: 50%;
	color: #e00000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 900;
}
.single-product .ka-single-service-card strong {
	display: block;
	color: #111;
	font-size: 11px;
	line-height: 1.15;
	font-weight: 900;
}
.single-product .ka-single-service-card small {
	display: block;
	color: #777;
	font-size: 10px;
	line-height: 1.25;
	margin-top: 2px;
}

/* ---------- Khối "VÌ SAO CHỌN..." 4 ô nhỏ dưới khung mô tả/thông số (.ka-why-mini-row) ----------
   Phát hiện thêm 04/09/2026 khi cuộn xuống kiểm tra khối CHÍNH SÁCH/BẢO HÀNH mới chèn:
   khối này (◎ ĐÚNG MÃ-ĐÚNG XE / ⚙ PHỤ TÙNG CHÍNH HÃNG / $ GIÁ TỐT-MINH BẠCH / ☎ TƯ VẤN
   CHUYÊN SÂU, nằm dưới khối 2 cột mô tả/thông số) trước giờ CHƯA có CSS nào cả (xếp dọc
   từng dòng, không phải lưới 4 cột) - style đồng bộ với .ka-single-service-card. */
.single-product .ka-why-mini-row {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 14px;
	max-width: 1220px;
	margin: 24px auto;
	padding: 0 15px;
}
.single-product .ka-why-mini-card {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 8px;
	padding: 16px 14px;
	text-align: center;
	box-shadow: 0 3px 12px rgba( 0, 0, 0, 0.035 );
}
.single-product .ka-why-mini-card span {
	display: inline-flex;
	width: 34px;
	height: 34px;
	border: 1px solid #e00000;
	border-radius: 50%;
	color: #e00000;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 900;
	margin-bottom: 8px;
}
.single-product .ka-why-mini-card strong {
	display: block;
	color: #111;
	font-size: 12px;
	font-weight: 900;
	margin-bottom: 4px;
}
.single-product .ka-why-mini-card small {
	display: block;
	color: #777;
	font-size: 11px;
	line-height: 1.3;
}

/* ---------- Khối "CÂU HỎI THƯỜNG GẶP" (.ka-faq-row, accordion <details>/<summary>) ----------
   Cũng chưa có CSS - hiện dạng list mặc định trình duyệt (chấm tam giác ▶ thô). */
.single-product .ka-faq-row {
	max-width: 1220px;
	margin: 24px auto;
	padding: 0 15px;
}
.single-product .ka-faq-row h2 {
	text-align: center;
	margin-bottom: 16px;
}
.single-product .ka-faq-grid details {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 10px;
}
.single-product .ka-faq-grid summary {
	cursor: pointer;
	font-weight: 800;
	font-size: 14px;
	color: #111;
	list-style: none;
}
.single-product .ka-faq-grid summary::-webkit-details-marker {
	display: none;
}
.single-product .ka-faq-grid summary::before {
	content: "▸";
	color: #e00000;
	margin-right: 8px;
	font-weight: 900;
}
.single-product .ka-faq-grid details[open] summary::before {
	content: "▾";
}
.single-product .ka-faq-grid p {
	margin: 10px 0 0;
	color: #555;
	font-size: 13px;
	line-height: 1.5;
}

/* ---------- Thanh tab điều hướng "MÔ TẢ SẢN PHẨM / THÔNG SỐ KỸ THUẬT / ..." (.ka-product-tab-nav) ----------
   BUG phát hiện 04/09/2026, Andy báo "lệch rất nặng" kèm 2 ảnh chụp so sánh: thanh này
   (plugin "KHOIAUTO Single Product Layout" in ra, các link <a href="#ka-desc" class="active">...)
   trước giờ HOÀN TOÀN CHƯA có CSS nào cả - hiện dạng link chữ thường liền nhau, không
   icon, không gạch chân tab đang chọn, không khoảng cách - so với bản Flatsome gốc
   (localhost/khoiauto) có icon riêng mỗi tab + gạch chân đỏ cho tab active. Chỉ cần
   style lại đúng các thẻ <a> có sẵn (đã có sẵn class "active" cho tab đầu) - không cần
   sửa gì trong file PHP của plugin bên thứ 3 (an toàn, đúng quy trình chỉ sửa file CSS
   riêng của theme). */
.single-product .ka-product-tab-nav {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 4px;
	max-width: 1220px;
	margin: 0 auto 18px;
	padding: 0 15px;
	border-bottom: 2px solid #eee;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.single-product .ka-product-tab-nav a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 13px 14px;
	margin-bottom: -2px;
	color: #666;
	font-size: 12.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .01em;
	text-decoration: none !important;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.single-product .ka-product-tab-nav a:hover {
	color: #e00000;
}
.single-product .ka-product-tab-nav a.active {
	color: #e00000;
	border-bottom-color: #e00000;
}
.single-product .ka-product-tab-nav a::before {
	font-size: 13px;
	line-height: 1;
}
.single-product .ka-product-tab-nav a[href="#ka-desc"]::before { content: "\1F4C4"; }
.single-product .ka-product-tab-nav a[href="#ka-spec"]::before { content: "\2699\FE0F"; }
.single-product .ka-product-tab-nav a[href="#ka-compatible"]::before { content: "\1F697"; }
.single-product .ka-product-tab-nav a[href="#ka-policy"]::before { content: "\1F6E1\FE0F"; }
.single-product .ka-product-tab-nav a[href="#ka-review"]::before { content: "\2605"; }

/* ---------- Bỏ hẳn tab "ĐÁNH GIÁ" (07/09/2026, mục #12 tồn đọng từ lâu - Andy quyết
   định KHÔNG xây hệ thống đánh giá thật, chỉ cần ẩn tab/link chết "#ka-review" đi thay vì
   để trống). Không sửa PHP của plugin bên thứ 3 (đúng quy trình), chỉ ẩn bằng CSS. */
.single-product .ka-product-tab-nav a[href="#ka-review"] {
	display: none !important;
}

/* ---------- Khối "XE TƯƠNG THÍCH" (#ka-compatible, .ka-car-compatible-grid/.ka-car-card) ----------
   BUG phát hiện 05/09/2026 tại trang 85710-48121-motor-len-xuong-kinh-truoc-lexus-rx350-oem/
   (Andy báo "nội dung bên dưới còn bị lệch"): khối này (plugin "KHOIAUTO Single Product
   Layout" in ra, .ka-car-card gồm <img>/<strong>/<small>/<em> nằm cạnh nhau) TRƯỚC GIỜ
   HOÀN TOÀN CHƯA CÓ CSS - với sản phẩm chỉ có 1 xe tương thích thì tình cờ trông tạm ổn
   (ảnh full-width rồi chữ rớt xuống dòng dưới do ảnh chiếm hết chiều ngang), nhưng với
   sản phẩm có TỪ 2 XE TƯƠNG THÍCH trở lên thì vỡ layout hẳn: ảnh 2 xếp chồng dọc, chữ
   "LEXUS ES350 2006-2008" trôi nổi cạnh ảnh thay vì nằm bên dưới. Đã thêm CSS đầy đủ:
   lưới thẻ nhiều cột, mỗi thẻ có khung bo góc/đổ bóng (đồng bộ style với
   .ka-single-service-card), ảnh vuông object-fit:contain, <em> "TƯƠNG THÍCH" thành badge
   đỏ bo tròn (giống ngôn ngữ thiết kế "chip"/badge dùng ở các nơi khác trong theme). */
.single-product .ka-car-compatible-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 16px;
}
.single-product .ka-car-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .035);
}
.single-product .ka-car-card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: #f7f7f7;
	margin: 0;
}
.single-product .ka-car-card strong {
	display: block;
	margin-top: 10px;
	color: #111;
	font-size: 13px;
	font-weight: 900;
	text-transform: uppercase;
}
.single-product .ka-car-card small {
	display: block;
	margin-top: 2px;
	color: #777;
	font-size: 11.5px;
}
.single-product .ka-car-card em {
	display: inline-block;
	margin: 10px 0 14px;
	padding: 3px 12px;
	border-radius: 99px;
	background: #e8f8ee;
	color: #059b43;
	font-size: 10.5px;
	font-weight: 900;
	font-style: normal;
	letter-spacing: .02em;
}
.single-product .ka-car-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 18px;
	padding: 12px 22px;
	border: 1px solid #e00000;
	border-radius: 5px;
	color: #e00000 !important;
	font-size: 12.5px;
	font-weight: 900;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: all .2s ease;
}
.single-product .ka-car-more-btn:hover {
	background: #e00000;
	color: #fff !important;
}

/* ---------- Responsive (đồng bộ breakpoint 849px/549px toàn theme) ---------- */
@media (max-width: 849px) {
	.single-product .ka-mini-benefit-row {
		grid-template-columns: repeat(2, 1fr);
	}
	.single-product .ka-why-mini-row {
		grid-template-columns: repeat(2, 1fr);
	}
	.single-product .ka-car-compatible-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 549px) {
	.single-product .ka-mini-benefit-row {
		grid-template-columns: 1fr;
	}
	.single-product .ka-why-mini-row {
		grid-template-columns: 1fr;
	}
	.single-product .ka-car-compatible-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.single-product .ka-buy-row {
		flex-direction: column;
		align-items: stretch;
	}
	.single-product .ka-buy-now-btn,
	.single-product .ka-add-cart-btn {
		width: 100%;
	}
	.single-product .ka-product-tab-nav a {
		padding: 11px 10px;
		font-size: 11.5px;
	}
}

/* ---------- Banner "CẦN BÁO GIÁ / CHAT ZALO NGAY" cuối trang (.ka-single-zalo-banner)
   (06/09/2026, Andy chụp ảnh báo "lệch") ----------
   BUG: plugin bên thứ 3 in ra <div class="ka-single-zalo-banner"><div class="ka-zalo-hand">
   Zalo</div><div class="ka-zalo-banner-text">...</div><a class="ka-zalo-banner-btn">...</a>
   <div class="ka-zalo-qr-demo">QR</div></div> nhưng KHÔNG CÓ MỘT DÒNG CSS NÀO trong toàn bộ
   theme "phutung" cho các class này - hiện ra đúng như Andy chụp: chữ "Zalo" và "QR" trần
   trụi không có khung/ảnh, nút "CHAT ZALO NGAY" không có style, xếp dọc lộn xộn.
   Đối chiếu bản gốc localhost (`.ka-product-below-cta`, đo bằng getComputedStyle): banner
   gốc CHỈ có 3 phần (tiêu đề+mô tả, nút Chat Zalo) - KHÔNG hề có icon bàn tay hay khối QR
   nào cả, nên 2 phần ".ka-zalo-hand"/".ka-zalo-qr-demo" chỉ là placeholder demo thừa của
   plugin, ẩn hẳn đi cho khớp đúng bản gốc thay vì cố tạo icon/ảnh QR giả. */
.single-product .ka-single-zalo-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px;
	padding: 20px 28px;
	border-radius: 9px;
	background-image: linear-gradient(90deg, #c90000, #f02323);
	margin: 30px auto;
	max-width: 1250px;
	box-sizing: border-box;
}
.single-product .ka-single-zalo-banner .ka-zalo-hand,
.single-product .ka-single-zalo-banner .ka-zalo-qr-demo {
	display: none;
}
.single-product .ka-zalo-banner-text h2 {
	color: #fff;
	font-size: 22px;
	font-weight: 900;
	margin: 0 0 5px;
}
.single-product .ka-zalo-banner-text p {
	color: rgba(255, 255, 255, 0.9);
	font-size: 13px;
	margin: 0;
}
.single-product .ka-zalo-banner-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 42px;
	padding: 0 22px;
	background: #fff;
	color: #d60000 !important;
	font-size: 13px;
	font-weight: 900;
	text-transform: uppercase;
	text-decoration: none !important;
	border-radius: 5px;
	white-space: nowrap;
	transition: background 0.2s, color 0.2s;
}
.single-product .ka-zalo-banner-btn:hover,
.single-product .ka-zalo-banner-btn:focus {
	background: #1d1515;
	color: #fff !important;
}
@media (max-width: 549px) {
	.single-product .ka-single-zalo-banner {
		justify-content: center;
		text-align: center;
		padding: 18px 20px;
	}
	.single-product .ka-zalo-banner-btn {
		width: 100%;
	}
}

/* ---------- Sắp xếp lại khối 4 box "MÔ TẢ SẢN PHẨM/THÔNG TIN NỔI BẬT/THÔNG SỐ KỸ
   THUẬT/XE TƯƠNG THÍCH/CHÍNH SÁCH BẢO HÀNH" thành đúng lưới như ảnh demo Andy gửi
   (07/09/2026) ----------
   HIỆN TRẠNG trước khi sửa: HTML in ra 2 cột (.col.large-6) ĐỘC LẬP, mỗi cột tự xếp
   DỌC các box của riêng nó - cột trái: #ka-desc > #ka-spec > #ka-policy xếp chồng
   sát nhau (margin=0 giữa các box); cột phải: .ka-highlight-box > #ka-compatible xếp
   chồng sát nhau. Vì nội dung MÔ TẢ SẢN PHẨM dài/ngắn khác nhau tuỳ sản phẩm, #ka-spec
   không hề nằm ngang hàng với #ka-compatible (2 cột chạy lệch nhau, "XE TƯƠNG THÍCH"
   trồi lên cao hơn hẳn "THÔNG SỐ KỸ THUẬT" thay vì nằm cạnh nhau) - khác hẳn ảnh demo
   Andy gửi, nơi 2 khối này rõ ràng nằm THÀNH 1 HÀNG ngang với nhau, và
   "CHÍNH SÁCH/BẢO HÀNH" không ghép cặp với gì cả.

   Không thể sửa PHP của plugin bên thứ 3 để đổi cấu trúc HTML (đúng quy trình dự án),
   nên dùng kỹ thuật "display:contents" (đã dùng thành công cho ka-category.css ở phiên
   trước) để "làm biến mất" 2 khối bọc ".col" khỏi cây render, lộ trực tiếp 5 box con ra
   làm item của lưới CSS Grid đặt trên ".ka-single-info-row" - từ đó xếp lại đúng vị trí
   theo hàng/cột bất kể thứ tự HTML gốc: hàng 1 = #ka-desc | .ka-highlight-box, hàng 2 =
   #ka-spec | #ka-compatible, hàng 3 = #ka-policy chiếm trọn cả 2 cột (đúng như ảnh demo,
   nơi khối này không xuất hiện ghép cặp với box nào). CHỈ áp dụng ở desktop thật
   (>=992px, đúng breakpoint 2 cột thật đã xác định ở các phiên trước) - dưới 991px giữ
   nguyên hành vi xếp dọc theo cột hiện tại (không đụng vào, an toàn cho mobile). */
@media (min-width: 992px) {
	.ka-single-info-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 30px;
		row-gap: 30px;
		padding: 0 15px;
		box-sizing: border-box;
	}
	.ka-single-info-row > .col {
		display: contents;
	}
	.ka-single-info-row > .col > * {
		min-width: 0;
	}
	.single-product .ka-single-info-row #ka-desc {
		grid-column: 1;
		grid-row: 1;
	}
	.single-product .ka-single-info-row .ka-highlight-box {
		grid-column: 2;
		grid-row: 1;
	}
	.single-product .ka-single-info-row #ka-spec {
		grid-column: 1;
		grid-row: 2;
	}
	.single-product .ka-single-info-row #ka-compatible {
		grid-column: 2;
		grid-row: 2;
	}
	.single-product .ka-single-info-row #ka-policy {
		grid-column: 1 / -1;
		grid-row: 3;
	}
}