/* ==========================================================================
   samo-legacy.css — ปรับหน้าเก่าที่ยังใช้ Bootstrap 4 + ธีมเดิม (style.css)
   ให้สี ฟอนต์ และองค์ประกอบหลักเข้ากับดีไซน์ใหม่ (samo-site.css)
   โหลดผ่าน web-header.php (ต่อท้ายไฟล์ CSS เดิม จึงชนะกฎที่ความเจาะจงเท่ากัน)
   ========================================================================== */

/* ---------- พื้นฐาน ---------- */
html, body, button, input, select, textarea, .form-control {
  font-family: var(--font-body);
}
body {
  background: #fff;
  color: var(--text-main);
  line-height: 1.65;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  color: var(--text-main);
  letter-spacing: -0.01em;
}
a { color: var(--accent-ink); }
a:hover { color: var(--accent-deep); }

/* แถบเมนูลอย (position: fixed) — กันเนื้อหาไม่ให้อยู่ใต้แถบ */
.site-header-spacer { height: 104px; }
@media (max-width: 960px) { .site-header-spacer { height: 84px; } }

/* ไม่ต้องรอแอนิเมชัน / หน้าจอโหลด */
.preloader { display: none !important; }
.wow { visibility: visible !important; animation: none !important; }

/* ---------- หัวหน้า (page-banner เดิม) → แบบหัวหน้าย่อยของดีไซน์ใหม่ ---------- */
.page-banner {
  position: relative;
  overflow: hidden;
  text-align: left !important;
  padding: 3rem 0 3.25rem !important;
  background: linear-gradient(180deg, var(--accent-light) 0%, #fff 100%) !important;
  border-bottom: 1px solid var(--border-subtle);
}
.page-banner::before { display: none; }
.page-banner::after { display: none; }
.page-banner .triangle-shape,
.page-banner .half-circle-shape { display: none; }
.page-banner .banner-inner { display: flex; flex-direction: column-reverse; align-items: flex-start; }
.page-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}
.breadcrumb {
  justify-content: flex-start;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a:not(:hover) { color: var(--accent-ink); }
.breadcrumb .breadcrumb-item.active { color: var(--accent-ink); }
.breadcrumb .breadcrumb-item::before { content: '#'; }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: '/'; font-family: inherit; margin: 0 0.5rem; }

/* หัวข้อส่วน */
.section-title h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.section-title h2 span:after { display: none; }
.section-title h2 span { color: var(--text-main); }

/* ---------- ปุ่ม ---------- */
.theme-btn, a.theme-btn, .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--accent-ink);
  background: var(--accent-ink);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: none;
  box-shadow: 0 4px 15px rgba(241, 90, 34, 0.3);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.theme-btn:hover, .theme-btn:focus, a.theme-btn:hover, a.theme-btn:focus,
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):active {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
  transform: translateY(-1px);
}
.theme-btn.style-two, a.theme-btn.style-two, .btn-outline-primary, .btn-secondary, .btn-light {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  box-shadow: none;
  border-radius: var(--radius-full);
}
.theme-btn.style-two:hover, a.theme-btn.style-two:hover, .btn-outline-primary:hover, .btn-secondary:hover, .btn-light:hover {
  background: var(--accent-light);
  border-color: var(--border-glow);
  color: var(--accent-ink);
}
.btn { border-radius: var(--radius-full); font-weight: 600; }
.btn-success { background: #1e7a45; border-color: #1e7a45; }
.btn-danger { background: #b4321f; border-color: #b4321f; }

/* ---------- ฟอร์ม ---------- */
.form-control, .custom-select {
  border-radius: var(--radius-sm);
  border: 1px solid #e3d3c8;
  background-color: var(--bg-surface);
  min-height: 46px;
  color: var(--text-main);
}
textarea.form-control { min-height: 0; }
.form-control:focus, .custom-select:focus {
  background-color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(241, 90, 34, 0.15);
}
label { font-weight: 500; }

/* ---------- การ์ด / ตาราง / แจ้งเตือน ---------- */
.card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-header { background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); }
.table { color: var(--text-main); }
.table thead th { border-bottom: 1px solid var(--border-subtle); color: var(--text-muted); font-weight: 600; font-size: 0.92rem; }
.table td, .table th { border-top-color: var(--border-subtle); vertical-align: middle; }
.alert { border-radius: var(--radius-md); }
.badge { border-radius: var(--radius-full); font-weight: 600; padding: 0.35em 0.75em; }

/* ปุ่มกลับขึ้นบน (ธีมเดิม) */
.scroll-top { background: var(--accent-ink) !important; border-radius: 50% !important; animation: none !important; }

/* พื้นส่วนสลับของธีมเดิม */
.bg-lighter { background-color: var(--bg-surface) !important; }