/* ttna-booking form-mini.css — thanh tính giá nhanh 1 hàng dùng ở trang chủ (22/07/2026).
   Bản đầy đủ (form.css) vẫn dùng riêng cho trang /bang-gia/ — file này độc lập, không phụ
   thuộc form.css, để tránh xung đột khi cả 2 có thể được nạp trên các trang khác nhau. */

.ttna-mini {
	--c-navy: #10265C;
	--c-navy-dark: #0B1B42;
	--c-orange: #FF6B16;
	--c-orange-dark: #E85A0C;
	--c-green: #0C8A43;
	--c-green-dark: #0A7038;
	--c-bg-light: #F7F9FC;
	--c-text: #15213B;
	--c-text-soft: #5B6475;
	--c-border: #E3E8F0;

	max-width: 1180px; margin: 0 auto; font-size: 14.5px; color: var(--c-text);
	background: #fff; border-radius: 16px; padding: 26px 28px;
	box-shadow: 0 20px 50px rgba(11, 27, 66, .22);
	box-sizing: border-box;
}
.ttna-mini *, .ttna-mini *::before, .ttna-mini *::after { box-sizing: border-box; }

.ttna-mini-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.ttna-mini-header-icon {
	flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px;
	background: var(--c-navy); color: var(--c-orange);
	display: flex; align-items: center; justify-content: center;
}
.ttna-mini-header-icon svg { width: 22px; height: 22px; }
.ttna-mini-header-text { flex: 1 1 260px; min-width: 0; }
.ttna-mini-header-text h3 { margin: 0 0 2px; font-size: 18px; font-weight: 800; color: var(--c-navy); }
.ttna-mini-header-text p { margin: 0; font-size: 13px; color: var(--c-text-soft); }
.ttna-mini-full-link {
	display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
	color: var(--c-navy); font-weight: 700; font-size: 13.5px; text-decoration: none; white-space: nowrap;
}
.ttna-mini-full-link svg { width: 15px; height: 15px; }
.ttna-mini-full-link:hover { color: var(--c-orange); }

/* Hàng chính: dịch vụ / tuyến đường / loại xe */
.ttna-mini-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.ttna-mini-field { display: flex; flex-direction: column; gap: 6px; }
.ttna-mini-field-service { flex: 1 1 220px; }
.ttna-mini-field-route { flex: 2.2 1 400px; }
.ttna-mini-field-vehicle { flex: 1 1 200px; }
.ttna-mini-field label, .ttna-mini-subfield label { font-weight: 700; font-size: 12.5px; color: var(--c-navy); }

