:root {
	--bs-web: #ff6900;
	/* #fca93c; */
	--bs-web-rgb: 252, 169, 60;
	/* dùng khi cần rgba */
	--bs-web-bg-boder: #cbdaed;
	--bs-web-bg: #f2f7ff;

	--bs-web-light-bg-rgb: rgba(0, 0, 0, 0.08);
}

html {
	position: relative;
	min-height: 100%;
}

body {
	margin-bottom: 60px;
	margin-top: 78px;

	/* font-family: 'Inter', sans-serif; */
	-webkit-font-smoothing: antialiased;
	/* Giúp font chữ sắc nét và mịn hơn trên màn hình
    -moz-osx-font-smoothing: grayscale; */
	font-size: clamp(0.85rem, 2vw, 1rem)
}

h3 {
	font-size: clamp(1.3rem, 3vw, 1.5rem) !important;
}

h4 {
	font-size: clamp(1.2rem, 3vw, 1.4rem) !important;
}

h5 {
	font-size: clamp(0.9rem, 2vw, 1.1rem) !important;
}

.slogan {
	font-size: clamp(0.7rem, 2vw, 1.2rem) !important;
	font-weight: 600 !important;
}

.cgt-head {
	font-size: clamp(1.2rem, 4vw, 1.8rem) !important;
}

.cgt-label {
	font-size: clamp(0.85rem, 2vw, 1rem) !important;
}

.cgt-text {
	font-size: clamp(0.85rem, 2vw, 1rem) !important;
}

.cgt-form-select {
	font-size: clamp(0.85rem, 2vw, 1rem) !important;
}

/* Khi lên màn hình mobile lớn/phổ thông */
@media (max-width: 576px) {
	body {
		margin-top: 100px;
		/* Giữ nguyên margin bạn cần */
	}
}

/* 2. Cho MÀN HÌNH LỚN (Từ 768px trở lên - Máy tính/Tablet) */
@media (min-width: 768px) {
	body {
		font-size: 1rem;
		/* ≈ 16px - Chữ to lên khi xem trên máy tính */
	}
}

.dropdown-text {
	font-size: 1rem;

}

@media (max-width: 576px) {
	.dropdown-text {
		font-size: 0.875rem !important;
	}

	a.web-link {
		font-size: 14px !important;
	}

	.fs-5 {
		font-size: 15px !important;
	}
}

.bg-web {
	background-color: var(--bs-web-bg);
}

.txt-web {
	color: var(--bs-web);
}

.border-web {
	border-color: var(--bs-web);
}

.txt-black-opa {
	color: rgba(0, 0, 0, 0.6) !important;
}

/* nút chính */
.btn-web {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--bs-web);
	--bs-btn-border-color: var(--bs-web);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: rgba(var(--bs-web-rgb), 0.85);
	--bs-btn-hover-border-color: rgba(var(--bs-web-rgb), 0.85);
	--bs-btn-focus-shadow-rgb: var(--bs-web-rgb);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: rgba(var(--bs-web-rgb), 0.75);
	--bs-btn-active-border-color: rgba(var(--bs-web-rgb), 0.75);
	--bs-btn-disabled-bg: var(--bs-web);
	--bs-btn-disabled-border-color: var(--bs-web);
}

.btn-outline-web {
	--bs-btn-color: var(--bs-web);
	--bs-btn-border-color: var(--bs-web);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--bs-web);
	--bs-btn-hover-border-color: var(--bs-web);
	--bs-btn-focus-shadow-rgb: var(--bs-web-rgb);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: rgba(var(--bs-web-rgb), 0.85);
	--bs-btn-active-border-color: rgba(var(--bs-web-rgb), 0.85);
	--bs-btn-disabled-color: var(--bs-web);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--bs-web);
}

.btn-outline-web-second {
	color: #6c757d;
	/* xám nhạt mặc định */
	border-color: #6c757d;
	background-color: transparent;
	transition: all 0.2s ease-in-out;
}

.btn-outline-web-second:hover,
.btn-outline-web-second:focus {
	color: #fff;
	background-color: #bdbdbd;
	/* xám nhạt hơn secondary */
	border-color: #bdbdbd;
}

.btn-outline-web-second:active {
	background-color: #bdbdbd;
	/* hơi đậm hơn hover 1 chút */
	border-color: #bdbdbd;
}

.btn-web:hover {
	color: #fff;
	background-color: #e89025;
	/* màu đậm hơn khi hover */
	border-color: #e1841d;
}

.btn-web:focus,
.btn-web.focus {
	color: #fff;
	background-color: #e89025;
	border-color: #e1841d;
	/* box-shadow: 0 0 0 0.25rem rgba(252, 169, 60, 0.5); */
}

.btn-web:disabled,
.btn-web.disabled {
	color: #fff;
	background-color: #fca93c;
	border-color: #fca93c;
	opacity: 0.65;
}

.btn-web:active,
.btn-web.active,
.show>.btn-web.dropdown-toggle {
	color: #fff;
	background-color: #e89025;
	border-color: #e1841d;
}

.btn-dangtin {
	border: 1px solid var(--bs-web);
	border-radius: 50px;
	position: absolute;
	padding: 10px;
	background-color: var(--bs-web);
	bottom: -40px;
	color: white;
}

