/*
 * Responsive cho shophoacantho.vn
 * Chỉ áp dụng cho màn hình < 1024px; giao diện desktop giữ nguyên.
 *   - Tablet: 600px - 1023px (lưới sản phẩm 3 cột)
 *   - Điện thoại: < 600px (lưới sản phẩm 2 cột)
 */

/* Chữ chỉ dành cho công cụ tìm kiếm / trình đọc màn hình (vd. H1 trang chủ) */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Banner quảng cáo cố định bên trái (178px): chỉ hiện khi 2 bên khung 1200px còn đủ chỗ,
   tránh đè lên nội dung trên laptop 1280/1366px. jQuery gắn display:block inline nên cần !important */
@media (max-width: 1599px) {
	#bannerTrai { display: none !important; }
}

/* Banner trang chủ (ảnh đồng bộ shophoacantho.com): poster dọc 184x350 bên trái + slider 572x350 = cột chính 760px */
.home-banner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 8px;
}
.home-slide { position: relative; }
.home-banner #slider li {
	width: 572px;
	height: 350px;
	margin-bottom: 0;
}
.home-banner #slider li a,
.home-banner #slider li img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.home-banner #prevBtn,
.home-banner #nextBtn { top: 50%; margin-top: -19px; }
.home-banner #nextBtn { left: auto; right: 10px; }
#widgetPContent .home-poster { display: block; }
.home-poster img {
	display: block;
	width: 184px;
	height: 350px;
	object-fit: cover;
}

/* PC: ô "Quà tặng lan hồ điệp" đầu sidebar cao 350px, ngang hàng poster + slider */
@media (min-width: 1024px) {
	#vitri3 p:has(> a > img[src*="lan-ho-diep.png"]) { margin: 0; font-size: 0; line-height: 0; text-align: center; } /* bỏ lệch do &nbsp; */
	#vitri3 img[src*="lan-ho-diep.png"] { width: 231px; height: 350px; }
	#vitri3 p:has(> a > img[src*="lan-ho-diep.png"]) ~ p { display: none; } /* <p>&nbsp;</p> thừa: tiêu đề sidebar thẳng hàng "Sản phẩm mới" */
}

/* Nút menu và danh mục sản phẩm chèn vào menu chỉ hiện trên mobile */
.rsp-menu-toggle,
.rsp-call,
#menuContent .Menu li.rsp-only { display: none; }

@media (max-width: 1023px) {

	html { -webkit-text-size-adjust: 100%; }
	body {
		font-size: 14px;
		line-height: 20px;
		background-image: none;
	}

	/* ---------- Khung trang ---------- */
	.wrapper,
	#pageContent .wrapper,
	#headerContent div[style*="width:1000px"] {
		width: auto !important;
		max-width: 100%;
		box-sizing: border-box;
	}
	/* Lề trang thống nhất 10px */
	#headerContent div[style*="width:1000px"] { padding: 0 10px; }

	#pageContent img,
	#headerContent .banner img,
	#footerContent img {
		max-width: 100%;
		height: auto;
	}
	#pageContent iframe,
	#pageContent video,
	#pageContent embed,
	#pageContent object {
		max-width: 100%;
	}

	/* Quảng cáo cố định bên trái không còn chỗ trên màn hình nhỏ */
	#bannerTrai { display: none !important; }

	/* ---------- Header: logo trái | hotline + nút menu ở góc phải ---------- */
	#headerContent { background: #fff; }
	#headerContent .banner {
		position: relative;
		z-index: 10001; /* nằm trên lớp nền tối khi mở menu */
		display: flex;
		align-items: center;
		gap: 8px;
		height: 64px;
		padding: 0 10px;
		background: #fff;
		border-bottom: 1px solid #e6e6e6;
		box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
		overflow: hidden;
	}
	/* Ảnh banner 1000x137: chỉ giữ phần logo bên trái */
	#headerContent .banner #Layer1 {
		flex: 0 1 138px; /* vừa phần logo, không lộ mảng xanh bên phải của ảnh */
		min-width: 0;
		margin: 0 !important; /* #Layer1 có class .wrapper (margin auto) -> giữ logo sát trái */
		height: 44px;
		overflow: hidden;
	}
	#headerContent .banner #Layer1 .logo-link { display: block; }
	#headerContent .banner #Layer1 img {
		display: block;
		height: 44px;
		width: auto;
		max-width: none;
	}

	/* Hotline: icon tròn đỏ + 2 dòng chữ */
	.rsp-call {
		display: flex;
		align-items: center;
		gap: 6px;
		flex: 0 0 auto;
		margin-left: auto;
		color: #222 !important;
		text-decoration: none !important;
	}
	.rsp-call-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: #d32f2f;
		color: #fff;
		box-shadow: 0 1px 3px rgba(211, 47, 47, .4);
	}
	.rsp-call-text {
		display: flex;
		flex-direction: column;
		line-height: 1.15;
	}
	.rsp-call-text small {
		font: 11px Arial, sans-serif;
		color: #777;
		text-transform: uppercase;
		letter-spacing: .3px;
	}
	.rsp-call-text strong {
		font: bold 15px Arial, sans-serif;
		color: #d32f2f;
		white-space: nowrap;
	}

	/* Nút menu vuông ở góc phải */
	.rsp-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: #2f6f12;
		cursor: pointer;
	}
	.rsp-menu-toggle .rsp-bars,
	.rsp-menu-toggle .rsp-bars::before,
	.rsp-menu-toggle .rsp-bars::after {
		display: block;
		width: 20px;
		height: 2px;
		background: #fff;
		border-radius: 1px;
		content: "";
		position: relative;
		transition: transform .2s, background .2s;
	}
	.rsp-menu-toggle .rsp-bars::before { position: absolute; top: -6px; }
	.rsp-menu-toggle .rsp-bars::after { position: absolute; top: 6px; }
	/* Menu đang mở: icon thành dấu X */
	html.rsp-menu-open .rsp-menu-toggle .rsp-bars { background: transparent; }
	html.rsp-menu-open .rsp-menu-toggle .rsp-bars::before { top: 0; transform: rotate(45deg); }
	html.rsp-menu-open .rsp-menu-toggle .rsp-bars::after { top: 0; transform: rotate(-45deg); }
	/* Dấu X mảnh hơn thanh menu */
	html.rsp-menu-open .rsp-menu-toggle .rsp-bars::before,
	html.rsp-menu-open .rsp-menu-toggle .rsp-bars::after { width: 18px; height: 1.5px; }

	/* Thanh menu desktop: chỉ còn làm điểm neo cho menu thả xuống */
	#headerContent2 { background: none; box-shadow: none; }
	#headerContent2 .wrapper { padding: 0 10px; }
	#menuContent {
		height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	/* Menu mở dạng lớp phủ nằm trên nội dung */
	#menuContent {
		position: relative;
		z-index: 10000;
	}
	#menuContent .Menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: 75vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		margin-top: 6px;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
	}
	#menuContent.rsp-open .Menu { display: block; }
	/* Menu đang mở: kéo dài tới đáy màn hình, cuộn bên trong menu (vị trí trên do responsive.js tính) */
	#menuContent.rsp-open .Menu {
		position: fixed;
		top: var(--rsp-menu-top, 70px);
		bottom: 8px;
		left: 8px;
		right: 8px;
		max-height: none;
		margin-top: 0;
	}
	html.rsp-menu-open,
	html.rsp-menu-open body { overflow: hidden; }
	html.rsp-menu-open body::after {
		content: "";
		position: fixed;
		top: 0; right: 0; bottom: 0; left: 0;
		z-index: 9999;
		background: rgba(0, 0, 0, .4);
	}
	#menuContent .Menu li.rsp-only { display: block; }
	#menuContent .Menu li.rsp-cat-head span {
		display: block;
		padding: 10px 14px;
		background: #2f6f12;
		color: #fff;
		font: bold 14px Arial, sans-serif;
		text-transform: uppercase;
	}
	#menuContent .Menu li.rsp-cat a { text-transform: none; }
	#menuContent .Menu li.rsp-cat a span { padding: 10px 14px 10px 30px; font: 14px Arial, sans-serif; }
	#menuContent .Menu li {
		float: none;
		width: auto !important;
		margin: 0;
		padding-left: 0 !important;
		text-align: left;
		border-top: 1px solid #e6efd6;
	}
	#menuContent .Menu li.menuline { display: none; }
	#menuContent .Menu a,
	#menuContent .Menu a span { font-size: 14px; }
	#menuContent .Menu a span { padding: 12px 14px; }
	#menuContent .Menu a span.haveSub { background: none; }
	/* Mục đang xem: kiểu phẳng thay cho gradient của desktop */
	#menuContent .Menu > li.active > a,
	#menuContent .Menu > li.active > a span,
	#menuContent .Menu > li > a.active,
	#menuContent .Menu > li > a.active span {
		background: #eef6e8 !important;
		color: #2f6f12 !important;
		font-weight: bold;
	}
	/* Menu con hiện sẵn bên dưới mục cha (không dùng hover trên cảm ứng) */
	#menuContent .Menu ul {
		position: static !important;
		display: block !important;
		height: auto !important;
		overflow: visible !important;
		padding: 0;
		background: #f6faef;
		box-shadow: none;
	}
	#menuContent .Menu ul li { width: auto; }
	#menuContent .Menu ul li a { background: none; }
	#menuContent .Menu ul li a span { padding: 10px 14px 10px 30px; font-size: 14px; }
	#menuContent .Menu ul li:last-child { margin-bottom: 0; padding-bottom: 0; background: none; border-radius: 0; }

	/* ---------- Cột nội dung và sidebar xếp chồng ---------- */
	#vitri2,
	#vitri3 {
		float: none;
		width: auto;
	}
	#vitri3 { margin-top: 16px; }
	/* Tiêu đề mục kiểu phẳng: vạch xanh đậm bên trái, chữ đậm, không gradient */
	#vitri2 #widgetPTitle,
	#vitri3 #widgetPTitle {
		display: flow-root; /* chứa phần tử float bên trong (breadcrumb) */
		height: auto;
		margin: 0 0 10px;
		padding: 0;
		border: 0;
		border-left: 4px solid #2f6f12;
		background: none;
	}
	#vitri2 #widgetPTitle .title,
	#vitri3 #widgetPTitle .title {
		display: flow-root;
		height: auto;
		padding: 4px 10px !important;
		background: none !important;
		color: #2f6f12;
		font: bold 16px/24px Arial, sans-serif;
		text-transform: uppercase;
	}
	#widgetPTitle .title a { color: #2f6f12 !important; }
	#widgetPTitle .hoavan { display: none; }
	/* Sidebar: bỏ phần nội dung bị kéo lên chồng tiêu đề (margin âm của desktop) */
	#vitri3 #widgetPContent {
		margin-top: 0;
		padding: 6px 10px;
		border: 1px solid #e6e6e6;
		border-radius: 6px;
	}
	/* Khoảng cách giữa các khối nội dung */
	#vitri2 > #widgetP,
	#vitri3 > #widgetP { margin: 0 0 16px; }
	#vitri2 > #widgetP:first-child { margin-top: 10px; }
	#vitri3 #widgetP,
	#vitri3 #widgetPTitle,
	#vitri3 #widgetPContent,
	#vitri3 #widgetPFooter,
	#widgetPTitle .title {
		width: auto;
	}
	#product_menu,
	#product_menu li,
	#subBox {
		width: auto !important;
	}
	#product_menu li a { padding-top: 6px; padding-bottom: 6px; }

	/* ---------- Slider khuyến mãi (easySlider đọc độ rộng li khi khởi tạo) ---------- */
	.home-banner { display: block; }
	#widgetPContent .home-poster { display: none; } /* thắng rule #widgetPContent a */
	#widgetPContent .home-banner a { padding: 0; } /* bỏ padding 6px chung của link: ảnh slider không bị lệch/cắt đáy */
	.home-banner #slider li {
		width: calc(100vw - 20px);
		height: auto;
		aspect-ratio: 572 / 350;
		margin-bottom: 0;
	}
	#slider { margin-bottom: 6px; }
	#prevBtn, #nextBtn { top: 50%; margin-top: -19px; }
	#nextBtn { left: auto; right: 10px; }

	#vitri2 #widgetPContent table {
		width: 100% !important;
		max-width: 100%;
		table-layout: fixed;
	}

	/* ---------- Lưới sản phẩm ---------- */
	/* Lưới đều: khe 10px, cạnh ngoài thẳng hàng với khung tiêu đề */
	/* Áp cho mọi khung chứa trực tiếp các ô sản phẩm (trang chủ, danh mục, sản phẩm khác...) */
	#vitri2 :has(> #products) {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		padding-top: 10px;
	}
	#products {
		float: left;
		display: flex;
		flex-direction: column;
		width: calc((100% - 20px) / 3);
		height: auto;
		margin: 0;
		padding: 6px 6px 10px;
		box-sizing: border-box;
		border-radius: 6px;
		background: #fff;
	}
	/* Tên sản phẩm luôn chiếm đúng 2 dòng -> giá nằm ngay dưới tên và thẳng hàng giữa các ô */
	#products > a:first-child { display: flex; flex-direction: column; flex: 1 0 auto; }
	#products .title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		min-height: 36px;
		margin-top: 8px;
	}
	#products .price { margin: 4px 0 0; }
	#products > .clear { display: none; }
	#products .imgPro,
	#products img.imgPro {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		padding: 0;
		border-radius: 4px;
		box-sizing: border-box;
	}
	#products .imgPro img {
		width: 100%;
		height: auto;
		padding: 0;
	}
	#products .title,
	#products .title a { font-size: 14px; line-height: 18px; padding: 0 4px; }

	/* ---------- Bài viết & chi tiết sản phẩm ---------- */
	#news { width: auto; }
	#news > table,
	#news > table > tbody,
	#news > table > tbody > tr,
	#news > table > tbody > tr > td {
		display: block;
		width: auto !important;
	}
	#news > table > tbody > tr > td { padding-left: 0 !important; text-align: center; }
	#news > table > tbody > tr > td + td { text-align: left; margin-top: 10px; }
	#news .content,
	#news .tabContent { overflow-wrap: break-word; }
	#news .content table,
	#news .tabContent table { max-width: 100%; }
	#news div[style*="width:200px"] { float: none !important; width: auto !important; }

	/* Tab thông tin sản phẩm: chia đều thành hàng, không ngắt chữ giữa tab */
	.shadetabs {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}
	.shadetabs li { float: none; margin: 0; }
	.shadetabs li a {
		width: auto;
		padding-left: 10px;
		padding-right: 10px;
		white-space: nowrap;
	}

	/* ---------- Form liên hệ / đặt hàng ----------
	   Form có <style> nhúng nạp sau file này nên cần selector mạnh hơn */
	#widgetPContent #contact { width: auto; max-width: 100%; }
	#widgetPContent #contact label,
	#widgetPContent #contact label.capt {
		float: none;
		display: block;
		width: auto;
		max-width: 100%;
		margin-right: 0;
	}
	#widgetPContent #contact input:not([type="submit"]):not([type="image"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
	#widgetPContent #contact select,
	#widgetPContent #contact textarea {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		font-size: 16px; /* tránh iOS tự phóng to khi nhập */
	}
	#widgetPContent #contact .formbutton { left: 0; }

	/* ---------- Chân trang & hộp chat ---------- */
	#footerContent { padding: 0 8px; }
	#footerContent table,
	#footerContent td { display: block; width: auto !important; }
	#buttonSupportBox { max-width: calc(100vw - 16px); }
}

@media (max-width: 599px) {
	#products { width: calc((100% - 10px) / 2); }
	#widgetPTitle .title,
	#widgetPTitle .title a { font-size: 15px; }
	.hoavan { display: none; }
}

