/* Global Font Override */
body, table, input, select, textarea, button, .w3-button, .w3-input {
    font-family: 'Be Vietnam Pro', sans-serif !important;
}

/* Override Bootstrap's a:focus and a:hover styles */
a:focus,
a:hover {
    color: inherit !important;
    text-decoration: none !important;
}

/* 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: 500; 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: 500; 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: 20px; 
	border-bottom: none; 
	transition: all 0.3s ease; 
	cursor: pointer; 
	background: #fff;
	border-radius: 16px;
	margin-bottom: 16px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	border: 1px solid rgba(0,0,0,0.03);
}
.pageHome-post:hover { 
	background-color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}
.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: var(--primary-color) !important; font-weight: 500; font-size: 15px; text-decoration: none; display: block; margin-bottom: 8px; line-height: 1.4; }
.pageHome-post-title:hover { color: var(--primary-color-hover) !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: var(--secondary-color-active); 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: 20px; 
	border-bottom: none; 
	transition: all 0.3s ease; 
	cursor: pointer; 
	background: #fff;
	border-radius: 16px;
	margin-bottom: 16px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	border: 1px solid rgba(0,0,0,0.03);
}
.js-post:hover { 
	background-color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}
.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: var(--secondary-color-active); 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: var(--accent-light); --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: var(--accent-light); color: var(--accent-dark); 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;
	cursor: pointer;
}
.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 (Cam Đỏ) */
	--primary-color: #F53D2D;      /* Cam Đỏ */
	--primary-color-hover: #E0281A; /* Darker Cam Đỏ */
	--primary-color-active: #C92115; /* Even Darker Cam Đỏ */
	/* SECONDARY – Màu điểm nhấn phụ trợ (Gold) */
	--secondary-color: #F9CA24;      /* Gold */
	--secondary-color-hover: #F6E58D;  /* Lighter Gold */
	--secondary-color-active: #F0932B;  /* Darker Gold */
	/* ACCENT – Màu bổ trợ */
	--accent-color: #F53D2D; /* Cam Đỏ */
	--accent-light: #fef2f2; /* Very light red */
	--accent-dark: #7f1d1d; /* Deep red */

	--gradient-vintage: linear-gradient(135deg, #f8f9fa 0%, #fef2f2 100%); /* Light Gray/Red Gradient */
  	--gradient-vintage-hover: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  
	--bg-ivory: #ffffff;           /* White background */
	--bg-ivory-alt: #FFFFFF;       /* White */
	--footer-yellow-1: #f8f9fa;    /* Light gray footer */
	--footer-yellow-2: #F53D2D;    /* Cam đỏ footer */
	--border-muted: #E5E5E5;       /* light borders */
	--border-muted-alt: #DADADA;   /* alternate light border */
	--grid-divider: #E5E5E5;       /* matches home grid divider */
	--footer-divider-strong: rgba(0, 86, 145, 0.35); /* Purple divider */
}
html {overflow-x:auto; box-sizing: border-box; overflow-y: scroll;}
*, *:before, *:after { box-sizing: inherit; }

body {font-family: "Lexend Deca", Helvetica, 'Roboto', Arial, sans-serif; 
	font-size: 15px; text-align: left; color:#333333; line-height: 1.6;
	background-color:#f8f9fa; margin: auto; max-width: 100% !important; 
	transition: margin-left 0.3s ease-in-out;
}
/* When any modal or overlay is open we lock page scroll on the body
   but keep the vertical scrollbar visible by forcing it on the root
   `html` element. This prevents page content from shifting (avatar
   jumping) while still showing the scrollbar track. */
body.pmb-modal-open {
	overflow: hidden !important;
}
html.pmb-modal-open {
	overflow: hidden !important;
}
/* On desktop/laptop screens (>768px), don't hide scrollbar to avoid layout shift */
@media only screen and (min-width: 769px) {
	html.pmb-modal-open {
		overflow: auto !important;
	}
	body.pmb-modal-open {
		overflow: auto !important;
	}
}
/* Body shift when left panel opens */

/* 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;
}

/* Login button styles moved from ajax/i_login.php */
.btn-login-pro {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	border-radius: 50px;
	font-weight: 600;
	font-size: 14px;
	border: none;
	cursor: pointer;
	transition: all 0.2s;
	box-sizing: border-box;
	text-decoration: none !important;
	height: 44px;
	line-height: 1;
}

/* primary-colored login button variant used for the "Đăng nhập" action */
.btn-login-main,
input[type="submit"].btn-login-main,
button.btn-login-main {
	background-color: var(--primary-color) !important;
	color: #fff !important;
}
.btn-login-main:hover,
input[type="submit"].btn-login-main:hover,
button.btn-login-main:hover {
	background-color: var(--primary-color-hover) !important;
}
.btn-login-main:active,
input[type="submit"].btn-login-main:active,
button.btn-login-main:active {
	background-color: var(--primary-color-active) !important;
}

@media (max-width: 768px) {
	.btn-login-pro {
		height: 44px !important;
		font-size: 16px !important;
		border-radius: 50px !important;
		margin-top: 20px;
	}
}