.btn-dangtin a {
	color: white;
}

.btn-dangtin a:hover {
	color: white;
	font-weight: 600;
}

.bg-vip {
	background-color: var(--bs-web);
}

/* Làm modal fade-in mượt hơn */
.modal.fade .modal-dialog {
	transition: transform 0.4s ease-out, opacity 0.4s ease-out;
	/* tăng thời gian */
	transform: translate(0, -20px);
	/* bắt đầu hơi cao 1 chút */
	opacity: 0;
}

.modal.fade.show .modal-dialog {
	transform: translate(0, 0);
	/* trượt xuống vị trí chuẩn */
	opacity: 1;
}

#nprogress .bar {
	background: #29d !important;
	height: 3px !important;

	/* z-index: 99999 !important;
    position: fixed !important;
    top: 0 !important; */
}

#nprogress .peg {
	box-shadow: 0 0 10px #29d, 0 0 5px #29d;
}

a.web-link {
	color: #323335;
	/* giống text-secondary Bootstrap */
	text-decoration: none !important;
	/* bỏ gạch chân mặc định */
	transition: color 0.2s ease, opacity 0.2s ease;
}

a.web-link:hover {
	color: #444c54;

	text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	text-decoration: none !important;
}

a.webui-hover {
	display: inline-block;
	transition: background-color 0.2s ease, color 0.2s ease;
	padding: 3px 8px;
	text-decoration: none;
	background-color: var(--bs-light-rgb);
	color: #000;
}

a.webui-hover.is-active {
	background-color: rgba(0, 0, 0, 0.08);
	/* giống YouTube hover */
	color: #000;
}

a.webui-hover:hover {
	background-color: rgba(0, 0, 0, 0.08);
	/* giống YouTube hover */
	color: #000;
	/* chữ đậm hơn khi hover */
}

a.webui-selected {
	display: inline-block;
	padding: 6px 14px;
	text-decoration: none;
	background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;

	color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
}

a.webui-selected:hover {
	/* giống YouTube hover */
	color: black;
	font-weight: 600;
	/* chữ đậm hơn khi hover */
	background-color: var(--bs-web-light-bg-rgb);
}

/*bat buoc nprogress len top*/
#nprogress {
	pointer-events: none;
}

#nprogress .bar {
	background: #29d;
	position: fixed !important;
	z-index: 99999 !important;
	/* ép luôn lên top */
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
}

/*end nprogress*/
/* Giúp choices cao ngang với form-control */
.choices {
	margin-bottom: 0 !important;
}

/* Giữ responsive: category & location chiếm tỉ lệ */
#selectCategory {
	width: 25% !important;
	/* khoảng 1/4 */
}

#selectLocation {
	width: 25% !important;
	/* khoảng 1/4 */
}

.searchtopinput {
	background-color: var(--bs-tertiary-bg);
	/* còn lại cho input */
}

.flex-shrink-0[style] {
	width: 30% !important;
}

/* man hinh lon hon mobi */
@media (min-width: 576px) {
	.searchtopinput {
		width: 35% !important;
	}

	.flex-shrink-0[style] {
		width: 20% !important;
	}
}

.choices__inner {
	min-height: 39px !important;
	/* Chiều cao chuẩn của input Bootstrap 5 */
	padding: 4px 8px !important;
	border-radius: 0.375rem !important;
	/* bo góc giống form-control */
	border: 1px solid #ced4da !important;
	box-shadow: none !important;
}

/* Canh giữa nội dung */
.choices__list--single {
	padding: 0 !important;
	display: flex;
	align-items: center;
	height: 28px;
}

/* Khi focus */
.choices.is-focused .choices__inner {
	border-color: #86b7fe !important;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}


.choices__list--single .choices__item {
	padding: 0;
	line-height: 1.25;
}

.choices__inner .choices__button {
	top: 50%;
	transform: translateY(-50%);
}

/* Text & icon màu đen, bỏ shadow */
.choices__list--dropdown {
	width: 140% !important;
}

.choices__item--selectable {
	white-space: nowrap !important;
}

.choices__inner,
.choices__list--single .choices__item,
.choices__inner .choices__button,
.choices__list--dropdown .choices__item {
	color: #212529 !important;
	/* text đen */
	text-shadow: none !important;
	/* tắt shadow */
}

.avatar-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-weight: 600;
	font-size: 1rem;
	color: #fff;
	text-transform: uppercase;
	background-color: #6c757d;
	/* fallback */
}

.truncate-line2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	/* số dòng muốn hiển thị */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

#appToast {
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

#appToast.text-bg-success {
	background: linear-gradient(135deg, #e8fff3, #d4fce6) !important;
	color: #0f5132 !important;
	border: 1px solid #b8f0d3;
}

.chu-hoa-dau-dong::first-letter {
	text-transform: uppercase;
}

.btn-back-fixed {
	position: fixed;
	bottom: 60px;
	right: 24px;
	width: 65px;
	height: 65px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1050;
	transition: transform 0.2s ease-in-out;
}

.btn-back-fixed:active {
	transform: scale(0.9);
}

/* main desk */
@media (min-width: 992px) {
	a.webui-hover {
		padding: 6px 14px;
	}
}