/* ==========================================================================
   motion.css — Lớp hiệu ứng chuyển động cho bdstaybaccuchi
   --------------------------------------------------------------------------
   Nguyên tắc:
   - Chỉ dùng transform / opacity (chạy trên GPU, không gây "giật" layout).
   - Không dùng display:none -> block để hiện/ẩn, vì như vậy KHÔNG thể chuyển động.
   - Tôn trọng cài đặt "giảm chuyển động" của hệ điều hành.
   - Muốn tắt toàn bộ hiệu ứng: bỏ enqueue file này trong functions.php.
   ========================================================================== */

:root {
	--ease-out:    cubic-bezier(.16, 1, .3, 1);   /* vào nhanh, dừng êm */
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--dur-1: .14s;   /* chạm/hover */
	--dur-2: .26s;   /* menu, nút */
	--dur-3: .42s;   /* drawer, thẻ */
}

/* ---------- 1. Cuộn trang mượt ---------- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px; /* để tiêu đề không bị thanh menu che khi nhảy tới #id */
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ==========================================================================
   2. THANH MENU CHÍNH (thanh đỏ)
   ========================================================================== */

.mainnav {
	transition: box-shadow var(--dur-2) var(--ease-out);
}
.mainnav.is-stuck { box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }

/* Mục menu cha: gạch chân chạy ra thay vì đổi nền đột ngột */
.mainnav__list > li > a {
	position: relative;
	transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.mainnav__list > li > a::after {
	content: '';
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 11px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur-2) var(--ease-out);
}
.mainnav__list > li:hover > a::after,
.mainnav__list > li:focus-within > a::after,
.mainnav__list > .current-menu-item > a::after,
.mainnav__list > .current-menu-ancestor > a::after,
.mainnav__list > .current_page_item > a::after {
	transform: scaleX(1);
}

/* Mũi tên chỉ mục có menu con: vẽ bằng CSS, xoay 180° khi mở */
/* (:has() để vẫn chạy với menu không có sẵn class của WordPress) */
.mainnav__list > .menu-item-has-children > a::before,
.mainnav__list > li:has(> .sub-menu) > a::before {
	content: '';
	order: 99;
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: .9;
	transition: transform var(--dur-2) var(--ease-out);
}
.mainnav__list > .menu-item-has-children:hover > a::before,
.mainnav__list > .menu-item-has-children:focus-within > a::before,
.mainnav__list > li:has(> .sub-menu):hover > a::before,
.mainnav__list > li:has(> .sub-menu):focus-within > a::before {
	transform: rotate(-135deg);
	margin-top: 3px;
}

/* ---------- Menu xổ xuống: mờ dần + trượt xuống, không bật/tắt tức thì ---------- */
.mainnav .sub-menu {
	display: block;            /* luôn block; ẩn bằng opacity + visibility mới chuyển động được */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-10px) scale(.98);
	transform-origin: top left;
	overflow: hidden;
	transition:
		opacity var(--dur-1) ease,
		transform var(--dur-2) var(--ease-out),
		visibility 0s linear var(--dur-2);
}
.mainnav li:hover > .sub-menu,
.mainnav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0) scale(1);
	transition-delay: 0s;
}

/* Từng mục con trượt vào lần lượt (stagger) -> cảm giác mượt, có nhịp */
.mainnav .sub-menu > li {
	opacity: 0;
	transform: translateX(-7px);
	transition: opacity var(--dur-1) ease, transform var(--dur-2) var(--ease-out);
}
.mainnav li:hover > .sub-menu > li,
.mainnav li:focus-within > .sub-menu > li {
	opacity: 1;
	transform: none;
}
.mainnav li:hover > .sub-menu > li:nth-child(1)  { transition-delay: .015s; }
.mainnav li:hover > .sub-menu > li:nth-child(2)  { transition-delay: .035s; }
.mainnav li:hover > .sub-menu > li:nth-child(3)  { transition-delay: .055s; }
.mainnav li:hover > .sub-menu > li:nth-child(4)  { transition-delay: .075s; }
.mainnav li:hover > .sub-menu > li:nth-child(5)  { transition-delay: .095s; }
.mainnav li:hover > .sub-menu > li:nth-child(6)  { transition-delay: .115s; }
.mainnav li:hover > .sub-menu > li:nth-child(7)  { transition-delay: .135s; }
.mainnav li:hover > .sub-menu > li:nth-child(8)  { transition-delay: .155s; }
.mainnav li:hover > .sub-menu > li:nth-child(9)  { transition-delay: .175s; }
.mainnav li:hover > .sub-menu > li:nth-child(n+10) { transition-delay: .19s; }

.mainnav .sub-menu a {
	transition: background-color var(--dur-1) ease, color var(--dur-1) ease, padding-left var(--dur-2) var(--ease-out);
}
.mainnav .sub-menu a:hover { padding-left: 22px; }