input, textarea, select { 
	background-color: #fff; 
	border-radius: 8px; 
	font-size:15px; 
	padding: 10px 12px; 
	color: #333; 
	border: 1px solid #e2e8f0;
	transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(0, 86, 145, 0.1);
}
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; color: #004080; }
a:hover {  color: var(--primary-color); 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: var(--primary-color); text-decoration:none}
a.medium { font-size: 15px; color: #222; 	text-decoration: none }
a.medium:hover { color: var(--primary-color); text-decoration:none}
a.smallName { font-size: 13px; color: #006678; 	text-decoration: none }
a.smallName:hover { color: var(--primary-color); 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: var(--primary-color); 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: var(--primary-color); }
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: 175px; /* Resized for header balance - ~42px height */
	height: auto;
	display: block;
	margin: 0 auto; 
    margin-top: 0;
    transition: transform 0.3s ease;
	max-height: 50px; /* Cap max height */
}
.weblogo {
	transition: opacity 180ms ease, transform 180ms ease;
}

.logo-wrap:hover .weblogo {
	/* reduce opacity on hover so change is visible */
	opacity: 0.85;
}
.logo-wrap {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px; /* Reduced gap for compact look */
	padding: 4px 8px; /* Reduced padding */
	border-radius: 6px;
	text-decoration: none;
	height: 100%;
}
.logo-wrap:hover {
	/* keep hover background transparent */
	background-color: transparent;
}

.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;
	justify-content: center;
	gap: 0px; /* Minimal gap for compact appearance */
	height: 100%; /* Full height of parent */
}

/* Favorite Location (heart) button next to location selector */
.location-fav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	margin-left: 12px; /* per spec */
	transition: transform 120ms ease, color 160ms ease, opacity 160ms ease;
	color: #757575; /* inactive heart color */
}
.location-fav-toggle:active {
	transform: scale(0.92);
}
.location-fav-toggle .bi {
	font-size: 18px;
	line-height: 1;
}
.location-fav-toggle.favorited {
	color: #FFC107; /* active star color (gold) */
}
.location-fav-toggle.anim-pop {
	transform: scale(1.2);
}

/* small helper to ensure icon transitions look smooth */
.location-fav-toggle, .location-fav-toggle .bi {
	will-change: transform, color, opacity;
}

/* Slightly reduce text opacity when hovering over logo to de-emphasize */
.logo-wrap:hover .logo-brand, .logo-wrap:hover .logo-brand span {
	opacity: 0.92;
}

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


.boxLogo {
	float: none; margin: 0; padding: 0;
	display: flex; 
	align-items: center;
	justify-content: center;
	height: 100%; /* Full height of banner */
    order: 2; /* Move after menu */
    flex-shrink: 0;
}

.boxMenuLogo {	
	display: flex;
	align-items: center;
	height: 100%;	
    order: 1; /* Move to start */
    margin-right: 10px;
}

/* Simple Flat Menu Button */
.boxMenuLogo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: transparent;
    text-decoration: none;
    border: none;
}

/* Center icons for account/add buttons */
.accountBtnAdd, .buttonAccountAction.accountBtnAdd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	line-height: 1;
	padding: 0;
	background-color: #F53D2D !important;
	border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
	box-shadow: none !important;
}
.accountBtnAdd:hover, .buttonAccountAction.accountBtnAdd:hover {
    background-color: #E0281A !important;
    transform: none !important;
	box-shadow: none !important;
}
/* Ensure the plus icon stays white on hover (override any other hover color rules) */
.accountBtnAdd:hover i,
.accountBtnAdd:hover .accountBtnAddIcon,
.buttonAccountAction.accountBtnAdd:hover i,
.accountBtnAdd:hover .bi {
	color: #fff !important;
	fill: #fff !important;
}
.accountBtnAddIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	line-height: normal;
	font-size: 20px !important;
    color: #fff !important;
}
.gradient-icon { color: #212529 !important; }

/* Darken login icon on hover to a deeper red */
.hdrloginlink:hover .user-icon,
.pmbNotMember.hdrloginlink:hover .user-icon,
.hdrloginlink:hover .gradient-icon,
.pmbNotMember.hdrloginlink:hover .gradient-icon {
	color: #E0281A !important;
	fill: #E0281A !important;
}

/* Floating post button: center its icon */
.floating-post-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}
.floating-post-button i {
	line-height: 1;
	font-size: 18px;
	transform: translateX(-0.5px);
}

.boxMenuLogo .menu-icon {
    font-size: 22px;
    color: #212529;
    padding: 0;
    z-index: 2;
    line-height: 1;
}

/* Hover State - No change */
.boxMenuLogo a:hover {
    background-color: transparent;
}

.boxMenuLogo a:hover .menu-icon {
    color: #F53D2D;
}

.boxSearchTop {
	padding: 5px; 
    display: flex; 
    align-items: center;
    margin: 0;
    margin-left: auto; /* Push to right */
	width: auto; 
    max-width: 400px; 
    flex-grow: 1;
    order: 3;
}
.boxSearchTop .input-group {
    display: flex;
    align-items: center;
    width: 100%;
}
.boxSearchTop .form-control.searchInputTop {
    height: 40px;
    border-radius: 20px 0 0 20px;
    border: 1px solid #ddd;
    border-right: none;
    background-color: #F5F5F5;
    box-shadow: none;
    margin: 0;
}
.boxSearchTop .input-group-btn {
    width: auto;
    display: block;
}


.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;
	}
	
}

/* NOTE: Mobile header responsive styles for ≤768px are defined later in this file,
   after the default .banner-top-inner styles, to ensure proper CSS cascade */

/* Legacy 650px styles for login popup */
@media only screen and (max-width: 650px) {
    /* Login Popup Styles (Preserved) */
	#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;
	}
	.banner-top-inner a.hdrloginlink {
		min-width: auto !important;
		padding: 5px 8px !important;
	}
}

