* {
	box-sizing: border-box;
}
/* Simple image rotation helpers used in content (non-destructive) */
img.rotate-90 { transform: rotate(90deg); }
img.rotate-180 { transform: rotate(180deg); }
img.rotate-270 { transform: rotate(270deg); }
/* Alignment helpers for content images (used when inline styles are stripped) */
img.align-left { float: left; margin: 0 12px 12px 0; }
img.align-right { float: right; margin: 0 0 12px 12px; }
img.align-center { display: block; margin-left: auto; margin-right: auto; }
/* Flip helpers */
img.flip-h { transform: scaleX(-1); }
img.flip-v { transform: scaleY(-1); }
/* Combine rotate + flip */
img.rotate-90.flip-h { transform: rotate(90deg) scaleX(-1); }
img.rotate-90.flip-v { transform: rotate(90deg) scaleY(-1); }
img.rotate-180.flip-h { transform: rotate(180deg) scaleX(-1); }
img.rotate-180.flip-v { transform: rotate(180deg) scaleY(-1); }
img.rotate-270.flip-h { transform: rotate(270deg) scaleX(-1); }
img.rotate-270.flip-v { transform: rotate(270deg) scaleY(-1); }
img.flip-h.flip-v { transform: scale(-1,-1); }
img.rotate-90.flip-h.flip-v { transform: rotate(90deg) scale(-1,-1); }
img.rotate-180.flip-h.flip-v { transform: rotate(180deg) scale(-1,-1); }
img.rotate-270.flip-h.flip-v { transform: rotate(270deg) scale(-1,-1); }

.page-breadcrumb-detail {
	/* subtle breathing room from header, not too tall */
	margin-top: 6px;
}
/* Make detail page breadcrumb look like category breadcrumb (neutral gray, not blue/green) */
.page-breadcrumb-detail .breadcrumb a,
.page-breadcrumb-detail .breadcrumb-search a {
	color: #666;
}
.page-breadcrumb-detail .breadcrumb,
.page-breadcrumb-detail .breadcrumb-search {
	background: transparent !important;
	padding: 8px 0; /* match global breadcrumb spacing */
	margin-top: 0;
	margin-bottom: 0px !important;
	margin-left: 35px; /* keep same left offset as category */
}
.page-breadcrumb-detail .breadcrumb > a:not(:last-child)::after,
.page-breadcrumb-detail .breadcrumb-search > a:not(:last-child)::after {
	color: #666;
}
@media only screen and (max-width: 650px) {
	.page-breadcrumb-detail { margin-top: 6px; }
	.page-breadcrumb-detail .breadcrumb,
	.page-breadcrumb-detail .breadcrumb-search {
		padding: 8px 0; /* keep symmetric padding */
		margin-bottom: 6px;
		margin-left: 18px; /* match category mobile offset */
	}
}

/* used in jquery-rates.js to rate star in post comment */
.rates-container {
    white-space: nowrap; cursor: pointer;
}


.rates-yellow{
    filter: brightness(0) saturate(100%) invert(41%) sepia(75%) saturate(832%) hue-rotate(357deg) brightness(90%) contrast(99%);
}

.starRate {
	height:16px; position:relative;margin-top:-5px;
}

/* zoom image css */
.zoomable {width:100%; overflow:hidden;} 
.zoomable a {position:relative;} 
.zoomable a span { display:none; background-image:url(/images/zoom.png); background-repeat:no-repeat; 
width:48px; height:48px; position:absolute; float:left; left:20px; top:-50px;} 
.zoomable img { border: 0px; padding:0px;}
textarea.shoutBox {
	width:100%; height:25px; padding:10px; font-size:12px; border:1px solid #ddd; background-color:#fff; border-radius: 5px;
}

.postContent  {
	padding: 15px 25px 20px 27px; font-size: 18px;
	background-color: #fff;
}
@media only screen and (max-width: 750px) {	
	.postContent  {		
		padding: 15px 15px 15px 15px; width: 100%;		
	}	
}





.post-send-comment {
	margin-top:10px; text-align: right;
}

.postImagesPanel {
	border-bottom:0px solid #CCCCCC; padding:0px; display:none; background-color:#f6f6f6; width:100%; margin: 5px;
}


.postImagesContent {
	background-color:#FCFAF6;	padding: 10px 50px 0px 50px; 
}



.post_reply_auth {
	min-height:80px;
	margin-top: 5px;
	padding-top: 20px;
	background-color: transparent;
	border-top: 1px solid rgba(0,0,0,0.06);
	position: relative;
	z-index: 1;
}

.post_reply {
	min-height:80px;
	margin-top: 5px;
	padding-top: 20px;
	border-top: 1px solid rgba(0,0,0,0.06);
	position: relative;
	z-index: 1;
}

.post_comment {
	margin-top: 25px; color: #666; 
	clear: both; width: 100%; padding: 10px
}

.listRateStar {
	width: 16px !important; height: 16px !important;
}


@media only screen and (max-width: 650px) { 
	.postImagesContent   {		
		padding: 5px; padding-top: 10px;		
	}	
}
.postContentAutoConfig {
	font-size: 18px;
}
@media only screen and (max-width: 750px) { 
	.postContentAutoConfig {
		font-size: 1.125rem;
	}
}

