/* Vulcan Warranty */

.vw-wrap {
	--vw-red: #ed1c24;
	--vw-red-dark: #b3151b;
	--vw-ink: #1f2328;
	--vw-muted: #5b6470;
	--vw-line: #e3e6ea;
	max-width: 720px;
	margin: 0 auto;
	padding: 8px 0 24px;
	color: var(--vw-ink);
	font-size: 15px;
	line-height: 1.6;
}

.vw-head { text-align: center; margin-bottom: 22px; }
.vw-title { margin: 0 0 8px; font-size: 26px; line-height: 1.25; }
.vw-intro { margin: 0; color: var(--vw-muted); }

.vw-form {
	background: #fff;
	border: 1px solid var(--vw-line);
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 6px 24px rgba(140, 15, 22, .06);
}

.vw-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.vw-col-2 { grid-column: 1 / -1; }

.vw-field { display: flex; flex-direction: column; }
.vw-field label { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.vw-req { color: var(--vw-red); }

.vw-field input,
.vw-field select {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--vw-line);
	border-radius: 8px;
	font-size: 16px; /* 16px để iOS không tự phóng to khi focus */
	line-height: 1.4;
	background: #fff;
	color: var(--vw-ink);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
/* Mũi tên tùy chỉnh cho dropdown, canh đều với các ô nhập */
.vw-field select {
	padding-right: 42px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ed1c24' stroke-width='3' 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 14px center;
	cursor: pointer;
	text-overflow: ellipsis;
}
.vw-field select:disabled {
	background-color: #f6f7f8;
	color: #9aa1ab;
	cursor: not-allowed;
}
/* Ô ngày: hiện icon lịch, bấm vào đâu cũng mở calendar */
.vw-field input[type="date"] { cursor: pointer; }
.vw-field input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: .7;
	filter: invert(18%) sepia(96%) saturate(6000%) hue-rotate(353deg) brightness(92%) contrast(95%);
}
.vw-field input:focus,
.vw-field select:focus {
	outline: none;
	border-color: var(--vw-red);
	box-shadow: 0 0 0 3px rgba(237, 28, 36, .16);
}
.vw-field.vw-invalid input,
.vw-field.vw-invalid select { border-color: #d64545; }

.vw-hint { margin-top: 5px; font-size: 12.5px; color: var(--vw-muted); }
.vw-error { display: none; margin-top: 5px; font-size: 13px; color: #d64545; }
.vw-error.vw-show { display: block; }

.vw-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.vw-submit {
	margin-top: 20px;
	width: 100%;
	padding: 15px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--vw-red);
	color: #fff;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .5px;
	cursor: pointer;
	transition: filter .15s ease, transform .05s ease;
}
.vw-submit:hover:not(:disabled) { filter: brightness(1.06); }
.vw-submit:active:not(:disabled) { transform: translateY(1px); }
.vw-submit:disabled { opacity: .55; cursor: not-allowed; }

.vw-status { margin: 12px 0 0; min-height: 20px; font-size: 14px; text-align: center; color: var(--vw-muted); }
.vw-status.vw-status-error { color: #d64545; }

/* Popup */
.vw-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.vw-modal[hidden] { display: none; }
.vw-modal-backdrop { position: absolute; inset: 0; background: rgba(40, 8, 11, .62); }
.vw-modal-card {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 32px 28px 26px;
	max-width: 460px;
	width: 100%;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0,0,0,.3);
	animation: vw-pop .25s ease-out;
}
@keyframes vw-pop { from { opacity: 0; transform: scale(.92) translateY(10px); } to { opacity: 1; transform: none; } }
.vw-modal-emoji { font-size: 44px; line-height: 1; margin-bottom: 8px; }
.vw-modal-card h3 { margin: 0 0 12px; font-size: 22px; color: var(--vw-red-dark); }
.vw-modal-msg { font-size: 15px; line-height: 1.7; color: var(--vw-ink); }
.vw-modal-ok { margin-top: 22px; padding: 12px 36px; border: 0; border-radius: 8px; background: var(--vw-red); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }

@media (max-width: 600px) {
	.vw-title { font-size: 22px; }
	.vw-grid { grid-template-columns: 1fr; }
	.vw-form { padding: 20px; }
}