/* =========================================================
   Infographic Studio — giao diện
   Định hướng: "phòng tối" trang trọng, điểm nhấn đỏ–vàng,
   ngôi sao vàng là yếu tố nhận diện xuyên suốt.
   Font: Be Vietnam Pro (chuẩn tiếng Việt, không lỗi dấu).
   ========================================================= */

.vngi-app *,
.vngi-app *::before,
.vngi-app *::after { box-sizing: border-box; }

/* Bảo đảm thuộc tính HTML [hidden] luôn ẩn phần tử, kể cả khi class có đặt display.
   (Nếu thiếu quy tắc này, lớp phủ "đang tải", khung ảnh, công cụ chữ… sẽ hiện ngay khi mở trang.) */
.vngi-app [hidden] { display: none !important; }

.vngi-app {
	--bg:        #101319;
	--bg-2:      #161a23;
	--panel:     #1b2030;
	--panel-2:   #222840;
	--line:      rgba(255,255,255,.08);
	--line-2:    rgba(255,255,255,.14);
	--ink:       #f3f1ec;
	--ink-soft:  #aeb4c4;
	--ink-mute:  #6f7689;
	--red:       #e11d2a;
	--red-deep:  #b3121d;
	--gold:      #f5c542;
	--gold-deep: #d9a418;
	--radius:    14px;
	--radius-sm: 10px;
	--shadow:    0 18px 50px rgba(0,0,0,.45);

	font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	color: var(--ink);
	background:
		radial-gradient(1200px 600px at 15% -10%, rgba(225,29,42,.10), transparent 60%),
		radial-gradient(900px 500px at 110% 0%, rgba(245,197,66,.08), transparent 55%),
		var(--bg);
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

/* Reset cho trang độc lập */
body.vngi-standalone { margin: 0; padding: 0; background: #101319; }
body.vngi-standalone .vngi-app { box-shadow: none; }

/* ---------- Thanh trên cùng ---------- */
.vngi-topbar {
	flex: 0 0 auto;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 18px;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
	backdrop-filter: blur(6px);
}
.vngi-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vngi-emblem {
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border-radius: 11px;
	font-size: 19px; line-height: 1;
	color: #2a0608;
	background: radial-gradient(circle at 35% 30%, #ffe27a, var(--gold) 55%, var(--gold-deep));
	box-shadow: 0 6px 16px rgba(245,197,66,.28), inset 0 0 0 1px rgba(255,255,255,.4);
}
.vngi-emblem-img { width: 38px; height: 38px; border-radius: 11px; object-fit: contain; background: rgba(255,255,255,.04); padding: 3px; box-shadow: inset 0 0 0 1px var(--line-2); }
.vngi-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.vngi-brand-text strong { font-weight: 800; font-size: 15px; letter-spacing: .2px; }
.vngi-brand-text small { color: var(--ink-soft); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vngi-topbar-actions { display: flex; align-items: center; gap: 10px; }
.vngi-model-select { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.vngi-model-select select {
	background: var(--panel); color: var(--ink);
	border: 1px solid var(--line-2); border-radius: 8px;
	padding: 6px 8px; font: inherit; font-size: 12px;
}

/* ---------- Bố cục chính ---------- */
.vngi-layout { flex: 1 1 auto; display: flex; min-height: 0; }

/* ---------- Bảng điều khiển ---------- */
.vngi-panel {
	flex: 0 0 340px;
	width: 340px;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--line);
	background: linear-gradient(180deg, var(--bg-2), var(--bg));
	min-height: 0;
}
.vngi-panel-scroll { flex: 1 1 auto; overflow-y: auto; padding: 18px 18px 8px; }
.vngi-panel-scroll::-webkit-scrollbar { width: 10px; }
.vngi-panel-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 20px; border: 3px solid transparent; background-clip: content-box; }

.vngi-group {
	margin-bottom: 14px; padding: 14px 14px 13px;
	background: var(--panel); border: 1px solid var(--line);
	border-radius: 14px;
}
.vngi-group:hover { border-color: var(--line-2); }
.vngi-group-hero { background: none; border: none; padding: 0 0 4px; margin-bottom: 16px; }
.vngi-label {
	display: flex; align-items: center; gap: 7px;
	font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 11px;
}
.vngi-label::before {
	content: ""; width: 4px; height: 13px; border-radius: 3px;
	background: linear-gradient(180deg, var(--gold), var(--red)); flex: 0 0 auto;
}
.vngi-label-lg::before { display: none; }

.vngi-textarea {
	width: 100%;
	background: var(--panel);
	border: 1px solid var(--line-2);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font: inherit; font-size: 14px; line-height: 1.5;
	padding: 12px 13px;
	resize: vertical;
	transition: border-color .15s, box-shadow .15s;
}
.vngi-textarea::placeholder { color: var(--ink-mute); }
.vngi-textarea:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(245,197,66,.15);
}

/* Ô nhập 1 dòng */
.vngi-input {
	width: 100%;
	background: var(--panel);
	border: 1px solid var(--line-2);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font: inherit; font-size: 14px;
	padding: 11px 13px;
	transition: border-color .15s, box-shadow .15s;
}
.vngi-input::placeholder { color: var(--ink-mute); }
.vngi-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,197,66,.15); }

