/* =============================================================================
site-v2.css — HỆ THỐNG GIAO DIỆN DÙNG CHUNG cho toàn bộ idolhub.net
=============================================================================
Nạp SAU site.css:
PHẦN A — design system: biến + class .v2-* dùng cho MỌI trang.
Trang khác chỉ cần nạp file này rồi dùng đúng class, KHÔNG copy CSS.
PHẦN B — chỉ trang chủ (home-v2.html). Trang khác bỏ qua phần này.
Quy ước: class mới luôn có tiền tố .v2- để không đụng class của site.css
(agent khác cũng đang sửa site.css). Không dùng emoji trong chữ/nhãn.
============================================================================= */
/* =============================================================================
PHẦN A — DESIGN SYSTEM DÙNG CHUNG
============================================================================= */
/* ---------------------------------- Biến ---------------------------------- */
:root {
/* Kế thừa bảng màu của site.css; nếu trang nào chưa có thì lấy giá trị mặc định */
--v2-acc: var(--acc, var(--purple, #b58cff));
--v2-acc-soft: rgb(181 140 255 / .12);
--v2-acc-line: rgb(181 140 255 / .45);
--v2-gld: var(--gld, var(--gold, #f6c453));
--v2-gld-line: rgb(246 196 83 / .5);
--v2-sky: var(--sky, #38bdf8);
--v2-sky-line: rgb(56 189 248 / .4);
--v2-ok: var(--green, #22c55e);
--v2-ok-line: rgb(34 197 94 / .5);
--v2-ok-soft: rgb(34 197 94 / .13);
--v2-card: var(--card, #131b2e);
--v2-card2: var(--card2, #0f1628);
--v2-line: var(--line, #2a3752);
--v2-txt: var(--txt, #e2e8f0);
--v2-dim: var(--dim, #8fa0c0);
--v2-soft: #cfd9ee;
--v2-well: #0a0f1d;
/* Nhịp khoảng cách + bo góc + bóng */
--v2-1: 6px;
--v2-2: 10px;
--v2-3: 14px;
--v2-4: 20px;
--v2-5: 28px;
--v2-6: 40px;
--v2-r: var(--r, 16px);
--v2-r-sm: 12px;
--v2-shadow: var(--shadow, 0 18px 44px rgb(0 0 0 / .38));
}
/* -------------------------------- Khối trang ------------------------------ */
.v2-section { padding: var(--v2-6) 0; }
.v2-section + .v2-section { border-top: 1px solid rgb(42 55 82 / .55); }
.v2-section__head { margin-bottom: var(--v2-4); }
.v2-h2 { font-size: 1.34rem; font-weight: 800; margin: 0 0 .5em; letter-spacing: .1px; }
.v2-h3 { font-size: 1.02rem; font-weight: 700; margin: 0 0 .45em; }
.v2-lead { color: var(--v2-dim); margin: 0; max-width: 62ch; }
.v2-lead--wide { max-width: none; }
/* ---------------------------------- Grid ---------------------------------- */
.v2-grid { display: grid; gap: var(--v2-3); }
.v2-grid + .v2-grid,
.v2-grid + .v2-cta { margin-top: var(--v2-4); }
.v2-grid > * { min-width: 0; }
@media (min-width: 640px) {
.v2-grid--2, .v2-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
.v2-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.v2-grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ---------------------------------- Card ---------------------------------- */
.v2-card {
display: flex; flex-direction: column; min-width: 0; margin: 0;
background: linear-gradient(180deg, var(--v2-card), var(--v2-card2));
border: 1px solid var(--v2-line); border-radius: var(--v2-r);
padding: 16px; box-shadow: var(--v2-shadow);
}
.v2-card > :last-child { margin-bottom: 0; }
.v2-card p { color: var(--v2-dim); font-size: .95rem; }
.v2-card--flush { padding: 0; overflow: hidden; }
.v2-card--flat { box-shadow: none; }
.v2-card--purple { border-color: var(--v2-acc-line); }
.v2-card--sky { border-color: var(--v2-sky-line); }
.v2-card--gold { border-color: var(--v2-gld-line); }
.v2-card--green { border-color: var(--v2-ok-line); }
.v2-card__media {
border-bottom: 1px solid var(--v2-line); background: var(--v2-well);
}
.v2-card__media > img { width: 100%; height: auto; }
.v2-card__body { padding: 15px 16px 16px; }
.v2-card__body > :last-child { margin-bottom: 0; }
.v2-card__body .v2-h3 { margin-bottom: .45em; }
/* Danh sách gạch đầu dòng trong card */
.v2-list { list-style: none; padding: 0; margin: 0; }
/* SỬA LỖI THẬT (khi áp v2 cho các trang trong): bản trước dùng display:grid
(15px 1fr) nên mọi // nằm TRỰC TIẾP trong bị tách thành ô grid
riêng — chữ bung mỗi từ một dòng. Đổi sang gạch đầu dòng tuyệt đối + padding:
nội dung trong chảy bình thường, không cần bọc . */
.v2-list li {
position: relative; padding-left: 23px;
font-size: .92rem; color: var(--v2-soft); margin: .3em 0;
}
.v2-list li::before {
content: "•"; position: absolute; left: 0; top: 0;
color: var(--v2-acc); font-weight: 900;
}
.v2-list--check li::before { content: "✓"; color: var(--v2-ok); }
.v2-list--star li::before { content: "★"; color: var(--v2-gld); }
/* THÊM (khi áp giao diện v2 cho các trang trong): danh sách "không có" cần dấu ✕ đỏ
thay cho gạch đầu dòng — dùng ở mục "IdolFX không làm gì" của trang Tính năng. */
.v2-list--x li::before { content: "✕"; color: #f87171; font-weight: 900; }
/* ------------------------------- Khung ảnh --------------------------------- */
/* .v2-shot: khung ảnh dùng chung — viền mảnh, bo góc, bóng nhẹ, không méo ảnh.
Mặc định chiều cao theo tỉ lệ gốc của ảnh. Thêm --16x10 / --4x5 để cắt cho đều. */
.v2-shot {
margin: 0; overflow: hidden; background: var(--v2-well);
border: 1px solid var(--v2-line); border-radius: var(--v2-r-sm);
box-shadow: 0 10px 26px rgb(0 0 0 / .28);
}
.v2-shot > img { width: 100%; height: auto; }
.v2-shot--16x10 > img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 50%; }
.v2-shot--3x2 > img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 50%; }
.v2-shot--4x5 > img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; }
.v2-shot--9x16 > img { aspect-ratio: 9 / 16; object-fit: cover; object-position: 50% 50%; }
/* Ảnh overlay chụp trên nền trong suốt: cho hiện trọn khung, không cắt */
.v2-shot--contain > img {
aspect-ratio: auto; height: auto;
background:
radial-gradient(120% 90% at 50% 45%, var(--v2-acc-soft), rgba(0 0 0 / 0) 68%),
var(--v2-well);
}
/* ---------------------------------- Nút ----------------------------------- */
.v2-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 18px; border-radius: var(--v2-r-sm); border: 1px solid var(--v2-line);
background: #18213c; color: var(--v2-txt); font: inherit; font-weight: 700;
text-align: center; cursor: pointer;
}
.v2-btn:hover { text-decoration: none; filter: brightness(1.08); }
.v2-btn:active { transform: scale(.99); }
.v2-btn--primary {
background: linear-gradient(180deg, var(--v2-acc), #8f6ae0);
border-color: #d3bcff; color: #170f2e;
}
.v2-btn--gold {
background: linear-gradient(180deg, var(--v2-gld), #e0a72c);
border-color: #fbd77e; color: #2a1f04;
}
.v2-btn--ghost { background: transparent; border-color: var(--v2-line); color: var(--v2-txt); }
.v2-btn--lg { padding: 15px 22px; font-size: 1.02rem; }
.v2-btn--block { display: flex; width: 100%; }
.v2-btnrow { display: flex; flex-wrap: wrap; gap: var(--v2-2); }
.v2-btnrow .v2-btn { flex: 1 1 auto; }
@media (min-width: 560px) { .v2-btnrow .v2-btn { flex: 0 0 auto; } }
/* ---------------------------------- Pill ---------------------------------- */
.v2-pill {
display: inline-block; font-size: .78rem; font-weight: 700;
padding: 5px 11px; border-radius: 999px; white-space: nowrap;
color: var(--v2-soft); background: rgb(143 160 192 / .1);
border: 1px solid rgb(143 160 192 / .32);
}
.v2-pill--acc { color: #e2d5ff; background: var(--v2-acc-soft); border-color: var(--v2-acc-line); }
.v2-pill--sky { color: #bae6fd; background: rgb(56 189 248 / .12); border-color: var(--v2-sky-line); }
.v2-pill--gold { color: #fde9b8; background: rgb(246 196 83 / .12); border-color: var(--v2-gld-line); }
.v2-pill--green { color: #bbf7d0; background: var(--v2-ok-soft); border-color: var(--v2-ok-line); }
.v2-pills { display: flex; flex-wrap: wrap; gap: var(--v2-1); margin: 0; }
/* Dải gạch đầu dòng ngắn (kiểu "3 gạch" dưới hero) */
.v2-fast { list-style: none; padding: 0; margin: var(--v2-3) 0 0; display: grid; gap: 8px; }
.v2-fast li { display: flex; align-items: center; gap: 9px; font-size: .93rem; color: var(--v2-soft); margin: 0; }
.v2-fast li::before {
content: ""; flex: 0 0 auto; width: 18px; height: 18px;
background-color: var(--v2-ok-soft);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8.5' fill='none' stroke='%2322c55e' stroke-opacity='.5'/%3E%3Cpath d='M5.4 9.3l2.4 2.4 4.8-5.1' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size: 18px 18px; background-repeat: no-repeat;
}
/* ---------------------------------- Steps --------------------------------- */
.v2-steps { counter-reset: v2st; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--v2-2); }
.v2-steps > li {
counter-increment: v2st; position: relative; margin: 0;
background: linear-gradient(180deg, var(--v2-card), var(--v2-card2));
border: 1px solid var(--v2-line); border-radius: var(--v2-r);
padding: 15px 16px 15px 58px; box-shadow: var(--v2-shadow);
}
.v2-steps > li::before {
content: counter(v2st);
position: absolute; left: 15px; top: 15px;
width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
font-size: .9rem; font-weight: 900; color: #170f2e;
background: linear-gradient(145deg, var(--v2-acc), var(--v2-sky));
}
.v2-steps > li > :last-child { margin-bottom: 0; }
.v2-steps p { color: var(--v2-dim); font-size: .94rem; }
/* ---------------------------------- Giá ----------------------------------- */
.v2-price {
position: relative; background: linear-gradient(180deg, var(--v2-card), var(--v2-card2));
border: 1px solid var(--v2-line); border-radius: var(--v2-r);
padding: 18px; box-shadow: var(--v2-shadow);
}
.v2-price--feat {
border-color: var(--v2-gld-line);
background: linear-gradient(180deg, #1d2138, #14192c);
}
.v2-price__tag {
position: absolute; top: -12px; left: 16px;
font-size: .74rem; font-weight: 800; letter-spacing: .4px;
padding: 4px 10px; border-radius: 999px;
background: linear-gradient(180deg, var(--v2-gld), #e0a72c);
color: #2a1f04; border: 1px solid #fbd77e;
}
.v2-price h3 { margin: 4px 0 2px; font-size: 1.05rem; }
.v2-price__amount { font-size: 1.9rem; font-weight: 900; color: var(--v2-txt); letter-spacing: -.4px; }
.v2-price__amount small { font-size: .82rem; font-weight: 600; color: var(--v2-dim); letter-spacing: 0; }
.v2-price--feat .v2-price__amount { color: var(--v2-gld); }
.v2-price__sub { font-size: .85rem; color: var(--v2-dim); margin-bottom: 12px; }
.v2-price ul { list-style: none; padding: 0; margin: 0 0 16px; }
.v2-price .v2-btn { width: 100%; }
/* ----------------------------------- FAQ ---------------------------------- */
.v2-faq { display: grid; gap: var(--v2-2); }
.v2-faq details {
background: linear-gradient(180deg, var(--v2-card), var(--v2-card2));
border: 1px solid var(--v2-line); border-radius: 14px; overflow: hidden;
}
.v2-faq details[open] { border-color: var(--v2-acc-line); }
.v2-faq summary {
cursor: pointer; padding: 14px 16px; font-weight: 700; font-size: .97rem;
list-style: none; display: grid; grid-template-columns: 1fr 22px; gap: 10px; align-items: start;
}
.v2-faq summary::-webkit-details-marker { display: none; }
.v2-faq summary::after { content: "+"; color: var(--v2-acc); font-size: 1.2rem; line-height: 1; text-align: center; }
.v2-faq details[open] summary::after { content: "–"; }
.v2-faq .v2-faq__a { padding: 0 16px 15px; color: var(--v2-dim); font-size: .93rem; }
.v2-faq .v2-faq__a > :last-child { margin-bottom: 0; }
/* ---------------------------------- CTA ----------------------------------- */
.v2-cta {
border: 1px solid var(--v2-acc-line); border-radius: var(--v2-r);
background: linear-gradient(140deg, rgb(181 140 255 / .14), rgb(56 189 248 / .08) 55%, rgb(19 27 46 / .7));
padding: 22px; text-align: center;
}
.v2-cta h2 { margin-bottom: .35em; }
.v2-cta > p { color: var(--v2-dim); max-width: 56ch; margin: 0 auto 18px; }
.v2-cta .v2-btnrow { justify-content: center; }
@media (min-width: 720px) { .v2-cta { padding: 34px; } }
/* Dải số liệu ngắn — CHỈ dùng khi có số THẬT, không bịa */
.v2-stats { display: grid; gap: var(--v2-2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .v2-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v2-stats li {
background: rgb(15 22 40 / .7); border: 1px solid var(--v2-line);
border-radius: var(--v2-r-sm); padding: 12px 14px;
}
.v2-stats b { display: block; font-size: 1.16rem; color: var(--v2-gld); font-weight: 800; }
.v2-stats span { font-size: .82rem; color: var(--v2-dim); }
/* Ghi chú nhỏ dưới một khối */
.v2-note { font-size: .86rem; color: var(--v2-dim); }
/* THÊM (khi áp giao diện v2 cho các trang trong): dải .v2-pills đặt ngay trên
trong .v2-section__head cần chút khoảng dưới, nếu không sẽ dính vào tiêu đề. */
.v2-section__head .v2-pills { margin-bottom: var(--v2-2); }
/* =============================================================================
PHẦN B — CHỈ TRANG CHỦ (home-v2.html)
Trang khác không cần những class dưới đây.
============================================================================= */
/* chỉ trang chủ — hero 2 cột + ảnh dashboard ngang */
.v2-hero { padding: 26px 0 var(--v2-1); }
.v2-hero__in { display: grid; gap: var(--v2-4); }
.v2-hero h1 { max-width: 24ch; font-size: 1.66rem; }
.v2-hero .v2-lead { max-width: 48ch; font-size: 1.03rem; }
@media (min-width: 860px) {
.v2-hero { padding: 36px 0 var(--v2-2); }
.v2-hero h1 { font-size: 2.15rem; }
.v2-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; align-items: center; }
}
@media (min-width: 1120px) {
.v2-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 40px; }
.v2-hero h1 { font-size: 2.35rem; }
}
/* chỉ trang chủ — ảnh dashboard app */
.v2-shot--dashboard {
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
border-radius: 14px;
overflow: hidden;
}
.v2-shot--dashboard img {
aspect-ratio: 2372 / 1630;
object-fit: contain;
width: 100%;
height: auto;
display: block;
}
/* chỉ trang chủ — ảnh live dọc: đúng tỉ lệ gốc 9:16, cắt bớt cho gọn */
.v2-shot--live img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 2%; }
/* chỉ trang chủ — cắt đúng phần cần xem trong ảnh live dọc (không tạo ảnh mới) */
.v2-shot--jar > img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 88% 50%; }
.v2-shot--voice > img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 88% 44%; }
/* chỉ trang chủ — mục giới thiệu bạn bè trong CTA cuối */
.v2-cta__ref {
margin: 16px auto 0; font-size: .92rem; color: var(--v2-dim);
border-top: 1px solid rgb(181 140 255 / .25); padding-top: 14px; max-width: 52ch;
}
/* chỉ trang chủ — màn hình thấp (laptop): giữ hero gọn trong một màn hình */
@media (min-width: 1024px) and (max-height: 900px) {
.v2-hero { padding-top: 22px; }
.v2-hero h1 { font-size: 2.05rem; }
}