.postContentAutoConfig * {	
    max-width: 100% !important;   
}
.postContentAutoConfig a {	
    font-size: inherit; color: revert ; text-decoration: revert;
}
.postContentAutoConfig img {
	max-width:100% !important;
	margin-bottom: 8px !important;
	height:auto !important; border: 1px solid #ccc;
	
}
.postContentAutoConfig .textbox-draggable {
	display: inline-block !important;
	border: 2px solid #333 !important;
	padding: 10px 15px !important;
	background: #fff !important;
	margin: 5px !important;
	border-radius: 4px !important;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
	box-sizing: border-box !important;
	/* Keep drag position on detail page */
	position: relative !important;
}
.postImagesContent img {
	border: 1px solid #ccc; padding: 2px;
	
}

/* POST VIEW */

  
  .postview-wrapper {
	padding: 0;	
	max-width: 100%;
	background: #fff;
	border: 0;
	overflow: visible;
  }
  
  .postview-box-title {
	margin: 25px 0px 15px 35px;
	padding: 0;
	max-width: 1100px;
  }
  
  .postview-title {
	color: #333;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	font-family: "Lexend Deca", Helvetica, 'Roboto', Arial, sans-serif;
	letter-spacing: -0.01em;
	margin: 0 !important;
  }
  .postview-func-box {
	max-width: 1100px; margin: 25px auto 20px;
  }
  .postview-func-list {
	display:flex; align-items:center; gap:8px; justify-content: flex-end; margin-right: 10px;
	flex-wrap: wrap;
  }

	.postview-func-list .postview-sub-action {
		flex: 0 1 auto;
		max-width: 240px;
		min-width: 0;
	}
  .postview-listAuthorAvatar {
	object-fit: cover; width:80px; height:80px; border-radius:4px; border:1px solid #d1d5db; box-shadow:0 2px 6px rgba(0,0,0,0.06);
  }
  .postview-postContent, .postview-postComment {
    padding: 25px 20px 35px;
    font-size: 18px;
    line-height: 1.7;
    background: #fff;
    overflow: hidden;
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: border-box;
  }

	/* Author toolbar under content: keep same max-width and centering as post content */
	.postview-author-toolbar {
		background: transparent;
		padding: 0 20px 10px 20px;
		max-width: 1100px;
		margin: 0 auto;
		box-sizing: border-box;
	}
	.postview-author-toolbar #authorToolbarUnderContent {
		text-align: right;
	}

	/* Replies/updates from seller should visually blend with the page (no full white box)
		 Keep padding and centering but remove the white background so it doesn't feel full-width. */
	.postview-postContent.postview-postContent--reply {
		background: transparent;
		padding: 18px 20px; /* slightly smaller vertical padding */
		margin: 0 auto; /* keep centered */
		border-top: none; /* border moved to parent container */
		box-shadow: none;
	}
  .postview-postContent img,
  .postview-postContent video,
  .postview-postContent iframe {
	  display: block;
	  max-width: 100%;
	  height: auto;
  }
  .postview-postContent img.inline,
  .postview-postContent img.icon {
     width: auto;
     max-width: 100%;
     margin-left: 0;
     margin-right: 0;
     display: inline;
  }
  .postview-post-image {
	flex: 0 0 auto;
	max-width: 400px;
	width: 100%;
  }
  @media only screen and (max-width: 650px) {
	.postview-box-title {		
		margin: 20px 18px 15px 18px;
	}
	.postview-title {
		font-size: 22px;
	}

	.postview-postContent, .postview-postComment {
		padding: 15px 18px 30px 18px;
	}
	.postview-postSignature {	
		padding: 15px 18px 15px 18px !important;		
	}
	.postview-section-head {
		padding: 10px 18px !important;
	}
	.postview-toolbar-wrapper {
		padding: 6px 0;
	}
	.postview-tool { 
		gap: 6px; 
		padding: 6px 12px; 
		width: calc(100% - 16px); 
		justify-content: center; 
		margin: 0 8px;
		border-radius: 40px;
	}
	.postview-sub-action { 
		padding: 6px 10px; 
		gap: 5px; 
		font-size: 12px;
		border-radius: 40px;
	}
	.postview-sub-action i {
		font-size: 14px;
	}
	.listPrice {
		margin: 16px 0px 15px 18px;
	}
	
  }
  @media only screen and (max-width: 750px) {
	.postview-post-image {
		max-width: 100%;
	}
  }
  @media only screen and (min-width: 1100px) {
	.postview-post-image {
		max-width: 700px;
	}
  }
  .postview-section-head {
	font-size: 17px;
	font-weight: 700;
	color: #3e2f21;
	padding: 14px 20px;
	background-color: #f5f5f5;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	letter-spacing: 0.01em;
	
	max-width: 1100px;
	margin: 0 auto;
	margin-top: 20px; display: flex; align-items: center; justify-content: space-between;
  }
  /* add spacing before section heading on larger screens */
  @media only screen and (min-width: 751px) {
    .postview-section-head { margin-top: 25px; }
  }
  
  
  .postview-postSignature {	
	padding: 15px 20px;
	background-color: #eee;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
  }
  
 
  .postview-smalltxt {
	font-size: 13px;
	color: #777;	
  }
  
	/* Floating sticky toolbar wrapper */
	.postview-toolbar-wrapper {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 100;
		background: #ffffff;
		background: rgba(255, 255, 255, 0.85);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-bottom: 1px solid rgba(226, 229, 234, 0.6);
		padding: 8px 0;
		margin-bottom: 12px;
		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
		transition: all 0.3s ease;
		/* Debug helper */
		min-height: 50px;
	}

