/* =====================================================================================
   XEM TUỔI LÀM VIỆC LỚN — style dùng chung cho ba trang landing + trang phiên trả phí:
   /xem-tuoi-lam-nha · /xem-tuoi-xong-dat · /xem-tuoi-khai-truong · /xem-tuoi/m/:code

   Bám style.md: peach là màu chính, pastel chỉ điểm xuyết cho badge và trạng thái,
   card bo 24px, nút pill, heading Nunito, body Comfortaa, không dùng emoji làm icon.
   ===================================================================================== */

.xt-wrap {
    max-width: 960px;
    margin: 0 auto 56px;
    padding: 0 20px;
    font-family: 'Comfortaa', system-ui, sans-serif;
    color: var(--text-main, #5c4b47);
}

/* ---------- Đầu trang ---------- */
.xt-head { text-align: center; padding: 26px 0 22px; }
.xt-kicker {
    font-family: 'Nunito', system-ui, sans-serif; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase; font-size: .72rem;
    color: var(--accent, #d67d63); margin: 0 0 8px;
}
.xt-head h1 {
    font-family: 'Nunito', system-ui, sans-serif; font-weight: 800;
    font-size: 1.7rem; line-height: 1.25; color: var(--accent-soft, #e59882); margin: 0 0 10px;
}
.xt-head .xt-lead {
    font-size: .95rem; line-height: 1.65; color: var(--text-muted, #8a7772);
    margin: 0 auto; max-width: 600px;
}

/* ---------- Card & panel ---------- */
.xt-card {
    background: #fff; border: 1px solid var(--border-soft, #ffe6e0);
    border-radius: var(--radius-lg, 24px);
    box-shadow: var(--shadow-card, 0 8px 24px -10px rgba(250, 208, 196, .6));
    padding: 22px 24px; margin-bottom: 18px;
}
.xt-h2 {
    font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 1.15rem;
    color: var(--accent, #d67d63); margin: 0 0 14px;
    padding-bottom: 10px; border-bottom: 1px dashed var(--border-soft, #ffe6e0);
}
.xt-sub { font-size: .88rem; line-height: 1.65; color: var(--text-muted, #8a7772); margin: 0 0 14px; }
.xt-card p { font-size: .9rem; line-height: 1.7; margin: 0 0 11px; }
.xt-card p:last-child { margin-bottom: 0; }

/* ---------- Form nhập ---------- */
.xt-label {
    display: block; font-family: 'Nunito', system-ui, sans-serif; font-weight: 800;
    font-size: .9rem; color: var(--accent, #d67d63); margin: 0 0 12px;
}
.xt-flabel {
    display: block; font-family: 'Nunito', system-ui, sans-serif; font-weight: 700;
    font-size: .82rem; color: var(--accent, #d67d63); margin-bottom: 6px;
}
.xt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.xt-field { margin-bottom: 13px; }
.xt-input {
    width: 100%; background: var(--input-bg, #fffaf9);
    border: 1.5px solid var(--border-soft, #ffe6e0); border-radius: var(--radius-sm, 16px);
    padding: 11px 14px; font-family: 'Comfortaa', system-ui, sans-serif;
    font-size: .92rem; color: var(--text-main, #5c4b47); outline: none; transition: border-color .2s;
}
.xt-input:focus { border-color: var(--primary-peach-hover, #fbc1b0); }
.xt-input::placeholder { color: #c4aba5; }
.xt-year { font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; text-align: center; }
.xt-radios { display: flex; gap: 8px; }
.xt-radios label { flex: 1; position: relative; }
.xt-radios input { position: absolute; opacity: 0; pointer-events: none; }
.xt-radios span {
    display: block; text-align: center; background: #fff;
    border: 1.5px solid var(--border-soft, #ffe6e0); border-radius: var(--radius-pill, 999px);
    padding: 9px 6px; font-family: 'Nunito', system-ui, sans-serif; font-weight: 700;
    font-size: .85rem; color: var(--text-muted, #8a7772); cursor: pointer; transition: .2s;
}
.xt-radios input:checked + span {
    background: linear-gradient(135deg, #fad0c4 0%, #fbc1b0 100%);
    border-color: var(--primary-peach-hover, #fbc1b0); color: var(--text-main, #5c4b47);
}
.xt-optional { margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--border-soft, #ffe6e0); }
.xt-dm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xt-hint { display: block; font-size: .76rem; line-height: 1.5; color: var(--text-muted, #8a7772); margin-top: 7px; }

.xt-submit {
    width: 100%; background: linear-gradient(135deg, #fad0c4 0%, #fbc1b0 100%);
    color: var(--text-main, #5c4b47); font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800; font-size: 1rem; padding: 15px 26px; border: none;
    border-radius: var(--radius-pill, 999px); cursor: pointer;
    box-shadow: var(--shadow-btn, 0 6px 18px rgba(250, 208, 196, .5));
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    transition: transform .25s, box-shadow .25s; margin-top: 4px;
}
.xt-submit:hover:not(:disabled) { transform: translateY(-3px) scale(1.01); box-shadow: var(--shadow-pop, 0 10px 22px rgba(250, 208, 196, .7)); }
.xt-submit:disabled { opacity: .55; cursor: not-allowed; }
.xt-err {
    margin-top: 12px; background: var(--error-bg, #ffe6e0); color: var(--error-fg, #b03b3b);
    border-radius: var(--radius-sm, 16px); padding: 11px 15px; font-size: .86rem; line-height: 1.5;
}

/* ---------- Thẻ gia chủ ---------- */
.xt-who { background: var(--peach-light, #fff5f2); border-radius: var(--radius-md, 18px); padding: 16px 18px; }
.xt-who h3 {
    font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 1.05rem;
    color: var(--text-main, #5c4b47); margin: 0 0 4px;
}
.xt-who .xt-yr { font-size: .82rem; color: var(--text-muted, #8a7772); margin: 0 0 12px; }
.xt-rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; }
.xt-row {
    display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
    font-size: .85rem; padding-bottom: 6px; border-bottom: 1px dashed var(--border-soft, #ffe6e0);
}
.xt-row span { color: var(--text-muted, #8a7772); }
.xt-row b { font-family: 'Nunito', system-ui, sans-serif; font-weight: 700; color: var(--text-main, #5c4b47); text-align: right; }
.xt-trach {
    display: inline-block; border-radius: var(--radius-pill, 999px); padding: 1px 10px;
    font-size: .78rem; font-weight: 700;
}
.xt-trach.dong { background: var(--pastel-mint, #b8e0c8); color: #1e6b42; }
.xt-trach.tay { background: var(--pastel-lavender, #e3d4f0); color: #5b3f75; }
.xt-approx {
    margin-top: 14px; background: var(--warning-bg, #fff5e6); color: var(--warning-fg, #9a6b1e);
    border-radius: var(--radius-sm, 16px); padding: 11px 15px; font-size: .83rem; line-height: 1.6;
}
.xt-approx a { color: #9a6b1e; font-weight: 700; }

/* ---------- Tóm tắt kết quả ---------- */
.xt-verdict {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    border-radius: var(--radius-md, 18px); padding: 15px 18px; margin-bottom: 16px;
    font-size: .92rem; line-height: 1.6;
}
.xt-verdict b { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; }
.xt-verdict.good { background: var(--success-bg, #e8f6ee); color: var(--success-fg, #1e6b42); }
.xt-verdict.neutral { background: var(--warning-bg, #fff5e6); color: var(--warning-fg, #9a6b1e); }
.xt-verdict.bad { background: var(--error-bg, #ffe6e0); color: var(--error-fg, #b03b3b); }

/* ---------- Bảng năm (làm nhà, khai trương) ---------- */
.xt-years { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.xt-yr-row {
    border: 1px solid var(--border-soft, #ffe6e0); border-left-width: 5px;
    border-radius: var(--radius-md, 18px); padding: 13px 16px; background: #fff;
}
.xt-yr-row.good { border-left-color: #4caf89; background: #f6fcf9; }
.xt-yr-row.neutral { border-left-color: #e8c169; background: #fffbf4; }
.xt-yr-row.bad { border-left-color: #e9826a; background: #fffaf9; }
.xt-yr-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 6px; }
.xt-yr-top b {
    font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 1.15rem;
    color: var(--text-main, #5c4b47);
}
.xt-yr-cc { font-size: .84rem; color: var(--text-muted, #8a7772); }
.xt-tag {
    margin-left: auto; font-family: 'Nunito', system-ui, sans-serif; font-weight: 800;
    font-size: .76rem; border-radius: var(--radius-pill, 999px); padding: 3px 12px; white-space: nowrap;
}
.xt-tag.good { background: var(--success-bg, #e8f6ee); color: var(--success-fg, #1e6b42); }
.xt-tag.neutral { background: var(--warning-bg, #fff5e6); color: var(--warning-fg, #9a6b1e); }
.xt-tag.bad { background: var(--error-bg, #ffe6e0); color: var(--error-fg, #b03b3b); }
.xt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.xt-chip {
    font-size: .78rem; border-radius: var(--radius-pill, 999px); padding: 3px 11px;
    background: var(--peach-light, #fff5f2); color: var(--text-muted, #8a7772);
    border: 1px solid var(--border-soft, #ffe6e0);
}
.xt-chip.warn { background: var(--error-bg, #ffe6e0); color: var(--error-fg, #b03b3b); border-color: #f3c8be; }
.xt-chip.mid { background: var(--warning-bg, #fff5e6); color: var(--warning-fg, #9a6b1e); border-color: #f0dcb4; }
.xt-chip.ok { background: var(--success-bg, #e8f6ee); color: var(--success-fg, #1e6b42); border-color: #bfe3d0; }
.xt-yr-note { font-size: .84rem; line-height: 1.6; color: var(--text-muted, #8a7772); margin: 8px 0 0; }

/* ---------- Bảng tuổi (xông đất, mở hàng) ---------- */
.xt-tuoi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xt-tuoi li {
    border: 1px solid var(--border-soft, #ffe6e0); border-radius: var(--radius-md, 18px);
    padding: 13px 15px; background: #fff;
}
.xt-tuoi li.bad { background: #fffaf9; border-color: #f3d3cb; }
.xt-tt { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.xt-tt b { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 1.08rem; }
.xt-tt .cc { font-size: .83rem; color: var(--text-muted, #8a7772); }
.xt-score {
    margin-left: auto; font-family: 'Nunito', system-ui, sans-serif; font-weight: 800;
    font-size: .8rem; border-radius: var(--radius-pill, 999px); padding: 3px 11px;
    background: linear-gradient(135deg, #fad0c4 0%, #fbc1b0 100%); color: var(--text-main, #5c4b47);
}
.xt-tuoi li.bad .xt-score { background: var(--error-bg, #ffe6e0); color: var(--error-fg, #b03b3b); }
.xt-bar { height: 7px; border-radius: 999px; background: var(--border-soft, #ffe6e0); overflow: hidden; margin-bottom: 9px; }
.xt-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #fad0c4, #e59882); transition: width .8s ease; }
.xt-meta { font-size: .8rem; line-height: 1.6; color: var(--text-muted, #8a7772); margin: 0; }
.xt-meta b { color: var(--text-main, #5c4b47); font-weight: 700; }

/* ---------- Bảng ngày đẹp ---------- */
.xt-days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.xt-day {
    border: 1px solid var(--border-soft, #ffe6e0); border-radius: var(--radius-md, 18px);
    padding: 13px 16px; background: #fff;
}
.xt-day-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.xt-day-top b { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 1.08rem; }
.xt-day-top .am { font-size: .82rem; color: var(--text-muted, #8a7772); }
.xt-gio { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.xt-gio span {
    font-size: .78rem; border-radius: var(--radius-pill, 999px); padding: 3px 11px;
    background: var(--pastel-sky, #cfe7f5); color: #2c6b96;
}

/* ---------- Bảng hướng ---------- */
.xt-huong { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.xt-huong li {
    border: 1px solid var(--border-soft, #ffe6e0); border-radius: var(--radius-md, 18px);
    padding: 12px 15px; background: #fff;
}
.xt-huong li.bad { background: #fffaf9; }
.xt-ht { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.xt-ht b { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 1rem; }
.xt-ht .q { font-size: .78rem; color: var(--text-muted, #8a7772); }
.xt-dn {
    margin-left: auto; font-family: 'Nunito', system-ui, sans-serif; font-weight: 700;
    font-size: .76rem; border-radius: var(--radius-pill, 999px); padding: 2px 10px;
}
.xt-dn.good { background: var(--success-bg, #e8f6ee); color: var(--success-fg, #1e6b42); }
.xt-dn.neutral { background: var(--pastel-yellow, #ffe9b3); color: var(--warning-fg, #9a6b1e); }
.xt-dn.bad { background: var(--error-bg, #ffe6e0); color: var(--error-fg, #b03b3b); }

/* ---------- Khối trả phí ---------- */
.xt-paywall {
    background: linear-gradient(135deg, #fffcfb 0%, #fff5f2 100%);
    border: 1px solid var(--border-soft, #ffe6e0); border-radius: var(--radius-lg, 24px);
    padding: 24px 22px; text-align: center;
}
.xt-lock { width: 46px; height: 46px; margin: 0 auto 10px; display: block; }
.xt-paywall h3 {
    font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 1.15rem;
    color: var(--accent, #d67d63); margin: 0 0 8px;
}
.xt-paywall .desc {
    font-size: .9rem; line-height: 1.7; color: var(--text-muted, #8a7772);
    margin: 0 auto 16px; max-width: 520px;
}
.xt-perks { list-style: none; margin: 0 auto 18px; padding: 0; max-width: 460px; text-align: left; }
.xt-perks li { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; line-height: 1.6; margin-bottom: 9px; }
.xt-perks .xt-ic { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; fill: var(--accent, #d67d63); }
.xt-price {
    display: inline-flex; align-items: baseline; gap: 8px; margin-bottom: 14px;
    background: #fff; border-radius: var(--radius-pill, 999px); padding: 8px 20px;
    border: 1px solid var(--border-soft, #ffe6e0);
}
.xt-base { text-decoration: line-through; color: #c4aba5; font-size: .85rem; }
.xt-final { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--accent, #d67d63); }
.xt-email { max-width: 380px; margin: 0 auto 12px; text-align: left; }
.xt-email label { display: block; font-family: 'Nunito', system-ui, sans-serif; font-weight: 700; font-size: .82rem; color: var(--accent, #d67d63); margin-bottom: 6px; }
.xt-email em { font-style: normal; color: var(--text-muted, #8a7772); font-weight: 500; }
.xt-email input {
    width: 100%; background: #fff; border: 1.5px solid var(--border-soft, #ffe6e0);
    border-radius: var(--radius-sm, 16px); padding: 11px 14px;
    font-family: 'Comfortaa', system-ui, sans-serif; font-size: .9rem; color: var(--text-main, #5c4b47);
}
.xt-paybtn {
    background: linear-gradient(135deg, #fad0c4 0%, #fbc1b0 100%); color: var(--text-main, #5c4b47);
    font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: .98rem;
    padding: 14px 30px; border: none; border-radius: var(--radius-pill, 999px); cursor: pointer;
    box-shadow: var(--shadow-btn, 0 6px 18px rgba(250, 208, 196, .5));
    display: inline-flex; align-items: center; gap: 9px; transition: transform .25s, box-shadow .25s;
}
.xt-paybtn:hover:not(:disabled) { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-pop, 0 10px 22px rgba(250, 208, 196, .7)); }
.xt-paybtn:disabled { opacity: .55; cursor: not-allowed; }
.xt-paynote { font-size: .8rem; line-height: 1.6; color: var(--text-muted, #8a7772); margin: 11px 0 0; }
.xt-payerr {
    display: none; margin: 12px auto 0; max-width: 440px;
    background: var(--error-bg, #ffe6e0); color: var(--error-fg, #b03b3b);
    border-radius: var(--radius-sm, 16px); padding: 11px 15px; font-size: .85rem; line-height: 1.5;
}

/* Khối mồi: nội dung khoá hiện dạng mờ để thấy có thật mà không lộ chữ */
.xt-teaser { font-size: .89rem; line-height: 1.7; color: var(--text-main, #5c4b47); margin: 0 0 12px; }
.xt-teaser b { color: var(--accent, #d67d63); font-weight: 700; }
.xt-blur { position: relative; }
.xt-blur > * { filter: blur(4px); opacity: .5; pointer-events: none; user-select: none; }
.xt-blur::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 92%);
}

/* ---------- Loading ---------- */
.xt-loading { text-align: center; padding: 32px 18px; }
.xt-spinner {
    width: 42px; height: 42px; margin: 0 auto 16px; border-radius: 50%;
    border: 4px solid var(--border-soft, #ffe6e0); border-top-color: var(--accent-soft, #e59882);
    animation: xt-spin .9s linear infinite;
}
@keyframes xt-spin { to { transform: rotate(360deg); } }
.xt-loading .lt { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; color: var(--accent, #d67d63); margin: 0 0 6px; }
.xt-loading .ls { font-size: .85rem; color: var(--text-muted, #8a7772); margin: 0; }

/* ---------- FAQ + link chéo ---------- */
.xt-faq {
    background: var(--input-bg, #fffaf9); border: 1px solid var(--border-soft, #ffe6e0);
    border-radius: var(--radius-md, 18px); padding: 13px 16px; margin-bottom: 9px;
}
.xt-faq[open] { background: var(--peach-light, #fff5f2); }
.xt-faq summary {
    font-family: 'Nunito', system-ui, sans-serif; font-weight: 700; font-size: .9rem;
    color: var(--text-main, #5c4b47); cursor: pointer; list-style: none;
}
.xt-faq summary::-webkit-details-marker { display: none; }
.xt-faq summary::after { content: '+'; float: right; color: var(--accent, #d67d63); font-weight: 800; }
.xt-faq[open] summary::after { content: '–'; }
.xt-faq p { font-size: .86rem; line-height: 1.7; color: var(--text-muted, #8a7772); margin: 10px 0 0; }
.xt-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.xt-links a {
    display: inline-block; background: var(--peach-light, #fff5f2);
    border: 1px solid var(--border-soft, #ffe6e0); border-radius: var(--radius-pill, 999px);
    padding: 8px 16px; font-family: 'Nunito', system-ui, sans-serif; font-weight: 700;
    font-size: .85rem; color: var(--accent, #d67d63); text-decoration: none; transition: .2s;
}
.xt-links a:hover { background: var(--primary-peach, #fad0c4); color: var(--text-main, #5c4b47); }
.xt-again { text-align: center; margin-top: 20px; }
.xt-again a { font-family: 'Nunito', system-ui, sans-serif; font-weight: 700; font-size: .9rem; color: var(--accent, #d67d63); text-decoration: none; }
.xt-again a:hover { text-decoration: underline; }

@media (max-width: 1000px) {
    .xt-wrap { padding: 0 14px; }
    .xt-head h1 { font-size: 1.36rem; }
    .xt-card { padding: 18px 16px; border-radius: 20px; }
    .xt-grid, .xt-rows, .xt-tuoi, .xt-huong { grid-template-columns: 1fr; }
    .xt-rows { gap: 8px; }
    .xt-paywall { padding: 20px 16px; }
    .xt-tag { margin-left: 0; }
    .xt-yr-top b { font-size: 1.05rem; }
}