/* ---------- Các khối phụ trên mobile/tablet ---------- */
@media (max-width: 1023px) {
	/* Hướng dẫn mua hàng: 3 ảnh đều nhau */
	#vitri2 #widgetPContent > table td { padding: 0 3px; vertical-align: middle; }
	#vitri2 #widgetPContent > table img {
		display: block;
		width: 100%;
		height: 64px;
		object-fit: contain;
	}

	/* Ảnh quảng cáo trong sidebar (Quà tặng lan hồ điệp...): canh giữa */
	#vitri3 #widgetPContent > p { text-align: center; margin: 0; }
	#vitri3 #widgetPContent > p img { display: inline-block; max-width: 100%; height: auto; }

	/* Danh mục sản phẩm: kẻ mảnh, chữ sát lề, vùng bấm cao */
	#vitri3 #product_menu li { border-bottom: 1px solid #eee !important; }
	#vitri3 #product_menu li:last-child { border-bottom: 0 !important; }
	#vitri3 #product_menu li a {
		padding: 10px 4px !important;
		line-height: 22px !important;
		background-position: right center !important;
	}

	/* Bài viết hay: ảnh vuông đều, tiêu đề bên cạnh */
	#vitri3 #subBox li {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		margin: 0;
		padding: 8px 0 !important;
		border-bottom: 1px solid #eee;
		background: none !important;
		list-style: none;
	}
	#vitri3 #subBox li:last-child { border-bottom: 0; }
	#vitri3 #subBox li.breakline { display: none; }
	#vitri3 #subBox .imgNewssmart {
		flex: 0 0 80px;
		width: 80px;
		height: 60px;
		margin: 0;
		overflow: hidden;
		border-radius: 4px;
	}
	#vitri3 #subBox .imgNewssmart img { width: 80px; height: 60px; object-fit: cover; }
	#vitri3 #subBox a.title,
	#vitri3 #subBox a.title * { color: #333 !important; font: 14px/20px Arial, sans-serif !important; }

	/* Chân trang: chữ màu đỏ khó đọc trên nền xanh -> vàng nhạt */
	#footerContent { padding: 16px 10px; }
	#footerContent a,
	#footerContent [style*="color"] { color: #fff59d !important; }

	/* Nút chat: viên thuốc gọn ở góc dưới phải thay cho thanh dài */
	#buttonSupportBox {
		width: auto !important;
		right: 12px !important;
		bottom: 12px !important;
		padding: 8px 14px !important;
		border-radius: 24px !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	}
	#buttonSupportBox img[src*="icon_top"] { display: none; }
	#buttonSupportBox a { font: bold 13px/20px Arial, sans-serif; }
	#buttonSupportBox a img { margin-right: 6px !important; }
}

/* ---------- Danh sách tin, nút sản phẩm, form liên hệ ---------- */
@media (max-width: 1023px) {
	/* Danh sách tin: ảnh đại diện cùng kích thước, chữ canh trái để không bị giãn khoảng trắng */
	#newsContentShow #news { padding: 0; }
	#newsContentShow #news .title,
	#newsContentShow #news .title a { font-size: 19px; line-height: 24px; }
	#newsContentShow .imgNews { margin: 2px 10px 6px 0; }
	#newsContentShow .imgNews img {
		display: block;
		width: 120px;
		height: 90px;
		max-width: none;
		max-height: none;
		object-fit: cover;
		border-radius: 4px;
	}
	#news .content { text-align: left; line-height: 20px; }

	/* Nút Đặt hàng / Xem chi tiết: giữ ảnh nút như bản PC, canh giữa và nằm ở đáy ô */
	#products > center { display: block; }
	#products > a:has(> img[src*="btn_dathang"]) { margin-top: auto; padding-top: 6px; }
	#products > a:has(> img[src*="btn_dathang"]),
	#products > a:has(> img[src*="btn_xemchitiet"]) { display: block; text-align: center; line-height: 0; }
	#products > a:has(> img[src*="btn_xemchitiet"]) { padding-top: 4px; }

	/* Form liên hệ: ô nhập cao hơn cho dễ chạm */
	#widgetPContent #contact label { margin-bottom: 12px; }
	#widgetPContent #contact input:not([type="submit"]):not([type="image"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]) {
		height: 40px;
		padding: 0 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}
	#widgetPContent #contact textarea {
		height: 110px;
		padding: 8px 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}
	/* Mã xác nhận: ảnh và ô nhập cùng hàng */
	#widgetPContent #contact label.capt .clearfix {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: 5px;
	}
	#widgetPContent #contact label.capt img { float: none; flex: 0 0 auto; width: 150px; height: 50px; }
	#widgetPContent #contact label.capt input[name="captcha"] {
		float: none;
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		height: 50px;
		margin: 0;
		font-size: 24px;
		line-height: 48px;
		letter-spacing: 2px;
		background: #fff;
		border-color: #2f6f12;
	}
}

@media (max-width: 599px) {
	/* Ảnh float trong bài viết / thông tin liên hệ: đứng riêng 1 dòng, chữ không bị ép thành cột hẹp */
	#vitri2 #widgetPContent div > p > img[style*="float"],
	#vitri2 #widgetPContent div > p > strong > img[style*="float"],
	#news .content img[style*="float"],
	#news .content img[align] {
		float: none !important;
		display: block;
		margin: 0 auto 10px !important;
	}
	#newsContentShow .imgNews img { width: 100px; height: 75px; }
}

/* ---------- Giữ nhận diện giống bản PC ---------- */
@media (max-width: 1023px) {
	/* Header: viền xanh lá như thanh menu PC */
	#headerContent .banner { border-bottom: 4px solid #82b200; }
	.rsp-menu-toggle { background: linear-gradient(#99d200, #82b200); }

	/* Tiêu đề mục: thanh nền xanh nhạt, viền và chữ xanh như PC (bỏ kiểu vạch trái) */
	#vitri2 #widgetPTitle,
	#vitri3 #widgetPTitle {
		border: 1px solid #C6EA64;
		border-radius: 5px;
		background: url(./images/menu_bg.gif) left repeat-x;
		background-size: auto 100%;
	}
	#vitri2 #widgetPTitle .title,
	#vitri3 #widgetPTitle .title {
		padding: 7px 12px !important;
		color: #3C9608;
		font: bold 15px/22px Arial, sans-serif;
	}
	#vitri2 #widgetPTitle .title {
		padding-left: 30px !important;
		background: url(./images/icon_menu.png) 4px center no-repeat !important;
	}
	#widgetPTitle .title a { color: #3C9608 !important; }
	#menuContent .Menu li.rsp-cat-head span { background: linear-gradient(#99d200, #82b200); }
}

/* Vùng bấm trên điện thoại: tối thiểu ~40px cho nút sản phẩm và link trong hộp bên (chuẩn dễ chạm của Google) */
@media (max-width: 1023px) {
	#products > a:has(> img[src*="btn_dathang"]) { padding-top: 8px; padding-bottom: 4px; }
	#products > a:has(> img[src*="btn_xemchitiet"]) { padding-top: 4px; padding-bottom: 8px; }
	#widgetPContent a { display: inline-block; padding-top: 6px; padding-bottom: 6px; }
	#widgetPContent #contact a { padding-top: 0; padding-bottom: 0; }
}

/* ---------- Danh mục sản phẩm & chân trang trên mobile: gọn, nhẹ hơn ---------- */
@media (max-width: 1023px) {
	#vitri3 #product_menu li a {
		position: relative;
		padding: 8px 22px 8px 6px !important;
		line-height: 20px !important;
		font: normal 14px/20px Arial, sans-serif !important;
		color: #444 !important;
		background: none !important;
	}
	/* Mũi tên xám mảnh thay cho tam giác đen */
	#vitri3 #product_menu li a::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 8px;
		width: 6px;
		height: 6px;
		margin-top: -4px;
		border-right: 1.5px solid #b5b5b5;
		border-bottom: 1.5px solid #b5b5b5;
		transform: rotate(-45deg);
	}
	#vitri3 #product_menu li a:hover,
	#vitri3 #product_menu li a:active { color: #2f6f12 !important; }

	/* Chân trang: lề đều hai bên, các khối cách nhau rõ, chừa chỗ cho nút chat */
	#footerContent { padding: 20px 16px 76px !important; }
	#footerContent .wrapper > div { padding: 0 !important; }
	#footerContent td { padding: 0 !important; }
	#footerContent p { margin: 0 0 6px; }
	#footerContent,
	#footerContent td { font-size: 13px; line-height: 1.6; }
	#footerContent td[rowspan] img { width: 96px; height: auto; margin-bottom: 10px; }
	#footerContent td[colspan] p:first-child { display: none; } /* dòng trống phía trên tên công ty */
	#footerContent td[colspan] span[style*="font-size"] { font-size: 16px !important; line-height: 1.4; }
	#footerContent td[colspan] { margin-bottom: 8px; }
	/* Khối tài khoản ngân hàng tách bằng đường kẻ mảnh */
	#footerContent tr + tr td + td {
		margin-top: 12px;
		padding-top: 12px !important;
		border-top: 1px solid rgba(255, 255, 255, .3);
	}
	#footerContent td > table + p { display: none; } /* dòng trống cuối */
}

/* ---------- Trang chi tiết sản phẩm trên mobile ---------- */
@media (max-width: 1023px) {
	/* Tên sản phẩm: font không chân cho chữ có dấu rõ ràng */
	#news h1.title {
		font: bold 20px/26px Arial, sans-serif !important;
		color: #222 !important;
		margin: 4px 0 6px;
	}
	#news .price { font-size: 20px !important; line-height: 28px !important; }
	#news .note p { margin: 0 0 10px; line-height: 20px; }

	/* Tab: ô bo góc chia đều theo hàng; tab đang chọn bỏ độ rộng cố định 120px của bản PC */
	.shadetabs { gap: 6px; margin: 0 0 4px; }
	.shadetabs li { flex: 1 1 auto; display: flex; }
	.shadetabs li a,
	.shadetabs li a.selected,
	#widgetPContent .shadetabs li a {
		display: block;
		flex: 1 1 auto;
		width: auto;
		height: auto;
		margin: 0;
		padding: 8px 12px;
		border: 1px solid #e2e2e2;
		border-radius: 6px;
		background: #f3f3f3;
		color: #444;
		font: 13px/18px Arial, sans-serif;
		text-align: center;
		white-space: nowrap;
	}
	.shadetabs li a.selected,
	#widgetPContent .shadetabs li a.selected {
		border-color: #5e9303;
		background: #fff;
		color: #2f6f12;
		box-shadow: inset 0 -2px 0 #5e9303; /* không in đậm để các tab không đổi kích thước khi chuyển */
	}

	/* Nội dung tab: cỡ chữ đồng đều, danh sách có dấu đầu dòng */
	#news .tabContent { padding-top: 12px; min-height: 0; }
	#news .tabContent,
	#news .tabContent p,
	#news .tabContent li { font-size: 14px; line-height: 22px; }
	#news .tabContent p { margin: 0 0 8px; }
	#news .tabContent ul { margin: 0 0 8px; padding-left: 20px; list-style: disc; }
	#news .tabContent li { list-style: disc; }
}

/* ---------- Trang đặt hàng / liên hệ trên mobile ---------- */
@media (max-width: 1023px) {
	/* Bản đồ Google thấp lại để form đặt hàng không bị đẩy xuống quá xa */
	#pageContent iframe[src*="google.com/maps"] { display: block; width: 100%; height: 240px; }
	/* Nội dung liên hệ: cùng font với các ô khác thay cho font máy đánh chữ */
	#widgetPContent #contact textarea { font: 15px/22px Arial, sans-serif; height: 120px; }
	/* Ô mã xác nhận cao bằng ảnh mã (thắng quy tắc chung của input ở trên) */
	#widgetPContent #contact label.capt input[name="captcha"] {
		height: 50px !important;
		border: 1px solid #2f6f12 !important;
		font-size: 22px !important;
		letter-spacing: 2px;
	}
}

/* ---------- Bài viết (tin tức, giới thiệu, thanh toán...) trên mobile ---------- */
@media (max-width: 1023px) {
	/* Tiêu đề bài: font không chân giống tên sản phẩm */
	#news .title,
	#news .title a { font-family: Arial, sans-serif !important; font-weight: bold; }
	/* Canh đều trên màn hẹp tạo khoảng trắng lớn giữa các chữ -> canh trái, giãn dòng dễ đọc */
	#news .content,
	#news .content [style*="justify"] { text-align: left !important; }
	#news .content p[style*="line-height"],
	#news .content span[style*="line-height"] { line-height: 1.6 !important; }
}

/* Máy tính bảng: ảnh sản phẩm và thông tin nằm cạnh nhau thay vì ảnh chiếm cả màn hình */
@media (min-width: 600px) and (max-width: 1023px) {
	#news > table > tbody > tr { display: flex; align-items: flex-start; gap: 20px; }
	#news > table > tbody > tr > td:first-child { flex: 0 0 45%; }
	#news > table > tbody > tr > td + td { flex: 1 1 auto; margin-top: 0; }
}

/* Trang Liên hệ / Đặt mua: logo trong nội dung nhỏ lại (header đã có logo), bỏ dòng trống thừa */
@media (max-width: 1023px) {
	#widgetPContent img[src*="shop-hoa-can-tho.png"] {
		float: none !important;
		display: block;
		width: 150px;
		height: auto;
		margin: 4px auto 8px;
	}
	#widgetPContent h2:has(> span > br:only-child),
	#widgetPContent p[style*="center"]:has(+ p > iframe[src*="google.com/maps"]) { display: none; }
	#widgetPContent h2:has(> span[style*="font-size"]) { margin: 0 0 4px; }
}

