/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — thayungkhiem.vn
   Tầng breakpoint:
     ≤ 359px ........ phone gập đóng (Z Fold outer ~344)
     360 - 639px .... phone thường
     640 - 767px .... phone lớn / phablet
     768 - 899px .... foldable mở dọc / tablet nhỏ portrait
     900 - 1023px ... tablet portrait
     1024 - 1279px .. tablet ngang / laptop nhỏ
     ≥ 1280px ....... desktop
   Dual-screen:
     (horizontal-viewport-segments: 2) — Surface Duo / Z Fold mở ngang
     (vertical-viewport-segments: 2)   — gập theo trục ngang (book mode)
═══════════════════════════════════════════════════════════════════ */

/* ── 0. Reset toàn cục ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  min-width: 0;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

/* Safe-area cho thiết bị notched/foldable khi viewport-fit=cover */
@supports (padding: max(0px)) {

  .container,
  [class*="container"] {
    padding-left: max(var(--container-pad, 22px), env(safe-area-inset-left)) !important;
    padding-right: max(var(--container-pad, 22px), env(safe-area-inset-right)) !important;
  }
}

/* ════════════════════════════════════════════════════
   1. PHONE GẬP ĐÓNG (≤ 359px) — Z Fold outer, phone nhỏ
   ════════════════════════════════════════════════════ */
@media (max-width: 359px) {
  :root {
    --container-pad: 10px;
  }

  .container,
  [class*="container"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  h1,
  .text-5xl,
  .text-6xl {
    font-size: 1.55rem !important;
    line-height: 1.2 !important;
  }

  h2,
  .text-4xl {
    font-size: 1.3rem !important;
  }

  h3,
  .text-3xl {
    font-size: 1.1rem !important;
  }

  .text-lg,
  .text-xl {
    font-size: .95rem !important;
  }

  .py-20,
  .py-24 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* Hero / avatar nén lại */
  .avatar {
    width: 120px !important;
    height: 120px !important;
  }

  /* Coin / xốc xăm */
  .coin3d {
    width: 56px !important;
    height: 56px !important;
  }

  .xoc-scene {
    width: 80px !important;
    height: 120px !important;
  }
}

/* ════════════════════════════════════════════════════
   2. PHONE THƯỜNG (≤ 639px)
   ════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  :root {
    --container-pad: 16px;
  }

  .container,
  [class*="container"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  .px-4,
  .px-6,
  .px-8 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  [class*="max-w-xl"],
  [class*="max-w-2xl"],
  [class*="max-w-3xl"],
  [class*="max-w-4xl"],
  [class*="max-w-5xl"],
  [class*="max-w-6xl"],
  [class*="max-w-7xl"] {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Section padding */
  .py-16,
  .py-20,
  .py-24 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .mb-12,
  .mb-16 {
    margin-bottom: 28px !important;
  }

  /* Typography */
  h1,
  .text-5xl,
  .text-6xl {
    font-size: 1.85rem !important;
    line-height: 1.2 !important;
  }

  h2,
  .text-4xl {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }

  h3,
  .text-3xl {
    font-size: 1.2rem !important;
  }

  .text-2xl {
    font-size: 1.15rem !important;
  }

  .text-lg,
  .text-xl {
    font-size: 1rem !important;
  }

  /* Cards / spacing */
  .rounded-2xl,
  .rounded-xl,
  .rounded-lg {
    border-radius: 12px !important;
  }

  .p-8,
  .md\:p-8 {
    padding: 16px !important;
  }

  .p-6,
  .md\:p-6 {
    padding: 14px !important;
  }

  .gap-8,
  .gap-6 {
    gap: 14px !important;
  }

  /* Form/inputs — chống iOS zoom + đủ to để chạm */
  input,
  select,
  textarea,
  button {
    font-size: 16px !important;
  }

  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  select,
  textarea {
    min-height: 44px;
  }

  /* Page hero của các trang la số */
  .hero h1,
  h1.title {
    font-size: 1.85rem !important;
  }

  .hero .lead,
  .subtitle {
    font-size: .95rem !important;
  }

  /* Card lá số / xốc xăm — bỏ scale lớn */
  .que-hdr {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }
}

