.dtc-wrapper {
    max-width: 780px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #2d2a26;
}

.dtc-card {
    background: rgb(238 249 243 / 97%);
    border: 1px solid #2f9370;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 12px 24px rgba(50,150,110,.32);
}

.dtc-title {
    font-size: 24px;
    margin: 0 0 8px;
    color: #26564a;
    text-align: center;
}

.dtc-subtitle {
    text-align: center;
    color: #7a6f5f;
    margin: 0 0 24px;
    font-size: 14px;
}

.dtc-fieldset {
    border: 1px solid #2f9370;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.dtc-fieldset legend {
    padding: 0 8px;
    font-weight: 600;
    color: #26564a;
    font-size: 14px;
}

.dtc-field {
    margin-bottom: 12px;
}

.dtc-field:last-child {
    margin-bottom: 0;
}

.dtc-field label {
    display: block;
    font-size: 13px;
    color: #5c5346;
    margin-bottom: 4px;
}

.dtc-field input[type="text"],
.dtc-field input[type="date"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #3fae86;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}

.dtc-field input:focus {
    outline: none;
    border-color: #c8892f;
    box-shadow: 0 0 0 3px rgba(200, 137, 47, 0.15);
}

.dtc-submit-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg,#4bbf94,#2f9370);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dtc-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(181, 113, 28, 0.3);
}

.dtc-error {
    margin-top: 16px;
    padding: 12px 16px;
    background: #fde8e8;
    border: 1px solid #f3b3b3;
    border-radius: 8px;
    color: #a12727;
    font-size: 14px;
}

.dtc-loading {
    text-align: center;
    margin-top: 20px;
    color: #8a4b08;
    font-size: 14px;
}

.dtc-result {
    margin-top: 24px;
}

.dtc-block {
    margin-bottom: 28px;
    padding-top: 20px;
    border-top: 1px dashed #2f9370;
}

.dtc-block:first-child {
    border-top: none;
    padding-top: 0;
}

.dtc-block-title {
    font-size: 18px;
    color: #26564a;
    margin: 0 0 14px;
}

.dtc-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.dtc-overview-item {
    background: #fff;
    border: 1px solid #eee0c5;
    border-radius: 10px;
    padding: 14px;
}

.dtc-baby-item {
    background: #fff3de;
    border-color: #eecb8b;
}

.dtc-overview-label {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 13px;
    color: #5c5346;
}

.dtc-overview-value {
    font-size: 14px;
    line-height: 1.6;
}

.dtc-score-bar-wrap {
    margin-top: 14px;
}

.dtc-score-label {
    font-size: 14px;
    margin-bottom: 6px;
}

.dtc-score-bar-bg {
    background: #f0e3c8;
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.dtc-score-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #d99b3f, #6fae4c);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.dtc-relation-card {
    background: #fff;
    border: 1px solid #2f9370;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.dtc-relation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
}

.dtc-tag {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
}

.dtc-tag-good {
    background: #e3f5df;
    color: #2f7a1f;
}

.dtc-tag-neutral {
    background: #f0eee6;
    color: #6b6455;
}

.dtc-tag-warning {
    background: #fdeee0;
    color: #b0560f;
}

.dtc-relation-notes {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #4a4437;
    line-height: 1.7;
}

.dtc-name-intro {
    font-size: 14px;
    color: #5c5346;
    margin-bottom: 16px;
}

.dtc-name-group {
    margin-bottom: 18px;
}

.dtc-name-group-title {
    font-size: 15px;
    color: #b5711c;
    margin: 0 0 10px;
}

.dtc-name-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.dtc-name-item {
    background: #fff;
    border: 1px solid #eee0c5;
    border-radius: 8px;
    padding: 12px;
}

.dtc-name-text {
    font-weight: 700;
    color: #2d2a26;
    margin-bottom: 4px;
}

.dtc-name-meaning {
    font-size: 12.5px;
    color: #6b6455;
    line-height: 1.5;
}

.dtc-disclaimer {
    font-size: 12px;
    color: #9a9182;
    font-style: italic;
    margin-top: 12px;
}

/* ============================================================
   NGŨ HÀNH — bảng màu dùng chung cho chip / node / card theo hành
   ============================================================ */
