/**
 * HiTechCloud Estimator — public styles.
 *
 * Same 2026 house system as the rest of the site: flat white surfaces, 1px
 * #d9e7f5 rules, 16px radii, type at 400–600.
 *
 * The estimator is embedded inside existing pages via shortcode, so everything
 * is scoped to .htc-est and nothing here styles a bare element.
 */

.hc-wp .htc-est {
	--hc-e-blue: var(--hc-blue, #0969ff);
	--hc-e-text: var(--hc-text, #22304a);
	--hc-e-muted: var(--hc-muted, #667895);
	--hc-e-line: var(--hc-border, #d9e7f5);
	--hc-e-soft: var(--hc-bg, #f5f9ff);
	--hc-e-radius: 16px;
	margin-block: 26px;
	padding: 26px;
	border: 1px solid var(--hc-e-line);
	border-radius: var(--hc-e-radius);
	background: #fff;
	color: var(--hc-e-text);
	font-size: 16px;
	line-height: 1.55;
}

.hc-wp .htc-est *,
.hc-wp .htc-est *::before,
.hc-wp .htc-est *::after { box-sizing: border-box; }

.hc-wp .htc-est__intro {
	margin: 0 0 20px;
	color: var(--hc-e-muted);
	font-size: 15px;
}

.hc-wp .htc-est-icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	vertical-align: -0.125em;
}

/* Controls -------------------------------------------------------------- */

.hc-wp .htc-est__controls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px 24px;
	padding: 20px;
	border-radius: 12px;
	background: var(--hc-e-soft);
}

.hc-wp .htc-est__control label {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 500;
}

.hc-wp .htc-est__control-icon {
	display: flex;
	color: var(--hc-e-blue);
	font-size: 17px;
}

.hc-wp .htc-est__value {
	margin-left: auto;
	color: var(--hc-e-blue);
	font-size: 15px;
	font-weight: 600;
}

.hc-wp .htc-est input[type="range"] {
	width: 100%;
	accent-color: var(--hc-e-blue);
}

.hc-wp .htc-est__control--qty input {
	width: 100%;
	min-height: 42px;
	padding: 8px 12px;
	border: 1px solid var(--hc-e-line);
	border-radius: 10px;
	background: #fff;
	color: var(--hc-e-text);
	font-size: 15px;
}

/* Results --------------------------------------------------------------- */

.hc-wp .htc-est__results { margin-top: 22px; }

.hc-wp .htc-est__plans {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hc-wp .htc-est__plan-inner {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 16px 18px;
	border: 1px solid var(--hc-e-line);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .15s ease;
}

.hc-wp .htc-est__plan-inner:hover { border-color: var(--hc-e-blue); }

.hc-wp .htc-est__plan input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--hc-e-blue);
}

/* The cheapest match is the answer to the question that was asked, so it is
   marked rather than merely listed first. */
.hc-wp .htc-est__plan.is-best .htc-est__plan-inner {
	border-color: var(--hc-e-blue);
	background: #f7faff;
}

.hc-wp .htc-est__plan-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.hc-wp .htc-est__plan-head {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
}

.hc-wp .htc-est__plan-name { font-size: 16px; font-weight: 600; }
.hc-wp .htc-est__plan-family { color: var(--hc-e-muted); font-size: 13px; }

.hc-wp .htc-est__plan-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.hc-wp .htc-est__plan-specs span {
	padding: 3px 9px;
	border-radius: 6px;
	background: var(--hc-e-soft);
	color: var(--hc-e-muted);
	font-size: 12px;
}

.hc-wp .htc-est__plan-price {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}

.hc-wp .htc-est__plan-price strong {
	color: var(--hc-e-blue);
	font-size: 19px;
	font-weight: 600;
	white-space: nowrap;
}

.hc-wp .htc-est__plan-price span { color: var(--hc-e-muted); font-size: 12px; }

.hc-wp .htc-est__empty {
	margin: 0;
	padding: 26px;
	border: 1px dashed var(--hc-e-line);
	border-radius: 12px;
	color: var(--hc-e-muted);
	text-align: center;
}

.hc-wp .htc-est__note {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin: 18px 0 0;
	color: var(--hc-e-muted);
	font-size: 13px;
}

.hc-wp .htc-est__note .htc-est-icon { margin-top: 3px; }

.hc-wp .htc-est__notice {
	padding: 14px 18px;
	border: 1px dashed #d9e7f5;
	border-radius: 12px;
	color: #667895;
}

/* Quote form ------------------------------------------------------------ */

.hc-wp .htc-est__quote {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--hc-e-line);
}

.hc-wp .htc-est .htc-est__quote h3 {
	margin: 0 0 16px !important;
	color: var(--hc-e-text) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-align: left !important;
}

.hc-wp .htc-est__quote-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0 18px;
}