/* Ô "Nội dung infographic" nổi bật */
.vngi-group-hero { padding-bottom: 4px; }
.vngi-label-lg { font-size: 12.5px; color: var(--ink-soft); }
.vngi-desc-wrap {
	position: relative;
	background: linear-gradient(180deg, rgba(245,197,66,.05), rgba(245,197,66,0));
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	padding: 4px;
	transition: border-color .15s, box-shadow .15s;
}
.vngi-desc-wrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,197,66,.15); }
.vngi-textarea-hero {
	border: none; background: transparent;
	min-height: 132px; font-size: 15px; line-height: 1.65;
	padding: 12px 12px 6px;
}
.vngi-textarea-hero:focus { box-shadow: none; }
.vngi-desc-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 4px 11px 8px; flex-wrap: wrap;
}
.vngi-desc-tip { font-size: 11.5px; color: var(--ink-mute); }
.vngi-desc-count { font-size: 11.5px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }

.vngi-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vngi-suggest button {
	font: inherit; font-size: 11.5px;
	color: var(--ink-soft);
	background: rgba(255,255,255,.04);
	border: 1px dashed var(--line-2);
	border-radius: 20px;
	padding: 4px 11px;
	cursor: pointer;
	transition: .15s;
}
.vngi-suggest button:hover { color: var(--gold); border-color: var(--gold); background: rgba(245,197,66,.08); }

