/* * Chamspace Sidebar CSS */ /* Import font */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap'); /* === Responsive Scale Variables === */ :root { --sidebar-width: clamp(280px, 20vw, 360px); --gap: clamp(12px, 1vw, 16px); --content-offset: calc(var(--sidebar-width) + var(--gap) * 2); } /* Base - Body & Page Background */ body { font-family: 'Plus Jakarta Sans', sans-serif; background: #f5f5f5 !important; margin: 0; padding: 0; } /* Hide default Hello Elementor header/footer */ .site-header, #site-header, .site-footer, #site-footer { display: none !important; } /* ── Mobile content fade behind glass header & dock ── */ @media (max-width: 1024px) { body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 82px; background: linear-gradient(to bottom, rgba(245,245,245,1) 0%, rgba(245,245,245,0.98) 40%, rgba(245,245,245,0) 100%); z-index: 50; pointer-events: none; } body::after { content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: 85px; background: linear-gradient(to top, rgba(245,245,245,1) 0%, rgba(245,245,245,0.98) 40%, rgba(245,245,245,0) 100%); z-index: 50; pointer-events: none; } } /* iPhone only: no fade gradient — controlled by JS adding .ios-device on */ html.ios-device body::before, html.ios-device body::after { display: none !important; } /* Content area - đồng bộ padding với Dock */ #chamspace-content { margin-left: var(--content-offset); margin-right: var(--gap); padding: 30px 0 90px 0; min-height: 100vh; background: #f5f5f5; box-sizing: border-box; overflow: visible; /* was hidden — allows stats shadow to bleed */ } /* ================================ ELEMENTOR SECTIONS - Fullwidth Reset TRIỆT ĐỂ cho mọi cấp ================================ */ /* Section: bỏ mọi padding/margin, fullwidth */ #chamspace-content .elementor-section.elementor-section-boxed, #chamspace-content .elementor-section.elementor-section-stretched { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; position: relative !important; } /* Container: bỏ mọi padding/margin */ #chamspace-content .elementor-section-boxed > .elementor-container, #chamspace-content .elementor-section-stretched > .elementor-container { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; } /* Row */ #chamspace-content .elementor-row { width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Column: bỏ padding */ #chamspace-content .elementor-column > .elementor-column-wrap { padding: 0 !important; margin: 0 !important; } /* Column wrap */ #chamspace-content .elementor-column-wrap { padding: 0 !important; margin: 0 !important; } /* Element populated (inner của column) */ #chamspace-content .elementor-element-populated { padding: 0 !important; margin: 0 !important; } /* Widget wrap */ #chamspace-content .elementor-widget-wrap { padding: 0 !important; margin: 0 !important; } /* Widget container */ #chamspace-content .elementor-widget-container { padding: 0 !important; margin: 0 !important; } /* Section wrap */ #chamspace-content .elementor-section-wrap { padding: 0 !important; margin: 0 !important; } /* Elementor root */ #chamspace-content .elementor { padding: 0 !important; margin: 0 !important; } /* Elementor inner */ #chamspace-content .elementor-inner { padding: 0 !important; margin: 0 !important; } /* ================================ SIGNATURE CURVES - Body Background ================================ */ #body-background { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 0; pointer-events: none; } #body-background .symbol-1 { position: absolute; left: 0; width: 60%; transform: translateY(-30%); } #body-background .symbol-2 { position: absolute; right: 0; width: 60%; bottom: 0; transform: translateY(50%); } #body-background svg { width: 100%; height: auto; display: block; } /* ================================ SIDEBAR - Cố định vị trí ================================ */ #chamspace-sidebar { position: fixed; top: 30px; left: 16px; bottom: 16px; width: var(--sidebar-width); background: #ffffff; border-radius: 16px; padding: clamp(20px, 3vh, 35px) clamp(14px, 2vh, 24px) clamp(14px, 2vh, 24px) clamp(14px, 2vh, 24px); box-shadow: 0 2px 16px rgba(0,0,0,0.06); border: 1px solid #ddd; box-sizing: border-box; display: flex; flex-direction: column; font-family: 'Plus Jakarta Sans', sans-serif; overflow-y: visible; z-index: 100; } /* ================================ 1. ✦ Menu (fixed top) ================================ */ .sidebar-header { display: flex; align-items: center; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,0.08); margin-bottom: 16px; } .sidebar-header .menu-icon { font-size: clamp(12px, 1.4vh, 15px); color: #1a1a1a; } .sidebar-header .menu-title { font-size: 13px; font-weight: 600; color: #1a1a1a; letter-spacing: 0.05em; } /* ================================ 2. Menu Items (scrollable middle) ================================ */ .menu-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .menu-list li { list-style: none; } .menu-list li a { color: #1a1a1a; text-decoration: none; font-size: clamp(12px, 1.4vh, 15px); font-weight: 500; padding: clamp(10px, 1.3vh, 14px) clamp(12px, 1.5vh, 16px); display: block; position: relative; transition: background 0.3s, color 0.3s; letter-spacing: clamp(0.04em, 0.08em, 0.1em); text-transform: uppercase; border-radius: 16px; border-bottom: none !important; } /* Remove border-bottom from parent with children */ .menu-list li.menu-item-has-children { border-bottom: none !important; } .menu-list li.menu-item-has-children > a { border-bottom: none !important; } /* Hover: submenu opens with 0.5s delay */ .menu-list li.menu-item-has-children { transition: background 0.3s; } /* Hover: submenu opens with 0.5s delay */ .menu-list li.menu-item-has-children { transition: background 0.3s; } /* Hover: ALL main menu items get gray pillshape */ .menu-list > li > a:hover { background: rgba(0,0,0,0.06) !important; color: #1a1a1a !important; } .menu-list li.menu-item-has-children > a:hover { background: rgba(0,0,0,0.06) !important; color: #1a1a1a !important; } /* Parent menu GRAY when clicked open (no child active) */ .menu-list li.menu-item-has-children.open > a { background: rgba(0,0,0,0.09) !important; color: #1a1a1a !important; } /* Parent menu BLACK when submenu child is active */ .menu-list li.menu-item-has-children:has(.sub-menu .current-menu-item) > a { background: #1a1a1a !important; color: #fff !important; } /* Active main menu — logo black */ .menu-list > li.current-menu-item > a, .menu-list > li.menu-item-object-page.current-menu-item > a { background: #1a1a1a !important; color: #fff !important; } /* When submenu page is active, keep parent open (background handled above) */ .menu-list li.menu-item-has-children.open, .menu-list li.menu-item-has-children:has(.sub-menu .current-menu-item) { background: transparent; } /* Expand submenu when parent has active child (page load) */ .menu-list li.menu-item-has-children:has(.sub-menu .current-menu-item) > .sub-menu { max-height: 400px; margin-top: 12px; } /* Submenu hover — xám nhạt */ /* Menu icons — separate SVG files, color via background-color */ .menu-list > li > a { display: flex; align-items: center; gap: 10px; } /* Arrow indicator — CSS gradient cross, zero position shift */ .menu-list li.menu-item-has-children > a::after { content: ''; position: absolute; right: clamp(12px, 1.5vh, 16px); top: 50%; transform: translateY(-50%) scale(0.6); width: clamp(12px, 1.4vh, 16px); height: clamp(12px, 1.4vh, 16px); background: linear-gradient(to bottom, #111 0%, #111 100%) center / 1.5px 100% no-repeat, linear-gradient(to right, #111 0%, #111 100%) center / 100% 1.5px no-repeat; transition: transform 0.25s ease, background 0.25s ease; } /* Open → minus (rotate 180°) */ .menu-list li.menu-item-has-children.open > a::after { transform: translateY(-50%) rotate(180deg) scale(0.6); background: linear-gradient(to bottom, transparent 0%, transparent 100%) center / 1px 100% no-repeat, linear-gradient(to right, #111 0%, #111 100%) center / 100% 1.5px no-repeat; } /* Closed after having active child → show + (cross white on black bg) */ .menu-list li.menu-item-has-children:has(.sub-menu .current-menu-item):not(.open) > a::after { transform: translateY(-50%) scale(0.6); background: linear-gradient(to bottom, #fff 0%, #fff 100%) center / 1.5px 100% no-repeat, linear-gradient(to right, #fff 0%, #fff 100%) center / 100% 1.5px no-repeat; } /* Open + has active child → white minus */ .menu-list li.menu-item-has-children.open:has(.sub-menu .current-menu-item) > a::after { background: linear-gradient(to bottom, transparent 0%, transparent 100%) center / 1px 100% no-repeat, linear-gradient(to right, #fff 0%, #fff 100%) center / 100% 1.5px no-repeat; } /* Mobile overlay: same technique */ /* Submenu — accordion */ .menu-list .sub-menu { list-style: none; padding: 0 !important; margin: 0 !important; background: transparent; border-radius: 12px; border: none; max-height: 0; overflow: hidden; transition: max-height 0.5s ease, margin 0.5s ease; position: relative; } .menu-list .sub-menu.open { max-height: 400px; overflow: visible; } .menu-list li.menu-item-has-children { position: relative; } .menu-list li.menu-item-has-children > a { cursor: pointer; } /* Click opens submenu */ .menu-list li.menu-item-has-children.open > .sub-menu { max-height: 400px; overflow: visible; } /* Submenu item styles — dot on line + pillshape hover */ .menu-list .sub-menu li { position: relative; padding-left: 0; } .menu-list .sub-menu li a { color: #666 !important; font-size: clamp(11px, 1.3vh, 14px) !important; text-transform: none !important; padding: clamp(4px, 0.65vh, 7.5px) clamp(12px, 1.5vh, 16px) clamp(4px, 0.65vh, 7.5px) clamp(40px, 4.8vh, 54px) !important; border-radius: 16px !important; background: transparent !important; letter-spacing: 0.02em; margin: clamp(3px, 0.54vh, 6.5px) clamp(30px, 4vh, 50px) clamp(3px, 0.54vh, 6.5px) 0 !important; display: block !important; width: auto !important; white-space: nowrap !important; transition: background 0.2s, color 0.2s; position: relative; z-index: 1; } /* ✦ indicator */ .menu-list .sub-menu li a::before { content: '✦'; position: absolute; left: clamp(22px, 2.9vh, 32px); top: 50%; transform: translate(-50%, -50%); font-size: 8px; color: rgba(0,0,0,0.2); transition: color 0.2s, transform 0.2s; z-index: 2; background: none !important; width: auto; height: auto; border-radius: 0; } .menu-list .sub-menu li a:hover { color: #1a1a1a !important; background: transparent !important; transform: none; } .menu-list .sub-menu li a:hover::before { color: #1a1a1a; transform: translate(-50%, -50%) scale(1.3); } /* Selected submenu: NO background, bold text + ✦ red bigger */ .menu-list .sub-menu li.current-menu-item.sub-reset, .menu-list .sub-menu li.sub-reset { background: transparent !important; } .menu-list .sub-menu li.current-menu-item.sub-reset a, .menu-list .sub-menu li.sub-reset a { background: transparent !important; color: #666 !important; font-weight: 400 !important; } .menu-list .sub-menu li.current-menu-item.sub-reset a::before, .menu-list .sub-menu li.sub-reset a::before { color: rgba(0,0,0,0.2) !important; font-size: 8px !important; transform: translate(-50%, -50%) scale(1) !important; background: none !important; } /* Selected submenu: NO background, bold text + ✦ red bigger */ .menu-list .sub-menu li.current-menu-item:not(.sub-reset), .menu-list .sub-menu li.sub-active { background: transparent !important; } .menu-list .sub-menu li.current-menu-item:not(.sub-reset) a, .menu-list .sub-menu li.sub-active a { background: transparent !important; color: #1a1a1a !important; font-weight: 800 !important; } .menu-list .sub-menu li.current-menu-item:not(.sub-reset) a::before, .menu-list .sub-menu li.sub-active a::before { color: #E20612; font-size: 10px; transform: translate(-50%, -50%) scale(1.15); background: none !important; } /* ================================ 3. Social Icons (fixed bottom, before logo) ================================ */ /* Nav takes remaining space, scrolls if needed — bottom stays fixed */ .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: none; -ms-overflow-style: none; } .sidebar-nav::-webkit-scrollbar { display: none; } /* Social + Logo — always at bottom, never moves */ .sidebar-social { flex-shrink: 0; margin-top: 12px; margin-bottom: 16px; display: flex; flex-direction: row; gap: 8px; } .sidebar-footer { flex-shrink: 0; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.08); } .social-link { display: inline-flex; text-decoration: none; } .social-icon { width: clamp(22px, 2.8vh, 32px); height: clamp(22px, 2.8vh, 32px); border-radius: 50%; background: #e0e0e0; color: #1a1a1a; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: all 0.3s; } .social-link:hover .social-icon { background: #1a1a1a; color: #e60000; } /* ================================ 4. Logo (fixed bottom) ================================ */ .sidebar-footer { padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.08); } .logo-link { display: block; } .logo-link img { width: clamp(90px, 12vh, 140px); height: auto; } /* ================================================== DESKTOP PORTRAIT (1025px - 1400px) Sidebar 60px icons → hover expand 270px ================================================== */ @media (min-width: 1025px) and (max-width: 1400px) { :root { --sidebar-width: 60px; } #chamspace-sidebar { padding: 20px 8px 14px 8px; overflow: hidden; transition: width 0.35s ease, padding 0.35s ease; } /* Expand khi hover nav hoặc header */ #chamspace-sidebar:has(.sidebar-nav:hover), #chamspace-sidebar:has(.sidebar-header:hover) { width: 270px; padding: 20px 18px 14px 18px; overflow-y: auto; } /* Header: ✦ + Menu text */ .sidebar-header { display: flex; align-items: center; justify-content: flex-start; padding: 0 10px 8px 10px; margin-bottom: 8px; } .sidebar-header .menu-icon { font-size: 16px; flex-shrink: 0; min-width: 18px; text-align: center; display: inline-block; } .sidebar-header .menu-title { opacity: 0; width: 0; overflow: hidden; white-space: nowrap; margin-left: 0; transition: opacity 0.3s, width 0.3s, margin-left 0.3s; } #chamspace-sidebar:has(.sidebar-nav:hover) .sidebar-header, #chamspace-sidebar:has(.sidebar-header:hover) .sidebar-header { padding: 0 16px 8px 16px; } #chamspace-sidebar:has(.sidebar-nav:hover) .sidebar-header .menu-title, #chamspace-sidebar:has(.sidebar-header:hover) .sidebar-header .menu-title { opacity: 1; width: auto; margin-left: 10px; transition: opacity 0.3s 0.15s, width 0.3s 0.15s, margin-left 0.3s 0.15s; } /* Menu items: chỉ icon khi collapsed */ .menu-list > li > a { padding: 12px 10px; justify-content: flex-start; gap: 0; border-radius: 12px; overflow: hidden; font-size: 0; white-space: nowrap; } .menu-list > li > a .menu-item-icon { flex-shrink: 0; font-size: initial; } .menu-list li.menu-item-has-children > a::after { display: none; } /* Expand → hiện text + arrow */ #chamspace-sidebar:has(.sidebar-nav:hover) .menu-list > li > a, #chamspace-sidebar:has(.sidebar-header:hover) .menu-list > li > a { padding: 12px 16px; gap: 10px; font-size: 13px; } #chamspace-sidebar:has(.sidebar-nav:hover) .menu-list li.menu-item-has-children > a::after, #chamspace-sidebar:has(.sidebar-header:hover) .menu-list li.menu-item-has-children > a::after { display: block; } /* Social: dọc khi collapsed, ngang khi expanded */ .sidebar-social { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; margin-bottom: 8px; } .sidebar-social .social-icon { font-size: 10px; } #chamspace-sidebar:has(.sidebar-nav:hover) .sidebar-social, #chamspace-sidebar:has(.sidebar-header:hover) .sidebar-social { flex-direction: row; justify-content: flex-start; gap: 8px; } /* Footer: logo nhỏ khi collapsed */ .sidebar-footer { display: flex; justify-content: flex-start; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.08); } .sidebar-footer .logo-link img { width: 32px; height: auto; transition: width 0.4s cubic-bezier(0.22,0.61,0.36,1); } #chamspace-sidebar:has(.sidebar-nav:hover) .sidebar-footer .logo-link img, #chamspace-sidebar:has(.sidebar-header:hover) .sidebar-footer .logo-link img { width: clamp(70px,10vh,110px); } /* Submenu: accordion khi expanded, ẩn khi collapsed */ .menu-list li.menu-item-has-children { position: relative; } .menu-list .sub-menu { position: relative; left: auto; max-height: 0; visibility: visible; transform: none; box-shadow: none; border: none; border-radius: 12px; min-width: auto; overflow: hidden; transition: max-height 0.4s ease; } .menu-list li.menu-item-has-children.open > .sub-menu, .menu-list li.menu-item-has-children:has(.sub-menu .current-menu-item) > .sub-menu { max-height: 400px; } /* Khi sidebar collapse → đóng submenu */ #chamspace-sidebar:not(:has(.sidebar-nav:hover)):not(:has(.sidebar-header:hover)) .menu-list li.menu-item-has-children.open > .sub-menu { max-height: 0 !important; visibility: hidden; } } /* ================================ MOBILE ELEMENTS - Hidden on Desktop ================================ */ #chamspace-mobile-header, #chamspace-mobile-overlay, #chamspace-mobile-header { display: none; } /* ===================================== MOBILE STYLES (< 1024px) ===================================== */ @media (max-width: 1024px) { #chamspace-sidebar { display: none !important; } #chamspace-content { margin-left: 0 !important; width: 100% !important; padding: 88px 16px var(--content-pad-bot, 104px) 16px !important; } #chamspace-content .elementor-section:first-child, #chamspace-content > .elementor:first-child .elementor-section, #chamspace-content > div:first-child { margin-top: 0 !important; padding-top: 0 !important; } /* ===== UNIFIED MOBILE HEADER (panel ABOVE, pushes bar DOWN) ===== */ /* Remove tap highlight globally */ body, body * { -webkit-tap-highlight-color: transparent !important; } #chamspace-mobile-header { display: block; position: fixed; top: 16px; left: 16px; right: 16px; z-index: 200; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; } .mh-inner { display: flex; flex-direction: column; background: #ffffff; border-radius: 28px; border: 1px solid #ddd; box-shadow: 0 2px 16px rgba(0,0,0,0.08); overflow: hidden; } /* Panel — expands downward, pushes bar */ .mh-panel { display: none; height: 0; overflow: hidden; box-sizing: border-box; transition: height 0.5s cubic-bezier(0.76, 0, 0.24, 1), padding 0.5s cubic-bezier(0.76, 0, 0.24, 1); padding: 0 16px; } /* When expanded: top padding 16px like sides */ .mh-expanded .mh-panel { padding: 16px 16px 0 16px; } /* Menu nav — IDENTICAL to desktop sidebar */ /* Menu header — ✦ Menu + line (same as desktop) */ .mh-menu-header { display: flex; align-items: center; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,0.08); margin-bottom: 16px; } .mh-menu-header .mh-menu-icon { font-size: clamp(12px, 1.4vh, 15px); color: #1a1a1a; } .mh-menu-header .mh-menu-title { font-size: 13px; font-weight: 600; color: #1a1a1a; letter-spacing: 0.05em; } .mh-nav { padding: 0; } /* Menu — IDENTICAL to desktop sidebar (copy exact styles) */ .mh-nav { padding: 0; } .mh-menu-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .mh-menu-list li { list-style: none; } .mh-menu-list li a { color: #1a1a1a; text-decoration: none; font-size: 13px; font-weight: 600; padding: 10px 14px; display: block; position: relative; transition: background 0.3s, color 0.3s; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 14px; border-bottom: none !important; } .mh-menu-list li.menu-item-has-children { border-bottom: none !important; } .mh-menu-list li.menu-item-has-children > a { border-bottom: none !important; } /* Hover — same as desktop */ .mh-menu-list > li > a:hover { background: rgba(0,0,0,0.06) !important; color: #1a1a1a !important; } .mh-menu-list li.menu-item-has-children > a:hover { background: rgba(0,0,0,0.06) !important; color: #1a1a1a !important; } /* Open parent — same as desktop */ .mh-menu-list li.menu-item-has-children.open > a { background: rgba(0,0,0,0.09) !important; color: #1a1a1a !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; border-radius: 16px !important; } /* Parent when child active — black */ .mh-menu-list li.menu-item-has-children:has(.sub-menu .current-menu-item) > a { background: #1a1a1a !important; color: #fff !important; } /* Active main item — black */ .mh-menu-list > li.current-menu-item > a, .mh-menu-list > li.menu-item-object-page.current-menu-item > a { background: #1a1a1a !important; color: #fff !important; } .mh-menu-list li.menu-item-has-children.open, .mh-menu-list li.menu-item-has-children:has(.sub-menu .current-menu-item) { background: transparent; } /* Main menu — flex with gap */ .mh-menu-list > li > a { display: flex; align-items: center; gap: 10px; } /* Arrow — cross, same as desktop */ .mh-menu-list li.menu-item-has-children > a::after { content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%) scale(0.6); width: 16px; height: 16px; background: linear-gradient(to bottom, #111 0%, #111 100%) center / 1.5px 100% no-repeat, linear-gradient(to right, #111 0%, #111 100%) center / 100% 1.5px no-repeat; transition: transform 0.25s ease, background 0.25s ease; } /* Open → minus (rotate 180°) */ .mh-menu-list li.menu-item-has-children.open > a::after { transform: translateY(-50%) rotate(180deg) scale(0.6); background: linear-gradient(to bottom, transparent 0%, transparent 100%) center / 1px 100% no-repeat, linear-gradient(to right, #111 0%, #111 100%) center / 100% 1.5px no-repeat; } /* Open + has active child → white minus */ .mh-menu-list li.menu-item-has-children.open:has(.sub-menu .current-menu-item) > a::after { background: linear-gradient(to bottom, transparent 0%, transparent 100%) center / 1px 100% no-repeat, linear-gradient(to right, #fff 0%, #fff 100%) center / 100% 1.5px no-repeat; } /* Closed after having active child → show + (cross white on black bg) */ .mh-menu-list li.menu-item-has-children:has(.sub-menu .current-menu-item):not(.open) > a::after { transform: translateY(-50%) scale(0.6); background: linear-gradient(to bottom, #fff 0%, #fff 100%) center / 1.5px 100% no-repeat, linear-gradient(to right, #fff 0%, #fff 100%) center / 100% 1.5px no-repeat; } /* Submenu */ .mh-menu-list .sub-menu { list-style: none !important; padding: 0 !important; margin: 0 !important; padding-left: 0 !important; padding-inline-start: 0 !important; background: transparent; border-radius: 12px; border: none; max-height: 0; overflow: hidden; transition: max-height 0.5s ease, margin 0.5s ease; position: relative !important; } .mh-menu-list .sub-menu.open, .mh-menu-list li.open > .sub-menu, .mh-menu-list li.menu-item-has-children:has(.sub-menu .current-menu-item) > .sub-menu { max-height: 400px; margin-top: 12px; } .mh-menu-list li.menu-item-has-children { position: relative; } .mh-menu-list li.menu-item-has-children > a { cursor: pointer; } .mh-menu-list .sub-menu li { position: relative; padding-left: 0 !important; padding-inline-start: 0 !important; margin-left: 0 !important; } .mh-menu-list .sub-menu li a { color: #666 !important; font-size: clamp(11px, 1.3vh, 14px) !important; text-transform: none !important; padding: clamp(4px, 0.65vh, 7.5px) clamp(12px, 1.5vh, 16px) clamp(4px, 0.65vh, 7.5px) clamp(40px, 4.8vh, 54px) !important; border-radius: 16px !important; background: transparent !important; letter-spacing: 0.02em; margin: clamp(3px, 0.54vh, 6.5px) clamp(30px, 4vh, 50px) clamp(3px, 0.54vh, 6.5px) 0 !important; display: block !important; width: auto !important; white-space: nowrap !important; transition: background 0.2s, color 0.2s; position: relative; z-index: 1; } /* ✦ indicator */ .mh-menu-list .sub-menu li a::before { content: '✦'; position: absolute; left: clamp(22px, 2.9vh, 32px); top: 50%; transform: translate(-50%, -50%); font-size: 8px; color: rgba(0,0,0,0.2); transition: color 0.2s, transform 0.2s; z-index: 2; background: none !important; width: auto; height: auto; border-radius: 0; } .mh-menu-list .sub-menu li a:hover { color: #1a1a1a !important; background: transparent !important; transform: none; } .mh-menu-list .sub-menu li a:hover::before { color: #1a1a1a; transform: translate(-50%, -50%) scale(1.3); } /* Selected submenu: NO background, bold text + ✦ red bigger */ .mh-menu-list .sub-menu li.current-menu-item.sub-reset, .mh-menu-list .sub-menu li.sub-reset { background: transparent !important; } .mh-menu-list .sub-menu li.current-menu-item.sub-reset a, .mh-menu-list .sub-menu li.sub-reset a { background: transparent !important; color: #666 !important; font-weight: 400 !important; } .mh-menu-list .sub-menu li.current-menu-item.sub-reset a::before, .mh-menu-list .sub-menu li.sub-reset a::before { color: rgba(0,0,0,0.2) !important; font-size: 8px !important; transform: translate(-50%, -50%) scale(1) !important; background: none !important; } .mh-menu-list .sub-menu li.current-menu-item:not(.sub-reset), .mh-menu-list .sub-menu li.sub-active { background: transparent !important; } .mh-menu-list .sub-menu li.current-menu-item:not(.sub-reset) a, .mh-menu-list .sub-menu li.sub-active a { background: transparent !important; color: #1a1a1a !important; font-weight: 800 !important; } .mh-menu-list .sub-menu li.current-menu-item:not(.sub-reset) a::before, .mh-menu-list .sub-menu li.sub-active a::before { color: #E20612; font-size: 10px; transform: translate(-50%, -50%) scale(1.15); background: none !important; } /* Bar — logo + X btn (slides down) */ .mh-bar { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 24px; flex-shrink: 0; transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1); } .mh-bar-logo { display: flex; } .mh-bar-logo-img { width: 38px; height: auto; filter: brightness(0); margin-left: -8px; } .mh-bar-btn { background: #1a1a1a; border: none; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 600; color: #ffffff; letter-spacing: 0.04em; height: 40px; padding: 0 20px; border-radius: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 110px; transition: background 0.3s ease; } .mh-bar-btn:hover { background: #333333; } .mh-bar-btn:active { transform: scale(0.96); } #chamspace-mobile-overlay, #chamspace-dock, #chamspace-dock-desktop { display: none !important; } } /* ================================ 7. Stats Counter Boxes (4 cột) ================================ */ /* Fix dropshadow bị cắt */ .elementor-section[data-id="b5c71df"], .elementor-section[data-id="b5c71df"] > .elementor-container, .elementor-section[data-id="b5c71df"] .elementor-row { overflow: visible !important; } /* Khoảng cách 30px giữa các cột */ .elementor-section[data-id="b5c71df"] .elementor-row { gap: 30px; display: flex !important; flex-wrap: nowrap !important; } .elementor-section[data-id="b5c71df"] .elementor-col-25 { width: calc(25% - 22.5px) !important; flex: 0 0 calc(25% - 22.5px) !important; } /* Widget wrap — glass effect + slide-in animation */ .elementor-section[data-id="b5c71df"] .elementor-widget-wrap { background: rgba(255,255,255,0.2); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); background-image: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%); border: 1px solid rgba(255,255,255,0.3); border-radius: 30px; box-shadow: 0 4px 17px rgba(0,0,0,0.14); padding: 24px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 21vh; transition: opacity 0.6s ease, transform 0.6s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; opacity: 0; transform: translateY(30px); } /* All 4 boxes get the same animation delay pattern */ .elementor-section[data-id="b5c71df"] .elementor-col-25:nth-child(1) .elementor-widget-wrap { transition-delay: 0.1s; } .elementor-section[data-id="b5c71df"] .elementor-col-25:nth-child(2) .elementor-widget-wrap { transition-delay: 0.25s; } .elementor-section[data-id="b5c71df"] .elementor-col-25:nth-child(3) .elementor-widget-wrap { transition-delay: 0.4s; } .elementor-section[data-id="b5c71df"] .elementor-col-25:nth-child(4) .elementor-widget-wrap { transition-delay: 0.55s; } .elementor-section[data-id="b5c71df"].stats-visible .elementor-widget-wrap { opacity: 1; transform: translateY(0); } /* Icon — CENTER it */ .elementor-section[data-id="b5c71df"] .elementor-icon-wrapper { display: inline-flex !important; align-items: center; justify-content: center; width: 50px !important; height: 50px !important; border-radius: 50% !important; background: #fff !important; transition: background 0.3s ease; margin-bottom: 12px; padding: 0 !important; flex-shrink: 0; } .elementor-section[data-id="b5c71df"] .elementor-icon { display: flex !important; align-items: center; justify-content: center; width: 50px !important; height: 50px !important; border-radius: 50% !important; } .elementor-section[data-id="b5c71df"] .elementor-icon i { color: #1a1a1a; font-size: 24px; transition: color 0.3s ease; } /* Hover: nền đen + shadow lớn hơn */ .elementor-section[data-id="b5c71df"] .elementor-widget-wrap:hover { background: #1a1a1a; background-image: none; transform: translateY(-4px); border-color: rgba(255,255,255,0.1); box-shadow: 0 8px 30px rgba(0,0,0,0.25); } /* Hover: icon nền đỏ */ .elementor-section[data-id="b5c71df"] .elementor-widget-wrap:hover .elementor-icon-wrapper { background: #E20612 !important; } .elementor-section[data-id="b5c71df"] .elementor-widget-wrap:hover .elementor-icon i { color: #fff; } /* Số counter — đồng bộ transition */ .elementor-section[data-id="b5c71df"] .elementor-counter-number-wrapper { display: flex !important; justify-content: center !important; font-size: 3rem !important; font-weight: 700 !important; color: #1a1a1a; transition: color 0.3s ease; width: 100%; } .elementor-section[data-id="b5c71df"] .elementor-counter-number-prefix, .elementor-section[data-id="b5c71df"] .elementor-counter-number { color: #1a1a1a; transition: color 0.3s ease; } /* Chữ mô tả */ .elementor-section[data-id="b5c71df"] .elementor-counter-title { font-size: 1.2rem !important; color: #666; font-weight: 400; line-height: 1.3 !important; transition: color 0.3s ease; } /* Hover: text trắng */ .elementor-section[data-id="b5c71df"] .elementor-widget-wrap:hover .elementor-counter-number-wrapper, .elementor-section[data-id="b5c71df"] .elementor-widget-wrap:hover .elementor-counter-number-prefix, .elementor-section[data-id="b5c71df"] .elementor-widget-wrap:hover .elementor-counter-number, .elementor-section[data-id="b5c71df"] .elementor-widget-wrap:hover .elementor-counter-title { color: #fff; } /* Responsive — tablet 2 cột */ @media (max-width: 1024px) { .elementor-section[data-id="b5c71df"] .elementor-row { flex-wrap: wrap !important; } .elementor-section[data-id="b5c71df"] .elementor-col-25 { width: calc(50% - 15px) !important; flex: 0 0 calc(50% - 15px) !important; } } /* Responsive — mobile 1 cột */ @media (max-width: 767px) { .elementor-section[data-id="b5c71df"] .elementor-widget-wrap { padding: 20px 12px; border-radius: 16px; min-height: auto; } .elementor-section[data-id="b5c71df"] .elementor-counter-number-wrapper { font-size: 2.1rem !important; } .elementor-section[data-id="b5c71df"] .elementor-counter-title { font-size: 1rem !important; } } /* =============================== CUSTOM CURSOR =============================== */ /* Hide default dot — we use arrows only */ .mf-cursor:before { display: none !important; } /* Arrow at 40% size — no crop */ .mf-cursor { contain: none !important; overflow: visible !important; } .mf-cursor-media-box { transform: scale(0.4) translateZ(0) !important; overflow: visible !important; border-radius: 0 !important; padding: 8px !important; } .mf-cursor.-media .mf-cursor-media-box { transform: scale(0.278) translateZ(0) !important; overflow: visible !important; border-radius: 0 !important; } .mf-cursor-media { overflow: visible !important; } .mf-cursor-media img, .mf-cursor-media video { border-radius: 0 !important; object-fit: contain !important; } /* =============================== SINGLE PROJECT =============================== */ .chamspace-single-project { font-family: 'Plus Jakarta Sans', sans-serif; } /* Cover */ .project-cover { position: relative; width: 100%; height: clamp(250px, 40vh, 500px); overflow: hidden; border-radius: 0 0 20px 20px; margin-bottom: 0; } .project-cover-img { width: 100%; height: 100%; object-fit: cover; } .project-cover-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 40%); } /* Header */ .project-header { padding: clamp(16px, 2vh, 30px) clamp(16px, 2vw, 40px); max-width: 900px; } .project-title { font-size: clamp(22px, 3vh, 36px); font-weight: 700; color: #1a1a1a; margin: 0 0 clamp(16px, 2vh, 28px); line-height: 1.2; } /* Info Bar */ .project-info-bar { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.5vw, 24px); padding: clamp(12px, 1.5vh, 20px) 0; border-bottom: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0; } .info-bar-item { display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 120px; } .info-bar-icon { color: #E20612; flex-shrink: 0; margin-top: 2px; } .info-bar-label { display: block; font-size: clamp(9px, 1vh, 11px); text-transform: uppercase; color: #999; letter-spacing: 0.05em; margin-bottom: 2px; } .info-bar-value { display: block; font-size: clamp(12px, 1.3vh, 15px); color: #333; font-weight: 600; } /* Layout: 2 columns */ .project-layout { display: flex; gap: clamp(24px, 3vw, 48px); padding: clamp(20px, 3vh, 40px) clamp(16px, 2vw, 40px) clamp(40px, 6vh, 80px); max-width: 1200px; } /* Main column */ .project-main { flex: 1; min-width: 0; } .project-body { color: #333; line-height: 1.8; font-size: clamp(14px, 1.5vh, 17px); } .project-body h2, .project-body h3 { font-size: clamp(18px, 2.2vh, 26px); margin: 1.5em 0 0.5em; color: #1a1a1a; } .project-body p { margin-bottom: 1.2em; } .project-body img { max-width: 100%; border-radius: 8px; margin: 1em 0; } /* Gallery */ .project-gallery { display: flex; flex-direction: column; gap: clamp(12px, 1.5vh, 20px); margin-top: clamp(24px, 3vh, 40px); } .project-gallery-item { border-radius: 10px; overflow: hidden; } .project-gallery-img { width: 100%; height: auto; display: block; } /* Details */ .project-details { margin-top: clamp(30px, 4vh, 50px); padding-top: clamp(20px, 3vh, 35px); border-top: 1px solid #e0e0e0; } .project-details-title { font-size: clamp(16px, 2vh, 22px); font-weight: 700; color: #1a1a1a; margin: 0 0 clamp(14px, 2vh, 24px); } .project-details-list { margin: 0; } .detail-row { display: flex; gap: 12px; padding: clamp(8px, 1vh, 14px) 0; border-bottom: 1px solid #f0f0f0; font-size: clamp(12px, 1.3vh, 15px); } .detail-row dt { font-weight: 600; color: #555; min-width: 130px; } .detail-row dd { margin: 0; color: #333; } /* Sticky Sidebar */ .project-sidebar { width: clamp(260px, 28vw, 340px); flex-shrink: 0; position: sticky; top: 20px; align-self: flex-start; } .project-sidebar-box { background: #fff; border-radius: 12px; padding: clamp(16px, 2vh, 24px); margin-bottom: clamp(16px, 2vh, 24px); border: 1px solid #eee; box-shadow: 0 2px 12px rgba(0,0,0,0.04); } .sidebar-box-title { font-size: clamp(14px, 1.6vh, 18px); font-weight: 700; color: #1a1a1a; margin: 0 0 6px; } .sidebar-box-subtitle { font-size: clamp(11px, 1.2vh, 13px); color: #777; margin: 0 0 16px; line-height: 1.4; } /* CF7 form inside sidebar */ .cham-cf7-project { margin-top: 8px; } .cham-cf7-project .form-row { margin-bottom: 12px; } .cham-cf7-project label { display: block; font-size: 11px; font-weight: 600; color: #555; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; } .cham-cf7-project input[type="text"], .cham-cf7-project input[type="tel"], .cham-cf7-project input[type="email"], .cham-cf7-project select, .cham-cf7-project textarea { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; font-family: 'Plus Jakarta Sans', sans-serif; background: #fafafa; box-sizing: border-box; transition: border-color 0.2s; } .cham-cf7-project input:focus, .cham-cf7-project select:focus, .cham-cf7-project textarea:focus { border-color: #E20612; outline: none; background: #fff; } .cham-cf7-project textarea { min-height: 80px; resize: vertical; } .cham-cf7-project input[type="submit"] { width: 100%; padding: 10px; background: #E20612; color: #fff; border: none; border-radius: 6px; font-size: 13px; font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; transition: background 0.2s; } .cham-cf7-project input[type="submit"]:hover { background: #c00510; } .cham-cf7-project .wpcf7-spinner { display: block; margin: 8px auto 0; } /* Recent Projects */ .recent-projects-list { list-style: none; margin: 0; padding: 0; } .recent-project-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f5f5f5; text-decoration: none; color: inherit; transition: background 0.15s; border-radius: 6px; padding: 8px; margin: 0 -8px; } .recent-project-item:hover { background: #f9f9f9; } .recent-project-item:last-child { border-bottom: none; } .recent-project-thumb { width: 50px; height: 50px; border-radius: 6px; overflow: hidden; flex-shrink: 0; } .recent-project-thumb img { width: 100%; height: 100%; object-fit: cover; } .recent-project-info { flex: 1; min-width: 0; } .recent-project-title { display: block; font-size: 12px; font-weight: 600; color: #333; line-height: 1.3; margin-bottom: 2px; } .recent-project-cat { font-size: 10px; color: #999; text-transform: uppercase; } /* Navigation */ .project-nav { margin-top: clamp(30px, 4vh, 50px); padding-top: clamp(20px, 3vh, 35px); border-top: 1px solid #e0e0e0; } .project-nav-inner { display: flex; align-items: flex-start; gap: 16px; } .project-nav-link { text-decoration: none; color: inherit; flex: 1; min-width: 0; padding: 8px; border-radius: 8px; transition: background 0.15s; } .project-nav-link:hover { background: #f5f5f5; } .project-nav-link.disabled { visibility: hidden; } .project-nav-link.prev { text-align: left; } .project-nav-link.next { text-align: right; } .nav-arrow { font-size: 16px; color: #E20612; display: inline-block; } .nav-label { display: block; font-size: 10px; text-transform: uppercase; color: #999; letter-spacing: 0.05em; margin: 4px 0; } .nav-title { display: block; font-size: clamp(12px, 1.3vh, 15px); font-weight: 600; color: #1a1a1a; line-height: 1.3; } .project-nav-all { text-decoration: none; font-size: 11px; color: #999; text-transform: uppercase; text-align: center; flex-shrink: 0; padding: 8px 12px; letter-spacing: 0.05em; transition: color 0.15s; } .project-nav-all:hover { color: #E20612; } /* Responsive */ @media (max-width: 900px) { .project-layout { flex-direction: column; } .project-sidebar { width: 100%; position: static; order: -1; } .project-cover { height: clamp(200px, 30vh, 350px); border-radius: 0; } } @media (max-width: 640px) { .project-info-bar { gap: 8px; } .info-bar-item { min-width: 45%; } .project-nav-inner { flex-wrap: wrap; } .project-nav-all { width: 100%; order: -1; margin-bottom: 12px; } } /* =============================== PROJECTS ARCHIVE GRID =============================== */ .chamspace-archive-projects { padding: 30px 16px 120px; font-family: 'Plus Jakarta Sans', sans-serif; background: #f5f5f5; } .projects-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 40px; } .project-card { text-decoration: none; color: inherit; display: block; transition: transform 0.3s ease; } .project-card:hover { transform: translateY(-4px); } .project-card-teaser { position: relative; margin-bottom: 16px; } .project-card-image { position: relative; width: 100%; padding-bottom: 75%; overflow: hidden; border-radius: 9px; background: #e0e0e0; } .project-card-thumb { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border-radius: 9px; transition: transform 0.6s ease; } .project-card:hover .project-card-thumb { transform: scale(1.05); } .project-card-placeholder { position: absolute; inset: 0; background: #e0e0e0; border-radius: 9px; } .project-card-name { position: absolute; left: -15px; bottom: -15px; font-size: calc(20px + 1.5vw); line-height: 1.1; font-weight: 500; color: #fff !important; margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,0.4); transition: color 0.2s ease; z-index: 2; } .project-card:hover .project-card-name { color: #000 !important; } .project-card-info { display: flex; flex-wrap: wrap; gap: 16px; min-height: 70px; padding: 4px 0; } .project-info-item { flex: 1; min-width: 100px; } .project-info-label { display: block; font-size: 11px; text-transform: uppercase; color: #999; letter-spacing: 0.05em; margin-bottom: 3px; } .project-info-value { display: block; font-size: 12px; color: #333; font-weight: 500; } .projects-empty { text-align: center; padding: 80px 20px; color: #999; font-size: 16px; } @media (max-width: 1024px) { .projects-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px; } .project-card-name { left: -10px; bottom: -10px; } } @media (max-width: 640px) { .projects-grid { grid-template-columns: 1fr !important; gap: 24px; } .project-card-name { font-size: calc(28px + 2vw); left: -6px; bottom: -6px; } .project-card-info { min-height: 60px; } } /* =============================== SINGLE PROJECT =============================== */ .chamspace-single-project { font-family: 'Plus Jakarta Sans', sans-serif; background: #f5f5f5; } .project-cover { width: 100%; height: clamp(200px, 40vh, 500px); overflow: hidden; border-radius: 0; margin-bottom: 0; } .project-cover img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; } .project-title-section { padding: 30px 0; } .project-layout { display: flex; gap: clamp(20px, 3vw, 50px); align-items: flex-start; } .project-main-content { flex: 1; min-width: 0; } .project-sidebar { width: clamp(280px, 25vw, 380px); flex-shrink: 0; position: sticky; top: 20px; } .project-gallery { margin-top: 40px; } .project-gallery h3 { font-size: 14px; text-transform: uppercase; color: #999; letter-spacing: 0.1em; margin-bottom: 16px; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .gallery-grid img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; cursor: pointer; } .project-detail-repeater { margin-top: 40px; } .detail-item { border-bottom: 1px solid #eee; padding: 16px 0; } .detail-item h4 { font-size: 13px; text-transform: uppercase; color: #999; letter-spacing: 0.05em; margin-bottom: 6px; } .detail-item p { margin: 0; font-size: 14px; color: #333; } .project-info-bar { display: flex; flex-wrap: wrap; gap: clamp(12px, 2vw, 24px); padding: 20px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin: 20px 0; } .info-bar-item { flex: 1; min-width: 100px; } .info-bar-label { display: block; font-size: 10px; text-transform: uppercase; color: #999; letter-spacing: 0.08em; margin-bottom: 4px; } .info-bar-value { display: block; font-size: 14px; font-weight: 600; color: #1a1a1a; } .project-nav { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; } .project-nav-inner { display: flex; gap: 16px; justify-content: space-between; } .project-nav-link { font-size: 13px; color: #666; text-decoration: none; transition: color 0.2s; } .project-nav-link:hover { color: #000; } .project-nav-all { font-size: 13px; color: #999; text-decoration: none; transition: color 0.2s; } .project-nav-all:hover { color: #000; } /* Responsive */ @media (max-width: 900px) { .project-layout { flex-direction: column; } .project-sidebar { width: 100%; position: static; order: -1; } .project-cover { height: clamp(200px, 30vh, 350px); border-radius: 0; } } @media (max-width: 640px) { .project-info-bar { gap: 8px; } .info-bar-item { min-width: 45%; } .project-nav-inner { flex-wrap: wrap; } .project-nav-all { width: 100%; order: -1; margin-bottom: 12px; } } .menu-item-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px; } .menu-item-icon svg { width: 16px; height: 16px; } /* Desktop: dark icons */ .menu-list .menu-item-icon svg { stroke: #1a1a1a; opacity: 0.7; } /* Home/Liên hệ active */ .menu-list > li.current-menu-item > a .menu-item-icon svg { stroke: #fff; opacity: 1; } /* Parent khi submenu child active → icon trắng */ .menu-list > li.menu-item-has-children:has(.sub-menu .current-menu-item) > a .menu-item-icon svg { stroke: #fff; opacity: 1; } /* Khi click mở submenu (gray bg) → icon đen */ .menu-list > li.menu-item-has-children.open > a .menu-item-icon svg { stroke: #1a1a1a; opacity: 0.7; } /* Mobile menu: black icons (glass background) */ .mh-menu-list .menu-item-icon svg { stroke: #1a1a1a; opacity: 0.5; } .mh-menu-list > li.current-menu-item > a .menu-item-icon svg, .mh-menu-list > li.menu-item-has-children.open > a .menu-item-icon svg { stroke: #1a1a1a; opacity: 0.8; } /* Parent active → white icon on black bg */ .mh-menu-list > li.current-menu-item > a .menu-item-icon svg { stroke: #fff; opacity: 1; } /* Hide icon in submenu */ .sub-menu .menu-item-icon { display: none; }