.ttna-mini-select-icon { position: relative; display: flex; align-items: center; gap: 8px; }
.ttna-mini-select-icon > svg {
	position: absolute; left: 12px; width: 16px; height: 16px; color: #8792a3; pointer-events: none;
}
.ttna-mini-select-icon select, .ttna-mini-select-icon input {
	width: 100%; padding: 10px 34px 10px 38px; border: 1px solid var(--c-border); border-radius: 9px;
	font-size: 13.5px; font-family: inherit; color: var(--c-text); background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.ttna-mini-select-icon select:hover, .ttna-mini-select-icon input:hover { border-color: #C7CFDC; }
.ttna-mini-select-icon select:focus, .ttna-mini-select-icon input:focus {
	outline: none; border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(255,107,22,.12);
}
/* Select tuỳ biến: bỏ mũi tên mặc định của trình duyệt, tự vẽ chevron cam bằng SVG nền +
   cắt chữ 1 dòng có dấu "..." nếu dài (VD "Xe Tải 5.5 Tấn") — tránh vỡ khung khi tên xe dài. */
.ttna-mini-select-icon select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	cursor: pointer; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6B16' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
}
.ttna-mini-select-icon-badge {
	position: static; flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
}
.ttna-mini-select-icon-badge svg { width: 17px; height: 17px; }
.ttna-mini-select-icon-badge--orange { background: #FFE4D1; color: var(--c-orange); }
.ttna-mini-select-icon-badge--green { background: #DCF3E4; color: var(--c-green); }
.ttna-mini-select-icon-badge--navy { background: #E1E6F2; color: var(--c-navy); }
.ttna-mini-field-service .ttna-mini-select-icon select { padding-left: 12px; }

.ttna-mini-route-pair { display: flex; align-items: flex-end; gap: 10px; }
.ttna-mini-subfield { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.ttna-mini-route-arrow {
	flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--c-bg-light);
	color: var(--c-navy); display: flex; align-items: center; justify-content: center; margin-bottom: 2px;
}
.ttna-mini-route-arrow svg { width: 15px; height: 15px; }
.ttna-mini-select-icon--pin-origin svg:first-child { color: #4C7CE0; }
.ttna-mini-select-icon--pin-dest svg:first-child { color: var(--c-orange); }

/* Toolbar: mở rộng tuỳ chọn + nút tính giá */
.ttna-mini-toolbar { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.ttna-mini-toggle-extra {
	display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
	font-family: inherit; font-weight: 700; font-size: 13.5px; color: #3E63B3; padding: 0;
}
.ttna-mini-toggle-extra svg { width: 15px; height: 15px; transition: transform .15s; }
.ttna-mini-toggle-extra.is-open svg { transform: rotate(45deg); }
.ttna-mini-toolbar-hint { font-size: 12.5px; color: var(--c-text-soft); flex: 1; }

.ttna-mini-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 22px; border-radius: 9px; border: none; cursor: pointer;
	font-weight: 700; font-size: 13.5px; font-family: inherit; white-space: nowrap;
	transition: background .15s;
}
.ttna-mini-btn svg { width: 16px; height: 16px; }
.ttna-mini-btn-primary { background: var(--c-orange); color: #fff; }
.ttna-mini-btn-primary:hover:not(:disabled) { background: var(--c-orange-dark); }
.ttna-mini-btn-primary:disabled { background: #f3c8a8; cursor: not-allowed; }
.ttna-mini-btn-outline { background: #fff; color: var(--c-green); border: 1.5px solid var(--c-green); }
.ttna-mini-btn-outline:hover { background: #EAFBF0; }
.ttna-mini-link {
	display: inline-flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer;
	font-family: inherit; font-weight: 700; font-size: 13px; color: var(--c-navy); padding: 0;
}
.ttna-mini-link svg { width: 14px; height: 14px; transition: transform .15s; }
.ttna-mini-link.is-open svg { transform: rotate(180deg); }

/* Khối tuỳ chọn thêm (thu gọn mặc định) */
.ttna-mini-extra {
	margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--c-border);
	display: flex; flex-direction: column; gap: 14px;
}
.ttna-mini-extra-grid { display: flex; gap: 14px; flex-wrap: wrap; }
.ttna-mini-extra-grid .ttna-mini-subfield { flex: 1 1 180px; }
.ttna-mini-subfield input[type="text"], .ttna-mini-subfield input[type="number"],
.ttna-mini-subfield input[type="datetime-local"], .ttna-mini-subfield textarea, .ttna-mini-subfield select {
	width: 100%; padding: 9px 11px; border: 1px solid var(--c-border); border-radius: 8px;
	font-size: 13.5px; font-family: inherit; color: var(--c-text);
}
.ttna-mini-checkbox { justify-content: center; }
.ttna-mini-checkbox label { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--c-text); font-size: 13.5px; }
.ttna-mini-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--c-orange); }

.ttna-mini-item-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--c-border); flex-wrap: wrap; }
.ttna-mini-item-row .ttna-mini-item-name { flex: 1 1 180px; font-weight: 600; font-size: 13px; }
.ttna-mini-item-row input[type="number"] { width: 56px; }
.ttna-mini-item-row label { font-weight: 400; font-size: 12px; margin-right: 6px; }

/* Kết quả */
.ttna-mini-result {
	margin-top: 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
	background: #FFF7F1; border: 1px solid #FFD5B3; border-radius: 12px; padding: 16px 20px;
}
.ttna-mini-result-distance { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ttna-mini-result-distance-icon {
	width: 38px; height: 38px; border-radius: 9px; background: #E1E6F2; color: var(--c-navy);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ttna-mini-result-distance-icon svg { width: 18px; height: 18px; }
.ttna-mini-result-distance-label { display: block; font-size: 11.5px; color: var(--c-text-soft); }
.ttna-mini-result-distance-value { display: block; font-size: 16px; font-weight: 800; color: var(--c-navy); }

.ttna-mini-result-price { flex: 1 1 260px; padding-left: 18px; border-left: 1px solid #FFD5B3; }
.ttna-mini-result-price-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--c-orange-dark); }
.ttna-mini-result-price-value { display: block; font-size: 21px; font-weight: 800; color: var(--c-navy); margin: 2px 0; }
.ttna-mini-result-price-note { display: block; font-size: 12px; color: var(--c-text-soft); }

.ttna-mini-result-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; flex-wrap: wrap; }

.ttna-mini-detail {
	flex-basis: 100%; margin-top: 4px; padding-top: 14px; border-top: 1px dashed #FFD5B3;
	display: flex; flex-direction: column; gap: 8px;
}
.ttna-mini-detail-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; }
.ttna-mini-detail-line span:first-child { color: var(--c-text-soft); }
.ttna-mini-detail-line span:last-child { font-weight: 700; color: var(--c-navy); text-align: right; }

.ttna-error { color: #b3261e; font-weight: 600; margin-top: 10px; font-size: 13.5px; }

/* Gợi ý địa chỉ */
.ttna-mini-select-icon .ttna-autocomplete-wrapper { position: relative; flex: 1; }
.ttna-autocomplete-suggestions {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 50; margin-top: 4px;
	background: #fff; border: 1px solid var(--c-border); border-radius: 8px;
	max-height: 220px; overflow-y: auto; box-shadow: 0 8px 20px rgba(21,33,59,.12);
}
.ttna-autocomplete-item { padding: 9px 12px; cursor: pointer; font-size: 13.5px; }
.ttna-autocomplete-item:hover { background: var(--c-bg-light); }

/* Thuộc tính `hidden` của trình duyệt bị các rule display:flex phía trên đè mất (CSS tác giả
   luôn thắng UA stylesheet bất kể specificity) — khai báo lại rõ ràng để ẩn đúng cho tới khi
   JS gỡ `hidden` (mở "Thêm thời gian và tuỳ chọn" / có kết quả tính giá). */
.ttna-mini-extra[hidden],
.ttna-mini-result[hidden],
.ttna-mini-detail[hidden] { display: none; }

.ttna-mini-trust { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.ttna-mini-trust > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--c-text-soft); font-weight: 600; }
.ttna-mini-trust svg { width: 15px; height: 15px; color: var(--c-green); }

/* Cặp text "đầy đủ / rút gọn" — mặc định (desktop) hiện bản đầy đủ, ẩn bản rút gọn.
   Mobile đảo lại bên dưới. Dùng chung cho header link, nút toggle, nút tính giá, trust badge. */
.ttna-mini-text-short { display: none; }

@media (max-width: 900px) {
	.ttna-mini { padding: 22px 18px; border-radius: 20px; }
	.ttna-mini-text-full { display: none; }
	.ttna-mini-text-short { display: inline; }

	/* Header: bỏ phụ đề, icon nhỏ gọn cùng hàng với tiêu đề, link rút gọn ẩn hẳn.
	   flex-wrap: nowrap + flex-basis auto — trước đó header-text giữ flex-basis 260px (dùng cho
	   desktop) khiến icon(38px)+gap(14px)+260px > bề rộng khung mobile, bị đẩy xuống dòng dưới. */
	.ttna-mini-header { flex-wrap: nowrap; gap: 10px; }
	.ttna-mini-header-text p { display: none; }
	.ttna-mini-header-text { flex: 1 1 auto; }
	.ttna-mini-header-icon { width: 36px; height: 36px; border-radius: 10px; }
	.ttna-mini-header-icon svg { width: 18px; height: 18px; }
	.ttna-mini-header-text h3 { font-size: 18px; }
	.ttna-mini-full-link { display: none; }

	/* Hàng chính: "Dịch vụ" + "Loại xe" xếp 2 cột, "Tuyến đường" xuống hàng riêng full-width
	   (dùng flex-wrap tự ngắt dòng — 2 field 50% vừa khít 1 hàng, field còn lại tự rơi xuống
	   dòng dưới do không còn chỗ, không cần phần tử ngắt dòng thủ công). */
	.ttna-mini-row { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
	.ttna-mini-field-service { order: 1; flex: 1 1 calc(50% - 5px); }
	.ttna-mini-field-vehicle { order: 2; flex: 1 1 calc(50% - 5px); }
	.ttna-mini-field-route { order: 3; flex: 1 1 100%; }

	.ttna-mini-select-icon select, .ttna-mini-select-icon input {
		padding: 12px 14px 12px 40px; border-radius: 11px; font-size: 13.5px;
	}
	.ttna-mini-select-icon select { padding-right: 26px; background-position: right 9px center; background-size: 11px; }

	/* "Dịch vụ" / "Loại xe": tách icon ra khỏi flex (đặt chồng lên select bằng absolute) để
	   giải phóng ~30-40px vốn bị icon/badge chiếm chỗ làm 1 ô riêng — chữ trong select nhờ đó
	   có nhiều chỗ hơn, đỡ bị cắt "..." sớm (VD trước đây "Taxi t...", "Xe Tải 1..."). Nền
	   xám nhạt (--c-bg-light) thay viền trắng — nhìn như 1 "chip" chọn nhanh, gọn hơn trên
	   khung hẹp thay vì khung viền + icon vuông cạnh nhau. */
	.ttna-mini-field-service .ttna-mini-select-icon-badge,
	.ttna-mini-field-vehicle .ttna-mini-select-icon > svg {
		position: absolute; left: 9px; top: 50%; transform: translateY(-50%); z-index: 1; pointer-events: none;
	}
	.ttna-mini-field-service .ttna-mini-select-icon-badge { width: 22px; height: 22px; border-radius: 6px; }
	.ttna-mini-field-service .ttna-mini-select-icon-badge svg { width: 13px; height: 13px; }
	.ttna-mini-field-vehicle .ttna-mini-select-icon > svg { width: 15px; height: 15px; color: var(--c-orange); }
	.ttna-mini-field-service .ttna-mini-select-icon select,
	.ttna-mini-field-vehicle .ttna-mini-select-icon select {
		padding-left: 32px; background-color: var(--c-bg-light); border-color: transparent; font-weight: 700;
	}
	.ttna-mini-field-service .ttna-mini-select-icon select:focus,
	.ttna-mini-field-vehicle .ttna-mini-select-icon select:focus { background-color: #fff; }
	.ttna-mini-field label { font-size: 11.5px; margin-bottom: 2px; }

	/* Thẻ "Tuyến đường": bo góc + viền, ẩn nhãn/icon ghim cũ, thay bằng chấm tròn + đường nối +
	   nút đổi chiều nổi bên phải — khớp mockup kiểu "route tracker" của app đặt xe. */
	.ttna-mini-route-pair {
		position: relative; flex-direction: column; align-items: stretch; gap: 14px;
		border: 1px solid var(--c-border); border-radius: 14px; padding: 16px 46px 16px 34px;
	}
	.ttna-mini-route-pair .ttna-mini-subfield label { display: none; }
	.ttna-mini-route-pair .ttna-mini-select-icon > svg { display: none; }
	.ttna-mini-route-pair .ttna-mini-select-icon select,
	.ttna-mini-route-pair .ttna-mini-select-icon input { padding-left: 12px; }
	.ttna-mini-route-arrow { display: none; }

	/* Dùng :first-of-type/:last-of-type (theo tag div) thay vì :first-child/:last-child — vì
	   route-pair còn có thêm <span class="ttna-mini-route-arrow"> và <button class="ttna-mini-route-swap">
	   làm anh em cùng cấp, khiến subfield điểm đến không còn là :last-child nữa (nó là :last-of-type
	   xét theo thẻ div, do span/button không phải div). */
	.ttna-mini-route-pair .ttna-mini-subfield { position: relative; }
	.ttna-mini-route-pair .ttna-mini-subfield:first-of-type::before,
	.ttna-mini-route-pair .ttna-mini-subfield:last-of-type::before {
		content: ''; position: absolute; top: 50%; left: -20px; margin-top: -6px;
		width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid; background: #fff;
	}
	.ttna-mini-route-pair .ttna-mini-subfield:first-of-type::before { border-color: var(--c-green); }
	.ttna-mini-route-pair .ttna-mini-subfield:last-of-type::before { border-color: var(--c-orange); }
	.ttna-mini-route-pair::before {
		content: ''; position: absolute; left: 19.5px; top: 30px; bottom: 30px; width: 1px; background: var(--c-border);
	}

	.ttna-mini-route-swap {
		display: flex; align-items: center; justify-content: center;
		position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
		width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid var(--c-border);
		color: var(--c-navy); cursor: pointer; padding: 0; box-shadow: 0 2px 6px rgba(21,33,59,.08);
	}
	.ttna-mini-route-swap svg { width: 15px; height: 15px; }
	.ttna-mini-route-swap:hover { border-color: var(--c-orange); color: var(--c-orange); }

	/* Toolbar: "+ Thời gian và tuỳ chọn" thành 1 hàng accordion viền đầy đủ chiều rộng,
	   chevron ở bên phải (vẽ bằng border, không cần thêm ảnh/svg); nút "Tính giá" full-width,
	   chữ hoa, nằm dưới. */
	.ttna-mini-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
	.ttna-mini-toggle-extra {
		width: 100%; border: 1px solid var(--c-border); border-radius: 12px; padding: 13px 14px;
	}
	.ttna-mini-toggle-extra::after {
		content: ''; width: 7px; height: 7px; margin-left: auto;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: rotate(45deg); transition: transform .15s;
	}
	.ttna-mini-toggle-extra.is-open::after { transform: rotate(-135deg); }
	.ttna-mini-toolbar-hint { display: none; }
	.ttna-mini-btn-primary {
		width: 100%; text-transform: uppercase; letter-spacing: .02em; padding: 14px 22px; font-size: 14.5px;
	}

	.ttna-mini-result { flex-direction: column; align-items: stretch; }
	.ttna-mini-result-price { flex-basis: auto; border-left: none; padding-left: 0; border-top: 1px solid #FFD5B3; padding-top: 12px; }

	.ttna-mini-trust { justify-content: space-between; gap: 10px; }
}