/* ========================================================================== LEGENDS: Will of D — trang chủ Bố cục PC : >= 901px (ảnh riêng trong /pc) Bố cục Mobi: <= 900px (ảnh riêng trong /mobi) Ảnh cả hai bố cục cùng hiển thị nằm trong /common — mỗi thiết bị chỉ tải /common + thư mục của mình. /_unused là ảnh chưa dùng, không cần upload. Toàn bộ nội dung chữ nằm trong đối tượng SITE ở cuối file. ========================================================================== */ :root{ --ink:#03101f; /* nền sâu nhất */ --deep:#062545; /* nền khối */ --sea:#0d3b6e; /* xanh biển */ --sky:#2f9cf0; /* xanh sáng — nhấn */ --sky-2:#6fc8ff; --ice:#bfe6ff; --paper:#eef6ff; /* chữ chính */ --mist:#b4cfe9; /* chữ phụ (sáng hơn để đọc được trên nền xanh đã sáng lên) */ --gold:#f3d089; /* vàng nút MORE+ */ --line:rgba(111,200,255,.26); --line-soft:rgba(147,180,210,.16); --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif; --body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --wrap:1280px; --gutter:clamp(16px,3.4vw,48px); --hd:72px; --fz:clamp(64px,7vw,110px); /* bề cao vùng hoà nền giữa hai section (xem "Khung section chung") */ color-scheme:dark; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 8px)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} /* Dải màu theo chiều sâu, trải hết chiều cao tài liệu: càng cuộn xuống càng lặn sâu — mặt biển sáng ở đầu trang, vực thẳm tối ở chân trang. Đặt trên để nền bám theo tài liệu chứ không theo khung nhìn. */ html{ background:var(--ink); background-image:linear-gradient(180deg, #2585d8 0%, /* mặt nước — hero */ #1c74c4 13%, /* nước nông — tin tức */ #1763ae 30%, /* tầng giữa — nhân vật */ #12538f 48%, #0e4479 66%, /* tầng sâu — đặc sắc */ #0b3862 82%, /* sâu — video */ #082c50 100%); /* đáy — chân trang*/ } body{ position:relative;margin:0;background:transparent;color:var(--paper); font:400 15px/1.7 var(--body);-webkit-font-smoothing:antialiased; overflow-x:hidden; } body.lock{overflow:hidden} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0} img{max-width:100%} :focus-visible{outline:2px solid var(--sky-2);outline-offset:3px;border-radius:3px} h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;line-height:.98;text-wrap:balance} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* thuộc tính hidden phải thắng mọi display:block/flex đặt theo class */ [hidden]{display:none!important} /* Chữ Thái / Hàn: hai font chính không có các ký tự này nên trình duyệt lấy ký tự từ font Noto tương ứng (chỉ tải khi chọn ngôn ngữ đó). Dấu trên/dưới của chữ Thái cần giãn dòng hơn, và giãn chữ rộng làm vỡ chữ Thái/Hàn. */ html:lang(th){--body:"Be Vietnam Pro","Noto Sans Thai",system-ui,sans-serif;--display:"Big Shoulders Display","Noto Sans Thai","Arial Narrow",sans-serif} html:lang(ko){--body:"Be Vietnam Pro","Noto Sans KR",system-ui,sans-serif;--display:"Big Shoulders Display","Noto Sans KR","Arial Narrow",sans-serif;word-break:keep-all} html:lang(th) :is(h1,h2,h3){line-height:1.3} html:lang(ko) :is(h1,h2,h3){line-height:1.15} html:lang(th) :is(.slide-cap,.vid-title,.vid-thumbs em,.cpc-epi,.mchar-epi){line-height:1.55} html:is(:lang(th),:lang(ko)) .shead-vn{letter-spacing:.06em} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:2} /* ===== Khí quyển dưới nước =============================================== .bgfix — lớp cố định theo khung nhìn: ánh sáng rọi từ trên, tối dần ở rìa, cộng lớp nhiễu hạt mịn để dải màu lớn không bị vệt (banding). ::before — hạt lơ lửng trôi lên chậm (ảnh lát ghép tự sinh, liền mạch). .surface — ánh mặt nước: vân sáng + tia nắng, chỉ phủ phần đầu trang rồi tan dần, nên chỉ hero và tin tức nhận được ánh sáng này. Toàn bộ ảnh nền trong common/bg/ do mình tự sinh (xem chú thích cuối file). ========================================================================= */ .bgfix{ position:fixed;inset:0;z-index:-2;pointer-events:none; background: url("../common/bg/bg-grain.png") 0 0/128px 128px repeat, radial-gradient(135% 95% at 50% -8%, rgba(72,168,244,.18), transparent 58%), radial-gradient(100% 62% at 50% 108%, rgba(0,24,58,.22), transparent 62%); opacity:.8; } /* Lớp hạt cao hơn khung nhìn 600px ở cả hai đầu rồi trượt bằng transform (chạy trên GPU) thay vì background-position — tránh vẽ lại mỗi khung hình. */ .bgfix::before{ content:"";position:absolute;inset:-600px 0; background:url("../common/bg/bg-particles.png") 0 0/600px 600px repeat; opacity:.45;animation:rise 78s linear infinite;will-change:transform; } /* trượt đúng 1 ô lát (600px) nên vòng lặp không lộ điểm nối */ @keyframes rise{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-600px,0)}} .surface{ position:absolute;left:0;right:0;top:0;height:190vh;z-index:-1;pointer-events:none; overflow:hidden;opacity:.42; -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.34) 38%,transparent 78%); mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.34) 38%,transparent 78%); } /* vân sáng nằm ở lớp con để khi nó trôi thì mặt nạ mờ dần vẫn đứng yên */ .surface::before{ content:"";position:absolute;inset:-12%; background: repeating-linear-gradient(101deg, transparent 0 58px, rgba(158,218,255,.05) 58px 70px, transparent 70px 158px), url("../common/bg/bg-caustics.png") center top/980px 980px repeat; animation:caustic 32s ease-in-out infinite alternate; } @keyframes caustic{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-2.4%,1.6%,0)} } /* ===== Header ============================================================ */ .hd{ position:fixed;top:0;left:0;right:0;z-index:70;height:var(--hd); padding-top:env(safe-area-inset-top,0px); background:linear-gradient(180deg,rgba(8,38,76,.9),rgba(8,38,76,.5) 70%,transparent); transition:background .25s ease,box-shadow .25s ease; } .hd.solid{background:rgba(9,42,82,.94);box-shadow:0 1px 0 var(--line-soft),0 12px 34px -20px #000;backdrop-filter:blur(10px)} .hd .wrap{display:flex;align-items:center;gap:18px;height:var(--hd)} .logo{flex:0 0 auto;display:block;line-height:0} .logo img{width:auto;height:52px;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))} .menu{display:flex;align-items:center;gap:2px;margin-left:auto;list-style:none;padding:0;margin-block:0} .menu a{ position:relative;display:grid;place-items:center; min-width:96px;height:44px;padding:0 10px; font:600 15px/1 var(--body);letter-spacing:.02em;color:var(--ice); } .menu a::before{ content:"";position:absolute;inset:-14px 0 -8px;z-index:-1; background:url("../pc/official/yeqian_xuanzhong.png") center/100% 100% no-repeat; opacity:0;transition:opacity .2s ease; } .menu a:hover{color:#fff} .menu a[aria-current="true"]{color:#fff;text-shadow:0 0 14px rgba(111,200,255,.7)} .menu a[aria-current="true"]::before{opacity:1} .hd-cta{position:relative;display:flex;align-items:center;gap:10px;flex:0 0 auto} /* Chọn ngôn ngữ — danh sách thả xuống canh theo mép phải cụm nút, nên trên màn hẹp không bị tràn ra ngoài bên trái */ .lang-btn{ display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 10px; font:700 13px/1 var(--body);letter-spacing:.06em;color:var(--ice); background:rgba(6,37,69,.55);border:1px solid var(--line); transition:border-color .18s ease,color .18s ease; } .lang-btn:hover,.lang-btn[aria-expanded="true"]{color:#fff;border-color:var(--sky-2)} .lang-btn .caret{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .18s ease} /* Cờ quốc gia (SVG vẽ sẵn trong FLAGS ở phần script) — khung 3:2 */ .flag{flex:0 0 auto;display:block;width:21px;height:14px;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.28)} .flag svg{display:block;width:100%;height:100%} .lang-btn[aria-expanded="true"] .caret{transform:rotate(180deg)} .lang-list{ position:absolute;top:calc(100% + 10px);right:0;z-index:75;min-width:212px; margin:0;padding:6px;list-style:none; background:rgba(4,20,38,.97);border:1px solid var(--line); box-shadow:0 18px 40px -16px #000;backdrop-filter:blur(10px); } .lang-list button{ display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px; text-align:left;font:500 14px/1.2 var(--body);color:var(--paper);white-space:nowrap; } .lang-list b{width:24px;font:800 12px/1 var(--body);letter-spacing:.08em;color:var(--mist)} .lang-list button:hover,.lang-list button:focus-visible{background:rgba(47,156,240,.14)} .lang-list button[aria-checked="true"]{color:#fff;background:rgba(47,156,240,.22)} .lang-list button[aria-checked="true"] b{color:var(--sky-2)} .lang-list button[aria-checked="true"]::after{content:"";margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--sky-2)} /* font Thái/Hàn cho tên ngôn ngữ trong danh sách, kể cả khi trang đang ở tiếng khác */ .lang-list [lang="th"] span{font-family:"Be Vietnam Pro","Noto Sans Thai",system-ui,sans-serif} .lang-list [lang="ko"] span{font-family:"Be Vietnam Pro","Noto Sans KR",system-ui,sans-serif} .btn-dl{ display:inline-grid;place-items:center;height:42px;padding:0 24px; font:800 14px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#062033; background:linear-gradient(180deg,#8fd8ff,var(--sky)); clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%); box-shadow:0 8px 22px -10px rgba(47,156,240,.9); transition:filter .18s ease,transform .18s ease; } .btn-dl:hover{filter:brightness(1.1);transform:translateY(-1px)} /* Nút tải game trên header: chữ nhật, dải màu đỏ → cam. Theo mẫu: rộng ≈ 2.83 × cao, cỡ chữ ≈ 46% chiều cao. Dùng min-width thay cho width cố định để chữ dài hơn ở ngôn ngữ khác (DOWNLOAD, ดาวน์โหลด…) không bị tràn. */ .hd .btn-dl{ height:42px;min-width:119px;padding:0 18px; font:800 20px/1 var(--display);letter-spacing:.04em;color:#fff; background:linear-gradient(to right,#dd0412,#fd9003); clip-path:none;box-shadow:none; } .burger{display:none;width:44px;height:44px;place-items:center} .burger span{display:block;width:22px;height:2px;background:var(--paper);box-shadow:0 -7px 0 var(--paper),0 7px 0 var(--paper)} /* Ngăn kéo menu (mobi) */ .drawer{ position:fixed;inset:0;z-index:80;display:none; background:rgba(3,14,28,.96);backdrop-filter:blur(6px); padding:calc(var(--hd) + env(safe-area-inset-top,0px) + 24px) 24px 40px; } .drawer.open{display:block} .drawer ul{list-style:none;margin:0;padding:0;display:grid;gap:4px} .drawer a{ display:flex;align-items:center;gap:14px;padding:18px 16px; font:700 18px/1 var(--body);border-bottom:1px solid var(--line-soft); } .drawer a i{font-style:normal;font:800 13px/1 var(--display);color:var(--sky);width:22px} .drawer .x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:18px;width:44px;height:44px;font-size:26px;line-height:1} /* ===== HERO ============================================================== */ /* PC: hero cao đúng 1 màn hình, ảnh KV (bg1_pc) phủ kín khung (cover, canh giữa-trên). Logo + giới thiệu + nút tải + QR gom thành một dải ở đáy màn hình. Ảnh nằm TRÊN lớp khí quyển (.bgfix / .surface) để không bị phủ sương mờ; mép dưới mờ dần (mask) vào nền trang nên vẫn nối liền với phần dưới. Chỉnh ảnh sao cho vùng ~30% dưới cùng của ảnh là chỗ trống cho dải nút. */ .hero{ position:relative;display:grid;align-items:end;min-height:100svh; padding-block:calc(var(--hd) + 32px) 88px;overflow:hidden; } /* Ảnh nền là ảnh chờ trong lúc video tải, và là ảnh thay thế khi máy không phát được video (tiết kiệm dữ liệu, mạng chậm, người dùng tắt hiệu ứng động). Video nằm đè lên ảnh; lớp phủ đỡ chữ nằm ở ::after nên luôn ở trên video. */ .hero-kv{ position:absolute;inset:0;z-index:0;pointer-events:none; background:url("../pc/official_bg/bg1_pc.jpg") center top/cover no-repeat; -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent); mask-image:linear-gradient(180deg,#000 88%,transparent); } .hero-kv video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover} .hero-kv::after{ content:"";position:absolute;inset:0; /* đỡ chữ ở đáy */ background:linear-gradient(180deg,transparent 58%,rgba(6,34,70,.3) 80%,rgba(6,34,70,.5) 100%); } /* Sương mờ + bong bóng nổi lên ở đáy hero — thay cho lớp "khói" răng cưa cũ. Cùng tông khí quyển dưới nước với phần còn lại của trang (.bgfix/.surface): ::before là quầng sáng xanh loang mềm lắc nhẹ qua lại, ::after là bong bóng nổi lên dùng chung ảnh lát ghép bg-particles.png + animation "rise" đã có, nên mép dưới ảnh KV tan dần vào nền thay vì bị khối khói cứng cắt ngang. Khung .hero-mist lấy đúng kích thước với .hero-kv (xem cặp quy tắc responsive bên dưới/ở khối mobile) để dải hiệu ứng luôn nằm sát chân ảnh, kể cả ở mobi nơi ảnh chỉ chiếm phần trên còn chữ/nút nằm dài phía dưới. */ .hero-mist{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .hero-mist::before{ content:"";position:absolute;left:-15%;right:-15%; bottom:calc(-1 * clamp(40px,6vw,90px));height:clamp(160px,24vw,300px); background: radial-gradient(42% 64% at 14% 100%,rgba(191,230,255,.32),transparent 70%), radial-gradient(34% 54% at 50% 100%,rgba(111,200,255,.24),transparent 72%), radial-gradient(40% 62% at 86% 100%,rgba(191,230,255,.30),transparent 70%); filter:blur(22px); animation:mist-sway 24s ease-in-out infinite alternate; } /* Bong bóng nổi lên, ô lát 220px trôi đúng 1 ô/vòng nên liền mạch; mặt nạ neo theo px tính từ đáy (không theo %) để dải hiệu ứng đều nhau dù ảnh KV cao khác nhau giữa PC và mobi. */ .hero-mist::after{ content:"";position:absolute;left:0;right:0;bottom:0;top:-220px; background:url("../common/bg/bg-particles.png") 0 0/220px 220px repeat; opacity:.5;mix-blend-mode:screen; -webkit-mask-image:linear-gradient(to top,#000,#000 120px,transparent 300px); mask-image:linear-gradient(to top,#000,#000 120px,transparent 300px); animation:bubble-rise 26s linear infinite;will-change:transform; } @keyframes mist-sway{ from{transform:translate3d(-2.5%,0,0) scaleX(1)} to{transform:translate3d(2.5%,-2%,0) scaleX(1.06)} } @keyframes bubble-rise{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-220px,0)}} /* Dải nội dung ở đáy: [logo] [giới thiệu + 12+] [nút tải + mã QR] */ .hero-in{ position:relative;display:grid;align-items:center; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"logo lead dl" "logo foot dl"; gap:12px clamp(20px,2.6vw,44px); } /* Chữ mờ "BURNING WILL" để dành cho nền trơn — đè lên poster nhân vật sẽ rối */ .burning{display:none} .hero-logo{grid-area:logo;width:clamp(150px,15vw,230px);filter:drop-shadow(0 10px 26px rgba(0,0,0,.7))} /* h1 (tên game) đã có trong logo ngay cạnh nên chỉ giữ cho Google / trình đọc màn hình — xem class "sr" trên thẻ h1 */ .hero .lead{ grid-area:lead;align-self:end;margin:0;max-width:46ch;font-size:clamp(14.5px,1.1vw,16px);color:#e8f2fc; text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 14px rgba(0,0,0,.7); } .hero .dl-row{grid-area:dl;flex-wrap:nowrap;align-items:flex-end} /* nút tải xếp đúng 2×2, khung ôm vừa nút để cột chữ bên cạnh không bị ép hẹp */ .hero .stores{display:grid;grid-template-columns:repeat(2,auto);max-width:none;gap:10px} .hero .stores a img{height:48px} .hero .app-icon{width:104px;height:104px} .hero-foot{grid-area:foot;align-self:start} /* PC hẹp: nút tải + QR xuống hàng riêng */ @media (max-width:1199px){ .hero-in{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"logo lead" "logo foot" "dl dl"} } /* Hàng tải game: nút bên trái, mã QR bên phải */ .dl-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(18px,2.6vw,38px)} .stores{display:flex;flex-wrap:wrap;gap:12px;max-width:470px} .stores a{display:block;line-height:0;transition:transform .18s ease,filter .18s ease} .stores a img{height:52px;width:auto;display:block} .stores a:hover{transform:translateY(-3px);filter:brightness(1.18) drop-shadow(0 8px 18px rgba(47,156,240,.55))} /* Icon game cạnh nút tải (thay cho 2 mã QR cũ) */ .qrs{display:flex;gap:16px;align-items:center} .app-icon{ width:112px;height:112px;border-radius:24px;display:block; box-shadow:0 12px 30px -10px rgba(0,0,0,.85),0 0 0 1px rgba(191,230,255,.22); } .hero-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;color:#c9dcef;font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.9)} /* Mũi tên "Cuộn xuống": chỉ có mũi tên nhấp nháy, không chữ. PC: nằm cuối hero; mobi: cố định ở đáy màn hình (xem khối @media mobi). Bóng đổ để nhìn rõ trên cả nền sáng lẫn tối. */ .scrolldown{ position:absolute;left:50%;bottom:22px;translate:-50% 0;z-index:3; display:block;line-height:0;padding:8px 14px; } .scrolldown svg{ display:block;width:24px;fill:var(--sky-2); filter:drop-shadow(0 1px 2px rgba(0,20,60,.95)) drop-shadow(0 0 6px rgba(0,20,60,.6)); animation:bob 1.8s ease-in-out infinite; } @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}} /* ===== Khung section chung =============================================== Các section nối liền nhau bằng cách HOÀ NỀN thay vì cắt ngang: mỗi section chồng lên section trước đúng --fz (margin âm), và ảnh nền + lớp phủ của nó mờ dần (mask) ở hai đầu trong đúng vùng --fz đó — nên hai nền chồng mờ vào nhau, chỗ trong suốt hở ra dải nền nước liên tục của . --fz bằng khoảng đệm trên/dưới của section nên chữ không bao giờ lọt vào vùng hoà. isolation:isolate: mỗi section là một lớp riêng, section sau đè lên section trước. Muốn chuyển cảnh dài/êm hơn thì tăng --fz (đầu file). NGOẠI LỆ: hero → Tin tức giữ nguyên kiểu cắt gọn như bản cũ (hero là ảnh KV riêng, hoà nền vào ảnh tin tức làm mất phần đầu ảnh) — xem khối ".hero + .sec" ngay dưới. */ .sec{position:relative;isolation:isolate;padding-block:var(--fz);overflow:hidden} .sec + .sec{margin-top:calc(-1 * var(--fz))} .sec-bg{position:absolute;inset:0;z-index:0;object-fit:cover;width:100%;height:100%} .sec-bg,.sec::before{ -webkit-mask-image:linear-gradient(180deg,transparent,#000 var(--fz),#000 calc(100% - var(--fz)),transparent); mask-image:linear-gradient(180deg,transparent,#000 var(--fz),#000 calc(100% - var(--fz)),transparent); } /* Section đứng ngay sau hero (Tin tức): không chồng lên hero, đầu section giữ nguyên (chỉ mờ dần ở đáy để nối sang Nhân vật) và có vệt sáng mảnh ở đường nối như tia nắng xuyên mặt nước. Ảnh nền neo lên mép trên (object-position) để không cắt mất phần đầu ảnh — nhân vật Usopp ở sát mép trên ảnh gốc; ảnh cao hơn khung thì phần thừa bị cắt ở đáy thay vì ở đỉnh. */ .hero + .sec .sec-bg,.hero + .sec::before{ -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - var(--fz)),transparent); mask-image:linear-gradient(180deg,#000 calc(100% - var(--fz)),transparent); } .hero + .sec .sec-bg{object-position:50% 0} .hero + .sec::after{ content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:3;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(111,200,255,.45) 28%,rgba(191,230,255,.75) 50%,rgba(111,200,255,.45) 72%,transparent); } /* Quầng sáng nhẹ ôm lấy nội dung + tối dần hai đầu để tách khỏi section kề bên */ .sec::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(78% 52% at 50% 40%,rgba(70,178,255,.18),transparent 72%), linear-gradient(180deg,rgba(6,34,70,.26),transparent 22%,transparent 78%,rgba(6,34,70,.26)); } /* Section có ảnh nền riêng cần lớp phủ đậm hơn để giữ độ tương phản chữ. Lớp phủ dùng xanh biển (không dùng đen xanh) và nhạt ở giữa để ảnh nền giữ được màu tươi; chỉ tối vừa đủ ở hai đầu cho nối liền với section kề bên. Cần ảnh sáng/rõ hơn nữa thì giảm ba số độ mờ (.5 / .12 / .55), cần chữ dễ đọc hơn trên ảnh bận thì tăng số giữa. */ .sec.has-art::before{ background: radial-gradient(80% 55% at 50% 40%,rgba(70,178,255,.16),transparent 74%), linear-gradient(180deg,rgba(6,34,70,.5),rgba(6,34,70,.12) 30%,rgba(6,34,70,.55)); } .shead{position:relative;display:grid;justify-items:center;margin-bottom:clamp(32px,4vw,56px)} .shead-wm{ position:absolute;top:50%;left:50%;translate:-50% -56%; width:min(880px,92%);opacity:.34;pointer-events:none; } .shead-t{position:relative;width:auto;height:clamp(64px,7vw,92px)} .shead-vn{ position:relative;margin-top:14px;font:600 13px/1 var(--body); letter-spacing:.3em;text-transform:uppercase;color:#e6f6ff; text-shadow:0 1px 2px rgba(0,20,60,.95),0 0 6px rgba(0,20,60,.9),0 0 16px rgba(0,20,60,.7); } /* ===== 1. TIN TỨC ======================================================== */ .news{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(24px,3vw,44px);align-items:start} .news>*{min-width:0} .slider{position:relative;aspect-ratio:550/312;background:var(--deep);border:1px solid var(--line);overflow:hidden} .slider::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(111,200,255,.14),inset 0 -80px 70px -50px rgba(3,16,31,.95)} .slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s ease} .slide.on{opacity:1;visibility:visible} .slide img{width:100%;height:100%;object-fit:cover;display:block} .slide-cap{ position:absolute;left:0;right:0;bottom:0;z-index:2;padding:44px 20px 18px; font:700 17px/1.35 var(--body);text-shadow:0 2px 10px #000; } .dots{ position:absolute;right:12px;top:12px;z-index:3;display:flex;gap:7px; padding:6px 8px;background:rgba(3,16,31,.55);backdrop-filter:blur(4px); } .dots button{width:18px;height:18px;background:url("../common/official/1.png") center/contain no-repeat;opacity:.6} .dots button[aria-selected="true"]{background-image:url("../common/official/2.png");opacity:1} /* Lớp đỡ chữ cho cột tin: kính xanh biển SÁNG nhưng hơi trong — ảnh nền section (news_bg_*.jpg) vẫn thấp thoáng qua, được làm nhoè để chữ không bị rối. Muốn đặc hơn/trong hơn thì chỉnh số cuối (độ mờ) của hai màu xanh trong gradient thứ hai; muốn thấy ảnh nền rõ hơn thì giảm blur. Nền trong nên chữ tiêu đề có thêm bóng chữ xanh đậm, còn chữ phụ/nhãn/đường kẻ bên trong được nâng màu riêng ở các quy tắc ".npanel ..." ngay dưới. */ .npanel{ position:relative;padding:clamp(16px,2vw,26px); background: linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 45%), linear-gradient(180deg,rgba(72,166,246,.18),rgba(30,108,204,.26)); border:1px solid rgba(190,232,255,.55);border-top:3px solid var(--sky-2); box-shadow:0 18px 44px -20px rgba(0,16,50,.5),0 0 30px -8px rgba(47,156,240,.4),inset 0 0 0 1px rgba(214,240,255,.16); -webkit-backdrop-filter:blur(14px) saturate(1.35);backdrop-filter:blur(14px) saturate(1.35); } .npanel .ntitle,.npanel .ndate{text-shadow:0 1px 3px rgba(0,20,62,.9),0 0 12px rgba(0,20,62,.6)} .npanel .nlist li+li{border-top-color:rgba(255,255,255,.26)} .npanel .ndate,.npanel .nempty{color:#dcedfc} .npanel .ncat{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(3,16,31,.28)} .npanel .ncat[data-c="event"]{color:#ffe3a3;border-color:rgba(255,227,163,.7)} .npanel .nlist button:hover .ntitle{color:#ffe3a3} .ntabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px} .ntabs button{ position:relative;min-width:104px;height:38px;padding:0 16px; font:600 14px/1 var(--body);color:var(--mist); background:url("../common/official/xinwen_biaoti_2.png") center/100% 100% no-repeat; } .ntabs button[aria-selected="true"]{ color:#fff;background-image:url("../common/official/xinwen_biaoti_1.png"); text-shadow:0 1px 6px rgba(0,0,0,.5); } .nlist{list-style:none;margin:16px 0 0;padding:0} .nlist li+li{border-top:1px solid var(--line-soft)} .nlist button{ display:grid;grid-template-columns:auto auto 1fr auto;gap:12px;align-items:center; width:100%;padding:13px 2px;text-align:left; } .nlist .bullet{width:17px;height:17px;background:url("../common/official/1.png") center/contain no-repeat} .nlist button:hover .bullet{background-image:url("../common/official/2.png")} .ncat{ font:700 11px/1 var(--body);letter-spacing:.06em;padding:5px 9px;white-space:nowrap; color:var(--sky-2);border:1px solid var(--line); } .ncat[data-c="event"]{color:var(--gold);border-color:rgba(243,208,137,.45)} .ntitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .16s ease} .nlist button:hover .ntitle{color:var(--sky-2)} .ndate{font-size:13px;color:var(--mist);font-variant-numeric:tabular-nums} .nempty{padding:18px 2px;color:var(--mist)} .btn-more{display:block;margin:22px auto 0;line-height:0;transition:filter .18s ease,transform .18s ease} .btn-more img{height:34px;width:auto} .btn-more:hover{filter:brightness(1.2);transform:translateY(-2px)} /* PC (2 cột): khung tin cao đúng bằng slide bên trái — chiều cao do slide quyết định (contain:size để nội dung khung không làm hàng cao thêm), tin nào dài hơn thì cuộn trong danh sách; tab ở trên và nút MORE+ ở dưới đứng yên. min-height chỉ là lưới an toàn cho màn PC hẹp (slide thấp quá thì danh sách chỉ hiện được 1–2 dòng). Mobi xếp 1 cột nên khung giữ chiều cao tự nhiên. */ @media (min-width:901px){ .news{align-items:stretch} .slider{align-self:start} .npanel{ display:flex;flex-direction:column;contain:size;min-height:240px; padding:clamp(14px,1.5vw,20px) clamp(16px,1.8vw,24px); } /* 4 tab luôn nằm trong 1 hàng: rộng thì giữ cỡ cũ, hẹp thì co lại thay vì rớt hàng (rớt hàng sẽ chiếm hết chỗ của danh sách trong khung thấp) */ .npanel .ntabs{flex:none;flex-wrap:nowrap} .npanel .ntabs button{min-width:0;flex:0 1 auto;padding-inline:clamp(8px,1.2vw,16px)} .npanel .nlist{ flex:1 1 auto;min-height:0;margin-top:10px;overflow-y:auto;overscroll-behavior:contain; padding-right:8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.5) transparent; } .npanel .nlist::-webkit-scrollbar{width:6px} .npanel .nlist::-webkit-scrollbar-thumb{background:rgba(255,255,255,.5);border-radius:3px} .npanel .nlist::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.75)} .npanel .nlist button{padding-block:11px} .npanel .btn-more{flex:none;margin-top:10px} .npanel .btn-more img{height:30px} } /* ===== 2. NHÂN VẬT ======================================================= Dùng chung PC + mobi: nền chuyển động vào của nhân vật, đoạn mô tả, và thanh chọn. Bố cục riêng: PC ở khối @media (min-width:901px) ngay dưới, mobi ở khối @media (max-width:900px). */ .char-stage{position:relative} @keyframes charIn{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}} .char-desc{margin:0;color:#cfe2f5;max-width:52ch} .avatars{position:relative;display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory} .avatars::-webkit-scrollbar{display:none} .avatars button{position:relative;flex:0 0 auto;line-height:0;scroll-snap-align:center;transition:opacity .2s ease,filter .2s ease} .avatars img{width:100%;display:block} /* PC — sân khấu tràn ngang theo mẫu game: tiêu đề ở góc trái trên, khối chữ bên trái (tên + phe, danh hiệu, mô tả, hai mũi tên), nhân vật lớn ở giữa đè lên dải chữ mờ "BURNING WILL", ảnh video + nút MORE+ bên phải; đáy là thanh chọn nhân vật — đường kẻ ngang có ngôi sao, nhân vật đang chọn hiện to ở giữa (kèm tên), mỗi bên chỉ hiện 2 ngôi sao (bấm để chọn, hoặc dùng mũi tên). --pu = 1% bề rộng sân khấu (tối đa 1920px): mọi kích thước tính theo nó để giữ đúng tỉ lệ. */ @media (min-width:901px){ #characters{ --pu:calc(min(100vw,1920px)/100); --slot:calc(var(--pu)*12); /* bề rộng mỗi ô trên thanh chọn */ --avw:calc(var(--pu)*6.9); /* ảnh đại diện đang chọn */ --avh:calc(var(--pu)*5.45); --star:calc(var(--pu)*2.1); --cap:calc(var(--pu)*3); /* chừa chỗ cho dòng tên dưới ảnh đại diện */ } #characters .wrap{max-width:1920px;padding-inline:0} /* tiêu đề: góc trái trên (khối .shead rời khỏi luồng nên sân khấu bắt đầu ngay đầu khung) */ #characters .shead{position:absolute;left:calc(var(--pu)*9.25);top:calc(var(--pu)*3.9);z-index:3;margin:0;justify-items:start} #characters .shead-t{height:auto;width:calc(var(--pu)*12);min-width:140px} #characters .shead-vn{margin-top:4px} .cpc{position:relative;height:calc(var(--pu)*46)} .cpc-burn{position:absolute;left:calc(var(--pu)*-3);top:calc(var(--pu)*32);width:calc(var(--pu)*106);max-width:none;opacity:.42;pointer-events:none} /* khung nhân vật có kích thước cố định; hàng/cột lưới ép về đúng khung để max-height/max-width của ảnh có tác dụng (nếu không, ảnh cao như Roger / Big Mom sẽ tràn xuống đè thanh chọn) */ .cpc-art{ position:absolute;left:50%;bottom:calc(var(--pu)*3.6);translate:-50% 0; width:calc(var(--pu)*56);height:calc(var(--pu)*40); display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:end center; } .cpc-art img{ max-width:100%;max-height:100%;object-fit:contain; filter:drop-shadow(0 28px 44px rgba(0,0,0,.5)); animation:charIn .55s cubic-bezier(.2,.8,.3,1) both; } /* khối chữ bên trái: khung mờ (tên, danh hiệu, mô tả) + hai mũi tên bên dưới */ .cpc-info{ position:absolute;z-index:3;left:calc(var(--pu)*9.2);top:max(calc(var(--pu)*13),150px); /* dưới khối tiêu đề, kể cả khi tiêu đề bị chặn cỡ tối thiểu */ width:max(calc(var(--pu)*24),270px);display:grid;gap:calc(var(--pu)*1.8); } .cpc-card{ padding:calc(var(--pu)*1.1) calc(var(--pu)*1.6) calc(var(--pu)*1.7) calc(var(--pu)*1.4); background:url("../common/character_bio/jsjs_di.png") left top/100% 100% no-repeat, linear-gradient(90deg,rgba(64,150,240,.26),rgba(40,120,220,.08)); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); display:grid;gap:calc(var(--pu)*.7); } .cpc-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .5em} .cpc-name h3{font-size:clamp(34px,3.4vw,64px);line-height:1.05;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,26,80,.55)} .cpc-name span{font:700 clamp(13px,1.15vw,22px)/1 var(--body);letter-spacing:.02em;text-transform:uppercase;color:#ffe3a3} .cpc-epi{margin:0;font:700 clamp(13px,1vw,18px)/1.4 var(--body);color:#ffe3a3} .cpc-card .char-desc{max-width:none;color:#fff;font-weight:600;font-size:clamp(14px,.95vw,18px);line-height:1.7;text-shadow:0 1px 3px rgba(0,26,80,.7)} .cpc-nav{display:flex;gap:clamp(40px,3.75vw,72px)} .cpc-arrow{ width:clamp(46px,3.5vw,68px);aspect-ratio:98/91; background:url("../common/character_bio/jsjs_jiantou.png") center/contain no-repeat; filter:drop-shadow(0 4px 12px rgba(0,0,0,.45));opacity:.92;transition:opacity .18s ease,transform .18s ease; } .cpc-arrow:hover{opacity:1;transform:scale(1.07)} .cpc-arrow.next{scale:-1 1} /* ảnh video bên phải, nút MORE+ nhỏ phía trên (bấm cả cụm để cuộn xuống phần Video) */ .cpc-vid{ position:absolute;z-index:3;right:calc(var(--pu)*.6);top:calc(var(--pu)*17.5);width:calc(var(--pu)*21.5); display:grid;justify-items:end;gap:calc(var(--pu)*.5);line-height:0; } .cpc-vid .more{width:clamp(44px,3.2vw,72px);height:auto} .cpc-vid .thumb{position:relative;display:block;width:100%;aspect-ratio:550/312;filter:drop-shadow(0 12px 24px rgba(0,20,70,.5))} .cpc-vid .thumb>img{width:100%;height:100%;object-fit:cover;display:block} .cpc-vid .play{ position:absolute;left:50%;top:50%;translate:-50% -50%;width:17%;aspect-ratio:102/64; background:url("../common/character_bio/jsjs_bofananniu.png") center/contain no-repeat;transition:scale .18s ease; } .cpc-vid:hover .play{scale:1.12} /* PC hẹp (901–1199px): khối chữ không co theo tỉ lệ nữa nên chiếm nhiều bề ngang hơn — dịch nhân vật sang phải và thu nhỏ lại để khỏi đè lên khung chữ, thu ảnh video cho gọn */ @media (max-width:1199px){ .cpc-art{left:60%;width:calc(var(--pu)*48)} .cpc-vid{width:calc(var(--pu)*18)} } /* thanh chọn nhân vật: đường kẻ tràn hết chiều ngang, chỉ hiện 5 ô (2 sao – nhân vật đang chọn – 2 sao) */ .char-rail{ position:relative;margin-top:calc(var(--pu)*-1); background:linear-gradient(90deg,transparent,rgba(160,222,255,.75) 10%,rgba(160,222,255,.75) 90%,transparent) 0 calc(var(--avh)/2)/100% 1px no-repeat; } .avatars{max-width:calc(var(--slot)*5);margin-inline:auto;padding:0 calc(var(--slot)*2) var(--cap)} .avatars button{ width:var(--slot);height:var(--avh); background:url("../common/character_bio/jsjs_fenge.png") center/var(--star) auto no-repeat; } .avatars button:hover{filter:brightness(1.35)} .avatars button img{display:none} .avatars button[aria-selected="true"]{background:none;filter:none} .avatars button[aria-selected="true"] img{display:block;width:var(--avw);margin-inline:auto} .avatars button[aria-selected="true"]::after{ content:attr(aria-label);position:absolute;top:100%;left:50%;translate:-50% 4px; font:700 clamp(13px,1vw,18px)/1.2 var(--body);color:#fff;white-space:nowrap;text-shadow:0 1px 4px rgba(0,26,80,.8); } } /* ===== 3. ĐẶC SẮC ======================================================== */ /* PC: một ảnh lớn (features_banner1–4 trong common/features/ — cùng ảnh với bản mobi) + tiêu đề / mô tả bên dưới. aspect-ratio khớp đúng tỉ lệ banner (1051×552) nên ảnh không bị cắt. Bản mobi có bố cục riêng (nhân vật + chữ + ảnh chụp) — xem khối "Đặc sắc" trong @media (max-width:900px) bên dưới. */ .feat{position:relative;display:grid;gap:22px;justify-items:center} .feat-stage{position:relative;width:min(1100px,100%);aspect-ratio:1051/552;background:var(--deep);border:1px solid var(--line);overflow:hidden} .feat-stage::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(111,200,255,.16)} .feat-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease} .feat-slide.on{opacity:1;visibility:visible} /* chỉ áp cho ảnh trực tiếp của slide (bản PC) — bản mobi có cấu trúc lồng riêng */ .feat-slide>img{width:100%;height:100%;object-fit:cover;display:block} .feat-nav{ position:absolute;top:50%;z-index:3; width:62px;aspect-ratio:124/115;background:url("../common/official/tese_anniu.png") center/contain no-repeat; opacity:.7;transform:translateY(-50%);transition:opacity .18s ease,transform .18s ease; } .feat-nav{opacity:.92;filter:drop-shadow(0 4px 12px rgba(0,0,0,.75))} .feat-nav:hover{opacity:1} .feat-nav.prev{left:-14px} .feat-nav.prev:hover{transform:translateY(-50%) scale(1.07)} .feat-nav.next{right:-14px;transform:translateY(-50%) scaleX(-1)} .feat-nav.next:hover{transform:translateY(-50%) scaleX(-1) scale(1.07)} .feat-cap{display:grid;justify-items:center;gap:6px;text-align:center;text-shadow:0 1px 3px rgba(0,22,64,.85),0 0 12px rgba(0,22,64,.55)} .feat-cap h3{font-size:clamp(26px,3vw,40px);text-transform:uppercase} .feat-cap p{margin:0;color:var(--mist)} .feat-dots{display:flex;gap:10px} .feat-dots button{width:26px;height:26px;background:url("../common/official/1.png") center/contain no-repeat;opacity:.5} .feat-dots button[aria-selected="true"]{background-image:url("../common/official/2.png");opacity:1} /* ===== 4. VIDEO ========================================================== */ /* grid-template-columns:minmax(0,1fr) — nếu không, thanh thumbnail (max-content) sẽ kéo rộng cả cột và làm khung video tràn ra ngoài màn hình */ .vid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;justify-items:center} .vid>*{min-width:0;max-width:100%} .vid-stage{ position:relative;width:min(1100px,100%);aspect-ratio:1324/757; background:url("../pc/official/yingyin_sp_di.png") center/100% 100% no-repeat; display:grid;place-items:center;padding:2.4%; } .vid-screen{position:relative;width:100%;height:100%;overflow:hidden;background:#04101f} .vid-screen img{width:100%;height:100%;object-fit:cover;display:block} .vid-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .vid-play{ position:absolute;left:50%;top:50%;z-index:2; width:clamp(84px,9vw,132px);aspect-ratio:213/134; background:url("../pc/official/yingyin_bofananniu.png") center/contain no-repeat; transform:translate(-50%,-50%);transition:transform .2s ease,filter .2s ease; filter:drop-shadow(0 6px 18px rgba(0,0,0,.8)); } .vid-play:hover{transform:translate(-50%,-50%) scale(1.09);filter:drop-shadow(0 6px 18px rgba(0,0,0,.8)) brightness(1.15)} .vid-title{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:46px 22px 16px;font:700 17px/1.3 var(--body);background:linear-gradient(0deg,rgba(3,16,31,.92),transparent);pointer-events:none} .vid-rail{display:flex;align-items:center;gap:14px;width:100%;min-width:0} .vid-thumbs{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:4px 2px;min-width:0;flex:1 1 auto;justify-content:center} .vid-thumbs::-webkit-scrollbar{display:none} .vid-thumbs button{ position:relative;flex:0 0 auto;width:210px;aspect-ratio:380/219;line-height:0; background:url("../common/official/yingyin_lb_yaan.png") center/100% 100% no-repeat; padding:6px;opacity:.65;transition:opacity .2s ease,transform .2s ease; } .vid-thumbs button:hover{opacity:.9} .vid-thumbs button[aria-selected="true"]{ opacity:1;transform:translateY(-3px); background-image:url("../common/official/yingyin_lb_01.png"); } .vid-thumbs img{width:100%;height:100%;object-fit:cover} .vid-thumbs em{ position:absolute;left:8px;right:8px;bottom:8px;font-style:normal; font:600 12px/1.3 var(--body);text-align:left;text-shadow:0 1px 6px #000; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; padding-top:16px;background:linear-gradient(0deg,rgba(3,16,31,.9),transparent); } .vid-more{display:block;margin:0 auto;line-height:0;opacity:.8;transition:opacity .18s ease,transform .18s ease} .vid-more img{height:36px;width:auto} .vid-more:hover{opacity:1;transform:translateX(4px)} /* ===== Chân trang ======================================================== */ /* overflow-x:clip — nhãn tên hiện khi rê chuột (.social .tip) ẩn nhưng vẫn nằm ở hai mép chân trang và có thể lòi ra ngoài màn hình hẹp, làm cả trang rộng hơn màn hình nên kéo ngang được / trông như bị lệch. clip (khác hidden) không biến footer thành khung cuộn, nên nhãn vẫn bung lên phía trên bình thường. */ /* Chân trang cũng chồng lên section Video đúng --fz và có nền trong suốt ở đỉnh, đặc dần xuống dưới → nối liền với nền Video, không có đường viền ngang nữa. Phần đệm trên cộng thêm --fz để chữ chân trang vẫn cách nội dung Video như cũ. */ .ft{position:relative;overflow-x:clip;margin-top:calc(-1 * var(--fz));padding-block:calc(var(--fz) + 56px) 64px;background:linear-gradient(180deg,transparent,rgba(8,40,80,.6) var(--fz),#07223f);font-size:13px;color:var(--mist)} .ft-top{display:grid;grid-template-columns:auto 1fr auto;gap:32px 48px;align-items:start} .ft-brand{display:grid;gap:14px;justify-items:start} .ft-brand img.lg{height:64px;width:auto} .ft-nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:14px} .ft-nav a{color:var(--paper)} .ft-nav a:hover{color:var(--sky-2)} .ft p{margin:3px 0} .ft .warn{display:inline-block;margin-top:14px;padding:9px 14px;border:1px solid rgba(243,208,137,.4);color:#f6e3bb} /* icon vuông bo góc, tự có nền đen riêng (pc/official/icon_*.png) nên không lồng thêm khung — chỉ thêm bóng đổ + nhấc lên khi rê chuột cho nổi khối, và một nhãn tên nhỏ bung lên thay cho QR cũ (bộ icon mới — Fanpage/Group/Discord/YouTube/TikTok — không có QR). */ .social{display:flex;gap:14px} .social>div{position:relative} .social a{ display:block;width:48px;height:48px;line-height:0; filter:drop-shadow(0 6px 14px rgba(0,10,30,.5)); transition:transform .2s ease,filter .2s ease; } .social a:hover,.social a:focus-visible{transform:translateY(-4px);filter:drop-shadow(0 10px 22px rgba(47,156,240,.65))} .social img.ic{width:100%;height:100%;object-fit:contain;display:block} .social .tip{ position:absolute;bottom:calc(100% + 11px);left:50%;translate:-50% 4px;z-index:2; padding:6px 11px;white-space:nowrap;font:700 11px/1 var(--body);letter-spacing:.03em;color:#fff; background:rgba(6,37,69,.96);border:1px solid var(--line);box-shadow:0 12px 30px -14px rgba(0,0,0,.8); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .18s ease,visibility .18s ease,translate .18s ease; } .social .tip::after{content:"";position:absolute;top:100%;left:50%;translate:-50% 0;border:6px solid transparent;border-top-color:rgba(6,37,69,.96)} .social>div:hover .tip,.social>div:focus-within .tip{opacity:1;visibility:visible;translate:-50% 0} .totop{ position:fixed;right:22px;bottom:100px;z-index:65;width:50px;height:50px; display:grid;place-items:center;border:1px solid var(--line); background:rgba(6,37,69,.9);backdrop-filter:blur(6px); opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease,transform .18s ease; } .totop.on{opacity:1;visibility:visible} .totop:hover{transform:translateY(-3px)} .totop svg{width:20px;fill:var(--sky-2)} /* ===== Hộp đọc tin ======================================================= */ dialog{ width:min(760px,calc(100vw - 28px));padding:0;color:var(--paper); border:1px solid var(--line);background:none; } dialog::backdrop{background:rgba(2,8,16,.84);backdrop-filter:blur(7px)} dialog[open]{animation:dlgIn .28s cubic-bezier(.2,.8,.3,1) both} dialog[open]::backdrop{animation:dlgFade .28s ease both} @keyframes dlgIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} @keyframes dlgFade{from{opacity:0}to{opacity:1}} .dlg-in{ position:relative;display:grid;outline:none; /* nhận con trỏ khi mở, không vẽ viền */ background:linear-gradient(180deg,#0c3560,#061c33 42%,#04162a); box-shadow:0 40px 90px -30px #000; } /* vệt sáng mảnh trên mép — cùng ngôn ngữ thiết kế với đầu mỗi section */ .dlg-in::before{ content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(111,200,255,.5) 26%,rgba(191,230,255,.85) 50%,rgba(111,200,255,.5) 74%,transparent); } .dlg-h{ position:relative;padding:26px 70px 18px 28px;border-bottom:1px solid var(--line-soft); background:radial-gradient(120% 150% at 6% 0%,rgba(47,156,240,.2),transparent 62%); } .dlg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px} .dlg-h h3{font-size:clamp(24px,3.2vw,34px);text-transform:uppercase} .dlg-x{ position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px; font-size:17px;line-height:1;color:var(--ice); border:1px solid var(--line);background:rgba(4,20,38,.55); transition:color .18s ease,border-color .18s ease,transform .25s ease; } .dlg-x:hover{color:#fff;border-color:var(--sky-2);transform:rotate(90deg)} .dlg-b{ padding:22px 28px 4px;max-height:min(52vh,440px);overflow:auto; font-size:15px;line-height:1.8;color:#cfe2f5; scrollbar-width:thin;scrollbar-color:rgba(111,200,255,.4) transparent; } .dlg-b::-webkit-scrollbar{width:8px} .dlg-b::-webkit-scrollbar-thumb{background:rgba(111,200,255,.35)} .dlg-b::-webkit-scrollbar-thumb:hover{background:rgba(111,200,255,.6)} .dlg-b p{margin:0 0 14px} .dlg-b p:first-of-type{color:#e6f1fc} /* Ảnh minh hoạ thu nhỏ lại (trước đây to full-width, chiếm gần hết khung, phải cuộn mới thấy chữ) — giờ giới hạn chiều cao, ảnh dọc/ngang/vuông gì cũng cắt gọn về cùng một tỉ lệ băng rộng (object-fit:cover, neo lên trên object-position vì nhân vật/chữ trong ảnh sự kiện thường nằm nửa trên), có khung viền sáng nhẹ + bóng đổ cho rõ ràng, tách hẳn khỏi khối chữ bên dưới. */ .dlg-b img{ display:block;width:100%;height:170px;object-fit:cover;object-position:center 22%; margin:0 0 18px;border:1px solid var(--line-soft);box-shadow:0 10px 24px -14px rgba(0,0,0,.8); } /* vệt mờ ở đáy: báo hiệu còn nội dung bên dưới khi bài dài */ .dlg-b::after{ content:"";display:block;position:sticky;bottom:0;height:34px;margin-top:-34px; background:linear-gradient(180deg,transparent,#05182c);pointer-events:none; } /* Nút mở bài đầy đủ (link của từng tin trong SITE.news, thiếu thì dùng links.allNews) */ .dlg-cta{padding:2px 28px 18px} .dlg-more{ display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 20px; font:800 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#062033; background:linear-gradient(180deg,#8fd8ff,var(--sky)); clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%); transition:filter .18s ease,transform .18s ease; } .dlg-more i{font-style:normal;font-size:17px;line-height:1} .dlg-more:hover{filter:brightness(1.1);transform:translateY(-1px)} /* Chuyển sang bài trước / bài sau ngay trong hộp */ .dlg-f{display:flex;gap:10px;padding:14px 28px 18px;border-top:1px solid var(--line-soft)} .dlg-nav{ display:flex;align-items:center;gap:10px;flex:1 1 0;min-width:0;padding:9px 12px; text-align:left;color:var(--mist);border:1px solid var(--line-soft); transition:color .18s ease,border-color .18s ease,background .18s ease; } .dlg-nav:hover{color:var(--paper);border-color:var(--line);background:rgba(47,156,240,.1)} .dlg-nav.next{justify-content:flex-end;text-align:right} .dlg-nav i{font-style:normal;font:400 20px/1 var(--body);color:var(--sky-2)} .dlg-nav span{display:grid;min-width:0} .dlg-nav b{font:700 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--sky-2)} .dlg-nav em{ margin-top:5px;font:500 13px/1.35 var(--body);font-style:normal; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* ===== Hộp video nhân vật ================================================ Dùng lại khung + nút đóng (.dlg-x) của hộp đọc tin ở trên, chỉ thay phần trong bằng khung video 16:9. PC rộng hơn hộp đọc tin (920px thay vì 760px) vì đây là video; mobi giữ nguyên bề rộng dialog mặc định (không khai báo lại ở khối @media mobi bên dưới). */ @media (min-width:901px){ #vdlg{width:min(920px,calc(100vw - 28px))} } .vdlg-in{position:relative;background:#000;box-shadow:0 40px 90px -30px #000;line-height:0} .vdlg-in video{display:block;width:100%;aspect-ratio:16/9;background:#000} .vdlg-in .dlg-x{background:rgba(4,20,38,.75)} /* nền nút đóng đậm hơn cho nổi trên nền video sáng */ /* ===== Chỉ hiện ở 1 kích thước ========================================== */ .only-mobi{display:none} /* ========================================================================== ============================ MOBILE ≤ 900px =========================== ========================================================================== */ @media (max-width:900px){ :root{--hd:58px;--gutter:16px} body{font-size:14.5px} .only-mobi{display:revert} .only-pc{display:none!important} /* ô lát nhỏ lại cho vừa màn hình hẹp, ánh sáng mặt nước phủ ngắn hơn */ .bgfix::before{inset:-380px 0;background-size:380px 380px} @keyframes rise{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-380px,0)}} .surface{height:150vh} .surface::before{background-size:auto,560px 560px} /* Ảnh/video dọc bản mobi — khung cao theo đúng tỉ lệ (bottom:auto để aspect-ratio có tác dụng) */ .hero-kv{ bottom:auto;aspect-ratio:941/1672; background:url("../mobi/official/bg1_m.jpg") center top/100% auto no-repeat; -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent); mask-image:linear-gradient(180deg,#000 82%,transparent); } .hero-kv::after{background:linear-gradient(180deg,transparent 74%,rgba(6,34,70,.42) 100%)} .hero-mist{ bottom:auto;aspect-ratio:941/1672; /* khung sương kết thúc giữa hero, giờ có nền chìm phía dưới nên mờ dần ở mép thay vì cắt ngang thành một vệt sáng */ -webkit-mask-image:linear-gradient(180deg,#000 66%,transparent); mask-image:linear-gradient(180deg,#000 66%,transparent); } /* Chữ + 4 nút tải dài hơn phần ảnh KV nên hàng nút dưới cùng tràn xuống chân ảnh, nơi ảnh đã tan hết và chỉ còn nền trang phẳng. Lót thêm một nền chìm xanh thẫm từ chân ảnh xuống hết hero — nằm DƯỚI .hero-kv (đứng trước trong DOM) nên ảnh mờ dần vào nền này thay vì cụt giữa chừng, và nối liền sang section Tin tức. */ .hero::before{ content:"";position:absolute;left:0;right:0;top:120vw;bottom:0;z-index:0;pointer-events:none; background:linear-gradient(180deg,rgba(14,68,128,0),rgba(14,68,128,.9) 40vw); } /* Header */ .hd{background:rgba(9,40,78,.95);box-shadow:0 1px 0 var(--line-soft)} .hd .wrap{gap:10px} .logo img{height:40px} .menu{display:none} .burger{display:grid} .hd-cta{margin-left:auto} .btn-dl{height:36px;padding:0 16px;font-size:12.5px} .hd .btn-dl{height:36px;min-width:102px;padding:0 12px;font-size:17px} .lang-btn{height:36px;padding:0 8px;gap:5px;font-size:12px} .lang-btn .flag{width:20px;height:13px} /* Hero */ /* Ảnh cao 177.7vw, hiện trọn (không có logo lớn đè lên — logo đã có trên thanh menu). Chữ + nút bắt đầu ở 150vw (~84% chiều cao ảnh). */ .hero{min-height:0;display:block;padding-block:calc(var(--hd) + 16px) 76px;text-align:center} .hero-in{ grid-template-columns:minmax(0,1fr);grid-template-areas:none;justify-items:center;gap:12px; padding-top:calc(147vw - var(--hd) - 16px); /* thu gọn nhẹ (trước 150vw / gap 16) để nút "Cuộn xuống" cố định ở đáy không đè lên nút tải trên máy ~844px */ } .hero-logo,.hero .lead,.hero .dl-row,.hero-foot{grid-area:auto} .dl-row{justify-content:center} .hero-logo{display:none} .hero .lead{max-width:34ch;font-size:14.5px} .stores{justify-content:center;gap:10px} .stores a img{height:48px} .qrs{display:none} .hero-foot{justify-content:center} /* Mũi tên "Cuộn xuống" cố định ở đáy màn hình (không còn nằm trong hero): máy thấp như 375×667 hay 320×568 thì đáy hero nằm dưới mép màn hình nên nút cũ không ai thấy và không biết trang còn cuộn tiếp. Chỉ có mũi tên nhấp nháy (không chữ, không nền) — bóng đổ ở .scrolldown svg giúp nhìn rõ trên mọi phần nội dung; padding chỉ để vùng bấm đủ to cho ngón tay. JS thêm class .off để ẩn khi tới cuối trang, hoặc khi nó sắp đè lên chữ / nút tải của hero (máy thấp: nội dung hero bị cắt ở mép màn hình, tự nó đã báo còn cuộn tiếp). */ .scrolldown{ position:fixed;bottom:calc(6px + env(safe-area-inset-bottom,0px));z-index:60; padding:6px 18px; transition:opacity .25s ease,visibility .25s ease; } .scrolldown.off{opacity:0;visibility:hidden} /* Section head */ :root{--fz:56px} .shead{margin-bottom:28px} .shead-t{height:clamp(52px,14vw,72px)} .shead-wm{width:100%;opacity:.3;translate:-50% -54%} /* Tin tức */ .news{grid-template-columns:1fr;gap:26px} .slide-cap{font-size:14.5px;padding:34px 14px 14px} .ntabs{gap:4px} .ntabs button{min-width:0;flex:1 1 0;height:34px;padding:0 6px;font-size:12.5px} .nlist button{grid-template-columns:auto 1fr;gap:8px;padding:12px 0;align-items:start} .nlist .bullet{margin-top:6px} .ncat{display:none} .dlg-meta .ncat{display:inline-block} /* trong hộp đọc tin thì vẫn hiện */ dialog{width:calc(100vw - 20px)} .dlg-h{padding:22px 58px 14px 18px} .dlg-x{top:10px;right:10px;width:36px;height:36px} .dlg-b{padding:18px 18px 4px;font-size:14.5px} .dlg-cta{padding:2px 18px 14px} .dlg-f{padding:12px 18px 16px;gap:8px} .dlg-nav em{display:none} /* màn hẹp: chỉ để nhãn cho gọn */ .ntitle{white-space:normal;font-size:14px;line-height:1.45} .ndate{grid-column:2;font-size:12px} .btn-more{margin-top:18px} .btn-more img{height:38px} /* Nhân vật — bố cục dọc kiểu game: nhân vật lớn tràn ngang, mũi tên hai bên ảnh, khung chữ mờ đè lên chân nhân vật, ảnh video nhỏ ở góc phải khung chữ; bên dưới là thanh chọn nhân vật dạng đường kẻ có ngôi sao — nhân vật đang chọn hiện to ở giữa (kèm tên), các nhân vật khác là ngôi sao (bấm để chọn, hoặc vuốt / bấm mũi tên). --u = 1% bề rộng khung (tối đa 560px): mọi kích thước tính theo nó để giữ nguyên tỉ lệ. */ #characters{--u:calc(min(100vw,560px)/100)} .char-stage{display:block;min-height:0;margin-inline:calc(-1 * var(--gutter))} /* tràn hết bề ngang */ .mchar{position:relative;max-width:560px;margin-inline:auto} .mchar-deco{position:absolute;z-index:0;pointer-events:none;opacity:.8} .mchar-deco.top{top:-12px;right:0;width:62%} .mchar-deco.bottom{bottom:-2%;left:0;width:100%;opacity:.5} .mchar-art{position:relative;z-index:1;width:100%;aspect-ratio:1080/1320} .mchar-art>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 34px rgba(0,0,0,.5));animation:charIn .5s cubic-bezier(.2,.8,.3,1) both} .mchar-nav{ position:absolute;top:46%;translate:0 -50%;z-index:3; width:calc(var(--u)*10);aspect-ratio:98/91; background:url("../common/character_bio/jsjs_jiantou.png") center/contain no-repeat; filter:drop-shadow(0 4px 12px rgba(0,0,0,.5)); } .mchar-nav.prev{left:var(--u)} .mchar-nav.next{right:var(--u);scale:-1 1} /* khung chữ kéo lên đè vào phần trống dưới chân nhân vật (~20% bề rộng) */ .mchar-card{ position:relative;z-index:2;margin:-20% 2.5% 0; padding:calc(var(--u)*2.6) calc(var(--u)*3.4) calc(var(--u)*3.4); /* jsjs_di.png mờ dần về bên phải (độ đặc 50% → 2%) nên lót thêm một lớp xanh đều để nửa phải vẫn là khung, còn chữ trắng vẫn đọc được trên phần chân nhân vật lấn vào khung */ background:url("../mobi/official/jsjs_di.png") center/100% 100% no-repeat, linear-gradient(90deg,rgba(64,150,240,.34),rgba(40,120,220,.26)); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); display:grid;gap:calc(var(--u)*1.4);text-align:left; } .mchar-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 calc(var(--u)*1.6);max-width:70%} .mchar-name h3{font-size:clamp(26px,7.4vw,40px);line-height:1.05;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,26,80,.55)} .mchar-name span{font:700 clamp(11px,3vw,14px)/1 var(--body);letter-spacing:.02em;text-transform:uppercase;color:#ffe3a3} .mchar-epi{margin:0;font:700 clamp(12px,3.3vw,14px)/1.4 var(--body);color:#ffe3a3} .mchar-card .char-desc{max-width:none;color:#fff;font-weight:600;font-size:clamp(13px,3.5vw,15px);line-height:1.6;text-shadow:0 1px 3px rgba(0,26,80,.7)} /* ảnh video: nhô lên khỏi mép trên khung chữ, chỉ lấn xuống ~4.7% bề rộng */ .mchar-vid{ position:absolute;z-index:3;right:calc(var(--u)*-1.6);bottom:calc(100% - var(--u)*4.7); width:calc(var(--u)*28.3);aspect-ratio:550/312;overflow:hidden;line-height:0; border:1px solid rgba(190,232,255,.8);background:#0a2a55;box-shadow:0 8px 20px -8px rgba(0,20,60,.8); } .mchar-vid img{width:100%;height:100%;object-fit:cover;display:block} .mchar-vid .play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:40%;aspect-ratio:102/64;background:url("../common/character_bio/jsjs_bofananniu.png") center/contain no-repeat} /* thanh chọn nhân vật: đường kẻ ngang tràn màn hình, chừa 7u ở đáy cho dòng tên */ .char-rail{display:block;position:relative;margin:calc(var(--u)*5) calc(-1 * var(--gutter)) 0} .avatars{ gap:0;padding:0 calc(50% - var(--u)*11) calc(var(--u)*7); background:linear-gradient(90deg,transparent,rgba(160,222,255,.75) 12%,rgba(160,222,255,.75) 88%,transparent) 0 calc(50% - var(--u)*3.5)/100% 1px no-repeat; } .avatars button{ position:relative;flex:0 0 auto;width:calc(var(--u)*20);height:calc(var(--u)*17.4); opacity:1;filter:none;transform:none; background:url("../common/character_bio/jsjs_fenge.png") center/calc(var(--u)*7) auto no-repeat; } .avatars button img{display:none} .avatars button:hover{opacity:.8;filter:none} .avatars button[aria-selected="true"]{width:calc(var(--u)*22);background:none;transform:none} .avatars button[aria-selected="true"] img{display:block;width:100%} .avatars button[aria-selected="true"]::after{ content:attr(aria-label);position:absolute;top:100%;left:50%;translate:-50% 2px; font:700 clamp(11px,3vw,13px)/1.2 var(--body);color:#fff;white-space:nowrap;text-shadow:0 1px 4px rgba(0,26,80,.8); } /* Đặc sắc — bố cục dọc kiểu mobi (chỉ mobile; bản PC là một ảnh banner lớn ở khối "3. ĐẶC SẮC"). Mỗi slide: hàng trên = nhân vật (trái) + số thứ tự / tiêu đề / mô tả (phải), hàng dưới = ảnh chụp game full bề rộng. Chữ lấy từ config.js nên đổi theo ngôn ngữ. Chân nhân vật đè lên mép trên ảnh chụp cho có chiều sâu. Slide đầu nằm trong luồng để tự quy định chiều cao khung, các slide còn lại chồng lên trên → vẫn chuyển cảnh mờ dần mà không cần đặt chiều cao cứng (chiều cao mỗi slide cố định theo cấu trúc, không phụ thuộc độ dài chữ vì chữ được đặt tuyệt đối trong hàng trên). */ .feat{gap:18px} .feat-stage{aspect-ratio:auto;border:0;background:none} .feat-stage::after{display:none} .feat-slide:first-of-type{position:relative} .mfeat{position:relative;width:100%;display:grid} .mfeat-top{position:relative;z-index:2;height:min(64vw,340px);margin-bottom:-12px} /* max-width:50% + contain: ảnh vuông (char2, char3) không phình sang cột chữ; ảnh cao (char1, char4) vẫn cao hết khung */ .mfeat-char{position:absolute;left:-6%;bottom:0;height:100%;width:auto;max-width:56%;object-fit:contain;object-position:left bottom;filter:drop-shadow(0 18px 28px rgba(0,0,0,.55))} /* Ảnh nhân vật mới (common/features/) vẽ kín gần hết khung, hầu như không còn viền trong suốt quanh người như ảnh cũ — bled -6% ra ngoài như mặc định sẽ cắt mất một phần người (trông lệch/mất cân đối). .flush bỏ hẳn độ bled đó, giữ nhân vật áp sát mép trái mà không bị cắt. Bật bằng cách đặt art.charFlush:true cho feature đó trong config.js. */ .mfeat-char.flush{left:0;max-width:52%} .mfeat-txt{position:absolute;right:2%;top:0;bottom:14px;width:46%;display:flex;flex-direction:column;justify-content:center;gap:8px;text-align:left; text-shadow:0 1px 3px rgba(0,22,64,.85),0 0 12px rgba(0,22,64,.55)} .mfeat-txt i{font:800 40px/1 var(--display);font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--sky-2);opacity:.6} .mfeat-txt h3{font-size:clamp(22px,6.6vw,32px);text-transform:uppercase;line-height:1.05;text-wrap:balance} .mfeat-txt p{margin:0;color:var(--mist);font-size:clamp(12.5px,3.5vw,15px);line-height:1.5} .mfeat-shot{position:relative;width:100%;border:1px solid var(--line);display:block} .feat-cap{display:none} /* trên mobi chữ đã nằm trong từng slide (.mfeat-txt) */ /* mũi tên canh giữa chiều cao ảnh chụp game (≈ 78% chiều cao slide) */ .feat-nav{width:48px;top:78%} .feat-nav.prev{left:-6px} .feat-nav.next{right:-6px} /* Video */ .vid-stage{ width:100%;aspect-ratio:1040/595;padding:2.2%; background-image:url("../mobi/official/yingyin_sp_di.png"); } .vid-play{width:92px;aspect-ratio:163/102;background-image:url("../mobi/official/yingyin_bofananniu.png")} .vid-title{font-size:14px;padding:34px 14px 12px} .vid-thumbs button{width:170px} .vid-more img{height:32px} /* Chân trang */ .ft{padding-block:36px 128px;text-align:center;font-size:12.5px} .ft-top{grid-template-columns:1fr;gap:22px;justify-items:center} .ft-brand{justify-items:center;gap:10px} .ft-brand img.lg{height:52px} .ft-nav{justify-content:center;gap:6px 16px;margin-bottom:10px} .social{justify-content:center} .social a{width:44px;height:44px} .totop{right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:44px;height:44px} } /* Màn hình rất hẹp */ @media (max-width:380px){ /* header chật: bớt khoảng đệm để logo + ngôn ngữ + tải game + menu vừa 1 hàng */ .hd .wrap,.hd-cta{gap:6px} .lang-btn{padding:0 6px} .lang-btn .caret{display:none} .btn-dl,.hd .btn-dl{padding:0 10px} .hd .btn-dl{min-width:0} .stores a img{height:44px} .hero h1{font-size:34px} } /* máy rất hẹp (≈320px): logo nhỏ lại một chút cho vừa nút "DOWNLOAD" bản tiếng Anh */ @media (max-width:340px){ .logo img{height:34px} }