/* ============================================================
   base.css — Reset + Typography + Grid 12 cột + Blueprint bg
   Import sau tokens.css
   ============================================================ */

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ── Blueprint grid background ── */
.bg-blueprint {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(37, 99, 217, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 217, .07) 1px, transparent 1px),
    linear-gradient(rgba(37, 99, 217, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 217, .03) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}

/* ── Grid 12 cột ── */
.container {
  width: 100%;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gap-lg);
  padding-right: var(--gap-lg);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-md);
}

/* Column helpers */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Column offset helpers */
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }

/* ── Typography ── */
h1 {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.4px;
  color: var(--ink);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

p {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--muted);
}

strong {
  font-size: var(--fs-strong);
  font-weight: 500;
  color: var(--ink);
}

small, .text-sm {
  font-size: var(--fs-sm);
  color: var(--muted);
}

span.label {
  font-size: var(--fs-span);
  color: var(--muted);
}

/* ── Utility ── */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-muted   { color: var(--muted); }
.text-brand   { color: var(--brand); }
.text-cut     { color: var(--cut); }
.text-crease  { color: var(--crease); }

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap-sm  { gap: var(--gap-sm); }
.flex-gap-md  { gap: var(--gap-md); }
.flex-1       { flex: 1; }

.mt-sm  { margin-top: var(--gap-sm); }
.mt-md  { margin-top: var(--gap-md); }
.mt-lg  { margin-top: var(--gap-lg); }
.mt-xl  { margin-top: var(--gap-xl); }
.mb-sm  { margin-bottom: var(--gap-sm); }
.mb-md  { margin-bottom: var(--gap-md); }
.mb-lg  { margin-bottom: var(--gap-lg); }
.mb-xl  { margin-bottom: var(--gap-xl); }

.pt-xl  { padding-top: var(--gap-xl); }
.pb-xl  { padding-bottom: var(--gap-xl); }
.py-xl  { padding-top: var(--gap-xl); padding-bottom: var(--gap-xl); }
.py-2xl { padding-top: var(--gap-2xl); padding-bottom: var(--gap-2xl); }
.py-3xl { padding-top: var(--gap-3xl); padding-bottom: var(--gap-3xl); }

.w-full { width: 100%; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .container { padding-left: var(--gap-md); padding-right: var(--gap-md); }
  .hide-mobile { display: none !important; }
  .col-sm-12 { grid-column: span 12 !important; }
  .col-sm-6  { grid-column: span 6 !important; }
}

@media (max-width: 480px) {
  .col-xs-12 { grid-column: span 12 !important; }
}