/* Global styles and Desktop First */ :root { --header-offset: 122px; --primary-color: #2F6BFF; --secondary-color: #6FA3FF; --button-gradient: linear-gradient(180deg, #4A8BFF 0%, #2F6BFF 100%); --card-bg: #FFFFFF; --bg-color: #F4F7FB; --text-main: #1F2D3D; --border-color: #D6E2FF; --glow-color: #A5C4FF; } html { /* HTML lang attribute should be set to 'vi-VN' on the tag of the page */ scroll-behavior: smooth; } body { padding-top: var(--header-offset); margin: 0; font-family: Arial, sans-serif; line-height: 1.6; color: var(--text-main); background-color: var(--bg-color); overflow-x: hidden; /* Prevent horizontal scroll on desktop too */ } body.no-scroll { overflow: hidden; } /* Site Header - Fixed position */ .site-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); background-color: var(--card-bg); /* Ensure solid background */ } /* Header Top Section */ .header-top { box-sizing: border-box; min-height: 68px; height: 68px; display: flex; align-items: center; overflow: hidden; background-color: #2159D9; /* Darker shade of primary for contrast */ width: 100%; color: #fff; } .header-container { box-sizing: border-box; width: 100%; height: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; } /* Logo */ .logo { font-size: 24px; font-weight: bold; color: #fff; text-decoration: none; white-space: nowrap; display: flex; align-items: center; height: 100%; } /* Desktop Nav Buttons */ .desktop-nav-buttons { display: flex; gap: 10px; } /* Mobile Nav Buttons - Hidden on Desktop */ .mobile-nav-buttons { display: none; /* Hidden on desktop, shown on mobile */ } /* Main Navigation Section */ .main-nav { box-sizing: border-box; min-height: 52px; height: 52px; display: flex; align-items: center; overflow: hidden; background-color: var(--primary-color); /* Primary color for main nav */ width: 100%; } .nav-container { box-sizing: border-box; height: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0 20px; } .nav-link { color: #fff; text-decoration: none; padding: 10px 15px; white-space: nowrap; transition: background-color 0.3s ease; font-size: 15px; } .nav-link:hover { background-color: rgba(255, 255, 255, 0.2); border-radius: 4px; } /* Hamburger Menu - Hidden on Desktop */ .hamburger-menu { display: none; /* Hidden on desktop */ background: none; border: none; cursor: pointer; padding: 10px; z-index: 1002; } .hamburger-menu .bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: #fff; transition: all 0.3s ease-in-out; } /* Buttons */ .btn { text-decoration: none; color: #fff; padding: 10px 20px; border-radius: 25px; font-weight: bold; text-align: center; transition: all 0.3s ease; background: var(--button-gradient); box-shadow: 0 4px 10px var(--glow-color); white-space: nowrap; border: none; cursor: pointer; line-height: 1.2; } .btn:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 6px 15px var(--glow-color); } /* Overlay for mobile menu */ .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; } /* Footer Styles */ .site-footer { background-color: var(--text-main); /* Dark background for footer */ color: #fff; padding: 40px 20px; font-size: 14px; } .site-footer a { color: #fff; text-decoration: none; } .site-footer a:hover { text-decoration: underline; } .footer-top-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto 30px auto; } .footer-col h3 { color: var(--secondary-color); font-size: 16px; margin-bottom: 15px; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col ul li { margin-bottom: 10px; } .footer-logo { font-size: 20px; font-weight: bold; margin-bottom: 15px; display: block; } .footer-description { line-height: 1.8; margin-bottom: 15px; word-wrap: break-word; overflow-wrap: break-word; } .footer-dynamic-col .footer-slot-anchor-inner { display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; gap: 5px; } .footer-dynamic-row { max-width: 1200px; margin: 0 auto 20px auto; } .footer-dynamic-row .footer-slot-anchor-inner { display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; gap: 8px; width: 100%; } .footer-bottom { max-width: 1200px; margin: 0 auto; text-align: center; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); } /* Slot Anchor Inner */ .footer-slot-anchor-inner { min-height: 10px; /* Ensure slot visibility even if empty */ } /* Media Queries for Mobile */ @media (max-width: 768px) { :root { --header-offset: 110px; } /* Header Top Mobile */ .header-top { min-height: 60px !important; height: 60px !important; } .header-container { padding: 0 15px; position: relative; /* For logo centering */ } .hamburger-menu { display: block; /* Show hamburger on mobile */ position: absolute; left: 15px; } .hamburger-menu.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger-menu.active .bar:nth-child(2) { opacity: 0; } .hamburger-menu.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .logo { flex: 1 !important; display: flex !important; justify-content: center !important; align-items: center !important; position: static; /* Reset absolute positioning if any */ width: auto; /* Allow flex to manage width */ max-width: calc(100% - 100px); /* Account for hamburger */ } .logo img { max-height: 56px !important; width: auto; height: auto; } .desktop-nav-buttons { display: none; } /* Mobile Nav Buttons */ .mobile-nav-buttons { display: flex !important; /* Show mobile buttons */ min-height: 48px; height: 48px; /* Fixed height for mobile buttons bar */ align-items: center; justify-content: center; /* Center buttons horizontally */ width: 100%; max-width: 100%; box-sizing: border-box; padding: 0 15px; overflow: hidden; gap: 10px; flex-wrap: nowrap; background-color: #3C7EFF; /* Slightly different background for visibility */ } .mobile-nav-buttons .btn { flex: 1; min-width: 0; max-width: calc(50% - 5px); /* Max width for two buttons with gap */ box-sizing: border-box; padding: 8px 12px; font-size: 13px; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; border-radius: 20px; box-shadow: 0 2px 5px var(--glow-color); } /* Main Nav Mobile */ .main-nav { min-height: 48px !important; height: auto; /* Allow height to adjust for content */ display: none; /* Hidden by default, shown by JS */ flex-direction: column; position: fixed; top: var(--header-offset); /* Position below fixed header and mobile buttons */ left: 0; width: 80%; /* Side menu width */ max-width: 300px; height: calc(100% - var(--header-offset)); background-color: var(--primary-color); transform: translateX(-100%); /* Off-screen by default */ transition: transform 0.3s ease-in-out; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2); overflow-y: auto; /* Enable scrolling for long menus */ align-items: flex-start; z-index: 1001; } .main-nav.active { display: flex; /* Show menu when active */ transform: translateX(0); /* Slide into view */ } .nav-container { flex-direction: column; padding: 20px 0; width: 100%; max-width: none; /* No max-width on mobile */ align-items: flex-start; } .nav-link { width: 100%; padding: 12px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 16px; } .nav-link:last-child { border-bottom: none; } /* Overlay Mobile */ .overlay.active { display: block; } /* Footer Mobile */ .site-footer { padding: 30px 15px; } .footer-top-grid { grid-template-columns: 1fr; gap: 30px; margin-bottom: 20px; } .footer-dynamic-row { margin-bottom: 15px; } .footer-bottom { padding-top: 15px; } /* Mobile content overflow protection */ .page-content img { max-width: 100% !important; height: auto !important; display: block; } .page-content { overflow-x: hidden; max-width: 100%; } } /* Ensure contrast for text on header-top */ .header-top .logo, .header-top .desktop-nav-buttons .btn { color: #fff; } .header-top .logo:hover { opacity: 0.8; } /* Ensure contrast for text on main-nav */ .main-nav .nav-link { color: #fff; } /* Ensure contrast for text on footer */ .site-footer h3, .site-footer a, .site-footer p { color: #fff; } .site-footer .footer-bottom p { color: rgba(255, 255, 255, 0.7); } /* 移动端内容区防溢出（系统追加，请勿删除） */ @media (max-width: 768px) { .page-content img { max-width: 100% !important; height: auto !important; display: block; } .page-content { overflow-x: hidden; max-width: 100%; } body { overflow-x: hidden; } }