.hc-wp .htc-est__field { margin: 0 0 14px; }
.hc-wp .htc-est__field--full { grid-column: 1 / -1; }

.hc-wp .htc-est__field label {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: 500;
}

.hc-wp .htc-est__required { color: #c02a37; }

.hc-wp .htc-est__field :is(input, textarea) {
	width: 100%;
	min-height: 42px;
	padding: 9px 13px;
	border: 1px solid var(--hc-e-line);
	border-radius: 10px;
	background: #fff;
	color: var(--hc-e-text);
	font-size: 15px;
}

.hc-wp .htc-est__field :is(input, textarea):focus {
	border-color: var(--hc-e-blue);
	outline: none;
}

.hc-wp .htc-est .htc-est__btn {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	min-height: 46px;
	padding: 0 26px;
	border: 1px solid var(--hc-e-blue);
	border-radius: 10px;
	background: var(--hc-e-blue);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}

.hc-wp .htc-est .htc-est__btn:hover { background: var(--hc-blue-dark, #082f86); }
.hc-wp .htc-est .htc-est__btn[disabled] { opacity: .6; cursor: progress; }

.hc-wp .htc-est__quote-note {
	margin: 12px 0 0;
	color: var(--hc-e-muted);
	font-size: 12px;
}

.hc-wp .htc-est__message {
	margin: 14px 0 0;
	padding: 11px 15px;
	border-radius: 10px;
	font-size: 14px;
}

.hc-wp .htc-est__message.is-ok { background: #e6f6ee; color: #0a5c3c; }
.hc-wp .htc-est__message.is-error { background: #fdecec; color: #8f1f29; }

.hc-wp .htc-est__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

@media (max-width: 720px) {
	.hc-wp .htc-est { padding: 20px 16px; }
	.hc-wp .htc-est__controls { padding: 16px; }
	.hc-wp .htc-est__plan-inner { flex-wrap: wrap; }
	.hc-wp .htc-est__plan-price { align-items: flex-start; text-align: left; }
}

/* "từ 508.000 đ" — the price is a floor when the plan's specs say "Từ …". */
.hc-wp .htc-est__plan-from {
	margin-right: 4px;
	color: var(--hc-e-muted);
	font-size: 13px;
	font-weight: 400;
}

.hc-wp .htc-est__plan-period {
	display: flex;
	gap: 4px;
	color: var(--hc-e-muted);
	font-size: 12px;
}

/* The count and its label are separate nodes so the translation layer can match
   the label; a gap does the spacing a space used to. */
.hc-wp .htc-est__plan-unit,
.hc-wp .htc-est__plan-period {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: flex-end;
}

.hc-wp .htc-est__plan-price strong {
	display: flex;
	gap: 4px;
	align-items: baseline;
}

/* A minimum-period field can carry a whole sentence ("tối thiểu 1 tháng. Chưa
   bao gồm bản quyền Windows."), which overflowed the card on narrow screens. */
.hc-wp .htc-est__plan-price { min-width: 0; }
.hc-wp .htc-est__plan-period span { overflow-wrap: anywhere; }

@media (max-width: 720px) {
	.hc-wp .htc-est__plan-price { width: 100%; }
	.hc-wp .htc-est__plan-unit,
	.hc-wp .htc-est__plan-period { justify-content: flex-start; }
}

/* Nhóm sản phẩm — danh mục nay có 13 nhóm nên phải chọn nhóm trước khi lọc. */
.hc-wp .htc-est__families {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}

.hc-wp .htc-est__family {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid #d9e7f5;
	border-radius: 999px;
	background: #fff;
	color: #22304a;
	font-size: 14px;
	line-height: 1.3;
	cursor: pointer;
}

.hc-wp .htc-est__family:hover {
	border-color: #1668c4;
	color: #1668c4;
}

.hc-wp .htc-est__family.is-active {
	background: #071832;
	border-color: #071832;
	color: #fff;
}

.hc-wp .htc-est__family-count {
	font-size: 12px;
	opacity: .65;
}

.hc-wp .htc-est__control--cycle select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #d9e7f5;
	border-radius: 8px;
	background: #fff;
	color: #22304a;
	font-size: 14px;
}

/* Giá đã gồm thuế đứng ngay dưới giá niêm yết, nhỏ hơn một bậc. */
.hc-wp .htc-est__plan-vat {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: #1668c4;
}

.hc-wp .htc-est__plan-vat span + span {
	margin-left: 4px;
	opacity: .8;
}

.hc-wp .htc-est__plan-vat-note {
	opacity: .7;
}