/*
Theme Name: soicaupro.pro
Author: Admin
Version: 1.6 (Fix căn giữa ảnh tuyệt đối + Tối ưu hiển thị Gutenberg & Tailwind)
*/

/* ============================================================
   ⚙️ BIẾN MÀU & KIỂU CHUNG (Hoạt động cùng Tailwind)
   ============================================================ */
:root {
  --primary-color: #007AFF;
  --primary-color-rgb: 0, 122, 255;
  --accent-color: #5AC8FA;
  --text-color: #1C1C1E;
  --bg-light: #F2F2F7;

  /* Hiệu ứng Glass */
  --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-glass: 0 4px 15px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --glass-background: rgba(255, 255, 255, 0.6);
  --glass-border: 1px solid rgba(255, 255, 255, 0.9);
  --blur-intensity: 15px;
}

/* Thêm thuộc tính này để cuộn mượt */
html {
  scroll-behavior: smooth;
}

/* ============================================================
   HEADER STYLES (Font & Rainbow)
   ============================================================ */
.font-orbitron {
  font-family: 'Orbitron', sans-serif;
}

.header-rainbow-text {
  background: linear-gradient(
    90deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #4b0082,
    #ee82ee
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow-scroll 5s linear infinite;
}

@keyframes rainbow-scroll {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ============================================================
   MENU & HEADER HIỆU ỨNG
   ============================================================ */
.subnav {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  max-height: 100px;
  overflow: hidden;
  opacity: 1;
  transition: max-height 0.35s ease-in-out, opacity 0.25s ease-in-out,
    padding 0.35s ease-in-out, border-top-width 0.35s ease-in-out;
}

.subnav-hidden {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  pointer-events: none;
}

/* Co rút Header khi cuộn */
.header-shrink {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.header-shrink a.logo {
  font-size: 1.75rem !important;
}

nav a {
  font-size: clamp(14px, 1.8vw, 18px);
}

/* ============================================================
   ANIMATIONS TỪ INDEX.PHP
   ============================================================ */

/* Chữ chạy banner */
@keyframes moveText {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.animate-moveText {
  animation: moveText 15s linear infinite;
}

/* Nền chuyển động banner */
@keyframes bgMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.animate-bgMove {
  background-size: 200% 200%;
  animation: bgMove 6s ease-in-out infinite;
}

/* Hiệu ứng chữ cầu vồng */
.banner-rainbow-text {
  background: linear-gradient(
    to right,
    #ff0000,
    #ff9900,
    #ffff00,
    #33cc33,
    #0066ff,
    #cc33ff,
    #ff0000
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Chữ cuộn ngang Footer */
@keyframes scrollText {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.animate-scrollText {
  animation: scrollText 35s linear infinite;
}
.pl-full {
  padding-left: 100%;
}

/* ============================================================
   CHATBOT
   ============================================================ */
#chatbot-wrapper {
  z-index: 100;
}

/* ============================================================
   🖼️ NỘI DUNG BÀI VIẾT (ENTRY CONTENT)
   ============================================================ */

/* ✅ Canh giữa ảnh và chú thích tuyệt đối */
.wp-block-image,
.entry-content figure.aligncenter,
figure.aligncenter {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100%;
}

/* Ảnh */
.entry-content figure.aligncenter img,
.wp-block-image figure.aligncenter img,
figure.aligncenter img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Zoom khi hover */
figure.aligncenter img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* ✅ Chú thích ảnh (figcaption) */
figure.aligncenter figcaption,
.wp-block-image figcaption {
  text-align: center !important;
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #555;
  font-style: italic;
  line-height: 1.5;
  opacity: 0.95;
  width: 100%;
}

/* Tương thích Classic Editor */
.entry-content img.aligncenter {
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
  height: auto;
  max-width: 100%;
  border-radius: var(--radius-sm);
}

/* Liên kết trong bài viết */
.entry-content a,
.post-content a,
.wp-block-post-content a {
  color: var(--primary-color) !important;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.entry-content a:hover,
.post-content a:hover,
.wp-block-post-content a:hover {
  color: #0056b3 !important;
  text-decoration: underline;
}