/* ===== ORDER PAGE STYLES ===== */

/* Compact Banner */
.order-page-banner.dlab-bnr-inr { min-height: 140px !important; height: 140px !important; padding: 0 !important; }
.order-page-banner .dlab-bnr-inr-entry { padding: 15px 0 8px !important; }
.order-page-banner h1 { font-size: 28px !important; margin-bottom: 0 !important; }
.order-page-banner h1::after { display: none !important; }
.order-page-banner .sub-title { font-size: 12px !important; margin-bottom: 3px !important; letter-spacing: 2px; }
.order-page-banner .breadcrumb-row { margin-top: 0 !important; }
.order-page-banner .breadcrumb { margin-bottom: 0 !important; }

.order-section { padding: 20px 0; }
.order-container { max-width: 100%; padding: 0 20px; margin: 0 auto; }

/* Nhắc freeship/giá gốc ngay đầu trang chọn món — nhẹ, một dòng, không
   tranh chỗ với tab danh mục ngay bên dưới. */
.order-benefits-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 18px;
	padding: 10px 6px 14px;
	font-family: 'Oswald', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .3px;
	color: #6b5433;
	text-align: center;
}

/*
 * Category Filter — cuộn ngang một hàng thay vì wrap nhiều dòng: danh sách
 * gần chục danh mục mà wrap thì chiếm hẳn nửa màn hình trên điện thoại, đẩy
 * món xuống quá xa. justify-content: flex-start (không phải center) vì
 * center trên flex có overflow-x làm mất khả năng cuộn về item đầu tiên ở
 * một số trình duyệt.
 */
/*
 * Dính lại (sticky) khi cuộn xuống — top lấy từ biến --sticky-offset, JS đo
 * đúng chiều cao thanh header cố định trên mobile rồi gán vào (0 trên
 * desktop vì sidebar không che phần này). Nền đặc trùng màu .bg-pink-light
 * để nội dung cuộn phía dưới không hiện xuyên qua thanh tab.
 */
