/* ===================================================================== */ /* ============ TRANG CHỦ 9DRAGONS - CINEMATIC HÀNH ĐỘNG =============== */ /* ===================================================================== */ .home-cinematic { --gold: #ffcf7a; --gold-deep: #c9962f; --ink: #0a0704; } /* Trang chủ tự quản khoảng cách trên cùng */ body.home-page .content-shell { padding-top: 0 !important; padding-left: 0; padding-right: 0; max-width: 100%; } /* ===================== 1. HERO ===================== */ .hero { position: relative; min-height: clamp(520px, 78vh, 820px); display: flex; align-items: center; overflow: hidden; margin-bottom: 0; } /* KHÔNG đặt ảnh nền riêng cho hero — dùng chung nền cố định của . Trước đây hero có nền riêng kết thúc bằng màu đặc, tạo ra ĐƯỜNG CẮT ngang rõ rệt ở đáy hero. Giờ nền liền mạch toàn trang. */ .hero__bg { display: none; } /* Lớp phủ điện ảnh. QUAN TRỌNG: radial-gradient luôn đạt màu đậm nhất ngay tại MÉP phần tử, nên khi hết hero sẽ lộ ra ĐƯỜNG CẮT ngang. Vì vậy phải mask cho lớp phủ tan hết trước khi chạm đáy hero. */ .hero__veil { position: absolute; inset: 0; background: radial-gradient(125% 95% at 50% 32%, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.4) 100%), linear-gradient(180deg, rgba(6,4,2,.58) 0%, rgba(6,4,2,.06) 34%, rgba(6,4,2,0) 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 96%); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 96%); } .hero__inner { position: relative; z-index: 3; width: 100%; max-width: 1240px; margin: 0 auto; padding: 90px 20px 46px; display: grid; grid-template-columns: .9fr 1.3fr; align-items: center; gap: 20px; text-align: left; } .hero__copy { min-width: 0; } /* Nhân vật PNG + ánh trăng phía sau (không khung) */ .hero__art { position: relative; justify-self: center; width: min(100%, 760px); margin: 0; display: flex; align-items: flex-end; justify-content: center; /* KHÔNG dùng mask ở đây: mask sẽ CẮT CỨNG mọi phần tử con tràn ra ngoài khung, biến quầng sáng tròn thành hình chữ nhật sáng có cạnh rõ. Thay vào đó: giữ mọi phần tử con nằm gọn trong khung + mép ảnh PNG đã trong suốt sẵn. */ } /* Cụm 2 nhân vật đứng cạnh nhau, chồng nhẹ cho tự nhiên */ .hero__chars { position: relative; width: 100%; display: flex; align-items: flex-end; justify-content: center; } /* Bóng đổ dưới chân — KHÔNG dùng filter/drop-shadow trên ảnh nhân vật (filter toả ra ngoài hộp, gặp mask sẽ bị cắt phẳng thành viền chữ nhật). Dùng 2 ellipse gradient riêng, nằm DƯỚI nhân vật (z-index 0). */ .hero__ground { position: absolute; left: 0; right: 0; bottom: 3%; height: 20%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 22% 48% at 30% 68%, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 52%, rgba(0,0,0,.10) 72%, transparent 84%), radial-gradient(ellipse 20% 44% at 64% 72%, rgba(0,0,0,.52) 0%, rgba(0,0,0,.24) 52%, rgba(0,0,0,.08) 72%, transparent 84%); } /* char04 (bên phải) — lớp SAU CÙNG của cụm nhân vật nhưng vẫn TRƯỚC trăng. Trăng z-index -2, char04 = 0, char01 = 1, char03 = 2, lửa = 3, mây = 4. Chỉ dùng brightness() (không dùng drop-shadow) nên dùng chung với mask an toàn. */ .hero__c4 { position: absolute; right: 11%; /* TĂNG số này => char04 dịch sang TRÁI */ bottom: 1%; /* TĂNG số này => char04 dịch lên TRÊN */ width: 21%; /* TĂNG số này => char04 to hơn */ height: auto; z-index: 0; opacity: .95; filter: brightness(.72) saturate(.92) contrast(1.02); -webkit-mask-image: linear-gradient(to bottom, #000 74%, rgba(0,0,0,.3) 91%, transparent 100%); mask-image: linear-gradient(to bottom, #000 74%, rgba(0,0,0,.3) 91%, transparent 100%); animation: artFloat 11s ease-in-out infinite alternate; animation-delay: -6s; pointer-events: none; } /* char03 (bên trái) — bọc riêng để định vị lửa theo ảnh */ /* KHÔNG đặt z-index ở wrapper: nó tạo stacking context, khiến mix-blend-mode của cầu lửa thành "nhóm cô lập" và lộ viền theo đúng hộp của char03. Thứ tự lớp được đặt trực tiếp trên ảnh/lửa bên dưới. */ .hero__c3 { position: relative; flex: 0 0 auto; width: 56%; } /* Chỉ ảnh nhân vật (con trực tiếp) — không chạm ảnh lửa bên trong .palm-fire */ .hero__c3 > img { width: 100%; height: auto; display: block; } /* Vầng trăng phía sau nhân vật. moon.png có 2 "cánh" mây vươn ngang, kết thúc bằng mép xám lởm chởm. Mask ngang cho 2 cánh tan dần, giữ nguyên đĩa trăng ở giữa (26%–74%). */ .hero__moon { position: absolute; left: 50%; top: 42%; width: 100%; /* KHÔNG tràn ra ngoài .hero__art (sẽ bị mask cắt cứng) */ max-width: none; transform: translate(-50%, -50%); pointer-events: none; user-select: none; z-index: -2; opacity: .9; animation: moonBreathe 12s ease-in-out infinite alternate; /* Cánh mây TRÁI vươn ra tới ~4% ảnh (cánh phải chỉ tới ~86%) -> phải trong suốt hẳn tới 16% mới đủ xoá mép trái. Đĩa trăng ở 25%–75%. */ -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 16%, rgba(0,0,0,.22) 22%, rgba(0,0,0,.72) 27%, #000 31%, #000 69%, rgba(0,0,0,.72) 73%, rgba(0,0,0,.22) 78%, transparent 84%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, transparent 16%, rgba(0,0,0,.22) 22%, rgba(0,0,0,.72) 27%, #000 31%, #000 69%, rgba(0,0,0,.72) 73%, rgba(0,0,0,.22) 78%, transparent 84%, transparent 100%); } /* Quầng sáng dịu quanh trăng (ánh trăng lan toả). Giữ NHỎ HƠN khung art để không bao giờ bị cắt thành hình chữ nhật. */ .hero__art::before { content: ""; position: absolute; left: 50%; top: 42%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(214,228,255,.20) 0%, rgba(180,200,240,.10) 45%, rgba(150,175,220,.04) 68%, transparent 80%); filter: blur(18px); animation: moonGlow 12s ease-in-out infinite alternate; pointer-events: none; z-index: -3; } /* KHÔNG dùng filter cùng lúc với mask trên cùng phần tử: drop-shadow toả RA NGOÀI hộp ảnh, còn mask chỉ có hiệu lực TRONG hộp, nên phần bóng tràn ra bị cắt phẳng -> lộ viền theo đúng hộp ảnh. */ .hero__art img.hero__char { position: relative; height: auto; display: block; z-index: 2; animation: artFloat 9s ease-in-out infinite alternate; /* Chân ảnh mờ dần -> không còn mép cắt thẳng ở đáy */ -webkit-mask-image: linear-gradient(to bottom, #000 76%, rgba(0,0,0,.35) 92%, transparent 100%); mask-image: linear-gradient(to bottom, #000 76%, rgba(0,0,0,.35) 92%, transparent 100%); } /* char01 (bên phải) — chồng lên char03 cho đứng sát nhau */ .hero__art img.hero__char--01 { width: 66%; margin-left: -28%; z-index: 1; animation-delay: -3s; } /* ===== CẦU LỬA TRONG LÒNG BÀN TAY (char03, tay phải giơ lên) ===== fire.png có NỀN ĐEN -> dùng mix-blend-mode:screen để khử nền. */ .palm-fire { /* Toạ độ ĐO TỪ char03.png: lòng bàn tay ở x≈216/960 (22.5%), y≈185/1100 (17%). Bề rộng bàn tay ~78px ≈ 8% chiều rộng ảnh. */ position: absolute; left: 22.5%; top: 17%; width: 13%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: 3; } /* Quầng sáng hắt ra lòng bàn tay */ .palm-fire b { position: absolute; inset: -55%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,150,60,.42) 0%, rgba(255,90,25,.20) 42%, rgba(210,50,10,.07) 68%, transparent 80%); filter: blur(6px); mix-blend-mode: screen; animation: fireGlow 2.1s ease-in-out infinite alternate; } /* Quả cầu lửa: xoay chậm + phập phồng */ .palm-fire img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; animation: fireSpin 9s linear infinite, firePulse 1.5s ease-in-out infinite alternate; will-change: transform, opacity; } @keyframes fireGlow { from { opacity: .62; transform: scale(.94); } to { opacity: 1; transform: scale(1.08); } } @keyframes fireSpin { from { rotate: 0deg; } to { rotate: 360deg; } } @keyframes firePulse { from { scale: .92; opacity: .88; } to { scale: 1.06; opacity: 1; } } /* ===== MÂY / KHÓI che mép dưới của 2 nhân vật ===== */ .hero__mist { position: absolute; left: 0; /* KHÔNG tràn ra ngoài .hero__art (sẽ bị mask cắt cứng) */ right: 0; bottom: -3%; height: 36%; pointer-events: none; overflow: hidden; z-index: 4; /* nằm TRÊN nhân vật để che đường cắt chân ảnh */ /* Mờ dần theo CHIỀU DỌC (mây tan lên trên) */ -webkit-mask-image: linear-gradient(to top, #000 0%, #000 46%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, #000 46%, transparent 100%); } .hero__mist span { position: absolute; inset: 0; background-image: url('/Image/may.png'); background-repeat: repeat-x; background-position: 0 bottom; background-size: auto 100%; opacity: .55; filter: blur(1px); /* Mờ dần theo CHIỀU NGANG -> xoá mép trái/phải bị cắt thẳng. Đặt trên phần tử con để khỏi cần mask-composite (tương thích rộng hơn). */ -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%); } /* 2 lớp trôi ngược chiều, khác tốc độ -> mây chuyển động nhẹ, không lặp lộ */ .hero__mist span:nth-child(1) { animation: mistDriftL 95s linear infinite; } .hero__mist span:nth-child(2) { opacity: .34; background-size: auto 74%; filter: blur(2px); animation: mistDriftR 145s linear infinite; } @keyframes mistDriftL { from { background-position-x: 0; } to { background-position-x: -1080px; } } @keyframes mistDriftR { from { background-position-x: 0; } to { background-position-x: 1080px; } } @keyframes moonBreathe { from { opacity: .78; transform: translate(-50%, -50%) scale(1); } to { opacity: .96; transform: translate(-50%, -51.5%) scale(1.03); } } @keyframes moonGlow { from { opacity: .65; } to { opacity: 1; } } @keyframes artFloat { from { transform: translateY(0); } to { transform: translateY(-8px); } } /* Tôn trọng thiết lập giảm chuyển động của người dùng */ @media (prefers-reduced-motion: reduce) { .hero__art::before, .hero__moon, .hero__art img, .palm-fire b, .palm-fire img, .hero__mist span, .cta--primary { animation: none !important; } } .hero__logo { width: clamp(150px, 22vw, 250px); filter: drop-shadow(0 6px 26px rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(255,181,77,.35)); margin-bottom: 10px; } .hero__kicker { font-size: clamp(10px, 1.5vw, 13px); letter-spacing: .55em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; text-indent: .55em; } .hero__title { font-family: "Cormorant Garamond", serif; font-weight: 700; font-size: clamp(38px, 8vw, 86px); line-height: 1.02; margin: 0 0 12px; background: linear-gradient(180deg, #fff6e0 0%, var(--gold) 42%, #a9721b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 16px rgba(0,0,0,.75)); } .hero__tagline { color: #e6d6b4; font-size: clamp(14px, 2.1vw, 18px); max-width: 560px; margin: 0 0 26px; text-shadow: 0 2px 10px rgba(0,0,0,.9); } /* Nút CTA lớn */ .hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; } .cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 40px; border-radius: 999px; font-weight: 800; font-size: clamp(14px, 1.8vw, 17px); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: transform .14s ease, box-shadow .18s ease, filter .18s ease; } .cta--primary { color: #352104; background: linear-gradient(180deg, #fff0c4, var(--gold) 45%, #b8801d); border: 1px solid #ffe6ad; box-shadow: 0 4px 0 #7d5310, 0 12px 30px rgba(255,181,77,.3); animation: ctaGlow 5s ease-in-out infinite; } @keyframes ctaGlow { 0%, 100% { box-shadow: 0 4px 0 #7d5310, 0 12px 26px rgba(255,181,77,.24); } 50% { box-shadow: 0 4px 0 #7d5310, 0 12px 36px rgba(255,181,77,.42); } } .cta--primary:hover { transform: translateY(-2px); filter: brightness(1.06); color: #352104; } .cta--ghost { color: var(--gold); background: rgba(10,7,4,.55); border: 1px solid rgba(255,207,122,.5); backdrop-filter: blur(4px); } .cta--ghost:hover { color: #fff; border-color: var(--gold); background: rgba(255,207,122,.14); } /* Dải trạng thái server trong hero */ .hero__status { display: inline-flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; padding: 12px 26px; border-radius: 999px; background: rgba(6,4,2,.66); border: 1px solid rgba(255,207,122,.24); backdrop-filter: blur(6px); } .hstat { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #cdbb93; white-space: nowrap; } .hstat b { color: var(--gold); font-size: 16px; font-weight: 800; } .hstat + .hstat { padding-left: 22px; border-left: 1px solid rgba(255,207,122,.18); } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .dot.on { background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: dotPing 1.8s infinite; } .dot.off { background: #ef4444; } @keyframes dotPing { 70% { box-shadow: 0 0 0 9px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } } /* ===================== 2. THANH TÁC VỤ NHANH ===================== */ .quick-strip { position: relative; z-index: 4; max-width: 1240px; margin: -34px auto 0; padding: 0 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .qtile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px 12px; border-radius: 14px; text-decoration: none; text-align: center; color: #e9d9bb; background: linear-gradient(180deg, rgba(32,23,13,.96), rgba(12,8,4,.96)); border: 1px solid rgba(255,207,122,.26); box-shadow: 0 14px 30px rgba(0,0,0,.5); overflow: hidden; transition: transform .14s ease, border-color .16s ease; } .qtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,207,122,.14), transparent 60%); opacity: 0; transition: opacity .18s ease; } .qtile:hover { transform: translateY(-4px); border-color: rgba(255,207,122,.65); color: #fff; } .qtile:hover::after { opacity: 1; } .qtile__ic { font-size: 26px; line-height: 1; color: var(--gold); filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); } .qtile__t { font-weight: 700; font-size: 14.5px; letter-spacing: .04em; text-transform: uppercase; } .qtile__s { font-size: 11.5px; color: #9c8d6d; } /* ===================== 3. KHUNG SECTION CHUNG ===================== */ .sec { max-width: 1240px; margin: 0 auto; padding: 56px 20px 0; } .sec__head { text-align: center; margin-bottom: 26px; } .sec__kicker { font-size: 11px; letter-spacing: .45em; text-transform: uppercase; color: var(--gold-deep); text-indent: .45em; } .sec__title { font-family: "Cormorant Garamond", serif; font-weight: 700; font-size: clamp(26px, 4.4vw, 40px); margin: 4px 0 0; background: linear-gradient(180deg, #fff2cf, var(--gold) 48%, #a9721b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .sec__rule { width: min(420px, 70%); height: 2px; margin: 12px auto 0; border: 0; background: linear-gradient(90deg, transparent, var(--gold-deep) 22%, var(--gold) 50%, var(--gold-deep) 78%, transparent); position: relative; opacity: .95; } .sec__rule::after { content: "❖"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -56%); color: var(--gold); background: var(--ink); padding: 0 12px; font-size: 12px; } /* ===================== 4. SLIDER + TIN TỨC ===================== */ .stage-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; align-items: stretch; } .stage-frame, .news-frame { border-radius: 16px; background: linear-gradient(180deg, rgba(30,21,12,.9), rgba(10,7,4,.92)); border: 1px solid rgba(255,207,122,.24); box-shadow: 0 16px 40px rgba(0,0,0,.5); overflow: hidden; } .stage-frame .carousel, .stage-frame .carousel-inner, .stage-frame .carousel-item { height: 100%; } .stage-frame img { width: 100%; height: 100%; max-height: 430px; object-fit: cover; } .stage-frame .carousel-caption { left: 6%; right: 6%; bottom: 8%; text-align: left; text-shadow: 0 2px 14px rgba(0,0,0,.95); } .stage-frame .carousel-caption h2 { font-family: "Cormorant Garamond", serif; color: var(--gold); font-size: clamp(20px, 3vw, 32px); } .stage-frame .carousel-caption p { color: #e6d6b4; margin-bottom: 8px; } /* Tin tức */ .news-frame { display: flex; flex-direction: column; } .news-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(255,207,122,.2); background: rgba(0,0,0,.3); } .news-head__t { font-family: "Cormorant Garamond", serif; font-size: 20px; font-weight: 700; color: var(--gold); letter-spacing: .04em; } .news-head a { font-size: 12.5px; color: #cdbb93; text-decoration: none; border: 1px solid rgba(255,207,122,.3); padding: 5px 12px; border-radius: 999px; } .news-head a:hover { color: #fff; border-color: var(--gold); } .news-feed { list-style: none; margin: 0; padding: 6px 0; flex: 1 1 auto; } .nrow { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-bottom: 1px dashed rgba(255,207,122,.14); } .nrow:last-child { border-bottom: 0; } .nrow:hover { background: rgba(255,207,122,.05); } .nrow .tg { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; padding: 3px 9px; border-radius: 6px; color: #352104; background: linear-gradient(180deg, #ffd468, #e7a71f); } .nrow .tg.news { background: linear-gradient(180deg, #d9cdb4, #9c8d6d); } .nrow a.tt { flex: 1 1 auto; min-width: 0; color: #e9d9bb; text-decoration: none; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nrow a.tt:hover { color: var(--gold); } .nrow .dt { flex: 0 0 auto; font-size: 11.5px; color: #8d7f61; } /* ===================== 5. BẢNG XẾP HẠNG ===================== */ /* ===== BẢNG XẾP HẠNG — TÔNG HẮC KIM (đen tuyền + vàng kim loại) ===== */ .lb-wrap { --hk-gold: #e4c67a; /* vàng kim loại */ --hk-gold-hi: #fff3cd; /* vàng sáng (highlight) */ --hk-gold-dim: #a98a3f; /* vàng trầm */ --hk-line: rgba(228,198,122,.22); position: relative; border-radius: 16px; background: linear-gradient(180deg, rgba(20,20,22,.96) 0%, rgba(9,9,11,.98) 100%); border: 1px solid var(--hk-line); box-shadow: 0 18px 46px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,243,205,.05); padding: 18px; overflow: hidden; } /* Vệt vàng mảnh chạy dọc mép trên — chất "hắc kim" */ .lb-wrap::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--hk-gold), transparent); opacity: .7; } .lb-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,207,122,.16); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .lb-tabs::-webkit-scrollbar { display: none; } .lb-tab { flex: 0 0 auto; padding: 9px 20px; border-radius: 999px; border: 1px solid rgba(228,198,122,.26); background: linear-gradient(180deg, #1a1a1d, #0d0d0f); color: #b9a985; font-family: inherit; font-weight: 700; font-size: 13.5px; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: all .16s ease; } .lb-tab:hover { color: var(--hk-gold-hi); border-color: rgba(228,198,122,.6); box-shadow: 0 0 0 1px rgba(228,198,122,.12); } /* Tab đang chọn: thanh vàng kim loại trên nền đen */ .lb-tab.active { color: #14100a; background: linear-gradient(180deg, #fff3cd 0%, #e4c67a 45%, #a98a3f 100%); border-color: #fff3cd; box-shadow: 0 4px 16px rgba(228,198,122,.28), inset 0 1px 0 rgba(255,255,255,.55); text-shadow: 0 1px 0 rgba(255,255,255,.35); } .lb-pane { display: none; } .lb-pane.active { display: block; animation: lbIn .22s ease; } @keyframes lbIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Bục vinh danh */ .podium { display: grid; grid-template-columns: 1fr 1.18fr 1fr; align-items: end; gap: 12px; margin-bottom: 20px; } .pod { text-align: center; } .pod--1 { order: 2; } .pod--2 { order: 1; } .pod--3 { order: 3; } .pod__medal { width: clamp(52px, 8vw, 74px); margin: 0 auto 6px; display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,.7)); } .pod__name { font-weight: 700; color: #f2e6c9; font-size: clamp(12px, 1.7vw, 15px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Tên hạng 1: chữ mạ vàng */ .pod--1 .pod__name { background: linear-gradient(180deg, #fff3cd, #e4c67a 55%, #a98a3f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .pod__fac { display: inline-block; font-size: 11px; padding: 2px 10px; border-radius: 999px; margin-top: 4px; } .pod__base { margin-top: 10px; border-radius: 10px 10px 0 0; padding: 14px 6px; font-weight: 800; color: var(--hk-gold); font-size: clamp(13px, 1.8vw, 16px); background: linear-gradient(180deg, #1c1c20 0%, #101013 55%, #08080a 100%); border: 1px solid rgba(228,198,122,.26); border-bottom: 0; box-shadow: inset 0 1px 0 rgba(255,243,205,.10); } /* Giá trị chính (Lv / tài sản / danh tiếng...) */ .pod__val { display: block; } /* Dòng phụ dưới giá trị: % exp, level... */ .pod__sub { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: #8d8065; } .pod--1 .pod__sub { color: #b6a274; } /* Bục hạng 1: viền vàng đậm + hào quang vàng */ .pod--1 .pod__base { padding: 26px 6px; color: var(--hk-gold-hi); border-color: rgba(228,198,122,.65); background: linear-gradient(180deg, #2a2419 0%, #15130e 55%, #0a0908 100%); box-shadow: inset 0 1px 0 rgba(255,243,205,.28), 0 0 34px rgba(228,198,122,.20); } .pod--2 .pod__base { padding: 18px 6px; } /* Danh sách hạng */ .lb-rows { display: flex; flex-direction: column; } .lbr { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; } .lbr:nth-child(odd) { background: rgba(255,255,255,.022); } .lbr:hover { background: linear-gradient(90deg, rgba(228,198,122,.10), rgba(228,198,122,.03)); box-shadow: inset 2px 0 0 var(--hk-gold); } .lbr .rk { flex: 0 0 26px; text-align: center; color: var(--hk-gold-dim); font-weight: 800; font-size: 14px; } .lbr .nm { flex: 1 1 auto; min-width: 0; color: #ddd2ba; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lbr .fac { flex: 0 0 auto; font-size: 11.5px; padding: 2px 10px; border-radius: 999px; } .lbr .vl { flex: 0 0 auto; text-align: right; } .lbr .vl b { color: var(--hk-gold); font-weight: 700; font-size: 14px; display: block; } .lbr .vl small { color: #7d7157; font-size: 11px; } /* Hạng 11–50: ẩn cho tới khi bấm "Xem thêm" */ .lbr.is-more { display: none; } .lb-rows.expanded .lbr.is-more { display: flex; animation: lbIn .18s ease both; } /* Nút xem thêm — hắc kim */ .lb-more { display: block; width: 100%; margin-top: 14px; padding: 11px 18px; border-radius: 10px; border: 1px solid rgba(228,198,122,.3); background: linear-gradient(180deg, #17171a, #0b0b0d); color: var(--hk-gold); font-family: inherit; font-weight: 700; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: all .16s ease; } .lb-more:hover { color: var(--hk-gold-hi); border-color: rgba(228,198,122,.65); background: linear-gradient(180deg, #201f1a, #100f0c); box-shadow: 0 6px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,243,205,.12); } .lb-more::after { content: " ▾"; display: inline-block; transition: transform .2s ease; } .lb-more.is-open::after { transform: rotate(180deg); } .lb-empty { text-align: center; color: #7d7157; padding: 40px 0; } /* ===================== 6. MÔN PHÁI ===================== */ .mp-btns { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 18px; } .mp-btn { padding: 9px 20px; border-radius: 999px; border: 1px solid rgba(255,207,122,.3); background: rgba(0,0,0,.35); color: #cdbb93; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: all .14s ease; font-family: inherit; } .mp-btn:hover { color: #fff; border-color: var(--gold); } .mp-btn.active { color: #352104; background: linear-gradient(180deg, #ffe6ad, var(--gold) 50%, #c9962f); border-color: #ffe6ad; } /* ===================== 7. BĂNG CTA CUỐI TRANG ===================== */ .cta-band { position: relative; margin: 64px auto 0; max-width: 1240px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,207,122,.28); box-shadow: 0 20px 50px rgba(0,0,0,.6); isolation: isolate; } .cta-band__bg { position: absolute; inset: 0; background-image: url('/Image/char02.jpg'); background-size: cover; background-position: center 18%; filter: grayscale(.25) contrast(1.05); z-index: -2; } .cta-band__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,6,3,.94) 0%, rgba(8,6,3,.78) 42%, rgba(8,6,3,.45) 70%, rgba(8,6,3,.85) 100%); } .cta-band__inner { padding: 52px 40px; max-width: 640px; } .cta-band h3 { font-family: "Cormorant Garamond", serif; font-weight: 700; font-size: clamp(26px, 4vw, 42px); margin: 0 0 10px; background: linear-gradient(180deg, #fff2cf, var(--gold) 48%, #a9721b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cta-band p { color: #d9c8a6; font-size: 15px; margin: 0 0 22px; text-shadow: 0 2px 8px rgba(0,0,0,.8); } .home-foot-space { height: 70px; } /* ===================================================================== */ /* ========================== RESPONSIVE =============================== */ /* ===================================================================== */ @media (max-width: 1100px) { .stage-grid { grid-template-columns: 1fr; } .stage-frame img { max-height: 380px; } } @media (max-width: 860px) { .quick-strip { grid-template-columns: repeat(2, 1fr); margin-top: -22px; } } @media (max-width: 980px) { /* Hero về 1 cột, canh giữa, cụm nhân vật xuống dưới */ .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero__copy { order: 1; } .hero__art { order: 2; width: min(96%, 460px); } .hero__tagline { margin-left: auto; margin-right: auto; } .hero__cta { justify-content: center; } } @media (max-width: 768px) { .hero { min-height: auto; } .hero__inner { padding: 74px 16px 40px; } .hero__spark { width: 46vw; opacity: .34; } .cta { padding: 14px 26px; width: 100%; justify-content: center; } .hero__cta { flex-direction: column; align-items: stretch; padding: 0 6px; } .hero__status { gap: 14px; padding: 10px 16px; } .hstat + .hstat { padding-left: 14px; } .hero__art { display: none; } .cta-band__inner { padding: 34px 20px; } .cta-band__veil { background: linear-gradient(180deg, rgba(8,6,3,.9), rgba(8,6,3,.82)); } .sec { padding: 42px 14px 0; } .lb-wrap { padding: 14px 12px; } .podium { gap: 8px; } /* Mobile VẪN hiển thị phái — chỉ thu nhỏ lại cho vừa bề ngang */ .pod__fac { font-size: 9.5px; padding: 2px 7px; margin-top: 3px; } .lbr { padding: 9px 8px; gap: 7px; } .lbr .rk { flex-basis: 20px; font-size: 13px; } .lbr .nm { font-size: 13px; } .lbr .fac { font-size: 10px; padding: 2px 7px; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lbr .vl b { font-size: 13px; } .lbr .vl small { font-size: 10px; } } @media (max-width: 420px) { .quick-strip { gap: 10px; padding: 0 14px; } .qtile { padding: 14px 8px; } .qtile__t { font-size: 12.5px; } .qtile__s { display: none; } /* Máy rất hẹp: nhãn phái gọn hơn nhưng VẪN hiển thị */ .lbr { gap: 6px; padding: 9px 6px; } .lbr .fac { font-size: 9.5px; padding: 2px 6px; max-width: 62px; } .pod__fac { font-size: 9px; padding: 1px 6px; } } /* ===================================================================== */ /* ============ TAB SỰ KIỆN "HÀO KHÍ" trong bảng xếp hạng ============== */ /* ===================================================================== */ /* Tab Sự Kiện nhấn nhá hơn tab thường một chút */ .lb-tab--event { border-color: rgba(228,198,122,.5); color: var(--hk-gold, #e4c67a); } /* --- Đầu trang sự kiện: nhãn + bộ đếm --- */ .ev-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 2px 12px; } .ev-head__label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #b9a985; } .ev-head__count { font-size: 14px; color: #8d8065; } .ev-head__count b { font-size: 22px; color: var(--hk-gold-hi, #fff3cd); font-weight: 800; } /* --- Thanh tiến trình --- */ .ev-track { position: relative; height: 16px; border-radius: 999px; background: linear-gradient(180deg, #101013, #1a1a1d); border: 1px solid rgba(228,198,122,.25); margin: 0 2px 40px; /* chừa chỗ cho nhãn mốc bên dưới */ } .ev-track__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #a98a3f, #e4c67a 60%, #fff3cd); box-shadow: 0 0 14px rgba(228,198,122,.45); transition: width .6s ease; overflow: hidden; animation: evGlow 2.6s ease-in-out infinite alternate; } /* Sọc chéo chạy liên tục — cảm giác "đang tích Hào Khí" */ .ev-track__fill::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(45deg, rgba(255,255,255,.28) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.28) 75%, transparent 75%, transparent); background-size: 18px 18px; animation: evStripes 1s linear infinite; } @keyframes evStripes { from { background-position: 18px 0; } to { background-position: 0 0; } } @keyframes evGlow { from { box-shadow: 0 0 10px rgba(228,198,122,.30); } to { box-shadow: 0 0 20px rgba(228,198,122,.65); } } @media (prefers-reduced-motion: reduce) { .ev-track__fill, .ev-track__fill::after { animation: none !important; } } /* Vạch mốc trên thanh + nhãn số treo bên dưới. Vạch vẽ bằng ::before để không kéo nền đè lên nhãn số. */ .ev-track__mark { position: absolute; top: 24px; /* nhãn nằm ngay dưới thanh */ transform: translateX(-50%); font-size: 11px; color: #8d8065; white-space: nowrap; } .ev-track__mark::before { content: ""; position: absolute; left: 50%; top: -29px; /* vạch cắt ngang thanh 16px */ transform: translateX(-50%); width: 2px; height: 26px; background: rgba(228,198,122,.35); } .ev-track__mark.hit { color: var(--hk-gold, #e4c67a); font-weight: 700; } .ev-track__mark.hit::before { background: linear-gradient(180deg, #fff3cd, #e4c67a); box-shadow: 0 0 8px rgba(228,198,122,.5); } /* --- Danh sách 4 mốc --- */ .ev-miles { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; margin-bottom: 24px; } /* Mỗi thẻ có màu nhấn riêng qua biến --ev-c (gán inline từ view) */ .ev-mile { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 12px; background: linear-gradient(180deg, #17171a, #0d0d0f); border: 1px solid rgba(228,198,122,.14); border-left: 3px solid var(--ev-c, #e4c67a); opacity: .68; /* mốc chưa đạt: mờ nhẹ */ transition: opacity .2s ease, border-color .2s ease, transform .12s ease; } .ev-mile:hover { transform: translateY(-2px); } .ev-mile.hit { opacity: 1; border-color: rgba(228,198,122,.45); border-left-color: var(--ev-c); box-shadow: inset 0 1px 0 rgba(255,243,205,.08), 0 6px 18px rgba(0,0,0,.4), 0 0 16px color-mix(in srgb, var(--ev-c) 22%, transparent); } /* Huy hiệu số mốc */ .ev-mile__no { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: var(--ev-c, #e4c67a); /* fallback cho trình duyệt chưa hỗ trợ color-mix */ background: rgba(228,198,122,.14); border: 1px solid rgba(228,198,122,.45); background: color-mix(in srgb, var(--ev-c) 14%, transparent); border-color: color-mix(in srgb, var(--ev-c) 45%, transparent); } .ev-mile.hit .ev-mile__no { color: #14100a; background: var(--ev-c); border-color: var(--ev-c); box-shadow: 0 0 12px color-mix(in srgb, var(--ev-c) 55%, transparent); } .ev-mile__body { min-width: 0; } /* Dòng nhỏ phía trên: "Mốc 1 · 3.000 cái" + badge */ .ev-mile__eyebrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8d8065; margin-bottom: 3px; } .ev-mile__name { font-family: "Cormorant Garamond", serif; font-weight: 700; font-size: 18px; line-height: 1.2; color: #e9ddc0; margin-bottom: 5px; } .ev-mile.hit .ev-mile__name { color: var(--hk-gold-hi, #fff3cd); } .ev-mile__badge { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; padding: 2px 8px; border-radius: 999px; background: linear-gradient(180deg, #fff3cd, #e4c67a 55%, #a98a3f); color: #14100a; white-space: nowrap; } .ev-mile__desc { font-size: 12.5px; line-height: 1.55; color: #b3a687; } .ev-mile.hit .ev-mile__desc { color: #d6c8a5; } /* Tiêu đề phụ trước bảng xếp hạng holders */ .ev-sub { text-align: center; font-family: "Cormorant Garamond", serif; font-weight: 700; font-size: 20px; color: var(--hk-gold, #e4c67a); margin: 4px 0 14px; } @media (max-width: 576px) { .ev-head__count b { font-size: 18px; } .ev-track { margin-bottom: 36px; } .ev-track__mark { font-size: 10px; } .ev-miles { grid-template-columns: 1fr; } } /* --- Tab Sự Kiện khi CHƯA có sự kiện (EventEnabled = false) --- */ .ev-idle { text-align: center; padding: 46px 18px 52px; } .ev-idle__ic { font-size: 34px; margin-bottom: 10px; opacity: .85; } .ev-idle__title { font-family: "Cormorant Garamond", serif; font-weight: 700; font-size: 24px; color: var(--hk-gold, #e4c67a); margin-bottom: 8px; } .ev-idle__desc { font-size: 13px; line-height: 1.6; color: #8d8065; max-width: 420px; margin: 0 auto; }