/* ==========================================================================
   PHẦN MỀM TƯƠNG HỢP GIA ĐÌNH: VỢ CHỒNG & CON CÁI • PHONG THUỶ THỨC TÂM
   Quy tắc bắt buộc: ZERO EMOJI, Chữ siêu to rõ ràng chuẩn điện thoại & người cao tuổi
   ========================================================================== */

:root {
  --app-red: #7f1d1d;
  --app-red-hover: #991b1b;
  --app-gold: #b8892d;
  --app-gold-soft: #fcf6e8;
  --app-paper: #faf6ee;
  --app-card: #ffffff;
  --app-ink: #201a15;
  --app-ink-sub: #4a3e35;
  --app-muted: #6b5d4f;
  --app-line: #e3d8c4;
  --app-line-strong: #cfc2a8;
  --app-shadow: 0 4px 16px rgba(45, 30, 15, 0.08);
  --app-radius: 14px;
}

/* Base resets & typography */
.family-app-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 0 50px;
  color: var(--app-ink);
  font-size: 17px;
  line-height: 1.65;
}

/* Header giới thiệu phần mềm */
.app-hero-header {
  text-align: center;
  padding: 30px 20px 35px;
  background: linear-gradient(180deg, #fff9ee 0%, var(--app-paper) 100%);
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  margin-bottom: 35px;
  box-shadow: var(--app-shadow);
}

.app-badge-top {
  display: inline-block;
  padding: 6px 16px;
  background: var(--app-red);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 30px;
  margin-bottom: 14px;
}

.app-hero-title {
  font-family: "Noto Serif", Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--app-red);
  margin: 0 0 14px;
  line-height: 1.3;
}

.app-hero-desc {
  max-width: 840px;
  margin: 0 auto;
  font-size: 18px;
  color: var(--app-ink-sub);
  line-height: 1.6;
}

.app-hero-note {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 18px;
  background: #fdf2d9;
  border: 1px solid #ebd09c;
  border-radius: 8px;
  font-size: 15px;
  color: #875306;
  font-weight: 600;
}

/* Grid nhập liệu gia đình */
.family-input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-bottom: 25px;
}

@media (max-width: 768px) {
  .family-input-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .app-hero-title {
    font-size: 26px;
  }
  .app-hero-desc {
    font-size: 16px;
  }
}

/* Thẻ card từng thành viên */
.member-card {
  background: var(--app-card);
  border: 2px solid var(--app-line);
  border-radius: var(--app-radius);
  padding: 24px;
  box-shadow: var(--app-shadow);
  position: relative;
  transition: border-color 0.2s ease;
}

.member-card:hover {
  border-color: var(--app-gold);
}

.member-card.card-husband {
  border-top: 5px solid #1e4e8c;
}

.member-card.card-wife {
  border-top: 5px solid #b83280;
}

.member-card.card-child {
  border-top: 5px solid var(--app-gold);
}

.member-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--app-line);
}