/* ---------- Header mobile: hotline & nút menu nhẹ nhàng hơn ---------- */
@media (max-width: 1023px) {
	/* Hotline: viên bo tròn nền hồng nhạt, icon nhỏ, không đổ bóng */
	.rsp-call {
		gap: 8px;
		padding: 4px 12px 4px 4px;
		border: 1px solid #f5d5d5;
		border-radius: 22px;
		background: #fff6f6;
	}
	.rsp-call-icon {
		width: 30px;
		height: 30px;
		background: #e53935;
		box-shadow: none;
	}
	.rsp-call-icon svg { width: 15px; height: 15px; }
	.rsp-call-text small { font-size: 10px; color: #999; letter-spacing: .5px; }
	.rsp-call-text strong { font-size: 14px; color: #c62828; letter-spacing: .2px; }

	/* Nút menu: nền trắng viền xanh mảnh, gạch xanh thay cho khối xanh đặc */
	.rsp-menu-toggle {
		flex-basis: 40px;
		width: 40px;
		height: 40px;
		border: 1px solid #d3e6a8;
		border-radius: 10px;
		background: #fff;
		transition: background .2s, border-color .2s;
	}
	.rsp-menu-toggle .rsp-bars,
	.rsp-menu-toggle .rsp-bars::before,
	.rsp-menu-toggle .rsp-bars::after { width: 18px; background: #5b8f00; }
	.rsp-menu-toggle:active,
	html.rsp-menu-open .rsp-menu-toggle { background: #f3f9e6; border-color: #a8cc55; }
	html.rsp-menu-open .rsp-menu-toggle .rsp-bars { background: transparent; }

	/* Viền dưới header mảnh hơn */
	#headerContent .banner { border-bottom-width: 3px; }
}

/* ---------- Banner trang chủ (mobile): cao hơn, bo góc, khoảng cách đều ---------- */
@media (max-width: 1023px) {
	#vitri2 > #widgetP:has(#slider) { margin: 12px 0 16px !important; } /* khối có style inline margin:0 */
	#slider { margin-bottom: 0; border-radius: 10px; }
	#prevBtn, #nextBtn { transform: scale(.8); opacity: .85; }
	#prevBtn a, #nextBtn a { display: block; width: 38px; height: 38px; padding: 0; } /* padding chung của link làm lộ hàng mũi tên khác trong ảnh sprite */
	/* Tiêu đề mục -> lưới sản phẩm: 12px */
	#vitri2 :has(> #products) { padding-top: 2px; }
}

/* ---------- Header mobile: hotline & nút menu mảnh, gọn ---------- */
@media (max-width: 1023px) {
	/* Hotline: bỏ khung viên, icon tròn nhỏ nền hồng nhạt */
	.rsp-call { gap: 6px; padding: 0; border: 0; background: none; }
	.rsp-call-icon { width: 28px; height: 28px; background: #fdecea; color: #e53935; }
	.rsp-call-icon svg { width: 14px; height: 14px; }
	.rsp-call-text small { font-size: 9.5px; color: #aaa; }
	.rsp-call-text strong { font-size: 14px; font-weight: 600; }
	/* Nút menu: không viền, 3 gạch mảnh */
	.rsp-menu-toggle { flex-basis: 36px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; }
	.rsp-menu-toggle .rsp-bars,
	.rsp-menu-toggle .rsp-bars::before,
	.rsp-menu-toggle .rsp-bars::after { width: 20px; height: 1.5px; background: #4a7d00; }
	.rsp-menu-toggle:active,
	html.rsp-menu-open .rsp-menu-toggle { background: #f3f9e6; }
	html.rsp-menu-open .rsp-menu-toggle .rsp-bars { background: transparent; }
}

/* ---------- Banner trang chủ (tablet 600-1023px): poster + slider như PC, co theo màn hình ----------
   Tỉ lệ PC: poster 184 + slider 572 trong 760, cao 350. easySlider đọc độ rộng li khi khởi tạo. */
@media (min-width: 600px) and (max-width: 1023px) {
	.home-banner {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	#widgetPContent .home-poster { display: block; }
	.home-poster img {
		width: calc((100vw - 20px) * 184 / 760);
		height: calc((100vw - 20px) * 350 / 760);
		border-radius: 10px;
	}
	.home-banner #slider li { width: calc((100vw - 20px) * 572 / 760); }
}

/* ---------- Header mobile: nền xanh gradient giống PC (header_bg.jpg) + mảng sáng chéo phía logo ---------- */
@media (max-width: 1023px) {
	#headerContent .banner {
		background:
			linear-gradient(110deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .5) 270px, rgba(255, 255, 255, 0) 270px),
			#8cc63f url(./images/header_bg.jpg) left top / auto 100% repeat-x;
		border-bottom: 3px solid #5e9c12;
		box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
	}
	/* Hotline: viên trắng để số đỏ nổi trên nền xanh */
	.rsp-call {
		gap: 6px;
		padding: 3px 10px 3px 3px;
		border: 1px solid rgba(255, 255, 255, .95);
		border-radius: 20px;
		background: rgba(255, 255, 255, .78);
		box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
	}
	.rsp-call-icon { background: #e53935; color: #fff; }
	.rsp-call-text small { color: #7a9a4a; }
	/* Nút menu: gạch trắng, viền trắng mảnh trên nền trắng mờ */
	.rsp-menu-toggle {
		border: 1px solid rgba(255, 255, 255, .85);
		background: rgba(255, 255, 255, .16);
	}
	.rsp-menu-toggle .rsp-bars,
	.rsp-menu-toggle .rsp-bars::before,
	.rsp-menu-toggle .rsp-bars::after { background: #fff; }
	.rsp-menu-toggle:active,
	html.rsp-menu-open .rsp-menu-toggle { background: rgba(255, 255, 255, .3); }
	html.rsp-menu-open .rsp-menu-toggle .rsp-bars { background: transparent; }
}

/* Điện thoại rất hẹp (<360px): thu gọn viên hotline để logo hiện đủ "Tại Cần Thơ" */
@media (max-width: 359px) {
	#headerContent .banner { gap: 6px; }
	.rsp-call { gap: 4px; padding-right: 8px; }
	.rsp-call-icon { width: 24px; height: 24px; }
	.rsp-call-icon svg { width: 12px; height: 12px; }
	.rsp-call-text strong { font-size: 12.5px; }
	.rsp-call-text small { font-size: 9px; }
}

/* Logo mobile: to hơn cho nét chữ rõ */
@media (max-width: 1023px) {
	#headerContent .banner #Layer1 { flex-basis: 163px; height: 52px; }
	#headerContent .banner #Layer1 img { height: 52px; }
}
@media (max-width: 389px) {
	#headerContent .banner #Layer1 { flex-basis: 147px; height: 47px; }
	#headerContent .banner #Layer1 img { height: 47px; }
}
@media (max-width: 359px) {
	#headerContent .banner #Layer1 { flex-basis: 132px; height: 42px; }
	#headerContent .banner #Layer1 img { height: 42px; }
}

/* Header mobile: hotline chỉ còn icon tròn (bấm để gọi, aria-label giữ số) -> nhường chỗ cho logo to */
@media (max-width: 1023px) {
	.rsp-call,
	.rsp-call:active {
		justify-content: center;
		width: 38px;
		height: 38px;
		padding: 0;
		gap: 0;
		border-radius: 50%;
		box-sizing: border-box;
	}
	.rsp-call-text { display: none; }
	.rsp-call-icon { width: 30px; height: 30px; }
	.rsp-call-icon svg { width: 15px; height: 15px; }
	#headerContent .banner { height: 84px; }
	#headerContent .banner #Layer1,
	#headerContent .banner #Layer1 img { height: 74px; }
	#headerContent .banner #Layer1 { flex: 0 1 233px; } /* 74px cao -> rộng ~233px */
}
/* <360px không đủ 233px cho logo: giữ 66px (rộng ~207px) để không mất chữ "Thơ" */
@media (max-width: 359px) {
	#headerContent .banner #Layer1,
	#headerContent .banner #Layer1 img { height: 66px; }
	#headerContent .banner #Layer1 { flex-basis: 207px; }
}

/* Nút menu mobile: nền trắng như vòng ngoài nút gọi, gạch xanh đậm -> nổi ngang nút gọi */
@media (max-width: 1023px) {
	.rsp-menu-toggle {
		flex-basis: 38px;
		width: 38px;
		height: 38px;
		border: 1px solid rgba(255, 255, 255, .95);
		border-radius: 10px;
		background: rgba(255, 255, 255, .78);
		box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
		box-sizing: border-box;
	}
	.rsp-menu-toggle .rsp-bars,
	.rsp-menu-toggle .rsp-bars::before,
	.rsp-menu-toggle .rsp-bars::after { width: 18px; height: 2px; background: #3f7d0c; }
	.rsp-menu-toggle:active,
	html.rsp-menu-open .rsp-menu-toggle { background: #fff; }
	html.rsp-menu-open .rsp-menu-toggle .rsp-bars { background: transparent; }
	html.rsp-menu-open .rsp-menu-toggle .rsp-bars::before,
	html.rsp-menu-open .rsp-menu-toggle .rsp-bars::after { width: 18px; height: 2px; }
}

/* Nút gọi + nút menu mobile: mỏng nhẹ — nền trắng mờ, viền mảnh, không bóng, icon nét mảnh */
@media (max-width: 1023px) {
	.rsp-call,
	.rsp-menu-toggle {
		flex-basis: 36px;
		width: 36px;
		height: 36px;
		border: 1px solid rgba(255, 255, 255, .9);
		background: rgba(255, 255, 255, .45);
		box-shadow: none;
		box-sizing: border-box;
	}
	.rsp-call { border-radius: 50%; }
	.rsp-menu-toggle { border-radius: 50%; }
	.rsp-call-icon {
		width: auto;
		height: auto;
		background: none;
		box-shadow: none;
		color: #d32f2f;
	}
	.rsp-call-icon svg { width: 16px; height: 16px; }
	.rsp-menu-toggle .rsp-bars,
	.rsp-menu-toggle .rsp-bars::before,
	.rsp-menu-toggle .rsp-bars::after { width: 16px; height: 1.5px; background: #3f7d0c; }
	.rsp-menu-toggle .rsp-bars::before { top: -5px; }
	.rsp-menu-toggle .rsp-bars::after { top: 5px; }
	.rsp-call:active,
	.rsp-menu-toggle:active,
	html.rsp-menu-open .rsp-menu-toggle { background: rgba(255, 255, 255, .8); border-color: #fff; }
	html.rsp-menu-open .rsp-menu-toggle .rsp-bars { background: transparent; }
	html.rsp-menu-open .rsp-menu-toggle .rsp-bars::before,
	html.rsp-menu-open .rsp-menu-toggle .rsp-bars::after { top: 0; width: 16px; height: 1.5px; }
}

/* Logo riêng 410x133 (cắt từ banner gốc), tách khỏi ảnh nền banner; dùng chung PC + mobile */
/* PC: đặt đúng vị trí cũ trong banner 1000x137 (logo cắt từ y=4) */
@media (min-width: 1024px) {
	#headerContent .banner { position: relative; }
	.site-logo {
		position: absolute;
		left: 0;
		top: 4px;
		z-index: 2;
		display: block;
	}
	.site-logo img { display: block; width: 410px; height: 133px; }
}
@media (max-width: 1023px) {
	#headerContent .banner #Layer1 { display: none; }
	.site-logo {
		display: block;
		flex: 0 1 217px; /* logo .com 410x140: 74px cao -> rộng ~217px; màn hẹp tự co */
		min-width: 0;
	}
	.site-logo img {
		display: block;
		width: 100%;
		max-width: none;
		height: auto;
	}
}

/* ---------- Trang đặt mua / liên hệ / thanh toán (mobile): khoảng cách trên dưới đồng bộ trang danh mục ---------- */
@media (max-width: 1023px) {
	/* Trang không có #widgetP bọc ngoài: tiêu đề cách header 15px như trang danh mục */
	#vitri2 > #widgetPTitle:first-child,
	#vitri2 > #pageViewContent:first-child { margin-top: 10px; }
	/* Nhãn -> ô nhập: 6px như nhau (textarea trước sát nhãn) */
	#widgetPContent #contact input:not([type="submit"]):not([type="image"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
	#widgetPContent #contact textarea { margin-top: 6px; }
	#widgetPContent #contact label.capt input { margin-top: 0; }
	/* Nút Gửi cách khối "Danh mục sản phẩm" bên dưới */
	#widgetPContent #contact { padding-bottom: 16px; }
}

/* ---------- Header mobile 2 hàng ----------
   Hàng 1 (44px, xanh đậm): hotline hiện số | nút menu
   Hàng 2 (nền xanh như PC): logo dùng chung với PC, canh giữa */
@media (max-width: 1023px) {
	#headerContent .banner {
		flex-wrap: wrap;
		gap: 0;
		height: auto;
		padding: 0;
		/* Màu theo PC: hàng logo dùng nền gradient xanh của header PC, hàng trên xanh đậm hơn cùng tông */
		background:
			linear-gradient(180deg, #6fb52b, #5c9f16) 0 0 / 100% 44px no-repeat,
			linear-gradient(180deg, #8cc63f 0%, #cfe8b0 30%, #fff 60%) 0 44px / 100% calc(100% - 44px) no-repeat; /* xanh -> gần trắng */
		border-bottom: 3px solid #82b200;
	}
	/* Hàng 1 */
	#headerContent .banner .rsp-call {
		order: 1;
		flex: 0 1 auto; /* chỉ vừa icon + số, tránh bấm nhầm cả thanh */
		justify-content: flex-start;
		gap: 8px;
		width: auto;
		height: 44px;
		margin: 0 auto 0 0;
		padding: 0 10px;
		border: 0;
		border-radius: 0;
		background: none;
		color: #fff !important;
	}
	#headerContent .banner .rsp-call-icon {
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: #fff;
		color: #d32f2f;
	}
	#headerContent .banner .rsp-call-icon svg { width: 14px; height: 14px; }
	#headerContent .banner .rsp-call-text { display: flex; flex-direction: row; align-items: baseline; gap: 6px; }
	#headerContent .banner .rsp-call-text small { font-size: 12px; color: rgba(255, 255, 255, .85); letter-spacing: .3px; }
	#headerContent .banner .rsp-call-text strong { font-size: 16px; font-weight: bold; color: #fff; letter-spacing: .3px; }
	#headerContent .banner .rsp-menu-toggle {
		order: 2;
		flex: 0 0 34px;
		width: 34px;
		height: 34px;
		margin: 5px 10px 5px 0;
		border: 1px solid rgba(255, 255, 255, .6);
		border-radius: 8px;
		background: none;
	}
	#headerContent .banner .rsp-menu-toggle .rsp-bars,
	#headerContent .banner .rsp-menu-toggle .rsp-bars::before,
	#headerContent .banner .rsp-menu-toggle .rsp-bars::after { background: #fff; }
	html.rsp-menu-open #headerContent .banner .rsp-menu-toggle { background: rgba(255, 255, 255, .2); border-color: #fff; }
	html.rsp-menu-open #headerContent .banner .rsp-menu-toggle .rsp-bars { background: transparent; }
	/* Hàng 2 */
	#headerContent .banner .site-logo {
		order: 3;
		flex: 0 0 100%;
		padding: 8px 10px;
		box-sizing: border-box;
	}
	#headerContent .banner .site-logo picture { display: block; }
	#headerContent .banner .site-logo img {
		display: block;
		width: auto;
		height: 64px;
		margin: 0 auto;
	}
}

/* ---------- Trang chủ mobile: tinh chỉnh ---------- */
@media (max-width: 1023px) {
	/* Tên SP ngắn 1 dòng: nằm sát giá (khung vẫn cao 2 dòng để giá thẳng hàng giữa các thẻ) */
	#products .title {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	/* Nút chat: icon tròn nhỏ, không che sản phẩm (hotline đã có trên header) */
	#buttonSupportBox { /* rule viên thuốc phía trên dùng !important */
		width: 44px !important;
		height: 44px !important;
		padding: 0 !important;
		border-radius: 50% !important;
		overflow: hidden;
		box-sizing: border-box;
	}
	#buttonSupportBox a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		font-size: 0 !important;
		line-height: 0 !important;
	}
	#buttonSupportBox a img[src*="icon_chat"] { float: none !important; margin: 0 !important; }
	/* Chân trang: bớt khoảng trống dưới cùng (chỉ cần chừa nút chat 44px) */
	#footerContent { padding-bottom: 64px; }
}

/* ---------- Header mobile 2 hàng: tinh chỉnh ----------
   Hàng trên 40px xanh; hàng logo nền trắng sạch, logo to hơn; viền dưới mảnh + bóng nhẹ */
@media (max-width: 1023px) {
	#headerContent .banner {
		background:
			linear-gradient(180deg, #73b82e, #5e9f18) 0 0 / 100% 40px no-repeat,
			#fff;
		border-bottom: 2px solid #8cc63f;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	}
	#headerContent .banner .rsp-call { height: 40px; }
	#headerContent .banner .rsp-call-icon { width: 26px; height: 26px; }
	#headerContent .banner .rsp-call-icon svg { width: 13px; height: 13px; }
	#headerContent .banner .rsp-call-text small { font-size: 11px; }
	#headerContent .banner .rsp-call-text strong { font-size: 15px; }
	#headerContent .banner .rsp-menu-toggle {
		flex-basis: 32px;
		width: 32px;
		height: 32px;
		margin: 4px 10px 4px 0;
	}
	#headerContent .banner .site-logo { padding: 8px 10px 6px; }
	#headerContent .banner .site-logo img { height: 72px; }
}

/* ---------- Thanh hotline + menu (mobile): mảnh, phẳng ---------- */
@media (max-width: 1023px) {
	#headerContent .banner {
		background:
			linear-gradient(#6aae25, #6aae25) 0 0 / 100% 36px no-repeat,
			#fff;
	}
	#headerContent .banner .rsp-call { height: 36px; gap: 6px; text-shadow: none; }
	#headerContent .banner .rsp-call-icon {
		width: auto;
		height: auto;
		border-radius: 0;
		background: none;
		box-shadow: none;
		color: #fff;
	}
	#headerContent .banner .rsp-call-icon svg { width: 15px; height: 15px; }
	#headerContent .banner .rsp-call-text small {
		font: normal 11px/1 Arial, sans-serif;
		color: rgba(255, 255, 255, .8);
		letter-spacing: .8px;
		text-shadow: none;
	}
	#headerContent .banner .rsp-call-text strong {
		font: 600 14px/1 Arial, sans-serif;
		color: #fff;
		letter-spacing: .5px;
		text-shadow: none;
	}
	#headerContent .banner .rsp-menu-toggle {
		flex-basis: 32px;
		width: 32px;
		height: 32px;
		margin: 2px 6px 2px 0;
		border: 0;
		border-radius: 6px;
		background: none;
		box-shadow: none;
	}
	#headerContent .banner .rsp-menu-toggle .rsp-bars,
	#headerContent .banner .rsp-menu-toggle .rsp-bars::before,
	#headerContent .banner .rsp-menu-toggle .rsp-bars::after { width: 18px; height: 1.5px; }
	#headerContent .banner .rsp-menu-toggle:active,
	html.rsp-menu-open #headerContent .banner .rsp-menu-toggle { background: rgba(255, 255, 255, .18); border: 0; }
}

/* Thanh trên mobile: chỉ icon + số, nằm sát nút menu bên phải */
@media (max-width: 1023px) {
	#headerContent .banner .rsp-call-text small { display: none; }
	#headerContent .banner .rsp-call {
		margin: 0 2px 0 auto;
		padding: 0 6px;
	}
}

/* Hàng logo mobile: nền sáng chỉ tông xanh lá (2 quầng nhạt hai bên); thanh trên xanh dịu */
@media (max-width: 1023px) {
	#headerContent .banner {
		background:
			linear-gradient(#7cb342, #7cb342) 0 0 / 100% 36px no-repeat,
			radial-gradient(ellipse 55% 90% at 8% 70%, rgba(140, 198, 63, .22), rgba(140, 198, 63, 0) 70%) 0 36px / 100% calc(100% - 36px) no-repeat,
			radial-gradient(ellipse 50% 90% at 94% 40%, rgba(140, 198, 63, .18), rgba(140, 198, 63, 0) 70%) 0 36px / 100% calc(100% - 36px) no-repeat,
			linear-gradient(180deg, #f3f9ea, #fdfefb) 0 36px / 100% calc(100% - 36px) no-repeat;
	}
}

/* ---------- Header mobile: tham khảo shophoacantho.com ----------
   Thanh trên xanh dịu 44px: số ĐT trong khung viền trắng bo góc + nút menu khối trắng mờ bo góc
   Hàng logo: dải xanh nhạt phía trên chuyển dần sang trắng */
@media (max-width: 1023px) {
	#headerContent .banner {
		background:
			linear-gradient(#86bf4e, #86bf4e) 0 0 / 100% 44px no-repeat,
			linear-gradient(180deg, #ddefc7 0%, #f1f8e7 45%, #fff 100%) 0 44px / 100% calc(100% - 44px) no-repeat;
	}
	#headerContent .banner .rsp-call {
		height: 30px;
		margin: 7px 8px 7px auto;
		padding: 0 10px;
		gap: 6px;
		border: 1.5px solid rgba(255, 255, 255, .9);
		border-radius: 8px;
		box-sizing: border-box;
	}
	#headerContent .banner .rsp-call-icon svg { width: 14px; height: 14px; }
	#headerContent .banner .rsp-call-text strong { font: bold 14px/1 Arial, sans-serif; letter-spacing: .4px; }
	#headerContent .banner .rsp-menu-toggle {
		flex-basis: 40px;
		width: 40px;
		height: 30px;
		margin: 7px 10px 7px 0;
		border: 0;
		border-radius: 8px;
		background: rgba(255, 255, 255, .28);
	}
	#headerContent .banner .rsp-menu-toggle .rsp-bars,
	#headerContent .banner .rsp-menu-toggle .rsp-bars::before,
	#headerContent .banner .rsp-menu-toggle .rsp-bars::after { width: 20px; height: 2px; border-radius: 1px; }
	#headerContent .banner .rsp-menu-toggle:active,
	html.rsp-menu-open #headerContent .banner .rsp-menu-toggle { background: rgba(255, 255, 255, .42); }
}

/* ---------- Nút chat nổi Messenger + Zalo (tham khảo shophoacantho.com) ---------- */
.chat-float {
	position: fixed;
	right: 14px;
	bottom: 52px; /* PC: nằm trên thanh "Chat với chúng tôi" cũ */
	z-index: 9990;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.chat-float a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
	text-decoration: none;
	transition: transform .15s;
}
.chat-float a:hover { transform: scale(1.08); }
.chat-float-mess { background: linear-gradient(45deg, #0099ff, #a033ff 55%, #ff5280 85%, #ff7061); }
.chat-float-viber { background: #7360f2; } /* màu tím Viber; link viber:// mở app Viber (điện thoại/PC đã cài) */
.chat-float-zalo {
	background: #0068ff;
	color: #fff !important;
	font: bold 14px/1 Arial, sans-serif;
	letter-spacing: .2px;
}
@media (max-width: 1023px) {
	/* Mobile: thay nút chat cũ (Yahoo/Skype) bằng Messenger + Zalo */
	#buttonSupportBox { display: none !important; }
	.chat-float { right: 12px; bottom: 14px; gap: 8px; }
	.chat-float a { width: 46px; height: 46px; }
	/* Chừa chỗ cho 2 nút nổi ở cuối trang */
	#footerContent { padding-bottom: 120px; }
}

/* Thanh trên mobile: nút menu nổi (khối trắng, gạch xanh); khung SĐT mảnh nhẹ */
@media (max-width: 1023px) {
	#headerContent .banner .rsp-menu-toggle {
		background: #fff;
		box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
	}
	#headerContent .banner .rsp-menu-toggle .rsp-bars,
	#headerContent .banner .rsp-menu-toggle .rsp-bars::before,
	#headerContent .banner .rsp-menu-toggle .rsp-bars::after { background: #5a9a1c; }
	#headerContent .banner .rsp-menu-toggle:active,
	html.rsp-menu-open #headerContent .banner .rsp-menu-toggle { background: #f1f8e6; }
	html.rsp-menu-open #headerContent .banner .rsp-menu-toggle .rsp-bars { background: transparent; }
	#headerContent .banner .rsp-call {
		border: 1px solid rgba(255, 255, 255, .75);
		border-radius: 15px;
		padding: 0 12px 0 10px;
	}
	#headerContent .banner .rsp-call-icon svg { width: 13px; height: 13px; }
	#headerContent .banner .rsp-call-text strong { font: 600 13.5px/1 Arial, sans-serif; letter-spacing: .5px; }
}

/* ==========================================================================
   Header mobile (theo mẫu): 
   Hàng 1: thanh xanh, icon trắng căn giữa (gọi điện + số, Messenger, Zalo)
   Hàng 2: nền trắng — [☰ MENU] | logo căn giữa | ô trống cân đối
   ========================================================================== */
.rsp-topbar { display: none; }
@media (max-width: 1023px) {
	#headerContent .banner {
		background: #fff;
		border-bottom: 1px solid #e6e6e6;
		box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
		align-items: center;
	}
	#headerContent .banner .rsp-call { display: none; }

	/* Hàng 1 */
	#headerContent .banner .rsp-topbar {
		order: 0;
		flex: 0 0 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 22px;
		height: 36px;
		background: #5a9e1b;
	}
	.rsp-topbar a {
		display: flex;
		align-items: center;
		gap: 6px;
		height: 36px;
		color: #fff !important;
		text-decoration: none !important;
	}
	.rsp-topbar .rsp-tb-call span { font: 600 14px/1 Arial, sans-serif; letter-spacing: .4px; }
	.rsp-topbar .rsp-tb-zalo { font: bold 15px/1 Arial, sans-serif; letter-spacing: .2px; }

	/* Hàng 2: nút menu + chữ MENU bên trái, logo giữa, ô trống bên phải cùng bề rộng nút để logo thật sự ở giữa */
	#headerContent .banner .rsp-menu-toggle {
		order: 1;
		flex: 0 0 76px;
		width: 76px;
		height: 40px;
		margin: 0 0 0 6px;
		padding: 0 4px;
		justify-content: flex-start;
		gap: 8px;
		border: 0;
		border-radius: 6px;
		background: none;
		box-shadow: none;
	}
	#headerContent .banner .rsp-menu-toggle::after {
		content: "MENU";
		font: 600 13px/1 Arial, sans-serif;
		color: #555;
		letter-spacing: .5px;
	}
	#headerContent .banner .rsp-menu-toggle .rsp-bars,
	#headerContent .banner .rsp-menu-toggle .rsp-bars::before,
	#headerContent .banner .rsp-menu-toggle .rsp-bars::after { width: 20px; height: 2px; background: #555; }
	#headerContent .banner .rsp-menu-toggle .rsp-bars { flex: 0 0 20px; }
	#headerContent .banner .rsp-menu-toggle:active,
	html.rsp-menu-open #headerContent .banner .rsp-menu-toggle { background: #f1f8e6; }
	html.rsp-menu-open #headerContent .banner .rsp-menu-toggle .rsp-bars { background: transparent; }
	#headerContent .banner .site-logo {
		order: 2;
		flex: 1 1 0;
		min-width: 0;
		padding: 8px 0;
	}
	#headerContent .banner .site-logo img {
		height: auto;
		max-height: 64px;
		width: auto;
		max-width: 100%;
	}
	#headerContent .banner::after {
		content: "";
		order: 3;
		flex: 0 0 82px; /* = nút menu 76px + lề 6px */
	}
}
@media (max-width: 1023px) {
	.rsp-topbar a { min-width: 36px; justify-content: center; text-shadow: none !important; }
	.rsp-topbar .rsp-tb-call span { text-shadow: none; }
	/* Zalo: nhãn trắng bo tròn như icon */
	.rsp-topbar .rsp-tb-zalo {
		height: 22px;
		min-width: 0;
		margin: 7px 0;
		padding: 0 7px;
		border-radius: 11px;
		background: #fff;
		color: #5a9e1b !important;
		font: bold 12px/22px Arial, sans-serif;
	}
}

