/*
Theme Name: Education Theme
Theme URI: https://dev.com.vn
Author: dev.com.vn
Author URI: https://dev.com.vn
Description: Theme dành riêng cho nền tảng giáo dục Education Platform. Kết hợp với plugin Education Platform v1.0.
Version: 1.0.0
Text Domain: education-theme
*/

/* ===== LAYOUT ===== */
.ep-wrap{max-width:1260px;margin:0 auto;padding:0 24px}
.ep-page-wrap{padding-top:80px;min-height:60vh}

/* ===== NAV ===== */
.ep-nav{position:fixed;top:0;left:0;right:0;z-index:999;height:66px;background:rgba(255,255,255,.97);border-bottom:1px solid #e5e7eb;backdrop-filter:blur(20px);display:flex;align-items:center;transition:box-shadow .3s}
.ep-nav--scrolled{box-shadow:0 2px 24px rgba(22,163,74,.1)}
.ep-nav .ep-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.ep-logo{display:flex;align-items:center;gap:10px;font-size:1.18rem;font-weight:600;color:#111827;letter-spacing:-.3px;text-decoration:none;flex-shrink:0}
.ep-logo-mark{width:36px;height:36px;background:linear-gradient(135deg,#22c55e,#14b8a6);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem;box-shadow:0 4px 12px rgba(22,163,74,.3)}
.ep-logo span{color:#16a34a}
.ep-nav-menu{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.ep-nav-menu a{padding:7px 12px;border-radius:8px;color:#4b5563;font-size:.83rem;font-weight:600;transition:all .15s;display:flex;align-items:center;gap:4px;white-space:nowrap;text-decoration:none}
.ep-nav-menu a:hover,.ep-nav-menu a.current{background:#f0fdf4;color:#16a34a}
.ep-nav-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ep-btn-ghost-nav{padding:8px 15px;border-radius:9px;color:#374151;font-size:.82rem;font-weight:600;border:2px solid #e5e7eb;background:#fff;cursor:pointer;transition:all .15s;text-decoration:none;display:flex;align-items:center;gap:5px}
.ep-btn-ghost-nav:hover{border-color:#4ade80;color:#16a34a}
.ep-btn-primary-nav{padding:9px 18px;border-radius:9px;background:linear-gradient(135deg,#22c55e,#14b8a6);color:#fff;font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:6px;box-shadow:0 4px 14px rgba(22,163,74,.3);transition:all .15s;text-decoration:none}
.ep-btn-primary-nav:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(22,163,74,.4)}
.ep-hamburger{display:none;width:38px;height:38px;border:none;background:none;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center;border-radius:8px;transition:background .15s}
.ep-hamburger:hover{background:#f3f4f6}
.ep-hamburger span{width:22px;height:2px;background:#374151;border-radius:2px;transition:all .2s}
@media(max-width:820px){
  .ep-nav-menu{display:none}
  .ep-nav-actions .ep-btn-ghost-nav{display:none}
  .ep-hamburger{display:flex}
}

/* Mobile menu drawer */
.ep-mobile-drawer{position:fixed;top:0;right:-280px;width:280px;height:100vh;background:#fff;z-index:1100;box-shadow:-4px 0 24px rgba(0,0,0,.12);transition:right .3s;overflow-y:auto;padding:16px}
.ep-mobile-drawer.open{right:0}
.ep-drawer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e5e7eb}
.ep-drawer-close{width:32px;height:32px;border:none;background:#f3f4f6;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ep-drawer-nav a{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:8px;color:#374151;font-weight:600;font-size:.88rem;text-decoration:none;transition:background .15s}
.ep-drawer-nav a:hover{background:#f0fdf4;color:#16a34a}
.ep-drawer-nav a i{width:18px;text-align:center;color:#22c55e;font-size:.82rem}
.ep-mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1090}
.ep-mobile-overlay.open{display:block}

/* ===== FOOTER ===== */
.ep-footer{background:#111827;color:#d1d5db;padding:48px 0 0}
.ep-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}
@media(max-width:900px){.ep-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.ep-footer-grid{grid-template-columns:1fr 1fr}}
.ep-ft-logo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ep-ft-logo-mark{width:36px;height:36px;background:linear-gradient(135deg,#22c55e,#14b8a6);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem}
.ep-ft-logo-name{font-size:1.1rem;font-weight:600;color:#fff}
.ep-ft-logo-name span{color:#22c55e}
.ep-ft-desc{font-size:.8rem;color:#9ca3af;line-height:1.65;margin-bottom:16px}
.ep-ft-socials{display:flex;gap:8px}
.ep-ft-soc{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#d1d5db;font-size:.82rem;cursor:pointer;transition:all .15s;text-decoration:none}
.ep-ft-soc:hover{background:#22c55e;color:#fff}
.ep-ft-col h4{font-size:.85rem;font-weight:600;color:#fff;margin-bottom:12px}
.ep-ft-links{display:flex;flex-direction:column;gap:6px}
.ep-ft-links a{font-size:.8rem;color:#9ca3af;display:flex;align-items:center;gap:6px;transition:color .15s;text-decoration:none}
.ep-ft-links a i{font-size:.72rem;color:#4b5563}
.ep-ft-links a:hover{color:#22c55e}
.ep-ft-bottom{border-top:1px solid rgba(255,255,255,.07);padding:18px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.ep-ft-copy{font-size:.75rem;color:#6b7280}
.ep-ft-btm-links{display:flex;gap:14px}
.ep-ft-btm-links a{font-size:.75rem;color:#6b7280;text-decoration:none}
.ep-ft-btm-links a:hover{color:#22c55e}

/* ===== HERO (for page template) ===== */
.ep-hero-section{padding:96px 0 32px;background:linear-gradient(155deg,#f0fdf4 0%,#fff 40%,#fffbeb 100%);position:relative;overflow:hidden}
.ep-hero-inner{display:grid;grid-template-columns:54% 46%;align-items:start;gap:40px}
@media(max-width:820px){.ep-hero-inner{grid-template-columns:1fr}}

/* ===== CONTENT SECTIONS ===== */
.ep-section{padding:40px 0}
.ep-section--gray{background:#f9fafb}
.ep-section--green{background:#f0fdf4}

/* ===== ARCHIVE PAGE ===== */
.ep-archive-header{padding:24px 0 16px;border-bottom:1px solid #e5e7eb;margin-bottom:24px}
.ep-archive-header h1{font-size:1.55rem;font-weight:600;color:#111827}
.ep-archive-header p{color:#6b7280;font-size:.88rem;margin-top:4px}
.ep-archive-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.ep-found-text{font-size:.82rem;color:#6b7280}

/* ===== CONTACT SECTION (single page bottom) ===== */
.ep-contact-section{background:linear-gradient(155deg,#f0fdf4,#fff);border:1.5px solid #dcfce7;border-radius:22px;padding:32px;margin-top:32px}
.ep-contact-section-header{margin-bottom:20px;text-align:center}
.ep-contact-section-header h2{font-size:1.25rem;font-weight:600;color:#111827}
.ep-contact-section-header p{color:#6b7280;font-size:.88rem;margin-top:4px}

/* ===== BLOG ===== */
.ep-blog-page{padding:96px 0 40px}
.ep-blog-featured-img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:16px;margin-bottom:20px}

/* ===== FLOAT CHAT BUTTON ===== */
.ep-float-zalo{position:fixed;bottom:96px;right:16px;z-index:900;width:48px;height:48px;border-radius:50%;background:#0068ff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:0 4px 16px rgba(0,104,255,.4);text-decoration:none;transition:transform .2s}
.ep-float-zalo:hover{transform:scale(1.1)}
.ep-float-phone{position:fixed;bottom:150px;right:16px;z-index:900;width:44px;height:44px;border-radius:50%;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;box-shadow:0 4px 16px rgba(22,163,74,.4);text-decoration:none;transition:transform .2s;animation:phonepulse 2s infinite}
.ep-float-phone:hover{transform:scale(1.1)}
@keyframes phonepulse{0%,100%{box-shadow:0 4px 16px rgba(22,163,74,.4)}50%{box-shadow:0 4px 16px rgba(22,163,74,.4),0 0 0 10px rgba(22,163,74,.1)}}