.member-card-title {
  font-family: "Noto Serif", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.member-tag {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
}

.tag-husband { background: #e0edfd; color: #154b8c; }
.tag-wife { background: #fce8f3; color: #97266d; }
.tag-child { background: #fef3c7; color: #92400e; }

.btn-remove-child {
  background: transparent;
  border: 1px solid #f87171;
  color: #dc2626;
  font-size: 14px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-remove-child:hover {
  background: #fee2e2;
}

/* Nhóm input trong form */
.form-row {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--app-ink);
}

.form-label .req {
  color: #dc2626;
}

.form-input, .form-select {
  width: 100%;
  height: 48px;
  padding: 10px 14px;
  font-size: 16px;
  font-family: inherit;
  color: var(--app-ink);
  background-color: #ffffff;
  border: 1.5px solid var(--app-line-strong);
  border-radius: 8px;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: menulist;
  position: relative;
  z-index: 2;
  touch-action: manipulation;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input {
  cursor: text;
}

.form-input:focus, .form-select:focus {
  border-color: var(--app-gold);
  box-shadow: 0 0 0 3px rgba(184, 137, 45, 0.15);
}

/* Toggle Lịch Dương / Âm */
.cal-toggle-wrap {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 14px;
}

.cal-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}

.cal-radio-label input {
  width: 18px;
  height: 18px;
  accent-color: var(--app-red);
}

.leap-check-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #854d0e;
  margin-left: 10px;
}

/* 3 cột Ngày - Tháng - Năm */
.date-fields-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 10px;
  position: relative;
  z-index: 2;
}

@media (max-width: 480px) {
  .date-fields-3 {
    gap: 6px;
  }
  .date-fields-3 .form-select {
    padding: 10px 4px 10px 8px;
    font-size: 14.5px;
    height: 48px;
  }
}

/* Khối Không nhớ giờ sinh */
.no-hour-toggle-wrap {
  margin-top: 14px;
  padding: 10px 14px;
  background: #fdfaf3;
  border: 1px dashed var(--app-line-strong);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.no-hour-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.no-hour-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--app-red);
}

.no-hour-badge {
  font-size: 12px;
  font-weight: 700;
  color: #92400e;
  background: #fef3c7;
  padding: 3px 8px;
  border-radius: 4px;
}

.hour-select-wrap.disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Khu vực Con Cái */
.children-section {
  margin-bottom: 30px;
}

.children-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.children-title {
  font-family: "Noto Serif", Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--app-red);
}

.btn-add-child {
  background: #ffffff;
  color: var(--app-red);
  border: 2px solid var(--app-red);
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-add-child:hover {
  background: var(--app-red);
  color: #ffffff;
}

.children-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 20px;
}

.no-child-card {
  padding: 24px;
  background: #fcf9f2;
  border: 1px dashed var(--app-line-strong);
  border-radius: var(--app-radius);
  text-align: center;
  color: var(--app-muted);
  font-size: 16px;
}

/* Nút Submit chính */
.action-submit-wrap {
  text-align: center;
  margin: 35px 0 50px;
}

.btn-evaluate-family {
  background: linear-gradient(135deg, var(--app-red) 0%, #601414 100%);
  color: #ffffff;
  border: 2px solid #eab308;
  padding: 18px 46px;
  font-size: 22px;
  font-weight: 800;
  font-family: "Noto Serif", Georgia, serif;
  letter-spacing: 0.03em;
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(127, 29, 29, 0.35);
  transition: all 0.2s ease;
  min-width: 320px;
}

.btn-evaluate-family:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(127, 29, 29, 0.45);
  background: linear-gradient(135deg, var(--app-red-hover) 0%, #7f1d1d 100%);
}

/* ==========================================================================
   KHU VỰC KẾT QUẢ LUẬN GIẢI (RESULT SECTIONS)
   ========================================================================== */

.result-container {
  display: none; /* Hiển thị bằng JS */
  margin-top: 40px;
}

.result-container.active {
  display: block;
}

/* Thanh điều hướng kết quả Tabs */
.result-nav-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  border-bottom: 2px solid var(--app-line);
  margin-bottom: 30px;
  padding-bottom: 2px;
}

.res-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--app-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.res-tab-btn:hover {
  color: var(--app-red);
}

.res-tab-btn.active {
  color: var(--app-red);
  border-bottom-color: var(--app-red);
  background: #fdf6e9;
  border-radius: 8px 8px 0 0;
}

/* Bảng Điểm Tổng Quan Dashboard */
.harmony-dashboard {
  background: #ffffff;
  border: 2px solid var(--app-line);
  border-radius: var(--app-radius);
  padding: 30px;
  margin-bottom: 35px;
  box-shadow: var(--app-shadow);
}

.dash-scores-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-bottom: 25px;
}

@media (max-width: 768px) {
  .dash-scores-grid {
    grid-template-columns: 1fr;
  }
}

