/* scope theo khối .vdvl-weather để không ảnh hưởng theme */
.vdvl-weather{
  --bg:#0f172a;
  --panel:#111827;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --brand:#38bdf8;
  --accent:#34d399;
  --warn:#f59e0b;

  margin:0;
  background:linear-gradient(180deg,#0b1220,#0f172a);
  color:var(--text);
  font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}
.vdvl-weather *{ box-sizing:border-box }

.vdvl-weather header{
  position:sticky; top:0; z-index:20;
  background:rgba(15,23,42,.7);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(148,163,184,.15);
}
.vdvl-weather .wrap{max-width:1100px;margin:0 auto;padding:14px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.vdvl-weather .logo{font-weight:700;letter-spacing:.2px}
.vdvl-weather .logo b{color:var(--brand)}
.vdvl-weather .tag{padding:2px 8px;border:1px solid rgba(148,163,184,.2);border-radius:999px;color:var(--muted)}

.vdvl-weather input,
.vdvl-weather button,
.vdvl-weather select{font:inherit;color:inherit}
.vdvl-weather .searchbar{display:flex;gap:8px;flex:1;min-width:260px}
.vdvl-weather .searchbar input{
  flex:1;padding:10px 12px;border-radius:10px;border:1px solid rgba(148,163,184,.2);
  background:rgba(2,6,23,.6);color:var(--text);outline:none;
}
.vdvl-weather .btn{
  padding:10px 12px;border-radius:10px;border:1px solid rgba(148,163,184,.25);
  background:rgba(2,6,23,.6);color:var(--text);cursor:pointer;
}
.vdvl-weather .btn:hover{border-color:rgba(148,163,184,.5)}

.vdvl-weather main{max-width:1100px;margin:18px auto;padding:0 16px;display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
@media (max-width:980px){ .vdvl-weather main{grid-template-columns:1fr} }

.vdvl-weather .panel{
  background:linear-gradient(180deg,rgba(17,24,39,.65),rgba(2,6,23,.6));
  border:1px solid rgba(148,163,184,.15);
  border-radius:14px;padding:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.02);
}

.vdvl-weather select.pill{
  background-color:#0f172a;
  color:var(--text);
  border:1px solid rgba(148,163,184,.25);
  border-radius:999px;
  padding:6px 10px;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
}

.vdvl-weather h2{font-size:16px;margin:0 0 8px 0}
.vdvl-weather .muted{color:var(--muted)}
.vdvl-weather .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:720px){ .vdvl-weather .grid{grid-template-columns:repeat(2,1fr)} }

.vdvl-weather .card{
  padding:12px;border-radius:12px;border:1px solid rgba(148,163,184,.15);
  background:rgba(2,6,23,.5);
}
.vdvl-weather .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.vdvl-weather .kv{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.vdvl-weather .big{font-size:36px;font-weight:700}
.vdvl-weather canvas{width:100%;height:280px}
.vdvl-weather .small{font-size:12px;color:var(--muted)}
.vdvl-weather .switch{display:flex;gap:8px;align-items:center}
.vdvl-weather .switch input{accent-color:var(--brand)}
.vdvl-weather .pill{border:1px solid rgba(148,163,184,.25);border-radius:999px;padding:6px 10px}
.vdvl-weather .days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
@media (max-width:900px){ .vdvl-weather .days{grid-template-columns:repeat(3,1fr)} }
.vdvl-weather .day{padding:10px;border-radius:12px;border:1px solid rgba(148,163,184,.15);text-align:center}
.vdvl-weather .hi{color:#fde68a}
.vdvl-weather .lo{color:#93c5fd}
.vdvl-weather footer{max-width:1100px;margin:10px auto 50px;padding:0 16px;color:var(--muted)}
.vdvl-weather .whatif .sl{width:100%}

/* ====== Fix responsive khi nhúng shortcode ====== */
.vdvl-weather{
  width:100%;
  overflow-x:hidden;         /* chặn tràn ngang do shadow/canvas/legend */
}

.vdvl-weather .wrap,
.vdvl-weather main,
.vdvl-weather footer{
  max-width:100%;            /* không vượt quá bề rộng cột bài viết của theme */
  box-sizing:border-box;
}

/* Flex header: cho phép co lại đúng cách */
.vdvl-weather .wrap{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.vdvl-weather .searchbar{
  min-width:0;               /* quan trọng: cho input co lại, tránh đẩy tràn ngang */
  flex:1 1 240px;
}
.vdvl-weather .searchbar input{ min-width:0 }

/* Grid chính: tránh con vượt kích thước gây tràn */
.vdvl-weather main{
  display:grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);  /* thay vì 1.2fr .8fr thô */
  gap:14px;
}

/* Lưới ngày: auto-fill để tự xuống dòng gọn trên màn nhỏ/khung hẹp của theme */
.vdvl-weather .days{
  grid-template-columns: repeat(auto-fill, minmax(110px,1fr));
}

/* Canvas không gây tràn do inline-block */
.vdvl-weather canvas{
  display:block;
  max-width:100%;
}

/* Nếu theme áp dụng line-height, border… hãy khóa lại thẻ button/select */
.vdvl-weather .btn,
.vdvl-weather select.pill{
  white-space:nowrap;        /* không vỡ bố cục khi label dài */
}
/* ===== FIX CHỒNG LẤN/RESPONSIVE KHI NHÚNG SHORTCODE ===== */

/* Tổng thể */
.vdvl-weather{ width:100%; overflow-x:hidden; }

/* Grid chính: mobile-first -> 1 cột; chỉ lên 2 cột khi đủ rộng */
.vdvl-weather main{
  display:grid;
  grid-template-columns: 1fr;  /* mặc định 1 cột để không tràn */
  gap:14px;
}
@media (min-width: 1200px){     /* tăng ngưỡng, khung hẹp của theme sẽ không cố 2 cột */
  .vdvl-weather main{
    grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);
  }
}

/* RẤT QUAN TRỌNG: cho phép các panel co lại trong grid track */
.vdvl-weather main > *{ min-width:0; }
.vdvl-weather .panel{ min-width:0; }

/* Header/search bar không đẩy tràn */
.vdvl-weather .wrap{ display:flex; flex-wrap:wrap; gap:12px; }
.vdvl-weather .searchbar{ flex:1 1 240px; min-width:0; }
.vdvl-weather .searchbar input{ min-width:0; }

/* Lưới “Điều kiện hiện tại” tự chia cột theo bề rộng */
.vdvl-weather .grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}

/* Lưới 7 ngày co tự nhiên */
.vdvl-weather .days{
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

/* Canvas và nút không gây tràn */
.vdvl-weather canvas{ display:block; max-width:100%; height:280px }
.vdvl-weather .btn, .vdvl-weather select.pill{ white-space:nowrap; }