/* CSS liên quan tới dark và light */ /* --- nhấn mạnh về địa lý, địa danh, quốc gia .apini-highligh-geo --- */ /* --- nhấn mạnh ý chính, ý nổi bật .apini-highligh-primary --- */ /* --- nhấn mạnh về số liệu .apini-highligh-data--- */ /* LIGHT */ html:not(.apini-dark) .apini-highligh-geo, html:not(.apini-dark) .apini-highligh-primary, html:not(.apini-dark) .apini-highligh-data{ text-shadow: none !important; filter: none !important; } /* dark gọi glow của apini-white-glow*/ html.apini-dark .apini-highligh-geo, html.apini-dark .apini-highligh-primary, html.apini-dark .apini-highligh-data{ --awg1: .22; --awg2: .25; --awg3: .10; text-shadow: 0 0 6px rgba(255,255,255,var(--awg1)), 0 0 16px rgba(255,255,255,var(--awg2)), 0 0 28px rgba(255,255,255,var(--awg3)); } /* Dark mode: đổi nền gradient + màu viền xanh dạ quang */ html.apini-dark .apini-country-text{ background: linear-gradient(to right, #205072, #329D9C); } html.apini-dark .apini-country-text::before{ border-color:#00FF99; /* xanh dạ quang bạn đang dùng cho hệ neon */ } .apini-country-detail.active .apini-country-text { left: 60px; opacity: 1; z-index: 97000 !important; } .apini-country-detail:not(.active) .apini-country-text { left: -520px; opacity: 0; } /* ========================= APINI WHITE GLOW 2 Light = stroke đỏ dưới chữ Dark = glow trắng ========================= */ .apini-white-glow2, .apini-white-glow2 *:not(.button):not(.btn):not(a.button){ color: #f7f7f7 !important; -webkit-text-fill-color: #f7f7f7 !important; opacity: 1 !important; transition: text-shadow .28s ease, filter .28s ease; z-index: 6 !important; } /* DARK: glow trắng cho apini-white-glow2 */ html.apini-dark .apini-white-glow2, html.apini-dark .apini-white-glow2 *:not(.button):not(.btn):not(a.button){ color: #f7f7f7 !important; -webkit-text-fill-color: #f7f7f7 !important; opacity: 1 !important; --awg2-1: .92; --awg2-2: .55; --awg2-3: .30; text-shadow: 0 0 6px rgba(255,255,255,var(--awg2-1)), 0 0 16px rgba(255,255,255,var(--awg2-2)), 0 0 28px rgba(255,255,255,var(--awg2-3)) !important; } /* DARK: mobile glow trắng giảm cho apini-white-glow2 */ @media (max-width: 767px){ html.apini-dark .apini-white-glow2, html.apini-dark .apini-white-glow2 *:not(.button):not(.btn):not(a.button){ --awg2-1: .55; --awg2-2: .26; --awg2-3: .12; text-shadow: 0 0 2px rgba(255,255,255,var(--awg2-1)), 0 0 6px rgba(255,255,255,var(--awg2-2)), 0 0 12px rgba(255,255,255,var(--awg2-3)) !important; } } /* LIGHT: stroke dày hơn, nằm chủ yếu dưới text */ html:not(.apini-dark) .apini-white-glow2, html:not(.apini-dark) .apini-white-glow2 *:not(.button):not(.btn):not(a.button){ filter: none !important; -webkit-text-stroke: 0 !important; text-shadow: /* ===== LỚP DƯỚI (trọng tâm chính) ===== */ 0 1px 0 #FF5C48, 0 2px 0 #FF5C48, 0 3px 0 #FF5C48, 0 4px 0 #FF5C48, 0 5px 0 rgba(255,92,72,.95), /* ===== 4 HƯỚNG CHÍNH ===== */ 1px 0 0 rgba(255,92,72,.8), -1px 0 0 rgba(255,92,72,.8), 0 -1px 0 rgba(255,92,72,.75), 0 1px 0 rgba(255,92,72,.95), /* ===== 4 HƯỚNG CHÉO ===== */ 1px 2px 0 rgba(255,92,72,.9), -1px 2px 0 rgba(255,92,72,.9), 1px -1px 0 rgba(255,92,72,.7), -1px -1px 0 rgba(255,92,72,.7), /* ===== MỞ RỘNG RA NGOÀI ===== */ 4px 0 0 rgba(255,92,72,.75), -4px 0 0 rgba(255,92,72,.75), 0 -2px 0 rgba(255,92,72,.6), 2px 2px 0 rgba(255,92,72,.6), -2px 2px 0 rgba(255,92,72,.6), 2px -2px 0 rgba(255,92,72,.5), -2px -2px 0 rgba(255,92,72,.5), 3px 0 0 rgba(255,92,72,.55), -3px 0 0 rgba(255,92,72,.55), 0 -3px 0 rgba(255,92,72,.45), 6px 3px 0 rgba(255,92,72,.45), -4px 3px 0 rgba(255,92,72,.45), 6px -3px 0 rgba(255,92,72,.35), -4px -3px 0 rgba(255,92,72,.35), /* ===== glow mềm ===== */ 0 6px 12px rgba(255,92,72,.25) !important; } /* rule xử lý text đen và trắng trong dark mode, định dạng text */ .apini-text-block{ font-family: 'Be Vietnam Pro', sans-serif; letter-spacing: 0.1px; font-size: 16px; line-height: 1.6; margin: 0 0 10px 10px; text-align: left; text-indent: 0; color: rgba(255,255,255,0.92); } /* ĐT làm gọn text */ @media (max-width: 767px){ .apini-text-block{ margin: 0 !important; width: 100% !important; max-width: none !important; } .apini-text-block ul, .apini-text-block ol, .apini-text-block .apini-list{ margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .apini-text-block li, .apini-text-block .apini-list li{ margin-bottom: 6px !important; padding-left: 12px !important; } .apini-text-block li::before, .apini-text-block .apini-list li::before{ left: -8px; } } /* xóa list mặc định của WordPress và destop cách lề 10px*/ .apini-text-block ul, .apini-text-block ol{ list-style: none !important; } /* ===== DESKTOP giữ nguyên ===== */ .apini-text-block ul{ padding-left: 8px; margin-left: 0 !important; } .apini-text-block li{ padding-left: 18px; } /* reset list */ .apini-list{ list-style: none; padding-left: 8px; } /* từng dòng */ .apini-list li{ position: relative; padding-left: 18px; margin-bottom: 6px; } /* bullet custom */ .apini-list li::before{ content: "•"; position: absolute; left: 0; top: 0; color: #00e0ff; font-size: 18px; } /* khi tối đổi màu thẻ li */ html:not(.apini-dark) .apini-list li::before{ color:#9c0b2d; } /* ẩn dòng apini-li= class"no-dot" */ /* dòng phụ */ .apini-list li.no-dot{ padding-left: 30px; /* thụt vào */ position: relative; } /* thêm dấu "-" cho dòng phụ */ .apini-list li.no-dot::before{ content: "- "; margin-right: 4px; position: static; /* QUAN TRỌNG */ color: #00e0ff; font-weight: bold; } /* khi tối thì đổi màu 000 thành trắng fff trong apini-tex-block */ html.apini-dark .apini-text-block{ color:#fff; } /* ========================================================= Vùng miễn nhiễm class safe-text đặt class trong vùng cần miễn nhiễm màu và sử dụng các màu cụ thể bên dưới | Màu gốc ở sáng | Khi bật tối | Mã màu sáng | Mã màu tối | | --------------- | ----------------------------------------- | --------------------------------------------: | ---------: | | Đen gần đen | chuyển thành trắng | `#111`, `#111111`, `#000`, `#000000`, `black` | `#fff` | | Trắng | vẫn là trắng ở dark | `#fff`, `#ffffff` | `#fff` | | Cam nhấn | giữ nguyên cam | `#e65100` | `#e65100` | | Cam sáng hơn | giữ nguyên cam | `#ff6a00` | `#ff6a00` | | Đỏ rượu | giữ nguyên đỏ | `#b81f24` | `#b81f24` | | Đỏ thuần | giữ nguyên đỏ | `#ff0000` | `#ff0000` | | Xanh dương sáng | giữ nguyên xanh | `#1e90ff` | `#1e90ff` | | Xanh dương đậm | giữ nguyên xanh, thêm viền/glow trắng nhẹ | `#1976d2` | `#1976d2` | Ghi chú: - #111 / #000 trong dark mode thường bị ép sang #fff - #1976d2 trong dark mode có thể thêm viền/glow trắng nhẹ ========================================================= */ /* ============ APINI Theme Toggle ============ */ :root{ --apini-neon:#00ffa6; /* xanh dạ-quang */ --apini-track-bg:#5f6368; /* xám rãnh */ --apini-track-shadow-in:#00000088; --apini-thumb-dark:#111; /* nền nút khi ở phía "Tối" */ --apini-thumb-light:#fff; /* nền nút khi ở phía "Sáng" */ --apini-border-dark:#0b0b0b; /* viền ngoài tối */ --apini-border-light:#ffffff; /* viền ngoài sáng */ } .apini-theme-toggle{ user-select:none; display:inline-block; } /* ============track APINI Theme Toggle ============ */ .apini-theme-toggle .apini-toggle-track{ position:relative; width:126px; height:44px; border-radius:999px; background:var(--apini-track-bg); border:1px solid var(--apini-neon); /* viền xanh dạ quang 1px */ box-shadow: 0 0 10px var(--apini-neon), /* glow nhẹ bên ngoài */ inset 6px 6px 12px var(--apini-track-shadow-in), inset -6px -6px 12px rgba(255,255,255,.15); padding:1px; /* khe 1px quanh thumb */ } /* Thumb: kích thước khớp khe 1px với track mới */ .apini-toggle-thumb{ position:absolute; top:1px; left:1px; width:62px; height:42px; /* = (126-2)/2 x (44-2) */ border-radius:999px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--apini-thumb-dark); color:#fff; /* viền trong mỏng hơn: 1px + 2px */ box-shadow: 0 0 0 1px var(--apini-border-light) inset, 0 0 0 2px var(--apini-border-dark) inset, 0 2px 8px rgba(0,0,0,.35); transition:left .28s ease, background .28s ease, color .28s ease, box-shadow .28s ease; } .apini-toggle-thumb::before{ content:""; position:absolute; inset:2px; border-radius:inherit; box-shadow:0 0 10px var(--apini-neon), 0 0 2px var(--apini-neon) inset; opacity:.95; pointer-events:none; } .apini-toggle-text{ position:absolute; width:100%; text-align:center; font-weight:700; font-size:14px; letter-spacing:.3px; } .apini-toggle-text--toi{ color:#fff; } .apini-toggle-text--sang{ color:#111; } /* Trạng thái Sáng: thumb trượt sang phải – tính theo padding 1px + nửa track trong (62px) */ .apini-theme-toggle.is-light .apini-toggle-thumb{ left:63px; /* 1 + 62 */ background:var(--apini-thumb-light); color:#111; box-shadow: 0 0 0 1px var(--apini-border-dark) inset, 0 0 0 2px var(--apini-border-light) inset, 0 2px 8px rgba(0,0,0,.35); } .apini-theme-toggle.is-light .apini-toggle-text--toi{ opacity:0; } .apini-theme-toggle:not(.is-light) .apini-toggle-text--sang{ opacity:0; } .apini-theme-toggle[role="switch"]{ cursor:pointer; } .apini-theme-toggle:focus-visible .apini-toggle-track{ outline:2px solid var(--apini-neon); outline-offset:3px; } /* Tắt transition khi init để khỏi giật */ .apini-theme-toggle[data-no-anim] .apini-toggle-thumb{ transition:none !important; } /* Vị trí toggle */ .apini-theme-toggle--desktop{ position:fixed; top:8px; right:8px; z-index:100000; } /* ==== FIX đè chồng với thanh Liên hệ/FAQ (desktop) ==== */ @media (min-width:1025px){ /* dời toggle sang trái để không đè thanh dọc 60px */ .apini-theme-toggle--desktop{ position:absolute; top:12px; z-index:100001; } /* đẩy thanh dọc xuống thoáng hơn */ #apini-toggle-vertical.apini-vertical-bar{ top:84px!important; right:5px!important; } } /* ============ DARK MODE ============ */ /* biến màu khi tối */ html.apini-light { color-scheme: light; } html.apini-dark { color-scheme: dark; } html.apini-dark{ --aven-bg:#0d1117; /* nền trang */ --aven-txt:#e6edf3; /* chữ */ --aven-line:#30363d; /* viền */ } /* nền & chữ tổng quát */ html.apini-dark, body.apini-dark{ background:var(--aven-bg)!important; color:var(--aven-txt)!important; } /* LIGHT: nền xám, text/icon trắng */ html:not(.apini-dark) :is(#apiniMobileHeader,#apiniMobileMenuPanel){ background:var(--mb-light-bg) !important; color:#fff !important; -webkit-text-fill-color:#fff !important; } /* DARK: nền #0047AB, text/icon trắng */ html.apini-dark :is(#apiniMobileHeader,#apiniMobileMenuPanel){ background:var(--mb-dark-bg) !important; color:#fff !important; -webkit-text-fill-color:#fff !important; } /* Chặn các rule global “làm mất nền” (transparent/filter/overlay) */ :is(#apiniMobileHeader,#apiniMobileMenuPanel){ mix-blend-mode:normal !important; opacity:1 !important; } :is(#apiniMobileHeader,#apiniMobileMenuPanel) :is(.bg,.bg-fill,.banner-bg,.page-title-bg,img){ background-color:transparent !important; filter:none !important; mix-blend-mode:normal !important; opacity:1 !important; } /* xóa nền wrapper & giữ màu chữ */ html.apini-dark #wrapper, html.apini-dark #main, html.apini-dark .site-content, html.apini-dark .page-wrapper, html.apini-dark .container, html.apini-dark .row, html.apini-dark .col, html.apini-dark .content-area, html.apini-dark .entry-content, html.apini-dark .post, html.apini-dark .post-inner{ background-color:transparent!important; color:var(--aven-txt)!important; } /* section/box không nền */ html.apini-dark .section, html.apini-dark .ux-section, html.apini-dark .section .section-content, html.apini-dark .section.dark, html.apini-dark .section.light, html.apini-dark .box, html.apini-dark .icon-box, html.apini-dark .callout{ background-color:transparent!important; } html.apini-dark .banner .bg-fill { filter: brightness(.9); } /* KHÔNG dùng !important */ /* EXCEPT — text trong mobile menu giữ trắng, không bị ép opacity */ :is(#apiniMobileHeader,#apiniMobileMenuPanel), :is(#apiniMobileHeader,#apiniMobileMenuPanel) *{ color:#fff !important; -webkit-text-fill-color:#fff !important; opacity:revert !important; text-shadow:none !important; } /* LIGHT ONLY: vô hiệu hoá glow & trả về màu gốc bên trong vùng .awg-light-restore */ html:not(.apini-dark) .awg-light-restore .apini-white-glow, html:not(.apini-dark) .awg-light-restore .apini-white-glow *:not(.button):not(.btn):not(a.button){ color: inherit !important; -webkit-text-fill-color: initial !important; text-shadow: none !important; filter: none !important; } /* Tôn trọng màu inline nếu có (không đổi màu inline) */ html:not(.apini-dark) .awg-light-restore .apini-white-glow [style*="color" i], html:not(.apini-dark) .awg-light-restore .apini-white-glow *[style*="color" i]{ color: inherit !important; /* kế thừa đúng chuỗi màu bên ngoài */ -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } /* Nếu vùng này nằm trong mobile header/panel vốn ép trắng — vẫn trả về màu gốc */ :is(#apiniMobileHeader,#apiniMobileMenuPanel) .awg-light-restore .apini-white-glow, :is(#apiniMobileHeader,#apiniMobileMenuPanel) .awg-light-restore .apini-white-glow *{ color: inherit !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } /* header/footer tông tối */ html.apini-dark .header, html.apini-dark .header-wrapper, html.apini-dark .stuck .header, html.apini-dark .footer, html.apini-dark .footer-secondary, html.apini-dark .absolute-footer{ background:#0b0f14!important; color:var(--aven-txt)!important; } /* link & viền */ html.apini-dark a{ color:#58a6ff!important; } html.apini-dark a:hover{ color:#79c0ff!important; } html.apini-dark hr, html.apini-dark .divider, html.apini-dark table, html.apini-dark th, html.apini-dark td{ border-color:var(--aven-line)!important; } /* EXCEPT — link trong mobile menu luôn trắng (cả Light/Dark) */ :is(#apiniMobileHeader,#apiniMobileMenuPanel) a{ color:#fff !important; } :is(#apiniMobileHeader,#apiniMobileMenuPanel) a:hover{ color:#fff !important; } html.apini-dark :is(#apiniMobileHeader, #apiniMobileMenuPanel) a:hover{ color: revert !important; }/* form */ html.apini-dark input, html.apini-dark textarea, html.apini-dark select{ background:#0f141a!important; color:var(--aven-txt)!important; border:1px solid var(--aven-line)!important; } html.apini-dark ::placeholder{ color:#9aa7b2!important; } /* Chỉ H1/H2 có glow khi Dark */ html.apini-dark h1, html.apini-dark .h1, html.apini-dark h2, html.apini-dark .h2{ text-shadow:0 0 6px rgba(255,255,255,.9), 0 0 12px rgba(255,255,255,.5); } /* ⛔ EXCEPT: Không glow trong mobile menu */ html.apini-dark :is(#apiniMobileHeader, #apiniMobileMenuPanel) :where(h1,.h1,h2,.h2){ text-shadow: none !important; } /* Tắt glow cho H1/H2 khi Light */ html:not(.apini-dark) h1, html:not(.apini-dark) .h1, html:not(.apini-dark) h2, html:not(.apini-dark) .h2{ text-shadow:none !important; } /* APINI — fix màu chữ trong footer widget khi Dark */ html.apini-dark .footer .textwidget, html.apini-dark .footer .textwidget p, html.apini-dark .footer .textwidget li, html.apini-dark .footer .textwidget a, html.apini-dark .footer .textwidget h1, html.apini-dark .footer .textwidget h2, html.apini-dark .footer .textwidget h3, html.apini-dark .footer .textwidget h4, html.apini-dark .footer .textwidget h5, html.apini-dark .footer .textwidget h6, html.apini-dark h3.h3-footer{ color: var(--aven-txt) !important; /* #e6edf3 */ } /* Nếu tiêu đề có gạch chân/gradient hãy bỏ để đỡ lóa */ html.apini-dark .footer .textwidget h3::after{ content:none !important; } /* Link trong footer khi hover (đồng bộ dark mode) */ html.apini-dark .footer .textwidget a:hover{ color:#79c0ff !important; } /* ĐÈ MẠNH text khi Dark — loại trừ toàn bộ vùng weather để giữ màu gốc */ html.apini-dark :not(.weather-slider):not(.weather-info):not(.weather-info *) .dark, html.apini-dark :not(.weather-slider):not(.weather-info):not(.weather-info *) .dark *, html.apini-dark :not(.weather-slider):not(.weather-info):not(.weather-info *) .section .overlay, html.apini-dark :not(.weather-slider):not(.weather-info):not(.weather-info *) .ux-section .overlay, html.apini-dark small:not(.weather-info *), html.apini-dark .is-small:not(.weather-info *), html.apini-dark .subtitle:not(.weather-info *), html.apini-dark .subheading:not(.weather-info *), html.apini-dark .text-left:not(.weather-info *), html.apini-dark .text-right:not(.weather-info *), html.apini-dark .uppercase:not(.weather-info *), html.apini-dark .lowercase:not(.weather-info *), html.apini-dark .text-box:not(.weather-info *), html.apini-dark .text-box-content:not(.weather-info *), html.apini-dark .box-text:not(.weather-info *), html.apini-dark .ux-text:not(.weather-info *), html.apini-dark .icon-box-text:not(.weather-info *), html.apini-dark :where(:not(.weather-info) *) .dark, html.apini-dark :where(:not(.weather-info) *) .dark *, html.apini-dark :where(:not(.weather-info) *) .section .overlay, html.apini-dark :where(:not(.weather-info) *) .ux-section .overlay, html.apini-dark :where(:not(.weather-info) *) .entry-content *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), html.apini-dark :where(:not(.weather-info) *) .container *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), html.apini-dark :where(:not(.weather-info) *) small, html.apini-dark :where(:not(.weather-info) *) .is-small, html.apini-dark :where(:not(.weather-info) *) .subtitle, html.apini-dark :where(:not(.weather-info) *) .subheading, html.apini-dark :where(:not(.weather-info) *) .text-left, html.apini-dark :where(:not(.weather-info) *) .text-right, html.apini-dark :where(:not(.weather-info) *) .uppercase, html.apini-dark :where(:not(.weather-info) *) .lowercase, html.apini-dark :where(:not(.weather-info) *) .text-box, html.apini-dark :where(:not(.weather-info) *) .text-box-content, html.apini-dark :where(:not(.weather-info) *) .box-text, html.apini-dark :where(:not(.weather-info) *) .ux-text, html.apini-dark :where(:not(.weather-info) *) .icon-box-text { color: var(--aven-txt) !important; opacity: 1 !important; } html.apini-dark .safe-text *{ color:unset !important; } /* CAM */ .apini-color-orange{ color:#e65100; } html.apini-dark .apini-color-orange{ color:#e65100 !important; -webkit-text-fill-color:#e65100 !important; text-shadow:0 0 6px rgba(230,81,0,.25); } /* ĐỎ */ .apini-color-red{ color:#b81f24; } html.apini-dark .apini-color-red{ color:#b81f24 !important; -webkit-text-fill-color:#b81f24 !important; } /* XANH */ .apini-color-blue{ color:#1976d2; } html.apini-dark .apini-color-blue{ color:#1976d2 !important; -webkit-text-fill-color:#1976d2 !important; -webkit-text-stroke:.5px rgba(255,255,255,.4); } /* GIỮ ĐEN (special như weather) */ .apini-keep-black{ color:#111; } html.apini-dark .apini-keep-black{ color:#111 !important; -webkit-text-fill-color:#111 !important; -webkit-text-stroke:.5px rgba(255,255,255,.5); } /* ⛔ EXCEPT: Không ép màu trong mobile menu */ html.apini-dark :is(#apiniMobileHeader, #apiniMobileMenuPanel, #apiniMobileMenuPanel *){ color: revert !important; opacity: revert !important; -webkit-text-fill-color: revert !important; } /* H3/H4 của Editor: không glow, chỉ đổi màu theo Light/Dark */ html.apini-dark :where(h3,.h3,h4,.h4){ color:#fff !important; text-shadow:none !important; } html:not(.apini-dark) :where(h3,.h3,h4,.h4){ color:#111 !important; /* hoặc inherit nếu muốn giữ màu của theme */ text-shadow:none !important; } /* Link trong nội dung (không phải button) – dùng xanh nhạt để nổi */ html.apini-dark .entry-content a:not(.button):not(.badge):not(.label){ color:#79c0ff!important; } /* CF7 – label/micro text */ html.apini-dark .wpcf7, html.apini-dark .wpcf7 *{ color:var(--aven-txt)!important; } /* === APINI – Viền phát sáng cho hero/banner khi ở CHẾ ĐỘ TỐI === */ .apini-dark .page-title, .apini-dark .banner, .apini-dark .page-header{ position: relative; border-radius: 12px; /* chỉnh nếu góc vuông: 0 */ overflow: visible; /* để viền ngoài không bị cắt */ } /* Hắt SÁNG VÀO TRONG (inner glow) – không che ảnh */ .apini-dark .page-title::before, .apini-dark .banner::before, .apini-dark .page-header::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: transparent; /* chỉ dùng shadow, không có nền */ box-shadow: inset 0 0 18px rgba(255,255,255,.20), inset 0 0 3px rgba(255,255,255,.65); z-index: 2; /* dưới nội dung bên trong */ } /* VIỀN NGOÀI + quầng sáng ra ngoài (outer glow) */ .apini-dark .page-title::after, .apini-dark .banner::after, .apini-dark .page-header::after{ content: ""; position: absolute; inset: -6px; /* độ tràn ra ngoài viền */ border-radius: calc(12px + 6px); pointer-events: none; background: transparent; /* không phủ ảnh */ border: 1px solid rgba(255,255,255,.95); /* nét viền trắng 1px */ box-shadow: 0 0 22px rgba(255,255,255,.45), /* quầng sáng ra ngoài */ inset 0 0 12px rgba(255,255,255,.22); /* hắt sáng vào trong */ z-index: 3; /* nổi trên mọi overlay của banner */ } /* BẬT viền sáng CHỈ khi có nền/ảnh */ .apini-dark .page-title:has(.bg, .bg-fill, .bg-loaded), .apini-dark .banner:has(.bg, .bg-fill, .bg-loaded), .apini-dark .page-header:has(.bg, .bg-fill, .bg-loaded){ position: relative; } .apini-dark .page-title:has(.bg, .bg-fill, .bg-loaded)::before, .apini-dark .banner:has(.bg, .bg-fill, .bg-loaded)::before, .apini-dark .page-header:has(.bg, .bg-fill, .bg-loaded)::before{ content:""; } .apini-dark .page-title:has(.bg, .bg-fill, .bg-loaded)::after, .apini-dark .banner:has(.bg, .bg-fill, .bg-loaded)::after, .apini-dark .page-header:has(.bg, .bg-fill, .bg-loaded)::after{ content:""; } /* NGƯỢC LẠI: nếu KHÔNG có ảnh thì tắt viền & thu gọn khoảng trống */ .apini-dark .page-title:not(:has(.bg, .bg-fill, .bg-loaded)), .apini-dark .banner:not(:has(.bg, .bg-fill, .bg-loaded)), .apini-dark .page-header:not(:has(.bg, .bg-fill, .bg-loaded)){ border-radius: 0; } .apini-dark .page-title:not(:has(.bg, .bg-fill, .bg-loaded))::before, .apini-dark .page-title:not(:has(.bg, .bg-fill, .bg-loaded))::after, .apini-dark .banner:not(:has(.bg, .bg-fill, .bg-loaded))::before, .apini-dark .banner:not(:has(.bg, .bg-fill, .bg-loaded))::after, .apini-dark .page-header:not(:has(.bg, .bg-fill, .bg-loaded))::before, .apini-dark .page-header:not(:has(.bg, .bg-fill, .bg-loaded))::after{ content: none !important; } /* Thu khoảng trống hero khi không có ảnh */ .apini-dark .page-title:not(:has(.bg, .bg-fill, .bg-loaded)) .page-title-inner, .apini-dark .banner:not(:has(.bg, .bg-fill, .bg-loaded)) .banner-inner, .apini-dark .page-header:not(:has(.bg, .bg-fill, .bg-loaded)) .page-header-inner{ padding-top: 14px !important; padding-bottom: 14px !important; min-height: 0 !important; } .apini-dark .page-title.has-bg{ background-color:transparent !important; } .apini-dark .page-title.has-bg::before, .apini-dark .page-title.has-bg::after{ content:""; } .apini-dark .page-title:not(.has-bg) { border-radius:0; } .apini-dark .page-title:not(.has-bg)::before, .apini-dark .page-title:not(.has-bg)::after{ content:none !important; } /* EXCEPT — không glow trong mobile menu */ :is(#apiniMobileHeader,#apiniMobileMenuPanel) :where(h1,.h1,h2,.h2,h3,.h3,h4,.h4){ text-shadow:none !important; color:#fff !important; } /* Liên hệ: áp ảnh nền theo class "section-lienhe" */ /* 1) Tắt mọi video nền nếu còn sót trong Section */ .section-lienhe .background-video, .section-lienhe .video-bg, .section-lienhe video{ display:none !important; } /* 2) Bơm ảnh nền đúng “ô” của Flatsome (.bg / .bg-fill) */ /* LIGHT (không có .apini-dark trên ) */ html:not(.apini-dark) .section-lienhe .bg, html:not(.apini-dark) .section-lienhe .bg.bg-loaded, html:not(.apini-dark) .section-lienhe .bg-fill{ background-image:url('/wp-content/themes/apini-child/assets/images/Canada-Plaza-Footer-Form-Background-white.webp') !important; } /* DARK */ html.apini-dark .section-lienhe .bg, html.apini-dark .section-lienhe .bg.bg-loaded, html.apini-dark .section-lienhe .bg-fill{ background-image:url('/wp-content/themes/apini-child/assets/images/Canada-Plaza-Footer-Form-Background-black.webp') !important; } /* 3) Chắc chắn ảnh hiển thị “đầy khung” */ .section-lienhe .bg, .section-lienhe .bg-fill{ background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } /* ===== Contact form - 3 ô input ===== */ /* Phạm vi: chỉ trong khu vực form liên hệ trên trang này */ #section_840626385 .form-lien-he input.wpcf7-form-control.wpcf7-text, #section_840626385 .form-lien-he input[type="text"], #section_840626385 .form-lien-he input[type="email"]{ width: 100%; border-radius: 6px; padding: 12px 14px; line-height: 1.4; transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s; } /* --- LIGHT MODE (html không có .apini-dark) --- */ html:not(.apini-dark) #section_840626385 .form-lien-he input.wpcf7-form-control{ background: #6b7280 !important; /* xám */ color: #fff !important; /* chữ trắng */ border: 1px solid #5b6068 !important; caret-color: #fff; } html:not(.apini-dark) #section_840626385 .form-lien-he input.wpcf7-form-control::placeholder{ color: #eaecef; /* placeholder sáng */ opacity: .95; } html:not(.apini-dark) #section_840626385 .form-lien-he input.wpcf7-form-control:focus{ background: #4b5563 !important; border-color: #9aa0a6 !important; box-shadow: 0 0 0 3px rgba(156,163,175,.35); outline: none; } /* --- DARK MODE (khi html có .apini-dark) --- */ html.apini-dark #section_840626385 .form-lien-he input.wpcf7-form-control{ background: #fff !important; /* nền trắng */ color: #111 !important; /* chữ đen */ border: 1px solid #ddd !important; caret-color: #111; } html.apini-dark #section_840626385 .form-lien-he input.wpcf7-form-control::placeholder{ color: #6b7280; } html.apini-dark #section_840626385 .form-lien-he input.wpcf7-form-control:focus{ border-color: #0ea5e9 !important; /* xanh nhấn */ box-shadow: 0 0 0 3px rgba(14,165,233,.25); outline: none; } /* Chống vàng autofill của Chrome để giữ đúng màu */ #section_840626385 .form-lien-he input:-webkit-autofill{ -webkit-text-fill-color: inherit; transition: background-color 9999s ease-in-out 0s; } /* === APINI Theme Toggle — MOBILE (góc phải, nhỏ hơn) === */ @media (max-width: 767px){ .apini-theme-toggle--mobile{ position: fixed; z-index: 2147482003; } /* Track: 98x36 (–10% so với 108x40) */ .apini-theme-toggle--mobile .apini-toggle-track{ width: 98px; height: 36px; } /* Thumb: (98-2)/2 x (36-2) = 48 x 34 */ .apini-theme-toggle--mobile .apini-toggle-thumb{ width: 48px; height: 34px; left: 1px; top: 1px; } /* Trạng thái Sáng: 1 + 48 = 49 */ .apini-theme-toggle--mobile.is-light .apini-toggle-thumb{ left: 49px; } /* Chữ thu nhỏ chút cho cân đối */ .apini-theme-toggle--mobile .apini-toggle-text{ font-size: 11px; } /* Ẩn khi menu mở (class JS thêm) */ .apini-theme-toggle--mobile.is-hidden{ display: none !important; } } /* ============ hết: APINI Theme Toggle / giao diện sáng tối============ */ /* ======================================================================= */ /* ===== FIX: KHÓA MÀU CHỮ TRONG DIỆN ĐỊNH CƯ (DESKTOP và MOBILE) KHI Ở DARK ===== */ html.apini-dark #apiniTimeBarFixed .apini-country-text, html.apini-dark #apiniTimeBarFixed .apini-country-text *{ color:#222 !important; /* màu chữ như giao diện sáng */ text-shadow:none !important; -webkit-text-fill-color:#222 !important; } /* Nút đỏ trong khu vực này vẫn giữ nguyên */ html.apini-dark #apiniTimeBarFixed .apini-btn, html.apini-dark #apiniTimeBarFixed a.apini-btn{ background:#E53935 !important; color:#fff !important; border-color:#E53935 !important; text-shadow:none !important; } /* ===== FIX: KHÓA MÀU CHO KHỐI MOBILE DIỆN ĐỊNH CƯ ===== */ html.apini-dark .apini-action-card, html.apini-dark .apini-action-card *, html.apini-dark #apiniMobileDinhcu, html.apini-dark #apiniMobileDinhcu *{ color:#222 !important; /* không kế thừa màu trắng từ body nữa */ text-shadow:none !important; } /* EXCEPT — trong panel menu thì luôn trắng (Light/Dark) */ #apiniMobileMenuPanel :is(.apini-action-card,.apini-action-card *,#apiniMobileDinhcu,#apiniMobileDinhcu *){ color:#fff !important; -webkit-text-fill-color:#fff !important; } /* EXCEPT — Tiêu đề & mô tả trong .apini-country-text luôn TRẮNG ở Dark */ html.apini-dark #apiniTimeBarFixed .apini-country-text :is(.apini-immigration-title,.apini-immigration-desc), html.apini-dark #apiniTimeBarFixed .apini-country-text :is(.apini-immigration-title,.apini-immigration-desc) *{ color:#fff !important; -webkit-text-fill-color:#fff !important; text-shadow:none !important; } /* EXCEPT — Marquee "apini-mobile-header-row row-1" "Các chương trình định cư của công ty Apollo" trong mobile menu: luôn xanh dương ở Light & Dark */ :root{ --apini-deep-blue: #1E90FF; } /* xanh dương đậm dùng chung */ :is(#apiniMobileHeader, #apiniMobileMenuPanel) .apini-mobile-marquee .apini-mobile-header-row.row-1, :is(#apiniMobileHeader, #apiniMobileMenuPanel) .apini-mobile-marquee .apini-mobile-header-row.row-1 *, :is(#apiniMobileHeader, #apiniMobileMenuPanel) .apini-mobile-marquee .apini-mobile-header-row.row-1 svg{ color: var(--apini-deep-blue) !important; -webkit-text-fill-color: var(--apini-deep-blue) !important; fill: currentColor !important; /* SVG theo màu text */ stroke: currentColor !important; } /* Nếu các đoạn này có link bên trong: cũng giữ trắng */ html.apini-dark #apiniTimeBarFixed .apini-country-text :is(.apini-immigration-title,.apini-immigration-desc) a{ color:#fff !important; } html.apini-dark #apiniTimeBarFixed .apini-country-text :is(.apini-immigration-title,.apini-immigration-desc) a:hover{ color:#fff !important; } /* Link thường trong vùng miễn nhiễm (không phải .apini-btn) */ html.apini-dark #apiniTimeBarFixed a:not(.apini-btn), html.apini-dark .apini-action-card a:not(.apini-btn){ color:#1976D2 !important; } /* ======================================================================= */ /* ===== Overlay tối cho bất kỳ khung nào ===== */ html.apini-dark .apini-ov-dark{ position:relative; } html.apini-dark .apini-ov-dark::before{ content:""; position:absolute; inset:0; background:#000; opacity:var(--apini-dim,.20); /* mặc định 20% nếu không chọn */ pointer-events:none; z-index:1; /* trên .bg */ } html.apini-dark .apini-ov-dark > *{ position:relative; z-index:2; } html.apini-dark .apini-ov-dark .bg::after, html.apini-dark .apini-ov-dark .bg-fill::after, html.apini-dark .apini-ov-dark .banner-bg::after, html.apini-dark .apini-ov-dark .page-title-bg::after{ content: ""; position: absolute; inset: 0; background: rgba(0,0,0, var(--apini-ov, .20)); /* MẶC ĐỊNH tối 20% */ pointer-events: none; z-index: 1; } /* B) Dim CHỈ ẢNH NỀN (giữ nội dung nguyên vẹn) */ html.apini-dark .apini-dim-bg > :is(.bg,.bg-fill,.bg-loaded,.banner-bg,.page-title-bg), html.apini-dark .apini-dim-bg > .section-content > :is(.bg,.bg-fill,.bg-loaded), html.apini-dark .apini-dim-bg > .banner-inner > :is(.bg,.bg-fill,.bg-loaded), html.apini-dark .apini-dim-bg > .page-title-inner > :is(.page-title-bg){ filter: brightness(calc(1 - var(--apini-dim,.20))) contrast(1.03) !important; } /* Alias theo tên bạn đã dùng */ html.apini-dark .apini-img-dim :is(.bg,.bg-fill,.bg-loaded,.banner-bg,.page-title-bg){ filter: brightness(calc(1 - var(--apini-dim,.20))) contrast(1.03); } /* Preset nhanh cho mức tối (10% → 50%) */ .apini-ov-10 { --apini-ov: .10; } .apini-ov-20 { --apini-ov: .20; } .apini-ov-30 { --apini-ov: .30; } .apini-ov-40 { --apini-ov: .40; } .apini-ov-50 { --apini-ov: .50; } /* Các mức tiện dụng: 10% … 50% */ .apini-dim-10{ --apini-dim:.10; } .apini-dim-15{ --apini-dim:.15; } .apini-dim-20{ --apini-dim:.20; } .apini-dim-25{ --apini-dim:.25; } .apini-dim-30{ --apini-dim:.30; } .apini-dim-40{ --apini-dim:.40; } .apini-dim-50{ --apini-dim:.50; } /* TẮT mọi dim/overlay/filter trong vùng weather khi DARK */ html.apini-dark .weather-info :is(.bg,.bg-fill,.bg-loaded,.banner-bg,.page-title-bg){ filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; background-color: transparent !important; transition: none !important; } /* Tắt overlay pseudo trong weather */ html.apini-dark .weather-info :is(.page-title,.banner,.page-header, .apini-ov-dark,.apini-dim-bg, .apini-card,.section,.ux-section)::before, html.apini-dark .weather-info :is(.page-title,.banner,.page-header, .apini-ov-dark,.apini-dim-bg, .apini-card,.section,.ux-section)::after{ content: none !important; } /* Nếu .weather-info nằm BÊN TRONG phần tử đã gán lớp dim → ép mức dim = 0 */ html.apini-dark .weather-info, html.apini-dark .weather-info *{ --apini-dim: 0 !important; --apini-ov: 0 !important; } /* Auto-contrast cho text trong Section khi Dark */ html.apini-dark .apini-text-contrast :where(h1,h2,h3,h4,h5,h6,p,li,small,span,.label,.button, .apini-btn){ text-shadow: 0 1px 2px rgba(0,0,0,.70), 0 0 6px rgba(0,0,0,.45); } /* Các tiện ích nếu muốn mạnh/nhẹ hơn */ .apini-text-shadow-sm{ text-shadow:0 1px 2px rgba(0,0,0,.55); } .apini-text-shadow-md{ text-shadow:0 2px 6px rgba(0,0,0,.65); } .apini-text-shadow-lg{ text-shadow:0 3px 10px rgba(0,0,0,.75); } /* “viền chữ” kiểu outline nhẹ cho heading (tùy chọn) */ .apini-text-outline{ text-shadow: 0 0 2px #000, 0 0 8px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.8); } /* Ép chữ trắng 100% + tỏa sáng ra ngoài cho class "apini-white-glow" */ html.apini-dark .apini-white-glow, html.apini-dark .apini-white-glow *:not(.button):not(.btn):not(a.button) { color:#fff !important; -webkit-text-fill-color:#fff !important; opacity:1 !important; /* Flatsome đôi khi giảm opacity */ --awg1:.92; --awg2:.55; --awg3:.30; /* cường độ glow */ text-shadow: 0 0 6px rgba(255,255,255,var(--awg1)), 0 0 16px rgba(255,255,255,var(--awg2)), 0 0 28px rgba(255,255,255,var(--awg3)); } /* TẮT GLOW khi trỏ vào chữ apini-white-glow*/ html.apini-dark :is(.apini-white-glow, .apini-white-glow *:not(.button):not(.btn):not(a.button)) :is(:hover, :focus-visible, :active){ --awg1:0; --awg2:0; --awg3:0; /* tắt biến glow */ /* Bóng tối sau chữ: 1 bóng gần + 1 bóng xa */ text-shadow: 0 2px 2px rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.35); /* (tùy chọn) thêm drop-shadow cấp phần tử để dày hơn */ filter: drop-shadow(0 10px 22px rgba(0,0,0,.25)); } /* (khuyến nghị) mượt hơn khi bật/tắt */ .apini-white-glow, .apini-white-glow * { transition: text-shadow .5s ease; } /* LIGHT MODE → trả về chữ đen, tắt glow, nhưng KHÔNG đụng phần tử có inline color */ html:not(.apini-dark) .apini-white-glow, html:not(.apini-dark) .apini-white-glow *:not(.button):not(.btn):not(a.button):not([style*="color"]) { color: inherit ; -webkit-text-fill-color: initial !important; text-shadow: none !important; } /* LIGHT mode: viền sáng (glow) cho text trắng */ html:not(.apini-dark) .awg-dark-only:not(.awg-outline){ color: inherit !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; } /* glow phát sáng trên destop */ @media (min-width: 1024px){ /* tuỳ chọn: mạnh hơn cho heading khi thêm class awg-strong */ html.apini-dark .apini-white-glow.awg-strong, html.apini-dark .apini-white-glow.awg-strong *:not(.button):not(.btn):not(a.button){ --awg1:.97; --awg2:.65; --awg3:.38; text-shadow: 0 0 8px rgba(255,255,255,var(--awg1)), 0 0 22px rgba(255,255,255,var(--awg2)), 0 0 36px rgba(255,255,255,var(--awg3)); } } /* glow phát sáng trên mobile */ @media (max-width: 767px){ html.apini-dark .apini-white-glow, html.apini-dark .apini-white-glow *:not(.button):not(.btn):not(a.button){ --awg1:.55; --awg2:.26; --awg3:.12; text-shadow: 0 0 2px rgba(255,255,255,var(--awg1)), 0 0 6px rgba(255,255,255,var(--awg2)), 0 0 12px rgba(255,255,255,var(--awg3)); } } /* --------------------------------------------- VIỀN TRẮNG CHO CHỮ (.awg-outline) --------------------------------------------- */ .awg-outline{ --awg-outline-color: #080807; /* viền*/ --awg-outline-size: 1px; /* độ dày viền */ } /* LIGHT MODE: giữ màu gốc, viền trắng rõ nét */ html:not(.apini-dark) .awg-outline{ -webkit-text-stroke: var(--awg-outline-size) var(--awg-outline-color) !important; paint-order: stroke fill; text-shadow: -1px 0 0 var(--awg-outline-color), 1px 0 0 var(--awg-outline-color), 0 -1px 0 var(--awg-outline-color), 0 1px 0 var(--awg-outline-color); } /* DARK MODE: vẫn cho phép viền trắng, đồng bộ glow */ html.apini-dark .awg-outline{ -webkit-text-stroke: var(--awg-outline-size) var(--awg-outline-color) !important; paint-order: stroke fill; text-shadow: 0 0 7px rgba(255,255,255,.9), 0 0 12px rgba(255,255,255,.8); } /* ⛔ EXCEPT: Ảnh/logo trong menu không bị filter/overlay */ :is(#apiniMobileHeader, #apiniMobileMenuPanel) :is(img,.bg,.bg-fill,.banner-bg,.page-title-bg){ filter: none !important; mix-blend-mode: normal !important; opacity: revert !important; background: revert !important; } /* ===== APINI: Nền tối trong suốt + vạch chéo + vệt sáng chạy cho class nay class="usa-text-destop" ===== */ /* MẶC ĐỊNH (Light) */ .apini-hatch-bg{ /* tuỳ chỉnh nhanh */ --bg: rgba(255,255,255,.28); /* nền sáng trong suốt */ --stripe: rgba(0,0,0,.08); /* vạch chéo tối mờ */ --border: rgba(0,0,0,.12); --sheen: rgba(255,255,255,.45); /* vệt sáng */ --gap: 12px; /* khoảng vạch */ --radius: 10px; --padY: 8px; --padX: 14px; position:relative; display:inline-block; padding:var(--padY) var(--padX); border-radius:var(--radius); isolation:isolate; } .apini-hatch-bg::before{ content:""; position:absolute; inset:0; border-radius:inherit; background: repeating-linear-gradient(135deg, transparent 0, transparent calc(var(--gap) - 1px), var(--stripe) calc(var(--gap) - 1px), var(--stripe) var(--gap) ), var(--bg); border:1px solid var(--border); z-index:-1; backdrop-filter:blur(1.5px); } .apini-hatch-bg::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(to left, transparent 0%, var(--sheen) 12%, transparent 24%); mix-blend-mode:screen; animation:apini-sheen 2.6s linear infinite; z-index:-1; } @keyframes apini-sheen{ 0%{background-position:120% 0} 100%{background-position:-20% 0} } /* Dark: tự động đậm hơn */ html.apini-dark .apini-hatch-bg{ --bg: rgba(0,0,0,.46); --stripe: rgba(255,255,255,.12); --border: rgba(255,255,255,.20); --sheen: rgba(255,255,255,.35); } /* Preset nhanh (tuỳ chọn): thêm cùng class nếu cần */ .apini-hatch--light { --bg: rgba(255,255,255,.20); --stripe: rgba(0,0,0,.06); } .apini-hatch--bold { --bg: rgba(0,0,0,.58); --stripe: rgba(255,255,255,.14); } .apini-hatch--xl { --padY:10px; --padX:18px; --radius:14px; } /* Chỉ áp khi đúng là màn mobile (giới hạn width) */ @media (max-width: 767px){ .apini-hatch-bg{ /* tuỳ chỉnh nhanh */ --bg: rgba(255,255,255,.28); /* nền sáng trong suốt */ --stripe: rgba(0,0,0,.08); /* vạch chéo tối mờ */ --border: rgba(0,0,0,.12); --sheen: rgba(255,255,255,.45); /* vệt sáng */ --gap: 12px; /* khoảng vạch */ --radius: 10px; --padY: 8px; --padX: 14px; position:relative; display:inline-block; padding:var(--padY) var(--padX); border-radius:var(--radius); isolation:isolate; } .apini-hatch-bg::before{ content:""; position:absolute; inset:0; border-radius:inherit; background: repeating-linear-gradient(135deg, transparent 0, transparent calc(var(--gap) - 1px), var(--stripe) calc(var(--gap) - 1px), var(--stripe) var(--gap) ), var(--bg); border:1px solid var(--border); z-index:-1; backdrop-filter:blur(1.5px); } .apini-hatch-bg::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(to left, transparent 0%, var(--sheen) 12%, transparent 24%); mix-blend-mode:screen; animation:apini-sheen 2.6s linear infinite; z-index:-1; } @keyframes apini-sheen{ 0%{background-position:120% 0} 100%{background-position:-20% 0} } /* Dark: tự động đậm hơn */ html.apini-dark .apini-hatch-bg{ --bg: rgba(0,0,0,.46); --stripe: rgba(255,255,255,.12); --border: rgba(255,255,255,.20); --sheen: rgba(255,255,255,.35); } /* Preset nhanh (tuỳ chọn): thêm cùng class nếu cần */ .apini-hatch--light { --bg: rgba(255,255,255,.20); --stripe: rgba(0,0,0,.06); } .apini-hatch--bold { --bg: rgba(0,0,0,.58); --stripe: rgba(255,255,255,.14); } .apini-hatch--xl { --padY:10px; --padX:18px; --radius:14px; } .usa-text-mobile .apini-hatch-bg{ display:inline-block; } } /* Miễn nhiễm vùng weather khỏi việc ép màu */ html.apini-dark .weather-slider :not(.weather-info):not(.weather-info *){ color: revert !important; -webkit-text-fill-color: currentColor !important; } /* ====================== DARK MODE ====================== */ /* Sử lý hover là 1 ảnh */ /* Trạng thái bình thường của ảnh */ :is(.pick-usa-move,.intro-us-image1,.intro-us-image2,.intro-us-image3,.intro-us-image4) { display:inline-block; position:relative; } :is(.pick-usa-move,.intro-us-image1,.intro-us-image2,.intro-us-image3,.intro-us-image4) img{ display:block; transition:filter .25s ease; filter:none !important; /* reset mọi filter trước đó */ } /* hover: phát sáng theo biên ảnh (không dùng > để tránh lỡ tầng trung gian) */ :is(.pick-usa-move,.intro-us-image1,.intro-us-image2,.intro-us-image3,.intro-us-image4):hover img{ filter: drop-shadow(0 0 10px rgba(255,255,255,.85)) drop-shadow(0 0 22px rgba(255,255,255,.55)) drop-shadow(0 8px 28px rgba(0,0,0,.35)) !important; } /* =============================================================================== */ html.apini-dark .apini-card { background: rgba(255,255,255,0.05); border-radius: 12px; backdrop-filter: blur(10px); box-shadow: 0 0 10px rgba(255,255,255,0.5), 0 0 20px rgba(255,255,255,0.3), 0 0 40px rgba(255,255,255,0.2), inset 0 0 8px rgba(255,255,255,0.15); transition: box-shadow 0.3s ease; } /* 1) Biến chung cho hiệu ứng sáng */ :root{ --apini-hover-glow: 0 0 20px rgba(255,255,255,0.7), 0 0 50px rgba(255,255,255,0.5), inset 0 0 10px rgba(255,255,255,0.3); } /* 2) Hover từng tiêu đề: chỉ tiêu đề sáng */ html.apini-dark .imagebox-us1:hover, html.apini-dark .imagebox-us2:hover, html.apini-dark .imagebox-us3:hover, html.apini-dark .imagebox-us4:hover, html.apini-dark .apini-dim-bg:hover, html.apini-dark .hero-target-mb1:hover, html.apini-dark .hero-target-mb2:hover, html.apini-dark .dialy-slider:hover, html.apini-dark .apini-title--main:hover, html.apini-dark .apini-dlkh-title:hover{ box-shadow: var(--apini-hover-glow); z-index: 1000; } /* 3) Hover card: chỉ sáng khi KHÔNG đang hover tiêu đề bên trong */ html.apini-dark .apini-card:hover:not(:has(.apini-title--main:hover, .apini-dlkh-title:hover)){ box-shadow: var(--apini-hover-glow); } /* (Tuỳ chọn) Nếu muốn chắc chắn card tắt sáng khi tiêu đề đang được hover */ html.apini-dark .apini-card:has(.apini-title--main:hover, .apini-dlkh-title:hover){ box-shadow: none !important; } /* 3) khi hover lớp con thì tắt lớp cha */ html.apini-dark .apini-card:has(.apini-title--main:hover, .apini-dlkh-title:hover, .dialy-slider:hover){ box-shadow: none !important; } .apini-title--main, .apini-dlkh-title, .dialy-slider, .apini-card{ transition: box-shadow .8s ease; } /*==================================================================================== */ /* ================== DÙNG CHUNG địa lý================== */ .row-dia-ly .col-inner{ position: relative; border-radius: 2px; padding: 20px; box-sizing: border-box; overflow: hidden; /* giữ vệt trong khối */ } /* Vệt sáng/tối – lớp phủ */ .row-dia-ly .col-inner::before{ content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; border-radius:inherit; } /* ================== LIGHT MODE địa lý ================== */ /* ==== DEBUG: xem selector có trúng không (xóa khi xong) ==== */ .apini-dim-bg.apini-dim-50.apini-text-contrast :is(.row,.col).row-dia-ly, .apini-dim-bg.apini-dim-50.apini-text-contrast :is(.row,.col).row-dia-ly > .col-inner{ outline: 2px dashed #f0f !important; } /* ==== BASE (áp cho cả .row hoặc .col mang class row-dia-ly) ==== */ .apini-dim-bg.apini-dim-50.apini-text-contrast :is(.row,.col).row-dia-ly{ position: relative !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; /* để nền nằm ở .col-inner */ border-radius: 2px !important; overflow: visible; isolation: isolate; } /* NỀN đặt ở .col-inner để né reset của theme */ .apini-dim-bg.apini-dim-50.apini-text-contrast :is(.row,.col).row-dia-ly > .col-inner{ position: relative !important; border-radius: 2px !important; padding: 20px !important; box-sizing: border-box !important; overflow: hidden !important; } /* LIGHT (html KHÔNG có .apini-dark) */ html:not(.apini-dark) .apini-dim-bg.apini-dim-50.apini-text-contrast :is(.row,.col).row-dia-ly > .col-inner{ background:#52b6f9 !important; border:2px solid #0a2a62 !important; box-shadow: 0 0 0 1px rgba(10,42,98,.25) inset, 0 8px 22px rgba(0,0,0,.18), 0 0 18px rgba(255,255,255,.55) !important; color:#0b1e3f !important; } html:not(.apini-dark) .apini-dim-bg.apini-dim-50.apini-text-contrast :is(.row,.col).row-dia-ly > .col-inner::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: radial-gradient(120% 80% at 10% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%), linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,0) 40%); mix-blend-mode:overlay; } /* DARK (html có .apini-dark) */ html.apini-dark .apini-dim-bg.apini-dim-50.apini-text-contrast :is(.row,.col).row-dia-ly > .col-inner{ background:#263e81 !important; /* nền xanh đậm */ border:2px solid #ffd83b !important; /* viền vàng */ box-shadow: 0 0 0 1px rgba(255,216,59,.35) inset, 0 6px 20px rgba(0,0,0,.25), 0 0 16px rgba(255,216,59,.35) !important; color:#fff !important; } html.apini-dark .apini-dim-bg.apini-dim-50.apini-text-contrast :is(.row,.col).row-dia-ly > .col-inner::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: radial-gradient(120% 80% at 85% 10%, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 55%), linear-gradient(160deg, rgba(0,0,0,.25), rgba(0,0,0,0) 45%); mix-blend-mode:overlay; } /* Nếu theme vẫn ép trong suốt .row/.col, vô hiệu hóa nó cho riêng khối này */ html.apini-dark .apini-dim-bg.apini-dim-50.apini-text-contrast :is(.row,.col).row-dia-ly{ color: inherit !important; } /* ==== tiêu đề từ 1 dạng tin tức khi DARK ==== */ /* ==== BLOG TITLES – force white in DARK ==== */ /* Flatsome thường dùng .post-title / .entry-title / .box-blog-post ... */ html.apini-dark .post-title, html.apini-dark .post-title a, html.apini-dark .entry-title, html.apini-dark .entry-title a, html.apini-dark .box-blog-post .post-title a, html.apini-dark .blog-archive .post-title a, html.apini-dark .recent-blog-posts .post-title a{ color:#79c0ff !important; /* trắng khi Dark */ } /* ========================================================= KEEP RED + WHITE GLOW for appointment section in DARK (section có class="apini-keep-red") ========================================================= */ /* 1) Gỡ ép màu trắng cho mọi phần tử có inline color bên trong section */ html.apini-dark .entry-content .apini-keep-red [style*="color"]{ color: unset !important; -webkit-text-fill-color: unset !important; } /* 2) Khóa màu đỏ cho H1/H2 và các tiêu đề của bạn + thêm glow trắng */ html.apini-dark .apini-keep-red :is(.dathen-lead,.dathen-text,.lead,h1,h2){ color:#b81f24 !important; /* ✅ đúng cú pháp */ -webkit-text-fill-color:#b81f24 !important; text-shadow: 0 0 6px rgba(255,255,255,.90), 0 0 12px rgba(255,255,255,.50); } /* 3) Nếu tiêu đề có link thì để link kế thừa màu đỏ */ html.apini-dark .apini-keep-red :is(.dathen-lead,.dathen-text,.lead,h1,h2) a{ color:inherit !important; } /* 1️⃣ Giữ nguyên mọi màu inline trong .weather-info khi dark */ html.apini-dark .weather-info, html.apini-dark .weather-info *{ text-shadow:none !important; -webkit-text-fill-color: currentColor !important; /* tránh WebKit tô đen */ } /* 2️⃣ Bổ sung bộ "khóa màu" để các inline color giữ nguyên (giữ nguyên list cũ) */ html.apini-dark .weather-info [style*="color:#e65100"]{ color:#e65100 !important; } html.apini-dark .weather-info [style*="color:#ff6a00"]{ color:#ff6a00 !important; } html.apini-dark .weather-info [style*="color:#b81f24"]{ color:#b81f24 !important; } html.apini-dark .weather-info [style*="color:#ff0000"]{ color:#ff0000 !important; } html.apini-dark .weather-info [style*="color:#1e90ff"]{ color:#1e90ff !important; } html.apini-dark .weather-info [style*="color:#fff"], html.apini-dark .weather-info [style*="color:#FFF"]{ color:#fff !important; } /* 3️⃣ Viền ngoài trắng (chỉ khi dark) */ html.apini-dark .weather-info{ border: 1px solid rgba(255,255,255,0.8); border-radius: 10px; padding: 10px; box-shadow: 0 0 10px rgba(255,255,255,0.25); } /* Xanh dương #1976d2 — giữ nguyên màu và thêm viền trắng 0.5px */ html.apini-dark .weather-info [style*="color:#1976d2"], html.apini-dark .weather-info [style*="color: #1976d2"], html.apini-dark .weather-info [style*="color:#1976D2"], html.apini-dark .weather-info [style*="color: #1976D2"]{ color: #1976d2 !important; -webkit-text-fill-color: #1976d2 !important; text-shadow: 0 0 0.5px #fff, 0 0 2px rgba(255,255,255,0.25) !important; -webkit-text-stroke: 0.5px rgba(255,255,255,0.5); paint-order: stroke fill; } /* Đen #111 — giữ nguyên màu và thêm viền trắng 0.5px */ html.apini-dark .weather-info [style*="color:#111"], html.apini-dark .weather-info [style*="color: #111"], html.apini-dark .weather-info [style*="color:#111111"], html.apini-dark .weather-info [style*="color: #111111"]{ color: #111 !important; -webkit-text-fill-color: #111 !important; text-shadow: 0 0 0.5px #fff, 0 0 2px rgba(255,255,255,0.25) !important; -webkit-text-stroke: 0.5px rgba(255,255,255,0.5); paint-order: stroke fill; } /* === APINI: Chuyển mọi inline color đen thành TRẮNG ở Dark === */ html.apini-dark :where( [style*="color:#111" i], [style*="color: #111" i], [style*="color:#111;" i], [style*="color: #111;" i], [style*="color:#111 !important" i], [style*="color: #111 !important" i], [style*="color:#111111" i], [style*="color: #111111" i], [style*="color:#000" i], [style*="color: #000" i], [style*="color:#000000" i], [style*="color: #000000" i], [style*="color:rgb(0,0,0)" i], [style*="color: rgb(0, 0, 0)" i], [style*="color:rgb(17,17,17)" i], [style*="color: rgb(17, 17, 17)" i], [style*="color:black" i] ){ color:#fff !important; -webkit-text-fill-color:#fff !important; text-shadow:none !important; opacity:1 !important; } /* ========== GLOBAL — Xử lý inline color:#fff ========== */ /* 1) LIGHT: #fff/#ffffff -> ĐEN */ html:not(.apini-dark) :where( [style*="color:#fff" i], [style*="color:#ffffff" i] ){ color:#111 !important; -webkit-text-fill-color:#111 !important; text-shadow:none !important; opacity:1 !important; } /* 2) DARK: trả về TRẮNG đúng như inline */ html.apini-dark :where( [style*="color:#fff" i], [style*="color:#ffffff" i] ){ color:#fff !important; -webkit-text-fill-color:#fff !important; text-shadow:none !important; opacity:1 !important; } /* (Ngoại lệ an toàn) — CHỈ áp cho mobile header/panel, KHÔNG đụng .weather-info */ html :is(#apiniMobileHeader, #apiniMobileMenuPanel) [style*="color:#fff" i], html :is(#apiniMobileHeader, #apiniMobileMenuPanel) [style*="color:#ffffff" i]{ color: revert !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; opacity: revert !important; } /* (tuỳ chọn) Nếu có thành phần cần GIỮ đen khi Dark, thêm vào exclude: */ html.apini-dark :is( /* ví dụ: muốn giữ đen vài nhãn đặc biệt */ .keep-dark-black ) [style*="color:#111" i]{ color:#111 !important; -webkit-text-fill-color:#111 !important; } /* ========== làm nền địa lý & khí hậu sáng hơn ========== */ /* ===== Light only: nền “glass” có khe hở 1–2px cho GEO & CLIMATE ===== */ :root{ --glass-gap: 3px; /* độ hở trong suốt (1–3px) */ --geo-glass: .8; /* độ trắng nền GEO */ --climate-glass: .8; /* độ trắng nền CLIMATE */ --geo-blur: 3px; /* blur nhẹ cho nền */ --climate-blur: 3px; } .apini-card{ position: relative; } .apini-card > *{ position: relative; z-index: 1; } /* nội dung nằm trên overlay */ /* Nền kính thu vào để lộ viền trong suốt (khe hở) */ html:not(.apini-dark) .apini-card.apini-card--geo{ background: transparent !important; } html:not(.apini-dark) .apini-card.apini-card--geo::before{ content:""; position:absolute; inset: var(--glass-gap); /* <-- tạo “khe hở” */ border-radius: inherit; background: rgba(255,255,255,var(--geo-glass)); backdrop-filter: blur(var(--geo-blur)) saturate(110%); -webkit-backdrop-filter: blur(var(--geo-blur)) saturate(110%); box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset, 0 6px 18px rgba(0,0,0,.18); pointer-events:none; z-index:0; } html:not(.apini-dark) .apini-card.apini-card--climate, html:not(.apini-dark) .apini-card.apini-card--flush{ background: transparent !important; } html:not(.apini-dark) .apini-card.apini-card--climate::before, html:not(.apini-dark) .apini-card.apini-card--flush::before{ content:""; position:absolute; inset: var(--glass-gap); /* <-- tạo “khe hở” */ border-radius: inherit; background: rgba(255,255,255,var(--climate-glass)); backdrop-filter: blur(var(--climate-blur)) saturate(110%); -webkit-backdrop-filter: blur(var(--climate-blur)) saturate(110%); box-shadow: 0 0 0 1px rgba(255,255,255,.32) inset, 0 6px 18px rgba(0,0,0,.16); pointer-events:none; z-index:0; } /* (tuỳ chọn) hover: tăng nhẹ độ sáng */ html:not(.apini-dark) .apini-card.apini-card--geo:hover::before{ background: rgba(255,255,255, calc(var(--geo-glass) + .06)); } html:not(.apini-dark) .apini-card.apini-card--climate:hover::before, html:not(.apini-dark) .apini-card.apini-card--flush:hover::before{ background: rgba(255,255,255, calc(var(--climate-glass) + .06)); } /* …hãy loại trừ 2 tiêu đề này */ .apini-card > :not(.apini-title--main):not(.apini-dlkh-title){ position: relative; z-index: 1; } /* Tiêu đề luôn ở trên cùng, không bị ảnh hưởng overlay */ .apini-card > .apini-title--main, .apini-card > .apini-dlkh-title{ position: relative; z-index: 2 !important; isolation: isolate; /* đề phòng các hiệu ứng blend/clip xung quanh */ } /* Nếu tiêu đề KHÔNG phải con trực tiếp (nằm sâu hơn), thêm rule dự phòng: */ .apini-card :where(.apini-title--main, .apini-dlkh-title){ position: relative; z-index: 2; isolation: isolate; } /* khu vực 2 tiêu đề apini-title--main và apini-dlkh-title */ /* 2) Hover từng tiêu đề: chỉ tiêu đề sáng */ html.apini-dark .apini-title--main:hover, html.apini-dark .apini-dlkh-title:hover{ box-shadow: var(--apini-hover-glow); z-index: 100 !important; } /* 2) Hover từng tiêu đề: chỉ tiêu đề sáng */ html:not(.apini-dark) .apini-title--main:hover, html:not(.apini-dark) .apini-dlkh-title:hover{ box-shadow: var(--apini-hover-glow); z-index: 100 !important; } /* 3) Hover card: chỉ sáng khi KHÔNG đang hover tiêu đề bên trong */ html.apini-dark .apini-card:hover:not(:has(.apini-title--main:hover, .apini-dlkh-title:hover)){ box-shadow: var(--apini-hover-glow); } /* (Tuỳ chọn) Nếu muốn chắc chắn card tắt sáng khi tiêu đề đang được hover */ html.apini-dark .apini-card:has(.apini-title--main:hover, .apini-dlkh-title:hover){ box-shadow: none !important; } /* 3) khi hover lớp con thì tắt lớp cha */ html.apini-dark .apini-card:has(.apini-title--main:hover, .apini-dlkh-title:hover, .dialy-slider:hover){ box-shadow: none !important; } .apini-title--main, .apini-dlkh-title, .dialy-slider, .apini-card{ transition: box-shadow .8s ease; } /* Dark mode: html.apini-dark … */ html.apini-dark .apini-dlkh-title{ background:#52b6f9 !important; color:#0a0a0a !important; /* chữ đen (đậm nhẹ) */ border:3px solid #2a94dc; /* viền xanh đậm hơn 1 tông cho cân */ /* Neumorphism “lõm” (inset): */ box-shadow: inset 8px 8px 14px rgba(0, 0, 0, 0.18), /* bóng tối bên trong */ inset -8px -8px 14px rgba(255, 255, 255, .55),/* highlight bên trong */ 0 2px 6px rgba(0,0,0,.10); /* bóng ngoài nhẹ để nổi khối */ border-radius: 0px; } /* LIGHT (html KHÔNG có .apini-dark) → chữ đen, nền đỏ rượu như bạn set ở trên */ html:not(.apini-dark) .apini-dlkh-title{ color:#686868 !important; } /* ============== APINI TITLE THEMES (LIGHT/DARK) – COLORS ONLY ============== */ /* Light mode: body không có apini-dark/dark-mode/[data-theme=dark] */ body:not(.apini-dark):not(.dark-mode):not([data-theme="dark"]), [data-theme="light"]{ --apini-title-fg: #0b2135; /* chữ đen xanh đậm */ } /* Tiêu đề 1 (chính) – LIGHT: Gradient EASTERN BLUE SUBMARINE: #18A5A7 -> #B6C0C5 + vạch sáng trắng mờ bên phải */ body:not(.apini-dark):not(.dark-mode):not([data-theme="dark"]) .apini-title--main, [data-theme="light"] .apini-title--main{ background: linear-gradient(90deg, #18A5A7 0%, #B6C0C5 100%); } body:not(.apini-dark):not(.dark-mode):not([data-theme="dark"]) .apini-title--main::after, [data-theme="light"] .apini-title--main::after{ background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.35)); } /* Tiêu đề 2 (phụ – thanh slide) – LIGHT: full #18a5a7, chữ đen */ body:not(.apini-dark):not(.dark-mode):not([data-theme="dark"]) .apini-dlkh-title, [data-theme="light"] .apini-dlkh-title{ background: #18a5a7; color: #0b2135; } /* ===================== Dark và light cho khu vực địa lý và khí hậu quốc gia ===================== */ body.apini-dark, body.dark-mode, [data-theme="dark"]{ --apini-title-fg: #ffffff; /* chữ trắng */ } /* 6) Light/Dark text color */ html:not(.apini-dark):not([data-theme="dark"]) { --apini-title-fg: #0b2135; } /* light: chữ đen */ html.apini-dark, [data-theme="dark"] { --apini-title-fg: #ffffff; } /* dark: chữ trắng */ /* 7) NỀN tiêu đề chính – LIGHT (gradient #18A5A7 -> #B6C0C5) + vệt chéo phải-trên */ html:not(.apini-dark):not([data-theme="dark"]) .apini-title--main{ background: linear-gradient(90deg, #18A5A7 0%, #B6C0C5 100%); } html:not(.apini-dark):not([data-theme="dark"]) .apini-title--main::before{ content:""; position:absolute; inset:0; background: linear-gradient(315deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%); mix-blend-mode: screen; pointer-events:none; } /* 8) NỀN tiêu đề phụ – LIGHT (#18a5a7) + vệt chéo giống trên */ html:not(.apini-dark):not([data-theme="dark"]) .apini-dlkh-title{ background: #18a5a7; } html:not(.apini-dark):not([data-theme="dark"]) .apini-dlkh-title::before{ content:""; position:absolute; inset:0; background: linear-gradient(315deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%); mix-blend-mode: screen; pointer-events:none; } /* 9) NỀN tiêu đề chính – DARK (gradient #1e3c72 -> #2a5298) + vệt chéo phải-trên */ html.apini-dark .apini-title--main{ background: linear-gradient(90deg, #1e3c72 0%, #2a5298 100%); position: relative; overflow: hidden; /* cắt phần vệt vượt ra ngoài */ /* tuỳ chỉnh nhanh */ --ray-alpha: .35; /* độ sáng vệt */ --ray-blur: 10px; /* độ mờ viền vệt */ --ray-speed: 6s; /* tốc độ chạy */ } /* VỆT SÁNG #1 (nêm – nhỏ đến lớn) */ html.apini-dark .apini-title--main::before{ content:""; position:absolute; top:-60%; right:-40%; /* xuất phát ở góc phải trên */ width:170%; height:260%; /* dài vượt khung để chạy hết chéo */ transform: rotate(-45deg); /* hướng phải trên -> trái dưới */ /* nêm có lõi sáng, viền tắt dần */ background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,var(--ray-alpha)) 40%, rgba(255,255,255,0) 75%); /* tạo hình nêm: đầu nhỏ, đuôi lớn */ clip-path: polygon(20% 0%, 65% 0%, 100% 100%, 0% 100%); filter: blur(var(--ray-blur)); mix-blend-mode: screen; /* hoà trộn sáng trên nền tối */ animation: apiniRayMove var(--ray-speed) linear infinite; opacity:.9; } /* VỆT SÁNG #2 – lệch pha để có “nhiều vệt” */ html.apini-dark .apini-title--main::after{ content:""; position:absolute; top:-70%; right:-50%; width:150%; height:240%; transform: rotate(-45deg); background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,calc(var(--ray-alpha)*.75)) 42%, rgba(255,255,255,0) 78%); clip-path: polygon(25% 0%, 60% 0%, 100% 100%, 0% 100%); filter: blur(calc(var(--ray-blur) * .9)); mix-blend-mode: screen; animation: apiniRayMove var(--ray-speed) linear infinite; animation-delay: calc(var(--ray-speed) * .35); /* lệch pha */ opacity:.8; } /* Chuyển động từ phải trên -> trái dưới */ @keyframes apiniRayMove{ from { transform: rotate(-45deg) translate3d(0,0,0); } to { transform: rotate(-45deg) translate3d(-55%, 55%, 0); } } /* Tắt animation nếu người dùng chọn giảm chuyển động */ @media (prefers-reduced-motion: reduce){ .apini-title--main::before, .apini-title--main::after{ animation: none; } } /* //* ===== APINI: Subtitle (tiêu đề phụ) ở Dark – trái xanh dương → phải trắng + mờ 20% ===== */ html.apini-dark .apini-dlkh-title{ position: relative; background: linear-gradient(90deg, #0d47a1 0%, #ffffff 100%) !important; /* xanh đậm → trắng */ color: #0b2135 !important; /* chữ xanh-đen để đọc tốt trên nền trắng */ opacity: .8 !important; /* mờ 20% */ border: 1px solid rgba(255,255,255,.25); /* viền nhẹ để nổi khối trong dark */ box-shadow: 0 2px 6px rgba(0,0,0,.25); /* bóng nhẹ */ isolation: isolate; /* tránh ảnh hưởng opacity bên ngoài */ z-index: 1; } /* Tăng đọc tốt ở nửa phải (trắng) – viền chữ rất nhẹ */ html.apini-dark .apini-dlkh-title .text-tieude-phu{ text-shadow: 0 1px 2px rgba(0,0,0,.20); } html.apini-dark .apini-dlkh-title::before, [data-theme="dark"] .apini-dlkh-title::before{ content:""; position:absolute; inset:0; background: linear-gradient(315deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%); mix-blend-mode: screen; pointer-events:none; } /* 1) Ngoại lệ: giữ đen + viền trắng trong DARK cho phần cần cố định */ html.apini-dark .weather-info .keep-black{ color:#111 !important; /* hoặc #000 */ -webkit-text-stroke:.5px rgba(255,255,255,.6); text-stroke:.5px rgba(255,255,255,.6); paint-order: stroke fill; } /* 2) DARK: mọi inline “đen/near-đen” -> TRẮNG (trừ .keep-black) */ html.apini-dark .weather-info :not(.keep-black):not(.keep-black *) :where( /* hex phổ biến */ [style*="color:#000" i], [style*="color:#000000" i], [style*="color:#111" i], [style*="color:#111111" i], /* rgb/rgba */ [style*="color:rgb(0,0,0)" i], [style*="color: rgb(0, 0, 0)" i], [style*="color:rgba(0,0,0,1)" i], [style*="color: rgba(0, 0, 0, 1)" i], [style*="color:rgb(17,17,17)" i], [style*="color: rgb(17, 17, 17)" i], /* hsl */ [style*="color:hsl(0,0%,0%" i], [style*="color:hsl(0, 0%, 0%" i], /* tên màu */ [style*="color:black" i] ){ color:#fff !important; -webkit-text-fill-color:#fff !important; text-shadow:none !important; opacity:1 !important; } /* 3) LIGHT: mọi inline “trắng” -> ĐEN (trừ .keep-black) */ html:not(.apini-dark) .weather-info :not(.keep-black):not(.keep-black *) :where( /* hex */ [style*="color:#fff" i], [style*="color:#ffffff" i], /* rgb/rgba */ [style*="color:rgb(255,255,255)" i], [style*="color: rgb(255, 255, 255)" i], [style*="color:rgba(255,255,255,1)" i], [style*="color: rgba(255, 255, 255, 1)" i], /* hsl */ [style*="color:hsl(0,0%,100%" i], [style*="color:hsl(0, 0%, 100%" i], /* tên màu */ [style*="color:white" i] ){ color:#111 !important; -webkit-text-fill-color:#111 !important; text-shadow:none !important; opacity:1 !important; } /* HOTFIX: ép giữ TRẮNG trong .weather-info ở DARK (đè lên block “Ngoại lệ …”) */ html.apini-dark .weather-info [style*="color:#fff" i], html.apini-dark .weather-info [style*="color:#ffffff" i]{ color:#fff !important; -webkit-text-fill-color:#fff !important; opacity:1 !important; } html:not(.apini-dark) :where([style*="color:#fff" i],[style*="color:#ffffff" i]) { color:#111 !important; -webkit-text-fill-color:#111 !important; } /* Hiển rõ BG trên mobile */ @media (max-width: 767px){ /* Tắt/giảm làm mờ – làm tối */ .apini-dim-bg.apini-dim-50, .apini-dim-bg.apini-dim-50 * { filter: none !important; opacity: 1 !important; } /* Nếu dim bằng ::before/::after thì tắt luôn */ .apini-dim-bg::before, .apini-dim-bg::after { content: none !important; } /* Ép ảnh nền phủ kín, căn giữa, không lặp */ .apini-dim-bg, .apini-dim-bg .section-bg, .apini-dim-bg .bg, .apini-dim-bg .bg-fill { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-attachment: scroll !important; /* tránh parallax trên mobile */ min-height: 100dvh; /* nếu cần nền chiếm full màn */ } /* Giữ chữ dễ đọc nhưng không che nền */ .apini-text-contrast{ background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.10)) !important; backdrop-filter: none !important; } } /* =============== GEO: xếp lớp tiêu đề vs slider =============== */ /* Card bao tiêu đề/slider phải có position để tạo mặt phẳng stacking */ .apini-geo .apini-card { position: relative; } /* MẶC ĐỊNH: slider nằm TRÊN, tiêu đề nằm DƯỚI */ .apini-geo :where(.apini-card) :where(.weather-slider){ position: relative; z-index: 10; } .apini-geo :where(.apini-card) :where(.apini-dlkh-title){ position: relative; z-index: 2; } /* KHI HOVER TIÊU ĐỀ: tiêu đề nhảy LÊN TRÊN slider */ .apini-geo :where(.apini-dlkh-title:hover){ z-index: 3000 !important; } /* ====== Tuỳ chọn A: làm mờ CHÍNH TIÊU ĐỀ khi hover (theo yêu cầu “làm mờ tiêu đề”) ====== */ .apini-geo :where(.apini-dlkh-title:hover){ opacity: .72; filter: saturate(.95) contrast(.95); transition: opacity .25s ease, filter .25s ease, box-shadow .25s ease; } /* ====== Tuỳ chọn B (đổi ý): làm mờ SLIDER phía sau khi hover tiêu đề ====== Bật block dưới và TẮT block Tuỳ chọn A phía trên nếu muốn mờ slider thay vì mờ tiêu đề. Overlay này nằm TRÊN slider (z-index:20) nhưng DƯỚI tiêu đề (z-index:30). */ /* .apini-geo .apini-card:has(.apini-dlkh-title:hover)::after{ content:""; position:absolute; inset: var(--glass-gap, 0); border-radius: inherit; background: rgba(0,0,0,.15); pointer-events: none; z-index: 20; } */ /* Đảm bảo các nút điều hướng slider vẫn dùng được khi KHÔNG hover tiêu đề */ .apini-geo .weather-viewport .apini-arrow{ position: absolute; z-index: 15; } /* ============================================ VÙNG MIỄN NHIỄM xóa nền, xóa bóng section-sumenh ============================================ */ .section-sumenh, .section-sumenh * { background: transparent !important; box-shadow: none !important; } /* ============================================ VÙNG MIỄN NHIỄM THEME-TOGGLE CHO TIME BAR ============================================ */ /* DARK: Tiêu đề Diện Định Cư luôn NEON */ html.apini-dark #apiniTimeBarFixed .apini-time-bar-title{ color: var(--apini-neon, #198754) !important; -webkit-text-fill-color: var(--apini-neon, #198754) !important; text-shadow: 0 0 6px rgba(0,255,166,.85), 0 0 16px rgba(0,255,166,.55) !important; opacity: 1 !important; } /* Desktop + DARK: Tiêu đề "Diện Định Cư" màu xanh navy */ @media (min-width:1025px){ html.apini-dark #apiniTimeBarFixed .apini-time-bar-title{ color: #198754 !important; /* xanh navy */ -webkit-text-fill-color: #198754 !important; text-shadow: none !important; opacity: 1 !important; } } /* Nếu trong tiêu đề có link thì cũng giữ màu như vậy */ html.apini-dark .apini-time-bar-title-wrapper a{ color:#222 !important; } /* ============================================ Nút DIỆN ĐỊNH CƯ – luôn xanh dạ quang (Light & Dark, mobile) ============================================ */ @media (max-width:1024px){ .apini-mini-dinhcu-btn, .apini-mini-dinhcu-btn *, a.apini-mini-dinhcu-btn{ color: var(--apini-neon, #198754) !important; -webkit-text-fill-color: var(--apini-neon, #198754) !important; text-shadow: none !important; opacity: 1 !important; filter: none !important; -webkit-text-stroke: 0 !important; mix-blend-mode: normal !important; } } /* ========================================= APINI — Title RED + thin white outline (DARK only) Giữ chữ đỏ, thêm viền sáng mỏng bên ngoài -có class "apini-title-outline-glow-red" ========================================= */ /* DARK: khóa màu đỏ + viền trắng mỏng + glow nhẹ */ html.apini-dark .apini-title-outline-glow-red, html.apini-dark .apini-title-outline-glow-red *{ /* 1) KHÓA MÀU CHỮ ĐỎ (đè mọi rule ép trắng) */ color: #b81f24 !important; -webkit-text-fill-color: #b81f24 !important; /* 2) Viền trắng mỏng */ -webkit-text-stroke: 0.55px rgba(255,255,255,.90); paint-order: stroke fill; /* 3) Glow rất nhẹ để thấy “viền sáng” */ text-shadow: 0 0 2px rgba(255,255,255,.35); /* 4) Ngăn các hiệu ứng khác làm cháy màu */ filter: none !important; opacity: 1 !important; } /* LIGHT: tắt viền / glow (chữ sẽ theo style bạn set ở light) */ html:not(.apini-dark) .apini-title-outline-glow-red, html:not(.apini-dark) .apini-title-outline-glow-red *{ -webkit-text-stroke: 0 !important; text-shadow: none !important; } /* ⛔ Không áp trong mobile menu */ :is(#apiniMobileHeader, #apiniMobileMenuPanel) .apini-title-outline-glow-red, :is(#apiniMobileHeader, #apiniMobileMenuPanel) .apini-title-outline-glow-red *{ -webkit-text-stroke: 0 !important; text-shadow: none !important; } /* VẠCH TRANG TRÍ DƯỚI TIÊU ĐỀ */ .apini-title-kyhieu-bar-red{ position: relative; display: inline-block; padding-bottom: 18px; /* khoảng cách chữ -> divider */ } /* Divider */ .apini-title-kyhieu-bar-red::after{ content:""; position:absolute; left:50%; bottom: 0; transform: translateX(-50%); width: 520px; /* tổng chiều ngang */ height: 12px; /* chiều cao vùng divider */ pointer-events:none; background: /* 2 vạch mảnh đỏ chạy xuyên suốt */ linear-gradient(#b81f24,#b81f24) center 50% / 100% 3px no-repeat, /* khối đỏ dày ở giữa */ linear-gradient(#b81f24,#b81f24) center 50% / 210px 12px no-repeat; } /* Mobile: tự co lại để không tràn */ @media (max-width: 767px){ .apini-title-kyhieu-bar-red::after{ width: min(92vw, 520px); background: linear-gradient(#b81f24,#b81f24) center 50% / 100% 3px no-repeat, linear-gradient(#b81f24,#b81f24) center 50% / min(46vw, 210px) 12px no-repeat; } } /* ================================================= APINI BACKTOP – DARK MODE (html.apini-dark) Chỉ áp dụng cho STATE 2 ================================================= */ @media (min-width:1025px){ html.apini-dark .apini-backtop.apini-backtop-css{ --apini-neon: #00ff99; --apini-neon-soft: rgba(0,255,153,.45); --apini-neon-strong: rgba(0,255,153,.75); } /* STATE 2 = đang scroll hoặc hover */ html.apini-dark .apini-backtop.apini-backtop-css.is-face2, html.apini-dark .apini-backtop.apini-backtop-css:hover{ border-color: var(--apini-neon) !important; box-shadow: 0 10px 22px rgba(0,0,0,.35), 0 0 10px var(--apini-neon-soft), 0 0 22px var(--apini-neon-soft), 0 0 44px rgba(0,255,153,.35), 0 0 70px rgba(0,255,153,.25) !important; } /* mũi tên neon */ html.apini-dark .apini-backtop.apini-backtop-css.is-face2 .apini-backtop__top::before, html.apini-dark .apini-backtop.apini-backtop-css:hover .apini-backtop__top::before{ border-left-color: var(--apini-neon) !important; border-top-color: var(--apini-neon) !important; filter: drop-shadow(0 0 6px var(--apini-neon-strong)); } /* chữ TOP neon */ html.apini-dark .apini-backtop.apini-backtop-css.is-face2 .apini-backtop__top::after, html.apini-dark .apini-backtop.apini-backtop-css:hover .apini-backtop__top::after{ color: var(--apini-neon) !important; text-shadow: 0 0 6px var(--apini-neon-strong), 0 0 14px var(--apini-neon-soft), 0 0 28px rgba(0,255,153,.35); } /* đảm bảo STATE 1 không bị glow trong dark */ html.apini-dark .apini-backtop.apini-backtop-css:not(.is-face2):not(:hover){ box-shadow: 0 10px 18px rgba(0,0,0,.18) !important; border-color: #0b2f55 !important; border: none !important; } } /* ==== Viền trắng bên ngoài toàn bộ khối apini-dim-bg ==== */ .apini-dim-bg.apini-dim-50.apini-text-contrast{ position: relative; /* cần để pseudo ::before/::after bám theo */ border-radius: 0px; /* bo nhẹ góc nếu bạn muốn, có thể bỏ */ overflow: visible; /* để viền sáng ra ngoài không bị cắt */ isolation: isolate; /* giữ hiệu ứng sáng riêng */ } /* Viền sáng chạy ngoài section */ .apini-dim-bg.apini-dim-50.apini-text-contrast::after{ content:""; position:absolute; inset:-2px; /* tràn ra ngoài 2px */ border-radius: inherit; pointer-events:none; border:1px solid rgba(255,255,255,0.95); /* viền trắng rõ nét */ box-shadow: 0 0 22px rgba(255,255,255,0.45), /* quầng sáng ngoài */ inset 0 0 8px rgba(255,255,255,0.25); /* sáng hắt vào trong */ z-index:2; } /* LIGHT mode – viền nhẹ hơn một chút để không quá chói */ html:not(.apini-dark) .apini-dim-bg.apini-dim-50.apini-text-contrast::after{ border-color: rgba(255,255,255,0.7); box-shadow: 0 0 16px rgba(255,255,255,0.35), inset 0 0 6px rgba(255,255,255,0.18); } /* DARK mode – viền sáng rõ hơn */ html.apini-dark .apini-dim-bg.apini-dim-50.apini-text-contrast::after{ border-color: rgba(255,255,255,0.95); box-shadow: inset 0 0 12px rgba(255,255,255,0.3); } /* giao diện sáng tối của định cư */ /* ===== HERO */ .apini-hero-section { position: relative !important; overflow: visible !important; isolation: isolate !important; background: transparent !important; height: 500px !important; min-height: 500px !important; } /* ảnh nền */ .apini-hero-section::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; pointer-events: none !important; } /* tắt nền nội bộ Flatsome */ .apini-hero-section .bg, .apini-hero-section .bg-fill, .apini-hero-section .page-header-bg, .apini-hero-section .title-bg, .apini-hero-section .title-bg-fill, .apini-hero-section .section-bg, .apini-hero-section .banner-bg { background: transparent !important; background-image: none !important; } /* CHỈ dùng cho page-header thật, không đụng section hero thường */ .page-header.apini-hero-section .page-header-wrapper, .page-header.apini-hero-section .page-title-inner, .page-header.apini-hero-section .page-header-inner, .page-header.apini-hero-section .container, .page-header.apini-hero-section .row, .page-header.apini-hero-section .col, .page-header.apini-hero-section .large-12{ position: static !important; background: transparent !important; } /* desktop */ .apini-hero-section::before { background-position: center center !important; } /* ===================================================== HERO TITLE tiêu đề trang chương trình ===================================================== */ .apini-hero-title{ position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 5 !important; margin: 0 !important; width: min(90%, 760px); padding: 18px 28px; text-align: center !important; font-family: 'Montserrat', 'Poppins', sans-serif; font-size: 32px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.2; border-radius: 18px; isolation: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } .apini-hero-title, .apini-hero-title p, .apini-hero-title span { margin: 0 !important; } .apini-hero-title br { display: none !important; } .apini-divider svg { display: block; } /* HOA VĂN KIỂU LÁ (ORNAMENT) */ .apini-divider{ display: flex; align-items: center; justify-content: center; width: 220px; max-width: 72%; margin: 6px auto 8px; line-height: 0; transform: none; } .apini-ornament { display: block; width: 100%; height: auto; overflow: visible; transform-origin: center center; will-change: transform; } /* destop di chuyển tiêu đề xuống 50px */ @media (min-width: 1025px) { .apini-hero-title { top: calc(50% + var(--hero-offset, 50px)) !important; } } /* nền kính */ .apini-hero-title::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* bóng dưới nền kính */ .apini-hero-title::after { content: ""; position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); width: 82%; height: 82px; border-radius: 999px; pointer-events: none; z-index: 0; } .apini-hero-title .apini-hero-line1, .apini-hero-title .apini-hero-line2 { position: relative; z-index: 2; display: block; } /* desktop: cho về 1 dòng */ @media (min-width: 1025px) { .apini-hero-title .apini-hero-line1, .apini-hero-title .apini-hero-line2 { display: block; } .apini-hero-title .apini-hero-line1::after { content: " "; } } /* mobile*/ @media (max-width: 1024px) { /* text */ .apini-hero-title { width: 88%; max-width: 520px; padding: 16px 18px; font-size: 26px; line-height: 1; display: flex; flex-direction: column; align-items: center; gap: 0; } .apini-hero-title .apini-hero-line1, .apini-hero-title .apini-hero-line2 { display: block; } .apini-hero-line1 { margin-bottom: 4px; } .apini-hero-line2 { margin-top: 0; } /* hoa văn*/ .apini-divider { display: inline-block; width: 180px; max-width: 68%; margin: 0; line-height: 0; vertical-align: middle; transform: translateY(-6px); } .apini-ornament { display: block; width: 100%; height: auto; } } /* LIGHT: chữ xanh dương đậm, nền kính tối nhẹ */ html:not(.apini-dark) .apini-hero-title { color: #ffffff; text-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 6px 16px rgba(0,0,0,0.5); } html:not(.apini-dark) .apini-hero-title::before { background: linear-gradient( 180deg, rgba(90, 60, 160, 0.22), rgba(60, 30, 120, 0.35) ); border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 12px 28px rgba(0,0,0,0.18), inset 0 0 0 2px rgba(0,0,0,0.9); } /* DARK: nền sáng hơn light một chút */ /* tiêu đề */ html.apini-dark .apini-hero-title { color: #ffffff; text-shadow: 0 0 2px rgba(255,255,255,0.9), 0 0 6px rgba(255,255,255,0.8), 0 0 12px rgba(0,255,180,0.6), 0 0 20px rgba(0,255,180,0.4), 0 0 30px rgba(0,255,180,0.25); } /* nền kính dưới tiêu đề */ html.apini-dark .apini-hero-title::before { background: rgba(255,255,255,0.24); border: 1px solid rgba(255,255,255,0.34); box-shadow: /* glow viền trắng lan 8px */ 0 0 8px rgba(255,255,255,0.55), /* glow lan rộng hơn */ 0 0 18px rgba(255,255,255,0.35), /* glow sâu nhẹ */ 0 0 35px rgba(255,255,255,0.18), /* shadow giữ độ nổi */ 0 0 22px rgba(0,255,180,0.25), 0 12px 30px rgba(0,0,0,0.28), /* inner glass */ inset 0 0 0 2px rgba(255,255,255,0.9); } /* bóng dưới nền kính */ html.apini-dark .apini-hero-title::after { background: radial-gradient( ellipse at center, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 35%, transparent 80% ); filter: blur(18px); } /* ===== khi tối của hoa văn===== */ html.apini-dark .apini-divider{ color: #00ffa6; filter: drop-shadow(0 0 6px #00ffa6) drop-shadow(0 0 12px #00ffa6); } /* ===== khi sáng hoa văn giảm sáng===== */ html.apini-light .apini-divider{ opacity: 0.5; /* giảm sáng */ } /* ===== HERO banner nguồn ảnh khi sáng tối ===== */ html:not(.apini-dark) .hero-usa::before { background-image: url('/wp-content/themes/apini-child/assets/images/banner-light-usa.webp') !important; } html.apini-dark .hero-usa::before { background-image: url('/wp-content/themes/apini-child/assets/images/banner-night-usa.webp') !important; } /* ===== HERO canada nguồn ảnh khi sáng tối ===== */ html:not(.apini-dark) .hero-can::before { background-image: url('/wp-content/themes/apini-child/assets/images/banner-light-can.webp') !important; } html.apini-dark .hero-can::before { background-image: url('/wp-content/themes/apini-child/assets/images/banner-night-can.webp') !important; } /* ===== HERO AUSTRALIA nguồn ảnh khi sáng tối ===== */ html:not(.apini-dark) .hero-aus::before { background-image: url('/wp-content/themes/apini-child/assets/images/banner-light-aus.webp') !important; } html.apini-dark .hero-aus::before { background-image: url('/wp-content/themes/apini-child/assets/images/banner-night-aus.webp') !important; } /* ===== HERO LATVIA nguồn ảnh khi sáng tối ===== */ html:not(.apini-dark) .hero-lat::before { background-image: url('/wp-content/themes/apini-child/assets/images/banner-light-lat.webp') !important; } html.apini-dark .hero-lat::before { background-image: url('/wp-content/themes/apini-child/assets/images/banner-night-lat.webp') !important; } /* ========================================= HERO-USA2 = section thường của WordPress chỉ dùng ảnh sáng/tối, không dùng layout hero 500px ========================================= */ /* ===== HERO section 2 nguồn ảnh khi sáng tối ===== */ html:not(.apini-dark) .hero-usa2::before { background-image: url('/wp-content/themes/apini-child/assets/images/banner-section2-light-usa.webp') !important; } html.apini-dark .hero-usa2::before { background-image: url('/wp-content/themes/apini-child/assets/images/banner-section2-night-usa.webp') !important; } section.apini-hero-section.hero-usa2{ height: auto !important; min-height: 0 !important; overflow: hidden !important; position: relative !important; isolation: isolate !important; background: transparent !important; padding: 80px 0 !important; } /* LIGHT MODE: viền đen */ html:not(.apini-dark) section.apini-hero-section.hero-usa2{ border: 4px solid rgba(0,0,0,0.9); box-shadow: none; } /* DARK MODE: viền trắng + glow */ html.apini-dark section.apini-hero-section.hero-usa2{ border: 4px solid rgba(255,255,255,0.9); box-shadow: 0 0 8px rgba(255,255,255,0.6), 0 0 16px rgba(255,255,255,0.25); } /* destop ảnh nền section2 usa2 */ section.apini-hero-section.hero-usa2::before{ content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; background-size: 100% auto !important; background-position: center 20%; background-repeat: no-repeat !important; pointer-events: none !important; } /* mobile ảnh nền section2 usa2 */ @media (max-width: 768px){ section.apini-hero-section.hero-usa2::before{ background-size: cover !important; /* giữ full khung */ background-position: center center !important; /* căn giữa */ } } /* trả layout bên trong về bình thường như section WP */ section.apini-hero-section.hero-usa2 .page-header-wrapper, section.apini-hero-section.hero-usa2 .page-title-inner, section.apini-hero-section.hero-usa2 .page-header-inner, section.apini-hero-section.hero-usa2 .container, section.apini-hero-section.hero-usa2 .row, section.apini-hero-section.hero-usa2 .col, section.apini-hero-section.hero-usa2 .large-12{ position: relative !important; background: transparent !important; z-index: 1 !important; } /* nếu trong section này có tiêu đề thường, không cho nó nhảy absolute */ section.apini-hero-section.hero-usa2 .apini-hero-title{ position: relative !important; top: auto !important; left: auto !important; transform: none !important; width: auto !important; max-width: 100% !important; margin: 0 auto 20px !important; z-index: 2 !important; } /* mobile cũng giữ crop giữa */ @media (max-width: 1024px){ section.apini-hero-section.hero-usa2::before{ background-position: center center !important; } } /* ========================================= HERO-AUS2 = section thường của WordPress chỉ dùng ảnh sáng/tối, không dùng layout hero 500px ========================================= */ /* ===== HERO section 2 nguồn ảnh khi sáng tối ===== */ html:not(.apini-dark) .hero-aus2::before { background-image: url('/wp-content/themes/apini-child/assets/images/banner-section2-light-aus.webp') !important; } html.apini-dark .hero-aus2::before { background-image: url('/wp-content/themes/apini-child/assets/images/banner-section2-night-aus.webp') !important; } section.apini-hero-section.hero-aus2{ height: auto !important; min-height: 0 !important; overflow: hidden !important; position: relative !important; isolation: isolate !important; background: transparent !important; padding: 80px 0 !important; } /* LIGHT MODE: viền đen */ html:not(.apini-dark) section.apini-hero-section.hero-aus2{ border: 4px solid rgba(0,0,0,0.9); box-shadow: none; } /* DARK MODE: viền trắng + glow */ html.apini-dark section.apini-hero-section.hero-aus2{ border: 4px solid rgba(255,255,255,0.9); box-shadow: 0 0 8px rgba(255,255,255,0.6), 0 0 16px rgba(255,255,255,0.25); } /* desktop ảnh nền section2 aus2 */ section.apini-hero-section.hero-aus2::before{ content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; background-size: 100% auto !important; background-position: center 20%; background-repeat: no-repeat !important; pointer-events: none !important; } /* mobile ảnh nền section2 aus2 */ @media (max-width: 768px){ section.apini-hero-section.hero-aus2::before{ background-size: cover !important; background-position: center center !important; } } /* nếu trong section này có tiêu đề thường, không cho nó nhảy absolute */ section.apini-hero-section.hero-aus2 .apini-hero-title{ position: relative !important; top: auto !important; left: auto !important; transform: none !important; width: auto !important; max-width: 100% !important; margin: 0 auto 20px !important; z-index: 2 !important; } /* mobile cũng giữ crop giữa */ @media (max-width: 1024px){ section.apini-hero-section.hero-aus2::before{ background-position: center center !important; } } /* section thường có hero-aus2 phải giữ layout bình thường */ section.apini-hero-section.hero-aus2 .container, section.apini-hero-section.hero-aus2 .row, section.apini-hero-section.hero-aus2 .col, section.apini-hero-section.hero-aus2 .large-12{ position: relative !important; } /* section thường có hero-lat2 phải giữ layout bình thường */ section.apini-hero-section.hero-lat2 .container, section.apini-hero-section.hero-lat2 .row, section.apini-hero-section.hero-lat2 .col, section.apini-hero-section.hero-lat2 .large-12{ position: relative !important; } /* ========================================= HERO-CAN2 = section thường của WordPress giống logic HERO-USA2 / HERO-AUS2 ========================================= */ /* ===== HERO section 2 nguồn ảnh khi sáng tối ===== */ html:not(.apini-dark) .hero-can2::before { background-image: url('/wp-content/themes/apini-child/assets/images/banner-section2-light-can.webp') !important; } html.apini-dark .hero-can2::before { background-image: url('/wp-content/themes/apini-child/assets/images/banner-section2-night-can.webp') !important; } section.apini-hero-section.hero-can2{ height: auto !important; min-height: 0 !important; overflow: hidden !important; position: relative !important; isolation: isolate !important; background: transparent !important; padding: 80px 0 !important; /* giữ y hệt hero-usa2 */ } /* giữ nội dung nằm trên nền giống USA */ section.apini-hero-section.hero-can2 .page-header-wrapper, section.apini-hero-section.hero-can2 .page-title-inner, section.apini-hero-section.hero-can2 .page-header-inner, section.apini-hero-section.hero-can2 .container, section.apini-hero-section.hero-can2 .row, section.apini-hero-section.hero-can2 .col, section.apini-hero-section.hero-can2 .large-12{ position: relative !important; background: transparent !important; z-index: 1 !important; } /* CHỈ CANADA: ép apini-dinhcu-inner xếp dọc */ section.apini-hero-section.hero-can2 .apini-dinhcu-inner{ position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 14px !important; margin-left: auto !important; margin-right: auto !important; max-width: 900px !important; /* giữ khung gọn như USA */ width: 100% !important; padding: 20px !important; /* giữ feel khung như USA */ box-sizing: border-box !important; } /* 2 cột con full ngang */ section.apini-hero-section.hero-can2 .apini-dinhcu-inner > .column-dinhcu-text, section.apini-hero-section.hero-can2 .apini-dinhcu-inner > .column-dinhcu-image{ width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin: 0 !important; box-sizing: border-box !important; } /* text lên trên */ section.apini-hero-section.hero-can2 .apini-dinhcu-inner > .column-dinhcu-text{ order: 1 !important; padding: 0 10px !important; } /* ảnh xuống dưới */ section.apini-hero-section.hero-can2 .apini-dinhcu-inner > .column-dinhcu-image{ order: 2 !important; padding: 0 10px 10px 10px !important; text-align: center !important; } section.apini-hero-section.hero-can2 .apini-dinhcu-inner > .column-dinhcu-image img{ display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; } /* ========================================= HERO-LAT2 = section thường của WordPress giống logic HERO-USA2 / HERO-AUS2 ========================================= */ /* ===== HERO section 2 nguồn ảnh khi sáng tối ===== */ html:not(.apini-dark) .hero-lat2::before { background-image: url('/wp-content/themes/apini-child/assets/images/banner-section2-light-lat.webp') !important; } html.apini-dark .hero-lat2::before { background-image: url('/wp-content/themes/apini-child/assets/images/banner-section2-night-lat.webp') !important; } section.apini-hero-section.hero-lat2{ height: auto !important; min-height: 0 !important; overflow: hidden !important; position: relative !important; isolation: isolate !important; background: transparent !important; padding: 80px 0 !important; } /* LIGHT MODE: viền đen */ html:not(.apini-dark) section.apini-hero-section.hero-lat2{ border: 4px solid rgba(0,0,0,0.9); box-shadow: none; } /* DARK MODE: viền trắng + glow */ html.apini-dark section.apini-hero-section.hero-lat2{ border: 4px solid rgba(255,255,255,0.9); box-shadow: 0 0 8px rgba(255,255,255,0.6), 0 0 16px rgba(255,255,255,0.25); } /* desktop ảnh nền section2 lat2 */ section.apini-hero-section.hero-lat2::before{ content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; background-size: 100% auto !important; background-position: center 20%; background-repeat: no-repeat !important; pointer-events: none !important; } /* mobile ảnh nền section2 lat2 */ @media (max-width: 768px){ section.apini-hero-section.hero-lat2::before{ background-size: cover !important; background-position: center center !important; } } /* trả layout bên trong về bình thường như section WP */ section.apini-hero-section.hero-lat2 .page-header-wrapper, section.apini-hero-section.hero-lat2 .page-title-inner, section.apini-hero-section.hero-lat2 .page-header-inner, section.apini-hero-section.hero-lat2 .container, section.apini-hero-section.hero-lat2 .row, section.apini-hero-section.hero-lat2 .col, section.apini-hero-section.hero-lat2 .large-12{ position: relative !important; background: transparent !important; z-index: 1 !important; } /* nếu trong section này có tiêu đề thường, không cho nó nhảy absolute */ section.apini-hero-section.hero-lat2 .apini-hero-title{ position: relative !important; top: auto !important; left: auto !important; transform: none !important; width: auto !important; max-width: 100% !important; margin: 0 auto 20px !important; z-index: 2 !important; } @media (max-width: 767px){ .apini-dinhcu-inner{ display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 14px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 12px !important; box-sizing: border-box !important; } .apini-dinhcu-inner > .column-dinhcu-text, .apini-dinhcu-inner > .column-dinhcu-image{ width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin: 0 !important; padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box !important; } .apini-dinhcu-inner > .column-dinhcu-text{ padding-top: 0 !important; padding-bottom: 0 !important; order: 1 !important; } .apini-dinhcu-inner > .column-dinhcu-image{ padding-top: 0 !important; padding-bottom: 10px !important; text-align: center !important; order: 2 !important; } .apini-dinhcu-inner > .column-dinhcu-image img{ display: block !important; margin: 0 auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; } } /* mobile cũng giữ crop giữa */ @media (max-width: 1024px){ section.apini-hero-section.hero-lat2::before{ background-position: center center !important; } } /* ===== drop BG section 1===== */ @media (max-width: 1024px) { .hero-usa::before { background-position: calc(50% - 100px) center !important; } } @media (max-width: 1024px) { .hero-can::before { background-position: center center !important; } } @media (max-width: 1024px) { .hero-lat::before { background-position: calc(50% + 60px) center !important; } } @media (min-width: 1025px) { .hero-lat::before { background-position: center 88% !important; } } @media (min-width: 1025px) { .hero-aus::before { background-position: center 95% !important; } } /* ===== HERO toggle state ===== */ /* cho phép click rõ ràng */ .apini-hero-title { cursor: pointer; transition: color 0.28s ease, text-shadow 0.28s ease; } /* nền kính + viền chuyển mượt */ .apini-hero-title::before, .apini-hero-title::after { transition: opacity 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.3s ease; } /* hoa văn chuyển mượt */ .apini-divider, .apini-divider svg, .apini-divider .apini-ornament { transition: opacity 0.28s ease, filter 0.28s ease, transform 0.22s ease; transform-origin: center center; } /* ========= trạng thái tắt khung/nền ========= */ .apini-hero-title.apini-hero-minimal::before, .apini-hero-title.apini-hero-minimal::after { opacity: 0 !important; box-shadow: none !important; border-color: transparent !important; background: transparent !important; } /* ========= tắt glow hoa văn ========= */ .apini-hero-title.apini-hero-minimal .apini-divider { filter: none !important; opacity: 1 !important; } .apini-hero-title.apini-hero-minimal .apini-divider svg { filter: none !important; } /* nếu SVG của bạn đang dùng filter bên trong defs */ .apini-hero-title.apini-hero-minimal .apini-ornament g { filter: none !important; } /* ========= animation nảy nhẹ mỗi lần click ========= */ @keyframes apiniOrnamentPulse { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } } .apini-ornament.apini-pulse { animation: apiniOrnamentPulse 160ms ease-out; } .apini-hero-title .apini-hero-line1, .apini-hero-title .apini-divider, .apini-hero-title .apini-hero-line2 { position: relative; z-index: 2; display: block; } /* =============================== APINI DINHCU CARD (FULL CLONE) Desktop + Mobile giống nhau ================================= */ /* Khối ngoài không vẽ nền nữa */ .apini-dinhcu-card{ background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } /* Khối ôm nội dung thật */ .apini-dinhcu-inner{ position: relative !important; display: flex; align-items: center; justify-content: center; gap: 20px; margin-left: auto !important; margin-right: auto !important; max-width: 900px; /* chỉnh theo ý bạn */ padding: 20px !important; border-radius: 12px !important; overflow: hidden !important; } /* nội dung nằm trên nền */ .apini-dinhcu-inner > *{ position: relative !important; z-index: 3 !important; } /* ảnh ở destop section 2 định cư*/ .apini-dinhcu-inner > .column-dinhcu-image { padding: 20px 20px 20px 0; } /* DARK */ html.apini-dark .apini-dinhcu-inner{ background: transparent !important; border: 2px solid #ffd83b !important; box-shadow: 0 0 0 1px rgba(255,216,59,.35) inset, 0 6px 20px rgba(0,0,0,.25), 0 0 16px rgba(255,216,59,.35) !important; } html.apini-dark .apini-dinhcu-inner::before{ content: "" !important; position: absolute !important; inset: 3px !important; border-radius: 10px !important; pointer-events: none !important; z-index: 0 !important; opacity: 0.8; background: /* ===== cụm bọt lớn bên phải (map màu trái -> phải) ===== */ radial-gradient(circle at 88% 12%, rgba(15,52,112,.35) 0px, rgba(69,141,166,.25) 16px, rgba(255,255,255,.45) 24px, rgba(255,255,255,0) 27px ), radial-gradient(circle at 92% 22%, rgba(15,52,112,.32) 0px, rgba(69,141,166,.22) 11px, rgba(255,255,255,.40) 17px, rgba(255,255,255,0) 19px ), radial-gradient(circle at 84% 30%, rgba(15,52,112,.30) 0px, rgba(69,141,166,.22) 13px, rgba(255,255,255,.38) 21px, rgba(255,255,255,0) 23px ), radial-gradient(circle at 91% 40%, rgba(15,52,112,.28) 0px, rgba(69,141,166,.20) 9px, rgba(255,255,255,.35) 15px, rgba(255,255,255,0) 17px ), radial-gradient(circle at 86% 52%, rgba(15,52,112,.30) 0px, rgba(69,141,166,.22) 14px, rgba(255,255,255,.38) 23px, rgba(255,255,255,0) 25px ), radial-gradient(circle at 93% 68%, rgba(15,52,112,.26) 0px, rgba(69,141,166,.20) 12px, rgba(255,255,255,.35) 19px, rgba(255,255,255,0) 21px ), radial-gradient(circle at 87% 82%, rgba(15,52,112,.22) 0px, rgba(69,141,166,.18) 10px, rgba(255,255,255,.32) 16px, rgba(255,255,255,0) 18px ), /* ===== cụm bọt nhỏ dày bên phải (map màu trái -> phải) ===== */ radial-gradient(circle at 82% 18%, rgba(15,52,112,.28) 0px, rgba(69,141,166,.20) 4px, rgba(255,255,255,.35) 6px, rgba(255,255,255,0) 8px ), radial-gradient(circle at 86% 20%, rgba(15,52,112,.26) 0px, rgba(69,141,166,.18) 3px, rgba(255,255,255,.32) 5px, rgba(255,255,255,0) 6px ), radial-gradient(circle at 89% 26%, rgba(15,52,112,.26) 0px, rgba(69,141,166,.18) 4px, rgba(255,255,255,.32) 6px, rgba(255,255,255,0) 7px ), radial-gradient(circle at 83% 34%, rgba(15,52,112,.24) 0px, rgba(69,141,166,.16) 3px, rgba(255,255,255,.30) 5px, rgba(255,255,255,0) 6px ), radial-gradient(circle at 89% 36%, rgba(15,52,112,.26) 0px, rgba(69,141,166,.18) 5px, rgba(255,255,255,.32) 7px, rgba(255,255,255,0) 9px ), radial-gradient(circle at 94% 46%, rgba(15,52,112,.24) 0px, rgba(69,141,166,.16) 4px, rgba(255,255,255,.30) 6px, rgba(255,255,255,0) 7px ), radial-gradient(circle at 82% 58%, rgba(15,52,112,.22) 0px, rgba(69,141,166,.15) 3px, rgba(255,255,255,.28) 5px, rgba(255,255,255,0) 6px ), radial-gradient(circle at 90% 60%, rgba(15,52,112,.24) 0px, rgba(69,141,166,.16) 4px, rgba(255,255,255,.30) 6px, rgba(255,255,255,0) 8px ), radial-gradient(circle at 95% 74%, rgba(15,52,112,.22) 0px, rgba(69,141,166,.14) 3px, rgba(255,255,255,.28) 5px, rgba(255,255,255,0) 6px ), radial-gradient(circle at 84% 78%, rgba(15,52,112,.24) 0px, rgba(69,141,166,.16) 4px, rgba(255,255,255,.30) 6px, rgba(255,255,255,0) 7px ), /* ===== cụm bọt nhẹ bên trái (đảo màu trái -> phải) ===== */ radial-gradient(circle at 8% 76%, rgba(69,141,166,.18) 0px, rgba(15,52,112,.14) 12px, rgba(255,255,255,.25) 18px, rgba(255,255,255,0) 21px ), radial-gradient(circle at 12% 82%, rgba(69,141,166,.14) 0px, rgba(15,52,112,.10) 5px, rgba(255,255,255,.20) 8px, rgba(255,255,255,0) 10px ), radial-gradient(circle at 5% 88%, rgba(69,141,166,.12) 0px, rgba(15,52,112,.08) 3px, rgba(255,255,255,.18) 6px, rgba(255,255,255,0) 7px ), linear-gradient(to right top, #051937, #004d7a,#458da6, #4e8397, #0f3470); } /* LIGHT */ html:not(.apini-dark) .apini-dinhcu-inner{ background: transparent !important; border: 3px solid #0a2a62 !important; box-shadow: 0 6px 20px rgba(0,0,0,.12), 0 0 0 1px rgba(10,42,98,.18) inset !important; } html:not(.apini-dark) .apini-dinhcu-inner::before{ content: "" !important; position: absolute !important; inset: 3px !important; border-radius: 10px !important; us: 10px !important; pointer-events: none !important; z-index: 0 !important; opacity: 0.9; filter: brightness(0.9); background: /* ===== cụm bọt lớn bên phải ===== */ radial-gradient(circle at 88% 12%, rgba(10,124,144,.35) 0px, rgba(56,188,200,.25) 16px, rgba(255,255,255,.45) 24px, rgba(255,255,255,0) 27px ), radial-gradient(circle at 92% 22%, rgba(15,142,160,.32) 0px, rgba(63,186,200,.22) 11px, rgba(255,255,255,.40) 17px, rgba(255,255,255,0) 19px ), radial-gradient(circle at 84% 30%, rgba(20,150,165,.30) 0px, rgba(63,186,200,.22) 13px, rgba(255,255,255,.38) 21px, rgba(255,255,255,0) 23px ), radial-gradient(circle at 91% 40%, rgba(10,140,150,.28) 0px, rgba(63,186,200,.20) 9px, rgba(255,255,255,.35) 15px, rgba(255,255,255,0) 17px ), radial-gradient(circle at 86% 52%, rgba(12,135,150,.30) 0px, rgba(56,188,200,.22) 14px, rgba(255,255,255,.38) 23px, rgba(255,255,255,0) 25px ), radial-gradient(circle at 93% 68%, rgba(10,130,145,.26) 0px, rgba(56,188,200,.20) 12px, rgba(255,255,255,.35) 19px, rgba(255,255,255,0) 21px ), radial-gradient(circle at 87% 82%, rgba(10,120,140,.22) 0px, rgba(56,188,200,.18) 10px, rgba(255,255,255,.32) 16px, rgba(255,255,255,0) 18px ), /* ===== cụm bọt nhỏ dày bên phải ===== */ radial-gradient(circle at 82% 18%, rgba(10,124,144,.28) 0px, rgba(56,188,200,.20) 4px, rgba(255,255,255,.35) 6px, rgba(255,255,255,0) 8px ), radial-gradient(circle at 86% 20%, rgba(15,142,160,.26) 0px, rgba(63,186,200,.18) 3px, rgba(255,255,255,.32) 5px, rgba(255,255,255,0) 6px ), radial-gradient(circle at 89% 26%, rgba(20,150,165,.26) 0px, rgba(63,186,200,.18) 4px, rgba(255,255,255,.32) 6px, rgba(255,255,255,0) 7px ), radial-gradient(circle at 83% 34%, rgba(10,140,150,.24) 0px, rgba(63,186,200,.16) 3px, rgba(255,255,255,.30) 5px, rgba(255,255,255,0) 6px ), radial-gradient(circle at 89% 36%, rgba(12,135,150,.26) 0px, rgba(56,188,200,.18) 5px, rgba(255,255,255,.32) 7px, rgba(255,255,255,0) 9px ), radial-gradient(circle at 94% 46%, rgba(10,130,145,.24) 0px, rgba(56,188,200,.16) 4px, rgba(255,255,255,.30) 6px, rgba(255,255,255,0) 7px ), radial-gradient(circle at 82% 58%, rgba(10,120,140,.22) 0px, rgba(56,188,200,.15) 3px, rgba(255,255,255,.28) 5px, rgba(255,255,255,0) 6px ), radial-gradient(circle at 90% 60%, rgba(10,120,140,.24) 0px, rgba(56,188,200,.16) 4px, rgba(255,255,255,.30) 6px, rgba(255,255,255,0) 8px ), radial-gradient(circle at 95% 74%, rgba(10,120,140,.22) 0px, rgba(56,188,200,.14) 3px, rgba(255,255,255,.28) 5px, rgba(255,255,255,0) 6px ), radial-gradient(circle at 84% 78%, rgba(10,120,140,.24) 0px, rgba(56,188,200,.16) 4px, rgba(255,255,255,.30) 6px, rgba(255,255,255,0) 7px ), /* ===== cụm bọt nhẹ bên trái ===== */ radial-gradient(circle at 8% 76%, rgba(10,124,144,.18) 0px, rgba(56,188,200,.14) 12px, rgba(255,255,255,.25) 18px, rgba(255,255,255,0) 21px ), radial-gradient(circle at 12% 82%, rgba(15,142,160,.14) 0px, rgba(63,186,200,.10) 5px, rgba(255,255,255,.20) 8px, rgba(255,255,255,0) 10px ), radial-gradient(circle at 5% 88%, rgba(20,150,165,.12) 0px, rgba(63,186,200,.08) 3px, rgba(255,255,255,.18) 6px, rgba(255,255,255,0) 7px ), /* ===== haze trắng mờ kiểu nước ===== */ radial-gradient(circle at 50% 50%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 48%), radial-gradient(circle at 72% 46%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 38%), /* ===== nền nước ===== */ linear-gradient( 135deg, #9fe3d6 0%, #6fd0c9 25%, #38bcc8 55%, #1fa8b8 75%, #0f8ea0 90%, #0a7c90 100% ); box-shadow: inset 0 1px 2px rgba(255,255,255,.42), inset 0 -8px 18px rgba(255,255,255,.10), inset -18px 0 30px rgba(255,255,255,.10) !important; backdrop-filter: blur(2px) saturate(115%) !important; -webkit-backdrop-filter: blur(2px) saturate(115%) !important; }