/* =====================================================
   CSS RESET
===================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}


/* =====================================================
   ROOT TYPOGRAPHY & COLORS
===================================================== */
html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue",
               Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: #fff;
  color: #111;
  min-height: 100vh;
  overflow-x: auto; /* ✅ cho phép scroll ngang khi cần */
  line-height: 1.4;
}



/* =====================================================
   DEFAULT ELEMENT BEHAVIOR
===================================================== */

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

button,
input,
select,
textarea {
  font-family: inherit;
}


/* =====================================================
   LINK RESET (OPTIONAL SAFE DEFAULT)
===================================================== */
a {
  color: inherit;
  text-decoration: none;
}


/* =====================================================
   UTILITY BASICS (GLOBAL)
===================================================== */
.hidden {
  display: none !important;
}


/* =====================================================
   VIEW LAYOUT SYSTEM (GLOBAL)
   Dùng để quyết định cách các CARD được xếp trong 1 VIEW
===================================================== */

/* ===== 1. VIEW STACK (mặc định – 1 cột full width) ===== */
.view-stack {
  display: flex;
  flex-direction: column;
  gap: 16px; /* khoảng cách giữa các card */
}

/* bỏ margin dọc của card khi nằm trong layout system */
.view-stack .card,
.view-grid .card {
  margin: 0;
}


/* ===== 2. VIEW GRID (đa cột cho desktop) ===== */
.view-grid {
  display: grid;
  grid-template-columns: 1fr; /* mobile mặc định 1 cột */
  gap: 16px;
}

/* Tablet: 2 cột */
@media (min-width: 768px) {
  .view-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop nhỏ: 3 cột */
@media (min-width: 1200px) {
  .view-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop lớn: 4 cột (dashboard rất đẹp) */
@media (min-width: 1600px) {
  .view-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ===== 3. NARROW VIEW (form nhỏ, luôn như mobile) ===== */
/* bạn đã có .view-single-col, giữ nguyên, chỉ bổ sung đồng bộ gap */
.view-single-col {
  padding: 12px;
}

.view-single-col .card {
  margin: 0;
}


/* ===== 4. CARD BIẾN THỂ KHI DÙNG GRID ===== */

/* Card chiếm toàn hàng (vd: biểu đồ, bảng lớn) */
.card-span-2 { grid-column: span 2; }
.card-span-3 { grid-column: span 3; }
.card-span-4 { grid-column: span 4; }

/* Mobile luôn về 1 cột */
@media (max-width: 767px) {
  .card-span-2,
  .card-span-3,
  .card-span-4 {
    grid-column: span 1;
  }
}