/* Đính kèm tệp */
.vngi-label-opt { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-mute); font-size: 10.5px; }
.vngi-hint { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--ink-mute); }
.vngi-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.vngi-attach-btn {
	display: inline-flex; align-items: center; gap: 8px;
	font: inherit; font-size: 13px; font-weight: 600;
	color: var(--ink); background: var(--panel);
	border: 1px dashed var(--line-2); border-radius: var(--radius-sm);
	padding: 11px 14px; width: 100%; justify-content: center;
	cursor: pointer; transition: .15s;
}
.vngi-attach-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(245,197,66,.06); }
.vngi-attach-icon { font-size: 16px; line-height: 1; }
.vngi-files { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.vngi-file {
	display: flex; align-items: center; gap: 10px;
	background: var(--panel-2); border: 1px solid var(--line);
	border-radius: 10px; padding: 7px 9px;
}
.vngi-file-thumb {
	width: 30px; height: 30px; flex: 0 0 auto; border-radius: 6px;
	background-size: cover; background-position: center; background-color: var(--panel);
	border: 1px solid var(--line-2);
}
.vngi-file-ic {
	width: 30px; height: 30px; flex: 0 0 auto; border-radius: 6px;
	display: grid; place-items: center;
	font-size: 9px; font-weight: 800; letter-spacing: .3px;
	color: #fff; background: linear-gradient(180deg, var(--red), var(--red-deep));
}
.vngi-file-name {
	flex: 1 1 auto; font-size: 12.5px; color: var(--ink-soft);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vngi-file-x {
	flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px;
	border: none; cursor: pointer; font-size: 18px; line-height: 1;
	color: var(--ink-mute); background: transparent; transition: .15s;
}
.vngi-file-x:hover { color: #fff; background: var(--red); }

/* Chữ gợi ý từ tệp */
.vngi-suggested {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin-bottom: 12px; padding: 11px 13px;
	background: rgba(245,197,66,.06);
	border: 1px solid rgba(245,197,66,.25); border-radius: var(--radius-sm);
}
.vngi-suggested-label { font-size: 12px; font-weight: 700; color: var(--gold); }
.vngi-suggested-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vngi-sg-chip {
	font: inherit; font-size: 12.5px; font-weight: 600;
	color: var(--ink); background: var(--panel-2);
	border: 1px solid var(--line-2); border-radius: 20px;
	padding: 5px 13px; cursor: pointer; transition: .15s;
	max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vngi-sg-chip:hover { color: #0e1116; background: var(--gold); border-color: var(--gold); }

/* Thanh chỉnh sửa ảnh đã tạo */
.vngi-editbar {
	margin-bottom: 12px; padding: 11px 12px;
	background: var(--panel); border: 1px solid var(--line-2);
	border-radius: var(--radius); box-shadow: var(--shadow);
}
.vngi-editbar-main { display: flex; align-items: center; gap: 9px; }
.vngi-editbar-icon { flex: 0 0 auto; font-size: 16px; color: var(--gold); }
.vngi-editbar-input {
	flex: 1 1 auto; min-width: 0;
	background: var(--bg-2); border: 1px solid var(--line-2);
	border-radius: var(--radius-sm); color: var(--ink);
	font: inherit; font-size: 14px; padding: 10px 12px;
	transition: border-color .15s, box-shadow .15s;
}
.vngi-editbar-input::placeholder { color: var(--ink-mute); }
.vngi-editbar-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,197,66,.15); }
.vngi-editbar .vngi-btn { flex: 0 0 auto; }
.vngi-editbar-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.vngi-editbar-quick button {
	font: inherit; font-size: 11.5px; color: var(--ink-soft);
	background: rgba(255,255,255,.04); border: 1px dashed var(--line-2);
	border-radius: 20px; padding: 4px 11px; cursor: pointer; transition: .15s;
}
.vngi-editbar-quick button:hover { color: var(--gold); border-color: var(--gold); background: rgba(245,197,66,.08); }

/* Chips */
.vngi-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.vngi-chip {
	font: inherit; font-size: 13px; font-weight: 500;
	color: var(--ink-soft);
	background: var(--panel-2);
	border: 1px solid var(--line-2);
	border-radius: 10px;
	padding: 8px 12px;
	cursor: pointer;
	display: inline-flex; align-items: center; gap: 7px;
	transition: .15s;
	user-select: none;
}
.vngi-chip:hover { border-color: var(--gold); color: var(--ink); }
.vngi-chip.is-active {
	color: #fff;
	border-color: transparent;
	background: linear-gradient(180deg, var(--red), var(--red-deep));
	box-shadow: 0 6px 16px rgba(225,29,42,.30);
}
.vngi-chip.is-active .vngi-sw { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
/* Chip "Tự động" — để AI quyết định */
.vngi-chip-auto {
	color: var(--gold); border-color: rgba(245,197,66,.5);
	background: rgba(245,197,66,.08); font-weight: 700;
}
.vngi-chip-auto:hover { color: var(--gold); border-color: var(--gold); }
.vngi-chip-auto.is-active {
	color: #1a1205;
	background: linear-gradient(180deg, var(--gold), var(--gold-deep));
	box-shadow: 0 6px 16px rgba(245,197,66,.3);
}

/* Ô màu trong chip bảng màu */
.vngi-sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.sw-redgold { background: linear-gradient(135deg, #da251d 50%, #ffcd00 50%); }
.sw-blue    { background: linear-gradient(135deg, #1e4fd6 50%, #cfe0ff 50%); }
.sw-green   { background: linear-gradient(135deg, #138a45 50%, #d6f5e2 50%); }
.sw-purple  { background: linear-gradient(135deg, #6b3fc4 50%, #d9d0f2 50%); }
.sw-neutral { background: linear-gradient(135deg, #2b313f 50%, #e6c98a 50%); }
.sw-navy    { background: linear-gradient(135deg, #16285c 50%, #f2c94c 50%); }
.sw-teal    { background: linear-gradient(135deg, #0e9594 50%, #d6f3f1 50%); }
.sw-sunset  { background: linear-gradient(135deg, #ff7a45 50%, #ffd0b0 50%); }
.sw-crimson { background: linear-gradient(135deg, #9b1c2e 50%, #f6ead6 50%); }
.sw-earth   { background: linear-gradient(135deg, #7a5a36 50%, #d9c7a3 50%); }
.sw-pastel  { background: linear-gradient(135deg, #f7b2c4 50%, #bfe3f2 50%); }
.sw-vibrant { background: linear-gradient(135deg, #ff4d6d 33%, #ffd23f 33%, #ffd23f 66%, #3bc9db 66%); }
.sw-mono    { background: linear-gradient(135deg, #1b1f27 50%, #e8eaee 50%); }

/* Tỉ lệ khung */
.vngi-ar { display: inline-block; border: 1.6px solid currentColor; border-radius: 2px; opacity: .85; }
.ar-sq { width: 13px; height: 13px; }
.ar-po { width: 10px; height: 14px; }
.ar-la { width: 16px; height: 11px; }

/* Chế độ chữ */
.vngi-textmode { display: flex; flex-direction: column; gap: 8px; }
.vngi-radio {
	display: block;
	padding: 11px 13px;
	border: 1px solid var(--line-2);
	border-radius: var(--radius-sm);
	background: var(--panel);
	cursor: pointer;
	transition: .15s;
	position: relative;
}
.vngi-radio input { position: absolute; opacity: 0; }
.vngi-radio.is-active { border-color: var(--gold); background: rgba(245,197,66,.07); }
.vngi-radio-title { display: block; font-weight: 600; font-size: 13.5px; }
.vngi-radio.is-active .vngi-radio-title { color: var(--gold); }
.vngi-radio-note { display: block; font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; }

/* Nâng cao */
.vngi-advanced { margin-bottom: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.vngi-advanced summary { cursor: pointer; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; list-style: none; }
.vngi-advanced summary::-webkit-details-marker { display: none; }
.vngi-advanced summary::before { content: "＋ "; color: var(--gold); }
.vngi-advanced[open] summary::before { content: "－ "; }
.vngi-advanced .vngi-group { margin-top: 14px; margin-bottom: 4px; }

/* Chân bảng điều khiển */
.vngi-panel-footer { flex: 0 0 auto; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--bg-2); }

/* ---------- Nút ---------- */
.vngi-btn {
	font: inherit; font-weight: 700; font-size: 14px;
	border: 1px solid transparent; border-radius: 11px;
	padding: 11px 16px; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	transition: transform .08s, filter .15s, background .15s, border-color .15s;
}
.vngi-btn:active { transform: translateY(1px); }
.vngi-btn-block { width: 100%; }
.vngi-btn-primary {
	color: #fff;
	background: linear-gradient(180deg, var(--red), var(--red-deep));
	box-shadow: 0 10px 24px rgba(225,29,42,.32);
}
.vngi-btn-primary:hover { filter: brightness(1.07); }
.vngi-btn-primary:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.3); box-shadow: none; }
.vngi-btn-accent {
	color: #2a1d00;
	background: linear-gradient(180deg, #ffd95e, var(--gold-deep));
	box-shadow: 0 10px 24px rgba(245,197,66,.30);
}
.vngi-btn-accent:hover { filter: brightness(1.05); }
.vngi-btn-soft { color: var(--ink); background: var(--panel-2); border-color: var(--line-2); }
.vngi-btn-soft:hover { background: #2b3253; }
.vngi-btn-ghost {
	color: var(--ink-soft); background: rgba(255,255,255,.03);
	border-color: var(--line-2); padding: 9px 14px; border-radius: 12px;
}
.vngi-btn-ghost:hover {
	color: var(--ink); border-color: var(--gold);
	background: rgba(245,197,66,.08); transform: translateY(-1px);
}
.vngi-btn-ghost:active { transform: translateY(0); }
.vngi-btn-ic { flex: 0 0 auto; opacity: .9; }
.vngi-btn-ghost:hover .vngi-btn-ic { opacity: 1; }

.vngi-hamburger { width: 16px; height: 2px; background: currentColor; position: relative; display: inline-block; }
.vngi-hamburger::before, .vngi-hamburger::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; }
.vngi-hamburger::before { top: -5px; } .vngi-hamburger::after { top: 5px; }

/* ---------- Khu vực hiển thị ---------- */
.vngi-stage { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.vngi-stage-tools {
	flex: 0 0 auto;
	display: flex; gap: 9px; flex-wrap: wrap;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	background: rgba(0,0,0,.15);
}
.vngi-stage-tools .vngi-btn { padding: 9px 14px; font-size: 13px; }

.vngi-canvas-wrap {
	flex: 1 1 auto; min-height: 0;
	display: grid; place-items: center;
	padding: 24px;
	overflow: auto;
}

/* Trạng thái rỗng */
.vngi-empty { position: relative; text-align: center; max-width: 460px; color: var(--ink-soft); padding: 10px; }
.vngi-empty-bg { position: absolute; inset: -40px -60px; z-index: 0; overflow: hidden; pointer-events: none; }
.vngi-orb { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .55; animation: vngiFloat 9s ease-in-out infinite; }
.vngi-orb-1 { width: 220px; height: 220px; left: 4%; top: 8%; background: radial-gradient(circle, rgba(225,29,42,.55), transparent 70%); }
.vngi-orb-2 { width: 200px; height: 200px; right: 6%; top: 22%; background: radial-gradient(circle, rgba(245,197,66,.45), transparent 70%); animation-delay: -3s; }
.vngi-orb-3 { width: 180px; height: 180px; left: 34%; bottom: 0; background: radial-gradient(circle, rgba(80,120,255,.35), transparent 70%); animation-delay: -6s; }
@keyframes vngiFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(0,-18px) scale(1.08); } }
.vngi-grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 38px 38px; mask-image: radial-gradient(circle at 50% 45%, #000 30%, transparent 72%); -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 30%, transparent 72%); }

.vngi-empty-art { position: relative; z-index: 1; width: 132px; height: 132px; margin: 0 auto 26px; display: grid; place-items: center; }
.vngi-empty-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(245,197,66,.4); animation: vngiSpinSlow 16s linear infinite; }
.vngi-empty-ring-2 { inset: 18px; border: 1.5px solid rgba(225,29,42,.35); border-top-color: transparent; border-left-color: transparent; animation: vngiSpinSlow 9s linear infinite reverse; }
@keyframes vngiSpinSlow { to { transform: rotate(360deg); } }
.vngi-empty-core {
	position: relative; z-index: 2; width: 76px; height: 76px; border-radius: 22px;
	display: grid; place-items: center;
	background: radial-gradient(circle at 35% 28%, #ffe27a, var(--gold) 52%, var(--gold-deep));
	box-shadow: 0 12px 34px rgba(245,197,66,.4), inset 0 1px 2px rgba(255,255,255,.6);
	animation: vngiBob 4s ease-in-out infinite;
}
@keyframes vngiBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.vngi-empty-core img { width: 70%; height: 70%; object-fit: contain; }
.vngi-empty-star { font-size: 38px; color: #2a0608; line-height: 1; }
.vngi-spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: vngiTwinkle 2.4s ease-in-out infinite; }
.vngi-spark-a { top: 6px; right: 18px; animation-delay: 0s; }
.vngi-spark-b { bottom: 16px; left: 10px; background: #fff; box-shadow: 0 0 10px #fff; animation-delay: .8s; }
.vngi-spark-c { top: 40%; right: 0; background: var(--red); box-shadow: 0 0 10px var(--red); animation-delay: 1.5s; }
@keyframes vngiTwinkle { 0%,100% { transform: scale(.5); opacity: .3; } 50% { transform: scale(1.2); opacity: 1; } }
.vngi-empty h2 { position: relative; z-index: 1; margin: 0 0 8px; font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -.2px; }
.vngi-empty p { position: relative; z-index: 1; margin: 0; font-size: 14.5px; line-height: 1.6; }
.vngi-empty-tips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.vngi-empty-tips span { font-size: 12px; color: var(--ink-soft); background: rgba(255,255,255,.05); border: 1px solid var(--line-2); padding: 5px 12px; border-radius: 20px; }

/* Khung ảnh + lớp chữ */
.vngi-frame {
	position: relative;
	max-width: 100%; max-height: 100%;
	border-radius: 12px; overflow: hidden;
	box-shadow: var(--shadow), 0 0 0 1px var(--line-2);
	background: #0b0d12;
	line-height: 0;
}
.vngi-frame img { display: block; max-width: 100%; max-height: calc(100dvh - 220px); width: auto; height: auto; }
.vngi-overlay { position: absolute; inset: 0; }

/* Ô chữ chèn */
.vngi-textbox {
	position: absolute;
	transform: translate(-50%, -50%);
	cursor: move;
	padding: 2px 4px;
	max-width: 92%;
	line-height: 1.25;
	white-space: pre-wrap;
	word-break: break-word;
	outline: 1.5px dashed transparent;
	border-radius: 3px;
	touch-action: none;
}
.vngi-textbox:hover { outline-color: rgba(255,255,255,.45); }
.vngi-textbox.is-selected { outline: 1.5px solid var(--gold); }
.vngi-textbox[contenteditable="true"] { cursor: text; outline: 1.5px solid var(--gold); }

/* ---------- Trình sửa chữ ---------- */
.vngi-texttool {
	position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
	z-index: 30;
	display: flex; flex-direction: column; gap: 8px;
	padding: 11px 12px;
	background: rgba(20,24,33,.96);
	border: 1px solid var(--line-2);
	border-radius: 14px;
	box-shadow: var(--shadow);
	backdrop-filter: blur(10px);
}
.vngi-texttool-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vngi-tt-select { background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; }
.vngi-tt-btn {
	min-width: 34px; height: 32px; padding: 0 8px;
	background: var(--panel); color: var(--ink);
	border: 1px solid var(--line-2); border-radius: 8px;
	font: inherit; cursor: pointer; transition: .15s;
}
.vngi-tt-btn:hover { background: var(--panel-2); }
.vngi-tt-btn.is-active { background: var(--gold); color: #2a1d00; border-color: transparent; }
.vngi-tt-color { width: 34px; height: 32px; padding: 2px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); cursor: pointer; }
.vngi-tt-check { font-size: 12.5px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 5px; }
.vngi-tt-range { font-size: 12.5px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; }
.vngi-tt-range input { width: 130px; accent-color: var(--gold); }
.vngi-tt-align { display: inline-flex; gap: 4px; }
.vngi-tt-danger { color: #ff8a8a; border-color: rgba(255,80,80,.4); }
.vngi-tt-danger:hover { background: rgba(255,60,60,.15); }

/* ---------- Loading ---------- */
.vngi-loading {
	position: absolute; inset: 0; z-index: 60;
	display: grid; place-items: center;
	background: radial-gradient(circle at 50% 40%, rgba(20,24,33,.82), rgba(8,10,15,.94));
	backdrop-filter: blur(10px);
	animation: vngiFade .25s ease;
	overflow: hidden;
}
@keyframes vngiFade { from { opacity: 0; } to { opacity: 1; } }
.vngi-loading-aura {
	position: absolute; width: 520px; height: 520px; border-radius: 50%;
	background: radial-gradient(circle, rgba(245,197,66,.18), rgba(225,29,42,.10) 45%, transparent 70%);
	animation: vngiAura 3.4s ease-in-out infinite; pointer-events: none;
}
@keyframes vngiAura { 0%,100% { transform: scale(.9); opacity: .6; } 50% { transform: scale(1.12); opacity: 1; } }
.vngi-loading-card { position: relative; text-align: center; width: min(380px, 88vw); }
.vngi-loader { position: relative; width: 128px; height: 128px; margin: 0 auto 26px; }
.vngi-loader-glow { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle, rgba(245,197,66,.35), transparent 68%); animation: vngiPulse 1.8s ease-in-out infinite; }
.vngi-loader-core {
	position: absolute; inset: 0; display: grid; place-items: center;
	animation: vngiPulse 1.6s ease-in-out infinite;
}
.vngi-loader-core img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(245,197,66,.6)); }
.vngi-loader-star { font-size: 42px; color: var(--gold); filter: drop-shadow(0 0 16px rgba(245,197,66,.6)); }
@keyframes vngiPulse { 0%,100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.14); opacity: 1; } }
.vngi-loader-ring { position: absolute; inset: 0; }
.vngi-ring-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 4; }
.vngi-ring-fg {
	fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round;
	stroke-dasharray: 210 276; transform-origin: 50% 50%;
	animation: vngiSpin 1.2s cubic-bezier(.6,.1,.4,.9) infinite;
	filter: drop-shadow(0 0 4px rgba(245,197,66,.5));
}
.vngi-ring-fg2 {
	fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round;
	stroke-dasharray: 90 207; transform-origin: 50% 50%;
	animation: vngiSpinRev 1.6s linear infinite;
	opacity: .85;
}
@keyframes vngiSpin { to { transform: rotate(360deg); } }
@keyframes vngiSpinRev { to { transform: rotate(-360deg); } }
.vngi-loader-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; top: 50%; left: 50%; margin: -4.5px; }
.vngi-loader-dot-1 { background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: vngiOrbit 1.2s linear infinite; }
.vngi-loader-dot-2 { background: var(--red); box-shadow: 0 0 10px var(--red); animation: vngiOrbit 1.6s linear infinite reverse; }
@keyframes vngiOrbit { from { transform: rotate(0) translateX(58px); } to { transform: rotate(360deg) translateX(58px); } }
.vngi-loading-title { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.2px; }
.vngi-loading-msg { margin: 0 0 18px; font-size: 14px; color: var(--ink-soft); min-height: 21px; transition: opacity .3s; }
.vngi-loading-bar { height: 6px; border-radius: 20px; background: rgba(255,255,255,.08); overflow: hidden; position: relative; }
.vngi-loading-bar span { display: block; height: 100%; width: 0%; border-radius: 20px; background: linear-gradient(90deg, var(--red), var(--gold)); transition: width .4s ease; box-shadow: 0 0 12px rgba(245,197,66,.5); }
.vngi-loading-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transform: translateX(-100%); animation: vngiShimmer 1.6s ease-in-out infinite; }
@keyframes vngiShimmer { to { transform: translateX(100%); } }
.vngi-loading-steps { display: flex; justify-content: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.vngi-loading-steps span { font-size: 11.5px; color: var(--ink-mute); padding: 4px 11px; border-radius: 20px; border: 1px solid var(--line-2); transition: .3s; }
.vngi-loading-steps span.is-on { color: #2a1d00; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); border-color: transparent; font-weight: 700; }

/* ---------- Toast ---------- */
.vngi-toast {
	position: absolute; left: 50%; top: 78px; transform: translateX(-50%);
	z-index: 80;
	max-width: 88vw;
	padding: 11px 16px; border-radius: 11px;
	font-size: 13.5px; font-weight: 600;
	background: #20242f; color: var(--ink);
	border: 1px solid var(--line-2);
	box-shadow: var(--shadow);
	animation: vngiToast .3s ease;
}
.vngi-toast.is-error { background: #2a1416; border-color: rgba(255,80,80,.4); color: #ffd5d5; }
.vngi-toast.is-success { background: #122418; border-color: rgba(80,220,140,.35); color: #cdf5da; }
@keyframes vngiToast { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Trạng thái đang tạo của nút */
.vngi-btn.is-loading { pointer-events: none; }
.vngi-btn.is-loading .vngi-btn-label::after {
	content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px;
	border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%;
	vertical-align: -2px; animation: vngiSpin2 .7s linear infinite;
}
@keyframes vngiSpin2 { to { transform: rotate(360deg); } }

/* ---------- Lớp phủ panel trên mobile ---------- */
.vngi-scrim {
	position: fixed; inset: 0; z-index: 40;
	background: rgba(0,0,0,.5);
	opacity: 0; pointer-events: none; transition: opacity .2s;
}

/* ====================== Responsive ====================== */
@media (max-width: 880px) {
	.vngi-topbar { height: auto; min-height: 58px; padding: 8px 14px; position: relative; z-index: 20; }
	.vngi-toggle-label { display: none; }

	.vngi-panel {
		position: fixed; top: 0; left: 0; bottom: 0;
		width: min(86vw, 360px); flex-basis: auto;
		z-index: 50;
		transform: translateX(-100%);
		transition: transform .26s cubic-bezier(.4,0,.2,1);
		box-shadow: var(--shadow);
	}
	.vngi-app.panel-open .vngi-panel { transform: translateX(0); }
	.vngi-app.panel-open .vngi-scrim { opacity: 1; pointer-events: auto; }

	.vngi-canvas-wrap { padding: 14px; }
	.vngi-frame img { max-height: calc(100dvh - 190px); }
	.vngi-stage-tools { padding: 10px 12px; }
	.vngi-stage-tools .vngi-btn { flex: 1 1 auto; }

	.vngi-texttool { left: 8px; right: 8px; transform: none; bottom: 10px; }
	.vngi-texttool-row { justify-content: center; }
	.vngi-tt-range input { width: 90px; }

	.vngi-editbar-main { flex-wrap: wrap; }
	.vngi-editbar-input { flex: 1 1 100%; }
	.vngi-editbar .vngi-btn { flex: 1 1 auto; }
}

@media (min-width: 881px) {
	.vngi-scrim { display: none; }
	#vngiPanelToggle { display: none; }
}

/* Giảm chuyển động nếu người dùng yêu cầu */
@media (prefers-reduced-motion: reduce) {
	.vngi-loader-star, .vngi-loader-core, .vngi-loader-glow, .vngi-ring-fg, .vngi-ring-fg2,
	.vngi-loader-dot, .vngi-loading-aura, .vngi-loading-bar::after,
	.vngi-orb, .vngi-empty-ring, .vngi-empty-core, .vngi-spark,
	.vngi-btn.is-loading .vngi-btn-label::after { animation: none; }
	.vngi-panel { transition: none; }
}

/* Focus rõ ràng cho bàn phím */
.vngi-app :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* Khu vực thành viên VIP trên thanh trên cùng */
.vngi-member { display: flex; align-items: center; gap: 10px; margin-right: 4px; }
.vngi-vip-badge {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 12px; font-weight: 800; letter-spacing: .3px;
	color: #1a1205; background: linear-gradient(90deg, var(--gold), var(--gold-deep));
	padding: 5px 11px; border-radius: 20px; box-shadow: 0 4px 14px rgba(245,197,66,.3);
}
.vngi-link-soft {
	color: var(--ink-soft); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
	padding: 7px 12px; border-radius: 20px; border: 1px solid var(--line-2);
	background: rgba(255,255,255,.02); transition: .15s;
}
.vngi-link-soft:hover { color: var(--ink); border-color: var(--line-2); background: rgba(255,255,255,.07); }
.vngi-btn-gold {
	display: inline-flex; align-items: center; gap: 6px;
	color: #1a1205; background: linear-gradient(180deg, #ffd95e, var(--gold-deep));
	border: none; border-radius: 20px; font-weight: 800; text-decoration: none;
	box-shadow: 0 6px 18px rgba(245,197,66,.32); white-space: nowrap; transition: .15s;
}
.vngi-btn-gold:hover { filter: brightness(1.05); color: #1a1205; transform: translateY(-1px); box-shadow: 0 9px 22px rgba(245,197,66,.4); }
.vngi-btn-sm { padding: 7px 14px; font-size: 13px; }
@media (max-width: 880px) {
	.vngi-member .vngi-link-soft { display: none; }
	.vngi-btn-gold .vngi-btn-sm { padding: 6px 10px; }
}

/* Lớp phủ bản quyền dự phòng (client) */
.vngi-wm {
	position: absolute; inset: 0; overflow: hidden; pointer-events: none;
	display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
	gap: 26px 34px; transform: rotate(-28deg) scale(1.4); z-index: 3;
}
.vngi-wm span {
	color: rgba(255,255,255,.92); font-size: 22px; font-weight: 800;
	white-space: nowrap; letter-spacing: .3px;
	background: rgba(12,14,20,.42); border: 2px solid rgba(245,197,66,.85);
	border-radius: 8px; padding: 6px 14px;
	text-shadow: 0 2px 4px rgba(0,0,0,.7);
	box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* ---------- Thư viện ảnh đã tạo ---------- */
.vngi-gal-ic { font-size: 15px; line-height: 1; }
.vngi-gallery-scrim {
	position: absolute; inset: 0; z-index: 70; background: rgba(6,8,12,.6);
	opacity: 0; transition: opacity .24s; backdrop-filter: blur(2px);
}
.vngi-gallery-scrim.is-open { opacity: 1; }
.vngi-gallery-drawer {
	position: absolute; top: 0; right: 0; bottom: 0; z-index: 71;
	width: min(440px, 92vw);
	background: linear-gradient(180deg, var(--panel), var(--bg-2));
	border-left: 1px solid var(--line-2);
	box-shadow: -20px 0 60px rgba(0,0,0,.5);
	transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
	display: flex; flex-direction: column; padding: 18px;
}
.vngi-gallery-drawer.is-open { transform: translateX(0); }
.vngi-gallery-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.vngi-gallery-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); }
.vngi-gallery-close {
	width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
	background: var(--panel-2); border: 1px solid var(--line-2); color: var(--ink-soft); font-size: 15px;
}
.vngi-gallery-close:hover { color: var(--ink); }
.vngi-gallery-note { margin: 4px 0 14px; font-size: 12.5px; color: var(--ink-mute); }
.vngi-gallery-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
	overflow-y: auto; padding-right: 4px; align-content: start;
}
.vngi-gal-cell {
	position: relative; border-radius: 12px; overflow: hidden;
	background: #0b0d12; border: 1px solid var(--line-2); aspect-ratio: 1 / 1;
}
.vngi-gal-cell img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; display: block; transition: transform .2s; }
.vngi-gal-cell:hover img { transform: scale(1.04); }
.vngi-gal-del {
	position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 8px;
	background: rgba(10,12,18,.72); color: #fff; border: none; cursor: pointer; font-size: 12px;
	opacity: 0; transition: opacity .15s;
}
.vngi-gal-cell:hover .vngi-gal-del { opacity: 1; }
.vngi-gal-del:hover { background: var(--red); }
.vngi-gal-del:disabled { opacity: .5; }
.vngi-gal-time {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px;
	font-size: 10.5px; color: #e9ecf2; background: linear-gradient(0deg, rgba(0,0,0,.6), transparent);
}
@media (max-width: 880px) {
	.vngi-gallery-grid { grid-template-columns: repeat(2, 1fr); }
	#vngiGalleryBtn .vngi-toggle-label { display: none; }
}

/* Thanh trạng thái tài khoản */
.vngi-status {
	display: inline-flex; align-items: center; gap: 0;
	border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden;
	background: var(--panel); margin-right: 4px;
}
.vngi-status-acct {
	font-size: 11.5px; font-weight: 800; letter-spacing: .3px;
	padding: 6px 11px; color: #fff;
}
.vngi-status-acct.is-guest { background: linear-gradient(180deg, #5b6273, #444b5a); }
.vngi-status-acct.is-user  { background: linear-gradient(180deg, #2f6df0, #2050c8); }
.vngi-status-acct.is-vip   { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: #1a1205; }
.vngi-status-quota { font-size: 11.5px; color: var(--ink-soft); padding: 6px 12px; white-space: nowrap; }
.vngi-status-name { font-size: 12px; font-weight: 700; color: var(--ink); padding: 6px 10px 6px 12px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 880px) {
	.vngi-status-quota { display: none; }
}

/* Khóa tính năng VIP (chỉnh sửa ảnh / thêm chữ) cho người chưa nâng cấp */
.vngi-vip-locked { position: relative; }
.vngi-editbar.vngi-vip-locked { opacity: .92; }
.vngi-editbar.vngi-vip-locked::after {
	content: "★ Tính năng VIP"; position: absolute; top: -9px; right: 12px;
	font-size: 10.5px; font-weight: 800; color: #1a1205;
	background: linear-gradient(90deg, var(--gold), var(--gold-deep));
	padding: 2px 9px; border-radius: 20px; box-shadow: 0 3px 8px rgba(245,197,66,.35);
}
.vngi-btn.vngi-vip-locked::after {
	content: "★"; margin-left: 5px; color: var(--gold); font-size: 12px;
}

/* ---------- Shortcode toàn màn hình ---------- */
.vngi-has-studio { overflow: hidden !important; }
html.vngi-has-studio, body.vngi-has-studio { margin-top: 0 !important; height: 100%; }
.vngi-has-studio .vngi-app {
	position: fixed; inset: 0; z-index: 99990;
	width: 100vw; height: 100vh; height: 100dvh;
	max-width: none; border-radius: 0; margin: 0;
}
.vngi-has-studio #wpadminbar { display: none !important; }

/* Nhãn VIP nhỏ trên tùy chọn chữ */
.vngi-radio-vip {
	display: inline-block; font-size: 9.5px; font-weight: 800; color: #1a1205;
	background: linear-gradient(90deg, var(--gold), var(--gold-deep));
	padding: 1px 7px; border-radius: 12px; margin-left: 6px; vertical-align: middle;
}

/* ---------- Cải thiện hiển thị di động ---------- */
@media (max-width: 880px) {
	.vngi-app { height: 100dvh; }
	.vngi-topbar { flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; }
	.vngi-topbar-actions { flex-wrap: wrap; gap: 7px; row-gap: 7px; }
	.vngi-status { order: 3; flex: 1 1 100%; justify-content: flex-start; }
	.vngi-status-quota { display: inline-block; }
	.vngi-status-name { max-width: 38vw; }
	.vngi-brand-text small { display: none; }
	.vngi-gallery-drawer { width: 100vw; }
	.vngi-gallery-grid { grid-template-columns: repeat(2, 1fr); }
	.vngi-member { gap: 7px; }
	.vngi-btn-gold.vngi-btn-sm { padding: 6px 11px; font-size: 12px; }
}
@media (max-width: 520px) {
	.vngi-gallery-grid { grid-template-columns: 1fr 1fr; }
	.vngi-loading-steps { display: none; }
	.vngi-status-name { display: none; }
	.vngi-empty h2 { font-size: 20px; }
}

/* Nhãn VIP nhỏ trên nhóm tính năng + khóa nâng cao/đính kèm */
.vngi-vip-tag {
	display: inline-block; font-size: 9.5px; font-weight: 800; color: #1a1205;
	background: linear-gradient(90deg, var(--gold), var(--gold-deep));
	padding: 1px 7px; border-radius: 12px; margin-left: 6px; vertical-align: middle;
	letter-spacing: .3px;
}
.vngi-advanced.vngi-vip-locked > summary { opacity: .8; }
.vngi-advanced.vngi-vip-locked > summary::-webkit-details-marker { opacity: .4; }