/* ==========================================
   FOUR PILLARS OVERVIEW (SCREEN VIEW)
   ========================================== */
#pillarsWrap .bazi-table td,
#pillarsWrap .bazi-table th {
  padding-top: 8px;    /* Increase or decrease to change height */
  padding-bottom: 8px; /* Increase or decrease to change height */
  height: 45px;        /* Optional: Force a specific minimum height */
}

/* If you want to target specific rows on the screen: */
#pillarsWrap .bazi-table tbody tr:nth-child(3) td {
  height: 60px; /* Example: Making the Branch row taller */
}
    :root{
  --bg:#f6efe4;
  --paper:#fffdf8;
  --card:#ffffff;
  --ink:#1f1811;
  --muted:#786650;
  --line:#e7d7bf;
  --line-strong:#d9c19c;
  --accent:#c88a2b;
  --accent-deep:#9c6514;
  --dark:#24180f;
  --shadow:0 10px 28px rgba(64,37,6,.08);
  --radius:20px;
}

*{box-sizing:border-box}

/* Table Layout Redesign Styles */
.bazi-table-wrap {
  overflow-x: auto;
  margin-top: 15px;
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(64,37,6,.04);
}
.bazi-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 600px;
  text-align: center;
}
.bazi-table th {
  background: #fbf7f1;
  padding: 6px 8px;
  color: #9c6c25;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--line-strong);
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.bazi-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  vertical-align: top; /* Changed from middle to top */
  text-align: center;  /* Ensures text stays perfectly centered */
}
.bazi-table th:last-child, .bazi-table td:last-child {
  border-right: none;
}
.bazi-table th:first-child, .bazi-table td:first-child {
  position: static; /* Removed sticky */
  /* background: inherit;  <-- DELETED THIS LINE */
  border-right: 1px solid var(--line);
  text-align: center;
}
.bazi-table th:last-child, .bazi-table td:last-child {
  border-right: none;
}

/* Specific Cell Styles */
.bazi-table .t-val {
  font-size: 18px;
  font-weight: 800;
}
.bazi-table .t-element {
  font-size: 11px;
  color: #866d49;
  margin-top: 4px;
}
.bazi-table .t-god {
  font-size: 12px;
  color: #5e4726;
  font-weight: 700;
  background: #fffaf4;
  padding: 2px 6px; /* Snug fit around the text */
  border-radius: 6px; /* Slightly smaller radius */
  border: 1px solid #f3e9d8;
  display: inline-block;
  min-width: 70px; /* Keeps the boxes looking neat, but not too wide */
  line-height: 1.3;
}

.bazi-table .t-stage {
  font-size: 10px; /* Slightly smaller to fit tight row */
  color: #5c4033;
  font-weight: 800;
  background: #f0e9dd;
  padding: 1px 4px; /* Decreased padding */
  border-radius: 4px;
  display: inline-block;
  margin: 0; /* Removed margin to squeeze height */
  min-width: 60px;
  line-height: 1.2;
}

.bazi-table .t-star {
  font-size: 10px; /* Scaled down slightly */
  font-weight: 800;
  padding: 1px 4px; /* Decreased padding */
  border-radius: 6px;
  display: inline-block;
  margin: 1px 0; /* Tighter margins */
}
.bazi-table .t-star.nobleman {
  color: #d11a2a;
  background: #fce8e9;
  border: 1px solid #f5c4c7;
}
.bazi-table .t-star.khong {
  color: #866d49;
  background: #f3e9d8;
  border: 1px solid #e7d7bf;
}

body{
  margin:0;
  font-family: "Noto Sans Khmer", "Segoe UI", Tahoma, Arial, sans-serif; /* Updated font family */
  color:var(--ink);
  background:linear-gradient(180deg,#fbf7f1 0%,#f6efe4 100%);
}

.shell{
  max-width:1180px;
  margin:0 auto;
  padding:20px 14px 40px;
}

.topbar{
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.topbar-inner{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
  padding:22px;
  align-items:start;
}

.brand-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  background:#fff3df;
  color:var(--accent-deep);
  border:1px solid #f0d4a7;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.hero-title{
  margin:14px 0 8px;
  font-size:clamp(28px,4vw,46px);
  line-height:1.05;
  font-weight:800;
  color:var(--dark);
}

.hero-sub{
  margin:0;
  max-width:640px;
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
}

.meta-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.meta-pill{
  min-width:130px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fffaf2;
}

.meta-pill .label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#8d744f;
}

.meta-pill .value{
  margin-top:6px;
  font-size:15px;
  font-weight:800;
  color:var(--dark);
}

.control-card{
  background:#fffaf4;
  border:1px solid var(--line);
  border-radius:24px;
  padding:18px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);
}