@media only screen and (max-width: 650px) {
	#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: transparent;
	text-decoration: underline;
}
.pmb-modal-overlay {
	display: none;
	position: absolute;
	transition: opacity 0.2s ease;
	z-index: 999999;
	left: 0;
	top: 0;
	right: 0;
	width: 100%;
	min-height: 100%;
	overflow: visible;
	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: 2px;	
	border-radius: 99px;
	border: 1px solid #e2e8f0;	 margin-top: 20px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.03);
	background: #f8fafc;
	transition: all 0.2s ease;
}
.frmSearchBanner:focus-within {
	background: #fff;
	border-color: var(--primary-color);
	box-shadow: 0 4px 12px rgba(0, 86, 145, 0.15);
}
.seach-banner {	
	margin-top: 0px !important; padding: 0px 15px 10px 15px;
}
.seach-banner .searchbox {
	background: transparent;
	margin: 0px;
	padding: 8px 16px;
	font-size: 15px;
	color: #333;
	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;
}
.seach-banner .searchbox:active {			
	border: none;	
}
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;
}
/* Ensure popup login buttons get consistent spacing when they don't have an id */
.btn-login-popup {
	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: var(--accent-light);
	color: var(--accent-dark);
	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: 12px 16px;
	background: transparent;
	border-bottom: 1px solid rgba(0,0,0,0.03);
	border-radius: 8px;
	margin: 4px 8px;
	transition: background-color 0.2s;
}
#hdrCategoryContent .w3-row:hover {
	background-color: #f8fafc;
}
#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: 100%;
			max-width: none;
			left: -100%;
			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: var(--primary-color-active);
	color: white !important;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 500;
}

.hdrCategoryTopCta a:hover {
	background-color: var(--primary-color);
}
.hdrCategoryTopCta a i {
	color: white;
}
/* 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: var(--footer-yellow-2); /* Slightly darker than main header */
	color: var(--accent-dark);
	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: var(--accent-dark);
	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;
	display: flex;              /* lay out action buttons in a row */
	align-items: center;        /* vertically center icons */
	gap: 12px;                  /* equal spacing between items */
}
.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;
}

/* Ensure the three header action blocks (+, mailbox, avatar)
   sit and behave consistently inside the header. Use inline-flex
   on the direct blocks so their internal label+icon remain grouped. */
.header-user-info > .accountBtnAdd,
.header-user-info > .boxBannerMailbox,
.header-user-info > .myAccountDropdown {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

@media (max-width: 520px) {
	.header-user-info { gap: 8px; }
}
.banner-acc-name {
	font-size: 13px;
	font-size: 15px;
}

.accountBtnAddTxt {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
}
.accountBtnAdd i {
	margin-right: 0; vertical-align: middle; font-size: 18px; line-height: 1; display: flex;
}
.accountBtnAddIcon {
	top: 0; color: #fff !important; font-size: 16px; position: relative; margin-right: 0; width: 16px; height: 16px;
}
.mailboxIcon {
	/* Bolder circular mailbox badge: larger size, darker icon */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-right: 10px;
	margin-left: 5px;
	line-height: 1;
	font-size: 20px;
	color: #111; /* darker for bolder appearance */
	font-weight: 700;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0,0,0,0.06);
	padding: 6px; /* for icon spacing */
	overflow: hidden;
}

/* Extra rules for icon elements inside the badge */
.mailboxIcon i,
.mailboxIcon svg {
	font-size: 20px;
	font-weight: 700;
	color: inherit;
}

.mailboxIcon img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	display: block;
	filter: contrast(120%) saturate(115%);
}
.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: #212529;
	cursor: pointer;         
	padding: 0px;
	
	transition: background-color 0.2s ease;
}
.search-icon {
	font-size: 18px;
	color: #212529;
	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: var(--footer-yellow-1); /* Kem nhạt */
    margin-top: 40px;          /* Chỉ padding trên */
    padding-top: 40px;
    padding-bottom: 0;          /* Sát đáy */
    font-size: 14px;
    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: white;
}
.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: var(--primary-color);
}


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

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

/* Footer dưới cùng */
.footer-bottom {
    background-color: var(--footer-yellow-2);
    text-align: center;
    padding: 10px 0;
    font-size: 12px;
    color: #ffffff;
	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-bottom .footerlink { color: #ffffff; }
.footer-bottom .footerlink:hover { color: #ffffff; }
.footer-menu { margin-top: 10px; margin-bottom: 10px; padding: 15px 20px;}

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


/* Page background and common wrappers */
.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: var(--footer-yellow-1);
	
	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-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	margin: 0 4px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	color: #1e293b !important;
	text-decoration: none;
	font-size: 15px;
	line-height: 1;
	box-sizing: border-box;
	background-color: #fff;
	transition: all 0.2s ease;
	font-weight: 600;
}

.paging-postlist-prev,
.paging-postlist-next {
	border-color: var(--primary-color);
	color: var(--primary-color);
	font-weight: 600;
	z-index: 2;
}

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

.paging-postlist > *:last-child {
	border-radius: 8px;
	border-right: 1px solid #e2e8f0;
}

.paging-postlist > .paging-postlist-next:last-child {
	border-right: 1px solid var(--primary-color);
}

.paging-postlist > .paging-postlist-prev:last-child {
	border-right: 1px solid var(--primary-color);
}

.paging-postlist-active {
	background-color: var(--primary-color);
	color: #fff !important;
	border-color: var(--primary-color);
	z-index: 3;
	position: relative;
	box-shadow: 0 4px 10px rgba(0, 86, 145, 0.3);
}

.paging-postlist-active:hover {
	background-color: var(--primary-color-active) !important;
	color: #fff !important;
	transform: none;
}

.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: #f8fafc;
	color: var(--primary-color) !important;
	border-color: var(--primary-color);
	transform: none;
}

@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: 40px;
	width: 46px;
    background-color: transparent;
    color: #666;
    border: 1px solid #ddd;
	border-left: none;
    padding: 0 !important;
    border-radius: 0 20px 20px 0;
    cursor: pointer;
    transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
.btn-hdr-search:hover {
    background-color: #eee;
}
.btn-hdr-search .search-icon {
	color: #212529;
	font-size: 18px;
}
.btn-hdr-search:hover .search-icon {
	color: #E0281A;
}

/* Header Glassmorphism & Layout */
.banner-top {
	width: 100%;
	min-width: 300px;	
	background-color: rgba(255, 255, 255, 0.85) !important; /* Translucent */
    backdrop-filter: blur(12px); /* iOS Blur */
    -webkit-backdrop-filter: blur(12px);
	z-index: 1000; 
	border-bottom: 1px solid rgba(0,0,0,0.05);
	box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    position: relative;
}

/* Flexbox Reordering for App-like Feel */
.banner-top-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	padding: 8px 20px;
	min-height: 60px; /* Adjusted for smaller logo */
	position: relative;
	gap: 15px;
}

