/* ===== THEME DEFAULTS (ghi đè bởi brand.js) ===== */
:root{
  --violet:#3D1152; --purple:#522D6D; --lav:#6E5688; --black:#292026;
  --yellow:#FEE687; --shadow:#860F4A; --paper:#F5F1F8;
  --head:'Bebas Neue',Impact,sans-serif; --body:'Jost',sans-serif; --mono:'Jost',sans-serif;
  --hw:400; --hls:1px; --rad:10px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--body);background:#1c1a1f;color:#eee;padding:0 0 80px;}

/* ===== HEADER / CHROME ===== */
.topbar{display:flex;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid #332b39;position:sticky;top:0;background:#161318;z-index:50;flex-wrap:wrap;}
.topbar a.home{color:#b7a9c6;text-decoration:none;font-size:14px;font-weight:600;}
.topbar a.home:hover{color:#fff;}
.topbar h1{font-size:18px;font-weight:700;color:#fff;flex:1;}
.brandsw{display:flex;gap:0;border:1px solid #463b50;border-radius:8px;overflow:hidden;}
.brandsw button{background:#221d27;color:#bbb;border:none;padding:8px 14px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.brandsw button.on{background:var(--violet);color:var(--yellow);}
.wrap{padding:24px 22px;}
.sub{color:#b7a9c6;font-size:13px;margin-bottom:20px;line-height:1.5;max-width:860px;}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;}
.btn{background:var(--violet);color:var(--yellow);border:none;border-radius:9px;padding:11px 18px;font-family:var(--body);font-weight:700;font-size:14px;cursor:pointer;transition:.15s;}
.btn:hover{filter:brightness(1.12);}
.btn.alt{background:#352b3d;color:#eee;}

/* ===== HUB (index) ===== */
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;}
.modcard{display:block;text-decoration:none;background:#26212c;border:1px solid #3a3340;border-radius:14px;padding:22px;transition:.15s;}
.modcard:hover{border-color:var(--violet);transform:translateY(-2px);}
.modcard .ic{font-size:30px;}
.modcard h3{color:#fff;font-size:17px;margin:12px 0 6px;font-weight:700;}
.modcard p{color:#9b8caf;font-size:13px;line-height:1.45;}

/* ===== POSTER GRID / CARDS ===== */
.grid{display:flex;flex-wrap:wrap;gap:30px;align-items:flex-start;}
.card{background:#2a2430;border-radius:14px;padding:14px;width:568px;max-width:100%;}
.pscale{width:100%;overflow:hidden;border-radius:6px;}
.controls{display:flex;flex-direction:column;gap:9px;margin-top:12px;}
.row{display:flex;gap:9px;}
.controls input,.controls select,.controls textarea{background:#1c1a1f;border:1px solid #463b50;color:#eee;border-radius:8px;padding:9px 11px;font-family:var(--body);font-size:13px;width:100%;}
.controls textarea{resize:vertical;min-height:54px;line-height:1.3;}
.controls input.num{max-width:78px;text-align:center;font-weight:700;}
.controls label{font-size:11px;color:#9b8caf;display:block;margin-bottom:3px;}
.field{flex:1;}
.filebtn{background:#352b3d;border:1px dashed #5a4a66;border-radius:8px;padding:10px;text-align:center;font-size:13px;cursor:pointer;color:#cbb;}
.filebtn:hover{border-color:var(--yellow);color:#fff;}
.dlrow{display:flex;gap:9px;margin-top:4px;}
.dlrow .btn{flex:1;padding:9px;font-size:13px;}

/* ===== POSTER ===== */
.poster{width:540px;background:var(--paper);position:relative;overflow:hidden;flex:none;}
.p-top{position:absolute;top:0;left:0;right:0;text-align:center;padding:18px 40px 0;font-family:var(--mono);font-size:9px;letter-spacing:1.4px;color:var(--lav);text-transform:uppercase;line-height:1.55;font-weight:600;z-index:3;}
.p-logo{position:absolute;left:30px;bottom:24px;z-index:5;font-family:var(--head);font-weight:var(--hw);font-size:25px;letter-spacing:var(--hls);color:var(--black);}
.p-logo img{height:42px;display:block;}
/* kiểu tóc */
.p-badgewrap{position:absolute;top:52px;left:26px;z-index:3;display:flex;align-items:flex-end;gap:12px;}
.p-num{background:var(--violet);color:var(--yellow);font-family:var(--head);font-weight:var(--hw);font-size:40px;border-radius:var(--rad);padding:8px 16px;line-height:1.05;min-width:62px;text-align:center;}
.p-name small{display:block;font-size:12px;font-weight:700;color:var(--purple);letter-spacing:2px;font-family:var(--mono);text-transform:uppercase;margin-bottom:3px;}
.p-name b{display:block;font-family:var(--head);font-weight:var(--hw);font-size:42px;color:var(--black);letter-spacing:var(--hls);line-height:1;}
.p-photo{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
.p-photo-empty{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;color:var(--lav);font-size:15px;background:repeating-linear-gradient(45deg,#e2dbe8 0 16px,#eee 16px 32px);}
/* sản phẩm */
.prod-head{position:absolute;top:96px;left:40px;right:40px;z-index:3;font-family:var(--head);font-weight:var(--hw);font-size:52px;line-height:1.02;color:var(--black);text-transform:uppercase;white-space:pre-line;letter-spacing:var(--hls);}
.prod-arrow{position:absolute;z-index:3;}
.prod-stage{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;}
.prod-stage img{max-width:100%;max-height:100%;display:block;}
.prod-shadow{position:absolute;z-index:1;height:30px;background:radial-gradient(ellipse at center, rgba(20,15,20,.22), rgba(20,15,20,0) 70%);}
.prod-empty{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--lav);font-size:15px;border:1px dashed #c9bcd6;border-radius:10px;background:rgba(255,255,255,.4);}
/* hướng dẫn - bước / bìa */
.step-empty{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--lav);font-size:15px;background:repeating-linear-gradient(45deg,#e2dbe8 0 16px,#eee 16px 32px);}
.step-badge{position:absolute;top:48px;left:26px;z-index:3;background:var(--violet);color:var(--yellow);font-family:var(--head);font-weight:var(--hw);font-size:38px;border-radius:var(--rad);padding:8px 16px;min-width:60px;text-align:center;line-height:1.05;}
.step-cover{position:absolute;top:46px;left:26px;right:26px;z-index:3;}
.step-cover-label{font-size:11px;font-weight:600;color:var(--violet);letter-spacing:2.5px;font-family:var(--mono);text-transform:uppercase;background:var(--paper);display:inline-block;padding:4px 9px;border-radius:var(--rad);}
.step-cover-name{font-family:var(--head);font-weight:var(--hw);font-size:48px;color:var(--black);line-height:1;letter-spacing:var(--hls);margin-top:8px;background:var(--paper);display:inline-block;padding:3px 13px 5px;border-radius:var(--rad);}
.step-band{position:absolute;left:0;right:0;bottom:0;height:150px;z-index:3;background:var(--violet);padding:18px 26px;display:flex;align-items:center;gap:16px;overflow:hidden;}
.step-text{flex:1;}
.step-kicker{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:1.2px;color:var(--yellow);margin-bottom:6px;text-transform:uppercase;}
.step-cap{font-family:var(--body);font-weight:600;font-size:23px;color:#fff;line-height:1.25;}
.step-logo{flex:none;font-family:var(--head);font-weight:var(--hw);font-size:22px;letter-spacing:var(--hls);color:#fff;}
.step-logo img{height:38px;display:block;}

/* ===== PROMPT PANEL ===== */
.promptwrap{background:#2a2430;border-radius:14px;padding:18px 20px;max-width:900px;}
.promptwrap .note{color:#b7a9c6;font-size:13px;margin-bottom:14px;line-height:1.5;}
.pmrow{margin-top:16px;}
.pmrow h3{font-size:14px;color:#fff;margin-bottom:6px;font-weight:700;}
.pmrow textarea{width:100%;height:170px;background:#1c1a1f;border:1px solid #463b50;color:#ddd;border-radius:8px;padding:10px;font-family:monospace;font-size:12px;line-height:1.45;resize:vertical;}
.pmrow .btn{margin-top:7px;}
.nameinp{width:100%;background:#1c1a1f;border:1px solid #463b50;color:#eee;border-radius:8px;padding:11px;font-family:var(--body);font-size:14px;}