/* Controls của editor: header ẩn / hiện, hộp thoại xuất, cài đặt nền, ô màu, bảng chọn màu, ô soạn chữ nâng cao. */
/* Trong editor mặc định ẩn header của trang; nút ☰ trên thanh editor để hiện lại */
body.in-editor:not(.show-appbar) #appbar { display: none; }

/* Thông báo Pro miễn phí ở bản beta trong hộp thoại xuất */
.proinfo { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border: 1px dashed rgba(251,191,36,.6); border-radius: 10px; background: rgba(251,191,36,.08); color: var(--text); font-size: 13px; line-height: 1.5; }
.proinfo .crown { margin-top: 2px; }
#shImgThumb { width: 64px; height: 64px; object-fit: cover; object-position: center; }
.btn.iconbtn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 6px 10px; }
#dlgImage { width: min(640px, calc(100vw - 32px)); }
#dlgImage .libgrid { grid-template-columns: repeat(4, 1fr); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#dlgImage .libpick img { aspect-ratio: 2 / 3; height: auto; }
#dlgImage .libitem { min-width: 0; }
.fillrow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.fillrow .swatch { width: 64px; height: 64px; flex: none; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); object-fit: cover; cursor: pointer; }
.fillrow .btn { flex: 1 1 auto; }
.fillrow .btn.iconbtn { flex: 0 0 auto; }
.swatchwrap { position: relative; flex: none; line-height: 0; }
.gedit .ghead { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 4px; color: var(--muted); font-size: 12.5px; }
.grows { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.grow { display: grid; grid-template-columns: 40px 1fr 40px 22px; gap: 3px; align-items: center; padding: 3px 4px; border-radius: 8px; border: 1px solid transparent; }
.grow.on { background: rgba(109,91,255,.18); border-color: rgba(109,91,255,.5); }
.grow .pct { display: flex; align-items: center; gap: 1px; color: var(--muted); font-size: 11px; min-width: 0; }
.grow .gcolor { display: flex; align-items: center; gap: 6px; min-width: 0; background: var(--panel); border-radius: 6px; padding: 0; overflow: hidden; }
.grow input[type=number], .grow .ghex { width: 100%; min-width: 0; background: var(--panel); border: 1px solid transparent; border-radius: 6px; padding: 4px 2px; color: var(--text); font: inherit; font-size: 11.5px; text-transform: uppercase; }
.grow .gcolor .ghex { background: transparent; padding: 2px 0; border: 0; border-radius: 0; }
.grow input.gcol::-webkit-color-swatch-wrapper { padding: 0; }
.grow input.gcol::-webkit-color-swatch { border: 0; border-radius: 0; }
.grow input.gcol::-moz-color-swatch { border: 0; border-radius: 0; }
.grow input[type=number] { text-align: right; -moz-appearance: textfield; appearance: textfield; }
.grow input[type=number]::-webkit-inner-spin-button { display: none; }
.grow input:focus { border-color: var(--brand); outline: none; }
.grow input.gcol[type=color] { width: 24px; height: 24px; flex: none; padding: 0; border: 0; border-radius: 0; background: none; }
.grow .rbtn { width: 22px; height: 22px; padding: 0; display: grid; place-items: center; }
.grow .rbtn:disabled { opacity: .35; cursor: default; }
.sfield { display: flex; align-items: center; gap: 6px; }
.sfield input[type=range] { flex: 1; min-width: 0; width: auto; }
.sfield .snum { width: 48px; flex: none; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 5px 4px; color: var(--text); font: inherit; font-size: 12.5px; text-align: right; -moz-appearance: textfield; appearance: textfield; }
.sfield .snum.sm { width: 34px; padding: 5px 3px; }
.sfield .snum::-webkit-inner-spin-button { display: none; }
.sfield .snum:focus { border-color: var(--brand); outline: none; }
.sfield .sunit { color: var(--muted); font-size: 12px; margin-left: -2px; }
/* các phần của cài đặt nền (nền / hoạ tiết) tách nhau bằng đường kẻ, không đóng khung */
.bgframe + .bgframe { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }
.imgbox.imgwide { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.imgbox.imgwide .thumbwrap { width: 100%; }
.imgbox.imgwide .thumbwrap img, .imgbox.imgwide .imgph { width: 100%; height: 100px; object-fit: cover; object-position: center; display: block; }
.imgbox.imgwide .imgph { border: 2px dashed var(--line); border-radius: 8px; background: transparent; cursor: pointer; position: relative; }
.imgbox.imgwide .imgph::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 22px; }
.imgchoose { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); max-width: calc(100% - 12px); background: rgba(0,0,0,.7); color: #fff; border: 0; border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 12px; white-space: normal; text-align: center; cursor: pointer; line-height: 1.25; }
.imgchoose:hover { background: var(--brand); }
.imgpv { width: 100%; height: 100px; background-size: contain; background-repeat: no-repeat; background-position: center; cursor: pointer; }
.imgwide .thumbwrap.has { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: conic-gradient(#cfcfcf 25%, #fff 0 50%, #cfcfcf 0 75%, #fff 0) 0 0 / 12px 12px; }
.imgwide .thumbwrap.has .imgpv { height: 98px; }
.imgwide .thumbwrap.inherited .imgpv { opacity: .7; }
.gedit .gpick { position: absolute; inset: 6px 0; width: 100%; height: calc(100% - 12px); opacity: 0; cursor: pointer; padding: 0; border: 0; }
.grow.gsolidrow { grid-template-columns: 1fr 46px; gap: 8px; border-color: transparent; background: none; margin-bottom: 4px; }
.grow .gcolor { width: auto; }
.grow .gcolor .ghex { width: 60px; flex: none; }
.grow .gsw { position: relative; flex: 1 1 auto; min-width: 24px; height: 24px; background: conic-gradient(#cfcfcf 25%, #fff 0 50%, #cfcfcf 0 75%, #fff 0) 0 0 / 8px 8px; }
.grow .gsw-fill { position: absolute; inset: 0; }
.grow .gsw input.gcol[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
/* ô màu + hex và ô alpha dính liền nhau: chỗ tiếp giáp không bo góc, có đường kẻ mảnh ngăn cách */
.grow.gsolidrow { gap: 0; }
.grow .gcolor:has(+ .pct) { border-radius: 6px 0 0 6px; }
.grow .gcolor + .pct { margin-left: -3px; background: var(--panel); border-radius: 0 6px 6px 0; border-left: 1px solid var(--line); height: 24px; padding-right: 4px; box-sizing: border-box; }
.grow.gsolidrow .gcolor + .pct { margin-left: 0; }
.grow .gcolor + .pct input[type=number] { background: transparent; border-radius: 0; }
.grow .gcolor + .pct:focus-within { border-left-color: var(--brand); }
/* viền xám mảnh bao quanh cả khối ColorField (ô màu + hex + alpha) */
.grow .gcolor { border: 1px solid var(--line); box-sizing: border-box; height: 26px; }
.grow .gcolor:has(+ .pct) { border-right: 0; }
.grow .gcolor .gsw { height: 100%; }
.grow .gcolor + .pct { height: 26px; border: 1px solid var(--line); }
.grow .gcolor + .pct:focus-within { border-color: var(--brand); }
/* viền vẽ đè lên trên bằng ::after (không phải border của khung) nên ô màu tràn kín đến mép và bị cắt đúng theo góc bo của khung */
.grow .gcolor { border: 0; position: relative; }
.grow .gcolor::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; }
.grow .gcolor:has(+ .pct)::after { border-right: 0; }

.lygroup { margin: 0 0 10px; padding: 6px 10px; border-radius: 6px; background: rgba(109,91,255,.14); color: var(--text); font-size: 12px; font-weight: 600; }

/* mục thêm / bớt size ở cuối danh sách chọn size: canh giữa, to và đậm hơn */
#sizeSel option[value="__manage"] { text-align: center; font-size: 15px; font-weight: 700; padding: 10px 0; }
/* hàng nút của chữ chèn thêm: cách danh sách chip bên trên */
#slotTexts > .btnrow { margin-top: 10px; }
/* chữ chèn thêm: đường kẻ tách khỏi Headline / Subtitle mặc định */
#textList { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
/* Bảng chọn màu chung (ô vuông + hue + alpha + RGB) */
.cp { position: fixed; z-index: 10000; width: 236px; padding: 10px; display: flex; flex-direction: column; gap: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.cp-sv, .cp-hue, .cp-alpha { position: relative; border-radius: 6px; touch-action: none; cursor: crosshair; }
.cp-sv { height: 140px; }
.cp-hue { height: 12px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.cp-alpha { height: 12px; background: conic-gradient(#cfcfcf 25%, #fff 0 50%, #cfcfcf 0 75%, #fff 0) 0 0 / 8px 8px; }
.cp-alpha-fill { position: absolute; inset: 0; border-radius: inherit; }
.cp-thumb { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45); pointer-events: none; top: 50%; }
.cp-sv .cp-thumb { top: 0; }
.cp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cp-f { display: flex; flex-direction: column; align-items: stretch; gap: 3px; margin: 0 !important; }
.cp-f input, .cp-hex input { width: 100%; min-width: 0; padding: 5px 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; font-size: 12.5px; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.cp-f input::-webkit-inner-spin-button { display: none; }
.cp-f input:focus, .cp-hex input:focus { border-color: var(--brand); outline: none; }
.cp-f span, .cp-hex span { color: var(--muted); font-size: 10.5px; text-align: center; }
.cp-hex { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0 !important; }
.cp-hex input { text-transform: uppercase; text-align: left; padding-left: 8px; }
.cp-mode { display: flex; gap: 6px; align-items: center; }
.cp-sel { flex: 1; min-width: 0; padding: 5px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; font-size: 12.5px; }
.cp-eye { flex: none; width: 30px; height: 28px; display: grid; place-items: center; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--text); cursor: pointer; }
.cp-eye:hover { border-color: var(--brand); }
/* kiểu chữ riêng của Title / Subtitle trên màn hình: cách khung soạn bên trên */
.rtestyle { margin-top: 10px; }
/* Title và Subtitle ở thẻ Text của màn hình: chung một khung, tách nhau bằng đường kẻ; khi vùng chữ được chọn (bấm trên canvas hoặc vào ô soạn) thì khung tô màu */
#rteBoxes { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
#rteBoxes > .rtebox { padding: 10px; }
#rteBoxes > .rtebox + .rtebox { border-top: 1px solid var(--line); }
#rteBoxes.sel { background: rgba(109,91,255,.07); border-color: rgba(109,91,255,.45); }
/* Thanh độ trong suốt: nền caro + gradient trong suốt → đặc, núm tròn viền trắng (giống thanh alpha của bảng chọn màu) */
.sfield.alpha input[type=range] { -webkit-appearance: none; appearance: none; height: 12px; border-radius: 6px; padding: 0; cursor: pointer;
  background: linear-gradient(to right, rgba(138,147,168,0), rgb(138,147,168)), conic-gradient(#cfcfcf 25%, #fff 0 50%, #cfcfcf 0 75%, #fff 0) 0 0 / 8px 8px; }
.sfield.alpha input[type=range]::-webkit-slider-runnable-track { height: 12px; background: transparent; border-radius: 6px; }
.sfield.alpha input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -1px; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45); }
.sfield.alpha input[type=range]::-moz-range-track { height: 12px; background: transparent; border-radius: 6px; }
.sfield.alpha input[type=range]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45); }