/* PC: link gọi trong suốt phủ vùng hotline trong ảnh banner (x757-978, y18-64 của ảnh 1000x137) */
.pc-hotline-link { display: none; }
@media (min-width: 1024px) {
	.pc-hotline-link {
		display: block;
		position: absolute;
		left: 750px;
		top: 12px;
		width: 236px;
		height: 58px;
		z-index: 3;
	}
}

/* ---------- Header mobile hàng 2: logo trái | MENU ☰ phải ---------- */
@media (max-width: 1023px) {
	#headerContent .banner::after { content: none; display: none; }
	#headerContent .banner .site-logo { order: 1; padding: 8px 0 8px 10px; }
	#headerContent .banner .site-logo img { margin: 0; }
	#headerContent .banner .rsp-menu-toggle {
		order: 2;
		flex: 0 0 auto;
		width: auto;
		margin: 0 6px 0 8px;
		padding: 0 8px;
		flex-direction: row-reverse; /* chữ MENU trước, icon sau */
	}
}

/* ---------- Menu mobile: ngăn kéo bên phải, danh sách phẳng (chữ in hoa đậm, kẻ mảnh) ---------- */
@keyframes rspDrawerIn { from { transform: translateX(100%); } to { transform: none; } }
@media (max-width: 1023px) {
	#menuContent.rsp-open .Menu {
		top: calc(var(--rsp-menu-top, 76px) - 6px); /* sát đáy header */
		bottom: 0;
		left: auto;
		right: 0;
		width: min(84vw, 320px);
		border-radius: 0;
		box-shadow: -4px 0 16px rgba(0, 0, 0, .18);
		animation: rspDrawerIn .22s ease-out;
	}
	#menuContent .Menu li { border-top: 0; border-bottom: 1px solid #ececec; }
	#menuContent .Menu a span,
	#menuContent .Menu > li > a span {
		padding: 15px 20px;
		font: bold 13px/18px Arial, sans-serif;
		color: #333;
		text-transform: uppercase;
		letter-spacing: .3px;
	}
	#menuContent .Menu > li.active > a,
	#menuContent .Menu > li.active > a span,
	#menuContent .Menu > li > a.active,
	#menuContent .Menu > li > a.active span { background: none !important; color: #5a9e1b !important; }
	/* Mục con: chữ thường, thụt vào, không nền */
	#menuContent .Menu ul { background: none; }
	#menuContent .Menu ul li { border-bottom: 0; }
	#menuContent .Menu ul li:last-child { padding-bottom: 6px; }
	#menuContent .Menu ul li a span {
		padding: 9px 20px 9px 34px;
		font: normal 14px/18px Arial, sans-serif;
		color: #555;
		text-transform: none;
	}
	/* Nhóm danh mục sản phẩm: nhãn nhỏ thay cho khối xanh */
	#menuContent .Menu li.rsp-cat-head { border-bottom: 0; }
	#menuContent .Menu li.rsp-cat-head span {
		padding: 18px 20px 8px;
		background: none;
		color: #5a9e1b;
		font: bold 12px/16px Arial, sans-serif;
		letter-spacing: .6px;
	}
	#menuContent .Menu li.rsp-cat a span {
		padding: 13px 20px;
		font: bold 13px/18px Arial, sans-serif;
		color: #333;
		text-transform: uppercase;
	}
}
@media (max-width: 1023px) {
	#menuContent .Menu > li,
	#menuContent .Menu > li.active { background: none !important; } /* bỏ ảnh nền gradient mục active của menu PC */
}
@media (max-width: 1023px) {
	#headerContent .banner .rsp-topbar { background: #2db411; } /* cùng màu footer: đầu/cuối trang đồng bộ */
	.rsp-topbar .rsp-tb-zalo { color: #2db411 !important; }
}
@media (max-width: 1023px) {
	/* Nút đóng menu (✕): không nền */
	#headerContent .banner .rsp-menu-toggle:active,
	html.rsp-menu-open #headerContent .banner .rsp-menu-toggle { background: none; box-shadow: none; }
}

/* Thanh trên mobile: 3 mục cùng kiểu icon trắng + chữ, ngăn bằng vạch mảnh */
@media (max-width: 1023px) {
	#headerContent .banner .rsp-topbar { gap: 0; }
	.rsp-topbar a { gap: 6px; padding: 0 14px; min-width: 0; }
	.rsp-topbar a span { font: 600 13px/1 Arial, sans-serif !important; letter-spacing: .3px; color: #fff; }
	.rsp-topbar svg { width: 16px; height: 16px; flex: 0 0 16px; }
	.rsp-topbar .rsp-tb-mess svg,
	.rsp-topbar .rsp-tb-zalo svg { width: 17px; height: 17px; flex-basis: 17px; }
	/* bỏ kiểu nhãn trắng cũ của Zalo */
	.rsp-topbar .rsp-tb-zalo {
		margin: 0;
		border-radius: 0;
		background: none;
		color: #fff !important;
		font: inherit;
	}
	/* Logo footer (thay ảnh Hoa Lộc): rộng 200px */
	#footerContent td[rowspan] img.footer-logo { width: 200px; max-width: 100%; }
}
@media (max-width: 359px) {
	.rsp-topbar a { padding: 0 9px; gap: 5px; }
	.rsp-topbar a span { font-size: 12px !important; }
}
@media (max-width: 1023px) {
	/* Vạch ngăn bằng ::before để mục vẫn cao 36px (dễ bấm) */
	.rsp-topbar a,
	.rsp-topbar .rsp-tb-zalo { height: 36px; }
	.rsp-topbar a + a { border-left: 0; position: relative; }
	.rsp-topbar a + a::before {
		content: "";
		position: absolute;
		left: 0;
		top: 10px;
		bottom: 10px;
		width: 1px;
		background: rgba(255, 255, 255, .45);
	}
}

/* Hộp chat cũ (Yahoo/Skype) đã tắt: nút Messenger/Zalo nổi về sát góc dưới trên PC */
@media (min-width: 1024px) {
	.chat-float { bottom: 16px; }
}

/* ---------- Footer PC: canh lại ---------- */
@media (min-width: 1024px) {
	#footerContent { padding: 40px 20px 10px; }
	#footerContent .wrapper > div { padding: 0 !important; }
	#footerContent table { border-collapse: collapse; }
	#footerContent td { font-size: 13px; line-height: 1.65; }
	#footerContent td[rowspan] { width: 250px; padding-right: 24px; }
	#footerContent td[rowspan] p { margin: 0; }
	#footerContent td[rowspan] img.footer-logo { display: block; width: 230px; height: auto; }
	#footerContent td[colspan] p:first-child { display: none; } /* dòng trống trên tên công ty: tên thẳng hàng logo */
	#footerContent td[colspan] p { margin: 0 0 6px; }
	#footerContent td[colspan] span[style*="font-size"] { font-size: 17px !important; letter-spacing: .3px; }
	#footerContent tr + tr td { padding-right: 24px; }
	#footerContent tr + tr td + td { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .3); }
	#footerContent tr + tr p { margin: 0 0 4px; }
	/* Link (SĐT Zalo): vàng nhạt thay đỏ trên nền xanh, không xuống dòng */
	#footerContent a,
	#footerContent a .color_red { color: #fff59d !important; }
	#footerContent a.zalo { white-space: nowrap; }
	#footerContent td > table + p,
	#footerContent .wrapper > div > table + p { display: none; }
}
@media (max-width: 1023px) {
	#footerContent a.zalo,
	#footerContent a .color_red { color: #fff59d !important; white-space: nowrap; }
}

/* ---------- Nút "Đặt hàng" / "Xem chi tiết" trong thẻ SP: nút CSS thay ảnh gif, cùng kích thước ---------- */
#products > a:has(> img[src*="btn_dathang"]),
#products > a:has(> img[src*="btn_xemchitiet"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: calc(50% - 6px);
	height: 30px;
	margin: 8px 2px 0;
	padding: 0 !important;
	border: 1px solid #2db411;
	border-radius: 4px;
	font: 600 13px/1 Arial, sans-serif;
	text-decoration: none !important;
	vertical-align: top;
}
#products > a:has(> img[src*="btn_dathang"]) img,
#products > a:has(> img[src*="btn_xemchitiet"]) img { display: none; }
#products > a:has(> img[src*="btn_dathang"]) { background: #2db411; color: #fff !important; }
#products > a:has(> img[src*="btn_dathang"])::after { content: "Đặt hàng"; }
#products > a:has(> img[src*="btn_xemchitiet"]) { background: #fff; color: #2db411 !important; }
#products > a:has(> img[src*="btn_xemchitiet"])::after { content: "Xem chi tiết"; }
#products > a:has(> img[src*="btn_dathang"]):hover { background: #259a0d; }
#products > a:has(> img[src*="btn_xemchitiet"]):hover { background: #f1faee; }
@media (max-width: 1023px) {
	/* Mobile: 2 hàng, rộng hết thẻ cho dễ bấm */
	#products > a:has(> img[src*="btn_dathang"]),
	#products > a:has(> img[src*="btn_xemchitiet"]) {
		display: flex;
		width: 100%;
		height: 32px;
		margin: 6px 0 0;
		padding: 0 !important;
		line-height: 1;
	}
	#products > a:has(> img[src*="btn_dathang"]) { margin-top: auto; }
	#products > a:has(> img[src*="btn_dathang"]) + a { margin-top: 6px; }
}