/* ---------- Dải menu mobile (viên thuốc cuộn ngang) ---------- */
.mainnav__mobile a {
	transition: background-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.mainnav__mobile a:hover,
.mainnav__mobile a:focus-visible { background: rgba(255, 255, 255, .28); transform: translateY(-1px); }
.mainnav__mobile { -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   3. DRAWER (menu trượt bên trái trên mobile)
   ========================================================================== */
.drawer {
	display: block;              /* thay cho display:none */
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-2) ease, visibility 0s linear var(--dur-3);
}
.drawer.is-open {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}
.drawer__backdrop {
	opacity: 0;
	backdrop-filter: blur(0px);
	transition: opacity var(--dur-3) ease, backdrop-filter var(--dur-3) ease;
}
.drawer.is-open .drawer__backdrop { opacity: 1; backdrop-filter: blur(2px); }
.drawer__panel {
	animation: none !important;             /* bỏ keyframe cũ, dùng transform để mượt */
	transform: translateX(-102%);
	box-shadow: 0 0 40px rgba(0, 0, 0, .22);
	transition: transform var(--dur-3) var(--ease-out);
	will-change: transform;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

/* Mục menu trong drawer */
.drawer__menu a {
	transition: background-color var(--dur-1) ease, color var(--dur-1) ease, padding-left var(--dur-2) var(--ease-out);
	border-radius: 6px;
}
.drawer__menu a:hover,
.drawer__menu a:focus-visible { background: var(--c-primary-50, #fdecec); padding-left: 10px; }

/* Mục có menu con trong drawer: có nút mở/đóng riêng (JS tạo) để link vẫn bấm được */
.drawer__menu .menu-item-has-children { position: relative; }
.drawer__menu .menu-item-has-children > a { padding-right: 46px; }
.drawer__menu .drawer__toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	border-radius: 6px;
	transition: background-color var(--dur-1) ease;
}
.drawer__menu .drawer__toggle:hover { background: var(--c-primary-50, #fdecec); }
.drawer__menu .drawer__toggle::after {
	content: '';
	width: 7px;
	height: 7px;
	margin-top: -3px;
	border-right: 2px solid var(--c-muted, #667085);
	border-bottom: 2px solid var(--c-muted, #667085);
	transform: rotate(45deg);
	transition: transform var(--dur-2) var(--ease-out);
}
.drawer__menu .menu-item-has-children.is-open > .drawer__toggle::after { transform: rotate(-135deg); margin-top: 3px; }
.drawer__menu .sub-menu {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height var(--dur-3) var(--ease-out), opacity var(--dur-2) ease;
}
.drawer__menu .menu-item-has-children.is-open > .sub-menu { max-height: 640px; opacity: 1; }

/* ==========================================================================
   4. THẺ TIN — nhấc lên nhẹ + ảnh zoom chậm
   ========================================================================== */
.card-tile,
.card-row {
	transition:
		transform var(--dur-3) var(--ease-out),
		box-shadow var(--dur-3) var(--ease-out),
		border-color var(--dur-2) ease;
}
.card-tile__media img,
.card-row__media img {
	transition: transform var(--dur-3) var(--ease-out);
	backface-visibility: hidden;
}
.card-tile:hover,
.card-tile:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(16, 24, 40, .14);
	border-color: rgba(202, 37, 43, .35);
}
.card-row:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16, 24, 40, .10); }
.card-tile:hover .card-tile__media img,
.card-row:hover .card-row__media img { transform: scale(1.045); }

.card-tile__title, .card-row__title { transition: color var(--dur-1) ease; }
.card-tile:hover .card-tile__title,
.card-row:hover .card-row__title { color: var(--c-primary); }

/* ==========================================================================
   5. NÚT BẤM — nhấc nhẹ khi trỏ, lún xuống khi bấm
   ========================================================================== */
.btn {
	transition:
		background-color var(--dur-1) ease,
		color var(--dur-1) ease,
		border-color var(--dur-1) ease,
		box-shadow var(--dur-2) var(--ease-out),
		transform var(--dur-1) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 24, 40, .14); }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--c-accent, #e8a200); outline-offset: 2px; }

.icon-btn { transition: background-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) var(--ease-out); }
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn:active { transform: scale(.94); }

/* ==========================================================================
   6. LIÊN KẾT, NHÃN, Ô NHẬP LIỆU
   ========================================================================== */
.site-main a { transition: color var(--dur-1) ease; }

.badge, .tag, .chip, .pill {
	transition: background-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.badge:hover, .tag:hover, .chip:hover, .pill:hover { transform: translateY(-1px); }

input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], select, textarea {
	transition: border-color var(--dur-1) ease, box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-1) ease;
}
input:focus, select:focus, textarea:focus {
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(202, 37, 43, .14);
	outline: none;
}

/* Ô tìm kiếm ở topbar */
.topbar__search input { transition: background-color var(--dur-2) ease, box-shadow var(--dur-2) var(--ease-out); }
.topbar__search input:focus { box-shadow: 0 0 0 3px rgba(202, 37, 43, .18); }

/* ---------- Sidebar: mục khu vực / chuyên mục trượt nhẹ khi trỏ ---------- */
.widget ul li a,
.tax-list a,
.list-link {
	transition: color var(--dur-1) ease, padding-left var(--dur-2) var(--ease-out), background-color var(--dur-1) ease;
}
.widget ul li a:hover,
.tax-list a:hover,
.list-link:hover { padding-left: 6px; color: var(--c-primary); }

/* ---------- Tiêu đề khối: gạch nhấn chạy ra ---------- */
.section-title h2::after,
.widget__title::after {
	transition: transform var(--dur-3) var(--ease-out);
	transform-origin: left center;
}

/* ---------- Thanh tab nhu cầu (Bán / Cho thuê / Sang nhượng) ---------- */
.demand-tabs button {
	transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) ease,
	            transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.demand-tabs button:active { transform: scale(.97); }
.demand-tabs button[aria-selected="true"] { box-shadow: 0 4px 14px rgba(202, 37, 43, .22); }

/* ---------- Slider tin VIP: cuộn có "bám" ---------- */
[data-track] {
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.section-title__nav button {
	transition: background-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.section-title__nav button:hover { transform: scale(1.06); }
.section-title__nav button:active { transform: scale(.94); }

/* ---------- Bộ lọc dạng sheet (mobile) ---------- */
.filter-sheet { transition: transform var(--dur-3) var(--ease-out); will-change: transform; }

/* ==========================================================================
   7. HIỆN DẦN KHI CUỘN  (JS thêm .js-reveal rồi .is-in)
   Chỉ bật khi JS chạy -> không có JS thì nội dung vẫn hiện bình thường.
   ========================================================================== */
html.has-motion .js-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
html.has-motion .js-reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   7b. WIDGET THỐNG KÊ TRỰC TUYẾN
   ========================================================================== */
.widget--stats .stats-list__head {
	display: block;
	margin-top: 2px;
	padding-top: 9px;
	border-top: 1px solid var(--c-border, #e6e8ec);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--c-muted, #667085);
}
.widget--stats .stats-list > li.stats-list__head { padding-bottom: 2px; }
.widget--stats .stats-list strong { display: inline-block; will-change: transform; }
.widget--stats .stats-list strong.is-bump { animation: bds-bump .55s var(--ease-out); }
@keyframes bds-bump {
	0%   { transform: scale(1); color: var(--c-primary, #ca252b); }
	32%  { transform: scale(1.24); color: var(--c-primary, #ca252b); }
	100% { transform: scale(1); }
}
.widget--stats .stats-list__foot {
	display: flex;
	justify-content: space-between;
	margin: 9px 0 0;
	font-size: 11px;
	color: var(--c-muted, #667085);
}
.widget--stats .stats-list__foot span { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   7c. KHỐI "XEM NHIỀU NHẤT" — làm nổi bật
   ========================================================================== */
.widget--stats .stats-list__top {
	flex-direction: column;
	align-items: stretch;
	gap: 9px;
	margin-top: 8px;
	padding: 11px 12px 12px;
	border: 0;
	border-left: 3px solid var(--c-primary, #ca252b);
	border-radius: 10px;
	background: linear-gradient(135deg, #fff5f5 0%, #fff 62%);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
	transition: box-shadow var(--dur-2) var(--ease-out);
}
.widget--stats .stats-list__top:hover { box-shadow: 0 8px 20px rgba(202, 37, 43, .15); }

.widget--stats .stats-top__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-primary, #ca252b);
}
.widget--stats .stats-top__label .icon { width: 14px; height: 14px; }

.widget--stats .stats-top__card {
	display: grid;
	grid-template-columns: 62px 1fr;
	gap: 10px;
	align-items: center;
	text-decoration: none !important;
	color: inherit;
}
.widget--stats .stats-top__media {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border-radius: 8px;
	overflow: hidden;
	background: #eef1f5;
	color: #b6bec9;
}
.widget--stats .stats-top__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
.widget--stats .stats-top__card:hover .stats-top__media img { transform: scale(1.07); }
.widget--stats .stats-top__media .icon { width: 24px; height: 24px; }

.widget--stats .stats-top__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.widget--stats .stats-top__views {
	align-self: flex-start;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	background: var(--c-primary, #ca252b);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 9px;
	border-radius: 999px;
	white-space: nowrap;
}
.widget--stats .stats-top__views strong { color: #fff; font-size: 13px; font-weight: 800; }
.widget--stats .stats-top__title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.42;
	color: var(--c-text, #1d2939);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color var(--dur-1) ease;
}
.widget--stats .stats-top__card:hover .stats-top__title { color: var(--c-primary, #ca252b); }

/* ==========================================================================
   7d. NÚT "LÊN ĐẦU TRANG" (kèm vòng tiến trình cuộn)
   ========================================================================== */
.to-top {
	position: fixed;
	right: 18px;
	bottom: 78px;
	z-index: 8999;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--c-primary, #ca252b);
	box-shadow: 0 6px 20px rgba(16, 24, 40, .2);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px) scale(.85);
	transition:
		opacity var(--dur-2) ease,
		transform var(--dur-2) var(--ease-out),
		visibility 0s linear var(--dur-2),
		background-color var(--dur-1) ease,
		color var(--dur-1) ease;
}
.to-top.is-show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { background: var(--c-primary, #ca252b); color: #fff; transform: translateY(-3px); }
.to-top:active { transform: scale(.93); }
.to-top > .icon { position: relative; z-index: 1; width: 20px; height: 20px; }

.to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.to-top__track { fill: none; stroke: rgba(202, 37, 43, .16); stroke-width: 2.5; }
.to-top__bar {
	fill: none;
	stroke: var(--c-primary, #ca252b);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 131.95;
	stroke-dashoffset: 131.95;
	transition: stroke-dashoffset .1s linear, stroke .2s ease;
}
.to-top:hover .to-top__track { stroke: rgba(255, 255, 255, .34); }
.to-top:hover .to-top__bar { stroke: #fff; }

/* Trên mobile có thanh liên hệ dưới cùng -> đẩy nút lên cao hơn nút chat */
@media (max-width: 991px) {
	.to-top { right: 12px; bottom: 138px; }
}

/* ==========================================================================
   7e. KHUNG CHAT — dấu hiệu còn hội thoại + nút bắt đầu lại
   ========================================================================== */
.bds-chat__fab { position: relative; }

/* Chấm báo trên nút chat khi khách đang có hội thoại dở */
.bds-chat.has-history .bds-chat__fab::after {
	content: '';
	position: absolute;
	top: 5px;
	right: 7px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--c-accent, #e8a200);
	border: 2px solid #fff;
	animation: bds-pulse 1.8s ease-in-out infinite;
}

/* Nút "Bắt đầu lại" cạnh nút đóng */
.bds-chat__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: #fff;
	opacity: .8;
	cursor: pointer;
	padding: 4px;
	margin-right: 2px;
	border-radius: 6px;
	transition: opacity var(--dur-1) ease, background-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.bds-chat__reset:hover { opacity: 1; background: rgba(255, 255, 255, .18); }
.bds-chat__reset:active { transform: scale(.9) rotate(-25deg); }

/* Thẻ tin trong chat: gợi ý rõ là bấm được, mở tab mới nên hội thoại không mất */
.bds-card-chat:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 24, 40, .13); }
.bds-chat__body { scroll-behavior: smooth; }

/* Nút micro — nhập bằng giọng nói */
.bds-chat__mic {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border: 1px solid var(--c-border, #e6e8ec);
	border-radius: 50%;
	background: #fff;
	color: var(--c-primary, #ca252b);
	cursor: pointer;
	transition: background-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.bds-chat__mic[hidden] { display: none; }
.bds-chat__mic:hover { background: var(--c-primary-50, #fdecec); }
.bds-chat__mic:active { transform: scale(.92); }

/* Đang nghe: nút đỏ lên và tỏa vòng sáng nhịp nhàng */
.bds-chat__mic[aria-pressed="true"] {
	background: var(--c-primary, #ca252b);
	border-color: var(--c-primary, #ca252b);
	color: #fff;
	animation: bds-mic-pulse 1.3s ease-out infinite;
}
@keyframes bds-mic-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(202, 37, 43, .55); }
	100% { box-shadow: 0 0 0 13px rgba(202, 37, 43, 0); }
}

/* Dòng trạng thái ngay trên ô nhập */
.bds-chat__hint {
	padding: 8px 15px 0;
	background: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--c-primary, #ca252b);
}
.bds-chat__hint[hidden] { display: none; }

/* ==========================================================================
   8. GIẢM CHUYỂN ĐỘNG — người dùng bật "giảm hiệu ứng" thì tắt hết
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; scroll-padding-top: 0; }
	*, *::before, *::after {
		animation-duration: .001s !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001s !important;
	}
	html.has-motion .js-reveal { opacity: 1; transform: none; }
	.card-tile:hover, .card-row:hover, .btn:hover { transform: none; }
}

/* Máy yếu / tiết kiệm pin: bỏ hiệu ứng nặng */
@media (max-width: 480px) {
	.card-tile:hover .card-tile__media img,
	.card-row:hover .card-row__media img { transform: none; }
}