/* ====== Layout: container, gutters, readable width, full-bleed ====== */
:root{
  /* Chiều rộng tối đa của vùng nội dung chuẩn */
  --container-max: 1200px;                 /* Bạn có thể đổi 1140–1360px */
  /* Lề hai bên trang (gutter) responsive */
  --page-gutter: clamp(16px, 4vw, 48px);
  /* Khoảng cách lưới mặc định */
  --grid-gap: clamp(16px, 2.5vw, 32px);
  /* Chiều rộng lý tưởng cho text (độ dài dòng 60–75 ký tự) */
  --readable: 65ch;
}

/* Vùng chứa chuẩn cho mọi section */
.container{
  width: min(100% - 2*var(--page-gutter), var(--container-max));
  margin-inline: auto;
}

/* Khu vực chỉ chứa nội dung đọc (bài viết, trang text) */
.readable{
  max-width: var(--readable);
  margin-inline: auto;
  padding-inline: 0;        /* đã được giới hạn bởi .container bao ngoài */
  line-height: 1.6;
}

/* Lưới tiện ích */
.grid{ display: grid; gap: var(--grid-gap); }

/* Section full-bleed (ảnh/hero tràn ngang), nhưng nội dung bên trong vẫn theo .container */
.full-bleed{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.full-bleed > .container{
  width: min(100% - 2*var(--page-gutter), var(--container-max));
  margin-inline: auto;
}

/* Ảnh & media co giãn đúng theo vùng chứa */
img, svg, video{ max-width:100%; height:auto; }

/* Khoảng cách đoạn văn mặc định dễ đọc */
p{ line-height:1.7; }

/* ====== WordPress block align helpers (nếu bạn dùng Gutenberg) ====== */
.alignwide{
  width: min(100% - 2*var(--page-gutter), calc(var(--container-max) + 200px));
  margin-inline: auto;
}
.alignfull{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Nếu header fixed, chừa khoảng top để nội dung không bị che (tùy chỉnh nếu cần) */
body.has-fixed-header{ padding-top: var(--header-h, 72px); }