/* ---------- Khối "Thống kê truy cập": đệm hai bên ---------- */
#widgetPContent > div[style*="line-height:25px"]:has(> div[style*="font-size:28px"]) { padding: 6px 16px 12px !important; } /* chỉ khối có số đếm */
#widgetPContent > div[style*="line-height:25px"] > div[style*="font-size:28px"] { margin-bottom: 4px; }
@media (min-width: 1024px) {
	/* Thẻ có nút Đặt hàng/Xem chi tiết: cao hơn để nút nằm trong thẻ; tên cố định 2 dòng -> nút thẳng hàng */
	#products:has(> a > img[src*="btn_dathang"]) { height: 300px; }
	#products:has(> a > img[src*="btn_dathang"]) .title {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		height: 36px;
		overflow: hidden;
		line-height: 18px;
	}
	#products:has(> a > img[src*="btn_dathang"]) .price { margin: 2px 0 0; }
	#products > a:has(> img[src*="btn_dathang"]),
	#products > a:has(> img[src*="btn_xemchitiet"]) { width: calc(50% - 8px); margin: 10px 2px 0; }
}
/* Nút Đặt hàng / Xem chi tiết: nhỏ, mảnh hơn */
#products > a:has(> img[src*="btn_dathang"]),
#products > a:has(> img[src*="btn_xemchitiet"]) {
	height: 26px;
	border-radius: 3px;
	font: normal 12px/1 Arial, sans-serif;
	letter-spacing: .2px;
}
@media (min-width: 1024px) {
	#products:has(> a > img[src*="btn_dathang"]) { height: 292px; }
	#products > a:has(> img[src*="btn_dathang"]),
	#products > a:has(> img[src*="btn_xemchitiet"]) { margin-top: 8px; }
}
@media (max-width: 1023px) {
	#products > a:has(> img[src*="btn_dathang"]),
	#products > a:has(> img[src*="btn_xemchitiet"]) { height: 28px; font-size: 12.5px; }
	#products > a:has(> img[src*="btn_dathang"]) + a { margin-top: 5px; }
}
/* Nút Đặt hàng / Xem chi tiết: giữ 2 màu gốc (vàng / đen) như ảnh gif cũ, chỉ rộng đệm hơn */
#products > a:has(> img[src*="btn_dathang"]),
#products > a:has(> img[src*="btn_xemchitiet"]) {
	width: auto;
	height: 24px;
	padding: 0 12px !important;
	border: 0;
	border-radius: 3px;
	font: bold 12px/1 Arial, sans-serif;
	letter-spacing: 0;
}
#products > a:has(> img[src*="btn_dathang"]) { background: #ffdf34; color: #101010 !important; }
#products > a:has(> img[src*="btn_dathang"]):hover { background: #f5d21c; }
#products > a:has(> img[src*="btn_xemchitiet"]) { background: #202020; color: #fff !important; }
#products > a:has(> img[src*="btn_xemchitiet"]):hover { background: #3a3a3a; }
@media (min-width: 1024px) {
	#products > a:has(> img[src*="btn_dathang"]),
	#products > a:has(> img[src*="btn_xemchitiet"]) { width: auto; margin: 8px 2px 0; }
	#products:has(> a > img[src*="btn_dathang"]) { height: 286px; }
}
@media (max-width: 1023px) {
	/* Mobile: 2 nút xếp dọc, căn giữa, cùng bề rộng */
	#products > a:has(> img[src*="btn_dathang"]),
	#products > a:has(> img[src*="btn_xemchitiet"]) {
		align-self: center;
		width: 104px;
		height: 26px;
		font-size: 12.5px;
	}
}
#products > a:has(> img[src*="btn_dathang"]),
#products > a:has(> img[src*="btn_xemchitiet"]) { text-shadow: none !important; }
@media (max-width: 1023px) {
	#products:has(> a > img[src*="btn_dathang"]) .price { margin-bottom: 8px; } /* giá cách nút Đặt hàng */
}
/* Nút Đặt hàng / Xem chi tiết: chữ 11px */
#products > a:has(> img[src*="btn_dathang"]),
#products > a:has(> img[src*="btn_xemchitiet"]) { font-size: 11px !important; }


/* ---------- Khối "Hướng dẫn mua hàng và thanh toán": 3 ảnh (240x110) chia đều 3 cột ---------- */
#widgetPContent > table:has(img[src*="huongdanthanhtoan"]) {
	width: 100% !important;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 10px 0;
	margin: 6px 0 4px;
	font-size: 0; /* bỏ khoảng trắng &nbsp; làm lệch ảnh */
}
#widgetPContent > table:has(img[src*="huongdanthanhtoan"]) td { width: 33.33%; padding: 0 !important; vertical-align: top; }
#widgetPContent > table:has(img[src*="huongdanthanhtoan"]) img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 240 / 110;
	object-fit: cover;
	border-radius: 6px;
	transition: transform .15s, box-shadow .15s;
}
#widgetPContent > table:has(img[src*="huongdanthanhtoan"]) a:hover img { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, .15); }
#widgetPContent:has(> table img[src*="huongdanthanhtoan"]) { padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 599px) {
	#widgetPContent > table:has(img[src*="huongdanthanhtoan"]) { border-spacing: 5px 0; }
}
/* PC: 3 ảnh cách nhau 20px, mép ngoài thẳng hàng thanh tiêu đề (bù border-spacing 2 bên) */
@media (min-width: 1024px) {
	#widgetPContent > table:has(img[src*="huongdanthanhtoan"]) { border-spacing: 20px 0; width: calc(100% + 40px) !important; margin: 10px -20px 0; }
}

/* ---------- Khoảng cách giữa các khối: thoáng hơn ---------- */
@media (min-width: 1024px) {
	#pageContent { padding-top: 0; }
	#vitri2 > #widgetP { margin-bottom: 22px; }
	#vitri3 > #widgetP { margin-bottom: 18px; }
	#vitri2 > #widgetP:first-child[style*="margin:0px"] { margin-bottom: 20px !important; } /* khối slider: cách khối dưới 20px như sidebar */
}
@media (max-width: 1023px) {
	#vitri2 > #widgetP,
	#vitri3 > #widgetP { margin-bottom: 22px; }
}
#widgetPContent > table:has(img[src*="huongdanthanhtoan"]) td { line-height: 0; }
#widgetPContent > table:has(img[src*="huongdanthanhtoan"]) td a { display: block; }

/* ---------- Trang đặt mua / liên hệ (mobile): khối thông tin dạng thẻ + nút gửi to ---------- */
@media (max-width: 1023px) {
	/* Khối thông tin công ty + bản đồ */
	#vitri2 #widgetPContent > div:not(#news):has(iframe[src*="google.com/maps"]) {
		padding: 14px 14px 10px;
		background: #f6fbf0;
		border: 1px solid #e1eed3;
		border-radius: 8px;
		line-height: 1.6;
	}
	#vitri2 #widgetPContent > div:has(iframe[src*="google.com/maps"]) iframe {
		display: block;
		margin-top: 8px;
		border-radius: 6px;
	}
	/* Nút gửi: ảnh btn_goi.gif (có onclick doAction) được phủ trong suốt lên nút CSS -> bấm vẫn gửi */
	#widgetPContent #contact a:has(> img[src*="btn_goi"]) {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 44px;
		margin-top: 4px;
		border-radius: 6px;
		background: #2db411;
		color: #fff !important;
		font: bold 15px/1 Arial, sans-serif;
		text-decoration: none !important;
		box-shadow: 0 2px 6px rgba(45, 180, 17, .3);
	}
	#widgetPContent #contact a:has(> img[src*="btn_goi"])::after { content: "Gửi đơn đặt hàng"; }
	#widgetPContent #contact a:has(> img[src*="btn_goi"]) img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		cursor: pointer;
	}
	#widgetPContent #contact a:has(> img[src*="btn_goi"]):active { background: #259a0d; }
}

/* ---------- Trang đặt mua / liên hệ (PC): thẻ thông tin + form lưới 2 cột ---------- */
@media (min-width: 1024px) {
	#vitri2 #widgetPContent > div:not(#news):has(iframe[src*="google.com/maps"]) {
		padding: 18px 20px 12px;
		background: #f6fbf0;
		border: 1px solid #e1eed3;
		border-radius: 8px;
		line-height: 1.7;
	}
	#vitri2 #widgetPContent > div:has(iframe[src*="google.com/maps"]) iframe {
		display: block;
		width: 100%;
		margin-top: 10px;
		border-radius: 6px;
	}
	/* Form (có <style> nhúng nạp sau -> selector mạnh) */
	#widgetPContent #contact {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px 20px;
		margin-top: 22px;
		padding: 22px 24px 24px;
		border: 1px solid #e6e6e6;
		border-radius: 8px;
		background: #fff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
	}
	#widgetPContent #contact::before {
		content: "Thông tin đặt hàng";
		grid-column: 1 / -1;
		font: bold 16px/1 Arial, sans-serif;
		color: #2db411;
		text-transform: uppercase;
		letter-spacing: .3px;
	}
	#widgetPContent #contact label,
	#widgetPContent #contact label.capt {
		display: flex;
		flex-direction: column;
		gap: 6px;
		float: none;
		width: auto;
		margin: 0;
		font: 600 13px/1.3 Arial, sans-serif;
		color: #444;
	}
	#widgetPContent #contact label br { display: none; }
	#widgetPContent #contact label:has(textarea),
	#widgetPContent #contact label.capt,
	#widgetPContent #contact > a { grid-column: 1 / -1; }
	#widgetPContent #contact > .clear { display: none; }
	#widgetPContent #contact input:not([type="hidden"]):not([type="submit"]):not([type="image"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
	#widgetPContent #contact textarea {
		box-sizing: border-box;
		width: 100%;
		margin: 0;
		border: 1px solid #cfcfcf;
		border-radius: 4px;
		font: normal 14px/1.5 Arial, sans-serif;
		color: #222;
		outline: none;
		transition: border-color .15s, box-shadow .15s;
	}
	#widgetPContent #contact input:not([type="hidden"]):not([type="submit"]):not([type="image"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]) { height: 38px; padding: 0 10px; }
	#widgetPContent #contact textarea { height: 116px; padding: 8px 10px; resize: vertical; }
	#widgetPContent #contact input:focus,
	#widgetPContent #contact textarea:focus { border-color: #2db411 !important; box-shadow: 0 0 0 3px rgba(45, 180, 17, .15); }
	/* Mã xác nhận: ảnh + ô nhập cùng hàng */
	#widgetPContent #contact label.capt .clearfix { display: flex; align-items: center; gap: 12px; }
	#widgetPContent #contact label.capt .clearfix img { display: block; height: 42px; width: auto; border-radius: 4px; }
	#widgetPContent #contact label.capt .clearfix input { width: 180px !important; height: 42px !important; }
	/* Nút gửi: ảnh btn_goi.gif (onclick doAction) phủ trong suốt lên nút CSS */
	#widgetPContent #contact a:has(> img[src*="btn_goi"]) {
		position: relative;
		justify-self: start;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 240px;
		height: 42px;
		border-radius: 6px;
		background: #2db411;
		color: #fff !important;
		font: bold 15px/1 Arial, sans-serif;
		text-decoration: none !important;
		box-shadow: 0 2px 6px rgba(45, 180, 17, .3);
	}
	#widgetPContent #contact a:has(> img[src*="btn_goi"])::after { content: "Gửi đơn đặt hàng"; }
	#widgetPContent #contact a:has(> img[src*="btn_goi"]) img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		cursor: pointer;
	}
	#widgetPContent #contact a:has(> img[src*="btn_goi"]):hover { background: #259a0d; }
}
@media (min-width: 1024px) {
	#widgetPContent #contact { box-sizing: border-box; width: 100% !important; max-width: none; }
}
@media (min-width: 1024px) {
	#vitri2 #widgetPContent > div:has(iframe[src*="google.com/maps"]) iframe { height: 320px; }
}

/* ---------- Khoảng cách nội dung -> footer: đều nhau trên mọi trang ---------- */
#vitri2 > #widgetP:last-of-type,
#vitri3 > #widgetP:last-of-type { margin-bottom: 0 !important; }
div:has(+ #footerContent) { padding-bottom: 40px; }
@media (max-width: 1023px) {
	div:has(+ #footerContent) { padding-bottom: 32px !important; }
}

/* ==========================================================================
   Nút Đặt hàng / Xem chi tiết -> icon tròn đè góc trên phải ảnh (không chiếm diện tích)
   🛒 vàng = Đặt hàng, 👁 đen = Xem chi tiết. alt của ảnh gif vẫn là tên nút cho trình đọc màn hình.
   ========================================================================== */
#products:has(> a > img[src*="btn_dathang"]) { position: relative; }
#products > a:has(> img[src*="btn_dathang"]),
#products > a:has(> img[src*="btn_xemchitiet"]) {
	position: absolute;
	right: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px !important;
	height: 32px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	border-radius: 50%;
	font-size: 0 !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
	transition: transform .15s;
}
#products > a:has(> img[src*="btn_dathang"]) { top: 8px; background: #ffdf34; color: #101010 !important; }
#products > a:has(> img[src*="btn_xemchitiet"]) { top: 46px; background: #202020; color: #fff !important; }
#products > a:has(> img[src*="btn_dathang"]):hover,
#products > a:has(> img[src*="btn_xemchitiet"]):hover { transform: scale(1.1); }
#products > a:has(> img[src*="btn_dathang"])::after,
#products > a:has(> img[src*="btn_xemchitiet"])::after {
	content: "";
	width: 17px;
	height: 17px;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}