/* allow opting out of sticky behavior for specific instances */
.postview-toolbar-wrapper.no-stick {
	position: static;
	top: auto;
	background: transparent;
	box-shadow: none;
}
	
	.postview-toolbar-wrapper.scrolled {
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
		background: #ffffff;
		background: rgba(255, 255, 255, 0.95);
		border-bottom: 2px solid rgba(37, 99, 235, 0.3);
	}

	.postview-tool,
  .postview-tool-2 {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 8px;
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,251,0.8) 100%);
    
    border-radius: 50px;
    padding: 8px 16px;    
    align-items: center;
		justify-content: flex-end;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    transition: all 0.3s ease;
  }
  
  .postview-tool:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
    transform: translateY(-1px);
  }
  
  .postview-tool-2 {
	margin-top: 10px;
  }
		.postview-report-box {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			background: transparent;          /* wrapper has no visuals */
			border: 0;
			border-radius: 0;
			padding: 0;                        /* avoid nested click gaps */
			box-shadow: none;
			margin: 0 35px 20px 35px;         /* spacing instead of padding on .text-right */
		}
		@media only screen and (max-width: 650px) {
			.postview-report-box { margin: 0 18px 15px 18px; }
		}
		.postview-report-box .postview-sub-action.sendContact {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			background: #f8fafc;              /* subtle light background */
			border: 1px solid #e5e7eb;        /* soft gray border */
			border-radius: 999px;             /* pill shape */
			padding: 8px 12px;                /* full clickable pill */
			box-shadow: 0 1px 2px rgba(0,0,0,0.04); /* gentle depth */
			color: #374151;                   /* neutral text */
			font-weight: 600;
		}
	.postview-report-box .postview-sub-action.sendContact:hover {
		background: rgba(55,65,81,0.06);  /* very light hover */
		color: #111827;
	}
	.postview-report-box .postview-sub-action.sendContact:active {
		background: rgba(55,65,81,0.10);
	}
	.postview-report-box .postview-sub-action.sendContact:focus-visible {
		outline: 2px solid rgba(37,99,235,0.35);
		outline-offset: 2px;
	}

  /* Dropdown menu for extra actions in postview-tool */
