/* =========================================================
   TỬ VI CALI — LIGHT THEME (MOBILE PATCH, SYNCED)
   Đồng bộ biến & phong cách với tuvi_light_styles.css
   ========================================================= */

/* Thiết bị: iOS / iPad / Samsung */
.theme-light.ios, .theme-light.ipad, .theme-light.samsung{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

/* iOS: tránh auto-zoom khi focus input */
.theme-light.ios input,
.theme-light.ios select,
.theme-light.ios textarea,
.theme-light.ipad input,
.theme-light.ipad select,
.theme-light.ipad textarea,
.theme-light.samsung input,
.theme-light.samsung select,
.theme-light.samsung textarea{
  font-size:16px !important;
  line-height:1.35;
}

/* Safe-area */
@supports(padding:max(0px)){
  .theme-light.ios .wrap{
    padding-top:calc(22px + max(env(safe-area-inset-top), 0px));
    padding-bottom:calc(48px + max(env(safe-area-inset-bottom), 0px));
  }
}

/* iOS 100vh fix */
@supports(height:-webkit-fill-available){
  .theme-light.ios body{ min-height:-webkit-fill-available; }
}

/* Cuộn mượt cho vùng overflow */
.theme-light.ios .wrap,
.theme-light.ios .center-inner,
.theme-light.ios .box{
  -webkit-overflow-scrolling: touch;
}

/* ====== SYNC màu & token với tuvi_light_styles.css ====== */
/* tuvi_light_styles.css đã set:
   --bg, --text, --panel-bg, --panel-border, --input-border, --btn-bg, --btn-color, --link
   + layout wrap, form-2col, group…
   (giữ nguyên để đồng bộ)  :contentReference[oaicite:2]{index=2}
*/

/* ====== Layout mobile (đè lên desktop) ====== */
@media (max-width: 768px){

  /* Panel chính: full width nhưng vẫn giữ border/shadow như desktop */
  .theme-light .wrap{
    max-width:100% !important;
    margin:0 auto;
    padding:18px 16px 56px;
    background:var(--panel-bg) !important;
    color:var(--text) !important;
    border:1px solid var(--panel-border) !important;
    border-radius:6px;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
  }

  /* Header trong panel: xếp dọc */
  .theme-light .wrap-header{
    display:flex; flex-direction:column; align-items:flex-start;
    gap:10px; margin-bottom:8px;
  }

  /* Form 2 cột -> 1 cột (giữ typography của desktop) */
  .theme-light .form-2col{
    display:grid; grid-template-columns:1fr !important;
    gap:12px 0 !important; margin-top:14px;
  }
  .theme-light .form-group{
    display:grid; grid-template-columns:1fr !important;
    gap:6px 0 !important; align-items:stretch;
  }
  .theme-light label{ color:#111; font-weight:600; }

  /* Controls: giữ style desktop, tăng tap-target */
  .theme-light input, .theme-light select{
    background:#fff !important; color:#111 !important;
    border:1px solid var(--input-border) !important;
    border-radius:8px; height:42px; padding:10px 12px; width:100%;
    box-sizing:border-box;
  }
  .theme-light input:focus, .theme-light select:focus{
    outline:none; border-color:#2563eb !important;
    box-shadow:0 0 0 3px rgba(37,99,235,.15);
  }

  /* Actions: dãn cách & wrap nút */
  .theme-light .actions{
    text-align:center; margin-top:10px;
    display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  }
  .theme-light .actions .btn,
  .theme-light button, .theme-light .btn{
    background:var(--btn-bg) !important; color:var(--btn-color) !important;
    border:1px solid #1d4ed8 !important;
    border-radius:12px; padding:12px 16px; font-weight:700; min-height:44px;
  }

  /* Micro theme Light/Dark nếu có */
  .theme-light .theme-micro{ right:12px; bottom:8px; font-size:13px; }
}

/* ====== Tối ưu riêng cho trang Auth (login/register/reset) ====== */
@media (max-width:480px){
  .auth-wrap .container{ max-width:100% }
  .auth-wrap .card{
    background:var(--panel-bg) !important; color:var(--text) !important;
    border:1px solid var(--panel-border) !important; border-radius:14px;
    padding:16px; box-shadow:0 10px 20px rgba(0,0,0,.04);
  }
  .auth-wrap h1{ font-size:20px; margin:0 0 10px }
  .auth-wrap input, .auth-wrap .btn{ font-size:16px } /* tránh iOS auto-zoom */
  .auth-wrap .actions{ gap:8px }
}

/* Android/Samsung: tối ưu hiển thị chữ nhỏ */
.theme-light.samsung .box .chi-left,
.theme-light.samsung .box .cung-center,
.theme-light.samsung .star-side .line{
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}

/* Giữ đồng bộ phần lá số & card với desktop light */
.theme-light .wrap, .theme-light .panel, .theme-light .card,
.theme-light .center-wrap, .theme-light .center-inner, .theme-light .box,
.theme-light .month-analysis-block, .theme-light .center-card, .theme-light .th-adv{
  background:var(--panel-bg) !important; color:var(--text) !important; border-color:var(--panel-border) !important;
}
/* Các tinh chỉnh mobile gốc (chart, header, …) giữ lại */
@media (max-width:768px){
  .theme-light .chart--desktop{ grid-template-rows:repeat(4,auto) !important; gap:2px !important; }
  .theme-light .box{ min-height:260px; padding:10px 8px 60px; }
  .theme-light .star-center{ font-size:15px; }
  .theme-light .below-stars{ grid-template-columns:1fr !important; }
  .theme-light .below-stars .star-right{ text-align:left !important; margin-top:4px; }
  .theme-light .box .header{ height:36px; padding-top:4px; }
  .theme-light .box .chi-left{ font-size:13px; }
  .theme-light .box .cung-center{ font-size:15px; }
  .theme-light .badge{ top:30px; right:12px; font-size:12px; }
  .theme-light .lcung{ top:30px; font-size:11px; }
  .theme-light .ts-stack{ bottom:12px; }
}


/* ======================================================================
   TỬ VI CALI — MOBILE LIGHT STYLES (iOS/Android/iPad)
   File: tuvi_light_styles.mobile.css
   Purpose: Tối ưu UI cho module "Tìm thời điểm mua/đổi xe"
   Safe to include after base styles; only overrides/enhancements below.
   ====================================================================== */

/* =========================
   0) ROOT & LIGHT/DARK VARS
   ========================= */
:root{
  /* Typography */
  --tv-font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --tv-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Palette (light default) */
  --tv-bg: #ffffff;
  --tv-panel: #ffffff;
  --tv-text: #0f172a;     /* slate-900 */
  --tv-muted: #475569;    /* slate-600 */
  --tv-bd: #e5e7eb;       /* gray-200 */
  --tv-bd-strong: #cbd5e1;/* slate-300 */
  --tv-chip: #f8fafc;     /* slate-50 */

  /* Accents for badges */
  --tv-good-bg: #10b9811a; /* emerald-500 @ 10% */
  --tv-good-bd: #10b981;   /* emerald-500 */
  --tv-good-tx: #065f46;   /* emerald-800 */

  --tv-fair-bg: #3b82f61a; /* blue-500 @ 10% */
  --tv-fair-bd: #3b82f6;   /* blue-500 */
  --tv-fair-tx: #1e3a8a;   /* indigo-900 */

  --tv-bad-bg: #ef44441a;  /* red-500 @ 10% */
  --tv-bad-bd: #ef4444;    /* red-500 */
  --tv-bad-tx: #7f1d1d;    /* red-900 */

  --tv-shadow: 0 6px 18px rgba(2, 6, 23, .06); /* soft shadow */
  --tv-radius: 12px;

  /* Spacing scale */
  --tv-gap-1: 6px;
  --tv-gap-2: 10px;
  --tv-gap-3: 14px;
  --tv-gap-4: 18px;

  /* Table metrics */
  --tv-row-h: 44px; /* tap target >=44px */
  --tv-th-h: 42px;

  /* Safe-area padding defaults */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

@media (prefers-color-scheme: dark){
  :root{
    --tv-bg: #0b1324;       /* from your dark debug block */
    --tv-panel: #0f172a;    /* slate-900 */
    --tv-text: #e5e7eb;     /* slate-200 */
    --tv-muted: #94a3b8;    /* slate-400 */
    --tv-bd: #1f2937;       /* gray-800 */
    --tv-bd-strong: #334155;/* slate-700 */
    --tv-chip: #0b1324;

    --tv-shadow: 0 10px 28px rgba(0,0,0,.35);
  }
}

/* =======================================
   1) BASE MOBILE RESET & ACCESSIBILITY
   ======================================= */
html{
  -webkit-text-size-adjust: 100%; /* fix iOS text zoom */
  text-size-adjust: 100%;
}
body{
  font-family: var(--tv-font-ui);
  background: var(--tv-bg);
  color: var(--tv-text);
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}
:focus-visible{
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==================================================
   2) CONTAINER — month-analysis-block / tvxe wrapper
   ================================================== */
.month-analysis-block.tvxe,
.tvxe-year-block.tvxe{
  background: var(--tv-panel);
  border: 1px solid var(--tv-bd);
  border-radius: var(--tv-radius);
  box-shadow: var(--tv-shadow);
  padding: var(--tv-gap-3);
  margin: var(--tv-gap-3) 0;
}

.month-title{
  font-size: 1.125rem; /* 18px */
  line-height: 1.35;
  margin: 0 0 var(--tv-gap-2);
  font-weight: 700;
  letter-spacing: .2px;
}

/* header inside block */
.tvxe .item-content{
  display: block;
  margin-top: var(--tv-gap-2);
}

/* ========================
   3) BADGE — kết luận nhãn
   ======================== */
.badge_timthoidiemmuaxe{
   /* default relative, avoid overlap on small viewports */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 12px/1 var(--tv-font-ui);
  white-space: nowrap;
  background: #fff;
  color: #111827;
  border: 1px solid rgba(0,0,0,.08);
  padding: 3px 8px;
  border-radius: 999px;
}
.month-analysis-block .badge_timthoidiemmuaxe.good{
  background: var(--tv-good-bg);
  color: var(--tv-good-tx);
  border-color: var(--tv-good-bd);
}
.month-analysis-block .badge_timthoidiemmuaxe.fair{
  background: var(--tv-fair-bg);
  color: var(--tv-fair-tx);
  border-color: var(--tv-fair-bd);
}
.month-analysis-block .badge_timthoidiemmuaxe.bad{
  background: var(--tv-bad-bg);
  color: var(--tv-bad-tx);
  border-color: var(--tv-bad-bd);
}

/* floating badge (when used as header corner) */
.month-analysis-block .badge_timthoidiemmuaxe.is-floating{
  position: absolute;
  top: 10px; right: 14px;
}
@media (max-width: 480px){
  .month-analysis-block .badge_timthoidiemmuaxe.is-floating{
    position: static; display: inline-flex; margin-top: 6px;
  }
}

/* inline variant (table cell) */
.tvxe-table td .badge_timthoidiemmuaxe{
  font-size: 11px; line-height: 1;
  padding: 2px 8px;
}

/* ==================================
   4) TOP SUGGESTION (gợi ý nổi bật)
   ================================== */
.tvxe-top{
  background: var(--tv-chip);
  border: 1px dashed var(--tv-bd-strong);
  border-radius: var(--tv-radius);
  padding: var(--tv-gap-3);
  margin: 0 0 var(--tv-gap-3);
}
.tvxe-top h4{
  margin: 0 0 var(--tv-gap-2);
  font-size: 1rem;
}
.tvxe-top ol{
  margin: 0; padding-left: 1.2rem;
}
.tvxe-top li{
  margin: 6px 0;
}

/* ===============================
   5) TABLE — responsive & sticky
   =============================== */
.tvxe-table-wrap{
  border: 1px solid var(--tv-bd);
  border-radius: var(--tv-radius);
  overflow: hidden;
  background: var(--tv-panel);
}

/* Horizontal scroll container with momentum on iOS */
.tvxe-table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tvxe-table{
  width: 100%;
  min-width: 720px; /* keeps columns readable; scrolls on phones */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
.tvxe-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--tv-chip);
  color: var(--tv-muted);
  text-align: left;
  font-weight: 700;
  height: var(--tv-th-h);
  border-bottom: 1px solid var(--tv-bd);
  padding: 10px 12px;
  backdrop-filter: saturate(120%) blur(2px);
}
.tvxe-table tbody td{
  border-bottom: 1px solid var(--tv-bd);
  padding: 10px 12px;
  height: var(--tv-row-h); /* finger friendly */
  vertical-align: middle;
}
.tvxe-table tbody tr:last-child td{
  border-bottom: none;
}

/* First column sticky for quick scan (on wider phones & tablets) */
@media (min-width: 540px){
  .tvxe-table thead th:first-child,
  .tvxe-table tbody td:first-child{
    position: sticky; left: 0; z-index: 3;
    background: var(--tv-panel);
    border-right: 1px solid var(--tv-bd);
  }
}

/* Compact text wrapping for “Lý do chính” */
.tvxe-table td:last-child{
  max-width: 360px;
  white-space: normal;
  word-wrap: break-word;
}

/* =========================================
   6) SMALL VIEW — transform table to cards
   ========================================= */
@media (max-width: 480px){
  .tvxe-table-wrap{ border: none; overflow: visible; }
  .tvxe-table, .tvxe-table thead, .tvxe-table tbody, .tvxe-table tr, .tvxe-table th, .tvxe-table td{
    display: block;
  }
  .tvxe-table{
    min-width: 0;
  }
  .tvxe-table thead{ display: none; }
  .tvxe-table tbody tr{
    background: var(--tv-panel);
    border: 1px solid var(--tv-bd);
    border-radius: var(--tv-radius);
    box-shadow: var(--tv-shadow);
    padding: 10px 10px;
    margin: 10px 0;
  }
  .tvxe-table tbody td{
    border: none;
    padding: 6px 4px;
    height: auto;
  }
  .tvxe-table tbody td::before{
    content: attr(data-label);
    display: block;
    font-size: 12px;
    color: var(--tv-muted);
    margin-bottom: 2px;
  }
}

/* (Optional) If you want to utilize data-label without changing PHP:
   You can add via CSS generated content using nth-child mapping. */
@media (max-width: 480px){
  .tvxe-table tbody tr td:nth-child(1)::before{ content: "Tháng (DL)"; }
  .tvxe-table tbody tr td:nth-child(2)::before{ content: "Âm lịch"; }
  .tvxe-table tbody tr td:nth-child(3)::before{ content: "Can tháng"; }
  .tvxe-table tbody tr td:nth-child(4)::before{ content: "Trường Sinh"; }
  .tvxe-table tbody tr td:nth-child(5)::before{ content: "Kết luận"; }
  .tvxe-table tbody tr td:nth-child(6)::before{ content: "Điểm"; }
  .tvxe-table tbody tr td:nth-child(7)::before{ content: "Lý do chính"; }
}

/* ==============================
   7) POINTS STRING & MONO BLOCK
   ============================== */
.tvxe-points{
  font-family: var(--tv-font-mono);
  font-size: 12.5px;
  background: var(--tv-chip);
  border: 1px dashed var(--tv-bd-strong);
  border-radius: var(--tv-radius);
  padding: 10px 12px;
  margin-top: var(--tv-gap-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ====================================
   8) iOS/iPad & ANDROID SPECIAL CASES
   ==================================== */
/* Fix iOS Safari bottom toolbars overlapping content */
@supports (padding: max(0px)){
  body{
    padding-bottom: max(var(--safe-bottom), 8px);
    padding-top: max(var(--safe-top), 8px);
  }
}

/* iPad landscape — widen table, increase min-width for columns */
@media (min-width: 1024px) and (orientation: landscape){
  .tvxe-table{ min-width: 880px; }
  .month-title{ font-size: 1.25rem; }
}

/* High-density screens — crisper borders */
@media (min-resolution: 2dppx){
  .tvxe-table tbody td,
  .tvxe-table thead th{
    border-color: color-mix(in srgb, var(--tv-bd) 80%, transparent);
  }
}

/* ==========================
   9) SCROLLBAR (WebKit only)
   ========================== */
.tvxe-table-wrap::-webkit-scrollbar,
.tvxe-points::-webkit-scrollbar{ height: 8px; }
.tvxe-table-wrap::-webkit-scrollbar-thumb,
.tvxe-points::-webkit-scrollbar-thumb{
  background: #cbd5e1; border-radius: 999px;
}
@media (prefers-color-scheme: dark){
  .tvxe-table-wrap::-webkit-scrollbar-thumb,
  .tvxe-points::-webkit-scrollbar-thumb{
    background: #475569;
  }
}

/* ==========================
   10) PRINT (optional, minimal)
   ========================== */
@media print{
  .tvxe-top{ border-style: solid; }
  .tvxe-table thead th{ position: static; }
  .tvxe-table{ min-width: 0; }
  .month-analysis-block.tvxe, .tvxe-year-block.tvxe{
    box-shadow: none; border-color: #000;
  }
}