.dash-score-card {
  background: linear-gradient(180deg, #fffdf8 0%, #faf4e6 100%);
  border: 1.5px solid #ebd9b5;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

.dash-score-title {
  font-family: "Noto Serif", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--app-ink);
  margin: 0 0 10px;
}

.dash-score-number {
  font-size: 52px;
  font-weight: 900;
  color: var(--app-red);
  line-height: 1.1;
  margin-bottom: 8px;
}

.dash-score-number span {
  font-size: 22px;
  color: var(--app-muted);
  font-weight: 600;
}

.dash-badge {
  display: inline-block;
  padding: 5px 16px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.badge-great { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.badge-good { background: #e0f2fe; color: #0369a1; border: 1px solid #7dd3fc; }
.badge-normal { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }
.badge-warning { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }

.dash-score-desc {
  font-size: 16px;
  color: var(--app-ink-sub);
  line-height: 1.55;
  margin: 0;
}

/* Bảng Hồ Sơ Bát Tự Tam Trụ / Tứ Trụ Của Cặp Đôi */
.bazi-pillars-table-wrap {
  margin: 25px 0;
  overflow-x: auto;
}

.bazi-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 16px;
  background: #ffffff;
  border: 1.5px solid var(--app-line);
}

.bazi-table th, .bazi-table td {
  padding: 12px 14px;
  border: 1px solid var(--app-line);
}

.bazi-table th {
  background: #fdf5e6;
  font-family: "Noto Serif", Georgia, serif;
  color: var(--app-ink);
  font-weight: 700;
}

.bazi-table td.pillar-can-chi {
  font-size: 18px;
  font-weight: 800;
  color: var(--app-red);
}

.bazi-table td.pillar-nap-am {
  font-size: 15px;
  color: var(--app-muted);
}

/* Chi Tiết Luận Giải Card */
.detail-pillar-block {
  background: #ffffff;
  border: 1.5px solid var(--app-line);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.detail-pillar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.detail-pillar-name {
  font-family: "Noto Serif", Georgia, serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--app-ink);
  margin: 0;
}

.detail-pillar-score {
  font-size: 16px;
  font-weight: 700;
  color: var(--app-red);
  background: #fdf2f2;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid #fecaca;
}

.detail-pillar-body {
  font-size: 17px;
  color: var(--app-ink-sub);
  line-height: 1.65;
}

/* Thẻ Con Cái Tương Hợp */
.child-result-card {
  background: #ffffff;
  border: 2px solid #ebd9b5;
  border-radius: var(--app-radius);
  padding: 26px;
  margin-bottom: 25px;
  box-shadow: var(--app-shadow);
}

.child-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--app-line);
  padding-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.child-result-name {
  font-family: "Noto Serif", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--app-red);
}

.child-scores-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  .child-scores-split {
    grid-template-columns: 1fr;
  }
}

.child-score-box {
  background: #fcf9f2;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  padding: 18px;
}

.child-score-box-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--app-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.child-box-num {
  font-size: 26px;
  font-weight: 900;
  color: var(--app-red);
}

.child-notes-list {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 16px;
  color: var(--app-ink-sub);
}

.child-notes-list li {
  margin-bottom: 6px;
}

.child-bridge-alert {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 17px;
  color: #166534;
  font-weight: 600;
  margin-bottom: 16px;
}

.child-edu-card {
  background: #fefce8;
  border: 1px solid #fde047;
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 16px;
  color: #854d0e;
}

.child-conclude-note {
  margin-top: 16px;
  padding: 14px 18px;
  background: #fbf7ee;
  border: 1px dashed var(--app-gold);
  border-left: 4px solid var(--app-gold);
  border-radius: 8px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--app-ink-sub);
}

.child-conclude-note strong {
  color: var(--app-red);
}

/* Khối Hóa Giải & Lời Khuyên Gia Đạo */
.remedy-card {
  background: #ffffff;
  border: 1.5px solid var(--app-line);
  border-left: 5px solid var(--app-gold);
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.remedy-card-title {
  font-family: "Noto Serif", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--app-ink);
  margin: 0 0 10px;
}