.postview-menu { position: relative; overflow: visible; }
  .postview-menu-dropdown {
    position: fixed;
    min-width: 200px;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 8px 0;
    z-index: 2147483647;
    display: none;
  }
  .postview-menu-dropdown.show { display: block; }
  
  .postview-tool-2 {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  
  .postview-menu-dropdown a {
    display: block;
    padding: 10px 16px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    font-weight: normal;
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    transition: background 0.2s ease;
  }
  
  .postview-menu-dropdown a:hover {
    background: #f3f4f6;
  }
  
  .postview-menu-dropdown a:first-child {
    border-radius: 8px 8px 0 0;
  }
  
  .postview-menu-dropdown a:last-child {
    border-radius: 0 0 8px 8px;
  }

  /* Explicit styling for menu items */
  .postview-menu-item {
    display: block !important;
    padding: 10px 16px !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: normal !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: left !important;
    transition: background 0.2s ease;
  }

  .postview-menu-item:hover {
    background: #f3f4f6 !important;
  }

			.postview-sub-action {
		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;
		margin-right: 5px;
	}
  .postview-sub-action i:not(:only-child) {
    margin-right: 0;
    font-size: 15px;
  }
	/* ensure icons inherit the default muted color */
	.postview-sub-action .bi, .postview-sub-action i { color: inherit; }
  
	.postview-sub-action:hover { 
		background-color: #d8dadf !important;
		border-color: #bfc3c7 !important;
	}
  
  .postview-sub-action:active { 
    background-color: #d0d2d6 !important;
    border-color: #bfc3c7 !important;
    text-decoration: none !important;
    color: inherit !important;
  }

  .postview-sub-action:link,
  .postview-sub-action:visited,
  .postview-sub-action:hover,
  .postview-sub-action:active,
  .postview-sub-action:focus {
    text-decoration: none !important;
    color: #050505 !important;
  }

	/* Top toolbar buttons: match bottom hover/active */
	.postview-toolbar-wrapper .postview-sub-action:hover,
	.postview-toolbar-wrapper .postview-sub-action.small-icon:hover {
		background-color: #d8dadf !important;
		border-color: #bfc3c7 !important;
	}

	.postview-toolbar-wrapper .postview-sub-action:active,
	.postview-toolbar-wrapper .postview-sub-action.small-icon:active {
		background-color: #d0d2d6 !important;
		border-color: #bfc3c7 !important;
	}

	/* Ensure toolbar doesn't clip dropdowns */
	.postview-toolbar { overflow: visible; }
	.postview-tool { overflow: visible; }

	/* Mobile-friendly dropdown: allow full-viewport width and fixed positioning via JS */
	@media (max-width: 700px) {
		.postview-menu-dropdown {
			max-width: calc(100vw - 16px);
			max-height: 60vh;
			overflow: auto;
		}
		.postview-tool {
			max-width: 100%;
			width: 100%;
			justify-content: center;
		}
	}
  .postview-sub-action:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
  .postview-sub-action .bi { font-size: 16px; line-height: 1; }

  /* Emphasis variants (optional to apply in markup) */
  .postview-sub-action.primary { 
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); 
    border-color: rgba(29, 78, 216, 0.8); 
    color: #fff; 
    box-shadow: 0 2px 8px rgba(37,99,235,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
  }
  
	.postview-sub-action.primary:hover { 
		background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); 
		box-shadow: 0 4px 16px rgba(37,99,235,0.4), inset 0 1px 0 rgba(255,255,255,0.4), 0 0 20px rgba(37,99,235,0.3); 
		/* keep primary buttons visually still on hover */
	}
  
	.postview-sub-action.primary:active { 
		background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%); 
		box-shadow: 0 1px 4px rgba(37,99,235,0.3), inset 0 1px 2px rgba(0,0,0,0.1);
		/* no transform on active */
	}

  .postview-sub-action.warning { background: #f59e0b; border-color: #d97706; color: #fff; }
  .postview-sub-action.warning:hover { background: #d97706; box-shadow: 0 2px 8px rgba(245,158,11,0.35); }
  .postview-sub-action.warning:active { background: #b45309; }

  .postview-sub-action.danger { background: #dc2626; border-color: #b91c1c; color: #fff; }
  .postview-sub-action.danger:hover { background: #b91c1c; box-shadow: 0 2px 8px rgba(220,38,38,0.35); }
  .postview-sub-action.danger:active { background: #991b1b; }

  .postview-sub-action.disabled, .postview-sub-action[aria-disabled="true"] { opacity: .6; pointer-events: none; }
	/* small icon-only variant used in header/top area */
			.postview-sub-action.small-icon {
				padding: 8px 10px;
				border-radius: 6px;
				font-size: 14px;
				background-color: #e4e6eb;
				border: 1px solid #d0d0d0;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				min-height: 36px;
				line-height: 1;
				transition: background-color 0.2s ease;
			}

	/* Muted variant: slightly gray text/icon for less-prominent buttons (used for Up buttons per request) */
	.postview-sub-action.muted {
		color: #4b5563; /* cool gray (approx #4b5563) */
		background: #f1f3f5; /* match default button gray */
		border-color: rgba(226,229,234,0.7);
		box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	}

		/* Header action icons should use white hover background and orange icon/text like 'Đã bán' */
		.postview-section-head .postview-sub-action.small-icon:hover,
		.postview-section-head #add-post-list:hover,
		.postview-section-head #headerPushBtn:hover,
		.postview-section-head #postviewMenuBtn:hover,
		/* reply three-dot buttons (ids like replyMenuBtn123) */
		.postview-menu .postview-sub-action.small-icon[id^="replyMenuBtn"]:hover {
			background-color: #d8dadf !important;
			border-color: #bfc3c7 !important;
		}
		.postview-section-head .postview-sub-action.small-icon:active,
		.postview-section-head #add-post-list:active,
		.postview-section-head #headerPushBtn:active,
		.postview-section-head #postviewMenuBtn:active,
		/* reply three-dot buttons active */
		.postview-menu .postview-sub-action.small-icon[id^="replyMenuBtn"]:active {
			background-color: #d0d2d6 !important;
			border-color: #bfc3c7 !important;
		}
	.postview-sub-action.muted i, .postview-sub-action.muted .bi {
		color: #4b5563; /* ensure icon inherits muted color */
	}

	/* Hover/active for muted variant: match default hover/active behavior */
	.postview-sub-action.muted:hover {
		background-color: #d8dadf !important;
		border-color: #bfc3c7 !important;
	}

	.postview-sub-action.muted:active {
		background-color: #d0d2d6 !important;
		border-color: #bfc3c7 !important;
	}
		.postview-sub-action.small-icon span { display: none; }
		@media only screen and (max-width: 650px) {
			.postview-sub-action.small-icon { min-width: 34px; min-height: 34px; }
		}
		/* primary variant for small-icon: keep the blue primary background and white icon */
			.postview-sub-action.small-icon.primary {
				background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
				border-color: rgba(29,78,216,0.8);
				color: #fff;
				box-shadow: 0 2px 8px rgba(37,99,235,0.25), inset 0 1px 0 rgba(255,255,255,0.18);
			}
			.postview-sub-action.small-icon.primary .bi { color: #fff; }
			/* default small-icon icon color */
				/* make small header icon match the bottom toolbar icon size and spacing */
				.postview-sub-action.small-icon .bi { color: #374151; font-size: 14px; line-height:1; }
				.postview-sub-action.small-icon { padding: 6px 10px; }
  
  .postview-post-head {
    display: flex;
    gap: 20px;
    padding: 0px;
    max-width: 1100px;
    margin: 0 auto;
    flex-wrap: wrap;
  }
  
  
  
  .postview-post-author {
		flex: 1;
		display: flex;
		gap: 18px;
		min-width: 0;
		align-items: flex-start;
		align-self: flex-start;
		/* Neutral gray background with subtle warmth */
		background: transparent;
		/* Yellow accent border (used sparingly) */
		border: 0;
		border-radius: 8px;
		padding: 18px 20px;
		margin: 0;
		overflow: hidden;
		/* Muted shadow for depth (reduced yellow saturation) */		
		position: relative;
		transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .postview-post-author {
		display: flex;
		flex-wrap: wrap; /* Allow wrapping for buttons */
		align-items: flex-start;
		gap: 15px;
		background: transparent;
		border: none;
	}

	.postview-postAuthorInfo {
		flex: 1;
	}
  /* Subtle decorative corner accent */
	.postview-post-author::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 60px;
		height: 60px;
		/* subtle yellow corner accent using ffcc00 at low opacity */
		background: none;
		pointer-events: none;
	}	
	/* Add spacing on the right of author box on larger screens */
	@media only screen and (min-width: 751px) {
		.postview-post-author { margin-right: 15px; }
	}
  
  .postview-postAvatar {
	position: relative;
	flex-shrink: 0;
  }
  
  
  
  
  
  .postview-postAuthorInfo {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 6px;
	align-self: flex-start;
	font-size: 13px;
  }
/* Ensure main post author card is borderless on small screens to match comment author-panel behavior */
@media only screen and (max-width:900px) {
	.postview-post-author {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		padding: 10px 12px !important;
		margin: 0 !important;
		margin-bottom: 15px !important; /* add spacing under author box on small screens */
	}
	/* Hide decorative corner accent */
	.postview-post-author::before { display: none !important; }
	/* Neutralize vintage avatar frame / shadows and inline avatar border */
	.postview-postAvatar::before { display: none !important; }
	.postview-postAvatar img {
		box-shadow: none !important;
		border: 0 !important;
		width: 56px !important;
		height: 56px !important;
		border-radius: 4px !important; /* keep square/small rounded avatar on mobile */
		object-fit: cover !important;
	}
}
	/* No-image layout adjustments on larger screens */
	@media only screen and (min-width: 751px) {
		.postview-post-head.no-image { 
			justify-content: center;
			padding: 30px 0;
			margin-bottom: 20px;
		}
		.postview-post-head.no-image .postview-post-image { display: none; }
		/* Center the author card and prevent it from stretching full width */
		.postview-post-head.no-image .postview-post-author {
			flex: 0 1 auto;          /* stop flex-grow pushing it to the right */
			max-width: 680px;        /* increased readable width */
			width: 100%;             /* take full available width up to max */
			margin: 0 auto !important;/* center horizontally and override any side margins */
			float: none;              /* neutralize any legacy float */
			align-self: center;       /* ensure vertical centering in row */
		}
	}
  
  .postview-mediumName {
	font-weight: 700;
	color: #3e2f21;
	font-size: 15px;
	text-decoration: none;
	line-height: 1.3;
	letter-spacing: 0.01em;
	position: relative;
	display: inline-block;
	
  }
  
  
  
	.postview-memberTitle {
		display: inline-block;
		
		color: #8b6914;
		font-size: 10px;
		padding: 3px 8px;
		border-radius: 12px;
		font-weight: 600;
		margin-top: 2px;
		align-self: start;
		border: 1px solid #8b6914;
		box-shadow: 
		  inset 0 1px 0 rgba(255, 255, 255, 0.5),
		  0 1px 3px rgba(139, 105, 20, 0.15);
		letter-spacing: 0.02em;
		text-transform: uppercase;
		transition: all 0.2s ease;
	}
	
	.postview-memberTitle:hover {
		background: linear-gradient(135deg, #fff9ed 0%, #ffefd5 100%);
		border-color: #c0a66f;
		transform: translateY(-1px);
		box-shadow: 
		  inset 0 1px 0 rgba(255, 255, 255, 0.6),
		  0 2px 5px rgba(139, 105, 20, 0.2);
	}
  
  .postview-postRating {
	font-size: 13px;
	color: #555;
  }
  
  .postview-postAddress {
	font-size: 12px;
	color: #74644f;
	font-weight: 400;
	line-height: 1.5;
	position: relative;	
	font-style: italic;
  }
  
   
  .postview-postContact {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 10px;
	flex-wrap: nowrap;
  }
  
	/* Action buttons: match Follow button gray styling for visual consistency */
	.postview-postContact .postview-buttonAction,
	.postview-postContact .btn-show-phone {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 7px 14px;
		font-size: 12px;
		line-height: 1.2;
		/* Make edges straight when grouped; follow's rounded corners applied to first/last via other rules */
		border-radius: 0;
		border: 1px solid #d0d0d0; /* match follow button border */
		background-color: #e4e6eb; /* Facebook-like gray to match Follow */
		color: #050505; /* match follow button text */
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		font-weight: 600;
		letter-spacing: 0.01em;
		position: relative;
		overflow: hidden;
		transition: background-color 0.2s ease, border-color 0.2s ease;
	}

	.postview-postContact .postview-buttonAction:hover,
	.postview-postContact .btn-show-phone:hover {
		background-color: #d8dadf; /* darker gray on hover (same as follow) */
		border-color: #bfc3c7;
		color: #050505;
	}

	.postview-postContact .postview-buttonAction:active,
	.postview-postContact .btn-show-phone:active {
		background-color: #d0d2d6;
		box-shadow: none;
	}

	.postview-postContact .postview-buttonAction:focus-visible,
	.postview-postContact .btn-show-phone:focus-visible {
		outline: 2px solid rgba(37, 99, 235, 0.18);
		outline-offset: 2px;
	}

	/* When phone is shown, keep steady look but preserve revealed state colors */
	.postview-postContact .btn-show-phone.is-shown {
		background-color: #fffdfa;
		border-color: #c6a65a;
		color: #3e2f21;
		cursor: default;
	}

	/* Subtle phone link look after reveal */
	.postview-postContact .btn-show-phone.is-shown a {
		color: inherit;
		text-decoration: underline;
		cursor: pointer;
	}
  
  .postview-phone img {
	vertical-align: middle;
	margin-right: 4px;
  }
  .postview-like-post a {
	color:#333;
  }  
  .postview-like-post a:hover {
	color:#CC0000;
  }
  .postview-like-post img {
	width: 20px;
	height: 20px;
  }
  
    
  @media only screen and (max-width: 750px) {
	.postview-post-head {
	  flex-direction: column;
	  align-items: center;
	  gap: 16px;
	}
  
	.postview-post-author {
	  flex-direction: row;
	  align-items: flex-start;
	  text-align: left;
	  gap: 10px;
	  padding: 10px;
	  width: 100%;
	}
	.postview-memberTitle {
		align-self: start;
	}
	
	.postview-mediumName {
		text-align: left;
	}
	.postview-postAvatar img {
	  width: 55px;
	  height: 55px;
	}

	.postview-postAddress {
		font-size: 11px;
	}
  
	.postview-postAuthorInfo {
	  align-items: flex-start;
	  text-align: left;
	}
  
	.postview-postContact {
	  justify-content: flex-start;
	  gap: 6px;
	  flex-wrap: nowrap;
	}
	
	.postview-postContact .postview-buttonAction,
	.postview-postContact .btn-show-phone {
		padding: 4px 6px;
		font-size: 11px;
		flex-shrink: 0;
	}
  
	 
	.postview-tool, .postview-postAction {
	  overflow-x: auto;
	  white-space: nowrap;
	  padding: 10px;
	}
  }  

  /* swiper slideshow of pictures*/
.pmb-swiper .swiper-container {
  width: 100%;
  
  margin-top:5px;
  margin-left: auto;
  margin-right: auto;
  max-width:800px
  
}
.pmb-swiper-img {
	max-height: 400px !important;  margin:0px;  background-color: #f5f9fa; max-width: 600px;
}
.swiper-slide {
  background-size: cover;
  background-position: center;
  
}
.gallery-top { 
  width: 100%;
  margin-bottom:5px;
}
.gallery-thumbs-horizontal {
  height: 110px; width:100%;
  box-sizing: border-box;
  padding: 15px; margin: 5px;
}
.gallery-thumbs-horizontal .swiper-wrapper {
	height: 100px;
}
.gallery-thumbs-horizontal .swiper-slide {
  height: 100%; 
  opacity: 0.6;  cursor: pointer; border-radius: 3px; border: 3px solid #f1f1f1;
}
.gallery-top .swiper-slide {
	opacity: 1; 
}
.gallery-top {  overflow: hidden; }
.gallery-top .swiper-wrapper {
	max-width: 400px !important;
}
.swiper-zoom-container {
	background-color:#f1f1f1;
}
.swiper-slide-prev, .swiper-slide-next {
	opacity: 0.6;
}
.gallery-thumbs-horizontal .swiper-slide-thumb-active {
	opacity: 1;  border: 3px solid #087cce;
  }

  .pmb-swiper-close-button {
	display: none;
	height: 45px;
	width: 45px;
	color: #F8820A ;
	position: fixed;
	top: 15px;
	right: 15px;
	font-size: 32px;
	text-align: center;
	cursor: pointer;
	z-index: 9999;
	opacity: .75;
 }
 
 .pmb-swiper-close-button:before {
	content: '\00D7';
 }
 
 .pmb-swiper-close-button:hover,
 .pmb-swiper-close-button:active {
	opacity: 1;
 }
 
 .pmb-swiper-fullscreen {
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100vw !important; 
	height: 100vh !important;
	background-color: #f5f9fa;
	z-index: 10 !important;
 }
 
 .pmb-swiper-fullscreen .gallery-top .swiper-slide {
	cursor: default;
	background-size: contain;
 }
 
 .pmb-swiper-fullscreen .pmb-swiper-close-button {
	display: block;
 }
 
 .pmb-swiper-fullscreen .gallery-top {
	height: 100%
 }
 
 .pmb-swiper-fullscreen .gallery-thumbs-horizontal {
	background-color: #f5f9fa;
	height: 20%;
	position: fixed;
	bottom: 0;
	width: 100%;
	opacity: 0;
	z-index: 10;
	transition: opacity .3s ease-in-out;
	transition-delay: .5s;
 }

@media screen and (orientation: portrait) {
	.pmb-swiper-fullscreen .gallery-thumbs-horizontal {		
		opacity: 1;		
	 }
} 
.pmb-swiper-fullscreen .gallery-thumbs-horizontal:hover {
	opacity: 1;
	transition-delay: 0s;
}
.pmb-swiper-fullscreen .swiper-zoom-container {
	display: inline-block;
    height: 100%;
    vertical-align: middle; z-index: 2; background-color: #eee;
	position: relative !important;
}
.pmb-swiper-fullscreen .pmb-swiper-img {
	max-height: 100% !important; vertical-align: middle;
}

/* Forum-style comment boxes for postdetail comments */
.pmb-comment-item {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.06);	
	border-radius: 6px;
	margin: 12px 18px;
	padding: 12px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.pmb-comment-item[data-status="0"] { background-color: #fff6f6; border-color: rgba(153,6,3,0.12); }
.pmb-comment-item[data-status="2"] { background-color: #fffaf0; }
.pmb-comment-avatar img { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; display:block; }
.pmb-comment-avatar { flex: 0 0 70px; text-align: center; }
.pmb-comment-main { flex: 1; min-width: 0; }
.pmb-comment-header { display:flex; gap:8px; align-items:center; margin-bottom:6px; flex-wrap:wrap; }
.pmb-comment-author { color:#2b2b2b; font-weight:700; text-decoration:none; }
.pmb-member-gold { width:20px; height:20px; vertical-align:middle; }
.pmb-comment-body { color: #333; line-height:1.6; padding: 6px 8px; background: #fafafa; border-radius:4px; border: 1px solid rgba(0,0,0,0.03); }
.pmb-comment-rating { display:inline-block; padding:4px 8px; background:#f6f6f6; border-radius:4px; margin-bottom:8px; }
.pmb-comment-meta { margin-top:8px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.pmb-comment-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.pmb-comment-actions .txtComment { color:#6b7280; text-decoration:none; }
.pmb-comment-actions .txtComment:hover { color:#111827; }
.pmb-date { color:#9ca3af; font-size:13px; }
.pmb-subreply { margin-top:8px; }

@media only screen and (max-width:750px) {
	.pmb-comment-item { flex-direction: row; gap:10px; margin:10px 12px; }
	.pmb-comment-avatar { flex: 0 0 56px; }
	.pmb-comment-body { padding:8px; }
}

/* vBulletin-like layout: author panel left, post box right */
.pmb-vb {
	display: flex;
	gap: 12px;
	align-items: stretch;
}
.pmb-vb .pmb-author-panel {
	width: 180px;
	min-width: 140px;
	background: #f5f6f7;
	border: 1px solid #d8dadd;
	border-radius: 4px;
	padding: 12px;
	/* layout as vertical column so avatar, name and VIP icon are centered */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.pmb-vb .pmb-author-avatar { width: 90px !important; height: 90px !important; border-radius: 4px; object-fit: cover; margin-bottom:8px; }
.pmb-vb .pmb-comment-author-avatar { width: 40px !important; height: 40px !important; border-radius: 4px; object-fit: cover; margin-bottom:8px; }
.pmb-vb .pmb-author-name { font-weight:700; color:#1f2d3d; text-align:center; }
.pmb-vb .pmb-author-role { font-size:12px; color:#6b7280; margin-bottom:8px; }
.pmb-vb .pmb-author-stats { font-size:12px; color:#8b8f94; margin-top:8px; }

.pmb-vb .pmb-post-box {
	flex: 1;
	border: 1px solid #cfd3d6;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.pmb-vb .pmb-post-header {
	background-color: #f5f6f7;
	padding: 10px 14px;
	border-bottom: 1px solid #d1d6d9;
	color: #0c3b57;
	font-weight: 700;
}

/* Header timestamp small gray badge */
.pmb-post-meta-time {	
	color: #374151; /* normal dark text */
	padding: 4px 8px;
	border-radius: 4px;
	font-weight: 400; /* normal */
	font-size: 13px;
}

.pmb-comment-menu {
	float: right;
	margin-left: 8px;
	color: #6b7280;
	text-decoration: none;
	font-size: 18px;
	line-height: 1;
}
.pmb-comment-menu:hover { color: #111827; }

.pmb-meta-actions { display: inline-flex; align-items: center; gap:8px; }
.pmb-vb .pmb-post-body {
	padding: 14px;
	background: #fff;
	color:#222;
	line-height:1.6;
}
.pmb-vb .pmb-post-footer {
	padding: 10px 14px;
	background: #fafafa;
	border-top: 1px solid #eceef0;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:12px;
	font-size:13px;
	color:#6b7280;
}

/* helper: use existing markup classes to apply vBulletin wrapper */
.pmb-comment-item.pmb-vb { display: flex; padding:12px; margin:12px 0; gap:12px; align-items:stretch; }
.pmb-comment-item.pmb-vb > .pmb-comment-avatar { display: none; }
.pmb-comment-item.pmb-vb > .pmb-comment-main { padding:0; }
.pmb-comment-item.pmb-vb .pmb-post-box .pmb-post-body { padding:12px; }

@media only screen and (max-width:900px) {
	.pmb-vb { flex-direction: column; gap: 0; }
	/* Author panel becomes a full-width row above the post box */
	.pmb-vb .pmb-author-panel { width: 100%; min-width:0; display:flex; gap:10px; align-items:center; padding:8px 10px; margin:0; box-sizing:border-box; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
	
	.pmb-vb .pmb-author-panel .pmb-author-avatar { width:56px !important; height:56px !important; }
	/* Make comment wrapper and post box fill available width on small screens and remove spacing */
	.pmb-comment-item.pmb-vb { width: calc(100% - 10px); box-sizing: border-box; padding: 0; gap: 0; margin-left: 5px; margin-right: 5px; }
	.pmb-vb .pmb-post-box { width: 100%; box-sizing: border-box; margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; }
	/* Remove author-panel bottom border so it sits flush with post-box */
	.pmb-vb .pmb-author-panel { margin-bottom: 15px; padding-top: 8px; padding-bottom: 8px; border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; border: 0; }

	.pmb-vb .pmb-author-panel + .pmb-post-box { margin-top: 0; padding-top: 0; }
	/* Reduce inner spacing to eliminate visible gap */
	.pmb-vb .pmb-post-header { padding: 8px 12px; }
	.pmb-vb .pmb-post-body { padding: 10px 12px; }
}

/* style for inline author mark (stars + numeric) */
.pmb-author-mark { display:inline-block; margin-left:8px; color:#b45309; font-weight:600; font-size:13px; vertical-align:middle; }
/* Phương án 1: remove heavy author-panel border on small screens and make it lightweight */
@media only screen and (max-width:750px) {
	/* Make the author panel transparent and remove borders/shadows so it doesn't stack with section header */
	.pmb-vb .pmb-author-panel {
		width: 100%;
		padding: 8px 10px;
		background: transparent;
		border: 0;
		box-shadow: none;
		border-radius: 0;
	}
	/* Ensure post box sits directly under author panel without duplicate border */
	.pmb-vb .pmb-post-box {
		margin-top: 0;
		border-top: 0;
		padding-top: 10px;
	}
	/* Slightly reduce spacing between stacked comments */
	.pmb-comment-item.pmb-vb { margin: 8px 5px; padding: 0; }
}

/* Ensure VIP medal inside author panel stays small and aligned */
.pmb-author-panel .pmb-vip-icon { width:20px; height:20px; display:inline !important; margin:0px 0 0 6px; vertical-align:middle; }

/* Keep author name and VIP icon on the same line when possible */
.pmb-author-inline { font-size: 12px; display: flex; align-items: center; width: 100%; overflow: visible; gap: 10px; }
.pmb-author-inline .pmb-author-name { display: inline-block; white-space: normal; max-width: none; }
.pmb-author-info { flex: 1; }
.pmb-comment-author-name-info { width: 100%; }
.pmb-comment-item .pmb-author-inline { max-width: 100%; }
.pmb-comment-item .pmb-author-info { max-width: 100%; }
/* Allow wrapping on very small screens where horizontal space is insufficient */
@media only screen and (max-width:900px) {
	.pmb-author-inline { white-space: normal; gap:6px; }
	.pmb-author-inline .pmb-author-name { white-space: normal; max-width: none; }
	.pmb-vb .pmb-author-panel { gap: 6px; }
	.pmb-vb .pmb-author-avatar { width:40px !important; height:40px !important; }
	.pmb-comment-author-name-info { text-align: left; }
	.pmb-author-info { text-align: left; }
}
/* For large screens, stack avatar on top and name below in a single column */
@media only screen and (min-width: 901px) {
	.pmb-author-inline { flex-direction: column; align-items: stretch; gap: 6px; }
	.pmb-comment-author-avatar { margin: 0 auto; }
}
.post-send-comment .postview-sub-action {
    background: linear-gradient(135deg, #ffcc00 0%, #d4af37 100%);
    color: #333;
    font-weight: bold;
    border: 1px solid #c0a66f;
    box-shadow: 0 2px 4px rgba(139, 105, 20, 0.25);
}
.pmb-author-panel .profile-vip-badge {
	align-self: auto !important;
}

/* Responsive container for related articles */
.postview-container-related {
	max-width: 1100px;
	margin: 25px 0px 15px 35px;
	padding: 0;
	box-sizing: border-box;
}

.postview-related {
	background: #fff;
	border-radius: 4px;
	padding: 25px 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.postview-related h4 {
	margin: 0 0 15px 0;
	font-size: 18px;
	font-weight: 600;
	color: #333;
	border-bottom: 2px solid #ffcc00;
	padding-bottom: 10px;
}

.postview-related-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.postview-related-item {
	padding: 10px 0;
	border-bottom: 1px solid #f0f0f0;
}

.postview-related-item:last-child {
	border-bottom: none;
}

.postview-related-item a {
	color: #0066cc;
	text-decoration: none;
	font-size: 15px;
	line-height: 1.5;
	transition: color 0.2s ease;
}

.postview-related-item a:hover {
	color: #ffcc00;
	text-decoration: underline;
}

@media only screen and (max-width: 750px) {
	.postview-container-related {
		margin: 20px 0px 12px 18px;
		padding: 0;
	}

	.postview-related {
		padding: 18px 15px;
	}

	.postview-related h4 {
		font-size: 16px;
		margin-bottom: 12px;
		padding-bottom: 8px;
	}

	.postview-related-item {
		padding: 8px 0;
	}

	.postview-related-item a {
		font-size: 14px;
	}
}

@media only screen and (max-width: 480px) {
	.postview-container-related {
		margin: 18px 0px 10px 12px;
		padding: 0;
	}

	.postview-related {
		padding: 15px 12px;
	}

	.postview-related h4 {
		font-size: 15px;
		margin-bottom: 10px;
	}

	.postview-related-item {
		padding: 6px 0;
	}

	.postview-related-item a {
		font-size: 13px;
	}
}

/* Utility: hidden state */
.hidden {
	display: none !important;
}