*,*::before,*::after{box-sizing:border-box}
.tuvi-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;max-width:860px;margin:20px auto;padding:12px}
.tuvi-form{background:#faf7f2;border:1px solid #e7e0d8;border-radius:12px;padding:12px;max-width:720px;margin:0 auto}
.tuvi-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:10px}
.tuvi-row label{font-size:14px;color:#333}
.tuvi-label-2line span{display:inline}

.tuvi-field{display:flex;align-items:center;gap:8px}
.tuvi-field.full{flex:1 1 100%}
.tuvi-field label{white-space:nowrap}
.tuvi-in{padding:6px 8px;border:1px solid #d8d0c7;border-radius:8px;background:#fff;font-size:14px}
.tuvi-in.sm{width:76px}
.tuvi-in.md{width:92px}
.tuvi-in.wide{width:100%}

/* custom widths for mobile balance */
.tuvi-in.hour{width:170px}
.tuvi-in.cal{width:150px}


/* Fix: number input bị cắt khi nhập 2 chữ số (ẩn spinner để đủ chỗ hiển thị) */
.tuvi-form input[type=number].tuvi-in::-webkit-outer-spin-button,
.tuvi-form input[type=number].tuvi-in::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.tuvi-form input[type=number].tuvi-in{
  -moz-appearance: textfield;
}
.tuvi-btn{padding:8px 10px;border-radius:10px;border:1px solid #d8d0c7;background:#fff;cursor:pointer}
.tuvi-btn.primary{background:#f6f1ea}
.tuvi-status{font-size:13px;color:#444}

.tuvi-board{margin-top:14px}
.tuvi-grid{
  width:100%;
  max-width:720px;
  aspect-ratio:3/4;
  margin-left:auto;
  margin-right:auto;
}
.tuvi-svg{
  width:100%;
  height:100%;
  display:block;
  background:#f3f0ea;
}

/* Mobile: không tràn ngang, form cân đối hơn */
@media (max-width:680px){
  .tuvi-wrap{padding:8px}
  .tuvi-form{padding:10px}
  .tuvi-row{gap:10px}
  /* giữ label + input cùng hàng nhưng tránh input kéo tràn */
  .tuvi-field{flex:1 1 auto}
  .tuvi-field label{min-width:72px}
  .tuvi-in.sm{width:68px}
  .tuvi-in.md{width:88px}
  .tuvi-in.wide{width:100%}
  .tuvi-in.hour{width:150px}
  .tuvi-in.cal{width:170px}
  .tuvi-label-2line span{display:block}
  .tuvi-label-2line span:last-child{font-size:12px;color:#555;line-height:1.1;margin-top:2px}
  .tuvi-actions{gap:10px}
  .tuvi-actions .tuvi-btn{flex:1 1 0;width:100%}
  /*
    Mobile full-bleed (không kéo ngang nhưng lá số vẫn to):
    - Nhiều theme bọc nội dung trong container có padding => nếu dùng 100vw sẽ tràn và sinh scroll.
    - Breakout bằng margin calc(50% - 50vw) để phần lá số trải hết viewport nhưng vẫn căn giữa.
  */
  html, body{overflow-x:hidden}
  /* wrapper ngoài có thể bị theme giới hạn; tránh cắt phần breakout */
  .tuvi-wrap{overflow-x:visible}

  .tuvi-board{
    /* breakout khỏi container có padding của theme */
    overflow-x:visible;
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }

  .tuvi-grid{
    /* trừ 1 chút để không bị cắt viền ở mép màn hình do làm tròn pixel */
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    margin-left:auto;
    margin-right:auto;
    overflow:visible;
  }

  .tuvi-svg{
    width:100%;
    height:100%;
    display:block;
    max-width:100%;
  }
}