.boxRegister {
	display: block; float: none; margin: 0;
    order: 4;
    margin-left: 10px;
}
.banner-top-inner[user-logged-in='1'] .hdrLogin {
    order: 4;
}
.banner-top-inner[user-logged-in='1'] .boxRegister {
	display: none;
}

/* ========== MOBILE HEADER RESPONSIVE (≤768px) - MUST BE AFTER DEFAULT STYLES ========== */
@media only screen and (max-width: 768px) {	
	/* Hide Post Ad Button completely - multiple selectors for higher specificity */
    .accountBtnAdd,
    a.accountBtnAdd,
    .header-user-info .accountBtnAdd,
    .header-user-info a.accountBtnAdd,
	.banner-icon .accountBtnAdd,
	.banner-icon a.accountBtnAdd,
	div.banner-icon .accountBtnAdd,
	.header-user-info .banner-icon .accountBtnAdd,
	.hdrLogin .accountBtnAdd,
	.hdrLogin .banner-icon .accountBtnAdd {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
	
	/* Also hide the text part at this breakpoint */
	.header-user-info .accountBtnAddTxt,
	.accountBtnAddTxt {
		display: none !important;
	}

    /* Header Layout - Grid for perfect 3-column symmetry */
    .banner-top-inner {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas: 
            "logo user"
            "search search" !important;
        align-items: center !important;
        padding: 5px 15px !important;
        height: auto !important;
        min-height: auto !important;
        gap: 0 !important;
        position: relative !important;
        box-sizing: border-box !important;
    }
	
	.banner-top-inner a.hdrloginlink {
		min-width: auto !important;
		padding: 5px 8px !important;
	}

    /* 1. Menu - left side: Area 'menu' */
    .boxMenuLogo {
        display: none !important;
    }

    /* 2. Logo - left aligned */
    .boxLogo {
        grid-area: logo !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }
    .weblogo {
        width: 130px; /* Smaller for mobile - should be smaller than desktop 175px */
        height: auto;
        max-height: 38px; /* Reduced max-height for mobile */
        margin: 0;
    }

    /* 3. User/Login - area 'user' */
    .boxRegister, .hdrLogin {
        grid-area: user !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        margin: 0 !important;
    }
    /* When both are present, let them both stay in the same area. 
       Usually only one is 'visible'. */
    .hdrLogin {
        pointer-events: none; /* Let clicks pass through to boxRegister if it's behind */
    }
    .hdrLogin * {
        pointer-events: auto; /* Re-enable clicks for actual modal content if any */
    }

    /* 4. Search - Full Width on 2nd Line */
    .boxSearchTop {
        grid-area: search !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 10px !important;
    }

    /* Mobile: hide the header search wrapper and make its form full width when needed */
    @media (max-width: 768px) {
        .boxSearchTop {
            margin: 10px 0 0 0 !important;
            padding: 0 !important;
            display: none !important; /* Ẩn ô tìm kiếm trên mobile vì đã có bottom menu */
        }
    }

    .boxSearchTop form {
        width: 100% !important;
        max-width: 100% !important;
    }
    .boxSearchTop .form-control.searchInputTop {
        width: 100% !important;
    }
}

/* Mobile header layout is now handled by the 768px media query above */

/* Hide header search input on mobile to reduce clutter (e.g., iPhone, small screens) */
@media (max-width: 768px) {
    /* Primary header search input and its wrapper */
    .searchInputTop, .boxSearchTop, #txtSearch {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Desktop adjustments */
/* Removed negative margin at 769px - logo now gets proper margin from theme-retro.css */
@media (min-width: 769px) {
    .boxLogo {
        /* margin-left is now controlled by theme-retro.css for consistent alignment */
    }
}

.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-flex; /* allow vertical centering of child button */
	align-items: center;
	margin-left: 10px;
	vertical-align: middle;
}
.myAccountDropdownButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%; /* Đảm bảo avatar không bị rớt xuống */
	
}
.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:30px;
	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 - matching button '+' gradient style */
