.hlgl {
	color: inherit;
	font-family: "Noto Sans Thai", Tahoma, sans-serif !important;
	line-height: 1.7;
}

.hlgl *,
.hlgl *::before,
.hlgl *::after {
	box-sizing: border-box;
	font-family: "Noto Sans Thai", Tahoma, sans-serif !important;
}

.hlgl h2,
.hlgl h3,
.hlgl h4,
.hlgl p,
.hlgl label,
.hlgl input,
.hlgl select,
.hlgl button,
.hlgl summary,
.hlgl table {
	color: inherit;
	font-family: "Noto Sans Thai", Tahoma, sans-serif !important;
}

.hlgl h2 { margin: 0 0 .55em; font-size: 1.7em; }
.hlgl h3 { margin: 0 0 .55em; font-size: 1.3em; }
.hlgl h4 { margin: 0; font-size: 1.08em; }
.hlgl p { margin-top: .6em; }
.hlgl__intro { margin-bottom: 1.25em; }
.hlgl__intro p:last-child { margin-bottom: 0; }

.hlgl__form,
.hlgl__summary,
.hlgl__calendar-card,
.hlgl__year-card,
.hlgl__chart-card,
.hlgl__house-card,
.hlgl__calculation {
	min-width: 0;
	padding: clamp(1em, 2.2vw, 1.5em);
	border: 1px solid var(--ast-border-color, rgba(80, 60, 40, .28));
	border-radius: 12px;
	background: var(--ast-global-color-5, var(--wp--preset--color--base, #fff));
}

.hlgl__fields {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: .85em;
	align-items: end;
}

.hlgl__field { min-width: 0; }
.hlgl__field > label,
.hlgl__group-label { display: block; margin-bottom: .4em; font-weight: 600; }
.hlgl__field input,
.hlgl__field select {
	display: block;
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: .6em .75em;
	border: 1px solid var(--ast-border-color, #85796d) !important;
	border-radius: 6px !important;
	background: #fff !important;
	font-size: 1em;
}
.hlgl__field--birth { grid-column: 1 / -1; }
.hlgl__birth-parts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55em; }
.hlgl__birth-parts label { display: block; min-width: 0; margin: 0; font-size: .86em; font-weight: 600; }
.hlgl__birth-parts label > span { display: block; margin-bottom: .25em; }
.hlgl__birth-parts input,
.hlgl__birth-parts select { font-size: 1rem; }
.hlgl__field input:focus,
.hlgl__field select:focus { outline: 2px solid currentColor; outline-offset: 2px; }

.hlgl__help,
.hlgl__privacy,
.hlgl__note { margin: .75em 0 0; font-size: .92em; }
.hlgl__button {
	min-height: 48px;
	margin-top: .9em;
	padding: .65em 1.2em;
	border: 1px solid var(--ast-global-color-0, #8c5a1c) !important;
	border-radius: 7px !important;
	background: var(--ast-global-color-0, #8c5a1c) !important;
	color: #fff !important;
	font-size: 1em;
	font-weight: 700;
	text-decoration: none !important;
	cursor: pointer;
}
.hlgl__button:hover,
.hlgl__button:focus { filter: brightness(.92); text-decoration: none !important; }
.hlgl__message { margin: 1em 0; padding: .8em 1em; border-inline-start: 3px solid currentColor; }
.hlgl__report { margin-top: 2em; }
.hlgl__summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85em; }
.hlgl__calendar-card,
.hlgl__year-card,
.hlgl__summary div { min-width: 0; }
.hlgl__calendar-card,
.hlgl__year-card { margin-top: 1.25em; }
.hlgl__calendar-card > :last-child,
.hlgl__year-card > :last-child { margin-bottom: 0; }
.hlgl__year-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85em; }
.hlgl__year-metrics div { min-width: 0; padding: .8em; border: 1px solid rgba(80, 60, 40, .18); border-radius: 8px; }
.hlgl__year-metrics span,
.hlgl__year-metrics strong { display: block; }
.hlgl__year-metrics span { font-size: .9em; opacity: .78; }
.hlgl__year-metrics strong { font-size: 1.2em; }
.hlgl__summary span,
.hlgl__summary strong { display: block; }
.hlgl__summary span { font-size: .9em; opacity: .78; }
.hlgl__summary strong { font-size: 1.2em; }
.hlgl__chart-card,
.hlgl__predictions,
.hlgl__calculation { margin-top: 1.25em; }
.hlgl__chart-key { display: flex; flex-wrap: wrap; gap: .5em 1.2em; margin: 0; font-size: .9em; }
.hlgl__chart-key-active::before { display: inline-block; width: .7em; height: .7em; margin-inline-end: .35em; border: 2px solid #147c82; border-radius: 50%; content: ""; vertical-align: -.05em; }
.hlgl__chart-scroll { width: 100%; overflow-x: auto; }
.hlgl__chart { display: block; width: 100%; min-width: 660px; height: auto; overflow: visible; }
.hlgl__grid-line { stroke: #ece7e1; stroke-width: 1; }
.hlgl__grid-line--major { stroke: #d2c7ba; stroke-width: 1.4; }
.hlgl__axis-label { fill: currentColor; font-size: 12px; }
.hlgl__line { fill: none; stroke: var(--ast-global-color-0, #a65b14); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hlgl__point { fill: var(--ast-global-color-0, #a65b14); stroke: #fff; stroke-width: 2; }
.hlgl__point-halo { fill: none; stroke: #147c82; stroke-width: 3; }
.hlgl__selected-year-point { margin: .6em 0 1em; padding: .7em .9em; border-inline-start: 4px solid #147c82; border-radius: 4px; background: rgba(20, 124, 130, .08); font-weight: 700; }
.hlgl__year-prediction { margin: .8em 0 1em; padding: 1em 1.15em; border: 1px solid rgba(20, 124, 130, .3); border-inline-start: 4px solid #147c82; border-radius: 8px; background: rgba(20, 124, 130, .045); }
.hlgl__year-prediction h4 { margin: 0 0 .45em; }
.hlgl__year-prediction-meta { margin: 0 0 .25em; font-weight: 700; }
.hlgl__year-prediction .hlgl__band { margin: .25em 0 .55em; }
.hlgl__year-prediction > p:last-child { margin-bottom: 0; }
.hlgl__value-label { fill: currentColor; font-size: 13px; font-weight: 700; }
.hlgl__chart-houses { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); min-width: 660px; gap: .2em; margin-top: .2em; font-size: .72em; text-align: center; }
.hlgl__chart-houses span { min-width: 0; overflow-wrap: anywhere; }
.hlgl__calculation summary { font-weight: 700; cursor: pointer; }
.hlgl__base-table-wrap { width: 100%; overflow-x: auto; margin-top: .8em; }
.hlgl__base-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .9em; text-align: center; }
.hlgl__base-table th,
.hlgl__base-table td { padding: .45em .35em; border: 1px solid rgba(80, 60, 40, .22); }
.hlgl__base-table th:first-child { min-width: 90px; text-align: left; }
.hlgl__house-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9em; }
.hlgl__house-card { padding: 1em; }
.hlgl__house-card--active { border: 2px solid #147c82; box-shadow: 0 0 0 2px rgba(20, 124, 130, .12); }
.hlgl__house-heading { display: flex; align-items: center; justify-content: space-between; gap: .75em; }
.hlgl__score { display: inline-grid; width: 2.2em; height: 2.2em; place-items: center; flex: 0 0 auto; border: 1px solid currentColor; border-radius: 50%; font-weight: 700; }
.hlgl__band { margin: .45em 0; font-size: .88em; opacity: .75; }
.hlgl__house-card > p:last-child { margin-bottom: 0; }

@media (max-width: 800px) {
	.hlgl__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hlgl__field--birth { grid-column: 1 / -1; }
	.hlgl__birth-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hlgl__house-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.hlgl__fields,
	.hlgl__summary,
	.hlgl__year-metrics { grid-template-columns: 1fr; }
	.hlgl__field--birth { grid-column: 1 / -1; }
	.hlgl__birth-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hlgl__chart-card,
	.hlgl__calendar-card,
	.hlgl__year-card { padding-inline: .75em; }
}