@import url("/fonts/fonts.css");
/* Banner Studio HYT – kiểu banner (dùng chung editor / thumbnail / trang khách)
   Mọi kích thước dùng em để tự co theo font-size của phần tử .bn */
.bn{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:.6em 1.2em;gap:.25em;font-family:'Be Vietnam Pro',Arial,Helvetica,sans-serif;background:#fff}
.bn>*{position:relative;z-index:1}
.bn .l1,.bn .l2,.bn .l3{margin:0;line-height:1.15;white-space:pre-wrap;word-break:break-word;max-width:100%}
.bn .l1{font-size:1.25em;font-weight:800}
.bn .l2{font-size:1.9em;font-weight:900}
.bn .l3{font-size:1.3em;font-style:italic}
.bn>.txtarea{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em;text-align:center;z-index:1}
.bn>.txt-el{position:absolute;z-index:3;cursor:move;user-select:none;touch-action:none;text-align:center}
.bn .txtarea p,.bn .txt-el p{cursor:move}
.bn>.txt-el.sel{outline:2px dashed #2563eb;outline-offset:2px}
.bn>.txt-el .rz{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;background:#fff;border:2px solid #2563eb;border-radius:2px;cursor:ew-resize;display:none}
.bn>.txt-el.sel .rz{display:block}
.bn>.logo-el{position:absolute;z-index:2;cursor:move;user-select:none;touch-action:none}
.bn .logo-el img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.bn>.logo-el.sel{outline:2px dashed #2563eb;outline-offset:2px}
.bn .logo-el .rz{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;background:#fff;border:2px solid #2563eb;border-radius:2px;cursor:nwse-resize;display:none}
.bn .logo-el.sel .rz{display:block}
.bn .logo-el .del{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:#dc2626;color:#fff;font-size:10px;line-height:16px;text-align:center;cursor:pointer;display:none}
.bn .logo-el.sel .del{display:block}
.thumb{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:.8em 1.2em;line-height:1.2;font-weight:700}
.thumb>span{position:relative;z-index:1}
  /* =====================================================================
   THƯ VIỆN KIỂU BANNER – mỗi class là 1 "bộ hoa văn + khung + chữ".
   Mọi kích thước dùng em để tự co theo banner thật lẫn thumbnail.
   ===================================================================== */
.t-candy::before,.t-xmas::before,.t-confetti::before,.t-polka::before,.t-scallop::before,.t-sunburst::before,.t-grid::before{content:"";position:absolute;inset:.85em;background:rgba(255,255,255,.92);border-radius:inherit;z-index:0}
.t-scallop::before{inset:.95em}.t-sunburst::before{border-radius:1.4em}
.orn::before,.orn::after{position:absolute;z-index:0;font-size:1.7em;line-height:1}

/* --- Nhóm KHUNG CƠ BẢN (lấy từ ảnh thực tế) --- */
.t-tiktok{border:.12em solid #ef4a7a;border-radius:3em;color:#ef4a7a;font-family:'Montserrat',Arial,sans-serif}
.t-tiktok .l3{font-family:'Playfair Display',Georgia,serif;color:#f05d8c}
.t-script{border:.08em solid #f43f5e;border-radius:4em;font-family:'Pacifico','Dancing Script',"Segoe Script",cursive;color:#f43f5e}
.t-script .l1{font-size:2.4em;font-weight:400}.t-script .l2{font-size:1.4em;font-weight:400}.t-script .l3{font-size:1.4em;font-style:normal}
.t-corp{border:.22em solid #1e3a8a;border-radius:1.4em;color:#dc2626;font-family:'Montserrat',Arial,sans-serif}
.t-corp .l1{color:#1e3a8a}.t-corp .l2{font-size:1.6em}.t-corp .l3{font-style:normal;font-weight:900;font-size:1.6em}
.t-oval{background:#1e3a8a;color:#fff;border-radius:50%;border:.18em solid #fff;outline:.12em solid #1e3a8a;text-transform:uppercase}
.t-oval .l3{font-family:'Pacifico','Dancing Script',cursive;text-transform:none;font-size:1.6em;border-top:.08em solid #fff;padding-top:.2em}
.t-double{border:.12em solid #dc2626;outline:.12em solid #dc2626;outline-offset:.18em;border-radius:1.1em;color:#dc2626;font-family:'Anton','Arial Black',Arial,sans-serif;text-transform:uppercase}
.t-double .l2{font-size:1.5em}.t-double .l3{font-style:normal;font-weight:900;font-size:1.5em}
.t-cloud{background:#1e40af;color:#fff;border-radius:45% 45% 40% 40%/60% 60% 40% 40%;font-family:'Pacifico','Dancing Script',cursive;border:.25em solid #fff;outline:.18em solid #1e40af}
.t-cloud .l1{font-size:2em;font-weight:400}.t-cloud .l2{font-size:1.5em;font-weight:400}.t-cloud .l3{font-style:normal;font-size:1.4em}
.t-vexere{border:.12em solid #1d4ed8;outline:.08em solid #1d4ed8;outline-offset:.12em;border-radius:1.5em;color:#1d4ed8;font-family:'Nunito',Arial,sans-serif}
.t-vexere .l3{font-family:'Pacifico','Dancing Script',cursive;font-style:normal;font-size:1.7em}
.t-gold{background:linear-gradient(135deg,#7f1d1d,#b91c1c);color:#fde68a;border:.18em double #fde68a;border-radius:.8em;font-family:'Playfair Display','Playfair Display',Georgia,serif}
.t-gold .l2{color:#fff}
.t-bday{background:linear-gradient(135deg,#fdf2f8,#fce7f3);border:.12em dashed #ec4899;border-radius:2em;color:#be185d;font-family:'Pacifico','Dancing Script',cursive}
.t-bday .l1{font-size:2.2em;font-weight:400}.t-bday .l2{font-size:1.3em;font-weight:400;font-family:Arial,sans-serif}.t-bday .l3{font-style:normal;font-size:1.3em}
.t-tet{background:#b91c1c;color:#fcd34d;border:.22em solid #fcd34d;border-radius:.6em;font-family:'Playfair Display',Georgia,serif}
.t-tet .l2{color:#fff;font-size:1.7em}
.t-condole{background:#fff;color:#111;border:.18em solid #111;border-radius:.3em;font-family:"Times New Roman",'Playfair Display',Georgia,serif}
.t-condole .l2{font-size:1.5em}.t-condole .l3{color:#444}
.t-minimal{border:.05em solid #111;border-radius:0;color:#111;font-family:'Be Vietnam Pro',Helvetica,Arial,sans-serif;letter-spacing:.05em}
.t-minimal .l1{font-weight:400;font-size:1em;text-transform:uppercase}.t-minimal .l2{font-weight:600;font-size:1.8em}.t-minimal .l3{font-style:normal;font-size:1em}

/* --- Nhóm HOA VĂN NỀN --- */
.t-candy{background:repeating-linear-gradient(45deg,#f43f5e 0 .7em,#fff .7em 1.4em);border-radius:1.5em;color:#e11d48;font-family:'Anton','Arial Black',Arial,sans-serif}
.t-xmas{background:repeating-linear-gradient(45deg,#b91c1c 0 .7em,#fff .7em 1.4em,#15803d 1.4em 2.1em,#fff 2.1em 2.8em);border-radius:.8em;color:#15803d;font-family:'Playfair Display',Georgia,serif}
.t-xmas .l2{color:#b91c1c}
.t-polka{background:#fdf2f8 radial-gradient(#f9a8d4 28%,transparent 30%) 0 0/1.6em 1.6em;border-radius:1em;color:#be185d;font-family:'Pacifico','Dancing Script',cursive}
.t-polka .l1{font-size:2em;font-weight:400}.t-polka .l2{font-family:Arial,sans-serif}
.t-confetti{background:#fff;background-image:radial-gradient(#f43f5e 18%,transparent 20%),radial-gradient(#3b82f6 18%,transparent 20%),radial-gradient(#facc15 18%,transparent 20%),radial-gradient(#22c55e 18%,transparent 20%);background-size:2.2em 2.2em;background-position:0 0,1.1em 1.1em,.5em 1.6em,1.6em .4em;border-radius:1em;color:#111;font-family:'Anton','Arial Black',Arial,sans-serif}
.t-dongson{background:#991b1b;color:#fcd34d;border:.25em double #fcd34d;border-radius:.4em;font-family:'Playfair Display',Georgia,serif;
  background-image:repeating-radial-gradient(circle at 0 0,transparent 0 .7em,rgba(252,211,77,.45) .7em .85em),repeating-radial-gradient(circle at 100% 100%,transparent 0 .7em,rgba(252,211,77,.45) .7em .85em);
  background-size:9em 9em,9em 9em;background-repeat:no-repeat;background-position:0 0,100% 100%}
.t-dongson .l2{color:#fff}
.t-water{background:radial-gradient(circle at 15% 30%,#fbcfe8 0,transparent 38%),radial-gradient(circle at 85% 70%,#bfdbfe 0,transparent 38%),radial-gradient(circle at 60% 10%,#fde68a 0,transparent 30%),#fff;color:#4c1d95;font-family:'Pacifico','Dancing Script',cursive;border-radius:1em}
.t-water .l1{font-size:2em;font-weight:400}.t-water .l3{font-style:normal}
.t-marble{background:linear-gradient(120deg,#fff 0,#e5e7eb 25%,#fff 40%,#d1d5db 65%,#fff 100%);color:#b7791f;border:.1em solid #b7791f;font-family:'Playfair Display',Georgia,serif;letter-spacing:.04em}
.t-marble .l2{text-transform:uppercase}
.t-kraft{background:linear-gradient(135deg,#d9b382,#c9a06a);color:#5b3a1a;border:.12em dashed #5b3a1a;border-radius:.3em;font-family:'Playfair Display',Georgia,serif}
.t-kraft .l2{text-transform:uppercase;letter-spacing:.06em}
.t-grid{background:#fff linear-gradient(#e5e7eb 1px,transparent 1px) 0 0/1em 1em,linear-gradient(90deg,#e5e7eb 1px,transparent 1px) 0 0/1em 1em;background-color:#fff;color:#dc2626;border:.1em solid #dc2626;font-family:"Courier New",monospace}
.t-sunburst{background:repeating-conic-gradient(from 0deg,#fde68a 0 9deg,#fbbf24 9deg 18deg);color:#7c2d12;border-radius:2em;font-family:'Anton','Arial Black',Arial,sans-serif}
.t-stars{background:#1e1b4b radial-gradient(#fff 12%,transparent 14%) 0 0/1.4em 1.4em,radial-gradient(#fde68a 10%,transparent 12%) .7em .7em/2.1em 2.1em;background-color:#1e1b4b;color:#fde68a;border:.1em solid #fde68a;border-radius:.6em;font-family:'Playfair Display',Georgia,serif}
.t-stars .l2{color:#fff}
.t-pastel{background:linear-gradient(135deg,#fecaca,#fde68a,#bbf7d0,#bfdbfe,#e9d5ff);color:#312e81;border-radius:2em;font-family:'Anton','Arial Black',Arial,sans-serif}
.t-scallop{background:#f472b6 radial-gradient(circle,#fff .42em,transparent .5em) 0 0/1.2em 1.2em;background-color:#f472b6;border-radius:.5em;color:#be185d;font-family:'Pacifico','Dancing Script',cursive}
.t-scallop .l2{font-family:Arial,sans-serif}
.t-wave{background:radial-gradient(circle at 50% 100%,#0284c7 .8em,transparent .9em) 0 100%/1.7em 1.7em repeat-x,radial-gradient(circle at 50% 0,#0284c7 .8em,transparent .9em) 0 0/1.7em 1.7em repeat-x,#e0f2fe;color:#0c4a6e;font-family:'Anton','Arial Black',Arial,sans-serif}
.t-corner{background:linear-gradient(135deg,#1d4ed8 0 2.6em,transparent 2.6em),linear-gradient(-45deg,#1d4ed8 0 2.6em,transparent 2.6em),#fff;border:.1em solid #1d4ed8;color:#1d4ed8}
.t-split{background:linear-gradient(105deg,#1e3a8a 0 30%,#fff 30%);color:#1e3a8a;border:.1em solid #1e3a8a;padding-left:32%}
.t-rainbow{background:#fff;border:.1em solid #e5e7eb;border-top:.8em solid;border-image:linear-gradient(90deg,#f43f5e,#f59e0b,#22c55e,#3b82f6,#8b5cf6) 1;color:#111;font-family:'Anton','Arial Black',Arial,sans-serif}
.t-blackgold{background:#000;color:#d4af37;border:.14em solid #d4af37;border-radius:.4em;font-family:'Playfair Display',Georgia,serif}
.t-blackgold .l2{color:#fff;letter-spacing:.05em}

/* --- Nhóm HÌNH DÁNG --- */
.t-ribbon{background:#dc2626;color:#fde047;clip-path:polygon(0 0,100% 0,95% 50%,100% 100%,0 100%,5% 50%);padding-left:9%;padding-right:9%;font-family:'Anton','Arial Black',Arial,sans-serif;text-transform:uppercase}
.t-ribbon .l3{color:#fff;font-style:normal}
.t-badge{background:#b91c1c;color:#fff;clip-path:polygon(2% 50%,8% 0,92% 0,98% 50%,92% 100%,8% 100%);padding-left:10%;padding-right:10%;font-family:'Anton','Arial Black',Arial,sans-serif;text-transform:uppercase}
.t-badge .l2{color:#fde047}
.t-tag{background:#16a34a;color:#fff;clip-path:polygon(0 50%,7% 0,100% 0,100% 100%,7% 100%);padding-left:10%;font-family:'Anton','Arial Black',Arial,sans-serif}
.t-tag .l2{color:#fef08a}
.t-ticket{background:#fbbf24;color:#7c2d12;font-family:'Playfair Display',Georgia,serif;
  -webkit-mask:radial-gradient(circle at 0 50%,transparent 1.1em,#000 1.2em) 0/50% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 1.1em,#000 1.2em) 100%/50% 100% no-repeat;
  mask:radial-gradient(circle at 0 50%,transparent 1.1em,#000 1.2em) 0/50% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 1.1em,#000 1.2em) 100%/50% 100% no-repeat}
.t-ticket::before{content:"";position:absolute;inset:.55em 1.6em;border:.08em dashed #7c2d12;z-index:0}
.t-ticket .l2{text-transform:uppercase}
.t-polaroid{background:#fce7f3;background-clip:padding-box;border:.6em solid #fff;border-bottom:2.2em solid #fff;box-shadow:0 .2em .8em rgba(0,0,0,.25);color:#9d174d;font-family:'Pacifico','Dancing Script',cursive}
.t-polaroid .l1{font-size:2em;font-weight:400}
.t-stamp{background:#fff;border:.45em dotted #1d4ed8;color:#1d4ed8;font-family:'Playfair Display',Georgia,serif}
.t-stamp .l2{text-transform:uppercase}
.t-pill{background:#fff;border:.15em solid #dc2626;border-radius:1.2em;color:#dc2626;padding-top:1.4em}
.t-pill::before{content:"★ ★ ★";position:absolute;top:.25em;left:50%;transform:translateX(-50%);background:#dc2626;color:#fff;padding:.05em .9em;border-radius:1em;font-size:.75em;letter-spacing:.2em;z-index:0}

/* --- Nhóm HIỆU ỨNG CHỮ --- */
.t-neon{background:#0f172a;color:#f0abfc;text-shadow:0 0 .15em #e879f9,0 0 .5em #d946ef;border:.1em solid #e879f9;border-radius:1em;box-shadow:inset 0 0 .8em #d946ef}
.t-neon .l2{color:#fff}
.t-3d{background:#fef3c7;color:#dc2626;text-shadow:.04em .04em 0 #7f1d1d,.08em .08em 0 #7f1d1d,.12em .12em 0 #7f1d1d;font-family:'Anton','Arial Black',Arial,sans-serif;border:.18em solid #7f1d1d;text-transform:uppercase}
.t-outline{background:#fff;color:#1e3a8a;border:.12em solid #1e3a8a;font-family:'Anton','Arial Black',Arial,sans-serif;text-transform:uppercase}
.t-outline .l2{color:#fff;-webkit-text-stroke:.035em #1e3a8a;paint-order:stroke fill}
.t-gradtext{background:#fff;border:.1em solid #e5e7eb;border-radius:1em;color:#334155}
.t-gradtext .l2{background:linear-gradient(90deg,#f43f5e,#8b5cf6,#2563eb);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-brush{background:#fff;color:#111;border:.06em solid #111}
.t-brush .l2{background:#facc15;display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .25em;line-height:1.3}
.t-chalk{background:#14532d;color:#f8fafc;border:.3em solid #7c5c3b;font-family:'Itim','Comic Sans MS',cursive}
.t-chalk::before{content:"";position:absolute;inset:.5em;border:.07em dashed rgba(255,255,255,.6);z-index:0}
.t-chalk .l2{color:#fde68a}
.t-deco{background:#111;color:#d4af37;border:.08em solid #d4af37;outline:.05em solid #d4af37;outline-offset:.3em;font-family:'Playfair Display',Georgia,serif;letter-spacing:.1em;text-transform:uppercase}
.t-deco::before,.t-deco::after{content:"◆";position:absolute;font-size:1em;z-index:0}
.t-deco::before{left:.4em;top:.2em}.t-deco::after{right:.4em;bottom:.2em}
.t-ornate{background:#fffbeb;color:#7c2d12;border:.35em double #7c2d12;font-family:'Playfair Display',Georgia,serif}
.t-ornate::before,.t-ornate::after{content:"❦";position:absolute;font-size:1.6em;z-index:0;color:#b45309}
.t-ornate::before{left:.3em;top:.1em}.t-ornate::after{right:.3em;bottom:.1em;transform:rotate(180deg)}

/* --- Nhóm TRANG TRÍ GÓC (emoji/ornament) --- */
.t-floral{background:linear-gradient(135deg,#fff1f2,#ffe4e6);border:.18em solid #fb7185;border-radius:2em;color:#be123c;font-family:'Playfair Display',Georgia,serif}
.t-floral::before{content:"🌸🌸";left:.3em;top:.15em}.t-floral::after{content:"🌸🌸";right:.3em;bottom:.15em;transform:rotate(180deg)}
.t-balloon{background:#eff6ff;border:.15em solid #60a5fa;border-radius:2em;color:#1d4ed8;font-family:'Anton','Arial Black',Arial,sans-serif}
.t-balloon::before{content:"🎈";left:.4em;top:.1em}.t-balloon::after{content:"🎈🎈";right:.4em;bottom:.1em}
.t-lantern{background:linear-gradient(#b91c1c,#7f1d1d);color:#fde68a;border:.18em solid #fde68a;font-family:'Playfair Display',Georgia,serif}
.t-lantern::before{content:"🏮";left:.5em;top:.1em}.t-lantern::after{content:"🏮";right:.5em;top:.1em}
.t-lantern .l2{color:#fff}
.t-leaf{background:#f0fdf4;border:.08em solid #4d7c0f;border-radius:.5em;color:#365314;font-family:'Playfair Display',Georgia,serif}
.t-leaf::before{content:"🌿";left:.3em;top:.1em}.t-leaf::after{content:"🌿";right:.3em;bottom:.1em;transform:rotate(180deg)}
.t-hearts{background:#fff0f6;border:.12em dashed #f472b6;border-radius:1.5em;color:#db2777;font-family:'Pacifico','Dancing Script',cursive}
.t-hearts::before{content:"💕";left:.4em;top:.15em}.t-hearts::after{content:"💕";right:.4em;bottom:.15em}
.t-hearts .l2{font-family:Arial,sans-serif}
.t-lotus{background:#fffbeb;color:#78350f;border:.1em solid #d97706;border-radius:1em;font-family:'Playfair Display',Georgia,serif}
.t-lotus::before{content:"🪷";left:.4em;top:.2em}.t-lotus::after{content:"🪷";right:.4em;top:.2em}
.t-cross{background:#fff;color:#111;border-left:1.2em solid #111;border-radius:0;font-family:"Times New Roman",'Playfair Display',Georgia,serif;letter-spacing:.03em}
.t-cross::before{content:"✝";left:-1em;top:50%;transform:translateY(-50%);color:#fff;font-size:1.3em}
.t-cross .l2{font-weight:700}
.t-sparkle{background:#fff;border:.12em solid #f59e0b;border-radius:1em;color:#b45309;font-family:'Anton','Arial Black',Arial,sans-serif}
.t-sparkle::before{content:"✨";left:.4em;top:.1em}.t-sparkle::after{content:"✨";right:.4em;bottom:.1em}
.t-trophy{background:linear-gradient(135deg,#1e3a8a,#1d4ed8);color:#fde68a;border-radius:1em;border:.12em solid #fde68a}
.t-trophy::before{content:"🏆";left:.4em;top:50%;transform:translateY(-50%);font-size:2.4em}.t-trophy::after{content:"🏆";right:.4em;top:50%;transform:translateY(-50%);font-size:2.4em}
.t-trophy .l2{color:#fff}
.t-cake{background:#fff7ed;border:.12em solid #fb923c;border-radius:2em;color:#c2410c;font-family:'Pacifico','Dancing Script',cursive}
.t-cake::before{content:"🎂";left:.4em;top:.1em}.t-cake::after{content:"🎉";right:.4em;bottom:.1em}
.t-cake .l1{font-size:2em;font-weight:400}
.t-grad{background:#1e1b4b;color:#fff;border:.12em solid #fbbf24;border-radius:.6em;font-family:'Playfair Display',Georgia,serif}
.t-grad::before{content:"🎓";left:.4em;top:.1em}.t-grad::after{content:"🎓";right:.4em;top:.1em}
.t-grad .l2{color:#fbbf24}
.t-house{background:#ecfdf5;border:.12em solid #059669;border-radius:1em;color:#065f46;font-family:'Playfair Display',Georgia,serif}
.t-house::before{content:"🏡";left:.4em;top:.1em}.t-house::after{content:"🌳";right:.4em;bottom:.1em}
.t-moon{background:#312e81;color:#fde68a;border:.1em solid #fde68a;border-radius:1em;font-family:'Playfair Display',Georgia,serif}
.t-moon::before{content:"🌕";left:.5em;top:.1em}.t-moon::after{content:"🏮";right:.5em;bottom:.1em}
.t-moon .l2{color:#fff}
.t-rose{background:#fff;border:.1em solid #e11d48;border-radius:0;color:#9f1239;font-family:'Playfair Display',Georgia,serif}
.t-rose::before{content:"🌹";left:.3em;bottom:.1em;font-size:2.2em}.t-rose::after{content:"🌹";right:.3em;top:.1em;font-size:2.2em;transform:rotate(180deg)}
.t-plum{background:#fef2f2;border:.14em solid #b91c1c;border-radius:.4em;color:#b91c1c;font-family:'Playfair Display',Georgia,serif}
.t-plum::before{content:"🌸";left:.3em;top:.1em;font-size:2.2em}.t-plum::after{content:"🧧";right:.3em;bottom:.1em}
.t-plum .l2{color:#991b1b}