/* Phông của thương hiệu (file trong thư mục fonts/). Medium dùng cho cả 500 và 600. */
@font-face { font-family: "SVN-Apparat"; src: url("fonts/SVN-Apparat-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SVN-Apparat"; src: url("fonts/SVN-Apparat-Medium.ttf") format("truetype"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "SVN-Apparat"; src: url("fonts/SVN-Apparat-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "MomoSignature"; src: url("fonts/MomoSignature-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
:root {
--ink: #14233f;
--navy: #0f2b6b;
--blue: #1a6bff;
--green-1: #86d160;
--green-2: #d3ebbf;
--line: #e3e6ea;
--muted: #7a8493;
--chip: #e9e9ec;
--dark: #071b3e; /* các biến theme được Blade ghi đè theo cấu hình của từng landing */
--page-bg: #eef3ea;
--panel: #1544b0;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
font-family: "SVN-Apparat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
color: var(--ink);
background: var(--page-bg);
}
button { font: inherit; color: inherit; cursor: pointer; }
/* Lớp phủ toàn màn hình chứa trình tạo khoảnh khắc (Editor / Result), dạng mobile căn giữa trên desktop */
.app-overlay { position: fixed; inset: 0; z-index: 100; display: none; background: var(--page-bg); }
.app-overlay.open { display: block; }
.app {
position: relative; height: 100%;
max-width: 460px; margin: 0 auto;
background: #fff; overflow: hidden;
box-shadow: 0 0 40px rgba(0,0,0,.08);
}
.view { position: absolute; inset: 0; display: none; flex-direction: column; background: #fff; }
.view.active { display: flex; }
/* ── Topbar ── */
.topbar {
flex: 0 0 auto; height: 60px; padding: 0 16px;
display: flex; align-items: center; gap: 8px;
}
.icon-btn {
width: 32px; height: 32px; padding: 0; border: 0; background: none;
display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.icon-btn svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand-logo { height: 36px; width: auto; margin-right: auto; display: block; }
.pill-btn {
height: 36px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
border: 1px solid rgba(255,255,255,.8);
background: linear-gradient(90deg, var(--green-1), var(--green-2));
box-shadow: 0 2px 8px rgba(120,190,90,.35);
}
.pill-btn.ghost { background: #f2f2f4; border-color: var(--line); box-shadow: none; }
.pill-btn:disabled { opacity: .5; box-shadow: none; cursor: not-allowed; }
.btn-green {
width: 100%; height: 52px; border-radius: 999px; font-size: 16px; font-weight: 600;
border: 2px solid rgba(255,255,255,.85);
background: linear-gradient(90deg, var(--green-1), var(--green-2));
box-shadow: 0 4px 14px rgba(120,190,90,.4);
transition: transform .15s;
}
.btn-green:active { transform: scale(.98); }
/* ── Landing page ── */
html.lock, body.lock { overflow: hidden; overscroll-behavior: none; }
.landing { background: #fff; color: var(--dark); overflow-x: hidden; }
.landing img { display: block; max-width: 100%; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.l-header { height: 68px; display: flex; align-items: center; background: #fff; }
.l-header img { height: 45px; width: auto; }
.l-hero img { width: 100%; height: auto; }
/* Mobile: banner ngang quá nhỏ nên giữ chiều cao tối thiểu và cắt hai bên, giữ phần giữa có chữ */
@media (max-width: 760px) {
.l-hero { overflow: hidden; }
.l-hero img { width: auto; max-width: none; height: 380px; position: relative; left: 50%; transform: translateX(-50%); }
.l-hero.has-m img { width: 100%; max-width: 100%; height: auto; left: auto; transform: none; position: static; }
}
.l-message { padding: 96px 0 110px; }
.l-message h2 { margin: 0 0 56px; text-align: center; font-size: clamp(24px, 3.2vw, 36px); font-weight: 500; letter-spacing: -.2px; }
.msg { display: flex; gap: 32px; max-width: 760px; margin: 0 auto; align-items: flex-start; }
.msg > img { flex: 0 0 188px; width: 188px; height: auto; border-radius: 28px; }
.msg-body { flex: 1; font-size: 17px; line-height: 1.5; text-align: justify; }
.msg-body p { margin: 0 0 6px; }
.msg-body .greet { font-weight: 700; margin-bottom: 14px; text-align: left; }
.msg-sign { margin-top: 26px; text-align: left; }
.msg-sign b { display: block; font-size: 17px; font-weight: 600; color: #000; }
.msg-sign span { font-size: 14px; color: #000; }
@media (max-width: 640px) {
.l-message { padding: 56px 0 64px; }
.msg { flex-direction: column; align-items: center; gap: 24px; }
.msg > img { flex-basis: auto; }
}
.l-dark { background: var(--dark); color: #fff; }
.l-journey { padding: 100px 0 100px; text-align: center; }
.l-journey h2 { margin: 0 0 40px; font-size: clamp(20px, 2.6vw, 28px); font-weight: 500; line-height: 1.35; }
.video-wrap { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 40px; overflow: hidden; background: #000; cursor: pointer; }
.video-wrap video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-wrap.is-image { cursor: default; }
.video-wrap.is-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-play {
position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; padding: 0; border: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.92); box-shadow: 0 8px 30px rgba(0,0,0,.35);
transition: transform .2s;
}
.video-play svg { width: 38px; height: 38px; margin-left: 5px; fill: #0b2a6b; }
.video-wrap:hover .video-play { transform: scale(1.07); }
.video-wrap.playing { cursor: default; }
.video-wrap.playing .video-play { display: none; }
.timeline { max-width: 1200px; margin: 64px auto 0; display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); align-items: start; }
.timeline img { width: 100%; height: auto; }
@media (max-width: 900px) {
.l-journey { padding: 56px 0 64px; }
.video-wrap { border-radius: 20px; }
.video-play { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
.video-play svg { width: 28px; height: 28px; }
}
/* Mobile / tablet nhỏ: timeline xếp dọc, có đường nối + chấm vàng giữa các mốc */
@media (max-width: 820px) {
.timeline { display: flex; flex-direction: column; align-items: center; margin-top: 44px; }
.tl-item { position: relative; width: min(300px, 84%); padding: 0 0 52px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item:not(:last-child)::before { /* đường nối xuống mốc tiếp theo */
content: ""; position: absolute; left: 50%; bottom: 8px; width: 1px; height: 36px;
background: linear-gradient(to bottom, rgba(243,206,153,.7), rgba(243,206,153,.1));
}
.tl-item:not(:last-child)::after { /* chấm vàng */
content: ""; position: absolute; left: 50%; bottom: 0; width: 7px; height: 7px; margin-left: -3px;
border-radius: 50%; background: #f3ce99; box-shadow: 0 0 10px rgba(243,206,153,.8);
}
}
/* Section slide: nền bg_slide.jpg (1440 x 690). Toạ độ slide lấy theo thiết kế: cột phải x 773 → 1323 */
.l-awards {
position: relative; aspect-ratio: 1440 / 690; overflow: hidden;
background: #0046ff var(--bg-d, none) center / cover no-repeat;
}
.vs {
position: absolute; top: 0; bottom: 0; right: 8.1%; width: 38.2%;
overflow: hidden; touch-action: pan-x; cursor: grab; user-select: none; -webkit-user-select: none;
/* Làm mờ mép trên/dưới theo gradient thiết kế (dùng kênh alpha của gradient làm mask) */
-webkit-mask-image: linear-gradient(180deg, rgba(217,217,217,0) 0%, #C6C6C6 12.98%, #7E7E7E 88.46%, rgba(115,115,115,0) 100%);
mask-image: linear-gradient(180deg, rgba(217,217,217,0) 0%, #C6C6C6 12.98%, #7E7E7E 88.46%, rgba(115,115,115,0) 100%);
}
.vs.dragging { cursor: grabbing; }
.vs-item {
position: absolute; top: 0; right: 0; margin: 0; transform-origin: 100% 50%; will-change: transform;
border: 2px solid #fff; border-radius: 14px; overflow: hidden; background: #fff;
box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
/* Phóng nhẹ ảnh để che viền trắng / góc bo đã nằm sẵn trong file ảnh */
.vs-item img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); pointer-events: none; -webkit-user-drag: none; }
/* Slide NGANG (mobile): item giữa to, hai bên nhỏ hơn và bị cắt ở mép màn hình */
.vs.h .vs-item { left: 0; right: auto; transform-origin: 50% 50%; }
@media (max-width: 760px) {
/* nền bg-video-mb.jpg (1130 x 1884) đã có sẵn tiêu đề phía trên và logo 3D phía dưới; slide nằm giữa hai phần đó */
.l-awards { aspect-ratio: 1130 / 1884; background-image: var(--bg-m, var(--bg-d, none)); }
.vs { left: 0; right: 0; width: auto; top: 28%; bottom: auto; height: 36%; touch-action: pan-y;
-webkit-mask-image: none; mask-image: none; }
}
.l-share { padding: 100px 0 0; text-align: center; overflow: hidden; }
/* 3 khung ảnh nghiêng (theo thiết kế item.png): ảnh phủ kín khung bo góc viền trắng, trên cùng là logo + nền xanh, dưới cùng là sóng xanh + slogan.
Cỡ chữ / bo góc theo bề rộng khung (cqw) nên co giãn cùng khung. */
.share-trio { position: relative; width: 500px; max-width: 86%; margin: 0 auto; aspect-ratio: 500 / 357; container-type: inline-size; }
.share-trio .sc {
position: absolute; top: 4%; width: 39.6%; aspect-ratio: 198 / 312; overflow: hidden; container-type: inline-size;
border: 0.5cqw solid #fff; border-radius: 2.6cqw; background: #1544b0; box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.share-trio .sc.l { left: 1%; top: 3.5%; transform: rotate(-6deg); transform-origin: 50% 100%; z-index: 1; }
.share-trio .sc.c { left: 30.2%; top: 0; z-index: 3; }
.share-trio .sc.r { right: 1%; top: 3.5%; transform: rotate(6deg); transform-origin: 50% 100%; z-index: 1; }
.sc .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc .shade { position: absolute; left: 0; right: 0; pointer-events: none; }
/* nền xanh phía trên (mờ dần xuống) cho logo */
.sc .shade.t { top: 0; height: 36%; background: linear-gradient(180deg, rgba(18,72,226,.97) 0%, rgba(18,72,226,.78) 45%, rgba(18,72,226,0) 100%); }
/* sóng xanh phía dưới cho slogan: dải sáng cong + khối xanh đậm */
.sc .shade.b { bottom: 0; height: 30%; background: url("data:image/svg+xml;utf8,") center bottom / 100% 100% no-repeat; }
.sc .frm { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.sc .lg { position: absolute; top: 4.5%; left: 50%; width: 66%; height: auto; transform: translateX(-50%); }
.sc .tx { position: absolute; left: 2%; right: 2%; bottom: 3.2%; text-align: center; line-height: 1.15; text-shadow: 0 1px 5px rgba(0,30,120,.45); }
.sc .tx b { display: block; font: 400 7.6cqw "MomoSignature", cursive; white-space: nowrap; letter-spacing: .1px; }
.sc .tx span { display: block; margin-top: 1.2cqw; font-size: 4.7cqw; font-weight: 500; white-space: nowrap; }
/* cờ Việt Nam thay emoji cờ (Windows không hiển thị emoji cờ) */
.flag-vn { display: inline-block; width: 1.35em; height: .92em; margin-left: .35em; vertical-align: -.12em; border-radius: 2px;
background: #da251d url("data:image/svg+xml;utf8,") center / 82% no-repeat; }
.l-share h2 { margin: 36px 0 6px; font-size: clamp(24px, 3vw, 34px); font-weight: 500; }
/* Khung mẫu có sẵn — tỉ lệ đo từ thiết kế: khối trái 35,5% | khoảng trống 20,5% | khối phải 44% bề rộng; thẻ giữa = 49,7% khối phải, tỉ lệ 9:16.
Slide 3D: 2 thẻ bên quay quanh MÉP TRONG (mép ngoài lùi xa, nhỏ lại), cách thẻ giữa ~5% bề rộng thẻ. */
.showcase { display: grid; grid-template-columns: 35.5% 44%; justify-content: space-between; align-items: center; max-width: 1160px; margin: 0 auto 64px; }
.sh-left { text-align: center; min-width: 0; }
.sh-logo { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.l-share .sh-title { margin: 22px 0 10px; font-size: clamp(26px, 3vw, 44px); font-weight: 500; line-height: 1.15; }
.sh-sub { margin: 0; font-size: 12px; line-height: 1.5; opacity: .85; }
.sh-right { min-width: 0; container-type: inline-size; }
.s3d { position: relative; height: 92cqw; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.s3d.dragging { cursor: grabbing; }
.s3d-item { position: absolute; left: 50%; top: 50%; width: 49.7cqw; height: 88.4cqw; overflow: hidden; border-radius: 4cqw; background: #0d2a63;
box-shadow: 80px 1.88px 32.16px 0 #00000040, -100px 1.88px 32.16px 0 #00000040; /* bóng thẻ giữa đổ lên 2 thẻ bên (JS thay bằng bản theo cỡ thẻ + nhạt dần khi rời giữa) */
will-change: transform; backface-visibility: hidden; }
.s3d-item img, .s3d-item video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.sh-actions { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.sh-actions .btn-cta { margin-top: 0; min-width: 110px; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 500; color: #fff;
border: 1px solid rgba(255,255,255,.55); background: transparent; transition: background .15s, transform .15s; }
.btn-ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }
.btn-ghost svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-ghost:disabled, .sh-actions .btn-cta:disabled { opacity: .55; cursor: default; }
.share-or { margin: 0 0 14px; font-size: 16px; font-weight: 500; }
.l-share h2.share-h { margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.25; }
.l-share .count-line { margin-bottom: 40px; }
@media (max-width: 760px) {
.showcase { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: 48px; }
.sh-logo { max-width: 300px; }
.sh-right { width: min(100%, 340px); margin: 0 auto; }
}
.count-line { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 500; }
.count-line img { height: 26px; width: auto; }
.btn-cta {
display: inline-flex; align-items: center; justify-content: center; margin-top: 36px;
height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 500; color: #12301a;
border: 1px solid rgba(255,255,255,.7); background: linear-gradient(90deg, #7ecb5a, #d3ebbf);
box-shadow: 0 4px 16px rgba(126,203,90,.35); transition: transform .15s;
}
.btn-cta:hover { transform: translateY(-1px) scale(1.03); }
.stats { margin-top: 56px; }
.stats .total b { display: block; font-size: clamp(40px, 5vw, 52px); font-weight: 500; line-height: 1.1; }
.stats .total span, .stat span { font-size: 13px; opacity: .92; }
.stat-row { display: flex; justify-content: center; gap: 0; margin-top: 28px; flex-wrap: wrap; row-gap: 20px; }
.stat { width: 153px; padding: 0 6px; }
.stat b { display: block; font-size: 30px; font-weight: 500; line-height: 1.15; }
/* Khung thống kê cuối trang (theo thiết kế): thẻ trắng bo góc; trái = tiêu đề + số lớn; phải = % và thanh từng phòng ban */
.l-stats { padding: 64px 0 72px; }
.stat-card { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; max-width: 960px; margin: 0 auto; padding: 44px 48px;
border-radius: 28px; background: #fff; color: var(--panel); text-align: left; }
.sc-left { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-width: 0; }
.sc-left h3 { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.2; }
.sc-num b { display: block; font-size: clamp(64px, 9vw, 104px); font-weight: 500; line-height: .9; letter-spacing: -3px; }
.sc-num span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.3; }
.sc-right { align-self: center; min-width: 0; }
.dept-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 12px; }
.dept-row em { font-style: normal; font-size: 13px; font-weight: 500; text-align: right; }
.dept-track { position: relative; height: 24px; }
.dept-track i { display: block; height: 100%; min-width: 24px; border-radius: 99px; background: #dedede; transition: width .8s ease; }
.dept-track span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); max-width: calc(100% - 12px); white-space: nowrap; font-size: 13px; font-weight: 500; }
.dept-note { margin: 10px 0 0 54px; font-size: 12px; color: #7a8493; }
.dept-empty { margin: 6px 0; font-size: 14px; color: #7a8493; }
@media (max-width: 760px) {
.stat-card { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 30px 22px; border-radius: 22px; }
.sc-left { gap: 18px; }
.sc-num b { font-size: clamp(64px, 22vw, 96px); }
}
@media (max-width: 560px) { .stat { width: 33.33%; } }
/* Dây phơi ảnh: toạ độ theo khung thiết kế 1440 x 220, co giãn theo chiều rộng */
/* Vùng cuộn ngang: màn nhỏ thì vuốt (touch) hoặc kéo chuột để xem ảnh hai bên */
.rope-clip {
margin-top: 56px; overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain;
}
.rope-clip::-webkit-scrollbar { display: none; }
.rope-clip.dragging { cursor: grabbing; scroll-snap-type: none; }
/* --f: hệ số bề rộng (>1 khi có hơn 5 ảnh, dây dài ra); --ratio: bề rộng thiết kế theo f */
.rope { position: relative; width: calc(max(100%, 1000px) * var(--f, 1)); aspect-ratio: var(--ratio, 1440) / 230; }
@media (max-width: 760px) { .rope { width: calc(1250px * var(--f, 1)); } }
.rope .pic { scroll-snap-align: center; transform-origin: var(--ox, 50%) 0; cursor: pointer; will-change: transform; }
.rope .pin { transform-origin: 50% 65%; will-change: transform; } /* xoay quanh điểm kẹp vào dây */
.rope .pic img { -webkit-user-drag: none; user-select: none; }
.rope svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rope .pin { position: absolute; width: var(--pinw, 0.7%); aspect-ratio: 10 / 40; background: linear-gradient(90deg, #e9c99b, #d9b07a); border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.25); z-index: 2; }
.rope .pic { position: absolute; width: var(--picw, 12.9%); border: 3px solid #fff; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.rope .pic img { width: 100%; height: auto; }
.l-footer { background: #fff; color: var(--dark); padding: 52px 0 56px; }
.l-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.foot-l { display: flex; align-items: center; gap: 14px; }
.foot-l img { height: 44px; width: auto; }
.foot-l .sep { align-self: stretch; width: 1px; background: #8f98a8; margin: 6px 0; }
.foot-l p { margin: 0; max-width: 300px; font-size: 13.5px; line-height: 1.35; }
.foot-r { text-align: right; font-size: 14px; line-height: 1.4; color: #8a909a; white-space: pre-line; }
@media (max-width: 700px) {
.l-footer .wrap { flex-direction: column; align-items: flex-start; }
.foot-r { text-align: left; }
}
/* ── Stage (preview) ── */
.stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 10px 16px; }
.canvas-box { position: relative; border-radius: 4px; overflow: hidden; background: #ddd; box-shadow: 0 6px 24px rgba(15,43,107,.18); }
.canvas-box canvas { display: block; width: 100%; height: 100%; }
/* Vùng nhận kéo / zoom, nằm trên canvas, đúng vị trí vùng ghép ảnh */
.photo-overlay {
position: absolute; display: flex; align-items: center; justify-content: center;
touch-action: none; user-select: none; -webkit-user-select: none;
}
.photo-overlay.has-photo { cursor: grab; }
.photo-overlay.dragging { cursor: grabbing; }
.btn-upload-round {
position: relative; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--blue), #6aa8ff);
box-shadow: 0 0 0 4px rgba(255,255,255,.35), 0 6px 20px rgba(0,0,0,.3);
}
.btn-upload-round::before {
content: ""; position: absolute; inset: -7px; border-radius: 50%;
border: 2px solid rgba(255,255,255,.85); animation: pulse 1.8s ease-out infinite; pointer-events: none;
}
.btn-upload-round svg { width: 30px; height: 30px; fill: #fff; }
@keyframes pulse { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.photo-overlay.has-photo .btn-upload-round { display: none; }
/* Mẫu Reel: nút xem trước video + badge thời lượng (như thiết kế) */
.btn-play-round {
display: none; width: 68px; height: 68px; padding: 0; border: 0; border-radius: 50%;
align-items: center; justify-content: center; background: rgba(40,40,40,.62);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
box-shadow: 0 4px 18px rgba(0,0,0,.3); transition: transform .15s, background .15s;
}
.btn-play-round svg { width: 30px; height: 30px; fill: #fff; margin-left: 4px; }
.btn-play-round:hover { background: rgba(20,20,20,.75); transform: scale(1.06); }
.btn-play-round:active { transform: scale(.96); }
/* Chỉ hiện Play khi đã xong bước 1 (tải ảnh) và bước 2 (chọn 3 ảnh) — JS bật .step-ready */
.photo-overlay.is-reel.has-photo.reel-ready.step-ready .btn-play-round { display: flex; }
.photo-overlay.is-reel.has-photo.reel-ready.step-ready.playing .btn-play-round { display: none; }
.photo-overlay.playing { cursor: pointer; }
.dur-badge {
display: none; position: absolute; top: 12px; right: 12px; padding: 4px 11px; border-radius: 999px;
background: #000; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .3px; pointer-events: none;
}
.photo-overlay.is-reel.has-photo.reel-ready.step-ready .dur-badge { display: block; }
.photo-overlay.is-reel.has-photo.reel-ready.step-ready.playing .dur-badge { display: none; }
/* Bước 2 của mẫu Reel: bố cục 3 ảnh của cảnh 3 (không khung) ngay trên canvas — bấm thẻ để bỏ ảnh, chọn ảnh ở lưới bên dưới */
.pics-stage {
position: absolute; inset: 0; z-index: 5; overflow: hidden; container-type: inline-size;
background: linear-gradient(160deg, #38bdf8, #0284c7 55%, #075985);
}
.pics-stage[hidden] { display: none; }
.ps-head {
position: absolute; top: 3%; left: 0; right: 0; padding: 0 4cqw; text-align: center; color: #fff;
font-size: 4.6cqw; font-weight: 700; line-height: 1.3; text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.ps-head small { display: block; margin-top: .6cqw; font-size: 3.4cqw; font-weight: 500; opacity: .92; }
.ps-slots { position: absolute; inset: 0; }
.pslot {
position: absolute; width: 48%; padding: 1.7cqw; border: 0; border-radius: 3cqw; background: #fff; cursor: pointer;
box-shadow: 0 .8cqw 3cqw rgba(0,0,0,.28); transform: translate(-50%, -50%) rotate(var(--r, 0rad));
-webkit-tap-highlight-color: transparent; transition: box-shadow .2s;
}
.pslot-in {
position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: var(--ar, .75);
border: .5cqw dashed rgba(2,132,199,.6); border-radius: 1.6cqw; overflow: hidden; background: rgba(2,132,199,.1);
color: #0284c7; font-size: 12cqw; font-weight: 300; line-height: 1;
}
.pslot-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pslot-in .no, .pslot-in .x {
position: absolute; top: 1.5cqw; width: 6.5cqw; height: 6.5cqw; border-radius: 50%; display: none; align-items: center; justify-content: center;
font-size: 4cqw; font-weight: 700; font-style: normal; color: #fff; box-shadow: 0 .3cqw 1.2cqw rgba(0,0,0,.35);
}
.pslot-in .no { left: 1.5cqw; background: var(--blue); }
.pslot-in .x { right: 1.5cqw; background: rgba(0,0,0,.65); font-size: 5cqw; }
.pslot.filled .pslot-in { border-color: transparent; background: #e9ecf1; }
.pslot.filled .pslot-in .no, .pslot.filled .pslot-in .x { display: flex; }
.pslot.filled .ph-plus, .pslot:not(.filled) img { display: none; }
.pslot.next { box-shadow: 0 0 0 1.1cqw rgba(255,255,255,.95), 0 0 5cqw rgba(255,255,255,.85); animation: slotPulse 1.3s ease-in-out infinite; }
@keyframes slotPulse { 50% { transform: translate(-50%, -50%) rotate(var(--r, 0rad)) scale(1.045); } }
.ps-foot { position: absolute; left: 0; right: 0; bottom: 3%; display: flex; justify-content: center; }
.ps-done {
border: 0; border-radius: 999px; padding: 2.4cqw 7cqw; font-size: 4.2cqw; font-weight: 700; color: #0284c7; background: rgba(255,255,255,.6);
box-shadow: 0 .6cqw 2.4cqw rgba(0,0,0,.25);
}
.ps-done:disabled { color: rgba(2,90,140,.75); cursor: default; }
.ps-done.ready { color: var(--dark); background: linear-gradient(90deg, var(--green-1), var(--green-2)); }
.ps-edit {
position: absolute; top: 10px; left: 10px; z-index: 6; padding: 6px 12px; border: 0; border-radius: 999px;
background: rgba(0,0,0,.62); color: #fff; font-size: 12px; font-weight: 600; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.ps-edit[hidden] { display: none; }
.photo-hint {
position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
padding: 4px 10px; border-radius: 12px; width: max-content; max-width: 90%; text-align: center;
background: rgba(0,0,0,.55); color: #fff; font-size: 11px; pointer-events: none; opacity: 0; transition: opacity .3s;
}
.photo-hint.show { opacity: 1; }
/* ── Tabs + panels ── */
.tabs { flex: 0 0 auto; display: flex; justify-content: center; gap: 6px; padding: 8px 12px; }
.tab {
border: 0; background: none; padding: 8px 16px; border-radius: 999px;
font-size: 14px; color: #6c7482; font-weight: 500; white-space: nowrap;
}
.tab.active { background: var(--chip); color: var(--ink); font-weight: 600; }
/* Lưới chọn đúng 3 ảnh sự kiện cho cảnh 3 của video Reel (nằm dưới nút tải ảnh trong tab "Chọn ảnh") */
.pics-box { margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0f1f3; }
.pics-box[hidden] { display: none; }
.pics-head { margin: 0 0 10px; font-size: 13px; color: var(--ink); text-align: center; }
.pics-count { font-weight: 700; color: #e5484d; }
.pics-count.ok { color: #2e9d4f; }
/* Mỗi hàng cùng chiều cao; độ rộng từng ô (flex-grow / flex-basis do JS đặt) tỉ lệ với width / height ảnh gốc → ảnh dọc hiện dọc, ảnh ngang hiện ngang */
.pics-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pics-grid::after { content: ""; flex-grow: 1000; } /* hàng cuối không bị kéo giãn làm méo tỉ lệ */
.pic-item {
position: relative; flex: 1 1 90px; height: 120px; min-width: 0; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden;
background: #e9ecf1; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pic-item img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pic-item.sel { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(26,107,255,.25); }
.pic-item .no {
position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%;
display: none; align-items: center; justify-content: center;
background: var(--blue); color: #fff; font-size: 13px; font-weight: 700;
}
.pic-item.sel .no { display: flex; }
.pic-item.bad::after { content: "Lỗi tải ảnh"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; }
.panel-wrap { flex: 0 0 auto; height: 218px; padding: 6px 20px 20px; overflow-y: auto; border-top: 1px solid #f0f1f3;
border-radius: 20px 20px 0 0; box-shadow: 0 -6px 20px rgba(0,0,0,.04); }
.panel { display: none; }
.panel.active { display: block; }
.panel-lead { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; text-align: center; }
#panelPhoto .btn-green { margin-top: 14px; }
.field { display: block; margin-bottom: 10px; }
.field span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.field input {
width: 100%; height: 42px; padding: 0 14px; border: 1px solid #d5d9df; border-radius: 12px;
font: inherit; font-size: 15px; color: var(--ink); background: #fff; outline: none;
}
.field input:focus, .caption-text:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,107,255,.12); }
.field input.invalid { border-color: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,.14); }
.snd-btn { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3; height: 38px; padding: 0 16px; border: 0;
border-radius: 999px; background: rgba(0,0,0,.68); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.snd-btn[hidden] { display: none; }
.tpl-list { display: flex; gap: 12px; overflow-x: auto; padding: 8px 2px 4px; scrollbar-width: none; }
.tpl-list::-webkit-scrollbar { display: none; }
.tpl-item { flex: 0 0 auto; width: 78px; padding: 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: #6c7482; }
.tpl-thumb { width: 78px; height: 104px; border: 2px solid var(--line); border-radius: 12px; background: #f6f7f9; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 5px; }
.tpl-thumb canvas { max-width: 100%; max-height: 100%; border-radius: 3px; display: block; }
.tpl-item.active .tpl-thumb { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,107,255,.15); }
.tpl-item.active { color: var(--ink); font-weight: 600; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.chip { height: 36px; padding: 0 16px; border-radius: 12px; border: 1px solid #d5d9df; background: #fff; font-size: 14px; font-weight: 500; }
.chip.active { border-color: var(--blue); color: var(--blue); background: #f1f6ff; }
.chip.active::before { content: "✓"; margin-right: 6px; font-weight: 700; }
.cap-status { margin: 10px 2px 0; font-size: 13px; line-height: 1.45; color: #2f7d32; }
.cap-card { flex: 0 0 auto; width: calc(100% - 32px); max-width: 460px; align-self: center; margin: 0 0 6px; padding: 10px 14px;
border: 1px solid var(--line); border-radius: 14px; background: #fafbfc; }
.cap-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.cap-card-head b { color: var(--ink); font-weight: 600; }
.cap-copy { flex: 0 0 auto; border: 0; background: none; padding: 4px 0 4px 10px; color: var(--blue); font-size: 13px; font-weight: 600; }
.cap-preview { margin: 4px 0 0; font-size: 13px; line-height: 1.4; white-space: pre-line; overflow: hidden;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cap-note { margin: 4px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.caption-text {
width: 100%; margin-top: 12px; padding: 12px 14px; border: 1px solid #d5d9df; border-radius: 12px;
font: inherit; font-size: 14px; line-height: 1.5; color: var(--ink); resize: none; height: 118px; outline: none;
}
/* ── Result ── */
.result-stage { flex: 1 1 auto; min-height: 0; padding: 6px 16px 12px; display: flex; align-items: center; justify-content: center; }
.result-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 6px 24px rgba(15,43,107,.2); -webkit-user-drag: none; }
.result-stage { position: relative; }
.result-stage video { max-width: 100%; max-height: 100%; border-radius: 4px; background: #000; box-shadow: 0 6px 24px rgba(15,43,107,.2); }
.result-stage video[hidden], .result-stage img[hidden], .gen-box[hidden] { display: none; }
/* Đang tạo video: vẫn hiện video (cập nhật theo từng khung đang dựng), tiến độ chạy dọc viền chữ nhật quanh video */
.gen-box { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
padding: 6px 16px 12px; text-align: center; background: #fff; }
.gen-frame { position: relative; flex: 0 0 auto; }
.gen-frame canvas { display: block; width: 100%; height: 100%; border-radius: 4px; box-shadow: 0 6px 24px rgba(15,43,107,.2); }
.gen-ring { position: absolute; pointer-events: none; overflow: visible; }
.gen-ring path { fill: none; stroke-width: 5; stroke-linecap: round; }
#genTrack { stroke: #dde3ec; }
#genGlow { stroke: #3b8bff; stroke-width: 11; opacity: .22; } /* quầng sáng = nét to mờ phía dưới (rẻ hơn filter) */
#genRect { stroke: url(#genGrad); }
.gen-pct { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 8px 18px; border-radius: 999px;
background: rgba(10,16,32,.66); color: #fff; font-size: 22px; font-weight: 700; letter-spacing: .5px; }
.gen-note { font-size: 13px; line-height: 1.45; color: var(--muted); max-width: 300px; }
.gen-box.error .gen-pct { display: none; }
.gen-box.error #genRect { stroke: #e5484d; }
.gen-box.error #genGlow { stroke: #e5484d; }
.gen-box.error .gen-note { color: #c4622d; }
.result-actions { flex: 0 0 auto; display: flex; gap: 12px; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); }
.btn-icon { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 18px; border: 0; background: #f1f1f4; display: flex; align-items: center; justify-content: center; }
.btn-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-black { flex: 1; height: 54px; border: 0; border-radius: 999px; background: #000; color: #fff; font-size: 16px; font-weight: 600; }
.btn-black:disabled, .btn-icon:disabled { opacity: .6; }
/* ── Toast ── */
.toast {
position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px); max-width: 90vw; text-align: center;
background: rgba(30,30,30,.95); color: #fff; padding: 12px 22px; border-radius: 10px; font-size: 14px; line-height: 1.4;
opacity: 0; transition: all .3s ease; pointer-events: none; z-index: 1000; white-space: pre-line; word-break: break-word;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-height: 640px) { .panel-wrap { height: 190px; } }
/* ── Desktop: panel bên trái (4 tab) + preview ở giữa ── */
.editor-side { display: contents; } /* mobile: tab + panel xếp dọc dưới preview như cũ */
@media (min-width: 900px) {
.app { max-width: none; box-shadow: none; }
.topbar { height: 68px; padding: 0 28px; }
#viewEditor.active {
display: grid; grid-template-columns: clamp(440px, 33vw, 520px) 1fr; grid-template-rows: auto minmax(0, 1fr);
grid-template-areas: "top top" "side stage";
}
#viewEditor .topbar { grid-area: top; }
#viewEditor .stage { grid-area: stage; min-height: 0; padding: 4px 40px 28px; }
.editor-side {
grid-area: side; display: flex; flex-direction: column; min-height: 0;
margin: 4px 0 28px 28px; background: #fff; overflow: hidden;
border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 8px 30px rgba(15,43,107,.08);
}
.editor-side .tabs { padding: 14px 10px 8px; gap: 2px; }
.editor-side .tab { padding: 8px 12px; font-size: 13.5px; }
.editor-side .panel-wrap { flex: 1 1 auto; height: auto; border: 0; border-radius: 0; box-shadow: none; padding: 8px 22px 22px; }
.editor-side .tab { padding: 8px 16px; font-size: 14px; }
.editor-side .panel-wrap { padding: 10px 26px 26px; }
/* Tab Mẫu: lưới 4 cột chia đều bề rộng panel, không bị che hay xuống hàng */
.tpl-list { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; gap: 14px 12px; padding: 10px 2px 4px; }
.tpl-item { width: 100%; font-size: 13px; }
.tpl-thumb { width: 100%; height: auto; aspect-ratio: 3 / 4; }
.chip { height: 38px; padding: 0 20px; }
.caption-text { height: 240px; font-size: 15px; }
.result-actions { width: 100%; max-width: 460px; margin: 0 auto; }
}
/* ── Hộp thoại (xác nhận quay lại, xem chi tiết ảnh / video) ── */
.lm-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px;
background: rgba(5,12,30,.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.lm-modal[hidden] { display: none; }
.lm-modal-box { width: min(92vw, 380px); padding: 26px 22px 20px; border-radius: 22px; background: #fff; color: var(--ink); text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.lm-modal-box h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; }
.lm-modal-box p { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: #5b6573; }
.lm-modal-actions { display: flex; gap: 10px; }
.lm-modal-actions button { flex: 1; height: 46px; border: 0; border-radius: 999px; font-size: 15px; font-weight: 600; }
.btn-stay { background: #f1f1f4; color: var(--ink); }
.btn-leave { background: #e5484d; color: #fff; }
.lm-viewer { flex-direction: column; gap: 18px; background: rgba(5,12,30,.9); }
.lm-viewer-body { display: flex; align-items: center; justify-content: center; max-width: min(94vw, 560px); max-height: 74vh; }
.lm-viewer-body img, .lm-viewer-body video { display: block; max-width: 100%; max-height: 74vh; border-radius: 16px; background: #000; object-fit: contain; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.lm-close { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 28px; line-height: 1; }
.lm-viewer-actions { display: flex; gap: 12px; }
.lm-viewer-actions .btn-cta { margin-top: 0; min-width: 120px; }
.s3d-item { cursor: pointer; }
/* ── Đang dựng video: lớp mờ phủ khung xem trước, nút Hủy thay cho Tải xuống + Chia sẻ ── */
.gen-frame::after { content: ""; position: absolute; inset: 0; border-radius: 4px; background: rgba(8,16,40,.3); pointer-events: none; }
.gen-frame .gen-pct, .gen-frame .gen-ring { z-index: 2; }
.btn-cancel { display: none; height: 54px; padding: 0 36px; border: 1.5px solid #cfd3da; border-radius: 999px; background: #fff; color: var(--ink); font-size: 16px; font-weight: 600; }
#viewResult.generating .result-actions { justify-content: center; }
#viewResult.generating #btnDownload, #viewResult.generating #btnShare { display: none; }
#viewResult.generating .btn-cancel { display: block; min-width: 180px; }