/* ========================================================= S4E Header — header.css ========================================================= */ /* ── Variables ── */ :root { --s4e-header-h: 88px; /* 64px inner + 12px top + 12px bottom padding */ --s4e-header-bg: transparent; --s4e-header-bg-scrolled: rgba(15, 22, 42, 0.88); --s4e-nav-color: #ffffff80; --s4e-nav-active: #ffffff; --s4e-cta-bg: #28a745; --s4e-cta-hover: #218838; } /* ── Header wrapper ── */ .s4e-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 999999; background: var(--s4e-header-bg); padding: 8px 24px; /* padding top-bottom 12px, left-right 24px */ transition: background 0.3s ease, backdrop-filter 0.3s ease; } /* Khi scroll — nền tối mờ dần */ .s4e-header.is-scrolled { background: var(--s4e-header-bg-scrolled); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Đẩy nội dung xuống để không bị header fixed che — chỉ áp dụng cho các trang KHÔNG có hero full-width ở đầu trang. Với hero section: thêm class "has-transparent-header" vào để bỏ padding này và để hero chiếm full viewport từ trên cùng. */ body:not(.has-transparent-header) { padding-top: var(--s4e-header-h); } /* Fullpage sections — đảm bảo mỗi section chiếm tối thiểu toàn viewport */ .fp-section { min-height: 100vh; box-sizing: border-box; } .s4e-header__inner { display: flex; align-items: center; gap: 32px; height: 64px; /* Cố định chiều cao phần nội dung bên trong */ max-width: 1280px; margin: 0 auto; padding: 0; /* Đã bỏ padding left-right ở trong */ } /* ── Logo ── */ .s4e-header__logo { flex-shrink: 0; display: inline-flex; align-items: center; text-decoration: none; line-height: 1; } /* Logo image từ WP Customizer */ .s4e-header__logo .s4e-logo-img { display: block; max-height: 40px; width: auto; object-fit: contain; } /* Fallback text */ .s4e-header__logo .s4e-logo-text { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.5px; } /* ── Nav ── */ .s4e-header__nav { flex: 1; display: flex; justify-content: center; } .s4e-nav__list { display: flex; align-items: center; gap: 32px; /* Tăng gap vì link không còn padding 2 bên */ list-style: none; margin: 0; padding: 0; } .s4e-nav__list li { position: relative; margin: 0; padding: 0; } .s4e-nav__list > li > a { display: block; padding: 20px 0; /* Có top-bottom, không có left-right */ font-size: 18px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--s4e-nav-color); text-decoration: none; white-space: nowrap; transition: color 0.2s; } .s4e-nav__list > li > a:hover, .s4e-nav__list > li.current-menu-item > a, .s4e-nav__list > li.current-menu-ancestor > a { color: var(--s4e-nav-active); } /* Dropdown */ .s4e-nav__list .sub-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 200px; background: #1e2d50; border-radius: 6px; list-style: none; margin: 0; padding: 6px 0; z-index: 999; } .s4e-nav__list li:hover > .sub-menu, .s4e-nav__list li:focus-within > .sub-menu { display: block; } .s4e-nav__list .sub-menu a { display: block; padding: 9px 18px; font-size: 13px; color: var(--s4e-nav-color); text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; transition: color 0.2s, background 0.2s; } .s4e-nav__list .sub-menu a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } /* ── Actions ── */ .s4e-header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; /* Đẩy các nút sang sát mép phải */ } /* ── CTA Button ── */ .s4e-header__cta { display: inline-flex; align-items: center; padding: 12px 30px; background: var(--s4e-cta-bg); color: #fff; font-size: 18px; white-space: nowrap; text-decoration: none; transition: background 0.2s; } .s4e-header__cta:hover { background: var(--s4e-cta-hover); color: #fff; } /* ── Language Switcher ── */ .s4e-header__lang { position: relative; } .s4e-lang__toggle { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; background: transparent; border: none; color: var(--s4e-nav-color); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; border-radius: 4px; transition: color 0.2s; } .s4e-lang__toggle:hover { color: #fff; } .s4e-lang__chevron { transition: transform 0.2s; } .s4e-lang__toggle[aria-expanded="true"] .s4e-lang__chevron { transform: rotate(180deg); } .s4e-lang__dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 80px; background: #1e2d50; border-radius: 6px; list-style: none; margin: 0; padding: 6px 0; z-index: 1001; } .s4e-lang__dropdown.is-open { display: block; } /* Polylang output li > a */ .s4e-lang__dropdown li { margin: 0; padding: 0; } .s4e-lang__dropdown li a { display: block; padding: 8px 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--s4e-nav-color); text-decoration: none; transition: color 0.2s, background 0.2s; } .s4e-lang__dropdown li a:hover, .s4e-lang__dropdown li.current-lang a { color: #fff; background: rgba(255, 255, 255, 0.1); } /* ── Hamburger (mobile) ── */ .s4e-header__burger { display: none; flex-direction: column; justify-content: space-between; width: 44px; height: 44px; background: transparent !important; border: none; cursor: pointer; padding: 12px 8px; z-index: 9999999; border-radius: 8px; transition: background 0.3s; outline: none; } .s4e-header__burger:hover, .s4e-header__burger:active, .s4e-header__burger:focus { background: rgba(255, 255, 255, 0.1) !important; outline: none; } .s4e-header__burger span { display: block; width: 100%; height: 2px; background: #fff !important; border-radius: 2px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s; } /* Hiệu ứng khi mở */ .s4e-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .s4e-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .s4e-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* ── Mobile Nav Drawer (Offcanvas) ── */ /* Lớp mờ (overlay) cho body khi mở menu */ body::after { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999998; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; } body.s4e-nav-open::after { opacity: 1; visibility: visible; } .s4e-mobile-nav { position: fixed; top: 0; right: 0; width: 340px; max-width: 85%; height: 100vh; background: rgba(15, 22, 42, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 9999999; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); overflow-y: auto; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5); padding: 80px 0 40px; } .s4e-mobile-nav.is-open { transform: translateX(0); } /* Nút Close — Custom X icon */ .s4e-mobile-nav__close { position: absolute; top: 20px; right: 20px; background: transparent; color: #fff; border: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s, transform 0.3s; z-index: 10; } .s4e-mobile-nav__close:hover { background: rgba(255, 255, 255, 0.1); transform: rotate(90deg); } .s4e-mobile-nav__close::before, .s4e-mobile-nav__close::after { content: ""; position: absolute; width: 20px; height: 2px; background: #fff; border-radius: 2px; } .s4e-mobile-nav__close::before { transform: rotate(45deg); } .s4e-mobile-nav__close::after { transform: rotate(-45deg); } .s4e-mobile-nav__list { list-style: none; margin: 0; padding: 0; } .s4e-mobile-nav__list li a { display: block; padding: 16px 28px; font-size: 15px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: #cbd5e1; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: color 0.3s, background 0.3s, padding-left 0.3s; } .s4e-mobile-nav__list li a:hover { color: #fff; background: rgba(255, 255, 255, 0.03); padding-left: 32px; } .s4e-mobile-nav__list li.current-menu-item > a { color: #fff; font-weight: 700; background: rgba(34, 197, 94, 0.1); /* Nhấn nhẹ với màu xanh */ border-left: 4px solid #22c55e; padding-left: 24px; } .s4e-mobile-nav__list li.current-menu-item > a:hover { padding-left: 28px; } .s4e-mobile-nav__list .sub-menu { list-style: none; margin: 0; padding: 0; background: rgba(0, 0, 0, 0.2); } .s4e-mobile-nav__list .sub-menu a { padding-left: 48px; font-size: 14px; text-transform: none; border-bottom: none; } .s4e-mobile-nav__list .sub-menu a:hover { padding-left: 52px; } .s4e-mobile-nav__list li.current-menu-item .sub-menu a { border-left: none; } /* ── Responsive ── */ @media (max-width: 1024px) { .s4e-header__nav { display: none; } .s4e-header__cta { display: none; } .s4e-header__burger { display: flex; } } @media (max-width: 480px) { .s4e-header__inner { padding: 0px; gap: 16px; } }