.order-category-tabs {
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: 6px;
	margin-bottom: 15px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 8px 0;
	position: sticky;
	top: var(--sticky-offset, 0px);
	z-index: 50;
	background: #faf3eb;
	/* .order-container có padding 0 20px — trừ ngược lại bằng margin âm rồi
	   bù bằng padding cùng khoảng đó, để nền dính full bề ngang màn hình chứ
	   không chỉ dính trong phần đã bị thụt vào 20px hai bên. */
	margin-left: -20px;
	margin-right: -20px;
	padding-left: 20px;
	padding-right: 20px;
}
.order-category-tabs.is-stuck {
	box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.order-category-tabs::-webkit-scrollbar { display: none; }
.order-category-tabs .cat-btn {
	/* Mỗi danh mục có màu riêng (cột color trong CSDL), đặt qua biến
	   --cat-color ngay trên thẻ; rơi về vàng nâu mặc định nếu không có màu. */
	flex-shrink: 0;
	padding: 5px 16px;
	border: 2px solid var(--cat-color, #c89f5b);
	border-radius: 20px;
	background: transparent;
	color: var(--cat-color, #c89f5b);
	font-family: 'Oswald', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: all 0.25s ease;
}
.order-category-tabs .cat-btn:hover,
.order-category-tabs .cat-btn.active {
	background: var(--cat-color, #c89f5b);
	color: #fff;
}

/*
 * Nhóm món theo danh mục khi xem "Tất Cả" — tiêu đề màu riêng của từng danh
 * mục (đồng bộ với màu tab), để cuộn xuống giữa chừng vẫn biết đang ở đâu.
 */
.menu-cat-section { margin-bottom: 24px; }
.menu-cat-section:last-child { margin-bottom: 0; }
.menu-cat-heading {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	padding-left: 10px;
	border-left: 4px solid var(--cat-color, #c89f5b);
	font-family: 'Oswald', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .5px;
	color: #333;
	text-transform: uppercase;
}

/* Menu Grid - card ngang, cố định 3 cột giống trang Thực đơn */
.order-menu-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.order-menu-card {
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0,0,0,0.07);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	flex-direction: row;
	align-items: stretch;
}
.order-menu-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 18px rgba(0,0,0,0.13);
}

/* Ảnh phủ kín khung (object-fit: cover) như trang Thực đơn, thay vì icon
   nhỏ co lại giữa nền gradient — ảnh chụp món thật lấp đầy trông rõ hơn. */
.order-menu-card .card-img-wrap {
	position: relative;
	background: linear-gradient(135deg, #f5e6d3 0%, #e8d5c4 100%);
	min-width: 110px;
	max-width: 110px;
	flex-shrink: 0;
	overflow: hidden;
}
.order-menu-card .card-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}
.order-menu-card:hover .card-img-wrap img { transform: scale(1.06); }

.best-seller-badge {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: linear-gradient(135deg, #e74c3c, #c0392b);
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 3px 6px;
	border-radius: 20px;
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
	white-space: nowrap;
}

/* Số lượng món đang có trong giỏ — nằm cạnh nút Chọn, để khách biết ngay đã
   chọn món này bao nhiêu mà không phải mở giỏ hàng ra xem. Nền đen để tách
   hẳn khỏi nút Chọn vàng nâu ngay bên cạnh, không thì hai màu vàng chìm vào
   nhau, khó nhận ra badge. */
.cart-qty-badge {
	background: #1a1a1a;
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-size: 11px;
	font-weight: 700;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.order-menu-card .card-body {
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	min-width: 0;
}
.order-menu-card .card-body .item-name {
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	margin-bottom: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.order-menu-card .card-body .item-desc {
	font-size: 11px;
	color: #999;
	margin-bottom: 4px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.order-menu-card .card-body .card-bottom {
	display: flex;
	align-items: center;
	gap: 8px;
}
.order-menu-card .card-body .item-price {
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #c89f5b;
	margin: 0;
	flex-shrink: 0;
}

/* Quantity Controls - compact */
.qty-controls {
	display: flex;
	align-items: center;
	gap: 3px;
	margin-left: auto;
}
.qty-btn {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1.5px solid #c89f5b;
	background: transparent;
	color: #c89f5b;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	line-height: 1;
	padding: 0;
}
.qty-btn:hover {
	background: #c89f5b;
	color: #fff;
}
.qty-input {
	width: 26px;
	text-align: center;
	border: none;
	border-bottom: 1.5px solid #ddd;
	font-family: 'Oswald', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #333;
	background: transparent;
	padding: 2px 0;
	outline: none;
}
.qty-input:focus { border-bottom-color: #c89f5b; }

.add-to-order-btn {
	padding: 4px 12px;
	border: none;
	border-radius: 15px;
	background: linear-gradient(135deg, #c89f5b, #a67c3d);
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
}
.add-to-order-btn:hover {
	background: linear-gradient(135deg, #a67c3d, #8a6530);
	transform: scale(1.05);
}
.add-to-order-btn.added {
	background: linear-gradient(135deg, #4caf50, #388e3c);
	pointer-events: none;
}

/* ===== Floating Order Panel (right slide-out) =====
 * Nền trắng + viền/icon màu thương hiệu thay vì khối gradient vàng đặc — nút
 * "Đặt món" ở bottom nav (site.css .bottom-nav-cta) đã là CTA màu gradient
 * nổi bật nhất màn hình rồi, hai khối cùng màu cùng cỡ chồng gần nhau nhìn
 * rối. Giỏ hàng chỉ cần đủ thấy, badge số lượng mới là thứ cần đập vào mắt.
 */
.order-fab {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #fff;
	color: #a67c3d;
	border: 1px solid rgba(166,124,61,.3);
	font-size: 20px;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(30,20,10,.16);
	/* .site-header (thanh header cố định mobile) có z-index:99999 — mọi lớp
	   nổi của trang đặt món phải cao hơn số đó thì mới không bị nó đè chìm. */
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s, box-shadow 0.3s;
}
.order-fab:hover {
	transform: scale(1.08);
	box-shadow: 0 6px 20px rgba(30,20,10,.22);
}
.order-fab .fab-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #e74c3c;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
}
.order-fab .fab-badge:empty { display: none; }
/* Bottom nav (site.css .mobile-bottom-nav, ~60px + safe-area) chiếm đúng góc
   phải-dưới màn hình ở cùng breakpoint này — nhấc giỏ hàng lên trên nó, thu
   nhỏ thêm một chút vì màn đã chật. */
@media (max-width: 1200px) {
	.order-fab {
		bottom: calc(60px + 14px + env(safe-area-inset-bottom, 0px));
		right: 16px;
		width: 46px;
		height: 46px;
		font-size: 18px;
	}
}

.order-panel-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	z-index: 100002;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}
.order-panel-overlay.open { opacity: 1; pointer-events: all; }

.order-slide-panel {
	position: fixed;
	top: 0;
	right: 0;
	width: 380px;
	max-width: 90vw;
	/*
	 * 100vh trên mobile tính theo chiều cao viewport LỚN NHẤT (lúc thanh
	 * toolbar trình duyệt đã thu gọn). Khi toolbar đang hiện, panel cao
	 * 100vh này vẫn giữ nguyên kích thước cũ nên phần footer (nút gửi đơn)
	 * bị khuất sau toolbar. 100dvh co giãn theo toolbar hiện/ẩn nên luôn
	 * khớp với phần màn hình thực sự nhìn thấy được.
	 */
	height: 100vh;
	height: 100dvh;
	background: #fff;
	z-index: 100003;
	transform: translateX(100%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	box-shadow: -5px 0 30px rgba(0,0,0,0.15);
}
.order-slide-panel.open { transform: translateX(0); }

.order-panel-header {
	padding: 18px 20px;
	background: linear-gradient(135deg, #c89f5b, #a67c3d);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}
.order-panel-header h3 {
	font-family: 'Oswald', sans-serif;
	font-size: 20px;
	font-weight: 700;
	margin: 0;
	text-transform: uppercase;
}
.order-panel-close {
	background: none;
	border: none;
	color: #fff;
	font-size: 24px;
	cursor: pointer;
	padding: 0 4px;
	opacity: 0.8;
	transition: opacity 0.2s;
}
.order-panel-close:hover { opacity: 1; }

.order-panel-body {
	flex: 1;
	overflow-y: auto;
	padding: 15px 20px;
}
.order-panel-body::-webkit-scrollbar { width: 4px; }
.order-panel-body::-webkit-scrollbar-thumb { background: #c89f5b; border-radius: 2px; }

.order-panel-footer {
	padding: 15px 20px;
	/* Chừa thêm khoảng an toàn phía dưới trên thiết bị có home-indicator/toolbar che (iPhone) */
	padding-bottom: calc(15px + env(safe-area-inset-bottom));
	border-top: 2px solid #f0f0f0;
	flex-shrink: 0;
	background: #fafafa;
}

.order-item-row {
	display: flex;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid #f0f0f0;
	animation: fadeInUp 0.25s ease;
}
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
.order-item-row .oi-name {
	font-weight: 600;
	color: #333;
	font-size: 13px;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/*
 * Thay cho chữ "x2" tĩnh trước đây — bấm +/- ngay trong giỏ, không phải mở
 * lại modal chọn món chỉ để đổi số lượng. Dùng lại .qty-btn/.qty-input của
 * modal (đã có style vàng nâu quen mắt) nhưng thu nhỏ lại cho vừa dòng giỏ
 * hàng vốn đã chật (tên món + giá + nút xoá cùng một hàng).
 */
.order-item-row .oi-qty-controls {
	display: flex;
	align-items: center;
	gap: 3px;
	margin: 0 8px;
	flex-shrink: 0;
}
.order-item-row .oi-qty-controls .qty-btn {
	width: 20px;
	height: 20px;
	font-size: 12px;
}
.order-item-row .oi-qty-controls .qty-input {
	width: 16px;
	min-width: 16px;
	font-size: 12px;
	border-bottom: none;
	padding: 0;
	color: #333;
}
.order-item-row .oi-price {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	color: #c89f5b;
	font-size: 14px;
	min-width: 55px;
	text-align: right;
}
.order-item-row .oi-remove {
	margin-left: 8px;
	background: none;
	border: none;
	color: #e74c3c;
	cursor: pointer;
	font-size: 14px;
	padding: 2px 5px;
	border-radius: 50%;
	transition: background 0.2s;
}
.order-item-row .oi-remove:hover { background: #fdecea; }

.order-empty-msg {
	text-align: center;
	padding: 40px 0;
	color: #bbb;
	font-size: 14px;
}
.order-empty-msg i {
	font-size: 36px;
	display: block;
	margin-bottom: 8px;
	color: #ddd;
}

.order-summary-totals {
	margin-bottom: 12px;
}
.order-benefit-note {
	background: #f9f4ea;
	color: #6b5433;
	font-size: 11.5px;
	font-weight: 600;
	text-align: center;
	padding: 7px 10px;
	border-radius: 8px;
	margin-bottom: 10px;
}
.order-summary-totals .total-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
	font-size: 13px;
	color: #666;
}
.order-summary-totals .total-row.grand-total {
	font-size: 18px;
	font-weight: 700;
	color: #333;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 2px dashed #eee;
}
.order-summary-totals .total-row.grand-total span:last-child {
	color: #c89f5b;
	font-family: 'Oswald', sans-serif;
}

/* Customer Info Form */
.customer-form .form-group { margin-bottom: 10px; }
.customer-form .form-group label {
	font-size: 12px;
	font-weight: 600;
	color: #555;
	margin-bottom: 3px;
	display: block;
}
.customer-form .form-control {
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13px;
	transition: border-color 0.3s;
	width: 100%;
	box-sizing: border-box;
	background-color: #fff;
	color: #333;
}
.customer-form .form-control:focus {
	border-color: #c89f5b;
	box-shadow: 0 0 0 3px rgba(200,159,91,0.1);
	outline: none;
}
.customer-form textarea.form-control { resize: vertical; min-height: 50px; }
/* Fix zoom iOS khi focus input đã xử lý chung cho toàn site ở site.css. */

/*
 * <select> không có background/color riêng thì trình duyệt/hệ điều hành tự
 * vẽ theo màu hệ thống — có máy ra cả khối màu vàng chữ mờ không đọc được.
 * Tắt appearance mặc định, tự vẽ mũi tên bằng CSS, để nó luôn trắng/chữ đậm
 * giống các ô nhập khác trong form này trên mọi máy.
 */
.customer-form select.form-control {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 10px 7px;
	padding-right: 32px;
}

.submit-order-btn {
	width: 100%;
	padding: 12px;
	border: none;
	border-radius: 10px;
	background: linear-gradient(135deg, #c89f5b, #a67c3d);
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.3s ease;
}
.submit-order-btn:hover {
	background: linear-gradient(135deg, #a67c3d, #8a6530);
	box-shadow: 0 4px 15px rgba(200,159,91,0.4);
}
.submit-order-btn:disabled {
	background: #ccc;
	cursor: not-allowed;
	box-shadow: none;
}

/* Toast */
/*
 * translateX(120%) tính theo bề rộng của chính nó — lúc chưa có nội dung
 * (#toastMsg rỗng, trước khi showToast() chạy lần đầu) toast co lại rất nhỏ
 * nên 120% không đủ đẩy hẳn ra ngoài, lộ một mẩu xanh ở mép phải màn hình dù
 * chưa hề có thông báo nào. Chặn thêm bằng opacity/visibility để chắc chắn
 * ẩn hoàn toàn, transform chỉ còn lo phần hiệu ứng trượt.
 *
 * z-index và top: .site-header (thanh header cố định trên mobile) có
 * z-index:99999 — toast để 9999 như cũ thì luôn bị header đè lên, "chìm"
 * mất dù đang hiện. Đẩy z-index cao hơn header, và hạ top xuống dưới header
 * (dùng --sticky-offset đã đo sẵn) để không đứng chồng lên nhau.
 */
.order-toast {
	position: fixed;
	top: calc(var(--sticky-offset, 0px) + 16px);
	right: 16px;
	background: #4caf50;
	color: #fff;
	padding: 12px 24px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 14px;
	box-shadow: 0 4px 20px rgba(76,175,80,0.4);
	z-index: 100030;
	opacity: 0;
	visibility: hidden;
	transform: translateX(120%);
	transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease, visibility 0s linear 0.4s;
}
.order-toast.show {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease, visibility 0s linear 0s;
}
.order-toast i { margin-right: 6px; }

/* ===== Item Options Modal ===== */
.option-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 100020;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.option-modal-overlay.active { display: flex; }

.option-modal {
	background: #fff;
	border-radius: 16px;
	max-width: 420px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	box-shadow: 0 10px 40px rgba(0,0,0,0.25);
	animation: modalIn 0.3s ease;
}
@keyframes modalIn {
	from { opacity: 0; transform: scale(0.9) translateY(20px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}

.option-modal-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid #f0f0f0;
	background: linear-gradient(135deg, #f5e6d3, #e8d5c4);
	border-radius: 16px 16px 0 0;
}
.option-modal-header img { width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15)); }
.option-modal-header .om-info h4 { font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 700; color: #333; margin: 0 0 2px; }
.option-modal-header .om-info span { font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 700; color: #c89f5b; }
.option-modal-close { margin-left: auto; background: none; border: none; font-size: 22px; color: #999; cursor: pointer; padding: 4px 8px; }
.option-modal-close:hover { color: #333; }

.option-modal-body { padding: 16px 20px; }

.opt-section { margin-bottom: 16px; }
.opt-section:last-child { margin-bottom: 0; }
.opt-section-title {
	font-family: 'Oswald', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 8px;
}
.opt-group { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-chip {
	padding: 6px 14px;
	border: 1.5px solid #ddd;
	border-radius: 20px;
	background: #fff;
	font-size: 12px;
	font-weight: 600;
	color: #666;
	cursor: pointer;
	transition: all 0.2s;
	white-space: nowrap;
}
.opt-chip:hover { border-color: #c89f5b; color: #c89f5b; }
.opt-chip.selected { background: #c89f5b; color: #fff; border-color: #c89f5b; }
.opt-chip .chip-extra { font-size: 10px; color: #999; margin-left: 3px; }
.opt-chip.selected .chip-extra { color: rgba(255,255,255,0.8); }

.option-modal-footer {
	padding: 14px 20px;
	border-top: 1px solid #f0f0f0;
	display: flex;
	align-items: center;
	gap: 10px;
}
.option-modal-footer .om-qty { display: flex; align-items: center; gap: 4px; }
.option-modal-footer .om-total {
	margin-left: auto;
	font-family: 'Oswald', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #c89f5b;
}
.om-add-btn {
	padding: 10px 24px;
	border: none;
	border-radius: 25px;
	background: linear-gradient(135deg, #c89f5b, #a67c3d);
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.2s;
}
.om-add-btn:hover { background: linear-gradient(135deg, #a67c3d, #8a6530); transform: scale(1.05); }

/* Responsive */
@media (max-width: 991px) {
	.order-menu-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.order-slide-panel { width: 100vw; max-width: 100vw; }
	.order-page-banner.dlab-bnr-inr { min-height: 100px !important; height: 100px !important; }
	.order-page-banner h1 { font-size: 22px !important; }
}
@media (max-width: 640px) {
	.order-menu-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.option-modal { max-width: 100%; border-radius: 12px; }
}

/* ===== ĐẶT MÓN NHÓM ===== */

.group-order-toggle {
	display: block;
	width: 100%;
	margin: 0 0 16px;
	padding: 10px 16px;
	border: 2px dashed #c89f5b;
	border-radius: 12px;
	background: #fff;
	color: #a67c3d;
	font-family: 'Oswald', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .3px;
	text-align: center;
	cursor: pointer;
}
.group-order-create {
	max-width: 480px;
	margin: 0 auto 20px;
	padding: 16px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.group-order-create .group-order-hint {
	margin: 0 0 12px;
	font-size: 12px;
	color: #888;
}

.group-share-bar {
	display: flex;
	gap: 8px;
	max-width: 560px;
	margin: 0 auto 16px;
}
.group-share-bar input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	font-size: 13px;
	color: #333;
	background: #faf3eb;
}
.group-share-bar button {
	padding: 10px 16px;
	border: none;
	border-radius: 8px;
	background: linear-gradient(135deg, #c89f5b, #a67c3d);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}

.group-status-banner {
	max-width: 560px;
	margin: 0 auto 16px;
	padding: 12px 16px;
	border-radius: 10px;
	background: #FDECEA;
	color: #B54E0A;
	font-size: 13px;
	text-align: center;
}
.group-status-banner a { color: inherit; text-decoration: underline; font-weight: 600; }

.group-list-panel {
	max-width: 560px;
	margin: 0 auto 20px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
	overflow: hidden;
}
.group-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 14px 16px;
	cursor: pointer;
}
.group-list-header h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #333;
}
.group-list-header .group-list-total {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	color: #c89f5b;
}
.group-list-body { border-top: 1px solid #f0f0f0; }
.group-list-body[hidden] { display: none; }
.group-list-empty { padding: 16px; color: #888; font-size: 13px; text-align: center; }
.group-list-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 16px;
	border-bottom: 1px solid #f5f5f5;
	font-size: 13px;
}
.group-list-item .gi-member { font-weight: 700; color: #6b5433; white-space: nowrap; }
.group-list-item .gi-body { flex: 1; min-width: 0; }
.group-list-item .gi-name { font-weight: 600; color: #333; }
.group-list-item .gi-opts { font-size: 11px; color: #888; }
.group-list-item .gi-price { font-weight: 600; color: #333; white-space: nowrap; }
.group-list-item .gi-remove {
	border: none;
	background: none;
	color: #b54e0a;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	padding: 2px;
}
.group-host-actions {
	display: flex;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid #f0f0f0;
}
.group-host-actions button {
	flex: 1;
	padding: 10px;
	border-radius: 8px;
	border: none;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
}
.group-submit-btn { background: linear-gradient(135deg, #c89f5b, #a67c3d); color: #fff; }
.group-cancel-btn { background: #f5f5f5; color: #b54e0a; }

/* Dòng hướng dẫn đặt món bằng tiếng Anh — xem site/order.blade.php. */
.order-en-hint {
    max-width: 780px;
    margin: 0 auto 18px;
    padding: 12px 16px;
    border: 1px dashed rgba(166, 124, 61, .45);
    border-radius: 10px;
    background: rgba(255, 255, 255, .6);
    font-size: 13.5px;
    line-height: 1.6;
    color: #6b6b6b;
    text-align: center;
}
.order-en-hint a {
    color: #a67c3d;
    text-decoration: underline;
}