.control-head{
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9c6c25;
}

.control-title{
  margin:8px 0 16px;
  font-size:24px;
  font-weight:800;
  color:var(--dark);
}

.controls,.field-grid{
  display:grid;
  gap:12px;
}

.split-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.three-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.four-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.field label{
  display:block;
  margin:0 0 7px;
  font-size:13px;
  font-weight:700;
  color:#735b39;
}

.field input,
.field select{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border:1px solid #e5d2b6;
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  font-size:15px;
  outline:none;
}

.field input:focus,
.field select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(200,138,43,.12);
}

button{
  width:100%;
  min-height:50px;
  padding:0 14px;
  border:none;
  border-radius:14px;
  cursor:pointer;
  font-size:15px;
  font-weight:800;
  letter-spacing:.02em;
  color:#fff;
  background:linear-gradient(180deg,var(--accent) 0%,var(--accent-deep) 100%);
  box-shadow:0 8px 18px rgba(156,101,20,.18);
}

.btn-secondary{
  background:linear-gradient(180deg,#3a2819 0%, #24180f 100%);
  box-shadow:0 8px 18px rgba(36,24,15,.16);
}

.summary-band{
  margin-top:18px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fffdf9;
  box-shadow:var(--shadow);
}

.summary-band .title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#9a763d;
}

.summary-band .main{
  margin-top:6px;
  font-size:22px;
  font-weight:800;
}

.summary-band .sub{
  margin-top:4px;
  color:var(--muted);
  font-size:14px;
}

.main-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:18px;
}

.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
}

.panel-inner{
  padding:20px;
}

.section-label{
  color:#9c763a;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:800;
}

.section-title{
  margin:6px 0 0;
  font-size:28px;
  font-weight:800;
  color:var(--dark);
}

.section-copy{
  margin:8px 0 0;
  color:var(--muted);
  line-height:1.55;
}

.pillars-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:18px;
}

.pillar-card,
.luck-card{
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  box-shadow:none;
}

.pillar-top,
.luck-age{
  background:linear-gradient(180deg,#2f2013 0%, #20150d 100%);
  color:#fff3dd;
}

.pillar-top{
  padding:12px 14px;
}

.pillar-name{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#efc98a;
}

.pillar-main{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:8px;
  margin-top:8px;
}

.pillar-token{
  font-size:26px;
  font-weight:900;
  line-height:1;
}

.pillar-tag{
  font-size:11px;
  color:#d8bea0;
  text-align:right;
}

.pillar-body,
.luck-body{
  padding:12px;
  display:grid;
  gap:10px;
}

.dual-block,
.luck-dual{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.mini-card,
.luck-pill,
.luck-topline{
  background:#fffaf3;
  border:1px solid #eddcc2;
  border-radius:14px;
  padding:10px;
  min-height:0;
}

.mini-label,
.luck-pill .t,
.luck-topline-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9a7c4e;
}

.mini-value,
.luck-pill .v{
  margin-top:6px;
  font-size:16px;
  font-weight:800;
  line-height:1.2;
  color:var(--ink);
}
.chieng-sae-right{
  display:block;
  width:100%;
  text-align:right;
  color:#5c4033 !important; /* dark brown */
  font-weight:800;
  font-size:16px;
}
.khong-bong-left{
  display:block;
  width:100%;
  text-align:left !important;
  color:#d11a2a !important;
  font-weight:900 !important;
  font-size:16px;
}
.mini-code{
  margin-top:6px;
  font-size:12px;
  font-weight:800;
  color:#5e4726;
}

.mini-element,
.branch-element{
  margin-top:4px;
  font-size:12px;
  font-weight:700;
  color:#866d49;
}

.luck-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}

.luck-age{
  padding:10px 12px;
  text-align:center;
}

.luck-age-main{
  font-size:18px;
  font-weight:900;
  line-height:1;
}

.luck-age-sub{
  margin-top:4px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#d9c1a3;
}

.luck-age-sub:empty{
  display:none;
}

.luck-topline{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}

.luck-topline-value,
.luck-code,
.luck-sub{
  font-size:12px;
  line-height:1.3;
}

.luck-topline-value{
  font-weight:800;
  color:#5e4726;
}

.luck-code{
  display:block;
  width:100%;
  text-align:right;
  font-weight:800;
  color:#5e4726;
  margin-top:4px;
}

.luck-sub{
  margin-top:6px;
  color:#866d49;
  font-weight:700;
}

.luck-sub.tg{
  cursor:pointer;
  text-decoration:none;
}

.report-block{
  margin-top:18px;
}

.ui-hidden{
  display:none !important;
}

.side-stack{
  display:grid;
  gap:18px;
}