#products > a:has(> img[src*="btn_dathang"]) {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42a.25.25 0 0 1-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
}
#products > a:has(> img[src*="btn_xemchitiet"]) {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E");
}
/* Ảnh gif: ẩn khỏi mắt nhưng giữ alt làm tên nút */
#products > a:has(> img[src*="btn_dathang"]) img,
#products > a:has(> img[src*="btn_xemchitiet"]) img {
	display: block !important;
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}
/* Thẻ về chiều cao gọn như ban đầu */
@media (min-width: 1024px) {
	#products:has(> a > img[src*="btn_dathang"]) { height: 255px; }
}
@media (max-width: 1023px) {
	#products:has(> a > img[src*="btn_dathang"]) .price { margin-bottom: 0; }
	#products > a:has(> img[src*="btn_dathang"]),
	#products > a:has(> img[src*="btn_xemchitiet"]) { width: 34px !important; height: 34px !important; right: 10px; }
	#products > a:has(> img[src*="btn_dathang"]) { top: 10px; }
	#products > a:has(> img[src*="btn_xemchitiet"]) { top: 50px; }
}

/* Icon Đặt hàng / Xem chi tiết: nằm dưới giá, 2 icon cạnh nhau ở giữa (không đè ảnh) */
#products > a:has(> img[src*="btn_dathang"]),
#products > a:has(> img[src*="btn_xemchitiet"]) {
	position: relative;
	top: auto !important;
	right: auto !important;
	display: inline-flex;
	vertical-align: top;
	margin: 8px 5px 0 !important;
}
@media (min-width: 1024px) {
	#products:has(> a > img[src*="btn_dathang"]) { height: 292px; }
}
@media (max-width: 1023px) {
	/* thẻ là flex dọc -> cho xuống dòng để 2 icon nằm cùng hàng */
	#products:has(> a > img[src*="btn_dathang"]) {
		flex-flow: row wrap;
		justify-content: center;
		align-content: flex-start;
	}
	#products:has(> a > img[src*="btn_dathang"]) > :not(a:has(> img[src*="btn_"])) { flex: 0 0 100%; }
	#products > a:has(> img[src*="btn_dathang"]),
	#products > a:has(> img[src*="btn_xemchitiet"]) { margin: 10px 5px 0 !important; }
}
@media (min-width: 1024px) {
	/* Khung ảnh cố định: SP thiếu ảnh vẫn thẳng hàng với thẻ khác */
	#products:has(> a > img[src*="btn_dathang"]) > center,
	#products:has(> a > img[src*="btn_dathang"]) > a:first-child > center { display: block; height: 180px; overflow: hidden; }
}

/* ==========================================================================
   Nút Đặt hàng: ô vuông xanh có icon giỏ hàng, khít góc dưới-trái ảnh (theo mẫu)
   Bỏ nút "Xem chi tiết" (ảnh/tên đã dẫn tới trang chi tiết)
   ========================================================================== */
#products > a:has(> img[src*="btn_xemchitiet"]) { display: none !important; }
#products > a:has(> img[src*="btn_dathang"]) {
	position: absolute;
	z-index: 2;
	display: flex;
	width: 34px !important;
	height: 34px !important;
	margin: 0 !important;
	border-radius: 0 !important;
	background: #98d661; /* xanh nhạt lấy từ banner cũ (cùng tông nền header) */
	color: #fff !important;
	box-shadow: none;
}
#products > a:has(> img[src*="btn_dathang"]):hover { background: #7cc63a; transform: none; }
#products > a:has(> img[src*="btn_dathang"])::after { width: 19px; height: 19px; }
/* icon giỏ hàng nét mảnh như mẫu */
#products > a:has(> img[src*="btn_dathang"]) {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h3l2.6 12.2a1.5 1.5 0 0 0 1.5 1.2h8.8a1.5 1.5 0 0 0 1.5-1.1L21 8H6.2'/%3E%3Ccircle cx='9.5' cy='20' r='1.4'/%3E%3Ccircle cx='17.5' cy='20' r='1.4'/%3E%3C/svg%3E");
}
@media (min-width: 1024px) {
	#products:has(> a > img[src*="btn_dathang"]) { height: 255px; }
	/* ảnh: trang chủ (3,1) 180px; danh sách (8,6) 174px -> góc dưới-trái ~ y=180 */
	#products > a:has(> img[src*="btn_dathang"]) { left: 8px !important; top: 146px !important; }
}
@media (max-width: 1023px) {
	#products:has(> a > img[src*="btn_dathang"]) { flex-flow: column nowrap; container-type: inline-size; }
	/* ảnh vuông rộng = bề rộng nội dung thẻ (100cqw), bắt đầu cách mép trên 12px */
	#products > a:has(> img[src*="btn_dathang"]) { left: 6px !important; top: calc(12px + 100cqw - 34px) !important; right: auto !important; }
}
@media (max-width: 1023px) {
	#products:has(> a > img[src*="btn_dathang"]) > :not(a:has(> img[src*="btn_"])) { flex: 0 0 auto; }
	#products:has(> a > img[src*="btn_dathang"]) > a:first-child { flex: 1 0 auto; }
}

/* ---------- Ảnh sản phẩm tràn sát mép thẻ (bỏ đệm 5px quanh ảnh) ---------- */
#products:has(> a > img[src*="btn_dathang"]) .imgPro { width: auto !important; height: auto !important; padding: 0 !important; }
#products:has(> a > img[src*="btn_dathang"]) .imgPro img,
#products:has(> a > img[src*="btn_dathang"]) img.imgPro {
	display: block;
	box-sizing: border-box;
	padding: 0 !important;
	object-fit: cover;
}
@media (min-width: 1024px) {
	#products:has(> a > img[src*="btn_dathang"]) > center,
	#products:has(> a > img[src*="btn_dathang"]) > a:first-child > center { height: 183px; }
	#products:has(> a > img[src*="btn_dathang"]) .imgPro img,
	#products:has(> a > img[src*="btn_dathang"]) img.imgPro { width: 183px !important; height: 183px !important; max-width: 100%; object-fit: cover; }
	#products:has(> a > img[src*="btn_dathang"]) { height: 262px; overflow: hidden; }
	#products > a:has(> img[src*="btn_dathang"]) { left: 0 !important; top: 149px !important; }
}
@media (max-width: 1023px) {
	#products:has(> a > img[src*="btn_dathang"]) { padding: 0 0 10px !important; overflow: hidden; }
	#products:has(> a > img[src*="btn_dathang"]) > a:first-child { padding-top: 0 !important; }
	#products:has(> a > img[src*="btn_dathang"]) .imgPro img,
	#products:has(> a > img[src*="btn_dathang"]) img.imgPro { width: 100% !important; height: auto !important; aspect-ratio: 1; }
	#products:has(> a > img[src*="btn_dathang"]) .title { padding: 0 6px; }
	#products > a:has(> img[src*="btn_dathang"]) { left: 0 !important; top: calc(100cqw - 34px) !important; }
}
@media (max-width: 1023px) {
	#products:has(> a > img[src*="btn_dathang"]) > center > a { display: block; padding: 0 !important; }
}

/* ==========================================================================
   Khoảng cách chuẩn cho lưới sản phẩm (PC): khe 12px, 4 cột đều, lề cân 2 bên
   Trong thẻ: ảnh -> tên 8px, tên -> giá 4px, giá -> đáy 12px
   ========================================================================== */
@media (min-width: 1024px) {
	div:has(> #products > a > img[src*="btn_dathang"]) {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		padding: 0 !important;
	}
	div:has(> #products > a > img[src*="btn_dathang"]) > .clear { display: none; }
	#products:has(> a > img[src*="btn_dathang"]) {
		float: none;
		box-sizing: border-box;
		width: calc((100% - 36px) / 4) !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 0 12px !important;
		display: flex;
		flex-direction: column;
		container-type: inline-size;
		overflow: hidden;
	}
	#products:has(> a > img[src*="btn_dathang"]) > a:first-child { display: flex; flex-direction: column; flex: 1 0 auto; }
	#products:has(> a > img[src*="btn_dathang"]) > center,
	#products:has(> a > img[src*="btn_dathang"]) > a:first-child > center { height: auto; }
	#products:has(> a > img[src*="btn_dathang"]) .imgPro img,
	#products:has(> a > img[src*="btn_dathang"]) img.imgPro { width: 100% !important; height: auto !important; aspect-ratio: 1; }
	#products:has(> a > img[src*="btn_dathang"]) .title { margin: 8px 0 0 !important; padding: 0 6px; }
	#products:has(> a > img[src*="btn_dathang"]) .price { margin: 4px 0 0 !important; }
	/* nút giỏ hàng: góc dưới-trái ảnh (ảnh vuông = bề rộng nội dung thẻ) */
	#products > a:has(> img[src*="btn_dathang"]) { left: 0 !important; top: calc(100cqw - 34px) !important; }
	/* tiêu đề khối -> lưới thẻ: 12px */
	#vitri2 #widgetPContent:has(#products > a > img[src*="btn_dathang"]) { padding-top: 12px !important; }
}
@media (max-width: 1023px) {
	#products:has(> a > img[src*="btn_dathang"]) .title { margin-top: 8px !important; }
	#products:has(> a > img[src*="btn_dathang"]) .price { margin-top: 4px !important; }
	#products:has(> a > img[src*="btn_dathang"]) { padding-bottom: 12px !important; }
}
@media (min-width: 1024px) {
	#vitri2 #widgetPContent:has(#products > a > img[src*="btn_dathang"]) { padding-top: 2px !important; } /* + lề dưới tiêu đề 10px = 12px */
}

/* ---------- Header PC gọn hơn: cao 118px (ảnh nền 1000x137 thu theo tỉ lệ 118/137, canh phải) ---------- */
@media (min-width: 1024px) {
	#headerContent { background-size: auto 118px; }
	#headerContent .banner { height: 118px; }
	#headerContent .banner #Layer1 { position: absolute; top: 0; right: 0; width: auto !important; height: 118px; margin: 0 !important; }
	#headerContent .banner #Layer1 img { display: block; width: auto; height: 118px; }
	/* logo: chỉ gán chiều cao, rộng tự theo tỉ lệ */
	.site-logo { top: 6px !important; left: 0 !important; }
	.site-logo img { width: auto !important; height: 106px !important; }
	/* link gọi phủ vùng hotline: tọa độ cũ x750,y12,236x58 trên ảnh 1000 -> nhân 118/137, ảnh lệch phải 1000-861=139px */
	.pc-hotline-link { left: 785px; top: 10px; width: 204px; height: 50px; }
}

/* ---------- Dòng bản quyền cuối footer ---------- */
.footer-copyright {
	clear: both;
	margin-top: 8px;
	padding: 12px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .3);
	color: rgba(255, 255, 255, .92);
	font: 12.5px/1.5 Arial, sans-serif;
	text-align: center;
}
@media (max-width: 1023px) {
	.footer-copyright { margin-top: 14px; font-size: 12px; }
}
.footer-copyright { text-wrap: balance; }
/* Rule "#footerContent .wrapper > div { padding: 0 !important }" làm mất padding -> chữ dính sát vạch kẻ: trả lại khoảng thở trên/dưới */
#footerContent .wrapper > .footer-copyright { padding: 14px 0 4px !important; }

/* ==========================================================================
   Trang chi tiết sản phẩm: tên, giá, nút mua, tab, "Sản phẩm cùng loại"
   ========================================================================== */
#vitri2 td h1.title {
	margin: 0 0 6px;
	font: bold 22px/1.3 Arial, sans-serif !important;
	color: #222 !important;
}
#vitri2 td h1.title + .price { margin: 0 0 10px; font-family: Arial, sans-serif !important; font-size: 22px !important; }
#vitri2 td h1.title + .price span { font-weight: bold; }
#vitri2 td .note { margin-bottom: 16px; color: #555; line-height: 1.6; }
/* Nút mua: ảnh btn_dathang_big.gif -> nút CSS (link thường, giữ alt cho trình đọc màn hình) */
#vitri2 a:has(> img[src*="btn_dathang_big"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	height: 44px;
	padding: 0 28px;
	border-radius: 6px;
	background: #98d661; /* xanh nhạt riêng của site .vn (cùng nút giỏ hàng), không theo shophoacantho.com */
	color: #fff !important;
	font: bold 15px/1 Arial, sans-serif;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .22); /* chữ trắng trên nền nhạt vẫn đọc rõ */
	text-decoration: none !important;
	box-shadow: 0 2px 6px rgba(124, 198, 58, .35);
	transition: background .15s;
}
#vitri2 a:has(> img[src*="btn_dathang_big"]):hover { background: #7cc63a; }
#vitri2 a:has(> img[src*="btn_dathang_big"])::before {
	content: "";
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h3l2.6 12.2a1.5 1.5 0 0 0 1.5 1.2h8.8a1.5 1.5 0 0 0 1.5-1.1L21 8H6.2'/%3E%3Ccircle cx='9.5' cy='20' r='1.4'/%3E%3Ccircle cx='17.5' cy='20' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h3l2.6 12.2a1.5 1.5 0 0 0 1.5 1.2h8.8a1.5 1.5 0 0 0 1.5-1.1L21 8H6.2'/%3E%3Ccircle cx='9.5' cy='20' r='1.4'/%3E%3Ccircle cx='17.5' cy='20' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
#vitri2 a:has(> img[src*="btn_dathang_big"])::after { content: "Đặt mua ngay"; }
#vitri2 a:has(> img[src*="btn_dathang_big"]) img {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}
/* Tab: giữ kiểu hộp gốc của site (tabcontent.css): tab thường nền xám, tab đang chọn nền trắng viền xanh */
#widgetPContent .shadetabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
}
#widgetPContent .shadetabs li { display: flex; float: none; margin: 0; }
#widgetPContent .shadetabs li a,
#widgetPContent .shadetabs li a:visited {
	display: flex;
	align-items: center;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 16px;
	border: 1px solid #b5b5b5;
	border-radius: 0;
	background: #b5b5b5 !important;
	box-shadow: none !important;
	color: #000 !important;
	font: 14px/1.3 Arial, sans-serif;
	text-decoration: none;
}
#widgetPContent .shadetabs li a:hover { text-decoration: underline; }
#widgetPContent .shadetabs li a.selected {
	border-color: #5e9303;
	background: #fff !important;
	color: #000 !important;
	text-decoration: none;
}
/* "Sản phẩm cùng loại" */
#vitri2 #newsContentShow:has(#products) { margin-top: 16px; }
#vitri2 #newsContentShow:has(#products)::before {
	content: "Sản phẩm cùng loại";
	display: block;
	flex: 0 0 100%;
	margin: 0 0 2px;
	color: #2db411;
	font: bold 16px/1.3 Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: .3px;
}
@media (max-width: 1023px) {
	#vitri2 td h1.title { font-size: 20px !important; }
	#vitri2 a:has(> img[src*="btn_dathang_big"]) { display: flex; width: 100%; }
	#widgetPContent .shadetabs li { flex: 1 1 0; }
	#widgetPContent .shadetabs li a,
	#widgetPContent .shadetabs li a.selected {
		justify-content: center;
		width: 100%;
		padding: 10px 4px;
		font-size: 13px;
		text-align: center;
		white-space: normal;
	}
}

