/*
Theme Name: Truyen One Piece
Theme URI: https://truyen-one-piece.com/
Author: Antigravity One Piece Team
Author URI: https://truyen-one-piece.com/
Description: Theme WordPress chuyên trang đọc truyện tranh One Piece Đảo Hải Tặc - Tích hợp đầy đủ Manga Reader dọc mượt mà, hệ thống nhân vật One Piece, trận chiến kinh điển, bảng xếp hạng tiền truy nã Bounty Wanted poster, hệ thống bình chọn nhân vật mạnh nhất (Ajax Voting Real-time), Top vote tháng, Cốt truyện và Responsive 100% trên PC/Mobile.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: truyen-one-piece
Tags: one-piece, manga, comic-reader, dark-theme, custom-post-type, anime, voting-system
*/

/* Reset & Root Variables */
:root {
  --op-primary: #1c8bec;
  --op-primary-hover: #0b72cb;
  --op-secondary: #f30b0b;
  --op-secondary-hover: #d10808;
  --op-gold: #ffb800;
  --op-gold-dark: #d49700;
  --op-bg-dark: #0f131a;
  --op-bg-card: #171d27;
  --op-bg-card-alt: #1e2634;
  --op-border: #283344;
  --op-text-main: #e2e8f0;
  --op-text-muted: #94a3b8;
  --op-text-heading: #ffffff;
  --op-font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --op-font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --op-container-width: 1200px;
  --op-radius: 8px;
  --op-radius-lg: 12px;
  --op-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  --op-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
  --op-transition: all 0.25s ease-in-out;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--op-font-main);
  background-color: var(--op-bg-dark);
  color: var(--op-text-main);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a:hover {
  color: var(--op-secondary);
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--op-font-heading);
  color: var(--op-text-heading);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

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

/* Base utility classes */
.text-center { text-align: center; }
.text-gold { color: var(--op-gold) !important; }
.text-red { color: var(--op-secondary) !important; }
.text-blue { color: var(--op-primary) !important; }
.text-muted { color: var(--op-text-muted) !important; }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.grid { display: grid; }