.insight-grid{
  display:grid;
  gap:12px;
  margin-top:14px;
}

.insight{
  background:#fffaf3;
  border:1px solid #eddcc2;
  border-radius:14px;
  padding:12px;
}

.insight .k{
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9a7c4e;
}

.insight .v{
  margin-top:6px;
  font-size:18px;
  font-weight:800;
  color:var(--dark);
}

.pdf-header{
  display:none;
}

.mini-value span,
.luck-pill .v span,
.luck-topline-value span,
.branch-element span {
  font-weight: 800 !important;
}

.month-formula-box{
  margin-top:10px;
  padding:8px 10px;
  border:1px solid #ead8bd;
  border-radius:12px;
  background:#fffaf3;
}

.month-formula-title{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9a7c4e;
  margin-bottom:6px;
}

.month-formula-line{
  font-size:12px;
  line-height:1.45;
  color:#5e4726;
  font-weight:700;
  margin-top:4px;
}

.month-formula-line:first-child{
  margin-top:0;
}

.detail-bazi-section-title{
  color:#8B0000;
  font-weight:800;
}

@media (max-width:1024px){
  .topbar-inner,
  .summary-band{
    grid-template-columns:1fr;
  }

  .pillars-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .luck-grid{
    grid-template-columns:repeat(4,1fr);
  }

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

@media screen and (orientation:landscape) and (max-width:1200px){
  .pillars-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
  }
}

@media (max-width:720px){
  .shell{
    padding:12px 10px 24px;
  }

  .topbar-inner,
  .panel-inner{
    padding:14px;
  }

  .control-card{
    padding:14px;
  }

  /* Removed three-grid and split-grid so they don't stack */
  /* Force 3 columns on mobile for Date and Time rows */
  .three-grid,
  .split-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px; /* Tighter gap to fit the mobile screen */
  }

  /* Shrink the input padding/font slightly so 3 items fit cleanly on iPhone */
  .three-grid .field select,
  .split-grid .field select,
  .three-grid .field input,
  .split-grid .field input {
    padding: 10px 6px;
    font-size: 13px;
    min-height: 42px;
  }

  .three-grid .field label,
  .split-grid .field label {
    font-size: 11px;
    margin: 0 0 4px;
  }

  .four-grid{
    grid-template-columns:1fr 1fr;
  }

  .pillars-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
  }

  .luck-grid{
    grid-template-columns:repeat(4,1fr);
    gap:10px;
  }

  .hero-title{
    font-size:28px;
  }

  .section-title{
    font-size:22px;
  }

  .summary-band .main{
    font-size:18px;
  }
}

@media screen and (orientation:landscape) and (max-width:932px){
  .pillars-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .pillar-token{
    font-size:20px;
  }

  .mini-value{
    font-size:13px;
  }


  .luck-age-main{
    font-size:15px;
  }

  .luck-code,
  .luck-sub,
  .luck-topline-value{
    font-size:11px;
  }
}

