/* Styles for pageHome layout and category links (moved from home.php) */
.pageHome-row { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.pageHome-left { flex: 0 0 280px; }
@media (max-width: 820px) {
  .pageHome-row { gap: 10px; }
  .pageHome-left { max-width: 220px; }
}
@media (min-width: 651px) and (max-width: 820px) {
  .pageHome-title { padding-left: 10px; }
}
@media (max-width: 992px) {
  .pageHome-left { max-width: 200px; }
  .pageHome-category-name-inline, .pageHome-category-name { font-weight: normal !important; }
}
@media (max-width: 650px) {
  .pageHome-left { display: none; }
  .pageHome-feed-header { padding-left: 5px !important; padding-right: 5px !important; }
  .pageHome-post { padding-left: 5px !important; padding-right: 5px !important; }
  .js-post { padding-left: 5px !important; padding-right: 5px !important; }
}
.pageHome-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #e5e5e5; }
.pageHome-category-list { display: flex; flex-direction: column; gap: 8px; }
.pageHome-category-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: #333; transition: background-color 0.2s; }
.pageHome-category-link:hover { background-color: #f5f5f5; }
.pageHome-category-icon { width: 32px; height: 32px; object-fit: contain; }
.pageHome-category-name { font-size: 14px; font-weight: 500; }
.pageHome-right { flex: 1; min-width: 0; }
.pageHome-feed { padding: 0; }
.pageHome-feed-header { padding: 15px 20px; border-bottom: 1px solid #e5e5e5; background: #fff; }
.pageHome-feed-title { font-size: 18px; font-weight: 600; color: #333; margin: 0; display: flex; align-items: center; gap: 8px; }
.pageHome-feed-icon { color: #222 }
.pageHome-posts { display: flex; flex-direction: column; }
.pageHome-post { padding: 16px 20px; border-bottom: 1px solid #e5e5e5; transition: background-color 0.2s; cursor: pointer; }
.pageHome-post:hover { background-color: #f9fafb; }
.pageHome-post-row { display: flex; gap: 12px; }
.pageHome-post-author { flex-shrink: 0; }
.pageHome-post-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.pageHome-post-content { flex: 1; min-width: 0; }
.pageHome-post-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pageHome-post-author-name { font-weight: 600; color: #0f172a; text-decoration: none; font-size: 14px; }
.pageHome-post-dot, .pageHome-post-time { color: #6b7280; font-size: 13px; }
.pageHome-post-title { color: #C6511F !important; font-weight: 500; font-size: 15px; text-decoration: none; display: block; margin-bottom: 8px; line-height: 1.4; }
.pageHome-post-title:hover { color: #A03E17 !important;}
/* Styles for followed post images (moved from home.php) */
img.followed-post-image {
	width: auto !important;
	height: auto !important;
}
img.followed-post-image.pageHome-post-image {
    max-width: 200px !important;
    max-height: 200px !important;
}
/* Additional inline styles moved from home.php */
.pageHome-category-link-inline { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: #333; transition: background-color 0.2s; }
.pageHome-category-link-inline:hover { background-color: #f5f5f5; }
.pageHome-category-icon-inline { width: 32px; height: 32px; object-fit: contain; }
.pageHome-category-name-inline { font-size: 14px; font-weight: 500; }
.pageHome-post-image-link { display: block; margin-bottom: 8px; }
.pageHome-post-image { height: auto; object-fit: cover; border-radius: 12px; border: 1px solid #e5e7eb; max-width: 100%; }
.pageHome-post-price { font-weight: 600; color: #D97706; font-size: 16px; margin-top: 8px; }
.pageHome-load-more-container { text-align: center; padding: 20px; border-top: 1px solid #e5e7eb; background: #f9fafb; }
.pageHome-load-more-btn { color: var(--color-primary, #D8432E); text-decoration: none; font-weight: 500; font-size: 14px; background: none; border: none; cursor: pointer; padding: 0; }
.pageHome-load-more-btn:hover { color: var(--primary-color-hover, #C62D2D); text-decoration: underline; }
/* Styles for JavaScript-generated posts */
.js-post { padding: 16px 20px; border-bottom: 1px solid #e5e7eb; transition: background-color 0.2s; cursor: pointer; }
.js-post:hover { background-color: #f9fafb; }
.js-post-row { display: flex; gap: 12px; }
.js-post-author { flex-shrink: 0; }
.js-post-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.js-post-content { flex: 1; min-width: 0; }
.js-post-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.js-post-author-name { font-weight: 600; color: #0f172a; text-decoration: none; font-size: 14px; }
.js-post-dot, .js-post-time { color: #6b7280; font-size: 13px; }
.js-post-title { color: #0f172a; font-weight: 500; font-size: 15px; text-decoration: none; display: block; margin-bottom: 8px; line-height: 1.4; }
.js-post-image-link { display: block; margin-bottom: 8px; }
.js-post-image { height: auto; object-fit: cover; border-radius: 12px; border: 1px solid #e5e7eb; }
.js-post-price { font-weight: 600; color: #D97706; font-size: 16px; margin-top: 8px; }
/* Styles for preadd-streets-grid and related elements (moved from ajax_load_categories.php) */
.preadd-streets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.street-card { --bg: #E9D5CA; --fg: #2b2b2b; display: flex; align-items: center; justify-content: center; min-height: 72px; border: 1px solid rgba(0,0,0,.06); border-radius: 12px; background: radial-gradient(120% 180% at 10% 10%, rgba(255,255,255,.8) 0%, rgba(255,255,255,.3) 30%, rgba(255,255,255,0) 60%), var(--bg); color: var(--fg); font-weight: 600; letter-spacing: .2px; text-shadow: 0 1px 0 rgba(255,255,255,.25); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.street-card:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.08); border-color: rgba(0,0,0,.12); }
.street-name { padding: 10px 12px; text-align: center; }
.preadd-categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cat-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #ececec; border-radius: 10px; background: #fff; cursor: pointer; transition: box-shadow .12s ease, border-color .12s ease; }
.cat-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); border-color: #e2e2e2; }
.cat-index { min-width: 28px; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #efe8d8; color: #675d4a; font-weight: 700; font-variant-numeric: tabular-nums; }
.cat-name { color: #2b2b2b; font-weight: 600; }
/* Site menu styles moved from menu_categories.php */
.site-menu-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 18px;
	margin: 0 0 10px 0;
}
.site-menu-item {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.04);
	padding: 8px 12px;
	transition: box-shadow 0.15s;
}
.site-menu-item:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.site-menu-icon {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	margin-right: 12px;
	object-fit: cover;
}
.site-menu-link {
	font-size: 14px;	
	color: #222;
	text-decoration: none;
	flex: 1;
}
:root {
	/* PRIMARY – Màu chính thương hiệu */
	--primary-color: #DD3333;      /* #DD3333 (đỏ thương hiệu), Dùng cho: nút chính, giá sản phẩm, highlight. */
	--primary-color-hover: #C62D2D; /* đậm 10–12% */
	--primary-color-active: #A82323; /* đậm hơn khoảng 18–20% */
	/* SECONDARY – Màu điểm nhấn phụ trợ */
	--secondary-color: #EBD2A8;      /* Tone vàng – beige vintage để kết hợp với đỏ thương hiệu, Dùng cho Button phụ, Các tag nhấn nhẹ, Card background nhạt */
	--secondary-color-hover: #D8BE92;  /* đậm 10–12% */
	--secondary-color-active: #C0A47A;  /* đậm hơn khoảng 18–20% */
	/* ACCENT – Màu bổ trợ để tạo chiều sâu, đặc biệt khi cần tương phản nhẹ.
	Dùng cho: Icon, Border,	Text tiêu đề nhỏ, Bảng điều hướng */
	--accent-color: #8C6847; /* nâu gỗ */
	--accent-light: #F4E7D6; /* nhạt hơn để làm nền hoặc highlight nhẹ */
	--accent-dark: #5A3D2E; /* đậm hơn để tạo chiều sâu */

	--gradient-vintage: linear-gradient(135deg, #e6dfd4 0%, #d8cfc0 100%); /* nâu gỗ */
  	--gradient-vintage-hover: linear-gradient(135deg, #e0c8a8 0%, #d1b890 100%);
  
	--bg-ivory: #FFFDF9;           /* primary page background */
	--bg-ivory-alt: #FDFBF8;       /* subtle variant */
	--footer-yellow-1: #FFF1B8;    /* footer gradient top */
	--footer-yellow-2: #FFE89C;    /* footer gradient bottom */
	--border-muted: #E5E5E5;       /* light borders */
	--border-muted-alt: #DADADA;   /* alternate light border */
	--grid-divider: #E5E5E5;       /* matches home grid divider */
	--footer-divider-strong: rgba(139,107,0,0.35); /* lighter vintage gold-brown */
}
html {overflow-x:auto}
body {font-family: "Lexend Deca", Helvetica, 'Roboto', Arial, sans-serif; 
	font-size: 14px; text-align: left; color:#333333; line-height: normal;
	background-color:#fff; margin: auto; max-width: 100% !important; 
	transition: margin-left 0.3s ease-in-out;
}
body.modal-open {
	overflow: hidden; /*padding-right: 15px;*/
}
/* Body shift when left panel opens */
body.panel-open {
	margin-left: 320px;
}
/* Overlay for left panel */
#panelOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: none;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}
#panelOverlay.show {
	display: block;
	opacity: 1;
}
.nobr {white-space: nowrap}
.noscript {padding:5px 15px; background-color: #cccc99;}
.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	  -webkit-user-select: none; /* Safari */
	   -khtml-user-select: none; /* Konqueror HTML */
		 -moz-user-select: none; /* Old versions of Firefox */
		  -ms-user-select: none; /* Internet Explorer/Edge */
			  user-select: none; /* Non-prefixed version, currently 
									supported by Chrome, Edge, Opera and Firefox */
}
/* common css */
.form-message {
	color: #222; margin: 0px 0px 5px 5px; background-color: #ffffcc; border:1px solid #ffcc00;
}
.form-error  {
	color: #ff0000; margin: 0px 0px 5px 5px; background-color: #fff; border:1px solid #fff;
}

input, textarea, select { background-color: #fff; border-radius: 5px; font-size:16px; padding:5px; color: #222; }
input[type="button"], input[type="submit"] , select { cursor: pointer; }
button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
@media only screen and (min-width: 760px) { 	
	input[type="text"], input[type="password"], select {
		padding:8px;
	}
}
a { font-size: 14px; text-decoration: none	}
a:hover {  color: #CC0000; text-decoration:none }
a.large { font-size: 16px !important;}
a.medium { font-size: 14px !important;}
a.small { font-size: 13px; color: #222; 	text-decoration: none }
a.smallComment { font-size: 12px; color: #AAA; 	text-decoration: none }
a.smallComment:hover { color: #C6511F; text-decoration:none}
a.medium { font-size: 15px; color: #222; 	text-decoration: none }
a.medium:hover { color: #C6511F; text-decoration:none}
a.smallName { font-size: 13px; color: #006678; 	text-decoration: none }
a.smallName:hover { color: #C6511F; text-decoration:none}
a.mediumName { font-size: 16px; color: #222; text-decoration: none }
a.mediumName:hover { text-decoration:underline}
a.largeName { font-size: 18px; color: #222; text-decoration: none }
a.largeName:hover { color: #C6511F; text-decoration:none}
.blue {color: #0047BC;}
a.blue:hover {text-decoration: underline;}
a.menu { font-size: 13px; color: #0000ff; text-decoration: none;}
a.menu:hover { color: #C6511F; }
a.menu i {
	margin-right: 4px; vertical-align: middle;
}
.small { font-size: 12px;  	text-decoration: none }
a.small2 { font-size: 13px; color: #1a4d9a; 	text-decoration: none }
a.small2:hover { color: #C6511F; text-decoration:none}
/* old style pagination */
.pagination {
  list-style: none;
  display: inline-block;
  padding: 0;
 
  
}
.pagination li {
  display: inline;
  text-align: center;
}
.pagination a {
  
  display: inline-block;
  font-size: 14px;
  text-decoration: none;
  padding: 5px 12px;
  color: #000;
  margin-left: -1px;
  border: 1px solid transparent;
  line-height: 1.5;
}
.pagination a.active {
  cursor: default;
}
.pagination a:active {
  outline: none;
}
.txtName {	
	color:#3030AA;	
}
.txtMsg {	
	color:#0000FF;	
}
/********************* BANNER / LOGO *********************/
.weblogo {
	width:128px;
	height:23px;
	display: block;
	margin: 0 auto; margin-top: -6px;
}
.logo-wrap {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 8px; /* balanced tap area */
	border-radius: 6px;
	text-decoration: none;
}
.logo-wrap:hover {
	background-color: #f2f2f2;
}

.logo-wrap .weblogo:focus-visible,
.header-top .weblogo:focus-visible {
	outline: 2px solid rgba(0, 0, 0, 0.3);
	outline-offset: 4px;
}

.logo-brand {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}

.logo-slogan-badge {
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	border: 0;
	color: var(--hero-badge-text, #8b6b00);
	font-size: 8.5px;
	letter-spacing: 0.085em;
	text-transform: uppercase;
	font-weight: 600;
	box-shadow: none;
}


.boxLogo {
	float:left; margin:0 0 0 12px; padding: 0;
	display: flex; align-items: center; /* vertical align with banner */
}

.boxMenuLogo {	
	display: flex;
	align-items: center;
	height: 100%;	
}
.boxSearchTop {
	padding:5px; display: inline-block; margin:5px 0px 5px 0px;margin-left: auto;
	width: calc(100% - 400px); max-width: 300px; flex-grow: 1;
}


.searchInput {
	font-size: 16px;
}
.hdrLogin[user-logged-in='0'] {
	width:auto; height: auto;float: right; clear: both;	display: flex;
	padding:0px 5px 0px 5px; margin:0px 12px 0px 5px;
	align-items: center;
	justify-content: flex-end; /* hoặc space-between nếu cần căn đều */
	gap: 8px; /* khoảng cách giữa input và nút */
	position: fixed;
	z-index: 1000;
}
#hdrLogin[user-logged-in='0'] {
	display: none !important;
}
.popup-close {
	position: absolute;
	top: 8px;
	right: 8px;
}
@media only screen and (max-width: 800px) {		
	
	.header-user-info .accountBtnAddTxt {
		display: none;
	}	
	.header-user-info .accountBtnAddIcon {
		margin-right: 0px;
	}
	.accountBtnAdd i {
		margin-right: 0px;
	}
	
}
@media only screen and (max-width: 780px) {	
	.boxSearchTop {
		width: calc(100% - 300px);
	}	
	.banner-top-inner a.hdrloginlink {
		min-width: auto !important;
		padding: 5px 8px !important;
	}
}

@media only screen and (max-width: 718px) {
	
	.header-user-info .accountBtnAddTxt {
		display: none;
	}
	.header-user-info .accountBtnAddIcon {
		margin-right: 0px;
	}
}
@media only screen and (max-width: 650px) {	
	
	
	.banner-top-inner[user-logged-in='1'] .hdrLogin {
		order: 3;
  		
	}
	#hdrSubBanner{
		display: block; float: right;		
		width: auto;
		max-width: 280px;
		margin:-5px -5px 0px 30px;
	}
	#hdrLoginContent {		
		display: none;
		position: fixed; /* Stay in place */
		z-index: 10; /* Sit on top */
		left: 0;
		top: 0;
		margin-left: 0px;		
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		background-color: rgb(0,0,0); /* Fallback color */
		background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
		margin: 0px auto; /* 15% from the top and centered */
		padding: 25px 15px; 
		border-bottom: 1px solid #ddd; background-color: #fff;
	}
	.hdr-login-logo {
		display: block; text-align: center; margin-top: -8px; padding-bottom: 12px;
		border-bottom: 1px solid #ddd;  		
	}
	#btnLogin {
		padding:8px 2px 8px 2px; width: 100%; margin-bottom: 10px;
	}
	.popup-close {
		position: absolute;
		top: 6px;
		right: 17px;
	}
	.header-user-info .accountBtnAdd {
		display: none;
	}
	.banner-top-inner a.hdrloginlink {
		min-width: auto !important;
		padding: 5px 8px !important;
	}
}

@media only screen and (max-width: 650px) {
	
	
	
	.hdrLogin {
		margin-left: auto;
	}
	#hdrLogin[user-logged-in='0'] {
		display: none !important;
	}
	
	a.hdrloginlink {
		display:inline;
	}
}


@media only screen and (max-width: 840px) {
	.frmSearchBanner {			
		border: 0px solid currentColor;	margin-top: 0px;	
	}
	.seach-banner {	
		width: 100%; margin-top: 0px !important; padding: 0px 15px 10px 15px;
	}
	.seach-banner .searchbox {	
		font-size: 16px;
	}
	
}
@media only screen and (max-width: 750px) {	
	.boxLogo1 {
		margin:20px 0px 13px 7px;
	}
}
@media only screen and (max-width: 720px) {
	
	.loginLabel {
		display: none;
	}
	
}

@media only screen and (max-width: 615px) { 	
	
	#hdrSubBanner {			
		display: block; float: right;		
		width: auto;
		max-width: 280px;
		margin:-5px -5px 0px 30px;
	}
	.title { font-size: 22px; font-weight: bold;}	
}

@media only screen and (max-width: 535px) { 	

	#hdrSubBanner {			
		display: block; float: right;		
		width: auto;
		max-width: 280px;
		margin:-5px -5px 0px 30px;
	}
	
}
@media only screen and (max-width: 530px) {
	.boxBannerMailbox {
		margin-left: 0px; margin-right: 0px;
	}
	
	.accountIcon { margin-left: 0px;}
	
	
	.banner-nav .scroll-nav-content {
		display: none;		
	}
	.banner-nav {
		border-top:0px;
	}
	
	
	
	.hdrlink {
		color: #222 !important; font-size: 15px !important;
	}
	
	.scroll-nav-logo-item div {			
		margin:3px 8px 0px 8px;		  
  	}
	.title { color: #555; line-height: 1.3; font-size: 20px; font-weight: bold; }
}
@media only screen and (max-width: 420px) {	
	.likeLabel { display: none;}	
	.buttonLike img { margin-right: 0px !important;}
}
@media only screen and (max-width: 399px) {
	
	#hdrSubBanner{
		display: block; float: right;		
		width: auto;
		max-width: 280px;
		margin:-5px -5px 0px 10px;
	}		
	
	f
	.boxBannerMailbox {
		margin-right: 0px;
	}	
	
	
}


@media only screen and (max-width: 365px) {		
	.header-user-info {
		padding-right: 0px;
	}
	.header-user-info .accountIcon {
		margin-right: 0px;
	}
}
	
a.hdrloginlink {
	color:#222;  font-weight:normal; text-decoration:none;
	display: inline-flex; border-radius: 5px;
  	align-items: center; gap: 8px; margin-left: 5px; padding: 10px;
}
a.hdrloginlink:hover {
	background-color: #f2f2f2;
}
.pmb-modal-overlay {
	display: none;
	position: fixed;
	transition: opacity 0.2s ease;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
}
.pmb-hdr-login {		
	display: none;
	position: fixed; /* Stay in place */
	z-index: 5; /* Sit on top */
	top: 64px;
  	right: 32px;
	margin-left: 0px;	
	width: auto; /* Full width */
	height: auto; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	border-radius: 5px;
	margin: 0px auto; /* 15% from the top and centered */
	padding: 50px 35px 25px 35px; 
	border: 1px solid #ccc; background-color: #fff;
}
.popup-close .close-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 16px;
	border: 1px solid transparent;
	background: transparent;
	text-decoration: none;
	color: #333;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.popup-close .closebtn {
	display: block;
	font-size: 22px;
	line-height: 0.9;
	margin: 0;
	padding: 0;
	color: inherit;
	transform: translateY(-1px);
}
.popup-close .close-btn:hover {
	background-color: #f2f2f2;
	border-color: #e6e6e6;
	color: #cc0000;
}
.popup-close .close-btn:focus-visible {
	outline: 2px solid #cc0000;
	outline-offset: 2px;
}
button[type="submit"].btnsearch {
	text-indent: -999px;
	overflow: hidden;
	width: 40px;	
	margin: 0;
	border: 1px solid transparent;
	border-top-left-radius: 0px; border-bottom-left-radius: 0px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
	cursor: pointer; opacity: 0.7;
}
  
button[type="submit"].btnsearch:hover {
	opacity: 1;
}
button[type="submit"].btnsearch:focus,
input[type="search"].btnsearch:focus {
	box-shadow: 0 0 3px 0 #1183d6;
	border-color: #1183d6;
	outline: none;
}
.btnsearch {
	border-radius: 2px;
}
.frmSearchBanner {
	color: #222;
	display: flex;
	padding: 0px;	
	border-radius: 3px;
	border: 1px solid #ccc;	 margin-top: 20px;
	box-shadow: 0 0 5pt 0.5pt #D3D3D3;
}
.seach-banner {	
	margin-top: 0px !important; padding: 0px 15px 10px 15px;
}
.seach-banner .searchbox {
	background: #fff;
	margin: 0px;
	padding: 3px 6px 2px 6px;
	font-size: 14px;
	color: #222;
	border: 0px;
	border-radius: inherit;		
	
	width: -webkit-calc(100% - 45px);
	width: calc(100% - 45px);
	max-width: -webkit-calc(100% - 45px);
	max-width: calc(100% - 45px);
	appearance: none;
	-webkit-appearance:none; -webkit-border-radius:0;
	border-top-right-radius: 0px; border-bottom-right-radius: 0px;
	border-top-left-radius: 3px; border-bottom-left-radius: 3px;
}
.seach-banner .searchbox:active {			
	border: 1px solid #ccc;	
}
input[type="search"]::placeholder {
	color: #bbb;
}
#email {
	width:150px; font-size:14px; padding:6px 3px; margin-right: 2px; outline: 0;border: 1px solid #000; border-radius: 3px;
	font-size:16px;	padding: 8px; display: block; width: 100%; margin-bottom: 12px; 
}
#password {
	width:120px; font-size:14px; padding:6px 3px; margin-right: 2px; outline: 0;border: 1px solid #000; border-radius: 3px;
	font-size:16px;	padding: 8px; display: block; width: 100%; margin-bottom: 12px; 
}
input.txtEmail {
	width:160px;box-shadow: 0 0 5pt 0.5pt #D3D3D3;
}
input.txtPwd {
	width:80px;	box-shadow: 0 0 5pt 0.5pt #D3D3D3;
}
@media only screen and (max-width: 450px) {
		input.txtEmail {
			width:100px;
		}
		input.txtPwd {
			width:60px;
		}
}
.toggle-password {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #666;
}
.toggle-password:hover {
	opacity: 0.7;
  	color: #b7791f;
}
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	overflow: hidden;
	white-space: nowrap;
}
.separator {
	margin: 0 8px;
	color: #999;
}
.boxRegister.show {
	display: block;
}
.boxMenuLogo img {
	width: 22px; height: 22px;
}
#btnLogin {
	
	margin-bottom: 10px; margin-top: 12px;
}
/* Left Panel Styles for Category Menu */
#hdrCategory {
	position: fixed;
	top: 0;
	left: -480px; /* Hidden by default */
	width: 480px;
	height: 100vh;
	background-color: #fff;
	box-shadow: 2px 0 8px rgba(0,0,0,0.2);
	z-index: 1001;
	overflow-y: auto;
	overflow-x: hidden;
	transition: left 0.3s ease-in-out;
	display: none; /* Hidden by default */
}

#hdrCategory.show {
	left: 0; /* Slide in from left */
	display: block; /* Show when .show class is added */
}

.hdrCategoryInner {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #fff;
	padding: 0;
	margin: 0;
}

.hdrCategoryHeader {
	background: #E0D8B0;
	color: #3A2F1B;
	padding: 15px 20px;
	text-align: center;
	position: relative;
	flex-shrink: 0;
}

.hdrCategoryHeader .close-btn {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	cursor: pointer;
}

.hdrCategoryHeader .closebtn {
	font-size: 24px;
	color: #000;
	text-decoration: none;
	line-height: 1;
	display: block;
}
.hdrCategoryContent {
	display: flex !important;
	flex-direction: column;
	gap: 0;
	padding: 12px;
	box-sizing: border-box;
	background: white;
	overflow-x: hidden;
	flex: 1;
	overflow-y: auto;
}
/* Popup-specific row/item layout: target AJAX-loaded content inside the category popup */
#hdrCategoryContent .w3-row {
	display: flex !important;
	flex-direction: row; /* ensure icon and text lay out horizontally */
	align-items: center;
	padding: 8px 10px;
	background: transparent;
	border-bottom: 1px solid #eee;
}
#hdrCategoryContent .colums-left {
	flex: 0 0 48px !important;
	width: 48px !important;
	margin-left: 0 !important;
	text-align: center;
	order: -1; /* show icon before name despite DOM order */
}
#hdrCategoryContent .colums-right-wrapper {
	flex: 1 1 auto !important;
	width: auto !important;
	float: none !important;
}
#hdrCategoryContent .colums-right a {
	display: block;
	padding: 4px 0;
	font-weight: 500;
	color: #333;
	text-decoration: none;
	margin-left: 5px !important; /* centralize left spacing previously inline in markup */
}
#hdrCategoryContent .colums-right a:hover { color: #cc4a26; }
/* Icon sizing/spacing inside popup: remove left-margin from inline styles and add right gap */
#hdrCategoryContent .colums-left a img,
#hdrCategoryContent .colums-left img {
	margin-left: 0 !important;
	margin-right: 1px !important; /* reduced another 50% (practical integer) */
	width: auto !important;
	height: 28px !important;
	max-width: 42px !important;
	object-fit: contain !important;
}

/* Reduce extra left margin on the text column so icon and name sit closer */
#hdrCategoryContent .colums-right {
	margin-left: 0 !important; /* anchor now carries the left spacing */
}
/* Removed legacy/unused grouped-category CSS blocks - cleaned per user request */

/* Responsive styles for mobile */
@media only screen and (max-width: 768px) {
	/* On mobile, panel takes full width */
		#hdrCategory {
			width: 95%;
			max-width: 480px;
			left: -95%;
			display: none; /* Hidden by default */
		}
	
	#hdrCategory.show {
		left: 0;
		display: block; /* Show when .show class is added */
	}
	
	/* On mobile, don't shift body */
	body.panel-open {
		margin-left: 0;
	}
}

@media only screen and (max-width: 480px) {
	/* On very small screens, use full width */
	#hdrCategory {
		width: 100%;
		max-width: none;
		left: -100%;
		display: none; /* Hidden by default */
	}
	
	#hdrCategory.show {
		display: block; /* Show when .show class is added */
	}
}

.hdrCategoryTopCta {
	padding: 12px;
	background-color: #f9f9f9;
	border-bottom: 1px solid #e0e0e0;
}

.hdrCategoryTopCta a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	background-color: #4CAF50;
	color: white !important;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 500;
}

.hdrCategoryTopCta a:hover {
	background-color: #45a049;
}

/* Category arrow button for submenu */
.colums-arrow {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
}

.submenu-trigger {
	background: transparent;
	border: none;
	padding: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	transition: background-color 0.2s, color 0.2s;
	border-radius: 4px;
}

.submenu-trigger:hover {
	background-color: #f0f0f0;
	color: #333;
}

.submenu-trigger i {
	font-size: 18px;
	line-height: 1;
}

/* Make category item relative for arrow positioning */
.category-item {
	position: relative;
	transition: background-color 0.2s;
	font-size: 14px; /* Reduced font size */
    font-weight: normal; /* Removed bold styling */
}

/* Highlight category when submenu is active */
.category-item.submenu-active {
	background-color: #f5f5f5;
	border-left: 3px solid #cc4a26;
}

/* Submenu overlay panel */
#hdrCategorySubmenu {
	position: fixed;
	top: 0;
	left: 480px; /* Position next to main menu (480px width) on desktop */
	width: 480px; /* Same width as main menu on desktop */
	height: 100vh;
	background-color: #fff;
	box-shadow: -2px 0 8px rgba(0,0,0,0.2);
	z-index: 1002; /* Higher than main panel */
	overflow-y: auto;
	overflow-x: hidden;
	transform: translateX(-100%); /* Hidden to the left initially */
	transition: transform 0.3s ease-in-out;
}

#hdrCategorySubmenu.show {
	transform: translateX(0); /* Slide in from left */
}

/* When main menu is hidden (mobile), submenu moves to left edge and fullwidth */
#hdrCategorySubmenu.fullwidth {
	left: 0;
	width: 100%;
}

.hdrCategorySubmenuInner {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #fff;
}

.hdrCategorySubmenuHeader {
	background: #C8BFA0; /* Slightly darker than main header */
	color: #3A2F1B;
	padding: 15px 20px;
	text-align: left;
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.hdrCategorySubmenuHeader .back-btn,
.hdrCategorySubmenuHeader .close-btn {
	background: transparent;
	border: none;
	padding: 5px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #3A2F1B;
	font-size: 20px;
	line-height: 1;
	flex-shrink: 0;
}

.hdrCategorySubmenuHeader .back-btn:hover,
.hdrCategorySubmenuHeader .close-btn:hover {
	background-color: rgba(0,0,0,0.1);
	border-radius: 4px;
}

.hdrCategorySubmenuHeader .close-btn {
	font-size: 18px;
}

.hdrCategorySubmenuHeader .title {
	flex: 1;
	font-weight: bold;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hdrCategorySubmenuContent {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 12px;
	box-sizing: border-box;
	background: white;
	overflow-x: hidden;
	flex: 1;
	overflow-y: auto;
}

.submenu-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 15px;
	color: #333;
	text-decoration: none;
	border-bottom: 1px solid #eee;
	transition: background-color 0.2s;
}

.submenu-item i {
	font-size: 16px;
	color: #888;
	transition: color 0.2s;
}

.submenu-item:hover {
	background-color: #f5f5f5;
	color: #cc4a26;
}

.submenu-item:hover i {
	color: #cc4a26;
}

.submenu-loading {
	text-align: center;
	padding: 20px;
	color: #666;
}

/* Mobile responsive for submenu */
@media only screen and (max-width: 768px) {
	#hdrCategorySubmenu {
		left: 0; /* Start from left edge on mobile */
		width: 100%;
		transform: translateX(-100%); /* Hidden to the left */
	}
	
	#hdrCategorySubmenu.show {
		transform: translateX(0);
	}
	
	#hdrCategorySubmenu.fullwidth {
		left: 0;
		width: 100%;
	}
}

@media only screen and (max-width: 480px) {
	#hdrCategorySubmenu {
		left: 0; /* Start from left edge on mobile */
		width: 100%;
		transform: translateX(-100%); /* Hidden to the left */
	}
	
	#hdrCategorySubmenu.show {
		transform: translateX(0);
	}
	
	#hdrCategorySubmenu.fullwidth {
		left: 0;
		width: 100%;
	}
}

.boxLoginLink {
	margin-top: 10px;
	text-align: left;
	font-size: 14px;
  }
  
  .rememberme-wrap {
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 6px;
  }
  .rememberme-wrap input[type="checkbox"] {	
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin: 0 !important;
  }
  .rememberme-wrap label {	
	margin: 0 !important; font-weight: 500 !important;
  }
  .link-options a {	
	white-space: nowrap;
  }
  .link-options {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  
  .separator {
	color: #aaa;
  }
  /* Improve spacing between remember checkbox and links inside login modal (desktop & mobile) */
  #hdrLoginContentModal .boxLoginLink .rememberme-wrap {
    margin-bottom: 12px; /* add gap before links */
  }
  #hdrLoginContentModal .boxLoginLink .link-options {
    margin-top: 6px; /* small separation above links */
  }
  
#hdrTool {
	display:none; border-color:#EDECE8; padding:8px;
}

.header-user-info {	
	padding: 5px;
}
.header-user-info a.menu {
	
	padding: 8px 5px; font-size: 15px; color:#000;
}
.header-user-info a.menu:hover {
	background-color: #f5f5f5;
	color:#BE2829 ;
}
.boxBannerMailbox {
	margin-left: 10px;
}
.banner-acc-name {
	font-size: 13px;
	font-size: 15px;
}

.accountBtnAdd {
	display: inline-block;
	padding: 7px 14px !important;
}
.accountBtnAddTxt {
	font-size: 14px;
}
.accountBtnAdd i {
	margin-right: 4px; vertical-align: middle; font-size: 18px;	
}
.accountBtnAddIcon {
	top: -2px; color:#3A2F00; font-size: 16px; position: relative; margin-right: 6px; width: 16px; height: 16px;
}
.mailboxIcon {
	width: auto; height: auto; margin-right: 10px; margin-left: 5px; font-size: 20px; line-height: 1; color: #444;
}
.accountIcon {
	width: 16px; height: 16px; margin-top: -5px;  margin-right: 2px; margin-left: -2px;
}


.hdr-login-logo {
	display: none; margin-bottom: 10px;
}
.header-user {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.user-icon {
	font-size: 20px;
	color: #555;
	cursor: pointer;         
	padding: 0px;
	
	transition: background-color 0.2s ease;
}
.search-icon {
	font-size: 18px;
	color: #8b6b00;
	cursor: pointer;
	transition: color 0.2s ease;
	line-height: 1;
}


.searchInputTop {
	width: 100%; font-size: 16px; padding: 4px; border-radius: 6px;
}
/********************* FOOTER *********************/
.footer {
    background-color: #F9F7F2; /* Kem nhạt */
    margin-top: 20px;          /* Chỉ padding trên */
    padding-bottom: 0;          /* Sát đáy */
    font-size: 13px;
    color: #555;	
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	align-items: stretch; /* ensure all columns match height on desktop */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    gap: 15px;
}

.footer-logo,
.footer-links,
.footer-info {
    flex: 1 1 30%;
    min-width: 220px; /* Giữ cột không bị bóp quá nhỏ */
	margin-bottom: 0; /* handled in mobile breakpoint below */
	display: flex;       /* stack content vertically and allow stretching */
	flex-direction: column;
}

.footer-logo,
.footer-links {
    padding: 15px 20px;
    border-radius: 8px;
}

.footer-info {
	/* visually blend with footer: no filled card */
	background-color: transparent;
	padding: 15px 20px;
	border-radius: 8px;
	box-shadow: none;
	margin: 0;
	position: relative;
}

/* subtle vertical separators between footer columns */
.footer-links {
	border-left: none;
	padding-left: 28px; /* extra space to make room for the decorative divider */
	position: relative;
}
.footer-info {
	border-left: none;
	padding-left: 28px;
	position: relative;
}

/* On small screens, stacked layout looks better without vertical separators;
   instead add subtle horizontal dividers between stacked footer sections */
/* Only apply horizontal dividers when footer is stacked (<=600px) to avoid
   showing horizontal lines while columns are still side-by-side at e.g. 760px */
@media (max-width: 600px) {
	.footer-links,
	.footer-info {
		/* hide vertical pseudo-divider on stacked layout */
		padding-left: 15px;
	}

	/* add horizontal divider between stacked footer columns using pseudo-elements
	   (keeps the line inset from the edges and allows control of thickness) */
	.footer-logo + .footer-links,
	.footer-links + .footer-info {
		padding-top: 12px;
		margin-top: 12px;
	}

	.footer-logo + .footer-links::before,
	.footer-links + .footer-info::before {
		content: "";
		position: absolute;
		left: 12px;
		right: 12px;
		top: 6px;
	height: 1px;
		background: var(--footer-divider-strong);
		border-radius: 0; /* do not round */
	}
}

/* Special case: when viewport is >600px and <=750px the footer wraps
   so the first row has two side-by-side columns and the second row
   contains the third column. In that case we want a left border
   between the first-row columns (logo / links) and a top border
   above the second-row column (.footer-info). */
@media (min-width: 601px) and (max-width: 750px) {
	/* In this range show a vertical divider between the first-row columns
	   and a top divider above the stacked third column. Use pseudo-elements
	   so the line doesn't touch the container edges and can be thicker. */
	.footer-links {
		padding-left: 28px;
		position: relative;
	}

	/* Force the third column onto its own row in this narrow range so the
	   vertical divider between the first two columns and the horizontal
	   divider above the stacked third column match the wrapped layout. */
	.footer-info {
		flex: 1 1 100%;
	}

	.footer-links::before {
		content: "";
		position: absolute;
		left: 12px;
		top: 12px;
		bottom: 12px;
	width: 1px;
		background: var(--footer-divider-strong);
		opacity: 1;
		mix-blend-mode: normal;
		z-index: 1;
		border-radius: 0;
	}

	.footer-info {
		padding-left: 15px;
		position: relative;
		padding-top: 12px;
		margin-top: 12px;
	}

	.footer-info::before {
		content: "";
		position: absolute;
		left: 12px;
		right: 12px;
		top: 6px;
		height: 1px;
		background: var(--footer-divider-strong);
		opacity: 1;
		mix-blend-mode: normal;
		z-index: 1;
		border-radius: 0;
	}

	/* avoid double-top on the adjacent selector in this range */
	.footer-logo + .footer-links {
		border-top: none;
	}
}

.footer-logo span {
    font-weight: bold;
    font-size: 16px;
    color: #d33;
}
.footer p {
    margin: 3px 0;
}
.footer-logo p {
    margin: 5px 0 0;
    font-size: 13px;
}

/* Links */
.footer-links-group {
    margin-bottom: 10px;
}

.footer-links-group a {
    display: block;
    color: #555;
    text-decoration: none;
    margin: 3px 0;
}

.footer-links-group a:hover {
    color: #d33;
}


/* Liên hệ */
/* (Đã định nghĩa ở trên) */

.footer-info p {
    margin: 5px 0;
}

/* Footer dưới cùng */
.footer-bottom {
    background-color: #E0D8B0;
    text-align: center;
    padding: 10px 0;
    font-size: 12px;
    color: #3A2F1B;
	border-top: 1px solid rgba(0,0,0,0.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.footer-logo .gpbct {
	margin-top: 10px;
}
@media (max-width: 600px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    .footer-logo,
    .footer-links,
    .footer-info {
        flex: 1 1 100%;
    }
	.footer-logo .gpbct {
		margin: 0 auto;
	}
}


/* Responsive mobile */
@media (max-width: 600px) {
    .footer-links {
		/* Stack footer link groups vertically on very small screens so the
		   second row becomes a single column (intro / links/policies stack).
		   This prevents two sub-columns appearing inside the second row. */
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		flex-wrap: nowrap;
    }

	.footer-links-group {
		margin: 0 0 12px;
		width: 100%; /* make each group full width */
	}

	.footer-links-group a {
		display: block; width: 100%;
	}
}
.footerlink { color:#4A320F; font-size: 15px; font-weight: bold;margin-right: 10px;}
.footerlink:hover { color:#4A320F; text-decoration: underline; }
.footer-menu { margin-top: 10px; margin-bottom: 10px;}

/* ================= Theme overrides (ivory background, soft borders, warm footer) ================= */


/* Page background and common wrappers */
html, body { background-color: var(--bg-ivory) !important; }
.banner-top { background-color: var(--bg-ivory) !important; border-bottom-color: var(--border-muted) !important; }
.pageHomeOuter { background-color: var(--bg-ivory) !important; }

/* Homepage specific: override body background for pageHome area */
.outer .inner.pageHomeOuter { background-color: #FDFCF9 !important; }
body > .outer .pageHomeOuter { background-color: #FDFCF9 !important; }
body > .outer { background-color: #FDFCF9 !important; }
body .outer { background-color: #FDFCF9 !important; }

/* Lighten common borders */
hr, .separator { border-color: var(--border-muted) !important; color: var(--border-muted) !important; }
.frmSearchBanner { border-color: var(--border-muted) !important; box-shadow: 0 0 5pt 0.5pt var(--border-muted-alt) !important; }
.pageHome .box .boxinside { border-color: var(--border-muted) !important; }

/* Home grid center divider uses the new muted border color via var */
.pageHome .category-grid::before { background: var(--grid-divider) !important; }

/* Footer warm yellow theme */
.footer { 
	background-color: #ece8cf;
	
	color: #333;
}
.footer a { color: inherit; }
.footer a:hover { text-decoration: underline; }

/* Desktop vertical divider (columns) — draw both from the middle column using backgrounds for pixel-perfect 1px */
@media (min-width: 769px) {
	/* Remove inter-column gap; spacing will be controlled via internal paddings */
	.footer-container { gap: 0; }
    /* Remove any pseudo-element dividers on desktop to avoid double paint */
    .footer-links::before, .footer-links::after, .footer-info::before { content: none !important; }

    /* Use two background layers to render identical 1px lines, inset 12px top/bottom */
	.footer-links {
		/* Equal spacing from both dividers to column-2 content */
		padding-left: 20px;
		padding-right: 20px;
        background-image:
            linear-gradient(to bottom, var(--footer-divider-strong), var(--footer-divider-strong)),
            linear-gradient(to bottom, var(--footer-divider-strong), var(--footer-divider-strong));
        background-repeat: no-repeat, no-repeat;
        background-size: 1px calc(100% - 24px), 1px calc(100% - 24px);
		background-origin: border-box, border-box;
		background-clip: border-box, border-box;
		background-position: left 0 top 12px, right 0 top 12px;
    }

	/* Equalize spacing for columns adjacent to dividers */
	.footer-logo { padding-right: 20px; }
	.footer-info { padding-left: 20px; }
}


/* Container phân trang */
.paging-postlist {
	display: flex;
	justify-content: center;
	margin: 20px auto;
	flex-wrap: nowrap;
	row-gap: 0px;
	align-items: center;
	padding: 0 4px;
	max-width: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.paging-postlist-link,
.paging-postlist-prev,
.paging-postlist-next {
	display: inline-block;
	padding: 8px 14px;
	margin: 0;
	border: 1px solid #ddd;
	border-radius: 0;
	color: #333;
	text-decoration: none;
	font-size: 16px;
	line-height: 1;
	box-sizing: border-box;
	margin-left: -1px;
	position: relative;
	z-index: 0;
	background-color: #f8f8f8;
	transition: background-color 0.3s, color 0.3s;
}

.paging-postlist-prev,
.paging-postlist-next {
	padding: 8px 14px;
	font-size: 16px;
	border-color: #BE2829;
	color: #BE2829;
	font-weight: bold;
	z-index: 2;
}

.paging-postlist > *:first-child {
	margin-left: 0;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.paging-postlist > *:last-child {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-right: 1px solid #ddd;
}

.paging-postlist > .paging-postlist-next:last-child {
	border-right: 1px solid #BE2829;
}

.paging-postlist > .paging-postlist-prev:last-child {
	border-right: 1px solid #BE2829;
}

.paging-postlist-active {
	background-color: #CC0000;
	color: #fff;
	border-color: #CC0000;
	z-index: 3;
	position: relative;
}

.paging-postlist-active:hover {
	background-color: #990000 !important;
	color: #fff !important;
}

.paging-postlist-link:hover:not(.paging-postlist-active),
.paging-postlist-prev:hover:not(.paging-postlist-active),
.paging-postlist-next:hover:not(.paging-postlist-active) {
	background-color: #f5f5f5;
	color: #CC0000;
}

@media (max-width: 550px) {    
    .paging-postlist-link.page-num.page-dist-pos-3,
    .paging-postlist-link.page-num.page-dist-pos-4,
    .paging-postlist-link.page-num.page-dist-pos-5,
    .paging-postlist-link.page-dist-neg-3,
    .paging-postlist-link.page-num.page-dist-neg-4,
    .paging-postlist-link.page-num.page-dist-neg-5
    { 
        display: none !important;
    }    
}

.btn-hdr-search {
	height: 34px;
    background-color: #ffffff; /* Nền trắng */
    color: #8b6b00; /* Chữ màu #8b6b00 */
    border: 1px solid #8b6b00; /* Viền #8b6b00 */
    padding: 3px 8px 3px 8px !important;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
	display: flex;             /* ✅ thêm dòng này */
	align-items: center;       /* ✅ icon căn giữa theo chiều cao */
	justify-content: center;   /* căn giữa ngang */
	border-top-right-radius: 6px; border-bottom-right-radius: 6px;
	
}
.btn-hdr-search:hover {
    background-color: #8b6b00;   
}
.btn-hdr-search:hover .search-icon {
	color: #fff;
}

.banner-top {
	width: 100%;
	min-width: 300px;	
	background-color: #fff; z-index: 5; border-bottom: 1px solid #e0e0e0; 
}
.banner-top-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	padding: 8px 15px;
	min-height: 60px; /* Cố định chiều cao banner */
	position: relative;
	gap: 10px;
}
.boxRegister {
	display: block;float:right;margin:0px 0px 0px 0px;
}
.banner-top-inner[user-logged-in='1'] .boxRegister {
	display: none;
}
@media only screen and (max-width: 718px) {
	.banner-top-inner .boxSearchTop {
		width: calc(100% - 300px);
	}
}
@media only screen and (max-width: 650px) {	
	.banner-top-inner {
		flex-wrap: wrap;
		padding: 10px;
		height: auto;
	}
	.boxLogo {
		order: 2;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);		
		margin-top: -25px; margin-left: -1px;
		z-index: 1;
	}  
	.boxMenuLogo {
		order: 1;
		position: absolute;
		left: 10px;
		top: 50%;
		transform: translateY(-50%);
		margin-top: -25px;
		z-index: 1;
	}
	.boxSearchTop {
	  order: 4;
	  width: 100%;
	  max-width: none;
	  flex-grow: unset;
	  flex-basis: 100%;
	  margin: -5px 0 0 0;	 
	}	
	.boxRegister {
	  order: 3;
	  margin-left: auto;
	  z-index: 1; margin-top: -3px;
	}
	
}
@media only screen and (max-width: 625px) {	
	.banner-top-inner[user-logged-in='1'] .boxSearchTop {
		order: 4; width: 100%; max-width: none;
  		flex-basis: calc(100% - 2px);
		margin:-5px 0px 0px 0px;
	}
}

.pmb-hdr-login-in-popup {	
	background-color: #f1f1f1 !important; padding: 10px !important; border: 2px solid #aaa !important;
}
/* Increase padding for the login button inside the popup for better tap targets */
.pmb-hdr-login-in-popup .buttonClassic, #hdrLoginContent .buttonClassic {
	padding: 10px 20px !important;
	font-size: 15px !important;
}
/* Also ensure the inline submit input respects box-sizing */
.pmb-hdr-login-in-popup .buttonClassic[type=submit], #hdrLoginContent .buttonClassic[type=submit] { box-sizing: border-box; }

/* Common page layout */
.page-common {
	background-color: #f7f7f7; max-width: 100%; padding:5px; 
}
.page-common-wrapper {
	margin-bottom:5px;margin-top:5px; margin:0px auto; max-width:1200px; min-width: 230px;
}
.page-common-inner {
	max-width:650px; background-color:#fff; padding: 0px;
}
.page-common-header {
	background-color: #CCCCFF; padding:8px; padding-left: 15px; border-bottom: 1px solid #ddd;
}
.page-common-body {
	border: 2px solid #ccc; padding: 15px;
}
.page-common-body-row {
	padding: 5px;
}
.page-common-body-row-section {
	padding: 5px; margin-top: 15px; padding-top: 10px; border-top: 1px solid #ccc;	
}

@media only screen and (max-width: 460px) { 
	.hideSmall {
		display:none;
	}
}
@media only screen and (max-width: 414px) { 
	
	.myAccountDropdown .myAccountDropdownContent {
		margin-top: 72px; left: 30px; right: 10px; min-width: 200px;
	}
	
}

/* my account dropdown */
.account-menu-avatar-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    overflow: hidden;
    display: flex;	
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.account-menu-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* giữ ảnh không méo */
}

.menu-icon {
	font-size: 24px;
	color: #444;
	cursor: pointer;
	padding: 8px;
}
.menu-icon:hover {
	background-color: #f2f2f2;
	border-radius: 5px;
}
@media only screen and (max-width: 650px) {
	
	.mailboxIcon {
		font-size: 18px;
	}
	.menu-icon {
		font-size: 20px;
	}
	
}
.myAccountDropdown {
	position: relative;
	display: inline;
}
.myAccountDropdownButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%; /* Đảm bảo avatar không bị rớt xuống */
	margin-left: 10px;
}
.myAccountDropdownContent .icon {
	margin-top: -0px; width: 16px; height: 16px;  margin-left: 2px; margin-right: 5px; 
}
.myAccountDropdownContent .icon24 {
	margin-top: -0px; width: 24px; height: 24px;  margin-left: 2px; margin-right: 5px; 
}
.myAccountDropdownContent {
	background-color: #fff;
	display: none;
	position: absolute;
	margin-top:60px;
	right:10px;
	min-width: 300px;
	z-index:12;
	padding:10px 5px 12px 5px; text-align: left; border: 1px solid #ccc; border-radius: 4px;
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.myAccountDropdownContent a {
	display: block;	color: #000; padding: 5px;
}
.myAccountDropdownContent a.name {
	border-bottom: 1px solid #ddd;
}
.myAccountDropdownContent a.name:hover {
	background-color: #f2f2f2;
}
/* Account popup UX polish */
.popup-menu li {
	position: relative;
	border-left: 3px solid transparent;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.popup-menu li:hover,
.popup-menu li:focus-within {
	background: #f7f9fb;
	border-left-color: #e0e7ff;
}
.popup-menu a.menu {
	color: #111;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 6px;
}
.popup-menu a.menu:focus { outline: none; }
/* Emphasize verify link when present */
.popup-menu a[href*="view=verify"] { color: #92400e; font-weight: 600; }
.popup-menu a[href*="view=verify"]:hover { color: #7c2d12; }
/* Group separator before account settings */
.myAccountDropdownContent .popup-menu a[href="/store.php?mod=manage"] {
	border-top: 1px solid #eee;
	margin-top: 6px;
	padding-top: 10px;
}
/* Safer logout hover */
.popup-menu li.logout { transition: background 0.18s ease, color 0.18s ease; }
.popup-menu li.logout:hover { background: #fff5f5; color: #b91c1c; }
/* Inherit color for icons inside items */
.popup-menu li i { color: inherit; }
/* VIP chip style in header */
.popup-header .acc-vip {
	background: #fff7e6;
	color: #92400e;
	border: 1px solid #fde68a;
	padding: 1px 6px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	width: auto;
	display: inline-block;
}

.tool-fab {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    background: #CC0000;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2); /* viền đen nhẹ hơn */
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.tool-fab:hover {
    background: #990000;
	color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.tool-fab.floating-post-button {
    display: none;
}
.tool-fab.floating-admin-button {
    bottom: 20px;
}
@media screen and (max-width: 650px) {
	
	.tool-fab {
		width: 50px;
		height: 50px;
		font-size: 22px;
	}
	.tool-fab.floating-post-button {
        display: flex;
    }
	.tool-fab.floating-admin-button {
        display: none; /* Ẩn trên mobile, hiển thị trong popup tiện ích */
    }
}
.pmb-vip-icon {    
    width: 24px;
    height: 24px;
}
/* Notification bubble */
.notification {
	text-decoration: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	border-radius: 6px; padding: 8px;
}
.notification:hover {
	background-color: #f2f2f2;
}
.notification .badge {
	position: absolute; font-size:11px;
	top: 5px;
	right: 8px;
	padding: 1px 3px; padding-top:1px;
	min-width:15px;
	background: red;
	color: white;
	text-align:center;	
}
.page-common .boxLogo {	
	margin-left: 5px !important;
}
.icon {
	margin-right:2px; color:#891C1F; width: 20px; height: 20px; vertical-align: top; font-size: 16px; position: relative;  /* #B0091E*/
}
.pageNumber {
	font-size: 13px;	
	display: inline-block;
	color: #666;	
    vertical-align: middle;
    user-select: none;
    padding: 5px 0px; margin-bottom: 10px;
    line-height: 1;
    background: white;
    color: #000;
    font-size: 14px;
    font-weight: 400;    
    border: 0px solid #666!important;
   	margin-right: 5px;
}
@media only screen and (max-width: 450px) {	
	.pageNumber {
		font-size: 13px;
		display: block;
		margin-bottom: 10px;
	}
}
.comment {
	color:#000;
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
}
.product-comment {
	color:#686868;
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
	margin-top: 5px;
}
.searchbox {
	border:1px solid #ccc; padding: 4px ;
	width: 160px; font-size:14px; max-width: 100%;
}
.pageHomeOuter {
	padding: 0px; background-color: #FDFCF9;
}
.pageHome {
	padding:5px;
}
.pageHome .w3-row {
	padding:5px 5px 12px 5px !important;
}
.pageHome a {
	color:#000;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;	
}
.pageHome a:hover {
	color:#C6511F;	
}
@media only screen and (max-width: 630px) {
	.pageHome img {
		margin-right: 5px;		
	}	
	.pageHome .colums-right {
		margin-left: 50px; margin-top: 5px; font-size: 14px;
	}
	.pageHome a {		
		font-size: 14px;		
	}
	
}
.colums-right {
	margin-left: 32px;
}
.colums-right-wrapper {
   float: left;
   width: 100%;
}
.colums-left {
   float: left;
   width: 24px;
   margin-left: -100%;
}

.pageHome img {
	width: 24px; height: 24px; 	
}

.pageHome .colums-right {
	margin-left: 36px;
}
.pageHome .box .boxinside {	
	margin:0px 3px;	
	border:2px solid rgba(14,14,14,.0901960784);
	background-color: #fff;
	padding:15px; border-radius: 5px;
}
@media only screen and (max-width: 992px) {
	.pageHome {
		padding:0px; margin:5px; border:2px solid rgba(14,14,14,.0901960784); background-color: #fff; border-radius: 3px;
	}	
	.pageHome .box .boxinside {
		border: 0px; padding: 0px;
	}
	.pageHome .w3-row {
		padding: 5px 3px 12px 9px !important;
	}	
}
@media only screen and (max-width: 750px) {
	.searchbox {
		font-size:16px; padding: 3px 5px;
	}	
	.pageHome .w3-row {
		padding: 5px 3px 12px 3px !important;
	}
	
}


/*
    Colorbox 1.6.4 Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%; opacity: 0.5!important;background-color:#000}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

.listAuthorName { 
	font-size:14px; font-weight: normal; color: #555555; text-underline-position: under; text-decoration-color:#888;
	
}
.listAuthorName:hover { 	
	color: #CC0000;
}
/* PRODUCT LISTING */
.postImageWrapper { 	
	overflow: hidden;
	position: relative;	
}
.postList.listView .postImageWrapper {  
	text-align: center;
	width:100%;	
	margin-bottom: 5px;margin-top: 5px; border:0px solid #ddd;
	max-width: 160px;
}
.postImage {	
	object-fit: cover; max-height: 160px;
    max-width:  160px;    
    object-fit: cover;
}
.catPageName {
	font-size: 14px; color: #333;
}
.catPageNameHome {
	font-size: 15px; font-weight: bold; color: #555; text-transform: uppercase; 
}
.listAuthorAvatar { 
	object-fit: cover; width:60px; height:60px; margin-right:5px;  border-radius: 50%; margin-bottom: 0px;	
}
.listPrice {
	padding: 0;
	font-size: 17px;
	min-width: 120px;
	font-weight: 600;
	margin: 16px 0px 15px 35px;
	color: #C43738;
	max-width: 1100px;
	
}

.rateNumber {		
	font-size: 13px;
	color: #0645AD;
}
.rate { font-size: 13px; color: #0645AD;} 
.boxDateAdded {font-size: 13px; position: relative; margin-top: 0px; color: #666;}
.boxDateAdded a { color: #666; font-size: 13px;}
.boxDateAdded .dateValue { 
	font-size: 13px;  color:#333; margin:3px 0px;
}
.boxDateAdded .dateValueAdd { 
	font-size: 12px;  color:#686868; margin:3px 0px; font-weight: normal;
}
.boxDateAdded .dateValueAddNew { 
	font-size: 12px;  color:#686868; margin:3px 0px; font-weight: bold;
}
.w3-hide-small {
	display:block;
}
.w3-hide-medium {
	display:block;
}
.w3-hide-large {
	display:block;
}
@media only screen and (min-width: 993px) {
	.w3-hide-large { /* overwrite w3 */
		display:none;
	}
}
@media only screen and (max-width: 992px) {
	.w3-hide-medium {
		display:none;
	}
}
@media only screen and (max-width: 600px) {
	.w3-hide-small {
		display:none;
	}	
}

.buttonSmall {
	font-size:8pt; background-color:#5c708b; color:#fff !important; border: 0px solid #ddd; 
	cursor: pointer; padding: 5px 5px 5px 5px; font-weight: normal; display: inline-block; border-radius: 5px;
}

.buttonSmall:hover {	
	
	background-color:#C6511F; 	
}
.buttonMedium {	        
	background-color:#5c708b; color:#ffffff;	
    font-size: 14px;   
    line-height: 17px;   
    text-align: center;
	margin-right:5px;		
	padding: 6px 9px 6px 9px;
	text-decoration: none;	
	cursor: pointer; border-radius: 5px;display: inline-block
}
.buttonMediumDisable {	
	background-color:#ddd; color:#555;	
    font-size: 14px;   
    line-height: 17px;   
    text-align: center;
	margin-right:5px;		
	padding: 6px 9px 6px 9px;
	text-decoration: none;	
	cursor: pointer; border-radius: 5px;display: inline-block
}
.buttonMedium:hover {
	background-color:#C6511F; color:#fff;
}
.buttonEditor {
	padding:8px 12px; font-size: 14px; font-weight:bold; background-color:#0663a5; color:#FFFFFF; margin: 0px 0px 20px 0px; cursor: pointer; border-radius: 5px;
}
.buttonEditor:hover {
  color:#fff !important;	  
  background-color:#C6511F;	
}
.buttonEditor1 {
	padding:8px 12px;  font-size: 14px; font-weight:bold;  background-color:#ccc; color:#222; margin: 0px 0px 20px 10px; cursor: pointer; border-radius: 5px;
}
.buttonEditor1:hover {
	color:#fff !important;	
  	background: #C6511F;  
}
.buttonAccount {
	font-size: 14px;
	font-weight: bold;
	background: linear-gradient(180deg, #F8EFC6 0%, #E6D7A3 100%);
	border: 1px solid #E6D7A3;
	color: #333;
	padding: 6px 10px;
	border-radius: 5px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	white-space: nowrap;
	min-width: 110px;
	margin-right: 8px;
	transition: background 0.2s ease;
}
.buttonAccount:hover {
	background: linear-gradient(180deg, #D4C793 0%, #C4B583 100%);
	border-color: #D4C793;
}
.buttonAccountAction {
	padding: 8px 12px;
	background-color: rgba(230, 192, 52, 0.92);
	color: #3A2F00 !important;
	border: 1px solid rgba(230, 192, 52, 0.92);
	border-radius: 6px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.5px;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	box-sizing: border-box;
	text-align: center;
}
.buttonAccountAction:hover, .buttonAccountAction:active {
	/* hover nên có màu đậm hơn */
	background: #cfad2f; transition: background-color 0.15s ease, color 0.15s ease;
}

.buttonAccount i {
	font-size: 14px;
}
.buttonAccount input {
	display: none;
}
/* Retro blue link for So sánh gói thành viên */
.buttonAccountHelp {
    color: #176087;
    background-color: #e3f1f8;
    border: 1px solid #8bbad7;
    border-radius: 6px;
    padding: 6px 14px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: background 0.18s, color 0.18s;
    display: inline-block;
}
.buttonAccountHelp:hover {
    color: #11496a;
    background-color: #c2e0f2;
    border-color: #176087;
    text-decoration: underline;
}
.buttonAccountHelp:active {
    background-color: #8bbad7;
    color: #11496a;
}
.buttonClassic {
    background-image: none !important;
	background: linear-gradient(to bottom, #fff8e6 0%, #ffe199 55%, #ffc04d 100%) !important;
	border-color: #ddb966 !important;
	color: #2a2200 !important;
	border-radius: 6px;
	
	padding: 5px 16px;
	font-size: 13px;
	letter-spacing: 0.2px;
	cursor: pointer;
	box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(0,0,0,0.2);
	text-align: center;
	display: inline-flex; align-items: center; gap: 6px;
	min-width: 80px; /* Đảm bảo kích thước tối thiểu */
}

.buttonClassic:hover {
    background: linear-gradient(to bottom, #f2ecdb 0%, #f2d691 55%, #f2b649 100%) !important;
	border-color: #ddb966 !important;
	color: #2a2200 !important;
}

.buttonClassic:active {
    background: #d9a066;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}
.buttonClassicOld {
	background-image: url('/images/menubg.gif'); color:#000000;
	 cursor: pointer;
	font-weight:normal; font-size:15px;  text-decoration:none; padding:6px 15px 4px 15px; 
	border:1px solid; border-radius: 3px;
	border-color: #c89411 #b0820f #99710d;
	border-top: 0px;
}
.buttonClassicOld img {
	margin-top: -2px;
}
.buttonClassic1 {
	background-image: url('/images/menubg.gif'); color:#000000;
	 cursor: pointer;
	font-weight:normal; font-size:14px;  text-decoration:none; padding:5px 8px 3px 8px; 
	border:1px solid; border-radius: 3px;
	border-color: #c89411 #b0820f #99710d;
	border-top: 0px;
}

.buttonClassic1:hover {	
	
	box-shadow: 0 1px 1px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),				
				  inset 0 -1px 1px 1px rgba(250,227,133,1);					  
}
.buttonActionFill  {
	border: 1px solid #aaa; padding: 5px 5px; border-radius: 3px; font-size: 13px;  font-weight: normal;
	color: #2e3138;
	background: #d5d7dd;
	border-color: #d5d7dd;
	display: inline-flex; align-items: center; gap: 6px; line-height: 1;
}
.buttonActionFill i { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.buttonActionFill img { display: block; height: 16px; width: auto; }
.buttonActionFill:hover  {
	color: #222 !important; background-color: #e5e5e5;
}
.buttonAction  {
	border: 1px solid #aaa; padding: 5px 5px; border-radius: 3px; color: #222; font-size: 13px;  background-color: #f9f9f9; font-weight: normal;
	display: inline-flex; align-items: center; gap: 6px; line-height: 1;
}
.buttonAction i { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.buttonAction img { display: block; height: 16px; width: auto; }
.buttonAction:hover  {
	color: #222 !important; background-color: #e5e5e5;
}
.buttonAction img { margin-top: 0; }
.buttonActionFill img { margin-top: 0; }
.buttonSimpleSmall{ padding: 3px 6px; color:#333; border: 1px solid #bbb; cursor: pointer;  display: inline-block; border-radius: 3px; font-size: 12px; }
.buttonSimpleSmall:hover {  text-decoration: none; background-color: #fff8b3;}
.buttonSimple { 
	color:#333; border: 1px solid #bbb; cursor: pointer;  display: inline-block; border-radius: 5px; font-size: 14px; font-weight: normal;
	padding: 6px 12px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.buttonSimple:hover {  text-decoration: none; background-color: #fff8b3;}
.buttonSimpleFill {   
    color: #333;
    border: 1px solid #bbb;
    background-color: #EDECE5;
    cursor: pointer;
    display: inline-block;
    border-radius: 5px;
    font-size: 14px;
    padding: 6px 12px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.buttonSimpleFill:hover {
    text-decoration: none;
    background-color: #C6511F;
    color: #fff;
}
.buttonSimpleFillLight {
    
    color: #333;
    border: 1px solid #ccc;
    background-color: #f9f9f7; /* nền rất nhẹ, sáng hơn #EDECE5 */
    cursor: pointer;
    display: inline-block;
    border-radius: 5px;
    font-size: 14px;
	padding: 6px 12px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.buttonSimpleFillLight:hover {
    text-decoration: none;
    background-color: #ffcc66; /* nền vàng cam sáng khi hover */
    color: #333; /* vẫn giữ chữ tối cho nhẹ nhàng */
}
.buttonClassicFlat { color:#000; line-height: 2.2; border: 1px solid #aaa; border-radius: 5px;  font-weight:normal; font-size:15px;  text-decoration:none; padding:5px 8px;  background-color:#F8EFAE; cursor: pointer; box-shadow: 0 1px 1px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
.buttonClassicFlat:hover { color:#000 !important; background-color: #FFFFBE;}
/* Fixed top menu */
ul.fixedTopMenu {
    list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #FFFFFF;
    position: fixed; top: 0; right: 0px; float:right;
}
.successMsg {
	padding:15px 15px; background:#abf7b1; color:#008631; border: 1px solid #008631; margin: 5px 5px; clear: both;
}
.warningMsg {
	padding:15px 15px; background:#ffdcd1; color:#900603; border: 1px solid #900603; margin: 5px 5px; clear: both;
}
.normalMsg {
	padding:15px 15px; background:#ffffcc; color:#333; border: 1px solid #ccc; margin: 5px 5px; clear: both;
}
.normalStatus {
	padding:15px 15px; background:#FEEAD4; color:#333; border: 1px solid #ccc; margin: 5px 5px; clear: both;
}
.normalMsgSimple {
	padding:15px 15px; background:#f2f2f2; color:#0000ff;  margin: 5px 5px; clear: both;
}
.normalMsgLarge {
	padding:15px 15px; min-height: 100px; background:#ffffcc; color:#333; border: 1px solid #ccc; margin: 20px 15px; clear: both;
}
#formMsg:empty {
  display: none;
}
#formMsg {
  background-color: #fdecea; /* nền đỏ nhạt */
  color: #b00020; /* chữ đỏ đậm */
  border: 1px solid #f5c2c2;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 500;
}
#formMsg::before {
  content: "⚠ ";
  font-size: 16px;
  margin-right: 4px;
}
.img-not-found {
	margin-right: 10px; float: left;
}
.txt-separator {
	background-color: #ddd; margin: 0px 5px; width: 1px; height: 10px; display: inline-block;
	line-height: 0;    
}
.item-attr {
	padding:0px;  font-size:11px;
	margin-top:5px; z-index: 1; min-width: 150px;
	
}
.item-new {
	padding:2px 3px; color:#fff; font-size:11px; background-color:#007300; 
	 z-index: 1; font-weight: normal; font-size: 9px; 
}
.item-thly {
	padding:2px 3px; color:#222; font-size:11px; background-color:#ddd; border-bottom-right-radius: 2px; border-top-right-radius: 2px;
	z-index: 1; font-weight: normal; font-size: 9px;
}
.item-giluu {
	padding:2px 3px; color:#fff; font-size:11px; background-color:#0078D4; border-bottom-right-radius: 2px; border-top-right-radius: 2px;
	z-index: 1; font-weight: normal; font-size: 9px;
}
.item-cmua {
	padding:2px 3px; color:#fff; font-size:11px; background-color:#EE4D2D; border-bottom-right-radius: 2px; border-top-right-radius: 2px;
	z-index: 1; font-weight: normal; font-size: 9px;
}
.buttonRetro{
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    padding: 5px 10px;   
    line-height: 1.5;
    background: white;
    color: #000;
    font-size: 16px;    
    font-weight: 400;
    text-align: left;
    border: 1px solid #555!important;
    border-radius: 3px;
    /*box-shadow: 2px 2px #666;   */
	cursor: pointer;
}
.buttonRetro:active {
    background-color: white!important;
    color: black!important;
    box-shadow: 0px 0px white;
    transform: translateX(1px) translateY(1px); 
}
.buttonRetro:hover {
    background-color: ffffcc!important;
}
.buttonRetroSmall {
	padding: 3px 8px; margin-bottom:5px;
	font-size: 14px;  
}
.buttonRetroSmall:hover {
	background-color: #E8E2AE; color: #222;
}
.buttonGray {
	background-color: #eee;
	color: black;
}


.buttonGray:hover{
    color: #000;
    background: #ffffcc;
}
.list-paging {
	text-align: center; padding: 20px 5px; background-color: #efefef;	
}
.list-paging-item a { border-right: none; } 
.list-paging-item a:last-of-type { border-right: 1px solid #ccc; }
.retroPagingItem {
	display: inline-block;
    vertical-align: middle;
    user-select: none;   
	padding: 10px 15px;
    line-height: 1;
    background: white;
    color: #000;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    border: 1px solid #ccc;
}

.retroPagingItem:hover {	
	background-color: #ffffcc;
	color: #000;
	text-decoration:none; display:inline-block;
}
.retroPagingItem:active{
    background-color: white!important;
    color: black!important;    
}

.retroPagingItemSelected {
	background-color: #f1f1f1; color: #000;border: 1px solid #555; border-right: 1px solid #555 !important;	
	position: relative;	
}

.retroPagingItemSelected:hover {
	background-color: #ffffcc;
}
.retroPagingNext {	
    vertical-align: middle;
    user-select: none;
    padding: 5px 10px;
    line-height: 1;    
    color: #000;
    font-size: 16px;
    font-weight: 400;
    text-align: left;   	
	text-decoration:none; color:#000; display:inline-block;	
	padding-top:10px; border: 0px;padding-bottom:10px;
	
}
.retroPagingNext:hover {	    
	background-color: #aaa;
}
.retroPagingNext:active{    
    transform: translateX(1px) translateY(1px); 
}

.retroPagingNextLock {
	background-color: #fff; 
    border: 0px;
	cursor: default;
	text-decoration:none;margin-right:5px; padding: 8px 8px 7px 9px; color:#666; display:inline-block; 
}
.retroPagingNextLock:hover {
	background-color: #fff; 
    border: 0px;
	cursor: default;
	text-decoration:none;margin-right:5px; padding: 8px 16px 7px 17px; color:#666; display:inline-block; 
}
.paging-next-block {
	display: none; text-align: center; padding: 15px;
}
.paging-next-block .retroPagingNext {
	padding: 15px 25px; border: 1px solid #ccc; border-radius: 3px;
}

@media only screen and (max-width: 550px) { 		
	.paging-next-block {
		display: block;
	}
}
.banner-icon { margin: 0px; padding: 0px; display: flex; align-items: center;}
/* account popup */
.popup-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}
.popup-menu li {
	padding: 5px 10px;
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.2s;
	font-size: 15px;
}
.popup-menu .name {
	background: #f5f5f5;
}
.popup-menu li:hover {
	background: #f5f5f5;
}
.popup-menu li .icon {
	width: 18px;
    height: 18px;
}
.popup-menu li .large-icon {
	font-size: 1.6em;
	line-height: 0.8;
}
.vip {
	color: #d9534f;
	font-weight: bold;
}
.popup-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 6px;
	
	flex-wrap: wrap;	
}
.popup-header img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
}
.popup-header .name {
	font-size: 14px;
	font-weight: bold;
	color: #1a1a1a;
	font-weight: 600;
}
.popup-header .acc-vip {
	color:#6c757d; font-size: 0.9em; font-weight: normal; width: 100%;
}
.popup-header .acc-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: #212529;
	font-weight: 600;
	font-size: 1em;
}
/* Phần chứa các tab */
.tab {
    overflow: hidden;
    border-bottom: 2px solid #ddd;
    background-color: white;
    display: flex;
}

/* Nút Tab */
.tab button {
    background-color: transparent;
    border: none;
    padding: 10px 16px;
    margin-right: 5px;
    font-size: 16px;
    color: #555;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

/* Khi rê chuột vào Tab */
.tab button:hover {
    background-color: #ddd;
}

/* Tab đang được chọn */
.tab button.active {
    color: #007bff;
    border-bottom: 2px solid #007bff;
    background-color: white;
}

/* Nội dung của từng Tab */
.tabcontent {
    display: none;
    padding: 15px;
    border: 0px solid #ddd;
    border-top: none;
    background: white;
}

@media only screen and (max-width: 650px) {
	.tabcontent {
		padding: 10px 0px;
	} 
}

.tabcontent.active {
    display: block;
}
.seach-banner {
	position: relative; margin-top: 25px;
	float: right;
}
.qvmsg {
	padding-left: 10px;display: none; padding:10px; max-height:550px;overflow:auto; border:1px solid #aaa;background-color:#FFFFFF; margin: 5px;  border-radius: 5px;
}
.footer-desc2 {	
	background-color: #ffcc00; font-weight: bold;
	color: #000; padding: 5px 16px 10px 16px; font-size: 15px;	
}
.footer-desc1 {
	padding: 255px 16px 25px 16px;
	border-bottom: 1px solid #e0e0e0;
	background-color: #F8F1F1 !important; font-size: 14px; color: #222;
}
.footer-desc3 {		
	padding: 25px 16px 25px 16px; clear: both;
	background-color: #ffffcc;
	color: #000;	font-size: 14px; font-weight: normal; border-bottom: 1px solid #4A320F;
}
.footer-copyright {
	padding:15px 0px; color:#000;
}
.smalltxt {
	font-size: 13px;
}
.vip {
	font-size:12px; font-weight: 700 !important; color: #c45500!important;
	z-index: 1; font-weight: normal;  
}
.search-header .breadcrumb-search a {
	color: #fff;
}
.profile-vip-badge {
	display: inline-block;
	background: transparent;       /* outline-only to avoid confusion with action buttons */
	color: #8b6914;
	font-size: 10px;
	padding: 2px 5px;
	border-radius: 12px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	text-align: center;
	align-self: flex-start;
	border: 1px solid #d4b879;
	text-transform: uppercase
}

/* ===================== HOMEPAGE (.pageHome) STYLES ===================== */
/* Background colors */
.outer { background-color: #FDFCF9 !important; }
.inner { background-color: #FDFCF9 !important; }

.pageHomeOuter { background-color: #FDFCF9 !important; }

/* Grid layout: 2 columns on desktop, 1 column on mobile */
.pageHome .category-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 8px;
	margin: 8px -10px 14px;
	padding-left: 10px;
	padding-right: 10px;
	position: relative;
}

@media (max-width: 768px) {
	.pageHome .category-grid {
		grid-template-columns: 1fr;
		gap: 8px 0;
	}
}

/* Force 2 columns even on large screens */
@media (min-width: 993px) {
	.pageHome .category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 8px 8px !important;
	}
}

/* Column divider for 2-column layout */
@media (min-width: 769px) {
	.pageHome .category-grid::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		transform: translateX(-0.5px);
		width: 1px;
		background: var(--grid-divider, #eee);
		pointer-events: none;
		z-index: 0;
		opacity: 0.85;
	}
}

/* Category item cards: minimal visuals */
.pageHome .category-group {
	padding: 6px 12px;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	display: grid;
	grid-template-columns: 36px 1fr;
	column-gap: 12px;
	align-items: start;
	margin: 0 !important;
	overflow: hidden;
	position: relative;
	transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
	cursor: pointer;
}

/* Hover state: subtle */
.pageHome .category-group:hover,
.pageHome .category-group:focus-within {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

/* Category icons: 28px compact size */
.pageHome .home-icon {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	box-shadow: none;
	position: relative;
	overflow: hidden;
	filter: none;
	transition: filter 160ms ease, box-shadow 160ms ease;
}

/* Icon pseudo-element overlays */
.pageHome .home-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 248, 236, 0.35);
	pointer-events: none;
}

.pageHome .home-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(28, 18, 10, 0.16), rgba(255, 244, 230, 0.1));
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* Category icon images */
.pageHome .home-icon--gomsu { background-image: url('/images/icon/covat.gif'); }
.pageHome .home-icon--amthanh { background-image: url('/images/icon/amthanh8.jpg'); }
.pageHome .home-icon--suutam { background-image: url('/images/icon/quat.gif'); }
.pageHome .home-icon--dongho { background-image: url('/images/icon/dongho6.jpg'); }
.pageHome .home-icon--dungcu { background-image: url('/images/icon/dungcu8.png'); }
.pageHome .home-icon--thoitrang { background-image: url('/images/icon/denim.gif'); }
.pageHome .home-icon--giadung { background-image: url('/images/icon/house-32.png'); }
.pageHome .home-icon--giacong { background-image: url('/images/icon/gears2.jpg'); }

/* Category header: title and badge layout */
.pageHome .category-group .category-header {
	grid-column: 1 / 3;
	display: grid;
	grid-template-columns: 36px 1fr auto;
	column-gap: 8px;
	align-items: center;
	margin-bottom: 0;
	margin-top: 0;
}

.pageHome .category-group .category-header a {
	text-decoration: none;
	transition: color 120ms ease;
}

.pageHome .category-group .category-header a:nth-of-type(1) {
	grid-column: 1;
	align-self: center;
	justify-self: start;
}

.pageHome .category-group .category-header a:nth-of-type(1) .home-icon {
	margin: 0;
}

/* Title link styling */
.pageHome .category-group .category-header a:nth-of-type(2) {
	grid-column: 2;
	align-self: center;
	justify-self: start;
	min-width: 0;
	max-width: 100%;
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: #2a1c14;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
	border-bottom: 0 !important;
}

.pageHome .category-group .category-header a:nth-of-type(2)::before,
.pageHome .category-group .category-header a:nth-of-type(2)::after {
	content: "" !important;
	display: none !important;
	background: none !important;
}

.pageHome .category-group .category-header a:nth-of-type(2):hover,
.pageHome .category-group .category-header a:nth-of-type(2):focus {
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	border: 0 !important;
	border-bottom: 0 !important;
}

/* Recent badge */
.pageHome .recent-badge {
	display: none !important;
	grid-column: 3;
	align-self: center;
	justify-self: end;
	margin-left: 6px;
	margin-right: 2px;
	padding: 2px 6px;
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	color: var(--text, #333);
	background: var(--badge-bg, #fafafa);
	border: 1px solid var(--badge-border, #e6e6e6);
	border-radius: 10px;
	white-space: nowrap;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

@media (max-width: 400px) {
	.pageHome .recent-badge {
		padding: 2px 5px;
		font-size: 10px;
	}
}

/* Badge on hover */
.pageHome .category-group:hover .recent-badge,
.pageHome .category-group:focus-within .recent-badge {
	background: var(--badge-bg-hover, #ffe7d6);
	border-color: var(--badge-border-hover, #e8b3a3);
	color: var(--accent-strong, #cc4a26);
	box-shadow: 0 3px 10px rgba(224, 85, 43, 0.18);
}

/* Description text */
.pageHome .category-group .comment {
	grid-column: 2 / -1;
	margin: 4px 0 0 -3px !important;
	color: #5b5b5b;
	font-size: 13px;
}

/* Subcategory links / chip list */
.pageHome .category-group .comment-list {
	grid-column: 2 / -1;
	margin-top: 4px;
	margin-left: -3px !important;
	line-height: 1.3;
}

.pageHome .category-group .comment-list a {
	position: relative;
	z-index: 3;
	display: inline-block;
	margin: 0 10px 2px 0;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-size: 12px;
	color: #777 !important;
	text-decoration: none;
	font-weight: 500;
}

.pageHome .category-group .comment-list a:hover {
	color: #555 !important;
	text-decoration: underline;
}

@media (max-width: 768px) {
	.pageHome .category-group .comment-list {
		display: none !important;
	}

	.pageHome .category-group .category-header {
		grid-template-columns: 36px 1fr;
		align-items: start;
	}

	.pageHome .category-group .category-header a:nth-of-type(2) {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		word-break: break-word;
		overflow-wrap: anywhere;
		display: block;
	}

	.pageHome .category-group .category-header .recent-badge {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		margin-left: 0;
		margin-top: 6px;
		margin-bottom: 6px;
	}
}

/* Overlay link (invisible click area) */
.pageHome .category-group .category-overlay-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	text-indent: -9999px;
	background: transparent;
	border: 0;
	cursor: pointer;
}

/* Remove any underlines, dividers, or pseudo-element decorations */
.pageHome .category-group .category-header,
.pageHome .category-group .category-header a,
.pageHome .category-group .category-header a:hover,
.pageHome .category-group .category-header a:focus {
	text-decoration: none !important;
	border-bottom: 0 !important;
}

.pageHome .category-group hr {
	display: none !important;
}

.profile-vip-badge i {
	margin-right: 4px;
	color: #8b6914;
}

/* ===== CSS from banner.php ===== */

/* Verify box css */
.unverified_label {
	background-color: #FF9999; padding:2px; text-align:center; font-size: 13px; display: inline-block;
}
.verified_label {
	width:180px; padding:2px; text-align:left
}
.verified_label a{
	color:#006600;
}

.banner-top-inner a.hdrloginlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 16px;
	box-sizing: border-box;
	text-decoration: none;
	border: 1px solid #ffffff; /* Viền trắng để tránh dịch chuyển */
	border-radius: 3px;
	font-size: 13px;
	letter-spacing: 0.2px;
	color: inherit;
	min-width: 80px; /* Đảm bảo kích thước tối thiểu */
	white-space: nowrap; /* Tránh xuống dòng làm thay đổi chiều rộng */
}
.banner-top-inner a.hdrloginlink:hover {
	
	background-color: rgba(230, 192, 52, 0.92); 
	transition: background-color 0.15s ease, color 0.15s ease;
	
	border-radius: 6px;
	box-shadow: none;
	display: inline-flex;
	align-items: center;	
	cursor: pointer;
}

/* Login button on banner with same hover as hdrloginlink */
.boxRegister .buttonClassic:hover {
	background: linear-gradient(to bottom, #ffe396, #f5c844);
	border: 1px solid #d1a734;
	color: #111 !important;
	box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,0.15);
}


@media only screen and (max-width: 350px) {
    .boxBannerMailbox {
        display: none; /* Ẩn icon hộp thư */
    }
}


/* --- BUTTON BLOCK FOR AUTHOR CONTACT --- */
.pmb-author-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
}
.pmb-author-contact .pmb-contact-btn {
    flex: 1 1 0%;
	min-width: 170px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background-color: #e4e6eb;
    color: #050505;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    min-height: 36px;
    line-height: 1;
}
.pmb-author-contact .pmb-contact-btn:hover {
    background-color: #d8dadf;
}
.pmb-author-contact .pmb-contact-btn.is-following {
    background: #1b74e4;
    color: #fff;
    border-color: #1b74e4;
}
.pmb-author-contact .pmb-contact-btn.is-following:hover {
    background: #1868cd;
    border-color: #1868cd;
}
.pmb-author-contact .pmb-contact-btn.is-shown {
    background-color: #f0f8ff; /* Nền xanh nhạt */
    color: #003366; /* Chữ xanh đậm */
    font-size: 16px;
    font-weight: bold;
    border: 1px solid #003366;
}
.pmb-contact-btn i {
    margin-right: 8px;
}
.pmb-contact-btn .btn-phone-copy {
    margin-left: 10px;
}
.pmb-contact-btn .btn-phone-copy i {
    color: #7a8ca3;
}

.buttonCommonAction {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background-color: #e4e6eb;
    color: #050505;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    min-height: 36px;
    line-height: 1;
}

.buttonCommonAction:hover {
    background-color: #d8dadf;
    color: #050505 !important;
}

.buttonCommonAction i {
    margin-right: 8px;
}
/* profile post list  */
.profile-postListContainer {
display: grid;
    grid-template-columns: repeat(4, 1fr); /* T?i da 4 c?t */
    gap: 16px;
    padding: 8px;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
.profile-postListContainer {
  grid-template-columns: repeat(3, 1fr); /* 3 c?t cho tablet */
  gap: 14px;
}
}
@media (max-width: 700px) {
.profile-postListContainer {
  grid-template-columns: repeat(2, 1fr); /* 2 c?t cho mobile */
  gap: 12px;
  padding: 6px;
}
}
@media (max-width: 400px) {
.profile-postListContainer {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 4px;
}
}
.profile-postItemInner {
display: flex;
flex-direction: column;
height: 100%;
min-height: 260px;
}
.profile-postItem {
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: #fff;
    border-radius: 8px;
    transition: box-shadow 0.2s ease;
}  
.profile-postItem:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}  
.profile-postImageWrapper {
overflow: hidden;
width: 100%;
aspect-ratio: 1 / 1; /* T? l? vu�ng */
display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
}
@media (max-width: 700px) {
    .profile-postImageWrapper {
        aspect-ratio: 1 / 1;    
    }
}
.profile-postImageWrapper img,
.profile-postImageWrapper img.postImage {
    width: 100%;
    height: 100%;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover;
    object-position: center;
}  
.profile-postInfoWrapper {
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}  
.profile-productName {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 6px;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}  
.profile-listPrice {
color: #e53935;
font-weight: bold;
}  
.profile-listAuthorInfo {
font-size: 12px;
color: #777;
margin-top: auto;
padding-top: 10px;
}


.profile-postListContainer.cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}
.profile-postListContainer.cols-2 .profile-postImageWrapper {
    aspect-ratio: auto !important;
    height: 200px !important;
    min-height: 200px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
}
.profile-postListContainer.cols-2 .profile-postImageWrapper img,
.profile-postListContainer.cols-2 .profile-postImageWrapper img.postImage,
.cols-2 .profile-postImageWrapper img,
.cols-2 .profile-postImageWrapper img.postImage {
    max-width: 100% !important;
    max-height: 200px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}
@media (max-width: 600px) {
    .profile-postListContainer.cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile login popup adjustments for tall portrait screens (e.g., iPhone XR) */
@media (orientation: portrait) and (min-height: 800px) {
    #hdrLoginContent {
        padding-top: 115px !important;
    }
}