/**
 * Design System Override - Áp dụng design tokens từ soicau247s.org
 * File này override các style hiện tại với design system mới
 */

/* ============================================
   GLOBAL OVERRIDES
   ============================================ */

body {
  font-family: var(--font-family-primary);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  line-height: var(--line-height-normal);
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.header {
  background-color: var(--color-bg-primary);
  border-bottom: var(--border-width) var(--border-style) var(--color-border);
}

.header-logo-img {
  max-height: 59px;
  width: auto;
}

.header-time {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

/* Navigation Links */
.nav-link,
.nav-bottom-item {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-bottom-item:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}

.nav-link.active {
  color: var(--color-brand-blue);
  font-weight: var(--font-weight-bold);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, .h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-lg);
}

h2, .h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
}

h3, .h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}

h4, .h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

h5, .h5 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-relaxed);
}

h6, .h6 {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}

p, .body-text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}

.small-text,
.caption {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
}

/* ============================================
   BUTTONS - Áp dụng design tokens
   ============================================ */

.btn,
button {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  border-radius: var(--border-radius-sm);
  padding: var(--button-primary-padding);
  transition: all var(--transition-base);
  border: var(--border-width) var(--border-style) transparent;
  cursor: pointer;
}

/* Primary Button (Red) */
.btn-primary,
.btn-red {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-color);
  border-color: var(--button-primary-bg);
}

.btn-primary:hover,
.btn-red:hover {
  background-color: var(--button-primary-hover-bg);
  color: var(--button-primary-hover-color);
  border: var(--button-primary-hover-border);
  box-shadow: var(--shadow-hover);
}

.btn-primary:active,
.btn-red:active {
  background-color: var(--button-primary-active-bg);
  color: var(--button-primary-active-color);
  box-shadow: var(--shadow-lg);
}

.btn-primary:focus,
.btn-red:focus {
  outline: 0;
  box-shadow: var(--shadow-focus);
}

/* Danger Button */
.btn-danger {
  background-color: var(--button-danger-bg);
  color: var(--button-danger-color);
  padding: var(--button-danger-padding);
  border-color: var(--button-danger-bg);
}

.btn-danger:hover {
  opacity: 0.9;
  box-shadow: var(--shadow-md);
}

/* Transparent/Outline Button */
.btn-outline,
.btn-transparent {
  background-color: var(--button-transparent-bg);
  color: var(--button-transparent-color);
  border: var(--button-transparent-border);
}

.btn-outline:hover,
.btn-transparent:hover {
  opacity: var(--button-transparent-hover-opacity);
}

.btn-outline:active,
.btn-transparent:active {
  background-color: var(--button-transparent-active-bg);
  color: var(--button-transparent-active-color);
  box-shadow: var(--shadow-lg);
}

/* ============================================
   LINKS
   ============================================ */

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

a:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}

a:active {
  color: var(--color-link-active);
}

/* Link variants */
a.text-dark {
  color: var(--color-text-primary);
}

a.text-dark:hover {
  color: var(--color-link-hover);
}

a.text-white {
  color: var(--color-white);
}

a.text-white:hover {
  color: var(--color-link-hover);
}

/* Color red links (brand specific) */
a.color_red,
.color_red {
  color: var(--color-brand-red);
}

a.color_red:hover {
  color: var(--color-brand-red-dark);
}

/* ============================================
   TABLES
   ============================================ */

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: var(--border-width) var(--border-style) var(--color-border);
  padding: var(--spacing-md);
  font-size: var(--font-size-body);
}

th {
  background-color: var(--color-bg-light);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

td {
  color: var(--color-text-primary);
}

/* Table with brand colors */
table .xs_prize1,
table .color_red {
  color: var(--color-brand-red);
  font-weight: var(--font-weight-bold);
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border: var(--border-width) var(--border-style) var(--color-border-light);
  border-radius: var(--border-radius-sm);
  padding: var(--button-danger-padding);
  transition: all var(--transition-base);
}

input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--color-primary);
}

/* ============================================
   CARDS & CONTAINERS
   ============================================ */

.card,
.box,
.container-box {
  background-color: var(--color-bg-primary);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

/* ============================================
   MODALS
   ============================================ */

.modal-header {
  background-color: var(--color-light);
  border-bottom: var(--border-width) var(--border-style) var(--color-border);
  padding: var(--spacing-md) var(--spacing-lg);
}

.modal-body {
  padding: var(--spacing-lg);
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
  padding: var(--spacing-lg) 0;
  border-top: var(--border-width) var(--border-style) var(--color-border-dark);
}

.footer a {
  color: var(--color-text-light);
}

.footer a:hover {
  color: var(--color-link-hover);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Spacing utilities */
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }

.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }

/* Border utilities */
.border { border: var(--border-width) var(--border-style) var(--color-border); }
.border-top { border-top: var(--border-width) var(--border-style) var(--color-border); }
.border-bottom { border-bottom: var(--border-width) var(--border-style) var(--color-border); }

/* Background utilities */
.bg-white { background-color: var(--color-white); }
.bg-light { background-color: var(--color-bg-light); }
.bg-dark { background-color: var(--color-bg-dark); }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (max-width: 1399px) {
  /* Adjustments for large screens */
}

@media (max-width: 1200px) {
  /* Adjustments for desktop */
}

@media (max-width: 992px) {
  /* Adjustments for tablet */
  h1, .h1 { font-size: var(--font-size-h2); }
  h2, .h2 { font-size: var(--font-size-h3); }
}

@media (max-width: 768px) {
  /* Adjustments for mobile */
  .header-logo-img {
    max-height: 48px;
  }
  
  .btn {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-body-small);
  }
}

@media (max-width: 576px) {
  /* Adjustments for small mobile */
  h1, .h1 { font-size: var(--font-size-h3); }
  h2, .h2 { font-size: var(--font-size-h4); }
  h3, .h3 { font-size: var(--font-size-h5); }
}

@media (max-width: 480px) {
  /* Adjustments for extra small mobile */
}