/* Trang chi tiết (PC): cột ảnh cố định 340px dù ảnh gốc to hơn; bỏ chiều cao tối thiểu của nội dung tab */
@media (min-width: 1024px) {
	#vitri2 td[style*="width:340px"] { width: 340px !important; max-width: 340px; }
	#vitri2 td[style*="width:340px"] img { display: block; width: 100% !important; max-width: 340px; height: auto !important; margin: 0 auto; }
}
#vitri2 .tabContent { min-height: 0 !important; }

/* ==========================================================================
   Trang bài viết (giới thiệu, thanh toán, chi tiết tin) + danh sách tin tức
   Mỗi bài là thẻ trắng có đệm; chữ Arial, giãn dòng dễ đọc
   ========================================================================== */
#vitri2 #news {
	box-sizing: border-box;
	margin: 12px 0 14px;
	padding: 22px 26px 20px !important;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 8px;
}
#vitri2 #news + .clear { display: none; }
#vitri2 #news .title,
#vitri2 #news .title a {
	margin: 0;
	font: bold 22px/1.35 Arial, sans-serif !important;
	color: #2a8a12 !important;
	text-decoration: none;
}
#vitri2 #news .title a:hover { color: #2db411 !important; }
#vitri2 #news .dateUpdate {
	margin: 6px 0 14px;
	font: 12px/1.4 Arial, sans-serif !important;
	color: #999 !important;
}
#vitri2 #news .content,
#vitri2 #news .content p,
#vitri2 #news .content span {
	font-family: Arial, sans-serif !important;
	line-height: 1.75 !important;
	color: #333;
}
#vitri2 #news .content { padding-top: 0 !important; font-size: 14px; }
#vitri2 #news .content p { margin: 0 0 12px !important; }
#vitri2 #news .content img { max-width: 100%; height: auto; border-radius: 6px; }
/* Danh sách tin: ảnh trái, chữ phải */
#vitri2 #news:has(> a .imgNews) {
	display: grid;
	grid-template-columns: 160px 1fr;
	grid-template-areas: "img title" "img date" "img content";
	grid-template-rows: auto auto 1fr;
	column-gap: 18px;
	margin: 0 0 14px;
	padding: 16px !important;
}
#vitri2 #news:has(> a .imgNews) .title { grid-area: title; font-size: 18px !important; }
#vitri2 #news:has(> a .imgNews) .title a { font-size: 18px !important; }
#vitri2 #news:has(> a .imgNews) .dateUpdate { grid-area: date; margin: 4px 0 8px; }
#vitri2 #news:has(> a .imgNews) > a:has(.imgNews) { grid-area: img; }
#vitri2 #news:has(> a .imgNews) .content { grid-area: content; color: #555; }
#vitri2 #news:has(> a .imgNews) .content p { margin: 0 !important; }
#vitri2 #news:has(> a .imgNews) .imgNews { width: 160px !important; height: 120px !important; padding: 0 !important; margin: 0 !important; }
#vitri2 #news:has(> a .imgNews) .imgNews img {
	display: block;
	width: 160px !important;
	height: 120px !important;
	max-width: none; max-height: none; /* modules.css giới hạn 120px -> ảnh hụt cột 160px, hở khoảng trắng */
	padding: 0 !important;
	object-fit: cover;
	border-radius: 6px;
}
#vitri2 #newsContentShow:has(> #news .imgNews) { padding-top: 12px; }
@media (max-width: 1023px) {
	#vitri2 #news { padding: 16px !important; margin: 10px 0 12px; }
	#vitri2 #news .title,
	#vitri2 #news .title a { font-size: 19px !important; }
	#vitri2 #news .content,
	#vitri2 #news .content p,
	#vitri2 #news .content span { font-size: 15px !important; }
	#vitri2 #news:has(> a .imgNews) {
		grid-template-columns: 104px 1fr;
		grid-template-areas: "title title" "date date" "img content";
		grid-template-rows: auto auto auto;
		column-gap: 12px;
		padding: 14px !important;
	}
	#vitri2 #news:has(> a .imgNews) .title,
	#vitri2 #news:has(> a .imgNews) .title a { font-size: 16px !important; }
	#vitri2 #news:has(> a .imgNews) .imgNews,
	#vitri2 #news:has(> a .imgNews) .imgNews img { width: 104px !important; height: 78px !important; }
	#vitri2 #news:has(> a .imgNews) .content,
	#vitri2 #news:has(> a .imgNews) .content p,
	#vitri2 #news:has(> a .imgNews) .content span {
		font-size: 13.5px !important;
		line-height: 1.55 !important;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	#vitri2 #news:has(> a .imgNews) .content p,
	#vitri2 #news:has(> a .imgNews) .content span { display: inline; -webkit-line-clamp: unset; }
}
/* Danh sách tin: bỏ đường kẻ chấm cũ; #news có style="display:block" inline -> cần !important cho lưới.
   Chỉ khớp từng tin (có > a .imgNews), không khớp #news bọc ngoài ở trang tìm kiếm */
#vitri2 #newsContentShow > .breakline { display: none; }
#vitri2 #news:has(> a .imgNews) { display: grid !important; }
#vitri2 #news:has(> a .imgNews) > .clear { display: none; }

/* ===== Header PC (>=1024px). Bảng màu xanh lá mạ thống nhất, giữ cảm giác sáng của web cũ:
   thanh trên #2db411 (cùng footer) · nút/viền/icon #6cb52d · bóng menu #c1e856 · điểm nhấn duy nhất: hotline đỏ ===== */
