.elementor-3415 .elementor-element.elementor-element-82d47e7{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-82d47e7 *//* ============================================================ ĐỊNH DẠNG TRANG SỰ KIỆN ECONS x NHAT NGHE 12/08/2026 Sinh ngày 31/07/2026 bởi dong_goi_tach_js.py (đội PRJ-009). Dán toàn bộ nội dung file này vào ô CSS bổ sung của WordPress: Giao diện > Tuỳ biến > CSS bổ sung 🔴 ĐỪNG XOÁ KHỐI NÀY KHI TRANG SỰ KIỆN CÒN CHẠY. Xoá là trang sự kiện mất sạch định dạng, chữ chồng lên nhau. Sau sự kiện, muốn dọn thì xoá từ dòng này tới hết file. AN TOÀN CHO SITE: đã soát tự động 418 .elementor-3415 .elementor-element.elementor-element-82d47e7, 0 cái thoát ra ngoài thẻ bao #econs-lp-2026. Nghĩa là không quy tắc nào chạm tới phần còn lại của website ECONS. 🔴 KHÔNG SỬA TAY. Sửa index.html rồi chạy dong_goi_tach_js.py ============================================================ */ /* ============================================================ LỚP PHÒNG THỦ — đặt lại những thứ theme WordPress hay áp đè lên nội dung bên trong thẻ bao. Chỉ áp TRONG #econs-lp-2026, không rò ra ngoài. ============================================================ */ #econs-lp-2026,#econs-lp-2026 *,#econs-lp-2026 *::before,#econs-lp-2026 *::after{box-sizing:border-box} #econs-lp-2026{ all:initial; /* cắt đứt mọi KẾ THỪA từ theme */ display:block;position:relative;isolation:isolate; /* 🔴 KHÔNG dùng `contain:layout/paint` ở đây. Đã thử và đo: nó biến thẻ bao thành khối chứa cho con `position:fixed`, làm thanh điều hướng trên cùng và thanh CTA dưới đáy neo vào thẻ bao thay vì vào cửa sổ -> mất hẳn tính "dính". Nhốt bố cục kiểu đó nghe an toàn nhưng phá đúng 2 thành phần quan trọng nhất của trang. */ font-family:var(--elp-font);color:var(--elp-charcoal); font-size:16px;line-height:1.65;text-align:left;letter-spacing:normal; background:var(--elp-white);-webkit-font-smoothing:antialiased; } /* Theme nhắm THẲNG vào thẻ trần (vd `p{text-indent:2em}`) thì không phải là kế thừa, `all:initial` ở trên không chặn được — phải đè bằng chính độ ưu tiên cao hơn. Đã bắt được lỗi thật: đoạn văn trong trang bị thụt đầu dòng 2em do theme giả lập. */ #econs-lp-2026 *{margin:0;padding:0;border:0;font:inherit;color:inherit; background:transparent;text-transform:none;letter-spacing:inherit; text-indent:0;word-spacing:normal;white-space:normal;direction:ltr; vertical-align:baseline;list-style:none;text-decoration:none; text-align:inherit;visibility:visible;opacity:1;float:none;clear:none; box-shadow:none;text-shadow:none;outline:0;max-width:none;min-width:0} #econs-lp-2026 img{max-width:100%;height:auto;display:block;border-radius:0} #econs-lp-2026 a{text-decoration:none;box-shadow:none;cursor:pointer} #econs-lp-2026 a:hover{text-decoration:none} #econs-lp-2026 button,#econs-lp-2026 input,#econs-lp-2026 select,#econs-lp-2026 textarea{ font:inherit;color:inherit;background:none;border-radius:0; -webkit-appearance:none;appearance:none;text-transform:none} #econs-lp-2026 ul,#econs-lp-2026 ol{list-style:none} #econs-lp-2026 table{border-collapse:collapse;width:auto} #econs-lp-2026 svg{max-width:none;height:auto;display:block} #econs-lp-2026 h1,#econs-lp-2026 h2,#econs-lp-2026 h3,#econs-lp-2026 h4,#econs-lp-2026 p{ margin:0;padding:0;font-weight:inherit;clear:none} /* Thanh quản trị WordPress cao 32px (782px trở xuống là 46px) và nằm đè lên top:0. Thanh điều hướng của trang phải tụt xuống đúng bằng đó, nếu không nó chui xuống dưới và mất một nửa. `body.admin-bar` chỉ có khi người xem ĐANG ĐĂNG NHẬP, đúng lúc thanh đó hiện ra — khách vãng lai không dính. Ở đây chỉ ĐỌC body làm điều kiện, KHÔNG đặt thuộc tính nào lên body, nên không rò ra site. */ body.admin-bar #econs-lp-2026 .elp-nav{top:32px} @media screen and (max-width:782px){ body.admin-bar #econs-lp-2026 .elp-nav{top:46px} } #econs-lp-2026{ --navy:#003151; --navy-deep:#00263F; --gold:#E5A923; --gold-hover:#E8A200; /* Cam LOGO ECONS, đo trên favicon + logo ra cùng một mã, không dao động. 🔴 CHỈ dùng cho chi tiết KHÔNG có chữ đè lên. Làm nền cho chữ thường thì TRƯỢT chuẩn: navy trên cam = 4,11:1, trắng trên cam = 3,28:1 (cần 4,5). Chữ trắng chỉ đạt khi cỡ >=19px in đậm (chuẩn chữ lớn 3:1). */ --orange:#F26522; --amber:#E57830; --white:#FFFFFF; --grey-50:#F4F6F8; --charcoal:#313131; --slate:#69727D; --green:#1B7A4A; --red:#D64545; --line-on-navy:rgba(255,255,255,.16); --line-on-light:rgba(0,49,81,.14); --veil:rgba(0,38,63,.55); --font:'Roboto','Segoe UI',system-ui,-apple-system,sans-serif; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --r-xs:3px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-full:9999px; --shadow-sm:0 1px 3px rgba(0,49,81,.10); --shadow-md:0 6px 18px rgba(0,49,81,.10); --shadow-lg:0 18px 40px rgba(0,38,63,.22); --ease-out:cubic-bezier(0,0,.2,1); --ease-snappy:cubic-bezier(.2,0,0,1); --max:1160px; } /* ============================================================ DESIGN TOKENS : Brand DNA ECONS (01_BRAND_DNA.md) Palette khoá cứng: chỉ 11 hex dưới đây, không thêm màu mới. ============================================================ */ #econs-lp-2026{ --navy:#003151; --navy-deep:#00263F; --gold:#E5A923; --gold-hover:#E8A200; /* Cam LOGO ECONS, đo trên favicon + logo ra cùng một mã, không dao động. 🔴 CHỈ dùng cho chi tiết KHÔNG có chữ đè lên. Làm nền cho chữ thường thì TRƯỢT chuẩn: navy trên cam = 4,11:1, trắng trên cam = 3,28:1 (cần 4,5). Chữ trắng chỉ đạt khi cỡ >=19px in đậm (chuẩn chữ lớn 3:1). */ --orange:#F26522; --amber:#E57830; --white:#FFFFFF; --grey-50:#F4F6F8; --charcoal:#313131; --slate:#69727D; --green:#1B7A4A; --red:#D64545; --line-on-navy:rgba(255,255,255,.16); --line-on-light:rgba(0,49,81,.14); --veil:rgba(0,38,63,.55); --font:'Roboto','Segoe UI',system-ui,-apple-system,sans-serif; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --r-xs:3px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-full:9999px; --shadow-sm:0 1px 3px rgba(0,49,81,.10); --shadow-md:0 6px 18px rgba(0,49,81,.10); --shadow-lg:0 18px 40px rgba(0,38,63,.22); --ease-out:cubic-bezier(0,0,.2,1); --ease-snappy:cubic-bezier(.2,0,0,1); --max:1160px; } #econs-lp-2026 *,#econs-lp-2026 *::before,#econs-lp-2026 *::after{box-sizing:border-box;margin:0;padding:0} #econs-lp-2026{scroll-behavior:smooth;scroll-padding-top:78px;-webkit-text-size-adjust:100%} #econs-lp-2026{ font-family:var(--font); font-size:15px;line-height:1.55;color:var(--charcoal); background:var(--white); overflow-x:hidden; padding-bottom:76px; /* chừa chỗ cho sticky bar mobile */ } #econs-lp-2026 img{max-width:100%;height:auto;display:block} #econs-lp-2026 a{color:var(--navy);text-decoration:none} #econs-lp-2026 button,#econs-lp-2026 input,#econs-lp-2026 textarea,#econs-lp-2026 select{font:inherit;color:inherit} #econs-lp-2026 :focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:var(--r-xs)} #econs-lp-2026 .elp-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s5)} #econs-lp-2026 .elp-sec{padding:var(--s16) 0} #econs-lp-2026 .elp-sec--tight{padding:var(--s12) 0} #econs-lp-2026 .elp-sec--grey{background:var(--grey-50)} #econs-lp-2026 .elp-sec--navy{background:var(--navy);color:var(--white)} #econs-lp-2026 .elp-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- Typography ---------- */ #econs-lp-2026 h1,#econs-lp-2026 h2,#econs-lp-2026 h3{font-weight:700;letter-spacing:-.01em} #econs-lp-2026 h1{font-size:clamp(30px,5.2vw,52px);line-height:1.15} #econs-lp-2026 h2{font-size:clamp(25px,3.4vw,36px);line-height:1.22} #econs-lp-2026 h3{font-size:clamp(19px,2vw,24px);line-height:1.3;font-weight:700} #econs-lp-2026 p{font-size:clamp(15px,1.15vw,17px);line-height:1.62} #econs-lp-2026 .elp-eyebrow{ display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--gold);margin-bottom:var(--s4); } #econs-lp-2026 .elp-eyebrow--dark{color:var(--navy)} #econs-lp-2026 .elp-lead{font-size:clamp(16px,1.3vw,19px);color:var(--slate);max-width:64ch} #econs-lp-2026 .elp-sec--navy .elp-lead{color:rgba(255,255,255,.82)} #econs-lp-2026 .elp-h2-rule{width:56px;height:4px;background:linear-gradient(90deg,var(--orange),var(--gold-hover));border-radius:var(--r-full);margin:var(--s5) 0 var(--s6)} /* ---------- Buttons ---------- */ /* Bo tròn hoàn toàn kiểu viên thuốc — đo từ nút gốc trên econs.cloud (border-radius 35px/73px/20px, tức luôn bo hết cỡ). Chuyển động .3s cũng lấy theo nút gốc. */ #econs-lp-2026 .elp-btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); min-height:52px;padding:14px 28px;border:2px solid transparent; border-radius:var(--r-full);font-size:17px;font-weight:700;letter-spacing:.01em; cursor:pointer;text-align:center; transition:background-color .3s var(--ease-out),background-position .3s var(--ease-out), transform .3s var(--ease-out),box-shadow .3s var(--ease-out),color .3s var(--ease-out), border-color .3s var(--ease-out); } /* ============================================================ NÚT CHÍNH — gradient thương hiệu ECONS Nền: linear-gradient(44.44deg,#E8A200 7.79%,#E57830 94.18%) lấy từ thẻ nhãn của chính econs.cloud. Chữ BẮT BUỘC navy #003151: navy trên #E8A200 = 6,16:1 · navy trên #E57830 = 4,53:1 -> cả dải ĐẠT trắng trên #E8A200 = 2,19:1 · trắng trên #E57830 = 2,97:1 -> CẤM TUYỆT ĐỐI Bóng đổ ám cam lấy từ chính màu nút (rgba 229,120,48), không dùng bóng đen xám mặc định — đó là thứ làm nút trông "hàng chợ". ============================================================ */ #econs-lp-2026 .elp-btn--gold{ position:relative;overflow:hidden;isolation:isolate; color:var(--navy); background-image:linear-gradient(44.44deg,#E8A200 7.79%,#E57830 94.18%); background-size:180% 180%;background-position:0% 0%; box-shadow:0 6px 18px rgba(229,120,48,.34), 0 1px 0 rgba(255,255,255,.50) inset; /* viền sáng mép trên -> có khối */ } /* Vệt sáng quét qua: CHỈ nút chính, không rải chỗ khác */ #econs-lp-2026 .elp-btn--gold::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:-1; background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.40) 50%,transparent 64%); transform:translateX(-135%); } #econs-lp-2026 .elp-btn--gold:hover{ transform:translateY(-2px); background-position:100% 100%; /* nền 180% -> gradient dịch 80% bề rộng nút */ box-shadow:0 12px 28px rgba(229,120,48,.46), 0 1px 0 rgba(255,255,255,.58) inset; } #econs-lp-2026 .elp-btn--gold:hover::after{transform:translateX(135%);transition:transform .62s ease-out} #econs-lp-2026 .elp-btn--gold:active{ transform:translateY(1px); /* lún xuống */ box-shadow:0 3px 9px rgba(229,120,48,.38), 0 1px 0 rgba(255,255,255,.30) inset; transition-duration:.06s; /* phản hồi tức thì, không chờ .3s */ } /* 🔴 Vòng focus riêng cho nút gradient: vòng vàng mặc định gần như tàng hình trên nền cam. Dùng vòng ĐÔI navy-trong / trắng-ngoài để nhìn rõ trên CẢ nền navy lẫn nền trắng: navy vs nền nút cam = 6,4:1 · trắng vs nền trang navy = 13,5:1 (một vòng đơn màu nào cũng chết ở một trong hai nền) */ #econs-lp-2026 .elp-btn--gold:focus-visible{ outline:3px solid var(--navy);outline-offset:2px; box-shadow:0 0 0 6px rgba(255,255,255,.95), 0 8px 20px rgba(229,120,48,.40), 0 1px 0 rgba(255,255,255,.50) inset; } /* Nút phụ: chỉ đồng bộ bo góc + nhịp chuyển động, KHÔNG nâng thành nút chính */ #econs-lp-2026 .elp-btn--ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.45)} #econs-lp-2026 .elp-btn--ghost:hover{background:rgba(255,255,255,.12);border-color:var(--white);transform:translateY(-1px)} #econs-lp-2026 .elp-btn--ghost:active{transform:translateY(1px);transition-duration:.06s} #econs-lp-2026 .elp-btn--outline{background:transparent;color:var(--navy);border-color:var(--navy)} #econs-lp-2026 .elp-btn--outline:hover{background:var(--navy);color:var(--white);transform:translateY(-1px)} #econs-lp-2026 .elp-btn--outline:active{transform:translateY(1px);transition-duration:.06s} #econs-lp-2026 .elp-btn--lg{min-height:58px;padding:16px 34px;font-size:18px} #econs-lp-2026 .elp-btn--block{width:100%} #econs-lp-2026 .elp-link-arrow{ display:inline-flex;align-items:center;gap:var(--s2); font-weight:700;font-size:17px;color:var(--navy); border-bottom:2px solid var(--orange);padding-bottom:3px; transition:gap .15s var(--ease-out),color .15s var(--ease-out); } #econs-lp-2026 .elp-link-arrow:hover{gap:12px} #econs-lp-2026 .elp-sec--navy .elp-link-arrow{color:var(--gold)} /* ---------- Top nav ---------- */ #econs-lp-2026 .elp-nav{ position:fixed;top:0;left:0;right:0;z-index:60; background:rgba(0,38,63,.92);backdrop-filter:blur(8px); border-bottom:1px solid var(--line-on-navy); transition:background-color .25s var(--ease-out); } #econs-lp-2026 .elp-nav__in{display:flex;align-items:center;gap:var(--s6);min-height:66px} #econs-lp-2026 .elp-nav__brand{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto} #econs-lp-2026 .elp-nav__brand img{height:26px;width:auto} #econs-lp-2026 .elp-nav__x{color:rgba(255,255,255,.5);font-size:15px;font-weight:400} /* Logo Nhất Nghệ (bản kho nội bộ logo_nng_2026.png 1000x1000, đã tách nền trắng + cắt sát còn 717x624, hạ về 200x174 cho nhẹ = tỉ lệ 1,149:1). Đây là lockup xếp dọc (biểu tượng trên, chữ dưới) đứng cạnh ECONS là wordmark ngang 3,206:1 — cân BẰNG CHIỀU CAO sẽ làm NNG trông bé hẳn và phần chữ nhoè. Đã dựng ảnh thử ở đúng kích thước khung rồi nhìn (bài học L08): chọn chiều cao NNG ~1,31 lần ECONS thì hai logo cân thị giác và chữ còn đọc được. 🔴 Logo chỉ đặt trên nền navy — vàng #F0A818 trên trắng chỉ 2,04:1, TRƯỢT. */ #econs-lp-2026 .elp-logo-nng{width:auto;object-fit:contain;flex:0 0 auto} #econs-lp-2026 .elp-nav__brand .elp-logo-nng{height:34px} #econs-lp-2026 .elp-hero__hosts .elp-logo-nng{height:40px} #econs-lp-2026 .elp-ft__lock .elp-logo-nng{height:42px} #econs-lp-2026 .elp-nav__links{display:flex;gap:var(--s6);margin-left:auto;list-style:none} #econs-lp-2026 .elp-nav__links a{ color:rgba(255,255,255,.82);font-size:14px;font-weight:500;padding:6px 0; border-bottom:2px solid transparent;transition:color .15s var(--ease-out),border-color .15s var(--ease-out); } #econs-lp-2026 .elp-nav__links a:hover{color:var(--white);border-bottom-color:var(--gold)} #econs-lp-2026 .elp-nav__cta{margin-left:var(--s5);min-height:42px;padding:9px 18px;font-size:15px} @media (max-width:900px){#econs-lp-2026 .elp-nav__links{display:none}#econs-lp-2026 .elp-nav__cta{margin-left:auto}} @media (max-width:420px){#econs-lp-2026 .elp-nav__cta{display:none}} /* ============================================================ S1 HERO : nền navy nhiều lớp: lưới bản vẽ + vệt sáng chéo, không dùng gradient xám generic. ============================================================ */ #econs-lp-2026 .elp-hero{position:relative;background:var(--navy);color:var(--white);padding:calc(66px + var(--s16)) 0 var(--s16);overflow:hidden} /* ---------- PHỐI CẢNH SỰ KIỆN (vector, 3 lớp xa-giữa-gần) ---------- Dựng bằng SVG/CSS, KHÔNG dùng ảnh AI: trang mời dự một sự kiện có thật, khách mời có lãnh đạo DN và báo đài, đặt người giả lên là rủi ro không đáng. Lớp XA = đường chân trời công trình đang xây + 2 cần cẩu tháp Lớp GIỮA = vệt dữ liệu BOQ → Kho → Công nợ → Dòng tiền + ô dashboard Lớp GẦN = 3 nón sáng sân khấu hắt từ trên xuống Cuối cùng là lớp phủ tối (scrim) bên trái để chữ luôn đọc được — quy tắc: chỗ nào có chữ thì nền phải TỐI ĐI, tuyệt đối không sáng lên. */ #econs-lp-2026 .elp-hero__scene{position:absolute;inset:0;pointer-events:none;overflow:hidden} #econs-lp-2026 .elp-hero__grid{ position:absolute;inset:0;pointer-events:none;opacity:.5; background-image: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px), linear-gradient(rgba(229,169,35,.10) 1px,transparent 1px), linear-gradient(90deg,rgba(229,169,35,.10) 1px,transparent 1px); background-size:32px 32px,32px 32px,160px 160px,160px 160px; -webkit-mask-image:radial-gradient(120% 90% at 18% 0%,#313131 0%,transparent 78%); mask-image:radial-gradient(120% 90% at 18% 0%,#313131 0%,transparent 78%); } /* --- Lớp XA: đường chân trời --- */ #econs-lp-2026 .elp-scn-city{position:absolute;left:0;bottom:0;width:100%;height:clamp(158px,22vw,290px);display:block} #econs-lp-2026 .elp-scn-city path,#econs-lp-2026 .elp-scn-city rect{vector-effect:non-scaling-stroke} #econs-lp-2026 .elp-scn-far{stroke:rgba(255,255,255,.085);stroke-width:1;fill:none} #econs-lp-2026 .elp-scn-mid{stroke:rgba(255,255,255,.15);stroke-width:1;fill:rgba(0,25,42,.55)} #econs-lp-2026 .elp-scn-near{stroke:rgba(255,255,255,.22);stroke-width:1.2;fill:rgba(0,20,34,.82)} #econs-lp-2026 .elp-scn-crane{stroke:rgba(229,169,35,.34);stroke-width:1.1;fill:none} #econs-lp-2026 .elp-scn-crane rect{fill:rgba(0,20,34,.9)} /* sương chân trời: cho công trình mọc lên từ nền, không dán bẹt vào đáy */ #econs-lp-2026 .elp-scn-haze{position:absolute;left:0;right:0;bottom:0;height:clamp(158px,22vw,290px); background:linear-gradient(0deg,rgba(0,22,37,.62) 0%,rgba(0,22,37,.16) 46%,rgba(0,22,37,0) 100%)} /* --- Lớp GIỮA: vệt dữ liệu --- */ #econs-lp-2026 .elp-scn-data{position:absolute;right:0;bottom:13%;width:min(35vw,485px);height:auto;display:block} #econs-lp-2026 .elp-scn-area{stroke:none} #econs-lp-2026 .elp-scn-axis{fill:none;stroke:rgba(255,255,255,.20);stroke-width:1} #econs-lp-2026 .elp-scn-flow{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;opacity:.8; stroke-dasharray:640;stroke-dashoffset:640;animation:elp-scnDraw 2.1s .4s ease-out forwards} #econs-lp-2026 .elp-scn-node .elp-scn-ring{fill:none;stroke:rgba(229,169,35,.42);stroke-width:1.4} #econs-lp-2026 .elp-scn-node .elp-scn-dot{fill:var(--orange);stroke:none;opacity:.95} #econs-lp-2026 .elp-scn-lb text{fill:rgba(229,169,35,.52);font:700 11.5px/1 var(--font);letter-spacing:.13em} #econs-lp-2026 .elp-scn-frame{fill:rgba(0,20,34,.5);stroke:rgba(255,255,255,.19);stroke-width:1} #econs-lp-2026 .elp-scn-frame path{fill:none;stroke:rgba(229,169,35,.5)} #econs-lp-2026 .elp-scn-bars rect{fill:rgba(229,169,35,.40);stroke:none} #econs-lp-2026 .elp-scn-pulse{fill:var(--gold);opacity:0} @keyframes elp-scnDraw{to{stroke-dashoffset:0}} @supports (offset-path:path("M0 0L1 1")){ #econs-lp-2026 .elp-scn-pulse{ offset-path:path("M52 214C104 210 142 200 188 182S276 154 322 134S412 104 462 66"); offset-rotate:0deg;animation:elp-scnPulse 5.6s 2.5s ease-in-out infinite; } } @keyframes elp-scnPulse{ 0%{offset-distance:0%;opacity:0} 10%{opacity:.95} 86%{opacity:.95} 100%{offset-distance:100%;opacity:0} } /* --- Lớp GẦN: 3 nón sáng sân khấu, KHÁC nhau về góc/bề rộng/sắc --- */ #econs-lp-2026 .elp-hero__lights{position:absolute;inset:0} #econs-lp-2026 .elp-hero__lights i{position:absolute;top:-12%;height:108%;display:block;filter:blur(30px); mix-blend-mode:screen;animation:elp-scnBreath 11s ease-in-out infinite} #econs-lp-2026 .elp-hero__lights i:nth-child(1){left:4%;width:23%; clip-path:polygon(46% 0,58% 0,88% 100%,0 100%); background:linear-gradient(180deg,rgba(229,169,35,.09),rgba(229,169,35,0) 54%)} #econs-lp-2026 .elp-hero__lights i:nth-child(2){left:45%;width:33%;animation-duration:14s;animation-delay:-4s; clip-path:polygon(40% 0,60% 0,100% 100%,0 100%); background:linear-gradient(180deg,rgba(229,169,35,.23),rgba(229,169,35,0) 70%)} #econs-lp-2026 .elp-hero__lights i:nth-child(3){right:3%;width:25%;animation-duration:17s;animation-delay:-8s; clip-path:polygon(52% 0,67% 0,100% 100%,13% 100%); background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,0) 62%)} @keyframes elp-scnBreath{0%,100%{opacity:.82}50%{opacity:1}} /* --- Lớp phủ bảo vệ chữ: bên trái TỐI ĐI để tương phản tăng, không giảm --- */ #econs-lp-2026 .elp-hero__scrim{position:absolute;inset:0; background:linear-gradient(101deg, rgba(0,28,47,.92) 0%,rgba(0,28,47,.74) 27%,rgba(0,28,47,.28) 46%,rgba(0,28,47,0) 60%)} #econs-lp-2026 .elp-hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:var(--s16);align-items:start} #econs-lp-2026 .elp-hero__eyebrow{ display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;line-height:1.5; color:var(--gold);border:1px solid rgba(229,169,35,.55);border-radius:var(--r-full); padding:7px 15px;margin-bottom:var(--s6); /* Nền tối riêng cho viên nhãn: chùm sáng đi qua đây làm nền sáng lên, đo được 4,47:1 ở khổ 320px (dưới chuẩn 4,5). Không hạ độ sáng chùm sáng mà kê thêm nền tối ngay dưới chữ -> lên 6,5:1 mà phối cảnh vẫn nguyên. */ background:rgba(0,28,47,.55); } #econs-lp-2026 .elp-hero h1{margin-bottom:var(--s5)} #econs-lp-2026 .elp-hero h1 .elp-hl{color:var(--gold)} #econs-lp-2026 .elp-hero__sub{font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:rgba(255,255,255,.86);max-width:60ch;margin-bottom:var(--s8)} #econs-lp-2026 .elp-hero__for{ font-size:14px;color:rgba(255,255,255,.72);line-height:1.7; border-left:3px solid var(--orange);padding-left:var(--s4);margin-bottom:var(--s8);max-width:56ch; } #econs-lp-2026 .elp-hero__for b{color:var(--white);font-weight:500} #econs-lp-2026 .elp-hero__cta{display:flex;flex-wrap:wrap;gap:var(--s4);margin-bottom:var(--s5)} #econs-lp-2026 .elp-hero__friction{font-size:13.5px;color:rgba(255,255,255,.66);max-width:52ch;line-height:1.6} #econs-lp-2026 .elp-hero__hosts{ display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap; margin-top:var(--s12);padding-top:var(--s6);border-top:1px solid var(--line-on-navy); } #econs-lp-2026 .elp-hero__hosts img{height:30px;width:auto} #econs-lp-2026 .elp-hero__hostline{font-size:13px;color:rgba(255,255,255,.7);line-height:1.5} /* Khối thông tin sự kiện nổi : điểm neo thị giác của hero */ #econs-lp-2026 .elp-evcard{ position:relative;background:var(--navy-deep); border:1px solid var(--line-on-navy);border-left:5px solid var(--gold); border-radius:var(--r-lg);padding:var(--s8) var(--s6) var(--s6); box-shadow:var(--shadow-lg); } #econs-lp-2026 .elp-evcard__tag{ position:absolute;top:-14px;left:var(--s6); background:var(--gold);color:var(--navy); font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; padding:6px 13px;border-radius:var(--r-full); } #econs-lp-2026 .elp-evrow{display:flex;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line-on-navy)} #econs-lp-2026 .elp-evrow:last-of-type{border-bottom:0} #econs-lp-2026 .elp-evrow__ic{ flex:0 0 38px;height:38px;display:flex;align-items:center;justify-content:center; background:rgba(229,169,35,.14);border-radius:var(--r-sm);font-size:18px;line-height:1; } #econs-lp-2026 .elp-evrow__lb{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:3px} #econs-lp-2026 .elp-evrow__vl{font-size:15.5px;color:var(--white);line-height:1.5} #econs-lp-2026 .elp-evrow__vl b{color:var(--gold);font-weight:700} #econs-lp-2026 .elp-cd{margin-top:var(--s6);background:rgba(0,49,81,.7);border:1px solid var(--line-on-navy);border-radius:var(--r-md);padding:var(--s5)} #econs-lp-2026 .elp-cd__lb{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700;margin-bottom:var(--s3);display:block} #econs-lp-2026 .elp-cd__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)} #econs-lp-2026 .elp-cd__cell{background:rgba(255,255,255,.06);border-radius:var(--r-sm);padding:10px 4px;text-align:center} #econs-lp-2026 .elp-cd__n{display:block;font-size:clamp(22px,3vw,30px);font-weight:700;color:var(--gold);line-height:1.25;font-variant-numeric:tabular-nums} #econs-lp-2026 .elp-cd__u{display:block;font-size:11px;color:rgba(255,255,255,.66);letter-spacing:.04em;margin-top:2px} #econs-lp-2026 .elp-cd__note{font-size:12.5px;color:rgba(255,255,255,.62);margin-top:var(--s3);line-height:1.5} #econs-lp-2026 .elp-cd--over .elp-cd__grid{display:none} #econs-lp-2026 .elp-cd__over{display:none;font-size:14px;color:var(--gold);line-height:1.55} #econs-lp-2026 .elp-cd--over .elp-cd__over{display:block} @media (max-width:980px){ #econs-lp-2026 .elp-hero__in{grid-template-columns:1fr;gap:var(--s10)} #econs-lp-2026 .elp-hero{padding-top:calc(66px + var(--s10))} } /* ============================================================ S2 TICKER : dải số liệu chạy ngang ============================================================ */ #econs-lp-2026 .elp-ticker{background:var(--navy-deep);color:var(--white);padding:var(--s8) 0 var(--s6);border-top:1px solid var(--line-on-navy)} #econs-lp-2026 .elp-ticker__eyebrow{text-align:center;display:block} #econs-lp-2026 .elp-ticker__mask{ overflow:hidden;margin-top:var(--s5); -webkit-mask-image:linear-gradient(90deg,transparent,#313131 7%,#313131 93%,transparent); mask-image:linear-gradient(90deg,transparent,#313131 7%,#313131 93%,transparent); } #econs-lp-2026 .elp-ticker__track{display:flex;width:max-content;animation:elp-marquee 42s linear infinite} #econs-lp-2026 .elp-ticker__mask:hover .elp-ticker__track{animation-play-state:paused} #econs-lp-2026 .elp-ticker__seq{display:flex;align-items:center;flex:0 0 auto} #econs-lp-2026 .elp-ticker__item{ display:inline-flex;align-items:center;gap:var(--s3); padding:0 var(--s6);font-size:clamp(16px,1.5vw,20px);font-weight:700;white-space:nowrap;color:var(--white); } #econs-lp-2026 .elp-ticker__item::after{content:"";width:6px;height:6px;border-radius:var(--r-full);background:var(--orange);margin-left:var(--s6)} #econs-lp-2026 .elp-ticker__item b{color:var(--gold);font-weight:700} #econs-lp-2026 .elp-ticker__note{text-align:center;font-size:12.5px;color:rgba(255,255,255,.55);margin-top:var(--s5)} @keyframes elp-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ============================================================ S3 NỖI ĐAU ============================================================ */ #econs-lp-2026 .elp-pain__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s16);align-items:center} #econs-lp-2026 .elp-pull{ position:relative;background:var(--navy);color:var(--white); border-radius:var(--r-lg);padding:var(--s10) var(--s8) var(--s8);box-shadow:var(--shadow-lg); } #econs-lp-2026 .elp-pull::before{ content:"";position:absolute;top:var(--s6);left:var(--s8);width:44px;height:5px;background:linear-gradient(90deg,var(--orange),var(--gold-hover));border-radius:var(--r-full); } #econs-lp-2026 .elp-pull p{font-size:clamp(17px,1.7vw,22px);line-height:1.55;color:var(--white);font-weight:500} #econs-lp-2026 .elp-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);margin:var(--s12) 0 var(--s8)} #econs-lp-2026 .elp-stat{border-top:4px solid var(--gold);padding-top:var(--s4)} #econs-lp-2026 .elp-stat__n{display:block;font-size:clamp(38px,6vw,58px);font-weight:700;line-height:1.12;color:var(--navy);font-variant-numeric:tabular-nums;padding-block:2px} #econs-lp-2026 .elp-stat__lb{display:block;font-size:15px;color:var(--slate);line-height:1.5;margin-top:var(--s2);max-width:32ch} #econs-lp-2026 .elp-pain__body{max-width:70ch} #econs-lp-2026 .elp-bridge{ margin-top:var(--s8);background:var(--grey-50);border-left:5px solid var(--amber); border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--s5) var(--s6); } #econs-lp-2026 .elp-bridge p{font-weight:500;color:var(--navy);font-size:clamp(16px,1.3vw,19px)} @media (max-width:900px){#econs-lp-2026 .elp-pain__top{grid-template-columns:1fr;gap:var(--s8)}#econs-lp-2026 .elp-stats{grid-template-columns:1fr;gap:var(--s8)}} /* ============================================================ S4 TABS : phân nhánh 3 nhóm ============================================================ */ #econs-lp-2026 .elp-tabs{margin-top:var(--s8)} #econs-lp-2026 .elp-tabs__btns{display:flex;gap:var(--s2);border-bottom:2px solid var(--line-on-light);flex-wrap:wrap} #econs-lp-2026 .elp-tabbtn{ background:transparent;border:0;border-bottom:3px solid transparent;margin-bottom:-2px; padding:14px var(--s5);font-size:16px;font-weight:700;color:var(--slate);cursor:pointer; transition:color .15s var(--ease-out),border-color .15s var(--ease-out),background-color .15s var(--ease-out); border-radius:var(--r-sm) var(--r-sm) 0 0; } #econs-lp-2026 .elp-tabbtn:hover{color:var(--navy);background:var(--grey-50)} #econs-lp-2026 .elp-tabbtn[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--gold)} #econs-lp-2026 .elp-tabpanel{padding-top:var(--s8)} #econs-lp-2026 .elp-tabpanel[hidden]{display:none} #econs-lp-2026 .elp-tabpanel__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s10);align-items:start} #econs-lp-2026 .elp-tabpanel__tag{ display:inline-block;background:var(--navy);color:var(--white);font-size:12.5px;font-weight:700; letter-spacing:.05em;padding:6px 13px;border-radius:var(--r-full);margin-bottom:var(--s4); } #econs-lp-2026 .elp-checks{list-style:none;display:grid;gap:var(--s4)} #econs-lp-2026 .elp-checks li{position:relative;padding-left:38px;font-size:16px;line-height:1.55;color:var(--charcoal)} #econs-lp-2026 .elp-checks li::before{ content:"";position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:var(--r-full); background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.elp-w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23FFFFFF'/%3E%3C/svg%3E") center/15px no-repeat; } #econs-lp-2026 .elp-anim-fade{animation:elp-fadeUp .28s var(--ease-out) both} @keyframes elp-fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media (max-width:900px){#econs-lp-2026 .elp-tabpanel__in{grid-template-columns:1fr;gap:var(--s6)}#econs-lp-2026 .elp-tabbtn{flex:1 1 100%;text-align:left}} /* ============================================================ S5 TIMELINE 9 bước ============================================================ */ #econs-lp-2026 .elp-flow{margin-top:var(--s12);position:relative} #econs-lp-2026 .elp-flow__rail{position:absolute;left:0;right:0;top:26px;height:3px;background:rgba(255,255,255,.14);border-radius:var(--r-full)} #econs-lp-2026 .elp-flow__rail::after{ content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--orange),var(--gold));border-radius:var(--r-full); transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease-out); } #econs-lp-2026 .elp-flow.elp-is-in .elp-flow__rail::after{transform:scaleX(1)} #econs-lp-2026 .elp-flow__steps{position:relative;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:var(--s3);list-style:none;margin:0;padding:0} #econs-lp-2026 .elp-flow__steps>li::marker{content:""} #econs-lp-2026 .elp-step{text-align:left} #econs-lp-2026 .elp-step__dot{ width:54px;height:54px;border-radius:var(--r-full);background:var(--navy-deep); border:3px solid var(--gold);color:var(--gold); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px; margin-bottom:var(--s4);font-variant-numeric:tabular-nums; } #econs-lp-2026 .elp-step__t{display:block;font-size:15px;font-weight:700;color:var(--white);line-height:1.3;margin-bottom:5px} #econs-lp-2026 .elp-step__d{display:block;font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.45} #econs-lp-2026 .elp-flow__nums{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s10);margin-top:var(--s12);padding-top:var(--s6);border-top:1px solid var(--line-on-navy)} #econs-lp-2026 .elp-flow__num b{display:block;font-size:clamp(26px,3.4vw,38px);color:var(--gold);line-height:1.25;padding-block:2px} #econs-lp-2026 .elp-flow__num span{font-size:13.5px;color:rgba(255,255,255,.7)} @media (max-width:1100px){ #econs-lp-2026 .elp-flow__rail{display:none} #econs-lp-2026 .elp-flow__steps{grid-template-columns:1fr;gap:0} #econs-lp-2026 .elp-step{display:grid;grid-template-columns:54px 1fr;gap:var(--s4);align-items:start;position:relative;padding-bottom:var(--s5)} #econs-lp-2026 .elp-step:not(:last-child)::after{content:"";position:absolute;left:26px;top:56px;bottom:2px;width:3px;background:rgba(229,169,35,.4)} #econs-lp-2026 .elp-step__dot{margin-bottom:0} } @media (max-width:640px){#econs-lp-2026 .elp-step__d{display:none}} /* ============================================================ S6 LIVE DEMO ============================================================ */ #econs-lp-2026 .elp-demo__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s16);align-items:center} #econs-lp-2026 .elp-narr p{font-size:clamp(16px,1.4vw,20px);line-height:1.62;margin-bottom:var(--s5);max-width:56ch} #econs-lp-2026 .elp-narr p:first-child{font-size:clamp(19px,1.9vw,25px);font-weight:700;color:var(--navy);line-height:1.35} #econs-lp-2026 .elp-aside-box{margin-top:var(--s8);background:var(--grey-50);border-radius:var(--r-md);padding:var(--s6);border-top:4px solid var(--navy)} #econs-lp-2026 .elp-aside-box h3{font-size:19px;margin-bottom:var(--s3)} /* Khung mô phỏng dashboard : minh hoạ, không phải ảnh chụp sản phẩm thật */ #econs-lp-2026 .elp-mock{background:var(--navy);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow-lg);border:1px solid var(--line-on-navy)} #econs-lp-2026 .elp-mock__bar{display:flex;align-items:center;gap:var(--s2);padding-bottom:var(--s4);border-bottom:1px solid var(--line-on-navy);margin-bottom:var(--s5)} #econs-lp-2026 .elp-mock__dot{width:9px;height:9px;border-radius:var(--r-full);background:rgba(255,255,255,.28)} #econs-lp-2026 .elp-mock__title{margin-left:var(--s3);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.66);font-weight:700} #econs-lp-2026 .elp-mock__kpi{background:var(--navy-deep);border-radius:var(--r-md);padding:var(--s5);border-left:4px solid var(--gold)} #econs-lp-2026 .elp-mock__kpi span{display:block;font-size:12.5px;color:rgba(255,255,255,.62);letter-spacing:.05em;text-transform:uppercase;font-weight:700} #econs-lp-2026 .elp-mock__kpi b{display:block;font-size:clamp(28px,3.6vw,42px);color:var(--gold);line-height:1.3;padding-block:2px;font-variant-numeric:tabular-nums} #econs-lp-2026 .elp-mock__kpi i{display:block;font-style:normal;font-size:12.5px;color:rgba(255,255,255,.5);margin-top:2px} #econs-lp-2026 .elp-mock__bars{display:flex;align-items:flex-end;gap:var(--s3);height:104px;margin-top:var(--s5)} #econs-lp-2026 .elp-mock__bars div{flex:1;background:rgba(255,255,255,.14);border-radius:var(--r-xs) var(--r-xs) 0 0;transform-origin:bottom;transform:scaleY(.12);transition:transform .8s var(--ease-out)} #econs-lp-2026 .elp-mock__bars div:nth-child(4){background:var(--gold)} #econs-lp-2026 .elp-is-in .elp-mock__bars div{transform:scaleY(1)} #econs-lp-2026 .elp-mock__bars div:nth-child(1){height:38%;transition-delay:.05s} #econs-lp-2026 .elp-mock__bars div:nth-child(2){height:58%;transition-delay:.12s} #econs-lp-2026 .elp-mock__bars div:nth-child(3){height:44%;transition-delay:.19s} #econs-lp-2026 .elp-mock__bars div:nth-child(4){height:96%;transition-delay:.26s} #econs-lp-2026 .elp-mock__bars div:nth-child(5){height:66%;transition-delay:.33s} #econs-lp-2026 .elp-mock__bars div:nth-child(6){height:80%;transition-delay:.4s} #econs-lp-2026 .elp-mock__cap{font-size:12px;color:var(--slate);text-align:center;margin-top:var(--s4);line-height:1.5} @media (max-width:900px){#econs-lp-2026 .elp-demo__in{grid-template-columns:1fr;gap:var(--s10)}} /* ============================================================ S7 DIỄN GIẢ : split bio 2 cột ============================================================ */ #econs-lp-2026 .elp-spk{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12);margin-top:var(--s12)} #econs-lp-2026 .elp-spk__one{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s6);align-items:start} #econs-lp-2026 .elp-ph{ aspect-ratio:1/1.12;background:var(--navy);border-radius:var(--r-md); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2); border:1px solid var(--line-on-light);position:relative;overflow:hidden; } #econs-lp-2026 .elp-ph::after{content:"";position:absolute;inset:auto 0 0 0;height:5px;background:var(--gold);z-index:1} /* object-fit:cover là bắt buộc. Thiếu nó thì ảnh không đúng tỉ lệ khung sẽ bị BÓP MÉO (mặt dẹt lại), chứ không phải cắt bớt. Đã đo thực tế trên Chromium. */ #econs-lp-2026 .elp-ph__img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;border-radius:inherit} #econs-lp-2026 .elp-spk__name{font-size:21px;font-weight:700;color:var(--navy);line-height:1.3} #econs-lp-2026 .elp-spk__role{display:block;font-size:14px;font-weight:700;color:var(--gold);letter-spacing:.04em;text-transform:uppercase;margin:6px 0 var(--s3)} #econs-lp-2026 .elp-spk__tr{font-size:15.5px;font-weight:700;color:var(--charcoal);border-left:3px solid var(--gold);padding-left:var(--s3);margin-bottom:var(--s3);line-height:1.45} #econs-lp-2026 .elp-spk__bio{font-size:15.5px;color:var(--slate);line-height:1.6} @media (max-width:900px){#econs-lp-2026 .elp-spk{grid-template-columns:1fr;gap:var(--s10)}} @media (max-width:480px){#econs-lp-2026 .elp-spk__one{grid-template-columns:110px minmax(0,1fr);gap:var(--s4)}} /* ============================================================ S8 BẢNG QUÀ TẶNG ============================================================ */ #econs-lp-2026 .elp-tblwrap{overflow-x:auto;margin-top:var(--s8);border:1px solid var(--line-on-light);border-radius:var(--r-md);background:var(--white)} #econs-lp-2026 table.elp-gifts{width:100%;border-collapse:collapse;min-width:640px} #econs-lp-2026 table.elp-gifts th{ background:var(--navy);color:var(--white);text-align:left;font-size:12.5px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;padding:14px var(--s5); } #econs-lp-2026 table.elp-gifts td{padding:var(--s5);border-bottom:1px solid var(--line-on-light);vertical-align:top;font-size:15.5px;line-height:1.55} #econs-lp-2026 table.elp-gifts tr:last-child td{border-bottom:0} #econs-lp-2026 table.elp-gifts tr:nth-child(even) td{background:var(--grey-50)} #econs-lp-2026 .elp-gifts__no{font-weight:700;color:var(--gold);font-size:20px;width:52px;font-variant-numeric:tabular-nums} #econs-lp-2026 .elp-gifts__nm{font-weight:700;color:var(--navy)} #econs-lp-2026 .elp-gifts__vl{white-space:normal;font-weight:700;color:var(--navy)} #econs-lp-2026 .elp-gifts__vl.elp-is-limited{color:var(--red)} #econs-lp-2026 .elp-warnline{display:flex;gap:var(--s3);align-items:flex-start;margin-top:var(--s5);font-size:13.5px;color:var(--red);font-weight:700;line-height:1.5} /* ============================================================ S9 ĐỐI TÁC & BÁO ĐÀI ============================================================ */ #econs-lp-2026 .elp-press__label{ display:inline-block;background:rgba(229,169,35,.16);color:var(--gold); border:1px solid rgba(229,169,35,.5);border-radius:var(--r-full); font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:7px 15px;margin-bottom:var(--s5); } #econs-lp-2026 .elp-press__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s12);align-items:center} #econs-lp-2026 .elp-press__pts{list-style:none;display:grid;gap:var(--s4)} #econs-lp-2026 .elp-press__pts li{display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line-on-navy);align-items:baseline} #econs-lp-2026 .elp-press__pts li:last-child{border-bottom:0} #econs-lp-2026 .elp-press__pts b{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)} #econs-lp-2026 .elp-press__pts span{font-size:15.5px;color:rgba(255,255,255,.86);line-height:1.55} #econs-lp-2026 .elp-press__hint{font-size:13.5px;color:rgba(255,255,255,.66);line-height:1.6;margin-top:var(--s6);max-width:62ch} @media (max-width:900px){#econs-lp-2026 .elp-press__in{grid-template-columns:1fr;gap:var(--s8)}#econs-lp-2026 .elp-press__pts li{grid-template-columns:1fr;gap:4px}} /* ============================================================ S10 INFO PANEL ============================================================ */ #econs-lp-2026 .elp-info{margin-top:var(--s8);border:1px solid var(--line-on-light);border-radius:var(--r-md);overflow:hidden;background:var(--white)} #econs-lp-2026 .elp-info__row{display:grid;grid-template-columns:210px minmax(0,1fr);border-bottom:1px solid var(--line-on-light)} #econs-lp-2026 .elp-info__row:last-child{border-bottom:0} #econs-lp-2026 .elp-info__k{background:var(--grey-50);padding:var(--s4) var(--s5);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)} #econs-lp-2026 .elp-info__v{padding:var(--s4) var(--s5);font-size:15.5px;line-height:1.55} #econs-lp-2026 .elp-info__v b{color:var(--navy)} #econs-lp-2026 .elp-info__note{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s5);background:rgba(27,122,74,.1);color:var(--green);font-weight:700;font-size:14.5px;padding:11px var(--s5);border-radius:var(--r-sm)} @media (max-width:640px){#econs-lp-2026 .elp-info__row{grid-template-columns:1fr}#econs-lp-2026 .elp-info__k{padding-bottom:0;background:var(--white)}} /* ============================================================ S11 FAQ accordion ============================================================ */ #econs-lp-2026 .elp-faq{margin-top:var(--s8);max-width:900px} #econs-lp-2026 .elp-faq details{border-bottom:1px solid var(--line-on-light);background:var(--white)} #econs-lp-2026 .elp-faq details[open]{background:var(--grey-50)} #econs-lp-2026 .elp-faq summary{ list-style:none;cursor:pointer;display:flex;gap:var(--s4);align-items:flex-start; padding:var(--s5) var(--s5) var(--s5) 0;font-size:17px;font-weight:700;color:var(--navy);line-height:1.45; } #econs-lp-2026 .elp-faq details[open] summary{padding-left:var(--s5)} #econs-lp-2026 .elp-faq summary::-webkit-details-marker{display:none} #econs-lp-2026 .elp-faq summary::after{ content:"+";margin-left:auto;flex:0 0 auto;font-size:26px;font-weight:400;color:var(--gold);line-height:1; transition:transform .2s var(--ease-snappy); } #econs-lp-2026 .elp-faq details[open] summary::after{content:"\2212";transform:none} #econs-lp-2026 .elp-faq__a{padding:0 var(--s5) var(--s6) var(--s5);font-size:15.5px;color:var(--slate);line-height:1.65;max-width:82ch} /* ============================================================ S12 FORM ============================================================ */ #econs-lp-2026 .elp-formsec{background:var(--grey-50)} #econs-lp-2026 .elp-form__head{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s10);align-items:end;margin-bottom:var(--s8)} #econs-lp-2026 .elp-cd--mini{margin-top:0;background:var(--navy);border-color:var(--line-on-navy)} #econs-lp-2026 .elp-card-form{background:var(--white);border:1px solid var(--line-on-light);border-radius:var(--r-lg);box-shadow:var(--shadow-md);overflow:hidden} #econs-lp-2026 .elp-fs{border:0;padding:var(--s8)} #econs-lp-2026 .elp-fs+.elp-fs{border-top:1px solid var(--line-on-light);background:var(--grey-50)} #econs-lp-2026 .elp-fs legend{ font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--navy); background:var(--gold);border-radius:var(--r-full);padding:7px 15px;margin-bottom:var(--s6); } /* margin-bottom của chính .grid2: khi xuống 1 cột, trường cuối trong nhóm bị ".fld:last-child{margin-bottom:0}" cắt mất lề, làm 2 trường dính sát 0px. */ #econs-lp-2026 .elp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);margin-bottom:var(--s6)} #econs-lp-2026 .elp-grid2:last-child{margin-bottom:0} /* .grid2 tự lo khoảng cách. Nếu để .fld giữ margin riêng thì trường cuối nhóm bị ".fld:last-child{margin-bottom:0}" cắt lề, khi xuống 1 cột sẽ dính sát 0px. */ #econs-lp-2026 .elp-grid2>.elp-fld{margin-bottom:0} #econs-lp-2026 .elp-fld{margin-bottom:var(--s6)} #econs-lp-2026 .elp-fld:last-child{margin-bottom:0} #econs-lp-2026 .elp-fld label,#econs-lp-2026 .elp-fld .elp-lbl{display:block;font-size:14.5px;font-weight:700;color:var(--navy);margin-bottom:var(--s2);line-height:1.4} #econs-lp-2026 .elp-req{color:var(--red)} #econs-lp-2026 .elp-opt{font-weight:400;color:var(--slate);font-size:13px} #econs-lp-2026 .elp-inp{ width:100%;min-height:50px;padding:12px var(--s4); border:1.5px solid var(--line-on-light);border-radius:var(--r-sm);background:var(--white); font-size:16px;color:var(--charcoal); transition:border-color .15s var(--ease-out),box-shadow .15s var(--ease-out); } #econs-lp-2026 textarea.elp-inp{min-height:104px;resize:vertical;line-height:1.55} #econs-lp-2026 .elp-inp::placeholder{color:var(--slate);opacity:.85} #econs-lp-2026 .elp-inp:hover{border-color:var(--slate)} /* KHÔNG đặt outline:none ở đây. Bản trước tắt outline nên 4 ô nhập chữ là điểm dừng bàn phím DUY NHẤT trên trang không có viền vàng, người dùng bàn phím mất dấu con trỏ. Giữ đúng viền vàng 3px như 42 điểm dừng còn lại, cộng thêm quầng xanh cho dễ thấy. */ #econs-lp-2026 .elp-inp:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(0,49,81,.12)} #econs-lp-2026 .elp-inp:focus-visible{outline:3px solid var(--gold);outline-offset:2px} #econs-lp-2026 .elp-fld.elp-is-err .elp-inp{border-color:var(--red);box-shadow:0 0 0 4px rgba(214,69,69,.12)} #econs-lp-2026 .elp-err{display:none;font-size:13.5px;color:var(--red);font-weight:700;margin-top:6px;line-height:1.45} #econs-lp-2026 .elp-fld.elp-is-err .elp-err{display:block} #econs-lp-2026 .elp-opts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s4)} /* Specificity phải cao hơn ".fld label" ở trên, nếu không ô chọn bị ép về display:block + in đậm */ #econs-lp-2026 .elp-fld .elp-opt-item{ display:flex;gap:var(--s3);align-items:flex-start; padding:12px var(--s4);border:1.5px solid var(--line-on-light);border-radius:var(--r-sm); background:var(--white);cursor:pointer; font-size:15px;font-weight:400;line-height:1.45;color:var(--charcoal);margin-bottom:0; transition:border-color .15s var(--ease-out),background-color .15s var(--ease-out); } #econs-lp-2026 .elp-fld .elp-opt-item:hover{border-color:var(--navy)} #econs-lp-2026 .elp-fld .elp-opt-item input{width:19px;height:19px;margin-top:1px;accent-color:var(--navy);flex:0 0 auto;cursor:pointer} #econs-lp-2026 .elp-fld .elp-opt-item span{font-weight:400} #econs-lp-2026 .elp-fld .elp-opt-item:has(input:checked){border-color:var(--navy);background:rgba(0,49,81,.05)} #econs-lp-2026 .elp-other-in{margin-top:var(--s3)} #econs-lp-2026 .elp-other-in[hidden]{display:none} #econs-lp-2026 .elp-submit-note{font-size:13.5px;color:var(--slate);line-height:1.55;margin-top:var(--s4);max-width:64ch} #econs-lp-2026 .elp-form__foot{padding:var(--s8);border-top:1px solid var(--line-on-light)} #econs-lp-2026 .elp-btn[aria-busy="true"]{opacity:.72;pointer-events:none} /* Màn hình cảm ơn ngay trên trang */ #econs-lp-2026 .elp-thanks{display:none;padding:var(--s16) var(--s8);text-align:center} #econs-lp-2026 .elp-thanks.elp-is-on{display:block;animation:elp-fadeUp .3s var(--ease-out) both} #econs-lp-2026 .elp-thanks__ic{ width:74px;height:74px;border-radius:var(--r-full);background:var(--green);color:var(--white); display:flex;align-items:center;justify-content:center;font-size:38px;margin:0 auto var(--s6);line-height:1; } #econs-lp-2026 .elp-thanks h3{color:var(--navy);margin-bottom:var(--s4)} #econs-lp-2026 .elp-thanks p{color:var(--slate);max-width:56ch;margin:0 auto var(--s6)} #econs-lp-2026 .elp-formfail{display:none;margin-top:var(--s4);background:rgba(214,69,69,.1);border-left:4px solid var(--red);padding:var(--s4) var(--s5);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--red);font-weight:700;font-size:14.5px;line-height:1.5} #econs-lp-2026 .elp-formfail.elp-is-on{display:block} #econs-lp-2026 .elp-formfail a{color:var(--red);text-decoration:underline} @media (max-width:900px){#econs-lp-2026 .elp-form__head{grid-template-columns:1fr;gap:var(--s6)}#econs-lp-2026 .elp-grid2{grid-template-columns:1fr}#econs-lp-2026 .elp-opts{grid-template-columns:1fr}#econs-lp-2026 .elp-fs{padding:var(--s6) var(--s5)}} /* ============================================================ S13 FINAL CTA + STICKY BAR ============================================================ */ #econs-lp-2026 .elp-final{position:relative;background:var(--navy);color:var(--white);overflow:hidden} #econs-lp-2026 .elp-final__grid{ position:absolute;inset:0;opacity:.5;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:34px 34px; -webkit-mask-image:radial-gradient(90% 110% at 80% 100%,#313131,transparent 72%); mask-image:radial-gradient(90% 110% at 80% 100%,#313131,transparent 72%); } #econs-lp-2026 .elp-final__in{position:relative;max-width:820px} #econs-lp-2026 .elp-final h2{margin-bottom:var(--s5)} #econs-lp-2026 .elp-final__cta{display:flex;flex-wrap:wrap;gap:var(--s4);margin:var(--s8) 0 var(--s5)} #econs-lp-2026 .elp-final__meta{font-size:14px;color:rgba(255,255,255,.7);line-height:1.6} #econs-lp-2026 .elp-sticky{ position:fixed;left:0;right:0;bottom:0;z-index:70; background:var(--navy-deep);border-top:1px solid rgba(229,169,35,.35); box-shadow:0 -8px 24px rgba(0,38,63,.3); transform:translateY(110%);transition:transform .3s var(--ease-snappy); } #econs-lp-2026 .elp-sticky.elp-is-on{transform:translateY(0)} #econs-lp-2026 .elp-sticky__in{display:flex;align-items:center;gap:var(--s5);padding:12px var(--s5);max-width:var(--max);margin:0 auto} #econs-lp-2026 .elp-sticky__txt{font-size:15px;color:var(--white);line-height:1.35;font-weight:500} #econs-lp-2026 .elp-sticky__txt b{color:var(--gold);font-weight:700} #econs-lp-2026 .elp-sticky__btn{margin-left:auto;min-height:46px;padding:11px 22px;font-size:16px;flex:0 0 auto} #econs-lp-2026 .elp-sticky__tel{color:var(--gold);font-weight:700;font-size:15px;white-space:nowrap} #econs-lp-2026 .elp-sticky__short{display:none} @media (max-width:720px){ #econs-lp-2026 .elp-sticky__long,#econs-lp-2026 .elp-sticky__tel{display:none} /* KHÔNG đặt color ở đây: class này dùng cho CẢ dòng chữ bên trái (nền navy, chữ trắng) lẫn nhãn nút gold (bắt buộc chữ navy). Đặt màu chung sẽ kéo chữ trắng lên nền vàng, tương phản chỉ 2,09:1, trượt WCAG AA. Màu tách riêng ở 2 dòng dưới. */ #econs-lp-2026 .elp-sticky__short{display:block;font-size:14px;line-height:1.35} #econs-lp-2026 .elp-sticky__txt.elp-sticky__short{color:var(--white)} #econs-lp-2026 .elp-sticky__txt.elp-sticky__short b{color:var(--gold)} #econs-lp-2026 .elp-sticky__btn .elp-sticky__short{color:var(--navy)} #econs-lp-2026 .elp-sticky__in{gap:var(--s3);padding:10px var(--s4)} } /* ============================================================ FOOTER ============================================================ */ #econs-lp-2026 .elp-ft{background:var(--navy-deep);color:rgba(255,255,255,.72);padding:var(--s16) 0 var(--s8)} #econs-lp-2026 .elp-ft__lock{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;padding-bottom:var(--s8);border-bottom:1px solid var(--line-on-navy)} #econs-lp-2026 .elp-ft__lock img{height:32px;width:auto} #econs-lp-2026 .elp-ft__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s10);padding:var(--s10) 0} #econs-lp-2026 .elp-ft h4{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s4)} #econs-lp-2026 .elp-ft p,#econs-lp-2026 .elp-ft a{font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.72)} #econs-lp-2026 .elp-ft a:hover{color:var(--gold)} #econs-lp-2026 .elp-ft__cr{padding-top:var(--s6);border-top:1px solid var(--line-on-navy);font-size:13px;color:rgba(255,255,255,.5);line-height:1.6} @media (max-width:820px){#econs-lp-2026 .elp-ft__cols{grid-template-columns:1fr;gap:var(--s8)}} /* ---------- Scroll reveal ---------- */ #econs-lp-2026 .elp-rv{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)} #econs-lp-2026 .elp-rv.elp-is-in{opacity:1;transform:none} /* ---------- prefers-reduced-motion ---------- */ @media (prefers-reduced-motion:reduce){ #econs-lp-2026{scroll-behavior:auto} #econs-lp-2026 *,#econs-lp-2026 *::before,#econs-lp-2026 *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} #econs-lp-2026 .elp-rv{opacity:1;transform:none} #econs-lp-2026 .elp-ticker__track{animation:none;transform:none} #econs-lp-2026 .elp-flow__rail::after{transform:scaleX(1)} #econs-lp-2026 .elp-mock__bars div{transform:scaleY(1)} #econs-lp-2026 .elp-sticky{transform:translateY(0)} /* Phối cảnh đầu trang: dừng hẳn, không để trạng thái dở dang. Khai riêng chứ không dựa vào luật .001ms ở trên, để đo được bằng getAnimations() rằng thật sự không còn chuyển động nào. */ #econs-lp-2026 .elp-hero__lights i{animation:none;opacity:.92} #econs-lp-2026 .elp-scn-flow{animation:none;stroke-dashoffset:0} #econs-lp-2026 .elp-scn-pulse{animation:none;opacity:0} /* Nút chính: bỏ hẳn vệt sáng quét và cú nhấc, giữ nguyên màu và vòng focus */ #econs-lp-2026 .elp-btn--gold::after{display:none} #econs-lp-2026 .elp-btn--gold:hover,#econs-lp-2026 .elp-btn--gold:active,#econs-lp-2026 .elp-btn--ghost:hover,#econs-lp-2026 .elp-btn--ghost:active,#econs-lp-2026 .elp-btn--outline:hover,#econs-lp-2026 .elp-btn--outline:active{transform:none} } /* ---------- Điện thoại màn hình NGẮN: nén phần đầu trang để nút đăng ký nằm trong màn hình đầu tiên. Bắt theo chiều cao chứ không theo chiều rộng, vì máy hẹp mà màn hình dài (390x844) thì không cần nén, nén vào lại thành trống trải. ---------- */ @media (max-width:430px) and (max-height:700px){ #econs-lp-2026 .elp-hero{padding-top:calc(66px + var(--s8));padding-bottom:var(--s10)} #econs-lp-2026 h1{font-size:clamp(26px,7.4vw,30px);line-height:1.18} #econs-lp-2026 .elp-hero h1{margin-bottom:var(--s4)} #econs-lp-2026 .elp-hero__sub{font-size:15px;line-height:1.5;margin-bottom:var(--s5)} #econs-lp-2026 .elp-hero__for{font-size:13px;line-height:1.5;margin-bottom:var(--s5)} #econs-lp-2026 .elp-hero__cta{gap:var(--s3);margin-bottom:var(--s4)} #econs-lp-2026 .elp-hero__eyebrow{margin-bottom:var(--s5)} } /* ---------- Phối cảnh theo khổ màn hình ---------- Dưới 1180px bố cục xếp dọc, khoảng trống bên phải biến mất nên lớp dữ liệu không còn chỗ đứng tử tế -> bỏ hẳn thay vì ép cho vừa. Bù lại: kéo đường chân trời cao lên và đẩy nón sáng ra giữa để phần đầu trang không trống. */ @media (max-width:1180px){ #econs-lp-2026 .elp-scn-data{display:none} #econs-lp-2026 .elp-hero__lights i:nth-child(2){left:38%;width:44%} } @media (max-width:900px){ #econs-lp-2026 .elp-scn-city{height:clamp(150px,30vw,230px)} /* Đường chân trời nằm tận đáy một hero rất cao, màn hình đầu tiên trên điện thoại không nhìn thấy gì -> chuyển vai chính cho 3 nón sáng, kéo rộng và mạnh hơn để phần đầu có chiều sâu ngay từ khung hình đầu. */ #econs-lp-2026 .elp-hero__lights i{filter:blur(26px)} #econs-lp-2026 .elp-hero__lights i:nth-child(1){left:-8%;width:42%; background:linear-gradient(180deg,rgba(229,169,35,.13),rgba(229,169,35,0) 62%)} #econs-lp-2026 .elp-hero__lights i:nth-child(2){left:26%;width:52%; background:linear-gradient(180deg,rgba(229,169,35,.24),rgba(229,169,35,0) 76%)} #econs-lp-2026 .elp-hero__lights i:nth-child(3){right:-10%;width:44%; background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0) 68%)} /* Lớp phủ: MỞ ở dải trên cùng cho thấy chùm sáng, chỉ TỐI ở đúng dải có chữ. Bản trước phủ .86 ngay từ 0% nên bóp chết luôn chùm sáng — chính là lỗi làm màn hình đầu trên điện thoại lại phẳng như cũ. */ #econs-lp-2026 .elp-hero__scrim{background:linear-gradient(180deg, rgba(0,28,47,0) 0%,rgba(0,28,47,.22) 9%,rgba(0,28,47,.76) 20%, rgba(0,28,47,.78) 66%,rgba(0,28,47,.30) 84%,rgba(0,28,47,0) 100%)} } @media (max-width:420px){ #econs-lp-2026 .elp-scn-city{height:clamp(132px,36vw,190px)} #econs-lp-2026 .elp-scn-far{display:none} /* lớp xa thành nhiễu ở khổ này, bỏ cho sạch */ } /* ---------- Máy rất hẹp (dưới 375px): nén thêm một nấc ---------- */ @media (max-width:374px){ #econs-lp-2026 .elp-hero{padding-top:calc(66px + var(--s4));padding-bottom:var(--s10)} #econs-lp-2026 .elp-hero__eyebrow{font-size:9.5px;letter-spacing:.08em;padding:5px 10px;margin-bottom:var(--s3)} #econs-lp-2026 h1{font-size:25px;line-height:1.18} #econs-lp-2026 .elp-hero h1{margin-bottom:var(--s3)} #econs-lp-2026 .elp-hero__sub{font-size:14px;line-height:1.45;margin-bottom:var(--s4)} #econs-lp-2026 .elp-hero__for{font-size:12px;line-height:1.45;margin-bottom:var(--s4);padding-left:var(--s3)} #econs-lp-2026 .elp-hero__cta{gap:var(--s3);margin-bottom:var(--s3)} #econs-lp-2026 .elp-btn--lg{min-height:52px;padding:13px 20px;font-size:16px} #econs-lp-2026 .elp-hero__friction{font-size:12px} #econs-lp-2026 .elp-hero__hosts{margin-top:var(--s8);padding-top:var(--s5)} #econs-lp-2026 .elp-wrap{padding:0 var(--s4)} } /* Lưới an toàn: chỉ có hiệu lực khi econs-lp.js CHƯA chạy. Mất file js thì trang mất hiệu ứng, không mất nội dung. */ #econs-lp-2026:not(.elp-js) .elp-rv{opacity:1!important;transform:none!important} #econs-lp-2026:not(.elp-js) .elp-tabpanel[hidden]{display:block!important} #econs-lp-2026:not(.elp-js) .elp-flow__rail::after{transform:scaleX(1)!important} #econs-lp-2026:not(.elp-js) .elp-mock__bars div{transform:scaleY(1)!important} #econs-lp-2026:not(.elp-js) .elp-cd,#econs-lp-2026:not(.elp-js) .elp-sticky{display:none!important}/* End custom CSS */