.dtc-hanh-kim  { --hanh-color: #b8860b; --hanh-bg: #fdf6e3; --hanh-border: #ecd9a0; }
.dtc-hanh-moc  { --hanh-color: #3f7d3f; --hanh-bg: #eef7ec; --hanh-border: #bfe0bb; }
.dtc-hanh-thuy { --hanh-color: #2568a8; --hanh-bg: #eaf3fb; --hanh-border: #b9d7ee; }
.dtc-hanh-hoa  { --hanh-color: #c1401f; --hanh-bg: #fdefe9; --hanh-border: #f1c1ab; }
.dtc-hanh-tho  { --hanh-color: #8a5a2b; --hanh-bg: #f7efe3; --hanh-border: #e3c9a3; }

.dtc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #eee0c5;
    color: #5c5346;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
}

.dtc-chip-sm {
    font-size: 11.5px;
    padding: 3px 10px;
}

[class*="dtc-hanh-"].dtc-chip {
    background: var(--hanh-bg);
    border-color: var(--hanh-border);
    color: var(--hanh-color);
}

/* ============================================================
   HERO — khối tổng quan điểm hài hòa
   ============================================================ */
.dtc-hero {
    background: linear-gradient(150deg, #fff8ec 0%, #fdf1de 60%, #fbe9d2 100%);
    border: 1px solid #2f9370;
    border-radius: 18px;
    padding: 26px 26px 24px;
    margin-bottom: 26px;
    position: relative;
    overflow: hidden;
}

.dtc-hero::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--hanh-color, #d99b3f) 0%, transparent 70%);
    opacity: 0.12;
    pointer-events: none;
}

.dtc-eyebrow {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hanh-color, #b5711c);
    margin-bottom: 10px;
}

.dtc-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.dtc-hero-main {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.dtc-score-badge {
    --score: 70;
    flex-shrink: 0;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: conic-gradient(var(--hanh-color, #d99b3f) calc(var(--score) * 1%), #f0e3c8 0);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(150, 100, 30, 0.18);
}

.dtc-score-badge-inner {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fffaf3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.dtc-score-num {
    font-size: 30px;
    font-weight: 800;
    color: #2d2a26;
}

.dtc-score-max {
    font-size: 12px;
    color: #9a9182;
    margin-top: 2px;
}

.dtc-hero-text {
    flex: 1;
    min-width: 220px;
}

.dtc-tier-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 999px;
    margin-bottom: 8px;
}

.dtc-tier-excellent { background: #e3f5df; color: #2f7a1f; }
.dtc-tier-great      { background: #eaf3e6; color: #3f7d3f; }
.dtc-tier-good        { background: #fff3de; color: #b5711c; }
.dtc-tier-ok            { background: #f0eee6; color: #6b6455; }
.dtc-tier-low          { background: #fdeee0; color: #b0560f; }

.dtc-hero-headline {
    font-size: 18px;
    margin: 0 0 8px;
    color: #2d2a26;
}

.dtc-hero-sub {
    font-size: 13.5px;
    color: #6b6455;
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   ĐIỂM SỐ CHI TIẾT — 4 thẻ thống kê
   ============================================================ */
.dtc-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.dtc-stat-card {
    background: #fff;
    border: 1px solid #2f9370;
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
}

.dtc-stat-label {
    font-size: 12.5px;
    color: #6b6455;
    margin-bottom: 8px;
    font-weight: 600;
}

.dtc-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: #2d2a26;
    margin-bottom: 8px;
}

/* ============================================================
   BÁNH XE NGŨ HÀNH
   ============================================================ */
.dtc-wuxing-wrap {
    background: #fff;
    border: 1px solid #2f9370;
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dtc-wuxing-svg {
    width: 100%;
    max-width: 320px;
    height: auto;
}

.dtc-wx-sinh {
    stroke: #8fbf7f;
    stroke-width: 2;
}

.dtc-wx-active-sinh {
    stroke: #3f7d3f;
    stroke-width: 3.5;
}

.dtc-wx-khac {
    stroke: #e0b3a4;
    stroke-width: 1.4;
    stroke-dasharray: 4 4;
}

.dtc-wx-active-khac {
    stroke: #c1401f;
    stroke-width: 2.2;
    stroke-dasharray: 4 4;
}

.dtc-wx-node circle {
    fill: var(--hanh-bg);
    stroke: var(--hanh-border);
    stroke-width: 2;
}

.dtc-wx-node text {
    fill: var(--hanh-color);
    font-size: 13px;
    font-weight: 700;
}

.dtc-wx-node-active circle {
    fill: var(--hanh-color);
    stroke: var(--hanh-color);
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.25));
}

.dtc-wx-node-active text {
    fill: #fff;
}

.dtc-wuxing-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 14px;
    font-size: 12.5px;
    color: #5c5346;
}

.dtc-wuxing-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dtc-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.dtc-legend-sinh { background: #3f7d3f; }
.dtc-legend-khac { background: #c1401f; }
.dtc-legend-baby { background: #d99b3f; }

/* ============================================================
   LUỒNG QUAN HỆ BỐ – BÉ – MẸ
   ============================================================ */
.dtc-relation-flow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
    justify-content: center;
}

.dtc-flow-node {
    background: var(--hanh-bg);
    border: 1px solid var(--hanh-border);
    border-radius: 12px;
    padding: 12px 16px;
    text-align: center;
    min-width: 110px;
}

.dtc-flow-node-baby {
    box-shadow: 0 4px 14px rgba(150, 100, 30, 0.15);
    border-width: 2px;
}

.dtc-flow-role {
    font-size: 11.5px;
    color: #6b6455;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.dtc-flow-name {
    font-weight: 700;
    color: #2d2a26;
    font-size: 14px;
}

.dtc-flow-hanh {
    font-size: 12px;
    color: var(--hanh-color);
    margin-top: 2px;
}

.dtc-flow-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #c8892f;
    font-size: 18px;
}

.dtc-flow-arrow::before {
    content: "→";
}

/* ============================================================
   SO SÁNH NHANH — TOP 3
   ============================================================ */
.dtc-top-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.dtc-top-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--hanh-border, #eee0c5);
    border-radius: 14px;
    padding: 18px;
}

.dtc-top-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    background: linear-gradient(135deg, #d99b3f, #b5711c);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.dtc-top-rank {
    font-size: 11.5px;
    color: #9a9182;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.dtc-top-name {
    font-size: 19px;
    font-weight: 800;
    color: var(--hanh-color);
    margin-bottom: 8px;
}

.dtc-top-score-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 10px;
}

.dtc-top-score {
    font-size: 24px;
    font-weight: 800;
    color: #2d2a26;
}

.dtc-top-score-label {
    font-size: 12px;
    color: #9a9182;
}

.dtc-top-meaning {
    font-size: 13px;
    color: #5c5346;
    line-height: 1.6;
    margin: 10px 0 0;
}

/* ============================================================
   THẺ TÊN GỢI Ý (nâng cấp)
   ============================================================ */
.dtc-name-card {
    background: #fff;
    border: 1px solid #2f9370;
    border-radius: 12px;
    padding: 14px;
}

.dtc-name-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.dtc-name-rank {
    font-size: 11.5px;
    color: #9a9182;
    font-weight: 700;
}

.dtc-name-score {
    font-size: 15px;
    font-weight: 800;
    color: var(--hanh-color, #b5711c);
    text-align: right;
    line-height: 1.1;
}

.dtc-name-score small {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: #9a9182;
}

.dtc-name-card .dtc-name-text {
    font-size: 16px;
    margin: 6px 0 6px;
}

.dtc-name-card .dtc-name-meaning {
    margin-top: 6px;
    margin-bottom: 8px;
}

.dtc-name-details {
    margin-top: 8px;
    border-top: 1px dashed #eadfc9;
    padding-top: 8px;
}

.dtc-name-details summary {
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: #26564a;
    list-style: none;
}

.dtc-name-details summary::-webkit-details-marker {
    display: none;
}

.dtc-name-details ul {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 12.5px;
    color: #4a4437;
    line-height: 1.7;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
    .dtc-card {
        padding: 20px;
    }

    .dtc-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dtc-hero-main {
        flex-direction: column;
        text-align: center;
    }

    .dtc-relation-flow {
        flex-direction: column;
    }

    .dtc-flow-arrow {
        transform: rotate(90deg);
    }
}