@media print {  
  /* 1. Force the containers to span 100% width */
  #luckCycleWrap, 
  #yearFlowWrap, 
  #monthFlowWrap {
    display: block !important;
    width: 100% !important;
  }
  
  

  /* ADDED: Force the actual table to fill the newly stretched wrapper */
  #luckCycleWrap .bazi-table, 
  #yearFlowWrap .bazi-table, 
  #monthFlowWrap .bazi-table {
    height: 100% !important;
  }
  /* Give the full-width table a clean outer border like Four Pillars */
  #luckCycleWrap .bazi-table-wrap, 
  #yearFlowWrap .bazi-table-wrap, 
  #monthFlowWrap .bazi-table-wrap {
    width: 100% !important;
    border: 1px solid #d9d1c4 !important; 
    border-radius: 10px !important;       
    box-sizing: border-box !important;
  }

  /* Ensure the inner table physically stretches to fill the wrap */
  #luckCycleWrap .bazi-table, 
  #yearFlowWrap .bazi-table, 
  #monthFlowWrap .bazi-table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
  }
  

  /* ==========================================
     THE SCALING & ALIGNMENT FIX FOR PDF
     ========================================== */

  /* 1. Scale up the fonts for PDF readability */
  .mobile-fixed-table th { font-size: 13px !important; padding: 6px 2px !important; }
  .mobile-fixed-table .t-val { font-size: 16px !important; }
  .mobile-fixed-table .t-element { font-size: 11px !important; }
  .mobile-fixed-table .t-god,
  .mobile-fixed-table .t-stage,
  .mobile-fixed-table .t-star { 
    font-size: 11px !important; 
    padding: 3px 4px !important;
    line-height: 1.2 !important;
  }

  /* 2. Set a slightly taller default height to absorb minor wrapping */
  .mobile-fixed-table tr,
  .mobile-fixed-table td,
  .mobile-fixed-table th {
    height: 28px !important; 
    overflow: hidden !important; 
    vertical-align: middle !important;
  }

  /* 3. MAKE THE "BRANCH" ROWS TALLER (Room for element text wrapping) */
  /* Four Pillars, Year Flow, Month Flow -> Row 3 */
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(3),
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(3) td,
  #yearFlowWrap .mobile-fixed-table tbody tr:nth-child(3),
  #yearFlowWrap .mobile-fixed-table tbody tr:nth-child(3) td,
  #monthFlowWrap .mobile-fixed-table tbody tr:nth-child(3),
  #monthFlowWrap .mobile-fixed-table tbody tr:nth-child(3) td { 
    height: 52px !important; 
  }

  /* Luck Cycle -> Row 4 */
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(4),
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(4) td { 
    height: 52px !important; 
  }

 
  
  /* Lock Rows 5, 6, and 7 for Luck Cycle (which has an extra header row) */
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(5),
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(5) td,
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(6),
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(6) td,
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(7),
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(7) td {
    height: 34px !important;
    overflow: hidden !important;
  }

  /* ==========================================
     ROW HEIGHT CONTROLS 
     ========================================== */

  /* 1. STEM 10 GOD (Row 2 across all tables) */
  .mobile-fixed-table tbody tr:nth-child(2) {
    height: 32px !important; 
  }

  /* 2. BRANCH 10 GOD (Row 4 in main, Row 5 in Luck Cycle) - KEPT THE SAME HEIGHT */
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(4),
  #monthFlowWrap .mobile-fixed-table tbody tr:nth-child(4),
  #yearFlowWrap .mobile-fixed-table tbody tr:nth-child(4),
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(5) {
    height: 30px !important; 
    overflow: hidden !important;
  }

  /* 3. 12 STAGES / CHIENG SAE (Rows 5 & 6 in main, Rows 6 & 7 in Luck Cycle) - DECREASED HEIGHT */
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(5),
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(6),
  #monthFlowWrap .mobile-fixed-table tbody tr:nth-child(5),
  #monthFlowWrap .mobile-fixed-table tbody tr:nth-child(6),
  #yearFlowWrap .mobile-fixed-table tbody tr:nth-child(5),
  #yearFlowWrap .mobile-fixed-table tbody tr:nth-child(6),
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(6),
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(7) {
    height: 22px !important; /* <--- Decreased from 30px */
    overflow: hidden !important;
  }

  /* 4. NOBLEMAN / STARS (Bottom Row) - DECREASED HEIGHT */
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(7),
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(7) td,
  #monthFlowWrap .mobile-fixed-table tbody tr:nth-child(7),
  #monthFlowWrap .mobile-fixed-table tbody tr:nth-child(7) td,
  #yearFlowWrap .mobile-fixed-table tbody tr:nth-child(7),
  #yearFlowWrap .mobile-fixed-table tbody tr:nth-child(7) td,
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(8),
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(8) td {
    height: 18px !important; /* <--- Decreased height */
    vertical-align: top !important; 
  }
  /* Luck Cycle -> Row 8 (Because it has the extra age header row inside) */
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(8),
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(8) td {
    height: 32px !important; /* CHANGE THIS VALUE to match the one above */
    vertical-align: top !important;
  }

  /* ==========================================
     ROW HEIGHT CONTROLS (10 God, 12 Stages, Stars)
     ========================================== */

  /* 1. STEM 10 GOD (Row 2 across all tables) */
  .mobile-fixed-table tbody tr:nth-child(2) {
    height: 32px !important; /* <--- ADJUST TOP 10 GOD HEIGHT HERE */
  }

  
  /* 5. THE CLAMPING FIX */
  .mobile-fixed-table td,
  .mobile-fixed-table th {
    padding: 2px 1px !important; 
  }

  .mobile-fixed-table .t-god,
  .mobile-fixed-table .t-stage {
    display: inline-block !important; 
    max-height: 30px !important;  /* <--- INCREASED from 24px to allow taller background pills */
    overflow: hidden !important; 
  }

  /* Forces the 'Enter' (line break) between the Branch Name and Elements */
  .mobile-fixed-table .t-val {
    display: block !important; 
    width: 100% !important;
    margin-bottom: 2px !important; /* Adds a tiny gap between the lines */
    overflow: hidden !important;
  }

  .mobile-fixed-table .t-element {
    display: block !important; 
    width: 100% !important;
    max-height: 28px !important; /* <-- FIXED: Caps the height so it cannot stretch the row */
    overflow: hidden !important;
  }
  /* Push the Detail Formula box to its own full row below the fused tables */
  .month-formula-box {
    page-break-before: always !important; /* For older browsers */
    break-before: page !important;        /* Modern standard */
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-top: 0 !important;             /* Reset margin at the top of the new page */
    border-top: 1px solid #ead8bd !important; /* Optional: adds a clean top border */
  }

  /* --- Allow the main section to split across the page break --- */
  #luckCycleSection {
    page-break-inside: auto !important;
    break-inside: auto !important;
  }
  
  /* --- Tighten spacing to ensure the tables fit on Page 1 --- */
  .panel {
    margin-bottom: 8px !important;
  }
  
  #yearFlowIntro, 
  #monthFlowIntro {
    margin: 6px 0 4px 0 !important;
  }
  
  /* 2. Let the PDF use natural width to prevent shrinking */
  html, body {
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 auto !important;
    background: #fff !important;
    color: #111 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

.shell{
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
}


  /* 4. Force panels to stretch edge-to-edge within the new margin */
  .panel {
    width: 100% !important;
    border: 1px solid #cfc7bb !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    background: #fff !important;
    margin: 0 0 12px 0 !important; /* Removes left/right margins */
    box-sizing: border-box !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

.topbar,
.print-note,
.formula-popup-backdrop,
.tg-popup-backdrop,
.ui-hidden{
  display:none !important;
}

.summary-band{
  display:none !important;
}

.main-grid,
.report-block,
#luckCycleSection{
  margin-top:0 !important;
}

.panel{
  border:1px solid #cfc7bb !important;
  border-radius:12px !important;
  box-shadow:none !important;
  background:#fff !important;
  margin-bottom:12px !important;
  break-inside:avoid;
  page-break-inside:avoid;
}

.panel-inner{
  padding:12px 14px !important;
}

.section-title{
  font-size:12pt !important;
  font-weight:800 !important;
  margin:0 0 6px 0 !important;
  color:#111 !important;
}

.section-label,
.section-copy{
  display:none !important;
}

.pillars-grid{
  grid-template-columns:repeat(4,1fr) !important;
  gap:10px !important;
  margin-top:0 !important;
}

.pillar-card,
.luck-card{
  border:1px solid #d9d1c4 !important;
  border-radius:10px !important;
  overflow:hidden !important;
  background:#fff !important;
  break-inside:avoid;
  page-break-inside:avoid;
}

.pillar-top,
.luck-age{
  background:#fff !important;
  color:#8b7d67 !important;
  border-bottom:1px solid #e4ddd2 !important;
  padding:8px 10px !important;
}

.pillar-name{
  color:#9b8a6c !important;
  font-size:8pt !important;
  letter-spacing:.16em !important;
}

.pillar-main{
  display:block !important;
  margin-top:0 !important;
}

.pillar-token{
  display:none !important;
}

.pillar-tag{
  display:none !important;
}

.pillar-body,
.luck-body{
  padding:8px !important;
  gap:6px !important;
}

.mini-card,
.luck-pill{
  background:#fff !important;
  border:1px solid #ddd5c8 !important;
  border-radius:8px !important;
  padding:6px 8px !important;
}

.luck-topline{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 0 2px 0 !important;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0 !important;
}

.mini-label,
.luck-pill .t,
.luck-topline-label{
  display:none !important;
}

.mini-value,
.luck-pill .v,
.luck-topline-value,
.luck-sub{
  font-size:8pt !important;
  line-height:1.15 !important;
  color:#111 !important;
  margin-top:0 !important;
}

.luck-code{
  font-size:8pt !important;
  line-height:1.15 !important;
  margin-top:0 !important;
}

.chieng-sae-right{
  color:#5c4033 !important;
}

#luckCycleWrap .luck-grid,
#yearFlowWrap .luck-grid,
#monthFlowWrap .luck-grid{
  grid-template-columns:repeat(6,1fr) !important;
  gap:8px !important;
  margin-top:0 !important;
}