.popup-menu li {
	position: relative;
	border-left: 3px solid transparent;
	transition: all 0.18s ease;
	padding: 10px 12px;
	background: #fff;
	border-radius: 6px;
	margin-bottom: 4px;
}
.popup-menu li:hover,
.popup-menu li:focus-within {
	background: linear-gradient(135deg, rgba(0, 86, 145, 0.08) 0%, rgba(0, 132, 255, 0.08) 100%);
	border-left-color: #F53D2D;
	box-shadow: 0 2px 8px rgba(0, 86, 145, 0.15);
	transform: translateX(2px);
}
.popup-menu a.menu {
	color: #333;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	transition: color 0.18s ease;
}
.popup-menu li:hover a.menu {
	color: #F53D2D;
}
.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: all 0.18s ease; }
.popup-menu li.logout:hover { background: #fff5f5; color: #b91c1c; border-left-color: #b91c1c; }
/* Inherit color for icons inside items */
.popup-menu li i { color: inherit; transition: color 0.18s ease; }
/* 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: linear-gradient(135deg, #FF9068 0%, #F53D2D 100%); /* Zalo Blue gradient */
    color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 86, 145, 0.4);
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
}
.tool-fab:hover {
    background: linear-gradient(135deg, #d05ce3 0%, #ff9ec6 100%);
	color: #fff;
    transform: translateY(-2px) rotate(90deg);
    box-shadow: 0 6px 16px rgba(0, 86, 145, 0.5);
}
.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:10px 5px 0px 5px !important;
}
.pageHome a {
	color:#000;
	font-size: 16px;
	font-weight: 500;
	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 .colums-right {
	margin-left: 36px;
}
.pageHome .box .boxinside {	
	margin:0px 3px;	
	border:2px solid rgba(14,14,14,.0901960784);
	background-color: #ffffff;
	padding:15px; border-radius: 5px;
}
@media only screen and (max-width: 992px) {
 	.pageHome {
 		padding:0px; margin:5px; border: none !important; box-shadow: none !important; background-color: #fff; border-radius: 3px;
 	} 
	.pageHome .box .boxinside {
		border: 0px; padding: 0px;
	}
	.pageHome .w3-row {
		padding: 10px 3px 0px 9px !important;
	}	
}
@media only screen and (max-width: 750px) {
	.searchbox {
		font-size:16px; padding: 3px 5px;
	}	
	.pageHome .w3-row {
		padding: 10px 3px 0px 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:12px !important; font-weight: normal !important; 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:#4a5a70; 	
    color: #fff !important;
}
.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:#4a5a70; color:#fff !important;
}
.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:#044e82;	
}
.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: #f8f9fa; font-weight: bold;
	color: #333; padding: 5px 16px 10px 16px; font-size: 15px;	
}
.footer-desc1 {
	padding: 255px 16px 25px 16px;
	border-bottom: 1px solid #e0e0e0;
	background-color: #f8f9fa !important; font-size: 14px; color: #222;
}
.footer-desc3 {		
	padding: 25px 16px 25px 16px; clear: both;
	background-color: #ffffff;
	color: #333;	font-size: 14px; font-weight: normal; border-bottom: 1px solid #e0e0e0;
}
@media (min-width: 769px) {
    .footer-desc2 .footer-desc2-content {
        margin-left: 16px !important;
    }
}
.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;
}

/* Mobile Adjustments for New Header */
@media only screen and (max-width: 650px) {
    .weblogo {
        width: 120px; /* Keep smaller than desktop - was 200px (too big) */
        height: auto;
        max-height: 35px;
    }
    .boxMenuLogo a {
        width: 40px;
        height: 40px;
    }
    .boxMenuLogo .menu-icon {
        font-size: 20px;
    }
    /* Reset absolute positioning margins for better centering with new height */
    .boxLogo {
        margin-top: 0;
        margin-left: 0;
    }
    /* Ensure search bar is below */
    .banner-top-inner {
        padding-bottom: 10px;
    }
}

/* 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: transparent; 
	transition: background-color 0.15s ease, color 0.15s ease;
	
	border-radius: 6px;
	box-shadow: none;
	display: inline-flex;
	align-items: center;	
	cursor: pointer;
	text-decoration: underline;
}

/* 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: 768px) {
    .boxBannerMailbox {
        display: none !important; /* Ẩn icon hộp thư trên mobile để logo luôn giữa */
    }
    .account-menu-avatar-wrapper {
        position: relative;
    }
    .notification-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        background: red;
        color: white;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        z-index: 10;
    }
}

/* Ensure the notification badge can overflow the avatar on small screens
   so it remains visible instead of being clipped by the avatar wrapper. */
@media only screen and (max-width: 768px) {
	.account-menu-avatar-wrapper {
		overflow: visible; /* allow badge to sit outside the avatar circle */
	}
	.account-menu-avatar-wrapper .notification-badge {
		position: absolute;
		top: -6px;
		right: -6px;
		z-index: 10010;
		box-shadow: 0 2px 6px rgba(0,0,0,0.18);
		transform: translateZ(0);
		pointer-events: none;
	}
}

/* Hide the redundant small-screen notification badge on larger screens
   because the main badge ("badge w3-round") already shows the count. */
@media only screen and (min-width: 769px) {
	.notification-badge {
		display: none !important;
	}
}

/* Make the existing W3-style badge (used for mailbox count) more circular
   and vertically centered on large screens. */
@media only screen and (min-width: 769px) {
	.boxBannerMailbox .badge.w3-round,
	.notification .badge.w3-round {
		width: 22px;
		height: 22px;
		min-width: 0;
		padding: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		font-size: 12px !important;
		font-weight: 700 !important;
		line-height: 1;
		box-sizing: border-box;
		border: 2px solid #fff; /* tuck into surrounding circle if overlapping */
		background: #ef4444; /* ensure strong red */
		color: #fff;
		box-shadow: 0 2px 6px rgba(0,0,0,0.12);
		text-align: center;
		vertical-align: middle;
	}
	/* Slightly adjust position when used inside .notification (mailbox) */
	.notification .badge.w3-round {
		top: 6px;
		right: 8px;
		position: absolute;
	}
}


/* --- 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;
    }
}

/* Ẩn hamburger icon trên màn hình lớn */
@media (min-width: 769px) {
    .boxMenuLogo {
        display: none !important;
    }
}

/* Custom button for create order */
.btn-create-order {
    background-color: #2196F3 !important;
    color: white !important;
    border-radius: 4px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
}

