/* Lịch ngày tốt (/lich-ngay-tot/) và Tuổi làm nhà (/tuoi-lam-nha/) */
.fd { --fd-tot: #15803d; --fd-kha: #2563eb; --fd-binh: #6b7280; --fd-xau: #b91c1c; padding-bottom: 40px; }
.fd section { margin: 28px 0; }
.fd h2 { font-size: 1.25rem; margin: 0 0 12px; }

.fd-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.fd-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.fd-form input, .fd-form select { min-width: 150px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--text, inherit); background: var(--bg, #fff); }

.fd-r--tot { --fd-c: var(--fd-tot); }
.fd-r--kha { --fd-c: var(--fd-kha); }
.fd-r--binh { --fd-c: var(--fd-binh); }
.fd-r--xau { --fd-c: var(--fd-xau); }

.fd-today { position: relative; display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 20px; padding: 20px; border: 1px solid var(--line); border-left: 5px solid var(--brand, #c8102e); border-radius: 14px; background: var(--surface); }
.fd-today__date span { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.fd-today__date b { display: block; font-size: 1.9rem; line-height: 1.2; }
.fd-today__date small { color: var(--muted); }
.fd-today__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 18px; margin: 0; }
.fd-today__facts dt { font-size: 12px; color: var(--muted); }
.fd-today__facts dd { margin: 2px 0 0; font-weight: 600; }
.fd-badge { position: absolute; top: 16px; right: 16px; margin: 0; padding: 4px 12px; border-radius: 99px; background: var(--fd-c); color: #fff; font-size: 13px; font-weight: 700; }

.fd-year { padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--fd-xau) 30%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--fd-xau) 5%, transparent); }
.fd-year h2 { font-size: 1.1rem; }
.fd-year p { margin: 0 0 8px; }
.fd-year ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 18px; margin: 0 0 8px; padding-left: 18px; }
.fd-year__note { font-size: 14px; color: var(--muted); }

.fd-best ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.fd-best li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--fd-tot) 35%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--fd-tot) 7%, transparent); }
.fd-best li b { color: var(--fd-tot); }
.fd-best li span { font-size: 13px; color: var(--muted); }

.fd-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.fd-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--fd-c); }

.fd-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fd-row { display: grid; grid-template-columns: 90px 70px minmax(150px, 1.4fr) 70px minmax(120px, 1fr) 110px; gap: 10px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 14px; }
.fd-table--tuoi .fd-row { grid-template-columns: minmax(130px, 1fr) 1fr 1fr; }
.fd-row--head { border-top: 0; background: var(--surface); font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.fd-row.is-today { background: color-mix(in srgb, var(--brand, #c8102e) 6%, transparent); }
.fd-note { color: var(--muted); font-size: 13px; }
.fd-pill { display: inline-block; white-space: nowrap; padding: 2px 10px; border-radius: 99px; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--fd-c); background: color-mix(in srgb, var(--fd-c) 10%, transparent); }

.fd-me__row { margin: 6px 0; padding: 10px 14px; border-left: 4px solid var(--fd-c); border-radius: 8px; background: var(--surface); }
.fd-how ul { margin: 0; padding-left: 20px; }
.fd-how li { margin: 6px 0; }
.fd-faq details { padding: 10px 0; border-bottom: 1px solid var(--line); }
.fd-faq summary { cursor: pointer; font-weight: 600; }
.fd-faq p { margin: 8px 0 0; color: var(--muted); }

.fd-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 28px; }
.fd-next a { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.fd-next a:hover { border-color: var(--brand); }
.fd-next span { font-size: 13px; color: var(--muted); }

.fd-or { align-self: center; padding-top: 18px; font-size: 13px; color: var(--muted); }
.fd-birth { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.fd-today__viec { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.fd-today__viec li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--fd-c); border-radius: 10px; background: var(--bg, #fff); }
.fd-today__viec span { font-weight: 600; font-size: 14px; }
.fd-today__viec small { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.fd-warn { display: inline-block; margin-left: 6px; font-size: 12.5px; color: #b45309; }
.fd-table .fd-warn { display: block; margin: 3px 0 0; }
.fd-callout { margin: 24px 0; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--fd-kha) 35%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--fd-kha) 6%, transparent); }
.fd-callout p { margin: 6px 0 0; }

@media (max-width: 720px) {
	.fd-today { grid-template-columns: 1fr; }
	.fd-or { padding-top: 0; }
	.fd-row { grid-template-columns: 70px 1fr auto; row-gap: 2px; }
	.fd-row > :nth-child(3) { grid-column: 2; grid-row: 1; }
	.fd-row > :nth-child(2), .fd-row > :nth-child(4) { display: none; }
	.fd-row > :nth-child(5) { grid-column: 1 / -1; grid-row: 2; }
	.fd-row > :nth-child(6) { grid-column: 3; grid-row: 1; justify-self: end; }
	.fd-row--head { display: none; }
	.fd-table--tuoi .fd-row { grid-template-columns: 1fr 1fr 1fr; }
	.fd-table--tuoi .fd-row > * { display: block !important; grid-column: auto !important; grid-row: auto !important; justify-self: start; }
	.fd-table--tuoi .fd-row--head { display: grid; }
}