/*
Theme Name:  MarketingPro Theme
Theme URI:   https://marketingprovn.com
Author:      MarketingPro VN
Author URI:  https://marketingprovn.com
Description: Theme WordPress chuyên biệt cho trang tin tức Marketing Online, Social Media & Thủ Thuật Tài Khoản Facebook, Zalo tại Việt Nam. Thiết kế dạng báo chí, responsive mobile/PC, SEO-ready, tích hợp sẵn Tailwind CSS.
Version:     1.0.0
Requires at least: 6.0
Tested up to:      6.5
Requires PHP:      7.4
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marketingpro
Tags:        news, marketing, blog, two-columns, right-sidebar, custom-menu, featured-images, custom-logo, responsive-layout
*/

/* ================================================================
   BASE RESET
================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: #f1f5f9; }
h1, h2, h3, h4 { font-family: 'Merriweather', Georgia, serif; }

/* ================================================================
   BREAKING NEWS TICKER
================================================================ */
.ticker-track {
  display: flex;
  white-space: nowrap;
  animation: ticker 40s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ================================================================
   NAV ACTIVE / HOVER INDICATOR
================================================================ */
.nav-item { position: relative; transition: color .2s; }
.nav-item::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 3px;
  background: #dc2626;
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform .25s;
}
.nav-item:hover::after,
.nav-item.active::after { transform: scaleX(1); }
.nav-item.active        { color: #dc2626; font-weight: 700; }

/* ================================================================
   ARTICLE CARD LIFT ON HOVER
================================================================ */
.article-card {
  transition: transform .22s ease, box-shadow .22s ease;
}
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}

/* ================================================================
   IMAGE ZOOM ON HOVER
================================================================ */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .4s ease; }
.img-zoom:hover img { transform: scale(1.06); }

/* ================================================================
   CTA BUTTONS — FACEBOOK & ZALO GRADIENTS
================================================================ */
.btn-fb {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  box-shadow: 0 4px 15px rgba(30,64,175,.35);
  transition: transform .2s, box-shadow .2s;
}
.btn-fb:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(30,64,175,.5);
}
.btn-zalo {
  background: linear-gradient(135deg, #0068ff 0%, #00b4d8 100%);
  box-shadow: 0 4px 15px rgba(0,104,255,.35);
  transition: transform .2s, box-shadow .2s;
}
.btn-zalo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,104,255,.5);
}

/* ================================================================
   SIDEBAR STICKY (DESKTOP ≥ 1024px)
================================================================ */
@media (min-width: 1024px) {
  .sidebar-sticky { position: sticky; top: 76px; }
}

/* ================================================================
   SHIMMER BADGE (HOT / TRENDING)
================================================================ */
.badge-hot { position: relative; overflow: hidden; }
.badge-hot::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: shine 2.5s infinite;
}
@keyframes shine {
  0%       { left: -100%; }
  60%, 100%{ left: 160%;  }
}

/* ================================================================
   BACK-TO-TOP BUTTON
================================================================ */
#btt { transition: opacity .3s, transform .3s; }
#btt.hidden-btt { opacity: 0; pointer-events: none; transform: translateY(8px); }

/* ================================================================
   CATEGORY FILTER PILL ACTIVE STATE
================================================================ */
.cat-pill { transition: background .2s, color .2s; }
.cat-pill.active { background: #1e3a8a; color: #fff; }

/* ================================================================
   LINE-CLAMP (TEXT TRUNCATION)
================================================================ */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================================================================
   MOBILE MENU SLIDE ANIMATION
================================================================ */
#mobile-nav { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
#mobile-nav.open { max-height: 500px; }

/* ================================================================
   WORDPRESS CORE — alignment, caption, skip-link
================================================================ */
.wp-caption            { max-width: 100%; }
.wp-caption img        { width: 100%; height: auto; display: block; }
.wp-caption-text       { font-size: 0.8rem; color: #6b7280; text-align: center; margin-top: 0.25rem; }
.alignleft             { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright            { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter           { display: block; margin-left: auto; margin-right: auto; }
.wp-block-image figure { margin: 0; }
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.screen-reader-text:focus {
  clip: auto;
  width: auto; height: auto;
  background: #fff;
  padding: .5rem 1rem;
  z-index: 9999;
  top: 0; left: 0;
}