/*
Theme Name: Thành Nguyên Pro - Xe Nâng Xe Cẩu Hải Phòng
Theme URI: https://thanhnguyenjsc.com
Author: Thành Nguyên UI/UX Development Team
Author URI: https://thanhnguyenjsc.com
Description: Theme WordPress chuẩn SEO thế hệ mới cho Công ty Cổ phần Thương mại Thành Nguyên. Thiết kế chuyên sâu ngành cho thuê xe nâng, xe cẩu, xe nâng người và sửa chữa xe nâng. Tông màu chủ đạo Đỏ công nghiệp (#C8102E) & Vàng an toàn (#FFB800). Tối ưu tốc độ Core Web Vitals (95+), Schema.org đầy đủ, tương thích 100% URL hiện có, bảo toàn toàn bộ thứ hạng SEO.
Version: 2.0.0
Tested up to: 6.7
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: thanhnguyen-theme
*/

/* Core Reset & Typography */
:root {
  --color-primary: #c8102e;        /* Đỏ thương hiệu Thành Nguyên */
  --color-primary-dark: #9e0b23;   /* Đỏ đậm */
  --color-primary-light: #ff4d63;  /* Đỏ nhạt */
  --color-secondary: #ffb800;      /* Vàng an toàn công nghiệp */
  --color-secondary-hover: #e0a300;/* Vàng đậm khi hover */
  --color-accent: #ff9800;
  --color-dark: #111827;           /* Xám than công nghiệp */
  --color-dark-light: #1f2937;
  --color-gray-dark: #374151;
  --color-gray-medium: #6b7280;
  --color-gray-light: #e5e7eb;
  --color-bg-light: #f8fafc;
  --color-white: #ffffff;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --container-max-width: 1240px;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-dark);
  background-color: var(--color-bg-light);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

a:hover, a:focus {
  color: var(--color-primary-dark);
}

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

ul, ol {
  list-style-position: inside;
}

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}