:root{
  --border:#777;
  --muted:#444;
  --red:#ff0000;
  --blue:#0b4bd6;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:#111;
  background:#f6f7fb;
}

.page{
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.page-header{margin-bottom: 12px;}
.page-title{align-items: center; margin:0; font-size: clamp(18px, 2.6vw, 28px);}

.card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.hidden{display:none !important;}

/* ---------- Form ---------- */
.tuvi-form{display:block;}

.form-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.field label{
  display:block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.field input,
.field select{
  width:100%;
  border:1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

.field input:focus,
.field select:focus{
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.row{
  display:flex;
  align-items:center;
  gap: 8px;
}

.radio-row{display:flex; gap: 14px; align-items:center;}
.radio{display:flex; gap: 8px; align-items:center; font-size: 14px;}

.gio-chi{font-weight:700; color: var(--muted); white-space: nowrap;}

.form-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn{
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}

.btn.primary{background:#2563eb; color:#fff; border-color:#2563eb;}
.btn:disabled{opacity:.6; cursor:not-allowed;}

.loading{
  margin-top: 10px;
  font-weight: 700;
}

/* ---------- Result / Chart ---------- */
.result-container{margin-top: 28px;}

.chart-wrapper{
  display:flex;
  justify-content:center;
  padding: clamp(16px, 6vw, 78px);
  overflow: visible;
}

@media (max-width: 480px){
  .chart-wrapper{padding: 16px;}
}

.chart-stage{
  position: relative;
  overflow: visible;
}

.chart-grid{
  position: relative;
  width: 1085px;
  height: 800px;
  background:#fff;
  border: 1px solid var(--border);
  overflow: visible;
}

.arrow-svg-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow: visible;
  pointer-events: none;
  z-index: 30;
}

.palace-layer{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  z-index: 20;
}

/* Grid placements */
.cung-ty{grid-row:1; grid-column:1;}
.cung-ngo{grid-row:1; grid-column:2;}
.cung-mui{grid-row:1; grid-column:3;}
.cung-than{grid-row:1; grid-column:4;}

.cung-thin{grid-row:2; grid-column:1;}
.cung-mao{grid-row:3; grid-column:1;}

.cung-dau{grid-row:2; grid-column:4;}
.cung-tuat{grid-row:3; grid-column:4;}

.cung-dan{grid-row:4; grid-column:1;}
.cung-suu{grid-row:4; grid-column:2;}
.cung-ty-bottom{grid-row:4; grid-column:3;}
.cung-hoi{grid-row:4; grid-column:4;}

.center-info{grid-row:2 / span 2; grid-column:2 / span 2;}

/* Palace box */
.palace,
.center-info{
  border: 1px solid var(--border);
  background: #fff;
  padding: 8px 8px 6px 8px;
  display:flex;
  flex-direction: column;
  overflow: hidden;
}

.palace-header{
  display:flex;
  align-items: baseline;
  gap: 6px;
  font-size: clamp(12px, 1.25vw, 16px);
  line-height: 1.1;
}

.cung-can-chi{font-weight: 800; white-space: nowrap;}
.ten-cung{flex:1; text-align:center; font-weight: 900;}
.dai-van-text{font-weight: 900; white-space: nowrap;}

/* Ngũ hành màu cho Can-Chi */
.hanh-moc{color:#008000;}
.hanh-hoa{color:#ff0000;}
.hanh-tho{color:#DAA520;}
.hanh-kim{color:#666666;}
.hanh-thuy{color:#111111;}

.palace-body{
  position: relative;
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 2px 2px;
}

.hoa-goc-markers{
  position:absolute;
  left: 6px;
  top: 28px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.hoa-circle{
  width: 22px;
  height: 22px;
  border: 2px solid var(--red);
  border-radius: 999px;
  color: var(--red);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 14px;
  background:#fff;
}

.stars{
  width: 100%;
  text-align:center;
  padding: 0 26px; /* chừa chỗ cho khoanh tròn A/B/C/D */
}

@media (max-width: 420px){
  .stars{padding: 0 22px;}
  .hoa-circle{width:20px;height:20px;font-size:13px;}
}

.stars-chinh .sao-line{line-height: 1.05;}

.stars-phu{
  margin-top: 6px;
  line-height: 1.15;
  word-break: break-word;
}

.sao{display:inline-block;}

.palace-footer{
  font-size: clamp(11px, 1.15vw, 14px);
  font-weight: 800;
  padding-top: 2px;
}

.vong-thai-tue{white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}

/* ---------- Center info ---------- */
.center-content{position:relative; will-change: transform;}

.center-info{
  padding: 8px 10px;
  position: relative;
}

.center-title{
  font-size: clamp(12px, 2.1vw, 24px);
  color: var(--blue);
  font-weight: 600;
  text-align:center;
  margin-bottom: 6px;
}

.center-lines{
  width: 100%;
  font-size: clamp(12px, 1.35vw, 16px);
  line-height: 1.25;
}

.center-line{margin: 2px 0;}
.center-line .label{font-weight: 600;}
.center-line .muted{color:#1f2937; opacity:.85;}

.center-subtitle{
  margin-top: auto;
  padding-top: 8px;
  text-align:center;
  color: var(--blue);
  font-weight: 800;
  font-size: clamp(12px, 1.25vw, 15px);
}

.center-chinese{
  position:absolute;
  top: 18px;
  right: 12px;
  writing-mode: vertical-rl;
  font-size: clamp(16px, 3vw, 28px);
  font-weight: 600;
  color:#111;
  letter-spacing: 4px;
}

.center-stamp{
  position:absolute;
  right: 14px;
  bottom: 16px;
  width: 64px;
  height: 64px;
  border: 0px solid var(--red);
  color: var(--red);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 16px;
}

/* Layout bảng thông tin trung tâm */
.center-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4px;
}

.center-table td {
  padding: 1px 2px;
  font-size: 15px;
  line-height: 1.3;
  color: #333;
}

.center-table td.label {
  font-weight: 700;
  width: 80px; /* Độ rộng nhãn */
  color: #000;
}

.center-table td.val-bold {
  font-weight: 800;
  font-size: 15px;
}

/* Màu xanh dương cho số tuổi */
.tuoi-blue {
  color: #1a73e8; 
  font-weight: 800;
}

/* Đường gạch ngang phân cách */
.center-separator {
  height: 1px;
  background-color: #ddd;
  margin: 6px 4px;
}

/* Đảm bảo center-content không bị scale sai lệch khi dùng bảng */
.center-info .center-content {
  width: 100% !important;
  max-width: 300px;
}
/* ---------- Luan giai ---------- */
.luan-giai-content{
  margin-top: 10px;
  line-height: 1.6;
}


/* ===== Center-info chia 2 vùng: CAM (text) + XANH (chữ Hán + dấu) ===== */
:root{
  --center-side-w: 60px;   /* bề rộng vùng xanh (chữ Hán + dấu) */
  --center-main-pad: 8px;  /* padding vùng cam */
}

.center-info{
  /* override phần flex column cũ */
  display: grid !important;
  grid-template-columns: 1fr var(--center-side-w);
  grid-template-rows: 1fr;
  padding: 0 !important;              /* padding chuyển vào center-main */
  overflow: hidden;
}

/* Vùng CAM: fit text vào đây */
.center-info .center-main{
  padding: var(--center-main-pad);
  overflow: hidden;
}

/* Vùng XANH: chứa chữ Hán + dấu, căn giữa theo chiều dọc */
.center-info .center-side{
  position: relative;
  border-left: 0px solid var(--border);
  overflow: hidden;
}

/* Chữ Hán nằm khoảng giữa (giống mẫu) */
.center-info .center-chinese{
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 40px;
  line-height: 1;
  letter-spacing: 2px;
  font-weight: 800;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* Dấu đỏ nằm góc dưới phải của vùng xanh */
.center-info .center-stamp{
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 44px;
  height: 44px;
  border: 2px solid #d21f1f;
  color: #d21f1f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  transform: rotate(0deg);
}

/* Center content scale */
.center-info .center-content{
  transform-origin: top left;
}

/* Giảm nhẹ font ở line để dễ fit (scale vẫn là chính) */
.center-info .center-lines{
  margin-top: 4px;
}

/* Nếu trước đó bạn có style center-chinese/stamp global, phần này sẽ ưu tiên đúng vùng */

/* ===== Center-content căn giữa trong vùng CAM (orange) ===== */
.center-info .center-main{
  position: relative;
  display: block;
}

.center-info .center-content{
  position: absolute;
  left: 55%;
  top: 50%;
  /* transform set by JS: translate(-50%, -50%) scale(s) */
  transform-origin: top left;
  width: max-content;
}