/* ==========================================================================
Apollo Leaderboard Championship 2026 — Landing Page
Section 1..7 dựng theo bộ thiết kế 1.png → 7.png
========================================================================== */
/* ---------- 1. Fonts ----------
Font dùng CHUNG với bản gốc ở assets/fonts/ — assets2/ chỉ có css + js,
không có thư mục fonts. Đường dẫn phải đi ngược 2 cấp (assets2/css/ ->
web/), nếu để "../fonts/..." thì trỏ vào assets2/fonts/ không tồn tại,
font không tải được và trang rơi về font hệ thống (Georgia/Arial Narrow)
— những font KHÔNG có sẵn chữ Việt hai dấu như "ế", hiện ra thành "ê´".
Hai thẻ ở đầu index2.html cũng trỏ assets/fonts/. */
@font-face{
font-family:"Brauer Neue VN";
src:url("/landings/leaderboard-championship/assets/fonts/BrauerNeueVN-Bold.woff2") format("woff2");
font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
font-family:"Montserrat";
src:url("/landings/leaderboard-championship/assets/fonts/Montserrat-Regular.woff2") format("woff2");
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:"Montserrat";
src:url("/landings/leaderboard-championship/assets/fonts/Montserrat-Medium.woff2") format("woff2");
font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
font-family:"Montserrat";
src:url("/landings/leaderboard-championship/assets/fonts/Montserrat-SemiBold.woff2") format("woff2");
font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
font-family:"Montserrat";
src:url("/landings/leaderboard-championship/assets/fonts/Montserrat-Bold.woff2") format("woff2");
font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
font-family:"Baskerville Voting";
src:url("/landings/leaderboard-championship/assets/fonts/Baskerville.ttf") format("truetype");
font-weight:400; font-style:normal; font-display:swap;
}
/* ---------- 1. Tokens ---------- */
:root{
--blue: #2549E6;
--blue-deep: #1E3BC8;
--blue-ink: #1B3AAF; /* chữ xanh đậm */
--blue-text: #2A50E5; /* chữ xanh body */
--blue-soft: #7EB6F0;
--yellow: #FFD62E;
--yellow-light: #FBEA55;
--yellow-ink: #F7E51F;
--red: #D42315;
--green: #17A94B;
--sky: #E9F8FE;
--sky-2: #F5FCFF;
--page: #F2F8FD;
--cream: #FBF7EE;
--line: #CFE6F5;
--white: #FFFFFF;
--wrap: 1240px;
--r-sm: 10px;
--r-md: 18px;
--r-lg: 28px;
--r-pill: 999px;
/* Font dự phòng phải có SẴN chữ Việt. Arial Narrow / Impact /
Haettenschweiler / Georgia đều thiếu ô chữ Việt hai dấu (ế ồ ắ ữ...)
nhưng lại có "ê" và dấu sắc rời, nên trình duyệt ghép tạm thành "ê´"
thay vì nhảy sang font kế tiếp. Đã bỏ hẳn, thay bằng font đủ chữ Việt. */
--font-display: "Brauer Neue VN", "Segoe UI", Tahoma, Arial, sans-serif;
--font-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-serif: "Baskerville Voting", "Times New Roman", Times, serif;
}
/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
-webkit-text-size-adjust:100%; scroll-behavior:smooth;
/* confetti trang trí nằm tràn ra ngoài khung nội dung -> chặn cuộn ngang.
`clip` không tạo scroll container nên không phá position:sticky. */
overflow-x:clip;
}
body{
margin:0; position:relative;
font-family:var(--font-ui);
color:var(--blue-ink);
background:var(--page);
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
a{ text-decoration:none; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }
/* Nền tia sáng của bộ thiết kế (element-03) — trải suốt chiều cao trang */
body::before{
content:"";
position:absolute; inset:0; z-index:-1;
background:#F4FBFF url("/landings/leaderboard-championship/layout/page-bg.jpg") top center / 100% 100% no-repeat;
}
/* Confetti trang trí (thay cho asset rời) */
.confetti-host{ position:relative; }
.confetti{
position:absolute; width:16px; height:26px; border-radius:3px;
opacity:.9; pointer-events:none; z-index:0;
}
.confetti--a{ background:var(--yellow); top:-22px; left:-34px; transform:rotate(-24deg); }
.confetti--b{ background:var(--red); top:-8px; left:2%; transform:rotate(38deg); width:14px; height:20px; }
.confetti--c{ background:var(--blue); top:-30px; right:6%; transform:rotate(18deg); }
.confetti--d{ background:var(--yellow); bottom:-18px;right:-30px; transform:rotate(-40deg); }
.confetti--e{ background:var(--yellow); bottom:14%; left:-38px; transform:rotate(30deg); }
.confetti--f{ background:var(--red); bottom:22%; left:-14px; transform:rotate(-16deg); width:14px; height:20px; }
.confetti--g{ background:var(--blue); bottom:6%; right:-32px; transform:rotate(24deg); }
/* ==========================================================================
SECTION 1 — HERO (hình 1)
========================================================================== */
/* Không tự đặt nền riêng ở đây nữa — để lộ đúng 1 nền chung của cả trang
(body::before, layout/page-bg.jpg) xuyên suốt, trừ banner (ảnh riêng)
và footer/CTA (nền riêng của nó). */
.hero__banner{
position:relative;
max-width:2000px;
margin-inline:auto;
}
.hero-topbar{
position:absolute; z-index:3; top:0; left:0; right:0;
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:clamp(10px,2vw,18px) clamp(14px,2.6vw,28px);
background:linear-gradient(180deg, rgba(8,18,54,.5) 0%, rgba(8,18,54,.22) 60%, rgba(8,18,54,0) 100%);
}
.hero-nav{
display:flex; flex-wrap:wrap; align-items:center; gap:6px; max-width:100%;
}
.hero-nav a, .hero-nav button{
border:none; cursor:pointer; color:var(--white); text-decoration:none;
font-family:var(--font-ui); font-weight:700; font-size:clamp(11.5px,1.6vw,14px); letter-spacing:.01em;
border-radius:var(--r-pill); padding:7px 14px;
background:rgba(8,18,54,.55); box-shadow:0 2px 10px rgba(8,18,54,.25);
transition:background .2s, box-shadow .2s;
white-space:nowrap;
}
.hero-nav a:hover, .hero-nav button:hover{ background:rgba(8,18,54,.75); }
.hero-nav button[aria-expanded="true"]{ background:var(--white); color:var(--blue); box-shadow:0 2px 10px rgba(8,18,54,.35); }
.lang-switch{
display:flex; flex:none; background:rgba(8,18,54,.55); box-shadow:0 2px 10px rgba(8,18,54,.25);
border-radius:var(--r-pill); padding:3px; gap:2px;
}
.lang-switch button{
border:none; background:transparent; color:var(--white);
font-family:var(--font-ui); font-weight:700; font-size:12.5px; letter-spacing:.02em;
border-radius:var(--r-pill); padding:6px 12px; opacity:.85; transition:background .2s, opacity .2s;
}
.lang-switch button.is-active{ background:var(--white); color:var(--blue); opacity:1; }
.lang-switch button:not(.is-active):hover{ opacity:1; }
@media (max-width:640px){
.hero-nav a, .hero-nav button{ padding:6px 10px; font-size:11.5px; }
}
@media (max-width:400px){
/* KHÔNG ẩn hẳn menu — nút "FAQs" là cách duy nhất mở được mục FAQ (đang
ẩn mặc định), ẩn cả thanh này thì máy màn hình nhỏ sẽ không có cách
nào xem được FAQ nữa. Thay vào đó cho tự xuống dòng + thu nhỏ chữ. */
.hero-topbar{ flex-wrap:wrap; row-gap:8px; }
.hero-nav a, .hero-nav button{ padding:5px 8px; font-size:10.5px; }
}
/* Khoá sẵn tỉ lệ khung hình theo từng bản ảnh: khung không bị sập về 0
kể cả khi ảnh tải chậm hoặc lỗi (trước đây chỉ dựa vào width/height
trên thẻ , mà Safari dưới 16.4 bỏ qua thuộc tính này). */
.hero__img{ width:100%; height:auto; display:block; }
.hero__img--desktop{
aspect-ratio:2400 / 650;
background:url("/landings/leaderboard-championship/layout/hero-desktop.jpg") center / 100% 100% no-repeat;
}
/* Bản mobile nạp qua CSS background: đường dẫn trong CSS được giải theo
vị trí file style.css nên host không cần (và không) viết lại — đồng thời
trình duyệt chỉ tải ảnh của media query đang khớp, không tải thừa. */
.hero__img--mobile{
aspect-ratio:1100 / 422; display:none;
background:url("/landings/leaderboard-championship/layout/hero-mobile.jpg") center / 100% 100% no-repeat;
}
@media (max-width:640px){
.hero__img--desktop{ display:none; }
.hero__img--mobile{ display:block; }
}
/* Đồng hồ đếm ngược */
.countdown{
background:linear-gradient(180deg,#2E55EE 0%, #2440D2 100%);
color:var(--white);
display:flex; flex-direction:column; align-items:center;
text-align:center;
}
.countdown[hidden]{ display:none; }
.countdown__pill{
background:var(--yellow-ink); color:var(--blue-deep);
font-family:var(--font-display); letter-spacing:.02em;
text-transform:uppercase; border-radius:var(--r-pill);
line-height:1; white-space:nowrap;
}
.countdown__clock{ display:flex; align-items:flex-start; justify-content:center; }
.countdown__unit{ display:flex; flex-direction:column; align-items:center; }
.countdown__unit b{ font-family:var(--font-display); line-height:1; font-weight:700; letter-spacing:.01em; }
.countdown__unit span{ font-family:var(--font-ui); font-weight:600; letter-spacing:.04em; }
.countdown__sep{ font-family:var(--font-display); font-style:normal; line-height:1; }
.countdown__range{
font-family:var(--font-display); letter-spacing:.02em; line-height:1;
border-top:2px solid rgba(255,255,255,.55); width:88%;
}
/* Khối đếm ngược: 1 hàng ngang, đè lên đáy banner, neo góc phải (chỉ
desktop/tablet — mobile banner thấp nên để nằm dưới, xem @media 640px). */
.hero__cd{ padding:0 16px; position:relative; z-index:2; margin-top:10px; }
@media (min-width:641px){
.hero__cd{
position:absolute; left:auto; right:clamp(12px,3vw,40px);
bottom:clamp(14px,3vw,32px); margin-top:0; padding:0;
}
}
.countdown--flat{
flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center;
gap:8px clamp(12px,2vw,22px);
max-width:680px; margin-inline:auto;
border-radius:var(--r-pill); padding:13px clamp(18px,2.6vw,30px);
box-shadow:0 10px 28px rgba(20,45,140,.3);
}
@media (min-width:641px){ .countdown--flat{ margin-inline:0; } }
.countdown--flat .countdown__pill{ font-size:clamp(12.5px,1.5vw,16px); padding:7px 16px; }
.countdown--flat .countdown__clock{ gap:0; }
.countdown--flat .countdown__unit{ flex-direction:row; align-items:baseline; gap:4px; }
.countdown--flat .countdown__unit b{ font-size:clamp(22px,3vw,32px); }
.countdown--flat .countdown__unit span{ font-size:clamp(10px,1.05vw,12px); margin-top:0; }
.countdown--flat .countdown__sep{ font-size:clamp(19px,2.4vw,26px); margin:0 4px; }
/* ==========================================================================
Ribbon tiêu đề vàng (dùng ở section 2 & 5)
========================================================================== */
.ribbon{
position:relative; width:min(760px,92%); margin:0 auto;
container-type:inline-size;
}
.ribbon__bg{ width:100%; }
/* Chữ uốn cong bám theo vòng cung của dải ruy-băng.
SVG dùng đúng viewBox của ảnh ribbon-yellow.png (1400×361) nên mọi toạ độ
ở dưới là toạ độ pixel trên chính tấm ảnh đó — text tự co giãn theo ảnh.
Đường cong dải vàng đo được: y = 30 + 1.626e-4 · (x − 700)² */
.ribbon__head{ position:absolute; inset:0; margin:0; }
.ribbon__svg{ width:100%; height:100%; display:block; overflow:visible; }
.ribbon__t1,
.ribbon__t2{ fill:var(--blue); }
.ribbon__t1{
font-family:var(--font-display); font-weight:700;
font-size:92px; letter-spacing:1px;
}
.ribbon__t2{
font-family:var(--font-body); font-weight:700;
font-size:42px; letter-spacing:3px;
}
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* ==========================================================================
SECTION 2 — PODIUM (hình 2)
========================================================================== */
.podium-section{ padding:26px 0 40px; }
/* ribbon-yellow.png có nhiều khoảng trong suốt phía dưới dải ruy-băng
(để chừa chỗ cho 2 đuôi cờ nhọn ở 2 bên) nên khung .ribbon cao hơn hẳn
phần ruy-băng nhìn thấy được, tạo khoảng hở với podium bên dưới. Kéo
podium lên bằng margin âm để lấp khoảng đó — nhưng .ribbon co giãn theo
khổ màn hình (min(760px,92%)) nên khoảng trong suốt an toàn cũng co
giãn theo tỉ lệ, KHÔNG được dùng 1 số px cố định (an toàn ở desktop có
thể lại đè lên đúng đuôi cờ ribbon ở mobile khi ribbon nhỏ lại) — dùng
clamp() theo vw để luôn tỉ lệ thuận với kích thước ribbon thực tế. */
.podium{
position:relative; container-type:inline-size;
max-width:1100px; margin:clamp(-24px,-3.2vw,-12px) auto 0;
}
.podium__img{ width:100%; }
.podium__slot{
position:absolute; display:flex; flex-direction:column; align-items:center;
text-align:center;
}
/* .podium__slot được đặt trùng khít với "pill" tên có sẵn trên bục;
điểm số nằm ngay dưới pill (top:100%). Đơn vị cqw = % chiều RỘNG của
.podium, nên chiều cao pill = px_trong_ảnh / 1500 * 100 cqw. */
.podium__name{
font-weight:700; line-height:1.1; width:100%; height:100%;
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:0 .4cqw; overflow:hidden;
}
.podium__label{ white-space:nowrap; }
/* Tên lớp ("VIN - PRI4 - 0042") dài gấp ~3 lần tên trung tâm nên pill in sẵn
trên ảnh không chứa đủ -> ở chế độ lớp thu nhỏ chữ và đưa tên trung tâm
xuống dòng phụ. */
.podium__sub{
font-weight:600; opacity:.85; font-size:.72em; line-height:1.05;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.podium__slot[data-mode="class"] .podium__label{ font-size:.82em; }
.podium__score{
position:absolute; left:50%; transform:translateX(-50%);
white-space:nowrap;
font-family:var(--font-display); font-weight:700; color:var(--blue);
line-height:.92; letter-spacing:.005em;
text-shadow:
.12cqw 0 0 #fff, -.12cqw 0 0 #fff, 0 .12cqw 0 #fff, 0 -.12cqw 0 #fff,
.1cqw .1cqw 0 #fff, -.1cqw .1cqw 0 #fff, .1cqw -.1cqw 0 #fff, -.1cqw -.1cqw 0 #fff,
.2cqw .2cqw 0 #fff, -.2cqw .2cqw 0 #fff, .2cqw -.2cqw 0 #fff, -.2cqw -.2cqw 0 #fff;
}
/* Cỡ chữ điểm số canh theo ĐÁY THẬT của từng bục (đo từ podium.png):
bục 2 kết thúc ở 89.3% chiều cao ảnh, bục 1 ở 92.4%, bục 3 ở 90.9%.
Bục 1 cao nhất nên chữ to nhất; bục 2 và 3 phải nhỏ hơn để không tràn
xuống dưới mặt bục. */
/* hạng 2 — bục xanh (pill: x 152→423, y 380→432 của ảnh 1500×606) */
.podium__slot--2{ left:10.1%; width:18.1%; top:62.7%; height:3.47cqw; }
.podium__slot--2 .podium__name{ font-size:1.55cqw; color:#fff; }
.podium__slot--2 .podium__score{ font-size:6.2cqw; top:100%; margin-top:1.2cqw; }
/* hạng 1 — bục vàng (pill: x 572→918, y 352→407) */
.podium__slot--1{ left:38.1%; width:23.1%; top:58.1%; height:3.67cqw; }
.podium__slot--1 .podium__name{ font-size:1.95cqw; color:var(--blue); }
.podium__slot--1 .podium__score{ font-size:8.8cqw; top:100%; margin-top:1.4cqw; }
/* hạng 3 — bục cam (pill: x 1068→1318, y 413→455) */
.podium__slot--3{ left:71.2%; width:16.7%; top:68.2%; height:2.8cqw; }
.podium__slot--3 .podium__name{ font-size:1.35cqw; color:var(--blue); }
.podium__slot--3 .podium__score{ font-size:5.5cqw; top:100%; margin-top:1.1cqw; }
/* ==========================================================================
SECTION 3 — BẢNG XẾP HẠNG CHI TIẾT (hình 3)
========================================================================== */
.board-section{ padding:18px 0 54px; }
.board{
background:var(--white);
border:2px solid #D8ECF8;
border-radius:var(--r-lg);
padding:0 14px 16px;
box-shadow:0 14px 34px rgba(37,73,230,.07);
}
.board__tabs{ display:flex; gap:0; margin:0 -14px; }
.board__tab{
flex:1 1 50%;
display:flex; align-items:center; justify-content:center; gap:12px;
padding:18px 12px;
border:none; background:transparent;
font-family:var(--font-display); font-weight:700; font-size:clamp(16px,2vw,26px);
text-transform:uppercase; letter-spacing:.02em;
color:var(--blue);
border-radius:var(--r-lg) var(--r-lg) 0 0;
transition:background .2s, color .2s;
}
.board__tab svg{ width:1.35em; height:1.35em; fill:currentColor; flex:none; }
.board__tab.is-active{ background:var(--blue); color:var(--white); }
.board__tab:not(.is-active):hover{ background:#EDF5FF; }
.board__tabs .board__tab{ flex:1 1 0; }
.tab-badge{
background:var(--red); color:var(--white);
font-family:var(--font-ui); font-weight:700; font-size:11px;
text-transform:uppercase; letter-spacing:.02em;
padding:3px 8px; border-radius:var(--r-pill); line-height:1.4;
}
.board__tab.is-active .tab-badge{ background:var(--white); color:var(--red); }
/* Tab phụ Trung tâm/Lớp — nằm bên trong panel "Bảng xếp hạng" */
.board__subtabs{ display:flex; gap:10px; padding:16px 20px 0; }
.board__subtabs[hidden]{ display:none; }
.board__subtab{
flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:8px;
padding:10px 14px; border:1px solid #D3E7F4; background:var(--white);
border-radius:var(--r-pill); font-weight:700; font-size:14.5px; color:var(--blue);
transition:background .18s, color .18s, border-color .18s;
}
.board__subtab svg{ width:1.25em; height:1.25em; fill:currentColor; flex:none; }
.board__subtab.is-active{ background:var(--blue); color:var(--white); border-color:var(--blue); }
.board__subtab:not(.is-active):hover{ background:#EDF5FF; }
.board__filters{
background:var(--sky);
display:flex; flex-wrap:wrap; align-items:flex-end; gap:18px;
padding:18px 20px; margin:0 -14px;
}
.board__filters[hidden]{ display:none; }
.field{ flex:1 1 240px; min-width:200px; }
.field label{
display:block; font-size:15px; font-weight:500; color:#4C6B85; margin-bottom:8px;
}
.select{ position:relative; }
.select::after{
content:""; position:absolute; right:16px; top:50%; margin-top:-3px;
border:7px solid transparent; border-top-color:var(--blue); pointer-events:none;
}
.select select{
width:100%; appearance:none; -webkit-appearance:none;
background:var(--white); border:1px solid #D3E7F4; border-radius:var(--r-sm);
padding:12px 44px 12px 14px;
font-family:var(--font-ui); font-size:15px; font-weight:500; color:var(--blue-ink);
cursor:pointer;
}
.select select:focus-visible{ outline:2px solid var(--blue); outline-offset:1px; }
.btn-reset{
display:inline-flex; align-items:center; gap:10px;
background:var(--white); border:1px solid #D3E7F4; border-radius:var(--r-sm);
padding:12px 20px; font-size:16px; font-weight:500; color:var(--blue-ink);
transition:box-shadow .2s, transform .1s;
}
.btn-reset svg{ width:22px; height:22px; fill:var(--blue); }
.btn-reset:hover{ box-shadow:0 4px 12px rgba(37,73,230,.16); }
.btn-reset:active{ transform:translateY(1px); }
.board__scroller{ overflow-x:auto; margin:0 -14px; padding:0 14px; }
.rank-table{
width:100%; border-collapse:separate; border-spacing:0;
min-width:820px; margin-top:16px;
}
.rank-table th{
background:var(--blue); color:var(--white);
font-family:var(--font-display); font-weight:700;
font-size:clamp(13px,1.35vw,19px); text-transform:uppercase; letter-spacing:.02em;
padding:16px 10px; text-align:center;
border-right:2px solid rgba(255,255,255,.35);
white-space:nowrap;
}
.rank-table th:last-child{ border-right:none; }
.rank-table th.is-score{ background:var(--red); }
.rank-table th:first-child{ border-radius:var(--r-md) 0 0 0; }
.rank-table th:last-child{ border-radius:0 var(--r-md) 0 0; }
.rank-table td{
background:var(--sky); color:var(--blue);
font-weight:700; font-size:clamp(14px,1.25vw,19px);
padding:16px 10px; text-align:center;
border-bottom:1px solid #D6ECF8; border-right:1px solid #D6ECF8;
}
.rank-table td:last-child{ border-right:none; }
.rank-table tbody tr:last-child td:first-child{ border-radius:0 0 0 var(--r-md); }
.rank-table tbody tr:last-child td:last-child{ border-radius:0 0 var(--r-md) 0; }
.rank-table td.is-name{ text-align:center; }
.rank-table td.is-score{ background:var(--white); color:var(--red); }
.rank-table tbody tr:hover td{ background:#DCF1FC; }
.rank-table tbody tr:hover td.is-score{ background:#FFF6F5; }
.rank-cell-rank{ display:inline-flex; align-items:baseline; gap:4px; }
.rank-cell-rank b{ font-family:var(--font-display); font-weight:700; font-size:1.35em; }
.delta{ font-size:.72em; font-weight:700; white-space:nowrap; }
.delta--up{ color:var(--green); }
.delta--down{ color:var(--red); }
.delta--same{ color:#8AA6BC; }
.rank-empty{ padding:28px 10px; text-align:center; color:#6B8AA3; font-weight:500; }
.rank-prov{ font-weight:600; opacity:.7; }
.board__foot{
display:flex; align-items:center; justify-content:space-between; gap:16px;
flex-wrap:wrap; padding:16px 4px 4px;
}.board__count{ font-size:14px; font-weight:500; color:#5C7C95; }
/* Phân trang */
.pager{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pager__num,
.pager__nav{
min-width:40px; height:40px; padding:0 10px;
display:inline-flex; align-items:center; justify-content:center;
background:var(--white); color:var(--blue);
border:1px solid #D3E7F4; border-radius:var(--r-sm);
font-family:var(--font-ui); font-weight:700; font-size:15px;
transition:background .18s ease, color .18s ease, border-color .18s ease, transform .1s ease;
}
.pager__nav{ font-size:22px; line-height:1; padding-bottom:3px; }
.pager__num:hover,
.pager__nav:not([disabled]):hover{ background:#EDF4FF; border-color:var(--blue); }
.pager__num:active,
.pager__nav:not([disabled]):active{ transform:translateY(1px); }
.pager__num.is-current{
background:var(--blue); color:var(--white); border-color:var(--blue);
box-shadow:0 4px 12px rgba(37,73,230,.28);
}
.pager__nav[disabled]{ opacity:.4; cursor:not-allowed; }
.pager__gap{ padding:0 2px; color:#8AA6BC; font-weight:700; }
.board__note{
margin:4px 4px 0; padding:10px 14px;
background:#FFF6E5; border:1px solid #F3D9A6; border-radius:var(--r-sm);
font-size:13.5px; font-weight:500; color:#8A6414;
}
/* ==========================================================================
SECTION 1.5 — KẾT QUẢ CHUNG KẾT (tab mặc định, Top 5 nhà vô địch)
Cùng nền mây + confetti như .voting, tái dùng các token màu sẵn có
(--blue, --blue-deep, --yellow) để khớp đúng mockup thiết kế.
========================================================================== */
.results{
position:relative;
padding:clamp(20px,4vw,32px) 4px clamp(20px,4vw,32px);
/* Ảnh nền mây gốc (JPG) ngả xám — bỏ hẳn. "Mây" thật ở đây vẽ bằng 1
hoạ tiết SVG trắng tinh (nửa hình tròn lặp lại) dọc mép trên, đúng
kiểu viền mây bồng bềnh như mockup, không dùng ảnh chụp nên không
bao giờ ngả xám — nằm trên nền gradient trắng -> xanh nhạt. */
background-image:
url("/landings/leaderboard-championship/layout/results/cloud-band.svg"),
linear-gradient(180deg,#FFFFFF 0%,#EAF6FF 45%,#DCEFFC 100%);
background-repeat: repeat-x, no-repeat;
background-size: 340px 160px, 100% 100%;
background-position: top center, top center;
border-radius:var(--r-lg);
}
.results[hidden]{ display:none; }
/* Giới hạn bề rộng đúng bằng ruy-băng để 4 mảnh confetti (định vị theo %
so với chính khối này) nằm sát ruy-băng như mockup, thay vì lọt thỏm
ra tận mép khối .wrap rộng gần gấp đôi. */
.results__intro{ position:relative; text-align:center; max-width:680px; margin:0 auto; padding:6px 16px 0; }
.results__confetti{
position:absolute; top:-14px; width:clamp(90px,16vw,150px); height:auto;
pointer-events:none; z-index:1; opacity:.95;
animation:drift 7.5s ease-in-out infinite;
}
.results__confetti--left{ left:clamp(-18px,-3vw,4px); animation-delay:-1.2s; }
.results__confetti--right{ right:clamp(-18px,-3vw,4px); top:-4px; animation-duration:8.6s; animation-delay:-4s; }
@media (max-width:640px){
.results__confetti{ width:clamp(64px,20vw,96px); top:-8px; }
}
/* Dùng đúng asset ruy-băng rỗng có sẵn (trong suốt, không dính khối chữ
nhật/bóng như khi cắt từ ảnh mockup ghép) + chữ overlay sống bằng HTML/SVG
(giữ được i18n EN). Chữ chạy theo textPath trong viewBox khớp đúng tỉ lệ
ảnh ribbon.png nên tự co giãn đúng theo khung, không còn phụ thuộc vw
(nguyên nhân tràn chữ ở các bản trước). */
.results__ribbon-wrap{
position:relative; z-index:2; width:min(780px,96%); margin:0 auto;
}
.results__ribbon-wrap::before{
content:''; position:absolute; inset:-38% -6% -10%;
background:radial-gradient(closest-side, rgba(255,196,20,.4), rgba(255,196,20,0) 72%);
filter:blur(2px); z-index:-1; pointer-events:none;
}
.results__ribbon{ display:block; width:100%; height:auto; }
/* Chữ chạy theo đúng độ cong thật của ruy-băng (đo toạ độ mép trên ảnh
ribbon.png bằng pixel để vẽ path, không áng chừng) — dùng SVG textPath
nên tự co giãn theo % khi ảnh co giãn (viewBox khớp đúng 1400x203 của
ribbon.png), không lệch dù màn hình to nhỏ khác nhau. */
.results__title{
position:absolute; left:50%; top:40%; transform:translate(-50%,-50%);
width:100%; margin:0;
}
.results__title-svg{ display:block; width:100%; height:auto; overflow:visible; }
.results__title-svg text{
font-family:var(--font-display); font-weight:700; fill:var(--white);
text-transform:uppercase; letter-spacing:.01em;
font-size:56px;
/* Viền nâu nhạt cho dễ đọc trên nền vàng — dùng stroke SVG (luôn chạy
mọi trình duyệt) thay vì text-shadow (SVG text hỗ trợ chập chờn). */
paint-order:stroke; stroke:rgba(170,105,0,.35); stroke-width:3px; stroke-linejoin:round;
}
@media (min-width:900px){
/* "Nguyên cụm" ruy-băng + chữ to hẳn lên trên desktop, không bị khối
.results__intro (680px) chặn ngang như trước. */
.results__intro{ max-width:940px; }
.results__ribbon-wrap{ width:min(880px,94%); }
}
.results__pending{
max-width:560px; margin:32px auto 8px; padding:22px 26px;
background:rgba(255,255,255,.85); border:1.5px solid #CDE7FB; border-radius:var(--r-lg);
box-shadow:0 8px 20px rgba(20,60,160,.08); text-align:center;
}
.results__pending-text{
margin:0; font-family:var(--font-ui); font-weight:700; color:var(--blue-ink);
font-size:clamp(14px,1.9vw,17px); line-height:1.5;
}
@keyframes twinkle{
0%,100%{ opacity:.25; transform:scale(.75); }
50%{ opacity:1; transform:scale(1.15); }
}
@media (prefers-reduced-motion:reduce){
.results__confetti{ animation:none; }
}
.results__lead{
max-width:720px; margin:16px auto 0; color:var(--blue-ink);
font-family:var(--font-serif); font-weight:400;
font-size:clamp(15px,2.1vw,19px); line-height:1.6;
}
/* Podium top 3 — 3 cột ảnh riêng (khung + bệ), cột giữa (#1) đẩy cao hơn
bằng margin-top âm ở 2 cột bên thay vì ghép chung 1 ảnh như .podium cũ.
Khung ảnh (frame) chiếm gần trọn cột — sẽ chèn ảnh lớp thật vào sau. */
.podium2{
display:flex; align-items:flex-end; justify-content:center;
gap:clamp(8px,2.6vw,30px); margin:32px auto 0; max-width:1160px; padding:0 6px;
}
.podium2[hidden]{ display:none; }
.podium2__col{ flex:1 1 0; max-width:340px; display:flex; flex-direction:column; align-items:center; min-width:0; }
.podium2__col--1{ position:relative; order:2; z-index:2; max-width:380px; }
.podium2__col--2{ order:1; margin-top:clamp(18px,4vw,34px); }
.podium2__col--3{ order:3; margin-top:clamp(18px,4vw,34px); }
/* Quầng sáng vàng ấm sau lớp #1 — nổi bật nhà vô địch, mờ dần ra ngoài. */
.podium2__col--1::before{
content:''; position:absolute; left:50%; top:6%;
width:135%; aspect-ratio:1; transform:translate(-50%,0);
background:radial-gradient(closest-side, rgba(255,196,20,.38), rgba(255,196,20,0) 70%);
z-index:-1; pointer-events:none;
animation:podiumGlow 2.8s ease-in-out infinite;
}
.podium2__frame{ position:relative; width:88%; }
.podium2__col--1 .podium2__frame{ width:96%; }
.podium2__frame-img{ display:block; width:100%; height:auto; }
/* Khung trong (podium2__window) khớp đúng toạ độ ô trắng thật trong từng
ảnh frame-*.png (đo bằng pixel, mỗi khung crown cao thấp khác nhau nên
top/bottom riêng cho từng loại) — ảnh 4:3 canh giữa bên trong bằng flex,
ưu tiên khớp chiều cao để không tràn ra ngoài viền ở cột nào. */
.podium2__window{
position:absolute; left:3%; right:3%;
display:flex; align-items:center; justify-content:center;
}
.podium2__window--1{ top:29%; bottom:4.6%; } /* vàng — crown cao nhất */
.podium2__window--2{ top:28%; bottom:4.5%; } /* bạc */
.podium2__window--3{ top:25.5%; bottom:4.8%; } /* đồng — crown thấp nhất */
.podium2__photo{
height:100%; width:auto; max-width:100%;
aspect-ratio:4/3; background:#EAF4FF; border-radius:8%;
}
.podium2__card{
position:relative; z-index:1; width:96%; margin-top:-10px;
background:rgba(255,255,255,.55); border-radius:var(--r-md);
padding:10px 8px 14px; text-align:center;
box-shadow:0 6px 16px rgba(20,60,160,.10);
/* Kính mờ — thấy lờ mờ màu bục phía sau thẻ, đúng như mockup, thay vì
nền trắng đục hoàn toàn như trước (đang bỏ qua hiệu ứng này). */
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
.podium2__code{ margin:0; font-family:var(--font-display); font-weight:700; color:var(--blue); font-size:clamp(13px,2vw,18px); }
.podium2__name{ margin:3px 0 0; font-family:var(--font-ui); font-weight:700; color:var(--blue); font-size:clamp(11.5px,1.7vw,15.5px); }
/* Điểm chung kết — viên nhãn vàng, nổi hơn mã lớp/tên trung tâm */
.podium2__score,
.results__score{
display:inline-block; margin:8px 0 0; padding:3px 12px 2px;
border-radius:999px; background:var(--yellow); color:var(--blue-deep);
font-family:var(--font-display); font-weight:700; line-height:1.25;
box-shadow:0 2px 6px rgba(200,140,0,.25);
}
.podium2__score{ font-size:clamp(14px,2vw,20px); }
.results__score{ font-size:clamp(15px,2.4vw,22px); }
.podium2__score:empty,
.results__score:empty{ display:none; }
.podium2__base{ position:relative; display:block; width:100%; margin-top:-4px; }
/* Vệt sáng "kim loại" lướt qua — CHỈ ở bục #1 (nhà vô địch) để dồn hiệu
ứng vào đúng 1 chỗ thay vì rải đều 6 chỗ (bục+khung x3 cột) gây rối mắt
và tốn hiệu năng trên máy yếu. Dùng chính ảnh podium-1.png làm mask
nên vệt sáng chỉ hiện đúng trong hình khối bục, không tràn ra nền
trong suốt xung quanh. */
.podium2__col--1 .podium2__base::after{
content:''; position:absolute; inset:0;
background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 47%, transparent 64%);
background-size:220% 100%; background-position:130% 0;
-webkit-mask-image:url("/landings/leaderboard-championship/layout/results/podium-1.png");
mask-image:url("/landings/leaderboard-championship/layout/results/podium-1.png");
-webkit-mask-size:100% 100%; mask-size:100% 100%;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
animation:podiumShine 4.5s ease-in-out infinite;
pointer-events:none;
}
.podium2__sparkle{
position:absolute; color:#FFF3B0; text-shadow:0 0 6px rgba(255,214,46,.95);
font-size:clamp(11px,1.8vw,16px); pointer-events:none; z-index:3;
animation:twinkle 2.2s ease-in-out infinite;
}
.podium2__sparkle--a{ left:8%; top:-6%; animation-delay:-.3s; }
.podium2__sparkle--b{ right:6%; top:2%; font-size:clamp(9px,1.3vw,12px); animation-delay:-1.3s; }
@keyframes podiumGlow{
0%,100%{ opacity:.7; transform:translate(-50%,0) scale(1); }
50%{ opacity:1; transform:translate(-50%,0) scale(1.08); }
}
@keyframes podiumShine{
0%, 45%{ background-position:130% 0; }
70%, 100%{ background-position:-30% 0; }
}
@media (prefers-reduced-motion:reduce){
.podium2__frame, .podium2__col--1::before, .podium2__sparkle, .podium2__col--1 .podium2__base::after{
animation:none;
}
}
/* Danh sách hạng 4-5 */
.results__list{
display:flex; flex-direction:column; gap:16px;
max-width:1000px; margin:28px auto 0; padding:0 6px;
}
.results__list[hidden]{ display:none; }
.results__row{
display:flex; align-items:center; gap:clamp(12px,3vw,24px);
background:rgba(255,255,255,.92); border:1.5px solid #CDE7FB; border-radius:var(--r-lg);
padding:clamp(12px,2.2vw,16px) clamp(16px,3.6vw,28px) clamp(12px,2.2vw,16px) clamp(12px,2.2vw,16px);
box-shadow:0 6px 16px rgba(20,60,160,.06);
}
.results__rank{
flex:none; width:clamp(52px,9vw,76px); height:clamp(52px,9vw,76px); border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:radial-gradient(circle at 32% 28%,#5B93FF,var(--blue) 72%);
color:var(--white); font-family:var(--font-display); font-weight:700; font-size:clamp(22px,4vw,32px);
box-shadow:0 3px 8px rgba(30,70,220,.35), inset 0 0 0 3px rgba(255,255,255,.55);
}
/* Khung ảnh lớp — để trống chờ chèn ảnh thật, tỉ lệ 4:3, chiều cao chiếm
gần hết thẻ (đúng tỉ lệ mockup) thay vì icon nhỏ như bản cũ. */
.results__photo{
flex:none; height:clamp(110px,22vw,230px); width:auto; aspect-ratio:4/3;
border:3px solid var(--blue); border-radius:16px; background:#EAF4FF;
}
.results__info{ flex:1 1 auto; min-width:0; }
.results__code{ margin:0; font-family:var(--font-display); font-weight:700; color:var(--blue); font-size:clamp(15px,2.6vw,22px); white-space:nowrap; }
.results__name{ margin:5px 0 0; font-family:var(--font-ui); font-weight:700; color:var(--blue); font-size:clamp(13px,2.1vw,18px); }
@media (max-width:640px){
.results__code{ font-size:clamp(12px,3.8vw,15px); }
.results__name{ font-size:clamp(11px,3.2vw,13.5px); }
.results__row{ gap:10px; padding:10px 12px 10px 10px; }
/* Màn hẹp: ô hạng + ảnh 110px chiếm gần hết bề ngang, mã lớp (nowrap)
tràn ra ngoài thẻ ở 320px. Thu nhỏ hai khối này, cho mã xuống dòng. */
.results__rank{ width:40px; height:40px; font-size:18px; }
.results__photo{ height:clamp(72px,24vw,110px); border-width:2px; border-radius:12px; }
.results__code{ white-space:normal; }
.results__score{ font-size:14px; margin-top:6px; padding:2px 10px 1px; }
}
/* ==========================================================================
SECTION 3b — BÌNH CHỌN (tab "Bình chọn", Thử thách 2 Vòng Chung kết)
========================================================================== */
.voting{
padding:clamp(20px,4vw,32px) 4px 4px;
background:#DCEFFC url("/landings/leaderboard-championship/layout/voting-bg.jpg") top center / cover no-repeat;
border-radius:var(--r-lg);
}
.voting__head{ margin-bottom:18px; border-radius:var(--r-lg); overflow:hidden; }
.voting__head-img{ display:block; width:100%; height:auto; }
.voting__locked{
display:flex; flex-direction:column; align-items:center; gap:10px;
text-align:center; background:var(--sky); border:1px solid #D3E7F4;
border-radius:var(--r-lg); padding:clamp(24px,5vw,40px) 20px; margin:0 0 20px;
}
#voting-locked[hidden]{ display:none; }
.voting__locked-ico{ width:clamp(36px,4vw,48px); height:auto; }
.voting__locked p{ margin:0; font-size:clamp(16px,1.9vw,19px); font-weight:600; color:var(--blue-ink); }
.voting__locked b{ font-family:var(--font-display); color:var(--blue); font-size:1.15em; }
/* Số "khí thế" — dải nhỏ phía trên viên pill trạng thái, tách riêng thay vì
nhét vào .voting__status vì bản mobile của khối đó đã cố định lưới 2 cột
(xem @media dưới cùng file) — thêm ô thứ 3 vào sẽ vỡ lưới đó. */
.voting__hype{
display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
gap:8px 12px; margin:0 0 14px; padding:12px 22px;
background:linear-gradient(135deg,#FFF6C2 0%,var(--yellow-light) 100%);
color:var(--blue-ink);
border-radius:var(--r-pill); text-align:center;
font-family:var(--font-ui); font-weight:600; font-size:clamp(12.5px,1.6vw,15px);
box-shadow:0 10px 24px rgba(255,122,26,.16), inset 0 1px 0 rgba(255,255,255,.65);
}
.voting__hype[hidden]{ display:none; }
.voting__hype-ico-wrap{
display:inline-flex; align-items:center; justify-content:center; flex:none;
width:26px; height:26px; border-radius:50%;
background:rgba(255,255,255,.55);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}
.voting__hype-ico{ width:16px; height:16px; flex:none; }
.voting__hype-count{
font-family:var(--font-display); font-weight:700; color:var(--blue);
margin:0 2px; font-size:1.15em; vertical-align:middle;
}
.voting__hype-dot{ opacity:.45; }
@media (max-width:640px){
.voting__hype{ font-size:12px; padding:9px 16px; gap:5px 8px; }
.voting__hype-ico-wrap{ width:22px; height:22px; }
.voting__hype-ico{ width:13px; height:13px; }
}
/* Trạng thái — bản gốc (desktop/web): 1 viên pill xanh, câu chữ đầy đủ,
đủ 4 đơn vị đếm ngược, đúng thiết kế mockup ban đầu. KHÔNG đổi trên web.
Riêng mobile đổi sang 2 thẻ gọn — xem override trong @media dưới cùng file,
dùng lại đúng các phần tử số liệu này (không nhân đôi) nên JS không cần sửa. */
.voting__status{
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:12px clamp(20px,4vw,36px);
background:linear-gradient(180deg,#3D6BFF 0%,var(--blue-deep) 100%);
border:none; border-radius:var(--r-pill);
padding:clamp(16px,2.6vw,22px) clamp(20px,4.5vw,36px); margin:0 0 20px;
font-size:clamp(16px,1.9vw,19px); font-weight:400; color:var(--white);
box-shadow:0 10px 26px rgba(37,73,230,.22);
transition:background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.voting__status-item{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.voting__status-ico{ width:clamp(28px,3.2vw,36px); height:auto; flex:none; }
.voting__status-text{ display:inline; font-family:var(--font-serif); }
.voting__stat-label{ display:none; } /* nhãn ngắn chỉ dùng cho thẻ ở mobile */
.voting__count{
display:inline-flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-weight:700; font-size:1.5em; color:var(--white); vertical-align:middle;
}
.voting__status > i{ width:1px; align-self:stretch; background:rgba(255,255,255,.35); }
.voting__status--done{ background:linear-gradient(135deg,#EAF1F8 0%,#F3F8FC 100%); color:var(--blue-ink); box-shadow:0 10px 26px rgba(37,73,230,.08); }
.voting__status--done .voting__count{ color:var(--blue-ink); }
.voting__status--done > i{ background:#D3E7F4; }
.voting__cd{ display:inline-flex; align-items:center; gap:7px; }
.voting__cd-unit{ display:inline-flex; align-items:baseline; gap:4px; }
.voting__cd-unit b{
font-family:var(--font-display); font-weight:700; font-size:1.5em;
color:var(--white); min-width:1.6em; text-align:center;
}
.voting__cd-unit i{ font-style:normal; font-size:.95em; font-weight:400; opacity:1; }
.voting__status--done .voting__cd-unit b{ color:var(--blue-ink); }
.voting__status--done .voting__cd-unit b{ color:var(--blue-ink); }
.voting__status--done .voting__cd-unit i{ color:rgba(27,58,175,.55); }
/* Hết hạn bình chọn: 1 khối thông báo thay chỗ khối đếm ngược + số lượt */
.voting__closed{
display:flex; align-items:center; gap:14px;
margin:0 0 20px; padding:16px 22px;
background:linear-gradient(135deg,var(--blue) 0%,var(--blue-deep) 100%); color:var(--white);
border-radius:var(--r-md); box-shadow:0 10px 26px rgba(37,73,230,.22);
}
.voting__closed[hidden]{ display:none; }
.voting__closed-ico{ width:clamp(30px,3.4vw,40px); height:auto; flex:none; }
.voting__closed-title{ margin:0; font-family:var(--font-display); font-weight:700; font-size:clamp(18px,2.2vw,24px); line-height:1.2; }
.voting__closed-sub{ margin:4px 0 0; font-family:var(--font-ui); font-size:clamp(13px,1.5vw,15px); line-height:1.45; color:rgba(255,255,255,.85); }
.voting__tools{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:20px; }
#voting-status[hidden], #voting-tools[hidden], #voting-grid[hidden]{ display:none; }
.voting__search{ flex:1 1 280px; position:relative; }
.voting__search svg{
position:absolute; left:16px; top:50%; transform:translateY(-50%);
width:18px; height:18px; fill:none; stroke:var(--blue); stroke-width:2;
}
.voting__search input{
width:100%; padding:12px 16px 12px 44px;
border:1px solid #D3E7F4; border-radius:var(--r-sm);
font-family:var(--font-ui); font-size:15px; font-weight:500; color:var(--blue-ink); background:var(--white);
}
.voting__search input::placeholder{ color:#9FB8CC; font-weight:500; }
.voting__search input:focus-visible{ outline:2px solid var(--blue); outline-offset:1px; }
.voting__sort{ flex:0 1 260px; min-width:220px; }
.voting__grid{
display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px;
margin-bottom:8px;
}
.vote-card{
background:var(--white); border:1px solid #E2EFF8; border-radius:var(--r-md);
overflow:hidden; box-shadow:0 8px 20px rgba(37,73,230,.06);
display:flex; flex-direction:column;
transition:transform .18s ease, box-shadow .18s ease;
}
@media (hover:hover){
.vote-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(37,73,230,.16); }
}
.vote-card__photo{
position:relative; aspect-ratio:4/3; overflow:hidden; background:#EAF1F8;
}
.vote-card__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* ==========================================================================
BA KIỂU HIỂN THỊ DANH SÁCH BÌNH CHỌN
==========================================================================
Cả ba dùng CHUNG một bộ HTML thẻ — chỉ đổi class trên .voting__grid nên
chuyển kiểu là tức thì, không vẽ lại DOM, không mất vị trí cuộn, và mọi
thứ đang chạy (bầu, chia sẻ, lightbox, lọc) tự hoạt động.
========================================================================== */
/* ---- Nút chuyển kiểu ---- */
.viewswitch{
display:flex; gap:2px; padding:3px; flex:none;
background:var(--sky); border:1px solid #D9EBF7; border-radius:var(--r-sm);
}
.viewswitch__btn{
display:flex; align-items:center; justify-content:center;
width:38px; height:38px; padding:0; cursor:pointer;
border:none; background:transparent; border-radius:calc(var(--r-sm) - 3px);
color:var(--blue-ink); opacity:.55; transition:background .16s, opacity .16s;
}
.viewswitch__btn svg{ width:19px; height:19px; }
.viewswitch__btn:hover{ opacity:.85; }
.viewswitch__btn.is-on{
background:var(--white); opacity:1;
box-shadow:0 2px 6px rgba(37,73,230,.14);
}
/* ---- Kiểu 2: ẢNH LỚN ----
Ảnh chiếm trọn thẻ, thông tin đè lên đáy ảnh. Hợp để ngắm ảnh dự thi. */
/* Desktop 2 cột: mục đích của kiểu này là NGẮM ảnh dự thi, nên ưu tiên ảnh
to. Hai cột cho mỗi ảnh ~590px thay vì ~290px như 4 cột. */
.voting__grid--gallery{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px !important; }
.voting__grid--gallery .vote-card{ position:relative; }
/* Ảnh rộng 590px mà tỉ lệ 4:5 sẽ cao 738px — quá cao, cuộn mỏi. Đổi sang
4:3 cho cân, ảnh vẫn to gấp đôi so với lúc 4 cột. */
.voting__grid--gallery .vote-card__photo{ aspect-ratio:4/3; }
.voting__grid--gallery .vote-card__photo img{
height:100%; object-fit:cover;
transition:transform .45s cubic-bezier(.22,.61,.36,1);
will-change:transform;
}
/* Rê chuột: phóng nhẹ ẢNH bên trong khung (khung đứng yên, ảnh lớn dần và
bị cắt bớt ở mép) — cách này hợp với kiểu "ngắm ảnh" hơn là nhấc cả thẻ
lên. Chỉ áp dụng cho máy có chuột thật; màn cảm ứng không có trạng thái
hover nên hiệu ứng sẽ kẹt lại sau khi chạm. */
@media (hover:hover){
.voting__grid--gallery .vote-card:hover{
transform:none; /* bỏ nhấc thẻ của kiểu Card */
box-shadow:0 14px 30px rgba(37,73,230,.18);
}
.voting__grid--gallery .vote-card:hover .vote-card__photo img{
transform:scale(1.08);
}
}
/* Người bật "giảm chuyển động" thì không phóng */
@media (prefers-reduced-motion:reduce){
.voting__grid--gallery .vote-card__photo img{ transition:none; }
.voting__grid--gallery .vote-card:hover .vote-card__photo img{ transform:none; }
}
.voting__grid--gallery .vote-card__body{
position:absolute; left:0; right:0; bottom:0; z-index:2;
padding:52px 18px 16px; gap:3px;
/* Gradient đậm và cao hơn: chữ nằm trên ảnh nên nền phải đủ tối, nếu
không thì gặp ảnh sáng là chữ trắng chìm mất. */
background:linear-gradient(to top,
rgba(8,18,46,.94) 0%, rgba(8,18,46,.82) 45%, rgba(8,18,46,0) 100%);
}
/* Thẻ Gallery rộng ~590px — chữ 15px quá nhỏ so với khung. Tăng cỡ và
thêm đổ bóng chữ để tách khỏi ảnh nền trong mọi trường hợp. */
.voting__grid--gallery .vote-card__code{
color:#fff; font-size:21px; font-weight:800; letter-spacing:.01em;
line-height:1.2; text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.voting__grid--gallery .vote-card__center{
color:rgba(255,255,255,.94); font-size:15px; font-weight:600;
line-height:1.3; text-shadow:0 1px 8px rgba(0,0,0,.5);
white-space:normal; /* tên trung tâm dài xuống dòng, không cắt */
}
.voting__grid--gallery .vote-card__badge{
background:rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(4px);
}
.voting__grid--gallery .vote-card__badge svg{ fill:#fff; }
/* Hai nút NẰM NGANG. Ở kiểu Card chúng xếp dọc vì thẻ hẹp, nhưng thẻ
Gallery rộng ~590px nên xếp dọc tốn chiều cao vô ích và che mất ảnh. */
.voting__grid--gallery .vote-card__actions{
flex-direction:row; align-items:stretch; gap:8px;
margin-top:10px; max-width:360px;
}
/* Nút bình chọn ưu tiên rộng hơn nút chia sẻ */
.voting__grid--gallery .vote-card__vote{ flex:1 1 auto; }
.voting__grid--gallery .vote-card__share{ flex:0 0 auto; }
.voting__grid--gallery .vote-card__vote,
.voting__grid--gallery .vote-card__share{
background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.3);
backdrop-filter:blur(4px);
}
.voting__grid--gallery .vote-card__vote:hover,
.voting__grid--gallery .vote-card__share:hover{ background:rgba(255,255,255,.28); }
.voting__grid--gallery .vote-card__vote.is-voted{
background:var(--blue); border-color:var(--blue); color:#fff;
}
.voting__grid--gallery .vote-card__vote svg{ fill:#fff; }
/* Máy tính bảng dọc và laptop nhỏ (641-860px): 2 cột lúc này chỉ còn ~295px
mỗi thẻ — ảnh 104px cộng chữ cộng nút không đủ chỗ, chữ bị cắt. Lùi về
1 cột cho tới khi đủ rộng. */
@media (min-width:641px) and (max-width:860px){
.voting__grid--gallery{ grid-template-columns:1fr !important; }
.voting__grid--gallery .vote-card__photo{ aspect-ratio:16/10; }
}
/* ---- Tiêu đề popup ảnh: mã lớp + trung tâm ---- */
/* Khối bọc ảnh: co đúng bằng ảnh để tiêu đề bám theo góc ảnh. */
.lightbox__frame{
position:relative; display:inline-flex; flex-shrink:0;
width:fit-content; height:fit-content;
}
/* Tiêu đề nằm TRÊN góc trái trên của ảnh, đè lên mép ảnh. */
.lightbox__title{
position:absolute; top:10px; left:10px; z-index:3;
display:flex; flex-direction:column; gap:1px;
max-width:calc(100% - 20px);
padding:7px 12px; border-radius:8px;
background:rgba(12,24,60,.62); backdrop-filter:blur(6px);
font-family:var(--font-ui); text-align:left;
pointer-events:none; /* không chắn thao tác kéo ảnh bên dưới */
}
.lightbox__title-code{
color:#fff; font-size:14px; font-weight:800; letter-spacing:.01em;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lightbox__title-center{
color:rgba(255,255,255,.85); font-size:12px; font-weight:600;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:640px){
/* Màn hẹp: thu nhỏ để không chiếm quá nhiều mặt ảnh */
.lightbox__title{ top:7px; left:7px; padding:6px 10px; border-radius:7px; }
.lightbox__title-code{ font-size:12.5px; }
.lightbox__title-center{ font-size:11px; }
}
/* ---- Nút Bình chọn / Chia sẻ ngay trong popup ----
Đặt trên hàng chấm điều hướng, để xem ảnh xong bầu luôn không phải đóng
popup. Nút chỉ là "bản sao" — bấm vào sẽ kích hoạt đúng nút trên thẻ lớp
(xem cardBtn trong main.js), nên mọi luật bình chọn dùng chung một chỗ. */
.lightbox__cta{
position:absolute; left:50%; bottom:126px; transform:translateX(-50%); z-index:4;
display:flex; gap:9px; align-items:stretch;
max-width:calc(100% - 32px);
}
.lightbox__cta .vote-card__vote{ flex:1 1 auto; min-width:150px; }
.lightbox__cta .vote-card__share{ flex:0 0 auto; }
.lightbox__cta .vote-card__vote,
.lightbox__cta .vote-card__share{
box-shadow:0 8px 22px rgba(8,18,46,.35);
}
/* Hết lượt / hết hạn: nút mờ đi, không bấm được — giống hệt trên thẻ */
.lightbox__cta .vote-card__vote:disabled{ opacity:.5; cursor:not-allowed; }
/* Lớp 1 ảnh: không có hàng chấm nên hạ xuống sát khối zoom */
.lightbox__cta--low{ bottom:76px; }
@media (max-width:640px){
/* Màn hẹp: nút sát đáy hơn và thu nhỏ cho vừa */
.lightbox__cta{ bottom:112px; gap:7px; max-width:calc(100% - 20px); }
.lightbox__cta--low{ bottom:68px; }
.lightbox__cta .vote-card__vote{ min-width:0; }
.lightbox__cta .vote-card__vote,
.lightbox__cta .vote-card__share{ padding:10px 12px; font-size:13.5px; }
}
/* ---- Gallery trong lightbox: nút trái/phải, bộ đếm, chấm ---- */
.lightbox__nav{
position:absolute; top:50%; transform:translateY(-50%); z-index:3;
width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
background:rgba(12,24,60,.55); color:#fff; backdrop-filter:blur(6px);
display:flex; align-items:center; justify-content:center;
transition:background .18s, transform .18s;
}
.lightbox__nav svg{ width:26px; height:26px; }
.lightbox__nav:hover{ background:rgba(12,24,60,.8); }
.lightbox__nav:active{ transform:translateY(-50%) scale(.93); }
.lightbox__nav--prev{ left:14px; }
.lightbox__nav--next{ right:14px; }
.lightbox__gallery{
position:absolute; left:50%; bottom:78px; transform:translateX(-50%); z-index:3;
display:flex; flex-direction:column; align-items:center; gap:9px;
}
.lightbox__counter{
font-family:var(--font-ui); font-size:13px; font-weight:600; color:#fff;
background:rgba(12,24,60,.55); border-radius:999px; padding:4px 12px;
backdrop-filter:blur(6px); font-variant-numeric:tabular-nums;
}
.lightbox__dots{ display:flex; gap:7px; flex-wrap:wrap; justify-content:center; max-width:70vw; }
.lightbox__dot{
width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
border:none; background:rgba(255,255,255,.45); transition:background .18s, transform .18s;
}
.lightbox__dot:hover{ background:rgba(255,255,255,.75); }
.lightbox__dot.is-on{ background:#fff; transform:scale(1.35); }
/* Huy hiệu "có N ảnh" trên thẻ lớp */
.vote-card__photo{ position:relative; }
.vote-card__count{
position:absolute; right:8px; bottom:8px;
display:inline-flex; align-items:center; gap:4px;
padding:3px 8px; border-radius:999px;
background:rgba(12,24,60,.62); color:#fff; backdrop-filter:blur(4px);
font-family:var(--font-ui); font-size:12px; font-weight:700; line-height:1;
}
.vote-card__count svg{ width:13px; height:13px; }
@media (max-width:640px){
/* Màn hẹp: nút nhỏ lại và sát mép hơn để không che ảnh */
.lightbox__nav{ width:40px; height:40px; }
.lightbox__nav svg{ width:22px; height:22px; }
.lightbox__nav--prev{ left:6px; }
.lightbox__nav--next{ right:6px; }
.lightbox__gallery{ bottom:70px; }
}
.vote-card__photo-ph{
width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:6px; color:#9FB4C9; font-size:11.5px; font-weight:600;
}
.vote-card__photo-ph svg{ width:30px; height:30px; fill:currentColor; opacity:.85; }
.vote-card__badge-row{ display:flex; justify-content:flex-end; margin-top:2px; }
.vote-card__badge{
display:inline-flex; align-items:center; gap:5px;
background:var(--red); color:var(--white);
border-radius:var(--r-pill); padding:5px 12px 5px 8px;
font-family:var(--font-display); font-weight:700; font-size:14px;
box-shadow:0 4px 10px rgba(212,35,21,.28);
}
.vote-card__badge svg{ width:14px; height:14px; fill:var(--white); }
.vote-card__body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px; flex:1; }
.vote-card__code{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--blue); }
.vote-card__center{ font-family:var(--font-serif); font-size:15.5px; font-weight:400; color:var(--blue); }
.vote-card__actions{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.vote-card__vote{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
background:var(--yellow); color:var(--red); border:none; border-radius:var(--r-pill);
padding:11px 14px; font-weight:700; font-size:14.5px;
transition:transform .1s, box-shadow .2s, background .2s;
}
.vote-card__vote svg{ width:16px; height:16px; fill:currentColor; }
.vote-card__vote:hover:not(:disabled){ box-shadow:0 6px 16px rgba(255,197,20,.4); }
.vote-card__vote:active:not(:disabled){ transform:translateY(1px); }
.vote-card__vote.is-voted{ background:#FBEA9E; color:#C94A3D; }
.vote-card__vote:disabled{ opacity:.6; cursor:not-allowed; }
.vote-card__share{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
background:#DFF6FB; color:var(--blue); border:none; border-radius:var(--r-pill);
padding:11px 14px; font-weight:700; font-size:14.5px; transition:background .2s;
}
.vote-card__share svg{ width:15px; height:15px; fill:currentColor; }
.vote-card__share:hover{ background:#CBEEF7; }
.voting__empty{ padding:34px 10px; text-align:center; color:#6B8AA3; font-weight:500; }
/* Người nhận link chia sẻ lớp (?vote=): lời mời + thẻ lớp to, nổi bật.
Đây gần như là một trang riêng — người vào từ Zalo/Facebook chỉ thấy đúng
một lớp và một việc cần làm, nên khối này đóng vai tiêu đề của cả màn. */
.voting__invite{
display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 20px;
text-align:center; margin:0 auto 18px; padding:18px 22px; max-width:760px;
background:linear-gradient(135deg,#FFFCF0 0%,#FFF4CE 100%);
border:2px solid var(--yellow); border-radius:var(--r-md);
box-shadow:0 10px 26px rgba(37,73,230,.08);
scroll-margin-top:16px;
}
.voting__invite[hidden]{ display:none; }
.voting__invite-main{ flex:1 1 320px; min-width:0; }
/* Tiêu đề nói thẳng việc cần làm + mã lớp; dòng dưới mới là lời dẫn. */
.voting__invite-title{
margin:0 0 5px; font-family:var(--font-display); font-weight:700;
font-size:clamp(19px,2.8vw,26px); line-height:1.15; letter-spacing:.01em;
text-transform:uppercase; color:var(--blue);
}
.voting__invite-text{ margin:0; font-size:15px; font-weight:500; line-height:1.5; color:var(--blue-ink); }
.voting__invite-text b{ font-weight:700; color:var(--blue); }
.voting__invite-all{
flex:0 0 auto; min-height:40px; padding:8px 18px; border:2px solid var(--blue);
border-radius:var(--r-pill); background:var(--white); color:var(--blue);
font-family:var(--font-ui); font-weight:700; font-size:14px; cursor:pointer;
}
.voting__invite-all:hover{ background:var(--blue); color:var(--white); }
/* Chỉ còn 1 thẻ khi lọc theo lời mời: thẻ to giữa màn hình, kể cả trên
mobile (lưới 2–3 cột ở dưới sẽ khiến thẻ duy nhất bé tí ở góc trái).
Phải kèm !important và lặp lại class --gallery: kiểu ảnh lớn đặt
grid-template-columns:repeat(2,...) !important, nếu không thẻ duy nhất sẽ
nằm lệch hẳn sang cột trái và bỏ trống nửa màn hình. min(100%,...) để
trên điện thoại cột co lại theo bề ngang màn thay vì tràn ra ngoài. */
.voting__grid.voting__grid--invite{
grid-template-columns:minmax(0,min(100%,380px)) !important; justify-content:center;
}
.voting__grid--invite.voting__grid--gallery{
grid-template-columns:minmax(0,min(100%,560px)) !important;
}
.voting__grid--invite:not(.voting__grid--gallery) .vote-card__code{ font-size:19px; }
.voting__grid--invite:not(.voting__grid--gallery) .vote-card__center{ font-size:14px; white-space:normal; }
.voting__grid--invite .vote-card__vote,
.voting__grid--invite .vote-card__share{ font-size:15px; padding:12px 10px; }
/* Cả trang lúc này chỉ còn đúng một việc: bấm bình chọn. Nút phải là màu
vàng đặc của thương hiệu, không phải nền kính mờ như lưới ảnh thường —
nền mờ đặt trên ảnh lớp thì gần như tàng hình. */
.voting__grid--invite .vote-card__actions{ max-width:none; }
.voting__grid--invite .vote-card__vote:not(.is-voted):not([disabled]){
background:var(--yellow); border-color:var(--yellow); color:var(--red);
backdrop-filter:none; box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.voting__grid--invite .vote-card__vote:not(.is-voted):not([disabled]) svg{ fill:var(--red); }
.voting__grid--invite .vote-card__vote:not(.is-voted):not([disabled]):hover{
background:var(--yellow-light); border-color:var(--yellow-light);
}
.vote-card.is-target{
border-color:var(--yellow);
box-shadow:0 0 0 3px var(--yellow), 0 12px 28px rgba(37,73,230,.18);
}
.voting__locked p.voting__locked-invite{ max-width:560px; font-size:15px; font-weight:500; }
.voting__locked p.voting__locked-invite b{ font-size:1em; }
.voting__locked-invite[hidden]{ display:none; }
.voting__cta{
margin:26px auto 4px; max-width:640px; text-align:center;
background:linear-gradient(135deg,var(--blue) 0%,var(--blue-deep) 100%);
border:3px solid var(--yellow); border-radius:var(--r-pill);
color:var(--white); font-family:var(--font-display); font-weight:700;
letter-spacing:.02em; text-transform:uppercase;
font-size:clamp(14.5px,2.6vw,19px);
padding:16px 24px;
box-shadow:0 14px 30px rgba(20,45,140,.22);
}
#voting-cta[hidden]{ display:none; }
/* Menu chia sẻ — popover nhỏ neo theo nút Chia sẻ trên desktop */
/* z-index 320: phải nổi trên popup "bình chọn thành công" (260) và trên
toast (300), vì menu này mở được từ chính popup đó. */
.share-menu{
position:fixed; z-index:320; min-width:190px;
background:var(--white); border:1px solid #E2EFF8; border-radius:var(--r-md);
box-shadow:0 14px 34px rgba(20,45,140,.18); padding:6px; display:flex; flex-direction:column; gap:2px;
}
.share-menu__item{
display:flex; align-items:center; gap:10px; width:100%;
padding:10px 12px; border-radius:var(--r-sm); border:none; background:transparent;
font-family:var(--font-ui); font-size:14.5px; font-weight:600; color:var(--blue-ink);
text-align:left; text-decoration:none; transition:background .15s;
}
.share-menu__item svg{ width:19px; height:19px; flex:none; }
.share-menu__item:hover{ background:var(--sky); }
/* Lightbox xem ảnh phóng to — bấm vào ảnh thẻ lớp để mở, zoom bằng nút/lăn
chuột/pinch 2 ngón, kéo (drag) để di chuyển khi đã phóng to hơn 100%. */
.lightbox{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; }
.lightbox[hidden]{ display:none; }
.lightbox__backdrop{ position:absolute; inset:0; background:rgba(8,14,34,.88); }
.lightbox__stage{
position:relative; z-index:1; width:100%; height:100%;
display:flex; align-items:center; justify-content:center;
overflow:hidden; touch-action:none;
}
.lightbox__img{
/* trừ hao 6px cho border 3px mỗi bên (content-box: border nằm ngoài) */
max-width:calc(90vw - 6px); max-height:calc(82vh - 6px); width:auto; height:auto;
object-fit:contain; user-select:none; -webkit-user-drag:none;
cursor:grab; transition:transform .15s ease, width .15s ease, height .15s ease;
flex-shrink:0; /* khi phóng to (width/height thật) không bị flex bóp lại */
/* Khung xanh bo góc 10px: đóng khung ảnh dự thi cho tách bạch khỏi nền
tối của popup.
Phải ghi đè box-sizing về content-box: file này có reset toàn cục
`*{box-sizing:border-box}`, mà zoom lại đặt width/height thật (xem
apply() trong main.js) dựa trên baseW = img.clientWidth — giá trị
không gồm border. Để border-box thì mỗi mức zoom ảnh hụt đúng 6px;
content-box đẩy border ra ngoài nên zoom khớp chính xác. */
box-sizing:content-box;
border:3px solid var(--blue);
border-radius:10px;
background:var(--white); /* ảnh có nền trong suốt vẫn nhìn rõ trong khung */
}
.lightbox__img.is-dragging{ cursor:grabbing; transition:none; }
/* Đang tải bản ảnh gốc (nét hơn) — hiện vòng xoay nhỏ ở góc cho biết */
.lightbox.is-loading::after{
content:""; position:absolute; top:24px; left:24px; z-index:2;
width:26px; height:26px; border-radius:50%;
border:3px solid rgba(255,255,255,.3); border-top-color:var(--white);
animation:lightboxSpin .8s linear infinite;
}
@keyframes lightboxSpin{ to{ transform:rotate(360deg); } }
.lightbox__img.is-notransition{ transition:none; }
.lightbox__close{
position:absolute; top:16px; right:16px; z-index:2;
width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.14); border:none; border-radius:50%; color:var(--white);
transition:background .2s;
}
.lightbox__close:hover{ background:rgba(255,255,255,.26); }
.lightbox__close svg{ width:20px; height:20px; }
.lightbox__controls{
position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:2;
display:flex; align-items:center; gap:2px;
background:rgba(255,255,255,.14); border-radius:var(--r-pill); padding:4px;
}
.lightbox__zoom{
min-width:40px; height:40px; padding:0 12px; border:none; border-radius:var(--r-pill);
background:transparent; color:var(--white); font-family:var(--font-ui); font-weight:700; font-size:17px;
transition:background .2s;
}
.lightbox__zoom:hover{ background:rgba(255,255,255,.2); }
.lightbox__zoom--reset{ font-size:13px; min-width:58px; }
.vote-card__photo:has(img){ cursor:zoom-in; }
html.lightbox-open, html.lightbox-open body{ overflow:hidden; }
/* Thông báo nổi ngắn gọn (bình chọn thành công, bỏ bình chọn...) */
.toast{
position:fixed; left:50%; bottom:24px; z-index:300;
transform:translate(-50%,12px); opacity:0; pointer-events:none;
max-width:min(92vw,420px); text-align:center;
background:var(--blue-deep); color:var(--white);
font-family:var(--font-ui); font-size:14.5px; font-weight:600; line-height:1.4;
border-radius:var(--r-md); padding:12px 20px;
box-shadow:0 14px 34px rgba(20,45,140,.32);
transition:opacity .22s ease, transform .22s ease;
}
.toast.is-visible{ opacity:1; transform:translate(-50%,0); }
/* Số "lượt còn lại" nhấp nháy nhẹ khi vừa đổi, để mắt tự chú ý */
@keyframes votePulse{ 0%{ transform:scale(1); } 45%{ transform:scale(1.22); } 100%{ transform:scale(1); } }
.voting__count.is-pulse{ animation:votePulse .38s ease; }
@media (max-width:640px){
.voting{ padding:16px 0 0; }
.voting__head{ margin-bottom:12px; }
/* Trạng thái trên mobile: 2 thẻ (card) gọn thay cho 1 viên pill dài dòng —
dùng LẠI đúng #voting-remaining / [data-vcd] mà JS đang cập nhật, chỉ đổi
cách hiển thị xung quanh (ẩn câu đầy đủ, hiện nhãn ngắn + icon) nên không
cần sửa gì bên main.js. Bo góc vừa phải (không dùng pill) để không bị
"thắt eo" khi khối cao 2 dòng, và bỏ hẳn icon ảnh cho gọn. */
.voting__status{
/* minmax(0,1fr): cột KHÔNG tự nở theo nội dung, để JS đo được đồng hồ
có tràn thẻ hay không (xem fitCountdown trong main.js) */
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
background:none; box-shadow:none; padding:0; border-radius:0;
}
.voting__status-item{
display:flex; align-items:stretch; gap:0; flex-wrap:nowrap;
background:linear-gradient(135deg,var(--blue) 0%,var(--blue-deep) 100%);
border-radius:var(--r-sm); padding:12px;
box-shadow:0 10px 26px rgba(37,73,230,.22);
transition:background .2s, box-shadow .2s;
}
.voting__status-ico{ display:none; }
/* Nhãn trên, số ở đáy thẻ: nhãn dài xuống 2 dòng thì số 2 thẻ vẫn thẳng hàng */
.voting__status-text{
display:flex; flex-direction:column; justify-content:space-between; gap:6px; min-width:0; width:100%;
font-family:var(--font-ui); /* chữ serif chỉ dùng cho bản web, mobile về lại sans-serif */
}
.voting__status-sentence{ display:none; } /* câu đầy đủ chỉ dùng cho web */
/* 2 nhãn "Số lượt bình chọn còn lại" / "Kết thúc sau": CÙNG font + cỡ chữ.
Cho xuống dòng (không cắt "...") vì nhãn tiếng Việt khá dài. */
.voting__stat-label,
.voting__ends-label{
display:block; order:-1;
font-family:var(--font-ui); font-size:clamp(12px,1.9vw,14px); font-weight:600;
color:rgba(255,255,255,.85); line-height:1.3;
}
.voting__status--done .voting__ends-label{ color:rgba(27,58,175,.62); }
/* 2 con số (số lượt / đồng hồ) cũng cùng cỡ */
.voting__count{
display:block; font-size:clamp(20px,3.6vw,26px); line-height:1; white-space:nowrap;
}
.voting__status > i{ display:none; }
.voting__status--done .voting__status-item{
background:linear-gradient(135deg,#EAF1F8 0%,#F3F8FC 100%);
box-shadow:0 10px 26px rgba(37,73,230,.08);
}
.voting__status--done .voting__stat-label{ color:rgba(27,58,175,.62); }
.voting__cd{ display:inline-flex; align-items:baseline; gap:5px; flex-wrap:nowrap; white-space:nowrap; }
.voting__cd-unit{ gap:2px; }
.voting__cd-unit b{ font-size:clamp(20px,3.6vw,26px); line-height:1; min-width:0; }
.voting__cd-unit i{ font-size:11px; opacity:1; color:rgba(255,255,255,.72); }
.voting__status--done .voting__cd-unit i{ color:rgba(27,58,175,.55); }
/* Mobile: luôn có ngày + giờ; phút rồi giây chỉ hiện khi thẻ còn đủ chỗ
trên 1 dòng — JS (fitCountdown) đo thực tế và gắn .is-cut cho đơn vị
không vừa, nên đúng với mọi khổ màn hình và cả bản dịch tiếng Anh. */
.voting__status-item{ min-width:0; }
.voting__cd-unit.is-cut{ display:none; }
/* Tìm kiếm + sắp xếp: mỗi ô 1 hàng riêng cho dễ chạm thay vì chen chung 1 hàng */
.voting__tools{ gap:10px; margin-bottom:16px; }
.voting__search{ flex:1 1 100%; }
.voting__sort{ flex:1 1 100%; min-width:0; }
.voting__search input, #voting-sort{ min-height:44px; }
/* Nút chuyển kiểu: xuống hàng riêng, căn phải cho gọn */
.viewswitch{ margin-left:auto; }
.viewswitch__btn{ width:40px; height:40px; }
/* Ảnh lớn trên mobile: 1 cột để ảnh thật to — đây là kiểu để ngắm ảnh,
2 cột ở màn hẹp thì ảnh chỉ ~170px, không hơn gì kiểu thẻ. */
.voting__grid--gallery{ grid-template-columns:1fr !important; gap:12px !important; }
/* Mobile Gallery 1 cột (~350px) vẫn đủ chỗ cho 2 nút nằm ngang */
.voting__grid--gallery .vote-card__actions{ max-width:none; gap:7px; }
.voting__grid--gallery .vote-card__photo{ aspect-ratio:3/4; }
/* Gallery mobile 1 cột (~350px): chữ vẫn phải đọc được thoải mái */
.voting__grid--gallery .vote-card__body{ padding:44px 14px 13px; }
.voting__grid--gallery .vote-card__code{ font-size:18px; }
.voting__grid--gallery .vote-card__center{ font-size:13.5px; }
/* 2 cột trên điện thoại. Trước đây 3 cột nên thẻ quá hẹp: mã lớp phải thu
còn 12.5px, tên trung tâm 10.5px và bị cắt bằng "…", nút bấm chỉ cao
36px. Hai cột cho mỗi thẻ gần gấp rưỡi bề ngang — ảnh dự thi xem rõ
hơn, chữ đọc được, nút đạt 44px theo khuyến nghị vùng chạm. */
.voting__grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
.vote-card__body{ padding:11px 12px 12px; gap:4px; }
.vote-card__code{ font-size:14.5px; }
.vote-card__center{
font-size:12px; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap;
}
.vote-card__actions{ gap:7px; margin-top:9px; }
.vote-card__vote, .vote-card__share{
padding:11px 8px; font-size:13px; gap:5px; min-height:44px;
}
/* Giữ lại icon: 2 cột đã đủ rộng cho cả icon lẫn chữ */
.vote-card__vote svg, .vote-card__share svg{ width:15px; height:15px; }
.vote-card__badge{ font-size:12px; padding:4px 8px 4px 6px; }
.vote-card__badge svg{ width:12px; height:12px; }
.voting__cta{ margin:20px auto 4px; padding:13px 18px; line-height:1.35; }
}
/* Điện thoại rất nhỏ (~320-359px): vẫn 2 cột nhưng thu chữ và khoảng cách
lại một chút để hai thẻ vừa bề ngang, không tràn. */
@media (max-width:359px){
.voting__grid{ gap:9px; }
.vote-card__body{ padding:9px 10px 10px; }
.vote-card__code{ font-size:13px; }
.vote-card__center{ font-size:11px; }
.vote-card__vote, .vote-card__share{ font-size:12px; padding:10px 6px; }
.vote-card__vote svg, .vote-card__share svg{ display:none; }
}
/* Linh vật nhắc lịch công bố — nổi cố định bên lề phải. Ẩn khi banner đầu
trang còn trong khung nhìn (JS quan sát #hero), chỉ hiện ra sau khi đã
cuộn qua banner, để không bao giờ che mất banner. Kéo thả tự do (JS
chuyển sang định vị left/top tuyệt đối khi bắt đầu kéo) và đóng được hẳn.
Bong bóng thoại dùng nền trắng CSS thật (không phụ thuộc ảnh) để chữ luôn
đọc được dù kéo widget đi đâu trên trang. */
.wonderbot{
position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:55;
display:flex; flex-direction:column; align-items:center; gap:8px;
width:150px;
cursor:grab; touch-action:none; user-select:none;
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .35s ease, visibility .35s ease;
}
.wonderbot.is-visible{ opacity:1; visibility:visible; pointer-events:auto; }
.wonderbot.is-dragging{ cursor:grabbing; transition:none; }
.wonderbot.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.wonderbot__bubble{
position:relative;
background:var(--white); border:2px solid var(--blue); border-radius:var(--r-md);
padding:10px 14px; font-weight:700; font-size:13px; line-height:1.32;
color:var(--blue); text-align:center;
box-shadow:0 8px 18px rgba(37,73,230,.2);
}
.wonderbot__bubble b{ color:var(--red); }
.wonderbot__bubble::after{
content:""; position:absolute; left:50%; bottom:-12px; margin-left:-7px;
border:7px solid transparent; border-top-color:var(--blue);
}
.wonderbot__img{
width:150px; height:auto; flex:none; pointer-events:none;
filter:drop-shadow(0 10px 18px rgba(20,45,140,.2));
}
.wonderbot__close{
position:absolute; top:-8px; right:-8px; z-index:1;
width:24px; height:24px; border-radius:50%;
display:grid; place-items:center;
background:var(--white); color:var(--blue); border:1px solid var(--line);
box-shadow:0 4px 10px rgba(20,45,140,.18);
}
.wonderbot__close svg{ width:13px; height:13px; }
/* "Bật lên" lần đầu xuất hiện: linh vật nảy lên, bong bóng thoại bung ra sau */
@keyframes wbPopImg{ 0%{ transform:translateY(40px) scale(.6); opacity:0; } 60%{ transform:translateY(-8px) scale(1.06); opacity:1; } 100%{ transform:none; } }
@keyframes wbPopBubble{ 0%,35%{ transform:scale(.3); opacity:0; } 75%{ transform:scale(1.08); opacity:1; } 100%{ transform:none; } }
.wonderbot.is-pop .wonderbot__img{ animation:wbPopImg .6s cubic-bezier(.34,1.56,.64,1) both; }
.wonderbot.is-pop .wonderbot__bubble{ animation:wbPopBubble .8s cubic-bezier(.34,1.56,.64,1) both; transform-origin:50% 100%; }
@media (prefers-reduced-motion: reduce){
.wonderbot.is-pop .wonderbot__img, .wonderbot.is-pop .wonderbot__bubble{ animation:none; }
}
.wonderbot__close:hover{ background:var(--sky-2); }
@media (max-width:900px){
.wonderbot{ right:10px; top:auto; bottom:100px; transform:none; width:104px; }
.wonderbot__img{ width:84px; }
.wonderbot__bubble{ font-size:11.5px; padding:8px 11px; }
}
/* ==========================================================================
SECTION 4 — GIỚI THIỆU (hình 4)
========================================================================== */
.intro-section{ padding:30px 0 40px; }
.panel{
position:relative;
border:2px solid #CFE7F7; border-radius:var(--r-lg);
padding:64px clamp(18px,4vw,60px) clamp(28px,4vw,48px);
margin-top:34px;
}
.panel__title{
/* dùng thuộc tính `translate` riêng (không phải `transform`) để việc căn
giữa không bị hiệu ứng reveal ghi đè */
position:absolute; top:0; left:50%; translate:-50% -50%;
width:max-content; max-width:94%;
background:var(--blue); color:var(--white);
font-family:var(--font-display); font-weight:700;
font-size:clamp(20px,3.2vw,42px); line-height:1.15;
text-transform:uppercase; letter-spacing:.01em; text-align:center;
padding:.42em 1.1em .34em; border-radius:var(--r-pill);
box-shadow:0 8px 20px rgba(37,73,230,.22);
}
.panel__lead{
font-family:var(--font-body); color:var(--blue-text);
font-size:clamp(15px,1.6vw,23px); line-height:1.65;
text-align:center; max-width:1000px; margin:8px auto 0;
}
.stats{
display:grid; grid-template-columns:repeat(4,1fr);
margin:clamp(24px,4vw,46px) 0 0;
}
.stat{
position:relative; text-align:center;
padding:0 clamp(8px,1.6vw,22px);
display:flex; flex-direction:column; align-items:center;
}
.stat + .stat::before{
content:""; position:absolute; left:0; top:8%; bottom:8%;
border-left:1px solid #B8D6EC;
}
.stat img{ height:clamp(84px,10vw,140px); width:auto; object-fit:contain; }
.stat__num{
font-family:var(--font-display); font-weight:700; color:var(--blue);
font-size:clamp(24px,3.4vw,46px); line-height:1.05; margin-top:14px;
}
.stat__num sup{ font-size:.55em; top:-.55em; }
.stat__num--sm{ font-size:clamp(16px,2.05vw,28px); }
.stat__label{
font-family:var(--font-display); font-weight:700; color:var(--blue);
font-size:clamp(16px,2.05vw,28px); text-transform:uppercase; line-height:1.15;
}
.stat__note{
font-family:var(--font-body); font-style:normal; color:var(--blue-text);
font-size:clamp(12px,1.25vw,18px); line-height:1.45; margin-top:10px;
}
.formula{
background:var(--yellow-light); border-radius:var(--r-md);
margin:clamp(26px,4vw,44px) auto 0; max-width:900px;
padding:clamp(18px,2.4vw,28px) clamp(16px,3vw,36px);
text-align:center; color:var(--blue-text); font-family:var(--font-body);
}
.formula b{ display:block; font-size:clamp(15px,1.7vw,24px); margin-bottom:8px; }
.formula p{ font-size:clamp(14px,1.55vw,22px); line-height:1.6; }
/* ==========================================================================
SECTION 5 — HÀNH TRÌNH (hình 5)
========================================================================== */
.journey-section{ padding:36px 0 20px; }
.round{ padding:clamp(20px,3vw,34px) 0; }
.round--1{ background:linear-gradient(180deg,rgba(199,232,250,0) 0%, #CFE9F9 18%, #CFE9F9 82%, rgba(199,232,250,0) 100%); margin-top:18px; }
.round--2{ background:linear-gradient(180deg,rgba(199,232,250,0) 0%, #CFE9F9 18%, #CFE9F9 82%, rgba(199,232,250,0) 100%); margin-top:26px; }
.round__inner{
display:grid; grid-template-columns:1fr minmax(240px,32%);
gap:clamp(16px,3vw,40px); align-items:center;
}
.round--2 .round__inner{ grid-template-columns:minmax(240px,32%) 1fr; }
.round__head{ text-align:center; }
.round__badge{
display:inline-block; text-align:center;
background:var(--blue); color:var(--white);
border-radius:clamp(22px,3vw,40px);
padding:clamp(10px,1.4vw,18px) clamp(24px,4vw,64px) clamp(12px,1.6vw,20px);
box-shadow:0 10px 24px rgba(37,73,230,.20);
}
.round__badge h3{
font-family:var(--font-display); font-weight:700;
font-size:clamp(22px,3.4vw,44px); line-height:1.1;
text-transform:uppercase; letter-spacing:.01em;
}
.round__badge p{
font-family:var(--font-body); font-weight:600;
font-size:clamp(13px,1.45vw,21px); line-height:1.3; margin-top:6px;
}
.round__note{
font-family:var(--font-body); font-weight:700; color:var(--blue-text);
font-size:clamp(14px,1.55vw,22px); text-align:center;
margin:clamp(14px,2vw,22px) 0 0;
}
.round__cards{
display:grid; grid-template-columns:repeat(2,1fr);
gap:clamp(12px,2vw,26px); margin-top:clamp(14px,2vw,24px);
}
.card-cream{
background:var(--cream); border-radius:var(--r-md);
padding:clamp(14px,2vw,24px) clamp(14px,2vw,26px);
font-family:var(--font-body); color:var(--blue-text);
font-size:clamp(13px,1.45vw,21px); line-height:1.6; text-align:center;
box-shadow:0 4px 14px rgba(37,73,230,.06);
}
.card-cream b{ display:block; font-weight:700; margin-bottom:4px; }
.card-cream span{ display:block; }
.round__art img{ width:100%; }
/* ==========================================================================
SECTION 6 — FAQ (hình 6)
========================================================================== */
.faq-section{ padding:clamp(30px,5vw,60px) 0 clamp(30px,5vw,56px); }
.pill-title{
display:block; width:max-content; max-width:94%; margin:0 auto;
background:var(--blue); color:var(--white);
font-family:var(--font-display); font-weight:700;
font-size:clamp(22px,3.6vw,46px); line-height:1.15;
text-transform:uppercase; letter-spacing:.01em; text-align:center;
padding:.4em 1.1em .3em; border-radius:var(--r-pill);
box-shadow:0 8px 20px rgba(37,73,230,.22);
}
.faq{
display:grid; grid-template-columns:minmax(220px,30%) 1fr;
gap:clamp(16px,3vw,44px); align-items:center;
margin-top:clamp(22px,3vw,40px);
}
.faq__art img{ width:100%; }
.faq__list{ display:flex; flex-direction:column; gap:clamp(14px,2vw,26px); }
.faq__item{
background:var(--sky); border-radius:var(--r-md);
padding-bottom:2px;
}
.faq__item summary{
display:flex; align-items:center; gap:14px;
list-style:none; cursor:pointer;
margin:0 0 0 -6px; padding:0;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__no{
flex:none;
width:clamp(34px,3.6vw,52px); height:clamp(34px,3.6vw,52px);
display:grid; place-items:center;
background:var(--blue); color:var(--white); border-radius:50%;
font-family:var(--font-display); font-weight:700;
font-size:clamp(17px,2vw,28px);
box-shadow:0 4px 10px rgba(37,73,230,.25);
transform:translateY(-40%);
}
.faq__q{
flex:1 1 auto;
background:linear-gradient(90deg,var(--yellow) 0%, var(--yellow-light) 100%);
color:var(--blue-text); font-family:var(--font-body); font-weight:700;
font-size:clamp(14px,1.55vw,22px); line-height:1.35;
padding:.55em 1.2em; border-radius:var(--r-pill);
transform:translateY(-40%);
}
/* thanh câu hỏi được nâng lên bằng transform nên dòng chảy đã chừa sẵn
khoảng trống bên dưới — không kéo phần trả lời lên nữa, tránh chữ bị
khuất sau thanh câu hỏi */
.faq__a{
padding:2px clamp(16px,2.2vw,30px) clamp(16px,2.2vw,26px);
}
.faq__a p{
font-family:var(--font-body); color:var(--blue-text);
font-size:clamp(13.5px,1.5vw,21px); line-height:1.65;
}
.faq__a p + p{ margin-top:10px; }
/* ==========================================================================
SECTION 7 — CTA (hình 7)
========================================================================== */
.cta-section{ margin-top:clamp(10px,2vw,24px); }
.cta{ position:relative; container-type:inline-size; max-width:2000px; margin-inline:auto; }
.cta__img{ width:100%; }
.cta__btn{
position:absolute; left:30%; top:66.4%; width:41%; height:20.6%;
display:flex; align-items:center; justify-content:center;
border-radius:var(--r-pill);
background:#2941D5;
color:var(--yellow);
font-family:var(--font-display); font-weight:700;
font-size:3cqw; line-height:1; letter-spacing:.02em; text-transform:uppercase;
padding-top:.35cqw;
box-shadow:0 .5cqw 1.2cqw rgba(20,40,130,.28);
transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cta__btn:hover{ background:#3350E8; transform:translateY(-2px); box-shadow:0 .8cqw 1.6cqw rgba(20,40,130,.34); }
.cta__btn:active{ transform:translateY(0); }
.cta__mobile{
display:none; text-align:center; padding:34px 20px 40px;
background:#DFF0FB url("/landings/leaderboard-championship/layout/cta-bg-mobile.jpg") center/cover no-repeat;
}
.cta__mobile p{
font-family:var(--font-display); font-weight:700; color:var(--white);
font-size:clamp(22px,7vw,34px); line-height:1.2; text-transform:uppercase;
margin-bottom:20px;
text-shadow:
2px 0 0 var(--blue), -2px 0 0 var(--blue), 0 2px 0 var(--blue), 0 -2px 0 var(--blue),
2px 2px 0 var(--blue), -2px 2px 0 var(--blue), 2px -2px 0 var(--blue), -2px -2px 0 var(--blue),
4px 5px 0 var(--yellow);
}
.cta__btn-stack{
display:inline-flex; align-items:center; justify-content:center;
background:#2941D5; color:var(--yellow);
font-family:var(--font-display); font-weight:700; font-size:clamp(16px,4.6vw,22px);
text-transform:uppercase; letter-spacing:.02em;
padding:16px 30px 13px; border-radius:var(--r-pill);
box-shadow:0 8px 18px rgba(20,40,130,.28);
}
/* ==========================================================================
STORYTELLING — kể chuyện theo hành trình cuộn trang
Chỉ kích hoạt khi JS chạy (.js-reveal trên ), nên nếu JS lỗi thì
toàn bộ nội dung vẫn hiển thị bình thường.
========================================================================== */
:root{ interpolate-size:allow-keywords; }
.js-reveal [data-reveal],
.js-reveal [data-reveal-stagger] > *{
opacity:0;
transform:translateY(34px);
will-change:opacity, transform;
}
.js-reveal [data-reveal="left"]{ transform:translateX(-54px); }
.js-reveal [data-reveal="right"]{ transform:translateX(54px); }
.js-reveal [data-reveal="zoom"]{ transform:scale(.94); }
.js-reveal [data-reveal="pop"]{ transform:translateY(18px) scale(.9); }
.js-reveal [data-reveal].is-in,
.js-reveal [data-reveal-stagger] > .is-in{
opacity:1; transform:none;
transition:opacity .75s cubic-bezier(.22,.61,.36,1),
transform .75s cubic-bezier(.22,.61,.36,1);
transition-delay:var(--d,0s);
}
.js-reveal [data-reveal="pop"].is-in{
transition:opacity .5s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
transition-delay:var(--d,0s);
}
/* Linh vật bồng bềnh + huy hiệu podium nảy nhẹ */
@keyframes float-soft{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
.round__art img,
.faq__art img{ animation:float-soft 6s ease-in-out infinite; }
.round--2 .round__art img{ animation-duration:7s; animation-delay:-2s; }
.faq__art img{ animation-duration:8s; }
/* Ruy-băng "rơi xuống" rồi lắc nhẹ một nhịp */
@keyframes ribbon-settle{
0%{ transform:rotate(-1.6deg) } 40%{ transform:rotate(1.1deg) }
70%{ transform:rotate(-.5deg) } 100%{ transform:rotate(0) }
}
.ribbon.is-in .ribbon__bg{ animation:ribbon-settle 1.1s .25s ease-out both; }
/* Cúp trên bục nảy lên khi podium xuất hiện */
@keyframes podium-rise{
0%{ transform:translateY(46px); opacity:0 }
60%{ transform:translateY(-6px); opacity:1 }
100%{ transform:translateY(0); opacity:1 }
}
.podium.is-in .podium__img{ animation:podium-rise .9s cubic-bezier(.22,.61,.36,1) both; }
.js-reveal .podium__slot{ opacity:0; }
.js-reveal .podium__slot.is-in{
opacity:1;
animation:podium-rise .7s cubic-bezier(.34,1.4,.64,1) both;
animation-delay:var(--d,0s);
}
/* Bảng xếp hạng: từng dòng chạy vào, chạy lại mỗi lần đổi bộ lọc */
@keyframes row-in{
from{ opacity:0; transform:translateY(14px) }
to{ opacity:1; transform:none }
}
.js-reveal .rank-table tbody tr{
animation:row-in .45s ease-out both;
animation-delay:calc(var(--i,0) * .045s);
}
/* Giây đếm ngược nhịp nhẹ mỗi lần đổi số */
@keyframes tick{ 0%{ transform:scale(1) } 45%{ transform:scale(1.12) } 100%{ transform:scale(1) } }
.countdown__unit b.is-tick{ display:inline-block; animation:tick .5s ease-out; }
/* Confetti bay lơ lửng */
@keyframes drift{
0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)) }
50%{ transform:translateY(-16px) rotate(calc(var(--rot,0deg) + 14deg)) }
}
.confetti{ animation:drift 7s ease-in-out infinite; }
.confetti--b{ animation-duration:9s; animation-delay:-1s; }
.confetti--c{ animation-duration:8s; animation-delay:-3s; }
.confetti--d{ animation-duration:10s; animation-delay:-2s; }
.confetti--e{ animation-duration:9s; animation-delay:-4s; }
.confetti--f{ animation-duration:7.5s;animation-delay:-1.5s; }
.confetti--g{ animation-duration:11s; animation-delay:-5s; }
/* FAQ: mở/đóng mượt + mũi chỉ hướng */
.faq__q{ position:relative; padding-right:2.6em; }
.faq__q::after{
content:""; position:absolute; right:1.1em; top:50%;
width:.5em; height:.5em; margin-top:-.32em;
border-right:.16em solid currentColor; border-bottom:.16em solid currentColor;
transform:rotate(45deg); transform-origin:center;
transition:transform .3s ease;
}
.faq__item[open] .faq__q::after{ transform:rotate(-135deg); margin-top:-.12em; }
.faq__item::details-content{
block-size:0; overflow:hidden;
transition:block-size .4s cubic-bezier(.22,.61,.36,1), content-visibility .4s allow-discrete;
}
.faq__item[open]::details-content{ block-size:auto; }
/* Nút CTA "thở" nhẹ để dẫn mắt xuống hành động cuối */
@keyframes cta-breathe{
0%,100%{ box-shadow:0 .5cqw 1.2cqw rgba(20,40,130,.28) }
50%{ box-shadow:0 .5cqw 2.4cqw rgba(20,40,130,.45) }
}
.cta.is-in .cta__btn{ animation:cta-breathe 2.6s ease-in-out 1s infinite; }
/* ==========================================================================
POPUP MỜI BẬT ÂM THANH
Hiện ngay khi vào trang. Cú click vào nút cũng chính là thao tác hợp lệ
để trình duyệt cho phép phát tiếng.
========================================================================== */
.sound-ask{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; }
.sound-ask[hidden]{ display:none; }
body.has-sound-ask{ overflow:hidden; }
.sound-ask__backdrop{
position:absolute; inset:0;
background:rgba(16,36,96,.55); backdrop-filter:blur(3px);
animation:sa-fade .25s ease-out both;
}
.sound-ask__box{
position:relative; z-index:1;
width:min(420px,90vw); text-align:center;
background:linear-gradient(180deg,#FFFFFF 0%, #F1F8FF 100%);
border-radius:var(--r-lg); padding:30px 28px 26px;
box-shadow:0 24px 60px rgba(16,36,96,.34);
animation:sa-pop .4s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes sa-fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes sa-pop{
from{ opacity:0; transform:translateY(16px) scale(.92) }
to{ opacity:1; transform:none }
}
.sound-ask__ico{
width:74px; height:74px; margin:0 auto 16px;
display:grid; place-items:center; border-radius:50%;
background:var(--blue); color:var(--white);
box-shadow:0 10px 24px rgba(37,73,230,.34);
}
.sound-ask__ico svg{ width:38px; height:38px; fill:currentColor; }
.sound-ask__title{
font-family:var(--font-display); font-weight:700;
font-size:clamp(20px,3.4vw,27px); line-height:1.2;
color:var(--blue); text-transform:uppercase;
}
.sound-ask__desc{
margin-top:10px; font-family:var(--font-body); font-weight:500;
font-size:clamp(14px,2.2vw,16px); color:var(--blue-text); line-height:1.5;
}
.sound-ask__actions{
margin-top:22px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.sound-ask__btn{
flex:1 1 150px; border:none; border-radius:var(--r-pill);
font-family:var(--font-display); font-weight:700; font-size:17px;
text-transform:uppercase; letter-spacing:.02em; padding:14px 22px 12px;
transition:transform .14s ease, box-shadow .16s ease, background .16s ease;
}
.sound-ask__btn--yes{
background:var(--blue); color:var(--white);
box-shadow:0 8px 20px rgba(37,73,230,.3);
}
.sound-ask__btn--yes:hover{ background:#3358F0; transform:translateY(-2px); }
.sound-ask__btn--no{
background:var(--white); color:var(--blue); border:2px solid #CFE6F5;
}
.sound-ask__btn--no:hover{ border-color:var(--blue); transform:translateY(-2px); }
/* ==========================================================================
POPUP "BÌNH CHỌN THÀNH CÔNG" — hiện ngay sau khi máy chủ nhận phiếu
==========================================================================
Dùng lại hiệu ứng mở của hộp mời bật âm thanh (sa-fade / sa-pop) cho
nhất quán. z-index 260: trên popup ảnh (200) vì có thể bình chọn ngay
trong popup ảnh, nhưng dưới pháo giấy (280) để hạt bay phía trước. */
.vote-done{ position:fixed; inset:0; z-index:260; display:grid; place-items:center; }
.vote-done[hidden]{ display:none; }
.vote-done__backdrop{
position:absolute; inset:0;
background:rgba(16,36,96,.55); backdrop-filter:blur(3px);
animation:sa-fade .25s ease-out both;
}
.vote-done__box{
position:relative; z-index:1;
/* Rộng hơn hộp âm thanh một chút: tiêu đề dài, để 420px thì trái tim 💙
bị rớt xuống dòng riêng, trông như lỗi. */
width:min(440px,92vw); text-align:center;
background:linear-gradient(180deg,#FFFFFF 0%, #F1F8FF 100%);
border-radius:var(--r-lg); padding:30px 28px 26px;
box-shadow:0 24px 60px rgba(16,36,96,.34);
animation:sa-pop .4s cubic-bezier(.34,1.4,.64,1) both;
}
.vote-done__close{
position:absolute; top:10px; right:10px; width:34px; height:34px;
display:grid; place-items:center; padding:0; cursor:pointer;
background:transparent; border:none; border-radius:50%; color:#7E9AC0;
}
.vote-done__close svg{ width:18px; height:18px; fill:none; }
.vote-done__close:hover{ background:#E8F3FC; color:var(--blue); }
.vote-done__ico{
width:74px; height:74px; margin:0 auto 16px;
display:grid; place-items:center; border-radius:50%;
background:var(--blue); color:var(--white);
box-shadow:0 10px 24px rgba(37,73,230,.34);
}
.vote-done__ico svg{ width:38px; height:38px; fill:currentColor; }
.vote-done__title{
font-family:var(--font-display); font-weight:700;
font-size:clamp(19px,3vw,23px); line-height:1.2;
color:var(--blue); text-transform:uppercase;
text-wrap:balance; /* trình duyệt cũ bỏ qua, không ảnh hưởng gì */
}
/* Dải thứ hạng: phần thưởng thật sự của cú bấm — tách nền để mắt dừng lại
ở đây trước khi đọc lời mời chia sẻ bên dưới. */
.vote-done__rank{
margin:13px auto 0; padding:10px 14px; max-width:340px;
background:#EAF2FF; border:1px solid #CFE0FF; border-radius:var(--r-md);
font-family:var(--font-body); font-weight:500; font-size:14.5px;
line-height:1.45; color:var(--blue-ink);
}
.vote-done__rank[hidden]{ display:none; }
.vote-done__rank b{ font-weight:700; color:var(--blue); }
.vote-done__desc{
margin-top:12px; font-family:var(--font-body); font-weight:500;
font-size:clamp(14px,2.2vw,16px); color:var(--blue-text); line-height:1.5;
}
.vote-done__actions{
margin-top:22px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.vote-done__btn{
flex:1 1 140px; border:none; border-radius:var(--r-pill); cursor:pointer;
font-family:var(--font-display); font-weight:700; font-size:17px;
text-transform:uppercase; letter-spacing:.02em; padding:14px 22px 12px;
transition:transform .14s ease, box-shadow .16s ease, background .16s ease;
}
.vote-done__btn--share{
background:var(--yellow); color:var(--red);
box-shadow:0 8px 20px rgba(255,214,46,.5);
}
.vote-done__btn--share:hover{ background:var(--yellow-light); transform:translateY(-2px); }
.vote-done__btn--later{
background:var(--white); color:var(--blue); border:2px solid #CFE6F5;
}
.vote-done__btn--later:hover{ border-color:var(--blue); transform:translateY(-2px); }
.sound-ask__btn:active{ transform:translateY(0); }
/* ==========================================================================
NHẠC NỀN — nút loa nổi
========================================================================== */
.bgm__player{
position:fixed; width:1px; height:1px; left:-9999px; top:0;
overflow:hidden; opacity:0; pointer-events:none;
}
.bgm__btn{
position:fixed; right:18px; bottom:18px; z-index:60;
width:68px; height:68px; border-radius:50%;
display:grid; place-items:center;
background:var(--blue); color:var(--white); border:none;
box-shadow:0 8px 22px rgba(20,45,140,.32);
transition:transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.bgm__btn:hover{ transform:translateY(-2px) scale(1.04); background:#3358F0; }
.bgm__btn:active{ transform:translateY(0) scale(.98); }
.bgm__btn:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; }
.bgm__ico{ width:34px; height:34px; fill:currentColor; grid-area:1/1; }
.bgm__ico--on{ display:none; }
.bgm.is-on .bgm__ico--on{ display:block; }
.bgm.is-on .bgm__ico--off{ display:none; }
/* 3 vạch sóng nhạc chạy khi đang phát */
.bgm__wave{
position:absolute; inset:auto 0 -14px 0;
display:none; justify-content:center; align-items:flex-end; gap:3px; height:10px;
}
.bgm.is-on .bgm__wave{ display:flex; }
.bgm__wave i{
width:4px; height:5px; border-radius:2px; background:var(--yellow);
animation:bgm-wave .9s ease-in-out infinite;
}
.bgm__wave i:nth-child(2){ animation-delay:.15s; }
.bgm__wave i:nth-child(3){ animation-delay:.3s; }
@keyframes bgm-wave{ 0%,100%{ height:5px } 50%{ height:13px } }
/* ==========================================================================
Canvas pháo hoa (phủ lên section Bảng xếp hạng, không chặn thao tác)
========================================================================== */
.confetti-canvas{
position:absolute; inset:0; z-index:5;
pointer-events:none;
}
/* Lớp phủ pháo giấy mừng bình chọn thành công: phủ kín màn hình, nằm trên
popup ảnh (200) và trên cả popup chúc mừng (260) để hạt bay phía trước
chứ không bị nền mờ của popup nuốt mất. pointer-events:none nên không
chặn bất kỳ cú bấm nào — kể cả nút Chia sẻ ngay dưới nó. */
.confetti-screen{
position:fixed; inset:0; z-index:280;
pointer-events:none;
}
/* ==========================================================================
TRA CỨU THỨ HẠNG LỚP
========================================================================== */
.lookup{
margin-top:22px; padding:clamp(20px,3vw,30px) clamp(18px,3vw,34px) clamp(22px,3vw,30px);
background:linear-gradient(180deg,#FFFFFF 0%, #F2F9FF 100%);
border:1px solid var(--line); border-radius:var(--r-lg);
box-shadow:0 10px 26px rgba(20,45,140,.08);
text-align:center;
}
.lookup__title{
font-family:var(--font-display); font-weight:700;
font-size:clamp(20px,2.6vw,30px); line-height:1.15;
color:var(--blue); text-transform:uppercase; letter-spacing:.01em;
}
.lookup__lead{
margin-top:8px; font-family:var(--font-body); font-weight:600;
font-size:clamp(14px,1.5vw,17px); color:var(--blue-text);
}
.lookup__hint{
margin-top:4px; font-size:clamp(12.5px,1.3vw,14.5px);
color:#6B8AA3; font-weight:500;
}
.lookup__form{
display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
margin-top:18px;
}
.lookup__input{
flex:1 1 300px; max-width:420px;
padding:13px 18px; border-radius:var(--r-pill);
border:2px solid #CFE6F5; background:var(--white);
font-family:var(--font-ui); font-size:16px; font-weight:600; color:var(--blue-ink);
transition:border-color .18s ease, box-shadow .18s ease;
}
.lookup__input::placeholder{ color:#9FB8CC; font-weight:500; }
.lookup__input:focus{
outline:none; border-color:var(--blue);
box-shadow:0 0 0 4px rgba(37,73,230,.14);
}
.lookup__btn{
background:var(--blue); color:var(--white); border:none;
font-family:var(--font-display); font-weight:700; font-size:17px;
text-transform:uppercase; letter-spacing:.02em;
padding:13px 30px 11px; border-radius:var(--r-pill);
box-shadow:0 6px 16px rgba(37,73,230,.26);
transition:background .16s ease, transform .12s ease, box-shadow .16s ease;
}
.lookup__btn:hover{ background:#3358F0; transform:translateY(-2px); box-shadow:0 10px 22px rgba(37,73,230,.32); }
.lookup__btn:active{ transform:translateY(0); }
.lookup__result{ margin-top:16px; }
.lookup__result.is-empty p{
margin:0; padding:12px 16px; display:inline-block;
background:#FFF1F0; border:1px solid #F3C6C2; border-radius:var(--r-md);
color:#B3261E; font-weight:600; font-size:15px;
}
.lookup__near{ margin-top:10px !important; background:none !important; border:none !important; color:#5C7C95 !important; }
.lookup__sug{
background:var(--white); border:1px solid #CFE6F5; border-radius:var(--r-pill);
padding:6px 14px; margin:3px; font-size:13.5px; font-weight:600; color:var(--blue);
}
.lookup__sug:hover{ background:#EDF4FF; border-color:var(--blue); }
.lookup__card{
display:inline-flex; align-items:baseline; gap:10px; flex-wrap:wrap;
justify-content:center;
background:var(--blue); color:var(--white);
padding:12px 26px; border-radius:var(--r-pill);
box-shadow:0 8px 20px rgba(37,73,230,.28);
}
.lookup__card-label{ font-size:13px; font-weight:600; opacity:.85; }
.lookup__rank{ font-family:var(--font-display); font-weight:700; font-size:32px; line-height:1; }
.lookup__card-of{ font-size:13px; font-weight:600; opacity:.85; }
.lookup__meta{
margin:16px auto 0; max-width:640px;
display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px;
text-align:left;
}
.lookup__meta > div{
background:var(--white); border:1px solid var(--line);
border-radius:var(--r-sm); padding:10px 14px;
}
.lookup__meta dt{ font-size:12.5px; font-weight:600; color:#6B8AA3; }
.lookup__meta dd{
margin:2px 0 0; font-family:var(--font-body); font-weight:700;
font-size:15.5px; color:var(--blue-ink);
}
.lookup__meta dd.is-score{ color:var(--red); font-size:18px; }
/* mốc cập nhật dữ liệu — cho phụ huynh biết số liệu tính đến lúc nào */
.lookup__synced{
margin-top:12px; font-size:12.5px; font-weight:500; color:#6B8AA3;
}
.lookup__result.is-loading p{
margin:0; font-size:15px; font-weight:600; color:var(--blue-text);
}
/* Gạch đầu dòng trong FAQ */
.faq__bullets{ margin:10px 0 0; padding-left:0; list-style:none; }
.faq__bullets li{
position:relative; padding-left:22px; margin-top:6px;
font-family:var(--font-body); color:var(--blue-text);
}
.faq__bullets li::before{
content:""; position:absolute; left:6px; top:.62em;
width:7px; height:7px; border-radius:50%; background:var(--yellow);
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width:1024px){
.stats{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
.stat:nth-child(3)::before{ display:none; }
.stat:nth-child(3),.stat:nth-child(4){ padding-top:30px; }
.stat:nth-child(3)::after,.stat:nth-child(4)::after{
content:""; position:absolute; top:0; left:6%; right:6%; border-top:1px solid #B8D6EC;
}
}
@media (max-width:900px){
.countdown--flat{ padding:7px 16px; }
/* Podium: bỏ overlay, chuyển sang 3 thẻ */
.podium__img{ margin-bottom:16px; order:0; }
.podium__slot{
position:static; width:auto; height:auto;
background:var(--white); border-radius:var(--r-md);
padding:12px 14px; margin-bottom:10px;
box-shadow:0 6px 16px rgba(37,73,230,.10);
border-left:10px solid var(--blue);
flex-direction:row; justify-content:space-between; align-items:center;
gap:12px;
}
.podium__slot--1{ border-left-color:var(--yellow); order:1; }
.podium__slot--2{ order:2; }
.podium__slot--3{ border-left-color:#F2801A; order:3; }
.podium__slot .podium__name{
height:auto; width:auto; font-size:clamp(14px,3.6vw,18px); color:var(--blue) !important;
justify-content:flex-start; text-align:left; padding:0;
}
.podium__slot .podium__score{
position:static; transform:none;
font-size:clamp(26px,7vw,36px); margin-top:0; text-shadow:none;
}
.podium{ display:flex; flex-direction:column; }
.round__inner,.round--2 .round__inner{ grid-template-columns:1fr; }
.round--2 .round__art{ order:2; }
.round__art{ max-width:320px; margin-inline:auto; }
.faq{ grid-template-columns:1fr; }
.faq__art{ max-width:280px; margin-inline:auto; }
/* CTA: thay banner ngang bằng khối dọc dễ đọc, dễ bấm */
.cta{ display:none; }
.cta__mobile{ display:block; }
}
@media (max-width:640px){
/* Banner mobile chỉ cao ~140-165px, đè lên là che mất phần hình.
Đặt hẳn đồng hồ xuống dưới banner, chừa khoảng thở. */
.hero__cd{ margin-top:14px; padding-bottom:4px; }
.ribbon{ width:100%; }
.board{ padding:0 10px 12px; border-radius:var(--r-md); }
.board__tabs{ margin:0 -10px; }
.board__tab{ flex-direction:column; gap:6px; padding:14px 8px; font-size:15px; }
.board__subtabs{ padding:12px 10px 0; gap:8px; }
.board__subtab{ flex-direction:column; gap:4px; padding:10px 6px; font-size:12.5px; }
/* 2 ô lọc nằm ngang hàng, nút Xóa bộ lọc xuống dòng riêng */
.board__filters{ margin:0 -10px; padding:14px 12px; gap:10px; }
.field{ flex:1 1 0; min-width:0; }
.field label{ font-size:12.5px; margin-bottom:5px; }
.select select{ padding:10px 30px 10px 10px; font-size:13.5px; }
.select::after{ right:11px; border-width:5px; margin-top:-2px; }
.btn-reset{ flex:1 1 100%; width:100%; justify-content:center; padding:10px 16px; font-size:14px; }
.board__scroller{ margin:0 -10px; padding:0 10px; }
/* Tab lớp có 7 cột -> vẫn cần cuộn ngang.
Tab trung tâm chỉ 3 cột -> vừa khít màn hình, không cuộn. */
.rank-table[data-tab="class"]{ min-width:700px; }
.rank-table[data-tab="center"]{ min-width:0; width:100%; }
.rank-table[data-tab="center"] th,
.rank-table[data-tab="center"] td{ padding-inline:6px; }
.rank-table[data-tab="center"] td.is-name{ font-size:13.5px; line-height:1.3; }
.rank-table[data-tab="center"] .rank-prov{ display:block; font-size:11.5px; }
/* Tab lớp: gộp "Lớp" và "Trung tâm" thành một ô — tên lớp ở trên,
trung tâm ở dưới. Nhờ đó bảng còn 5 cột thay vì 7. */
.rank-table[data-tab="class"]{ min-width:0; width:100%; table-layout:fixed; }
.rank-table[data-tab="class"] th,
.rank-table[data-tab="class"] td{ padding-inline:4px; font-size:12px; }
.rank-table[data-tab="class"] .is-name{ text-align:left; }
/* chia cột: hạng hẹp, ô lớp rộng nhất, 3 cột % bằng nhau */
.rank-table[data-tab="class"] th:nth-child(1){ width:12%; }
.rank-table[data-tab="class"] th:nth-child(2){ width:34%; }
.rank-table[data-tab="class"] th:nth-child(3){ width:14%; }
.rank-table[data-tab="class"] th:nth-child(n+4){ width:13.3%; }
.rank-table[data-tab="class"] th{
font-size:10px; line-height:1.15; padding-block:7px;
white-space:normal; word-break:normal; hyphens:none;
}
.rank-cell-class b{
display:block; font-family:var(--font-body); font-weight:700;
font-size:12.5px; color:var(--blue-ink); line-height:1.25;
white-space:nowrap; /* mã lớp luôn nằm gọn 1 dòng */
}
.rank-cell-class span{
display:block; margin-top:2px; font-size:11.5px; font-weight:500;
color:#5C7C95; line-height:1.25;
}
/* phân trang: dồn về 1 hàng, căn giữa */
.board__foot{ flex-direction:column; align-items:center; gap:12px; }
.board__count{ order:2; }
.pager{ order:1; justify-content:center; gap:4px; }
.pager__num,
.pager__nav{ min-width:34px; height:34px; padding:0 6px; font-size:14px; }
.pager__nav{ font-size:19px; }
.panel{ padding:52px 16px 26px; }
.round__cards{ grid-template-columns:1fr; }
/* Giữ lưới 2 cột × 2 hàng để section không bị kéo dài */
.stats{ grid-template-columns:repeat(2,1fr); row-gap:26px; column-gap:6px; }
.stat{ padding:0 6px; }
.stat img{ height:clamp(64px,17vw,92px); }
.stat__num{ font-size:clamp(20px,6.4vw,30px); margin-top:10px; }
.stat__num--sm{ font-size:clamp(14px,4.2vw,19px); }
.stat__label{ font-size:clamp(13px,3.8vw,18px); }
.stat__note{ font-size:clamp(11px,3vw,14px); margin-top:6px; }
/* vạch dọc chỉ giữa 2 cột, vạch ngang chỉ giữa 2 hàng */
.stat + .stat::before{ display:none; }
.stat:nth-child(2)::before,
.stat:nth-child(4)::before{
content:""; display:block; position:absolute; left:0; top:6%; bottom:6%;
border-left:1px solid #B8D6EC;
}
.stat:nth-child(3),.stat:nth-child(4){ padding-top:26px; }
.stat:nth-child(3)::after,.stat:nth-child(4)::after{
content:""; position:absolute; top:0; left:8%; right:8%; border-top:1px solid #B8D6EC;
}
.bgm__btn{ width:44px; height:44px; right:12px; bottom:12px; }
/* Thẻ kết quả tra cứu: xếp dọc cho gọn, số hạng nổi bật ở giữa */
.lookup__card{
flex-direction:column; align-items:center; gap:2px;
padding:14px 30px; width:100%; max-width:280px;
}
.lookup__rank{ font-size:38px; }
.lookup__meta{ grid-template-columns:repeat(2,1fr); gap:8px; }
.lookup__meta > div{ padding:8px 10px; }
.lookup__meta dd{ font-size:14px; }
.lookup__form{ gap:8px; }
.lookup__input{ flex:1 1 100%; }
.lookup__btn{ width:100%; }
.bgm__ico{ width:22px; height:22px; }
.faq__item summary{ align-items:flex-start; }
.faq__no,.faq__q{ transform:translateY(-30%); }
}
@media (prefers-reduced-motion:reduce){
*{ animation:none !important; transition:none !important; }
html{ scroll-behavior:auto; }
.js-reveal [data-reveal],
.js-reveal [data-reveal-stagger] > *,
.js-reveal .podium__slot{ opacity:1 !important; transform:none !important; }
}
/* ==========================================================================
BẢN INDEX2 — THANH ĐIỀU HƯỚNG DÍNH
==========================================================================
Khác bản gốc: nav rời khỏi hero, nằm ngay dưới banner và dính lên đỉnh khi
cuộn qua. Nó thay luôn vai trò của .board__tabs (đã gỡ khỏi index2.html).
========================================================================== */
.stickynav{
position:relative; z-index:60;
background:var(--white);
border-bottom:1px solid #E2EFF8;
box-shadow:0 2px 10px rgba(20,45,140,.05);
}
/* Khi đã cuộn qua: ghim lên đỉnh màn hình */
.stickynav.is-stuck{
position:fixed; top:0; left:0; right:0;
box-shadow:0 6px 20px rgba(20,45,140,.13);
animation:stickyDrop .22s ease;
}
@keyframes stickyDrop{ from{ transform:translateY(-100%); } to{ transform:none; } }
@media (prefers-reduced-motion:reduce){ .stickynav.is-stuck{ animation:none; } }
.stickynav__inner{
display:flex; align-items:center; justify-content:space-between; gap:14px;
padding-block:0;
}
.stickynav__links{ display:flex; align-items:stretch; gap:4px; min-width:0; }
.stickynav__link{
display:inline-flex; align-items:center; gap:8px;
padding:15px 16px; border:none; background:transparent; cursor:pointer;
font-family:var(--font-ui); font-size:15px; font-weight:700;
color:var(--blue-ink); text-decoration:none; white-space:nowrap;
border-bottom:3px solid transparent;
transition:color .16s, border-color .16s, background .16s;
}
.stickynav__link svg{ width:19px; height:19px; flex:none; }
.stickynav__link:hover{ background:var(--sky); }
/* Tab đang mở — chỉ áp cho 2 nút đóng vai trò tab */
.stickynav__link.is-on{ color:var(--blue); border-bottom-color:var(--blue); }
.stickynav__link .tab-badge{ font-size:10px; padding:2px 6px; }
/* Chấm "mới": mặc định ẩn trên desktop (đã có nhãn chữ MỚI) */
.stickynav__ico{ display:inline-flex; position:relative; flex:none; }
.stickynav__dot{ display:none; }
/* Giữ chỗ khi thanh chuyển sang fixed, tránh trang giật lên */
.stickynav__spacer{ display:block; }
/* display:block ở trên đè luôn thuộc tính [hidden] -> khối giữ chỗ hiện
thường trực, để lại một dải trống cao bằng thanh menu (134px trên di
động) ngay dưới menu. Chỉ chiếm chỗ khi JS bỏ hidden lúc thanh dính. */
.stickynav__spacer[hidden]{ display:none; }
@media (max-width:860px){
.stickynav__link{ padding:13px 11px; font-size:14px; gap:6px; }
.stickynav__link svg{ width:17px; height:17px; }
}
@media (max-width:640px){
/* Bốn mục + nút VI/EN không thể nằm chung một hàng: đo thực tế cần ~479px
trong khi iPhone SE chỉ có 320px. Cuộn ngang thì người dùng không thấy
hết menu, dễ bỏ sót "Bình chọn".
Giải pháp: xếp thành 2 hàng — VI/EN lên trên bên phải, menu chiếm trọn
hàng dưới và 4 mục chia đều bề ngang. Chữ tự co, không cần cuộn. */
.stickynav__inner{
flex-direction:column; align-items:stretch; gap:0;
padding-block:0;
}
/* VI/EN: hàng riêng, gọn bên phải */
.stickynav__inner .lang-switch{
order:-1; align-self:flex-end; margin:5px 0 0; transform:scale(.88);
transform-origin:right center;
}
.stickynav__links{
/* 5 mục (thêm "Kết quả chung kết") — 4 cột thì FAQs rớt xuống hàng 2 */
display:grid; grid-template-columns:repeat(5,1fr); gap:0;
width:100%;
}
.stickynav__link{
flex-direction:column; justify-content:center; gap:2px;
padding:7px 2px 7px; font-size:11.5px; line-height:1.15;
text-align:center; white-space:normal; /* "Bảng xếp hạng" xuống 2 dòng */
border-bottom-width:3px; min-width:0;
}
.stickynav__link svg{ width:19px; height:19px; }
/* Mobile: menu xếp dọc (icon trên, chữ dưới) nên nhãn "MỚI" xuống hàng
thứ ba dưới chữ "Bình chọn". Bỏ nền viên thuốc, chỉ để chữ đỏ cho gọn
— cột chỉ rộng ~70px ở iPhone SE. */
.stickynav__link .tab-badge{
display:block; background:none; color:var(--red);
padding:0; font-size:9.5px; line-height:1.1; letter-spacing:.04em;
}
.stickynav__link.is-on .tab-badge{ color:var(--red); }
/* Chấm đỏ giữ nguyên ẩn: đã có chữ "MỚI" đỏ ngay dưới, hiện cả hai thì
thừa và rối. Muốn dùng chấm thay chữ thì đổi display ở đây và ẩn
.tab-badge phía trên. */
}
@keyframes dotPulse{
0%,100%{ transform:scale(1); opacity:1; }
50% { transform:scale(1.25); opacity:.85; }
}
@media (prefers-reduced-motion:reduce){
.stickynav__dot{ animation:none; }
}
/* Màn rất hẹp (~320px): thu chữ thêm chút nữa */
@media (max-width:359px){
.stickynav__link{ font-size:10.5px; padding:6px 1px 8px; }
.stickynav__link svg{ width:17px; height:17px; }
}
/* Neo (#gioi-thieu, #faq, #chi-tiet...) phải chừa chỗ cho thanh dính, nếu
không tiêu đề section sẽ nằm khuất phía sau thanh khi nhảy tới.
72px = chiều cao thanh + chút đệm. */
:where(#panel-results, #bang-xep-hang, #chi-tiet, #gioi-thieu, #hanh-trinh, #faq, #cta){
scroll-margin-top:76px;
}
@media (max-width:640px){
/* Mobile thanh cao hơn (2 hàng: VI/EN + menu) nên phải chừa nhiều hơn */
:where(#panel-results, #bang-xep-hang, #chi-tiet, #gioi-thieu, #hanh-trinh, #faq, #cta){
scroll-margin-top:106px;
}
}