:root{--tim:#592D7D;--tim-dam:#3f1f5a;--tim-nhat:#f3eef8;--tim-vien:#d9cce8;--nen:#f6f5fa;--chu:#1f1a2e;--xam:#6b6580;--vien:#e6e1ef;--xanh:#1f9d55;--do:#d63b3b;--bo:14px}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;font-family:'Be Vietnam Pro',system-ui,sans-serif;background:var(--nen);color:var(--chu);font-size:15px;line-height:1.5}
a{color:var(--tim);text-decoration:none}h1,h2,h3{margin:0 0 .5em;line-height:1.25;letter-spacing:-.01em}h1{font-size:1.4rem}h2{font-size:1.1rem}h3{font-size:.95rem}
.thanh{background:var(--tim);color:#fff;position:sticky;top:0;z-index:20}.thanh .trong{max-width:1500px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:20px;height:54px}
.thanh .logo{font-weight:800;font-size:1.15rem;color:#fff;display:flex;align-items:center;gap:8px}.thanh .logo b{background:#fff;color:var(--tim);border-radius:7px;padding:1px 6px}
.thanh nav{display:flex;gap:4px;flex:1;overflow:auto}.thanh nav a{color:#fff;opacity:.85;padding:8px 12px;border-radius:9px;font-weight:600;font-size:.9rem;white-space:nowrap}.thanh nav a.hien{opacity:1;background:rgba(255,255,255,.14)}.thanh nav a.sap{opacity:.45;cursor:default}
.trang{max-width:1200px;margin:0 auto;padding:22px 16px 50px}body.rong .trang{max-width:1500px;padding-top:14px}
.the{background:#fff;border:1px solid var(--vien);border-radius:var(--bo);box-shadow:0 1px 2px rgba(31,26,46,.06),0 8px 24px -12px rgba(89,45,125,.18)}
.nut{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--vien);background:#fff;color:var(--chu);padding:9px 14px;border-radius:10px;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;white-space:nowrap;transition:.15s}
.nut:hover{border-color:var(--tim-vien);background:var(--tim-nhat)}.nut.chinh{background:var(--tim);border-color:var(--tim);color:#fff}.nut.chinh:hover{background:var(--tim-dam)}.nut.nho{padding:6px 10px;font-size:.8rem;border-radius:8px}.nut[disabled]{opacity:.5;cursor:not-allowed}
label{display:block;font-size:.78rem;font-weight:600;color:var(--xam);margin:0 0 4px}
select,input[type=text],input[type=number]{font:inherit;padding:8px 10px;border:1px solid var(--vien);border-radius:9px;background:#fff;width:100%}input[type=color]{width:40px;height:30px;border:1px solid var(--vien);border-radius:7px;padding:1px;background:#fff}
.goi-y{font-size:.78rem;color:var(--xam)}.tien-trinh{font-size:.83rem;color:var(--xam)}.o{margin-bottom:12px}.hd{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nhan{display:inline-block;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--tim-nhat);color:var(--tim)}
.nhom{display:inline-flex;border:1px solid var(--vien);border-radius:9px;overflow:hidden}.nhom button{border:0;background:#fff;padding:7px 12px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;color:var(--xam)}.nhom button.chon{background:var(--tim);color:#fff}
/* Trang chủ */
.cong-cu{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}.cong-cu .the{padding:20px;display:block;color:var(--chu)}.cong-cu .the:hover{border-color:var(--tim-vien)}.cong-cu .ic{font-size:2rem}.cong-cu b{display:block;margin:8px 0 4px}.cong-cu small{color:var(--xam)}.cong-cu .sap{opacity:.55}
/* Tải */
.tha{border:2px dashed var(--tim-vien);border-radius:14px;padding:34px 20px;text-align:center;color:var(--xam);cursor:pointer;transition:.15s;background:#fff}.tha.lon{padding:70px 20px;font-size:1.05rem}.tha:hover,.tha.keo{background:var(--tim-nhat);border-color:var(--tim)}.tha b{color:var(--tim)}
/* Trình chỉnh */
.bt-dau{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.editor{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:stretch;height:calc(100vh - 150px);min-height:560px}
.san{position:relative;background:#211b2d;border-radius:14px;overflow:hidden;touch-action:none;cursor:grab;user-select:none}.san.keo{cursor:grabbing}.san canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bang{background:#fff;border:1px solid var(--vien);border-radius:14px;display:flex;flex-direction:column;min-height:0}
.tab{display:flex;border-bottom:1px solid var(--vien);padding:0 8px}.tab button{flex:1;border:0;background:none;padding:12px 6px;font:inherit;font-weight:700;font-size:.86rem;color:var(--xam);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}.tab button.chon{color:var(--tim);border-color:var(--tim)}
.cuon-bang{flex:1;overflow:auto;padding:14px 16px}.tabnd{display:none}.tabnd.hien{display:block}.hang-nut{display:flex;gap:6px}
.truot{margin-bottom:8px}.truot .d{display:flex;justify-content:space-between;font-size:.8rem;font-weight:600;color:var(--xam)}.truot .d b{color:var(--chu);font-weight:600;min-width:34px;text-align:right}.truot input{width:100%;accent-color:var(--tim);margin:2px 0 0}
input[type=range]{accent-color:var(--tim)}#zoom{width:100%}
.loc-luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.loc-luoi button{border:1px solid var(--vien);border-radius:10px;background:#fff;padding:4px;cursor:pointer;font:inherit;font-size:.72rem;font-weight:600;color:var(--xam);display:grid;gap:3px}.loc-luoi button.chon{border-color:var(--tim);box-shadow:0 0 0 2px rgba(89,45,125,.18);color:var(--tim)}.loc-luoi canvas{width:100%;aspect-ratio:65/90;border-radius:7px;object-fit:cover;display:block}
.xuat{border-top:1px solid var(--vien);padding:12px 16px}
.hop{position:fixed;inset:0;background:rgba(20,14,30,.7);z-index:50;display:grid;place-items:center;padding:20px}.hop-trong{background:#fff;border-radius:14px;padding:14px;max-width:90vw;max-height:90vh;display:grid;gap:10px}.hop-trong img{max-width:80vw;max-height:78vh;object-fit:contain;border:1px solid var(--vien)}
/* Biên tập viên */
.bt{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.hd-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.hd-the{background:#fff;border:2px solid var(--vien);border-radius:12px;padding:8px;cursor:pointer;position:relative;transition:.12s}.hd-the.chon{border-color:var(--tim);background:var(--tim-nhat)}.hd-the img{width:100%;aspect-ratio:84.5/108;object-fit:contain;background:#eee;border-radius:8px;display:block}.hd-the.ngang img{aspect-ratio:108/84.5}
.hd-the .t{font-size:.78rem;font-weight:600;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hd-the .g{font-size:.7rem;color:var(--xam)}.hd-the .dau{position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--tim-vien);display:grid;place-items:center;font-size:.75rem;color:#fff}.hd-the.chon .dau{background:var(--tim);border-color:var(--tim)}.hd-the.da-in{opacity:.6}
.bang-bt{padding:16px;position:sticky;top:68px}
.ket-qua img{width:100%;border:1px solid var(--vien);border-radius:10px;background:#fff;margin-top:6px}.ket-qua .to{margin-top:10px}
@media (max-width:960px){.editor{grid-template-columns:1fr;height:auto}.san{height:70vh}.bt{grid-template-columns:1fr}.bang-bt{position:static}}