:root {
	--quan: #d9480f;
	--quan-dam: #b23a0b;
	--quan-nhat: #fff4e6;
	--nen: #fffaf5;
	--chu: #2b2118;
}

body {
	font-family: 'Be Vietnam Pro', system-ui, sans-serif;
	background: var(--nen);
	color: var(--chu);
}

.text-quan { color: var(--quan); }
.link-quan { color: var(--quan); text-decoration: none; }
.link-quan:hover { color: var(--quan-dam); text-decoration: underline; }

/* Nút */
.btn-quan {
	background: var(--quan);
	border-color: var(--quan);
	color: #fff;
	font-weight: 600;
}
.btn-quan:hover, .btn-quan:focus { background: var(--quan-dam); border-color: var(--quan-dam); color: #fff; }
.btn-outline-quan {
	border: 1px solid var(--quan);
	color: var(--quan);
	font-weight: 600;
}
.btn-outline-quan:hover { background: var(--quan); color: #fff; }

/* Menu */
.navbar-quan {
	background: #fff;
	border-bottom: 1px solid #f1e3d3;
}
.navbar-quan .navbar-brand { font-weight: 800; color: var(--quan); }
.navbar-quan .nav-link { font-weight: 500; }
.navbar-quan .nav-link.active { color: var(--quan); }

/* Giới thiệu */
.hero {
	background: linear-gradient(135deg, #fff1e0 0%, #ffe3c7 100%);
	padding: 64px 0;
}
.hero .nhan {
	display: inline-block;
	background: #fff;
	color: var(--quan);
	font-weight: 600;
	font-size: .85rem;
	padding: 6px 14px;
	border-radius: 999px;
}
.gio-ban {
	background: #fff;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 10px 30px rgba(217, 72, 15, .1);
}
.gio-dong { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.gio-dong + .gio-dong { border-top: 1px dashed #f1e3d3; }
.dia-chi-quan { color: inherit; text-decoration: none; }
.dia-chi-quan:hover .link-quan { text-decoration: underline; }
.gio-icon {
	width: 44px; height: 44px; flex: none;
	display: grid; place-items: center;
	background: var(--quan-nhat);
	border-radius: 12px;
	font-size: 1.4rem;
}

/* Thẻ món */
.the-mon {
	border: none;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(43, 33, 24, .06);
	transition: transform .15s, box-shadow .15s;
}
.the-mon:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43, 33, 24, .12); }
.the-mon .card-img-top { aspect-ratio: 4 / 3; object-fit: cover; background: var(--quan-nhat); }
.the-mon .gia { font-weight: 700; color: var(--quan); white-space: nowrap; }
.the-mon .btn { white-space: nowrap; }
.ma-mon {
	font-size: .7rem;
	font-weight: 600;
	color: #8a7a6b;
	background: #f6efe7;
	border-radius: 6px;
	padding: 2px 6px;
}

/* Lọc loại món */
.chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #f1e3d3;
	color: var(--chu);
	text-decoration: none;
	font-weight: 500;
}
.chip:hover { border-color: var(--quan); color: var(--quan); }
.chip.active { background: var(--quan); border-color: var(--quan); color: #fff; }
.chip-ma { font-size: .7rem; opacity: .7; }

/* Form đăng nhập / đăng ký */
.khung-form {
	max-width: 420px;
	background: #fff;
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 10px 30px rgba(43, 33, 24, .08);
}
.khung-form-rong { max-width: 680px; }
.form-control:focus { border-color: var(--quan); box-shadow: 0 0 0 .2rem rgba(217, 72, 15, .15); }

/* Trang admin */
.khung-bang {
	background: #fff;
	border-radius: 14px;
	padding: 8px 16px;
	box-shadow: 0 2px 10px rgba(43, 33, 24, .06);
}
.khung-bang th { font-size: .8rem; text-transform: uppercase; color: #8a7a6b; font-weight: 600; }
.anh-nho { width: 56px; height: 42px; object-fit: cover; border-radius: 8px; background: var(--quan-nhat); }
.dong-tam-het td { opacity: .55; }
.dong-tam-het td:nth-last-child(-n+2) { opacity: 1; }
.chip-nho { padding: 5px 12px; font-size: .85rem; }
.anh-xem-truoc { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--quan-nhat); }
.form-check-input:checked { background-color: var(--quan); border-color: var(--quan); }

/* Trang admin trên điện thoại */
.the-admin {
	background: #fff;
	border-radius: 14px;
	padding: 12px;
	box-shadow: 0 2px 10px rgba(43, 33, 24, .06);
}
.the-admin .btn { min-height: 44px; }
.the-tam-het .anh-the-admin, .the-tam-het .gia-admin { opacity: .5; }
.anh-the-admin { width: 84px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--quan-nhat); }
.gia-admin { font-weight: 700; color: var(--quan); margin-top: 2px; }
.min-w-0 { min-width: 0; }
.flex-none { flex: none; }
.cuon-ngang { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
.cuon-ngang::-webkit-scrollbar { display: none; }
.cuon-ngang .chip { flex: none; }
.nut-them-noi {
	position: fixed;
	right: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom));
	width: 60px; height: 60px;
	border-radius: 50%;
	background: var(--quan);
	color: #fff;
	font-size: 2rem;
	line-height: 58px;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(217, 72, 15, .4);
	z-index: 1030;
}
.nut-them-noi:hover, .nut-them-noi:active { background: var(--quan-dam); color: #fff; }
@media (max-width: 767.98px) {
	.trang-admin { padding-bottom: 96px !important; }
	.trang-admin .form-control, .trang-admin .form-select { font-size: 16px; min-height: 44px; }
}

/* Đặt món */
.sdt-lon {
	font-size: 2rem;
	font-weight: 800;
	color: var(--quan);
	text-decoration: none;
	letter-spacing: 1px;
}

/* Chân trang */
.footer-quan { background: #2b2118; color: #f3e9df; }

@media (max-width: 575.98px) {
	.hero { padding: 40px 0; }
	.khung-form { padding: 24px 16px; }
	.the-mon .card-body { padding: 10px; }
	.the-mon .btn { padding: 4px 8px; font-size: .8rem; }
}