.btn-create-order:hover {
    background-color: #0d47a1 !important;
    color: white !important;
}

/* Button for change location */
.btn-change-location {
    background: transparent;
    border: 1px solid #666;
    color: #666;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 10px;
    font-size: 12px;
    font-weight: normal;
}

.btn-change-location:hover {
    background-color: #f0f0f0;
}

.btn-suggest-location {
    background: #fff !important;
    color: #2196F3 !important;
    border: 1px solid #2196F3 !important;
    padding: 5px 12px !important;
    border-radius: 15px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: inline-block !important;
    line-height: 1.4 !important;
    margin-bottom: 5px !important;
}

.btn-suggest-location:hover {
    background: #2196F3 !important;
    color: #fff !important;
}

/* Segmented Control Styles */
.pageHome-tabs {
    position: static !important;
    padding: 12px 16px;
    background: #fff;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.segmented-control {
    display: flex;
    width: 100%;
    margin: 0 auto;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    height: auto !important;
    gap: 8px;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}
.segmented-control::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}
.tab-button {
    flex: 1;
    min-width: fit-content;
    white-space: nowrap;
    border: none !important;
    background: #F5F5F5 !important;
    color: #F53D2D !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 0.2s;
    height: 38px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px !important;
    border-radius: 20px !important;
}
.tab-button i {
    font-size: 16px;
    margin-right: 6px;
}
.tab-button.active {
    background: #FFC20E !important; /* Cam/Gold Brand */
    color: #F53D2D !important;
    box-shadow: 0 2px 8px rgba(255, 194, 14, 0.4);
}
.tab-button.active:hover {
    background: #E5AC00 !important;
}
.tab-button:hover:not(.active) {
    background: #E0E0E0 !important;
}

@media (max-width: 600px) {
    .pageHome-tabs {
        padding: 8px 10px;
    }
    .segmented-control {
        height: auto !important;
        gap: 6px;
        justify-content: flex-start; /* Allow items to start from left and scroll if needed */
    }
    .tab-button {
        font-size: 13px !important;
        height: 36px !important;
        padding: 0 10px !important;
    }
    .tab-button i {
        display: inline-block; /* Keep icons on mobile but maybe slightly smaller */
        font-size: 14px;
        margin-right: 4px;
    }
}
@media (max-width: 400px) {
    .tab-button {
        font-size: 11px !important;
    }
}
@media (max-width: 992px) {
    .pageHome-tabs {
        margin-bottom: 10px !important;
    }
}


/* ========================================= */
/* Consolidated Location Header & Sticky Nav */
/* Moved from location_header.php and home.php */
/* ========================================= */

/* Core navigation styles (non-sticky) */
.home-sticky-nav {
    position: static !important;
    z-index: 10 !important;
    background: #fff;
    border-bottom: 1px solid #eee;
}

/* Base Location Header Styles */
#locationHeader {
    position: static !important;
    background: #fff !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    padding: 12px 16px !important; 
    min-height: 54px !important; /* Ensure consistent height across tabs */
    display: flex !important;
    align-items: center !important;
}

#locationHeader.mode-feed {
    border-radius: 0;
}

#locationHeader.mode-market {
    border-radius: 0;
}

.market-filter-ui {
    margin-left: 0;
}

@media (min-width: 993px) {
    .market-filter-ui {
        margin-left: 16px;
    }
    
    .feed-location-ui {
        margin-left: 16px;
    }
}

.market-filter-ui a:hover {
    text-decoration: underline !important;
}

.feed-location-ui .btn-pmb-alt:hover {
    background: #E0281A !important;
    color: #fff !important;
}

.market-filter-ui .bc-loc-item {
    color: #333;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    white-space: nowrap;
}

.market-filter-ui .bc-loc-item:hover {
    text-decoration: underline;
    color: #cc0000;
}

.market-filter-ui .bc-loc-item.active-loc {
    font-weight: bold;
    color: #cc0000;
    cursor: pointer;
    white-space: nowrap;
}

@media (max-width: 992px) {
    .home-sticky-nav {
        margin: 0 !important;
    }
}

.btn-location-change-link {
    color: #666 !important;
    font-size: 12px !important;
    text-decoration: underline !important;
    margin-left: 8px;
}

@media (max-width: 600px) {
    .btn-location-change-link {
        display: none !important;
    }
}


