/* ================= DESKTOP ONLY ================= */ @media (min-width: 768px){ /* Section cha */ .usa-hero-wrap-des{ position: relative; overflow: visible !important; /* Biến chỉnh nhanh cho desktop */ --gap-bottom-des: 0px; /* đẩy ảnh “lòi” xuống thêm nếu cần */ --flag-w-des: 52vw; /* kích thước cờ */ --flag-left-des: 0; /* vị trí cờ từ mép trái */ --lib-w-des: 22vw; /* kích thước Liberty */ --lib-left-des: 6vw; /* vị trí Liberty từ mép trái */ --hero-top-gap-des: 60px; /* khoảng đệm bên trên khung*/ padding-top: var(--hero-top-gap-des) !important; } /* Banner desktop (div.banner với class "usa-hero BG-usa-destop") */ .usa-hero-wrap-des .usa-hero{ position: relative; overflow: visible !important; -webkit-clip-path:none !important; clip-path:none !important; -webkit-mask-image:none !important; mask-image:none !important; } /* 2 ảnh đứng CÙNG CẤP banner, neo vào đáy banner */ .usa-hero-wrap-des .BG-usa-flag-destop, .usa-hero-wrap-des .BG-Liberty-destop{ position: absolute !important; /* mốc đáy banner: top = banner-top + banner-h */ top: calc(var(--banner-top-des, 0px) + var(--banner-h-des, 0px)); left: 0; transform: translateY(calc(-100% + var(--gap-bottom-des,0))) translateX(var(--slide,0)) !important; height: auto !important; max-width: none !important; pointer-events: none; will-change: transform, opacity; } /* Kích thước & vị trí lá cờ */ .usa-hero-wrap-des .BG-usa-flag-destop{ z-index: 2; left: var(--flag-left-des); width: var(--flag-w-des) !important; opacity: 0; transition: opacity .6s ease, transform 1000ms cubic-bezier(.3,0,.2,1); } .usa-hero-wrap-des .BG-Liberty-destop{ z-index: 3; left: var(--lib-left-des); width: var(--lib-w-des) !important; opacity: 0; --slide: -60vw; transition: transform 1000ms cubic-bezier(.3,0,.2,1), opacity .6s ease; } /* Vòng lặp: LẦN LẺ (is-active) = trái→giữa; LẦN CHẴN (is-out) = giữa→phải */ .usa-hero-wrap-des.is-active .BG-usa-flag-destop{ opacity:1; --slide:0; } .usa-hero-wrap-des.is-active .BG-Liberty-destop{ opacity:1; --slide:0; } .usa-hero-wrap-des.is-out .BG-usa-flag-destop{ opacity:0; } .usa-hero-wrap-des.is-out .BG-Liberty-destop{ opacity:0; --slide:100vw; } /* Reset tức thời về trái để lần sau luôn chạy từ trái */ .usa-hero-wrap-des.no-anim .BG-usa-flag-destop, .usa-hero-wrap-des.no-anim .BG-Liberty-destop{ transition:none !important; } .usa-hero-wrap-des.reset-left .BG-usa-flag-destop{ opacity:0; --slide:-10vw; } .usa-hero-wrap-des.reset-left .BG-Liberty-destop{ opacity:0; --slide:-60vw; } /* Text overlay desktop – nằm trên cùng & giữa banner */ .usa-hero-wrap-des .usa-text-destop{ position: absolute; z-index: 50; left: 50%; top: calc(var(--banner-top-des,0px) + var(--banner-h-des,0px)*0.5); transform: translate(-50%, -50%); /* canh giữa cả 2 chiều */ text-align: center; pointer-events: auto; } .usa-hero-wrap-des .usa-text-destop{ font-size: clamp(20px, 7vw, 36px); line-height: 1.1; } } /* ===================================================== */ /* 1) Mở overflow cho các wrapper Flatsome thường gặp */ .section.usa-hero, .banner.usa-hero, .section.usa-hero > .section-content, .banner.usa-hero > .banner-inner, .section.usa-hero > .ux-section-content, .banner.usa-hero > .banner-layers, .section.usa-hero > .bg, .banner.usa-hero > .banner-inner > .bg, .usa-hero .row, .usa-hero .col, .usa-hero .col-inner, .usa-hero .banner, .usa-hero .banner-inner, .usa-hero .ux-img, .usa-hero .ux-image, .usa-hero figure, .usa-hero .image-tools, .usa-hero .image-cover, .usa-hero .ux-builder-block, .usa-hero [data-ll-status], /* wrapper do Lazy Load */ .usa-hero .litespeed_lazywrapper, .usa-hero .lazyload, .usa-hero .ls-blur-up-img, .usa-hero .ls-is-cached { overflow: visible !important; clip-path: none !important; -webkit-clip-path: none !important; -webkit-mask-image: none !important; mask-image: none !important; } /* ==== MOBILE ONLY: neo Flag & Liberty lên đúng đáy banner ==== */ /* ===== MOBILE ONLY (<=767px) ===== */ @media (max-width: 767px){ /* Giảm kích thước 2 ảnh một chút */ .usa-hero-wrap{ --flag-w: 78vw; /* kích thước lá cờ */ --flag-left: -8vw; --lib-w: 45vw; /* kích thước tượng */ --lib-left: 2vw; --gap-bottom: 0px; /* nếu muốn “lòi” xuống thêm: 6px/10px */ --hero-top-gap-mb: 20px; /* khoảng đệm bên trên khung*/ padding-top: var(--hero-top-gap-mb) !important; } /* Neo theo đáy banner (đang dùng biến banner-top & banner-h từ JS) */ .usa-hero-wrap .BG-usa-flag-mobile, .usa-hero-wrap .BG-Liberty-mobile{ position:absolute !important; top: calc(var(--banner-top,0px) + var(--banner-h,0px)); left:0; transform: translateY(calc(-100% + var(--gap-bottom,0))) translateX(var(--slide,0)) !important; height:auto !important; max-width:none !important; pointer-events:none; will-change: transform, opacity; } .usa-hero-wrap .BG-usa-flag-mobile{ z-index:2; left: calc(var(--flag-left) - var(--flag-shift)); width:var(--flag-w) !important; opacity:0; transition: opacity .6s ease, transform 1000ms cubic-bezier(.3,0,.2,1); } .usa-hero-wrap .BG-Liberty-mobile{ z-index:3; left:var(--lib-left); width:var(--lib-w) !important; opacity:0; --slide:-60vw; transition: transform 1000ms cubic-bezier(.3,0,.2,1), opacity .6s ease; } /* HIỆN (click 1 / cuộn lên) */ .usa-hero-wrap.is-active .BG-usa-flag-mobile{ opacity:1; --slide:0; } .usa-hero-wrap.is-active .BG-Liberty-mobile { opacity:1; --slide:0; } /* ẨN (click 2 / cuộn xuống) – trượt phải và biến mất */ .usa-hero-wrap.is-out .BG-usa-flag-mobile{ opacity:0; } .usa-hero-wrap.is-out .BG-Liberty-mobile{ opacity:0; --slide:100vw; } /* RESET ĐỂ LẦN SAU LẠI VÀO TỪ TRÁI */ .usa-hero-wrap.reset-left .BG-usa-flag-mobile{ opacity:0; --slide:-10vw; } .usa-hero-wrap.reset-left .BG-Liberty-mobile { opacity:0; --slide:-60vw; } /* Ẩn text bên trong banner (nếu còn) */ .usa-hero-wrap .usa-hero-banner-mobile .usa-text-mobile{ display:none !important; } /* Text overlay giữa banner */ .usa-hero-wrap .usa-text-mobile{ position:absolute; z-index:50; left:50%; /* giữa banner theo biến top/height do JS sync */ top: calc(var(--banner-top,0px) + var(--banner-h,0px) * 0.5); transform: translate(-50%, -50%); text-align:center; pointer-events:auto; font-size: clamp(20px, 7vw, 36px); line-height: 1.1; } /* Cho phép reset tức thời (không animate) */ .usa-hero-wrap.no-anim .BG-usa-flag-mobile, .usa-hero-wrap.no-anim .BG-Liberty-mobile{ transition: none !important; } } /* ===== Mobile only: scroll morph ảnh lớn -> ảnh nhỏ ===== */ @media (max-width: 767px){ .pick-usa-move{ will-change: auto; transform-origin: top left; display:block; z-index: 30; } /* Khi đang “bay”: cố định trên màn để nội suy mượt */ .pick-usa-moving{ will-change: transform; position: fixed !important; pointer-events: none; } .pick-usa-target.is-covered{ visibility: hidden; } /* ẩn ảnh nhỏ khi ảnh lớn phủ lên */ /* Khối tổng: khai báo biến để chỉnh nhanh */ .hero-target-mb{ /* chiều rộng cuối cùng của ảnh nhỏ (bệ đáp) */ --pick-thumb-w: 42vw; /* chỉnh theo ý */ /* tỉ lệ W:H của ảnh nhỏ (ví dụ 260x160 => 160/260 ≈ 0.615) */ --pick-thumb-ratio: 0.62; /* khoảng cách giữa bệ đáp và block mô tả bên dưới */ --pick-gap-below: 12px; } /* Column làm đích: bệ đáp có chiều cao/chiều rộng fix để JS đo đúng */ .hero-target-mb .hero-target-move-mb-1{ contain: layout paint size; position: relative; width:var(--pick-thumb-w,42vw); height:calc(var(--pick-thumb-w,42vw) * var(--pick-thumb-ratio,0.62)); margin:0 auto var(--pick-gap-below,12px); contain:layout paint size; } /* Div target rỗng bên trong (nếu bạn dùng) tự căng full bệ đáp */ .hero-target-mb .hero-target-move-mb-1 .pick-usa-target{ position:absolute; inset:0; } /* Block mô tả phía dưới: chừa thêm padding-top (nếu muốn khoảng trống nằm ở block text) */ .hero-target-mb .hero-target-move-mb-2{ position:relative; z-index:2; /* thấp hơn ảnh lớn (z 30) nhưng vẫn nhìn thấy khi ảnh ẩn */ margin-top:4px; /* nếu cần hạ text xuống thêm */ color:#000; /* tránh trùng nền */ margin-top: 4px; padding-top: var(--pick-gap-below); } } /* khu vực địa lý và khí hậu của trang quốc gia */ /* 1) Cùng bề rộng cho Địa lý & Khí hậu */ :root{ --apini-container: 980px; } /* chỉnh 980/1080/1180 nếu muốn */ :root{ --apini-title-pad: 200px; } :root{ --apini-card-pad: 16px; } /* biến kéo tràn nền của tiêu đề phụ */ /* Bọc nội dung trong 2 section về cùng 1 max-width */ .apini-geo .apini-section, .apini-climate .apini-section{ max-width: var(--apini-container) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } /*kích thước Đường viền xanh dương và xanh lá ngoài của địa lý và khí hậu */ .apini-geo .apini-card{ max-width: 97.8% !important; } .apini-climate .apini-card{ max-width: 100% !important; } @media (max-width: 767px){ .apini-geo .apini-card{ max-width: 97.8% !important; } } /* 2) Border khung (nếu bạn đang bọc nội dung bằng .apini-card) */ .apini-card{ padding: var(--apini-card-pad) !important; position: relative; border: 2.5px solid var(--apini-accent, #00ff99); border-radius: 14px; background: rgba(17,22,27,.18); } .apini-climate .weather-viewport, .apini-climate .weather-track{ position: relative; z-index: 10; overflow: visible; } .apini-climate .weather-viewport .apini-arrow{ z-index: 15; } /* Flush khi đặt slider trong card */ .apini-card--flush > *{ border-radius: 12px; overflow: hidden; } .apini-card--flush .slick-list, .apini-card--flush .flickity-viewport, .apini-card--flush .swiper{ border-radius: 12px; overflow: hidden; } /* 4) Tiêu đề phụ – khung (chưa gán màu) */ .apini-dlkh-title{ /* base cho cả 2 loại */ font-weight: 800; line-height: 1.2; letter-spacing: .3px; color: var(--apini-title-fg, #111); } /* 4) Tiêu đề CHÍNH: có vệt sáng ở phải */ .apini-title--main{ /* giữ 2 khe trái/phải */ margin:10px 200px !important; /* khung */ position:relative; box-sizing:border-box; width:100% !important; /* cỡ chữ/chiều cao tối thiểu */ font-size:18px; line-height:1.2; /* dùng grid để giữa dọc + ngang */ display:grid; place-items:center; /* cao tối thiểu & đệm nhẹ để nhìn thoáng */ min-height:2.6em; padding-block:6px; text-align:center; } /* reset các thẻ con (p/span) do UX Builder sinh ra */ .apini-title--main > *{ margin: 0 !important; line-height: 1.2 !important; } /* ===== Text đặt class trực tiếp trên tiêu đề ===== */ .apini-title--main .text-khihau, .apini-title--main .text-dialy{ /* ép ghi đè mọi style inline của UX Builder */ display: flex !important; align-items: center !important; /* GIỮA dọc */ justify-content: center !important; /* GIỮA ngang */ gap: .5em; width: 100%; margin: 0px !important; line-height: 1.5 !important; min-height: 2.6em; /* khớp với khung cha */ text-align: center !important; } /* vệt sáng bên phải */ .apini-title--main::after{ content:""; position:absolute; inset:auto 0 0 auto; /* right:0; top:0; bottom:0; */ right:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.35)); opacity:.55; pointer-events:none; } /*mobile thì cách 2 bên giảm */ @media (max-width: 1024px) { .apini-title--main{ margin: 10px 20px !important; } } /* 5) Màu theo mục (biến viền) – chỉ cho border .apini-card */ .apini-geo { --apini-accent:#00ff99; } /* Địa lý */ .apini-climate { --apini-accent:#1976D2; } /* Khí hậu */ /* 6) Mở khóa “text trắng tuyệt đối” trước đây */ .apini-card .apini-title, .apini-card .apini-dlkh-title{ color: var(--apini-title-fg, #111) !important; } /* 7) Responsive tinh gọn */ @media (max-width: 768px){ .weather-slide-inner .apini-section{ margin:16px auto; } .apini-card{ border-radius:12px; padding:14px; } } .apini-geo .apini-card{ margin-bottom: 32px !important; /* khoảng cách giữa 2 khung */ margin-top: 22px !important; /* kéo khung địa lý hở phía trên */ } /* --- Nội dung trong slide --- */ /* thanh tiêu đề phụ khi giao diện sáng gradient nền (trái -> phải) */ .weather-title{ color: #000; /* chữ đen */ font-weight: 700; /* Viền trắng (WebKit/Chromium/Safari) */ -webkit-text-stroke: 2px #fff; paint-order: stroke fill; /* ưu tiên vẽ viền trước */ /* Hào quang trắng tỏa ra ngoài chữ */ text-shadow: 0 0 2px rgba(255,255,255,.9), 0 0 4px rgba(255,255,255,.75), 0 0 8px rgba(255,255,255,.55), 0 0 12px rgba(255,255,255,.35); margin-top: -17px !important; /* ---quan trọng chỉnh slider bằng với tiêu đề bên trên nó --- */ text-align:center; font-weight:700; border:3px solid #800000; border-radius:1px; /* gradient nền (trái -> phải) */ background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.22) 0 1px, rgba(255,255,255,0) 2px 6px), /* vân chéo */ linear-gradient(to right, #de575b, #ffe3b3); /* gradient chính */ } .weather-image{ width:100%; height:auto; display:block; margin:0 0 10px; } .weather-info{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px; } .weather-info p{ margin:0 0 6px; } @media (max-width:767px){ .weather-slider{ --peek: 40px; --gap: 6px; } .weather-info{ grid-template-columns:1fr; } } /* --- Viewport/Track --- */ .weather-viewport{ position:relative; overflow:hidden; width:100%; } .weather-track{ display:flex; gap: var(--gap); will-change: transform; transition: transform .5s ease; } .weather-track.no-anim{ transition:none; } /* dùng khi snap clone */ /* Mỗi slide chiếm <100% để lộ slide kế tiếp */ .weather-track .weather-slide{ flex: 0 0 calc(100% - var(--peek)); display:block; } /* --- Nút điều hướng ở giữa + dạ quang --- */ .weather-viewport .apini-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border:0; border-radius:999px; background:#111827cc; color:#fff; font-size:22px; line-height:42px; cursor:pointer; z-index:5; box-shadow: 0 0 0 3px #00ffa055, 0 0 18px #00ffa0aa; transition: background .2s, box-shadow .2s, transform .15s; } .apini-prev{ left:10px } .apini-next{ right:10px } .weather-viewport .apini-arrow:hover{ background:#10b981; box-shadow: 0 0 0 3px #34d39988, 0 0 20px #34d399cc; transform:translateY(-50%) scale(1.04); } .weather-viewport .apini-arrow:active{ transform:translateY(-50%) scale(0.97); } /* Desktop: thu nhỏ toàn bộ slider ~10% và căn giữa */ @media (min-width:1024px){ .weather-slider{ max-width: 1180px; /* chỉnh để khớp phần khác của trang */ margin: 0 auto; } } /* 3) THU NHỎ NỘI DUNG TRONG MỖI SLIDE ~10–15% so với slide => ảnh, tiêu đề, mô tả cùng canh theo ảnh, tạo chỗ trống bên phải để 'hé' nhiều hơn */ .weather-track .weather-slide > .weather-title, .weather-track .weather-slide > .weather-image, .weather-track .weather-slide > .weather-info{ max-width: 84%; /* trước 100% -> nhỏ tổng thể ~16% */ margin-left: auto; margin-right: auto; } .weather-info{ margin-left: 5px !important; font-size: 18px; /* nhỏ hơn */ gap: 10px; } /* Giữ khoảng cách trên/dưới đúng yêu cầu */ .weather-title{ margin: 0 0 2px; } .weather-image{ margin: 0 0 10px; } /* Mobile: nội dung full width, hé ít hơn để dễ xem */ @media (max-width: 767px){ .weather-viewport .apini-arrow{ background: rgba(0, 0, 0, 0.3) !important; backdrop-filter: blur(8px); top: 25%; } .weather-slider{ --peek: 48px; --gap: 6px; } /* ❗ Thu nhỏ NỘI DUNG bên trong slide (không dùng selector > nữa) */ .weather-track .weather-slide .weather-title, .weather-track .weather-slide .weather-image, .weather-track .weather-slide .weather-info{ max-height: 64%; margin-left:auto; margin-right:auto; } .weather-title{ font-size: 18px; /* tùy chỉnh */ line-height: 1.25; min-height: 2.6em; /* ≈ 2 dòng -> ảnh luôn bắt đầu cùng 1 cao độ */ margin: 0 0 6px; } .weather-info{ margin-left: 5px !important; grid-template-columns: 1fr; /* 1 cột như bạn đang dùng */ font-size: 16px; /* nhỏ hơn */ gap: 10px; } .weather-info p{ margin: 0 0 4px; } .apini-prev{ left: 22px; } .apini-next{ right: 10px; } } .weather-viewport{ touch-action: pan-y; cursor: grab; } .weather-viewport.is-dragging{ cursor: grabbing; } .apini-card--flush { padding-top: 10 !important; padding-left: 0 !important; padding: 0 !important; min-width: 100% !important; } .apini-dlkh-title{ min-width: 101% !important; } /* 1) Card Địa lý: cắt mọi thứ vượt viền */ .apini-geo .apini-card{ overflow: hidden; /* clip phần nền/gradient thừa */ } /* ADD (global) — cần cho mọi slider */ .weather-slider .weather-track{ transition: transform 500ms ease; will-change: transform; } .weather-slider .weather-track.no-anim{ transition: none !important; } .weather-highlight{ color:#1976D2 !important; font-size:1.18rem; font-weight:600; } /* Base mặc định */ .weather-highlight{ color:#1976D2 !important; font-size:1.18rem; font-weight:600; transition: font-size .45s ease, font-weight .45s ease, text-shadow .45s ease, transform .45s ease; } /* Trạng thái được “pump” tạm thời khi slide đổi */ .weather-highlight.is-pumped{ font-size:2.18rem; font-weight:800; text-shadow: 0 0 6px rgba(25,118,210,.85), 0 0 18px rgba(25,118,210,.45); transform: translateZ(0); /* hint GPU để mượt */ } /* Container nền cờ BG chỉ xuất hiện ở destop */ html.apini-dark .hero-target-mb1 { position: relative; z-index: 0; } /* Pseudo của nền: luôn thấp hơn ảnh */ html.apini-dark .hero-target-mb1::before { z-index: 0; } html.apini-dark .hero-target-mb1::after { z-index: 1; pointer-events: none; } /* Ảnh Mỹ đặt CAO HƠN sao */ html.apini-dark .hero-target-mb1 .pick-usa-move { position: relative; /* quan trọng! */ z-index: 20 !important; /* cao hơn ::after */ } /* Cờ Mỹ mô phỏng: có 50 sao nằm trong canton xanh */ html.apini-dark .hero-target-mb1{ position: relative; background:#000; overflow:hidden; --flag-opacity:0.35; --flag-speed: 14s; isolation: isolate; position:relative; background:#000; overflow:hidden; --flagOpacity:.25; --cantonW: 40%; /* rộng canton = 2/5 lá cờ */ --cantonH: calc(100% * 7 / 13);/* cao canton = 7/13 lá cờ (chuẩn) */ --move:14s; } /* Sọc + canton xanh (như cũ) */ html.apini-dark .hero-target-mb1::before{ z-index:-2 !important; content:""; position:absolute; inset:0; background: linear-gradient(#0a3161,#0a3161) left top / var(--cantonW) var(--cantonH) no-repeat, repeating-linear-gradient(to bottom,#b31942 0%,#b31942 7%,#fff 7%,#fff 14%); opacity:var(--flagOpacity); mix-blend-mode:screen; animation: flagMove var(--move) ease-in-out infinite alternate; z-index:0; } /* 50 sao – 9 hàng xen kẽ, vẽ bằng 1 SVG duy nhất (không repeat) */ html.apini-dark .hero-target-mb1::after{ content:""; position:absolute; top:0; left:0; width:var(--cantonW); height:var(--cantonH); z-index:-1 !important; pointer-events:none; mix-blend-mode:screen; opacity:.95; animation: flagWaveMove 3.8s linear infinite; mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); mask-size: 200% 100%; mask-position: 0 0; /* CHỈNH kích thước sao: thay 0.48 trong scale(...) (nhỏ hơn: 0.44; to hơn: 0.52) */ background: url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ ") 0 0/100% 100% no-repeat; } /* 1) Khi hover hoặc có .is-waving -> bật filter “tung bay” */ html.apini-dark .hero-target-mb1.is-waving::before, html.apini-dark .hero-target-mb1:hover::after, html.apini-dark .hero-target-mb1.is-waving::after{ /* WAVE 1: làn sóng nhỏ, nhanh */ filter: url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ \ #w1"); will-change: filter, transform; } /* Hiệu ứng uốn sóng: làm cho mặt cờ gợn từ trái qua phải */ @keyframes flagWaveMove { 0% { transform: perspective(800px) rotateY(5deg) translateZ(0); mask-position: 0 0; filter: brightness(1); } 25% { transform: perspective(800px) rotateY(7deg) skewY(1deg); mask-position: 25% 0; filter: brightness(1.05); } 50% { transform: perspective(800px) rotateY(-6deg) skewY(-2deg); mask-position: 50% 0; filter: brightness(0.95); } 75% { transform: perspective(800px) rotateY(4deg) skewY(1deg); mask-position: 75% 0; filter: brightness(1.03); } 100% { transform: perspective(800px) rotateY(0deg); mask-position: 100% 0; filter: brightness(1); } } /* Khi không hover thì tạm dừng */ html.apini-dark .hero-target-mb1::before, html.apini-dark .hero-target-mb1::after { animation-play-state: paused; } /* Hover hoặc click (class .is-waving) thì bay */ html.apini-dark .hero-target-mb1:hover::before, html.apini-dark .hero-target-mb1.is-waving::before, html.apini-dark .hero-target-mb1:hover::after, html.apini-dark .hero-target-mb1.is-waving::after { animation-play-state: running; } /* Chuyển động vỡ biến mất */ @keyframes flagFadeOut { 0% { opacity: 1; filter: brightness(1); transform: scale(1) rotate(0deg); } 50% { opacity: 0.6; filter: brightness(1.3) blur(1px); transform: scale(1.05) rotate(3deg); } 100% { opacity: 0; filter: brightness(2) blur(6px); transform: scale(1.1) rotate(8deg); } } /* Khi rời Dark mode (Light bật) */ html:not(.apini-dark) .hero-target-mb1 { background: #fff !important; transition: background 1s ease; } /* Cờ tan biến */ html:not(.apini-dark) .hero-target-mb1::before, html:not(.apini-dark) .hero-target-mb1::after { animation: flagFadeOut 1s ease forwards; pointer-events: none; } /* giao diện điện thoại thì tắt cờ đi */ @media (max-width: 1024px) { .hero-target-mb1::before, .hero-target-mb1::after { display: none !important; content: none !important; animation: none !important; filter: none !important; } /* Nền chỉ giữ màu mặc định (đen hoặc trắng tuỳ theme) */ .hero-target-mb1 { background: #000 !important; /* hoặc #fff nếu light */ } } } /* ==== 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: 0 0 30px rgba(255,255,255,0.55), inset 0 0 12px rgba(255,255,255,0.3); } /* =============== 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: 30 !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; } .apini-title-outline-glow-red{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .apini-title-outline-glow-red img{ height: 1.2em; width: auto; vertical-align: middle; } /* ===== Mobile only: scroll morph ảnh lớn -> ảnh nhỏ ===== */ @media (max-width: 767px){ .pick-usa-move{ will-change: auto; transform-origin: top left; display:block; z-index: 30; } /* Khi đang “bay”: cố định trên màn để nội suy mượt */ .pick-usa-moving{ will-change: transform; position: fixed !important; pointer-events: none; } .pick-usa-target.is-covered{ visibility: hidden; } /* ẩn ảnh nhỏ khi ảnh lớn phủ lên */ /* Khối tổng: khai báo biến để chỉnh nhanh */ .hero-target-mb{ /* chiều rộng cuối cùng của ảnh nhỏ (bệ đáp) */ --pick-thumb-w: 42vw; /* chỉnh theo ý */ /* tỉ lệ W:H của ảnh nhỏ (ví dụ 260x160 => 160/260 ≈ 0.615) */ --pick-thumb-ratio: 0.62; /* khoảng cách giữa bệ đáp và block mô tả bên dưới */ --pick-gap-below: 12px; } /* Column làm đích: bệ đáp có chiều cao/chiều rộng fix để JS đo đúng */ .hero-target-mb .hero-target-move-mb-1{ contain: layout paint size; position: relative; width:var(--pick-thumb-w,42vw); height:calc(var(--pick-thumb-w,42vw) * var(--pick-thumb-ratio,0.62)); margin:0 auto var(--pick-gap-below,12px); contain:layout paint size; } /* Div target rỗng bên trong (nếu bạn dùng) tự căng full bệ đáp */ .hero-target-mb .hero-target-move-mb-1 .pick-usa-target{ position:absolute; inset:0; } /* Block mô tả phía dưới: chừa thêm padding-top (nếu muốn khoảng trống nằm ở block text) */ .hero-target-mb .hero-target-move-mb-2{ position:relative; z-index:2; /* thấp hơn ảnh lớn (z 30) nhưng vẫn nhìn thấy khi ảnh ẩn */ margin-top:4px; /* nếu cần hạ text xuống thêm */ color:#000; /* tránh trùng nền */ margin-top: 4px; padding-top: var(--pick-gap-below); } } /* Container nền cờ BG chỉ xuất hiện ở destop */ html.apini-dark .hero-target-mb1 { position: relative; z-index: 0; } /* Pseudo của nền: luôn thấp hơn ảnh */ html.apini-dark .hero-target-mb1::before { z-index: 0; } html.apini-dark .hero-target-mb1::after { z-index: 1; pointer-events: none; } /* Ảnh Mỹ đặt CAO HƠN sao */ html.apini-dark .hero-target-mb1 .pick-usa-move { position: relative; /* quan trọng! */ z-index: 20 !important; /* cao hơn ::after */ } /* Cờ Mỹ mô phỏng: có 50 sao nằm trong canton xanh */ html.apini-dark .hero-target-mb1{ position: relative; background:#000; overflow:hidden; --flag-opacity:0.35; --flag-speed: 14s; isolation: isolate; position:relative; background:#000; overflow:hidden; --flagOpacity:.25; --cantonW: 40%; /* rộng canton = 2/5 lá cờ */ --cantonH: calc(100% * 7 / 13);/* cao canton = 7/13 lá cờ (chuẩn) */ --move:14s; } /* Sọc + canton xanh (như cũ) */ html.apini-dark .hero-target-mb1::before{ z-index:-2 !important; content:""; position:absolute; inset:0; background: linear-gradient(#0a3161,#0a3161) left top / var(--cantonW) var(--cantonH) no-repeat, repeating-linear-gradient(to bottom,#b31942 0%,#b31942 7%,#fff 7%,#fff 14%); opacity:var(--flagOpacity); mix-blend-mode:screen; animation: flagMove var(--move) ease-in-out infinite alternate; z-index:0; } /* 50 sao – 9 hàng xen kẽ, vẽ bằng 1 SVG duy nhất (không repeat) */ html.apini-dark .hero-target-mb1::after{ content:""; position:absolute; top:0; left:0; width:var(--cantonW); height:var(--cantonH); z-index:-1 !important; pointer-events:none; mix-blend-mode:screen; opacity:.95; animation: flagWaveMove 3.8s linear infinite; mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); mask-size: 200% 100%; mask-position: 0 0; /* CHỈNH kích thước sao: thay 0.48 trong scale(...) (nhỏ hơn: 0.44; to hơn: 0.52) */ background: url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ ") 0 0/100% 100% no-repeat; } /* 1) Khi hover hoặc có .is-waving -> bật filter “tung bay” */ html.apini-dark .hero-target-mb1.is-waving::before, html.apini-dark .hero-target-mb1:hover::after, html.apini-dark .hero-target-mb1.is-waving::after{ /* WAVE 1: làn sóng nhỏ, nhanh */ filter: url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ \ #w1"); will-change: filter, transform; } /* Hiệu ứng uốn sóng: làm cho mặt cờ gợn từ trái qua phải */ @keyframes flagWaveMove { 0% { transform: perspective(800px) rotateY(5deg) translateZ(0); mask-position: 0 0; filter: brightness(1); } 25% { transform: perspective(800px) rotateY(7deg) skewY(1deg); mask-position: 25% 0; filter: brightness(1.05); } 50% { transform: perspective(800px) rotateY(-6deg) skewY(-2deg); mask-position: 50% 0; filter: brightness(0.95); } 75% { transform: perspective(800px) rotateY(4deg) skewY(1deg); mask-position: 75% 0; filter: brightness(1.03); } 100% { transform: perspective(800px) rotateY(0deg); mask-position: 100% 0; filter: brightness(1); } } /* Khi không hover thì tạm dừng */ html.apini-dark .hero-target-mb1::before, html.apini-dark .hero-target-mb1::after { animation-play-state: paused; } /* Hover hoặc click (class .is-waving) thì bay */ html.apini-dark .hero-target-mb1:hover::before, html.apini-dark .hero-target-mb1.is-waving::before, html.apini-dark .hero-target-mb1:hover::after, html.apini-dark .hero-target-mb1.is-waving::after { animation-play-state: running; } /* Chuyển động vỡ biến mất */ @keyframes flagFadeOut { 0% { opacity: 1; filter: brightness(1); transform: scale(1) rotate(0deg); } 50% { opacity: 0.6; filter: brightness(1.3) blur(1px); transform: scale(1.05) rotate(3deg); } 100% { opacity: 0; filter: brightness(2) blur(6px); transform: scale(1.1) rotate(8deg); } } /* Khi rời Dark mode (Light bật) */ html:not(.apini-dark) .hero-target-mb1 { background: #fff !important; transition: background 1s ease; } /* Cờ tan biến */ html:not(.apini-dark) .hero-target-mb1::before, html:not(.apini-dark) .hero-target-mb1::after { animation: flagFadeOut 1s ease forwards; pointer-events: none; } /* giao diện điện thoại thì tắt cờ đi */ @media (max-width: 1024px) { .hero-target-mb1::before, .hero-target-mb1::after { display: none !important; content: none !important; animation: none !important; filter: none !important; } /* Nền chỉ giữ màu mặc định (đen hoặc trắng tuỳ theme) */ .hero-target-mb1 { background: #000 !important; /* hoặc #fff nếu light */ } } /* ========================= USA Tooltip (DESKTOP) ========================= */ .usa-hero-wrap-des .usa-liberty-tip{ position: absolute; z-index: 999999; left: var(--liberty-cx, 0px); top: calc(var(--liberty-bottom, 0px) + 10px); transform: translate(-50%, 0); opacity: 0; pointer-events: none; } /* hiện khi liberty dừng */ .usa-hero-wrap-des.liberty-stopped .usa-liberty-tip{ opacity: 1; transform: translate(-50%, 0) scale(1); } .usa-hero-wrap-des .usa-liberty-tip .bubble{ position: relative; background: #1e4f86; color: #fff; border: 2px solid #000; padding: 8px 14px; border-radius: 999px; font-weight: 700; text-align: center; white-space: nowrap; box-shadow: 0 10px 25px rgba(0,0,0,.25); } .usa-hero-wrap-des .usa-liberty-tip .bubble::after{ content:""; position:absolute; left: 50%; top: -10px; transform: translateX(-50%); width:0;height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #1e4f86; filter: drop-shadow(0 -2px 0 #000); } /* ========================= USA Tooltip (MOBILE) ========================= */ .usa-liberty-tip-mb{ position: fixed; z-index: 99; left: 0; top: 0; /* ✅ dùng dịch chuyển do JS tính */ transform: translate(var(--tip-tx, -50%), 0); opacity: 0; pointer-events: none; /* ✅ giới hạn bề ngang để không tràn */ max-width: min(92vw, 360px); } .usa-liberty-tip-mb.is-show{ opacity: 1; } .usa-liberty-tip-mb .bubble{ position: relative; background: #1e4f86; color: #fff; border: 2px solid #000; padding: 8px 14px; border-radius: 999px; font-weight: 700; text-align: left; white-space: nowrap; box-shadow: 0 10px 25px rgba(0,0,0,.25); /* ✅ cho phép text dài thì xuống dòng nhẹ */ max-width: 100%; overflow: visible !important; text-overflow: ellipsis; } /* ✅ mũi tên: vị trí theo biến --arrow-x */ .usa-liberty-tip-mb .bubble::after{ content:""; position:absolute; left: var(--arrow-x, 50%); top: -10px; transform: translateX(-50%); width:0;height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #1e4f86; filter: drop-shadow(0 -2px 0 #000); }