/* Form dùng chung cho mọi panel / hộp thoại: đăng nhập + hồ sơ (account), My trips (trips), viết đánh giá (reviews).
   Nhãn .vo-label nằm ở base.css. Mỗi thứ chỉ có 1 class; muốn đổi giao diện form cả site thì sửa ở đây (cỡ chữ ô nhập: --vo-input-fs, cao ô: --vo-field-h, cỡ nhãn: --vo-label-fs ở tokens.css).

   <h2 class="vo-panel-h">Tiêu đề</h2>  <p class="vo-lead">Dẫn</p>
   <label class="vo-label" for="x">Tên <span class="vo-label__opt">(optional)</span></label>
   <input class="vo-input" id="x">   <textarea class="vo-input vo-input--area">   <input class="vo-input vo-input--code">
   <p class="vo-field-err" role="alert">Lỗi</p>   <p class="vo-fine">Ghi chú nhỏ</p>   <p class="vo-or"><span>or</span></p>   <button class="vo-text-link">Link chữ</button> */

.vo-panel-h { margin: 0 0 var(--vo-space-2); font-size: var(--vo-fs-lg); font-weight: 700; line-height: 1.25; }   /* 20px / 25px: số nguyên để khối dưới không lệch nửa pixel làm nhoè viền ô nhập */
.vo-lead { margin: 0 0 var(--vo-space-4); color: var(--vo-muted); font-size: var(--vo-fs-sm); line-height: 22px; }   /* line-height px nguyên: cùng lý do trên */
.vo-lead b { color: var(--vo-ink); overflow-wrap: anywhere; }

.vo-input {
	display: block;
	width: 100%;
	height: var(--vo-field-h);
	margin: 0;
	padding: 0 var(--vo-space-3);
	border: 1px solid var(--vo-line);
	border-radius: var(--vo-radius-sm);
	background: var(--vo-surface);
	color: var(--vo-ink);
	font: inherit;
	font-size: var(--vo-input-fs);                  /* tokens.css: 16px trên màn cảm ứng để iPhone không phóng to khi focus */
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	font-feature-settings: "calt" 0, "case" 0;      /* tắt biến thể theo ngữ cảnh của font: ký tự @ không bị tụt khi gõ tiếp */
	font-variant-ligatures: none;
}
.vo-input::placeholder { color: var(--vo-search-field-ink); opacity: 1; }
.vo-input:focus,
.vo-input:focus-visible { outline: 0; border-color: var(--vo-primary); box-shadow: inset 0 0 0 1px var(--vo-primary); }   /* inset: Chrome không để vệt viền mờ sau blur */
.vo-input[aria-invalid="true"] { border-color: var(--vo-warn-ink); box-shadow: inset 0 0 0 1px var(--vo-warn-ink); }
.vo-input--area { height: auto; min-height: calc(var(--vo-btn) * 3); padding: var(--vo-space-3); line-height: 1.5; resize: vertical; }
.vo-input--code { text-align: center; font-size: var(--vo-fs-xl); font-weight: 700; letter-spacing: .5em; text-indent: .5em; font-variant-numeric: tabular-nums; }

.vo-field-err { margin: var(--vo-space-2) 0 var(--vo-space-3); color: var(--vo-warn-ink); font-size: var(--vo-fs-xs); line-height: 18px; }
.vo-field-err[hidden] { display: none; }
.vo-fine { margin: var(--vo-space-3) 0 0; color: var(--vo-muted); font-size: var(--vo-fs-xs); line-height: 20px; }
.vo-fine a { color: var(--vo-ink); text-decoration: underline; }
.vo-or { display: flex; align-items: center; gap: var(--vo-space-3); margin: var(--vo-space-4) 0; color: var(--vo-muted); font-size: var(--vo-fs-xs); line-height: 20px; }
.vo-or[hidden] { display: none; }
.vo-or::before,
.vo-or::after { content: ""; flex: 1; border-top: 1px solid var(--vo-divider); }
.vo-text-link {
	padding: var(--vo-space-2) 0;
	border: 0;
	background: none;
	color: var(--vo-ink);
	font: inherit;
	font-size: var(--vo-fs-xs);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.vo-text-link.vo-text-link--danger { color: var(--vo-danger); }
.vo-text-link:disabled { color: var(--vo-muted); text-decoration: none; cursor: default; }
.vo-text-link[hidden] { display: none; }