.remedy-card-cat {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #854d0e;
  background: #fef3c7;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.remedy-solution {
  font-size: 17px;
  color: var(--app-ink);
  line-height: 1.6;
  margin-bottom: 10px;
}

.remedy-practical {
  font-size: 15px;
  color: #4338ca;
  background: #eef2ff;
  border-left: 3px solid #6366f1;
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  margin: 0;
}

/* Nút In Ấn & Xuất Báo Cáo A4 */
.print-action-bar {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 35px 0 25px;
  flex-wrap: wrap;
}

.btn-print-dossier {
  background: #1e293b;
  color: #ffffff;
  border: none;
  padding: 14px 28px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s ease;
}

.btn-print-dossier:hover {
  background: #0f172a;
}

/* Dịch Vụ Luận Giải Chuyên Sâu Cùng Thầy Thức Tâm */
.service-cta-box {
  background: linear-gradient(180deg, #fff9ee 0%, #faf3e0 100%);
  border: 2px solid var(--app-gold);
  border-radius: var(--app-radius);
  padding: 30px;
  text-align: center;
  margin-top: 40px;
}

.service-cta-title {
  font-family: "Noto Serif", Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--app-red);
  margin: 0 0 12px;
}

.service-cta-lead {
  font-size: 17px;
  color: var(--app-ink-sub);
  max-width: 720px;
  margin: 0 auto 24px;
  line-height: 1.6;
}

.service-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-cta-zalo {
  background: #0068ff;
  color: #ffffff;
  font-weight: 700;
  font-size: 17px;
  padding: 14px 28px;
  border-radius: 30px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 104, 255, 0.3);
}

.btn-cta-call {
  background: var(--app-red);
  color: #ffffff;
  font-weight: 700;
  font-size: 17px;
  padding: 14px 28px;
  border-radius: 30px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(127, 29, 29, 0.3);
}

/* ==========================================================================
   CARD LỜI NHẮN NHỦ GIA ĐẠO • TU THÂN DƯỠNG TÍNH & THAM KHẢO
   ========================================================================== */

.philosophical-note-card {
  background: linear-gradient(180deg, #fffcf6 0%, #fbf4e4 100%);
  border: 1.5px solid #ebd9b5;
  border-left: 6px solid var(--app-red);
  border-radius: 12px;
  padding: 22px 26px;
  margin: 25px 0 20px;
  box-shadow: 0 4px 14px rgba(45, 30, 15, 0.05);
}

.philosophical-note-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.philosophical-badge {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--app-red);
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 4px;
}

.philosophical-note-title {
  font-family: "Noto Serif", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--app-red);
  margin: 0;
}

.philosophical-note-body {
  font-size: 16.5px;
  color: var(--app-ink);
  line-height: 1.7;
  margin: 0;
}

.philosophical-note-body p {
  margin: 0 0 10px;
}

.philosophical-note-body p:last-child {
  margin-bottom: 0;
}

.philosophical-note-body strong {
  color: #7f1d1d;
}

/* Tối ưu cursor cho select */
.form-select {
  cursor: pointer;
}

/* ==========================================================================
   PRINT STYLESHEET CHUẨN A4 HOÀNG GIA
   ========================================================================== */

@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 13pt !important;
  }
  .site-header, .site-footer, .crumbs, .msg-fab, .zalo-fab,
  .app-hero-header, .family-input-grid, .children-section,
  .action-submit-wrap, .result-nav-tabs, .print-action-bar,
  .service-cta-box {
    display: none !important;
  }
  .result-container {
    display: block !important;
  }
  .family-app-wrap {
    max-width: 100% !important;
    padding: 0 !important;
  }
  .dash-scores-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
  }
  .member-card, .harmony-dashboard, .detail-pillar-block, .child-result-card, .remedy-card {
    border: 1px solid #999 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .print-header-only {
    display: block !important;
    text-align: center;
    border-bottom: 2px solid #7f1d1d;
    padding-bottom: 12px;
    margin-bottom: 20px;
  }
}

.print-header-only {
  display: none;
}