.pc-header { display: none; }
@media (min-width: 1024px) {
	.pc-header { display: block; background: #fff; }
	#headerContent { background: none; } /* thẻ #headerContent không đóng -> bọc cả trang, chỉ ẩn .banner */
	#headerContent .banner { display: none; } /* banner ảnh cũ chỉ còn dùng cho mobile/tablet */

	/* Thanh trên cùng */
	.pch-top { background: #2db411; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.15); font-size: 13px; } /* xanh tươi cùng màu footer */
	.pch-top .wrapper { display: flex; align-items: center; justify-content: space-between; height: 34px; }
	.pch-top-left { font-weight: 700; letter-spacing: .2px; }
	.pch-top-links { display: flex; }
	.pch-top-links a { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; padding: 0 14px; border-left: 1px solid rgba(255,255,255,.35); opacity: .95; }
	.pch-top-links a:first-child { border-left: 0; }
	.pch-top-links a:last-child { padding-right: 0; }
	.pch-top-links a:hover { color: #fff59d; opacity: 1; }

	/* Hàng logo: gradient dọc từ trên xuống (màu header cũ header_bg.jpg #87ca4d -> #a8e275, sáng thêm ~22%) */
	.pch-main {
		position: relative;
		border-bottom: 1px solid #7cbf3f;
		background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)), linear-gradient(#87ca4d, #99d661 50%, #a8e275);
	}
	.pch-main .wrapper { position: relative; z-index: 1; }
	.pch-main .wrapper { display: flex; align-items: center; gap: 22px; height: 116px; }
	.pch-logo { flex: 0 0 auto; display: block; }
	.pch-logo img { display: block; width: auto; height: 104px; }
	.pch-search { flex: 0 1 440px; margin-left: auto !important; display: flex; height: 42px; border-radius: 21px; overflow: hidden; margin: 0; background: #fff; box-shadow: 0 2px 8px rgba(60,110,10,.18), inset 0 0 0 1px rgba(79,154,28,.25); }
	.pch-search + .pch-info { margin-left: auto; } /* ô tìm kiếm giữa, khối giao hàng/hotline dồn phải */
	.pch-search input[type="search"] { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 18px; font-size: 14px; color: #333; background: transparent; -webkit-appearance: none; appearance: none; }
	.pch-search button { flex: 0 0 52px; margin: 4px; border: 0; border-radius: 17px; background: linear-gradient(#7cc43a, #5aa623); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
	.pch-search button:hover { background: #4f9a1c; }
	.pch-info { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; color: #333; text-decoration: none; height: 46px; }
	.pch-info svg { flex: 0 0 auto; width: 42px; height: 42px; padding: 10px; box-sizing: border-box; border-radius: 50%; background: #fff; color: #4f9a1c; box-shadow: 0 2px 6px rgba(60,110,10,.18); }
	.pch-info span { display: flex; flex-direction: column; line-height: 1.35; }
	/* Chữ giao hàng: xanh đậm trên nền xanh sáng (chữ trắng bị chìm), viền sáng nhẹ cho nổi */
	.pch-ship strong { font-size: 15px; font-weight: 700; color: #1d4f05; text-transform: uppercase; letter-spacing: .3px; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
	.pch-ship em { font-size: 13px; font-style: normal; font-weight: 500; color: #2c5e0e; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
	.pch-ship:hover strong { color: #e00; }
	/* Hotline: điểm nhấn đỏ duy nhất */
	.pch-phone { height: auto; padding: 5px 20px 5px 6px; border-radius: 30px; background: linear-gradient(#f22, #d00); box-shadow: 0 3px 10px rgba(221,0,0,.28); }
	.pch-phone svg { background: #fff; color: #e00; width: 36px; height: 36px; padding: 8px; box-shadow: none; }
	.pch-phone strong { font-size: 18px; color: #fff; letter-spacing: .3px; }
	.pch-phone em { color: #ffe1e1; font-style: normal; }
	.pch-phone:hover { background: linear-gradient(#e00, #b80000); }
	.pch-stripe { display: none; }

	/* Menu chính: thanh bóng sáng như web cũ (menu_bg.gif trắng -> #c1e856) nhưng viền mảnh, mục đang chọn là nút xanh chữ trắng */
	#menuContent {
		height: auto;
		margin: 14px 0;
		padding: 4px;
		border: 1px solid #8cc63f;
		border-radius: 12px;
		background: linear-gradient(#fff, #f1f9dc 50%, #d6f08f);
		box-shadow: 0 2px 6px rgba(60,110,10,.12), inset 0 1px 0 #fff;
	}
	#menuContent .Menu { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; height: auto; background: none; }
	#menuContent .Menu > li { width: auto !important; margin: 0; padding: 0 !important; background: none !important; }
	#menuContent .Menu > li.menuline { display: block; width: 0; height: 18px; margin: 0 2px; border-left: 1px solid rgba(79,154,28,.35); }
	#menuContent .Menu > li > a,
	#menuContent .Menu > li > a span { text-transform: uppercase; font-weight: 500; font-size: 14px; color: #2b4a0e; background: none; }
	#menuContent .Menu > li > a { border-radius: 8px; }
	#menuContent .Menu > li > a span { padding: 10px 20px; letter-spacing: .3px; }
	#menuContent .Menu > li > a:hover,
	#menuContent .Menu > li.menuhover > a,
	#menuContent .Menu > li > .menuhover { background: rgba(255,255,255,.75) !important; }
	#menuContent .Menu > li > a.active,
	#menuContent .Menu > li.active > a { background: linear-gradient(#86cc45, #5aa623) !important; box-shadow: 0 2px 4px rgba(60,110,10,.25); }
	#menuContent .Menu > li > a:hover span,
	#menuContent .Menu > li > .menuhover span { color: #1f3a08; background: none; }
	#menuContent .Menu > li > a.active span,
	#menuContent .Menu > li.active > a span { color: #fff; background: none; }
	#headerContent2 { position: relative; z-index: 1001; } /* menu con nổi trên nút slider (z-index 1000) */
	/* Menu con: thẻ trắng bo góc, vạch xanh trên, bóng mềm. Không padding/viền dọc trên ul (mainMenu.js đo offsetHeight),
	   khung vẽ bằng box-shadow. Menu chỉ có 2 cấp nên giữ overflow:hidden để bo góc gọn
	   (JS gán overflow:visible inline khi mở xong -> cần !important) */
	#menuContent .Menu ul {
		top: 100%;
		left: 0;
		min-width: 230px;
		padding: 0 !important;
		border: 0;
		border-radius: 10px;
		overflow: hidden !important;
		background: #fff;
		box-shadow: 0 0 0 1px rgba(108,181,45,.25), 0 12px 28px rgba(40,70,10,.18);
		z-index: 50;
	}
	#menuContent .Menu ul::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #6cb52d; z-index: 1; } /* vạch xanh trên (nằm trên nền các mục) */
	#menuContent .Menu ul li { float: none; width: auto; background: none; } /* mainMenu.css cho li float:left -> co theo chữ */
	#menuContent .Menu ul li a { position: relative; display: block; background: #fff; padding-left: 0; transition: background .15s; }
	#menuContent .Menu ul li a span { padding: 12px 20px; color: #2b4a0e; font-size: 14.5px; font-weight: 500; text-transform: none; letter-spacing: .1px; transition: color .15s, padding .15s; }
	#menuContent .Menu ul li:first-child + li a span { padding-top: 15px; } /* li đầu là .arrowSub (ẩn): chừa vạch xanh 3px */
	#menuContent .Menu ul li:last-child a span { padding-bottom: 14px; }
	#menuContent .Menu ul li a::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #6cb52d; opacity: 0; transition: opacity .15s; }
	#menuContent .Menu ul li a:hover,
	#menuContent .Menu ul .menuhover { background: #f2f9e6; }
	#menuContent .Menu ul li a:hover::before { opacity: 1; }
	#menuContent .Menu ul li a:hover span,
	#menuContent .Menu ul .menuhover span { color: #4f9a1c !important; padding-left: 24px; }
	#menuContent .Menu ul li.menuline { height: 1px; margin: 0 16px; background: #edf3e4; }
	#menuContent .Menu ul li:last-child { margin-bottom: 0; padding-bottom: 0; background: none; border-radius: 0; }
	#menuContent .Menu ul .arrowSub { display: none; }
}

/* ===== PC: khung trang rộng tối đa 1200px (trước 1000px). Cột chính co giãn, sidebar giữ 240px, cách nhau 20px ===== */
@media (min-width: 1024px) {
	:root {
		--pc-w: min(1200px, calc(100vw - 32px));
		--pc-main: calc(var(--pc-w) - 260px);       /* #vitri2 (trước 760px): chừa 240px sidebar + 20px khoảng cách */
		--pc-ban: calc(var(--pc-main) - 20px);       /* poster + slider, chừa 20px khoảng cách giữa 2 banner */
		--pc-bh: calc(var(--pc-ban) * 350 / 756);   /* chiều cao banner trang chủ, giữ tỉ lệ cũ (184+572)x350 */
	}
	.wrapper,
	#pageContent .wrapper,
	body > div[style*="width:1000px"],
	#headerContent div[style*="width:1000px"] { width: var(--pc-w) !important; max-width: 1200px; }
	#vitri2 { width: var(--pc-main); }
	/* Poster 184 + slider 572 theo tỉ lệ, cách nhau 20px (= khoảng cách tới sidebar) */
	.home-banner #slider li { width: calc(var(--pc-ban) * 572 / 756); height: var(--pc-bh); }
	.home-poster img { width: calc(var(--pc-ban) * 184 / 756); height: var(--pc-bh); }
	/* Khoảng cách đồng bộ 20px: hộp sidebar rộng đủ 240px (bỏ margin 0 5px cũ) -> mép phải thẳng header;
	   dưới hàng banner 20px ở cả 2 cột (margin gộp với tiêu đề khối dưới) */
	#vitri3 > #widgetP { margin-left: 0; margin-right: 0; }
	#vitri3 > #widgetP:first-child { margin-bottom: 20px !important; }
	/* Ô "Quà tặng lan hồ điệp": ảnh phủ kín ô (không còn khoảng trắng phía trên); dải chữ in sẵn ở đáy ảnh
	   bị đẩy ra ngoài (ảnh cao 118%) và thay bằng nhãn CSS cùng bảng màu */
	#vitri3 a:has(> img[src*="lan-ho-diep.png"]) { position: relative; display: block; box-sizing: border-box; height: var(--pc-bh); padding: 0; overflow: hidden; border: 1px solid #b9de85; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(60,110,10,.1); }
	#vitri3 img[src*="lan-ho-diep.png"] { display: block; width: 100% !important; height: 118% !important; margin: -4px 0 0; /* giấu viền trên có sẵn trong ảnh */ object-fit: cover; object-position: center top; clip-path: none; transition: transform .3s; }
	#vitri3 a:has(> img[src*="lan-ho-diep.png"]):hover img { transform: scale(1.03); }
	#vitri3 a:has(> img[src*="lan-ho-diep.png"])::after {
		content: "Quà tặng lan hồ điệp";
		position: absolute;
		left: 0; right: 0; bottom: 0;
		padding: 12px 8px;
		background: linear-gradient(#7cc43a, #5aa623);
		color: #fff;
		font-weight: 700;
		font-size: 15px;
		letter-spacing: .3px;
		line-height: 1.2;
		text-align: center;
		text-transform: uppercase;
	}
}

/* ===== Trang tìm kiếm: nhóm "Sản phẩm" + "Bài viết" ===== */
#vitri2 .search-heading {
	margin: 18px 0 12px;
	padding: 0 0 8px;
	border-bottom: 2px solid #e7f6e3;
	color: #2db411;
	font: bold 16px/1.3 Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: .3px;
}
#vitri2 .search-heading span { color: #888; font-weight: normal; text-transform: none; }
#vitri2 .search-heading:first-child { margin-top: 4px; }
#vitri2 .search-empty { margin: 0 0 8px; color: #777; }
#vitri2 .search-products + .clear + .search-heading { margin-top: 26px; }
/* Khung bọc ngoài danh sách bài viết: bỏ viền/nền để không thành "thẻ lồng thẻ" */
#vitri2 #news:has(> #newsContentShow) { border: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
#vitri2 #news:has(> #newsContentShow) > #newsBreak { display: none; }
#vitri2 #news:has(> #newsContentShow) > div:not([id]) { padding: 0 0 12px !important; color: #666 !important; font-size: 13px; }
#vitri2 #news:has(> #newsContentShow) #newsContentShow { padding-top: 0; }

/* ===== Thanh chia sẻ (trang chi tiết sản phẩm/bài viết): Facebook, Zalo, TikTok, Instagram, Copy link ===== */
#vitri2 .share-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	padding: 10px 0;
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
	color: #555;
	font-size: 13px;
}
#vitri2 .share-bar > div { float: none !important; width: auto !important; margin: 0 !important; }
#vitri2 .share-bar > .clear { display: none; }
.share-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.share-label { margin-right: 2px; color: #555; font-size: 13px; }
.share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff !important;
	cursor: pointer;
	transition: transform .15s, opacity .15s;
}
.share-btn svg { width: 18px; height: 18px; }
.share-btn:hover { transform: translateY(-2px); opacity: .9; }
.share-facebook { background: #1877f2; }
.share-zalo { background: #0068ff; }
.share-zalo svg { width: 22px; height: 22px; }
.share-zalo svg path[fill="#fff"] { fill: #0068ff; }
.share-tiktok { background: #111; }
.share-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.share-copy { background: #98d661; }
.share-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	z-index: 10000;
	max-width: calc(100% - 32px);
	padding: 11px 18px;
	border-radius: 24px;
	background: rgba(30, 30, 30, .92);
	color: #fff;
	font: 14px/1.4 Arial, sans-serif;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 10px);
	transition: opacity .2s, transform .2s;
}
.share-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===== Chi tiết bài viết (#news có h1.title): chữ thoáng, dễ đọc ===== */
#vitri2 #news:has(> h1.title) .content { font-size: 15px; }
#vitri2 #news:has(> h1.title) .content p,
#vitri2 #news:has(> h1.title) .content p span,
#vitri2 #news:has(> h1.title) .content li {
	font-size: 15px !important;
	line-height: 1.85 !important;
}
#vitri2 #news:has(> h1.title) .content p { margin: 0 0 14px !important; }
#vitri2 #news:has(> h1.title) .content h2,
#vitri2 #news:has(> h1.title) .content h3 { margin: 22px 0 10px; color: #2db411; font: bold 17px/1.4 Arial, sans-serif; }
#vitri2 #news:has(> h1.title) .content h3 strong { font-weight: bold; }
#vitri2 #news:has(> h1.title) .content img { margin: 4px 0; border-radius: 6px; }
@media (max-width: 599px) {
	#vitri2 #news:has(> h1.title) .content p,
	#vitri2 #news:has(> h1.title) .content p span,
	#vitri2 #news:has(> h1.title) .content li { font-size: 15px !important; line-height: 1.75 !important; }
}

/* ===== Font toàn site: Roboto (nạp từ Google Fonts trong index.php). !important để thắng các rule cũ
   và style inline (font-family Arial/Time New Roman trong nội dung soạn từ admin) ===== */
body,
body *:not(svg):not(svg *) {
	font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
}

/* Menu PC màn 1024-1279px: thu padding để 8 mục vẫn nằm 1 hàng */
@media (min-width: 1024px) and (max-width: 1279px) {
	#menuContent .Menu > li > a span { padding-left: 12px; padding-right: 12px; font-size: 13.5px; }
}

/* ===== Chi tiết sản phẩm: tên + giá + mô tả rõ thứ bậc (thắng style inline của module và rule #news .title) ===== */
#vitri2 #news td h1.title {
	margin: 0 0 12px !important;
	color: #1f3a08 !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: .1px;
}
/* "Giá:" nhỏ màu xám, số tiền to đỏ đậm (không khung/nền) */
#vitri2 #news td h1.title + .price {
	display: flex !important;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 14px !important;
	padding: 0 !important;
	border: 0;
	background: none !important;
	color: #777 !important;
	font-size: 15px !important;
	font-weight: 500;
	line-height: 1.3 !important;
}
#vitri2 #news td h1.title + .price span {
	color: #e8181f !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	letter-spacing: .2px;
}
#vitri2 #news td .note,
#vitri2 #news td .note p,
#vitri2 #news td .note span { color: #555 !important; font-size: 15px !important; line-height: 1.7 !important; }
#vitri2 #news td .note { margin-bottom: 18px; }
/* Nội dung tab "Thông tin chi tiết sản phẩm" */
#vitri2 #news .tabContent,
#vitri2 #news .tabContent p,
#vitri2 #news .tabContent span,
#vitri2 #news .tabContent li { color: #333; font-size: 15px !important; line-height: 1.75 !important; }
#vitri2 #news .tabContent p { margin: 0 0 6px; }
@media (max-width: 1023px) {
	#vitri2 #news td h1.title { font-size: 21px !important; }
	#vitri2 #news td h1.title + .price span { font-size: 22px !important; }
}

/* ===== Mobile/tablet (<1024px): footer gọn, dễ đọc ===== */
@media (max-width: 1023px) {
	/* Header mobile: giữ nền trắng như cũ (người dùng chọn lại nền trắng) */
	#headerContent .banner > * { position: relative; z-index: 1; }

	/* Footer */
	#footerContent {
		padding: 28px 16px 12px !important;
		background: linear-gradient(#2db411, #249a0c) !important;
		text-align: left;
	}
	#footerContent td[rowspan] { text-align: center; }
	#footerContent td[rowspan] img,
	#footerContent td[rowspan] img.footer-logo { width: 250px !important; max-width: 100%; height: auto !important; margin: 0 auto 12px !important; padding: 0; background: none; }
	#footerContent td[colspan] { text-align: center; margin-bottom: 16px !important; }
	#footerContent td[colspan] span[style*="font-size"] { font-size: 17px !important; letter-spacing: .3px; }
	/* 2 khối thông tin (liên hệ / ngân hàng): không nền, ngăn bằng 1 đường kẻ, padding đều 16px */
	#footerContent tr + tr td {
		margin: 0 !important;
		padding: 16px 0 !important;
		border: 0 !important;
		border-top: 1px solid rgba(255,255,255,.25) !important;
		border-radius: 0;
		background: none;
		font-size: 14px !important;
		line-height: 1.65 !important;
	}
	#footerContent tr + tr td,
	#footerContent tr + tr td * { font-size: 14px !important; }
	#footerContent tr + tr td p { margin: 0 0 6px !important; }
	#footerContent tr + tr td p:last-child { margin-bottom: 0 !important; }
	#footerContent tr + tr td:last-child { padding-bottom: 10px !important; } /* khối cuối sát copyright hơn */
	#footerContent strong { color: #fff; }
	#footerContent a,
	#footerContent a .color_red { color: #fff59d !important; }
	#footerContent .wrapper > .footer-copyright { /* cùng độ ưu tiên với rule padding chung của copyright */
		margin-top: 0 !important;
		padding: 10px 0 0 !important;
		border-top: 1px solid rgba(255,255,255,.25);
		font-size: clamp(10.5px, 3.1vw, 12px) !important; /* 360px ~11.2px: dòng 1 vẫn vừa 1 hàng */
		line-height: 1.55;
		letter-spacing: -.1px;
		text-align: center;
		text-wrap: nowrap;
		opacity: .95;
	}
	/* Gọn 2 dòng: dòng 1 "© năm Bản quyền thuộc về <tên shop>.", dòng 2 "Thiết kế bởi …" */
	#footerContent .footer-copyright > span { display: block; }
	#headerContent .banner .site-logo img { max-height: 75px; width: auto; }
}

/* ===== Tiêu đề khối: một kiểu duy nhất cho cột chính + sidebar + "Sản phẩm cùng loại" (PC và mobile)
   thanh gradient xanh nhạt (menu_bg.gif), viền #C6EA64, icon bông hồng, chữ đậm in hoa màu tối ===== */
#vitri2 #widgetPTitle,
#vitri3 #widgetPTitle {
	height: auto !important;
	border: 1px solid #C6EA64 !important;
	border-radius: 5px;
	background: url(./images/menu_bg.gif) left repeat-x !important;
	background-size: auto 100% !important;
}
#vitri2 #widgetPTitle .title,
#vitri3 #widgetPTitle .title {
	height: auto !important;
	padding: 8px 14px 8px 42px !important;
	background: url(./images/icon_menu.png) 12px center no-repeat !important;
	color: #222 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 22px !important;
	text-transform: uppercase;
	letter-spacing: .2px;
}
#vitri2 #widgetPTitle .title a,
#vitri3 #widgetPTitle .title a { color: #222 !important; }
#vitri2 #widgetPTitle .title a:hover,
#vitri3 #widgetPTitle .title a:hover { color: #4f9a1c !important; }
#vitri2 #widgetPTitle .title div,
#vitri2 #widgetPTitle .title h1,
#vitri3 #widgetPTitle .title div { font: inherit !important; color: inherit !important; }
/* Sidebar: nội dung kéo lên chồng tiêu đề (margin âm cũ) -> tiêu đề luôn nằm trên */
#vitri3 #widgetPTitle { position: relative; z-index: 2; }
/* "Sản phẩm cùng loại" (chữ chèn bằng CSS) -> cùng kiểu thanh tiêu đề */
#vitri2 #newsContentShow:has(#products)::before {
	box-sizing: border-box;
	margin: 0 0 12px !important;
	padding: 8px 14px 8px 42px;
	border: 1px solid #C6EA64;
	border-radius: 5px;
	background: url(./images/icon_menu.png) 12px center no-repeat, url(./images/menu_bg.gif) left repeat-x;
	background-size: auto, auto 100%;
	color: #222 !important;
	font-size: 16px !important;
	font-weight: 700;
	line-height: 22px;
}
@media (max-width: 1023px) {
	#vitri2 #widgetPTitle .title,
	#vitri3 #widgetPTitle .title { padding: 7px 12px 7px 36px !important; background-position: 8px center !important; font-size: 15px !important; }
	#vitri2 #newsContentShow:has(#products)::before { padding: 7px 12px 7px 36px; background-position: 8px center, left top; font-size: 15px !important; }
}
/* Thanh trên mobile có 4 mục (thêm Viber): thu padding để vừa 1 hàng trên điện thoại */
@media (max-width: 1023px) {
	.rsp-topbar .rsp-tb-viber svg { width: 17px; height: 17px; flex-basis: 17px; }
}
@media (max-width: 767px) {
	#widgetPTitle.is-crumb .title{
		font-size: 11px !important;
	}
}
@media (max-width: 479px) {
	.rsp-topbar a { padding: 0 9px; gap: 5px; }
	.rsp-topbar a span { font-size: 12.5px !important; letter-spacing: .1px; }
}
@media (max-width: 374px) {
	.rsp-topbar a { padding: 0 6px; gap: 4px; }
	.rsp-topbar a span { font-size: 11.5px !important; }
}

/* ===== Breadcrumb: tiêu đề h1/h2 đầu cột nội dung (Sản phẩm » Danh mục, Tin tức, Liên hệ…) -> kiểu breadcrumb, không thanh nền.
   responsive.js gắn class .is-crumb và đưa ra hàng .crumb-row riêng
   (đặt sau rule tiêu đề khối để thắng). Ảnh mũi tên address_arrow.gif ẩn, thay bằng dấu › ===== */
#widgetPTitle.is-crumb {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
}
#widgetPTitle.is-crumb .title {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
	padding: 2px 0 !important;
	background: none !important;
	color: #777 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 20px !important;
	text-transform: none !important;
	letter-spacing: 0;
}
#widgetPTitle.is-crumb .title img { display: none !important; }
#widgetPTitle.is-crumb .title a { float: none !important; color: #4f9a1c !important; text-decoration: none; }
#widgetPTitle.is-crumb .title a:hover { text-decoration: underline; }
#widgetPTitle.is-crumb .title a + a::before,
#widgetPTitle.is-crumb .title img + a::before { content: "›"; margin: 0 8px; color: #aaa; display: inline-block; }
#widgetPTitle.is-crumb .title a:last-of-type { color: #333 !important; font-weight: 400 !important; } /* không in đậm */
#widgetPTitle.is-crumb .title .crumb-cur { color: #333; }
#widgetPTitle.is-crumb .title .crumb-cur::before { content: "›"; margin: 0 8px; color: #aaa; display: inline-block; }
/* "Trang chủ" đầu breadcrumb (chữ CSS, link trang chủ đã có ở menu/logo) */
#widgetPTitle.is-crumb .title::before { content: "Trang chủ"; color: #777; }
#widgetPTitle.is-crumb .title > a:first-child::before { content: "›"; margin: 0 8px; color: #aaa; display: inline-block; }
/* Hàng breadcrumb riêng, rộng hết khung (JS chuyển từ cột nội dung ra trước #vitri2) -> sidebar ngang hàng nội dung */
.crumb-row { clear: both; width: 100%; margin: 0 0 14px; }
/* Trang có breadcrumb: khối đầu của cột nội dung và sidebar cùng bắt đầu sát dưới breadcrumb (bỏ margin-top lệch 10/12/16px) */
body:has(.crumb-row) #vitri3 > #widgetP:first-child > #widgetPTitle { margin-top: 0 !important; } /* chỉ tiêu đề: #widgetPContent cần giữ margin âm kéo lên dưới tiêu đề */
body:has(.crumb-row) #vitri2 > #widgetP:first-child #newsContentShow:has(#products) { margin-top: 0 !important; }
body:has(.crumb-row) #vitri2 > #widgetP:first-child > #widgetPContent > #news:first-child { margin-top: 0 !important; }
body:has(.crumb-row) #vitri2 #pageViewContent > #widgetP:first-child > #widgetPContent > div:first-child > #news:first-child,
body:has(.crumb-row) #vitri2 #pageViewContent > #widgetP:first-child > #widgetPContent > div:first-child > #newsContentShow > #news:first-child { margin-top: 0 !important; }
body:has(.crumb-row) #vitri2 #pageViewContent > #widgetP:first-child #newsContentShow { padding-top: 0 !important; }
/* Trang danh sách: thanh tiêu đề lưới sản phẩm lấy tên trang (data-label do responsive.js gắn) */
#vitri2 #newsContentShow[data-label]:has(#products)::before { content: attr(data-label); }
@media (max-width: 767px) {
	#widgetPTitle.is-crumb .title{
		font-size: 12px !important;
	}
	.crumb-row{
		margin-bottom: 0;
		margin-top: 5px;
	}
	#vitri2 > #widgetP:first-child{
		margin-top: 0 ;
	}

	#widgetPTitle.is-crumb .title a{
		font-size: 12px !important;
	}
}