.luck-age{
  text-align:center !important;
}

#luckCycleWrap .luck-age-main{
  display:none !important;
}

#luckCycleWrap .luck-age{
  padding:4px 6px !important;
  min-height:0 !important;
  border-bottom:none !important;
}

#luckCycleWrap .luck-age-sub{
  display:none !important;
}

.luck-age-main{
  font-size:12pt !important;
  color:#8e826d !important;
}

.luck-age-sub{
  font-size:7pt !important;
  color:#8e826d !important;
}

#yearFlowIntro,
#monthFlowIntro{
  display:block !important;
  font-size:11pt !important;
  font-weight:800 !important;
  color:#111 !important;
  margin:0 0 8px 0 !important;
}

.pdf-header{
  display:block !important;
  margin: 0 0 2px 0 !important; 
  padding:0 2px !important;
  font-size:12pt !important;
  font-weight:800 !important;
  color:#111 !important;
}
  
}      
     
  
.tg{cursor:pointer}
.tg-popup-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:99999;padding:18px}
.tg-popup-backdrop.show{display:flex}
.tg-popup{width:min(720px,96vw);max-height:84vh;overflow:auto;background:#111;border:1px solid rgba(212,175,55,.45);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.45);padding:18px;color:#f5f1e6}
.tg-popup-title{font-size:22px;font-weight:800;color:#f2c14e;margin:0 0 8px}
.tg-popup-sub{font-size:13px;color:#d7c9a6;margin:0 0 12px}
.tg-popup-body{white-space:pre-line;line-height:1.6;font-size:14px}
.tg-popup-close{margin-top:14px;border:none;border-radius:10px;padding:10px 14px;background:#d4af37;color:#111;font-weight:800;cursor:pointer}
@media print{
  .tg-popup-backdrop{display:none !important}
}

  .formula-popup-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:99998;
    padding:18px;
  }
  .formula-popup-backdrop.show{
    display:flex;
  }
  .formula-popup{
    width:min(1100px,96vw);
    max-height:88vh;
    overflow:auto;
    background:linear-gradient(180deg,#fffaf2 0%,#fff 100%);
    border:1px solid #e4d3bb;
    border-radius:24px;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
    padding:20px;
    color:#17120d;
  }
  .formula-popup-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
    position:sticky;
    top:0;
    background:#fffaf2;
    padding-bottom:10px;
    z-index:2;
  }
  .formula-popup-title{
    font-size:24px;
    font-weight:800;
    color:#9a6d24;
  }
  .formula-close-btn{
    border:none;
    border-radius:12px;
    padding:10px 16px;
    background:linear-gradient(180deg,#2a1d10 0%, #18110a 100%);
    color:#fff;
    font-weight:800;
    cursor:pointer;
    width:auto;
  }
  .formula-content h2{
    color:#2c3e50;
    font-size:1.15rem;
    margin-top:28px;
    border-bottom:2px solid #3498db;
    padding-bottom:5px;
  }
  .formula-content h3{
    color:#34495e;
    font-size:1.05rem;
    margin-top:18px;
  }
  .formula-content .table-container{
    overflow-x:auto;
    background:#fff;
    border-radius:12px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    margin-bottom:18px;
    border:1px solid #ead8bd;
  }
  .formula-content table{
    width:100%;
    border-collapse:collapse;
    min-width:420px;
  }
  .formula-content th,
  .formula-content td{
    border:1px solid #ddd;
    padding:10px;
    text-align:center;
    font-size:.95rem;
  }
  .formula-content th{
    background:#f5efe6;
    font-weight:800;
  }
  @media (max-width:680px){
    .formula-popup{
      width:96vw;
      max-height:90vh;
      padding:14px;
      border-radius:18px;
    }
    .formula-popup-title{
      font-size:18px;
    }
    .formula-content table{
      min-width:320px;
    }
    .formula-content th,
    .formula-content td{
      font-size:.85rem;
      padding:8px;
    }
  }
  @media print{
    .formula-popup-backdrop{
      display:none !important;
    }
  }

/* ========================================================
   iPHONE 14 PRO MAX - STACKED MATRIX TABLES
   ======================================================== */
.mobile-fixed-table {
  width: 100% !important;
  min-width: 100% !important;
  table-layout: fixed !important; 
}

.mobile-fixed-table th, 
.mobile-fixed-table td {
  padding: 4px 1px !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  vertical-align: top !important; /* Forces elements to the top of the cell */
  text-align: center !important;  /* Forces elements to the center of the cell */
}

.mobile-fixed-table th {
  font-size: 10px !important;
  letter-spacing: 0 !important;
  white-space: normal !important; 
}

.mobile-fixed-table .t-val {
  font-size: 13px !important; 
  line-height: 1.2 !important;
}

.mobile-fixed-table .t-element {
  font-size: 9px !important; 
}

.mobile-fixed-table .t-god,
.mobile-fixed-table .t-stage,
.mobile-fixed-table .t-star {
  font-size: 8.5px !important;
  padding: 2px 2px !important;
  min-width: 0 !important; 
  width: 98%; 
  letter-spacing: -0.2px;
  white-space: normal !important;
}

/* Four Pillars Top Dashboard Responsive Layout */
@media (max-width: 480px) {
  .meta-pills {
    gap: 6px;
  }
  .meta-pill {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 6px); /* 2x2 grid for top pills */
    padding: 8px !important;
  }
  .four-grid.action-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Current Year / Cycle Highlight Styles --- */
.highlight-col {
  background-color: #fdf3d8 !important; /* Soft golden tint for the column */
}
th.highlight-col {
  background-color: #f9e3b1 !important; /* Slightly stronger gold for the header */
  color: #8b5e0a !important;
  border-bottom: 2px solid #e2c07c !important;
  border-top: 2px solid #e2c07c !important; /* For the split header in luck cycle */
}
/* Ensure the inner pill badges pop cleanly against the tinted background */
.highlight-col .t-god,
.highlight-col .t-stage,
.highlight-col .t-star.khong {
  background: #ffffff !important; 
  border-color: #ebd1a4 !important;
}
@media print {
  .panel {
    border: none !important; /* This removes the outer box line completely */
  }
}
@media print {
  /* 1. Override the inline margin-bottom injected by JS on the Luck Cycle table */
  #luckCycleWrap .bazi-table-wrap {
    margin-bottom: 4px !important; 
  }

  /* 2. Pull the 10 Year Flow title closer */
  #yearFlowIntro {
    margin-top: -8px !important; /* Adjust this number to fine-tune the gap */
    padding-top: 0 !important;
    position: relative !important;
    z-index: 10 !important;
  }  
  
}

/* ==========================================
     FOUR PILLARS OVERVIEW ROW HEIGHTS (PDF ONLY)
     ========================================== */
  
  /* Row 1: Heavenly Stem */
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(1),
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(1) td { 
    height: 28px !important; 
  }
  
  /* Row 2: Stem 10 God */
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(2),
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(2) td { 
    height: 32px !important; 
  }
  
  /* Row 3: Earthly Branch & Hidden Elements */
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(3),
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(3) td { 
    height: 40px !important; 
  }
  
  /* Row 4: Branch 10 God */
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(4),
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(4) td { 
    height: 30px !important; 
  }
  
  /* Row 5: 12 Stages (Chieng Sae) */
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(5),
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(5) td { 
    height: 22px !important; 
  }
  
  /* Row 6: 12 Stages Year (Chieng Sae Year) */
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(6),
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(6) td { 
    height: 22px !important; 
  }
  
  /* Row 7: Nobleman / Khong Bong Stars */
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(7),
  #pillarsWrap .mobile-fixed-table tbody tr:nth-child(7) td { 
    height: 14px !important; 
  }

  /* ==========================================
   MOBILE UI SPLIT TABLE HELPERS
   (MUST BE OUTSIDE @MEDIA PRINT)
   ========================================== */
  /* Default for Desktop: Show the full row, hide the split rows */
  .show-on-mobile { 
    display: none !important; 
  }
  .hide-on-mobile { 
    display: block !important; 
  }

  /* Trigger Split Tables on Mobile Screens (under 720px) */
  @media (max-width: 720px) {
    .show-on-mobile { display: block !important; }
    .hide-on-mobile { display: none !important; }
  }
  /* ==========================================
   MOBILE UI: DETAIL BAZI FULL SCREEN FIX
   ========================================== */
@media (max-width: 720px) {
  /* 1. Pull the box to the very edges of the phone screen and reduce padding */
  #printDetailContainer .month-formula-box {
    padding: 14px 10px !important;
    margin-left: -10px !important; /* Pulls it flush to the left edge */
    margin-right: -10px !important; /* Pulls it flush to the right edge */
    border-radius: 0 !important; /* Removes curves for a true edge-to-edge look */
    border-left: none !important;
    border-right: none !important;
  }

  /* 2. Shrink the main title */
  #printDetailContainer .month-formula-box h2 {
    font-size: 18px !important;
    margin-bottom: 16px !important;
    padding-bottom: 8px !important;
  }

  /* 3. Override the 500px min-width so the tables can shrink to fit the phone */
  #printDetailContainer .month-formula-box table {
    min-width: 100% !important;
    table-layout: fixed !important; /* Forces columns to respect the width */
  }

  /* 4. Adjust the text and padding inside the table cells so they wrap nicely */
  #printDetailContainer .month-formula-box th,
  #printDetailContainer .month-formula-box td {
    padding: 6px 4px !important; 
    font-size: 11px !important; /* Slightly smaller text for mobile */
    white-space: normal !important; /* Allows text to wrap to the next line */
    word-wrap: break-word !important;
  }

  /* 5. Adjust sub-titles */
  #printDetailContainer .detail-bazi-section-title {
    font-size: 14px !important;
  }
}
  @media print {
    /* --- Force PDF to ALWAYS use the single long tables (Ignore mobile split) --- */
    .show-on-mobile { display: none !important; }
    .hide-on-mobile { display: block !important; }
  }
  
  /* ==========================================
     ULTIMATE 1-PAGE PDF SQUASH FIX
     (THIS WILL NOT AFFECT SCREEN UI)
     ========================================== */
  @media print {
  /* --- Decrease All Header Row Heights --- */
  .mobile-fixed-table thead tr,
  .mobile-fixed-table thead th {
    height: 16px !important; /* Decrease this number to make it even thinner */
    padding: 1px 2px !important;
    line-height: 1.1 !important;
    vertical-align: middle !important;
  }   
  /* --- Decrease Detail Bazi Interactions Row Heights --- */
  #printDetailContainer .month-formula-box table th,
  #printDetailContainer .month-formula-box table td {
    padding: 2px 4px !important; /* Overrides the large inline padding */
    line-height: 1.1 !important;
    font-size: 9pt !important;   /* Slightly smaller text to fit more rows */
    height: 18px !important; 
  }
  
  /* Squash the box's outer padding and title margins to save even more space */
  #printDetailContainer .month-formula-box {
    padding: 10px !important;
    margin-top: 10px !important;
  }
  #printDetailContainer .month-formula-title {
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
  }
  #printDetailContainer .detail-bazi-section-title {
    margin-bottom: 4px !important;
  }
  /* 1. Prevent Month Flow from jumping to the next page */
  #monthFlowIntro {
    page-break-before: auto !important; 
    break-before: auto !important;
    margin-top: 2px !important; 
    padding-top: 0 !important;
  }

  /* 2. Squash the "Air" (Outer Margins & Inner Paddings) */
  .panel-inner {
    padding: 4px 6px !important; 
  }
  .section-title {
    font-size: 11pt !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
  }
  #yearFlowIntro, 
  #monthFlowIntro {
    font-size: 10pt !important;
    margin: 2px 0 2px 0 !important;
  }
  
  /* Kill the inline bottom-margins injected by javascript */
  #luckCycleWrap .bazi-table-wrap, 
  #yearFlowWrap .bazi-table-wrap, 
  #monthFlowWrap .bazi-table-wrap,
  #pillarsWrap .bazi-table-wrap {
    margin-bottom: 2px !important;
    margin-top: 0 !important;
  }

  /* 3. Micro-Adjust Table Row Heights & Inner Cell Padding */
  .mobile-fixed-table th, 
  .mobile-fixed-table td {
    padding: 1px !important; 
  }
  .mobile-fixed-table .t-god,
  .mobile-fixed-table .t-stage,
  .mobile-fixed-table .t-star {
    padding: 1px 2px !important;
    max-height: 20px !important;
    margin: 0 !important;
  }
  
  /* --- Global Row Heights (Four Pillars, Year Flow, Month Flow) --- */
  .mobile-fixed-table tbody tr:nth-child(1), .mobile-fixed-table tbody tr:nth-child(1) td { height: 22px !important; }
  .mobile-fixed-table tbody tr:nth-child(2), .mobile-fixed-table tbody tr:nth-child(2) td { height: 24px !important; }
  .mobile-fixed-table tbody tr:nth-child(3), .mobile-fixed-table tbody tr:nth-child(3) td { height: 34px !important; }
  .mobile-fixed-table tbody tr:nth-child(4), .mobile-fixed-table tbody tr:nth-child(4) td { height: 24px !important; }
  .mobile-fixed-table tbody tr:nth-child(5), .mobile-fixed-table tbody tr:nth-child(5) td { height: 18px !important; }
  .mobile-fixed-table tbody tr:nth-child(6), .mobile-fixed-table tbody tr:nth-child(6) td { height: 18px !important; }
  .mobile-fixed-table tbody tr:nth-child(7), .mobile-fixed-table tbody tr:nth-child(7) td { height: 14px !important; }

  /* --- Luck Cycle Specific Heights (Accounts for the extra split-age row) --- */
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(3), #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(3) th { height: 16px !important; padding: 0 !important;}
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(4), #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(4) td { height: 34px !important; }
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(5), #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(5) td { height: 24px !important; }
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(6), #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(6) td { height: 18px !important; }
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(7), #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(7) td { height: 18px !important; }
  #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(8), #luckCycleWrap .mobile-fixed-table tbody tr:nth-child(8) td { height: 14px !important; }

  /* --- KILL GAP BETWEEN LUCK CYCLE AND 10 YEAR FLOW --- */
  #luckCycleSection {
    margin-top: -15px !important; /* Pulls the lower panel up */
  }
  #luckCycleSection .panel-inner {
    padding-top: 0 !important; 
  }
  .report-block {
    margin-top: 0 !important;
  }
  #yearFlowIntro {
    margin-top: -5px !important; /* Fine-tunes the title position */
    padding-top: 0 !important;
  }
}