@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
:root {
  /* 🎨 Color Palette */
  --color-primary: #971d03;   /* Đỏ trầm – chủ đạo */
  --color-sub: #186d51;
  --color-secondary: #be7d67; /* Xám nâu – phụ */
  --color-light: #fdfdfd;
  --color-dark: #111;

  /* 🖋 Typography */
  --font-heading: "Roboto Slab", serif; /* vibe Trung Hoa */
  --font-body: "Roboto Slab", serif;

  /* 🌐 Spacing */
  --container-width: 1200px;
  --section-padding: 50px;

  /* 🔗 Transition */
  --transition: all 0.3s ease;

  --font-size-body: 16px;
  --font-size-heading: 29px;
}
/* Reset nhẹ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: var(--font-body);
  background: var(--color-light);
  color: var(--color-dark);
  line-height: 1.6;
  font-size: 16px;
  margin-top: 86px !important;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-weight: 700;
}
button, select, input{
  font-family: var(--font-heading);
}
a {
  text-decoration: none;
  transition: var(--transition);
}
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}
section {
  padding: var(--section-padding) 0;
}
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 4px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-family: var(--font-body);
  transition: var(--transition);
}
.btn:hover {
  opacity: 0.8;
}
.btn-outline {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}