/*
Theme Name:  EcomPro – Vận Hành Sàn TMĐT
Theme URI:   https://dev.com.vn
Author:      dev.com.vn
Author URI:  https://dev.com.vn
Description: Theme chuyên dụng cho dịch vụ Vận Hành Sàn TMĐT. Dùng kèm plugin EcomPro. Màu cam Shopee #ee4d2d, thiết kế theo trang mẫu vanhanhsan.htm
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License:     GPL v2 or later
Text Domain: ecompro
*/

/* ─── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════════════════
   CSS VARIABLES – Cam TMĐT
═══════════════════════════════════════════════════════════ */
:root {
  --o:      #ee4d2d;
  --o2:     #ff6633;
  --o3:     #ff7849;
  --o-l:    #fff3f0;
  --o-pale: #fffaf9;
  --o-d:    #cc3300;
  --amber:  #f59e0b;
  --green:  #22c55e;
  --text:   #1a1a1a;
  --text2:  #333;
  --muted:  #666;
  --border: #f0ede9;
  --bg:     #fafafa;
  --white:  #ffffff;
  --dark:   #1a0800;
  --grad:   linear-gradient(135deg,#ee4d2d 0%,#ff9500 100%);
  --grad2:  linear-gradient(135deg,#ff6633 0%,#ffb347 100%);
  --sh:     0 2px 12px rgba(238,77,45,.08);
  --sh-md:  0 6px 28px rgba(238,77,45,.12);
  --sh-lg:  0 16px 56px rgba(238,77,45,.16);
  --sh-o:   0 6px 24px rgba(238,77,45,.28);
  --r:      10px;
  --r-lg:   16px;
  --r-xl:   22px;
}

/* ─── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--white); color: var(--text);
  font-size: 15px; line-height: 1.6; overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: #ffd5cc; color: #7c1200; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--o); border-radius: 3px; }

/* ─── Layout ───────────────────────────────────────────────── */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-content { flex: 1; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.sec      { padding: 80px 0; background: var(--white); }
.sec-warm { padding: 80px 0; background: #fff9f7; }
.sec-dark { padding: 80px 0; background: var(--dark); }
@media(max-width:767px){ .sec,.sec-warm,.sec-dark{ padding: 52px 0; } }

/* ─── Typography ───────────────────────────────────────────── */
.grad-text { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.h2 { font-size: clamp(1.8rem,3.2vw,2.6rem); font-weight: 900; line-height: 1.1; letter-spacing: -.8px; margin-bottom: 10px; }
.h2-w { font-size: clamp(1.8rem,3.2vw,2.6rem); font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -.8px; margin-bottom: 10px; }
.lead { font-size: .95rem; color: var(--muted); line-height: 1.78; }
.lead-w { font-size: .95rem; color: rgba(255,255,255,.5); line-height: 1.78; }
.sh { text-align: center; margin-bottom: 48px; }

/* ─── Eyebrows ─────────────────────────────────────────────── */
.ew { display:inline-flex;align-items:center;gap:6px;padding:4px 13px;background:var(--o-l);color:var(--o);border:1px solid #ffc4b8;border-radius:20px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px; }
.ew-g { display:inline-flex;align-items:center;gap:6px;padding:4px 13px;background:#f0fff4;color:#16a34a;border:1px solid #bbf7d0;border-radius:20px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px; }
.ew-d { display:inline-flex;align-items:center;gap:6px;padding:4px 13px;background:rgba(238,77,45,.14);color:#ff9500;border:1px solid rgba(238,77,45,.24);border-radius:20px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px; }

/* ─── Buttons ──────────────────────────────────────────────── */
.btn-o    { display:inline-flex;align-items:center;gap:7px;padding:13px 26px;background:var(--grad);color:#fff;border:none;border-radius:40px;font-weight:700;font-size:.9rem;cursor:pointer;font-family:inherit;box-shadow:var(--sh-o);transition:all .25s; }
.btn-o:hover { transform:translateY(-2px);box-shadow:0 12px 32px rgba(238,77,45,.32);color:#fff; }
.btn-line { display:inline-flex;align-items:center;gap:7px;padding:12px 22px;background:#fff;color:var(--text2);border:1.5px solid var(--border);border-radius:40px;font-weight:600;font-size:.88rem;cursor:pointer;font-family:inherit;transition:all .22s; }
.btn-line:hover { border-color:var(--o);color:var(--o);background:var(--o-l); }
.btn-ghost { display:inline-flex;align-items:center;gap:7px;padding:12px 22px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.9);border:1.5px solid rgba(255,255,255,.18);border-radius:40px;font-weight:600;font-size:.88rem;cursor:pointer;font-family:inherit;transition:all .22s; }
.btn-ghost:hover { background:rgba(255,255,255,.18); }

/* ─── Topbar ───────────────────────────────────────────────── */
.site-topbar { background: var(--o); padding: 7px 0; }
.topbar-inner { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px; }
.topbar-left,.topbar-right { display:flex;align-items:center;gap:16px; }
.topbar-item { display:flex;align-items:center;gap:5px;font-size:.74rem;color:rgba(255,255,255,.88); }
.topbar-badge { background:rgba(255,255,255,.18);color:#fff;padding:2px 10px;border-radius:4px;font-size:.68rem;font-weight:800;border:1px solid rgba(255,255,255,.28); }
.topbar-link { font-size:.74rem;font-weight:700;color:rgba(255,255,255,.88);transition:color .18s; }
.topbar-link:hover { color:#fff; }
@media(max-width:767px){ .site-topbar { display:none; } }

/* ─── Header ───────────────────────────────────────────────── */
.site-header { background:#fff;border-bottom:2px solid #fff0ec;position:sticky;top:0;z-index:1050;transition:box-shadow .3s; }
.site-header.scrolled { box-shadow:0 4px 20px rgba(238,77,45,.1); }
.header-inner { display:flex;align-items:center;height:66px; }
.site-brand { display:flex;align-items:center;gap:10px;margin-right:24px;flex-shrink:0;text-decoration:none; }
.brand-ico { width:38px;height:38px;background:var(--grad);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.95rem;box-shadow:var(--sh-o); }
.brand-name { font-size:1.1rem;font-weight:900;color:var(--text);letter-spacing:-.5px;line-height:1.1; }
.brand-sub  { font-size:.58rem;color:var(--muted);font-weight:500; }

/* Nav */
.site-nav { display:flex;align-items:center;flex:1; }
.site-nav ul { list-style:none;margin:0;padding:0;display:flex;align-items:center; }
.site-nav ul li { position:relative; }
.site-nav ul li a { display:flex;align-items:center;gap:4px;padding:0 13px;height:66px;font-size:.83rem;font-weight:600;color:var(--text2);white-space:nowrap;border-bottom:3px solid transparent;transition:all .18s; }
.site-nav ul li a:hover, .site-nav ul li.current-menu-item > a { color:var(--o);border-bottom-color:var(--o); }
.site-nav ul li ul { position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #ffe8e3;border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:8px;min-width:200px;opacity:0;pointer-events:none;transition:all .22s;transform:translateY(8px);z-index:2000; }
.site-nav ul li:hover > ul { opacity:1;pointer-events:all;transform:translateY(0); }
.site-nav ul li ul li a { height:auto;padding:9px 12px;border-bottom:none;border-radius:8px; }
.site-nav ul li ul li a:hover { background:#fff5f3; }

.header-right { display:flex;align-items:center;gap:8px;margin-left:auto; }
.header-phone { display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--o-l);color:var(--o);border:1.5px solid #ffc4b8;border-radius:40px;font-size:.78rem;font-weight:700;transition:all .2s;text-decoration:none; }
.header-phone:hover { background:var(--o);color:#fff;border-color:var(--o); }
.header-cta { padding:9px 20px;background:var(--grad);color:#fff;border:none;border-radius:40px;font-size:.82rem;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:var(--sh-o);transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;gap:6px; }
.header-cta:hover { opacity:.88;transform:translateY(-1px);color:#fff; }
.header-hamburger { display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--text2);font-size:1.2rem;margin-left:auto; }
@media(max-width:991px){ .site-nav{display:none;} .header-hamburger{display:flex;} .header-right .header-cta{display:none;} }

/* ─── Mobile Menu ──────────────────────────────────────────── */
.mobile-menu { display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999; }
.mobile-menu.open { display:block; }
.mobile-menu__inner { position:absolute;top:0;right:0;bottom:0;width:280px;background:#fff;overflow-y:auto;padding:20px; }
.mobile-menu__close { display:flex;justify-content:flex-end;margin-bottom:16px; }
.mobile-menu__close button { background:var(--bg);border:none;border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:1rem; }
.mobile-menu ul { list-style:none;margin:0;padding:0; }
.mobile-menu ul li a { display:block;padding:12px 14px;font-weight:600;font-size:.92rem;color:var(--text2);border-radius:8px;transition:all .15s; }
.mobile-menu ul li a:hover { background:var(--o-l);color:var(--o); }

/* ─── Mobile Bottom Nav ────────────────────────────────────── */
.mobile-bottom-nav { display:none;position:fixed;bottom:0;left:0;right:0;z-index:1100;background:#fff;border-top:1px solid var(--border);box-shadow:0 -4px 20px rgba(0,0,0,.06); }
@media(max-width:767px){ .mobile-bottom-nav{display:flex;} body{padding-bottom:60px;} }
.mobile-nav-item { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 4px 12px;gap:3px;color:var(--muted);font-size:.65rem;font-weight:600;cursor:pointer;text-decoration:none;transition:color .15s;background:none;border:none;font-family:inherit; }
.mobile-nav-item i { font-size:1.1rem; }
.mobile-nav-item.active,.mobile-nav-item:hover { color:var(--o); }

/* ─── Float Buttons ────────────────────────────────────────── */
.float-btns { position:fixed;bottom:80px;right:20px;z-index:999;display:flex;flex-direction:column;gap:10px;align-items:flex-end; }
@media(max-width:767px){ .float-btns{bottom:72px;} }
.float-btn { width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;cursor:pointer;box-shadow:var(--sh-md);transition:transform .2s;text-decoration:none; }
.float-btn:hover { transform:scale(1.1);color:#fff; }
.float-btn--phone { background:#22c55e; }
.float-btn--zalo  { background:#0068ff; }
.float-btn--cta   { background:var(--grad); }

/* ─── Footer ───────────────────────────────────────────────── */
.site-footer { background:var(--dark);color:rgba(255,255,255,.55);padding:52px 0 20px; }
.footer-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px; }
@media(max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;gap:24px;} }
@media(max-width:500px){ .footer-grid{grid-template-columns:1fr;} }
.footer-col h4 { font-size:.88rem;font-weight:800;color:#fff;margin:0 0 14px; }
.footer-col ul { list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px; }
.footer-col ul li a { font-size:.84rem;color:rgba(255,255,255,.55);transition:color .18s; }
.footer-col ul li a:hover { color:#fff; }
.footer-brand { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.footer-brand-ico { width:36px;height:36px;background:var(--grad);border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9rem; }
.footer-brand-name { font-size:1rem;font-weight:900;color:#fff; }
.footer-desc { font-size:.84rem;line-height:1.7;margin-bottom:14px; }
.footer-socials { display:flex;gap:8px; }
.footer-social { width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);transition:all .18s; }
.footer-social:hover { background:var(--o);color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08);padding-top:18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.78rem;color:rgba(255,255,255,.3); }

/* ─── Ticker ───────────────────────────────────────────────── */
.ticker { background:var(--grad);padding:9px 0;overflow:hidden; }
.ticker-inner { display:flex;width:max-content;animation:tickRun 30s linear infinite; }
.ticker-inner:hover { animation-play-state:paused; }
@keyframes tickRun { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.ticker-item { white-space:nowrap;font-size:.76rem;font-weight:700;color:rgba(255,255,255,.92);padding:0 16px;display:flex;align-items:center;gap:7px; }
.ticker-sep { width:4px;height:4px;background:rgba(255,255,255,.35);border-radius:50%; }

/* ─── Single layout ────────────────────────────────────────── */
.single-layout { display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:start; }
@media(max-width:900px){ .single-layout{grid-template-columns:1fr;} }
.single-sidebar { position:sticky;top:80px; }
.single-title { font-size:clamp(1.4rem,3vw,2rem);font-weight:900;line-height:1.2;letter-spacing:-.4px; }

/* ─── Archive layout ───────────────────────────────────────── */
.archive-layout { display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start; }
@media(max-width:900px){ .archive-layout{grid-template-columns:1fr;} .archive-sidebar{display:none;} }
.archive-sidebar { position:sticky;top:80px; }

/* Sidebar card */
.sidebar-card { background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:20px;box-shadow:var(--sh);margin-bottom:16px; }
.sidebar-card h3 { font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0 0 14px;display:flex;align-items:center;gap:7px;padding-bottom:10px;border-bottom:1px solid var(--border); }
.sidebar-card h3 i { color:var(--o); }
.ecp-sidebar-select { width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--r);font-family:inherit;font-size:.85rem;color:var(--text);outline:none;margin-bottom:10px; }
.ecp-sidebar-select:focus { border-color:var(--o); }

/* Section blocks (single post) */
.section-block { background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:24px;margin-bottom:20px;box-shadow:var(--sh); }
.section-block__title { font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0 0 16px;display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--border); }
.section-block__title i { color:var(--o); }

/* FAQ */
.fq { background:#fff;border:1.5px solid var(--border);border-radius:var(--r-lg);margin-bottom:6px; }
.fq.open { border-color:#ffc4b8; }
.fq-q { display:flex;align-items:center;justify-content:space-between;padding:14px 18px;cursor:pointer;font-size:.87rem;font-weight:700;color:var(--text);gap:12px; }
.fq-q:hover { background:#fff9f7;border-radius:var(--r-lg); }
.fq-ico { width:22px;height:22px;border-radius:50%;background:var(--o-l);color:var(--o);display:flex;align-items:center;justify-content:center;font-size:.6rem;flex-shrink:0;transition:all .25s; }
.fq.open .fq-ico { transform:rotate(45deg);background:var(--o);color:#fff; }
.fq-a { max-height:0;overflow:hidden;transition:max-height .3s ease; }
.fq.open .fq-a { max-height:300px; }
.fq-a-inner { padding:0 18px 14px;font-size:.82rem;color:var(--muted);line-height:1.74; }

/* Filter pill */
.filter-pill { padding:5px 12px;border-radius:20px;border:1.5px solid var(--border);font-size:.8rem;font-weight:600;color:var(--text2);cursor:pointer;transition:all .15s;white-space:nowrap;background:#fff;text-decoration:none;display:inline-block; }
.filter-pill:hover,.filter-pill.active { background:var(--o-l);border-color:#ffc4b8;color:var(--o); }

/* Search bar */
.ecp-search-form input { border-color:var(--border) !important; }
.ecp-search-form input:focus { border-color:var(--o) !important; }

/* Entry content */
.entry-content { line-height:1.75; }
.entry-content h2,.entry-content h3 { font-weight:800;margin:1.5em 0 .75em; }
.entry-content p { margin-bottom:1em; }
.entry-content ul,.entry-content ol { padding-left:1.5em;margin-bottom:1em; }

/* Admin bar offset */
body.admin-bar .site-header { top:32px; }
@media(max-width:782px){ body.admin-bar .site-header{top:46px;} }