/* ========================================================= VNCPC / Enfold Child Theme CSS 2026 — BẢN ĐÃ TỐI ƯU & SỬA LỖI Hướng thiết kế: mềm, xanh môi trường, nhiều khoảng thở. Load: enqueue qua functions.php (handle: vncpc-style-vn, depends: avia-scs) Migrated từ Quick CSS DB → child theme file: 2026-06-22 Thay đổi so với bản cũ: - Mục 11: bỏ phần footer trùng lặp (đã gộp về mục 14) - Bỏ rule "display:block" trên .flex_column gây bóp hẹp card - Thêm mục 16: FIX layout trang Dịch vụ bằng CSS Grid ========================================================= */ /* ------------------------------- 01. Design tokens -------------------------------- */ :root { --vncpc-forest: #173f2c; --vncpc-forest-2: #0f2f22; --vncpc-leaf: #6fa43a; --vncpc-leaf-2: #8fbd4a; --vncpc-mint: #eaf6ee; --vncpc-mint-2: #f5faf3; --vncpc-sage: #eef4e8; --vncpc-teal: #0f766e; --vncpc-earth: #a56a35; --vncpc-cream: #fffdf6; --vncpc-white: #ffffff; --vncpc-ink: #24342b; --vncpc-muted: #637267; --vncpc-soft-border: rgba(23, 63, 44, 0.12); --vncpc-soft-border-2: rgba(111, 164, 58, 0.22); --vncpc-shadow-sm: 0 10px 26px rgba(23, 63, 44, 0.07); --vncpc-shadow-md: 0 18px 48px rgba(23, 63, 44, 0.10); --vncpc-shadow-lg: 0 28px 80px rgba(23, 63, 44, 0.15); --vncpc-radius-sm: 14px; --vncpc-radius-md: 22px; --vncpc-radius-lg: 30px; --vncpc-radius-xl: 42px; --vncpc-ease: all 0.22s ease; --vncpc-font: 'Be Vietnam Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* ------------------------------- 02. Global polish -------------------------------- */ html { scroll-behavior: smooth; } #top { color: var(--vncpc-ink); background: var(--vncpc-mint-2); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } #top #main { background: radial-gradient(circle at 0 4%, rgba(111, 164, 58, 0.08), transparent 28%), linear-gradient(180deg, #ffffff 0%, var(--vncpc-mint-2) 100%); } #top .container { max-width: 1200px; } #top a { transition: var(--vncpc-ease); } #top a:hover { text-decoration: none; } /* Solid leaf bg + white text: readable on both light content and dark hero (the old translucent bg + forest text turned near-black over hero images) */ #top ::selection { background: var(--vncpc-leaf); color: #fff; } #top ::-moz-selection { background: var(--vncpc-leaf); color: #fff; } #top strong, #top b { color: var(--vncpc-forest); font-weight: 800; } #top p, #top li { color: var(--vncpc-muted); line-height: 1.72; } #top .main_color, #top .alternate_color { color: var(--vncpc-ink); } #top .alternate_color { background-color: var(--vncpc-mint-2); } /* News detail page: drop the title_container hero entirely. It only ever shows the Blog page title ("Tin tức"), not the post's own title, duplicating/contradicting the real H1 that already renders in article > .entry-content-wrapper > header. The article's own featured image (.big-preview.single-big, styled below) takes over as the visual hero instead. NOTE: #top IS the element on this theme, so the class must be compound (#top.single-post), not descendant (body.single-post #top). */ #top.single-post .title_container { display: none !important; } /* Global title_container -> reuse #vncpc-home-hero visual language (background image + same soft radial darken as .hero-textbox) */ #top .title_container { position: relative; overflow: hidden; min-height: 290px; padding: 62px 0 50px !important; background-color: #173f2c !important; background-image: var(--vncpc-title-hero-bg, none) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; border: 0 !important; } #top .title_container::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(5, 45, 28, 0.46) 0%, rgba(5, 45, 28, 0.34) 36%, rgba(5, 45, 28, 0.16) 66%, rgba(5, 45, 28, 0) 100%); } #top .title_container .container { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: min(100%, 1040px) !important; max-width: 1040px !important; padding-left: 24px; padding-right: 24px; text-align: center; } #top .title_container .main-title, #top .title_container .main-title a { color: #fff !important; display: block; max-width: 980px; margin-left: auto; margin-right: auto; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.22; font-weight: 700; order: 2; text-align: center !important; text-shadow: 0 4px 16px rgba(0, 0, 0, 0.44), 0 2px 6px rgba(0, 0, 0, 0.38), 0 1px 1px rgba(0, 0, 0, 0.50) !important; } #top .title_container .breadcrumb { /* Enfold pins this absolute (right:50px; top:50%) which makes it overlap the centered title — bring it back into the flex flow so order works */ position: static !important; right: auto !important; top: auto !important; float: none !important; display: inline-flex; justify-content: center; flex-wrap: wrap; order: 1; gap: 6px; width: 100%; text-align: center !important; margin-top: 0 !important; margin-bottom: 10px; font-size: 14px; line-height: 1.5; } #top .title_container .breadcrumb, #top .title_container .breadcrumb a, #top .title_container .breadcrumb span { color: rgba(255, 255, 255, 0.92) !important; } /* Hide Enfold "You are here:" label in all breadcrumbs */ #top .breadcrumb .trail-before, #top .breadcrumb .breadcrumb-title { display: none !important; } /* On single portfolio pages, avoid repeating long title in breadcrumb (single-post no longer shows title_container at all, see above) */ #top.single-portfolio .title_container .breadcrumb .trail-end { display: none !important; } @media only screen and (max-width: 767px) { #top .title_container { min-height: 220px; padding: 32px 0 28px !important; } #top .title_container .container { width: 92% !important; padding-left: 8px; padding-right: 8px; } #top .title_container .main-title, #top .title_container .main-title a { font-size: clamp(24px, 6.8vw, 28px); line-height: 1.28; max-width: 100%; } #top .title_container .breadcrumb { font-size: 13px; } } /* ------------------------------- 03. Typography -------------------------------- */ #top h1, #top h2, #top h3, #top h4, #top h5, #top h6, #top .av-special-heading-tag { color: var(--vncpc-forest); font-weight: 850; letter-spacing: -0.035em; } #top h1, #top .template-page .entry-content-wrapper h1 { line-height: 1.03; } #top h2, #top .template-page .entry-content-wrapper h2 { line-height: 1.12; } #top .av-special-heading { margin-bottom: 26px; } #top .av-special-heading .av-subheading { color: var(--vncpc-muted); line-height: 1.75; } #top .av-special-heading .av-special-heading-tag { margin-bottom: 10px; } #top .heading-color { color: var(--vncpc-forest) !important; } /* ------------------------------- 04. Header / menu -------------------------------- */ #top #header { box-shadow: 0 10px 30px rgba(23, 63, 44, 0.08); } #top #header_main { border-bottom: 1px solid var(--vncpc-soft-border); background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 253, 247, 0.94)); } #top #header_meta { border-bottom: 1px solid rgba(23, 63, 44, 0.08); background: var(--vncpc-forest); } #top #header_meta, #top #header_meta a, #top #header_meta li { color: rgba(255, 255, 255, 0.88) !important; } #top #header_meta a:hover { color: var(--vncpc-white) !important; } #top .logo img { max-height: 60px; width: auto; transition: max-height 0.3s ease; } #top .av-border-deactivate.avia-logo-element-container img { box-shadow: none; max-height: 120px; } /* ---- Logo responsive sizing ---- */ @media only screen and (max-width: 1199px) { #top .logo img { max-height: 52px; } } @media only screen and (max-width: 989px) { #top .logo img { max-height: 46px; } } @media only screen and (max-width: 767px) { #top .logo img { max-height: 44px; } } #top .av-main-nav>li>a { color: var(--vncpc-forest) !important; font-weight: 780; letter-spacing: -0.01em; padding: 0 8px !important; } #top .av-main-nav>li>a .avia-menu-text { padding: 5px 8px; border-radius: 999px; } #top .av-main-nav>li:hover>a .avia-menu-text, #top .av-main-nav>li.current-menu-item>a .avia-menu-text, #top .av-main-nav>li.current-menu-ancestor>a .avia-menu-text { background: var(--vncpc-mint); color: var(--vncpc-forest) !important; } #top .av-main-nav ul { border-radius: 18px; border: 1px solid var(--vncpc-soft-border); box-shadow: var(--vncpc-shadow-md); overflow: hidden; } #top .av-main-nav ul a { color: var(--vncpc-ink) !important; font-weight: 650; } #top .av-main-nav ul a:hover { background: var(--vncpc-mint) !important; color: var(--vncpc-forest) !important; } #top #menu-item-search>a { border-radius: 999px; } #top .av-burger-overlay { background: rgba(15, 47, 34, 0.98); } #top .av-burger-overlay a { color: var(--vncpc-white) !important; } /* ---- Priority+ Nav: "Thêm ▾" overflow dropdown ---- */ #top .vncpc-menu-more { position: relative; } #top .vncpc-menu-more > a { color: var(--vncpc-forest) !important; font-weight: 650; cursor: pointer; } #top .vncpc-menu-more > a .avia-menu-text { padding: 5px 8px; border-radius: 999px; background: var(--vncpc-mint-2); } #top .vncpc-menu-more:hover > a .avia-menu-text { background: var(--vncpc-mint); color: var(--vncpc-forest) !important; } #top .vncpc-more-dropdown { position: absolute !important; top: 100% !important; right: 0 !important; min-width: 200px !important; background: var(--vncpc-white) !important; border-radius: 14px !important; border: 1px solid var(--vncpc-soft-border) !important; box-shadow: var(--vncpc-shadow-md) !important; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s; z-index: 9999 !important; padding: 8px 0 !important; list-style: none !important; } #top .vncpc-menu-more:hover .vncpc-more-dropdown { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } #top .vncpc-more-dropdown li { display: block !important; margin: 0 !important; padding: 0 !important; height: auto !important; line-height: normal !important; float: none !important; } #top .vncpc-more-dropdown li a { display: block !important; padding: 10px 20px !important; color: var(--vncpc-ink) !important; font-weight: 500 !important; font-size: 13.5px !important; line-height: 1.5 !important; height: auto !important; text-decoration: none !important; transition: background 0.15s ease, color 0.15s ease; float: none !important; border: none !important; background: transparent !important; text-align: left !important; } #top .vncpc-more-dropdown li a:hover { background: var(--vncpc-mint) !important; color: var(--vncpc-forest) !important; } #top .vncpc-more-dropdown li .avia-menu-text { padding: 0 !important; border-radius: 0 !important; background: none !important; display: inline !important; height: auto !important; } /* Fix submenu arrows trong dropdown */ #top .vncpc-more-dropdown .avia-menu-fx { display: none !important; } /* ---- End Priority+ Nav ---- */ /* Ẩn nút "Thêm/More" custom trong menu mobile drawer của Enfold */ #av-burger-menu-ul .vncpc-menu-more, .av-burger-overlay .vncpc-menu-more { display: none !important; } @media only screen and (max-width: 767px) { #top .vncpc-menu-more { display: none !important; } } /* Tinh chỉnh Enfold mobile hamburger mảnh và thanh lịch */ #top .av-burger-menu-main a.av-hamburger { height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } #top .av-hamburger-box { width: 22px !important; height: 16px !important; } #top .av-hamburger-inner { width: 22px !important; height: 2px !important; /* Mảnh hơn (mặc định Enfold dày 3-4px) */ background-color: var(--vncpc-forest) !important; border-radius: 99px !important; margin-top: -1px !important; } #top .av-hamburger-inner::before { width: 22px !important; height: 2px !important; background-color: var(--vncpc-forest) !important; border-radius: 99px !important; top: -7px !important; } #top .av-hamburger-inner::after { width: 22px !important; height: 2px !important; background-color: var(--vncpc-forest) !important; border-radius: 99px !important; bottom: -7px !important; } /* Hiệu ứng X khi active mảnh hơn và đổi sang màu trắng nổi trên nền xanh lá đậm */ #top .av-js-hamburger.is-active .av-hamburger-inner, #top .is-active .av-hamburger-inner { background-color: transparent !important; } #top .av-js-hamburger.is-active .av-hamburger-inner::before, #top .is-active .av-hamburger-inner::before { transform: translate3d(0, 7px, 0) rotate(45deg) !important; background-color: var(--vncpc-white) !important; } #top .av-js-hamburger.is-active .av-hamburger-inner::after, #top .is-active .av-hamburger-inner::after { transform: translate3d(0, -7px, 0) rotate(-45deg) !important; background-color: var(--vncpc-white) !important; } /* Fix WPML language flag — lock cả span + img, tránh flag to choán topbar */ /* Root cause: Enfold wpml-mod.css set height:30px + display:block trên container, height:auto browser default trên img lấn át height riêng lẻ. */ #top #header_meta .avia_wpml_language_switch .language_flag, #top #header_meta .avia_wpml_language_switch_extra .language_flag { display: inline-block !important; width: 18px !important; height: 12px !important; line-height: 12px !important; } #top #header_meta .language_flag img { width: 18px !important; min-width: 18px !important; max-width: 18px !important; height: 12px !important; min-height: 12px !important; max-height: 12px !important; object-fit: cover; display: inline-block; vertical-align: top; } /* Mobile only: giữ "Dịch vụ nổi bật" và lá cờ trên cùng 1 dòng, căn giữa thẳng hàng tuyệt đối */ @media only screen and (max-width: 767px) { .responsive #header .sub_menu { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; float: none !important; text-align: initial !important; white-space: nowrap !important; min-height: 30px !important; } .responsive #header .sub_menu > ul, .responsive #header .sub_menu > ul.avia_wpml_language_switch { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 6px !important; padding: 0 !important; height: auto !important; line-height: normal !important; float: none !important; list-style: none !important; } .responsive #header .sub_menu > ul > li, .responsive #header .sub_menu > ul.avia_wpml_language_switch > li { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: auto !important; line-height: normal !important; padding: 0 6px !important; margin: 0 !important; float: none !important; } .responsive #header .sub_menu > ul > li > a, .responsive #header .sub_menu > ul.avia_wpml_language_switch > li > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: auto !important; line-height: normal !important; padding: 0 !important; margin: 0 !important; } .responsive #header .sub_menu > ul.menu { margin-right: 10px !important; } } /* ------------------------------- 05. Buttons / links / forms -------------------------------- */ #top .avia-button, #top input[type="submit"], #top button, #top .button { border-radius: 999px; font-weight: 800 !important; letter-spacing: -0.01em; box-shadow: none; transition: var(--vncpc-ease); } #top .avia-button:hover, #top input[type="submit"]:hover, #top button:hover, #top .button:hover { transform: translateY(-2px); box-shadow: var(--vncpc-shadow-sm); } #top .avia-color-theme-color, #top .avia-color-theme-color-highlight, #top input[type="submit"] { background: var(--vncpc-leaf) !important; border-color: var(--vncpc-leaf) !important; color: var(--vncpc-white) !important; } #top .avia-color-theme-color:hover, #top .avia-color-theme-color-highlight:hover, #top input[type="submit"]:hover { background: var(--vncpc-forest) !important; border-color: var(--vncpc-forest) !important; color: var(--vncpc-white) !important; } #top .avia-color-light { background: rgba(255, 255, 255, 0.92) !important; border-color: rgba(255, 255, 255, 0.55) !important; color: var(--vncpc-forest) !important; } #top input[type="text"], #top input[type="email"], #top input[type="tel"], #top input[type="url"], #top input[type="search"], #top textarea, #top select { border-radius: 16px; border: 1px solid var(--vncpc-soft-border) !important; background: var(--vncpc-white) !important; color: var(--vncpc-ink) !important; box-shadow: inset 0 1px 0 rgba(23, 63, 44, 0.03); } #top input:focus, #top textarea:focus, #top select:focus { border-color: var(--vncpc-leaf) !important; box-shadow: 0 0 0 4px rgba(111, 164, 58, 0.14); outline: none !important; } /* ------------------------------- 06. Soft cards: Enfold defaults -------------------------------- */ #top .iconbox, #top .avia-icon-list-container, #top .av_textblock_section, #top .avia-testimonial, #top .av-magazine, #top .slide-entry, #top .grid-entry, #top .avia-team-member, #top .av-catalogue-container, #top .togglecontainer { border-radius: var(--vncpc-radius-lg); } #top .iconbox, #top .avia-testimonial, #top .avia-team-member, #top .av-catalogue-container, #top .togglecontainer { background: var(--vncpc-white); border: 1px solid var(--vncpc-soft-border); box-shadow: var(--vncpc-shadow-sm); } #top .iconbox { padding: 28px 24px; overflow: hidden; transition: var(--vncpc-ease); } #top .iconbox:hover { transform: translateY(-4px); box-shadow: var(--vncpc-shadow-md); } #top .iconbox_icon { color: var(--vncpc-leaf) !important; border-color: var(--vncpc-leaf) !important; background: var(--vncpc-mint) !important; } #top .iconbox_content_title { color: var(--vncpc-forest) !important; font-weight: 850 !important; } #top .avia-icon-list .iconlist_icon { background: var(--vncpc-leaf) !important; color: var(--vncpc-white) !important; box-shadow: 0 8px 22px rgba(111, 164, 58, 0.28); } #top .avia-icon-list .iconlist_title { color: var(--vncpc-forest); font-weight: 850; } #top .avia-icon-list .iconlist_content { color: var(--vncpc-muted); font-size: 15px; line-height: 1.62; } #top .avia-image-container img, #top .avia-slideshow img, #top .big-preview img, #top .small-preview img, #top .wp-caption img, #top .slide-image img, #top .grid-image img, #top .avia-gallery-thumb img { border-radius: var(--vncpc-radius-md); } #top .avia-image-container img, #top .big-preview img, #top .slide-image img, #top .grid-image img { box-shadow: var(--vncpc-shadow-sm); } #top .avia-image-container, #top .avia-slideshow, #top .avia-gallery { overflow: hidden; } /* Không làm méo logo */ #top .logo img, #top #footer img, #top .avia-logo-element-container img { border-radius: 0; box-shadow: none; } /* ------------------------------- 06b. VNCPC Team Member Cards — Curtain Reveal on Hover -------------------------------- */ /* 1. Sửa thẻ của 2 Sếp (Cột 1/2): Bóp gọn khối card */ #top .av_one_half .avia-team-member { max-width: 400px; margin-left: auto !important; margin-right: auto !important; } #top .av_one_half .avia-team-member .team-img-container img { width: 100% !important; max-width: 100% !important; } /* 2. Styling chung — flex dọc, ảnh quyết định chiều cao */ #top .avia-team-member { background: var(--vncpc-white); border: 1px solid rgba(23, 63, 44, 0.08); border-radius: 24px; padding: 20px 12px; box-shadow: 0 10px 26px rgba(23, 63, 44, 0.05); transition: all 0.3s ease; margin-bottom: 18px; display: flex; flex-direction: column; } #top .avia-team-member:hover { transform: translateY(-5px); box-shadow: 0 18px 48px rgba(23, 63, 44, 0.12); border-color: rgba(111, 164, 58, 0.28); } /* 3. Ảnh luôn 3×4 portrait — đồng nhất chiều cao giữa các card */ #top .avia-team-member .team-img-container img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; border-radius: 16px; } /* 4. Hiệu ứng "kéo rèm" cho phần mô tả */ #top .avia-team-member .team-member-description { padding: 0 !important; margin-top: 0; max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.33, 0, 0.2, 1), margin-top 0.5s cubic-bezier(0.33, 0, 0.2, 1), opacity 0.35s ease; opacity: 0; } #top .avia-team-member:hover .team-member-description { max-height: 200px; margin-top: 8px; opacity: 1; } /* 5. Icon Email — luôn hiển thị, phân cách với vùng kéo rèm */ #top .avia-team-member .avia-team-socials { margin-top: 12px; text-align: center; padding-top: 14px; border-top: 1px dashed rgba(23, 63, 44, 0.1); } #top .avia-team-member .avia-team-socials .social_bookmarks { float: none !important; display: inline-block; } /* 6. Typography */ #top .avia-team-member .team-member-name { color: var(--vncpc-forest) !important; font-size: 19px; font-weight: 850; margin-top: 18px; margin-bottom: 4px; text-align: center; } #top .avia-team-member .team-member-job-title { color: var(--vncpc-leaf) !important; font-size: 14.5px; font-weight: 700; text-align: center; margin-bottom: 4px; display: block; min-height: 3.6em; /* ← thêm dòng này: đủ cho 3 dòng chức danh */ line-height: 1.35; } #top .avia-team-member .team-member-description p, #top .avia-team-member .team-member-description { color: var(--vncpc-muted); font-size: 14px; line-height: 1.6; text-align: center; margin-bottom: 0; } /* ------------------------------- 07. Blog / post / magazine / portfolio -------------------------------- */ /* Áp dụng màu nút Hero cho toàn bộ thanh Magazine Top Bar */ #top .av-magazine-top-bar { background: linear-gradient(135deg, #68a83a 0%, #3f7f20 100%) !important; border: 1px solid rgba(255, 255, 255, 0.42) !important; border-radius: 20px; padding: 12px 18px; box-shadow: 0 9px 22px rgba(0, 0, 0, 0.15); margin-bottom: 20px; } /* Reset lại heading bên trong để không bị viền/nền kép */ #top .av-magazine-top-heading { border: 0; background: transparent !important; padding: 0; margin: 0; } /* Ép màu trắng cho chữ và link */ #top .av-magazine-top-bar, #top .av-magazine-top-bar a, #top .av-magazine-top-heading h3, #top .av-magazine-top-heading a { color: var(--vncpc-white) !important; } #top .av-magazine-top-bar a:hover { color: var(--vncpc-mint) !important; opacity: 0.9; } #top .av-magazine-entry { /* Bỏ border-bottom gốc của Enfold — border đến từ theme CSS (được tô màu bởi .main_color { border-color: #e1e1e1 }), không phải từ rule của ta. 0px không đủ vì border nằm ở element con bên trong, không phải trên chính .av-magazine-entry. */ border: none !important; padding: 14px 0; } #top .av-magazine-entry .av-magazine-content-wrap, #top .av-magazine-entry .av-magazine-content, #top .av-magazine-entry .av-magazine-title, #top .av-magazine-entry .av-magazine-title a { border-bottom: none; box-shadow: none; } #top .av-magazine-thumbnail { border-radius: 14px; overflow: hidden; } #top .av-magazine-thumbnail img { border-radius: 14px; } #top .av-magazine-title { color: var(--vncpc-forest); font-weight: 800; line-height: 1.42; } #top .av-magazine-title:hover { color: var(--vncpc-leaf); } #top .slide-entry, #top .grid-entry { background: var(--vncpc-white); border: 1px solid var(--vncpc-soft-border); box-shadow: var(--vncpc-shadow-sm); overflow: hidden; transition: var(--vncpc-ease); } #top .slide-entry:hover, #top .grid-entry:hover { transform: translateY(-4px); box-shadow: var(--vncpc-shadow-md); } #top .slide-content, #top .grid-content { padding: 18px; } #top .slide-entry-title, #top .grid-entry-title { color: var(--vncpc-forest); font-weight: 850; line-height: 1.32; } #top .slide-entry-excerpt, #top .grid-entry-excerpt { color: var(--vncpc-muted); line-height: 1.65; } /* ------------------------------- 07b. Magazine & Post Slider — Equal Height (ĐÃ SỬA) -------------------------------- */ /* === A. POST SLIDER (Dự án tiêu biểu) === */ /* Ảnh đồng nhất tỷ lệ 16:9 */ #top .avia-content-slider .slide-image img { width: 100% !important; aspect-ratio: 16 / 9; object-fit: cover; } /* Mỗi card xếp dọc (KHÔNG flex lên .avia-content-slider-inner — sẽ vỡ slider fade) */ #top .avia-content-slider .slide-entry { display: flex !important; flex-direction: column !important; height: auto !important; } #top .avia-content-slider .slide-content { flex-grow: 1 !important; } /* CHÌA KHÓA: clamp tiêu đề về 3 dòng + giữ chỗ -> 4 card bằng nhau */ #top .avia-content-slider .slide-entry-title { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.2em; /* 3 dòng × 1.4 */ line-height: 1.4; } /* === B. MAGAZINE (3 cột tin tức) === */ /* Ảnh bài lớn 16:9 */ #top .av-magazine-hero img { width: 100% !important; aspect-ratio: 16 / 9; object-fit: cover; } /* Tiêu đề + mô tả bài lớn */ #top .av-magazine-hero .av-magazine-title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; line-height: 1.4; } #top .av-magazine-hero .av-magazine-content { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } /* CHÌA KHÓA: clamp tiêu đề bài NHỎ -> 3 cột thẳng hàng theo từng dòng */ #top .av-magazine-sideshow .av-magazine-title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; line-height: 1.3; } /* ------------------------------- 08. Home refactor components -------------------------------- */ #top #vncpc-home-hero, #top #vncpc-home-focus, #top #vncpc-home-about, #top #vncpc-home-projects, #top #vncpc-home-news, #top #vncpc-home-partners, #top #vncpc-home-final-cta { overflow: hidden; } #top #vncpc-home-hero .container, #top #vncpc-home-focus .container, #top #vncpc-home-about .container, #top #vncpc-home-projects .container, #top #vncpc-home-news .container, #top #vncpc-home-partners .container, #top #vncpc-home-final-cta .container { max-width: 1200px; } #top .vncpc-eyebrow, #top .vncpc-section-heading span, #top .vncpc-final-cta-copy span, #top .vncpc-section-title span { display: inline-flex; align-items: center; width: fit-content; margin-bottom: 12px; padding: 8px 15px; border-radius: 999px; background: var(--vncpc-mint); color: var(--vncpc-leaf); font-size: 12px; font-weight: 900; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; } #top .vncpc-btn, #top .vncpc-section-link, #top .vncpc-text-link { text-decoration: none; } #top .vncpc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 22px; border-radius: 999px; font-size: 15px; font-weight: 850; line-height: 1.2; transition: var(--vncpc-ease); } #top .vncpc-btn-primary { background: var(--vncpc-leaf); color: var(--vncpc-white) !important; box-shadow: 0 16px 34px rgba(111, 164, 58, 0.30); } #top .vncpc-btn-primary:hover { background: var(--vncpc-forest); color: var(--vncpc-white) !important; transform: translateY(-2px); } #top .vncpc-btn-secondary { background: var(--vncpc-white); color: var(--vncpc-forest) !important; border: 1px solid var(--vncpc-soft-border); } #top .vncpc-btn-secondary:hover { background: var(--vncpc-mint); color: var(--vncpc-forest) !important; transform: translateY(-2px); } #top .vncpc-hero-copy { max-width: 640px; padding: 20px 0; } #top .vncpc-hero-copy h1 { margin: 0; color: var(--vncpc-forest); font-size: clamp(42px, 5.4vw, 72px); line-height: 0.98; letter-spacing: -0.065em; } #top .vncpc-hero-lead { max-width: 590px; margin: 26px 0 0; color: #40564a; font-size: 18px; line-height: 1.75; } #top .vncpc-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } #top .vncpc-hero-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 36px; } #top .vncpc-hero-trust div { min-width: 0; padding: 18px 16px; border-radius: 24px; background: rgba(255, 255, 255, 0.80); border: 1px solid var(--vncpc-soft-border); box-shadow: var(--vncpc-shadow-sm); backdrop-filter: blur(10px); } #top .vncpc-hero-trust strong { display: block; margin-bottom: 6px; color: var(--vncpc-forest); font-size: 25px; line-height: 1; letter-spacing: -0.03em; } #top .vncpc-hero-trust span { display: block; color: var(--vncpc-muted); font-size: 13px; line-height: 1.35; } #top .vncpc-hero-visual { position: relative; max-width: 560px; margin-left: auto; padding: 28px; } #top .vncpc-hero-visual:before { content: ""; position: absolute; inset: 7% 0 0 12%; border-radius: var(--vncpc-radius-xl); background: var(--vncpc-leaf); opacity: 0.16; transform: rotate(-5deg); } #top .vncpc-hero-image { position: relative; overflow: hidden; border-radius: var(--vncpc-radius-xl); background: #dfead3; box-shadow: var(--vncpc-shadow-lg); } #top .vncpc-hero-image img { display: block; width: 100%; height: 520px; object-fit: cover; object-position: center center; border-radius: var(--vncpc-radius-xl); } #top .vncpc-floating-card { position: absolute; z-index: 3; max-width: 230px; padding: 16px 18px; border-radius: 24px; background: var(--vncpc-white); border: 1px solid var(--vncpc-soft-border); box-shadow: var(--vncpc-shadow-md); } #top .vncpc-floating-card span { display: block; margin-bottom: 5px; color: #738177; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } #top .vncpc-floating-card strong { display: block; color: var(--vncpc-forest); font-size: 17px; line-height: 1.25; } #top .vncpc-floating-card-1 { left: 0; top: 90px; } #top .vncpc-floating-card-2 { right: 0; bottom: 80px; } /* Section heading */ #top .vncpc-section-heading, #top .vncpc-section-title { max-width: 840px; margin: 0 auto 40px; text-align: center; } #top .vncpc-section-heading h2, #top .vncpc-section-title h2 { margin: 0 0 12px; color: var(--vncpc-forest); font-size: clamp(32px, 4.2vw, 50px); line-height: 1.08; letter-spacing: -0.055em; } #top .vncpc-section-heading p, #top .vncpc-section-title p { margin: 0; color: var(--vncpc-muted); font-size: 16px; line-height: 1.75; } #top .vncpc-section-heading-row { max-width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; text-align: left; } #top .vncpc-section-link { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 17px; border-radius: 999px; background: var(--vncpc-mint); color: var(--vncpc-forest) !important; font-weight: 850; border: 1px solid var(--vncpc-soft-border); } #top .vncpc-section-link:hover { background: var(--vncpc-leaf); color: var(--vncpc-white) !important; } /* Focus cards */ #top .vncpc-focus-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } #top .vncpc-focus-card { position: relative; display: block; min-height: 300px; padding: 28px 24px; border-radius: var(--vncpc-radius-lg); background: linear-gradient(145deg, rgba(111, 164, 58, 0.10), rgba(255, 255, 255, 0) 52%), #ffffff; border: 1px solid var(--vncpc-soft-border); box-shadow: var(--vncpc-shadow-sm); overflow: hidden; text-decoration: none; transition: var(--vncpc-ease); } #top .vncpc-focus-card:after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(111, 164, 58, 0.08); } #top .vncpc-focus-card:hover { transform: translateY(-6px); box-shadow: var(--vncpc-shadow-md); } #top .vncpc-focus-icon { width: 54px; height: 54px; margin-bottom: 26px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: var(--vncpc-forest); color: var(--vncpc-white); font-weight: 900; letter-spacing: -0.03em; } #top .vncpc-focus-card h3 { margin: 0 0 12px; color: var(--vncpc-forest); font-size: 22px; line-height: 1.25; letter-spacing: -0.025em; } #top .vncpc-focus-card p { margin: 0; color: var(--vncpc-muted); font-size: 15px; line-height: 1.65; } /* About */ #top #vncpc-home-about { background: radial-gradient(circle at top right, rgba(111, 164, 58, 0.16), transparent 34%), var(--vncpc-mint-2) !important; } #top .vncpc-about-panel { padding: 38px; border-radius: 34px; background: var(--vncpc-white); border: 1px solid var(--vncpc-soft-border); box-shadow: var(--vncpc-shadow-md); } #top .vncpc-about-panel h2 { margin: 0 0 22px; color: var(--vncpc-forest); font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.055em; } #top .vncpc-about-panel p { margin: 0 0 16px; color: #4f6255; font-size: 16px; line-height: 1.78; text-align: justify; } #top .vncpc-text-link { display: inline-flex; margin-top: 10px; color: var(--vncpc-forest) !important; font-weight: 900; } #top .vncpc-text-link:hover { color: var(--vncpc-leaf) !important; } /* Khối "Dịch vụ" — số ở đỉnh thẻ, hover xem trọn chữ */ /* List: chừa khoảng trên cho badge nhô lên + tăng gap để badge thẻ dưới không chạm thẻ trên */ #top .vncpc-about-list { display: grid; gap: 44px; margin-top: 16px; } /* Thẻ: padding-top lớn hơn để chữ không chạm badge; cho phép badge tràn ra ngoài viền */ #top .vncpc-about-list>div { position: relative; display: flex; flex-direction: column; padding: 44px 26px 28px; border-radius: 24px; background: var(--vncpc-white); border: 1px solid var(--vncpc-soft-border); box-shadow: var(--vncpc-shadow-sm); overflow: visible; /* QUAN TRỌNG: để badge nhô khỏi viền */ transition: var(--vncpc-ease); } #top .vncpc-about-list>div:hover { transform: translateY(-4px); box-shadow: var(--vncpc-shadow-md); border-color: var(--vncpc-soft-border-2); z-index: 2; /* nổi lên trên thẻ kế bên khi giãn ra */ } /* Badge số: đè lên viền TRÊN của thẻ */ #top .vncpc-about-list span { box-sizing: border-box; position: absolute; top: -26px; /* = nửa chiều cao badge -> nằm giữa viền */ left: 26px; /* căn trái; muốn căn giữa xem ghi chú dưới */ margin: 0; width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #68a83a 0%, #3f7f20 100%); color: var(--vncpc-white); font-size: 19px; font-weight: 900; letter-spacing: -0.02em; border: 4px solid #ffffff; /* vành trắng cho chỗ giao với thẻ sạch sẽ */ box-shadow: 0 12px 24px rgba(111, 164, 58, 0.30); } /* Tiêu đề — mặc định 2 dòng */ #top .vncpc-about-list h3 { margin: 0 0 10px; color: var(--vncpc-forest); font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } /* Mô tả — mặc định 4 dòng */ #top .vncpc-about-list p { margin: 0; color: var(--vncpc-muted); font-size: 15px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; min-height: 6.4em; } /* HOVER: bỏ cắt, hiện trọn vẹn tiêu đề + mô tả */ #top .vncpc-about-list>div:hover h3, #top .vncpc-about-list>div:hover p { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } /* Projects / News / Partners home wrappers */ #top .vncpc-projects-shell, #top .vncpc-news-card { background: var(--vncpc-white); border: 1px solid var(--vncpc-soft-border); box-shadow: var(--vncpc-shadow-sm); border-radius: 34px; } /* Partners shell để trong suốt — đẹp hơn trên nền mint */ #top .vncpc-partners-shell { background: transparent; border: none; box-shadow: none; border-radius: 34px; } #top .vncpc-projects-shell { padding: 24px; } #top .vncpc-projects-shell, #top .vncpc-projects-shell *, #top .vncpc-news-card, #top .vncpc-news-card *, #top .vncpc-partners-shell, #top .vncpc-partners-shell * { box-sizing: border-box; } #top .vncpc-projects-shell .slide-entry { border-radius: 24px; background: #fbfdf8; } #top .vncpc-projects-shell .slide-image { overflow: hidden; border-radius: 24px 24px 0 0; } #top .vncpc-projects-shell .slide-image img { display: block; width: 100%; height: 210px; object-fit: cover; border-radius: 24px 24px 0 0; } #top #vncpc-home-news { background: var(--vncpc-mint-2) !important; } #top .vncpc-news-card { height: 100%; padding: 18px; overflow: hidden; } #top .vncpc-news-card .av-magazine { margin: 0; border: 0; box-shadow: none; } #top .vncpc-news-card .av-magazine-top-bar { margin: -18px -18px 18px; border-radius: 24px 24px 16px 16px; /* Kế thừa màu background gradient từ mục 07, không cần khai báo lại */ } #top .vncpc-news-card .av-magazine-thumbnail img { width: 100%; height: 100%; object-fit: cover; } /* Riêng ảnh bài viết lớn (hero / first big) — trả lại tỷ lệ 16:9, không bị ép theo 74px của rule thumbnail bên trên. (Enfold bọc ảnh hero trong .av-magazine-thumbnail giống bài nhỏ) */ #top .vncpc-news-card .av-magazine-hero .av-magazine-thumbnail img { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; } /* Tắt đường kẻ phân cách giữa các tin trong vncpc-news-card */ #top .vncpc-news-card .av-magazine-entry { border-bottom: none; } #top .vncpc-partners-shell { padding: 26px 30px; } #top .vncpc-partners-shell .avia-logo-element-container { margin: 0; } #top .vncpc-partners-shell .slide-entry { padding: 12px; border: 0; box-shadow: none; background: transparent; } #top .vncpc-partners-shell img, #top .vncpc-partners-shell .av-partner-fake-img { display: block; width: 100%; max-width: 130px; margin: 0 auto; object-fit: contain; background-size: contain; background-position: center; background-repeat: no-repeat; filter: none; /* bỏ xám -> màu thật */ opacity: 1; /* bỏ mờ */ transition: var(--vncpc-ease); } #top .vncpc-partners-shell img:hover, #top .vncpc-partners-shell .av-partner-fake-img:hover { transform: translateY(-2px); /* giữ hiệu ứng nhấc nhẹ khi rê chuột */ } /* Home final CTA */ #top #vncpc-home-final-cta, #top #vncpc-final-cta, #top #vncpc-gallery-cta { position: relative; overflow: hidden; background: radial-gradient(circle at top left, rgba(143, 189, 74, 0.36), transparent 32%), radial-gradient(circle at bottom right, rgba(15, 118, 110, 0.24), transparent 34%), linear-gradient(135deg, var(--vncpc-forest) 0%, var(--vncpc-forest-2) 100%) !important; } #top #vncpc-home-final-cta:before, #top #vncpc-final-cta:before, #top #vncpc-gallery-cta:before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 30%, rgba(255, 255, 255, 0.14), transparent 28%), radial-gradient(circle at 85% 70%, rgba(255, 255, 255, 0.10), transparent 32%); pointer-events: none; } #top .vncpc-final-cta-copy, #top #vncpc-final-cta .container, #top #vncpc-gallery-cta .container { position: relative; z-index: 2; } #top .vncpc-final-cta-copy span { background: rgba(255, 255, 255, 0.14); color: var(--vncpc-white); } #top .vncpc-final-cta-copy h2, #top #vncpc-final-cta h2, #top #vncpc-gallery-cta h2 { margin: 0 0 12px; color: var(--vncpc-white) !important; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.055em; } #top .vncpc-final-cta-copy p, #top #vncpc-final-cta .av-subheading, #top #vncpc-gallery-cta .av-subheading { max-width: 720px; margin: 0; color: rgba(255, 255, 255, 0.88) !important; font-size: 17px; line-height: 1.7; } /* ------------------------------- 09. About page -------------------------------- */ #top #vncpc-about-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 12% 18%, rgba(143, 189, 74, 0.24), transparent 30%), linear-gradient(135deg, var(--vncpc-forest) 0%, var(--vncpc-teal) 100%) !important; } #top #vncpc-about-hero .container { max-width: 1180px; } #top #vncpc-about-hero h1 { color: var(--vncpc-white) !important; text-transform: uppercase; font-weight: 900; letter-spacing: -0.03em; text-shadow: 0 8px 28px rgba(0, 0, 0, 0.24); } #top #vncpc-about-hero .av-subheading { max-width: 780px; margin: 12px auto 0 auto; line-height: 1.68; color: rgba(255, 255, 255, 0.92) !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.22); } #top #lich-su-phat-trien, #top #tam-nhin-su-menh, #top #so-do-to-chuc { overflow: hidden; } #top #lich-su-phat-trien .container, #top #tam-nhin-su-menh .container, #top #so-do-to-chuc .container { max-width: 1140px; } #top #lich-su-phat-trien h2, #top #tam-nhin-su-menh h2 { font-weight: 850; text-transform: none; color: var(--vncpc-forest); } #top #lich-su-phat-trien p, #top #tam-nhin-su-menh p { font-size: 16px; line-height: 1.78; color: #4f6255; } #top .vncpc-caption { font-size: 14px !important; line-height: 1.6 !important; color: #738177 !important; text-align: center !important; font-style: italic; margin-top: 10px; } #top #lich-su-phat-trien img { border-radius: 28px; box-shadow: var(--vncpc-shadow-md); } #top #tam-nhin-su-menh .iconbox { min-height: 100%; } #top #tam-nhin-su-menh strong, #top #tam-nhin-su-menh b { color: var(--vncpc-leaf) !important; font-weight: 850 !important; opacity: 1; } #top #tam-nhin-su-menh .iconbox_content p { color: #40564a !important; opacity: 1; } /* FIX: Hiển thị iconbox Tầm nhìn / Sứ mệnh — icon tròn cắt ngang cạnh trên card */ #top #tam-nhin-su-menh .iconbox { overflow: visible !important; padding: 10px 16px 24px !important; margin-top: 32px !important; min-height: 100%; } #top #tam-nhin-su-menh .iconbox_icon { position: absolute !important; top: -32px !important; left: 50% !important; transform: translateX(-50%) !important; margin: 0 !important; z-index: 2; } #top #tam-nhin-su-menh .iconbox.border .iconbox_content { border: none !important; box-shadow: none; padding: 34px 10px 0 !important; } /* Organization chart */ #top #so-do-to-chuc { background: var(--vncpc-mint-2) !important; } #top .vncpc-org-clean { position: relative; max-width: 980px; margin: 0 auto; padding: 44px 48px; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--vncpc-soft-border); border-radius: 34px; box-shadow: var(--vncpc-shadow-md); overflow: hidden; } #top .vncpc-org-clean::before { content: "VNCPC"; position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); font-family: Georgia, serif; font-size: 110px; letter-spacing: 10px; color: rgba(111, 164, 58, 0.06); pointer-events: none; white-space: nowrap; } #top .vncpc-org-head, #top .vncpc-org-middle, #top .vncpc-org-pmus, #top .vncpc-org-experts, #top .vncpc-org-pmu-title { position: relative; z-index: 2; } #top .vncpc-org-head { display: flex; flex-direction: column; align-items: center; } #top .vncpc-org-connector { width: 2px; height: 28px; background: rgba(23, 63, 44, 0.38); } #top .vncpc-org-node { background: #fbfdf8; border: 1px solid var(--vncpc-soft-border-2); border-radius: 22px; padding: 18px 20px; text-align: center; box-shadow: var(--vncpc-shadow-sm); } #top .vncpc-org-node-main { width: 280px; background: var(--vncpc-mint); border-color: rgba(111, 164, 58, 0.34); } #top .vncpc-org-node span { display: block; margin-bottom: 8px; color: var(--vncpc-forest); font-size: 15px; line-height: 1.35; font-weight: 900; text-transform: uppercase; letter-spacing: 0.3px; } #top .vncpc-org-node strong { display: block; color: var(--vncpc-leaf); font-size: 14px; line-height: 1.6; font-weight: 850; } #top .vncpc-org-node p { margin: 4px 0; color: #40564a; font-size: 14px; line-height: 1.5; } #top .vncpc-org-middle { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 42px; } #top .vncpc-org-office, #top .vncpc-org-network-side { min-height: 150px; } #top .vncpc-org-network-side { background: var(--vncpc-mint); } #top .vncpc-org-pmu-title { margin: 38px auto 22px auto; padding-top: 26px; max-width: 520px; border-top: 2px solid rgba(23, 63, 44, 0.28); color: var(--vncpc-forest); font-size: 17px; font-weight: 900; text-align: center; } #top .vncpc-org-pmus { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } #top .vncpc-org-pmu { min-height: 120px; } #top .vncpc-org-pmu span { font-size: 18px; } #top .vncpc-org-experts { margin-top: 28px; padding: 18px 24px; background: var(--vncpc-mint); border: 1px solid var(--vncpc-soft-border-2); border-radius: 22px; color: var(--vncpc-forest); font-weight: 900; text-align: center; } /* ------------------------------- 10. Gallery page and WP gallery fix -------------------------------- */ #top #vncpc-gallery-hero, #top #vncpc-gallery-intro, #top #anh-moi-nhat, #top #hoat-dong-noi-bat, #top #du-an-su-kien, #top #vncpc-gallery-cta { overflow: hidden; } #top #vncpc-gallery-hero .container, #top #vncpc-gallery-intro .container, #top #anh-moi-nhat .container, #top #hoat-dong-noi-bat .container, #top #du-an-su-kien .container, #top #vncpc-gallery-cta .container { max-width: 1180px; } #top #vncpc-gallery-hero { position: relative; background: linear-gradient(135deg, rgba(15, 47, 34, 0.86), rgba(15, 118, 110, 0.70)), var(--vncpc-forest) !important; } #top #vncpc-gallery-hero .av-special-heading { max-width: 900px; margin-left: auto; margin-right: auto; } #top #vncpc-gallery-hero h1 { color: var(--vncpc-white) !important; letter-spacing: -0.05em; text-shadow: 0 14px 36px rgba(0, 0, 0, 0.28); } #top #vncpc-gallery-hero .av-subheading { max-width: 720px; margin-left: auto; margin-right: auto; line-height: 1.7; color: rgba(255, 255, 255, 0.92) !important; } #top #vncpc-gallery-hero .avia-button { border-radius: 999px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18); font-weight: 800; } #top .vncpc-gallery-intro-box { width: 100%; max-width: 1040px; margin: 0 auto; padding: 30px 34px; border-radius: 34px; background: var(--vncpc-white); border: 1px solid var(--vncpc-soft-border); box-shadow: var(--vncpc-shadow-md); box-sizing: border-box; } #top .vncpc-gallery-intro-box p { margin: 0 auto 22px; max-width: 900px; text-align: center; font-size: 17px; line-height: 1.75; color: #40564a; } #top .vncpc-gallery-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } #top .vncpc-gallery-filter a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 18px; border-radius: 999px; background: var(--vncpc-mint); border: 1px solid var(--vncpc-soft-border-2); color: var(--vncpc-forest); font-size: 14px; font-weight: 800; line-height: 1.2; text-decoration: none; transition: var(--vncpc-ease); } #top .vncpc-gallery-filter a:hover { background: var(--vncpc-leaf); color: var(--vncpc-white); transform: translateY(-1px); } #top .vncpc-section-title-small { margin-top: 54px; } #top .vncpc-gallery-grid { display: grid; width: 100%; max-width: 100%; gap: 26px; box-sizing: border-box; } #top .vncpc-gallery-grid+.vncpc-gallery-grid { margin-top: 26px; } #top .vncpc-gallery-grid-one { grid-template-columns: minmax(0, 1fr); } #top .vncpc-gallery-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } #top .vncpc-gallery-card, #top .vncpc-gallery-card * { box-sizing: border-box !important; } #top .vncpc-gallery-card { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; overflow: hidden !important; clear: both !important; padding: 26px; border-radius: 34px; background: var(--vncpc-white); border: 1px solid var(--vncpc-soft-border); box-shadow: var(--vncpc-shadow-md); } #top .vncpc-gallery-featured-card { background: linear-gradient(135deg, rgba(111, 164, 58, 0.10), rgba(255, 255, 255, 0) 42%), #ffffff; border-color: var(--vncpc-soft-border-2); } #top .vncpc-gallery-card-header { position: relative; margin: 0 0 20px; padding-left: 18px; border-left: 5px solid var(--vncpc-leaf); } #top .vncpc-gallery-year { display: inline-flex; margin-bottom: 10px; padding: 6px 12px; border-radius: 999px; background: var(--vncpc-mint); color: var(--vncpc-leaf); font-size: 12px; font-weight: 900; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; } #top .vncpc-gallery-card h3 { margin: 0 0 8px; color: var(--vncpc-forest); font-size: clamp(20px, 2.1vw, 27px); line-height: 1.28; letter-spacing: -0.02em; } #top .vncpc-gallery-card-small h3 { font-size: clamp(18px, 1.8vw, 22px); } #top .vncpc-gallery-card p { margin: 0; color: var(--vncpc-muted); font-size: 15px; line-height: 1.65; } /* WP gallery anti-overlap reset */ #top .vncpc-gallery-card .gallery { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; clear: both !important; } #top .vncpc-gallery-card .gallery:before, #top .vncpc-gallery-card .gallery:after { display: none !important; content: none !important; } #top .vncpc-gallery-card .gallery br { display: none !important; } #top .vncpc-gallery-card .gallery-item, #top .vncpc-gallery-card dl.gallery-item, #top .vncpc-gallery-card figure.gallery-item { position: relative !important; float: none !important; clear: none !important; display: block !important; width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; text-align: left !important; flex: 0 0 calc(25% - 11px) !important; } #top .vncpc-gallery-card-small .gallery-item, #top .vncpc-gallery-card-small dl.gallery-item, #top .vncpc-gallery-card-small figure.gallery-item { flex-basis: calc(50% - 7px) !important; } #top .vncpc-gallery-featured-card .gallery-item, #top .vncpc-gallery-featured-card dl.gallery-item, #top .vncpc-gallery-featured-card figure.gallery-item { flex-basis: calc(16.666% - 12px) !important; } #top .vncpc-gallery-card .gallery-icon, #top .vncpc-gallery-card .gallery-icon a { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: 18px; background: var(--vncpc-sage) !important; } #top .vncpc-gallery-card .gallery img, #top .vncpc-gallery-card .gallery-icon img, #top .vncpc-gallery-card img.attachment-thumbnail, #top .vncpc-gallery-card img.attachment-medium { position: static !important; float: none !important; display: block !important; width: 100% !important; max-width: 100% !important; height: 176px !important; min-height: 176px !important; max-height: 176px !important; object-fit: cover; object-position: center center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 18px; box-shadow: none; } #top .vncpc-gallery-card-small .gallery img, #top .vncpc-gallery-card-small .gallery-icon img { height: 150px !important; min-height: 150px !important; max-height: 150px !important; } #top .vncpc-gallery-featured-card .gallery img, #top .vncpc-gallery-featured-card .gallery-icon img { height: 126px !important; min-height: 126px !important; max-height: 126px !important; } #top .vncpc-gallery-card .gallery-caption, #top .vncpc-gallery-card dd.gallery-caption { display: none !important; } /* ------------------------------- 11. Footer phụ trợ (Màu nền + tương phản footer: xem mục 14) -------------------------------- */ #top .scroll-top-link { border-radius: 999px; background: var(--vncpc-leaf); color: var(--vncpc-white); box-shadow: var(--vncpc-shadow-md); } /* ------------------------------- 12. Responsive chung -------------------------------- */ @media only screen and (max-width: 1100px) { #top .vncpc-focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #top .vncpc-hero-image img { height: 460px; } #top .vncpc-hero-trust { grid-template-columns: 1fr; } } @media only screen and (max-width: 989px) { #top #vncpc-home-hero { min-height: auto !important; } #top .vncpc-hero-visual { max-width: 100%; margin: 36px auto 0; padding: 18px; } #top .vncpc-news-card { margin-bottom: 24px; } #top .vncpc-projects-shell .slide-image img { height: 185px; } #top .vncpc-org-clean { padding: 36px 28px; } #top .vncpc-org-middle { grid-template-columns: 1fr; } #top .vncpc-org-pmus { grid-template-columns: repeat(2, 1fr); } #top .vncpc-gallery-card .gallery-item, #top .vncpc-gallery-card dl.gallery-item, #top .vncpc-gallery-card figure.gallery-item, #top .vncpc-gallery-featured-card .gallery-item, #top .vncpc-gallery-featured-card dl.gallery-item, #top .vncpc-gallery-featured-card figure.gallery-item { flex-basis: calc(33.333% - 10px) !important; } #top .vncpc-gallery-card-small .gallery-item, #top .vncpc-gallery-card-small dl.gallery-item, #top .vncpc-gallery-card-small figure.gallery-item { flex-basis: calc(50% - 7px) !important; } #top .vncpc-gallery-card .gallery img, #top .vncpc-gallery-card .gallery-icon img { height: 155px !important; min-height: 155px !important; max-height: 155px !important; } } @media only screen and (max-width: 767px) { #top #main { background: var(--vncpc-mint-2); } #top .container, #top #vncpc-home-hero .container, #top #vncpc-home-focus .container, #top #vncpc-home-about .container, #top #vncpc-home-projects .container, #top #vncpc-home-news .container, #top #vncpc-home-partners .container, #top #vncpc-home-final-cta .container { width: 92%; } #top .av-special-heading { margin-bottom: 20px; } #top .vncpc-hero-copy h1 { font-size: 42px; line-height: 1.02; } #top .vncpc-hero-lead { font-size: 16px; line-height: 1.7; } #top .vncpc-hero-actions { display: grid; grid-template-columns: 1fr; } #top .vncpc-btn { width: 100%; } #top .vncpc-hero-image { border-radius: 28px; } #top .vncpc-hero-image img { height: 340px; border-radius: 28px; } #top .vncpc-floating-card { position: relative; left: auto; right: auto; top: auto; bottom: auto; max-width: 100%; margin-top: 12px; } #top .vncpc-focus-grid { grid-template-columns: 1fr; } #top .vncpc-focus-card { min-height: auto; padding: 24px 22px; border-radius: 24px; } #top .vncpc-section-heading, #top .vncpc-section-title { text-align: left; margin-bottom: 28px; } #top .vncpc-section-heading-row { display: block; } #top .vncpc-section-link { margin-top: 16px; } #top .vncpc-about-panel, #top .vncpc-projects-shell, #top .vncpc-news-card, #top .vncpc-gallery-card, #top .vncpc-gallery-intro-box { padding: 18px; border-radius: 24px; } #top .vncpc-about-panel p { text-align: left; } #top .vncpc-about-list>div { padding: 22px; border-radius: 24px; overflow: hidden; /* mobile: badge absolute đã thành static, không cần tràn */ } #top .vncpc-about-list span { position: static; width: 44px; height: 44px; border-radius: 14px; font-size: 17px; margin-bottom: 14px; border: none; box-shadow: 0 10px 22px rgba(111, 164, 58, 0.28); } /* Mobile: không có hover → luôn hiện full chữ */ #top .vncpc-about-list h3, #top .vncpc-about-list p { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; min-height: 0; } #top .vncpc-news-card .av-magazine-top-bar { margin: -18px -18px 18px; border-radius: 24px 24px 16px 16px; } #top #vncpc-about-hero { min-height: 460px !important; } #top #vncpc-about-hero h1 { font-size: 34px !important; line-height: 1.18 !important; } #top #vncpc-about-hero .av-subheading { font-size: 16px !important; line-height: 1.55 !important; } #top #lich-su-phat-trien p, #top #tam-nhin-su-menh p { font-size: 15px; line-height: 1.7; } #top #tam-nhin-su-menh .iconbox { margin-bottom: 24px; } #top .vncpc-org-clean { padding: 28px 18px; border-radius: 24px; } #top .vncpc-org-clean::before { font-size: 58px; letter-spacing: 4px; } #top .vncpc-org-node-main { width: 100%; } #top .vncpc-org-middle, #top .vncpc-org-pmus, #top .vncpc-gallery-grid-two { grid-template-columns: 1fr; } #top .vncpc-org-pmu-title { font-size: 16px; } #top .vncpc-gallery-card .gallery { gap: 10px !important; } #top .vncpc-gallery-card .gallery-item, #top .vncpc-gallery-card dl.gallery-item, #top .vncpc-gallery-card figure.gallery-item, #top .vncpc-gallery-card-small .gallery-item, #top .vncpc-gallery-card-small dl.gallery-item, #top .vncpc-gallery-card-small figure.gallery-item, #top .vncpc-gallery-featured-card .gallery-item, #top .vncpc-gallery-featured-card dl.gallery-item, #top .vncpc-gallery-featured-card figure.gallery-item { flex-basis: calc(50% - 5px) !important; } #top .vncpc-gallery-card .gallery img, #top .vncpc-gallery-card .gallery-icon img, #top .vncpc-gallery-card-small .gallery img, #top .vncpc-gallery-card-small .gallery-icon img, #top .vncpc-gallery-featured-card .gallery img, #top .vncpc-gallery-featured-card .gallery-icon img { height: 128px !important; min-height: 128px !important; max-height: 128px !important; border-radius: 14px; } #top #vncpc-home-final-cta .avia-buttonrow-right, #top #vncpc-final-cta .avia-buttonrow-right { text-align: left !important; } #top #vncpc-home-final-cta .avia-button, #top #vncpc-final-cta .avia-button { width: 100%; text-align: center; } } @media only screen and (max-width: 420px) { #top .vncpc-hero-copy h1 { font-size: 36px; } #top .vncpc-hero-image img { height: 280px; } #top .vncpc-section-heading h2, #top .vncpc-section-title h2, #top .vncpc-about-panel h2, #top .vncpc-final-cta-copy h2, #top #vncpc-final-cta h2, #top #vncpc-gallery-cta h2 { font-size: 31px; } #top .vncpc-gallery-card .gallery-item, #top .vncpc-gallery-card dl.gallery-item, #top .vncpc-gallery-card figure.gallery-item, #top .vncpc-gallery-card-small .gallery-item, #top .vncpc-gallery-card-small dl.gallery-item, #top .vncpc-gallery-card-small figure.gallery-item, #top .vncpc-gallery-featured-card .gallery-item, #top .vncpc-gallery-featured-card dl.gallery-item, #top .vncpc-gallery-featured-card figure.gallery-item { flex-basis: 100% !important; } #top .vncpc-gallery-card .gallery img, #top .vncpc-gallery-card .gallery-icon img { height: 190px !important; min-height: 190px !important; max-height: 190px !important; } } /* ========================================================= 13. VNCPC Mobile Menu Fix for Enfold Fix lỗi menu mobile nền trắng nhưng chữ bị trắng / quá trống ========================================================= */ @media only screen and (max-width: 767px) { /* Nền phủ phía sau menu */ html.av-burger-overlay-active #top .av-burger-overlay-bg, #top .av-burger-overlay-bg { background: rgba(15, 47, 34, 0.72) !important; } /* Panel menu mobile */ #top .av-burger-overlay { background: transparent !important; } #top .av-burger-overlay-scroll { background: var(--vncpc-white) !important; width: min(88vw, 360px) !important; max-width: 360px !important; right: 0 !important; left: auto !important; box-shadow: -18px 0 48px rgba(15, 47, 34, 0.24); } #top .av-burger-overlay-inner { padding: 84px 0 28px 0 !important; background: var(--vncpc-white) !important; } /* Bỏ kiểu căn giữa quá nhiều khoảng trắng của Enfold */ #top .av-burger-overlay-inner, #top #av-burger-menu-ul { display: block !important; height: auto !important; min-height: 0 !important; vertical-align: top !important; } #top #av-burger-menu-ul { padding: 0 18px 24px 18px !important; margin: 0 !important; background: var(--vncpc-white) !important; } /* Quan trọng: chữ menu phải màu xanh đậm, không phải trắng */ #top .av-burger-overlay a, #top #av-burger-menu-ul li a, #top #av-burger-menu-ul li a .avia-menu-text, #top .av-burger-overlay-inner .avia-menu-text { color: var(--vncpc-forest) !important; background: transparent !important; opacity: 1; visibility: visible !important; } /* Từng dòng menu */ #top #av-burger-menu-ul li { border: 0 !important; margin: 0 0 8px 0 !important; background: transparent !important; } #top #av-burger-menu-ul li a { min-height: 48px !important; padding: 13px 16px !important; border-radius: 16px; border: 1px solid rgba(23, 63, 44, 0.10) !important; background: var(--vncpc-mint-2) !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.25 !important; } #top #av-burger-menu-ul li a:hover, #top #av-burger-menu-ul li.current-menu-item>a, #top #av-burger-menu-ul li.current-menu-ancestor>a { background: var(--vncpc-mint) !important; color: var(--vncpc-forest) !important; border-color: rgba(111, 164, 58, 0.28) !important; } /* Sub menu cấp 2 */ #top #av-burger-menu-ul .sub-menu { padding: 8px 0 0 14px !important; margin: 0 !important; background: transparent !important; } #top #av-burger-menu-ul .sub-menu li a { min-height: 42px !important; padding: 11px 14px !important; font-size: 14px !important; font-weight: 700 !important; background: var(--vncpc-white) !important; color: #40564a !important; } /* Nút search và nút đóng trên mobile */ #top .av-burger-overlay .av-burger-overlay-scroll:before { content: "Menu"; position: absolute; top: 24px; left: 24px; color: var(--vncpc-forest); font-size: 20px; font-weight: 900; letter-spacing: -0.03em; } #top .av-burger-overlay .av-burger-overlay-scroll { position: fixed !important; top: 0 !important; bottom: 0 !important; height: 100vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } #top .av-hamburger-inner, #top .av-hamburger-inner:before, #top .av-hamburger-inner:after { background-color: var(--vncpc-forest) !important; } /* Icon search trong menu */ #top .av-burger-overlay #menu-item-search a, #top .av-burger-overlay .menu-item-search a { color: var(--vncpc-forest) !important; } /* Dòng "Dịch vụ nổi bật" / language / sub_menu không bị trôi giữa màn hình */ #top .av-burger-overlay .sub_menu, #top .av-burger-overlay .sub_menu ul { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } #top .av-burger-overlay .sub_menu a { display: inline-flex !important; align-items: center !important; min-height: 42px !important; padding: 10px 16px !important; border-radius: 999px; background: var(--vncpc-leaf) !important; color: var(--vncpc-white) !important; font-weight: 800 !important; } /* FIX: Nút "Bordered/Colored" bị viền vuông bên trong mobile menu */ #top #av-burger-menu-ul li.av-menu-button>a .avia-menu-text { border: none !important; padding: 0 !important; background: transparent !important; } /* Làm nổi bật nút "Dịch vụ nổi bật" trên mobile menu */ #top #av-burger-menu-ul li.av-menu-button>a { background: var(--vncpc-leaf) !important; border: none !important; box-shadow: 0 6px 16px rgba(111, 164, 58, 0.25); } #top #av-burger-menu-ul li.av-menu-button>a .avia-menu-text, #top #av-burger-menu-ul li.av-menu-button>a .avia-menu-fx { color: var(--vncpc-white) !important; font-weight: 850 !important; } #top #av-burger-menu-ul li.av-menu-button>a:hover { background: var(--vncpc-forest) !important; box-shadow: 0 4px 10px rgba(23, 63, 44, 0.3); } } /* Mobile rất nhỏ: panel full hơn một chút */ @media only screen and (max-width: 420px) { #top .av-burger-overlay-scroll { width: 92vw !important; max-width: 92vw !important; } } /* ========================================================= 14. FOOTER: nền + tương phản text và link (Nguồn duy nhất cho footer, đã gộp từ 2 block cũ) ========================================================= */ #top #footer { background: linear-gradient(90deg, #0f4a2e 0%, #033d2d 45%, #01382c 100%) !important; border: 0; color: rgba(255, 255, 255, 0.88) !important; } #top #footer .container, #top #footer .flex_column, #top #footer .widget { color: rgba(255, 255, 255, 0.88) !important; } /* Tiêu đề widget footer */ #top #footer h1, #top #footer h2, #top #footer h3, #top #footer h4, #top #footer h5, #top #footer .widgettitle { color: var(--vncpc-white) !important; opacity: 1; font-weight: 800 !important; letter-spacing: -0.02em; } /* Text footer */ #top #footer p, #top #footer li, #top #footer span, #top #footer strong, #top #footer em, #top #footer td { color: rgba(255, 255, 255, 0.88) !important; opacity: 1; } /* Link footer */ #top #footer a { color: var(--vncpc-white) !important; opacity: 1; text-decoration: none; } #top #footer a:hover { color: #dff3a8 !important; text-decoration: underline; } /* Phần bài mới trong footer */ #top #footer .news-link, #top #footer .news-link a, #top #footer .widget_news .news-link, #top #footer .widget_news a, #top #footer .post-title, #top #footer .post-title a { color: var(--vncpc-white) !important; opacity: 1; } #top #footer .news-time, #top #footer .av-magazine-time, #top #footer small, #top #footer .minor-meta { color: rgba(255, 255, 255, 0.78) !important; opacity: 1; } /* Nếu thumbnail tin mới có viền xanh gây khó nhìn */ #top #footer img { border: 0 !important; box-shadow: none; } /* Socket cuối trang */ #top #socket { background: #022a1e !important; color: rgba(255, 255, 255, 0.82) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } #top #socket, #top #socket span, #top #socket p, #top #socket a { color: rgba(255, 255, 255, 0.86) !important; } #top #socket a:hover { color: var(--vncpc-white) !important; } /* ========================================================= 15. VNCPC ESG PAGE - FULL CSS FOR ENFOLD Không dùng Lightbox, không dùng Flipbook Tài liệu hiển thị dạng slider kéo ngang ========================================================= */ .vncpc-esg-page { --vncpc-green: #1f7a4d; --vncpc-green-dark: #125c38; --vncpc-green-soft: #eaf6ef; --vncpc-mint: #f5fbf7; --vncpc-gold: #d7a642; --vncpc-text: #21352b; --vncpc-muted: #66756d; --vncpc-border: rgba(31, 122, 77, 0.16); --vncpc-shadow: 0 18px 45px rgba(20, 70, 45, 0.12); --vncpc-radius-lg: 32px; --vncpc-radius-md: 22px; color: var(--vncpc-text); line-height: 1.75; } .vncpc-esg-page *, .vncpc-esg-page *::before, .vncpc-esg-page *::after { box-sizing: border-box; } .vncpc-esg-page img { max-width: 100%; height: auto; display: block; } .vncpc-esg-page p { margin: 0 0 16px; font-size: 17px; color: var(--vncpc-muted); } .vncpc-esg-page h1, .vncpc-esg-page h2 { margin: 0 0 18px; color: var(--vncpc-green-dark); line-height: 1.18; letter-spacing: -0.03em; } .vncpc-esg-page h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 800; } .vncpc-esg-page h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; } .vncpc-esg-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--vncpc-green); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .vncpc-esg-eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 999px; background: var(--vncpc-gold); } /* HERO ESG */ .vncpc-esg-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.75fr); gap: 42px; align-items: center; padding: clamp(34px, 6vw, 74px); margin: 0 0 42px; overflow: hidden; border-radius: var(--vncpc-radius-lg); background: radial-gradient(circle at top left, rgba(215, 166, 66, 0.22), transparent 34%), linear-gradient(135deg, #f5fbf7 0%, #ffffff 48%, #eaf6ef 100%); box-shadow: var(--vncpc-shadow); } .vncpc-esg-hero::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%; background: rgba(31, 122, 77, 0.08); pointer-events: none; } .vncpc-esg-hero__content { position: relative; z-index: 2; } .vncpc-esg-hero__content p { max-width: 780px; text-align: justify; } .vncpc-esg-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; } .vncpc-esg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 999px; background: linear-gradient(135deg, var(--vncpc-green), var(--vncpc-green-dark)); color: var(--vncpc-white) !important; font-weight: 800; text-decoration: none; box-shadow: 0 12px 26px rgba(31, 122, 77, 0.22); transition: transform 0.22s ease, box-shadow 0.22s ease; } .vncpc-esg-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(31, 122, 77, 0.28); } .vncpc-esg-btn--ghost { background: var(--vncpc-white); color: var(--vncpc-green-dark) !important; border: 1px solid var(--vncpc-border); box-shadow: none; } .vncpc-esg-hero__visual { position: relative; z-index: 2; max-width: 390px; margin-left: auto; padding: 12px; border-radius: 28px; background: rgba(255, 255, 255, 0.78); box-shadow: 0 18px 40px rgba(16, 70, 45, 0.16); } .vncpc-esg-hero__visual img { width: 100%; border-radius: 22px; } /* SECTIONS ESG */ .vncpc-esg-section { margin: 42px 0; padding: clamp(30px, 5vw, 58px); border-radius: var(--vncpc-radius-lg); background: var(--vncpc-white); border: 1px solid var(--vncpc-border); } .vncpc-esg-section--soft { background: radial-gradient(circle at top right, rgba(215, 166, 66, 0.14), transparent 28%), linear-gradient(135deg, #ffffff 0%, var(--vncpc-mint) 100%); } .vncpc-esg-section__head { max-width: 880px; margin: 0 auto 34px; text-align: center; } .vncpc-esg-section__head p { text-align: center; } /* DOCUMENT SLIDER */ .vncpc-esg-slider-wrap { position: relative; max-width: 100%; } .vncpc-esg-slider-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; } .vncpc-esg-slider-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--vncpc-green-soft); color: var(--vncpc-green-dark) !important; font-weight: 800; text-decoration: none; border: 1px solid var(--vncpc-border); transition: all 0.22s ease; } .vncpc-esg-slider-nav a:hover { background: var(--vncpc-green-dark); color: var(--vncpc-white) !important; transform: translateY(-2px); } .vncpc-esg-slider { display: flex; gap: 24px; overflow-x: auto; overflow-y: hidden; padding: 8px 8px 26px; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .vncpc-esg-slider::-webkit-scrollbar { height: 10px; } .vncpc-esg-slider::-webkit-scrollbar-track { background: #edf6f1; border-radius: 999px; } .vncpc-esg-slider::-webkit-scrollbar-thumb { background: rgba(31, 122, 77, 0.42); border-radius: 999px; } .vncpc-esg-slide { flex: 0 0 min(420px, 82vw); scroll-snap-align: center; margin: 0; padding: 14px; border-radius: 30px; background: linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%); border: 1px solid var(--vncpc-border); box-shadow: 0 16px 38px rgba(20, 70, 45, 0.12); } .vncpc-esg-slide__image { overflow: hidden; border-radius: 22px; background: var(--vncpc-white); } .vncpc-esg-slide__image img { width: 100%; height: auto; display: block; border-radius: 22px; } .vncpc-esg-slide__caption { display: flex; flex-direction: column; gap: 4px; padding: 16px 6px 2px; text-align: center; } .vncpc-esg-slide__caption span { color: var(--vncpc-green); font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; } .vncpc-esg-slide__caption strong { color: var(--vncpc-green-dark); font-size: 18px; line-height: 1.35; } .vncpc-esg-slider-hint { display: none; margin: 12px 0 0 !important; color: var(--vncpc-muted); text-align: center; font-size: 14px !important; font-weight: 700; } /* SERVICES (ESG) */ .vncpc-esg-grid--services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .vncpc-esg-service-item { position: relative; min-height: 150px; padding: 24px 22px; border-radius: var(--vncpc-radius-md); background: var(--vncpc-white); border: 1px solid var(--vncpc-border); box-shadow: 0 12px 28px rgba(20, 70, 45, 0.08); } .vncpc-esg-service-item span { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; margin-bottom: 16px; border-radius: 50%; background: var(--vncpc-green-soft); color: var(--vncpc-green-dark); font-weight: 900; } .vncpc-esg-service-item p { margin: 0; color: var(--vncpc-text); font-weight: 650; } /* BENEFITS (ESG) */ .vncpc-esg-benefits { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr); gap: 34px; align-items: start; } .vncpc-esg-benefits__intro { position: sticky; top: 110px; } .vncpc-esg-benefits__list { display: grid; gap: 16px; } .vncpc-esg-benefit { padding: 22px 24px; border-radius: var(--vncpc-radius-md); background: var(--vncpc-mint); border: 1px solid var(--vncpc-border); } .vncpc-esg-benefit strong { display: block; margin-bottom: 8px; color: var(--vncpc-green-dark); font-size: 19px; } .vncpc-esg-benefit p { margin: 0; text-align: justify; } /* TABLET (ESG) */ @media only screen and (max-width: 989px) { .vncpc-esg-hero { grid-template-columns: 1fr; padding: 42px 30px; } .vncpc-esg-hero__visual { max-width: 360px; margin: 0 auto; } .vncpc-esg-slide { flex-basis: min(390px, 78vw); } .vncpc-esg-grid--services { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vncpc-esg-benefits { grid-template-columns: 1fr; } .vncpc-esg-benefits__intro { position: static; } } /* MOBILE (ESG) */ @media only screen and (max-width: 767px) { .vncpc-esg-page p { font-size: 16px; text-align: left; } .vncpc-esg-hero, .vncpc-esg-section { margin-left: -10px; margin-right: -10px; border-radius: 24px; } .vncpc-esg-hero { padding: 32px 22px; gap: 28px; } .vncpc-esg-hero__content p { text-align: left; } .vncpc-esg-hero__actions { flex-direction: column; } .vncpc-esg-btn { width: 100%; } .vncpc-esg-section { padding: 30px 18px; } .vncpc-esg-section__head { text-align: left; } .vncpc-esg-section__head p { text-align: left; } .vncpc-esg-slider-nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; } .vncpc-esg-slider-nav a { flex: 0 0 auto; min-width: 38px; height: 36px; font-size: 13px; } .vncpc-esg-slider { gap: 16px; padding: 6px 2px 22px; scroll-snap-type: x mandatory; } .vncpc-esg-slide { flex: 0 0 86vw; padding: 10px; border-radius: 22px; } .vncpc-esg-slide__image, .vncpc-esg-slide__image img { border-radius: 16px; } .vncpc-esg-slide__caption { padding: 13px 4px 2px; } .vncpc-esg-slide__caption strong { font-size: 16px; } .vncpc-esg-slider-hint { display: block; text-align: left; } .vncpc-esg-grid--services { grid-template-columns: 1fr; } .vncpc-esg-service-item { min-height: auto; } .vncpc-esg-benefit p { text-align: left; } } /* ================================================== 16. HERO TEXTBOX - REFINED SIZE Class: .hero-textbox ================================================== */ .hero-textbox { padding: 44px 28px 40px !important; max-width: 1120px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; background: radial-gradient(ellipse at center, rgba(5, 45, 28, 0.46) 0%, rgba(5, 45, 28, 0.34) 36%, rgba(5, 45, 28, 0.16) 66%, rgba(5, 45, 28, 0) 100%) !important; border-radius: 0; } /* Tiêu đề chính - giảm size để BỀN VỮNG không bị tách */ .hero-textbox h1 { color: var(--vncpc-white) !important; font-size: clamp(34px, 4.05vw, 56px) !important; line-height: 1.12 !important; font-weight: 800 !important; letter-spacing: -0.025em; text-transform: uppercase; margin: 0 auto 16px !important; max-width: 1080px !important; text-shadow: 0 4px 16px rgba(0, 0, 0, 0.44), 0 2px 6px rgba(0, 0, 0, 0.38), 0 1px 1px rgba(0, 0, 0, 0.50) !important; } /* Subtitle */ .hero-textbox .av-subheading, .hero-textbox .av-subheading p { color: rgba(255, 255, 255, 0.96) !important; font-size: clamp(16px, 1.25vw, 19px) !important; line-height: 1.55 !important; font-weight: 500 !important; max-width: 820px !important; margin-left: auto !important; margin-right: auto !important; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.42), 0 1px 3px rgba(0, 0, 0, 0.35) !important; } .hero-textbox .special-heading-border { display: none !important; } .hero-textbox .avia-buttonrow-wrap { margin-top: 22px !important; } .hero-textbox .avia-button { border-radius: 999px; padding: 14px 26px !important; font-weight: 700 !important; font-size: 14.5px !important; border-width: 1px !important; box-shadow: 0 9px 22px rgba(0, 0, 0, 0.22), 0 2px 7px rgba(0, 0, 0, 0.16); transition: all 0.22s ease; } .hero-textbox .avia-button:hover { transform: translateY(-2px); } .hero-textbox .avia-color-theme-color { background: linear-gradient(135deg, #68a83a 0%, #3f7f20 100%) !important; border-color: rgba(255, 255, 255, 0.42) !important; color: var(--vncpc-white) !important; } .hero-textbox .avia-color-light { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(255, 255, 255, 0.72) !important; color: #173d2a !important; } .hero-textbox .avia-color-light:hover { background: var(--vncpc-white) !important; color: #3f7f20 !important; } /* TABLET hero-textbox */ @media only screen and (max-width: 989px) { .hero-textbox { padding: 42px 24px 38px !important; max-width: 900px !important; } .hero-textbox h1 { font-size: clamp(31px, 5.2vw, 46px) !important; line-height: 1.14 !important; max-width: 820px !important; } .hero-textbox .av-subheading, .hero-textbox .av-subheading p { font-size: 16.5px !important; max-width: 700px !important; } } /* MOBILE hero-textbox */ @media only screen and (max-width: 767px) { .hero-textbox { padding: 36px 18px 32px !important; background: radial-gradient(ellipse at center, rgba(5, 42, 27, 0.58) 0%, rgba(5, 42, 27, 0.42) 38%, rgba(5, 42, 27, 0.20) 68%, rgba(5, 42, 27, 0) 100%) !important; } .hero-textbox h1 { font-size: 29px !important; line-height: 1.16 !important; letter-spacing: -0.015em; max-width: 520px !important; } .hero-textbox .av-subheading, .hero-textbox .av-subheading p { font-size: 15px !important; line-height: 1.5 !important; } .hero-textbox .avia-buttonrow-wrap { margin-top: 18px !important; } .hero-textbox .avia-button { display: block !important; width: min(100%, 320px) !important; margin: 8px auto !important; padding: 14px 22px !important; font-size: 14px !important; } } /* MOBILE NHỎ hero-textbox */ @media only screen and (max-width: 420px) { .hero-textbox h1 { font-size: 26px !important; } .hero-textbox .av-subheading, .hero-textbox .av-subheading p { font-size: 14.5px !important; } } /* ========================================================= 17. VNCPC SERVICES PAGE REFACTOR CSS Dùng cho shortcode trang Dịch vụ tư vấn phát triển bền vững ========================================================= */ /* Reset nhẹ cho section dịch vụ */ #nhom-dich-vu, #quy-trinh-hop-tac, #chi-tiet-dich-vu { position: relative; } #nhom-dich-vu .container, #quy-trinh-hop-tac .container, #chi-tiet-dich-vu .container, #lien-he-tu-van .container { max-width: 1180px; } /* HERO trang dịch vụ */ #vncpc-services-hero { min-height: 520px !important; display: flex !important; align-items: center !important; position: relative !important; overflow: hidden !important; } /* Overlay mềm thêm bằng CSS để chữ nổi hơn */ #vncpc-services-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, rgba(7, 45, 29, 0.42) 0%, rgba(7, 45, 29, 0.26) 35%, rgba(7, 45, 29, 0.08) 68%, rgba(7, 45, 29, 0) 100%); } #vncpc-services-hero .container, #vncpc-services-hero .content, #vncpc-services-hero .entry-content-wrapper { position: relative !important; z-index: 2 !important; } #vncpc-services-hero .hero-textbox { padding: 44px 28px 24px !important; max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; background: transparent !important; } #vncpc-services-hero h1, #vncpc-services-hero .av-special-heading-tag { color: var(--vncpc-white) !important; font-size: clamp(34px, 5vw, 62px) !important; line-height: 1.08 !important; font-weight: 850 !important; letter-spacing: -0.035em; text-transform: uppercase; margin-bottom: 16px !important; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.48), 0 2px 7px rgba(0, 0, 0, 0.38) !important; } #vncpc-services-hero .av-subheading, #vncpc-services-hero .av-subheading p { max-width: 780px !important; margin-left: auto !important; margin-right: auto !important; color: rgba(255, 255, 255, 0.96) !important; font-size: clamp(15px, 1.45vw, 20px) !important; line-height: 1.55 !important; font-weight: 500 !important; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.42), 0 1px 3px rgba(0, 0, 0, 0.38) !important; } #vncpc-services-hero .special-heading-border { display: none !important; } #vncpc-services-hero .avia-buttonrow-wrap { margin-top: 18px !important; } #vncpc-services-hero .avia-button { border-radius: 999px; padding: 14px 26px !important; font-weight: 700 !important; border-width: 1px !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.16); } #vncpc-services-hero .avia-color-theme-color { background: linear-gradient(135deg, #72a832 0%, #3f7f20 100%) !important; color: var(--vncpc-white) !important; border-color: rgba(255, 255, 255, 0.4) !important; } #vncpc-services-hero .avia-color-light { background: rgba(255, 255, 255, 0.96) !important; color: #123f2a !important; border-color: rgba(255, 255, 255, 0.7) !important; } /* SECTION HEADING trang dịch vụ */ .vncpc-section-heading, #nhom-dich-vu .av-special-heading, #quy-trinh-hop-tac .av-special-heading, #chi-tiet-dich-vu .av-special-heading { max-width: 860px !important; margin-left: auto !important; margin-right: auto !important; padding-bottom: 36px !important; } #nhom-dich-vu h2, #quy-trinh-hop-tac h2, #chi-tiet-dich-vu h2, #lien-he-tu-van h2 { color: #123f2a !important; font-size: clamp(28px, 3vw, 40px) !important; line-height: 1.18 !important; font-weight: 800 !important; letter-spacing: -0.025em; text-transform: none; } #nhom-dich-vu .av-subheading, #quy-trinh-hop-tac .av-subheading, #chi-tiet-dich-vu .av-subheading { color: #64756c !important; font-size: 16px !important; line-height: 1.65 !important; } /* Card dịch vụ */ #nhom-dich-vu .service-card { background: var(--vncpc-white) !important; border: 1px solid rgba(18, 63, 42, 0.08) !important; border-radius: 22px; padding: 26px 22px !important; box-shadow: 0 16px 38px rgba(18, 63, 42, 0.08), 0 4px 12px rgba(18, 63, 42, 0.05); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } #nhom-dich-vu .service-card:hover { transform: translateY(-5px); border-color: rgba(120, 162, 47, 0.35) !important; box-shadow: 0 22px 48px rgba(18, 63, 42, 0.13), 0 8px 18px rgba(18, 63, 42, 0.08); } /* Icon box trong card */ #nhom-dich-vu .service-card .iconbox, #nhom-dich-vu .service-card .iconbox_content { width: 100% !important; max-width: none !important; text-align: left !important; display: block !important; } #nhom-dich-vu .service-card .iconbox_content { padding: 0 !important; margin: 0 !important; } /* --------------------------------------------------------- CẬP NHẬT LẠI 2 BLOCK ICON ĐỂ RESET HOÀN TOÀN LỖI HIỂN THỊ --------------------------------------------------------- */ /* 1. Icon nhóm dịch vụ (Căn trái) */ #nhom-dich-vu .service-card .iconbox_icon { /* Reset vị trí vòng tròn để căn trái thẳng hàng với text */ position: relative !important; left: 0 !important; right: auto !important; transform: none !important; margin: 0 0 18px 0 !important; /* Ép icon ra tâm tuyệt đối bằng Flexbox */ display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; /* Style kích thước và màu sắc */ width: 54px !important; height: 54px !important; border-radius: 50%; background: #edf7e8 !important; color: #5d9830 !important; font-size: 24px !important; box-shadow: none; } /* Reset phần tử giả chứa icon thực tế của Enfold */ #nhom-dich-vu .service-card .iconbox_icon::before { margin: 0 !important; padding: 0 !important; position: static !important; line-height: 1 !important; } /* 2. Icon quy trình hợp tác (Căn giữa) */ #quy-trinh-hop-tac .process-card .iconbox_icon { /* Reset vị trí vòng tròn */ position: relative !important; left: 0 !important; right: auto !important; transform: none !important; margin: 0 auto 16px auto !important; /* Ép icon ra tâm tuyệt đối bằng Flexbox */ display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; /* Style kích thước và màu sắc */ width: 50px !important; height: 50px !important; border-radius: 50%; background: var(--vncpc-white) !important; color: #5d9830 !important; font-size: 22px !important; box-shadow: 0 8px 20px rgba(18, 63, 42, 0.08); } /* Reset phần tử giả chứa icon thực tế của Enfold */ #quy-trinh-hop-tac .process-card .iconbox_icon::before { margin: 0 !important; padding: 0 !important; position: static !important; line-height: 1 !important; } /* Title card */ #nhom-dich-vu .service-card .iconbox_content_title, #nhom-dich-vu .service-card h3 { color: #123f2a !important; font-size: 20px !important; line-height: 1.25 !important; font-weight: 800 !important; letter-spacing: -0.015em; text-align: left !important; margin: 0 0 12px 0 !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } /* Nội dung card */ #nhom-dich-vu .service-card p, #nhom-dich-vu .service-card .iconbox_content_container { color: #53655b !important; font-size: 15px !important; line-height: 1.65 !important; text-align: left !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } /* PROCESS SECTION */ #quy-trinh-hop-tac { background: var(--vncpc-white) !important; } #quy-trinh-hop-tac .process-card { background: #f6faf3 !important; border: 1px solid rgba(18, 63, 42, 0.08) !important; border-radius: 20px; padding: 24px 18px !important; box-shadow: 0 12px 30px rgba(18, 63, 42, 0.06); } #quy-trinh-hop-tac .process-card .iconbox, #quy-trinh-hop-tac .process-card .iconbox_content { width: 100% !important; max-width: none !important; text-align: center !important; display: block !important; } #quy-trinh-hop-tac .process-card .iconbox_icon { width: 50px !important; height: 50px !important; line-height: 50px !important; border-radius: 50%; background: var(--vncpc-white) !important; color: #5d9830 !important; font-size: 22px !important; margin: 0 auto 16px auto !important; box-shadow: 0 8px 20px rgba(18, 63, 42, 0.08); } #quy-trinh-hop-tac .process-card .iconbox_content_title, #quy-trinh-hop-tac .process-card h3 { color: #123f2a !important; font-size: 17px !important; line-height: 1.28 !important; font-weight: 800 !important; text-align: center !important; margin-bottom: 10px !important; word-break: normal !important; white-space: normal !important; } #quy-trinh-hop-tac .process-card p, #quy-trinh-hop-tac .process-card .iconbox_content_container { color: #53655b !important; font-size: 14.5px !important; line-height: 1.6 !important; text-align: center !important; word-break: normal !important; white-space: normal !important; } /* ACCORDION CHI TIẾT DỊCH VỤ */ #chi-tiet-dich-vu { background: #f6faf3 !important; } #chi-tiet-dich-vu .service-accordion { max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; background: var(--vncpc-white) !important; border-radius: 20px; padding: 14px !important; box-shadow: 0 18px 44px rgba(18, 63, 42, 0.08), 0 4px 12px rgba(18, 63, 42, 0.05); } #chi-tiet-dich-vu .toggler { background: var(--vncpc-white) !important; color: #123f2a !important; border: 1px solid #e3ecdc !important; border-radius: 12px; margin-bottom: 8px !important; padding: 16px 18px 16px 46px !important; font-size: 15.5px !important; line-height: 1.4 !important; font-weight: 700 !important; transition: all 0.2s ease; } #chi-tiet-dich-vu .toggler:hover, #chi-tiet-dich-vu .toggler.activeTitle { background: #eef7e8 !important; color: #2f6f1f !important; border-color: rgba(120, 162, 47, 0.38) !important; } #chi-tiet-dich-vu .toggle_icon { left: 16px !important; color: #5d9830 !important; } #chi-tiet-dich-vu .toggle_wrap { background: var(--vncpc-white) !important; border: 1px solid #e3ecdc !important; border-top: none !important; border-radius: 0 0 12px 12px; margin: -8px 0 10px 0 !important; } #chi-tiet-dich-vu .toggle_content { color: #46584f !important; font-size: 15.5px !important; line-height: 1.75 !important; padding: 22px 24px !important; } #chi-tiet-dich-vu .toggle_content strong { color: #123f2a !important; } #chi-tiet-dich-vu .toggle_content ul { margin-top: 10px !important; margin-bottom: 18px !important; } #chi-tiet-dich-vu .toggle_content li { margin-bottom: 8px !important; } /* CTA CUỐI TRANG */ #lien-he-tu-van { background: radial-gradient(circle at top center, rgba(120, 162, 47, 0.22) 0%, rgba(18, 63, 42, 0) 42%), linear-gradient(135deg, #123f2a 0%, #06442d 100%) !important; color: var(--vncpc-white) !important; padding-top: 72px !important; padding-bottom: 78px !important; } #lien-he-tu-van h2 { color: var(--vncpc-white) !important; font-size: clamp(28px, 3vw, 40px) !important; line-height: 1.2 !important; text-shadow: 0 3px 14px rgba(0, 0, 0, 0.22) !important; } #lien-he-tu-van .av-subheading, #lien-he-tu-van .av-subheading p { color: rgba(255, 255, 255, 0.82) !important; font-size: 17px !important; line-height: 1.7 !important; max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; } #lien-he-tu-van .avia-button { border-radius: 999px; padding: 15px 30px !important; font-weight: 800 !important; background: var(--vncpc-white) !important; color: #123f2a !important; border-color: rgba(255, 255, 255, 0.8) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); } /* RESPONSIVE trang dịch vụ */ @media only screen and (max-width: 989px) { #vncpc-services-hero { min-height: 460px !important; } #vncpc-services-hero .hero-textbox { padding: 38px 20px 20px !important; } #nhom-dich-vu .service-card { padding: 24px 20px !important; } #nhom-dich-vu .service-card .iconbox_content_title, #nhom-dich-vu .service-card h3 { font-size: 18px !important; } #quy-trinh-hop-tac .process-card .iconbox_content_title, #quy-trinh-hop-tac .process-card h3 { font-size: 16px !important; } } @media only screen and (max-width: 767px) { #vncpc-services-hero { min-height: 430px !important; background-position: center center !important; } #vncpc-services-hero::before { background: radial-gradient(ellipse at center, rgba(7, 45, 29, 0.58) 0%, rgba(7, 45, 29, 0.42) 42%, rgba(7, 45, 29, 0.14) 78%, rgba(7, 45, 29, 0) 100%); } #vncpc-services-hero h1, #vncpc-services-hero .av-special-heading-tag { font-size: 30px !important; line-height: 1.14 !important; } #vncpc-services-hero .av-subheading, #vncpc-services-hero .av-subheading p { font-size: 15px !important; } #vncpc-services-hero .avia-button { display: block !important; width: min(100%, 300px) !important; margin: 8px auto !important; } #nhom-dich-vu, #quy-trinh-hop-tac, #chi-tiet-dich-vu { padding-top: 56px !important; padding-bottom: 56px !important; } #nhom-dich-vu .service-card, #quy-trinh-hop-tac .process-card { padding: 24px 20px !important; } #nhom-dich-vu .service-card .iconbox, #nhom-dich-vu .service-card .iconbox_content, #nhom-dich-vu .service-card .iconbox_content_title, #nhom-dich-vu .service-card h3, #nhom-dich-vu .service-card p, #nhom-dich-vu .service-card .iconbox_content_container { text-align: center !important; } #nhom-dich-vu .service-card .iconbox_icon { margin-left: auto !important; margin-right: auto !important; } #chi-tiet-dich-vu .service-accordion { padding: 8px !important; border-radius: 16px; } #chi-tiet-dich-vu .toggler { font-size: 14.5px !important; padding: 15px 14px 15px 42px !important; } #chi-tiet-dich-vu .toggle_content { font-size: 14.5px !important; padding: 18px 16px !important; } #lien-he-tu-van { padding-top: 58px !important; padding-bottom: 62px !important; } } @media only screen and (max-width: 420px) { #vncpc-services-hero h1, #vncpc-services-hero .av-special-heading-tag { font-size: 27px !important; } #nhom-dich-vu .service-card .iconbox_content_title, #nhom-dich-vu .service-card h3 { font-size: 18px !important; } } /* ========================================================= 18. FIX LAYOUT CỘT TRANG DỊCH VỤ — DÙNG CSS GRID Đặt CUỐI CÙNG để override mọi rule phía trên. Nguyên lý: thay vì can thiệp display của từng cột (gây lỗi bóp hẹp / xếp chồng tuỳ theo chế độ equal-height của Enfold), ta biến thẳng wrapper của section thành grid. Heading và các phần tử khác chiếm full hàng, mỗi cột card chiếm đúng 1 ô grid. Hoạt động với CẢ float lẫn table mode. ========================================================= */ /* Wrapper của 2 section thành grid */ #nhom-dich-vu .template-page .entry-content-wrapper, #quy-trinh-hop-tac .template-page .entry-content-wrapper { display: grid !important; gap: 22px; align-items: stretch; width: 100%; } #nhom-dich-vu .template-page .entry-content-wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)); } #quy-trinh-hop-tac .template-page .entry-content-wrapper { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } /* Tắt pseudo-element clearfix để không sinh ô grid thừa */ #nhom-dich-vu .template-page .entry-content-wrapper::before, #nhom-dich-vu .template-page .entry-content-wrapper::after, #quy-trinh-hop-tac .template-page .entry-content-wrapper::before, #quy-trinh-hop-tac .template-page .entry-content-wrapper::after { content: none !important; display: none !important; } /* Mặc định: heading, textblock, divider... chiếm trọn 1 hàng */ #nhom-dich-vu .template-page .entry-content-wrapper>*, #quy-trinh-hop-tac .template-page .entry-content-wrapper>* { grid-column: 1 / -1; min-width: 0; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; } /* Riêng các cột card: mỗi cột đúng 1 ô grid */ #nhom-dich-vu .template-page .entry-content-wrapper>.flex_column, #quy-trinh-hop-tac .template-page .entry-content-wrapper>.flex_column { grid-column: auto / span 1; display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; height: auto !important; } /* Trường hợp Enfold bọc cột equal-height trong .flex_column_table: bảng đó cũng chiếm full hàng và tự thành grid con */ #nhom-dich-vu .template-page .entry-content-wrapper>.flex_column_table, #quy-trinh-hop-tac .template-page .entry-content-wrapper>.flex_column_table { grid-column: 1 / -1; display: grid !important; gap: inherit; } #nhom-dich-vu .template-page .entry-content-wrapper>.flex_column_table { grid-template-columns: repeat(4, minmax(0, 1fr)); } #quy-trinh-hop-tac .template-page .entry-content-wrapper>.flex_column_table { grid-template-columns: repeat(5, minmax(0, 1fr)); } #nhom-dich-vu .flex_column_table>.flex_column, #quy-trinh-hop-tac .flex_column_table>.flex_column { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; } /* Card cao bằng nhau, bỏ margin-bottom vì grid đã có gap */ #nhom-dich-vu .service-card, #quy-trinh-hop-tac .process-card { height: 100% !important; margin-bottom: 0 !important; } /* Nội dung iconbox luôn full width, chữ wrap bình thường */ #nhom-dich-vu .service-card .iconbox, #nhom-dich-vu .service-card .iconbox_content, #nhom-dich-vu .service-card .iconbox_content_container, #quy-trinh-hop-tac .process-card .iconbox, #quy-trinh-hop-tac .process-card .iconbox_content, #quy-trinh-hop-tac .process-card .iconbox_content_container { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; word-break: normal !important; overflow-wrap: break-word !important; white-space: normal !important; } /* Tablet: 2 cột */ @media only screen and (max-width: 989px) { #nhom-dich-vu .template-page .entry-content-wrapper, #quy-trinh-hop-tac .template-page .entry-content-wrapper, #nhom-dich-vu .template-page .entry-content-wrapper>.flex_column_table, #quy-trinh-hop-tac .template-page .entry-content-wrapper>.flex_column_table { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } /* Mobile: 1 cột */ @media only screen and (max-width: 767px) { #nhom-dich-vu .template-page .entry-content-wrapper, #quy-trinh-hop-tac .template-page .entry-content-wrapper, #nhom-dich-vu .template-page .entry-content-wrapper>.flex_column_table, #quy-trinh-hop-tac .template-page .entry-content-wrapper>.flex_column_table { grid-template-columns: 1fr; gap: 14px; } } /* ========================================================= 20. FIX khung lồng khung: tắt card-style của iconbox bên trong service-card / process-card ========================================================= */ #top #nhom-dich-vu .service-card .iconbox, #top #quy-trinh-hop-tac .process-card .iconbox { background: transparent !important; border: 0 !important; box-shadow: none; padding: 0 !important; border-radius: 0; overflow: visible !important; } /* Bỏ luôn hiệu ứng hover nhấc lên của iconbox bên trong, để hover chỉ tác động lên card ngoài */ #top #nhom-dich-vu .service-card .iconbox:hover, #top #quy-trinh-hop-tac .process-card .iconbox:hover { transform: none !important; box-shadow: none; } /* Phòng trường hợp phần nội dung cũng dính viền */ #top #nhom-dich-vu .service-card .iconbox_content, #top #quy-trinh-hop-tac .process-card .iconbox_content { background: transparent !important; border: 0 !important; box-shadow: none; } /* ========================================================= 21. DataTable — WP-Filebase /an-pham/ table redesign Bo góc, header đậm, hover row, pagination mềm @since 2026-06-22 ========================================================= */ /* 21a. Table wrapper — bo góc + shadow */ #top .dataTables_wrapper .dataTable { border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(18, 63, 42, 0.06); border: 1px solid rgba(18, 63, 42, 0.08); } /* 21b. Header row — ink background, white text, no border-bottom */ #top .dataTables_wrapper .dataTable thead th, #top .dataTables_wrapper .dataTable thead td { background: var(--vncpc-ink); color: #fff; font-weight: 600; font-size: 13px; letter-spacing: 0.02em; text-transform: none; padding: 12px 18px; border: 0; border-bottom: 2px solid rgba(18, 63, 42, 0.15); } /* Sort arrows */ #top .dataTables_wrapper .dataTable thead .sorting, #top .dataTables_wrapper .dataTable thead .sorting_asc, #top .dataTables_wrapper .dataTable thead .sorting_desc { background-image: none; position: relative; } #top .dataTables_wrapper .dataTable thead .sorting::after { content: "↕"; opacity: 0.35; margin-left: 6px; font-size: 12px; } #top .dataTables_wrapper .dataTable thead .sorting_asc::after { content: "▲"; margin-left: 6px; font-size: 10px; opacity: 0.9; } #top .dataTables_wrapper .dataTable thead .sorting_desc::after { content: "▼"; margin-left: 6px; font-size: 10px; opacity: 0.9; } /* 21c. Body rows — soft horizontal-only separators */ #top .dataTables_wrapper .dataTable tbody td { padding: 11px 18px; border: 0; border-bottom: 1px solid rgba(18, 63, 42, 0.06); font-size: 14px; vertical-align: middle; } /* Remove DataTable default inline border */ #top .dataTables_wrapper .dataTable tbody td:first-child { border-left: 0; } #top .dataTables_wrapper .dataTable tbody td:last-child { border-right: 0; } /* 21d. Zebra striping — softer than default #f9f9f9 */ #top .dataTables_wrapper .dataTable tbody tr:nth-child(even) td { background: rgba(245, 250, 243, 0.45); } #top .dataTables_wrapper .dataTable tbody tr:nth-child(odd) td { background: #fff; } /* 21e. Row hover — mint glow */ #top .dataTables_wrapper .dataTable tbody tr:hover td { background: rgba(245, 250, 243, 0.85); transition: background 0.18s ease; } #top .dataTables_wrapper .dataTable tbody tr td { transition: background 0.18s ease; } /* 21f. File name links — inherit ink, bold on hover */ #top .dataTables_wrapper .dataTable tbody td a { color: var(--vncpc-ink); font-weight: 500; text-decoration: none; } #top .dataTables_wrapper .dataTable tbody td a:hover { text-decoration: underline; color: var(--vncpc-ink); } /* 21g. Search box — rounded, soft focus ring */ #top .dataTables_wrapper .dataTables_filter input { border-radius: 8px; border: 1px solid rgba(18, 63, 42, 0.15); padding: 8px 14px; font-size: 13px; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; outline: none; } #top .dataTables_wrapper .dataTables_filter input:focus { border-color: rgba(18, 63, 42, 0.35); box-shadow: 0 0 0 3px rgba(18, 63, 42, 0.06); } /* 21h. Length select — rounded */ #top .dataTables_wrapper .dataTables_length select { border-radius: 6px; border: 1px solid rgba(18, 63, 42, 0.15); padding: 6px 10px; font-size: 13px; background: #fff; } /* 21i. Pagination — pill buttons */ #top .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 6px; border: 1px solid rgba(18, 63, 42, 0.12); padding: 6px 12px; margin: 0 2px; font-size: 13px; background: #fff; color: var(--vncpc-ink) !important; cursor: pointer; transition: all 0.18s ease; } #top .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgba(245, 250, 243, 0.7); border-color: rgba(18, 63, 42, 0.25); color: var(--vncpc-ink) !important; } #top .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--vncpc-ink); color: #fff !important; border-color: var(--vncpc-ink); font-weight: 600; } #top .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--vncpc-ink); color: #fff !important; } #top .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: rgba(36, 52, 43, 0.35) !important; border-color: rgba(18, 63, 42, 0.06); cursor: default; } /* 21j. Info text */ #top .dataTables_wrapper .dataTables_info { color: rgba(36, 52, 43, 0.65); font-size: 13px; padding-top: 6px; } /* ========================================================= 22. Typography — Be Vietnam Pro font stack Vietnamese-optimized: clear diacritics, modern feel. Weights loaded: 400 Regular, 500 Medium, 600 SemiBold, 700 Bold, 800 ExtraBold @since 2026-06-23 ========================================================= */ /* 22a. Body / base text — apply to all text elements */ #top { font-family: var(--vncpc-font); } #top body, #top p, #top li, #top td, #top th, #top input, #top textarea, #top select, #top button, #top label, #top span, #top a, #top div { font-family: var(--vncpc-font); } /* Body text sizing — 16px for readability */ #top .entry-content p, #top .entry-content li, #top .entry-content td { font-size: 16px; line-height: 1.7; font-weight: 400; } #top .entry-content { font-size: 16px; line-height: 1.7; } /* 22b. Headings — Bold 700, tight tracking */ #top h1, #top h2, #top h3, #top h4, #top h5, #top h6, #top .av-special-heading-tag, #top .main-title, #top .main-title a { font-family: var(--vncpc-font); font-weight: 700; letter-spacing: -0.3px; } /* 22c. Main menu — Medium 500, slightly larger */ #top .main_menu ul:first-child > li > a, #top .av-main-nav > li > a { font-family: var(--vncpc-font); font-size: 13.5px; font-weight: 500; } /* Sub-menu items */ #top .main_menu .sub-menu li > a, #top .av-main-nav ul a { font-family: var(--vncpc-font); font-weight: 400; font-size: 13px; } /* 22d. Buttons — SemiBold 600 */ #top .avia-button, #top .avia-button-wrap .avia-button, #top button, #top input[type="submit"], #top .avia-button-row .avia-button { font-family: var(--vncpc-font); font-weight: 600; } /* 22e. Sidebar widgets */ #top .sidebar .widgettitle, #top .sidebar .widgettitle a { font-family: var(--vncpc-font); font-weight: 600; } #top .sidebar, #top .sidebar .widget, #top .sidebar a { font-family: var(--vncpc-font); } /* 22f. Footer */ #top #footer, #top #footer p, #top #footer a, #top #socket, #top #socket a { font-family: var(--vncpc-font); } /* 22g. Breadcrumb */ #top .breadcrumb, #top .breadcrumb a, #top .breadcrumb span { font-family: var(--vncpc-font); font-weight: 400; } /* 22h. Form elements */ #top input[type="text"], #top input[type="email"], #top input[type="search"], #top textarea, #top select { font-family: var(--vncpc-font); font-size: 15px; } /* ========================================================= 23. Portfolio Page Refactor — /du-an/ & /projects/ Plan: plans/20260707_1415-Refactor_Du_An_Portfolio_Prototype.md @since 2026-07-07 ========================================================= */ /* 23a. Hero Section */ #top.page-id-2913 #main > .container_wrap_first, #top.page-id-2270 #main > .container_wrap_first { display: none; } #top.page-id-2913 #main, #top.page-id-2270 #main { background: #fff; } #top.page-id-2913 #main .content, #top.page-id-2270 #main .content { padding-bottom: 0; } #top .vncpc-portfolio-hero { position: relative; overflow: hidden; display: flex; align-items: center; background: radial-gradient(ellipse at 4% 42%, rgba(111, 164, 58, 0.12) 0 6%, transparent 24%), radial-gradient(ellipse at 96% 38%, rgba(111, 164, 58, 0.10) 0 7%, transparent 26%), linear-gradient(180deg, #ffffff 0%, #f8fcf4 100%); min-height: 280px; padding: 64px 0 58px; margin-bottom: 0; text-align: center; border: 0 !important; box-shadow: none !important; } #top .vncpc-portfolio-hero > .container, #top .vncpc-portfolio-hero > .container > .content, #top .vncpc-portfolio-hero > .container .entry-content-wrapper, #top .vncpc-portfolio-hero .vncpc-portfolio-hero-inner, #top .vncpc-portfolio-hero .vncpc-portfolio-hero-inner .avia_textblock { float: none !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } #top .vncpc-portfolio-hero::before { content: ''; position: absolute; top: 22px; left: -26px; width: 290px; height: 260px; background: radial-gradient(ellipse at 30% 28%, rgba(111, 164, 58, 0.2) 0 12%, transparent 13%), radial-gradient(ellipse at 50% 46%, rgba(111, 164, 58, 0.16) 0 13%, transparent 14%), radial-gradient(ellipse at 70% 26%, rgba(111, 164, 58, 0.14) 0 11%, transparent 12%); opacity: 0.22; transform: rotate(-14deg); pointer-events: none; } #top .vncpc-portfolio-hero::after { content: ''; position: absolute; top: 24px; right: -18px; width: 300px; height: 260px; background: radial-gradient(ellipse at 30% 28%, rgba(111, 164, 58, 0.18) 0 12%, transparent 13%), radial-gradient(ellipse at 50% 48%, rgba(111, 164, 58, 0.14) 0 13%, transparent 14%), radial-gradient(ellipse at 70% 28%, rgba(111, 164, 58, 0.13) 0 11%, transparent 12%); opacity: 0.2; transform: scaleX(-1) rotate(-10deg); pointer-events: none; } #top .vncpc-portfolio-hero-inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 0 24px; } /* Hero background image set in the Avia builder (Section > Background Image): Enfold prints it as an inline style — force it to full-bleed cover so editors don't have to remember the "Stretch to fit" option, and drop the decorative gradient blobs that would sit on top of it. */ #top .vncpc-portfolio-hero[style*="background-image"] { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; min-height: 340px; } #top .vncpc-portfolio-hero[style*="background-image"]::before, #top .vncpc-portfolio-hero[style*="background-image"]::after { display: none; } #top .vncpc-portfolio-hero-title { font-family: var(--vncpc-font); font-size: clamp(30px, 3.5vw, 42px); font-weight: 900; letter-spacing: -0.02em; color: var(--vncpc-forest); margin: 0; line-height: 1.12; } #top .vncpc-portfolio-hero-sub { font-family: var(--vncpc-font); font-size: 16px; line-height: 1.65; color: var(--vncpc-muted); max-width: 760px; margin: 0 auto; text-align: center; } #top .vncpc-portfolio-hero-divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px auto 18px; color: var(--vncpc-leaf); } #top .vncpc-portfolio-hero-divider::before, #top .vncpc-portfolio-hero-divider::after { content: ''; width: 46px; height: 2px; background: currentColor; border-radius: 999px; } #top .vncpc-portfolio-hero-divider span { width: 18px; height: 18px; border-radius: 100% 0; background: currentColor; transform: rotate(-35deg); } /* Hero responsive */ @media only screen and (max-width: 767px) { #top .vncpc-portfolio-hero { min-height: 240px; padding: 44px 0 40px; } #top .vncpc-portfolio-hero-title { font-size: 26px; } #top .vncpc-portfolio-hero-sub { font-size: 15px; } } /* 23b. Project Listing Section + Live Search */ #top .vncpc-portfolio-projects { background: #ffffff; padding: 30px 0 34px; } #top .vncpc-portfolio-projects .content { padding-top: 0; padding-bottom: 0; } /* Hide old filter pills (sort="no" on page builder, but belt-and-suspenders) */ #top #js_sort_items, #top .av-portfolio-grid-sorting-container .sort_width_container, #top .vncpc-portfolio-listing .sort_width_container { display: none !important; } /* ── Live search row ── */ .vncpc-portfolio-search-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; max-width: 620px; margin: 2px auto 24px; position: relative; z-index: 20; } .vncpc-portfolio-search-label { position: relative; width: 100%; display: block; height: 48px; border-radius: 14px; overflow: hidden; } .vncpc-portfolio-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--vncpc-muted); pointer-events: none; flex-shrink: 0; } #top .vncpc-portfolio-search-label .vncpc-portfolio-search-input { width: 100%; height: 48px; padding: 12px 50px 12px 42px; border: 1px solid rgba(23, 63, 44, 0.18); border-radius: 12px; font-family: var(--vncpc-font); font-size: 15px; font-weight: 500; color: var(--vncpc-forest); background: var(--vncpc-white); outline: none; box-shadow: 0 8px 22px rgba(23, 63, 44, 0.08); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; box-sizing: border-box; } .vncpc-portfolio-search-input::placeholder { color: var(--vncpc-muted); opacity: 0.62; } .vncpc-portfolio-search-input:focus { border-color: var(--vncpc-leaf); box-shadow: 0 0 0 3px rgba(111, 164, 58, 0.16), 0 10px 28px rgba(23, 63, 44, 0.10); transform: translateY(-1px); } /* ── Clear button ── */ .vncpc-portfolio-search-clear { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border-radius: 50%; border: none; background: #eaf4e7; color: var(--vncpc-forest); cursor: pointer; transition: background 0.2s ease; padding: 0; line-height: 1; font-size: 16px; z-index: 2; } .vncpc-portfolio-autocomplete { display: none; width: 100%; background: #fff; border: 1px solid rgba(23, 63, 44, 0.10); border-radius: 12px; box-shadow: 0 14px 32px rgba(23, 63, 44, 0.14); overflow: hidden; } .vncpc-portfolio-autocomplete-item { width: 100%; text-align: left; border: 0; border-bottom: 1px solid rgba(23, 63, 44, 0.06); background: #fff; color: var(--vncpc-forest); font-family: var(--vncpc-font); font-size: 14px; line-height: 1.4; padding: 10px 14px; cursor: pointer; } .vncpc-portfolio-autocomplete-item:last-child { border-bottom: 0; } .vncpc-portfolio-autocomplete-item:hover, .vncpc-portfolio-autocomplete-item.is-active { background: var(--vncpc-mint); } .vncpc-portfolio-search-clear:hover { background: #d4ecd9; } .vncpc-portfolio-search-clear svg { width: 14px; height: 14px; } /* Navbar Enfold search tooltip polish */ #top #header #menu-item-search .avia-search-tooltip, #top #header .avia-search-tooltip { border-radius: 12px !important; border: 1px solid rgba(23, 63, 44, 0.12) !important; box-shadow: 0 16px 34px rgba(23, 63, 44, 0.14) !important; padding: 0 !important; } #top #header_main #menu-item-search > a, #top #header #menu-item-search > a { height: 46px !important; line-height: 46px !important; width: 38px !important; border-radius: 12px !important; margin-top: 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } #top #header .avia-search-tooltip #searchform { display: flex !important; align-items: center !important; border: 1px solid rgba(23, 63, 44, 0.20) !important; border-radius: 10px !important; overflow: hidden !important; background: #fff !important; margin: 6px !important; } #top #header .avia-search-tooltip #searchform > div { flex: 1 1 auto; } #top #header .avia-search-tooltip #searchform input[type="text"], #top #header .avia-search-tooltip #searchform input[type="search"], #top #header .avia-search-tooltip #searchform #s { height: 44px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 10px 14px !important; font-family: var(--vncpc-font) !important; font-size: 15px !important; color: var(--vncpc-forest) !important; } #top #header .avia-search-tooltip #searchsubmit { height: 44px !important; min-width: 48px !important; border: 0 !important; border-left: 1px solid rgba(23, 63, 44, 0.12) !important; border-radius: 0 !important; background: var(--vncpc-leaf) !important; color: #fff !important; line-height: 44px !important; font-family: "entypo-fontello" !important; font-size: 18px !important; text-indent: 0 !important; opacity: 1 !important; } /* ── No results message ── */ .vncpc-portfolio-no-results { text-align: center; padding: 16px 0; font-family: var(--vncpc-font); font-size: 15px; color: var(--vncpc-muted); } /* ── Mobile ── */ @media only screen and (max-width: 767px) { .vncpc-portfolio-search-row { max-width: 100%; margin-left: 20px; margin-right: 20px; } } /* 23c. Portfolio Cards — Refined from existing .grid-entry base styles */ /* Existing base (section 07): background, border, shadow, hover lift, content padding */ /* Card spacing — unified 28px gutter (see also 23f for blog/archive grids). Isotope positions items by border-box width, so the gutter lives as padding-right inside each 33.33% column; the container pulls right by -28px so the last column still reaches the content edge. */ #top .av-portfolio-grid-sorting-container .grid-sort-container, #top .vncpc-portfolio-listing .grid-sort-container { margin-right: -28px; } #top .av-portfolio-grid-sorting-container .grid-entry, #top .vncpc-portfolio-listing .grid-entry { width: 33.3333%; padding-right: 28px; margin-bottom: 28px; position: relative; /* the generic card look (section 07) paints the whole column white — with the gutter padding that reads as white strips glued together; the real card chrome lives on .inner-entry */ background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; } #top .av-portfolio-grid-sorting-container .grid-entry:hover, #top .vncpc-portfolio-listing .grid-entry:hover { box-shadow: none; } #top .av-portfolio-grid-sorting-container .grid-entry:hover .inner-entry, #top .vncpc-portfolio-listing .grid-entry:hover .inner-entry { box-shadow: 0 22px 52px rgba(23, 63, 44, 0.14); } /* Card thumb — consistent aspect ratio + zoom hover */ #top .av-portfolio-grid-sorting-container .grid-entry .grid-image, #top .vncpc-portfolio-listing .grid-entry .grid-image { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px 18px 0 0; } #top .av-portfolio-grid-sorting-container .grid-entry .grid-image img, #top .vncpc-portfolio-listing .grid-entry .grid-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; } #top .av-portfolio-grid-sorting-container .grid-entry:hover .grid-image img, #top .vncpc-portfolio-listing .grid-entry:hover .grid-image img { transform: scale(1.06); } #top .av-portfolio-grid-sorting-container .inner-entry, #top .vncpc-portfolio-listing .inner-entry { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 18px; background: var(--vncpc-white); border: 1px solid rgba(23, 63, 44, 0.08); box-shadow: 0 16px 38px rgba(23, 63, 44, 0.08); overflow: visible; } #top .av-portfolio-grid-sorting-container .grid-entry .grid-content, #top .vncpc-portfolio-listing .grid-entry .grid-content { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; text-align: left; min-height: 150px; position: relative; overflow: hidden; } .vncpc-portfolio-card-badge { position: absolute; top: 14px; left: 14px; font-family: var(--vncpc-font); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 3px 10px; border-radius: 50px; line-height: 1.5; color: var(--vncpc-forest); background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 20px rgba(23, 63, 44, 0.10); pointer-events: none; z-index: 3; } /* Arrow indicator on card hover */ #top .av-portfolio-grid-sorting-container .grid-entry .grid-content::after, #top .vncpc-portfolio-listing .grid-entry .grid-content::after { content: '→'; position: absolute; bottom: 18px; right: 18px; font-size: 18px; color: var(--vncpc-leaf); opacity: 1; transform: none; transition: all 0.25s ease; pointer-events: none; } #top .av-portfolio-grid-sorting-container .grid-entry:hover .grid-content::after, #top .vncpc-portfolio-listing .grid-entry:hover .grid-content::after { opacity: 1; transform: translateX(0); } /* Typography refinements for portfolio cards */ #top .av-portfolio-grid-sorting-container .grid-entry-title, #top .vncpc-portfolio-listing .grid-entry-title { font-size: 16px; font-weight: 850; line-height: 1.42; margin-bottom: 4px; overflow: hidden; text-align: left; } #top .av-portfolio-grid-sorting-container .grid-entry-title a, #top .vncpc-portfolio-listing .grid-entry-title a { color: var(--vncpc-forest); text-decoration: none; display: -webkit-box; min-height: 45px; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; } #top .av-portfolio-grid-sorting-container .grid-entry-title a:hover, #top .vncpc-portfolio-listing .grid-entry-title a:hover { color: var(--vncpc-leaf); } #top .av-portfolio-grid-sorting-container .grid-entry-excerpt, #top .vncpc-portfolio-listing .grid-entry-excerpt { font-size: 14px; line-height: 1.65; color: var(--vncpc-muted); padding-right: 22px; margin-top: 0; /* Clamp to 3 lines */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 4.95em; opacity: 1 !important; visibility: visible !important; } /* Ensure card click area — make entire card clickable via overlay */ #top .av-portfolio-grid-sorting-container .grid-entry .grid-image a::after, #top .vncpc-portfolio-listing .grid-entry .grid-image a::after { content: ''; position: absolute; inset: 0; z-index: 2; } /* 23d. Pagination Pills */ #top .pagination-wrap { text-align: center; padding: 12px 0 18px; } #top .pagination { display: inline-flex; gap: 6px; align-items: center; } #top .pagination .pagination-meta { display: none; } #top .pagination .current, #top .pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 50px; font-family: var(--vncpc-font); font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s ease; } #top .pagination .current { background: linear-gradient(135deg, var(--vncpc-forest), #1a4a2e); color: #fff; box-shadow: 0 4px 12px rgba(23,63,44,0.2); } #top .pagination a { color: var(--vncpc-muted); background: var(--vncpc-white); border: 1.5px solid var(--vncpc-soft-border); } #top .pagination a:hover { color: var(--vncpc-forest); border-color: var(--vncpc-leaf); background: var(--vncpc-mint); } #top .pagination .inactive { opacity: 1; pointer-events: auto; } /* 23e. Responsive Grid — keep 3 cols through tablet so layouts never drop to 2. Mobile (<768) stays 1 col via Enfold av-mobile-columns. items=12 → full rows of 3 on desktop/tablet, so no lone card when a page has an odd remainder. */ @media only screen and (max-width: 989px) and (min-width: 768px) { #top .av-portfolio-grid-sorting-container .grid-entry.av_one_third, #top .vncpc-portfolio-listing .grid-entry.av_one_third { width: calc((100% - 56px) / 3) !important; margin-left: 28px !important; padding-right: 0; clear: none; } #top .av-portfolio-grid-sorting-container .grid-entry.av_one_third.first, #top .vncpc-portfolio-listing .grid-entry.av_one_third.first, #top .av-portfolio-grid-sorting-container .grid-entry.av_one_third:nth-child(3n+1), #top .vncpc-portfolio-listing .grid-entry.av_one_third:nth-child(3n+1) { margin-left: 0 !important; clear: left; } #top .av-portfolio-grid-sorting-container .grid-sort-container.isotope, #top .vncpc-portfolio-listing .grid-sort-container.isotope { display: flex; flex-wrap: wrap; gap: 0 0; margin-right: 0; row-gap: 28px; } } /* Mobile: 1 col — Enfold handles via av-mobile-columns */ /* Ensure cards don't stretch too wide */ @media only screen and (max-width: 479px) { #top .av-portfolio-grid-sorting-container .grid-entry .grid-content, #top .vncpc-portfolio-listing .grid-entry .grid-content { padding: 14px 14px 36px 14px; min-height: auto; } #top .av-portfolio-grid-sorting-container .grid-entry-title, #top .vncpc-portfolio-listing .grid-entry-title { font-size: 16px; } } /* 23f. Blog/Archive post grids — same unified 28px gutter as portfolio. Enfold's av_one_third column defaults to margin-left:6% (~65px), which looks disproportionate next to the portfolio grid. Applies to category/ tag/date archives, /tin-tuc/ and homepage post sliders alike. */ #top .avia-content-slider .slide-entry.av_one_third { margin-left: 28px; width: calc((100% - 56px) / 3); } #top .avia-content-slider .slide-entry.av_one_third.first { margin-left: 0; } /* Row wrapper: vertical gap 40px -> 28px to match the horizontal gutter */ #top .avia-content-slider .slide-entry-wrap { margin-bottom: 28px; } /* Enfold's own mobile rules (.responsive #top #wrap_all .slide-entry) have higher specificity and keep handling <768px stacking — no override needed. */ /* ------------------------------- 24. Single post — featured image as hero with title overlay The old title_container is hidden on single-post; the article's .big-preview.single-big becomes the hero and the entry header (H1 + meta) overlays its bottom edge. Scoped to .with-slider so posts without a featured image keep the header in normal flow. -------------------------------- */ #top.single-post .post-entry.single-big.with-slider { position: relative; } #top.single-post .big-preview.single-big { position: relative; padding: 0; margin-bottom: 28px; } #top.single-post .big-preview.single-big img { width: 100%; height: clamp(260px, 36vw, 460px); object-fit: cover; } /* Bottom darkening for text legibility — strong enough that a white title stays readable even over bright/white image areas */ #top.single-post .big-preview.single-big::after { content: ''; position: absolute; inset: 0; border-radius: var(--vncpc-radius-md); pointer-events: none; background: linear-gradient(180deg, rgba(5, 45, 28, 0) 22%, rgba(5, 45, 28, 0.30) 46%, rgba(5, 45, 28, 0.62) 72%, rgba(5, 45, 28, 0.88) 100%); /* Enfold gives the img inside z-index:4 — paint the overlay above it */ z-index: 5; } #top.single-post .post-entry.single-big.with-slider .entry-content-header { position: absolute; top: 0; left: 0; right: 0; /* .big-preview is an Enfold stacking context at z-index:4 — the caption must sit above it */ z-index: 6; height: clamp(260px, 36vw, 460px); /* Enfold fullsize-blog forces "wrapper > *" into a narrow centered column — the hero caption must span the full image width instead */ max-width: 100% !important; width: auto !important; margin: 0 !important; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 0 clamp(20px, 4vw, 46px) clamp(18px, 3vw, 32px); pointer-events: none; } #top.single-post .post-entry.single-big.with-slider .entry-content-header a { pointer-events: auto; } #top.single-post .post-entry.single-big.with-slider .post-title, #top.single-post .post-entry.single-big.with-slider .post-title a { color: #fff !important; font-size: clamp(24px, 2.7vw, 38px); line-height: 1.26; /* auto side margins: the h1 carries a max-width, so it must center itself inside the full-width flex header */ margin: 0 auto 8px; text-align: center; text-shadow: 0 4px 16px rgba(0, 0, 0, 0.44), 0 2px 6px rgba(0, 0, 0, 0.38); } #top.single-post .post-entry.single-big.with-slider .post-meta-infos, #top.single-post .post-entry.single-big.with-slider .post-meta-infos a, #top.single-post .post-entry.single-big.with-slider .post-meta-infos time, #top.single-post .post-entry.single-big.with-slider .post-meta-infos span { color: rgba(255, 255, 255, 0.88) !important; font-size: 13.5px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } #top.single-post .post-entry.single-big.with-slider .post-meta-infos a:hover { color: #fff !important; } /* ----------------------------------------------- FIX: Disable Enfold image-overlay crescent on news widgets Root cause: - avia.js injects into every a>img - Hover CSS: .avia_transform a:hover .image-overlay { opacity:0.7 } - .image-overlay-inside::before is an 80px circle; footer_color paints it rgb(243,255,222) → pale crescent when clipped by .news-link { overflow:hidden } Wrong scope in first pass: only .av-magazine-thumbnail-link Actual footer "TIN MỚI NHẤT" is #newsbox-8 (.newsbox > .news-link) ------------------------------------------------ */ #top .av-magazine-thumbnail-link .image-overlay, #top #footer .news-link .image-overlay, #top .newsbox .news-link .image-overlay { display: none !important; }