/* ==========================================================================
   57-page-bo-cong-thuong.css — Redesign trang "Khai báo Bộ Công Thương"
   (brief "Update 30092026" mục 12, 30/09/2026, phiên nền #6). CHỈ đổi
   trình bày/layout — nội dung chữ giữ nguyên 100% (III "không tự sửa nội
   dung chuyên môn/pháp lý"), trang KHÔNG có nội dung nào bị bịa thêm.

   Tái dùng TỐI ĐA class HIỆN CÓ trong design system (`30-components.css`):
   `.t4-label`/`.t4fx-nhan` (nhãn section), `.t4fx-h2-moss` (H2 xanh),
   `.t4fx-chu` (đoạn văn), `.t4fx-buoc*` (4 bước quy trình — dùng NGUYÊN
   VĂN class của trang xu-ly-loi-sai-google-ads), `.t4fx-nut*` (nút CTA),
   `[ux_price_table]`/`[ux_image_box]` (shortcode Flatsome có sẵn). Tệp này
   chỉ bổ sung phần KHÔNG có sẵn: 3 thẻ lý do, 3 thẻ loại website (nền tối),
   khoảng cách 4 ô lợi ích, hàng nút hero rút gọn.

   Class `t4bct-*` scope RIÊNG cho trang này qua body class
   `.t4-trang-khai-bao-bo-cong-thuong` (tự sinh từ post_name trong
   `t4_body_class()`) — không rò sang trang khác.
   ========================================================================== */

body.t4-trang-khai-bao-bo-cong-thuong .t4bct-hero-nut {
	display: flex;
	gap: 16px;
	margin-top: 24px;
	flex-wrap: wrap;
}
body.t4-trang-khai-bao-bo-cong-thuong .t4bct-gia-cta {
	margin-top: 32px;
}

/* 3 thẻ "Tại sao phải đăng ký" — lưới 3 cột đều nhau, thẻ nền trắng bo góc. */
body.t4-trang-khai-bao-bo-cong-thuong .t4bct-card-hang {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 32px;
}
/* ⚠ Flatsome tự gán width% cho `.col` theo `span`; cộng thêm `gap` của ta
   là VƯỢT 100% và item cuối bị đẩy xuống hàng mới (đã đo thấy 3 thẻ 336px
   +2×24px gap = 1056px > 1009px khung thật). Ép lại flex-basis theo đúng
   công thức 3 cột trừ khe, đè lên width% mặc định của Flatsome. */
body.t4-trang-khai-bao-bo-cong-thuong .t4bct-card {
	flex: 0 0 calc(33.333% - 16px);
	width: calc(33.333% - 16px);
	max-width: calc(33.333% - 16px);
	background: var(--t4-white, #fff);
	border-radius: 16px;
	padding: 28px 26px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
body.t4-trang-khai-bao-bo-cong-thuong .t4bct-card-td {
	font-family: var(--t4-font-head);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	color: var(--t4-dark-moss, #155446);
	text-align: center;
	margin: 0 0 14px;
}
body.t4-trang-khai-bao-bo-cong-thuong .t4bct-card-mo p {
	font-family: var(--t4-font-body);
	font-size: 14.5px;
	line-height: 23px;
	color: var(--t4-muted, #5E5E5E);
	margin: 0 0 12px;
}
body.t4-trang-khai-bao-bo-cong-thuong .t4bct-card-mo ul {
	margin: 0;
	padding-left: 18px;
}
body.t4-trang-khai-bao-bo-cong-thuong .t4bct-card-mo li {
	font-family: var(--t4-font-body);
	font-size: 14.5px;
	line-height: 23px;
	color: var(--t4-muted, #5E5E5E);
	margin-bottom: 6px;
}

/* 3 thẻ "loại website" — nền tối, thẻ kính mờ. */
body.t4-trang-khai-bao-bo-cong-thuong .t4bct-loai-hang {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 32px;
}
body.t4-trang-khai-bao-bo-cong-thuong .t4bct-loai-the {
	flex: 0 0 calc(33.333% - 16px);
	width: calc(33.333% - 16px);
	max-width: calc(33.333% - 16px);
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 16px;
	padding: 24px 22px 28px;
	text-align: center;
}
body.t4-trang-khai-bao-bo-cong-thuong .t4bct-loai-the img {
	border-radius: 10px;
	margin-bottom: 16px;
}

/* 4 ô lợi ích "Vì sao chọn 4T" — khoảng cách đều, thẻ nền kem nhẹ. */
body.t4-trang-khai-bao-bo-cong-thuong .t4bct-loiich-hang {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 32px;
}
body.t4-trang-khai-bao-bo-cong-thuong .t4bct-loiich-the {
	flex: 0 0 calc(25% - 15px);
	width: calc(25% - 15px);
	max-width: calc(25% - 15px);
	background: var(--t4-cream, #EFE8DA);
	border-radius: 16px;
	padding: 24px 18px 26px;
	text-align: center;
}

/* Khổ hẹp — LUẬT III.18: bọc @media rõ ràng, đo cả 2 khổ sau khi sửa. */
@media (max-width: 849px) {
	body.t4-trang-khai-bao-bo-cong-thuong .t4bct-hero-nut {
		flex-direction: column;
	}
	body.t4-trang-khai-bao-bo-cong-thuong .t4bct-hero-nut .t4fx-nut {
		width: 100%;
	}
	body.t4-trang-khai-bao-bo-cong-thuong .t4bct-card-hang,
	body.t4-trang-khai-bao-bo-cong-thuong .t4bct-loai-hang,
	body.t4-trang-khai-bao-bo-cong-thuong .t4bct-loiich-hang {
		gap: 16px;
	}
	body.t4-trang-khai-bao-bo-cong-thuong .t4bct-card,
	body.t4-trang-khai-bao-bo-cong-thuong .t4bct-loai-the,
	body.t4-trang-khai-bao-bo-cong-thuong .t4bct-loiich-the {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}
}