/* Feed Location Mode Styles (Consistent with Market Mode) */
.feed-location-ui {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Explicitly size the market icon to match */
.market-filter-ui i.bi-geo-alt-fill {
    font-size: 14px !important;
    color: #F53D2D !important;
}

/* Post location icons: dark gray for posts and post listings */
.catpost .bi-geo-alt-fill,
.catpost-postListContainer .bi-geo-alt-fill,
.fb-post-location-meta .bi-geo-alt-fill,
.postdetail .bi-geo-alt-fill,
.list-category-posts .bi-geo-alt-fill,
.pageHome .catpost .bi-geo-alt-fill {
    color: #555 !important;
}

.feed-loc-empty {
	color: #333;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
	font-size: 14px;
	background: #fff;
	border: 1px solid #F53D2D;
	border-radius: 999px;
	padding: 6px 12px;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.feed-loc-empty i {
    color: #F53D2D !important;
    font-size: 16px;
}

.feed-loc-empty .loc-label {
    color: #999;
}

.feed-loc-empty .loc-status {
    font-weight: 600;
}

.feed-loc-empty .loc-action {
	color: #F53D2D;
	font-weight: 600;
	margin-left: 2px;
}

.feed-loc-empty .bi-caret-down-fill {
    font-size: 10px;
}

.feed-loc-empty:hover {
	background: #fff5f3;
	border-color: #E0281A;
}

.feed-loc-active {
	color: #333;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
	font-size: 14px;
	background: #fff;
	border: 1px solid #F53D2D;
	border-radius: 999px;
	padding: 6px 12px;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.feed-loc-active i {
    color: #F53D2D !important;
    font-size: 16px;
}

.feed-loc-active span {
    font-weight: 600;
}

.feed-loc-active .bi-caret-down-fill {
    font-size: 10px;
}

.feed-loc-active:hover {
	background: #fff5f3;
	border-color: #E0281A;
}

.btn-choose-loc {
    padding: 5px 12px;
    font-size: 13px;
    flex-shrink: 0;
    white-space: nowrap;
    background: #F53D2D;
    border: 1px solid #F53D2D;
    color: #fff;
    border-radius: 20px;
    font-weight: 500;
}

.btn-choose-loc:hover {
    background: #E0281A !important;
    border-color: #E0281A !important;
    color: #fff !important;
}


/* Horizontal Scrolling Category Navigation for Mobile */
.category-pills-container {
    display: none;
    padding: 12px var(--pmb-card-gutter, 16px);
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 10px;
}

.category-pills-label {
    font-size: 14px;
    color: #6b7280;
    margin-right: 8px;
    font-weight: 500;
    flex-shrink: 0;
}

.category-pills-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    display: flex;
    align-items: center;
}
.category-pills-wrapper::-webkit-scrollbar {
    display: none;
}

.category-link {
    display: inline-block;
    padding: 6px 4px;
    margin-right: 10px;
    font-size: 14px;
    color: #4b5563;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.2s;
}
.category-link.active {
    color: #cc0000;
    font-weight: 600;
}
.category-link.active:hover,
.category-link.active:active,
.category-link.active:focus {
    color: #990000 !important;
}
.category-link:hover:not(.active),
.category-link:active:not(.active),
.category-link:focus:not(.active) {
    color: #990000 !important;
}

.category-divider {
    color: #e5e7eb;
    margin: 0 10px 0 2px;
    flex-shrink: 0;
}

@media only screen and (max-width: 750px) {
    .category-pills-container {
        display: flex;
        align-items: center;
    }
}

.catpost-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%; 
    margin-right: 8px;
    object-fit: cover;
}
i.catpost-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    color: #1976d2;
    font-size: 20px;
    vertical-align: middle;
}

@media (max-width: 600px) {
    .catpost-avatar {
        width: 24px;
        height: 24px;
    }
    i.catpost-avatar {
        font-size: 14px;
    }
}

/* Modern Underline Tabs for Gom Don & Shop filters */
.sub-tabs-container {
    display: flex;
    justify-content: center;
    gap: 32px;
    border-bottom: 1px solid #e5e7eb;
    margin: 10px auto 10px auto;
    padding: 0 10px;
}

.order-sub-tab, .shop-tab-btn {
    position: relative;
    padding: 8px 4px 12px 4px;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #6B7280;
    background: none !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    white-space: nowrap;
}

.order-sub-tab i, .shop-tab-btn i {
    font-size: 16px !important;
}

.order-sub-tab:hover, .shop-tab-btn:hover {
    color: #F53D2D;
}

.order-sub-tab.active, .shop-tab-btn.active {
    color: #F53D2D !important;
    background: none !important;
    box-shadow: none !important;
}

.order-sub-tab::after, .shop-tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: transparent;
    transition: background-color 0.2s ease;
}

.order-sub-tab.active::after, .shop-tab-btn.active::after {
    background-color: #F53D2D;
}

