/* ===== Màu chủ đạo: CAM =====
   Toàn bộ theme (nút .btn-primary, .text-primary, .bg-primary, .border-primary, badge, active
   state của menu...) đều tính từ biến gốc --pr-rgb (định nghĩa trong style.css gốc của Applist,
   mặc định là tím rgb(94,75,219)). Chỉ cần override lại biến này, không cần sửa từng class riêng lẻ. */
:root {
	--pr-rgb: 253, 126, 20; /* Cam - tương đương #fd7e14 */
}
/* Bootstrap 5 dùng thêm biến --bs-primary riêng cho 1 số tiện ích (ví dụ .btn-check:checked, focus-ring) */
:root, [data-bs-theme] {
	--bs-primary: #fd7e14;
	--bs-primary-rgb: 253, 126, 20;
	--bs-link-color: #fd7e14;
	--bs-link-color-rgb: 253, 126, 20;
	--bs-link-hover-color: #dc6803;
}
a { color: #fd7e14; }
a:hover { color: #dc6803; }
.hero-banner { background: linear-gradient(135deg, #fd7e14, #ffb066) !important; }

/* Tùy biến nhẹ cho website Thư viện Quy hoạch Việt Nam - không thay đổi bố cục Applist */
.logo-text { letter-spacing: .2px; }
.doc-card .doc-thumb { height: 200px; object-fit: cover; width: 100%; border-radius: 8px 8px 0 0; }
.doc-card .badge-price-free { background:#20c997; }
.doc-card .badge-price-premium { background:#fd7e14; }
.doc-card .badge-price-paid { background:#ff6b6b; }
.province-card img { height: 160px; width:100%; background:#fff4e8; }
.preview-watermarked { position: relative; }
.rating-stars i { color:#ffb400; }

/* ===== Header: đảm bảo menu ngang không bị đẩy xuống 2 dòng / vỡ layout trên màn hình rộng =====
   Nguyên nhân gốc: CSS gốc Applist đặt .horizontalMenu>.horizontalMenu-list ở chế độ
   display:block + float:left + width:100% (thiết kế cho menu gốc, ít mục hơn). Với menu đã
   tuỳ biến (nhiều mục tiếng Việt dài hơn), các <li> float dồn lại và ngắt dòng xấu ở màn hình
   rộng. Ép sang flex thật (không phải chỉ set flex-wrap suông - phải có display:flex thì
   flex-wrap mới có tác dụng) + bỏ width:100% cứng, cho phép cuộn ngang thay vì vỡ dòng.
   QUAN TRỌNG: chỉ áp dụng từ 992px trở lên (đúng breakpoint desktop của template) - nếu áp
   dụng cả cho mobile, !important sẽ đè luôn lên display:none mà horizontal.js dùng để đóng
   menu mobile lúc bấm nút toggle, khiến menu mobile không đóng lại được. */
@media (min-width: 992px) {
	.horizontalMenu > .horizontalMenu-list {
		display: flex !important;
		flex-wrap: nowrap !important;
		width: auto !important;
		max-width: 100%;
		float: none !important;
	}
	.horizontalMenu > .horizontalMenu-list > li {
		float: none !important;
	}
	.horizontal-mainwrapper { overflow-x: auto; overflow-y: visible; scrollbar-width: thin; }
	.horizontalMenu-list > li > a { white-space: nowrap; padding-left: .75rem !important; padding-right: .75rem !important; }
}
/* ===== Sửa lỗi z-index: sidebar sticky (giá/tải xuống) ở trang chi tiết tài liệu đè lên
   dropdown menu người dùng khi cuộn trang. Bootstrap .sticky-top mặc định z-index:1020,
   cao hơn .dropdown-menu (1000), khiến sidebar che mất menu. Đưa toàn bộ header lên tầng
   cao nhất để dropdown luôn hiển thị phía trên mọi nội dung sticky trong trang. ===== */
.header-main { position: relative; z-index: 1035; box-shadow: 0 2px 10px rgba(15,23,42,.06); }
.header-main .dropdown-menu { z-index: 1045; }
main .sticky-top { z-index: 5; }

/* ===== Hero: tăng độ tương phản chữ trên nền gradient, bo góc nhất quán ===== */
.hero-banner h1 { text-shadow: 0 2px 12px rgba(0,0,0,.25); letter-spacing: .2px; }
.hero-banner p { text-shadow: 0 1px 6px rgba(0,0,0,.2); opacity: .95; }
.hero-search-box { background: rgba(255,255,255,.98); border-radius: 14px; box-shadow: 0 15px 40px rgba(15,23,42,.18); }
.hero-search-box .form-control,
.hero-search-box .form-select { border: 1px solid #e3e7ee; }

/* ===== Card đồng bộ: bo góc, đổ bóng nhẹ, hiệu ứng hover nhất quán toàn site ===== */
.card { border: 1px solid #edf0f5; border-radius: 12px; box-shadow: 0 2px 10px rgba(15,23,42,.04); transition: box-shadow .2s ease, transform .2s ease; margin-block-end: 0; }
.province-card, .doc-card { overflow: hidden; }
.province-card:hover, .doc-card:hover { box-shadow: 0 10px 26px rgba(15,23,42,.1); transform: translateY(-2px); }
.province-card img, .doc-card .doc-thumb { transition: transform .3s ease; }
.province-card:hover img { transform: scale(1.04); }

/* ===== Khoảng trống giữa header và nội dung (áp dụng toàn site) ===== */
main { display: block; padding-top: 50px; }
main > section:first-child.hero-banner { margin-top: -28px; } /* Trang chủ có Hero riêng, không cần khoảng trống thừa phía trên */

/* ===== Khoảng cách giữa các section trang chủ đồng bộ hơn ===== */
main section.container,
main section.container-fluid { margin-bottom: 8px; }
main h3, main h1 { letter-spacing: .1px; }

/* ===== Sidebar bộ lọc (Lọc theo danh mục/tỉnh thành...): giãn cách đều, dễ nhìn ===== */
.filter-sidebar .form-label { font-weight: 500; }
.filter-sidebar .form-select { padding-top: .5rem; padding-bottom: .5rem; }

/* ===== Khung icon phương thức thanh toán: hình vuông bo góc, icon căn giữa ===== */
.payment-icon-box {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
/* ===== Icon mạng xã hội (header + footer): đồng bộ màu cam chủ đạo ===== */
.top-bar .social-icon,
.socials .social-icon { color: #fd7e14 !important; }
.footer-main .btn-floating.bg-facebook,
.footer-main .btn-floating.bg-info,
.footer-main .btn-floating.bg-danger { background: #fd7e14 !important; }
/* ===== Footer: link tone nhẹ nhàng hơn khi hover ===== */
footer a { transition: color .15s ease; }
footer a:hover { color: #2ddcd3 !important; }

/* ===== Nút tìm kiếm trên menu: gọn, hoà hợp màu chủ đạo, không bị lệch tông ===== */
.rightside-btns .btn-icon {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none !important;
	background: transparent !important;
	color: #fd7e14 !important;
	box-shadow: none !important;
}
/* ===== Nút Đăng nhập / Đăng ký: bằng chiều rộng với nhau ===== */
.auth-btn { min-width: 104px; text-align: center; }

/* ===== Nhóm nút chia sẻ: luôn 1 hàng, không xuống dòng; cuộn ngang nếu quá hẹp ===== */
.share-buttons { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 2px; }
.share-icon-btn {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: transparent;
	border: 1px solid #e5e7eb;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, transform .15s ease;
	cursor: pointer;
}
.share-icon-btn:hover { background: rgba(253, 126, 20, .08); transform: translateY(-2px); border-color: rgba(253, 126, 20, .3); }

/* ===== Feather icons (fe fe-*): dùng màu cam chủ đạo thay vì màu mặc định của template ===== */
.fe { color: #fd7e14 !important; }
.horizontalMenu-list > li > a .fe,
.dropdown-item .fe,
footer .fe { color: inherit; } /* Trong menu/dropdown/footer giữ màu chữ hiện tại, tránh lạc tông với text xung quanh */

/* ===== Icon (.fa) trong các ô/badge có kích thước cố định (nút tròn, khung định dạng...): canh giữa tuyệt đối ===== */
.btn-icon .fa,
.btn-floating .fa,
.social-icon .fa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}

/* ===== Padding-top cho các section nội dung chính (đồng bộ khoảng cách với thanh menu) ===== */
main section.container,
main section.container-fluid {
	padding-top: 8px;
}

/* ===== Nút "Chi tiết" trong thẻ tài liệu: đảm bảo không tràn chữ ra ngoài dù cột hẹp ===== */
.item-card9-cost .btn {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: .5rem;
	padding-right: .5rem;
}

/* ===== Bỏ width:80px cố định của .item-card9-img (rule gốc trong style.css) - ảnh đại diện
   tài liệu trong thẻ danh sách không bị bó hẹp chiều rộng ===== */
.item-card9-img { width: auto; }
/* ===== Container: tăng chiều rộng tối đa lên một chút cho thoáng hơn ===== */
@media (min-width: 1200px) {
	.container { max-width: 1280px; }
}

/* ===== Khu vực bên phải thẻ tài liệu (giá + tỉnh thành + đánh giá): căn giữa, cân đối, responsive ===== */
.doc-card-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-top: 12px;
	padding-bottom: 12px;
	border-inline-start: 1px solid #edf0f5;
}
.doc-price-badge {
	font-size: 13px;
	font-weight: 700;
	padding: 6px 16px;
	border-radius: 20px;
	letter-spacing: .3px;
}
.doc-card-province {
	font-size: 13px;
	margin-top: 8px;
}
@media (max-width: 991px) {
	.doc-card-side {
		border-inline-start: none;
		border-top: 1px solid #edf0f5;
		margin-top: 14px;
		padding-top: 14px;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px 16px;
	}
	.doc-card-province { margin-top: 0; }
}

/* ===== Thẻ tài liệu phong cách Metro UI: phẳng, màu pastel, không đổ bóng nặng ===== */
.doc-card-metro {
	border: none;
	border-radius: 6px;
	box-shadow: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.doc-card-metro:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,.08); }
.doc-card-metro.tile-pastel-green { background: #ffffff; }
.doc-card-metro.tile-pastel-purple { background: #ffffff; }
.doc-card-metro.tile-pastel-pink { background: #ffffff; }
.doc-card-title { color: #2d3748; padding-right: 90px; }
.doc-card-metro:hover .doc-card-title { color: #fd7e14; }
@media (max-width: 576px) {
	.doc-card-title { padding-right: 60px; font-size: 16px; }
	.corner-ribbon { top: 14px; right: -38px; width: 110px; font-size: 10px; }
}
.metro-tag {
	display: inline-flex;
	align-items: center;
	background: rgba(255,255,255,.7);
	color: #495267;
	font-size: 12.5px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 20px;
}
/* ===== Ribbon "Còn/Hết hiệu lực" góc trên bên phải (cắt gọn nhờ overflow:hidden của .doc-card) ===== */
.corner-ribbon {
	position: absolute;
	top: 22px;
	right: -32px;
	width: 130px;
	padding: 3px 0;
	text-align: center;
	transform: rotate(45deg);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .3px;
	box-shadow: 0 2px 6px rgba(0,0,0,.15);
	z-index: 5;
	pointer-events: none;
}
.corner-ribbon.ribbon-valid { background: #ffe0bf; color: #b3480a; }
.corner-ribbon.ribbon-expired { background: #f1f0ee; color: #8a8d94; }

/* ===== Tag Giá/Tỉnh thành gộp chung hàng với Danh mục/Lượt tải - giống hệt metro-tag thường ===== */
.metro-tag-price, .metro-tag-province {}

/* ===== Nội dung rich-text (chi tiết tài liệu, bài viết): màu sắc, dấu chấm danh sách màu cam ===== */
.rich-content { line-height: 1.75; color: #3c4257; }
.rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4 { color: #1f2937; font-weight: 700; margin-top: 1.4em; margin-bottom: .6em; }
.rich-content h2 { font-size: 1.4rem; border-bottom: 2px solid #ffe4cc; padding-bottom: .3em; }
.rich-content h3 { font-size: 1.15rem; color: #fd7e14; }
.rich-content p { margin-bottom: 1em; }
.rich-content ul, .rich-content ol { padding-left: 1.4em; margin-bottom: 1em; }
.rich-content ul { list-style: none; }
.rich-content ul li { position: relative; padding-left: 1.3em; margin-bottom: .5em; }
.rich-content ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fd7e14;
}
.rich-content ol li { margin-bottom: .5em; }
.rich-content ol li::marker { color: #fd7e14; font-weight: 700; }
.rich-content a { color: #fd7e14; text-decoration: underline; }
.rich-content strong { color: #1f2937; }
.rich-content blockquote {
	border-left: 4px solid #fd7e14;
	background: #fff8f2;
	padding: .8em 1.2em;
	margin: 1.2em 0;
	border-radius: 0 8px 8px 0;
	color: #57606f;
	font-style: italic;
}
.rich-content code { background: #f4f6fa; color: #d6336c; padding: .15em .4em; border-radius: 4px; font-size: .9em; }
.rich-content pre { background: #282c34; color: #eee; padding: 1em; border-radius: 8px; overflow-x: auto; }
.rich-content img { max-width: 100%; border-radius: 8px; margin: .8em 0; }
.rich-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.2em; font-size: 14.5px; }
.rich-content table th, .rich-content table td { border: 1px solid #e3e7ee; padding: 8px 12px; vertical-align: middle; }
.rich-content table th { background: #fd7e14; color: #fff; font-weight: 600; text-align: center; }
.rich-content table td { text-align: center; }
.rich-content table td:nth-child(2) { text-align: left; } /* Cột tên đường/mô tả thường là cột thứ 2 - căn trái cho dễ đọc */
.rich-content table tr:nth-child(even) { background: #fafbfc; }
.rich-content table tr:hover { background: #fff4e8; }

/* ===== Khu vực "Tài liệu đính kèm" ở trang chi tiết: bố cục icon tròn + tên + icon tải, cân đối, hover rõ ràng ===== */
.attachment-item {
	padding: 10px 12px;
	border: 1px solid #edf0f5;
	border-radius: 10px;
	transition: background .15s ease, border-color .15s ease;
}
.attachment-item:hover { background: rgba(253, 126, 20, .06); border-color: rgba(253, 126, 20, .3); }
.attachment-icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba(253, 126, 20, .1);
	color: #fd7e14;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}
.attachment-download {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #f4f6fa;
	color: #6c757d;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
}
.attachment-item:hover .attachment-download { background: #fd7e14; color: #fff; }

/* ===== Bản đồ Việt Nam tương tác (trang chủ) ===== */
.vietnam-map-card { overflow: hidden; }
.vietnam-map-svg { width: 100%; max-width: 384px; height: auto; margin: 0 auto; display: block; }
.vietnam-map-svg .map-province {
	fill: #fd7e14;
	stroke: #ffffff;
	stroke-width: 0.6;
	cursor: pointer;
	transition: fill .15s ease;
}
.vietnam-map-svg .map-province-major {
	fill: #c85a00;
}
.vietnam-map-svg .map-province:hover,
.vietnam-map-svg .map-province:focus {
	fill: #1f7a5c;
}
.vietnam-map-svg .map-island-marker { fill: #1f7a5c; }
.vietnam-map-svg .map-island-label { fill: #6b7280; font-size: 7px; font-family: Arial, sans-serif; }
.vietnam-map-tooltip {
	display: none;
	position: absolute;
	background: #1f2937;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 6px;
	pointer-events: none;
	z-index: 10;
	white-space: nowrap;
	transform: translate(-50%, -100%);
}

/* ===== Box thống kê trang chủ (cạnh bản đồ): icon tròn + nền màu nhạt riêng từng loại ===== */
.stat-box {
	border-radius: 12px;
	padding: 16px 12px;
	text-align: center;
	height: 100%;
	transition: transform .2s ease;
}
.stat-box:hover { transform: translateY(-3px); }
.stat-box-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 16px;
	margin: 0 auto 8px;
}
.stat-box h3 { font-weight: 700; }

/* ===== Ô tìm kiếm dạng dropdown tự vẽ (Bảng giá đất): hiện đầy đủ danh sách khi bấm/gõ ===== */
.searchable-select { position: relative; }
.searchable-select input:disabled { background: #f4f6fa; cursor: not-allowed; }
.searchable-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 260px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #e3e7ee;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(15,23,42,.12);
	margin-top: 4px;
}
.searchable-item {
	padding: 8px 14px;
	font-size: 14px;
	cursor: pointer;
}
.searchable-item:hover { background: rgba(253, 126, 20, .08); color: #fd7e14; }

/* ===== Nút dạng radio/checkbox ẩn (btn-check) khi được chọn: đảm bảo dùng màu cam chủ đạo
   thay vì xanh dương mặc định của Bootstrap (rule gốc dùng biến CSS riêng cho trạng thái active,
   không tự động ăn theo --bs-primary đã override) ===== */
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
	background-color: #fd7e14 !important;
	border-color: #fd7e14 !important;
	color: #fff !important;
}

/* ===== 5 ngôi sao bấm chọn khi đánh giá tài liệu ===== */
.star-rating-input { font-size: 22px; cursor: pointer; }
.star-rating-input i { color: #d7dbe0; margin-right: 2px; transition: color .1s ease; }
.star-rating-input i.active { color: #ffb400; }

/* ===== Breadcrumb: toàn bộ chữ màu cam, không đổi khi hover ===== */
.breadcrumb a, .breadcrumb .breadcrumb-item, .breadcrumb .breadcrumb-item.active {
	color: #fd7e14 !important;
}
.breadcrumb a:hover { color: #fd7e14 !important; text-decoration: none; }

/* ===== Bảng giá đất: bỏ hẳn hiệu ứng đổi màu khi hover cho nút "Theo tuyến đường"/"Theo khu vực" -
   hover trông y hệt trạng thái bình thường (không tick: viền cam; đã tick: nền cam) ===== */
#tabRural .btn-outline-primary:hover {
	color: #fd7e14 !important;
	background-color: transparent !important;
}
#tabRural .btn-check:checked + .btn-outline-primary:hover {
	color: #fff !important;
	background-color: #fd7e14 !important;
}

/* ===== Trang Bảng giá đất - lưới 34 tỉnh thành ===== */
.land-price-tile {
	border: 1px solid #edf0f5;
	border-radius: 10px;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.land-price-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(15,23,42,.08);
	border-color: rgba(253, 126, 20, .35);
}
.land-price-badge {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 20px;
}
.land-price-badge-ready { background: #e6f7ef; color: #1a9d5c; }