/* ============================================================
   base.css — Design tokens, reset & typography
   Tinh chỉnh theo phong cách tatlerasia.com:
   - Nền trắng, chữ gần đen, rất nhiều khoảng trắng
   - Tiêu đề serif (Playfair Display), nội dung sans (Inter)
   - Thang cỡ chữ rõ ràng, nhãn in hoa giãn chữ
   Nạp ĐẦU TIÊN.
   ============================================================ */

:root{
  /* --- Màu --- */
  --black:#161616;      /* chữ chính */
  --ink:#000;           /* nhấn đậm */
  --white:#fff;
  --gray:#6b6b6b;       /* chữ phụ / meta */
  --gray-light:#9a9a9a;
  --line:#e3e3e3;       /* đường kẻ nhạt */
  --bg-muted:#f4f3f1;   /* nền vùng nhấn / footer */

  /* --- Kích thước & khoảng cách --- */
  --maxw:1280px;        /* bề rộng nội dung tối đa */
  --pad:24px;           /* padding ngang container */
  --gap:28px;           /* khoảng cách lưới */
  --section-gap:60px;   /* khoảng cách giữa các khối lớn */

  /* --- Font --- */
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{
  font-family:var(--sans);
  color:var(--black);
  background:var(--white);
  line-height:1.6;
  font-size:1rem;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Tiêu đề: serif, hơi siết dòng & chữ */
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.18;letter-spacing:-.01em}

/* Khung giới hạn bề rộng, căn giữa */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* Nhãn nhỏ in hoa (tag chuyên mục, eyebrow) */
.eyebrow{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray);font-weight:600;
}

/* Nút nhấn chính */
.btn{
  display:inline-block;padding:13px 26px;background:var(--ink);color:var(--white);
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;
}
.btn:hover{opacity:.85}