@media (max-width: 600px) {
    .sub-tabs-container {
        gap: 20px;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .sub-tabs-container::-webkit-scrollbar {
        display: none;
    }
    .order-sub-tab, .shop-tab-btn {
        padding: 8px 2px 10px 2px;
        font-size: 13px !important;
    }
}

/* Ngôi sao uy tín luôn màu vàng */
.bi-star-fill {
    color: gold !important;
}

/* Highlight cho liên hệ */
.order-contact-highlight {
    color: #ff9800;
    font-size: 15px;
    font-weight: 500;
}

/* Mobile Sidebar Drawer Styles */
.pageHome-drawer-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9998;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.pageHome-drawer-overlay.active {
	display: block;
	opacity: 1;
}

.pageHome-drawer {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 10000;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
	box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
	/* Hide scrollbar while keeping scroll functionality */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) */
.pageHome-drawer::-webkit-scrollbar {
	display: none;
}

.pageHome-drawer.active {
	transform: translateX(0);
}

.pageHome-drawer-header {
	position: sticky;
	top: 0;
	background: #fff;
	padding: 10px 16px;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	z-index: 10;
}

.pageHome-drawer-search-wrapper {
	flex: 1;
	display: flex;
	align-items: center;
	background: #f0f2f5;
	border-radius: 20px;
	padding: 0 12px;
	height: 40px;
	position: relative;
}

.pageHome-drawer-search-icon {
	color: #999;
	font-size: 16px;
	margin-right: 8px;
	flex-shrink: 0;
}

.pageHome-drawer-search-input {
	flex: 1;
	border: none;
	background: transparent;
	outline: none;
	font-size: 15px;
	color: #333;
	padding: 0;
}

.pageHome-drawer-search-input::placeholder {
	color: #999;
}

.pageHome-drawer-search-clear {
	background: none;
	border: none;
	color: #ccc;
	font-size: 16px;
	cursor: pointer;
	padding: 0;
	margin-left: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pageHome-drawer-search-clear:hover {
	color: #999;
}

.pageHome-drawer-close-btn {
	background: none;
	border: none;
	color: #F53D2D;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	white-space: nowrap;
	flex-shrink: 0;
}

.pageHome-drawer-close-btn:hover {
	opacity: 0.8;
}

/* Drawer Search Suggestions Styles */
.pageHome-drawer-suggestions {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	max-height: 400px;
	overflow-y: auto;
	z-index: 1001;
	display: none;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.pageHome-drawer-suggestions.show {
	display: block;
}

.pageHome-drawer-suggestion-item {
	padding: 12px 12px;
	border-bottom: 1px solid #f0f0f0;
	cursor: pointer;
	color: #333;
	font-size: 14px;
	transition: background-color 0.2s;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.pageHome-drawer-suggestion-item:hover {
	background-color: #f5f5f5;
}

.pageHome-drawer-suggestion-item:last-child {
	border-bottom: none;
}

.pageHome-drawer-suggestion-item strong {
	color: #F53D2D;
	font-weight: 600;
}

/* Legacy class support */
.pageHome-drawer-title {
	display: none;
}

.pageHome-drawer-close {
	display: none;
}

/* Show drawer only on mobile */
@media screen and (max-width: 1023px) {
	.pageHome-drawer {
		display: block !important;
	}
}

/* Hide overlay on desktop */
@media screen and (min-width: 1024px) {
	.pageHome-drawer-overlay,
	.pageHome-drawer-overlay.active {
		display: none !important;
		visibility: hidden !important;
	}
	.pageHome-drawer,
	.pageHome-drawer.active {
		display: none !important;
	}
}

/* Location sidebar styles */
.pageHome-sidebar-header {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pageHome-sidebar-header i {
	color: #F53D2D;
	font-size: 18px;
}

.pageHome-sidebar-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.pageHome-sidebar-item {
	border-bottom: 1px solid #f0f0f0;
	padding: 0;
}

.pageHome-sidebar-item:last-child {
	border-bottom: none;
}

/* Make left sidebar follow page flow and become sticky when it reaches viewport top
   - On desktop only (where sidebar is visible)
   - Uses native CSS `position: sticky` so the sidebar scrolls with the page
	 and only fixes in place when it touches the top of the viewport. */
@media screen and (min-width: 1024px) {
	.pageHome-left .pageHome-sidebar {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		align-self: start; /* ensure sticky respects the flex container */
	}
}

.pageHome-location-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	text-decoration: none;
	color: #374151;
	font-size: 15px;
	transition: all 0.2s;
	cursor: pointer;
	background: transparent;
	border: none;
	width: 100%;
	text-align: left;
	font-family: inherit;
}

.pageHome-location-link:hover {
	background: #f3f4f6;
	color: #F53D2D;
	padding-left: 20px;
}

.pageHome-location-link.active {
	/* Use light gray active state (xám nhạt) instead of blue/orange */
	background: #f3f4f6; /* light gray */
	color: #374151; /* keep readable dark text */
	font-weight: 500;
	border-left: 4px solid transparent; /* remove colored accent */
	padding-left: 16px;
}

.pageHome-location-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(220, 53, 69, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #dc3545;
	font-size: 16px;
	transition: all 0.2s;
}

.pageHome-location-icon.saved {
	background: #F53D2D;
	color: #fff;
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.pageHome-location-icon.saved:hover {
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6);
}

.pageHome-location-link.active .pageHome-location-icon.saved {
	/* Keep icon contrast on active (no bright outline) */
	box-shadow: inset 0 0 0 3px rgba(255,255,255,0.9);
}

.pageHome-location-icon.hot {
	background: rgba(255, 87, 34, 0.15);
	color: #ff5722;
}

.pageHome-location-name {
	flex: 1;
	min-width: 0;
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	word-wrap: break-word;
	word-break: break-word;
	line-height: 1.3;
	font-size: 14px;
}

.pageHome-sidebar-empty {
	padding: 30px 20px;
	text-align: center;
	color: #999;
	font-size: 14px;
}

.pageHome-sidebar-empty i {
	display: block;
	font-size: 32px;
	margin-bottom: 8px;
	color: #ddd;
}

/* Explore load-more button that matches location button look but centered
   - white background, rounded, subtle border, inline size and centered */
.explore-loadmore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff !important;
	border: 1px solid #f0f0f0;
	border-radius: 12px;
	padding: 6px 12px !important;
	box-shadow: 0 4px 12px rgba(3,12,28,0.06);
	width: auto !important;
	text-align: center;
}
.explore-loadmore .pageHome-location-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	color: #F53D2D;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.04) inset;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}
.explore-loadmore:hover {
	transform: translateY(-2px);
}

.pageHome-sidebar-loading {
	padding: 20px;
	text-align: center;
	color: #999;
	font-size: 13px;
}

.pageHome-sidebar-loading i {
	display: inline-block;
	margin-right: 8px;
	animation: spin 1s linear infinite;
}

.pageHome-sidebar-section {
	border-bottom: 1px solid #eee;
}

.pageHome-sidebar-section:last-child {
	border-bottom: none;
}

.pageHome-sidebar-subsection-title {
	padding: 12px 20px;
	font-size: 12px;
	font-weight: 600;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: #f9fafb;
	border-bottom: 1px solid #eee;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Sidebar header */
.pageHome-sidebar-header {
	padding: 20px;
	border-bottom: 1px solid #eee;
	font-weight: 600;
	color: #333;
	font-size: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Sidebar Styles */
.pageHome-sidebar {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	padding: 0;
	position: sticky;
	top: 100px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) */
.pageHome-sidebar::-webkit-scrollbar {
	display: none;
}

/* Adjust logo position for large screens to align with location column */
@media screen and (min-width: 1300px) {
	.boxLogo {
		margin-left: -30px !important;
	}
}