/* ==========================================================================
   FILE: css/base.css
   MÔ TẢ: Reset CSS, chuẩn hóa phần tử cơ bản, hệ thống lưới, nút bấm (tối thiểu
          44px), họa tiết trang trí muỗng nĩa và hỗ trợ khả năng tiếp cận (a11y).
          Đã tối ưu để không bị Windows Performance Mode chặn hiệu ứng trên PC.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-height);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: opacity 0.25s ease;
}

/* Hiệu ứng fade mượt khi chuyển đổi ngôn ngữ */
body.lang-switching {
  opacity: 0.4;
}

/* --- TYPOGRAPHY CƠ BẢN --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p {
  margin-bottom: var(--space-4);
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button {
  cursor: pointer;
}

/* Focus rõ ràng cho bàn phím (Accessibility) */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* --- BỐ CỤC CONTAINER & SECTION --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--section-py);
  position: relative;
}

.section--warm {
  background-color: var(--color-bg-warm);
}

.section--primary {
  background-color: var(--color-primary);
  color: var(--color-text-light);
}

/* --- TIÊU ĐỀ PHÂN VÙNG & HOẠ TIẾT MUỖNG NĨA TỪ LOGO --- */
.section-header {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
  text-align: center;
}

.section-header--left {
  margin-inline: 0;
  text-align: left;
}

/* Nhãn phụ phía trên tiêu đề (Nền vàng kem, chữ nâu đậm đảm bảo tương phản) */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 1rem;
  border-radius: var(--radius-full);
  background-color: var(--color-accent-soft);
  color: var(--color-primary-dark);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
  border: 1px solid rgba(245, 190, 26, 0.45);
}

.section-title {
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.section--primary .section-title {
  color: #FFFFFF;
}

.section-desc {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.section--primary .section-desc {
  color: rgba(255, 251, 242, 0.86);
}

/* Đường kẻ vàng mảnh kèm biểu tượng muỗng nĩa bắt chéo lấy cảm hứng từ logo */
.brand-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-block: var(--space-4);
}

.section-header--left .brand-divider {
  justify-content: flex-start;
}

.brand-divider::before,
.brand-divider::after {
  content: "";
  height: 2px;
  width: 48px;
  background: linear-gradient(90deg, transparent, var(--color-accent));
  border-radius: 2px;
}

.brand-divider::after {
  background: linear-gradient(90deg, var(--color-accent), transparent);
}

.brand-divider__icon {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- HỆ THỐNG NÚT BẤM (TỐI THIỂU 44PX CHO MOBILE) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 46px;
  padding: 0.75rem 1.65rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1.2;
  transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  user-select: none;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

/* Nút chính: Nền nâu đỏ thương hiệu - Chữ trắng (Tương phản 7.4:1) */
.btn-primary {
  background-color: var(--color-primary);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Nút điểm nhấn: Nền vàng nghệ - Chữ nâu đen đậm #2E1A10 (Tương phản 9.2:1) */
.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-text);
  font-weight: 700;
  box-shadow: var(--shadow-accent);
}

.btn-accent:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-2px);
}

/* Nút viền trên nền sáng */
.btn-outline {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  background-color: transparent;
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* Nút viền trên nền tối/hero */
.btn-outline-light {
  border: 2px solid var(--color-accent);
  color: #FFFFFF;
  background-color: rgba(46, 26, 16, 0.35);
  backdrop-filter: blur(6px);
}

.btn-outline-light:hover {
  background-color: var(--color-accent);
  color: var(--color-text);
  transform: translateY(-2px);
}

.btn-sm {
  min-height: 40px;
  padding: 0.5rem 1.15rem;
  font-size: var(--text-xs);
}

/* --- TIỆN ÍCH BADGE / TAG --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

.badge--accent {
  background-color: var(--color-accent-soft);
  color: var(--color-text);
  border: 1px solid var(--color-accent);
}

.badge--primary {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

.badge--sample {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* --- TIỆN ÍCH BIỂU MẪU (FORM INPUTS) --- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.form-label .required {
  color: var(--color-danger);
  margin-left: 2px;
}

.form-control {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border-strong);
  background-color: #FFFFFF;
  color: var(--color-text);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control::placeholder {
  color: #9C897E;
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(139, 58, 28, 0.14);
}

.form-control.is-invalid {
  border-color: var(--color-danger);
  background-color: #FFF8F8;
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-danger);
  font-weight: 500;
  display: none;
}

.form-control.is-invalid + .form-error {
  display: block;
}

/* --- TIỆN ÍCH LƯỚI & HIỂN THỊ --- */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-2 { grid-template-columns: repeat(1, 1fr); }
.grid-3 { grid-template-columns: repeat(1, 1fr); }
.grid-4 { grid-template-columns: repeat(1, 1fr); }

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}