/* ════════════════════════════════════════════════════
   3. GRID COLLAPSE (≤ 767px)
   ════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Grid 2 cột → 1 cột (giữ ngoại lệ qua .keep-grid) */
  .grid.grid-cols-2:not(.keep-grid),
  .grid.md\:grid-cols-2:not(.keep-grid),
  .grid.sm\:grid-cols-2:not(.keep-grid) {
    grid-template-columns: 1fr !important;
  }

  /* Grid 3 cột → 1 cột */
  .grid.grid-cols-3:not(.keep-grid),
  .grid.md\:grid-cols-3:not(.keep-grid),
  .grid.lg\:grid-cols-3:not(.keep-grid) {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Grid 4 cột → 2 cột (giữ chart bát tự dùng .keep-grid để không vỡ) */
  .grid.grid-cols-4:not(.keep-grid),
  .grid.md\:grid-cols-4:not(.keep-grid),
  .grid.sm\:grid-cols-4:not(.keep-grid),
  .grid.lg\:grid-cols-4:not(.keep-grid) {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Grid 6 cột (timing-grid ha-lac) → 2 cột */
  .grid.lg\:grid-cols-6:not(.keep-grid),
  .grid.md\:grid-cols-6:not(.keep-grid) {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Layout An lá số */
  .layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .chooser {
    grid-template-columns: 1fr !important;
  }

  /* Form rows */
  .row,
  .row.three,
  .row.four {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Footer */
  #site-footer .uk-footer-grid,
  .uk-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Tables */
  .overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 480px;
  }
}

/* ════════════════════════════════════════════════════
   4. FOLDABLE MỞ / TABLET NHỎ (640 - 899px)
   Z Fold inner ~717px, Surface Duo single 540px,
   iPad mini portrait 768px
   ════════════════════════════════════════════════════ */
@media (min-width: 640px) and (max-width: 899px) {
  :root {
    --container-pad: 20px;
  }

  .container,
  [class*="container"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }

  [class*="max-w-5xl"],
  [class*="max-w-6xl"],
  [class*="max-w-7xl"] {
    max-width: 100% !important;
  }

  /* Typography vừa phải */
  h1,
  .text-5xl,
  .text-6xl {
    font-size: 2.25rem !important;
  }

  h2,
  .text-4xl {
    font-size: 1.75rem !important;
  }

  /* An lá số: form bên cạnh chooser ổn ở >720px, dồn xuống ở <720 */
}

@media (min-width: 640px) and (max-width: 719px) {
  .layout {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .chooser {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ════════════════════════════════════════════════════
   5. TABLET (900 - 1023px) — iPad portrait
   ════════════════════════════════════════════════════ */
@media (min-width: 900px) and (max-width: 1023px) {
  :root {
    --container-pad: 24px;
  }

  .container,
  [class*="container"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
    max-width: 100% !important;
  }

  /* Footer 2 cột thay vì 3 */
  #site-footer .uk-footer-grid,
  .uk-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
}

/* ════════════════════════════════════════════════════
   6. TABLET NGANG / LAPTOP NHỎ (1024 - 1279px)
   ════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1279px) {

  .container,
  [class*="container"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* ════════════════════════════════════════════════════
   6b. DESKTOP (≥ 1280px) — dùng 96vw, giới hạn tối đa 1900px
   Phủ: .container, [class*="container"], và các section wrapper
   hardcode 1180px trên từng trang (ukm-inner, uk-footer-inner,
   uk-ni, uk-nav-inner-hl, uk-footer-inner-hl).
   ════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .container,
  [class*="container"],
  .ukm-inner,
  .uk-footer-inner,
  .uk-ni,
  .uk-nav-inner-hl,
  .uk-footer-inner-hl {
    max-width: min(1900px, 96vw) !important;
  }
}

/* ════════════════════════════════════════════════════
   7. CHART / BẢNG ĐẶC THÙ
   ════════════════════════════════════════════════════ */

/* Tử Vi — thiết kế mới (A4) tự quản layout trong tu-vi.html
   (.tuvi-sheet, .tuvi-stage, .tuvi-viewport). Không có rule chung ở đây. */

/* Bát Tự — bảng 4 cột không nén dưới 380px */
@media (max-width: 860px) {
  #batuChart {
    max-width: 100% !important;
    margin: 0 8px !important;
  }
}

@media (max-width: 380px) {
  #batuChart {
    font-size: 11px !important;
  }

  #batuChart .grid {
    gap: 2px !important;
  }
}

/* Hà Lạc — bảng vận hạn cuộn ngang */
@media (max-width: 1023px) {
  #halac-que-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #timing-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ════════════════════════════════════════════════════
   8. DUAL-SCREEN / FOLDABLE 2 PHÂN VÙNG
   Surface Duo ngang, Z Fold mở khi browser hỗ trợ
   viewport-segment env() (Edge / Chrome 100+)
   ════════════════════════════════════════════════════ */

/* Khi viewport có 2 phân vùng theo phương ngang
   (thiết bị đặt ngang, mỗi nửa là 1 màn hình) */
@media (horizontal-viewport-segments: 2) {

  /* Tránh nội dung quan trọng nằm vắt qua khe gập (hinge):
     ép container chính chỉ chiếm vùng đầu tiên,
     hoặc trải đều với gap = chiều rộng hinge */
  .container,
  [class*="container"] {
    max-width: env(viewport-segment-right 0 0) !important;
    margin-left: 0 !important;
  }

  /* Grid 2 cột: cột 1 nằm trên màn 1, cột 2 trên màn 2,
     gap = đúng khoảng hinge */
  .grid.grid-cols-2.dual-span,
  .uk-footer-grid {
    grid-template-columns:
      env(viewport-segment-right 0 0) calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)) 1fr !important;
  }

  .uk-footer-grid>*:nth-child(2) {
    grid-column: 3;
  }
}

/* Khi viewport có 2 phân vùng theo phương dọc
   (thiết bị đặt dọc, gập như cuốn sách) */
@media (vertical-viewport-segments: 2) {

  /* Hero / section đầu nằm trọn trong màn trên,
     content nội dung bắt đầu từ màn dưới */
  .hero {
    min-height: env(viewport-segment-bottom 0 0);
  }

  /* Sticky nav vẫn dính đỉnh, footer vẫn dính đáy — không can thiệp */
}

/* Foldable spec cũ (Surface Duo emulator IE/Edge legacy) */
@media (spanning: single-fold-vertical) {

  .container,
  [class*="container"] {
    max-width: calc(env(fold-left) + 0px) !important;
  }
}

/* ════════════════════════════════════════════════════
   9. ORIENTATION EDGE-CASES
   ════════════════════════════════════════════════════ */

/* Phone landscape thấp: hero không nên cao hơn viewport */
@media (max-height: 480px) and (orientation: landscape) {
  .hero {
    padding: 24px 0 !important;
  }

  .avatar {
    width: 100px !important;
    height: 100px !important;
  }

  h1.title,
  .hero h1 {
    font-size: 1.6rem !important;
    margin: 12px 0 6px !important;
  }
}

/* ════════════════════════════════════════════════════
   10. PRINT — đảm bảo các trang in (lá số) ra A4 đẹp
   ════════════════════════════════════════════════════ */
@media print {

  .uk-nav,
  header.nav,
  .uk-mobile-menu,
  #site-footer,
  .uk-footer,
  .no-print {
    display: none !important;
  }

  body {
    background: #fff !important;
  }
}
/* Ảnh bài tử vi rộng bằng chữ: reset margin mặc định 40px của thẻ figure */
.ks-section-img figure{margin:0}